@payfit/unity-components 1.0.0 → 1.1.1-beta.1

package/dist/esm/components/action-bar/ActionBar.d.ts

@@ -0,0 +1,153 @@
+import { default as React, ReactNode } from 'react';
+import { ActionBarActionProps } from './parts/ActionBarAction.js';
+export declare const actionBar: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            selectionArea?: import('tailwind-merge').ClassNameValue;
+            actionArea?: import('tailwind-merge').ClassNameValue;
+            selectionCountText?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            selectionArea?: import('tailwind-merge').ClassNameValue;
+            actionArea?: import('tailwind-merge').ClassNameValue;
+            selectionCountText?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+    selectionArea: string[];
+    actionArea: string[];
+    selectionCountText: string[];
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            selectionArea?: import('tailwind-merge').ClassNameValue;
+            actionArea?: import('tailwind-merge').ClassNameValue;
+            selectionCountText?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+    selectionArea: string[];
+    actionArea: string[];
+    selectionCountText: string[];
+}, import('tailwind-variants').TVReturnType<unknown, {
+    base: string[];
+    selectionArea: string[];
+    actionArea: string[];
+    selectionCountText: string[];
+}, undefined, unknown, unknown, undefined>>;
+/**
+ * Action item interface for dynamic API
+ * Extends ActionBarActionProps but uses onClick instead of onPress and requires id
+ */
+export interface ActionBarActionItem extends Omit<ActionBarActionProps, 'children'> {
+    /** The unique identifier for the action */
+    id: string;
+    /** The label for the action */
+    label: string;
+}
+interface ActionBarBaseProps {
+    /** Unique identifier for the action bar (required for skip links integration) */
+    id?: string;
+    /** Number of selected items */
+    selectionCount: number;
+    /** Callback when selection is cleared */
+    onClearSelection: () => void;
+    /**
+     * Custom text for selection count (optional)
+     */
+    renderSelectionText?: (count: number) => string;
+    /** ARIA label for the toolbar */
+    'aria-label'?: string;
+    /** ARIA keyshortcuts for the action bar */
+    'aria-keyshortcuts'?: string;
+    /** Callback when the action bar is focused */
+    onFocus?: () => void;
+    /** Callback when the action bar is blurred */
+    onBlur?: () => void;
+}
+interface ActionBarStaticProps extends ActionBarBaseProps {
+    /** Static ActionBarAction components */
+    children?: ReactNode;
+    /** Actions prop is not allowed with static API */
+    actions?: never;
+}
+interface ActionBarDynamicProps extends ActionBarBaseProps {
+    /** Array of action items */
+    actions: ActionBarActionItem[];
+    /** Render function that receives action and index */
+    children: (action: ActionBarActionItem, index: number) => ReactNode;
+}
+/**
+ * Represents the props for an ActionBar component, which can be either static or dynamic.
+ *
+ * This type is a union of `ActionBarStaticProps` and `ActionBarDynamicProps`, allowing
+ * flexibility in specifying the props for the ActionBar depending on its behavior.
+ *
+ * Use `ActionBarStaticProps` when the ActionBar requires fixed, unchanging properties,
+ * and utilize `ActionBarDynamicProps` for scenarios where the properties need to be
+ * dynamic or state-dependent.
+ * @see {@link ActionBarStaticProps} for static API props
+ * @see {@link ActionBarDynamicProps} for dynamic API props
+ */
+export type ActionBarProps = ActionBarStaticProps | ActionBarDynamicProps;
+/**
+ * The ActionBar component provides contextual bulk actions when table rows are selected.
+ * It supports both static (declarative) and dynamic (render prop) APIs for maximum flexibility.
+ * @param {ActionBarProps} props - Props for ActionBar including id, selectionCount and onClearSelection
+ * @example
+ * ```tsx
+ * import { ActionBar, ActionBarAction, ActionBarRoot } from '@payfit/unity-components'
+ *
+ * // Static API with ActionBarAction components
+ * function StaticExample() {
+ *   return (
+ *     <ActionBarRoot>
+ *       <ActionBar id="table-actions" selectionCount={2} onClearSelection={handleClear}>
+ *         <ActionBarAction onPress={handleArchive}>Archive</ActionBarAction>
+ *         <ActionBarAction variant="primary" onPress={handleDelete}>Delete</ActionBarAction>
+ *       </ActionBar>
+ *     </ActionBarRoot>
+ *   )
+ * }
+ *
+ * // Dynamic API with actions array and render function
+ * function DynamicExample() {
+ *   const actions = [
+ *     { id: 'archive', onPress: handleArchive, label: 'Archive' },
+ *     { id: 'delete', onPress: handleDelete, variant: 'primary', label: 'Delete' }
+ *   ]
+ *
+ *   return (
+ *     <ActionBarRoot>
+ *       <ActionBar id="table-actions" selectionCount={2} onClearSelection={handleClear} actions={actions}>
+ *         {(action, index) => (
+ *           <ActionBarAction key={action.id} {...action}>
+ *             {action.label}
+ *           </ActionBarAction>
+ *         )}
+ *       </ActionBar>
+ *     </ActionBarRoot>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Must be wrapped in ActionBarRoot for proper positioning
+ * - Only renders when selectionCount > 0
+ * - Static API: pass ActionBarAction components as children
+ * - Dynamic API: provide actions array and render function as children
+ * - Includes proper ARIA labels and live regions for accessibility
+ * @see {@link ActionBarProps} for all available props
+ * @see Source code in [Github](https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/action-bar)
+ * @see Design specs [Figma](https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library)
+ * @see Design docs in [Payfit.design](https://www.payfit.design/)
+ */
+declare const ActionBar: React.ForwardRefExoticComponent<ActionBarProps & React.RefAttributes<HTMLDivElement>>;
+export { ActionBar };

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

@@ -0,0 +1,173 @@
+import { jsxs as n, jsx as o } from "react/jsx-runtime";
+import T, { forwardRef as j, useCallback as z, isValidElement as D } from "react";
+import { uyTv as R } from "@payfit/unity-themes";
+import { Toolbar as S, Group as d } from "react-aria-components";
+import { useIntl as _, FormattedMessage as l } from "react-intl";
+import { Button as E } from "../button/Button.js";
+import { IconButton as F } from "../icon-button/IconButton.js";
+import { Icon as G } from "../icon/Icon.js";
+import { Menu as K } from "../menu/Menu.js";
+import { MenuContent as L } from "../menu/parts/MenuContent.js";
+import { MenuItem as O } from "../menu/parts/MenuItem.js";
+import { MenuTrigger as U } from "../menu/parts/MenuTrigger.js";
+import { ActionBarAction as V } from "./parts/ActionBarAction.js";
+const q = R({
+  slots: {
+    base: [
+      "uy:bg-surface-inverted uy:text-content-inverted",
+      "uy:rounded-100 uy:shadow-raising",
+      "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",
+      // Ensure responsive behavior
+      "uy:focus-visible:outline-2 uy:focus-visible:outline-solid uy:focus-visible:outline-offset-2 uy:focus-visible:outline-utility-focus-ring"
+    ],
+    selectionArea: ["uy:flex uy:items-center uy:gap-100"],
+    actionArea: ["uy:flex uy:items-center uy:gap-100"],
+    selectionCountText: [
+      "uy:typography-body uy:whitespace-nowrap!",
+      "uy:sr-only",
+      "uy:md:not-sr-only"
+    ]
+  }
+}), H = j(
+  ({
+    id: f,
+    selectionCount: u,
+    onClearSelection: p,
+    children: r,
+    actions: a,
+    renderSelectionText: c,
+    "aria-label": b,
+    onFocus: h,
+    onBlur: v,
+    ...i
+  }, g) => {
+    var y;
+    const { base: x, selectionArea: A, selectionCountText: M, actionArea: k } = q(), m = _(), s = a !== void 0 && typeof r == "function", B = i["aria-keyshortcuts"] !== void 0, I = b ?? m.formatMessage({
+      id: "unity:component:action-bar:toolbar-label",
+      defaultMessage: "Bulk actions toolbar"
+    }), C = z(() => {
+      if (s) {
+        const e = r;
+        return a.map((t, P) => e(t, P));
+      }
+      return r;
+    }, [r, a, s]), w = !!r || "actions" in i && i.actions.length > 0, N = s ? a.filter((e) => e.variant !== "primary") : (y = T.Children.map(r, (e) => {
+      if (!D(e) || e.type !== V)
+        return null;
+      const t = e.props;
+      return t.variant === "primary" ? null : {
+        ...t,
+        id: e.key ?? t.id,
+        onPress: t.onPress,
+        label: t.children,
+        variant: t.variant,
+        prefixIcon: t.prefixIcon
+      };
+    })) == null ? void 0 : y.filter(Boolean);
+    return /* @__PURE__ */ n(
+      S,
+      {
+        ...i,
+        id: f,
+        ref: g,
+        className: x(),
+        "aria-label": I,
+        orientation: "horizontal",
+        tabIndex: -1,
+        onFocus: h,
+        onBlur: v,
+        children: [
+          /* @__PURE__ */ n(
+            d,
+            {
+              className: A(),
+              "aria-label": m.formatMessage({
+                id: "unity:component:action-bar:group:label",
+                defaultMessage: "Selection information"
+              }),
+              children: [
+                /* @__PURE__ */ n(
+                  "div",
+                  {
+                    className: M(),
+                    role: "status",
+                    "aria-live": "polite",
+                    "aria-atomic": "true",
+                    children: [
+                      c ? c(u) : /* @__PURE__ */ o(
+                        l,
+                        {
+                          id: "unity:component:action-bar:selection-count-text",
+                          defaultMessage: "{selectionCount, plural, =0 {no items} one {item} other {items}} selected",
+                          values: { selectionCount: u }
+                        }
+                      ),
+                      B && /* @__PURE__ */ o("span", { className: "uy:sr-only", children: /* @__PURE__ */ o(
+                        l,
+                        {
+                          id: "unity:component:action-bar:key-shortcuts-text",
+                          defaultMessage: "Use {keyShortcuts} to focus the action bar",
+                          values: {
+                            keyShortcuts: i["aria-keyshortcuts"]
+                          }
+                        }
+                      ) })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ o(E, { color: "inverted", variant: "ghost", onPress: p, children: /* @__PURE__ */ o(
+                  l,
+                  {
+                    id: "unity:component:action-bar:clear-selection-button",
+                    defaultMessage: "Clear selection"
+                  }
+                ) })
+              ]
+            }
+          ),
+          w && /* @__PURE__ */ n(
+            d,
+            {
+              className: k(),
+              role: "group",
+              "aria-label": "Available actions",
+              children: [
+                C(),
+                /* @__PURE__ */ o("div", { className: "uy:block uy:md:hidden", children: /* @__PURE__ */ n(K, { children: [
+                  /* @__PURE__ */ o(U, { asChild: !0, children: /* @__PURE__ */ o(
+                    F,
+                    {
+                      icon: "DotsThreeOutlined",
+                      label: "More actions",
+                      variant: "ghost",
+                      color: "inverted"
+                    }
+                  ) }),
+                  /* @__PURE__ */ o(L, { children: N.map((e) => /* @__PURE__ */ o(
+                    O,
+                    {
+                      onAction: () => {
+                        var t;
+                        (t = e.onPress) == null || t.call(e, {});
+                      },
+                      prefix: e.prefixIcon ? /* @__PURE__ */ o(G, { src: e.prefixIcon, size: 20 }) : void 0,
+                      children: e.label
+                    },
+                    e.id
+                  )) })
+                ] }) })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+H.displayName = "ActionBar";
+export {
+  H as ActionBar,
+  q as actionBar
+};

package/dist/esm/components/action-bar/parts/ActionBarAction.d.ts

@@ -0,0 +1,44 @@
+import { ButtonProps } from '../../button/Button.js';
+export type ActionBarActionProps = Omit<ButtonProps, 'variant' | 'size' | 'color'> & {
+    /**
+     * The visual variant of the action.
+     * @default 'secondary'
+     */
+    variant?: 'primary' | 'secondary';
+};
+/**
+ * The ActionBarAction component represents an individual action within an ActionBar.
+ * It renders as a button with appropriate styling for the inverted ActionBar context.
+ * @param {ActionBarActionProps} props - Props for the action. Identical to the `Button` component props.
+ * @example
+ * ```tsx
+ * import { ActionBarAction } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <ActionBarAction
+ *       variant="primary"
+ *       onPress={() => console.log('Action clicked')}
+ *       prefixIcon="TrashOutlined"
+ *     >
+ *       Delete Items
+ *     </ActionBarAction>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Automatically uses inverted button variants to work on dark ActionBar background
+ * - Secondary actions use 'ghost-inverted' button variant
+ * - Primary actions use 'inverted-primary' button variant
+ * @see {@link ActionBarActionProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/action-bar GitHub}
+ * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library Figma}
+ */
+declare const ActionBarAction: import('react').ForwardRefExoticComponent<Omit<ButtonProps, "size" | "color" | "variant"> & {
+    /**
+     * The visual variant of the action.
+     * @default 'secondary'
+     */
+    variant?: "primary" | "secondary";
+} & import('react').RefAttributes<HTMLButtonElement>>;
+export { ActionBarAction };

package/dist/esm/components/action-bar/parts/ActionBarAction.js

@@ -0,0 +1,45 @@
+import { jsx as a } from "react/jsx-runtime";
+import { forwardRef as e } from "react";
+import { uyTv as d } from "@payfit/unity-themes";
+import { Button as m } from "../../button/Button.js";
+const u = d({
+  base: "uy:w-auto",
+  variants: {
+    variant: {
+      primary: "",
+      secondary: "uy:hidden uy:md:block"
+    }
+  },
+  defaultVariants: {
+    variant: "secondary"
+  }
+}), y = e(
+  ({ variant: r = "secondary", children: o, onPress: n, ...i }, c) => {
+    const t = {
+      primary: {
+        variant: "primary",
+        color: "inverted"
+      },
+      secondary: {
+        variant: "ghost",
+        color: "inverted"
+      }
+    }[r], s = u({ variant: r });
+    return /* @__PURE__ */ a("div", { className: s, children: /* @__PURE__ */ a(
+      m,
+      {
+        ref: c,
+        variant: t.variant,
+        color: t.color,
+        onPress: n,
+        size: "default",
+        ...i,
+        children: o
+      }
+    ) });
+  }
+);
+y.displayName = "ActionBarAction";
+export {
+  y as ActionBarAction
+};

package/dist/esm/components/action-bar/parts/ActionBarRoot.d.ts

@@ -0,0 +1,44 @@
+import { PropsWithChildren } from 'react';
+export declare const actionBarRoot: import('tailwind-variants').TVReturnType<{
+    isVisible: {
+        true: string[];
+        false: string[];
+    };
+}, undefined, string[], {
+    isVisible: {
+        true: string[];
+        false: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    isVisible: {
+        true: string[];
+        false: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export interface ActionBarRootProps extends PropsWithChildren {
+    /** Offset from the bottom of the table. It uses Unity's standard spacing tokens. */
+    offsetBottom?: '$25' | '$50' | '$75' | '$100' | '$125' | '$200' | '$300' | '$400' | '$500' | '$600' | '$800' | '$1000' | number;
+    isVisible?: boolean;
+}
+/**
+ * The ActionBarRoot component provides positioning context for ActionBar components.
+ * It positions the ActionBar absolutely within a table container.
+ * @param {ActionBarRootProps} props - The props for the ActionBarRoot component
+ * @example
+ * ```tsx
+ * import { ActionBarRoot, ActionBar } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <ActionBarRoot>
+ *       <ActionBar selectionCount={2} onClearSelection={handleClear}>
+ *       </ActionBar>
+ *     </ActionBarRoot>
+ *   )
+ * }
+ * ```
+ * @see {@link ActionBarRootProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/action-bar GitHub}
+ */
+declare const ActionBarRoot: import('react').ForwardRefExoticComponent<ActionBarRootProps & import('react').RefAttributes<HTMLDivElement>>;
+export { ActionBarRoot };

package/dist/esm/components/action-bar/parts/ActionBarRoot.js

@@ -0,0 +1,46 @@
+import { jsx as s } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+import { uyTv as y } from "@payfit/unity-themes";
+const c = y({
+  base: [
+    "uy:absolute uy:left-1/2 uy:-translate-x-1/2 uy:z-10",
+    "uy:duration-200 uy:ease-out",
+    "uy:bottom-[calc(var(--uy-spacing-200)+var(--uy-spacing-offset-bottom))]",
+    "uy:starting:opacity-0"
+  ],
+  variants: {
+    isVisible: {
+      true: ["uy:animate-slide-up-fade-in"],
+      false: [
+        // Use transform instead of changing bottom position
+        "uy:animate-slide-down-fade-out",
+        "uy:pointer-events-none",
+        "uy:opacity-0",
+        "uy:translate-y-10"
+      ]
+    }
+  }
+}), p = i(
+  ({ children: o, offsetBottom: a = 0, isVisible: t = !1, ...n }, u) => {
+    const e = typeof a == "number" ? a : a.replace("$", ""), r = typeof a == "number" ? `calc(var(--uy-spacing)*${e})` : `var(--uy-spacing-${e})`;
+    return /* @__PURE__ */ s(
+      "div",
+      {
+        ref: u,
+        className: c({ isVisible: t }),
+        ...n,
+        style: {
+          "--uy-spacing-offset-bottom": r
+        },
+        tabIndex: -1,
+        inert: t ? void 0 : "",
+        children: o
+      }
+    );
+  }
+);
+p.displayName = "ActionBarRoot";
+export {
+  p as ActionBarRoot,
+  c as actionBarRoot
+};

package/dist/esm/components/actionable/Actionable.js

@@ -1,11 +1,10 @@
 import { jsx as D } from "react/jsx-runtime";
 import { forwardRef as H, useState as k } from "react";
-import { useFocusVisible as F, useHover as E, useFocus as w } from "@react-aria/interactions";
-import { useObjectRef as x, mergeProps as c } from "@react-aria/utils";
-import { useButton as N } from "react-aria";
-import { twMerge as S } from "tailwind-merge";
-import { tv as U } from "tailwind-variants";
-const V = U({
+import { uyTv as F } from "@payfit/unity-themes";
+import { useFocusVisible as E, useHover as x, useFocus as N } from "@react-aria/interactions";
+import { useObjectRef as S, mergeProps as c } from "@react-aria/utils";
+import { useButton as U } from "react-aria";
+const V = F({
   base: "uy:group uy:cursor-pointer",
   variants: {
     isUnstyled: {
@@ -18,48 +17,48 @@ const V = U({
   }
 }), j = H((d, s) => {
   const {
-    asElement: r = "div",
+    asElement: i = "div",
     isUnstyled: u = !1,
-    className: m,
+    className: p,
     children: o,
     ...e
   } = d;
-  s = x(s);
-  const { isFocusVisible: p } = F(), { isHovered: f, hoverProps: i } = E({
+  s = S(s);
+  const { isFocusVisible: m } = E(), { isHovered: f, hoverProps: n } = x({
     onHoverStart: e.onHoverStart,
     onHoverEnd: e.onHoverEnd,
     onHoverChange: e.onHoverChange,
     isDisabled: e.isDisabled
-  }), [b, g] = k(!1), { focusProps: n } = w({
-    onFocusChange: g,
+  }), [b, v] = k(!1), { focusProps: r } = N({
+    onFocusChange: v,
     isDisabled: e.isDisabled
-  }), { buttonProps: a, isPressed: v } = N(
+  }), { buttonProps: a, isPressed: y } = U(
     {
       ...e,
-      elementType: r
+      elementType: i
     },
     s
-  ), y = r, P = (t) => {
+  ), g = i, P = (t) => {
     if (e.isDisabled) {
       t.preventDefault(), t.stopPropagation();
       return;
     }
-    const l = c(a, i, n);
+    const l = c(a, n, r);
     l.onClick && l.onClick(t);
-  }, C = c(a, i, n), { onClick: A, ...h } = C;
+  }, C = c(a, n, r), { onClick: w, ...h } = C;
   return /* @__PURE__ */ D(
-    y,
+    g,
     {
       ...h,
       onClick: P,
-      className: S(V({ isUnstyled: u }), m),
+      className: V({ isUnstyled: u, className: p }),
       ref: s,
       children: typeof o == "function" ? o({
         isHovered: f,
-        isPressed: v,
+        isPressed: y,
         isFocused: b,
         isDisabled: !!e.isDisabled,
-        isFocusVisible: p,
+        isFocusVisible: m,
         isPending: !1,
         defaultChildren: null
       }) : o

package/dist/esm/components/alert/Alert.d.ts

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

package/dist/esm/components/alert/Alert.js

@@ -1,6 +1,6 @@
 import { jsxs as f, jsx as r } from "react/jsx-runtime";
 import { forwardRef as b } from "react";
-import { tv as g } from "tailwind-variants";
+import { uyTv as g } from "@payfit/unity-themes";
 import { CircularIconButton as m } from "../icon-button/CircularIconButton.js";
 import { Icon as p } from "../icon/Icon.js";
 const w = g({

package/dist/esm/components/alert/parts/AlertActions.d.ts

@@ -1,5 +1,5 @@
+import { VariantProps } from '@payfit/unity-themes';
 import { PropsWithChildren } from 'react';
-import { VariantProps } from 'tailwind-variants';
 declare const alertActions: import('tailwind-variants').TVReturnType<{
     direction: {
         row: string;

package/dist/esm/components/alert/parts/AlertActions.js

@@ -1,6 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
 import { forwardRef as a } from "react";
-import { tv as i } from "tailwind-variants";
+import { uyTv as i } from "@payfit/unity-themes";
 const l = i({
   base: "uy:flex uy:gap-100",
   variants: {

package/dist/esm/components/alert/parts/AlertContent.d.ts

@@ -7,7 +7,7 @@ export type AlertContentProps = Omit<TextProps, 'variant' | 'color' | 'className
      */
     asElement?: ContentElements;
 };
-declare const AlertContent: import('react').ForwardRefExoticComponent<Omit<TextProps, "className" | "color" | "variant"> & {
+declare const AlertContent: import('react').ForwardRefExoticComponent<Omit<TextProps, "color" | "className" | "variant"> & {
     /**
      * The underlying HTML element to render the title as.
      * @default 'p'

package/dist/esm/components/alert/parts/AlertTitle.d.ts

@@ -7,7 +7,7 @@ export type AlertTitleProps = Omit<TextProps, 'variant' | 'color' | 'className'>
      */
     asElement?: TitleElements;
 };
-declare const AlertTitle: import('react').ForwardRefExoticComponent<Omit<TextProps, "className" | "color" | "variant"> & {
+declare const AlertTitle: import('react').ForwardRefExoticComponent<Omit<TextProps, "color" | "className" | "variant"> & {
     /**
      * The underlying HTML element to render the title as.
      * @default 'h3'

package/dist/esm/components/anchor/Anchor.js

@@ -1,6 +1,6 @@
 import { jsxs as u, jsx as a } from "react/jsx-runtime";
 import { useMemo as h, cloneElement as n } from "react";
-import { tv as f } from "tailwind-variants";
+import { uyTv as f } from "@payfit/unity-themes";
 const m = f({
   slots: {
     root: "uy:relative uy:inline-block uy:leading-[0]",