@fluidattacks/design 3.1.12 → 3.1.13

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

@@ -1,95 +1,153 @@
-import { jsxs as h, jsx as l } from "react/jsx-runtime";
+import { jsxs as $, jsx as n } 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 { 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 $ } from "../typography/text/index.js";
-const { getVariant: m } = g((n) => ({ compliance: `
+import { Text as f } from "../typography/text/index.js";
+const { getVariant: u } = h(
+  (r) => ({
+    compliance: `
       display: inline-flex;
 
       &.horizontal {
-        height: ${n.spacing[0.75]};
+        height: ${r.spacing[0.75]};
       }
       &.vertical {
-        width: ${n.spacing[0.75]};
+        width: ${r.spacing[0.75]};
       }
-    `, default: `
+    `,
+    default: `
       display: inline-flex;
 
       &.horizontal {
-        height: ${n.spacing[0.5]};
+        height: ${r.spacing[0.5]};
       }
       &.vertical {
-        width: ${n.spacing[0.5]};
+        width: ${r.spacing[0.5]};
       }
       .progress-bar {
-        background-color: ${n.palette.primary[500]};
+        background-color: ${r.palette.primary[500]};
       }
-    `, progressIndicator: `
+    `,
+    progressIndicator: `
       display: flex;
 
       &.horizontal {
-        height: ${n.spacing[0.125]};
+        height: ${r.spacing[0.125]};
       }
       &.vertical {
-        width: ${n.spacing[0.125]};
+        width: ${r.spacing[0.125]};
       }
       .progress-bar {
-        background-color: ${n.palette.primary[500]};
+        background-color: ${r.palette.primary[500]};
       }
-    `, progressIndicatorError: `
+    `,
+    progressIndicatorError: `
       display: flex;
 
       &.horizontal {
-        height: ${n.spacing[0.125]};
+        height: ${r.spacing[0.125]};
       }
       &.vertical {
-        width: ${n.spacing[0.125]};
+        width: ${r.spacing[0.125]};
       }
       .progress-bar {
-        background-color: ${n.palette.error[200]};
+        background-color: ${r.palette.error[200]};
       }
-    `, small: `
-      color: ${n.palette.primary[500]};
+    `,
+    small: `
+      color: ${r.palette.primary[500]};
       display: inline-flex;
 
       &.horizontal {
-        height: ${n.spacing[0.25]};
+        height: ${r.spacing[0.25]};
       }
       &.vertical {
-        width: ${n.spacing[0.25]};
+        width: ${r.spacing[0.25]};
       }
       .progress-bar {
-        background-color: ${n.palette.primary[500]};
+        background-color: ${r.palette.primary[500]};
       }
-    ` })), u = p.div`
-  ${({ theme: n, $minWidth: r, $orientation: e, $rounded: t, $variant: i }) => `
-    background-color: ${n.palette.gray[100]};
+    `
+  })
+), 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"};
-    ${e === "horizontal" ? "min-width" : "min-height"}: ${r}px;
-    ${e === "horizontal" ? "" : "height: 100%;"}
+    ${a === "horizontal" ? "min-width" : "min-height"}: ${i}px;
+    ${a === "horizontal" ? "" : "height: 100%;"}
 
-    ${m(n, i)}
+    ${u(r, o)}
 
   `}
-`, x = p.div`
-  ${({ theme: n, $percentage: r, $rounded: e, $variant: t }) => `
+`, m = p.div`
+  ${({ theme: r, $percentage: i, $rounded: a, $variant: t }) => `
     display: inline-flex;
-    width: ${r}%;
+    width: ${i}%;
     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"};
+    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"};
   `}
-`, 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] });
+`, 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
+      ]
+    }
+  );
 };
 export {
-  I as ProgressBar
+  C as ProgressBar
 };

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

@@ -1,22 +1,22 @@
-import { jsxs as s, jsx as t } from "react/jsx-runtime";
-import { forwardRef as h } from "react";
-import { styled as r } from "styled-components";
-const k = r.label`
-  ${({ theme: n }) => `
+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: ${n.palette.gray[600]};
+    color: ${r.palette.gray[600]};
     cursor: pointer;
-    font-family: ${n.typography.type.primary};
-    font-size: ${n.typography.text.sm};
-    font-weight: ${n.typography.weight.regular};
-    gap: ${n.spacing[0.5]};
-    line-height: ${n.typography.text.lg};
+    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: ${n.palette.gray[300]};
+      color: ${r.palette.gray[300]};
       cursor: not-allowed;
     }
 
@@ -33,30 +33,30 @@ const k = r.label`
       left: 0;
       height: 16px;
       width: 16px;
-      background-color: ${n.palette.white};
+      background-color: ${r.palette.white};
       border-radius: 50%;
-      border: 1px solid ${n.palette.gray[600]};
+      border: 1px solid ${r.palette.gray[600]};
     }
 
     input:disabled ~ .checkmark {
-      border: 1px solid ${n.palette.gray[300]};
-      background-color: ${n.palette.white};
+      border: 1px solid ${r.palette.gray[300]};
+      background-color: ${r.palette.white};
       cursor: not-allowed;
     }
 
     input:not(:disabled):checked ~ .checkmark {
-      background-color: ${n.palette.white};
-      border: 1px solid ${n.palette.primary[500]};
+      background-color: ${r.palette.white};
+      border: 1px solid ${r.palette.primary[500]};
     }
 
     input:not(:disabled):hover ~ .checkmark {
-      background-color: ${n.palette.white};
-      box-shadow: 0 0 0 4px ${n.palette.gray[100]};
+      background-color: ${r.palette.white};
+      box-shadow: 0 0 0 4px ${r.palette.gray[100]};
     }
 
     input:not(:disabled):hover:checked ~ .checkmark {
-      background-color: ${n.palette.white};
-      box-shadow: 0 0 0 4px ${n.palette.primary[50]};
+      background-color: ${r.palette.white};
+      box-shadow: 0 0 0 4px ${r.palette.primary[50]};
     }
 
     .checkmark::after {
@@ -68,7 +68,7 @@ const k = r.label`
       width: 8px;
       height: 8px;
       border-radius: 50%;
-      background: ${n.palette.primary[500]};
+      background: ${r.palette.primary[500]};
     }
 
     input:checked ~ .checkmark::after {
@@ -76,13 +76,50 @@ const k = r.label`
     }
 
     input:disabled:checked ~ .checkmark::after {
-      background-color: ${n.palette.gray[300]};
+      background-color: ${r.palette.gray[300]};
     }
 
   `}
-`, u = r.span.attrs({ className: "checkmark" })``, y = h(function({ defaultChecked: n = !1, disabled: e = !1, label: o, name: a, onChange: i, onClick: l, value: p, ...d }, c) {
-  return s(k, { "aria-disabled": e, "aria-label": a, role: "radiogroup", children: [t("input", { "aria-checked": n, "aria-disabled": e, "aria-label": a, defaultChecked: n, disabled: e, name: a, onChange: i, onClick: l, ref: c, type: "radio", value: p, ...d }), t(u, {}), o ?? null] });
+`, 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
+      ]
+    }
+  );
 });
 export {
-  y as RadioButton
+  $ as RadioButton
 };

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

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

package/dist/components/search/index.js

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