@payfit/unity-components 2.0.0 → 2.1.4

package/dist/esm/components/number-input/NumberInput.js

@@ -1,32 +1,32 @@
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { jsxs as t, jsx as r } from "react/jsx-runtime";
 import { forwardRef as k } from "react";
 import { uyTv as z } from "@payfit/unity-themes";
 import { NumberField as F, Group as G, Input as T } from "react-aria-components";
 import { Icon as W } from "../icon/Icon.js";
 import "@payfit/unity-icons";
 import { useIntl as q } from "react-intl";
-import { CircularIconButton as i } from "../icon-button/CircularIconButton.js";
+import { CircularIconButton as s } from "../icon-button/CircularIconButton.js";
 import { Spinner as A } from "../spinner/Spinner.js";
 const H = z({
   slots: {
     base: [
-      "uy:group uy:flex uy:h-500 uy:border uy:border-solid uy:rounded-75",
+      "uy:group uy:flex uy:h-5.5 uy:sm:h-500 uy:border uy:border-solid uy:rounded-100 uy:sm:rounded-75",
       "uy:focus-within:outline-none uy:focus-within:ring-2 uy:focus-within:ring-utility-focus-ring uy:focus-within:ring-offset-2",
       "uy:active:border-border-form-active"
     ],
     wrapper: [
-      "uy:flex uy:gap-50 uy:flex-grow uy:flex-nowrap uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:rounded-75 uy:max-w-full uy:justify-between uy:items-center"
+      "uy:flex uy:gap-50 uy:flex-grow uy:flex-nowrap uy:pt-125 uy:sm:pt-100 uy:pb-125 uy:sm:pb-100 uy:pl-150 uy:pr-150 uy:rounded-100 uy:sm:rounded-75 uy:max-w-full uy:justify-between uy:items-center"
     ],
     input: [
       "uy:w-full uy:flex-1 uy:outline-none uy:typography-body uy:min-w-0 uy:max-w-full",
       "uy:placeholder:text-content-neutral-lowest"
     ],
     prefix: [
-      "uy:flex-grow-0 uy:content-center uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:border-r uy:border-solid uy:rounded-l-75",
+      "uy:flex-grow-0 uy:content-center uy:pt-125 uy:sm:pt-100 uy:pb-125 uy:sm:pb-100 uy:pl-150 uy:pr-150 uy:border-r uy:border-solid uy:rounded-l-100 uy:sm:rounded-l-75",
       "uy:active:border-border-form-active"
     ],
     suffix: [
-      "uy:flex-grow-0 uy:content-center uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:border-l uy:border-solid uy:rounded-r-75",
+      "uy:flex-grow-0 uy:content-center uy:pt-125 uy:sm:pt-100 uy:pb-125 uy:sm:pb-100 uy:pl-150 uy:pr-150 uy:border-l uy:border-solid uy:rounded-r-100 uy:sm:rounded-r-75",
       "uy:active:border-border-form-active"
     ],
     state: [
@@ -83,23 +83,23 @@ const H = z({
   }
 }), J = k(
   ({
-    withControls: s = !1,
+    withControls: i = !1,
     defaultValue: u,
     formatOptions: p,
-    isDisabled: b,
-    isInvalid: f,
+    isDisabled: y,
+    isInvalid: b,
     isLoading: a,
     isReadOnly: d,
     isRequired: g,
     maxValue: n,
     minValue: l,
-    prefix: y,
+    prefix: f,
     onBlur: x,
     onChange: w,
     onClearButtonPress: v,
     step: h,
     suffix: m,
-    value: r,
+    value: e,
     ...N
   }, c) => {
     const {
@@ -110,20 +110,20 @@ const H = z({
       suffix: E,
       state: O,
       controls: S
-    } = H({ isReadOnly: d }), o = q(), B = r !== void 0 && !isNaN(r), D = u !== void 0 && !isNaN(u), P = (B || D) && !s && !a && !d && !b;
+    } = H({ isReadOnly: d }), o = q(), B = e !== void 0 && !isNaN(e), D = u !== void 0 && !isNaN(u), P = (B || D) && !i && !a && !d && !y;
     return /* @__PURE__ */ t(
       F,
       {
         ref: c,
         className: M(),
-        value: r,
+        value: e,
         defaultValue: u,
         minValue: l,
         maxValue: n,
         step: h,
-        isDisabled: b,
+        isDisabled: y,
         isReadOnly: d,
-        isInvalid: f,
+        isInvalid: b,
         isRequired: g,
         "aria-busy": a,
         onChange: w,
@@ -131,11 +131,11 @@ const H = z({
         onBlur: x,
         ...N,
         children: [
-          y ? /* @__PURE__ */ e("span", { className: j(), children: y }) : null,
+          f ? /* @__PURE__ */ r("span", { className: j(), children: f }) : null,
           /* @__PURE__ */ t(G, { className: I(), children: [
-            /* @__PURE__ */ e(T, { ref: c, className: C() }),
+            /* @__PURE__ */ r(T, { ref: c, className: C() }),
             /* @__PURE__ */ t("div", { className: O(), children: [
-              a && /* @__PURE__ */ e(
+              a && /* @__PURE__ */ r(
                 A,
                 {
                   color: "inherit",
@@ -146,7 +146,7 @@ const H = z({
                   })
                 }
               ),
-              f && /* @__PURE__ */ e(
+              b && /* @__PURE__ */ r(
                 W,
                 {
                   src: "WarningCircleOutlined",
@@ -157,8 +157,8 @@ const H = z({
                   })
                 }
               ),
-              P && /* @__PURE__ */ e(
-                i,
+              P && /* @__PURE__ */ r(
+                s,
                 {
                   title: o.formatMessage({
                     id: "unity:component:common:clear:title",
@@ -172,27 +172,29 @@ const H = z({
                 }
               )
             ] }),
-            s && /* @__PURE__ */ t("div", { className: S(), children: [
-              /* @__PURE__ */ e(
-                i,
+            i && /* @__PURE__ */ t("div", { className: S(), children: [
+              /* @__PURE__ */ r(
+                s,
                 {
                   asElement: "button",
                   icon: "MinusOutlined",
                   slot: "decrement",
-                  isDisabled: l !== void 0 && r === l,
+                  color: "content.neutral",
+                  isDisabled: l !== void 0 && e === l,
                   title: o.formatMessage({
                     id: "unity:component:form-field:number-input:decrement:title",
                     defaultMessage: "decrement"
                   })
                 }
               ),
-              /* @__PURE__ */ e(
-                i,
+              /* @__PURE__ */ r(
+                s,
                 {
                   asElement: "button",
                   icon: "PlusOutlined",
                   slot: "increment",
-                  isDisabled: n !== void 0 && r === n,
+                  color: "content.neutral",
+                  isDisabled: n !== void 0 && e === n,
                   title: o.formatMessage({
                     id: "unity:component:form-field:number-input:increment:title",
                     defaultMessage: "increment"
@@ -201,7 +203,7 @@ const H = z({
               )
             ] })
           ] }),
-          m ? /* @__PURE__ */ e("span", { className: E(), children: m }) : null
+          m ? /* @__PURE__ */ r("span", { className: E(), children: m }) : null
         ]
       }
     );

package/dist/esm/components/number-input/TanstackNumberInput.d.ts

@@ -0,0 +1,58 @@
+import { NumberProps } from './NumberInput.js';
+/**
+ * Props for the TanstackNumberInput component.
+ *
+ * This type mirrors {@link NumberProps} from the Unity NumberInput, while omitting
+ * the properties that are managed by the TanStack Form field context:
+ * - `name` — provided by <form.AppField name="…"/>
+ * - `value` and `defaultValue` — driven by the form field state
+ * - `isInvalid` — derived from the field meta (touched + !isValid)
+ *
+ * You can still pass all other visual/behavioral props supported by the base
+ * NumberInput (e.g. `withControls`, `minValue`, `maxValue`, `step`, `prefix`, `suffix`,
+ * `formatOptions`, `isReadOnly`, `isDisabled`, `isLoading`, etc.).
+ */
+export type TanstackNumberInputProps = Omit<NumberProps, 'name' | 'value' | 'defaultValue' | 'isInvalid'>;
+/**
+ * TanstackNumberInput is a controlled numeric input wired to a TanStack Form field.
+ * It composes the Unity {@link NumberInput} and synchronizes value, invalid state,
+ * and events through the TanStack field API.
+ *
+ * Behavior
+ * - Value is controlled by the form field state (`field.state.value`).
+ * - Invalid state is derived from `meta`: when the field is touched and invalid,
+ *   the underlying input receives `isInvalid` and proper a11y attributes.
+ * - `onChange` forwards the new numeric value to the form via `field.handleChange`.
+ * - `onBlur` triggers `field.handleBlur`.
+ * - The clear action sets the value to `NaN` by default, then calls an optional
+ *   `onClearButtonPress` handler.
+ *
+ * Accessibility
+ * - `aria-labelledby`, `aria-describedby` (helper and feedback), and `aria-details`
+ *   are provided via the TanstackFormField a11y context.
+ *
+ * Example:
+ * ```tsx
+ * import { useTanstackUnityForm } from "@/hooks/use-tanstack-form"
+ * import { TanstackNumberInput } from "@/components/number-input/TanstackNumberInput"
+ *
+ * function ExampleField() {
+ *   const form = useTanstackUnityForm<{ amount: number }>({ validators: {} })
+ *   return (
+ *     <form.AppForm>
+ *       <form.Form>
+ *         <form.AppField name="amount">
+ *           {() => <TanstackNumberInput aria-label="Amount" withControls />}
+ *         </form.AppField>
+ *       </form.Form>
+ *     </form.AppForm>
+ *   )
+ * }
+ * ```
+ * @see NumberInput for the underlying visual component and props
+ * @see TanstackFormField for the enclosing a11y wiring
+ * @see useTanstackUnityForm for creating the form context
+ * @returns A Unity NumberInput controlled by the TanStack form field
+ */
+declare const TanstackNumberInput: import('react').ForwardRefExoticComponent<TanstackNumberInputProps & import('react').RefAttributes<HTMLInputElement>>;
+export { TanstackNumberInput };

package/dist/esm/components/number-input/TanstackNumberInput.js

@@ -0,0 +1,38 @@
+import { jsx as c } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import { useFieldContext as b } from "../../hooks/tanstack-form-context.js";
+import { useFieldA11yContext as f } from "../form-field/TanstackFormField.context.js";
+import { NumberInput as I } from "./NumberInput.js";
+const h = p(
+  ({ onClearButtonPress: o, onBlur: n, onChange: i, isReadOnly: l, isDisabled: d, ...s }, u) => {
+    const e = b(), t = f(), m = e.state.meta.isTouched && !e.state.meta.isValid, r = [t.helperTextId, t.feedbackTextId].filter(Boolean).join(" ");
+    return /* @__PURE__ */ c(
+      I,
+      {
+        ...s,
+        ref: u,
+        id: t.inputId,
+        value: e.state.value,
+        onChange: (a) => {
+          e.handleChange(a), i?.(a);
+        },
+        onBlur: (a) => {
+          e.handleBlur(), n?.(a);
+        },
+        onClearButtonPress: () => {
+          e.setValue(NaN), o?.();
+        },
+        isReadOnly: l,
+        isDisabled: d,
+        isInvalid: m,
+        "aria-labelledby": t.labelId,
+        "aria-describedby": r.length > 0 ? r : void 0,
+        "aria-details": t.contextualLinkId
+      }
+    );
+  }
+);
+h.displayName = "TanstackNumberInput";
+export {
+  h as TanstackNumberInput
+};

package/dist/esm/components/page/Page.js

@@ -1,7 +1,7 @@
-import { jsx as y } from "react/jsx-runtime";
+import { jsx as e } from "react/jsx-runtime";
 import { forwardRef as m } from "react";
-import { uyTv as t } from "@payfit/unity-themes";
-const o = t({
+import { uyTv as o } from "@payfit/unity-themes";
+const t = o({
   base: "uy:min-h-dvh uy:flex uy:flex-col uy:gap-400",
   variants: {
     variant: {
@@ -9,7 +9,8 @@ const o = t({
         "uy:px-200 uy:py-300 uy:md:p-300 uy:lg:p-500",
         // a tiny margin left so the shadow is visible
         "uy:md:ml-100",
-        "uy:bg-surface-neutral uy:md:border uy:md:border-solid uy:md:border-border-neutral uy:border-r-0 uy:md:rounded-tl-400 uy:md:rounded-bl-400 uy:md:shadow-raising"
+        "uy:bg-surface-neutral uy:md:border uy:md:border-solid uy:md:border-border-neutral-low uy:border-r-0 uy:md:rounded-l-300",
+        "uy:md:shadow-[-1px_-1px_2px_-1px_var(--uy-color-utility-shadow-raising)]"
       ],
       legacy__midnight: [
         "uy:bg-transparent",
@@ -22,14 +23,14 @@ const o = t({
     variant: "default"
   }
 }), l = m(
-  ({ children: r, variant: a, ...d }, u) => {
-    const e = o({ variant: a });
-    return /* @__PURE__ */ y(
+  ({ children: r, variant: a, ...u }, d) => {
+    const y = t({ variant: a });
+    return /* @__PURE__ */ e(
       "main",
       {
-        ...d,
-        ref: u,
-        className: e,
+        ...u,
+        ref: d,
+        className: y,
         "data-dd-privacy": "allow",
         "data-unity-page": a,
         children: r
@@ -40,5 +41,5 @@ const o = t({
 l.displayName = "Page";
 export {
   l as Page,
-  o as page
+  t as page
 };

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

@@ -1,37 +1,37 @@
 import { jsx as m } from "react/jsx-runtime";
-import { forwardRef as h, useRef as v, useCallback as o } from "react";
-import { uyTv as x } from "@payfit/unity-themes";
-import { Link as P } from "react-aria-components";
-import { useIntl as k } from "react-intl";
-import { usePaginationContext as w } from "../PaginationContext.js";
-const R = x({
+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-disabled uy:data-[disabled]:cursor-not-allowed",
-    "uy:hover:text-content-neutral-hover uy:hover:bg-surface-neutral-hover",
-    "uy:active:text-content-neutral-pressed uy:active:bg-surface-neutral-pressed uy:data-[pressed]:text-content-neutral-pressed uy:data-[pressed]:bg-surface-neutral-pressed",
-    "uy:aria-[current=page]:bg-surface-neutral-active",
+    "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 = h(
-  ({ isCurrent: r, isDisabled: l, value: t, onPress: c, ...i }, n) => {
-    const y = k(), { currentPage: a, onKeyDown: f, pageRefs: s, onPageChange: u } = w(), d = v(null), g = o(
+}), 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 ? s.current.set(t, e) : s.current.delete(t), typeof n == "function" ? n(e) : n && (n.current = e);
+        d.current = e, e ? i.current.set(t, e) : i.current.delete(t), typeof n == "function" ? n(e) : n && (n.current = e);
       },
-      [t, s, n]
-    ), b = r ?? a === t, p = o(() => {
-      if (!i.href) {
-        const e = t > a ? 1 : -1;
-        u(t, a, e);
+      [t, i, n]
+    ), b = r ?? s === t, p = u(() => {
+      if (!a.href) {
+        const e = t > s ? 1 : -1;
+        o(t, s, e);
       }
-    }, [t, a, u, i.href]);
+    }, [t, s, o, a.href]);
     return /* @__PURE__ */ m(
-      P,
+      x,
       {
-        ...i,
+        ...a,
         ref: g,
         className: R(),
         isDisabled: l,

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

@@ -1,23 +1,23 @@
-import { jsx as n } from "react/jsx-runtime";
+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 h } from "../../icon/Icon.js";
-import { Tooltip as w } from "../../tooltip/Tooltip.js";
+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-hover",
-    "uy:active:text-content-neutral-pressed uy:active:bg-surface-neutral-pressed",
-    "uy:data-[pressed]:text-content-neutral-pressed uy:data-[pressed]:bg-surface-neutral-pressed",
-    "uy:data-[disabled]:text-content-neutral-disabled uy:data-[disabled]:bg-transparent 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=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: o, onPress: s, ...u }, l) => {
+  ({ isDisabled: i, href: n, onPress: s, ...u }, l) => {
     const a = v(), {
       onKeyDown: c,
       currentPage: e,
@@ -37,13 +37,13 @@ const N = b({
     ), p = (m) => {
       c(m);
     }, f = () => {
-      !o && (r === -1 || e < r) && y(e + 1, e, 1);
+      !n && (r === -1 || e < r) && y(e + 1, e, 1);
     };
-    return /* @__PURE__ */ n(w, { title: t, children: /* @__PURE__ */ n(
+    return /* @__PURE__ */ o(h, { title: t, children: /* @__PURE__ */ o(
       x,
       {
         ref: l,
-        href: o,
+        href: n,
         className: N(),
         isDisabled: i,
         onPress: s ?? f,
@@ -51,8 +51,8 @@ const N = b({
         "aria-description": d,
         onKeyDown: p,
         ...u,
-        children: /* @__PURE__ */ n(
-          h,
+        children: /* @__PURE__ */ o(
+          w,
           {
             src: "CaretRightOutlined",
             size: 20,

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

@@ -3,20 +3,20 @@ 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 h } from "../../icon/Icon.js";
-import { Tooltip as w } from "../../tooltip/Tooltip.js";
+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-hover",
-    "uy:active:text-content-neutral-pressed uy:active:bg-surface-neutral-pressed",
-    "uy:data-[pressed]:text-content-neutral-pressed uy:data-[pressed]:bg-surface-neutral-pressed",
+    "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: i, ...s }, u) => {
+}), D = m(({ isDisabled: a, href: n, onPress: s, ...i }, u) => {
   const r = b(), {
     onKeyDown: l,
     currentPage: e,
@@ -37,20 +37,20 @@ const P = g({
   }, p = () => {
     !n && e > 1 && c(e - 1, e, -1);
   };
-  return /* @__PURE__ */ o(w, { title: t, children: /* @__PURE__ */ o(
+  return /* @__PURE__ */ o(h, { title: t, children: /* @__PURE__ */ o(
     v,
     {
       ref: u,
       href: n,
       className: P(),
       isDisabled: a,
-      onPress: i ?? p,
+      onPress: s ?? p,
       "aria-label": t,
       "aria-description": y,
       onKeyDown: d,
-      ...s,
+      ...i,
       children: /* @__PURE__ */ o(
-        h,
+        w,
         {
           src: "CaretLeftOutlined",
           size: 20,

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"
             }
           )