@payfit/unity-components 2.46.13 → 2.46.14

package/dist/esm/components/definition-tooltip/DefinitionTooltip.js

@@ -0,0 +1,29 @@
+import { jsx as o } from "react/jsx-runtime";
+import { forwardRef as u } from "react";
+import { uyTv as r } from "@payfit/unity-themes";
+import { Focusable as l } from "react-aria-components/Focusable";
+import { Text as s } from "../text/Text.js";
+import { Tooltip as f } from "../tooltip/Tooltip.js";
+const c = r({
+  base: [
+    "uy:text-content-neutral-enabled uy:rounded-50 uy:py-75",
+    "uy:hover:text-content-neutral-hover",
+    "uy:active:text-content-neutral-active",
+    "uy:focus-visible:outline-2 uy:focus-visible:outline-solid uy:focus-visible:outline-offset-2 uy:focus-visible:outline-utility-focus-ring uy:focus-visible:text-content-neutral-focus"
+  ]
+}), a = u(
+  ({ children: t, title: e, asElement: i = "span", ...n }, m) => /* @__PURE__ */ o(f, { title: e, ...n, children: /* @__PURE__ */ o(l, { children: /* @__PURE__ */ o(
+    s,
+    {
+      variant: "actionInfo",
+      asElement: i,
+      role: "button",
+      className: c(),
+      children: t
+    }
+  ) }) })
+);
+a.displayName = "DefinitionTooltip";
+export {
+  a as DefinitionTooltip
+};

package/dist/esm/components/dialog/Dialog.d.ts

@@ -0,0 +1,113 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { PropsWithChildren } from 'react';
+import { DialogTrigger } from 'react-aria-components/Dialog';
+export declare const dialog: import('tailwind-variants').TVReturnType<{
+    size: {
+        sm: {
+            wrapper: string;
+        };
+        md: {
+            wrapper: string;
+        };
+    };
+}, {
+    overlay: string[];
+    wrapper: string[];
+    content: string[];
+    dismissIcon: string[];
+}, undefined, {
+    size: {
+        sm: {
+            wrapper: string;
+        };
+        md: {
+            wrapper: string;
+        };
+    };
+}, {
+    overlay: string[];
+    wrapper: string[];
+    content: string[];
+    dismissIcon: string[];
+}, import('tailwind-variants').TVReturnType<{
+    size: {
+        sm: {
+            wrapper: string;
+        };
+        md: {
+            wrapper: string;
+        };
+    };
+}, {
+    overlay: string[];
+    wrapper: string[];
+    content: string[];
+    dismissIcon: string[];
+}, undefined, unknown, unknown, undefined>>;
+export interface DialogProps extends PropsWithChildren<VariantProps<typeof dialog>> {
+    /** aria-label has to be defined if the dialog does not have a visible label*/
+    'aria-label'?: string;
+    /** (optional) modal opened by default or not **If it is set to true, the closing should be handled from outside** /*/
+    isOpen?: boolean;
+    /** it is used for controlled mode (need to be used with isOpen property) */
+    onOpenChange?: (isOpen: boolean) => void;
+    /** if false it does not allow to close the modal when click outside, default: true*/
+    isDismissable?: boolean;
+}
+/**
+ * The Dialog component provides a modal interface for displaying important information and gathering user input
+ * without requiring navigation to a different page. It maintains context and focus while demanding attention.
+ *
+ * Use Dialog when you need to capture user attention, gather critical input, or display important information
+ * that requires acknowledgment before proceeding.
+ *
+ * The Dialog consists of several parts that work together:
+ * - `DialogTitle`: Displays the title of the dialog
+ * - `DialogContent`: Contains the main content of the dialog (required)
+ * - `DialogActions`: Contains action buttons for user interaction
+ * - `DialogButton`: Handles specific actions (close, confirm, or danger)
+ * @param props - The props for the Dialog component
+ * @param props.children - The dialog content including title, content, and actions
+ * @param props.isOpen - Controls the open state in controlled mode
+ * @param props.onOpenChange - Callback fired when open state changes
+ * @param props.isDismissable - Whether the dialog can be dismissed by clicking outside or pressing Escape
+ * @param props.size - The size variant of the dialog (sm, md)
+ * @param props.aria-label - Accessible label when DialogTitle is not provided
+ * @see {@link DialogProps} for all available props
+ * @example
+ * ```tsx
+ * import {
+ *   Dialog,
+ *   DialogTrigger,
+ *   DialogTitle,
+ *   DialogContent,
+ *   DialogActions,
+ *   DialogButton
+ * } from '@payfit/unity-components'
+ *
+ * function BasicExample() {
+ *   return (
+ *     <DialogTrigger>
+ *       <Button>Open dialog</Button>
+ *       <Dialog>
+ *         <DialogTitle>Important information</DialogTitle>
+ *         <DialogContent>
+ *           This content requires your attention before proceeding.
+ *         </DialogContent>
+ *         <DialogActions>
+ *           <DialogButton variant="close">Cancel</DialogButton>
+ *           <DialogButton variant="confirm">Confirm</DialogButton>
+ *         </DialogActions>
+ *       </Dialog>
+ *     </DialogTrigger>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * [API Docs](https://unity-components.payfit.io/?path=/docs/feedback-dialog--docs) • [Design Docs](https://www.payfit.design/24f360409/p/01f5dc-dialog)
+ */
+export declare function Dialog({ children, isOpen, onOpenChange, isDismissable, size, ...rest }: DialogProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Dialog {
+    var displayName: string;
+}
+export { DialogTrigger };

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

@@ -0,0 +1,112 @@
+import { jsx as o, jsxs as c } from "react/jsx-runtime";
+import { Children as l, isValidElement as i } from "react";
+import { uyTv as f } from "@payfit/unity-themes";
+import { DialogContext as w, Dialog as x, DialogTrigger as v } from "react-aria-components/Dialog";
+import { DialogTrigger as J } from "react-aria-components/Dialog";
+import { ModalOverlay as h, Modal as b } from "react-aria-components/Modal";
+import { useId as D } from "react-aria/useId";
+import { useIntl as z } from "react-intl";
+import { CircularIconButton as I } from "../icon-button/CircularIconButton.js";
+import { DialogActions as N } from "./parts/DialogActions.js";
+import { DialogButton as C } from "./parts/DialogActions/DialogButton.js";
+const T = f({
+  slots: {
+    overlay: [
+      "uy:@container",
+      "uy:fixed uy:inset-0 uy:z-30 uy:overflow-y-auto",
+      "uy:min-h-full",
+      "uy:flex uy:items-end uy:md:items-center uy:md:justify-center uy:md:text-center",
+      "uy:bg-utility-backdrop",
+      "uy:data-[entering]:animate-fade-in uy:data-[exiting]:animate-fade-out"
+    ],
+    wrapper: [
+      "uy:w-full uy:max-h-[95dvh] uy:md:max-h-[82dvh] uy:relative uy:isolate",
+      "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-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"
+    ],
+    content: ["uy:group/dialog", "uy:outline-none"],
+    dismissIcon: ["uy:absolute uy:right-200 uy:top-200 uy:z-20"]
+  },
+  variants: {
+    size: {
+      sm: {
+        wrapper: "uy:md:w-4/12 uy:md:max-w-62.5"
+      },
+      md: {
+        wrapper: "uy:md:w-5/12 uy:md:max-w-80"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+}), j = (e) => {
+  const t = l.toArray(e).find(
+    (a) => i(a) && a.type === N
+  );
+  return i(t) ? l.toArray(t.props.children).some(
+    (a) => i(
+      a
+    ) && a.type === C && a.props.variant === "danger"
+  ) : !1;
+};
+function B({
+  children: e,
+  isOpen: t,
+  onOpenChange: a,
+  isDismissable: r = !0,
+  size: n = "md",
+  ...d
+}) {
+  const m = z(), u = D(), { overlay: y, wrapper: s, content: g, dismissIcon: p } = T({ size: n });
+  return /* @__PURE__ */ o(
+    h,
+    {
+      isDismissable: r,
+      isOpen: t,
+      onOpenChange: a,
+      className: y(),
+      children: /* @__PURE__ */ o(b, { className: s(), "data-unity-dialog": !0, "data-dd-privacy": "allow", children: /* @__PURE__ */ o(w.Provider, { value: { "aria-describedby": u }, children: /* @__PURE__ */ c(
+        x,
+        {
+          role: j(e) ? "alertdialog" : "dialog",
+          "aria-modal": "true",
+          className: g(),
+          "aria-label": d["aria-label"],
+          "aria-describedby": u,
+          "data-unity-slot": "dialog",
+          "data-unity-size": n,
+          children: [
+            r && /* @__PURE__ */ o(
+              I,
+              {
+                icon: "CloseOutlined",
+                color: "content.neutral.low",
+                title: m.formatMessage({
+                  id: "unity:component:common:close:label"
+                }),
+                className: p(),
+                slot: "close",
+                size: "large",
+                asElement: "button"
+              }
+            ),
+            e
+          ]
+        }
+      ) }) })
+    }
+  );
+}
+B.displayName = "Dialog";
+v.displayName = "DialogTrigger";
+export {
+  B as Dialog,
+  J as DialogTrigger,
+  T as dialog
+};

package/dist/esm/components/dialog/parts/DialogActions/DialogButton.d.ts

@@ -0,0 +1,22 @@
+import { UnityIcon } from '@payfit/unity-icons';
+import { PropsWithChildren } from 'react';
+import { ButtonProps } from '../../../button/Button.js';
+type ButtonVariant = 'close' | 'confirm' | 'danger';
+type OnPressParameters = Parameters<NonNullable<ButtonProps['onPress']>>[0];
+export type DialogButtonProps<T extends ButtonVariant> = Omit<ButtonProps, 'variant' | 'color'> & {
+    /** the different variants for the button */
+    variant: T;
+    /** the icon, it is a discouraged practice, except for `danger` variant which has a `WarningCircleOutlined` as default */
+    icon?: UnityIcon;
+    isLoading?: T extends 'close' ? never : ButtonProps['isLoading'];
+    onPress?: T extends 'close' ? ButtonProps['onPress'] : ButtonProps['onPress'] | ((e: OnPressParameters) => Promise<OnPressParameters>);
+};
+/**
+ * A `DialogButton` is a button which has to be included into `DialogActions` container
+ *
+ */
+declare const DialogButton: {
+    <T extends ButtonVariant>({ children, variant, onPress, isLoading, icon, ...props }: PropsWithChildren<DialogButtonProps<T>>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { DialogButton };

package/dist/esm/components/dialog/parts/DialogActions/DialogButton.js

@@ -0,0 +1,63 @@
+import { jsx as n } from "react/jsx-runtime";
+import { useContext as p } from "react";
+import { OverlayTriggerStateContext as u } from "react-aria-components/Dialog";
+import { Button as i } from "../../../button/Button.js";
+const x = ({
+  children: e,
+  variant: f,
+  onPress: r,
+  isLoading: c,
+  icon: o,
+  ...a
+}) => {
+  const s = p(u);
+  switch (f) {
+    case "close":
+      const m = r;
+      return /* @__PURE__ */ n(
+        i,
+        {
+          ...a,
+          prefixIcon: o,
+          variant: "secondary",
+          onPress: (t) => {
+            m && m(t), s?.close();
+          },
+          children: e
+        }
+      );
+    case "confirm":
+      return /* @__PURE__ */ n(
+        i,
+        {
+          ...a,
+          prefixIcon: o,
+          variant: "primary",
+          isLoading: c,
+          onPress: (t) => {
+            r && r(t);
+          },
+          children: e
+        }
+      );
+    case "danger":
+      return /* @__PURE__ */ n(
+        i,
+        {
+          ...a,
+          variant: "primary",
+          color: "danger",
+          isLoading: c,
+          prefixIcon: o ?? "WarningCircleOutlined",
+          onPress: (t) => {
+            r && r(t);
+          },
+          children: e
+        }
+      );
+  }
+};
+x.displayName = "DialogButton";
+export {
+  x as DialogButton
+};

package/dist/esm/components/dialog/parts/DialogActions.d.ts

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react';
+declare const DialogActions: {
+    ({ children }: PropsWithChildren<object>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { DialogActions };

package/dist/esm/components/dialog/parts/DialogActions.js

@@ -0,0 +1,13 @@
+import { jsx as t } from "react/jsx-runtime";
+const a = ({ children: e }) => /* @__PURE__ */ t(
+  "div",
+  {
+    className: "uy:flex uy:flex-col-reverse uy:md:flex-row uy:md:justify-end uy:md:items-start uy:gap-150 uy:md:gap-100 uy:self-stretch uy:mt-500",
+    "data-dd-privacy": "allow",
+    children: e
+  }
+);
+a.displayName = "DialogActions";
+export {
+  a as DialogActions
+};

package/dist/esm/components/dialog/parts/DialogContent.d.ts

@@ -0,0 +1,4 @@
+declare const DialogContent: import('react').ForwardRefExoticComponent<object & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLElement>>;
+export { DialogContent };

package/dist/esm/components/dialog/parts/DialogContent.js

@@ -0,0 +1,23 @@
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+import { DialogContext as n } from "react-aria-components/Dialog";
+import { useContextProps as d } from "react-aria-components/slots";
+const m = i(
+  (o, t) => {
+    [o] = d(o, t, n);
+    const { children: r, ...a } = o;
+    return /* @__PURE__ */ e(
+      "div",
+      {
+        id: a["aria-describedby"],
+        "data-dd-privacy": "mask",
+        className: "uy:typography-body uy:text-content-neutral",
+        children: r
+      }
+    );
+  }
+);
+m.displayName = "DialogContent";
+export {
+  m as DialogContent
+};

package/dist/esm/components/dialog/parts/DialogTitle.d.ts

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react';
+declare const DialogTitle: {
+    ({ children }: PropsWithChildren<object>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { DialogTitle };

package/dist/esm/components/dialog/parts/DialogTitle.js

@@ -0,0 +1,10 @@
+import { jsx as t } from "react/jsx-runtime";
+import { uyTv as a } from "@payfit/unity-themes";
+import { Heading as i } from "react-aria-components/Heading";
+const l = a({
+  base: ["uy:typography-h2 uy:md:typography-h3", "uy:mb-200"]
+}), r = ({ children: o }) => /* @__PURE__ */ t(i, { slot: "title", className: l(), "data-dd-privacy": "allow", children: o });
+r.displayName = "DialogTitle";
+export {
+  r as DialogTitle
+};

package/dist/esm/components/dialog/test-utils.d.ts

@@ -0,0 +1,34 @@
+import { IntlShape } from 'react-intl';
+import { PlayCtx } from '../../types/testing.js';
+/**
+ * Factory function returning a set of helpers to test Unity Dialog components.
+ * It wires Storybook's `Play` context with convenient utilities to query,
+ * assert, and interact with dialogs rendered on the canvas.
+ * @param context The Storybook play context used to group steps and actions.
+ * @param globalIntl The global intl instance to use for localization.
+ * @returns An object of helpers: `findDialog`, `closeDialog`, `assertDialogIsClosed`, `assertElementExistsInDialog`, and `triggerPrimaryAction`.
+ */
+export declare const getTestingUtilsDialog: (context: PlayCtx, globalIntl: IntlShape) => {
+    findDialog: ({ title }: {
+        title: string;
+    }) => Promise<HTMLElement>;
+    closeDialog: ({ title, closeButtonLabel, }: {
+        title: string;
+        closeButtonLabel: string;
+    }) => Promise<void>;
+    closeDialogWithDismissButton: ({ title, dismissButtonLabel, }: {
+        title: string;
+        dismissButtonLabel?: string;
+    }) => Promise<void>;
+    assertDialogIsClosed: (dialog: HTMLElement) => Promise<void>;
+    assertElementExistsInDialog: ({ title, content, primaryActionLabel, secondaryActionLabel, }: {
+        title: string;
+        content?: string;
+        primaryActionLabel?: string;
+        secondaryActionLabel?: string;
+    }) => Promise<void>;
+    triggerPrimaryAction: ({ title, primaryActionLabel, }: {
+        title: string;
+        primaryActionLabel: string;
+    }) => Promise<void>;
+};

package/dist/esm/components/dialog/test-utils.js

@@ -0,0 +1,89 @@
+import { userEvent as r, within as s, expect as n, waitFor as w, screen as y } from "storybook/test";
+const p = (e, m) => {
+  const o = async ({ title: a }) => await w(() => {
+    const t = y.queryByRole("dialog", { name: a }) ?? y.queryByRole("alertdialog", { name: a });
+    if (!t)
+      throw new Error(`Dialog with title: "${a}" not found in the page`);
+    return t;
+  }), c = async (a, t) => {
+    await r.click(
+      s(a).getByRole("button", {
+        name: t
+      }),
+      { delay: 100 }
+    );
+  };
+  return {
+    findDialog: o,
+    closeDialog: async ({
+      title: a,
+      closeButtonLabel: t
+    }) => {
+      await e.step("Close dialog", async () => {
+        const i = await o({ title: a });
+        await c(i, t);
+      });
+    },
+    closeDialogWithDismissButton: async ({
+      title: a,
+      dismissButtonLabel: t = m.formatMessage({
+        id: "unity:component:common:close:label"
+      })
+    }) => {
+      await e.step("Close dialog", async () => {
+        const i = await o({ title: a });
+        await c(i, t);
+      });
+    },
+    assertDialogIsClosed: async (a) => {
+      await w(
+        async () => {
+          await n(a).not.toBeInTheDocument();
+        },
+        { timeout: 1e3 }
+      );
+    },
+    assertElementExistsInDialog: async ({
+      title: a,
+      content: t,
+      primaryActionLabel: i,
+      secondaryActionLabel: l
+    }) => {
+      const g = await o({ title: a });
+      t && await e.step(`Check if "${t}" is in the dialog`, async () => {
+        await n(s(g).getByText(t)).toBeInTheDocument();
+      }), i && await e.step(
+        `Check if "${i}" is in the dialog`,
+        async () => {
+          await n(
+            s(g).getByRole("button", { name: i })
+          ).toBeInTheDocument();
+        }
+      ), l && await e.step(
+        `Check if "${l}" is in the dialog`,
+        async () => {
+          await n(
+            s(g).getByRole("button", { name: l })
+          ).toBeInTheDocument();
+        }
+      );
+    },
+    triggerPrimaryAction: async ({
+      title: a,
+      primaryActionLabel: t
+    }) => {
+      const i = await o({ title: a });
+      await e.step(
+        `Trigger the primary action "${t}" of the dialog`,
+        async () => {
+          await r.click(
+            s(i).getByRole("button", { name: t })
+          );
+        }
+      );
+    }
+  };
+};
+export {
+  p as getTestingUtilsDialog
+};

package/dist/esm/components/empty-state/EmptyState.d.ts

@@ -0,0 +1,48 @@
+import { PropsWithChildren } from 'react';
+export interface EmptyStateProps extends PropsWithChildren {
+    /**
+     * The ARIA role for the empty state container.
+     * @default 'status'
+     */
+    role?: string;
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+}
+/**
+ * EmptyState communicates the absence of data or content to users while providing clear guidance on next steps.
+ * Use this component when there's no data to display, when filters return no results, when a feature requires prerequisites, or when celebrating task completion.
+ * The component provides a flexible composition system through its parts (`EmptyStateIcon`, `EmptyStateContent`, `EmptyStateActions`) for creating custom empty states, as well as preset components for common scenarios.
+ * @param {EmptyStateProps} props - The component props including optional `role` and `className`.
+ * @example
+ * ```tsx
+ * import { EmptyState, EmptyStateIcon, EmptyStateContent, EmptyStateActions, Button } from '@payfit/unity-components'
+ *
+ * function DocumentList() {
+ *   return (
+ *     <EmptyState>
+ *       <EmptyStateIcon icon="DocumentOutlined" variant="neutral" />
+ *       <EmptyStateContent
+ *         title="No documents yet"
+ *         description="Create your first document to get started."
+ *       />
+ *       <EmptyStateActions>
+ *         <Button variant="ghost">Create document</Button>
+ *       </EmptyStateActions>
+ *     </EmptyState>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - The component is composable through its part components for maximum flexibility
+ * - For common use cases, use preset components like `EmptyStateGetStarted`, `EmptyStateNoSearchResults`, etc.
+ * - The component uses `role="status"` by default for accessibility, announcing changes to screen readers
+ * - All empty state presets include built-in internationalization support
+ * @see {@link EmptyStateProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/empty-state GitHub}
+ * @see Design specs in {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=16600-5334 Figma}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/component-reference-emptystate--docs unity-components.payfit.io}
+ */
+declare const EmptyState: import('react').ForwardRefExoticComponent<EmptyStateProps & import('react').RefAttributes<HTMLDivElement>>;
+export { EmptyState };

package/dist/esm/components/empty-state/EmptyState.js

@@ -0,0 +1,25 @@
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import { emptyState as s } from "./EmptyState.variants.js";
+const d = p(
+  ({ children: t, role: a = "status", className: r, ...e }, o) => {
+    const { base: m } = s();
+    return /* @__PURE__ */ i(
+      "div",
+      {
+        "data-dd-privacy": "allow",
+        ref: o,
+        role: a,
+        className: m({ className: r }),
+        "aria-live": "polite",
+        "aria-atomic": "true",
+        ...e,
+        children: t
+      }
+    );
+  }
+);
+d.displayName = "EmptyState";
+export {
+  d as EmptyState
+};

package/dist/esm/components/empty-state/EmptyState.variants.d.ts

@@ -0,0 +1,59 @@
+export declare const emptyState: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+            actions?: import('tailwind-merge').ClassNameValue;
+            iconContainer?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+            actions?: import('tailwind-merge').ClassNameValue;
+            iconContainer?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    iconContainer: string;
+    content: string;
+    actions: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+            actions?: import('tailwind-merge').ClassNameValue;
+            iconContainer?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    iconContainer: string;
+    content: string;
+    actions: string;
+}, import('tailwind-variants').TVReturnType<unknown, {
+    base: string;
+    iconContainer: string;
+    content: string;
+    actions: string;
+}, undefined, unknown, unknown, undefined>>;
+export declare const emptyStateIcon: import('tailwind-variants').TVReturnType<{
+    variant: {
+        neutral: string;
+        success: string;
+    };
+}, undefined, "uy:flex uy:items-center uy:justify-center uy:rounded-125 uy:p-100", {
+    variant: {
+        neutral: string;
+        success: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    variant: {
+        neutral: string;
+        success: string;
+    };
+}, undefined, "uy:flex uy:items-center uy:justify-center uy:rounded-125 uy:p-100", unknown, unknown, undefined>>;