@payfit/unity-components 0.0.0-alpha.11

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

@@ -0,0 +1,33 @@
+function o(e, i) {
+  return Array.from({ length: i - e + 1 }, (t, h) => h + e).map(
+    (t) => ({
+      type: "page",
+      value: t
+    })
+  );
+}
+const n = 5;
+function a(e, i, t) {
+  const h = Math.max(
+    n,
+    t
+  ), p = h - 2;
+  if (e <= h)
+    return Array.from({ length: e }, (y, f) => ({
+      type: "page",
+      value: f + 1
+    }));
+  const s = [];
+  s.push({ type: "page", value: 1 });
+  const u = p - 2, l = Math.floor(u / 2);
+  return i <= 3 + l ? (s.push(...o(2, p)), s.push({ type: "ellipsis", value: [p + 1, e - 1] })) : i >= e - (2 + l) ? (s.push({
+    type: "ellipsis",
+    value: [2, e - (p - 1) - 1]
+  }), s.push(...o(e - (p - 1), e - 1))) : (s.push({ type: "ellipsis", value: [2, i - l - 1] }), s.push(...o(i - l, i + l)), s.push({
+    type: "ellipsis",
+    value: [i + l + 1, e - 1]
+  })), s.push({ type: "page", value: e }), s;
+}
+export {
+  a as generatePaginationWithWindow
+};

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

@@ -0,0 +1,22 @@
+export type PayFitBrandProps = {
+    /**
+     * The color variant of the brand. It is "original" by default.
+     */
+    color?: 'original' | 'dark' | 'light';
+    /**
+     * The text label for the brand. Defaults to "PayFit Logo".
+     */
+    label?: string;
+    /**
+     * The description for the brand for screen readers. Optional.
+     */
+    description?: string;
+    /**
+     * The width of the brand. Defaults to the minimum of `104px`.
+     */
+    width?: number;
+};
+/**
+ * The PayFitBrand component represents the PayFit logo with several properties that follow our brand guidelines.
+ */
+export declare const PayFitBrand: import('react').ForwardRefExoticComponent<PayFitBrandProps & import('react').RefAttributes<SVGSVGElement>>;

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

@@ -0,0 +1,76 @@
+import { jsxs as y, jsx as c } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import { tv as f } from "tailwind-variants";
+import g from "../../hooks/use-id.js";
+const u = f({
+  slots: {
+    base: "uy-min-w-[104px] uy-aspect-[13/4]",
+    monogram: "",
+    logotype: ""
+  },
+  variants: {
+    color: {
+      original: {
+        monogram: "uy-fill-content-primary",
+        logotype: "uy-fill-content-primary"
+      },
+      dark: {
+        monogram: "uy-fill-content-neutral",
+        logotype: "uy-fill-content-neutral"
+      },
+      light: {
+        monogram: "uy-fill-content-inverted",
+        logotype: "uy-fill-content-inverted"
+      }
+    }
+  },
+  defaultVariants: {
+    color: "original"
+  }
+}), Z = p(
+  ({ color: l, label: n, description: a, ...r }, i) => {
+    const o = g(), t = `payfit-brand-title-${o}`, e = `payfit-brand-desc-${o}`, { base: h, monogram: m, logotype: s } = u({ color: l }), d = {
+      focusable: !1,
+      role: "img",
+      "aria-labelledby": t,
+      ...a && { "aria-describedby": e }
+    }, v = {
+      ...r,
+      ...d
+    };
+    return /* @__PURE__ */ y(
+      "svg",
+      {
+        ...v,
+        ref: i,
+        fill: "none",
+        viewBox: "0 0 104 32",
+        className: h(),
+        children: [
+          /* @__PURE__ */ c("title", { id: t, children: n ?? "PayFit Logo" }),
+          a && /* @__PURE__ */ c("desc", { id: e, children: a }),
+          /* @__PURE__ */ c(
+            "path",
+            {
+              fillRule: "evenodd",
+              className: m(),
+              d: "M16 32C7.164 32 0 24.836 0 16S7.164 0 16 0s16 7.164 16 16-7.164 16-16 16Zm-.218-10.31v-3.18c0-.092.072-.183.163-.183h3.746a4.885 4.885 0 0 0 4.69-5.09 4.893 4.893 0 0 0-4.708-4.692h-9.127c-.2 0-.364.164-.364.364v12.836a2.801 2.801 0 0 0 5.6 0c.018-.036.018-.054 0-.054Zm.182-7.545h3.527a.73.73 0 0 0 .727-.727.73.73 0 0 0-.727-.727h-4.782c-.2 0-.364.163-.364.364v8.672c0 .746-.618 1.364-1.363 1.364a1.374 1.374 0 0 1-1.364-1.364V10.164c0-.091.073-.182.164-.182h7.708c1.91-.037 3.492 1.49 3.51 3.382.036 1.909-1.49 3.49-3.382 3.509h-3.654c-.091 0-.182-.073-.182-.164V14.327c0-.09.072-.163.182-.181Z",
+              clipRule: "evenodd"
+            }
+          ),
+          /* @__PURE__ */ c(
+            "path",
+            {
+              className: s(),
+              d: "M76.49 11.945h-1.472c-.163 0-.309.11-.345.255-.073.218-.128.364-.146.455-.582 1.781-1.472 4.472-2.636 8.054-.018.055-.091.255-.237.582-.036.09-.145.127-.236.09a.219.219 0 0 1-.09-.09 7.862 7.862 0 0 1-.237-.582c-1.2-3.69-2.091-6.454-2.673-8.31-.018-.054-.036-.126-.054-.18a.372.372 0 0 0-.346-.255h-1.454a.365.365 0 0 0-.346.472c.018.055.036.091.055.146.909 2.582 2.272 6.436 4.09 11.582 0 .018 0 .018.019.036a.443.443 0 0 1 0 .218c0 .018 0 .018-.018.037-.019.072-.055.163-.073.236a1.805 1.805 0 0 1-1.691 1.2h-1.527c-.2 0-.364.164-.364.364v1.218c0 .2.164.363.364.363H68.6a3.72 3.72 0 0 0 3.418-2.236c.018-.055.037-.11.073-.164.018-.054 1.09-3.09 4.673-13.109.054-.127-.019-.29-.146-.345H76.6c-.055-.018-.073-.037-.11-.037ZM57.11 22.291c.345.109.708.163 1.072.163a4.232 4.232 0 0 0 2.89-1.2 2.949 2.949 0 0 0 .855-2.145v-.945a.163.163 0 0 0-.163-.164h-.037c-.182.018-.272.018-.272.018l-1.146.146-2.273.345c-1.218.2-1.963.69-2.2 1.455a1.923 1.923 0 0 0-.09.563c.018.818.581 1.527 1.363 1.764Zm6.854.8v.727c0 .2-.164.364-.364.364h-1.182a.365.365 0 0 1-.364-.364l-.018-1.2c0-.018-.018-.036-.018-.054a.088.088 0 0 0-.127 0 1.04 1.04 0 0 0-.2.2c-.946.945-2.236 1.418-3.91 1.418-1.2 0-2.181-.327-2.945-.964-.763-.636-1.127-1.527-1.127-2.654A3.316 3.316 0 0 1 54.036 19c.2-.418.491-.764.873-1.018a3.876 3.876 0 0 1 1.055-.546A5.45 5.45 0 0 1 57 17.164c1.764-.255 2.71-.382 2.89-.419.146-.018.728-.09 1.728-.236.073-.018.127-.018.2-.018.091-.018.164-.091.164-.182v-.51c0-.763-.2-1.363-.6-1.78-.4-.42-1.146-.637-2.218-.637-.491 0-.982.054-1.455.2-.364.109-.673.309-.927.6-.164.218-.31.436-.4.69-.018.055-.037.11-.055.183 0 .018 0 .036-.018.054a.371.371 0 0 1-.364.29h-1.363a.378.378 0 0 1-.346-.38v-.074c.019-.145.037-.254.055-.345.09-.345.236-.691.418-1a3.54 3.54 0 0 1 .818-.91c.437-.29.91-.508 1.418-.654a8.41 8.41 0 0 1 2.128-.254c3.29 0 4.89 1.309 4.89 3.963v7.346Zm26.963-10.873v11.564c0 .2.164.363.364.363h1.473c.2 0 .363-.163.363-.363V12.218c0-.2-.163-.364-.363-.364H91.29c-.2 0-.364.164-.364.364Zm0-3.673v1.473c0 .2.164.364.364.364h1.473c.2 0 .363-.164.363-.364V8.545c0-.2-.163-.363-.363-.363H91.29c-.2 0-.364.163-.364.363ZM100 13.782h3.109c.2 0 .364-.164.364-.364V12.2c0-.2-.164-.364-.364-.364H100c-.09 0-.182-.072-.182-.163V8.545c0-.2-.163-.363-.364-.363h-1.472c-.2 0-.364.163-.364.363v3.128c0 .09-.073.181-.163.181H96.09c-.2 0-.364.164-.364.364v1.218c0 .2.164.364.364.364h1.345c.091 0 .182.073.182.164V20.545c.073 2 1.71 3.6 3.709 3.6h1.655c.2 0 .363-.163.363-.363v-1.218c0-.2-.163-.364-.363-.364h-1.655a1.525 1.525 0 0 1-1.527-1.527v-6.71c.018-.108.09-.181.2-.181Zm-47.964-.637a4.96 4.96 0 0 0-4.854-4.963h-7c-.2 0-.364.163-.364.363v15.237c0 .2.164.363.364.363h1.472c.2 0 .364-.163.364-.363v-5.473c0-.09.073-.182.164-.182h5a4.975 4.975 0 0 0 4.854-4.982Zm-1.927 0a3.01 3.01 0 0 1-3.018 3.019h-4.873c-.09 0-.182-.073-.182-.164v-5.691c0-.09.073-.182.164-.182h4.891a3.01 3.01 0 0 1 3.018 3.018Zm31.2 4.928h5.527c.2 0 .364-.164.364-.364v-1.218c0-.2-.164-.364-.364-.364H81.31c-.09 0-.182-.072-.182-.163v-5.655c0-.09.073-.182.164-.182h6.8c.2 0 .364-.163.364-.363V8.545c0-.2-.164-.363-.364-.363h-8.8c-.2 0-.364.163-.364.363v15.237c0 .2.164.363.364.363h1.473c.2 0 .363-.163.363-.363v-5.527c0-.11.073-.182.182-.182Z"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Z.displayName = "PayFitBrand";
+export {
+  Z as PayFitBrand
+};

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

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

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

@@ -0,0 +1,57 @@
+import { jsxs as i, jsx as c } from "react/jsx-runtime";
+import { forwardRef as n } from "react";
+import m from "../../hooks/use-id.js";
+import { Badge as p } from "../badge/Badge.js";
+const f = n(
+  ({ label: d, description: a, env: l, ...t }, o) => {
+    const e = m(), h = `payfit-preprod-title-${e}`, r = `payfit-preprod-desc-${e}`, v = {
+      focusable: !1,
+      role: "img",
+      "aria-labelledby": h,
+      ...a && { "aria-describedby": r }
+    }, s = {
+      ...t,
+      ...v
+    };
+    return /* @__PURE__ */ i("span", { className: "uy-flex uy-gap-200 uy-items-center", children: [
+      /* @__PURE__ */ i(
+        "svg",
+        {
+          ...s,
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 104 32",
+          fill: "none",
+          ref: o,
+          width: 104,
+          height: 32,
+          className: "uy-min-w-[104px]",
+          children: [
+            /* @__PURE__ */ c("title", { id: h, children: d }),
+            a && /* @__PURE__ */ c("desc", { id: r, children: a }),
+            /* @__PURE__ */ c(
+              "path",
+              {
+                fillRule: "evenodd",
+                fill: "#F76B15",
+                d: "M16 32C7.164 32 0 24.836 0 16S7.164 0 16 0s16 7.164 16 16-7.164 16-16 16Zm-.218-10.31v-3.18c0-.092.072-.183.163-.183h3.746a4.885 4.885 0 0 0 4.69-5.09 4.893 4.893 0 0 0-4.708-4.692h-9.127c-.2 0-.364.164-.364.364v12.836a2.801 2.801 0 0 0 5.6 0c.018-.036.018-.054 0-.054Zm.182-7.545h3.527a.73.73 0 0 0 .727-.727.73.73 0 0 0-.727-.727h-4.782c-.2 0-.364.163-.364.364v8.672c0 .746-.618 1.364-1.363 1.364a1.374 1.374 0 0 1-1.364-1.364V10.164c0-.091.073-.182.164-.182h7.708c1.91-.037 3.492 1.49 3.51 3.382.036 1.909-1.49 3.49-3.382 3.509h-3.654c-.091 0-.182-.073-.182-.164V14.327c0-.09.072-.163.182-.181Z",
+                clipRule: "evenodd"
+              }
+            ),
+            /* @__PURE__ */ c(
+              "path",
+              {
+                fill: "#1C2024",
+                d: "M76.49 11.945h-1.472c-.163 0-.309.11-.345.255-.073.218-.128.364-.146.455-.582 1.781-1.472 4.472-2.636 8.054-.018.055-.091.255-.237.582-.036.09-.145.127-.236.09a.219.219 0 0 1-.09-.09 7.862 7.862 0 0 1-.237-.582c-1.2-3.69-2.091-6.454-2.673-8.31-.018-.054-.036-.126-.054-.18a.372.372 0 0 0-.346-.255h-1.454a.365.365 0 0 0-.346.472c.018.055.036.091.055.146.909 2.582 2.272 6.436 4.09 11.582 0 .018 0 .018.019.036a.443.443 0 0 1 0 .218c0 .018 0 .018-.018.037-.019.072-.055.163-.073.236a1.805 1.805 0 0 1-1.691 1.2h-1.527c-.2 0-.364.164-.364.364v1.218c0 .2.164.363.364.363H68.6a3.72 3.72 0 0 0 3.418-2.236c.018-.055.037-.11.073-.164.018-.054 1.09-3.09 4.673-13.109.054-.127-.019-.29-.146-.345H76.6c-.055-.018-.073-.037-.11-.037ZM57.11 22.291c.345.109.708.163 1.072.163a4.232 4.232 0 0 0 2.89-1.2 2.949 2.949 0 0 0 .855-2.145v-.945a.163.163 0 0 0-.163-.164h-.037c-.182.018-.272.018-.272.018l-1.146.146-2.273.345c-1.218.2-1.963.69-2.2 1.455a1.923 1.923 0 0 0-.09.563c.018.818.581 1.527 1.363 1.764Zm6.854.8v.727c0 .2-.164.364-.364.364h-1.182a.365.365 0 0 1-.364-.364l-.018-1.2c0-.018-.018-.036-.018-.054a.088.088 0 0 0-.127 0 1.04 1.04 0 0 0-.2.2c-.946.945-2.236 1.418-3.91 1.418-1.2 0-2.181-.327-2.945-.964-.763-.636-1.127-1.527-1.127-2.654A3.316 3.316 0 0 1 54.036 19c.2-.418.491-.764.873-1.018a3.876 3.876 0 0 1 1.055-.546A5.45 5.45 0 0 1 57 17.164c1.764-.255 2.71-.382 2.89-.419.146-.018.728-.09 1.728-.236.073-.018.127-.018.2-.018.091-.018.164-.091.164-.182v-.51c0-.763-.2-1.363-.6-1.78-.4-.42-1.146-.637-2.218-.637-.491 0-.982.054-1.455.2-.364.109-.673.309-.927.6-.164.218-.31.436-.4.69-.018.055-.037.11-.055.183 0 .018 0 .036-.018.054a.371.371 0 0 1-.364.29h-1.363a.378.378 0 0 1-.346-.38v-.074c.019-.145.037-.254.055-.345.09-.345.236-.691.418-1a3.54 3.54 0 0 1 .818-.91c.437-.29.91-.508 1.418-.654a8.41 8.41 0 0 1 2.128-.254c3.29 0 4.89 1.309 4.89 3.963v7.346Zm26.963-10.873v11.564c0 .2.164.363.364.363h1.473c.2 0 .363-.163.363-.363V12.218c0-.2-.163-.364-.363-.364H91.29c-.2 0-.364.164-.364.364Zm0-3.673v1.473c0 .2.164.364.364.364h1.473c.2 0 .363-.164.363-.364V8.545c0-.2-.163-.363-.363-.363H91.29c-.2 0-.364.163-.364.363ZM100 13.782h3.109c.2 0 .364-.164.364-.364V12.2c0-.2-.164-.364-.364-.364H100c-.09 0-.182-.072-.182-.163V8.545c0-.2-.163-.363-.364-.363h-1.472c-.2 0-.364.163-.364.363v3.128c0 .09-.073.181-.163.181H96.09c-.2 0-.364.164-.364.364v1.218c0 .2.164.364.364.364h1.345c.091 0 .182.073.182.164V20.545c.073 2 1.71 3.6 3.709 3.6h1.655c.2 0 .363-.163.363-.363v-1.218c0-.2-.163-.364-.363-.364h-1.655a1.525 1.525 0 0 1-1.527-1.527v-6.71c.018-.108.09-.181.2-.181Zm-47.964-.637a4.96 4.96 0 0 0-4.854-4.963h-7c-.2 0-.364.163-.364.363v15.237c0 .2.164.363.364.363h1.472c.2 0 .364-.163.364-.363v-5.473c0-.09.073-.182.164-.182h5a4.975 4.975 0 0 0 4.854-4.982Zm-1.927 0a3.01 3.01 0 0 1-3.018 3.019h-4.873c-.09 0-.182-.073-.182-.164v-5.691c0-.09.073-.182.164-.182h4.891a3.01 3.01 0 0 1 3.018 3.018Zm31.2 4.928h5.527c.2 0 .364-.164.364-.364v-1.218c0-.2-.164-.364-.364-.364H81.31c-.09 0-.182-.072-.182-.163v-5.655c0-.09.073-.182.164-.182h6.8c.2 0 .364-.163.364-.363V8.545c0-.2-.164-.363-.364-.363h-8.8c-.2 0-.364.163-.364.363v15.237c0 .2.164.363.364.363h1.473c.2 0 .363-.163.363-.363v-5.527c0-.11.073-.182.182-.182Z"
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ c(p, { variant: "warning", children: l })
+    ] });
+  }
+);
+f.displayName = "PayFitBrandPreprod";
+export {
+  f as PayFitBrandPreprod
+};

package/dist/esm/components/pill/Pill.d.ts

@@ -0,0 +1,143 @@
+import { AriaAttributes } from 'react';
+import { VariantProps } from 'tailwind-variants';
+declare const pill: import('tailwind-variants').TVReturnType<{
+    variant: {
+        critical: string;
+        info: string;
+        neutral: string;
+    };
+    shape: {
+        circle: string;
+        pill: string;
+    };
+    isVisible: {
+        true: string;
+        false: string;
+    };
+}, undefined, "uy-min-w-200 uy-max-w-400 uy-inline-flex uy-items-center uy-justify-center uy-text-center uy-typography-body-small", import('tailwind-variants/dist/config.js').TVConfig<{
+    variant: {
+        critical: string;
+        info: string;
+        neutral: string;
+    };
+    shape: {
+        circle: string;
+        pill: string;
+    };
+    isVisible: {
+        true: string;
+        false: string;
+    };
+}, {
+    variant: {
+        critical: string;
+        info: string;
+        neutral: string;
+    };
+    shape: {
+        circle: string;
+        pill: string;
+    };
+    isVisible: {
+        true: string;
+        false: string;
+    };
+}>, {
+    variant: {
+        critical: string;
+        info: string;
+        neutral: string;
+    };
+    shape: {
+        circle: string;
+        pill: string;
+    };
+    isVisible: {
+        true: string;
+        false: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    variant: {
+        critical: string;
+        info: string;
+        neutral: string;
+    };
+    shape: {
+        circle: string;
+        pill: string;
+    };
+    isVisible: {
+        true: string;
+        false: string;
+    };
+}, undefined, "uy-min-w-200 uy-max-w-400 uy-inline-flex uy-items-center uy-justify-center uy-text-center uy-typography-body-small", import('tailwind-variants/dist/config.js').TVConfig<{
+    variant: {
+        critical: string;
+        info: string;
+        neutral: string;
+    };
+    shape: {
+        circle: string;
+        pill: string;
+    };
+    isVisible: {
+        true: string;
+        false: string;
+    };
+}, {
+    variant: {
+        critical: string;
+        info: string;
+        neutral: string;
+    };
+    shape: {
+        circle: string;
+        pill: string;
+    };
+    isVisible: {
+        true: string;
+        false: string;
+    };
+}>, unknown, unknown, undefined>>;
+export type PillProps = Partial<Pick<HTMLDivElement, 'id'>> & Required<Pick<AriaAttributes, 'aria-label'>> & Pick<AriaAttributes, 'aria-details' | 'aria-describedby' | 'aria-live'> & {
+    /** The value to be displayed inside the Pill */
+    value: number;
+    /**
+     * The variant of the Pill, determining its color scheme
+     * @default 'critical'
+     */
+    variant?: VariantProps<typeof pill>['variant'];
+    /**
+     * Determines if the Pill is visible or not
+     * @default true
+     */
+    isVisible?: VariantProps<typeof pill>['isVisible'];
+    /**
+     * The maximum number of digits to display. If the value exceeds this limit, it will be truncated and a '+' will be appended
+     * @default 2
+     */
+    maxDigits?: number;
+};
+/**
+ * The Pill component displays a count of notifications or other numerical values.
+ */
+declare const Pill: import('react').ForwardRefExoticComponent<Partial<Pick<HTMLDivElement, "id">> & Required<Pick<AriaAttributes, "aria-label">> & Pick<AriaAttributes, "aria-describedby" | "aria-details" | "aria-live"> & {
+    /** The value to be displayed inside the Pill */
+    value: number;
+    /**
+     * The variant of the Pill, determining its color scheme
+     * @default 'critical'
+     */
+    variant?: VariantProps<typeof pill>["variant"];
+    /**
+     * Determines if the Pill is visible or not
+     * @default true
+     */
+    isVisible?: VariantProps<typeof pill>["isVisible"];
+    /**
+     * The maximum number of digits to display. If the value exceeds this limit, it will be truncated and a '+' will be appended
+     * @default 2
+     */
+    maxDigits?: number;
+} & import('react').RefAttributes<HTMLSpanElement>>;
+export { Pill };

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

@@ -0,0 +1,53 @@
+import { jsx as s } from "react/jsx-runtime";
+import { forwardRef as c } from "react";
+import { tv as o } from "tailwind-variants";
+const y = o({
+  base: "uy-min-w-200 uy-max-w-400 uy-inline-flex uy-items-center uy-justify-center uy-text-center uy-typography-body-small",
+  variants: {
+    variant: {
+      critical: "uy-bg-surface-danger uy-text-content-inverted",
+      info: "uy-bg-surface-primary uy-text-content-inverted",
+      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 = (t, i) => {
+  const e = 10 ** i - 1;
+  return t > e ? `${e}+` : t.toString();
+}, d = c(
+  ({ variant: t = "critical", isVisible: i = !0, maxDigits: e = 2, value: a, ...l }, n) => {
+    const r = p(Math.abs(a), e), u = y({
+      variant: t,
+      isVisible: i,
+      shape: r.length === 1 ? "circle" : "pill"
+    });
+    return /* @__PURE__ */ s(
+      "span",
+      {
+        "data-dd-privacy": "allow",
+        ...l,
+        ref: n,
+        role: "status",
+        className: u,
+        "aria-atomic": "true",
+        children: r
+      }
+    );
+  }
+);
+d.displayName = "Pill";
+export {
+  d as Pill
+};

package/dist/esm/components/popover/Popover.d.ts

@@ -0,0 +1,56 @@
+import { ReactNode } from 'react';
+import { PopoverProps as AriaPopoverProps, DialogTrigger } from 'react-aria-components';
+interface PopoverBaseProps extends Omit<AriaPopoverProps, 'className' | 'style'> {
+    /**
+     * The content to be displayed inside the popover.
+     */
+    children: ReactNode;
+    /**
+     * Title text to be displayed in the header and used as the Popover's label.
+     */
+    title: string;
+}
+interface PopoverPropsWithVisibleTitle extends PopoverBaseProps {
+    /**
+     * If true, the title will not be shown on the screen but will still be accessible to screen readers
+     * @default false
+     */
+    isTitleSrOnly?: false;
+    /**
+     * Whether the popover can be dismissed with a close button.
+     * If true, a close button will be added to the popover header.
+     * @default false
+     */
+    displayCloseButton?: boolean;
+}
+interface PopoverPropsWithHiddenTitle extends PopoverBaseProps {
+    /**
+     * If true, the title will not be shown on the screen but will still be accessible to screen readers
+     * @default false
+     */
+    isTitleSrOnly: true;
+    /**
+     * Whether the popover can be dismissed with a close button.
+     * If true, a close button will be added to the popover header.
+     * @default false
+     */
+    displayCloseButton?: false;
+}
+type PopoverProps = PopoverPropsWithVisibleTitle | PopoverPropsWithHiddenTitle;
+/**
+ * The `Popover` component renders a floating container that appears when a user interacts with a trigger element.
+ * Use it to display additional information or actions without navigating away from the current context.
+ * @example
+ * ```tsx
+ * import { Popover, PopoverTrigger, Button } from '@payfit/unity-components'
+ *
+ * <PopoverTrigger>
+ *   <Button>Open Popover</Button>
+ *   <Popover>
+ *     <p>Popover content goes here</p>
+ *   </Popover>
+ * </PopoverTrigger>
+ * ```
+ */
+declare const Popover: import('react').ForwardRefExoticComponent<PopoverProps & import('react').RefAttributes<HTMLDivElement>>;
+export { Popover, DialogTrigger as PopoverTrigger };

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

@@ -0,0 +1,37 @@
+import { jsx as o, jsxs as d } from "react/jsx-runtime";
+import { forwardRef as f } from "react";
+import { Popover as m, Dialog as n, DialogTrigger as y } from "react-aria-components";
+import { DialogTrigger as B } from "react-aria-components";
+import { tv as g } from "tailwind-variants";
+import { PopoverContent as c } from "./parts/PopoverContent.js";
+import { PopoverHeader as v } from "./parts/PopoverHeader.js";
+const x = g({
+  slots: {
+    base: [
+      "uy-border uy-border-solid uy-border-border-neutral uy-bg-surface-neutral uy-rounded-200 uy-p-200 uy-shadow-floating uy-min-w-[320px] uy-max-w-[800px]"
+    ],
+    dialog: [
+      "uy-flex uy-flex-col",
+      "focus:uy-outline-2 focus:uy-outline-offset-2"
+    ]
+  }
+}), P = f((r, e) => {
+  const { children: i, title: s, isTitleSrOnly: t, displayCloseButton: l, ...a } = r, { base: p, dialog: u } = x();
+  return /* @__PURE__ */ o(m, { ref: e, className: p(), offset: 8, ...a, children: /* @__PURE__ */ d(n, { className: u(), role: "dialog", children: [
+    /* @__PURE__ */ o(
+      v,
+      {
+        title: s,
+        isTitleSrOnly: t,
+        displayCloseButton: l
+      }
+    ),
+    /* @__PURE__ */ o(c, { children: i })
+  ] }) });
+});
+P.displayName = "Popover";
+y.displayName = "PopoverTrigger";
+export {
+  P as Popover,
+  B as PopoverTrigger
+};

package/dist/esm/components/popover/parts/PopoverContent.d.ts

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react';
+export type PopoverContentProps = PropsWithChildren<object>;
+declare const PopoverContent: import('react').ForwardRefExoticComponent<object & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLDivElement>>;
+export { PopoverContent };

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

@@ -0,0 +1,9 @@
+import { jsx as t } from "react/jsx-runtime";
+import { forwardRef as e } from "react";
+const n = e(
+  ({ children: o }, r) => /* @__PURE__ */ t("div", { ref: r, children: o })
+);
+n.displayName = "PopoverContent";
+export {
+  n as PopoverContent
+};

package/dist/esm/components/popover/parts/PopoverHeader.d.ts

@@ -0,0 +1,20 @@
+import { HeadingProps } from 'react-aria-components';
+export interface PopoverHeaderProps extends Omit<HeadingProps, 'className' | 'style' | 'children'> {
+    /**
+     * Title text to be displayed in the header and used as the Popover's label.
+     */
+    title: string;
+    /**
+     * If true, the title will not be shown on the screen but will still be accessible to screen readers
+     * @default false
+     */
+    isTitleSrOnly?: boolean;
+    /**
+     * Whether the popover can be dismissed with a close button.
+     * If true, a close button will be added to the header.
+     * @default false
+     */
+    displayCloseButton?: boolean;
+}
+declare const PopoverHeader: import('react').ForwardRefExoticComponent<PopoverHeaderProps & import('react').RefAttributes<HTMLDivElement>>;
+export { PopoverHeader };

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

@@ -0,0 +1,56 @@
+import { jsxs as m, jsx as o } from "react/jsx-runtime";
+import { forwardRef as c, useContext as d } from "react";
+import { OverlayTriggerStateContext as u, Heading as y } from "react-aria-components";
+import { useIntl as p } from "react-intl";
+import { tv as f } from "tailwind-variants";
+import { IconButton as g } from "../../icon-button/IconButton.js";
+const h = f({
+  slots: {
+    base: "uy-flex uy-justify-between",
+    heading: "uy-content-center"
+  },
+  variants: {
+    isTitleSrOnly: {
+      true: {
+        heading: "uy-sr-only"
+      },
+      false: {
+        base: "uy-mb-150",
+        heading: "uy-typography-h2 uy-min-h-500 uy-align-center"
+      }
+    }
+  }
+}), v = c(
+  ({ title: t, isTitleSrOnly: r, displayCloseButton: a }, n) => {
+    const e = d(u), s = p(), { base: l, heading: i } = h({ isTitleSrOnly: r });
+    return /* @__PURE__ */ m("div", { className: l(), children: [
+      /* @__PURE__ */ o(
+        y,
+        {
+          ref: n,
+          slot: "title",
+          className: i(),
+          "data-dd-privacy": "allow",
+          children: t
+        }
+      ),
+      a && /* @__PURE__ */ o(
+        g,
+        {
+          variant: "ghost",
+          color: "neutral",
+          label: s.formatMessage({
+            id: "unity:component:common:close:label",
+            defaultMessage: "Close"
+          }),
+          icon: "CloseOutlined",
+          onClick: () => e == null ? void 0 : e.close()
+        }
+      )
+    ] });
+  }
+);
+v.displayName = "PopoverTitle";
+export {
+  v as PopoverHeader
+};

package/dist/esm/components/progress-bar/ProgressBar.d.ts

@@ -0,0 +1,10 @@
+interface ProgressBarProps {
+    /** the range of the value*/
+    range?: [min: number, max: number];
+    /** the value of the progression */
+    value: number;
+    /** an aria-label for the accessibility */
+    'aria-label': string;
+}
+declare const ProgressBar: import('react').ForwardRefExoticComponent<ProgressBarProps & import('react').RefAttributes<HTMLDivElement>>;
+export { ProgressBar };

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

@@ -0,0 +1,40 @@
+import { jsx as r } from "react/jsx-runtime";
+import { forwardRef as y } from "react";
+import { ProgressBar as m } from "react-aria-components";
+import { tv as f } from "tailwind-variants";
+const c = f({
+  slots: {
+    base: "uy-rounded-150 uy-bg-surface-neutral-disabled uy-h-150 uy-top-[50%] uy-transform uy-translate-y-[-50%] uy-w-full",
+    meter: "uy-rounded-l-150 uy-absolute uy-h-full uy-top-[50%] uy-transform uy-translate-y-[-50%] uy-rounded-full uy-bg-surface-success"
+  },
+  variants: {
+    isFull: {
+      true: {
+        meter: "uy-rounded-r-150"
+      }
+    }
+  },
+  defaultVariants: {
+    isFull: !1
+  }
+}), p = y(
+  ({ value: a, range: e = [0, 100], ...u }, l) => {
+    const [t, s] = e, o = a >= s, { base: d, meter: i } = c({ isFull: o });
+    return /* @__PURE__ */ r(
+      m,
+      {
+        ref: l,
+        value: a,
+        minValue: t,
+        maxValue: s,
+        "aria-label": u["aria-label"],
+        "data-dd-privacy": "allow",
+        children: ({ percentage: n }) => /* @__PURE__ */ r("div", { className: d(), children: /* @__PURE__ */ r("div", { className: i(), style: { width: `${n}%` } }) })
+      }
+    );
+  }
+);
+p.displayName = "ProgressBar";
+export {
+  p as ProgressBar
+};

package/dist/esm/components/radio-button-group/RadioButtonGroup.d.ts

@@ -0,0 +1,22 @@
+import { RadioGroupProps } from 'react-aria-components';
+/**
+ * Props for the RadioButtonGroup component.
+ * Excludes className and style props as they are handled internally.
+ */
+export type RadioButtonGroupProps = Omit<RadioGroupProps, 'className' | 'style'>;
+/**
+ * The `RadioButtonGroup` component enables users to select a single option from a set of mutually exclusive choices.
+ * It manages the selection state, keyboard navigation, focus handling, and accessibility features for a group of RadioButton components.
+ * @example
+ * ```tsx
+ * import { RadioButton, RadioButtonGroup } from '@payfit/unity-components'
+ *
+ * <RadioButtonGroup value="option1" onChange={setValue}>
+ *   <RadioButton value="option1">Option 1</RadioButton>
+ *   <RadioButton value="option2">Option 2</RadioButton>
+ *   <RadioButton value="option3">Option 3</RadioButton>
+ * </RadioButtonGroup>
+ * ```
+ */
+declare const RadioButtonGroup: import('react').ForwardRefExoticComponent<RadioButtonGroupProps & import('react').RefAttributes<HTMLDivElement>>;
+export { RadioButtonGroup };