@okta/odyssey-react-mui 1.43.0 → 1.44.0

package/dist/esm/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","names":["React","memo","useCallback","useRef","useMemo","Field","getControlState","useInputValues","Radio","jsx","_jsx","RadioGroup","ariaDescribedBy","children","defaultValue","errorMessage","errorMessageList","hint","HintLinkComponent","id","idOverride","isDisabled","isReadOnly","label","name","nameOverride","onChange","onChangeProp","testId","translate","value","controlledStateRef","controlledValue","uncontrolledValue","inputValues","controlState","current","event","newValue","memoizedChildren","Children","map","child","isValidElement","type","cloneElement","props","renderFieldComponent","errorMessageElementId","labelElementId","_RadioGroup","fieldType","hasVisibleLabel","MemoizedRadioGroup","displayName"],"sources":["../../src/RadioGroup.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n  RadioGroup as MuiRadioGroup,\n  type RadioGroupProps as MuiRadioGroupProps,\n} from \"@mui/material\";\nimport React, { memo, ReactNode, useCallback, useRef, useMemo } from \"react\";\n\nimport { Field } from \"./Field.js\";\nimport {\n  FieldComponentProps,\n  FieldComponentRenderProps,\n} from \"./FieldComponentProps.js\";\nimport type { HtmlProps } from \"./HtmlProps.js\";\nimport { getControlState, useInputValues } from \"./inputUtils.js\";\nimport { Radio, RadioProps } from \"./Radio.js\";\n\nexport type RadioGroupProps = {\n  /**\n   * The Radio components within the group. Must include two or more.\n   */\n  children: ReactNode;\n  /**\n   * The text value of the Radio that should be selected by default\n   */\n  defaultValue?: string;\n  /**\n   * The text label for the RadioGroup\n   */\n  label: string;\n  /**\n   * Listen for changes in the browser that change `value`\n   */\n  onChange?: MuiRadioGroupProps[\"onChange\"];\n  /**\n   * The `value` on the selected Radio\n   */\n  value?: string;\n} & Pick<\n  FieldComponentProps,\n  | \"errorMessage\"\n  | \"errorMessageList\"\n  | \"hint\"\n  | \"HintLinkComponent\"\n  | \"id\"\n  | \"isDisabled\"\n  | \"isReadOnly\"\n  | \"name\"\n> &\n  Pick<HtmlProps, \"ariaDescribedBy\" | \"testId\" | \"translate\">;\n\ntype FieldRenderProps = Partial<\n  Pick<FieldComponentRenderProps, \"ariaDescribedBy\" | \"errorMessageElementId\">\n> &\n  Pick<FieldComponentRenderProps, \"id\" | \"labelElementId\">;\n\nconst RadioGroup = ({\n  ariaDescribedBy,\n  children,\n  defaultValue,\n  errorMessage,\n  errorMessageList,\n  hint,\n  HintLinkComponent,\n  id: idOverride,\n  isDisabled,\n  isReadOnly = false,\n  label,\n  name: nameOverride,\n  onChange: onChangeProp,\n  testId,\n  translate,\n  value,\n}: RadioGroupProps) => {\n  const controlledStateRef = useRef(\n    getControlState({\n      controlledValue: value,\n      uncontrolledValue: defaultValue,\n    }),\n  );\n\n  const inputValues = useInputValues({\n    defaultValue,\n    value,\n    controlState: controlledStateRef.current,\n  });\n\n  const onChange = useCallback<NonNullable<MuiRadioGroupProps[\"onChange\"]>>(\n    (event, newValue) => {\n      onChangeProp?.(event, newValue);\n    },\n    [onChangeProp],\n  );\n\n  const memoizedChildren = useMemo(\n    () =>\n      React.Children.map(children, (child) => {\n        if (React.isValidElement<RadioProps>(child) && child.type === Radio) {\n          return React.cloneElement(child, {\n            ...child.props,\n            isDisabled: isDisabled || child.props.isDisabled,\n            isReadOnly: isReadOnly || child.props.isReadOnly,\n          });\n        }\n        return child;\n      }),\n    [children, isDisabled, isReadOnly],\n  );\n  const renderFieldComponent = useCallback(\n    ({\n      ariaDescribedBy,\n      errorMessageElementId,\n      id,\n      labelElementId,\n    }: FieldRenderProps) => (\n      <MuiRadioGroup\n        {...inputValues}\n        aria-describedby={ariaDescribedBy}\n        aria-errormessage={errorMessageElementId}\n        aria-labelledby={labelElementId}\n        data-se={testId}\n        id={id}\n        name={nameOverride ?? id}\n        onChange={onChange}\n        translate={translate}\n      >\n        {memoizedChildren}\n      </MuiRadioGroup>\n    ),\n    [inputValues, nameOverride, onChange, memoizedChildren, testId, translate],\n  );\n\n  return (\n    <Field\n      ariaDescribedBy={ariaDescribedBy}\n      errorMessage={errorMessage}\n      errorMessageList={errorMessageList}\n      fieldType=\"group\"\n      hasVisibleLabel={false}\n      hint={hint}\n      HintLinkComponent={HintLinkComponent}\n      id={idOverride}\n      isDisabled={isDisabled}\n      isReadOnly={isReadOnly}\n      label={label}\n      renderFieldComponent={renderFieldComponent}\n    />\n  );\n};\n\nconst MemoizedRadioGroup = memo(RadioGroup);\nMemoizedRadioGroup.displayName = \"RadioGroup\";\n\nexport { MemoizedRadioGroup as RadioGroup };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"RadioGroup.js","names":["React","memo","useCallback","useMemo","useRef","Field","getControlState","useInputValues","Radio","jsx","_jsx","RadioGroup","ariaDescribedBy","children","defaultValue","errorMessage","errorMessageList","hint","HintLinkComponent","id","idOverride","isDisabled","isReadOnly","label","name","nameOverride","onChange","onChangeProp","testId","translate","value","controlledStateRef","controlledValue","uncontrolledValue","inputValues","controlState","current","event","newValue","memoizedChildren","Children","map","child","isValidElement","type","cloneElement","props","renderFieldComponent","errorMessageElementId","labelElementId","_RadioGroup","fieldType","hasVisibleLabel","MemoizedRadioGroup","displayName"],"sources":["../../src/RadioGroup.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n  RadioGroup as MuiRadioGroup,\n  type RadioGroupProps as MuiRadioGroupProps,\n} from \"@mui/material\";\nimport React, { memo, ReactNode, useCallback, useMemo, useRef } from \"react\";\n\nimport type { HtmlProps } from \"./HtmlProps.js\";\n\nimport { Field } from \"./Field.js\";\nimport {\n  FieldComponentProps,\n  FieldComponentRenderProps,\n} from \"./FieldComponentProps.js\";\nimport { getControlState, useInputValues } from \"./inputUtils.js\";\nimport { Radio, RadioProps } from \"./Radio.js\";\n\nexport type RadioGroupProps = {\n  /**\n   * The Radio components within the group. Must include two or more.\n   */\n  children: ReactNode;\n  /**\n   * The text value of the Radio that should be selected by default\n   */\n  defaultValue?: string;\n  /**\n   * The text label for the RadioGroup\n   */\n  label: string;\n  /**\n   * Listen for changes in the browser that change `value`\n   */\n  onChange?: MuiRadioGroupProps[\"onChange\"];\n  /**\n   * The `value` on the selected Radio\n   */\n  value?: string;\n} & Pick<\n  FieldComponentProps,\n  | \"errorMessage\"\n  | \"errorMessageList\"\n  | \"hint\"\n  | \"HintLinkComponent\"\n  | \"id\"\n  | \"isDisabled\"\n  | \"isReadOnly\"\n  | \"name\"\n> &\n  Pick<HtmlProps, \"ariaDescribedBy\" | \"testId\" | \"translate\">;\n\ntype FieldRenderProps = Partial<\n  Pick<FieldComponentRenderProps, \"ariaDescribedBy\" | \"errorMessageElementId\">\n> &\n  Pick<FieldComponentRenderProps, \"id\" | \"labelElementId\">;\n\nconst RadioGroup = ({\n  ariaDescribedBy,\n  children,\n  defaultValue,\n  errorMessage,\n  errorMessageList,\n  hint,\n  HintLinkComponent,\n  id: idOverride,\n  isDisabled,\n  isReadOnly = false,\n  label,\n  name: nameOverride,\n  onChange: onChangeProp,\n  testId,\n  translate,\n  value,\n}: RadioGroupProps) => {\n  const controlledStateRef = useRef(\n    getControlState({\n      controlledValue: value,\n      uncontrolledValue: defaultValue,\n    }),\n  );\n\n  const inputValues = useInputValues({\n    defaultValue,\n    value,\n    controlState: controlledStateRef.current,\n  });\n\n  const onChange = useCallback<NonNullable<MuiRadioGroupProps[\"onChange\"]>>(\n    (event, newValue) => {\n      onChangeProp?.(event, newValue);\n    },\n    [onChangeProp],\n  );\n\n  const memoizedChildren = useMemo(\n    () =>\n      React.Children.map(children, (child) => {\n        if (React.isValidElement<RadioProps>(child) && child.type === Radio) {\n          return React.cloneElement(child, {\n            ...child.props,\n            isDisabled: isDisabled || child.props.isDisabled,\n            isReadOnly: isReadOnly || child.props.isReadOnly,\n          });\n        }\n        return child;\n      }),\n    [children, isDisabled, isReadOnly],\n  );\n  const renderFieldComponent = useCallback(\n    ({\n      ariaDescribedBy,\n      errorMessageElementId,\n      id,\n      labelElementId,\n    }: FieldRenderProps) => (\n      <MuiRadioGroup\n        {...inputValues}\n        aria-describedby={ariaDescribedBy}\n        aria-errormessage={errorMessageElementId}\n        aria-labelledby={labelElementId}\n        data-se={testId}\n        id={id}\n        name={nameOverride ?? id}\n        onChange={onChange}\n        translate={translate}\n      >\n        {memoizedChildren}\n      </MuiRadioGroup>\n    ),\n    [inputValues, nameOverride, onChange, memoizedChildren, testId, translate],\n  );\n\n  return (\n    <Field\n      ariaDescribedBy={ariaDescribedBy}\n      errorMessage={errorMessage}\n      errorMessageList={errorMessageList}\n      fieldType=\"group\"\n      hasVisibleLabel={false}\n      hint={hint}\n      HintLinkComponent={HintLinkComponent}\n      id={idOverride}\n      isDisabled={isDisabled}\n      isReadOnly={isReadOnly}\n      label={label}\n      renderFieldComponent={renderFieldComponent}\n    />\n  );\n};\n\nconst MemoizedRadioGroup = memo(RadioGroup);\nMemoizedRadioGroup.displayName = \"RadioGroup\";\n\nexport { MemoizedRadioGroup as RadioGroup };\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/ScreenReaderText.js

@@ -10,9 +10,8 @@ import _Box from "@mui/material/Box";
  *
  * See the License for the specific language governing permissions and limitations under the License.
  */
-
-import { memo } from "react";
 import { visuallyHidden } from "@mui/utils";
+import { memo } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 const style = {
   ...visuallyHidden
@@ -24,9 +23,9 @@ const ScreenReaderText = ({
   translate
 }) => _jsx(_Box, {
   "aria-hidden": ariaHidden,
-  sx: style,
   component: "span",
   id: id,
+  sx: style,
   translate: translate,
   children: children
 });

package/dist/esm/ScreenReaderText.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScreenReaderText.js","names":["memo","visuallyHidden","jsx","_jsx","style","ScreenReaderText","ariaHidden","children","id","translate","_Box","sx","component","MemoizedScreenReaderText","displayName"],"sources":["../../src/ScreenReaderText.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { memo, ReactNode } from \"react\";\nimport { Box } from \"@mui/material\";\nimport { visuallyHidden } from \"@mui/utils\";\nimport { HtmlProps } from \"./HtmlProps.js\";\n\nexport type ScreenReaderTextProps = {\n  /**\n   * The visually-hidden text.\n   */\n  children: ReactNode;\n  id?: string;\n} & Pick<HtmlProps, \"ariaHidden\" | \"translate\">;\n\n/**\n * MUI sx expects you pass in a CSS object, not an object with CSS.\n * They seem identical, but only if you create a new object like this will MUI be happy with the type of visuallyHidden.\n * It's otherwise a regular object with CSS properties.\n */\nconst style = { ...visuallyHidden };\n\nconst ScreenReaderText = ({\n  ariaHidden,\n  children,\n  id,\n  translate,\n}: ScreenReaderTextProps) => (\n  <Box\n    aria-hidden={ariaHidden}\n    sx={style}\n    component=\"span\"\n    id={id}\n    translate={translate}\n  >\n    {children}\n  </Box>\n);\n\nconst MemoizedScreenReaderText = memo(ScreenReaderText);\nMemoizedScreenReaderText.displayName = \"ScreenReaderText\";\n\nexport { MemoizedScreenReaderText as ScreenReaderText };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAmB,OAAO;AAEvC,SAASC,cAAc,QAAQ,YAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAgB5C,MAAMC,KAAK,GAAG;EAAE,GAAGH;AAAe,CAAC;AAEnC,MAAMI,gBAAgB,GAAGA,CAAC;EACxBC,UAAU;EACVC,QAAQ;EACRC,EAAE;EACFC;AACqB,CAAC,KACtBN,IAAA,CAAAO,IAAA;EACE,eAAaJ,UAAW;EACxBK,EAAE,EAAEP,KAAM;EACVQ,SAAS,EAAC,MAAM;EAChBJ,EAAE,EAAEA,EAAG;EACPC,SAAS,EAAEA,SAAU;EAAAF,QAAA,EAEpBA;AAAQ,CACN,CACN;AAED,MAAMM,wBAAwB,GAAGb,IAAI,CAACK,gBAAgB,CAAC;AACvDQ,wBAAwB,CAACC,WAAW,GAAG,kBAAkB;AAEzD,SAASD,wBAAwB,IAAIR,gBAAgB","ignoreList":[]}
+{"version":3,"file":"ScreenReaderText.js","names":["visuallyHidden","memo","jsx","_jsx","style","ScreenReaderText","ariaHidden","children","id","translate","_Box","component","sx","MemoizedScreenReaderText","displayName"],"sources":["../../src/ScreenReaderText.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { Box } from \"@mui/material\";\nimport { visuallyHidden } from \"@mui/utils\";\nimport { memo, ReactNode } from \"react\";\n\nimport { HtmlProps } from \"./HtmlProps.js\";\n\nexport type ScreenReaderTextProps = {\n  /**\n   * The visually-hidden text.\n   */\n  children: ReactNode;\n  id?: string;\n} & Pick<HtmlProps, \"ariaHidden\" | \"translate\">;\n\n/**\n * MUI sx expects you pass in a CSS object, not an object with CSS.\n * They seem identical, but only if you create a new object like this will MUI be happy with the type of visuallyHidden.\n * It's otherwise a regular object with CSS properties.\n */\nconst style = { ...visuallyHidden };\n\nconst ScreenReaderText = ({\n  ariaHidden,\n  children,\n  id,\n  translate,\n}: ScreenReaderTextProps) => (\n  <Box\n    aria-hidden={ariaHidden}\n    component=\"span\"\n    id={id}\n    sx={style}\n    translate={translate}\n  >\n    {children}\n  </Box>\n);\n\nconst MemoizedScreenReaderText = memo(ScreenReaderText);\nMemoizedScreenReaderText.displayName = \"ScreenReaderText\";\n\nexport { MemoizedScreenReaderText as ScreenReaderText };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,SAASA,cAAc,QAAQ,YAAY;AAC3C,SAASC,IAAI,QAAmB,OAAO;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAiBxC,MAAMC,KAAK,GAAG;EAAE,GAAGJ;AAAe,CAAC;AAEnC,MAAMK,gBAAgB,GAAGA,CAAC;EACxBC,UAAU;EACVC,QAAQ;EACRC,EAAE;EACFC;AACqB,CAAC,KACtBN,IAAA,CAAAO,IAAA;EACE,eAAaJ,UAAW;EACxBK,SAAS,EAAC,MAAM;EAChBH,EAAE,EAAEA,EAAG;EACPI,EAAE,EAAER,KAAM;EACVK,SAAS,EAAEA,SAAU;EAAAF,QAAA,EAEpBA;AAAQ,CACN,CACN;AAED,MAAMM,wBAAwB,GAAGZ,IAAI,CAACI,gBAAgB,CAAC;AACvDQ,wBAAwB,CAACC,WAAW,GAAG,kBAAkB;AAEzD,SAASD,wBAAwB,IAAIR,gBAAgB","ignoreList":[]}

package/dist/esm/SearchField.js

@@ -12,10 +12,12 @@ import _IconButton from "@mui/material/IconButton";
  *
  * See the License for the specific language governing permissions and limitations under the License.
  */
-import { forwardRef, memo, useCallback, useRef } from "react";
+
 import styled from "@emotion/styled";
-import { CloseCircleFilledIcon, SearchIcon } from "./icons.generated/index.js";
+import { forwardRef, memo, useCallback, useRef } from "react";
+import { useTranslation } from "react-i18next";
 import { Field } from "./Field.js";
+import { CloseCircleFilledIcon, SearchIcon } from "./icons.generated/index.js";
 import { getControlState, useInputValues } from "./inputUtils.js";
 import { OdysseyThemeProvider } from "./OdysseyThemeProvider.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -44,6 +46,9 @@ const SearchField = forwardRef(({
   value,
   variant = "outline"
 }, ref) => {
+  const {
+    t
+  } = useTranslation();
   const onChange = useCallback(event => {
     onChangeProp?.(event);
   }, [onChangeProp]);
@@ -64,17 +69,16 @@ const SearchField = forwardRef(({
     id
   }) => _jsx(_InputBase, {
     ...inputValues,
-    inputProps: {
-      tabIndex
-    },
     "aria-describedby": ariaDescribedBy,
     autoComplete: autoCompleteType,
     autoFocus: hasInitialFocus,
+    "data-ods-type": "search",
+    "data-ods-variant": variant,
     "data-se": testId,
     endAdornment: (inputValues?.defaultValue || inputValues?.value) && _jsx(_InputAdornment, {
       position: "end",
       children: _jsx(_IconButton, {
-        "aria-label": "Clear",
+        "aria-label": t("clear.text"),
         disabled: isDisabled,
         onClick: onClear,
         size: "small",
@@ -82,8 +86,9 @@ const SearchField = forwardRef(({
       })
     }),
     id: id,
-    "data-ods-type": "search",
-    "data-ods-variant": variant,
+    inputProps: {
+      tabIndex
+    },
     name: nameOverride ?? id,
     onBlur: onBlur,
     onChange: onChange,
@@ -96,7 +101,7 @@ const SearchField = forwardRef(({
     }),
     translate: translate,
     type: "search"
-  }), [autoCompleteType, hasInitialFocus, inputValues, isDisabled, nameOverride, onBlur, onChange, onClear, onFocus, placeholder, ref, tabIndex, testId, translate, variant]);
+  }), [autoCompleteType, hasInitialFocus, inputValues, isDisabled, nameOverride, onBlur, onChange, onClear, onFocus, placeholder, ref, t, tabIndex, testId, translate, variant]);
   return _jsx(StyledContainerToEnsureThemeProviderDivIsFullWidth, {
     children: _jsx(OdysseyThemeProvider, {
       children: _jsx(Field, {

package/dist/esm/SearchField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchField.js","names":["forwardRef","memo","useCallback","useRef","styled","CloseCircleFilledIcon","SearchIcon","Field","getControlState","useInputValues","OdysseyThemeProvider","jsx","_jsx","searchVariantValues","StyledContainerToEnsureThemeProviderDivIsFullWidth","width","SearchField","ariaDescribedBy","autoCompleteType","defaultValue","hasInitialFocus","id","idOverride","isDisabled","isFullWidth","label","name","nameOverride","onChange","onChangeProp","onFocus","onBlur","onClear","onClearProp","placeholder","tabIndex","testId","translate","value","variant","ref","event","controlledStateRef","controlledValue","uncontrolledValue","inputValues","controlState","current","renderFieldComponent","_InputBase","inputProps","autoComplete","autoFocus","endAdornment","_InputAdornment","position","children","_IconButton","disabled","onClick","size","startAdornment","type","fieldType","hasVisibleLabel","isOptional","MemoizedSearchField","displayName"],"sources":["../../src/SearchField.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { InputAdornment, InputBase, IconButton } from \"@mui/material\";\nimport {\n  ChangeEventHandler,\n  FocusEventHandler,\n  forwardRef,\n  HTMLAttributes,\n  InputHTMLAttributes,\n  memo,\n  useCallback,\n  useRef,\n} from \"react\";\nimport styled from \"@emotion/styled\";\n\nimport { CloseCircleFilledIcon, SearchIcon } from \"./icons.generated/index.js\";\nimport { Field } from \"./Field.js\";\nimport {\n  FieldComponentProps,\n  FieldComponentRenderProps,\n} from \"./FieldComponentProps.js\";\nimport type { HtmlProps } from \"./HtmlProps.js\";\nimport { getControlState, useInputValues } from \"./inputUtils.js\";\nimport { OdysseyThemeProvider } from \"./OdysseyThemeProvider.js\";\n\nexport const searchVariantValues = [\"outline\", \"filled\"] as const;\n\nconst StyledContainerToEnsureThemeProviderDivIsFullWidth = styled(\"div\")({\n  width: \"100%\",\n});\n\nexport type SearchFieldProps = {\n  /**\n   * This prop helps users to fill forms faster, especially on mobile devices.\n   * The name can be confusing, as it's more like an autofill.\n   * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).\n   */\n  autoCompleteType?: InputHTMLAttributes<HTMLInputElement>[\"autoComplete\"];\n  /**\n   * The value of the `input` element to use when uncontrolled.\n   */\n  defaultValue?: string;\n  /**\n   * If `true`, the component will receive focus automatically.\n   */\n  hasInitialFocus?: boolean;\n  /**\n   * The id of the `input` element.\n   */\n  id?: string;\n  /**\n   * If `true`, the component is disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * This label won't show up visually, but it's required for accessibility.\n   */\n  label: string;\n  /**\n   * Callback fired when the `input` element loses focus.\n   */\n  onBlur?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  /**\n   * Callback fired when the clear button is pressed.\n   */\n  onClear?: () => void;\n  /**\n   * Callback fired when the value is changed.\n   */\n  onChange?: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;\n  /**\n   * Callback fired when the `input` element get focus.\n   */\n  onFocus?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  /**\n   * The short hint displayed in the `input` before the user enters a value.\n   */\n  placeholder?: string;\n\n  tabIndex?: HTMLAttributes<HTMLElement>[\"tabIndex\"];\n  /**\n   * The value of the `input` element, to use when controlled.\n   */\n  value?: string;\n  /**\n   * Whether the SearchField has a gray or white background\n   */\n  variant?: (typeof searchVariantValues)[number];\n} & Pick<FieldComponentProps, \"id\" | \"isDisabled\" | \"name\" | \"isFullWidth\"> &\n  Pick<HtmlProps, \"ariaDescribedBy\" | \"testId\" | \"translate\">;\n\ntype FieldRenderProps = Partial<Pick<HtmlProps, \"ariaDescribedBy\">> &\n  Pick<FieldComponentRenderProps, \"id\">;\n\nconst SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(\n  (\n    {\n      ariaDescribedBy,\n      autoCompleteType,\n      defaultValue,\n      hasInitialFocus,\n      id: idOverride,\n      isDisabled = false,\n      isFullWidth = false,\n      label,\n      name: nameOverride,\n      onChange: onChangeProp,\n      onFocus,\n      onBlur,\n      onClear: onClearProp,\n      placeholder,\n      tabIndex,\n      testId,\n      translate,\n      value,\n      variant = \"outline\",\n    },\n    ref,\n  ) => {\n    const onChange: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement> =\n      useCallback(\n        (event) => {\n          onChangeProp?.(event);\n        },\n        [onChangeProp],\n      );\n\n    const onClear = useCallback(() => {\n      onClearProp?.();\n    }, [onClearProp]);\n\n    const controlledStateRef = useRef(\n      getControlState({\n        controlledValue: value,\n        uncontrolledValue: defaultValue,\n      }),\n    );\n    const inputValues = useInputValues({\n      defaultValue,\n      value,\n      controlState: controlledStateRef.current,\n    });\n\n    const renderFieldComponent = useCallback(\n      ({ ariaDescribedBy, id }: FieldRenderProps) => (\n        <InputBase\n          {...inputValues}\n          inputProps={{\n            tabIndex,\n          }}\n          aria-describedby={ariaDescribedBy}\n          autoComplete={autoCompleteType}\n          /* eslint-disable-next-line jsx-a11y/no-autofocus */\n          autoFocus={hasInitialFocus}\n          data-se={testId}\n          endAdornment={\n            (inputValues?.defaultValue || inputValues?.value) && (\n              <InputAdornment position=\"end\">\n                <IconButton\n                  aria-label=\"Clear\"\n                  disabled={isDisabled}\n                  onClick={onClear}\n                  size=\"small\"\n                >\n                  <CloseCircleFilledIcon />\n                </IconButton>\n              </InputAdornment>\n            )\n          }\n          id={id}\n          data-ods-type=\"search\"\n          data-ods-variant={variant}\n          name={nameOverride ?? id}\n          onBlur={onBlur}\n          onChange={onChange}\n          onFocus={onFocus}\n          placeholder={placeholder}\n          ref={ref}\n          startAdornment={\n            <InputAdornment position=\"start\">\n              <SearchIcon />\n            </InputAdornment>\n          }\n          translate={translate}\n          type=\"search\"\n        />\n      ),\n      [\n        autoCompleteType,\n        hasInitialFocus,\n        inputValues,\n        isDisabled,\n        nameOverride,\n        onBlur,\n        onChange,\n        onClear,\n        onFocus,\n        placeholder,\n        ref,\n        tabIndex,\n        testId,\n        translate,\n        variant,\n      ],\n    );\n\n    return (\n      <StyledContainerToEnsureThemeProviderDivIsFullWidth>\n        <OdysseyThemeProvider>\n          <Field\n            ariaDescribedBy={ariaDescribedBy}\n            fieldType=\"single\"\n            hasVisibleLabel={false}\n            id={idOverride}\n            isDisabled={isDisabled}\n            isFullWidth={isFullWidth}\n            isOptional={true}\n            label={label}\n            renderFieldComponent={renderFieldComponent}\n          />\n        </OdysseyThemeProvider>\n      </StyledContainerToEnsureThemeProviderDivIsFullWidth>\n    );\n  },\n);\n\nconst MemoizedSearchField = memo(SearchField);\nMemoizedSearchField.displayName = \"SearchField\";\n\nexport { MemoizedSearchField as SearchField };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"SearchField.js","names":["styled","forwardRef","memo","useCallback","useRef","useTranslation","Field","CloseCircleFilledIcon","SearchIcon","getControlState","useInputValues","OdysseyThemeProvider","jsx","_jsx","searchVariantValues","StyledContainerToEnsureThemeProviderDivIsFullWidth","width","SearchField","ariaDescribedBy","autoCompleteType","defaultValue","hasInitialFocus","id","idOverride","isDisabled","isFullWidth","label","name","nameOverride","onChange","onChangeProp","onFocus","onBlur","onClear","onClearProp","placeholder","tabIndex","testId","translate","value","variant","ref","t","event","controlledStateRef","controlledValue","uncontrolledValue","inputValues","controlState","current","renderFieldComponent","_InputBase","autoComplete","autoFocus","endAdornment","_InputAdornment","position","children","_IconButton","disabled","onClick","size","inputProps","startAdornment","type","fieldType","hasVisibleLabel","isOptional","MemoizedSearchField","displayName"],"sources":["../../src/SearchField.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport styled from \"@emotion/styled\";\nimport { IconButton, InputAdornment, InputBase } from \"@mui/material\";\nimport {\n  ChangeEventHandler,\n  FocusEventHandler,\n  forwardRef,\n  HTMLAttributes,\n  InputHTMLAttributes,\n  memo,\n  useCallback,\n  useRef,\n} from \"react\";\nimport { useTranslation } from \"react-i18next\";\n\nimport type { HtmlProps } from \"./HtmlProps.js\";\n\nimport { Field } from \"./Field.js\";\nimport {\n  FieldComponentProps,\n  FieldComponentRenderProps,\n} from \"./FieldComponentProps.js\";\nimport { CloseCircleFilledIcon, SearchIcon } from \"./icons.generated/index.js\";\nimport { getControlState, useInputValues } from \"./inputUtils.js\";\nimport { OdysseyThemeProvider } from \"./OdysseyThemeProvider.js\";\n\nexport const searchVariantValues = [\"outline\", \"filled\"] as const;\n\nconst StyledContainerToEnsureThemeProviderDivIsFullWidth = styled(\"div\")({\n  width: \"100%\",\n});\n\nexport type SearchFieldProps = {\n  /**\n   * This prop helps users to fill forms faster, especially on mobile devices.\n   * The name can be confusing, as it's more like an autofill.\n   * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).\n   */\n  autoCompleteType?: InputHTMLAttributes<HTMLInputElement>[\"autoComplete\"];\n  /**\n   * The value of the `input` element to use when uncontrolled.\n   */\n  defaultValue?: string;\n  /**\n   * If `true`, the component will receive focus automatically.\n   */\n  hasInitialFocus?: boolean;\n  /**\n   * The id of the `input` element.\n   */\n  id?: string;\n  /**\n   * If `true`, the component is disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * This label won't show up visually, but it's required for accessibility.\n   */\n  label: string;\n  /**\n   * Callback fired when the `input` element loses focus.\n   */\n  onBlur?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  /**\n   * Callback fired when the value is changed.\n   */\n  onChange?: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;\n  /**\n   * Callback fired when the clear button is pressed.\n   */\n  onClear?: () => void;\n  /**\n   * Callback fired when the `input` element get focus.\n   */\n  onFocus?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  /**\n   * The short hint displayed in the `input` before the user enters a value.\n   */\n  placeholder?: string;\n\n  tabIndex?: HTMLAttributes<HTMLElement>[\"tabIndex\"];\n  /**\n   * The value of the `input` element, to use when controlled.\n   */\n  value?: string;\n  /**\n   * Whether the SearchField has a gray or white background\n   */\n  variant?: (typeof searchVariantValues)[number];\n} & Pick<FieldComponentProps, \"id\" | \"isDisabled\" | \"name\" | \"isFullWidth\"> &\n  Pick<HtmlProps, \"ariaDescribedBy\" | \"testId\" | \"translate\">;\n\ntype FieldRenderProps = Partial<Pick<HtmlProps, \"ariaDescribedBy\">> &\n  Pick<FieldComponentRenderProps, \"id\">;\n\nconst SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(\n  (\n    {\n      ariaDescribedBy,\n      autoCompleteType,\n      defaultValue,\n      hasInitialFocus,\n      id: idOverride,\n      isDisabled = false,\n      isFullWidth = false,\n      label,\n      name: nameOverride,\n      onChange: onChangeProp,\n      onFocus,\n      onBlur,\n      onClear: onClearProp,\n      placeholder,\n      tabIndex,\n      testId,\n      translate,\n      value,\n      variant = \"outline\",\n    },\n    ref,\n  ) => {\n    const { t } = useTranslation();\n\n    const onChange: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement> =\n      useCallback(\n        (event) => {\n          onChangeProp?.(event);\n        },\n        [onChangeProp],\n      );\n\n    const onClear = useCallback(() => {\n      onClearProp?.();\n    }, [onClearProp]);\n\n    const controlledStateRef = useRef(\n      getControlState({\n        controlledValue: value,\n        uncontrolledValue: defaultValue,\n      }),\n    );\n    const inputValues = useInputValues({\n      defaultValue,\n      value,\n      controlState: controlledStateRef.current,\n    });\n\n    const renderFieldComponent = useCallback(\n      ({ ariaDescribedBy, id }: FieldRenderProps) => (\n        <InputBase\n          {...inputValues}\n          aria-describedby={ariaDescribedBy}\n          autoComplete={autoCompleteType}\n          /* eslint-disable-next-line jsx-a11y/no-autofocus */\n          autoFocus={hasInitialFocus}\n          data-ods-type=\"search\"\n          data-ods-variant={variant}\n          data-se={testId}\n          endAdornment={\n            (inputValues?.defaultValue || inputValues?.value) && (\n              <InputAdornment position=\"end\">\n                <IconButton\n                  aria-label={t(\"clear.text\")}\n                  disabled={isDisabled}\n                  onClick={onClear}\n                  size=\"small\"\n                >\n                  <CloseCircleFilledIcon />\n                </IconButton>\n              </InputAdornment>\n            )\n          }\n          id={id}\n          inputProps={{\n            tabIndex,\n          }}\n          name={nameOverride ?? id}\n          onBlur={onBlur}\n          onChange={onChange}\n          onFocus={onFocus}\n          placeholder={placeholder}\n          ref={ref}\n          startAdornment={\n            <InputAdornment position=\"start\">\n              <SearchIcon />\n            </InputAdornment>\n          }\n          translate={translate}\n          type=\"search\"\n        />\n      ),\n      [\n        autoCompleteType,\n        hasInitialFocus,\n        inputValues,\n        isDisabled,\n        nameOverride,\n        onBlur,\n        onChange,\n        onClear,\n        onFocus,\n        placeholder,\n        ref,\n        t,\n        tabIndex,\n        testId,\n        translate,\n        variant,\n      ],\n    );\n\n    return (\n      <StyledContainerToEnsureThemeProviderDivIsFullWidth>\n        <OdysseyThemeProvider>\n          <Field\n            ariaDescribedBy={ariaDescribedBy}\n            fieldType=\"single\"\n            hasVisibleLabel={false}\n            id={idOverride}\n            isDisabled={isDisabled}\n            isFullWidth={isFullWidth}\n            isOptional={true}\n            label={label}\n            renderFieldComponent={renderFieldComponent}\n          />\n        </OdysseyThemeProvider>\n      </StyledContainerToEnsureThemeProviderDivIsFullWidth>\n    );\n  },\n);\n\nconst MemoizedSearchField = memo(SearchField);\nMemoizedSearchField.displayName = \"SearchField\";\n\nexport { MemoizedSearchField as SearchField };\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/Select.js

@@ -17,11 +17,11 @@ import _Box from "@mui/material/Box";
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { memo, useCallback, useEffect, useMemo, useRef, useState, useImperativeHandle } from "react";
 import styled from "@emotion/styled";
+import { memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { Field } from "./Field.js";
 import { CheckIcon, CloseCircleFilledIcon } from "./icons.generated/index.js";
-import { ComponentControlledState, useInputValues, getControlState } from "./inputUtils.js";
+import { ComponentControlledState, getControlState, useInputValues } from "./inputUtils.js";
 import { useOdysseyDesignTokens } from "./OdysseyDesignTokensContext.js";
 import { normalizedKey } from "./useNormalizedKey.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
@@ -221,19 +221,19 @@ const Select = ({
       isReadOnly: isReadOnly,
       odysseyDesignTokens: odysseyDesignTokens,
       children: internalSelectedValues.map(item => item?.length > 0 && _jsx(_Chip, {
+        deleteIcon: _jsx(CloseCircleFilledIcon, {
+          onMouseDown: stopPropagation,
+          sx: {
+            pointerEvents: "auto"
+          }
+        }),
         label: _jsxs(_Fragment, {
           children: [normalizedOptionsMap.get(item)?.text, hasNonInteractiveIcon && _jsx(NonInteractiveIcon, {
             odysseyDesignTokens: odysseyDesignTokens
           })]
         }),
-        tabIndex: -1,
         onDelete: isInteractive && controlledStateRef.current === CONTROLLED ? () => removeSelectedValue(item) : undefined,
-        deleteIcon: _jsx(CloseCircleFilledIcon, {
-          sx: {
-            pointerEvents: "auto"
-          },
-          onMouseDown: stopPropagation
-        })
+        tabIndex: -1
       }, item))
     });
   }, [controlledStateRef, hasMultipleChoices, internalSelectedValues, odysseyDesignTokens, removeSelectedValue, normalizedOptionsMap]);
@@ -246,9 +246,9 @@ const Select = ({
     const isSelected = hasMultipleChoices ? internalSelectedValues?.includes(option.value) : internalSelectedValues === option.value;
     return _jsxs(_MenuItem, {
       "data-empty": !option.text,
-      value: option.value,
-      selected: isSelected,
       lang: option.lang,
+      selected: isSelected,
+      value: option.value,
       children: [hasMultipleChoices && _jsx(_Checkbox, {
         checked: isSelected
       }), option.text, !hasMultipleChoices && internalSelectedValues === option.value && _jsx(_ListItemSecondaryAction, {

package/dist/esm/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":["memo","useCallback","useEffect","useMemo","useRef","useState","useImperativeHandle","styled","Field","CheckIcon","CloseCircleFilledIcon","ComponentControlledState","useInputValues","getControlState","useOdysseyDesignTokens","normalizedKey","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","SelectTestSelector","accessibleText","errorMessage","hint","label","children","list","listItem","elementSelector","method","options","role","isControlledElement","SelectContainer","div","ChipsPositioningContainer","shouldForwardProp","prop","odysseyDesignTokens","alignItems","display","insetBlockEnd","insetBlockStart","insetInlineEnd","insetInlineStart","marginInlineStart","BorderWidthMain","opacity","pointerEvents","position","NonInteractiveIcon","fontSize","marginBlockEnd","marginInlineEnd","Spacing1","Spacing2","ChipsInnerContainer","_Box","isInteractive","isReadOnly","flexWrap","gap","marginBlock","minHeight","Spacing6","CONTROLLED","Select","ariaDescribedBy","defaultValue","errorMessageList","hasMultipleChoices","hasMultipleChoicesProp","HintLinkComponent","id","idOverride","inputRef","isDisabled","isFullWidth","isMultiSelect","isOptional","name","nameOverride","onBlur","onChange","onChangeProp","onFocus","testId","translate","value","selectRef","undefined","controlledStateRef","controlledValue","uncontrolledValue","internalSelectedValues","setInternalSelectedValues","current","localInputRef","focus","inputValues","controlState","event","child","preventDefault","target","split","normalizedOptions","normalizedOptionsMap","map","option","text","type","lang","language","Map","removeSelectedValue","selectedValue","Array","isArray","newValue","filter","internalSelectedValue","syntheticEvent","Chips","stopPropagation","hasNonInteractiveIcon","item","length","_Chip","get","tabIndex","onDelete","deleteIcon","sx","onMouseDown","renderedOptions","index","_ListSubheader","isSelected","includes","_MenuItem","selected","_Checkbox","checked","_ListItemSecondaryAction","toString","renderValue","renderFieldComponent","errorMessageElementId","labelElementId","_Select","displayEmpty","inputProps","readOnly","el","labelId","MenuProps","maxHeight","multiple","fieldType","hasVisibleLabel","MemoizedSelect","displayName"],"sources":["../../src/Select.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n  memo,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  useImperativeHandle,\n} from \"react\";\nimport styled from \"@emotion/styled\";\nimport {\n  Box as MuiBox,\n  Checkbox as MuiCheckbox,\n  Chip as MuiChip,\n  ListItemSecondaryAction,\n  ListSubheader,\n  MenuItem as MuiMenuItem,\n  Select as MuiSelect,\n  SelectProps as MuiSelectProps,\n  SelectChangeEvent,\n} from \"@mui/material\";\n\nimport { Field } from \"./Field.js\";\nimport {\n  FieldComponentProps,\n  FieldComponentRenderProps,\n} from \"./FieldComponentProps.js\";\nimport { CheckIcon, CloseCircleFilledIcon } from \"./icons.generated/index.js\";\nimport type { HtmlProps } from \"./HtmlProps.js\";\nimport {\n  ComponentControlledState,\n  FocusHandle,\n  useInputValues,\n  getControlState,\n} from \"./inputUtils.js\";\nimport {\n  useOdysseyDesignTokens,\n  DesignTokens,\n} from \"./OdysseyDesignTokensContext.js\";\nimport { TestSelector } from \"./test-selectors/index.js\";\nimport { normalizedKey } from \"./useNormalizedKey.js\";\n\nexport const SelectTestSelector = {\n  accessibleText: {\n    errorMessage: \"errorMessage\",\n    hint: \"description\",\n    label: \"label\",\n  },\n  children: {\n    list: {\n      accessibleText: {\n        label: \"label\",\n      },\n      children: {\n        listItem: {\n          accessibleText: {\n            label: \"label\",\n          },\n          elementSelector: {\n            method: \"ByRole\",\n            options: {\n              label: \"name\",\n            },\n            role: \"option\",\n          },\n        },\n      },\n      isControlledElement: true,\n    },\n  },\n  elementSelector: {\n    method: \"ByRole\",\n    options: {\n      label: \"name\",\n    },\n    role: \"combobox\",\n  },\n} as const satisfies TestSelector;\n\nexport type SelectOption = {\n  text: string;\n  type?: \"heading\" | \"option\";\n  value?: string;\n  language?: string;\n};\n\nconst SelectContainer = styled.div`\n  position: relative;\n  width: 100%;\n  display: flex;\n`;\n\nconst ChipsPositioningContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => {\n  return {\n    alignItems: \"center\",\n    display: \"flex\",\n    insetBlockEnd: 0,\n    insetBlockStart: 0,\n    insetInlineEnd: \"25px\", // This 25px is used to align with MUI's default chip positioning logic.\n    insetInlineStart: \"4px\",\n    marginInlineStart: odysseyDesignTokens.BorderWidthMain,\n    opacity: 1,\n    pointerEvents: \"none\",\n    position: \"absolute\",\n  };\n});\n\nconst NonInteractiveIcon = styled(CloseCircleFilledIcon, {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  fontSize: \"1em\",\n  marginBlockEnd: \"-1px\",\n  marginInlineEnd: `-${odysseyDesignTokens.Spacing1}`,\n  marginInlineStart: odysseyDesignTokens.Spacing2,\n}));\n\nconst ChipsInnerContainer = styled(MuiBox, {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"isInteractive\" &&\n    prop !== \"isReadOnly\",\n})<{\n  isInteractive?: boolean;\n  isReadOnly?: boolean;\n  odysseyDesignTokens: DesignTokens;\n}>(({ isInteractive, isReadOnly, odysseyDesignTokens }) => ({\n  display: \"flex\",\n  flexWrap: \"wrap\",\n  gap: odysseyDesignTokens.Spacing1,\n  marginBlock: `-${odysseyDesignTokens.Spacing2}`,\n  marginInlineEnd: odysseyDesignTokens.Spacing1,\n  minHeight: odysseyDesignTokens.Spacing6,\n  opacity: isInteractive || isReadOnly ? 1 : 0,\n  pointerEvents: \"none\",\n}));\n\nexport type SelectValueType<HasMultipleChoices> =\n  HasMultipleChoices extends true ? string[] : string;\n\nexport type SelectProps<\n  Value extends SelectValueType<HasMultipleChoices>,\n  HasMultipleChoices extends boolean,\n> = {\n  /**\n   * The default value. Use when the component is not controlled.\n   */\n  defaultValue?: MuiSelectProps<Value>[\"defaultValue\"];\n  /**\n   * If `true`, the Select allows multiple selections\n   */\n  hasMultipleChoices?: HasMultipleChoices;\n  /**\n   * The ref forwarded to the Select\n   */\n  inputRef?: React.RefObject<FocusHandle>;\n  /**\n   * @deprecated Use `hasMultipleChoices` instead.\n   */\n  /** **Deprecated:** use `hasMultipleChoices` */\n  isMultiSelect?: HasMultipleChoices;\n  /**\n   * The label text for the Select\n   */\n  label: string;\n  /**\n   * Callback fired when the Select loses focus\n   */\n  onBlur?: MuiSelectProps<Value>[\"onBlur\"];\n  /**\n   * Callback fired when the value of the Select changes\n   */\n  onChange?: MuiSelectProps<Value>[\"onChange\"];\n  /**\n   * Callback fired when the Select gains focus\n   */\n  onFocus?: MuiSelectProps<Value>[\"onFocus\"];\n  /**\n   * The options for the Select\n   */\n  options: (string | SelectOption)[];\n  /**\n   * The value or values selected in the Select\n   */\n  value?: Value;\n} & Pick<\n  FieldComponentProps,\n  | \"errorMessage\"\n  | \"errorMessageList\"\n  | \"hint\"\n  | \"HintLinkComponent\"\n  | \"id\"\n  | \"isDisabled\"\n  | \"isFullWidth\"\n  | \"isOptional\"\n  | \"isReadOnly\"\n  | \"name\"\n> &\n  Pick<HtmlProps, \"ariaDescribedBy\" | \"testId\" | \"translate\">;\n\ntype SelectRenderProps = Partial<\n  Pick<FieldComponentRenderProps, \"ariaDescribedBy\" | \"errorMessageElementId\">\n> &\n  Pick<FieldComponentRenderProps, \"id\" | \"labelElementId\">;\n\n/**\n * Options in Odyssey <Select> are passed as an array, which can contain any combination\n * of the following:\n *   - string —                            A simple string. The string will be both the text and the value of the resulting option.\n *                                         <option value=\"string\">string</option>\n *\n *   - { text: string } —                  Same as above, but the string is contained within an object.\n *                                         <option value=\"text\">text</option>\n *\n *   - { text: string, value: string } —   The option text will be text, and the option value will be value.\n *                                         <option value=\"value\">text</option>\n *\n *   - { text: string, type: \"heading\" } — Used to display a group heading with the text\n */\n\nconst { CONTROLLED } = ComponentControlledState;\nconst Select = <\n  Value extends SelectValueType<HasMultipleChoices>,\n  HasMultipleChoices extends boolean,\n>({\n  ariaDescribedBy,\n  defaultValue,\n  errorMessage,\n  errorMessageList,\n  hasMultipleChoices: hasMultipleChoicesProp,\n  hint,\n  HintLinkComponent,\n  id: idOverride,\n  inputRef,\n  isDisabled = false,\n  isFullWidth = false,\n  isMultiSelect,\n  isOptional = false,\n  isReadOnly = false,\n  label,\n  name: nameOverride,\n  onBlur,\n  onChange: onChangeProp,\n  onFocus,\n  options,\n  testId,\n  translate,\n  value,\n}: SelectProps<Value, HasMultipleChoices>) => {\n  const selectRef = useRef<HTMLInputElement | HTMLTextAreaElement | null>(null);\n\n  const hasMultipleChoices = useMemo(\n    () =>\n      hasMultipleChoicesProp === undefined\n        ? isMultiSelect\n        : hasMultipleChoicesProp,\n    [hasMultipleChoicesProp, isMultiSelect],\n  );\n\n  const controlledStateRef = useRef(\n    getControlState({\n      controlledValue: value,\n      uncontrolledValue: defaultValue,\n    }),\n  );\n  const [internalSelectedValues, setInternalSelectedValues] = useState(\n    controlledStateRef.current === CONTROLLED ? value : defaultValue,\n  );\n\n  const localInputRef = useRef<HTMLSelectElement>(null);\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  useImperativeHandle(inputRef, () => {\n    return {\n      focus: () => {\n        localInputRef.current?.focus();\n      },\n    };\n  }, []);\n\n  useEffect(() => {\n    if (controlledStateRef.current === CONTROLLED) {\n      setInternalSelectedValues(value);\n    }\n  }, [value]);\n\n  const inputValues = useInputValues({\n    defaultValue,\n    value,\n    controlState: controlledStateRef.current,\n  });\n\n  const onChange = useCallback<NonNullable<MuiSelectProps<Value>[\"onChange\"]>>(\n    (event, child) => {\n      if (isReadOnly) {\n        event.preventDefault();\n      } else {\n        const {\n          target: { value },\n        } = event;\n        if (controlledStateRef.current !== CONTROLLED) {\n          setInternalSelectedValues(\n            (typeof value === \"string\" && hasMultipleChoices\n              ? value.split(\",\")\n              : value) as Value,\n          );\n        }\n        onChangeProp?.(event, child);\n      }\n    },\n    [hasMultipleChoices, onChangeProp, isReadOnly],\n  );\n  // Normalize the options array to accommodate the various\n  // data types that might be passed\n  const [normalizedOptions, normalizedOptionsMap] = useMemo(() => {\n    const normalizedOptions = options.map((option) => {\n      if (typeof option === \"object\") {\n        /**\n         * If the value of `option?.value is an empty string, we need to make sure that we\n         * set an empty string to `value` in the normalized option so that the select component\n         * can potentially set it as the selected one in the text input\n         */\n        const value =\n          option?.value === \"\" ? option.value : option.value || option.text;\n        return {\n          text: option.text,\n          value,\n          type: option.type === \"heading\" ? \"heading\" : \"option\",\n          lang: option.language,\n        };\n      }\n\n      return { text: option, value: option, type: \"option\" };\n    });\n\n    const normalizedOptionsMap = new Map(\n      normalizedOptions.map((option) => [option.value, option]),\n    );\n    return [normalizedOptions, normalizedOptionsMap];\n  }, [options]);\n\n  const removeSelectedValue = useCallback(\n    (selectedValue: string) => {\n      if (Array.isArray(internalSelectedValues)) {\n        const newValue = internalSelectedValues.filter(\n          (internalSelectedValue) => internalSelectedValue !== selectedValue,\n        );\n\n        const syntheticEvent = {\n          target: { value: newValue },\n        } as SelectChangeEvent<Value>;\n\n        onChange(syntheticEvent, null);\n      }\n    },\n    [internalSelectedValues, onChange],\n  );\n\n  const Chips = useCallback(\n    ({\n      isInteractive,\n      isReadOnly,\n    }: {\n      isInteractive: boolean;\n      isReadOnly?: boolean;\n    }) => {\n      const stopPropagation = (event: React.MouseEvent<SVGSVGElement>) =>\n        event.stopPropagation();\n\n      const hasNonInteractiveIcon =\n        !isInteractive &&\n        !isReadOnly &&\n        controlledStateRef.current === CONTROLLED &&\n        hasMultipleChoices;\n\n      return (\n        Array.isArray(internalSelectedValues) && (\n          <ChipsInnerContainer\n            isInteractive={isInteractive}\n            isReadOnly={isReadOnly}\n            odysseyDesignTokens={odysseyDesignTokens}\n          >\n            {internalSelectedValues.map(\n              (item) =>\n                item?.length > 0 && (\n                  <MuiChip\n                    key={item}\n                    label={\n                      <>\n                        {normalizedOptionsMap.get(item)?.text}\n                        {hasNonInteractiveIcon && (\n                          <NonInteractiveIcon\n                            odysseyDesignTokens={odysseyDesignTokens}\n                          />\n                        )}\n                      </>\n                    }\n                    tabIndex={-1}\n                    onDelete={\n                      isInteractive && controlledStateRef.current === CONTROLLED\n                        ? () => removeSelectedValue(item)\n                        : undefined\n                    }\n                    deleteIcon={\n                      <CloseCircleFilledIcon\n                        sx={{ pointerEvents: \"auto\" }}\n                        // We need to stop event propagation on mouse down to prevent the deletion\n                        // from being blocked by the Select list opening, and also ensure that\n                        // the pointerEvent is registered even when the parent's are not\n                        onMouseDown={stopPropagation}\n                      />\n                    }\n                  />\n                ),\n            )}\n          </ChipsInnerContainer>\n        )\n      );\n    },\n    [\n      controlledStateRef,\n      hasMultipleChoices,\n      internalSelectedValues,\n      odysseyDesignTokens,\n      removeSelectedValue,\n      normalizedOptionsMap,\n    ],\n  );\n\n  // Convert the options into the ReactNode children\n  // that will populate the <Select>\n  const renderedOptions = useMemo(\n    () =>\n      normalizedOptions.map((option, index) => {\n        if (option.type === \"heading\") {\n          return (\n            <ListSubheader key={option.text}> {option.text} </ListSubheader>\n          );\n        }\n\n        const isSelected = hasMultipleChoices\n          ? internalSelectedValues?.includes(option.value)\n          : internalSelectedValues === option.value;\n\n        return (\n          <MuiMenuItem\n            data-empty={!option.text}\n            key={normalizedKey(option.text, index.toString())}\n            value={option.value}\n            selected={isSelected}\n            lang={option.lang}\n          >\n            {hasMultipleChoices && <MuiCheckbox checked={isSelected} />}\n            {option.text}\n            {!hasMultipleChoices && internalSelectedValues === option.value && (\n              <ListItemSecondaryAction>\n                <CheckIcon />\n              </ListItemSecondaryAction>\n            )}\n          </MuiMenuItem>\n        );\n      }),\n    [hasMultipleChoices, normalizedOptions, internalSelectedValues],\n  );\n\n  const renderValue = useCallback(\n    (value: Value) => Array.isArray(value) && <Chips isInteractive={false} />,\n    [Chips],\n  );\n\n  const renderFieldComponent = useCallback(\n    ({\n      ariaDescribedBy,\n      errorMessageElementId,\n      id,\n      labelElementId,\n    }: SelectRenderProps) => (\n      <SelectContainer>\n        <MuiSelect\n          {...inputValues}\n          aria-describedby={ariaDescribedBy}\n          aria-errormessage={errorMessageElementId}\n          displayEmpty\n          id={id}\n          inputProps={{\n            \"data-se\": testId,\n            \"aria-disabled\": isDisabled || isReadOnly,\n            readOnly: isReadOnly,\n          }}\n          inputRef={(el: HTMLInputElement | HTMLTextAreaElement | null) => {\n            if (localInputRef.current !== el) {\n              (localInputRef as React.MutableRefObject<typeof el>).current = el;\n            }\n            selectRef.current = el;\n          }}\n          labelId={labelElementId}\n          MenuProps={{\n            sx: {\n              \".MuiPaper-root\": {\n                maxHeight: \"50vh\",\n              },\n            },\n          }}\n          multiple={hasMultipleChoices}\n          name={nameOverride ?? id}\n          onBlur={onBlur}\n          onChange={onChange}\n          onFocus={onFocus}\n          renderValue={hasMultipleChoices ? renderValue : undefined}\n          translate={translate}\n        >\n          {renderedOptions}\n        </MuiSelect>\n        {hasMultipleChoices && (\n          <>\n            <ChipsPositioningContainer\n              odysseyDesignTokens={odysseyDesignTokens}\n            >\n              <Chips isInteractive={!isReadOnly} isReadOnly={isReadOnly} />\n            </ChipsPositioningContainer>\n          </>\n        )}\n      </SelectContainer>\n    ),\n    [\n      Chips,\n      inputValues,\n      hasMultipleChoices,\n      isDisabled,\n      isReadOnly,\n      nameOverride,\n      odysseyDesignTokens,\n      onBlur,\n      onChange,\n      onFocus,\n      renderedOptions,\n      renderValue,\n      testId,\n      translate,\n    ],\n  );\n\n  return (\n    <Field\n      ariaDescribedBy={ariaDescribedBy}\n      errorMessage={errorMessage}\n      errorMessageList={errorMessageList}\n      fieldType=\"single\"\n      hasVisibleLabel\n      hint={hint}\n      HintLinkComponent={HintLinkComponent}\n      id={idOverride}\n      isDisabled={isDisabled}\n      isFullWidth={isFullWidth}\n      isOptional={isOptional}\n      label={label}\n      renderFieldComponent={renderFieldComponent}\n    />\n  );\n};\n\nconst MemoizedSelect = memo(Select);\nMemoizedSelect.displayName = \"Select\";\n\nexport { MemoizedSelect as Select };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Select.js","names":["styled","memo","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","Field","CheckIcon","CloseCircleFilledIcon","ComponentControlledState","getControlState","useInputValues","useOdysseyDesignTokens","normalizedKey","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","SelectTestSelector","accessibleText","errorMessage","hint","label","children","list","listItem","elementSelector","method","options","role","isControlledElement","SelectContainer","div","ChipsPositioningContainer","shouldForwardProp","prop","odysseyDesignTokens","alignItems","display","insetBlockEnd","insetBlockStart","insetInlineEnd","insetInlineStart","marginInlineStart","BorderWidthMain","opacity","pointerEvents","position","NonInteractiveIcon","fontSize","marginBlockEnd","marginInlineEnd","Spacing1","Spacing2","ChipsInnerContainer","_Box","isInteractive","isReadOnly","flexWrap","gap","marginBlock","minHeight","Spacing6","CONTROLLED","Select","ariaDescribedBy","defaultValue","errorMessageList","hasMultipleChoices","hasMultipleChoicesProp","HintLinkComponent","id","idOverride","inputRef","isDisabled","isFullWidth","isMultiSelect","isOptional","name","nameOverride","onBlur","onChange","onChangeProp","onFocus","testId","translate","value","selectRef","undefined","controlledStateRef","controlledValue","uncontrolledValue","internalSelectedValues","setInternalSelectedValues","current","localInputRef","focus","inputValues","controlState","event","child","preventDefault","target","split","normalizedOptions","normalizedOptionsMap","map","option","text","type","lang","language","Map","removeSelectedValue","selectedValue","Array","isArray","newValue","filter","internalSelectedValue","syntheticEvent","Chips","stopPropagation","hasNonInteractiveIcon","item","length","_Chip","deleteIcon","onMouseDown","sx","get","onDelete","tabIndex","renderedOptions","index","_ListSubheader","isSelected","includes","_MenuItem","selected","_Checkbox","checked","_ListItemSecondaryAction","toString","renderValue","renderFieldComponent","errorMessageElementId","labelElementId","_Select","displayEmpty","inputProps","readOnly","el","labelId","MenuProps","maxHeight","multiple","fieldType","hasVisibleLabel","MemoizedSelect","displayName"],"sources":["../../src/Select.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport styled from \"@emotion/styled\";\nimport {\n  ListItemSecondaryAction,\n  ListSubheader,\n  Box as MuiBox,\n  Checkbox as MuiCheckbox,\n  Chip as MuiChip,\n  MenuItem as MuiMenuItem,\n  Select as MuiSelect,\n  SelectProps as MuiSelectProps,\n  SelectChangeEvent,\n} from \"@mui/material\";\nimport {\n  memo,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport type { HtmlProps } from \"./HtmlProps.js\";\n\nimport { Field } from \"./Field.js\";\nimport {\n  FieldComponentProps,\n  FieldComponentRenderProps,\n} from \"./FieldComponentProps.js\";\nimport { CheckIcon, CloseCircleFilledIcon } from \"./icons.generated/index.js\";\nimport {\n  ComponentControlledState,\n  FocusHandle,\n  getControlState,\n  useInputValues,\n} from \"./inputUtils.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"./OdysseyDesignTokensContext.js\";\nimport { TestSelector } from \"./test-selectors/index.js\";\nimport { normalizedKey } from \"./useNormalizedKey.js\";\n\nexport const SelectTestSelector = {\n  accessibleText: {\n    errorMessage: \"errorMessage\",\n    hint: \"description\",\n    label: \"label\",\n  },\n  children: {\n    list: {\n      accessibleText: {\n        label: \"label\",\n      },\n      children: {\n        listItem: {\n          accessibleText: {\n            label: \"label\",\n          },\n          elementSelector: {\n            method: \"ByRole\",\n            options: {\n              label: \"name\",\n            },\n            role: \"option\",\n          },\n        },\n      },\n      isControlledElement: true,\n    },\n  },\n  elementSelector: {\n    method: \"ByRole\",\n    options: {\n      label: \"name\",\n    },\n    role: \"combobox\",\n  },\n} as const satisfies TestSelector;\n\nexport type SelectOption = {\n  language?: string;\n  text: string;\n  type?: \"heading\" | \"option\";\n  value?: string;\n};\n\nconst SelectContainer = styled.div`\n  position: relative;\n  width: 100%;\n  display: flex;\n`;\n\nconst ChipsPositioningContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => {\n  return {\n    alignItems: \"center\",\n    display: \"flex\",\n    insetBlockEnd: 0,\n    insetBlockStart: 0,\n    insetInlineEnd: \"25px\", // This 25px is used to align with MUI's default chip positioning logic.\n    insetInlineStart: \"4px\",\n    marginInlineStart: odysseyDesignTokens.BorderWidthMain,\n    opacity: 1,\n    pointerEvents: \"none\",\n    position: \"absolute\",\n  };\n});\n\nconst NonInteractiveIcon = styled(CloseCircleFilledIcon, {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  fontSize: \"1em\",\n  marginBlockEnd: \"-1px\",\n  marginInlineEnd: `-${odysseyDesignTokens.Spacing1}`,\n  marginInlineStart: odysseyDesignTokens.Spacing2,\n}));\n\nconst ChipsInnerContainer = styled(MuiBox, {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"isInteractive\" &&\n    prop !== \"isReadOnly\",\n})<{\n  isInteractive?: boolean;\n  isReadOnly?: boolean;\n  odysseyDesignTokens: DesignTokens;\n}>(({ isInteractive, isReadOnly, odysseyDesignTokens }) => ({\n  display: \"flex\",\n  flexWrap: \"wrap\",\n  gap: odysseyDesignTokens.Spacing1,\n  marginBlock: `-${odysseyDesignTokens.Spacing2}`,\n  marginInlineEnd: odysseyDesignTokens.Spacing1,\n  minHeight: odysseyDesignTokens.Spacing6,\n  opacity: isInteractive || isReadOnly ? 1 : 0,\n  pointerEvents: \"none\",\n}));\n\nexport type SelectValueType<HasMultipleChoices> =\n  HasMultipleChoices extends true ? string[] : string;\n\nexport type SelectProps<\n  Value extends SelectValueType<HasMultipleChoices>,\n  HasMultipleChoices extends boolean,\n> = {\n  /**\n   * The default value. Use when the component is not controlled.\n   */\n  defaultValue?: MuiSelectProps<Value>[\"defaultValue\"];\n  /**\n   * If `true`, the Select allows multiple selections\n   */\n  hasMultipleChoices?: HasMultipleChoices;\n  /**\n   * The ref forwarded to the Select\n   */\n  inputRef?: React.RefObject<FocusHandle>;\n  /**\n   * @deprecated Use `hasMultipleChoices` instead.\n   */\n  /** **Deprecated:** use `hasMultipleChoices` */\n  isMultiSelect?: HasMultipleChoices;\n  /**\n   * The label text for the Select\n   */\n  label: string;\n  /**\n   * Callback fired when the Select loses focus\n   */\n  onBlur?: MuiSelectProps<Value>[\"onBlur\"];\n  /**\n   * Callback fired when the value of the Select changes\n   */\n  onChange?: MuiSelectProps<Value>[\"onChange\"];\n  /**\n   * Callback fired when the Select gains focus\n   */\n  onFocus?: MuiSelectProps<Value>[\"onFocus\"];\n  /**\n   * The options for the Select\n   */\n  options: (string | SelectOption)[];\n  /**\n   * The value or values selected in the Select\n   */\n  value?: Value;\n} & Pick<\n  FieldComponentProps,\n  | \"errorMessage\"\n  | \"errorMessageList\"\n  | \"hint\"\n  | \"HintLinkComponent\"\n  | \"id\"\n  | \"isDisabled\"\n  | \"isFullWidth\"\n  | \"isOptional\"\n  | \"isReadOnly\"\n  | \"name\"\n> &\n  Pick<HtmlProps, \"ariaDescribedBy\" | \"testId\" | \"translate\">;\n\ntype SelectRenderProps = Partial<\n  Pick<FieldComponentRenderProps, \"ariaDescribedBy\" | \"errorMessageElementId\">\n> &\n  Pick<FieldComponentRenderProps, \"id\" | \"labelElementId\">;\n\n/**\n * Options in Odyssey <Select> are passed as an array, which can contain any combination\n * of the following:\n *   - string —                            A simple string. The string will be both the text and the value of the resulting option.\n *                                         <option value=\"string\">string</option>\n *\n *   - { text: string } —                  Same as above, but the string is contained within an object.\n *                                         <option value=\"text\">text</option>\n *\n *   - { text: string, value: string } —   The option text will be text, and the option value will be value.\n *                                         <option value=\"value\">text</option>\n *\n *   - { text: string, type: \"heading\" } — Used to display a group heading with the text\n */\n\nconst { CONTROLLED } = ComponentControlledState;\nconst Select = <\n  Value extends SelectValueType<HasMultipleChoices>,\n  HasMultipleChoices extends boolean,\n>({\n  ariaDescribedBy,\n  defaultValue,\n  errorMessage,\n  errorMessageList,\n  hasMultipleChoices: hasMultipleChoicesProp,\n  hint,\n  HintLinkComponent,\n  id: idOverride,\n  inputRef,\n  isDisabled = false,\n  isFullWidth = false,\n  isMultiSelect,\n  isOptional = false,\n  isReadOnly = false,\n  label,\n  name: nameOverride,\n  onBlur,\n  onChange: onChangeProp,\n  onFocus,\n  options,\n  testId,\n  translate,\n  value,\n}: SelectProps<Value, HasMultipleChoices>) => {\n  const selectRef = useRef<HTMLInputElement | HTMLTextAreaElement | null>(null);\n\n  const hasMultipleChoices = useMemo(\n    () =>\n      hasMultipleChoicesProp === undefined\n        ? isMultiSelect\n        : hasMultipleChoicesProp,\n    [hasMultipleChoicesProp, isMultiSelect],\n  );\n\n  const controlledStateRef = useRef(\n    getControlState({\n      controlledValue: value,\n      uncontrolledValue: defaultValue,\n    }),\n  );\n  const [internalSelectedValues, setInternalSelectedValues] = useState(\n    controlledStateRef.current === CONTROLLED ? value : defaultValue,\n  );\n\n  const localInputRef = useRef<HTMLSelectElement>(null);\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  useImperativeHandle(inputRef, () => {\n    return {\n      focus: () => {\n        localInputRef.current?.focus();\n      },\n    };\n  }, []);\n\n  useEffect(() => {\n    if (controlledStateRef.current === CONTROLLED) {\n      setInternalSelectedValues(value);\n    }\n  }, [value]);\n\n  const inputValues = useInputValues({\n    defaultValue,\n    value,\n    controlState: controlledStateRef.current,\n  });\n\n  const onChange = useCallback<NonNullable<MuiSelectProps<Value>[\"onChange\"]>>(\n    (event, child) => {\n      if (isReadOnly) {\n        event.preventDefault();\n      } else {\n        const {\n          target: { value },\n        } = event;\n        if (controlledStateRef.current !== CONTROLLED) {\n          setInternalSelectedValues(\n            (typeof value === \"string\" && hasMultipleChoices\n              ? value.split(\",\")\n              : value) as Value,\n          );\n        }\n        onChangeProp?.(event, child);\n      }\n    },\n    [hasMultipleChoices, onChangeProp, isReadOnly],\n  );\n  // Normalize the options array to accommodate the various\n  // data types that might be passed\n  const [normalizedOptions, normalizedOptionsMap] = useMemo(() => {\n    const normalizedOptions = options.map((option) => {\n      if (typeof option === \"object\") {\n        /**\n         * If the value of `option?.value is an empty string, we need to make sure that we\n         * set an empty string to `value` in the normalized option so that the select component\n         * can potentially set it as the selected one in the text input\n         */\n        const value =\n          option?.value === \"\" ? option.value : option.value || option.text;\n        return {\n          text: option.text,\n          value,\n          type: option.type === \"heading\" ? \"heading\" : \"option\",\n          lang: option.language,\n        };\n      }\n\n      return { text: option, value: option, type: \"option\" };\n    });\n\n    const normalizedOptionsMap = new Map(\n      normalizedOptions.map((option) => [option.value, option]),\n    );\n    return [normalizedOptions, normalizedOptionsMap];\n  }, [options]);\n\n  const removeSelectedValue = useCallback(\n    (selectedValue: string) => {\n      if (Array.isArray(internalSelectedValues)) {\n        const newValue = internalSelectedValues.filter(\n          (internalSelectedValue) => internalSelectedValue !== selectedValue,\n        );\n\n        const syntheticEvent = {\n          target: { value: newValue },\n        } as SelectChangeEvent<Value>;\n\n        onChange(syntheticEvent, null);\n      }\n    },\n    [internalSelectedValues, onChange],\n  );\n\n  const Chips = useCallback(\n    ({\n      isInteractive,\n      isReadOnly,\n    }: {\n      isInteractive: boolean;\n      isReadOnly?: boolean;\n    }) => {\n      const stopPropagation = (event: React.MouseEvent<SVGSVGElement>) =>\n        event.stopPropagation();\n\n      const hasNonInteractiveIcon =\n        !isInteractive &&\n        !isReadOnly &&\n        controlledStateRef.current === CONTROLLED &&\n        hasMultipleChoices;\n\n      return (\n        Array.isArray(internalSelectedValues) && (\n          <ChipsInnerContainer\n            isInteractive={isInteractive}\n            isReadOnly={isReadOnly}\n            odysseyDesignTokens={odysseyDesignTokens}\n          >\n            {internalSelectedValues.map(\n              (item) =>\n                item?.length > 0 && (\n                  <MuiChip\n                    deleteIcon={\n                      <CloseCircleFilledIcon\n                        // We need to stop event propagation on mouse down to prevent the deletion\n                        // from being blocked by the Select list opening, and also ensure that\n                        // the pointerEvent is registered even when the parent's are not\n                        onMouseDown={stopPropagation}\n                        sx={{ pointerEvents: \"auto\" }}\n                      />\n                    }\n                    key={item}\n                    label={\n                      <>\n                        {normalizedOptionsMap.get(item)?.text}\n                        {hasNonInteractiveIcon && (\n                          <NonInteractiveIcon\n                            odysseyDesignTokens={odysseyDesignTokens}\n                          />\n                        )}\n                      </>\n                    }\n                    onDelete={\n                      isInteractive && controlledStateRef.current === CONTROLLED\n                        ? () => removeSelectedValue(item)\n                        : undefined\n                    }\n                    tabIndex={-1}\n                  />\n                ),\n            )}\n          </ChipsInnerContainer>\n        )\n      );\n    },\n    [\n      controlledStateRef,\n      hasMultipleChoices,\n      internalSelectedValues,\n      odysseyDesignTokens,\n      removeSelectedValue,\n      normalizedOptionsMap,\n    ],\n  );\n\n  // Convert the options into the ReactNode children\n  // that will populate the <Select>\n  const renderedOptions = useMemo(\n    () =>\n      normalizedOptions.map((option, index) => {\n        if (option.type === \"heading\") {\n          return (\n            <ListSubheader key={option.text}> {option.text} </ListSubheader>\n          );\n        }\n\n        const isSelected = hasMultipleChoices\n          ? internalSelectedValues?.includes(option.value)\n          : internalSelectedValues === option.value;\n\n        return (\n          <MuiMenuItem\n            data-empty={!option.text}\n            key={normalizedKey(option.text, index.toString())}\n            lang={option.lang}\n            selected={isSelected}\n            value={option.value}\n          >\n            {hasMultipleChoices && <MuiCheckbox checked={isSelected} />}\n            {option.text}\n            {!hasMultipleChoices && internalSelectedValues === option.value && (\n              <ListItemSecondaryAction>\n                <CheckIcon />\n              </ListItemSecondaryAction>\n            )}\n          </MuiMenuItem>\n        );\n      }),\n    [hasMultipleChoices, normalizedOptions, internalSelectedValues],\n  );\n\n  const renderValue = useCallback(\n    (value: Value) => Array.isArray(value) && <Chips isInteractive={false} />,\n    [Chips],\n  );\n\n  const renderFieldComponent = useCallback(\n    ({\n      ariaDescribedBy,\n      errorMessageElementId,\n      id,\n      labelElementId,\n    }: SelectRenderProps) => (\n      <SelectContainer>\n        <MuiSelect\n          {...inputValues}\n          aria-describedby={ariaDescribedBy}\n          aria-errormessage={errorMessageElementId}\n          displayEmpty\n          id={id}\n          inputProps={{\n            \"data-se\": testId,\n            \"aria-disabled\": isDisabled || isReadOnly,\n            readOnly: isReadOnly,\n          }}\n          inputRef={(el: HTMLInputElement | HTMLTextAreaElement | null) => {\n            if (localInputRef.current !== el) {\n              (localInputRef as React.MutableRefObject<typeof el>).current = el;\n            }\n            selectRef.current = el;\n          }}\n          labelId={labelElementId}\n          MenuProps={{\n            sx: {\n              \".MuiPaper-root\": {\n                maxHeight: \"50vh\",\n              },\n            },\n          }}\n          multiple={hasMultipleChoices}\n          name={nameOverride ?? id}\n          onBlur={onBlur}\n          onChange={onChange}\n          onFocus={onFocus}\n          renderValue={hasMultipleChoices ? renderValue : undefined}\n          translate={translate}\n        >\n          {renderedOptions}\n        </MuiSelect>\n        {hasMultipleChoices && (\n          <>\n            <ChipsPositioningContainer\n              odysseyDesignTokens={odysseyDesignTokens}\n            >\n              <Chips isInteractive={!isReadOnly} isReadOnly={isReadOnly} />\n            </ChipsPositioningContainer>\n          </>\n        )}\n      </SelectContainer>\n    ),\n    [\n      Chips,\n      inputValues,\n      hasMultipleChoices,\n      isDisabled,\n      isReadOnly,\n      nameOverride,\n      odysseyDesignTokens,\n      onBlur,\n      onChange,\n      onFocus,\n      renderedOptions,\n      renderValue,\n      testId,\n      translate,\n    ],\n  );\n\n  return (\n    <Field\n      ariaDescribedBy={ariaDescribedBy}\n      errorMessage={errorMessage}\n      errorMessageList={errorMessageList}\n      fieldType=\"single\"\n      hasVisibleLabel\n      hint={hint}\n      HintLinkComponent={HintLinkComponent}\n      id={idOverride}\n      isDisabled={isDisabled}\n      isFullWidth={isFullWidth}\n      isOptional={isOptional}\n      label={label}\n      renderFieldComponent={renderFieldComponent}\n    />\n  );\n};\n\nconst MemoizedSelect = memo(Select);\nMemoizedSelect.displayName = \"Select\";\n\nexport { MemoizedSelect as Select };\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/Stack.js

@@ -10,7 +10,6 @@ import _Stack from "@mui/material/Stack";
  *
  * See the License for the specific language governing permissions and limitations under the License.
  */
-
 import { memo } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const stackSpacingValues = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

package/dist/esm/Stack.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stack.js","names":["memo","jsx","_jsx","stackSpacingValues","stackDirectionValues","Stack","children","direction","spacing","_Stack","MemoizedStack","displayName"],"sources":["../../src/Stack.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { memo } from \"react\";\nimport { Stack as MuiStack, StackProps as MuiStackProps } from \"@mui/material\";\n\nexport const stackSpacingValues = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] as const;\nexport const stackDirectionValues = [\n  \"row\",\n  \"row-reverse\",\n  \"column\",\n  \"column-reverse\",\n] as const;\n\nexport type OdysseyStackProps = {\n  children?: MuiStackProps[\"children\"];\n  /**\n   * The component used for the root node. Either a string to use a HTML element or a component.\n   */\n  component?: MuiStackProps[\"component\"];\n  /**\n   * Defines the flex-direction style property. It is applied for all screen sizes.\n   */\n  direction?: (typeof stackDirectionValues)[number];\n  /**\n   * Defines the space between immediate children.\n   */\n  spacing?: (typeof stackSpacingValues)[number];\n  sx?: MuiStackProps[\"sx\"];\n};\n\nconst Stack = ({\n  children,\n  direction = \"column\",\n  spacing = 2,\n}: OdysseyStackProps) => {\n  return (\n    <MuiStack direction={direction} spacing={spacing}>\n      {children}\n    </MuiStack>\n  );\n};\n\nconst MemoizedStack = memo(Stack);\nMemoizedStack.displayName = \"Stack\";\n\nexport { MemoizedStack as Stack };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAQ,OAAO;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAG7B,OAAO,MAAMC,kBAAkB,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAU;AACzE,OAAO,MAAMC,oBAAoB,GAAG,CAClC,KAAK,EACL,aAAa,EACb,QAAQ,EACR,gBAAgB,CACR;AAmBV,MAAMC,KAAK,GAAGA,CAAC;EACbC,QAAQ;EACRC,SAAS,GAAG,QAAQ;EACpBC,OAAO,GAAG;AACO,CAAC,KAAK;EACvB,OACEN,IAAA,CAAAO,MAAA;IAAUF,SAAS,EAAEA,SAAU;IAACC,OAAO,EAAEA,OAAQ;IAAAF,QAAA,EAC9CA;EAAQ,CACD,CAAC;AAEf,CAAC;AAED,MAAMI,aAAa,GAAGV,IAAI,CAACK,KAAK,CAAC;AACjCK,aAAa,CAACC,WAAW,GAAG,OAAO;AAEnC,SAASD,aAAa,IAAIL,KAAK","ignoreList":[]}
+{"version":3,"file":"Stack.js","names":["memo","jsx","_jsx","stackSpacingValues","stackDirectionValues","Stack","children","direction","spacing","_Stack","MemoizedStack","displayName"],"sources":["../../src/Stack.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { Stack as MuiStack, StackProps as MuiStackProps } from \"@mui/material\";\nimport { memo } from \"react\";\n\nexport const stackSpacingValues = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] as const;\nexport const stackDirectionValues = [\n  \"row\",\n  \"row-reverse\",\n  \"column\",\n  \"column-reverse\",\n] as const;\n\nexport type OdysseyStackProps = {\n  children?: MuiStackProps[\"children\"];\n  /**\n   * The component used for the root node. Either a string to use a HTML element or a component.\n   */\n  component?: MuiStackProps[\"component\"];\n  /**\n   * Defines the flex-direction style property. It is applied for all screen sizes.\n   */\n  direction?: (typeof stackDirectionValues)[number];\n  /**\n   * Defines the space between immediate children.\n   */\n  spacing?: (typeof stackSpacingValues)[number];\n  sx?: MuiStackProps[\"sx\"];\n};\n\nconst Stack = ({\n  children,\n  direction = \"column\",\n  spacing = 2,\n}: OdysseyStackProps) => {\n  return (\n    <MuiStack direction={direction} spacing={spacing}>\n      {children}\n    </MuiStack>\n  );\n};\n\nconst MemoizedStack = memo(Stack);\nMemoizedStack.displayName = \"Stack\";\n\nexport { MemoizedStack as Stack };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,SAASA,IAAI,QAAQ,OAAO;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE7B,OAAO,MAAMC,kBAAkB,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAU;AACzE,OAAO,MAAMC,oBAAoB,GAAG,CAClC,KAAK,EACL,aAAa,EACb,QAAQ,EACR,gBAAgB,CACR;AAmBV,MAAMC,KAAK,GAAGA,CAAC;EACbC,QAAQ;EACRC,SAAS,GAAG,QAAQ;EACpBC,OAAO,GAAG;AACO,CAAC,KAAK;EACvB,OACEN,IAAA,CAAAO,MAAA;IAAUF,SAAS,EAAEA,SAAU;IAACC,OAAO,EAAEA,OAAQ;IAAAF,QAAA,EAC9CA;EAAQ,CACD,CAAC;AAEf,CAAC;AAED,MAAMI,aAAa,GAAGV,IAAI,CAACK,KAAK,CAAC;AACjCK,aAAa,CAACC,WAAW,GAAG,OAAO;AAEnC,SAASD,aAAa,IAAIL,KAAK","ignoreList":[]}

package/dist/esm/Status.js

@@ -10,7 +10,6 @@ import _Chip from "@mui/material/Chip";
  *
  * See the License for the specific language governing permissions and limitations under the License.
  */
-
 import { memo } from "react";
 import { useMuiProps } from "./MuiPropsContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";

package/dist/esm/Status.js.map

@@ -1 +1 @@
-{"version":3,"file":"Status.js","names":["memo","useMuiProps","jsx","_jsx","statusSeverityValues","statusVariantValues","Status","ariaDescribedBy","label","severity","testId","translate","variant","muiProps","_Chip","color","MemoizedStatus","displayName"],"sources":["../../src/Status.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { memo } from \"react\";\nimport { Chip } from \"@mui/material\";\n\nimport { useMuiProps } from \"./MuiPropsContext.js\";\nimport type { HtmlProps } from \"./HtmlProps.js\";\n\nexport const statusSeverityValues = [\n  \"default\",\n  \"error\",\n  \"info\",\n  \"success\",\n  \"warning\",\n] as const;\nexport const statusVariantValues = [\"lamp\", \"pill\"] as const;\n\nexport type StatusProps = {\n  /**\n   * The text content of the Status\n   */\n  label: string;\n  /**\n   * Determine the color and icon of the Status\n   */\n  severity: (typeof statusSeverityValues)[number];\n  /**\n   * The style of the Status indicator\n   */\n  variant?: (typeof statusVariantValues)[number];\n} & Pick<HtmlProps, \"ariaDescribedBy\" | \"testId\" | \"translate\">;\n\nconst Status = ({\n  ariaDescribedBy,\n  label,\n  severity,\n  testId,\n  translate,\n  variant = \"pill\",\n}: StatusProps) => {\n  const muiProps = useMuiProps();\n\n  return (\n    <Chip\n      {...muiProps}\n      aria-describedby={ariaDescribedBy}\n      color={severity}\n      data-se={testId}\n      label={label}\n      translate={translate}\n      variant={variant}\n    />\n  );\n};\n\nconst MemoizedStatus = memo(Status);\nMemoizedStatus.displayName = \"Status\";\n\nexport { MemoizedStatus as Status };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAQ,OAAO;AAG5B,SAASC,WAAW,QAAQ,sBAAsB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGnD,OAAO,MAAMC,oBAAoB,GAAG,CAClC,SAAS,EACT,OAAO,EACP,MAAM,EACN,SAAS,EACT,SAAS,CACD;AACV,OAAO,MAAMC,mBAAmB,GAAG,CAAC,MAAM,EAAE,MAAM,CAAU;AAiB5D,MAAMC,MAAM,GAAGA,CAAC;EACdC,eAAe;EACfC,KAAK;EACLC,QAAQ;EACRC,MAAM;EACNC,SAAS;EACTC,OAAO,GAAG;AACC,CAAC,KAAK;EACjB,MAAMC,QAAQ,GAAGZ,WAAW,CAAC,CAAC;EAE9B,OACEE,IAAA,CAAAW,KAAA;IAAA,GACMD,QAAQ;IACZ,oBAAkBN,eAAgB;IAClCQ,KAAK,EAAEN,QAAS;IAChB,WAASC,MAAO;IAChBF,KAAK,EAAEA,KAAM;IACbG,SAAS,EAAEA,SAAU;IACrBC,OAAO,EAAEA;EAAQ,CAClB,CAAC;AAEN,CAAC;AAED,MAAMI,cAAc,GAAGhB,IAAI,CAACM,MAAM,CAAC;AACnCU,cAAc,CAACC,WAAW,GAAG,QAAQ;AAErC,SAASD,cAAc,IAAIV,MAAM","ignoreList":[]}
+{"version":3,"file":"Status.js","names":["memo","useMuiProps","jsx","_jsx","statusSeverityValues","statusVariantValues","Status","ariaDescribedBy","label","severity","testId","translate","variant","muiProps","_Chip","color","MemoizedStatus","displayName"],"sources":["../../src/Status.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { Chip } from \"@mui/material\";\nimport { memo } from \"react\";\n\nimport type { HtmlProps } from \"./HtmlProps.js\";\n\nimport { useMuiProps } from \"./MuiPropsContext.js\";\n\nexport const statusSeverityValues = [\n  \"default\",\n  \"error\",\n  \"info\",\n  \"success\",\n  \"warning\",\n] as const;\nexport const statusVariantValues = [\"lamp\", \"pill\"] as const;\n\nexport type StatusProps = {\n  /**\n   * The text content of the Status\n   */\n  label: string;\n  /**\n   * Determine the color and icon of the Status\n   */\n  severity: (typeof statusSeverityValues)[number];\n  /**\n   * The style of the Status indicator\n   */\n  variant?: (typeof statusVariantValues)[number];\n} & Pick<HtmlProps, \"ariaDescribedBy\" | \"testId\" | \"translate\">;\n\nconst Status = ({\n  ariaDescribedBy,\n  label,\n  severity,\n  testId,\n  translate,\n  variant = \"pill\",\n}: StatusProps) => {\n  const muiProps = useMuiProps();\n\n  return (\n    <Chip\n      {...muiProps}\n      aria-describedby={ariaDescribedBy}\n      color={severity}\n      data-se={testId}\n      label={label}\n      translate={translate}\n      variant={variant}\n    />\n  );\n};\n\nconst MemoizedStatus = memo(Status);\nMemoizedStatus.displayName = \"Status\";\n\nexport { MemoizedStatus as Status };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,SAASA,IAAI,QAAQ,OAAO;AAI5B,SAASC,WAAW,QAAQ,sBAAsB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEnD,OAAO,MAAMC,oBAAoB,GAAG,CAClC,SAAS,EACT,OAAO,EACP,MAAM,EACN,SAAS,EACT,SAAS,CACD;AACV,OAAO,MAAMC,mBAAmB,GAAG,CAAC,MAAM,EAAE,MAAM,CAAU;AAiB5D,MAAMC,MAAM,GAAGA,CAAC;EACdC,eAAe;EACfC,KAAK;EACLC,QAAQ;EACRC,MAAM;EACNC,SAAS;EACTC,OAAO,GAAG;AACC,CAAC,KAAK;EACjB,MAAMC,QAAQ,GAAGZ,WAAW,CAAC,CAAC;EAE9B,OACEE,IAAA,CAAAW,KAAA;IAAA,GACMD,QAAQ;IACZ,oBAAkBN,eAAgB;IAClCQ,KAAK,EAAEN,QAAS;IAChB,WAASC,MAAO;IAChBF,KAAK,EAAEA,KAAM;IACbG,SAAS,EAAEA,SAAU;IACrBC,OAAO,EAAEA;EAAQ,CAClB,CAAC;AAEN,CAAC;AAED,MAAMI,cAAc,GAAGhB,IAAI,CAACM,MAAM,CAAC;AACnCU,cAAc,CAACC,WAAW,GAAG,QAAQ;AAErC,SAASD,cAAc,IAAIV,MAAM","ignoreList":[]}

package/dist/esm/Surface.js

@@ -11,8 +11,8 @@ import _Paper from "@mui/material/Paper";
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { memo } from "react";
 import styled from "@emotion/styled";
+import { memo } from "react";
 import { useOdysseyDesignTokens } from "./OdysseyDesignTokensContext.js";
 import { OdysseyThemeProvider } from "./OdysseyThemeProvider.js";
 import { useContrastModeContext } from "./useContrastMode.js";

package/dist/esm/Surface.js.map

@@ -1 +1 @@
-{"version":3,"file":"Surface.js","names":["memo","styled","useOdysseyDesignTokens","OdysseyThemeProvider","useContrastModeContext","jsx","_jsx","StyledContainer","_Paper","shouldForwardProp","prop","contrastMode","odysseyDesignTokens","borderRadius","Spacing4","padding","Spacing5","border","HueNeutral100","boxShadow","Surface","children","MemoizedSurface","displayName"],"sources":["../../src/Surface.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { memo, ReactNode } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { Paper as MuiPaper } from \"@mui/material\";\n\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"./OdysseyDesignTokensContext.js\";\nimport { OdysseyThemeProvider } from \"./OdysseyThemeProvider.js\";\nimport { useContrastModeContext, ContrastMode } from \"./useContrastMode.js\";\n\nconst StyledContainer = styled(MuiPaper, {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"contrastMode\",\n})<{\n  contrastMode: ContrastMode;\n  odysseyDesignTokens: DesignTokens;\n}>(({ contrastMode, odysseyDesignTokens }) => ({\n  borderRadius: odysseyDesignTokens.Spacing4,\n  padding: odysseyDesignTokens.Spacing5,\n  border:\n    contrastMode === \"lowContrast\"\n      ? `1px solid ${odysseyDesignTokens.HueNeutral100}`\n      : \"none\",\n  boxShadow: \"none\",\n}));\n\nexport type SurfaceProps = {\n  children: ReactNode;\n};\n\nconst Surface = ({ children }: SurfaceProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const { contrastMode } = useContrastModeContext();\n\n  return (\n    <StyledContainer\n      contrastMode={contrastMode}\n      odysseyDesignTokens={odysseyDesignTokens}\n    >\n      <OdysseyThemeProvider>{children}</OdysseyThemeProvider>\n    </StyledContainer>\n  );\n};\n\nconst MemoizedSurface = memo(Surface);\nMemoizedSurface.displayName = \"Surface\";\n\nexport { MemoizedSurface as Surface };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAmB,OAAO;AACvC,OAAOC,MAAM,MAAM,iBAAiB;AAGpC,SAEEC,sBAAsB,QACjB,iCAAiC;AACxC,SAASC,oBAAoB,QAAQ,2BAA2B;AAChE,SAASC,sBAAsB,QAAsB,sBAAsB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE5E,MAAMC,eAAe,GAAGN,MAAM,CAAAO,MAAA,EAAW;EACvCC,iBAAiB,EAAGC,IAAI,IACtBA,IAAI,KAAK,qBAAqB,IAAIA,IAAI,KAAK;AAC/C,CAAC,CAAC,CAGC,CAAC;EAAEC,YAAY;EAAEC;AAAoB,CAAC,MAAM;EAC7CC,YAAY,EAAED,mBAAmB,CAACE,QAAQ;EAC1CC,OAAO,EAAEH,mBAAmB,CAACI,QAAQ;EACrCC,MAAM,EACJN,YAAY,KAAK,aAAa,GAC1B,aAAaC,mBAAmB,CAACM,aAAa,EAAE,GAChD,MAAM;EACZC,SAAS,EAAE;AACb,CAAC,CAAC,CAAC;AAMH,MAAMC,OAAO,GAAGA,CAAC;EAAEC;AAAuB,CAAC,KAAK;EAC9C,MAAMT,mBAAmB,GAAGV,sBAAsB,CAAC,CAAC;EACpD,MAAM;IAAES;EAAa,CAAC,GAAGP,sBAAsB,CAAC,CAAC;EAEjD,OACEE,IAAA,CAACC,eAAe;IACdI,YAAY,EAAEA,YAAa;IAC3BC,mBAAmB,EAAEA,mBAAoB;IAAAS,QAAA,EAEzCf,IAAA,CAACH,oBAAoB;MAAAkB,QAAA,EAAEA;IAAQ,CAAuB;EAAC,CACxC,CAAC;AAEtB,CAAC;AAED,MAAMC,eAAe,GAAGtB,IAAI,CAACoB,OAAO,CAAC;AACrCE,eAAe,CAACC,WAAW,GAAG,SAAS;AAEvC,SAASD,eAAe,IAAIF,OAAO","ignoreList":[]}
+{"version":3,"file":"Surface.js","names":["styled","memo","useOdysseyDesignTokens","OdysseyThemeProvider","useContrastModeContext","jsx","_jsx","StyledContainer","_Paper","shouldForwardProp","prop","contrastMode","odysseyDesignTokens","borderRadius","Spacing4","padding","Spacing5","border","HueNeutral100","boxShadow","Surface","children","MemoizedSurface","displayName"],"sources":["../../src/Surface.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport styled from \"@emotion/styled\";\nimport { Paper as MuiPaper } from \"@mui/material\";\nimport { memo, ReactNode } from \"react\";\n\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"./OdysseyDesignTokensContext.js\";\nimport { OdysseyThemeProvider } from \"./OdysseyThemeProvider.js\";\nimport { ContrastMode, useContrastModeContext } from \"./useContrastMode.js\";\n\nconst StyledContainer = styled(MuiPaper, {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"contrastMode\",\n})<{\n  contrastMode: ContrastMode;\n  odysseyDesignTokens: DesignTokens;\n}>(({ contrastMode, odysseyDesignTokens }) => ({\n  borderRadius: odysseyDesignTokens.Spacing4,\n  padding: odysseyDesignTokens.Spacing5,\n  border:\n    contrastMode === \"lowContrast\"\n      ? `1px solid ${odysseyDesignTokens.HueNeutral100}`\n      : \"none\",\n  boxShadow: \"none\",\n}));\n\nexport type SurfaceProps = {\n  children: ReactNode;\n};\n\nconst Surface = ({ children }: SurfaceProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const { contrastMode } = useContrastModeContext();\n\n  return (\n    <StyledContainer\n      contrastMode={contrastMode}\n      odysseyDesignTokens={odysseyDesignTokens}\n    >\n      <OdysseyThemeProvider>{children}</OdysseyThemeProvider>\n    </StyledContainer>\n  );\n};\n\nconst MemoizedSurface = memo(Surface);\nMemoizedSurface.displayName = \"Surface\";\n\nexport { MemoizedSurface as Surface };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,MAAM,MAAM,iBAAiB;AAEpC,SAASC,IAAI,QAAmB,OAAO;AAEvC,SAEEC,sBAAsB,QACjB,iCAAiC;AACxC,SAASC,oBAAoB,QAAQ,2BAA2B;AAChE,SAAuBC,sBAAsB,QAAQ,sBAAsB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE5E,MAAMC,eAAe,GAAGP,MAAM,CAAAQ,MAAA,EAAW;EACvCC,iBAAiB,EAAGC,IAAI,IACtBA,IAAI,KAAK,qBAAqB,IAAIA,IAAI,KAAK;AAC/C,CAAC,CAAC,CAGC,CAAC;EAAEC,YAAY;EAAEC;AAAoB,CAAC,MAAM;EAC7CC,YAAY,EAAED,mBAAmB,CAACE,QAAQ;EAC1CC,OAAO,EAAEH,mBAAmB,CAACI,QAAQ;EACrCC,MAAM,EACJN,YAAY,KAAK,aAAa,GAC1B,aAAaC,mBAAmB,CAACM,aAAa,EAAE,GAChD,MAAM;EACZC,SAAS,EAAE;AACb,CAAC,CAAC,CAAC;AAMH,MAAMC,OAAO,GAAGA,CAAC;EAAEC;AAAuB,CAAC,KAAK;EAC9C,MAAMT,mBAAmB,GAAGV,sBAAsB,CAAC,CAAC;EACpD,MAAM;IAAES;EAAa,CAAC,GAAGP,sBAAsB,CAAC,CAAC;EAEjD,OACEE,IAAA,CAACC,eAAe;IACdI,YAAY,EAAEA,YAAa;IAC3BC,mBAAmB,EAAEA,mBAAoB;IAAAS,QAAA,EAEzCf,IAAA,CAACH,oBAAoB;MAAAkB,QAAA,EAAEA;IAAQ,CAAuB;EAAC,CACxC,CAAC;AAEtB,CAAC;AAED,MAAMC,eAAe,GAAGrB,IAAI,CAACmB,OAAO,CAAC;AACrCE,eAAe,CAACC,WAAW,GAAG,SAAS;AAEvC,SAASD,eAAe,IAAIF,OAAO","ignoreList":[]}

package/dist/esm/Switch.js

@@ -11,9 +11,9 @@ import _FormLabel from "@mui/material/FormLabel";
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
+import styled from "@emotion/styled";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
 import { Box } from "./Box.js";
 import { FieldHint } from "./FieldHint.js";
 import { CheckIcon } from "./icons.generated/index.js";
@@ -190,8 +190,8 @@ const SwitchLabel = ({
       odysseyDesignTokens: odysseyDesignTokens,
       children: [label, hint && _jsx(FieldHint, {
         id: hintId,
-        text: hint,
-        LinkComponent: HintLinkComponent
+        LinkComponent: HintLinkComponent,
+        text: hint
       })]
     })
   });
@@ -273,8 +273,8 @@ const Switch = ({
         inputId: inputId,
         isDisabled: isDisabled,
         isFullWidth: isFullWidth,
-        label: label,
-        isReadOnly: isReadOnly
+        isReadOnly: isReadOnly,
+        label: label
       }), _jsxs(SwitchContainer, {
         children: [_jsx(HiddenCheckbox, {
           ...inputValues,
@@ -285,13 +285,13 @@ const Switch = ({
           "data-se": testId,
           disabled: isDisabled,
           id: inputId,
+          isReadOnly: isReadOnly,
           name: name ?? inputId,
-          onChange: handleOnChange,
           odysseyDesignTokens: odysseyDesignTokens,
-          type: "checkbox",
-          value: value,
+          onChange: handleOnChange,
           readOnly: isReadOnly,
-          isReadOnly: isReadOnly
+          type: "checkbox",
+          value: value
         }), _jsxs(SwitchTrack, {
           "data-switch-track": true,
           isChecked: internalSwitchChecked,