@fluidattacks/design 3.1.12 → 3.1.13

package/dist/components/plan-card/index.js

@@ -1,21 +1,21 @@
-import { jsxs as a, jsx as i } from "react/jsx-runtime";
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
 import { RecommendedTag as g } from "./recommended-tag/index.js";
-import { styled as o } from "styled-components";
-import { Button as x } from "../button/index.js";
-import { theme as r } from "../colors/index.js";
-import { Container as b } from "../container/index.js";
+import { styled as s } from "styled-components";
+import { Button as b } from "../button/index.js";
+import { theme as n } from "../colors/index.js";
+import { Container as m } from "../container/index.js";
 import { Heading as u } from "../typography/heading/index.js";
 import "../typography/span/index.js";
-import { Text as s } from "../typography/text/index.js";
-const f = o.div`
-  ${({ className: t, theme: n }) => `
+import { Text as o } from "../typography/text/index.js";
+const f = s.div`
+  ${({ className: t, theme: e }) => `
     align-items: flex-start;
-    border-radius: ${n.spacing[1]};
-    background: ${n.palette.white};
+    border-radius: ${e.spacing[1]};
+    background: ${e.palette.white};
     display: flex;
     flex-direction: column;
-    gap: ${n.spacing[1]};
-    padding: ${n.spacing[1.5]};
+    gap: ${e.spacing[1]};
+    padding: ${e.spacing[1.5]};
     position: relative;
     width: 320px;
 
@@ -24,13 +24,13 @@ const f = o.div`
       width: 100%;
     }
 
-    ${t === "essential" ? `border: 2px solid ${n.palette.gray[300]};` : `
+    ${t === "essential" ? `border: 2px solid ${e.palette.gray[300]};` : `
           box-shadow: 0px 9px 18px 0px rgba(243, 38, 55, 0.06),
             0px 18px 27px 0px rgba(243, 38, 55, 0.10);
 
           &::before {
-            background: ${n.palette.gradients["01"]} border-box;
-            border-radius: ${n.spacing[1]};
+            background: ${e.palette.gradients["01"]} border-box;
+            border-radius: ${e.spacing[1]};
             content: "";
             position: absolute;
             inset: 0;
@@ -42,15 +42,15 @@ const f = o.div`
         `}
   `}
 `;
-o.div`
-  ${({ className: t, theme: n }) => `
+s.div`
+  ${({ className: t, theme: e }) => `
     align-items: flex-start;
-    border-radius: ${n.spacing[1]};
+    border-radius: ${e.spacing[1]};
     display: flex;
     flex-direction: column;
     justify-content: center;
-    gap: ${n.spacing[1.5]};
-    padding: ${n.spacing[1.5]};
+    gap: ${e.spacing[1.5]};
+    padding: ${e.spacing[1.5]};
     width: 466px;
 
     button {
@@ -61,23 +61,94 @@ o.div`
     ${t === "essential" ? `
           background: linear-gradient(
             180deg,
-            ${n.palette.primary[400]} 0%,
-            ${n.palette.black} 100%
+            ${e.palette.primary[400]} 0%,
+            ${e.palette.black} 100%
           );` : `
-          background: ${n.palette.white};
+          background: ${e.palette.white};
           box-shadow: 0px 9px 18px 0px rgba(243, 38, 55, 0.06),
             0px 18px 27px 0px rgba(243, 38, 55, 0.10);
         `}
 
-    @media screen and (max-width: ${n.breakpoints.mobile}) {
+    @media screen and (max-width: ${e.breakpoints.mobile}) {
       width: 320px;
     }
   `}
 `;
-const h = { advanced: { title: "Advanced plan", benefits: "Leverage vulnerability scanning + AI + expert intelligence", buttonText: "Contact sales", description: "For teams that want to discover risk exposure with speed and accuracy.", priceGroup: "$1,579" }, essential: { title: "Essential plan", benefits: "Leverage vulnerability scanning", buttonText: "Start a 21-day free trial", description: `For teams that want to discover risk exposure quickly
-        through our scanning tool.`, priceAuthor: "$499", priceGroup: "$1,579" } }, j = ({ description: t, onClick: n, plan: e }) => {
-  const { title: p, description: l, benefits: d, buttonText: c } = h[e], m = t ?? l;
-  return a(f, { className: e, children: [a(b, { display: "flex", flexDirection: "column", gap: 0.25, pt: e === "essential" ? 1.75 : 0, children: [e === "advanced" && i(g, {}), i(u, { color: r.palette.gray[900], fontWeight: "semibold", size: "sm", sizeSm: "xs", children: p }), i(s, { color: r.palette.gray[400], fontWeight: "semibold", pb: e === "essential" ? 1.25 : 0, size: "sm", sizeSm: "xs", children: d })] }), i(s, { lineSpacing: 1.5, lineSpacingSm: 1.25, pb: e === "advanced" ? 1.5 : 0, size: "md", sizeSm: "sm", children: m }), i(x, { onClick: n, variant: "primary", children: c })] });
+const $ = {
+  advanced: {
+    title: "Advanced plan",
+    benefits: "Leverage vulnerability scanning + AI + expert intelligence",
+    buttonText: "Contact sales",
+    description: "For teams that want to discover risk exposure with speed and accuracy.",
+    priceGroup: "$1,579"
+  },
+  essential: {
+    title: "Essential plan",
+    benefits: "Leverage vulnerability scanning",
+    buttonText: "Start a 21-day free trial",
+    description: `For teams that want to discover risk exposure quickly
+        through our scanning tool.`,
+    priceAuthor: "$499",
+    priceGroup: "$1,579"
+  }
+}, j = ({
+  description: t,
+  onClick: e,
+  plan: i
+}) => {
+  const {
+    title: p,
+    description: d,
+    benefits: l,
+    buttonText: c
+  } = $[i], x = t ?? d;
+  return /* @__PURE__ */ a(f, { className: i, children: [
+    /* @__PURE__ */ a(
+      m,
+      {
+        display: "flex",
+        flexDirection: "column",
+        gap: 0.25,
+        pt: i === "essential" ? 1.75 : 0,
+        children: [
+          i === "advanced" && /* @__PURE__ */ r(g, {}),
+          /* @__PURE__ */ r(
+            u,
+            {
+              color: n.palette.gray[900],
+              fontWeight: "semibold",
+              size: "sm",
+              sizeSm: "xs",
+              children: p
+            }
+          ),
+          /* @__PURE__ */ r(
+            o,
+            {
+              color: n.palette.gray[400],
+              fontWeight: "semibold",
+              pb: i === "essential" ? 1.25 : 0,
+              size: "sm",
+              sizeSm: "xs",
+              children: l
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ r(
+      o,
+      {
+        lineSpacing: 1.5,
+        lineSpacingSm: 1.25,
+        pb: i === "advanced" ? 1.5 : 0,
+        size: "md",
+        sizeSm: "sm",
+        children: x
+      }
+    ),
+    /* @__PURE__ */ r(b, { onClick: e, variant: "primary", children: c })
+  ] });
 };
 export {
   j as PlanCard

package/dist/components/plan-card/recommended-tag/index.js

@@ -4,7 +4,28 @@ import { Container as r } from "../../container/index.js";
 import "../../typography/heading/index.js";
 import "../../typography/span/index.js";
 import { Text as i } from "../../typography/text/index.js";
-const p = () => e(r, { alignItems: "center", bgColor: t.palette.primary[25], borderRadius: "8px", gap: 0.5, justify: "center", padding: [0.125, 0.25, 0.125, 0.25], width: "max-content", children: e(i, { bgGradient: t.palette.gradients["01"], fontWeight: "semibold", size: "xs", textFill: "transparent", children: "Recommended" }) });
+const s = () => /* @__PURE__ */ e(
+  r,
+  {
+    alignItems: "center",
+    bgColor: t.palette.primary[25],
+    borderRadius: "8px",
+    gap: 0.5,
+    justify: "center",
+    padding: [0.125, 0.25, 0.125, 0.25],
+    width: "max-content",
+    children: /* @__PURE__ */ e(
+      i,
+      {
+        bgGradient: t.palette.gradients["01"],
+        fontWeight: "semibold",
+        size: "xs",
+        textFill: "transparent",
+        children: "Recommended"
+      }
+    )
+  }
+);
 export {
-  p as RecommendedTag
+  s as RecommendedTag
 };

package/dist/components/pop-up/description/index.js

@@ -1,13 +1,51 @@
-import { jsx as e, jsxs as c } from "react/jsx-runtime";
-import { Fragment as p } from "react";
-import { useTheme as m } from "styled-components";
+import { jsx as n, jsxs as s } from "react/jsx-runtime";
+import { Fragment as c } from "react";
+import { useTheme as g } from "styled-components";
 import "../../typography/heading/index.js";
-import { Span as o } from "../../typography/span/index.js";
-import { Text as s } from "../../typography/text/index.js";
-const u = ({ description: n = "", highlightDescription: i = "" }) => {
-  const l = m(), r = typeof i == "string", a = r ? "" : new RegExp(`(${i.join("|")})`, "u");
-  return i.length > 0 ? e(s, { display: "inline", lineSpacing: 1.5, size: "lg", textAlign: "center", children: r ? c(p, { children: [e(o, { color: l.palette.gray[600], display: "inline", fontWeight: "bold", lineSpacing: 1.5, size: "lg", children: i }), n] }) : n.split(a).map((t, g) => i.includes(t) ? e(o, { color: l.palette.gray[600], display: "inline", fontWeight: "bold", lineSpacing: 1.5, size: "lg", children: t }, `${g + 1}-bold`) : t) }) : e(s, { lineSpacing: 1.5, size: "lg", textAlign: "center", children: n });
+import { Span as t } from "../../typography/span/index.js";
+import { Text as p } from "../../typography/text/index.js";
+const z = ({
+  description: l = "",
+  highlightDescription: e = ""
+}) => {
+  const i = g(), o = typeof e == "string", a = o ? "" : new RegExp(`(${e.join("|")})`, "u");
+  return e.length > 0 ? /* @__PURE__ */ n(
+    p,
+    {
+      display: "inline",
+      lineSpacing: 1.5,
+      size: "lg",
+      textAlign: "center",
+      children: o ? /* @__PURE__ */ s(c, { children: [
+        /* @__PURE__ */ n(
+          t,
+          {
+            color: i.palette.gray[600],
+            display: "inline",
+            fontWeight: "bold",
+            lineSpacing: 1.5,
+            size: "lg",
+            children: e
+          }
+        ),
+        l
+      ] }) : l.split(a).map(
+        (r, m) => e.includes(r) ? /* @__PURE__ */ n(
+          t,
+          {
+            color: i.palette.gray[600],
+            display: "inline",
+            fontWeight: "bold",
+            lineSpacing: 1.5,
+            size: "lg",
+            children: r
+          },
+          `${m + 1}-bold`
+        ) : r
+      )
+    }
+  ) : /* @__PURE__ */ n(p, { lineSpacing: 1.5, size: "lg", textAlign: "center", children: l });
 };
 export {
-  u as Description
+  z as Description
 };

package/dist/components/pop-up/index.js

@@ -1,23 +1,152 @@
-import { jsx as e, jsxs as o } from "react/jsx-runtime";
-import { isObject as p } from "lodash";
-import { useCallback as s } from "react";
-import { createPortal as B } from "react-dom";
-import { useTheme as g } from "styled-components";
-import { Description as z } from "./description/index.js";
-import { Button as h } from "../button/index.js";
-import { M as W } from "../../index-BwFnfaRh.mjs";
-import { Container as r } from "../container/index.js";
-import { Heading as A } from "../typography/heading/index.js";
+import { jsx as r, jsxs as d } from "react/jsx-runtime";
+import { isObject as g } from "lodash";
+import { useCallback as m } from "react";
+import { createPortal as A } from "react-dom";
+import { useTheme as H } from "styled-components";
+import { Description as O } from "./description/index.js";
+import { Button as b } from "../button/index.js";
+import { M as R } from "../../index-maWH3JYC.mjs";
+import { Container as l } from "../container/index.js";
+import { Heading as S } from "../typography/heading/index.js";
 import "../typography/span/index.js";
 import "../typography/text/index.js";
-const F = ({ _portal: l = !1, cancelButton: i, darkBackground: f = !1, children: a, confirmButton: t, container: x, description: m, highlightDescription: u = "", image: b, maxWidth: y, title: n, titleColor: C }) => {
-  const c = g(), { alt: k, src: w, width: v = "77px", height: D = "77px" } = b, I = s(() => {
+const Q = ({
+  _portal: p = !1,
+  cancelButton: e,
+  darkBackground: y = !1,
+  children: s,
+  confirmButton: i,
+  container: C,
+  description: f,
+  highlightDescription: k = "",
+  image: I,
+  maxWidth: w,
+  title: a,
+  titleColor: j
+}) => {
+  const h = H(), { alt: v, src: o, width: z = "77px", height: D = "77px" } = I, M = m(() => {
+    e == null || e.onClick();
+  }, [e]), P = m(() => {
     i == null || i.onClick();
-  }, [i]), j = s(() => {
-    t == null || t.onClick();
-  }, [t]), d = e(r, { alignItems: "center", "aria-label": n, "aria-modal": "true", bgColor: f ? "rgba(52, 64, 84, 70%)" : "", display: "flex", height: "100vh", justify: "center", left: "0", position: l ? "fixed" : "absolute", top: "0px", width: "100%", zIndex: 99999, children: o(r, { bgColor: c.palette.white, border: `1px solid ${c.palette.gray[200]}`, borderRadius: "8px", display: "inline-flex", flexDirection: "column", maxWidth: y, pb: 2.5, pl: 2.5, pr: 2.5, pt: 2.5, shadow: "lg", width: "100%", zIndex: 11, children: [o(r, { alignItems: "center", display: "flex", flexDirection: "column", width: "100%", children: [e(r, { children: e(W, { alt: k, height: D, publicId: w, width: v }) }), o(r, { display: "flex", flexDirection: "column", gap: 0.5, mb: 1.5, mt: 1.5, children: [e(A, { color: C, fontWeight: "bold", lineSpacing: 2.5, size: "lg", textAlign: "center", children: n }), e(z, { description: m, highlightDescription: u })] })] }), a && e(r, { mb: 1, scroll: "y", children: e(r, { height: "100%", children: a }) }), o(r, { alignItems: "flex-start", display: "flex", gap: 1, justify: "center", children: [p(t) ? e(h, { onClick: j, variant: (t == null ? void 0 : t.variant) ?? "primary", children: t == null ? void 0 : t.text }, t == null ? void 0 : t.key) : void 0, p(i) ? e(h, { onClick: I, variant: (i == null ? void 0 : i.variant) ?? "tertiary", children: i == null ? void 0 : i.text }, i == null ? void 0 : i.key) : void 0] })] }) });
-  return l ? B(d, x ?? document.body) : d;
+  }, [i]), x = /* @__PURE__ */ r(
+    l,
+    {
+      alignItems: "center",
+      "aria-label": a,
+      "aria-modal": "true",
+      bgColor: y ? "rgba(52, 64, 84, 70%)" : "",
+      display: "flex",
+      height: "100vh",
+      justify: "center",
+      left: "0",
+      position: p ? "fixed" : "absolute",
+      top: "0px",
+      width: "100%",
+      zIndex: 99999,
+      children: /* @__PURE__ */ d(
+        l,
+        {
+          bgColor: h.palette.white,
+          border: `1px solid ${h.palette.gray[200]}`,
+          borderRadius: "8px",
+          display: "inline-flex",
+          flexDirection: "column",
+          maxWidth: w,
+          pb: 2.5,
+          pl: 2.5,
+          pr: 2.5,
+          pt: 2.5,
+          shadow: "lg",
+          width: "100%",
+          zIndex: 11,
+          children: [
+            /* @__PURE__ */ d(
+              l,
+              {
+                alignItems: "center",
+                display: "flex",
+                flexDirection: "column",
+                width: "100%",
+                children: [
+                  /* @__PURE__ */ r(l, { children: /* @__PURE__ */ r(
+                    R,
+                    {
+                      alt: v,
+                      height: D,
+                      publicId: o,
+                      width: z
+                    }
+                  ) }),
+                  /* @__PURE__ */ d(
+                    l,
+                    {
+                      display: "flex",
+                      flexDirection: "column",
+                      gap: 0.5,
+                      mb: 1.5,
+                      mt: 1.5,
+                      children: [
+                        /* @__PURE__ */ r(
+                          S,
+                          {
+                            color: j,
+                            fontWeight: "bold",
+                            lineSpacing: 2.5,
+                            size: "lg",
+                            textAlign: "center",
+                            children: a
+                          }
+                        ),
+                        /* @__PURE__ */ r(
+                          O,
+                          {
+                            description: f,
+                            highlightDescription: k
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ]
+              }
+            ),
+            s && /* @__PURE__ */ r(l, { mb: 1, scroll: "y", children: /* @__PURE__ */ r(l, { height: "100%", children: s }) }),
+            /* @__PURE__ */ d(
+              l,
+              {
+                alignItems: "flex-start",
+                display: "flex",
+                gap: 1,
+                justify: "center",
+                children: [
+                  g(i) ? /* @__PURE__ */ r(
+                    b,
+                    {
+                      onClick: P,
+                      variant: (i == null ? void 0 : i.variant) ?? "primary",
+                      children: i == null ? void 0 : i.text
+                    },
+                    i == null ? void 0 : i.key
+                  ) : void 0,
+                  g(e) ? /* @__PURE__ */ r(
+                    b,
+                    {
+                      onClick: M,
+                      variant: (e == null ? void 0 : e.variant) ?? "tertiary",
+                      children: e == null ? void 0 : e.text
+                    },
+                    e == null ? void 0 : e.key
+                  ) : void 0
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+  return p ? A(x, C ?? document.body) : x;
 };
 export {
-  F as PopUp
+  Q as PopUp
 };

package/dist/components/premium-feature/index.js

@@ -1,14 +1,14 @@
-import { jsx as i, jsxs as t } from "react/jsx-runtime";
-import { styled as c, useTheme as p } from "styled-components";
-import { Container as a } from "../container/index.js";
+import { jsx as n, jsxs as c } from "react/jsx-runtime";
+import { styled as a, useTheme as p } from "styled-components";
+import { Container as o } from "../container/index.js";
 import { Icon as e } from "../icon/index.js";
 import "../typography/heading/index.js";
 import "../typography/span/index.js";
-import { Text as m } from "../typography/text/index.js";
-const d = c.div`
-  ${({ theme: n }) => `
-    height: ${n.spacing[1]};
-    width: ${n.spacing[1]};
+import { Text as d } from "../typography/text/index.js";
+const m = a.div`
+  ${({ theme: i }) => `
+    height: ${i.spacing[1]};
+    width: ${i.spacing[1]};
     position: relative;
     flex-shrink: 0;
 
@@ -22,24 +22,64 @@ const d = c.div`
     }
 
     & .ellipse-1 {
-      color: ${n.palette.warning[200]};
+      color: ${i.palette.warning[200]};
       position: absolute;
     }
 
     & .ellipse-2 {
       transform: scale(0.75) translate(-67%, -66%);
-      color: ${n.palette.warning[400]};
+      color: ${i.palette.warning[400]};
     }
 
     & .icon {
-      color: ${n.palette.warning[600]};
-      font-size: ${n.spacing[0.5]};
+      color: ${i.palette.warning[600]};
+      font-size: ${i.spacing[0.5]};
     }
   `}
-`, $ = ({ margin: n, onClick: o, text: l }) => {
-  const s = p(), r = t(d, { children: [i(e, { icon: "circle", iconClass: "ellipse-1", iconSize: "xs" }), i(e, { icon: "circle", iconClass: "ellipse-2", iconSize: "xs" }), i(e, { icon: "crown", iconClass: "icon", iconSize: "xs" })] });
-  return i(a, l !== void 0 ? { cursor: "pointer", display: "inline-block", mr: n, onClick: o, children: t(a, { alignItems: "center", bgColor: s.palette.warning[50], borderRadius: "4px", display: "flex", padding: [0.25, 0.25, 0.25, 0.25], width: "fit-content", children: [r, i(m, { color: s.palette.warning[500], display: "inline", ml: 0.25, size: "xs", children: l })] }) } : { display: "inline-block", mr: n, onClick: o, children: r });
+`, b = ({
+  margin: i,
+  onClick: r,
+  text: l
+}) => {
+  const s = p(), t = /* @__PURE__ */ c(m, { children: [
+    /* @__PURE__ */ n(e, { icon: "circle", iconClass: "ellipse-1", iconSize: "xs" }),
+    /* @__PURE__ */ n(e, { icon: "circle", iconClass: "ellipse-2", iconSize: "xs" }),
+    /* @__PURE__ */ n(e, { icon: "crown", iconClass: "icon", iconSize: "xs" })
+  ] });
+  return l !== void 0 ? /* @__PURE__ */ n(
+    o,
+    {
+      cursor: "pointer",
+      display: "inline-block",
+      mr: i,
+      onClick: r,
+      children: /* @__PURE__ */ c(
+        o,
+        {
+          alignItems: "center",
+          bgColor: s.palette.warning[50],
+          borderRadius: "4px",
+          display: "flex",
+          padding: [0.25, 0.25, 0.25, 0.25],
+          width: "fit-content",
+          children: [
+            t,
+            /* @__PURE__ */ n(
+              d,
+              {
+                color: s.palette.warning[500],
+                display: "inline",
+                ml: 0.25,
+                size: "xs",
+                children: l
+              }
+            )
+          ]
+        }
+      )
+    }
+  ) : /* @__PURE__ */ n(o, { display: "inline-block", mr: i, onClick: r, children: t });
 };
 export {
-  $ as PremiumFeature
+  b as PremiumFeature
 };

package/dist/components/priority-score/index.js

@@ -1,14 +1,29 @@
-import { jsxs as t, jsx as i } from "react/jsx-runtime";
-import { useTheme as e } from "styled-components";
-import { Container as a } from "../container/index.js";
-import { Icon as s } from "../icon/index.js";
+import { jsxs as n, jsx as o } from "react/jsx-runtime";
+import { useTheme as a } from "styled-components";
+import { Container as m } from "../container/index.js";
+import { Icon as p } from "../icon/index.js";
 import "../typography/heading/index.js";
 import "../typography/span/index.js";
-import { Text as n } from "../typography/text/index.js";
-const x = ({ score: r }) => {
-  const o = e();
-  return t(a, { alignItems: "center", display: "inline-flex", gap: 0.25, children: [i(s, { icon: r > 66 || r === 0 ? "priority-bars-high" : r <= 33 ? "priority-bars-low" : "priority-bars-medium", iconClass: r <= 66 ? "fa-kit-duotone" : "", iconColor: r > 0 ? o.palette.primary[500] : o.palette.gray[200], iconSize: "xs", iconType: "fa-kit", secondaryColor: o.palette.gray[200] }), i(n, { color: o.palette.gray[800], size: "sm", textAlign: "right", children: r + "%" })] });
+import { Text as l } from "../typography/text/index.js";
+const d = ({
+  score: r
+}) => {
+  const i = a(), t = r <= 33 ? "priority-bars-low" : "priority-bars-medium", e = r > 66 || r === 0 ? "priority-bars-high" : t;
+  return /* @__PURE__ */ n(m, { alignItems: "center", display: "inline-flex", gap: 0.25, children: [
+    /* @__PURE__ */ o(
+      p,
+      {
+        icon: e,
+        iconClass: r <= 66 ? "fa-kit-duotone" : "",
+        iconColor: r > 0 ? i.palette.primary[500] : i.palette.gray[200],
+        iconSize: "xs",
+        iconType: "fa-kit",
+        secondaryColor: i.palette.gray[200]
+      }
+    ),
+    /* @__PURE__ */ o(l, { color: i.palette.gray[800], size: "sm", textAlign: "right", children: r + "%" })
+  ] });
 };
 export {
-  x as PriorityScore
+  d as PriorityScore
 };

package/dist/components/progress/index.js

@@ -1,10 +1,10 @@
 import { jsx as o } from "react/jsx-runtime";
-import { useState as p, useEffect as i } from "react";
-import { styled as l, useTheme as g } from "styled-components";
-import { B as h } from "../../styles-C3cZmKVJ.mjs";
-import { Container as f } from "../container/index.js";
-const d = l(h)`
-  animation: ${({ $animationTime: e }) => `progress-bar ${e}s ease-in-out`};
+import { useState as f, useEffect as n } from "react";
+import { styled as g, useTheme as c } from "styled-components";
+import { B as d } from "../../styles-CplEd2kw.mjs";
+import { Container as l } from "../container/index.js";
+const p = g(d)`
+  animation: ${({ $animationTime: t }) => `progress-bar ${t}s ease-in-out`};
   animation-fill-mode: both;
 
   @keyframes progress-bar {
@@ -16,19 +16,32 @@ const d = l(h)`
       width: 100%;
     }
   }
-`, w = ({ progressTime: e = 10, onComplete: t }) => {
-  const s = g(), [r, m] = p(0);
-  return i(() => {
-    r === 100 && (t == null || t());
-  }, [r, t]), i(() => {
-    const n = setInterval(() => {
-      m((a) => a === 100 ? 0 : a + 1);
-    }, ((a) => 1e3 * a / 100)(e));
+`, b = (t) => t * 1e3 / 100, x = ({
+  progressTime: t = 10,
+  onComplete: r
+}) => {
+  const s = c(), i = 100, [e, m] = f(0);
+  return n(() => {
+    e === i && (r == null || r());
+  }, [e, r]), n(() => {
+    const h = setInterval(() => {
+      m(
+        (a) => a === i ? 0 : a + 1
+      );
+    }, b(t));
     return () => {
-      clearInterval(n);
+      clearInterval(h);
     };
-  }, [r, e]), o(f, { bgColor: s.palette.gray[200], height: "4px", children: o(d, { $animationTime: e, bgGradient: s.palette.gradients["01"], height: "100%", width: `${r}%` }) });
+  }, [e, t]), /* @__PURE__ */ o(l, { bgColor: s.palette.gray[200], height: "4px", children: /* @__PURE__ */ o(
+    p,
+    {
+      $animationTime: t,
+      bgGradient: s.palette.gradients["01"],
+      height: "100%",
+      width: `${e}%`
+    }
+  ) });
 };
 export {
-  w as Progress
+  x as Progress
 };