import{j as e}from"./jsx-runtime-CnH95YSl.js";import{u as _,R as G,P as t}from"./ResourceAccessPolicyComponentsStorybookThemeDecorator-Bo_QNpfC.js";import{a as C,j as v}from"./emotion-react-jsx-runtime.browser.esm-DL0BDwaj.js";import{h as L}from"./OdysseyThemeProvider-Bh0Bu-2o.js";import{r as s}from"./index-NdkWRN8K.js";import{a as d}from"./index-B-lxVbXh.js";import{O as J}from"./OdysseyStorybookThemeDecorator-BuDiOG2V.js";import{M as h}from"./Surface-DTngmQRF.js";import{M as f}from"./Form-iTx8DKdm.js";import{M as c}from"./TextField-BhK0y2Zt.js";import{M as n}from"./Button-BEA5U6Tg.js";import{B as y}from"./Breadcrumbs-Bp-jt6t5.js";import{M as I}from"./MenuButton-B3T7c15t.js";import{M as R}from"./MenuItem-CmSG6PNu.js";import{M as V}from"./Drawer-CXQ3piJR.js";import{M as x}from"./Layout-DGOs1275.js";import"./Typography-r6MlG5YM.js";import"./Typography-ClQ35Rr-.js";import"./Box-BcMTQ_R2.js";import"./createBox-Dxawkfow.js";import"./Chip-CXnMieIl.js";import"./createSvgIcon-ClUWwDzL.js";import"./useIsFocusVisible-DH0qxT5e.js";import"./ButtonBase-BNqa2TMD.js";import"./assertThisInitialized-B9jnkVVz.js";import"./inheritsLoose-CJ6Ie9dp.js";import"./TransitionGroupContext-DAL84N7p.js";import"./Link-DNIf0luC.js";import"./Menu-K9lpVvDG.js";import"./getReactElementRef-DsIevm5t.js";import"./resolveComponentProps-DXQ8X87i.js";import"./isHostComponent-DVu5iVWx.js";import"./Grow-C8kUeGCY.js";import"./utils-kUZVaD1e.js";import"./index-B5xazMy1.js";import"./_commonjsHelpers-gnU0ypJ3.js";import"./index-DieBXP3Z.js";import"./ownerDocument-DW-IO8s5.js";import"./ownerWindow-HkKU3E4x.js";import"./debounce-Be36O1Ab.js";import"./Modal-CSDyCVCf.js";import"./getScrollbarSize-Bqq2hMjQ.js";import"./createChainedFunction-BO_9K8Jh.js";import"./Portal-C6D59xAE.js";import"./Fade-dUgBN8rJ.js";import"./Paper-D-_O-EjU.js";import"./MenuList-BMOesnfs.js";import"./List-CmjR1pNu.js";import"./i18next-7SyOfhCu.js";import"./OdysseyProvider-qIn9QVYS.js";import"./v4-CtRu48qb.js";import"./index-BJTM6NaI.js";import"./Typography-Cz6D417Y.js";import"./useUniqueId-Bsgqe1tm.js";import"./createUniqueId-ByTaVY63.js";import"./Field-DH3L8v09.js";import"./Box-1mvP3NLW.js";import"./ListItem-C0ExFtXb.js";import"./utils-iop7lDec.js";import"./useFormControl-BMISTZuX.js";import"./FormLabel-CiGre9wK.js";import"./ScreenReaderText-CebALBsG.js";import"./visuallyHidden-Dan1xhjv.js";import"./FormHelperText-CsNAE1E3.js";import"./FieldHint-B3Jif_Up.js";import"./inputUtils-Dbi8XkA6.js";import"./InputBase-DeB4_faH.js";import"./InputAdornment-CdR3XT6f.js";import"./BaseButton-DYZHKnV3.js";import"./MuiPropsContext-DhRylJZk.js";import"./Tooltip-CsVWtVfL.js";import"./Tooltip-Cq2rQGbD.js";import"./useControlled-NQulfz4l.js";import"./Popper-BARIxJrI.js";import"./popper-BVOCD5jc.js";import"./Button-BzIwUmSM.js";import"./Group-mTVRC79V.js";import"./User-CyxEAfVT.js";import"./MenuItem-vhp8G-Nb.js";import"./Home-la7Lmt_L.js";import"./BaseMenuButton-BIietjUB.js";import"./MenuContext-DKMyPMNY.js";import"./More-DLQ2RjWn.js";import"./FullScreenOverlay-BTMDlJhE.js";/*!
 * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
 * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
 *
 * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *
 * See the License for the specific language governing permissions and limitations under the License.
 */const K="data-unified-ui-shell",Q=()=>{const[r,a]=s.useState(!1);return s.useEffect(()=>{a(!!document.querySelector(`[${K}]`))},[]),r};/*!
 * Copyright (c) 2025-present, Okta, Inc. and/or its affiliates. All rights reserved.
 * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
 *
 * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *
 * See the License for the specific language governing permissions and limitations under the License.
 */const X=({onMount:r,onUpdate:a})=>{const i=s.useRef(!1),o=s.useRef(r);s.useEffect(()=>{var l;i.current?a==null||a():(i.current=!0,(l=o.current)==null||l.call(o))},[a])},Y=L("div",{shouldForwardProp:r=>r!=="odysseyDesignTokens"&&r!=="hasUiShell"&&r!=="isFullWidth"})(({hasUiShell:r,isFullWidth:a,odysseyDesignTokens:i})=>({maxWidth:a?"100%":`calc(1440px + ${i.Spacing6} + ${i.Spacing6})`,marginInline:a&&!r?i.Spacing6:"auto",padding:r?0:i.Spacing6})),Z=L("div",{shouldForwardProp:r=>!["drawerVariant","isDrawerOpen","isFirstRender","odysseyDesignTokens"].includes(r)})(({drawerVariant:r,isDrawerOpen:a,isFirstRender:i,odysseyDesignTokens:o})=>({"@keyframes animate-drawer-open":{"0%":{gridTemplateColumns:"minmax(0, 1fr) 0"},"100%":{gridTemplateColumns:"minmax(0, 1fr) 360px"}},"@keyframes animate-drawer-close":{"0%":{gridTemplateColumns:"minmax(0, 1fr) 360px"},"100%":{gridTemplateColumns:"minmax(0, 1fr) 0"}},display:"grid",gridGap:r==="persistent"&&!a?0:o.Spacing4,gap:r==="persistent"&&!a?0:o.Spacing4,marginBlock:o.Spacing6,gridTemplateColumns:r==="persistent"?a?"minmax(0, 1fr) 360px":"minmax(0, 1fr) 0":"minmax(0, 1fr)",animation:r==="persistent"&&(!i||a)?`animate-drawer-${a?"open":"close"} 225ms cubic-bezier(0, 0, 0.2, 1)`:void 0,"& > div":{minWidth:0}})),U=({headerComponent:r,children:a,drawer:i,isFullWidth:o=!1,testId:l="page-template"})=>{const P=_(),{isOpen:z,variant:W}=(i==null?void 0:i.props)??{},q=Q(),k=s.useRef(!0),N=k.current,$=s.useCallback(()=>{k.current=!1},[]);return X({onMount:$}),C(Y,{"data-testid":l,hasUiShell:q,isFullWidth:o,odysseyDesignTokens:P,children:[r&&v("div",{children:r}),C(Z,{drawerVariant:W,isDrawerOpen:z,isFirstRender:N,odysseyDesignTokens:P,children:[v("div",{children:a}),v("div",{children:i})]},"template-content")]})},m=s.memo(U);m.displayName="PageTemplate";const Ha={component:m,decorators:[J,G],parameters:{layout:"fullscreen"},tags:["autodocs"]},u={render:r=>e.jsx(m,{headerComponent:e.jsxs(t,{children:[e.jsxs(t.Breadcrumbs,{homeHref:"#",children:[e.jsx(y,{href:"#",onClick:d("Page Title click"),children:"Page Title"},"page1"),e.jsx(y,{children:"Current Page"},"current")]},"breadcrumbs"),e.jsx(t.Title,{overline:"OVERLINE",status:{label:"BETA",severity:"info"},children:"Title"},"title"),e.jsx(t.Metadata,{items:["Metadata A","Metadata B","Metadata C"]},"metadata"),e.jsx(t.Description,{children:"Cultellus conforto bos adinventitias compello delibero usitas confugo statim. Tres tenax comes quaerat arguo cibus absorbeo debilito."},"description"),e.jsx(t.Documentation,{href:"#",label:"Documentation"},"documentation"),e.jsxs(t.Actions,{children:[e.jsx(I,{buttonLabel:"Secondary",children:e.jsx(R,{onClick:d("Action click"),children:"Action"})},"secondary"),e.jsx(n,{label:"Primary",onClick:d("primary click"),variant:"primary"},"primary")]},"actions")]}),isFullWidth:r.isFullWidth,children:e.jsx(x,{regions:[1],children:e.jsx(h,{children:e.jsxs(f,{formActions:e.jsxs(e.Fragment,{children:[e.jsx(n,{label:"Reset",variant:"secondary"},"reset"),e.jsx(n,{label:"Submit",type:"submit",variant:"primary"},"submit")]}),name:"Add Person",title:"Add Person",children:[e.jsx(c,{label:"First name"}),e.jsx(c,{label:"Last name"}),e.jsx(c,{label:"Email"})]})})})})},p={render:function(){const[a,i]=s.useState(!1),o=s.useCallback(()=>{i(!0)},[]),l=s.useCallback(()=>{i(!1)},[]);return e.jsx(m,{drawer:e.jsx(V,{hasDividers:!0,isOpen:a,onClose:l,primaryCallToActionComponent:e.jsx(n,{label:"Primary",onClick:l,variant:"primary"}),title:"Drawer title",variant:"temporary",children:e.jsx("div",{children:"Okta Privileged Access is a Privileged Access Management (PAM) solution designed to help customers mitigate the risk of unauthorized access to resources, a critical area of security and risk management in any organization. Okta Privileged Access builds on the current server access control capabilities provided with Okta Advanced Server Access and delivers a unified approach to managing access to all your privileged accounts. It securely connects people, machines, and applications to privileged resources such as servers, containers, and enterprise apps."})}),headerComponent:e.jsxs(t,{children:[e.jsx(t.Title,{children:"Title"},"title"),e.jsx(t.Description,{children:"Cultellus conforto bos adinventitias compello delibero usitas confugo statim. Tres tenax comes quaerat arguo cibus absorbeo debilito."},"description"),e.jsx(t.Documentation,{href:"#",label:"Documentation"},"documentation"),e.jsx(t.Actions,{children:e.jsx(n,{label:a?"Close embedded drawer":"Open embedded drawer",onClick:a?l:o,variant:"primary"})},"actions")]}),children:e.jsx(x,{regions:[1],children:e.jsx(h,{children:e.jsxs(f,{formActions:e.jsxs(e.Fragment,{children:[e.jsx(n,{label:"Reset",variant:"secondary"},"reset"),e.jsx(n,{label:"Submit",type:"submit",variant:"primary"},"submit")]}),name:"Add Person",title:"Add Person",children:[e.jsx(c,{label:"First name"}),e.jsx(c,{label:"Last name"}),e.jsx(c,{label:"Email"})]})})})})}},b={render:function(){const[a,i]=s.useState(!1),o=s.useCallback(()=>{i(!0)},[]),l=s.useCallback(()=>{i(!1)},[]);return e.jsx(m,{drawer:e.jsx(V,{hasDividers:!0,isOpen:a,onClose:l,primaryCallToActionComponent:e.jsx(n,{label:"Primary",onClick:l,variant:"primary"}),title:"Drawer title",variant:"persistent",children:e.jsx("div",{children:"Okta Privileged Access is a Privileged Access Management (PAM) solution designed to help customers mitigate the risk of unauthorized access to resources, a critical area of security and risk management in any organization. Okta Privileged Access builds on the current server access control capabilities provided with Okta Advanced Server Access and delivers a unified approach to managing access to all your privileged accounts. It securely connects people, machines, and applications to privileged resources such as servers, containers, and enterprise apps."})}),headerComponent:e.jsxs(t,{children:[e.jsx(t.Title,{children:"Title"},"title"),e.jsx(t.Description,{children:"Cultellus conforto bos adinventitias compello delibero usitas confugo statim. Tres tenax comes quaerat arguo cibus absorbeo debilito."},"description"),e.jsx(t.Documentation,{href:"#",label:"Documentation"},"documentation"),e.jsx(t.Actions,{children:e.jsx(n,{label:a?"Close embedded drawer":"Open embedded drawer",onClick:a?l:o,variant:"primary"})},"actions")]}),children:e.jsx(x,{regions:[1],children:e.jsx(h,{children:e.jsxs(f,{formActions:e.jsxs(e.Fragment,{children:[e.jsx(n,{label:"Reset",variant:"secondary"},"reset"),e.jsx(n,{label:"Submit",type:"submit",variant:"primary"},"submit")]}),name:"Add Person",title:"Add Person",children:[e.jsx(c,{label:"First name"}),e.jsx(c,{label:"Last name"}),e.jsx(c,{label:"Email"})]})})})})}},g={render:()=>e.jsx(m,{headerComponent:e.jsxs(t,{children:[e.jsxs(t.Breadcrumbs,{homeHref:"#",children:[e.jsx(y,{href:"#",onClick:d("Page Title click"),children:"Page Title"},"page1"),e.jsx(y,{children:"Current Page"},"current")]},"breadcrumbs"),e.jsx(t.Title,{overline:"OVERLINE",status:{label:"BETA",severity:"info"},children:"Title"},"title"),e.jsx(t.Metadata,{items:["Metadata A","Metadata B","Metadata C"]},"metadata"),e.jsx(t.Description,{children:"Cultellus conforto bos adinventitias compello delibero usitas confugo statim. Tres tenax comes quaerat arguo cibus absorbeo debilito."},"description"),e.jsx(t.Documentation,{href:"#",label:"Documentation"},"documentation"),e.jsxs(t.Actions,{children:[e.jsx(I,{buttonLabel:"Secondary",children:e.jsx(R,{onClick:d("Action click"),children:"Action"})},"secondary"),e.jsx(n,{label:"Primary",onClick:d("primary click"),variant:"primary"},"primary")]},"actions")]}),isFullWidth:!0,children:e.jsx(x,{regions:[1],children:e.jsx(h,{children:e.jsxs(f,{formActions:e.jsxs(e.Fragment,{children:[e.jsx(n,{label:"Reset",variant:"secondary"},"reset"),e.jsx(n,{label:"Submit",type:"submit",variant:"primary"},"submit")]}),name:"Add Person",title:"Add Person",children:[e.jsx(c,{label:"First name"}),e.jsx(c,{label:"Last name"}),e.jsx(c,{label:"Email"})]})})})})};var j,A,D;u.parameters={...u.parameters,docs:{...(j=u.parameters)==null?void 0:j.docs,source:{originalSource:`{
  render: args => <PageTemplate headerComponent={<PageHeader>
          <PageHeader.Breadcrumbs homeHref="#" key="breadcrumbs">
            <Breadcrumb href="#" key="page1" onClick={action("Page Title click")}>
              Page Title
            </Breadcrumb>
            <Breadcrumb key="current">Current Page</Breadcrumb>
          </PageHeader.Breadcrumbs>
          <PageHeader.Title key="title" overline="OVERLINE" status={{
      label: "BETA",
      severity: "info"
    }}>
            Title
          </PageHeader.Title>
          <PageHeader.Metadata items={["Metadata A", "Metadata B", "Metadata C"]} key="metadata" />
          <PageHeader.Description key="description">
            Cultellus conforto bos adinventitias compello delibero usitas
            confugo statim. Tres tenax comes quaerat arguo cibus absorbeo
            debilito.
          </PageHeader.Description>
          <PageHeader.Documentation href="#" key="documentation" label="Documentation" />
          <PageHeader.Actions key="actions">
            <MenuButton buttonLabel="Secondary" key="secondary">
              <MenuItem onClick={action("Action click")}>Action</MenuItem>
            </MenuButton>
            <Button key="primary" label="Primary" onClick={action("primary click")} variant="primary" />
          </PageHeader.Actions>
        </PageHeader>} isFullWidth={args.isFullWidth}>
      <Layout regions={[1]}>
        <Surface>
          <Form formActions={<>
                <Button key="reset" label="Reset" variant="secondary" />
                <Button key="submit" label="Submit" type="submit" variant="primary" />
              </>} name="Add Person" title="Add Person">
            <TextField label="First name" />
            <TextField label="Last name" />
            <TextField label="Email" />
          </Form>
        </Surface>
      </Layout>
    </PageTemplate>
}`,...(D=(A=u.parameters)==null?void 0:A.docs)==null?void 0:D.source}}};var T,w,M;p.parameters={...p.parameters,docs:{...(T=p.parameters)==null?void 0:T.docs,source:{originalSource:`{
  render: function C() {
    const [isDrawerVisible, setIsDrawerVisible] = useState(false);
    const onOpenEmbeddedDrawer = useCallback(() => {
      setIsDrawerVisible(true);
    }, []);
    const onCloseEmbeddedDrawer = useCallback(() => {
      setIsDrawerVisible(false);
    }, []);
    return <PageTemplate drawer={<Drawer hasDividers isOpen={isDrawerVisible} onClose={onCloseEmbeddedDrawer} primaryCallToActionComponent={<Button label="Primary" onClick={onCloseEmbeddedDrawer} variant="primary" />} title="Drawer title" variant="temporary">
            <div>
              Okta Privileged Access is a Privileged Access Management (PAM)
              solution designed to help customers mitigate the risk of
              unauthorized access to resources, a critical area of security and
              risk management in any organization. Okta Privileged Access builds
              on the current server access control capabilities provided with
              Okta Advanced Server Access and delivers a unified approach to
              managing access to all your privileged accounts. It securely
              connects people, machines, and applications to privileged
              resources such as servers, containers, and enterprise apps.
            </div>
          </Drawer>} headerComponent={<PageHeader>
            <PageHeader.Title key="title">Title</PageHeader.Title>
            <PageHeader.Description key="description">
              Cultellus conforto bos adinventitias compello delibero usitas
              confugo statim. Tres tenax comes quaerat arguo cibus absorbeo
              debilito.
            </PageHeader.Description>
            <PageHeader.Documentation href="#" key="documentation" label="Documentation" />
            <PageHeader.Actions key="actions">
              <Button label={isDrawerVisible ? "Close embedded drawer" : "Open embedded drawer"} onClick={isDrawerVisible ? onCloseEmbeddedDrawer : onOpenEmbeddedDrawer} variant="primary" />
            </PageHeader.Actions>
          </PageHeader>}>
        <Layout regions={[1]}>
          <Surface>
            <Form formActions={<>
                  <Button key="reset" label="Reset" variant="secondary" />
                  <Button key="submit" label="Submit" type="submit" variant="primary" />
                </>} name="Add Person" title="Add Person">
              <TextField label="First name" />
              <TextField label="Last name" />
              <TextField label="Email" />
            </Form>
          </Surface>
        </Layout>
      </PageTemplate>;
  }
}`,...(M=(w=p.parameters)==null?void 0:w.docs)==null?void 0:M.source}}};var H,S,B;b.parameters={...b.parameters,docs:{...(H=b.parameters)==null?void 0:H.docs,source:{originalSource:`{
  render: function C() {
    const [isDrawerVisible, setIsDrawerVisible] = useState(false);
    const onOpenEmbeddedDrawer = useCallback(() => {
      setIsDrawerVisible(true);
    }, []);
    const onCloseEmbeddedDrawer = useCallback(() => {
      setIsDrawerVisible(false);
    }, []);
    return <PageTemplate drawer={<Drawer hasDividers isOpen={isDrawerVisible} onClose={onCloseEmbeddedDrawer} primaryCallToActionComponent={<Button label="Primary" onClick={onCloseEmbeddedDrawer} variant="primary" />} title="Drawer title" variant="persistent">
            <div>
              Okta Privileged Access is a Privileged Access Management (PAM)
              solution designed to help customers mitigate the risk of
              unauthorized access to resources, a critical area of security and
              risk management in any organization. Okta Privileged Access builds
              on the current server access control capabilities provided with
              Okta Advanced Server Access and delivers a unified approach to
              managing access to all your privileged accounts. It securely
              connects people, machines, and applications to privileged
              resources such as servers, containers, and enterprise apps.
            </div>
          </Drawer>} headerComponent={<PageHeader>
            <PageHeader.Title key="title">Title</PageHeader.Title>
            <PageHeader.Description key="description">
              Cultellus conforto bos adinventitias compello delibero usitas
              confugo statim. Tres tenax comes quaerat arguo cibus absorbeo
              debilito.
            </PageHeader.Description>
            <PageHeader.Documentation href="#" key="documentation" label="Documentation" />
            <PageHeader.Actions key="actions">
              <Button label={isDrawerVisible ? "Close embedded drawer" : "Open embedded drawer"} onClick={isDrawerVisible ? onCloseEmbeddedDrawer : onOpenEmbeddedDrawer} variant="primary" />
            </PageHeader.Actions>
          </PageHeader>}>
        <Layout regions={[1]}>
          <Surface>
            <Form formActions={<>
                  <Button key="reset" label="Reset" variant="secondary" />
                  <Button key="submit" label="Submit" type="submit" variant="primary" />
                </>} name="Add Person" title="Add Person">
              <TextField label="First name" />
              <TextField label="Last name" />
              <TextField label="Email" />
            </Form>
          </Surface>
        </Layout>
      </PageTemplate>;
  }
}`,...(B=(S=b.parameters)==null?void 0:S.docs)==null?void 0:B.source}}};var F,E,O;g.parameters={...g.parameters,docs:{...(F=g.parameters)==null?void 0:F.docs,source:{originalSource:`{
  render: () => <PageTemplate headerComponent={<PageHeader>
          <PageHeader.Breadcrumbs homeHref="#" key="breadcrumbs">
            <Breadcrumb href="#" key="page1" onClick={action("Page Title click")}>
              Page Title
            </Breadcrumb>
            <Breadcrumb key="current">Current Page</Breadcrumb>
          </PageHeader.Breadcrumbs>
          <PageHeader.Title key="title" overline="OVERLINE" status={{
      label: "BETA",
      severity: "info"
    }}>
            Title
          </PageHeader.Title>
          <PageHeader.Metadata items={["Metadata A", "Metadata B", "Metadata C"]} key="metadata" />
          <PageHeader.Description key="description">
            Cultellus conforto bos adinventitias compello delibero usitas
            confugo statim. Tres tenax comes quaerat arguo cibus absorbeo
            debilito.
          </PageHeader.Description>
          <PageHeader.Documentation href="#" key="documentation" label="Documentation" />
          <PageHeader.Actions key="actions">
            <MenuButton buttonLabel="Secondary" key="secondary">
              <MenuItem onClick={action("Action click")}>Action</MenuItem>
            </MenuButton>
            <Button key="primary" label="Primary" onClick={action("primary click")} variant="primary" />
          </PageHeader.Actions>
        </PageHeader>} isFullWidth>
      <Layout regions={[1]}>
        <Surface>
          <Form formActions={<>
                <Button key="reset" label="Reset" variant="secondary" />
                <Button key="submit" label="Submit" type="submit" variant="primary" />
              </>} name="Add Person" title="Add Person">
            <TextField label="First name" />
            <TextField label="Last name" />
            <TextField label="Email" />
          </Form>
        </Surface>
      </Layout>
    </PageTemplate>
}`,...(O=(E=g.parameters)==null?void 0:E.docs)==null?void 0:O.source}}};const Sa=["Default","OverlayDrawer","EmbeddedDrawer","FullWidth"];export{u as Default,b as EmbeddedDrawer,g as FullWidth,p as OverlayDrawer,Sa as __namedExportsOrder,Ha as default};
