@okta/odyssey-react-mui 1.45.0 → 1.47.1

package/dist/esm/Dialog.js

@@ -15,8 +15,9 @@ import _DialogContentText from "@mui/material/DialogContentText";
  * See the License for the specific language governing permissions and limitations under the License.
  */
 import { cloneElement, memo, useCallback, useEffect, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
 import { Button } from "./Buttons/index.js";
+import { FullScreenOverlay } from "./FullScreenOverlay.js";
+import { useTranslation } from "./i18n.generated/i18n.js";
 import { CloseIcon } from "./icons.generated/index.js";
 import { useUniqueId } from "./useUniqueId.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -63,36 +64,38 @@ const Dialog = ({
   }) : children;
   const actionButtons = [tertiaryCallToActionComponent || callToActionLastComponent, secondaryCallToActionComponent || callToActionSecondComponent, primaryCallToActionComponent || callToActionFirstComponent].filter(Boolean);
   const handleCloseButtonClick = useCallback(event => onClose(event, "closeButtonClick"), [onClose]);
-  return _jsxs(_Dialog, {
-    "aria-labelledby": dialogLabelId,
-    "data-se": testId,
-    onClose: onClose,
-    open: isOpen,
-    children: [_jsxs(_DialogTitle, {
-      id: dialogTitleId,
-      translate: translate,
-      children: [_jsx("span", {
-        id: dialogLabelId,
-        children: title
-      }), _jsx(Button, {
-        ariaLabel: t("close.text"),
-        onClick: handleCloseButtonClick,
-        size: "small",
-        startIcon: _jsx(CloseIcon, {}),
-        variant: "floating"
+  return _jsx(FullScreenOverlay, {
+    children: _jsxs(_Dialog, {
+      "aria-labelledby": dialogLabelId,
+      "data-se": testId,
+      onClose: onClose,
+      open: isOpen,
+      children: [_jsxs(_DialogTitle, {
+        id: dialogTitleId,
+        translate: translate,
+        children: [_jsx("span", {
+          id: dialogLabelId,
+          children: title
+        }), _jsx(Button, {
+          ariaLabel: t("close.text"),
+          onClick: handleCloseButtonClick,
+          size: "small",
+          startIcon: _jsx(CloseIcon, {}),
+          variant: "floating"
+        })]
+      }), _jsx(_DialogContent, {
+        ...(isContentScrollable && {
+          tabIndex: 0
+        }),
+        dividers: isContentScrollable,
+        ref: dialogContentRef,
+        children: content
+      }), actionButtons.length > 0 && _jsx(_DialogActions, {
+        children: actionButtons.map((actionButton, index) => actionButton ? cloneElement(actionButton, {
+          key: index
+        }) : null)
       })]
-    }), _jsx(_DialogContent, {
-      ...(isContentScrollable && {
-        tabIndex: 0
-      }),
-      dividers: isContentScrollable,
-      ref: dialogContentRef,
-      children: content
-    }), actionButtons.length > 0 && _jsx(_DialogActions, {
-      children: actionButtons.map((actionButton, index) => actionButton ? cloneElement(actionButton, {
-        key: index
-      }) : null)
-    })]
+    })
   });
 };
 const MemoizedDialog = memo(Dialog);

package/dist/esm/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","names":["cloneElement","memo","useCallback","useEffect","useRef","useState","useTranslation","Button","CloseIcon","useUniqueId","jsx","_jsx","jsxs","_jsxs","Dialog","primaryCallToActionComponent","secondaryCallToActionComponent","tertiaryCallToActionComponent","callToActionFirstComponent","callToActionSecondComponent","callToActionLastComponent","children","isOpen","onClose","testId","title","translate","t","isContentScrollable","setIsContentScrollable","dialogContentRef","dialogTitleId","dialogLabelId","frameId","handleContentScroll","dialogContentElement","current","cancelAnimationFrame","scrollHeight","clientHeight","requestAnimationFrame","content","_DialogContentText","actionButtons","filter","Boolean","handleCloseButtonClick","event","_Dialog","open","_DialogTitle","id","ariaLabel","onClick","size","startIcon","variant","_DialogContent","tabIndex","dividers","ref","length","_DialogActions","map","actionButton","index","key","MemoizedDialog","displayName"],"sources":["../../src/Dialog.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  DialogActions,\n  DialogContent,\n  DialogContentText,\n  DialogTitle,\n  Dialog as MuiDialog,\n  DialogProps as MuiDialogProps,\n} from \"@mui/material\";\nimport {\n  cloneElement,\n  memo,\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { useTranslation } from \"react-i18next\";\n\nimport type { HtmlProps } from \"./HtmlProps.js\";\n\nimport { Button, ButtonProps } from \"./Buttons/index.js\";\nimport { CloseIcon } from \"./icons.generated/index.js\";\nimport { useUniqueId } from \"./useUniqueId.js\";\n\ntype MuiOnCloseEvent = Parameters<Required<MuiDialogProps>[\"onClose\"]>[0];\ntype MuiOnCloseReason = Parameters<Required<MuiDialogProps>[\"onClose\"]>[1];\nexport type DialogOnCloseReason = MuiOnCloseReason | \"closeButtonClick\";\n\nexport type DialogProps = {\n  /**\n   * @deprecated `aria-label` for close button comes from translation file\n   */\n  ariaLabel?: string;\n\n  /**\n   * @deprecated Will be removed in a future Odyssey version. Use `primaryCallToActionComponent` instead.\n   */\n  callToActionFirstComponent?: ReactElement<typeof Button>;\n  /**\n   * @deprecated Will be removed in a future Odyssey version. Use `tertiaryCallToActionComponent` instead.\n   */\n  callToActionLastComponent?: ReactElement<typeof Button>;\n  /**\n   * @deprecated Will be removed in a future Odyssey version. Use `secondaryCallToActionComponent` instead.\n   */\n  callToActionSecondComponent?: ReactElement<typeof Button>;\n  /**\n   * The content of the Dialog. May be a `string` or any other `ReactNode` or array of `ReactNode`s.\n   */\n  children: ReactNode;\n  /**\n   * When set to `true`, the Dialog will be visible.\n   */\n  isOpen: boolean;\n  /**\n   * Callback that controls what happens when the Dialog is dismissed.\n   */\n  onClose: (event: MuiOnCloseEvent, reason: DialogOnCloseReason) => void;\n  /**\n   * An optional Button object to be situated in the Dialog footer as the primary call to action.\n   */\n  primaryCallToActionComponent?: ReactElement<typeof Button>;\n\n  /**\n   * An optional Button object to be situated in the Dialog footer as the secondary call to action, alongside the `primaryCallToActionComponent`.\n   */\n  secondaryCallToActionComponent?: ReactElement<typeof Button>;\n\n  /**\n   * An optional Button object to be situated in the Dialog footer as the tertiary call to action, alongside the other `callToAction` components.\n   */\n  tertiaryCallToActionComponent?: ReactElement<typeof Button>;\n\n  /**\n   * The title of the Dialog.\n   */\n  title: string;\n} & Pick<HtmlProps, \"testId\" | \"translate\">;\n\nconst Dialog = ({\n  primaryCallToActionComponent,\n  secondaryCallToActionComponent,\n  tertiaryCallToActionComponent,\n  callToActionFirstComponent,\n  callToActionSecondComponent,\n  callToActionLastComponent,\n  children,\n  isOpen,\n  onClose,\n  testId,\n  title,\n  translate,\n}: DialogProps) => {\n  const { t } = useTranslation();\n  const [isContentScrollable, setIsContentScrollable] = useState(false);\n  const dialogContentRef = useRef<HTMLDivElement>(null);\n  const dialogTitleId = useUniqueId();\n  const dialogLabelId = useUniqueId();\n\n  useEffect(() => {\n    let frameId: number;\n\n    const handleContentScroll = () => {\n      const dialogContentElement = dialogContentRef.current;\n      if (dialogContentElement) {\n        cancelAnimationFrame(frameId);\n        setIsContentScrollable(\n          dialogContentElement.scrollHeight > dialogContentElement.clientHeight,\n        );\n      }\n      frameId = requestAnimationFrame(handleContentScroll);\n    };\n\n    if (isOpen) {\n      frameId = requestAnimationFrame(handleContentScroll);\n    }\n\n    return () => {\n      cancelAnimationFrame(frameId);\n    };\n  }, [isOpen]);\n\n  const content =\n    typeof children === \"string\" ? (\n      <DialogContentText>{children}</DialogContentText>\n    ) : (\n      children\n    );\n\n  // Prioritize new action button format (|| used as a fallback)\n  const actionButtons = [\n    tertiaryCallToActionComponent || callToActionLastComponent,\n    secondaryCallToActionComponent || callToActionSecondComponent,\n    primaryCallToActionComponent || callToActionFirstComponent,\n  ].filter(Boolean);\n\n  const handleCloseButtonClick = useCallback<\n    NonNullable<ButtonProps[\"onClick\"]>\n  >((event) => onClose(event, \"closeButtonClick\"), [onClose]);\n\n  return (\n    <MuiDialog\n      aria-labelledby={dialogLabelId}\n      data-se={testId}\n      onClose={onClose}\n      open={isOpen}\n    >\n      <DialogTitle\n        id={dialogTitleId} // We need to explicitly unset `id` for MUI to automatically set it based on the `aria-labelledby` prop passed to `MuiDialog`\n        translate={translate}\n      >\n        <span id={dialogLabelId}>{title}</span>\n        <Button\n          ariaLabel={t(\"close.text\")}\n          onClick={handleCloseButtonClick}\n          size=\"small\"\n          startIcon={<CloseIcon />}\n          variant=\"floating\"\n        />\n      </DialogTitle>\n      <DialogContent\n        {...(isContentScrollable && {\n          // Sets tabIndex on content element if scrollable so content is easier to navigate with the keyboard\n          tabIndex: 0,\n        })}\n        dividers={isContentScrollable}\n        ref={dialogContentRef}\n      >\n        {content}\n      </DialogContent>\n\n      {actionButtons.length > 0 && (\n        <DialogActions>\n          {actionButtons.map((actionButton, index) =>\n            actionButton ? cloneElement(actionButton, { key: index }) : null,\n          )}\n        </DialogActions>\n      )}\n    </MuiDialog>\n  );\n};\n\nconst MemoizedDialog = memo(Dialog);\nMemoizedDialog.displayName = \"Dialog\";\n\nexport { MemoizedDialog as Dialog };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Dialog.js","names":["cloneElement","memo","useCallback","useEffect","useRef","useState","Button","FullScreenOverlay","useTranslation","CloseIcon","useUniqueId","jsx","_jsx","jsxs","_jsxs","Dialog","primaryCallToActionComponent","secondaryCallToActionComponent","tertiaryCallToActionComponent","callToActionFirstComponent","callToActionSecondComponent","callToActionLastComponent","children","isOpen","onClose","testId","title","translate","t","isContentScrollable","setIsContentScrollable","dialogContentRef","dialogTitleId","dialogLabelId","frameId","handleContentScroll","dialogContentElement","current","cancelAnimationFrame","scrollHeight","clientHeight","requestAnimationFrame","content","_DialogContentText","actionButtons","filter","Boolean","handleCloseButtonClick","event","_Dialog","open","_DialogTitle","id","ariaLabel","onClick","size","startIcon","variant","_DialogContent","tabIndex","dividers","ref","length","_DialogActions","map","actionButton","index","key","MemoizedDialog","displayName"],"sources":["../../src/Dialog.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  Dialog as MuiDialog,\n  DialogActions as MuiDialogActions,\n  DialogContent as MuiDialogContent,\n  DialogContentText as MuiDialogContentText,\n  DialogProps as MuiDialogProps,\n  DialogTitle as MuiDialogTitle,\n} from \"@mui/material\";\nimport {\n  cloneElement,\n  memo,\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport type { HtmlProps } from \"./HtmlProps.js\";\n\nimport { Button, ButtonProps } from \"./Buttons/index.js\";\nimport { FullScreenOverlay } from \"./FullScreenOverlay.js\";\nimport { useTranslation } from \"./i18n.generated/i18n.js\";\nimport { CloseIcon } from \"./icons.generated/index.js\";\nimport { useUniqueId } from \"./useUniqueId.js\";\n\ntype MuiOnCloseEvent = Parameters<Required<MuiDialogProps>[\"onClose\"]>[0];\ntype MuiOnCloseReason = Parameters<Required<MuiDialogProps>[\"onClose\"]>[1];\nexport type DialogOnCloseReason = MuiOnCloseReason | \"closeButtonClick\";\n\nexport type DialogProps = {\n  /**\n   * @deprecated `aria-label` for close button comes from translation file\n   */\n  ariaLabel?: string;\n\n  /**\n   * @deprecated Will be removed in a future Odyssey version. Use `primaryCallToActionComponent` instead.\n   */\n  callToActionFirstComponent?: ReactElement<typeof Button>;\n  /**\n   * @deprecated Will be removed in a future Odyssey version. Use `tertiaryCallToActionComponent` instead.\n   */\n  callToActionLastComponent?: ReactElement<typeof Button>;\n  /**\n   * @deprecated Will be removed in a future Odyssey version. Use `secondaryCallToActionComponent` instead.\n   */\n  callToActionSecondComponent?: ReactElement<typeof Button>;\n  /**\n   * The content of the Dialog. May be a `string` or any other `ReactNode` or array of `ReactNode`s.\n   */\n  children: ReactNode;\n  /**\n   * When set to `true`, the Dialog will be visible.\n   */\n  isOpen: boolean;\n  /**\n   * Callback that controls what happens when the Dialog is dismissed.\n   */\n  onClose: (event: MuiOnCloseEvent, reason: DialogOnCloseReason) => void;\n  /**\n   * An optional Button object to be situated in the Dialog footer as the primary call to action.\n   */\n  primaryCallToActionComponent?: ReactElement<typeof Button>;\n\n  /**\n   * An optional Button object to be situated in the Dialog footer as the secondary call to action, alongside the `primaryCallToActionComponent`.\n   */\n  secondaryCallToActionComponent?: ReactElement<typeof Button>;\n\n  /**\n   * An optional Button object to be situated in the Dialog footer as the tertiary call to action, alongside the other `callToAction` components.\n   */\n  tertiaryCallToActionComponent?: ReactElement<typeof Button>;\n\n  /**\n   * The title of the Dialog.\n   */\n  title: string;\n} & Pick<HtmlProps, \"testId\" | \"translate\">;\n\nconst Dialog = ({\n  primaryCallToActionComponent,\n  secondaryCallToActionComponent,\n  tertiaryCallToActionComponent,\n  callToActionFirstComponent,\n  callToActionSecondComponent,\n  callToActionLastComponent,\n  children,\n  isOpen,\n  onClose,\n  testId,\n  title,\n  translate,\n}: DialogProps) => {\n  const { t } = useTranslation();\n  const [isContentScrollable, setIsContentScrollable] = useState(false);\n  const dialogContentRef = useRef<HTMLDivElement>(null);\n  const dialogTitleId = useUniqueId();\n  const dialogLabelId = useUniqueId();\n\n  useEffect(() => {\n    let frameId: number;\n\n    const handleContentScroll = () => {\n      const dialogContentElement = dialogContentRef.current;\n      if (dialogContentElement) {\n        cancelAnimationFrame(frameId);\n        setIsContentScrollable(\n          dialogContentElement.scrollHeight > dialogContentElement.clientHeight,\n        );\n      }\n      frameId = requestAnimationFrame(handleContentScroll);\n    };\n\n    if (isOpen) {\n      frameId = requestAnimationFrame(handleContentScroll);\n    }\n\n    return () => {\n      cancelAnimationFrame(frameId);\n    };\n  }, [isOpen]);\n\n  const content =\n    typeof children === \"string\" ? (\n      <MuiDialogContentText>{children}</MuiDialogContentText>\n    ) : (\n      children\n    );\n\n  // Prioritize new action button format (|| used as a fallback)\n  const actionButtons = [\n    tertiaryCallToActionComponent || callToActionLastComponent,\n    secondaryCallToActionComponent || callToActionSecondComponent,\n    primaryCallToActionComponent || callToActionFirstComponent,\n  ].filter(Boolean);\n\n  const handleCloseButtonClick = useCallback<\n    NonNullable<ButtonProps[\"onClick\"]>\n  >((event) => onClose(event, \"closeButtonClick\"), [onClose]);\n\n  return (\n    <FullScreenOverlay>\n      <MuiDialog\n        aria-labelledby={dialogLabelId}\n        data-se={testId}\n        onClose={onClose}\n        open={isOpen}\n      >\n        <MuiDialogTitle\n          id={dialogTitleId} // We need to explicitly unset `id` for MUI to automatically set it based on the `aria-labelledby` prop passed to `MuiDialog`\n          translate={translate}\n        >\n          <span id={dialogLabelId}>{title}</span>\n          <Button\n            ariaLabel={t(\"close.text\")}\n            onClick={handleCloseButtonClick}\n            size=\"small\"\n            startIcon={<CloseIcon />}\n            variant=\"floating\"\n          />\n        </MuiDialogTitle>\n\n        <MuiDialogContent\n          {...(isContentScrollable && {\n            // Sets tabIndex on content element if scrollable so content is easier to navigate with the keyboard\n            tabIndex: 0,\n          })}\n          dividers={isContentScrollable}\n          ref={dialogContentRef}\n        >\n          {content}\n        </MuiDialogContent>\n\n        {actionButtons.length > 0 && (\n          <MuiDialogActions>\n            {actionButtons.map((actionButton, index) =>\n              actionButton ? cloneElement(actionButton, { key: index }) : null,\n            )}\n          </MuiDialogActions>\n        )}\n      </MuiDialog>\n    </FullScreenOverlay>\n  );\n};\n\nconst MemoizedDialog = memo(Dialog);\nMemoizedDialog.displayName = \"Dialog\";\n\nexport { MemoizedDialog as Dialog };\n"],"mappings":";;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAUA,SACEA,YAAY,EACZC,IAAI,EAGJC,WAAW,EACXC,SAAS,EACTC,MAAM,EACNC,QAAQ,QACH,OAAO;AAId,SAASC,MAAM,QAAqB,oBAAoB;AACxD,SAASC,iBAAiB,QAAQ,wBAAwB;AAC1D,SAASC,cAAc,QAAQ,0BAA0B;AACzD,SAASC,SAAS,QAAQ,4BAA4B;AACtD,SAASC,WAAW,QAAQ,kBAAkB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAyD/C,MAAMC,MAAM,GAAGA,CAAC;EACdC,4BAA4B;EAC5BC,8BAA8B;EAC9BC,6BAA6B;EAC7BC,0BAA0B;EAC1BC,2BAA2B;EAC3BC,yBAAyB;EACzBC,QAAQ;EACRC,MAAM;EACNC,OAAO;EACPC,MAAM;EACNC,KAAK;EACLC;AACW,CAAC,KAAK;EACjB,MAAM;IAAEC;EAAE,CAAC,GAAGpB,cAAc,CAAC,CAAC;EAC9B,MAAM,CAACqB,mBAAmB,EAAEC,sBAAsB,CAAC,GAAGzB,QAAQ,CAAC,KAAK,CAAC;EACrE,MAAM0B,gBAAgB,GAAG3B,MAAM,CAAiB,IAAI,CAAC;EACrD,MAAM4B,aAAa,GAAGtB,WAAW,CAAC,CAAC;EACnC,MAAMuB,aAAa,GAAGvB,WAAW,CAAC,CAAC;EAEnCP,SAAS,CAAC,MAAM;IACd,IAAI+B,OAAe;IAEnB,MAAMC,mBAAmB,GAAGA,CAAA,KAAM;MAChC,MAAMC,oBAAoB,GAAGL,gBAAgB,CAACM,OAAO;MACrD,IAAID,oBAAoB,EAAE;QACxBE,oBAAoB,CAACJ,OAAO,CAAC;QAC7BJ,sBAAsB,CACpBM,oBAAoB,CAACG,YAAY,GAAGH,oBAAoB,CAACI,YAC3D,CAAC;MACH;MACAN,OAAO,GAAGO,qBAAqB,CAACN,mBAAmB,CAAC;IACtD,CAAC;IAED,IAAIZ,MAAM,EAAE;MACVW,OAAO,GAAGO,qBAAqB,CAACN,mBAAmB,CAAC;IACtD;IAEA,OAAO,MAAM;MACXG,oBAAoB,CAACJ,OAAO,CAAC;IAC/B,CAAC;EACH,CAAC,EAAE,CAACX,MAAM,CAAC,CAAC;EAEZ,MAAMmB,OAAO,GACX,OAAOpB,QAAQ,KAAK,QAAQ,GAC1BV,IAAA,CAAA+B,kBAAA;IAAArB,QAAA,EAAuBA;EAAQ,CAAuB,CAAC,GAEvDA,QACD;EAGH,MAAMsB,aAAa,GAAG,CACpB1B,6BAA6B,IAAIG,yBAAyB,EAC1DJ,8BAA8B,IAAIG,2BAA2B,EAC7DJ,4BAA4B,IAAIG,0BAA0B,CAC3D,CAAC0B,MAAM,CAACC,OAAO,CAAC;EAEjB,MAAMC,sBAAsB,GAAG7C,WAAW,CAEvC8C,KAAK,IAAKxB,OAAO,CAACwB,KAAK,EAAE,kBAAkB,CAAC,EAAE,CAACxB,OAAO,CAAC,CAAC;EAE3D,OACEZ,IAAA,CAACL,iBAAiB;IAAAe,QAAA,EAChBR,KAAA,CAAAmC,OAAA;MACE,mBAAiBhB,aAAc;MAC/B,WAASR,MAAO;MAChBD,OAAO,EAAEA,OAAQ;MACjB0B,IAAI,EAAE3B,MAAO;MAAAD,QAAA,GAEbR,KAAA,CAAAqC,YAAA;QACEC,EAAE,EAAEpB,aAAc;QAClBL,SAAS,EAAEA,SAAU;QAAAL,QAAA,GAErBV,IAAA;UAAMwC,EAAE,EAAEnB,aAAc;UAAAX,QAAA,EAAEI;QAAK,CAAO,CAAC,EACvCd,IAAA,CAACN,MAAM;UACL+C,SAAS,EAAEzB,CAAC,CAAC,YAAY,CAAE;UAC3B0B,OAAO,EAAEP,sBAAuB;UAChCQ,IAAI,EAAC,OAAO;UACZC,SAAS,EAAE5C,IAAA,CAACH,SAAS,IAAE,CAAE;UACzBgD,OAAO,EAAC;QAAU,CACnB,CAAC;MAAA,CACY,CAAC,EAEjB7C,IAAA,CAAA8C,cAAA;QAAA,IACO7B,mBAAmB,IAAI;UAE1B8B,QAAQ,EAAE;QACZ,CAAC;QACDC,QAAQ,EAAE/B,mBAAoB;QAC9BgC,GAAG,EAAE9B,gBAAiB;QAAAT,QAAA,EAErBoB;MAAO,CACQ,CAAC,EAElBE,aAAa,CAACkB,MAAM,GAAG,CAAC,IACvBlD,IAAA,CAAAmD,cAAA;QAAAzC,QAAA,EACGsB,aAAa,CAACoB,GAAG,CAAC,CAACC,YAAY,EAAEC,KAAK,KACrCD,YAAY,GAAGjE,YAAY,CAACiE,YAAY,EAAE;UAAEE,GAAG,EAAED;QAAM,CAAC,CAAC,GAAG,IAC9D;MAAC,CACe,CACnB;IAAA,CACQ;EAAC,CACK,CAAC;AAExB,CAAC;AAED,MAAME,cAAc,GAAGnE,IAAI,CAACc,MAAM,CAAC;AACnCqD,cAAc,CAACC,WAAW,GAAG,QAAQ;AAErC,SAASD,cAAc,IAAIrD,MAAM","ignoreList":[]}

package/dist/esm/Drawer.js

@@ -13,8 +13,9 @@ import _Drawer from "@mui/material/Drawer";
 
 import styled from "@emotion/styled";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
 import { Button } from "./Buttons/index.js";
+import { FullScreenOverlay } from "./FullScreenOverlay.js";
+import { useTranslation } from "./i18n.generated/i18n.js";
 import { CloseIcon } from "./icons.generated/index.js";
 import { useOdysseyDesignTokens } from "./OdysseyDesignTokensContext.js";
 import { Heading5 } from "./Typography.js";
@@ -124,7 +125,7 @@ const Drawer = ({
   }, [hasDividers, isContentScrollable]);
   const hasFooter = useMemo(() => primaryCallToActionComponent || secondaryCallToActionComponent || tertiaryCallToActionComponent, [primaryCallToActionComponent, secondaryCallToActionComponent, tertiaryCallToActionComponent]);
   const handleCloseButtonClick = useCallback(event => onClose(event, "closeButtonClick"), [onClose]);
-  return _jsxs(_Drawer, {
+  const muiDrawerComponent = useMemo(() => _jsxs(_Drawer, {
     anchor: anchorDirection,
     "data-se": testId,
     onClose: onClose,
@@ -166,7 +167,10 @@ const Drawer = ({
       odysseyDesignTokens: odysseyDesignTokens,
       children: [tertiaryCallToActionComponent, secondaryCallToActionComponent, primaryCallToActionComponent]
     })]
-  });
+  }), [anchorDirection, ariaLabel, children, dividersVisible, handleCloseButtonClick, hasFooter, isContentScrollable, isOpen, odysseyDesignTokens, onClose, primaryCallToActionComponent, secondaryCallToActionComponent, tertiaryCallToActionComponent, testId, title, translate, variant]);
+  return variant === "temporary" ? _jsx(FullScreenOverlay, {
+    children: muiDrawerComponent
+  }) : muiDrawerComponent;
 };
 const MemoizedDrawer = memo(Drawer);
 MemoizedDrawer.displayName = "Drawer";

package/dist/esm/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","names":["styled","memo","useCallback","useEffect","useMemo","useRef","useState","useTranslation","Button","CloseIcon","useOdysseyDesignTokens","Heading5","jsx","_jsx","jsxs","_jsxs","variantValues","DrawerHeader","shouldForwardProp","prop","odysseyDesignTokens","Spacing4","Spacing5","HueNeutral900","HueNeutralWhite","hasDividers","HueNeutral200","DrawerContentWrapper","DrawerContent","DrawerFooter","Drawer","ariaLabel","children","hasDividersProp","isOpen","onClose","primaryCallToActionComponent","secondaryCallToActionComponent","showDividers","tertiaryCallToActionComponent","testId","title","translate","variant","isContentScrollable","setIsContentScrollable","drawerContentRef","i18n","anchorDirection","dir","frameId","handleContentScroll","drawerContentElement","current","cancelAnimationFrame","scrollHeight","clientHeight","requestAnimationFrame","dividersVisible","hasFooter","handleCloseButtonClick","event","_Drawer","anchor","open","sx","transition","tabIndex","ref","onClick","size","startIcon","MemoizedDrawer","displayName"],"sources":["../../src/Drawer.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2024-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 styled from \"@emotion/styled\";\nimport {\n  Drawer as MuiDrawer,\n  DrawerProps as MuiDrawerProps,\n} from \"@mui/material\";\nimport {\n  memo,\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { useTranslation } from \"react-i18next\";\n\nimport type { HtmlProps } from \"./HtmlProps.js\";\n\nimport { Button, ButtonProps } from \"./Buttons/index.js\";\nimport { CloseIcon } from \"./icons.generated/index.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"./OdysseyDesignTokensContext.js\";\nimport { Heading5 } from \"./Typography.js\";\n\ntype MuiOnCloseEvent = Parameters<Required<MuiDrawerProps>[\"onClose\"]>[0];\ntype MuiOnCloseReason = Parameters<Required<MuiDrawerProps>[\"onClose\"]>[1];\nexport type DrawerOnCloseReason = MuiOnCloseReason | \"closeButtonClick\";\n\nexport const variantValues = [\"temporary\", \"persistent\"] as const;\n\nexport type DrawerProps = {\n  /**\n   * The content of the Drawer. May be a `string` or any other `ReactNode` or array of `ReactNode`s.\n   */\n  children?: ReactNode;\n  /**\n   * When set to `true`, the Drawer will be visible.\n   */\n  isOpen?: boolean;\n  /**\n   * Callback that controls what happens when the Drawer is dismissed\n   */\n  onClose: (event: MuiOnCloseEvent, reason: DrawerOnCloseReason) => void;\n  /**\n   * An optional Button object to be situated in the Drawerfooter. Should almost always be of variant `primary`.\n   */\n  primaryCallToActionComponent?: ReactElement<typeof Button>;\n  /**\n   * An optional Button object to be situated in the Drawer footer, alongside the `callToActionPrimaryComponent`.\n   */\n  secondaryCallToActionComponent?: ReactElement<typeof Button>;\n  /**\n   * An optional Button object to be situated in the Drawer footer, alongside the other two `callToAction` components.\n   */\n  tertiaryCallToActionComponent?: ReactElement<typeof Button>;\n  /**\n   * The title of the Drawer\n   */\n  title?: string;\n  /**\n   * Type of Drawer\n   */\n  variant?: (typeof variantValues)[number];\n} & Pick<HtmlProps, \"ariaLabel\" | \"testId\" | \"translate\"> &\n  (\n    | {\n        /**\n         * Shows divider lines separating header, content, and footer (if using action buttons).\n         */\n        hasDividers?: never;\n        /**\n         * @deprecated use `hasDividers` instead.\n         *\n         * Shows divider lines separating header, content, and footer (if using action buttons).\n         */\n        showDividers: boolean;\n      }\n    | {\n        /**\n         * Shows divider lines separating header, content, and footer (if using action buttons).\n         */\n        hasDividers: boolean;\n        /**\n         * @deprecated use `hasDividers` instead.\n         *\n         * Shows divider lines separating header, content, and footer (if using action buttons).\n         */\n        showDividers?: never;\n      }\n  );\n\ninterface DrawerStyleProps {\n  hasDividers: boolean;\n  odysseyDesignTokens: DesignTokens;\n}\nconst DrawerHeader = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"hasDividers\",\n})<DrawerStyleProps>`\n  position: sticky;\n  top: 0;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin: 0;\n  padding: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing4}\n    ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing5};\n  color: ${({ odysseyDesignTokens }) => odysseyDesignTokens.HueNeutral900};\n  background-color: ${({ odysseyDesignTokens }) =>\n    odysseyDesignTokens.HueNeutralWhite};\n  border-bottom: ${({ hasDividers, odysseyDesignTokens }) =>\n    hasDividers ? `1px solid ${odysseyDesignTokens.HueNeutral200}` : \"none\"};\n`;\n\nconst DrawerContentWrapper = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>`\n  overflow-y: auto;\n`;\n\nconst DrawerContent = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"hasDividers\",\n})<DrawerStyleProps>`\n  padding: ${({ hasDividers, odysseyDesignTokens }) =>\n    hasDividers\n      ? `${odysseyDesignTokens.Spacing5}`\n      : `0 ${odysseyDesignTokens.Spacing5}`};\n`;\n\nconst DrawerFooter = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"hasDividers\",\n})<DrawerStyleProps>`\n  position: sticky;\n  bottom: 0;\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  align-content: center;\n  padding: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing4};\n  border-top: ${({ hasDividers, odysseyDesignTokens }) =>\n    hasDividers ? `1px solid ${odysseyDesignTokens.HueNeutral200}` : \"none\"};\n  background-color: ${({ odysseyDesignTokens }) =>\n    odysseyDesignTokens.HueNeutralWhite};\n`;\n\nconst Drawer = ({\n  ariaLabel,\n  children,\n  hasDividers: hasDividersProp = false,\n  isOpen,\n  onClose,\n  primaryCallToActionComponent,\n  secondaryCallToActionComponent,\n  showDividers = false,\n  tertiaryCallToActionComponent,\n  testId,\n  title,\n  translate,\n  variant = \"temporary\",\n}: DrawerProps) => {\n  const [isContentScrollable, setIsContentScrollable] = useState(false);\n  const drawerContentRef = useRef<HTMLDivElement>(null);\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const hasDividers = hasDividersProp || showDividers;\n\n  //If RTL is set in the theme, align the drawer on the left side of the screen, uses right by default.\n  const { i18n } = useTranslation();\n  const anchorDirection = i18n.dir() === \"rtl\" ? \"left\" : \"right\";\n\n  useEffect(() => {\n    let frameId: number;\n\n    const handleContentScroll = () => {\n      const drawerContentElement = drawerContentRef.current;\n      if (drawerContentElement) {\n        cancelAnimationFrame(frameId);\n        setIsContentScrollable(\n          drawerContentElement.scrollHeight > drawerContentElement.clientHeight,\n        );\n      }\n      frameId = requestAnimationFrame(handleContentScroll);\n    };\n\n    if (isOpen) {\n      frameId = requestAnimationFrame(handleContentScroll);\n    }\n\n    return () => {\n      cancelAnimationFrame(frameId);\n    };\n  }, [isOpen]);\n\n  const dividersVisible = useMemo(() => {\n    return hasDividers || isContentScrollable;\n  }, [hasDividers, isContentScrollable]);\n\n  const hasFooter = useMemo(\n    () =>\n      primaryCallToActionComponent ||\n      secondaryCallToActionComponent ||\n      tertiaryCallToActionComponent,\n    [\n      primaryCallToActionComponent,\n      secondaryCallToActionComponent,\n      tertiaryCallToActionComponent,\n    ],\n  );\n\n  const handleCloseButtonClick = useCallback<\n    NonNullable<ButtonProps[\"onClick\"]>\n  >((event) => onClose(event, \"closeButtonClick\"), [onClose]);\n\n  return (\n    <MuiDrawer\n      anchor={anchorDirection}\n      data-se={testId}\n      onClose={onClose}\n      open={isOpen}\n      sx={{\n        //Overrides default MUI inline style\n        ...(variant === \"persistent\" && {\n          \"& .MuiDrawer-paper\": {\n            transition: \"none\",\n          },\n        }),\n      }}\n      variant={variant}\n    >\n      <DrawerContentWrapper\n        {...(isContentScrollable && {\n          //Sets tabIndex on content element if scrollable so content is easier to navigate with the keyboard\n          tabIndex: 0,\n        })}\n        odysseyDesignTokens={odysseyDesignTokens}\n        ref={drawerContentRef}\n      >\n        <DrawerHeader\n          hasDividers={dividersVisible}\n          odysseyDesignTokens={odysseyDesignTokens}\n          translate={translate}\n        >\n          <Heading5>{title}</Heading5>\n          <Button\n            ariaLabel={ariaLabel}\n            onClick={handleCloseButtonClick}\n            size=\"small\"\n            startIcon={<CloseIcon />}\n            variant=\"floating\"\n          />\n        </DrawerHeader>\n        <DrawerContent\n          hasDividers={dividersVisible}\n          odysseyDesignTokens={odysseyDesignTokens}\n        >\n          {children}\n        </DrawerContent>\n      </DrawerContentWrapper>\n      {hasFooter && (\n        <DrawerFooter\n          hasDividers={dividersVisible}\n          odysseyDesignTokens={odysseyDesignTokens}\n        >\n          {tertiaryCallToActionComponent}\n          {secondaryCallToActionComponent}\n          {primaryCallToActionComponent}\n        </DrawerFooter>\n      )}\n    </MuiDrawer>\n  );\n};\n\nconst MemoizedDrawer = memo(Drawer);\nMemoizedDrawer.displayName = \"Drawer\";\n\nexport { MemoizedDrawer as Drawer };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Drawer.js","names":["styled","memo","useCallback","useEffect","useMemo","useRef","useState","Button","FullScreenOverlay","useTranslation","CloseIcon","useOdysseyDesignTokens","Heading5","jsx","_jsx","jsxs","_jsxs","variantValues","DrawerHeader","shouldForwardProp","prop","odysseyDesignTokens","Spacing4","Spacing5","HueNeutral900","HueNeutralWhite","hasDividers","HueNeutral200","DrawerContentWrapper","DrawerContent","DrawerFooter","Drawer","ariaLabel","children","hasDividersProp","isOpen","onClose","primaryCallToActionComponent","secondaryCallToActionComponent","showDividers","tertiaryCallToActionComponent","testId","title","translate","variant","isContentScrollable","setIsContentScrollable","drawerContentRef","i18n","anchorDirection","dir","frameId","handleContentScroll","drawerContentElement","current","cancelAnimationFrame","scrollHeight","clientHeight","requestAnimationFrame","dividersVisible","hasFooter","handleCloseButtonClick","event","muiDrawerComponent","_Drawer","anchor","open","sx","transition","tabIndex","ref","onClick","size","startIcon","MemoizedDrawer","displayName"],"sources":["../../src/Drawer.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2024-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 styled from \"@emotion/styled\";\nimport {\n  Drawer as MuiDrawer,\n  DrawerProps as MuiDrawerProps,\n} from \"@mui/material\";\nimport {\n  memo,\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport type { HtmlProps } from \"./HtmlProps.js\";\n\nimport { Button, ButtonProps } from \"./Buttons/index.js\";\nimport { FullScreenOverlay } from \"./FullScreenOverlay.js\";\nimport { useTranslation } from \"./i18n.generated/i18n.js\";\nimport { CloseIcon } from \"./icons.generated/index.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"./OdysseyDesignTokensContext.js\";\nimport { Heading5 } from \"./Typography.js\";\n\ntype MuiOnCloseEvent = Parameters<Required<MuiDrawerProps>[\"onClose\"]>[0];\ntype MuiOnCloseReason = Parameters<Required<MuiDrawerProps>[\"onClose\"]>[1];\nexport type DrawerOnCloseReason = MuiOnCloseReason | \"closeButtonClick\";\n\nexport const variantValues = [\"temporary\", \"persistent\"] as const;\n\nexport type DrawerProps = {\n  /**\n   * The content of the Drawer. May be a `string` or any other `ReactNode` or array of `ReactNode`s.\n   */\n  children?: ReactNode;\n  /**\n   * When set to `true`, the Drawer will be visible.\n   */\n  isOpen?: boolean;\n  /**\n   * Callback that controls what happens when the Drawer is dismissed\n   */\n  onClose: (event: MuiOnCloseEvent, reason: DrawerOnCloseReason) => void;\n  /**\n   * An optional Button object to be situated in the Drawerfooter. Should almost always be of variant `primary`.\n   */\n  primaryCallToActionComponent?: ReactElement<typeof Button>;\n  /**\n   * An optional Button object to be situated in the Drawer footer, alongside the `callToActionPrimaryComponent`.\n   */\n  secondaryCallToActionComponent?: ReactElement<typeof Button>;\n  /**\n   * An optional Button object to be situated in the Drawer footer, alongside the other two `callToAction` components.\n   */\n  tertiaryCallToActionComponent?: ReactElement<typeof Button>;\n  /**\n   * The title of the Drawer\n   */\n  title?: string;\n  /**\n   * Type of Drawer\n   */\n  variant?: (typeof variantValues)[number];\n} & Pick<HtmlProps, \"ariaLabel\" | \"testId\" | \"translate\"> &\n  (\n    | {\n        /**\n         * Shows divider lines separating header, content, and footer (if using action buttons).\n         */\n        hasDividers?: never;\n        /**\n         * @deprecated use `hasDividers` instead.\n         *\n         * Shows divider lines separating header, content, and footer (if using action buttons).\n         */\n        showDividers: boolean;\n      }\n    | {\n        /**\n         * Shows divider lines separating header, content, and footer (if using action buttons).\n         */\n        hasDividers: boolean;\n        /**\n         * @deprecated use `hasDividers` instead.\n         *\n         * Shows divider lines separating header, content, and footer (if using action buttons).\n         */\n        showDividers?: never;\n      }\n  );\n\ntype DrawerStyleProps = {\n  hasDividers: boolean;\n  odysseyDesignTokens: DesignTokens;\n};\n\nconst DrawerHeader = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"hasDividers\",\n})<DrawerStyleProps>`\n  position: sticky;\n  top: 0;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin: 0;\n  padding: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing4}\n    ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing5};\n  color: ${({ odysseyDesignTokens }) => odysseyDesignTokens.HueNeutral900};\n  background-color: ${({ odysseyDesignTokens }) =>\n    odysseyDesignTokens.HueNeutralWhite};\n  border-bottom: ${({ hasDividers, odysseyDesignTokens }) =>\n    hasDividers ? `1px solid ${odysseyDesignTokens.HueNeutral200}` : \"none\"};\n`;\n\nconst DrawerContentWrapper = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>`\n  overflow-y: auto;\n`;\n\nconst DrawerContent = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"hasDividers\",\n})<DrawerStyleProps>`\n  padding: ${({ hasDividers, odysseyDesignTokens }) =>\n    hasDividers\n      ? `${odysseyDesignTokens.Spacing5}`\n      : `0 ${odysseyDesignTokens.Spacing5}`};\n`;\n\nconst DrawerFooter = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"hasDividers\",\n})<DrawerStyleProps>`\n  position: sticky;\n  bottom: 0;\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  align-content: center;\n  padding: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing4};\n  border-top: ${({ hasDividers, odysseyDesignTokens }) =>\n    hasDividers ? `1px solid ${odysseyDesignTokens.HueNeutral200}` : \"none\"};\n  background-color: ${({ odysseyDesignTokens }) =>\n    odysseyDesignTokens.HueNeutralWhite};\n`;\n\nconst Drawer = ({\n  ariaLabel,\n  children,\n  hasDividers: hasDividersProp = false,\n  isOpen,\n  onClose,\n  primaryCallToActionComponent,\n  secondaryCallToActionComponent,\n  showDividers = false,\n  tertiaryCallToActionComponent,\n  testId,\n  title,\n  translate,\n  variant = \"temporary\",\n}: DrawerProps) => {\n  const [isContentScrollable, setIsContentScrollable] = useState(false);\n  const drawerContentRef = useRef<HTMLDivElement>(null);\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const hasDividers = hasDividersProp || showDividers;\n\n  //If RTL is set in the theme, align the drawer on the left side of the screen, uses right by default.\n  const { i18n } = useTranslation();\n  const anchorDirection = i18n.dir() === \"rtl\" ? \"left\" : \"right\";\n\n  useEffect(() => {\n    let frameId: number;\n\n    const handleContentScroll = () => {\n      const drawerContentElement = drawerContentRef.current;\n      if (drawerContentElement) {\n        cancelAnimationFrame(frameId);\n        setIsContentScrollable(\n          drawerContentElement.scrollHeight > drawerContentElement.clientHeight,\n        );\n      }\n      frameId = requestAnimationFrame(handleContentScroll);\n    };\n\n    if (isOpen) {\n      frameId = requestAnimationFrame(handleContentScroll);\n    }\n\n    return () => {\n      cancelAnimationFrame(frameId);\n    };\n  }, [isOpen]);\n\n  const dividersVisible = useMemo(() => {\n    return hasDividers || isContentScrollable;\n  }, [hasDividers, isContentScrollable]);\n\n  const hasFooter = useMemo(\n    () =>\n      primaryCallToActionComponent ||\n      secondaryCallToActionComponent ||\n      tertiaryCallToActionComponent,\n    [\n      primaryCallToActionComponent,\n      secondaryCallToActionComponent,\n      tertiaryCallToActionComponent,\n    ],\n  );\n\n  const handleCloseButtonClick = useCallback<\n    NonNullable<ButtonProps[\"onClick\"]>\n  >((event) => onClose(event, \"closeButtonClick\"), [onClose]);\n\n  const muiDrawerComponent = useMemo(\n    () => (\n      <MuiDrawer\n        anchor={anchorDirection}\n        data-se={testId}\n        onClose={onClose}\n        open={isOpen}\n        sx={{\n          //Overrides default MUI inline style\n          ...(variant === \"persistent\" && {\n            \"& .MuiDrawer-paper\": {\n              transition: \"none\",\n            },\n          }),\n        }}\n        variant={variant}\n      >\n        <DrawerContentWrapper\n          {...(isContentScrollable && {\n            //Sets tabIndex on content element if scrollable so content is easier to navigate with the keyboard\n            tabIndex: 0,\n          })}\n          odysseyDesignTokens={odysseyDesignTokens}\n          ref={drawerContentRef}\n        >\n          <DrawerHeader\n            hasDividers={dividersVisible}\n            odysseyDesignTokens={odysseyDesignTokens}\n            translate={translate}\n          >\n            <Heading5>{title}</Heading5>\n\n            <Button\n              ariaLabel={ariaLabel}\n              onClick={handleCloseButtonClick}\n              size=\"small\"\n              startIcon={<CloseIcon />}\n              variant=\"floating\"\n            />\n          </DrawerHeader>\n          <DrawerContent\n            hasDividers={dividersVisible}\n            odysseyDesignTokens={odysseyDesignTokens}\n          >\n            {children}\n          </DrawerContent>\n        </DrawerContentWrapper>\n        {hasFooter && (\n          <DrawerFooter\n            hasDividers={dividersVisible}\n            odysseyDesignTokens={odysseyDesignTokens}\n          >\n            {tertiaryCallToActionComponent}\n            {secondaryCallToActionComponent}\n            {primaryCallToActionComponent}\n          </DrawerFooter>\n        )}\n      </MuiDrawer>\n    ),\n    [\n      anchorDirection,\n      ariaLabel,\n      children,\n      dividersVisible,\n      handleCloseButtonClick,\n      hasFooter,\n      isContentScrollable,\n      isOpen,\n      odysseyDesignTokens,\n      onClose,\n      primaryCallToActionComponent,\n      secondaryCallToActionComponent,\n      tertiaryCallToActionComponent,\n      testId,\n      title,\n      translate,\n      variant,\n    ],\n  );\n\n  return variant === \"temporary\" ? (\n    <FullScreenOverlay>{muiDrawerComponent}</FullScreenOverlay>\n  ) : (\n    muiDrawerComponent\n  );\n};\n\nconst MemoizedDrawer = memo(Drawer);\nMemoizedDrawer.displayName = \"Drawer\";\n\nexport { MemoizedDrawer as Drawer };\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/Field.js

@@ -12,11 +12,11 @@ import _FormLabel from "@mui/material/FormLabel";
  * See the License for the specific language governing permissions and limitations under the License.
  */
 import { memo, useMemo } from "react";
-import { useTranslation } from "react-i18next";
 import { FieldError } from "./FieldError.js";
 import { FieldHint } from "./FieldHint.js";
 import { FieldLabel } from "./FieldLabel.js";
 import { useFieldset } from "./FieldsetContext.js";
+import { useTranslation } from "./i18n.generated/i18n.js";
 import { Typography } from "./Typography.js";
 import { useUniqueId } from "./useUniqueId.js";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";

package/dist/esm/Field.js.map

@@ -1 +1 @@
-{"version":3,"file":"Field.js","names":["memo","useMemo","useTranslation","FieldError","FieldHint","FieldLabel","useFieldset","Typography","useUniqueId","jsxs","_jsxs","jsx","_jsx","fieldTypeValues","Field","ariaDescribedBy","errorMessage","errorMessageList","fieldType","hasVisibleLabel","hint","HintLinkComponent","id","idOverride","isDisabled","isDisabledProp","isFullWidth","isRadioGroup","isOptional","isReadOnly","label","renderFieldComponent","t","hintId","undefined","errorMessageElementId","labelElementId","localAriaDescribedBy","join","trim","isFieldsetDisabled","_FormControl","component","disabled","error","Boolean","Array","isArray","length","fullWidth","role","children","_FormLabel","color","inputId","text","LinkComponent","message","messageList","MemoizedField","displayName"],"sources":["../../src/Field.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  FormControl as MuiFormControl,\n  FormLabel as MuiFormLabel,\n} from \"@mui/material\";\nimport { memo, ReactElement, useMemo } from \"react\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { FieldComponentProps } from \"./FieldComponentProps.js\";\nimport { FieldError } from \"./FieldError.js\";\nimport { FieldHint } from \"./FieldHint.js\";\nimport { FieldLabel } from \"./FieldLabel.js\";\nimport { useFieldset } from \"./FieldsetContext.js\";\nimport { HtmlProps } from \"./HtmlProps.js\";\nimport { Typography } from \"./Typography.js\";\nimport { useUniqueId } from \"./useUniqueId.js\";\n\nexport const fieldTypeValues = [\"single\", \"group\"] as const;\n\nexport type RenderFieldComponentProps = {\n  ariaDescribedBy?: string;\n  dataSe?: string;\n  errorMessageElementId?: string;\n  id: string;\n  isReadOnly?: boolean;\n  labelElementId: string;\n};\n\nexport type FieldProps = {\n  /**\n   * If `error` is not undefined, the `input` will indicate an error.\n   */\n  errorMessageList?: string[];\n  /**\n   * The field type determines how ARIA components are setup. It's important to use this to denote if you expect only one component (like a text field) or multiple (like a radio group).\n   */\n  fieldType: (typeof fieldTypeValues)[number];\n  /**\n   * If `true`, the Field label will be shown\n   */\n  hasVisibleLabel: boolean;\n  /**\n   * Important for determining if children inherit error state\n   */\n  isCheckboxGroup?: boolean;\n  /**\n   * Important for narrowing down the `fieldset` role to \"radiogroup\".\n   */\n  isRadioGroup?: boolean;\n  /**\n   * The label for the `input` element.\n   */\n  label: string;\n  /**\n   * The short hint displayed in the `input` before the user enters a value.\n   */\n  placeholder?: string;\n  /**\n   * Render-props function that sends back ARIA props to your field component.\n   */\n  renderFieldComponent: ({\n    ariaDescribedBy,\n    dataSe,\n    errorMessageElementId,\n    id,\n    labelElementId,\n    isReadOnly,\n  }: RenderFieldComponentProps) => ReactElement;\n};\n\nconst Field = ({\n  ariaDescribedBy,\n  errorMessage,\n  errorMessageList,\n  fieldType,\n  hasVisibleLabel,\n  hint,\n  HintLinkComponent,\n  id: idOverride,\n  isDisabled: isDisabledProp = false,\n  isFullWidth = false,\n  isRadioGroup = false,\n  isOptional = false,\n  isReadOnly = false,\n  label,\n  renderFieldComponent,\n}: FieldProps &\n  Pick<\n    FieldComponentProps,\n    | \"errorMessage\"\n    | \"errorMessageList\"\n    | \"hint\"\n    | \"HintLinkComponent\"\n    | \"id\"\n    | \"isDisabled\"\n    | \"isFullWidth\"\n    | \"isOptional\"\n    | \"isReadOnly\"\n  > &\n  Pick<HtmlProps, \"ariaDescribedBy\">) => {\n  const { t } = useTranslation();\n\n  const id = useUniqueId(idOverride);\n  const hintId = hint ? `${id}-hint` : undefined;\n  const errorMessageElementId =\n    errorMessage || errorMessageList ? `${id}-error` : undefined;\n  const labelElementId = `${id}-label`;\n\n  const localAriaDescribedBy = useMemo(\n    () =>\n      [hintId, errorMessageElementId, ariaDescribedBy].join(\" \").trim() ||\n      undefined,\n    [ariaDescribedBy, errorMessageElementId, hintId],\n  );\n\n  const { isDisabled: isFieldsetDisabled } = useFieldset();\n\n  const isDisabled = useMemo(\n    () => isDisabledProp || isFieldsetDisabled,\n    [isDisabledProp, isFieldsetDisabled],\n  );\n\n  return (\n    <MuiFormControl\n      component={fieldType === \"group\" ? \"fieldset\" : \"div\"}\n      disabled={isDisabled}\n      error={\n        Boolean(errorMessage) ||\n        (Array.isArray(errorMessageList) && errorMessageList.length > 0)\n      }\n      fullWidth={isFullWidth}\n      role={isRadioGroup ? \"radiogroup\" : undefined}\n    >\n      {fieldType === \"group\" ? (\n        <MuiFormLabel component=\"legend\" id={labelElementId}>\n          {label}{\" \"}\n          {isOptional && label && (\n            <Typography color=\"textSecondary\" component=\"span\">\n              ({t(\"fieldlabel.optional.text\")})\n            </Typography>\n          )}\n        </MuiFormLabel>\n      ) : (\n        <FieldLabel\n          hasVisibleLabel={hasVisibleLabel}\n          id={labelElementId}\n          inputId={id}\n          isOptional={isOptional}\n          text={label}\n        />\n      )}\n\n      {hint && (\n        <FieldHint id={hintId} LinkComponent={HintLinkComponent} text={hint} />\n      )}\n\n      {renderFieldComponent({\n        ariaDescribedBy: localAriaDescribedBy,\n        errorMessageElementId,\n        id,\n        labelElementId,\n        isReadOnly,\n      })}\n\n      {(errorMessage || errorMessageList) && (\n        <FieldError\n          id={errorMessageElementId}\n          message={errorMessage}\n          messageList={errorMessageList}\n        />\n      )}\n    </MuiFormControl>\n  );\n};\n\nconst MemoizedField = memo(Field);\nMemoizedField.displayName = \"Field\";\n\nexport { MemoizedField as Field };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Field.js","names":["memo","useMemo","FieldError","FieldHint","FieldLabel","useFieldset","useTranslation","Typography","useUniqueId","jsxs","_jsxs","jsx","_jsx","fieldTypeValues","Field","ariaDescribedBy","errorMessage","errorMessageList","fieldType","hasVisibleLabel","hint","HintLinkComponent","id","idOverride","isDisabled","isDisabledProp","isFullWidth","isRadioGroup","isOptional","isReadOnly","label","renderFieldComponent","t","hintId","undefined","errorMessageElementId","labelElementId","localAriaDescribedBy","join","trim","isFieldsetDisabled","_FormControl","component","disabled","error","Boolean","Array","isArray","length","fullWidth","role","children","_FormLabel","color","inputId","text","LinkComponent","message","messageList","MemoizedField","displayName"],"sources":["../../src/Field.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  FormControl as MuiFormControl,\n  FormLabel as MuiFormLabel,\n} from \"@mui/material\";\nimport { memo, ReactElement, useMemo } from \"react\";\n\nimport { FieldComponentProps } from \"./FieldComponentProps.js\";\nimport { FieldError } from \"./FieldError.js\";\nimport { FieldHint } from \"./FieldHint.js\";\nimport { FieldLabel } from \"./FieldLabel.js\";\nimport { useFieldset } from \"./FieldsetContext.js\";\nimport { HtmlProps } from \"./HtmlProps.js\";\nimport { useTranslation } from \"./i18n.generated/i18n.js\";\nimport { Typography } from \"./Typography.js\";\nimport { useUniqueId } from \"./useUniqueId.js\";\n\nexport const fieldTypeValues = [\"single\", \"group\"] as const;\n\nexport type RenderFieldComponentProps = {\n  ariaDescribedBy?: string;\n  dataSe?: string;\n  errorMessageElementId?: string;\n  id: string;\n  isReadOnly?: boolean;\n  labelElementId: string;\n};\n\nexport type FieldProps = {\n  /**\n   * If `error` is not undefined, the `input` will indicate an error.\n   */\n  errorMessageList?: string[];\n  /**\n   * The field type determines how ARIA components are setup. It's important to use this to denote if you expect only one component (like a text field) or multiple (like a radio group).\n   */\n  fieldType: (typeof fieldTypeValues)[number];\n  /**\n   * If `true`, the Field label will be shown\n   */\n  hasVisibleLabel: boolean;\n  /**\n   * Important for determining if children inherit error state\n   */\n  isCheckboxGroup?: boolean;\n  /**\n   * Important for narrowing down the `fieldset` role to \"radiogroup\".\n   */\n  isRadioGroup?: boolean;\n  /**\n   * The label for the `input` element.\n   */\n  label: string;\n  /**\n   * The short hint displayed in the `input` before the user enters a value.\n   */\n  placeholder?: string;\n  /**\n   * Render-props function that sends back ARIA props to your field component.\n   */\n  renderFieldComponent: ({\n    ariaDescribedBy,\n    dataSe,\n    errorMessageElementId,\n    id,\n    labelElementId,\n    isReadOnly,\n  }: RenderFieldComponentProps) => ReactElement;\n};\n\nconst Field = ({\n  ariaDescribedBy,\n  errorMessage,\n  errorMessageList,\n  fieldType,\n  hasVisibleLabel,\n  hint,\n  HintLinkComponent,\n  id: idOverride,\n  isDisabled: isDisabledProp = false,\n  isFullWidth = false,\n  isRadioGroup = false,\n  isOptional = false,\n  isReadOnly = false,\n  label,\n  renderFieldComponent,\n}: FieldProps &\n  Pick<\n    FieldComponentProps,\n    | \"errorMessage\"\n    | \"errorMessageList\"\n    | \"hint\"\n    | \"HintLinkComponent\"\n    | \"id\"\n    | \"isDisabled\"\n    | \"isFullWidth\"\n    | \"isOptional\"\n    | \"isReadOnly\"\n  > &\n  Pick<HtmlProps, \"ariaDescribedBy\">) => {\n  const { t } = useTranslation();\n\n  const id = useUniqueId(idOverride);\n  const hintId = hint ? `${id}-hint` : undefined;\n  const errorMessageElementId =\n    errorMessage || errorMessageList ? `${id}-error` : undefined;\n  const labelElementId = `${id}-label`;\n\n  const localAriaDescribedBy = useMemo(\n    () =>\n      [hintId, errorMessageElementId, ariaDescribedBy].join(\" \").trim() ||\n      undefined,\n    [ariaDescribedBy, errorMessageElementId, hintId],\n  );\n\n  const { isDisabled: isFieldsetDisabled } = useFieldset();\n\n  const isDisabled = useMemo(\n    () => isDisabledProp || isFieldsetDisabled,\n    [isDisabledProp, isFieldsetDisabled],\n  );\n\n  return (\n    <MuiFormControl\n      component={fieldType === \"group\" ? \"fieldset\" : \"div\"}\n      disabled={isDisabled}\n      error={\n        Boolean(errorMessage) ||\n        (Array.isArray(errorMessageList) && errorMessageList.length > 0)\n      }\n      fullWidth={isFullWidth}\n      role={isRadioGroup ? \"radiogroup\" : undefined}\n    >\n      {fieldType === \"group\" ? (\n        <MuiFormLabel component=\"legend\" id={labelElementId}>\n          {label}{\" \"}\n          {isOptional && label && (\n            <Typography color=\"textSecondary\" component=\"span\">\n              ({t(\"fieldlabel.optional.text\")})\n            </Typography>\n          )}\n        </MuiFormLabel>\n      ) : (\n        <FieldLabel\n          hasVisibleLabel={hasVisibleLabel}\n          id={labelElementId}\n          inputId={id}\n          isOptional={isOptional}\n          text={label}\n        />\n      )}\n\n      {hint && (\n        <FieldHint id={hintId} LinkComponent={HintLinkComponent} text={hint} />\n      )}\n\n      {renderFieldComponent({\n        ariaDescribedBy: localAriaDescribedBy,\n        errorMessageElementId,\n        id,\n        labelElementId,\n        isReadOnly,\n      })}\n\n      {(errorMessage || errorMessageList) && (\n        <FieldError\n          id={errorMessageElementId}\n          message={errorMessage}\n          messageList={errorMessageList}\n        />\n      )}\n    </MuiFormControl>\n  );\n};\n\nconst MemoizedField = memo(Field);\nMemoizedField.displayName = \"Field\";\n\nexport { MemoizedField as Field };\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/FieldError.js

@@ -11,9 +11,9 @@ import _FormHelperText from "@mui/material/FormHelperText";
  * See the License for the specific language governing permissions and limitations under the License.
  */
 import { memo } from "react";
-import { useTranslation } from "react-i18next";
 import { Box } from "./Box.js";
 import { ErrorMessageList } from "./ErrorMessageList.js";
+import { useTranslation } from "./i18n.generated/i18n.js";
 import { ScreenReaderText } from "./ScreenReaderText.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const FieldError = ({

package/dist/esm/FieldError.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldError.js","names":["memo","useTranslation","Box","ErrorMessageList","ScreenReaderText","jsx","_jsx","jsxs","_jsxs","FieldError","id","message","messageList","testId","translate","t","_FormHelperText","component","error","children","errorMessages","MemoizedFieldError","displayName"],"sources":["../../src/FieldError.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 { FormHelperText } from \"@mui/material\";\nimport { memo } from \"react\";\nimport { useTranslation } from \"react-i18next\";\n\nimport type { HtmlProps } from \"./HtmlProps.js\";\n\nimport { Box } from \"./Box.js\";\nimport { ErrorMessageList } from \"./ErrorMessageList.js\";\nimport { ScreenReaderText } from \"./ScreenReaderText.js\";\n\nexport type FieldErrorProps = {\n  id?: string;\n  message?: string;\n  messageList?: string[];\n} & Pick<HtmlProps, \"testId\" | \"translate\">;\n\nconst FieldError = ({\n  id,\n  message,\n  messageList,\n  testId,\n  translate,\n}: FieldErrorProps) => {\n  const { t } = useTranslation();\n\n  return (\n    <FormHelperText\n      component=\"div\"\n      data-se={testId}\n      error\n      id={id}\n      translate={translate}\n    >\n      <ScreenReaderText translate={translate}>{`${t(\n        \"fielderror.screenreader.text\",\n      )}:`}</ScreenReaderText>\n      <Box>\n        {message}\n        {messageList && <ErrorMessageList errorMessages={messageList} />}\n      </Box>\n    </FormHelperText>\n  );\n};\n\nconst MemoizedFieldError = memo(FieldError);\nMemoizedFieldError.displayName = \"FieldError\";\n\nexport { MemoizedFieldError as FieldError };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,SAASA,IAAI,QAAQ,OAAO;AAC5B,SAASC,cAAc,QAAQ,eAAe;AAI9C,SAASC,GAAG,QAAQ,UAAU;AAC9B,SAASC,gBAAgB,QAAQ,uBAAuB;AACxD,SAASC,gBAAgB,QAAQ,uBAAuB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAQzD,MAAMC,UAAU,GAAGA,CAAC;EAClBC,EAAE;EACFC,OAAO;EACPC,WAAW;EACXC,MAAM;EACNC;AACe,CAAC,KAAK;EACrB,MAAM;IAAEC;EAAE,CAAC,GAAGd,cAAc,CAAC,CAAC;EAE9B,OACEO,KAAA,CAAAQ,eAAA;IACEC,SAAS,EAAC,KAAK;IACf,WAASJ,MAAO;IAChBK,KAAK;IACLR,EAAE,EAAEA,EAAG;IACPI,SAAS,EAAEA,SAAU;IAAAK,QAAA,GAErBb,IAAA,CAACF,gBAAgB;MAACU,SAAS,EAAEA,SAAU;MAAAK,QAAA,EAAE,GAAGJ,CAAC,CAC3C,8BACF,CAAC;IAAG,CAAmB,CAAC,EACxBP,KAAA,CAACN,GAAG;MAAAiB,QAAA,GACDR,OAAO,EACPC,WAAW,IAAIN,IAAA,CAACH,gBAAgB;QAACiB,aAAa,EAAER;MAAY,CAAE,CAAC;IAAA,CAC7D,CAAC;EAAA,CACQ,CAAC;AAErB,CAAC;AAED,MAAMS,kBAAkB,GAAGrB,IAAI,CAACS,UAAU,CAAC;AAC3CY,kBAAkB,CAACC,WAAW,GAAG,YAAY;AAE7C,SAASD,kBAAkB,IAAIZ,UAAU","ignoreList":[]}
+{"version":3,"file":"FieldError.js","names":["memo","Box","ErrorMessageList","useTranslation","ScreenReaderText","jsx","_jsx","jsxs","_jsxs","FieldError","id","message","messageList","testId","translate","t","_FormHelperText","component","error","children","errorMessages","MemoizedFieldError","displayName"],"sources":["../../src/FieldError.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 { FormHelperText } from \"@mui/material\";\nimport { memo } from \"react\";\n\nimport type { HtmlProps } from \"./HtmlProps.js\";\n\nimport { Box } from \"./Box.js\";\nimport { ErrorMessageList } from \"./ErrorMessageList.js\";\nimport { useTranslation } from \"./i18n.generated/i18n.js\";\nimport { ScreenReaderText } from \"./ScreenReaderText.js\";\n\nexport type FieldErrorProps = {\n  id?: string;\n  message?: string;\n  messageList?: string[];\n} & Pick<HtmlProps, \"testId\" | \"translate\">;\n\nconst FieldError = ({\n  id,\n  message,\n  messageList,\n  testId,\n  translate,\n}: FieldErrorProps) => {\n  const { t } = useTranslation();\n\n  return (\n    <FormHelperText\n      component=\"div\"\n      data-se={testId}\n      error\n      id={id}\n      translate={translate}\n    >\n      <ScreenReaderText translate={translate}>{`${t(\n        \"fielderror.screenreader.text\",\n      )}:`}</ScreenReaderText>\n      <Box>\n        {message}\n        {messageList && <ErrorMessageList errorMessages={messageList} />}\n      </Box>\n    </FormHelperText>\n  );\n};\n\nconst MemoizedFieldError = memo(FieldError);\nMemoizedFieldError.displayName = \"FieldError\";\n\nexport { MemoizedFieldError as FieldError };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,SAASA,IAAI,QAAQ,OAAO;AAI5B,SAASC,GAAG,QAAQ,UAAU;AAC9B,SAASC,gBAAgB,QAAQ,uBAAuB;AACxD,SAASC,cAAc,QAAQ,0BAA0B;AACzD,SAASC,gBAAgB,QAAQ,uBAAuB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAQzD,MAAMC,UAAU,GAAGA,CAAC;EAClBC,EAAE;EACFC,OAAO;EACPC,WAAW;EACXC,MAAM;EACNC;AACe,CAAC,KAAK;EACrB,MAAM;IAAEC;EAAE,CAAC,GAAGZ,cAAc,CAAC,CAAC;EAE9B,OACEK,KAAA,CAAAQ,eAAA;IACEC,SAAS,EAAC,KAAK;IACf,WAASJ,MAAO;IAChBK,KAAK;IACLR,EAAE,EAAEA,EAAG;IACPI,SAAS,EAAEA,SAAU;IAAAK,QAAA,GAErBb,IAAA,CAACF,gBAAgB;MAACU,SAAS,EAAEA,SAAU;MAAAK,QAAA,EAAE,GAAGJ,CAAC,CAC3C,8BACF,CAAC;IAAG,CAAmB,CAAC,EACxBP,KAAA,CAACP,GAAG;MAAAkB,QAAA,GACDR,OAAO,EACPC,WAAW,IAAIN,IAAA,CAACJ,gBAAgB;QAACkB,aAAa,EAAER;MAAY,CAAE,CAAC;IAAA,CAC7D,CAAC;EAAA,CACQ,CAAC;AAErB,CAAC;AAED,MAAMS,kBAAkB,GAAGrB,IAAI,CAACS,UAAU,CAAC;AAC3CY,kBAAkB,CAACC,WAAW,GAAG,YAAY;AAE7C,SAASD,kBAAkB,IAAIZ,UAAU","ignoreList":[]}

package/dist/esm/FieldLabel.js

@@ -11,7 +11,7 @@ import _InputLabel from "@mui/material/InputLabel";
  * See the License for the specific language governing permissions and limitations under the License.
  */
 import { memo, useMemo } from "react";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "./i18n.generated/i18n.js";
 import { ScreenReaderText } from "./ScreenReaderText.js";
 import { Subordinate } from "./Typography.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/dist/esm/FieldLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldLabel.js","names":["memo","useMemo","useTranslation","ScreenReaderText","Subordinate","jsx","_jsx","jsxs","_jsxs","FieldLabel","hasVisibleLabel","id","inputId","isOptional","testId","translate","text","t","inputLabel","_InputLabel","htmlFor","children","MemoizedFieldLabel","displayName"],"sources":["../../src/FieldLabel.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 { InputLabel as MuiInputLabel } from \"@mui/material\";\nimport { memo, useMemo } from \"react\";\nimport { useTranslation } from \"react-i18next\";\n\nimport type { HtmlProps } from \"./HtmlProps.js\";\n\nimport { ScreenReaderText } from \"./ScreenReaderText.js\";\nimport { Subordinate } from \"./Typography.js\";\n\nexport type FieldLabelProps = {\n  hasVisibleLabel: boolean;\n  id: string;\n  inputId: string;\n  isOptional: boolean;\n  text: string;\n} & Pick<HtmlProps, \"testId\" | \"translate\">;\n\nconst FieldLabel = ({\n  hasVisibleLabel,\n  id,\n  inputId,\n  isOptional,\n  testId,\n  translate,\n  text,\n}: FieldLabelProps) => {\n  const { t } = useTranslation();\n\n  const inputLabel = useMemo(\n    () => (\n      <MuiInputLabel\n        data-se={testId}\n        htmlFor={inputId}\n        id={id}\n        translate={translate}\n      >\n        <span>{text}</span>\n        {isOptional && (\n          <Subordinate>{t(\"fieldlabel.optional.text\")}</Subordinate>\n        )}\n      </MuiInputLabel>\n    ),\n    [id, inputId, isOptional, testId, translate, text, t],\n  );\n\n  return hasVisibleLabel ? (\n    inputLabel\n  ) : (\n    <ScreenReaderText translate={translate}>{inputLabel}</ScreenReaderText>\n  );\n};\n\nconst MemoizedFieldLabel = memo(FieldLabel);\nMemoizedFieldLabel.displayName = \"FieldLabel\";\n\nexport { MemoizedFieldLabel as FieldLabel };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,SAASA,IAAI,EAAEC,OAAO,QAAQ,OAAO;AACrC,SAASC,cAAc,QAAQ,eAAe;AAI9C,SAASC,gBAAgB,QAAQ,uBAAuB;AACxD,SAASC,WAAW,QAAQ,iBAAiB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAU9C,MAAMC,UAAU,GAAGA,CAAC;EAClBC,eAAe;EACfC,EAAE;EACFC,OAAO;EACPC,UAAU;EACVC,MAAM;EACNC,SAAS;EACTC;AACe,CAAC,KAAK;EACrB,MAAM;IAAEC;EAAE,CAAC,GAAGf,cAAc,CAAC,CAAC;EAE9B,MAAMgB,UAAU,GAAGjB,OAAO,CACxB,MACEO,KAAA,CAAAW,WAAA;IACE,WAASL,MAAO;IAChBM,OAAO,EAAER,OAAQ;IACjBD,EAAE,EAAEA,EAAG;IACPI,SAAS,EAAEA,SAAU;IAAAM,QAAA,GAErBf,IAAA;MAAAe,QAAA,EAAOL;IAAI,CAAO,CAAC,EAClBH,UAAU,IACTP,IAAA,CAACF,WAAW;MAAAiB,QAAA,EAAEJ,CAAC,CAAC,0BAA0B;IAAC,CAAc,CAC1D;EAAA,CACY,CAChB,EACD,CAACN,EAAE,EAAEC,OAAO,EAAEC,UAAU,EAAEC,MAAM,EAAEC,SAAS,EAAEC,IAAI,EAAEC,CAAC,CACtD,CAAC;EAED,OAAOP,eAAe,GACpBQ,UAAU,GAEVZ,IAAA,CAACH,gBAAgB;IAACY,SAAS,EAAEA,SAAU;IAAAM,QAAA,EAAEH;EAAU,CAAmB,CACvE;AACH,CAAC;AAED,MAAMI,kBAAkB,GAAGtB,IAAI,CAACS,UAAU,CAAC;AAC3Ca,kBAAkB,CAACC,WAAW,GAAG,YAAY;AAE7C,SAASD,kBAAkB,IAAIb,UAAU","ignoreList":[]}
+{"version":3,"file":"FieldLabel.js","names":["memo","useMemo","useTranslation","ScreenReaderText","Subordinate","jsx","_jsx","jsxs","_jsxs","FieldLabel","hasVisibleLabel","id","inputId","isOptional","testId","translate","text","t","inputLabel","_InputLabel","htmlFor","children","MemoizedFieldLabel","displayName"],"sources":["../../src/FieldLabel.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 { InputLabel as MuiInputLabel } from \"@mui/material\";\nimport { memo, useMemo } from \"react\";\n\nimport type { HtmlProps } from \"./HtmlProps.js\";\n\nimport { useTranslation } from \"./i18n.generated/i18n.js\";\nimport { ScreenReaderText } from \"./ScreenReaderText.js\";\nimport { Subordinate } from \"./Typography.js\";\n\nexport type FieldLabelProps = {\n  hasVisibleLabel: boolean;\n  id: string;\n  inputId: string;\n  isOptional: boolean;\n  text: string;\n} & Pick<HtmlProps, \"testId\" | \"translate\">;\n\nconst FieldLabel = ({\n  hasVisibleLabel,\n  id,\n  inputId,\n  isOptional,\n  testId,\n  translate,\n  text,\n}: FieldLabelProps) => {\n  const { t } = useTranslation();\n\n  const inputLabel = useMemo(\n    () => (\n      <MuiInputLabel\n        data-se={testId}\n        htmlFor={inputId}\n        id={id}\n        translate={translate}\n      >\n        <span>{text}</span>\n        {isOptional && (\n          <Subordinate>{t(\"fieldlabel.optional.text\")}</Subordinate>\n        )}\n      </MuiInputLabel>\n    ),\n    [id, inputId, isOptional, testId, translate, text, t],\n  );\n\n  return hasVisibleLabel ? (\n    inputLabel\n  ) : (\n    <ScreenReaderText translate={translate}>{inputLabel}</ScreenReaderText>\n  );\n};\n\nconst MemoizedFieldLabel = memo(FieldLabel);\nMemoizedFieldLabel.displayName = \"FieldLabel\";\n\nexport { MemoizedFieldLabel as FieldLabel };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,SAASA,IAAI,EAAEC,OAAO,QAAQ,OAAO;AAIrC,SAASC,cAAc,QAAQ,0BAA0B;AACzD,SAASC,gBAAgB,QAAQ,uBAAuB;AACxD,SAASC,WAAW,QAAQ,iBAAiB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAU9C,MAAMC,UAAU,GAAGA,CAAC;EAClBC,eAAe;EACfC,EAAE;EACFC,OAAO;EACPC,UAAU;EACVC,MAAM;EACNC,SAAS;EACTC;AACe,CAAC,KAAK;EACrB,MAAM;IAAEC;EAAE,CAAC,GAAGf,cAAc,CAAC,CAAC;EAE9B,MAAMgB,UAAU,GAAGjB,OAAO,CACxB,MACEO,KAAA,CAAAW,WAAA;IACE,WAASL,MAAO;IAChBM,OAAO,EAAER,OAAQ;IACjBD,EAAE,EAAEA,EAAG;IACPI,SAAS,EAAEA,SAAU;IAAAM,QAAA,GAErBf,IAAA;MAAAe,QAAA,EAAOL;IAAI,CAAO,CAAC,EAClBH,UAAU,IACTP,IAAA,CAACF,WAAW;MAAAiB,QAAA,EAAEJ,CAAC,CAAC,0BAA0B;IAAC,CAAc,CAC1D;EAAA,CACY,CAChB,EACD,CAACN,EAAE,EAAEC,OAAO,EAAEC,UAAU,EAAEC,MAAM,EAAEC,SAAS,EAAEC,IAAI,EAAEC,CAAC,CACtD,CAAC;EAED,OAAOP,eAAe,GACpBQ,UAAU,GAEVZ,IAAA,CAACH,gBAAgB;IAACY,SAAS,EAAEA,SAAU;IAAAM,QAAA,EAAEH;EAAU,CAAmB,CACvE;AACH,CAAC;AAED,MAAMI,kBAAkB,GAAGtB,IAAI,CAACS,UAAU,CAAC;AAC3Ca,kBAAkB,CAACC,WAAW,GAAG,YAAY;AAE7C,SAASD,kBAAkB,IAAIb,UAAU","ignoreList":[]}

package/dist/esm/FileUploader/FileUploadPreview.js

@@ -13,7 +13,7 @@ import _IconButton from "@mui/material/IconButton";
 
 import styled from "@emotion/styled";
 import { memo, useCallback } from "react";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "../i18n.generated/i18n.js";
 import { DeleteIcon } from "../icons.generated/index.js";
 import { MuiPropsContext } from "../MuiPropsContext.js";
 import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext.js";

package/dist/esm/FileUploader/FileUploadPreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileUploadPreview.js","names":["styled","memo","useCallback","useTranslation","DeleteIcon","MuiPropsContext","useOdysseyDesignTokens","Tooltip","jsx","_jsx","jsxs","_jsxs","PreviewContainer","div","isDisabled","odysseyDesignTokens","color","TypographyColorDisabled","marginBlockStart","Spacing2","pointerEvents","UploadedFileContainer","display","justifyContent","alignItems","button","transform","padding","Spacing1","borderRadius","BorderRadiusMain","transition","TransitionTimingMain","backgroundColor","HueNeutral100","borderColor","FocusOutlineColorPrimary","boxShadow","outline","FocusOutlineWidthMain","FocusOutlineStyle","UploadedFile","name","onFileRemove","t","deleteHandler","renderDeleteButton","muiProps","_IconButton","onClick","size","children","tabIndex","ariaType","placement","text","Consumer","FileUploadPreview","fileNames","map","index","MemoizedFileUploadPreview","displayName"],"sources":["../../../src/FileUploader/FileUploadPreview.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 styled from \"@emotion/styled\";\nimport { IconButton } from \"@mui/material\";\nimport { memo, useCallback } from \"react\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { DeleteIcon } from \"../icons.generated/index.js\";\nimport { MuiPropsContext, MuiPropsContextType } from \"../MuiPropsContext.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../OdysseyDesignTokensContext.js\";\nimport { Tooltip } from \"../Tooltip.js\";\nimport { FileUploaderProps } from \"./FileUploader.js\";\n\nconst PreviewContainer = styled.div<{\n  isDisabled: FileUploaderProps[\"isDisabled\"];\n  odysseyDesignTokens: DesignTokens;\n}>(({ isDisabled, odysseyDesignTokens }) => ({\n  color: isDisabled ? odysseyDesignTokens.TypographyColorDisabled : \"inherit\",\n  marginBlockStart: odysseyDesignTokens.Spacing2,\n  pointerEvents: isDisabled ? \"none\" : \"auto\",\n}));\n\nconst UploadedFileContainer = styled.div<{ odysseyDesignTokens: DesignTokens }>(\n  {\n    display: \"flex\",\n    justifyContent: \"space-between\",\n    alignItems: \"center\",\n\n    button: {\n      transform: \"scale(0)\",\n    },\n\n    \"&:hover, &:focus-within, &:focus\": {\n      button: {\n        transform: \"scale(1)\",\n      },\n    },\n  },\n  ({ odysseyDesignTokens }) => ({\n    padding: `${odysseyDesignTokens.Spacing1} ${odysseyDesignTokens.Spacing2}`,\n    borderRadius: odysseyDesignTokens.BorderRadiusMain,\n    transition: `background-color ${odysseyDesignTokens.TransitionTimingMain}`,\n\n    \"&:hover, &:focus-within\": {\n      backgroundColor: odysseyDesignTokens.HueNeutral100,\n    },\n\n    \"&:focus\": {\n      borderColor: odysseyDesignTokens.FocusOutlineColorPrimary,\n      boxShadow: `0 0 0 2px ${odysseyDesignTokens.FocusOutlineColorPrimary}`,\n      outline: `${odysseyDesignTokens.FocusOutlineWidthMain} ${odysseyDesignTokens.FocusOutlineStyle} transparent`,\n    },\n  }),\n);\n\ntype UploadedFileProps = {\n  name: string;\n  onFileRemove?: (name: string) => void;\n};\n\nconst UploadedFile = ({ name, onFileRemove }: UploadedFileProps) => {\n  const { t } = useTranslation();\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const deleteHandler = useCallback(() => {\n    onFileRemove?.(name);\n  }, [onFileRemove, name]);\n\n  const renderDeleteButton = useCallback(\n    (muiProps: MuiPropsContextType) => {\n      return (\n        <IconButton\n          {...muiProps}\n          aria-label={t(\"fileupload.removefile.text\")}\n          onClick={deleteHandler}\n          size=\"small\"\n        >\n          <DeleteIcon />\n        </IconButton>\n      );\n    },\n    [deleteHandler, t],\n  );\n\n  return (\n    <UploadedFileContainer\n      odysseyDesignTokens={odysseyDesignTokens}\n      // tabindex added to make this element focusable\n      tabIndex={0}\n    >\n      {name}\n      <Tooltip\n        ariaType=\"description\"\n        placement=\"top\"\n        text={t(\"fileupload.removefile.text\")}\n      >\n        <MuiPropsContext.Consumer>\n          {renderDeleteButton}\n        </MuiPropsContext.Consumer>\n      </Tooltip>\n    </UploadedFileContainer>\n  );\n};\n\ntype FileUploadPreviewProps = {\n  fileNames: string[];\n  isDisabled: FileUploaderProps[\"isDisabled\"];\n  onFileRemove?: (name: string) => void;\n};\n\nconst FileUploadPreview = ({\n  fileNames,\n  isDisabled,\n  onFileRemove,\n}: FileUploadPreviewProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  return (\n    <PreviewContainer\n      data-file-preview-container=\"true\"\n      isDisabled={isDisabled}\n      odysseyDesignTokens={odysseyDesignTokens}\n    >\n      {fileNames?.map((name, index) => (\n        <UploadedFile\n          key={`${index}-${name}`}\n          name={name}\n          onFileRemove={onFileRemove}\n        />\n      ))}\n    </PreviewContainer>\n  );\n};\n\nconst MemoizedFileUploadPreview = memo(FileUploadPreview);\nMemoizedFileUploadPreview.displayName = \"FileUploadPreview\";\n\nexport { MemoizedFileUploadPreview as FileUploadPreview };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"FileUploadPreview.js","names":["styled","memo","useCallback","useTranslation","DeleteIcon","MuiPropsContext","useOdysseyDesignTokens","Tooltip","jsx","_jsx","jsxs","_jsxs","PreviewContainer","div","isDisabled","odysseyDesignTokens","color","TypographyColorDisabled","marginBlockStart","Spacing2","pointerEvents","UploadedFileContainer","display","justifyContent","alignItems","button","transform","padding","Spacing1","borderRadius","BorderRadiusMain","transition","TransitionTimingMain","backgroundColor","HueNeutral100","borderColor","FocusOutlineColorPrimary","boxShadow","outline","FocusOutlineWidthMain","FocusOutlineStyle","UploadedFile","name","onFileRemove","t","deleteHandler","renderDeleteButton","muiProps","_IconButton","onClick","size","children","tabIndex","ariaType","placement","text","Consumer","FileUploadPreview","fileNames","map","index","MemoizedFileUploadPreview","displayName"],"sources":["../../../src/FileUploader/FileUploadPreview.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 styled from \"@emotion/styled\";\nimport { IconButton } from \"@mui/material\";\nimport { memo, useCallback } from \"react\";\n\nimport { useTranslation } from \"../i18n.generated/i18n.js\";\nimport { DeleteIcon } from \"../icons.generated/index.js\";\nimport { MuiPropsContext, MuiPropsContextType } from \"../MuiPropsContext.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../OdysseyDesignTokensContext.js\";\nimport { Tooltip } from \"../Tooltip.js\";\nimport { FileUploaderProps } from \"./FileUploader.js\";\n\nconst PreviewContainer = styled.div<{\n  isDisabled: FileUploaderProps[\"isDisabled\"];\n  odysseyDesignTokens: DesignTokens;\n}>(({ isDisabled, odysseyDesignTokens }) => ({\n  color: isDisabled ? odysseyDesignTokens.TypographyColorDisabled : \"inherit\",\n  marginBlockStart: odysseyDesignTokens.Spacing2,\n  pointerEvents: isDisabled ? \"none\" : \"auto\",\n}));\n\nconst UploadedFileContainer = styled.div<{ odysseyDesignTokens: DesignTokens }>(\n  {\n    display: \"flex\",\n    justifyContent: \"space-between\",\n    alignItems: \"center\",\n\n    button: {\n      transform: \"scale(0)\",\n    },\n\n    \"&:hover, &:focus-within, &:focus\": {\n      button: {\n        transform: \"scale(1)\",\n      },\n    },\n  },\n  ({ odysseyDesignTokens }) => ({\n    padding: `${odysseyDesignTokens.Spacing1} ${odysseyDesignTokens.Spacing2}`,\n    borderRadius: odysseyDesignTokens.BorderRadiusMain,\n    transition: `background-color ${odysseyDesignTokens.TransitionTimingMain}`,\n\n    \"&:hover, &:focus-within\": {\n      backgroundColor: odysseyDesignTokens.HueNeutral100,\n    },\n\n    \"&:focus\": {\n      borderColor: odysseyDesignTokens.FocusOutlineColorPrimary,\n      boxShadow: `0 0 0 2px ${odysseyDesignTokens.FocusOutlineColorPrimary}`,\n      outline: `${odysseyDesignTokens.FocusOutlineWidthMain} ${odysseyDesignTokens.FocusOutlineStyle} transparent`,\n    },\n  }),\n);\n\ntype UploadedFileProps = {\n  name: string;\n  onFileRemove?: (name: string) => void;\n};\n\nconst UploadedFile = ({ name, onFileRemove }: UploadedFileProps) => {\n  const { t } = useTranslation();\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const deleteHandler = useCallback(() => {\n    onFileRemove?.(name);\n  }, [onFileRemove, name]);\n\n  const renderDeleteButton = useCallback(\n    (muiProps: MuiPropsContextType) => {\n      return (\n        <IconButton\n          {...muiProps}\n          aria-label={t(\"fileupload.removefile.text\")}\n          onClick={deleteHandler}\n          size=\"small\"\n        >\n          <DeleteIcon />\n        </IconButton>\n      );\n    },\n    [deleteHandler, t],\n  );\n\n  return (\n    <UploadedFileContainer\n      odysseyDesignTokens={odysseyDesignTokens}\n      // tabindex added to make this element focusable\n      tabIndex={0}\n    >\n      {name}\n      <Tooltip\n        ariaType=\"description\"\n        placement=\"top\"\n        text={t(\"fileupload.removefile.text\")}\n      >\n        <MuiPropsContext.Consumer>\n          {renderDeleteButton}\n        </MuiPropsContext.Consumer>\n      </Tooltip>\n    </UploadedFileContainer>\n  );\n};\n\ntype FileUploadPreviewProps = {\n  fileNames: string[];\n  isDisabled: FileUploaderProps[\"isDisabled\"];\n  onFileRemove?: (name: string) => void;\n};\n\nconst FileUploadPreview = ({\n  fileNames,\n  isDisabled,\n  onFileRemove,\n}: FileUploadPreviewProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  return (\n    <PreviewContainer\n      data-file-preview-container=\"true\"\n      isDisabled={isDisabled}\n      odysseyDesignTokens={odysseyDesignTokens}\n    >\n      {fileNames?.map((name, index) => (\n        <UploadedFile\n          key={`${index}-${name}`}\n          name={name}\n          onFileRemove={onFileRemove}\n        />\n      ))}\n    </PreviewContainer>\n  );\n};\n\nconst MemoizedFileUploadPreview = memo(FileUploadPreview);\nMemoizedFileUploadPreview.displayName = \"FileUploadPreview\";\n\nexport { MemoizedFileUploadPreview as FileUploadPreview };\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/FileUploader/FileUploader.js

@@ -12,9 +12,9 @@
 
 import styled from "@emotion/styled";
 import { memo, useCallback, useEffect, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
 import { Button } from "../Buttons/index.js";
 import { Field } from "../Field.js";
+import { useTranslation } from "../i18n.generated/i18n.js";
 import { UploadIcon } from "../icons.generated/index.js";
 import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext.js";
 import { Support } from "../Typography.js";

package/dist/esm/FileUploader/FileUploader.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileUploader.js","names":["styled","memo","useCallback","useEffect","useRef","useState","useTranslation","Button","Field","UploadIcon","useOdysseyDesignTokens","Support","FileUploadIllustration","FileUploadPreview","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","fileUploadTypes","fileUploadVariants","BaseInputWrapper","div","position","alignSelf","input","width","height","opacity","InputContainer","display","alignItems","justifyContent","borderStyle","hasError","odysseyDesignTokens","padding","Spacing6","Spacing3","border","PaletteDangerMain","HueNeutral300","borderRadius","BorderRadiusMain","transition","TransitionTimingMain","borderColor","HueNeutral700","FocusOutlineColorPrimary","boxShadow","outline","FocusOutlineWidthMain","FocusOutlineStyle","outlineOffset","FocusOutlineOffsetTight","backgroundColor","HueNeutral50","BorderColorDisabled","color","TypographyColorDisabled","ButtonAndInfoContainer","flexDirection","CenterAlignedSupportText","textAlign","FileUploader","acceptedFileTypes","errorMessage","id","isDisabled","isFullWidth","isOptional","hint","HintLinkComponent","label","onChange","type","variant","t","inputRef","filesToUpload","setFilesToUpload","updateFilesToUpload","event","files","target","length","mergedFiles","concat","Array","from","slice","value","triggerFileInputClick","current","click","removeFileFromFilesToUploadList","name","deletedFileFilteredOut","filter","file","renderFileInput","ariaDescribedBy","errorMessageElementId","labelElementId","acceptedFileTypesAsString","join","Input","accept","disabled","multiple","ref","title","children","onClick","startIcon","Boolean","fieldType","hasVisibleLabel","renderFieldComponent","fileNames","map","onFileRemove","MemoizedFileUploader","displayName","FileUpload"],"sources":["../../../src/FileUploader/FileUploader.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 styled from \"@emotion/styled\";\nimport {\n  ChangeEvent,\n  memo,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { Button } from \"../Buttons/index.js\";\nimport { Field, RenderFieldComponentProps } from \"../Field.js\";\nimport { FieldComponentProps } from \"../FieldComponentProps.js\";\nimport { UploadIcon } from \"../icons.generated/index.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../OdysseyDesignTokensContext.js\";\nimport { Support } from \"../Typography.js\";\nimport { FileUploadIllustration } from \"./FileUploadIllustration.js\";\nimport { FileUploadPreview } from \"./FileUploadPreview.js\";\n\nexport const fileUploadTypes = [\"single\", \"multiple\"] as const;\nexport const fileUploadVariants = [\n  \"button\",\n  \"dragAndDrop\",\n  \"dragAndDropWithIcon\",\n] as const;\n\nconst BaseInputWrapper = styled.div({\n  position: \"relative\",\n  alignSelf: \"flex-start\",\n\n  input: {\n    position: \"absolute\",\n    width: \"100%\",\n    height: \"100%\",\n    opacity: 0,\n  },\n});\n\nconst InputContainer = styled(BaseInputWrapper)<{\n  hasError: boolean;\n  odysseyDesignTokens: DesignTokens;\n}>(\n  {\n    display: \"flex\",\n    alignSelf: \"unset\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n\n    \"&:has(input:focus)\": {\n      borderStyle: \"solid\",\n    },\n  },\n  ({ hasError, odysseyDesignTokens }) => ({\n    padding: `${odysseyDesignTokens.Spacing6} ${odysseyDesignTokens.Spacing3}`,\n    border: hasError\n      ? `1px solid ${odysseyDesignTokens.PaletteDangerMain}`\n      : `1px dashed ${odysseyDesignTokens.HueNeutral300}`,\n    borderRadius: odysseyDesignTokens.BorderRadiusMain,\n    transition: `border-color ${odysseyDesignTokens.TransitionTimingMain}, box-shadow ${odysseyDesignTokens.TransitionTimingMain}`,\n\n    \"&:hover\": {\n      borderColor: odysseyDesignTokens.HueNeutral700,\n    },\n\n    \"&:has(input:focus)\": {\n      borderColor: odysseyDesignTokens.FocusOutlineColorPrimary,\n      boxShadow: `0 0 0 1px ${odysseyDesignTokens.FocusOutlineColorPrimary}`,\n      outline: `${odysseyDesignTokens.FocusOutlineWidthMain} ${odysseyDesignTokens.FocusOutlineStyle} transparent`,\n      outlineOffset: odysseyDesignTokens.FocusOutlineOffsetTight,\n    },\n\n    \"&:has(input:disabled)\": {\n      backgroundColor: odysseyDesignTokens.HueNeutral50,\n      border: `1px solid ${odysseyDesignTokens.BorderColorDisabled}`,\n      color: odysseyDesignTokens.TypographyColorDisabled,\n\n      \"&:hover\": {\n        borderColor: odysseyDesignTokens.BorderColorDisabled,\n      },\n    },\n  }),\n);\n\nconst ButtonAndInfoContainer = styled.div({\n  display: \"flex\",\n  flexDirection: \"column\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n});\n\nconst CenterAlignedSupportText = styled.div({\n  textAlign: \"center\",\n});\n\nexport type FileUploaderProps = {\n  /**\n   * an array of file types the user is able to upload. @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept#unique_file_type_specifiers for examples\n   */\n  acceptedFileTypes?: string[];\n  /**\n   * The label for the `input` element.\n   */\n  label: string;\n  /**\n   * Function that is called when the list of ifles to upload is changed\n   */\n  onChange: (files: File[]) => void;\n  /**\n   * Either `single` or `multiple`. If `multiple`, multiple files can be uploaded\n   */\n  type?: (typeof fileUploadTypes)[number];\n  /**\n   * Either `button`, `dragAndDrop` or `dragAndDropWithIcon`. Will determine how component appears visually\n   */\n  variant: (typeof fileUploadVariants)[number];\n} & Pick<\n  FieldComponentProps,\n  | \"errorMessage\"\n  | \"hint\"\n  | \"HintLinkComponent\"\n  | \"id\"\n  | \"isDisabled\"\n  | \"isFullWidth\"\n  | \"isOptional\"\n>;\n\nconst FileUploader = ({\n  acceptedFileTypes,\n  errorMessage,\n  id,\n  isDisabled = false,\n  isFullWidth,\n  isOptional,\n  hint,\n  HintLinkComponent,\n  label,\n  onChange,\n  type,\n  variant,\n}: FileUploaderProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const { t } = useTranslation();\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [filesToUpload, setFilesToUpload] = useState<File[]>([]);\n\n  useEffect(() => {\n    onChange(filesToUpload);\n  }, [filesToUpload, onChange]);\n\n  const updateFilesToUpload = useCallback(\n    (event: ChangeEvent<HTMLInputElement>) => {\n      const { files } = event.target;\n\n      if (files && files.length > 0) {\n        const mergedFiles =\n          type === \"multiple\"\n            ? filesToUpload.concat(Array.from(files))\n            : Array.from(files).slice();\n\n        setFilesToUpload(mergedFiles);\n      }\n\n      // reset input value to allow re-upload of a file with the same name\n      event.target.value = \"\";\n    },\n    [type, filesToUpload],\n  );\n\n  const triggerFileInputClick = useCallback(() => {\n    inputRef.current?.click();\n  }, [inputRef]);\n\n  const removeFileFromFilesToUploadList = useCallback<(name: string) => void>(\n    (name) => {\n      const deletedFileFilteredOut = filesToUpload.filter(\n        (file) => file.name !== name,\n      );\n      setFilesToUpload(deletedFileFilteredOut);\n    },\n    [filesToUpload],\n  );\n\n  const renderFileInput = useCallback(\n    ({\n      ariaDescribedBy,\n      errorMessageElementId,\n      id,\n      labelElementId,\n    }: RenderFieldComponentProps) => {\n      const acceptedFileTypesAsString = acceptedFileTypes?.join(\",\");\n\n      const Input = () => (\n        <input\n          accept={acceptedFileTypesAsString}\n          aria-describedby={ariaDescribedBy}\n          aria-errormessage={errorMessageElementId}\n          aria-labelledby={labelElementId}\n          disabled={isDisabled}\n          id={id}\n          multiple={type === \"multiple\"}\n          onChange={updateFilesToUpload}\n          ref={inputRef}\n          title=\"\"\n          type=\"file\"\n        />\n      );\n\n      if (variant === \"button\") {\n        return (\n          <>\n            <BaseInputWrapper>\n              <Input />\n              <Button\n                isDisabled={isDisabled}\n                label={t(\"fileupload.button.text\")}\n                onClick={triggerFileInputClick}\n                startIcon={<UploadIcon />}\n                variant=\"secondary\"\n              />\n            </BaseInputWrapper>\n          </>\n        );\n      }\n\n      return (\n        <>\n          <InputContainer\n            hasError={Boolean(errorMessage)}\n            odysseyDesignTokens={odysseyDesignTokens}\n          >\n            <Input />\n            <ButtonAndInfoContainer>\n              {variant === \"dragAndDropWithIcon\" && <FileUploadIllustration />}\n              <CenterAlignedSupportText>\n                <Support color=\"textSecondary\">\n                  {t(\"fileupload.prompt.text\")}\n                </Support>\n              </CenterAlignedSupportText>\n              <Button\n                isDisabled={isDisabled}\n                label={t(\"fileupload.button.text\")}\n                onClick={triggerFileInputClick}\n                startIcon={<UploadIcon />}\n                variant=\"secondary\"\n              />\n            </ButtonAndInfoContainer>\n          </InputContainer>\n        </>\n      );\n    },\n    [\n      acceptedFileTypes,\n      errorMessage,\n      isDisabled,\n      inputRef,\n      odysseyDesignTokens,\n      triggerFileInputClick,\n      t,\n      type,\n      updateFilesToUpload,\n      variant,\n    ],\n  );\n\n  return (\n    <>\n      <Field\n        errorMessage={errorMessage}\n        fieldType=\"single\"\n        hasVisibleLabel\n        hint={hint}\n        HintLinkComponent={HintLinkComponent}\n        id={id}\n        isDisabled={isDisabled}\n        isFullWidth={isFullWidth && variant !== \"button\"}\n        isOptional={isOptional}\n        label={label}\n        renderFieldComponent={renderFileInput}\n      />\n      {filesToUpload.length > 0 && (\n        <FileUploadPreview\n          fileNames={filesToUpload.map((file) => file.name)}\n          isDisabled={isDisabled}\n          onFileRemove={removeFileFromFilesToUploadList}\n        />\n      )}\n    </>\n  );\n};\n\nconst MemoizedFileUploader = memo(FileUploader);\nMemoizedFileUploader.displayName = \"FileUploader\";\n\nexport { MemoizedFileUploader as FileUpload };\nexport { MemoizedFileUploader as FileUploader };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"FileUploader.js","names":["styled","memo","useCallback","useEffect","useRef","useState","Button","Field","useTranslation","UploadIcon","useOdysseyDesignTokens","Support","FileUploadIllustration","FileUploadPreview","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","fileUploadTypes","fileUploadVariants","BaseInputWrapper","div","position","alignSelf","input","width","height","opacity","InputContainer","display","alignItems","justifyContent","borderStyle","hasError","odysseyDesignTokens","padding","Spacing6","Spacing3","border","PaletteDangerMain","HueNeutral300","borderRadius","BorderRadiusMain","transition","TransitionTimingMain","borderColor","HueNeutral700","FocusOutlineColorPrimary","boxShadow","outline","FocusOutlineWidthMain","FocusOutlineStyle","outlineOffset","FocusOutlineOffsetTight","backgroundColor","HueNeutral50","BorderColorDisabled","color","TypographyColorDisabled","ButtonAndInfoContainer","flexDirection","CenterAlignedSupportText","textAlign","FileUploader","acceptedFileTypes","errorMessage","id","isDisabled","isFullWidth","isOptional","hint","HintLinkComponent","label","onChange","type","variant","t","inputRef","filesToUpload","setFilesToUpload","updateFilesToUpload","event","files","target","length","mergedFiles","concat","Array","from","slice","value","triggerFileInputClick","current","click","removeFileFromFilesToUploadList","name","deletedFileFilteredOut","filter","file","renderFileInput","ariaDescribedBy","errorMessageElementId","labelElementId","acceptedFileTypesAsString","join","Input","accept","disabled","multiple","ref","title","children","onClick","startIcon","Boolean","fieldType","hasVisibleLabel","renderFieldComponent","fileNames","map","onFileRemove","MemoizedFileUploader","displayName","FileUpload"],"sources":["../../../src/FileUploader/FileUploader.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 styled from \"@emotion/styled\";\nimport {\n  ChangeEvent,\n  memo,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { Button } from \"../Buttons/index.js\";\nimport { Field, RenderFieldComponentProps } from \"../Field.js\";\nimport { FieldComponentProps } from \"../FieldComponentProps.js\";\nimport { useTranslation } from \"../i18n.generated/i18n.js\";\nimport { UploadIcon } from \"../icons.generated/index.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../OdysseyDesignTokensContext.js\";\nimport { Support } from \"../Typography.js\";\nimport { FileUploadIllustration } from \"./FileUploadIllustration.js\";\nimport { FileUploadPreview } from \"./FileUploadPreview.js\";\n\nexport const fileUploadTypes = [\"single\", \"multiple\"] as const;\nexport const fileUploadVariants = [\n  \"button\",\n  \"dragAndDrop\",\n  \"dragAndDropWithIcon\",\n] as const;\n\nconst BaseInputWrapper = styled.div({\n  position: \"relative\",\n  alignSelf: \"flex-start\",\n\n  input: {\n    position: \"absolute\",\n    width: \"100%\",\n    height: \"100%\",\n    opacity: 0,\n  },\n});\n\nconst InputContainer = styled(BaseInputWrapper)<{\n  hasError: boolean;\n  odysseyDesignTokens: DesignTokens;\n}>(\n  {\n    display: \"flex\",\n    alignSelf: \"unset\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n\n    \"&:has(input:focus)\": {\n      borderStyle: \"solid\",\n    },\n  },\n  ({ hasError, odysseyDesignTokens }) => ({\n    padding: `${odysseyDesignTokens.Spacing6} ${odysseyDesignTokens.Spacing3}`,\n    border: hasError\n      ? `1px solid ${odysseyDesignTokens.PaletteDangerMain}`\n      : `1px dashed ${odysseyDesignTokens.HueNeutral300}`,\n    borderRadius: odysseyDesignTokens.BorderRadiusMain,\n    transition: `border-color ${odysseyDesignTokens.TransitionTimingMain}, box-shadow ${odysseyDesignTokens.TransitionTimingMain}`,\n\n    \"&:hover\": {\n      borderColor: odysseyDesignTokens.HueNeutral700,\n    },\n\n    \"&:has(input:focus)\": {\n      borderColor: odysseyDesignTokens.FocusOutlineColorPrimary,\n      boxShadow: `0 0 0 1px ${odysseyDesignTokens.FocusOutlineColorPrimary}`,\n      outline: `${odysseyDesignTokens.FocusOutlineWidthMain} ${odysseyDesignTokens.FocusOutlineStyle} transparent`,\n      outlineOffset: odysseyDesignTokens.FocusOutlineOffsetTight,\n    },\n\n    \"&:has(input:disabled)\": {\n      backgroundColor: odysseyDesignTokens.HueNeutral50,\n      border: `1px solid ${odysseyDesignTokens.BorderColorDisabled}`,\n      color: odysseyDesignTokens.TypographyColorDisabled,\n\n      \"&:hover\": {\n        borderColor: odysseyDesignTokens.BorderColorDisabled,\n      },\n    },\n  }),\n);\n\nconst ButtonAndInfoContainer = styled.div({\n  display: \"flex\",\n  flexDirection: \"column\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n});\n\nconst CenterAlignedSupportText = styled.div({\n  textAlign: \"center\",\n});\n\nexport type FileUploaderProps = {\n  /**\n   * an array of file types the user is able to upload. @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept#unique_file_type_specifiers for examples\n   */\n  acceptedFileTypes?: string[];\n  /**\n   * The label for the `input` element.\n   */\n  label: string;\n  /**\n   * Function that is called when the list of ifles to upload is changed\n   */\n  onChange: (files: File[]) => void;\n  /**\n   * Either `single` or `multiple`. If `multiple`, multiple files can be uploaded\n   */\n  type?: (typeof fileUploadTypes)[number];\n  /**\n   * Either `button`, `dragAndDrop` or `dragAndDropWithIcon`. Will determine how component appears visually\n   */\n  variant: (typeof fileUploadVariants)[number];\n} & Pick<\n  FieldComponentProps,\n  | \"errorMessage\"\n  | \"hint\"\n  | \"HintLinkComponent\"\n  | \"id\"\n  | \"isDisabled\"\n  | \"isFullWidth\"\n  | \"isOptional\"\n>;\n\nconst FileUploader = ({\n  acceptedFileTypes,\n  errorMessage,\n  id,\n  isDisabled = false,\n  isFullWidth,\n  isOptional,\n  hint,\n  HintLinkComponent,\n  label,\n  onChange,\n  type,\n  variant,\n}: FileUploaderProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const { t } = useTranslation();\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [filesToUpload, setFilesToUpload] = useState<File[]>([]);\n\n  useEffect(() => {\n    onChange(filesToUpload);\n  }, [filesToUpload, onChange]);\n\n  const updateFilesToUpload = useCallback(\n    (event: ChangeEvent<HTMLInputElement>) => {\n      const { files } = event.target;\n\n      if (files && files.length > 0) {\n        const mergedFiles =\n          type === \"multiple\"\n            ? filesToUpload.concat(Array.from(files))\n            : Array.from(files).slice();\n\n        setFilesToUpload(mergedFiles);\n      }\n\n      // reset input value to allow re-upload of a file with the same name\n      event.target.value = \"\";\n    },\n    [type, filesToUpload],\n  );\n\n  const triggerFileInputClick = useCallback(() => {\n    inputRef.current?.click();\n  }, [inputRef]);\n\n  const removeFileFromFilesToUploadList = useCallback<(name: string) => void>(\n    (name) => {\n      const deletedFileFilteredOut = filesToUpload.filter(\n        (file) => file.name !== name,\n      );\n      setFilesToUpload(deletedFileFilteredOut);\n    },\n    [filesToUpload],\n  );\n\n  const renderFileInput = useCallback(\n    ({\n      ariaDescribedBy,\n      errorMessageElementId,\n      id,\n      labelElementId,\n    }: RenderFieldComponentProps) => {\n      const acceptedFileTypesAsString = acceptedFileTypes?.join(\",\");\n\n      const Input = () => (\n        <input\n          accept={acceptedFileTypesAsString}\n          aria-describedby={ariaDescribedBy}\n          aria-errormessage={errorMessageElementId}\n          aria-labelledby={labelElementId}\n          disabled={isDisabled}\n          id={id}\n          multiple={type === \"multiple\"}\n          onChange={updateFilesToUpload}\n          ref={inputRef}\n          title=\"\"\n          type=\"file\"\n        />\n      );\n\n      if (variant === \"button\") {\n        return (\n          <>\n            <BaseInputWrapper>\n              <Input />\n              <Button\n                isDisabled={isDisabled}\n                label={t(\"fileupload.button.text\")}\n                onClick={triggerFileInputClick}\n                startIcon={<UploadIcon />}\n                variant=\"secondary\"\n              />\n            </BaseInputWrapper>\n          </>\n        );\n      }\n\n      return (\n        <>\n          <InputContainer\n            hasError={Boolean(errorMessage)}\n            odysseyDesignTokens={odysseyDesignTokens}\n          >\n            <Input />\n            <ButtonAndInfoContainer>\n              {variant === \"dragAndDropWithIcon\" && <FileUploadIllustration />}\n              <CenterAlignedSupportText>\n                <Support color=\"textSecondary\">\n                  {t(\"fileupload.prompt.text\")}\n                </Support>\n              </CenterAlignedSupportText>\n              <Button\n                isDisabled={isDisabled}\n                label={t(\"fileupload.button.text\")}\n                onClick={triggerFileInputClick}\n                startIcon={<UploadIcon />}\n                variant=\"secondary\"\n              />\n            </ButtonAndInfoContainer>\n          </InputContainer>\n        </>\n      );\n    },\n    [\n      acceptedFileTypes,\n      errorMessage,\n      isDisabled,\n      inputRef,\n      odysseyDesignTokens,\n      triggerFileInputClick,\n      t,\n      type,\n      updateFilesToUpload,\n      variant,\n    ],\n  );\n\n  return (\n    <>\n      <Field\n        errorMessage={errorMessage}\n        fieldType=\"single\"\n        hasVisibleLabel\n        hint={hint}\n        HintLinkComponent={HintLinkComponent}\n        id={id}\n        isDisabled={isDisabled}\n        isFullWidth={isFullWidth && variant !== \"button\"}\n        isOptional={isOptional}\n        label={label}\n        renderFieldComponent={renderFileInput}\n      />\n      {filesToUpload.length > 0 && (\n        <FileUploadPreview\n          fileNames={filesToUpload.map((file) => file.name)}\n          isDisabled={isDisabled}\n          onFileRemove={removeFileFromFilesToUploadList}\n        />\n      )}\n    </>\n  );\n};\n\nconst MemoizedFileUploader = memo(FileUploader);\nMemoizedFileUploader.displayName = \"FileUploader\";\n\nexport { MemoizedFileUploader as FileUpload };\nexport { MemoizedFileUploader as FileUploader };\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/FullScreenOverlay.js

@@ -0,0 +1,35 @@
+/*!
+ * Copyright (c) 2025-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 { useFullScreenOverlayContext } from "./FullScreenOverlayContext.js";
+import { OdysseyProvider } from "./OdysseyProvider.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const FullScreenOverlay = ({
+  children
+}) => {
+  const {
+    overlayEmotionRootElement,
+    overlayShadowRootElement
+  } = useFullScreenOverlayContext();
+  return _jsx(OdysseyProvider, {
+    emotionRootElement: overlayEmotionRootElement,
+    hasScopedCssBaseline: false,
+    hasWrapperElement: false,
+    shadowRootElement: overlayShadowRootElement,
+    children: children
+  });
+};
+const MemoizedFullScreenOverlay = memo(FullScreenOverlay);
+MemoizedFullScreenOverlay.displayName = "FullScreenOverlay";
+export { MemoizedFullScreenOverlay as FullScreenOverlay };
+//# sourceMappingURL=FullScreenOverlay.js.map

package/dist/esm/FullScreenOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FullScreenOverlay.js","names":["memo","useFullScreenOverlayContext","OdysseyProvider","jsx","_jsx","FullScreenOverlay","children","overlayEmotionRootElement","overlayShadowRootElement","emotionRootElement","hasScopedCssBaseline","hasWrapperElement","shadowRootElement","MemoizedFullScreenOverlay","displayName"],"sources":["../../src/FullScreenOverlay.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2025-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, type ReactNode } from \"react\";\n\nimport {\n  type FullScreenOverlayProviderProps,\n  useFullScreenOverlayContext,\n} from \"./FullScreenOverlayContext.js\";\nimport { OdysseyProvider } from \"./OdysseyProvider.js\";\n\nexport type FullScreenOverlayProps = {\n  children: ReactNode;\n};\n\nconst FullScreenOverlay = ({ children }: FullScreenOverlayProviderProps) => {\n  const { overlayEmotionRootElement, overlayShadowRootElement } =\n    useFullScreenOverlayContext();\n\n  return (\n    <OdysseyProvider\n      emotionRootElement={overlayEmotionRootElement}\n      hasScopedCssBaseline={false}\n      hasWrapperElement={false}\n      shadowRootElement={overlayShadowRootElement}\n    >\n      {children}\n    </OdysseyProvider>\n  );\n};\n\nconst MemoizedFullScreenOverlay = memo(FullScreenOverlay);\nMemoizedFullScreenOverlay.displayName = \"FullScreenOverlay\";\n\nexport { MemoizedFullScreenOverlay as FullScreenOverlay };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAwB,OAAO;AAE5C,SAEEC,2BAA2B,QACtB,+BAA+B;AACtC,SAASC,eAAe,QAAQ,sBAAsB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAMvD,MAAMC,iBAAiB,GAAGA,CAAC;EAAEC;AAAyC,CAAC,KAAK;EAC1E,MAAM;IAAEC,yBAAyB;IAAEC;EAAyB,CAAC,GAC3DP,2BAA2B,CAAC,CAAC;EAE/B,OACEG,IAAA,CAACF,eAAe;IACdO,kBAAkB,EAAEF,yBAA0B;IAC9CG,oBAAoB,EAAE,KAAM;IAC5BC,iBAAiB,EAAE,KAAM;IACzBC,iBAAiB,EAAEJ,wBAAyB;IAAAF,QAAA,EAE3CA;EAAQ,CACM,CAAC;AAEtB,CAAC;AAED,MAAMO,yBAAyB,GAAGb,IAAI,CAACK,iBAAiB,CAAC;AACzDQ,yBAAyB,CAACC,WAAW,GAAG,mBAAmB;AAE3D,SAASD,yBAAyB,IAAIR,iBAAiB","ignoreList":[]}