@okta/odyssey-react-mui 1.52.0 → 1.53.0

package/dist/assets/Right-to-Left (RTL)-DMJ1RF_H.js

@@ -0,0 +1,61 @@
+import{j as e}from"./iframe-CQjT1fxh.js";import{useMDXComponents as s}from"./index-D5BUEpVX.js";import"./preload-helper-Dp1pzeXC.js";function r(n){const d={code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",ul:"ul",...s(),...n.components};return e.jsxs(e.Fragment,{children:[e.jsx(d.h1,{id:"right-to-left-rtl-language-support",children:"Right-to-Left (RTL) language support"}),`
+`,e.jsxs(d.p,{children:["This document outlines the process and constraints of moving from physical CSS properties (",e.jsx(d.code,{children:"margin-left"}),") to logical CSS properties (",e.jsx(d.code,{children:"margin-inline-start"}),") as an effort to provide RTL support. Folks may recognize this syntax from CSS Grid or Flexbox."]}),`
+`,e.jsxs(d.p,{children:["These property variants key off of the ",e.jsx(d.code,{children:'dir="rtl|ltr"'})," attribute on ",e.jsx(d.code,{children:"html"}),". This allows for a single declaration to provide LTR and RTL support."]}),`
+`,e.jsx(d.h2,{id:"property-and-value-translations",children:"Property and value translations"}),`
+`,e.jsx(d.p,{children:"This table documents the related equivalents in physical and logical CSS, their linter support, and any relevant notes."}),`
+`,e.jsxs(d.p,{children:["For a quick visualization of how these properties are related, see ",e.jsx("a",{href:"https://codepen.io/aardrian/full/bGGxrvM",children:"this CodePen"}),"."]}),`
+`,e.jsx("div",{children:e.jsxs("table",{children:[e.jsx("thead",{children:e.jsxs("tr",{children:[e.jsx("td",{scope:"column",children:"Type"}),e.jsx("td",{scope:"column",children:"Physical CSS"}),e.jsx("td",{scope:"column",children:"Logical CSS"}),e.jsx("td",{scope:"column",children:"Lint status"}),e.jsx("td",{scope:"column",children:"Notes"})]})}),e.jsxs("tbody",{children:[e.jsxs("tr",{children:[e.jsx("td",{scope:"row",rowSpan:"7",children:e.jsx(d.p,{children:"Margin"})}),e.jsx("td",{children:e.jsx("code",{children:"margin"})}),e.jsx("td",{}),e.jsx("td",{children:"no auto-fix"}),e.jsx("td",{children:e.jsxs(d.p,{children:["See ",e.jsx("a",{href:"#linting-notes",children:"Linting notes"})]})})]}),e.jsxs("tr",{children:[e.jsx("td",{children:e.jsx("code",{children:"margin-top"})}),e.jsx("td",{children:e.jsx("code",{children:"margin-block-start"})}),e.jsx("td",{children:"auto-fixed"}),e.jsx("td",{children:e.jsxs(d.p,{children:["See ",e.jsx("a",{href:"#linting-notes",children:"Linting notes"})]})})]}),e.jsxs("tr",{children:[e.jsx("td",{children:e.jsx("code",{children:"margin-bottom"})}),e.jsx("td",{children:e.jsx("code",{children:"margin-block-end"})}),e.jsx("td",{children:"auto-fixed"}),e.jsx("td",{children:e.jsxs(d.p,{children:["See ",e.jsx("a",{href:"#linting-notes",children:"Linting notes"})]})})]}),e.jsxs("tr",{children:[e.jsx("td",{children:e.jsx("code",{children:"margin-left"})}),e.jsx("td",{children:e.jsx("code",{children:"margin-inline-start"})}),e.jsx("td",{children:"auto-fixed"}),e.jsx("td",{children:e.jsxs(d.p,{children:["See ",e.jsx("a",{href:"#linting-notes",children:"Linting notes"})]})})]}),e.jsxs("tr",{children:[e.jsx("td",{children:e.jsx("code",{children:"margin-right"})}),e.jsx("td",{children:e.jsx("code",{children:"margin-inline-end"})}),e.jsx("td",{children:"auto-fixed"}),e.jsx("td",{children:e.jsxs(d.p,{children:["See ",e.jsx("a",{href:"#linting-notes",children:"Linting notes"})]})})]}),e.jsxs("tr",{children:[e.jsx("td",{}),e.jsx("td",{children:e.jsx("code",{children:"margin-block"})}),e.jsx("td",{}),e.jsx("td",{children:"Sets both block margins"})]}),e.jsxs("tr",{children:[e.jsx("td",{}),e.jsx("td",{children:e.jsx("code",{children:"margin-inline"})}),e.jsx("td",{}),e.jsx("td",{children:"Sets both inline margins"})]}),e.jsxs("tr",{children:[e.jsx("td",{scope:"row",rowSpan:"7",children:e.jsx(d.p,{children:"Padding"})}),e.jsx("td",{children:e.jsx("code",{children:"padding"})}),e.jsx("td",{}),e.jsx("td",{children:"no auto-fix"}),e.jsx("td",{children:e.jsxs(d.p,{children:["See ",e.jsx("a",{href:"#linting-notes",children:"Linting notes"})]})})]}),e.jsxs("tr",{children:[e.jsx("td",{children:e.jsx("code",{children:"padding-top"})}),e.jsx("td",{children:e.jsx("code",{children:"padding-block-start"})}),e.jsx("td",{children:"auto-fixed"}),e.jsx("td",{children:e.jsxs(d.p,{children:["See ",e.jsx("a",{href:"#linting-notes",children:"Linting notes"})]})})]}),e.jsxs("tr",{children:[e.jsx("td",{children:e.jsx("code",{children:"padding-bottom"})}),e.jsx("td",{children:e.jsx("code",{children:"padding-block-end"})}),e.jsx("td",{children:"auto-fixed"}),e.jsx("td",{children:e.jsxs(d.p,{children:["See ",e.jsx("a",{href:"#linting-notes",children:"Linting notes"})]})})]}),e.jsxs("tr",{children:[e.jsx("td",{children:e.jsx("code",{children:"padding-left"})}),e.jsx("td",{children:e.jsx("code",{children:"padding-inline-start"})}),e.jsx("td",{children:"auto-fixed"}),e.jsx("td",{children:e.jsxs(d.p,{children:["See ",e.jsx("a",{href:"#linting-notes",children:"Linting notes"})]})})]}),e.jsxs("tr",{children:[e.jsx("td",{children:e.jsx("code",{children:"padding-right"})}),e.jsx("td",{children:e.jsx("code",{children:"padding-inline-end"})}),e.jsx("td",{children:"auto-fixed"}),e.jsx("td",{children:e.jsxs(d.p,{children:["See ",e.jsx("a",{href:"#linting-notes",children:"Linting notes"})]})})]}),e.jsxs("tr",{children:[e.jsx("td",{}),e.jsx("td",{children:e.jsx("code",{children:"padding-block"})}),e.jsx("td",{}),e.jsx("td",{children:"Sets both block paddings"})]}),e.jsxs("tr",{children:[e.jsx("td",{}),e.jsx("td",{children:e.jsx("code",{children:"padding-inline"})}),e.jsx("td",{}),e.jsx("td",{children:"Sets both inline paddings"})]}),e.jsxs("tr",{children:[e.jsx("td",{scope:"row",rowSpan:"11",children:e.jsx(d.p,{children:"Borders"})}),e.jsx("td",{children:e.jsx("code",{children:"border-top"})}),e.jsx("td",{children:e.jsx("code",{children:"border-block-start"})}),e.jsx("td",{children:"auto-fixed"}),e.jsx("td",{children:e.jsxs(d.p,{children:["Also applies to ",e.jsx("code",{children:"*-size|style|color"})]})})]}),e.jsxs("tr",{children:[e.jsx("td",{children:e.jsx("code",{children:"border-bottom"})}),e.jsx("td",{children:e.jsx("code",{children:"border-block-end"})}),e.jsx("td",{children:"auto-fixed"}),e.jsx("td",{children:e.jsxs(d.p,{children:["Also applies to ",e.jsx("code",{children:"*-size|style|color"})]})})]}),e.jsxs("tr",{children:[e.jsx("td",{children:e.jsx("code",{children:"border-left"})}),e.jsx("td",{children:e.jsx("code",{children:"border-inline-start"})}),e.jsx("td",{children:"auto-fixed"}),e.jsx("td",{children:e.jsxs(d.p,{children:["Also applies to ",e.jsx("code",{children:"*-size|style|color"})]})})]}),e.jsxs("tr",{children:[e.jsx("td",{children:e.jsx("code",{children:"border-right"})}),e.jsx("td",{children:e.jsx("code",{children:"border-inline-end"})}),e.jsx("td",{children:"auto-fixed"}),e.jsx("td",{children:e.jsxs(d.p,{children:["Also applies to ",e.jsx("code",{children:"*-size|style|color"})]})})]}),e.jsxs("tr",{children:[e.jsx("td",{}),e.jsx("td",{children:e.jsx("code",{children:"border-block"})}),e.jsx("td",{}),e.jsx("td",{children:"Sets both block borders"})]}),e.jsxs("tr",{children:[e.jsx("td",{}),e.jsx("td",{children:e.jsx("code",{children:"border-inline"})}),e.jsx("td",{}),e.jsx("td",{children:"Sets both inline borders"})]}),e.jsxs("tr",{children:[e.jsx("td",{children:e.jsx("code",{children:"border-radius"})}),e.jsx("td",{}),e.jsx("td",{children:"no auto-fix"}),e.jsx("td",{children:e.jsxs(d.p,{children:["See ",e.jsx("a",{href:"#linting-notes",children:"Linting notes"})]})})]}),e.jsxs("tr",{children:[e.jsx("td",{children:e.jsx("code",{children:"border-top-left-radius"})}),e.jsx("td",{children:e.jsx("code",{children:"border-start-start-radius"})}),e.jsx("td",{children:"auto-fixed"}),e.jsx("td",{})]}),e.jsxs("tr",{children:[e.jsx("td",{children:e.jsx("code",{children:"border-top-right-radius"})}),e.jsx("td",{children:e.jsx("code",{children:"border-start-end-radius"})}),e.jsx("td",{children:"auto-fixed"}),e.jsx("td",{})]}),e.jsxs("tr",{children:[e.jsx("td",{children:e.jsx("code",{children:"border-bottom-left-radius"})}),e.jsx("td",{children:e.jsx("code",{children:"border-end-start-radius"})}),e.jsx("td",{children:"auto-fixed"}),e.jsx("td",{})]}),e.jsxs("tr",{children:[e.jsx("td",{children:e.jsx("code",{children:"border-bottom-right-radius"})}),e.jsx("td",{children:e.jsx("code",{children:"border-end-end-radius"})}),e.jsx("td",{children:"auto-fixed"}),e.jsx("td",{})]}),e.jsxs("tr",{children:[e.jsx("td",{scope:"row",rowSpan:"7",children:e.jsx(d.p,{children:"Position"})}),e.jsx("td",{children:e.jsx("code",{children:"top"})}),e.jsx("td",{children:e.jsx("code",{children:"inset-block-start"})}),e.jsx("td",{children:"auto-fixed"}),e.jsx("td",{})]}),e.jsxs("tr",{children:[e.jsx("td",{children:e.jsx("code",{children:"bottom"})}),e.jsx("td",{children:e.jsx("code",{children:"inset-block-end"})}),e.jsx("td",{children:"auto-fixed"}),e.jsx("td",{})]}),e.jsxs("tr",{children:[e.jsx("td",{children:e.jsx("code",{children:"left"})}),e.jsx("td",{children:e.jsx("code",{children:"inset-inline-start"})}),e.jsx("td",{children:"auto-fixed"}),e.jsx("td",{})]}),e.jsxs("tr",{children:[e.jsx("td",{children:e.jsx("code",{children:"right"})}),e.jsx("td",{children:e.jsx("code",{children:"inset-inline-end"})}),e.jsx("td",{children:"auto-fixed"}),e.jsx("td",{})]}),e.jsxs("tr",{children:[e.jsx("td",{}),e.jsx("td",{children:e.jsx("code",{children:"inset"})}),e.jsx("td",{}),e.jsx("td",{children:"Sets all inset values"})]}),e.jsxs("tr",{children:[e.jsx("td",{}),e.jsx("td",{children:e.jsx("code",{children:"inset-block"})}),e.jsx("td",{}),e.jsx("td",{children:"Sets block inset values"})]}),e.jsxs("tr",{children:[e.jsx("td",{}),e.jsx("td",{children:e.jsx("code",{children:"inset-inline"})}),e.jsx("td",{}),e.jsx("td",{children:"Sets inline inset values"})]}),e.jsxs("tr",{children:[e.jsx("td",{scope:"row",rowSpan:"6",children:e.jsx(d.p,{children:"Layout"})}),e.jsx("td",{children:e.jsx("code",{children:"text-align: left"})}),e.jsx("td",{children:e.jsx("code",{children:"text-align: start"})}),e.jsx("td",{children:"auto-fixed"}),e.jsx("td",{})]}),e.jsxs("tr",{children:[e.jsx("td",{children:e.jsx("code",{children:"text-align: right"})}),e.jsx("td",{children:e.jsx("code",{children:"text-align: end"})}),e.jsx("td",{children:"auto-fixed"}),e.jsx("td",{})]}),e.jsxs("tr",{children:[e.jsx("td",{children:e.jsx("code",{children:"float: left"})}),e.jsx("td",{children:e.jsx("code",{children:"float: inline-start"})}),e.jsx("td",{children:"auto-fixed"}),e.jsx("td",{children:"Prefer Grid or Flex instead"})]}),e.jsxs("tr",{children:[e.jsx("td",{children:e.jsx("code",{children:"float: right"})}),e.jsx("td",{children:e.jsx("code",{children:"float: inline-end"})}),e.jsx("td",{children:"auto-fixed"}),e.jsx("td",{children:"Prefer Grid or Flex instead"})]}),e.jsxs("tr",{children:[e.jsx("td",{children:e.jsx("code",{children:"clear: left"})}),e.jsx("td",{children:e.jsx("code",{children:"clear: inline-start"})}),e.jsx("td",{children:"auto-fixed"}),e.jsx("td",{children:"Prefer Grid or Flex instead"})]}),e.jsxs("tr",{children:[e.jsx("td",{children:e.jsx("code",{children:"clear: right"})}),e.jsx("td",{children:e.jsx("code",{children:"clear: inline-end"})}),e.jsx("td",{children:"auto-fixed"}),e.jsx("td",{children:"Prefer Grid or Flex instead"})]})]})]})}),`
+`,e.jsx(d.h3,{id:"linting-notes",children:"Linting notes"}),`
+`,e.jsxs(d.p,{children:["Browsers have not settled on a standard RTL syntax for 4-value shorthands. Currently, using standard 4-value shorthands (",e.jsx(d.code,{children:"margin: 4px 3px 2px 1px"}),") will be parsed as physical CSS by the browser. Stylelint's auto-fix behavior in this regard has a few gaps:"]}),`
+`,e.jsxs(d.ul,{children:[`
+`,e.jsxs(d.li,{children:["When four properties are present, ",e.jsx(d.code,{children:"margin"})," and ",e.jsx(d.code,{children:"padding"})," are collapsed into two forms of shorthand:",`
+`,e.jsxs(d.ul,{children:[`
+`,e.jsxs(d.li,{children:["When all values are the same: ",e.jsx(d.code,{children:"margin: x"})]}),`
+`,e.jsxs(d.li,{children:["When all values are different: ",e.jsx(d.code,{children:"margin: logical p q x y"}),"."]}),`
+`]}),`
+`]}),`
+`,e.jsxs(d.li,{children:["The ",e.jsx(d.code,{children:"logical"})," flag is aligned with the proposed syntax, but it is not supported in most browsers."]}),`
+`,e.jsxs(d.li,{children:[e.jsx(d.code,{children:"border-radius"})," itself goes undetected, as there is no RTL syntax for shorthand. This is safe when the values are the same, but unsafe if they are ever different."]}),`
+`]}),`
+`,e.jsxs(d.p,{children:["For the above reasons, the use of ",e.jsx(d.code,{children:"margin"}),", ",e.jsx(d.code,{children:"padding"}),", and ",e.jsx(d.code,{children:"border-radius"})," shorthands are disallowed in our current config. Please use the associated RTL properties or the ",e.jsx(d.code,{children:"border-radius"})," mixin for broad support."]}),`
+`,e.jsx(d.h3,{id:"unsupported-properties",children:"Unsupported properties"}),`
+`,e.jsxs(d.p,{children:["Of note, ",e.jsx(d.code,{children:"transform"}),", ",e.jsx(d.code,{children:"box-shadow"}),", and ",e.jsx(d.code,{children:"background"})," properties do not have logical equivalents."]}),`
+`,e.jsxs(d.p,{children:["Currently, these properties are always treated as physical. Since the ",e.jsx(d.code,{children:":rtl"})," selector doesn’t have broad support, the recommended solution is to add RTL styles via ",e.jsx(d.code,{children:"[dirl=’rtl’] &"}),"."]}),`
+`,e.jsx(d.pre,{children:e.jsx(d.code,{className:"language-css",children:`.foo {
+  transformation: translateX(50%);
+
+  [dir="rtl"] & {
+    transformation: translateX(-50%);
+  }
+}
+`})}),`
+`,e.jsx(d.h3,{id:"browser-support",children:"Browser support"}),`
+`,e.jsx(d.p,{children:"Firefox and Chrome both have full support for the new properties and values."}),`
+`,e.jsx(d.p,{children:"Safari is currently missing support for logical border-radius properties; however, full support is available in the Safari 15 preview."}),`
+`,e.jsx(d.h3,{id:"unused-logical-properties-and-values",children:"Unused logical properties and values"}),`
+`,e.jsx(d.p,{children:`Our current implementation focuses on providing "automatic" RTL support with the least amount of overhead. For this reason, we haven't implemented properties related to vertical reading/writing. For completeness, the remaining Logical CSS properties are inventoried here:`}),`
+`,e.jsx("div",{children:e.jsxs("table",{children:[e.jsx("thead",{children:e.jsxs("tr",{children:[e.jsx("td",{scope:"column",children:"Type"}),e.jsx("td",{scope:"column",children:"Physical CSS"}),e.jsx("td",{scope:"column",children:"Logical CSS"}),e.jsx("td",{scope:"column",children:"Lint status"})]})}),e.jsxs("tbody",{children:[e.jsxs("tr",{children:[e.jsx("td",{scope:"row",rowSpan:"6",children:e.jsx(d.p,{children:"Box"})}),e.jsx("td",{children:e.jsx("code",{children:"width"})}),e.jsx("td",{children:e.jsx("code",{children:"inline-size"})}),e.jsx("td",{children:"auto-fix available"})]}),e.jsxs("tr",{children:[e.jsx("td",{children:e.jsx("code",{children:"min-width"})}),e.jsx("td",{children:e.jsx("code",{children:"min-inline-size"})}),e.jsx("td",{children:"auto-fix available"})]}),e.jsxs("tr",{children:[e.jsx("td",{children:e.jsx("code",{children:"max-width"})}),e.jsx("td",{children:e.jsx("code",{children:"max-inline-size"})}),e.jsx("td",{children:"auto-fix available"})]}),e.jsxs("tr",{children:[e.jsx("td",{children:e.jsx("code",{children:"height"})}),e.jsx("td",{children:e.jsx("code",{children:"block-size"})}),e.jsx("td",{children:"auto-fix available"})]}),e.jsxs("tr",{children:[e.jsx("td",{children:e.jsx("code",{children:"min-height"})}),e.jsx("td",{children:e.jsx("code",{children:"min-block-size"})}),e.jsx("td",{children:"auto-fix available"})]}),e.jsxs("tr",{children:[e.jsx("td",{children:e.jsx("code",{children:"max-height"})}),e.jsx("td",{children:e.jsx("code",{children:"max-block-size"})}),e.jsx("td",{children:"auto-fix available"})]}),e.jsxs("tr",{children:[e.jsx("td",{scope:"row",rowSpan:"6",children:e.jsx(d.p,{children:"Overflow"})}),e.jsx("td",{children:e.jsx("code",{children:"overflow-y"})}),e.jsx("td",{children:e.jsx("code",{children:"overflow-block"})}),e.jsx("td",{children:"undetected"})]}),e.jsxs("tr",{children:[e.jsx("td",{children:e.jsx("code",{children:"overflow-x"})}),e.jsx("td",{children:e.jsx("code",{children:"overflow-inline"})}),e.jsx("td",{children:"undetected"})]}),e.jsxs("tr",{children:[e.jsx("td",{children:e.jsx("code",{children:"overscroll-behavior-y"})}),e.jsx("td",{children:e.jsx("code",{children:"overscroll-behavior-block"})}),e.jsx("td",{children:"undetected"})]}),e.jsxs("tr",{children:[e.jsx("td",{children:e.jsx("code",{children:"overscroll-behavior-x"})}),e.jsx("td",{children:e.jsx("code",{children:"overscroll-behavior-inline"})}),e.jsx("td",{children:"undetected"})]}),e.jsxs("tr",{children:[e.jsx("td",{children:e.jsx("code",{children:"resize: horizontal"})}),e.jsx("td",{children:e.jsx("code",{children:"resize: inline"})}),e.jsx("td",{children:"undetected"})]}),e.jsxs("tr",{children:[e.jsx("td",{children:e.jsx("code",{children:"resize: vertical"})}),e.jsx("td",{children:e.jsx("code",{children:"resize: block"})}),e.jsx("td",{children:"undetected"})]})]})]})}),`
+`,e.jsx(d.p,{children:`There are limited caveats to utilizing these properties today. However, they are
+not required for RTL support.`}),`
+`,e.jsx(d.p,{children:"Browser support is as above."}),`
+`,e.jsx(d.p,{children:"Box properties are correctly detected and auto-fixed by stylelint-use-logical, but Overflow properties are not."}),`
+`,e.jsx(d.p,{children:"PostCSS supports detection and fallback generation for all of these properties."}),`
+`,e.jsx(d.h2,{id:"non-logical-rtl-typography-concerns",children:"Non-logical, RTL typography concerns"}),`
+`,e.jsxs(d.ul,{children:[`
+`,e.jsxs(d.li,{children:[e.jsx(d.code,{children:"letter-spacing"})," is now set to 0 to ensure non-English scripts are properly ligatured"]}),`
+`,e.jsxs(d.li,{children:[e.jsx(d.code,{children:"text-decoration-skip-ink"})," is now set to ",e.jsx(d.code,{children:"all"})," for maximum non-English script support"]}),`
+`,e.jsx(d.li,{children:"Odyssey does not currently utilize or support transparency in text, as it causes legibility issues in non-English scripts"}),`
+`,e.jsxs(d.li,{children:[e.jsx(d.code,{children:"word-break"})," is disallowed since not all languages support intra-word breakage"]}),`
+`,e.jsx(d.li,{children:"Tables do not swap layout or ordering of numerical data"}),`
+`,e.jsx(d.li,{children:"Noto Sans Arabic is our preferred Arabic font family"}),`
+`,e.jsx(d.li,{children:"Addresses, email addresses, and phone numbers should not swap their display"}),`
+`]}),`
+`,e.jsx(d.h2,{id:"guidance-and-documentation-changes",children:"Guidance and documentation changes"}),`
+`,e.jsx(d.h3,{id:"naming",children:"Naming"}),`
+`,e.jsx(d.p,{children:"In both documentation and code, we have replaced and will strive to continue using logical, RTL-friendly names in place of physical ones."}),`
+`,e.jsxs(d.p,{children:["For classes, this means preferring ",e.jsx(d.code,{children:".is-tooltip-start"})," to ",e.jsx(d.code,{children:".is-tooltip-left"}),`. In documentation, we'll refer to the "upper, ending corner" instead of the "upper, right-hand corner".`]}),`
+`,e.jsx(d.h2,{id:"known-rtl-work-remaining",children:"Known RTL work remaining"}),`
+`,e.jsxs(d.ul,{children:[`
+`,e.jsxs(d.li,{children:["All unsupported cases (",e.jsx(d.code,{children:"transform"}),", ",e.jsx(d.code,{children:"background"}),", and ",e.jsx(d.code,{children:"shadow"}),") need linting to ensure appropriate RTL declarations."]}),`
+`,e.jsx(d.li,{children:"Icons require bi-directional support"}),`
+`]})]})}function c(n={}){const{wrapper:d}={...s(),...n.components};return d?e.jsx(d,{...n,children:e.jsx(r,{...n})}):r(n)}export{c as default};

package/dist/assets/ScopedCssBaseline-BOa6kM98.js

@@ -0,0 +1 @@
+import{b as d,X as f,a,M as g,N as m,_ as C,c as y,d as h,f as v}from"./tableRowClasses-Bk1uFtwh.js";import{j as p,r as S}from"./iframe-CQjT1fxh.js";const u=(e,o)=>a({WebkitFontSmoothing:"antialiased",MozOsxFontSmoothing:"grayscale",boxSizing:"border-box",WebkitTextSizeAdjust:"100%"},o&&!e.vars&&{colorScheme:e.palette.mode}),b=e=>a({color:(e.vars||e).palette.text.primary},e.typography.body1,{backgroundColor:(e.vars||e).palette.background.default,"@media print":{backgroundColor:(e.vars||e).palette.common.white}}),x=(e,o=!1)=>{var s;const t={};o&&e.colorSchemes&&Object.entries(e.colorSchemes).forEach(([i,n])=>{var c;t[e.getColorSchemeSelector(i).replace(/\s*&/,"")]={colorScheme:(c=n.palette)==null?void 0:c.mode}});let r=a({html:u(e,o),"*, *::before, *::after":{boxSizing:"inherit"},"strong, b":{fontWeight:e.typography.fontWeightBold},body:a({margin:0},b(e),{"&::backdrop":{backgroundColor:(e.vars||e).palette.background.default}})},t);const l=(s=e.components)==null||(s=s.MuiCssBaseline)==null?void 0:s.styleOverrides;return l&&(r=[r,l]),r};function z(e){const o=d({props:e,name:"MuiCssBaseline"}),{children:s,enableColorScheme:t=!1}=o;return p.jsxs(S.Fragment,{children:[p.jsx(f,{styles:r=>x(r,t)}),s]})}function B(e){return g("MuiScopedCssBaseline",e)}m("MuiScopedCssBaseline",["root"]);const j=["className","component","enableColorScheme"],k=e=>{const{classes:o}=e;return v({root:["root"]},B,o)},M=y("div",{name:"MuiScopedCssBaseline",slot:"Root",overridesResolver:(e,o)=>o.root})(({theme:e,ownerState:o})=>{const s={};return o.enableColorScheme&&e.colorSchemes&&Object.entries(e.colorSchemes).forEach(([t,r])=>{var l;s[`&${e.getColorSchemeSelector(t).replace(/\s*&/,"")}`]={colorScheme:(l=r.palette)==null?void 0:l.mode}}),a({},u(e,o.enableColorScheme),b(e),{"& *, & *::before, & *::after":{boxSizing:"inherit"},"& strong, & b":{fontWeight:e.typography.fontWeightBold}},s)}),O=S.forwardRef(function(o,s){const t=d({props:o,name:"MuiScopedCssBaseline"}),{className:r,component:l="div"}=t,i=C(t,j),n=a({},t,{component:l}),c=k(n);return p.jsx(M,a({as:l,className:h(c.root,r),ref:s,ownerState:n},i))});export{z as C,O as S};

package/dist/assets/ScreenReaderText-BfpueyoK.js

@@ -0,0 +1,15 @@
+import{j as e}from"./iframe-CQjT1fxh.js";import{useMDXComponents as r}from"./index-D5BUEpVX.js";import{M as i,C as s,c}from"./blocks-D521Uej3.js";import{Default as a}from"./ScreenReaderText.stories-C1dE1n7A.js";import"./preload-helper-Dp1pzeXC.js";import"./index-C77ZwfYm.js";import"./index-5Qx3hCfP.js";import"./OdysseyStorybookThemeDecorator-CHlNoX17.js";import"./OdysseyThemeProvider-BA0_xP7N.js";import"./tableRowClasses-Bk1uFtwh.js";import"./WarningFilled-DOHs-JmZ.js";import"./OdysseyProvider-rboSNY26.js";import"./ScopedCssBaseline-BOa6kM98.js";import"./ScreenReaderText-toqV93JE.js";import"./Box-CnVllI1S.js";import"./visuallyHidden-Dan1xhjv.js";function o(n){const t={code:"code",h1:"h1",h2:"h2",h3:"h3",p:"p",...r(),...n.components};return e.jsxs(e.Fragment,{children:[e.jsx(i,{anchor:!0}),`
+`,e.jsx(t.h1,{id:"screenreadertext",children:"ScreenReaderText"}),`
+`,e.jsx(t.p,{children:"The ScreenReaderText component is designed to enhance accessibility by providing text that can be read by screen readers but is not visible to a sighted user."}),`
+`,e.jsx(s,{of:a}),`
+`,e.jsx(t.h2,{id:"usage",children:"Usage"}),`
+`,e.jsx(t.p,{children:"The ScreenReaderText component should be used in conjunction with other visible UI elements to ensure that all users have access to the same information. It is typically used for labeling and providing additional context for form fields, buttons, and other interactive elements on the page."}),`
+`,e.jsx(t.h3,{id:"component-composition",children:"Component composition"}),`
+`,e.jsx(t.p,{children:"ScreenReaderText may be used to provide accessibility when composing custom components."}),`
+`,e.jsxs(t.p,{children:["For example, when communicating the ",e.jsx(t.code,{children:"severity"})," of an Alert:"]}),`
+`,e.jsx(c,{code:`
+<Alert role={role} severity={severity} variant="banner">
+<ScreenReaderText>{severity}:</ScreenReaderText>
+{text}
+</Alert>
+`})]})}function C(n={}){const{wrapper:t}={...r(),...n.components};return t?e.jsx(t,{...n,children:e.jsx(o,{...n})}):o(n)}export{C as default};

package/dist/assets/ScreenReaderText-toqV93JE.js

@@ -0,0 +1 @@
+import{r as a,j as o}from"./iframe-CQjT1fxh.js";import{B as n}from"./Box-CnVllI1S.js";import{v as i}from"./visuallyHidden-Dan1xhjv.js";const m={...i},d=({ariaHidden:e,children:r,id:s,translate:t})=>o.jsx(n,{"aria-hidden":e,component:"span",id:s,sx:m,translate:t,children:r}),x=a.memo(d);x.displayName="ScreenReaderText";export{x as M};

package/dist/assets/ScreenReaderText.stories-C1dE1n7A.js

@@ -0,0 +1,8 @@
+import{j as r}from"./iframe-CQjT1fxh.js";import{O as a}from"./OdysseyStorybookThemeDecorator-CHlNoX17.js";import{M as n}from"./ScreenReaderText-toqV93JE.js";import"./preload-helper-Dp1pzeXC.js";import"./OdysseyThemeProvider-BA0_xP7N.js";import"./tableRowClasses-Bk1uFtwh.js";import"./WarningFilled-DOHs-JmZ.js";import"./index-C77ZwfYm.js";import"./OdysseyProvider-rboSNY26.js";import"./ScopedCssBaseline-BOa6kM98.js";import"./Box-CnVllI1S.js";import"./visuallyHidden-Dan1xhjv.js";const j={component:n,decorators:[a],argTypes:{children:{control:"text"}},args:{children:"This text is visually hidden."}},e={render:function(i){return r.jsxs(r.Fragment,{children:["The following text is visually hidden:",r.jsx(n,{...i})]})}};var o,t,s;e.parameters={...e.parameters,docs:{...(o=e.parameters)==null?void 0:o.docs,source:{originalSource:`{
+  render: function C(args) {
+    return <>
+        The following text is visually hidden:
+        <ScreenReaderText {...args}></ScreenReaderText>
+      </>;
+  }
+}`,...(s=(t=e.parameters)==null?void 0:t.docs)==null?void 0:s.source}}};const R=["Default"];export{e as Default,R as __namedExportsOrder,j as default};

package/dist/assets/Search-0744_rm_.js

@@ -0,0 +1 @@
+import{r,j as e}from"./iframe-CQjT1fxh.js";import{S as a}from"./tableRowClasses-Bk1uFtwh.js";const l=r.forwardRef((o,n)=>e.jsx(a,{fill:"none",ref:n,viewBox:"0 0 16 16",xmlns:"http://www.w3.org/2000/svg",...o,children:e.jsx(e.Fragment,{children:e.jsx("path",{clipRule:"evenodd",d:"M10.667 6.667a4 4 0 1 1-8 0 4 4 0 0 1 8 0Zm-.754 4.231a5.333 5.333 0 1 1 .948-.938l3.61 3.611-.942.943-3.616-3.616Z",fill:"currentColor",fillRule:"evenodd"})})})),s=r.memo(l);s.displayName="SearchIcon";export{s as M};

package/dist/assets/SearchDropdown.stories-lpj_p0pn.js

@@ -0,0 +1,53 @@
+import{r as g,j as o}from"./iframe-CQjT1fxh.js";import{O as ot}from"./OdysseyStorybookThemeDecorator-CHlNoX17.js";import{f as M}from"./fieldComponentPropsMetaData-C9gCwuus.js";import{a as nt,O as it,b as at,c as rt,d as st,e as z,p as lt}from"./pickerComponentPropsMetaData-aBuTm1AZ.js";import{s as v}from"./tableRowClasses-Bk1uFtwh.js";import{u as pt}from"./OdysseyThemeProvider-BA0_xP7N.js";import{j as ct}from"./Typography-CjpHjc10.js";import{M as y}from"./Settings-CnuBvsmb.js";import{M as mt}from"./Folder-CVKRyg4P.js";import{M as I}from"./Video-DHeibuka.js";import"./preload-helper-Dp1pzeXC.js";import"./index-C77ZwfYm.js";import"./OdysseyProvider-rboSNY26.js";import"./ScopedCssBaseline-BOa6kM98.js";import"./useAutocomplete-DG_kuhWb.js";import"./index.esm-Dvk_qjX0.js";import"./ButtonBase-Rz8p08Xo.js";import"./useIsFocusVisible-D1xCTBdT.js";import"./TransitionGroupContext-yBqGXZYI.js";import"./Field-CqIOaZfg.js";import"./Box-B3rdnavX.js";import"./Box-CnVllI1S.js";import"./List-D0N4Xybp.js";import"./ListItem-BNz1zv6N.js";import"./FormHelperText-CVc1kPQJ.js";import"./FormLabel-CWWbs_c2.js";import"./isHostComponent-DVu5iVWx.js";import"./ScreenReaderText-toqV93JE.js";import"./visuallyHidden-Dan1xhjv.js";import"./FieldHint-Cs73lQge.js";import"./useUniqueId-DG6rB8dI.js";import"./createUniqueId-BHjR7HQF.js";import"./inputUtils-BBH9ADKa.js";import"./InputBase-BYnzr12H.js";import"./ownerWindow-HkKU3E4x.js";import"./ownerDocument-DW-IO8s5.js";import"./debounce-Be36O1Ab.js";import"./Autocomplete-BajR4gNT.js";import"./ArrowDropDown-BbLKA4fg.js";import"./createSvgIcon-CaWcxZng.js";import"./Close-CELHOmN_.js";import"./Paper-vUVrw-QB.js";import"./Popper-CISS1LuJ.js";import"./Portal-DeJFqeW-.js";import"./resolveComponentProps-DGxe9oED.js";import"./index-5Qx3hCfP.js";import"./useControlled-BUhC7uWK.js";import"./Chip-BgPaZbUf.js";import"./IconButton-BPR_sq0F.js";import"./ListSubheader-Dwx7m0BA.js";import"./WarningFilled-DOHs-JmZ.js";import"./Typography-Jr4Brrb5.js";/*!
+ * Copyright (c) 2023-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 S=v("div",{shouldForwardProp:e=>e!=="odysseyDesignTokens"&&e!=="adornmentSize"&&e!=="isTagContainer"})(({adornmentSize:e="small",isTagContainer:n=!1,odysseyDesignTokens:t,position:i="left"})=>({position:"relative",bottom:"1px",alignSelf:"flex-start",width:t.Spacing5,height:t.Spacing5,overflow:"hidden",...i==="left"&&{marginInlineEnd:t.Spacing3},...i==="right"&&{marginInlineStart:t.Spacing3},svg:{width:"100%",height:"auto"},img:{position:"absolute",top:"50%",left:"50%",width:"100%",transform:"translate(-50%, -50%)"},...e==="large"&&!n&&{bottom:0,width:t.Spacing8,height:t.Spacing8},...n&&{bottom:0,alignSelf:"center",width:t.Spacing4,height:"auto",maxHeight:t.Spacing4,marginInlineEnd:t.Spacing2,svg:{display:"flex",width:"100%",height:"auto"}}})),dt=v("div",{shouldForwardProp:e=>e!=="odysseyDesignTokens"})(()=>({display:"flex",justifyContent:"space-between",width:"100%"})),xt=v("div",{shouldForwardProp:e=>e!=="odysseyDesignTokens"})(()=>({display:"flex"})),gt=({adornment:e,adornmentSize:n,odysseyDesignTokens:t})=>typeof e=="string"?o.jsx(S,{adornmentSize:n,odysseyDesignTokens:t,children:o.jsx("img",{alt:"",role:"presentation",src:e})}):o.jsx(S,{adornmentSize:n,odysseyDesignTokens:t,children:e}),ut=({content:e,size:n,odysseyDesignTokens:t,onClick:i})=>{const r=g.useCallback(a=>{a.stopPropagation(),i()},[i]);return o.jsx(S,{adornmentSize:n,odysseyDesignTokens:t,onClick:r,children:e})},Ct=({adornmentSize:e,muiProps:n,odysseyDesignTokens:t,option:i})=>{const{adornment:r,description:a,label:x,metaData:u,extra:l,onClick:p,isInteractive:s=!0}=i,C=g.useCallback(h=>{if(!s){h.preventDefault();return}h.stopPropagation(),p==null||p()},[p,s]),f=g.useMemo(()=>({...n,onClick:s?C:void 0,"aria-disabled":s?void 0:"true",role:"option"}),[n,s,C]);return o.jsx(it,{hasAdornment:!0,muiProps:f,children:o.jsxs(dt,{odysseyDesignTokens:t,children:[o.jsxs(xt,{odysseyDesignTokens:t,children:[o.jsx(gt,{adornment:r,adornmentSize:e,odysseyDesignTokens:t}),o.jsxs("div",{children:[o.jsxs(at,{odysseyDesignTokens:t,children:[o.jsx(ct,{component:"p",children:x}),o.jsx(rt,{description:a,odysseyDesignTokens:t})]}),u&&o.jsx(st,{metaData:u,odysseyDesignTokens:t})]})]}),l&&o.jsx(ut,{content:l.content,odysseyDesignTokens:t,onClick:l.onClick,size:l.size||e})]})})},ht=({adornmentSize:e="small",ariaDescribedBy:n,defaultValue:t,errorMessage:i,errorMessageList:r,getIsOptionEqualToValue:a,groupOptionsBy:x,id:u,inputValue:l,isCustomValueAllowed:p,isDisabled:s,isFullWidth:C=!1,isLoading:f,isOptional:h=!1,isReadOnly:_,isVirtualized:F=!1,hint:R,HintLinkComponent:U,label:q,name:K,onBlur:N,onChange:Y,onInputChange:G,onFocus:J,options:Q,value:X,testId:Z,translate:$})=>{const j=pt(),tt=g.useCallback((et,B)=>o.jsx(Ct,{adornmentSize:e,muiProps:et,odysseyDesignTokens:j,option:B},B.value),[e,j]);return o.jsx(nt,{ariaDescribedBy:n,defaultValue:t,errorMessage:i,errorMessageList:r,getIsOptionEqualToValue:a,groupOptionsBy:x,hint:R,HintLinkComponent:U,id:u,inputValue:l,isCustomValueAllowed:p,isDisabled:s,isFullWidth:C,isLoading:f,isOptional:h,isReadOnly:_,isVirtualized:F,label:q,name:K,onBlur:N,onChange:Y,onFocus:J,onInputChange:G,options:Q,renderOption:tt,testId:Z,translate:$,value:X})},V=g.memo(ht);V.displayName="MemoizedSearchDropdown";const{expect:c,fn:W,screen:k,userEvent:E,within:kt}=__STORYBOOK_MODULE_TEST__,m=W(),d=W(),w=[{value:"an",label:"An Option label",adornment:o.jsx(mt,{}),extra:{content:o.jsx(y,{"data-testid":"option1-extra"}),onClick:d},onClick:m},{value:"another",label:"Another Option label",description:"Some optional descriptive text",adornment:o.jsx(y,{}),extra:{content:o.jsx(I,{}),onClick:d},onClick:m},{value:"unselectable",label:"Unselectable Option",description:"Some optional descriptive text",isInteractive:!1,adornment:o.jsx(y,{"data-testid":"unselectable-extra"}),extra:{content:o.jsx(I,{}),onClick:d},onClick:m}],he={component:V,decorators:[ot],argTypes:{...lt(!0),adornmentSize:{control:"radio",options:z,description:"Choose the size for the leading adornment. 'small' or 'large'",table:{type:{summary:z.join(" | ")}}},hint:M.hint,HintLinkComponent:M.HintLinkComponent},args:{label:"Picker with option adornment label",hint:"Optional hint text for picker",options:w},tags:["labs-export"]},b={args:{options:w},play:async({canvasElement:e,step:n})=>{const i=kt(e).getByRole("combobox"),r=()=>{m.mockClear(),d.mockClear()};await n("Click on option triggers option onClick",async()=>{r(),await E.click(i);const a=k.getByText("An Option label");await E.click(a),c(m).toBeCalled(),c(d).not.toBeCalled()}),await n("Click on option extra triggers option.extra onClick",async()=>{r();const a=k.getByTestId("option1-extra");await E.click(a),c(m).not.toBeCalled(),c(d).toBeCalled()}),await n("Click on unselectable option not trigger onClick",()=>{r();const a=k.getByText("Unselectable Option");c(a).toHaveStyle("pointer-events: none");const x=k.getByTestId("unselectable-extra");c(x).toHaveStyle("pointer-events: none")})}},O={args:{adornmentSize:"large",options:w}};var T,A,D;b.parameters={...b.parameters,docs:{...(T=b.parameters)==null?void 0:T.docs,source:{originalSource:`{
+  args: {
+    options: optionsWithExtra
+  },
+  play: async ({
+    canvasElement,
+    step
+  }) => {
+    const canvas = within(canvasElement);
+    const comboBoxElement = canvas.getByRole<HTMLInputElement>("combobox");
+    const clearMocks = () => {
+      optionOnClick.mockClear();
+      optionExtraOnClick.mockClear();
+    };
+    await step("Click on option triggers option onClick", async () => {
+      clearMocks();
+      await userEvent.click(comboBoxElement);
+      const option = screen.getByText("An Option label");
+      await userEvent.click(option);
+      expect(optionOnClick).toBeCalled();
+      expect(optionExtraOnClick).not.toBeCalled();
+    });
+    await step("Click on option extra triggers option.extra onClick", async () => {
+      clearMocks();
+      const optionExtra = screen.getByTestId("option1-extra");
+      await userEvent.click(optionExtra);
+      expect(optionOnClick).not.toBeCalled();
+      expect(optionExtraOnClick).toBeCalled();
+    });
+    await step("Click on unselectable option not trigger onClick", () => {
+      clearMocks();
+      const unselectableOption = screen.getByText("Unselectable Option");
+      expect(unselectableOption).toHaveStyle("pointer-events: none");
+      const optionExtra = screen.getByTestId("unselectable-extra");
+      expect(optionExtra).toHaveStyle("pointer-events: none");
+    });
+  }
+}`,...(D=(A=b.parameters)==null?void 0:A.docs)==null?void 0:D.source}}};var L,P,H;O.parameters={...O.parameters,docs:{...(L=O.parameters)==null?void 0:L.docs,source:{originalSource:`{
+  args: {
+    adornmentSize: "large",
+    options: optionsWithExtra
+  }
+}`,...(H=(P=O.parameters)==null?void 0:P.docs)==null?void 0:H.source}}};const ke=["SmallAdornmentWithExtra","LargeAdornmentWithExtra"];export{O as LargeAdornmentWithExtra,b as SmallAdornmentWithExtra,ke as __namedExportsOrder,he as default};

package/dist/assets/SearchField-DmDpB-Sd.js

@@ -0,0 +1 @@
+import{s as B}from"./tableRowClasses-Bk1uFtwh.js";import{r as t,j as e}from"./iframe-CQjT1fxh.js";import{M as E}from"./Field-CqIOaZfg.js";import{a as V,M as w}from"./OdysseyThemeProvider-BA0_xP7N.js";import{g as W,u as g}from"./inputUtils-BBH9ADKa.js";import{I as D}from"./InputBase-BYnzr12H.js";import{I as z}from"./InputAdornment-Clfg5IS6.js";import{M as L}from"./Search-0744_rm_.js";import{I as N}from"./IconButton-BPR_sq0F.js";import{b as O}from"./WarningFilled-DOHs-JmZ.js";const ee=["outline","filled"],q=B("div")({width:"100%"}),G=t.forwardRef(({ariaDescribedBy:C,autoCompleteType:l,defaultValue:d,hasInitialFocus:n,id:k,isDisabled:r=!1,isFullWidth:R=!1,label:T,name:c,onChange:o,onFocus:m,onBlur:u,onClear:a,placeholder:f,tabIndex:h,testId:p,translate:x,value:j,variant:b="outline"},y)=>{const{t:F}=V(),M=t.useCallback(i=>{o==null||o(i)},[o]),S=t.useCallback(()=>{a==null||a()},[a]),v=t.useRef(W({controlledValue:j,uncontrolledValue:d})),s=g({defaultValue:d,value:j,controlState:v.current}),A=t.useCallback(({ariaDescribedBy:i,id:I})=>e.jsx(D,{...s,"aria-describedby":i,autoComplete:l,autoFocus:n,"data-ods-type":"search","data-ods-variant":b,"data-se":p,endAdornment:((s==null?void 0:s.defaultValue)||(s==null?void 0:s.value))&&e.jsx(z,{position:"end",children:e.jsx(N,{"aria-label":F("clear.text"),disabled:r,onClick:S,size:"small",children:e.jsx(O,{})})}),id:I,inputProps:{tabIndex:h},name:c??I,onBlur:u,onChange:M,onFocus:m,placeholder:f,ref:y,startAdornment:e.jsx(z,{position:"start",children:e.jsx(L,{})}),translate:x,type:"search"}),[l,n,s,r,c,u,M,S,m,f,y,F,h,p,x,b]);return e.jsx(q,{children:e.jsx(w,{children:e.jsx(E,{ariaDescribedBy:C,fieldType:"single",hasVisibleLabel:!1,id:k,isDisabled:r,isFullWidth:R,isOptional:!0,label:T,renderFieldComponent:A})})})}),H=t.memo(G);H.displayName="SearchField";export{H as M,ee as s};

package/dist/assets/SearchField.stories-LT1ewC26.js

@@ -0,0 +1,37 @@
+import{r as s,j as E}from"./iframe-CQjT1fxh.js";import{O as M}from"./OdysseyStorybookThemeDecorator-CHlNoX17.js";import{f as e}from"./fieldComponentPropsMetaData-C9gCwuus.js";import{s as i,M as T}from"./SearchField-DmDpB-Sd.js";import"./preload-helper-Dp1pzeXC.js";import"./OdysseyThemeProvider-BA0_xP7N.js";import"./tableRowClasses-Bk1uFtwh.js";import"./WarningFilled-DOHs-JmZ.js";import"./index-C77ZwfYm.js";import"./OdysseyProvider-rboSNY26.js";import"./ScopedCssBaseline-BOa6kM98.js";import"./Field-CqIOaZfg.js";import"./Box-B3rdnavX.js";import"./Box-CnVllI1S.js";import"./List-D0N4Xybp.js";import"./ListItem-BNz1zv6N.js";import"./FormHelperText-CVc1kPQJ.js";import"./FormLabel-CWWbs_c2.js";import"./useIsFocusVisible-D1xCTBdT.js";import"./isHostComponent-DVu5iVWx.js";import"./ButtonBase-Rz8p08Xo.js";import"./TransitionGroupContext-yBqGXZYI.js";import"./ScreenReaderText-toqV93JE.js";import"./visuallyHidden-Dan1xhjv.js";import"./FieldHint-Cs73lQge.js";import"./Typography-CjpHjc10.js";import"./Typography-Jr4Brrb5.js";import"./useUniqueId-DG6rB8dI.js";import"./createUniqueId-BHjR7HQF.js";import"./inputUtils-BBH9ADKa.js";import"./InputBase-BYnzr12H.js";import"./ownerWindow-HkKU3E4x.js";import"./ownerDocument-DW-IO8s5.js";import"./debounce-Be36O1Ab.js";import"./InputAdornment-Clfg5IS6.js";import"./Search-0744_rm_.js";import"./IconButton-BPR_sq0F.js";const ge={component:T,decorators:[M],tags:["autodocs"],argTypes:{autoCompleteType:{control:"text",description:"This prop helps users to fill forms faster, especially on mobile devices. The name can be confusing, as it's more like an autofill. You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill)",table:{type:{summary:"string"},defaultValue:{summary:void 0}}},defaultValue:{control:"text",description:"The value of the `input` element. Use when the component is not controlled",table:{type:{summary:"string"},defaultValue:{summary:void 0}}},hasInitialFocus:{control:"boolean",description:"If `true`, the component will receive focus automatically",table:{type:{summary:"boolean"}}},isDisabled:e.isDisabled,isFullWidth:e.isFullWidth,id:e.id,label:{control:"text",description:"This label won't show up visually, but it's required for accessibility",table:{type:{summary:"string"}},type:{required:!0,name:"string"}},name:e.name,onBlur:{description:"Callback fired when the `input` element loses focus",table:{type:{summary:"function"}}},onClear:{description:"Callback fired when the clear button is pressed",table:{type:{summary:"function"}}},onChange:{description:"Callback fired when the value is changed",table:{type:{summary:"function"}}},onFocus:{description:"Callback fired when the `input` element gets focus",table:{type:{summary:"function"}}},placeholder:{control:"text",description:"The short hint displayed in the `input` before the user enters a value",table:{type:{summary:"string"}}},value:{control:"text",description:"The value of the `input` element. Use when the component is controlled",table:{type:{summary:"string"},defaultValue:{summary:void 0}}},variant:{options:i,control:{type:"radio"},description:"The color and style of the button",table:{type:{summary:i.join(" | ")},defaultValue:{summary:"outline"}},type:{required:!0,name:"other",value:"radio"}}},args:{label:"Search",placeholder:"Search planets"}},t={args:{defaultValue:""}},o={args:{defaultValue:"",variant:"filled"}},r={args:{isDisabled:!0}},a={args:{isFullWidth:!0}},n={parameters:{docs:{description:{story:"When the component is controlled, the parent component is responsible for managing the state of `SearchField`. `onChange` should be used to listen for component changes and to update the values in the `value` prop."}}},args:{defaultValue:void 0},render:function(w){const[x,l]=s.useState("Jupiter"),k=s.useCallback(W=>l(W.target.value),[]),D=s.useCallback(()=>{l("")},[]);return E.jsx(T,{...w,onChange:k,onClear:D,value:x})}};var u,p,c;t.parameters={...t.parameters,docs:{...(u=t.parameters)==null?void 0:u.docs,source:{originalSource:`{
+  args: {
+    defaultValue: ""
+  }
+}`,...(c=(p=t.parameters)==null?void 0:p.docs)==null?void 0:c.source}}};var m,d,h;o.parameters={...o.parameters,docs:{...(m=o.parameters)==null?void 0:m.docs,source:{originalSource:`{
+  args: {
+    defaultValue: "",
+    variant: "filled"
+  }
+}`,...(h=(d=o.parameters)==null?void 0:d.docs)==null?void 0:h.source}}};var f,g,b;r.parameters={...r.parameters,docs:{...(f=r.parameters)==null?void 0:f.docs,source:{originalSource:`{
+  args: {
+    isDisabled: true
+  }
+}`,...(b=(g=r.parameters)==null?void 0:g.docs)==null?void 0:b.source}}};var y,C,v;a.parameters={...a.parameters,docs:{...(y=a.parameters)==null?void 0:y.docs,source:{originalSource:`{
+  args: {
+    isFullWidth: true
+  }
+}`,...(v=(C=a.parameters)==null?void 0:C.docs)==null?void 0:v.source}}};var V,S,F;n.parameters={...n.parameters,docs:{...(V=n.parameters)==null?void 0:V.docs,source:{originalSource:`{
+  parameters: {
+    docs: {
+      description: {
+        story: "When the component is controlled, the parent component is responsible for managing the state of \`SearchField\`. \`onChange\` should be used to listen for component changes and to update the values in the \`value\` prop."
+      }
+    }
+  },
+  args: {
+    defaultValue: undefined
+  },
+  render: function C(props) {
+    const [constrolledValue, setControlledValue] = useState("Jupiter");
+    const onChange = useCallback((event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => setControlledValue(event.target.value), []);
+    const onClear = useCallback(() => {
+      setControlledValue("");
+    }, []);
+    return <SearchField {...props} onChange={onChange} onClear={onClear} value={constrolledValue} />;
+  }
+}`,...(F=(S=n.parameters)==null?void 0:S.docs)==null?void 0:F.source}}};const be=["Default","FilledVariant","Disabled","FullWidth","ControlledSearch"];export{n as ControlledSearch,t as Default,r as Disabled,o as FilledVariant,a as FullWidth,be as __namedExportsOrder,ge as default};

package/dist/assets/Select-CQoJvuLM.js

@@ -0,0 +1,15 @@
+import{s as I}from"./tableRowClasses-Bk1uFtwh.js";import{r as s,j as n}from"./iframe-CQjT1fxh.js";import{M as Y}from"./Field-CqIOaZfg.js";import{g as Z,u as _,C as ee}from"./inputUtils-BBH9ADKa.js";import{u as te}from"./OdysseyThemeProvider-BA0_xP7N.js";import{C as ne}from"./Chip-BgPaZbUf.js";import{L as re}from"./ListSubheader-Dwx7m0BA.js";import{M as se}from"./MenuItem-CpMFWgaz.js";import{C as ae}from"./Checkbox-mRntsWEy.js";import{L as le}from"./ListItem-BNz1zv6N.js";import{S as ie}from"./Select-DE0mojaE.js";import{B as oe}from"./Box-CnVllI1S.js";import{b as N,a as ce}from"./WarningFilled-DOHs-JmZ.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 ue=(...r)=>{const o="-";return r.join(o).replace(/\W+/g,o).toLowerCase()},de=I.div`
+  position: relative;
+  width: 100%;
+  display: flex;
+`,me=I("div",{shouldForwardProp:r=>r!=="odysseyDesignTokens"})(({odysseyDesignTokens:r})=>({alignItems:"center",display:"flex",insetBlockEnd:0,insetBlockStart:0,insetInlineEnd:"25px",insetInlineStart:"4px",marginInlineStart:r.BorderWidthMain,opacity:1,pointerEvents:"none",position:"absolute"})),pe=I(N,{shouldForwardProp:r=>r!=="odysseyDesignTokens"})(({odysseyDesignTokens:r})=>({fontSize:"1em",marginBlockEnd:"-1px",marginInlineEnd:`-${r.Spacing1}`,marginInlineStart:r.Spacing2})),fe=I(oe,{shouldForwardProp:r=>r!=="odysseyDesignTokens"&&r!=="isInteractive"&&r!=="isReadOnly"})(({isInteractive:r,isReadOnly:o,odysseyDesignTokens:p})=>({display:"flex",flexWrap:"wrap",gap:p.Spacing1,marginBlock:`-${p.Spacing2}`,marginInlineEnd:p.Spacing1,minHeight:p.Spacing6,opacity:r||o?1:0,pointerEvents:"none"})),{CONTROLLED:y}=ee,ge=({ariaDescribedBy:r,defaultValue:o,errorMessage:p,errorMessageList:W,hasMultipleChoices:b,hint:P,HintLinkComponent:$,id:K,inputRef:q,isDisabled:j=!1,isFullWidth:G=!1,isMultiSelect:M,isOptional:J=!1,isReadOnly:u=!1,label:Q,name:k,onBlur:E,onChange:h,onFocus:L,options:w,testId:z,translate:F,value:f})=>{const U=s.useRef(null),a=s.useMemo(()=>b===void 0?M:b,[b,M]),d=s.useRef(Z({controlledValue:f,uncontrolledValue:o})),[l,A]=s.useState(d.current===y?f:o),v=s.useRef(null),g=te();s.useImperativeHandle(q,()=>({focus:()=>{var t;(t=v.current)==null||t.focus()}}),[]),s.useEffect(()=>{d.current===y&&A(f)},[f]);const B=_({defaultValue:o,value:f,controlState:d.current}),S=s.useCallback((t,i)=>{if(u)t.preventDefault();else{const{target:{value:e}}=t;d.current!==y&&A(typeof e=="string"&&a?e.split(","):e),h==null||h(t,i)}},[a,h,u]),[D,V]=s.useMemo(()=>{const t=w.map(e=>{if(typeof e=="object"){const m=(e==null?void 0:e.value)===""?e.value:e.value||e.text;return{text:e.text,value:m,type:e.type==="heading"?"heading":"option",lang:e.language}}return{text:e,value:e,type:"option"}}),i=new Map(t.map(e=>[e.value,e]));return[t,i]},[w]),R=s.useCallback(t=>{if(Array.isArray(l)){const e={target:{value:l.filter(m=>m!==t)}};S(e,null)}},[l,S]),C=s.useCallback(({ariaLabel:t,isInteractive:i,isReadOnly:e})=>{const m=c=>c.stopPropagation(),x=!i&&!e&&d.current===y&&a;return Array.isArray(l)&&n.jsx(fe,{"aria-label":t,isInteractive:i,isReadOnly:e,odysseyDesignTokens:g,role:"list",children:l.map(c=>{var H;return(c==null?void 0:c.length)>0&&n.jsx(ne,{deleteIcon:n.jsx(N,{onMouseDown:m,sx:{pointerEvents:"auto"}}),label:n.jsxs(n.Fragment,{children:[(H=V.get(c))==null?void 0:H.text,x&&n.jsx(pe,{odysseyDesignTokens:g})]}),onDelete:i&&d.current===y?()=>R(c):void 0,role:"listitem",tabIndex:-1},c)})})},[d,a,l,g,R,V]),T=s.useMemo(()=>D.map((t,i)=>{if(t.type==="heading")return n.jsxs(re,{children:[" ",t.text," "]},t.text);const e=a?l==null?void 0:l.includes(t.value):l===t.value;return n.jsxs(se,{"data-empty":!t.text,lang:t.lang,selected:e,value:t.value,children:[a&&n.jsx(ae,{checked:e}),t.text,!a&&l===t.value&&n.jsx(le,{children:n.jsx(ce,{})})]},ue(t.text,i.toString()))}),[a,D,l]),O=s.useCallback(t=>Array.isArray(t)&&n.jsx(C,{isInteractive:!1}),[C]),X=s.useCallback(({ariaDescribedBy:t,errorMessageElementId:i,id:e,labelElementId:m})=>n.jsxs(de,{children:[n.jsx(ie,{...B,"aria-describedby":t,"aria-errormessage":i,displayEmpty:!0,id:e,inputProps:{"data-se":z,"aria-disabled":j||u,readOnly:u},inputRef:x=>{v.current!==x&&(v.current=x),U.current=x},labelId:m,MenuProps:{sx:{".MuiPaper-root":{maxHeight:"50vh"}}},multiple:a,name:k??e,onBlur:E,onChange:S,onFocus:L,renderValue:a?O:void 0,translate:F,children:T}),a&&n.jsx(n.Fragment,{children:n.jsx(me,{odysseyDesignTokens:g,children:n.jsx(C,{ariaLabel:"Selected options",isInteractive:!u,isReadOnly:u})})})]}),[C,B,a,j,u,k,g,E,S,L,T,O,z,F]);return n.jsx(Y,{ariaDescribedBy:r,errorMessage:p,errorMessageList:W,fieldType:"single",hasVisibleLabel:!0,hint:P,HintLinkComponent:$,id:K,isDisabled:j,isFullWidth:G,isOptional:J,label:Q,renderFieldComponent:X})},xe=s.memo(ge);xe.displayName="Select";export{xe as M};

package/dist/assets/Select-DE0mojaE.js

@@ -0,0 +1 @@
+import{b as se,_ as W,a as s,P as pe,c as h,f as q,r as _,N as We,M as Ee,d as ce,e as le,J as ot,z as nt,am as rt}from"./tableRowClasses-Bk1uFtwh.js";import{r as p,j as c}from"./iframe-CQjT1fxh.js";import{M as st}from"./Menu-DB2s3Jn0.js";import{i as lt}from"./ListItem-BNz1zv6N.js";import{u as Ne}from"./useControlled-BUhC7uWK.js";import{u as Le}from"./useIsFocusVisible-D1xCTBdT.js";import{o as it}from"./ownerDocument-DW-IO8s5.js";import{u as je,b as Ue}from"./FormHelperText-CVc1kPQJ.js";import{g as at,f as U,a as dt,i as K,b as ut,o as B,A as pt}from"./ArrowDropDown-BbLKA4fg.js";import{g as ct}from"./Portal-DeJFqeW-.js";import{I as fe,a as be,r as me,b as ve,i as ge}from"./InputBase-BYnzr12H.js";const ft=["disableUnderline","components","componentsProps","fullWidth","hiddenLabel","inputComponent","multiline","slotProps","slots","type"],bt=e=>{const{classes:t,disableUnderline:o}=e,l=q({root:["root",!o&&"underline"],input:["input"]},at,t);return s({},t,l)},mt=h(be,{shouldForwardProp:e=>_(e)||e==="classes",name:"MuiFilledInput",slot:"Root",overridesResolver:(e,t)=>{const{ownerState:o}=e;return[...me(e,t),!o.disableUnderline&&t.underline]}})(({theme:e,ownerState:t})=>{var o;const r=e.palette.mode==="light",l=r?"rgba(0, 0, 0, 0.42)":"rgba(255, 255, 255, 0.7)",a=r?"rgba(0, 0, 0, 0.06)":"rgba(255, 255, 255, 0.09)",d=r?"rgba(0, 0, 0, 0.09)":"rgba(255, 255, 255, 0.13)",i=r?"rgba(0, 0, 0, 0.12)":"rgba(255, 255, 255, 0.12)";return s({position:"relative",backgroundColor:e.vars?e.vars.palette.FilledInput.bg:a,borderTopLeftRadius:(e.vars||e).shape.borderRadius,borderTopRightRadius:(e.vars||e).shape.borderRadius,transition:e.transitions.create("background-color",{duration:e.transitions.duration.shorter,easing:e.transitions.easing.easeOut}),"&:hover":{backgroundColor:e.vars?e.vars.palette.FilledInput.hoverBg:d,"@media (hover: none)":{backgroundColor:e.vars?e.vars.palette.FilledInput.bg:a}},[`&.${U.focused}`]:{backgroundColor:e.vars?e.vars.palette.FilledInput.bg:a},[`&.${U.disabled}`]:{backgroundColor:e.vars?e.vars.palette.FilledInput.disabledBg:i}},!t.disableUnderline&&{"&::after":{borderBottom:`2px solid ${(o=(e.vars||e).palette[t.color||"primary"])==null?void 0:o.main}`,left:0,bottom:0,content:'""',position:"absolute",right:0,transform:"scaleX(0)",transition:e.transitions.create("transform",{duration:e.transitions.duration.shorter,easing:e.transitions.easing.easeOut}),pointerEvents:"none"},[`&.${U.focused}:after`]:{transform:"scaleX(1) translateX(0)"},[`&.${U.error}`]:{"&::before, &::after":{borderBottomColor:(e.vars||e).palette.error.main}},"&::before":{borderBottom:`1px solid ${e.vars?`rgba(${e.vars.palette.common.onBackgroundChannel} / ${e.vars.opacity.inputUnderline})`:l}`,left:0,bottom:0,content:'"\\00a0"',position:"absolute",right:0,transition:e.transitions.create("border-bottom-color",{duration:e.transitions.duration.shorter}),pointerEvents:"none"},[`&:hover:not(.${U.disabled}, .${U.error}):before`]:{borderBottom:`1px solid ${(e.vars||e).palette.text.primary}`},[`&.${U.disabled}:before`]:{borderBottomStyle:"dotted"}},t.startAdornment&&{paddingLeft:12},t.endAdornment&&{paddingRight:12},t.multiline&&s({padding:"25px 12px 8px"},t.size==="small"&&{paddingTop:21,paddingBottom:4},t.hiddenLabel&&{paddingTop:16,paddingBottom:17},t.hiddenLabel&&t.size==="small"&&{paddingTop:8,paddingBottom:9}))}),vt=h(ve,{name:"MuiFilledInput",slot:"Input",overridesResolver:ge})(({theme:e,ownerState:t})=>s({paddingTop:25,paddingRight:12,paddingBottom:8,paddingLeft:12},!e.vars&&{"&:-webkit-autofill":{WebkitBoxShadow:e.palette.mode==="light"?null:"0 0 0 100px #266798 inset",WebkitTextFillColor:e.palette.mode==="light"?null:"#fff",caretColor:e.palette.mode==="light"?null:"#fff",borderTopLeftRadius:"inherit",borderTopRightRadius:"inherit"}},e.vars&&{"&:-webkit-autofill":{borderTopLeftRadius:"inherit",borderTopRightRadius:"inherit"},[e.getColorSchemeSelector("dark")]:{"&:-webkit-autofill":{WebkitBoxShadow:"0 0 0 100px #266798 inset",WebkitTextFillColor:"#fff",caretColor:"#fff"}}},t.size==="small"&&{paddingTop:21,paddingBottom:4},t.hiddenLabel&&{paddingTop:16,paddingBottom:17},t.startAdornment&&{paddingLeft:0},t.endAdornment&&{paddingRight:0},t.hiddenLabel&&t.size==="small"&&{paddingTop:8,paddingBottom:9},t.multiline&&{paddingTop:0,paddingBottom:0,paddingLeft:0,paddingRight:0})),_e=p.forwardRef(function(t,o){var r,l,a,d;const i=se({props:t,name:"MuiFilledInput"}),{components:C={},componentsProps:I,fullWidth:v=!1,inputComponent:$="input",multiline:b=!1,slotProps:y,slots:R={},type:P="text"}=i,F=W(i,ft),S=s({},i,{fullWidth:v,inputComponent:$,multiline:b,type:P}),x=bt(i),O={root:{ownerState:S},input:{ownerState:S}},f=y??I?pe(O,y??I):O,N=(r=(l=R.root)!=null?l:C.Root)!=null?r:mt,k=(a=(d=R.input)!=null?d:C.Input)!=null?a:vt;return c.jsx(fe,s({slots:{root:N,input:k},componentsProps:f,fullWidth:v,inputComponent:$,multiline:b,ref:o,type:P},F,{classes:x}))});_e.muiName="Input";const gt=["disableUnderline","components","componentsProps","fullWidth","inputComponent","multiline","slotProps","slots","type"],ht=e=>{const{classes:t,disableUnderline:o}=e,l=q({root:["root",!o&&"underline"],input:["input"]},dt,t);return s({},t,l)},Ct=h(be,{shouldForwardProp:e=>_(e)||e==="classes",name:"MuiInput",slot:"Root",overridesResolver:(e,t)=>{const{ownerState:o}=e;return[...me(e,t),!o.disableUnderline&&t.underline]}})(({theme:e,ownerState:t})=>{let r=e.palette.mode==="light"?"rgba(0, 0, 0, 0.42)":"rgba(255, 255, 255, 0.7)";return e.vars&&(r=`rgba(${e.vars.palette.common.onBackgroundChannel} / ${e.vars.opacity.inputUnderline})`),s({position:"relative"},t.formControl&&{"label + &":{marginTop:16}},!t.disableUnderline&&{"&::after":{borderBottom:`2px solid ${(e.vars||e).palette[t.color].main}`,left:0,bottom:0,content:'""',position:"absolute",right:0,transform:"scaleX(0)",transition:e.transitions.create("transform",{duration:e.transitions.duration.shorter,easing:e.transitions.easing.easeOut}),pointerEvents:"none"},[`&.${K.focused}:after`]:{transform:"scaleX(1) translateX(0)"},[`&.${K.error}`]:{"&::before, &::after":{borderBottomColor:(e.vars||e).palette.error.main}},"&::before":{borderBottom:`1px solid ${r}`,left:0,bottom:0,content:'"\\00a0"',position:"absolute",right:0,transition:e.transitions.create("border-bottom-color",{duration:e.transitions.duration.shorter}),pointerEvents:"none"},[`&:hover:not(.${K.disabled}, .${K.error}):before`]:{borderBottom:`2px solid ${(e.vars||e).palette.text.primary}`,"@media (hover: none)":{borderBottom:`1px solid ${r}`}},[`&.${K.disabled}:before`]:{borderBottomStyle:"dotted"}})}),xt=h(ve,{name:"MuiInput",slot:"Input",overridesResolver:ge})({}),Ae=p.forwardRef(function(t,o){var r,l,a,d;const i=se({props:t,name:"MuiInput"}),{disableUnderline:C,components:I={},componentsProps:v,fullWidth:$=!1,inputComponent:b="input",multiline:y=!1,slotProps:R,slots:P={},type:F="text"}=i,S=W(i,gt),x=ht(i),f={root:{ownerState:{disableUnderline:C}}},N=R??v?pe(R??v,f):f,k=(r=(l=P.root)!=null?l:I.Root)!=null?r:Ct,M=(a=(d=P.input)!=null?d:I.Input)!=null?a:xt;return c.jsx(fe,s({slots:{root:k,input:M},slotProps:N,fullWidth:$,inputComponent:b,multiline:y,ref:o,type:F},S,{classes:x}))});Ae.muiName="Input";function It(e){return Ee("MuiNativeSelect",e)}const he=We("MuiNativeSelect",["root","select","multiple","filled","outlined","standard","disabled","icon","iconOpen","iconFilled","iconOutlined","iconStandard","nativeInput","error"]),yt=["className","disabled","error","IconComponent","inputRef","variant"],Rt=e=>{const{classes:t,variant:o,disabled:r,multiple:l,open:a,error:d}=e,i={select:["select",o,r&&"disabled",l&&"multiple",d&&"error"],icon:["icon",`icon${le(o)}`,a&&"iconOpen",r&&"disabled"]};return q(i,It,t)},De=({ownerState:e,theme:t})=>s({MozAppearance:"none",WebkitAppearance:"none",userSelect:"none",borderRadius:0,cursor:"pointer","&:focus":s({},t.vars?{backgroundColor:`rgba(${t.vars.palette.common.onBackgroundChannel} / 0.05)`}:{backgroundColor:t.palette.mode==="light"?"rgba(0, 0, 0, 0.05)":"rgba(255, 255, 255, 0.05)"},{borderRadius:0}),"&::-ms-expand":{display:"none"},[`&.${he.disabled}`]:{cursor:"default"},"&[multiple]":{height:"auto"},"&:not([multiple]) option, &:not([multiple]) optgroup":{backgroundColor:(t.vars||t).palette.background.paper},"&&&":{paddingRight:24,minWidth:16}},e.variant==="filled"&&{"&&&":{paddingRight:32}},e.variant==="outlined"&&{borderRadius:(t.vars||t).shape.borderRadius,"&:focus":{borderRadius:(t.vars||t).shape.borderRadius},"&&&":{paddingRight:32}}),St=h("select",{name:"MuiNativeSelect",slot:"Select",shouldForwardProp:_,overridesResolver:(e,t)=>{const{ownerState:o}=e;return[t.select,t[o.variant],o.error&&t.error,{[`&.${he.multiple}`]:t.multiple}]}})(De),Te=({ownerState:e,theme:t})=>s({position:"absolute",right:0,top:"calc(50% - .5em)",pointerEvents:"none",color:(t.vars||t).palette.action.active,[`&.${he.disabled}`]:{color:(t.vars||t).palette.action.disabled}},e.open&&{transform:"rotate(180deg)"},e.variant==="filled"&&{right:7},e.variant==="outlined"&&{right:7}),$t=h("svg",{name:"MuiNativeSelect",slot:"Icon",overridesResolver:(e,t)=>{const{ownerState:o}=e;return[t.icon,o.variant&&t[`icon${le(o.variant)}`],o.open&&t.iconOpen]}})(Te),Ot=p.forwardRef(function(t,o){const{className:r,disabled:l,error:a,IconComponent:d,inputRef:i,variant:C="standard"}=t,I=W(t,yt),v=s({},t,{disabled:l,variant:C,error:a}),$=Rt(v);return c.jsxs(p.Fragment,{children:[c.jsx(St,s({ownerState:v,className:ce($.select,r),disabled:l,ref:i||o},I)),t.multiple?null:c.jsx($t,{as:d,ownerState:v,className:$.icon})]})});var we;const Pt=["children","classes","className","label","notched"],kt=h("fieldset",{name:"MuiNotchedOutlined",shouldForwardProp:_})({textAlign:"left",position:"absolute",bottom:0,right:0,top:-5,left:0,margin:0,padding:"0 8px",pointerEvents:"none",borderRadius:"inherit",borderStyle:"solid",borderWidth:1,overflow:"hidden",minWidth:"0%"}),Ft=h("legend",{name:"MuiNotchedOutlined",shouldForwardProp:_})(({ownerState:e,theme:t})=>s({float:"unset",width:"auto",overflow:"hidden"},!e.withLabel&&{padding:0,lineHeight:"11px",transition:t.transitions.create("width",{duration:150,easing:t.transitions.easing.easeOut})},e.withLabel&&s({display:"block",padding:0,height:11,fontSize:"0.75em",visibility:"hidden",maxWidth:.01,transition:t.transitions.create("max-width",{duration:50,easing:t.transitions.easing.easeOut}),whiteSpace:"nowrap","& > span":{paddingLeft:5,paddingRight:5,display:"inline-block",opacity:0,visibility:"visible"}},e.notched&&{maxWidth:"100%",transition:t.transitions.create("max-width",{duration:100,easing:t.transitions.easing.easeOut,delay:50})})));function Nt(e){const{className:t,label:o,notched:r}=e,l=W(e,Pt),a=o!=null&&o!=="",d=s({},e,{notched:r,withLabel:a});return c.jsx(kt,s({"aria-hidden":!0,className:t,ownerState:d},l,{children:c.jsx(Ft,{ownerState:d,children:a?c.jsx("span",{children:o}):we||(we=c.jsx("span",{className:"notranslate",children:"​"}))})}))}const wt=["components","fullWidth","inputComponent","label","multiline","notched","slots","type"],Mt=e=>{const{classes:t}=e,r=q({root:["root"],notchedOutline:["notchedOutline"],input:["input"]},ut,t);return s({},t,r)},Bt=h(be,{shouldForwardProp:e=>_(e)||e==="classes",name:"MuiOutlinedInput",slot:"Root",overridesResolver:me})(({theme:e,ownerState:t})=>{const o=e.palette.mode==="light"?"rgba(0, 0, 0, 0.23)":"rgba(255, 255, 255, 0.23)";return s({position:"relative",borderRadius:(e.vars||e).shape.borderRadius,[`&:hover .${B.notchedOutline}`]:{borderColor:(e.vars||e).palette.text.primary},"@media (hover: none)":{[`&:hover .${B.notchedOutline}`]:{borderColor:e.vars?`rgba(${e.vars.palette.common.onBackgroundChannel} / 0.23)`:o}},[`&.${B.focused} .${B.notchedOutline}`]:{borderColor:(e.vars||e).palette[t.color].main,borderWidth:2},[`&.${B.error} .${B.notchedOutline}`]:{borderColor:(e.vars||e).palette.error.main},[`&.${B.disabled} .${B.notchedOutline}`]:{borderColor:(e.vars||e).palette.action.disabled}},t.startAdornment&&{paddingLeft:14},t.endAdornment&&{paddingRight:14},t.multiline&&s({padding:"16.5px 14px"},t.size==="small"&&{padding:"8.5px 14px"}))}),Wt=h(Nt,{name:"MuiOutlinedInput",slot:"NotchedOutline",overridesResolver:(e,t)=>t.notchedOutline})(({theme:e})=>{const t=e.palette.mode==="light"?"rgba(0, 0, 0, 0.23)":"rgba(255, 255, 255, 0.23)";return{borderColor:e.vars?`rgba(${e.vars.palette.common.onBackgroundChannel} / 0.23)`:t}}),Et=h(ve,{name:"MuiOutlinedInput",slot:"Input",overridesResolver:ge})(({theme:e,ownerState:t})=>s({padding:"16.5px 14px"},!e.vars&&{"&:-webkit-autofill":{WebkitBoxShadow:e.palette.mode==="light"?null:"0 0 0 100px #266798 inset",WebkitTextFillColor:e.palette.mode==="light"?null:"#fff",caretColor:e.palette.mode==="light"?null:"#fff",borderRadius:"inherit"}},e.vars&&{"&:-webkit-autofill":{borderRadius:"inherit"},[e.getColorSchemeSelector("dark")]:{"&:-webkit-autofill":{WebkitBoxShadow:"0 0 0 100px #266798 inset",WebkitTextFillColor:"#fff",caretColor:"#fff"}}},t.size==="small"&&{padding:"8.5px 14px"},t.multiline&&{padding:0},t.startAdornment&&{paddingLeft:0},t.endAdornment&&{paddingRight:0})),ze=p.forwardRef(function(t,o){var r,l,a,d,i;const C=se({props:t,name:"MuiOutlinedInput"}),{components:I={},fullWidth:v=!1,inputComponent:$="input",label:b,multiline:y=!1,notched:R,slots:P={},type:F="text"}=C,S=W(C,wt),x=Mt(C),O=je(),f=Ue({props:C,muiFormControl:O,states:["color","disabled","error","focused","hiddenLabel","size","required"]}),N=s({},C,{color:f.color||"primary",disabled:f.disabled,error:f.error,focused:f.focused,formControl:O,fullWidth:v,hiddenLabel:f.hiddenLabel,multiline:y,size:f.size,type:F}),k=(r=(l=P.root)!=null?l:I.Root)!=null?r:Bt,M=(a=(d=P.input)!=null?d:I.Input)!=null?a:Et;return c.jsx(fe,s({slots:{root:k,input:M},renderSuffix:E=>c.jsx(Wt,{ownerState:N,className:x.notchedOutline,label:b!=null&&b!==""&&f.required?i||(i=c.jsxs(p.Fragment,{children:[b," ","*"]})):b,notched:typeof R<"u"?R:!!(E.startAdornment||E.filled||E.focused)}),fullWidth:v,inputComponent:$,multiline:y,ref:o,type:F},S,{classes:s({},x,{notchedOutline:null})}))});ze.muiName="Input";function Lt(e){return Ee("MuiSelect",e)}const X=We("MuiSelect",["root","select","multiple","filled","outlined","standard","disabled","focused","icon","iconOpen","iconFilled","iconOutlined","iconStandard","nativeInput","error"]);var Me;const jt=["aria-describedby","aria-label","autoFocus","autoWidth","children","className","defaultOpen","defaultValue","disabled","displayEmpty","error","IconComponent","inputRef","labelId","MenuProps","multiple","name","onBlur","onChange","onClose","onFocus","onOpen","open","readOnly","renderValue","SelectDisplayProps","tabIndex","type","value","variant"],Ut=h("div",{name:"MuiSelect",slot:"Select",overridesResolver:(e,t)=>{const{ownerState:o}=e;return[{[`&.${X.select}`]:t.select},{[`&.${X.select}`]:t[o.variant]},{[`&.${X.error}`]:t.error},{[`&.${X.multiple}`]:t.multiple}]}})(De,{[`&.${X.select}`]:{height:"auto",minHeight:"1.4375em",textOverflow:"ellipsis",whiteSpace:"nowrap",overflow:"hidden"}}),_t=h("svg",{name:"MuiSelect",slot:"Icon",overridesResolver:(e,t)=>{const{ownerState:o}=e;return[t.icon,o.variant&&t[`icon${le(o.variant)}`],o.open&&t.iconOpen]}})(Te),At=h("input",{shouldForwardProp:e=>rt(e)&&e!=="classes",name:"MuiSelect",slot:"NativeInput",overridesResolver:(e,t)=>t.nativeInput})({bottom:0,left:0,position:"absolute",opacity:0,pointerEvents:"none",width:"100%",boxSizing:"border-box"});function Be(e,t){return typeof t=="object"&&t!==null?e===t:String(e)===String(t)}function Dt(e){return e==null||typeof e=="string"&&!e.trim()}const Tt=e=>{const{classes:t,variant:o,disabled:r,multiple:l,open:a,error:d}=e,i={select:["select",o,r&&"disabled",l&&"multiple",d&&"error"],icon:["icon",`icon${le(o)}`,a&&"iconOpen",r&&"disabled"],nativeInput:["nativeInput"]};return q(i,Lt,t)},zt=p.forwardRef(function(t,o){var r;const{"aria-describedby":l,"aria-label":a,autoFocus:d,autoWidth:i,children:C,className:I,defaultOpen:v,defaultValue:$,disabled:b,displayEmpty:y,error:R=!1,IconComponent:P,inputRef:F,labelId:S,MenuProps:x={},multiple:O,name:f,onBlur:N,onChange:k,onClose:M,onFocus:E,onOpen:H,open:J,readOnly:G,renderValue:V,SelectDisplayProps:w={},tabIndex:L,value:Q,variant:Y="standard"}=t,A=W(t,jt),[m,xe]=Ne({controlled:Q,default:$,name:"Select"}),[Ie,Ve]=Ne({controlled:J,default:v,name:"Select"}),ye=p.useRef(null),j=p.useRef(null),[D,Ke]=p.useState(null),{current:ie}=p.useRef(J!=null),[Xe,Re]=p.useState(),qe=Le(o,F),He=p.useCallback(n=>{j.current=n,n&&Ke(n)},[]),Z=D==null?void 0:D.parentNode;p.useImperativeHandle(qe,()=>({focus:()=>{j.current.focus()},node:ye.current,value:m}),[m]),p.useEffect(()=>{v&&Ie&&D&&!ie&&(Re(i?null:Z.clientWidth),j.current.focus())},[D,i]),p.useEffect(()=>{d&&j.current.focus()},[d]),p.useEffect(()=>{if(!S)return;const n=it(j.current).getElementById(S);if(n){const u=()=>{getSelection().isCollapsed&&j.current.focus()};return n.addEventListener("click",u),()=>{n.removeEventListener("click",u)}}},[S]);const ee=(n,u)=>{n?H&&H(u):M&&M(u),ie||(Re(i?null:Z.clientWidth),Ve(n))},Je=n=>{n.button===0&&(n.preventDefault(),j.current.focus(),ee(!0,n))},Ge=n=>{ee(!1,n)},Se=p.Children.toArray(C),Qe=n=>{const u=Se.find(g=>g.props.value===n.target.value);u!==void 0&&(xe(u.props.value),k&&k(n,u))},Ye=n=>u=>{let g;if(u.currentTarget.hasAttribute("tabindex")){if(O){g=Array.isArray(m)?m.slice():[];const z=m.indexOf(n.props.value);z===-1?g.push(n.props.value):g.splice(z,1)}else g=n.props.value;if(n.props.onClick&&n.props.onClick(u),m!==g&&(xe(g),k)){const z=u.nativeEvent||u,Fe=new z.constructor(z.type,z);Object.defineProperty(Fe,"target",{writable:!0,value:{value:g,name:f}}),k(Fe,n)}O||ee(!1,u)}},Ze=n=>{G||[" ","ArrowUp","ArrowDown","Enter"].indexOf(n.key)!==-1&&(n.preventDefault(),ee(!0,n))},te=D!==null&&Ie,et=n=>{!te&&N&&(Object.defineProperty(n,"target",{writable:!0,value:{value:m,name:f}}),N(n))};delete A["aria-invalid"];let T,$e;const oe=[];let ne=!1;(lt({value:m})||y)&&(V?T=V(m):ne=!0);const tt=Se.map(n=>{if(!p.isValidElement(n))return null;let u;if(O){if(!Array.isArray(m))throw new Error(ot(2));u=m.some(g=>Be(g,n.props.value)),u&&ne&&oe.push(n.props.children)}else u=Be(m,n.props.value),u&&ne&&($e=n.props.children);return p.cloneElement(n,{"aria-selected":u?"true":"false",onClick:Ye(n),onKeyUp:g=>{g.key===" "&&g.preventDefault(),n.props.onKeyUp&&n.props.onKeyUp(g)},role:"option",selected:u,value:void 0,"data-value":n.props.value})});ne&&(O?oe.length===0?T=null:T=oe.reduce((n,u,g)=>(n.push(u),g<oe.length-1&&n.push(", "),n),[]):T=$e);let Oe=Xe;!i&&ie&&D&&(Oe=Z.clientWidth);let ae;typeof L<"u"?ae=L:ae=b?null:0;const Pe=w.id||(f?`mui-component-select-${f}`:void 0),re=s({},t,{variant:Y,value:m,open:te,error:R}),de=Tt(re),ue=s({},x.PaperProps,(r=x.slotProps)==null?void 0:r.paper),ke=nt();return c.jsxs(p.Fragment,{children:[c.jsx(Ut,s({ref:He,tabIndex:ae,role:"combobox","aria-controls":ke,"aria-disabled":b?"true":void 0,"aria-expanded":te?"true":"false","aria-haspopup":"listbox","aria-label":a,"aria-labelledby":[S,Pe].filter(Boolean).join(" ")||void 0,"aria-describedby":l,onKeyDown:Ze,onMouseDown:b||G?null:Je,onBlur:et,onFocus:E},w,{ownerState:re,className:ce(w.className,de.select,I),id:Pe,children:Dt(T)?Me||(Me=c.jsx("span",{className:"notranslate",children:"​"})):T})),c.jsx(At,s({"aria-invalid":R,value:Array.isArray(m)?m.join(","):m,name:f,ref:ye,"aria-hidden":!0,onChange:Qe,tabIndex:-1,disabled:b,className:de.nativeInput,autoFocus:d,ownerState:re},A)),c.jsx(_t,{as:P,className:de.icon,ownerState:re}),c.jsx(st,s({id:`menu-${f||""}`,anchorEl:Z,open:te,onClose:Ge,anchorOrigin:{vertical:"bottom",horizontal:"center"},transformOrigin:{vertical:"top",horizontal:"center"}},x,{MenuListProps:s({"aria-labelledby":S,role:"listbox","aria-multiselectable":O?"true":void 0,disableListWrap:!0,id:ke},x.MenuListProps),slotProps:s({},x.slotProps,{paper:s({},ue,{style:s({minWidth:Oe},ue!=null?ue.style:null)})}),children:tt}))]})}),Vt=["autoWidth","children","classes","className","defaultOpen","displayEmpty","IconComponent","id","input","inputProps","label","labelId","MenuProps","multiple","native","onClose","onOpen","open","renderValue","SelectDisplayProps","variant"],Kt=["root"],Xt=e=>{const{classes:t}=e;return t},Ce={name:"MuiSelect",overridesResolver:(e,t)=>t.root,shouldForwardProp:e=>_(e)&&e!=="variant",slot:"Root"},qt=h(Ae,Ce)(""),Ht=h(ze,Ce)(""),Jt=h(_e,Ce)(""),Gt=p.forwardRef(function(t,o){const r=se({name:"MuiSelect",props:t}),{autoWidth:l=!1,children:a,classes:d={},className:i,defaultOpen:C=!1,displayEmpty:I=!1,IconComponent:v=pt,id:$,input:b,inputProps:y,label:R,labelId:P,MenuProps:F,multiple:S=!1,native:x=!1,onClose:O,onOpen:f,open:N,renderValue:k,SelectDisplayProps:M,variant:E="outlined"}=r,H=W(r,Vt),J=x?Ot:zt,G=je(),V=Ue({props:r,muiFormControl:G,states:["variant","error"]}),w=V.variant||E,L=s({},r,{variant:w,classes:d}),Q=Xt(L),Y=W(Q,Kt),A=b||{standard:c.jsx(qt,{ownerState:L}),outlined:c.jsx(Ht,{label:R,ownerState:L}),filled:c.jsx(Jt,{ownerState:L})}[w],m=Le(o,ct(A));return c.jsx(p.Fragment,{children:p.cloneElement(A,s({inputComponent:J,inputProps:s({children:a,error:V.error,IconComponent:v,variant:w,type:void 0,multiple:S},x?{id:$}:{autoWidth:l,defaultOpen:C,displayEmpty:I,labelId:P,MenuProps:F,onClose:O,onOpen:f,open:N,renderValue:k,SelectDisplayProps:s({id:$},M)},y,{classes:y?pe(Y,y.classes):Y},b?b.props.inputProps:{})},(S&&x||I)&&w==="outlined"?{notched:!0}:{},{ref:m,className:ce(A.props.className,i,Q.root)},!b&&{variant:w},H))})});Gt.muiName="Select";export{_e as F,Ae as I,ze as O,Gt as S};

package/dist/assets/Select.stories-B8cWbr6v.js

@@ -0,0 +1,233 @@
+import{j as p}from"./iframe-CQjT1fxh.js";import{O as Ee}from"./OdysseyStorybookThemeDecorator-CHlNoX17.js";import{u as ke}from"./useStoryArgOrLocalState-CRQAGSTX.js";import{f as s}from"./fieldComponentPropsMetaData-C9gCwuus.js";import{M as c}from"./Select-CQoJvuLM.js";import{M as Re}from"./Link-Cg_KakDo.js";import"./preload-helper-Dp1pzeXC.js";import"./OdysseyThemeProvider-BA0_xP7N.js";import"./tableRowClasses-Bk1uFtwh.js";import"./WarningFilled-DOHs-JmZ.js";import"./index-C77ZwfYm.js";import"./OdysseyProvider-rboSNY26.js";import"./ScopedCssBaseline-BOa6kM98.js";import"./Field-CqIOaZfg.js";import"./Box-B3rdnavX.js";import"./Box-CnVllI1S.js";import"./List-D0N4Xybp.js";import"./ListItem-BNz1zv6N.js";import"./FormHelperText-CVc1kPQJ.js";import"./FormLabel-CWWbs_c2.js";import"./useIsFocusVisible-D1xCTBdT.js";import"./isHostComponent-DVu5iVWx.js";import"./ButtonBase-Rz8p08Xo.js";import"./TransitionGroupContext-yBqGXZYI.js";import"./ScreenReaderText-toqV93JE.js";import"./visuallyHidden-Dan1xhjv.js";import"./FieldHint-Cs73lQge.js";import"./Typography-CjpHjc10.js";import"./Typography-Jr4Brrb5.js";import"./useUniqueId-DG6rB8dI.js";import"./createUniqueId-BHjR7HQF.js";import"./inputUtils-BBH9ADKa.js";import"./Chip-BgPaZbUf.js";import"./createSvgIcon-CaWcxZng.js";import"./ListSubheader-Dwx7m0BA.js";import"./MenuItem-CpMFWgaz.js";import"./Checkbox-mRntsWEy.js";import"./SwitchBase-C_6ALR3v.js";import"./useControlled-BUhC7uWK.js";import"./Select-DE0mojaE.js";import"./Menu-DB2s3Jn0.js";import"./Portal-DeJFqeW-.js";import"./resolveComponentProps-DGxe9oED.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"./ArrowDropDown-BbLKA4fg.js";import"./InputBase-BYnzr12H.js";import"./Link-thynTosX.js";import"./ExternalLink-3_gWbh_U.js";const{fn:R,screen:Le,userEvent:i}=__STORYBOOK_MODULE_TEST__,r=["Option A","Option B","Option C","Option D","Option E"],we=["None",...r],Ve=we.reduce((t,o)=>(t[o]=o==="None"?"":o,t),{}),Be=[{text:"Group 1",type:"heading"},"Option A","Option B","Option C",{text:"Group 2",type:"heading"},"Option D","Option E"],De=[{text:"Object option A",value:"option-a"},{text:"Object option B",value:"option-b"},{text:"Object option C",value:"option-c"}],Fe=[{text:"English",value:"en",language:"en"},{text:"Español",value:"es",language:"es"},{text:"Français",value:"fr",language:"fr"},{text:"Deutsch",value:"de",language:"de"},{text:"中文",value:"zh",language:"zh"},{text:"日本語",value:"ja",language:"ja"},{text:"한국어",value:"ko",language:"ko"}],Wt={component:c,decorators:[Ee],tags:["autodocs"],argTypes:{ariaDescribedBy:{control:"text",description:"ID of the element that provides additional description for the field",table:{category:"Functional",type:{summary:"string"}}},defaultValue:{control:{type:"text"},description:"If `value` is undefined, the field is uncontrolled and `defaultValue` provides its initial text",table:{category:"Functional",type:{summary:"string | string[]"}}},errorMessage:s.errorMessage,errorMessageList:s.errorMessageList,hasMultipleChoices:{control:"boolean",description:"If `true`, the Select allows multiple selections",table:{readonly:!0,category:"Functional",type:{summary:"boolean"},defaultValue:{summary:"false"}}},hint:s.hint,HintLinkComponent:s.HintLinkComponent,id:s.id,isDisabled:s.isDisabled,isFullWidth:s.isFullWidth,isOptional:s.isOptional,isReadOnly:s.isReadOnly,label:{control:"text",description:"The label text for the select component",table:{category:"Visual",type:{summary:"string"}},type:{name:"string",required:!0}},name:s.name,onBlur:{control:!1,description:"Callback fired when the select component loses focus",table:{category:"Functional",type:{summary:"func"}}},onChange:{control:!1,description:"Callback fired when the value of the select component changes",table:{category:"Functional",type:{summary:"func"}}},onFocus:{control:!1,description:"Callback fired when the select component gains focus",table:{category:"Functional",type:{summary:"func"}}},options:{control:{type:"check"},description:"The options for the select component",options:r,table:{category:"Visual",type:{summary:"(string | SelectOption)[]"}}},testId:{control:"text",description:"Adds `data-se` attribute",table:{category:"Functional",type:{summary:"string"}}},translate:{control:{type:"radio"},options:["yes","no"],description:"Sets the HTML `translate` attribute on the rendered field",table:{category:"Functional",type:{summary:'"yes" | "no"'}}},value:{control:{type:"radio"},options:we,mapping:Ve,description:"If `value` is provided, you control the input externally and must handle updates with `onChange`.",table:{category:"Functional",type:{summary:"string | string[]"}}}},args:{errorMessageList:[],hint:"Hint text",label:"Label",onBlur:R(),onChange:R(),onFocus:R(),options:r,isDisabled:!1,isFullWidth:!1,isOptional:!1,hasMultipleChoices:!1,value:"None"}},n={args:{hasMultipleChoices:!1},render:function(o,a){const e=o,{value:l,setValue:L}=ke({args:e,context:a,argKey:"value",defaultValue:typeof e.value=="string"?e.value:""}),w=E=>{L(E.target.value)};return p.jsx(c,{...e,hasMultipleChoices:!1,onChange:w,value:l})}},V={args:{hasMultipleChoices:!0},render:function(o,a){const e=o,{value:l,setValue:L}=ke({args:e,context:a,argKey:"value",defaultValue:Array.isArray(e.value)?e.value:[]}),w=E=>{L(E.target.value)};return p.jsx(c,{...e,hasMultipleChoices:!0,onChange:w,value:l})}},u={...n,play:async({canvasElement:t,step:o})=>{await o("Select first option",async()=>{const a=t.querySelector('[aria-haspopup="listbox"]');if(!a)return;await i.click(a);const l=Le.getByRole("listbox").children[0];await i.click(l),await i.tab()})},tags:["!autodocs"]},m={...n,args:{isDisabled:!0}},d={...n,args:{errorMessage:"Select an option."}},g={...n,args:{errorMessage:"Select an option.",errorMessageList:["Error A","Error B"]}},y={...n,args:{isFullWidth:!0}},h={...n,args:{HintLinkComponent:p.jsx(Re,{href:"#",children:"Link"})}},b={...n,args:{options:["",...r],value:"None"},argTypes:{options:{control:!1}},parameters:{docs:{description:{story:"Select supports an empty string entry so the first selection renders no visible value"}}}},f={...n,args:{options:De,value:"option-b"},argTypes:{options:{control:!1},value:{control:!1}},parameters:{docs:{description:{story:"Select supports passing option objects with distinct text and value properties"}}}},O={...n,args:{options:Be},argTypes:{options:{control:!1}},parameters:{docs:{description:{story:'Options marked with `type: "heading"` create non-selectable group labels'}}}},v={...V,args:{hasMultipleChoices:!0,value:[]},argTypes:{value:{control:{type:"check"},options:r}},play:async({canvasElement:t,step:o})=>{await o("Select multiple options",async()=>{const a=t.querySelector('[aria-haspopup="listbox"]');if(!a)return;await i.click(a);const e=Le.getByRole("listbox");await i.click(e.children[0]),await i.click(e.children[1]),await i.tab()})}},S={...n,args:{isReadOnly:!0,value:"Option C"}},x={...V,args:{hasMultipleChoices:!0,isReadOnly:!0,value:["Option A","Option C","Option D"]},argTypes:{value:{control:{type:"check"},options:r}}},M={...V,args:{hasMultipleChoices:!0,isReadOnly:!0,value:["Option B","Option E"]},argTypes:{value:{control:{type:"check"},options:r}}},T={...n,args:{label:"Label",options:Fe,value:""},argTypes:{options:{control:!1}},parameters:{docs:{description:{story:"Showcase the Select component with options for multiple different languages"}}}},C={args:{defaultValue:"Option B",value:void 0,label:"Label",options:r},argTypes:{value:{control:!1},defaultValue:{control:{type:"radio"},options:r}},parameters:{docs:{description:{story:"Use the uncontrolled pattern for simple forms where you do not need to react to user selection changes"}}},render:t=>p.jsx(c,{...t})},k={args:{defaultValue:["Option B","Option C"],hasMultipleChoices:!0,value:void 0,label:"Label",options:r},argTypes:{value:{control:!1},defaultValue:{control:{type:"check"},options:r}},render:t=>p.jsx(c,{...t})};var B,D,F;u.parameters={...u.parameters,docs:{...(B=u.parameters)==null?void 0:B.docs,source:{originalSource:`{
+  ...singleSelectTemplate,
+  play: async ({
+    canvasElement,
+    step
+  }) => {
+    await step("Select first option", async () => {
+      const trigger = canvasElement.querySelector('[aria-haspopup="listbox"]');
+      if (!trigger) {
+        return;
+      }
+      await userEvent.click(trigger);
+      const listbox = screen.getByRole("listbox");
+      const firstOption = listbox.children[0];
+      await userEvent.click(firstOption);
+      await userEvent.tab();
+    });
+  },
+  tags: ["!autodocs"]
+}`,...(F=(D=u.parameters)==null?void 0:D.docs)==null?void 0:F.source}}};var j,A,H;m.parameters={...m.parameters,docs:{...(j=m.parameters)==null?void 0:j.docs,source:{originalSource:`{
+  ...singleSelectTemplate,
+  args: {
+    isDisabled: true
+  }
+}`,...(H=(A=m.parameters)==null?void 0:A.docs)==null?void 0:H.source}}};var _,U,W;d.parameters={...d.parameters,docs:{...(_=d.parameters)==null?void 0:_.docs,source:{originalSource:`{
+  ...singleSelectTemplate,
+  args: {
+    errorMessage: "Select an option."
+  }
+}`,...(W=(U=d.parameters)==null?void 0:U.docs)==null?void 0:W.source}}};var q,I,N;g.parameters={...g.parameters,docs:{...(q=g.parameters)==null?void 0:q.docs,source:{originalSource:`{
+  ...singleSelectTemplate,
+  args: {
+    errorMessage: "Select an option.",
+    errorMessageList: ["Error A", "Error B"]
+  }
+}`,...(N=(I=g.parameters)==null?void 0:I.docs)==null?void 0:N.source}}};var z,G,K;y.parameters={...y.parameters,docs:{...(z=y.parameters)==null?void 0:z.docs,source:{originalSource:`{
+  ...singleSelectTemplate,
+  args: {
+    isFullWidth: true
+  }
+}`,...(K=(G=y.parameters)==null?void 0:G.docs)==null?void 0:K.source}}};var P,Y,J;h.parameters={...h.parameters,docs:{...(P=h.parameters)==null?void 0:P.docs,source:{originalSource:`{
+  ...singleSelectTemplate,
+  args: {
+    HintLinkComponent: <Link href="#">Link</Link>
+  }
+}`,...(J=(Y=h.parameters)==null?void 0:Y.docs)==null?void 0:J.source}}};var Q,X,Z;b.parameters={...b.parameters,docs:{...(Q=b.parameters)==null?void 0:Q.docs,source:{originalSource:`{
+  ...singleSelectTemplate,
+  args: {
+    options: ["", ...baseOptionLabels],
+    value: "None"
+  },
+  argTypes: {
+    options: {
+      control: false
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Select supports an empty string entry so the first selection renders no visible value"
+      }
+    }
+  }
+}`,...(Z=(X=b.parameters)==null?void 0:X.docs)==null?void 0:Z.source}}};var $,ee,te;f.parameters={...f.parameters,docs:{...($=f.parameters)==null?void 0:$.docs,source:{originalSource:`{
+  ...singleSelectTemplate,
+  args: {
+    options: objectOptions,
+    value: "option-b"
+  },
+  argTypes: {
+    options: {
+      control: false
+    },
+    value: {
+      control: false
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Select supports passing option objects with distinct text and value properties"
+      }
+    }
+  }
+}`,...(te=(ee=f.parameters)==null?void 0:ee.docs)==null?void 0:te.source}}};var oe,re,ne;O.parameters={...O.parameters,docs:{...(oe=O.parameters)==null?void 0:oe.docs,source:{originalSource:`{
+  ...singleSelectTemplate,
+  args: {
+    options: groupedOptions
+  },
+  argTypes: {
+    options: {
+      control: false
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Options marked with \`type: "heading"\` create non-selectable group labels'
+      }
+    }
+  }
+}`,...(ne=(re=O.parameters)==null?void 0:re.docs)==null?void 0:ne.source}}};var se,ae,ie;v.parameters={...v.parameters,docs:{...(se=v.parameters)==null?void 0:se.docs,source:{originalSource:`{
+  ...multiSelectTemplate,
+  args: {
+    hasMultipleChoices: true,
+    value: []
+  },
+  argTypes: {
+    value: {
+      control: {
+        type: "check"
+      },
+      options: baseOptionLabels
+    }
+  },
+  play: async ({
+    canvasElement,
+    step
+  }) => {
+    await step("Select multiple options", async () => {
+      const trigger = canvasElement.querySelector('[aria-haspopup="listbox"]');
+      if (!trigger) {
+        return;
+      }
+      await userEvent.click(trigger);
+      const listbox = screen.getByRole("listbox");
+      await userEvent.click(listbox.children[0]);
+      await userEvent.click(listbox.children[1]);
+      await userEvent.tab();
+    });
+  }
+}`,...(ie=(ae=v.parameters)==null?void 0:ae.docs)==null?void 0:ie.source}}};var le,pe,ce;S.parameters={...S.parameters,docs:{...(le=S.parameters)==null?void 0:le.docs,source:{originalSource:`{
+  ...singleSelectTemplate,
+  args: {
+    isReadOnly: true,
+    value: "Option C"
+  }
+}`,...(ce=(pe=S.parameters)==null?void 0:pe.docs)==null?void 0:ce.source}}};var ue,me,de;x.parameters={...x.parameters,docs:{...(ue=x.parameters)==null?void 0:ue.docs,source:{originalSource:`{
+  ...multiSelectTemplate,
+  args: {
+    hasMultipleChoices: true,
+    isReadOnly: true,
+    value: ["Option A", "Option C", "Option D"]
+  },
+  argTypes: {
+    value: {
+      control: {
+        type: "check"
+      },
+      options: baseOptionLabels
+    }
+  }
+}`,...(de=(me=x.parameters)==null?void 0:me.docs)==null?void 0:de.source}}};var ge,ye,he;M.parameters={...M.parameters,docs:{...(ge=M.parameters)==null?void 0:ge.docs,source:{originalSource:`{
+  ...multiSelectTemplate,
+  args: {
+    hasMultipleChoices: true,
+    isReadOnly: true,
+    value: ["Option B", "Option E"]
+  },
+  argTypes: {
+    value: {
+      control: {
+        type: "check"
+      },
+      options: baseOptionLabels
+    }
+  }
+}`,...(he=(ye=M.parameters)==null?void 0:ye.docs)==null?void 0:he.source}}};var be,fe,Oe;T.parameters={...T.parameters,docs:{...(be=T.parameters)==null?void 0:be.docs,source:{originalSource:`{
+  ...singleSelectTemplate,
+  args: {
+    label: "Label",
+    options: languageOptions,
+    value: ""
+  },
+  argTypes: {
+    options: {
+      control: false
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Showcase the Select component with options for multiple different languages"
+      }
+    }
+  }
+}`,...(Oe=(fe=T.parameters)==null?void 0:fe.docs)==null?void 0:Oe.source}}};var ve,Se,xe;C.parameters={...C.parameters,docs:{...(ve=C.parameters)==null?void 0:ve.docs,source:{originalSource:`{
+  args: {
+    defaultValue: "Option B",
+    value: undefined,
+    label: "Label",
+    options: baseOptionLabels
+  },
+  argTypes: {
+    value: {
+      control: false
+    },
+    defaultValue: {
+      control: {
+        type: "radio"
+      },
+      options: baseOptionLabels
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Use the uncontrolled pattern for simple forms where you do not need to react to user selection changes"
+      }
+    }
+  },
+  render: args => <Select {...args as SelectStoryArgs} />
+}`,...(xe=(Se=C.parameters)==null?void 0:Se.docs)==null?void 0:xe.source}}};var Me,Te,Ce;k.parameters={...k.parameters,docs:{...(Me=k.parameters)==null?void 0:Me.docs,source:{originalSource:`{
+  args: {
+    defaultValue: ["Option B", "Option C"],
+    hasMultipleChoices: true,
+    value: undefined,
+    label: "Label",
+    options: baseOptionLabels
+  },
+  argTypes: {
+    value: {
+      control: false
+    },
+    defaultValue: {
+      control: {
+        type: "check"
+      },
+      options: baseOptionLabels
+    }
+  },
+  render: args => <Select {...args as SelectStoryArgs} />
+}`,...(Ce=(Te=k.parameters)==null?void 0:Te.docs)==null?void 0:Ce.source}}};const qt=["Default","Disabled","Error","ErrorsList","FullWidth","HintLink","EmptyOption","OptionsObject","OptionsGrouped","MultiSelect","ReadOnly","ReadOnlyMultiSelect","ReadOnlyMultiSelectValue","MultipleLanguages","Uncontrolled","UncontrolledMultiSelect"];export{u as Default,m as Disabled,b as EmptyOption,d as Error,g as ErrorsList,y as FullWidth,h as HintLink,v as MultiSelect,T as MultipleLanguages,O as OptionsGrouped,f as OptionsObject,S as ReadOnly,x as ReadOnlyMultiSelect,M as ReadOnlyMultiSelectValue,C as Uncontrolled,k as UncontrolledMultiSelect,qt as __namedExportsOrder,Wt as default};