@okta/odyssey-react-mui 1.45.0 → 1.47.0

package/dist/cjs/Dialog.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.cjs","names":["_react","require","_reactI18next","_index","_index2","_useUniqueId","_jsxRuntime","_interopRequireDefault","e","__esModule","default","Dialog","primaryCallToActionComponent","secondaryCallToActionComponent","tertiaryCallToActionComponent","callToActionFirstComponent","callToActionSecondComponent","callToActionLastComponent","children","isOpen","onClose","testId","title","translate","t","useTranslation","isContentScrollable","setIsContentScrollable","useState","dialogContentRef","useRef","dialogTitleId","useUniqueId","dialogLabelId","useEffect","frameId","handleContentScroll","dialogContentElement","current","cancelAnimationFrame","scrollHeight","clientHeight","requestAnimationFrame","content","jsx","_DialogContentText2","actionButtons","filter","Boolean","handleCloseButtonClick","useCallback","event","jsxs","_Dialog2","open","_DialogTitle2","id","Button","ariaLabel","onClick","size","startIcon","CloseIcon","variant","_DialogContent2","tabIndex","dividers","ref","length","_DialogActions2","map","actionButton","index","cloneElement","key","MemoizedDialog","exports","memo","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":";;;;;;;;;;;AAoBA,IAAAA,MAAA,GAAAC,OAAA;AAUA,IAAAC,aAAA,GAAAD,OAAA;AAIA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,YAAA,GAAAJ,OAAA;AAA+C,IAAAK,WAAA,GAAAL,OAAA;AAAA,SAAAM,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AApC/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAmFA,MAAMG,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,GAAG,IAAAC,4BAAc,EAAC,CAAC;EAC9B,MAAM,CAACC,mBAAmB,EAAEC,sBAAsB,CAAC,GAAG,IAAAC,eAAQ,EAAC,KAAK,CAAC;EACrE,MAAMC,gBAAgB,GAAG,IAAAC,aAAM,EAAiB,IAAI,CAAC;EACrD,MAAMC,aAAa,GAAG,IAAAC,wBAAW,EAAC,CAAC;EACnC,MAAMC,aAAa,GAAG,IAAAD,wBAAW,EAAC,CAAC;EAEnC,IAAAE,gBAAS,EAAC,MAAM;IACd,IAAIC,OAAe;IAEnB,MAAMC,mBAAmB,GAAGA,CAAA,KAAM;MAChC,MAAMC,oBAAoB,GAAGR,gBAAgB,CAACS,OAAO;MACrD,IAAID,oBAAoB,EAAE;QACxBE,oBAAoB,CAACJ,OAAO,CAAC;QAC7BR,sBAAsB,CACpBU,oBAAoB,CAACG,YAAY,GAAGH,oBAAoB,CAACI,YAC3D,CAAC;MACH;MACAN,OAAO,GAAGO,qBAAqB,CAACN,mBAAmB,CAAC;IACtD,CAAC;IAED,IAAIjB,MAAM,EAAE;MACVgB,OAAO,GAAGO,qBAAqB,CAACN,mBAAmB,CAAC;IACtD;IAEA,OAAO,MAAM;MACXG,oBAAoB,CAACJ,OAAO,CAAC;IAC/B,CAAC;EACH,CAAC,EAAE,CAAChB,MAAM,CAAC,CAAC;EAEZ,MAAMwB,OAAO,GACX,OAAOzB,QAAQ,KAAK,QAAQ,GAC1B,IAAAZ,WAAA,CAAAsC,GAAA,EAAAC,mBAAA,CAAAnC,OAAA;IAAAQ,QAAA,EAAoBA;EAAQ,CAAoB,CAAC,GAEjDA,QACD;EAGH,MAAM4B,aAAa,GAAG,CACpBhC,6BAA6B,IAAIG,yBAAyB,EAC1DJ,8BAA8B,IAAIG,2BAA2B,EAC7DJ,4BAA4B,IAAIG,0BAA0B,CAC3D,CAACgC,MAAM,CAACC,OAAO,CAAC;EAEjB,MAAMC,sBAAsB,GAAG,IAAAC,kBAAW,EAEvCC,KAAK,IAAK/B,OAAO,CAAC+B,KAAK,EAAE,kBAAkB,CAAC,EAAE,CAAC/B,OAAO,CAAC,CAAC;EAE3D,OACE,IAAAd,WAAA,CAAA8C,IAAA,EAAAC,QAAA,CAAA3C,OAAA;IACE,mBAAiBuB,aAAc;IAC/B,WAASZ,MAAO;IAChBD,OAAO,EAAEA,OAAQ;IACjBkC,IAAI,EAAEnC,MAAO;IAAAD,QAAA,GAEb,IAAAZ,WAAA,CAAA8C,IAAA,EAAAG,aAAA,CAAA7C,OAAA;MACE8C,EAAE,EAAEzB,aAAc;MAClBR,SAAS,EAAEA,SAAU;MAAAL,QAAA,GAErB,IAAAZ,WAAA,CAAAsC,GAAA;QAAMY,EAAE,EAAEvB,aAAc;QAAAf,QAAA,EAAEI;MAAK,CAAO,CAAC,EACvC,IAAAhB,WAAA,CAAAsC,GAAA,EAACzC,MAAA,CAAAsD,MAAM;QACLC,SAAS,EAAElC,CAAC,CAAC,YAAY,CAAE;QAC3BmC,OAAO,EAAEV,sBAAuB;QAChCW,IAAI,EAAC,OAAO;QACZC,SAAS,EAAE,IAAAvD,WAAA,CAAAsC,GAAA,EAACxC,OAAA,CAAA0D,SAAS,IAAE,CAAE;QACzBC,OAAO,EAAC;MAAU,CACnB,CAAC;IAAA,CACS,CAAC,EACd,IAAAzD,WAAA,CAAAsC,GAAA,EAAAoB,eAAA,CAAAtD,OAAA;MAAA,IACOgB,mBAAmB,IAAI;QAE1BuC,QAAQ,EAAE;MACZ,CAAC;MACDC,QAAQ,EAAExC,mBAAoB;MAC9ByC,GAAG,EAAEtC,gBAAiB;MAAAX,QAAA,EAErByB;IAAO,CACK,CAAC,EAEfG,aAAa,CAACsB,MAAM,GAAG,CAAC,IACvB,IAAA9D,WAAA,CAAAsC,GAAA,EAAAyB,eAAA,CAAA3D,OAAA;MAAAQ,QAAA,EACG4B,aAAa,CAACwB,GAAG,CAAC,CAACC,YAAY,EAAEC,KAAK,KACrCD,YAAY,GAAG,IAAAE,mBAAY,EAACF,YAAY,EAAE;QAAEG,GAAG,EAAEF;MAAM,CAAC,CAAC,GAAG,IAC9D;IAAC,CACY,CAChB;EAAA,CACQ,CAAC;AAEhB,CAAC;AAED,MAAMG,cAAc,GAAAC,OAAA,CAAAjE,MAAA,GAAG,IAAAkE,WAAI,EAAClE,MAAM,CAAC;AACnCgE,cAAc,CAACG,WAAW,GAAG,QAAQ","ignoreList":[]}
+{"version":3,"file":"Dialog.cjs","names":["_react","require","_index","_FullScreenOverlay","_i18n","_index2","_useUniqueId","_jsxRuntime","_interopRequireDefault","e","__esModule","default","Dialog","primaryCallToActionComponent","secondaryCallToActionComponent","tertiaryCallToActionComponent","callToActionFirstComponent","callToActionSecondComponent","callToActionLastComponent","children","isOpen","onClose","testId","title","translate","t","useTranslation","isContentScrollable","setIsContentScrollable","useState","dialogContentRef","useRef","dialogTitleId","useUniqueId","dialogLabelId","useEffect","frameId","handleContentScroll","dialogContentElement","current","cancelAnimationFrame","scrollHeight","clientHeight","requestAnimationFrame","content","jsx","_DialogContentText2","actionButtons","filter","Boolean","handleCloseButtonClick","useCallback","event","FullScreenOverlay","jsxs","_Dialog2","open","_DialogTitle2","id","Button","ariaLabel","onClick","size","startIcon","CloseIcon","variant","_DialogContent2","tabIndex","dividers","ref","length","_DialogActions2","map","actionButton","index","cloneElement","key","MemoizedDialog","exports","memo","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":"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","ignoreList":[]}

package/dist/cjs/Drawer.cjs

@@ -7,8 +7,9 @@ exports.variantValues = exports.Drawer = void 0;
 var _Drawer2 = _interopRequireDefault(require("@mui/material/Drawer"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _react = require("react");
-var _reactI18next = require("react-i18next");
 var _index = require("./Buttons/index.cjs");
+var _FullScreenOverlay = require("./FullScreenOverlay.cjs");
+var _i18n = require("./i18n.generated/i18n.cjs");
 var _index2 = require("./icons.generated/index.cjs");
 var _OdysseyDesignTokensContext = require("./OdysseyDesignTokensContext.cjs");
 var _Typography = require("./Typography.cjs");
@@ -107,7 +108,7 @@ const Drawer = ({
   const hasDividers = hasDividersProp || showDividers;
   const {
     i18n
-  } = (0, _reactI18next.useTranslation)();
+  } = (0, _i18n.useTranslation)();
   const anchorDirection = i18n.dir() === "rtl" ? "left" : "right";
   (0, _react.useEffect)(() => {
     let frameId;
@@ -131,7 +132,7 @@ const Drawer = ({
   }, [hasDividers, isContentScrollable]);
   const hasFooter = (0, _react.useMemo)(() => primaryCallToActionComponent || secondaryCallToActionComponent || tertiaryCallToActionComponent, [primaryCallToActionComponent, secondaryCallToActionComponent, tertiaryCallToActionComponent]);
   const handleCloseButtonClick = (0, _react.useCallback)(event => onClose(event, "closeButtonClick"), [onClose]);
-  return (0, _jsxRuntime.jsxs)(_Drawer2.default, {
+  const muiDrawerComponent = (0, _react.useMemo)(() => (0, _jsxRuntime.jsxs)(_Drawer2.default, {
     anchor: anchorDirection,
     "data-se": testId,
     onClose: onClose,
@@ -173,7 +174,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" ? (0, _jsxRuntime.jsx)(_FullScreenOverlay.FullScreenOverlay, {
+    children: muiDrawerComponent
+  }) : muiDrawerComponent;
 };
 const MemoizedDrawer = exports.Drawer = (0, _react.memo)(Drawer);
 MemoizedDrawer.displayName = "Drawer";

package/dist/cjs/Drawer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.cjs","names":["_styled","_interopRequireDefault","require","_react","_reactI18next","_index","_index2","_OdysseyDesignTokensContext","_Typography","_jsxRuntime","e","__esModule","default","variantValues","exports","DrawerHeader","styled","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","useState","drawerContentRef","useRef","useOdysseyDesignTokens","i18n","useTranslation","anchorDirection","dir","useEffect","frameId","handleContentScroll","drawerContentElement","current","cancelAnimationFrame","scrollHeight","clientHeight","requestAnimationFrame","dividersVisible","useMemo","hasFooter","handleCloseButtonClick","useCallback","event","jsxs","_Drawer2","anchor","open","sx","transition","tabIndex","ref","jsx","Heading5","Button","onClick","size","startIcon","CloseIcon","MemoizedDrawer","memo","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.cjs","names":["_styled","_interopRequireDefault","require","_react","_index","_FullScreenOverlay","_i18n","_index2","_OdysseyDesignTokensContext","_Typography","_jsxRuntime","e","__esModule","default","variantValues","exports","DrawerHeader","styled","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","useState","drawerContentRef","useRef","useOdysseyDesignTokens","i18n","useTranslation","anchorDirection","dir","useEffect","frameId","handleContentScroll","drawerContentElement","current","cancelAnimationFrame","scrollHeight","clientHeight","requestAnimationFrame","dividersVisible","useMemo","hasFooter","handleCloseButtonClick","useCallback","event","muiDrawerComponent","jsxs","_Drawer2","anchor","open","sx","transition","tabIndex","ref","jsx","Heading5","Button","onClick","size","startIcon","CloseIcon","FullScreenOverlay","MemoizedDrawer","memo","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/cjs/Field.cjs

@@ -7,11 +7,11 @@ exports.fieldTypeValues = exports.Field = void 0;
 var _FormControl2 = _interopRequireDefault(require("@mui/material/FormControl"));
 var _FormLabel2 = _interopRequireDefault(require("@mui/material/FormLabel"));
 var _react = require("react");
-var _reactI18next = require("react-i18next");
 var _FieldError = require("./FieldError.cjs");
 var _FieldHint = require("./FieldHint.cjs");
 var _FieldLabel = require("./FieldLabel.cjs");
 var _FieldsetContext = require("./FieldsetContext.cjs");
+var _i18n = require("./i18n.generated/i18n.cjs");
 var _Typography = require("./Typography.cjs");
 var _useUniqueId = require("./useUniqueId.cjs");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -48,7 +48,7 @@ const Field = ({
 }) => {
   const {
     t
-  } = (0, _reactI18next.useTranslation)();
+  } = (0, _i18n.useTranslation)();
   const id = (0, _useUniqueId.useUniqueId)(idOverride);
   const hintId = hint ? `${id}-hint` : undefined;
   const errorMessageElementId = errorMessage || errorMessageList ? `${id}-error` : undefined;

package/dist/cjs/Field.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Field.cjs","names":["_react","require","_reactI18next","_FieldError","_FieldHint","_FieldLabel","_FieldsetContext","_Typography","_useUniqueId","_jsxRuntime","_interopRequireDefault","e","__esModule","default","fieldTypeValues","exports","Field","ariaDescribedBy","errorMessage","errorMessageList","fieldType","hasVisibleLabel","hint","HintLinkComponent","id","idOverride","isDisabled","isDisabledProp","isFullWidth","isRadioGroup","isOptional","isReadOnly","label","renderFieldComponent","t","useTranslation","useUniqueId","hintId","undefined","errorMessageElementId","labelElementId","localAriaDescribedBy","useMemo","join","trim","isFieldsetDisabled","useFieldset","jsxs","_FormControl2","component","disabled","error","Boolean","Array","isArray","length","fullWidth","role","children","_FormLabel2","Typography","color","jsx","FieldLabel","inputId","text","FieldHint","LinkComponent","FieldError","message","messageList","MemoizedField","memo","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.cjs","names":["_react","require","_FieldError","_FieldHint","_FieldLabel","_FieldsetContext","_i18n","_Typography","_useUniqueId","_jsxRuntime","_interopRequireDefault","e","__esModule","default","fieldTypeValues","exports","Field","ariaDescribedBy","errorMessage","errorMessageList","fieldType","hasVisibleLabel","hint","HintLinkComponent","id","idOverride","isDisabled","isDisabledProp","isFullWidth","isRadioGroup","isOptional","isReadOnly","label","renderFieldComponent","t","useTranslation","useUniqueId","hintId","undefined","errorMessageElementId","labelElementId","localAriaDescribedBy","useMemo","join","trim","isFieldsetDisabled","useFieldset","jsxs","_FormControl2","component","disabled","error","Boolean","Array","isArray","length","fullWidth","role","children","_FormLabel2","Typography","color","jsx","FieldLabel","inputId","text","FieldHint","LinkComponent","FieldError","message","messageList","MemoizedField","memo","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/cjs/FieldError.cjs

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.FieldError = void 0;
 var _FormHelperText2 = _interopRequireDefault(require("@mui/material/FormHelperText"));
 var _react = require("react");
-var _reactI18next = require("react-i18next");
 var _Box = require("./Box.cjs");
 var _ErrorMessageList = require("./ErrorMessageList.cjs");
+var _i18n = require("./i18n.generated/i18n.cjs");
 var _ScreenReaderText = require("./ScreenReaderText.cjs");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -33,7 +33,7 @@ const FieldError = ({
 }) => {
   const {
     t
-  } = (0, _reactI18next.useTranslation)();
+  } = (0, _i18n.useTranslation)();
   return (0, _jsxRuntime.jsxs)(_FormHelperText2.default, {
     component: "div",
     "data-se": testId,

package/dist/cjs/FieldError.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FieldError.cjs","names":["_react","require","_reactI18next","_Box","_ErrorMessageList","_ScreenReaderText","_jsxRuntime","_interopRequireDefault","e","__esModule","default","FieldError","id","message","messageList","testId","translate","t","useTranslation","jsxs","_FormHelperText2","component","error","children","jsx","ScreenReaderText","Box","ErrorMessageList","errorMessages","MemoizedFieldError","exports","memo","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,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AAIA,IAAAE,IAAA,GAAAF,OAAA;AACA,IAAAG,iBAAA,GAAAH,OAAA;AACA,IAAAI,iBAAA,GAAAJ,OAAA;AAAyD,IAAAK,WAAA,GAAAL,OAAA;AAAA,SAAAM,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AApBzD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAkBA,MAAMG,UAAU,GAAGA,CAAC;EAClBC,EAAE;EACFC,OAAO;EACPC,WAAW;EACXC,MAAM;EACNC;AACe,CAAC,KAAK;EACrB,MAAM;IAAEC;EAAE,CAAC,GAAG,IAAAC,4BAAc,EAAC,CAAC;EAE9B,OACE,IAAAZ,WAAA,CAAAa,IAAA,EAAAC,gBAAA,CAAAV,OAAA;IACEW,SAAS,EAAC,KAAK;IACf,WAASN,MAAO;IAChBO,KAAK;IACLV,EAAE,EAAEA,EAAG;IACPI,SAAS,EAAEA,SAAU;IAAAO,QAAA,GAErB,IAAAjB,WAAA,CAAAkB,GAAA,EAACnB,iBAAA,CAAAoB,gBAAgB;MAACT,SAAS,EAAEA,SAAU;MAAAO,QAAA,EAAE,GAAGN,CAAC,CAC3C,8BACF,CAAC;IAAG,CAAmB,CAAC,EACxB,IAAAX,WAAA,CAAAa,IAAA,EAAChB,IAAA,CAAAuB,GAAG;MAAAH,QAAA,GACDV,OAAO,EACPC,WAAW,IAAI,IAAAR,WAAA,CAAAkB,GAAA,EAACpB,iBAAA,CAAAuB,gBAAgB;QAACC,aAAa,EAAEd;MAAY,CAAE,CAAC;IAAA,CAC7D,CAAC;EAAA,CACQ,CAAC;AAErB,CAAC;AAED,MAAMe,kBAAkB,GAAAC,OAAA,CAAAnB,UAAA,GAAG,IAAAoB,WAAI,EAACpB,UAAU,CAAC;AAC3CkB,kBAAkB,CAACG,WAAW,GAAG,YAAY","ignoreList":[]}
+{"version":3,"file":"FieldError.cjs","names":["_react","require","_Box","_ErrorMessageList","_i18n","_ScreenReaderText","_jsxRuntime","_interopRequireDefault","e","__esModule","default","FieldError","id","message","messageList","testId","translate","t","useTranslation","jsxs","_FormHelperText2","component","error","children","jsx","ScreenReaderText","Box","ErrorMessageList","errorMessages","MemoizedFieldError","exports","memo","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,IAAAA,MAAA,GAAAC,OAAA;AAIA,IAAAC,IAAA,GAAAD,OAAA;AACA,IAAAE,iBAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AACA,IAAAI,iBAAA,GAAAJ,OAAA;AAAyD,IAAAK,WAAA,GAAAL,OAAA;AAAA,SAAAM,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AApBzD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAkBA,MAAMG,UAAU,GAAGA,CAAC;EAClBC,EAAE;EACFC,OAAO;EACPC,WAAW;EACXC,MAAM;EACNC;AACe,CAAC,KAAK;EACrB,MAAM;IAAEC;EAAE,CAAC,GAAG,IAAAC,oBAAc,EAAC,CAAC;EAE9B,OACE,IAAAZ,WAAA,CAAAa,IAAA,EAAAC,gBAAA,CAAAV,OAAA;IACEW,SAAS,EAAC,KAAK;IACf,WAASN,MAAO;IAChBO,KAAK;IACLV,EAAE,EAAEA,EAAG;IACPI,SAAS,EAAEA,SAAU;IAAAO,QAAA,GAErB,IAAAjB,WAAA,CAAAkB,GAAA,EAACnB,iBAAA,CAAAoB,gBAAgB;MAACT,SAAS,EAAEA,SAAU;MAAAO,QAAA,EAAE,GAAGN,CAAC,CAC3C,8BACF,CAAC;IAAG,CAAmB,CAAC,EACxB,IAAAX,WAAA,CAAAa,IAAA,EAACjB,IAAA,CAAAwB,GAAG;MAAAH,QAAA,GACDV,OAAO,EACPC,WAAW,IAAI,IAAAR,WAAA,CAAAkB,GAAA,EAACrB,iBAAA,CAAAwB,gBAAgB;QAACC,aAAa,EAAEd;MAAY,CAAE,CAAC;IAAA,CAC7D,CAAC;EAAA,CACQ,CAAC;AAErB,CAAC;AAED,MAAMe,kBAAkB,GAAAC,OAAA,CAAAnB,UAAA,GAAG,IAAAoB,WAAI,EAACpB,UAAU,CAAC;AAC3CkB,kBAAkB,CAACG,WAAW,GAAG,YAAY","ignoreList":[]}

package/dist/cjs/FieldLabel.cjs

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.FieldLabel = void 0;
 var _InputLabel2 = _interopRequireDefault(require("@mui/material/InputLabel"));
 var _react = require("react");
-var _reactI18next = require("react-i18next");
+var _i18n = require("./i18n.generated/i18n.cjs");
 var _ScreenReaderText = require("./ScreenReaderText.cjs");
 var _Typography = require("./Typography.cjs");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -34,7 +34,7 @@ const FieldLabel = ({
 }) => {
   const {
     t
-  } = (0, _reactI18next.useTranslation)();
+  } = (0, _i18n.useTranslation)();
   const inputLabel = (0, _react.useMemo)(() => (0, _jsxRuntime.jsxs)(_InputLabel2.default, {
     "data-se": testId,
     htmlFor: inputId,

package/dist/cjs/FieldLabel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FieldLabel.cjs","names":["_react","require","_reactI18next","_ScreenReaderText","_Typography","_jsxRuntime","_interopRequireDefault","e","__esModule","default","FieldLabel","hasVisibleLabel","id","inputId","isOptional","testId","translate","text","t","useTranslation","inputLabel","useMemo","jsxs","_InputLabel2","htmlFor","children","jsx","Subordinate","ScreenReaderText","MemoizedFieldLabel","exports","memo","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,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AAIA,IAAAE,iBAAA,GAAAF,OAAA;AACA,IAAAG,WAAA,GAAAH,OAAA;AAA8C,IAAAI,WAAA,GAAAJ,OAAA;AAAA,SAAAK,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAnB9C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAmBA,MAAMG,UAAU,GAAGA,CAAC;EAClBC,eAAe;EACfC,EAAE;EACFC,OAAO;EACPC,UAAU;EACVC,MAAM;EACNC,SAAS;EACTC;AACe,CAAC,KAAK;EACrB,MAAM;IAAEC;EAAE,CAAC,GAAG,IAAAC,4BAAc,EAAC,CAAC;EAE9B,MAAMC,UAAU,GAAG,IAAAC,cAAO,EACxB,MACE,IAAAhB,WAAA,CAAAiB,IAAA,EAAAC,YAAA,CAAAd,OAAA;IACE,WAASM,MAAO;IAChBS,OAAO,EAAEX,OAAQ;IACjBD,EAAE,EAAEA,EAAG;IACPI,SAAS,EAAEA,SAAU;IAAAS,QAAA,GAErB,IAAApB,WAAA,CAAAqB,GAAA;MAAAD,QAAA,EAAOR;IAAI,CAAO,CAAC,EAClBH,UAAU,IACT,IAAAT,WAAA,CAAAqB,GAAA,EAACtB,WAAA,CAAAuB,WAAW;MAAAF,QAAA,EAAEP,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,GACpBS,UAAU,GAEV,IAAAf,WAAA,CAAAqB,GAAA,EAACvB,iBAAA,CAAAyB,gBAAgB;IAACZ,SAAS,EAAEA,SAAU;IAAAS,QAAA,EAAEL;EAAU,CAAmB,CACvE;AACH,CAAC;AAED,MAAMS,kBAAkB,GAAAC,OAAA,CAAApB,UAAA,GAAG,IAAAqB,WAAI,EAACrB,UAAU,CAAC;AAC3CmB,kBAAkB,CAACG,WAAW,GAAG,YAAY","ignoreList":[]}
+{"version":3,"file":"FieldLabel.cjs","names":["_react","require","_i18n","_ScreenReaderText","_Typography","_jsxRuntime","_interopRequireDefault","e","__esModule","default","FieldLabel","hasVisibleLabel","id","inputId","isOptional","testId","translate","text","t","useTranslation","inputLabel","useMemo","jsxs","_InputLabel2","htmlFor","children","jsx","Subordinate","ScreenReaderText","MemoizedFieldLabel","exports","memo","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,IAAAA,MAAA,GAAAC,OAAA;AAIA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,iBAAA,GAAAF,OAAA;AACA,IAAAG,WAAA,GAAAH,OAAA;AAA8C,IAAAI,WAAA,GAAAJ,OAAA;AAAA,SAAAK,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAnB9C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAmBA,MAAMG,UAAU,GAAGA,CAAC;EAClBC,eAAe;EACfC,EAAE;EACFC,OAAO;EACPC,UAAU;EACVC,MAAM;EACNC,SAAS;EACTC;AACe,CAAC,KAAK;EACrB,MAAM;IAAEC;EAAE,CAAC,GAAG,IAAAC,oBAAc,EAAC,CAAC;EAE9B,MAAMC,UAAU,GAAG,IAAAC,cAAO,EACxB,MACE,IAAAhB,WAAA,CAAAiB,IAAA,EAAAC,YAAA,CAAAd,OAAA;IACE,WAASM,MAAO;IAChBS,OAAO,EAAEX,OAAQ;IACjBD,EAAE,EAAEA,EAAG;IACPI,SAAS,EAAEA,SAAU;IAAAS,QAAA,GAErB,IAAApB,WAAA,CAAAqB,GAAA;MAAAD,QAAA,EAAOR;IAAI,CAAO,CAAC,EAClBH,UAAU,IACT,IAAAT,WAAA,CAAAqB,GAAA,EAACtB,WAAA,CAAAuB,WAAW;MAAAF,QAAA,EAAEP,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,GACpBS,UAAU,GAEV,IAAAf,WAAA,CAAAqB,GAAA,EAACvB,iBAAA,CAAAyB,gBAAgB;IAACZ,SAAS,EAAEA,SAAU;IAAAS,QAAA,EAAEL;EAAU,CAAmB,CACvE;AACH,CAAC;AAED,MAAMS,kBAAkB,GAAAC,OAAA,CAAApB,UAAA,GAAG,IAAAqB,WAAI,EAACrB,UAAU,CAAC;AAC3CmB,kBAAkB,CAACG,WAAW,GAAG,YAAY","ignoreList":[]}

package/dist/cjs/FileUploader/FileUploadPreview.cjs

@@ -7,7 +7,7 @@ exports.FileUploadPreview = void 0;
 var _IconButton2 = _interopRequireDefault(require("@mui/material/IconButton"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _react = require("react");
-var _reactI18next = require("react-i18next");
+var _i18n = require("../i18n.generated/i18n.cjs");
 var _index = require("../icons.generated/index.cjs");
 var _MuiPropsContext = require("../MuiPropsContext.cjs");
 var _OdysseyDesignTokensContext = require("../OdysseyDesignTokensContext.cjs");
@@ -67,7 +67,7 @@ const UploadedFile = ({
 }) => {
   const {
     t
-  } = (0, _reactI18next.useTranslation)();
+  } = (0, _i18n.useTranslation)();
   const odysseyDesignTokens = (0, _OdysseyDesignTokensContext.useOdysseyDesignTokens)();
   const deleteHandler = (0, _react.useCallback)(() => {
     onFileRemove?.(name);

package/dist/cjs/FileUploader/FileUploadPreview.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FileUploadPreview.cjs","names":["_styled","_interopRequireDefault","require","_react","_reactI18next","_index","_MuiPropsContext","_OdysseyDesignTokensContext","_Tooltip","_jsxRuntime","e","__esModule","default","PreviewContainer","styled","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","useTranslation","useOdysseyDesignTokens","deleteHandler","useCallback","renderDeleteButton","muiProps","jsx","_IconButton2","onClick","size","children","DeleteIcon","jsxs","tabIndex","Tooltip","ariaType","placement","text","MuiPropsContext","Consumer","FileUploadPreview","fileNames","map","index","MemoizedFileUploadPreview","exports","memo","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.cjs","names":["_styled","_interopRequireDefault","require","_react","_i18n","_index","_MuiPropsContext","_OdysseyDesignTokensContext","_Tooltip","_jsxRuntime","e","__esModule","default","PreviewContainer","styled","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","useTranslation","useOdysseyDesignTokens","deleteHandler","useCallback","renderDeleteButton","muiProps","jsx","_IconButton2","onClick","size","children","DeleteIcon","jsxs","tabIndex","Tooltip","ariaType","placement","text","MuiPropsContext","Consumer","FileUploadPreview","fileNames","map","index","MemoizedFileUploadPreview","exports","memo","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/cjs/FileUploader/FileUploader.cjs

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.fileUploadVariants = exports.fileUploadTypes = exports.FileUploader = exports.FileUpload = void 0;
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _react = require("react");
-var _reactI18next = require("react-i18next");
 var _index = require("../Buttons/index.cjs");
 var _Field = require("../Field.cjs");
+var _i18n = require("../i18n.generated/i18n.cjs");
 var _index2 = require("../icons.generated/index.cjs");
 var _OdysseyDesignTokensContext = require("../OdysseyDesignTokensContext.cjs");
 var _Typography = require("../Typography.cjs");
@@ -100,7 +100,7 @@ const FileUploader = ({
   const odysseyDesignTokens = (0, _OdysseyDesignTokensContext.useOdysseyDesignTokens)();
   const {
     t
-  } = (0, _reactI18next.useTranslation)();
+  } = (0, _i18n.useTranslation)();
   const inputRef = (0, _react.useRef)(null);
   const [filesToUpload, setFilesToUpload] = (0, _react.useState)([]);
   (0, _react.useEffect)(() => {

package/dist/cjs/FileUploader/FileUploader.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FileUploader.cjs","names":["_styled","_interopRequireDefault","require","_react","_reactI18next","_index","_Field","_index2","_OdysseyDesignTokensContext","_Typography","_FileUploadIllustration","_FileUploadPreview","_jsxRuntime","e","__esModule","default","fileUploadTypes","exports","fileUploadVariants","BaseInputWrapper","styled","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","useOdysseyDesignTokens","t","useTranslation","inputRef","useRef","filesToUpload","setFilesToUpload","useState","useEffect","updateFilesToUpload","useCallback","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","jsx","accept","disabled","multiple","ref","title","Fragment","children","jsxs","Button","onClick","startIcon","UploadIcon","Boolean","FileUploadIllustration","Support","Field","fieldType","hasVisibleLabel","renderFieldComponent","FileUploadPreview","fileNames","map","onFileRemove","MemoizedFileUploader","FileUpload","memo","displayName"],"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.cjs","names":["_styled","_interopRequireDefault","require","_react","_index","_Field","_i18n","_index2","_OdysseyDesignTokensContext","_Typography","_FileUploadIllustration","_FileUploadPreview","_jsxRuntime","e","__esModule","default","fileUploadTypes","exports","fileUploadVariants","BaseInputWrapper","styled","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","useOdysseyDesignTokens","t","useTranslation","inputRef","useRef","filesToUpload","setFilesToUpload","useState","useEffect","updateFilesToUpload","useCallback","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","jsx","accept","disabled","multiple","ref","title","Fragment","children","jsxs","Button","onClick","startIcon","UploadIcon","Boolean","FileUploadIllustration","Support","Field","fieldType","hasVisibleLabel","renderFieldComponent","FileUploadPreview","fileNames","map","onFileRemove","MemoizedFileUploader","FileUpload","memo","displayName"],"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/cjs/FullScreenOverlay.cjs

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FullScreenOverlay = void 0;
+var _react = require("react");
+var _FullScreenOverlayContext = require("./FullScreenOverlayContext.cjs");
+var _OdysseyProvider = require("./OdysseyProvider.cjs");
+var _jsxRuntime = require("react/jsx-runtime");
+/*!
+ * 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.
+ */
+
+const FullScreenOverlay = ({
+  children
+}) => {
+  const {
+    overlayEmotionRootElement,
+    overlayShadowRootElement
+  } = (0, _FullScreenOverlayContext.useFullScreenOverlayContext)();
+  return (0, _jsxRuntime.jsx)(_OdysseyProvider.OdysseyProvider, {
+    emotionRootElement: overlayEmotionRootElement,
+    hasScopedCssBaseline: false,
+    hasWrapperElement: false,
+    shadowRootElement: overlayShadowRootElement,
+    children: children
+  });
+};
+const MemoizedFullScreenOverlay = exports.FullScreenOverlay = (0, _react.memo)(FullScreenOverlay);
+MemoizedFullScreenOverlay.displayName = "FullScreenOverlay";
+//# sourceMappingURL=FullScreenOverlay.cjs.map

package/dist/cjs/FullScreenOverlay.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FullScreenOverlay.cjs","names":["_react","require","_FullScreenOverlayContext","_OdysseyProvider","_jsxRuntime","FullScreenOverlay","children","overlayEmotionRootElement","overlayShadowRootElement","useFullScreenOverlayContext","jsx","OdysseyProvider","emotionRootElement","hasScopedCssBaseline","hasWrapperElement","shadowRootElement","MemoizedFullScreenOverlay","exports","memo","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":";;;;;;AAYA,IAAAA,MAAA,GAAAC,OAAA;AAEA,IAAAC,yBAAA,GAAAD,OAAA;AAIA,IAAAE,gBAAA,GAAAF,OAAA;AAAuD,IAAAG,WAAA,GAAAH,OAAA;AAlBvD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAcA,MAAMI,iBAAiB,GAAGA,CAAC;EAAEC;AAAyC,CAAC,KAAK;EAC1E,MAAM;IAAEC,yBAAyB;IAAEC;EAAyB,CAAC,GAC3D,IAAAC,qDAA2B,EAAC,CAAC;EAE/B,OACE,IAAAL,WAAA,CAAAM,GAAA,EAACP,gBAAA,CAAAQ,eAAe;IACdC,kBAAkB,EAAEL,yBAA0B;IAC9CM,oBAAoB,EAAE,KAAM;IAC5BC,iBAAiB,EAAE,KAAM;IACzBC,iBAAiB,EAAEP,wBAAyB;IAAAF,QAAA,EAE3CA;EAAQ,CACM,CAAC;AAEtB,CAAC;AAED,MAAMU,yBAAyB,GAAAC,OAAA,CAAAZ,iBAAA,GAAG,IAAAa,WAAI,EAACb,iBAAiB,CAAC;AACzDW,yBAAyB,CAACG,WAAW,GAAG,mBAAmB","ignoreList":[]}