impact-nova 2.6.2 → 3.0.0-alpha.0

package/dist/components/primitives/stepper/stepper.variants.js

@@ -4,13 +4,47 @@ const a = t("flex w-full gap-0", {
     orientation: {
       horizontal: "flex-row items-center",
       vertical: "flex-col items-stretch"
+    },
+    variant: {
+      default: "",
+      compact: "w-full",
+      pipeline: "flex-col items-stretch gap-2",
+      track: "relative w-full flex-col items-stretch",
+      summary: "flex-row items-center",
+      rail: "relative flex-col items-stretch gap-4 overflow-visible"
     }
   },
+  compoundVariants: [
+    {
+      variant: "compact",
+      orientation: "vertical",
+      // Stretch so every pill shares one consistent width (not content-sized)
+      className: "flex-col items-stretch"
+    },
+    {
+      variant: "compact",
+      orientation: "horizontal",
+      className: "flex-row items-stretch"
+    },
+    {
+      variant: "pipeline",
+      className: "flex-col items-stretch gap-2"
+    },
+    {
+      variant: "summary",
+      className: "flex-row items-center gap-0 overflow-visible ps-2"
+    },
+    {
+      variant: "rail",
+      className: "relative w-full flex-col items-stretch gap-4 overflow-visible"
+    }
+  ],
   defaultVariants: {
-    orientation: "horizontal"
+    orientation: "horizontal",
+    variant: "default"
   }
 }), r = t(
-  "relative flex items-center transition-all duration-200",
+  "relative flex items-center transition-all duration-200 motion-reduce:transition-none",
   {
     variants: {
       orientation: {
@@ -60,8 +94,42 @@ const a = t("flex w-full gap-0", {
       status: "default"
     }
   }
+), s = t(
+  "flex h-6 w-6 shrink-0 items-center justify-center rounded-[8px] text-xs font-extrabold transition-all motion-reduce:transition-none",
+  {
+    variants: {
+      status: {
+        default: "bg-muted text-navigation-muted",
+        active: "bg-brand text-brand-foreground",
+        completed: "bg-success text-success-foreground"
+      }
+    },
+    defaultVariants: {
+      status: "default"
+    }
+  }
+), n = t(
+  // Equal-width pills: fill the stretch axis (vertical stack / horizontal flex-1)
+  "relative flex h-[38px] w-full min-w-0 items-center gap-2 overflow-visible rounded-[8px] p-2",
+  {
+    variants: {
+      orientation: {
+        vertical: "",
+        horizontal: "flex-1 basis-0"
+      },
+      status: {
+        default: "bg-canvas-elevated",
+        active: "bg-brand-tint",
+        completed: "bg-feedback-success-surface"
+      }
+    },
+    defaultVariants: {
+      orientation: "vertical",
+      status: "default"
+    }
+  }
 ), o = t(
-  "flex h-6 w-6 shrink-0 items-center justify-center rounded-[8px] text-xs font-extrabold transition-all",
+  "flex size-[22px] shrink-0 items-center justify-center rounded-[8px] text-xs font-bold tracking-[-0.12px]",
   {
     variants: {
       status: {
@@ -74,9 +142,101 @@ const a = t("flex w-full gap-0", {
       status: "default"
     }
   }
+), i = t(
+  "min-w-0 flex-1 truncate text-sm capitalize",
+  {
+    variants: {
+      status: {
+        default: "font-semibold leading-[21px] text-secondary-foreground",
+        active: "font-medium leading-5 text-brand",
+        completed: "font-semibold leading-[21px] text-[var(--color-stepper-complete-ink)]"
+      }
+    },
+    defaultVariants: {
+      status: "default"
+    }
+  }
+), l = t(
+  "shrink-0 rounded-full transition-colors motion-reduce:transition-none",
+  {
+    variants: {
+      status: {
+        default: "size-2 bg-muted",
+        active: "relative z-[1] flex size-11 items-center justify-center bg-transparent",
+        completed: "size-2.5 bg-[var(--color-stepper-pipeline-dot)]"
+      }
+    },
+    defaultVariants: {
+      status: "default"
+    }
+  }
+), c = t(
+  "relative flex shrink-0 flex-col items-start rounded-xl px-3 py-2",
+  {
+    variants: {
+      status: {
+        default: "bg-secondary",
+        active: "gap-0.5 border-2 border-brand bg-canvas-elevated shadow-elevation-card",
+        completed: "justify-center bg-secondary"
+      }
+    },
+    defaultVariants: {
+      status: "default"
+    }
+  }
+), d = t(
+  "flex size-6 shrink-0 items-center justify-center rounded-md text-sm font-bold tracking-[-0.14px]",
+  {
+    variants: {
+      status: {
+        default: "bg-content-icon text-brand-foreground",
+        active: "bg-brand text-brand-foreground",
+        completed: "bg-success text-success-foreground"
+      }
+    },
+    defaultVariants: {
+      status: "default"
+    }
+  }
+), u = t(
+  "relative flex min-h-[65px] w-[284px] shrink-0 flex-col items-start gap-2 rounded-lg px-3 py-2.5",
+  {
+    variants: {
+      status: {
+        default: "border border-stroke-hairline bg-canvas-elevated shadow-elevation-card",
+        active: "overflow-visible bg-brand-tint",
+        completed: "bg-feedback-success-surface"
+      }
+    },
+    defaultVariants: {
+      status: "default"
+    }
+  }
+), f = t(
+  "flex size-5 shrink-0 items-center justify-center rounded-md text-xs font-bold tracking-[-0.12px]",
+  {
+    variants: {
+      status: {
+        default: "bg-content-icon text-brand-foreground",
+        active: "bg-brand text-brand-foreground",
+        completed: "bg-success text-success-foreground"
+      }
+    },
+    defaultVariants: {
+      status: "default"
+    }
+  }
 );
 export {
-  o as iconVariants,
+  o as compactIconVariants,
+  i as compactLabelVariants,
+  n as compactStepVariants,
+  s as iconVariants,
+  l as pipelineDotVariants,
   r as stepVariants,
-  a as stepperVariants
+  a as stepperVariants,
+  f as summaryIconVariants,
+  u as summaryStepVariants,
+  d as trackIconVariants,
+  c as trackStepVariants
 };

package/dist/components/primitives/tabs/tabs.d.ts

@@ -1,7 +1,8 @@
+import { TabsVariant } from './tabs.types';
 import * as React from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 declare const Tabs: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
-    variant?: import('./tabs.types').TabsVariant;
+    variant?: TabsVariant;
     size?: import('./tabs.types').TabsSize;
     hideInactiveLabel?: boolean;
     tooltipClassName?: string;
@@ -18,5 +19,7 @@ declare const TabsContent: React.ForwardRefExoticComponent<Omit<TabsPrimitive.Ta
 declare const TabsImage: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     activeImage: React.ReactNode;
     inactiveImage: React.ReactNode;
+    activeOnHover?: boolean;
+    grayscaleInactive?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
 export { Tabs, TabsList, TabsTrigger, TabsContent, TabsImage };

package/dist/components/primitives/tabs/tabs.js

@@ -1,82 +1,125 @@
-import { jsx as n, jsxs as N, Fragment as R } from "react/jsx-runtime";
-import * as i from "react";
+import { jsx as r, jsxs as g, Fragment as N } from "react/jsx-runtime";
+import * as d from "react";
 import * as b from "@radix-ui/react-tabs";
-import { useControllableState as I } from "@radix-ui/react-use-controllable-state";
-import { createComponent as M } from "../../../lib/primitives/create-component.js";
-import { cn as c } from "../../../lib/utils.js";
-const T = i.createContext({
+import { useControllableState as $ } from "@radix-ui/react-use-controllable-state";
+import { createComponent as z } from "../../../lib/primitives/create-component.js";
+import { cn as i } from "../../../lib/utils.js";
+const j = d.createContext({
   variant: "line",
   size: "default"
-}), P = (e, a) => {
+}), B = (e, a) => {
   const t = e.split(/\s+/);
   return t.length <= a ? e : t.slice(0, a).join(" ") + "...";
-}, S = i.forwardRef(({ variant: e = "line", size: a = "default", hideInactiveLabel: t = !1, tooltipClassName: o, maxWords: r, renderTabTooltip: x, value: v, defaultValue: f, onValueChange: s, ...g }, h) => {
-  const [d, y] = I({
-    prop: v,
-    defaultProp: f,
-    onChange: (p) => {
-      p !== void 0 && s?.(p);
+}, I = "M5.98893 0.639668C6.62899 -0.213253 7.90856 -0.213192 8.5485 0.639668L14.2155 8.19533C15.0056 9.25033 14.2517 10.7546 12.9342 10.7549H1.60221C0.283983 10.7546 -0.467977 9.25001 0.322916 8.19533L5.98893 0.639668Z";
+function L({
+  fillVar: e,
+  className: a
+}) {
+  return /* @__PURE__ */ r(
+    "svg",
+    {
+      "aria-hidden": !0,
+      viewBox: "0 0 14.5376 10.7549",
+      className: i(
+        "pointer-events-none absolute start-6 bottom-0 z-[1] h-[10.75px] w-[14.54px] translate-y-[calc(100%-0.5px)]",
+        a
+      ),
+      children: /* @__PURE__ */ r("g", { transform: "translate(0 10.7549) scale(1 -1)", children: /* @__PURE__ */ r("path", { d: I, fill: e, shapeRendering: "geometricPrecision" }) })
+    }
+  );
+}
+function M() {
+  return /* @__PURE__ */ g(N, { children: [
+    /* @__PURE__ */ r(
+      L,
+      {
+        fillVar: "var(--tab-hover-border, var(--color-tab-soft-accent-muted))",
+        className: "hidden group-hover:block group-data-[state=active]:hidden"
+      }
+    ),
+    /* @__PURE__ */ r(
+      L,
+      {
+        fillVar: "var(--tab-border, var(--color-tab-soft-accent))",
+        className: "hidden group-data-[state=active]:block"
+      }
+    )
+  ] });
+}
+const W = d.forwardRef(({ variant: e = "line", size: a = "default", hideInactiveLabel: t = !1, tooltipClassName: o, maxWords: n, renderTabTooltip: v, value: p, defaultValue: m, onValueChange: s, ...h }, y) => {
+  const [c, w] = $({
+    prop: p,
+    defaultProp: m,
+    onChange: (f) => {
+      f !== void 0 && s?.(f);
     }
-  }), w = i.useMemo(
-    () => ({ variant: e, size: a, activeValue: d, hideInactiveLabel: t, tooltipClassName: o, maxWords: r, renderTabTooltip: x }),
-    [e, a, d, t, o, r, x]
+  }), T = d.useMemo(
+    () => ({ variant: e, size: a, activeValue: c, hideInactiveLabel: t, tooltipClassName: o, maxWords: n, renderTabTooltip: v }),
+    [e, a, c, t, o, n, v]
   );
-  return /* @__PURE__ */ n(T.Provider, { value: w, children: /* @__PURE__ */ n(
+  return /* @__PURE__ */ r(j.Provider, { value: T, children: /* @__PURE__ */ r(
     b.Root,
     {
-      ref: h,
-      value: d,
-      onValueChange: y,
+      ref: y,
+      value: c,
+      onValueChange: w,
       "data-component": "tabs",
       "data-variant": e,
-      ...g
+      ...h
     }
   ) });
 });
-S.displayName = b.Root.displayName;
-const B = i.forwardRef(({ className: e, ...a }, t) => {
-  const { variant: o } = i.useContext(T);
-  return /* @__PURE__ */ n(
+W.displayName = b.Root.displayName;
+const D = d.forwardRef(({ className: e, ...a }, t) => {
+  const { variant: o } = d.useContext(j);
+  return /* @__PURE__ */ r(
     b.List,
     {
       ref: t,
       "data-tabs": "list",
-      className: c(
+      className: i(
         "inline-flex items-center justify-center rounded-lg",
         o === "line" && "h-[38px] bg-canvas-elevated border w-full justify-start gap-2 px-2 shrink-0 py-0",
+        o === "lineBorderless" && "h-[38px] w-full justify-start gap-2 shrink-0 py-0 bg-transparent border-0",
         o === "pill" && "h-[38px] p-1 bg-brand-tint text-brand gap-1",
         o === "outline" && "bg-transparent gap-2 w-full justify-start",
         o === "box" && "h-auto bg-transparent border-0 w-full justify-start gap-[16px] p-0 shrink-0",
+        o === "soft" && "h-auto bg-transparent border-0 w-full justify-start gap-2 p-0 shrink-0 overflow-visible",
         e
       ),
       style: { overflow: "visible" },
       ...a
     }
   );
-}), $ = i.forwardRef(({ className: e, icon: a, children: t, maxWords: o, activeColor: r, style: x, ...v }, f) => {
-  const { variant: s, size: g, activeValue: h, hideInactiveLabel: d, tooltipClassName: y, maxWords: w, renderTabTooltip: p } = i.useContext(T), m = o ?? w, u = h === v.value, j = typeof t == "string", k = j && m ? P(t, m) : t, V = j && m && t.split(/\s+/).length > m, W = d && !u || V, l = { ...x };
-  s === "box" && r && (l["--tab-border"] = r.border, l["--tab-bg"] = r.bg, l["--tab-text"] = r.text, l["--tab-hover-border"] = `color-mix(in srgb, ${r.border} 40%, transparent)`, l["--tab-hover-bg"] = `color-mix(in srgb, ${r.bg} 50%, white)`, l["--tab-hover-text"] = `color-mix(in srgb, ${r.text} 60%, var(--color-foreground-tertiary))`);
-  const C = s === "box" ? /* @__PURE__ */ N(R, { children: [
+}), F = d.forwardRef(({ className: e, icon: a, children: t, maxWords: o, activeColor: n, style: v, ...p }, m) => {
+  const { variant: s, size: h, activeValue: y, hideInactiveLabel: c, tooltipClassName: w, maxWords: T, renderTabTooltip: f } = d.useContext(j), S = s === "line" || s === "lineBorderless", x = o ?? T, u = y === p.value, k = typeof t == "string", V = k && x ? B(t, x) : t, A = k && x && t.split(/\s+/).length > x, P = c && !u || A, l = { ...v }, C = s === "box" || s === "soft";
+  C && n && (l["--tab-border"] = n.border, l["--tab-bg"] = n.bg, l["--tab-text"] = n.text, l["--tab-hover-border"] = `color-mix(in srgb, ${n.border} 40%, var(--color-background))`, l["--tab-hover-pedestal"] = `color-mix(in srgb, ${n.border} 40%, var(--color-stroke-field))`, l["--tab-pedestal-fill"] = `color-mix(in srgb, ${n.border} 40%, var(--color-background))`, l["--tab-hover-bg"] = `color-mix(in srgb, ${n.bg} 50%, white)`, l["--tab-hover-text"] = `color-mix(in srgb, ${n.text} 60%, var(--color-foreground-tertiary))`);
+  const R = C ? /* @__PURE__ */ g(N, { children: [
     t,
-    u && /* @__PURE__ */ n(
+    s === "soft" && /* @__PURE__ */ r(M, {}),
+    s === "box" && u && /* @__PURE__ */ r(
       "span",
       {
-        className: "absolute -bottom-[5.5px] start-1/2 -translate-x-1/2 w-[11px] h-[11px] rotate-45 border-b border-e bg-inherit border-b-inherit border-e-inherit"
+        className: i(
+          "absolute -bottom-[5.5px] start-1/2 -translate-x-1/2 w-[11px] h-[11px] rotate-45 pointer-events-none",
+          "border-b border-e bg-inherit border-b-inherit border-e-inherit"
+        )
       }
     )
-  ] }) : /* @__PURE__ */ N(R, { children: [
-    a && /* @__PURE__ */ n("span", { className: c("h-4 w-4 shrink-0", !d || u ? "me-2" : "me-0"), children: a }),
-    /* @__PURE__ */ n("span", { className: c(d && !u && "sr-only"), children: k })
+  ] }) : /* @__PURE__ */ g(N, { children: [
+    a && /* @__PURE__ */ r("span", { className: i("h-4 w-4 shrink-0", !c || u ? "me-2" : "me-0"), children: a }),
+    /* @__PURE__ */ r("span", { className: i(c && !u && "sr-only"), children: V })
   ] });
-  return /* @__PURE__ */ n(
+  return /* @__PURE__ */ r(
     b.Trigger,
     {
-      ref: f,
+      ref: m,
       "data-tabs": "trigger",
-      className: c(
+      className: i(
         "relative inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50",
-        s === "line" && [
-          "h-full rounded-none border-b-2 border-transparent px-1 text-[13px] font-medium capitalize text-content-tertiary -mb-[1px]",
+        S && [
+          "h-full rounded-none border-b-2 border-transparent px-1 text-[13px] font-medium capitalize text-content-tertiary",
+          s === "line" && "-mb-[1px]",
           "data-[state=active]:border-brand data-[state=active]:text-brand data-[state=active]:shadow-none",
           "hover:text-brand py-1.5 px-3"
         ],
@@ -89,7 +132,7 @@ const B = i.forwardRef(({ className: e, ...a }, t) => {
           "rounded-full border border-content-badge bg-canvas-elevated text-content-badge font-['Manrope']",
           "hover:bg-canvas-muted hover:text-content",
           "data-[state=active]:border-brand data-[state=active]:text-brand",
-          g === "sm" ? "h-[24px] px-[8px] py-[2px] text-xs" : "h-9 px-4 py-2"
+          h === "sm" ? "h-[24px] px-[8px] py-[2px] text-xs" : "h-9 px-4 py-2"
         ],
         s === "box" && [
           "group flex flex-row items-center justify-between min-w-[231px] w-fit gap-4 min-h-[45px] h-auto py-2 px-[16px] rounded-[8px] bg-canvas-elevated text-content-tertiary transition-none overflow-visible",
@@ -100,49 +143,78 @@ const B = i.forwardRef(({ className: e, ...a }, t) => {
           "data-[state=active]:bg-[color:var(--tab-bg,var(--color-tab-active-surface))]",
           "data-[state=active]:text-[color:var(--tab-text,var(--color-tab-active-foreground))]"
         ],
+        s === "soft" && [
+          "tabs-soft-trigger group flex flex-row items-center justify-between gap-3 h-[54px] w-full min-w-0 py-1 px-4 rounded-2xl overflow-visible",
+          "border-[1.5px] border-stroke",
+          "text-base font-semibold capitalize text-secondary-foreground",
+          "hover:data-[state=inactive]:[--tab-gradient-from:var(--tab-hover-bg,var(--color-tab-soft-surface))]",
+          "hover:data-[state=inactive]:border-[color:var(--tab-hover-border,var(--color-tab-soft-accent-muted))] hover:data-[state=inactive]:text-content-secondary",
+          "data-[state=active]:[--tab-gradient-from:var(--tab-bg,var(--color-tab-soft-surface))]",
+          "data-[state=active]:border-[color:var(--tab-border,var(--color-tab-soft-accent))]",
+          "data-[state=active]:text-[color:var(--tab-text,var(--color-content))]"
+        ],
         e
       ),
+      ...p,
       style: l,
-      ...v,
-      children: W && p ? p(C, t, y) : C
+      children: P && f ? f(R, t, w) : R
     }
   );
 });
-$.displayName = b.Trigger.displayName;
-const z = i.forwardRef(({ className: e, ...a }, t) => /* @__PURE__ */ n(
+F.displayName = b.Trigger.displayName;
+const _ = d.forwardRef(({ className: e, ...a }, t) => /* @__PURE__ */ r(
   b.Content,
   {
     ref: t,
     "data-tabs": "content",
     tabIndex: -1,
-    className: c(
+    className: i(
       "mt-2 focus-visible:outline-none focus:outline-none",
       e
     ),
     ...a
   }
 ));
-z.displayName = b.Content.displayName;
-const D = M(
+_.displayName = b.Content.displayName;
+const G = z(
   "TabsImage",
-  ({ className: e, activeImage: a, inactiveImage: t, ...o }, r) => /* @__PURE__ */ N(
+  ({ className: e, activeImage: a, inactiveImage: t, activeOnHover: o = !1, grayscaleInactive: n = !1, ...v }, p) => /* @__PURE__ */ g(
     "div",
     {
-      ref: r,
+      ref: p,
       "data-component": "tabs-image",
-      className: c("relative flex items-center justify-center shrink-0", e),
-      ...o,
+      className: i("relative flex items-center justify-center shrink-0", e),
+      ...v,
       children: [
-        /* @__PURE__ */ n("div", { className: "flex group-data-[state=active]:hidden", children: t }),
-        /* @__PURE__ */ n("div", { className: "hidden group-data-[state=active]:flex", children: a })
+        /* @__PURE__ */ r(
+          "div",
+          {
+            className: i(
+              "flex group-data-[state=active]:hidden",
+              o && "group-hover:hidden",
+              n && "grayscale"
+            ),
+            children: t
+          }
+        ),
+        /* @__PURE__ */ r(
+          "div",
+          {
+            className: i(
+              "hidden group-data-[state=active]:flex",
+              o && "group-hover:flex"
+            ),
+            children: a
+          }
+        )
       ]
     }
   )
 );
 export {
-  S as Tabs,
-  z as TabsContent,
-  D as TabsImage,
-  B as TabsList,
-  $ as TabsTrigger
+  W as Tabs,
+  _ as TabsContent,
+  G as TabsImage,
+  D as TabsList,
+  F as TabsTrigger
 };

package/dist/components/primitives/tabs/tabs.types.d.ts

@@ -1,7 +1,7 @@
 import { InfoTooltipRender } from '../../../lib/primitives/info-slot.types';
 import type * as React from "react";
 import type * as TabsPrimitive from "@radix-ui/react-tabs";
-export type TabsVariant = "line" | "pill" | "outline" | "box";
+export type TabsVariant = "line" | "lineBorderless" | "pill" | "outline" | "box" | "soft";
 export type TabsSize = "default" | "sm";
 export type ActiveColorConfig = {
     text: string;
@@ -25,4 +25,8 @@ export type TabsTriggerProps = React.ComponentPropsWithoutRef<typeof TabsPrimiti
 export type TabsImageProps = React.HTMLAttributes<HTMLDivElement> & {
     activeImage: React.ReactNode;
     inactiveImage: React.ReactNode;
+    /** Show `activeImage` on trigger hover as well as the selected state. */
+    activeOnHover?: boolean;
+    /** Apply `grayscale` to `inactiveImage` (use one color asset for both states). */
+    grayscaleInactive?: boolean;
 };

package/dist/form-react/Fields/DateRangeField.js

@@ -1,42 +1,42 @@
 import { jsx as a } from "react/jsx-runtime";
 import "react";
 import { Controller as S } from "react-hook-form";
-import { DateRangePicker as v } from "../../components/forms/date-picker/date-range-picker.js";
-import { toLocalDate as c } from "../utils/calendar-boundary.js";
-import { resolveDateRangeMinMax as P } from "../utils/date.utils.js";
-const Y = ({
+import { DateRangePicker as F } from "../../components/forms/date-picker/date-range-picker.js";
+import { toLocalDate as d } from "../utils/calendar-boundary.js";
+import { resolveDateRangeMinMax as P, handleDateFnsFormat as x } from "../utils/date.utils.js";
+const q = ({
   field: r,
-  validationRules: d,
+  validationRules: c,
   isDisabled: l,
   formHelpers: n
 }) => {
   const t = r.fieldType === "date_range" ? r : null;
   if (!t) return null;
-  const h = n.form.control, { minDate: m, maxDate: u, startMonth: p, endMonth: g } = P(t);
+  const m = n.form.control, { minDate: h, maxDate: u, startMonth: p, endMonth: f } = P(t), g = t.dateFormat ? x(t.dateFormat) : void 0;
   return /* @__PURE__ */ a(
     S,
     {
       name: r.id,
-      control: h,
+      control: m,
       disabled: l,
-      rules: d,
-      render: ({ field: f, fieldState: s }) => {
-        const i = !!s.error, o = f.value;
+      rules: c,
+      render: ({ field: D, fieldState: s }) => {
+        const i = !!s.error, o = D.value;
         return /* @__PURE__ */ a("div", { children: /* @__PURE__ */ a(
-          v,
+          F,
           {
             label: r.label,
-            minDate: m,
+            minDate: h,
             maxDate: u,
             startMonth: p,
-            endMonth: g,
+            endMonth: f,
             value: {
-              from: o?.start ? c(o.start) : void 0,
-              to: o?.end ? c(o.end) : void 0
+              from: o?.start ? d(o.start) : void 0,
+              to: o?.end ? d(o.end) : void 0
             },
             onChange: (e) => {
-              const M = e?.from ? `${e.from.getFullYear()}-${String(e.from.getMonth() + 1).padStart(2, "0")}-${String(e.from.getDate()).padStart(2, "0")}` : null, D = e?.to ? `${e.to.getFullYear()}-${String(e.to.getMonth() + 1).padStart(2, "0")}-${String(e.to.getDate()).padStart(2, "0")}` : null;
-              n.setValue(r.id, { start: M, end: D });
+              const M = e?.from ? `${e.from.getFullYear()}-${String(e.from.getMonth() + 1).padStart(2, "0")}-${String(e.from.getDate()).padStart(2, "0")}` : null, v = e?.to ? `${e.to.getFullYear()}-${String(e.to.getMonth() + 1).padStart(2, "0")}-${String(e.to.getDate()).padStart(2, "0")}` : null;
+              n.setValue(r.id, { start: M, end: v });
             },
             startPlaceholder: t.startPlaceholder || "Start Date",
             endPlaceholder: t.endPlaceholder || "End Date",
@@ -51,7 +51,8 @@ const Y = ({
             fiscalYearStartMonth: t.fiscalYearStartMonth,
             fiscalMonthPattern: t.fiscalMonthPattern,
             showPresets: t.showPresets,
-            autoNavigateToAvailable: t.autoNavigateToAvailable
+            autoNavigateToAvailable: t.autoNavigateToAvailable,
+            format: g
           }
         ) });
       }
@@ -59,5 +60,5 @@ const Y = ({
   );
 };
 export {
-  Y as DateRangeField
+  q as DateRangeField
 };