@payfit/unity-components 2.47.5 → 2.47.7

package/dist/esm/components/date-calendar/DateCalendar.variants.js

@@ -1,51 +1,34 @@
 import { uyTv as e } from "@payfit/unity-themes";
-const t = e({
-  slots: {
-    base: "",
-    calendarWrapper: "uy:flex uy:flex-col uy:gap-100",
-    dialogHeader: "uy:flex uy:items-center uy:h-500 uy:w-full",
-    dialogHeaderGroup: "uy:flex uy:items-center",
-    calendarGrid: "uy:border-separate uy:w-full",
-    calendarHeaderCell: "uy:typography-body-small-strong uy:text-content-neutral-low uy:w-[44px] uy:h-[44px] uy:p-[1px] uy:uppercase",
-    calendarCell: [
-      //theme: common
-      // base styles
-      "uy:typography-body uy:relative uy:text-content-form-enabled uy:w-[44px] uy:h-[44px] uy:p-[1px] uy:outline-hidden uy:cursor-pointer uy:rounded-circle uy:flex uy:items-center uy:justify-center",
-      // cells outside of current month
-      "uy:data-[outside-month]:text-content-neutral-disabled uy:data-[outside-month]:cursor-not-allowed uy:data-[disabled]:text-content-neutral-disabled uy:data-[disabled]:cursor-not-allowed uy:data-[unavailable]:text-content-neutral-disabled uy:data-[unavailable]:cursor-not-allowed",
-      // "current day" (today) indicator — dot
-      "uy:data-[today]:after:content-[''] uy:data-[today]:after:absolute uy:data-[today]:after:bottom-[6px] uy:data-[today]:after:w-[6px] uy:data-[today]:after:h-[6px] uy:data-[today]:after:rounded-circle",
-      //theme: legacy
-      "uy:theme-legacy:data-[today]:after:bg-surface-primary-active",
-      //theme: rebrand
-      "uy:theme-rebrand:data-[today]:after:bg-border-form-active"
-    ]
-  },
-  variants: {
-    isDisabled: {
-      true: {
-        calendarHeaderCell: "uy:text-content-form-disabled"
-      }
-    },
-    isInteractive: {
-      true: {
-        calendarCell: [
-          //theme: common
-          "uy:hover:bg-surface-neutral-hover uy:active:bg-surface-form-active",
-          "uy:data-[pressed]:bg-surface-neutral-pressed uy:data-[focus-visible]:outline-2 uy:data-[focus-visible]:outline-solid uy:data-[focus-visible]:outline-utility-focus-ring uy:data-[focus-visible]:outline-offset-2",
-          //theme: rebrand
-          "uy:theme-rebrand:active:text-content-form-active",
-          // Disable hover on non-selectable cells
-          "uy:data-[disabled]:hover:bg-transparent uy:data-[unavailable]:hover:bg-transparent uy:data-[outside-month]:hover:bg-transparent"
-        ]
-      }
-    }
-  },
-  defaultVariants: {
-    isDisabled: !1,
-    isInteractive: !0
-  }
+//#region src/components/date-calendar/DateCalendar.variants.ts
+var t = e({
+	slots: {
+		base: "",
+		calendarWrapper: "uy:flex uy:flex-col uy:gap-100",
+		dialogHeader: "uy:flex uy:items-center uy:h-500 uy:w-full",
+		dialogHeaderGroup: "uy:flex uy:items-center",
+		calendarGrid: "uy:border-separate uy:w-full",
+		calendarHeaderCell: "uy:typography-body-small-strong uy:text-content-neutral-low uy:w-[44px] uy:h-[44px] uy:p-[1px] uy:uppercase",
+		calendarCell: [
+			"uy:typography-body uy:relative uy:text-content-form-enabled uy:w-[44px] uy:h-[44px] uy:p-[1px] uy:outline-hidden uy:cursor-pointer uy:rounded-circle uy:flex uy:items-center uy:justify-center",
+			"uy:data-[outside-month]:text-content-neutral-disabled uy:data-[outside-month]:cursor-not-allowed uy:data-[disabled]:text-content-neutral-disabled uy:data-[disabled]:cursor-not-allowed uy:data-[unavailable]:text-content-neutral-disabled uy:data-[unavailable]:cursor-not-allowed",
+			"uy:data-[today]:after:content-[''] uy:data-[today]:after:absolute uy:data-[today]:after:bottom-[6px] uy:data-[today]:after:w-[6px] uy:data-[today]:after:h-[6px] uy:data-[today]:after:rounded-circle",
+			"uy:theme-legacy:data-[today]:after:bg-surface-primary-active",
+			"uy:theme-rebrand:data-[today]:after:bg-border-form-active"
+		]
+	},
+	variants: {
+		isDisabled: { true: { calendarHeaderCell: "uy:text-content-form-disabled" } },
+		isInteractive: { true: { calendarCell: [
+			"uy:hover:bg-surface-neutral-hover uy:active:bg-surface-form-active",
+			"uy:data-[pressed]:bg-surface-neutral-pressed uy:data-[focus-visible]:outline-2 uy:data-[focus-visible]:outline-solid uy:data-[focus-visible]:outline-utility-focus-ring uy:data-[focus-visible]:outline-offset-2",
+			"uy:theme-rebrand:active:text-content-form-active",
+			"uy:data-[disabled]:hover:bg-transparent uy:data-[unavailable]:hover:bg-transparent uy:data-[outside-month]:hover:bg-transparent"
+		] } }
+	},
+	defaultVariants: {
+		isDisabled: !1,
+		isInteractive: !0
+	}
 });
-export {
-  t as calendarBase
-};
+//#endregion
+export { t as calendarBase };

package/dist/esm/components/date-calendar/hooks/useMonthsList.js

@@ -1,26 +1,19 @@
-import { useMemo as l } from "react";
-import { createCalendar as d, today as i, getLocalTimeZone as a, CalendarDate as m } from "@internationalized/date";
-import { useLocale as u } from "react-aria-components/I18nProvider";
-function f() {
-  const { locale: o } = u(), c = new Intl.DateTimeFormat().resolvedOptions().calendar, e = d(c);
-  return l(() => {
-    const t = i(a()), n = new m(
-      e,
-      t.year,
-      t.month,
-      t.day
-    );
-    return Array.from({ length: e.getMonthsInYear(n) }).map(
-      (g, s) => {
-        const r = new m(e, n.year, s + 1, 1);
-        return {
-          id: r.month.toString(),
-          name: r.toDate(a()).toLocaleString(o, { month: "long" })
-        };
-      }
-    );
-  }, [o, e]);
+import { useMemo as e } from "react";
+import { CalendarDate as t, createCalendar as n, getLocalTimeZone as r, today as i } from "@internationalized/date";
+import { useLocale as a } from "react-aria-components/I18nProvider";
+//#region src/components/date-calendar/hooks/useMonthsList.ts
+function o() {
+	let { locale: o } = a(), s = new Intl.DateTimeFormat().resolvedOptions().calendar, c = n(s);
+	return e(() => {
+		let e = i(r()), n = new t(c, e.year, e.month, e.day);
+		return Array.from({ length: c.getMonthsInYear(n) }).map((e, i) => {
+			let a = new t(c, n.year, i + 1, 1);
+			return {
+				id: a.month.toString(),
+				name: a.toDate(r()).toLocaleString(o, { month: "long" })
+			};
+		});
+	}, [o, c]);
 }
-export {
-  f as useMonthsList
-};
+//#endregion
+export { o as useMonthsList };

package/dist/esm/components/date-calendar/hooks/useYearsList.js

@@ -1,33 +1,24 @@
-import { useMemo as g } from "react";
-import { today as D, getLocalTimeZone as c, createCalendar as L, CalendarDate as d } from "@internationalized/date";
-import { useLocale as v } from "react-aria-components/I18nProvider";
-function S({
-  yearsBefore: l = 100,
-  yearsAfter: s = 30,
-  startYear: m,
-  endYear: u
-} = {}) {
-  const { locale: o } = v(), a = D(c()), y = new Intl.DateTimeFormat().resolvedOptions().calendar, t = L(y), n = new d(
-    t,
-    a.year,
-    a.month,
-    a.day
-  );
-  let e = m, r = u;
-  return e === void 0 && (e = n.year - l), r === void 0 && (r = n.year + s), g(
-    () => Array.from({ length: r - e + 1 }).map((w, f) => {
-      const i = e + f, p = new d(t, i, 1, 1);
-      return {
-        id: i.toString(),
-        name: p.toDate(c()).toLocaleString(o, {
-          year: "numeric",
-          calendar: t.identifier
-        })
-      };
-    }),
-    [o, t, r, e]
-  );
+import { useMemo as e } from "react";
+import { CalendarDate as t, createCalendar as n, getLocalTimeZone as r, today as i } from "@internationalized/date";
+import { useLocale as a } from "react-aria-components/I18nProvider";
+//#region src/components/date-calendar/hooks/useYearsList.ts
+function o({ yearsBefore: o = 100, yearsAfter: s = 30, startYear: c, endYear: l } = {}) {
+	let { locale: u } = a(), d = i(r()), f = new Intl.DateTimeFormat().resolvedOptions().calendar, p = n(f), m = new t(p, d.year, d.month, d.day), h = c, g = l;
+	return h === void 0 && (h = m.year - o), g === void 0 && (g = m.year + s), e(() => Array.from({ length: g - h + 1 }).map((e, n) => {
+		let i = h + n, a = new t(p, i, 1, 1);
+		return {
+			id: i.toString(),
+			name: a.toDate(r()).toLocaleString(u, {
+				year: "numeric",
+				calendar: p.identifier
+			})
+		};
+	}), [
+		u,
+		p,
+		g,
+		h
+	]);
 }
-export {
-  S as useYearsList
-};
+//#endregion
+export { o as useYearsList };

package/dist/esm/components/date-calendar/parts/DateSegmentSelect.js

@@ -1,66 +1,63 @@
-import { jsxs as b, jsx as n } from "react/jsx-runtime";
-import { useState as I } from "react";
-import { IconSprite as v } from "@payfit/unity-icons";
-import { useId as $ } from "react-aria/useId";
-import { useIntl as w } from "react-intl";
-function x({
-  items: a,
-  value: o,
-  onChange: m,
-  type: e,
-  isDisabled: i = !1
-}) {
-  const s = (t) => () => a.find((g) => g.id === t)?.name ?? Array.from({ length: 3 }).join("\0"), r = $(), l = w(), [y, p] = I(s(o)), c = `${r}-calendar-${e}-select-label`, d = `${r}-calendar-${e}-select`, u = `${r}-calendar-${e}-select-description`, f = e === "month" ? "unity:component:form-field:date-picker:segment-select:month:label" : "unity:component:form-field:date-picker:segment-select:year:label", h = e === "month" ? "unity:component:form-field:date-picker:segment-select:month:description" : "unity:component:form-field:date-picker:segment-select:year:description";
-  return /* @__PURE__ */ b("div", { className: "uy:isolation-isolate uy:relative uy:inline-flex uy:items-center uy:cursor-pointer", children: [
-    /* @__PURE__ */ n(
-      "label",
-      {
-        id: c,
-        htmlFor: d,
-        className: "uy:sr-only",
-        "aria-hidden": "true",
-        children: l.formatMessage({
-          id: f,
-          defaultMessage: `Change current ${e}`
-        })
-      }
-    ),
-    /* @__PURE__ */ n(
-      "select",
-      {
-        id: d,
-        value: o,
-        onChange: (t) => {
-          m(t.target.value), p(s(t.target.value));
-        },
-        disabled: i,
-        className: "uy:appearance-none uy:box-border uy:w-[var(--uy-selected-item-width)] uy:bg-transparent uy:border-none uy:rounded-50 uy:capitalize uy:text-content-form-enabled uy:typography-action-large uy:cursor-pointer uy:pr-300 uy:disabled:text-content-form-disabled uy:data-[focus-visible='true']:outline-2 uy:data-[focus-visible='true']:outline-offset-2 uy:data-[focus-visible='true']:outline-utility-focus-ring [background-color:transparent] [-webkit-tap-highlight-color:transparent]",
-        style: {
-          "--uy-selected-item-width": `calc(var(--uy-spacing-300) + ${y.length}ch)`
-        },
-        "aria-labelledby": c,
-        "aria-describedby": u,
-        children: a.map((t) => /* @__PURE__ */ n("option", { value: t.id, children: t.name }, t.id))
-      }
-    ),
-    /* @__PURE__ */ n("div", { className: "uy:absolute uy:right-0 uy:pointer-events-none uy:text-content-neutral-low", children: /* @__PURE__ */ n(
-      v,
-      {
-        src: "CaretDownOutlined",
-        width: 20,
-        height: 20,
-        color: "inherit",
-        role: "presentation",
-        className: i ? "uy:text-content-form-disabled" : ""
-      }
-    ) }),
-    /* @__PURE__ */ n("span", { id: u, className: "uy:sr-only", "aria-hidden": "true", children: l.formatMessage({
-      id: h,
-      defaultMessage: `Press Enter or Space to change ${e}, then use up and down arrows to select a ${e}`
-    }) })
-  ] });
+import { useState as e } from "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { useIntl as r } from "react-intl";
+import { IconSprite as i } from "@payfit/unity-icons";
+import { useId as a } from "react-aria/useId";
+//#region src/components/date-calendar/parts/DateSegmentSelect.tsx
+function o({ items: o, value: s, onChange: c, type: l, isDisabled: u = !1 }) {
+	let d = (e) => () => o.find((t) => t.id === e)?.name ?? Array.from({ length: 3 }).join("\0"), f = a(), p = r(), [m, h] = e(d(s)), g = `${f}-calendar-${l}-select-label`, _ = `${f}-calendar-${l}-select`, v = `${f}-calendar-${l}-select-description`, y = l === "month" ? "unity:component:form-field:date-picker:segment-select:month:label" : "unity:component:form-field:date-picker:segment-select:year:label", b = l === "month" ? "unity:component:form-field:date-picker:segment-select:month:description" : "unity:component:form-field:date-picker:segment-select:year:description";
+	return /* @__PURE__ */ n("div", {
+		className: "uy:isolation-isolate uy:relative uy:inline-flex uy:items-center uy:cursor-pointer",
+		children: [
+			/* @__PURE__ */ t("label", {
+				id: g,
+				htmlFor: _,
+				className: "uy:sr-only",
+				"aria-hidden": "true",
+				children: p.formatMessage({
+					id: y,
+					defaultMessage: `Change current ${l}`
+				})
+			}),
+			/* @__PURE__ */ t("select", {
+				id: _,
+				value: s,
+				onChange: (e) => {
+					c(e.target.value), h(d(e.target.value));
+				},
+				disabled: u,
+				className: "uy:appearance-none uy:box-border uy:w-[var(--uy-selected-item-width)] uy:bg-transparent uy:border-none uy:rounded-50 uy:capitalize uy:text-content-form-enabled uy:typography-action-large uy:cursor-pointer uy:pr-300 uy:disabled:text-content-form-disabled uy:data-[focus-visible='true']:outline-2 uy:data-[focus-visible='true']:outline-offset-2 uy:data-[focus-visible='true']:outline-utility-focus-ring [background-color:transparent] [-webkit-tap-highlight-color:transparent]",
+				style: { "--uy-selected-item-width": `calc(var(--uy-spacing-300) + ${m.length}ch)` },
+				"aria-labelledby": g,
+				"aria-describedby": v,
+				children: o.map((e) => /* @__PURE__ */ t("option", {
+					value: e.id,
+					children: e.name
+				}, e.id))
+			}),
+			/* @__PURE__ */ t("div", {
+				className: "uy:absolute uy:right-0 uy:pointer-events-none uy:text-content-neutral-low",
+				children: /* @__PURE__ */ t(i, {
+					src: "CaretDownOutlined",
+					width: 20,
+					height: 20,
+					color: "inherit",
+					role: "presentation",
+					className: u ? "uy:text-content-form-disabled" : ""
+				})
+			}),
+			/* @__PURE__ */ t("span", {
+				id: v,
+				className: "uy:sr-only",
+				"aria-hidden": "true",
+				children: p.formatMessage({
+					id: b,
+					defaultMessage: `Press Enter or Space to change ${l}, then use up and down arrows to select a ${l}`
+				})
+			})
+		]
+	});
 }
-x.displayName = "DateSegmentSelect";
-export {
-  x as DateSegmentSelect
-};
+o.displayName = "DateSegmentSelect";
+//#endregion
+export { o as DateSegmentSelect };

package/dist/esm/components/date-picker/DatePicker.js

@@ -1,174 +1,131 @@
-import { jsxs as f, jsx as a } from "react/jsx-runtime";
-import { forwardRef as U } from "react";
-import { uyTv as b } from "@payfit/unity-themes";
-import { DatePicker as B, Group as j, Button as E, Popover as M } from "react-aria-components/DatePicker";
-import { Dialog as R } from "react-aria-components/Dialog";
-import { useIntl as G } from "react-intl";
-import { DateCalendar as T } from "../date-calendar/DateCalendar.js";
-import { Icon as $ } from "../icon/Icon.js";
-import { DateInput as q } from "./parts/DateInput.js";
-const z = b({
-  slots: {
-    base: [
-      "uy:group uy:flex uy:h-5.5 uy:sm:h-500 uy:border uy:border-solid uy:rounded-100 uy:sm:rounded-75",
-      "uy:active:border-border-form-active uy:data-[focus-visible=true]:border-border-form-active uy:data-[open=true]:border-border-form-active"
-    ],
-    inputWrapper: [
-      "uy:flex uy:grow uy:rounded-100 uy:sm:rounded-75 uy:outline-none",
-      // Show focus styles when input wrapper is focused AND button is not focused
-      "uy:focus-within:outline-2 uy:focus-within:outline-solid uy:focus-within:outline-utility-focus-ring uy:focus-within:outline-offset-3",
-      // Hide focus styles when button is focused
-      "uy:group-[:has(button:focus)]:data-[focus-within]:outline-none uy:group-[:has(button:focus)]:data-[focus-within]:outline-offset-0 uy:group-[:has(button:focus)]:data-[focus-within]:outline-transparent"
-    ],
-    suffix: [
-      "uy:flex-grow-0 uy:content-center uy:p-125 uy:border-l uy:border-solid uy:rounded-r-100 uy:sm:rounded-r-75 uy:text-content-neutral-low",
-      "uy:hover:bg-surface-neutral-hover uy:active:bg-surface-neutral-pressed uy:active:border-border-form-active uy:data-[pressed=true]:not-group-data-[open=true]:bg-surface-neutral-pressed uy:data-[pressed=true]:not-group-data-[open=true]:border-border-form-active uy:group-data-[open=true]:border-border-form-active",
-      "uy:focus-visible:outline-2 uy:focus-visible:outline-utility-focus-ring uy:focus-visible:outline-offset-3"
-    ]
-  },
-  variants: {
-    isInvalid: {
-      true: {
-        base: "uy:border-border-form-error uy:bg-surface-form-error",
-        suffix: "uy:bg-surface-form-error uy:border-border-form-error"
-      }
-    },
-    isReadOnly: {
-      true: {
-        base: "uy:border-border-form-disabled uy:bg-surface-form-disabled",
-        inputWrapper: "uy:border-border-form-disabled uy:bg-surface-form-disabled",
-        suffix: "uy:bg-surface-form-disabled uy:border-border-form-disabled uy:text-content-form-disabled"
-      }
-    },
-    isDisabled: {
-      true: {
-        base: "uy:border-border-form-disabled uy:bg-surface-form-disabled",
-        inputWrapper: "uy:bg-surface-form-disabled uy:text-content-form-disabled",
-        suffix: "uy:bg-surface-form-disabled uy:border-border-form-disabled uy:text-content-form-disabled"
-      }
-    }
-  },
-  compoundVariants: [
-    {
-      isInvalid: !1,
-      isDisabled: !1,
-      isReadOnly: !1,
-      className: {
-        base: "uy:border-border-form-enabled uy:bg-surface-form-enabled",
-        suffix: "uy:border-border-form-enabled uy:bg-surface-neutral uy:text-content-neutral-low"
-      }
-    }
-  ]
-}), A = b({
-  base: "uy:w-[356px] uy:overflow-auto uy:shadow-300 uy:border uy:border-solid uy:border-border-neutral uy:bg-surface-neutral uy:rounded-md uy:sm:rounded-75",
-  variants: {
-    isEntering: {
-      true: "uy:animate-in uy:fade-in uy:data-[placement-bottom]:slide-in-from-top-1 uy:data-[placement-top]:slide-in-from-bottom-1 uy:duration-200 uy:ease-out"
-    },
-    isExiting: {
-      true: "uy:animate-out uy:fade-out uy:data-[placement-bottom]:slide-out-to-top-1 uy:data-[placement-top]:slide-out-to-bottom-1 uy:duration-150 uy:ease-in"
-    }
-  }
-}), H = U(
-  ({
-    value: t,
-    defaultValue: i,
-    isInvalid: d,
-    isLoading: y,
-    isDisabled: o,
-    isReadOnly: u,
-    onClearButtonPress: c,
-    onBlur: n,
-    onFocus: s,
-    onChange: m,
-    onOpenChange: p,
-    id: g,
-    "aria-label": h,
-    "aria-labelledby": v,
-    "aria-describedby": x,
-    "aria-details": D,
-    ...e
-  }, w) => {
-    const k = G(), { base: C, inputWrapper: P, suffix: V } = z({
-      isInvalid: !!d,
-      isReadOnly: !!u,
-      isDisabled: !!o
-    }), l = (r) => {
-      m?.(r);
-    }, N = (r) => {
-      p?.(r), r ? s?.() : n?.();
-    }, O = (r) => e.isDateUnavailable ? e.isDateUnavailable(r) : !1, W = () => {
-      c?.();
-    };
-    return /* @__PURE__ */ f(
-      B,
-      {
-        ref: w,
-        "data-dd-privacy": "mask",
-        ...e,
-        className: C(),
-        value: t,
-        defaultValue: i,
-        minValue: e.minValue,
-        maxValue: e.maxValue,
-        isReadOnly: !!u,
-        isDisabled: !!o,
-        onChange: l,
-        onFocus: s,
-        onBlur: n,
-        onOpenChange: N,
-        isDateUnavailable: O,
-        "aria-label": h,
-        "aria-labelledby": v,
-        "aria-describedby": x,
-        "aria-details": D,
-        children: [
-          /* @__PURE__ */ f(j, { className: P(), id: g, children: [
-            /* @__PURE__ */ a(
-              q,
-              {
-                isLoading: y,
-                isDisabled: o,
-                isReadOnly: u,
-                isInvalid: d,
-                onClearButtonPress: W
-              }
-            ),
-            /* @__PURE__ */ a(E, { className: V(), isDisabled: u || o, children: /* @__PURE__ */ a(
-              $,
-              {
-                src: "CalendarBlankOutlined",
-                color: "inherit",
-                alt: k.formatMessage({
-                  id: "unity:component:form-field:date-picker:calendar-button",
-                  defaultMessage: "Open Calendar"
-                })
-              }
-            ) })
-          ] }),
-          /* @__PURE__ */ a(
-            M,
-            {
-              className: ({ isEntering: r, isExiting: I }) => A({ isEntering: r, isExiting: I }),
-              children: /* @__PURE__ */ a(R, { className: "uy:p-150", "data-dd-privacy": "mask", children: /* @__PURE__ */ a(
-                T,
-                {
-                  value: t,
-                  defaultValue: i,
-                  minValue: e.minValue,
-                  maxValue: e.maxValue,
-                  onChange: l,
-                  firstDayOfWeek: e.firstDayOfWeek
-                }
-              ) })
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-H.displayName = "DatePicker";
-export {
-  H as DatePicker
-};
+import { Icon as e } from "../icon/Icon.js";
+import { DateCalendar as t } from "../date-calendar/DateCalendar.js";
+import { DateInput as n } from "./parts/DateInput.js";
+import { forwardRef as r } from "react";
+import { uyTv as i } from "@payfit/unity-themes";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { useIntl as s } from "react-intl";
+import { Dialog as c } from "react-aria-components/Dialog";
+import { Button as l, DatePicker as u, Group as d, Popover as f } from "react-aria-components/DatePicker";
+//#region src/components/date-picker/DatePicker.tsx
+var p = i({
+	slots: {
+		base: ["uy:group uy:flex uy:h-5.5 uy:sm:h-500 uy:border uy:border-solid uy:rounded-100 uy:sm:rounded-75", "uy:active:border-border-form-active uy:data-[focus-visible=true]:border-border-form-active uy:data-[open=true]:border-border-form-active"],
+		inputWrapper: [
+			"uy:flex uy:grow uy:rounded-100 uy:sm:rounded-75 uy:outline-none",
+			"uy:focus-within:outline-2 uy:focus-within:outline-solid uy:focus-within:outline-utility-focus-ring uy:focus-within:outline-offset-3",
+			"uy:group-[:has(button:focus)]:data-[focus-within]:outline-none uy:group-[:has(button:focus)]:data-[focus-within]:outline-offset-0 uy:group-[:has(button:focus)]:data-[focus-within]:outline-transparent"
+		],
+		suffix: [
+			"uy:flex-grow-0 uy:content-center uy:p-125 uy:border-l uy:border-solid uy:rounded-r-100 uy:sm:rounded-r-75 uy:text-content-neutral-low",
+			"uy:hover:bg-surface-neutral-hover uy:active:bg-surface-neutral-pressed uy:active:border-border-form-active uy:data-[pressed=true]:not-group-data-[open=true]:bg-surface-neutral-pressed uy:data-[pressed=true]:not-group-data-[open=true]:border-border-form-active uy:group-data-[open=true]:border-border-form-active",
+			"uy:focus-visible:outline-2 uy:focus-visible:outline-utility-focus-ring uy:focus-visible:outline-offset-3"
+		]
+	},
+	variants: {
+		isInvalid: { true: {
+			base: "uy:border-border-form-error uy:bg-surface-form-error",
+			suffix: "uy:bg-surface-form-error uy:border-border-form-error"
+		} },
+		isReadOnly: { true: {
+			base: "uy:border-border-form-disabled uy:bg-surface-form-disabled",
+			inputWrapper: "uy:border-border-form-disabled uy:bg-surface-form-disabled",
+			suffix: "uy:bg-surface-form-disabled uy:border-border-form-disabled uy:text-content-form-disabled"
+		} },
+		isDisabled: { true: {
+			base: "uy:border-border-form-disabled uy:bg-surface-form-disabled",
+			inputWrapper: "uy:bg-surface-form-disabled uy:text-content-form-disabled",
+			suffix: "uy:bg-surface-form-disabled uy:border-border-form-disabled uy:text-content-form-disabled"
+		} }
+	},
+	compoundVariants: [{
+		isInvalid: !1,
+		isDisabled: !1,
+		isReadOnly: !1,
+		className: {
+			base: "uy:border-border-form-enabled uy:bg-surface-form-enabled",
+			suffix: "uy:border-border-form-enabled uy:bg-surface-neutral uy:text-content-neutral-low"
+		}
+	}]
+}), m = i({
+	base: "uy:w-[356px] uy:overflow-auto uy:shadow-300 uy:border uy:border-solid uy:border-border-neutral uy:bg-surface-neutral uy:rounded-md uy:sm:rounded-75",
+	variants: {
+		isEntering: { true: "uy:animate-in uy:fade-in uy:data-[placement-bottom]:slide-in-from-top-1 uy:data-[placement-top]:slide-in-from-bottom-1 uy:duration-200 uy:ease-out" },
+		isExiting: { true: "uy:animate-out uy:fade-out uy:data-[placement-bottom]:slide-out-to-top-1 uy:data-[placement-top]:slide-out-to-bottom-1 uy:duration-150 uy:ease-in" }
+	}
+}), h = r(({ value: r, defaultValue: i, isInvalid: h, isLoading: g, isDisabled: _, isReadOnly: v, onClearButtonPress: y, onBlur: b, onFocus: x, onChange: S, onOpenChange: C, id: w, "aria-label": T, "aria-labelledby": E, "aria-describedby": D, "aria-details": O, ...k }, A) => {
+	let j = s(), { base: M, inputWrapper: N, suffix: P } = p({
+		isInvalid: !!h,
+		isReadOnly: !!v,
+		isDisabled: !!_
+	}), F = (e) => {
+		S?.(e);
+	}, I = (e) => {
+		C?.(e), e ? x?.() : b?.();
+	}, L = (e) => k.isDateUnavailable ? k.isDateUnavailable(e) : !1, R = () => {
+		y?.();
+	};
+	return /* @__PURE__ */ o(u, {
+		ref: A,
+		"data-dd-privacy": "mask",
+		...k,
+		className: M(),
+		value: r,
+		defaultValue: i,
+		minValue: k.minValue,
+		maxValue: k.maxValue,
+		isReadOnly: !!v,
+		isDisabled: !!_,
+		onChange: F,
+		onFocus: x,
+		onBlur: b,
+		onOpenChange: I,
+		isDateUnavailable: L,
+		"aria-label": T,
+		"aria-labelledby": E,
+		"aria-describedby": D,
+		"aria-details": O,
+		children: [/* @__PURE__ */ o(d, {
+			className: N(),
+			id: w,
+			children: [/* @__PURE__ */ a(n, {
+				isLoading: g,
+				isDisabled: _,
+				isReadOnly: v,
+				isInvalid: h,
+				onClearButtonPress: R
+			}), /* @__PURE__ */ a(l, {
+				className: P(),
+				isDisabled: v || _,
+				children: /* @__PURE__ */ a(e, {
+					src: "CalendarBlankOutlined",
+					color: "inherit",
+					alt: j.formatMessage({
+						id: "unity:component:form-field:date-picker:calendar-button",
+						defaultMessage: "Open Calendar"
+					})
+				})
+			})]
+		}), /* @__PURE__ */ a(f, {
+			className: ({ isEntering: e, isExiting: t }) => m({
+				isEntering: e,
+				isExiting: t
+			}),
+			children: /* @__PURE__ */ a(c, {
+				className: "uy:p-150",
+				"data-dd-privacy": "mask",
+				children: /* @__PURE__ */ a(t, {
+					value: r,
+					defaultValue: i,
+					minValue: k.minValue,
+					maxValue: k.maxValue,
+					onChange: F,
+					firstDayOfWeek: k.firstDayOfWeek
+				})
+			})
+		})]
+	});
+});
+h.displayName = "DatePicker";
+//#endregion
+export { h as DatePicker };