@fluidattacks/design 3.1.12 → 3.1.14

package/dist/components/notification/index.js

@@ -1,68 +1,7 @@
-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" })] });
-};
+import "react/jsx-runtime";
+import "react";
+import "styled-components";
+import { af as p } from "../../components-C2JBXbtI.mjs";
 export {
-  j as Notification
+  p as Notification
 };

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

@@ -1,30 +1,6 @@
-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: t }) => t.palette.white};
-  display: flex;
-  font-size: 6px;
-  font-weight: ${({ theme: t }) => t.typography.weight.bold};
-  justify-content: center;
-`, 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 }) });
-});
+import "react/jsx-runtime";
+import "react";
+import { ag as a } from "../../components-C2JBXbtI.mjs";
 export {
-  g as NotificationSign
+  a as NotificationSign
 };

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

@@ -1,52 +1,7 @@
-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: t }) => `1px solid ${t.palette.gray[300]}`};
-  border-radius: 4px;
-  background: none;
-  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;
-`, E = g.input`
-  width: 4em;
-  appearance: textfield;
-  border-style: none;
-  padding: 0.5rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  padding-left: 0.5rem;
-  background: none;
-
-  &:focus {
-    border-color: unset;
-    box-shadow: none;
-    outline: none;
-  }
-
-  &::-webkit-outer-spin-button,
-  &::-webkit-inner-spin-button {
-    opacity: 1;
-  }
-`, 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 }) }) });
-});
+import "react/jsx-runtime";
+import "lodash";
+import "react";
+import { ah as i } from "../../components-C2JBXbtI.mjs";
 export {
-  U as NumberInput
+  i as NumberInput
 };

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

@@ -1,26 +1,8 @@
-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] })] });
-};
+import "react/jsx-runtime";
+import "react";
+import "styled-components";
+import { ai as p, aj as e } from "../../components-C2JBXbtI.mjs";
 export {
-  D as OAuthSelector,
-  p as OptionContainer
+  p as OAuthSelector,
+  e as OptionContainer
 };

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

@@ -1,15 +1,6 @@
-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 }) })] });
-};
+import "react/jsx-runtime";
+import "styled-components";
+import { aj as p } from "../../../components-C2JBXbtI.mjs";
 export {
-  L as OptionContainer
+  p as OptionContainer
 };

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

@@ -1,84 +1,5 @@
-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 })] });
-};
+import "react/jsx-runtime";
+import { bo as m } from "../../components-C2JBXbtI.mjs";
 export {
-  j as PlanCard
+  m as PlanCard
 };

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

@@ -1,10 +1,5 @@
-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" }) });
+import "react/jsx-runtime";
+import { bn as r } from "../../../components-C2JBXbtI.mjs";
 export {
-  p as RecommendedTag
+  r as RecommendedTag
 };

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

@@ -1,13 +1,7 @@
-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 });
-};
+import "react/jsx-runtime";
+import "react";
+import "styled-components";
+import { bp as m } from "../../../components-C2JBXbtI.mjs";
 export {
-  u as Description
+  m as Description
 };

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

@@ -1,23 +1,9 @@
-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;
-};
+import "react/jsx-runtime";
+import "lodash";
+import "react";
+import "react-dom";
+import "styled-components";
+import { an as e } from "../../components-C2JBXbtI.mjs";
 export {
-  F as PopUp
+  e as PopUp
 };

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

@@ -1,45 +1,6 @@
-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 });
-};
+import "react/jsx-runtime";
+import "styled-components";
+import { ak as t } from "../../components-C2JBXbtI.mjs";
 export {
-  $ as PremiumFeature
+  t as PremiumFeature
 };

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

@@ -1,14 +1,6 @@
-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 + "%" })] });
-};
+import "react/jsx-runtime";
+import "styled-components";
+import { al as m } from "../../components-C2JBXbtI.mjs";
 export {
-  x as PriorityScore
+  m as PriorityScore
 };

package/dist/components/progress/index.js

@@ -1,34 +1,7 @@
-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 {
-    0% {
-      width: 0;
-    }
-
-    100% {
-      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));
-    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}%` }) });
-};
+import "react/jsx-runtime";
+import "react";
+import "styled-components";
+import { am as i } from "../../components-C2JBXbtI.mjs";
 export {
-  w as Progress
+  i as Progress
 };

package/dist/components/progress-bar/index.js

@@ -1,95 +1,5 @@
-import { jsxs as h, jsx as l } from "react/jsx-runtime";
-import { styled as p } from "styled-components";
-import { v as g } from "../../utils-CQvBF-wY.mjs";
-import "../../styles-C3cZmKVJ.mjs";
-import { Container as d } from "../container/index.js";
-import "../typography/heading/index.js";
-import "../typography/span/index.js";
-import { Text as $ } from "../typography/text/index.js";
-const { getVariant: m } = g((n) => ({ compliance: `
-      display: inline-flex;
-
-      &.horizontal {
-        height: ${n.spacing[0.75]};
-      }
-      &.vertical {
-        width: ${n.spacing[0.75]};
-      }
-    `, default: `
-      display: inline-flex;
-
-      &.horizontal {
-        height: ${n.spacing[0.5]};
-      }
-      &.vertical {
-        width: ${n.spacing[0.5]};
-      }
-      .progress-bar {
-        background-color: ${n.palette.primary[500]};
-      }
-    `, progressIndicator: `
-      display: flex;
-
-      &.horizontal {
-        height: ${n.spacing[0.125]};
-      }
-      &.vertical {
-        width: ${n.spacing[0.125]};
-      }
-      .progress-bar {
-        background-color: ${n.palette.primary[500]};
-      }
-    `, progressIndicatorError: `
-      display: flex;
-
-      &.horizontal {
-        height: ${n.spacing[0.125]};
-      }
-      &.vertical {
-        width: ${n.spacing[0.125]};
-      }
-      .progress-bar {
-        background-color: ${n.palette.error[200]};
-      }
-    `, small: `
-      color: ${n.palette.primary[500]};
-      display: inline-flex;
-
-      &.horizontal {
-        height: ${n.spacing[0.25]};
-      }
-      &.vertical {
-        width: ${n.spacing[0.25]};
-      }
-      .progress-bar {
-        background-color: ${n.palette.primary[500]};
-      }
-    ` })), u = p.div`
-  ${({ theme: n, $minWidth: r, $orientation: e, $rounded: t, $variant: i }) => `
-    background-color: ${n.palette.gray[100]};
-    border-radius: ${t ? "100px" : "unset"};
-    ${e === "horizontal" ? "min-width" : "min-height"}: ${r}px;
-    ${e === "horizontal" ? "" : "height: 100%;"}
-
-    ${m(n, i)}
-
-  `}
-`, x = p.div`
-  ${({ theme: n, $percentage: r, $rounded: e, $variant: t }) => `
-    display: inline-flex;
-    width: ${r}%;
-    max-width: 100%;
-    min-width: 0%;
-    height: 100%;
-    border-radius: ${e ? "100px" : "unset"};
-    border-end-end-radius: ${e && r < 100 ? "0" : "inherit"};
-    border-start-end-radius: ${e && r < 100 ? "0" : "inherit"};
-    background-color: ${t === "compliance" ? ((i, a) => a < 50 ? i.palette.error[500] : a < 80 ? i.palette.warning[500] : i.palette.success[500])(n, r) : "inherit"};
-  `}
-`, I = ({ minWidth: n = 100, percentage: r, percentageLocation: e = "right", showPercentage: t = !1, orientation: i = "horizontal", rounded: a = !0, variant: s = "default" }) => {
-  const o = t && e === "left", c = t ? l(d, { alignItems: "center", display: "flex", justify: o ? "flex-end" : "flex-start", width: "40px", children: l($, { ml: 0.5, mr: o ? 0.5 : 0, size: "sm", children: `${r}%` }) }) : null;
-  return h(d, { alignItems: "center", display: "inline-flex", flexDirection: o ? "row-reverse" : "row", height: i === "horizontal" ? "auto" : "100%", maxWidth: o ? `${n + 43}px` : void 0, minWidth: o ? `${n + 43}px` : void 0, textAlign: "end", children: [l(u, { $minWidth: n, $orientation: i, $rounded: a, $variant: s, className: i, children: l(x, { $percentage: r, $rounded: a, $variant: s, className: "progress-bar" }) }), c] });
-};
+import "react/jsx-runtime";
+import { bq as a } from "../../components-C2JBXbtI.mjs";
 export {
-  I as ProgressBar
+  a as ProgressBar
 };