@okta/odyssey-react-mui 0.23.0 → 1.0.0

package/CHANGELOG.md

@@ -3,6 +3,62 @@
 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
+
+- add odyssey token override support ([#1797](https://github.com/okta/odyssey/issues/1797)) ([52543cc](https://github.com/okta/odyssey/commit/52543cc5bc37ab5ad639434d80faa4683a1e8061))
+- make tranlationOverrides available via pass-through prop ([cb6fbe4](https://github.com/okta/odyssey/commit/cb6fbe45c14c05d639d147618f4279c538b034e2))
+- **odyssey-react-mui:** add Form and Fieldset components ([bc4cfe6](https://github.com/okta/odyssey/commit/bc4cfe690dd4d95cc60d6410b47800cfcc0f1bc2))
+- **odyssey-react-mui:** implement translation system via OdysseyTranslationProvider ([3c3fe2d](https://github.com/okta/odyssey/commit/3c3fe2dba78b21a8bc859ba33b5cd15e03c0c590))
+- wrap the Select ([26452d9](https://github.com/okta/odyssey/commit/26452d9712c69531d5e3637f84f6e4b8c187a526))
+
+### Bug Fixes
+
+- add href to Link ([93009b7](https://github.com/okta/odyssey/commit/93009b78e849476f99a56381f82771e3768e2e80))
+- correct type error ([0a2d09e](https://github.com/okta/odyssey/commit/0a2d09e676ee24c803516a953be6cd5033936480))
+- fix type errors ([30275bc](https://github.com/okta/odyssey/commit/30275bc70653f1ab2e07ee0e3f07faad2d8d7216))
+- **odyssey-react-mui:** add proper displayName for TextField ([cd0eff0](https://github.com/okta/odyssey/commit/cd0eff05b0c35ea158cf19e6e2585eb9c83038fa))
+- **odyssey-react-mui:** fix RTL placement of Select chevron ([9d99d9d](https://github.com/okta/odyssey/commit/9d99d9dcf5d166c46f1ea72d2bce2affe7ee0b6c))
+- remove unused forwardRef from Icon and Toast ([bdfd1b1](https://github.com/okta/odyssey/commit/bdfd1b1a523579c3c6699915957197f5dc67776a))
+- renderValue was missing a useCallback wrapper ([#1800](https://github.com/okta/odyssey/issues/1800)) ([40d9566](https://github.com/okta/odyssey/commit/40d95669bf9d1f394aeb163fc41d46823f312d7f))
+
 ## [0.23.0](https://github.com/okta/odyssey/compare/v0.22.0...v0.23.0) (2023-05-08)
 
 ### Features

package/README.md

@@ -44,12 +44,14 @@ Import named ESM exports:
 import { PasswordInput } from "@okta/odyssey-react-mui";
 ```
 
-Add the Odyssey `ThemeProvider` around your whole app:
+Add the Odyssey `OdysseyProvider` around your whole app:
 
 ```jsx
-import { ThemeProvider } from "@okta/odyssey-react-mui";
+import { OdysseyProvider } from "@okta/odyssey-react-mui";
 
-const YourAppRoot = ({ children }) => <ThemeProvider>{children}</ThemeProvider>;
+const YourAppRoot = ({ children }) => (
+  <OdysseyProvider>{children}</OdysseyProvider>
+);
 ```
 
 Add Material-UI components not exported from Odyssey with Odyssey styling or add your own theme to MUI:
@@ -72,16 +74,50 @@ const YourAppRoot = ({ children }) => (
 
 It’s possible to have 2 versions of Odyssey running at the same time, so when adding MUI, you can do it piecemeal.
 
-This is how you setup two `ThemeProvider`s like so:
+This is how you setup two `OdysseyProvider`s like so:
 
 ```jsx
-import { ThemeProvider as OdysseyMuiThemeProvider } from "@okta/odyssey-react-mui";
+import { OdysseyProvider } from "@okta/odyssey-react-mui";
 import { ThemeProvider as OdysseyLegacyThemeProvider } from "@okta/odyssey-react-theme";
 
 const YourAppRoot = ({ children }) => (
-  <OdysseyMuiThemeProvider>
+  <OdysseyProvider>
     <OdysseyLegacyThemeProvider>{children}</OdysseyLegacyThemeProvider>
-  </OdysseyMuiThemeProvider>
+  </OdysseyProvider>
+);
+```
+
+### Overrides
+
+It is possible to provide `nonce`, `themeOverride`, `languageCode` and `translationOverrides` to the underlying components via props:
+
+```jsx
+import { OdysseyProvider } from "@okta/odyssey-react-mui";
+import { theme } from "./themeOverride";
+
+const nonce =
+  "K6ybeaqlwaAKk0hQF?hE2qZ0Ar3M=G4Bpr-XFk1x4XbL3dH3T5=mk0aXeWX9ifn9";
+
+const languageCode = "en";
+
+const translationOverrides = {
+  en: {
+    "fieldlabel.optional.text": "Not Required",
+  },
+  fr: {
+    "fieldlabel.optional.text": "Non Requis",
+  },
+};
+
+const YourAppRoot = ({ children }) => (
+  <OdysseyProvider
+    nonce={nonce}
+    themeOverride={theme}
+    languageCode={languageCode}
+    translationOverrides={translationOverrides}
+  >
+    {children}
+  </OdysseyProvider>
 );
 ```
 

package/dist/@types/i18next.d.js

@@ -0,0 +1,14 @@
+/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import "i18next";
+//# sourceMappingURL=i18next.d.js.map

package/dist/@types/i18next.d.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"i18next.d.js","names":[],"sources":["../../src/@types/i18next.d.ts"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport \"i18next\";\nimport { translation as en } from \"../properties/ts/odyssey-react-mui\";\n\ndeclare module \"i18next\" {\n  interface CustomTypeOptions {\n    resources: {\n      translations: typeof en;\n    };\n  }\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAO,SAAS"}

package/dist/Autocomplete.js

@@ -1,13 +1,23 @@
 import _Autocomplete from "@mui/material/Autocomplete";
 import _InputBase from "@mui/material/InputBase";
+/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
 import { memo, useCallback } from "react";
 import { Field } from "./Field.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-
 const Autocomplete = _ref => {
   let {
-    isCustomValueAllowed,
     hasMultipleChoices,
+    isCustomValueAllowed,
     isDisabled,
     isLoading,
     isReadOnly,
@@ -35,7 +45,8 @@ const Autocomplete = _ref => {
           ariaDescribedBy,
           id
         } = _ref3;
-        return _jsx(_InputBase, { ...params,
+        return _jsx(_InputBase, {
+          ...params,
           ...InputProps,
           "aria-describedby": ariaDescribedBy,
           id: id
@@ -44,6 +55,7 @@ const Autocomplete = _ref => {
     });
   }, [hint, label]);
   return _jsx(_Autocomplete, {
+    "aria-disabled": isDisabled,
     disabled: isDisabled,
     freeSolo: isCustomValueAllowed,
     loading: isLoading,
@@ -56,7 +68,6 @@ const Autocomplete = _ref => {
     value: value
   });
 };
-
 const MemoizedAutocomplete = memo(Autocomplete);
 export { MemoizedAutocomplete as Autocomplete };
 //# sourceMappingURL=Autocomplete.js.map

package/dist/Autocomplete.js.map

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.js","names":["memo","useCallback","Field","Autocomplete","isCustomValueAllowed","hasMultipleChoices","isDisabled","isLoading","isReadOnly","hint","label","onChange","onInputChange","options","value","renderInput","InputLabelProps","InputProps","params","htmlFor","ariaDescribedBy","id","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":";;AAiBA,SAASA,IAAT,EAAeC,WAAf,QAAkC,OAAlC;SAESC,K;;;AAiET,MAAMC,YAAY,GAAG,QAgB0D;EAAA,IAZ7E;IACAC,oBADA;IAEAC,kBAFA;IAGAC,UAHA;IAIAC,SAJA;IAKAC,UALA;IAMAC,IANA;IAOAC,KAPA;IAQAC,QARA;IASAC,aATA;IAUAC,OAVA;IAWAC;EAXA,CAY6E;EAC7E,MAAMC,WAAW,GAAGd,WAAW,CAC7B;IAAA,IAAC;MAAEe,eAAF;MAAmBC,UAAnB;MAA+B,GAAGC;IAAlC,CAAD;IAAA,OACE,KAAC,KAAD;MACE,SAAS,EAAC,QADZ;MAEE,eAAe,MAFjB;MAGE,EAAE,EAAEF,eAAe,CAACG,OAHtB;MAIE,IAAI,EAAEV,IAJR;MAKE,KAAK,EAAEC,KALT;MAME,oBAAoB,EAAE;QAAA,IAAC;UAAEU,eAAF;UAAmBC;QAAnB,CAAD;QAAA,OACpB,sBACMH,MADN;UAAA,GAEMD,UAFN;UAGE,oBAAkBG,eAHpB;UAIE,EAAE,EAAEC;QAJN,EADoB;MAAA;IANxB,EADF;EAAA,CAD6B,EAkB7B,CAACZ,IAAD,EAAOC,KAAP,CAlB6B,CAA/B;EAqBA,OACE;IACE,QAAQ,EAAEJ,UADZ;IAEE,QAAQ,EAAEF,oBAFZ;IAGE,OAAO,EAAEG,SAHX;IAIE,QAAQ,EAAEF,kBAJZ;IAKE,QAAQ,EAAEM,QALZ;IAME,aAAa,EAAEC,aANjB;IAOE,OAAO,EAAEC,OAPX;IAQE,QAAQ,EAAEL,UARZ;IASE,WAAW,EAAEO,WATf;IAUE,KAAK,EAAED;EAVT,EADF;AAcD,CApDD;;AAsDA,MAAMQ,oBAAoB,GAAGtB,IAAI,CAACG,YAAD,CAAjC;AAEA,SAASmB,oBAAoB,IAAInB,YAAjC"}
+{"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,11 +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,
@@ -23,21 +28,26 @@ const Banner = _ref => {
     severity,
     text
   } = _ref;
-  return _jsxs(Alert, {
+  const {
+    t
+  } = useTranslation();
+  return _jsxs(_Alert, {
     onClose: onClose,
     role: role,
     severity: severity,
     variant: "banner",
     children: [_jsxs(ScreenReaderText, {
-      children: [severity, ":"]
-    }), text, linkUrl && _jsx(Link, {
+      children: [t(`severity.${severity}`), ":"]
+    }), _jsx(_AlertTitle, {
+      children: text
+    }), linkUrl && _jsx(Link, {
       href: linkUrl,
       variant: "monochrome",
       children: linkText
     })]
   });
 };
-
 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","Banner","linkUrl","linkText","onClose","role","severity","text","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 \"./\";\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  <Alert onClose={onClose} role={role} severity={severity} variant=\"banner\">\n    <ScreenReaderText>{severity}:</ScreenReaderText>\n    {text}\n    {linkUrl && (\n      <Link href={linkUrl} variant=\"monochrome\">\n        {linkText}\n      </Link>\n    )}\n  </Alert>\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,IAAT,QAAqB,OAArB;SACSC,K,EAAOC,I,EAAMC,gB;;;;AAkCtB,MAAMC,MAAM,GAAG;EAAA,IAAC;IACdC,OADc;IAEdC,QAFc;IAGdC,OAHc;IAIdC,IAJc;IAKdC,QALc;IAMdC;EANc,CAAD;EAAA,OAQb,MAAC,KAAD;IAAO,OAAO,EAAEH,OAAhB;IAAyB,IAAI,EAAEC,IAA/B;IAAqC,QAAQ,EAAEC,QAA/C;IAAyD,OAAO,EAAC,QAAjE;IAAA,WACE,MAAC,gBAAD;MAAA,WAAmBA,QAAnB;IAAA,EADF,EAEGC,IAFH,EAGGL,OAAO,IACN,KAAC,IAAD;MAAM,IAAI,EAAEA,OAAZ;MAAqB,OAAO,EAAC,YAA7B;MAAA,UACGC;IADH,EAJJ;EAAA,EARa;AAAA,CAAf;;AAmBA,MAAMK,cAAc,GAAGX,IAAI,CAACI,MAAD,CAA3B;AAEA,SAASO,cAAc,IAAIP,MAA3B"}
+{"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/Box.js

@@ -0,0 +1,29 @@
+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.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+import { forwardRef } 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

@@ -1,26 +1,47 @@
 import _Button from "@mui/material/Button";
-import { memo, useContext, useMemo } from "react";
-import { MuiPropsContext } from "./MuiPropsContext.js";
+/*!
+ * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+import { memo, useCallback } from "react";
+import { 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, { ...muiProps,
+  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,
@@ -28,19 +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","Button","endIcon","id","isDisabled","isFullWidth","onClick","size","startIcon","text","tooltipText","variant","muiProps","button","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":";AAcA,SAASA,IAAT,EAA6BC,UAA7B,EAAyCC,OAAzC,QAAwD,OAAxD;SAGSC,e;SACAC,O;;;;;AAkBT,MAAMC,MAAM,GAAG,QAWI;EAAA,IAXH;IACdC,OADc;IAEdC,EAFc;IAGdC,UAHc;IAIdC,WAJc;IAKdC,OALc;IAMdC,IAAI,GAAG,QANO;IAOdC,SAPc;IAQdC,IARc;IASdC,WATc;IAUdC;EAVc,CAWG;EACjB,MAAMC,QAAQ,GAAGf,UAAU,CAACE,eAAD,CAA3B;EAEA,MAAMc,MAAM,GAAGf,OAAO,CACpB,MACE,mBACMc,QADN;IAEE,QAAQ,EAAER,UAFZ;IAGE,OAAO,EAAEF,OAHX;IAIE,SAAS,EAAEG,WAJb;IAKE,EAAE,EAAEF,EALN;IAME,OAAO,EAAEG,OANX;IAOE,IAAI,EAAEC,IAPR;IAQE,SAAS,EAAEC,SARb;IASE,OAAO,EAAEG,OATX;IAAA,UAWGF;EAXH,EAFkB,EAgBpB,CACEP,OADF,EAEEC,EAFF,EAGEC,UAHF,EAIEC,WAJF,EAKEO,QALF,EAMEN,OANF,EAOEC,IAPF,EAQEC,SARF,EASEC,IATF,EAUEE,OAVF,CAhBoB,CAAtB;EA8BA,OACE;IAAA,WACGD,WAAW,IACV,KAAC,OAAD;MAAS,QAAQ,EAAC,aAAlB;MAAgC,SAAS,EAAC,KAA1C;MAAgD,IAAI,EAAEA,WAAtD;MAAA,UACGG;IADH,EAFJ,EAMG,CAACH,WAAD,IAAgBG,MANnB;EAAA,EADF;AAUD,CAtDD;;AAwDA,MAAMC,cAAc,GAAGlB,IAAI,CAACK,MAAD,CAA3B;AAEA,SAASa,cAAc,IAAIb,MAA3B"}
+{"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/Callout.js

@@ -0,0 +1,50 @@
+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.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { memo } from "react";
+import { 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";
+export const calloutRoleValues = ["status", "alert"];
+export const calloutSeverityValues = ["success", "info", "warning", "error"];
+const Callout = _ref => {
+  let {
+    children,
+    role,
+    severity,
+    title
+  } = _ref;
+  const {
+    t
+  } = useTranslation();
+  return _jsxs(_Alert, {
+    role: role,
+    severity: severity,
+    variant: "callout",
+    children: [_jsxs(ScreenReaderText, {
+      children: [t(`severity.${severity}`), ": "]
+    }), title && _jsx(_AlertTitle, {
+      children: title
+    }), _jsx(_Box, {
+      component: "div",
+      children: children
+    })]
+  });
+};
+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"}