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

package/dist/esm/components/breadcrumbs/Breadcrumbs.js

@@ -1,21 +1,30 @@
 import { jsx as e } from "react/jsx-runtime";
-import { forwardRef as c, Fragment as m } from "react";
-import { Breadcrumbs as d } from "react-aria-components";
-import { useBreakpointListener as p } from "../../hooks/use-breakpoint-listener.js";
-import { BreadcrumbsProvider as u } from "./Breadcrumbs.context.js";
-import { breadcrumbsVariant as f } from "./Breadcrumbs.variant.js";
-const l = (o, r, t) => o ? r.length === 0 ? null : t(r.at(r.length === 1 ? 0 : -2)) : r.map((a) => /* @__PURE__ */ e(m, { children: t(a) }, `${a.label}${a.href}`)), k = c(({ items: o, children: r, wrap: t = "nowrap" }, a) => {
-  const { base: i } = f({ wrap: t }), n = p(), s = n === "xs" || n === "sm";
+import { forwardRef as m, Fragment as d } from "react";
+import { Breadcrumbs as p } from "react-aria-components";
+import { useBreakpointListener as u } from "../../hooks/use-breakpoint-listener.js";
+import { BreadcrumbsProvider as f } from "./Breadcrumbs.context.js";
+import { breadcrumbsVariant as l } from "./Breadcrumbs.variant.js";
+const b = (o, r, t) => o ? r.length === 0 ? null : t(r.at(r.length === 1 ? 0 : -2)) : r.map((a) => /* @__PURE__ */ e(d, { children: t(a) }, `${a.label}${a.href}`)), w = m(({ items: o, children: r, wrap: t = "nowrap", ...a }, i) => {
+  const { base: c } = l({ wrap: t }), n = u(), s = n === "xs" || n === "sm";
   return /* @__PURE__ */ e(
-    u,
+    f,
     {
       wrap: t,
       isMobile: s,
       isStaticApi: o === void 0,
-      children: /* @__PURE__ */ e(d, { "data-dd-privacy": "allow", ref: a, className: i(), children: o ? l(s, o, r) : r })
+      children: /* @__PURE__ */ e(
+        p,
+        {
+          "data-dd-privacy": "allow",
+          ref: i,
+          className: c(),
+          ...a,
+          children: o ? b(s, o, r) : r
+        }
+      )
     }
   );
 });
 export {
-  k as Breadcrumbs
+  w as Breadcrumbs
 };

package/dist/esm/components/breadcrumbs/parts/Breadcrumb.js

@@ -1,22 +1,29 @@
-import { jsxs as c, jsx as r, Fragment as h } from "react/jsx-runtime";
+import { jsxs as i, jsx as r, Fragment as h } from "react/jsx-runtime";
 import { forwardRef as x } from "react";
-import { Breadcrumb as m } from "react-aria-components";
-import { Icon as s } from "../../icon/Icon.js";
+import { Breadcrumb as s } from "react-aria-components";
+import { Icon as m } from "../../icon/Icon.js";
 import { Link as u } from "../../link/Link.js";
 import { Tooltip as g } from "../../tooltip/Tooltip.js";
-import { useBreadcrumbsContext as B } from "../Breadcrumbs.context.js";
-import { breadcrumbsVariant as C } from "../Breadcrumbs.variant.js";
-const L = 25, d = ({ children: t, href: e }) => t.length > L ? /* @__PURE__ */ r(g, { title: t, children: /* @__PURE__ */ r(u, { isExact: !0, href: e, color: "secondary", maxCharactersTruncation: 25, children: t }) }) : /* @__PURE__ */ r(u, { isExact: !0, href: e, color: "secondary", maxCharactersTruncation: 25, children: t }), R = x((t, e) => {
-  const { wrap: l, isMobile: f, isStaticApi: p } = B(), { breadcrumb: o } = C({ wrap: l });
+import { useBreadcrumbsContext as w } from "../Breadcrumbs.context.js";
+import { breadcrumbsVariant as B } from "../Breadcrumbs.variant.js";
+const C = 25, l = ({ children: t, href: e }) => t.length > C ? /* @__PURE__ */ r(g, { title: t, children: /* @__PURE__ */ r(u, { isExact: !0, href: e, color: "secondary", maxCharactersTruncation: 25, children: t }) }) : /* @__PURE__ */ r(u, { isExact: !0, href: e, color: "secondary", maxCharactersTruncation: 25, children: t }), R = x((t, e) => {
+  const { wrap: d, isMobile: f, isStaticApi: p } = w(), { breadcrumb: o } = B({ wrap: d });
   if (!t)
     return null;
-  const { href: n, label: a, ...i } = t;
-  return f && !p ? /* @__PURE__ */ c(m, { ref: e, ...i, className: o(), children: [
-    /* @__PURE__ */ r(s, { src: "CaretLeftOutlined", "aria-hidden": "true" }),
-    /* @__PURE__ */ r(d, { href: n, children: a })
-  ] }) : /* @__PURE__ */ r(m, { ref: e, ...i, className: o(), children: ({ isCurrent: b }) => b ? /* @__PURE__ */ r("span", { className: "uy-text-nowrap", children: a }) : /* @__PURE__ */ c(h, { children: [
-    /* @__PURE__ */ r(d, { href: n, children: a }),
-    /* @__PURE__ */ r(s, { src: "CaretRightOutlined", "aria-hidden": "true" })
+  const { href: n, label: a, ...c } = t;
+  return f && !p ? /* @__PURE__ */ i(s, { ref: e, ...c, className: o(), children: [
+    /* @__PURE__ */ r(m, { src: "CaretLeftOutlined", "aria-hidden": "true" }),
+    /* @__PURE__ */ r(l, { href: n, children: a })
+  ] }) : /* @__PURE__ */ r(s, { ref: e, ...c, className: o(), children: ({ isCurrent: b }) => b ? /* @__PURE__ */ r("span", { className: "uy-text-nowrap uy-text-content-neutral-lowest", children: a }) : /* @__PURE__ */ i(h, { children: [
+    /* @__PURE__ */ r(l, { href: n, children: a }),
+    /* @__PURE__ */ r(
+      m,
+      {
+        src: "CaretRightOutlined",
+        "aria-hidden": "true",
+        color: "content.neutral.lowest"
+      }
+    )
   ] }) });
 });
 export {

package/dist/esm/components/button/Button.variants.js

@@ -1,5 +1,5 @@
 import { tv as e } from "tailwind-variants";
-const a = e({
+const t = e({
   base: [
     "uy-group",
     "uy-rounded-75 uy-px-200 uy-h-500 uy-inline-flex uy-items-center uy-justify-center uy-whitespace-nowrap uy-typography-action uy-transition-colors",
@@ -25,33 +25,33 @@ const a = e({
     size: "default"
   }
 }), r = e({
-  extend: a,
+  extend: t,
   variants: {
     color: {
       primary: [
         "uy-bg-surface-primary-enabled uy-text-content-inverted-enabled",
-        "hover:uy-bg-surface-primary-hover",
-        "active:uy-bg-surface-primary-active",
-        "data-[pressed]:uy-bg-surface-primary-active"
+        "hover:uy-bg-surface-primary-hover hover:uy-text-content-inverted-hover",
+        "active:uy-bg-surface-primary-active active:uy-text-content-inverted-hover",
+        "data-[pressed]:uy-bg-surface-primary-pressed data-[pressed]:uy-text-content-inverted-pressed"
       ],
       warning: [
-        "uy-bg-surface-warning-enabled uy-text-content-inverted-enabled",
-        "hover:uy-bg-surface-warning-hover",
-        "active:uy-bg-surface-warning-active",
-        "data-[pressed]:uy-bg-surface-warning-active"
+        "uy-bg-surface-warning-enabled uy-text-content-neutral-enabled",
+        "hover:uy-bg-surface-warning-hover hover:uy-text-content-neutral-hover",
+        "active:uy-bg-surface-warning-active active:uy-text-content-neutral-active",
+        "data-[pressed]:uy-bg-surface-warning-pressed data-[pressed]:uy-text-content-neutral-pressed"
       ],
       danger: [
         "uy-bg-surface-danger-enabled uy-text-content-inverted-enabled",
-        "hover:uy-bg-surface-danger-hover",
-        "active:uy-bg-surface-danger-active",
-        "data-[pressed]:uy-bg-surface-danger-active"
+        "hover:uy-bg-surface-danger-hover hover:uy-text-content-inverted-hover",
+        "active:uy-bg-surface-danger-active active:uy-text-content-inverted",
+        "data-[pressed]:uy-bg-surface-danger-pressed data-[pressed]:uy-text-content-inverted"
       ],
       inverted: [
-        "uy-bg-surface-inverted-enabled uy-text-content-neutral-enabled",
-        "hover:uy-bg-surface-inverted-hover",
-        "active:uy-bg-surface-inverted-active",
-        "data-[pressed]:uy-bg-surface-inverted-active",
-        "focus-visible:uy-outline-utility-inverted-focus-ring"
+        "uy-bg-surface-neutral-enabled uy-text-content-neutral-enabled",
+        "hover:uy-bg-surface-neutral-hover hover:uy-text-content-neutral-hover",
+        "active:uy-bg-surface-neutral-active active:uy-text-content-neutral-active",
+        "data-[pressed]:uy-bg-surface-neutral-active data-[pressed]:uy-text-content-neutral-pressed",
+        "focus-visible:uy-outline-utility-inverted-focus-ring focus-visible:uy-text-content-neutral-focus focus-visible:uy-bg-surface-neutral-focus"
       ]
     },
     isDisabled: {
@@ -63,19 +63,21 @@ const a = e({
       false: ""
     }
   }
-}), u = e({
-  extend: a,
+}), n = e({
+  extend: t,
   base: "uy-border uy-border-solid",
   variants: {
     color: {
       primary: [
-        "uy-bg-transparent uy-text-content-primary-enabled uy-border-border-primary-enabled",
-        "focus-visible:uy-border-border-primary-focus focus-visible:uy-text-content-primary-focus",
-        "hover:uy-text-content-primary-hover hover:uy-border-border-primary-hover",
-        "active:uy-text-content-primary-active active:uy-border-border-primary-active"
+        "uy-bg-transparent uy-text-content-neutral-enabled uy-border-border-neutral-high-enabled",
+        "hover:uy-text-content-neutral-hover hover:uy-border-border-neutral-high-hover",
+        "active:uy-text-content-neutral-active active:uy-border-border-neutral-high-pressed",
+        "data-[pressed]:uy-text-content-neutral-pressed data-[pressed]:uy-border-border-neutral-high-pressed",
+        "focus-visible:uy-border-border-neutral-high-focus focus-visible:uy-text-content-neutral-focus"
       ],
       inverted: [
-        "uy-bg-transparent uy-text-content-inverted uy-border-border-inverted-enabled"
+        "uy-bg-transparent uy-text-content-inverted uy-border-border-inverted-enabled",
+        "focus-visible:uy-outline-utility-inverted-focus-ring"
       ]
     },
     isDisabled: {
@@ -86,36 +88,36 @@ const a = e({
       true: "data-[loading]:uy-text-content-neutral-disabled data-[loading]:uy-border-border-neutral-disabled"
     }
   }
-}), n = e({
-  extend: a,
+}), u = e({
+  extend: t,
   variants: {
     color: {
       primary: [
-        "uy-bg-transparent uy-text-content-primary",
-        "enabled:hover:uy-bg-surface-primary-lowest-hover",
-        "active:uy-bg-surface-primary-lowest-active",
-        "data-[pressed]:uy-bg-surface-primary-lowest-active",
+        "uy-bg-transparent uy-text-content-primary-enabled",
+        "enabled:hover:uy-bg-surface-primary-lowest-hover enabled:hover:uy-text-content-primary-hover",
+        "enabled:active:uy-bg-surface-primary-lowest-active enabled:active:uy-text-content-primary-active",
+        "enabled:data-[pressed=true]:uy-bg-surface-primary-lowest-pressed enabled:data-[pressed=true]:uy-text-content-primary-pressed",
         "focus-visible:uy-bg-transparent"
       ],
       warning: [
         "uy-bg-transparent uy-text-content-warning-enabled",
-        "enabled:hover:uy-bg-surface-warning-lowest-hover",
-        "active:uy-bg-surface-warning-lowest-active",
-        "data-[pressed]:uy-bg-surface-warning-lowest-active",
+        "enabled:hover:uy-bg-surface-warning-lowest-hover enabled:hover:uy-text-content-warning-hover",
+        "enabled:active:uy-bg-surface-warning-lowest-active enabled:active:uy-text-content-warning-active",
+        "enabled:data-[pressed=true]:uy-bg-surface-warning-lowest-pressed enabled:data-[pressed=true]:uy-text-content-warning-pressed",
         "focus-visible:uy-bg-transparent"
       ],
       danger: [
         "uy-bg-transparent uy-text-content-danger-enabled",
-        "enabled:hover:uy-bg-surface-danger-lowest-hover",
-        "active:uy-bg-surface-danger-lowest-active",
-        "data-[pressed]:uy-bg-surface-danger-lowest-active",
+        "enabled:hover:uy-bg-surface-danger-lowest-hover enabled:hover:uy-text-content-danger-hover",
+        "enabled:active:uy-bg-surface-danger-lowest-active enabled:active:uy-text-content-danger-active",
+        "enabled:data-[pressed=true]:uy-bg-surface-danger-lowest-pressed enabled:data-[pressed=true]:uy-text-content-danger-pressed",
         "focus-visible:uy-bg-transparent"
       ],
       neutral: [
         "uy-bg-transparent uy-text-content-neutral-enabled",
-        "enabled:hover:uy-bg-surface-neutral-hover",
-        "active:uy-bg-surface-neutral-active",
-        "data-[pressed]:uy-bg-surface-neutral-active",
+        "enabled:hover:uy-bg-surface-neutral-hover enabled:hover:uy-text-content-neutral-hover",
+        "enabled:active:uy-bg-surface-neutral-active enabled:active:uy-text-content-neutral-active",
+        "enabled:data-[pressed=true]:uy-bg-surface-neutral-pressed enabled:data-[pressed=true]:uy-text-content-neutral-pressed",
         "focus-visible:uy-bg-transparent"
       ]
     },
@@ -131,6 +133,6 @@ const a = e({
 });
 export {
   r as buttonFilled,
-  n as buttonGhost,
-  u as buttonOutlined
+  u as buttonGhost,
+  n as buttonOutlined
 };

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

@@ -2,7 +2,7 @@ import { tv as e } from "tailwind-variants";
 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 uy-leading-[1lh]",
+    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] data-[disabled]:uy-text-content-form-disabled",
     asterisk: "uy-text-content-danger",
     optionalTag: "uy-typography-body uy-leading-[1lh]",
     descriptionsContainer: "uy-ml-300 uy-leading-0 uy-inline-flex uy-flex-col uy-gap-50",

package/dist/esm/components/checkbox/parts/CheckboxIndicator.js

@@ -69,7 +69,7 @@ const c = u({
       isSelected: !0,
       isInvalid: !0,
       className: {
-        base: "!uy-border-border-danger !uy-bg-surface-danger",
+        base: "!uy-border-border-form-error !uy-bg-surface-danger",
         checkmark: "uy-text-content-inverted"
       }
     },

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

@@ -1,5 +1,5 @@
 import { jsx as a, jsxs as r } from "react/jsx-runtime";
-import { useState as m } from "react";
+import { useState as b } 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";
@@ -25,7 +25,7 @@ const z = Z({
       // selected cells
       "data-[selected]:uy-bg-surface-form-active data-[selected]:uy-text-content-inverted",
       // "current day" (today) indicator
-      "data-[today]:after:uy-content-' ' data-[today]:after:uy-absolute data-[today]:after:uy-bottom-150 data-[today]:after:uy-w-100 data-[today]:after:uy-h-25 data-[today]:after:uy-bg-border-primary-active data-[today]:data-[selected]:after:uy-bg-content-inverted"
+      "data-[today]:after:uy-content-' ' data-[today]:after:uy-absolute data-[today]:after:uy-bottom-150 data-[today]:after:uy-w-100 data-[today]:after:uy-h-25 data-[today]:after:uy-bg-surface-primary-active data-[today]:data-[selected]:after:uy-bg-content-inverted"
     ]
   },
   variants: {
@@ -48,9 +48,9 @@ function A({
   onFocusChange: i,
   ...t
 }) {
-  const f = I(p()), [g, x] = m(
+  const f = I(p()), [g, x] = b(
     c ?? l ?? f
-  ), [n, u] = m(
+  ), [n, u] = b(
     c ?? l ?? f
   ), D = $(), C = q({
     startYear: d == null ? void 0 : d.year,
@@ -67,7 +67,7 @@ function A({
     base: w,
     calendarWrapper: G,
     dialogHeader: L,
-    dialogHeaderGroup: b,
+    dialogHeaderGroup: m,
     calendarGrid: S,
     calendarHeaderCell: Y,
     calendarCell: j
@@ -93,7 +93,7 @@ function A({
           /* @__PURE__ */ r(
             "div",
             {
-              className: b({
+              className: m({
                 className: "uy-pl-100 uy-gap-200"
               }),
               children: [
@@ -123,7 +123,7 @@ function A({
           /* @__PURE__ */ r(
             "div",
             {
-              className: b({
+              className: m({
                 className: "uy-ml-auto uy-gap-100"
               }),
               children: [

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

@@ -1,8 +1,8 @@
 import { jsxs as v, jsx as n } from "react/jsx-runtime";
 import { useState as $ } from "react";
-import { IconSprite as I } from "@payfit/unity-icons";
-import { useId as w } from "react-aria";
-import { useIntl as x } from "react-intl";
+import { IconSprite as w } from "@payfit/unity-icons";
+import { useId as x } from "react-aria";
+import { useIntl as I } from "react-intl";
 function N({
   items: o,
   value: i,
@@ -13,7 +13,7 @@ function N({
   const l = (t) => () => {
     const a = o.find((b) => b.id === t);
     return (a == null ? void 0 : a.name) ?? Array.from({ length: 3 }).join("\0");
-  }, r = w(), c = x(), [p, f] = $(l(i)), d = `${r}-calendar-${e}-select-label`, u = `${r}-calendar-${e}-select`, m = `${r}-calendar-${e}-select-description`, h = e === "month" ? "unity:component:form-field:date-picker:segment-select:month:label" : "unity:component:form-field:date-picker:segment-select:year:label", g = e === "month" ? "unity:component:form-field:date-picker:segment-select:month:description" : "unity:component:form-field:date-picker:segment-select:year:description";
+  }, r = x(), c = I(), [p, f] = $(l(i)), d = `${r}-calendar-${e}-select-label`, u = `${r}-calendar-${e}-select`, m = `${r}-calendar-${e}-select-description`, h = e === "month" ? "unity:component:form-field:date-picker:segment-select:month:label" : "unity:component:form-field:date-picker:segment-select:year:label", g = e === "month" ? "unity:component:form-field:date-picker:segment-select:month:description" : "unity:component:form-field:date-picker:segment-select:year:description";
   return /* @__PURE__ */ v("div", { className: "uy-isolation-isolate uy-relative uy-inline-flex uy-items-center uy-cursor-pointer", children: [
     /* @__PURE__ */ n(
       "label",
@@ -46,8 +46,8 @@ function N({
         children: o.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", children: /* @__PURE__ */ n(
-      I,
+    /* @__PURE__ */ n("div", { className: "uy-absolute uy-right-0 uy-pointer-events-none uy-text-content-neutral-low", children: /* @__PURE__ */ n(
+      w,
       {
         src: "CaretDownOutlined",
         width: 20,

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

@@ -20,7 +20,7 @@ const $ = m({
       "group-[:has(button:focus)]:data-[focus-within]:uy-outline-none group-[:has(button:focus)]:data-[focus-within]:uy-outline-offset-0 group-[:has(button:focus)]:data-[focus-within]:uy-outline-transparent"
     ],
     suffix: [
-      "uy-flex-grow-0 uy-content-center uy-pt-100 uy-pb-100 uy-pl-150 uy-pr-150 uy-border-l uy-border-solid uy-rounded-r-100",
+      "uy-flex-grow-0 uy-content-center uy-pt-100 uy-pb-100 uy-pl-150 uy-pr-150 uy-border-l uy-border-solid uy-rounded-r-100 uy-text-content-neutral-low",
       "hover:uy-bg-surface-neutral-hover active:uy-bg-surface-neutral-pressed active:uy-border-border-form-active data-[pressed]:uy-bg-surface-neutral-pressed data-[pressed]:uy-border-border-form-active",
       "focus-visible:uy-outline-2 focus-visible:uy-outline-utility-focus-ring focus-visible:uy-outline-offset-[3px]"
     ]
@@ -54,7 +54,7 @@ const $ = m({
       isReadOnly: !1,
       className: {
         base: "uy-border-border-form-enabled uy-bg-surface-form-enabled",
-        suffix: "uy-border-border-form-enabled uy-bg-surface-neutral-low uy-text-content-form-enabled"
+        suffix: "uy-border-border-form-enabled uy-bg-surface-neutral uy-text-content-form-enabled"
       }
     }
   ]
@@ -70,7 +70,7 @@ const $ = m({
   }
 }), z = W(
   ({
-    value: l,
+    value: f,
     defaultValue: n,
     isInvalid: b,
     isLoading: p,
@@ -80,7 +80,7 @@ const $ = m({
     onBlur: o,
     onFocus: i,
     onChange: s,
-    onOpenChange: f,
+    onOpenChange: l,
     id: v,
     ...e
   }, A) => {
@@ -91,7 +91,7 @@ const $ = m({
     }), y = (r) => {
       s == null || s(r);
     }, w = (r) => {
-      f == null || f(r), r ? i == null || i() : o == null || o();
+      l == null || l(r), r ? i == null || i() : o == null || o();
     }, k = (r) => e.isDateUnavailable ? e.isDateUnavailable(r) : !1, V = () => {
       d == null || d();
     };
@@ -101,7 +101,7 @@ const $ = m({
         "data-dd-privacy": "mask",
         ...e,
         className: x(),
-        value: l,
+        value: f,
         defaultValue: n,
         minValue: e.minValue,
         maxValue: e.maxValue,
@@ -143,7 +143,7 @@ const $ = m({
               children: /* @__PURE__ */ a(E, { className: "uy-p-150", "data-dd-privacy": "mask", children: /* @__PURE__ */ a(
                 O,
                 {
-                  value: l,
+                  value: f,
                   defaultValue: n,
                   minValue: e.minValue,
                   maxValue: e.maxValue,

package/dist/esm/components/dialog/Dialog.js

@@ -9,7 +9,7 @@ import { DialogButton as v } from "./parts/DialogActions/DialogButton.js";
 const w = x({
   slots: {
     overlay: [
-      "uy-fixed uy-inset-0 uy-z-10 uy-overflow-y-auto",
+      "uy-fixed uy-inset-0 uy-z-30 uy-overflow-y-auto",
       "uy-flex uy-min-h-full uy-items-center uy-justify-center uy-text-center",
       "uy-backdrop-blur-sm uy-bg-utility-backdrop/65"
     ],

package/dist/esm/components/icon-button/CircularIconButton.d.ts

@@ -9,6 +9,7 @@ export declare const circularIconButton: import('tailwind-variants').TVReturnTyp
     color: {
         'content.neutral': string;
         'content.neutral.low': string;
+        'content.neutral.lowest': string;
     };
 }, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
     size: {
@@ -18,6 +19,7 @@ export declare const circularIconButton: import('tailwind-variants').TVReturnTyp
     color: {
         'content.neutral': string;
         'content.neutral.low': string;
+        'content.neutral.lowest': string;
     };
 }, {
     size: {
@@ -27,6 +29,7 @@ export declare const circularIconButton: import('tailwind-variants').TVReturnTyp
     color: {
         'content.neutral': string;
         'content.neutral.low': string;
+        'content.neutral.lowest': string;
     };
 }>, {
     size: {
@@ -36,6 +39,7 @@ export declare const circularIconButton: import('tailwind-variants').TVReturnTyp
     color: {
         'content.neutral': string;
         'content.neutral.low': string;
+        'content.neutral.lowest': string;
     };
 }, undefined, import('tailwind-variants').TVReturnType<{
     size: {
@@ -45,6 +49,7 @@ export declare const circularIconButton: import('tailwind-variants').TVReturnTyp
     color: {
         'content.neutral': string;
         'content.neutral.low': string;
+        'content.neutral.lowest': string;
     };
 }, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
     size: {
@@ -54,6 +59,7 @@ export declare const circularIconButton: import('tailwind-variants').TVReturnTyp
     color: {
         'content.neutral': string;
         'content.neutral.low': string;
+        'content.neutral.lowest': string;
     };
 }, {
     size: {
@@ -63,6 +69,7 @@ export declare const circularIconButton: import('tailwind-variants').TVReturnTyp
     color: {
         'content.neutral': string;
         'content.neutral.low': string;
+        'content.neutral.lowest': string;
     };
 }>, unknown, unknown, undefined>>;
 export interface CircularIconButtonProps extends Omit<AriaButtonProps, 'className'>, VariantProps<typeof circularIconButton> {

package/dist/esm/components/icon-button/CircularIconButton.js

@@ -1,11 +1,11 @@
 import { jsx as e, jsxs as c } from "react/jsx-runtime";
-import { Button as v, Pressable as x } from "react-aria-components";
-import { tv as w } from "tailwind-variants";
+import { Button as v, Pressable as w } from "react-aria-components";
+import { tv as x } from "tailwind-variants";
 import z from "../../hooks/use-id.js";
 import { Icon as d } from "../icon/Icon.js";
 import { Spinner as y } from "../spinner/Spinner.js";
 import { Tooltip as b } from "../tooltip/Tooltip.js";
-const I = w({
+const I = x({
   base: [
     "uy-rounded-circle uy-flex uy-items-center uy-justify-center uy-transition-colors",
     "active:uy-bg-surface-neutral-active",
@@ -21,70 +21,71 @@ const I = w({
     },
     color: {
       "content.neutral": "uy-text-content-neutral",
-      "content.neutral.low": "uy-text-content-neutral-low"
+      "content.neutral.low": "uy-text-content-neutral-low",
+      "content.neutral.lowest": "uy-text-content-neutral-lowest"
     }
   },
   defaultVariants: {
     size: "default",
-    color: "content.neutral"
+    color: "content.neutral.low"
   }
 });
 function N(m) {
   const f = z(), {
-    onPress: o,
-    icon: s,
+    onPress: i,
+    icon: n,
     color: p,
-    size: l,
+    size: r,
     isLoading: t,
-    title: a,
-    isDisabled: i,
+    title: l,
+    isDisabled: o,
     asElement: h = "default",
     className: g,
-    ...n
-  } = m, r = `icon-button-label-${f}`, u = I({ class: g, color: p, size: l });
-  return h === "button" ? /* @__PURE__ */ e(b, { title: a, children: /* @__PURE__ */ c(
+    ...s
+  } = m, a = `icon-button-label-${f}`, u = I({ class: g, color: p, size: r });
+  return h === "button" ? /* @__PURE__ */ e(b, { title: l, children: /* @__PURE__ */ c(
     v,
     {
       "data-dd-privacy": "allow",
-      ...n,
-      onPress: o,
-      isDisabled: i || t,
-      "aria-labelledby": r,
+      ...s,
+      onPress: i,
+      isDisabled: o || t,
+      "aria-labelledby": a,
       "aria-busy": t,
       className: u,
       children: [
         t ? /* @__PURE__ */ e(y, { size: "small", label: "Loading", color: "inherit" }) : /* @__PURE__ */ e(
           d,
           {
-            src: s,
-            size: l === "large" ? 24 : 20,
+            src: n,
+            size: r === "large" ? 24 : 20,
             color: "inherit",
             role: "presentation"
           }
         ),
-        /* @__PURE__ */ e("span", { id: r, className: "uy-sr-only", children: a })
+        /* @__PURE__ */ e("span", { id: a, className: "uy-sr-only", children: l })
       ]
     }
-  ) }) : /* @__PURE__ */ e(b, { title: a, children: /* @__PURE__ */ e(
-    x,
+  ) }) : /* @__PURE__ */ e(b, { title: l, children: /* @__PURE__ */ e(
+    w,
     {
       "data-dd-privacy": "allow",
-      ...n,
-      onPress: o,
-      isDisabled: i || t,
-      "aria-labelledby": r,
+      ...s,
+      onPress: i,
+      isDisabled: o || t,
+      "aria-labelledby": a,
       "aria-busy": t,
-      children: /* @__PURE__ */ c("div", { role: "button", "aria-disabled": i, className: u, children: [
+      children: /* @__PURE__ */ c("div", { role: "button", "aria-disabled": o, className: u, children: [
         t ? /* @__PURE__ */ e(y, { size: "small", label: "Loading", color: "inherit" }) : /* @__PURE__ */ e(
           d,
           {
-            src: s,
-            size: l === "large" ? 24 : 20,
+            src: n,
+            size: r === "large" ? 24 : 20,
             color: "inherit",
             role: "presentation"
           }
         ),
-        /* @__PURE__ */ e("span", { id: r, className: "uy-sr-only", children: a })
+        /* @__PURE__ */ e("span", { id: a, className: "uy-sr-only", children: l })
       ] })
     }
   ) });

package/dist/esm/components/icon-button/IconButton.d.ts

@@ -19,8 +19,5 @@ interface IconButtonVariantsSecondaryProps extends IconButtonBaseProps, Omit<Ico
 }
 interface IconButtonVariantsGhostProps extends IconButtonBaseProps, Omit<IconButtonGhost, 'variant' | 'color'>, Required<Pick<IconButtonGhost, 'variant' | 'color'>> {
 }
-export declare function IconButton(props: IconButtonVariantsPrimaryProps | IconButtonVariantsSecondaryProps | IconButtonVariantsGhostProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace IconButton {
-    var displayName: string;
-}
+export declare const IconButton: import('react').ForwardRefExoticComponent<(IconButtonVariantsPrimaryProps | IconButtonVariantsSecondaryProps | IconButtonVariantsGhostProps) & import('react').RefAttributes<HTMLButtonElement>>;
 export {};