@okta/odyssey-react-mui 0.22.0 → 0.24.0

package/dist/OdysseyTranslationProvider.js

@@ -0,0 +1,47 @@
+/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { useEffect } from "react";
+import i18n, { defaultNS, resources } from "./OdysseyI18n.js";
+import { I18nextProvider } from "react-i18next";
+import { jsx as _jsx } from "react/jsx-runtime";
+const mergeBundleOverrides = (languageCode, translationOverrides) => {
+  const bundle = resources[languageCode];
+  const overrides = translationOverrides[languageCode];
+  return {
+    ...bundle,
+    ...overrides
+  };
+};
+export const OdysseyTranslationProvider = _ref => {
+  let {
+    children,
+    languageCode,
+    translationOverrides
+  } = _ref;
+  useEffect(() => {
+    i18n.changeLanguage(languageCode || window.navigator.language);
+  }, [languageCode]);
+  useEffect(() => {
+    if (translationOverrides) {
+      Object.keys(translationOverrides).forEach(language => {
+        const bundle = mergeBundleOverrides(language, translationOverrides);
+        i18n.addResourceBundle(language, defaultNS, bundle);
+      });
+    }
+  }, [translationOverrides]);
+  return _jsx(I18nextProvider, {
+    i18n: i18n,
+    children: children
+  });
+};
+//# sourceMappingURL=OdysseyTranslationProvider.js.map

package/dist/OdysseyTranslationProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OdysseyTranslationProvider.js","names":["useEffect","i18n","defaultNS","resources","I18nextProvider","jsx","_jsx","mergeBundleOverrides","languageCode","translationOverrides","bundle","overrides","OdysseyTranslationProvider","_ref","children","changeLanguage","window","navigator","language","Object","keys","forEach","addResourceBundle"],"sources":["../src/OdysseyTranslationProvider.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 { ReactElement, useEffect } from \"react\";\n\nimport { SupportedLanguages } from \"./OdysseyTranslationProvider.types\";\n\nimport i18n, { defaultNS, resources } from \"./OdysseyI18n\";\nimport { I18nextProvider } from \"react-i18next\";\n\nexport type TranslationOverrides = {\n  [key in SupportedLanguages]?: Partial<(typeof resources)[\"en\"]>;\n};\n\ntype OdysseyTranslationProviderProps = {\n  children: ReactElement;\n  languageCode?: SupportedLanguages;\n  translationOverrides?: TranslationOverrides;\n};\n\nconst mergeBundleOverrides = (\n  languageCode: SupportedLanguages,\n  translationOverrides: TranslationOverrides\n) => {\n  const bundle = resources[languageCode];\n  const overrides = translationOverrides[languageCode];\n  return {\n    ...bundle,\n    ...overrides,\n  };\n};\n\nexport const OdysseyTranslationProvider = ({\n  children,\n  languageCode,\n  translationOverrides,\n}: OdysseyTranslationProviderProps) => {\n  useEffect(() => {\n    // Defaults to the browser's language if available otherwise `en` will be used\n    i18n.changeLanguage(languageCode || window.navigator.language);\n  }, [languageCode]);\n\n  useEffect(() => {\n    if (translationOverrides) {\n      Object.keys(translationOverrides).forEach((language) => {\n        const bundle = mergeBundleOverrides(\n          language as SupportedLanguages,\n          translationOverrides\n        );\n        i18n.addResourceBundle(language, defaultNS, bundle);\n      });\n    }\n  }, [translationOverrides]);\n\n  return <I18nextProvider i18n={i18n}>{children}</I18nextProvider>;\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAAuBA,SAAS,QAAQ,OAAO;AAAC,OAIzCC,IAAI,IAAIC,SAAS,EAAEC,SAAS;AACnC,SAASC,eAAe,QAAQ,eAAe;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAYhD,MAAMC,oBAAoB,GAAGA,CAC3BC,YAAgC,EAChCC,oBAA0C,KACvC;EACH,MAAMC,MAAM,GAAGP,SAAS,CAACK,YAAY,CAAC;EACtC,MAAMG,SAAS,GAAGF,oBAAoB,CAACD,YAAY,CAAC;EACpD,OAAO;IACL,GAAGE,MAAM;IACT,GAAGC;EACL,CAAC;AACH,CAAC;AAED,OAAO,MAAMC,0BAA0B,GAAGC,IAAA,IAIH;EAAA,IAJI;IACzCC,QAAQ;IACRN,YAAY;IACZC;EAC+B,CAAC,GAAAI,IAAA;EAChCb,SAAS,CAAC,MAAM;IAEdC,IAAI,CAACc,cAAc,CAACP,YAAY,IAAIQ,MAAM,CAACC,SAAS,CAACC,QAAQ,CAAC;EAChE,CAAC,EAAE,CAACV,YAAY,CAAC,CAAC;EAElBR,SAAS,CAAC,MAAM;IACd,IAAIS,oBAAoB,EAAE;MACxBU,MAAM,CAACC,IAAI,CAACX,oBAAoB,CAAC,CAACY,OAAO,CAAEH,QAAQ,IAAK;QACtD,MAAMR,MAAM,GAAGH,oBAAoB,CACjCW,QAAQ,EACRT,oBACF,CAAC;QACDR,IAAI,CAACqB,iBAAiB,CAACJ,QAAQ,EAAEhB,SAAS,EAAEQ,MAAM,CAAC;MACrD,CAAC,CAAC;IACJ;EACF,CAAC,EAAE,CAACD,oBAAoB,CAAC,CAAC;EAE1B,OAAOH,IAAA,CAACF,eAAe;IAACH,IAAI,EAAEA,IAAK;IAAAa,QAAA,EAAEA;EAAQ,CAAkB,CAAC;AAClE,CAAC"}

package/dist/OdysseyTranslationProvider.types.js

@@ -0,0 +1,14 @@
+/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+export const supportedLanguages = ["cs", "da", "de", "el", "en", "es", "fi", "fr", "hu", "id", "it", "ja", "ko", "ms", "nb", "nl-NL", "pl", "pt-BR", "ro", "ru", "sv", "th", "tr", "uk", "zh-CN", "zh-TW"];
+//# sourceMappingURL=OdysseyTranslationProvider.types.js.map

package/dist/OdysseyTranslationProvider.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OdysseyTranslationProvider.types.js","names":["supportedLanguages"],"sources":["../src/OdysseyTranslationProvider.types.ts"],"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\nexport const supportedLanguages = [\n  \"cs\", // Czech\n  \"da\", // Danish\n  \"de\", // German\n  \"el\", // Greek\n  \"en\", // English\n  \"es\", // Spanish\n  \"fi\", // Finnish\n  \"fr\", // French\n  \"hu\", // Hungarian\n  \"id\", // Indonesian\n  \"it\", // Italian\n  \"ja\", // Japanese\n  \"ko\", // Korean\n  \"ms\", // Malaysian\n  \"nb\", // Norwegian\n  \"nl-NL\", // Dutch\n  \"pl\", // Polish\n  \"pt-BR\", // Portuguese (Brazil)\n  \"ro\", // Romanian\n  \"ru\", // Russian\n  \"sv\", // Swedish\n  \"th\", // Thai\n  \"tr\", // Turkish\n  \"uk\", // Ukrainian\n  \"zh-CN\", // Chinese (PRC)\n  \"zh-TW\", // Chinese\n] as const;\n\nexport type SupportedLanguages = (typeof supportedLanguages)[number];\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAO,MAAMA,kBAAkB,GAAG,CAChC,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,OAAO,CACC"}

package/dist/PasswordField.js

@@ -1,5 +1,16 @@
 import _InputBase from "@mui/material/InputBase";
 import _InputAdornment from "@mui/material/InputAdornment";
+/*!
+ * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
 import { forwardRef, memo, useCallback, useState } from "react";
 import { EyeIcon, EyeOffIcon, IconButton } from "./index.js";
 import { Field } from "./Field.js";
@@ -7,11 +18,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const PasswordField = forwardRef((_ref, ref) => {
   let {
     autoCompleteType,
-    autoFocus,
     errorMessage,
+    hasInitialFocus,
     hint,
     id: idOverride,
     isDisabled = false,
+    isOptional = false,
     isReadOnly,
     label,
     onChange,
@@ -32,7 +44,7 @@ const PasswordField = forwardRef((_ref, ref) => {
     return _jsx(_InputBase, {
       "aria-describedby": ariaDescribedBy,
       autoComplete: autoCompleteType,
-      autoFocus: autoFocus,
+      autoFocus: hasInitialFocus,
       endAdornment: _jsx(_InputAdornment, {
         position: "end",
         children: _jsx(IconButton, {
@@ -43,26 +55,31 @@ const PasswordField = forwardRef((_ref, ref) => {
         })
       }),
       id: id,
+      name: id,
       onChange: onChange,
       onFocus: onFocus,
       onBlur: onBlur,
       placeholder: placeholder,
       readOnly: isReadOnly,
       ref: ref,
+      required: !isOptional,
       type: inputType,
       value: value
     });
-  }, [autoCompleteType, autoFocus, togglePasswordVisibility, inputType, onChange, onFocus, onBlur, placeholder, isReadOnly, ref, value]);
+  }, [autoCompleteType, hasInitialFocus, togglePasswordVisibility, inputType, onChange, onFocus, onBlur, placeholder, isOptional, isReadOnly, ref, value]);
   return _jsx(Field, {
     errorMessage: errorMessage,
+    fieldType: "single",
     hasVisibleLabel: true,
     hint: hint,
     id: idOverride,
     isDisabled: isDisabled,
+    isOptional: isOptional,
     label: label,
     renderFieldComponent: renderFieldComponent
   });
 });
 const MemoizedPasswordField = memo(PasswordField);
+MemoizedPasswordField.displayName = "PasswordField";
 export { MemoizedPasswordField as PasswordField };
 //# sourceMappingURL=PasswordField.js.map

package/dist/PasswordField.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordField.js","names":["forwardRef","memo","useCallback","useState","EyeIcon","EyeOffIcon","IconButton","Field","PasswordField","ref","autoCompleteType","autoFocus","errorMessage","hint","id","idOverride","isDisabled","isReadOnly","label","onChange","onFocus","onBlur","placeholder","value","inputType","setInputType","togglePasswordVisibility","renderFieldComponent","ariaDescribedBy","MemoizedPasswordField"],"sources":["../src/PasswordField.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 } from \"@mui/material\";\nimport {\n  ChangeEventHandler,\n  FocusEventHandler,\n  forwardRef,\n  memo,\n  useCallback,\n  useState,\n} from \"react\";\n\nimport { EyeIcon, EyeOffIcon, IconButton } from \"./\";\nimport { Field } from \"./Field\";\n\nexport type PasswordFieldProps = {\n  /**\n   * If `true`, the component will receive focus automatically.\n   */\n  autoFocus?: boolean;\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?: \"current-password\" | \"new-password\";\n  /**\n   * If `error` is not undefined, the `input` will indicate an error.\n   */\n  errorMessage?: string;\n  /**\n   * The helper text content.\n   */\n  hint?: string;\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   * It prevents the user from changing the value of the field\n   */\n  isReadOnly?: boolean;\n  /**\n   * If `true`, the `input` element is required.\n   */\n  isRequired?: boolean;\n  /**\n   * The label for the `input` element.\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 `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   * The value of the `input` element, required for a controlled component.\n   */\n  value?: string;\n};\n\nconst PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(\n  (\n    {\n      autoCompleteType,\n      autoFocus,\n      errorMessage,\n      hint,\n      id: idOverride,\n      isDisabled = false,\n      isReadOnly,\n      label,\n      onChange,\n      onFocus,\n      onBlur,\n      placeholder,\n      value,\n    },\n    ref\n  ) => {\n    const [inputType, setInputType] = useState(\"password\");\n\n    const togglePasswordVisibility = useCallback(() => {\n      setInputType((inputType) =>\n        inputType === \"password\" ? \"text\" : \"password\"\n      );\n    }, []);\n\n    const renderFieldComponent = useCallback(\n      ({ ariaDescribedBy, id }) => (\n        <InputBase\n          aria-describedby={ariaDescribedBy}\n          autoComplete={autoCompleteType}\n          /* eslint-disable-next-line jsx-a11y/no-autofocus */\n          autoFocus={autoFocus}\n          endAdornment={\n            <InputAdornment position=\"end\">\n              <IconButton\n                aria-label=\"toggle password visibility\"\n                edge=\"end\"\n                onClick={togglePasswordVisibility}\n              >\n                {inputType === \"password\" ? <EyeIcon /> : <EyeOffIcon />}\n              </IconButton>\n            </InputAdornment>\n          }\n          id={id}\n          onChange={onChange}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          placeholder={placeholder}\n          readOnly={isReadOnly}\n          ref={ref}\n          type={inputType}\n          value={value}\n        />\n      ),\n      [\n        autoCompleteType,\n        autoFocus,\n        togglePasswordVisibility,\n        inputType,\n        onChange,\n        onFocus,\n        onBlur,\n        placeholder,\n        isReadOnly,\n        ref,\n        value,\n      ]\n    );\n\n    return (\n      <Field\n        errorMessage={errorMessage}\n        hasVisibleLabel\n        hint={hint}\n        id={idOverride}\n        isDisabled={isDisabled}\n        label={label}\n        renderFieldComponent={renderFieldComponent}\n      />\n    );\n  }\n);\n\nconst MemoizedPasswordField = memo(PasswordField);\n\nexport { MemoizedPasswordField as PasswordField };\n"],"mappings":";;AAaA,SAGEA,UAHF,EAIEC,IAJF,EAKEC,WALF,EAMEC,QANF,QAOO,OAPP;SASSC,O,EAASC,U,EAAYC,U;SACrBC,K;;AA+DT,MAAMC,aAAa,GAAGR,UAAU,CAC9B,OAgBES,GAhBF,KAiBK;EAAA,IAhBH;IACEC,gBADF;IAEEC,SAFF;IAGEC,YAHF;IAIEC,IAJF;IAKEC,EAAE,EAAEC,UALN;IAMEC,UAAU,GAAG,KANf;IAOEC,UAPF;IAQEC,KARF;IASEC,QATF;IAUEC,OAVF;IAWEC,MAXF;IAYEC,WAZF;IAaEC;EAbF,CAgBG;EACH,MAAM,CAACC,SAAD,EAAYC,YAAZ,IAA4BtB,QAAQ,CAAC,UAAD,CAA1C;EAEA,MAAMuB,wBAAwB,GAAGxB,WAAW,CAAC,MAAM;IACjDuB,YAAY,CAAED,SAAD,IACXA,SAAS,KAAK,UAAd,GAA2B,MAA3B,GAAoC,UAD1B,CAAZ;EAGD,CAJ2C,EAIzC,EAJyC,CAA5C;EAMA,MAAMG,oBAAoB,GAAGzB,WAAW,CACtC;IAAA,IAAC;MAAE0B,eAAF;MAAmBd;IAAnB,CAAD;IAAA,OACE;MACE,oBAAkBc,eADpB;MAEE,YAAY,EAAElB,gBAFhB;MAIE,SAAS,EAAEC,SAJb;MAKE,YAAY,EACV;QAAgB,QAAQ,EAAC,KAAzB;QAAA,UACE,KAAC,UAAD;UACE,cAAW,4BADb;UAEE,IAAI,EAAC,KAFP;UAGE,OAAO,EAAEe,wBAHX;UAAA,UAKGF,SAAS,KAAK,UAAd,GAA2B,KAAC,OAAD,KAA3B,GAAyC,KAAC,UAAD;QAL5C;MADF,EANJ;MAgBE,EAAE,EAAEV,EAhBN;MAiBE,QAAQ,EAAEK,QAjBZ;MAkBE,OAAO,EAAEC,OAlBX;MAmBE,MAAM,EAAEC,MAnBV;MAoBE,WAAW,EAAEC,WApBf;MAqBE,QAAQ,EAAEL,UArBZ;MAsBE,GAAG,EAAER,GAtBP;MAuBE,IAAI,EAAEe,SAvBR;MAwBE,KAAK,EAAED;IAxBT,EADF;EAAA,CADsC,EA6BtC,CACEb,gBADF,EAEEC,SAFF,EAGEe,wBAHF,EAIEF,SAJF,EAKEL,QALF,EAMEC,OANF,EAOEC,MAPF,EAQEC,WARF,EASEL,UATF,EAUER,GAVF,EAWEc,KAXF,CA7BsC,CAAxC;EA4CA,OACE,KAAC,KAAD;IACE,YAAY,EAAEX,YADhB;IAEE,eAAe,MAFjB;IAGE,IAAI,EAAEC,IAHR;IAIE,EAAE,EAAEE,UAJN;IAKE,UAAU,EAAEC,UALd;IAME,KAAK,EAAEE,KANT;IAOE,oBAAoB,EAAES;EAPxB,EADF;AAWD,CAlF6B,CAAhC;AAqFA,MAAME,qBAAqB,GAAG5B,IAAI,CAACO,aAAD,CAAlC;AAEA,SAASqB,qBAAqB,IAAIrB,aAAlC"}
+{"version":3,"file":"PasswordField.js","names":["forwardRef","memo","useCallback","useState","EyeIcon","EyeOffIcon","IconButton","Field","jsx","_jsx","PasswordField","_ref","ref","autoCompleteType","errorMessage","hasInitialFocus","hint","id","idOverride","isDisabled","isOptional","isReadOnly","label","onChange","onFocus","onBlur","placeholder","value","inputType","setInputType","togglePasswordVisibility","renderFieldComponent","_ref2","ariaDescribedBy","_InputBase","autoComplete","autoFocus","endAdornment","_InputAdornment","position","children","edge","onClick","name","readOnly","required","type","fieldType","hasVisibleLabel","MemoizedPasswordField","displayName"],"sources":["../src/PasswordField.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 } from \"@mui/material\";\nimport {\n  ChangeEventHandler,\n  FocusEventHandler,\n  forwardRef,\n  memo,\n  useCallback,\n  useState,\n} from \"react\";\n\nimport { EyeIcon, EyeOffIcon, IconButton } from \"./\";\nimport { Field } from \"./Field\";\n\nexport type PasswordFieldProps = {\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?: \"current-password\" | \"new-password\";\n  /**\n   * If `error` is not undefined, the `input` will indicate an error.\n   */\n  errorMessage?: string;\n  /**\n   * If `true`, the component will receive focus automatically.\n   */\n  hasInitialFocus?: boolean;\n  /**\n   * The helper text content.\n   */\n  hint?: string;\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   * If `true`, the `input` element is not required.\n   */\n  isOptional?: boolean;\n  /**\n   * It prevents the user from changing the value of the field\n   */\n  isReadOnly?: boolean;\n  /**\n   * The label for the `input` element.\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 `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   * The value of the `input` element, required for a controlled component.\n   */\n  value?: string;\n};\n\nconst PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(\n  (\n    {\n      autoCompleteType,\n      errorMessage,\n      hasInitialFocus,\n      hint,\n      id: idOverride,\n      isDisabled = false,\n      isOptional = false,\n      isReadOnly,\n      label,\n      onChange,\n      onFocus,\n      onBlur,\n      placeholder,\n      value,\n    },\n    ref\n  ) => {\n    const [inputType, setInputType] = useState(\"password\");\n\n    const togglePasswordVisibility = useCallback(() => {\n      setInputType((inputType) =>\n        inputType === \"password\" ? \"text\" : \"password\"\n      );\n    }, []);\n\n    const renderFieldComponent = useCallback(\n      ({ ariaDescribedBy, id }) => (\n        <InputBase\n          aria-describedby={ariaDescribedBy}\n          autoComplete={autoCompleteType}\n          /* eslint-disable-next-line jsx-a11y/no-autofocus */\n          autoFocus={hasInitialFocus}\n          endAdornment={\n            <InputAdornment position=\"end\">\n              <IconButton\n                aria-label=\"toggle password visibility\"\n                edge=\"end\"\n                onClick={togglePasswordVisibility}\n              >\n                {inputType === \"password\" ? <EyeIcon /> : <EyeOffIcon />}\n              </IconButton>\n            </InputAdornment>\n          }\n          id={id}\n          name={id}\n          onChange={onChange}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          placeholder={placeholder}\n          readOnly={isReadOnly}\n          ref={ref}\n          required={!isOptional}\n          type={inputType}\n          value={value}\n        />\n      ),\n      [\n        autoCompleteType,\n        hasInitialFocus,\n        togglePasswordVisibility,\n        inputType,\n        onChange,\n        onFocus,\n        onBlur,\n        placeholder,\n        isOptional,\n        isReadOnly,\n        ref,\n        value,\n      ]\n    );\n\n    return (\n      <Field\n        errorMessage={errorMessage}\n        fieldType=\"single\"\n        hasVisibleLabel\n        hint={hint}\n        id={idOverride}\n        isDisabled={isDisabled}\n        isOptional={isOptional}\n        label={label}\n        renderFieldComponent={renderFieldComponent}\n      />\n    );\n  }\n);\n\nconst MemoizedPasswordField = memo(PasswordField);\nMemoizedPasswordField.displayName = \"PasswordField\";\n\nexport { MemoizedPasswordField as PasswordField };\n"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,SAGEA,UAAU,EACVC,IAAI,EACJC,WAAW,EACXC,QAAQ,QACH,OAAO;AAAC,SAENC,OAAO,EAAEC,UAAU,EAAEC,UAAU;AAAA,SAC/BC,KAAK;AAAA,SAAAC,GAAA,IAAAC,IAAA;AA+Dd,MAAMC,aAAa,GAAGV,UAAU,CAC9B,CAAAW,IAAA,EAiBEC,GAAG,KACA;EAAA,IAjBH;IACEC,gBAAgB;IAChBC,YAAY;IACZC,eAAe;IACfC,IAAI;IACJC,EAAE,EAAEC,UAAU;IACdC,UAAU,GAAG,KAAK;IAClBC,UAAU,GAAG,KAAK;IAClBC,UAAU;IACVC,KAAK;IACLC,QAAQ;IACRC,OAAO;IACPC,MAAM;IACNC,WAAW;IACXC;EACF,CAAC,GAAAhB,IAAA;EAGD,MAAM,CAACiB,SAAS,EAAEC,YAAY,CAAC,GAAG1B,QAAQ,CAAC,UAAU,CAAC;EAEtD,MAAM2B,wBAAwB,GAAG5B,WAAW,CAAC,MAAM;IACjD2B,YAAY,CAAED,SAAS,IACrBA,SAAS,KAAK,UAAU,GAAG,MAAM,GAAG,UACtC,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMG,oBAAoB,GAAG7B,WAAW,CACtC8B,KAAA;IAAA,IAAC;MAAEC,eAAe;MAAEhB;IAAG,CAAC,GAAAe,KAAA;IAAA,OACtBvB,IAAA,CAAAyB,UAAA;MACE,oBAAkBD,eAAgB;MAClCE,YAAY,EAAEtB,gBAAiB;MAE/BuB,SAAS,EAAErB,eAAgB;MAC3BsB,YAAY,EACV5B,IAAA,CAAA6B,eAAA;QAAgBC,QAAQ,EAAC,KAAK;QAAAC,QAAA,EAC5B/B,IAAA,CAACH,UAAU;UACT,cAAW,4BAA4B;UACvCmC,IAAI,EAAC,KAAK;UACVC,OAAO,EAAEZ,wBAAyB;UAAAU,QAAA,EAEjCZ,SAAS,KAAK,UAAU,GAAGnB,IAAA,CAACL,OAAO,IAAE,CAAC,GAAGK,IAAA,CAACJ,UAAU,IAAE;QAAC,CAC9C;MAAC,CACC,CACjB;MACDY,EAAE,EAAEA,EAAG;MACP0B,IAAI,EAAE1B,EAAG;MACTM,QAAQ,EAAEA,QAAS;MACnBC,OAAO,EAAEA,OAAQ;MACjBC,MAAM,EAAEA,MAAO;MACfC,WAAW,EAAEA,WAAY;MACzBkB,QAAQ,EAAEvB,UAAW;MACrBT,GAAG,EAAEA,GAAI;MACTiC,QAAQ,EAAE,CAACzB,UAAW;MACtB0B,IAAI,EAAElB,SAAU;MAChBD,KAAK,EAAEA;IAAM,CACd,CAAC;EAAA,CACH,EACD,CACEd,gBAAgB,EAChBE,eAAe,EACfe,wBAAwB,EACxBF,SAAS,EACTL,QAAQ,EACRC,OAAO,EACPC,MAAM,EACNC,WAAW,EACXN,UAAU,EACVC,UAAU,EACVT,GAAG,EACHe,KAAK,CAET,CAAC;EAED,OACElB,IAAA,CAACF,KAAK;IACJO,YAAY,EAAEA,YAAa;IAC3BiC,SAAS,EAAC,QAAQ;IAClBC,eAAe;IACfhC,IAAI,EAAEA,IAAK;IACXC,EAAE,EAAEC,UAAW;IACfC,UAAU,EAAEA,UAAW;IACvBC,UAAU,EAAEA,UAAW;IACvBE,KAAK,EAAEA,KAAM;IACbS,oBAAoB,EAAEA;EAAqB,CAC5C,CAAC;AAEN,CACF,CAAC;AAED,MAAMkB,qBAAqB,GAAGhD,IAAI,CAACS,aAAa,CAAC;AACjDuC,qBAAqB,CAACC,WAAW,GAAG,eAAe;AAEnD,SAASD,qBAAqB,IAAIvC,aAAa"}

package/dist/Radio.js

@@ -1,8 +1,18 @@
 import _Radio from "@mui/material/Radio";
+/*!
+ * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
 import { memo } from "react";
 import { FormControlLabel } from "./index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-
 const Radio = _ref => {
   let {
     isChecked,
@@ -24,7 +34,6 @@ const Radio = _ref => {
     value: value
   });
 };
-
 const MemoizedRadio = memo(Radio);
 export { MemoizedRadio as Radio };
 //# sourceMappingURL=Radio.js.map

package/dist/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","names":["memo","FormControlLabel","Radio","isChecked","isDefaultChecked","isDisabled","hasError","label","name","value","MemoizedRadio"],"sources":["../src/Radio.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 { Radio as MuiRadio } from \"@mui/material\";\nimport { memo } from \"react\";\n\nimport { FormControlLabel } from \".\";\n\nexport type RadioProps = {\n  isChecked?: boolean;\n  isDefaultChecked?: boolean;\n  isDisabled?: boolean;\n  hasError?: boolean;\n  label: string;\n  name?: string;\n  value: string;\n};\n\nconst Radio = ({\n  isChecked,\n  isDefaultChecked,\n  isDisabled,\n  hasError,\n  label,\n  name,\n  value,\n}: RadioProps) => (\n  <FormControlLabel\n    checked={isChecked}\n    className={hasError ? \"Mui-error\" : \"\"}\n    control={<MuiRadio />}\n    defaultChecked={isDefaultChecked}\n    disabled={isDisabled}\n    label={label}\n    name={name}\n    value={value}\n  />\n);\n\nconst MemoizedRadio = memo(Radio);\n\nexport { MemoizedRadio as Radio };\n"],"mappings":";AAaA,SAASA,IAAT,QAAqB,OAArB;SAESC,gB;;;AAYT,MAAMC,KAAK,GAAG;EAAA,IAAC;IACbC,SADa;IAEbC,gBAFa;IAGbC,UAHa;IAIbC,QAJa;IAKbC,KALa;IAMbC,IANa;IAObC;EAPa,CAAD;EAAA,OASZ,KAAC,gBAAD;IACE,OAAO,EAAEN,SADX;IAEE,SAAS,EAAEG,QAAQ,GAAG,WAAH,GAAiB,EAFtC;IAGE,OAAO,EAAE,gBAHX;IAIE,cAAc,EAAEF,gBAJlB;IAKE,QAAQ,EAAEC,UALZ;IAME,KAAK,EAAEE,KANT;IAOE,IAAI,EAAEC,IAPR;IAQE,KAAK,EAAEC;EART,EATY;AAAA,CAAd;;AAqBA,MAAMC,aAAa,GAAGV,IAAI,CAACE,KAAD,CAA1B;AAEA,SAASQ,aAAa,IAAIR,KAA1B"}
+{"version":3,"file":"Radio.js","names":["memo","FormControlLabel","jsx","_jsx","Radio","_ref","isChecked","isDefaultChecked","isDisabled","hasError","label","name","value","checked","className","control","_Radio","defaultChecked","disabled","MemoizedRadio"],"sources":["../src/Radio.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 { Radio as MuiRadio } from \"@mui/material\";\nimport { memo } from \"react\";\n\nimport { FormControlLabel } from \".\";\n\nexport type RadioProps = {\n  isChecked?: boolean;\n  isDefaultChecked?: boolean;\n  isDisabled?: boolean;\n  hasError?: boolean;\n  label: string;\n  name?: string;\n  value: string;\n};\n\nconst Radio = ({\n  isChecked,\n  isDefaultChecked,\n  isDisabled,\n  hasError,\n  label,\n  name,\n  value,\n}: RadioProps) => (\n  <FormControlLabel\n    checked={isChecked}\n    className={hasError ? \"Mui-error\" : \"\"}\n    control={<MuiRadio />}\n    defaultChecked={isDefaultChecked}\n    disabled={isDisabled}\n    label={label}\n    name={name}\n    value={value}\n  />\n);\n\nconst MemoizedRadio = memo(Radio);\n\nexport { MemoizedRadio as Radio };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,SAASA,IAAI,QAAQ,OAAO;AAAC,SAEpBC,gBAAgB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAYzB,MAAMC,KAAK,GAAGC,IAAA;EAAA,IAAC;IACbC,SAAS;IACTC,gBAAgB;IAChBC,UAAU;IACVC,QAAQ;IACRC,KAAK;IACLC,IAAI;IACJC;EACU,CAAC,GAAAP,IAAA;EAAA,OACXF,IAAA,CAACF,gBAAgB;IACfY,OAAO,EAAEP,SAAU;IACnBQ,SAAS,EAAEL,QAAQ,GAAG,WAAW,GAAG,EAAG;IACvCM,OAAO,EAAEZ,IAAA,CAAAa,MAAA,IAAW,CAAE;IACtBC,cAAc,EAAEV,gBAAiB;IACjCW,QAAQ,EAAEV,UAAW;IACrBE,KAAK,EAAEA,KAAM;IACbC,IAAI,EAAEA,IAAK;IACXC,KAAK,EAAEA;EAAM,CACd,CAAC;AAAA,CACH;AAED,MAAMO,aAAa,GAAGnB,IAAI,CAACI,KAAK,CAAC;AAEjC,SAASe,aAAa,IAAIf,KAAK"}

package/dist/RadioGroup.js

@@ -1,48 +1,56 @@
 import _RadioGroup from "@mui/material/RadioGroup";
-import { memo, useMemo } from "react";
-import { FormControl, FormLabel, FormHelperText, ScreenReaderText, useUniqueId } from "./index.js";
+/*!
+ * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+import { memo, useCallback } from "react";
+import { Field } from "./Field.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-
 const RadioGroup = _ref => {
   let {
     children,
     defaultValue,
     errorMessage,
     hint,
+    id: idOverride,
     isDisabled,
     label,
-    name,
-    onChange
+    onChange,
+    value
   } = _ref;
-  const ariaDescribedBy = useMemo(() => errorMessage || hint ? [hint && `${name}-hint`, errorMessage && `${name}-error`].filter(Boolean).join(" ") : undefined, [errorMessage, hint, name]);
-  const uniqueName = useUniqueId(name);
-  return _jsxs(FormControl, {
-    component: "fieldset",
-    disabled: isDisabled,
-    error: Boolean(errorMessage),
-    children: [_jsx(FormLabel, {
-      component: "legend",
-      children: label
-    }), hint && _jsx(FormHelperText, {
-      id: `${uniqueName}-hint`,
-      children: hint
-    }), _jsx(_RadioGroup, {
+  const renderFieldComponent = useCallback(_ref2 => {
+    let {
+      ariaDescribedBy,
+      id
+    } = _ref2;
+    return _jsx(_RadioGroup, {
       "aria-describedby": ariaDescribedBy,
       defaultValue: defaultValue,
-      name: uniqueName,
+      id: id,
+      name: id,
       onChange: onChange,
+      value: value,
       children: children
-    }), errorMessage && _jsxs(FormHelperText, {
-      id: `${uniqueName}-error`,
-      error: true,
-      children: [_jsx(ScreenReaderText, {
-        children: "Error:"
-      }), " ", errorMessage]
-    })]
+    });
+  }, [children, defaultValue, onChange, value]);
+  return _jsx(Field, {
+    errorMessage: errorMessage,
+    fieldType: "group",
+    hasVisibleLabel: false,
+    hint: hint,
+    id: idOverride,
+    isDisabled: isDisabled,
+    label: label,
+    renderFieldComponent: renderFieldComponent
   });
 };
-
 const MemoizedRadioGroup = memo(RadioGroup);
 export { MemoizedRadioGroup as RadioGroup };
 //# sourceMappingURL=RadioGroup.js.map

package/dist/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","names":["memo","useMemo","FormControl","FormLabel","FormHelperText","ScreenReaderText","useUniqueId","RadioGroup","children","defaultValue","errorMessage","hint","isDisabled","label","name","onChange","ariaDescribedBy","filter","Boolean","join","undefined","uniqueName","MemoizedRadioGroup"],"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 { RadioGroup as MuiRadioGroup } from \"@mui/material\";\nimport { ChangeEventHandler, memo, ReactElement, useMemo } from \"react\";\n\nimport {\n  FormControl,\n  FormLabel,\n  FormHelperText,\n  Radio,\n  ScreenReaderText,\n  useUniqueId,\n  RadioProps,\n} from \".\";\n\nexport interface RadioGroupProps {\n  /**\n   * The <Radio> components within the group. Must include two or more.\n   */\n  children: Array<ReactElement<typeof Radio>>;\n  /**\n   * The text value of the radio that should be selected by default\n   */\n  defaultValue?: string;\n  /**\n   * The error text for an invalid group\n   */\n  errorMessage?: string;\n  /**\n   * Optional hint text\n   */\n  hint?: string;\n  /**\n   * Disables the whole radio group\n   */\n  isDisabled?: boolean;\n  /**\n   * The text label for the radio group\n   */\n  label: string;\n  /**\n   * The name of the radio group, which only needs to be changed if there are multiple radio groups on the same screen\n   */\n  name?: string;\n  /**\n   * Listen for changes in the browser that change `value`.\n   */\n  onChange?: ChangeEventHandler<EventTarget>;\n  /**\n   * The `value` on the selected radio button.\n   */\n  value?: RadioProps[\"value\"];\n}\n\nconst RadioGroup = ({\n  children,\n  defaultValue,\n  errorMessage,\n  hint,\n  isDisabled,\n  label,\n  name,\n  onChange,\n}: RadioGroupProps) => {\n  const ariaDescribedBy = useMemo(\n    () =>\n      errorMessage || hint\n        ? [hint && `${name}-hint`, errorMessage && `${name}-error`]\n            .filter(Boolean)\n            .join(\" \")\n        : undefined,\n    [errorMessage, hint, name]\n  );\n\n  const uniqueName = useUniqueId(name);\n\n  return (\n    <FormControl\n      component=\"fieldset\"\n      disabled={isDisabled}\n      error={Boolean(errorMessage)}\n    >\n      <FormLabel component=\"legend\">{label}</FormLabel>\n      {hint && (\n        <FormHelperText id={`${uniqueName}-hint`}>{hint}</FormHelperText>\n      )}\n      <MuiRadioGroup\n        aria-describedby={ariaDescribedBy}\n        defaultValue={defaultValue}\n        name={uniqueName}\n        onChange={onChange}\n      >\n        {children}\n      </MuiRadioGroup>\n      {errorMessage && (\n        <FormHelperText id={`${uniqueName}-error`} error>\n          <ScreenReaderText>Error:</ScreenReaderText> {errorMessage}\n        </FormHelperText>\n      )}\n    </FormControl>\n  );\n};\n\nconst MemoizedRadioGroup = memo(RadioGroup);\n\nexport { MemoizedRadioGroup as RadioGroup };\n"],"mappings":";AAaA,SAA6BA,IAA7B,EAAiDC,OAAjD,QAAgE,OAAhE;SAGEC,W,EACAC,S,EACAC,c,EAEAC,gB,EACAC,W;;;;AA2CF,MAAMC,UAAU,GAAG,QASI;EAAA,IATH;IAClBC,QADkB;IAElBC,YAFkB;IAGlBC,YAHkB;IAIlBC,IAJkB;IAKlBC,UALkB;IAMlBC,KANkB;IAOlBC,IAPkB;IAQlBC;EARkB,CASG;EACrB,MAAMC,eAAe,GAAGf,OAAO,CAC7B,MACES,YAAY,IAAIC,IAAhB,GACI,CAACA,IAAI,IAAK,GAAEG,IAAK,OAAjB,EAAyBJ,YAAY,IAAK,GAAEI,IAAK,QAAjD,EACGG,MADH,CACUC,OADV,EAEGC,IAFH,CAEQ,GAFR,CADJ,GAIIC,SANuB,EAO7B,CAACV,YAAD,EAAeC,IAAf,EAAqBG,IAArB,CAP6B,CAA/B;EAUA,MAAMO,UAAU,GAAGf,WAAW,CAACQ,IAAD,CAA9B;EAEA,OACE,MAAC,WAAD;IACE,SAAS,EAAC,UADZ;IAEE,QAAQ,EAAEF,UAFZ;IAGE,KAAK,EAAEM,OAAO,CAACR,YAAD,CAHhB;IAAA,WAKE,KAAC,SAAD;MAAW,SAAS,EAAC,QAArB;MAAA,UAA+BG;IAA/B,EALF,EAMGF,IAAI,IACH,KAAC,cAAD;MAAgB,EAAE,EAAG,GAAEU,UAAW,OAAlC;MAAA,UAA2CV;IAA3C,EAPJ,EASE;MACE,oBAAkBK,eADpB;MAEE,YAAY,EAAEP,YAFhB;MAGE,IAAI,EAAEY,UAHR;MAIE,QAAQ,EAAEN,QAJZ;MAAA,UAMGP;IANH,EATF,EAiBGE,YAAY,IACX,MAAC,cAAD;MAAgB,EAAE,EAAG,GAAEW,UAAW,QAAlC;MAA2C,KAAK,MAAhD;MAAA,WACE,KAAC,gBAAD;QAAA;MAAA,EADF,OAC+CX,YAD/C;IAAA,EAlBJ;EAAA,EADF;AAyBD,CA/CD;;AAiDA,MAAMY,kBAAkB,GAAGtB,IAAI,CAACO,UAAD,CAA/B;AAEA,SAASe,kBAAkB,IAAIf,UAA/B"}
+{"version":3,"file":"RadioGroup.js","names":["memo","useCallback","Field","jsx","_jsx","RadioGroup","_ref","children","defaultValue","errorMessage","hint","id","idOverride","isDisabled","label","onChange","value","renderFieldComponent","_ref2","ariaDescribedBy","_RadioGroup","name","fieldType","hasVisibleLabel","MemoizedRadioGroup"],"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 { RadioGroup as MuiRadioGroup } from \"@mui/material\";\nimport { ChangeEventHandler, memo, ReactElement, useCallback } from \"react\";\n\nimport { Radio, RadioProps } from \"./Radio\";\nimport { Field } from \"./Field\";\n\nexport type RadioGroupProps = {\n  /**\n   * The <Radio> components within the group. Must include two or more.\n   */\n  children: Array<ReactElement<typeof Radio>>;\n  /**\n   * The text value of the radio that should be selected by default\n   */\n  defaultValue?: string;\n  /**\n   * The error text for an invalid group\n   */\n  errorMessage?: string;\n  /**\n   * Optional hint text\n   */\n  hint?: string;\n  /**\n   * The id of the `input` element. This will also be the input's `name` field.\n   */\n  id?: string;\n  /**\n   * Disables the whole radio group\n   */\n  isDisabled?: boolean;\n  /**\n   * The text label for the radio group\n   */\n  label: string;\n  /**\n   * Listen for changes in the browser that change `value`.\n   */\n  onChange?: ChangeEventHandler<EventTarget>;\n  /**\n   * The `value` on the selected radio button.\n   */\n  value?: RadioProps[\"value\"];\n};\n\nconst RadioGroup = ({\n  children,\n  defaultValue,\n  errorMessage,\n  hint,\n  id: idOverride,\n  isDisabled,\n  label,\n  onChange,\n  value,\n}: RadioGroupProps) => {\n  const renderFieldComponent = useCallback(\n    ({ ariaDescribedBy, id }) => (\n      <MuiRadioGroup\n        aria-describedby={ariaDescribedBy}\n        defaultValue={defaultValue}\n        id={id}\n        name={id}\n        onChange={onChange}\n        value={value}\n      >\n        {children}\n      </MuiRadioGroup>\n    ),\n    [children, defaultValue, onChange, value]\n  );\n\n  return (\n    <Field\n      errorMessage={errorMessage}\n      fieldType=\"group\"\n      hasVisibleLabel={false}\n      hint={hint}\n      id={idOverride}\n      isDisabled={isDisabled}\n      label={label}\n      renderFieldComponent={renderFieldComponent}\n    />\n  );\n};\n\nconst MemoizedRadioGroup = memo(RadioGroup);\n\nexport { MemoizedRadioGroup as RadioGroup };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,SAA6BA,IAAI,EAAgBC,WAAW,QAAQ,OAAO;AAAC,SAGnEC,KAAK;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAyCd,MAAMC,UAAU,GAAGC,IAAA,IAUI;EAAA,IAVH;IAClBC,QAAQ;IACRC,YAAY;IACZC,YAAY;IACZC,IAAI;IACJC,EAAE,EAAEC,UAAU;IACdC,UAAU;IACVC,KAAK;IACLC,QAAQ;IACRC;EACe,CAAC,GAAAV,IAAA;EAChB,MAAMW,oBAAoB,GAAGhB,WAAW,CACtCiB,KAAA;IAAA,IAAC;MAAEC,eAAe;MAAER;IAAG,CAAC,GAAAO,KAAA;IAAA,OACtBd,IAAA,CAAAgB,WAAA;MACE,oBAAkBD,eAAgB;MAClCX,YAAY,EAAEA,YAAa;MAC3BG,EAAE,EAAEA,EAAG;MACPU,IAAI,EAAEV,EAAG;MACTI,QAAQ,EAAEA,QAAS;MACnBC,KAAK,EAAEA,KAAM;MAAAT,QAAA,EAEZA;IAAQ,CACI,CAAC;EAAA,CACjB,EACD,CAACA,QAAQ,EAAEC,YAAY,EAAEO,QAAQ,EAAEC,KAAK,CAC1C,CAAC;EAED,OACEZ,IAAA,CAACF,KAAK;IACJO,YAAY,EAAEA,YAAa;IAC3Ba,SAAS,EAAC,OAAO;IACjBC,eAAe,EAAE,KAAM;IACvBb,IAAI,EAAEA,IAAK;IACXC,EAAE,EAAEC,UAAW;IACfC,UAAU,EAAEA,UAAW;IACvBC,KAAK,EAAEA,KAAM;IACbG,oBAAoB,EAAEA;EAAqB,CAC5C,CAAC;AAEN,CAAC;AAED,MAAMO,kBAAkB,GAAGxB,IAAI,CAACK,UAAU,CAAC;AAE3C,SAASmB,kBAAkB,IAAInB,UAAU"}

package/dist/ScreenReaderText.js

@@ -9,12 +9,13 @@
  *
  * See the License for the specific language governing permissions and limitations under the License.
  */
+
 import { memo } from "react";
 import { Box, visuallyHidden } from "./index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const style = { ...visuallyHidden
+const style = {
+  ...visuallyHidden
 };
-
 const ScreenReaderText = _ref => {
   let {
     children
@@ -24,7 +25,6 @@ const ScreenReaderText = _ref => {
     children: children
   });
 };
-
 const MemoizedScreenReaderText = memo(ScreenReaderText);
 export { MemoizedScreenReaderText as ScreenReaderText };
 //# sourceMappingURL=ScreenReaderText.js.map

package/dist/ScreenReaderText.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScreenReaderText.js","names":["memo","Box","visuallyHidden","style","ScreenReaderText","children","MemoizedScreenReaderText"],"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, visuallyHidden } from \"./\";\n\nexport type ScreenReaderTextProps = {\n  /**\n   * The visually-hidden text.\n   */\n  children: ReactNode;\n};\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 = ({ children }: ScreenReaderTextProps) => (\n  <Box sx={style}>{children}</Box>\n);\n\nconst MemoizedScreenReaderText = memo(ScreenReaderText);\n\nexport { MemoizedScreenReaderText as ScreenReaderText };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,SAASA,IAAT,QAAgC,OAAhC;SACSC,G,EAAKC,c;;AAcd,MAAMC,KAAK,GAAG,EAAE,GAAGD;AAAL,CAAd;;AAEA,MAAME,gBAAgB,GAAG;EAAA,IAAC;IAAEC;EAAF,CAAD;EAAA,OACvB,KAAC,GAAD;IAAK,EAAE,EAAEF,KAAT;IAAA,UAAiBE;EAAjB,EADuB;AAAA,CAAzB;;AAIA,MAAMC,wBAAwB,GAAGN,IAAI,CAACI,gBAAD,CAArC;AAEA,SAASE,wBAAwB,IAAIF,gBAArC"}
+{"version":3,"file":"ScreenReaderText.js","names":["memo","Box","visuallyHidden","jsx","_jsx","style","ScreenReaderText","_ref","children","sx","MemoizedScreenReaderText"],"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, visuallyHidden } from \"./\";\n\nexport type ScreenReaderTextProps = {\n  /**\n   * The visually-hidden text.\n   */\n  children: ReactNode;\n};\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 = ({ children }: ScreenReaderTextProps) => (\n  <Box sx={style}>{children}</Box>\n);\n\nconst MemoizedScreenReaderText = memo(ScreenReaderText);\n\nexport { MemoizedScreenReaderText as ScreenReaderText };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAmB,OAAO;AAAC,SAC/BC,GAAG,EAAEC,cAAc;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAc5B,MAAMC,KAAK,GAAG;EAAE,GAAGH;AAAe,CAAC;AAEnC,MAAMI,gBAAgB,GAAGC,IAAA;EAAA,IAAC;IAAEC;EAAgC,CAAC,GAAAD,IAAA;EAAA,OAC3DH,IAAA,CAACH,GAAG;IAACQ,EAAE,EAAEJ,KAAM;IAAAG,QAAA,EAAEA;EAAQ,CAAM,CAAC;AAAA,CACjC;AAED,MAAME,wBAAwB,GAAGV,IAAI,CAACM,gBAAgB,CAAC;AAEvD,SAASI,wBAAwB,IAAIJ,gBAAgB"}

package/dist/SearchField.js

@@ -1,5 +1,16 @@
 import _InputBase from "@mui/material/InputBase";
 import _InputAdornment from "@mui/material/InputAdornment";
+/*!
+ * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
 import { forwardRef, memo, useCallback } from "react";
 import { SearchIcon } from "./index.js";
 import { Field } from "./Field.js";
@@ -7,7 +18,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const SearchField = forwardRef((_ref, ref) => {
   let {
     autoCompleteType,
-    autoFocus,
+    hasInitialFocus,
     id: idOverride,
     isDisabled = false,
     label,
@@ -25,8 +36,9 @@ const SearchField = forwardRef((_ref, ref) => {
     return _jsx(_InputBase, {
       "aria-describedby": ariaDescribedBy,
       autoComplete: autoCompleteType,
-      autoFocus: autoFocus,
+      autoFocus: hasInitialFocus,
       id: id,
+      name: id,
       onChange: onChange,
       onFocus: onFocus,
       onBlur: onBlur,
@@ -39,12 +51,13 @@ const SearchField = forwardRef((_ref, ref) => {
       type: "search",
       value: value
     });
-  }, [autoCompleteType, autoFocus, onChange, onFocus, onBlur, placeholder, ref, value]);
+  }, [autoCompleteType, hasInitialFocus, onChange, onFocus, onBlur, placeholder, ref, value]);
   return _jsx(Field, {
+    fieldType: "single",
     hasVisibleLabel: false,
     id: idOverride,
     isDisabled: isDisabled,
-    isRequired: false,
+    isOptional: true,
     label: label,
     renderFieldComponent: renderFieldComponent
   });

package/dist/SearchField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchField.js","names":["forwardRef","memo","useCallback","SearchIcon","Field","SearchField","ref","autoCompleteType","autoFocus","id","idOverride","isDisabled","label","onChange","onFocus","onBlur","placeholder","value","renderFieldComponent","ariaDescribedBy","MemoizedSearchField"],"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 } from \"@mui/material\";\nimport {\n  ChangeEventHandler,\n  FocusEventHandler,\n  forwardRef,\n  InputHTMLAttributes,\n  memo,\n  useCallback,\n} from \"react\";\n\nimport { SearchIcon } from \"./\";\nimport { Field } from \"./Field\";\n\nexport type SearchFieldProps = {\n  /**\n   * If `true`, the component will receive focus automatically.\n   */\n  autoFocus?: boolean;\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 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 `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   * The value of the `input` element, required for a controlled component.\n   */\n  value?: string;\n};\n\nconst SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(\n  (\n    {\n      autoCompleteType,\n      autoFocus,\n      id: idOverride,\n      isDisabled = false,\n      label,\n      onChange,\n      onFocus,\n      onBlur,\n      placeholder,\n      value,\n    },\n    ref\n  ) => {\n    const renderFieldComponent = useCallback(\n      ({ ariaDescribedBy, id }) => (\n        <InputBase\n          aria-describedby={ariaDescribedBy}\n          autoComplete={autoCompleteType}\n          /* eslint-disable-next-line jsx-a11y/no-autofocus */\n          autoFocus={autoFocus}\n          id={id}\n          onChange={onChange}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          placeholder={placeholder}\n          ref={ref}\n          startAdornment={\n            <InputAdornment position=\"start\">\n              <SearchIcon />\n            </InputAdornment>\n          }\n          type=\"search\"\n          value={value}\n        />\n      ),\n      [\n        autoCompleteType,\n        autoFocus,\n        onChange,\n        onFocus,\n        onBlur,\n        placeholder,\n        ref,\n        value,\n      ]\n    );\n\n    return (\n      <Field\n        hasVisibleLabel={false}\n        id={idOverride}\n        isDisabled={isDisabled}\n        isRequired={false}\n        label={label}\n        renderFieldComponent={renderFieldComponent}\n      />\n    );\n  }\n);\n\nconst MemoizedSearchField = memo(SearchField);\n\nexport { MemoizedSearchField as SearchField };\n"],"mappings":";;AAaA,SAGEA,UAHF,EAKEC,IALF,EAMEC,WANF,QAOO,OAPP;SASSC,U;SACAC,K;;AA+CT,MAAMC,WAAW,GAAGL,UAAU,CAC5B,OAaEM,GAbF,KAcK;EAAA,IAbH;IACEC,gBADF;IAEEC,SAFF;IAGEC,EAAE,EAAEC,UAHN;IAIEC,UAAU,GAAG,KAJf;IAKEC,KALF;IAMEC,QANF;IAOEC,OAPF;IAQEC,MARF;IASEC,WATF;IAUEC;EAVF,CAaG;EACH,MAAMC,oBAAoB,GAAGhB,WAAW,CACtC;IAAA,IAAC;MAAEiB,eAAF;MAAmBV;IAAnB,CAAD;IAAA,OACE;MACE,oBAAkBU,eADpB;MAEE,YAAY,EAAEZ,gBAFhB;MAIE,SAAS,EAAEC,SAJb;MAKE,EAAE,EAAEC,EALN;MAME,QAAQ,EAAEI,QANZ;MAOE,OAAO,EAAEC,OAPX;MAQE,MAAM,EAAEC,MARV;MASE,WAAW,EAAEC,WATf;MAUE,GAAG,EAAEV,GAVP;MAWE,cAAc,EACZ;QAAgB,QAAQ,EAAC,OAAzB;QAAA,UACE,KAAC,UAAD;MADF,EAZJ;MAgBE,IAAI,EAAC,QAhBP;MAiBE,KAAK,EAAEW;IAjBT,EADF;EAAA,CADsC,EAsBtC,CACEV,gBADF,EAEEC,SAFF,EAGEK,QAHF,EAIEC,OAJF,EAKEC,MALF,EAMEC,WANF,EAOEV,GAPF,EAQEW,KARF,CAtBsC,CAAxC;EAkCA,OACE,KAAC,KAAD;IACE,eAAe,EAAE,KADnB;IAEE,EAAE,EAAEP,UAFN;IAGE,UAAU,EAAEC,UAHd;IAIE,UAAU,EAAE,KAJd;IAKE,KAAK,EAAEC,KALT;IAME,oBAAoB,EAAEM;EANxB,EADF;AAUD,CA5D2B,CAA9B;AA+DA,MAAME,mBAAmB,GAAGnB,IAAI,CAACI,WAAD,CAAhC;AAEA,SAASe,mBAAmB,IAAIf,WAAhC"}
+{"version":3,"file":"SearchField.js","names":["forwardRef","memo","useCallback","SearchIcon","Field","jsx","_jsx","SearchField","_ref","ref","autoCompleteType","hasInitialFocus","id","idOverride","isDisabled","label","onChange","onFocus","onBlur","placeholder","value","renderFieldComponent","_ref2","ariaDescribedBy","_InputBase","autoComplete","autoFocus","name","startAdornment","_InputAdornment","position","children","type","fieldType","hasVisibleLabel","isOptional","MemoizedSearchField"],"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 } from \"@mui/material\";\nimport {\n  ChangeEventHandler,\n  FocusEventHandler,\n  forwardRef,\n  InputHTMLAttributes,\n  memo,\n  useCallback,\n} from \"react\";\n\nimport { SearchIcon } from \"./\";\nimport { Field } from \"./Field\";\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   * 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 `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   * The value of the `input` element, required for a controlled component.\n   */\n  value?: string;\n};\n\nconst SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(\n  (\n    {\n      autoCompleteType,\n      hasInitialFocus,\n      id: idOverride,\n      isDisabled = false,\n      label,\n      onChange,\n      onFocus,\n      onBlur,\n      placeholder,\n      value,\n    },\n    ref\n  ) => {\n    const renderFieldComponent = useCallback(\n      ({ ariaDescribedBy, id }) => (\n        <InputBase\n          aria-describedby={ariaDescribedBy}\n          autoComplete={autoCompleteType}\n          /* eslint-disable-next-line jsx-a11y/no-autofocus */\n          autoFocus={hasInitialFocus}\n          id={id}\n          name={id}\n          onChange={onChange}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          placeholder={placeholder}\n          ref={ref}\n          startAdornment={\n            <InputAdornment position=\"start\">\n              <SearchIcon />\n            </InputAdornment>\n          }\n          type=\"search\"\n          value={value}\n        />\n      ),\n      [\n        autoCompleteType,\n        hasInitialFocus,\n        onChange,\n        onFocus,\n        onBlur,\n        placeholder,\n        ref,\n        value,\n      ]\n    );\n\n    return (\n      <Field\n        fieldType=\"single\"\n        hasVisibleLabel={false}\n        id={idOverride}\n        isDisabled={isDisabled}\n        isOptional={true}\n        label={label}\n        renderFieldComponent={renderFieldComponent}\n      />\n    );\n  }\n);\n\nconst MemoizedSearchField = memo(SearchField);\n\nexport { MemoizedSearchField as SearchField };\n"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,SAGEA,UAAU,EAEVC,IAAI,EACJC,WAAW,QACN,OAAO;AAAC,SAENC,UAAU;AAAA,SACVC,KAAK;AAAA,SAAAC,GAAA,IAAAC,IAAA;AA+Cd,MAAMC,WAAW,GAAGP,UAAU,CAC5B,CAAAQ,IAAA,EAaEC,GAAG,KACA;EAAA,IAbH;IACEC,gBAAgB;IAChBC,eAAe;IACfC,EAAE,EAAEC,UAAU;IACdC,UAAU,GAAG,KAAK;IAClBC,KAAK;IACLC,QAAQ;IACRC,OAAO;IACPC,MAAM;IACNC,WAAW;IACXC;EACF,CAAC,GAAAZ,IAAA;EAGD,MAAMa,oBAAoB,GAAGnB,WAAW,CACtCoB,KAAA;IAAA,IAAC;MAAEC,eAAe;MAAEX;IAAG,CAAC,GAAAU,KAAA;IAAA,OACtBhB,IAAA,CAAAkB,UAAA;MACE,oBAAkBD,eAAgB;MAClCE,YAAY,EAAEf,gBAAiB;MAE/BgB,SAAS,EAAEf,eAAgB;MAC3BC,EAAE,EAAEA,EAAG;MACPe,IAAI,EAAEf,EAAG;MACTI,QAAQ,EAAEA,QAAS;MACnBC,OAAO,EAAEA,OAAQ;MACjBC,MAAM,EAAEA,MAAO;MACfC,WAAW,EAAEA,WAAY;MACzBV,GAAG,EAAEA,GAAI;MACTmB,cAAc,EACZtB,IAAA,CAAAuB,eAAA;QAAgBC,QAAQ,EAAC,OAAO;QAAAC,QAAA,EAC9BzB,IAAA,CAACH,UAAU,IAAE;MAAC,CACA,CACjB;MACD6B,IAAI,EAAC,QAAQ;MACbZ,KAAK,EAAEA;IAAM,CACd,CAAC;EAAA,CACH,EACD,CACEV,gBAAgB,EAChBC,eAAe,EACfK,QAAQ,EACRC,OAAO,EACPC,MAAM,EACNC,WAAW,EACXV,GAAG,EACHW,KAAK,CAET,CAAC;EAED,OACEd,IAAA,CAACF,KAAK;IACJ6B,SAAS,EAAC,QAAQ;IAClBC,eAAe,EAAE,KAAM;IACvBtB,EAAE,EAAEC,UAAW;IACfC,UAAU,EAAEA,UAAW;IACvBqB,UAAU,EAAE,IAAK;IACjBpB,KAAK,EAAEA,KAAM;IACbM,oBAAoB,EAAEA;EAAqB,CAC5C,CAAC;AAEN,CACF,CAAC;AAED,MAAMe,mBAAmB,GAAGnC,IAAI,CAACM,WAAW,CAAC;AAE7C,SAAS6B,mBAAmB,IAAI7B,WAAW"}

package/dist/Select.js

@@ -0,0 +1,131 @@
+import _Select from "@mui/material/Select";
+import _MenuItem from "@mui/material/MenuItem";
+import _ListSubheader from "@mui/material/ListSubheader";
+import _Box from "@mui/material/Box";
+import _Chip from "@mui/material/Chip";
+/*!
+ * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { forwardRef, memo, useCallback, useState } from "react";
+import { Checkbox } from "./Checkbox.js";
+import { Field } from "./Field.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const Select = forwardRef((_ref, ref) => {
+  let {
+    errorMessage,
+    hint,
+    id: idOverride,
+    isDisabled = false,
+    isMultiSelect = false,
+    isOptional = false,
+    label,
+    onBlur,
+    onChange: onChangeProp,
+    onFocus,
+    value,
+    options
+  } = _ref;
+  if (typeof value === "undefined") {
+    value = isMultiSelect ? [] : "";
+  }
+  const [selectedValue, setSelectedValue] = useState(value);
+  const onChange = useCallback((event, child) => {
+    const {
+      target: {
+        value
+      }
+    } = event;
+    if (isMultiSelect) {
+      setSelectedValue(typeof value === "string" ? value.split(",") : value);
+    } else {
+      setSelectedValue(value);
+    }
+    if (onChangeProp) {
+      onChangeProp(event, child);
+    }
+  }, [isMultiSelect, onChangeProp, setSelectedValue]);
+  const normalizedOptions = options.map(option => {
+    if (typeof option === "object") {
+      return {
+        text: option.text,
+        value: option.value || option.text,
+        type: option.type === "heading" ? "heading" : "option"
+      };
+    }
+    return {
+      text: option,
+      value: option,
+      type: "option"
+    };
+  });
+  const renderValue = useCallback(selected => {
+    if (typeof selected === "string") {
+      return undefined;
+    }
+    const renderedChips = selected.map(item => {
+      const selectedOption = normalizedOptions.find(option => option.value === item);
+      if (!selectedOption) {
+        return null;
+      }
+      return _jsx(_Chip, {
+        label: selectedOption.text
+      }, item);
+    }).filter(Boolean);
+    if (renderedChips.length === 0) {
+      return null;
+    }
+    return _jsx(_Box, {
+      children: renderedChips
+    });
+  }, [normalizedOptions]);
+  const children = normalizedOptions.map(option => {
+    if (option.type === "heading") {
+      return _jsx(_ListSubheader, {
+        children: option.text
+      }, option.text);
+    }
+    return _jsxs(_MenuItem, {
+      value: option.value,
+      children: [isMultiSelect && _jsx(Checkbox, {
+        isChecked: selectedValue.includes(option.value)
+      }), option.text]
+    }, option.value);
+  });
+  const renderFieldComponent = useCallback(() => _jsx(_Select, {
+    id: idOverride,
+    name: idOverride,
+    multiple: isMultiSelect,
+    onBlur: onBlur,
+    onChange: onChange,
+    onFocus: onFocus,
+    ref: ref,
+    children: children,
+    renderValue: isMultiSelect ? renderValue : undefined,
+    value: selectedValue
+  }), [idOverride, isMultiSelect, onBlur, onChange, onFocus, ref, children, renderValue, selectedValue]);
+  return _jsx(Field, {
+    errorMessage: errorMessage,
+    fieldType: "single",
+    hasVisibleLabel: true,
+    hint: hint,
+    id: idOverride,
+    isDisabled: isDisabled,
+    isOptional: isOptional,
+    label: label,
+    renderFieldComponent: renderFieldComponent
+  });
+});
+const MemoizedSelect = memo(Select);
+MemoizedSelect.displayName = "Select";
+export { MemoizedSelect as Select };
+//# sourceMappingURL=Select.js.map