@fluidattacks/design 3.1.12 → 3.1.14

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

@@ -1,88 +1,6 @@
-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 }) => `
-    align-items: center;
-    display: flex;
-    color: ${n.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};
-    text-align: left;
-    position: relative;
-
-    &[aria-disabled="true"] {
-      color: ${n.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: ${n.palette.white};
-      border-radius: 50%;
-      border: 1px solid ${n.palette.gray[600]};
-    }
-
-    input:disabled ~ .checkmark {
-      border: 1px solid ${n.palette.gray[300]};
-      background-color: ${n.palette.white};
-      cursor: not-allowed;
-    }
-
-    input:not(:disabled):checked ~ .checkmark {
-      background-color: ${n.palette.white};
-      border: 1px solid ${n.palette.primary[500]};
-    }
-
-    input:not(:disabled):hover ~ .checkmark {
-      background-color: ${n.palette.white};
-      box-shadow: 0 0 0 4px ${n.palette.gray[100]};
-    }
-
-    input:not(:disabled):hover:checked ~ .checkmark {
-      background-color: ${n.palette.white};
-      box-shadow: 0 0 0 4px ${n.palette.primary[50]};
-    }
-
-    .checkmark::after {
-      content: "";
-      position: absolute;
-      display: none;
-      top: 3px;
-      left: 3px;
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-      background: ${n.palette.primary[500]};
-    }
-
-    input:checked ~ .checkmark::after {
-      display: block;
-    }
-
-    input:disabled:checked ~ .checkmark::after {
-      background-color: ${n.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] });
-});
+import "react/jsx-runtime";
+import "react";
+import { ao as i } from "../../components-C2JBXbtI.mjs";
 export {
-  y as RadioButton
+  i as RadioButton
 };

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

@@ -1,24 +1,6 @@
-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" })`
-  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);
-    });
-  }, [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;
-};
+import "react/jsx-runtime";
+import "react";
+import { ap as m } from "../../components-C2JBXbtI.mjs";
 export {
-  v as ScrollUpButton
+  m as ScrollUpButton
 };

package/dist/components/search/index.js

@@ -1,63 +1,9 @@
-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 }) => `
-    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};
-    outline: none;
-    width: 100%;
-
-    &::placeholder {
-      color: ${e.palette.gray[400]};
-    }
-  `}
-`, T = r.div`
-  ${({ theme: e }) => `
-    align-items: center;
-    background-color: ${e.palette.white};
-    border: 1px solid ${e.palette.gray[300]};
-    border-radius: ${e.spacing[0.5]};
-    display: flex;
-    height: 40px;
-    gap: ${e.spacing[0.5]};
-    padding: ${e.spacing[0.5]};
-    width: 100%;
-
-    &:hover {
-      border-color: ${e.palette.gray[600]};
-    }
-
-    &:focus-within {
-      border: 2px solid ${e.palette.black};
-    }
-  `}
-`, j = r.div`
-  ${({ theme: e }) => `
-    background-color: ${e.palette.white};
-    border-radius: ${e.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);
-  }, []);
-  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;
-});
+import "react/jsx-runtime";
+import "../../vendor-CVMqCpkZ.mjs";
+import "lodash";
+import "react";
+import "styled-components";
+import { aq as e } from "../../components-C2JBXbtI.mjs";
 export {
-  G as Search
+  e as Search
 };

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

@@ -1,32 +1,6 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { useState as y, useRef as S, useCallback as l } from "react";
-import { S as D, a as H, b as W, c as j, d as m, I as p } from "../../index-BLbKylyw.mjs";
-import { Button as A } from "../button/index.js";
-import { M as B } from "../../index-BwFnfaRh.mjs";
-import { theme as f } from "../colors/index.js";
-import { Icon as z } from "../icon/index.js";
-import { Heading as R } from "../typography/heading/index.js";
-import "../typography/span/index.js";
-import { Text as h } from "../typography/text/index.js";
-import { u as q } from "../../use-click-outside-BtZLIoU1.mjs";
-const F = [{ hit: { slug: "/services/continuous-hacking/", title: "Continuous Hacking" }, icon: "infinity" }, { hit: { slug: "/platform/", title: "Platform" }, icon: "sidebar" }, { hit: { slug: "/plans/", title: "Plans" }, icon: "star-christmas" }, { hit: { slug: "/blog/", title: "Blog" }, icon: "pen-line" }], C = { hit: { slug: "/contact-us/", title: "Contact Support" }, icon: "envelope" }, Y = ({ items: n, placeholder: b = "Search", refine: d, query: v }) => {
-  const [o, k] = y(v), [w, u] = y(!1), g = S(null), a = S(null), s = o.length >= 2, r = l((t) => {
-    k(t), d(t);
-  }, [d]), c = l(() => {
-    r("");
-  }, [r]), I = l(() => {
-    u(!0);
-  }, []), N = l((t) => {
-    r(t.currentTarget.value);
-  }, [r]), P = l((t) => {
-    t.preventDefault(), t.stopPropagation(), c(), a.current && a.current.focus();
-  }, [c]), $ = l((t) => {
-    t.preventDefault(), t.stopPropagation(), a.current && a.current.blur();
-  }, []);
-  return q(g.current, () => {
-    c(), u(!1);
-  }, !0), i(D, { ref: g, children: [i(H, { action: "", noValidate: !0, onReset: P, onSubmit: $, role: "search", children: [i("div", { className: "flex gap-2 w-full", children: [e("div", { className: "h-10 p-2", children: e(z, { icon: "magnifying-glass", iconSize: "sm", iconType: "fa-light" }) }), e(W, { autoCapitalize: "off", autoComplete: "off", autoCorrect: "off", maxLength: 512, onChange: N, onFocus: I, placeholder: b, ref: a, spellCheck: !1, type: "search", value: o })] }), s && e(j, { type: "reset", children: e(z, { icon: "xmark", iconSize: "sm", iconType: "fa-light" }) })] }), w && o.length < 2 && i(m, { children: [e(h, { color: f.palette.gray[400], fontWeight: "bold", lineSpacing: 1.5, size: "md", sizeSm: "sm", children: "Suggested" }), e("div", { className: "flex flex-col items-start self-stretch", children: F.map(({ hit: t, icon: x }, T) => e(p, { hit: t, icon: x, showIcon: !0 }, `${x}-${T}`)) }), e(h, { color: f.palette.gray[400], fontWeight: "bold", lineSpacing: 1.5, size: "md", sizeSm: "sm", children: "Can’t find what you’re looking for?" }), e(p, { hit: C.hit, icon: C.icon, showIcon: !0 })] }), s && n.length > 0 && i(m, { $showHits: s, children: [e(h, { color: f.palette.gray[400], fontWeight: "bold", lineSpacing: 1.5, size: "md", sizeSm: "sm", children: "Results" }), e("div", { className: "flex flex-col items-start self-stretch", children: n.map((t) => e(p, { hit: t }, t.objectID)) })] }), s && n.length === 0 && e(m, { $empty: n.length === 0, children: i("div", { className: "items-center	flex flex-col	gap-4 py-[90px] w-full", children: [e(B, { height: 96, publicId: "airs/search-bar/empty-state-icon", width: 96 }), e(R, { display: "flex", size: "sm", sizeSm: "xs", textAlign: "center", children: "No results found" }), i(h, { display: "flex", lineSpacing: 1.5, size: "md", sizeSm: "sm", textAlign: "center", children: [`“${o}” did not match.`, e("br", {}), "Please try again."] }), e(A, { onClick: c, variant: "secondary", children: "Clear search" })] }) })] });
-};
+import "react/jsx-runtime";
+import "react";
+import { ar as p } from "../../components-C2JBXbtI.mjs";
 export {
-  Y as SearchBar
+  p as SearchBar
 };

package/dist/components/search-bar/item-searching/index.js

@@ -1,10 +1,5 @@
 import "react/jsx-runtime";
-import { I } from "../../../index-BLbKylyw.mjs";
-import "../../colors/index.js";
-import "../../icon/index.js";
-import "../../typography/heading/index.js";
-import "../../typography/span/index.js";
-import "../../typography/text/index.js";
+import { br as o } from "../../../components-C2JBXbtI.mjs";
 export {
-  I as ItemSearching
+  o as ItemSearching
 };

package/dist/components/severity-badge/index.js

@@ -1,14 +1,6 @@
-import { jsxs as d, jsx as o } from "react/jsx-runtime";
-import { useTheme as n } from "styled-components";
-import { theme as e } from "../colors/index.js";
-import { Container as l } from "../container/index.js";
-import "../typography/heading/index.js";
-import "../typography/span/index.js";
-import { Text as a } from "../typography/text/index.js";
-const x = { critical: { bgColor: e.palette.primary[700], colorL: e.palette.gray[800], colorR: e.palette.white }, disable: { bgColor: e.palette.gray[200], colorL: e.palette.gray[400], colorR: e.palette.gray[400] }, high: { bgColor: e.palette.error[500], colorL: e.palette.gray[800], colorR: e.palette.white }, low: { bgColor: e.palette.warning[200], colorL: e.palette.gray[800], colorR: e.palette.gray[800] }, medium: { bgColor: e.palette.warning[500], colorL: e.palette.gray[800], colorR: e.palette.gray[800] } }, L = ({ textL: r, textR: p, variant: i }) => {
-  const s = n(), { bgColor: t, colorL: c, colorR: g } = x[i];
-  return d(l, { alignItems: "flex-start", display: "inline-flex", children: [r ? o(l, { alignItems: "center", bgColor: s.palette.white, border: `1px solid ${t}`, borderRadius: "4px 0px 0px 4px", display: "flex", justify: "center", padding: [0, 0.25, 0, 0.25], children: o(a, { color: c, size: "xs", children: r }) }) : void 0, o(l, { alignItems: "center", bgColor: t, border: `1px solid ${t}`, borderRadius: r ? "0px 4px 4px 0px" : "4px", display: "flex", padding: r ? [0, 0.25, 0, 0.125] : [0, 0.25, 0, 0.25], pb: 0.125, pl: 0.125, pr: 0.125, pt: 0.125, children: o(a, { color: g, size: "xs", children: p }) })] });
-};
+import "react/jsx-runtime";
+import "styled-components";
+import { as as a } from "../../components-C2JBXbtI.mjs";
 export {
-  L as SeverityBadge
+  a as SeverityBadge
 };

package/dist/components/severity-overview/badge/index.js

@@ -1,18 +1,6 @@
-import { jsxs as f, jsx as t } from "react/jsx-runtime";
-import { capitalize as m } from "lodash";
-import { theme as e } from "../../colors/index.js";
-import { Container as s } from "../../container/index.js";
-import { T as C } from "../../../index-D-lcuEHY.mjs";
-import "../../typography/heading/index.js";
-import "../../typography/span/index.js";
-import { Text as d } from "../../typography/text/index.js";
-const j = ({ variant: r, value: a }) => {
-  const { iconColor: x, iconText: h, iconTextColor: g, textColor: y } = ((i, o) => {
-    const l = { critical: e.palette.primary[700], high: e.palette.error[500], low: e.palette.warning[200], medium: e.palette.warning[500], none: e.palette.gray[200] }, p = { disabled: e.palette.gray[400], enabled: e.palette.gray[800] }, c = { critical: e.palette.white, high: e.palette.white, low: e.palette.gray[800], medium: e.palette.gray[800], none: e.palette.gray[400] };
-    return { iconColor: o < 1 ? l.none : l[i], iconText: m(i.charAt(0)), iconTextColor: o < 1 ? c.none : c[i], textColor: o < 1 ? p.disabled : p.enabled };
-  })(r, a), n = m(r.charAt(0)) + r.slice(1);
-  return f(s, { alignItems: "center", display: "inline-flex", gap: 0.5, minWidth: "43px", children: [t(C, { id: n, place: "top", tip: n, children: t(s, { alignItems: "center", bgColor: x, borderRadius: "4px", cursor: "pointer", display: "flex", height: "22px", maxWidth: "22px", minWidth: "22px", children: t(d, { color: g, size: "sm", textAlign: "center", children: h }) }) }), t(d, { color: y, size: "sm", children: a })] });
-};
+import "react/jsx-runtime";
+import "lodash";
+import { bs as t } from "../../../components-C2JBXbtI.mjs";
 export {
-  j as SeverityOverviewBadge
+  t as SeverityOverviewBadge
 };

package/dist/components/severity-overview/index.js

@@ -1,7 +1,5 @@
-import { jsxs as l, jsx as i } from "react/jsx-runtime";
-import { SeverityOverviewBadge as a } from "./badge/index.js";
-import { Container as n } from "../container/index.js";
-const c = ({ critical: e, high: r, medium: t, low: v }) => l(n, { alignItems: "center", display: "inline-flex", gap: 1, children: [i(a, { value: e, variant: "critical" }), i(a, { value: r, variant: "high" }), i(a, { value: t, variant: "medium" }), i(a, { value: v, variant: "low" })] });
+import "react/jsx-runtime";
+import { at as i } from "../../components-C2JBXbtI.mjs";
 export {
-  c as SeverityOverview
+  i as SeverityOverview
 };

package/dist/components/show-on-hover/index.js

@@ -1,25 +1,5 @@
-import { jsxs as o, jsx as i } from "react/jsx-runtime";
-import { styled as r } from "styled-components";
-import { Container as s } from "../container/index.js";
-const t = r.div`
-  ${({ theme: n }) => `
-    border-radius: ${n.spacing[0.25]};
-    cursor: pointer;
-    display: flex;
-    gap: ${n.spacing[0.5]};
-    justify-content: end;
-    position: relative;
-    z-index: 20;
-
-    &:hover {
-      background-color: ${n.palette.gray[100]};
-    }
-
-    &:hover > div {
-      display: block;
-    }
-  `}
-`, p = ({ visibleElement: n, hiddenElement: e }) => o(t, { children: [n, i(s, { display: "none", position: "absolute", top: "100%", zIndex: 10, children: e })] });
+import "react/jsx-runtime";
+import { au as e } from "../../components-C2JBXbtI.mjs";
 export {
-  p as ShowOnHover
+  e as ShowOnHover
 };