@okta/odyssey-react-mui 1.45.0 → 1.47.1

package/dist/assets/PageHeader.stories-fXDR4T37.js

@@ -0,0 +1,17 @@
+import{j as v,a as h}from"./emotion-react-jsx-runtime.browser.esm-DcYOMKFp.js";import{r as l}from"./index-NdkWRN8K.js";import{u as z}from"./OdysseyProvider-CLb8psrs.js";import{j as m}from"./jsx-runtime-CnH95YSl.js";import{B as N}from"./Box-CWTB5xfE.js";import{T as w}from"./Typography-Yf1Zkad_.js";import{S as R}from"./OdysseyThemeProvider-BBwjgzn2.js";import{M as k}from"./Button-B6KDXfay.js";import{a as A}from"./index-B-lxVbXh.js";import{O as P}from"./OdysseyStorybookThemeDecorator-BRjYVaUu.js";import{W as T}from"./WorkflowsComponentsStorybookThemeDecorator-COYvO4K8.js";import"./_commonjsHelpers-gnU0ypJ3.js";import"./OdysseyProvider-2xjMTEu6.js";import"./Tooltip-D4AWrTBw.js";import"./Grow-DacPmog-.js";import"./utils-DkZjDCLm.js";import"./TransitionGroupContext-DLI0IzWy.js";import"./index-B5xazMy1.js";import"./index-DieBXP3Z.js";import"./useIsFocusVisible-DH0qxT5e.js";import"./Portal-GAJY6Au9.js";import"./resolveComponentProps-BzfJewMt.js";import"./isHostComponent-DVu5iVWx.js";import"./useControlled-NQulfz4l.js";import"./Popper-DjhYeJJy.js";import"./ownerDocument-DW-IO8s5.js";import"./Button-CdPi1pZc.js";import"./ButtonBase-BAQsCgRq.js";import"./v4-CtRu48qb.js";import"./index-BJTM6NaI.js";const O=l.forwardRef((t,n)=>m.jsx(R,{fill:"none",ref:n,viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",...t,children:m.jsx(m.Fragment,{children:m.jsx("path",{clipRule:"evenodd",d:"M11 13v5h2v-5h5v-2h-5V6h-2v5H6v2h5Z",fill:"currentColor",fillRule:"evenodd"})})})),M=l.memo(O);M.displayName="AddIcon";const E={h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",h6:"h6",body:"body1",legend:"legend",overline:"overline",subordinate:"subtitle1",support:"subtitle2"},p=({ariaCurrent:t,ariaDescribedBy:n,ariaLabel:a,ariaLabelledBy:i,children:s,color:e,component:r,id:o,isPresentational:d,testId:c,translate:b,typographyRef:L,variant:u="body"})=>{const y=l.useMemo(()=>r||(u==="body"||u==="subordinate"||u==="support"||u==="overline"?"p":u),[r,u]),g=l.useRef(null);return l.useImperativeHandle(L,()=>({focus:()=>{var B;(B=g.current)==null||B.focus()}}),[]),m.jsx(w,{"aria-current":t,"aria-describedby":n,"aria-label":a,"aria-labelledby":i,children:s,color:e,component:y,"data-se":c,id:o,ref:g,role:d?"presentation":void 0,tabIndex:-1,translate:b,variant:E[u]})},F=l.memo(p);F.displayName="Typography";const V=({ariaCurrent:t,ariaDescribedBy:n,ariaLabel:a,ariaLabelledBy:i,children:s,color:e,component:r,id:o,isPresentational:d,testId:c,translate:b})=>m.jsx(p,{ariaCurrent:t,ariaDescribedBy:n,ariaLabel:a,ariaLabelledBy:i,children:s,color:e,component:r,id:o,isPresentational:d,testId:c,translate:b,variant:"h1"}),I=l.memo(V);I.displayName="Heading1";const $=({ariaCurrent:t,ariaDescribedBy:n,ariaLabel:a,ariaLabelledBy:i,children:s,color:e,component:r,id:o,testId:d,translate:c})=>m.jsx(p,{ariaCurrent:t,ariaDescribedBy:n,ariaLabel:a,ariaLabelledBy:i,children:s,color:e,component:r,id:o,testId:d,translate:c,variant:"h2"}),W=l.memo($);W.displayName="Heading2";const _=({ariaCurrent:t,ariaDescribedBy:n,ariaLabel:a,ariaLabelledBy:i,children:s,color:e,component:r,id:o,testId:d,translate:c})=>m.jsx(p,{ariaCurrent:t,ariaDescribedBy:n,ariaLabel:a,ariaLabelledBy:i,children:s,color:e,component:r,id:o,testId:d,translate:c,variant:"h3"}),Z=l.memo(_);Z.displayName="Heading3";const q=({ariaCurrent:t,ariaDescribedBy:n,ariaLabel:a,ariaLabelledBy:i,children:s,color:e,component:r,id:o,testId:d,translate:c})=>m.jsx(p,{ariaCurrent:t,ariaDescribedBy:n,ariaLabel:a,ariaLabelledBy:i,children:s,color:e,component:r,id:o,testId:d,translate:c,variant:"h4"}),G=l.memo(q);G.displayName="Heading4";const J=({ariaCurrent:t,ariaDescribedBy:n,ariaLabel:a,ariaLabelledBy:i,children:s,color:e,component:r,id:o,testId:d,translate:c})=>m.jsx(p,{ariaCurrent:t,ariaDescribedBy:n,ariaLabel:a,ariaLabelledBy:i,children:s,color:e,component:r,id:o,testId:d,translate:c,variant:"h5"}),K=l.memo(J);K.displayName="Heading5";const Q=({ariaCurrent:t,ariaDescribedBy:n,ariaLabel:a,ariaLabelledBy:i,children:s,color:e,component:r,id:o,testId:d,translate:c})=>m.jsx(p,{ariaCurrent:t,ariaDescribedBy:n,ariaLabel:a,ariaLabelledBy:i,children:s,color:e,component:r,id:o,testId:d,translate:c,variant:"h6"}),U=l.memo(Q);U.displayName="Heading6";const X=({ariaCurrent:t,ariaDescribedBy:n,ariaLabel:a,ariaLabelledBy:i,children:s,color:e,component:r,id:o,testId:d,translate:c})=>m.jsx(p,{ariaCurrent:t,ariaDescribedBy:n,ariaLabel:a,ariaLabelledBy:i,children:s,color:e,component:r,id:o,testId:d,translate:c,variant:"body"}),D=l.memo(X);D.displayName="Paragraph";const Y=({ariaCurrent:t,ariaDescribedBy:n,ariaLabel:a,ariaLabelledBy:i,children:s,color:e,component:r,id:o,testId:d,translate:c})=>m.jsx(p,{ariaCurrent:t,ariaDescribedBy:n,ariaLabel:a,ariaLabelledBy:i,children:s,color:e,component:r,id:o,testId:d,translate:c,variant:"subordinate"}),ee=l.memo(Y);ee.displayName="Subordinate";const ae=({ariaCurrent:t,ariaDescribedBy:n,ariaLabel:a,ariaLabelledBy:i,children:s,color:e,component:r,id:o,testId:d,translate:c})=>m.jsx(p,{ariaCurrent:t,ariaDescribedBy:n,ariaLabel:a,ariaLabelledBy:i,children:s,color:e,component:r,id:o,testId:d,translate:c,variant:"support"}),re=l.memo(ae);re.displayName="Support";const oe=({ariaDescribedBy:t,ariaLabel:n,ariaLabelledBy:a,children:i,color:s,component:e,id:r,testId:o,translate:d})=>m.jsx(p,{ariaDescribedBy:t,ariaLabel:n,ariaLabelledBy:a,children:i,color:s,component:e,id:r,testId:o,translate:d,variant:"legend"}),te=l.memo(oe);te.displayName="Legend";const ne=({ariaDescribedBy:t,ariaLabel:n,ariaLabelledBy:a,children:i,color:s,component:e,id:r,testId:o,translate:d})=>m.jsx(p,{ariaDescribedBy:t,ariaLabel:n,ariaLabelledBy:a,children:i,color:s,component:e,id:r,testId:o,translate:d,variant:"overline"}),ie=l.memo(ne);ie.displayName="Overline";const se=l.forwardRef(({children:t,component:n,id:a,role:i,sx:s,testId:e,translate:r},o)=>m.jsx(N,{children:t,component:n,"data-se":e,id:a,ref:o,role:i,sx:s,translate:r})),x=l.memo(se);x.displayName="Box";const de={lineHeight:"1.5rem",whiteSpace:"pre-line"},le=({buttonLabel:t,buttonVariant:n="secondary",headingText:a,isLookAndFeelEnabled:i,isResourceCreator:s,onCreateResource:e,resourceDescription:r,resourceType:o})=>{const d=z(),c=t||`Add new ${a.toLowerCase()}`,b=l.useCallback(()=>{o==="Action"?e({resourceLabel:a,closePopup:!0,onConfirm:(u,y,g)=>e(u,y,g)}):o==="Integration Project"?e():e({resourceLabel:o,closePopup:!0,onConfirm:(u,y)=>e(u,y)})},[a,e,o]),L=l.useMemo(()=>({alignItems:"center",display:"flex",gridArea:"header",justifyContent:"space-between",overflow:"hidden",paddingRight:d.Spacing5}),[d.Spacing5]);return i?v(x,{sx:L,children:[v(x,{children:[h(I,{children:a}),r&&h(x,{sx:de,children:h(D,{color:"textSecondary",children:r})})]}),s&&h(k,{label:c,onClick:b,startIcon:h(M,{}),variant:n})]}):null},S=l.memo(le);S.displayName="PageHeader";/*!
+ * Copyright (c) 2021-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 Fe={component:S,decorators:[P,T],tags:["autodocs"],argTypes:{buttonLabel:{control:"text"},buttonVariant:{control:"text"},headingText:{control:"text"},isLookAndFeelEnabled:{control:"boolean"},isResourceCreator:{control:"boolean"},onCreateResource:{action:!0,description:"Callback fired when the button is clicked.",table:{type:{summary:"(() => void)"}}},resourceDescription:{control:"text"},resourceType:{control:"text"}},args:{buttonLabel:"Create Resource",headingText:"Header",isLookAndFeelEnabled:!0}},f={args:{isResourceCreator:!0,onCreateResource:A("onCreateResource"),resourceDescription:"Lorem ipsum."}};var H,j,C;f.parameters={...f.parameters,docs:{...(H=f.parameters)==null?void 0:H.docs,source:{originalSource:`{
+  args: {
+    isResourceCreator: true,
+    onCreateResource: action("onCreateResource"),
+    resourceDescription: "Lorem ipsum."
+  }
+}`,...(C=(j=f.parameters)==null?void 0:j.docs)==null?void 0:C.source}}};const Ve=["Default"];export{f as Default,Ve as __namedExportsOrder,Fe as default};

package/dist/assets/PageHeader.stories-q0-kxFNT.js

@@ -0,0 +1,329 @@
+import{j as e}from"./jsx-runtime-CnH95YSl.js";import"./Typography-D01yctPx.js";import"./index-NdkWRN8K.js";import{R as we,P as r}from"./ResourceAccessPolicyComponentsStorybookThemeDecorator-IgdZHick.js";import{a as t}from"./index-B-lxVbXh.js";import{O as Ae}from"./OdysseyStorybookThemeDecorator-BRjYVaUu.js";import{B as n}from"./Breadcrumbs-C2ZpdmyC.js";import{M as ve}from"./MenuButton-Dr4RJoKG.js";import{M as j}from"./MenuItem-n-UKDxiu.js";import{M as a}from"./Button-DGmXZ3jw.js";import"./AccordionSummary-0jrOTJTD.js";import"./OdysseyThemeProvider-BBwjgzn2.js";import"./_commonjsHelpers-gnU0ypJ3.js";import"./useSlot-CaOQD_17.js";import"./resolveComponentProps-BzfJewMt.js";import"./isHostComponent-DVu5iVWx.js";import"./useIsFocusVisible-DH0qxT5e.js";import"./useControlled-NQulfz4l.js";import"./Collapse-COoe3Qtd.js";import"./utils-DkZjDCLm.js";import"./TransitionGroupContext-DLI0IzWy.js";import"./index-B5xazMy1.js";import"./index-DieBXP3Z.js";import"./Paper-XsV8SWR9.js";import"./ButtonBase-BAQsCgRq.js";import"./AlertTitle-BbBpDTwd.js";import"./createSvgIcon-DsUj6UQo.js";import"./Close-ATS01D1v.js";import"./IconButton-OY9nJWpv.js";import"./Typography-Yf1Zkad_.js";import"./Breadcrumbs-6BEAV_iX.js";import"./Portal-GAJY6Au9.js";import"./Menu-CHod3UUY.js";import"./Grow-DacPmog-.js";import"./ownerDocument-DW-IO8s5.js";import"./ownerWindow-HkKU3E4x.js";import"./debounce-Be36O1Ab.js";import"./Modal-B1-40kNg.js";import"./getScrollbarSize-Bqq2hMjQ.js";import"./createChainedFunction-BO_9K8Jh.js";import"./Fade-CVbWKXvx.js";import"./MenuList-CW8ri5AI.js";import"./List-Be7fhh4_.js";import"./CardActionArea-BTMPt80M.js";import"./CardActions-X5bUcMdJ.js";import"./Skeleton-dfR0DjWP.js";import"./colorManipulator-CjGkpVfF.js";import"./CircularProgress-B5_VbcVt.js";import"./index.esm-CaIA2ztV.js";import"./ListItem-C8ebNPnP.js";import"./utils-iop7lDec.js";import"./useFormControl-BMISTZuX.js";import"./FormLabel-BLj3hKkg.js";import"./Stack-DKhviX3e.js";import"./createStyled-D0LG5-qz.js";import"./useThemeProps-D4857Xca.js";import"./Tooltip-D4AWrTBw.js";import"./Popper-DjhYeJJy.js";import"./Box-CWTB5xfE.js";import"./DialogContent-_oGbCJT8.js";import"./dialogActionsClasses-BWrWITLY.js";import"./DialogTitle-DyO9kr6R.js";import"./Radio-BimAm2in.js";import"./SwitchBase-D-uzeIbM.js";import"./Checkbox-BVTNXOF7.js";import"./useMobilePicker-5I3ooa1D.js";import"./Select-9yKLDVKS.js";import"./ArrowDropDown-LYMnJjPD.js";import"./InputBase-DSZ9ZgyW.js";import"./FormHelperText-qF3DX-zz.js";import"./useThemeProps-Bfa1XAV-.js";import"./InputAdornment-D4SsBOPe.js";import"./visuallyHidden-Dan1xhjv.js";import"./Button-CdPi1pZc.js";import"./Chip-DXaMeATb.js";import"./MenuItem-B0_vCuIq.js";import"./Divider-DsFAYUeD.js";import"./Autocomplete-CXy6JKKy.js";import"./ListSubheader-Bwc0JItn.js";import"./tableSortLabelClasses-DtOYtU1J.js";import"./FormControlLabel-BKhSSavj.js";import"./DateTimePicker-LSjVE-IM.js";import"./Tabs-DzeBYjfY.js";import"./DatePicker-txjKmLSi.js";import"./FormGroup-Cuk9jkbL.js";import"./RadioGroup-DRNCKA-f.js";import"./AdapterLuxon-0NB_ajTr.js";import"./index.esm-HelN6IAt.js";import"./DialogContentText-DU3-VV7L.js";import"./OdysseyProvider-2xjMTEu6.js";import"./Drawer-DEqB4KYp.js";import"./TabPanel-XF64c5rR.js";import"./Link-BnBknBcu.js";import"./Snackbar-Cn_gMSEK.js";import"./emotion-react-jsx-runtime.browser.esm-DcYOMKFp.js";import"./v4-CtRu48qb.js";import"./index-BJTM6NaI.js";import"./Typography-DfSdXC7o.js";import"./Group-B6q-i_C2.js";import"./User-D6db-Gy0.js";import"./Home-BiP4Mg1h.js";import"./BaseMenuButton-pigMBOEp.js";import"./Box-BGpAHVQV.js";import"./useUniqueId-Bsgqe1tm.js";import"./createUniqueId-ByTaVY63.js";import"./BaseButton-COF38VLB.js";import"./MuiPropsContext-DhRylJZk.js";import"./Tooltip-XQJL1Byd.js";import"./MenuContext-DKMyPMNY.js";import"./More-D1qrtSvt.js";const f=["Metadata A","Metadata B","Metadata C"],Mt={component:r,decorators:[Ae,we],tags:["autodocs"]},i={render:Be=>e.jsxs(r,{testId:Be.testId,children:[e.jsxs(r.Breadcrumbs,{homeHref:"#",children:[e.jsx(n,{href:"#",onClick:t("Page Title click"),children:"Page Title"},"page1"),e.jsx(n,{children:"Current Page"},"current")]}),e.jsx(r.Image,{children:e.jsx("span",{style:{fontSize:48},children:"👤"})}),e.jsx(r.Title,{overline:"OVERLINE",status:{label:"BETA",severity:"info"},children:"Page title"}),e.jsx(r.Metadata,{items:f}),e.jsx(r.Description,{children:"Optional brief description about the section or page you are about to encounter below."}),e.jsx(r.Documentation,{href:"#",label:"Documentation"}),e.jsxs(r.Actions,{children:[e.jsx(ve,{buttonLabel:"Secondary",children:e.jsx(j,{onClick:t("Action click"),children:"Action"})}),e.jsx(a,{label:"Primary",onClick:t("primary click"),variant:"primary"})]})]}),parameters:{docs:{description:{story:"Demonstrates the composable API with all features. Components are automatically organized into the correct layout sections regardless of their order in the JSX."}}}},o={render:()=>e.jsxs(r,{children:[e.jsx(r.Title,{children:"Page title"}),e.jsx(r.Description,{children:"Optional brief description about the section or page you are about to encounter below."})]})},s={render:()=>e.jsxs(r,{children:[e.jsxs(r.Breadcrumbs,{homeHref:"#",children:[e.jsx(n,{href:"#",onClick:t("Page Title click"),children:"Page Title"},"page1"),e.jsx(n,{children:"Current Page"},"current")]}),e.jsx(r.Title,{children:"Page title"})]})},c={render:()=>e.jsxs(r,{children:[e.jsx(r.BackLink,{href:"#",label:"Back to list",onClick:t("Back to list click")}),e.jsx(r.Title,{children:"Page title"})]}),parameters:{docs:{description:{story:"Uses the simple backLink variant (no breadcrumbs or custom navigation provided)."}}}},d={render:()=>e.jsxs(r,{children:[e.jsx(r.Title,{status:{label:"BETA",severity:"info"},children:"Page title"}),e.jsx(r.Metadata,{items:f.slice(0,2)})]})},l={render:()=>e.jsxs(r,{children:[e.jsx(r.Title,{children:"Page title"}),e.jsx(r.Documentation,{href:"#",label:"Documentation"})]}),parameters:{docs:{description:{story:"Shows the documentation link in the top-right corner."}}}},m={render:()=>e.jsxs(r,{children:[e.jsx(r.Title,{children:"Page title"}),e.jsxs(r.Actions,{children:[e.jsx(a,{label:"Secondary",onClick:t("secondary click"),variant:"secondary"}),e.jsx(a,{label:"Primary",onClick:t("primary click"),variant:"primary"})]})]}),parameters:{docs:{description:{story:"Demonstrates the actions area with React element buttons."}}}},p={render:()=>e.jsxs(r,{children:[e.jsx(r.Title,{children:"Page title"}),e.jsxs(r.Actions,{children:[e.jsxs(ve,{buttonLabel:"Menu",buttonVariant:"secondary",children:[e.jsx(j,{onClick:t("Option 1 click"),children:"Option 1"}),e.jsx(j,{onClick:t("Option 2 click"),children:"Option 2"})]}),e.jsx(a,{label:"Save",onClick:t("save click"),variant:"primary"})]})]}),parameters:{docs:{description:{story:"Demonstrates mixing different types of React elements (MenuButton and Button) in the actions array."}}}},u={render:()=>e.jsxs(r,{children:[e.jsx(r.Title,{children:"Page title"}),e.jsxs(r.Actions,{children:[e.jsx(a,{label:"Action 1",onClick:t("action 1"),variant:"secondary"}),e.jsx(a,{label:"Action 2",onClick:t("action 2"),variant:"secondary"}),e.jsx(a,{label:"Action 3",onClick:t("action 3"),variant:"secondary"}),e.jsx(a,{label:"Action 4",onClick:t("action 4"),variant:"primary"}),e.jsx(a,{label:"Action 5",onClick:t("action 5"),variant:"primary"})]})]}),parameters:{docs:{description:{story:"Demonstrates that only the first 3 actions are rendered when more than 3 actions are provided. Actions 4 and 5 are ignored."}}}},h={render:()=>e.jsxs(r,{children:[e.jsx(r.Title,{status:{label:"ACTIVE",severity:"success"},children:"Page title"}),e.jsx(r.Metadata,{items:f}),e.jsx(r.Image,{children:e.jsx("span",{style:{fontSize:48},children:"👤"})})]})},g={render:()=>e.jsxs(r,{children:[e.jsx(r.Actions,{children:e.jsx(a,{label:"Action First",variant:"primary"})}),e.jsx(r.Title,{children:"Title comes after actions in code"}),e.jsxs(r.Breadcrumbs,{homeHref:"#",children:[e.jsx(n,{href:"#",children:"Parent"},"parent"),e.jsx(n,{children:"Current"},"current")]}),e.jsx(r.Documentation,{href:"#",label:"Help"})]}),parameters:{docs:{description:{story:"Demonstrates that component order in JSX doesn't matter - they are automatically organized into the correct layout sections."}}}},P={render:()=>e.jsxs(r,{children:[e.jsx(r.Metadata,{items:["Created: 2024","Updated: 2025","Version: 1.0"]}),e.jsx(r.Title,{children:"Title Always Appears First"}),e.jsx(r.Description,{children:"Even when metadata is declared before the title in JSX, the title will always render first."})]}),parameters:{docs:{description:{story:"Demonstrates that title always renders before metadata, regardless of their order in JSX. This ensures consistent visual hierarchy."}}}},y={render:()=>e.jsx(r,{children:e.jsx(r.Title,{children:"Minimal Page"})}),parameters:{docs:{description:{story:"Minimal example with just a title."}}}},x={render:()=>e.jsx("div",{style:{maxWidth:"600px"},children:e.jsxs(r,{children:[e.jsx(r.Title,{clampLines:2,children:"This Is A Very Long Page Title That Should Be Clamped To Two Lines And Show Ellipsis When It Overflows The Container Width"}),e.jsx(r.Description,{children:"Description text appears below the clamped title."})]})}),parameters:{docs:{description:{story:"Demonstrates using `clampLines` on the title to limit it to 2 lines with ellipsis overflow."}}}},b={render:()=>e.jsx("div",{style:{maxWidth:"600px"},children:e.jsxs(r,{children:[e.jsx(r.Title,{wordBreak:"break-all",children:"ThisIsAnExtremelyLongWordWithoutSpacesThatWouldNormallyOverflowTheContainer_LikeAVeryLongIdentifierOrURL"}),e.jsx(r.Description,{children:"The title above uses wordBreak to handle long unbroken strings."})]})}),parameters:{docs:{description:{story:"Demonstrates using `wordBreak` on the title to handle long words or identifiers without spaces."}}}},H={render:()=>e.jsx("div",{style:{maxWidth:"600px"},children:e.jsxs(r,{children:[e.jsx(r.Title,{children:"Resource Details"}),e.jsx(r.Description,{clampLines:3,children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident."}),e.jsx(r.Actions,{children:e.jsx(a,{label:"View More",variant:"secondary"})})]})}),parameters:{docs:{description:{story:"Demonstrates using `clampLines` on the description to truncate long text after 3 lines."}}}},T={render:()=>e.jsx("div",{style:{maxWidth:"600px"},children:e.jsxs(r,{children:[e.jsx(r.Title,{children:"API Endpoint"}),e.jsx(r.Description,{wordBreak:"break-all",children:"Endpoint URL: https://api.example.com/v1/resources/very-long-resource-identifier/sub-resources/another-long-identifier/actions"})]})}),parameters:{docs:{description:{story:"Demonstrates using `wordBreak` on the description to handle long URLs or paths."}}}},k={render:()=>e.jsx("div",{style:{maxWidth:"600px"},children:e.jsxs(r,{children:[e.jsx(r.Title,{clampLines:1,wordBreak:"break-word",children:"VeryLongResourceName_WithUnderscores_ThatNeedsToBeHandledProperly"}),e.jsx(r.Metadata,{items:["Created: 2024","Status: Active"]}),e.jsx(r.Description,{clampLines:2,wordBreak:"break-word",children:"This resource has a very long description with URLs like https://example.com/very-long-path/to/resource that need to wrap properly. The description will be clamped to 2 lines with ellipsis."}),e.jsx(r.Actions,{children:e.jsx(a,{label:"Edit",variant:"primary"})})]})}),parameters:{docs:{description:{story:"Demonstrates combining `wordBreak` and `clampLines` on both title and description to handle complex overflow scenarios."}}}};var v,B,w;i.parameters={...i.parameters,docs:{...(v=i.parameters)==null?void 0:v.docs,source:{originalSource:`{
+  render: args => <PageHeader testId={args.testId}>
+      <PageHeader.Breadcrumbs homeHref="#">
+        <Breadcrumb href="#" key="page1" onClick={action("Page Title click")}>
+          Page Title
+        </Breadcrumb>
+        <Breadcrumb key="current">Current Page</Breadcrumb>
+      </PageHeader.Breadcrumbs>
+      <PageHeader.Image>
+        <span style={{
+        fontSize: 48
+      }}>👤</span>
+      </PageHeader.Image>
+      <PageHeader.Title overline="OVERLINE" status={{
+      label: "BETA",
+      severity: "info"
+    }}>
+        Page title
+      </PageHeader.Title>
+      <PageHeader.Metadata items={sampleMetadata} />
+      <PageHeader.Description>
+        Optional brief description about the section or page you are about to
+        encounter below.
+      </PageHeader.Description>
+      <PageHeader.Documentation href="#" label="Documentation" />
+      <PageHeader.Actions>
+        <MenuButton buttonLabel="Secondary">
+          <MenuItem onClick={action("Action click")}>Action</MenuItem>
+        </MenuButton>
+        <Button label="Primary" onClick={action("primary click")} variant="primary" />
+      </PageHeader.Actions>
+    </PageHeader>,
+  parameters: {
+    docs: {
+      description: {
+        story: "Demonstrates the composable API with all features. Components are automatically organized into the correct layout sections regardless of their order in the JSX."
+      }
+    }
+  }
+}`,...(w=(B=i.parameters)==null?void 0:B.docs)==null?void 0:w.source}}};var A,D,C;o.parameters={...o.parameters,docs:{...(A=o.parameters)==null?void 0:A.docs,source:{originalSource:`{
+  render: () => <PageHeader>
+      <PageHeader.Title>Page title</PageHeader.Title>
+      <PageHeader.Description>
+        Optional brief description about the section or page you are about to
+        encounter below.
+      </PageHeader.Description>
+    </PageHeader>
+}`,...(C=(D=o.parameters)==null?void 0:D.docs)==null?void 0:C.source}}};var M,S,L;s.parameters={...s.parameters,docs:{...(M=s.parameters)==null?void 0:M.docs,source:{originalSource:`{
+  render: () => <PageHeader>
+      <PageHeader.Breadcrumbs homeHref="#">
+        <Breadcrumb href="#" key="page1" onClick={action("Page Title click")}>
+          Page Title
+        </Breadcrumb>
+        <Breadcrumb key="current">Current Page</Breadcrumb>
+      </PageHeader.Breadcrumbs>
+      <PageHeader.Title>Page title</PageHeader.Title>
+    </PageHeader>
+}`,...(L=(S=s.parameters)==null?void 0:S.docs)==null?void 0:L.source}}};var W,I,O;c.parameters={...c.parameters,docs:{...(W=c.parameters)==null?void 0:W.docs,source:{originalSource:`{
+  render: () => <PageHeader>
+      <PageHeader.BackLink href="#" label="Back to list" onClick={action("Back to list click")} />
+      <PageHeader.Title>Page title</PageHeader.Title>
+    </PageHeader>,
+  parameters: {
+    docs: {
+      description: {
+        story: "Uses the simple backLink variant (no breadcrumbs or custom navigation provided)."
+      }
+    }
+  }
+}`,...(O=(I=c.parameters)==null?void 0:I.docs)==null?void 0:O.source}}};var E,R,U;d.parameters={...d.parameters,docs:{...(E=d.parameters)==null?void 0:E.docs,source:{originalSource:`{
+  render: () => <PageHeader>
+      <PageHeader.Title status={{
+      label: "BETA",
+      severity: "info"
+    }}>
+        Page title
+      </PageHeader.Title>
+      <PageHeader.Metadata items={sampleMetadata.slice(0, 2)} />
+    </PageHeader>
+}`,...(U=(R=d.parameters)==null?void 0:R.docs)==null?void 0:U.source}}};var V,z,J;l.parameters={...l.parameters,docs:{...(V=l.parameters)==null?void 0:V.docs,source:{originalSource:`{
+  render: () => <PageHeader>
+      <PageHeader.Title>Page title</PageHeader.Title>
+      <PageHeader.Documentation href="#" label="Documentation" />
+    </PageHeader>,
+  parameters: {
+    docs: {
+      description: {
+        story: "Shows the documentation link in the top-right corner."
+      }
+    }
+  }
+}`,...(J=(z=l.parameters)==null?void 0:z.docs)==null?void 0:J.source}}};var X,q,N;m.parameters={...m.parameters,docs:{...(X=m.parameters)==null?void 0:X.docs,source:{originalSource:`{
+  render: () => <PageHeader>
+      <PageHeader.Title>Page title</PageHeader.Title>
+      <PageHeader.Actions>
+        <Button label="Secondary" onClick={action("secondary click")} variant="secondary" />
+        <Button label="Primary" onClick={action("primary click")} variant="primary" />
+      </PageHeader.Actions>
+    </PageHeader>,
+  parameters: {
+    docs: {
+      description: {
+        story: "Demonstrates the actions area with React element buttons."
+      }
+    }
+  }
+}`,...(N=(q=m.parameters)==null?void 0:q.docs)==null?void 0:N.source}}};var _,F,G;p.parameters={...p.parameters,docs:{...(_=p.parameters)==null?void 0:_.docs,source:{originalSource:`{
+  render: () => <PageHeader>
+      <PageHeader.Title>Page title</PageHeader.Title>
+      <PageHeader.Actions>
+        <MenuButton buttonLabel="Menu" buttonVariant="secondary">
+          <MenuItem onClick={action("Option 1 click")}>Option 1</MenuItem>
+          <MenuItem onClick={action("Option 2 click")}>Option 2</MenuItem>
+        </MenuButton>
+        <Button label="Save" onClick={action("save click")} variant="primary" />
+      </PageHeader.Actions>
+    </PageHeader>,
+  parameters: {
+    docs: {
+      description: {
+        story: "Demonstrates mixing different types of React elements (MenuButton and Button) in the actions array."
+      }
+    }
+  }
+}`,...(G=(F=p.parameters)==null?void 0:F.docs)==null?void 0:G.source}}};var K,Q,Y;u.parameters={...u.parameters,docs:{...(K=u.parameters)==null?void 0:K.docs,source:{originalSource:`{
+  render: () => <PageHeader>
+      <PageHeader.Title>Page title</PageHeader.Title>
+      <PageHeader.Actions>
+        <Button label="Action 1" onClick={action("action 1")} variant="secondary" />
+        <Button label="Action 2" onClick={action("action 2")} variant="secondary" />
+        <Button label="Action 3" onClick={action("action 3")} variant="secondary" />
+        <Button label="Action 4" onClick={action("action 4")} variant="primary" />
+        <Button label="Action 5" onClick={action("action 5")} variant="primary" />
+      </PageHeader.Actions>
+    </PageHeader>,
+  parameters: {
+    docs: {
+      description: {
+        story: "Demonstrates that only the first 3 actions are rendered when more than 3 actions are provided. Actions 4 and 5 are ignored."
+      }
+    }
+  }
+}`,...(Y=(Q=u.parameters)==null?void 0:Q.docs)==null?void 0:Y.source}}};var Z,$,ee;h.parameters={...h.parameters,docs:{...(Z=h.parameters)==null?void 0:Z.docs,source:{originalSource:`{
+  render: () => <PageHeader>
+      <PageHeader.Title status={{
+      label: "ACTIVE",
+      severity: "success"
+    }}>
+        Page title
+      </PageHeader.Title>
+      <PageHeader.Metadata items={sampleMetadata} />
+      <PageHeader.Image>
+        <span style={{
+        fontSize: 48
+      }}>👤</span>
+      </PageHeader.Image>
+    </PageHeader>
+}`,...(ee=($=h.parameters)==null?void 0:$.docs)==null?void 0:ee.source}}};var re,te,ae;g.parameters={...g.parameters,docs:{...(re=g.parameters)==null?void 0:re.docs,source:{originalSource:`{
+  render: () => <PageHeader>
+      {/* Actions declared first but will appear in sidebar */}
+      <PageHeader.Actions>
+        <Button label="Action First" variant="primary" />
+      </PageHeader.Actions>
+
+      {/* Title declared second but will appear in main content */}
+      <PageHeader.Title>Title comes after actions in code</PageHeader.Title>
+
+      {/* Breadcrumbs declared last but will appear at top */}
+      <PageHeader.Breadcrumbs homeHref="#">
+        <Breadcrumb href="#" key="parent">
+          Parent
+        </Breadcrumb>
+        <Breadcrumb key="current">Current</Breadcrumb>
+      </PageHeader.Breadcrumbs>
+
+      {/* Documentation also in sidebar */}
+      <PageHeader.Documentation href="#" label="Help" />
+    </PageHeader>,
+  parameters: {
+    docs: {
+      description: {
+        story: "Demonstrates that component order in JSX doesn't matter - they are automatically organized into the correct layout sections."
+      }
+    }
+  }
+}`,...(ae=(te=g.parameters)==null?void 0:te.docs)==null?void 0:ae.source}}};var ne,ie,oe;P.parameters={...P.parameters,docs:{...(ne=P.parameters)==null?void 0:ne.docs,source:{originalSource:`{
+  render: () => <PageHeader>
+      {/* Metadata declared before title in JSX */}
+      <PageHeader.Metadata items={["Created: 2024", "Updated: 2025", "Version: 1.0"]} />
+
+      {/* But title will still render first */}
+      <PageHeader.Title>Title Always Appears First</PageHeader.Title>
+
+      <PageHeader.Description>
+        Even when metadata is declared before the title in JSX, the title will
+        always render first.
+      </PageHeader.Description>
+    </PageHeader>,
+  parameters: {
+    docs: {
+      description: {
+        story: "Demonstrates that title always renders before metadata, regardless of their order in JSX. This ensures consistent visual hierarchy."
+      }
+    }
+  }
+}`,...(oe=(ie=P.parameters)==null?void 0:ie.docs)==null?void 0:oe.source}}};var se,ce,de;y.parameters={...y.parameters,docs:{...(se=y.parameters)==null?void 0:se.docs,source:{originalSource:`{
+  render: () => <PageHeader>
+      <PageHeader.Title>Minimal Page</PageHeader.Title>
+    </PageHeader>,
+  parameters: {
+    docs: {
+      description: {
+        story: "Minimal example with just a title."
+      }
+    }
+  }
+}`,...(de=(ce=y.parameters)==null?void 0:ce.docs)==null?void 0:de.source}}};var le,me,pe;x.parameters={...x.parameters,docs:{...(le=x.parameters)==null?void 0:le.docs,source:{originalSource:`{
+  render: () => <div style={{
+    maxWidth: "600px"
+  }}>
+      <PageHeader>
+        <PageHeader.Title clampLines={2}>
+          This Is A Very Long Page Title That Should Be Clamped To Two Lines And
+          Show Ellipsis When It Overflows The Container Width
+        </PageHeader.Title>
+        <PageHeader.Description>
+          Description text appears below the clamped title.
+        </PageHeader.Description>
+      </PageHeader>
+    </div>,
+  parameters: {
+    docs: {
+      description: {
+        story: "Demonstrates using \`clampLines\` on the title to limit it to 2 lines with ellipsis overflow."
+      }
+    }
+  }
+}`,...(pe=(me=x.parameters)==null?void 0:me.docs)==null?void 0:pe.source}}};var ue,he,ge;b.parameters={...b.parameters,docs:{...(ue=b.parameters)==null?void 0:ue.docs,source:{originalSource:`{
+  render: () => <div style={{
+    maxWidth: "600px"
+  }}>
+      <PageHeader>
+        <PageHeader.Title wordBreak="break-all">
+          ThisIsAnExtremelyLongWordWithoutSpacesThatWouldNormallyOverflowTheContainer_LikeAVeryLongIdentifierOrURL
+        </PageHeader.Title>
+        <PageHeader.Description>
+          The title above uses wordBreak to handle long unbroken strings.
+        </PageHeader.Description>
+      </PageHeader>
+    </div>,
+  parameters: {
+    docs: {
+      description: {
+        story: "Demonstrates using \`wordBreak\` on the title to handle long words or identifiers without spaces."
+      }
+    }
+  }
+}`,...(ge=(he=b.parameters)==null?void 0:he.docs)==null?void 0:ge.source}}};var Pe,ye,xe;H.parameters={...H.parameters,docs:{...(Pe=H.parameters)==null?void 0:Pe.docs,source:{originalSource:`{
+  render: () => <div style={{
+    maxWidth: "600px"
+  }}>
+      <PageHeader>
+        <PageHeader.Title>Resource Details</PageHeader.Title>
+        <PageHeader.Description clampLines={3}>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident.
+        </PageHeader.Description>
+        <PageHeader.Actions>
+          <Button label="View More" variant="secondary" />
+        </PageHeader.Actions>
+      </PageHeader>
+    </div>,
+  parameters: {
+    docs: {
+      description: {
+        story: "Demonstrates using \`clampLines\` on the description to truncate long text after 3 lines."
+      }
+    }
+  }
+}`,...(xe=(ye=H.parameters)==null?void 0:ye.docs)==null?void 0:xe.source}}};var be,He,Te;T.parameters={...T.parameters,docs:{...(be=T.parameters)==null?void 0:be.docs,source:{originalSource:`{
+  render: () => <div style={{
+    maxWidth: "600px"
+  }}>
+      <PageHeader>
+        <PageHeader.Title>API Endpoint</PageHeader.Title>
+        <PageHeader.Description wordBreak="break-all">
+          Endpoint URL:
+          https://api.example.com/v1/resources/very-long-resource-identifier/sub-resources/another-long-identifier/actions
+        </PageHeader.Description>
+      </PageHeader>
+    </div>,
+  parameters: {
+    docs: {
+      description: {
+        story: "Demonstrates using \`wordBreak\` on the description to handle long URLs or paths."
+      }
+    }
+  }
+}`,...(Te=(He=T.parameters)==null?void 0:He.docs)==null?void 0:Te.source}}};var ke,je,fe;k.parameters={...k.parameters,docs:{...(ke=k.parameters)==null?void 0:ke.docs,source:{originalSource:`{
+  render: () => <div style={{
+    maxWidth: "600px"
+  }}>
+      <PageHeader>
+        <PageHeader.Title clampLines={1} wordBreak="break-word">
+          VeryLongResourceName_WithUnderscores_ThatNeedsToBeHandledProperly
+        </PageHeader.Title>
+        <PageHeader.Metadata items={["Created: 2024", "Status: Active"]} />
+        <PageHeader.Description clampLines={2} wordBreak="break-word">
+          This resource has a very long description with URLs like
+          https://example.com/very-long-path/to/resource that need to wrap
+          properly. The description will be clamped to 2 lines with ellipsis.
+        </PageHeader.Description>
+        <PageHeader.Actions>
+          <Button label="Edit" variant="primary" />
+        </PageHeader.Actions>
+      </PageHeader>
+    </div>,
+  parameters: {
+    docs: {
+      description: {
+        story: "Demonstrates combining \`wordBreak\` and \`clampLines\` on both title and description to handle complex overflow scenarios."
+      }
+    }
+  }
+}`,...(fe=(je=k.parameters)==null?void 0:je.docs)==null?void 0:fe.source}}};const St=["AllFeatures","Default","WithBreadcrumbs","WithBackLink","WithStatus","WithDocumentation","WithActions","WithMixedActions","WithTooManyActions","WithImage","OrderIndependent","MetadataBeforeTitle","Minimal","TitleWithClampLines","TitleWithWordBreak","DescriptionWithClampLines","DescriptionWithWordBreak","CombinedTitleAndDescriptionOverflow"];export{i as AllFeatures,k as CombinedTitleAndDescriptionOverflow,o as Default,H as DescriptionWithClampLines,T as DescriptionWithWordBreak,P as MetadataBeforeTitle,y as Minimal,g as OrderIndependent,x as TitleWithClampLines,b as TitleWithWordBreak,m as WithActions,c as WithBackLink,s as WithBreadcrumbs,l as WithDocumentation,h as WithImage,p as WithMixedActions,d as WithStatus,u as WithTooManyActions,St as __namedExportsOrder,Mt as default};

package/dist/assets/PageTemplate _labs_-D3SkGEbG.js

@@ -0,0 +1,8 @@
+import{j as o}from"./jsx-runtime-CnH95YSl.js";import{useMDXComponents as p}from"./index-BeeV6X6A.js";import"./index-BsDcV5Kh.js";import{M as e,T as n,S as s,D as a,a as c}from"./index-BqmbiZ7T.js";import{P as i}from"./PageTemplate _labs_.stories-DtJtMC5B.js";import"./index-NdkWRN8K.js";import"./_commonjsHelpers-gnU0ypJ3.js";import"./preview-BprB3Yzd.js";import"./iframe-CXLAql3E.js";import"./DocsRenderer-CFRXHY34-IKzmQUB4.js";import"./client-ByW5HbEz.js";import"./index-DieBXP3Z.js";import"./index-BJTM6NaI.js";import"./index-B5xazMy1.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";import"./OdysseyStorybookThemeDecorator-BRjYVaUu.js";import"./OdysseyThemeProvider-BBwjgzn2.js";import"./OdysseyProvider-2xjMTEu6.js";import"./personData-vW3mumD1.js";import"./Status-BpzpxYZ-.js";import"./MuiPropsContext-DhRylJZk.js";import"./Chip-DXaMeATb.js";import"./createSvgIcon-DsUj6UQo.js";import"./useIsFocusVisible-DH0qxT5e.js";import"./ButtonBase-BAQsCgRq.js";import"./TransitionGroupContext-DLI0IzWy.js";import"./PageTemplate-mNUP99LO.js";import"./Typography-DfSdXC7o.js";import"./Typography-Yf1Zkad_.js";import"./useMountLifecycleEffect-CjsUCFhB.js";import"./Link-BnBknBcu.js";import"./Documentation-BrTRsPbe.js";import"./Surface-3Y97A1O8.js";import"./Paper-XsV8SWR9.js";import"./Dialog-CRuld07G.js";import"./FullScreenOverlay-D_QtB3Yt.js";import"./useUniqueId-Bsgqe1tm.js";import"./createUniqueId-ByTaVY63.js";import"./DialogContentText-DU3-VV7L.js";import"./DialogContent-_oGbCJT8.js";import"./utils-DkZjDCLm.js";import"./Fade-CVbWKXvx.js";import"./Portal-GAJY6Au9.js";import"./resolveComponentProps-BzfJewMt.js";import"./isHostComponent-DVu5iVWx.js";import"./Modal-B1-40kNg.js";import"./getScrollbarSize-Bqq2hMjQ.js";import"./ownerDocument-DW-IO8s5.js";import"./ownerWindow-HkKU3E4x.js";import"./createChainedFunction-BO_9K8Jh.js";import"./dialogActionsClasses-BWrWITLY.js";import"./DialogTitle-DyO9kr6R.js";import"./Button-DGmXZ3jw.js";import"./BaseButton-COF38VLB.js";import"./Tooltip-XQJL1Byd.js";import"./Tooltip-D4AWrTBw.js";import"./Grow-DacPmog-.js";import"./useControlled-NQulfz4l.js";import"./Popper-DjhYeJJy.js";import"./Button-CdPi1pZc.js";import"./Layout-BduWITqf.js";import"./Box-BGpAHVQV.js";import"./Box-CWTB5xfE.js";import"./DataTable-DeujVhYp.js";import"./index.esm-CaIA2ztV.js";import"./debounce-Be36O1Ab.js";import"./ListItem-C8ebNPnP.js";import"./utils-iop7lDec.js";import"./useFormControl-BMISTZuX.js";import"./FormLabel-BLj3hKkg.js";import"./List-Be7fhh4_.js";import"./Stack-DKhviX3e.js";import"./createStyled-D0LG5-qz.js";import"./useThemeProps-D4857Xca.js";import"./CircularProgress-B5_VbcVt.js";import"./Menu-CHod3UUY.js";import"./MenuList-CW8ri5AI.js";import"./colorManipulator-CjGkpVfF.js";import"./IconButton-OY9nJWpv.js";import"./Radio-BimAm2in.js";import"./SwitchBase-D-uzeIbM.js";import"./Checkbox-BVTNXOF7.js";import"./useMobilePicker-5I3ooa1D.js";import"./Select-9yKLDVKS.js";import"./ArrowDropDown-LYMnJjPD.js";import"./InputBase-DSZ9ZgyW.js";import"./FormHelperText-qF3DX-zz.js";import"./useThemeProps-Bfa1XAV-.js";import"./InputAdornment-D4SsBOPe.js";import"./visuallyHidden-Dan1xhjv.js";import"./MenuItem-B0_vCuIq.js";import"./Collapse-COoe3Qtd.js";import"./AlertTitle-BbBpDTwd.js";import"./useSlot-CaOQD_17.js";import"./Close-ATS01D1v.js";import"./Skeleton-dfR0DjWP.js";import"./Divider-DsFAYUeD.js";import"./Autocomplete-CXy6JKKy.js";import"./ListSubheader-Bwc0JItn.js";import"./tableSortLabelClasses-DtOYtU1J.js";import"./FormControlLabel-BKhSSavj.js";import"./DateTimePicker-LSjVE-IM.js";import"./Tabs-DzeBYjfY.js";import"./DatePicker-txjKmLSi.js";import"./Callout-DyDdgWdc.js";import"./Link-DI6v1ROk.js";import"./ExternalLink-BZ-Yczsk.js";import"./EmptyState-9pxLjmqH.js";import"./DataFilters-49CUFFBF.js";import"./Autocomplete-DD8JT6Eb.js";import"./useAutocomplete-DwWveFvJ.js";import"./index.esm-HelN6IAt.js";import"./Field-lyECanzU.js";import"./ScreenReaderText-CM78bF1y.js";import"./FieldHint-C3tXb7u4.js";import"./inputUtils-Dbi8XkA6.js";import"./Checkbox-BCh8HZ37.js";import"./CheckboxGroup-D-ykWUnV.js";import"./FormGroup-Cuk9jkbL.js";import"./Radio-tkNaA8vy.js";import"./RadioGroup-DhVJQTpS.js";import"./RadioGroup-DRNCKA-f.js";import"./SearchField-CYM6nbh5.js";import"./Search-CkfJXFe5.js";import"./Tag-BgjQI7VM.js";import"./TagList-DGN86KvF.js";import"./TextField-BuwBI2RX.js";import"./Filter-Dx8z3DNi.js";import"./ChevronRight-DkL07pJu.js";import"./MenuButton-Dr4RJoKG.js";import"./BaseMenuButton-pigMBOEp.js";import"./MenuContext-DKMyPMNY.js";import"./More-D1qrtSvt.js";import"./MenuItem-n-UKDxiu.js";import"./List-DsAZFSEg.js";import"./Show-BmUFIvXd.js";import"./useScrollIndication-C4t86M0g.js";import"./Pagination-D6myvUfo.js";import"./ArrowRight-Bi2Pswgc.js";import"./Drawer-CwxKxBTE.js";import"./Drawer-DEqB4KYp.js";import"./Form-BFqw21k4.js";function m(r){const t={a:"a",code:"code",p:"p",...p(),...r.components};return o.jsxs(o.Fragment,{children:[o.jsx(e,{of:i}),`
+`,o.jsx(n,{of:i}),`
+`,o.jsx(s,{of:i}),`
+`,o.jsx(a,{of:i}),`
+`,o.jsxs(t.p,{children:[o.jsx(t.code,{children:"PageTemplate"}),` is a multi-purpose container that enforces Odyssey layout conventions, ensuring that
+your screens look consistent without you doing extra work.`]}),`
+`,o.jsxs(t.p,{children:["If you're an Okta employee, you can see the ",o.jsx(t.a,{href:"https://www.figma.com/design/jMsVlc6QrA5dQXqPEEVT7S/%F0%9F%93%A6-Odyssey-Templates?node-id=1862-40643",rel:"nofollow",children:"Figma here"}),"."]}),`
+`,o.jsx(c,{})]})}function Kt(r={}){const{wrapper:t}={...p(),...r.components};return t?o.jsx(t,{...r,children:o.jsx(m,{...r})}):m(r)}export{Kt as default};