@payfit/unity-components 3.1.14 → 3.1.15

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

@@ -0,0 +1,74 @@
+import e from "../../hooks/use-id.js";
+import { Badge as t } from "../badge/Badge.js";
+import { BRAND_ASSETS as n } from "./PayFitBrand.js";
+import { forwardRef as r } from "react";
+import { uyTv as i } from "@payfit/unity-themes";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/core/components/payfit-brand/PayFitPreprod.tsx
+var s = i({
+	slots: { base: "uy:h-auto" },
+	variants: {
+		showOnlyMonogram: {
+			true: { base: "uy:min-w-[32px]" },
+			false: { base: "uy:min-w-[104px]" }
+		},
+		theme: { default: {} }
+	},
+	compoundVariants: [{
+		showOnlyMonogram: !0,
+		theme: "default",
+		className: { base: "uy:min-w-[20px]" }
+	}, {
+		showOnlyMonogram: !1,
+		theme: "default",
+		className: { base: "uy:min-w-[48px]" }
+	}]
+}), c = r(({ label: r, description: i, env: c, showOnlyMonogram: l = !1, ...u }, d) => {
+	let f = e(), p = `payfit-preprod-title-${f}`, m = `payfit-preprod-desc-${f}`, h = n.default;
+	return /* @__PURE__ */ o("span", {
+		className: "uy:flex uy:gap-200 uy:items-center",
+		children: [/* @__PURE__ */ o("svg", {
+			...u,
+			focusable: !1,
+			role: "img",
+			"aria-labelledby": p,
+			...i && { "aria-describedby": m },
+			xmlns: "http://www.w3.org/2000/svg",
+			viewBox: l ? h.monogram.viewBox : h.logotype.viewBox,
+			fill: "none",
+			ref: d,
+			width: l ? 24 : 80,
+			className: s({
+				showOnlyMonogram: l,
+				theme: "default"
+			}).base(),
+			children: [
+				/* @__PURE__ */ a("title", {
+					id: p,
+					children: r
+				}),
+				i && /* @__PURE__ */ a("desc", {
+					id: m,
+					children: i
+				}),
+				/* @__PURE__ */ a("path", {
+					fillRule: "evenodd",
+					className: l ? "uy:fill-grayscale-l12" : "uy:hidden",
+					d: h.monogram.path,
+					clipRule: "evenodd"
+				}),
+				!l && /* @__PURE__ */ a("path", {
+					className: "uy:fill-grayscale-l12",
+					d: h.logotype.path
+				})
+			]
+		}), /* @__PURE__ */ a(t, {
+			variant: "warning",
+			className: "uy:self-center",
+			children: c
+		})]
+	});
+});
+c.displayName = "PayFitBrandPreprod";
+//#endregion
+export { c as PayFitBrandPreprod };

package/dist/esm/core/components/phone-number/PhoneNumberInput.js

@@ -0,0 +1,215 @@
+import { Icon as e } from "../icon/Icon.js";
+import { CircularIconButton as t } from "../icon-button/CircularIconButton.js";
+import { Search as n } from "../search/Search.js";
+import { PhoneNumberItem as r } from "./parts/PhoneNumberItem.js";
+import i from "./unknownFlag.js";
+import { forwardRef as a, useImperativeHandle as o, useRef 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 { Group as f } from "react-aria-components/Group";
+import { useIntl as p } from "react-intl";
+import { Button as m } from "react-aria-components/Button";
+import { Separator as h } from "react-aria-components/Separator";
+import { ListBox as g } from "react-aria-components/ListBox";
+import { Popover as _ } from "react-aria-components/Popover";
+import { Input as v } from "react-aria-components/Input";
+import { Autocomplete as y, useFilter as b } from "react-aria-components/Autocomplete";
+import { ListLayout as x, Virtualizer as S } from "react-aria-components/Virtualizer";
+import { Select as C } from "react-aria-components/Select";
+import { FlagImage as w, defaultCountries as T, parseCountry as E, usePhoneInput as D } from "react-international-phone";
+//#region src/core/components/phone-number/PhoneNumberInput.tsx
+var O = l({ slots: {
+	base: [
+		"uy:group",
+		"uy:flex uy:w-full uy:border uy:border-border-form-enabled uy:bg-surface-form-enabled uy:border-solid uy:focus-within:outline-none uy:focus-within:ring-2 uy:focus-within:ring-utility-focus-ring uy:focus-within:ring-offset-2",
+		"uy:data-[active=\"true\"]:data-[hovered=\"true\"]:border-border-form-hover uy:data-[active=\"true\"]:data-[hovered=\"true\"]:bg-surface-form-hover uy:data-[active=\"true\"]:data-[hovered=\"true\"]:text-content-form-hover",
+		"uy:data-[active=\"true\"]:data-[pressed=\"true\"]:border-border-form-pressed uy:data-[active=\"true\"]:data-[pressed=\"true\"]:bg-surface-form-pressed uy:data-[active=\"true\"]:data-[pressed=\"true\"]:text-content-form-pressed",
+		"uy:data-[active=\"true\"]:border-border-form-active",
+		"uy:data-[focus-visible=\"true\"]:outline-none uy:data-[focus-visible=\"true\"]:ring-2 uy:data-[focus-visible=\"true\"]:ring-utility-focus-ring uy:data-[focus-visible=\"true\"]:ring-offset-2",
+		"uy:data-[invalid=\"true\"]:border-border-form-error uy:data-[invalid=\"true\"]:bg-surface-form-error uy:data-[invalid=\"true\"]:text-content-form-danger-enabled",
+		"uy:data-[disabled=\"true\"]:border-border-form-disabled uy:data-[disabled=\"true\"]:bg-surface-form-disabled uy:data-[disabled=\"true\"]:text-content-form-disabled uy:data-[disabled=\"true\"]:cursor-not-allowed",
+		"uy:h-5.5 uy:rounded-100",
+		"uy:sm:h-500 uy:sm:rounded-75 "
+	],
+	prefix: [
+		"uy:border-r uy:border-solid uy:border-border-form-enabled uy:text-content-form-enabled uy:flex-grow-0 uy:pl-150 uy:pr-100   uy:group-data-[active=true]:border-border-form-active  uy:cursor-pointer",
+		"uy:group-data-[invalid=\"true\"]:border-border-form-error",
+		"uy:group-data-[disabled=\"true\"]:border-border-form-disabled uy:group-data-[disabled=\"true\"]:text-content-form-disabled uy:data-[disabled=\"true\"]:cursor-not-allowed",
+		"uy:py-125",
+		"uy:sm:py-100"
+	],
+	inputWrapper: [
+		"uy:border-border-form-enabled uy:bg-surface-form-enabled uy:flex uy:gap-50 uy:flex-grow uy:flex-nowrap uy:px-150 uy:max-w-full uy:justify-between",
+		"uy:group-data-[invalid=\"true\"]:bg-surface-form-error",
+		"uy:group-data-[disabled=\"true\"]:bg-surface-form-disabled uy:data-[disabled=\"true\"]:cursor-not-allowed",
+		"uy:py-125 uy:rounded-100",
+		"uy:sm:py-100 uy:sm:rounded-75"
+	],
+	input: [
+		"uy:text-content-form-enabled uy:bg-surface-form-enabled 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 uy:min-h-300",
+		"uy:group-data-[invalid=\"true\"]:bg-surface-form-error uy:group-data-[invalid=\"true\"]:text-content-danger-enabled",
+		"uy:group-data-[disabled=\"true\"]:bg-surface-form-disabled uy:group-data-[disabled=\"true\"]:text-content-form-disabled uy:data-[disabled=\"true\"]:cursor-not-allowed"
+	],
+	state: ["uy:flex uy:gap-50 uy:items-center uy:shrink-0"],
+	selectIcon: [""],
+	selectButton: ["uy:cursor-pointer uy:flex uy:gap-50 uy:items-center uy:outline-none", "uy:data-[disabled=\"true\"]:cursor-not-allowed"],
+	selectPopover: [
+		"uy:border uy:border-solid uy:border-border-neutral uy:w-[var(--trigger-width)] uy:bg-surface-neutral-enabled uy:shadow-300",
+		"uy:rounded-100",
+		"uy:sm:rounded-75"
+	],
+	selectListbox: ["uy:overflow-y-auto uy:overflow-x-hidden uy:max-h-[296px]"]
+} }), k = a((a, l) => {
+	let k = p(), { onChange: A, value: j, defaultCountry: M = "unknown", onClearButtonPress: N, isInvalid: P = !1, isDisabled: F = !1, prefix: I = "+", "aria-label": L, defaultMask: R, charAfterDialCode: z, historySaveDebounceMS: B, disableCountryGuess: ee, forceDialCode: V, disableDialCodeAndPrefix: H, disableFormatting: U, searchInputAriaLabel: W, ...G } = a, [K, q] = c(!1), { contains: J } = b({ sensitivity: "base" }), Y = s(null);
+	o(l, () => Y.current, [Y]);
+	let { inputRef: X, inputValue: Z, handlePhoneValueChange: Q, country: $, setCountry: te, phone: ne } = D({
+		prefix: I,
+		defaultCountry: M,
+		value: j,
+		countries: [[
+			"",
+			"unknown",
+			"",
+			""
+		], ...T],
+		disableDialCodePrefill: !0,
+		defaultMask: R,
+		charAfterDialCode: z,
+		historySaveDebounceMS: B,
+		disableCountryGuess: ee,
+		forceDialCode: V,
+		disableDialCodeAndPrefix: H,
+		disableFormatting: U,
+		onChange: (e) => {
+			A?.($.iso2 === "unknown" ? "" : e.phone);
+		}
+	}), { base: re, prefix: ie, inputWrapper: ae, input: oe, selectPopover: se, selectListbox: ce, selectIcon: le, selectButton: ue, state: de } = O(), fe = Z.replace(ne, "").trim() !== "" && !F;
+	return /* @__PURE__ */ u("div", {
+		ref: Y,
+		children: /* @__PURE__ */ d(f, {
+			className: re(),
+			"aria-label": `${L}${j ? `, ${j}` : ""}`,
+			"aria-invalid": P,
+			"data-invalid": P,
+			"data-disabled": F,
+			"aria-disabled": F,
+			children: [/* @__PURE__ */ d(C, {
+				onOpenChange: (e) => {
+					q(e), e || setTimeout(() => {
+						X.current?.focus();
+					}, 0);
+				},
+				isDisabled: F,
+				value: $.iso2,
+				onChange: (e) => {
+					te(e);
+				},
+				className: ie(),
+				isInvalid: P,
+				children: [/* @__PURE__ */ d(m, {
+					"data-dd-privacy": "mask",
+					className: ue(),
+					"aria-label": k.formatMessage({
+						id: "unity:component:phone-number:country-selector:label",
+						defaultMessage: "Select country code, {country} {dialCode}"
+					}, {
+						country: $.name,
+						dialCode: $.dialCode
+					}),
+					children: [$.iso2 === "unknown" ? /* @__PURE__ */ u("img", {
+						"aria-hidden": "true",
+						src: i,
+						alt: "",
+						"data-dd-privacy": "mask",
+						className: "react-international-phone-flag-emoji",
+						width: 24,
+						height: 24
+					}) : /* @__PURE__ */ u(w, {
+						iso2: $.iso2,
+						alt: $.name,
+						size: 24,
+						"aria-hidden": "true",
+						"data-dd-privacy": "mask"
+					}), /* @__PURE__ */ u(e, {
+						className: le(),
+						"aria-hidden": "true",
+						src: K ? "CaretUpOutlined" : "CaretDownOutlined"
+					})]
+				}), /* @__PURE__ */ u(_, {
+					style: { "--trigger-width": `${Y.current?.offsetWidth}px` },
+					triggerRef: Y,
+					offset: 1,
+					containerPadding: 8,
+					className: se(),
+					children: /* @__PURE__ */ d(y, {
+						filter: J,
+						children: [
+							/* @__PURE__ */ u("div", {
+								className: "uy:m-100",
+								children: /* @__PURE__ */ u(n, {
+									autoFocus: !0,
+									label: W,
+									"data-dd-privacy": "mask"
+								})
+							}),
+							/* @__PURE__ */ u(h, { className: "uy:mx-100 uy:border-t uy:border-border-neutral uy:border-solid" }),
+							/* @__PURE__ */ u(S, {
+								layout: x,
+								layoutOptions: { padding: 8 },
+								children: /* @__PURE__ */ u(g, {
+									className: ce(),
+									items: T,
+									children: (e) => {
+										let t = E(e);
+										return /* @__PURE__ */ u(r, {
+											country: t,
+											id: t.iso2
+										}, t.iso2);
+									}
+								})
+							})
+						]
+					})
+				})]
+			}), /* @__PURE__ */ d("div", {
+				className: ae(),
+				children: [/* @__PURE__ */ u(v, {
+					ref: X,
+					...G,
+					className: oe(),
+					type: "tel",
+					onChange: Q,
+					value: Z,
+					"data-dd-privacy": "mask",
+					"aria-invalid": P,
+					disabled: F,
+					"aria-label": L
+				}), /* @__PURE__ */ d("div", {
+					className: de(),
+					children: [P && /* @__PURE__ */ u(e, {
+						src: "WarningCircleOutlined",
+						color: "content.form.invalid",
+						role: "img",
+						"aria-label": k.formatMessage({
+							id: "unity:component:form-field:form-input:error:alt",
+							defaultMessage: "Error"
+						})
+					}), fe && /* @__PURE__ */ u(t, {
+						title: k.formatMessage({
+							id: "unity:component:common:clear:title",
+							defaultMessage: "Clear"
+						}),
+						color: "content.neutral.low",
+						icon: "CloseOutlined",
+						onPress: () => {
+							N?.();
+						}
+					})]
+				})]
+			})]
+		})
+	});
+});
+k.displayName = "PhoneNumberInput";
+//#endregion
+export { k as PhoneNumberInput };

package/dist/esm/core/components/phone-number/parts/PhoneNumberItem.js

@@ -0,0 +1,52 @@
+import { Icon as e } from "../../icon/Icon.js";
+import { Text as t } from "../../text/Text.js";
+import { uyTv as n } from "@payfit/unity-themes";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useIntl as o } from "react-intl";
+import { ListBoxItem as s } from "react-aria-components/ListBox";
+import { FlagImage as c } from "react-international-phone";
+//#region src/core/components/phone-number/parts/PhoneNumberItem.tsx
+var l = n({ slots: {
+	base: [
+		"uy:flex uy:py-100 uy:px-150 uy:typography-body uy:cursor-pointer  uy:rounded-50",
+		"uy:gap-125",
+		"uy:sm:gap-100",
+		"uy:data-[hovered=\"true\"]:bg-surface-neutral-hover",
+		"uy:data-[pressed=\"true\"]:bg-surface-neutral-pressed",
+		"uy:data-[selected=\"true\"]:bg-surface-neutral-active",
+		"uy:data-[focus-visible=\"true\"]:outline-offset-2 uy:data-[focus-visible=\"true\"]:outline-2 uy:data-[focus-visible=\"true\"]:outline-solid uy:data-[focus-visible=\"true\"]:outline-utility-focus-ring",
+		"uy:data-[disabled=\"true\"]:text-content-neutral-disabled uy:data-[disabled=\"true\"]:bg-surface-neutral-disabled uy:data-[disabled=\"true\"]:cursor-not-allowed"
+	],
+	name: ["uy:grow"]
+} }), u = ({ country: n, isDisabled: u }) => {
+	let { base: d, name: f } = l(), p = o();
+	return /* @__PURE__ */ i(s, {
+		id: n.iso2,
+		textValue: `${n.name} ${n.dialCode}`,
+		className: d(),
+		"data-dd-privacy": "mask",
+		isDisabled: u,
+		children: ({ isSelected: o }) => /* @__PURE__ */ a(r, { children: [
+			/* @__PURE__ */ i(c, {
+				iso2: n.iso2,
+				alt: "",
+				size: 24
+			}),
+			/* @__PURE__ */ i(t, {
+				className: f(),
+				children: n.name
+			}),
+			/* @__PURE__ */ a(t, { children: ["+", n.dialCode] }),
+			o && /* @__PURE__ */ i(e, {
+				src: "CheckOutlined",
+				alt: p.formatMessage({
+					id: "unity:component:phone-number:selected:label",
+					defaultMessage: "Selected"
+				})
+			})
+		] })
+	});
+};
+u.displayName = "PhoneNumberItem";
+//#endregion
+export { u as PhoneNumberItem, l as phoneNumberItem };

package/dist/esm/core/components/phone-number/unknownFlag.js

@@ -0,0 +1,4 @@
+//#region src/core/components/phone-number/unknownFlag.svg
+var e = "data:image/svg+xml,%3csvg%20width='21'%20height='15'%20viewBox='0%200%2021%2015'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20width='21'%20height='15'%20fill='%23CBD3DC'/%3e%3c/svg%3e";
+//#endregion
+export { e as default };

package/dist/esm/core/components/pill/Pill.js

@@ -0,0 +1,54 @@
+import { forwardRef as e } from "react";
+import { uyTv as t } from "@payfit/unity-themes";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/core/components/pill/Pill.tsx
+var r = t({
+	base: "uy:min-w-200 uy:h-200 uy:max-w-400 uy:inline-flex uy:items-center uy:justify-center uy:text-center uy:typography-body-small-strong",
+	variants: {
+		variant: {
+			critical: "uy:bg-surface-danger uy:text-content-inverted",
+			info: "uy:bg-surface-info uy:text-content-info-high",
+			neutral: "uy:bg-surface-neutral-lowest uy:text-content-neutral"
+		},
+		shape: {
+			circle: "uy:rounded-circle",
+			pill: "uy:rounded-pill uy:px-50"
+		},
+		isDot: {
+			true: "uy:!size-100 uy:!min-w-0",
+			false: ""
+		},
+		isVisible: {
+			true: "uy:visible",
+			false: "uy:invisible"
+		}
+	},
+	defaultVariants: {
+		variant: "critical",
+		shape: "pill",
+		isDot: !1,
+		isVisible: !0
+	}
+}), i = (e, t) => {
+	let n = 10 ** t - 1;
+	return e > n ? `${n}+` : e.toString();
+}, a = e(({ variant: e = "critical", isVisible: t = !0, maxDigits: a = 2, value: o, ...s }, c) => {
+	let l = Math.abs(o), u = l === 0 ? "" : i(l, a), d = r({
+		variant: e,
+		isVisible: t,
+		shape: u.length <= 1 ? "circle" : "pill",
+		isDot: l === 0
+	});
+	return /* @__PURE__ */ n("span", {
+		"data-dd-privacy": "allow",
+		...s,
+		ref: c,
+		role: "status",
+		className: d,
+		"aria-atomic": "true",
+		children: u
+	});
+});
+a.displayName = "Pill";
+//#endregion
+export { a as Pill };

package/dist/esm/core/components/popover/Popover.js

@@ -0,0 +1,38 @@
+import { PopoverHeader as e } from "./parts/PopoverHeader.js";
+import { forwardRef as t } from "react";
+import { uyTv as n } from "@payfit/unity-themes";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Popover as a } from "react-aria-components/Popover";
+import { Dialog as o, DialogTrigger as s } from "react-aria-components/Dialog";
+//#region src/core/components/popover/Popover.tsx
+var c = n({ slots: {
+	base: [
+		"uy:border uy:border-solid uy:border-border-neutral uy:bg-surface-neutral uy:rounded-200 uy:p-200 uy:shadow-300 uy:min-w-[320px] uy:max-w-[800px] uy:overflow-auto",
+		"uy:transition-all uy:duration-200 uy:linear uy:data-[entering]:opacity-100 uy:data-[exiting]:opacity-0",
+		"uy:data-[entering]:data-[placement=\"bottom\"]:-translate-y-100 uy:data-[entering]:data-[placement=\"bottom\"]:translate-x-0 uy:data-[exiting]:data-[placement=\"bottom\"]:translate-y-0",
+		"uy:data-[entering]:data-[placement=\"top\"]:translate-y-100 uy:data-[entering]:data-[placement=\"top\"]:translate-x-0 uy:data-[exiting]:data-[placement=\"top\"]:translate-y-0",
+		"uy:data-[entering]:data-[placement=\"left\"]:translate-x-100 uy:data-[entering]:data-[placement=\"left\"]:translate-y-0 uy:data-[exiting]:data-[placement=\"bottom\"]:translate-x-0",
+		"uy:data-[entering]:data-[placement=\"right\"]:-translate-x-100 uy:data-[entering]:data-[placement=\"right\"]:translate-y-0 uy:data-[exiting]:data-[placement=\"right\"]:translate-y-0"
+	],
+	dialog: ["uy:flex uy:flex-col uy:rounded-100", "uy:focus-visible:outline-2 uy:focus-visible:outline-offset-2 uy:focus-visible:outline-solid uy:focus-visible:outline-utility-focus-ring"]
+} }), l = t((t, n) => {
+	let { children: s, title: l, isTitleSrOnly: u, displayCloseButton: d, ...f } = t, { base: p, dialog: m } = c();
+	return /* @__PURE__ */ r(a, {
+		ref: n,
+		className: p(),
+		offset: 8,
+		...f,
+		children: /* @__PURE__ */ i(o, {
+			className: m(),
+			role: "dialog",
+			children: [/* @__PURE__ */ r(e, {
+				title: l,
+				isTitleSrOnly: u,
+				displayCloseButton: d
+			}), s]
+		})
+	});
+});
+l.displayName = "Popover", s.displayName = "PopoverTrigger";
+//#endregion
+export { l as Popover, s as PopoverTrigger };

package/dist/esm/core/components/popover/parts/PopoverHeader.js

@@ -0,0 +1,48 @@
+import { CircularIconButton as e } from "../../icon-button/CircularIconButton.js";
+import { forwardRef as t, useContext as n } from "react";
+import { uyTv as r } from "@payfit/unity-themes";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useIntl as o } from "react-intl";
+import { OverlayTriggerStateContext as s } from "react-aria-components/Dialog";
+import { Heading as c } from "react-aria-components/Heading";
+//#region src/core/components/popover/parts/PopoverHeader.tsx
+var l = r({
+	slots: {
+		base: "uy:flex uy:justify-between",
+		heading: "uy:content-center",
+		iconButton: "uy:ml-200"
+	},
+	variants: { isTitleSrOnly: {
+		true: { heading: "uy:sr-only" },
+		false: {
+			base: "uy:mb-200",
+			heading: "uy:typography-h4 uy:min-h-400 uy:align-center"
+		}
+	} }
+}), u = t(({ title: t, isTitleSrOnly: r, displayCloseButton: u }, d) => {
+	let f = n(s), p = o(), { base: m, heading: h, iconButton: g } = l({ isTitleSrOnly: r });
+	return /* @__PURE__ */ a("div", {
+		className: m(),
+		children: [/* @__PURE__ */ i(c, {
+			ref: d,
+			slot: "title",
+			className: h(),
+			"data-dd-privacy": "allow",
+			level: 4,
+			children: t
+		}), u && /* @__PURE__ */ i(e, {
+			className: g(),
+			title: p.formatMessage({
+				id: "unity:component:common:close:label",
+				defaultMessage: "Close"
+			}),
+			color: "content.neutral.low",
+			icon: "CloseOutlined",
+			onPress: () => f?.close(),
+			size: "large"
+		})]
+	});
+});
+u.displayName = "PopoverTitle";
+//#endregion
+export { u as PopoverHeader };

package/dist/esm/core/components/progress-bar/ProgressBar.js

@@ -0,0 +1,66 @@
+import { forwardRef as e } from "react";
+import { uyTv as t } from "@payfit/unity-themes";
+import { jsx as n } from "react/jsx-runtime";
+import { ProgressBar as r } from "react-aria-components/ProgressBar";
+//#region src/core/components/progress-bar/ProgressBar.tsx
+var i = t({
+	slots: {
+		base: "uy:relative uy:bg-surface-neutral-disabled uy:w-full",
+		meter: "uy:absolute uy:inset-y-0 uy:left-0"
+	},
+	variants: {
+		variant: {
+			success: { meter: "uy:bg-surface-success" },
+			primary: { meter: "uy:bg-surface-primary" }
+		},
+		size: {
+			small: {
+				base: "uy:h-75 uy:rounded-75",
+				meter: "uy:rounded-l-75"
+			},
+			large: {
+				base: "uy:h-150 uy:rounded-150",
+				meter: "uy:rounded-l-150"
+			}
+		},
+		isFull: { true: {} }
+	},
+	compoundVariants: [{
+		size: "small",
+		isFull: !0,
+		class: { meter: "uy:rounded-r-75" }
+	}, {
+		size: "large",
+		isFull: !0,
+		class: { meter: "uy:rounded-r-150" }
+	}],
+	defaultVariants: {
+		variant: "success",
+		size: "large",
+		isFull: !1
+	}
+}), a = e(({ value: e, range: t = [0, 100], variant: a = "success", size: o = "large", ...s }, c) => {
+	let [l, u] = t, { base: d, meter: f } = i({
+		isFull: e >= u,
+		variant: a,
+		size: o
+	});
+	return /* @__PURE__ */ n(r, {
+		ref: c,
+		value: e,
+		minValue: l,
+		maxValue: u,
+		"aria-label": s["aria-label"],
+		"data-dd-privacy": "allow",
+		children: ({ percentage: e }) => /* @__PURE__ */ n("div", {
+			className: d(),
+			children: /* @__PURE__ */ n("div", {
+				className: f(),
+				style: { width: `${e}%` }
+			})
+		})
+	});
+});
+a.displayName = "ProgressBar";
+//#endregion
+export { a as ProgressBar };