@okta/odyssey-react-mui 0.22.0 → 0.23.0

package/dist/MenuButton.js

@@ -19,7 +19,8 @@ const MenuButton = _ref => {
     buttonLabel = "",
     children,
     buttonEndIcon = _jsx(ChevronDownIcon, {}),
-    buttonVariant = "secondary"
+    buttonVariant = "secondary",
+    id: idOverride
   } = _ref;
   const [anchorEl, setAnchorEl] = useState(null);
   const open = Boolean(anchorEl);
@@ -32,7 +33,7 @@ const MenuButton = _ref => {
     setAnchorEl(null);
   };
 
-  const uniqueId = useUniqueId();
+  const uniqueId = useUniqueId(idOverride);
   const menuListProps = useMemo(() => ({
     "aria-labelledby": `${uniqueId}-button`
   }), [uniqueId]);

package/dist/MenuButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuButton.js","names":["Button","ChevronDownIcon","Menu","useUniqueId","memo","useMemo","useState","MenuButton","buttonLabel","children","buttonEndIcon","buttonVariant","anchorEl","setAnchorEl","open","Boolean","handleClick","event","currentTarget","handleClose","uniqueId","menuListProps","undefined","MemoizedMenuButton"],"sources":["../src/MenuButton.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  Button,\n  ButtonProps,\n  ChevronDownIcon,\n  Divider,\n  ListSubheader,\n  Menu,\n  MenuItem,\n  useUniqueId,\n} from \"./\";\nimport { memo, MouseEvent, ReactElement, useMemo, useState } from \"react\";\n\nexport interface MenuButtonProps {\n  /**\n   * The <MenuItem> components within the Menu.\n   */\n  children: Array<\n    ReactElement<typeof MenuItem | typeof Divider | typeof ListSubheader>\n  >;\n  /**\n   * The end Icon on the trigggering Button\n   */\n  buttonEndIcon?: ReactElement;\n  /**\n   * The label on the triggering Button\n   */\n  buttonLabel?: string;\n  /**\n   * The variant of the triggering Button\n   */\n  buttonVariant?: ButtonProps[\"variant\"];\n}\n\nconst MenuButton = ({\n  buttonLabel = \"\",\n  children,\n  buttonEndIcon = <ChevronDownIcon />,\n  buttonVariant = \"secondary\",\n}: MenuButtonProps) => {\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\n\n  const open = Boolean(anchorEl);\n\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    setAnchorEl(event.currentTarget);\n  };\n\n  const handleClose = () => {\n    setAnchorEl(null);\n  };\n\n  const uniqueId = useUniqueId();\n\n  const menuListProps = useMemo(\n    () => ({ \"aria-labelledby\": `${uniqueId}-button` }),\n    [uniqueId]\n  );\n\n  return (\n    <div>\n      <Button\n        endIcon={buttonEndIcon}\n        id={`${uniqueId}-button`}\n        aria-controls={open ? `${uniqueId}-menu` : undefined}\n        aria-haspopup=\"true\"\n        aria-expanded={open ? \"true\" : undefined}\n        onClick={handleClick}\n        text={buttonLabel}\n        variant={buttonVariant}\n      />\n      <Menu\n        id={`${uniqueId}-menu`}\n        anchorEl={anchorEl}\n        open={open}\n        onClose={handleClose}\n        MenuListProps={menuListProps}\n      >\n        {children}\n      </Menu>\n    </div>\n  );\n};\n\nconst MemoizedMenuButton = memo(MenuButton);\n\nexport { MemoizedMenuButton as MenuButton };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;SAGEA,M,EAEAC,e,EAGAC,I,EAEAC,W;AAEF,SAASC,IAAT,EAAyCC,OAAzC,EAAkDC,QAAlD,QAAkE,OAAlE;;;;AAuBA,MAAMC,UAAU,GAAG,QAKI;EAAA,IALH;IAClBC,WAAW,GAAG,EADI;IAElBC,QAFkB;IAGlBC,aAAa,GAAG,KAAC,eAAD,KAHE;IAIlBC,aAAa,GAAG;EAJE,CAKG;EACrB,MAAM,CAACC,QAAD,EAAWC,WAAX,IAA0BP,QAAQ,CAAqB,IAArB,CAAxC;EAEA,MAAMQ,IAAI,GAAGC,OAAO,CAACH,QAAD,CAApB;;EAEA,MAAMI,WAAW,GAAIC,KAAD,IAA0C;IAC5DJ,WAAW,CAACI,KAAK,CAACC,aAAP,CAAX;EACD,CAFD;;EAIA,MAAMC,WAAW,GAAG,MAAM;IACxBN,WAAW,CAAC,IAAD,CAAX;EACD,CAFD;;EAIA,MAAMO,QAAQ,GAAGjB,WAAW,EAA5B;EAEA,MAAMkB,aAAa,GAAGhB,OAAO,CAC3B,OAAO;IAAE,mBAAoB,GAAEe,QAAS;EAAjC,CAAP,CAD2B,EAE3B,CAACA,QAAD,CAF2B,CAA7B;EAKA,OACE;IAAA,WACE,KAAC,MAAD;MACE,OAAO,EAAEV,aADX;MAEE,EAAE,EAAG,GAAEU,QAAS,SAFlB;MAGE,iBAAeN,IAAI,GAAI,GAAEM,QAAS,OAAf,GAAwBE,SAH7C;MAIE,iBAAc,MAJhB;MAKE,iBAAeR,IAAI,GAAG,MAAH,GAAYQ,SALjC;MAME,OAAO,EAAEN,WANX;MAOE,IAAI,EAAER,WAPR;MAQE,OAAO,EAAEG;IARX,EADF,EAWE,KAAC,IAAD;MACE,EAAE,EAAG,GAAES,QAAS,OADlB;MAEE,QAAQ,EAAER,QAFZ;MAGE,IAAI,EAAEE,IAHR;MAIE,OAAO,EAAEK,WAJX;MAKE,aAAa,EAAEE,aALjB;MAAA,UAOGZ;IAPH,EAXF;EAAA,EADF;AAuBD,CAhDD;;AAkDA,MAAMc,kBAAkB,GAAGnB,IAAI,CAACG,UAAD,CAA/B;AAEA,SAASgB,kBAAkB,IAAIhB,UAA/B"}
+{"version":3,"file":"MenuButton.js","names":["Button","ChevronDownIcon","Menu","useUniqueId","memo","useMemo","useState","MenuButton","buttonLabel","children","buttonEndIcon","buttonVariant","id","idOverride","anchorEl","setAnchorEl","open","Boolean","handleClick","event","currentTarget","handleClose","uniqueId","menuListProps","undefined","MemoizedMenuButton"],"sources":["../src/MenuButton.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  Button,\n  ButtonProps,\n  ChevronDownIcon,\n  Divider,\n  ListSubheader,\n  Menu,\n  MenuItem,\n  useUniqueId,\n} from \"./\";\nimport { memo, MouseEvent, ReactElement, useMemo, useState } from \"react\";\n\nexport type MenuButtonProps = {\n  /**\n   * The <MenuItem> components within the Menu.\n   */\n  children: Array<\n    ReactElement<typeof MenuItem | typeof Divider | typeof ListSubheader>\n  >;\n  /**\n   * The end Icon on the trigggering Button\n   */\n  buttonEndIcon?: ReactElement;\n  /**\n   * The label on the triggering Button\n   */\n  buttonLabel?: string;\n  /**\n   * The variant of the triggering Button\n   */\n  buttonVariant?: ButtonProps[\"variant\"];\n  /**\n   * The id of the `input` element.\n   */\n  id?: string;\n};\n\nconst MenuButton = ({\n  buttonLabel = \"\",\n  children,\n  buttonEndIcon = <ChevronDownIcon />,\n  buttonVariant = \"secondary\",\n  id: idOverride,\n}: MenuButtonProps) => {\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\n\n  const open = Boolean(anchorEl);\n\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    setAnchorEl(event.currentTarget);\n  };\n\n  const handleClose = () => {\n    setAnchorEl(null);\n  };\n\n  const uniqueId = useUniqueId(idOverride);\n\n  const menuListProps = useMemo(\n    () => ({ \"aria-labelledby\": `${uniqueId}-button` }),\n    [uniqueId]\n  );\n\n  return (\n    <div>\n      <Button\n        endIcon={buttonEndIcon}\n        id={`${uniqueId}-button`}\n        aria-controls={open ? `${uniqueId}-menu` : undefined}\n        aria-haspopup=\"true\"\n        aria-expanded={open ? \"true\" : undefined}\n        onClick={handleClick}\n        text={buttonLabel}\n        variant={buttonVariant}\n      />\n      <Menu\n        id={`${uniqueId}-menu`}\n        anchorEl={anchorEl}\n        open={open}\n        onClose={handleClose}\n        MenuListProps={menuListProps}\n      >\n        {children}\n      </Menu>\n    </div>\n  );\n};\n\nconst MemoizedMenuButton = memo(MenuButton);\n\nexport { MemoizedMenuButton as MenuButton };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;SAGEA,M,EAEAC,e,EAGAC,I,EAEAC,W;AAEF,SAASC,IAAT,EAAyCC,OAAzC,EAAkDC,QAAlD,QAAkE,OAAlE;;;;AA2BA,MAAMC,UAAU,GAAG,QAMI;EAAA,IANH;IAClBC,WAAW,GAAG,EADI;IAElBC,QAFkB;IAGlBC,aAAa,GAAG,KAAC,eAAD,KAHE;IAIlBC,aAAa,GAAG,WAJE;IAKlBC,EAAE,EAAEC;EALc,CAMG;EACrB,MAAM,CAACC,QAAD,EAAWC,WAAX,IAA0BT,QAAQ,CAAqB,IAArB,CAAxC;EAEA,MAAMU,IAAI,GAAGC,OAAO,CAACH,QAAD,CAApB;;EAEA,MAAMI,WAAW,GAAIC,KAAD,IAA0C;IAC5DJ,WAAW,CAACI,KAAK,CAACC,aAAP,CAAX;EACD,CAFD;;EAIA,MAAMC,WAAW,GAAG,MAAM;IACxBN,WAAW,CAAC,IAAD,CAAX;EACD,CAFD;;EAIA,MAAMO,QAAQ,GAAGnB,WAAW,CAACU,UAAD,CAA5B;EAEA,MAAMU,aAAa,GAAGlB,OAAO,CAC3B,OAAO;IAAE,mBAAoB,GAAEiB,QAAS;EAAjC,CAAP,CAD2B,EAE3B,CAACA,QAAD,CAF2B,CAA7B;EAKA,OACE;IAAA,WACE,KAAC,MAAD;MACE,OAAO,EAAEZ,aADX;MAEE,EAAE,EAAG,GAAEY,QAAS,SAFlB;MAGE,iBAAeN,IAAI,GAAI,GAAEM,QAAS,OAAf,GAAwBE,SAH7C;MAIE,iBAAc,MAJhB;MAKE,iBAAeR,IAAI,GAAG,MAAH,GAAYQ,SALjC;MAME,OAAO,EAAEN,WANX;MAOE,IAAI,EAAEV,WAPR;MAQE,OAAO,EAAEG;IARX,EADF,EAWE,KAAC,IAAD;MACE,EAAE,EAAG,GAAEW,QAAS,OADlB;MAEE,QAAQ,EAAER,QAFZ;MAGE,IAAI,EAAEE,IAHR;MAIE,OAAO,EAAEK,WAJX;MAKE,aAAa,EAAEE,aALjB;MAAA,UAOGd;IAPH,EAXF;EAAA,EADF;AAuBD,CAjDD;;AAmDA,MAAMgB,kBAAkB,GAAGrB,IAAI,CAACG,UAAD,CAA/B;AAEA,SAASkB,kBAAkB,IAAIlB,UAA/B"}

package/dist/MuiPropsChild.js

@@ -0,0 +1,30 @@
+/*!
+ * 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, memo, useMemo } from "react";
+import { MuiPropsContext } from "./MuiPropsContext.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const MuiPropsChild = forwardRef((_ref, ref) => {
+  let {
+    children,
+    ...muiProps
+  } = _ref;
+  const providerValue = useMemo(() => ({ ...muiProps,
+    ref
+  }), [muiProps, ref]);
+  return _jsx(MuiPropsContext.Provider, {
+    value: providerValue,
+    children: children
+  });
+});
+const MemoizedMuiPropsChild = memo(MuiPropsChild);
+export { MemoizedMuiPropsChild as MuiPropsChild };
+//# sourceMappingURL=MuiPropsChild.js.map

package/dist/MuiPropsChild.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MuiPropsChild.js","names":["forwardRef","memo","useMemo","MuiPropsContext","MuiPropsChild","ref","children","muiProps","providerValue","MemoizedMuiPropsChild"],"sources":["../src/MuiPropsChild.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 { forwardRef, memo, ReactNode, useMemo } from \"react\";\n\nimport { MuiPropsContext, MuiPropsContextType } from \"./MuiPropsContext\";\n\nexport type MuiPropsChildProps = {\n  children: ReactNode;\n};\n\nconst MuiPropsChild = forwardRef<HTMLElement, MuiPropsChildProps>(\n  ({ children, ...muiProps }, ref) => {\n    const providerValue = useMemo<MuiPropsContextType>(\n      () => ({\n        ...muiProps,\n        ref,\n      }),\n      [muiProps, ref]\n    );\n\n    return (\n      <MuiPropsContext.Provider value={providerValue}>\n        {children}\n      </MuiPropsContext.Provider>\n    );\n  }\n);\n\nconst MemoizedMuiPropsChild = memo(MuiPropsChild);\n\nexport { MemoizedMuiPropsChild as MuiPropsChild };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,SAASA,UAAT,EAAqBC,IAArB,EAAsCC,OAAtC,QAAqD,OAArD;SAESC,e;;AAMT,MAAMC,aAAa,GAAGJ,UAAU,CAC9B,OAA4BK,GAA5B,KAAoC;EAAA,IAAnC;IAAEC,QAAF;IAAY,GAAGC;EAAf,CAAmC;EAClC,MAAMC,aAAa,GAAGN,OAAO,CAC3B,OAAO,EACL,GAAGK,QADE;IAELF;EAFK,CAAP,CAD2B,EAK3B,CAACE,QAAD,EAAWF,GAAX,CAL2B,CAA7B;EAQA,OACE,KAAC,eAAD,CAAiB,QAAjB;IAA0B,KAAK,EAAEG,aAAjC;IAAA,UACGF;EADH,EADF;AAKD,CAf6B,CAAhC;AAkBA,MAAMG,qBAAqB,GAAGR,IAAI,CAACG,aAAD,CAAlC;AAEA,SAASK,qBAAqB,IAAIL,aAAlC"}

package/dist/MuiPropsContext.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 { createContext } from "react";
+export const MuiPropsContext = createContext({});
+//# sourceMappingURL=MuiPropsContext.js.map

package/dist/MuiPropsContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MuiPropsContext.js","names":["createContext","MuiPropsContext"],"sources":["../src/MuiPropsContext.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 { createContext } from \"react\";\n\nexport type MuiPropsContextType = Record<string, unknown>;\n\nexport const MuiPropsContext = createContext<MuiPropsContextType>({});\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,SAASA,aAAT,QAA8B,OAA9B;AAIA,OAAO,MAAMC,eAAe,GAAGD,aAAa,CAAsB,EAAtB,CAArC"}

package/dist/PasswordField.js

@@ -7,11 +7,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const PasswordField = forwardRef((_ref, ref) => {
   let {
     autoCompleteType,
-    autoFocus,
     errorMessage,
+    hasInitialFocus,
     hint,
     id: idOverride,
     isDisabled = false,
+    isOptional = false,
     isReadOnly,
     label,
     onChange,
@@ -32,7 +33,7 @@ const PasswordField = forwardRef((_ref, ref) => {
     return _jsx(_InputBase, {
       "aria-describedby": ariaDescribedBy,
       autoComplete: autoCompleteType,
-      autoFocus: autoFocus,
+      autoFocus: hasInitialFocus,
       endAdornment: _jsx(_InputAdornment, {
         position: "end",
         children: _jsx(IconButton, {
@@ -43,22 +44,26 @@ const PasswordField = forwardRef((_ref, ref) => {
         })
       }),
       id: id,
+      name: id,
       onChange: onChange,
       onFocus: onFocus,
       onBlur: onBlur,
       placeholder: placeholder,
       readOnly: isReadOnly,
       ref: ref,
+      required: !isOptional,
       type: inputType,
       value: value
     });
-  }, [autoCompleteType, autoFocus, togglePasswordVisibility, inputType, onChange, onFocus, onBlur, placeholder, isReadOnly, ref, value]);
+  }, [autoCompleteType, hasInitialFocus, togglePasswordVisibility, inputType, onChange, onFocus, onBlur, placeholder, isOptional, isReadOnly, ref, value]);
   return _jsx(Field, {
     errorMessage: errorMessage,
+    fieldType: "single",
     hasVisibleLabel: true,
     hint: hint,
     id: idOverride,
     isDisabled: isDisabled,
+    isOptional: isOptional,
     label: label,
     renderFieldComponent: renderFieldComponent
   });

package/dist/PasswordField.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordField.js","names":["forwardRef","memo","useCallback","useState","EyeIcon","EyeOffIcon","IconButton","Field","PasswordField","ref","autoCompleteType","autoFocus","errorMessage","hint","id","idOverride","isDisabled","isReadOnly","label","onChange","onFocus","onBlur","placeholder","value","inputType","setInputType","togglePasswordVisibility","renderFieldComponent","ariaDescribedBy","MemoizedPasswordField"],"sources":["../src/PasswordField.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { InputAdornment, InputBase } from \"@mui/material\";\nimport {\n  ChangeEventHandler,\n  FocusEventHandler,\n  forwardRef,\n  memo,\n  useCallback,\n  useState,\n} from \"react\";\n\nimport { EyeIcon, EyeOffIcon, IconButton } from \"./\";\nimport { Field } from \"./Field\";\n\nexport type PasswordFieldProps = {\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?: \"current-password\" | \"new-password\";\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   * If `true`, the component is disabled.\n   */\n  isDisabled?: 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 short hint displayed in the `input` before the user enters a value.\n   */\n  placeholder?: string;\n  /**\n   * The value of the `input` element, required for a controlled component.\n   */\n  value?: string;\n};\n\nconst PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(\n  (\n    {\n      autoCompleteType,\n      autoFocus,\n      errorMessage,\n      hint,\n      id: idOverride,\n      isDisabled = false,\n      isReadOnly,\n      label,\n      onChange,\n      onFocus,\n      onBlur,\n      placeholder,\n      value,\n    },\n    ref\n  ) => {\n    const [inputType, setInputType] = useState(\"password\");\n\n    const togglePasswordVisibility = useCallback(() => {\n      setInputType((inputType) =>\n        inputType === \"password\" ? \"text\" : \"password\"\n      );\n    }, []);\n\n    const renderFieldComponent = useCallback(\n      ({ ariaDescribedBy, id }) => (\n        <InputBase\n          aria-describedby={ariaDescribedBy}\n          autoComplete={autoCompleteType}\n          /* eslint-disable-next-line jsx-a11y/no-autofocus */\n          autoFocus={autoFocus}\n          endAdornment={\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          id={id}\n          onChange={onChange}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          placeholder={placeholder}\n          readOnly={isReadOnly}\n          ref={ref}\n          type={inputType}\n          value={value}\n        />\n      ),\n      [\n        autoCompleteType,\n        autoFocus,\n        togglePasswordVisibility,\n        inputType,\n        onChange,\n        onFocus,\n        onBlur,\n        placeholder,\n        isReadOnly,\n        ref,\n        value,\n      ]\n    );\n\n    return (\n      <Field\n        errorMessage={errorMessage}\n        hasVisibleLabel\n        hint={hint}\n        id={idOverride}\n        isDisabled={isDisabled}\n        label={label}\n        renderFieldComponent={renderFieldComponent}\n      />\n    );\n  }\n);\n\nconst MemoizedPasswordField = memo(PasswordField);\n\nexport { MemoizedPasswordField as PasswordField };\n"],"mappings":";;AAaA,SAGEA,UAHF,EAIEC,IAJF,EAKEC,WALF,EAMEC,QANF,QAOO,OAPP;SASSC,O,EAASC,U,EAAYC,U;SACrBC,K;;AA+DT,MAAMC,aAAa,GAAGR,UAAU,CAC9B,OAgBES,GAhBF,KAiBK;EAAA,IAhBH;IACEC,gBADF;IAEEC,SAFF;IAGEC,YAHF;IAIEC,IAJF;IAKEC,EAAE,EAAEC,UALN;IAMEC,UAAU,GAAG,KANf;IAOEC,UAPF;IAQEC,KARF;IASEC,QATF;IAUEC,OAVF;IAWEC,MAXF;IAYEC,WAZF;IAaEC;EAbF,CAgBG;EACH,MAAM,CAACC,SAAD,EAAYC,YAAZ,IAA4BtB,QAAQ,CAAC,UAAD,CAA1C;EAEA,MAAMuB,wBAAwB,GAAGxB,WAAW,CAAC,MAAM;IACjDuB,YAAY,CAAED,SAAD,IACXA,SAAS,KAAK,UAAd,GAA2B,MAA3B,GAAoC,UAD1B,CAAZ;EAGD,CAJ2C,EAIzC,EAJyC,CAA5C;EAMA,MAAMG,oBAAoB,GAAGzB,WAAW,CACtC;IAAA,IAAC;MAAE0B,eAAF;MAAmBd;IAAnB,CAAD;IAAA,OACE;MACE,oBAAkBc,eADpB;MAEE,YAAY,EAAElB,gBAFhB;MAIE,SAAS,EAAEC,SAJb;MAKE,YAAY,EACV;QAAgB,QAAQ,EAAC,KAAzB;QAAA,UACE,KAAC,UAAD;UACE,cAAW,4BADb;UAEE,IAAI,EAAC,KAFP;UAGE,OAAO,EAAEe,wBAHX;UAAA,UAKGF,SAAS,KAAK,UAAd,GAA2B,KAAC,OAAD,KAA3B,GAAyC,KAAC,UAAD;QAL5C;MADF,EANJ;MAgBE,EAAE,EAAEV,EAhBN;MAiBE,QAAQ,EAAEK,QAjBZ;MAkBE,OAAO,EAAEC,OAlBX;MAmBE,MAAM,EAAEC,MAnBV;MAoBE,WAAW,EAAEC,WApBf;MAqBE,QAAQ,EAAEL,UArBZ;MAsBE,GAAG,EAAER,GAtBP;MAuBE,IAAI,EAAEe,SAvBR;MAwBE,KAAK,EAAED;IAxBT,EADF;EAAA,CADsC,EA6BtC,CACEb,gBADF,EAEEC,SAFF,EAGEe,wBAHF,EAIEF,SAJF,EAKEL,QALF,EAMEC,OANF,EAOEC,MAPF,EAQEC,WARF,EASEL,UATF,EAUER,GAVF,EAWEc,KAXF,CA7BsC,CAAxC;EA4CA,OACE,KAAC,KAAD;IACE,YAAY,EAAEX,YADhB;IAEE,eAAe,MAFjB;IAGE,IAAI,EAAEC,IAHR;IAIE,EAAE,EAAEE,UAJN;IAKE,UAAU,EAAEC,UALd;IAME,KAAK,EAAEE,KANT;IAOE,oBAAoB,EAAES;EAPxB,EADF;AAWD,CAlF6B,CAAhC;AAqFA,MAAME,qBAAqB,GAAG5B,IAAI,CAACO,aAAD,CAAlC;AAEA,SAASqB,qBAAqB,IAAIrB,aAAlC"}
+{"version":3,"file":"PasswordField.js","names":["forwardRef","memo","useCallback","useState","EyeIcon","EyeOffIcon","IconButton","Field","PasswordField","ref","autoCompleteType","errorMessage","hasInitialFocus","hint","id","idOverride","isDisabled","isOptional","isReadOnly","label","onChange","onFocus","onBlur","placeholder","value","inputType","setInputType","togglePasswordVisibility","renderFieldComponent","ariaDescribedBy","MemoizedPasswordField"],"sources":["../src/PasswordField.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { InputAdornment, InputBase } from \"@mui/material\";\nimport {\n  ChangeEventHandler,\n  FocusEventHandler,\n  forwardRef,\n  memo,\n  useCallback,\n  useState,\n} from \"react\";\n\nimport { EyeIcon, EyeOffIcon, IconButton } from \"./\";\nimport { Field } from \"./Field\";\n\nexport type PasswordFieldProps = {\n  /**\n   * This prop helps users to fill forms faster, especially on mobile devices.\n   * The name can be confusing, as it's more like an autofill.\n   * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).\n   */\n  autoCompleteType?: \"current-password\" | \"new-password\";\n  /**\n   * If `error` is not undefined, the `input` will indicate an error.\n   */\n  errorMessage?: string;\n  /**\n   * If `true`, the component will receive focus automatically.\n   */\n  hasInitialFocus?: boolean;\n  /**\n   * The helper text content.\n   */\n  hint?: string;\n  /**\n   * The id of the `input` element.\n   */\n  id?: string;\n  /**\n   * If `true`, the component is disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * If `true`, the `input` element is not required.\n   */\n  isOptional?: boolean;\n  /**\n   * It prevents the user from changing the value of the field\n   */\n  isReadOnly?: 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 short hint displayed in the `input` before the user enters a value.\n   */\n  placeholder?: string;\n  /**\n   * The value of the `input` element, required for a controlled component.\n   */\n  value?: string;\n};\n\nconst PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(\n  (\n    {\n      autoCompleteType,\n      errorMessage,\n      hasInitialFocus,\n      hint,\n      id: idOverride,\n      isDisabled = false,\n      isOptional = false,\n      isReadOnly,\n      label,\n      onChange,\n      onFocus,\n      onBlur,\n      placeholder,\n      value,\n    },\n    ref\n  ) => {\n    const [inputType, setInputType] = useState(\"password\");\n\n    const togglePasswordVisibility = useCallback(() => {\n      setInputType((inputType) =>\n        inputType === \"password\" ? \"text\" : \"password\"\n      );\n    }, []);\n\n    const renderFieldComponent = useCallback(\n      ({ ariaDescribedBy, id }) => (\n        <InputBase\n          aria-describedby={ariaDescribedBy}\n          autoComplete={autoCompleteType}\n          /* eslint-disable-next-line jsx-a11y/no-autofocus */\n          autoFocus={hasInitialFocus}\n          endAdornment={\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          id={id}\n          name={id}\n          onChange={onChange}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          placeholder={placeholder}\n          readOnly={isReadOnly}\n          ref={ref}\n          required={!isOptional}\n          type={inputType}\n          value={value}\n        />\n      ),\n      [\n        autoCompleteType,\n        hasInitialFocus,\n        togglePasswordVisibility,\n        inputType,\n        onChange,\n        onFocus,\n        onBlur,\n        placeholder,\n        isOptional,\n        isReadOnly,\n        ref,\n        value,\n      ]\n    );\n\n    return (\n      <Field\n        errorMessage={errorMessage}\n        fieldType=\"single\"\n        hasVisibleLabel\n        hint={hint}\n        id={idOverride}\n        isDisabled={isDisabled}\n        isOptional={isOptional}\n        label={label}\n        renderFieldComponent={renderFieldComponent}\n      />\n    );\n  }\n);\n\nconst MemoizedPasswordField = memo(PasswordField);\n\nexport { MemoizedPasswordField as PasswordField };\n"],"mappings":";;AAaA,SAGEA,UAHF,EAIEC,IAJF,EAKEC,WALF,EAMEC,QANF,QAOO,OAPP;SASSC,O,EAASC,U,EAAYC,U;SACrBC,K;;AA+DT,MAAMC,aAAa,GAAGR,UAAU,CAC9B,OAiBES,GAjBF,KAkBK;EAAA,IAjBH;IACEC,gBADF;IAEEC,YAFF;IAGEC,eAHF;IAIEC,IAJF;IAKEC,EAAE,EAAEC,UALN;IAMEC,UAAU,GAAG,KANf;IAOEC,UAAU,GAAG,KAPf;IAQEC,UARF;IASEC,KATF;IAUEC,QAVF;IAWEC,OAXF;IAYEC,MAZF;IAaEC,WAbF;IAcEC;EAdF,CAiBG;EACH,MAAM,CAACC,SAAD,EAAYC,YAAZ,IAA4BvB,QAAQ,CAAC,UAAD,CAA1C;EAEA,MAAMwB,wBAAwB,GAAGzB,WAAW,CAAC,MAAM;IACjDwB,YAAY,CAAED,SAAD,IACXA,SAAS,KAAK,UAAd,GAA2B,MAA3B,GAAoC,UAD1B,CAAZ;EAGD,CAJ2C,EAIzC,EAJyC,CAA5C;EAMA,MAAMG,oBAAoB,GAAG1B,WAAW,CACtC;IAAA,IAAC;MAAE2B,eAAF;MAAmBf;IAAnB,CAAD;IAAA,OACE;MACE,oBAAkBe,eADpB;MAEE,YAAY,EAAEnB,gBAFhB;MAIE,SAAS,EAAEE,eAJb;MAKE,YAAY,EACV;QAAgB,QAAQ,EAAC,KAAzB;QAAA,UACE,KAAC,UAAD;UACE,cAAW,4BADb;UAEE,IAAI,EAAC,KAFP;UAGE,OAAO,EAAEe,wBAHX;UAAA,UAKGF,SAAS,KAAK,UAAd,GAA2B,KAAC,OAAD,KAA3B,GAAyC,KAAC,UAAD;QAL5C;MADF,EANJ;MAgBE,EAAE,EAAEX,EAhBN;MAiBE,IAAI,EAAEA,EAjBR;MAkBE,QAAQ,EAAEM,QAlBZ;MAmBE,OAAO,EAAEC,OAnBX;MAoBE,MAAM,EAAEC,MApBV;MAqBE,WAAW,EAAEC,WArBf;MAsBE,QAAQ,EAAEL,UAtBZ;MAuBE,GAAG,EAAET,GAvBP;MAwBE,QAAQ,EAAE,CAACQ,UAxBb;MAyBE,IAAI,EAAEQ,SAzBR;MA0BE,KAAK,EAAED;IA1BT,EADF;EAAA,CADsC,EA+BtC,CACEd,gBADF,EAEEE,eAFF,EAGEe,wBAHF,EAIEF,SAJF,EAKEL,QALF,EAMEC,OANF,EAOEC,MAPF,EAQEC,WARF,EASEN,UATF,EAUEC,UAVF,EAWET,GAXF,EAYEe,KAZF,CA/BsC,CAAxC;EA+CA,OACE,KAAC,KAAD;IACE,YAAY,EAAEb,YADhB;IAEE,SAAS,EAAC,QAFZ;IAGE,eAAe,MAHjB;IAIE,IAAI,EAAEE,IAJR;IAKE,EAAE,EAAEE,UALN;IAME,UAAU,EAAEC,UANd;IAOE,UAAU,EAAEC,UAPd;IAQE,KAAK,EAAEE,KART;IASE,oBAAoB,EAAES;EATxB,EADF;AAaD,CAxF6B,CAAhC;AA2FA,MAAME,qBAAqB,GAAG7B,IAAI,CAACO,aAAD,CAAlC;AAEA,SAASsB,qBAAqB,IAAItB,aAAlC"}

package/dist/RadioGroup.js

@@ -1,8 +1,7 @@
 import _RadioGroup from "@mui/material/RadioGroup";
-import { memo, useMemo } from "react";
-import { FormControl, FormLabel, FormHelperText, ScreenReaderText, useUniqueId } from "./index.js";
+import { memo, useCallback } from "react";
+import { Field } from "./Field.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 
 const RadioGroup = _ref => {
   let {
@@ -10,36 +9,36 @@ const RadioGroup = _ref => {
     defaultValue,
     errorMessage,
     hint,
+    id: idOverride,
     isDisabled,
     label,
-    name,
-    onChange
+    onChange,
+    value
   } = _ref;
-  const ariaDescribedBy = useMemo(() => errorMessage || hint ? [hint && `${name}-hint`, errorMessage && `${name}-error`].filter(Boolean).join(" ") : undefined, [errorMessage, hint, name]);
-  const uniqueName = useUniqueId(name);
-  return _jsxs(FormControl, {
-    component: "fieldset",
-    disabled: isDisabled,
-    error: Boolean(errorMessage),
-    children: [_jsx(FormLabel, {
-      component: "legend",
-      children: label
-    }), hint && _jsx(FormHelperText, {
-      id: `${uniqueName}-hint`,
-      children: hint
-    }), _jsx(_RadioGroup, {
+  const renderFieldComponent = useCallback(_ref2 => {
+    let {
+      ariaDescribedBy,
+      id
+    } = _ref2;
+    return _jsx(_RadioGroup, {
       "aria-describedby": ariaDescribedBy,
       defaultValue: defaultValue,
-      name: uniqueName,
+      id: id,
+      name: id,
       onChange: onChange,
+      value: value,
       children: children
-    }), errorMessage && _jsxs(FormHelperText, {
-      id: `${uniqueName}-error`,
-      error: true,
-      children: [_jsx(ScreenReaderText, {
-        children: "Error:"
-      }), " ", errorMessage]
-    })]
+    });
+  }, [children, defaultValue, onChange, value]);
+  return _jsx(Field, {
+    errorMessage: errorMessage,
+    fieldType: "group",
+    hasVisibleLabel: false,
+    hint: hint,
+    id: idOverride,
+    isDisabled: isDisabled,
+    label: label,
+    renderFieldComponent: renderFieldComponent
   });
 };
 

package/dist/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","names":["memo","useMemo","FormControl","FormLabel","FormHelperText","ScreenReaderText","useUniqueId","RadioGroup","children","defaultValue","errorMessage","hint","isDisabled","label","name","onChange","ariaDescribedBy","filter","Boolean","join","undefined","uniqueName","MemoizedRadioGroup"],"sources":["../src/RadioGroup.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { RadioGroup as MuiRadioGroup } from \"@mui/material\";\nimport { ChangeEventHandler, memo, ReactElement, useMemo } from \"react\";\n\nimport {\n  FormControl,\n  FormLabel,\n  FormHelperText,\n  Radio,\n  ScreenReaderText,\n  useUniqueId,\n  RadioProps,\n} from \".\";\n\nexport interface RadioGroupProps {\n  /**\n   * The <Radio> components within the group. Must include two or more.\n   */\n  children: Array<ReactElement<typeof Radio>>;\n  /**\n   * The text value of the radio that should be selected by default\n   */\n  defaultValue?: string;\n  /**\n   * The error text for an invalid group\n   */\n  errorMessage?: string;\n  /**\n   * Optional hint text\n   */\n  hint?: string;\n  /**\n   * Disables the whole radio group\n   */\n  isDisabled?: boolean;\n  /**\n   * The text label for the radio group\n   */\n  label: string;\n  /**\n   * The name of the radio group, which only needs to be changed if there are multiple radio groups on the same screen\n   */\n  name?: string;\n  /**\n   * Listen for changes in the browser that change `value`.\n   */\n  onChange?: ChangeEventHandler<EventTarget>;\n  /**\n   * The `value` on the selected radio button.\n   */\n  value?: RadioProps[\"value\"];\n}\n\nconst RadioGroup = ({\n  children,\n  defaultValue,\n  errorMessage,\n  hint,\n  isDisabled,\n  label,\n  name,\n  onChange,\n}: RadioGroupProps) => {\n  const ariaDescribedBy = useMemo(\n    () =>\n      errorMessage || hint\n        ? [hint && `${name}-hint`, errorMessage && `${name}-error`]\n            .filter(Boolean)\n            .join(\" \")\n        : undefined,\n    [errorMessage, hint, name]\n  );\n\n  const uniqueName = useUniqueId(name);\n\n  return (\n    <FormControl\n      component=\"fieldset\"\n      disabled={isDisabled}\n      error={Boolean(errorMessage)}\n    >\n      <FormLabel component=\"legend\">{label}</FormLabel>\n      {hint && (\n        <FormHelperText id={`${uniqueName}-hint`}>{hint}</FormHelperText>\n      )}\n      <MuiRadioGroup\n        aria-describedby={ariaDescribedBy}\n        defaultValue={defaultValue}\n        name={uniqueName}\n        onChange={onChange}\n      >\n        {children}\n      </MuiRadioGroup>\n      {errorMessage && (\n        <FormHelperText id={`${uniqueName}-error`} error>\n          <ScreenReaderText>Error:</ScreenReaderText> {errorMessage}\n        </FormHelperText>\n      )}\n    </FormControl>\n  );\n};\n\nconst MemoizedRadioGroup = memo(RadioGroup);\n\nexport { MemoizedRadioGroup as RadioGroup };\n"],"mappings":";AAaA,SAA6BA,IAA7B,EAAiDC,OAAjD,QAAgE,OAAhE;SAGEC,W,EACAC,S,EACAC,c,EAEAC,gB,EACAC,W;;;;AA2CF,MAAMC,UAAU,GAAG,QASI;EAAA,IATH;IAClBC,QADkB;IAElBC,YAFkB;IAGlBC,YAHkB;IAIlBC,IAJkB;IAKlBC,UALkB;IAMlBC,KANkB;IAOlBC,IAPkB;IAQlBC;EARkB,CASG;EACrB,MAAMC,eAAe,GAAGf,OAAO,CAC7B,MACES,YAAY,IAAIC,IAAhB,GACI,CAACA,IAAI,IAAK,GAAEG,IAAK,OAAjB,EAAyBJ,YAAY,IAAK,GAAEI,IAAK,QAAjD,EACGG,MADH,CACUC,OADV,EAEGC,IAFH,CAEQ,GAFR,CADJ,GAIIC,SANuB,EAO7B,CAACV,YAAD,EAAeC,IAAf,EAAqBG,IAArB,CAP6B,CAA/B;EAUA,MAAMO,UAAU,GAAGf,WAAW,CAACQ,IAAD,CAA9B;EAEA,OACE,MAAC,WAAD;IACE,SAAS,EAAC,UADZ;IAEE,QAAQ,EAAEF,UAFZ;IAGE,KAAK,EAAEM,OAAO,CAACR,YAAD,CAHhB;IAAA,WAKE,KAAC,SAAD;MAAW,SAAS,EAAC,QAArB;MAAA,UAA+BG;IAA/B,EALF,EAMGF,IAAI,IACH,KAAC,cAAD;MAAgB,EAAE,EAAG,GAAEU,UAAW,OAAlC;MAAA,UAA2CV;IAA3C,EAPJ,EASE;MACE,oBAAkBK,eADpB;MAEE,YAAY,EAAEP,YAFhB;MAGE,IAAI,EAAEY,UAHR;MAIE,QAAQ,EAAEN,QAJZ;MAAA,UAMGP;IANH,EATF,EAiBGE,YAAY,IACX,MAAC,cAAD;MAAgB,EAAE,EAAG,GAAEW,UAAW,QAAlC;MAA2C,KAAK,MAAhD;MAAA,WACE,KAAC,gBAAD;QAAA;MAAA,EADF,OAC+CX,YAD/C;IAAA,EAlBJ;EAAA,EADF;AAyBD,CA/CD;;AAiDA,MAAMY,kBAAkB,GAAGtB,IAAI,CAACO,UAAD,CAA/B;AAEA,SAASe,kBAAkB,IAAIf,UAA/B"}
+{"version":3,"file":"RadioGroup.js","names":["memo","useCallback","Field","RadioGroup","children","defaultValue","errorMessage","hint","id","idOverride","isDisabled","label","onChange","value","renderFieldComponent","ariaDescribedBy","MemoizedRadioGroup"],"sources":["../src/RadioGroup.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { RadioGroup as MuiRadioGroup } from \"@mui/material\";\nimport { ChangeEventHandler, memo, ReactElement, useCallback } from \"react\";\n\nimport { Radio, RadioProps } from \"./Radio\";\nimport { Field } from \"./Field\";\n\nexport type RadioGroupProps = {\n  /**\n   * The <Radio> components within the group. Must include two or more.\n   */\n  children: Array<ReactElement<typeof Radio>>;\n  /**\n   * The text value of the radio that should be selected by default\n   */\n  defaultValue?: string;\n  /**\n   * The error text for an invalid group\n   */\n  errorMessage?: string;\n  /**\n   * Optional hint text\n   */\n  hint?: string;\n  /**\n   * The id of the `input` element. This will also be the input's `name` field.\n   */\n  id?: string;\n  /**\n   * Disables the whole radio group\n   */\n  isDisabled?: boolean;\n  /**\n   * The text label for the radio group\n   */\n  label: string;\n  /**\n   * Listen for changes in the browser that change `value`.\n   */\n  onChange?: ChangeEventHandler<EventTarget>;\n  /**\n   * The `value` on the selected radio button.\n   */\n  value?: RadioProps[\"value\"];\n};\n\nconst RadioGroup = ({\n  children,\n  defaultValue,\n  errorMessage,\n  hint,\n  id: idOverride,\n  isDisabled,\n  label,\n  onChange,\n  value,\n}: RadioGroupProps) => {\n  const renderFieldComponent = useCallback(\n    ({ ariaDescribedBy, id }) => (\n      <MuiRadioGroup\n        aria-describedby={ariaDescribedBy}\n        defaultValue={defaultValue}\n        id={id}\n        name={id}\n        onChange={onChange}\n        value={value}\n      >\n        {children}\n      </MuiRadioGroup>\n    ),\n    [children, defaultValue, onChange, value]\n  );\n\n  return (\n    <Field\n      errorMessage={errorMessage}\n      fieldType=\"group\"\n      hasVisibleLabel={false}\n      hint={hint}\n      id={idOverride}\n      isDisabled={isDisabled}\n      label={label}\n      renderFieldComponent={renderFieldComponent}\n    />\n  );\n};\n\nconst MemoizedRadioGroup = memo(RadioGroup);\n\nexport { MemoizedRadioGroup as RadioGroup };\n"],"mappings":";AAaA,SAA6BA,IAA7B,EAAiDC,WAAjD,QAAoE,OAApE;SAGSC,K;;;AAyCT,MAAMC,UAAU,GAAG,QAUI;EAAA,IAVH;IAClBC,QADkB;IAElBC,YAFkB;IAGlBC,YAHkB;IAIlBC,IAJkB;IAKlBC,EAAE,EAAEC,UALc;IAMlBC,UANkB;IAOlBC,KAPkB;IAQlBC,QARkB;IASlBC;EATkB,CAUG;EACrB,MAAMC,oBAAoB,GAAGb,WAAW,CACtC;IAAA,IAAC;MAAEc,eAAF;MAAmBP;IAAnB,CAAD;IAAA,OACE;MACE,oBAAkBO,eADpB;MAEE,YAAY,EAAEV,YAFhB;MAGE,EAAE,EAAEG,EAHN;MAIE,IAAI,EAAEA,EAJR;MAKE,QAAQ,EAAEI,QALZ;MAME,KAAK,EAAEC,KANT;MAAA,UAQGT;IARH,EADF;EAAA,CADsC,EAatC,CAACA,QAAD,EAAWC,YAAX,EAAyBO,QAAzB,EAAmCC,KAAnC,CAbsC,CAAxC;EAgBA,OACE,KAAC,KAAD;IACE,YAAY,EAAEP,YADhB;IAEE,SAAS,EAAC,OAFZ;IAGE,eAAe,EAAE,KAHnB;IAIE,IAAI,EAAEC,IAJR;IAKE,EAAE,EAAEE,UALN;IAME,UAAU,EAAEC,UANd;IAOE,KAAK,EAAEC,KAPT;IAQE,oBAAoB,EAAEG;EARxB,EADF;AAYD,CAvCD;;AAyCA,MAAME,kBAAkB,GAAGhB,IAAI,CAACG,UAAD,CAA/B;AAEA,SAASa,kBAAkB,IAAIb,UAA/B"}

package/dist/SearchField.js

@@ -7,7 +7,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const SearchField = forwardRef((_ref, ref) => {
   let {
     autoCompleteType,
-    autoFocus,
+    hasInitialFocus,
     id: idOverride,
     isDisabled = false,
     label,
@@ -25,8 +25,9 @@ const SearchField = forwardRef((_ref, ref) => {
     return _jsx(_InputBase, {
       "aria-describedby": ariaDescribedBy,
       autoComplete: autoCompleteType,
-      autoFocus: autoFocus,
+      autoFocus: hasInitialFocus,
       id: id,
+      name: id,
       onChange: onChange,
       onFocus: onFocus,
       onBlur: onBlur,
@@ -39,12 +40,13 @@ const SearchField = forwardRef((_ref, ref) => {
       type: "search",
       value: value
     });
-  }, [autoCompleteType, autoFocus, onChange, onFocus, onBlur, placeholder, ref, value]);
+  }, [autoCompleteType, hasInitialFocus, onChange, onFocus, onBlur, placeholder, ref, value]);
   return _jsx(Field, {
+    fieldType: "single",
     hasVisibleLabel: false,
     id: idOverride,
     isDisabled: isDisabled,
-    isRequired: false,
+    isOptional: true,
     label: label,
     renderFieldComponent: renderFieldComponent
   });

package/dist/SearchField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchField.js","names":["forwardRef","memo","useCallback","SearchIcon","Field","SearchField","ref","autoCompleteType","autoFocus","id","idOverride","isDisabled","label","onChange","onFocus","onBlur","placeholder","value","renderFieldComponent","ariaDescribedBy","MemoizedSearchField"],"sources":["../src/SearchField.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { InputAdornment, InputBase } from \"@mui/material\";\nimport {\n  ChangeEventHandler,\n  FocusEventHandler,\n  forwardRef,\n  InputHTMLAttributes,\n  memo,\n  useCallback,\n} from \"react\";\n\nimport { SearchIcon } from \"./\";\nimport { Field } from \"./Field\";\n\nexport type SearchFieldProps = {\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   * The id of the `input` element.\n   */\n  id?: string;\n  /**\n   * If `true`, the component is disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * This label won't show up visually, but it's required for accessibility.\n   */\n  label: string;\n  /**\n   * Callback fired when the `input` element loses focus.\n   */\n  onBlur?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  /**\n   * Callback fired when the value is changed.\n   */\n  onChange?: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;\n  /**\n   * Callback fired when the `input` element get focus.\n   */\n  onFocus?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  /**\n   * The short hint displayed in the `input` before the user enters a value.\n   */\n  placeholder?: string;\n  /**\n   * The value of the `input` element, required for a controlled component.\n   */\n  value?: string;\n};\n\nconst SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(\n  (\n    {\n      autoCompleteType,\n      autoFocus,\n      id: idOverride,\n      isDisabled = false,\n      label,\n      onChange,\n      onFocus,\n      onBlur,\n      placeholder,\n      value,\n    },\n    ref\n  ) => {\n    const renderFieldComponent = useCallback(\n      ({ ariaDescribedBy, id }) => (\n        <InputBase\n          aria-describedby={ariaDescribedBy}\n          autoComplete={autoCompleteType}\n          /* eslint-disable-next-line jsx-a11y/no-autofocus */\n          autoFocus={autoFocus}\n          id={id}\n          onChange={onChange}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          placeholder={placeholder}\n          ref={ref}\n          startAdornment={\n            <InputAdornment position=\"start\">\n              <SearchIcon />\n            </InputAdornment>\n          }\n          type=\"search\"\n          value={value}\n        />\n      ),\n      [\n        autoCompleteType,\n        autoFocus,\n        onChange,\n        onFocus,\n        onBlur,\n        placeholder,\n        ref,\n        value,\n      ]\n    );\n\n    return (\n      <Field\n        hasVisibleLabel={false}\n        id={idOverride}\n        isDisabled={isDisabled}\n        isRequired={false}\n        label={label}\n        renderFieldComponent={renderFieldComponent}\n      />\n    );\n  }\n);\n\nconst MemoizedSearchField = memo(SearchField);\n\nexport { MemoizedSearchField as SearchField };\n"],"mappings":";;AAaA,SAGEA,UAHF,EAKEC,IALF,EAMEC,WANF,QAOO,OAPP;SASSC,U;SACAC,K;;AA+CT,MAAMC,WAAW,GAAGL,UAAU,CAC5B,OAaEM,GAbF,KAcK;EAAA,IAbH;IACEC,gBADF;IAEEC,SAFF;IAGEC,EAAE,EAAEC,UAHN;IAIEC,UAAU,GAAG,KAJf;IAKEC,KALF;IAMEC,QANF;IAOEC,OAPF;IAQEC,MARF;IASEC,WATF;IAUEC;EAVF,CAaG;EACH,MAAMC,oBAAoB,GAAGhB,WAAW,CACtC;IAAA,IAAC;MAAEiB,eAAF;MAAmBV;IAAnB,CAAD;IAAA,OACE;MACE,oBAAkBU,eADpB;MAEE,YAAY,EAAEZ,gBAFhB;MAIE,SAAS,EAAEC,SAJb;MAKE,EAAE,EAAEC,EALN;MAME,QAAQ,EAAEI,QANZ;MAOE,OAAO,EAAEC,OAPX;MAQE,MAAM,EAAEC,MARV;MASE,WAAW,EAAEC,WATf;MAUE,GAAG,EAAEV,GAVP;MAWE,cAAc,EACZ;QAAgB,QAAQ,EAAC,OAAzB;QAAA,UACE,KAAC,UAAD;MADF,EAZJ;MAgBE,IAAI,EAAC,QAhBP;MAiBE,KAAK,EAAEW;IAjBT,EADF;EAAA,CADsC,EAsBtC,CACEV,gBADF,EAEEC,SAFF,EAGEK,QAHF,EAIEC,OAJF,EAKEC,MALF,EAMEC,WANF,EAOEV,GAPF,EAQEW,KARF,CAtBsC,CAAxC;EAkCA,OACE,KAAC,KAAD;IACE,eAAe,EAAE,KADnB;IAEE,EAAE,EAAEP,UAFN;IAGE,UAAU,EAAEC,UAHd;IAIE,UAAU,EAAE,KAJd;IAKE,KAAK,EAAEC,KALT;IAME,oBAAoB,EAAEM;EANxB,EADF;AAUD,CA5D2B,CAA9B;AA+DA,MAAME,mBAAmB,GAAGnB,IAAI,CAACI,WAAD,CAAhC;AAEA,SAASe,mBAAmB,IAAIf,WAAhC"}
+{"version":3,"file":"SearchField.js","names":["forwardRef","memo","useCallback","SearchIcon","Field","SearchField","ref","autoCompleteType","hasInitialFocus","id","idOverride","isDisabled","label","onChange","onFocus","onBlur","placeholder","value","renderFieldComponent","ariaDescribedBy","MemoizedSearchField"],"sources":["../src/SearchField.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { InputAdornment, InputBase } from \"@mui/material\";\nimport {\n  ChangeEventHandler,\n  FocusEventHandler,\n  forwardRef,\n  InputHTMLAttributes,\n  memo,\n  useCallback,\n} from \"react\";\n\nimport { SearchIcon } from \"./\";\nimport { Field } from \"./Field\";\n\nexport type SearchFieldProps = {\n  /**\n   * This prop helps users to fill forms faster, especially on mobile devices.\n   * The name can be confusing, as it's more like an autofill.\n   * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).\n   */\n  autoCompleteType?: InputHTMLAttributes<HTMLInputElement>[\"autoComplete\"];\n  /**\n   * If `true`, the component will receive focus automatically.\n   */\n  hasInitialFocus?: boolean;\n  /**\n   * The id of the `input` element.\n   */\n  id?: string;\n  /**\n   * If `true`, the component is disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * This label won't show up visually, but it's required for accessibility.\n   */\n  label: string;\n  /**\n   * Callback fired when the `input` element loses focus.\n   */\n  onBlur?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  /**\n   * Callback fired when the value is changed.\n   */\n  onChange?: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;\n  /**\n   * Callback fired when the `input` element get focus.\n   */\n  onFocus?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  /**\n   * The short hint displayed in the `input` before the user enters a value.\n   */\n  placeholder?: string;\n  /**\n   * The value of the `input` element, required for a controlled component.\n   */\n  value?: string;\n};\n\nconst SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(\n  (\n    {\n      autoCompleteType,\n      hasInitialFocus,\n      id: idOverride,\n      isDisabled = false,\n      label,\n      onChange,\n      onFocus,\n      onBlur,\n      placeholder,\n      value,\n    },\n    ref\n  ) => {\n    const renderFieldComponent = useCallback(\n      ({ ariaDescribedBy, id }) => (\n        <InputBase\n          aria-describedby={ariaDescribedBy}\n          autoComplete={autoCompleteType}\n          /* eslint-disable-next-line jsx-a11y/no-autofocus */\n          autoFocus={hasInitialFocus}\n          id={id}\n          name={id}\n          onChange={onChange}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          placeholder={placeholder}\n          ref={ref}\n          startAdornment={\n            <InputAdornment position=\"start\">\n              <SearchIcon />\n            </InputAdornment>\n          }\n          type=\"search\"\n          value={value}\n        />\n      ),\n      [\n        autoCompleteType,\n        hasInitialFocus,\n        onChange,\n        onFocus,\n        onBlur,\n        placeholder,\n        ref,\n        value,\n      ]\n    );\n\n    return (\n      <Field\n        fieldType=\"single\"\n        hasVisibleLabel={false}\n        id={idOverride}\n        isDisabled={isDisabled}\n        isOptional={true}\n        label={label}\n        renderFieldComponent={renderFieldComponent}\n      />\n    );\n  }\n);\n\nconst MemoizedSearchField = memo(SearchField);\n\nexport { MemoizedSearchField as SearchField };\n"],"mappings":";;AAaA,SAGEA,UAHF,EAKEC,IALF,EAMEC,WANF,QAOO,OAPP;SASSC,U;SACAC,K;;AA+CT,MAAMC,WAAW,GAAGL,UAAU,CAC5B,OAaEM,GAbF,KAcK;EAAA,IAbH;IACEC,gBADF;IAEEC,eAFF;IAGEC,EAAE,EAAEC,UAHN;IAIEC,UAAU,GAAG,KAJf;IAKEC,KALF;IAMEC,QANF;IAOEC,OAPF;IAQEC,MARF;IASEC,WATF;IAUEC;EAVF,CAaG;EACH,MAAMC,oBAAoB,GAAGhB,WAAW,CACtC;IAAA,IAAC;MAAEiB,eAAF;MAAmBV;IAAnB,CAAD;IAAA,OACE;MACE,oBAAkBU,eADpB;MAEE,YAAY,EAAEZ,gBAFhB;MAIE,SAAS,EAAEC,eAJb;MAKE,EAAE,EAAEC,EALN;MAME,IAAI,EAAEA,EANR;MAOE,QAAQ,EAAEI,QAPZ;MAQE,OAAO,EAAEC,OARX;MASE,MAAM,EAAEC,MATV;MAUE,WAAW,EAAEC,WAVf;MAWE,GAAG,EAAEV,GAXP;MAYE,cAAc,EACZ;QAAgB,QAAQ,EAAC,OAAzB;QAAA,UACE,KAAC,UAAD;MADF,EAbJ;MAiBE,IAAI,EAAC,QAjBP;MAkBE,KAAK,EAAEW;IAlBT,EADF;EAAA,CADsC,EAuBtC,CACEV,gBADF,EAEEC,eAFF,EAGEK,QAHF,EAIEC,OAJF,EAKEC,MALF,EAMEC,WANF,EAOEV,GAPF,EAQEW,KARF,CAvBsC,CAAxC;EAmCA,OACE,KAAC,KAAD;IACE,SAAS,EAAC,QADZ;IAEE,eAAe,EAAE,KAFnB;IAGE,EAAE,EAAEP,UAHN;IAIE,UAAU,EAAEC,UAJd;IAKE,UAAU,EAAE,IALd;IAME,KAAK,EAAEC,KANT;IAOE,oBAAoB,EAAEM;EAPxB,EADF;AAWD,CA9D2B,CAA9B;AAiEA,MAAME,mBAAmB,GAAGnB,IAAI,CAACI,WAAD,CAAhC;AAEA,SAASe,mBAAmB,IAAIf,WAAhC"}

package/dist/Status.js.map

@@ -1 +1 @@
-{"version":3,"file":"Status.js","names":["Chip","Status","severity","label"],"sources":["../src/Status.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 { Chip } from \"./\";\n\nexport interface StatusProps {\n  /**\n   * Determine the color and icon of the alert\n   */\n  severity: \"default\" | \"error\" | \"info\" | \"success\" | \"warning\";\n\n  /**\n   * The text content of the status\n   */\n  label: string;\n}\n\nexport const Status = ({ severity, label }: StatusProps) => (\n  <Chip label={label} color={severity} variant=\"status\" />\n);\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;SAESA,I;;AAcT,OAAO,MAAMC,MAAM,GAAG;EAAA,IAAC;IAAEC,QAAF;IAAYC;EAAZ,CAAD;EAAA,OACpB,KAAC,IAAD;IAAM,KAAK,EAAEA,KAAb;IAAoB,KAAK,EAAED,QAA3B;IAAqC,OAAO,EAAC;EAA7C,EADoB;AAAA,CAAf"}
+{"version":3,"file":"Status.js","names":["Chip","Status","severity","label"],"sources":["../src/Status.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 { Chip } from \"./\";\n\nexport type StatusProps = {\n  /**\n   * Determine the color and icon of the alert\n   */\n  severity: \"default\" | \"error\" | \"info\" | \"success\" | \"warning\";\n\n  /**\n   * The text content of the status\n   */\n  label: string;\n};\n\nexport const Status = ({ severity, label }: StatusProps) => (\n  <Chip label={label} color={severity} variant=\"status\" />\n);\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;SAESA,I;;AAcT,OAAO,MAAMC,MAAM,GAAG;EAAA,IAAC;IAAEC,QAAF;IAAYC;EAAZ,CAAD;EAAA,OACpB,KAAC,IAAD;IAAM,KAAK,EAAEA,KAAb;IAAoB,KAAK,EAAED,QAA3B;IAAqC,OAAO,EAAC;EAA7C,EADoB;AAAA,CAAf"}

package/dist/TextField.js

@@ -1,24 +1,25 @@
 import _InputBase from "@mui/material/InputBase";
+import _InputAdornment from "@mui/material/InputAdornment";
 import { forwardRef, memo, useCallback } from "react";
 import { Field } from "./Field.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const TextField = forwardRef((_ref, ref) => {
   let {
     autoCompleteType,
-    autoFocus,
+    hasInitialFocus,
     endAdornment,
     errorMessage,
     hint,
     id: idOverride,
     isDisabled = false,
     isMultiline = false,
+    isOptional = false,
     isReadOnly,
-    isRequired = true,
     label,
     onBlur,
     onChange,
     onFocus,
-    optionalLabel,
+    optionalLabel = "Optional",
     placeholder,
     startAdornment,
     type = "text",
@@ -32,28 +33,36 @@ const TextField = forwardRef((_ref, ref) => {
     return _jsx(_InputBase, {
       "aria-describedby": ariaDescribedBy,
       autoComplete: autoCompleteType,
-      autoFocus: autoFocus,
-      endAdornment: endAdornment,
+      autoFocus: hasInitialFocus,
+      endAdornment: endAdornment && _jsx(_InputAdornment, {
+        position: "end",
+        children: endAdornment
+      }),
       id: id,
       multiline: isMultiline,
+      name: id,
       onBlur: onBlur,
       onChange: onChange,
       onFocus: onFocus,
       placeholder: placeholder,
       readOnly: isReadOnly,
       ref: ref,
-      startAdornment: startAdornment,
+      startAdornment: startAdornment && _jsx(_InputAdornment, {
+        position: "start",
+        children: startAdornment
+      }),
       type: type,
       value: value
     });
-  }, [autoCompleteType, autoFocus, endAdornment, isMultiline, onChange, onFocus, onBlur, placeholder, isReadOnly, ref, startAdornment, type, value]);
+  }, [autoCompleteType, hasInitialFocus, endAdornment, isMultiline, onChange, onFocus, onBlur, placeholder, isReadOnly, ref, startAdornment, type, value]);
   return _jsx(Field, {
     errorMessage: errorMessage,
+    fieldType: "single",
     hasVisibleLabel: true,
     hint: hint,
     id: idOverride,
     isDisabled: isDisabled,
-    isRequired: isRequired,
+    isOptional: isOptional,
     label: label,
     optionalLabel: optionalLabel,
     renderFieldComponent: renderFieldComponent

package/dist/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","names":["forwardRef","memo","useCallback","Field","TextField","ref","autoCompleteType","autoFocus","endAdornment","errorMessage","hint","id","idOverride","isDisabled","isMultiline","isReadOnly","isRequired","label","onBlur","onChange","onFocus","optionalLabel","placeholder","startAdornment","type","value","renderFieldComponent","ariaDescribedBy","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 { InputBase } from \"@mui/material\";\nimport {\n  ChangeEventHandler,\n  FocusEventHandler,\n  forwardRef,\n  InputHTMLAttributes,\n  memo,\n  ReactNode,\n  useCallback,\n} from \"react\";\n\nimport { Field } from \"./Field\";\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   * 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?: \"email\" | \"number\" | \"tel\" | \"text\" | \"url\";\n  /**\n   * The value of the `input` element, required for a controlled component.\n   */\n  value?: string;\n};\n\nconst TextField = forwardRef<HTMLInputElement, TextFieldProps>(\n  (\n    {\n      autoCompleteType,\n      autoFocus,\n      endAdornment,\n      errorMessage,\n      hint,\n      id: idOverride,\n      isDisabled = false,\n      isMultiline = false,\n      isReadOnly,\n      isRequired = true,\n      label,\n      onBlur,\n      onChange,\n      onFocus,\n      optionalLabel,\n      placeholder,\n      startAdornment,\n      type = \"text\",\n      value,\n    },\n    ref\n  ) => {\n    const renderFieldComponent = useCallback(\n      ({ ariaDescribedBy, id }) => (\n        <InputBase\n          aria-describedby={ariaDescribedBy}\n          autoComplete={autoCompleteType}\n          /* eslint-disable-next-line jsx-a11y/no-autofocus */\n          autoFocus={autoFocus}\n          endAdornment={endAdornment}\n          id={id}\n          multiline={isMultiline}\n          onBlur={onBlur}\n          onChange={onChange}\n          onFocus={onFocus}\n          placeholder={placeholder}\n          readOnly={isReadOnly}\n          ref={ref}\n          startAdornment={startAdornment}\n          type={type}\n          value={value}\n        />\n      ),\n      [\n        autoCompleteType,\n        autoFocus,\n        endAdornment,\n        isMultiline,\n        onChange,\n        onFocus,\n        onBlur,\n        placeholder,\n        isReadOnly,\n        ref,\n        startAdornment,\n        type,\n        value,\n      ]\n    );\n\n    return (\n      <Field\n        errorMessage={errorMessage}\n        hasVisibleLabel\n        hint={hint}\n        id={idOverride}\n        isDisabled={isDisabled}\n        isRequired={isRequired}\n        label={label}\n        optionalLabel={optionalLabel}\n        renderFieldComponent={renderFieldComponent}\n      />\n    );\n  }\n);\n\nconst MemoizedTextField = memo(TextField);\n\nexport { MemoizedTextField as TextField };\n"],"mappings":";AAaA,SAGEA,UAHF,EAKEC,IALF,EAOEC,WAPF,QAQO,OARP;SAUSC,K;;AAmFT,MAAMC,SAAS,GAAGJ,UAAU,CAC1B,OAsBEK,GAtBF,KAuBK;EAAA,IAtBH;IACEC,gBADF;IAEEC,SAFF;IAGEC,YAHF;IAIEC,YAJF;IAKEC,IALF;IAMEC,EAAE,EAAEC,UANN;IAOEC,UAAU,GAAG,KAPf;IAQEC,WAAW,GAAG,KARhB;IASEC,UATF;IAUEC,UAAU,GAAG,IAVf;IAWEC,KAXF;IAYEC,MAZF;IAaEC,QAbF;IAcEC,OAdF;IAeEC,aAfF;IAgBEC,WAhBF;IAiBEC,cAjBF;IAkBEC,IAAI,GAAG,MAlBT;IAmBEC;EAnBF,CAsBG;EACH,MAAMC,oBAAoB,GAAGxB,WAAW,CACtC;IAAA,IAAC;MAAEyB,eAAF;MAAmBhB;IAAnB,CAAD;IAAA,OACE;MACE,oBAAkBgB,eADpB;MAEE,YAAY,EAAErB,gBAFhB;MAIE,SAAS,EAAEC,SAJb;MAKE,YAAY,EAAEC,YALhB;MAME,EAAE,EAAEG,EANN;MAOE,SAAS,EAAEG,WAPb;MAQE,MAAM,EAAEI,MARV;MASE,QAAQ,EAAEC,QATZ;MAUE,OAAO,EAAEC,OAVX;MAWE,WAAW,EAAEE,WAXf;MAYE,QAAQ,EAAEP,UAZZ;MAaE,GAAG,EAAEV,GAbP;MAcE,cAAc,EAAEkB,cAdlB;MAeE,IAAI,EAAEC,IAfR;MAgBE,KAAK,EAAEC;IAhBT,EADF;EAAA,CADsC,EAqBtC,CACEnB,gBADF,EAEEC,SAFF,EAGEC,YAHF,EAIEM,WAJF,EAKEK,QALF,EAMEC,OANF,EAOEF,MAPF,EAQEI,WARF,EASEP,UATF,EAUEV,GAVF,EAWEkB,cAXF,EAYEC,IAZF,EAaEC,KAbF,CArBsC,CAAxC;EAsCA,OACE,KAAC,KAAD;IACE,YAAY,EAAEhB,YADhB;IAEE,eAAe,MAFjB;IAGE,IAAI,EAAEC,IAHR;IAIE,EAAE,EAAEE,UAJN;IAKE,UAAU,EAAEC,UALd;IAME,UAAU,EAAEG,UANd;IAOE,KAAK,EAAEC,KAPT;IAQE,aAAa,EAAEI,aARjB;IASE,oBAAoB,EAAEK;EATxB,EADF;AAaD,CA5EyB,CAA5B;AA+EA,MAAME,iBAAiB,GAAG3B,IAAI,CAACG,SAAD,CAA9B;AAEA,SAASwB,iBAAiB,IAAIxB,SAA9B"}
+{"version":3,"file":"TextField.js","names":["forwardRef","memo","useCallback","Field","TextField","ref","autoCompleteType","hasInitialFocus","endAdornment","errorMessage","hint","id","idOverride","isDisabled","isMultiline","isOptional","isReadOnly","label","onBlur","onChange","onFocus","optionalLabel","placeholder","startAdornment","type","value","renderFieldComponent","ariaDescribedBy","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 { InputAdornment, InputBase } from \"@mui/material\";\nimport {\n  ChangeEventHandler,\n  FocusEventHandler,\n  forwardRef,\n  InputHTMLAttributes,\n  memo,\n  ReactElement,\n  useCallback,\n} from \"react\";\n\nimport { Field } from \"./Field\";\nimport { Icon } from \"./Icon\";\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?: string | ReactElement<typeof Icon>;\n  /**\n   * If `error` is not undefined, the `input` will indicate an error.\n   */\n  errorMessage?: string;\n  /**\n   * If `true`, the component will receive focus automatically.\n   */\n  hasInitialFocus?: boolean;\n  /**\n   * The helper text content.\n   */\n  hint?: string;\n  /**\n   * The id of the `input` element.\n   */\n  id?: string;\n  /**\n   * If `true`, the component is disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * If `true`, a [TextareaAutosize](/material-ui/react-textarea-autosize/) element is rendered.\n   */\n  isMultiline?: boolean;\n  /**\n   * If `true`, the `input` element is not required.\n   */\n  isOptional?: boolean;\n  /**\n   * It prevents the user from changing the value of the field\n   */\n  isReadOnly?: 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 it's 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?: string | ReactElement<typeof Icon>;\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?: \"email\" | \"number\" | \"tel\" | \"text\" | \"url\";\n  /**\n   * The value of the `input` element, required for a controlled component.\n   */\n  value?: string;\n};\n\nconst TextField = forwardRef<HTMLInputElement, TextFieldProps>(\n  (\n    {\n      autoCompleteType,\n      hasInitialFocus,\n      endAdornment,\n      errorMessage,\n      hint,\n      id: idOverride,\n      isDisabled = false,\n      isMultiline = false,\n      isOptional = false,\n      isReadOnly,\n      label,\n      onBlur,\n      onChange,\n      onFocus,\n      optionalLabel = \"Optional\",\n      placeholder,\n      startAdornment,\n      type = \"text\",\n      value,\n    },\n    ref\n  ) => {\n    const renderFieldComponent = useCallback(\n      ({ ariaDescribedBy, id }) => (\n        <InputBase\n          aria-describedby={ariaDescribedBy}\n          autoComplete={autoCompleteType}\n          /* eslint-disable-next-line jsx-a11y/no-autofocus */\n          autoFocus={hasInitialFocus}\n          endAdornment={\n            endAdornment && (\n              <InputAdornment position=\"end\">{endAdornment}</InputAdornment>\n            )\n          }\n          id={id}\n          multiline={isMultiline}\n          name={id}\n          onBlur={onBlur}\n          onChange={onChange}\n          onFocus={onFocus}\n          placeholder={placeholder}\n          readOnly={isReadOnly}\n          ref={ref}\n          startAdornment={\n            startAdornment && (\n              <InputAdornment position=\"start\">{startAdornment}</InputAdornment>\n            )\n          }\n          type={type}\n          value={value}\n        />\n      ),\n      [\n        autoCompleteType,\n        hasInitialFocus,\n        endAdornment,\n        isMultiline,\n        onChange,\n        onFocus,\n        onBlur,\n        placeholder,\n        isReadOnly,\n        ref,\n        startAdornment,\n        type,\n        value,\n      ]\n    );\n\n    return (\n      <Field\n        errorMessage={errorMessage}\n        fieldType=\"single\"\n        hasVisibleLabel\n        hint={hint}\n        id={idOverride}\n        isDisabled={isDisabled}\n        isOptional={isOptional}\n        label={label}\n        optionalLabel={optionalLabel}\n        renderFieldComponent={renderFieldComponent}\n      />\n    );\n  }\n);\n\nconst MemoizedTextField = memo(TextField);\n\nexport { MemoizedTextField as TextField };\n"],"mappings":";;AAaA,SAGEA,UAHF,EAKEC,IALF,EAOEC,WAPF,QAQO,OARP;SAUSC,K;;AAoFT,MAAMC,SAAS,GAAGJ,UAAU,CAC1B,OAsBEK,GAtBF,KAuBK;EAAA,IAtBH;IACEC,gBADF;IAEEC,eAFF;IAGEC,YAHF;IAIEC,YAJF;IAKEC,IALF;IAMEC,EAAE,EAAEC,UANN;IAOEC,UAAU,GAAG,KAPf;IAQEC,WAAW,GAAG,KARhB;IASEC,UAAU,GAAG,KATf;IAUEC,UAVF;IAWEC,KAXF;IAYEC,MAZF;IAaEC,QAbF;IAcEC,OAdF;IAeEC,aAAa,GAAG,UAflB;IAgBEC,WAhBF;IAiBEC,cAjBF;IAkBEC,IAAI,GAAG,MAlBT;IAmBEC;EAnBF,CAsBG;EACH,MAAMC,oBAAoB,GAAGxB,WAAW,CACtC;IAAA,IAAC;MAAEyB,eAAF;MAAmBhB;IAAnB,CAAD;IAAA,OACE;MACE,oBAAkBgB,eADpB;MAEE,YAAY,EAAErB,gBAFhB;MAIE,SAAS,EAAEC,eAJb;MAKE,YAAY,EACVC,YAAY,IACV;QAAgB,QAAQ,EAAC,KAAzB;QAAA,UAAgCA;MAAhC,EAPN;MAUE,EAAE,EAAEG,EAVN;MAWE,SAAS,EAAEG,WAXb;MAYE,IAAI,EAAEH,EAZR;MAaE,MAAM,EAAEO,MAbV;MAcE,QAAQ,EAAEC,QAdZ;MAeE,OAAO,EAAEC,OAfX;MAgBE,WAAW,EAAEE,WAhBf;MAiBE,QAAQ,EAAEN,UAjBZ;MAkBE,GAAG,EAAEX,GAlBP;MAmBE,cAAc,EACZkB,cAAc,IACZ;QAAgB,QAAQ,EAAC,OAAzB;QAAA,UAAkCA;MAAlC,EArBN;MAwBE,IAAI,EAAEC,IAxBR;MAyBE,KAAK,EAAEC;IAzBT,EADF;EAAA,CADsC,EA8BtC,CACEnB,gBADF,EAEEC,eAFF,EAGEC,YAHF,EAIEM,WAJF,EAKEK,QALF,EAMEC,OANF,EAOEF,MAPF,EAQEI,WARF,EASEN,UATF,EAUEX,GAVF,EAWEkB,cAXF,EAYEC,IAZF,EAaEC,KAbF,CA9BsC,CAAxC;EA+CA,OACE,KAAC,KAAD;IACE,YAAY,EAAEhB,YADhB;IAEE,SAAS,EAAC,QAFZ;IAGE,eAAe,MAHjB;IAIE,IAAI,EAAEC,IAJR;IAKE,EAAE,EAAEE,UALN;IAME,UAAU,EAAEC,UANd;IAOE,UAAU,EAAEE,UAPd;IAQE,KAAK,EAAEE,KART;IASE,aAAa,EAAEI,aATjB;IAUE,oBAAoB,EAAEK;EAVxB,EADF;AAcD,CAtFyB,CAA5B;AAyFA,MAAME,iBAAiB,GAAG3B,IAAI,CAACG,SAAD,CAA9B;AAEA,SAASwB,iBAAiB,IAAIxB,SAA9B"}

package/dist/Toast.js

@@ -0,0 +1,72 @@
+/*!
+ * 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 { useEffect, memo, forwardRef, useState, useCallback } from "react";
+import { Alert, AlertTitle, CloseIcon, Link, Snackbar, visuallyHidden } from "./index.js";
+import { Button } from "./Button.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const ClickAwayListenerProps = {
+  onClickAway: () => false
+};
+const Toast = forwardRef(_ref => {
+  let {
+    autoHideDuration = 6000,
+    isDismissable,
+    linkText,
+    linkUrl,
+    isVisible: isVisibleProp,
+    onHide: onHideProp,
+    role,
+    severity,
+    text
+  } = _ref;
+  const [isVisible, setIsVisible] = useState(isVisibleProp);
+  useEffect(() => {
+    setIsVisible(isVisibleProp);
+  }, [isVisibleProp]);
+  const onHide = useCallback(() => {
+    setIsVisible(false);
+    onHideProp?.();
+  }, [onHideProp]);
+  return _jsx(Snackbar, {
+    open: isVisible,
+    autoHideDuration: isDismissable || autoHideDuration <= 0 ? undefined : autoHideDuration,
+    onClose: onHide,
+    className: "Toast",
+    ClickAwayListenerProps: ClickAwayListenerProps,
+    children: _jsxs(Alert, {
+      action: isDismissable === true && _jsx(Button, {
+        "aria-label": "close",
+        onClick: onHide,
+        size: "small",
+        startIcon: _jsx(CloseIcon, {}),
+        variant: "floating"
+      }),
+      role: role,
+      severity: severity,
+      variant: "toast",
+      children: [_jsxs(AlertTitle, {
+        children: [_jsxs("span", {
+          style: visuallyHidden,
+          children: [severity, ":"]
+        }), text]
+      }), linkUrl && _jsx(Link, {
+        href: linkUrl,
+        variant: "monochrome",
+        children: linkText
+      })]
+    })
+  });
+});
+const MemoizedToast = memo(Toast);
+export { MemoizedToast as Toast };
+//# sourceMappingURL=Toast.js.map

package/dist/Toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.js","names":["useEffect","memo","forwardRef","useState","useCallback","Alert","AlertTitle","CloseIcon","Link","Snackbar","visuallyHidden","Button","ClickAwayListenerProps","onClickAway","Toast","autoHideDuration","isDismissable","linkText","linkUrl","isVisible","isVisibleProp","onHide","onHideProp","role","severity","text","setIsVisible","undefined","MemoizedToast"],"sources":["../src/Toast.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 { useEffect, memo, forwardRef, useState, useCallback } from \"react\";\nimport {\n  Alert,\n  AlertTitle,\n  CloseIcon,\n  Link,\n  Snackbar,\n  visuallyHidden,\n} from \".\";\nimport { Button } from \"./Button\";\n\nexport type ToastProps = {\n  /**\n   * If set, this determines how long the toast should appear before automatically disappearing in milliseconds.\n   * It will only take effect if the toast is not dismissible.\n   * If left blank, it defaults to 6000.\n   */\n  autoHideDuration?: number;\n  /**\n   * If `true`, the alert will include a close button.\n   */\n  isDismissable?: boolean;\n  /**\n   * If true, the Toast is visible\n   */\n  isVisible?: boolean;\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   * An optional function to run when the Toast is closed.\n   */\n  onHide?: () => void;\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 ClickAwayListenerProps = { onClickAway: () => false };\n\nconst Toast = forwardRef(\n  ({\n    autoHideDuration = 6000,\n    isDismissable,\n    linkText,\n    linkUrl,\n    isVisible: isVisibleProp,\n    onHide: onHideProp,\n    role,\n    severity,\n    text,\n  }: ToastProps) => {\n    const [isVisible, setIsVisible] = useState(isVisibleProp);\n\n    useEffect(() => {\n      setIsVisible(isVisibleProp);\n    }, [isVisibleProp]);\n\n    const onHide = useCallback(() => {\n      setIsVisible(false);\n      onHideProp?.();\n    }, [onHideProp]);\n\n    return (\n      <Snackbar\n        open={isVisible}\n        autoHideDuration={\n          isDismissable || autoHideDuration <= 0 ? undefined : autoHideDuration\n        }\n        onClose={onHide}\n        className=\"Toast\"\n        ClickAwayListenerProps={ClickAwayListenerProps}\n      >\n        <Alert\n          action={\n            isDismissable === true && (\n              <Button\n                aria-label=\"close\"\n                onClick={onHide}\n                size=\"small\"\n                startIcon={<CloseIcon />}\n                variant=\"floating\"\n              />\n            )\n          }\n          role={role}\n          severity={severity}\n          variant=\"toast\"\n        >\n          <AlertTitle>\n            <span style={visuallyHidden}>{severity}:</span>\n            {text}\n          </AlertTitle>\n          {linkUrl && (\n            <Link href={linkUrl} variant=\"monochrome\">\n              {linkText}\n            </Link>\n          )}\n        </Alert>\n      </Snackbar>\n    );\n  }\n);\n\nconst MemoizedToast = memo(Toast);\n\nexport { MemoizedToast as Toast };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,SAASA,SAAT,EAAoBC,IAApB,EAA0BC,UAA1B,EAAsCC,QAAtC,EAAgDC,WAAhD,QAAmE,OAAnE;SAEEC,K,EACAC,U,EACAC,S,EACAC,I,EACAC,Q,EACAC,c;SAEOC,M;;;AA+CT,MAAMC,sBAAsB,GAAG;EAAEC,WAAW,EAAE,MAAM;AAArB,CAA/B;AAEA,MAAMC,KAAK,GAAGZ,UAAU,CACtB,QAUkB;EAAA,IAVjB;IACCa,gBAAgB,GAAG,IADpB;IAECC,aAFD;IAGCC,QAHD;IAICC,OAJD;IAKCC,SAAS,EAAEC,aALZ;IAMCC,MAAM,EAAEC,UANT;IAOCC,IAPD;IAQCC,QARD;IASCC;EATD,CAUiB;EAChB,MAAM,CAACN,SAAD,EAAYO,YAAZ,IAA4BvB,QAAQ,CAACiB,aAAD,CAA1C;EAEApB,SAAS,CAAC,MAAM;IACd0B,YAAY,CAACN,aAAD,CAAZ;EACD,CAFQ,EAEN,CAACA,aAAD,CAFM,CAAT;EAIA,MAAMC,MAAM,GAAGjB,WAAW,CAAC,MAAM;IAC/BsB,YAAY,CAAC,KAAD,CAAZ;IACAJ,UAAU;EACX,CAHyB,EAGvB,CAACA,UAAD,CAHuB,CAA1B;EAKA,OACE,KAAC,QAAD;IACE,IAAI,EAAEH,SADR;IAEE,gBAAgB,EACdH,aAAa,IAAID,gBAAgB,IAAI,CAArC,GAAyCY,SAAzC,GAAqDZ,gBAHzD;IAKE,OAAO,EAAEM,MALX;IAME,SAAS,EAAC,OANZ;IAOE,sBAAsB,EAAET,sBAP1B;IAAA,UASE,MAAC,KAAD;MACE,MAAM,EACJI,aAAa,KAAK,IAAlB,IACE,KAAC,MAAD;QACE,cAAW,OADb;QAEE,OAAO,EAAEK,MAFX;QAGE,IAAI,EAAC,OAHP;QAIE,SAAS,EAAE,KAAC,SAAD,KAJb;QAKE,OAAO,EAAC;MALV,EAHN;MAYE,IAAI,EAAEE,IAZR;MAaE,QAAQ,EAAEC,QAbZ;MAcE,OAAO,EAAC,OAdV;MAAA,WAgBE,MAAC,UAAD;QAAA,WACE;UAAM,KAAK,EAAEd,cAAb;UAAA,WAA8Bc,QAA9B;QAAA,EADF,EAEGC,IAFH;MAAA,EAhBF,EAoBGP,OAAO,IACN,KAAC,IAAD;QAAM,IAAI,EAAEA,OAAZ;QAAqB,OAAO,EAAC,YAA7B;QAAA,UACGD;MADH,EArBJ;IAAA;EATF,EADF;AAsCD,CA7DqB,CAAxB;AAgEA,MAAMW,aAAa,GAAG3B,IAAI,CAACa,KAAD,CAA1B;AAEA,SAASc,aAAa,IAAId,KAA1B"}

package/dist/ToastStack.js

@@ -0,0 +1,33 @@
+/*!
+ * 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 { Box, Snackbar } from "./index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const ToastStack = _ref => {
+  let {
+    children
+  } = _ref;
+  return _jsx(Snackbar, {
+    open: true,
+    children: _jsx(Box, {
+      display: "flex",
+      flexDirection: "column-reverse",
+      gap: 2,
+      children: children
+    })
+  });
+};
+
+const MemoizedToastStack = memo(ToastStack);
+export { MemoizedToastStack as ToastStack };
+//# sourceMappingURL=ToastStack.js.map

package/dist/ToastStack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastStack.js","names":["memo","Box","Snackbar","ToastStack","children","MemoizedToastStack"],"sources":["../src/ToastStack.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, ReactElement } from \"react\";\nimport { Box, Snackbar } from \".\";\nimport { Toast } from \"./Toast\";\n\nexport type ToastStackProps = {\n  children: ReactElement<typeof Toast> | Array<ReactElement<typeof Toast>>;\n};\n\nconst ToastStack = ({ children }: ToastStackProps) => {\n  return (\n    <Snackbar open={true}>\n      <Box display=\"flex\" flexDirection=\"column-reverse\" gap={2}>\n        {children}\n      </Box>\n    </Snackbar>\n  );\n};\n\nconst MemoizedToastStack = memo(ToastStack);\n\nexport { MemoizedToastStack as ToastStack };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,SAASA,IAAT,QAAmC,OAAnC;SACSC,G,EAAKC,Q;;;AAOd,MAAMC,UAAU,GAAG,QAAmC;EAAA,IAAlC;IAAEC;EAAF,CAAkC;EACpD,OACE,KAAC,QAAD;IAAU,IAAI,EAAE,IAAhB;IAAA,UACE,KAAC,GAAD;MAAK,OAAO,EAAC,MAAb;MAAoB,aAAa,EAAC,gBAAlC;MAAmD,GAAG,EAAE,CAAxD;MAAA,UACGA;IADH;EADF,EADF;AAOD,CARD;;AAUA,MAAMC,kBAAkB,GAAGL,IAAI,CAACG,UAAD,CAA/B;AAEA,SAASE,kBAAkB,IAAIF,UAA/B"}