@payfit/unity-components 0.0.0-alpha.12 → 0.0.0-alpha.13

package/dist/cjs/index.d.cts

@@ -60,6 +60,7 @@ export * from './components/grid/Grid.variants.cjs';
 export * from './components/grid/GridItem.cjs';
 export * from './components/icon/Icon.cjs';
 export * from './components/icon-button/IconButton.cjs';
+export * from './components/definition-tooltip/DefinitionTooltip.cjs';
 export * from './components/input/Input.cjs';
 export * from './components/label/Label.cjs';
 export * from './components/link/Link.cjs';
@@ -83,6 +84,8 @@ export * from './components/pagination/Pagination.cjs';
 export * from './components/payfit-brand/PayFitBrand.cjs';
 export * from './components/payfit-brand/PayFitPreprod.cjs';
 export * from './components/pill/Pill.cjs';
+export * from './components/number-field/NumberField.cjs';
+export * from './components/number-input/NumberInput.cjs';
 export * from './components/popover/Popover.cjs';
 export * from './components/progress-bar/ProgressBar.cjs';
 export * from './components/radio-button-group/RadioButtonGroup.cjs';
@@ -140,3 +143,5 @@ export * from './components/toggle-switch/ToggleSwitch.cjs';
 export * from './components/toggle-switch-group/ToggleSwitchGroup.cjs';
 export * from './components/toggle-switch-field/ToggleSwitchField.cjs';
 export * from './components/toggle-switch-group-field/ToggleSwitchGroupField.cjs';
+export * from './components/selectable-button-group-field/SelectableButtonGroupField.cjs';
+export * from './components/date-calendar/DateCalendar.cjs';

package/dist/cjs/index.storybook-testing.d.cts

@@ -1 +1,2 @@
 export { getTestingUtilsDatePicker } from './components/date-picker-field/test-utils.cjs';
+export { getTestingUtilsSelect } from './components/select-field/test-utils.cjs';

package/dist/cjs/storybook-testing.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./components/date-picker-field/test-utils.cjs");exports.getTestingUtilsDatePicker=e.getTestingUtilsDatePicker;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./components/date-picker-field/test-utils.cjs"),e=require("./components/select-field/test-utils.cjs");exports.getTestingUtilsDatePicker=t.getTestingUtilsDatePicker;exports.getTestingUtilsSelect=e.getTestingUtilsSelect;

package/dist/esm/components/button/Button.d.ts

@@ -28,15 +28,18 @@ type UnityButtonProps = AriaButtonProps & ButtonBase & {
      */
     isLoading?: boolean;
 };
-export type ButtonProps = (UnityButtonProps & {
+type UnionButtonProps = (UnityButtonProps & {
     variant: 'primary';
 } & ButtonFilled) | (UnityButtonProps & {
     variant: 'secondary';
 } & ButtonOutlined) | (UnityButtonProps & {
     variant: 'ghost';
 } & ButtonGhost);
+export type ButtonProps = PropsWithChildren<Omit<UnionButtonProps, 'style'>>;
 /**
  * Buttons allow users to take actions, and make choices, with a single tap.
  */
-declare const Button: import('react').ForwardRefExoticComponent<PropsWithChildren<ButtonProps> & import('react').RefAttributes<HTMLButtonElement>>;
+declare const Button: import('react').ForwardRefExoticComponent<Omit<UnionButtonProps, "style"> & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLButtonElement>>;
 export { Button };

package/dist/esm/components/checkbox/Checkbox.variants.js

@@ -1,10 +1,10 @@
 import { tv as e } from "tailwind-variants";
-const s = e({
+const l = e({
   slots: {
     base: "uy-group uy-inline-flex uy-flex-col uy-gap-50 uy-py-[1px]",
-    wrapper: "uy-inline-flex uy-items-start uy-gap-[2px] uy-typography-body uy-text-content-form-enabled data-[focus-visible]:uy-outline data-[focus-visible]:uy-outline-[2px] data-[focus-visible]:uy-outline-utility-focus-ring data-[focus-visible]:uy-outline-offset-2 uy-rounded-25",
+    wrapper: "uy-inline-flex uy-items-start uy-gap-[2px] uy-typography-body uy-text-content-form-enabled data-[focus-visible]:uy-outline data-[focus-visible]:uy-outline-[2px] data-[focus-visible]:uy-outline-utility-focus-ring data-[focus-visible]:uy-outline-offset-2 uy-rounded-25 uy-leading-[1lh]",
     asterisk: "uy-text-content-danger",
-    optionalTag: "uy-typography-body",
+    optionalTag: "uy-typography-body uy-leading-[1lh]",
     descriptionsContainer: "uy-ml-300 uy-leading-0 uy-inline-flex uy-flex-col uy-gap-50",
     helperText: "uy-typography-body-small uy-text-content-neutral-low",
     feedbackText: "uy-typography-body-small-strong uy-text-content-form-invalid"
@@ -61,5 +61,5 @@ const s = e({
   ]
 });
 export {
-  s as checkbox
+  l as checkbox
 };

package/dist/esm/components/data-table/DataTable.d.ts

@@ -1,6 +1,7 @@
 import { default as React } from 'react';
 import { Row, Table as TableType } from '@tanstack/react-table';
 import { TablePaginationProps } from '../table/parts/TablePagination.js';
+import { TableProps, TableRootProps } from '../table/Table.js';
 export interface DataTablePaginationLabels {
     /** Label for the "rows per page" and pagination label dropdown */
     itemLabel?: string;
@@ -11,13 +12,9 @@ export interface DataTablePaginationOptions {
     /** Custom labels for pagination */
     labels?: DataTablePaginationLabels;
 }
-export interface DataTableProps<TData> {
+export interface DataTableProps<TData> extends Omit<TableRootProps, 'children'>, Omit<TableProps, 'children'> {
     /** The table instance from @tanstack/react-table */
     table: TableType<TData>;
-    /** The minimum number of rows to display, affecting the minimum height */
-    minRows?: number;
-    /** The maximum number of rows to display, affecting the maximum height */
-    maxRows?: number;
     /** Optional loading state */
     isLoading?: boolean;
     /** Optional error state */
@@ -87,7 +84,7 @@ export interface DataTableProps<TData> {
  * @remarks
  * [API](https://unity-components.payfit.io/?path=/docs/data-datatable--docs) • [Demo](https://unity-components.payfit.io/?path=/docs/data-datatable--docs)
  */
-declare function DataTable<TData extends object>({ table, isLoading, error, emptyState, loadingState, errorState, pagination, minRows, maxRows, children, }: DataTableProps<TData>): import("react/jsx-runtime").JSX.Element;
+declare function DataTable<TData extends object>({ table, isLoading, error, emptyState, loadingState, errorState, pagination, minRows, maxRows, children, ...rest }: DataTableProps<TData>): import("react/jsx-runtime").JSX.Element;
 declare namespace DataTable {
     var displayName: string;
 }

package/dist/esm/components/data-table/DataTable.js

@@ -1,77 +1,82 @@
-import { jsxs as d, jsx as e } from "react/jsx-runtime";
-import { useRef as w, useEffect as x } from "react";
+import { jsxs as f, jsx as e } from "react/jsx-runtime";
+import { useRef as x, useEffect as E } from "react";
 import { flexRender as g } from "@tanstack/react-table";
-import { TableBody as b } from "../table/parts/TableBody.js";
+import { TableBody as z } from "../table/parts/TableBody.js";
 import { TableColumnHeader as R } from "../table/parts/TableColumnHeader.js";
-import { TableEmptyStateLoading as D, TableEmptyStateError as E, TableEmptyStateNoData as y } from "../table/parts/TableEmptyState.js";
-import { TableHeader as z } from "../table/parts/TableHeader.js";
-import { TablePagination as H } from "../table/parts/TablePagination.js";
-import { TableRoot as M, Table as j } from "../table/Table.js";
-import { ColumnSortHeader as I } from "./parts/ColumnSortHeader.js";
-function N({
-  table: r,
-  isLoading: m,
-  error: l,
-  emptyState: a,
-  loadingState: i,
+import { TableEmptyStateLoading as D, TableEmptyStateError as H, TableEmptyStateNoData as y } from "../table/parts/TableEmptyState.js";
+import { TableHeader as M } from "../table/parts/TableHeader.js";
+import { TablePagination as j } from "../table/parts/TablePagination.js";
+import { TableRoot as I, Table as N } from "../table/Table.js";
+import { ColumnSortHeader as O } from "./parts/ColumnSortHeader.js";
+function v({
+  table: o,
+  isLoading: n,
+  error: a,
+  emptyState: i,
+  loadingState: S,
   errorState: T,
-  pagination: n,
-  minRows: S,
-  maxRows: C,
-  children: P
+  pagination: l,
+  minRows: b,
+  maxRows: P,
+  children: C,
+  ...m
 }) {
   var p;
-  const u = w(null), { pageIndex: f, pageSize: c } = r.getState().pagination;
-  x(() => {
-    var t;
-    (t = u.current) == null || t.scrollToTop();
-  }, [f, c]);
-  const s = () => {
-    if (m)
-      return i ?? /* @__PURE__ */ e(D, {});
-    if (l)
-      return T ?? /* @__PURE__ */ e(E, {});
-  }, h = () => m || l ? s() : r.getRowModel().rows.length === 0 ? a ?? /* @__PURE__ */ e(y, {}) : a;
-  return /* @__PURE__ */ d(M, { minRows: S, maxRows: C, children: [
-    /* @__PURE__ */ d(j, { ref: u, children: [
-      /* @__PURE__ */ e(z, { children: r.getHeaderGroups().map(
-        (t) => t.headers.map((o) => /* @__PURE__ */ e(R, { children: o.column.getCanSort() ? /* @__PURE__ */ e(I, { header: o, children: /* @__PURE__ */ e("span", { children: g(
-          o.column.columnDef.header,
-          o.getContext()
+  const c = x(null), { pageIndex: s, pageSize: u } = o.getState().pagination;
+  E(() => {
+    var r;
+    (r = c.current) == null || r.scrollToTop();
+  }, [s, u]);
+  const h = {
+    label: m.label,
+    description: m.description,
+    isHorizontalScrollEnabled: m.isHorizontalScrollEnabled
+  }, d = () => {
+    if (n)
+      return S ?? /* @__PURE__ */ e(D, {});
+    if (a)
+      return T ?? /* @__PURE__ */ e(H, {});
+  }, w = () => n || a ? d() : o.getRowModel().rows.length === 0 ? i ?? /* @__PURE__ */ e(y, {}) : i;
+  return /* @__PURE__ */ f(I, { minRows: b, maxRows: P, children: [
+    /* @__PURE__ */ f(N, { ref: c, ...h, children: [
+      /* @__PURE__ */ e(M, { children: o.getHeaderGroups().map(
+        (r) => r.headers.map((t) => /* @__PURE__ */ e(R, { children: t.column.getCanSort() ? /* @__PURE__ */ e(O, { header: t, children: /* @__PURE__ */ e("span", { children: g(
+          t.column.columnDef.header,
+          t.getContext()
         ) }) }) : /* @__PURE__ */ e("span", { children: g(
-          o.column.columnDef.header,
-          o.getContext()
-        ) }) }, o.id))
+          t.column.columnDef.header,
+          t.getContext()
+        ) }) }, t.id))
       ) }),
       /* @__PURE__ */ e(
-        b,
+        z,
         {
-          renderEmptyState: h,
-          renderDataState: s,
-          children: !m && !l && r.getRowModel().rows.map(P)
+          renderEmptyState: w,
+          renderDataState: d,
+          children: !n && !a && o.getRowModel().rows.map(C)
         }
       )
     ] }),
-    r.getPageCount() > 1 && /* @__PURE__ */ e(
-      H,
+    o.getPageCount() > 1 && /* @__PURE__ */ e(
+      j,
       {
-        pageCount: r.getPageCount(),
-        rowCount: r.getPaginationRowModel().rows.length,
-        currentPage: f + 1,
-        rowsPerPage: c,
-        pageSizeOptions: n == null ? void 0 : n.pageSizeOptions,
-        onPageChange: (t) => {
-          r.setPageIndex(t - 1);
+        pageCount: o.getPageCount(),
+        rowCount: o.getPaginationRowModel().rows.length,
+        currentPage: s + 1,
+        rowsPerPage: u,
+        pageSizeOptions: l == null ? void 0 : l.pageSizeOptions,
+        onPageChange: (r) => {
+          o.setPageIndex(r - 1);
         },
-        onPageSizeChange: (t) => {
-          r.setPageSize(t);
+        onPageSizeChange: (r) => {
+          o.setPageSize(r);
         },
-        itemLabel: (p = n == null ? void 0 : n.labels) == null ? void 0 : p.itemLabel
+        itemLabel: (p = l == null ? void 0 : l.labels) == null ? void 0 : p.itemLabel
       }
     )
   ] });
 }
-N.displayName = "DataTable";
+v.displayName = "DataTable";
 export {
-  N as DataTable
+  v as DataTable
 };

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';
+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-picker/parts → date-calendar}/DateCalendar.js

@@ -1,15 +1,15 @@
 import { jsx as a, jsxs as r } from "react/jsx-runtime";
-import { useState as f } from "react";
-import { today as Y, getLocalTimeZone as m, isToday as j } from "@internationalized/date";
-import { Dialog as I, Calendar as k, Heading as B, CalendarGrid as F, CalendarGridHeader as M, CalendarHeaderCell as O, CalendarGridBody as T, CalendarCell as W } from "react-aria-components";
-import { tv as P } from "tailwind-variants";
-import { IconButton as h } from "../../icon-button/IconButton.js";
-import { useMonthsList as R } from "../hooks/useMonthsList.js";
-import { useYearsList as Z } from "../hooks/useYearsList.js";
-import { DateSegmentSelect as b } from "./DateSegmentSelect.js";
-const $ = P({
+import { useState as m } from "react";
+import { today as I, getLocalTimeZone as p, isToday as k } from "@internationalized/date";
+import { Calendar as B, Heading as M, CalendarGrid as O, CalendarGridHeader as T, CalendarHeaderCell as W, CalendarGridBody as P, CalendarCell as R } from "react-aria-components";
+import { tv as Z } from "tailwind-variants";
+import { IconButton as h } from "../icon-button/IconButton.js";
+import { useMonthsList as $ } from "./hooks/useMonthsList.js";
+import { useYearsList as q } from "./hooks/useYearsList.js";
+import { DateSegmentSelect as v } from "./parts/DateSegmentSelect.js";
+const z = Z({
   slots: {
-    dialog: "uy-p-150",
+    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",
@@ -39,79 +39,81 @@ const $ = P({
     isDisabled: !1
   }
 });
-function q({
-  value: u,
+function A({
+  value: c,
   defaultValue: l,
   minValue: d,
-  maxValue: o,
+  maxValue: s,
+  onChange: o,
+  onFocusChange: i,
   ...t
 }) {
-  const y = Y(m()), [p, g] = f(
-    u ?? l ?? y
-  ), [s, n] = f(
-    u ?? l ?? y
-  ), v = R(), C = Z({
+  const f = I(p()), [g, x] = m(
+    c ?? l ?? f
+  ), [n, u] = m(
+    c ?? l ?? f
+  ), D = $(), C = q({
     startYear: d == null ? void 0 : d.year,
-    endYear: o == null ? void 0 : o.year
-  }), D = (e) => {
-    n(
-      (i) => i.set({ month: parseInt(e, 10) })
+    endYear: s == null ? void 0 : s.year
+  }), N = (e) => {
+    u(
+      (y) => y.set({ month: parseInt(e, 10) })
     );
-  }, x = (e) => {
-    n(
-      (i) => i.set({ year: parseInt(e, 10) })
+  }, H = (e) => {
+    u(
+      (y) => y.set({ year: parseInt(e, 10) })
     );
   }, {
-    dialog: N,
-    calendarWrapper: w,
-    dialogHeader: H,
-    dialogHeaderGroup: c,
-    calendarGrid: G,
-    calendarHeaderCell: L,
-    calendarCell: S
-  } = $({ isDisabled: t.isDisabled });
-  return /* @__PURE__ */ a(I, { className: N(), "data-dd-privacy": "mask", children: /* @__PURE__ */ a(
-    k,
+    base: w,
+    calendarWrapper: G,
+    dialogHeader: L,
+    dialogHeaderGroup: b,
+    calendarGrid: S,
+    calendarHeaderCell: Y,
+    calendarCell: j
+  } = z({ isDisabled: t.isDisabled });
+  return /* @__PURE__ */ a("div", { className: w(), "data-dd-privacy": "mask", children: /* @__PURE__ */ a(
+    B,
     {
       ...t,
       minValue: d,
-      maxValue: o,
-      value: p,
+      maxValue: s,
+      value: g,
       defaultValue: l,
       onChange: (e) => {
-        g(e);
+        x(e), o == null || o(e);
       },
-      focusedValue: s,
+      focusedValue: n,
       onFocusChange: (e) => {
-        n(e);
+        u(e), i == null || i(e);
       },
-      children: /* @__PURE__ */ r("div", { className: w(), children: [
-        /* @__PURE__ */ r("header", { className: H(), children: [
-          /* @__PURE__ */ a(B, { className: "uy-sr-only" }),
+      children: /* @__PURE__ */ r("div", { className: G(), children: [
+        /* @__PURE__ */ r("header", { className: L(), children: [
+          /* @__PURE__ */ a(M, { className: "uy-sr-only" }),
           /* @__PURE__ */ r(
             "div",
             {
-              className: c({
+              className: b({
                 className: "uy-pl-100 uy-gap-200"
               }),
               children: [
                 /* @__PURE__ */ a(
-                  b,
+                  v,
                   {
                     type: "month",
-                    items: v,
-                    value: s.month.toString(),
-                    onChange: D,
+                    items: D,
+                    value: n.month.toString(),
+                    onChange: N,
                     isDisabled: t.isDisabled
                   }
                 ),
                 /* @__PURE__ */ a(
-                  b,
+                  v,
                   {
                     type: "year",
                     items: C,
-                    value: s.year.toString(),
-                    onChange: x,
+                    value: n.year.toString(),
+                    onChange: H,
                     isDisabled: t.isDisabled
                   }
                 )
@@ -121,7 +123,7 @@ function q({
           /* @__PURE__ */ r(
             "div",
             {
-              className: c({
+              className: b({
                 className: "uy-ml-auto uy-gap-100"
               }),
               children: [
@@ -151,14 +153,14 @@ function q({
             }
           )
         ] }),
-        /* @__PURE__ */ r(F, { className: G(), weekdayStyle: "short", children: [
-          /* @__PURE__ */ a(M, { children: (e) => /* @__PURE__ */ a(O, { className: L(), children: e }) }),
-          /* @__PURE__ */ a(T, { children: (e) => /* @__PURE__ */ a(
-            W,
+        /* @__PURE__ */ r(O, { className: S(), weekdayStyle: "short", children: [
+          /* @__PURE__ */ a(T, { children: (e) => /* @__PURE__ */ a(W, { className: Y(), children: e }) }),
+          /* @__PURE__ */ a(P, { children: (e) => /* @__PURE__ */ a(
+            R,
             {
               date: e,
-              "data-today": j(e, m()) ? !0 : void 0,
-              className: S()
+              "data-today": k(e, p()) ? !0 : void 0,
+              className: j()
             }
           ) })
         ] })
@@ -166,7 +168,7 @@ function q({
     }
   ) });
 }
-q.displayName = "DateCalendar";
+A.displayName = "DateCalendar";
 export {
-  q as DateCalendar
+  A as DateCalendar
 };

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/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-picker/DatePicker.d.ts

@@ -2,15 +2,15 @@ import { CalendarDate } from '@internationalized/date';
 import { DatePickerProps as AriaDatePickerProps } from 'react-aria-components';
 export interface DatePickerProps extends Pick<AriaDatePickerProps<CalendarDate>, 'id' | 'firstDayOfWeek'> {
     /** The currently selected date */
-    value?: CalendarDate;
+    value?: CalendarDate | null;
     /** The default selected date (uncontrolled) */
-    defaultValue?: CalendarDate;
+    defaultValue?: CalendarDate | null;
     /** The minimum allowed date */
     minValue?: CalendarDate;
     /** The maximum allowed date */
     maxValue?: CalendarDate;
     /** Callback fired when the date value changes */
-    onChange?: (value: CalendarDate | undefined) => void;
+    onChange?: (value: CalendarDate | null) => void;
     /** Callback fired when the clear button is clicked */
     onClearButtonPress?: () => void;
     /** Callback fired when the picker loses focus */

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

@@ -1,12 +1,12 @@
-import { jsxs as m, jsx as a } from "react/jsx-runtime";
+import { jsxs as c, jsx as a } from "react/jsx-runtime";
 import { forwardRef as W } from "react";
-import { DatePicker as I, Group as P, Button as U, Popover as j } from "react-aria-components";
-import { useIntl as E } from "react-intl";
-import { tv as c } from "tailwind-variants";
-import { Icon as M } from "../icon/Icon.js";
-import { DateCalendar as O } from "./parts/DateCalendar.js";
-import { DateInput as R } from "./parts/DateInput.js";
-const G = c({
+import { DatePicker as I, Group as P, Button as U, Popover as j, Dialog as E } from "react-aria-components";
+import { useIntl as M } from "react-intl";
+import { tv as m } from "tailwind-variants";
+import { DateCalendar as O } from "../date-calendar/DateCalendar.js";
+import { Icon as R } from "../icon/Icon.js";
+import { DateInput as G } from "./parts/DateInput.js";
+const $ = m({
   slots: {
     base: [
       "uy-group uy-flex uy-h-500 uy-border uy-border-solid uy-rounded-100",
@@ -58,7 +58,7 @@ const G = c({
       }
     }
   ]
-}), $ = c({
+}), q = m({
   base: "uy-overflow-auto uy-shadow-floating uy-border uy-border-solid uy-border-border-neutral uy-bg-surface-neutral uy-rounded-75",
   variants: {
     isEntering: {
@@ -68,7 +68,7 @@ const G = c({
       true: "uy-animate-out uy-fade-out data-[placement-bottom]:uy-slide-out-to-top-1 data-[placement-top]:uy-slide-out-to-bottom-1 uy-duration-150 uy-ease-in"
     }
   }
-}), q = W(
+}), z = W(
   ({
     value: l,
     defaultValue: n,
@@ -83,19 +83,19 @@ const G = c({
     onOpenChange: f,
     id: v,
     ...e
-  }, z) => {
-    const g = E(), { base: x, inputWrapper: h, suffix: D } = G({
+  }, A) => {
+    const g = M(), { base: x, inputWrapper: h, suffix: D } = $({
       isInvalid: !!b,
       isReadOnly: !!u,
       isDisabled: !!t
     }), y = (r) => {
-      s == null || s(r ?? void 0);
+      s == null || s(r);
     }, w = (r) => {
       f == null || f(r), r ? i == null || i() : o == null || o();
     }, k = (r) => e.isDateUnavailable ? e.isDateUnavailable(r) : !1, V = () => {
       d == null || d();
     };
-    return /* @__PURE__ */ m(
+    return /* @__PURE__ */ c(
       I,
       {
         "data-dd-privacy": "mask",
@@ -113,9 +113,9 @@ const G = c({
         onOpenChange: w,
         isDateUnavailable: k,
         children: [
-          /* @__PURE__ */ m(P, { className: h(), id: v, children: [
+          /* @__PURE__ */ c(P, { className: h(), id: v, children: [
             /* @__PURE__ */ a(
-              R,
+              G,
               {
                 isLoading: p,
                 isDisabled: t,
@@ -125,7 +125,7 @@ const G = c({
               }
             ),
             /* @__PURE__ */ a(U, { className: D(), isDisabled: u || t, children: /* @__PURE__ */ a(
-              M,
+              R,
               {
                 src: "CalendarBlankOutlined",
                 color: "inherit",
@@ -139,8 +139,8 @@ const G = c({
           /* @__PURE__ */ a(
             j,
             {
-              className: ({ isEntering: r, isExiting: N }) => $({ isEntering: r, isExiting: N }),
-              children: /* @__PURE__ */ a(
+              className: ({ isEntering: r, isExiting: N }) => q({ isEntering: r, isExiting: N }),
+              children: /* @__PURE__ */ a(E, { className: "uy-p-150", "data-dd-privacy": "mask", children: /* @__PURE__ */ a(
                 O,
                 {
                   value: l,
@@ -150,7 +150,7 @@ const G = c({
                   onChange: y,
                   firstDayOfWeek: e.firstDayOfWeek
                 }
-              )
+              ) })
             }
           )
         ]
@@ -158,7 +158,7 @@ const G = c({
     );
   }
 );
-q.displayName = "DatePicker";
+z.displayName = "DatePicker";
 export {
-  q as DatePicker
+  z as DatePicker
 };

package/dist/esm/components/definition-tooltip/DefinitionTooltip.d.ts

@@ -0,0 +1,23 @@
+import { ValidTextElements } from '../text/Text.js';
+import { TooltipProps } from '../tooltip/Tooltip.js';
+export interface DefinitionTooltipProps extends Omit<TooltipProps, 'children'> {
+    /** The HTML element to render the definition tooltip as. Defaults to a `<span>`. */
+    asElement?: Extract<ValidTextElements, 'abbr' | 'dfn' | 'span'>;
+    /** The text to trigger the tooltip. */
+    children: string;
+}
+/**
+ * Definition tooltips provide brief definitions for words through a tooltip on hover.
+ * They may appear within a sentence or as standalone text, and should be used only to define terms or acronyms.
+ * @param {DefinitionTooltipProps} props - The props for the `DefinitionTooltip` component.
+ * @example
+ * ```tsx
+ * import { DefinitionTooltip } from '@payfit/unity-components'
+ *
+ * <DefinitionTooltip title="I am the description of the definition tooltip">I am an definition tooltip</DefinitionTooltip>
+ * ```
+ * @see {@link DefinitionTooltipProps} for all available props
+ * @remarks {@link https://www.payfit.design/24f360409/p/05d163-info-link|Design docs}
+ */
+declare const DefinitionTooltip: import('react').ForwardRefExoticComponent<DefinitionTooltipProps & import('react').RefAttributes<HTMLDivElement>>;
+export { DefinitionTooltip };