@okta/odyssey-react-mui 1.29.0 → 1.32.0

package/dist/cjs/DatePickers/useOdysseyDateFields.cjs

@@ -0,0 +1,141 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useOdysseyDateFields = void 0;
+var _react = require("react");
+var _luxon = require("luxon");
+var _reactI18next = require("react-i18next");
+var _index = require("../icons.generated/index.cjs");
+var _inputUtils = require("../inputUtils.cjs");
+var _useDateFieldsTranslations = require("./useDateFieldsTranslations.cjs");
+/*!
+ * 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.
+ */
+
+const {
+  CONTROLLED
+} = _inputUtils.ComponentControlledState;
+const isValidDateTime = dateTime => dateTime.isValid;
+const utcDateTimeFromIsoString = dateString => _luxon.DateTime.fromISO(dateString).toUTC();
+const useOdysseyDateFields = ({
+  defaultValue,
+  isDateEnabled = () => true,
+  isMonthEnabled = () => true,
+  isYearEnabled = () => true,
+  minDate: minDateProp,
+  maxDate: maxDateProp,
+  onInputChange: onInputChangeProp,
+  timeZone = "system",
+  value
+}) => {
+  const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  const [popperElement, setPopperElement] = (0, _react.useState)();
+  const [internalTimeZone, setInternalTimeZone] = (0, _react.useState)(timeZone);
+  const internalValueRef = (0, _react.useRef)(null);
+  const [validationDateRanges, setValidationDateRanges] = (0, _react.useState)({
+    minDate: undefined,
+    maxDate: undefined
+  });
+  (0, _react.useEffect)(() => {
+    const minDate = minDateProp ? _luxon.DateTime.fromISO(minDateProp) : undefined;
+    const maxDate = maxDateProp ? _luxon.DateTime.fromISO(maxDateProp) : undefined;
+    setValidationDateRanges({
+      minDate: minDate && isValidDateTime(minDate) ? minDate.startOf("day") : undefined,
+      maxDate: maxDate && isValidDateTime(maxDate) ? maxDate.startOf("day") : undefined
+    });
+  }, [minDateProp, maxDateProp]);
+  const {
+    i18n
+  } = (0, _reactI18next.useTranslation)();
+  const {
+    language
+  } = i18n;
+  const invalidLocales = ["ok_PL", "ok_SK"];
+  const isInvalidLocale = invalidLocales.includes(language) || language.includes("@");
+  const localeText = (0, _useDateFieldsTranslations.useDateFieldsTranslations)();
+  const controlledStateRef = (0, _react.useRef)((0, _inputUtils.getControlState)({
+    controlledValue: value,
+    uncontrolledValue: defaultValue
+  }));
+  const defaultedLanguageCode = isInvalidLocale ? "en-US" : language.replaceAll("_", "-");
+  const isValidTimeZone = timeZone => _luxon.DateTime.local().setZone(timeZone).isValid;
+  const formatDateTimeToUtcIsoDateString = (0, _react.useCallback)(value => value.toUTC().toISO() || undefined, []);
+  const shouldDisableDate = (0, _react.useCallback)(date => !isDateEnabled(new Date(date?.toJSDate())) || false, [isDateEnabled]);
+  const shouldDisableMonth = (0, _react.useCallback)(date => !isMonthEnabled(new Date(date?.toJSDate())) || false, [isMonthEnabled]);
+  const shouldDisableYear = (0, _react.useCallback)(date => !isYearEnabled(new Date(date?.toJSDate())) || false, [isYearEnabled]);
+  const inputValues = (0, _react.useMemo)(() => {
+    if (value && controlledStateRef.current === CONTROLLED) {
+      const valueAsUTCDateTime = utcDateTimeFromIsoString(value);
+      if (isValidDateTime(valueAsUTCDateTime)) {
+        return {
+          value: valueAsUTCDateTime
+        };
+      }
+    }
+    if (defaultValue) {
+      const defaultValueAsUTCDateTime = utcDateTimeFromIsoString(defaultValue);
+      if (isValidDateTime(defaultValueAsUTCDateTime)) {
+        return {
+          defaultValue: defaultValueAsUTCDateTime
+        };
+      }
+    }
+    return null;
+  }, [defaultValue, validationDateRanges, value]);
+  const onTimeZoneChange = (0, _react.useCallback)(timeZone => {
+    if (timeZone && isValidTimeZone(timeZone)) {
+      setInternalTimeZone(timeZone);
+    }
+  }, [isValidTimeZone, setInternalTimeZone]);
+  const toggleCalendarVisibility = (0, _react.useCallback)(() => setIsOpen(!isOpen), [isOpen, setIsOpen]);
+  const closeCalendar = (0, _react.useCallback)(() => {
+    setIsOpen(false);
+  }, [setIsOpen]);
+  const formatDayOfWeek = date => date.toFormat("EEE");
+  const onInputChange = (0, _react.useCallback)(value => {
+    onInputChangeProp?.(value);
+  }, [onInputChangeProp]);
+  const commonIcons = {
+    ArrowLeftIcon: _index.ArrowLeftIcon,
+    ArrowRightIcon: _index.ArrowRightIcon,
+    CalendarIcon: _index.CalendarIcon,
+    ChevronDownIcon: _index.ChevronDownIcon
+  };
+  return {
+    closeCalendar,
+    commonIcons,
+    defaultedLanguageCode,
+    formatDateTimeToUtcIsoDateString,
+    formatDayOfWeek,
+    inputValues,
+    internalTimeZone,
+    internalValueRef,
+    isOpen,
+    isValidTimeZone,
+    localeText,
+    maxDate: validationDateRanges.maxDate,
+    minDate: validationDateRanges.minDate,
+    popperElement,
+    onInputChange,
+    onTimeZoneChange,
+    setInternalTimeZone,
+    setIsOpen,
+    setPopperElement,
+    shouldDisableDate,
+    shouldDisableMonth,
+    shouldDisableYear,
+    toggleCalendarVisibility
+  };
+};
+exports.useOdysseyDateFields = useOdysseyDateFields;
+//# sourceMappingURL=useOdysseyDateFields.cjs.map

package/dist/cjs/DatePickers/useOdysseyDateFields.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOdysseyDateFields.cjs","names":["_react","require","_luxon","_reactI18next","_index","_inputUtils","_useDateFieldsTranslations","CONTROLLED","ComponentControlledState","isValidDateTime","dateTime","isValid","utcDateTimeFromIsoString","dateString","DateTime","fromISO","toUTC","useOdysseyDateFields","defaultValue","isDateEnabled","isMonthEnabled","isYearEnabled","minDate","minDateProp","maxDate","maxDateProp","onInputChange","onInputChangeProp","timeZone","value","isOpen","setIsOpen","useState","popperElement","setPopperElement","internalTimeZone","setInternalTimeZone","internalValueRef","useRef","validationDateRanges","setValidationDateRanges","undefined","useEffect","startOf","i18n","useTranslation","language","invalidLocales","isInvalidLocale","includes","localeText","useDateFieldsTranslations","controlledStateRef","getControlState","controlledValue","uncontrolledValue","defaultedLanguageCode","replaceAll","isValidTimeZone","local","setZone","formatDateTimeToUtcIsoDateString","useCallback","toISO","shouldDisableDate","date","Date","toJSDate","shouldDisableMonth","shouldDisableYear","inputValues","useMemo","current","valueAsUTCDateTime","defaultValueAsUTCDateTime","onTimeZoneChange","toggleCalendarVisibility","closeCalendar","formatDayOfWeek","toFormat","commonIcons","ArrowLeftIcon","ArrowRightIcon","CalendarIcon","ChevronDownIcon","exports"],"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/cjs/Dialog.cjs

@@ -0,0 +1,99 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Dialog = void 0;
+var _Dialog2 = _interopRequireDefault(require("@mui/material/Dialog"));
+var _DialogActions2 = _interopRequireDefault(require("@mui/material/DialogActions"));
+var _DialogContent2 = _interopRequireDefault(require("@mui/material/DialogContent"));
+var _DialogTitle2 = _interopRequireDefault(require("@mui/material/DialogTitle"));
+var _DialogContentText2 = _interopRequireDefault(require("@mui/material/DialogContentText"));
+var _reactI18next = require("react-i18next");
+var _index = require("./Buttons/index.cjs");
+var _index2 = require("./icons.generated/index.cjs");
+var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/*!
+ * 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.
+ */
+
+const Dialog = ({
+  primaryCallToActionComponent,
+  secondaryCallToActionComponent,
+  tertiaryCallToActionComponent,
+  callToActionFirstComponent,
+  callToActionSecondComponent,
+  callToActionLastComponent,
+  children,
+  isOpen,
+  onClose,
+  testId,
+  title,
+  translate
+}) => {
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)();
+  const [isContentScrollable, setIsContentScrollable] = (0, _react.useState)(false);
+  const dialogContentRef = (0, _react.useRef)(null);
+  (0, _react.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" ? (0, _jsxRuntime.jsx)(_DialogContentText2.default, {
+    children: children
+  }) : children;
+  const actionButtons = [tertiaryCallToActionComponent || callToActionLastComponent, secondaryCallToActionComponent || callToActionSecondComponent, primaryCallToActionComponent || callToActionFirstComponent].filter(Boolean);
+  return (0, _jsxRuntime.jsxs)(_Dialog2.default, {
+    "data-se": testId,
+    open: isOpen,
+    onClose: onClose,
+    children: [(0, _jsxRuntime.jsxs)(_DialogTitle2.default, {
+      translate: translate,
+      children: [title, (0, _jsxRuntime.jsx)(_index.Button, {
+        ariaLabel: t("close.text"),
+        onClick: onClose,
+        size: "small",
+        startIcon: (0, _jsxRuntime.jsx)(_index2.CloseIcon, {}),
+        variant: "floating"
+      })]
+    }), (0, _jsxRuntime.jsx)(_DialogContent2.default, {
+      ...(isContentScrollable && {
+        tabIndex: 0
+      }),
+      dividers: isContentScrollable,
+      ref: dialogContentRef,
+      children: content
+    }), actionButtons.length > 0 && (0, _jsxRuntime.jsx)(_DialogActions2.default, {
+      children: actionButtons.map((actionButton, index) => actionButton ? (0, _react.cloneElement)(actionButton, {
+        key: index
+      }) : null)
+    })]
+  });
+};
+const MemoizedDialog = exports.Dialog = (0, _react.memo)(Dialog);
+MemoizedDialog.displayName = "Dialog";
+//# sourceMappingURL=Dialog.cjs.map

package/dist/cjs/Dialog.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.cjs","names":["_reactI18next","require","_index","_index2","_react","_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","useEffect","frameId","handleContentScroll","dialogContentElement","current","cancelAnimationFrame","scrollHeight","clientHeight","requestAnimationFrame","content","jsx","_DialogContentText2","actionButtons","filter","Boolean","jsxs","_Dialog2","open","_DialogTitle2","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 { 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/cjs/Drawer.cjs

@@ -0,0 +1,177 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.variantValues = exports.Drawer = void 0;
+var _Drawer2 = _interopRequireDefault(require("@mui/material/Drawer"));
+var _react = require("react");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _reactI18next = require("react-i18next");
+var _index = require("./Buttons/index.cjs");
+var _index2 = require("./icons.generated/index.cjs");
+var _OdysseyDesignTokensContext = require("./OdysseyDesignTokensContext.cjs");
+var _Typography = require("./Typography.cjs");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/*!
+ * 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.
+ */
+
+const variantValues = exports.variantValues = ["temporary", "persistent"];
+const DrawerHeader = (0, _styled.default)("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 = (0, _styled.default)("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})`
+  overflow-y: auto;
+`;
+const DrawerContent = (0, _styled.default)("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})`
+  padding: ${({
+  showDividers,
+  odysseyDesignTokens
+}) => showDividers ? `${odysseyDesignTokens.Spacing5}` : `0 ${odysseyDesignTokens.Spacing5}`};
+`;
+const DrawerFooter = (0, _styled.default)("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] = (0, _react.useState)(false);
+  const drawerContentRef = (0, _react.useRef)(null);
+  const odysseyDesignTokens = (0, _OdysseyDesignTokensContext.useOdysseyDesignTokens)();
+  const {
+    i18n
+  } = (0, _reactI18next.useTranslation)();
+  const anchorDirection = i18n.dir() === "rtl" ? "left" : "right";
+  (0, _react.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 = (0, _react.useMemo)(() => {
+    return showDividers || isContentScrollable;
+  }, [showDividers, isContentScrollable]);
+  const hasFooter = (0, _react.useMemo)(() => primaryCallToActionComponent || secondaryCallToActionComponent || tertiaryCallToActionComponent, [primaryCallToActionComponent, secondaryCallToActionComponent, tertiaryCallToActionComponent]);
+  return (0, _jsxRuntime.jsxs)(_Drawer2.default, {
+    "data-se": testId,
+    anchor: anchorDirection,
+    open: isOpen,
+    onClose: onClose,
+    variant: variant,
+    sx: {
+      ...(variant === "persistent" && {
+        "& .MuiDrawer-paper": {
+          transition: "none"
+        }
+      })
+    },
+    children: [(0, _jsxRuntime.jsxs)(DrawerContentWrapper, {
+      ...(isContentScrollable && {
+        tabIndex: 0
+      }),
+      odysseyDesignTokens: odysseyDesignTokens,
+      ref: drawerContentRef,
+      children: [(0, _jsxRuntime.jsxs)(DrawerHeader, {
+        translate: translate,
+        odysseyDesignTokens: odysseyDesignTokens,
+        showDividers: dividersVisible,
+        children: [(0, _jsxRuntime.jsx)(_Typography.Heading5, {
+          children: title
+        }), (0, _jsxRuntime.jsx)(_index.Button, {
+          ariaLabel: ariaLabel,
+          onClick: onClose,
+          size: "small",
+          startIcon: (0, _jsxRuntime.jsx)(_index2.CloseIcon, {}),
+          variant: "floating"
+        })]
+      }), (0, _jsxRuntime.jsx)(DrawerContent, {
+        showDividers: dividersVisible,
+        odysseyDesignTokens: odysseyDesignTokens,
+        children: children
+      })]
+    }), hasFooter && (0, _jsxRuntime.jsxs)(DrawerFooter, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      showDividers: dividersVisible,
+      children: [tertiaryCallToActionComponent, secondaryCallToActionComponent, primaryCallToActionComponent]
+    })]
+  });
+};
+const MemoizedDrawer = exports.Drawer = (0, _react.memo)(Drawer);
+MemoizedDrawer.displayName = "Drawer";
+//# sourceMappingURL=Drawer.cjs.map

package/dist/cjs/Drawer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.cjs","names":["_react","require","_styled","_interopRequireDefault","_reactI18next","_index","_index2","_OdysseyDesignTokensContext","_Typography","_jsxRuntime","e","__esModule","default","variantValues","exports","DrawerHeader","styled","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","useState","drawerContentRef","useRef","useOdysseyDesignTokens","i18n","useTranslation","anchorDirection","dir","useEffect","frameId","handleContentScroll","drawerContentElement","current","cancelAnimationFrame","scrollHeight","clientHeight","requestAnimationFrame","dividersVisible","useMemo","hasFooter","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 {\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/cjs/EmptyState.cjs

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EmptyState = exports.DataTableEmptyState = void 0;
+var _react = require("react");
+var _Typography = require("./Typography.cjs");
+var _Box = require("./Box.cjs");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _OdysseyDesignTokensContext = require("./OdysseyDesignTokensContext.cjs");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/*!
+ * 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.
+ */
+
+const EmptyContainer = (0, _styled.default)("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 = (0, _OdysseyDesignTokensContext.useOdysseyDesignTokens)();
+  return (0, _jsxRuntime.jsxs)(EmptyContainer, {
+    odysseyDesignTokens: odysseyDesignTokens,
+    children: [(0, _jsxRuntime.jsx)(_Typography.Heading4, {
+      children: heading
+    }), (0, _jsxRuntime.jsx)(_Typography.Paragraph, {
+      children: description
+    }), (PrimaryCallToActionComponent || SecondaryCallToActionComponent) && (0, _jsxRuntime.jsxs)(_Box.Box, {
+      sx: {
+        marginBlockStart: 5
+      },
+      children: [SecondaryCallToActionComponent, PrimaryCallToActionComponent]
+    })]
+  });
+};
+const MemoizedEmptyState = exports.DataTableEmptyState = exports.EmptyState = (0, _react.memo)(EmptyState);
+MemoizedEmptyState.displayName = "EmptyState";
+//# sourceMappingURL=EmptyState.cjs.map

package/dist/cjs/EmptyState.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.cjs","names":["_react","require","_Typography","_Box","_styled","_interopRequireDefault","_OdysseyDesignTokensContext","_jsxRuntime","e","__esModule","default","EmptyContainer","styled","shouldForwardProp","prop","odysseyDesignTokens","display","flexDirection","marginBlock","Spacing9","padding","Spacing5","textAlign","width","alignItems","EmptyState","heading","description","PrimaryCallToActionComponent","SecondaryCallToActionComponent","useOdysseyDesignTokens","jsxs","children","jsx","Heading4","Paragraph","Box","sx","marginBlockStart","MemoizedEmptyState","exports","DataTableEmptyState","memo","displayName"],"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":";;;;;;AAYA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AACA,IAAAE,IAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAC,sBAAA,CAAAJ,OAAA;AACA,IAAAK,2BAAA,GAAAL,OAAA;AAGyC,IAAAM,WAAA,GAAAN,OAAA;AAAA,SAAAI,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAnBzC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAWA,MAAMG,cAAc,GAAG,IAAAC,eAAM,EAAC,KAAK,EAAE;EACnCC,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,GAAG,IAAAe,kDAAsB,EAAC,CAAC;EAEpD,OACE,IAAAvB,WAAA,CAAAwB,IAAA,EAACpB,cAAc;IAACI,mBAAmB,EAAEA,mBAAoB;IAAAiB,QAAA,GACvD,IAAAzB,WAAA,CAAA0B,GAAA,EAAC/B,WAAA,CAAAgC,QAAQ;MAAAF,QAAA,EAAEN;IAAO,CAAW,CAAC,EAC9B,IAAAnB,WAAA,CAAA0B,GAAA,EAAC/B,WAAA,CAAAiC,SAAS;MAAAH,QAAA,EAAEL;IAAW,CAAY,CAAC,EACnC,CAACC,4BAA4B,IAAIC,8BAA8B,KAC9D,IAAAtB,WAAA,CAAAwB,IAAA,EAAC5B,IAAA,CAAAiC,GAAG;MAACC,EAAE,EAAE;QAAEC,gBAAgB,EAAE;MAAE,CAAE;MAAAN,QAAA,GAC9BH,8BAA8B,EAC9BD,4BAA4B;IAAA,CAC1B,CACN;EAAA,CACa,CAAC;AAErB,CAAC;AAED,MAAMW,kBAAkB,GAAAC,OAAA,CAAAC,mBAAA,GAAAD,OAAA,CAAAf,UAAA,GAAG,IAAAiB,WAAI,EAACjB,UAAU,CAAC;AAC3Cc,kBAAkB,CAACI,WAAW,GAAG,YAAY","ignoreList":[]}

package/dist/cjs/ErrorMessageList.cjs

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ErrorMessageList = void 0;
+var _List2 = _interopRequireDefault(require("@mui/material/List"));
+var _ListItem2 = _interopRequireDefault(require("@mui/material/ListItem"));
+var _OdysseyDesignTokensContext = require("./OdysseyDesignTokensContext.cjs");
+var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/*!
+ * 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.
+ */
+
+const listItemStyles = {
+  display: "list-item",
+  paddingInlineStart: 0
+};
+const ErrorMessageList = ({
+  errorMessages
+}) => {
+  const odysseyDesignTokens = (0, _OdysseyDesignTokensContext.useOdysseyDesignTokens)();
+  const listStyles = (0, _react.useMemo)(() => ({
+    listStyle: "disc",
+    paddingInlineStart: odysseyDesignTokens.Spacing4
+  }), [odysseyDesignTokens]);
+  return (0, _jsxRuntime.jsx)(_List2.default, {
+    disablePadding: true,
+    dense: true,
+    sx: listStyles,
+    children: errorMessages.map(errorMessage => (0, _jsxRuntime.jsx)(_ListItem2.default, {
+      disablePadding: true,
+      dense: true,
+      sx: listItemStyles,
+      children: errorMessage
+    }, errorMessage))
+  });
+};
+const MemoizedErrorMessageList = exports.ErrorMessageList = (0, _react.memo)(ErrorMessageList);
+MemoizedErrorMessageList.displayName = "ErrorMessageList";
+//# sourceMappingURL=ErrorMessageList.cjs.map

package/dist/cjs/ErrorMessageList.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorMessageList.cjs","names":["_OdysseyDesignTokensContext","require","_react","_jsxRuntime","_interopRequireDefault","e","__esModule","default","listItemStyles","display","paddingInlineStart","ErrorMessageList","errorMessages","odysseyDesignTokens","useOdysseyDesignTokens","listStyles","useMemo","listStyle","Spacing4","jsx","_List2","disablePadding","dense","sx","children","map","errorMessage","_ListItem2","MemoizedErrorMessageList","exports","memo","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,IAAAA,2BAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAAsC,IAAAE,WAAA,GAAAF,OAAA;AAAA,SAAAG,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAdtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAUA,MAAMG,cAAc,GAAG;EACrBC,OAAO,EAAE,WAAW;EACpBC,kBAAkB,EAAE;AACtB,CAAC;AAED,MAAMC,gBAAgB,GAAGA,CAAC;EAAEC;AAAqC,CAAC,KAAK;EACrE,MAAMC,mBAAmB,GAAG,IAAAC,kDAAsB,EAAC,CAAC;EAEpD,MAAMC,UAAU,GAAG,IAAAC,cAAO,EACxB,OAAO;IACLC,SAAS,EAAE,MAAM;IACjBP,kBAAkB,EAAEG,mBAAmB,CAACK;EAC1C,CAAC,CAAC,EACF,CAACL,mBAAmB,CACtB,CAAC;EAED,OACE,IAAAV,WAAA,CAAAgB,GAAA,EAAAC,MAAA,CAAAb,OAAA;IAASc,cAAc;IAACC,KAAK;IAACC,EAAE,EAAER,UAAW;IAAAS,QAAA,EAC1CZ,aAAa,CAACa,GAAG,CAAEC,YAAY,IAC9B,IAAAvB,WAAA,CAAAgB,GAAA,EAAAQ,UAAA,CAAApB,OAAA;MAEEc,cAAc;MACdC,KAAK;MACLC,EAAE,EAAEf,cAAe;MAAAgB,QAAA,EAElBE;IAAY,GALRA,YAMM,CACd;EAAC,CACK,CAAC;AAEd,CAAC;AAED,MAAME,wBAAwB,GAAAC,OAAA,CAAAlB,gBAAA,GAAG,IAAAmB,WAAI,EAACnB,gBAAgB,CAAC;AACvDiB,wBAAwB,CAACG,WAAW,GAAG,kBAAkB","ignoreList":[]}