@okta/odyssey-react-mui 1.13.11 → 1.14.2

package/dist/OdysseyThemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"OdysseyThemeProvider.js","names":["createTheme","ThemeProvider","MuiThemeProvider","memo","useMemo","deepmerge","createOdysseyMuiTheme","Tokens","OdysseyDesignTokensContext","CacheProvider","createCache","useUniqueAlphabeticalId","jsx","_jsx","OdysseyThemeProvider","children","designTokensOverride","emotionRoot","shadowDomElement","themeOverride","withCache","odysseyTokens","odysseyTheme","customOdysseyTheme","uniqueAlphabeticalId","cache","container","key","prepend","nonce","window","cspNonce","speedy","value","theme","Provider","MemoizedOdysseyThemeProvider"],"sources":["../src/OdysseyThemeProvider.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  createTheme,\n  ThemeProvider as MuiThemeProvider,\n} from \"@mui/material/styles\";\nimport { memo, ReactNode, useMemo } from \"react\";\n\nimport { ThemeOptions } from \"@mui/material\";\nimport { deepmerge } from \"@mui/utils\";\nimport { createOdysseyMuiTheme, DesignTokensOverride } from \"./theme\";\nimport * as Tokens from \"@okta/odyssey-design-tokens\";\nimport { OdysseyDesignTokensContext } from \"./OdysseyDesignTokensContext\";\nimport { CacheProvider } from \"@emotion/react\";\nimport createCache from \"@emotion/cache\";\nimport { useUniqueAlphabeticalId } from \"./useUniqueAlphabeticalId\";\n\nexport type OdysseyThemeProviderProps = {\n  children: ReactNode;\n  designTokensOverride?: DesignTokensOverride;\n  emotionRoot?: HTMLStyleElement;\n  shadowDomElement?: HTMLDivElement | HTMLElement | undefined;\n  themeOverride?: ThemeOptions;\n  withCache?: boolean;\n};\n\nconst OdysseyThemeProvider = ({\n  children,\n  designTokensOverride,\n  emotionRoot,\n  shadowDomElement,\n  themeOverride,\n  withCache = true,\n}: OdysseyThemeProviderProps) => {\n  const odysseyTokens = useMemo(\n    () => ({ ...Tokens, ...designTokensOverride }),\n    [designTokensOverride]\n  );\n  const odysseyTheme = useMemo(\n    () =>\n      createOdysseyMuiTheme({\n        odysseyTokens,\n        shadowDomElement,\n      }),\n    [odysseyTokens, shadowDomElement]\n  );\n\n  const customOdysseyTheme = useMemo(\n    () => themeOverride && createTheme(deepmerge(odysseyTheme, themeOverride)),\n    [odysseyTheme, themeOverride]\n  );\n\n  const uniqueAlphabeticalId = useUniqueAlphabeticalId();\n\n  const cache = useMemo(\n    () =>\n      createCache({\n        ...(emotionRoot && { container: emotionRoot }),\n        key: uniqueAlphabeticalId,\n        prepend: true,\n        nonce: window.cspNonce,\n        speedy: false, // <-- Needs to be set to false when shadow-dom is used!! https://github.com/emotion-js/emotion/issues/2053#issuecomment-713429122\n      }),\n    [emotionRoot, uniqueAlphabeticalId]\n  );\n\n  if (withCache) {\n    return (\n      <CacheProvider value={cache}>\n        <MuiThemeProvider theme={customOdysseyTheme ?? odysseyTheme}>\n          <OdysseyDesignTokensContext.Provider value={odysseyTokens}>\n            {children}\n          </OdysseyDesignTokensContext.Provider>\n        </MuiThemeProvider>\n      </CacheProvider>\n    );\n  }\n  return (\n    <MuiThemeProvider theme={customOdysseyTheme ?? odysseyTheme}>\n      <OdysseyDesignTokensContext.Provider value={odysseyTokens}>\n        {children}\n      </OdysseyDesignTokensContext.Provider>\n    </MuiThemeProvider>\n  );\n};\n\nconst MemoizedOdysseyThemeProvider = memo(OdysseyThemeProvider);\n\nexport { MemoizedOdysseyThemeProvider as OdysseyThemeProvider };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SACEA,WAAW,EACXC,aAAa,IAAIC,gBAAgB,QAC5B,sBAAsB;AAC7B,SAASC,IAAI,EAAaC,OAAO,QAAQ,OAAO;AAGhD,SAASC,SAAS,QAAQ,YAAY;AAAC,SAC9BC,qBAAqB;AAC9B,OAAO,KAAKC,MAAM,MAAM,6BAA6B;AAAC,SAC7CC,0BAA0B;AACnC,SAASC,aAAa,QAAQ,gBAAgB;AAC9C,OAAOC,WAAW,MAAM,gBAAgB;AAAC,SAChCC,uBAAuB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAWhC,MAAMC,oBAAoB,GAAGA,CAAC;EAC5BC,QAAQ;EACRC,oBAAoB;EACpBC,WAAW;EACXC,gBAAgB;EAChBC,aAAa;EACbC,SAAS,GAAG;AACa,CAAC,KAAK;EAC/B,MAAMC,aAAa,GAAGjB,OAAO,CAC3B,OAAO;IAAE,GAAGG,MAAM;IAAE,GAAGS;EAAqB,CAAC,CAAC,EAC9C,CAACA,oBAAoB,CACvB,CAAC;EACD,MAAMM,YAAY,GAAGlB,OAAO,CAC1B,MACEE,qBAAqB,CAAC;IACpBe,aAAa;IACbH;EACF,CAAC,CAAC,EACJ,CAACG,aAAa,EAAEH,gBAAgB,CAClC,CAAC;EAED,MAAMK,kBAAkB,GAAGnB,OAAO,CAChC,MAAMe,aAAa,IAAInB,WAAW,CAACK,SAAS,CAACiB,YAAY,EAAEH,aAAa,CAAC,CAAC,EAC1E,CAACG,YAAY,EAAEH,aAAa,CAC9B,CAAC;EAED,MAAMK,oBAAoB,GAAGb,uBAAuB,CAAC,CAAC;EAEtD,MAAMc,KAAK,GAAGrB,OAAO,CACnB,MACEM,WAAW,CAAC;IACV,IAAIO,WAAW,IAAI;MAAES,SAAS,EAAET;IAAY,CAAC,CAAC;IAC9CU,GAAG,EAAEH,oBAAoB;IACzBI,OAAO,EAAE,IAAI;IACbC,KAAK,EAAEC,MAAM,CAACC,QAAQ;IACtBC,MAAM,EAAE;EACV,CAAC,CAAC,EACJ,CAACf,WAAW,EAAEO,oBAAoB,CACpC,CAAC;EAED,IAAIJ,SAAS,EAAE;IACb,OACEP,IAAA,CAACJ,aAAa;MAACwB,KAAK,EAAER,KAAM;MAAAV,QAAA,EAC1BF,IAAA,CAACX,gBAAgB;QAACgC,KAAK,EAAEX,kBAAkB,IAAID,YAAa;QAAAP,QAAA,EAC1DF,IAAA,CAACL,0BAA0B,CAAC2B,QAAQ;UAACF,KAAK,EAAEZ,aAAc;UAAAN,QAAA,EACvDA;QAAQ,CAC0B;MAAC,CACtB;IAAC,CACN,CAAC;EAEpB;EACA,OACEF,IAAA,CAACX,gBAAgB;IAACgC,KAAK,EAAEX,kBAAkB,IAAID,YAAa;IAAAP,QAAA,EAC1DF,IAAA,CAACL,0BAA0B,CAAC2B,QAAQ;MAACF,KAAK,EAAEZ,aAAc;MAAAN,QAAA,EACvDA;IAAQ,CAC0B;EAAC,CACtB,CAAC;AAEvB,CAAC;AAED,MAAMqB,4BAA4B,GAAGjC,IAAI,CAACW,oBAAoB,CAAC;AAE/D,SAASsB,4BAA4B,IAAItB,oBAAoB"}
+{"version":3,"file":"OdysseyThemeProvider.js","names":["createTheme","ThemeProvider","MuiThemeProvider","memo","useMemo","deepmerge","createOdysseyMuiTheme","Tokens","OdysseyDesignTokensContext","jsx","_jsx","OdysseyThemeProvider","children","designTokensOverride","shadowDomElement","themeOverride","odysseyTokens","odysseyTheme","customOdysseyTheme","theme","Provider","value","MemoizedOdysseyThemeProvider"],"sources":["../src/OdysseyThemeProvider.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  createTheme,\n  ThemeProvider as MuiThemeProvider,\n} from \"@mui/material/styles\";\nimport { memo, ReactNode, useMemo } from \"react\";\n\nimport { ThemeOptions } from \"@mui/material\";\nimport { deepmerge } from \"@mui/utils\";\nimport { createOdysseyMuiTheme, DesignTokensOverride } from \"./theme\";\nimport * as Tokens from \"@okta/odyssey-design-tokens\";\nimport { OdysseyDesignTokensContext } from \"./OdysseyDesignTokensContext\";\n\nexport type OdysseyThemeProviderProps = {\n  children: ReactNode;\n  designTokensOverride?: DesignTokensOverride;\n  shadowDomElement?: HTMLDivElement | HTMLElement | undefined;\n  themeOverride?: ThemeOptions;\n};\n\n/**\n * This function doesn't include the Emotion Cache or Translations. You should probably be using `OdysseyProvider`.\n *\n * Some teams have a need to wrap separately (SIW), but most teams will never need to use this explicitly.\n */\nconst OdysseyThemeProvider = ({\n  children,\n  designTokensOverride,\n  shadowDomElement,\n  themeOverride,\n}: OdysseyThemeProviderProps) => {\n  const odysseyTokens = useMemo(\n    () => ({ ...Tokens, ...designTokensOverride }),\n    [designTokensOverride],\n  );\n  const odysseyTheme = useMemo(\n    () =>\n      createOdysseyMuiTheme({\n        odysseyTokens,\n        shadowDomElement,\n      }),\n    [odysseyTokens, shadowDomElement],\n  );\n\n  const customOdysseyTheme = useMemo(\n    () => themeOverride && createTheme(deepmerge(odysseyTheme, themeOverride)),\n    [odysseyTheme, themeOverride],\n  );\n\n  return (\n    <MuiThemeProvider theme={customOdysseyTheme ?? odysseyTheme}>\n      <OdysseyDesignTokensContext.Provider value={odysseyTokens}>\n        {children}\n      </OdysseyDesignTokensContext.Provider>\n    </MuiThemeProvider>\n  );\n};\n\nconst MemoizedOdysseyThemeProvider = memo(OdysseyThemeProvider);\n\nexport { MemoizedOdysseyThemeProvider as OdysseyThemeProvider };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SACEA,WAAW,EACXC,aAAa,IAAIC,gBAAgB,QAC5B,sBAAsB;AAC7B,SAASC,IAAI,EAAaC,OAAO,QAAQ,OAAO;AAGhD,SAASC,SAAS,QAAQ,YAAY;AAAC,SAC9BC,qBAAqB;AAC9B,OAAO,KAAKC,MAAM,MAAM,6BAA6B;AAAC,SAC7CC,0BAA0B;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAcnC,MAAMC,oBAAoB,GAAGA,CAAC;EAC5BC,QAAQ;EACRC,oBAAoB;EACpBC,gBAAgB;EAChBC;AACyB,CAAC,KAAK;EAC/B,MAAMC,aAAa,GAAGZ,OAAO,CAC3B,OAAO;IAAE,GAAGG,MAAM;IAAE,GAAGM;EAAqB,CAAC,CAAC,EAC9C,CAACA,oBAAoB,CACvB,CAAC;EACD,MAAMI,YAAY,GAAGb,OAAO,CAC1B,MACEE,qBAAqB,CAAC;IACpBU,aAAa;IACbF;EACF,CAAC,CAAC,EACJ,CAACE,aAAa,EAAEF,gBAAgB,CAClC,CAAC;EAED,MAAMI,kBAAkB,GAAGd,OAAO,CAChC,MAAMW,aAAa,IAAIf,WAAW,CAACK,SAAS,CAACY,YAAY,EAAEF,aAAa,CAAC,CAAC,EAC1E,CAACE,YAAY,EAAEF,aAAa,CAC9B,CAAC;EAED,OACEL,IAAA,CAACR,gBAAgB;IAACiB,KAAK,EAAED,kBAAkB,IAAID,YAAa;IAAAL,QAAA,EAC1DF,IAAA,CAACF,0BAA0B,CAACY,QAAQ;MAACC,KAAK,EAAEL,aAAc;MAAAJ,QAAA,EACvDA;IAAQ,CAC0B;EAAC,CACtB,CAAC;AAEvB,CAAC;AAED,MAAMU,4BAA4B,GAAGnB,IAAI,CAACQ,oBAAoB,CAAC;AAE/D,SAASW,4BAA4B,IAAIX,oBAAoB"}

package/dist/OdysseyTranslationProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"OdysseyTranslationProvider.js","names":["useEffect","i18n","defaultNS","resources","I18nextProvider","getTypedObjectKeys","jsx","_jsx","odysseyI18nResourceKeysList","mergeBundleOverrides","languageCode","translationOverrides","translationStrings","translationStringOverrides","formatLanguageCodeToHyphenated","replaceAll","OdysseyTranslationProvider","children","normalizedLanguageCode","changeHtmlElementLanguageAttribute","window","document","documentElement","setAttribute","changeLanguage","navigator","language","forEach","bundle","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 { ReactNode, useEffect } from \"react\";\n\nimport { DefaultSupportedLanguages } from \"./OdysseyTranslationProvider.types\";\n\nimport { i18n, defaultNS, resources } from \"./i18n\";\nimport { I18nextProvider } from \"react-i18next\";\nimport { getTypedObjectKeys } from \"./getTypedObjectKeys\";\n\nexport type OdysseyI18nResourceKeys = (typeof resources)[\"en\"];\nexport const odysseyI18nResourceKeysList = getTypedObjectKeys(resources[\"en\"]);\n\nexport type TranslationOverrides<\n  SupportedLanguages extends string = DefaultSupportedLanguages\n> = Record<SupportedLanguages, Partial<OdysseyI18nResourceKeys>>;\n\nconst mergeBundleOverrides = <SupportedLanguages extends string>(\n  languageCode: SupportedLanguages,\n  translationOverrides: TranslationOverrides<SupportedLanguages>\n) => {\n  const translationStrings = resources[languageCode] || {};\n  const translationStringOverrides = translationOverrides[languageCode];\n  return {\n    ...translationStrings,\n    ...translationStringOverrides,\n  };\n};\n\nexport type OdysseyTranslationProviderProps<\n  SupportedLanguages extends string = DefaultSupportedLanguages\n> = {\n  children: ReactNode;\n  languageCode?: SupportedLanguages | DefaultSupportedLanguages;\n  translationOverrides?: TranslationOverrides<SupportedLanguages>;\n};\n\nconst formatLanguageCodeToHyphenated = <SupportedLanguages extends string>(\n  languageCode: OdysseyTranslationProviderProps<SupportedLanguages>[\"languageCode\"]\n) => languageCode?.replaceAll(\"_\", \"-\");\n\nexport const OdysseyTranslationProvider = <SupportedLanguages extends string>({\n  children,\n  languageCode,\n  translationOverrides,\n}: OdysseyTranslationProviderProps<SupportedLanguages>) => {\n  useEffect(() => {\n    const normalizedLanguageCode =\n      formatLanguageCodeToHyphenated<SupportedLanguages>(languageCode);\n\n    const changeHtmlElementLanguageAttribute = () => {\n      window.document.documentElement.setAttribute(\n        \"lang\",\n        normalizedLanguageCode || \"en\"\n      );\n    };\n    // Defaults to the browser's language if available otherwise `en` will be used\n    i18n.changeLanguage(\n      languageCode || window.navigator.language,\n      changeHtmlElementLanguageAttribute\n    );\n  }, [languageCode]);\n\n  useEffect(() => {\n    if (translationOverrides) {\n      getTypedObjectKeys(translationOverrides).forEach((language) => {\n        const bundle = mergeBundleOverrides<SupportedLanguages>(\n          language,\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,SAAoBA,SAAS,QAAQ,OAAO;AAAC,SAIpCC,IAAI,EAAEC,SAAS,EAAEC,SAAS;AACnC,SAASC,eAAe,QAAQ,eAAe;AAAC,SACvCC,kBAAkB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG3B,OAAO,MAAMC,2BAA2B,GAAGH,kBAAkB,CAACF,SAAS,CAAC,IAAI,CAAC,CAAC;AAM9E,MAAMM,oBAAoB,GAAGA,CAC3BC,YAAgC,EAChCC,oBAA8D,KAC3D;EACH,MAAMC,kBAAkB,GAAGT,SAAS,CAACO,YAAY,CAAC,IAAI,CAAC,CAAC;EACxD,MAAMG,0BAA0B,GAAGF,oBAAoB,CAACD,YAAY,CAAC;EACrE,OAAO;IACL,GAAGE,kBAAkB;IACrB,GAAGC;EACL,CAAC;AACH,CAAC;AAUD,MAAMC,8BAA8B,GAClCJ,YAAiF,IAC9EA,YAAY,EAAEK,UAAU,CAAC,GAAG,EAAE,GAAG,CAAC;AAEvC,OAAO,MAAMC,0BAA0B,GAAGA,CAAoC;EAC5EC,QAAQ;EACRP,YAAY;EACZC;AACmD,CAAC,KAAK;EACzDX,SAAS,CAAC,MAAM;IACd,MAAMkB,sBAAsB,GAC1BJ,8BAA8B,CAAqBJ,YAAY,CAAC;IAElE,MAAMS,kCAAkC,GAAGA,CAAA,KAAM;MAC/CC,MAAM,CAACC,QAAQ,CAACC,eAAe,CAACC,YAAY,CAC1C,MAAM,EACNL,sBAAsB,IAAI,IAC5B,CAAC;IACH,CAAC;IAEDjB,IAAI,CAACuB,cAAc,CACjBd,YAAY,IAAIU,MAAM,CAACK,SAAS,CAACC,QAAQ,EACzCP,kCACF,CAAC;EACH,CAAC,EAAE,CAACT,YAAY,CAAC,CAAC;EAElBV,SAAS,CAAC,MAAM;IACd,IAAIW,oBAAoB,EAAE;MACxBN,kBAAkB,CAACM,oBAAoB,CAAC,CAACgB,OAAO,CAAED,QAAQ,IAAK;QAC7D,MAAME,MAAM,GAAGnB,oBAAoB,CACjCiB,QAAQ,EACRf,oBACF,CAAC;QACDV,IAAI,CAAC4B,iBAAiB,CAACH,QAAQ,EAAExB,SAAS,EAAE0B,MAAM,CAAC;MACrD,CAAC,CAAC;IACJ;EACF,CAAC,EAAE,CAACjB,oBAAoB,CAAC,CAAC;EAE1B,OAAOJ,IAAA,CAACH,eAAe;IAACH,IAAI,EAAEA,IAAK;IAAAgB,QAAA,EAAEA;EAAQ,CAAkB,CAAC;AAClE,CAAC"}
+{"version":3,"file":"OdysseyTranslationProvider.js","names":["useEffect","i18n","defaultNS","resources","I18nextProvider","getTypedObjectKeys","jsx","_jsx","odysseyI18nResourceKeysList","mergeBundleOverrides","languageCode","translationOverrides","translationStrings","translationStringOverrides","formatLanguageCodeToHyphenated","replaceAll","OdysseyTranslationProvider","children","normalizedLanguageCode","changeHtmlElementLanguageAttribute","window","document","documentElement","setAttribute","changeLanguage","navigator","language","forEach","bundle","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 { ReactNode, useEffect } from \"react\";\n\nimport { DefaultSupportedLanguages } from \"./OdysseyTranslationProvider.types\";\n\nimport { i18n, defaultNS, resources } from \"./i18n\";\nimport { I18nextProvider } from \"react-i18next\";\nimport { getTypedObjectKeys } from \"./getTypedObjectKeys\";\n\nexport type OdysseyI18nResourceKeys = (typeof resources)[\"en\"];\nexport const odysseyI18nResourceKeysList = getTypedObjectKeys(resources[\"en\"]);\n\nexport type TranslationOverrides<\n  SupportedLanguages extends string = DefaultSupportedLanguages,\n> = Record<SupportedLanguages, Partial<OdysseyI18nResourceKeys>>;\n\nconst mergeBundleOverrides = <SupportedLanguages extends string>(\n  languageCode: SupportedLanguages,\n  translationOverrides: TranslationOverrides<SupportedLanguages>,\n) => {\n  const translationStrings = resources[languageCode] || {};\n  const translationStringOverrides = translationOverrides[languageCode];\n  return {\n    ...translationStrings,\n    ...translationStringOverrides,\n  };\n};\n\nexport type OdysseyTranslationProviderProps<\n  SupportedLanguages extends string = DefaultSupportedLanguages,\n> = {\n  children: ReactNode;\n  languageCode?: SupportedLanguages | DefaultSupportedLanguages;\n  translationOverrides?: TranslationOverrides<SupportedLanguages>;\n};\n\nconst formatLanguageCodeToHyphenated = <SupportedLanguages extends string>(\n  languageCode: OdysseyTranslationProviderProps<SupportedLanguages>[\"languageCode\"],\n) => languageCode?.replaceAll(\"_\", \"-\");\n\nexport const OdysseyTranslationProvider = <SupportedLanguages extends string>({\n  children,\n  languageCode,\n  translationOverrides,\n}: OdysseyTranslationProviderProps<SupportedLanguages>) => {\n  useEffect(() => {\n    const normalizedLanguageCode =\n      formatLanguageCodeToHyphenated<SupportedLanguages>(languageCode);\n\n    const changeHtmlElementLanguageAttribute = () => {\n      window.document.documentElement.setAttribute(\n        \"lang\",\n        normalizedLanguageCode || \"en\",\n      );\n    };\n    // Defaults to the browser's language if available otherwise `en` will be used\n    i18n.changeLanguage(\n      languageCode || window.navigator.language,\n      changeHtmlElementLanguageAttribute,\n    );\n  }, [languageCode]);\n\n  useEffect(() => {\n    if (translationOverrides) {\n      getTypedObjectKeys(translationOverrides).forEach((language) => {\n        const bundle = mergeBundleOverrides<SupportedLanguages>(\n          language,\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,SAAoBA,SAAS,QAAQ,OAAO;AAAC,SAIpCC,IAAI,EAAEC,SAAS,EAAEC,SAAS;AACnC,SAASC,eAAe,QAAQ,eAAe;AAAC,SACvCC,kBAAkB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG3B,OAAO,MAAMC,2BAA2B,GAAGH,kBAAkB,CAACF,SAAS,CAAC,IAAI,CAAC,CAAC;AAM9E,MAAMM,oBAAoB,GAAGA,CAC3BC,YAAgC,EAChCC,oBAA8D,KAC3D;EACH,MAAMC,kBAAkB,GAAGT,SAAS,CAACO,YAAY,CAAC,IAAI,CAAC,CAAC;EACxD,MAAMG,0BAA0B,GAAGF,oBAAoB,CAACD,YAAY,CAAC;EACrE,OAAO;IACL,GAAGE,kBAAkB;IACrB,GAAGC;EACL,CAAC;AACH,CAAC;AAUD,MAAMC,8BAA8B,GAClCJ,YAAiF,IAC9EA,YAAY,EAAEK,UAAU,CAAC,GAAG,EAAE,GAAG,CAAC;AAEvC,OAAO,MAAMC,0BAA0B,GAAGA,CAAoC;EAC5EC,QAAQ;EACRP,YAAY;EACZC;AACmD,CAAC,KAAK;EACzDX,SAAS,CAAC,MAAM;IACd,MAAMkB,sBAAsB,GAC1BJ,8BAA8B,CAAqBJ,YAAY,CAAC;IAElE,MAAMS,kCAAkC,GAAGA,CAAA,KAAM;MAC/CC,MAAM,CAACC,QAAQ,CAACC,eAAe,CAACC,YAAY,CAC1C,MAAM,EACNL,sBAAsB,IAAI,IAC5B,CAAC;IACH,CAAC;IAEDjB,IAAI,CAACuB,cAAc,CACjBd,YAAY,IAAIU,MAAM,CAACK,SAAS,CAACC,QAAQ,EACzCP,kCACF,CAAC;EACH,CAAC,EAAE,CAACT,YAAY,CAAC,CAAC;EAElBV,SAAS,CAAC,MAAM;IACd,IAAIW,oBAAoB,EAAE;MACxBN,kBAAkB,CAACM,oBAAoB,CAAC,CAACgB,OAAO,CAAED,QAAQ,IAAK;QAC7D,MAAME,MAAM,GAAGnB,oBAAoB,CACjCiB,QAAQ,EACRf,oBACF,CAAC;QACDV,IAAI,CAAC4B,iBAAiB,CAACH,QAAQ,EAAExB,SAAS,EAAE0B,MAAM,CAAC;MACrD,CAAC,CAAC;IACJ;EACF,CAAC,EAAE,CAACjB,oBAAoB,CAAC,CAAC;EAE1B,OAAOJ,IAAA,CAACH,eAAe;IAACH,IAAI,EAAEA,IAAK;IAAAgB,QAAA,EAAEA;EAAQ,CAAkB,CAAC;AAClE,CAAC"}

package/dist/PasswordField.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordField.js","names":["forwardRef","memo","useCallback","useImperativeHandle","useRef","useState","ShowIcon","HideIcon","Field","useTranslation","getControlState","useInputValues","jsx","_jsx","PasswordField","ariaDescribedBy","autoCompleteType","defaultValue","errorMessage","errorMessageList","hasInitialFocus","hint","id","idOverride","inputRef","isDisabled","isFullWidth","isOptional","hasShowPassword","isReadOnly","label","name","nameOverride","onChange","onChangeProp","onFocus","onBlur","placeholder","testId","translate","value","ref","t","inputType","setInputType","togglePasswordVisibility","controlledStateRef","controlledValue","uncontrolledValue","inputValues","controlState","current","localInputRef","focus","event","renderFieldComponent","errorMessageElementId","labelElementId","_InputBase","autoComplete","autoFocus","endAdornment","_InputAdornment","position","children","_IconButton","onClick","inputProps","role","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, IconButton } from \"@mui/material\";\nimport {\n  ChangeEventHandler,\n  FocusEventHandler,\n  forwardRef,\n  memo,\n  useCallback,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { ShowIcon, HideIcon } from \"./icons.generated\";\nimport { Field } from \"./Field\";\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport type { HtmlProps } from \"./HtmlProps\";\nimport { useTranslation } from \"react-i18next\";\nimport { FocusHandle, getControlState, useInputValues } from \"./inputUtils\";\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   * initial value for input. Use when component in uncontrolled.\n   */\n  defaultValue?: string;\n  /**\n   * If `true`, the component will receive focus automatically.\n   */\n  hasInitialFocus?: boolean;\n  /**\n   * If `true`, the show/hide icon is not shown to the user\n   */\n  hasShowPassword?: boolean;\n  /**\n   * The ref forwarded to the TextField\n   */\n  inputRef?: React.RefObject<FocusHandle>;\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. Use when component is controlled.\n   */\n  value?: string;\n} & FieldComponentProps &\n  HtmlProps;\n\nconst PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(\n  (\n    {\n      ariaDescribedBy,\n      autoCompleteType,\n      defaultValue,\n      errorMessage,\n      errorMessageList,\n      hasInitialFocus,\n      hint,\n      id: idOverride,\n      inputRef,\n      isDisabled = false,\n      isFullWidth = false,\n      isOptional = false,\n      hasShowPassword = true,\n      isReadOnly,\n      label,\n      name: nameOverride,\n      onChange: onChangeProp,\n      onFocus,\n      onBlur,\n      placeholder,\n      testId,\n      translate,\n      value,\n    },\n    ref\n  ) => {\n    const { t } = useTranslation();\n    const [inputType, setInputType] = useState(\"password\");\n\n    const togglePasswordVisibility = useCallback(() => {\n      setInputType((inputType) =>\n        inputType === \"password\" ? \"text\" : \"password\"\n      );\n    }, []);\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 localInputRef = useRef<HTMLInputElement>(null);\n    useImperativeHandle(\n      inputRef,\n      () => {\n        return {\n          focus: () => {\n            localInputRef.current?.focus();\n          },\n        };\n      },\n      []\n    );\n\n    const onChange = useCallback<\n      ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>\n    >(\n      (event) => {\n        onChangeProp?.(event);\n      },\n      [onChangeProp]\n    );\n\n    const renderFieldComponent = useCallback(\n      ({ ariaDescribedBy, errorMessageElementId, id, labelElementId }) => (\n        <InputBase\n          {...inputValues}\n          aria-describedby={ariaDescribedBy}\n          autoComplete={inputType === \"password\" ? autoCompleteType : \"off\"}\n          /* eslint-disable-next-line jsx-a11y/no-autofocus */\n          autoFocus={hasInitialFocus}\n          endAdornment={\n            hasShowPassword && (\n              <InputAdornment position=\"end\">\n                <IconButton\n                  aria-controls={id}\n                  aria-label={\n                    inputType === \"password\"\n                      ? t(\"passwordfield.icon.label.show\")\n                      : t(\"passwordfield.icon.label.hide\")\n                  }\n                  aria-pressed={inputType === \"text\"}\n                  onClick={togglePasswordVisibility}\n                >\n                  {inputType === \"password\" ? <ShowIcon /> : <HideIcon />}\n                </IconButton>\n              </InputAdornment>\n            )\n          }\n          id={id}\n          inputProps={{\n            \"aria-errormessage\": errorMessageElementId,\n            \"aria-labelledby\": labelElementId,\n            \"data-se\": testId,\n            // role: \"textbox\" Added because password inputs don't have an implicit role assigned. This causes problems with element selection.\n            role: \"textbox\",\n          }}\n          inputRef={localInputRef}\n          name={nameOverride ?? id}\n          onChange={onChange}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          placeholder={placeholder}\n          readOnly={isReadOnly}\n          ref={ref}\n          required={!isOptional}\n          translate={translate}\n          type={inputType}\n        />\n      ),\n      [\n        autoCompleteType,\n        hasInitialFocus,\n        inputValues,\n        t,\n        togglePasswordVisibility,\n        inputType,\n        nameOverride,\n        onChange,\n        onFocus,\n        onBlur,\n        placeholder,\n        isOptional,\n        isReadOnly,\n        hasShowPassword,\n        ref,\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        id={idOverride}\n        isDisabled={isDisabled}\n        isFullWidth={isFullWidth}\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":"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"}
+{"version":3,"file":"PasswordField.js","names":["forwardRef","memo","useCallback","useImperativeHandle","useRef","useState","ShowIcon","HideIcon","Field","useTranslation","getControlState","useInputValues","jsx","_jsx","PasswordField","ariaDescribedBy","autoCompleteType","defaultValue","errorMessage","errorMessageList","hasInitialFocus","hint","id","idOverride","inputRef","isDisabled","isFullWidth","isOptional","hasShowPassword","isReadOnly","label","name","nameOverride","onChange","onChangeProp","onFocus","onBlur","placeholder","testId","translate","value","ref","t","inputType","setInputType","togglePasswordVisibility","controlledStateRef","controlledValue","uncontrolledValue","inputValues","controlState","current","localInputRef","focus","event","renderFieldComponent","errorMessageElementId","labelElementId","_InputBase","autoComplete","autoFocus","endAdornment","_InputAdornment","position","children","_IconButton","onClick","inputProps","role","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, IconButton } from \"@mui/material\";\nimport {\n  ChangeEventHandler,\n  FocusEventHandler,\n  forwardRef,\n  memo,\n  useCallback,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { ShowIcon, HideIcon } from \"./icons.generated\";\nimport { Field } from \"./Field\";\nimport {\n  FieldComponentProps,\n  FieldComponentRenderProps,\n} from \"./FieldComponentProps\";\nimport type { HtmlProps } from \"./HtmlProps\";\nimport { useTranslation } from \"react-i18next\";\nimport { FocusHandle, getControlState, useInputValues } from \"./inputUtils\";\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   * initial value for input. Use when component in uncontrolled.\n   */\n  defaultValue?: string;\n  /**\n   * If `true`, the component will receive focus automatically.\n   */\n  hasInitialFocus?: boolean;\n  /**\n   * If `true`, the show/hide icon is not shown to the user\n   */\n  hasShowPassword?: boolean;\n  /**\n   * The ref forwarded to the TextField\n   */\n  inputRef?: React.RefObject<FocusHandle>;\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. Use when component is controlled.\n   */\n  value?: string;\n} & FieldComponentProps &\n  Pick<HtmlProps, \"ariaDescribedBy\" | \"testId\" | \"translate\">;\n\ntype FieldRenderProps = Partial<\n  Pick<FieldComponentRenderProps, \"ariaDescribedBy\" | \"errorMessageElementId\">\n> &\n  Pick<FieldComponentRenderProps, \"id\" | \"labelElementId\">;\n\nconst PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(\n  (\n    {\n      ariaDescribedBy,\n      autoCompleteType,\n      defaultValue,\n      errorMessage,\n      errorMessageList,\n      hasInitialFocus,\n      hint,\n      id: idOverride,\n      inputRef,\n      isDisabled = false,\n      isFullWidth = false,\n      isOptional = false,\n      hasShowPassword = true,\n      isReadOnly,\n      label,\n      name: nameOverride,\n      onChange: onChangeProp,\n      onFocus,\n      onBlur,\n      placeholder,\n      testId,\n      translate,\n      value,\n    },\n    ref,\n  ) => {\n    const { t } = useTranslation();\n    const [inputType, setInputType] = useState(\"password\");\n\n    const togglePasswordVisibility = useCallback(() => {\n      setInputType((inputType) =>\n        inputType === \"password\" ? \"text\" : \"password\",\n      );\n    }, []);\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 localInputRef = useRef<HTMLInputElement>(null);\n    useImperativeHandle(\n      inputRef,\n      () => {\n        return {\n          focus: () => {\n            localInputRef.current?.focus();\n          },\n        };\n      },\n      [],\n    );\n\n    const onChange = useCallback<\n      ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>\n    >(\n      (event) => {\n        onChangeProp?.(event);\n      },\n      [onChangeProp],\n    );\n\n    const renderFieldComponent = useCallback(\n      ({\n        ariaDescribedBy,\n        errorMessageElementId,\n        id,\n        labelElementId,\n      }: FieldRenderProps) => (\n        <InputBase\n          {...inputValues}\n          aria-describedby={ariaDescribedBy}\n          autoComplete={inputType === \"password\" ? autoCompleteType : \"off\"}\n          /* eslint-disable-next-line jsx-a11y/no-autofocus */\n          autoFocus={hasInitialFocus}\n          endAdornment={\n            hasShowPassword && (\n              <InputAdornment position=\"end\">\n                <IconButton\n                  aria-controls={id}\n                  aria-label={\n                    inputType === \"password\"\n                      ? t(\"passwordfield.icon.label.show\")\n                      : t(\"passwordfield.icon.label.hide\")\n                  }\n                  aria-pressed={inputType === \"text\"}\n                  onClick={togglePasswordVisibility}\n                >\n                  {inputType === \"password\" ? <ShowIcon /> : <HideIcon />}\n                </IconButton>\n              </InputAdornment>\n            )\n          }\n          id={id}\n          inputProps={{\n            \"aria-errormessage\": errorMessageElementId,\n            \"aria-labelledby\": labelElementId,\n            \"data-se\": testId,\n            // role: \"textbox\" Added because password inputs don't have an implicit role assigned. This causes problems with element selection.\n            role: \"textbox\",\n          }}\n          inputRef={localInputRef}\n          name={nameOverride ?? id}\n          onChange={onChange}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          placeholder={placeholder}\n          readOnly={isReadOnly}\n          ref={ref}\n          required={!isOptional}\n          translate={translate}\n          type={inputType}\n        />\n      ),\n      [\n        autoCompleteType,\n        hasInitialFocus,\n        inputValues,\n        t,\n        togglePasswordVisibility,\n        inputType,\n        nameOverride,\n        onChange,\n        onFocus,\n        onBlur,\n        placeholder,\n        isOptional,\n        isReadOnly,\n        hasShowPassword,\n        ref,\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        id={idOverride}\n        isDisabled={isDisabled}\n        isFullWidth={isFullWidth}\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,mBAAmB,EACnBC,MAAM,EACNC,QAAQ,QACH,OAAO;AAAC,SAENC,QAAQ,EAAEC,QAAQ;AAAA,SAClBC,KAAK;AAMd,SAASC,cAAc,QAAQ,eAAe;AAAC,SACzBC,eAAe,EAAEC,cAAc;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAyDrD,MAAMC,aAAa,GAAGd,UAAU,CAC9B,CACE;EACEe,eAAe;EACfC,gBAAgB;EAChBC,YAAY;EACZC,YAAY;EACZC,gBAAgB;EAChBC,eAAe;EACfC,IAAI;EACJC,EAAE,EAAEC,UAAU;EACdC,QAAQ;EACRC,UAAU,GAAG,KAAK;EAClBC,WAAW,GAAG,KAAK;EACnBC,UAAU,GAAG,KAAK;EAClBC,eAAe,GAAG,IAAI;EACtBC,UAAU;EACVC,KAAK;EACLC,IAAI,EAAEC,YAAY;EAClBC,QAAQ,EAAEC,YAAY;EACtBC,OAAO;EACPC,MAAM;EACNC,WAAW;EACXC,MAAM;EACNC,SAAS;EACTC;AACF,CAAC,EACDC,GAAG,KACA;EACH,MAAM;IAAEC;EAAE,CAAC,GAAGjC,cAAc,CAAC,CAAC;EAC9B,MAAM,CAACkC,SAAS,EAAEC,YAAY,CAAC,GAAGvC,QAAQ,CAAC,UAAU,CAAC;EAEtD,MAAMwC,wBAAwB,GAAG3C,WAAW,CAAC,MAAM;IACjD0C,YAAY,CAAED,SAAS,IACrBA,SAAS,KAAK,UAAU,GAAG,MAAM,GAAG,UACtC,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMG,kBAAkB,GAAG1C,MAAM,CAC/BM,eAAe,CAAC;IACdqC,eAAe,EAAEP,KAAK;IACtBQ,iBAAiB,EAAE/B;EACrB,CAAC,CACH,CAAC;EACD,MAAMgC,WAAW,GAAGtC,cAAc,CAAC;IACjCM,YAAY;IACZuB,KAAK;IACLU,YAAY,EAAEJ,kBAAkB,CAACK;EACnC,CAAC,CAAC;EAEF,MAAMC,aAAa,GAAGhD,MAAM,CAAmB,IAAI,CAAC;EACpDD,mBAAmB,CACjBqB,QAAQ,EACR,MAAM;IACJ,OAAO;MACL6B,KAAK,EAAEA,CAAA,KAAM;QACXD,aAAa,CAACD,OAAO,EAAEE,KAAK,CAAC,CAAC;MAChC;IACF,CAAC;EACH,CAAC,EACD,EACF,CAAC;EAED,MAAMpB,QAAQ,GAAG/B,WAAW,CAGzBoD,KAAK,IAAK;IACTpB,YAAY,GAAGoB,KAAK,CAAC;EACvB,CAAC,EACD,CAACpB,YAAY,CACf,CAAC;EAED,MAAMqB,oBAAoB,GAAGrD,WAAW,CACtC,CAAC;IACCa,eAAe;IACfyC,qBAAqB;IACrBlC,EAAE;IACFmC;EACgB,CAAC,KACjB5C,IAAA,CAAA6C,UAAA;IAAA,GACMT,WAAW;IACf,oBAAkBlC,eAAgB;IAClC4C,YAAY,EAAEhB,SAAS,KAAK,UAAU,GAAG3B,gBAAgB,GAAG,KAAM;IAElE4C,SAAS,EAAExC,eAAgB;IAC3ByC,YAAY,EACVjC,eAAe,IACbf,IAAA,CAAAiD,eAAA;MAAgBC,QAAQ,EAAC,KAAK;MAAAC,QAAA,EAC5BnD,IAAA,CAAAoD,WAAA;QACE,iBAAe3C,EAAG;QAClB,cACEqB,SAAS,KAAK,UAAU,GACpBD,CAAC,CAAC,+BAA+B,CAAC,GAClCA,CAAC,CAAC,+BAA+B,CACtC;QACD,gBAAcC,SAAS,KAAK,MAAO;QACnCuB,OAAO,EAAErB,wBAAyB;QAAAmB,QAAA,EAEjCrB,SAAS,KAAK,UAAU,GAAG9B,IAAA,CAACP,QAAQ,IAAE,CAAC,GAAGO,IAAA,CAACN,QAAQ,IAAE;MAAC,CAC7C;IAAC,CACC,CAEnB;IACDe,EAAE,EAAEA,EAAG;IACP6C,UAAU,EAAE;MACV,mBAAmB,EAAEX,qBAAqB;MAC1C,iBAAiB,EAAEC,cAAc;MACjC,SAAS,EAAEnB,MAAM;MAEjB8B,IAAI,EAAE;IACR,CAAE;IACF5C,QAAQ,EAAE4B,aAAc;IACxBrB,IAAI,EAAEC,YAAY,IAAIV,EAAG;IACzBW,QAAQ,EAAEA,QAAS;IACnBE,OAAO,EAAEA,OAAQ;IACjBC,MAAM,EAAEA,MAAO;IACfC,WAAW,EAAEA,WAAY;IACzBgC,QAAQ,EAAExC,UAAW;IACrBY,GAAG,EAAEA,GAAI;IACT6B,QAAQ,EAAE,CAAC3C,UAAW;IACtBY,SAAS,EAAEA,SAAU;IACrBgC,IAAI,EAAE5B;EAAU,CACjB,CACF,EACD,CACE3B,gBAAgB,EAChBI,eAAe,EACf6B,WAAW,EACXP,CAAC,EACDG,wBAAwB,EACxBF,SAAS,EACTX,YAAY,EACZC,QAAQ,EACRE,OAAO,EACPC,MAAM,EACNC,WAAW,EACXV,UAAU,EACVE,UAAU,EACVD,eAAe,EACfa,GAAG,EACHH,MAAM,EACNC,SAAS,CAEb,CAAC;EAED,OACE1B,IAAA,CAACL,KAAK;IACJO,eAAe,EAAEA,eAAgB;IACjCG,YAAY,EAAEA,YAAa;IAC3BC,gBAAgB,EAAEA,gBAAiB;IACnCqD,SAAS,EAAC,QAAQ;IAClBC,eAAe;IACfpD,IAAI,EAAEA,IAAK;IACXC,EAAE,EAAEC,UAAW;IACfE,UAAU,EAAEA,UAAW;IACvBC,WAAW,EAAEA,WAAY;IACzBC,UAAU,EAAEA,UAAW;IACvBG,KAAK,EAAEA,KAAM;IACbyB,oBAAoB,EAAEA;EAAqB,CAC5C,CAAC;AAEN,CACF,CAAC;AAED,MAAMmB,qBAAqB,GAAGzE,IAAI,CAACa,aAAa,CAAC;AACjD4D,qBAAqB,CAACC,WAAW,GAAG,eAAe;AAEnD,SAASD,qBAAqB,IAAI5D,aAAa"}

package/dist/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","names":["memo","useCallback","useRef","useImperativeHandle","jsx","_jsx","Radio","inputRef","isChecked","isDisabled","isInvalid","label","name","testId","translate","value","onChange","onChangeProp","onBlur","onBlurProp","localInputRef","focus","current","event","checked","_FormControlLabel","className","control","_Radio","inputProps","disabled","MemoizedRadio","displayName"],"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 {\n  FormControlLabel,\n  FormControlLabelProps as MuiFormControlLabelProps,\n  Radio as MuiRadio,\n  RadioProps as MuiRadioProps,\n} from \"@mui/material\";\nimport { memo, useCallback, useRef, useImperativeHandle } from \"react\";\n\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport type { HtmlProps } from \"./HtmlProps\";\nimport { FocusHandle } from \"./inputUtils\";\n\nexport type RadioProps = {\n  /**\n   * The ref forwarded to the Radio\n   */\n  inputRef?: React.RefObject<FocusHandle>;\n  /**\n   * If `true`, the Radio is selected\n   */\n  isChecked?: boolean;\n  /**\n   * If `true`, the Radio has an invalid value\n   */\n  isInvalid?: boolean;\n  /**\n   * The label text for the Radio\n   */\n  label: string;\n  /**\n   * The value attribute of the Radio\n   */\n  value: string;\n  /**\n   * Callback fired when the state is changed. Provides event and checked value.\n   */\n  onChange?: MuiRadioProps[\"onChange\"];\n  /**\n   * Callback fired when the blur event happens. Provides event value.\n   */\n  onBlur?: MuiFormControlLabelProps[\"onBlur\"];\n} & Pick<FieldComponentProps, \"isDisabled\" | \"name\"> &\n  HtmlProps;\n\nconst Radio = ({\n  inputRef,\n  isChecked,\n  isDisabled,\n  isInvalid,\n  label,\n  name,\n  testId,\n  translate,\n  value,\n  onChange: onChangeProp,\n  onBlur: onBlurProp,\n}: RadioProps) => {\n  const localInputRef = useRef<HTMLInputElement>(null);\n  useImperativeHandle(\n    inputRef,\n    () => {\n      return {\n        focus: () => {\n          localInputRef.current?.focus();\n        },\n      };\n    },\n    []\n  );\n\n  const onChange = useCallback<NonNullable<MuiRadioProps[\"onChange\"]>>(\n    (event, checked) => {\n      onChangeProp?.(event, checked);\n    },\n    [onChangeProp]\n  );\n\n  const onBlur = useCallback<NonNullable<MuiFormControlLabelProps[\"onBlur\"]>>(\n    (event) => {\n      onBlurProp?.(event);\n    },\n    [onBlurProp]\n  );\n\n  return (\n    <FormControlLabel\n      checked={isChecked}\n      className={isInvalid ? \"Mui-error\" : \"\"}\n      control={\n        <MuiRadio\n          inputProps={{\n            \"data-se\": testId,\n          }}\n          inputRef={localInputRef}\n          onChange={onChange}\n        />\n      }\n      disabled={isDisabled}\n      label={label}\n      name={name}\n      translate={translate}\n      value={value}\n      onBlur={onBlur}\n    />\n  );\n};\n\nconst MemoizedRadio = memo(Radio);\nMemoizedRadio.displayName = \"Radio\";\n\nexport { MemoizedRadio as Radio };\n"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAQA,SAASA,IAAI,EAAEC,WAAW,EAAEC,MAAM,EAAEC,mBAAmB,QAAQ,OAAO;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAsCvE,MAAMC,KAAK,GAAGA,CAAC;EACbC,QAAQ;EACRC,SAAS;EACTC,UAAU;EACVC,SAAS;EACTC,KAAK;EACLC,IAAI;EACJC,MAAM;EACNC,SAAS;EACTC,KAAK;EACLC,QAAQ,EAAEC,YAAY;EACtBC,MAAM,EAAEC;AACE,CAAC,KAAK;EAChB,MAAMC,aAAa,GAAGlB,MAAM,CAAmB,IAAI,CAAC;EACpDC,mBAAmB,CACjBI,QAAQ,EACR,MAAM;IACJ,OAAO;MACLc,KAAK,EAAEA,CAAA,KAAM;QACXD,aAAa,CAACE,OAAO,EAAED,KAAK,CAAC,CAAC;MAChC;IACF,CAAC;EACH,CAAC,EACD,EACF,CAAC;EAED,MAAML,QAAQ,GAAGf,WAAW,CAC1B,CAACsB,KAAK,EAAEC,OAAO,KAAK;IAClBP,YAAY,GAAGM,KAAK,EAAEC,OAAO,CAAC;EAChC,CAAC,EACD,CAACP,YAAY,CACf,CAAC;EAED,MAAMC,MAAM,GAAGjB,WAAW,CACvBsB,KAAK,IAAK;IACTJ,UAAU,GAAGI,KAAK,CAAC;EACrB,CAAC,EACD,CAACJ,UAAU,CACb,CAAC;EAED,OACEd,IAAA,CAAAoB,iBAAA;IACED,OAAO,EAAEhB,SAAU;IACnBkB,SAAS,EAAEhB,SAAS,GAAG,WAAW,GAAG,EAAG;IACxCiB,OAAO,EACLtB,IAAA,CAAAuB,MAAA;MACEC,UAAU,EAAE;QACV,SAAS,EAAEhB;MACb,CAAE;MACFN,QAAQ,EAAEa,aAAc;MACxBJ,QAAQ,EAAEA;IAAS,CACpB,CACF;IACDc,QAAQ,EAAErB,UAAW;IACrBE,KAAK,EAAEA,KAAM;IACbC,IAAI,EAAEA,IAAK;IACXE,SAAS,EAAEA,SAAU;IACrBC,KAAK,EAAEA,KAAM;IACbG,MAAM,EAAEA;EAAO,CAChB,CAAC;AAEN,CAAC;AAED,MAAMa,aAAa,GAAG/B,IAAI,CAACM,KAAK,CAAC;AACjCyB,aAAa,CAACC,WAAW,GAAG,OAAO;AAEnC,SAASD,aAAa,IAAIzB,KAAK"}
+{"version":3,"file":"Radio.js","names":["memo","useCallback","useRef","useImperativeHandle","jsx","_jsx","Radio","inputRef","isChecked","isDisabled","isInvalid","label","name","testId","translate","value","onChange","onChangeProp","onBlur","onBlurProp","localInputRef","focus","current","event","checked","_FormControlLabel","className","control","_Radio","inputProps","disabled","MemoizedRadio","displayName"],"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 {\n  FormControlLabel,\n  FormControlLabelProps as MuiFormControlLabelProps,\n  Radio as MuiRadio,\n  RadioProps as MuiRadioProps,\n} from \"@mui/material\";\nimport { memo, useCallback, useRef, useImperativeHandle } from \"react\";\n\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport type { HtmlProps } from \"./HtmlProps\";\nimport { FocusHandle } from \"./inputUtils\";\n\nexport type RadioProps = {\n  /**\n   * The ref forwarded to the Radio\n   */\n  inputRef?: React.RefObject<FocusHandle>;\n  /**\n   * If `true`, the Radio is selected\n   */\n  isChecked?: boolean;\n  /**\n   * If `true`, the Radio has an invalid value\n   */\n  isInvalid?: boolean;\n  /**\n   * The label text for the Radio\n   */\n  label: string;\n  /**\n   * The value attribute of the Radio\n   */\n  value: string;\n  /**\n   * Callback fired when the state is changed. Provides event and checked value.\n   */\n  onChange?: MuiRadioProps[\"onChange\"];\n  /**\n   * Callback fired when the blur event happens. Provides event value.\n   */\n  onBlur?: MuiFormControlLabelProps[\"onBlur\"];\n} & Pick<FieldComponentProps, \"isDisabled\" | \"name\"> &\n  Pick<HtmlProps, \"testId\" | \"translate\">;\n\nconst Radio = ({\n  inputRef,\n  isChecked,\n  isDisabled,\n  isInvalid,\n  label,\n  name,\n  testId,\n  translate,\n  value,\n  onChange: onChangeProp,\n  onBlur: onBlurProp,\n}: RadioProps) => {\n  const localInputRef = useRef<HTMLInputElement>(null);\n  useImperativeHandle(\n    inputRef,\n    () => {\n      return {\n        focus: () => {\n          localInputRef.current?.focus();\n        },\n      };\n    },\n    [],\n  );\n\n  const onChange = useCallback<NonNullable<MuiRadioProps[\"onChange\"]>>(\n    (event, checked) => {\n      onChangeProp?.(event, checked);\n    },\n    [onChangeProp],\n  );\n\n  const onBlur = useCallback<NonNullable<MuiFormControlLabelProps[\"onBlur\"]>>(\n    (event) => {\n      onBlurProp?.(event);\n    },\n    [onBlurProp],\n  );\n\n  return (\n    <FormControlLabel\n      checked={isChecked}\n      className={isInvalid ? \"Mui-error\" : \"\"}\n      control={\n        <MuiRadio\n          inputProps={{\n            \"data-se\": testId,\n          }}\n          inputRef={localInputRef}\n          onChange={onChange}\n        />\n      }\n      disabled={isDisabled}\n      label={label}\n      name={name}\n      translate={translate}\n      value={value}\n      onBlur={onBlur}\n    />\n  );\n};\n\nconst MemoizedRadio = memo(Radio);\nMemoizedRadio.displayName = \"Radio\";\n\nexport { MemoizedRadio as Radio };\n"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAQA,SAASA,IAAI,EAAEC,WAAW,EAAEC,MAAM,EAAEC,mBAAmB,QAAQ,OAAO;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAsCvE,MAAMC,KAAK,GAAGA,CAAC;EACbC,QAAQ;EACRC,SAAS;EACTC,UAAU;EACVC,SAAS;EACTC,KAAK;EACLC,IAAI;EACJC,MAAM;EACNC,SAAS;EACTC,KAAK;EACLC,QAAQ,EAAEC,YAAY;EACtBC,MAAM,EAAEC;AACE,CAAC,KAAK;EAChB,MAAMC,aAAa,GAAGlB,MAAM,CAAmB,IAAI,CAAC;EACpDC,mBAAmB,CACjBI,QAAQ,EACR,MAAM;IACJ,OAAO;MACLc,KAAK,EAAEA,CAAA,KAAM;QACXD,aAAa,CAACE,OAAO,EAAED,KAAK,CAAC,CAAC;MAChC;IACF,CAAC;EACH,CAAC,EACD,EACF,CAAC;EAED,MAAML,QAAQ,GAAGf,WAAW,CAC1B,CAACsB,KAAK,EAAEC,OAAO,KAAK;IAClBP,YAAY,GAAGM,KAAK,EAAEC,OAAO,CAAC;EAChC,CAAC,EACD,CAACP,YAAY,CACf,CAAC;EAED,MAAMC,MAAM,GAAGjB,WAAW,CACvBsB,KAAK,IAAK;IACTJ,UAAU,GAAGI,KAAK,CAAC;EACrB,CAAC,EACD,CAACJ,UAAU,CACb,CAAC;EAED,OACEd,IAAA,CAAAoB,iBAAA;IACED,OAAO,EAAEhB,SAAU;IACnBkB,SAAS,EAAEhB,SAAS,GAAG,WAAW,GAAG,EAAG;IACxCiB,OAAO,EACLtB,IAAA,CAAAuB,MAAA;MACEC,UAAU,EAAE;QACV,SAAS,EAAEhB;MACb,CAAE;MACFN,QAAQ,EAAEa,aAAc;MACxBJ,QAAQ,EAAEA;IAAS,CACpB,CACF;IACDc,QAAQ,EAAErB,UAAW;IACrBE,KAAK,EAAEA,KAAM;IACbC,IAAI,EAAEA,IAAK;IACXE,SAAS,EAAEA,SAAU;IACrBC,KAAK,EAAEA,KAAM;IACbG,MAAM,EAAEA;EAAO,CAChB,CAAC;AAEN,CAAC;AAED,MAAMa,aAAa,GAAG/B,IAAI,CAACM,KAAK,CAAC;AACjCyB,aAAa,CAACC,WAAW,GAAG,OAAO;AAEnC,SAASD,aAAa,IAAIzB,KAAK"}

package/dist/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","names":["memo","useCallback","useRef","Field","getControlState","useInputValues","jsx","_jsx","RadioGroup","ariaDescribedBy","children","defaultValue","errorMessage","errorMessageList","hint","HintLinkComponent","id","idOverride","isDisabled","label","name","nameOverride","onChange","onChangeProp","testId","translate","value","controlledStateRef","controlledValue","uncontrolledValue","inputValues","controlState","current","event","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 { memo, ReactElement, useCallback, useRef } from \"react\";\n\nimport { Radio, RadioProps } from \"./Radio\";\nimport { Field } from \"./Field\";\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport type { HtmlProps } from \"./HtmlProps\";\nimport { getControlState, useInputValues } from \"./inputUtils\";\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 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?: RadioProps[\"value\"];\n} & Pick<\n  FieldComponentProps,\n  | \"ariaDescribedBy\"\n  | \"errorMessage\"\n  | \"errorMessageList\"\n  | \"hint\"\n  | \"HintLinkComponent\"\n  | \"id\"\n  | \"isDisabled\"\n  | \"name\"\n> &\n  HtmlProps;\n\nconst RadioGroup = ({\n  ariaDescribedBy,\n  children,\n  defaultValue,\n  errorMessage,\n  errorMessageList,\n  hint,\n  HintLinkComponent,\n  id: idOverride,\n  isDisabled,\n  label,\n  name: nameOverride,\n  onChange: onChangeProp,\n  testId,\n  translate,\n  value,\n}: RadioGroupProps) => {\n  const controlledStateRef = useRef(\n    getControlState({ controlledValue: value, uncontrolledValue: defaultValue })\n  );\n  const inputValues = useInputValues({\n    defaultValue,\n    value,\n    controlState: controlledStateRef.current,\n  });\n\n  const onChange = useCallback<NonNullable<MuiRadioGroupProps[\"onChange\"]>>(\n    (event, value) => {\n      onChangeProp?.(event, value);\n    },\n    [onChangeProp]\n  );\n  const renderFieldComponent = useCallback(\n    ({ ariaDescribedBy, errorMessageElementId, id, labelElementId }) => (\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        {children}\n      </MuiRadioGroup>\n    ),\n    [children, inputValues, nameOverride, onChange, 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      label={label}\n      renderFieldComponent={renderFieldComponent}\n    />\n  );\n};\n\nconst MemoizedRadioGroup = memo(RadioGroup);\nMemoizedRadioGroup.displayName = \"RadioGroup\";\n\nexport { MemoizedRadioGroup as RadioGroup };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAMA,SAASA,IAAI,EAAgBC,WAAW,EAAEC,MAAM,QAAQ,OAAO;AAAC,SAGvDC,KAAK;AAAA,SAGLC,eAAe,EAAEC,cAAc;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAoCxC,MAAMC,UAAU,GAAGA,CAAC;EAClBC,eAAe;EACfC,QAAQ;EACRC,YAAY;EACZC,YAAY;EACZC,gBAAgB;EAChBC,IAAI;EACJC,iBAAiB;EACjBC,EAAE,EAAEC,UAAU;EACdC,UAAU;EACVC,KAAK;EACLC,IAAI,EAAEC,YAAY;EAClBC,QAAQ,EAAEC,YAAY;EACtBC,MAAM;EACNC,SAAS;EACTC;AACe,CAAC,KAAK;EACrB,MAAMC,kBAAkB,GAAGzB,MAAM,CAC/BE,eAAe,CAAC;IAAEwB,eAAe,EAAEF,KAAK;IAAEG,iBAAiB,EAAElB;EAAa,CAAC,CAC7E,CAAC;EACD,MAAMmB,WAAW,GAAGzB,cAAc,CAAC;IACjCM,YAAY;IACZe,KAAK;IACLK,YAAY,EAAEJ,kBAAkB,CAACK;EACnC,CAAC,CAAC;EAEF,MAAMV,QAAQ,GAAGrB,WAAW,CAC1B,CAACgC,KAAK,EAAEP,KAAK,KAAK;IAChBH,YAAY,GAAGU,KAAK,EAAEP,KAAK,CAAC;EAC9B,CAAC,EACD,CAACH,YAAY,CACf,CAAC;EACD,MAAMW,oBAAoB,GAAGjC,WAAW,CACtC,CAAC;IAAEQ,eAAe;IAAE0B,qBAAqB;IAAEnB,EAAE;IAAEoB;EAAe,CAAC,KAC7D7B,IAAA,CAAA8B,WAAA;IAAA,GACMP,WAAW;IACf,oBAAkBrB,eAAgB;IAClC,qBAAmB0B,qBAAsB;IACzC,mBAAiBC,cAAe;IAChC,WAASZ,MAAO;IAChBR,EAAE,EAAEA,EAAG;IACPI,IAAI,EAAEC,YAAY,IAAIL,EAAG;IACzBM,QAAQ,EAAEA,QAAS;IACnBG,SAAS,EAAEA,SAAU;IAAAf,QAAA,EAEpBA;EAAQ,CACI,CAChB,EACD,CAACA,QAAQ,EAAEoB,WAAW,EAAET,YAAY,EAAEC,QAAQ,EAAEE,MAAM,EAAEC,SAAS,CACnE,CAAC;EAED,OACElB,IAAA,CAACJ,KAAK;IACJM,eAAe,EAAEA,eAAgB;IACjCG,YAAY,EAAEA,YAAa;IAC3BC,gBAAgB,EAAEA,gBAAiB;IACnCyB,SAAS,EAAC,OAAO;IACjBC,eAAe,EAAE,KAAM;IACvBzB,IAAI,EAAEA,IAAK;IACXC,iBAAiB,EAAEA,iBAAkB;IACrCC,EAAE,EAAEC,UAAW;IACfC,UAAU,EAAEA,UAAW;IACvBC,KAAK,EAAEA,KAAM;IACbe,oBAAoB,EAAEA;EAAqB,CAC5C,CAAC;AAEN,CAAC;AAED,MAAMM,kBAAkB,GAAGxC,IAAI,CAACQ,UAAU,CAAC;AAC3CgC,kBAAkB,CAACC,WAAW,GAAG,YAAY;AAE7C,SAASD,kBAAkB,IAAIhC,UAAU"}
+{"version":3,"file":"RadioGroup.js","names":["memo","useCallback","useRef","Field","getControlState","useInputValues","jsx","_jsx","RadioGroup","ariaDescribedBy","children","defaultValue","errorMessage","errorMessageList","hint","HintLinkComponent","id","idOverride","isDisabled","label","name","nameOverride","onChange","onChangeProp","testId","translate","value","controlledStateRef","controlledValue","uncontrolledValue","inputValues","controlState","current","event","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 { memo, ReactElement, useCallback, useRef } from \"react\";\n\nimport { Radio, RadioProps } from \"./Radio\";\nimport { Field } from \"./Field\";\nimport {\n  FieldComponentProps,\n  FieldComponentRenderProps,\n} from \"./FieldComponentProps\";\nimport type { HtmlProps } from \"./HtmlProps\";\nimport { getControlState, useInputValues } from \"./inputUtils\";\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 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?: RadioProps[\"value\"];\n} & Pick<\n  FieldComponentProps,\n  | \"errorMessage\"\n  | \"errorMessageList\"\n  | \"hint\"\n  | \"HintLinkComponent\"\n  | \"id\"\n  | \"isDisabled\"\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  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  const inputValues = useInputValues({\n    defaultValue,\n    value,\n    controlState: controlledStateRef.current,\n  });\n\n  const onChange = useCallback<NonNullable<MuiRadioGroupProps[\"onChange\"]>>(\n    (event, value) => {\n      onChangeProp?.(event, value);\n    },\n    [onChangeProp],\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        {children}\n      </MuiRadioGroup>\n    ),\n    [children, inputValues, nameOverride, onChange, 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      label={label}\n      renderFieldComponent={renderFieldComponent}\n    />\n  );\n};\n\nconst MemoizedRadioGroup = memo(RadioGroup);\nMemoizedRadioGroup.displayName = \"RadioGroup\";\n\nexport { MemoizedRadioGroup as RadioGroup };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAMA,SAASA,IAAI,EAAgBC,WAAW,EAAEC,MAAM,QAAQ,OAAO;AAAC,SAGvDC,KAAK;AAAA,SAMLC,eAAe,EAAEC,cAAc;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAwCxC,MAAMC,UAAU,GAAGA,CAAC;EAClBC,eAAe;EACfC,QAAQ;EACRC,YAAY;EACZC,YAAY;EACZC,gBAAgB;EAChBC,IAAI;EACJC,iBAAiB;EACjBC,EAAE,EAAEC,UAAU;EACdC,UAAU;EACVC,KAAK;EACLC,IAAI,EAAEC,YAAY;EAClBC,QAAQ,EAAEC,YAAY;EACtBC,MAAM;EACNC,SAAS;EACTC;AACe,CAAC,KAAK;EACrB,MAAMC,kBAAkB,GAAGzB,MAAM,CAC/BE,eAAe,CAAC;IACdwB,eAAe,EAAEF,KAAK;IACtBG,iBAAiB,EAAElB;EACrB,CAAC,CACH,CAAC;EACD,MAAMmB,WAAW,GAAGzB,cAAc,CAAC;IACjCM,YAAY;IACZe,KAAK;IACLK,YAAY,EAAEJ,kBAAkB,CAACK;EACnC,CAAC,CAAC;EAEF,MAAMV,QAAQ,GAAGrB,WAAW,CAC1B,CAACgC,KAAK,EAAEP,KAAK,KAAK;IAChBH,YAAY,GAAGU,KAAK,EAAEP,KAAK,CAAC;EAC9B,CAAC,EACD,CAACH,YAAY,CACf,CAAC;EACD,MAAMW,oBAAoB,GAAGjC,WAAW,CACtC,CAAC;IACCQ,eAAe;IACf0B,qBAAqB;IACrBnB,EAAE;IACFoB;EACgB,CAAC,KACjB7B,IAAA,CAAA8B,WAAA;IAAA,GACMP,WAAW;IACf,oBAAkBrB,eAAgB;IAClC,qBAAmB0B,qBAAsB;IACzC,mBAAiBC,cAAe;IAChC,WAASZ,MAAO;IAChBR,EAAE,EAAEA,EAAG;IACPI,IAAI,EAAEC,YAAY,IAAIL,EAAG;IACzBM,QAAQ,EAAEA,QAAS;IACnBG,SAAS,EAAEA,SAAU;IAAAf,QAAA,EAEpBA;EAAQ,CACI,CAChB,EACD,CAACA,QAAQ,EAAEoB,WAAW,EAAET,YAAY,EAAEC,QAAQ,EAAEE,MAAM,EAAEC,SAAS,CACnE,CAAC;EAED,OACElB,IAAA,CAACJ,KAAK;IACJM,eAAe,EAAEA,eAAgB;IACjCG,YAAY,EAAEA,YAAa;IAC3BC,gBAAgB,EAAEA,gBAAiB;IACnCyB,SAAS,EAAC,OAAO;IACjBC,eAAe,EAAE,KAAM;IACvBzB,IAAI,EAAEA,IAAK;IACXC,iBAAiB,EAAEA,iBAAkB;IACrCC,EAAE,EAAEC,UAAW;IACfC,UAAU,EAAEA,UAAW;IACvBC,KAAK,EAAEA,KAAM;IACbe,oBAAoB,EAAEA;EAAqB,CAC5C,CAAC;AAEN,CAAC;AAED,MAAMM,kBAAkB,GAAGxC,IAAI,CAACQ,UAAU,CAAC;AAC3CgC,kBAAkB,CAACC,WAAW,GAAG,YAAY;AAE7C,SAASD,kBAAkB,IAAIhC,UAAU"}

package/dist/ScreenReaderText.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScreenReaderText.js","names":["memo","visuallyHidden","jsx","_jsx","style","ScreenReaderText","children","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\";\n\nexport type ScreenReaderTextProps = {\n  /**\n   * The visually-hidden text.\n   */\n  children: ReactNode;\n} & HtmlProps;\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, translate }: ScreenReaderTextProps) => (\n  <Box sx={style} component=\"span\" translate={translate}>\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;AAe5C,MAAMC,KAAK,GAAG;EAAE,GAAGH;AAAe,CAAC;AAEnC,MAAMI,gBAAgB,GAAGA,CAAC;EAAEC,QAAQ;EAAEC;AAAiC,CAAC,KACtEJ,IAAA,CAAAK,IAAA;EAAKC,EAAE,EAAEL,KAAM;EAACM,SAAS,EAAC,MAAM;EAACH,SAAS,EAAEA,SAAU;EAAAD,QAAA,EACnDA;AAAQ,CACN,CACN;AAED,MAAMK,wBAAwB,GAAGX,IAAI,CAACK,gBAAgB,CAAC;AACvDM,wBAAwB,CAACC,WAAW,GAAG,kBAAkB;AAEzD,SAASD,wBAAwB,IAAIN,gBAAgB"}
+{"version":3,"file":"ScreenReaderText.js","names":["memo","visuallyHidden","jsx","_jsx","style","ScreenReaderText","children","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\";\n\nexport type ScreenReaderTextProps = {\n  /**\n   * The visually-hidden text.\n   */\n  children: ReactNode;\n} & Pick<HtmlProps, \"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 = ({ children, translate }: ScreenReaderTextProps) => (\n  <Box sx={style} component=\"span\" translate={translate}>\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;AAe5C,MAAMC,KAAK,GAAG;EAAE,GAAGH;AAAe,CAAC;AAEnC,MAAMI,gBAAgB,GAAGA,CAAC;EAAEC,QAAQ;EAAEC;AAAiC,CAAC,KACtEJ,IAAA,CAAAK,IAAA;EAAKC,EAAE,EAAEL,KAAM;EAACM,SAAS,EAAC,MAAM;EAACH,SAAS,EAAEA,SAAU;EAAAD,QAAA,EACnDA;AAAQ,CACN,CACN;AAED,MAAMK,wBAAwB,GAAGX,IAAI,CAACK,gBAAgB,CAAC;AACvDM,wBAAwB,CAACC,WAAW,GAAG,kBAAkB;AAEzD,SAASD,wBAAwB,IAAIN,gBAAgB"}

package/dist/SearchField.js

@@ -17,6 +17,7 @@ import { CloseCircleFilledIcon, SearchIcon } from "./icons.generated/index.js";
 import { Field } from "./Field.js";
 import { getControlState, useInputValues } from "./inputUtils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+export const searchVariantValues = ["outline", "filled"];
 const SearchField = forwardRef(({
   ariaDescribedBy,
   autoCompleteType,
@@ -35,7 +36,8 @@ const SearchField = forwardRef(({
   tabIndex,
   testId,
   translate,
-  value
+  value,
+  variant = "outline"
 }, ref) => {
   const onChange = useCallback(event => {
     onChangeProp?.(event);
@@ -75,6 +77,8 @@ const SearchField = forwardRef(({
       })
     }),
     id: id,
+    "data-ods-type": "search",
+    "data-ods-variant": variant,
     name: nameOverride ?? id,
     onBlur: onBlur,
     onChange: onChange,
@@ -87,7 +91,7 @@ const SearchField = forwardRef(({
     }),
     translate: translate,
     type: "search"
-  }), [autoCompleteType, defaultValue, hasInitialFocus, inputValues, isDisabled, nameOverride, onBlur, onChange, onClear, onFocus, placeholder, ref, tabIndex, testId, translate]);
+  }), [autoCompleteType, defaultValue, hasInitialFocus, inputValues, isDisabled, nameOverride, onBlur, onChange, onClear, onFocus, placeholder, ref, tabIndex, testId, translate, variant]);
   return _jsx(Field, {
     ariaDescribedBy: ariaDescribedBy,
     fieldType: "single",

package/dist/SearchField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchField.js","names":["forwardRef","memo","useCallback","useRef","CloseCircleFilledIcon","SearchIcon","Field","getControlState","useInputValues","jsx","_jsx","SearchField","ariaDescribedBy","autoCompleteType","defaultValue","hasInitialFocus","id","idOverride","isDisabled","isFullWidth","label","name","nameOverride","onChange","onChangeProp","onFocus","onBlur","onClear","onClearProp","placeholder","tabIndex","testId","translate","value","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\";\n\nimport { CloseCircleFilledIcon, SearchIcon } from \"./icons.generated\";\nimport { Field } from \"./Field\";\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport type { HtmlProps } from \"./HtmlProps\";\nimport { getControlState, useInputValues } from \"./inputUtils\";\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} & Pick<\n  FieldComponentProps,\n  \"ariaDescribedBy\" | \"id\" | \"isDisabled\" | \"name\" | \"isFullWidth\"\n> &\n  HtmlProps;\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    },\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 }) => (\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            defaultValue && (\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          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        defaultValue,\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      ]\n    );\n\n    return (\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    );\n  }\n);\n\nconst MemoizedSearchField = memo(SearchField);\nMemoizedSearchField.displayName = \"SearchField\";\n\nexport { MemoizedSearchField as SearchField };\n"],"mappings":"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"}
+{"version":3,"file":"SearchField.js","names":["forwardRef","memo","useCallback","useRef","CloseCircleFilledIcon","SearchIcon","Field","getControlState","useInputValues","jsx","_jsx","searchVariantValues","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\";\n\nimport { CloseCircleFilledIcon, SearchIcon } from \"./icons.generated\";\nimport { Field } from \"./Field\";\nimport {\n  FieldComponentProps,\n  FieldComponentRenderProps,\n} from \"./FieldComponentProps\";\nimport type { HtmlProps } from \"./HtmlProps\";\nimport { getControlState, useInputValues } from \"./inputUtils\";\n\nexport const searchVariantValues = [\"outline\", \"filled\"] as const;\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            defaultValue && (\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        defaultValue,\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      <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    );\n  },\n);\n\nconst MemoizedSearchField = memo(SearchField);\nMemoizedSearchField.displayName = \"SearchField\";\n\nexport { MemoizedSearchField as SearchField };\n"],"mappings":"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"}

package/dist/Select.js

@@ -3,8 +3,8 @@ import _MenuItem from "@mui/material/MenuItem";
 import _ListItemSecondaryAction from "@mui/material/ListItemSecondaryAction";
 import _Checkbox from "@mui/material/Checkbox";
 import _ListSubheader from "@mui/material/ListSubheader";
-import _Box from "@mui/material/Box";
 import _Chip from "@mui/material/Chip";
+import _Box from "@mui/material/Box";
 /*!
  * 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.")
@@ -19,11 +19,80 @@ import _Chip from "@mui/material/Chip";
 
 import { memo, useCallback, useEffect, useMemo, useRef, useState, useImperativeHandle } from "react";
 import { Field } from "./Field.js";
-import { CheckIcon } from "./icons.generated/index.js";
+import { CheckIcon, CloseCircleFilledIcon } from "./icons.generated/index.js";
 import { ComponentControlledState, useInputValues, getControlState } from "./inputUtils.js";
 import { normalizedKey } from "./useNormalizedKey.js";
+import styled from "@emotion/styled";
+import { useOdysseyDesignTokens } from "./OdysseyDesignTokensContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+const SelectContainer = styled.div`
+  position: relative;
+  width: 100%;
+  display: flex;
+`;
+const ChipsPositioningContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})`
+  display: flex;
+  align-items: center;
+  position: absolute;
+  top: ${({
+  odysseyDesignTokens
+}) => odysseyDesignTokens.Spacing0};
+  right: ${({
+  odysseyDesignTokens
+}) => odysseyDesignTokens.Spacing5};
+  bottom: ${({
+  odysseyDesignTokens
+}) => odysseyDesignTokens.Spacing0};
+  left: ${({
+  odysseyDesignTokens
+}) => odysseyDesignTokens.Spacing1};
+  margin-inline-start: ${({
+  odysseyDesignTokens
+}) => odysseyDesignTokens.BorderWidthMain};
+  opacity: 1;
+  pointer-events: none;
+`;
+const NonInteractiveIcon = styled(CloseCircleFilledIcon, {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})`
+  font-size: 1em;
+  margin-inline-start: ${({
+  odysseyDesignTokens
+}) => odysseyDesignTokens.Spacing2};
+  margin-inline-end: -${({
+  odysseyDesignTokens
+}) => odysseyDesignTokens.Spacing1};
+`;
+const ChipsInnerContainer = styled(_Box, {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isInteractive"
+})`
+  display: flex;
+  flex-wrap: wrap;
+  gap: ${({
+  odysseyDesignTokens
+}) => odysseyDesignTokens.Spacing1};
+  pointer-events: ${({
+  isInteractive
+}) => isInteractive ? "auto" : "none"};
+  opacity: ${({
+  isInteractive
+}) => isInteractive ? 1 : 0};
+`;
+const ChipsSpacer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})`
+  display: inline-block;
+  border-color: transparent;
+  border-style: solid none;
+  border-width: 1px;
+  height: ${({
+  odysseyDesignTokens
+}) => odysseyDesignTokens.Spacing6};
+`;
 const {
   CONTROLLED
 } = ComponentControlledState;
@@ -58,6 +127,7 @@ const Select = ({
   }));
   const [internalSelectedValues, setInternalSelectedValues] = useState(controlledStateRef.current === CONTROLLED ? value : defaultValue);
   const localInputRef = useRef(null);
+  const odysseyDesignTokens = useOdysseyDesignTokens();
   useImperativeHandle(inputRef, () => {
     return {
       focus: () => {
@@ -101,67 +171,97 @@ const Select = ({
       type: "option"
     };
   }), [options]);
-  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;
+  const Chips = useCallback(({
+    selection,
+    isInteractive
+  }) => {
+    const removeSelection = itemToRemove => {
+      if (Array.isArray(internalSelectedValues)) {
+        const newValue = internalSelectedValues.filter(item => item !== itemToRemove);
+        const syntheticEvent = {
+          target: {
+            value: newValue
+          }
+        };
+        onChange(syntheticEvent, null);
       }
-      return _jsx(_Chip, {
-        label: selectedOption.text
-      }, item);
-    }).filter(Boolean);
-    if (renderedChips.length === 0) {
-      return null;
-    }
-    return _jsx(_Box, {
-      children: renderedChips
+    };
+    const stopPropagation = event => event.stopPropagation();
+    return _jsxs(ChipsInnerContainer, {
+      isInteractive: isInteractive,
+      odysseyDesignTokens: odysseyDesignTokens,
+      children: [_jsx(ChipsSpacer, {
+        odysseyDesignTokens: odysseyDesignTokens
+      }), selection.map(item => item?.length > 0 && _jsx(_Chip, {
+        label: _jsxs(_Fragment, {
+          children: [item, !isInteractive && controlledStateRef.current === CONTROLLED && hasMultipleChoices && _jsx(NonInteractiveIcon, {
+            odysseyDesignTokens: odysseyDesignTokens
+          })]
+        }),
+        tabIndex: -1,
+        onDelete: isInteractive && controlledStateRef.current === CONTROLLED ? () => removeSelection(item) : undefined,
+        deleteIcon: _jsx(CloseCircleFilledIcon, {
+          sx: {
+            pointerEvents: "auto"
+          },
+          onMouseDown: stopPropagation
+        })
+      }, item))]
     });
-  }, [normalizedOptions]);
+  }, [controlledStateRef, hasMultipleChoices, internalSelectedValues, odysseyDesignTokens, onChange]);
   const children = useMemo(() => normalizedOptions.map((option, index) => {
     if (option.type === "heading") {
-      return _jsx(_ListSubheader, {
-        children: option.text
+      return _jsxs(_ListSubheader, {
+        children: [" ", option.text, " "]
       }, option.text);
     }
+    const isSelected = hasMultipleChoices ? internalSelectedValues?.includes(option.value) : internalSelectedValues === option.value;
     return _jsxs(_MenuItem, {
       value: option.value,
+      selected: isSelected,
       children: [hasMultipleChoices && _jsx(_Checkbox, {
-        checked: option.value !== undefined && internalSelectedValues?.includes(option.value)
+        checked: isSelected
       }), option.text, !hasMultipleChoices && (internalSelectedValues?.includes(option.value) || internalSelectedValues === option.value) && _jsx(_ListItemSecondaryAction, {
         children: _jsx(CheckIcon, {})
       })]
     }, normalizedKey(option.text, index.toString()));
   }), [hasMultipleChoices, normalizedOptions, internalSelectedValues]);
+  const renderValue = useCallback(value => Array.isArray(value) && _jsx(Chips, {
+    selection: value,
+    isInteractive: false
+  }), [Chips]);
   const renderFieldComponent = useCallback(({
     ariaDescribedBy,
     errorMessageElementId,
     id,
     labelElementId
-  }) => _jsx(_Select, {
-    ...inputValues,
-    "aria-describedby": ariaDescribedBy,
-    "aria-errormessage": errorMessageElementId,
-    children: children,
-    "data-se": testId,
-    displayEmpty: inputValues?.value === "" || inputValues?.defaultValue === "",
-    id: id,
-    inputProps: {
-      "data-se": testId
-    },
-    inputRef: localInputRef,
-    labelId: labelElementId,
-    multiple: hasMultipleChoices,
-    name: nameOverride ?? id,
-    onBlur: onBlur,
-    onChange: onChange,
-    onFocus: onFocus,
-    renderValue: hasMultipleChoices ? renderValue : undefined,
-    translate: translate
-  }), [children, inputValues, hasMultipleChoices, nameOverride, onBlur, onChange, onFocus, renderValue, testId, translate]);
+  }) => _jsxs(SelectContainer, {
+    children: [_jsx(_Select, {
+      ...inputValues,
+      "aria-describedby": ariaDescribedBy,
+      "aria-errormessage": errorMessageElementId,
+      children: children,
+      id: id,
+      inputProps: {
+        "data-se": testId
+      },
+      inputRef: localInputRef,
+      labelId: labelElementId,
+      multiple: hasMultipleChoices,
+      name: nameOverride ?? id,
+      onBlur: onBlur,
+      onChange: onChange,
+      onFocus: onFocus,
+      renderValue: hasMultipleChoices ? renderValue : undefined,
+      translate: translate
+    }), hasMultipleChoices && Array.isArray(value) && _jsx(ChipsPositioningContainer, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      children: _jsx(Chips, {
+        selection: value,
+        isInteractive: true
+      })
+    })]
+  }), [children, Chips, inputValues, hasMultipleChoices, nameOverride, odysseyDesignTokens, onBlur, onChange, onFocus, renderValue, testId, translate, value]);
   return _jsx(Field, {
     ariaDescribedBy: ariaDescribedBy,
     errorMessage: errorMessage,