@okta/odyssey-react-mui 1.49.0 → 1.51.0

package/dist/assets/SideNav.stories-ciX1pArE.js

@@ -1,207 +0,0 @@
-import{j as e}from"./jsx-runtime-CnH95YSl.js";import{a as Z}from"./index-B-lxVbXh.js";import{c as $,w as ee,e as n,a as f,u as x}from"./index-BJMTVygn.js";import{r as I}from"./index-NdkWRN8K.js";import{P as S}from"./PlaceholderLogo-JfVvgA23.js";import{O as te}from"./OdysseyStorybookThemeDecorator-BuDiOG2V.js";import{M as o}from"./SideNav-5pMdKSEl.js";import{M as Y,a as J,b as y,c as oe,d as ae,e as ne,f as se}from"./Server-Ch5aeRtt.js";import{M as re}from"./Box-1mvP3NLW.js";import{f as ie,d as le}from"./Typography-Cz6D417Y.js";import{M as de}from"./User-CyxEAfVT.js";import{M as Q}from"./Home-la7Lmt_L.js";import{M as C}from"./Folder-e-po0U54.js";import{M as ce}from"./Download-Zlhupksh.js";import{M as me}from"./Clock-17ua7UAW.js";import{M as pe}from"./Settings-2rTKyez8.js";const ue=()=>e.jsxs(re,{sx:{border:"1px dashed gray"},children:[e.jsx(ie,{children:"Your custom footer content goes here"}),e.jsx(le,{children:"Dashed border to show content box. Not present outside of this example"})]}),ge={component:o,decorators:[te],parameters:{layout:"fullscreen"},tags:["autodocs"],argTypes:{appName:{control:"text",description:"Header text for the side nav",table:{type:{summary:"string"}}},footerComponent:{description:"Custom footer component to render in place of footer items."},footerItems:{description:"",table:{type:{summary:"Array<SideNavFooterItem>"}}},hasCustomFooter:{control:"boolean",description:"Defines if a custom footer should be visible when available.",table:{type:{summary:"boolean"}}},isCollapsible:{control:"boolean",description:"Controls whether the side nav is collapsible",table:{type:{summary:"boolean"}}},isCollapsed:{control:"boolean",description:"Controls whether the side nav is collapsed",table:{type:{summary:"boolean"}}},isCompact:{control:"boolean",description:"Controls whether the side nav uses compact layout",table:{type:{summary:"boolean"}}},isLoading:{control:"boolean",description:"Controls whether the side nav shows the skeleton loader.",table:{type:{summary:"boolean"}}},logoProps:{description:"Props passed in to render custom logo and/or link",table:{type:{summary:"href?: string; logoSrcUrl?: string; altText?: string; logoComponent?: ReactElement"}}},onCollapse:{description:"Callback to be triggered when the side nav is collapsed"},onExpand:{description:"Callback to be triggered when the side nav is expanded"},onSort:{description:"Callback to be triggered when a nested side nav item inside is reordered. Returns the new items list"},sideNavItems:{description:"",table:{type:{summary:"Array<SideNavItem>"}}}},args:{appName:"Admin Console",isCollapsible:!0,isCollapsed:!1,isCompact:!1,sideNavItems:[{id:"item1",label:"Add new folder",endIcon:e.jsx(Y,{}),onClick:()=>{}},{id:"item2",label:"Admin",isSectionHeader:!0},{id:"item3",href:"/?path=/docs/mui-components-typography--docs",label:"Users",startIcon:e.jsx(de,{})},{id:"item4",label:"Dashboard",startIcon:e.jsx(Q,{}),isDisabled:!0,nestedNavItems:[{id:"item4-1",href:"/",label:"Home"}]},{id:"item5",href:"/",label:"Applications",startIcon:e.jsx(J,{})},{id:"item6",label:"Onboarding",startIcon:e.jsx(C,{}),nestedNavItems:[{id:"item6-1",href:"/",label:"Start",translate:"no"},{id:"item6-2",href:"/",label:"Tasks"},{id:"item6-3",href:"/",label:"Getting Started"}]},{id:"item7",href:"/",label:"Directory",startIcon:e.jsx(y,{})},{id:"item8",label:"Resource Management",isSectionHeader:!0},{id:"item9",href:"/",label:"Kubernetes",startIcon:e.jsx(oe,{}),severity:"info",statusLabel:"BETA"},{id:"item10",href:"/",label:"Reports",startIcon:e.jsx(ce,{})},{id:"item11",href:"/",label:"Identify Governance",target:"_blank",isDisabled:!0,startIcon:e.jsx(ae,{})},{id:"item12",href:"/",label:"Workflows",target:"_blank",startIcon:e.jsx(me,{})},{id:"item13",label:"Security Administration",isSectionHeader:!0},{id:"item14",href:"/",label:"Security",startIcon:e.jsx(ne,{})},{id:"item15",label:"Settings",isDefaultExpanded:!0,isSortable:!0,startIcon:e.jsx(pe,{}),nestedNavItems:[{id:"item15-1",href:"/",label:"General",translate:"no"},{id:"item15-2",href:"/",label:"Custom Domain",isSelected:!0},{id:"item15-3",label:"Account Management",translate:"no"},{id:"item15-4",href:"/",label:"Authentication Policies",isDisabled:!0},{id:"item15-5",href:"/",label:"IDP Configuration"}]},{id:"item16",href:"/",label:"System Configuration",startIcon:e.jsx(C,{})},{id:"item17",href:"/",label:"Really Long Item Name With Spaces",startIcon:e.jsx(y,{})},{id:"item18",href:"/",label:"ReallyLongSingleItemNameWithoutSpaces",startIcon:e.jsx(y,{})}],footerItems:[{id:"footer-item-1",label:"Docs",href:"/"},{id:"footer-item-2",label:"Privacy"},{id:"footer-item-3",label:"Security",href:"/"}]}},l={render:t=>e.jsx("div",{style:{height:"100vh"},children:e.jsx(o,{...t})}),play:async({canvasElement:t,step:s})=>{$({testIdAttribute:"data-se"});const r=ee(t),a=r.getByRole("button",{name:"Close navigation"}),b=r.getByRole("navigation",{name:"Main navigation"}),i=r.getByTestId("scrollable-region");await s("Side Nav Should be scrolled as expected",async()=>{await new Promise(v=>setTimeout(v,100)),i.scrollTop!==0?n(i.scrollTop).not.toBe(0):await f(()=>{n(i.scrollTop).not.toBe(0)},{timeout:1e3})}),await s("Side Nav Collapse",async()=>{await x.click(a),await f(()=>{n(a.ariaExpanded).toEqual("false"),n(b).toHaveStyle({width:0})})}),await s("Side Nav Expand",async()=>{await x.click(a),await f(()=>{n(a.ariaExpanded).toEqual("true"),n(b).toBeVisible()})})}},d={args:{appName:void 0,logoProps:{logoComponent:e.jsx(S.One,{})},sideNavItems:[{href:"#",id:"sortable-item1",label:"My Apps",onClick:t=>{t.preventDefault(),Z('onClick: "My Apps"')(t)},isSortable:!0,startIcon:e.jsx(Q,{}),nestedNavItems:[{id:"sortable-item1-1",label:"Recently Used",isSortable:!1},{id:"sortable-item1-2",label:"Work"},{id:"sortable-item1-3",label:"Group 1"},{id:"sortable-item1-4",label:"Group 2"},{id:"sortable-item1-5",label:"Add section",endIcon:e.jsx(Y,{}),isSortable:!1}]},{id:"sortable-item2",label:"Notifications",startIcon:e.jsx(se,{}),count:1},{id:"sortable-item3",label:"Add apps",startIcon:e.jsx(J,{})}]},render:t=>e.jsx("div",{style:{height:"100vh"},children:e.jsx(o,{...t})})},c={args:{isLoading:!0},render:t=>e.jsx("div",{style:{height:"100vh"},children:e.jsx(o,{...t})})},m={args:{logoProps:{logoComponent:e.jsx(S.One,{})}},render:t=>e.jsx("div",{style:{height:"100vh"},children:e.jsx(o,{...t})})},p={args:{logoProps:{imageUrl:"https://placehold.co/600x60",imageAltText:"My custom image logo"}},render:t=>e.jsx("div",{style:{height:"100vh"},children:e.jsx(o,{...t})})},u={args:{logoProps:{href:"/",logoComponent:e.jsx(S.One,{}),ariaLabel:"My custom image logo"}},render:t=>e.jsx("div",{style:{height:"100vh"},children:e.jsx(o,{...t})})},g={args:{footerItems:void 0,hasCustomFooter:!0,footerComponent:e.jsx(ue,{})},render:t=>e.jsx("div",{style:{height:"100vh"},children:e.jsx(o,{...t})})},h={args:{isLoading:!0},render:function({sideNavItems:s,isLoading:r,...a}){const[b,i]=I.useState([]),[v,X]=I.useState(r);return I.useEffect(()=>{setTimeout(()=>{i(s||[]),X(!1)},1e3)}),e.jsx("div",{style:{height:"100vh"},children:e.jsx(o,{isLoading:v,sideNavItems:b,...a})})}};var N,w,j;l.parameters={...l.parameters,docs:{...(N=l.parameters)==null?void 0:N.docs,source:{originalSource:`{
-  render: props => {
-    return <div style={{
-      height: "100vh"
-    }}>
-        <SideNav {...props} />
-      </div>;
-  },
-  play: async ({
-    canvasElement,
-    step
-  }: PlaywrightProps<SideNavProps>) => {
-    configure({
-      testIdAttribute: "data-se"
-    });
-    const canvas = within(canvasElement);
-    const toggleButton = canvas.getByRole("button", {
-      name: "Close navigation"
-    });
-    const navElement = canvas.getByRole("navigation", {
-      name: "Main navigation"
-    });
-    // const collapsedRegion = canvas.getByTestId("collapsed-region");
-    const scrollableRegion = canvas.getByTestId("scrollable-region");
-
-    /**
-     * The scroll behavior in SideNav is such that if an item has isSelected and the item
-     * is not on screen initially, it will scroll to make that item be visible on the screen.
-     * So, we should expect that the scrollable container (found by data-se="scrollable-region")
-     * should have a non-zero scrollTop once this operation has completed.
-     */
-    await step("Side Nav Should be scrolled as expected", async () => {
-      // Add a small delay to allow initial rendering and scrolling
-      await new Promise(resolve => setTimeout(resolve, 100));
-
-      // On initial load, scrollTop will be zero. Then, once the scroll operation completes,
-      // it should be non-zero.
-      if (scrollableRegion.scrollTop !== 0) {
-        expect(scrollableRegion.scrollTop).not.toBe(0);
-      } else {
-        await waitFor(() => {
-          expect(scrollableRegion.scrollTop).not.toBe(0);
-        }, {
-          timeout: 1000
-        });
-      }
-    });
-    await step("Side Nav Collapse", async () => {
-      await userEvent.click(toggleButton);
-      await waitFor(() => {
-        expect(toggleButton.ariaExpanded).toEqual("false");
-        expect(navElement).toHaveStyle({
-          width: 0
-        });
-      });
-    });
-    await step("Side Nav Expand", async () => {
-      await userEvent.click(toggleButton);
-      await waitFor(() => {
-        expect(toggleButton.ariaExpanded).toEqual("true");
-        expect(navElement).toBeVisible();
-      });
-    });
-  }
-}`,...(j=(w=l.parameters)==null?void 0:w.docs)==null?void 0:j.source}}};var M,L,E;d.parameters={...d.parameters,docs:{...(M=d.parameters)==null?void 0:M.docs,source:{originalSource:`{
-  args: {
-    appName: undefined,
-    logoProps: {
-      logoComponent: <PlaceholderLogo.One />
-    },
-    sideNavItems: [{
-      href: "#",
-      id: "sortable-item1",
-      label: "My Apps",
-      onClick: event => {
-        event.preventDefault();
-        action('onClick: "My Apps"')(event);
-      },
-      isSortable: true,
-      startIcon: <HomeIcon />,
-      nestedNavItems: [{
-        id: "sortable-item1-1",
-        label: "Recently Used",
-        isSortable: false
-      }, {
-        id: "sortable-item1-2",
-        label: "Work"
-      }, {
-        id: "sortable-item1-3",
-        label: "Group 1"
-      }, {
-        id: "sortable-item1-4",
-        label: "Group 2"
-      }, {
-        id: "sortable-item1-5",
-        label: "Add section",
-        endIcon: <AddCircleIcon />,
-        isSortable: false
-      }]
-    }, {
-      id: "sortable-item2",
-      label: "Notifications",
-      startIcon: <NotificationIcon />,
-      count: 1
-    }, {
-      id: "sortable-item3",
-      label: "Add apps",
-      startIcon: <AppsIcon />
-    }]
-  },
-  render: props => {
-    return <div style={{
-      height: "100vh"
-    }}>
-        <SideNav {...props} />
-      </div>;
-  }
-}`,...(E=(L=d.parameters)==null?void 0:L.docs)==null?void 0:E.source}}};var A,k,T;c.parameters={...c.parameters,docs:{...(A=c.parameters)==null?void 0:A.docs,source:{originalSource:`{
-  args: {
-    isLoading: true
-  },
-  render: props => {
-    return <div style={{
-      height: "100vh"
-    }}>
-        <SideNav {...props} />
-      </div>;
-  }
-}`,...(T=(k=c.parameters)==null?void 0:k.docs)==null?void 0:T.source}}};var P,z,B;m.parameters={...m.parameters,docs:{...(P=m.parameters)==null?void 0:P.docs,source:{originalSource:`{
-  args: {
-    logoProps: {
-      logoComponent: <PlaceholderLogo.One />
-    }
-  },
-  render: props => {
-    return <div style={{
-      height: "100vh"
-    }}>
-        <SideNav {...props} />
-      </div>;
-  }
-}`,...(B=(z=m.parameters)==null?void 0:z.docs)==null?void 0:B.source}}};var D,R,F;p.parameters={...p.parameters,docs:{...(D=p.parameters)==null?void 0:D.docs,source:{originalSource:`{
-  args: {
-    logoProps: {
-      imageUrl: "https://placehold.co/600x60",
-      imageAltText: "My custom image logo"
-    }
-  },
-  render: props => {
-    return <div style={{
-      height: "100vh"
-    }}>
-        <SideNav {...props} />
-      </div>;
-  }
-}`,...(F=(R=p.parameters)==null?void 0:R.docs)==null?void 0:F.source}}};var O,H,_;u.parameters={...u.parameters,docs:{...(O=u.parameters)==null?void 0:O.docs,source:{originalSource:`{
-  args: {
-    logoProps: {
-      href: "/",
-      logoComponent: <PlaceholderLogo.One />,
-      ariaLabel: "My custom image logo"
-    }
-  },
-  render: props => {
-    return <div style={{
-      height: "100vh"
-    }}>
-        <SideNav {...props} />
-      </div>;
-  }
-}`,...(_=(H=u.parameters)==null?void 0:H.docs)==null?void 0:_.source}}};var G,U,W;g.parameters={...g.parameters,docs:{...(G=g.parameters)==null?void 0:G.docs,source:{originalSource:`{
-  args: {
-    footerItems: undefined,
-    hasCustomFooter: true,
-    footerComponent: <CustomFooterComponent />
-  },
-  render: props => {
-    return <div style={{
-      height: "100vh"
-    }}>
-        <SideNav {...props} />
-      </div>;
-  }
-}`,...(W=(U=g.parameters)==null?void 0:U.docs)==null?void 0:W.source}}};var q,V,K;h.parameters={...h.parameters,docs:{...(q=h.parameters)==null?void 0:q.docs,source:{originalSource:`{
-  args: {
-    isLoading: true
-  },
-  render: function C({
-    sideNavItems,
-    isLoading,
-    ...props
-  }) {
-    const [sideNavItemsInState, setSideNavItemsInState] = useState<SideNavItem[]>([]);
-    const [isLoadingInState, setIsLoadingInState] = useState(isLoading);
-    useEffect(() => {
-      setTimeout(() => {
-        setSideNavItemsInState(sideNavItems || []);
-        setIsLoadingInState(false);
-      }, 1000);
-    });
-    return <div style={{
-      height: "100vh"
-    }}>
-        <SideNav isLoading={isLoadingInState} sideNavItems={sideNavItemsInState} {...props} />
-      </div>;
-  }
-}`,...(K=(V=h.parameters)==null?void 0:V.docs)==null?void 0:K.source}}};const he=["Default","SortableSideNav","Loading","CustomLogoElement","CustomLogoImage","LogoWithLink","CustomFooterContent","DelayedSideNavItems"],Te=Object.freeze(Object.defineProperty({__proto__:null,CustomFooterContent:g,CustomLogoElement:m,CustomLogoImage:p,Default:l,DelayedSideNavItems:h,Loading:c,LogoWithLink:u,SortableSideNav:d,__namedExportsOrder:he,default:ge},Symbol.toStringTag,{value:"Module"}));export{Te as S};

package/dist/assets/Stack.stories-CYylNLHT.js

@@ -1 +0,0 @@
-import{j as t}from"./jsx-runtime-CnH95YSl.js";import{u as d,h as l}from"./OdysseyThemeProvider-Bh0Bu-2o.js";import{O as u}from"./OdysseyStorybookThemeDecorator-BuDiOG2V.js";import{r as h}from"./index-NdkWRN8K.js";import{S as x}from"./Stack-B7OGvu7C.js";import"./_commonjsHelpers-gnU0ypJ3.js";import"./index-BJTM6NaI.js";import"./OdysseyProvider-qIn9QVYS.js";import"./createStyled-D6bTcpHC.js";import"./useThemeProps-DwvbKxez.js";const y=[0,1,2,3,4,5,6,7,8,9],s=["row","row-reverse","column","column-reverse"],g=({children:e,direction:m="column",spacing:p=2})=>t.jsx(x,{direction:m,spacing:p,children:e}),i=h.memo(g);i.displayName="Stack";const r=l.div(({odysseyDesignTokens:e})=>({display:"flex",alignItems:"center",justifyContent:"center",width:e.Spacing8,height:e.Spacing8,backgroundColor:e.HueNeutral100,border:`1px dashed ${e.PalettePrimaryDarker}`,borderRadius:e.BorderRadiusMain})),f=()=>{const e=d();return t.jsxs(t.Fragment,{children:[t.jsx(r,{odysseyDesignTokens:e,children:"1"}),t.jsx(r,{odysseyDesignTokens:e,children:"2"}),t.jsx(r,{odysseyDesignTokens:e,children:"3"}),t.jsx(r,{odysseyDesignTokens:e,children:"4"})]})},D={component:i,decorators:[u],tags:["autodocs"],argTypes:{children:{control:t.jsx(t.Fragment,{}),description:"The content of the component",table:{type:{summary:"ReactNode"}}},direction:{options:s,control:{type:"radio"},description:"The flex-direction applied to the Stack",table:{type:{summary:s.join(" | ")}},type:{name:"other",value:"radio"}},spacing:{control:"select",options:y.map(e=>e)},sx:{control:"object",description:"The system prop that allows defining system overrides as well as additional CSS styles. See the [MUI `sx` page](https://mui.com/system/getting-started/the-sx-prop/) for more details.",table:{type:{summary:"object"}}}},args:{children:t.jsx(f,{}),spacing:2}},o={};var a,c,n;o.parameters={...o.parameters,docs:{...(a=o.parameters)==null?void 0:a.docs,source:{originalSource:"{}",...(n=(c=o.parameters)==null?void 0:c.docs)==null?void 0:n.source}}};const E=["Default"];export{o as Default,E as __namedExportsOrder,D as default};

package/dist/assets/Switch.stories-hjVvL7UR.js

@@ -1,61 +0,0 @@
-import{j as o}from"./jsx-runtime-CnH95YSl.js";import{w as it,u as O,e as ct}from"./index-BJMTVygn.js";import{r as s}from"./index-NdkWRN8K.js";import{a as st}from"./axeRun-B-LchFqf.js";import{O as lt}from"./OdysseyStorybookThemeDecorator-BuDiOG2V.js";import{f as m}from"./fieldComponentPropsMetaData-BqbNLw6V.js";import{K as ut,u as J,h as l,M as dt}from"./OdysseyThemeProvider-Bh0Bu-2o.js";import{M as ht}from"./Box-1mvP3NLW.js";import{M as pt}from"./FieldHint-B3Jif_Up.js";import{g as mt,C as bt}from"./inputUtils-Dbi8XkA6.js";import{u as ft}from"./useUniqueId-Bsgqe1tm.js";import{F as wt}from"./FormLabel-CiGre9wK.js";import{M as Ct}from"./Link-BDoLypER.js";import"./_commonjsHelpers-gnU0ypJ3.js";import"./axe-4JP0vCEZ.js";import"./index-BJTM6NaI.js";import"./OdysseyProvider-qIn9QVYS.js";import"./Box-BcMTQ_R2.js";import"./createBox-Dxawkfow.js";import"./FormHelperText-CsNAE1E3.js";import"./useFormControl-BMISTZuX.js";import"./createUniqueId-ByTaVY63.js";import"./Link-DNIf0luC.js";import"./useIsFocusVisible-DH0qxT5e.js";import"./Typography-ClQ35Rr-.js";import"./ExternalLink-D0l1c5Cz.js";/*!
- * Copyright (c) 2022-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 kt=e=>o.jsx(Ct,{...e,variant:"default"}),Q=s.memo(kt);Q.displayName="HintLink";/*!
- * Copyright (c) 2022-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=e=>Number(e.replace(/rem$/,"")),w=e=>e/14,{CONTROLLED:H}=bt,b=["isChecked","isDisabled","isFullWidth","isReadOnly","odysseyDesignTokens"],St=l("div",{shouldForwardProp:e=>!b.includes(e)})(({isFullWidth:e,odysseyDesignTokens:r})=>({display:"flex",alignItems:"flex-start",justifyContent:"space-between",maxWidth:e?"100%":r.TypographyLineLengthMax})),xt=l.div({position:"relative"}),gt=l(wt,{shouldForwardProp:e=>!b.includes(e)})(({isDisabled:e,isReadOnly:r,odysseyDesignTokens:a})=>({display:"block",margin:0,color:a.PaletteNeutralDark,...e&&{color:a.TypographyColorDisabled,p:{color:a.TypographyColorDisabled},a:{color:`${a.TypographyColorDisabled} !important`}},...r&&{color:a.HueNeutral700,p:{color:a.HueNeutral700},a:{color:`${a.HueNeutral700} !important`}}})),vt=l("div",{shouldForwardProp:e=>!b.includes(e)})(({isChecked:e,isDisabled:r,isReadOnly:a,odysseyDesignTokens:t})=>({position:"relative",width:t.Spacing7,height:`calc(${t.Spacing4} + ${t.Spacing1})`,borderRadius:t.BorderRadiusOuter,backgroundColor:t.HueNeutral300,transition:`background-color ${t.TransitionDurationMain}`,...r&&{backgroundColor:t.HueNeutral200},...a&&{backgroundColor:t.HueNeutral600},...e&&!r&&!a&&{backgroundColor:t.PaletteSuccessLight}})),yt=l("span",{shouldForwardProp:e=>!b.includes(e)})(({isChecked:e,isDisabled:r,isReadOnly:a,odysseyDesignTokens:t})=>{const i=w(3),c=D(t.Spacing7),u=D(t.Spacing4)-w(2),n=c-u-i*2;return{position:"absolute",top:"50%",left:`${i}rem`,width:`calc(${t.Spacing4} - ${w(2)}rem)`,height:`calc(${t.Spacing4} - ${w(2)}rem)`,borderRadius:t.BorderRadiusRound,backgroundColor:t.HueNeutralWhite,transform:"translate3d(0, -50%, 0)",transition:`transform ${t.TransitionDurationMain}`,...r&&{backgroundColor:t.HueNeutral50},...a&&{backgroundColor:t.HueNeutral400},...e&&{transform:`translate3d(${n}rem, -50%, 0)`}}}),$t=l(dt,{shouldForwardProp:e=>!b.includes(e)})(({isChecked:e,isDisabled:r,isReadOnly:a,odysseyDesignTokens:t})=>({position:"absolute",top:"50%",left:3,width:t.Spacing4,transform:"translateY(-50%)",transition:`opacity ${t.TransitionDurationMain}`,opacity:0,path:{fill:t.HueNeutralWhite},...e&&{opacity:1},...(r||a)&&{path:{fill:t.HueNeutral50}}})),Ht=l.input(({odysseyDesignTokens:e,isReadOnly:r})=>({position:"absolute",top:0,left:0,width:"100%",height:"100%",margin:0,opacity:0,cursor:r?"default":"pointer",zIndex:2,"&:focus-visible":{"~ [data-switch-track='true']":{boxShadow:`0 0 0 2px ${e.HueNeutralWhite}, 0 0 0 4px ${e.PalettePrimaryMain}`}}})),T=({hint:e,hintId:r,HintLinkComponent:a,inputId:t,isDisabled:i,label:c,isReadOnly:u})=>{const n=J();return o.jsx(o.Fragment,{children:o.jsxs(gt,{htmlFor:t,isDisabled:i,isReadOnly:u,odysseyDesignTokens:n,children:[c,e&&o.jsx(pt,{id:r,LinkComponent:a,text:e})]})})},Lt=s.memo(T);T.displayName="SwitchLabel";const Mt=({hint:e,HintLinkComponent:r,id:a,isChecked:t,isDefaultChecked:i,isDisabled:c,isFullWidth:u=!1,isReadOnly:n=!1,label:v,name:X,onChange:f,testId:Z,value:tt})=>{const{t:M}=ut(),d=J(),y=s.useRef(mt({controlledValue:t,uncontrolledValue:i})),et=s.useMemo(()=>y.current===H?{checked:t}:{defaultChecked:i},[i,t]),[h,$]=s.useState(y.current===H?!!t:!!i);s.useEffect(()=>{y.current===H&&$(!!t)},[t]);const p=ft(a),N=e?`${p}-hint`:void 0,at=`${p}-label`,rt=s.useCallback(R=>{if(n){R.preventDefault();return}const ot=R.target,{checked:j,value:nt}=ot;$(j),f==null||f({checked:j,value:nt})},[f,$,n]);return o.jsx(ht,{sx:{marginBlockEnd:d.Spacing2,"&:last-child":{marginBlockEnd:0}},children:o.jsxs(St,{isFullWidth:u,odysseyDesignTokens:d,children:[o.jsx(Lt,{hint:e,hintId:N,HintLinkComponent:r,inputId:p,isDisabled:c,isFullWidth:u,isReadOnly:n,label:v}),o.jsxs(xt,{children:[o.jsx(Ht,{...et,"aria-checked":h,"aria-describedby":N,"aria-label":h?`${v}: ${M("switch.active")}`:`${v}: ${M("switch.inactive")}`,"aria-labelledby":at,"data-se":Z,disabled:c,id:p,isReadOnly:n,name:X??p,odysseyDesignTokens:d,onChange:rt,readOnly:n,type:"checkbox",value:tt}),o.jsxs(vt,{"data-switch-track":!0,isChecked:h,isDisabled:c,isReadOnly:n,odysseyDesignTokens:d,children:[o.jsx(yt,{isChecked:h,isDisabled:c,isReadOnly:n,odysseyDesignTokens:d}),o.jsx($t,{isChecked:h,isDisabled:c,isReadOnly:n,odysseyDesignTokens:d})]})]})]})})},L=s.memo(Mt);L.displayName="Switch";const ee={component:L,decorators:[lt],tags:["autodocs"],argTypes:{isChecked:{control:"boolean",description:"If `true`, the Switch button is checked",table:{type:{summary:"boolean"}}},isDefaultChecked:{control:"boolean",description:"If `true`, the Switch button is checked by default",table:{type:{summary:"boolean"}}},hint:m.hint,HintLinkComponent:m.HintLinkComponent,id:m.id,isDisabled:m.isDisabled,isReadOnly:{control:"boolean",description:"The value attribute of the Switch",table:{type:{summary:"boolean"},defaultValue:{summary:"false"}}},label:{control:"text",description:"The label text for the Switch button",table:{type:{summary:"string"}},type:{required:!0,name:"string"}},name:m.name,value:{control:"text",description:"The value attribute of the Switch button",table:{type:{summary:"string"}},type:{required:!0,name:"string"}}},args:{hint:"Optional hint text",label:"Switch label",value:"Switch value",HintLinkComponent:o.jsx(Q,{href:"",children:"Some hint link"})}},C={play:async({canvasElement:e,step:r})=>{await r("select the switch button",async()=>{const t=it(e).getByRole("checkbox");t&&await O.click(t),await ct(t).toBeChecked(),await st("Switch Default"),await O.tab()})}},k={args:{isDisabled:!0}},S={args:{isDisabled:!0,isDefaultChecked:!0}},x={args:{isReadOnly:!0,isDefaultChecked:!0}},g={render:function({...r}){const[a,t]=s.useState(!0),i=s.useCallback(({checked:c})=>t(c),[]);return o.jsx(L,{...r,isChecked:a,onChange:i})}};var E,F,B;C.parameters={...C.parameters,docs:{...(E=C.parameters)==null?void 0:E.docs,source:{originalSource:`{
-  play: async ({
-    canvasElement,
-    step
-  }) => {
-    await step("select the switch button", async () => {
-      const canvas = within(canvasElement);
-      const switchCheckbox = canvas.getByRole("checkbox");
-      if (switchCheckbox) {
-        await userEvent.click(switchCheckbox);
-      }
-      await expect(switchCheckbox).toBeChecked();
-      await axeRun("Switch Default");
-      await userEvent.tab();
-    });
-  }
-}`,...(B=(F=C.parameters)==null?void 0:F.docs)==null?void 0:B.source}}};var I,P,z;k.parameters={...k.parameters,docs:{...(I=k.parameters)==null?void 0:I.docs,source:{originalSource:`{
-  args: {
-    isDisabled: true
-  }
-}`,...(z=(P=k.parameters)==null?void 0:P.docs)==null?void 0:z.source}}};var W,V,q;S.parameters={...S.parameters,docs:{...(W=S.parameters)==null?void 0:W.docs,source:{originalSource:`{
-  args: {
-    isDisabled: true,
-    isDefaultChecked: true
-  }
-}`,...(q=(V=S.parameters)==null?void 0:V.docs)==null?void 0:q.source}}};var _,A,K;x.parameters={...x.parameters,docs:{...(_=x.parameters)==null?void 0:_.docs,source:{originalSource:`{
-  args: {
-    isReadOnly: true,
-    isDefaultChecked: true
-  }
-}`,...(K=(A=x.parameters)==null?void 0:A.docs)==null?void 0:K.source}}};var U,Y,G;g.parameters={...g.parameters,docs:{...(U=g.parameters)==null?void 0:U.docs,source:{originalSource:`{
-  render: function C({
-    ...props
-  }) {
-    const [checked, setChecked] = useState(true);
-    const onChange = useCallback<NonNullable<SwitchProps["onChange"]>>(({
-      checked
-    }) => setChecked(checked), []);
-    return <Switch {...props} isChecked={checked} onChange={onChange} />;
-  }
-}`,...(G=(Y=g.parameters)==null?void 0:Y.docs)==null?void 0:G.source}}};const ae=["Default","Disabled","CheckedDisabled","CheckedReadOnly","Controlled"];export{S as CheckedDisabled,x as CheckedReadOnly,g as Controlled,C as Default,k as Disabled,ae as __namedExportsOrder,ee as default};

package/dist/assets/Sync-BbqTDeWk.js

@@ -1 +0,0 @@
-import{r}from"./index-NdkWRN8K.js";import{j as o}from"./jsx-runtime-CnH95YSl.js";import{S as n}from"./OdysseyThemeProvider-Bh0Bu-2o.js";const c=r.forwardRef((e,l)=>o.jsx(n,{fill:"none",ref:l,viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",...e,children:o.jsx(o.Fragment,{children:o.jsx("path",{clipRule:"evenodd",d:"M17.293 2.707 19.586 5H5a3 3 0 0 0-3 3v5.757l2-2V8a1 1 0 0 1 1-1h14.586l-2.293 2.293 1.414 1.414 3.434-3.434.017-.017c.084-.084.185-.184.266-.28.094-.111.22-.28.296-.512a1.5 1.5 0 0 0 0-.928 1.508 1.508 0 0 0-.296-.512c-.081-.096-.182-.196-.266-.28l-.017-.017-3.434-3.434-1.414 1.414ZM20 16v-3.757l2-2V16a3 3 0 0 1-3 3H4.414l2.293 2.293-1.414 1.414-3.434-3.434-.017-.017c-.084-.084-.185-.184-.266-.28a1.506 1.506 0 0 1-.295-.512 1.5 1.5 0 0 1 0-.927c.075-.233.2-.402.295-.513.081-.096.182-.196.266-.28l.017-.017 3.434-3.434 1.414 1.414L4.414 17H19a1 1 0 0 0 1-1Z",fill:"currentColor",fillRule:"evenodd"})})})),a=r.memo(c);a.displayName="SyncIcon";export{a as M};

package/dist/assets/Tag.stories-CoLnXBke.js

@@ -1,96 +0,0 @@
-import{j as a}from"./jsx-runtime-CnH95YSl.js";import{f as sa,w as na,u as T,e as ta}from"./index-BJMTVygn.js";import{a as oa}from"./axeRun-B-LchFqf.js";import{i as S}from"./iconUtils-BII10A1q.js";import{O as ca}from"./OdysseyStorybookThemeDecorator-BuDiOG2V.js";import{M as e}from"./Tag-DwH0t814.js";import{M as ia}from"./TagList-BZGEhGXn.js";import{M as la}from"./Group-mTVRC79V.js";import"./index-NdkWRN8K.js";import"./_commonjsHelpers-gnU0ypJ3.js";import"./axe-4JP0vCEZ.js";import"./index-DB8HwIVZ.js";import"./OdysseyThemeProvider-Bh0Bu-2o.js";import"./Server-Ch5aeRtt.js";import"./List-UlX1tusJ.js";import"./ArrowRight-ChWYjNny.js";import"./Bug-CQIUmZ-N.js";import"./Calendar-_GPHtaRa.js";import"./ChevronRight-C12ToI7Y.js";import"./ChevronUp-CfT7Bz8X.js";import"./Clock-17ua7UAW.js";import"./Upload-CfzP_Muq.js";import"./Documentation-DF3oo39e.js";import"./Download-Zlhupksh.js";import"./ExternalLink-D0l1c5Cz.js";import"./Filter-DsDJ7si-.js";import"./Folder-e-po0U54.js";import"./Globe-B83Xmd05.js";import"./Grid-EpV3TL4a.js";import"./Hide-TKfOHglI.js";import"./Home-la7Lmt_L.js";import"./InformationCircle-a2jMUKfL.js";import"./More-DLQ2RjWn.js";import"./Refresh-DexPEklu.js";import"./Search-C5TVrLyE.js";import"./Settings-2rTKyez8.js";import"./Show-BnmQFsN6.js";import"./Sync-BbqTDeWk.js";import"./User-CyxEAfVT.js";import"./Video-DWT3WylB.js";import"./index-BJTM6NaI.js";import"./OdysseyProvider-qIn9QVYS.js";import"./MuiPropsContext-DhRylJZk.js";import"./Chip-CXnMieIl.js";import"./createSvgIcon-ClUWwDzL.js";import"./useIsFocusVisible-DH0qxT5e.js";import"./ButtonBase-BNqa2TMD.js";import"./assertThisInitialized-B9jnkVVz.js";import"./inheritsLoose-CJ6Ie9dp.js";import"./TransitionGroupContext-DAL84N7p.js";import"./Stack-B7OGvu7C.js";import"./createStyled-D6bTcpHC.js";import"./useThemeProps-DwvbKxez.js";const le={component:e,decorators:[ca],parameters:{actions:{argTypesRegex:null}},tags:["autodocs"],argTypes:{icon:{control:{type:"select"},options:Object.keys(S),mapping:S,description:"An optional icon to display alongside the label",table:{type:{summary:"<Icon />"}}},isDisabled:{control:"boolean",description:"If `true`, the tag is disabled",table:{type:{summary:"boolean"},defaultValue:{summary:"false"}}},label:{control:"text",description:"The label text for the tag",table:{type:{summary:"string"}},type:{required:!0,name:"string"}},onClick:{control:"object",action:!0,description:"Callback fired when the tag is clicked",table:{type:{summary:"func"}}},onRemove:{control:"object",action:!0,description:"Callback fired when the remove button of the tag is clicked",table:{type:{summary:"func"}}},colorVariant:{control:{type:"select"},options:["default","info","accentOne","accentTwo","accentThree","accentFour"],description:"The color of the tag",table:{type:{summary:"string"},defaultValue:{summary:"default"}}},size:{control:{type:"select"},options:["default","small"],description:"The size of the tag",table:{type:{summary:"string"},defaultValue:{summary:"default"}}}},args:{label:"Starship",colorVariant:"default",onClick:sa(),size:"medium"}},n={args:{label:"Starship"}},c={args:{label:"Starship",colorVariant:"info"}},i={args:{label:"Starship",colorVariant:"accentOne"}},l={args:{label:"Starship",colorVariant:"accentTwo"}},m={args:{label:"Starship",colorVariant:"accentThree"}},p={args:{label:"Starship",colorVariant:"accentFour"}},u={render:function(t){return a.jsxs(ia,{children:[a.jsx(e,{label:t.label}),a.jsx(e,{colorVariant:"info",label:"Info tag"}),a.jsx(e,{colorVariant:"accentOne",label:"AccentOne tag"}),a.jsx(e,{colorVariant:"accentTwo",label:"AccentTwo tag"}),a.jsx(e,{colorVariant:"accentThree",label:"AccentThree tag"}),a.jsx(e,{colorVariant:"accentFour",label:"AccentFour tag"})]})},args:{label:"Default tag"}},g={args:{label:"Starship",size:"small"}},d={args:{label:"Crew",icon:a.jsx(la,{})}},b={args:{label:"Starship"},play:async({args:r,canvasElement:t,step:y})=>{await y("click the tag",async()=>{const s=na(t).getByText(r.label);await T.click(s),ta(r.onClick).toHaveBeenCalledTimes(1),await oa("Clickable Tag")})}},h={args:{label:"Starship"},play:async({args:r,canvasElement:t,step:y})=>{await y("remove the tag on click",async()=>{const o=t.querySelector('[role="button"]'),s=o==null?void 0:o.querySelector("svg");s&&(await T.click(s),await T.tab(),await ta(r.onRemove).toHaveBeenCalled()),await oa("Removable Tag")})}},f={args:{label:"Starship",isDisabled:!0}};var v,w,V;n.parameters={...n.parameters,docs:{...(v=n.parameters)==null?void 0:v.docs,source:{originalSource:`{
-  args: {
-    label: "Starship"
-  }
-}`,...(V=(w=n.parameters)==null?void 0:w.docs)==null?void 0:V.source}}};var x,k,C;c.parameters={...c.parameters,docs:{...(x=c.parameters)==null?void 0:x.docs,source:{originalSource:`{
-  args: {
-    label: "Starship",
-    colorVariant: "info"
-  }
-}`,...(C=(k=c.parameters)==null?void 0:k.docs)==null?void 0:C.source}}};var A,I,j;i.parameters={...i.parameters,docs:{...(A=i.parameters)==null?void 0:A.docs,source:{originalSource:`{
-  args: {
-    label: "Starship",
-    colorVariant: "accentOne"
-  }
-}`,...(j=(I=i.parameters)==null?void 0:I.docs)==null?void 0:j.source}}};var O,R,E;l.parameters={...l.parameters,docs:{...(O=l.parameters)==null?void 0:O.docs,source:{originalSource:`{
-  args: {
-    label: "Starship",
-    colorVariant: "accentTwo"
-  }
-}`,...(E=(R=l.parameters)==null?void 0:R.docs)==null?void 0:E.source}}};var D,F,z;m.parameters={...m.parameters,docs:{...(D=m.parameters)==null?void 0:D.docs,source:{originalSource:`{
-  args: {
-    label: "Starship",
-    colorVariant: "accentThree"
-  }
-}`,...(z=(F=m.parameters)==null?void 0:F.docs)==null?void 0:z.source}}};var B,M,q;p.parameters={...p.parameters,docs:{...(B=p.parameters)==null?void 0:B.docs,source:{originalSource:`{
-  args: {
-    label: "Starship",
-    colorVariant: "accentFour"
-  }
-}`,...(q=(M=p.parameters)==null?void 0:M.docs)==null?void 0:q.source}}};var L,H,G;u.parameters={...u.parameters,docs:{...(L=u.parameters)==null?void 0:L.docs,source:{originalSource:`{
-  render: function C(args) {
-    return <TagList>
-        <Tag label={args.label} />
-        <Tag colorVariant="info" label="Info tag" />
-        <Tag colorVariant="accentOne" label="AccentOne tag" />
-        <Tag colorVariant="accentTwo" label="AccentTwo tag" />
-        <Tag colorVariant="accentThree" label="AccentThree tag" />
-        <Tag colorVariant="accentFour" label="AccentFour tag" />
-      </TagList>;
-  },
-  args: {
-    label: "Default tag"
-  }
-}`,...(G=(H=u.parameters)==null?void 0:H.docs)==null?void 0:G.source}}};var _,J,K;g.parameters={...g.parameters,docs:{...(_=g.parameters)==null?void 0:_.docs,source:{originalSource:`{
-  args: {
-    label: "Starship",
-    size: "small"
-  }
-}`,...(K=(J=g.parameters)==null?void 0:J.docs)==null?void 0:K.source}}};var N,P,Q;d.parameters={...d.parameters,docs:{...(N=d.parameters)==null?void 0:N.docs,source:{originalSource:`{
-  args: {
-    label: "Crew",
-    icon: <GroupIcon />
-  }
-}`,...(Q=(P=d.parameters)==null?void 0:P.docs)==null?void 0:Q.source}}};var U,W,X;b.parameters={...b.parameters,docs:{...(U=b.parameters)==null?void 0:U.docs,source:{originalSource:`{
-  args: {
-    label: "Starship"
-  },
-  play: async ({
-    args,
-    canvasElement,
-    step
-  }) => {
-    await step("click the tag", async () => {
-      const canvas = within(canvasElement);
-      const tag = canvas.getByText(args.label);
-      await userEvent.click(tag);
-      expect(args.onClick).toHaveBeenCalledTimes(1);
-      await axeRun("Clickable Tag");
-    });
-  }
-}`,...(X=(W=b.parameters)==null?void 0:W.docs)==null?void 0:X.source}}};var Y,Z,$;h.parameters={...h.parameters,docs:{...(Y=h.parameters)==null?void 0:Y.docs,source:{originalSource:`{
-  args: {
-    label: "Starship"
-  },
-  play: async ({
-    args,
-    canvasElement,
-    step
-  }) => {
-    await step("remove the tag on click", async () => {
-      const tagElement = canvasElement.querySelector('[role="button"]');
-      const removeIcon = tagElement?.querySelector("svg");
-      if (removeIcon) {
-        await userEvent.click(removeIcon);
-        await userEvent.tab();
-        await expect(args.onRemove).toHaveBeenCalled();
-      }
-      await axeRun("Removable Tag");
-    });
-  }
-}`,...($=(Z=h.parameters)==null?void 0:Z.docs)==null?void 0:$.source}}};var aa,ea,ra;f.parameters={...f.parameters,docs:{...(aa=f.parameters)==null?void 0:aa.docs,source:{originalSource:`{
-  args: {
-    label: "Starship",
-    isDisabled: true
-  }
-}`,...(ra=(ea=f.parameters)==null?void 0:ea.docs)==null?void 0:ra.source}}};const me=["Default","Info","AccentOne","AccentTwo","AccentThree","AccentFour","List","Small","Icon","Clickable","Removable","Disabled"];export{p as AccentFour,i as AccentOne,m as AccentThree,l as AccentTwo,b as Clickable,n as Default,f as Disabled,d as Icon,c as Info,u as List,h as Removable,g as Small,me as __namedExportsOrder,le as default};

package/dist/assets/TextField.stories-DYOK0z5b.js

@@ -1,149 +0,0 @@
-import{j as v}from"./jsx-runtime-CnH95YSl.js";import{f as w,w as Te,u as r,e as C}from"./index-BJMTVygn.js";import{r as S}from"./index-NdkWRN8K.js";import{O as we}from"./OdysseyStorybookThemeDecorator-BuDiOG2V.js";import{f as e}from"./fieldComponentPropsMetaData-BqbNLw6V.js";import{t as E,M as be}from"./TextField-BhK0y2Zt.js";import{M as Ce}from"./Link-BDoLypER.js";import{I as ve}from"./InputAdornment-CdR3XT6f.js";import"./_commonjsHelpers-gnU0ypJ3.js";import"./OdysseyThemeProvider-Bh0Bu-2o.js";import"./index-BJTM6NaI.js";import"./OdysseyProvider-qIn9QVYS.js";import"./Field-DH3L8v09.js";import"./Box-1mvP3NLW.js";import"./Box-BcMTQ_R2.js";import"./createBox-Dxawkfow.js";import"./List-CmjR1pNu.js";import"./ListItem-C0ExFtXb.js";import"./utils-iop7lDec.js";import"./useFormControl-BMISTZuX.js";import"./FormLabel-CiGre9wK.js";import"./useIsFocusVisible-DH0qxT5e.js";import"./isHostComponent-DVu5iVWx.js";import"./ButtonBase-BNqa2TMD.js";import"./assertThisInitialized-B9jnkVVz.js";import"./inheritsLoose-CJ6Ie9dp.js";import"./TransitionGroupContext-DAL84N7p.js";import"./ScreenReaderText-CebALBsG.js";import"./visuallyHidden-Dan1xhjv.js";import"./FormHelperText-CsNAE1E3.js";import"./FieldHint-B3Jif_Up.js";import"./Typography-Cz6D417Y.js";import"./Typography-ClQ35Rr-.js";import"./useUniqueId-Bsgqe1tm.js";import"./createUniqueId-ByTaVY63.js";import"./inputUtils-Dbi8XkA6.js";import"./InputBase-DeB4_faH.js";import"./ownerWindow-HkKU3E4x.js";import"./ownerDocument-DW-IO8s5.js";import"./debounce-Be36O1Ab.js";import"./Link-DNIf0luC.js";import"./ExternalLink-D0l1c5Cz.js";const ut={component:be,decorators:[we],tags:["autodocs"],argTypes:{autoCompleteType:{control:"text",description:"This prop helps users to fill forms faster, especially on mobile devices. 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:{control:"text",description:"The value of the `input` element. Use when the component is not controlled",table:{type:{summary:"string"},defaultValue:{summary:void 0}}},endAdornment:{control:"text",description:"End `InputAdornment` for this component",table:{type:{summary:"string | ReactElement<typeof Icon>"}}},errorMessage:e.errorMessage,errorMessageList:e.errorMessageList,hasInitialFocus:{control:"boolean",description:"If `true`, the component will receive focus automatically",table:{type:{summary:"boolean"}}},hint:e.hint,HintLinkComponent:e.HintLinkComponent,id:e.id,isDisabled:e.isDisabled,isFullWidth:e.isFullWidth,isMultiline:{control:"boolean",description:"If `true`, a TextareaAutosize element is rendered",table:{type:{summary:"boolean"},defaultValue:{summary:"false"}}},isOptional:e.isOptional,isReadOnly:e.isReadOnly,label:{control:"text",description:"The label for the `input` element",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:"func"}}},onChange:{description:"Callback fired when the value is changed",table:{type:{summary:"func"}}},onFocus:{description:"Callback fired when the `input` element gets focus",table:{type:{summary:"func"}}},placeholder:{control:"text",description:"The short hint displayed in the `input` before the user enters a value",table:{type:{summary:"string"}}},startAdornment:{control:"text",description:"Start `InputAdornment` for this component",table:{type:{summary:"string | ReactElement<typeof Icon>"}}},type:{options:E,control:{type:"radio"},description:"Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types)",table:{type:{summary:E.join(" | ")},defaultValue:{summary:"text"}}},value:{control:"text",description:"The value of the `input` element, required for a controlled component",table:{type:{summary:"string"}}}},args:{defaultValue:void 0,label:"Destination",onBlur:w(),onChange:w(),onFocus:w()}},n={args:{defaultValue:""},play:async({args:a,canvasElement:x,step:T})=>{await T("Textfield callback",async()=>{const t=Te(x).getByRole("textbox");await r.click(t),await C(a.onFocus).toHaveBeenCalledTimes(1),await r.type(t,"Earth"),await C(a.onChange).toHaveBeenCalledTimes(5),await r.clear(t),await r.tab(),await C(a.onBlur).toHaveBeenCalledTimes(1)})}},o={parameters:{docs:{description:{story:"The values of disabled inputs will not be submitted."}}},args:{isDisabled:!0,defaultValue:"Earth"}},s={args:{isOptional:!0,defaultValue:""}},i={parameters:{docs:{description:{story:"The values of readonly inputs will be submitted."}}},args:{isReadOnly:!0,value:"Earth"}},l={args:{errorMessage:"This field is required.",defaultValue:""}},p={args:{errorMessage:"This field is required:",errorMessageList:["At least 2 chars","No more than 20 chars"],defaultValue:""}},c={args:{isFullWidth:!0}},m={args:{hint:"Specify your destination within the Sol system.",defaultValue:""}},u={args:{hint:"Specify your destination within the Sol system. Learn more",HintLinkComponent:v.jsx(Ce,{href:"/learn-more",children:"about the Sol system"}),defaultValue:""}},d={parameters:{docs:{description:{story:"TextField supports both `string` and `<Icon />` adornments."}}},args:{label:"Cargo weight",endAdornment:v.jsx(ve,{position:"end",children:"kg"}),defaultValue:""}},h={args:{autoCompleteType:"work email",label:"Company email",type:"email",defaultValue:""}},y={parameters:{docs:{description:{story:"As the user types, the field will grow vertically to accommodate the new lines."}}},args:{autoCompleteType:"shipping street-address",label:"Permanent residence",isMultiline:!0,defaultValue:""},name:"Multiline (Textarea)"},g={args:{placeholder:"Destination within the Sol system"}},f={parameters:{docs:{description:{story:"TextFields of type `tel` are not automatically validated because global formats are so varied."}}},args:{autoCompleteType:"mobile tel",label:"Phone number",startAdornment:v.jsx(ve,{position:"start",children:"+1"}),type:"tel",defaultValue:""}},b={parameters:{docs:{description:{story:"When the component is controlled, the parent component is responsible for passing `value` to the component and listening for changes with `onChange`"}}},args:{value:"Initial state"},render:function({...x}){const[T,V]=S.useState("Initial state"),t=S.useCallback(xe=>V(xe.target.value),[]);return v.jsx(be,{...x,onChange:t,value:T})}};var M,L,k;n.parameters={...n.parameters,docs:{...(M=n.parameters)==null?void 0:M.docs,source:{originalSource:`{
-  args: {
-    defaultValue: ""
-  },
-  play: async ({
-    args,
-    canvasElement,
-    step
-  }) => {
-    await step("Textfield callback", async () => {
-      const canvas = within(canvasElement);
-      const textbox = canvas.getByRole("textbox");
-      await userEvent.click(textbox);
-      await expect(args.onFocus).toHaveBeenCalledTimes(1);
-      await userEvent.type(textbox, "Earth");
-      await expect(args.onChange).toHaveBeenCalledTimes(5);
-      await userEvent.clear(textbox);
-      await userEvent.tab();
-      await expect(args.onBlur).toHaveBeenCalledTimes(1);
-    });
-  }
-}`,...(k=(L=n.parameters)==null?void 0:L.docs)==null?void 0:k.source}}};var A,F,I;o.parameters={...o.parameters,docs:{...(A=o.parameters)==null?void 0:A.docs,source:{originalSource:`{
-  parameters: {
-    docs: {
-      description: {
-        story: "The values of disabled inputs will not be submitted."
-      }
-    }
-  },
-  args: {
-    isDisabled: true,
-    defaultValue: "Earth"
-  }
-}`,...(I=(F=o.parameters)==null?void 0:F.docs)==null?void 0:I.source}}};var H,O,D;s.parameters={...s.parameters,docs:{...(H=s.parameters)==null?void 0:H.docs,source:{originalSource:`{
-  args: {
-    isOptional: true,
-    defaultValue: ""
-  }
-}`,...(D=(O=s.parameters)==null?void 0:O.docs)==null?void 0:D.source}}};var B,R,W;i.parameters={...i.parameters,docs:{...(B=i.parameters)==null?void 0:B.docs,source:{originalSource:`{
-  parameters: {
-    docs: {
-      description: {
-        story: "The values of readonly inputs will be submitted."
-      }
-    }
-  },
-  args: {
-    isReadOnly: true,
-    value: "Earth"
-  }
-}`,...(W=(R=i.parameters)==null?void 0:R.docs)==null?void 0:W.source}}};var j,P,q;l.parameters={...l.parameters,docs:{...(j=l.parameters)==null?void 0:j.docs,source:{originalSource:`{
-  args: {
-    errorMessage: "This field is required.",
-    defaultValue: ""
-  }
-}`,...(q=(P=l.parameters)==null?void 0:P.docs)==null?void 0:q.source}}};var z,_,N;p.parameters={...p.parameters,docs:{...(z=p.parameters)==null?void 0:z.docs,source:{originalSource:`{
-  args: {
-    errorMessage: "This field is required:",
-    errorMessageList: ["At least 2 chars", "No more than 20 chars"],
-    defaultValue: ""
-  }
-}`,...(N=(_=p.parameters)==null?void 0:_.docs)==null?void 0:N.source}}};var U,Y,G;c.parameters={...c.parameters,docs:{...(U=c.parameters)==null?void 0:U.docs,source:{originalSource:`{
-  args: {
-    isFullWidth: true
-  }
-}`,...(G=(Y=c.parameters)==null?void 0:Y.docs)==null?void 0:G.source}}};var J,K,Q;m.parameters={...m.parameters,docs:{...(J=m.parameters)==null?void 0:J.docs,source:{originalSource:`{
-  args: {
-    hint: "Specify your destination within the Sol system.",
-    defaultValue: ""
-  }
-}`,...(Q=(K=m.parameters)==null?void 0:K.docs)==null?void 0:Q.source}}};var X,Z,$;u.parameters={...u.parameters,docs:{...(X=u.parameters)==null?void 0:X.docs,source:{originalSource:`{
-  args: {
-    hint: "Specify your destination within the Sol system. Learn more",
-    HintLinkComponent: <Link href="/learn-more">about the Sol system</Link>,
-    defaultValue: ""
-  }
-}`,...($=(Z=u.parameters)==null?void 0:Z.docs)==null?void 0:$.source}}};var ee,te,ae;d.parameters={...d.parameters,docs:{...(ee=d.parameters)==null?void 0:ee.docs,source:{originalSource:`{
-  parameters: {
-    docs: {
-      description: {
-        story: "TextField supports both \`string\` and \`<Icon />\` adornments."
-      }
-    }
-  },
-  args: {
-    label: "Cargo weight",
-    endAdornment: <InputAdornment position="end">kg</InputAdornment>,
-    defaultValue: ""
-  }
-}`,...(ae=(te=d.parameters)==null?void 0:te.docs)==null?void 0:ae.source}}};var re,ne,oe;h.parameters={...h.parameters,docs:{...(re=h.parameters)==null?void 0:re.docs,source:{originalSource:`{
-  args: {
-    autoCompleteType: "work email",
-    label: "Company email",
-    type: "email",
-    defaultValue: ""
-  }
-}`,...(oe=(ne=h.parameters)==null?void 0:ne.docs)==null?void 0:oe.source}}};var se,ie,le;y.parameters={...y.parameters,docs:{...(se=y.parameters)==null?void 0:se.docs,source:{originalSource:`{
-  parameters: {
-    docs: {
-      description: {
-        story: "As the user types, the field will grow vertically to accommodate the new lines."
-      }
-    }
-  },
-  args: {
-    autoCompleteType: "shipping street-address",
-    label: "Permanent residence",
-    isMultiline: true,
-    defaultValue: ""
-  },
-  name: "Multiline (Textarea)"
-}`,...(le=(ie=y.parameters)==null?void 0:ie.docs)==null?void 0:le.source}}};var pe,ce,me;g.parameters={...g.parameters,docs:{...(pe=g.parameters)==null?void 0:pe.docs,source:{originalSource:`{
-  args: {
-    placeholder: "Destination within the Sol system"
-  }
-}`,...(me=(ce=g.parameters)==null?void 0:ce.docs)==null?void 0:me.source}}};var ue,de,he;f.parameters={...f.parameters,docs:{...(ue=f.parameters)==null?void 0:ue.docs,source:{originalSource:`{
-  parameters: {
-    docs: {
-      description: {
-        story: "TextFields of type \`tel\` are not automatically validated because global formats are so varied."
-      }
-    }
-  },
-  args: {
-    autoCompleteType: "mobile tel",
-    label: "Phone number",
-    startAdornment: <InputAdornment position="start">+1</InputAdornment>,
-    type: "tel",
-    defaultValue: ""
-  }
-}`,...(he=(de=f.parameters)==null?void 0:de.docs)==null?void 0:he.source}}};var ye,ge,fe;b.parameters={...b.parameters,docs:{...(ye=b.parameters)==null?void 0:ye.docs,source:{originalSource:`{
-  parameters: {
-    docs: {
-      description: {
-        story: "When the component is controlled, the parent component is responsible for passing \`value\` to the component and listening for changes with \`onChange\`"
-      }
-    }
-  },
-  args: {
-    value: "Initial state"
-  },
-  render: function C({
-    ...props
-  }) {
-    const [localValue, setLocalValue] = useState("Initial state");
-    const onChange = useCallback((event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => setLocalValue(event.target.value), []);
-    return <TextField {...props} onChange={onChange} value={localValue} />;
-  }
-}`,...(fe=(ge=b.parameters)==null?void 0:ge.docs)==null?void 0:fe.source}}};const dt=["Default","Disabled","Optional","ReadOnly","Error","ErrorsList","FullWidth","Hint","HintLink","Adornment","Email","Multiline","Placeholder","Tel","ControlledTextField"];export{d as Adornment,b as ControlledTextField,n as Default,o as Disabled,h as Email,l as Error,p as ErrorsList,c as FullWidth,m as Hint,u as HintLink,y as Multiline,s as Optional,g as Placeholder,i as ReadOnly,f as Tel,dt as __namedExportsOrder,ut as default};