@fluidattacks/design 3.1.11 → 3.1.12

package/dist/components/modal/modal-footer/index.js

@@ -1 +1,16 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("lodash"),r=require("react"),i=require("../../../styles-CdD9waPD.js"),l=require("../../button/index.js");exports.ModalFooter=({modalRef:n,confirmButton:o,cancelButton:s})=>{const{close:c}=n,u=r.useCallback((()=>{null==s||s.onClick(),c()}),[s,c]),a=r.useCallback((()=>{null==o||o.onClick(),c()}),[o,c]);return[o,s].some((e=>!t.isEmpty(e)))?e.jsx(i.Footer,{children:e.jsxs("div",{children:[s&&e.jsx(l.Button,{onClick:u,variant:"tertiary",width:"100%",children:s.text}),o&&e.jsx(l.Button,{onClick:a,variant:"primary",width:"100%",children:o.text})]})}):null};
+import { jsx as i, jsxs as l } from "react/jsx-runtime";
+import { isEmpty as p } from "lodash";
+import { useCallback as n } from "react";
+import { F as f } from "../../../styles-D85YYIjM.mjs";
+import { Button as a } from "../../button/index.js";
+const C = ({ modalRef: s, confirmButton: o, cancelButton: t }) => {
+  const { close: r } = s, c = n(() => {
+    t == null || t.onClick(), r();
+  }, [t, r]), e = n(() => {
+    o == null || o.onClick(), r();
+  }, [o, r]);
+  return [o, t].some((d) => !p(d)) ? i(f, { children: l("div", { children: [t && i(a, { onClick: c, variant: "tertiary", width: "100%", children: t.text }), o && i(a, { onClick: e, variant: "primary", width: "100%", children: o.text })] }) }) : null;
+};
+export {
+  C as ModalFooter
+};

package/dist/components/modal/modal-header/index.js

@@ -1 +1,25 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("lodash"),t=require("react"),r=require("styled-components"),s=require("../../../styles-CdD9waPD.js"),n=require("../../icon-button/index.js"),o=require("../../typography/heading/index.js");require("../../typography/span/index.js");const l=require("../../typography/text/index.js");exports.ModalHeader=({title:c,description:d,modalRef:a,otherActions:u,onClose:p})=>{const x=r.useTheme(),y=t.useCallback((()=>{null==p||p(),a.close()}),[a,p]);return t.useEffect((()=>{const e=e=>{"Escape"===e.key&&y()};return window.addEventListener("keydown",e),()=>{window.removeEventListener("keydown",e)}}),[y]),e.jsxs(s.Header,{children:[e.jsxs(s.Title,{children:["string"==typeof c?e.jsx(o.Heading,{fontWeight:"bold",lineSpacing:1.75,mr:1,size:"sm",children:c}):c,e.jsxs("div",{className:"flex",children:[u,e.jsx(n.IconButton,{icon:"close",iconColor:x.palette.gray[300],iconSize:"xs",iconType:"fa-light",id:"modal-close",onClick:y,variant:"ghost"})]})]}),d&&i.isString(d)&&!i.isEmpty(d)?e.jsx(l.Text,{mt:.5,size:"sm",children:d}):d]})};
+import { jsxs as t, jsx as r } from "react/jsx-runtime";
+import { isString as d, isEmpty as p } from "lodash";
+import { useCallback as f, useEffect as x } from "react";
+import { useTheme as h } from "styled-components";
+import { H as u, T as w } from "../../../styles-D85YYIjM.mjs";
+import { IconButton as y } from "../../icon-button/index.js";
+import { Heading as k } from "../../typography/heading/index.js";
+import "../../typography/span/index.js";
+import { Text as v } from "../../typography/text/index.js";
+const L = ({ title: i, description: o, modalRef: n, otherActions: m, onClose: e }) => {
+  const c = h(), s = f(() => {
+    e == null || e(), n.close();
+  }, [n, e]);
+  return x(() => {
+    const a = (l) => {
+      l.key === "Escape" && s();
+    };
+    return window.addEventListener("keydown", a), () => {
+      window.removeEventListener("keydown", a);
+    };
+  }, [s]), t(u, { children: [t(w, { children: [typeof i == "string" ? r(k, { fontWeight: "bold", lineSpacing: 1.75, mr: 1, size: "sm", children: i }) : i, t("div", { className: "flex", children: [m, r(y, { icon: "close", iconColor: c.palette.gray[300], iconSize: "xs", iconType: "fa-light", id: "modal-close", onClick: s, variant: "ghost" })] })] }), o && d(o) && !p(o) ? r(v, { mt: 0.5, size: "sm", children: o }) : o] });
+};
+export {
+  L as ModalHeader
+};

package/dist/components/notification/index.js

@@ -1,5 +1,68 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),e=require("react"),i=require("styled-components"),t=require("../container/index.js"),o=require("../icon/index.js"),s=require("../icon-button/index.js"),a=require("../typography/heading/index.js");require("../typography/span/index.js");const r=require("../typography/text/index.js"),c=i.styled.div`
-  ${({theme:n,$variant:e})=>`\n    background: ${n.palette.white};\n    border: 1px solid ${n.palette.gray[200]};\n    border-radius: ${n.spacing[.25]};\n    border-left: 4px solid ${n.palette[e][500]};\n    box-shadow: ${n.shadows.md};\n    position: relative;\n    display: flex;\n    width: 360px;\n    padding: ${n.spacing[1.25]} ${n.spacing[1]} ${n.spacing[1.25]} ${n.spacing[.75]};\n    gap: ${n.spacing[.5]};\n\n    button {\n      position: absolute;\n      top: 20px;\n      right: 16px;\n    }\n  `}
-`,l=i.styled.div`
-  ${({theme:n,$variant:e})=>`\n    height: ${n.spacing[2.5]};\n    width: ${n.spacing[2.5]};\n    position: relative;\n    flex-shrink: 0;\n\n    & .ellipse-1,\n    & .ellipse-2,\n    & .icon {\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      position: absolute;\n    }\n\n    & .ellipse-1 {\n      transform: scale(2.5) translate(-20%, -20%);\n      color: ${n.palette[e][50]};\n      position: absolute;\n    }\n\n    & .ellipse-2 {\n      transform: scale(2) translate(-25%, -25%);\n      color: ${n.palette[e][200]};\n    }\n\n    & .icon {\n      color: ${n.palette[e][500]};\n    }\n  `}
-`;exports.Notification=({description:p,onClose:d,title:x,variant:g})=>{const h=i.useTheme(),u=e.useCallback((()=>{null==d||d()}),[d]);return n.jsxs(c,{$variant:g,className:`notification notification__${g}`,role:"alertdialog",children:[n.jsxs(l,{$variant:g,children:[n.jsx(o.Icon,{icon:"circle",iconClass:"ellipse-1",iconSize:"xs"}),n.jsx(o.Icon,{icon:"circle",iconClass:"ellipse-2",iconSize:"xs"}),n.jsx(o.Icon,{icon:($=g,"warning"===$?"triangle-exclamation":"info"===$?"circle-info":"success"===$?"circle-check":"circle-exclamation"),iconClass:"icon",iconSize:"xs",iconType:"fa-light"})]}),n.jsxs(t.Container,{pr:1.5,children:[n.jsx(a.Heading,{fontWeight:"bold",size:"xs",children:x}),n.jsx(r.Text,{size:"sm",whiteSpace:"break-spaces",wordWrap:"break-word",children:p})]}),n.jsx(s.IconButton,{height:"fit-content",icon:"close",iconColor:h.palette.gray[400],iconSize:"xs",iconType:"fa-light",onClick:u,px:.125,py:.125,variant:"ghost"})]});var $};
+import { jsxs as t, jsx as o } from "react/jsx-runtime";
+import { useCallback as p } from "react";
+import { styled as s, useTheme as d } from "styled-components";
+import { Container as m } from "../container/index.js";
+import { Icon as a } from "../icon/index.js";
+import { IconButton as f } from "../icon-button/index.js";
+import { Heading as g } from "../typography/heading/index.js";
+import "../typography/span/index.js";
+import { Text as $ } from "../typography/text/index.js";
+const h = s.div`
+  ${({ theme: i, $variant: n }) => `
+    background: ${i.palette.white};
+    border: 1px solid ${i.palette.gray[200]};
+    border-radius: ${i.spacing[0.25]};
+    border-left: 4px solid ${i.palette[n][500]};
+    box-shadow: ${i.shadows.md};
+    position: relative;
+    display: flex;
+    width: 360px;
+    padding: ${i.spacing[1.25]} ${i.spacing[1]} ${i.spacing[1.25]} ${i.spacing[0.75]};
+    gap: ${i.spacing[0.5]};
+
+    button {
+      position: absolute;
+      top: 20px;
+      right: 16px;
+    }
+  `}
+`, x = s.div`
+  ${({ theme: i, $variant: n }) => `
+    height: ${i.spacing[2.5]};
+    width: ${i.spacing[2.5]};
+    position: relative;
+    flex-shrink: 0;
+
+    & .ellipse-1,
+    & .ellipse-2,
+    & .icon {
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      position: absolute;
+    }
+
+    & .ellipse-1 {
+      transform: scale(2.5) translate(-20%, -20%);
+      color: ${i.palette[n][50]};
+      position: absolute;
+    }
+
+    & .ellipse-2 {
+      transform: scale(2) translate(-25%, -25%);
+      color: ${i.palette[n][200]};
+    }
+
+    & .icon {
+      color: ${i.palette[n][500]};
+    }
+  `}
+`, b = (i) => i === "warning" ? "triangle-exclamation" : i === "info" ? "circle-info" : i === "success" ? "circle-check" : "circle-exclamation", j = ({ description: i, onClose: n, title: r, variant: e }) => {
+  const l = d(), c = p(() => {
+    n == null || n();
+  }, [n]);
+  return t(h, { $variant: e, className: `notification notification__${e}`, role: "alertdialog", children: [t(x, { $variant: e, children: [o(a, { icon: "circle", iconClass: "ellipse-1", iconSize: "xs" }), o(a, { icon: "circle", iconClass: "ellipse-2", iconSize: "xs" }), o(a, { icon: b(e), iconClass: "icon", iconSize: "xs", iconType: "fa-light" })] }), t(m, { pr: 1.5, children: [o(g, { fontWeight: "bold", size: "xs", children: r }), o($, { size: "sm", whiteSpace: "break-spaces", wordWrap: "break-word", children: i })] }), o(f, { height: "fit-content", icon: "close", iconColor: l.palette.gray[400], iconSize: "xs", iconType: "fa-light", onClick: c, px: 0.125, py: 0.125, variant: "ghost" })] });
+};
+export {
+  j as Notification
+};

package/dist/components/notification-sign/index.js

@@ -1,10 +1,30 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),n=require("styled-components"),r=require("../../styles-C2CoGJl7.js"),i=n.styled(r.BaseComponent)`
-  ${({theme:e,$variant:t})=>`\n    align-items: center;\n    background: ${"error"===t?e.palette.primary[400]:e.palette.warning[500]};\n    border-radius: 100%;\n    font-family: ${e.typography.type.primary};\n    justify-content: center;\n    padding: 0;\n    position: absolute;\n    z-index: 11;\n    width: ${e.spacing[.5]};\n    height: ${e.spacing[.5]};\n  `}
-`,a=n.styled.div`
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as s } from "react";
+import { styled as i } from "styled-components";
+import { B as p } from "../../styles-C3cZmKVJ.mjs";
+const d = i(p)`
+  ${({ theme: t, $variant: n }) => `
+    align-items: center;
+    background: ${n === "error" ? t.palette.primary[400] : t.palette.warning[500]};
+    border-radius: 100%;
+    font-family: ${t.typography.type.primary};
+    justify-content: center;
+    padding: 0;
+    position: absolute;
+    z-index: 11;
+    width: ${t.spacing[0.5]};
+    height: ${t.spacing[0.5]};
+  `}
+`, c = i.div`
   align-items: center;
-  color: ${({theme:e})=>e.palette.white};
+  color: ${({ theme: t }) => t.palette.white};
   display: flex;
   font-size: 6px;
-  font-weight: ${({theme:e})=>e.typography.weight.bold};
+  font-weight: ${({ theme: t }) => t.typography.weight.bold};
   justify-content: center;
-`,o=t.forwardRef((function({numberIndicator:t,show:n,variant:r="error",...o},s){return e.jsx(i,{$variant:r,className:n?"flex":"hidden","data-testid":"notification-sign",ref:s,...o,children:t&&e.jsx(a,{children:t<=9?t:9})})}));exports.NotificationSign=o;
+`, g = s(function({ numberIndicator: t, show: n, variant: r = "error", ...a }, o) {
+  return e(d, { $variant: r, className: n ? "flex" : "hidden", "data-testid": "notification-sign", ref: o, ...a, children: t && e(c, { children: t <= 9 ? t : 9 }) });
+});
+export {
+  g as NotificationSign
+};

package/dist/components/number-input/index.js

@@ -1,17 +1,22 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("lodash"),r=require("react"),a=require("styled-components"),n=require("../../index-CmylnDrF.js"),o=a.styled.div`
+import { jsx as u } from "react/jsx-runtime";
+import { toNumber as d, isEmpty as k } from "lodash";
+import { forwardRef as w, useState as T, useCallback as l } from "react";
+import { styled as g } from "styled-components";
+import { T as $ } from "../../index-D-lcuEHY.mjs";
+const P = g.div`
   width: fit-content;
-  border: ${({theme:e})=>`1px solid ${e.palette.gray[300]}`};
+  border: ${({ theme: t }) => `1px solid ${t.palette.gray[300]}`};
   border-radius: 4px;
   background: none;
-  color: ${({theme:e})=>e.palette.black};
-  font-family: ${({theme:e})=>e.typography.type.primary};
-  font-size: ${({theme:e})=>e.typography.text.md};
+  color: ${({ theme: t }) => t.palette.black};
+  font-family: ${({ theme: t }) => t.typography.type.primary};
+  font-size: ${({ theme: t }) => t.typography.text.md};
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0.5em;
-`,i=a.styled.input`
+`, E = g.input`
   width: 4em;
   appearance: textfield;
   border-style: none;
@@ -31,4 +36,17 @@
   &::-webkit-inner-spin-button {
     opacity: 1;
   }
-`,u=r.forwardRef((function({autoUpdate:a=!1,decimalPlaces:u=0,defaultValue:l=0,max:d,min:p,name:s,onEnter:m,tooltipMessage:b,...c},g){const x=u<0?0:u,[y,h]=r.useState(Number(l).toFixed(x)),f=r.useCallback((e=>{const r=t.toNumber(e.target.value);e.target.value.endsWith(".")?h(e.target.value):r>=Number(p)&&r<=Number(d)&&(h(String(r)),a&&m(t.toNumber(r.toFixed(x)))),e.stopPropagation()}),[a,x,d,p,m]),v=r.useCallback((e=>{e.currentTarget.contains(e.relatedTarget)||h(Number(l).toFixed(x)),e.stopPropagation()}),[x,l]),N=r.useCallback((e=>{e.stopPropagation(),"Enter"!==e.key||t.isEmpty(e.currentTarget.value)||m(t.toNumber(e.currentTarget.value))}),[m]);return e.jsx(o,{onBlur:v,tabIndex:-1,children:e.jsx(n.Tooltip,{id:"numberInputTooltip",tip:b,children:e.jsx(i,{...c,"aria-label":s,"aria-valuemax":Number(d),"aria-valuemin":Number(p),"aria-valuenow":Number(y),max:d,min:p,name:s,onChange:f,onKeyUp:N,ref:g,step:10**-x,type:"number",value:y})})})}));exports.NumberInput=u;
+`, U = w(function({ autoUpdate: t = !1, decimalPlaces: s = 0, defaultValue: m = 0, max: r, min: o, name: b, onEnter: n, tooltipMessage: f, ...y }, h) {
+  const a = s < 0 ? 0 : s, [c, p] = T(Number(m).toFixed(a)), x = l((e) => {
+    const i = d(e.target.value);
+    e.target.value.endsWith(".") ? p(e.target.value) : i >= Number(o) && i <= Number(r) && (p(String(i)), t && n(d(i.toFixed(a)))), e.stopPropagation();
+  }, [t, a, r, o, n]), v = l((e) => {
+    e.currentTarget.contains(e.relatedTarget) || p(Number(m).toFixed(a)), e.stopPropagation();
+  }, [a, m]), N = l((e) => {
+    e.stopPropagation(), e.key !== "Enter" || k(e.currentTarget.value) || n(d(e.currentTarget.value));
+  }, [n]);
+  return u(P, { onBlur: v, tabIndex: -1, children: u($, { id: "numberInputTooltip", tip: f, children: u(E, { ...y, "aria-label": b, "aria-valuemax": Number(r), "aria-valuemin": Number(o), "aria-valuenow": Number(c), max: r, min: o, name: b, onChange: x, onKeyUp: N, ref: h, step: 10 ** -a, type: "number", value: c }) }) });
+});
+export {
+  U as NumberInput
+};

package/dist/components/oauth-selector/index.js

@@ -1 +1,26 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),n=require("styled-components"),t=require("./option-container/index.js"),r=require("../button/index.js"),o=require("../container/index.js"),l=require("../../use-click-outside-BqkLISED.js");exports.OptionContainer=t.OptionContainer,exports.OAuthSelector=({align:s="end",buttonLabel:a="Add Credential",children:u,id:d,manualOption:c,providers:p})=>{const x=n.useTheme(),[b,C]=i.useState(!1),m=i.useRef(null);l.useClickOutside(m.current,(()=>{C(!1)}),!0);const j=i.useCallback((e=>{null==c||c.onClick(e),C(!1)}),[c]),h=i.useCallback((()=>{C((e=>!e))}),[C]),k=i.useCallback((e=>i=>{var n;null==(n=p[e])||n.onClick(i),C(!1)}),[p]);return e.jsxs(o.Container,{alignItems:s,display:"flex",flexDirection:"column",position:"relative",ref:m,width:"max-content",zIndex:10,children:[e.jsx(r.Button,{icon:"plus",onClick:h,variant:"primary",children:a}),e.jsxs(o.Container,{alignItems:"center",bgColor:"#fff",border:`1px solid ${x.palette.gray[200]}`,borderRadius:"4px",display:"flex",gap:.5,height:"78px",id:d,pb:.5,pl:.75,position:"absolute",pr:.75,pt:.5,shadow:"md",top:"40px",visibility:b?"visible":"hidden",zIndex:10,children:[Object.keys(p).map((i=>e.jsx(t.OptionContainer,{onClick:k(i),provider:i},i))),void 0===c?void 0:e.jsx(t.OptionContainer,{icon:"square-plus",label:c.label??"Add manually",onClick:j}),u]})]})};
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import { useState as y, useRef as x, useCallback as n } from "react";
+import { useTheme as O } from "styled-components";
+import { OptionContainer as p } from "./option-container/index.js";
+import { Button as I } from "../button/index.js";
+import { Container as d } from "../container/index.js";
+import { u as j } from "../../use-click-outside-BtZLIoU1.mjs";
+const D = ({ align: m = "end", buttonLabel: c = "Add Credential", children: u, id: b, manualOption: e, providers: r }) => {
+  const f = O(), [h, o] = y(!1), a = x(null);
+  j(a.current, () => {
+    o(!1);
+  }, !0);
+  const C = n((i) => {
+    e == null || e.onClick(i), o(!1);
+  }, [e]), v = n(() => {
+    o((i) => !i);
+  }, [o]), g = n((i) => (k) => {
+    var l;
+    (l = r[i]) == null || l.onClick(k), o(!1);
+  }, [r]);
+  return s(d, { alignItems: m, display: "flex", flexDirection: "column", position: "relative", ref: a, width: "max-content", zIndex: 10, children: [t(I, { icon: "plus", onClick: v, variant: "primary", children: c }), s(d, { alignItems: "center", bgColor: "#fff", border: `1px solid ${f.palette.gray[200]}`, borderRadius: "4px", display: "flex", gap: 0.5, height: "78px", id: b, pb: 0.5, pl: 0.75, position: "absolute", pr: 0.75, pt: 0.5, shadow: "md", top: "40px", visibility: h ? "visible" : "hidden", zIndex: 10, children: [Object.keys(r).map((i) => t(p, { onClick: g(i), provider: i }, i)), e === void 0 ? void 0 : t(p, { icon: "square-plus", label: e.label ?? "Add manually", onClick: C }), u] })] });
+};
+export {
+  D as OAuthSelector,
+  p as OptionContainer
+};

package/dist/components/oauth-selector/option-container/index.js

@@ -1 +1,15 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("styled-components"),i=require("../../../index-TKLFHcRp.js"),n=require("../../container/index.js"),r=require("../../icon/index.js");require("../../typography/heading/index.js"),require("../../typography/span/index.js");const o=require("../../typography/text/index.js"),a={Azure:"integrates/autoenrollment/azureIcon",Bitbucket:"integrates/autoenrollment/bitbucketLogo",GitHub:"integrates/autoenrollment/githubLogo",GitLab:"integrates/autoenrollment/gitlabIcon"};exports.OptionContainer=({icon:l,label:s,onClick:c,onlyLabel:p=!1,provider:u="GitLab"})=>{const d=t.useTheme();return e.jsxs(n.Container,{alignItems:"center",bgColorHover:d.palette.gray[100],borderRadius:"4px",cursor:"pointer",display:"flex",flexDirection:"column",gap:.25,height:"62px",justify:"center",minWidth:"64px",onClick:c,pb:.5,pl:.25,pr:.25,pt:.5,children:[!p&&e.jsx(n.Container,{height:"24px",width:"24px",children:void 0===l?e.jsx(i.MemoizedImage,{alt:`${u} Logo`,height:"100%",publicId:a[u],width:"100%"}):e.jsx(r.Icon,{icon:l,iconColor:"#000",iconSize:"sm",iconType:"fa-light"})}),e.jsx(n.Container,{alignItems:"center",display:"flex",minWidth:"24px",children:e.jsx(o.Text,{color:d.palette.gray[800],display:"inline",size:"xs",textAlign:"center",whiteSpace:p?"break-spaces":"nowrap",wordWrap:"unset",children:s??u})})]})};
+import { jsxs as p, jsx as e } from "react/jsx-runtime";
+import { useTheme as s } from "styled-components";
+import { M as c } from "../../../index-BwFnfaRh.mjs";
+import { Container as i } from "../../container/index.js";
+import { Icon as m } from "../../icon/index.js";
+import "../../typography/heading/index.js";
+import "../../typography/span/index.js";
+import { Text as g } from "../../typography/text/index.js";
+const h = { Azure: "integrates/autoenrollment/azureIcon", Bitbucket: "integrates/autoenrollment/bitbucketLogo", GitHub: "integrates/autoenrollment/githubLogo", GitLab: "integrates/autoenrollment/gitlabIcon" }, L = ({ icon: o, label: a, onClick: l, onlyLabel: r = !1, provider: t = "GitLab" }) => {
+  const n = s();
+  return p(i, { alignItems: "center", bgColorHover: n.palette.gray[100], borderRadius: "4px", cursor: "pointer", display: "flex", flexDirection: "column", gap: 0.25, height: "62px", justify: "center", minWidth: "64px", onClick: l, pb: 0.5, pl: 0.25, pr: 0.25, pt: 0.5, children: [!r && e(i, { height: "24px", width: "24px", children: o === void 0 ? e(c, { alt: `${t} Logo`, height: "100%", publicId: h[t], width: "100%" }) : e(m, { icon: o, iconColor: "#000", iconSize: "sm", iconType: "fa-light" }) }), e(i, { alignItems: "center", display: "flex", minWidth: "24px", children: e(g, { color: n.palette.gray[800], display: "inline", size: "xs", textAlign: "center", whiteSpace: r ? "break-spaces" : "nowrap", wordWrap: "unset", children: a ?? t }) })] });
+};
+export {
+  L as OptionContainer
+};

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

@@ -1,5 +1,84 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("./recommended-tag/index.js"),t=require("styled-components"),i=require("../button/index.js"),a=require("../colors/index.js"),r=require("../container/index.js"),s=require("../typography/heading/index.js");require("../typography/span/index.js");const o=require("../typography/text/index.js"),d=t.styled.div`
-  ${({className:e,theme:n})=>`\n    align-items: flex-start;\n    border-radius: ${n.spacing[1]};\n    background: ${n.palette.white};\n    display: flex;\n    flex-direction: column;\n    gap: ${n.spacing[1]};\n    padding: ${n.spacing[1.5]};\n    position: relative;\n    width: 320px;\n\n    button {\n      text-align: center;\n      width: 100%;\n    }\n\n    ${"essential"===e?`border: 2px solid ${n.palette.gray[300]};`:`\n          box-shadow: 0px 9px 18px 0px rgba(243, 38, 55, 0.06),\n            0px 18px 27px 0px rgba(243, 38, 55, 0.10);\n\n          &::before {\n            background: ${n.palette.gradients["01"]} border-box;\n            border-radius: ${n.spacing[1]};\n            content: "";\n            position: absolute;\n            inset: 0;\n            border: 2px solid transparent;\n            mask:\n              linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);\n            mask-composite: exclude;\n          }\n        `}\n  `}
-`;t.styled.div`
-  ${({className:e,theme:n})=>`\n    align-items: flex-start;\n    border-radius: ${n.spacing[1]};\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    gap: ${n.spacing[1.5]};\n    padding: ${n.spacing[1.5]};\n    width: 466px;\n\n    button {\n      text-align: center;\n      width: 100%;\n    }\n\n    ${"essential"===e?`\n          background: linear-gradient(\n            180deg,\n            ${n.palette.primary[400]} 0%,\n            ${n.palette.black} 100%\n          );`:`\n          background: ${n.palette.white};\n          box-shadow: 0px 9px 18px 0px rgba(243, 38, 55, 0.06),\n            0px 18px 27px 0px rgba(243, 38, 55, 0.10);\n        `}\n\n    @media screen and (max-width: ${n.breakpoints.mobile}) {\n      width: 320px;\n    }\n  `}
-`;const p={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\n        through our scanning tool.",priceAuthor:"$499",priceGroup:"$1,579"}};exports.PlanCard=({description:t,onClick:l,plan:c})=>{const{title:x,description:g,benefits:u,buttonText:b}=p[c],m=t??g;return e.jsxs(d,{className:c,children:[e.jsxs(r.Container,{display:"flex",flexDirection:"column",gap:.25,pt:"essential"===c?1.75:0,children:["advanced"===c&&e.jsx(n.RecommendedTag,{}),e.jsx(s.Heading,{color:a.theme.palette.gray[900],fontWeight:"semibold",size:"sm",sizeSm:"xs",children:x}),e.jsx(o.Text,{color:a.theme.palette.gray[400],fontWeight:"semibold",pb:"essential"===c?1.25:0,size:"sm",sizeSm:"xs",children:u})]}),e.jsx(o.Text,{lineSpacing:1.5,lineSpacingSm:1.25,pb:"advanced"===c?1.5:0,size:"md",sizeSm:"sm",children:m}),e.jsx(i.Button,{onClick:l,variant:"primary",children:b})]})};
+import { jsxs as a, jsx as i } 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 { 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 }) => `
+    align-items: flex-start;
+    border-radius: ${n.spacing[1]};
+    background: ${n.palette.white};
+    display: flex;
+    flex-direction: column;
+    gap: ${n.spacing[1]};
+    padding: ${n.spacing[1.5]};
+    position: relative;
+    width: 320px;
+
+    button {
+      text-align: center;
+      width: 100%;
+    }
+
+    ${t === "essential" ? `border: 2px solid ${n.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]};
+            content: "";
+            position: absolute;
+            inset: 0;
+            border: 2px solid transparent;
+            mask:
+              linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
+            mask-composite: exclude;
+          }
+        `}
+  `}
+`;
+o.div`
+  ${({ className: t, theme: n }) => `
+    align-items: flex-start;
+    border-radius: ${n.spacing[1]};
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: ${n.spacing[1.5]};
+    padding: ${n.spacing[1.5]};
+    width: 466px;
+
+    button {
+      text-align: center;
+      width: 100%;
+    }
+
+    ${t === "essential" ? `
+          background: linear-gradient(
+            180deg,
+            ${n.palette.primary[400]} 0%,
+            ${n.palette.black} 100%
+          );` : `
+          background: ${n.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}) {
+      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 })] });
+};
+export {
+  j as PlanCard
+};

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

@@ -1 +1,10 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../colors/index.js"),r=require("../../container/index.js");require("../../typography/heading/index.js"),require("../../typography/span/index.js");const i=require("../../typography/text/index.js");exports.RecommendedTag=()=>e.jsx(r.Container,{alignItems:"center",bgColor:t.theme.palette.primary[25],borderRadius:"8px",gap:.5,justify:"center",padding:[.125,.25,.125,.25],width:"max-content",children:e.jsx(i.Text,{bgGradient:t.theme.palette.gradients["01"],fontWeight:"semibold",size:"xs",textFill:"transparent",children:"Recommended"})});
+import { jsx as e } from "react/jsx-runtime";
+import { theme as t } from "../../colors/index.js";
+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" }) });
+export {
+  p as RecommendedTag
+};

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

@@ -1 +1,13 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),n=require("styled-components");require("../../typography/heading/index.js");const t=require("../../typography/span/index.js"),r=require("../../typography/text/index.js");exports.Description=({description:l="",highlightDescription:s=""})=>{const p=n.useTheme(),o="string"==typeof s,g=o?"":new RegExp(`(${s.join("|")})`,"u");return s.length>0?e.jsx(r.Text,{display:"inline",lineSpacing:1.5,size:"lg",textAlign:"center",children:o?e.jsxs(i.Fragment,{children:[e.jsx(t.Span,{color:p.palette.gray[600],display:"inline",fontWeight:"bold",lineSpacing:1.5,size:"lg",children:s}),l]}):l.split(g).map(((i,n)=>s.includes(i)?e.jsx(t.Span,{color:p.palette.gray[600],display:"inline",fontWeight:"bold",lineSpacing:1.5,size:"lg",children:i},`${n+1}-bold`):i))}):e.jsx(r.Text,{lineSpacing:1.5,size:"lg",textAlign:"center",children:l})};
+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 "../../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 });
+};
+export {
+  u as Description
+};

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

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

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

@@ -1,3 +1,45 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),e=require("styled-components"),i=require("../container/index.js"),r=require("../icon/index.js");require("../typography/heading/index.js"),require("../typography/span/index.js");const o=require("../typography/text/index.js"),s=e.styled.div`
-  ${({theme:n})=>`\n    height: ${n.spacing[1]};\n    width: ${n.spacing[1]};\n    position: relative;\n    flex-shrink: 0;\n\n    & .ellipse-1,\n    & .ellipse-2,\n    & .icon {\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      position: absolute;\n    }\n\n    & .ellipse-1 {\n      color: ${n.palette.warning[200]};\n      position: absolute;\n    }\n\n    & .ellipse-2 {\n      transform: scale(0.75) translate(-67%, -66%);\n      color: ${n.palette.warning[400]};\n    }\n\n    & .icon {\n      color: ${n.palette.warning[600]};\n      font-size: ${n.spacing[.5]};\n    }\n  `}
-`;exports.PremiumFeature=({margin:t,onClick:l,text:c})=>{const a=e.useTheme(),p=n.jsxs(s,{children:[n.jsx(r.Icon,{icon:"circle",iconClass:"ellipse-1",iconSize:"xs"}),n.jsx(r.Icon,{icon:"circle",iconClass:"ellipse-2",iconSize:"xs"}),n.jsx(r.Icon,{icon:"crown",iconClass:"icon",iconSize:"xs"})]});return void 0!==c?n.jsx(i.Container,{cursor:"pointer",display:"inline-block",mr:t,onClick:l,children:n.jsxs(i.Container,{alignItems:"center",bgColor:a.palette.warning[50],borderRadius:"4px",display:"flex",padding:[.25,.25,.25,.25],width:"fit-content",children:[p,n.jsx(o.Text,{color:a.palette.warning[500],display:"inline",ml:.25,size:"xs",children:c})]})}):n.jsx(i.Container,{display:"inline-block",mr:t,onClick:l,children:p})};
+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 { 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]};
+    position: relative;
+    flex-shrink: 0;
+
+    & .ellipse-1,
+    & .ellipse-2,
+    & .icon {
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      position: absolute;
+    }
+
+    & .ellipse-1 {
+      color: ${n.palette.warning[200]};
+      position: absolute;
+    }
+
+    & .ellipse-2 {
+      transform: scale(0.75) translate(-67%, -66%);
+      color: ${n.palette.warning[400]};
+    }
+
+    & .icon {
+      color: ${n.palette.warning[600]};
+      font-size: ${n.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 });
+};
+export {
+  $ as PremiumFeature
+};

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

@@ -1 +1,14 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("styled-components"),i=require("../container/index.js"),t=require("../icon/index.js");require("../typography/heading/index.js"),require("../typography/span/index.js");const o=require("../typography/text/index.js");exports.PriorityScore=({score:n})=>{const s=r.useTheme(),a=n>66||0===n?"priority-bars-high":n<=33?"priority-bars-low":"priority-bars-medium";return e.jsxs(i.Container,{alignItems:"center",display:"inline-flex",gap:.25,children:[e.jsx(t.Icon,{icon:a,iconClass:n<=66?"fa-kit-duotone":"",iconColor:n>0?s.palette.primary[500]:s.palette.gray[200],iconSize:"xs",iconType:"fa-kit",secondaryColor:s.palette.gray[200]}),e.jsx(o.Text,{color:s.palette.gray[800],size:"sm",textAlign:"right",children:n+"%"})]})};
+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 "../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 + "%" })] });
+};
+export {
+  x as PriorityScore
+};

package/dist/components/progress/index.js

@@ -1,5 +1,10 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),r=require("styled-components"),s=require("../../styles-C2CoGJl7.js"),i=require("../container/index.js"),n=r.styled(s.BaseComponent)`
-  animation: ${({$animationTime:e})=>`progress-bar ${e}s ease-in-out`};
+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`};
   animation-fill-mode: both;
 
   @keyframes progress-bar {
@@ -11,4 +16,19 @@
       width: 100%;
     }
   }
-`;exports.Progress=({progressTime:s=10,onComplete:o})=>{const a=r.useTheme(),[l,u]=t.useState(0);return t.useEffect((()=>{100===l&&(null==o||o())}),[l,o]),t.useEffect((()=>{const e=setInterval((()=>{u((e=>100===e?0:e+1))}),1e3*s/100);return()=>{clearInterval(e)}}),[l,s]),e.jsx(i.Container,{bgColor:a.palette.gray[200],height:"4px",children:e.jsx(n,{$animationTime:s,bgGradient:a.palette.gradients["01"],height:"100%",width:`${l}%`})})};
+`, 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));
+    return () => {
+      clearInterval(n);
+    };
+  }, [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}%` }) });
+};
+export {
+  w as Progress
+};