@okta/odyssey-react-mui 0.21.1 → 0.21.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -3,6 +3,30 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [0.21.3](https://github.com/okta/odyssey/compare/v0.21.2...v0.21.3) (2023-04-06)
7
+
8
+ ### Features
9
+
10
+ - add Odyssey styles to Radio and Checkbox ([39ebde0](https://github.com/okta/odyssey/commit/39ebde08d4cb83f933a98d79000ac23ad15c12c9))
11
+ - **odyssey-react-mui:** add transitions to form controls, update state ui ([7388c00](https://github.com/okta/odyssey/commit/7388c00e5ca112ff12d429e45996ab5aa557a36a))
12
+
13
+ ### Bug Fixes
14
+
15
+ - **odyssey-react-mui:** make text disabled color more a11y-friendly ([372a010](https://github.com/okta/odyssey/commit/372a010b934efc8421c42c8fa7d3a9323af8182f))
16
+ - upgraded loader-utils and fastify for security ([#1734](https://github.com/okta/odyssey/issues/1734)) ([d6f3d27](https://github.com/okta/odyssey/commit/d6f3d27daefd1994059463ad33f9adceb35e36a0))
17
+
18
+ ## [0.21.2](https://github.com/okta/odyssey/compare/v0.21.1...v0.21.2) (2023-03-30)
19
+
20
+ ### Features
21
+
22
+ - add context to Banner and Infobox ([18b277c](https://github.com/okta/odyssey/commit/18b277c949065ad659508a75e04125637bc5308c))
23
+ - add missing autoFocus from TextField ([d01dcd4](https://github.com/okta/odyssey/commit/d01dcd4120017d16677ae870c3d1e0f7d1b13b47))
24
+
25
+ ### Bug Fixes
26
+
27
+ - **odyssey-react-mui:** fix Button, Floating, Disabled bg color ([a9c332a](https://github.com/okta/odyssey/commit/a9c332a85e3b4162bf68837978028081ef2133f7))
28
+ - **odyssey-react-mui:** fixes spacing for Hint/Error field helpers ([846134e](https://github.com/okta/odyssey/commit/846134efcdf9cd8c62932e5f849ee64b0b81e468))
29
+
6
30
  ## [0.21.1](https://github.com/okta/odyssey/compare/v0.21.0...v0.21.1) (2023-03-16)
7
31
 
8
32
  ### Features
package/dist/Banner.js CHANGED
@@ -10,9 +10,9 @@
10
10
  * See the License for the specific language governing permissions and limitations under the License.
11
11
  */
12
12
  import { memo } from "react";
13
- import { Alert, Link } from "./index.js";
14
- import { jsx as _jsx } from "react/jsx-runtime";
13
+ import { Alert, Link, visuallyHidden } from "./index.js";
15
14
  import { jsxs as _jsxs } from "react/jsx-runtime";
15
+ import { jsx as _jsx } from "react/jsx-runtime";
16
16
 
17
17
  const Banner = _ref => {
18
18
  let {
@@ -28,7 +28,10 @@ const Banner = _ref => {
28
28
  role: role,
29
29
  severity: severity,
30
30
  variant: "banner",
31
- children: [text, linkUrl && _jsx(Link, {
31
+ children: [_jsxs("span", {
32
+ style: visuallyHidden,
33
+ children: [severity, ":"]
34
+ }), text, linkUrl && _jsx(Link, {
32
35
  href: linkUrl,
33
36
  variant: "monochrome",
34
37
  children: linkText
@@ -1 +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"}
1
+ {"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 CHANGED
@@ -10,9 +10,9 @@
10
10
  * See the License for the specific language governing permissions and limitations under the License.
11
11
  */
12
12
  import { memo } from "react";
13
- import { Alert, AlertTitle } from "./index.js";
14
- import { jsx as _jsx } from "react/jsx-runtime";
13
+ import { Alert, AlertTitle, visuallyHidden } from "./index.js";
15
14
  import { jsxs as _jsxs } from "react/jsx-runtime";
15
+ import { jsx as _jsx } from "react/jsx-runtime";
16
16
 
17
17
  const Infobox = _ref => {
18
18
  let {
@@ -25,7 +25,10 @@ const Infobox = _ref => {
25
25
  role: role,
26
26
  severity: severity,
27
27
  variant: "infobox",
28
- children: [title && _jsx(AlertTitle, {
28
+ children: [_jsxs("span", {
29
+ style: visuallyHidden,
30
+ children: [severity, ": "]
31
+ }), title && _jsx(AlertTitle, {
29
32
  children: title
30
33
  }), children]
31
34
  });
@@ -1 +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"}
1
+ {"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 CHANGED
@@ -8,6 +8,7 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
8
8
  const TextField = forwardRef((_ref, ref) => {
9
9
  let {
10
10
  autoCompleteType,
11
+ autoFocus,
11
12
  endAdornment,
12
13
  errorMessage,
13
14
  hint,
@@ -59,7 +60,8 @@ const TextField = forwardRef((_ref, ref) => {
59
60
  children: hint
60
61
  }), _jsx(_InputBase, {
61
62
  autoComplete: autoCompleteType,
62
- endAdornment: inputType === "password" ? _jsx(_InputAdornment, {
63
+ autoFocus: autoFocus,
64
+ endAdornment: type === "password" ? _jsx(_InputAdornment, {
63
65
  position: "end",
64
66
  children: _jsx(IconButton, {
65
67
  "aria-label": "toggle password visibility",
@@ -1 +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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"}
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","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":"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"}
@@ -1 +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"}
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;AAqBD,QAAA,MAAM,cAAc,8FAZjB,WAAW,iBAYqB,CAAC;AAEpC,OAAO,EAAE,cAAc,IAAI,MAAM,EAAE,CAAC"}
@@ -1 +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"}
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;AAUD,QAAA,MAAM,eAAe,4EARiC,YAAY,iBAQ7B,CAAC;AAEtC,OAAO,EAAE,eAAe,IAAI,OAAO,EAAE,CAAC"}
@@ -12,6 +12,10 @@
12
12
  import { InputBaseProps } from "@mui/material";
13
13
  import { ChangeEventHandler, FocusEventHandler, InputHTMLAttributes, ReactNode } from "react";
14
14
  export type TextFieldProps = {
15
+ /**
16
+ * If `true`, the component will receive focus automatically.
17
+ */
18
+ autoFocus?: boolean;
15
19
  /**
16
20
  * This prop helps users to fill forms faster, especially on mobile devices.
17
21
  * The name can be confusing, as it's more like an autofill.
@@ -1 +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"}
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;;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"}
@@ -1 +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"}
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;AA8B7C,eAAO,MAAM,UAAU,EAAE,YAAY,CAAC,YAAY,CAs5DjD,CAAC"}
@@ -25,8 +25,9 @@ import { tableHeadClasses } from "@mui/material/TableHead";
25
25
  import { tableRowClasses } from "@mui/material/TableRow";
26
26
  import { tableSortLabelClasses } from "@mui/material/TableSortLabel";
27
27
  import { tooltipClasses } from "@mui/material/Tooltip";
28
- import { AlertTriangleFilledIcon, ArrowDownIcon, CheckCircleFilledIcon, ChevronDownIcon, CloseCircleFilledIcon, InformationCircleFilledIcon } from "../iconDictionary/index.js";
28
+ import { AlertTriangleFilledIcon, ArrowDownIcon, CheckIcon, CheckCircleFilledIcon, ChevronDownIcon, CloseCircleFilledIcon, InformationCircleFilledIcon, SubtractIcon } from "../iconDictionary/index.js";
29
29
  import { jsx as _jsx } from "react/jsx-runtime";
30
+ import { Fragment as _Fragment } from "react/jsx-runtime";
30
31
  export const components = {
31
32
  MuiAlert: {
32
33
  defaultProps: {
@@ -193,9 +194,6 @@ export const components = {
193
194
  "&:hover, &:focus-visible": {
194
195
  backgroundColor: theme.palette.primary.dark
195
196
  },
196
- "&:focus-visible": {
197
- outlineColor: theme.palette.primary.main
198
- },
199
197
  "&:active": {
200
198
  backgroundColor: theme.palette.primary.main
201
199
  },
@@ -222,9 +220,6 @@ export const components = {
222
220
  borderColor: theme.palette.primary.light,
223
221
  color: theme.palette.primary.main
224
222
  },
225
- "&:focus-visible": {
226
- outlineColor: theme.palette.primary.main
227
- },
228
223
  "&:active": {
229
224
  borderColor: theme.palette.primary.main
230
225
  },
@@ -251,7 +246,7 @@ export const components = {
251
246
  backgroundColor: theme.palette.error.dark
252
247
  },
253
248
  "&:focus-visible": {
254
- outlineColor: theme.palette.error.main,
249
+ boxShadow: `0 0 0 2px ${theme.palette.background.default}, 0 0 0 4px ${theme.palette.error.main}`,
255
250
  backgroundColor: theme.palette.error.dark
256
251
  },
257
252
  "&:active": {
@@ -279,15 +274,12 @@ export const components = {
279
274
  backgroundColor: "rgba(29, 29, 33, 0.1)",
280
275
  borderColor: "transparent"
281
276
  },
282
- "&:focus-visible": {
283
- outlineColor: theme.palette.primary.main
284
- },
285
277
  "&:active": {
286
278
  backgroundColor: "rgba(29, 29, 33, 0.2)",
287
279
  borderColor: "transparent"
288
280
  },
289
281
  "&:disabled": {
290
- backgroundColor: "rgba(235, 235, 237, 0.6)",
282
+ backgroundColor: "transparent",
291
283
  color: theme.palette.text.secondary,
292
284
  borderColor: "transparent"
293
285
  }
@@ -362,14 +354,12 @@ export const components = {
362
354
  position: "relative",
363
355
  marginBlock: "0",
364
356
  marginInline: "0",
365
- transitionProperty: "color, background-color, border-color, outline-offset, outline-color",
357
+ transitionProperty: "color, background-color, border-color, box-shadow",
366
358
  transitionDuration: "100ms",
367
359
  transitionTimingFunction: "linear",
368
360
  borderWidth: theme.mixins.borderWidth,
369
361
  borderStyle: theme.mixins.borderStyle,
370
362
  borderRadius: theme.mixins.borderRadius,
371
- outlineColor: "transparent",
372
- outlineOffset: "0",
373
363
  fontSize: theme.typography.body1.fontSize,
374
364
  lineHeight: theme.typography.ui.lineHeight,
375
365
  whiteSpace: "nowrap",
@@ -377,9 +367,9 @@ export const components = {
377
367
  marginInlineStart: theme.spacing(2)
378
368
  },
379
369
  "&:focus-visible": {
380
- outlineOffset: "2px",
381
- outlineStyle: "solid",
382
- outlineWidth: "2px"
370
+ boxShadow: `0 0 0 2px ${theme.palette.background.default}, 0 0 0 4px ${theme.palette.primary.main}`,
371
+ outline: "2px solid transparent",
372
+ outlineOffset: "1px"
383
373
  },
384
374
  "&:disabled": {
385
375
  cursor: "not-allowed",
@@ -429,7 +419,10 @@ export const components = {
429
419
  },
430
420
  MuiCheckbox: {
431
421
  defaultProps: {
432
- size: "small"
422
+ size: "small",
423
+ icon: _jsx(_Fragment, {}),
424
+ checkedIcon: _jsx(CheckIcon, {}),
425
+ indeterminateIcon: _jsx(SubtractIcon, {})
433
426
  },
434
427
  styleOverrides: {
435
428
  root: _ref17 => {
@@ -437,27 +430,70 @@ export const components = {
437
430
  theme
438
431
  } = _ref17;
439
432
  return {
440
- borderRadius: "4px",
441
- "&:hover": {
442
- backgroundColor: "transparent"
443
- },
433
+ width: `${theme.typography.ui.lineHeight}em`,
434
+ height: `${theme.typography.ui.lineHeight}em`,
435
+ borderRadius: theme.mixins.borderRadius,
436
+ borderWidth: theme.mixins.borderWidth,
437
+ borderStyle: theme.mixins.borderStyle,
438
+ borderColor: theme.palette.grey[500],
444
439
  padding: 0,
445
- ".Mui-error > &": {
446
- color: theme.palette.error.main,
447
- "&:hover": {
448
- color: theme.palette.error.dark
440
+ boxShadow: `0 0 0 0 transparent`,
441
+ transition: theme.transitions.create(["border-color", "background-color", "box-shadow"], {
442
+ duration: theme.transitions.duration.short
443
+ }),
444
+ ".MuiSvgIcon-root": {
445
+ color: theme.palette.common.white,
446
+ width: "0.5em",
447
+ height: "0.5em",
448
+ transition: theme.transitions.create(["color"], {
449
+ duration: theme.transitions.duration.short
450
+ })
451
+ },
452
+ "&.Mui-checked": {
453
+ backgroundColor: theme.palette.primary.main,
454
+ borderColor: theme.palette.primary.main,
455
+ ".MuiFormControlLabel-root:hover > &": {
456
+ backgroundColor: theme.palette.primary.dark,
457
+ borderColor: theme.palette.primary.dark
449
458
  }
450
459
  },
451
- ".Mui-error > &.Mui-checked": {
452
- "&:hover": {
453
- color: theme.palette.error.dark
460
+ ".MuiFormControlLabel-root:hover > &": {
461
+ backgroundColor: "transparent",
462
+ borderColor: theme.palette.grey[900]
463
+ },
464
+ ".Mui-error:hover > &": {
465
+ borderColor: theme.palette.error.dark,
466
+ "&.Mui-checked": {
467
+ backgroundColor: theme.palette.error.dark,
468
+ borderColor: theme.palette.error.dark
469
+ }
470
+ },
471
+ ".Mui-error > &": {
472
+ borderColor: theme.palette.error.main,
473
+ "&.Mui-checked": {
474
+ backgroundColor: theme.palette.error.main,
475
+ borderColor: theme.palette.error.main
476
+ },
477
+ "&.Mui-focusVisible": {
478
+ boxShadow: `0 0 0 2px ${theme.palette.background.default}, 0 0 0 4px ${theme.palette.error.main}`
454
479
  }
455
480
  },
456
481
  "&.Mui-focusVisible": {
457
- outlineColor: theme.palette.primary.main,
458
- outlineOffset: 0,
459
- outlineStyle: "solid",
460
- outlineWidth: "2px"
482
+ borderColor: theme.palette.grey[900],
483
+ boxShadow: `0 0 0 2px ${theme.palette.background.default}, 0 0 0 4px ${theme.palette.primary.main}`,
484
+ outline: "2px solid transparent",
485
+ outlineOffset: "1px"
486
+ },
487
+ "&.Mui-disabled": {
488
+ backgroundColor: theme.palette.grey[50],
489
+ borderColor: theme.palette.grey[300],
490
+ ".Mui-error > &": {
491
+ backgroundColor: theme.palette.grey[50],
492
+ borderColor: theme.palette.grey[300]
493
+ },
494
+ ".MuiSvgIcon-root": {
495
+ color: theme.palette.common.black
496
+ }
461
497
  }
462
498
  };
463
499
  }
@@ -762,7 +798,7 @@ export const components = {
762
798
  content: "attr(data-a11y-end)"
763
799
  }
764
800
  },
765
- p: {
801
+ "p:not([class])": {
766
802
  maxWidth: theme.mixins.maxWidth,
767
803
  marginBlockStart: 0,
768
804
  marginBlockEnd: theme.spacing(4),
@@ -1038,14 +1074,14 @@ export const components = {
1038
1074
  return {
1039
1075
  fontSize: theme.typography.subtitle1.fontSize,
1040
1076
  lineHeight: "1.33333333",
1041
- marginTop: theme.spacing(2),
1077
+ marginBlockStart: theme.spacing(2),
1042
1078
  ".MuiFormLabel-root + &": {
1043
- marginTop: `-${theme.spacing(1)}`,
1079
+ marginBlockStart: `-${theme.spacing(1)}`,
1044
1080
  color: theme.palette.text.secondary
1045
1081
  },
1046
- marginBottom: theme.spacing(2),
1082
+ marginBlockEnd: theme.spacing(2),
1047
1083
  "&:last-child": {
1048
- marginBottom: 0
1084
+ marginBlockEnd: 0
1049
1085
  },
1050
1086
  textAlign: "start"
1051
1087
  };
@@ -1175,10 +1211,16 @@ export const components = {
1175
1211
  borderStyle: theme.mixins.borderStyle,
1176
1212
  borderRadius: theme.mixins.borderRadius,
1177
1213
  borderColor: theme.palette.grey[500],
1214
+ boxShadow: `0 0 0 0 transparent`,
1215
+ backgroundColor: theme.palette.common.white,
1216
+ transition: theme.transitions.create(["border-color", "background-color", "box-shadow"], {
1217
+ duration: theme.transitions.duration.short
1218
+ }),
1178
1219
  ...(ownerState.fullWidth && {
1179
1220
  width: "100%"
1180
1221
  }),
1181
1222
  ...(ownerState.readOnly === true && {
1223
+ borderColor: "transparent",
1182
1224
  backgroundColor: theme.palette.grey[50]
1183
1225
  }),
1184
1226
  [`&:hover`]: {
@@ -1186,10 +1228,9 @@ export const components = {
1186
1228
  },
1187
1229
  [`&.${inputBaseClasses.focused}`]: {
1188
1230
  borderColor: theme.palette.primary.main,
1189
- outlineColor: theme.palette.primary.main,
1190
- outlineOffset: 0,
1191
- outlineStyle: "solid",
1192
- outlineWidth: "1px"
1231
+ boxShadow: `0 0 0 1px ${theme.palette.primary.main}`,
1232
+ outline: "2px solid transparent",
1233
+ outlineOffset: "1px"
1193
1234
  },
1194
1235
  [`&.${inputBaseClasses.error}`]: {
1195
1236
  borderColor: theme.palette.error.main
@@ -1199,7 +1240,7 @@ export const components = {
1199
1240
  },
1200
1241
  [`&.${inputBaseClasses.error}.${inputBaseClasses.focused}`]: {
1201
1242
  borderColor: theme.palette.error.main,
1202
- outlineColor: theme.palette.error.main
1243
+ boxShadow: `0 0 0 1px ${theme.palette.error.main}`
1203
1244
  },
1204
1245
  [`&.${inputBaseClasses.disabled}`]: {
1205
1246
  color: theme.palette.text.disabled,
@@ -1462,7 +1503,9 @@ export const components = {
1462
1503
  },
1463
1504
  MuiRadio: {
1464
1505
  defaultProps: {
1465
- size: "small"
1506
+ size: "small",
1507
+ icon: _jsx(_Fragment, {}),
1508
+ checkedIcon: _jsx(_Fragment, {})
1466
1509
  },
1467
1510
  styleOverrides: {
1468
1511
  root: _ref43 => {
@@ -1470,21 +1513,69 @@ export const components = {
1470
1513
  theme
1471
1514
  } = _ref43;
1472
1515
  return {
1473
- "&:hover": {
1474
- backgroundColor: "transparent"
1475
- },
1516
+ width: `${theme.typography.ui.lineHeight}em`,
1517
+ height: `${theme.typography.ui.lineHeight}em`,
1518
+ borderRadius: `${theme.typography.ui.lineHeight}em`,
1519
+ borderWidth: theme.mixins.borderWidth,
1520
+ borderStyle: theme.mixins.borderStyle,
1521
+ borderColor: theme.palette.grey[500],
1476
1522
  padding: 0,
1523
+ boxShadow: `0 0 0 0 transparent`,
1524
+ transition: theme.transitions.create(["border-color", "background-color", "box-shadow"], {
1525
+ duration: theme.transitions.duration.short
1526
+ }),
1527
+ "&::before": {
1528
+ content: "''",
1529
+ position: "absolute",
1530
+ width: "0.5em",
1531
+ height: "0.5em",
1532
+ borderRadius: "50%",
1533
+ backgroundColor: "transparent",
1534
+ transition: theme.transitions.create(["background-color"], {
1535
+ duration: theme.transitions.duration.short
1536
+ })
1537
+ },
1538
+ ".MuiFormControlLabel-root:hover > &": {
1539
+ backgroundColor: "transparent",
1540
+ borderColor: theme.palette.grey[900]
1541
+ },
1542
+ ".Mui-error:hover > &": {
1543
+ backgroundColor: "transparent",
1544
+ borderColor: theme.palette.error.dark,
1545
+ "&::before": {
1546
+ backgroundColor: theme.palette.error.dark
1547
+ }
1548
+ },
1477
1549
  ".Mui-error > &": {
1478
- color: theme.palette.error.main,
1479
- "&:hover": {
1480
- color: theme.palette.error.dark
1550
+ borderColor: theme.palette.error.main,
1551
+ "&::before": {
1552
+ backgroundColor: theme.palette.error.main
1553
+ },
1554
+ "&.Mui-focusVisible": {
1555
+ boxShadow: `0 0 0 2px ${theme.palette.background.default}, 0 0 0 4px ${theme.palette.error.main}`
1481
1556
  }
1482
1557
  },
1483
1558
  "&.Mui-focusVisible": {
1484
- outlineColor: theme.palette.primary.main,
1485
- outlineOffset: 0,
1486
- outlineStyle: "solid",
1487
- outlineWidth: "2px"
1559
+ borderColor: theme.palette.grey[900],
1560
+ boxShadow: `0 0 0 2px ${theme.palette.background.default}, 0 0 0 4px ${theme.palette.primary.main}`,
1561
+ outline: "2px solid transparent",
1562
+ outlineOffset: "1px"
1563
+ },
1564
+ "&.Mui-checked": {
1565
+ position: "relative",
1566
+ "&::before": {
1567
+ backgroundColor: theme.palette.primary.main
1568
+ }
1569
+ },
1570
+ ".Mui-error > &.Mui-checked::before": {
1571
+ backgroundColor: theme.palette.error.main
1572
+ },
1573
+ "&.Mui-disabled": {
1574
+ backgroundColor: theme.palette.grey[50],
1575
+ borderColor: theme.palette.grey[300],
1576
+ "&::before": {
1577
+ backgroundColor: theme.palette.grey[300]
1578
+ }
1488
1579
  }
1489
1580
  };
1490
1581
  }