@okta/odyssey-react-mui 0.24.0 → 1.0.0

package/CHANGELOG.md

@@ -3,6 +3,42 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.0](https://github.com/okta/odyssey/compare/v0.24.0...v1.0.0) (2023-07-31)
+
+### Features
+
+- add `isDisabled` in context from Fieldset to Field ([#1911](https://github.com/okta/odyssey/issues/1911)) ([135dbbb](https://github.com/okta/odyssey/commit/135dbbb6bf98514deb164713b84ea23b5a4296d1))
+- add Button types ([#1903](https://github.com/okta/odyssey/issues/1903)) ([5b78259](https://github.com/okta/odyssey/commit/5b78259045eb36e50a2a24f387c6b213471bbcac))
+- adds ScopedCssBaseline to OdysseyThemeProvider ([#1904](https://github.com/okta/odyssey/issues/1904)) ([bbb734d](https://github.com/okta/odyssey/commit/bbb734d6c17a9831502cd6d4fd620d5cf1066a34))
+- **odyssey-react-mui:** add icon support to Tag ([6d1adc4](https://github.com/okta/odyssey/commit/6d1adc4422609b9623a320fa6bb4dcafa088f13d))
+- **odyssey-react-mui:** add sub2 type style ([0d7b2a0](https://github.com/okta/odyssey/commit/0d7b2a082c6a89c3395c84708b2e9de2796817f5))
+- **odyssey-react-mui:** add transparency and blur to Toast ([497ed8c](https://github.com/okta/odyssey/commit/497ed8c00dc45214a0455623aed89610b40562d2))
+- **odyssey-react-mui:** generate new and updated icon components ([a5aa7ab](https://github.com/okta/odyssey/commit/a5aa7ab62b0ac3b50163b98730b5eb9fe23ac791))
+- **odyssey-react-mui:** include color properties in type styles ([a817ffb](https://github.com/okta/odyssey/commit/a817ffb56f8c960840b342cde701247a1f2fcbc4))
+- **odyssey-react-mui:** manually update icon index, update references in styling ([6ed2aab](https://github.com/okta/odyssey/commit/6ed2aabf9635f0c5dd31b626bdf55bf6e6c46fd9))
+- **odyssey-react-mui:** update Button to match Rebrand ([d017b46](https://github.com/okta/odyssey/commit/d017b467b56999d62c35c9681c6829faa96eb487))
+- **odyssey-react-mui:** update Dialog to match Rebrand ([2894c1d](https://github.com/okta/odyssey/commit/2894c1d6854be19721a9830062f27c73e93242b2))
+- **odyssey-react-mui:** update Link to match new brand standards ([5afc6ed](https://github.com/okta/odyssey/commit/5afc6ed73e81c13d1feeede8e686eee42dee37c8))
+- **odyssey-react-mui:** update Status styles and variants to match brand ([2da6aa6](https://github.com/okta/odyssey/commit/2da6aa69c65f79f84c19a6a360a31ad17666749d))
+- **odyssey-react-mui:** updated ScopedCSSBaseline for rebrand ([e9e2514](https://github.com/okta/odyssey/commit/e9e2514cf8cefeaefe0afe9cbfc0d65f8f09e947))
+- remove Icon component ([#1864](https://github.com/okta/odyssey/issues/1864)) ([b897485](https://github.com/okta/odyssey/commit/b897485c5e7bfedae2770b0329b9ce6d7c974e69))
+
+### Bug Fixes
+
+- add play test for dialog, menubutton, select, tag, passwordfield ([#1861](https://github.com/okta/odyssey/issues/1861)) ([2957e6a](https://github.com/okta/odyssey/commit/2957e6ab7685301dd0713556129c3fd7a44451ae))
+- Button's `tooltipText` needs to show on hover ([#1817](https://github.com/okta/odyssey/issues/1817)) ([0ca21ff](https://github.com/okta/odyssey/commit/0ca21ff190a35ecaf05e1f1c9e71bd0757edee4d))
+- change to DesignTokens type rather than the overrides in theme ([#1816](https://github.com/okta/odyssey/issues/1816)) ([47c106b](https://github.com/okta/odyssey/commit/47c106bdeb2cdec597c58ba3b7ca9040091a10e4))
+- clicking MenuItem closes MenuButton ([#1820](https://github.com/okta/odyssey/issues/1820)) ([bde9d88](https://github.com/okta/odyssey/commit/bde9d880a87038949e2df22cf02e6380168bd3eb))
+- enable a11y tests in CI ([#1826](https://github.com/okta/odyssey/issues/1826)) ([cd98022](https://github.com/okta/odyssey/commit/cd9802265de5fc10a96a8ed28ce3f2e762c530cc))
+- memoize the Link component ([#1813](https://github.com/okta/odyssey/issues/1813)) ([a98dd87](https://github.com/okta/odyssey/commit/a98dd873a2a92a558202901e4aa456f9be4d0cae))
+- **odyssey-react-mui:** add aria-disabled to Tag ([f798e48](https://github.com/okta/odyssey/commit/f798e481b4f03eeb8834bb8e413b85f3aef18f03))
+- **odyssey-react-mui:** autocomplete is now RTL friendly ([e14265e](https://github.com/okta/odyssey/commit/e14265ea4eeee6cd4f108f032a8158272402f3b2))
+- **odyssey-react-mui:** lengthy field labels are no longer cut off ([6231951](https://github.com/okta/odyssey/commit/6231951d9d98a5815c48820b73505beeb6319659))
+- **odyssey-react-mui:** make Form, Infobox spacing constent across uses ([752461c](https://github.com/okta/odyssey/commit/752461c711235310e63cb96ff18c09ff3a1f7640))
+- orrectly import zh-CN and zh-TW files ([659d140](https://github.com/okta/odyssey/commit/659d14091476e3b4b3785f39254e80f4842453d7))
+- Upgrade many packages to fix vulns ([#1880](https://github.com/okta/odyssey/issues/1880)) ([6f617e2](https://github.com/okta/odyssey/commit/6f617e2efb5fc23be5ec47af7b88f3519ac59261))
+- use odyssey tokens inside mui components style override ([6863535](https://github.com/okta/odyssey/commit/68635351df8f17eb6401b94f43b9b7672eb9684e))
+
 ## [0.24.0](https://github.com/okta/odyssey/compare/v0.23.0...v0.24.0) (2023-05-25)
 
 ### Features

package/dist/Autocomplete.js

@@ -16,8 +16,8 @@ import { Field } from "./Field.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const Autocomplete = _ref => {
   let {
-    isCustomValueAllowed,
     hasMultipleChoices,
+    isCustomValueAllowed,
     isDisabled,
     isLoading,
     isReadOnly,
@@ -55,6 +55,7 @@ const Autocomplete = _ref => {
     });
   }, [hint, label]);
   return _jsx(_Autocomplete, {
+    "aria-disabled": isDisabled,
     disabled: isDisabled,
     freeSolo: isCustomValueAllowed,
     loading: isLoading,

package/dist/Autocomplete.js.map

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.js","names":["memo","useCallback","Field","jsx","_jsx","Autocomplete","_ref","isCustomValueAllowed","hasMultipleChoices","isDisabled","isLoading","isReadOnly","hint","label","onChange","onInputChange","options","value","renderInput","_ref2","InputLabelProps","InputProps","params","fieldType","hasVisibleLabel","id","htmlFor","renderFieldComponent","_ref3","ariaDescribedBy","_InputBase","_Autocomplete","disabled","freeSolo","loading","multiple","readOnly","MemoizedAutocomplete"],"sources":["../src/Autocomplete.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 {\n  Autocomplete as MuiAutocomplete,\n  AutocompleteProps as MuiAutocompleteProps,\n  InputBase,\n} from \"@mui/material\";\nimport { memo, useCallback } from \"react\";\n\nimport { Field } from \"./Field\";\n\nexport type AutocompleteProps<\n  OptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined\n> = {\n  hasMultipleChoices?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"multiple\"];\n  hint?: string;\n  isCustomValueAllowed?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"freeSolo\"];\n  isDisabled?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"disabled\"];\n  isLoading?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"loading\"];\n  isReadOnly?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"readOnly\"];\n  label: string;\n  onChange?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"onChange\"];\n  onInputChange?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"onInputChange\"];\n  options: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"options\"];\n  value?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"value\"];\n};\n\nconst Autocomplete = <\n  OptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined\n>({\n  isCustomValueAllowed,\n  hasMultipleChoices,\n  isDisabled,\n  isLoading,\n  isReadOnly,\n  hint,\n  label,\n  onChange,\n  onInputChange,\n  options,\n  value,\n}: AutocompleteProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>) => {\n  const renderInput = useCallback(\n    ({ InputLabelProps, InputProps, ...params }) => (\n      <Field\n        fieldType=\"single\"\n        hasVisibleLabel\n        id={InputLabelProps.htmlFor}\n        hint={hint}\n        label={label}\n        renderFieldComponent={({ ariaDescribedBy, id }) => (\n          <InputBase\n            {...params}\n            {...InputProps}\n            aria-describedby={ariaDescribedBy}\n            id={id}\n          />\n        )}\n      />\n    ),\n    [hint, label]\n  );\n\n  return (\n    <MuiAutocomplete\n      disabled={isDisabled}\n      freeSolo={isCustomValueAllowed}\n      loading={isLoading}\n      multiple={hasMultipleChoices}\n      onChange={onChange}\n      onInputChange={onInputChange}\n      options={options}\n      readOnly={isReadOnly}\n      renderInput={renderInput}\n      value={value}\n    />\n  );\n};\n\nconst MemoizedAutocomplete = memo(Autocomplete) as typeof Autocomplete;\n\nexport { MemoizedAutocomplete as Autocomplete };\n"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAOA,SAASA,IAAI,EAAEC,WAAW,QAAQ,OAAO;AAAC,SAEjCC,KAAK;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAiEd,MAAMC,YAAY,GAAGC,IAAA,IAgB0D;EAAA,IAZ7E;IACAC,oBAAoB;IACpBC,kBAAkB;IAClBC,UAAU;IACVC,SAAS;IACTC,UAAU;IACVC,IAAI;IACJC,KAAK;IACLC,QAAQ;IACRC,aAAa;IACbC,OAAO;IACPC;EACuE,CAAC,GAAAX,IAAA;EACxE,MAAMY,WAAW,GAAGjB,WAAW,CAC7BkB,KAAA;IAAA,IAAC;MAAEC,eAAe;MAAEC,UAAU;MAAE,GAAGC;IAAO,CAAC,GAAAH,KAAA;IAAA,OACzCf,IAAA,CAACF,KAAK;MACJqB,SAAS,EAAC,QAAQ;MAClBC,eAAe;MACfC,EAAE,EAAEL,eAAe,CAACM,OAAQ;MAC5Bd,IAAI,EAAEA,IAAK;MACXC,KAAK,EAAEA,KAAM;MACbc,oBAAoB,EAAEC,KAAA;QAAA,IAAC;UAAEC,eAAe;UAAEJ;QAAG,CAAC,GAAAG,KAAA;QAAA,OAC5CxB,IAAA,CAAA0B,UAAA;UAAA,GACMR,MAAM;UAAA,GACND,UAAU;UACd,oBAAkBQ,eAAgB;UAClCJ,EAAE,EAAEA;QAAG,CACR,CAAC;MAAA;IACF,CACH,CAAC;EAAA,CACH,EACD,CAACb,IAAI,EAAEC,KAAK,CACd,CAAC;EAED,OACET,IAAA,CAAA2B,aAAA;IACEC,QAAQ,EAAEvB,UAAW;IACrBwB,QAAQ,EAAE1B,oBAAqB;IAC/B2B,OAAO,EAAExB,SAAU;IACnByB,QAAQ,EAAE3B,kBAAmB;IAC7BM,QAAQ,EAAEA,QAAS;IACnBC,aAAa,EAAEA,aAAc;IAC7BC,OAAO,EAAEA,OAAQ;IACjBoB,QAAQ,EAAEzB,UAAW;IACrBO,WAAW,EAAEA,WAAY;IACzBD,KAAK,EAAEA;EAAM,CACd,CAAC;AAEN,CAAC;AAED,MAAMoB,oBAAoB,GAAGrC,IAAI,CAACK,YAAY,CAAwB;AAEtE,SAASgC,oBAAoB,IAAIhC,YAAY"}
+{"version":3,"file":"Autocomplete.js","names":["memo","useCallback","Field","jsx","_jsx","Autocomplete","_ref","hasMultipleChoices","isCustomValueAllowed","isDisabled","isLoading","isReadOnly","hint","label","onChange","onInputChange","options","value","renderInput","_ref2","InputLabelProps","InputProps","params","fieldType","hasVisibleLabel","id","htmlFor","renderFieldComponent","_ref3","ariaDescribedBy","_InputBase","_Autocomplete","disabled","freeSolo","loading","multiple","readOnly","MemoizedAutocomplete"],"sources":["../src/Autocomplete.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 {\n  Autocomplete as MuiAutocomplete,\n  AutocompleteProps as MuiAutocompleteProps,\n  InputBase,\n} from \"@mui/material\";\nimport { memo, useCallback } from \"react\";\n\nimport { Field } from \"./Field\";\n\nexport type AutocompleteProps<\n  OptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined\n> = {\n  /**\n   * Enables multiple choice selection\n   */\n  hasMultipleChoices?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"multiple\"];\n  /**\n   * The hint text for the Autocomplete input\n   */\n  hint?: string;\n  /**\n   * Allows the input of custom values\n   */\n  isCustomValueAllowed?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"freeSolo\"];\n  /**\n   * Disables the Autocomplete input\n   */\n  isDisabled?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"disabled\"];\n  /**\n   * Displays a loading indicator\n   */\n  isLoading?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"loading\"];\n  /**\n   * Makes the Autocomplete input read-only\n   */\n  isReadOnly?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"readOnly\"];\n  /**\n   * The label text for the autocomplete input\n   */\n  label: string;\n  /**\n   * Callback fired when the value of the autocomplete input changes\n   */\n  onChange?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"onChange\"];\n  /**\n   * Callback fired when the input value of the autocomplete input changes\n   */\n  onInputChange?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"onInputChange\"];\n  /**\n   * The options for the Autocomplete input\n   */\n  options: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"options\"];\n  /**\n   * The value of the Autocomplete input\n   */\n  value?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"value\"];\n};\n\nconst Autocomplete = <\n  OptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined\n>({\n  hasMultipleChoices,\n  isCustomValueAllowed,\n  isDisabled,\n  isLoading,\n  isReadOnly,\n  hint,\n  label,\n  onChange,\n  onInputChange,\n  options,\n  value,\n}: AutocompleteProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>) => {\n  const renderInput = useCallback(\n    ({ InputLabelProps, InputProps, ...params }) => (\n      <Field\n        fieldType=\"single\"\n        hasVisibleLabel\n        id={InputLabelProps.htmlFor}\n        hint={hint}\n        label={label}\n        renderFieldComponent={({ ariaDescribedBy, id }) => (\n          <InputBase\n            {...params}\n            {...InputProps}\n            aria-describedby={ariaDescribedBy}\n            id={id}\n          />\n        )}\n      />\n    ),\n    [hint, label]\n  );\n\n  return (\n    <MuiAutocomplete\n      // AutoComplete is wrapped in a div within MUI which does not get the disabled attr. So this aria-disabled gets set in the div\n      aria-disabled={isDisabled}\n      disabled={isDisabled}\n      freeSolo={isCustomValueAllowed}\n      loading={isLoading}\n      multiple={hasMultipleChoices}\n      onChange={onChange}\n      onInputChange={onInputChange}\n      options={options}\n      readOnly={isReadOnly}\n      renderInput={renderInput}\n      value={value}\n    />\n  );\n};\n\nconst MemoizedAutocomplete = memo(Autocomplete) as typeof Autocomplete;\n\nexport { MemoizedAutocomplete as Autocomplete };\n"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAOA,SAASA,IAAI,EAAEC,WAAW,QAAQ,OAAO;AAAC,SAEjCC,KAAK;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAkGd,MAAMC,YAAY,GAAGC,IAAA,IAgB0D;EAAA,IAZ7E;IACAC,kBAAkB;IAClBC,oBAAoB;IACpBC,UAAU;IACVC,SAAS;IACTC,UAAU;IACVC,IAAI;IACJC,KAAK;IACLC,QAAQ;IACRC,aAAa;IACbC,OAAO;IACPC;EACuE,CAAC,GAAAX,IAAA;EACxE,MAAMY,WAAW,GAAGjB,WAAW,CAC7BkB,KAAA;IAAA,IAAC;MAAEC,eAAe;MAAEC,UAAU;MAAE,GAAGC;IAAO,CAAC,GAAAH,KAAA;IAAA,OACzCf,IAAA,CAACF,KAAK;MACJqB,SAAS,EAAC,QAAQ;MAClBC,eAAe;MACfC,EAAE,EAAEL,eAAe,CAACM,OAAQ;MAC5Bd,IAAI,EAAEA,IAAK;MACXC,KAAK,EAAEA,KAAM;MACbc,oBAAoB,EAAEC,KAAA;QAAA,IAAC;UAAEC,eAAe;UAAEJ;QAAG,CAAC,GAAAG,KAAA;QAAA,OAC5CxB,IAAA,CAAA0B,UAAA;UAAA,GACMR,MAAM;UAAA,GACND,UAAU;UACd,oBAAkBQ,eAAgB;UAClCJ,EAAE,EAAEA;QAAG,CACR,CAAC;MAAA;IACF,CACH,CAAC;EAAA,CACH,EACD,CAACb,IAAI,EAAEC,KAAK,CACd,CAAC;EAED,OACET,IAAA,CAAA2B,aAAA;IAEE,iBAAetB,UAAW;IAC1BuB,QAAQ,EAAEvB,UAAW;IACrBwB,QAAQ,EAAEzB,oBAAqB;IAC/B0B,OAAO,EAAExB,SAAU;IACnByB,QAAQ,EAAE5B,kBAAmB;IAC7BO,QAAQ,EAAEA,QAAS;IACnBC,aAAa,EAAEA,aAAc;IAC7BC,OAAO,EAAEA,OAAQ;IACjBoB,QAAQ,EAAEzB,UAAW;IACrBO,WAAW,EAAEA,WAAY;IACzBD,KAAK,EAAEA;EAAM,CACd,CAAC;AAEN,CAAC;AAED,MAAMoB,oBAAoB,GAAGrC,IAAI,CAACK,YAAY,CAAwB;AAEtE,SAASgC,oBAAoB,IAAIhC,YAAY"}

package/dist/Banner.js

@@ -1,3 +1,5 @@
+import _Alert from "@mui/material/Alert";
+import _AlertTitle from "@mui/material/AlertTitle";
 /*!
  * 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.")
@@ -9,12 +11,14 @@
  *
  * See the License for the specific language governing permissions and limitations under the License.
  */
-
+import { Link } from "./Link.js";
+import { ScreenReaderText } from "./ScreenReaderText.js";
 import { memo } from "react";
-import { Alert, Link, ScreenReaderText } from "./index.js";
 import { useTranslation } from "react-i18next";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
+export const bannerRoleValues = ["status", "alert"];
+export const bannerSeverityValues = ["success", "info", "warning", "error"];
 const Banner = _ref => {
   let {
     linkUrl,
@@ -27,14 +31,16 @@ const Banner = _ref => {
   const {
     t
   } = useTranslation();
-  return _jsxs(Alert, {
+  return _jsxs(_Alert, {
     onClose: onClose,
     role: role,
     severity: severity,
     variant: "banner",
     children: [_jsxs(ScreenReaderText, {
       children: [t(`severity.${severity}`), ":"]
-    }), text, linkUrl && _jsx(Link, {
+    }), _jsx(_AlertTitle, {
+      children: text
+    }), linkUrl && _jsx(Link, {
       href: linkUrl,
       variant: "monochrome",
       children: linkText
@@ -42,5 +48,6 @@ const Banner = _ref => {
   });
 };
 const MemoizedBanner = memo(Banner);
+MemoizedBanner.displayName = "Banner";
 export { MemoizedBanner as Banner };
 //# sourceMappingURL=Banner.js.map

package/dist/Banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.js","names":["memo","Alert","Link","ScreenReaderText","useTranslation","jsxs","_jsxs","jsx","_jsx","Banner","_ref","linkUrl","linkText","onClose","role","severity","text","t","variant","children","href","MemoizedBanner"],"sources":["../src/Banner.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 { AlertColor, AlertProps } from \"@mui/material\";\nimport { memo } from \"react\";\nimport { Alert, Link, ScreenReaderText } from \"./\";\nimport { useTranslation } from \"react-i18next\";\n\nexport type BannerProps = {\n  /**\n   * If linkUrl is not undefined, this is the text of the link.\n   * If left blank, it defaults to \"Learn more\".\n   * Note that linkText does nothing if linkUrl is not defined\n   */\n  linkText?: string;\n  /**\n   * If defined, the alert will include a link to the URL\n   */\n  linkUrl?: string;\n  /**\n   * The function that's fired when the user clicks the close button. If undefined,\n   * the close button will not be shown.\n   */\n  onClose?: AlertProps[\"onClose\"];\n  /**\n   * Sets the ARIA role of the alert\n   * (\"status\" for something that dynamically updates, \"alert\" for errors, null for something\n   * unchanging)\n   */\n  role?: \"status\" | \"alert\";\n  /**\n   * Determine the color and icon of the alert\n   */\n  severity: AlertColor;\n  /**\n   * The text content of the alert\n   */\n  text: string;\n};\n\nconst Banner = ({\n  linkUrl,\n  linkText,\n  onClose,\n  role,\n  severity,\n  text,\n}: BannerProps) => {\n  const { t } = useTranslation();\n\n  return (\n    <Alert onClose={onClose} role={role} severity={severity} variant=\"banner\">\n      <ScreenReaderText>{t(`severity.${severity}`)}:</ScreenReaderText>\n      {text}\n      {linkUrl && (\n        <Link href={linkUrl} variant=\"monochrome\">\n          {linkText}\n        </Link>\n      )}\n    </Alert>\n  );\n};\n\nconst MemoizedBanner = memo(Banner);\n\nexport { MemoizedBanner as Banner };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA,SAASA,IAAI,QAAQ,OAAO;AAAC,SACpBC,KAAK,EAAEC,IAAI,EAAEC,gBAAgB;AACtC,SAASC,cAAc,QAAQ,eAAe;AAAC,SAAAC,IAAA,IAAAC,KAAA;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAkC/C,MAAMC,MAAM,GAAGC,IAAA,IAOI;EAAA,IAPH;IACdC,OAAO;IACPC,QAAQ;IACRC,OAAO;IACPC,IAAI;IACJC,QAAQ;IACRC;EACW,CAAC,GAAAN,IAAA;EACZ,MAAM;IAAEO;EAAE,CAAC,GAAGb,cAAc,CAAC,CAAC;EAE9B,OACEE,KAAA,CAACL,KAAK;IAACY,OAAO,EAAEA,OAAQ;IAACC,IAAI,EAAEA,IAAK;IAACC,QAAQ,EAAEA,QAAS;IAACG,OAAO,EAAC,QAAQ;IAAAC,QAAA,GACvEb,KAAA,CAACH,gBAAgB;MAAAgB,QAAA,GAAEF,CAAC,CAAE,YAAWF,QAAS,EAAC,CAAC,EAAC,GAAC;IAAA,CAAkB,CAAC,EAChEC,IAAI,EACJL,OAAO,IACNH,IAAA,CAACN,IAAI;MAACkB,IAAI,EAAET,OAAQ;MAACO,OAAO,EAAC,YAAY;MAAAC,QAAA,EACtCP;IAAQ,CACL,CACP;EAAA,CACI,CAAC;AAEZ,CAAC;AAED,MAAMS,cAAc,GAAGrB,IAAI,CAACS,MAAM,CAAC;AAEnC,SAASY,cAAc,IAAIZ,MAAM"}
+{"version":3,"file":"Banner.js","names":["Link","ScreenReaderText","memo","useTranslation","jsxs","_jsxs","jsx","_jsx","bannerRoleValues","bannerSeverityValues","Banner","_ref","linkUrl","linkText","onClose","role","severity","text","t","_Alert","variant","children","_AlertTitle","href","MemoizedBanner","displayName"],"sources":["../src/Banner.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 { Alert, AlertColor, AlertTitle, AlertProps } from \"@mui/material\";\nimport { Link } from \"./Link\";\nimport { ScreenReaderText } from \"./ScreenReaderText\";\nimport { memo } from \"react\";\nimport { useTranslation } from \"react-i18next\";\n\nexport const bannerRoleValues = [\"status\", \"alert\"] as const;\nexport const bannerSeverityValues: AlertColor[] = [\n  \"success\",\n  \"info\",\n  \"warning\",\n  \"error\",\n];\n\nexport type BannerProps = {\n  /**\n   * If linkUrl is not undefined, this is the text of the link.\n   * If left blank, it defaults to \"Learn more\".\n   * Note that linkText does nothing if linkUrl is not defined\n   */\n  linkText?: string;\n  /**\n   * If defined, the alert will include a link to the URL\n   */\n  linkUrl?: string;\n  /**\n   * The function that's fired when the user clicks the close button. If undefined,\n   * the close button will not be shown.\n   */\n  onClose?: AlertProps[\"onClose\"];\n  /**\n   * Sets the ARIA role of the alert\n   * (\"status\" for something that dynamically updates, \"alert\" for errors, null for something\n   * unchanging)\n   */\n  role?: (typeof bannerRoleValues)[number];\n  /**\n   * Determine the color and icon of the alert\n   */\n  severity: (typeof bannerSeverityValues)[number];\n  /**\n   * The text content of the alert\n   */\n  text: string;\n};\n\nconst Banner = ({\n  linkUrl,\n  linkText,\n  onClose,\n  role,\n  severity,\n  text,\n}: BannerProps) => {\n  const { t } = useTranslation();\n\n  return (\n    <Alert onClose={onClose} role={role} severity={severity} variant=\"banner\">\n      <ScreenReaderText>{t(`severity.${severity}`)}:</ScreenReaderText>\n      <AlertTitle>{text}</AlertTitle>\n      {linkUrl && (\n        <Link href={linkUrl} variant=\"monochrome\">\n          {linkText}\n        </Link>\n      )}\n    </Alert>\n  );\n};\n\nconst MemoizedBanner = memo(Banner);\nMemoizedBanner.displayName = \"Banner\";\n\nexport { MemoizedBanner as Banner };\n"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAVA,SAaSA,IAAI;AAAA,SACJC,gBAAgB;AACzB,SAASC,IAAI,QAAQ,OAAO;AAC5B,SAASC,cAAc,QAAQ,eAAe;AAAC,SAAAC,IAAA,IAAAC,KAAA;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAE/C,OAAO,MAAMC,gBAAgB,GAAG,CAAC,QAAQ,EAAE,OAAO,CAAU;AAC5D,OAAO,MAAMC,oBAAkC,GAAG,CAChD,SAAS,EACT,MAAM,EACN,SAAS,EACT,OAAO,CACR;AAkCD,MAAMC,MAAM,GAAGC,IAAA,IAOI;EAAA,IAPH;IACdC,OAAO;IACPC,QAAQ;IACRC,OAAO;IACPC,IAAI;IACJC,QAAQ;IACRC;EACW,CAAC,GAAAN,IAAA;EACZ,MAAM;IAAEO;EAAE,CAAC,GAAGf,cAAc,CAAC,CAAC;EAE9B,OACEE,KAAA,CAAAc,MAAA;IAAOL,OAAO,EAAEA,OAAQ;IAACC,IAAI,EAAEA,IAAK;IAACC,QAAQ,EAAEA,QAAS;IAACI,OAAO,EAAC,QAAQ;IAAAC,QAAA,GACvEhB,KAAA,CAACJ,gBAAgB;MAAAoB,QAAA,GAAEH,CAAC,CAAE,YAAWF,QAAS,EAAC,CAAC,EAAC,GAAC;IAAA,CAAkB,CAAC,EACjET,IAAA,CAAAe,WAAA;MAAAD,QAAA,EAAaJ;IAAI,CAAa,CAAC,EAC9BL,OAAO,IACNL,IAAA,CAACP,IAAI;MAACuB,IAAI,EAAEX,OAAQ;MAACQ,OAAO,EAAC,YAAY;MAAAC,QAAA,EACtCR;IAAQ,CACL,CACP;EAAA,CACI,CAAC;AAEZ,CAAC;AAED,MAAMW,cAAc,GAAGtB,IAAI,CAACQ,MAAM,CAAC;AACnCc,cAAc,CAACC,WAAW,GAAG,QAAQ;AAErC,SAASD,cAAc,IAAId,MAAM"}

package/dist/{src/theme/OdysseyTheme.d.ts → Box.js}

@@ -1,3 +1,4 @@
+import _Box from "@mui/material/Box";
 /*!
  * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
  * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
@@ -9,15 +10,20 @@
  *
  * See the License for the specific language governing permissions and limitations under the License.
  */
-import { Theme } from "@mui/material/styles";
-import { Temp } from "./temp";
-declare module "@mui/material/styles" {
-    interface ThemeOptions {
-        temp?: Temp;
-    }
-}
-export interface OdysseyTheme extends Theme {
-    /** @deprecated `temp` is only for testing. It will be removed in a future version of Odyssey. */
-    temp?: Temp;
-}
-//# sourceMappingURL=OdysseyTheme.d.ts.map
+import { forwardRef } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Box = forwardRef((_ref, ref) => {
+  let {
+    children,
+    component,
+    sx
+  } = _ref;
+  return _jsx(_Box, {
+    ref: ref,
+    children: children,
+    component: component,
+    sx: sx
+  });
+});
+Box.displayName = "Box";
+//# sourceMappingURL=Box.js.map

package/dist/Box.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Box.js","names":["forwardRef","jsx","_jsx","Box","_ref","ref","children","component","sx","_Box","displayName"],"sources":["../src/Box.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 { Box as MuiBox, BoxProps as MuiBoxProps } from \"@mui/material\";\nimport { ReactNode, forwardRef } from \"react\";\n\nexport type BoxProps = {\n  children?: ReactNode;\n  component?: MuiBoxProps[\"component\"];\n  sx?: MuiBoxProps[\"sx\"];\n};\n\nexport const Box = forwardRef<HTMLElement, BoxProps>(\n  ({ children, component, sx }, ref) => (\n    <MuiBox ref={ref} children={children} component={component} sx={sx} />\n  )\n);\n\nBox.displayName = \"Box\";\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,SAAoBA,UAAU,QAAQ,OAAO;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAQ9C,OAAO,MAAMC,GAAG,GAAGH,UAAU,CAC3B,CAAAI,IAAA,EAA8BC,GAAG;EAAA,IAAhC;IAAEC,QAAQ;IAAEC,SAAS;IAAEC;EAAG,CAAC,GAAAJ,IAAA;EAAA,OAC1BF,IAAA,CAAAO,IAAA;IAAQJ,GAAG,EAAEA,GAAI;IAACC,QAAQ,EAAEA,QAAS;IAACC,SAAS,EAAEA,SAAU;IAACC,EAAE,EAAEA;EAAG,CAAE,CAAC;AAAA,CAE1E,CAAC;AAEDL,GAAG,CAACO,WAAW,GAAG,KAAK"}

package/dist/Button.js

@@ -10,28 +10,38 @@ import _Button from "@mui/material/Button";
  *
  * See the License for the specific language governing permissions and limitations under the License.
  */
-import { memo, useContext, useMemo } from "react";
-import { MuiPropsContext } from "./MuiPropsContext.js";
+import { memo, useCallback } from "react";
+import { MuiPropsContext, useMuiProps } from "./MuiPropsContext.js";
 import { Tooltip } from "./Tooltip.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";
+export const buttonSizeValues = ["small", "medium", "large"];
+export const buttonTypeValues = ["button", "submit", "reset"];
+export const buttonVariantValues = ["primary", "secondary", "tertiary", "danger", "floating"];
 const Button = _ref => {
   let {
+    ariaDescribedBy,
+    ariaLabel,
+    ariaLabelledBy,
     endIcon,
     id,
     isDisabled,
     isFullWidth,
+    label = "",
     onClick,
     size = "medium",
     startIcon,
-    text,
     tooltipText,
+    type = "button",
     variant
   } = _ref;
-  const muiProps = useContext(MuiPropsContext);
-  const button = useMemo(() => _jsx(_Button, {
+  const muiProps = useMuiProps();
+  const renderButton = useCallback(muiProps => _jsx(_Button, {
     ...muiProps,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy,
     disabled: isDisabled,
     endIcon: endIcon,
     fullWidth: isFullWidth,
@@ -39,18 +49,22 @@ const Button = _ref => {
     onClick: onClick,
     size: size,
     startIcon: startIcon,
+    type: type,
     variant: variant,
-    children: text
-  }), [endIcon, id, isDisabled, isFullWidth, muiProps, onClick, size, startIcon, text, variant]);
+    children: label
+  }), [ariaDescribedBy, ariaLabel, ariaLabelledBy, endIcon, id, isDisabled, isFullWidth, label, onClick, size, startIcon, type, variant]);
   return _jsxs(_Fragment, {
     children: [tooltipText && _jsx(Tooltip, {
       ariaType: "description",
       placement: "top",
       text: tooltipText,
-      children: button
-    }), !tooltipText && button]
+      children: _jsx(MuiPropsContext.Consumer, {
+        children: renderButton
+      })
+    }), !tooltipText && renderButton(muiProps)]
   });
 };
 const MemoizedButton = memo(Button);
+MemoizedButton.displayName = "Button";
 export { MemoizedButton as Button };
 //# sourceMappingURL=Button.js.map

package/dist/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":["memo","useContext","useMemo","MuiPropsContext","Tooltip","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","Button","_ref","endIcon","id","isDisabled","isFullWidth","onClick","size","startIcon","text","tooltipText","variant","muiProps","button","_Button","disabled","fullWidth","children","ariaType","placement","MemoizedButton"],"sources":["../src/Button.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 { Button as MuiButton } from \"@mui/material\";\nimport type { ButtonProps as MuiButtonProps } from \"@mui/material\";\nimport { memo, ReactElement, useContext, useMemo } from \"react\";\n\nimport { Icon } from \"./Icon\";\nimport { MuiPropsContext } from \"./MuiPropsContext\";\nimport { Tooltip } from \"./Tooltip\";\n\nexport type ButtonProps = {\n  endIcon?: ReactElement<typeof Icon>;\n  id?: string;\n  isDisabled?: boolean;\n  isFullWidth?: boolean;\n  onClick?: MuiButtonProps[\"onClick\"];\n  size?: MuiButtonProps[\"size\"];\n  startIcon?: ReactElement<typeof Icon>;\n  text?: string;\n  /**\n   * `tooltipText` determines the text of the tooltip that wraps the button if it's icon-only.\n   */\n  tooltipText?: string;\n  variant?: \"primary\" | \"secondary\" | \"danger\" | \"floating\";\n};\n\nconst Button = ({\n  endIcon,\n  id,\n  isDisabled,\n  isFullWidth,\n  onClick,\n  size = \"medium\",\n  startIcon,\n  text,\n  tooltipText,\n  variant,\n}: ButtonProps) => {\n  const muiProps = useContext(MuiPropsContext);\n\n  const button = useMemo(\n    () => (\n      <MuiButton\n        {...muiProps}\n        disabled={isDisabled}\n        endIcon={endIcon}\n        fullWidth={isFullWidth}\n        id={id}\n        onClick={onClick}\n        size={size}\n        startIcon={startIcon}\n        variant={variant}\n      >\n        {text}\n      </MuiButton>\n    ),\n    [\n      endIcon,\n      id,\n      isDisabled,\n      isFullWidth,\n      muiProps,\n      onClick,\n      size,\n      startIcon,\n      text,\n      variant,\n    ]\n  );\n\n  return (\n    <>\n      {tooltipText && (\n        <Tooltip ariaType=\"description\" placement=\"top\" text={tooltipText}>\n          {button}\n        </Tooltip>\n      )}\n      {!tooltipText && button}\n    </>\n  );\n};\n\nconst MemoizedButton = memo(Button);\n\nexport { MemoizedButton as Button };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAIA,SAASA,IAAI,EAAgBC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAAC,SAGvDC,eAAe;AAAA,SACfC,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,QAAA,IAAAC,SAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAkBhB,MAAMC,MAAM,GAAGC,IAAA,IAWI;EAAA,IAXH;IACdC,OAAO;IACPC,EAAE;IACFC,UAAU;IACVC,WAAW;IACXC,OAAO;IACPC,IAAI,GAAG,QAAQ;IACfC,SAAS;IACTC,IAAI;IACJC,WAAW;IACXC;EACW,CAAC,GAAAV,IAAA;EACZ,MAAMW,QAAQ,GAAGtB,UAAU,CAACE,eAAe,CAAC;EAE5C,MAAMqB,MAAM,GAAGtB,OAAO,CACpB,MACEI,IAAA,CAAAmB,OAAA;IAAA,GACMF,QAAQ;IACZG,QAAQ,EAAEX,UAAW;IACrBF,OAAO,EAAEA,OAAQ;IACjBc,SAAS,EAAEX,WAAY;IACvBF,EAAE,EAAEA,EAAG;IACPG,OAAO,EAAEA,OAAQ;IACjBC,IAAI,EAAEA,IAAK;IACXC,SAAS,EAAEA,SAAU;IACrBG,OAAO,EAAEA,OAAQ;IAAAM,QAAA,EAEhBR;EAAI,CACI,CACZ,EACD,CACEP,OAAO,EACPC,EAAE,EACFC,UAAU,EACVC,WAAW,EACXO,QAAQ,EACRN,OAAO,EACPC,IAAI,EACJC,SAAS,EACTC,IAAI,EACJE,OAAO,CAEX,CAAC;EAED,OACEZ,KAAA,CAAAF,SAAA;IAAAoB,QAAA,GACGP,WAAW,IACVf,IAAA,CAACF,OAAO;MAACyB,QAAQ,EAAC,aAAa;MAACC,SAAS,EAAC,KAAK;MAACV,IAAI,EAAEC,WAAY;MAAAO,QAAA,EAC/DJ;IAAM,CACA,CACV,EACA,CAACH,WAAW,IAAIG,MAAM;EAAA,CACvB,CAAC;AAEP,CAAC;AAED,MAAMO,cAAc,GAAG/B,IAAI,CAACW,MAAM,CAAC;AAEnC,SAASoB,cAAc,IAAIpB,MAAM"}
+{"version":3,"file":"Button.js","names":["memo","useCallback","MuiPropsContext","useMuiProps","Tooltip","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","buttonSizeValues","buttonTypeValues","buttonVariantValues","Button","_ref","ariaDescribedBy","ariaLabel","ariaLabelledBy","endIcon","id","isDisabled","isFullWidth","label","onClick","size","startIcon","tooltipText","type","variant","muiProps","renderButton","_Button","disabled","fullWidth","children","ariaType","placement","text","Consumer","MemoizedButton","displayName"],"sources":["../src/Button.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 { Button as MuiButton } from \"@mui/material\";\nimport type { ButtonProps as MuiButtonProps } from \"@mui/material\";\nimport { memo, ReactElement, useCallback } from \"react\";\n\nimport { MuiPropsContext, useMuiProps } from \"./MuiPropsContext\";\nimport { Tooltip } from \"./Tooltip\";\n\nexport const buttonSizeValues = [\"small\", \"medium\", \"large\"] as const;\nexport const buttonTypeValues = [\"button\", \"submit\", \"reset\"] as const;\nexport const buttonVariantValues = [\n  \"primary\",\n  \"secondary\",\n  \"tertiary\",\n  \"danger\",\n  \"floating\",\n] as const;\n\nexport type ButtonProps = {\n  /**\n   * The ARIA label for the Button\n   */\n  ariaLabel?: string;\n  /**\n   * The ID of the element that labels the Button\n   */\n  ariaLabelledBy?: string;\n  /**\n   * The ID of the element that describes the Button\n   */\n  ariaDescribedBy?: string;\n  /**\n   * The icon element to display at the end of the Button\n   */\n  endIcon?: ReactElement;\n  /**\n   * The ID of the Button\n   */\n  id?: string;\n  /**\n   * Determines whether the Button is disabled\n   */\n  isDisabled?: boolean;\n  /**\n   * Determines whether the Button should take up the full available width\n   */\n  isFullWidth?: boolean;\n  /**\n   * The text content of the Button\n   */\n  label?: string;\n  /**\n   * The click event handler for the Button\n   */\n  onClick?: MuiButtonProps[\"onClick\"];\n  /**\n   * The size of the button\n   */\n  size?: (typeof buttonSizeValues)[number];\n  /**\n   * The icon element to display at the start of the Button\n   */\n  startIcon?: ReactElement;\n  /**\n   * The tooltip text for the Button if it's icon-only\n   */\n  tooltipText?: string;\n  /**\n   * The type of the HTML button element\n   */\n  type?: (typeof buttonTypeValues)[number];\n  /**\n   * The variant of the Button\n   */\n  variant: (typeof buttonVariantValues)[number];\n} & (\n  | {\n      endIcon?: ReactElement;\n      label: string;\n      startIcon?: ReactElement;\n    }\n  | {\n      endIcon?: ReactElement;\n      label?: \"\" | undefined;\n      startIcon: ReactElement;\n    }\n  | {\n      endIcon: ReactElement;\n      label?: \"\" | undefined;\n      startIcon?: ReactElement;\n    }\n);\n\nconst Button = ({\n  ariaDescribedBy,\n  ariaLabel,\n  ariaLabelledBy,\n  endIcon,\n  id,\n  isDisabled,\n  isFullWidth,\n  label = \"\",\n  onClick,\n  size = \"medium\",\n  startIcon,\n  tooltipText,\n  type = \"button\",\n  variant,\n}: ButtonProps) => {\n  const muiProps = useMuiProps();\n\n  const renderButton = useCallback(\n    (muiProps) => (\n      <MuiButton\n        {...muiProps}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={ariaDescribedBy}\n        disabled={isDisabled}\n        endIcon={endIcon}\n        fullWidth={isFullWidth}\n        id={id}\n        onClick={onClick}\n        size={size}\n        startIcon={startIcon}\n        type={type}\n        variant={variant}\n      >\n        {label}\n      </MuiButton>\n    ),\n    [\n      ariaDescribedBy,\n      ariaLabel,\n      ariaLabelledBy,\n      endIcon,\n      id,\n      isDisabled,\n      isFullWidth,\n      label,\n      onClick,\n      size,\n      startIcon,\n      type,\n      variant,\n    ]\n  );\n\n  return (\n    <>\n      {tooltipText && (\n        <Tooltip ariaType=\"description\" placement=\"top\" text={tooltipText}>\n          <MuiPropsContext.Consumer>{renderButton}</MuiPropsContext.Consumer>\n        </Tooltip>\n      )}\n\n      {!tooltipText && renderButton(muiProps)}\n    </>\n  );\n};\n\nconst MemoizedButton = memo(Button);\nMemoizedButton.displayName = \"Button\";\n\nexport { MemoizedButton as Button };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAIA,SAASA,IAAI,EAAgBC,WAAW,QAAQ,OAAO;AAAC,SAE/CC,eAAe,EAAEC,WAAW;AAAA,SAC5BC,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,QAAA,IAAAC,SAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAEhB,OAAO,MAAMC,gBAAgB,GAAG,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAU;AACrE,OAAO,MAAMC,gBAAgB,GAAG,CAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,CAAU;AACtE,OAAO,MAAMC,mBAAmB,GAAG,CACjC,SAAS,EACT,WAAW,EACX,UAAU,EACV,QAAQ,EACR,UAAU,CACF;AA6EV,MAAMC,MAAM,GAAGC,IAAA,IAeI;EAAA,IAfH;IACdC,eAAe;IACfC,SAAS;IACTC,cAAc;IACdC,OAAO;IACPC,EAAE;IACFC,UAAU;IACVC,WAAW;IACXC,KAAK,GAAG,EAAE;IACVC,OAAO;IACPC,IAAI,GAAG,QAAQ;IACfC,SAAS;IACTC,WAAW;IACXC,IAAI,GAAG,QAAQ;IACfC;EACW,CAAC,GAAAd,IAAA;EACZ,MAAMe,QAAQ,GAAG3B,WAAW,CAAC,CAAC;EAE9B,MAAM4B,YAAY,GAAG9B,WAAW,CAC7B6B,QAAQ,IACPxB,IAAA,CAAA0B,OAAA;IAAA,GACMF,QAAQ;IACZ,cAAYb,SAAU;IACtB,mBAAiBC,cAAe;IAChC,oBAAkBF,eAAgB;IAClCiB,QAAQ,EAAEZ,UAAW;IACrBF,OAAO,EAAEA,OAAQ;IACjBe,SAAS,EAAEZ,WAAY;IACvBF,EAAE,EAAEA,EAAG;IACPI,OAAO,EAAEA,OAAQ;IACjBC,IAAI,EAAEA,IAAK;IACXC,SAAS,EAAEA,SAAU;IACrBE,IAAI,EAAEA,IAAK;IACXC,OAAO,EAAEA,OAAQ;IAAAM,QAAA,EAEhBZ;EAAK,CACG,CACZ,EACD,CACEP,eAAe,EACfC,SAAS,EACTC,cAAc,EACdC,OAAO,EACPC,EAAE,EACFC,UAAU,EACVC,WAAW,EACXC,KAAK,EACLC,OAAO,EACPC,IAAI,EACJC,SAAS,EACTE,IAAI,EACJC,OAAO,CAEX,CAAC;EAED,OACEnB,KAAA,CAAAF,SAAA;IAAA2B,QAAA,GACGR,WAAW,IACVrB,IAAA,CAACF,OAAO;MAACgC,QAAQ,EAAC,aAAa;MAACC,SAAS,EAAC,KAAK;MAACC,IAAI,EAAEX,WAAY;MAAAQ,QAAA,EAChE7B,IAAA,CAACJ,eAAe,CAACqC,QAAQ;QAAAJ,QAAA,EAAEJ;MAAY,CAA2B;IAAC,CAC5D,CACV,EAEA,CAACJ,WAAW,IAAII,YAAY,CAACD,QAAQ,CAAC;EAAA,CACvC,CAAC;AAEP,CAAC;AAED,MAAMU,cAAc,GAAGxC,IAAI,CAACc,MAAM,CAAC;AACnC0B,cAAc,CAACC,WAAW,GAAG,QAAQ;AAErC,SAASD,cAAc,IAAI1B,MAAM"}

package/dist/{Infobox.js → Callout.js}

@@ -1,3 +1,6 @@
+import _Alert from "@mui/material/Alert";
+import _Box from "@mui/material/Box";
+import _AlertTitle from "@mui/material/AlertTitle";
 /*!
  * 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.")
@@ -11,11 +14,13 @@
  */
 
 import { memo } from "react";
-import { Alert, AlertTitle, ScreenReaderText } from "./index.js";
+import { ScreenReaderText } from "./ScreenReaderText.js";
 import { useTranslation } from "react-i18next";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
-const Infobox = _ref => {
+export const calloutRoleValues = ["status", "alert"];
+export const calloutSeverityValues = ["success", "info", "warning", "error"];
+const Callout = _ref => {
   let {
     children,
     role,
@@ -25,17 +30,21 @@ const Infobox = _ref => {
   const {
     t
   } = useTranslation();
-  return _jsxs(Alert, {
+  return _jsxs(_Alert, {
     role: role,
     severity: severity,
-    variant: "infobox",
+    variant: "callout",
     children: [_jsxs(ScreenReaderText, {
       children: [t(`severity.${severity}`), ": "]
-    }), title && _jsx(AlertTitle, {
+    }), title && _jsx(_AlertTitle, {
       children: title
-    }), children]
+    }), _jsx(_Box, {
+      component: "div",
+      children: children
+    })]
   });
 };
-const MemoizedInfobox = memo(Infobox);
-export { MemoizedInfobox as Infobox };
-//# sourceMappingURL=Infobox.js.map
+const MemoizedCallout = memo(Callout);
+MemoizedCallout.displayName = "Callout";
+export { MemoizedCallout as Callout };
+//# sourceMappingURL=Callout.js.map

package/dist/Callout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Callout.js","names":["memo","ScreenReaderText","useTranslation","jsxs","_jsxs","jsx","_jsx","calloutRoleValues","calloutSeverityValues","Callout","_ref","children","role","severity","title","t","_Alert","variant","_AlertTitle","_Box","component","MemoizedCallout","displayName"],"sources":["../src/Callout.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 { Alert, AlertTitle, Box } from \"@mui/material\";\nimport { ScreenReaderText } from \"./ScreenReaderText\";\nimport { useTranslation } from \"react-i18next\";\n\nexport const calloutRoleValues = [\"status\", \"alert\"] as const;\nexport const calloutSeverityValues = [\n  \"success\",\n  \"info\",\n  \"warning\",\n  \"error\",\n] as const;\n\nexport type CalloutProps = {\n  /**\n   * The contents of the Callout\n   */\n  children: ReactNode;\n  /**\n   * Sets the ARIA role of the Callout\n   * (\"status\" for something that dynamically updates, \"alert\" for errors, null for something\n   * unchanging)\n   */\n  role?: (typeof calloutRoleValues)[number];\n  /**\n   * Determine the color and icon of the Callout\n   */\n  severity: (typeof calloutSeverityValues)[number];\n  /**\n   * The title of the Callout\n   */\n  title?: string;\n};\n\nconst Callout = ({ children, role, severity, title }: CalloutProps) => {\n  const { t } = useTranslation();\n\n  return (\n    <Alert role={role} severity={severity} variant=\"callout\">\n      <ScreenReaderText>{t(`severity.${severity}`)}: </ScreenReaderText>\n      {title && <AlertTitle>{title}</AlertTitle>}\n      <Box component=\"div\">{children}</Box>\n    </Alert>\n  );\n};\n\nconst MemoizedCallout = memo(Callout);\nMemoizedCallout.displayName = \"Callout\";\n\nexport { MemoizedCallout as Callout };\n"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAmB,OAAO;AAAC,SAE/BC,gBAAgB;AACzB,SAASC,cAAc,QAAQ,eAAe;AAAC,SAAAC,IAAA,IAAAC,KAAA;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAE/C,OAAO,MAAMC,iBAAiB,GAAG,CAAC,QAAQ,EAAE,OAAO,CAAU;AAC7D,OAAO,MAAMC,qBAAqB,GAAG,CACnC,SAAS,EACT,MAAM,EACN,SAAS,EACT,OAAO,CACC;AAuBV,MAAMC,OAAO,GAAGC,IAAA,IAAuD;EAAA,IAAtD;IAAEC,QAAQ;IAAEC,IAAI;IAAEC,QAAQ;IAAEC;EAAoB,CAAC,GAAAJ,IAAA;EAChE,MAAM;IAAEK;EAAE,CAAC,GAAGb,cAAc,CAAC,CAAC;EAE9B,OACEE,KAAA,CAAAY,MAAA;IAAOJ,IAAI,EAAEA,IAAK;IAACC,QAAQ,EAAEA,QAAS;IAACI,OAAO,EAAC,SAAS;IAAAN,QAAA,GACtDP,KAAA,CAACH,gBAAgB;MAAAU,QAAA,GAAEI,CAAC,CAAE,YAAWF,QAAS,EAAC,CAAC,EAAC,IAAE;IAAA,CAAkB,CAAC,EACjEC,KAAK,IAAIR,IAAA,CAAAY,WAAA;MAAAP,QAAA,EAAaG;IAAK,CAAa,CAAC,EAC1CR,IAAA,CAAAa,IAAA;MAAKC,SAAS,EAAC,KAAK;MAAAT,QAAA,EAAEA;IAAQ,CAAM,CAAC;EAAA,CAChC,CAAC;AAEZ,CAAC;AAED,MAAMU,eAAe,GAAGrB,IAAI,CAACS,OAAO,CAAC;AACrCY,eAAe,CAACC,WAAW,GAAG,SAAS;AAEvC,SAASD,eAAe,IAAIZ,OAAO"}

package/dist/Checkbox.js

@@ -1,5 +1,5 @@
+import _FormControlLabel from "@mui/material/FormControlLabel";
 import _Checkbox from "@mui/material/Checkbox";
-import _Typography from "@mui/material/Typography";
 /*!
  * 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.")
@@ -11,34 +11,35 @@ import _Typography from "@mui/material/Typography";
  *
  * See the License for the specific language governing permissions and limitations under the License.
  */
-import { memo, useMemo } from "react";
+import { Typography } from "./Typography.js";
+import { memo, useCallback, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { FormControlLabel } from "./index.js";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
+export const checkboxValidityValues = ["valid", "invalid", "inherit"];
 const Checkbox = _ref => {
   let {
     ariaLabel,
     ariaLabelledBy,
-    isInvalid,
-    isValid,
-    isChecked,
+    isDefaultChecked = false,
     isDisabled,
     isIndeterminate,
     isRequired,
     label: labelProp,
     name,
-    onChange,
+    onChange: onChangeProp,
+    validity = "inherit",
     value
   } = _ref;
   const {
     t
   } = useTranslation();
+  const [isCheckedValue, setIsCheckedValue] = useState(isDefaultChecked);
   const label = useMemo(() => {
     if (isRequired) {
       return _jsxs(_Fragment, {
-        children: [labelProp, " ", _jsxs(_Typography, {
+        children: [labelProp, " ", _jsxs(Typography, {
           component: "span",
           color: "textSecondary",
           children: ["(", t("fieldlabel.required.text"), ")"]
@@ -50,12 +51,15 @@ const Checkbox = _ref => {
       });
     }
   }, [isRequired, labelProp, t]);
-  return _jsx(FormControlLabel, {
+  const onChange = useCallback((event, checked) => {
+    setIsCheckedValue(event.target.checked);
+    onChangeProp?.(event, checked);
+  }, [onChangeProp]);
+  return _jsx(_FormControlLabel, {
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
-    "aria-required": isRequired,
-    checked: isChecked,
-    className: isInvalid ? "Mui-error" : isValid ? "Mui-valid" : "",
+    checked: isCheckedValue,
+    className: validity === "invalid" ? "Mui-error" : validity === "valid" ? "Mui-valid" : "",
     control: _jsx(_Checkbox, {
       indeterminate: isIndeterminate,
       required: isRequired
@@ -69,5 +73,6 @@ const Checkbox = _ref => {
   });
 };
 const MemoizedCheckbox = memo(Checkbox);
+MemoizedCheckbox.displayName = "Checkbox";
 export { MemoizedCheckbox as Checkbox };
 //# sourceMappingURL=Checkbox.js.map

package/dist/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":["memo","useMemo","useTranslation","FormControlLabel","jsxs","_jsxs","Fragment","_Fragment","jsx","_jsx","Checkbox","_ref","ariaLabel","ariaLabelledBy","isInvalid","isValid","isChecked","isDisabled","isIndeterminate","isRequired","label","labelProp","name","onChange","value","t","children","_Typography","component","color","checked","className","control","_Checkbox","indeterminate","required","disabled","MemoizedCheckbox"],"sources":["../src/Checkbox.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 { Checkbox as MuiCheckbox, Typography } from \"@mui/material\";\nimport { ChangeEventHandler, memo, useMemo } from \"react\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { FormControlLabel } from \".\";\n\nexport type CheckboxProps = {\n  ariaLabel?: string;\n  ariaLabelledBy?: string;\n  isInvalid?: boolean;\n  isValid?: boolean;\n  isChecked?: boolean;\n  isDefaultChecked?: boolean;\n  isDisabled?: boolean;\n  isIndeterminate?: boolean;\n  isRequired?: boolean;\n  label?: string;\n  name?: string;\n  onChange?: ChangeEventHandler<EventTarget>;\n  value?: string;\n};\n\nconst Checkbox = ({\n  ariaLabel,\n  ariaLabelledBy,\n  isInvalid,\n  isValid,\n  isChecked,\n  isDisabled,\n  isIndeterminate,\n  isRequired,\n  label: labelProp,\n  name,\n  onChange,\n  value,\n}: CheckboxProps) => {\n  const { t } = useTranslation();\n\n  const label = useMemo(() => {\n    if (isRequired) {\n      return (\n        <>\n          {labelProp}{\" \"}\n          <Typography component=\"span\" color=\"textSecondary\">\n            ({t(\"fieldlabel.required.text\")})\n          </Typography>\n        </>\n      );\n    } else {\n      return <>{labelProp}</>;\n    }\n  }, [isRequired, labelProp, t]);\n\n  return (\n    <FormControlLabel\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      aria-required={isRequired}\n      checked={isChecked}\n      className={isInvalid ? \"Mui-error\" : isValid ? \"Mui-valid\" : \"\"}\n      control={\n        <MuiCheckbox indeterminate={isIndeterminate} required={isRequired} />\n      }\n      disabled={isDisabled}\n      label={label}\n      name={name}\n      onChange={onChange}\n      value={value}\n      required={isRequired}\n    />\n  );\n};\n\nconst MemoizedCheckbox = memo(Checkbox);\n\nexport { MemoizedCheckbox as Checkbox };\n"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,SAA6BA,IAAI,EAAEC,OAAO,QAAQ,OAAO;AACzD,SAASC,cAAc,QAAQ,eAAe;AAAC,SAEtCC,gBAAgB;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAAA,SAAAC,QAAA,IAAAC,SAAA;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAkBzB,MAAMC,QAAQ,GAAGC,IAAA,IAaI;EAAA,IAbH;IAChBC,SAAS;IACTC,cAAc;IACdC,SAAS;IACTC,OAAO;IACPC,SAAS;IACTC,UAAU;IACVC,eAAe;IACfC,UAAU;IACVC,KAAK,EAAEC,SAAS;IAChBC,IAAI;IACJC,QAAQ;IACRC;EACa,CAAC,GAAAb,IAAA;EACd,MAAM;IAAEc;EAAE,CAAC,GAAGvB,cAAc,CAAC,CAAC;EAE9B,MAAMkB,KAAK,GAAGnB,OAAO,CAAC,MAAM;IAC1B,IAAIkB,UAAU,EAAE;MACd,OACEd,KAAA,CAAAE,SAAA;QAAAmB,QAAA,GACGL,SAAS,EAAE,GAAG,EACfhB,KAAA,CAAAsB,WAAA;UAAYC,SAAS,EAAC,MAAM;UAACC,KAAK,EAAC,eAAe;UAAAH,QAAA,GAAC,GAChD,EAACD,CAAC,CAAC,0BAA0B,CAAC,EAAC,GAClC;QAAA,CAAY,CAAC;MAAA,CACb,CAAC;IAEP,CAAC,MAAM;MACL,OAAOhB,IAAA,CAAAF,SAAA;QAAAmB,QAAA,EAAGL;MAAS,CAAG,CAAC;IACzB;EACF,CAAC,EAAE,CAACF,UAAU,EAAEE,SAAS,EAAEI,CAAC,CAAC,CAAC;EAE9B,OACEhB,IAAA,CAACN,gBAAgB;IACf,cAAYS,SAAU;IACtB,mBAAiBC,cAAe;IAChC,iBAAeM,UAAW;IAC1BW,OAAO,EAAEd,SAAU;IACnBe,SAAS,EAAEjB,SAAS,GAAG,WAAW,GAAGC,OAAO,GAAG,WAAW,GAAG,EAAG;IAChEiB,OAAO,EACLvB,IAAA,CAAAwB,SAAA;MAAaC,aAAa,EAAEhB,eAAgB;MAACiB,QAAQ,EAAEhB;IAAW,CAAE,CACrE;IACDiB,QAAQ,EAAEnB,UAAW;IACrBG,KAAK,EAAEA,KAAM;IACbE,IAAI,EAAEA,IAAK;IACXC,QAAQ,EAAEA,QAAS;IACnBC,KAAK,EAAEA,KAAM;IACbW,QAAQ,EAAEhB;EAAW,CACtB,CAAC;AAEN,CAAC;AAED,MAAMkB,gBAAgB,GAAGrC,IAAI,CAACU,QAAQ,CAAC;AAEvC,SAAS2B,gBAAgB,IAAI3B,QAAQ"}
+{"version":3,"file":"Checkbox.js","names":["Typography","memo","useCallback","useMemo","useState","useTranslation","jsxs","_jsxs","Fragment","_Fragment","jsx","_jsx","checkboxValidityValues","Checkbox","_ref","ariaLabel","ariaLabelledBy","isDefaultChecked","isDisabled","isIndeterminate","isRequired","label","labelProp","name","onChange","onChangeProp","validity","value","t","isCheckedValue","setIsCheckedValue","children","component","color","event","checked","target","_FormControlLabel","className","control","_Checkbox","indeterminate","required","disabled","MemoizedCheckbox","displayName"],"sources":["../src/Checkbox.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  Checkbox as MuiCheckbox,\n  CheckboxProps as MuiCheckboxProps,\n  FormControlLabel,\n} from \"@mui/material\";\nimport { Typography } from \"./Typography\";\nimport { memo, useCallback, useMemo, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\n\nexport const checkboxValidityValues = [\"valid\", \"invalid\", \"inherit\"] as const;\n\nexport type CheckboxProps = {\n  /**\n   * The ARIA label for the Checkbox\n   */\n  ariaLabel?: string;\n  /**\n   * The ID of the element that labels the Checkbox\n   */\n  ariaLabelledBy?: string;\n  /**\n   * Determines whether the Checkbox is checked\n   */\n  isDefaultChecked?: boolean;\n  /**\n   * Determines whether the Checkbox is disabled\n   */\n  isDisabled?: boolean;\n  /**\n   * Determines whether the Checkbox is in an indeterminate state\n   */\n  isIndeterminate?: boolean;\n  /**\n   * Determines whether the Checkbox is required\n   */\n  isRequired?: boolean;\n  /**\n   * The label text for the Checkbox\n   */\n  label?: string;\n  /**\n   * The name attribute of the Checkbox\n   */\n  name?: string;\n  /**\n   * The change event handler for the Checkbox\n   */\n  onChange?: MuiCheckboxProps[\"onChange\"];\n  /**\n   * The checkbox validity, if different from its enclosing group. Defaults to \"inherit\".\n   */\n  validity?: (typeof checkboxValidityValues)[number];\n  /**\n   * The value attribute of the Checkbox\n   */\n  value?: string;\n};\n\nconst Checkbox = ({\n  ariaLabel,\n  ariaLabelledBy,\n  isDefaultChecked = false,\n  isDisabled,\n  isIndeterminate,\n  isRequired,\n  label: labelProp,\n  name,\n  onChange: onChangeProp,\n  validity = \"inherit\",\n  value,\n}: CheckboxProps) => {\n  const { t } = useTranslation();\n  const [isCheckedValue, setIsCheckedValue] = useState(isDefaultChecked);\n\n  const label = useMemo(() => {\n    if (isRequired) {\n      return (\n        <>\n          {labelProp}{\" \"}\n          <Typography component=\"span\" color=\"textSecondary\">\n            ({t(\"fieldlabel.required.text\")})\n          </Typography>\n        </>\n      );\n    } else {\n      return <>{labelProp}</>;\n    }\n  }, [isRequired, labelProp, t]);\n\n  const onChange = useCallback(\n    (event, checked) => {\n      setIsCheckedValue(event.target.checked);\n      onChangeProp?.(event, checked);\n    },\n    [onChangeProp]\n  );\n\n  return (\n    <FormControlLabel\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      checked={isCheckedValue}\n      className={\n        validity === \"invalid\"\n          ? \"Mui-error\"\n          : validity === \"valid\"\n          ? \"Mui-valid\"\n          : \"\"\n      }\n      control={\n        <MuiCheckbox indeterminate={isIndeterminate} required={isRequired} />\n      }\n      disabled={isDisabled}\n      label={label}\n      name={name}\n      onChange={onChange}\n      value={value}\n      required={isRequired}\n    />\n  );\n};\n\nconst MemoizedCheckbox = memo(Checkbox);\nMemoizedCheckbox.displayName = \"Checkbox\";\n\nexport { MemoizedCheckbox as Checkbox };\n"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAVA,SAiBSA,UAAU;AACnB,SAASC,IAAI,EAAEC,WAAW,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AAC5D,SAASC,cAAc,QAAQ,eAAe;AAAC,SAAAC,IAAA,IAAAC,KAAA;AAAA,SAAAC,QAAA,IAAAC,SAAA;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAE/C,OAAO,MAAMC,sBAAsB,GAAG,CAAC,OAAO,EAAE,SAAS,EAAE,SAAS,CAAU;AAiD9E,MAAMC,QAAQ,GAAGC,IAAA,IAYI;EAAA,IAZH;IAChBC,SAAS;IACTC,cAAc;IACdC,gBAAgB,GAAG,KAAK;IACxBC,UAAU;IACVC,eAAe;IACfC,UAAU;IACVC,KAAK,EAAEC,SAAS;IAChBC,IAAI;IACJC,QAAQ,EAAEC,YAAY;IACtBC,QAAQ,GAAG,SAAS;IACpBC;EACa,CAAC,GAAAb,IAAA;EACd,MAAM;IAAEc;EAAE,CAAC,GAAGvB,cAAc,CAAC,CAAC;EAC9B,MAAM,CAACwB,cAAc,EAAEC,iBAAiB,CAAC,GAAG1B,QAAQ,CAACa,gBAAgB,CAAC;EAEtE,MAAMI,KAAK,GAAGlB,OAAO,CAAC,MAAM;IAC1B,IAAIiB,UAAU,EAAE;MACd,OACEb,KAAA,CAAAE,SAAA;QAAAsB,QAAA,GACGT,SAAS,EAAE,GAAG,EACff,KAAA,CAACP,UAAU;UAACgC,SAAS,EAAC,MAAM;UAACC,KAAK,EAAC,eAAe;UAAAF,QAAA,GAAC,GAChD,EAACH,CAAC,CAAC,0BAA0B,CAAC,EAAC,GAClC;QAAA,CAAY,CAAC;MAAA,CACb,CAAC;IAEP,CAAC,MAAM;MACL,OAAOjB,IAAA,CAAAF,SAAA;QAAAsB,QAAA,EAAGT;MAAS,CAAG,CAAC;IACzB;EACF,CAAC,EAAE,CAACF,UAAU,EAAEE,SAAS,EAAEM,CAAC,CAAC,CAAC;EAE9B,MAAMJ,QAAQ,GAAGtB,WAAW,CAC1B,CAACgC,KAAK,EAAEC,OAAO,KAAK;IAClBL,iBAAiB,CAACI,KAAK,CAACE,MAAM,CAACD,OAAO,CAAC;IACvCV,YAAY,GAAGS,KAAK,EAAEC,OAAO,CAAC;EAChC,CAAC,EACD,CAACV,YAAY,CACf,CAAC;EAED,OACEd,IAAA,CAAA0B,iBAAA;IACE,cAAYtB,SAAU;IACtB,mBAAiBC,cAAe;IAChCmB,OAAO,EAAEN,cAAe;IACxBS,SAAS,EACPZ,QAAQ,KAAK,SAAS,GAClB,WAAW,GACXA,QAAQ,KAAK,OAAO,GACpB,WAAW,GACX,EACL;IACDa,OAAO,EACL5B,IAAA,CAAA6B,SAAA;MAAaC,aAAa,EAAEtB,eAAgB;MAACuB,QAAQ,EAAEtB;IAAW,CAAE,CACrE;IACDuB,QAAQ,EAAEzB,UAAW;IACrBG,KAAK,EAAEA,KAAM;IACbE,IAAI,EAAEA,IAAK;IACXC,QAAQ,EAAEA,QAAS;IACnBG,KAAK,EAAEA,KAAM;IACbe,QAAQ,EAAEtB;EAAW,CACtB,CAAC;AAEN,CAAC;AAED,MAAMwB,gBAAgB,GAAG3C,IAAI,CAACY,QAAQ,CAAC;AACvC+B,gBAAgB,CAACC,WAAW,GAAG,UAAU;AAEzC,SAASD,gBAAgB,IAAI/B,QAAQ"}

package/dist/CheckboxGroup.js

@@ -16,10 +16,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const CheckboxGroup = _ref => {
   let {
     children,
-    isDisabled,
     errorMessage,
     hint,
     id: idOverride,
+    isDisabled,
     isRequired = false,
     label
   } = _ref;
@@ -47,5 +47,6 @@ const CheckboxGroup = _ref => {
   });
 };
 const MemoizedCheckboxGroup = memo(CheckboxGroup);
+MemoizedCheckboxGroup.displayName = "CheckboxGroup";
 export { MemoizedCheckboxGroup as CheckboxGroup };
 //# sourceMappingURL=CheckboxGroup.js.map

package/dist/CheckboxGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.js","names":["memo","useCallback","Field","jsx","_jsx","CheckboxGroup","_ref","children","isDisabled","errorMessage","hint","id","idOverride","isRequired","label","renderFieldComponent","_ref2","ariaDescribedBy","_FormGroup","fieldType","hasVisibleLabel","isOptional","MemoizedCheckboxGroup"],"sources":["../src/CheckboxGroup.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 { FormGroup as MuiFormGroup } from \"@mui/material\";\nimport { memo, ReactElement, useCallback } from \"react\";\n\nimport { Checkbox } from \"./Checkbox\";\nimport { Field } from \"./Field\";\n\nexport type CheckboxGroupProps = {\n  children:\n    | ReactElement<typeof Checkbox>\n    | Array<ReactElement<typeof Checkbox>>;\n  errorMessage?: string;\n  hint?: string;\n  /**\n   * The id of the `input` element. This will also be the input's `name` field.\n   */\n  id?: string;\n  isDisabled?: boolean;\n  isRequired?: boolean;\n  label: string;\n};\n\nconst CheckboxGroup = ({\n  children,\n  isDisabled,\n  errorMessage,\n  hint,\n  id: idOverride,\n  isRequired = false,\n  label,\n}: CheckboxGroupProps) => {\n  const renderFieldComponent = useCallback(\n    ({ ariaDescribedBy, id }) => (\n      <MuiFormGroup aria-describedby={ariaDescribedBy} id={id}>\n        {children}\n      </MuiFormGroup>\n    ),\n    [children]\n  );\n\n  return (\n    <Field\n      errorMessage={errorMessage}\n      fieldType=\"group\"\n      hasVisibleLabel={true}\n      hint={hint}\n      id={idOverride}\n      isDisabled={isDisabled}\n      isOptional={!isRequired}\n      label={label}\n      renderFieldComponent={renderFieldComponent}\n    />\n  );\n};\n\nconst MemoizedCheckboxGroup = memo(CheckboxGroup);\n\nexport { MemoizedCheckboxGroup as CheckboxGroup };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,SAASA,IAAI,EAAgBC,WAAW,QAAQ,OAAO;AAAC,SAG/CC,KAAK;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAiBd,MAAMC,aAAa,GAAGC,IAAA,IAQI;EAAA,IARH;IACrBC,QAAQ;IACRC,UAAU;IACVC,YAAY;IACZC,IAAI;IACJC,EAAE,EAAEC,UAAU;IACdC,UAAU,GAAG,KAAK;IAClBC;EACkB,CAAC,GAAAR,IAAA;EACnB,MAAMS,oBAAoB,GAAGd,WAAW,CACtCe,KAAA;IAAA,IAAC;MAAEC,eAAe;MAAEN;IAAG,CAAC,GAAAK,KAAA;IAAA,OACtBZ,IAAA,CAAAc,UAAA;MAAc,oBAAkBD,eAAgB;MAACN,EAAE,EAAEA,EAAG;MAAAJ,QAAA,EACrDA;IAAQ,CACG,CAAC;EAAA,CAChB,EACD,CAACA,QAAQ,CACX,CAAC;EAED,OACEH,IAAA,CAACF,KAAK;IACJO,YAAY,EAAEA,YAAa;IAC3BU,SAAS,EAAC,OAAO;IACjBC,eAAe,EAAE,IAAK;IACtBV,IAAI,EAAEA,IAAK;IACXC,EAAE,EAAEC,UAAW;IACfJ,UAAU,EAAEA,UAAW;IACvBa,UAAU,EAAE,CAACR,UAAW;IACxBC,KAAK,EAAEA,KAAM;IACbC,oBAAoB,EAAEA;EAAqB,CAC5C,CAAC;AAEN,CAAC;AAED,MAAMO,qBAAqB,GAAGtB,IAAI,CAACK,aAAa,CAAC;AAEjD,SAASiB,qBAAqB,IAAIjB,aAAa"}
+{"version":3,"file":"CheckboxGroup.js","names":["memo","useCallback","Field","jsx","_jsx","CheckboxGroup","_ref","children","errorMessage","hint","id","idOverride","isDisabled","isRequired","label","renderFieldComponent","_ref2","ariaDescribedBy","_FormGroup","fieldType","hasVisibleLabel","isOptional","MemoizedCheckboxGroup","displayName"],"sources":["../src/CheckboxGroup.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 { FormGroup as MuiFormGroup } from \"@mui/material\";\nimport { memo, ReactElement, useCallback } from \"react\";\n\nimport { Checkbox } from \"./Checkbox\";\nimport { Field } from \"./Field\";\n\nexport type CheckboxGroupProps = {\n  /**\n   * A single Checkbox element or an array of Checkbox elements\n   */\n  children:\n    | ReactElement<typeof Checkbox>\n    | Array<ReactElement<typeof Checkbox>>;\n  /**\n   * The error message for the CheckboxGroup\n   */\n  errorMessage?: string;\n  /**\n   * The hint text for the CheckboxGroup\n   */\n  hint?: string;\n  /**\n   * The id of the `input` element. This will also be the input's `name` field.\n   */\n  id?: string;\n  /**\n   * If `true`, the CheckboxGroup is disabled\n   */\n  isDisabled?: boolean;\n  /**\n   * If `true`, the CheckboxGroup is required\n   */\n  isRequired?: boolean;\n  /**\n   * The label text for the CheckboxGroup\n   */\n  label: string;\n};\n\nconst CheckboxGroup = ({\n  children,\n  errorMessage,\n  hint,\n  id: idOverride,\n  isDisabled,\n  isRequired = false,\n  label,\n}: CheckboxGroupProps) => {\n  const renderFieldComponent = useCallback(\n    ({ ariaDescribedBy, id }) => (\n      <MuiFormGroup aria-describedby={ariaDescribedBy} id={id}>\n        {children}\n      </MuiFormGroup>\n    ),\n    [children]\n  );\n\n  return (\n    <Field\n      errorMessage={errorMessage}\n      fieldType=\"group\"\n      hasVisibleLabel={true}\n      hint={hint}\n      id={idOverride}\n      isDisabled={isDisabled}\n      isOptional={!isRequired}\n      label={label}\n      renderFieldComponent={renderFieldComponent}\n    />\n  );\n};\n\nconst MemoizedCheckboxGroup = memo(CheckboxGroup);\nMemoizedCheckboxGroup.displayName = \"CheckboxGroup\";\n\nexport { MemoizedCheckboxGroup as CheckboxGroup };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,SAASA,IAAI,EAAgBC,WAAW,QAAQ,OAAO;AAAC,SAG/CC,KAAK;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAmCd,MAAMC,aAAa,GAAGC,IAAA,IAQI;EAAA,IARH;IACrBC,QAAQ;IACRC,YAAY;IACZC,IAAI;IACJC,EAAE,EAAEC,UAAU;IACdC,UAAU;IACVC,UAAU,GAAG,KAAK;IAClBC;EACkB,CAAC,GAAAR,IAAA;EACnB,MAAMS,oBAAoB,GAAGd,WAAW,CACtCe,KAAA;IAAA,IAAC;MAAEC,eAAe;MAAEP;IAAG,CAAC,GAAAM,KAAA;IAAA,OACtBZ,IAAA,CAAAc,UAAA;MAAc,oBAAkBD,eAAgB;MAACP,EAAE,EAAEA,EAAG;MAAAH,QAAA,EACrDA;IAAQ,CACG,CAAC;EAAA,CAChB,EACD,CAACA,QAAQ,CACX,CAAC;EAED,OACEH,IAAA,CAACF,KAAK;IACJM,YAAY,EAAEA,YAAa;IAC3BW,SAAS,EAAC,OAAO;IACjBC,eAAe,EAAE,IAAK;IACtBX,IAAI,EAAEA,IAAK;IACXC,EAAE,EAAEC,UAAW;IACfC,UAAU,EAAEA,UAAW;IACvBS,UAAU,EAAE,CAACR,UAAW;IACxBC,KAAK,EAAEA,KAAM;IACbC,oBAAoB,EAAEA;EAAqB,CAC5C,CAAC;AAEN,CAAC;AAED,MAAMO,qBAAqB,GAAGtB,IAAI,CAACK,aAAa,CAAC;AACjDiB,qBAAqB,CAACC,WAAW,GAAG,eAAe;AAEnD,SAASD,qBAAqB,IAAIjB,aAAa"}

package/dist/CircularProgress.js

@@ -13,11 +13,13 @@ import _CircularProgress from "@mui/material/CircularProgress";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const CircularProgress = _ref => {
   let {
+    ariaLabel,
     value
   } = _ref;
   return _jsx(_CircularProgress, {
     value: value,
-    variant: value ? "determinate" : "indeterminate"
+    variant: value ? "determinate" : "indeterminate",
+    "aria-label": ariaLabel
   });
 };
 //# sourceMappingURL=CircularProgress.js.map

package/dist/CircularProgress.js.map

@@ -1 +1 @@
-{"version":3,"file":"CircularProgress.js","names":["jsx","_jsx","CircularProgress","_ref","value","_CircularProgress","variant"],"sources":["../src/CircularProgress.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 { CircularProgress as MuiCircularProgress } from \"@mui/material\";\n\nexport type CircularProgressProps = {\n  value?: number;\n};\n\nexport const CircularProgress = ({ value }: CircularProgressProps) => (\n  <MuiCircularProgress\n    value={value}\n    variant={value ? \"determinate\" : \"indeterminate\"}\n  />\n);\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAVA,SAAAA,GAAA,IAAAC,IAAA;AAkBA,OAAO,MAAMC,gBAAgB,GAAGC,IAAA;EAAA,IAAC;IAAEC;EAA6B,CAAC,GAAAD,IAAA;EAAA,OAC/DF,IAAA,CAAAI,iBAAA;IACED,KAAK,EAAEA,KAAM;IACbE,OAAO,EAAEF,KAAK,GAAG,aAAa,GAAG;EAAgB,CAClD,CAAC;AAAA,CACH"}
+{"version":3,"file":"CircularProgress.js","names":["jsx","_jsx","CircularProgress","_ref","ariaLabel","value","_CircularProgress","variant"],"sources":["../src/CircularProgress.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 { CircularProgress as MuiCircularProgress } from \"@mui/material\";\n\nexport type CircularProgressProps = {\n  /**\n   * The ARIA label for the progress spinner\n   */\n  ariaLabel?: string;\n  /**\n   * The percentage filled the spinner should be, as an integer.\n   * If undefined, the spinner will spin perpetually.\n   */\n  value?: number;\n};\n\nexport const CircularProgress = ({\n  ariaLabel,\n  value,\n}: CircularProgressProps) => (\n  <MuiCircularProgress\n    value={value}\n    variant={value ? \"determinate\" : \"indeterminate\"}\n    aria-label={ariaLabel}\n  />\n);\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAVA,SAAAA,GAAA,IAAAC,IAAA;AA0BA,OAAO,MAAMC,gBAAgB,GAAGC,IAAA;EAAA,IAAC;IAC/BC,SAAS;IACTC;EACqB,CAAC,GAAAF,IAAA;EAAA,OACtBF,IAAA,CAAAK,iBAAA;IACED,KAAK,EAAEA,KAAM;IACbE,OAAO,EAAEF,KAAK,GAAG,aAAa,GAAG,eAAgB;IACjD,cAAYD;EAAU,CACvB,CAAC;AAAA,CACH"}