@gusto/embedded-react-sdk 0.37.0 → 0.38.0-rc.1

package/dist/components/Common/UI/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../../../src/components/Common/UI/Button/Button.tsx"],"sourcesContent":["import { Button as AriaButton } from 'react-aria-components'\nimport classNames from 'classnames'\nimport { type ButtonProps, ButtonDefaults } from './ButtonTypes'\nimport styles from './Button.module.scss'\nimport { applyMissingDefaults } from '@/helpers/applyMissingDefaults'\n\nexport function Button(rawProps: ButtonProps) {\n  const resolvedProps = applyMissingDefaults(rawProps, ButtonDefaults)\n  const {\n    isLoading,\n    isDisabled,\n    variant,\n    buttonRef,\n    className,\n    children,\n    onBlur,\n    onFocus,\n    onClick,\n    ...otherProps\n  } = resolvedProps\n  const handlePress = onClick\n    ? () => {\n        onClick({} as React.MouseEvent<HTMLButtonElement>)\n      }\n    : undefined\n\n  return (\n    <AriaButton\n      {...otherProps}\n      className={({ defaultClassName }) => classNames(styles.root, defaultClassName, className)}\n      ref={buttonRef}\n      onBlur={onBlur}\n      onFocus={onFocus}\n      isDisabled={isDisabled || isLoading}\n      data-variant={variant}\n      data-loading={isLoading || undefined}\n      onPress={handlePress}\n    >\n      {children}\n    </AriaButton>\n  )\n}\n"],"names":["Button","rawProps","resolvedProps","applyMissingDefaults","ButtonDefaults","isLoading","isDisabled","variant","buttonRef","className","children","onBlur","onFocus","onClick","otherProps","jsx","AriaButton","defaultClassName","classNames","styles"],"mappings":";;;;;;AAMO,SAASA,EAAOC,GAAuB;AAC5C,QAAMC,IAAgBC,EAAqBF,GAAUG,CAAc,GAC7D;AAAA,IACJ,WAAAC;AAAA,IACA,YAAAC;AAAA,IACA,SAAAC;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,QAAAC;AAAA,IACA,SAAAC;AAAA,IACA,SAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDZ;AAOJ,SACE,gBAAAa;AAAA,IAACC;AAAAA,IAAA;AAAA,MACE,GAAGF;AAAA,MACJ,WAAW,CAAC,EAAE,kBAAAG,QAAuBC,EAAWC,EAAO,MAAMF,GAAkBR,CAAS;AAAA,MACxF,KAAKD;AAAA,MACL,QAAAG;AAAA,MACA,SAAAC;AAAA,MACA,YAAYN,KAAcD;AAAA,MAC1B,gBAAcE;AAAA,MACd,gBAAcF,KAAa;AAAA,MAC3B,SAhBgBQ,IAChB,MAAM;AACJ,QAAAA,EAAQ,CAAA,CAAyC;AAAA,MACnD,IACA;AAAA,MAcC,UAAAH;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"Button.js","sources":["../../../../../src/components/Common/UI/Button/Button.tsx"],"sourcesContent":["import { Button as AriaButton } from 'react-aria-components'\nimport classNames from 'classnames'\nimport { type ButtonProps, ButtonDefaults } from './ButtonTypes'\nimport styles from './Button.module.scss'\nimport { applyMissingDefaults } from '@/helpers/applyMissingDefaults'\n\nexport function Button(rawProps: ButtonProps) {\n  const resolvedProps = applyMissingDefaults(rawProps, ButtonDefaults)\n  const {\n    isLoading,\n    isDisabled,\n    variant,\n    buttonRef,\n    className,\n    icon,\n    children,\n    onBlur,\n    onFocus,\n    onClick,\n    ...otherProps\n  } = resolvedProps\n  const handlePress = onClick\n    ? () => {\n        onClick({} as React.MouseEvent<HTMLButtonElement>)\n      }\n    : undefined\n\n  return (\n    <AriaButton\n      {...otherProps}\n      className={({ defaultClassName }) => classNames(styles.root, defaultClassName, className)}\n      ref={buttonRef}\n      onBlur={onBlur}\n      onFocus={onFocus}\n      isDisabled={isDisabled || isLoading}\n      data-variant={variant}\n      data-loading={isLoading || undefined}\n      onPress={handlePress}\n    >\n      {icon && <span className={styles.icon}>{icon}</span>}\n      {children}\n    </AriaButton>\n  )\n}\n"],"names":["Button","rawProps","resolvedProps","applyMissingDefaults","ButtonDefaults","isLoading","isDisabled","variant","buttonRef","className","icon","children","onBlur","onFocus","onClick","otherProps","jsxs","AriaButton","defaultClassName","classNames","styles","jsx"],"mappings":";;;;;;AAMO,SAASA,EAAOC,GAAuB;AAC5C,QAAMC,IAAgBC,EAAqBF,GAAUG,CAAc,GAC7D;AAAA,IACJ,WAAAC;AAAA,IACA,YAAAC;AAAA,IACA,SAAAC;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,MAAAC;AAAA,IACA,UAAAC;AAAA,IACA,QAAAC;AAAA,IACA,SAAAC;AAAA,IACA,SAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDb;AAOJ,SACE,gBAAAc;AAAA,IAACC;AAAAA,IAAA;AAAA,MACE,GAAGF;AAAA,MACJ,WAAW,CAAC,EAAE,kBAAAG,QAAuBC,EAAWC,EAAO,MAAMF,GAAkBT,CAAS;AAAA,MACxF,KAAKD;AAAA,MACL,QAAAI;AAAA,MACA,SAAAC;AAAA,MACA,YAAYP,KAAcD;AAAA,MAC1B,gBAAcE;AAAA,MACd,gBAAcF,KAAa;AAAA,MAC3B,SAhBgBS,IAChB,MAAM;AACJ,QAAAA,EAAQ,CAAA,CAAyC;AAAA,MACnD,IACA;AAAA,MAcC,UAAA;AAAA,QAAAJ,KAAQ,gBAAAW,EAAC,QAAA,EAAK,WAAWD,EAAO,MAAO,UAAAV,GAAK;AAAA,QAC5CC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/components/Common/UI/Button/Button.module.scss.js

@@ -1,8 +1,10 @@
-const o = "_root_1sac1_1", t = {
-  root: o
+const o = "_root_198v4_1", t = "_icon_198v4_25", c = {
+  root: o,
+  icon: t
 };
 export {
-  t as default,
+  c as default,
+  t as icon,
   o as root
 };
 //# sourceMappingURL=Button.module.scss.js.map

package/dist/components/Common/UI/Button/Button.module.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
+{"version":3,"file":"Button.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/components/Common/UI/Button/ButtonTypes.d.ts

@@ -16,6 +16,10 @@ export interface ButtonProps extends Pick<ButtonHTMLAttributes<HTMLButtonElement
      * Disables the button and prevents interaction
      */
     isDisabled?: boolean;
+    /**
+     * Optional leading icon rendered before children
+     */
+    icon?: ReactNode;
     /**
      * Content to be rendered inside the button
      */

package/dist/components/Common/UI/Button/ButtonTypes.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonTypes.js","sources":["../../../../../src/components/Common/UI/Button/ButtonTypes.ts"],"sourcesContent":["import type { Ref, ButtonHTMLAttributes, ReactNode, FocusEvent } from 'react'\n\nexport interface ButtonProps extends Pick<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  | 'name'\n  | 'id'\n  | 'className'\n  | 'type'\n  | 'onClick'\n  | 'onKeyDown'\n  | 'onKeyUp'\n  | 'aria-label'\n  | 'aria-labelledby'\n  | 'aria-describedby'\n  | 'form'\n  | 'title'\n  | 'tabIndex'\n> {\n  /**\n   * React ref for the button element\n   */\n  buttonRef?: Ref<HTMLButtonElement>\n  /**\n   * Visual style variant of the button\n   */\n  variant?: 'primary' | 'secondary' | 'tertiary' | 'error'\n  /**\n   * Shows a loading spinner and disables the button\n   */\n  isLoading?: boolean\n  /**\n   * Disables the button and prevents interaction\n   */\n  isDisabled?: boolean\n  /**\n   * Content to be rendered inside the button\n   */\n  children?: ReactNode\n  /**\n   * Handler for blur events\n   */\n  onBlur?: (e: FocusEvent) => void\n  /**\n   * Handler for focus events\n   */\n  onFocus?: (e: FocusEvent) => void\n}\n\nexport type ButtonIconProps = ButtonProps & {\n  /**\n   * Required aria-label for icon buttons to ensure accessibility\n   */\n  'aria-label': string\n}\n\n/**\n * Default prop values for Button component.\n * These are used by the component adapter to automatically provide defaults.\n */\nexport const ButtonDefaults = {\n  variant: 'primary',\n  isLoading: false,\n  isDisabled: false,\n} as const satisfies Partial<ButtonProps>\n\n/**\n * Default prop values for ButtonIcon component.\n */\nexport const ButtonIconDefaults = {\n  variant: 'tertiary',\n  isLoading: false,\n  isDisabled: false,\n} as const satisfies Partial<ButtonIconProps>\n"],"names":["ButtonDefaults","ButtonIconDefaults"],"mappings":"AA2DO,MAAMA,IAAiB;AAAA,EAC5B,SAAS;AAAA,EACT,WAAW;AAAA,EACX,YAAY;AACd,GAKaC,IAAqB;AAAA,EAChC,SAAS;AAAA,EACT,WAAW;AAAA,EACX,YAAY;AACd;"}
+{"version":3,"file":"ButtonTypes.js","sources":["../../../../../src/components/Common/UI/Button/ButtonTypes.ts"],"sourcesContent":["import type { Ref, ButtonHTMLAttributes, ReactNode, FocusEvent } from 'react'\n\nexport interface ButtonProps extends Pick<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  | 'name'\n  | 'id'\n  | 'className'\n  | 'type'\n  | 'onClick'\n  | 'onKeyDown'\n  | 'onKeyUp'\n  | 'aria-label'\n  | 'aria-labelledby'\n  | 'aria-describedby'\n  | 'form'\n  | 'title'\n  | 'tabIndex'\n> {\n  /**\n   * React ref for the button element\n   */\n  buttonRef?: Ref<HTMLButtonElement>\n  /**\n   * Visual style variant of the button\n   */\n  variant?: 'primary' | 'secondary' | 'tertiary' | 'error'\n  /**\n   * Shows a loading spinner and disables the button\n   */\n  isLoading?: boolean\n  /**\n   * Disables the button and prevents interaction\n   */\n  isDisabled?: boolean\n  /**\n   * Optional leading icon rendered before children\n   */\n  icon?: ReactNode\n  /**\n   * Content to be rendered inside the button\n   */\n  children?: ReactNode\n  /**\n   * Handler for blur events\n   */\n  onBlur?: (e: FocusEvent) => void\n  /**\n   * Handler for focus events\n   */\n  onFocus?: (e: FocusEvent) => void\n}\n\nexport type ButtonIconProps = ButtonProps & {\n  /**\n   * Required aria-label for icon buttons to ensure accessibility\n   */\n  'aria-label': string\n}\n\n/**\n * Default prop values for Button component.\n * These are used by the component adapter to automatically provide defaults.\n */\nexport const ButtonDefaults = {\n  variant: 'primary',\n  isLoading: false,\n  isDisabled: false,\n} as const satisfies Partial<ButtonProps>\n\n/**\n * Default prop values for ButtonIcon component.\n */\nexport const ButtonIconDefaults = {\n  variant: 'tertiary',\n  isLoading: false,\n  isDisabled: false,\n} as const satisfies Partial<ButtonIconProps>\n"],"names":["ButtonDefaults","ButtonIconDefaults"],"mappings":"AA+DO,MAAMA,IAAiB;AAAA,EAC5B,SAAS;AAAA,EACT,WAAW;AAAA,EACX,YAAY;AACd,GAKaC,IAAqB;AAAA,EAChC,SAAS;AAAA,EACT,WAAW;AAAA,EACX,YAAY;AACd;"}

package/dist/components/Common/UI/DatePicker/DatePicker.d.ts

@@ -1,2 +1,2 @@
 import { DatePickerProps } from './DatePickerTypes';
-export declare const DatePicker: ({ className, description, errorMessage, id, inputRef, isDisabled, isInvalid, isRequired, label, onChange, onBlur, value, portalContainer, ...props }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DatePicker: ({ className, description, errorMessage, id, inputRef, isDisabled, isInvalid, isRequired, label, onChange, onBlur, value, portalContainer, minDate, maxDate, isDateDisabled, ...props }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Common/UI/DatePicker/DatePicker.js

@@ -1,93 +1,112 @@
-import { jsx as r, jsxs as o } from "react/jsx-runtime";
-import { DatePicker as k, Group as A, DateInput as B, DateSegment as F, Button as c, Popover as L, Dialog as j, Calendar as E, Heading as G, CalendarGrid as M, CalendarCell as z } from "react-aria-components";
-import { useTranslation as H } from "react-i18next";
-import u from "classnames";
-import { parseDate as R } from "@internationalized/date";
-import { useFieldIds as U } from "../hooks/useFieldIds.js";
+import { jsx as r, jsxs as n } from "react/jsx-runtime";
+import { DatePicker as z, Group as H, DateInput as R, DateSegment as V, Button as c, Popover as Y, Dialog as _, Calendar as $, Heading as q, CalendarGrid as J, CalendarCell as K } from "react-aria-components";
+import { useTranslation as O } from "react-i18next";
+import S from "classnames";
+import { parseDate as T } from "@internationalized/date";
+import { useFieldIds as Q } from "../hooks/useFieldIds.js";
 import i from "./DatePicker.module.scss.js";
-import { FieldLayout as _ } from "../../FieldLayout/FieldLayout.js";
+import { FieldLayout as W } from "../../FieldLayout/FieldLayout.js";
 import "react";
-import { useTheme as $ } from "../../../../contexts/ThemeProvider/useTheme.js";
+import { useTheme as X } from "../../../../contexts/ThemeProvider/useTheme.js";
 /* empty css                          */
-import q from "../../../../assets/icons/caret-down.svg.js";
-import J from "../../../../assets/icons/caret-right.svg.js";
-import K from "../../../../assets/icons/caret-left.svg.js";
-import O from "../../../../assets/icons/alert-circle.svg.js";
-import { formatDateToStringDate as Q } from "../../../../helpers/dateFormatting.js";
-function W(e) {
-  return e ? new Date(
-    e.year,
-    e.month - 1,
+import Z from "../../../../assets/icons/caret-down.svg.js";
+import rr from "../../../../assets/icons/caret-right.svg.js";
+import tr from "../../../../assets/icons/caret-left.svg.js";
+import er from "../../../../assets/icons/alert-circle.svg.js";
+import { formatDateToStringDate as or } from "../../../../helpers/dateFormatting.js";
+function C(t) {
+  if (!(t instanceof Date) || isNaN(t.getTime()))
+    return;
+  const o = [
+    String(t.getFullYear()).padStart(4, "0"),
+    String(t.getMonth() + 1).padStart(2, "0"),
+    String(t.getDate()).padStart(2, "0")
+  ].join("-");
+  return T(o);
+}
+function N(t) {
+  return t ? new Date(
+    t.year,
+    t.month - 1,
     // DateValue months are 1-indexed
-    e.day
+    t.day
   ) : null;
 }
-const pr = ({
-  className: e,
-  description: n,
+const Cr = ({
+  className: t,
+  description: o,
   errorMessage: l,
-  id: D,
-  inputRef: g,
-  isDisabled: v,
-  isInvalid: m,
-  isRequired: C,
-  label: s,
-  onChange: d,
-  onBlur: S,
+  id: y,
+  inputRef: I,
+  isDisabled: x,
+  isInvalid: s,
+  isRequired: P,
+  label: d,
+  onChange: m,
+  onBlur: j,
   value: p,
-  portalContainer: y,
-  ...I
+  portalContainer: w,
+  minDate: f,
+  maxDate: h,
+  isDateDisabled: u,
+  ...F
 }) => {
-  const { t: a } = H(), { inputId: h, errorMessageId: N, descriptionId: x, ariaDescribedBy: P } = U({
-    inputId: D,
+  const { t: a } = O(), { inputId: g, errorMessageId: b, descriptionId: k, ariaDescribedBy: A } = Q({
+    inputId: y,
     errorMessage: l,
-    description: n
-  }), { container: T } = $(), f = p ? Q(p) : "", w = f ? R(f) : null, b = (t) => {
-    d && d(W(t));
+    description: o
+  }), { container: B } = X(), D = p ? or(p) : "", L = D ? T(D) : null, M = f ? C(f) : void 0, E = h ? C(h) : void 0, G = u ? (e) => {
+    const v = N(e);
+    return v ? u(v) : !1;
+  } : void 0, U = (e) => {
+    m && m(N(e));
   };
   return /* @__PURE__ */ r(
-    _,
+    W,
     {
-      label: s,
-      htmlFor: h,
+      label: d,
+      htmlFor: g,
       errorMessage: l,
-      errorMessageId: N,
-      descriptionId: x,
-      isRequired: C,
-      description: n,
-      className: u(i.root, e),
+      errorMessageId: b,
+      descriptionId: k,
+      isRequired: P,
+      description: o,
+      className: S(i.root, t),
       withErrorIcon: !1,
-      children: /* @__PURE__ */ r("div", { className: i.container, children: /* @__PURE__ */ o(
-        k,
+      children: /* @__PURE__ */ r("div", { className: i.container, children: /* @__PURE__ */ n(
+        z,
         {
-          "aria-label": s,
-          "aria-describedby": P,
-          id: h,
-          isDisabled: v,
-          isInvalid: m,
-          value: w,
-          onChange: b,
-          ...I,
+          "aria-label": d,
+          "aria-describedby": A,
+          id: g,
+          isDisabled: x,
+          isInvalid: s,
+          value: L,
+          onChange: U,
+          minValue: M,
+          maxValue: E,
+          isDateUnavailable: G,
+          ...F,
           children: [
-            /* @__PURE__ */ o(A, { children: [
-              /* @__PURE__ */ r(B, { ref: g, children: (t) => /* @__PURE__ */ r(F, { segment: t }) }),
-              /* @__PURE__ */ o("div", { className: i.icons, children: [
-                m && /* @__PURE__ */ r(O, { "aria-hidden": "true", fontSize: 16 }),
-                /* @__PURE__ */ r(c, { onBlur: S, children: /* @__PURE__ */ r(q, { title: a("icons.calendarArrow") }) })
+            /* @__PURE__ */ n(H, { children: [
+              /* @__PURE__ */ r(R, { ref: I, children: (e) => /* @__PURE__ */ r(V, { segment: e }) }),
+              /* @__PURE__ */ n("div", { className: i.icons, children: [
+                s && /* @__PURE__ */ r(er, { "aria-hidden": "true", fontSize: 16 }),
+                /* @__PURE__ */ r(c, { onBlur: j, children: /* @__PURE__ */ r(Z, { title: a("icons.calendarArrow") }) })
               ] })
             ] }),
             /* @__PURE__ */ r(
-              L,
+              Y,
               {
-                className: u(i.popover, "react-aria-Popover"),
-                UNSTABLE_portalContainer: y || T.current,
-                children: /* @__PURE__ */ r(j, { children: /* @__PURE__ */ o(E, { children: [
-                  /* @__PURE__ */ o("header", { children: [
-                    /* @__PURE__ */ r(c, { slot: "previous", children: /* @__PURE__ */ r(K, { title: a("icons.previousMonth") }) }),
-                    /* @__PURE__ */ r(G, {}),
-                    /* @__PURE__ */ r(c, { slot: "next", children: /* @__PURE__ */ r(J, { title: a("icons.nextMonth") }) })
+                className: S(i.popover, "react-aria-Popover"),
+                UNSTABLE_portalContainer: w || B.current,
+                children: /* @__PURE__ */ r(_, { children: /* @__PURE__ */ n($, { children: [
+                  /* @__PURE__ */ n("header", { children: [
+                    /* @__PURE__ */ r(c, { slot: "previous", children: /* @__PURE__ */ r(tr, { title: a("icons.previousMonth") }) }),
+                    /* @__PURE__ */ r(q, {}),
+                    /* @__PURE__ */ r(c, { slot: "next", children: /* @__PURE__ */ r(rr, { title: a("icons.nextMonth") }) })
                   ] }),
-                  /* @__PURE__ */ r(M, { children: (t) => /* @__PURE__ */ r(z, { date: t }) })
+                  /* @__PURE__ */ r(J, { children: (e) => /* @__PURE__ */ r(K, { date: e }) })
                 ] }) })
               }
             )
@@ -98,6 +117,6 @@ const pr = ({
   );
 };
 export {
-  pr as DatePicker
+  Cr as DatePicker
 };
 //# sourceMappingURL=DatePicker.js.map

package/dist/components/Common/UI/DatePicker/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","sources":["../../../../../src/components/Common/UI/DatePicker/DatePicker.tsx"],"sourcesContent":["import {\n  DatePicker as AriaDatePicker,\n  Button,\n  Calendar,\n  CalendarCell,\n  CalendarGrid,\n  DateInput,\n  DateSegment,\n  Dialog,\n  Group,\n  Heading,\n  Popover,\n  type DateValue,\n} from 'react-aria-components'\nimport { useTranslation } from 'react-i18next'\nimport classNames from 'classnames'\nimport { parseDate } from '@internationalized/date'\nimport { useFieldIds } from '../hooks/useFieldIds'\nimport styles from './DatePicker.module.scss'\nimport type { DatePickerProps } from './DatePickerTypes'\nimport { FieldLayout } from '@/components/Common/FieldLayout'\nimport { useTheme } from '@/contexts/ThemeProvider'\nimport CaretDown from '@/assets/icons/caret-down.svg?react'\nimport CaretRight from '@/assets/icons/caret-right.svg?react'\nimport CaretLeft from '@/assets/icons/caret-left.svg?react'\nimport AlertCircle from '@/assets/icons/alert-circle.svg?react'\nimport { formatDateToStringDate } from '@/helpers/dateFormatting'\n\nfunction calendarDateValueToDate(dateValue: DateValue | null): Date | null {\n  if (!dateValue) return null\n\n  const date = new Date(\n    dateValue.year,\n    dateValue.month - 1, // DateValue months are 1-indexed\n    dateValue.day,\n  )\n\n  return date\n}\n\nexport const DatePicker = ({\n  className,\n  description,\n  errorMessage,\n  id,\n  inputRef,\n  isDisabled,\n  isInvalid,\n  isRequired,\n  label,\n  onChange,\n  onBlur,\n  value,\n  portalContainer,\n  ...props\n}: DatePickerProps) => {\n  const { t } = useTranslation()\n  const { inputId, errorMessageId, descriptionId, ariaDescribedBy } = useFieldIds({\n    inputId: id,\n    errorMessage,\n    description,\n  })\n  const { container } = useTheme()\n\n  // Convert JavaScript Date to DateValue for internal use\n  // Format the date as YYYY-MM-DD for parseDate\n  const formattedDate = value ? formatDateToStringDate(value) : ''\n  const internalValue = formattedDate ? parseDate(formattedDate) : null\n\n  // Handle internal onChange to convert DateValue back to Date\n  const handleChange = (dateValue: DateValue | null) => {\n    if (onChange) {\n      onChange(calendarDateValueToDate(dateValue))\n    }\n  }\n\n  return (\n    <FieldLayout\n      label={label}\n      htmlFor={inputId}\n      errorMessage={errorMessage}\n      errorMessageId={errorMessageId}\n      descriptionId={descriptionId}\n      isRequired={isRequired}\n      description={description}\n      className={classNames(styles.root, className)}\n      withErrorIcon={false}\n    >\n      <div className={styles.container}>\n        <AriaDatePicker\n          aria-label={label}\n          aria-describedby={ariaDescribedBy}\n          id={inputId}\n          isDisabled={isDisabled}\n          isInvalid={isInvalid}\n          value={internalValue}\n          onChange={handleChange}\n          {...props}\n        >\n          <Group>\n            <DateInput ref={inputRef}>{segment => <DateSegment segment={segment} />}</DateInput>\n\n            <div className={styles.icons}>\n              {isInvalid && <AlertCircle aria-hidden=\"true\" fontSize={16} />}\n              <Button onBlur={onBlur}>\n                <CaretDown title={t('icons.calendarArrow')} />\n              </Button>\n            </div>\n          </Group>\n          <Popover\n            className={classNames(styles.popover, 'react-aria-Popover')}\n            UNSTABLE_portalContainer={portalContainer || container.current}\n          >\n            <Dialog>\n              <Calendar>\n                <header>\n                  <Button slot=\"previous\">\n                    <CaretLeft title={t('icons.previousMonth')} />\n                  </Button>\n                  <Heading />\n                  <Button slot=\"next\">\n                    <CaretRight title={t('icons.nextMonth')} />\n                  </Button>\n                </header>\n                <CalendarGrid>{date => <CalendarCell date={date} />}</CalendarGrid>\n              </Calendar>\n            </Dialog>\n          </Popover>\n        </AriaDatePicker>\n      </div>\n    </FieldLayout>\n  )\n}\n"],"names":["calendarDateValueToDate","dateValue","DatePicker","className","description","errorMessage","id","inputRef","isDisabled","isInvalid","isRequired","label","onChange","onBlur","value","portalContainer","props","t","useTranslation","inputId","errorMessageId","descriptionId","ariaDescribedBy","useFieldIds","container","useTheme","formattedDate","formatDateToStringDate","internalValue","parseDate","handleChange","jsx","FieldLayout","classNames","styles","jsxs","AriaDatePicker","Group","DateInput","DateSegment","segment","AlertCircle","Button","CaretDown","Popover","Dialog","Calendar","CaretLeft","Heading","CaretRight","CalendarGrid","date","CalendarCell"],"mappings":"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"}
+{"version":3,"file":"DatePicker.js","sources":["../../../../../src/components/Common/UI/DatePicker/DatePicker.tsx"],"sourcesContent":["import {\n  DatePicker as AriaDatePicker,\n  Button,\n  Calendar,\n  CalendarCell,\n  CalendarGrid,\n  DateInput,\n  DateSegment,\n  Dialog,\n  Group,\n  Heading,\n  Popover,\n  type DateValue,\n} from 'react-aria-components'\nimport { useTranslation } from 'react-i18next'\nimport classNames from 'classnames'\nimport { parseDate, type CalendarDate } from '@internationalized/date'\nimport { useFieldIds } from '../hooks/useFieldIds'\nimport styles from './DatePicker.module.scss'\nimport type { DatePickerProps } from './DatePickerTypes'\nimport { FieldLayout } from '@/components/Common/FieldLayout'\nimport { useTheme } from '@/contexts/ThemeProvider'\nimport CaretDown from '@/assets/icons/caret-down.svg?react'\nimport CaretRight from '@/assets/icons/caret-right.svg?react'\nimport CaretLeft from '@/assets/icons/caret-left.svg?react'\nimport AlertCircle from '@/assets/icons/alert-circle.svg?react'\nimport { formatDateToStringDate } from '@/helpers/dateFormatting'\n\nfunction dateToCalendarDate(date: Date): CalendarDate | undefined {\n  if (!(date instanceof Date) || isNaN(date.getTime())) {\n    return undefined\n  }\n\n  // Use local date parts to avoid UTC timezone shift from toISOString()\n  const dateString = [\n    String(date.getFullYear()).padStart(4, '0'),\n    String(date.getMonth() + 1).padStart(2, '0'),\n    String(date.getDate()).padStart(2, '0'),\n  ].join('-')\n\n  return parseDate(dateString)\n}\n\nfunction calendarDateValueToDate(dateValue: DateValue | null): Date | null {\n  if (!dateValue) return null\n\n  const date = new Date(\n    dateValue.year,\n    dateValue.month - 1, // DateValue months are 1-indexed\n    dateValue.day,\n  )\n\n  return date\n}\n\nexport const DatePicker = ({\n  className,\n  description,\n  errorMessage,\n  id,\n  inputRef,\n  isDisabled,\n  isInvalid,\n  isRequired,\n  label,\n  onChange,\n  onBlur,\n  value,\n  portalContainer,\n  minDate,\n  maxDate,\n  isDateDisabled,\n  ...props\n}: DatePickerProps) => {\n  const { t } = useTranslation()\n  const { inputId, errorMessageId, descriptionId, ariaDescribedBy } = useFieldIds({\n    inputId: id,\n    errorMessage,\n    description,\n  })\n  const { container } = useTheme()\n\n  // Convert JavaScript Date to DateValue for internal use\n  // Format the date as YYYY-MM-DD for parseDate\n  const formattedDate = value ? formatDateToStringDate(value) : ''\n  const internalValue = formattedDate ? parseDate(formattedDate) : null\n\n  // Convert date constraint props to react-aria DateValue format\n  const minValue = minDate ? dateToCalendarDate(minDate) : undefined\n  const maxValue = maxDate ? dateToCalendarDate(maxDate) : undefined\n  const isDateUnavailable = isDateDisabled\n    ? (dateValue: DateValue) => {\n        const jsDate = calendarDateValueToDate(dateValue)\n        return jsDate ? isDateDisabled(jsDate) : false\n      }\n    : undefined\n\n  // Handle internal onChange to convert DateValue back to Date\n  const handleChange = (dateValue: DateValue | null) => {\n    if (onChange) {\n      onChange(calendarDateValueToDate(dateValue))\n    }\n  }\n\n  return (\n    <FieldLayout\n      label={label}\n      htmlFor={inputId}\n      errorMessage={errorMessage}\n      errorMessageId={errorMessageId}\n      descriptionId={descriptionId}\n      isRequired={isRequired}\n      description={description}\n      className={classNames(styles.root, className)}\n      withErrorIcon={false}\n    >\n      <div className={styles.container}>\n        <AriaDatePicker\n          aria-label={label}\n          aria-describedby={ariaDescribedBy}\n          id={inputId}\n          isDisabled={isDisabled}\n          isInvalid={isInvalid}\n          value={internalValue}\n          onChange={handleChange}\n          minValue={minValue}\n          maxValue={maxValue}\n          isDateUnavailable={isDateUnavailable}\n          {...props}\n        >\n          <Group>\n            <DateInput ref={inputRef}>{segment => <DateSegment segment={segment} />}</DateInput>\n\n            <div className={styles.icons}>\n              {isInvalid && <AlertCircle aria-hidden=\"true\" fontSize={16} />}\n              <Button onBlur={onBlur}>\n                <CaretDown title={t('icons.calendarArrow')} />\n              </Button>\n            </div>\n          </Group>\n          <Popover\n            className={classNames(styles.popover, 'react-aria-Popover')}\n            UNSTABLE_portalContainer={portalContainer || container.current}\n          >\n            <Dialog>\n              <Calendar>\n                <header>\n                  <Button slot=\"previous\">\n                    <CaretLeft title={t('icons.previousMonth')} />\n                  </Button>\n                  <Heading />\n                  <Button slot=\"next\">\n                    <CaretRight title={t('icons.nextMonth')} />\n                  </Button>\n                </header>\n                <CalendarGrid>{date => <CalendarCell date={date} />}</CalendarGrid>\n              </Calendar>\n            </Dialog>\n          </Popover>\n        </AriaDatePicker>\n      </div>\n    </FieldLayout>\n  )\n}\n"],"names":["dateToCalendarDate","date","dateString","parseDate","calendarDateValueToDate","dateValue","DatePicker","className","description","errorMessage","id","inputRef","isDisabled","isInvalid","isRequired","label","onChange","onBlur","value","portalContainer","minDate","maxDate","isDateDisabled","props","t","useTranslation","inputId","errorMessageId","descriptionId","ariaDescribedBy","useFieldIds","container","useTheme","formattedDate","formatDateToStringDate","internalValue","minValue","maxValue","isDateUnavailable","jsDate","handleChange","jsx","FieldLayout","classNames","styles","jsxs","AriaDatePicker","Group","DateInput","DateSegment","segment","AlertCircle","Button","CaretDown","Popover","Dialog","Calendar","CaretLeft","Heading","CaretRight","CalendarGrid","CalendarCell"],"mappings":"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"}

package/dist/components/Common/UI/DatePicker/DatePickerTypes.d.ts

@@ -37,4 +37,17 @@ export interface DatePickerProps extends SharedFieldLayoutProps, Pick<InputHTMLA
      * Element to use as the portal container
      */
     portalContainer?: HTMLElement;
+    /**
+     * Minimum selectable date. Dates before this will be disabled.
+     */
+    minDate?: Date;
+    /**
+     * Maximum selectable date. Dates after this will be disabled.
+     */
+    maxDate?: Date;
+    /**
+     * Callback to determine if a specific date should be disabled.
+     * Return true to disable the date.
+     */
+    isDateDisabled?: (date: Date) => boolean;
 }

package/dist/components/Common/UI/DateRangePicker/DateRangePicker.d.ts

@@ -0,0 +1,2 @@
+import { DateRangePickerProps } from './DateRangePickerTypes';
+export declare const DateRangePicker: ({ label, value, onChange, startDateLabel, endDateLabel, minValue: minDate, maxValue: maxDate, }: DateRangePickerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Common/UI/DateRangePicker/DateRangePicker.js

@@ -0,0 +1,74 @@
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { DateRangePicker as I, Group as R, DateInput as p, DateSegment as u, RangeCalendar as x, Button as h, Heading as y, CalendarGrid as G, CalendarCell as j } from "react-aria-components";
+import { parseDate as k } from "@internationalized/date";
+import a from "./DateRangePicker.module.scss.js";
+import B from "../../../../assets/icons/caret-left.svg.js";
+import H from "../../../../assets/icons/caret-right.svg.js";
+function l(n) {
+  if (!(n instanceof Date) || isNaN(n.getTime())) return;
+  const r = [
+    String(n.getFullYear()).padStart(4, "0"),
+    String(n.getMonth() + 1).padStart(2, "0"),
+    String(n.getDate()).padStart(2, "0")
+  ].join("-");
+  return k(r);
+}
+function g(n) {
+  return new Date(n.year, n.month - 1, n.day);
+}
+const F = ({
+  label: n,
+  value: r,
+  onChange: d,
+  startDateLabel: N,
+  endDateLabel: f,
+  minValue: i,
+  maxValue: c
+}) => {
+  const o = r ? l(r.start) : void 0, m = r ? l(r.end) : void 0, C = o && m ? { start: o, end: m } : null, v = i ? l(i) : void 0, S = c ? l(c) : void 0;
+  return /* @__PURE__ */ s(
+    I,
+    {
+      value: C,
+      onChange: (t) => {
+        if (t) {
+          const D = {
+            start: g(t.start),
+            end: g(t.end)
+          };
+          d(D);
+        } else
+          d(null);
+      },
+      minValue: v,
+      maxValue: S,
+      "aria-label": typeof n == "string" ? n : void 0,
+      className: a.root,
+      children: [
+        /* @__PURE__ */ s(R, { className: a.dateInputGroup, children: [
+          /* @__PURE__ */ s("div", { className: a.dateInputWrapper, children: [
+            /* @__PURE__ */ e("span", { className: a.dateInputLabel, children: N }),
+            /* @__PURE__ */ e(p, { slot: "start", className: a.dateInput, children: (t) => /* @__PURE__ */ e(u, { segment: t }) })
+          ] }),
+          /* @__PURE__ */ e("span", { className: a.rangeSeparator, "aria-hidden": "true", children: "–" }),
+          /* @__PURE__ */ s("div", { className: a.dateInputWrapper, children: [
+            /* @__PURE__ */ e("span", { className: a.dateInputLabel, children: f }),
+            /* @__PURE__ */ e(p, { slot: "end", className: a.dateInput, children: (t) => /* @__PURE__ */ e(u, { segment: t }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ s(x, { className: a.rangeCalendar, children: [
+          /* @__PURE__ */ s("header", { className: a.calendarHeader, children: [
+            /* @__PURE__ */ e(h, { slot: "previous", className: a.calendarNavButton, children: /* @__PURE__ */ e(B, { "aria-hidden": !0 }) }),
+            /* @__PURE__ */ e(y, { className: a.calendarHeading }),
+            /* @__PURE__ */ e(h, { slot: "next", className: a.calendarNavButton, children: /* @__PURE__ */ e(H, { "aria-hidden": !0 }) })
+          ] }),
+          /* @__PURE__ */ e(G, { className: a.calendarGrid, children: (t) => /* @__PURE__ */ e(j, { date: t, className: a.calendarCell }) })
+        ] })
+      ]
+    }
+  );
+};
+export {
+  F as DateRangePicker
+};
+//# sourceMappingURL=DateRangePicker.js.map

package/dist/components/Common/UI/DateRangePicker/DateRangePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateRangePicker.js","sources":["../../../../../src/components/Common/UI/DateRangePicker/DateRangePicker.tsx"],"sourcesContent":["import {\n  DateRangePicker as AriaDateRangePicker,\n  Button as AriaButton,\n  CalendarCell,\n  CalendarGrid,\n  DateInput,\n  DateSegment,\n  Group,\n  Heading,\n  RangeCalendar,\n  type DateValue,\n} from 'react-aria-components'\nimport { parseDate, type CalendarDate } from '@internationalized/date'\nimport type { DateRange, DateRangePickerProps } from './DateRangePickerTypes'\nimport styles from './DateRangePicker.module.scss'\nimport CaretLeft from '@/assets/icons/caret-left.svg?react'\nimport CaretRight from '@/assets/icons/caret-right.svg?react'\n\nfunction dateToCalendarDate(date: Date): CalendarDate | undefined {\n  if (!(date instanceof Date) || isNaN(date.getTime())) return undefined\n\n  const dateString = [\n    String(date.getFullYear()).padStart(4, '0'),\n    String(date.getMonth() + 1).padStart(2, '0'),\n    String(date.getDate()).padStart(2, '0'),\n  ].join('-')\n\n  return parseDate(dateString)\n}\n\nfunction calendarDateToJsDate(dateValue: DateValue): Date {\n  return new Date(dateValue.year, dateValue.month - 1, dateValue.day)\n}\n\nexport const DateRangePicker = ({\n  label,\n  value,\n  onChange,\n  startDateLabel,\n  endDateLabel,\n  minValue: minDate,\n  maxValue: maxDate,\n}: DateRangePickerProps) => {\n  const startCalendar = value ? dateToCalendarDate(value.start) : undefined\n  const endCalendar = value ? dateToCalendarDate(value.end) : undefined\n\n  const ariaValue = startCalendar && endCalendar ? { start: startCalendar, end: endCalendar } : null\n\n  const minValue = minDate ? dateToCalendarDate(minDate) : undefined\n  const maxValue = maxDate ? dateToCalendarDate(maxDate) : undefined\n\n  const handleRangeChange = (range: { start: DateValue; end: DateValue } | null) => {\n    if (range) {\n      const newRange: DateRange = {\n        start: calendarDateToJsDate(range.start),\n        end: calendarDateToJsDate(range.end),\n      }\n      onChange(newRange)\n    } else {\n      onChange(null)\n    }\n  }\n\n  return (\n    <AriaDateRangePicker\n      value={ariaValue}\n      onChange={handleRangeChange}\n      minValue={minValue}\n      maxValue={maxValue}\n      aria-label={typeof label === 'string' ? label : undefined}\n      className={styles.root}\n    >\n      <Group className={styles.dateInputGroup}>\n        <div className={styles.dateInputWrapper}>\n          <span className={styles.dateInputLabel}>{startDateLabel}</span>\n          <DateInput slot=\"start\" className={styles.dateInput}>\n            {segment => <DateSegment segment={segment} />}\n          </DateInput>\n        </div>\n        <span className={styles.rangeSeparator} aria-hidden=\"true\">\n          –\n        </span>\n        <div className={styles.dateInputWrapper}>\n          <span className={styles.dateInputLabel}>{endDateLabel}</span>\n          <DateInput slot=\"end\" className={styles.dateInput}>\n            {segment => <DateSegment segment={segment} />}\n          </DateInput>\n        </div>\n      </Group>\n\n      <RangeCalendar className={styles.rangeCalendar}>\n        <header className={styles.calendarHeader}>\n          <AriaButton slot=\"previous\" className={styles.calendarNavButton}>\n            <CaretLeft aria-hidden />\n          </AriaButton>\n          <Heading className={styles.calendarHeading} />\n          <AriaButton slot=\"next\" className={styles.calendarNavButton}>\n            <CaretRight aria-hidden />\n          </AriaButton>\n        </header>\n        <CalendarGrid className={styles.calendarGrid}>\n          {date => <CalendarCell date={date} className={styles.calendarCell} />}\n        </CalendarGrid>\n      </RangeCalendar>\n    </AriaDateRangePicker>\n  )\n}\n"],"names":["dateToCalendarDate","date","dateString","parseDate","calendarDateToJsDate","dateValue","DateRangePicker","label","value","onChange","startDateLabel","endDateLabel","minDate","maxDate","startCalendar","endCalendar","ariaValue","minValue","maxValue","jsxs","AriaDateRangePicker","range","newRange","styles","Group","jsx","DateInput","segment","DateSegment","RangeCalendar","AriaButton","CaretLeft","Heading","CaretRight","CalendarGrid","CalendarCell"],"mappings":";;;;;;AAkBA,SAASA,EAAmBC,GAAsC;AAChE,MAAI,EAAEA,aAAgB,SAAS,MAAMA,EAAK,QAAA,CAAS,EAAG;AAEtD,QAAMC,IAAa;AAAA,IACjB,OAAOD,EAAK,YAAA,CAAa,EAAE,SAAS,GAAG,GAAG;AAAA,IAC1C,OAAOA,EAAK,SAAA,IAAa,CAAC,EAAE,SAAS,GAAG,GAAG;AAAA,IAC3C,OAAOA,EAAK,QAAA,CAAS,EAAE,SAAS,GAAG,GAAG;AAAA,EAAA,EACtC,KAAK,GAAG;AAEV,SAAOE,EAAUD,CAAU;AAC7B;AAEA,SAASE,EAAqBC,GAA4B;AACxD,SAAO,IAAI,KAAKA,EAAU,MAAMA,EAAU,QAAQ,GAAGA,EAAU,GAAG;AACpE;AAEO,MAAMC,IAAkB,CAAC;AAAA,EAC9B,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAUC;AAAA,EACV,UAAUC;AACZ,MAA4B;AAC1B,QAAMC,IAAgBN,IAAQR,EAAmBQ,EAAM,KAAK,IAAI,QAC1DO,IAAcP,IAAQR,EAAmBQ,EAAM,GAAG,IAAI,QAEtDQ,IAAYF,KAAiBC,IAAc,EAAE,OAAOD,GAAe,KAAKC,MAAgB,MAExFE,IAAWL,IAAUZ,EAAmBY,CAAO,IAAI,QACnDM,IAAWL,IAAUb,EAAmBa,CAAO,IAAI;AAczD,SACE,gBAAAM;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,OAAOJ;AAAA,MACP,UAfsB,CAACK,MAAuD;AAChF,YAAIA,GAAO;AACT,gBAAMC,IAAsB;AAAA,YAC1B,OAAOlB,EAAqBiB,EAAM,KAAK;AAAA,YACvC,KAAKjB,EAAqBiB,EAAM,GAAG;AAAA,UAAA;AAErC,UAAAZ,EAASa,CAAQ;AAAA,QACnB;AACE,UAAAb,EAAS,IAAI;AAAA,MAEjB;AAAA,MAMI,UAAAQ;AAAA,MACA,UAAAC;AAAA,MACA,cAAY,OAAOX,KAAU,WAAWA,IAAQ;AAAA,MAChD,WAAWgB,EAAO;AAAA,MAElB,UAAA;AAAA,QAAA,gBAAAJ,EAACK,GAAA,EAAM,WAAWD,EAAO,gBACvB,UAAA;AAAA,UAAA,gBAAAJ,EAAC,OAAA,EAAI,WAAWI,EAAO,kBACrB,UAAA;AAAA,YAAA,gBAAAE,EAAC,QAAA,EAAK,WAAWF,EAAO,gBAAiB,UAAAb,GAAe;AAAA,YACxD,gBAAAe,EAACC,GAAA,EAAU,MAAK,SAAQ,WAAWH,EAAO,WACvC,UAAA,CAAAI,MAAW,gBAAAF,EAACG,GAAA,EAAY,SAAAD,EAAA,CAAkB,EAAA,CAC7C;AAAA,UAAA,GACF;AAAA,4BACC,QAAA,EAAK,WAAWJ,EAAO,gBAAgB,eAAY,QAAO,UAAA,KAE3D;AAAA,UACA,gBAAAJ,EAAC,OAAA,EAAI,WAAWI,EAAO,kBACrB,UAAA;AAAA,YAAA,gBAAAE,EAAC,QAAA,EAAK,WAAWF,EAAO,gBAAiB,UAAAZ,GAAa;AAAA,YACtD,gBAAAc,EAACC,GAAA,EAAU,MAAK,OAAM,WAAWH,EAAO,WACrC,UAAA,CAAAI,MAAW,gBAAAF,EAACG,GAAA,EAAY,SAAAD,EAAA,CAAkB,EAAA,CAC7C;AAAA,UAAA,EAAA,CACF;AAAA,QAAA,GACF;AAAA,QAEA,gBAAAR,EAACU,GAAA,EAAc,WAAWN,EAAO,eAC/B,UAAA;AAAA,UAAA,gBAAAJ,EAAC,UAAA,EAAO,WAAWI,EAAO,gBACxB,UAAA;AAAA,YAAA,gBAAAE,EAACK,GAAA,EAAW,MAAK,YAAW,WAAWP,EAAO,mBAC5C,UAAA,gBAAAE,EAACM,GAAA,EAAU,eAAW,GAAA,CAAC,EAAA,CACzB;AAAA,YACA,gBAAAN,EAACO,GAAA,EAAQ,WAAWT,EAAO,gBAAA,CAAiB;AAAA,YAC5C,gBAAAE,EAACK,GAAA,EAAW,MAAK,QAAO,WAAWP,EAAO,mBACxC,UAAA,gBAAAE,EAACQ,GAAA,EAAW,eAAW,GAAA,CAAC,EAAA,CAC1B;AAAA,UAAA,GACF;AAAA,UACA,gBAAAR,EAACS,GAAA,EAAa,WAAWX,EAAO,cAC7B,UAAA,CAAAtB,MAAQ,gBAAAwB,EAACU,GAAA,EAAa,MAAAlC,GAAY,WAAWsB,EAAO,aAAA,CAAc,EAAA,CACrE;AAAA,QAAA,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/Common/UI/DateRangePicker/DateRangePicker.module.scss.js

@@ -0,0 +1,30 @@
+const a = "_root_1ijh5_1", e = "_dateInputGroup_1ijh5_5", n = "_dateInputWrapper_1ijh5_11", t = "_dateInputLabel_1ijh5_18", r = "_dateInput_1ijh5_5", d = "_rangeSeparator_1ijh5_64", _ = "_rangeCalendar_1ijh5_69", l = "_calendarHeader_1ijh5_78", o = "_calendarHeading_1ijh5_84", c = "_calendarNavButton_1ijh5_91", p = "_calendarGrid_1ijh5_112", u = "_calendarCell_1ijh5_156", i = {
+  root: a,
+  dateInputGroup: e,
+  dateInputWrapper: n,
+  dateInputLabel: t,
+  dateInput: r,
+  rangeSeparator: d,
+  rangeCalendar: _,
+  calendarHeader: l,
+  calendarHeading: o,
+  calendarNavButton: c,
+  calendarGrid: p,
+  calendarCell: u
+};
+export {
+  u as calendarCell,
+  p as calendarGrid,
+  l as calendarHeader,
+  o as calendarHeading,
+  c as calendarNavButton,
+  r as dateInput,
+  e as dateInputGroup,
+  t as dateInputLabel,
+  n as dateInputWrapper,
+  i as default,
+  _ as rangeCalendar,
+  d as rangeSeparator,
+  a as root
+};
+//# sourceMappingURL=DateRangePicker.module.scss.js.map

package/dist/components/Common/UI/DateRangePicker/DateRangePicker.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateRangePicker.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}

package/dist/components/Common/UI/DateRangePicker/DateRangePickerTypes.d.ts

@@ -0,0 +1,14 @@
+export interface DateRange {
+    start: Date;
+    end: Date;
+}
+export interface DateRangePickerProps {
+    label: string;
+    shouldVisuallyHideLabel?: boolean;
+    value: DateRange | null;
+    onChange: (range: DateRange | null) => void;
+    startDateLabel: string;
+    endDateLabel: string;
+    minValue?: Date;
+    maxValue?: Date;
+}

package/dist/components/Common/UI/DateRangePicker/index.d.ts

@@ -0,0 +1,2 @@
+import "./types/i18next.d.ts"
+export * from './DateRangePicker';

package/dist/components/Common/UI/DescriptionList/DescriptionList.module.scss.js

@@ -1,9 +1,9 @@
-const t = "_root_1iaua_1", o = "_item_1iaua_12", a = {
+const t = "_root_znlj6_1", o = "_item_znlj6_13", e = {
   root: t,
   item: o
 };
 export {
-  a as default,
+  e as default,
   o as item,
   t as root
 };

package/dist/components/Common/UI/Heading/Heading.d.ts

@@ -1,2 +1,2 @@
 import { HeadingProps } from './HeadingTypes';
-export declare const Heading: ({ as: Component, styledAs, textAlign, className, children, }: HeadingProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Heading: ({ as: Component, styledAs, textAlign, className, children, id, }: HeadingProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Common/UI/Heading/Heading.js

@@ -1,21 +1,23 @@
-import { jsx as a } from "react/jsx-runtime";
-import i from "classnames";
+import { jsx as i } from "react/jsx-runtime";
+import c from "classnames";
 import s from "./Heading.module.scss.js";
-const p = ({
+const x = ({
   as: t,
   styledAs: r,
   textAlign: e,
   className: o,
-  children: l
+  children: l,
+  id: m
 }) => {
-  const m = r ?? t;
-  return /* @__PURE__ */ a(
+  const a = r ?? t;
+  return /* @__PURE__ */ i(
     t,
     {
-      className: i(
+      id: m,
+      className: c(
         o,
         s.root,
-        s[m],
+        s[a],
         s[`textAlign-${e}`]
       ),
       children: l
@@ -23,6 +25,6 @@ const p = ({
   );
 };
 export {
-  p as Heading
+  x as Heading
 };
 //# sourceMappingURL=Heading.js.map

package/dist/components/Common/UI/Heading/Heading.js.map

@@ -1 +1 @@
-{"version":3,"file":"Heading.js","sources":["../../../../../src/components/Common/UI/Heading/Heading.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport type { HeadingProps } from './HeadingTypes'\nimport styles from './Heading.module.scss'\n\nexport const Heading = ({\n  as: Component,\n  styledAs,\n  textAlign,\n  className,\n  children,\n}: HeadingProps) => {\n  const levelStyles = styledAs ?? Component\n\n  return (\n    <Component\n      className={classNames(\n        className,\n        styles.root,\n        styles[levelStyles as string],\n        styles[`textAlign-${textAlign}`],\n      )}\n    >\n      {children}\n    </Component>\n  )\n}\n"],"names":["Heading","Component","styledAs","textAlign","className","children","levelStyles","jsx","classNames","styles"],"mappings":";;;AAIO,MAAMA,IAAU,CAAC;AAAA,EACtB,IAAIC;AAAA,EACJ,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AACF,MAAoB;AAClB,QAAMC,IAAcJ,KAAYD;AAEhC,SACE,gBAAAM;AAAA,IAACN;AAAA,IAAA;AAAA,MACC,WAAWO;AAAA,QACTJ;AAAA,QACAK,EAAO;AAAA,QACPA,EAAOH,CAAqB;AAAA,QAC5BG,EAAO,aAAaN,CAAS,EAAE;AAAA,MAAA;AAAA,MAGhC,UAAAE;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"Heading.js","sources":["../../../../../src/components/Common/UI/Heading/Heading.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport type { HeadingProps } from './HeadingTypes'\nimport styles from './Heading.module.scss'\n\nexport const Heading = ({\n  as: Component,\n  styledAs,\n  textAlign,\n  className,\n  children,\n  id,\n}: HeadingProps) => {\n  const levelStyles = styledAs ?? Component\n\n  return (\n    <Component\n      id={id}\n      className={classNames(\n        className,\n        styles.root,\n        styles[levelStyles as string],\n        styles[`textAlign-${textAlign}`],\n      )}\n    >\n      {children}\n    </Component>\n  )\n}\n"],"names":["Heading","Component","styledAs","textAlign","className","children","id","levelStyles","jsx","classNames","styles"],"mappings":";;;AAIO,MAAMA,IAAU,CAAC;AAAA,EACtB,IAAIC;AAAA,EACJ,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,IAAAC;AACF,MAAoB;AAClB,QAAMC,IAAcL,KAAYD;AAEhC,SACE,gBAAAO;AAAA,IAACP;AAAA,IAAA;AAAA,MACC,IAAAK;AAAA,MACA,WAAWG;AAAA,QACTL;AAAA,QACAM,EAAO;AAAA,QACPA,EAAOH,CAAqB;AAAA,QAC5BG,EAAO,aAAaP,CAAS,EAAE;AAAA,MAAA;AAAA,MAGhC,UAAAE;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/components/Common/UI/Heading/HeadingTypes.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes, ReactNode } from 'react';
-export interface HeadingProps extends Pick<HTMLAttributes<HTMLHeadingElement>, 'className'> {
+export interface HeadingProps extends Pick<HTMLAttributes<HTMLHeadingElement>, 'className' | 'id'> {
     /**
      * The HTML heading element to render (h1-h6)
      */

package/dist/components/Common/UI/Menu/Menu.module.scss.js

@@ -1,12 +1,12 @@
-const o = "_root_1t1om_1", t = "_menuItem_1t1om_13", n = "_menuIcon_1t1om_44", e = {
+const o = "_root_1wkci_1", n = "_menuItem_1wkci_10", t = "_menuIcon_1wkci_49", e = {
   root: o,
-  menuItem: t,
-  menuIcon: n
+  menuItem: n,
+  menuIcon: t
 };
 export {
   e as default,
-  n as menuIcon,
-  t as menuItem,
+  t as menuIcon,
+  n as menuItem,
   o as root
 };
 //# sourceMappingURL=Menu.module.scss.js.map