@payfit/unity-components 1.2.0 → 2.1.4

package/dist/esm/components/pagination/parts/PaginationItem.js

@@ -0,0 +1,22 @@
+import { jsx as s } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { usePaginationContext as p } from "../PaginationContext.js";
+const f = m(
+  ({ children: o, pageNumber: a, pageCount: i, ...e }, n) => {
+    const { pageCount: r } = p(), t = i ?? r;
+    return /* @__PURE__ */ s(
+      "li",
+      {
+        ...e,
+        ref: n,
+        "aria-setsize": t !== -1 ? t : void 0,
+        "aria-posinset": a,
+        children: o
+      }
+    );
+  }
+);
+f.displayName = "PaginationItem";
+export {
+  f as PaginationItem
+};

package/dist/esm/components/pagination/parts/RawPaginationLink.d.ts

@@ -0,0 +1,11 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { LinkProps } from 'react-aria-components';
+export declare const paginationLink: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export interface PaginationLinkProps extends LinkProps, VariantProps<typeof paginationLink> {
+    value: number;
+    id?: string;
+    isDisabled?: boolean;
+    isCurrent?: boolean;
+}
+declare const RawPaginationLink: import('react').ForwardRefExoticComponent<PaginationLinkProps & import('react').RefAttributes<HTMLAnchorElement>>;
+export { RawPaginationLink };

package/dist/esm/components/pagination/parts/RawPaginationLink.js

@@ -0,0 +1,60 @@
+import { jsx as m } from "react/jsx-runtime";
+import { forwardRef as w, useRef as h, useCallback as u } from "react";
+import { uyTv as v } from "@payfit/unity-themes";
+import { Link as x } from "react-aria-components";
+import { useIntl as P } from "react-intl";
+import { usePaginationContext as k } from "../PaginationContext.js";
+const R = v({
+  base: [
+    "uy:min-w-300 uy:h-300 uy:p-25 uy:flex uy:justify-center uy:items-center uy:typography-action uy:rounded-pill uy:transition-colors",
+    "uy:enabled:text-content-neutral-enabled uy:enabled:bg-transparent uy:cursor-pointer",
+    "uy:data-[disabled]:text-content-neutral-disabled uy:data-[disabled]:bg-surface-neutral-lowest-disabled uy:data-[disabled]:cursor-not-allowed",
+    "uy:hover:text-content-neutral-hover uy:hover:bg-surface-neutral-lowest-hover",
+    "uy:active:text-content-neutral-pressed uy:active:bg-surface-neutral-lowest-pressed uy:data-[pressed]:text-content-neutral-pressed uy:data-[pressed]:bg-surface-neutral-lowest-pressed",
+    "uy:aria-[current=page]:bg-surface-neutral-lowest-selected",
+    "uy:focus-visible:outline-2 uy:focus-visible:outline-solid uy:focus-visible:outline-utility-focus-ring uy:focus-visible:outline-offset-2",
+    "uy:data-[focus-visible]:outline-2 uy:data-[focus-visible]:outline-solid uy:data-[focus-visible]:outline-utility-focus-ring uy:data-[focus-visible]:outline-offset-2"
+  ]
+}), C = w(
+  ({ isCurrent: r, isDisabled: l, value: t, onPress: c, ...a }, n) => {
+    const y = P(), { currentPage: s, onKeyDown: f, pageRefs: i, onPageChange: o } = k(), d = h(null), g = u(
+      (e) => {
+        d.current = e, e ? i.current.set(t, e) : i.current.delete(t), typeof n == "function" ? n(e) : n && (n.current = e);
+      },
+      [t, i, n]
+    ), b = r ?? s === t, p = u(() => {
+      if (!a.href) {
+        const e = t > s ? 1 : -1;
+        o(t, s, e);
+      }
+    }, [t, s, o, a.href]);
+    return /* @__PURE__ */ m(
+      x,
+      {
+        ...a,
+        ref: g,
+        className: R(),
+        isDisabled: l,
+        onPress: c ?? p,
+        "aria-current": b ? "page" : void 0,
+        "aria-label": y.formatMessage(
+          {
+            id: "unity:component:pagination:link:label",
+            defaultMessage: "Page {page}"
+          },
+          {
+            page: t
+          }
+        ),
+        onKeyDown: (e) => {
+          f(e);
+        }
+      }
+    );
+  }
+);
+C.displayName = "RawPaginationLink";
+export {
+  C as RawPaginationLink,
+  R as paginationLink
+};

package/dist/esm/components/pagination/parts/RawPaginationNext.d.ts

@@ -0,0 +1,22 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { LinkProps } from 'react-aria-components';
+declare const paginationNavButton: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export interface RawPaginationNextProps extends Omit<LinkProps, 'children' | 'className' | 'style' | 'isDisabled' | 'aria-label' | 'title'>, VariantProps<typeof paginationNavButton> {
+    id?: string;
+    isDisabled?: boolean;
+    href?: string;
+}
+/**
+ * The RawPaginationNext component renders a "Next" link for pagination.
+ * This component is always a link for consistent integration with routing libraries.
+ * @example
+ * ```tsx
+ * import { RawPaginationNext } from '@payfit/unity-components'
+ *
+ * <RawPaginationNext href="/page/3" isDisabled={currentPage === pageCount}>
+ *   Next
+ * </RawPaginationNext>
+ * ```
+ */
+declare const RawPaginationNext: import('react').ForwardRefExoticComponent<RawPaginationNextProps & import('react').RefAttributes<HTMLAnchorElement>>;
+export { RawPaginationNext };

package/dist/esm/components/pagination/parts/RawPaginationNext.js

@@ -0,0 +1,70 @@
+import { jsx as o } from "react/jsx-runtime";
+import { forwardRef as g } from "react";
+import { uyTv as b } from "@payfit/unity-themes";
+import { Link as x } from "react-aria-components";
+import { useIntl as v } from "react-intl";
+import { Icon as w } from "../../icon/Icon.js";
+import { Tooltip as h } from "../../tooltip/Tooltip.js";
+import { usePaginationContext as P } from "../PaginationContext.js";
+const N = b({
+  base: [
+    "uy:min-w-300 uy:h-300 uy:p-25 uy:flex uy:justify-center uy:items-center uy:typography-action uy:rounded-circle uy:transition-colors",
+    "uy:text-content-neutral-lowest uy:enabled:bg-transparent uy:cursor-pointer",
+    "uy:hover:text-content-neutral-hover uy:hover:bg-surface-neutral-lowest-hover",
+    "uy:active:text-content-neutral-pressed uy:active:bg-surface-neutral-lowest-pressed",
+    "uy:data-[pressed=true]:text-content-neutral-pressed uy:data-[pressed=true]:bg-surface-neutral-lowest-pressed",
+    "uy:data-[disabled=true]:text-content-neutral-disabled uy:data-[disabled=true]:bg-transparent uy:data-[disabled=true]:cursor-not-allowed",
+    "uy:focus-visible:outline-2 uy:focus-visible:outline-solid uy:focus-visible:outline-utility-focus-ring uy:focus-visible:outline-offset-2"
+  ]
+}), D = g(
+  ({ isDisabled: i, href: n, onPress: s, ...u }, l) => {
+    const a = v(), {
+      onKeyDown: c,
+      currentPage: e,
+      pageCount: r,
+      onPageChange: y
+    } = P(), t = a.formatMessage({
+      id: "unity:component:common:next",
+      defaultMessage: "Next"
+    }), d = a.formatMessage(
+      {
+        id: "unity:component:pagination:nav-button:description",
+        defaultMessage: "Go to next page"
+      },
+      {
+        variant: t
+      }
+    ), p = (m) => {
+      c(m);
+    }, f = () => {
+      !n && (r === -1 || e < r) && y(e + 1, e, 1);
+    };
+    return /* @__PURE__ */ o(h, { title: t, children: /* @__PURE__ */ o(
+      x,
+      {
+        ref: l,
+        href: n,
+        className: N(),
+        isDisabled: i,
+        onPress: s ?? f,
+        "aria-label": t,
+        "aria-description": d,
+        onKeyDown: p,
+        ...u,
+        children: /* @__PURE__ */ o(
+          w,
+          {
+            src: "CaretRightOutlined",
+            size: 20,
+            color: "inherit",
+            role: "presentation"
+          }
+        )
+      }
+    ) });
+  }
+);
+D.displayName = "RawPaginationNext";
+export {
+  D as RawPaginationNext
+};

package/dist/esm/components/pagination/parts/RawPaginationPrevious.d.ts

@@ -0,0 +1,22 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { LinkProps } from 'react-aria-components';
+declare const paginationNavButton: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export interface RawPaginationPreviousProps extends Omit<LinkProps, 'children' | 'className' | 'style' | 'isDisabled' | 'aria-label' | 'title'>, VariantProps<typeof paginationNavButton> {
+    id?: string;
+    isDisabled?: boolean;
+    href?: string;
+}
+/**
+ * The RawPaginationPrevious component renders a "Next" link for pagination.
+ * This component is always a link for consistent integration with routing libraries.
+ * @example
+ * ```tsx
+ * import { RawPaginationPrevious } from '@payfit/unity-components'
+ *
+ * <RawPaginationPrevious href="/page/3" isDisabled={currentPage === pageCount}>
+ *   Next
+ * </RawPaginationPrevious>
+ * ```
+ */
+declare const RawPaginationPrevious: import('react').ForwardRefExoticComponent<RawPaginationPreviousProps & import('react').RefAttributes<HTMLAnchorElement>>;
+export { RawPaginationPrevious };

package/dist/esm/components/pagination/parts/RawPaginationPrevious.js

@@ -0,0 +1,67 @@
+import { jsx as o } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { uyTv as g } from "@payfit/unity-themes";
+import { Link as v } from "react-aria-components";
+import { useIntl as b } from "react-intl";
+import { Icon as w } from "../../icon/Icon.js";
+import { Tooltip as h } from "../../tooltip/Tooltip.js";
+import { usePaginationContext as x } from "../PaginationContext.js";
+const P = g({
+  base: [
+    "uy:min-w-300 uy:h-300 uy:p-25 uy:flex uy:justify-center uy:items-center uy:typography-action uy:rounded-circle uy:transition-colors",
+    "uy:text-content-neutral-lowest uy:enabled:bg-transparent uy:cursor-pointer",
+    "uy:hover:text-content-neutral-hover uy:hover:bg-surface-neutral-lowest-hover",
+    "uy:active:text-content-neutral-pressed uy:active:bg-surface-neutral-lowest-pressed",
+    "uy:data-[pressed]:text-content-neutral-pressed uy:data-[pressed]:bg-surface-neutral-lowest-pressed",
+    "uy:data-[disabled]:text-content-neutral-disabled uy:data-[disabled]:bg-transparent uy:data-[disabled]:cursor-not-allowed",
+    "uy:focus-visible:outline-2 uy:focus-visible:outline-solid uy:focus-visible:outline-utility-focus-ring uy:focus-visible:outline-offset-2"
+  ]
+}), D = m(({ isDisabled: a, href: n, onPress: s, ...i }, u) => {
+  const r = b(), {
+    onKeyDown: l,
+    currentPage: e,
+    onPageChange: c
+  } = x(), t = r.formatMessage({
+    id: "unity:component:common:previous",
+    defaultMessage: "Previous"
+  }), y = r.formatMessage(
+    {
+      id: "unity:component:pagination:nav-button:description",
+      defaultMessage: "Go to previous page"
+    },
+    {
+      variant: t
+    }
+  ), d = (f) => {
+    l(f);
+  }, p = () => {
+    !n && e > 1 && c(e - 1, e, -1);
+  };
+  return /* @__PURE__ */ o(h, { title: t, children: /* @__PURE__ */ o(
+    v,
+    {
+      ref: u,
+      href: n,
+      className: P(),
+      isDisabled: a,
+      onPress: s ?? p,
+      "aria-label": t,
+      "aria-description": y,
+      onKeyDown: d,
+      ...i,
+      children: /* @__PURE__ */ o(
+        w,
+        {
+          src: "CaretLeftOutlined",
+          size: 20,
+          color: "inherit",
+          role: "presentation"
+        }
+      )
+    }
+  ) });
+});
+D.displayName = "RawPaginationPrevious";
+export {
+  D as RawPaginationPrevious
+};

package/dist/esm/components/pagination/utils/pagination-window.js

@@ -1,33 +1,42 @@
-function o(e, i) {
-  return Array.from({ length: i - e + 1 }, (t, h) => h + e).map(
-    (t) => ({
+function y(s, l) {
+  return Array.from({ length: l - s + 1 }, (p, t) => t + s).map(
+    (p) => ({
       type: "page",
-      value: t
+      value: p
     })
   );
 }
 const n = 5;
-function a(e, i, t) {
-  const h = Math.max(
+function d(s, l, p) {
+  const t = Math.max(
     n,
-    t
-  ), p = h - 2;
-  if (e <= h)
-    return Array.from({ length: e }, (y, f) => ({
+    p % 2 === 0 ? p + 1 : p
+  ), h = t - 2;
+  if (s === -1) {
+    const e = [];
+    e.push({ type: "page", value: 1 });
+    const o = h - 1, u = Math.floor(o / 2);
+    return l <= 3 + u ? (e.push(...y(2, t - 1)), e.push({ type: "ellipsis", value: [t, 1 / 0] })) : (e.push({ type: "ellipsis", value: [2, l - u] }), e.push(...y(l - u + 1, l + u)), e.push({
+      type: "ellipsis",
+      value: [l + u + 1, 1 / 0]
+    })), e;
+  }
+  if (s <= t)
+    return Array.from({ length: s }, (e, o) => ({
       type: "page",
-      value: f + 1
+      value: o + 1
     }));
-  const s = [];
-  s.push({ type: "page", value: 1 });
-  const u = p - 2, l = Math.floor(u / 2);
-  return i <= 3 + l ? (s.push(...o(2, p)), s.push({ type: "ellipsis", value: [p + 1, e - 1] })) : i >= e - (2 + l) ? (s.push({
+  const i = [];
+  i.push({ type: "page", value: 1 });
+  const v = h - 2, f = Math.floor(v / 2);
+  return l <= 3 + f ? (i.push(...y(2, h)), i.push({ type: "ellipsis", value: [h + 1, s - 1] })) : l >= s - (2 + f) ? (i.push({
     type: "ellipsis",
-    value: [2, e - (p - 1) - 1]
-  }), s.push(...o(e - (p - 1), e - 1))) : (s.push({ type: "ellipsis", value: [2, i - l - 1] }), s.push(...o(i - l, i + l)), s.push({
+    value: [2, s - (h - 1) - 1]
+  }), i.push(...y(s - (h - 1), s - 1))) : (i.push({ type: "ellipsis", value: [2, l - f - 1] }), i.push(...y(l - f, l + f)), i.push({
     type: "ellipsis",
-    value: [i + l + 1, e - 1]
-  })), s.push({ type: "page", value: e }), s;
+    value: [l + f + 1, s - 1]
+  })), i.push({ type: "page", value: s }), i;
 }
 export {
-  a as generatePaginationWithWindow
+  d as generatePaginationWithWindow
 };

package/dist/esm/components/payfit-brand/PayFitBrand.d.ts

@@ -15,6 +15,10 @@ export type PayFitBrandProps = {
      * The width of the brand. Defaults to the minimum of `104px`.
      */
     width?: number;
+    /**
+     * Whether to display only the monogram or the full brand. Defaults to `false`.
+     */
+    showOnlyMonogram?: boolean;
 };
 /**
  * The PayFitBrand component represents the PayFit logo with several properties that follow our brand guidelines.

package/dist/esm/components/payfit-brand/PayFitBrand.js

@@ -1,14 +1,22 @@
-import { jsxs as y, jsx as c } from "react/jsx-runtime";
-import { forwardRef as p } from "react";
-import { uyTv as f } from "@payfit/unity-themes";
-import u from "../../hooks/use-id.js";
-const g = f({
+import { jsxs as p, jsx as c } from "react/jsx-runtime";
+import { forwardRef as f } from "react";
+import { uyTv as u } from "@payfit/unity-themes";
+import g from "../../hooks/use-id.js";
+const b = u({
   slots: {
-    base: "uy:min-w-[104px] uy:aspect-[13/4]",
+    base: "",
     monogram: "",
     logotype: ""
   },
   variants: {
+    showOnlyMonogram: {
+      true: {
+        base: "uy:aspect-square uy:min-w-[32px]"
+      },
+      false: {
+        base: "uy:aspect-[13/4] uy:min-w-[104px]"
+      }
+    },
     color: {
       original: {
         monogram: "uy:fill-content-primary",
@@ -27,41 +35,41 @@ const g = f({
   defaultVariants: {
     color: "original"
   }
-}), Z = p(
-  ({ color: l, label: n, description: a, ...r }, i) => {
-    const o = u(), t = `payfit-brand-title-${o}`, e = `payfit-brand-desc-${o}`, { base: h, monogram: m, logotype: s } = g({ color: l }), d = {
+}), Z = f(
+  ({ color: r, label: n, description: a, showOnlyMonogram: e = !1, ...i }, s) => {
+    const o = g(), t = `payfit-brand-title-${o}`, l = `payfit-brand-desc-${o}`, { base: m, monogram: h, logotype: d } = b({ color: r, showOnlyMonogram: e }), v = {
       focusable: !1,
       role: "img",
       "aria-labelledby": t,
-      ...a && { "aria-describedby": e }
-    }, v = {
-      ...r,
-      ...d
+      ...a && { "aria-describedby": l }
+    }, y = {
+      ...i,
+      ...v
     };
-    return /* @__PURE__ */ y(
+    return /* @__PURE__ */ p(
       "svg",
       {
-        ...v,
-        ref: i,
+        ...y,
+        ref: s,
         fill: "none",
-        viewBox: "0 0 104 32",
-        className: h(),
+        viewBox: e ? "0 0 32 32" : "0 0 104 32",
+        className: m(),
         children: [
           /* @__PURE__ */ c("title", { id: t, children: n ?? "PayFit Logo" }),
-          a && /* @__PURE__ */ c("desc", { id: e, children: a }),
+          a && /* @__PURE__ */ c("desc", { id: l, children: a }),
           /* @__PURE__ */ c(
             "path",
             {
               fillRule: "evenodd",
-              className: m(),
+              className: h(),
               d: "M16 32C7.164 32 0 24.836 0 16S7.164 0 16 0s16 7.164 16 16-7.164 16-16 16Zm-.218-10.31v-3.18c0-.092.072-.183.163-.183h3.746a4.885 4.885 0 0 0 4.69-5.09 4.893 4.893 0 0 0-4.708-4.692h-9.127c-.2 0-.364.164-.364.364v12.836a2.801 2.801 0 0 0 5.6 0c.018-.036.018-.054 0-.054Zm.182-7.545h3.527a.73.73 0 0 0 .727-.727.73.73 0 0 0-.727-.727h-4.782c-.2 0-.364.163-.364.364v8.672c0 .746-.618 1.364-1.363 1.364a1.374 1.374 0 0 1-1.364-1.364V10.164c0-.091.073-.182.164-.182h7.708c1.91-.037 3.492 1.49 3.51 3.382.036 1.909-1.49 3.49-3.382 3.509h-3.654c-.091 0-.182-.073-.182-.164V14.327c0-.09.072-.163.182-.181Z",
               clipRule: "evenodd"
             }
           ),
-          /* @__PURE__ */ c(
+          !e && /* @__PURE__ */ c(
             "path",
             {
-              className: s(),
+              className: d(),
               d: "M76.49 11.945h-1.472c-.163 0-.309.11-.345.255-.073.218-.128.364-.146.455-.582 1.781-1.472 4.472-2.636 8.054-.018.055-.091.255-.237.582-.036.09-.145.127-.236.09a.219.219 0 0 1-.09-.09 7.862 7.862 0 0 1-.237-.582c-1.2-3.69-2.091-6.454-2.673-8.31-.018-.054-.036-.126-.054-.18a.372.372 0 0 0-.346-.255h-1.454a.365.365 0 0 0-.346.472c.018.055.036.091.055.146.909 2.582 2.272 6.436 4.09 11.582 0 .018 0 .018.019.036a.443.443 0 0 1 0 .218c0 .018 0 .018-.018.037-.019.072-.055.163-.073.236a1.805 1.805 0 0 1-1.691 1.2h-1.527c-.2 0-.364.164-.364.364v1.218c0 .2.164.363.364.363H68.6a3.72 3.72 0 0 0 3.418-2.236c.018-.055.037-.11.073-.164.018-.054 1.09-3.09 4.673-13.109.054-.127-.019-.29-.146-.345H76.6c-.055-.018-.073-.037-.11-.037ZM57.11 22.291c.345.109.708.163 1.072.163a4.232 4.232 0 0 0 2.89-1.2 2.949 2.949 0 0 0 .855-2.145v-.945a.163.163 0 0 0-.163-.164h-.037c-.182.018-.272.018-.272.018l-1.146.146-2.273.345c-1.218.2-1.963.69-2.2 1.455a1.923 1.923 0 0 0-.09.563c.018.818.581 1.527 1.363 1.764Zm6.854.8v.727c0 .2-.164.364-.364.364h-1.182a.365.365 0 0 1-.364-.364l-.018-1.2c0-.018-.018-.036-.018-.054a.088.088 0 0 0-.127 0 1.04 1.04 0 0 0-.2.2c-.946.945-2.236 1.418-3.91 1.418-1.2 0-2.181-.327-2.945-.964-.763-.636-1.127-1.527-1.127-2.654A3.316 3.316 0 0 1 54.036 19c.2-.418.491-.764.873-1.018a3.876 3.876 0 0 1 1.055-.546A5.45 5.45 0 0 1 57 17.164c1.764-.255 2.71-.382 2.89-.419.146-.018.728-.09 1.728-.236.073-.018.127-.018.2-.018.091-.018.164-.091.164-.182v-.51c0-.763-.2-1.363-.6-1.78-.4-.42-1.146-.637-2.218-.637-.491 0-.982.054-1.455.2-.364.109-.673.309-.927.6-.164.218-.31.436-.4.69-.018.055-.037.11-.055.183 0 .018 0 .036-.018.054a.371.371 0 0 1-.364.29h-1.363a.378.378 0 0 1-.346-.38v-.074c.019-.145.037-.254.055-.345.09-.345.236-.691.418-1a3.54 3.54 0 0 1 .818-.91c.437-.29.91-.508 1.418-.654a8.41 8.41 0 0 1 2.128-.254c3.29 0 4.89 1.309 4.89 3.963v7.346Zm26.963-10.873v11.564c0 .2.164.363.364.363h1.473c.2 0 .363-.163.363-.363V12.218c0-.2-.163-.364-.363-.364H91.29c-.2 0-.364.164-.364.364Zm0-3.673v1.473c0 .2.164.364.364.364h1.473c.2 0 .363-.164.363-.364V8.545c0-.2-.163-.363-.363-.363H91.29c-.2 0-.364.163-.364.363ZM100 13.782h3.109c.2 0 .364-.164.364-.364V12.2c0-.2-.164-.364-.364-.364H100c-.09 0-.182-.072-.182-.163V8.545c0-.2-.163-.363-.364-.363h-1.472c-.2 0-.364.163-.364.363v3.128c0 .09-.073.181-.163.181H96.09c-.2 0-.364.164-.364.364v1.218c0 .2.164.364.364.364h1.345c.091 0 .182.073.182.164V20.545c.073 2 1.71 3.6 3.709 3.6h1.655c.2 0 .363-.163.363-.363v-1.218c0-.2-.163-.364-.363-.364h-1.655a1.525 1.525 0 0 1-1.527-1.527v-6.71c.018-.108.09-.181.2-.181Zm-47.964-.637a4.96 4.96 0 0 0-4.854-4.963h-7c-.2 0-.364.163-.364.363v15.237c0 .2.164.363.364.363h1.472c.2 0 .364-.163.364-.363v-5.473c0-.09.073-.182.164-.182h5a4.975 4.975 0 0 0 4.854-4.982Zm-1.927 0a3.01 3.01 0 0 1-3.018 3.019h-4.873c-.09 0-.182-.073-.182-.164v-5.691c0-.09.073-.182.164-.182h4.891a3.01 3.01 0 0 1 3.018 3.018Zm31.2 4.928h5.527c.2 0 .364-.164.364-.364v-1.218c0-.2-.164-.364-.364-.364H81.31c-.09 0-.182-.072-.182-.163v-5.655c0-.09.073-.182.164-.182h6.8c.2 0 .364-.163.364-.363V8.545c0-.2-.164-.363-.364-.363h-8.8c-.2 0-.364.163-.364.363v15.237c0 .2.164.363.364.363h1.473c.2 0 .363-.163.363-.363v-5.527c0-.11.073-.182.182-.182Z"
             }
           )

package/dist/esm/components/payfit-brand/PayFitPreprod.js

@@ -1,33 +1,33 @@
-import { jsxs as i, jsx as c } from "react/jsx-runtime";
-import { forwardRef as v } from "react";
-import m from "../../hooks/use-id.js";
-import { Badge as p } from "../badge/Badge.js";
-const f = v(
-  ({ label: l, description: a, env: t, ...d }, n) => {
-    const e = m(), r = `payfit-preprod-title-${e}`, h = `payfit-preprod-desc-${e}`, s = {
+import { jsxs as t, jsx as c } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import o from "../../hooks/use-id.js";
+import { Badge as f } from "../badge/Badge.js";
+const u = p(
+  ({ label: l, description: e, env: d, showOnlyMonogram: a = !1, ...s }, v) => {
+    const r = o(), h = `payfit-preprod-title-${r}`, i = `payfit-preprod-desc-${r}`, n = {
       focusable: !1,
       role: "img",
-      "aria-labelledby": r,
-      ...a && { "aria-describedby": h }
-    }, o = {
-      ...d,
-      ...s
+      "aria-labelledby": h,
+      ...e && { "aria-describedby": i }
+    }, m = {
+      ...s,
+      ...n
     };
-    return /* @__PURE__ */ i("span", { className: "uy:flex uy:gap-200 uy:items-center", children: [
-      /* @__PURE__ */ i(
+    return /* @__PURE__ */ t("span", { className: "uy:flex uy:gap-200 uy:items-center", children: [
+      /* @__PURE__ */ t(
         "svg",
         {
-          ...o,
+          ...m,
           xmlns: "http://www.w3.org/2000/svg",
-          viewBox: "0 0 104 32",
+          viewBox: a ? "0 0 32 32" : "0 0 104 32",
           fill: "none",
-          ref: n,
-          width: 104,
+          ref: v,
+          width: a ? 32 : 104,
           height: 32,
-          className: "uy:min-w-[104px]",
+          className: a ? "uy:min-w-[32px]" : "uy:min-w-[104px]",
           children: [
-            /* @__PURE__ */ c("title", { id: r, children: l }),
-            a && /* @__PURE__ */ c("desc", { id: h, children: a }),
+            /* @__PURE__ */ c("title", { id: h, children: l }),
+            e && /* @__PURE__ */ c("desc", { id: i, children: e }),
             /* @__PURE__ */ c(
               "path",
               {
@@ -37,7 +37,7 @@ const f = v(
                 clipRule: "evenodd"
               }
             ),
-            /* @__PURE__ */ c(
+            !a && /* @__PURE__ */ c(
               "path",
               {
                 className: "uy:fill-content-neutral",
@@ -47,11 +47,11 @@ const f = v(
           ]
         }
       ),
-      /* @__PURE__ */ c(p, { variant: "warning", children: t })
+      /* @__PURE__ */ c(f, { variant: "warning", children: d })
     ] });
   }
 );
-f.displayName = "PayFitBrandPreprod";
+u.displayName = "PayFitBrandPreprod";
 export {
-  f as PayFitBrandPreprod
+  u as PayFitBrandPreprod
 };

package/dist/esm/components/phone-number/PhoneNumberInput.d.ts

@@ -0,0 +1,67 @@
+import { InputProps as AriaInputProps } from 'react-aria-components';
+import { CountryIso2, PhoneInputProps } from 'react-international-phone';
+/**
+ * Interface for the PhoneNumberInput component props.
+ */
+export interface PhoneNumberInputProps extends Omit<AriaInputProps, 'value' | 'style' | 'className' | 'onChange' | 'disabled' | 'aria-label'>, Omit<PhoneInputProps, 'countries' | 'preferredCountries' | 'disableDialCodePrefill' | 'inputRefProp'> {
+    /**
+     * Function called when the phone number value changes.
+     * @param phone The formatted phone number.
+     */
+    onChange?: (phone: string) => void;
+    /**
+     * ISO2 code of the country selected by default.
+     */
+    defaultCountry?: CountryIso2;
+    /**
+     * Whether the input is in an invalid state.
+     * @default false
+     */
+    isInvalid?: boolean;
+    /**
+     * Whether the input is disabled.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Function called when the clear button is pressed.
+     */
+    onClearButtonPress?: () => void;
+    /**
+     * Accessibility label for the phone number input.
+     */
+    'aria-label': string;
+    /**
+     * Accessibility label for the country search input.
+     */
+    searchInputAriaLabel: string;
+}
+/**
+ * The `PhoneNumberInput` component displays a styled phone number input field that follows the Unity design system language. It supports multiple states out of the box and can be used as a controlled or uncontrolled component. It is also compatible with the `Form` and `FormField` component as a form control.
+ * @example
+ * ```tsx
+ * import { PhoneNumberInput } from '@payfit/unity-components'
+ * import { useState } from 'react'
+ *
+ * function Example() {
+ *   const [value, setValue] = useState('')
+ *
+ *   const handlePhoneChange = (phone: string) => {
+ *     setValue(phone)
+ *   }
+ *
+ *   return (
+ *     <PhoneNumberInput
+ *       aria-label="Phone number"
+ *       placeholder="+33 6 12 34 56 78"
+ *       value={value}
+ *       onChange={handlePhoneChange}
+ *       defaultCountry="fr"
+ *     />
+ *   )
+ * }
+ * ```
+ * @see Storybook docs: https://unity-components.payfit.io/?path=/docs/components-phonenumber--docs
+ */
+declare const PhoneNumberInput: import('react').ForwardRefExoticComponent<PhoneNumberInputProps & import('react').RefAttributes<HTMLDivElement>>;
+export { PhoneNumberInput };