@okta/odyssey-contribution-tooling 1.47.0

package/dist/assets/Installing odyssey-react-mui-Jk1oC4ID.js

@@ -0,0 +1,195 @@
+import{j as e}from"./jsx-runtime-CnH95YSl.js";import{useMDXComponents as s}from"./index-BeeV6X6A.js";import{M as r}from"./index-B7cnlNYX.js";import{M as a}from"./index.modern-CkASn_bb.js";import"./index-NdkWRN8K.js";import"./_commonjsHelpers-gnU0ypJ3.js";import"./iframe-C-QZIo1O.js";import"./index-BJTM6NaI.js";import"./index-B5xazMy1.js";import"./index-DieBXP3Z.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.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
+
+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 t(n){return e.jsxs(e.Fragment,{children:[e.jsx(r,{}),`
+`,e.jsx(a,{children:i})]})}function b(n={}){const{wrapper:o}={...s(),...n.components};return o?e.jsx(o,{...n,children:e.jsx(t,{...n})}):t()}export{b as default};

package/dist/assets/Introduction-CJsubrDL.js

@@ -0,0 +1,36 @@
+import{j as s}from"./jsx-runtime-CnH95YSl.js";import{useMDXComponents as t}from"./index-BeeV6X6A.js";import{M as r}from"./index-B7cnlNYX.js";import{M as i}from"./index.modern-CkASn_bb.js";import"./index-NdkWRN8K.js";import"./_commonjsHelpers-gnU0ypJ3.js";import"./iframe-C-QZIo1O.js";import"./index-BJTM6NaI.js";import"./index-B5xazMy1.js";import"./index-DieBXP3Z.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";const a=`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/core/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 |
+
+## 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(e){return s.jsxs(s.Fragment,{children:[s.jsx(r,{title:"Introduction (README)"}),`
+`,s.jsx(i,{children:a})]})}function M(e={}){const{wrapper:n}={...t(),...e.components};return n?s.jsx(n,{...e,children:s.jsx(o,{...e})}):o()}export{M as default};

package/dist/assets/Layout-CYDYQGQX.js

@@ -0,0 +1,11 @@
+import{u as t,s as m}from"./OdysseyThemeProvider-DTipOKrx.js";import{r as a}from"./index-NdkWRN8K.js";import{M as p}from"./Box-C_AofFH6.js";import{j as e}from"./jsx-runtime-CnH95YSl.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=m("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=t(),n=o.map(r=>`minmax(0, ${r}fr)`).join(" ");return e.jsx(p,{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-C6_kLqWl.js

@@ -0,0 +1,285 @@
+import{j as n}from"./jsx-runtime-CnH95YSl.js";import{s as x}from"./OdysseyThemeProvider-DTipOKrx.js";import{O as Q}from"./OdysseyStorybookThemeDecorator-16bNnvxj.js";import{M as o}from"./Layout-CYDYQGQX.js";import{c as U}from"./Typography-C8wRtMzJ.js";import"./index-NdkWRN8K.js";import"./_commonjsHelpers-gnU0ypJ3.js";import"./index-BJTM6NaI.js";import"./OdysseyProvider-BUFYBjAn.js";import"./Box-C_AofFH6.js";import"./Box-Dj0TcHPk.js";import"./Typography-CLBOoAbV.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"}}),Rn={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 dn=["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,dn as __namedExportsOrder,Rn as default};

package/dist/assets/Legacy Migrations-DgGoeKZL.js

@@ -0,0 +1,86 @@
+import{j as e}from"./jsx-runtime-CnH95YSl.js";import{useMDXComponents as d}from"./index-BeeV6X6A.js";import{M as o}from"./index-B7cnlNYX.js";import"./index-NdkWRN8K.js";import"./_commonjsHelpers-gnU0ypJ3.js";import"./iframe-C-QZIo1O.js";import"./index-BJTM6NaI.js";import"./index-B5xazMy1.js";import"./index-DieBXP3Z.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";function i(s){const n={code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",li:"li",ol:"ol",p:"p",strong:"strong",ul:"ul",...d(),...s.components};return e.jsxs(e.Fragment,{children:[e.jsx(o,{}),`
+`,e.jsx(n.h1,{id:"migrations",children:"Migrations"}),`
+`,e.jsxs(n.h2,{id:"v021x-️-v023x",children:[e.jsx(n.code,{children:"v0.21.x"})," ➡️ ",e.jsx(n.code,{children:"v0.23.x"})]}),`
+`,e.jsx(n.h3,{id:"new-components",children:"New Components"}),`
+`,e.jsxs(n.ul,{children:[`
+`,e.jsx(n.li,{children:e.jsx(n.code,{children:"Autocomplete"})}),`
+`,e.jsx(n.li,{children:e.jsx(n.code,{children:"Fieldset"})}),`
+`,e.jsx(n.li,{children:e.jsx(n.code,{children:"Form"})}),`
+`,e.jsx(n.li,{children:e.jsx(n.code,{children:"PasswordField"})}),`
+`,e.jsx(n.li,{children:e.jsx(n.code,{children:"SearchField"})}),`
+`,e.jsx(n.li,{children:e.jsx(n.code,{children:"Toast"})}),`
+`]}),`
+`,e.jsx(n.h3,{id:"components-with-props-changes",children:"Components with Props Changes"}),`
+`,e.jsxs(n.ul,{children:[`
+`,e.jsx(n.li,{children:e.jsx(n.code,{children:"Banner"})}),`
+`,e.jsx(n.li,{children:e.jsx(n.code,{children:"Button"})}),`
+`,e.jsx(n.li,{children:e.jsx(n.code,{children:"Checkbox"})}),`
+`,e.jsx(n.li,{children:e.jsx(n.code,{children:"Dialog"})}),`
+`,e.jsx(n.li,{children:e.jsx(n.code,{children:"Icon"})}),`
+`,e.jsx(n.li,{children:e.jsx(n.code,{children:"Callout"})}),`
+`,e.jsx(n.li,{children:e.jsx(n.code,{children:"MenuButton"})}),`
+`,e.jsx(n.li,{children:e.jsx(n.code,{children:"Radio"})}),`
+`,e.jsx(n.li,{children:e.jsx(n.code,{children:"RadioGroup"})}),`
+`,e.jsx(n.li,{children:e.jsx(n.code,{children:"Tag"})}),`
+`,e.jsx(n.li,{children:e.jsx(n.code,{children:"TagList"})}),`
+`,e.jsx(n.li,{children:e.jsx(n.code,{children:"TextField"})}),`
+`,e.jsx(n.li,{children:e.jsx(n.code,{children:"Toast"})}),`
+`]}),`
+`,e.jsx(n.h3,{id:"component-api",children:"Component API"}),`
+`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"All components are now being wrapped and many prop names have changed. Prop names and APIs will now be more consistent across Odyssey."})}),`
+`,e.jsx(n.h3,{id:"deprecations",children:"Deprecations"}),`
+`,e.jsxs(n.ol,{children:[`
+`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"InputAdornment"})," is no longer erquired for ",e.jsx(n.code,{children:"startAdronment"})," and ",e.jsx(n.code,{children:"endAdornment"})," on ",e.jsx(n.code,{children:"TextField"}),"."]}),`
+`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"InputBase"})," should be replaced with ",e.jsx(n.code,{children:"TextField"}),"."]}),`
+`,e.jsxs(n.li,{children:["The ",e.jsx(n.code,{children:"size"})," prop on ",e.jsx(n.code,{children:"Icon"})," is now required."]}),`
+`]}),`
+`,e.jsxs(n.h2,{id:"v017x-️-v021x",children:[e.jsx(n.code,{children:"v0.17.x"})," ➡️ ",e.jsx(n.code,{children:"v0.21.x"})]}),`
+`,e.jsx(n.h3,{id:"new-components-1",children:"New Components"}),`
+`,e.jsxs(n.ul,{children:[`
+`,e.jsx(n.li,{children:e.jsx(n.code,{children:"Banner"})}),`
+`,e.jsx(n.li,{children:e.jsx(n.code,{children:"Checkbox"})}),`
+`,e.jsx(n.li,{children:e.jsx(n.code,{children:"CheckboxGroup"})}),`
+`,e.jsx(n.li,{children:e.jsx(n.code,{children:"Chip"})}),`
+`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"DatePicker"})," (Labs)"]}),`
+`,e.jsx(n.li,{children:e.jsx(n.code,{children:"Callout"})}),`
+`,e.jsx(n.li,{children:e.jsx(n.code,{children:"ListSubheader"})}),`
+`,e.jsx(n.li,{children:e.jsx(n.code,{children:"Radio"})}),`
+`,e.jsx(n.li,{children:e.jsx(n.code,{children:"RadioGroup"})}),`
+`,e.jsx(n.li,{children:e.jsx(n.code,{children:"ScopedCssBaseline"})}),`
+`,e.jsx(n.li,{children:e.jsx(n.code,{children:"ScreenReaderText"})}),`
+`,e.jsx(n.li,{children:e.jsx(n.code,{children:"Status"})}),`
+`,e.jsx(n.li,{children:e.jsx(n.code,{children:"TextField"})}),`
+`]}),`
+`,e.jsx(n.h3,{id:"components-with-props-changes-1",children:"Components with Props Changes"}),`
+`,e.jsxs(n.ul,{children:[`
+`,e.jsx(n.li,{children:e.jsx(n.code,{children:"Checkbox"})}),`
+`,e.jsx(n.li,{children:e.jsx(n.code,{children:"Radio"})}),`
+`,e.jsx(n.li,{children:e.jsx(n.code,{children:"RadioGroup"})}),`
+`]}),`
+`,e.jsx(n.h3,{id:"component-api-1",children:"Component API"}),`
+`,e.jsxs(n.ol,{children:[`
+`,e.jsx(n.li,{children:"Many new components have been added and wrapped; although, prop names in these versions are not necessarily following Odyssey guidelines."}),`
+`,e.jsx(n.li,{children:"MUI-passthrough is still allowed even for wrapped components. This will change in later versions."}),`
+`]}),`
+`,e.jsx(n.h3,{id:"deprecations-1",children:"Deprecations"}),`
+`,e.jsxs(n.ol,{children:[`
+`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"InputBase"})," should be replaced with ",e.jsx(n.code,{children:"TextField"}),"."]}),`
+`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"InputLabel"})," should not be used. We build it into our field components and created an internal ",e.jsx(n.code,{children:"Field"})," component to ensure matching styles. If you have custom field components that we don't support, message in ",e.jsx(n.code,{children:"#odyssey"})," to see if we should add your field or expose ",e.jsx(n.code,{children:"Field"}),"."]}),`
+`]}),`
+`,e.jsxs(n.h2,{id:"v014x-️-017x",children:[e.jsx(n.code,{children:"v0.14.x"})," ➡️ ",e.jsx(n.code,{children:"0.17.x"})]}),`
+`,e.jsx(n.h3,{id:"importing-from-odyssey",children:"Importing from Odyssey"}),`
+`,e.jsxs(n.p,{children:["As of ",e.jsx(n.code,{children:"0.15.2"}),", all MUI and Odyssey components are exported from ",e.jsx(n.code,{children:"@okta/odyssey-react-mui"}),". No further need to maintain a separate version of MUI."]}),`
+`,e.jsx(n.p,{children:"If you're using components not supported by Odyssey, please get your product designers in touch with Odyssey to see what we need to do going forward."}),`
+`,e.jsx(n.p,{children:"It's possible you need to still have your own MUI version, but it's possible there's an Odyssey design solution."}),`
+`,e.jsx(n.p,{children:"Also, Odyssey-Labs exists for this very purpose; things that you want in Odyssey, but we haven't had a finalized design."}),`
+`,e.jsx(n.h3,{id:"theming",children:"Theming"}),`
+`,e.jsxs(n.p,{children:["Odyssey now includes theme components and CSP nonce built into it's ",e.jsx(n.code,{children:"OdysseyProvider"})," wrapper. Just like MUI's ",e.jsx(n.code,{children:"ThemeProvider"}),", this needs to go at the top-level of your app and takes no props."]}),`
+`,e.jsxs(n.p,{children:["In a later update, this component will be renamed ",e.jsx(n.code,{children:"OdysseyProvider"}),"."]}),`
+`,e.jsx(n.h4,{id:"custom-theming",children:"Custom Theming"}),`
+`,e.jsxs(n.p,{children:["It's possible you want to customize Odyssey's theme because of your app's requirements. You'll want ",e.jsx(n.code,{children:"OdysseyProvider"})," (MUI and Odyssey theme wrapper)."]}),`
+`,e.jsxs(n.p,{children:["At this point, we still export ",e.jsx(n.code,{children:"MuiThemeProvider"})]}),`
+`,e.jsx(n.h3,{id:"usetheme",children:e.jsx(n.code,{children:"useTheme"})}),`
+`,e.jsxs(n.ul,{children:[`
+`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"typography.body"})," is now ",e.jsx(n.code,{children:"typography.body1"}),"."]}),`
+`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"typography.caption"})," is now ",e.jsx(n.code,{children:"typography.subtitle"}),"."]}),`
+`]})]})}function y(s={}){const{wrapper:n}={...d(),...s.components};return n?e.jsx(n,{...s,children:e.jsx(i,{...s})}):i(s)}export{y as default};

package/dist/assets/Link-DARU1eh_.js

@@ -0,0 +1 @@
+import{r as a}from"./index-NdkWRN8K.js";import{j as e}from"./jsx-runtime-CnH95YSl.js";import{L as d}from"./Link-roS5FD0_.js";import{M as x}from"./ExternalLink-ChdW10Dq.js";const R=["default","monochrome"],L=({ariaLabel:i,children:t,href:l,icon:n,linkRef:m,rel:c,target:r,testId:p,translate:f,variant:k,onClick:u})=>{const s=a.useRef(null);return a.useImperativeHandle(m,()=>({focus:()=>{var o;(o=s.current)==null||o.focus()}}),[]),e.jsxs(d,{"aria-label":i,"data-se":p,href:l,onClick:u,ref:s,rel:c,target:r,translate:f,variant:k,children:[n&&e.jsx("span",{className:"Link-icon",children:n}),t,r==="_blank"&&e.jsx("span",{className:"Link-indicator",role:"presentation",children:e.jsx(x,{})})]})},j=a.memo(L);j.displayName="Link";export{j as M,R as l};

package/dist/assets/Link-DQYPqbwN.js

@@ -0,0 +1,11 @@
+import{j as o}from"./jsx-runtime-CnH95YSl.js";import{useMDXComponents as p}from"./index-BeeV6X6A.js";import"./index-BfJJMjjI.js";import{M as e,T as n,S as s,D as a,P as l,a as c,b as x}from"./index-B7cnlNYX.js";import{L as i}from"./Link.stories-CVJ7Q2ly.js";import"./index-NdkWRN8K.js";import"./_commonjsHelpers-gnU0ypJ3.js";import"./preview-BZLfsIuF.js";import"./iframe-C-QZIo1O.js";import"./DocsRenderer-CFRXHY34-DnqGC5H8.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"./index-BJMTVygn.js";import"./iconUtils-xkzkxV_T.js";import"./index-C9Vf7o4H.js";import"./OdysseyThemeProvider-DTipOKrx.js";import"./Server-B3WCxnoM.js";import"./List-u4c_Evip.js";import"./ArrowRight-i-_xbxKs.js";import"./Bug-DRqyJMYC.js";import"./Calendar-YJMQn1tM.js";import"./ChevronRight-BmxenJh6.js";import"./ChevronUp-DHI0i-0H.js";import"./Clock-Dy5E54Oz.js";import"./Upload-DyM2svNl.js";import"./Documentation-C6SSR0B2.js";import"./Download-Dk4H3an9.js";import"./ExternalLink-ChdW10Dq.js";import"./Filter-Cq-rk7m-.js";import"./Folder-D3bMhDt6.js";import"./Globe-C0NXssWh.js";import"./Grid-mUYRZxGB.js";import"./Group-Dzn6lpVd.js";import"./Hide-BITw9ykJ.js";import"./Home-C3CtVLIr.js";import"./InformationCircle-jibwZQzV.js";import"./More-BYvX4unW.js";import"./Refresh-krNY0Ca2.js";import"./Search-CcTCSD9b.js";import"./Settings-C_5QrFSc.js";import"./Show-B4gf2Oeu.js";import"./Sync-DtoKZoAg.js";import"./User-D1H-igUB.js";import"./Video-CxSPq7j7.js";import"./OdysseyStorybookThemeDecorator-16bNnvxj.js";import"./OdysseyProvider-BUFYBjAn.js";import"./Link-DARU1eh_.js";import"./Link-roS5FD0_.js";import"./useIsFocusVisible-DH0qxT5e.js";import"./Typography-CLBOoAbV.js";function m(r){const t={a:"a",h2:"h2",li:"li",ul:"ul",...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.jsx(l,{of:i}),`
+`,o.jsx(c,{}),`
+`,o.jsx(x,{}),`
+`,o.jsx(t.h2,{id:"references",children:"References"}),`
+`,o.jsxs(t.ul,{children:[`
+`,o.jsxs(t.li,{children:[o.jsx(t.a,{href:"https://developers.google.com/web/tools/lighthouse/audits/noopener",rel:"nofollow",children:"Google's Developer Documentation"})," provides backgrounds on security and performance considerations when using external links"]}),`
+`]})]})}function uo(r={}){const{wrapper:t}={...p(),...r.components};return t?o.jsx(t,{...r,children:o.jsx(m,{...r})}):m(r)}export{uo as default};

package/dist/assets/Link-roS5FD0_.js

@@ -0,0 +1 @@
+import{V as M,U as $,at as y,p as j,c as U,_ as N,b as a,d as P,e as _,f as h,g as z}from"./OdysseyThemeProvider-DTipOKrx.js";import{r as x}from"./index-NdkWRN8K.js";import{j as E}from"./jsx-runtime-CnH95YSl.js";import{b as W,u as H}from"./useIsFocusVisible-DH0qxT5e.js";import{T as I}from"./Typography-CLBOoAbV.js";function O(e){return $("MuiLink",e)}const q=M("MuiLink",["root","underlineNone","underlineHover","underlineAlways","button","focusVisible"]),g={primary:"primary.main",textPrimary:"text.primary",secondary:"secondary.main",textSecondary:"text.secondary",error:"error.main"},w=e=>g[e]||e,G=({theme:e,ownerState:o})=>{const n=w(o.color),r=y(e,`palette.${n}`,!1)||o.color,s=y(e,`palette.${n}Channel`);return"vars"in e&&s?`rgba(${s} / 0.4)`:j.alpha(r,.4)},J=["className","color","component","onBlur","onFocus","TypographyClasses","underline","variant","sx"],K=e=>{const{classes:o,component:n,focusVisible:r,underline:s}=e,t={root:["root",`underline${h(s)}`,n==="button"&&"button",r&&"focusVisible"]};return z(t,O,o)},Q=P(I,{name:"MuiLink",slot:"Root",overridesResolver:(e,o)=>{const{ownerState:n}=e;return[o.root,o[`underline${h(n.underline)}`],n.component==="button"&&o.button]}})(({theme:e,ownerState:o})=>a({},o.underline==="none"&&{textDecoration:"none"},o.underline==="hover"&&{textDecoration:"none","&:hover":{textDecoration:"underline"}},o.underline==="always"&&a({textDecoration:"underline"},o.color!=="inherit"&&{textDecorationColor:G({theme:e,ownerState:o})},{"&:hover":{textDecorationColor:"inherit"}}),o.component==="button"&&{position:"relative",WebkitTapHighlightColor:"transparent",backgroundColor:"transparent",outline:0,border:0,margin:0,borderRadius:0,padding:0,cursor:"pointer",userSelect:"none",verticalAlign:"middle",MozAppearance:"none",WebkitAppearance:"none","&::-moz-focus-inner":{borderStyle:"none"},[`&.${q.focusVisible}`]:{outline:"auto"}})),eo=x.forwardRef(function(o,n){const r=U({props:o,name:"MuiLink"}),{className:s,color:t="primary",component:c="a",onBlur:u,onFocus:p,TypographyClasses:C,underline:k="always",variant:d="inherit",sx:l}=r,V=N(r,J),{isFocusVisibleRef:f,onBlur:F,onFocus:L,ref:R}=W(),[v,m]=x.useState(!1),D=H(n,R),T=i=>{F(i),f.current===!1&&m(!1),u&&u(i)},A=i=>{L(i),f.current===!0&&m(!0),p&&p(i)},b=a({},r,{color:t,component:c,focusVisible:v,underline:k,variant:d}),B=K(b);return E.jsx(Q,a({color:t,className:_(B.root,s),classes:C,component:c,onBlur:T,onFocus:A,ref:D,ownerState:b,variant:d,sx:[...Object.keys(g).includes(t)?[]:[{color:t}],...Array.isArray(l)?l:[l]]},V))});export{eo as L};