@payfit/unity-components 2.46.13 → 2.46.14

package/dist/esm/components/password-field/parts/PasswordFieldDetails.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { PasswordRule } from '../types.js';
+interface PasswordFieldDetailsProps {
+    /** ID for the details element (used for aria-details) */
+    id?: string;
+    /** Title for the rules section */
+    title: ReactNode;
+    /** Array of password rules to display */
+    rules: PasswordRule[];
+}
+/**
+ * Displays the validation rules checklist for password requirements
+ * Renders a list of ValidationRuleItem components with a title
+ */
+export declare function PasswordFieldDetails({ id, title, rules, }: PasswordFieldDetailsProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/esm/components/password-field/parts/PasswordFieldDetails.js

@@ -0,0 +1,42 @@
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
+import { uyTv as d } from "@payfit/unity-themes";
+import { FormattedMessage as m } from "react-intl";
+import { Text as l } from "../../text/Text.js";
+import { ValidationRuleItem as u } from "./ValidationRuleItem.js";
+const c = d({
+  slots: {
+    root: ["uy:flex uy:flex-col uy:gap-75"],
+    list: ["uy:list-none uy:p-0 uy:m-0 uy:contents"]
+  }
+});
+function v({
+  id: e,
+  title: a,
+  rules: o
+}) {
+  if (o.length === 0)
+    return null;
+  const { root: i, list: r } = c();
+  return /* @__PURE__ */ n("div", { id: e, className: i(), children: [
+    /* @__PURE__ */ t(l, { variant: "h4", className: "uy:sr-only", children: a }),
+    /* @__PURE__ */ t(l, { variant: "bodySmall", color: "content.neutral", children: /* @__PURE__ */ t(
+      m,
+      {
+        id: "unity:component:password-field:rules-title",
+        defaultMessage: "Your password must have:"
+      }
+    ) }),
+    /* @__PURE__ */ t("ul", { className: r(), children: o.map((s) => /* @__PURE__ */ t(
+      u,
+      {
+        id: s.id,
+        label: s.label,
+        status: s.status
+      },
+      s.id
+    )) })
+  ] });
+}
+export {
+  v as PasswordFieldDetails
+};

package/dist/esm/components/password-field/parts/PasswordInput.d.ts

@@ -0,0 +1,25 @@
+import { InputProps as AriaInputProps } from 'react-aria-components/Input';
+export interface PasswordInputProps extends Omit<AriaInputProps, 'type' | 'style' | 'className'> {
+    /** Whether the field is required */
+    isRequired?: boolean;
+    /** Whether the field is in an invalid state */
+    isInvalid?: boolean;
+    /** Whether the field is in a loading state */
+    isLoading?: boolean;
+    /** Whether the field is disabled */
+    isDisabled?: boolean;
+    /** Whether the field is read-only */
+    isReadOnly?: boolean;
+    /** Whether to show the caps lock warning (default: true) */
+    showCapsLockWarning?: boolean;
+    /** Autocomplete hint for password managers */
+    autoComplete?: 'new-password' | 'current-password';
+    /** Clear button press handler */
+    onClearButtonPress?: () => void;
+}
+/**
+ * PasswordInput component with visibility toggle and caps lock detection
+ * Based on the Unity Input component but specialized for password fields
+ */
+declare const PasswordInput: import('react').ForwardRefExoticComponent<PasswordInputProps & import('react').RefAttributes<HTMLInputElement>>;
+export { PasswordInput };

package/dist/esm/components/password-field/parts/PasswordInput.js

@@ -0,0 +1,188 @@
+import { jsx as e, jsxs as p } from "react/jsx-runtime";
+import { forwardRef as P, useState as m, useEffect as V } from "react";
+import { Icon as b } from "@payfit/unity-icons";
+import { uyTv as A } from "@payfit/unity-themes";
+import { Input as B } from "react-aria-components/Input";
+import { useIntl as E } from "react-intl";
+import { Actionable as T } from "../../actionable/Actionable.js";
+import { useFieldA11yContext as j } from "../../form-field/TanstackFormField.context.js";
+import { CircularIconButton as w } from "../../icon-button/CircularIconButton.js";
+import { Spinner as L } from "../../spinner/Spinner.js";
+import { Tooltip as z } from "../../tooltip/Tooltip.js";
+import { useCapsLock as H } from "../hooks/use-caps-lock.js";
+const R = A({
+  slots: {
+    base: "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",
+    inputWrapper: "uy:flex uy:gap-50 uy:flex-grow uy:flex-nowrap uy:py-125 uy:sm:py-100 uy:px-150 uy:rounded-100 uy:sm:rounded-75 uy:max-w-full uy:justify-between",
+    input: "uy:w-full uy:flex-1 uy:outline-none uy:typography-body uy:placeholder:text-content-neutral-lowest uy:min-w-0 uy:max-w-full",
+    state: "uy:flex uy:gap-50 uy:items-center uy:shrink-0"
+  },
+  variants: {
+    isInvalid: {
+      true: {
+        base: "uy:border-border-form-error uy:bg-surface-form-error",
+        inputWrapper: "uy:bg-surface-form-error",
+        input: "uy:bg-surface-form-error",
+        state: "uy:text-content-form-error"
+      }
+    },
+    isReadOnly: {
+      true: {
+        base: "uy:border-border-form-disabled uy:bg-surface-form-disabled uy:cursor-not-allowed",
+        inputWrapper: "uy:bg-surface-form-disabled uy:cursor-not-allowed",
+        input: "uy:bg-surface-form-disabled uy:text-content-form-readonly uy:cursor-not-allowed"
+      }
+    },
+    isDisabled: {
+      true: {
+        base: "uy:border-border-form-disabled uy:bg-surface-form-disabled uy:cursor-not-allowed",
+        inputWrapper: "uy:bg-surface-form-disabled uy:text-content-form-disabled uy:cursor-not-allowed",
+        input: "uy:bg-surface-form-disabled uy:text-content-form-disabled uy:cursor-not-allowed"
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      isInvalid: !1,
+      isDisabled: !1,
+      isReadOnly: !1,
+      className: {
+        base: "uy:border-border-form-enabled uy:bg-surface-form-enabled",
+        inputWrapper: "uy:bg-surface-form-enabled",
+        input: "uy:text-content-form-enabled uy:bg-surface-form-enabled",
+        state: "uy:text-content-neutral-disabled"
+      }
+    }
+  ]
+}), q = P(
+  ({
+    isInvalid: l,
+    isLoading: i,
+    isDisabled: a,
+    isReadOnly: n,
+    showCapsLockWarning: g = !0,
+    autoComplete: d,
+    onClearButtonPress: h,
+    ...o
+  }, r) => {
+    const t = E(), [s, x] = m(!1), [c, f] = m(!1), y = j(), v = H();
+    V(() => {
+      c && r && "current" in r && r.current && (r.current.focus(), f(!1));
+    }, [c, r]);
+    const {
+      base: M,
+      inputWrapper: C,
+      input: I,
+      state: k
+    } = R({
+      isInvalid: !!l,
+      isReadOnly: !!n,
+      isDisabled: !!a
+    }), O = s ? "text" : "password", S = !(n || a), W = o.value && !i && !n && !a, F = d !== void 0, N = () => {
+      x((u) => !u), f(!0);
+    };
+    return delete o.isRequired, /* @__PURE__ */ e("div", { className: M(), children: /* @__PURE__ */ p("div", { className: C(), children: [
+      /* @__PURE__ */ e(
+        B,
+        {
+          "data-dd-privacy": "mask",
+          ...o,
+          ref: r,
+          id: o.id ?? y.inputId,
+          "aria-labelledby": y.labelId,
+          type: O,
+          autoComplete: F ? d : "off",
+          spellCheck: !1,
+          autoCapitalize: "off",
+          className: I(),
+          "aria-busy": i,
+          "aria-invalid": l,
+          readOnly: n,
+          disabled: a,
+          onFocus: (u) => {
+            o.onFocus?.(u);
+          },
+          onBlur: (u) => {
+            o.onBlur?.(u);
+          }
+        }
+      ),
+      /* @__PURE__ */ p("div", { className: k(), children: [
+        i && /* @__PURE__ */ e(
+          L,
+          {
+            color: "primary",
+            size: "small",
+            label: t.formatMessage({
+              id: "unity:component:common:loading:label",
+              defaultMessage: "Loading..."
+            })
+          }
+        ),
+        g && v && /* @__PURE__ */ e("div", { role: "status", "aria-live": "polite", children: /* @__PURE__ */ e(
+          z,
+          {
+            title: t.formatMessage({
+              id: "unity:component:password-field:caps-lock:tooltip",
+              defaultMessage: "Caps Lock is on"
+            }),
+            children: /* @__PURE__ */ e(T, { children: /* @__PURE__ */ e(
+              b,
+              {
+                src: "ArrowFatLineUpOutlined",
+                color: "content.neutral.low",
+                role: "presentation"
+              }
+            ) })
+          }
+        ) }),
+        l && /* @__PURE__ */ e(
+          b,
+          {
+            src: "WarningCircleOutlined",
+            color: "content.form.invalid",
+            alt: t.formatMessage({
+              id: "unity:component:form-field:form-input:error:alt",
+              defaultMessage: "Error"
+            })
+          }
+        ),
+        W && /* @__PURE__ */ e(
+          w,
+          {
+            title: t.formatMessage({
+              id: "unity:component:common:clear:title",
+              defaultMessage: "Clear"
+            }),
+            color: "content.neutral.low",
+            icon: "CloseOutlined",
+            onPress: () => {
+              h?.();
+            }
+          }
+        ),
+        S && /* @__PURE__ */ e(
+          w,
+          {
+            title: t.formatMessage({
+              id: s ? "unity:component:password-field:hide-password:title" : "unity:component:password-field:show-password:title",
+              defaultMessage: s ? "Hide password" : "Show password"
+            }),
+            "aria-label": t.formatMessage({
+              id: s ? "unity:component:password-field:hide-password:label" : "unity:component:password-field:show-password:label",
+              defaultMessage: s ? "Hide password" : "Show password"
+            }),
+            color: "content.neutral.low",
+            icon: s ? "EyeSlashOutlined" : "EyeOutlined",
+            onPress: N,
+            isDisabled: a
+          }
+        )
+      ] })
+    ] }) });
+  }
+);
+q.displayName = "PasswordInput";
+export {
+  q as PasswordInput
+};

package/dist/esm/components/password-field/parts/ValidationRuleItem.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { PasswordRuleStatus } from '../types.js';
+interface ValidationRuleItemProps {
+    /** Unique identifier for the rule */
+    id: string;
+    /** Label to display for the rule */
+    label: ReactNode;
+    /** Current status of the rule */
+    status: PasswordRuleStatus;
+}
+/**
+ * Individual validation rule item with status icon
+ * Displays a check circle icon that changes based on the rule's status
+ */
+export declare function ValidationRuleItem({ id, label, status, }: ValidationRuleItemProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/password-field/parts/ValidationRuleItem.js

@@ -0,0 +1,45 @@
+import { jsx as r, jsxs as s } from "react/jsx-runtime";
+import { useMemo as d } from "react";
+import { Icon as a } from "@payfit/unity-icons";
+import { uyTv as p } from "@payfit/unity-themes";
+import { useIntl as f } from "react-intl";
+const y = p({
+  slots: {
+    root: ["uy:flex uy:items-center uy:gap-50 uy:typography-body-small"],
+    label: ["uy:text-content-neutral"]
+  }
+});
+function k({
+  id: l,
+  label: e,
+  status: c
+}) {
+  const o = f(), t = c === "checked", i = d(() => t ? /* @__PURE__ */ r(a, { src: "CheckCircleFilled", color: "content.success", size: 20 }) : /* @__PURE__ */ r(a, { src: "CheckCircleOutlined", color: "content.neutral", size: 20 }), [t]), n = t ? o.formatMessage({
+    id: "unity:component:password-field:rule-status:passed",
+    defaultMessage: "Passed"
+  }) : o.formatMessage({
+    id: "unity:component:password-field:rule-status:not-passed",
+    defaultMessage: "Not passed"
+  }), { root: u, label: m } = y();
+  return /* @__PURE__ */ s(
+    "li",
+    {
+      className: u(),
+      "aria-label": `${n}: ${typeof e == "string" ? e : ""}`,
+      children: [
+        i,
+        /* @__PURE__ */ s("span", { className: m(), children: [
+          /* @__PURE__ */ s("span", { className: "uy:sr-only", children: [
+            n,
+            ": "
+          ] }),
+          e
+        ] })
+      ]
+    },
+    l
+  );
+}
+export {
+  k as ValidationRuleItem
+};

package/dist/esm/components/password-field/types.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+/** Status of a password rule - controlled by consumer */
+export type PasswordRuleStatus = 'unchecked' | 'checked';
+/** A display-only rule item for the password requirements list */
+export interface PasswordRule {
+    /** Unique identifier for the rule */
+    id: string;
+    /** Label displayed in the rules list */
+    label: ReactNode;
+    /** Current status - controlled by the consumer based on their validation logic */
+    status: PasswordRuleStatus;
+}

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

@@ -0,0 +1,26 @@
+export type PayFitBrandProps = {
+    /**
+     * The color variant of the brand. It is "original" by default.
+     */
+    color?: 'original' | 'dark' | 'light';
+    /**
+     * The text label for the brand. Defaults to "PayFit Logo".
+     */
+    label?: string;
+    /**
+     * The description for the brand for screen readers. Optional.
+     */
+    description?: string;
+    /**
+     * 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.
+ */
+export declare const PayFitBrand: import('react').ForwardRefExoticComponent<PayFitBrandProps & import('react').RefAttributes<SVGSVGElement>>;

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

@@ -0,0 +1,84 @@
+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: "",
+    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",
+        logotype: "uy:fill-content-primary"
+      },
+      dark: {
+        monogram: "uy:fill-content-neutral",
+        logotype: "uy:fill-content-neutral"
+      },
+      light: {
+        monogram: "uy:fill-content-inverted",
+        logotype: "uy:fill-content-inverted"
+      }
+    }
+  },
+  defaultVariants: {
+    color: "original"
+  }
+}), 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": l }
+    }, y = {
+      ...i,
+      ...v
+    };
+    return /* @__PURE__ */ p(
+      "svg",
+      {
+        ...y,
+        ref: s,
+        fill: "none",
+        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: l, children: a }),
+          /* @__PURE__ */ c(
+            "path",
+            {
+              fillRule: "evenodd",
+              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"
+            }
+          ),
+          !e && /* @__PURE__ */ c(
+            "path",
+            {
+              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"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Z.displayName = "PayFitBrand";
+export {
+  Z as PayFitBrand
+};

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

@@ -0,0 +1,10 @@
+import { PayFitBrandProps } from './PayFitBrand.js';
+/**
+ * The `PayFitBrandPreprod` component represents the PayFit brand used in pre-production environments, such as staging and development.
+ */
+export declare const PayFitBrandPreprod: import('react').ForwardRefExoticComponent<Omit<PayFitBrandProps, "color" | "width"> & {
+    /**
+     * The brand's environment, shown in the right badge.
+     */
+    env: string;
+} & import('react').RefAttributes<SVGSVGElement>>;

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

@@ -0,0 +1,57 @@
+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": h,
+      ...e && { "aria-describedby": i }
+    }, m = {
+      ...s,
+      ...n
+    };
+    return /* @__PURE__ */ t("span", { className: "uy:flex uy:gap-200 uy:items-center", children: [
+      /* @__PURE__ */ t(
+        "svg",
+        {
+          ...m,
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: a ? "0 0 32 32" : "0 0 104 32",
+          fill: "none",
+          ref: v,
+          width: a ? 32 : 104,
+          height: 32,
+          className: a ? "uy:min-w-[32px]" : "uy:min-w-[104px]",
+          children: [
+            /* @__PURE__ */ c("title", { id: h, children: l }),
+            e && /* @__PURE__ */ c("desc", { id: i, children: e }),
+            /* @__PURE__ */ c(
+              "path",
+              {
+                fillRule: "evenodd",
+                className: "uy:fill-content-warning",
+                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"
+              }
+            ),
+            !a && /* @__PURE__ */ c(
+              "path",
+              {
+                className: "uy:fill-content-neutral",
+                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"
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ c(f, { variant: "warning", children: d })
+    ] });
+  }
+);
+u.displayName = "PayFitBrandPreprod";
+export {
+  u as PayFitBrandPreprod
+};

package/dist/esm/components/payfit-brand/figma/PayFitBrand.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/phone-number/PhoneNumberInput.d.ts

@@ -0,0 +1,67 @@
+import { InputProps as AriaInputProps } from 'react-aria-components/Input';
+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 };