@payfit/unity-components 2.2.5 → 2.2.7

package/dist/esm/components/action-bar/ActionBar.js

@@ -15,7 +15,7 @@ const V = z({
   slots: {
     base: [
       "uy:bg-surface-inverted uy:text-content-inverted",
-      "uy:rounded-100 uy:shadow-raising",
+      "uy:rounded-100 uy:shadow-300",
       "uy:flex uy:items-center uy:gap-100 uy:md:gap-200 uy:py-50 uy:pl-50 uy:md:pl-200 uy:pr-50",
       "uy:transition-all uy:duration-200",
       "uy:max-w-full uy:min-w-0 uy:w-fit",

package/dist/esm/components/autocomplete/parts/AutocompletePanel.js

@@ -1,15 +1,15 @@
-import { jsx as e, jsxs as i } from "react/jsx-runtime";
-import { uyTv as y } from "@payfit/unity-themes";
+import { jsx as e, jsxs as y } from "react/jsx-runtime";
+import { uyTv as i } from "@payfit/unity-themes";
 import { Popover as m, ListBox as c } from "react-aria-components";
 import { FormattedMessage as d } from "react-intl";
 import { Icon as p } from "../../icon/Icon.js";
 import { Text as t } from "../../text/Text.js";
-const f = y({
+const f = i({
   slots: {
-    base: "uy:rounded-75 uy:border uy:border-solid uy:border-border-neutral uy:w-[var(--trigger-width)] uy:bg-surface-neutral uy:max-h-[312px] uy:shadow-floating",
+    base: "uy:rounded-75 uy:border uy:border-solid uy:border-border-neutral uy:w-[var(--trigger-width)] uy:bg-surface-neutral uy:max-h-[312px] uy:shadow-300",
     list: "uy:overflow-y-auto uy:max-h-[296px] uy:p-100"
   }
-}), g = () => /* @__PURE__ */ i("div", { className: "uy:flex uy:flex-col uy:gap-200 uy:items-center uy:justify-center uy:h-[312px]", children: [
+}), g = () => /* @__PURE__ */ y("div", { className: "uy:flex uy:flex-col uy:gap-200 uy:items-center uy:justify-center uy:h-[312px]", children: [
   /* @__PURE__ */ e(
     t,
     {
@@ -26,14 +26,14 @@ const f = y({
     }
   ) })
 ] }), h = (r) => {
-  const { children: o, panelWidth: s, searchRef: a, ...u } = r, { base: l, list: n } = f();
+  const { children: o, panelWidth: s, searchRef: u, ...a } = r, { base: l, list: n } = f();
   return /* @__PURE__ */ e(
     m,
     {
-      ...u,
+      ...a,
       className: l(),
       offset: 1,
-      triggerRef: a,
+      triggerRef: u,
       isNonModal: !0,
       style: { "--trigger-width": s },
       children: /* @__PURE__ */ e(c, { className: n(), renderEmptyState: g, children: o })

package/dist/esm/components/card/Card.d.ts

@@ -11,6 +11,12 @@ export declare const card: import('tailwind-variants').TVReturnType<{
         flying: {
             base: string;
         };
+        '100': {
+            base: string;
+        };
+        '300': {
+            base: string;
+        };
     };
     bgColor: {
         'surface.neutral': {
@@ -48,6 +54,12 @@ export declare const card: import('tailwind-variants').TVReturnType<{
         flying: {
             base: string;
         };
+        '100': {
+            base: string;
+        };
+        '300': {
+            base: string;
+        };
     };
     bgColor: {
         'surface.neutral': {
@@ -85,6 +97,12 @@ export declare const card: import('tailwind-variants').TVReturnType<{
         flying: {
             base: string;
         };
+        '100': {
+            base: string;
+        };
+        '300': {
+            base: string;
+        };
     };
     bgColor: {
         'surface.neutral': {

package/dist/esm/components/card/Card.js

@@ -1,5 +1,5 @@
 import { jsx as y } from "react/jsx-runtime";
-import { forwardRef as h, useRef as C, useState as E, useLayoutEffect as _ } from "react";
+import { forwardRef as g, useRef as C, useState as E, useLayoutEffect as _ } from "react";
 import { uyTv as S } from "@payfit/unity-themes";
 import { useId as x } from "react-aria";
 import { CardContext as N } from "./Card.context.js";
@@ -14,10 +14,16 @@ const V = S({
         base: "uy:shadow-none"
       },
       raising: {
-        base: "uy:shadow-raising"
+        base: "uy:shadow-100"
       },
       flying: {
-        base: "uy:shadow-flying"
+        base: "uy:shadow-300"
+      },
+      100: {
+        base: "uy:shadow-100"
+      },
+      300: {
+        base: "uy:shadow-300"
       }
     },
     bgColor: {
@@ -48,9 +54,9 @@ const V = S({
     shadow: "none",
     bgColor: "surface.neutral"
   }
-}), I = h(
+}), I = g(
   ({ shadow: o, bgColor: s, children: l, ...a }, r) => {
-    const n = x(), u = C(null), [c, b] = E(!1), v = a.id ?? `unity-card-${n}`, d = `unity-card-${n}__title`, t = a["aria-label"];
+    const n = x(), u = C(null), [d, b] = E(!1), w = a.id ?? `unity-card-${n}`, c = `unity-card-${n}__title`, t = a["aria-label"];
     _(() => {
       const e = u.current;
       if (!e) return;
@@ -61,24 +67,24 @@ const V = S({
         "Card: A Card must have either a CardTitle child or an aria-label prop for accessibility."
       );
     }, [l, t]);
-    const i = (s ?? "surface.neutral") === "surface.neutral" && (o ?? "none") !== "none", w = i ? o : "none", { base: m } = V({
-      shadow: w,
+    const i = (s ?? "surface.neutral") === "surface.neutral" && (o ?? "none") !== "none", v = i ? o : "none", { base: m } = V({
+      shadow: v,
       bgColor: s
-    }), g = {
-      titleId: d
+    }), h = {
+      titleId: c
     }, p = a.asElement ?? "section";
-    return /* @__PURE__ */ y(N.Provider, { value: g, children: /* @__PURE__ */ y(
+    return /* @__PURE__ */ y(N.Provider, { value: h, children: /* @__PURE__ */ y(
       p,
       {
         "data-dd-privacy": "show",
         ...a,
-        id: v,
+        id: w,
         ref: (e) => {
           u.current = e, typeof r == "function" ? r(e) : r && (r.current = e);
         },
         className: m(),
-        "aria-labelledby": c ? d : void 0,
-        "aria-label": c ? void 0 : t,
+        "aria-labelledby": d ? c : void 0,
+        "aria-label": d ? void 0 : t,
         "data-unity-component": "card",
         "data-unity-variant": i ? "shadow" : void 0,
         children: l

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

@@ -59,7 +59,7 @@ const z = b({
     }
   ]
 }), A = b({
-  base: "uy:overflow-auto uy:shadow-floating uy:border uy:border-solid uy:border-border-neutral uy:bg-surface-neutral uy:rounded-md uy:sm:rounded-75",
+  base: "uy:overflow-auto uy:shadow-300 uy:border uy:border-solid uy:border-border-neutral uy:bg-surface-neutral uy:rounded-md uy:sm:rounded-75",
   variants: {
     isEntering: {
       true: "uy:animate-in uy:fade-in uy:data-[placement-bottom]:slide-in-from-top-1 uy:data-[placement-top]:slide-in-from-bottom-1 uy:duration-200 uy:ease-out"

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

@@ -23,7 +23,7 @@ const T = f({
       "uy:m-0",
       "uy:rounded-t-300 uy:md:rounded-200",
       "uy:overflow-hidden uy:bg-white uy:p-300 uy:pt-400 uy:md:p-400",
-      "uy:text-left uy:align-middle uy:shadow-floating",
+      "uy:text-left uy:align-middle uy:shadow-400",
       "uy:bg-surface-neutral",
       "uy:data-[entering]:animate-slide-up-fade-in uy:data-[exiting]:animate-slide-down-fade-out",
       "uy:md:[animation-delay:100ms] uy:md:data-[entering]:animate-zoom-in uy:md:data-[exiting]:animate-zoom-out"

package/dist/esm/components/filter/parts/FilterPopover.js

@@ -6,7 +6,7 @@ import { Button as r } from "../../button/Button.js";
 const x = m({
   slots: {
     popover: [
-      "uy:border uy:border-solid uy:border-border-neutral uy:bg-surface-neutral uy:rounded-sm uy:shadow-floating uy:min-w-[320px] uy:max-w-[800px] uy:relative uy:isolate uy:overflow-hidden",
+      "uy:border uy:border-solid uy:border-border-neutral uy:bg-surface-neutral uy:rounded-sm uy:shadow-300 uy:min-w-[320px] uy:max-w-[800px] uy:relative uy:isolate uy:overflow-hidden",
       "uy:transition-all uy:duration-200 uy:linear uy:data-[entering]:opacity-100 uy:data-[exiting]:opacity-0",
       'uy:data-[entering]:data-[placement="bottom"]:-translate-y-100 uy:data-[entering]:data-[placement="bottom"]:translate-x-0 uy:data-[exiting]:data-[placement="bottom"]:translate-y-0',
       'uy:data-[entering]:data-[placement="top"]:translate-y-100 uy:data-[entering]:data-[placement="top"]:translate-x-0 uy:data-[exiting]:data-[placement="top"]:translate-y-0',

package/dist/esm/components/menu/parts/MenuContent.js

@@ -12,7 +12,7 @@ function s({
     {
       triggerRef: t,
       placement: o,
-      className: "uy:flex uy:flex-col uy:justify-end uy:items-start uy:p-100 uy:rounded-100 uy:border uy:border-solid uy:border-border-neutral uy:bg-surface-neutral uy:shadow-floating",
+      className: "uy:flex uy:flex-col uy:justify-end uy:items-start uy:p-100 uy:rounded-100 uy:border uy:border-solid uy:border-border-neutral uy:bg-surface-neutral uy:shadow-300",
       "data-dd-privacy": "allow",
       children: /* @__PURE__ */ u(y, { autoFocus: "first", className: `uy:min-w-[320px] ${n}`, children: r })
     }

package/dist/esm/components/multi-select/parts/MultiSelectPopover.js

@@ -6,7 +6,7 @@ import { Icon as g } from "../../icon/Icon.js";
 import { MultiSelectContext as w } from "../Multiselect.context.js";
 const S = t({
   slots: {
-    base: "uy:shadow-floating uy:absolute uy:top-full uy:left-0 uy:z-50 uy:w-full uy:rounded-100 uy:sm:rounded-75 uy:border uy:border-solid uy:border-border-neutral uy:bg-surface-neutral uy:overflow-auto uy:max-h-[min(var(--popover-available-height,300px),300px)] uy:outline-none",
+    base: "uy:shadow-300 uy:absolute uy:top-full uy:left-0 uy:z-50 uy:w-full uy:rounded-100 uy:sm:rounded-75 uy:border uy:border-solid uy:border-border-neutral uy:bg-surface-neutral uy:overflow-auto uy:max-h-[min(var(--popover-available-height,300px),300px)] uy:outline-none",
     list: "uy:p-100"
   }
 }), N = t({

package/dist/esm/components/phone-number/PhoneNumberInput.js

@@ -80,7 +80,7 @@ const pe = Y({
     ],
     selectPopover: [
       //common
-      "uy:border uy:border-solid uy:border-border-neutral uy:w-[var(--trigger-width)] uy:bg-surface-neutral-enabled",
+      "uy:border uy:border-solid uy:border-border-neutral uy:w-[var(--trigger-width)] uy:bg-surface-neutral-enabled uy:shadow-300",
       // mobile
       "uy:rounded-100",
       // desktop

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

@@ -7,7 +7,7 @@ import { PopoverHeader as f } from "./parts/PopoverHeader.js";
 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",
+      "uy:border uy:border-solid uy:border-border-neutral uy:bg-surface-neutral uy:rounded-200 uy:p-200 uy:shadow-300 uy:min-w-[320px] uy:max-w-[800px] uy:overflow-auto",
       "uy:transition-all uy:duration-200 uy:linear uy:data-[entering]:opacity-100 uy:data-[exiting]:opacity-0",
       'uy:data-[entering]:data-[placement="bottom"]:-translate-y-100 uy:data-[entering]:data-[placement="bottom"]:translate-x-0 uy:data-[exiting]:data-[placement="bottom"]:translate-y-0',
       'uy:data-[entering]:data-[placement="top"]:translate-y-100 uy:data-[entering]:data-[placement="top"]:translate-x-0 uy:data-[exiting]:data-[placement="top"]:translate-y-0',

package/dist/esm/components/promo-dialog/PromoDialog.js

@@ -27,7 +27,7 @@ const k = N({
       "uy:m-0",
       "uy:rounded-t-300 uy:md:rounded-300",
       "uy:bg-surface-neutral",
-      "uy:text-left uy:align-middle uy:shadow-floating",
+      "uy:text-left uy:align-middle uy:shadow-400",
       // Mobile: enter/leave animation
       "uy:data-[entering]:animate-slide-up-fade-in uy:data-[exiting]:animate-slide-down-fade-out",
       "uy:md:[animation-delay:100ms]",

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

@@ -8,7 +8,7 @@ import { SelectButton as V } from "./parts/SelectButton.js";
 const $ = F({
   slots: {
     base: "uy:flex uy:flex-col uy:gap-100 uy:w-full",
-    popover: "uy:rounded-100 uy:sm:rounded-75 uy:border uy:border-solid uy:border-border-neutral uy:w-[var(--trigger-width)] uy:bg-surface-neutral",
+    popover: "uy:rounded-100 uy:sm:rounded-75 uy:border uy:border-solid uy:border-border-neutral uy:w-[var(--trigger-width)] uy:bg-surface-neutral uy:shadow-300",
     listbox: "uy:overflow-y-auto uy:max-h-[296px] uy:pt-100 uy:pb-100"
   }
 }), k = ({
@@ -17,8 +17,8 @@ const $ = F({
   placeholder: r,
   isDisabled: s,
   isInvalid: l,
-  isReadOnly: n,
-  value: a,
+  isReadOnly: a,
+  value: n,
   defaultValue: m,
   onChange: i,
   isSearchable: f = !1,
@@ -27,8 +27,8 @@ const $ = F({
   searchInputAriaLabel: x,
   ...S
 }, g) => {
-  const v = T(), [w, N] = C(!1), { contains: O } = I({ sensitivity: "base" }), { base: L, popover: P, listbox: u } = $(), j = a !== void 0 || i !== void 0 ? {
-    value: a,
+  const v = T(), [w, N] = C(!1), { contains: O } = I({ sensitivity: "base" }), { base: L, popover: P, listbox: u } = $(), j = n !== void 0 || i !== void 0 ? {
+    value: n,
     onChange: i
   } : { defaultValue: m };
   return /* @__PURE__ */ c(
@@ -39,7 +39,7 @@ const $ = F({
       ref: g,
       className: L(),
       placeholder: s ? void 0 : r,
-      isDisabled: s || n,
+      isDisabled: s || a,
       isInvalid: l,
       onBlur: b,
       ...j,
@@ -49,7 +49,7 @@ const $ = F({
           {
             isDisabled: s,
             isInvalid: l,
-            isReadOnly: n,
+            isReadOnly: a,
             isOpen: w
           }
         ),

package/dist/esm/components/toast/UnityToast.js

@@ -8,7 +8,7 @@ import { ToastTitle as x } from "./parts/ToastTitle.js";
 import { ToastProvider as T } from "./Toast.context.js";
 const v = p({
   slots: {
-    base: "uy:sm:w-[416px] uy:border uy:border-solid uy:rounded-150 uy:text-content-neutral uy:bg-surface-neutral uy:shadow-floating uy:p-100 uy:flex uy:gap-125 uy:border-border-neutral",
+    base: "uy:sm:w-[416px] uy:border uy:border-solid uy:rounded-150 uy:text-content-neutral uy:bg-surface-neutral uy:shadow-300 uy:p-100 uy:flex uy:gap-125 uy:border-border-neutral",
     contentWrapper: "uy:flex uy:grow uy:ml-125",
     divider: "uy:border-l-[1px] uy:border-solid uy:border-border-neutral uy:self-stretch"
   },

package/dist/esm/components/tooltip/Tooltip.js

@@ -1,24 +1,24 @@
 import { jsxs as y, jsx as r } from "react/jsx-runtime";
 import { forwardRef as n } from "react";
-import { TooltipTrigger as p, Tooltip as u, Button as i } from "react-aria-components";
+import { TooltipTrigger as u, Tooltip as p, Button as i } from "react-aria-components";
 import { Button as d } from "../button/Button.js";
 const c = (o) => o.type === d || o.type === i, m = {
   short: [100, 150],
   standard: [150, 200],
   long: [200, 300],
   "very-long": [300, 400]
-}, T = n(
+}, w = n(
   ({ title: o, children: t, duration: a = "standard" }, e) => {
     const [l, s] = m[a];
-    return /* @__PURE__ */ y(p, { delay: l, closeDelay: s, children: [
+    return /* @__PURE__ */ y(u, { delay: l, closeDelay: s, children: [
       t,
       /* @__PURE__ */ r(
-        u,
+        p,
         {
           ref: e,
           "data-dd-privacy": "allow",
           offset: c(t) ? 6 : 8,
-          className: "uy:inline-flex uy:rounded-50 uy:pl-100 uy:pr-100 uy:pt-50 uy:pb-50 uy:bg-grayscale-l12 uy:max-w-[300px]",
+          className: "uy:inline-flex uy:rounded-50 uy:pl-100 uy:pr-100 uy:pt-50 uy:pb-50 uy:bg-grayscale-l12 uy:max-w-[300px] uy:shadow-100",
           children: /* @__PURE__ */ r("p", { className: "uy:typography-body-small uy:text-content-inverted uy:overflow-hidden uy:text-ellipsis uy:line-clamp-3", children: o })
         }
       )
@@ -26,5 +26,5 @@ const c = (o) => o.type === d || o.type === i, m = {
   }
 );
 export {
-  T as Tooltip
+  w as Tooltip
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payfit/unity-components",
-  "version": "2.2.5",
+  "version": "2.2.7",
   "module": "./dist/esm/index.js",
   "type": "module",
   "sideEffects": false,
@@ -42,7 +42,7 @@
     "@hookform/devtools": "4.4.0",
     "@hookform/resolvers": "5.2.1",
     "@internationalized/date": "3.10.0",
-    "@payfit/unity-illustrations": "2.2.5",
+    "@payfit/unity-illustrations": "2.2.7",
     "@radix-ui/react-avatar": "1.1.11",
     "@radix-ui/react-slot": "1.2.4",
     "@react-aria/interactions": "3.25.6",
@@ -70,8 +70,8 @@
   },
   "peerDependencies": {
     "@hookform/devtools": "^4",
-    "@payfit/unity-icons": "2.2.5",
-    "@payfit/unity-themes": "2.2.5",
+    "@payfit/unity-icons": "2.2.7",
+    "@payfit/unity-themes": "2.2.7",
     "@storybook/react-vite": "^10.2.2",
     "@tanstack/react-query": "^5",
     "@tanstack/react-router": "^1.131",
@@ -90,16 +90,16 @@
     "@payfit/hr-apps-tsconfigs": "0.0.0-use.local",
     "@payfit/storybook-addon-console-errors": "0.0.0-use.local",
     "@payfit/storybook-config": "0.0.0-use.local",
-    "@payfit/unity-icons": "2.2.5",
-    "@payfit/unity-illustrations": "2.2.5",
-    "@payfit/unity-themes": "2.2.5",
+    "@payfit/unity-icons": "2.2.7",
+    "@payfit/unity-illustrations": "2.2.7",
+    "@payfit/unity-themes": "2.2.7",
     "@payfit/vite-configs": "0.0.0-use.local",
     "@storybook/addon-a11y": "10.2.2",
     "@storybook/addon-docs": "10.2.2",
     "@storybook/addon-links": "10.2.2",
     "@storybook/addon-vitest": "10.2.2",
     "@storybook/react-vite": "10.2.2",
-    "@tanstack/react-devtools": "0.9.3",
+    "@tanstack/react-devtools": "0.9.4",
     "@tanstack/react-form-devtools": "0.2.13",
     "@tanstack/react-query": "5.90.20",
     "@tanstack/react-router": "1.133.13",