@payfit/unity-components 1.0.0 → 1.1.0

package/dist/esm/components/pagination/parts/PaginationJumpDialog.js

@@ -1,12 +1,12 @@
 import { jsxs as n, Fragment as N, jsx as o } from "react/jsx-runtime";
 import { useRef as l } from "react";
-import { useOverlayTrigger as O, useButton as P, useOverlay as D } from "react-aria";
-import { useIntl as B } from "react-intl";
-import { tv as I } from "tailwind-variants";
+import { uyTv as O } from "@payfit/unity-themes";
+import { useOverlayTrigger as P, useButton as D, useOverlay as B } from "react-aria";
+import { useIntl as I } from "react-intl";
 import { Button as c } from "../../button/Button.js";
 import { Icon as J } from "../../icon/Icon.js";
 import { Label as R } from "../../label/Label.js";
-const k = I({
+const k = O({
   slots: {
     jumpButton: "uy:sr-only uy:outline-none uy:focus:not-sr-only uy:focus:absolute uy:focus:bottom-full uy:focus:z-10 uy:focus:m-100 uy:focus:rounded-50 uy:focus:underline uy:focus:bg-transparent uy:focus:text-content-primary uy:focus:typography-action uy:focus:ring-2 uy:focus:ring-offset-2 uy:focus:ring-utility-focus-ring",
     jumpPopover: "uy:fixed uy:top-1/2 uy:left-1/2 uy:z-20 uy:transform uy:-translate-x-1/2 uy:-translate-y-1/2 uy:bg-surface-neutral uy:p-200 uy:rounded-200 uy:shadow-floating",
@@ -17,16 +17,16 @@ const k = I({
     jumpActions: "uy:flex uy:gap-150 uy:justify-end uy:mt-100"
   }
 });
-function G({
+function $({
   pageCount: t,
   onJumpToPage: f,
   state: e
 }) {
-  const u = B(), i = l(null), p = l(null), m = l(null), { triggerProps: d } = O(
+  const u = I(), i = l(null), p = l(null), m = l(null), { triggerProps: d } = P(
     { type: "dialog" },
     e,
     i
-  ), { buttonProps: g } = P(
+  ), { buttonProps: g } = D(
     {
       ...d,
       "aria-label": u.formatMessage({
@@ -35,7 +35,7 @@ function G({
       })
     },
     i
-  ), { overlayProps: a } = D(
+  ), { overlayProps: a } = B(
     {
       isOpen: e.isOpen,
       onClose: e.close.bind(e),
@@ -139,5 +139,5 @@ function G({
   ] });
 }
 export {
-  G as PaginationJumpDialog
+  $ as PaginationJumpDialog
 };

package/dist/esm/components/pagination/parts/PaginationLink.d.ts

@@ -1,5 +1,5 @@
+import { VariantProps } from '@payfit/unity-themes';
 import { LinkProps } from 'react-aria-components';
-import { VariantProps } from 'tailwind-variants';
 export declare const paginationLink: import('tailwind-variants').TVReturnType<{
     isActive: {
         true: string;

package/dist/esm/components/pagination/parts/PaginationLink.js

@@ -1,9 +1,9 @@
 import { jsx as r } from "react/jsx-runtime";
 import { forwardRef as i } from "react";
-import { Link as s } from "react-aria-components";
-import { useIntl as o } from "react-intl";
-import { tv as l } from "tailwind-variants";
-const d = l({
+import { uyTv as s } from "@payfit/unity-themes";
+import { Link as o } from "react-aria-components";
+import { useIntl as l } from "react-intl";
+const d = s({
   base: [
     "uy:min-w-300 uy:h-300 uy:p-25 uy:flex uy:justify-center uy:items-center uy:typography-action uy:rounded-pill uy:transition-colors",
     "uy:enabled:text-content-neutral-enabled uy:enabled:bg-transparent uy:cursor-pointer",
@@ -20,9 +20,9 @@ const d = l({
   }
 }), y = i(
   ({ isActive: e, isDisabled: a, ...t }, n) => {
-    const u = o();
+    const u = l();
     return /* @__PURE__ */ r(
-      s,
+      o,
       {
         ref: n,
         className: d({ isActive: e }),

package/dist/esm/components/payfit-brand/PayFitBrand.js

@@ -1,8 +1,8 @@
 import { jsxs as y, jsx as c } from "react/jsx-runtime";
 import { forwardRef as p } from "react";
-import { tv as f } from "tailwind-variants";
-import g from "../../hooks/use-id.js";
-const u = f({
+import { uyTv as f } from "@payfit/unity-themes";
+import u from "../../hooks/use-id.js";
+const g = f({
   slots: {
     base: "uy:min-w-[104px] uy:aspect-[13/4]",
     monogram: "",
@@ -29,7 +29,7 @@ const u = f({
   }
 }), Z = p(
   ({ color: l, label: n, description: a, ...r }, i) => {
-    const o = g(), t = `payfit-brand-title-${o}`, e = `payfit-brand-desc-${o}`, { base: h, monogram: m, logotype: s } = u({ color: l }), d = {
+    const o = u(), t = `payfit-brand-title-${o}`, e = `payfit-brand-desc-${o}`, { base: h, monogram: m, logotype: s } = g({ color: l }), d = {
       focusable: !1,
       role: "img",
       "aria-labelledby": t,

package/dist/esm/components/pill/Pill.d.ts

@@ -1,5 +1,5 @@
+import { VariantProps } from '@payfit/unity-themes';
 import { AriaAttributes } from 'react';
-import { VariantProps } from 'tailwind-variants';
 declare const pill: import('tailwind-variants').TVReturnType<{
     variant: {
         critical: string;

package/dist/esm/components/pill/Pill.js

@@ -1,6 +1,6 @@
 import { jsx as s } from "react/jsx-runtime";
 import { forwardRef as c } from "react";
-import { tv as o } from "tailwind-variants";
+import { uyTv as o } from "@payfit/unity-themes";
 const y = o({
   base: "uy:min-w-200 uy:max-w-400 uy:inline-flex uy:items-center uy:justify-center uy:text-center uy:typography-body-small",
   variants: {

package/dist/esm/components/popover/Popover.js

@@ -1,10 +1,10 @@
 import { jsx as t, jsxs as y } from "react/jsx-runtime";
 import { forwardRef as s } from "react";
-import { Popover as p, Dialog as g, DialogTrigger as m } from "react-aria-components";
+import { uyTv as p } from "@payfit/unity-themes";
+import { Popover as g, Dialog as m, DialogTrigger as c } from "react-aria-components";
 import { DialogTrigger as j } from "react-aria-components";
-import { tv as c } from "tailwind-variants";
 import { PopoverHeader as f } from "./parts/PopoverHeader.js";
-const x = c({
+const x = p({
   slots: {
     base: [
       "uy:border uy:border-solid uy:border-border-neutral uy:bg-surface-neutral uy:rounded-200 uy:p-200 uy:shadow-floating uy:min-w-[320px] uy:max-w-[800px] uy:overflow-auto",
@@ -21,7 +21,7 @@ const x = c({
   }
 }), b = s((a, e) => {
   const { children: o, title: r, isTitleSrOnly: n, displayCloseButton: i, ...l } = a, { base: u, dialog: d } = x();
-  return /* @__PURE__ */ t(p, { ref: e, className: u(), offset: 8, ...l, children: /* @__PURE__ */ y(g, { className: d(), role: "dialog", children: [
+  return /* @__PURE__ */ t(g, { ref: e, className: u(), offset: 8, ...l, children: /* @__PURE__ */ y(m, { className: d(), role: "dialog", children: [
     /* @__PURE__ */ t(
       f,
       {
@@ -34,7 +34,7 @@ const x = c({
   ] }) });
 });
 b.displayName = "Popover";
-m.displayName = "PopoverTrigger";
+c.displayName = "PopoverTrigger";
 export {
   b as Popover,
   j as PopoverTrigger

package/dist/esm/components/popover/parts/PopoverHeader.js

@@ -1,10 +1,10 @@
 import { jsxs as m, jsx as o } from "react/jsx-runtime";
-import { forwardRef as u, useContext as d } from "react";
-import { OverlayTriggerStateContext as y, Heading as p } from "react-aria-components";
-import { useIntl as f } from "react-intl";
-import { tv as g } from "tailwind-variants";
+import { forwardRef as u, useContext as y } from "react";
+import { uyTv as d } from "@payfit/unity-themes";
+import { OverlayTriggerStateContext as p, Heading as f } from "react-aria-components";
+import { useIntl as g } from "react-intl";
 import { IconButton as h } from "../../icon-button/IconButton.js";
-const v = g({
+const v = d({
   slots: {
     base: "uy:flex uy:justify-between",
     heading: "uy:content-center",
@@ -23,10 +23,10 @@ const v = g({
   }
 }), b = u(
   ({ title: t, isTitleSrOnly: n, displayCloseButton: a }, r) => {
-    const e = d(y), s = f(), { base: l, heading: i, iconButton: c } = v({ isTitleSrOnly: n });
+    const e = y(p), s = g(), { base: l, heading: i, iconButton: c } = v({ isTitleSrOnly: n });
     return /* @__PURE__ */ m("div", { className: l(), children: [
       /* @__PURE__ */ o(
-        p,
+        f,
         {
           ref: r,
           slot: "title",

package/dist/esm/components/progress-bar/ProgressBar.js

@@ -1,8 +1,8 @@
 import { jsx as r } from "react/jsx-runtime";
-import { forwardRef as y } from "react";
-import { ProgressBar as d } from "react-aria-components";
-import { tv as c } from "tailwind-variants";
-const f = c({
+import { forwardRef as n } from "react";
+import { uyTv as d } from "@payfit/unity-themes";
+import { ProgressBar as c } from "react-aria-components";
+const f = d({
   slots: {
     base: "uy:rounded-150 uy:bg-surface-neutral-disabled uy:h-150 uy:top-[50%] uy:transform uy:translate-y-[-50%] uy:w-full",
     meter: "uy:rounded-l-150 uy:absolute uy:h-full uy:top-[50%] uy:transform uy:translate-y-[-50%] uy:bg-surface-success"
@@ -17,19 +17,19 @@ const f = c({
   defaultVariants: {
     isFull: !1
   }
-}), p = y(
-  ({ value: a, range: e = [0, 100], ...t }, l) => {
-    const [u, s] = e, o = a >= s, { base: i, meter: m } = f({ isFull: o });
+}), p = n(
+  ({ value: a, range: e = [0, 100], ...u }, l) => {
+    const [t, s] = e, o = a >= s, { base: i, meter: y } = f({ isFull: o });
     return /* @__PURE__ */ r(
-      d,
+      c,
       {
         ref: l,
         value: a,
-        minValue: u,
+        minValue: t,
         maxValue: s,
-        "aria-label": t["aria-label"],
+        "aria-label": u["aria-label"],
         "data-dd-privacy": "allow",
-        children: ({ percentage: n }) => /* @__PURE__ */ r("div", { className: i(), children: /* @__PURE__ */ r("div", { className: m(), style: { width: `${n}%` } }) })
+        children: ({ percentage: m }) => /* @__PURE__ */ r("div", { className: i(), children: /* @__PURE__ */ r("div", { className: y(), style: { width: `${m}%` } }) })
       }
     );
   }

package/dist/esm/components/radio-button-group/parts/RadioButton.d.ts

@@ -1,6 +1,6 @@
+import { VariantProps } from '@payfit/unity-themes';
 import { ReactNode } from 'react';
 import { RadioProps } from 'react-aria-components';
-import { VariantProps } from 'tailwind-variants';
 export declare const radioButton: import('tailwind-variants').TVReturnType<{
     isFocusVisible: {
         true: string;

package/dist/esm/components/radio-button-group/parts/RadioButton.js

@@ -1,13 +1,13 @@
 import { jsxs as a, jsx as o, Fragment as m } from "react/jsx-runtime";
 import { forwardRef as b, useContext as f, useMemo as p } from "react";
-import { RadioGroupStateContext as g, Radio as v } from "react-aria-components";
-import { tv as x } from "tailwind-variants";
+import { uyTv as g } from "@payfit/unity-themes";
+import { RadioGroupStateContext as v, Radio as x } from "react-aria-components";
 import { Flex as R } from "../../flex/Flex.js";
 import { Text as S } from "../../text/Text.js";
 import B from "./radio-input-selected.svg.js";
 import h from "./radio-input-unselected.svg.js";
 import { RadioButtonHelper as w } from "./RadioButtonHelper.js";
-const F = x({
+const F = g({
   slots: {
     base: [
       "uy:group uy:flex uy:gap-100 uy:rounded-50 uy:items-center uy:cursor-pointer",
@@ -31,7 +31,7 @@ const F = x({
   }
 }), N = b(
   ({ children: t, value: l, isDisabled: i, helperText: d, ...u }, n) => {
-    const { base: c, label: s } = F(), r = f(g), y = p(() => r != null && r.isReadOnly ? {
+    const { base: c, label: s } = F(), r = f(v), y = p(() => r != null && r.isReadOnly ? {
       "--radio-fill-color": "var(--uy-color-border-form-read-only)",
       "--radio-border-color": "var(--uy-color-border-form-disabled)"
     } : {
@@ -40,7 +40,7 @@ const F = x({
     }, [r == null ? void 0 : r.isReadOnly]);
     return /* @__PURE__ */ a(R, { direction: "col", gap: "50", children: [
       /* @__PURE__ */ o(
-        v,
+        x,
         {
           ...u,
           value: l,

package/dist/esm/components/search/Search.d.ts

@@ -1,6 +1,6 @@
+import { VariantProps } from '@payfit/unity-themes';
 import { ReactNode } from 'react';
 import { SearchFieldProps } from 'react-aria-components';
-import { VariantProps } from 'tailwind-variants';
 export declare const search: import('tailwind-variants').TVReturnType<{
     isReadOnly: {
         true: {

package/dist/esm/components/search/Search.js

@@ -1,12 +1,12 @@
 import { jsxs as n, jsx as e } from "react/jsx-runtime";
 import { forwardRef as w } from "react";
-import { SearchField as M, Input as N, FieldError as S } from "react-aria-components";
-import { useIntl as I } from "react-intl";
-import { tv as k } from "tailwind-variants";
+import { uyTv as M } from "@payfit/unity-themes";
+import { SearchField as N, Input as S, FieldError as I } from "react-aria-components";
+import { useIntl as k } from "react-intl";
 import { CircularIconButton as C } from "../icon-button/CircularIconButton.js";
 import { Icon as l } from "../icon/Icon.js";
-import { Spinner as B } from "../spinner/Spinner.js";
-const E = k({
+import { Spinner as T } from "../spinner/Spinner.js";
+const B = M({
   slots: {
     base: [
       "uy:w-full uy:flex uy:gap-100 uy:border uy:border-solid uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:rounded-75 uy:border-border-form-enabled uy:items-center",
@@ -54,7 +54,7 @@ const E = k({
       }
     }
   }
-}), T = ({
+}), E = ({
   intl: a,
   placeholder: r,
   isDisabled: o
@@ -81,11 +81,11 @@ const E = k({
       wrapperState: v,
       feedbackText: h,
       closeButton: x
-    } = E({
+    } = B({
       isReadOnly: u
-    }), t = I();
+    }), t = k();
     return /* @__PURE__ */ n(
-      M,
+      N,
       {
         "aria-label": c,
         className: "uy:group",
@@ -106,10 +106,10 @@ const E = k({
               }
             ),
             /* @__PURE__ */ e(
-              N,
+              S,
               {
                 className: p(),
-                placeholder: T({ intl: t, placeholder: s, isDisabled: o })
+                placeholder: E({ intl: t, placeholder: s, isDisabled: o })
               }
             ),
             /* @__PURE__ */ n("div", { className: v(), children: [
@@ -126,7 +126,7 @@ const E = k({
                 }
               ),
               a && /* @__PURE__ */ e(
-                B,
+                T,
                 {
                   label: t.formatMessage({
                     id: "unity:component:common:loading:label",
@@ -151,7 +151,7 @@ const E = k({
               )
             ] })
           ] }),
-          /* @__PURE__ */ e(S, { className: h(), children: d })
+          /* @__PURE__ */ e(I, { className: h(), children: d })
         ]
       }
     );
@@ -160,5 +160,5 @@ const E = k({
 j.displayName = "Search";
 export {
   j as Search,
-  E as search
+  B as search
 };

package/dist/esm/components/segmented-button-group/parts/ToggleButton.js

@@ -1,12 +1,12 @@
 import { jsxs as c, jsx as t, Fragment as b } from "react/jsx-runtime";
 import { forwardRef as h, useContext as x, useRef as v } from "react";
-import { useRadio as w, useFocusRing as P, VisuallyHidden as L, mergeProps as I } from "react-aria";
-import { useIntl as N } from "react-intl";
-import { tv as V } from "tailwind-variants";
+import { uyTv as w } from "@payfit/unity-themes";
+import { useRadio as P, useFocusRing as L, VisuallyHidden as I, mergeProps as N } from "react-aria";
+import { useIntl as V } from "react-intl";
 import { Icon as F } from "../../icon/Icon.js";
 import { Spinner as R } from "../../spinner/Spinner.js";
 import { SegmentedButtonGroupContext as S } from "../SegmentedButtonGroups.context.js";
-const B = V({
+const B = w({
   slots: {
     base: [
       "uy:rounded-50 uy:pt-50 uy:pb-50 uy:pr-150 uy:flex uy:gap-25",
@@ -95,19 +95,19 @@ const B = V({
     }
   ) : null,
   n
-] }), j = h(
+] }), T = h(
   (r, n) => {
-    const { children: o, value: e, prefixIcon: s, isLoading: a } = r, { state: u } = x(S), i = v(null), { inputProps: d } = w(r, u, i), { focusProps: f, isFocusVisible: p } = P(), y = N(), l = u.selectedValue === e, { base: g, wrapper: m } = B({
+    const { children: o, value: e, prefixIcon: s, isLoading: a } = r, { state: u } = x(S), i = v(null), { inputProps: d } = P(r, u, i), { focusProps: f, isFocusVisible: p } = L(), y = V(), l = u.selectedValue === e, { base: g, wrapper: m } = B({
       isSelected: l,
       hasPrefixIcon: !!s,
       isLoading: a,
       isFocusVisible: p
     });
     return /* @__PURE__ */ c("label", { ref: n, className: g(), "aria-disabled": a, children: [
-      /* @__PURE__ */ t(L, { children: /* @__PURE__ */ t(
+      /* @__PURE__ */ t(I, { children: /* @__PURE__ */ t(
         "input",
         {
-          ...I(d, f),
+          ...N(d, f),
           ref: i,
           disabled: a
         }
@@ -116,7 +116,7 @@ const B = V({
     ] });
   }
 );
-j.displayName = "ToggleButton";
+T.displayName = "ToggleButton";
 export {
-  j as ToggleButton
+  T as ToggleButton
 };

package/dist/esm/components/select/Select.js

@@ -1,16 +1,16 @@
 import { jsxs as p, jsx as e } from "react/jsx-runtime";
 import { forwardRef as P, useState as j } from "react";
-import { useFilter as B, Select as F, Popover as K, Autocomplete as O, ListBox as i } from "react-aria-components";
-import { tv as A } from "tailwind-variants";
+import { uyTv as B } from "@payfit/unity-themes";
+import { useFilter as F, Select as K, Popover as O, Autocomplete as A, ListBox as i } from "react-aria-components";
 import { SearchInput as I } from "./parts/SearchInput.js";
 import { SelectButton as L } from "./parts/SelectButton.js";
-const U = A({
+const T = B({
   slots: {
     base: "uy:flex uy:flex-col uy:gap-100 uy:w-full",
     popover: "uy:rounded-75 uy:border uy:border-solid uy:border-border-neutral uy:w-[var(--trigger-width)] uy:bg-surface-neutral",
     listbox: "uy:overflow-y-auto uy:max-h-[296px] uy:pt-100 uy:pb-100 uy:pl-100 uy:pr-100"
   }
-}), $ = ({
+}), U = ({
   children: t,
   items: o,
   placeholder: r,
@@ -26,12 +26,12 @@ const U = A({
   placement: S,
   ...b
 }, x) => {
-  const [v, h] = j(!1), { contains: g } = B({ sensitivity: "base" }), { base: w, popover: N, listbox: a } = U(), C = n !== void 0 || u !== void 0 ? {
+  const [v, h] = j(!1), { contains: g } = F({ sensitivity: "base" }), { base: w, popover: N, listbox: a } = T(), C = n !== void 0 || u !== void 0 ? {
     selectedKey: n,
     onSelectionChange: u
   } : { defaultSelectedKey: y };
   return /* @__PURE__ */ p(
-    F,
+    K,
     {
       onOpenChange: h,
       ...b,
@@ -54,13 +54,13 @@ const U = A({
           }
         ),
         /* @__PURE__ */ e(
-          K,
+          O,
           {
             offset: 1,
             containerPadding: 8,
             className: N(),
             placement: S,
-            children: f ? /* @__PURE__ */ p(O, { filter: g, children: [
+            children: f ? /* @__PURE__ */ p(A, { filter: g, children: [
               /* @__PURE__ */ e(I, {}),
               /* @__PURE__ */ e(i, { items: o, className: a(), children: t })
             ] }) : /* @__PURE__ */ e(i, { items: o, className: a(), children: t })
@@ -69,10 +69,10 @@ const U = A({
       ]
     }
   );
-}, k = P(function(o, r) {
-  return $(o, r);
+}, $ = P(function(o, r) {
+  return U(o, r);
 });
-k.displayName = "Select";
+$.displayName = "Select";
 export {
-  k as Select
+  $ as Select
 };

package/dist/esm/components/select/parts/SearchInput.js

@@ -1,11 +1,11 @@
 import { jsxs as e, Fragment as i, jsx as t } from "react/jsx-runtime";
 import { forwardRef as l } from "react";
-import { SearchField as m, Input as c } from "react-aria-components";
-import { useIntl as y } from "react-intl";
-import { tv as d } from "tailwind-variants";
+import { uyTv as m } from "@payfit/unity-themes";
+import { SearchField as y, Input as c } from "react-aria-components";
+import { useIntl as d } from "react-intl";
 import { CircularIconButton as p } from "../../icon-button/CircularIconButton.js";
 import { Icon as f } from "../../icon/Icon.js";
-const b = d({
+const b = m({
   slots: {
     base: "uy:flex uy:gap-100 uy:border uy:border-solid uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:rounded-75 uy:border-border-form-active uy:text-content-form-active uy:mt-100 uy:mb-100 uy:ml-100 uy:mr-100 uy:typography-body",
     input: "uy:flex-grow uy:outline-none uy:[&::-webkit-search-cancel-button]:hidden",
@@ -13,11 +13,11 @@ const b = d({
     separator: "uy:h-[1px] uy:bg-surface-neutral-lowest uy:w-full uy:mt-100"
   }
 }), h = l((g, r) => {
-  const o = y(), { base: a, input: u, button: n, separator: s } = b();
+  const o = d(), { base: u, input: a, button: n, separator: s } = b();
   return /* @__PURE__ */ e(i, { children: [
-    /* @__PURE__ */ e(m, { className: a(), ref: r, "data-dd-privacy": "mask", children: [
+    /* @__PURE__ */ e(y, { className: u(), ref: r, "data-dd-privacy": "mask", children: [
       /* @__PURE__ */ t(f, { src: "MagnifyingGlassOutlined", "aria-hidden": "true" }),
-      /* @__PURE__ */ t(c, { className: u() }),
+      /* @__PURE__ */ t(c, { className: a() }),
       /* @__PURE__ */ t(
         p,
         {

package/dist/esm/components/select/parts/SelectButton.js

@@ -1,13 +1,16 @@
-import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
 import { forwardRef as f } from "react";
-import { Button as b, SelectValue as m } from "react-aria-components";
-import { useIntl as p } from "react-intl";
-import { tv as v } from "tailwind-variants";
+import { uyTv as b } from "@payfit/unity-themes";
+import { Button as m, SelectValue as p } from "react-aria-components";
+import { useIntl as v } from "react-intl";
 import { Icon as a } from "../../icon/Icon.js";
-const x = v({
+const x = b({
   slots: {
     base: "uy:flex uy:flex-row uy:gap-100 uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:rounded-75 uy:border-solid uy:focus-visible:ring-2 uy:focus-visible:ring-utility-focus-ring uy:focus-visible:ring-offset-2 uy:outline-none uy:border",
-    selectValue: "uy:whitespace-nowrap uy:text-ellipsis uy:typography-body uy:flex-grow uy:text-left uy:data-[placeholder]:text-content-neutral-lowest",
+    selectValue: [
+      "uy:whitespace-nowrap uy:text-ellipsis uy:typography-body uy:flex-grow uy:text-left uy:overflow-hidden",
+      "uy:data-[placeholder]:text-content-neutral-lowest"
+    ],
     iconWrapper: "uy:flex uy:gap-50",
     icon: ""
   },
@@ -49,23 +52,23 @@ const x = v({
     isReadOnly: !1
   }
 }), g = f(
-  ({ isDisabled: r, isInvalid: t, isReadOnly: l, isOpen: s }, u) => {
-    const n = p(), { base: i, selectValue: d, iconWrapper: c, icon: y } = x({
+  ({ isDisabled: r, isInvalid: o, isReadOnly: l, isOpen: s }, u) => {
+    const n = v(), { base: i, selectValue: d, iconWrapper: c, icon: y } = x({
       isDisabled: r,
-      isInvalid: t,
+      isInvalid: o,
       isReadOnly: l
     });
-    return /* @__PURE__ */ o(
-      b,
+    return /* @__PURE__ */ t(
+      m,
       {
         "data-dd-privacy": "mask",
         className: i(),
         ref: u,
         isDisabled: r,
         children: [
-          /* @__PURE__ */ e(m, { className: d() }),
-          /* @__PURE__ */ o("div", { className: c(), children: [
-            t && /* @__PURE__ */ e(
+          /* @__PURE__ */ e(p, { className: d() }),
+          /* @__PURE__ */ t("div", { className: c(), children: [
+            o && /* @__PURE__ */ e(
               a,
               {
                 src: "WarningCircleOutlined",

package/dist/esm/components/select/parts/SelectOption.js

@@ -1,10 +1,10 @@
 import { jsx as e, jsxs as d, Fragment as i } from "react/jsx-runtime";
 import { forwardRef as y } from "react";
-import { ListBoxItem as f } from "react-aria-components";
-import { tv as m } from "tailwind-variants";
+import { uyTv as f } from "@payfit/unity-themes";
+import { ListBoxItem as m } from "react-aria-components";
 import { Icon as p } from "../../icon/Icon.js";
 import { SelectOptionProvider as b } from "./SelectOption.context.js";
-const x = m({
+const x = f({
   base: "uy:flex uy:flex-col uy:typography-body uy:rounded-50 uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:outline-none",
   variants: {
     isFocusVisible: {
@@ -37,7 +37,7 @@ const x = m({
   (s, l) => {
     const { children: u, isDisabled: r, textValue: n } = s;
     return /* @__PURE__ */ e(
-      f,
+      m,
       {
         ...s,
         ref: l,

package/dist/esm/components/select/parts/SelectOptionGroup.js

@@ -1,21 +1,21 @@
 import { jsxs as n, Fragment as a, jsx as e } from "react/jsx-runtime";
 import { forwardRef as i } from "react";
-import { ListBoxSection as c, Header as y, Collection as m, Separator as d } from "react-aria-components";
-import { tv as f } from "tailwind-variants";
-const h = f({
+import { uyTv as c } from "@payfit/unity-themes";
+import { ListBoxSection as y, Header as m, Collection as d, Separator as f } from "react-aria-components";
+const h = c({
   slots: {
     base: "",
     header: "uy:text-content-neutral-enabled uy:typography-body-strong uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150",
     separator: "uy:h-[1px] uy:bg-surface-neutral-lowest uy:w-full uy:mb-100 uy:mt-100 uy:last:hidden"
   }
 }), b = ({ label: r, children: o, items: t }, p) => {
-  const { base: s, header: u, separator: l } = h();
+  const { base: u, header: s, separator: l } = h();
   return /* @__PURE__ */ n(a, { children: [
-    /* @__PURE__ */ n(c, { ref: p, className: s(), id: r, items: t, children: [
-      /* @__PURE__ */ e(y, { className: u(), children: r }),
-      t ? /* @__PURE__ */ e(m, { items: t, children: o }) : /* @__PURE__ */ e(a, { children: o })
+    /* @__PURE__ */ n(y, { ref: p, className: u(), id: r, items: t, children: [
+      /* @__PURE__ */ e(m, { className: s(), children: r }),
+      t ? /* @__PURE__ */ e(d, { items: t, children: o }) : /* @__PURE__ */ e(a, { children: o })
     ] }),
-    /* @__PURE__ */ e(d, { orientation: "horizontal", className: l() })
+    /* @__PURE__ */ e(f, { orientation: "horizontal", className: l() })
   ] });
 }, x = i(function(o, t) {
   return b(o, t);

package/dist/esm/components/select/parts/SelectOptionHelper.js

@@ -1,6 +1,6 @@
 import { jsx as a } from "react/jsx-runtime";
 import { forwardRef as s } from "react";
-import { tv as n } from "tailwind-variants";
+import { uyTv as n } from "@payfit/unity-themes";
 import { useSelectOptionContext as l } from "./SelectOption.context.js";
 const p = n({
   base: "uy:typography-body",

package/dist/esm/components/select-field/SelectField.d.ts

@@ -32,7 +32,7 @@ type SelectFieldComponent = (<TItems extends object, TSchema extends Schema>(pro
  *
  *   return (
  *    <Form action={handleSubmit}>
- *      <SelectField<typeof schema>
+ *      <SelectField<{id?: string, name:string}, typeof schema>
  *        name="vegetable"
  *        label="Vegetables"
  *        >