@fluidattacks/design 3.1.12 → 3.1.13

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

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

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

@@ -1,5 +1,5 @@
 import "react/jsx-runtime";
-import { I } from "../../../index-BLbKylyw.mjs";
+import { I } from "../../../index-BMHVi812.mjs";
 import "../../colors/index.js";
 import "../../icon/index.js";
 import "../../typography/heading/index.js";

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

@@ -1,14 +1,74 @@
 import { jsxs as d, jsx as o } from "react/jsx-runtime";
-import { useTheme as n } from "styled-components";
+import { useTheme as g } from "styled-components";
 import { theme as e } from "../colors/index.js";
-import { Container as l } from "../container/index.js";
+import { Container as t } 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 }) })] });
+const m = {
+  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]
+  }
+}, u = ({
+  textL: r,
+  textR: p,
+  variant: i
+}) => {
+  const n = g(), { bgColor: l, colorL: c, colorR: s } = m[i];
+  return /* @__PURE__ */ d(t, { alignItems: "flex-start", display: "inline-flex", children: [
+    r ? /* @__PURE__ */ o(
+      t,
+      {
+        alignItems: "center",
+        bgColor: n.palette.white,
+        border: `1px solid ${l}`,
+        borderRadius: "4px 0px 0px 4px",
+        display: "flex",
+        justify: "center",
+        padding: [0, 0.25, 0, 0.25],
+        children: /* @__PURE__ */ o(a, { color: c, size: "xs", children: r })
+      }
+    ) : void 0,
+    /* @__PURE__ */ o(
+      t,
+      {
+        alignItems: "center",
+        bgColor: l,
+        border: `1px solid ${l}`,
+        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: /* @__PURE__ */ o(a, { color: s, size: "xs", children: p })
+      }
+    )
+  ] });
 };
 export {
-  L as SeverityBadge
+  u as SeverityBadge
 };

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

@@ -1,18 +1,69 @@
-import { jsxs as f, jsx as t } from "react/jsx-runtime";
+import { jsxs as d, jsx as n } 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 { Container as c } from "../../container/index.js";
+import { T as x } from "../../../index-DwznImvK.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 { Text as a } from "../../typography/text/index.js";
+const h = (t, o) => {
+  const r = {
+    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]
+  }, i = {
+    disabled: e.palette.gray[400],
+    enabled: e.palette.gray[800]
+  }, l = {
+    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 ? r.none : r[t],
+    iconText: m(t.charAt(0)),
+    iconTextColor: o < 1 ? l.none : l[t],
+    textColor: o < 1 ? i.disabled : i.enabled
+  };
+}, z = ({
+  variant: t,
+  value: o
+}) => {
+  const { iconColor: r, iconText: i, iconTextColor: l, textColor: s } = h(
+    t,
+    o
+  ), p = m(t.charAt(0)) + t.slice(1);
+  return /* @__PURE__ */ d(
+    c,
+    {
+      alignItems: "center",
+      display: "inline-flex",
+      gap: 0.5,
+      minWidth: "43px",
+      children: [
+        /* @__PURE__ */ n(x, { id: p, place: "top", tip: p, children: /* @__PURE__ */ n(
+          c,
+          {
+            alignItems: "center",
+            bgColor: r,
+            borderRadius: "4px",
+            cursor: "pointer",
+            display: "flex",
+            height: "22px",
+            maxWidth: "22px",
+            minWidth: "22px",
+            children: /* @__PURE__ */ n(a, { color: l, size: "sm", textAlign: "center", children: i })
+          }
+        ) }),
+        /* @__PURE__ */ n(a, { color: s, size: "sm", children: o })
+      ]
+    }
+  );
 };
 export {
-  j as SeverityOverviewBadge
+  z as SeverityOverviewBadge
 };

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

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

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

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