@okta/odyssey-react-mui 1.29.0 → 1.32.4

package/dist/esm/DatePickers/useOdysseyDateFields.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOdysseyDateFields.js","names":["useCallback","useEffect","useMemo","useRef","useState","DateTime","useTranslation","ArrowLeftIcon","ArrowRightIcon","CalendarIcon","ChevronDownIcon","ComponentControlledState","getControlState","useDateFieldsTranslations","CONTROLLED","isValidDateTime","dateTime","isValid","utcDateTimeFromIsoString","dateString","fromISO","toUTC","useOdysseyDateFields","defaultValue","isDateEnabled","isMonthEnabled","isYearEnabled","minDate","minDateProp","maxDate","maxDateProp","onInputChange","onInputChangeProp","timeZone","value","isOpen","setIsOpen","popperElement","setPopperElement","internalTimeZone","setInternalTimeZone","internalValueRef","validationDateRanges","setValidationDateRanges","undefined","startOf","i18n","language","invalidLocales","isInvalidLocale","includes","localeText","controlledStateRef","controlledValue","uncontrolledValue","defaultedLanguageCode","replaceAll","isValidTimeZone","local","setZone","formatDateTimeToUtcIsoDateString","toISO","shouldDisableDate","date","Date","toJSDate","shouldDisableMonth","shouldDisableYear","inputValues","current","valueAsUTCDateTime","defaultValueAsUTCDateTime","onTimeZoneChange","toggleCalendarVisibility","closeCalendar","formatDayOfWeek","toFormat","commonIcons"],"sources":["../../../src/DatePickers/useOdysseyDateFields.ts"],"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 {\n  FocusEventHandler,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { DateTime } from \"luxon\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { FieldComponentProps } from \"../FieldComponentProps.js\";\nimport {\n  ArrowLeftIcon,\n  ArrowRightIcon,\n  CalendarIcon,\n  ChevronDownIcon,\n} from \"../icons.generated/index.js\";\nimport { ComponentControlledState, getControlState } from \"../inputUtils.js\";\nimport { TimeZoneOption, TimeZonePickerProps } from \"./TimeZonePicker.js\";\nimport { useDateFieldsTranslations } from \"./useDateFieldsTranslations.js\";\n\nconst { CONTROLLED } = ComponentControlledState;\n\nconst isValidDateTime = (dateTime: DateTime) => dateTime.isValid;\n\nconst utcDateTimeFromIsoString = (dateString: string) =>\n  DateTime.fromISO(dateString).toUTC();\n\nexport type OdysseyDateFieldProps = {\n  /**\n   * default value when uncontrolled.\n   *\n   * NOTE: Must be a date string in ISO format\n   */\n  defaultValue?: string;\n  /**\n   * Disable specific date(s).\n   *\n   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.\n   */\n  isDateEnabled?: (date: Date) => boolean;\n  /**\n   * Disable specific month(s).\n   */\n  isMonthEnabled?: (date: Date) => boolean;\n  /**\n   * Disable specific year(s).\n   */\n  isYearEnabled?: (date: Date) => boolean;\n  /**\n   * The label for the `input` element.\n   */\n  label: string;\n  /**\n   * Minimum date allowed.\n   *\n   * NOTE: If not a valid date string in ISO format, `minDate` will not apply\n   */\n  minDate?: string;\n  /**\n   * Maximum date allowed.\n   *\n   * NOTE: If not a valid date string in ISO format, `maxDate` will not apply\n   */\n  maxDate?: string;\n  /**\n   * Callback fired when the a date field loses focus\n   */\n  onBlur?: FocusEventHandler<HTMLInputElement>;\n  /**\n   * Callback fired when the a date is selected with the calendar.\n   */\n  onCalendarDateChange?: ({\n    value,\n    timeZone,\n  }: {\n    value: string | undefined;\n    timeZone: string;\n  }) => void;\n  /**\n   * Callback fired when the date/text input changes.\n   */\n  onInputChange?: (value: string) => void;\n  /**\n   * a default timezone for the picker\n   */\n  timeZone?: string;\n  /**\n   * If provided, a `TimeZonePicker` will be rendered below the DatePicker. These options will populate as the Autocomplete options\n   */\n  timeZoneOptions?: TimeZoneOption[];\n  /**\n   * label for `TimeZonePicker`\n   */\n  timeZonePickerLabel?: TimeZonePickerProps[\"label\"];\n  /**\n   * value when controlled.\n   *\n   * NOTE: Must be a date string in ISO format or it will not be applied\n   */\n  value?: string;\n};\n\ntype FormatDateTimeToUtcIsoDateString = (value: DateTime) => string | undefined;\n\ntype ValidationDateRanges = {\n  minDate?: DateTime;\n  maxDate?: DateTime;\n};\n\nexport const useOdysseyDateFields = ({\n  defaultValue,\n  isDateEnabled = () => true,\n  isMonthEnabled = () => true,\n  isYearEnabled = () => true,\n  minDate: minDateProp,\n  maxDate: maxDateProp,\n  onInputChange: onInputChangeProp,\n  timeZone = \"system\",\n  value,\n}: Pick<\n  OdysseyDateFieldProps,\n  | \"defaultValue\"\n  | \"isDateEnabled\"\n  | \"isMonthEnabled\"\n  | \"isYearEnabled\"\n  | \"minDate\"\n  | \"maxDate\"\n  | \"onInputChange\"\n  | \"timeZone\"\n  | \"value\"\n> &\n  Pick<FieldComponentProps, \"errorMessage\">) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [popperElement, setPopperElement] = useState<HTMLInputElement | null>();\n  const [internalTimeZone, setInternalTimeZone] = useState(timeZone);\n\n  const internalValueRef = useRef<DateTime | null>(null);\n\n  const [validationDateRanges, setValidationDateRanges] =\n    useState<ValidationDateRanges>({\n      minDate: undefined,\n      maxDate: undefined,\n    });\n\n  useEffect(() => {\n    const minDate = minDateProp ? DateTime.fromISO(minDateProp) : undefined;\n    const maxDate = maxDateProp ? DateTime.fromISO(maxDateProp) : undefined;\n\n    setValidationDateRanges({\n      minDate:\n        minDate && isValidDateTime(minDate)\n          ? minDate.startOf(\"day\")\n          : undefined,\n      maxDate:\n        maxDate && isValidDateTime(maxDate)\n          ? maxDate.startOf(\"day\")\n          : undefined,\n    });\n  }, [minDateProp, maxDateProp]);\n\n  const { i18n } = useTranslation();\n  const { language } = i18n;\n\n  const invalidLocales = [\"ok_PL\", \"ok_SK\"];\n  // In the Applitools env the language code is `en-us@posix`. Need to check for that\n  const isInvalidLocale =\n    invalidLocales.includes(language) || language.includes(\"@\");\n\n  const localeText = useDateFieldsTranslations();\n\n  const controlledStateRef = useRef(\n    getControlState({\n      controlledValue: value,\n      uncontrolledValue: defaultValue,\n    }),\n  );\n\n  const defaultedLanguageCode = isInvalidLocale\n    ? \"en-US\"\n    : language.replaceAll(\"_\", \"-\");\n\n  const isValidTimeZone = (timeZone: string) =>\n    DateTime.local().setZone(timeZone).isValid;\n\n  const formatDateTimeToUtcIsoDateString =\n    useCallback<FormatDateTimeToUtcIsoDateString>(\n      (value) => value.toUTC().toISO() || undefined,\n      [],\n    );\n\n  const shouldDisableDate = useCallback(\n    (date: DateTime) => !isDateEnabled(new Date(date?.toJSDate())) || false,\n    [isDateEnabled],\n  );\n\n  const shouldDisableMonth = useCallback(\n    (date: DateTime) => !isMonthEnabled(new Date(date?.toJSDate())) || false,\n    [isMonthEnabled],\n  );\n\n  const shouldDisableYear = useCallback(\n    (date: DateTime) => !isYearEnabled(new Date(date?.toJSDate())) || false,\n    [isYearEnabled],\n  );\n\n  const inputValues = useMemo(() => {\n    if (value && controlledStateRef.current === CONTROLLED) {\n      const valueAsUTCDateTime = utcDateTimeFromIsoString(value);\n\n      if (isValidDateTime(valueAsUTCDateTime)) {\n        return {\n          value: valueAsUTCDateTime,\n        };\n      }\n    }\n\n    if (defaultValue) {\n      const defaultValueAsUTCDateTime = utcDateTimeFromIsoString(defaultValue);\n\n      if (isValidDateTime(defaultValueAsUTCDateTime)) {\n        return {\n          defaultValue: defaultValueAsUTCDateTime,\n        };\n      }\n    }\n\n    return null;\n  }, [defaultValue, validationDateRanges, value]);\n\n  const onTimeZoneChange = useCallback(\n    (timeZone: string | undefined) => {\n      if (timeZone && isValidTimeZone(timeZone)) {\n        setInternalTimeZone(timeZone);\n      }\n    },\n    [isValidTimeZone, setInternalTimeZone],\n  );\n\n  const toggleCalendarVisibility = useCallback(\n    () => setIsOpen(!isOpen),\n    [isOpen, setIsOpen],\n  );\n\n  const closeCalendar = useCallback(() => {\n    setIsOpen(false);\n  }, [setIsOpen]);\n\n  const formatDayOfWeek = (date: DateTime) => date.toFormat(\"EEE\");\n\n  const onInputChange = useCallback<(value: string) => void>(\n    (value) => {\n      onInputChangeProp?.(value);\n    },\n    [onInputChangeProp],\n  );\n\n  const commonIcons = {\n    ArrowLeftIcon: ArrowLeftIcon,\n    ArrowRightIcon: ArrowRightIcon,\n    CalendarIcon: CalendarIcon,\n    ChevronDownIcon: ChevronDownIcon,\n  };\n\n  return {\n    closeCalendar,\n    commonIcons,\n    defaultedLanguageCode,\n    formatDateTimeToUtcIsoDateString,\n    formatDayOfWeek,\n    inputValues,\n    internalTimeZone,\n    internalValueRef,\n    isOpen,\n    isValidTimeZone,\n    localeText,\n    maxDate: validationDateRanges.maxDate,\n    minDate: validationDateRanges.minDate,\n    popperElement,\n    onInputChange,\n    onTimeZoneChange,\n    setInternalTimeZone,\n    setIsOpen,\n    setPopperElement,\n    shouldDisableDate,\n    shouldDisableMonth,\n    shouldDisableYear,\n    toggleCalendarVisibility,\n  };\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/Dialog.js

@@ -0,0 +1,93 @@
+import _Dialog from "@mui/material/Dialog";
+import _DialogActions from "@mui/material/DialogActions";
+import _DialogContent from "@mui/material/DialogContent";
+import _DialogTitle from "@mui/material/DialogTitle";
+import _DialogContentText from "@mui/material/DialogContentText";
+/*!
+ * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { useTranslation } from "react-i18next";
+import { Button } from "./Buttons/index.js";
+import { CloseIcon } from "./icons.generated/index.js";
+import { cloneElement, memo, useState, useEffect, useRef } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Dialog = ({
+  primaryCallToActionComponent,
+  secondaryCallToActionComponent,
+  tertiaryCallToActionComponent,
+  callToActionFirstComponent,
+  callToActionSecondComponent,
+  callToActionLastComponent,
+  children,
+  isOpen,
+  onClose,
+  testId,
+  title,
+  translate
+}) => {
+  const {
+    t
+  } = useTranslation();
+  const [isContentScrollable, setIsContentScrollable] = useState(false);
+  const dialogContentRef = useRef(null);
+  useEffect(() => {
+    let frameId;
+    const handleContentScroll = () => {
+      const dialogContentElement = dialogContentRef.current;
+      if (dialogContentElement) {
+        cancelAnimationFrame(frameId);
+        setIsContentScrollable(dialogContentElement.scrollHeight > dialogContentElement.clientHeight);
+      }
+      frameId = requestAnimationFrame(handleContentScroll);
+    };
+    if (isOpen) {
+      frameId = requestAnimationFrame(handleContentScroll);
+    }
+    return () => {
+      cancelAnimationFrame(frameId);
+    };
+  }, [isOpen]);
+  const content = typeof children === "string" ? _jsx(_DialogContentText, {
+    children: children
+  }) : children;
+  const actionButtons = [tertiaryCallToActionComponent || callToActionLastComponent, secondaryCallToActionComponent || callToActionSecondComponent, primaryCallToActionComponent || callToActionFirstComponent].filter(Boolean);
+  return _jsxs(_Dialog, {
+    "data-se": testId,
+    open: isOpen,
+    onClose: onClose,
+    children: [_jsxs(_DialogTitle, {
+      translate: translate,
+      children: [title, _jsx(Button, {
+        ariaLabel: t("close.text"),
+        onClick: onClose,
+        size: "small",
+        startIcon: _jsx(CloseIcon, {}),
+        variant: "floating"
+      })]
+    }), _jsx(_DialogContent, {
+      ...(isContentScrollable && {
+        tabIndex: 0
+      }),
+      dividers: isContentScrollable,
+      ref: dialogContentRef,
+      children: content
+    }), actionButtons.length > 0 && _jsx(_DialogActions, {
+      children: actionButtons.map((actionButton, index) => actionButton ? cloneElement(actionButton, {
+        key: index
+      }) : null)
+    })]
+  });
+};
+const MemoizedDialog = memo(Dialog);
+MemoizedDialog.displayName = "Dialog";
+export { MemoizedDialog as Dialog };
+//# sourceMappingURL=Dialog.js.map

package/dist/esm/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","names":["useTranslation","Button","CloseIcon","cloneElement","memo","useState","useEffect","useRef","jsx","_jsx","jsxs","_jsxs","Dialog","primaryCallToActionComponent","secondaryCallToActionComponent","tertiaryCallToActionComponent","callToActionFirstComponent","callToActionSecondComponent","callToActionLastComponent","children","isOpen","onClose","testId","title","translate","t","isContentScrollable","setIsContentScrollable","dialogContentRef","frameId","handleContentScroll","dialogContentElement","current","cancelAnimationFrame","scrollHeight","clientHeight","requestAnimationFrame","content","_DialogContentText","actionButtons","filter","Boolean","_Dialog","open","_DialogTitle","ariaLabel","onClick","size","startIcon","variant","_DialogContent","tabIndex","dividers","ref","length","_DialogActions","map","actionButton","index","key","MemoizedDialog","displayName"],"sources":["../../src/Dialog.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { useTranslation } from \"react-i18next\";\nimport {\n  Dialog as MuiDialog,\n  DialogTitle,\n  DialogContent,\n  DialogContentText,\n  DialogActions,\n} from \"@mui/material\";\nimport { Button } from \"./Buttons/index.js\";\nimport { CloseIcon } from \"./icons.generated/index.js\";\nimport {\n  cloneElement,\n  memo,\n  useState,\n  useEffect,\n  useRef,\n  ReactElement,\n  ReactNode,\n} from \"react\";\n\nimport type { HtmlProps } from \"./HtmlProps.js\";\n\nexport type DialogProps = {\n  /**\n   * @deprecated `aria-label` for close button comes from translation file\n   */\n  ariaLabel?: string;\n\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   * @deprecated Will be removed in a future Odyssey version. Use `primaryCallToActionComponent` instead.\n   */\n  callToActionFirstComponent?: ReactElement<typeof Button>;\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   * @deprecated Will be removed in a future Odyssey version. Use `secondaryCallToActionComponent` instead.\n   */\n  callToActionSecondComponent?: ReactElement<typeof Button>;\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   * @deprecated Will be removed in a future Odyssey version. Use `tertiaryCallToActionComponent` instead.\n   */\n  callToActionLastComponent?: 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  /**\n   * When set to `true`, the Dialog will be visible.\n   */\n  isOpen: boolean;\n\n  /**\n   * Callback that controls what happens when the Dialog is dismissed.\n   */\n  onClose: () => void;\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\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  return (\n    <MuiDialog data-se={testId} open={isOpen} onClose={onClose}>\n      <DialogTitle translate={translate}>\n        {title}\n        <Button\n          ariaLabel={t(\"close.text\")}\n          onClick={onClose}\n          size=\"small\"\n          startIcon={<CloseIcon />}\n          variant=\"floating\"\n        />\n      </DialogTitle>\n      <DialogContent\n        {...(isContentScrollable && {\n          // Sets tabIndex on content element if scrollable so content is easier to navigate with the keyboard\n          tabIndex: 0,\n        })}\n        dividers={isContentScrollable}\n        ref={dialogContentRef}\n      >\n        {content}\n      </DialogContent>\n\n      {actionButtons.length > 0 && (\n        <DialogActions>\n          {actionButtons.map((actionButton, index) =>\n            actionButton ? cloneElement(actionButton, { key: index }) : null,\n          )}\n        </DialogActions>\n      )}\n    </MuiDialog>\n  );\n};\n\nconst MemoizedDialog = memo(Dialog);\nMemoizedDialog.displayName = \"Dialog\";\n\nexport { MemoizedDialog as Dialog };\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/Drawer.js

@@ -0,0 +1,171 @@
+import _Drawer from "@mui/material/Drawer";
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { memo, useEffect, useMemo, useRef, useState } from "react";
+import styled from "@emotion/styled";
+import { useTranslation } from "react-i18next";
+import { Button } from "./Buttons/index.js";
+import { CloseIcon } from "./icons.generated/index.js";
+import { useOdysseyDesignTokens } from "./OdysseyDesignTokensContext.js";
+import { Heading5 } from "./Typography.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const variantValues = ["temporary", "persistent"];
+const DrawerHeader = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})`
+  position: sticky;
+  top: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0;
+  padding: ${({
+  odysseyDesignTokens
+}) => odysseyDesignTokens.Spacing4}
+    ${({
+  odysseyDesignTokens
+}) => odysseyDesignTokens.Spacing5};
+  color: ${({
+  odysseyDesignTokens
+}) => odysseyDesignTokens.HueNeutral900};
+  background-color: ${({
+  odysseyDesignTokens
+}) => odysseyDesignTokens.HueNeutralWhite};
+  border-bottom: ${({
+  showDividers,
+  odysseyDesignTokens
+}) => showDividers ? `1px solid ${odysseyDesignTokens.HueNeutral200}` : "none"};
+`;
+const DrawerContentWrapper = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})`
+  overflow-y: auto;
+`;
+const DrawerContent = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})`
+  padding: ${({
+  showDividers,
+  odysseyDesignTokens
+}) => showDividers ? `${odysseyDesignTokens.Spacing5}` : `0 ${odysseyDesignTokens.Spacing5}`};
+`;
+const DrawerFooter = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})`
+  position: sticky;
+  bottom: 0;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  align-content: center;
+  padding: ${({
+  odysseyDesignTokens
+}) => odysseyDesignTokens.Spacing4};
+  border-top: ${({
+  showDividers,
+  odysseyDesignTokens
+}) => showDividers ? `1px solid ${odysseyDesignTokens.HueNeutral200}` : "none"};
+  background-color: ${({
+  odysseyDesignTokens
+}) => odysseyDesignTokens.HueNeutralWhite};
+`;
+const Drawer = ({
+  ariaLabel,
+  children,
+  isOpen,
+  onClose,
+  primaryCallToActionComponent,
+  secondaryCallToActionComponent,
+  showDividers = false,
+  tertiaryCallToActionComponent,
+  testId,
+  title,
+  translate,
+  variant = "temporary"
+}) => {
+  const [isContentScrollable, setIsContentScrollable] = useState(false);
+  const drawerContentRef = useRef(null);
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const {
+    i18n
+  } = useTranslation();
+  const anchorDirection = i18n.dir() === "rtl" ? "left" : "right";
+  useEffect(() => {
+    let frameId;
+    const handleContentScroll = () => {
+      const drawerContentElement = drawerContentRef.current;
+      if (drawerContentElement) {
+        cancelAnimationFrame(frameId);
+        setIsContentScrollable(drawerContentElement.scrollHeight > drawerContentElement.clientHeight);
+      }
+      frameId = requestAnimationFrame(handleContentScroll);
+    };
+    if (isOpen) {
+      frameId = requestAnimationFrame(handleContentScroll);
+    }
+    return () => {
+      cancelAnimationFrame(frameId);
+    };
+  }, [isOpen]);
+  const dividersVisible = useMemo(() => {
+    return showDividers || isContentScrollable;
+  }, [showDividers, isContentScrollable]);
+  const hasFooter = useMemo(() => primaryCallToActionComponent || secondaryCallToActionComponent || tertiaryCallToActionComponent, [primaryCallToActionComponent, secondaryCallToActionComponent, tertiaryCallToActionComponent]);
+  return _jsxs(_Drawer, {
+    "data-se": testId,
+    anchor: anchorDirection,
+    open: isOpen,
+    onClose: onClose,
+    variant: variant,
+    sx: {
+      ...(variant === "persistent" && {
+        "& .MuiDrawer-paper": {
+          transition: "none"
+        }
+      })
+    },
+    children: [_jsxs(DrawerContentWrapper, {
+      ...(isContentScrollable && {
+        tabIndex: 0
+      }),
+      odysseyDesignTokens: odysseyDesignTokens,
+      ref: drawerContentRef,
+      children: [_jsxs(DrawerHeader, {
+        translate: translate,
+        odysseyDesignTokens: odysseyDesignTokens,
+        showDividers: dividersVisible,
+        children: [_jsx(Heading5, {
+          children: title
+        }), _jsx(Button, {
+          ariaLabel: ariaLabel,
+          onClick: onClose,
+          size: "small",
+          startIcon: _jsx(CloseIcon, {}),
+          variant: "floating"
+        })]
+      }), _jsx(DrawerContent, {
+        showDividers: dividersVisible,
+        odysseyDesignTokens: odysseyDesignTokens,
+        children: children
+      })]
+    }), hasFooter && _jsxs(DrawerFooter, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      showDividers: dividersVisible,
+      children: [tertiaryCallToActionComponent, secondaryCallToActionComponent, primaryCallToActionComponent]
+    })]
+  });
+};
+const MemoizedDrawer = memo(Drawer);
+MemoizedDrawer.displayName = "Drawer";
+export { MemoizedDrawer as Drawer };
+//# sourceMappingURL=Drawer.js.map

package/dist/esm/Drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.js","names":["memo","useEffect","useMemo","useRef","useState","styled","useTranslation","Button","CloseIcon","useOdysseyDesignTokens","Heading5","jsx","_jsx","jsxs","_jsxs","variantValues","DrawerHeader","shouldForwardProp","prop","odysseyDesignTokens","Spacing4","Spacing5","HueNeutral900","HueNeutralWhite","showDividers","HueNeutral200","DrawerContentWrapper","DrawerContent","DrawerFooter","Drawer","ariaLabel","children","isOpen","onClose","primaryCallToActionComponent","secondaryCallToActionComponent","tertiaryCallToActionComponent","testId","title","translate","variant","isContentScrollable","setIsContentScrollable","drawerContentRef","i18n","anchorDirection","dir","frameId","handleContentScroll","drawerContentElement","current","cancelAnimationFrame","scrollHeight","clientHeight","requestAnimationFrame","dividersVisible","hasFooter","_Drawer","anchor","open","sx","transition","tabIndex","ref","onClick","size","startIcon","MemoizedDrawer","displayName"],"sources":["../../src/Drawer.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n  memo,\n  ReactElement,\n  ReactNode,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { Drawer as MuiDrawer } from \"@mui/material\";\nimport styled from \"@emotion/styled\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { Button } 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\";\nimport type { HtmlProps } from \"./HtmlProps.js\";\n\nexport const variantValues = [\"temporary\", \"persistent\"] as const;\n\nexport type DrawerProps = {\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 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: () => void;\n  /**\n   * Shows divider lines separating header, content, and footer (if using action buttons)\n   */\n  showDividers: boolean;\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\ninterface DrawerStyleProps {\n  odysseyDesignTokens: DesignTokens;\n  showDividers: boolean;\n}\nconst DrawerHeader = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\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: ${({ showDividers, odysseyDesignTokens }) =>\n    showDividers ? `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) => prop !== \"odysseyDesignTokens\",\n})<DrawerStyleProps>`\n  padding: ${({ showDividers, odysseyDesignTokens }) =>\n    showDividers\n      ? `${odysseyDesignTokens.Spacing5}`\n      : `0 ${odysseyDesignTokens.Spacing5}`};\n`;\n\nconst DrawerFooter = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\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: ${({ showDividers, odysseyDesignTokens }) =>\n    showDividers ? `1px solid ${odysseyDesignTokens.HueNeutral200}` : \"none\"};\n  background-color: ${({ odysseyDesignTokens }) =>\n    odysseyDesignTokens.HueNeutralWhite};\n`;\n\nconst Drawer = ({\n  ariaLabel,\n  children,\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  //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 showDividers || isContentScrollable;\n  }, [showDividers, isContentScrollable]);\n\n  const hasFooter = useMemo(\n    () =>\n      primaryCallToActionComponent ||\n      secondaryCallToActionComponent ||\n      tertiaryCallToActionComponent,\n    [\n      primaryCallToActionComponent,\n      secondaryCallToActionComponent,\n      tertiaryCallToActionComponent,\n    ],\n  );\n\n  return (\n    <MuiDrawer\n      data-se={testId}\n      anchor={anchorDirection}\n      open={isOpen}\n      onClose={onClose}\n      variant={variant}\n      sx={{\n        //Overrides defualt MUI inline style\n        ...(variant === \"persistent\" && {\n          \"& .MuiDrawer-paper\": {\n            transition: \"none\",\n          },\n        }),\n      }}\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          translate={translate}\n          odysseyDesignTokens={odysseyDesignTokens}\n          showDividers={dividersVisible}\n        >\n          <Heading5>{title}</Heading5>\n          <Button\n            ariaLabel={ariaLabel}\n            onClick={onClose}\n            size=\"small\"\n            startIcon={<CloseIcon />}\n            variant=\"floating\"\n          />\n        </DrawerHeader>\n        <DrawerContent\n          showDividers={dividersVisible}\n          odysseyDesignTokens={odysseyDesignTokens}\n        >\n          {children}\n        </DrawerContent>\n      </DrawerContentWrapper>\n      {hasFooter && (\n        <DrawerFooter\n          odysseyDesignTokens={odysseyDesignTokens}\n          showDividers={dividersVisible}\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":[]}

package/dist/esm/EmptyState.js

@@ -0,0 +1,57 @@
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { memo } from "react";
+import { Heading4, Paragraph } from "./Typography.js";
+import { Box } from "./Box.js";
+import styled from "@emotion/styled";
+import { useOdysseyDesignTokens } from "./OdysseyDesignTokensContext.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const EmptyContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  display: "flex",
+  flexDirection: "column",
+  marginBlock: odysseyDesignTokens.Spacing9,
+  padding: odysseyDesignTokens.Spacing5,
+  textAlign: "center",
+  width: "100%",
+  alignItems: "center"
+}));
+const EmptyState = ({
+  heading,
+  description,
+  PrimaryCallToActionComponent,
+  SecondaryCallToActionComponent
+}) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  return _jsxs(EmptyContainer, {
+    odysseyDesignTokens: odysseyDesignTokens,
+    children: [_jsx(Heading4, {
+      children: heading
+    }), _jsx(Paragraph, {
+      children: description
+    }), (PrimaryCallToActionComponent || SecondaryCallToActionComponent) && _jsxs(Box, {
+      sx: {
+        marginBlockStart: 5
+      },
+      children: [SecondaryCallToActionComponent, PrimaryCallToActionComponent]
+    })]
+  });
+};
+const MemoizedEmptyState = memo(EmptyState);
+MemoizedEmptyState.displayName = "EmptyState";
+export { MemoizedEmptyState as EmptyState };
+export { MemoizedEmptyState as DataTableEmptyState };
+//# sourceMappingURL=EmptyState.js.map

package/dist/esm/EmptyState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.js","names":["memo","Heading4","Paragraph","Box","styled","useOdysseyDesignTokens","jsx","_jsx","jsxs","_jsxs","EmptyContainer","shouldForwardProp","prop","odysseyDesignTokens","display","flexDirection","marginBlock","Spacing9","padding","Spacing5","textAlign","width","alignItems","EmptyState","heading","description","PrimaryCallToActionComponent","SecondaryCallToActionComponent","children","sx","marginBlockStart","MemoizedEmptyState","displayName","DataTableEmptyState"],"sources":["../../src/EmptyState.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 { ReactNode, memo } from \"react\";\nimport { Heading4, Paragraph } from \"./Typography.js\";\nimport { Box } from \"./Box.js\";\nimport styled from \"@emotion/styled\";\nimport {\n  useOdysseyDesignTokens,\n  DesignTokens,\n} from \"./OdysseyDesignTokensContext.js\";\n\nconst EmptyContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n  display: \"flex\",\n  flexDirection: \"column\",\n  marginBlock: odysseyDesignTokens.Spacing9,\n  padding: odysseyDesignTokens.Spacing5,\n  textAlign: \"center\",\n  width: \"100%\",\n  alignItems: \"center\",\n}));\n\nexport type EmptyStateProps = {\n  /**\n   * Main heading of the empty state\n   */\n  heading: string;\n  /**\n   * A descriptive text explaining more context as to why we don't have data.\n   */\n  description: string;\n  /**\n   * Primary call to action\n   */\n  PrimaryCallToActionComponent?: ReactNode;\n  /**\n   * Secondary call to action\n   */\n  SecondaryCallToActionComponent?: ReactNode;\n};\n\nconst EmptyState = ({\n  heading,\n  description,\n  PrimaryCallToActionComponent,\n  SecondaryCallToActionComponent,\n}: EmptyStateProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  return (\n    <EmptyContainer odysseyDesignTokens={odysseyDesignTokens}>\n      <Heading4>{heading}</Heading4>\n      <Paragraph>{description}</Paragraph>\n      {(PrimaryCallToActionComponent || SecondaryCallToActionComponent) && (\n        <Box sx={{ marginBlockStart: 5 }}>\n          {SecondaryCallToActionComponent}\n          {PrimaryCallToActionComponent}\n        </Box>\n      )}\n    </EmptyContainer>\n  );\n};\n\nconst MemoizedEmptyState = memo(EmptyState);\nMemoizedEmptyState.displayName = \"EmptyState\";\n\nexport { MemoizedEmptyState as EmptyState };\nexport { MemoizedEmptyState as DataTableEmptyState };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAAoBA,IAAI,QAAQ,OAAO;AACvC,SAASC,QAAQ,EAAEC,SAAS,QAAQ,iBAAiB;AACrD,SAASC,GAAG,QAAQ,UAAU;AAC9B,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SACEC,sBAAsB,QAEjB,iCAAiC;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEzC,MAAMC,cAAc,GAAGN,MAAM,CAAC,KAAK,EAAE;EACnCO,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAAwC,CAAC;EAAEC;AAAoB,CAAC,MAAM;EACtEC,OAAO,EAAE,MAAM;EACfC,aAAa,EAAE,QAAQ;EACvBC,WAAW,EAAEH,mBAAmB,CAACI,QAAQ;EACzCC,OAAO,EAAEL,mBAAmB,CAACM,QAAQ;EACrCC,SAAS,EAAE,QAAQ;EACnBC,KAAK,EAAE,MAAM;EACbC,UAAU,EAAE;AACd,CAAC,CAAC,CAAC;AAqBH,MAAMC,UAAU,GAAGA,CAAC;EAClBC,OAAO;EACPC,WAAW;EACXC,4BAA4B;EAC5BC;AACe,CAAC,KAAK;EACrB,MAAMd,mBAAmB,GAAGR,sBAAsB,CAAC,CAAC;EAEpD,OACEI,KAAA,CAACC,cAAc;IAACG,mBAAmB,EAAEA,mBAAoB;IAAAe,QAAA,GACvDrB,IAAA,CAACN,QAAQ;MAAA2B,QAAA,EAAEJ;IAAO,CAAW,CAAC,EAC9BjB,IAAA,CAACL,SAAS;MAAA0B,QAAA,EAAEH;IAAW,CAAY,CAAC,EACnC,CAACC,4BAA4B,IAAIC,8BAA8B,KAC9DlB,KAAA,CAACN,GAAG;MAAC0B,EAAE,EAAE;QAAEC,gBAAgB,EAAE;MAAE,CAAE;MAAAF,QAAA,GAC9BD,8BAA8B,EAC9BD,4BAA4B;IAAA,CAC1B,CACN;EAAA,CACa,CAAC;AAErB,CAAC;AAED,MAAMK,kBAAkB,GAAG/B,IAAI,CAACuB,UAAU,CAAC;AAC3CQ,kBAAkB,CAACC,WAAW,GAAG,YAAY;AAE7C,SAASD,kBAAkB,IAAIR,UAAU;AACzC,SAASQ,kBAAkB,IAAIE,mBAAmB","ignoreList":[]}

package/dist/esm/ErrorMessageList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorMessageList.js","names":["useOdysseyDesignTokens","memo","useMemo","jsx","_jsx","listItemStyles","display","paddingInlineStart","ErrorMessageList","errorMessages","odysseyDesignTokens","listStyles","listStyle","Spacing4","_List","disablePadding","dense","sx","children","map","errorMessage","_ListItem","MemoizedErrorMessageList","displayName"],"sources":["../../src/ErrorMessageList.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 { List as MuiList, ListItem as MuiListItem } from \"@mui/material\";\nimport { useOdysseyDesignTokens } from \"./OdysseyDesignTokensContext.js\";\nimport { memo, useMemo } from \"react\";\n\nexport type ErrorMessageListProps = {\n  errorMessages: string[];\n};\n\nconst listItemStyles = {\n  display: \"list-item\",\n  paddingInlineStart: 0,\n};\n\nconst ErrorMessageList = ({ errorMessages }: ErrorMessageListProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const listStyles = useMemo(\n    () => ({\n      listStyle: \"disc\",\n      paddingInlineStart: odysseyDesignTokens.Spacing4,\n    }),\n    [odysseyDesignTokens],\n  );\n\n  return (\n    <MuiList disablePadding dense sx={listStyles}>\n      {errorMessages.map((errorMessage) => (\n        <MuiListItem\n          key={errorMessage}\n          disablePadding\n          dense\n          sx={listItemStyles}\n        >\n          {errorMessage}\n        </MuiListItem>\n      ))}\n    </MuiList>\n  );\n};\n\nconst MemoizedErrorMessageList = memo(ErrorMessageList);\nMemoizedErrorMessageList.displayName = \"ErrorMessageList\";\n\nexport { MemoizedErrorMessageList as ErrorMessageList };\n"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,SAASA,sBAAsB,QAAQ,iCAAiC;AACxE,SAASC,IAAI,EAAEC,OAAO,QAAQ,OAAO;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAMtC,MAAMC,cAAc,GAAG;EACrBC,OAAO,EAAE,WAAW;EACpBC,kBAAkB,EAAE;AACtB,CAAC;AAED,MAAMC,gBAAgB,GAAGA,CAAC;EAAEC;AAAqC,CAAC,KAAK;EACrE,MAAMC,mBAAmB,GAAGV,sBAAsB,CAAC,CAAC;EAEpD,MAAMW,UAAU,GAAGT,OAAO,CACxB,OAAO;IACLU,SAAS,EAAE,MAAM;IACjBL,kBAAkB,EAAEG,mBAAmB,CAACG;EAC1C,CAAC,CAAC,EACF,CAACH,mBAAmB,CACtB,CAAC;EAED,OACEN,IAAA,CAAAU,KAAA;IAASC,cAAc;IAACC,KAAK;IAACC,EAAE,EAAEN,UAAW;IAAAO,QAAA,EAC1CT,aAAa,CAACU,GAAG,CAAEC,YAAY,IAC9BhB,IAAA,CAAAiB,SAAA;MAEEN,cAAc;MACdC,KAAK;MACLC,EAAE,EAAEZ,cAAe;MAAAa,QAAA,EAElBE;IAAY,GALRA,YAMM,CACd;EAAC,CACK,CAAC;AAEd,CAAC;AAED,MAAME,wBAAwB,GAAGrB,IAAI,CAACO,gBAAgB,CAAC;AACvDc,wBAAwB,CAACC,WAAW,GAAG,kBAAkB;AAEzD,SAASD,wBAAwB,IAAId,gBAAgB","ignoreList":[]}

package/dist/esm/Field.js

@@ -0,0 +1,94 @@
+import _FormControl from "@mui/material/FormControl";
+import _FormLabel from "@mui/material/FormLabel";
+/*!
+ * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { memo, useMemo } from "react";
+import { FieldError } from "./FieldError.js";
+import { FieldHint } from "./FieldHint.js";
+import { FieldLabel } from "./FieldLabel.js";
+import { Typography } from "./Typography.js";
+import { useFieldset } from "./FieldsetContext.js";
+import { useTranslation } from "react-i18next";
+import { useUniqueId } from "./useUniqueId.js";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+export const fieldTypeValues = ["single", "group"];
+const Field = ({
+  ariaDescribedBy,
+  errorMessage,
+  errorMessageList,
+  fieldType,
+  hasVisibleLabel,
+  hint,
+  HintLinkComponent,
+  id: idOverride,
+  isDisabled: isDisabledProp = false,
+  isFullWidth = false,
+  isRadioGroup = false,
+  isOptional = false,
+  isReadOnly = false,
+  label,
+  renderFieldComponent
+}) => {
+  const {
+    t
+  } = useTranslation();
+  const id = useUniqueId(idOverride);
+  const hintId = hint ? `${id}-hint` : undefined;
+  const errorMessageElementId = errorMessage || errorMessageList ? `${id}-error` : undefined;
+  const labelElementId = `${id}-label`;
+  const localAriaDescribedBy = useMemo(() => [hintId, errorMessageElementId, ariaDescribedBy].join(" ").trim() || undefined, [ariaDescribedBy, errorMessageElementId, hintId]);
+  const {
+    isDisabled: isFieldsetDisabled
+  } = useFieldset();
+  const isDisabled = useMemo(() => isDisabledProp || isFieldsetDisabled, [isDisabledProp, isFieldsetDisabled]);
+  return _jsxs(_FormControl, {
+    component: fieldType === "group" ? "fieldset" : "div",
+    disabled: isDisabled,
+    error: Boolean(errorMessage) || Array.isArray(errorMessageList) && errorMessageList.length > 0,
+    role: isRadioGroup ? "radiogroup" : undefined,
+    fullWidth: isFullWidth,
+    children: [fieldType === "group" ? _jsxs(_FormLabel, {
+      component: "legend",
+      id: labelElementId,
+      children: [label, " ", isOptional && label && _jsxs(Typography, {
+        component: "span",
+        color: "textSecondary",
+        children: ["(", t("fieldlabel.optional.text"), ")"]
+      })]
+    }) : _jsx(FieldLabel, {
+      hasVisibleLabel: hasVisibleLabel,
+      id: labelElementId,
+      inputId: id,
+      isOptional: isOptional,
+      text: label
+    }), hint && _jsx(FieldHint, {
+      id: hintId,
+      LinkComponent: HintLinkComponent,
+      text: hint
+    }), renderFieldComponent({
+      ariaDescribedBy: localAriaDescribedBy,
+      errorMessageElementId,
+      id,
+      labelElementId,
+      isReadOnly
+    }), (errorMessage || errorMessageList) && _jsx(FieldError, {
+      id: errorMessageElementId,
+      message: errorMessage,
+      messageList: errorMessageList
+    })]
+  });
+};
+const MemoizedField = memo(Field);
+MemoizedField.displayName = "Field";
+export { MemoizedField as Field };
+//# sourceMappingURL=Field.js.map

package/dist/esm/Field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.js","names":["memo","useMemo","FieldError","FieldHint","FieldLabel","Typography","useFieldset","useTranslation","useUniqueId","jsxs","_jsxs","jsx","_jsx","fieldTypeValues","Field","ariaDescribedBy","errorMessage","errorMessageList","fieldType","hasVisibleLabel","hint","HintLinkComponent","id","idOverride","isDisabled","isDisabledProp","isFullWidth","isRadioGroup","isOptional","isReadOnly","label","renderFieldComponent","t","hintId","undefined","errorMessageElementId","labelElementId","localAriaDescribedBy","join","trim","isFieldsetDisabled","_FormControl","component","disabled","error","Boolean","Array","isArray","length","role","fullWidth","children","_FormLabel","color","inputId","text","LinkComponent","message","messageList","MemoizedField","displayName"],"sources":["../../src/Field.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { memo, ReactElement, useMemo } from \"react\";\nimport {\n  FormControl as MuiFormControl,\n  FormLabel as MuiFormLabel,\n} from \"@mui/material\";\nimport { FieldComponentProps } from \"./FieldComponentProps.js\";\nimport { FieldError } from \"./FieldError.js\";\nimport { FieldHint } from \"./FieldHint.js\";\nimport { FieldLabel } from \"./FieldLabel.js\";\nimport { HtmlProps } from \"./HtmlProps.js\";\nimport { Typography } from \"./Typography.js\";\nimport { useFieldset } from \"./FieldsetContext.js\";\nimport { useTranslation } from \"react-i18next\";\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  labelElementId: string;\n  isReadOnly?: boolean;\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 narrowing down the `fieldset` role to \"radiogroup\".\n   */\n  isRadioGroup?: boolean;\n  /**\n   * Important for determining if children inherit error state\n   */\n  isCheckboxGroup?: 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      role={isRadioGroup ? \"radiogroup\" : undefined}\n      fullWidth={isFullWidth}\n    >\n      {fieldType === \"group\" ? (\n        <MuiFormLabel component=\"legend\" id={labelElementId}>\n          {label}{\" \"}\n          {isOptional && label && (\n            <Typography component=\"span\" color=\"textSecondary\">\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":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,EAAgBC,OAAO,QAAQ,OAAO;AAMnD,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,SAAS,QAAQ,gBAAgB;AAC1C,SAASC,UAAU,QAAQ,iBAAiB;AAE5C,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,WAAW,QAAQ,sBAAsB;AAClD,SAASC,cAAc,QAAQ,eAAe;AAC9C,SAASC,WAAW,QAAQ,kBAAkB;AAAC,SAAAC,IAAA,IAAAC,KAAA,EAAAC,GAAA,IAAAC,IAAA;AAE/C,OAAO,MAAMC,eAAe,GAAG,CAAC,QAAQ,EAAE,OAAO,CAAU;AAqD3D,MAAMC,KAAK,GAAGA,CAAC;EACbC,eAAe;EACfC,YAAY;EACZC,gBAAgB;EAChBC,SAAS;EACTC,eAAe;EACfC,IAAI;EACJC,iBAAiB;EACjBC,EAAE,EAAEC,UAAU;EACdC,UAAU,EAAEC,cAAc,GAAG,KAAK;EAClCC,WAAW,GAAG,KAAK;EACnBC,YAAY,GAAG,KAAK;EACpBC,UAAU,GAAG,KAAK;EAClBC,UAAU,GAAG,KAAK;EAClBC,KAAK;EACLC;AAciC,CAAC,KAAK;EACvC,MAAM;IAAEC;EAAE,CAAC,GAAGzB,cAAc,CAAC,CAAC;EAE9B,MAAMe,EAAE,GAAGd,WAAW,CAACe,UAAU,CAAC;EAClC,MAAMU,MAAM,GAAGb,IAAI,GAAG,GAAGE,EAAE,OAAO,GAAGY,SAAS;EAC9C,MAAMC,qBAAqB,GACzBnB,YAAY,IAAIC,gBAAgB,GAAG,GAAGK,EAAE,QAAQ,GAAGY,SAAS;EAC9D,MAAME,cAAc,GAAG,GAAGd,EAAE,QAAQ;EAEpC,MAAMe,oBAAoB,GAAGpC,OAAO,CAClC,MACE,CAACgC,MAAM,EAAEE,qBAAqB,EAAEpB,eAAe,CAAC,CAACuB,IAAI,CAAC,GAAG,CAAC,CAACC,IAAI,CAAC,CAAC,IACjEL,SAAS,EACX,CAACnB,eAAe,EAAEoB,qBAAqB,EAAEF,MAAM,CACjD,CAAC;EAED,MAAM;IAAET,UAAU,EAAEgB;EAAmB,CAAC,GAAGlC,WAAW,CAAC,CAAC;EAExD,MAAMkB,UAAU,GAAGvB,OAAO,CACxB,MAAMwB,cAAc,IAAIe,kBAAkB,EAC1C,CAACf,cAAc,EAAEe,kBAAkB,CACrC,CAAC;EAED,OACE9B,KAAA,CAAA+B,YAAA;IACEC,SAAS,EAAExB,SAAS,KAAK,OAAO,GAAG,UAAU,GAAG,KAAM;IACtDyB,QAAQ,EAAEnB,UAAW;IACrBoB,KAAK,EACHC,OAAO,CAAC7B,YAAY,CAAC,IACpB8B,KAAK,CAACC,OAAO,CAAC9B,gBAAgB,CAAC,IAAIA,gBAAgB,CAAC+B,MAAM,GAAG,CAC/D;IACDC,IAAI,EAAEtB,YAAY,GAAG,YAAY,GAAGO,SAAU;IAC9CgB,SAAS,EAAExB,WAAY;IAAAyB,QAAA,GAEtBjC,SAAS,KAAK,OAAO,GACpBR,KAAA,CAAA0C,UAAA;MAAcV,SAAS,EAAC,QAAQ;MAACpB,EAAE,EAAEc,cAAe;MAAAe,QAAA,GACjDrB,KAAK,EAAE,GAAG,EACVF,UAAU,IAAIE,KAAK,IAClBpB,KAAA,CAACL,UAAU;QAACqC,SAAS,EAAC,MAAM;QAACW,KAAK,EAAC,eAAe;QAAAF,QAAA,GAAC,GAChD,EAACnB,CAAC,CAAC,0BAA0B,CAAC,EAAC,GAClC;MAAA,CAAY,CACb;IAAA,CACW,CAAC,GAEfpB,IAAA,CAACR,UAAU;MACTe,eAAe,EAAEA,eAAgB;MACjCG,EAAE,EAAEc,cAAe;MACnBkB,OAAO,EAAEhC,EAAG;MACZM,UAAU,EAAEA,UAAW;MACvB2B,IAAI,EAAEzB;IAAM,CACb,CACF,EAEAV,IAAI,IACHR,IAAA,CAACT,SAAS;MAACmB,EAAE,EAAEW,MAAO;MAACuB,aAAa,EAAEnC,iBAAkB;MAACkC,IAAI,EAAEnC;IAAK,CAAE,CACvE,EAEAW,oBAAoB,CAAC;MACpBhB,eAAe,EAAEsB,oBAAoB;MACrCF,qBAAqB;MACrBb,EAAE;MACFc,cAAc;MACdP;IACF,CAAC,CAAC,EAED,CAACb,YAAY,IAAIC,gBAAgB,KAChCL,IAAA,CAACV,UAAU;MACToB,EAAE,EAAEa,qBAAsB;MAC1BsB,OAAO,EAAEzC,YAAa;MACtB0C,WAAW,EAAEzC;IAAiB,CAC/B,CACF;EAAA,CACa,CAAC;AAErB,CAAC;AAED,MAAM0C,aAAa,GAAG3D,IAAI,CAACc,KAAK,CAAC;AACjC6C,aAAa,CAACC,WAAW,GAAG,OAAO;AAEnC,SAASD,aAAa,IAAI7C,KAAK","ignoreList":[]}

package/dist/esm/FieldComponentProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldComponentProps.js","names":[],"sources":["../../src/FieldComponentProps.ts"],"sourcesContent":["/*!\n * Copyright (c) 2021-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 { ReactElement } from \"react\";\n\nimport { HintLink } from \"./HintLink.js\";\n\nexport type FieldComponentProps = {\n  /**\n   * If `error` is not undefined, the `input` will indicate an error.\n   */\n  errorMessage?: string;\n  /**\n   * If `error` is not undefined, the `input` will indicate multiple errors.\n   */\n  errorMessageList?: string[];\n  /**\n   * The helper text content.\n   */\n  hint?: string;\n  /**\n   * A `Link` component to provide greater context that is rendered at the end of the `hint` text\n   */\n  HintLinkComponent?: ReactElement<typeof HintLink>;\n  /**\n   * The id of the `input` element.\n   */\n  id?: string;\n  /**\n   * If `true`, the component is disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * If `true`, the component can stretch to fill the width of the container.\n   */\n  isFullWidth?: boolean;\n  /**\n   * If `true`, the `input` element is not required.\n   */\n  isOptional?: boolean;\n  /**\n   * It prevents the user from changing the value of the field\n   */\n  isReadOnly?: boolean;\n  /**\n   * The name of the `input` element. Defaults to the `id` if not set.\n   */\n  name?: string;\n};\n\nexport type FieldComponentRenderProps = {\n  ariaDescribedBy: string;\n  dataSe: string;\n  errorMessageElementId: string;\n  id: string;\n  labelElementId: string;\n};\n"],"mappings":"","ignoreList":[]}

package/dist/esm/FieldError.js

@@ -0,0 +1,49 @@
+import _FormHelperText from "@mui/material/FormHelperText";
+/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { memo } from "react";
+import { useTranslation } from "react-i18next";
+import { Box } from "./Box.js";
+import { ErrorMessageList } from "./ErrorMessageList.js";
+import { ScreenReaderText } from "./ScreenReaderText.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const FieldError = ({
+  id,
+  message,
+  messageList,
+  testId,
+  translate
+}) => {
+  const {
+    t
+  } = useTranslation();
+  return _jsxs(_FormHelperText, {
+    component: "div",
+    "data-se": testId,
+    error: true,
+    id: id,
+    translate: translate,
+    children: [_jsx(ScreenReaderText, {
+      translate: translate,
+      children: `${t("fielderror.screenreader.text")}:`
+    }), _jsxs(Box, {
+      children: [message, messageList && _jsx(ErrorMessageList, {
+        errorMessages: messageList
+      })]
+    })]
+  });
+};
+const MemoizedFieldError = memo(FieldError);
+MemoizedFieldError.displayName = "FieldError";
+export { MemoizedFieldError as FieldError };
+//# sourceMappingURL=FieldError.js.map

package/dist/esm/FieldError.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldError.js","names":["memo","useTranslation","Box","ErrorMessageList","ScreenReaderText","jsx","_jsx","jsxs","_jsxs","FieldError","id","message","messageList","testId","translate","t","_FormHelperText","component","error","children","errorMessages","MemoizedFieldError","displayName"],"sources":["../../src/FieldError.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { memo } from \"react\";\nimport { FormHelperText } from \"@mui/material\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { Box } from \"./Box.js\";\nimport { ErrorMessageList } from \"./ErrorMessageList.js\";\nimport type { HtmlProps } from \"./HtmlProps.js\";\nimport { ScreenReaderText } from \"./ScreenReaderText.js\";\n\nexport type FieldErrorProps = {\n  id?: string;\n  message?: string;\n  messageList?: string[];\n} & Pick<HtmlProps, \"testId\" | \"translate\">;\n\nconst FieldError = ({\n  id,\n  message,\n  messageList,\n  testId,\n  translate,\n}: FieldErrorProps) => {\n  const { t } = useTranslation();\n\n  return (\n    <FormHelperText\n      component=\"div\"\n      data-se={testId}\n      error\n      id={id}\n      translate={translate}\n    >\n      <ScreenReaderText translate={translate}>{`${t(\n        \"fielderror.screenreader.text\",\n      )}:`}</ScreenReaderText>\n      <Box>\n        {message}\n        {messageList && <ErrorMessageList errorMessages={messageList} />}\n      </Box>\n    </FormHelperText>\n  );\n};\n\nconst MemoizedFieldError = memo(FieldError);\nMemoizedFieldError.displayName = \"FieldError\";\n\nexport { MemoizedFieldError as FieldError };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAQ,OAAO;AAE5B,SAASC,cAAc,QAAQ,eAAe;AAE9C,SAASC,GAAG,QAAQ,UAAU;AAC9B,SAASC,gBAAgB,QAAQ,uBAAuB;AAExD,SAASC,gBAAgB,QAAQ,uBAAuB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAQzD,MAAMC,UAAU,GAAGA,CAAC;EAClBC,EAAE;EACFC,OAAO;EACPC,WAAW;EACXC,MAAM;EACNC;AACe,CAAC,KAAK;EACrB,MAAM;IAAEC;EAAE,CAAC,GAAGd,cAAc,CAAC,CAAC;EAE9B,OACEO,KAAA,CAAAQ,eAAA;IACEC,SAAS,EAAC,KAAK;IACf,WAASJ,MAAO;IAChBK,KAAK;IACLR,EAAE,EAAEA,EAAG;IACPI,SAAS,EAAEA,SAAU;IAAAK,QAAA,GAErBb,IAAA,CAACF,gBAAgB;MAACU,SAAS,EAAEA,SAAU;MAAAK,QAAA,EAAE,GAAGJ,CAAC,CAC3C,8BACF,CAAC;IAAG,CAAmB,CAAC,EACxBP,KAAA,CAACN,GAAG;MAAAiB,QAAA,GACDR,OAAO,EACPC,WAAW,IAAIN,IAAA,CAACH,gBAAgB;QAACiB,aAAa,EAAER;MAAY,CAAE,CAAC;IAAA,CAC7D,CAAC;EAAA,CACQ,CAAC;AAErB,CAAC;AAED,MAAMS,kBAAkB,GAAGrB,IAAI,CAACS,UAAU,CAAC;AAC3CY,kBAAkB,CAACC,WAAW,GAAG,YAAY;AAE7C,SAASD,kBAAkB,IAAIZ,UAAU","ignoreList":[]}

package/dist/esm/FieldHint.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldHint.js","names":["memo","styled","useOdysseyDesignTokens","jsxs","_jsxs","HintLinkContainer","span","odysseyDesignTokens","a","color","TypographyColorBody","textDecoration","TypographyColorSubordinate","FieldHint","id","LinkComponent","testId","text","translate","_FormHelperText","children","MemoizedFieldHint","displayName"],"sources":["../../src/FieldHint.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 { memo } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { FormHelperText } from \"@mui/material\";\n\nimport { FieldComponentProps } from \"./FieldComponentProps.js\";\nimport type { HtmlProps } from \"./HtmlProps.js\";\nimport {\n  useOdysseyDesignTokens,\n  DesignTokens,\n} from \"./OdysseyDesignTokensContext.js\";\n\nconst HintLinkContainer = styled.span<{ odysseyDesignTokens: DesignTokens }>(\n  ({ odysseyDesignTokens }) => ({\n    a: {\n      color: odysseyDesignTokens.TypographyColorBody,\n      textDecoration: \"underline\",\n\n      \"&:visited\": {\n        color: odysseyDesignTokens.TypographyColorBody,\n      },\n\n      \"&:hover\": {\n        color: odysseyDesignTokens.TypographyColorSubordinate,\n      },\n    },\n  }),\n);\n\nexport type FieldHintProps = {\n  LinkComponent?: FieldComponentProps[\"HintLinkComponent\"];\n  id?: string;\n  text: string;\n} & Pick<HtmlProps, \"testId\" | \"translate\">;\n\nconst FieldHint = ({\n  id,\n  LinkComponent,\n  testId,\n  text,\n  translate,\n}: FieldHintProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  return (\n    <FormHelperText data-se={testId} id={id} translate={translate}>\n      {text}\n      {LinkComponent && (\n        <HintLinkContainer odysseyDesignTokens={odysseyDesignTokens}>\n          {\" \"}\n          {LinkComponent}\n        </HintLinkContainer>\n      )}\n    </FormHelperText>\n  );\n};\n\nconst MemoizedFieldHint = memo(FieldHint);\nMemoizedFieldHint.displayName = \"FieldHint\";\n\nexport { MemoizedFieldHint as FieldHint };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAQ,OAAO;AAC5B,OAAOC,MAAM,MAAM,iBAAiB;AAKpC,SACEC,sBAAsB,QAEjB,iCAAiC;AAAC,SAAAC,IAAA,IAAAC,KAAA;AAEzC,MAAMC,iBAAiB,GAAGJ,MAAM,CAACK,IAAI,CACnC,CAAC;EAAEC;AAAoB,CAAC,MAAM;EAC5BC,CAAC,EAAE;IACDC,KAAK,EAAEF,mBAAmB,CAACG,mBAAmB;IAC9CC,cAAc,EAAE,WAAW;IAE3B,WAAW,EAAE;MACXF,KAAK,EAAEF,mBAAmB,CAACG;IAC7B,CAAC;IAED,SAAS,EAAE;MACTD,KAAK,EAAEF,mBAAmB,CAACK;IAC7B;EACF;AACF,CAAC,CACH,CAAC;AAQD,MAAMC,SAAS,GAAGA,CAAC;EACjBC,EAAE;EACFC,aAAa;EACbC,MAAM;EACNC,IAAI;EACJC;AACc,CAAC,KAAK;EACpB,MAAMX,mBAAmB,GAAGL,sBAAsB,CAAC,CAAC;EAEpD,OACEE,KAAA,CAAAe,eAAA;IAAgB,WAASH,MAAO;IAACF,EAAE,EAAEA,EAAG;IAACI,SAAS,EAAEA,SAAU;IAAAE,QAAA,GAC3DH,IAAI,EACJF,aAAa,IACZX,KAAA,CAACC,iBAAiB;MAACE,mBAAmB,EAAEA,mBAAoB;MAAAa,QAAA,GACzD,GAAG,EACHL,aAAa;IAAA,CACG,CACpB;EAAA,CACa,CAAC;AAErB,CAAC;AAED,MAAMM,iBAAiB,GAAGrB,IAAI,CAACa,SAAS,CAAC;AACzCQ,iBAAiB,CAACC,WAAW,GAAG,WAAW;AAE3C,SAASD,iBAAiB,IAAIR,SAAS","ignoreList":[]}