@payfit/unity-components 2.46.13 → 2.46.14

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

@@ -0,0 +1,28 @@
+import { jsx as s } from "react/jsx-runtime";
+import { useContext as i, createContext as u } from "react";
+const e = u({
+  wrap: "wrap",
+  isMobile: !1,
+  isStaticApi: !1
+});
+function m({
+  children: r,
+  wrap: t,
+  isMobile: o,
+  isStaticApi: n
+}) {
+  return /* @__PURE__ */ s(e.Provider, { value: { wrap: t, isMobile: o, isStaticApi: n }, children: r });
+}
+function d() {
+  const r = i(e);
+  if (!r)
+    throw new Error(
+      "useBreadcrumbsContext must be used within an BreadcrumbsProvider"
+    );
+  return r;
+}
+export {
+  e as BreadcrumbsContext,
+  m as BreadcrumbsProvider,
+  d as useBreadcrumbsContext
+};

package/dist/esm/components/breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,53 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { ComponentPropsWithoutRef, ReactElement, ReactNode, Ref } from 'react';
+import { BreadcrumbsProps as AriaBreadcrumbsProps } from 'react-aria-components/Breadcrumbs';
+import { AriaBreadcrumbsProps as AriaAriaBreadcrumbsProps } from 'react-aria/useBreadcrumbs';
+import { Breadcrumb } from './parts/Breadcrumb.js';
+import { breadcrumbsVariant } from './Breadcrumbs.variant.js';
+type BreadcrumbWrap = VariantProps<typeof breadcrumbsVariant>['wrap'];
+export type BreadcrumbType = 'collapsed' | 'non-collapsed';
+export interface BreadcrumbsProps extends AriaAriaBreadcrumbsProps, Pick<AriaBreadcrumbsProps<never>, 'onAction'> {
+    items?: never;
+    /**
+     * The breadcrumb list to render (static API)
+     */
+    children: ReactNode;
+    /**
+     * Controls breadcrumbs layout: wrap or nowrap
+     */
+    wrap: BreadcrumbWrap;
+    /**
+     * Defines breadcrumb rendering strategy.
+     * @default 'non-collapsed'
+     */
+    type?: BreadcrumbType;
+}
+export interface BreadcrumbsWithItemProps<TItem extends {
+    label: string;
+}> extends AriaAriaBreadcrumbsProps, VariantProps<typeof breadcrumbsVariant>, Pick<AriaBreadcrumbsProps<TItem>, 'onAction'> {
+    /**
+     * The list of items to render, when using the dynamic API.
+     */
+    items: TItem[];
+    /**
+     * The render function for each breadcrumb item (dynamic API)
+     */
+    children: (item: TItem) => ReactElement<ComponentPropsWithoutRef<typeof Breadcrumb>>;
+    /**
+     * Controls breadcrumbs layout: wrap or nowrap
+     */
+    wrap: BreadcrumbWrap;
+    /**
+     * Defines breadcrumb rendering strategy.
+     * @default 'non-collapsed'
+     */
+    type?: BreadcrumbType;
+}
+declare const Breadcrumbs: (<TItem extends {
+    label: string;
+}>(props: (BreadcrumbsProps | BreadcrumbsWithItemProps<TItem>) & {
+    ref?: Ref<HTMLOListElement>;
+}) => ReactNode) & {
+    displayName: string;
+};
+export { Breadcrumbs };

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

@@ -0,0 +1,162 @@
+import { jsxs as b, Fragment as x, jsx as a } from "react/jsx-runtime";
+import { forwardRef as O, cloneElement as g, Children as S, isValidElement as f } from "react";
+import { Breadcrumbs as N, Breadcrumb as R } from "react-aria-components/Breadcrumbs";
+import { Button as $ } from "react-aria-components/Button";
+import { useIntl as j } from "react-intl";
+import { useBreakpointListener as D } from "../../hooks/use-breakpoint-listener.js";
+import { Icon as h } from "../icon/Icon.js";
+import { Menu as T } from "../menu/Menu.js";
+import { MenuContent as H } from "../menu/parts/MenuContent.js";
+import { MenuTrigger as K } from "../menu/parts/MenuTrigger.js";
+import { RawMenuItem as L } from "../menu/parts/RawMenuItem.js";
+import { BreadcrumbsProvider as U } from "./Breadcrumbs.context.js";
+import { breadcrumbsVariant as V } from "./Breadcrumbs.variant.js";
+const W = /* @__PURE__ */ new Set([
+  "href",
+  "target",
+  "rel",
+  "download",
+  "isDisabled",
+  "onClick",
+  "onPress",
+  "onPressStart",
+  "onPressEnd",
+  "onPressChange",
+  "onPressUp",
+  "onFocus",
+  "onBlur",
+  "onKeyDown",
+  "onKeyUp",
+  "onHoverStart",
+  "onHoverChange",
+  "onHoverEnd",
+  "id"
+]), _ = (r) => {
+  const t = {};
+  if (!f(r))
+    return { menuItemProps: t, originalOnAction: void 0 };
+  const n = r.props;
+  for (const [e, s] of Object.entries(n))
+    e !== "children" && e !== "onAction" && (W.has(e) || e.startsWith("aria-") || e.startsWith("data-")) && (t[e] = s);
+  const o = typeof n.onAction == "function" ? n.onAction : void 0;
+  return { menuItemProps: t, originalOnAction: o };
+}, F = (r, t) => "id" in r && r.id && typeof r.id == "string" ? r.id : `${r.label}-${t}`, z = (r, t) => r ? r.map((n, o) => {
+  if (typeof t != "function")
+    return null;
+  const e = t(n), s = F(n, o);
+  return f(e) ? g(e, { key: s }) : null;
+}).filter((n) => n !== null) : typeof t == "function" ? [] : S.toArray(t).filter(
+  f
+), q = (r, t) => r.slice(1, -1).map((o, e) => {
+  const s = o.props.children, { menuItemProps: l, originalOnAction: u } = _(s), c = o.props.id ?? o.key, d = typeof c == "string" || typeof c == "number" ? c : `collapsed-breadcrumb-${e}`, m = f(s) && typeof s.props.children == "string" ? s.props.children : t(e + 2);
+  return { key: d, label: m, menuItemProps: l, originalOnAction: u };
+});
+function G({
+  menuItems: r,
+  onAction: t,
+  breadcrumbClassName: n,
+  triggerAriaLabel: o
+}) {
+  return /* @__PURE__ */ b(R, { className: n, children: [
+    /* @__PURE__ */ b(T, { placement: "bottom start", children: [
+      /* @__PURE__ */ a(K, { asChild: !0, children: /* @__PURE__ */ a(
+        $,
+        {
+          "aria-label": o,
+          className: "uy:flex uy:h-300 uy:w-300 uy:cursor-pointer uy:items-center uy:justify-center uy:rounded-75 uy:text-content-neutral-enabled uy:hover:bg-surface-neutral-hover uy:hover:text-content-neutral-hover uy:active:bg-surface-neutral-active uy:active:text-content-neutral-active uy:data-[pressed=true]:bg-surface-neutral-pressed uy:data-[pressed=true]:text-content-neutral-pressed uy:focus-visible:outline-none uy:focus-visible:ring-2 uy:focus-visible:ring-offset-2 uy:focus-visible:ring-utility-focus-ring",
+          children: /* @__PURE__ */ a(
+            h,
+            {
+              src: "DotsThreeOutlined",
+              "aria-hidden": "true",
+              color: "inherit",
+              size: 20
+            }
+          )
+        }
+      ) }),
+      /* @__PURE__ */ a(H, { width: 248, children: r.map((e) => /* @__PURE__ */ a(
+        L,
+        {
+          ...e.menuItemProps,
+          onAction: () => {
+            e.originalOnAction?.(), t?.(e.key);
+          },
+          children: e.label
+        },
+        e.key
+      )) })
+    ] }),
+    /* @__PURE__ */ a(
+      h,
+      {
+        src: "CaretRightOutlined",
+        "aria-hidden": "true",
+        color: "content.neutral.lowest"
+      }
+    )
+  ] });
+}
+function J({
+  items: r,
+  children: t,
+  wrap: n = "nowrap",
+  type: o = "non-collapsed",
+  ...e
+}, s) {
+  const l = D(), u = j(), c = l === "xs" || l === "sm", d = o === "collapsed", m = d ? "nowrap" : n, { base: v, breadcrumb: B } = V({ wrap: m }), C = r === void 0, i = z(r, t), y = d && i.length > 2, I = Math.max(i.length - 2, 0), M = u.formatMessage(
+    {
+      id: "unity:component:breadcrumbs:collapsed:trigger:label",
+      defaultMessage: "Show {count} more breadcrumbs"
+    },
+    { count: I }
+  ), w = y ? q(
+    i,
+    (p) => u.formatMessage(
+      {
+        id: "unity:component:breadcrumbs:collapsed:item:fallback",
+        defaultMessage: "Level {level}"
+      },
+      { level: p }
+    )
+  ) : [], P = i.at(0), k = i.at(-1), A = y ? /* @__PURE__ */ b(x, { children: [
+    P,
+    /* @__PURE__ */ a(
+      G,
+      {
+        menuItems: w,
+        onAction: e.onAction,
+        breadcrumbClassName: B(),
+        triggerAriaLabel: M
+      }
+    ),
+    k
+  ] }) : i.map(
+    (p, E) => g(p, {
+      key: `visible-${String(p.key ?? E)}`
+    })
+  );
+  return /* @__PURE__ */ a(
+    U,
+    {
+      wrap: m,
+      isMobile: c,
+      isStaticApi: C,
+      children: /* @__PURE__ */ a(
+        N,
+        {
+          "data-dd-privacy": "allow",
+          ref: s,
+          className: v(),
+          ...e,
+          children: A
+        }
+      )
+    }
+  );
+}
+const Q = O(J);
+Q.displayName = "Breadcrumbs";
+export {
+  Q as Breadcrumbs
+};

package/dist/esm/components/breadcrumbs/Breadcrumbs.variant.d.ts

@@ -0,0 +1,37 @@
+export declare const breadcrumbsVariant: import('tailwind-variants').TVReturnType<{
+    wrap: {
+        wrap: {
+            base: string;
+        };
+        nowrap: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    breadcrumb: string;
+}, undefined, {
+    wrap: {
+        wrap: {
+            base: string;
+        };
+        nowrap: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    breadcrumb: string;
+}, import('tailwind-variants').TVReturnType<{
+    wrap: {
+        wrap: {
+            base: string;
+        };
+        nowrap: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    breadcrumb: string;
+}, undefined, unknown, unknown, undefined>>;

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

@@ -0,0 +1,20 @@
+import { uyTv as a } from "@payfit/unity-themes";
+const r = a({
+  slots: {
+    base: "uy:flex uy:gap-50 uy:list-none uy:text-content-neutral-enabled uy:typography-action-large uy:sm:typography-action",
+    breadcrumb: "uy:flex uy:gap-50 uy:items-center uy:leading-[1.5] uy:sm:leading-[1.75]"
+  },
+  variants: {
+    wrap: {
+      wrap: {
+        base: "uy:flex-wrap"
+      },
+      nowrap: {
+        base: ""
+      }
+    }
+  }
+});
+export {
+  r as breadcrumbsVariant
+};

package/dist/esm/components/breadcrumbs/figma/Breadcrumbs.figma.d.ts

@@ -0,0 +1,7 @@
+import { default as figma } from 'figma';
+declare const _default: {
+    example: figma.TemplateStringResult;
+    imports: string[];
+    id: string;
+};
+export default _default;

package/dist/esm/components/breadcrumbs/parts/Breadcrumb.d.ts

@@ -0,0 +1,33 @@
+import { ComponentPropsWithoutRef, ReactElement } from 'react';
+import { BreadcrumbProps as AriaBreadcrumbProps } from 'react-aria-components/Breadcrumbs';
+import { RawBreadcrumbLinkProps } from './RawBreadcrumbLink.js';
+export interface BreadcrumbProps extends Omit<AriaBreadcrumbProps, 'children' | 'className' | 'style'> {
+    /**
+     * A single BreadcrumbLink child element
+     */
+    children: ReactElement<ComponentPropsWithoutRef<'a'> & RawBreadcrumbLinkProps>;
+}
+/**
+ * A semantic wrapper component for breadcrumb items that displays navigation hierarchy.
+ * Accepts exactly one BreadcrumbLink as a child to maintain design system consistency.
+ * @param props - Breadcrumb props including the BreadcrumbLink child
+ * @example
+ * ```tsx
+ * import { Breadcrumb, BreadcrumbLink } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <Breadcrumb>
+ *       <BreadcrumbLink href="/dashboard">Dashboard</BreadcrumbLink>
+ *     </Breadcrumb>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Only accepts a single BreadcrumbLink component as a child
+ * - Automatically handles current page styling (disabled state)
+ * - Displays caret icons as separators between breadcrumb items
+ * @see {@link BreadcrumbProps} for all available props
+ */
+declare const Breadcrumb: import('react').ForwardRefExoticComponent<BreadcrumbProps & import('react').RefAttributes<HTMLLIElement>>;
+export { Breadcrumb };

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

@@ -0,0 +1,42 @@
+import { jsx as t, jsxs as s, Fragment as u } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+import { Breadcrumb as d } from "react-aria-components/Breadcrumbs";
+import { Icon as l } from "../../icon/Icon.js";
+import { useBreadcrumbsContext as p } from "../Breadcrumbs.context.js";
+import { breadcrumbsVariant as b } from "../Breadcrumbs.variant.js";
+const f = 280;
+function x({ content: r }) {
+  return /* @__PURE__ */ t(
+    "span",
+    {
+      title: typeof r == "string" ? r : void 0,
+      className: "uy:text-nowrap uy:text-content-neutral-lowest uy:truncate",
+      style: { maxWidth: `${f}px` },
+      "aria-current": "page",
+      children: r
+    }
+  );
+}
+const B = i(
+  ({ children: r, ...e }, a) => {
+    const { wrap: o } = p(), { breadcrumb: n } = b({ wrap: o });
+    return /* @__PURE__ */ t(d, { ref: a, ...e, className: n(), children: ({ isCurrent: c }) => {
+      const m = r.props.children;
+      return c ? /* @__PURE__ */ t(x, { content: m }) : /* @__PURE__ */ s(u, { children: [
+        r,
+        /* @__PURE__ */ t(
+          l,
+          {
+            src: "CaretRightOutlined",
+            "aria-hidden": "true",
+            color: "content.neutral.lowest"
+          }
+        )
+      ] });
+    } });
+  }
+);
+B.displayName = "Breadcrumb";
+export {
+  B as Breadcrumb
+};

package/dist/esm/components/breadcrumbs/parts/RawBreadcrumbLink.d.ts

@@ -0,0 +1,39 @@
+import { RawLinkProps } from '../../link/RawLink.js';
+export declare const BREADCRUMB_ITEM_MAX_WIDTH = 180;
+export type RawBreadcrumbLinkProps = RawLinkProps;
+/**
+ * A styled link component for breadcrumbs that enforces Unity design system styling.
+ * This component truncates long labels with a fixed max width and displays a tooltip when overflow happens.
+ * @param props - Link props from RawLink {@see {@link RawLinkProps}}
+ * @example
+ * ```tsx
+ * import { RawBreadcrumbLink } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <RawBreadcrumbLink href="/dashboard">
+ *       Dashboard
+ *     </RawBreadcrumbLink>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - The component enforces breadcrumb-specific styling that cannot be overridden
+ * - Labels are truncated with a max width of 180px
+ * - Tooltip is displayed only when rendered text actually overflows
+ * - Uses the 'secondary' color variant for breadcrumb links
+ * @see {@link RawBreadcrumbLinkProps} for all available props
+ */
+declare const RawBreadcrumbLink: import('react').ForwardRefExoticComponent<Omit<import('react-aria-components').LinkProps, "style" | "className"> & {
+    href: HTMLAnchorElement["href"];
+    id?: import('react').HTMLAttributes<HTMLAnchorElement>["id"];
+    size?: "default" | "small" | "inherit" | "large" | undefined;
+    variant?: "inline" | "standalone" | undefined;
+    color?: "inherit" | "primary" | "secondary" | undefined;
+    isExternal?: boolean;
+    isCurrent?: Pick<import('react').HTMLAttributes<HTMLAnchorElement>, "aria-current"> | undefined;
+    isExact?: boolean;
+    maxCharactersTruncation?: number;
+    maxWidthTruncation?: import('react').CSSProperties["maxWidth"];
+} & import('react').RefAttributes<HTMLAnchorElement>>;
+export { RawBreadcrumbLink };

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

@@ -0,0 +1,62 @@
+import { jsx as a } from "react/jsx-runtime";
+import { forwardRef as w, useState as R, useRef as E, useCallback as d, useLayoutEffect as L, useEffect as i } from "react";
+import { RawLink as b } from "../../link/RawLink.js";
+import { Tooltip as T } from "../../tooltip/Tooltip.js";
+const k = 180, y = w(
+  ({ children: r, href: l, ...m }, n) => {
+    const o = typeof r == "string" ? r : "", [p, c] = R(!1), s = E(null), t = d(() => {
+      const e = s.current;
+      if (!e || !o) {
+        c(!1);
+        return;
+      }
+      c(e.scrollWidth > e.clientWidth);
+    }, [o]), v = d(
+      (e) => {
+        s.current = e, typeof n == "function" ? n(e) : n && (n.current = e);
+      },
+      [n]
+    );
+    L(() => {
+      t();
+    }, [t, r]), i(() => {
+      const e = s.current;
+      if (!e || typeof ResizeObserver > "u")
+        return;
+      const f = new ResizeObserver(t);
+      return f.observe(e), () => {
+        f.disconnect();
+      };
+    }, [t]), i(() => {
+      if (!(typeof window > "u"))
+        return window.addEventListener("resize", t), () => {
+          window.removeEventListener("resize", t);
+        };
+    }, [t]), i(() => {
+      if (!("fonts" in document))
+        return;
+      const e = document.fonts;
+      return e.addEventListener("loadingdone", t), () => {
+        e.removeEventListener("loadingdone", t);
+      };
+    }, [t]);
+    const u = /* @__PURE__ */ a(
+      b,
+      {
+        isExact: !0,
+        href: l,
+        color: "inherit",
+        maxWidthTruncation: k,
+        ref: v,
+        ...m,
+        children: r
+      }
+    );
+    return p && o ? /* @__PURE__ */ a(T, { title: o, children: u }) : u;
+  }
+);
+y.displayName = "BreadcrumbLink";
+export {
+  k as BREADCRUMB_ITEM_MAX_WIDTH,
+  y as RawBreadcrumbLink
+};

package/dist/esm/components/button/Button.d.ts

@@ -0,0 +1,57 @@
+import { UnityIcon } from '@payfit/unity-icons';
+import { PropsWithChildren } from 'react';
+import { ButtonProps as AriaButtonProps } from 'react-aria-components/Button';
+import { ButtonBase, ButtonFilled, ButtonGhost, ButtonOutlined } from './Button.variants.js';
+type UnityButtonProps = AriaButtonProps & ButtonBase & {
+    /**
+     * The button's appearance. It can be one of the following: 'primary', 'secondary', 'ghost'.
+     * @default 'primary'
+     */
+    variant: 'primary' | 'secondary' | 'ghost' | 'outlined';
+    /**
+     * The button size. It can be full size or default size (min-content).
+     * @default 'default'
+     */
+    size?: ButtonBase['size'];
+    /**
+     * The button's color. It can be one of the following: 'primary', 'inverted'.
+     * @default 'primary'
+     */
+    color?: ButtonFilled['color'] | ButtonOutlined['color'] | ButtonGhost['color'];
+    /**
+     * The loading state of the button.
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * The button's prefix icon. It has to be one of the icons from the Unity Icons package.
+     */
+    prefixIcon?: UnityIcon;
+    /**
+     * The button's suffix icon. It has to be one of the icons from the Unity Icons package.
+     * @default undefined
+     */
+    suffixIcon?: UnityIcon;
+    /**
+     * The length of the label in characters before truncation applies. Truncation won't happen by default unless you specify this prop
+     * @default undefined
+     */
+    truncateLabelLength?: number;
+};
+type UnionButtonProps = (UnityButtonProps & {
+    variant: 'primary';
+} & ButtonFilled) | (UnityButtonProps & {
+    variant: 'secondary';
+} & ButtonOutlined) | (UnityButtonProps & {
+    variant: 'ghost';
+} & ButtonGhost) | (UnityButtonProps & {
+    variant: 'outlined';
+} & ButtonOutlined);
+export type ButtonProps = PropsWithChildren<Omit<UnionButtonProps, 'style'>>;
+/**
+ * Buttons allow users to take actions, and make choices, with a single tap.
+ */
+declare const Button: import('react').ForwardRefExoticComponent<Omit<UnionButtonProps, "style"> & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLButtonElement>>;
+export { Button };

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

@@ -0,0 +1,107 @@
+import { jsx as a, jsxs as B } from "react/jsx-runtime";
+import { forwardRef as N, useMemo as j } from "react";
+import { useUnityTheme as z, uyMerge as o } from "@payfit/unity-themes";
+import { Button as C } from "react-aria-components/Button";
+import { Icon as f } from "../icon/Icon.js";
+import { Spinner as M } from "../spinner/Spinner.js";
+import { buttonOutlined as y, buttonGhost as $, buttonFilled as d } from "./Button.variants.js";
+const A = (s, r) => s ? /* @__PURE__ */ a(M, { size: "small", color: "inherit", label: "Loading..." }) : r ? /* @__PURE__ */ a(
+  f,
+  {
+    src: r,
+    size: 20,
+    color: "inherit",
+    role: "presentation",
+    "data-unity-icon": "prefix"
+  }
+) : null, F = N(
+  ({
+    variant: s,
+    children: r,
+    color: e = "primary",
+    size: m = "default",
+    isDisabled: i = !1,
+    isLoading: t = !1,
+    prefixIcon: h,
+    suffixIcon: c,
+    truncateLabelLength: l,
+    ...b
+  }, w) => {
+    const { theme: p } = z(), x = j(() => {
+      const n = { size: m, isDisabled: i, isLoading: t };
+      switch (s) {
+        case "primary": {
+          const u = {
+            ...n,
+            color: e
+          };
+          return o(d(u));
+        }
+        case "secondary":
+          return p === "rebrand" ? o(
+            d({ ...n, color: e === "inverted" ? "inverted.low" : "neutral" })
+          ) : o(
+            y({
+              ...n,
+              color: e
+            })
+          );
+        case "ghost": {
+          const u = {
+            ...n,
+            color: e
+          };
+          return o($(u));
+        }
+        case "outlined":
+          return o(
+            y({
+              ...n,
+              color: e
+            })
+          );
+      }
+    }, [s, e, m, i, t, p]), v = {
+      ...t && { "data-loading": t }
+    };
+    return /* @__PURE__ */ a(
+      C,
+      {
+        "data-dd-privacy": "allow",
+        ...b,
+        ref: w,
+        isDisabled: i || t,
+        isPending: t,
+        className: x,
+        ...v,
+        children: /* @__PURE__ */ B("span", { className: "uy:inline-flex uy:gap-50 uy:items-center", children: [
+          A(t, h),
+          l && l > 0 ? /* @__PURE__ */ a(
+            "span",
+            {
+              style: {
+                "--uy-button-label-truncation-length": `${l}ch`
+              },
+              className: "uy:truncate uy:min-w-0 uy:w-(--uy-button-label-truncation-length)",
+              children: r
+            }
+          ) : r,
+          c && /* @__PURE__ */ a(
+            f,
+            {
+              src: c,
+              size: 20,
+              color: "inherit",
+              role: "presentation",
+              "data-unity-icon": "suffix"
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+F.displayName = "Button";
+export {
+  F as Button
+};