@payfit/unity-components 2.5.4 → 2.5.6

package/dist/esm/components/form-field/parts/TanstackFormFeedbackText.js

@@ -1,16 +1,16 @@
 import { jsx as n } from "react/jsx-runtime";
-import { forwardRef as l } from "react";
-import { useStore as s } from "@tanstack/react-form";
+import { forwardRef as s } from "react";
+import { useStore as l } from "@tanstack/react-form";
 import { useFieldContext as c } from "../../../hooks/tanstack-form-context.js";
 import { Text as f } from "../../text/Text.js";
 import { useFieldA11yContext as u } from "../TanstackFormField.context.js";
-const x = l((r, t) => {
-  const a = c(), i = u(), { errors: o, invalid: d, isTouched: m } = s(a.store, (e) => ({
-    errors: e.meta.errors,
-    invalid: !e.meta.isValid,
-    isTouched: e.meta.isTouched
+const p = s((r, t) => {
+  const a = c(), i = u(), { errors: e, invalid: d, isTouched: m } = l(a.store, (o) => ({
+    errors: o.meta.errors,
+    invalid: !o.meta.isValid,
+    isTouched: o.meta.isTouched
   }));
-  return !m || !d || o.length === 0 ? null : /* @__PURE__ */ n(
+  return !m || !d || e.length === 0 ? null : /* @__PURE__ */ n(
     f,
     {
       "data-dd-privacy": "allow",
@@ -22,11 +22,11 @@ const x = l((r, t) => {
       variant: "bodySmallStrong",
       color: "content.form.invalid",
       asElement: "span",
-      children: o[0].message
+      children: typeof e[0] == "object" && "message" in e[0] ? e[0].message : e[0]
     }
   );
 });
-x.displayName = "TanstackFormFeedbackText";
+p.displayName = "TanstackFormFeedbackText";
 export {
-  x as TanstackFormFeedbackText
+  p as TanstackFormFeedbackText
 };

package/dist/esm/components/form-field/parts/TanstackFormHelperText.js

@@ -1,21 +1,22 @@
-import { jsx as a } from "react/jsx-runtime";
+import { jsx as o } from "react/jsx-runtime";
 import { forwardRef as l } from "react";
 import { Text as m } from "../../text/Text.js";
 import { useFieldA11yContext as n } from "../TanstackFormField.context.js";
-const d = l(({ children: e, ...t }, r) => {
-  const o = n();
-  return /* @__PURE__ */ a(
+const d = l(({ children: t, ...e }, a) => {
+  const r = n();
+  return /* @__PURE__ */ o(
     m,
     {
       "data-dd-privacy": "allow",
-      ...t,
-      id: o.helperTextId || t.id,
+      ...e,
+      id: r.helperTextId || e.id,
       "data-unity-slot": "form-field-helper-text",
       variant: "bodySmall",
       asElement: "span",
       color: "content.neutral.low",
-      ref: r,
-      children: e
+      className: "uy:leading-[1]!",
+      ref: a,
+      children: t
     }
   );
 });

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

@@ -0,0 +1,113 @@
+import { ReactNode } from 'react';
+import { LabelProps } from '../label/Label.js';
+import { PasswordInputProps } from './parts/PasswordInput.js';
+import { PasswordRule } from './types.js';
+export interface TanstackPasswordFieldProps extends Omit<PasswordInputProps, 'name' | 'value' | 'defaultValue' | 'isInvalid'>, Pick<LabelProps, 'isRequired' | 'requiredVariant'> {
+    /** Label for the password field */
+    label: string;
+    /** Helper text below the label */
+    helperText?: ReactNode;
+    /** Title for the validation rules section (default: "Your password must have:") */
+    rulesTitle?: ReactNode;
+    /** Array of password rules to display - status is controlled by consumer */
+    rules?: PasswordRule[];
+    /** A contextual link to display below the text field. */
+    contextualLink?: ReactNode;
+    /** Callback function to be called when the clear button is pressed */
+    onClearButtonPress?: () => void;
+}
+/**
+ * The `TanstackPasswordField` component provides a complete password input solution with visibility toggle,
+ * validation rules display, and caps lock detection, fully integrated with TanStack Form.
+ *
+ * Use this component to collect password input with real-time validation feedback. The component displays
+ * a list of password requirements that update dynamically as users type, helping them create passwords
+ * that meet your security criteria.
+ *
+ * The component acts as a **presentation layer only**. Define all validation logic externally using
+ * TanStack Form validators, then pass the evaluated rule statuses to the component for display.
+ *
+ * **Key features:**
+ * - Password visibility toggle for showing/hiding entered text
+ * - Real-time validation rules display with checked/unchecked visual feedback
+ * - Caps Lock warning indicator to prevent accidental input mistakes
+ * - Full accessibility support with ARIA labels and keyboard navigation
+ * - Integration with TanStack Form for validation and state management
+ * - Contextual link support for "Forgot password?" or similar actions
+ *
+ * **Important props:**
+ * - `label` — Required text label for the field
+ * - `rules` — Array of password rules with their validation status (you control the logic)
+ * - `helperText` — Optional helper text displayed below the label
+ * - `rulesTitle` — Custom title for the rules section (defaults to "Your password must have:")
+ * - `showCapsLockWarning` — Enable/disable caps lock detection (default: true)
+ * - `autoComplete` — Browser autocomplete hint: 'current-password' or 'new-password'
+ * - `contextualLink` — Optional link element (e.g., "Forgot password?")
+ * @param {TanstackPasswordFieldProps} props - Component properties
+ * @example
+ * ```tsx
+ * import { useTanstackUnityForm, fieldRevalidateLogic } from '@payfit/unity-components'
+ * import { z } from 'zod'
+ *
+ * function PasswordForm() {
+ *   const ruleDefs = [
+ *     {
+ *       id: 'length',
+ *       label: 'At least 10 characters',
+ *       validate: (value: string) => value.length >= 10
+ *     }
+ *   ]
+ *
+ *   const form = useTanstackUnityForm({
+ *     defaultValues: { password: '' },
+ *     validationLogic: fieldRevalidateLogic({
+ *       whenPristine: 'blur',
+ *       whenDirty: 'change',
+ *       fields: ['password'],
+ *     })
+ *   })
+ *
+ *   return (
+ *     <form.AppForm>
+ *       <form.Form>
+ *         <form.AppField name="password">
+ *           {(field) => {
+ *             const rules = ruleDefs.map(rule => ({
+ *               id: rule.id,
+ *               label: rule.label,
+ *               status: rule.validate(field.state.value) ? 'checked' : 'unchecked'
+ *             }))
+ *
+ *             return (
+ *               <field.PasswordField
+ *                 label="Create Password"
+ *                 rules={rules}
+ *                 isRequired
+ *               />
+ *             )
+ *           }}
+ *         </form.AppField>
+ *       </form.Form>
+ *     </form.AppForm>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Access the component via `<field.PasswordField>` within `<form.AppField name="...">` scope
+ * - Do not pass `name`, `value`, or `isInvalid` props — these are managed by TanStack Form context
+ * - The `rules` prop is purely presentational — compute rule statuses in your component and pass them in
+ * - For async validation (e.g., checking password breaches), use TanStack Form's `onDynamicAsync` validator
+ * - Use `autoComplete="current-password"` for login forms and `autoComplete="new-password"` for registration
+ * - **New to password fields?** See the step-by-step tutorial in the developer docs
+ * - **Want to understand the architecture?** Read the validation guide in the developer docs
+ * @see {@link TanstackPasswordFieldProps} for all available props
+ * @see {@link useTanstackUnityForm} for form setup and validation
+ * @see Tutorial: Adding Password Field with Validation in the developer docs
+ * @see Guide: Understanding Password Field Validation in the developer docs
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/password-field GitHub}
+ * @see Design specs in {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library Figma}
+ * @see Design docs at {@link https://www.payfit.design/ Payfit.design}
+ * @see Developer docs at {@link https://unity-components.payfit.io/?path=/docs/forms-reference-passwordfield--docs unity-components.payfit.io}
+ */
+declare const TanstackPasswordField: import('react').ForwardRefExoticComponent<TanstackPasswordFieldProps & import('react').RefAttributes<HTMLInputElement>>;
+export { TanstackPasswordField };

package/dist/esm/components/password-field/TanstackPasswordField.js

@@ -0,0 +1,83 @@
+import { jsxs as I, jsx as e } from "react/jsx-runtime";
+import { forwardRef as B } from "react";
+import { useIntl as R } from "react-intl";
+import { useFieldContext as b } from "../../hooks/tanstack-form-context.js";
+import { TanstackFormFeedbackText as j } from "../form-field/parts/TanstackFormFeedbackText.js";
+import { TanstackFormHelperText as y } from "../form-field/parts/TanstackFormHelperText.js";
+import { TanstackFormLabel as M } from "../form-field/parts/TanstackFormLabel.js";
+import { TanstackFormField as V } from "../form-field/TanstackFormField.js";
+import { PasswordFieldDetails as D } from "./parts/PasswordFieldDetails.js";
+import { PasswordInput as H } from "./parts/PasswordInput.js";
+function L({
+  label: r,
+  helperText: s,
+  rulesTitle: i,
+  rules: o,
+  contextualLink: l,
+  isRequired: n,
+  requiredVariant: m,
+  isLoading: d,
+  isDisabled: c,
+  isReadOnly: u,
+  showCapsLockWarning: f,
+  autoComplete: p,
+  onBlur: F,
+  onFocus: h,
+  onChange: T,
+  onClearButtonPress: k,
+  ...w
+}, g) {
+  const P = R(), t = b(), x = t.state.meta.isTouched && !t.state.meta.isValid, v = o && o.length > 0, C = P.formatMessage({
+    id: "unity:component:password-field:rules-title",
+    defaultMessage: "Your password must have:"
+  });
+  return /* @__PURE__ */ I(V, { children: [
+    /* @__PURE__ */ e(
+      M,
+      {
+        requiredVariant: m,
+        isRequired: n,
+        children: r
+      }
+    ),
+    s && /* @__PURE__ */ e(y, { children: s }),
+    /* @__PURE__ */ e(
+      H,
+      {
+        ...w,
+        ref: g,
+        value: t.state.value,
+        onChange: (a) => {
+          t.handleChange(a.target.value), T?.(a);
+        },
+        onBlur: (a) => {
+          t.handleBlur(), F?.(a);
+        },
+        onFocus: h,
+        isLoading: d,
+        isDisabled: c,
+        isReadOnly: u,
+        isInvalid: x,
+        showCapsLockWarning: f,
+        autoComplete: p,
+        onClearButtonPress: () => {
+          t.setValue(""), k?.();
+        }
+      }
+    ),
+    /* @__PURE__ */ e(j, {}),
+    v && /* @__PURE__ */ e(
+      D,
+      {
+        title: i ?? C,
+        rules: o
+      }
+    ),
+    l
+  ] });
+}
+const N = B(L);
+N.displayName = "TanstackPasswordField";
+export {
+  N as TanstackPasswordField
+};

package/dist/esm/components/password-field/hooks/use-caps-lock.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Hook to detect when Caps Lock is enabled
+ * @returns boolean indicating if Caps Lock is currently enabled
+ */
+export declare function useCapsLock(): boolean;

package/dist/esm/components/password-field/hooks/use-caps-lock.js

@@ -0,0 +1,12 @@
+import { useState as s, useCallback as r, useEffect as i } from "react";
+function d() {
+  const [n, t] = s(!1), e = r((o) => {
+    t(o.getModifierState("CapsLock"));
+  }, []);
+  return i(() => (window.addEventListener("keydown", e), window.addEventListener("keyup", e), () => {
+    window.removeEventListener("keydown", e), window.removeEventListener("keyup", e);
+  }), [e]), n;
+}
+export {
+  d as useCapsLock
+};

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';
+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";
+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/select/parts/SelectButton.js

@@ -1,4 +1,4 @@
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
 import { forwardRef as f } from "react";
 import { uyTv as m } from "@payfit/unity-themes";
 import { Button as b, SelectValue as p } from "react-aria-components";
@@ -53,13 +53,13 @@ const x = m({
     isReadOnly: !1
   }
 }), h = f(
-  ({ isDisabled: r, isInvalid: o, isReadOnly: s, isOpen: u }, l) => {
+  ({ isDisabled: r, isInvalid: t, isReadOnly: s, isOpen: u }, l) => {
     const n = v(), { base: i, selectValue: d, iconWrapper: y, icon: c } = x({
       isDisabled: r,
-      isInvalid: o,
+      isInvalid: t,
       isReadOnly: s
     });
-    return /* @__PURE__ */ t(
+    return /* @__PURE__ */ o(
       b,
       {
         "data-dd-privacy": "mask",
@@ -68,9 +68,9 @@ const x = m({
         isDisabled: r,
         "data-unity-slot": "select-button",
         children: [
-          /* @__PURE__ */ e(p, { className: d() }),
-          /* @__PURE__ */ t("div", { className: y(), children: [
-            o && /* @__PURE__ */ e(
+          /* @__PURE__ */ e(p, { className: d(), translate: "no" }),
+          /* @__PURE__ */ o("div", { className: y(), children: [
+            t && /* @__PURE__ */ e(
               a,
               {
                 src: "WarningCircleOutlined",