@payfit/unity-components 2.46.13 → 2.46.14

package/dist/esm/components/data-table/parts/DataTableBulkActions.js

@@ -0,0 +1,150 @@
+import { jsx as o, jsxs as m, Fragment as A } from "react/jsx-runtime";
+import { useRef as d, useState as S, useCallback as k } from "react";
+import { useHotkeys as f } from "react-hotkeys-hook";
+import { useIntl as v, FormattedMessage as c } from "react-intl";
+import { ActionBar as I } from "../../action-bar/ActionBar.js";
+import { ActionBarButton as P } from "../../action-bar/parts/ActionBarButton.js";
+import { ActionBarIconButton as R } from "../../action-bar/parts/ActionBarIconButton.js";
+import { ActionBarRoot as w } from "../../action-bar/parts/ActionBarRoot.js";
+import { Button as x } from "../../button/Button.js";
+function F({
+  selectionCount: t,
+  onClearSelection: a,
+  renderSelectionText: r,
+  hasKeyshortcuts: s,
+  keyShortcuts: n
+}) {
+  return /* @__PURE__ */ m(A, { children: [
+    /* @__PURE__ */ m(
+      "div",
+      {
+        className: "uy:typography-body uy:whitespace-nowrap! uy:sr-only uy:md:not-sr-only",
+        role: "status",
+        "aria-live": "polite",
+        "aria-atomic": "true",
+        children: [
+          r ? r(t) : /* @__PURE__ */ o(
+            c,
+            {
+              id: "unity:component:action-bar:selection-count-text",
+              defaultMessage: "{selectionCount, plural, =0 {no items} one {item} other {items}} selected",
+              values: { selectionCount: t }
+            }
+          ),
+          s && /* @__PURE__ */ o("span", { className: "uy:sr-only", children: /* @__PURE__ */ o(
+            c,
+            {
+              id: "unity:component:action-bar:key-shortcuts-text",
+              defaultMessage: "Use {keyShortcuts} to focus the action bar",
+              values: {
+                keyShortcuts: n
+              }
+            }
+          ) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ o(x, { color: "inverted", variant: "ghost", onPress: a, children: /* @__PURE__ */ o(
+      c,
+      {
+        id: "unity:component:action-bar:clear-selection-button",
+        defaultMessage: "Clear selection"
+      }
+    ) })
+  ] });
+}
+const C = (t) => t.type === "icon-button";
+function M({
+  table: t,
+  actions: a,
+  renderSelectionText: r
+}) {
+  const s = d(null), n = d(null), [g, i] = S(!1), p = v(), l = "f6";
+  f(
+    l,
+    () => {
+      if ((t.getIsAllPageRowsSelected() || t.getIsSomePageRowsSelected()) && s.current) {
+        const u = s.current.querySelectorAll(
+          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+        );
+        n.current = document.activeElement, u.length > 0 && (u[0].focus(), i(!0));
+      }
+    },
+    {
+      enableOnFormTags: !0
+    }
+  ), f(
+    "esc",
+    () => {
+      g && n.current && (n.current.focus(), i(!1));
+    },
+    {
+      enableOnFormTags: !0
+    }
+  );
+  const b = t.getIsAllPageRowsSelected() || t.getIsSomePageRowsSelected(), y = t.getSelectedRowModel().rows.length, h = t.getPageCount() > 0, B = k(() => {
+    t.resetRowSelection();
+  }, [t]);
+  return /* @__PURE__ */ o(
+    w,
+    {
+      isVisible: b,
+      offsetBottom: h ? "$600" : 0,
+      children: /* @__PURE__ */ o(
+        I,
+        {
+          ref: s,
+          actions: a,
+          prefixContent: /* @__PURE__ */ o(
+            F,
+            {
+              selectionCount: y,
+              onClearSelection: B,
+              renderSelectionText: r,
+              hasKeyshortcuts: !0,
+              keyShortcuts: l
+            }
+          ),
+          onFocus: () => {
+            i(!0);
+          },
+          onBlur: () => {
+            i(!1);
+          },
+          "aria-keyshortcuts": l,
+          "aria-label": p.formatMessage({
+            id: "unity:component:action-bar:toolbar-label",
+            defaultMessage: "Bulk actions toolbar"
+          }),
+          children: (e) => C(e) ? /* @__PURE__ */ o(
+            R,
+            {
+              icon: e.meta.icon,
+              label: e.label,
+              variant: e.variant,
+              onPress: e.meta.onPress,
+              isDisabled: e.meta.isDisabled,
+              isLoading: e.meta.isLoading
+            },
+            e.id
+          ) : /* @__PURE__ */ o(
+            P,
+            {
+              variant: e.variant,
+              onPress: e.meta?.onPress,
+              prefixIcon: e.meta?.prefixIcon,
+              isDisabled: e.meta?.isDisabled,
+              isLoading: e.meta?.isLoading,
+              children: e.label
+            },
+            e.id
+          )
+        }
+      )
+    }
+  );
+}
+M.displayName = "DataTableBulkActions";
+export {
+  M as DataTableBulkActions
+};

package/dist/esm/components/data-table/parts/DataTableRoot.d.ts

@@ -0,0 +1,37 @@
+import { PropsWithChildren } from 'react';
+export declare const dataTableRoot: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export type DataTableRootProps = PropsWithChildren;
+/**
+ * The DataTableRoot component provides positioning and layout context for DataTable components.
+ * It serves as the container for DataTable, DataTableBulkActions, and other related components.
+ * @param {DataTableRootProps} props - The props for the DataTableRoot component
+ * @example
+ * ```tsx
+ * import { DataTableRoot, DataTable, DataTableBulkActions } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <DataTableRoot>
+ *       <DataTable table={table}>
+ *         {row => (
+ *           <TableRow key={row.id} isSelected={row.getIsSelected()}>
+ *             {row.getVisibleCells().map(cell => (
+ *               <TableCell key={cell.id}>
+ *                 {flexRender(cell.column.columnDef.cell, cell.getContext())}
+ *               </TableCell>
+ *             ))}
+ *           </TableRow>
+ *         )}
+ *       </DataTable>
+ *       <DataTableBulkActions table={table} actions={actions} />
+ *     </DataTableRoot>
+ *   )
+ * }
+ * ```
+ * @see {@link DataTableRootProps} for all available props
+ * @see Source code in [Github](https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/data-table)
+ */
+declare const DataTableRoot: import('react').ForwardRefExoticComponent<{
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLDivElement>>;
+export { DataTableRoot };

package/dist/esm/components/data-table/parts/DataTableRoot.js

@@ -0,0 +1,13 @@
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as r } from "react";
+import { uyTv as m } from "@payfit/unity-themes";
+const i = m({
+  base: ["uy:relative uy:overflow-hidden"]
+}), l = r(
+  ({ children: o, ...a }, t) => /* @__PURE__ */ e("div", { ref: t, className: i(), ...a, children: o })
+);
+l.displayName = "DataTableRoot";
+export {
+  l as DataTableRoot,
+  i as dataTableRoot
+};

package/dist/esm/components/date-calendar/DateCalendar.d.ts

@@ -0,0 +1,23 @@
+import { DateValue } from '@internationalized/date';
+import { CalendarProps as AriaDateCalendarProps } from 'react-aria-components/Calendar';
+type PropsFromAriaCalendar<TDate extends DateValue> = AriaDateCalendarProps<TDate>;
+export type DateCalendarProps<TDate extends DateValue> = PropsFromAriaCalendar<TDate>;
+/**
+ * The `DateCalendar` component displays one or more date grids and allows users to navigate through dates select a single date.
+ * @param {DateCalendarProps} props - The props for the `DateCalendar` component
+ * @example
+ * ```tsx
+ * import { DateCalendar } from '@payfit/unity-components'
+ * import { CalendarDate } from '@internationalized/date'
+ *
+ * const [date, setDate] = useState(new CalendatDate(2022, 1, 1))
+ * <DateCalendar value={date} onChange={setDate} />
+ * ```
+ * @see {@link DateCalendarProps} for all available props
+ * @remarks [API and Demos](https://unity-components.payfit.io/?path=/docs/date-and-time-datecalendar--docs)
+ */
+declare function DateCalendar<TDate extends DateValue>({ value, defaultValue, minValue, maxValue, onChange, onFocusChange, ...props }: DateCalendarProps<TDate>): import("react/jsx-runtime").JSX.Element;
+declare namespace DateCalendar {
+    var displayName: string;
+}
+export { DateCalendar };

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

@@ -0,0 +1,176 @@
+import { jsx as a, jsxs as s } from "react/jsx-runtime";
+import { useState as b } from "react";
+import { today as k, getLocalTimeZone as f, isToday as F } from "@internationalized/date";
+import { useUnityTheme as R, uyTv as P } from "@payfit/unity-themes";
+import { Calendar as U, Heading as W, CalendarGrid as Z, CalendarGridHeader as $, CalendarHeaderCell as q, CalendarGridBody as w, CalendarCell as z } from "react-aria-components/Calendar";
+import { useIntl as A } from "react-intl";
+import { IconButton as C } from "../icon-button/IconButton.js";
+import { calendarBase as E } from "./DateCalendar.variants.js";
+import { useMonthsList as J } from "./hooks/useMonthsList.js";
+import { useYearsList as K } from "./hooks/useYearsList.js";
+import { DateSegmentSelect as v } from "./parts/DateSegmentSelect.js";
+const Q = P({
+  extend: E,
+  slots: {
+    calendarGrid: "uy:border-spacing-25",
+    calendarCell: [
+      // selected cells
+      //theme: common
+      "uy:data-[selected]:bg-surface-form-active",
+      //theme: legacy
+      "uy:theme-legacy:data-[selected]:text-content-inverted",
+      "uy:theme-legacy:data-[today]:data-[selected]:after:bg-content-inverted",
+      //theme:rebrand
+      "uy:theme-rebrand:data-[selected]:text-content-form-active",
+      "uy:theme-rebrand:data-[today]:data-[selected]:after:bg-border-form-active"
+    ]
+  },
+  variants: {
+    isDisabled: {
+      true: {
+        calendarCell: "uy:data-[selected]:bg-transparent uy:data-[selected]:text-content-neutral-disabled"
+      }
+    }
+  }
+});
+function X({
+  value: c,
+  defaultValue: d,
+  minValue: r,
+  maxValue: n,
+  onChange: p,
+  onFocusChange: D,
+  ...t
+}) {
+  const m = A(), { theme: y } = R(), N = k(f()), x = J(), G = K({
+    startYear: r?.year,
+    endYear: n?.year
+  }), [H, L] = b(c ?? d ?? null), [o, i] = b(() => {
+    const e = c ?? d ?? N;
+    return r && e.compare(r) < 0 ? r : n && e.compare(n) > 0 ? n : e;
+  }), M = (e) => {
+    i(
+      (l) => l.set({ month: parseInt(e, 10) })
+    );
+  }, S = (e) => {
+    i(
+      (l) => l.set({ year: parseInt(e, 10) })
+    );
+  }, {
+    base: B,
+    calendarWrapper: I,
+    dialogHeader: T,
+    dialogHeaderGroup: u,
+    calendarGrid: Y,
+    calendarHeaderCell: O,
+    calendarCell: j
+  } = Q({
+    isDisabled: t.isDisabled,
+    isInteractive: !t.isDisabled && !t.isReadOnly
+  }), h = y === "rebrand" ? "outlined" : "ghost", g = y === "rebrand" ? "primary" : "neutral";
+  return /* @__PURE__ */ a("div", { className: B(), "data-dd-privacy": "mask", children: /* @__PURE__ */ a(
+    U,
+    {
+      ...t,
+      minValue: r,
+      maxValue: n,
+      value: H,
+      defaultValue: d,
+      onChange: (e) => {
+        L(e), p?.(e);
+      },
+      focusedValue: o,
+      onFocusChange: (e) => {
+        i(e), D?.(e);
+      },
+      children: /* @__PURE__ */ s("div", { className: I(), children: [
+        /* @__PURE__ */ s("header", { className: T(), children: [
+          /* @__PURE__ */ a(W, { className: "uy:sr-only" }),
+          /* @__PURE__ */ s(
+            "div",
+            {
+              className: u({
+                className: "uy:pl-100 uy:gap-200"
+              }),
+              children: [
+                /* @__PURE__ */ a(
+                  v,
+                  {
+                    type: "month",
+                    items: x,
+                    value: o.month.toString(),
+                    onChange: M,
+                    isDisabled: t.isDisabled
+                  }
+                ),
+                /* @__PURE__ */ a(
+                  v,
+                  {
+                    type: "year",
+                    items: G,
+                    value: o.year.toString(),
+                    onChange: S,
+                    isDisabled: t.isDisabled
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ s(
+            "div",
+            {
+              className: u({
+                className: "uy:ml-auto uy:gap-100"
+              }),
+              children: [
+                /* @__PURE__ */ a(
+                  C,
+                  {
+                    slot: "previous",
+                    icon: "CaretLeftOutlined",
+                    color: g,
+                    label: m.formatMessage({
+                      id: "unity:component:common:previous",
+                      defaultMessage: "Previous"
+                    }),
+                    variant: h,
+                    isDisabled: t.isDisabled
+                  }
+                ),
+                /* @__PURE__ */ a(
+                  C,
+                  {
+                    slot: "next",
+                    icon: "CaretRightOutlined",
+                    color: g,
+                    label: m.formatMessage({
+                      id: "unity:component:common:next",
+                      defaultMessage: "Next"
+                    }),
+                    variant: h,
+                    isDisabled: t.isDisabled
+                  }
+                )
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ s(Z, { className: Y(), weekdayStyle: "short", children: [
+          /* @__PURE__ */ a($, { children: (e) => /* @__PURE__ */ a(q, { className: O(), children: e }) }),
+          /* @__PURE__ */ a(w, { children: (e) => /* @__PURE__ */ a(
+            z,
+            {
+              date: e,
+              "data-today": F(e, f()) ? !0 : void 0,
+              className: j()
+            }
+          ) })
+        ] })
+      ] })
+    }
+  ) });
+}
+X.displayName = "DateCalendar";
+export {
+  X as DateCalendar
+};

package/dist/esm/components/date-calendar/DateCalendar.variants.d.ts

@@ -0,0 +1,62 @@
+/**
+ * Base calendar styles shared between DateCalendar and DateRangeCalendar.
+ * Use `extend: calendarBase` in component-specific uyTv definitions.
+ */
+export declare const calendarBase: import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: {
+            calendarHeaderCell: string;
+        };
+    };
+    isInteractive: {
+        true: {
+            calendarCell: string[];
+        };
+    };
+}, {
+    base: string;
+    calendarWrapper: string;
+    dialogHeader: string;
+    dialogHeaderGroup: string;
+    calendarGrid: string;
+    calendarHeaderCell: string;
+    calendarCell: string[];
+}, undefined, {
+    isDisabled: {
+        true: {
+            calendarHeaderCell: string;
+        };
+    };
+    isInteractive: {
+        true: {
+            calendarCell: string[];
+        };
+    };
+}, {
+    base: string;
+    calendarWrapper: string;
+    dialogHeader: string;
+    dialogHeaderGroup: string;
+    calendarGrid: string;
+    calendarHeaderCell: string;
+    calendarCell: string[];
+}, import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: {
+            calendarHeaderCell: string;
+        };
+    };
+    isInteractive: {
+        true: {
+            calendarCell: string[];
+        };
+    };
+}, {
+    base: string;
+    calendarWrapper: string;
+    dialogHeader: string;
+    dialogHeaderGroup: string;
+    calendarGrid: string;
+    calendarHeaderCell: string;
+    calendarCell: string[];
+}, undefined, unknown, unknown, undefined>>;

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

@@ -0,0 +1,51 @@
+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
+  }
+});
+export {
+  t as calendarBase
+};

package/dist/esm/components/date-calendar/hooks/useMonthsList.d.ts

@@ -0,0 +1,4 @@
+export declare function useMonthsList(): {
+    id: string;
+    name: string;
+}[];

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

@@ -0,0 +1,26 @@
+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]);
+}
+export {
+  f as useMonthsList
+};

package/dist/esm/components/date-calendar/hooks/useYearsList.d.ts

@@ -0,0 +1,10 @@
+export interface UseYearsListOptions {
+    yearsBefore?: number;
+    yearsAfter?: number;
+    startYear?: number;
+    endYear?: number;
+}
+export declare function useYearsList({ yearsBefore, yearsAfter, startYear, endYear, }?: UseYearsListOptions): {
+    id: string;
+    name: string;
+}[];

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

@@ -0,0 +1,33 @@
+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]
+  );
+}
+export {
+  S as useYearsList
+};

package/dist/esm/components/date-calendar/parts/DateSegmentSelect.d.ts

@@ -0,0 +1,15 @@
+export interface DateSegmentSelectProps {
+    items: Array<{
+        id: string | number;
+        name: string;
+    }>;
+    value: string;
+    onChange: (value: string) => void;
+    type: 'month' | 'year';
+    isDisabled?: boolean;
+}
+declare function DateSegmentSelect({ items, value, onChange, type, isDisabled, }: DateSegmentSelectProps): import("react/jsx-runtime").JSX.Element;
+declare namespace DateSegmentSelect {
+    var displayName: string;
+}
+export { DateSegmentSelect };

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

@@ -0,0 +1,66 @@
+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}`
+    }) })
+  ] });
+}
+x.displayName = "DateSegmentSelect";
+export {
+  x as DateSegmentSelect
+};