@payfit/unity-components 3.1.14 → 3.1.15

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

@@ -1,34 +0,0 @@
-import { forwardRef as e } from "react";
-import { uyTv as t } from "@payfit/unity-themes";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import { FormattedMessage as i, useIntl as a } from "react-intl";
-import { Button as o } from "react-aria-components/Button";
-//#region src/components/pagination/parts/PaginationEllipsis.tsx
-var s = t({ 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:cursor-default", "uy:focus-visible:outline-2 uy:focus-visible:outline-solid uy:focus-visible:outline-utility-focus-ring uy:focus-visible:outline-offset-2"] }), c = e(({ value: e, ...t }, c) => {
-	let l = a(), [u, d] = e, f = d === Infinity ? l.formatMessage({
-		id: "unity:component:common:unknown",
-		defaultMessage: "unknown"
-	}) : d;
-	return /* @__PURE__ */ r(o, {
-		ref: c,
-		className: s(),
-		...t,
-		children: [/* @__PURE__ */ n("span", {
-			"aria-hidden": !0,
-			children: "…"
-		}), /* @__PURE__ */ n("span", {
-			className: "uy:sr-only",
-			children: /* @__PURE__ */ n(i, {
-				id: "unity:component:pagination:ellipsis:label",
-				defaultMessage: "More pages",
-				values: {
-					start: u,
-					end: f
-				}
-			})
-		})]
-	});
-});
-c.displayName = "PaginationEllipsis";
-//#endregion
-export { c as PaginationEllipsis };

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

@@ -1,17 +0,0 @@
-import { usePaginationContext as e } from "../PaginationContext.js";
-import { forwardRef as t } from "react";
-import { jsx as n } from "react/jsx-runtime";
-//#region src/components/pagination/parts/PaginationItem.tsx
-var r = t(({ children: t, pageNumber: r, pageCount: i, ...a }, o) => {
-	let { pageCount: s } = e(), c = i ?? s, l = c === -1 ? void 0 : c;
-	return /* @__PURE__ */ n("li", {
-		...a,
-		ref: o,
-		"aria-setsize": l,
-		"aria-posinset": r,
-		children: t
-	});
-});
-r.displayName = "PaginationItem";
-//#endregion
-export { r as PaginationItem };

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

@@ -1,50 +0,0 @@
-import { usePaginationContext as e } from "../PaginationContext.js";
-import { forwardRef as t, useCallback as n, useRef as r } from "react";
-import { uyTv as i } from "@payfit/unity-themes";
-import { jsx as a } from "react/jsx-runtime";
-import { useIntl as o } from "react-intl";
-import { Link as s } from "react-aria-components/Link";
-//#region src/components/pagination/parts/RawPaginationLink.tsx
-var c = i({ 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"
-] }), l = t(({ isCurrent: t, isDisabled: i, value: l, onPress: u, ...d }, f) => {
-	let p = o(), { currentPage: m, onKeyDown: h, pageRefs: g, onPageChange: _ } = e(), v = r(null), y = n((e) => {
-		v.current = e, e ? g.current.set(l, e) : g.current.delete(l), typeof f == "function" ? f(e) : f && (f.current = e);
-	}, [
-		l,
-		g,
-		f
-	]), b = t ?? m === l, x = n(() => {
-		d.href || _(l, m, l > m ? 1 : -1);
-	}, [
-		l,
-		m,
-		_,
-		d.href
-	]);
-	return /* @__PURE__ */ a(s, {
-		...d,
-		ref: y,
-		className: c(),
-		isDisabled: i,
-		onPress: u ?? x,
-		"aria-current": b ? "page" : void 0,
-		"aria-label": p.formatMessage({
-			id: "unity:component:pagination:link:label",
-			defaultMessage: "Page {page}"
-		}, { page: l }),
-		onKeyDown: (e) => {
-			h(e);
-		}
-	});
-});
-l.displayName = "RawPaginationLink";
-//#endregion
-export { l as RawPaginationLink, c as paginationLink };

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

@@ -1,53 +0,0 @@
-import { Icon as e } from "../../icon/Icon.js";
-import { Tooltip as t } from "../../tooltip/Tooltip.js";
-import { usePaginationContext as n } from "../PaginationContext.js";
-import { forwardRef as r } from "react";
-import { uyTv as i } from "@payfit/unity-themes";
-import { jsx as a } from "react/jsx-runtime";
-import { useIntl as o } from "react-intl";
-import { Link as s } from "react-aria-components/Link";
-//#region src/components/pagination/parts/RawPaginationNext.tsx
-var c = i({ 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"
-] }), l = r(({ isDisabled: r, href: i, onPress: l, ...u }, d) => {
-	let f = o(), { onKeyDown: p, currentPage: m, pageCount: h, onPageChange: g } = n(), _ = f.formatMessage({
-		id: "unity:component:common:next",
-		defaultMessage: "Next"
-	}), v = f.formatMessage({
-		id: "unity:component:pagination:nav-button:description",
-		defaultMessage: "Go to next page"
-	}, { variant: _ });
-	return /* @__PURE__ */ a(t, {
-		title: _,
-		children: /* @__PURE__ */ a(s, {
-			ref: d,
-			href: i,
-			className: c(),
-			isDisabled: r,
-			onPress: l ?? (() => {
-				!i && (h === -1 || m < h) && g(m + 1, m, 1);
-			}),
-			"aria-label": _,
-			"aria-description": v,
-			onKeyDown: (e) => {
-				p(e);
-			},
-			...u,
-			children: /* @__PURE__ */ a(e, {
-				src: "CaretRightOutlined",
-				size: 20,
-				color: "inherit",
-				role: "presentation"
-			})
-		})
-	});
-});
-l.displayName = "RawPaginationNext";
-//#endregion
-export { l as RawPaginationNext };

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

@@ -1,53 +0,0 @@
-import { Icon as e } from "../../icon/Icon.js";
-import { Tooltip as t } from "../../tooltip/Tooltip.js";
-import { usePaginationContext as n } from "../PaginationContext.js";
-import { forwardRef as r } from "react";
-import { uyTv as i } from "@payfit/unity-themes";
-import { jsx as a } from "react/jsx-runtime";
-import { useIntl as o } from "react-intl";
-import { Link as s } from "react-aria-components/Link";
-//#region src/components/pagination/parts/RawPaginationPrevious.tsx
-var c = i({ 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"
-] }), l = r(({ isDisabled: r, href: i, onPress: l, ...u }, d) => {
-	let f = o(), { onKeyDown: p, currentPage: m, onPageChange: h } = n(), g = f.formatMessage({
-		id: "unity:component:common:previous",
-		defaultMessage: "Previous"
-	}), _ = f.formatMessage({
-		id: "unity:component:pagination:nav-button:description",
-		defaultMessage: "Go to previous page"
-	}, { variant: g });
-	return /* @__PURE__ */ a(t, {
-		title: g,
-		children: /* @__PURE__ */ a(s, {
-			ref: d,
-			href: i,
-			className: c(),
-			isDisabled: r,
-			onPress: l ?? (() => {
-				!i && m > 1 && h(m - 1, m, -1);
-			}),
-			"aria-label": g,
-			"aria-description": _,
-			onKeyDown: (e) => {
-				p(e);
-			},
-			...u,
-			children: /* @__PURE__ */ a(e, {
-				src: "CaretLeftOutlined",
-				size: 20,
-				color: "inherit",
-				role: "presentation"
-			})
-		})
-	});
-});
-l.displayName = "RawPaginationPrevious";
-//#endregion
-export { l as RawPaginationPrevious };

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

@@ -1,56 +0,0 @@
-//#region src/components/pagination/utils/pagination-window.ts
-function e(e, t) {
-	return Array.from({ length: t - e + 1 }, (t, n) => n + e).map((e) => ({
-		type: "page",
-		value: e
-	}));
-}
-function t(t, n, r) {
-	let i = Math.max(5, r % 2 == 0 ? r + 1 : r), a = i - 2;
-	if (t === -1) {
-		let t = [];
-		t.push({
-			type: "page",
-			value: 1
-		});
-		let r = a - 1, o = Math.floor(r / 2);
-		return n <= 3 + o ? (t.push(...e(2, i - 1)), t.push({
-			type: "ellipsis",
-			value: [i, Infinity]
-		})) : (t.push({
-			type: "ellipsis",
-			value: [2, n - o]
-		}), t.push(...e(n - o + 1, n + o)), t.push({
-			type: "ellipsis",
-			value: [n + o + 1, Infinity]
-		})), t;
-	}
-	if (t <= i) return Array.from({ length: t }, (e, t) => ({
-		type: "page",
-		value: t + 1
-	}));
-	let o = [];
-	o.push({
-		type: "page",
-		value: 1
-	});
-	let s = a - 2, c = Math.floor(s / 2);
-	return n <= 3 + c ? (o.push(...e(2, a)), o.push({
-		type: "ellipsis",
-		value: [a + 1, t - 1]
-	})) : n >= t - (2 + c) ? (o.push({
-		type: "ellipsis",
-		value: [2, t - (a - 1) - 1]
-	}), o.push(...e(t - (a - 1), t - 1))) : (o.push({
-		type: "ellipsis",
-		value: [2, n - c - 1]
-	}), o.push(...e(n - c, n + c)), o.push({
-		type: "ellipsis",
-		value: [n + c + 1, t - 1]
-	})), o.push({
-		type: "page",
-		value: t
-	}), o;
-}
-//#endregion
-export { t as generatePaginationWithWindow };

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

@@ -1,113 +0,0 @@
-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

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

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

@@ -1,12 +0,0 @@
-import { useCallback as e, useEffect as t, useState as n } from "react";
-//#region src/components/password-field/hooks/use-caps-lock.ts
-function r() {
-	let [r, i] = n(!1), a = e((e) => {
-		i(e.getModifierState("CapsLock"));
-	}, []);
-	return t(() => (window.addEventListener("keydown", a), window.addEventListener("keyup", a), () => {
-		window.removeEventListener("keydown", a), window.removeEventListener("keyup", a);
-	}), [a]), r;
-}
-//#endregion
-export { r as useCapsLock };

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

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

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

@@ -1,153 +0,0 @@
-import { Actionable as e } from "../../actionable/Actionable.js";
-import { Spinner as t } from "../../spinner/Spinner.js";
-import { Tooltip as n } from "../../tooltip/Tooltip.js";
-import { CircularIconButton as r } from "../../icon-button/CircularIconButton.js";
-import { useFieldA11yContext as i } from "../../form-field/TanstackFormField.context.js";
-import { useCapsLock as a } from "../hooks/use-caps-lock.js";
-import { forwardRef as o, useEffect as s, useState as c } from "react";
-import { uyTv as l } from "@payfit/unity-themes";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
-import { useIntl as f } from "react-intl";
-import { Icon as p } from "@payfit/unity-icons";
-import { Input as m } from "react-aria-components/Input";
-//#region src/components/password-field/parts/PasswordInput.tsx
-var h = l({
-	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"
-		}
-	}]
-}), g = o(({ isInvalid: o, isLoading: l, isDisabled: g, isReadOnly: _, showCapsLockWarning: v = !0, autoComplete: y, onClearButtonPress: b, ...x }, S) => {
-	let C = f(), [w, T] = c(!1), [E, D] = c(!1), O = i(), k = a();
-	s(() => {
-		E && S && "current" in S && S.current && (S.current.focus(), D(!1));
-	}, [E, S]);
-	let { base: A, inputWrapper: j, input: M, state: N } = h({
-		isInvalid: !!o,
-		isReadOnly: !!_,
-		isDisabled: !!g
-	}), P = w ? "text" : "password", F = !(_ || g), I = x.value && !l && !_ && !g, L = y !== void 0, R = () => {
-		T((e) => !e), D(!0);
-	};
-	return delete x.isRequired, /* @__PURE__ */ u("div", {
-		className: A(),
-		children: /* @__PURE__ */ d("div", {
-			className: j(),
-			children: [/* @__PURE__ */ u(m, {
-				"data-dd-privacy": "mask",
-				...x,
-				ref: S,
-				id: x.id ?? O.inputId,
-				"aria-labelledby": O.labelId,
-				type: P,
-				autoComplete: L ? y : "off",
-				spellCheck: !1,
-				autoCapitalize: "off",
-				className: M(),
-				"aria-busy": l,
-				"aria-invalid": o,
-				readOnly: _,
-				disabled: g,
-				onFocus: (e) => {
-					x.onFocus?.(e);
-				},
-				onBlur: (e) => {
-					x.onBlur?.(e);
-				}
-			}), /* @__PURE__ */ d("div", {
-				className: N(),
-				children: [
-					l && /* @__PURE__ */ u(t, {
-						color: "primary",
-						size: "small",
-						label: C.formatMessage({
-							id: "unity:component:common:loading:label",
-							defaultMessage: "Loading..."
-						})
-					}),
-					v && k && /* @__PURE__ */ u("div", {
-						role: "status",
-						"aria-live": "polite",
-						children: /* @__PURE__ */ u(n, {
-							title: C.formatMessage({
-								id: "unity:component:password-field:caps-lock:tooltip",
-								defaultMessage: "Caps Lock is on"
-							}),
-							children: /* @__PURE__ */ u(e, { children: /* @__PURE__ */ u(p, {
-								src: "ArrowFatLineUpOutlined",
-								color: "content.neutral.low",
-								role: "presentation"
-							}) })
-						})
-					}),
-					o && /* @__PURE__ */ u(p, {
-						src: "WarningCircleOutlined",
-						color: "content.form.invalid",
-						alt: C.formatMessage({
-							id: "unity:component:form-field:form-input:error:alt",
-							defaultMessage: "Error"
-						})
-					}),
-					I && /* @__PURE__ */ u(r, {
-						title: C.formatMessage({
-							id: "unity:component:common:clear:title",
-							defaultMessage: "Clear"
-						}),
-						color: "content.neutral.low",
-						icon: "CloseOutlined",
-						onPress: () => {
-							b?.();
-						}
-					}),
-					F && /* @__PURE__ */ u(r, {
-						title: C.formatMessage({
-							id: w ? "unity:component:password-field:hide-password:title" : "unity:component:password-field:show-password:title",
-							defaultMessage: w ? "Hide password" : "Show password"
-						}),
-						"aria-label": C.formatMessage({
-							id: w ? "unity:component:password-field:hide-password:label" : "unity:component:password-field:show-password:label",
-							defaultMessage: w ? "Hide password" : "Show password"
-						}),
-						color: "content.neutral.low",
-						icon: w ? "EyeSlashOutlined" : "EyeOutlined",
-						onPress: R,
-						isDisabled: g
-					})
-				]
-			})]
-		})
-	});
-});
-g.displayName = "PasswordInput";
-//#endregion
-export { g as PasswordInput };