@okta/odyssey-react-mui 0.21.1 → 0.21.2

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.21.2](https://github.com/okta/odyssey/compare/v0.21.1...v0.21.2) (2023-03-30)
+
+### Features
+
+- add context to Banner and Infobox ([18b277c](https://github.com/okta/odyssey/commit/18b277c949065ad659508a75e04125637bc5308c))
+- add missing autoFocus from TextField ([d01dcd4](https://github.com/okta/odyssey/commit/d01dcd4120017d16677ae870c3d1e0f7d1b13b47))
+
+### Bug Fixes
+
+- **odyssey-react-mui:** fix Button, Floating, Disabled bg color ([a9c332a](https://github.com/okta/odyssey/commit/a9c332a85e3b4162bf68837978028081ef2133f7))
+- **odyssey-react-mui:** fixes spacing for Hint/Error field helpers ([846134e](https://github.com/okta/odyssey/commit/846134efcdf9cd8c62932e5f849ee64b0b81e468))
+
 ## [0.21.1](https://github.com/okta/odyssey/compare/v0.21.0...v0.21.1) (2023-03-16)
 
 ### Features

package/dist/Banner.js

@@ -10,9 +10,9 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 import { memo } from "react";
-import { Alert, Link } from "./index.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { Alert, Link, visuallyHidden } from "./index.js";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 
 const Banner = _ref => {
   let {
@@ -28,7 +28,10 @@ const Banner = _ref => {
     role: role,
     severity: severity,
     variant: "banner",
-    children: [text, linkUrl && _jsx(Link, {
+    children: [_jsxs("span", {
+      style: visuallyHidden,
+      children: [severity, ":"]
+    }), text, linkUrl && _jsx(Link, {
       href: linkUrl,
       variant: "monochrome",
       children: linkText

package/dist/Banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.js","names":["memo","Alert","Link","Banner","onClose","severity","role","linkUrl","linkText","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 } from \"./\";\n\nexport interface BannerProps {\n  /**\n   * Determine the color and icon of the alert\n   */\n  severity: AlertColor;\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   * The text content of the alert\n   */\n  text: 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   * If defined, the alert will include a link to the URL\n   */\n  linkUrl?: string;\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\nconst Banner = ({\n  onClose,\n  severity,\n  role,\n  linkUrl,\n  linkText,\n  text,\n}: BannerProps) => (\n  <Alert onClose={onClose} role={role} severity={severity} variant=\"banner\">\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;;;;AAkChB,MAAMC,MAAM,GAAG;EAAA,IAAC;IACdC,OADc;IAEdC,QAFc;IAGdC,IAHc;IAIdC,OAJc;IAKdC,QALc;IAMdC;EANc,CAAD;EAAA,OAQb,MAAC,KAAD;IAAO,OAAO,EAAEL,OAAhB;IAAyB,IAAI,EAAEE,IAA/B;IAAqC,QAAQ,EAAED,QAA/C;IAAyD,OAAO,EAAC,QAAjE;IAAA,WACGI,IADH,EAEGF,OAAO,IACN,KAAC,IAAD;MAAM,IAAI,EAAEA,OAAZ;MAAqB,OAAO,EAAC,YAA7B;MAAA,UACGC;IADH,EAHJ;EAAA,EARa;AAAA,CAAf;;AAkBA,MAAME,cAAc,GAAGV,IAAI,CAACG,MAAD,CAA3B;AAEA,SAASO,cAAc,IAAIP,MAA3B"}
+{"version":3,"file":"Banner.js","names":["memo","Alert","Link","visuallyHidden","Banner","onClose","severity","role","linkUrl","linkText","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, visuallyHidden } from \"./\";\n\nexport interface BannerProps {\n  /**\n   * Determine the color and icon of the alert\n   */\n  severity: AlertColor;\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   * The text content of the alert\n   */\n  text: 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   * If defined, the alert will include a link to the URL\n   */\n  linkUrl?: string;\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\nconst Banner = ({\n  onClose,\n  severity,\n  role,\n  linkUrl,\n  linkText,\n  text,\n}: BannerProps) => (\n  <Alert onClose={onClose} role={role} severity={severity} variant=\"banner\">\n    <span style={visuallyHidden}>{severity}:</span>\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,c;;;;AAkCtB,MAAMC,MAAM,GAAG;EAAA,IAAC;IACdC,OADc;IAEdC,QAFc;IAGdC,IAHc;IAIdC,OAJc;IAKdC,QALc;IAMdC;EANc,CAAD;EAAA,OAQb,MAAC,KAAD;IAAO,OAAO,EAAEL,OAAhB;IAAyB,IAAI,EAAEE,IAA/B;IAAqC,QAAQ,EAAED,QAA/C;IAAyD,OAAO,EAAC,QAAjE;IAAA,WACE;MAAM,KAAK,EAAEH,cAAb;MAAA,WAA8BG,QAA9B;IAAA,EADF,EAEGI,IAFH,EAGGF,OAAO,IACN,KAAC,IAAD;MAAM,IAAI,EAAEA,OAAZ;MAAqB,OAAO,EAAC,YAA7B;MAAA,UACGC;IADH,EAJJ;EAAA,EARa;AAAA,CAAf;;AAmBA,MAAME,cAAc,GAAGX,IAAI,CAACI,MAAD,CAA3B;AAEA,SAASO,cAAc,IAAIP,MAA3B"}

package/dist/Infobox.js

@@ -10,9 +10,9 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 import { memo } from "react";
-import { Alert, AlertTitle } from "./index.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { Alert, AlertTitle, visuallyHidden } from "./index.js";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 
 const Infobox = _ref => {
   let {
@@ -25,7 +25,10 @@ const Infobox = _ref => {
     role: role,
     severity: severity,
     variant: "infobox",
-    children: [title && _jsx(AlertTitle, {
+    children: [_jsxs("span", {
+      style: visuallyHidden,
+      children: [severity, ": "]
+    }), title && _jsx(AlertTitle, {
       children: title
     }), children]
   });

package/dist/Infobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Infobox.js","names":["memo","Alert","AlertTitle","Infobox","children","severity","role","title","MemoizedInfobox"],"sources":["../src/Infobox.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 } from \"@mui/material\";\nimport { memo, ReactNode } from \"react\";\nimport { Alert, AlertTitle } from \".\";\n\nexport interface InfoboxProps {\n  /**\n   * The contents of the alert\n   */\n  children: ReactNode;\n  /**\n   * Determine the color and icon of the alert\n   */\n  severity: AlertColor;\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   * The title of the alert\n   */\n  title?: string;\n}\n\nconst Infobox = ({ children, severity, role, title }: InfoboxProps) => (\n  <Alert role={role} severity={severity} variant=\"infobox\">\n    {title && <AlertTitle>{title}</AlertTitle>}\n    {children}\n  </Alert>\n);\n\nconst MemoizedInfobox = memo(Infobox);\n\nexport { MemoizedInfobox as Infobox };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,SAASA,IAAT,QAAgC,OAAhC;SACSC,K,EAAOC,U;;;;AAuBhB,MAAMC,OAAO,GAAG;EAAA,IAAC;IAAEC,QAAF;IAAYC,QAAZ;IAAsBC,IAAtB;IAA4BC;EAA5B,CAAD;EAAA,OACd,MAAC,KAAD;IAAO,IAAI,EAAED,IAAb;IAAmB,QAAQ,EAAED,QAA7B;IAAuC,OAAO,EAAC,SAA/C;IAAA,WACGE,KAAK,IAAI,KAAC,UAAD;MAAA,UAAaA;IAAb,EADZ,EAEGH,QAFH;EAAA,EADc;AAAA,CAAhB;;AAOA,MAAMI,eAAe,GAAGR,IAAI,CAACG,OAAD,CAA5B;AAEA,SAASK,eAAe,IAAIL,OAA5B"}
+{"version":3,"file":"Infobox.js","names":["memo","Alert","AlertTitle","visuallyHidden","Infobox","children","severity","role","title","MemoizedInfobox"],"sources":["../src/Infobox.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 } from \"@mui/material\";\nimport { memo, ReactNode } from \"react\";\nimport { Alert, AlertTitle, visuallyHidden } from \".\";\n\nexport interface InfoboxProps {\n  /**\n   * The contents of the alert\n   */\n  children: ReactNode;\n  /**\n   * Determine the color and icon of the alert\n   */\n  severity: AlertColor;\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   * The title of the alert\n   */\n  title?: string;\n}\n\nconst Infobox = ({ children, severity, role, title }: InfoboxProps) => (\n  <Alert role={role} severity={severity} variant=\"infobox\">\n    <span style={visuallyHidden}>{severity}: </span>\n    {title && <AlertTitle>{title}</AlertTitle>}\n    {children}\n  </Alert>\n);\n\nconst MemoizedInfobox = memo(Infobox);\n\nexport { MemoizedInfobox as Infobox };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,SAASA,IAAT,QAAgC,OAAhC;SACSC,K,EAAOC,U,EAAYC,c;;;;AAuB5B,MAAMC,OAAO,GAAG;EAAA,IAAC;IAAEC,QAAF;IAAYC,QAAZ;IAAsBC,IAAtB;IAA4BC;EAA5B,CAAD;EAAA,OACd,MAAC,KAAD;IAAO,IAAI,EAAED,IAAb;IAAmB,QAAQ,EAAED,QAA7B;IAAuC,OAAO,EAAC,SAA/C;IAAA,WACE;MAAM,KAAK,EAAEH,cAAb;MAAA,WAA8BG,QAA9B;IAAA,EADF,EAEGE,KAAK,IAAI,KAAC,UAAD;MAAA,UAAaA;IAAb,EAFZ,EAGGH,QAHH;EAAA,EADc;AAAA,CAAhB;;AAQA,MAAMI,eAAe,GAAGT,IAAI,CAACI,OAAD,CAA5B;AAEA,SAASK,eAAe,IAAIL,OAA5B"}

package/dist/TextField.js

@@ -8,6 +8,7 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 const TextField = forwardRef((_ref, ref) => {
   let {
     autoCompleteType,
+    autoFocus,
     endAdornment,
     errorMessage,
     hint,
@@ -59,7 +60,8 @@ const TextField = forwardRef((_ref, ref) => {
       children: hint
     }), _jsx(_InputBase, {
       autoComplete: autoCompleteType,
-      endAdornment: inputType === "password" ? _jsx(_InputAdornment, {
+      autoFocus: autoFocus,
+      endAdornment: type === "password" ? _jsx(_InputAdornment, {
         position: "end",
         children: _jsx(IconButton, {
           "aria-label": "toggle password visibility",

package/dist/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","names":["forwardRef","memo","useCallback","useEffect","useMemo","useState","EyeIcon","EyeOffIcon","FormControl","FormHelperText","IconButton","SearchIcon","Typography","useUniqueId","visuallyHidden","TextField","ref","autoCompleteType","endAdornment","errorMessage","hint","id","idOverride","inputProps","isDisabled","isMultiline","isReadOnly","isRequired","label","onChange","onFocus","onBlur","optionalLabel","placeholder","startAdornment","type","value","inputType","setInputType","togglePasswordVisibility","currentType","hintId","undefined","errorId","labelId","localInputProps","ariaDescribedBy","concat","Boolean","MemoizedTextField"],"sources":["../src/TextField.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  InputAdornment,\n  InputBase,\n  InputBaseProps,\n  InputLabel,\n} from \"@mui/material\";\nimport {\n  ChangeEventHandler,\n  FocusEventHandler,\n  forwardRef,\n  InputHTMLAttributes,\n  memo,\n  ReactNode,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\n\nimport {\n  EyeIcon,\n  EyeOffIcon,\n  FormControl,\n  FormHelperText,\n  IconButton,\n  SearchIcon,\n  Typography,\n  useUniqueId,\n  visuallyHidden,\n} from \"./\";\n\nexport type TextFieldProps = {\n  /**\n   * This prop helps users to fill forms faster, especially on mobile devices.\n   * The name can be confusing, as it's more like an autofill.\n   * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).\n   */\n  autoCompleteType?: InputHTMLAttributes<HTMLInputElement>[\"autoComplete\"];\n  /**\n   * End `InputAdornment` for this component.\n   */\n  endAdornment?: ReactNode;\n  /**\n   * If `error` is not undefined, the `input` will indicate an error.\n   */\n  errorMessage?: string;\n  /**\n   * The helper text content.\n   */\n  hint?: string;\n  /**\n   * The id of the `input` element.\n   */\n  id?: string;\n  /**\n   * Props that go onto the HTML `input` element.\n   */\n  inputProps?: InputBaseProps[\"inputProps\"];\n  /**\n   * If `true`, the component is disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * If `true`, a [TextareaAutosize](/material-ui/react-textarea-autosize/) element is rendered.\n   */\n  isMultiline?: boolean;\n  /**\n   * It prevents the user from changing the value of the field\n   */\n  isReadOnly?: boolean;\n  /**\n   * If `true`, the `input` element is required.\n   */\n  isRequired?: boolean;\n  /**\n   * The label for the `input` element.\n   */\n  label?: string;\n  /**\n   * Callback fired when the `input` element loses focus.\n   */\n  onBlur?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  /**\n   * Callback fired when the value is changed.\n   */\n  onChange?: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;\n  /**\n   * Callback fired when the `input` element get focus.\n   */\n  onFocus?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  /**\n   * The label for the `input` element if the it's not optional\n   */\n  optionalLabel?: string;\n  /**\n   * The short hint displayed in the `input` before the user enters a value.\n   */\n  placeholder?: string;\n  /**\n   * Start `InputAdornment` for this component.\n   */\n  startAdornment?: ReactNode;\n  /**\n   * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).\n   */\n  type?: string;\n  /**\n   * The value of the `input` element, required for a controlled component.\n   */\n  value?: unknown;\n};\n\nconst TextField = forwardRef<HTMLInputElement, TextFieldProps>(\n  (\n    {\n      autoCompleteType,\n      endAdornment,\n      errorMessage,\n      hint,\n      id: idOverride,\n      inputProps = {},\n      isDisabled = false,\n      isMultiline = false,\n      isReadOnly,\n      isRequired = true,\n      label,\n      onChange,\n      onFocus,\n      onBlur,\n      optionalLabel,\n      placeholder,\n      startAdornment,\n      type = \"text\",\n      value,\n    },\n    ref\n  ) => {\n    const [inputType, setInputType] = useState(type);\n\n    useEffect(() => {\n      setInputType(type);\n    }, [type]);\n\n    const togglePasswordVisibility = useCallback(() => {\n      setInputType((currentType) =>\n        currentType === \"password\" ? \"text\" : \"password\"\n      );\n    }, []);\n\n    const id = useUniqueId(idOverride);\n    const hintId = hint ? `${id}-hint` : undefined;\n    const errorId = errorMessage ? `${id}-error` : undefined;\n    const labelId = label ? `${id}-label` : undefined;\n\n    const localInputProps = useMemo(() => {\n      const ariaDescribedBy =\n        errorId && hintId ? `${hintId} ${errorId}` : errorId || hintId;\n\n      return {\n        ...inputProps,\n        \"aria-describedby\":\n          inputProps[\"aria-describedby\"]?.concat(` ${ariaDescribedBy}`) ??\n          ariaDescribedBy,\n      };\n    }, [errorId, hintId, inputProps]);\n\n    return (\n      <FormControl disabled={isDisabled} error={Boolean(errorMessage)}>\n        <InputLabel htmlFor={id} id={labelId}>\n          {label}\n          {!isRequired && (\n            <Typography variant=\"subtitle1\">{optionalLabel}</Typography>\n          )}\n        </InputLabel>\n        {hint && <FormHelperText id={hintId}>{hint}</FormHelperText>}\n        <InputBase\n          autoComplete={autoCompleteType}\n          endAdornment={\n            inputType === \"password\" ? (\n              <InputAdornment position=\"end\">\n                <IconButton\n                  aria-label=\"toggle password visibility\"\n                  edge=\"end\"\n                  onClick={togglePasswordVisibility}\n                >\n                  {inputType === \"password\" ? <EyeIcon /> : <EyeOffIcon />}\n                </IconButton>\n              </InputAdornment>\n            ) : (\n              endAdornment\n            )\n          }\n          id={id}\n          inputProps={localInputProps}\n          multiline={isMultiline}\n          onChange={onChange}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          placeholder={placeholder}\n          readOnly={isReadOnly}\n          ref={ref}\n          startAdornment={\n            inputType === \"search\" ? (\n              <InputAdornment position=\"start\">\n                <SearchIcon />\n              </InputAdornment>\n            ) : (\n              startAdornment\n            )\n          }\n          type={inputType}\n          value={value}\n        />\n        {errorMessage && (\n          <FormHelperText error id={errorId}>\n            <span style={visuallyHidden}>Error:</span>\n            {errorMessage}\n          </FormHelperText>\n        )}\n      </FormControl>\n    );\n  }\n);\n\nconst MemoizedTextField = memo(TextField);\n\nexport { MemoizedTextField as TextField };\n"],"mappings":"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"}
+{"version":3,"file":"TextField.js","names":["forwardRef","memo","useCallback","useEffect","useMemo","useState","EyeIcon","EyeOffIcon","FormControl","FormHelperText","IconButton","SearchIcon","Typography","useUniqueId","visuallyHidden","TextField","ref","autoCompleteType","autoFocus","endAdornment","errorMessage","hint","id","idOverride","inputProps","isDisabled","isMultiline","isReadOnly","isRequired","label","onChange","onFocus","onBlur","optionalLabel","placeholder","startAdornment","type","value","inputType","setInputType","togglePasswordVisibility","currentType","hintId","undefined","errorId","labelId","localInputProps","ariaDescribedBy","concat","Boolean","MemoizedTextField"],"sources":["../src/TextField.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  InputAdornment,\n  InputBase,\n  InputBaseProps,\n  InputLabel,\n} from \"@mui/material\";\nimport {\n  ChangeEventHandler,\n  FocusEventHandler,\n  forwardRef,\n  InputHTMLAttributes,\n  memo,\n  ReactNode,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\n\nimport {\n  EyeIcon,\n  EyeOffIcon,\n  FormControl,\n  FormHelperText,\n  IconButton,\n  SearchIcon,\n  Typography,\n  useUniqueId,\n  visuallyHidden,\n} from \"./\";\n\nexport type TextFieldProps = {\n  /**\n   * If `true`, the component will receive focus automatically.\n   */\n  autoFocus?: boolean;\n  /**\n   * This prop helps users to fill forms faster, especially on mobile devices.\n   * The name can be confusing, as it's more like an autofill.\n   * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).\n   */\n  autoCompleteType?: InputHTMLAttributes<HTMLInputElement>[\"autoComplete\"];\n  /**\n   * End `InputAdornment` for this component.\n   */\n  endAdornment?: ReactNode;\n  /**\n   * If `error` is not undefined, the `input` will indicate an error.\n   */\n  errorMessage?: string;\n  /**\n   * The helper text content.\n   */\n  hint?: string;\n  /**\n   * The id of the `input` element.\n   */\n  id?: string;\n  /**\n   * Props that go onto the HTML `input` element.\n   */\n  inputProps?: InputBaseProps[\"inputProps\"];\n  /**\n   * If `true`, the component is disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * If `true`, a [TextareaAutosize](/material-ui/react-textarea-autosize/) element is rendered.\n   */\n  isMultiline?: boolean;\n  /**\n   * It prevents the user from changing the value of the field\n   */\n  isReadOnly?: boolean;\n  /**\n   * If `true`, the `input` element is required.\n   */\n  isRequired?: boolean;\n  /**\n   * The label for the `input` element.\n   */\n  label?: string;\n  /**\n   * Callback fired when the `input` element loses focus.\n   */\n  onBlur?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  /**\n   * Callback fired when the value is changed.\n   */\n  onChange?: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;\n  /**\n   * Callback fired when the `input` element get focus.\n   */\n  onFocus?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  /**\n   * The label for the `input` element if the it's not optional\n   */\n  optionalLabel?: string;\n  /**\n   * The short hint displayed in the `input` before the user enters a value.\n   */\n  placeholder?: string;\n  /**\n   * Start `InputAdornment` for this component.\n   */\n  startAdornment?: ReactNode;\n  /**\n   * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).\n   */\n  type?: string;\n  /**\n   * The value of the `input` element, required for a controlled component.\n   */\n  value?: unknown;\n};\n\nconst TextField = forwardRef<HTMLInputElement, TextFieldProps>(\n  (\n    {\n      autoCompleteType,\n      autoFocus,\n      endAdornment,\n      errorMessage,\n      hint,\n      id: idOverride,\n      inputProps = {},\n      isDisabled = false,\n      isMultiline = false,\n      isReadOnly,\n      isRequired = true,\n      label,\n      onChange,\n      onFocus,\n      onBlur,\n      optionalLabel,\n      placeholder,\n      startAdornment,\n      type = \"text\",\n      value,\n    },\n    ref\n  ) => {\n    const [inputType, setInputType] = useState(type);\n\n    useEffect(() => {\n      setInputType(type);\n    }, [type]);\n\n    const togglePasswordVisibility = useCallback(() => {\n      setInputType((currentType) =>\n        currentType === \"password\" ? \"text\" : \"password\"\n      );\n    }, []);\n\n    const id = useUniqueId(idOverride);\n    const hintId = hint ? `${id}-hint` : undefined;\n    const errorId = errorMessage ? `${id}-error` : undefined;\n    const labelId = label ? `${id}-label` : undefined;\n\n    const localInputProps = useMemo(() => {\n      const ariaDescribedBy =\n        errorId && hintId ? `${hintId} ${errorId}` : errorId || hintId;\n\n      return {\n        ...inputProps,\n        \"aria-describedby\":\n          inputProps[\"aria-describedby\"]?.concat(` ${ariaDescribedBy}`) ??\n          ariaDescribedBy,\n      };\n    }, [errorId, hintId, inputProps]);\n\n    return (\n      <FormControl disabled={isDisabled} error={Boolean(errorMessage)}>\n        <InputLabel htmlFor={id} id={labelId}>\n          {label}\n          {!isRequired && (\n            <Typography variant=\"subtitle1\">{optionalLabel}</Typography>\n          )}\n        </InputLabel>\n        {hint && <FormHelperText id={hintId}>{hint}</FormHelperText>}\n        <InputBase\n          autoComplete={autoCompleteType}\n          /* eslint-disable-next-line jsx-a11y/no-autofocus */\n          autoFocus={autoFocus}\n          endAdornment={\n            type === \"password\" ? (\n              <InputAdornment position=\"end\">\n                <IconButton\n                  aria-label=\"toggle password visibility\"\n                  edge=\"end\"\n                  onClick={togglePasswordVisibility}\n                >\n                  {inputType === \"password\" ? <EyeIcon /> : <EyeOffIcon />}\n                </IconButton>\n              </InputAdornment>\n            ) : (\n              endAdornment\n            )\n          }\n          id={id}\n          inputProps={localInputProps}\n          multiline={isMultiline}\n          onChange={onChange}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          placeholder={placeholder}\n          readOnly={isReadOnly}\n          ref={ref}\n          startAdornment={\n            inputType === \"search\" ? (\n              <InputAdornment position=\"start\">\n                <SearchIcon />\n              </InputAdornment>\n            ) : (\n              startAdornment\n            )\n          }\n          type={inputType}\n          value={value}\n        />\n        {errorMessage && (\n          <FormHelperText error id={errorId}>\n            <span style={visuallyHidden}>Error:</span>\n            {errorMessage}\n          </FormHelperText>\n        )}\n      </FormControl>\n    );\n  }\n);\n\nconst MemoizedTextField = memo(TextField);\n\nexport { MemoizedTextField as TextField };\n"],"mappings":";;;AAkBA,SAGEA,UAHF,EAKEC,IALF,EAOEC,WAPF,EAQEC,SARF,EASEC,OATF,EAUEC,QAVF,QAWO,OAXP;SAcEC,O,EACAC,U,EACAC,W,EACAC,c,EACAC,U,EACAC,U,EACAC,U,EACAC,W,EACAC,c;;;AAwFF,MAAMC,SAAS,GAAGf,UAAU,CAC1B,OAuBEgB,GAvBF,KAwBK;EAAA,IAvBH;IACEC,gBADF;IAEEC,SAFF;IAGEC,YAHF;IAIEC,YAJF;IAKEC,IALF;IAMEC,EAAE,EAAEC,UANN;IAOEC,UAAU,GAAG,EAPf;IAQEC,UAAU,GAAG,KARf;IASEC,WAAW,GAAG,KAThB;IAUEC,UAVF;IAWEC,UAAU,GAAG,IAXf;IAYEC,KAZF;IAaEC,QAbF;IAcEC,OAdF;IAeEC,MAfF;IAgBEC,aAhBF;IAiBEC,WAjBF;IAkBEC,cAlBF;IAmBEC,IAAI,GAAG,MAnBT;IAoBEC;EApBF,CAuBG;EACH,MAAM,CAACC,SAAD,EAAYC,YAAZ,IAA4BlC,QAAQ,CAAC+B,IAAD,CAA1C;EAEAjC,SAAS,CAAC,MAAM;IACdoC,YAAY,CAACH,IAAD,CAAZ;EACD,CAFQ,EAEN,CAACA,IAAD,CAFM,CAAT;EAIA,MAAMI,wBAAwB,GAAGtC,WAAW,CAAC,MAAM;IACjDqC,YAAY,CAAEE,WAAD,IACXA,WAAW,KAAK,UAAhB,GAA6B,MAA7B,GAAsC,UAD5B,CAAZ;EAGD,CAJ2C,EAIzC,EAJyC,CAA5C;EAMA,MAAMnB,EAAE,GAAGT,WAAW,CAACU,UAAD,CAAtB;EACA,MAAMmB,MAAM,GAAGrB,IAAI,GAAI,GAAEC,EAAG,OAAT,GAAkBqB,SAArC;EACA,MAAMC,OAAO,GAAGxB,YAAY,GAAI,GAAEE,EAAG,QAAT,GAAmBqB,SAA/C;EACA,MAAME,OAAO,GAAGhB,KAAK,GAAI,GAAEP,EAAG,QAAT,GAAmBqB,SAAxC;EAEA,MAAMG,eAAe,GAAG1C,OAAO,CAAC,MAAM;IACpC,MAAM2C,eAAe,GACnBH,OAAO,IAAIF,MAAX,GAAqB,GAAEA,MAAO,IAAGE,OAAQ,EAAzC,GAA6CA,OAAO,IAAIF,MAD1D;IAGA,OAAO,EACL,GAAGlB,UADE;MAEL,oBACEA,UAAU,CAAC,kBAAD,CAAV,EAAgCwB,MAAhC,CAAwC,IAAGD,eAAgB,EAA3D,KACAA;IAJG,CAAP;EAMD,CAV8B,EAU5B,CAACH,OAAD,EAAUF,MAAV,EAAkBlB,UAAlB,CAV4B,CAA/B;EAYA,OACE,MAAC,WAAD;IAAa,QAAQ,EAAEC,UAAvB;IAAmC,KAAK,EAAEwB,OAAO,CAAC7B,YAAD,CAAjD;IAAA,WACE;MAAY,OAAO,EAAEE,EAArB;MAAyB,EAAE,EAAEuB,OAA7B;MAAA,WACGhB,KADH,EAEG,CAACD,UAAD,IACC,KAAC,UAAD;QAAY,OAAO,EAAC,WAApB;QAAA,UAAiCK;MAAjC,EAHJ;IAAA,EADF,EAOGZ,IAAI,IAAI,KAAC,cAAD;MAAgB,EAAE,EAAEqB,MAApB;MAAA,UAA6BrB;IAA7B,EAPX,EAQE;MACE,YAAY,EAAEJ,gBADhB;MAGE,SAAS,EAAEC,SAHb;MAIE,YAAY,EACVkB,IAAI,KAAK,UAAT,GACE;QAAgB,QAAQ,EAAC,KAAzB;QAAA,UACE,KAAC,UAAD;UACE,cAAW,4BADb;UAEE,IAAI,EAAC,KAFP;UAGE,OAAO,EAAEI,wBAHX;UAAA,UAKGF,SAAS,KAAK,UAAd,GAA2B,KAAC,OAAD,KAA3B,GAAyC,KAAC,UAAD;QAL5C;MADF,EADF,GAWEnB,YAhBN;MAmBE,EAAE,EAAEG,EAnBN;MAoBE,UAAU,EAAEwB,eApBd;MAqBE,SAAS,EAAEpB,WArBb;MAsBE,QAAQ,EAAEI,QAtBZ;MAuBE,OAAO,EAAEC,OAvBX;MAwBE,MAAM,EAAEC,MAxBV;MAyBE,WAAW,EAAEE,WAzBf;MA0BE,QAAQ,EAAEP,UA1BZ;MA2BE,GAAG,EAAEX,GA3BP;MA4BE,cAAc,EACZsB,SAAS,KAAK,QAAd,GACE;QAAgB,QAAQ,EAAC,OAAzB;QAAA,UACE,KAAC,UAAD;MADF,EADF,GAKEH,cAlCN;MAqCE,IAAI,EAAEG,SArCR;MAsCE,KAAK,EAAED;IAtCT,EARF,EAgDGjB,YAAY,IACX,MAAC,cAAD;MAAgB,KAAK,MAArB;MAAsB,EAAE,EAAEwB,OAA1B;MAAA,WACE;QAAM,KAAK,EAAE9B,cAAb;QAAA;MAAA,EADF,EAEGM,YAFH;IAAA,EAjDJ;EAAA,EADF;AAyDD,CAhHyB,CAA5B;AAmHA,MAAM8B,iBAAiB,GAAGjD,IAAI,CAACc,SAAD,CAA9B;AAEA,SAASmC,iBAAiB,IAAInC,SAA9B"}

package/dist/src/Banner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../src/Banner.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;;AAEH,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAIvD,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,QAAQ,EAAE,UAAU,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;IAChC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAoBD,QAAA,MAAM,cAAc,8FAXjB,WAAW,iBAWqB,CAAC;AAEpC,OAAO,EAAE,cAAc,IAAI,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../src/Banner.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;;AAEH,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAIvD,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,QAAQ,EAAE,UAAU,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;IAChC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAqBD,QAAA,MAAM,cAAc,8FAZjB,WAAW,iBAYqB,CAAC;AAEpC,OAAO,EAAE,cAAc,IAAI,MAAM,EAAE,CAAC"}

package/dist/src/Infobox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Infobox.d.ts","sourceRoot":"","sources":["../../src/Infobox.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAQ,SAAS,EAAE,MAAM,OAAO,CAAC;AAGxC,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,QAAQ,EAAE,UAAU,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AASD,QAAA,MAAM,eAAe,4EAPiC,YAAY,iBAO7B,CAAC;AAEtC,OAAO,EAAE,eAAe,IAAI,OAAO,EAAE,CAAC"}
+{"version":3,"file":"Infobox.d.ts","sourceRoot":"","sources":["../../src/Infobox.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAQ,SAAS,EAAE,MAAM,OAAO,CAAC;AAGxC,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,QAAQ,EAAE,UAAU,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAUD,QAAA,MAAM,eAAe,4EARiC,YAAY,iBAQ7B,CAAC;AAEtC,OAAO,EAAE,eAAe,IAAI,OAAO,EAAE,CAAC"}

package/dist/src/TextField.d.ts

@@ -12,6 +12,10 @@
 import { InputBaseProps } from "@mui/material";
 import { ChangeEventHandler, FocusEventHandler, InputHTMLAttributes, ReactNode } from "react";
 export type TextFieldProps = {
+    /**
+     * If `true`, the component will receive focus automatically.
+     */
+    autoFocus?: boolean;
     /**
      * This prop helps users to fill forms faster, especially on mobile devices.
      * The name can be confusing, as it's more like an autofill.

package/dist/src/TextField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../src/TextField.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAGL,cAAc,EAEf,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,kBAAkB,EAClB,iBAAiB,EAEjB,mBAAmB,EAEnB,SAAS,EAKV,MAAM,OAAO,CAAC;AAcf,MAAM,MAAM,cAAc,GAAG;IAC3B;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,mBAAmB,CAAC,gBAAgB,CAAC,CAAC,cAAc,CAAC,CAAC;IACzE;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC,YAAY,CAAC,CAAC;IAC1C;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,CAAC;IACnE;;OAEG;IACH,QAAQ,CAAC,EAAE,kBAAkB,CAAC,mBAAmB,GAAG,gBAAgB,CAAC,CAAC;IACtE;;OAEG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,CAAC;IACpE;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAkHF,QAAA,MAAM,iBAAiB,kJAAkB,CAAC;AAE1C,OAAO,EAAE,iBAAiB,IAAI,SAAS,EAAE,CAAC"}
+{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../src/TextField.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAGL,cAAc,EAEf,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,kBAAkB,EAClB,iBAAiB,EAEjB,mBAAmB,EAEnB,SAAS,EAKV,MAAM,OAAO,CAAC;AAcf,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,mBAAmB,CAAC,gBAAgB,CAAC,CAAC,cAAc,CAAC,CAAC;IACzE;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC,YAAY,CAAC,CAAC;IAC1C;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,CAAC;IACnE;;OAEG;IACH,QAAQ,CAAC,EAAE,kBAAkB,CAAC,mBAAmB,GAAG,gBAAgB,CAAC,CAAC;IACtE;;OAEG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,CAAC;IACpE;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAqHF,QAAA,MAAM,iBAAiB,kJAAkB,CAAC;AAE1C,OAAO,EAAE,iBAAiB,IAAI,SAAS,EAAE,CAAC"}

package/dist/src/theme/components.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../src/theme/components.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AA4B7C,eAAO,MAAM,UAAU,EAAE,YAAY,CAAC,YAAY,CAwyDjD,CAAC"}
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../src/theme/components.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AA4B7C,eAAO,MAAM,UAAU,EAAE,YAAY,CAAC,YAAY,CAmxDjD,CAAC"}

package/dist/theme/components.js

@@ -193,9 +193,6 @@ export const components = {
           "&:hover, &:focus-visible": {
             backgroundColor: theme.palette.primary.dark
           },
-          "&:focus-visible": {
-            outlineColor: theme.palette.primary.main
-          },
           "&:active": {
             backgroundColor: theme.palette.primary.main
           },
@@ -222,9 +219,6 @@ export const components = {
             borderColor: theme.palette.primary.light,
             color: theme.palette.primary.main
           },
-          "&:focus-visible": {
-            outlineColor: theme.palette.primary.main
-          },
           "&:active": {
             borderColor: theme.palette.primary.main
           },
@@ -251,7 +245,7 @@ export const components = {
             backgroundColor: theme.palette.error.dark
           },
           "&:focus-visible": {
-            outlineColor: theme.palette.error.main,
+            boxShadow: `0 0 0 2px ${theme.palette.background.default}, 0 0 0 4px ${theme.palette.error.main}`,
             backgroundColor: theme.palette.error.dark
           },
           "&:active": {
@@ -279,15 +273,12 @@ export const components = {
             backgroundColor: "rgba(29, 29, 33, 0.1)",
             borderColor: "transparent"
           },
-          "&:focus-visible": {
-            outlineColor: theme.palette.primary.main
-          },
           "&:active": {
             backgroundColor: "rgba(29, 29, 33, 0.2)",
             borderColor: "transparent"
           },
           "&:disabled": {
-            backgroundColor: "rgba(235, 235, 237, 0.6)",
+            backgroundColor: "transparent",
             color: theme.palette.text.secondary,
             borderColor: "transparent"
           }
@@ -362,14 +353,12 @@ export const components = {
           position: "relative",
           marginBlock: "0",
           marginInline: "0",
-          transitionProperty: "color, background-color, border-color, outline-offset, outline-color",
+          transitionProperty: "color, background-color, border-color, box-shadow",
           transitionDuration: "100ms",
           transitionTimingFunction: "linear",
           borderWidth: theme.mixins.borderWidth,
           borderStyle: theme.mixins.borderStyle,
           borderRadius: theme.mixins.borderRadius,
-          outlineColor: "transparent",
-          outlineOffset: "0",
           fontSize: theme.typography.body1.fontSize,
           lineHeight: theme.typography.ui.lineHeight,
           whiteSpace: "nowrap",
@@ -377,9 +366,9 @@ export const components = {
             marginInlineStart: theme.spacing(2)
           },
           "&:focus-visible": {
-            outlineOffset: "2px",
-            outlineStyle: "solid",
-            outlineWidth: "2px"
+            boxShadow: `0 0 0 2px ${theme.palette.background.default}, 0 0 0 4px ${theme.palette.primary.main}`,
+            outline: "2px solid transparent",
+            outlineOffset: "1px"
           },
           "&:disabled": {
             cursor: "not-allowed",
@@ -452,12 +441,6 @@ export const components = {
             "&:hover": {
               color: theme.palette.error.dark
             }
-          },
-          "&.Mui-focusVisible": {
-            outlineColor: theme.palette.primary.main,
-            outlineOffset: 0,
-            outlineStyle: "solid",
-            outlineWidth: "2px"
           }
         };
       }
@@ -762,7 +745,7 @@ export const components = {
               content: "attr(data-a11y-end)"
             }
           },
-          p: {
+          "p:not([class])": {
             maxWidth: theme.mixins.maxWidth,
             marginBlockStart: 0,
             marginBlockEnd: theme.spacing(4),
@@ -1038,14 +1021,14 @@ export const components = {
         return {
           fontSize: theme.typography.subtitle1.fontSize,
           lineHeight: "1.33333333",
-          marginTop: theme.spacing(2),
+          marginBlockStart: theme.spacing(2),
           ".MuiFormLabel-root + &": {
-            marginTop: `-${theme.spacing(1)}`,
+            marginBlockStart: `-${theme.spacing(1)}`,
             color: theme.palette.text.secondary
           },
-          marginBottom: theme.spacing(2),
+          marginBlockEnd: theme.spacing(2),
           "&:last-child": {
-            marginBottom: 0
+            marginBlockEnd: 0
           },
           textAlign: "start"
         };
@@ -1186,10 +1169,9 @@ export const components = {
           },
           [`&.${inputBaseClasses.focused}`]: {
             borderColor: theme.palette.primary.main,
-            outlineColor: theme.palette.primary.main,
-            outlineOffset: 0,
-            outlineStyle: "solid",
-            outlineWidth: "1px"
+            boxShadow: `0 0 0 1px ${theme.palette.primary.main}`,
+            outline: "2px solid transparent",
+            outlineOffset: "1px"
           },
           [`&.${inputBaseClasses.error}`]: {
             borderColor: theme.palette.error.main
@@ -1199,7 +1181,7 @@ export const components = {
           },
           [`&.${inputBaseClasses.error}.${inputBaseClasses.focused}`]: {
             borderColor: theme.palette.error.main,
-            outlineColor: theme.palette.error.main
+            boxShadow: `0 0 0 1px ${theme.palette.error.main}`
           },
           [`&.${inputBaseClasses.disabled}`]: {
             color: theme.palette.text.disabled,