@gusto/embedded-react-sdk 0.52.2 → 0.53.0

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # Changelog
 
+## [0.53.0](https://github.com/Gusto/embedded-react-sdk/compare/v0.52.2...v0.53.0) (2026-07-24)
+
+### ⚠ Breaking Changes
+
+- **`BoxProps.children` is now optional** ([#2427](https://github.com/Gusto/embedded-react-sdk/issues/2427)). If you have a custom `Box` adapter with `children` typed as required, update it to accept `undefined`:
+
+  ```diff
+   interface BoxProps {
+  -  children: ReactNode
+  +  children?: ReactNode
+   }
+  ```
+
+  Runtime behavior is unchanged — React renders nothing when `children` is `undefined`.
+
+### Features & Enhancements
+
+- `StateTaxes` gained a "Manage tax rates" view showing each state's effective-dated rate history (current, scheduled, and historical), with the ability to schedule a new rate for a future effective date. ([#2462](https://github.com/Gusto/embedded-react-sdk/issues/2462))
+- `GustoProvider` and `GustoProviderCustomUIAdapter` accept a new `nonce` prop for partners with a strict `style-src 'nonce-…'` Content Security Policy, so the SDK's runtime-injected styles no longer require `unsafe-inline`. The nonce is also exposed to custom UI components via a new `useNonce` hook. ([#2191](https://github.com/Gusto/embedded-react-sdk/issues/2191))
+- `PaymentMethod` onboarding now shows the bank account form inline when Direct Deposit is selected, instead of requiring an extra click to reveal it. ([#2420](https://github.com/Gusto/embedded-react-sdk/issues/2420))
+- Added `ContractorManagement.ContractorList`, a tabbed (Active/Onboarding/Dismissed) contractor list for management flows with view, dismiss, rehire, and cancel-dismissal/cancel-rehire actions. ([#2443](https://github.com/Gusto/embedded-react-sdk/issues/2443))
+
+### Fixes
+
+- Fixed off-by-one date bugs across `DatePicker` defaults and date serialization, where dates near a timezone boundary could display or submit one day off. ([#2430](https://github.com/Gusto/embedded-react-sdk/issues/2430))
+- Fixed an off-by-one bug in `StateTaxes`' effective date display. ([#2429](https://github.com/Gusto/embedded-react-sdk/issues/2429))
+- The "Continue" button in `PaymentMethod` onboarding is now disabled when Direct Deposit is selected but no bank account has been added yet. ([#2419](https://github.com/Gusto/embedded-react-sdk/issues/2419))
+- Field-level errors returned by the API are now cleared as soon as the user edits the field, instead of persisting until the next submit. ([#2415](https://github.com/Gusto/embedded-react-sdk/issues/2415))
+- `BankAccount`, `DocumentSigner`, and `PaySchedule` no longer get stuck read-only after their "done" event fires — they remain editable, matching `StateTaxes`. ([#2428](https://github.com/Gusto/embedded-react-sdk/issues/2428))
+- `PayrollList` filters now apply and display a sensible default date range instead of an empty one. ([#2441](https://github.com/Gusto/embedded-react-sdk/issues/2441))
+
+### Chores & Maintenance
+
+- Bump dev dependencies (`storybook` and its addons, `typescript-eslint`, `@typescript-eslint/rule-tester`, `@microsoft/api-extractor`, `prettier`, `markdownlint-cli2`, `eslint-plugin-storybook`, `axios`)
+- Bump dependencies (`react-i18next`, `react-hook-form`, `js-yaml`, `shell-quote`)
+
 ## [0.52.2](https://github.com/Gusto/embedded-react-sdk/compare/v0.52.1...v0.52.2) (2026-07-17)
 
 ### Features & Enhancements

package/dist/components/Common/DateRangeFilter/DateRangeFilter.d.ts

@@ -11,10 +11,9 @@ interface DateRangeFilterProps {
     resetLabel: string;
     selectDatesLabel: string;
     triggerLabel: string;
-    isFilterActive: boolean;
     maxEndDate?: Date;
     minStartDate?: Date;
 }
 /** @internal */
-export declare const DateRangeFilter: ({ startDate, endDate, onStartDateChange, onEndDateChange, onClear, startDateLabel, endDateLabel, applyLabel, cancelLabel, resetLabel, selectDatesLabel, triggerLabel, isFilterActive, maxEndDate, minStartDate, }: DateRangeFilterProps) => import("react").JSX.Element;
+export declare const DateRangeFilter: ({ startDate, endDate, onStartDateChange, onEndDateChange, onClear, startDateLabel, endDateLabel, applyLabel, cancelLabel, resetLabel, selectDatesLabel, triggerLabel, maxEndDate, minStartDate, }: DateRangeFilterProps) => import("react").JSX.Element;
 export {};

package/dist/components/Common/DateRangeFilter/DateRangeFilter.js

@@ -1,13 +1,13 @@
-import { jsxs as a, Fragment as I, jsx as e } from "react/jsx-runtime";
-import { useState as R, useRef as M, useCallback as l, useMemo as _ } from "react";
-import { Popover as q, Dialog as z } from "react-aria-components";
+import { jsxs as a, Fragment as H, jsx as e } from "react/jsx-runtime";
+import { useState as y, useRef as I, useCallback as l, useMemo as M } from "react";
+import { Popover as _, Dialog as q } from "react-aria-components";
 import s from "./DateRangeFilter.module.scss.js";
-import { Flex as x } from "../Flex/Flex.js";
-import { useComponentContext as E } from "../../../contexts/ComponentAdapter/useComponentContext.js";
-import { useTheme as G } from "../../../contexts/ThemeProvider/useTheme.js";
+import { Flex as R } from "../Flex/Flex.js";
+import { useComponentContext as z } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useTheme as E } from "../../../contexts/ThemeProvider/useTheme.js";
 /* empty css                       */
-import J from "../../../assets/icons/filter-funnel.svg.js";
-const k = (n) => n.toLocaleDateString("en-US", { month: "short", day: "numeric" }), ne = ({
+import G from "../../../assets/icons/filter-funnel.svg.js";
+const x = (n) => n.toLocaleDateString("en-US", { month: "short", day: "numeric" }), ee = ({
   startDate: n,
   endDate: o,
   onStartDateChange: d,
@@ -16,71 +16,70 @@ const k = (n) => n.toLocaleDateString("en-US", { month: "short", day: "numeric"
   startDateLabel: c,
   endDateLabel: m,
   applyLabel: F,
-  cancelLabel: $,
-  resetLabel: b,
-  selectDatesLabel: N,
-  triggerLabel: j,
-  isFilterActive: g,
-  maxEndDate: B,
-  minStartDate: O
+  cancelLabel: k,
+  resetLabel: $,
+  selectDatesLabel: b,
+  triggerLabel: N,
+  maxEndDate: j,
+  minStartDate: B
 }) => {
-  const { Button: t, DateRangePicker: S } = E(), { container: P } = G(), [C, p] = R(!1), [r, u] = R(null), v = M(null), U = l(() => {
+  const { Button: t, DateRangePicker: O } = z(), { container: S } = E(), [g, p] = y(!1), [r, u] = y(null), v = I(null), P = l(() => {
     u(n && o ? { start: n, end: o } : null), p(!0);
-  }, [n, o]), y = l(() => {
+  }, [n, o]), C = l(() => {
     p(!1);
-  }, []), V = l(() => {
+  }, []), U = l(() => {
     r ? (d(r.start), f(r.end)) : h(), p(!1);
-  }, [r, d, f, h]), T = l(() => {
+  }, [r, d, f, h]), V = l(() => {
     u(null);
-  }, []), w = l((i) => {
+  }, []), A = l((i) => {
     u(i);
-  }, []), A = _(() => !g || !n || !o ? null : `${k(n)} – ${k(o)}`, [g, n, o]), H = /* @__PURE__ */ e(
+  }, []), T = M(() => !n || !o ? null : `${x(n)} – ${x(o)}`, [n, o]), w = /* @__PURE__ */ e(
     t,
     {
       buttonRef: v,
-      "aria-label": j,
+      "aria-label": N,
       "aria-haspopup": "dialog",
-      "aria-expanded": C,
-      onClick: U,
+      "aria-expanded": g,
+      onClick: P,
       variant: "secondary",
-      icon: /* @__PURE__ */ e(J, {}),
+      icon: /* @__PURE__ */ e(G, {}),
       className: s.triggerButton,
-      children: A ?? N
+      children: T ?? b
     }
   );
-  return /* @__PURE__ */ a(I, { children: [
-    H,
+  return /* @__PURE__ */ a(H, { children: [
+    w,
     /* @__PURE__ */ e(
-      q,
+      _,
       {
-        UNSTABLE_portalContainer: P.current ?? void 0,
-        isOpen: C,
+        UNSTABLE_portalContainer: S.current ?? void 0,
+        isOpen: g,
         onOpenChange: (i) => {
-          i || y();
+          i || C();
         },
         triggerRef: v,
         placement: "bottom end",
         offset: 8,
         shouldUpdatePosition: !0,
-        children: /* @__PURE__ */ a(z, { className: s.dialog, "aria-label": `${c} – ${m}`, children: [
+        children: /* @__PURE__ */ a(q, { className: s.dialog, "aria-label": `${c} – ${m}`, children: [
           /* @__PURE__ */ e("div", { className: s.popoverContent, children: /* @__PURE__ */ e(
-            S,
+            O,
             {
               label: `${c} – ${m}`,
               shouldVisuallyHideLabel: !0,
               value: r,
-              onChange: w,
+              onChange: A,
               startDateLabel: c,
               endDateLabel: m,
-              minValue: O,
-              maxValue: B
+              minValue: B,
+              maxValue: j
             }
           ) }),
-          /* @__PURE__ */ e("div", { className: s.popoverFooter, children: /* @__PURE__ */ a(x, { gap: 8, justifyContent: "space-between", children: [
-            /* @__PURE__ */ e(t, { variant: "tertiary", onClick: T, children: b }),
-            /* @__PURE__ */ a(x, { gap: 8, justifyContent: "flex-end", children: [
-              /* @__PURE__ */ e(t, { variant: "secondary", onClick: y, children: $ }),
-              /* @__PURE__ */ e(t, { variant: "primary", onClick: V, children: F })
+          /* @__PURE__ */ e("div", { className: s.popoverFooter, children: /* @__PURE__ */ a(R, { gap: 8, justifyContent: "space-between", children: [
+            /* @__PURE__ */ e(t, { variant: "tertiary", onClick: V, children: $ }),
+            /* @__PURE__ */ a(R, { gap: 8, justifyContent: "flex-end", children: [
+              /* @__PURE__ */ e(t, { variant: "secondary", onClick: C, children: k }),
+              /* @__PURE__ */ e(t, { variant: "primary", onClick: U, children: F })
             ] })
           ] }) })
         ] })
@@ -89,6 +88,6 @@ const k = (n) => n.toLocaleDateString("en-US", { month: "short", day: "numeric"
   ] });
 };
 export {
-  ne as DateRangeFilter
+  ee as DateRangeFilter
 };
 //# sourceMappingURL=DateRangeFilter.js.map

package/dist/components/Common/DateRangeFilter/DateRangeFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangeFilter.js","sources":["../../../../src/components/Common/DateRangeFilter/DateRangeFilter.tsx"],"sourcesContent":["import { useState, useRef, useCallback, useMemo } from 'react'\nimport { Dialog, Popover } from 'react-aria-components'\nimport styles from './DateRangeFilter.module.scss'\nimport type { DateRange } from '@/components/Common/UI/DateRangePicker/DateRangePickerTypes'\nimport { Flex } from '@/components/Common/Flex/Flex'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useTheme } from '@/contexts/ThemeProvider'\nimport FilterFunnelIcon from '@/assets/icons/filter-funnel.svg?react'\n\nconst formatFilterDate = (date: Date): string =>\n  date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })\n\ninterface DateRangeFilterProps {\n  startDate: Date | null\n  endDate: Date | null\n  onStartDateChange: (date: Date | null) => void\n  onEndDateChange: (date: Date | null) => void\n  onClear: () => void\n  startDateLabel: string\n  endDateLabel: string\n  applyLabel: string\n  cancelLabel: string\n  resetLabel: string\n  selectDatesLabel: string\n  triggerLabel: string\n  isFilterActive: boolean\n  maxEndDate?: Date\n  minStartDate?: Date\n}\n\n/** @internal */\nexport const DateRangeFilter = ({\n  startDate,\n  endDate,\n  onStartDateChange,\n  onEndDateChange,\n  onClear,\n  startDateLabel,\n  endDateLabel,\n  applyLabel,\n  cancelLabel,\n  resetLabel,\n  selectDatesLabel,\n  triggerLabel,\n  isFilterActive,\n  maxEndDate,\n  minStartDate,\n}: DateRangeFilterProps) => {\n  const { Button, DateRangePicker } = useComponentContext()\n  const { container } = useTheme()\n\n  const [isOpen, setIsOpen] = useState(false)\n  const [draftRange, setDraftRange] = useState<DateRange | null>(null)\n  const triggerRef = useRef<HTMLButtonElement>(null)\n\n  const handleOpen = useCallback(() => {\n    const range = startDate && endDate ? { start: startDate, end: endDate } : null\n    setDraftRange(range)\n    setIsOpen(true)\n  }, [startDate, endDate])\n\n  const handleClose = useCallback(() => {\n    setIsOpen(false)\n  }, [])\n\n  const handleApply = useCallback(() => {\n    if (draftRange) {\n      onStartDateChange(draftRange.start)\n      onEndDateChange(draftRange.end)\n    } else {\n      onClear()\n    }\n    setIsOpen(false)\n  }, [draftRange, onStartDateChange, onEndDateChange, onClear])\n\n  const handleReset = useCallback(() => {\n    setDraftRange(null)\n  }, [])\n\n  const handleRangeChange = useCallback((range: DateRange | null) => {\n    setDraftRange(range)\n  }, [])\n\n  const filterDateLabel = useMemo(() => {\n    if (!isFilterActive || !startDate || !endDate) return null\n    return `${formatFilterDate(startDate)} – ${formatFilterDate(endDate)}`\n  }, [isFilterActive, startDate, endDate])\n\n  const triggerButton = (\n    <Button\n      buttonRef={triggerRef}\n      aria-label={triggerLabel}\n      aria-haspopup=\"dialog\"\n      aria-expanded={isOpen}\n      onClick={handleOpen}\n      variant=\"secondary\"\n      icon={<FilterFunnelIcon />}\n      className={styles.triggerButton}\n    >\n      {filterDateLabel ?? selectDatesLabel}\n    </Button>\n  )\n\n  return (\n    <>\n      {triggerButton}\n\n      <Popover\n        UNSTABLE_portalContainer={container.current ?? undefined}\n        isOpen={isOpen}\n        onOpenChange={open => {\n          if (!open) handleClose()\n        }}\n        triggerRef={triggerRef}\n        placement=\"bottom end\"\n        offset={8}\n        shouldUpdatePosition\n      >\n        <Dialog className={styles.dialog} aria-label={`${startDateLabel} – ${endDateLabel}`}>\n          <div className={styles.popoverContent}>\n            <DateRangePicker\n              label={`${startDateLabel} – ${endDateLabel}`}\n              shouldVisuallyHideLabel\n              value={draftRange}\n              onChange={handleRangeChange}\n              startDateLabel={startDateLabel}\n              endDateLabel={endDateLabel}\n              minValue={minStartDate}\n              maxValue={maxEndDate}\n            />\n          </div>\n\n          <div className={styles.popoverFooter}>\n            <Flex gap={8} justifyContent=\"space-between\">\n              <Button variant=\"tertiary\" onClick={handleReset}>\n                {resetLabel}\n              </Button>\n              <Flex gap={8} justifyContent=\"flex-end\">\n                <Button variant=\"secondary\" onClick={handleClose}>\n                  {cancelLabel}\n                </Button>\n                <Button variant=\"primary\" onClick={handleApply}>\n                  {applyLabel}\n                </Button>\n              </Flex>\n            </Flex>\n          </div>\n        </Dialog>\n      </Popover>\n    </>\n  )\n}\n"],"names":["formatFilterDate","date","DateRangeFilter","startDate","endDate","onStartDateChange","onEndDateChange","onClear","startDateLabel","endDateLabel","applyLabel","cancelLabel","resetLabel","selectDatesLabel","triggerLabel","isFilterActive","maxEndDate","minStartDate","Button","DateRangePicker","useComponentContext","container","useTheme","isOpen","setIsOpen","useState","draftRange","setDraftRange","triggerRef","useRef","handleOpen","useCallback","handleClose","handleApply","handleReset","handleRangeChange","range","filterDateLabel","useMemo","triggerButton","jsx","FilterFunnelIcon","styles","jsxs","Fragment","Popover","open","Dialog","Flex"],"mappings":"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"}
+{"version":3,"file":"DateRangeFilter.js","sources":["../../../../src/components/Common/DateRangeFilter/DateRangeFilter.tsx"],"sourcesContent":["import { useState, useRef, useCallback, useMemo } from 'react'\nimport { Dialog, Popover } from 'react-aria-components'\nimport styles from './DateRangeFilter.module.scss'\nimport type { DateRange } from '@/components/Common/UI/DateRangePicker/DateRangePickerTypes'\nimport { Flex } from '@/components/Common/Flex/Flex'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useTheme } from '@/contexts/ThemeProvider'\nimport FilterFunnelIcon from '@/assets/icons/filter-funnel.svg?react'\n\nconst formatFilterDate = (date: Date): string =>\n  date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })\n\ninterface DateRangeFilterProps {\n  startDate: Date | null\n  endDate: Date | null\n  onStartDateChange: (date: Date | null) => void\n  onEndDateChange: (date: Date | null) => void\n  onClear: () => void\n  startDateLabel: string\n  endDateLabel: string\n  applyLabel: string\n  cancelLabel: string\n  resetLabel: string\n  selectDatesLabel: string\n  triggerLabel: string\n  maxEndDate?: Date\n  minStartDate?: Date\n}\n\n/** @internal */\nexport const DateRangeFilter = ({\n  startDate,\n  endDate,\n  onStartDateChange,\n  onEndDateChange,\n  onClear,\n  startDateLabel,\n  endDateLabel,\n  applyLabel,\n  cancelLabel,\n  resetLabel,\n  selectDatesLabel,\n  triggerLabel,\n  maxEndDate,\n  minStartDate,\n}: DateRangeFilterProps) => {\n  const { Button, DateRangePicker } = useComponentContext()\n  const { container } = useTheme()\n\n  const [isOpen, setIsOpen] = useState(false)\n  const [draftRange, setDraftRange] = useState<DateRange | null>(null)\n  const triggerRef = useRef<HTMLButtonElement>(null)\n\n  const handleOpen = useCallback(() => {\n    const range = startDate && endDate ? { start: startDate, end: endDate } : null\n    setDraftRange(range)\n    setIsOpen(true)\n  }, [startDate, endDate])\n\n  const handleClose = useCallback(() => {\n    setIsOpen(false)\n  }, [])\n\n  const handleApply = useCallback(() => {\n    if (draftRange) {\n      onStartDateChange(draftRange.start)\n      onEndDateChange(draftRange.end)\n    } else {\n      onClear()\n    }\n    setIsOpen(false)\n  }, [draftRange, onStartDateChange, onEndDateChange, onClear])\n\n  const handleReset = useCallback(() => {\n    setDraftRange(null)\n  }, [])\n\n  const handleRangeChange = useCallback((range: DateRange | null) => {\n    setDraftRange(range)\n  }, [])\n\n  const filterDateLabel = useMemo(() => {\n    if (!startDate || !endDate) return null\n    return `${formatFilterDate(startDate)} – ${formatFilterDate(endDate)}`\n  }, [startDate, endDate])\n\n  const triggerButton = (\n    <Button\n      buttonRef={triggerRef}\n      aria-label={triggerLabel}\n      aria-haspopup=\"dialog\"\n      aria-expanded={isOpen}\n      onClick={handleOpen}\n      variant=\"secondary\"\n      icon={<FilterFunnelIcon />}\n      className={styles.triggerButton}\n    >\n      {filterDateLabel ?? selectDatesLabel}\n    </Button>\n  )\n\n  return (\n    <>\n      {triggerButton}\n\n      <Popover\n        UNSTABLE_portalContainer={container.current ?? undefined}\n        isOpen={isOpen}\n        onOpenChange={open => {\n          if (!open) handleClose()\n        }}\n        triggerRef={triggerRef}\n        placement=\"bottom end\"\n        offset={8}\n        shouldUpdatePosition\n      >\n        <Dialog className={styles.dialog} aria-label={`${startDateLabel} – ${endDateLabel}`}>\n          <div className={styles.popoverContent}>\n            <DateRangePicker\n              label={`${startDateLabel} – ${endDateLabel}`}\n              shouldVisuallyHideLabel\n              value={draftRange}\n              onChange={handleRangeChange}\n              startDateLabel={startDateLabel}\n              endDateLabel={endDateLabel}\n              minValue={minStartDate}\n              maxValue={maxEndDate}\n            />\n          </div>\n\n          <div className={styles.popoverFooter}>\n            <Flex gap={8} justifyContent=\"space-between\">\n              <Button variant=\"tertiary\" onClick={handleReset}>\n                {resetLabel}\n              </Button>\n              <Flex gap={8} justifyContent=\"flex-end\">\n                <Button variant=\"secondary\" onClick={handleClose}>\n                  {cancelLabel}\n                </Button>\n                <Button variant=\"primary\" onClick={handleApply}>\n                  {applyLabel}\n                </Button>\n              </Flex>\n            </Flex>\n          </div>\n        </Dialog>\n      </Popover>\n    </>\n  )\n}\n"],"names":["formatFilterDate","date","DateRangeFilter","startDate","endDate","onStartDateChange","onEndDateChange","onClear","startDateLabel","endDateLabel","applyLabel","cancelLabel","resetLabel","selectDatesLabel","triggerLabel","maxEndDate","minStartDate","Button","DateRangePicker","useComponentContext","container","useTheme","isOpen","setIsOpen","useState","draftRange","setDraftRange","triggerRef","useRef","handleOpen","useCallback","handleClose","handleApply","handleReset","handleRangeChange","range","filterDateLabel","useMemo","triggerButton","jsx","FilterFunnelIcon","styles","jsxs","Fragment","Popover","open","Dialog","Flex"],"mappings":"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"}

package/dist/components/Common/Fields/PercentageField/PercentageField.js

@@ -1,58 +1,60 @@
-import { jsx as N } from "react/jsx-runtime";
-import { useMemo as d } from "react";
-import { useTranslation as C } from "react-i18next";
+import { jsx as C } from "react/jsx-runtime";
+import { useTranslation as v } from "react-i18next";
+import { useFormContext as x } from "react-hook-form";
 import { useField as F } from "../hooks/useField.js";
-import { useComponentContext as b } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
-import { decimalToPercent as u, percentToDecimal as h } from "../../../../helpers/percentageConversion.js";
-function x(t) {
-  if (!(t == null || typeof t == "boolean"))
-    return String(t);
+import { useComponentContext as N } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
+import { decimalToPercent as a, percentToDecimal as b } from "../../../../helpers/percentageConversion.js";
+function h(e) {
+  if (!(e == null || typeof e == "boolean"))
+    return String(e);
 }
-function I({
-  decimalValue: t,
-  decimalMin: o,
-  decimalMax: n,
-  ...a
+function j({
+  decimalValue: e,
+  decimalMin: r,
+  decimalMax: m,
+  ...t
 }) {
-  const f = b(), { t: i } = C("common"), p = d(() => {
-    const r = {};
-    if (o !== void 0) {
-      const m = parseFloat(o);
-      r.min = (s) => {
-        const e = Number(s);
-        return isNaN(e) ? !0 : e >= m || i("validations.percentageMin", { min: u(o) });
-      };
+  const c = N(), { t: i } = v("common"), { setError: s, clearErrors: u } = x(), { value: f, onChange: l, ...g } = F({
+    ...t,
+    defaultValue: h(e)
+  }), d = (o) => {
+    const n = Number(o);
+    if (o === "" || Number.isNaN(n)) {
+      u(t.name);
+      return;
     }
-    if (n !== void 0) {
-      const m = parseFloat(n);
-      r.max = (s) => {
-        const e = Number(s);
-        return isNaN(e) ? !0 : e <= m || i("validations.percentageMax", { max: u(n) });
-      };
+    if (r !== void 0 && n < parseFloat(r)) {
+      s(t.name, {
+        type: "min",
+        message: i("validations.percentageMin", { min: a(r) })
+      });
+      return;
     }
-    return r;
-  }, [o, n, i]), { value: c, onChange: l, ...g } = F({
-    ...a,
-    defaultValue: x(t),
-    rules: { validate: p }
-  }), v = (r) => {
-    l(h(r));
+    if (m !== void 0 && n > parseFloat(m)) {
+      s(t.name, {
+        type: "max",
+        message: i("validations.percentageMax", { max: a(m) })
+      });
+      return;
+    }
+    u(t.name);
+  }, p = (o) => {
+    const n = b(o);
+    d(n), l(n);
   };
-  return /* @__PURE__ */ N(
-    f.NumberInput,
+  return /* @__PURE__ */ C(
+    c.NumberInput,
     {
-      ...a,
+      ...t,
       ...g,
-      value: u(c),
-      onChange: v,
-      min: o ? u(o) : void 0,
-      max: n ? u(n) : void 0,
+      value: a(f),
+      onChange: p,
       format: "percent",
       maximumFractionDigits: 4
     }
   );
 }
 export {
-  I as PercentageField
+  j as PercentageField
 };
 //# sourceMappingURL=PercentageField.js.map

package/dist/components/Common/Fields/PercentageField/PercentageField.js.map

@@ -1 +1 @@
-{"version":3,"file":"PercentageField.js","sources":["../../../../../src/components/Common/Fields/PercentageField/PercentageField.tsx"],"sourcesContent":["import { useMemo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport type { NumberInputProps } from '@/components/Common/UI/NumberInput/NumberInputTypes'\nimport { useField } from '@/components/Common/Fields/hooks/useField'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { decimalToPercent, percentToDecimal } from '@/helpers/percentageConversion'\n\n/** @internal */\nexport interface PercentageFieldProps extends Pick<\n  NumberInputProps,\n  'isDisabled' | 'className' | 'label' | 'isRequired' | 'description' | 'errorMessage'\n> {\n  name: string\n  decimalValue?: string | number | boolean | null\n  decimalMin?: string\n  decimalMax?: string\n}\n\nfunction toDefaultString(value?: string | number | boolean | null): string | undefined {\n  if (value === null || value === undefined || typeof value === 'boolean') return undefined\n  return String(value)\n}\n\n/** @internal */\nexport function PercentageField({\n  decimalValue,\n  decimalMin,\n  decimalMax,\n  ...props\n}: PercentageFieldProps) {\n  const Components = useComponentContext()\n  const { t } = useTranslation('common')\n\n  const validationRules = useMemo(() => {\n    const rules: Record<string, (value: string) => string | true> = {}\n\n    if (decimalMin !== undefined) {\n      const minNum = parseFloat(decimalMin)\n      rules.min = (value: string) => {\n        const num = Number(value)\n        if (isNaN(num)) return true\n        return (\n          num >= minNum || t('validations.percentageMin', { min: decimalToPercent(decimalMin) })\n        )\n      }\n    }\n\n    if (decimalMax !== undefined) {\n      const maxNum = parseFloat(decimalMax)\n      rules.max = (value: string) => {\n        const num = Number(value)\n        if (isNaN(num)) return true\n        return (\n          num <= maxNum || t('validations.percentageMax', { max: decimalToPercent(decimalMax) })\n        )\n      }\n    }\n\n    return rules\n  }, [decimalMin, decimalMax, t])\n\n  const { value, onChange, ...fieldProps } = useField({\n    ...props,\n    defaultValue: toDefaultString(decimalValue),\n    rules: { validate: validationRules },\n  })\n\n  const handleChange = (percentValue: number) => {\n    onChange(percentToDecimal(percentValue))\n  }\n\n  return (\n    <Components.NumberInput\n      {...props}\n      {...fieldProps}\n      value={decimalToPercent(value)}\n      onChange={handleChange}\n      min={decimalMin ? decimalToPercent(decimalMin) : undefined}\n      max={decimalMax ? decimalToPercent(decimalMax) : undefined}\n      format=\"percent\"\n      maximumFractionDigits={4}\n    />\n  )\n}\n"],"names":["toDefaultString","value","PercentageField","decimalValue","decimalMin","decimalMax","props","Components","useComponentContext","t","useTranslation","validationRules","useMemo","rules","minNum","num","decimalToPercent","maxNum","onChange","fieldProps","useField","handleChange","percentValue","percentToDecimal","jsx"],"mappings":";;;;;;AAkBA,SAASA,EAAgBC,GAA8D;AACrF,MAAI,EAAAA,KAAU,QAA+B,OAAOA,KAAU;AAC9D,WAAO,OAAOA,CAAK;AACrB;AAGO,SAASC,EAAgB;AAAA,EAC9B,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,GAAGC;AACL,GAAyB;AACvB,QAAMC,IAAaC,EAAA,GACb,EAAE,GAAAC,EAAA,IAAMC,EAAe,QAAQ,GAE/BC,IAAkBC,EAAQ,MAAM;AACpC,UAAMC,IAA0D,CAAA;AAEhE,QAAIT,MAAe,QAAW;AAC5B,YAAMU,IAAS,WAAWV,CAAU;AACpC,MAAAS,EAAM,MAAM,CAACZ,MAAkB;AAC7B,cAAMc,IAAM,OAAOd,CAAK;AACxB,eAAI,MAAMc,CAAG,IAAU,KAErBA,KAAOD,KAAUL,EAAE,6BAA6B,EAAE,KAAKO,EAAiBZ,CAAU,GAAG;AAAA,MAEzF;AAAA,IACF;AAEA,QAAIC,MAAe,QAAW;AAC5B,YAAMY,IAAS,WAAWZ,CAAU;AACpC,MAAAQ,EAAM,MAAM,CAACZ,MAAkB;AAC7B,cAAMc,IAAM,OAAOd,CAAK;AACxB,eAAI,MAAMc,CAAG,IAAU,KAErBA,KAAOE,KAAUR,EAAE,6BAA6B,EAAE,KAAKO,EAAiBX,CAAU,GAAG;AAAA,MAEzF;AAAA,IACF;AAEA,WAAOQ;AAAA,EACT,GAAG,CAACT,GAAYC,GAAYI,CAAC,CAAC,GAExB,EAAE,OAAAR,GAAO,UAAAiB,GAAU,GAAGC,EAAA,IAAeC,EAAS;AAAA,IAClD,GAAGd;AAAA,IACH,cAAcN,EAAgBG,CAAY;AAAA,IAC1C,OAAO,EAAE,UAAUQ,EAAA;AAAA,EAAgB,CACpC,GAEKU,IAAe,CAACC,MAAyB;AAC7C,IAAAJ,EAASK,EAAiBD,CAAY,CAAC;AAAA,EACzC;AAEA,SACE,gBAAAE;AAAA,IAACjB,EAAW;AAAA,IAAX;AAAA,MACE,GAAGD;AAAA,MACH,GAAGa;AAAA,MACJ,OAAOH,EAAiBf,CAAK;AAAA,MAC7B,UAAUoB;AAAA,MACV,KAAKjB,IAAaY,EAAiBZ,CAAU,IAAI;AAAA,MACjD,KAAKC,IAAaW,EAAiBX,CAAU,IAAI;AAAA,MACjD,QAAO;AAAA,MACP,uBAAuB;AAAA,IAAA;AAAA,EAAA;AAG7B;"}
+{"version":3,"file":"PercentageField.js","sources":["../../../../../src/components/Common/Fields/PercentageField/PercentageField.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { useFormContext } from 'react-hook-form'\nimport type { NumberInputProps } from '@/components/Common/UI/NumberInput/NumberInputTypes'\nimport { useField } from '@/components/Common/Fields/hooks/useField'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { decimalToPercent, percentToDecimal } from '@/helpers/percentageConversion'\n\n/** @internal */\nexport interface PercentageFieldProps extends Pick<\n  NumberInputProps,\n  'isDisabled' | 'className' | 'label' | 'isRequired' | 'description' | 'errorMessage'\n> {\n  name: string\n  decimalValue?: string | number | boolean | null\n  decimalMin?: string\n  decimalMax?: string\n}\n\nfunction toDefaultString(value?: string | number | boolean | null): string | undefined {\n  if (value === null || value === undefined || typeof value === 'boolean') return undefined\n  return String(value)\n}\n\n/** @internal */\nexport function PercentageField({\n  decimalValue,\n  decimalMin,\n  decimalMax,\n  ...props\n}: PercentageFieldProps) {\n  const Components = useComponentContext()\n  const { t } = useTranslation('common')\n  const { setError, clearErrors } = useFormContext()\n\n  const { value, onChange, ...fieldProps } = useField({\n    ...props,\n    defaultValue: toDefaultString(decimalValue),\n  })\n\n  // Deliberately not passed to NumberInput's `min`/`max` props: react-aria's NumberField\n  // treats those as hard bounds and silently clamps out-of-range values to them on blur,\n  // with no error shown. Validating here instead keeps the value the user actually typed\n  // on screen, paired with a real error message.\n  const validateRange = (rawDecimalValue: string) => {\n    const num = Number(rawDecimalValue)\n    if (rawDecimalValue === '' || Number.isNaN(num)) {\n      clearErrors(props.name)\n      return\n    }\n    if (decimalMin !== undefined && num < parseFloat(decimalMin)) {\n      setError(props.name, {\n        type: 'min',\n        message: t('validations.percentageMin', { min: decimalToPercent(decimalMin) }),\n      })\n      return\n    }\n    if (decimalMax !== undefined && num > parseFloat(decimalMax)) {\n      setError(props.name, {\n        type: 'max',\n        message: t('validations.percentageMax', { max: decimalToPercent(decimalMax) }),\n      })\n      return\n    }\n    clearErrors(props.name)\n  }\n\n  const handleChange = (percentValue: number) => {\n    const decimalStr = percentToDecimal(percentValue)\n    validateRange(decimalStr)\n    onChange(decimalStr)\n  }\n\n  return (\n    <Components.NumberInput\n      {...props}\n      {...fieldProps}\n      value={decimalToPercent(value)}\n      onChange={handleChange}\n      format=\"percent\"\n      maximumFractionDigits={4}\n    />\n  )\n}\n"],"names":["toDefaultString","value","PercentageField","decimalValue","decimalMin","decimalMax","props","Components","useComponentContext","t","useTranslation","setError","clearErrors","useFormContext","onChange","fieldProps","useField","validateRange","rawDecimalValue","num","decimalToPercent","handleChange","percentValue","decimalStr","percentToDecimal","jsx"],"mappings":";;;;;;AAkBA,SAASA,EAAgBC,GAA8D;AACrF,MAAI,EAAAA,KAAU,QAA+B,OAAOA,KAAU;AAC9D,WAAO,OAAOA,CAAK;AACrB;AAGO,SAASC,EAAgB;AAAA,EAC9B,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,GAAGC;AACL,GAAyB;AACvB,QAAMC,IAAaC,EAAA,GACb,EAAE,GAAAC,EAAA,IAAMC,EAAe,QAAQ,GAC/B,EAAE,UAAAC,GAAU,aAAAC,EAAA,IAAgBC,EAAA,GAE5B,EAAE,OAAAZ,GAAO,UAAAa,GAAU,GAAGC,EAAA,IAAeC,EAAS;AAAA,IAClD,GAAGV;AAAA,IACH,cAAcN,EAAgBG,CAAY;AAAA,EAAA,CAC3C,GAMKc,IAAgB,CAACC,MAA4B;AACjD,UAAMC,IAAM,OAAOD,CAAe;AAClC,QAAIA,MAAoB,MAAM,OAAO,MAAMC,CAAG,GAAG;AAC/C,MAAAP,EAAYN,EAAM,IAAI;AACtB;AAAA,IACF;AACA,QAAIF,MAAe,UAAae,IAAM,WAAWf,CAAU,GAAG;AAC5D,MAAAO,EAASL,EAAM,MAAM;AAAA,QACnB,MAAM;AAAA,QACN,SAASG,EAAE,6BAA6B,EAAE,KAAKW,EAAiBhB,CAAU,GAAG;AAAA,MAAA,CAC9E;AACD;AAAA,IACF;AACA,QAAIC,MAAe,UAAac,IAAM,WAAWd,CAAU,GAAG;AAC5D,MAAAM,EAASL,EAAM,MAAM;AAAA,QACnB,MAAM;AAAA,QACN,SAASG,EAAE,6BAA6B,EAAE,KAAKW,EAAiBf,CAAU,GAAG;AAAA,MAAA,CAC9E;AACD;AAAA,IACF;AACA,IAAAO,EAAYN,EAAM,IAAI;AAAA,EACxB,GAEMe,IAAe,CAACC,MAAyB;AAC7C,UAAMC,IAAaC,EAAiBF,CAAY;AAChD,IAAAL,EAAcM,CAAU,GACxBT,EAASS,CAAU;AAAA,EACrB;AAEA,SACE,gBAAAE;AAAA,IAAClB,EAAW;AAAA,IAAX;AAAA,MACE,GAAGD;AAAA,MACH,GAAGS;AAAA,MACJ,OAAOK,EAAiBnB,CAAK;AAAA,MAC7B,UAAUoB;AAAA,MACV,QAAO;AAAA,MACP,uBAAuB;AAAA,IAAA;AAAA,EAAA;AAG7B;"}

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

@@ -1,11 +1,11 @@
-import { jsxs as c, jsx as t } from "react/jsx-runtime";
-import m from "classnames";
+import { jsxs as m, jsx as t } from "react/jsx-runtime";
+import c from "classnames";
 import s from "./Box.module.scss.js";
-function x({ children: o, header: e, footer: a, withPadding: r = !0, className: i }) {
-  return /* @__PURE__ */ c("div", { className: m(s.root, i), "data-testid": "data-box", children: [
+function x({ children: a, header: e, footer: o, withPadding: r = !0, className: i }) {
+  return /* @__PURE__ */ m("div", { className: c(s.root, i), "data-testid": "data-box", children: [
     e && /* @__PURE__ */ t("div", { className: s.header, children: e }),
-    /* @__PURE__ */ t("div", { className: r ? s.content : s.contentFlush, children: o }),
-    a && /* @__PURE__ */ t("div", { className: s.footer, children: a })
+    a && /* @__PURE__ */ t("div", { className: r ? s.content : s.contentFlush, children: a }),
+    o && /* @__PURE__ */ t("div", { className: s.footer, children: o })
   ] });
 }
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"Box.js","sources":["../../../../../src/components/Common/UI/Box/Box.tsx"],"sourcesContent":["import cn from 'classnames'\nimport styles from './Box.module.scss'\nimport type { BoxProps } from '@/components/Common/UI/Box/BoxTypes'\n\n/**\n * Renders a bordered container that groups related content, with optional header and footer slots.\n *\n * @param props - The {@link BoxProps} controlling the box contents, header, footer, and padding.\n * @returns The rendered box.\n * @internal\n */\nexport function Box({ children, header, footer, withPadding = true, className }: BoxProps) {\n  return (\n    <div className={cn(styles.root, className)} data-testid=\"data-box\">\n      {header && <div className={styles.header}>{header}</div>}\n      <div className={withPadding ? styles.content : styles.contentFlush}>{children}</div>\n      {footer && <div className={styles.footer}>{footer}</div>}\n    </div>\n  )\n}\n"],"names":["Box","children","header","footer","withPadding","className","jsxs","cn","styles","jsx"],"mappings":";;;AAWO,SAASA,EAAI,EAAE,UAAAC,GAAU,QAAAC,GAAQ,QAAAC,GAAQ,aAAAC,IAAc,IAAM,WAAAC,KAAuB;AACzF,SACE,gBAAAC,EAAC,SAAI,WAAWC,EAAGC,EAAO,MAAMH,CAAS,GAAG,eAAY,YACrD,UAAA;AAAA,IAAAH,KAAU,gBAAAO,EAAC,OAAA,EAAI,WAAWD,EAAO,QAAS,UAAAN,GAAO;AAAA,IAClD,gBAAAO,EAAC,SAAI,WAAWL,IAAcI,EAAO,UAAUA,EAAO,cAAe,UAAAP,GAAS;AAAA,IAC7EE,KAAU,gBAAAM,EAAC,OAAA,EAAI,WAAWD,EAAO,QAAS,UAAAL,EAAA,CAAO;AAAA,EAAA,GACpD;AAEJ;"}
+{"version":3,"file":"Box.js","sources":["../../../../../src/components/Common/UI/Box/Box.tsx"],"sourcesContent":["import cn from 'classnames'\nimport styles from './Box.module.scss'\nimport type { BoxProps } from '@/components/Common/UI/Box/BoxTypes'\n\n/**\n * Renders a bordered container that groups related content, with optional header and footer slots.\n *\n * @param props - The {@link BoxProps} controlling the box contents, header, footer, and padding.\n * @returns The rendered box.\n * @internal\n */\nexport function Box({ children, header, footer, withPadding = true, className }: BoxProps) {\n  return (\n    <div className={cn(styles.root, className)} data-testid=\"data-box\">\n      {header && <div className={styles.header}>{header}</div>}\n      {children && (\n        <div className={withPadding ? styles.content : styles.contentFlush}>{children}</div>\n      )}\n      {footer && <div className={styles.footer}>{footer}</div>}\n    </div>\n  )\n}\n"],"names":["Box","children","header","footer","withPadding","className","jsxs","cn","styles","jsx"],"mappings":";;;AAWO,SAASA,EAAI,EAAE,UAAAC,GAAU,QAAAC,GAAQ,QAAAC,GAAQ,aAAAC,IAAc,IAAM,WAAAC,KAAuB;AACzF,SACE,gBAAAC,EAAC,SAAI,WAAWC,EAAGC,EAAO,MAAMH,CAAS,GAAG,eAAY,YACrD,UAAA;AAAA,IAAAH,KAAU,gBAAAO,EAAC,OAAA,EAAI,WAAWD,EAAO,QAAS,UAAAN,GAAO;AAAA,IACjDD,uBACE,OAAA,EAAI,WAAWG,IAAcI,EAAO,UAAUA,EAAO,cAAe,UAAAP,EAAA,CAAS;AAAA,IAE/EE,KAAU,gBAAAM,EAAC,OAAA,EAAI,WAAWD,EAAO,QAAS,UAAAL,EAAA,CAAO;AAAA,EAAA,GACpD;AAEJ;"}

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

@@ -1,16 +1,16 @@
-const t = "_root_16abs_1", o = "_header_16abs_12", e = "_content_16abs_17", n = "_contentFlush_16abs_22", s = "_footer_16abs_27", _ = {
-  root: t,
-  header: o,
+const o = "_root_1polg_1", t = "_header_1polg_12", e = "_content_1polg_17", n = "_contentFlush_1polg_22", _ = "_footer_1polg_27", c = {
+  root: o,
+  header: t,
   content: e,
   contentFlush: n,
-  footer: s
+  footer: _
 };
 export {
   e as content,
   n as contentFlush,
-  _ as default,
-  s as footer,
-  o as header,
-  t as root
+  c as default,
+  _ as footer,
+  t as header,
+  o as root
 };
 //# sourceMappingURL=Box.module.scss.js.map

package/dist/components/Common/UI/Box/BoxTypes.d.ts

@@ -10,7 +10,7 @@ export interface BoxProps {
     /**
      * Content rendered inside the box body.
      */
-    children: ReactNode;
+    children?: ReactNode;
     /**
      * Optional content rendered above the body in the box header section.
      */

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

@@ -1,9 +1,9 @@
 import { jsx as l } from "react/jsx-runtime";
 import h from "classnames";
+import { Flex as u } from "../../Flex/Flex.js";
 import { BreadcrumbsDefaults as C } from "./BreadcrumbsTypes.js";
 import i from "./Breadcrumbs.module.scss.js";
 import { applyMissingDefaults as x } from "../../../../helpers/applyMissingDefaults.js";
-import { Flex as u } from "../../Flex/Flex.js";
 function P(f) {
   const p = x(f, C), {
     className: s,

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

@@ -1,37 +1,39 @@
 import { jsx as r, jsxs as l } from "react/jsx-runtime";
-import { Text as m, RangeCalendar as D, CalendarGrid as x, CalendarGridHeader as N, CalendarHeaderCell as I, CalendarGridBody as S, CalendarCell as F } from "react-aria-components";
+import { Text as m, RangeCalendar as w, CalendarGrid as x, CalendarGridHeader as N, CalendarHeaderCell as I, CalendarGridBody as S, CalendarCell as F } from "react-aria-components";
 import { parseDate as p } from "@internationalized/date";
 import { useMemo as u } from "react";
-import { CalendarLegend as g } from "./CalendarLegend.js";
-import d from "./CalendarPreview.module.scss.js";
-import { formatDateToStringDate as s } from "../../../../helpers/dateFormatting.js";
+import { CalendarLegend as T } from "./CalendarLegend.js";
+import s from "./CalendarPreview.module.scss.js";
+import { formatDateToStringDate as d, normalizeToDate as g } from "../../../../helpers/dateFormatting.js";
 import { Flex as f } from "../../Flex/Flex.js";
 const L = ({ dateRange: t, highlightDates: n }) => {
   const C = u(() => n ? new Map(
     n.map((e) => [
-      s(e.date),
+      d(e.date),
       e.highlightColor
     ])
   ) : /* @__PURE__ */ new Map(), [n]), M = (e) => {
-    const a = new Date(e.toString()), { start: o, end: y } = t;
-    return a >= o && a <= y;
+    const a = g(e.toString());
+    if (!a) return !1;
+    const { start: o, end: D } = t;
+    return a >= o && a <= D;
   }, h = u(() => {
     const e = [t.start, t.end, ...n?.map((o) => o.date) || []], a = e[0]?.getMonth() ?? 0;
     return e.some((o) => o.getMonth() !== a);
   }, [t, n]), v = (e) => new Intl.DateTimeFormat(void 0, {
     month: "long",
     year: "numeric"
-  }).format(e), i = s(t.start), c = s(t.end), w = i && c ? {
+  }).format(e), i = d(t.start), c = d(t.end), y = i && c ? {
     start: p(i),
     end: p(c)
   } : void 0;
-  return /* @__PURE__ */ r("div", { className: d.calendar, children: /* @__PURE__ */ l("div", { className: d.calendarWrapper, children: [
-    /* @__PURE__ */ r("div", { className: d.calendarHeader, children: /* @__PURE__ */ r(f, { alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ r(m, { children: v(t.start) }) }) }),
+  return /* @__PURE__ */ r("div", { className: s.calendar, children: /* @__PURE__ */ l("div", { className: s.calendarWrapper, children: [
+    /* @__PURE__ */ r("div", { className: s.calendarHeader, children: /* @__PURE__ */ r(f, { alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ r(m, { children: v(t.start) }) }) }),
     /* @__PURE__ */ l(
-      D,
+      w,
       {
         isReadOnly: !0,
-        value: w,
+        value: y,
         visibleDuration: h ? { weeks: 2 } : void 0,
         children: [
           /* @__PURE__ */ l(x, { weekdayStyle: "short", children: [
@@ -46,7 +48,7 @@ const L = ({ dateRange: t, highlightDates: n }) => {
                 "data-disabled": !0,
                 children: ({ formattedDate: a }) => /* @__PURE__ */ l(f, { flexDirection: "column", alignItems: "center", gap: 0, children: [
                   a,
-                  /* @__PURE__ */ r("div", { className: d.dateMarker })
+                  /* @__PURE__ */ r("div", { className: s.dateMarker })
                 ] })
               }
             ) })
@@ -55,7 +57,7 @@ const L = ({ dateRange: t, highlightDates: n }) => {
         ]
       }
     ),
-    /* @__PURE__ */ r(g, { highlightDates: n, dateRange: t })
+    /* @__PURE__ */ r(T, { highlightDates: n, dateRange: t })
   ] }) });
 };
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"CalendarPreview.js","sources":["../../../../../src/components/Common/UI/CalendarPreview/CalendarPreview.tsx"],"sourcesContent":["import type { DateValue } from 'react-aria-components'\nimport {\n  CalendarCell,\n  CalendarGrid,\n  CalendarGridBody,\n  CalendarGridHeader,\n  CalendarHeaderCell,\n  Text,\n  RangeCalendar,\n} from 'react-aria-components'\nimport { parseDate } from '@internationalized/date'\nimport { useMemo } from 'react'\nimport { CalendarLegend } from './CalendarLegend'\nimport type { CalendarPreviewProps } from './CalendarPreviewTypes'\nimport styles from './CalendarPreview.module.scss'\nimport { formatDateToStringDate } from '@/helpers/dateFormatting'\nimport { Flex } from '@/components/Common/Flex'\n\n/**\n * Renders a read-only calendar showing a date range with optional highlighted dates and an accompanying legend.\n *\n * @param props - The {@link CalendarPreviewProps} controlling the displayed range and highlighted dates.\n * @returns The rendered calendar preview element.\n * @internal\n */\nexport const CalendarPreview = ({ dateRange, highlightDates }: CalendarPreviewProps) => {\n  const highlightMap = useMemo(() => {\n    if (!highlightDates) return new Map()\n\n    return new Map(\n      highlightDates.map(highlight => [\n        formatDateToStringDate(highlight.date),\n        highlight.highlightColor,\n      ]),\n    )\n  }, [highlightDates])\n\n  const isInRange = (date: DateValue) => {\n    const comparisonDate = new Date(date.toString())\n    const { start, end } = dateRange\n    return comparisonDate >= start && comparisonDate <= end\n  }\n\n  const isDatesInMultipleMonths = useMemo(() => {\n    // Get all dates into an array\n    const allDates = [dateRange.start, dateRange.end, ...(highlightDates?.map(h => h.date) || [])]\n\n    // Get the month of the first date to compare against\n    const firstMonth = allDates[0]?.getMonth() ?? 0\n\n    // Check if any date has a different month than the first date\n    return allDates.some(date => date.getMonth() !== firstMonth)\n  }, [dateRange, highlightDates])\n\n  const getMonthName = (date: Date) => {\n    const dateFormatter = new Intl.DateTimeFormat(undefined, {\n      month: 'long',\n      year: 'numeric',\n    })\n    return dateFormatter.format(date)\n  }\n\n  const formattedStartDate = formatDateToStringDate(dateRange.start)\n  const formattedEndDate = formatDateToStringDate(dateRange.end)\n\n  const rangeValue =\n    formattedStartDate && formattedEndDate\n      ? {\n          start: parseDate(formattedStartDate),\n          end: parseDate(formattedEndDate),\n        }\n      : undefined\n\n  return (\n    <div className={styles.calendar}>\n      <div className={styles.calendarWrapper}>\n        <div className={styles.calendarHeader}>\n          <Flex alignItems={'center'} justifyContent={'center'}>\n            <Text>{getMonthName(dateRange.start)}</Text>\n          </Flex>\n        </div>\n        <RangeCalendar\n          isReadOnly\n          value={rangeValue}\n          visibleDuration={isDatesInMultipleMonths ? { weeks: 2 } : undefined}\n        >\n          <CalendarGrid weekdayStyle={'short'}>\n            <CalendarGridHeader>\n              {day => <CalendarHeaderCell>{day}</CalendarHeaderCell>}\n            </CalendarGridHeader>\n            <CalendarGridBody>\n              {date => {\n                return (\n                  <CalendarCell\n                    className=\"react-aria-CalendarCell\"\n                    date={date}\n                    {...(isInRange(date) ? { 'data-selected': true } : {})}\n                    data-highlight={highlightMap.get(date.toString())}\n                    data-disabled={true}\n                  >\n                    {({ formattedDate }) => {\n                      return (\n                        <Flex flexDirection={'column'} alignItems={'center'} gap={0}>\n                          {formattedDate}\n                          <div className={styles.dateMarker}></div>\n                        </Flex>\n                      )\n                    }}\n                  </CalendarCell>\n                )\n              }}\n            </CalendarGridBody>\n          </CalendarGrid>\n\n          <Text slot=\"errorMessage\" />\n        </RangeCalendar>\n        <CalendarLegend highlightDates={highlightDates} dateRange={dateRange} />\n      </div>\n    </div>\n  )\n}\n"],"names":["CalendarPreview","dateRange","highlightDates","highlightMap","useMemo","highlight","formatDateToStringDate","isInRange","date","comparisonDate","start","end","isDatesInMultipleMonths","allDates","h","firstMonth","getMonthName","formattedStartDate","formattedEndDate","rangeValue","parseDate","jsx","styles","jsxs","Flex","Text","RangeCalendar","CalendarGrid","CalendarGridHeader","day","CalendarHeaderCell","CalendarGridBody","CalendarCell","formattedDate","CalendarLegend"],"mappings":";;;;;;;;AAyBO,MAAMA,IAAkB,CAAC,EAAE,WAAAC,GAAW,gBAAAC,QAA2C;AACtF,QAAMC,IAAeC,EAAQ,MACtBF,IAEE,IAAI;AAAA,IACTA,EAAe,IAAI,CAAAG,MAAa;AAAA,MAC9BC,EAAuBD,EAAU,IAAI;AAAA,MACrCA,EAAU;AAAA,IAAA,CACX;AAAA,EAAA,IANyB,oBAAI,IAAA,GAQ/B,CAACH,CAAc,CAAC,GAEbK,IAAY,CAACC,MAAoB;AACrC,UAAMC,IAAiB,IAAI,KAAKD,EAAK,UAAU,GACzC,EAAE,OAAAE,GAAO,KAAAC,EAAA,IAAQV;AACvB,WAAOQ,KAAkBC,KAASD,KAAkBE;AAAA,EACtD,GAEMC,IAA0BR,EAAQ,MAAM;AAE5C,UAAMS,IAAW,CAACZ,EAAU,OAAOA,EAAU,KAAK,GAAIC,GAAgB,IAAI,CAAAY,MAAKA,EAAE,IAAI,KAAK,CAAA,CAAG,GAGvFC,IAAaF,EAAS,CAAC,GAAG,cAAc;AAG9C,WAAOA,EAAS,KAAK,CAAAL,MAAQA,EAAK,SAAA,MAAeO,CAAU;AAAA,EAC7D,GAAG,CAACd,GAAWC,CAAc,CAAC,GAExBc,IAAe,CAACR,MACE,IAAI,KAAK,eAAe,QAAW;AAAA,IACvD,OAAO;AAAA,IACP,MAAM;AAAA,EAAA,CACP,EACoB,OAAOA,CAAI,GAG5BS,IAAqBX,EAAuBL,EAAU,KAAK,GAC3DiB,IAAmBZ,EAAuBL,EAAU,GAAG,GAEvDkB,IACJF,KAAsBC,IAClB;AAAA,IACE,OAAOE,EAAUH,CAAkB;AAAA,IACnC,KAAKG,EAAUF,CAAgB;AAAA,EAAA,IAEjC;AAEN,SACE,gBAAAG,EAAC,SAAI,WAAWC,EAAO,UACrB,UAAA,gBAAAC,EAAC,OAAA,EAAI,WAAWD,EAAO,iBACrB,UAAA;AAAA,IAAA,gBAAAD,EAAC,SAAI,WAAWC,EAAO,gBACrB,UAAA,gBAAAD,EAACG,KAAK,YAAY,UAAU,gBAAgB,UAC1C,4BAACC,GAAA,EAAM,UAAAT,EAAaf,EAAU,KAAK,GAAE,GACvC,EAAA,CACF;AAAA,IACA,gBAAAsB;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,YAAU;AAAA,QACV,OAAOP;AAAA,QACP,iBAAiBP,IAA0B,EAAE,OAAO,MAAM;AAAA,QAE1D,UAAA;AAAA,UAAA,gBAAAW,EAACI,GAAA,EAAa,cAAc,SAC1B,UAAA;AAAA,YAAA,gBAAAN,EAACO,GAAA,EACE,UAAA,CAAAC,MAAO,gBAAAR,EAACS,GAAA,EAAoB,aAAI,EAAA,CACnC;AAAA,YACA,gBAAAT,EAACU,KACE,UAAA,CAAAvB,MAEG,gBAAAa;AAAA,cAACW;AAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,MAAAxB;AAAA,gBACC,GAAID,EAAUC,CAAI,IAAI,EAAE,iBAAiB,GAAA,IAAS,CAAA;AAAA,gBACnD,kBAAgBL,EAAa,IAAIK,EAAK,UAAU;AAAA,gBAChD,iBAAe;AAAA,gBAEd,UAAA,CAAC,EAAE,eAAAyB,0BAECT,GAAA,EAAK,eAAe,UAAU,YAAY,UAAU,KAAK,GACvD,UAAA;AAAA,kBAAAS;AAAA,kBACD,gBAAAZ,EAAC,OAAA,EAAI,WAAWC,EAAO,WAAA,CAAY;AAAA,gBAAA,GACrC;AAAA,cAEJ;AAAA,YAAA,EAGN,CACF;AAAA,UAAA,GACF;AAAA,UAEA,gBAAAD,EAACI,GAAA,EAAK,MAAK,eAAA,CAAe;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAE5B,gBAAAJ,EAACa,GAAA,EAAe,gBAAAhC,GAAgC,WAAAD,EAAA,CAAsB;AAAA,EAAA,EAAA,CACxE,EAAA,CACF;AAEJ;"}
+{"version":3,"file":"CalendarPreview.js","sources":["../../../../../src/components/Common/UI/CalendarPreview/CalendarPreview.tsx"],"sourcesContent":["import type { DateValue } from 'react-aria-components'\nimport {\n  CalendarCell,\n  CalendarGrid,\n  CalendarGridBody,\n  CalendarGridHeader,\n  CalendarHeaderCell,\n  Text,\n  RangeCalendar,\n} from 'react-aria-components'\nimport { parseDate } from '@internationalized/date'\nimport { useMemo } from 'react'\nimport { CalendarLegend } from './CalendarLegend'\nimport type { CalendarPreviewProps } from './CalendarPreviewTypes'\nimport styles from './CalendarPreview.module.scss'\nimport { formatDateToStringDate, normalizeToDate } from '@/helpers/dateFormatting'\nimport { Flex } from '@/components/Common/Flex'\n\n/**\n * Renders a read-only calendar showing a date range with optional highlighted dates and an accompanying legend.\n *\n * @param props - The {@link CalendarPreviewProps} controlling the displayed range and highlighted dates.\n * @returns The rendered calendar preview element.\n * @internal\n */\nexport const CalendarPreview = ({ dateRange, highlightDates }: CalendarPreviewProps) => {\n  const highlightMap = useMemo(() => {\n    if (!highlightDates) return new Map()\n\n    return new Map(\n      highlightDates.map(highlight => [\n        formatDateToStringDate(highlight.date),\n        highlight.highlightColor,\n      ]),\n    )\n  }, [highlightDates])\n\n  const isInRange = (date: DateValue) => {\n    const comparisonDate = normalizeToDate(date.toString())\n    if (!comparisonDate) return false\n    const { start, end } = dateRange\n    return comparisonDate >= start && comparisonDate <= end\n  }\n\n  const isDatesInMultipleMonths = useMemo(() => {\n    // Get all dates into an array\n    const allDates = [dateRange.start, dateRange.end, ...(highlightDates?.map(h => h.date) || [])]\n\n    // Get the month of the first date to compare against\n    const firstMonth = allDates[0]?.getMonth() ?? 0\n\n    // Check if any date has a different month than the first date\n    return allDates.some(date => date.getMonth() !== firstMonth)\n  }, [dateRange, highlightDates])\n\n  const getMonthName = (date: Date) => {\n    const dateFormatter = new Intl.DateTimeFormat(undefined, {\n      month: 'long',\n      year: 'numeric',\n    })\n    return dateFormatter.format(date)\n  }\n\n  const formattedStartDate = formatDateToStringDate(dateRange.start)\n  const formattedEndDate = formatDateToStringDate(dateRange.end)\n\n  const rangeValue =\n    formattedStartDate && formattedEndDate\n      ? {\n          start: parseDate(formattedStartDate),\n          end: parseDate(formattedEndDate),\n        }\n      : undefined\n\n  return (\n    <div className={styles.calendar}>\n      <div className={styles.calendarWrapper}>\n        <div className={styles.calendarHeader}>\n          <Flex alignItems={'center'} justifyContent={'center'}>\n            <Text>{getMonthName(dateRange.start)}</Text>\n          </Flex>\n        </div>\n        <RangeCalendar\n          isReadOnly\n          value={rangeValue}\n          visibleDuration={isDatesInMultipleMonths ? { weeks: 2 } : undefined}\n        >\n          <CalendarGrid weekdayStyle={'short'}>\n            <CalendarGridHeader>\n              {day => <CalendarHeaderCell>{day}</CalendarHeaderCell>}\n            </CalendarGridHeader>\n            <CalendarGridBody>\n              {date => {\n                return (\n                  <CalendarCell\n                    className=\"react-aria-CalendarCell\"\n                    date={date}\n                    {...(isInRange(date) ? { 'data-selected': true } : {})}\n                    data-highlight={highlightMap.get(date.toString())}\n                    data-disabled={true}\n                  >\n                    {({ formattedDate }) => {\n                      return (\n                        <Flex flexDirection={'column'} alignItems={'center'} gap={0}>\n                          {formattedDate}\n                          <div className={styles.dateMarker}></div>\n                        </Flex>\n                      )\n                    }}\n                  </CalendarCell>\n                )\n              }}\n            </CalendarGridBody>\n          </CalendarGrid>\n\n          <Text slot=\"errorMessage\" />\n        </RangeCalendar>\n        <CalendarLegend highlightDates={highlightDates} dateRange={dateRange} />\n      </div>\n    </div>\n  )\n}\n"],"names":["CalendarPreview","dateRange","highlightDates","highlightMap","useMemo","highlight","formatDateToStringDate","isInRange","date","comparisonDate","normalizeToDate","start","end","isDatesInMultipleMonths","allDates","h","firstMonth","getMonthName","formattedStartDate","formattedEndDate","rangeValue","parseDate","jsx","styles","jsxs","Flex","Text","RangeCalendar","CalendarGrid","CalendarGridHeader","day","CalendarHeaderCell","CalendarGridBody","CalendarCell","formattedDate","CalendarLegend"],"mappings":"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"}