@okta/odyssey-react-mui 1.52.1 → 1.53.0

package/dist/assets/InformationCircle-DRZkRWne.js

@@ -0,0 +1 @@
+import{r,j as o}from"./iframe-CQjT1fxh.js";import{S as i}from"./tableRowClasses-Bk1uFtwh.js";const t=r.forwardRef((e,n)=>o.jsx(i,{fill:"none",ref:n,viewBox:"0 0 16 16",xmlns:"http://www.w3.org/2000/svg",...e,children:o.jsx(o.Fragment,{children:o.jsx("path",{clipRule:"evenodd",d:"M8 2a6 6 0 1 0 0 12A6 6 0 0 0 8 2ZM.667 8a7.333 7.333 0 1 1 14.666 0A7.333 7.333 0 0 1 .667 8ZM8 5.833a.833.833 0 1 0 0-1.666.833.833 0 0 0 0 1.666Zm.667 1.834a.667.667 0 0 0-1.334 0v4h1.334v-4Z",fill:"currentColor",fillRule:"evenodd"})})})),a=r.memo(t);a.displayName="InformationCircleIcon";export{a as M};

package/dist/assets/InputAdornment-Clfg5IS6.js

@@ -0,0 +1 @@
+import{b as y,_ as j,a as c,c as C,d as I,e as m,f as A,g as L,i as f}from"./tableRowClasses-Bk1uFtwh.js";import{r as b,j as i}from"./iframe-CQjT1fxh.js";import{u as R,a as z}from"./FormHelperText-CVc1kPQJ.js";import{T}from"./Typography-Jr4Brrb5.js";var x;const _=["children","className","component","disablePointerEvents","disableTypography","position","variant"],$=(e,t)=>{const{ownerState:o}=e;return[t.root,t[`position${m(o.position)}`],o.disablePointerEvents===!0&&t.disablePointerEvents,t[o.variant]]},F=e=>{const{classes:t,disablePointerEvents:o,hiddenLabel:n,position:s,size:r,variant:l}=e,p={root:["root",o&&"disablePointerEvents",s&&`position${m(s)}`,l,n&&"hiddenLabel",r&&`size${m(r)}`]};return A(p,L,t)},N=C("div",{name:"MuiInputAdornment",slot:"Root",overridesResolver:$})(({theme:e,ownerState:t})=>c({display:"flex",height:"0.01em",maxHeight:"2em",alignItems:"center",whiteSpace:"nowrap",color:(e.vars||e).palette.action.active},t.variant==="filled"&&{[`&.${f.positionStart}&:not(.${f.hiddenLabel})`]:{marginTop:16}},t.position==="start"&&{marginRight:8},t.position==="end"&&{marginLeft:8},t.disablePointerEvents===!0&&{pointerEvents:"none"})),H=b.forwardRef(function(t,o){const n=y({props:t,name:"MuiInputAdornment"}),{children:s,className:r,component:l="div",disablePointerEvents:p=!1,disableTypography:g=!1,position:u,variant:v}=n,P=j(n,_),a=R()||{};let d=v;v&&a.variant,a&&!d&&(d=a.variant);const h=c({},n,{hiddenLabel:a.hiddenLabel,size:a.size,disablePointerEvents:p,position:u,variant:d}),E=F(h);return i.jsx(z.Provider,{value:null,children:i.jsx(N,c({as:l,ownerState:h,className:I(E.root,r),ref:o},P,{children:typeof s=="string"&&!g?i.jsx(T,{color:"text.secondary",children:s}):i.jsxs(b.Fragment,{children:[u==="start"?x||(x=i.jsx("span",{className:"notranslate",children:"​"})):null,s]})}))})});export{H as I};

package/dist/assets/InputBase-BYnzr12H.js

@@ -0,0 +1,2 @@
+import{_ as he,u as Y,a as d,b as Fe,c as be,d as ce,e as ee,f as Ae,V as Be,W as te,X as Ie,J as He}from"./tableRowClasses-Bk1uFtwh.js";import{r as a,j as C}from"./iframe-CQjT1fxh.js";import{u as Ee,b as We,a as Pe}from"./FormHelperText-CVc1kPQJ.js";import{i as Te}from"./ListItem-BNz1zv6N.js";import{u as ge}from"./useIsFocusVisible-D1xCTBdT.js";import{o as pe}from"./ownerWindow-HkKU3E4x.js";import{u as Me}from"./TransitionGroupContext-yBqGXZYI.js";import{d as Oe}from"./debounce-Be36O1Ab.js";import{i as fe}from"./isHostComponent-DVu5iVWx.js";const Le=["onChange","maxRows","minRows","style","value"];function $(t){return parseInt(t,10)||0}const Ne={shadow:{visibility:"hidden",position:"absolute",overflow:"hidden",height:0,top:0,left:0,transform:"translateZ(0)"}};function je(t){for(const e in t)return!1;return!0}function me(t){return je(t)||t.outerHeightStyle===0&&!t.overflowing}const $e=a.forwardRef(function(e,o){const{onChange:p,maxRows:u,minRows:c=1,style:k,value:F}=e,E=he(e,Le),{current:w}=a.useRef(F!=null),f=a.useRef(null),A=ge(o,f),m=a.useRef(null),R=a.useRef(null),y=a.useCallback(()=>{const l=f.current,n=R.current;if(!l||!n)return;const s=pe(l).getComputedStyle(l);if(s.width==="0px")return{outerHeightStyle:0,overflowing:!1};n.style.width=s.width,n.value=l.value||e.placeholder||"x",n.value.slice(-1)===`
+`&&(n.value+=" ");const D=s.boxSizing,z=$(s.paddingBottom)+$(s.paddingTop),O=$(s.borderBottomWidth)+$(s.borderTopWidth),P=n.scrollHeight;n.value="x";const I=n.scrollHeight;let x=P;c&&(x=Math.max(Number(c)*I,x)),u&&(x=Math.min(Number(u)*I,x)),x=Math.max(x,I);const _=x+(D==="border-box"?z+O:0),V=Math.abs(x-P)<=1;return{outerHeightStyle:_,overflowing:V}},[u,c,e.placeholder]),B=Me(()=>{const l=f.current,n=y();if(!l||!n||me(n))return!1;const g=n.outerHeightStyle;return m.current!=null&&m.current!==g}),S=a.useCallback(()=>{const l=f.current,n=y();if(!l||!n||me(n))return;const g=n.outerHeightStyle;m.current!==g&&(m.current=g,l.style.height=`${g}px`),l.style.overflow=n.overflowing?"hidden":""},[y]),W=a.useRef(-1);Y(()=>{const l=Oe(S),n=f==null?void 0:f.current;if(!n)return;const g=pe(n);g.addEventListener("resize",l);let s;return typeof ResizeObserver<"u"&&(s=new ResizeObserver(()=>{B()&&(s.unobserve(n),cancelAnimationFrame(W.current),S(),W.current=requestAnimationFrame(()=>{s.observe(n)}))}),s.observe(n)),()=>{l.clear(),cancelAnimationFrame(W.current),g.removeEventListener("resize",l),s&&s.disconnect()}},[y,S,B]),Y(()=>{S()});const h=l=>{w||S(),p&&p(l)};return C.jsxs(a.Fragment,{children:[C.jsx("textarea",d({value:F,onChange:h,ref:A,rows:c,style:k},E)),C.jsx("textarea",{"aria-hidden":!0,className:e.className,readOnly:!0,ref:R,tabIndex:-1,style:d({},Ne.shadow,k,{paddingTop:0,paddingBottom:0})})]})}),De=["aria-describedby","autoComplete","autoFocus","className","color","components","componentsProps","defaultValue","disabled","disableInjectingGlobalStyles","endAdornment","error","fullWidth","id","inputComponent","inputProps","inputRef","margin","maxRows","minRows","multiline","name","onBlur","onChange","onClick","onFocus","onKeyDown","onKeyUp","placeholder","readOnly","renderSuffix","rows","size","slotProps","slots","startAdornment","type","value"],_e=(t,e)=>{const{ownerState:o}=t;return[e.root,o.formControl&&e.formControl,o.startAdornment&&e.adornedStart,o.endAdornment&&e.adornedEnd,o.error&&e.error,o.size==="small"&&e.sizeSmall,o.multiline&&e.multiline,o.color&&e[`color${ee(o.color)}`],o.fullWidth&&e.fullWidth,o.hiddenLabel&&e.hiddenLabel]},Ve=(t,e)=>{const{ownerState:o}=t;return[e.input,o.size==="small"&&e.inputSizeSmall,o.multiline&&e.inputMultiline,o.type==="search"&&e.inputTypeSearch,o.startAdornment&&e.inputAdornedStart,o.endAdornment&&e.inputAdornedEnd,o.hiddenLabel&&e.inputHiddenLabel]},qe=t=>{const{classes:e,color:o,disabled:p,error:u,endAdornment:c,focused:k,formControl:F,fullWidth:E,hiddenLabel:w,multiline:f,readOnly:A,size:m,startAdornment:R,type:y}=t,B={root:["root",`color${ee(o)}`,p&&"disabled",u&&"error",E&&"fullWidth",k&&"focused",F&&"formControl",m&&m!=="medium"&&`size${ee(m)}`,f&&"multiline",R&&"adornedStart",c&&"adornedEnd",w&&"hiddenLabel",A&&"readOnly"],input:["input",p&&"disabled",y==="search"&&"inputTypeSearch",f&&"inputMultiline",m==="small"&&"inputSizeSmall",w&&"inputHiddenLabel",R&&"inputAdornedStart",c&&"inputAdornedEnd",A&&"readOnly"]};return Ae(B,Be,e)},Ge=be("div",{name:"MuiInputBase",slot:"Root",overridesResolver:_e})(({theme:t,ownerState:e})=>d({},t.typography.body1,{color:(t.vars||t).palette.text.primary,lineHeight:"1.4375em",boxSizing:"border-box",position:"relative",cursor:"text",display:"inline-flex",alignItems:"center",[`&.${te.disabled}`]:{color:(t.vars||t).palette.text.disabled,cursor:"default"}},e.multiline&&d({padding:"4px 0 5px"},e.size==="small"&&{paddingTop:1}),e.fullWidth&&{width:"100%"})),Ke=be("input",{name:"MuiInputBase",slot:"Input",overridesResolver:Ve})(({theme:t,ownerState:e})=>{const o=t.palette.mode==="light",p=d({color:"currentColor"},t.vars?{opacity:t.vars.opacity.inputPlaceholder}:{opacity:o?.42:.5},{transition:t.transitions.create("opacity",{duration:t.transitions.duration.shorter})}),u={opacity:"0 !important"},c=t.vars?{opacity:t.vars.opacity.inputPlaceholder}:{opacity:o?.42:.5};return d({font:"inherit",letterSpacing:"inherit",color:"currentColor",padding:"4px 0 5px",border:0,boxSizing:"content-box",background:"none",height:"1.4375em",margin:0,WebkitTapHighlightColor:"transparent",display:"block",minWidth:0,width:"100%",animationName:"mui-auto-fill-cancel",animationDuration:"10ms","&::-webkit-input-placeholder":p,"&::-moz-placeholder":p,"&:-ms-input-placeholder":p,"&::-ms-input-placeholder":p,"&:focus":{outline:0},"&:invalid":{boxShadow:"none"},"&::-webkit-search-decoration":{WebkitAppearance:"none"},[`label[data-shrink=false] + .${te.formControl} &`]:{"&::-webkit-input-placeholder":u,"&::-moz-placeholder":u,"&:-ms-input-placeholder":u,"&::-ms-input-placeholder":u,"&:focus::-webkit-input-placeholder":c,"&:focus::-moz-placeholder":c,"&:focus:-ms-input-placeholder":c,"&:focus::-ms-input-placeholder":c},[`&.${te.disabled}`]:{opacity:1,WebkitTextFillColor:(t.vars||t).palette.text.disabled},"&:-webkit-autofill":{animationDuration:"5000s",animationName:"mui-auto-fill"}},e.size==="small"&&{paddingTop:1},e.multiline&&{height:"auto",resize:"none",padding:0,paddingTop:0},e.type==="search"&&{MozAppearance:"textfield"})}),Ue=C.jsx(Ie,{styles:{"@keyframes mui-auto-fill":{from:{display:"block"}},"@keyframes mui-auto-fill-cancel":{from:{display:"block"}}}}),rt=a.forwardRef(function(e,o){var p;const u=Fe({props:e,name:"MuiInputBase"}),{"aria-describedby":c,autoComplete:k,autoFocus:F,className:E,components:w={},componentsProps:f={},defaultValue:A,disabled:m,disableInjectingGlobalStyles:R,endAdornment:y,fullWidth:B=!1,id:S,inputComponent:W="input",inputProps:h={},inputRef:l,maxRows:n,minRows:g,multiline:s=!1,name:D,onBlur:z,onChange:O,onClick:P,onFocus:I,onKeyDown:x,onKeyUp:_,placeholder:V,readOnly:q,renderSuffix:oe,rows:L,slotProps:ne={},slots:re={},startAdornment:T,type:ie="text",value:xe}=u,ye=he(u,De),N=h.value!=null?h.value:xe,{current:G}=a.useRef(N!=null),H=a.useRef(),ve=a.useCallback(r=>{},[]),Ce=ge(H,l,h.ref,ve),[K,U]=a.useState(!1),i=Ee(),b=We({props:u,muiFormControl:i,states:["color","disabled","error","hiddenLabel","size","required","filled"]});b.focused=i?i.focused:K,a.useEffect(()=>{!i&&m&&K&&(U(!1),z&&z())},[i,m,K,z]);const J=i&&i.onFilled,X=i&&i.onEmpty,M=a.useCallback(r=>{Te(r)?J&&J():X&&X()},[J,X]);Y(()=>{G&&M({value:N})},[N,M,G]);const we=r=>{if(b.disabled){r.stopPropagation();return}I&&I(r),h.onFocus&&h.onFocus(r),i&&i.onFocus?i.onFocus(r):U(!0)},Re=r=>{z&&z(r),h.onBlur&&h.onBlur(r),i&&i.onBlur?i.onBlur(r):U(!1)},Se=(r,...ue)=>{if(!G){const de=r.target||H.current;if(de==null)throw new Error(He(1));M({value:de.value})}h.onChange&&h.onChange(r,...ue),O&&O(r,...ue)};a.useEffect(()=>{M(H.current)},[]);const ze=r=>{H.current&&r.currentTarget===r.target&&H.current.focus(),P&&P(r)};let Z=W,v=h;s&&Z==="input"&&(L?v=d({type:void 0,minRows:L,maxRows:L},v):v=d({type:void 0,maxRows:n,minRows:g},v),Z=$e);const ke=r=>{M(r.animationName==="mui-auto-fill-cancel"?H.current:{value:"x"})};a.useEffect(()=>{i&&i.setAdornedStart(!!T)},[i,T]);const j=d({},u,{color:b.color||"primary",disabled:b.disabled,endAdornment:y,error:b.error,focused:b.focused,formControl:i,fullWidth:B,hiddenLabel:b.hiddenLabel,multiline:s,size:b.size,startAdornment:T,type:ie}),ae=qe(j),le=re.root||w.Root||Ge,Q=ne.root||f.root||{},se=re.input||w.Input||Ke;return v=d({},v,(p=ne.input)!=null?p:f.input),C.jsxs(a.Fragment,{children:[!R&&Ue,C.jsxs(le,d({},Q,!fe(le)&&{ownerState:d({},j,Q.ownerState)},{ref:o,onClick:ze},ye,{className:ce(ae.root,Q.className,E,q&&"MuiInputBase-readOnly"),children:[T,C.jsx(Pe.Provider,{value:null,children:C.jsx(se,d({ownerState:j,"aria-invalid":b.error,"aria-describedby":c,autoComplete:k,autoFocus:F,defaultValue:A,disabled:b.disabled,id:S,onAnimationStart:ke,name:D,placeholder:V,readOnly:q,required:b.required,rows:L,value:N,onKeyDown:x,onKeyUp:_,type:ie},v,!fe(se)&&{as:Z,ownerState:d({},j,v.ownerState)},{ref:Ce,className:ce(ae.input,v.className,q&&"MuiInputBase-readOnly"),onBlur:Re,onChange:Se,onFocus:we}))}),y,oe?oe(d({},b,{startAdornment:T})):null]}))]})});export{rt as I,Ge as a,Ke as b,Ve as i,_e as r};

package/dist/assets/Installing odyssey-react-mui-C75NTz-Q.js

@@ -0,0 +1,216 @@
+import{j as e}from"./iframe-CQjT1fxh.js";import{useMDXComponents as o}from"./index-D5BUEpVX.js";import{M as a}from"./blocks-D521Uej3.js";import{M as r}from"./index.modern-DX91rx7y.js";import"./preload-helper-Dp1pzeXC.js";import"./index-C77ZwfYm.js";import"./index-5Qx3hCfP.js";const i=`# @okta/odyssey-react-mui
+
+## Production Readiness
+
+Odyssey is production-ready and available to use for real things. The API
+is stable for the duration of the point-release, meaning that while Odyssey is
+in version 1.x.x, there will be no changes that break the API.
+
+This project follows semantic versioning conventions:
+
+- **Major point releases** may include breaking changes, but the API is stable for the duration of
+  the major point release (for example, 1.x.x)
+- **Minor point releases** include new features and are backwards-compatible (eg, x.1.x)
+- **Patch releases** include bug fixes (eg, x.x.1)
+
+## Getting Started
+
+Install the package and peer dependencies:
+
+\`\`\`sh
+yarn add @okta/odyssey-react-mui
+\`\`\`
+
+Include fonts:
+
+\`\`\`html
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
+  rel="stylesheet"
+/>
+\`\`\`
+
+Import named ESM exports:
+
+\`\`\`js
+import { PasswordInput } from "@okta/odyssey-react-mui";
+\`\`\`
+
+Add the Odyssey \`OdysseyProvider\` around your whole app:
+
+\`\`\`jsx
+import { OdysseyProvider } from "@okta/odyssey-react-mui";
+
+const YourAppRoot = ({ children }) => (
+  <OdysseyProvider>
+    <CssBaseline />
+    {children}
+  </OdysseyProvider>
+);
+\`\`\`
+
+Add Material-UI components not exported from Odyssey with Odyssey styling or add your own theme to MUI:
+
+\`\`\`sh
+yarn add @mui/material
+\`\`\`
+
+\`\`\`jsx
+import { OdysseyThemeProvider } from "@okta/odyssey-react-mui";
+
+import { myMaterialUiTheme } from "./myMaterialUiTheme.js";
+
+const YourAppRoot = ({ children }) => (
+  <OdysseyThemeProvider theme={myMaterialUiTheme}>
+    {children}
+  <OdysseyThemeProvider>
+);
+\`\`\`
+
+### Upgrade Piecemeal
+
+It’s possible to have 2 versions of Odyssey running at the same time, so when adding MUI, you can do it piecemeal.
+
+This is how you setup two \`OdysseyProvider\`s like so:
+
+\`\`\`jsx
+import { OdysseyProvider } from "@okta/odyssey-react-mui";
+import { ThemeProvider as OdysseyLegacyThemeProvider } from "@okta/odyssey-react-theme";
+
+const YourAppRoot = ({ children }) => (
+  <OdysseyProvider>
+    <OdysseyLegacyThemeProvider>{children}</OdysseyLegacyThemeProvider>
+  </OdysseyProvider>
+);
+\`\`\`
+
+### Overrides
+
+It is possible to provide \`nonce\`, \`themeOverride\`, \`languageCode\` and \`translationOverrides\` to the underlying components via props:
+
+\`\`\`jsx
+import { OdysseyProvider } from "@okta/odyssey-react-mui";
+import { theme } from "./themeOverride.js";
+
+const nonce =
+  "K6ybeaqlwaAKk0hQF?hE2qZ0Ar3M=G4Bpr-XFk1x4XbL3dH3T5=mk0aXeWX9ifn9";
+
+const languageCode = "en";
+
+const translationOverrides = {
+  en: {
+    "fieldlabel.optional.text": "Not Required",
+  },
+  fr: {
+    "fieldlabel.optional.text": "Non Requis",
+  },
+};
+
+const YourAppRoot = ({ children }) => (
+  <OdysseyProvider
+    nonce={nonce}
+    themeOverride={theme}
+    languageCode={languageCode}
+    translationOverrides={translationOverrides}
+  >
+    {children}
+  </OdysseyProvider>
+);
+\`\`\`
+
+### Generating ok-PL and ok-SK files
+
+Right now we do not have the code to generate these files in Odyssey.
+
+If you are an Okta employee, the easiest way to generate these files is to replace the English properties file of another project and run the build commands to get the ok-PL and ok-SK versions. For ok-SK, you will also need to replace the prefix with \`odyssey:odyssey-react-mui: \`.
+
+If you are not an Okta employee, please file an issue request for assistance.
+
+## Components
+
+Components are published in an ESM format transpiled for the modern browsers
+within the [Okta supported browser list][1]. These modules can be served
+directly to evergreen browsers for simple applications, or further transpiled,
+bundled, and polyfilled for advanced use cases and browser support targets.
+
+[1]: https://help.okta.com/en/prod/Content/Topics/Miscellaneous/Platforms_Browser_OS_Support.htm
+
+## Running odyssey-react-mui for local development
+
+Follow these steps for local [Odyssey development](https://odyssey-storybook.okta.design/?path=/docs/contributing-odyssey-development--docs)
+
+## Downstream Testing
+
+### Remote
+
+Remote downstream tests run the entire bacon suite for a target repo with the latest version of odyssey
+published from your branch.
+
+The script used for this is the \`scripts/downstream-bacon.sh\` file, which is used by the \`Init * Downstream\` bacon suites.
+It performs the commits and triggers bacon suites using the \`update-ui-packages\` script found here: https://github.com/atko-eng/update-ui-packages.
+The version to be tested is determined using the \`ok-ui artifacts\` command, which is implemented here: https://github.com/atko-eng/ui-build-tools/blob/master/packages/clis/ok-ui/src/commands/artifacts.ts
+
+However, these bacon suites will only report a success/failure of whether the downstream tests were initiated, not if they actually succeeded.
+It's up to the developer merging their changes to ensure that the downstream suites have passed.
+
+Each downstream suite will display custom messages to show:
+
+- A link to the created commit in Bacon
+- Information about the artifact/commit being tests
+
+Check these messages and make sure the artifact being tested is the one you expect. And whether the downstream test suites are passing.
+
+### Local
+
+Local changes can be tested in various other okta packages using the \`yarn ok-ui downstream\` command, which will clone
+the specified repos, applies the changes from your local version via linking, and then run the build and test commands
+for the specified packages. Logs for the output of these individual commands can be found under \`ok-ui-logs/downstream\`.
+
+To enable verbose logging use the \`-v\` flag.
+
+By default, repos from previous test runs will be reused to speed up yarn install times. If you want to avoid using
+these cached repos, then use the \`--forceGitClone\` flag
+
+You can configure which packages to test using the \`ok.yaml\` config file.
+
+example:
+
+\`\`\`yaml
+downstream:
+  # Determines if any packages should be linked in addition to the target package
+  additionalWorkspaces:
+    - "@okta/odyssey-design-tokens"
+
+  # List of repos to clone
+  repos:
+    - repoName: "example-react-spa"
+      url: "https://github.com/atko-eng/example-react-spa.git"
+      # List of packages to test for this repo
+      packages:
+        - pkgName: "@okta/example-react-spa"
+    - repoName: "admin-ui"
+      # optionally override the command used to build the packages
+      buildCmd: "FORCE_COLOR=true yarn build:all"
+      # url to colone from
+      url: "https://github.com/atko-eng/admin-ui.git"
+      # List of packages to test for this repo
+      packages:
+        - pkgName: "@okta/admin-v2.admin-app-react"
+          # optionally override the command used to test the package
+          testCmd: "yarn run vitest"
+        - pkgName: "@okta/admin-v2.admin-dashboard"
+\`\`\`
+
+## License
+
+[Apache Version 2.0](https://github.com/atko-eng/odyssey-design-system/blob/master/LICENSE)
+
+## Support Disclaimer
+
+This library is community supported and is maintained by members of the Okta team for developers and IT professionals.
+This library is not an official Okta product and does not qualify for any Okta support. Anyone who chooses to use this
+library must ensure that their implementation meets any applicable legal obligations including any Okta terms and conditions.
+`;function s(n){return e.jsxs(e.Fragment,{children:[e.jsx(a,{}),`
+`,e.jsx(r,{children:i})]})}function y(n={}){const{wrapper:t}={...o(),...n.components};return t?e.jsx(t,{...n,children:e.jsx(s,{...n})}):s()}export{y as default};

package/dist/assets/Introduction-DqVi6Ihy.js

@@ -0,0 +1,46 @@
+import{j as e}from"./iframe-CQjT1fxh.js";import{useMDXComponents as t}from"./index-D5BUEpVX.js";import{M as i}from"./blocks-D521Uej3.js";import{M as a}from"./index.modern-DX91rx7y.js";import"./preload-helper-Dp1pzeXC.js";import"./index-C77ZwfYm.js";import"./index-5Qx3hCfP.js";const r=`Welcome to your new repo, odyssey-design-system!
+
+# Odyssey Design System
+
+Build and design consistent, efficient, and accessible UIs for all Okta users.
+
+## Odyssey Core Packages
+
+| Package/README                                                                                                                                            | Description          |
+| --------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |
+| [@okta/odyssey-design-tokens](https://github.com/atko-eng/odyssey-design-system/blob/master/packages/core/odyssey-design-tokens/README.md)                | Design tokens        |
+| [@okta/browserslist-config-odyssey](https://github.com/atko-eng/odyssey-design-system/blob/master/packages/configs/browserslist-config-odyssey/README.md) | Browserslist config  |
+| [@okta/odyssey-react-mui](https://github.com/atko-eng/odyssey-design-system/blob/master/packages/core/odyssey-react-mui/README.md)                        | React MUI components |
+
+## MUI Version Support
+
+Odyssey is built on Material UI (MUI) v5 and officially supports usage across the MUI 5.x release line, including minor and patch updates.
+
+We’re happy to assist teams integrating Odyssey with MUI 5.x and to help troubleshoot issues that arise within this supported scope to ensure consistent behaviour.
+
+If your project targets a different major version of MUI or an alternative/incompatible fork, functionality may vary and assistance may be limited. In these cases, teams are responsible for providing their own Emotion CacheProvider and MUI ThemeProvider, as providers cannot be safely shared across major versions.
+
+More generally, applications are not expected to depend on MUI directly. Any UI that does not rely on MUI v5 should be implemented using custom components via Odyssey Contributions, ensuring proper isolation and long-term compatibility.
+
+## Browser Support
+
+Odyssey browser support mirrors Okta's [Supported platforms, browsers, and operating systems](https://help.okta.com/en/prod/Content/Topics/Miscellaneous/Platforms_Browser_OS_Support.htm) with the exception of IE 11.
+
+## Getting Help
+
+For any assistance, please reach out in the \`#odyssey\` channel. To contact the correct on-call guardian, use the \`@nomy\` command:
+
+- **For engineering support:** \`@nomy guardian-odyssey-eng\`
+- **For design support:** \`@nomy guardian-odyssey-design\`
+
+## License
+
+[Apache Version 2.0](https://github.com/atko-eng/odyssey-design-system/blob/main/LICENSE)
+
+## Support Disclaimer
+
+This library is community supported and is maintained by members of the Okta team for developers and IT professionals.
+This library is not an official Okta product and does not qualify for any Okta support. Anyone who chooses to use this
+library must ensure that their implementation meets any applicable legal obligations including any Okta terms and conditions.
+`;function o(s){return e.jsxs(e.Fragment,{children:[e.jsx(i,{title:"Introduction (README)"}),`
+`,e.jsx(a,{children:r})]})}function g(s={}){const{wrapper:n}={...t(),...s.components};return n?e.jsx(n,{...s,children:e.jsx(o,{...s})}):o()}export{g as default};

package/dist/assets/Layout-XY1MknZE.js

@@ -0,0 +1,11 @@
+import{s as t}from"./tableRowClasses-Bk1uFtwh.js";import{r as a,j as e}from"./iframe-CQjT1fxh.js";import{M as m}from"./Box-B3rdnavX.js";import{u as p}from"./OdysseyThemeProvider-BA0_xP7N.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 d=t("div",{shouldForwardProp:o=>!["odysseyDesignTokens","regions"].includes(o)})(({odysseyDesignTokens:o,regions:s})=>({display:"grid",gridTemplateColumns:s,gridGap:o.Spacing4,gap:o.Spacing4,"& + &":{marginBlockStart:o.Spacing4}})),c=({regions:o,children:s})=>{const i=p(),n=o.map(r=>`minmax(0, ${r}fr)`).join(" ");return e.jsx(m,{children:e.jsx(d,{odysseyDesignTokens:i,regions:n,children:a.Children.toArray(s).map(r=>r)})})},g=a.memo(c);g.displayName="Layout";export{g as M};

package/dist/assets/Layout.stories-CnOmeQ-W.js

@@ -0,0 +1,285 @@
+import{j as n}from"./iframe-CQjT1fxh.js";import{s as x}from"./tableRowClasses-Bk1uFtwh.js";import{O as Q}from"./OdysseyStorybookThemeDecorator-CHlNoX17.js";import{M as o}from"./Layout-XY1MknZE.js";import{c as U}from"./Typography-CjpHjc10.js";import"./preload-helper-Dp1pzeXC.js";import"./OdysseyThemeProvider-BA0_xP7N.js";import"./WarningFilled-DOHs-JmZ.js";import"./index-C77ZwfYm.js";import"./OdysseyProvider-rboSNY26.js";import"./ScopedCssBaseline-BOa6kM98.js";import"./Box-B3rdnavX.js";import"./Box-CnVllI1S.js";import"./Typography-Jr4Brrb5.js";const e=x.div({display:"flex",alignItems:"center",justifyContent:"center",padding:"16px",border:"1px dashed #cbcbcb"}),i=x.h3({margin:0}),X=x.div({maxWidth:"55ch",marginBlockEnd:"8px"}),Y=()=>n.jsx(X,{children:n.jsxs(U,{children:[n.jsx("strong",{children:"NOTE:"})," Dashed border and padding are applied to show region boundries in Storybook only. They will not be present when you are using Layout"]})}),g=x.div({"& + &":{marginBlockStart:"16px"}}),bn={component:o,decorators:[s=>n.jsxs(n.Fragment,{children:[n.jsx(Y,{}),n.jsx(s,{})]}),Q],argTypes:{regions:{control:"text",description:"The supported region ratios for the `Layout`. Each number is a fractional unit that is mapped to the 'fr' CSS unit. For example: [2, 1] defines a 2/3, 1/3 layout and [1, 1, 1] defines a 1/3, 1/3, 1/3 layout",table:{type:{summary:"SupportedRegionRatios"}}},children:{description:"The content of the `Layout`. May be a `string` or any other `ReactNode` or array of `ReactNode`s. Will often be either a single `Surface` or multiple `Surface's",table:{type:{summary:"ReactNode"}}}}},a={args:{regions:[1]},argTypes:{regions:{control:"object"}},render:function(r){return n.jsx(o,{...r,children:n.jsx(e,{children:n.jsx(i,{children:"Region"})})})}},l={args:{regions:[1,1]},argTypes:{regions:{control:"object"}},render:function(r){return n.jsxs(o,{...r,children:[n.jsx(e,{children:n.jsx(i,{children:"Region"})}),n.jsx(e,{children:n.jsx(i,{children:"Region"})})]})}},t={args:{regions:[2,1]},argTypes:{regions:{control:"object"}},render:function(r){return n.jsxs(o,{...r,children:[n.jsx(e,{children:n.jsx(i,{children:"Region"})}),n.jsx(e,{children:n.jsx(i,{children:"Region"})})]})}},c={args:{regions:[1,2]},argTypes:{regions:{control:"object"}},render:function(r){return n.jsxs(o,{...r,children:[n.jsx(e,{children:n.jsx(i,{children:"Region"})}),n.jsx(e,{children:n.jsx(i,{children:"Region"})})]})}},R={args:{regions:[3,1]},argTypes:{regions:{control:"object"}},render:function(r){return n.jsxs(o,{...r,children:[n.jsx(e,{children:n.jsx(i,{children:"Region"})}),n.jsx(e,{children:n.jsx(i,{children:"Region"})})]})}},d={args:{regions:[1,3]},argTypes:{regions:{control:"object"}},render:function(r){return n.jsxs(o,{...r,children:[n.jsx(e,{children:n.jsx(i,{children:"Region"})}),n.jsx(e,{children:n.jsx(i,{children:"Region"})})]})}},b={args:{regions:[1,1,1]},argTypes:{regions:{control:"object"}},render:function(r){return n.jsxs(o,{...r,children:[n.jsx(e,{children:n.jsx(i,{children:"Region"})}),n.jsx(e,{children:n.jsx(i,{children:"Region"})}),n.jsx(e,{children:n.jsx(i,{children:"Region"})})]})}},h={args:{regions:[1,1,1,1]},argTypes:{regions:{control:"object"}},render:function(r){return n.jsxs(o,{...r,children:[n.jsx(e,{children:n.jsx(i,{children:"Region"})}),n.jsx(e,{children:n.jsx(i,{children:"Region"})}),n.jsx(e,{children:n.jsx(i,{children:"Region"})}),n.jsx(e,{children:n.jsx(i,{children:"Region"})})]})}},j={args:{regions:[1,1]},argTypes:{regions:{control:"object"}},render:function(r){return n.jsxs(o,{...r,children:[n.jsx(e,{children:n.jsx(i,{children:"Region"})}),n.jsx(e,{children:n.jsx(i,{children:"Region"})}),n.jsx(e,{children:n.jsx(i,{children:"Region"})}),n.jsx(e,{children:n.jsx(i,{children:"Region"})}),n.jsx(e,{children:n.jsx(i,{children:"Region"})})]})}},u={render:function(){return n.jsxs(n.Fragment,{children:[n.jsx(g,{children:n.jsx(o,{regions:[1],children:n.jsx(e,{children:n.jsx(i,{children:"Region"})})})}),n.jsx(g,{children:n.jsxs(o,{regions:[1,1],children:[n.jsx(e,{children:n.jsx(i,{children:"Region"})}),n.jsx(e,{children:n.jsx(i,{children:"Region"})})]})}),n.jsx(g,{children:n.jsxs(o,{regions:[2,1],children:[n.jsx(e,{children:n.jsx(i,{children:"Region"})}),n.jsx(e,{children:n.jsx(i,{children:"Region"})})]})}),n.jsx(g,{children:n.jsxs(o,{regions:[1,2],children:[n.jsx(e,{children:n.jsx(i,{children:"Region"})}),n.jsx(e,{children:n.jsx(i,{children:"Region"})})]})}),n.jsx(g,{children:n.jsxs(o,{regions:[3,1],children:[n.jsx(e,{children:n.jsx(i,{children:"Region"})}),n.jsx(e,{children:n.jsx(i,{children:"Region"})})]})}),n.jsx(g,{children:n.jsxs(o,{regions:[1,3],children:[n.jsx(e,{children:n.jsx(i,{children:"Region"})}),n.jsx(e,{children:n.jsx(i,{children:"Region"})})]})}),n.jsx(g,{children:n.jsxs(o,{regions:[1,1,1],children:[n.jsx(e,{children:n.jsx(i,{children:"Region"})}),n.jsx(e,{children:n.jsx(i,{children:"Region"})}),n.jsx(e,{children:n.jsx(i,{children:"Region"})})]})}),n.jsx(g,{children:n.jsxs(o,{regions:[1,1,1,1],children:[n.jsx(e,{children:n.jsx(i,{children:"Region"})}),n.jsx(e,{children:n.jsx(i,{children:"Region"})}),n.jsx(e,{children:n.jsx(i,{children:"Region"})}),n.jsx(e,{children:n.jsx(i,{children:"Region"})})]})})]})}};var L,p,V;a.parameters={...a.parameters,docs:{...(L=a.parameters)==null?void 0:L.docs,source:{originalSource:`{
+  args: {
+    regions: [1]
+  },
+  argTypes: {
+    regions: {
+      control: "object"
+    }
+  },
+  render: function C(args) {
+    return <Layout {...args}>
+        <VisibleRegion>
+          <RegionLabel>Region</RegionLabel>
+        </VisibleRegion>
+      </Layout>;
+  }
+}`,...(V=(p=a.parameters)==null?void 0:p.docs)==null?void 0:V.source}}};var m,y,f;l.parameters={...l.parameters,docs:{...(m=l.parameters)==null?void 0:m.docs,source:{originalSource:`{
+  args: {
+    regions: [1, 1]
+  },
+  argTypes: {
+    regions: {
+      control: "object"
+    }
+  },
+  render: function C(args) {
+    return <Layout {...args}>
+        <VisibleRegion>
+          <RegionLabel>Region</RegionLabel>
+        </VisibleRegion>
+        <VisibleRegion>
+          <RegionLabel>Region</RegionLabel>
+        </VisibleRegion>
+      </Layout>;
+  }
+}`,...(f=(y=l.parameters)==null?void 0:y.docs)==null?void 0:f.source}}};var C,T,S;t.parameters={...t.parameters,docs:{...(C=t.parameters)==null?void 0:C.docs,source:{originalSource:`{
+  args: {
+    regions: [2, 1]
+  },
+  argTypes: {
+    regions: {
+      control: "object"
+    }
+  },
+  render: function C(args) {
+    return <Layout {...args}>
+        <VisibleRegion>
+          <RegionLabel>Region</RegionLabel>
+        </VisibleRegion>
+        <VisibleRegion>
+          <RegionLabel>Region</RegionLabel>
+        </VisibleRegion>
+      </Layout>;
+  }
+}`,...(S=(T=t.parameters)==null?void 0:T.docs)==null?void 0:S.source}}};var M,k,E;c.parameters={...c.parameters,docs:{...(M=c.parameters)==null?void 0:M.docs,source:{originalSource:`{
+  args: {
+    regions: [1, 2]
+  },
+  argTypes: {
+    regions: {
+      control: "object"
+    }
+  },
+  render: function C(args) {
+    return <Layout {...args}>
+        <VisibleRegion>
+          <RegionLabel>Region</RegionLabel>
+        </VisibleRegion>
+        <VisibleRegion>
+          <RegionLabel>Region</RegionLabel>
+        </VisibleRegion>
+      </Layout>;
+  }
+}`,...(E=(k=c.parameters)==null?void 0:k.docs)==null?void 0:E.source}}};var F,w,D;R.parameters={...R.parameters,docs:{...(F=R.parameters)==null?void 0:F.docs,source:{originalSource:`{
+  args: {
+    regions: [3, 1]
+  },
+  argTypes: {
+    regions: {
+      control: "object"
+    }
+  },
+  render: function C(args) {
+    return <Layout {...args}>
+        <VisibleRegion>
+          <RegionLabel>Region</RegionLabel>
+        </VisibleRegion>
+        <VisibleRegion>
+          <RegionLabel>Region</RegionLabel>
+        </VisibleRegion>
+      </Layout>;
+  }
+}`,...(D=(w=R.parameters)==null?void 0:w.docs)==null?void 0:D.source}}};var N,O,v;d.parameters={...d.parameters,docs:{...(N=d.parameters)==null?void 0:N.docs,source:{originalSource:`{
+  args: {
+    regions: [1, 3]
+  },
+  argTypes: {
+    regions: {
+      control: "object"
+    }
+  },
+  render: function C(args) {
+    return <Layout {...args}>
+        <VisibleRegion>
+          <RegionLabel>Region</RegionLabel>
+        </VisibleRegion>
+        <VisibleRegion>
+          <RegionLabel>Region</RegionLabel>
+        </VisibleRegion>
+      </Layout>;
+  }
+}`,...(v=(O=d.parameters)==null?void 0:O.docs)==null?void 0:v.source}}};var z,B,K;b.parameters={...b.parameters,docs:{...(z=b.parameters)==null?void 0:z.docs,source:{originalSource:`{
+  args: {
+    regions: [1, 1, 1]
+  },
+  argTypes: {
+    regions: {
+      control: "object"
+    }
+  },
+  render: function C(args) {
+    return <Layout {...args}>
+        <VisibleRegion>
+          <RegionLabel>Region</RegionLabel>
+        </VisibleRegion>
+        <VisibleRegion>
+          <RegionLabel>Region</RegionLabel>
+        </VisibleRegion>
+        <VisibleRegion>
+          <RegionLabel>Region</RegionLabel>
+        </VisibleRegion>
+      </Layout>;
+  }
+}`,...(K=(B=b.parameters)==null?void 0:B.docs)==null?void 0:K.source}}};var W,_,I;h.parameters={...h.parameters,docs:{...(W=h.parameters)==null?void 0:W.docs,source:{originalSource:`{
+  args: {
+    regions: [1, 1, 1, 1]
+  },
+  argTypes: {
+    regions: {
+      control: "object"
+    }
+  },
+  render: function C(args) {
+    return <Layout {...args}>
+        <VisibleRegion>
+          <RegionLabel>Region</RegionLabel>
+        </VisibleRegion>
+        <VisibleRegion>
+          <RegionLabel>Region</RegionLabel>
+        </VisibleRegion>
+        <VisibleRegion>
+          <RegionLabel>Region</RegionLabel>
+        </VisibleRegion>
+        <VisibleRegion>
+          <RegionLabel>Region</RegionLabel>
+        </VisibleRegion>
+      </Layout>;
+  }
+}`,...(I=(_=h.parameters)==null?void 0:_.docs)==null?void 0:I.source}}};var q,A,G;j.parameters={...j.parameters,docs:{...(q=j.parameters)==null?void 0:q.docs,source:{originalSource:`{
+  args: {
+    regions: [1, 1]
+  },
+  argTypes: {
+    regions: {
+      control: "object"
+    }
+  },
+  render: function C(args) {
+    return <Layout {...args}>
+        <VisibleRegion>
+          <RegionLabel>Region</RegionLabel>
+        </VisibleRegion>
+        <VisibleRegion>
+          <RegionLabel>Region</RegionLabel>
+        </VisibleRegion>
+        <VisibleRegion>
+          <RegionLabel>Region</RegionLabel>
+        </VisibleRegion>
+        <VisibleRegion>
+          <RegionLabel>Region</RegionLabel>
+        </VisibleRegion>
+        <VisibleRegion>
+          <RegionLabel>Region</RegionLabel>
+        </VisibleRegion>
+      </Layout>;
+  }
+}`,...(G=(A=j.parameters)==null?void 0:A.docs)==null?void 0:G.source}}};var H,J,P;u.parameters={...u.parameters,docs:{...(H=u.parameters)==null?void 0:H.docs,source:{originalSource:`{
+  render: function () {
+    return <>
+        <MarginContainer>
+          <Layout regions={[1]}>
+            <VisibleRegion>
+              <RegionLabel>Region</RegionLabel>
+            </VisibleRegion>
+          </Layout>
+        </MarginContainer>
+
+        <MarginContainer>
+          <Layout regions={[1, 1]}>
+            <VisibleRegion>
+              <RegionLabel>Region</RegionLabel>
+            </VisibleRegion>
+            <VisibleRegion>
+              <RegionLabel>Region</RegionLabel>
+            </VisibleRegion>
+          </Layout>
+        </MarginContainer>
+
+        <MarginContainer>
+          <Layout regions={[2, 1]}>
+            <VisibleRegion>
+              <RegionLabel>Region</RegionLabel>
+            </VisibleRegion>
+            <VisibleRegion>
+              <RegionLabel>Region</RegionLabel>
+            </VisibleRegion>
+          </Layout>
+        </MarginContainer>
+
+        <MarginContainer>
+          <Layout regions={[1, 2]}>
+            <VisibleRegion>
+              <RegionLabel>Region</RegionLabel>
+            </VisibleRegion>
+            <VisibleRegion>
+              <RegionLabel>Region</RegionLabel>
+            </VisibleRegion>
+          </Layout>
+        </MarginContainer>
+
+        <MarginContainer>
+          <Layout regions={[3, 1]}>
+            <VisibleRegion>
+              <RegionLabel>Region</RegionLabel>
+            </VisibleRegion>
+            <VisibleRegion>
+              <RegionLabel>Region</RegionLabel>
+            </VisibleRegion>
+          </Layout>
+        </MarginContainer>
+
+        <MarginContainer>
+          <Layout regions={[1, 3]}>
+            <VisibleRegion>
+              <RegionLabel>Region</RegionLabel>
+            </VisibleRegion>
+            <VisibleRegion>
+              <RegionLabel>Region</RegionLabel>
+            </VisibleRegion>
+          </Layout>
+        </MarginContainer>
+
+        <MarginContainer>
+          <Layout regions={[1, 1, 1]}>
+            <VisibleRegion>
+              <RegionLabel>Region</RegionLabel>
+            </VisibleRegion>
+            <VisibleRegion>
+              <RegionLabel>Region</RegionLabel>
+            </VisibleRegion>
+            <VisibleRegion>
+              <RegionLabel>Region</RegionLabel>
+            </VisibleRegion>
+          </Layout>
+        </MarginContainer>
+
+        <MarginContainer>
+          <Layout regions={[1, 1, 1, 1]}>
+            <VisibleRegion>
+              <RegionLabel>Region</RegionLabel>
+            </VisibleRegion>
+            <VisibleRegion>
+              <RegionLabel>Region</RegionLabel>
+            </VisibleRegion>
+            <VisibleRegion>
+              <RegionLabel>Region</RegionLabel>
+            </VisibleRegion>
+            <VisibleRegion>
+              <RegionLabel>Region</RegionLabel>
+            </VisibleRegion>
+          </Layout>
+        </MarginContainer>
+      </>;
+  }
+}`,...(P=(J=u.parameters)==null?void 0:J.docs)==null?void 0:P.source}}};const hn=["Single","Split","TwoThirdsStart","TwoThirdsEnd","ThreeFourthsStart","ThreeFourthsEnd","ThreeRegionSplit","FourRegionSplit","Stacking","KitchenSink"];export{h as FourRegionSplit,u as KitchenSink,a as Single,l as Split,j as Stacking,d as ThreeFourthsEnd,R as ThreeFourthsStart,b as ThreeRegionSplit,c as TwoThirdsEnd,t as TwoThirdsStart,hn as __namedExportsOrder,bn as default};