@fluidattacks/design 3.1.13 → 3.2.0

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

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

package/dist/components/progress/index.js

@@ -1,47 +1,7 @@
-import { jsx as o } from "react/jsx-runtime";
-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 {
-    0% {
-      width: 0;
-    }
-
-    100% {
-      width: 100%;
-    }
-  }
-`, 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(h);
-    };
-  }, [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}%`
-    }
-  ) });
-};
+import "react/jsx-runtime";
+import "react";
+import "styled-components";
+import { am as i } from "../../components-C7JPRIEW.mjs";
 export {
-  x as Progress
+  i as Progress
 };

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

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

package/dist/components/radio-button/index.js

@@ -1,125 +1,6 @@
-import { jsxs as k, jsx as e } from "react/jsx-runtime";
-import { forwardRef as u } from "react";
-import { styled as i } from "styled-components";
-const g = i.label`
-  ${({ theme: r }) => `
-    align-items: center;
-    display: flex;
-    color: ${r.palette.gray[600]};
-    cursor: pointer;
-    font-family: ${r.typography.type.primary};
-    font-size: ${r.typography.text.sm};
-    font-weight: ${r.typography.weight.regular};
-    gap: ${r.spacing[0.5]};
-    line-height: ${r.typography.text.lg};
-    text-align: left;
-    position: relative;
-
-    &[aria-disabled="true"] {
-      color: ${r.palette.gray[300]};
-      cursor: not-allowed;
-    }
-
-    input {
-      position: absolute;
-      opacity: 0;
-      cursor: pointer;
-      width: 0;
-    }
-
-    .checkmark {
-      position: relative;
-      top: 0;
-      left: 0;
-      height: 16px;
-      width: 16px;
-      background-color: ${r.palette.white};
-      border-radius: 50%;
-      border: 1px solid ${r.palette.gray[600]};
-    }
-
-    input:disabled ~ .checkmark {
-      border: 1px solid ${r.palette.gray[300]};
-      background-color: ${r.palette.white};
-      cursor: not-allowed;
-    }
-
-    input:not(:disabled):checked ~ .checkmark {
-      background-color: ${r.palette.white};
-      border: 1px solid ${r.palette.primary[500]};
-    }
-
-    input:not(:disabled):hover ~ .checkmark {
-      background-color: ${r.palette.white};
-      box-shadow: 0 0 0 4px ${r.palette.gray[100]};
-    }
-
-    input:not(:disabled):hover:checked ~ .checkmark {
-      background-color: ${r.palette.white};
-      box-shadow: 0 0 0 4px ${r.palette.primary[50]};
-    }
-
-    .checkmark::after {
-      content: "";
-      position: absolute;
-      display: none;
-      top: 3px;
-      left: 3px;
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-      background: ${r.palette.primary[500]};
-    }
-
-    input:checked ~ .checkmark::after {
-      display: block;
-    }
-
-    input:disabled:checked ~ .checkmark::after {
-      background-color: ${r.palette.gray[300]};
-    }
-
-  `}
-`, b = i.span.attrs({ className: "checkmark" })``, $ = u(function({
-  defaultChecked: t = !1,
-  disabled: a = !1,
-  label: l,
-  name: o,
-  onChange: p,
-  onClick: c,
-  value: d,
-  ...n
-}, s) {
-  return /* @__PURE__ */ k(
-    g,
-    {
-      "aria-disabled": a,
-      "aria-label": o,
-      role: "radiogroup",
-      children: [
-        /* @__PURE__ */ e(
-          "input",
-          {
-            "aria-checked": t,
-            "aria-disabled": a,
-            "aria-label": o,
-            defaultChecked: t,
-            disabled: a,
-            name: o,
-            onChange: p,
-            onClick: c,
-            ref: s,
-            type: "radio",
-            value: d,
-            ...n
-          }
-        ),
-        /* @__PURE__ */ e(b, {}),
-        l ?? null
-      ]
-    }
-  );
-});
+import "react/jsx-runtime";
+import "react";
+import { ao as i } from "../../components-C7JPRIEW.mjs";
 export {
-  $ as RadioButton
+  i as RadioButton
 };

package/dist/components/scroll-button/index.js

@@ -1,42 +1,6 @@
-import { jsx as s } from "react/jsx-runtime";
-import { useState as i, useEffect as p, useCallback as m } from "react";
-import { styled as a } from "styled-components";
-import { IconButton as u } from "../icon-button/index.js";
-const d = a.div.attrs({
-  className: "comp-scroll-up"
-})`
-  bottom: 15px;
-  position: fixed;
-  right: 140px;
-  z-index: 100;
-`, g = ({
-  scrollerId: t = "dashboard",
-  visibleAt: e = 500
-}) => {
-  const [n, l] = i(!1), [o, r] = i(null);
-  p(() => {
-    r(document.getElementById(t)), o == null || o.addEventListener("scroll", () => {
-      l(o.scrollTop > e);
-    });
-  }, [o, t, e]);
-  const c = m(() => {
-    o == null || o.scrollTo({
-      behavior: "smooth",
-      top: 0
-    });
-  }, [o]);
-  return n ? /* @__PURE__ */ s(d, { children: /* @__PURE__ */ s(
-    u,
-    {
-      height: "40px",
-      icon: "arrow-up",
-      iconSize: "sm",
-      id: "scroll-up",
-      onClick: c,
-      width: "40px"
-    }
-  ) }) : null;
-};
+import "react/jsx-runtime";
+import "react";
+import { ap as m } from "../../components-C7JPRIEW.mjs";
 export {
-  g as ScrollUpButton
+  m as ScrollUpButton
 };

package/dist/components/search/index.js

@@ -1,105 +1,9 @@
-import { jsxs as l, jsx as r } from "react/jsx-runtime";
-import { u as h } from "../../index-DwznImvK.mjs";
-import { isEmpty as $ } from "lodash";
-import { forwardRef as b, useState as w, useCallback as S, Fragment as k } from "react";
-import { styled as i, useTheme as C } from "styled-components";
-import { Icon as z } from "../icon/index.js";
-import { IconButton as c } from "../icon-button/index.js";
-import { u as O } from "../../use-click-outside-BUll8Ag-.mjs";
-const v = i.input`
-  ${({ theme: o }) => `
-    background: none;
-    border: none !important;
-    box-shadow: none;
-    box-sizing: border-box;
-    color: ${o.palette.gray[800]};
-    font-family: ${o.typography.type.primary};
-    font-size: ${o.typography.text.sm};
-    outline: none;
-    width: 100%;
-
-    &::placeholder {
-      color: ${o.palette.gray[400]};
-    }
-  `}
-`, I = i.div`
-  ${({ theme: o }) => `
-    align-items: center;
-    background-color: ${o.palette.white};
-    border: 1px solid ${o.palette.gray[300]};
-    border-radius: ${o.spacing[0.5]};
-    display: flex;
-    height: 40px;
-    gap: ${o.spacing[0.5]};
-    padding: ${o.spacing[0.5]};
-    width: 100%;
-
-    &:hover {
-      border-color: ${o.palette.gray[600]};
-    }
-
-    &:focus-within {
-      border: 2px solid ${o.palette.black};
-    }
-  `}
-`, T = i.div`
-  ${({ theme: o }) => `
-    background-color: ${o.palette.white};
-    border-radius: ${o.spacing[0.5]};
-    width: 250px;
-  `}
-`, G = b(function({ name: n, smallSearch: d = !1, value: a, ...g }, f) {
-  const t = C(), [y, s] = w(!1), { refs: e, floatingStyles: u } = h(), m = S(() => {
-    s((x) => !x);
-  }, []);
-  O(
-    e.floating.current,
-    () => {
-      s(!1);
-    },
-    !0
-  );
-  const p = /* @__PURE__ */ l(I, { children: [
-    /* @__PURE__ */ r(
-      z,
-      {
-        icon: "magnifying-glass",
-        iconColor: t.palette.gray[700],
-        iconSize: "xs",
-        iconType: "fa-light"
-      }
-    ),
-    /* @__PURE__ */ r(v, { ...g, id: n, name: n, ref: f, value: a }),
-    !$(a) && /* @__PURE__ */ r(
-      c,
-      {
-        icon: "xmark",
-        iconColor: t.palette.gray[300],
-        iconSize: "xs",
-        iconType: "fa-light",
-        px: 0.25,
-        py: 0.25,
-        type: "reset",
-        variant: "ghost"
-      }
-    )
-  ] });
-  return d ? /* @__PURE__ */ l(k, { children: [
-    /* @__PURE__ */ r(
-      c,
-      {
-        border: `1px solid ${t.palette.gray[300]} !important`,
-        icon: "magnifying-glass",
-        iconSize: "xs",
-        iconType: "fa-light",
-        onClick: m,
-        ref: e.setReference,
-        variant: "ghost"
-      }
-    ),
-    y ? /* @__PURE__ */ r(T, { ref: e.setFloating, style: u, children: p }) : void 0
-  ] }) : p;
-});
+import "react/jsx-runtime";
+import "../../vendor-_XDhaIzo.mjs";
+import "lodash";
+import "react";
+import "styled-components";
+import { aq as e } from "../../components-C7JPRIEW.mjs";
 export {
-  G as Search
+  e as Search
 };