@payfit/unity-components 2.47.4 → 2.47.6

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

@@ -1,68 +1,52 @@
-import { jsx as t, jsxs as a, Fragment as l } from "react/jsx-runtime";
+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 { ListBoxItem as m } from "react-aria-components/ListBox";
+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";
-import { useIntl as y } from "react-intl";
-import { Icon as p } from "../../icon/Icon.js";
-import { Text as r } from "../../text/Text.js";
-const b = n({
-  slots: {
-    base: [
-      //common
-      "uy:flex uy:py-100 uy:px-150 uy:typography-body uy:cursor-pointer  uy:rounded-50",
-      // mobile
-      "uy:gap-125",
-      // desktop
-      "uy:sm:gap-100",
-      //  hover
-      'uy:data-[hovered="true"]:bg-surface-neutral-hover',
-      //  pressed
-      'uy:data-[pressed="true"]:bg-surface-neutral-pressed',
-      //  selected
-      'uy:data-[selected="true"]:bg-surface-neutral-active',
-      //  focus-visible
-      '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',
-      //  disabled
-      'uy:data-[disabled="true"]:text-content-neutral-disabled uy:data-[disabled="true"]:bg-surface-neutral-disabled uy:data-[disabled="true"]:cursor-not-allowed'
-    ],
-    name: [
-      //common
-      "uy:grow"
-    ]
-  }
-}), f = ({ country: e, isDisabled: u }) => {
-  const { base: s, name: o } = b(), i = y();
-  return /* @__PURE__ */ t(
-    m,
-    {
-      id: e.iso2,
-      textValue: `${e.name} ${e.dialCode}`,
-      className: s(),
-      "data-dd-privacy": "mask",
-      isDisabled: u,
-      children: ({ isSelected: d }) => /* @__PURE__ */ a(l, { children: [
-        /* @__PURE__ */ t(c, { iso2: e.iso2, alt: "", size: 24 }),
-        /* @__PURE__ */ t(r, { className: o(), children: e.name }),
-        /* @__PURE__ */ a(r, { children: [
-          "+",
-          e.dialCode
-        ] }),
-        d && /* @__PURE__ */ t(
-          p,
-          {
-            src: "CheckOutlined",
-            alt: i.formatMessage({
-              id: "unity:component:phone-number:selected:label",
-              defaultMessage: "Selected"
-            })
-          }
-        )
-      ] })
-    }
-  );
-};
-f.displayName = "PhoneNumberItem";
-export {
-  f as PhoneNumberItem,
-  b as phoneNumberItem
+//#region src/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 };

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

@@ -0,0 +1,4 @@
+//#region src/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/components/phone-number-field/TanstackPhoneNumberField.js

@@ -1,32 +1,21 @@
-import { jsxs as i, jsx as r } from "react/jsx-runtime";
-import { forwardRef as c } from "react";
-import { TanstackFormFeedbackText as s } from "../form-field/parts/TanstackFormFeedbackText.js";
-import { TanstackFormHelperText as p } from "../form-field/parts/TanstackFormHelperText.js";
-import { TanstackFormLabel as d } from "../form-field/parts/TanstackFormLabel.js";
-import { TanstackFormField as l } from "../form-field/TanstackFormField.js";
-import { TanstackPhoneNumberInput as f } from "../phone-number/TanstackPhoneNumberInput.js";
-const F = ({
-  label: m,
-  isRequired: e,
-  requiredVariant: t,
-  helperText: o,
-  contextualLink: a,
-  ...n
-}) => /* @__PURE__ */ i(l, { children: [
-  /* @__PURE__ */ r(
-    d,
-    {
-      requiredVariant: t,
-      isRequired: e,
-      children: m
-    }
-  ),
-  o && /* @__PURE__ */ r(p, { children: o }),
-  /* @__PURE__ */ r(f, { ...n }),
-  /* @__PURE__ */ r(s, {}),
-  a
-] }), k = c(F);
-k.displayName = "TanstackPhoneNumberField";
-export {
-  k as TanstackPhoneNumberField
-};
+import { TanstackFormFeedbackText as e } from "../form-field/parts/TanstackFormFeedbackText.js";
+import { TanstackFormField as t } from "../form-field/TanstackFormField.js";
+import { TanstackFormHelperText as n } from "../form-field/parts/TanstackFormHelperText.js";
+import { TanstackFormLabel as r } from "../form-field/parts/TanstackFormLabel.js";
+import { TanstackPhoneNumberInput as i } from "../phone-number/TanstackPhoneNumberInput.js";
+import { forwardRef as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+var c = a(({ label: a, isRequired: c, requiredVariant: l, helperText: u, contextualLink: d, ...f }) => /* @__PURE__ */ s(t, { children: [
+	/* @__PURE__ */ o(r, {
+		requiredVariant: l,
+		isRequired: c,
+		children: a
+	}),
+	u && /* @__PURE__ */ o(n, { children: u }),
+	/* @__PURE__ */ o(i, { ...f }),
+	/* @__PURE__ */ o(e, {}),
+	d
+] }));
+c.displayName = "TanstackPhoneNumberField";
+//#endregion
+export { c as TanstackPhoneNumberField };

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

@@ -1,58 +1,48 @@
-import { jsx as s } from "react/jsx-runtime";
-import { forwardRef as c } from "react";
-import { uyTv as o } from "@payfit/unity-themes";
-const y = o({
-  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: [
-        //legacy
-        "uy:theme-legacy:bg-surface-primary uy:theme-legacy:text-content-inverted",
-        //rebrand
-        "uy:theme-rebrand:bg-surface-info uy:theme-rebrand: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"
-    },
-    isVisible: {
-      true: "uy:visible",
-      false: "uy:invisible"
-    }
-  },
-  defaultVariants: {
-    variant: "critical",
-    shape: "pill",
-    isVisible: !0
-  }
-}), p = (e, r) => {
-  const t = 10 ** r - 1;
-  return e > t ? `${t}+` : e.toString();
-}, m = c(
-  ({ variant: e = "critical", isVisible: r = !0, maxDigits: t = 2, value: i, ...l }, n) => {
-    const a = p(Math.abs(i), t), u = y({
-      variant: e,
-      isVisible: r,
-      shape: a.length === 1 ? "circle" : "pill"
-    });
-    return /* @__PURE__ */ s(
-      "span",
-      {
-        "data-dd-privacy": "allow",
-        ...l,
-        ref: n,
-        role: "status",
-        className: u,
-        "aria-atomic": "true",
-        children: a
-      }
-    );
-  }
-);
-m.displayName = "Pill";
-export {
-  m as Pill
-};
+import { forwardRef as e } from "react";
+import { uyTv as t } from "@payfit/unity-themes";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/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:theme-legacy:bg-surface-primary uy:theme-legacy:text-content-inverted", "uy:theme-rebrand:bg-surface-info uy:theme-rebrand: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"
+		},
+		isVisible: {
+			true: "uy:visible",
+			false: "uy:invisible"
+		}
+	},
+	defaultVariants: {
+		variant: "critical",
+		shape: "pill",
+		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 = i(Math.abs(o), a), u = r({
+		variant: e,
+		isVisible: t,
+		shape: l.length === 1 ? "circle" : "pill"
+	});
+	return /* @__PURE__ */ n("span", {
+		"data-dd-privacy": "allow",
+		...s,
+		ref: c,
+		role: "status",
+		className: u,
+		"aria-atomic": "true",
+		children: l
+	});
+});
+a.displayName = "Pill";
+//#endregion
+export { a as Pill };

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

@@ -1,42 +1,38 @@
-import { jsx as t, jsxs as d } from "react/jsx-runtime";
-import { forwardRef as y } from "react";
-import { uyTv as p } from "@payfit/unity-themes";
-import { Dialog as m, DialogTrigger as g } from "react-aria-components/Dialog";
-import { DialogTrigger as B } from "react-aria-components/Dialog";
-import { Popover as c } from "react-aria-components/Popover";
-import { PopoverHeader as f } from "./parts/PopoverHeader.js";
-const x = p({
-  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"
-    ]
-  }
-}), b = y((a, e) => {
-  const { children: o, title: r, isTitleSrOnly: i, displayCloseButton: n, ...l } = a, { base: u, dialog: s } = x();
-  return /* @__PURE__ */ t(c, { ref: e, className: u(), offset: 8, ...l, children: /* @__PURE__ */ d(m, { className: s(), role: "dialog", children: [
-    /* @__PURE__ */ t(
-      f,
-      {
-        title: r,
-        isTitleSrOnly: i,
-        displayCloseButton: n
-      }
-    ),
-    o
-  ] }) });
+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/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]
+		})
+	});
 });
-b.displayName = "Popover";
-g.displayName = "PopoverTrigger";
-export {
-  b as Popover,
-  B as PopoverTrigger
-};
+l.displayName = "Popover", s.displayName = "PopoverTrigger";
+//#endregion
+export { s as DialogTrigger, l as Popover };

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

@@ -1,60 +1,48 @@
-import { jsxs as m, jsx as e } from "react/jsx-runtime";
-import { forwardRef as u, useContext as y } from "react";
-import { uyTv as d } from "@payfit/unity-themes";
-import { OverlayTriggerStateContext as p } from "react-aria-components/Dialog";
-import { Heading as f } from "react-aria-components/Heading";
-import { useIntl as g } from "react-intl";
-import { CircularIconButton as h } from "../../icon-button/CircularIconButton.js";
-const v = d({
-  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"
-      }
-    }
-  }
-}), x = u(
-  ({ title: o, isTitleSrOnly: t, displayCloseButton: n }, r) => {
-    const s = y(p), a = g(), { base: l, heading: i, iconButton: c } = v({ isTitleSrOnly: t });
-    return /* @__PURE__ */ m("div", { className: l(), children: [
-      /* @__PURE__ */ e(
-        f,
-        {
-          ref: r,
-          slot: "title",
-          className: i(),
-          "data-dd-privacy": "allow",
-          level: 4,
-          children: o
-        }
-      ),
-      n && /* @__PURE__ */ e(
-        h,
-        {
-          className: c(),
-          title: a.formatMessage({
-            id: "unity:component:common:close:label",
-            defaultMessage: "Close"
-          }),
-          color: "content.neutral.low",
-          icon: "CloseOutlined",
-          onPress: () => s?.close(),
-          size: "large"
-        }
-      )
-    ] });
-  }
-);
-x.displayName = "PopoverTitle";
-export {
-  x as PopoverHeader
-};
+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/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/components/progress-bar/ProgressBar.js

@@ -1,76 +1,66 @@
-import { jsx as e } from "react/jsx-runtime";
-import { forwardRef as y } from "react";
-import { uyTv as f } from "@payfit/unity-themes";
-import { ProgressBar as g } from "react-aria-components/ProgressBar";
-const b = f({
-  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
-  }
-}), p = y(
-  ({
-    value: r,
-    range: a = [0, 100],
-    variant: l = "success",
-    size: u = "large",
-    ...t
-  }, i) => {
-    const [o, s] = a, m = r >= s, { base: d, meter: c } = b({ isFull: m, variant: l, size: u });
-    return /* @__PURE__ */ e(
-      g,
-      {
-        ref: i,
-        value: r,
-        minValue: o,
-        maxValue: s,
-        "aria-label": t["aria-label"],
-        "data-dd-privacy": "allow",
-        children: ({ percentage: n }) => /* @__PURE__ */ e("div", { className: d(), children: /* @__PURE__ */ e("div", { className: c(), style: { width: `${n}%` } }) })
-      }
-    );
-  }
-);
-p.displayName = "ProgressBar";
-export {
-  p as ProgressBar
-};
+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/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 };