@okta/odyssey-react-mui 1.52.1 → 1.53.0

package/dist/assets/PageHeader-DHtVYyb-.js

@@ -0,0 +1,6 @@
+import{r,j as s,R as A,l as I,b as g,F as me}from"./iframe-CQjT1fxh.js";import{b as ue,c as fe,d as ge}from"./WpComponentsStorybookThemeDecorator-Db3wSJC0.js";import{I as pe,g as he,R as xe,a as we,u as B}from"./OdysseyProvider-PxeTd-wx.js";import{L as ee}from"./Link-thynTosX.js";import{S as O,s as ye}from"./tableRowClasses-Bk1uFtwh.js";import{a as be}from"./Breadcrumbs-DlF1RjAJ.js";import{B as X}from"./ButtonBase-Rz8p08Xo.js";import{M as ve}from"./Menu-DB2s3Jn0.js";import{u as He}from"./MuiPropsContext-Df02xyKB.js";import{C as Ie}from"./Chip-BgPaZbUf.js";import{M as H}from"./Box--NDTewyO.js";const Pe=(e,n,a,o)=>{var t,d,p,h;const i=[a,{code:n,...o||{}}];if((d=(t=e==null?void 0:e.services)==null?void 0:t.logger)!=null&&d.forward)return e.services.logger.forward(i,"warn","react-i18next::",!0);C(i[0])&&(i[0]=`react-i18next:: ${i[0]}`),(h=(p=e==null?void 0:e.services)==null?void 0:p.logger)!=null&&h.warn?e.services.logger.warn(...i):console!=null&&console.warn&&console.warn(...i)},Y={},D=(e,n,a,o)=>{C(a)&&Y[a]||(C(a)&&(Y[a]=new Date),Pe(e,n,a,o))},ne=(e,n)=>()=>{if(e.isInitialized)n();else{const a=()=>{setTimeout(()=>{e.off("initialized",a)},0),n()};e.on("initialized",a)}},Z=(e,n,a)=>{e.loadNamespaces(n,ne(e,a))},K=(e,n,a,o)=>{if(C(a)&&(a=[a]),e.options.preload&&e.options.preload.indexOf(n)>-1)return Z(e,a,o);a.forEach(i=>{e.options.ns.indexOf(i)<0&&e.options.ns.push(i)}),e.loadLanguages(n,ne(e,o))},Ne=(e,n,a={})=>!n.languages||!n.languages.length?(D(n,"NO_LANGUAGES","i18n.languages were undefined or empty",{languages:n.languages}),!0):n.hasLoadedNamespace(e,{lng:a.lng,precheck:(o,i)=>{if(a.bindI18n&&a.bindI18n.indexOf("languageChanging")>-1&&o.services.backendConnector.backend&&o.isLanguageChangingTo&&!i(o.isLanguageChangingTo,e))return!1}}),C=e=>typeof e=="string",Me=e=>typeof e=="object"&&e!==null,Ce=(e,n)=>{const a=r.useRef();return r.useEffect(()=>{a.current=e},[e,n]),a.current},ae=(e,n,a,o)=>e.getFixedT(n,a,o),Se=(e,n,a,o)=>r.useCallback(ae(e,n,a,o),[e,n,a,o]),Le=(e,n={})=>{var S,k,E,T;const{i18n:a}=n,{i18n:o,defaultNS:i}=r.useContext(pe)||{},t=a||o||he();if(t&&!t.reportNamespaces&&(t.reportNamespaces=new xe),!t){D(t,"NO_I18NEXT_INSTANCE","useTranslation: You will need to pass in an i18next instance by using initReactI18next");const f=(m,u)=>C(u)?u:Me(u)&&C(u.defaultValue)?u.defaultValue:Array.isArray(m)?m[m.length-1]:m,b=[f,{},!1];return b.t=f,b.i18n={},b.ready=!1,b}(S=t.options.react)!=null&&S.wait&&D(t,"DEPRECATED_OPTION","useTranslation: It seems you are still using the old wait option, you may migrate to the new useSuspense behaviour.");const d={...we(),...t.options.react,...n},{useSuspense:p,keyPrefix:h}=d;let l=i||((k=t.options)==null?void 0:k.defaultNS);l=C(l)?[l]:l||["translation"],(T=(E=t.reportNamespaces).addUsedNamespaces)==null||T.call(E,l);const w=(t.isInitialized||t.initializedStoreOnce)&&l.every(f=>Ne(f,t,d)),y=Se(t,n.lng||null,d.nsMode==="fallback"?l:l[0],h),c=()=>y,x=()=>ae(t,n.lng||null,d.nsMode==="fallback"?l:l[0],h),[L,N]=r.useState(c);let M=l.join();n.lng&&(M=`${n.lng}${M}`);const j=Ce(M),v=r.useRef(!0);r.useEffect(()=>{const{bindI18n:f,bindI18nStore:b}=d;v.current=!0,!w&&!p&&(n.lng?K(t,n.lng,l,()=>{v.current&&N(x)}):Z(t,l,()=>{v.current&&N(x)})),w&&j&&j!==M&&v.current&&N(x);const m=()=>{v.current&&N(x)};return f&&(t==null||t.on(f,m)),b&&(t==null||t.store.on(b,m)),()=>{v.current=!1,t&&f&&(f==null||f.split(" ").forEach(u=>t.off(u,m))),b&&t&&b.split(" ").forEach(u=>t.store.off(u,m))}},[t,M]),r.useEffect(()=>{v.current&&w&&N(c)},[t,h,w]);const P=[L,t,w];if(P.t=L,P.i18n=t,P.ready=w,w||!w&&!p)return P;throw new Promise(f=>{n.lng?K(t,n.lng,l,()=>f()):Z(t,l,()=>f())})},je=r.forwardRef((e,n)=>s.jsx(O,{fill:"none",ref:n,viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",...e,children:s.jsx(s.Fragment,{children:s.jsx("path",{clipRule:"evenodd",d:"m5.646 13.06 4.647 4.647 1.414-1.414L8.414 13H19v-2H8.414l3.293-3.293-1.414-1.414-4.647 4.646a1.5 1.5 0 0 0 0 2.122Z",fill:"currentColor",fillRule:"evenodd"})})})),te=r.memo(je);te.displayName="ArrowLeftIcon";const ke=r.forwardRef((e,n)=>s.jsx(O,{fill:"none",ref:n,viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",...e,children:s.jsx(s.Fragment,{children:s.jsx("path",{clipRule:"evenodd",d:"M2 3H1v18h7.667c1.093 0 2.003.199 2.67.75l.004.002.015.012a.688.688 0 0 0 .062.047l.003.002a1.012 1.012 0 0 0 .696.168c.3-.033.494-.192.522-.215l.003-.002c.029-.023.05-.043.058-.05a.808.808 0 0 0 .018-.017C13.228 21.21 14.08 21 15.2 21H23V3h-8.932a2.798 2.798 0 0 0-2.106.953 3.82 3.82 0 0 0-.232-.226A2.866 2.866 0 0 0 9.822 3H2Zm9 3.562c0-.513-.219-1.001-.601-1.343A.866.866 0 0 0 9.822 5H3v14h5.667c.746 0 1.553.076 2.333.331V6.561Zm0 14.4v.01-.01Zm2 0v.005-.008.003Zm0-1.666c.736-.232 1.509-.296 2.2-.296H21V5h-6.932a.8.8 0 0 0-.559.228A1.7 1.7 0 0 0 13 6.441v12.854ZM9 11H5V9h4v2Zm6 0h4V9h-4v2Zm4 4h-4v-2h4v2ZM5 15h4v-2H5v2Z",fill:"currentColor",fillRule:"evenodd"})})})),re=r.memo(ke);re.displayName="DocumentationIcon";const Ee=r.forwardRef((e,n)=>s.jsx(O,{fill:"none",ref:n,viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",...e,children:s.jsx(s.Fragment,{children:s.jsx("path",{clipRule:"evenodd",d:"M8.293 14.293 18.586 4H10V2h10.223c.12 0 .262 0 .387.01.145.012.353.042.571.153a1.5 1.5 0 0 1 .655.656c.112.218.142.426.154.571.01.125.01.268.01.387V14h-2V5.414L9.707 15.707l-1.414-1.414Zm7.745 5.74v-7.847l2-2.042v11.89H2.024V5.966h11.828l-2.041 2H4.024v12.068h12.014Z",fill:"currentColor",fillRule:"evenodd"})})})),oe=r.memo(Ee);oe.displayName="ExternalLinkIcon";const Te=r.forwardRef((e,n)=>s.jsx(O,{fill:"none",ref:n,viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",...e,children:s.jsx(s.Fragment,{children:s.jsx("path",{clipRule:"evenodd",d:"m12 .655.669.602 10 9 .331.298V20a3 3 0 0 1-3 3h-5v-7a3 3 0 1 0-6 0v7H4a3 3 0 0 1-3-3v-9.445l.331-.298 10-9L12 .655Zm-9 10.79V20a1 1 0 0 0 1 1h3v-5a5 5 0 0 1 10 0v5h3a1 1 0 0 0 1-1v-8.555l-9-8.1-9 8.1Z",fill:"currentColor",fillRule:"evenodd"})})})),se=r.memo(Te);se.displayName="HomeIcon";const Be=({ariaLabel:e,children:n,href:a,icon:o,linkRef:i,rel:t,target:d,testId:p,translate:h,variant:l,onClick:w})=>{const y=r.useRef(null);return r.useImperativeHandle(i,()=>({focus:()=>{var c;(c=y.current)==null||c.focus()}}),[]),s.jsxs(ee,{"aria-label":e,"data-se":p,href:a,onClick:w,ref:y,rel:t,target:d,translate:h,variant:l,children:[o&&s.jsx("span",{className:"Link-icon",children:o}),n,d==="_blank"&&s.jsx("span",{className:"Link-indicator",role:"presentation",children:s.jsx(oe,{})})]})},ie=r.memo(Be);ie.displayName="Link";const R=r.createContext({breadcrumbType:"listItem"});ye.span`
+  white-space: nowrap;
+  overflow: hidden;
+  max-width: 10rem;
+  text-overflow: ellipsis;
+`;const z={currentPage:{breadcrumbType:"currentPage"},listItem:{breadcrumbType:"listItem"},menuItem:{breadcrumbType:"menuItem"}},Re=5,ze=({children:e,homeHref:n,maxVisibleItems:a=Re,testId:o,translate:i})=>{const{t}=Le(),[d,p]=r.useState(null),h=r.useMemo(()=>Math.min(Math.max(a,0),e.length),[a,e]),l=r.useMemo(()=>{if(e.length<=h)return{beforeMenu:[],insideMenu:[],remainingBreadcrumbs:e};{const c=Math.floor(h/2),x=e.length-h;return{beforeMenu:e.slice(0,c),insideMenu:e.slice(c,c+x),remainingBreadcrumbs:e.slice(c+x)}}},[e,h]),w=r.useCallback(c=>p(c.currentTarget),[]),y=r.useCallback(()=>{p(null)},[]);return s.jsxs(be,{"aria-label":t("breadcrumbs.label.text"),"data-se":o,maxItems:e.length+1,translate:i,children:[n&&s.jsx(X,{"aria-label":t("breadcrumbs.home.text"),href:n,children:s.jsx(se,{})}),l.beforeMenu.map((c,x)=>s.jsx(R.Provider,{value:z.listItem,children:c},x)),l.insideMenu.length>0&&s.jsxs(s.Fragment,{children:[s.jsx(X,{onClick:w,children:"..."}),s.jsx(ve,{anchorEl:d,anchorOrigin:{horizontal:"left",vertical:"bottom"},MenuListProps:{sx:{minWidth:180}},onClose:y,open:!!d,children:s.jsx(R.Provider,{value:z.menuItem,children:l.insideMenu})})]}),l.remainingBreadcrumbs.map((c,x)=>x===l.remainingBreadcrumbs.length-1?s.jsx(R.Provider,{value:z.currentPage,children:c},x):s.jsx(R.Provider,{value:z.listItem,children:c},x))]})},le=r.memo(ze);le.displayName="BreadcrumbList";const Ae=({ariaDescribedBy:e,label:n,severity:a,testId:o,translate:i,variant:t="pill"})=>{const d=He();return s.jsx(Ie,{...d,"aria-describedby":e,color:a,"data-se":o,label:n,translate:i,variant:t})},V=r.memo(Ae);V.displayName="Status";const Oe="•",Q=76,ce=r.memo(({status:e})=>e!=null&&e.label?g(V,{label:e.label,severity:e.severity??"default",variant:"pill"}):null);ce.displayName="StatusDisplay";const F=r.memo(({children:e,clampLines:n,overline:a,status:o,wordBreak:i})=>{const t=B();return I(me,{children:[a&&g(fe,{children:a}),I(H,{sx:{display:"flex",alignItems:"center",gap:t.Spacing3,"& > h3":{margin:0}},children:[g(ge,{clampLines:n,wordBreak:i,children:e}),g(ce,{status:o})]})]})});F.displayName="PageHeaderTitle";const G=r.memo(({children:e,clampLines:n,wordBreak:a})=>g(ue,{clampLines:n,wordBreak:a,children:e}));G.displayName="PageHeaderDescription";const _=r.memo(({items:e})=>{const n=B();return!e||e.length===0?null:g(H,{component:"ul",sx:{listStyle:"none",display:"flex",flexWrap:"wrap",columnGap:n.Spacing2,rowGap:n.Spacing1,padding:0,margin:0,"& > li.PageHeader-metadataItem":{display:"inline-flex",alignItems:"center",gap:n.Spacing2,color:"text.secondary"},"& > li.PageHeader-metadataItem:not(:first-of-type)::before":{content:'"'+Oe+'"',fontSize:n.TypographyScale0}},children:e.map((a,o)=>{const i=typeof a=="string",t=!i&&a.icon,d=i?a:a.text,p=!i&&a.status;return I("li",{className:"PageHeader-metadataItem",children:[I(H,{sx:{display:"inline-flex",alignItems:"center",gap:n.Spacing1},children:[t,g("span",{children:d})]}),p&&g(V,{label:p.label,severity:p.severity??"default",variant:"pill"})]},o)})})});_.displayName="PageHeaderMetadata";const W=r.memo(({children:e})=>{const n=B();return g(H,{sx:{width:Q,height:Q,borderRadius:n.BorderRadiusMain,backgroundColor:n.HueNeutral100,display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0,overflow:"hidden"},children:e})});W.displayName="PageHeaderImage";const $=r.memo(({children:e})=>{const n=B(),a=A.Children.toArray(e).slice(0,3);return g(H,{sx:{display:"flex",gap:n.Spacing2},children:a.map((o,i)=>g(H,{children:o},i))})});$.displayName="PageHeaderActions";const U=r.memo(({href:e,children:n})=>I(ee,{href:e,rel:"noopener noreferrer",target:"_blank",children:[g("span",{className:"Link-icon",children:g(re,{})}),n]}));U.displayName="PageHeaderDocumentation";const q=r.memo(({homeHref:e,children:n})=>g(le,{homeHref:e,children:n}));q.displayName="PageHeaderBreadcrumbs";const J=r.memo(({children:e,href:n,onClick:a})=>g(ie,{href:n,icon:g(te,{}),onClick:a,children:e}));J.displayName="PageHeaderBackLink";const de=r.memo(({children:e,testId:n="page-header"})=>{const a=B(),o=r.useMemo(()=>{const y=[];let c=null,x=null,L=null,N=null,M=null,j=null,v=0,P=0,S=0,k=0,E=0,T=0,f=0,b=0;if(A.Children.forEach(e,m=>{if(A.isValidElement(m)){const u=m.type;u===q?(v++,y.push(m)):u===J?(P++,y.push(m)):u===W?(b++,j=m):u===F?(S++,c=m):u===_?(k++,x=m):u===G?(E++,L=m):u===U?(T++,N=m):u===$&&(f++,M=m)}}),v>0&&P>0)throw new Error("PageHeader: Cannot use both Breadcrumbs and BackLink. Choose one.");if(v>1)throw new Error("PageHeader: Only one Breadcrumbs component allowed.");if(P>1)throw new Error("PageHeader: Only one BackLink component allowed.");if(S===0)throw new Error("PageHeader: Title component is required.");if(S>1)throw new Error("PageHeader: Only one Title component allowed.");if(b>1)throw new Error("PageHeader: Only one Image component allowed.");if(k>1)throw new Error("PageHeader: Only one Metadata component allowed.");if(E>1)throw new Error("PageHeader: Only one Description component allowed.");if(T>1)throw new Error("PageHeader: Only one Documentation component allowed.");if(f>1)throw new Error("PageHeader: Only one Actions component allowed.");return{navigation:y,title:c,metadata:x,description:L,documentation:N,actions:M,image:j}},[e]),{navigation:i,title:t,metadata:d,description:p,documentation:h,actions:l,image:w}=o;return I(H,{sx:{display:"flex",alignItems:"center",gap:a.Spacing5},testId:n,children:[I(H,{sx:{display:"flex",flexDirection:"column",gap:a.Spacing5,flexGrow:1},children:[i.length>0&&i.map((y,c)=>g(A.Fragment,{children:y},c)),I(H,{sx:{display:"flex",flexDirection:"row",gap:a.Spacing5,flexWrap:"wrap"},children:[w,I(H,{sx:{flexGrow:1,display:"flex",flexDirection:"column",justifyContent:"space-between"},children:[t,d]})]}),p]}),(h||l)&&I(H,{sx:{display:"flex",flexDirection:"column",alignItems:"flex-end",gap:a.Spacing4,flexShrink:0},children:[h,l]})]})});de.displayName="PageHeader";const Xe=Object.assign(de,{Title:F,Description:G,Metadata:_,Image:W,Actions:$,Documentation:U,Breadcrumbs:q,BackLink:J});export{Xe as P};

package/dist/assets/PageHeader.stories-CCvS30-w.js

@@ -0,0 +1,17 @@
+import{r as c,j as m,l as B,b as h}from"./iframe-CQjT1fxh.js";import{u as z}from"./OdysseyProvider-PxeTd-wx.js";import{M as x}from"./Box--NDTewyO.js";import{T as N}from"./Typography-Jr4Brrb5.js";import{S as w}from"./tableRowClasses-Bk1uFtwh.js";import{M as R}from"./Button-CQAScxdp.js";import{O}from"./OdysseyStorybookThemeDecorator-CHlNoX17.js";import{W as k}from"./WorkflowsComponentsStorybookThemeDecorator-DrWk22II.js";import"./preload-helper-Dp1pzeXC.js";import"./i18next-7SyOfhCu.js";import"./ScopedCssBaseline-BOa6kM98.js";import"./Box-CnVllI1S.js";import"./MuiPropsContext-Df02xyKB.js";import"./Tooltip-yxN-KFjL.js";import"./Grow-DvH-Xu1P.js";import"./utils-D-QCjykO.js";import"./TransitionGroupContext-yBqGXZYI.js";import"./index-5Qx3hCfP.js";import"./useIsFocusVisible-D1xCTBdT.js";import"./Portal-DeJFqeW-.js";import"./resolveComponentProps-DGxe9oED.js";import"./isHostComponent-DVu5iVWx.js";import"./useControlled-BUhC7uWK.js";import"./Popper-CISS1LuJ.js";import"./ownerDocument-DW-IO8s5.js";import"./Button-Dug4qNr3.js";import"./ButtonBase-Rz8p08Xo.js";import"./OdysseyThemeProvider-BA0_xP7N.js";import"./WarningFilled-DOHs-JmZ.js";import"./index-C77ZwfYm.js";import"./OdysseyProvider-rboSNY26.js";const T=c.forwardRef((t,i)=>m.jsx(w,{fill:"none",ref:i,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"})})})),j=c.memo(T);j.displayName="AddIcon";const A={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:i,ariaLabel:a,ariaLabelledBy:s,children:d,color:e,component:r,id:o,isPresentational:n,testId:l,translate:b,typographyRef:f,variant:u="body"})=>{const y=c.useMemo(()=>r||(u==="body"||u==="subordinate"||u==="support"||u==="overline"?"p":u),[r,u]),g=c.useRef(null);return c.useImperativeHandle(f,()=>({focus:()=>{var v;(v=g.current)==null||v.focus()}}),[]),m.jsx(N,{"aria-current":t,"aria-describedby":i,"aria-label":a,"aria-labelledby":s,children:d,color:e,component:y,"data-se":l,id:o,ref:g,role:n?"presentation":void 0,tabIndex:-1,translate:b,variant:A[u]})},P=c.memo(p);P.displayName="Typography";const _=({ariaCurrent:t,ariaDescribedBy:i,ariaLabel:a,ariaLabelledBy:s,children:d,color:e,component:r,id:o,isPresentational:n,testId:l,translate:b})=>m.jsx(p,{ariaCurrent:t,ariaDescribedBy:i,ariaLabel:a,ariaLabelledBy:s,children:d,color:e,component:r,id:o,isPresentational:n,testId:l,translate:b,variant:"h1"}),I=c.memo(_);I.displayName="Heading1";const E=({ariaCurrent:t,ariaDescribedBy:i,ariaLabel:a,ariaLabelledBy:s,children:d,color:e,component:r,id:o,testId:n,translate:l})=>m.jsx(p,{ariaCurrent:t,ariaDescribedBy:i,ariaLabel:a,ariaLabelledBy:s,children:d,color:e,component:r,id:o,testId:n,translate:l,variant:"h2"}),F=c.memo(E);F.displayName="Heading2";const V=({ariaCurrent:t,ariaDescribedBy:i,ariaLabel:a,ariaLabelledBy:s,children:d,color:e,component:r,id:o,testId:n,translate:l})=>m.jsx(p,{ariaCurrent:t,ariaDescribedBy:i,ariaLabel:a,ariaLabelledBy:s,children:d,color:e,component:r,id:o,testId:n,translate:l,variant:"h3"}),W=c.memo(V);W.displayName="Heading3";const $=({ariaCurrent:t,ariaDescribedBy:i,ariaLabel:a,ariaLabelledBy:s,children:d,color:e,component:r,id:o,testId:n,translate:l})=>m.jsx(p,{ariaCurrent:t,ariaDescribedBy:i,ariaLabel:a,ariaLabelledBy:s,children:d,color:e,component:r,id:o,testId:n,translate:l,variant:"h4"}),K=c.memo($);K.displayName="Heading4";const U=({ariaCurrent:t,ariaDescribedBy:i,ariaLabel:a,ariaLabelledBy:s,children:d,color:e,component:r,id:o,testId:n,translate:l})=>m.jsx(p,{ariaCurrent:t,ariaDescribedBy:i,ariaLabel:a,ariaLabelledBy:s,children:d,color:e,component:r,id:o,testId:n,translate:l,variant:"h5"}),Y=c.memo(U);Y.displayName="Heading5";const Z=({ariaCurrent:t,ariaDescribedBy:i,ariaLabel:a,ariaLabelledBy:s,children:d,color:e,component:r,id:o,testId:n,translate:l})=>m.jsx(p,{ariaCurrent:t,ariaDescribedBy:i,ariaLabel:a,ariaLabelledBy:s,children:d,color:e,component:r,id:o,testId:n,translate:l,variant:"h6"}),q=c.memo(Z);q.displayName="Heading6";const G=({ariaCurrent:t,ariaDescribedBy:i,ariaLabel:a,ariaLabelledBy:s,children:d,color:e,component:r,id:o,testId:n,translate:l})=>m.jsx(p,{ariaCurrent:t,ariaDescribedBy:i,ariaLabel:a,ariaLabelledBy:s,children:d,color:e,component:r,id:o,testId:n,translate:l,variant:"body"}),D=c.memo(G);D.displayName="Paragraph";const J=({ariaCurrent:t,ariaDescribedBy:i,ariaLabel:a,ariaLabelledBy:s,children:d,color:e,component:r,id:o,testId:n,translate:l})=>m.jsx(p,{ariaCurrent:t,ariaDescribedBy:i,ariaLabel:a,ariaLabelledBy:s,children:d,color:e,component:r,id:o,testId:n,translate:l,variant:"subordinate"}),Q=c.memo(J);Q.displayName="Subordinate";const X=({ariaCurrent:t,ariaDescribedBy:i,ariaLabel:a,ariaLabelledBy:s,children:d,color:e,component:r,id:o,testId:n,translate:l})=>m.jsx(p,{ariaCurrent:t,ariaDescribedBy:i,ariaLabel:a,ariaLabelledBy:s,children:d,color:e,component:r,id:o,testId:n,translate:l,variant:"support"}),ee=c.memo(X);ee.displayName="Support";const ae=({ariaDescribedBy:t,ariaLabel:i,ariaLabelledBy:a,children:s,color:d,component:e,id:r,testId:o,translate:n})=>m.jsx(p,{ariaDescribedBy:t,ariaLabel:i,ariaLabelledBy:a,children:s,color:d,component:e,id:r,testId:o,translate:n,variant:"legend"}),re=c.memo(ae);re.displayName="Legend";const oe=({ariaDescribedBy:t,ariaLabel:i,ariaLabelledBy:a,children:s,color:d,component:e,id:r,testId:o,translate:n})=>m.jsx(p,{ariaDescribedBy:t,ariaLabel:i,ariaLabelledBy:a,children:s,color:d,component:e,id:r,testId:o,translate:n,variant:"overline"}),te=c.memo(oe);te.displayName="Overline";const ie={lineHeight:"1.5rem",whiteSpace:"pre-line"},ne=({buttonLabel:t,buttonVariant:i="secondary",headingText:a,isLookAndFeelEnabled:s,isResourceCreator:d,onCreateResource:e,resourceDescription:r,resourceType:o})=>{const n=z(),l=t||`Add new ${a.toLowerCase()}`,b=c.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]),f=c.useMemo(()=>({alignItems:"center",display:"flex",gridArea:"header",justifyContent:"space-between",overflow:"hidden",paddingRight:n.Spacing5}),[n.Spacing5]);return s?B(x,{sx:f,children:[B(x,{children:[h(I,{children:a}),r&&h(x,{sx:ie,children:h(D,{color:"textSecondary",children:r})})]}),d&&h(R,{label:l,onClick:b,startIcon:h(j,{}),variant:i})]}):null},S=c.memo(ne);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{action:se}=__STORYBOOK_MODULE_ACTIONS__,_e={component:S,decorators:[O,k],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}},L={args:{isResourceCreator:!0,onCreateResource:se("onCreateResource"),resourceDescription:"Lorem ipsum."}};var H,C,M;L.parameters={...L.parameters,docs:{...(H=L.parameters)==null?void 0:H.docs,source:{originalSource:`{
+  args: {
+    isResourceCreator: true,
+    onCreateResource: action("onCreateResource"),
+    resourceDescription: "Lorem ipsum."
+  }
+}`,...(M=(C=L.parameters)==null?void 0:C.docs)==null?void 0:M.source}}};const Ee=["Default"];export{L as Default,Ee as __namedExportsOrder,_e as default};

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

@@ -0,0 +1,364 @@
+import{j as e}from"./iframe-CQjT1fxh.js";import{R as Se,P as r}from"./ResourceAccessPolicyComponentsStorybookThemeDecorator-C-AyLafs.js";import{O as Ce}from"./OdysseyStorybookThemeDecorator-CHlNoX17.js";import{B as n}from"./Breadcrumbs-DlF1RjAJ.js";import{M as Ae}from"./MenuButton-BffESdH9.js";import{M as j}from"./MenuItem-Cmq8TfUJ.js";import{M as a}from"./Button-0PI4ljbj.js";import{M as Le}from"./Notification-CqbysXIb.js";import{M as We}from"./Link-BKNciOfr.js";import{M as Ie}from"./Sync-Bo0k4rYZ.js";import"./preload-helper-Dp1pzeXC.js";import"./Typography-CP569bC2.js";import"./Typography-Jr4Brrb5.js";import"./tableRowClasses-Bk1uFtwh.js";import"./Box-CnVllI1S.js";import"./Link-thynTosX.js";import"./useIsFocusVisible-D1xCTBdT.js";import"./ButtonBase-Rz8p08Xo.js";import"./TransitionGroupContext-yBqGXZYI.js";import"./Menu-DB2s3Jn0.js";import"./Portal-DeJFqeW-.js";import"./resolveComponentProps-DGxe9oED.js";import"./isHostComponent-DVu5iVWx.js";import"./index-5Qx3hCfP.js";import"./Grow-DvH-Xu1P.js";import"./utils-D-QCjykO.js";import"./ownerDocument-DW-IO8s5.js";import"./ownerWindow-HkKU3E4x.js";import"./debounce-Be36O1Ab.js";import"./Modal-C5P7v6Gt.js";import"./getScrollbarSize-Bqq2hMjQ.js";import"./createChainedFunction-BO_9K8Jh.js";import"./Fade-ZBabHGDm.js";import"./Paper-vUVrw-QB.js";import"./MenuList-D3GSt85L.js";import"./List-D0N4Xybp.js";import"./Chip-BgPaZbUf.js";import"./createSvgIcon-CaWcxZng.js";import"./i18next-7SyOfhCu.js";import"./ScopedCssBaseline-BOa6kM98.js";import"./OdysseyThemeProvider-BA0_xP7N.js";import"./WarningFilled-DOHs-JmZ.js";import"./index-C77ZwfYm.js";import"./OdysseyProvider-rboSNY26.js";import"./Typography-CjpHjc10.js";import"./Group-BJr9nAnt.js";import"./User-BEFwQRGi.js";import"./MenuItem-CpMFWgaz.js";import"./Home-D8RWt2JU.js";import"./BaseMenuButton-BXkyi9Y-.js";import"./Box-B3rdnavX.js";import"./useUniqueId-DG6rB8dI.js";import"./createUniqueId-BHjR7HQF.js";import"./BaseButton-C9tiChQu.js";import"./MuiPropsContext-D6i6qZME.js";import"./Tooltip-B-PXZNTK.js";import"./Tooltip-yxN-KFjL.js";import"./useControlled-BUhC7uWK.js";import"./Popper-CISS1LuJ.js";import"./Button-Dug4qNr3.js";import"./MenuContext-UsOwIWpO.js";import"./More-BAN0OFVF.js";const{action:t}=__STORYBOOK_MODULE_ACTIONS__,v=["Metadata A","Metadata B","Metadata C"],qr={component:r,decorators:[Ce,Se],tags:["autodocs"]},i={render:Me=>e.jsxs(r,{testId:Me.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:v}),e.jsx(r.Description,{children:"Optional brief description about the section or page you are about to encounter below."}),e.jsx(r.Documentation,{href:"#",children:"Documentation"}),e.jsxs(r.Actions,{children:[e.jsx(Ae,{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:"#",onClick:t("Back to list click"),children:"Back to list"}),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:v.slice(0,2)})]})},l={render:()=>e.jsxs(r,{children:[e.jsx(r.Title,{children:"Page title"}),e.jsx(r.Documentation,{href:"#",children:"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(Ae,{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:v}),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:"#",children:"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."}}}},f={render:()=>e.jsxs(r,{children:[e.jsx(r.Title,{children:"Default policy"}),e.jsx(r.Metadata,{items:[{text:"Staged branch created",icon:e.jsx(Ie,{})},{text:"Monitoring staged branch",icon:e.jsx(Le,{}),status:{label:"ENABLED",severity:"success"}},{text:"Connection: con_DM5TbREdm8tDPR",icon:e.jsx(We,{})}]}),e.jsx(r.Description,{children:"Demonstrates metadata with icons, status badges, and mixed content types."})]}),parameters:{docs:{description:{story:"Shows how metadata can include Odyssey icons, status badges, and mixed content. Icons provide visual context and help users quickly identify different types of information."}}}};var B,D,w;i.parameters={...i.parameters,docs:{...(B=i.parameters)==null?void 0:B.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="#">
+        Documentation
+      </PageHeader.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=(D=i.parameters)==null?void 0:D.docs)==null?void 0:w.source}}};var A,M,S;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>
+}`,...(S=(M=o.parameters)==null?void 0:M.docs)==null?void 0:S.source}}};var C,L,W;s.parameters={...s.parameters,docs:{...(C=s.parameters)==null?void 0:C.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>
+}`,...(W=(L=s.parameters)==null?void 0:L.docs)==null?void 0:W.source}}};var I,O,E;c.parameters={...c.parameters,docs:{...(I=c.parameters)==null?void 0:I.docs,source:{originalSource:`{
+  render: () => <PageHeader>
+      <PageHeader.BackLink href="#" onClick={action("Back to list click")}>
+        Back to list
+      </PageHeader.BackLink>
+      <PageHeader.Title>Page title</PageHeader.Title>
+    </PageHeader>,
+  parameters: {
+    docs: {
+      description: {
+        story: "Uses the simple backLink variant (no breadcrumbs or custom navigation provided)."
+      }
+    }
+  }
+}`,...(E=(O=c.parameters)==null?void 0:O.docs)==null?void 0:E.source}}};var R,U,V;d.parameters={...d.parameters,docs:{...(R=d.parameters)==null?void 0:R.docs,source:{originalSource:`{
+  render: () => <PageHeader>
+      <PageHeader.Title status={{
+      label: "BETA",
+      severity: "info"
+    }}>
+        Page title
+      </PageHeader.Title>
+      <PageHeader.Metadata items={sampleMetadata.slice(0, 2)} />
+    </PageHeader>
+}`,...(V=(U=d.parameters)==null?void 0:U.docs)==null?void 0:V.source}}};var _,z,N;l.parameters={...l.parameters,docs:{...(_=l.parameters)==null?void 0:_.docs,source:{originalSource:`{
+  render: () => <PageHeader>
+      <PageHeader.Title>Page title</PageHeader.Title>
+      <PageHeader.Documentation href="#">
+        Documentation
+      </PageHeader.Documentation>
+    </PageHeader>,
+  parameters: {
+    docs: {
+      description: {
+        story: "Shows the documentation link in the top-right corner."
+      }
+    }
+  }
+}`,...(N=(z=l.parameters)==null?void 0:z.docs)==null?void 0:N.source}}};var q,J,X;m.parameters={...m.parameters,docs:{...(q=m.parameters)==null?void 0:q.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."
+      }
+    }
+  }
+}`,...(X=(J=m.parameters)==null?void 0:J.docs)==null?void 0:X.source}}};var F,K,Y;p.parameters={...p.parameters,docs:{...(F=p.parameters)==null?void 0:F.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."
+      }
+    }
+  }
+}`,...(Y=(K=p.parameters)==null?void 0:K.docs)==null?void 0:Y.source}}};var G,Q,Z;u.parameters={...u.parameters,docs:{...(G=u.parameters)==null?void 0:G.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."
+      }
+    }
+  }
+}`,...(Z=(Q=u.parameters)==null?void 0:Q.docs)==null?void 0:Z.source}}};var $,ee,re;h.parameters={...h.parameters,docs:{...($=h.parameters)==null?void 0:$.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>
+}`,...(re=(ee=h.parameters)==null?void 0:ee.docs)==null?void 0:re.source}}};var te,ae,ne;g.parameters={...g.parameters,docs:{...(te=g.parameters)==null?void 0:te.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="#">Help</PageHeader.Documentation>
+    </PageHeader>,
+  parameters: {
+    docs: {
+      description: {
+        story: "Demonstrates that component order in JSX doesn't matter - they are automatically organized into the correct layout sections."
+      }
+    }
+  }
+}`,...(ne=(ae=g.parameters)==null?void 0:ae.docs)==null?void 0:ne.source}}};var ie,oe,se;P.parameters={...P.parameters,docs:{...(ie=P.parameters)==null?void 0:ie.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."
+      }
+    }
+  }
+}`,...(se=(oe=P.parameters)==null?void 0:oe.docs)==null?void 0:se.source}}};var ce,de,le;y.parameters={...y.parameters,docs:{...(ce=y.parameters)==null?void 0:ce.docs,source:{originalSource:`{
+  render: () => <PageHeader>
+      <PageHeader.Title>Minimal Page</PageHeader.Title>
+    </PageHeader>,
+  parameters: {
+    docs: {
+      description: {
+        story: "Minimal example with just a title."
+      }
+    }
+  }
+}`,...(le=(de=y.parameters)==null?void 0:de.docs)==null?void 0:le.source}}};var me,pe,ue;x.parameters={...x.parameters,docs:{...(me=x.parameters)==null?void 0:me.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."
+      }
+    }
+  }
+}`,...(ue=(pe=x.parameters)==null?void 0:pe.docs)==null?void 0:ue.source}}};var he,ge,Pe;b.parameters={...b.parameters,docs:{...(he=b.parameters)==null?void 0:he.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."
+      }
+    }
+  }
+}`,...(Pe=(ge=b.parameters)==null?void 0:ge.docs)==null?void 0:Pe.source}}};var ye,xe,be;H.parameters={...H.parameters,docs:{...(ye=H.parameters)==null?void 0:ye.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."
+      }
+    }
+  }
+}`,...(be=(xe=H.parameters)==null?void 0:xe.docs)==null?void 0:be.source}}};var He,Te,ke;T.parameters={...T.parameters,docs:{...(He=T.parameters)==null?void 0:He.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."
+      }
+    }
+  }
+}`,...(ke=(Te=T.parameters)==null?void 0:Te.docs)==null?void 0:ke.source}}};var fe,je,ve;k.parameters={...k.parameters,docs:{...(fe=k.parameters)==null?void 0:fe.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."
+      }
+    }
+  }
+}`,...(ve=(je=k.parameters)==null?void 0:je.docs)==null?void 0:ve.source}}};var Be,De,we;f.parameters={...f.parameters,docs:{...(Be=f.parameters)==null?void 0:Be.docs,source:{originalSource:`{
+  render: () => <PageHeader>
+      <PageHeader.Title>Default policy</PageHeader.Title>
+      <PageHeader.Metadata items={[{
+      text: "Staged branch created",
+      icon: <SyncIcon />
+    }, {
+      text: "Monitoring staged branch",
+      icon: <NotificationIcon />,
+      status: {
+        label: "ENABLED",
+        severity: "success"
+      }
+    }, {
+      text: "Connection: con_DM5TbREdm8tDPR",
+      icon: <LinkIcon />
+    }]} />
+      <PageHeader.Description>
+        Demonstrates metadata with icons, status badges, and mixed content
+        types.
+      </PageHeader.Description>
+    </PageHeader>,
+  parameters: {
+    docs: {
+      description: {
+        story: "Shows how metadata can include Odyssey icons, status badges, and mixed content. Icons provide visual context and help users quickly identify different types of information."
+      }
+    }
+  }
+}`,...(we=(De=f.parameters)==null?void 0:De.docs)==null?void 0:we.source}}};const Jr=["AllFeatures","Default","WithBreadcrumbs","WithBackLink","WithStatus","WithDocumentation","WithActions","WithMixedActions","WithTooManyActions","WithImage","OrderIndependent","MetadataBeforeTitle","Minimal","TitleWithClampLines","TitleWithWordBreak","DescriptionWithClampLines","DescriptionWithWordBreak","CombinedTitleAndDescriptionOverflow","WithRichMetadata"];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,f as WithRichMetadata,d as WithStatus,u as WithTooManyActions,Jr as __namedExportsOrder,qr as default};