@fluidattacks/design 8.1.0 → 8.2.0

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

@@ -1,8 +1,169 @@
-import "react/jsx-runtime";
-import "../../vendor-i-lggy4V.mjs";
-import "react";
-import "styled-components";
-import { b9 as i } from "../../components-LCJjFofC.mjs";
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import k from "../../_virtual/capitalize.js";
+import { Fragment as F } from "react";
+import { useTheme as R } from "styled-components";
+import { CardContainer as j, Divisor as s } from "./styles.js";
+import { Container as d } from "../container/index.js";
+import { SeverityBadge as w } from "../severity-badge/index.js";
+import { Heading as c } from "../typography/heading/index.js";
+import "../typography/span/index.js";
+import { Text as l } from "../typography/text/index.js";
+import { safeUrl as p } from "../../utils/url.js";
+const G = {
+  md: {
+    categorySize: "sm",
+    titleSize: "xs",
+    descriptionSize: "md",
+    detailsSize: "md"
+  },
+  lg: {
+    categorySize: "md",
+    titleSize: "sm",
+    descriptionSize: "lg",
+    detailsSize: "lg"
+  }
+}, A = ({
+  title: g,
+  href: h,
+  description: f,
+  category: y,
+  id: z,
+  indx: x,
+  remediationTime: S,
+  score: b,
+  severity: n,
+  size: r = "lg",
+  requirements: C,
+  Link: W
+}) => {
+  const i = R(), { categorySize: I, titleSize: m, descriptionSize: u, detailsSize: o } = G[r], v = W ?? "a";
+  return /* @__PURE__ */ t(j, { $index: x, children: [
+    /* @__PURE__ */ e(
+      l,
+      {
+        bgGradient: i.palette.gradient,
+        fontWeight: "bold",
+        size: I,
+        textFill: "transparent",
+        children: y
+      }
+    ),
+    /* @__PURE__ */ t(v, { href: p(h), children: [
+      /* @__PURE__ */ e(
+        c,
+        {
+          color: i.palette.gray[400],
+          display: "inline",
+          fontWeight: "bold",
+          size: m,
+          children: z
+        }
+      ),
+      /* @__PURE__ */ e(
+        c,
+        {
+          display: "inline",
+          fontWeight: "bold",
+          ml: 0.25,
+          size: m,
+          children: g
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(l, { size: u, children: f }),
+    /* @__PURE__ */ t(
+      d,
+      {
+        alignItems: r === "md" ? "flex-start" : "center",
+        display: "flex",
+        flexDirection: r === "md" ? "column" : "row",
+        gap: 0.75,
+        width: "100%",
+        children: [
+          /* @__PURE__ */ t(
+            l,
+            {
+              color: i.palette.gray[400],
+              display: "inline",
+              size: o,
+              children: [
+                /* @__PURE__ */ e("b", { children: "Remediation time: " }),
+                `${S} min`
+              ]
+            }
+          ),
+          r === "lg" ? /* @__PURE__ */ e(s, {}) : void 0,
+          /* @__PURE__ */ t(
+            d,
+            {
+              alignItems: r === "md" ? "flex-start" : "center",
+              display: "flex",
+              gap: 0.25,
+              children: [
+                /* @__PURE__ */ e(
+                  l,
+                  {
+                    color: i.palette.gray[400],
+                    display: "inline",
+                    fontWeight: "bold",
+                    size: o,
+                    children: "Default score: "
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  w,
+                  {
+                    textL: b,
+                    textR: k(n === "disable" ? "None" : n),
+                    variant: n
+                  }
+                )
+              ]
+            }
+          ),
+          r === "lg" ? /* @__PURE__ */ e(s, {}) : void 0,
+          /* @__PURE__ */ t(d, { alignItems: "center", children: [
+            /* @__PURE__ */ e(
+              l,
+              {
+                color: i.palette.gray[400],
+                display: "inline",
+                fontWeight: "bold",
+                size: o,
+                children: "Requirements: "
+              }
+            ),
+            C.map(
+              (a, D) => /* @__PURE__ */ t(F, { children: [
+                D > 0 ? /* @__PURE__ */ e(
+                  l,
+                  {
+                    color: i.palette.gray[400],
+                    display: "inline",
+                    size: o,
+                    children: " / "
+                  }
+                ) : void 0,
+                /* @__PURE__ */ e(
+                  "a",
+                  {
+                    href: p(a.href),
+                    style: {
+                      color: i.palette.gray[400],
+                      fontSize: i.typography.text[o],
+                      textDecoration: "underline"
+                    },
+                    children: a.title
+                  }
+                )
+              ] }, a.key)
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+};
 export {
-  i as WeaknessesCard
+  A as WeaknessesCard
 };

package/dist/components/weaknesses-card/styles.js

@@ -0,0 +1,33 @@
+import { styled as o } from "styled-components";
+const n = (r, i) => i === "0" ? `${r.spacing[1]} ${r.spacing[1]} 0 0` : i === "-1" ? `0 0 ${r.spacing[1]} ${r.spacing[1]}` : "unset", d = o.div`
+  ${({ theme: r, $index: i }) => `
+    align-items: flex-start;
+    display: flex;
+    flex-direction: column;
+    background-color: ${r.palette.white};
+    border: 1px solid;
+    border-color: ${r.palette.gray[200]};
+    border-radius: ${n(r, i)};
+    gap: ${r.spacing[0.5]};
+    padding: ${r.spacing[1.5]};
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+
+    &:hover {
+      background-clip: padding-box, border-box;
+      background-image: linear-gradient(white, white), ${r.palette.gradient};
+      background-origin: padding-box, border-box;
+      border-color: transparent;
+    }
+  `}
+`, t = o.div`
+  display: inline-block;
+  content: "";
+  height: 24px;
+  border-left: 2px solid ${({ theme: r }) => r.palette.gray[100]};
+`;
+export {
+  d as CardContainer,
+  t as Divisor
+};

package/dist/globals/design-tokens-css/index.js

@@ -1,5 +1,5 @@
 import { jsx as s } from "react/jsx-runtime";
-import { t as a } from "../../components-LCJjFofC.mjs";
+import { theme as a } from "../../components/colors/index.js";
 const n = [
   "gray",
   "primary",

package/dist/globals/designs-provider/index.js

@@ -1,8 +1,8 @@
 import { jsxs as s, jsx as r } from "react/jsx-runtime";
 import { DesignTokensCss as e } from "../design-tokens-css/index.js";
 import { GlobalTypography as m } from "../global-typography/index.js";
-import { C as i } from "../../components-LCJjFofC.mjs";
-const a = ({
+import { CustomThemeProvider as i } from "../../components/colors/index.js";
+const d = ({
   children: o
 }) => /* @__PURE__ */ s(i, { children: [
   /* @__PURE__ */ r(m, {}),
@@ -10,5 +10,5 @@ const a = ({
   o
 ] });
 export {
-  a as DesignsProvider
+  d as DesignsProvider
 };

package/dist/hooks/index.js

@@ -1,13 +1,22 @@
-import { bG as a, bH as u, bI as b, bJ as l, bK as o, bN as c, bO as t, bP as i, bQ as r, bR as d } from "../components-LCJjFofC.mjs";
+import { useActiveSection as r } from "./use-active-section.js";
+import { useCarousel as t } from "./use-carousel.js";
+import { useClickOutside as f } from "./use-click-outside.js";
+import { useCloudinaryImage as l } from "./use-cloudinary-image.js";
+import { useColumnsModal as x } from "./use-columns-modal.js";
+import { useDebouncedCallback as c } from "./use-debounced-callback.js";
+import { useFiltersValues as d } from "./use-filters.js";
+import { useModal as C } from "./use-modal.js";
+import { useMountEffect as b } from "./use-mount-effect.js";
+import { useSearch as S } from "./use-search.js";
 export {
-  a as useActiveSection,
-  u as useCarousel,
-  b as useClickOutside,
+  r as useActiveSection,
+  t as useCarousel,
+  f as useClickOutside,
   l as useCloudinaryImage,
-  o as useColumnsModal,
+  x as useColumnsModal,
   c as useDebouncedCallback,
-  t as useFiltersValues,
-  i as useModal,
-  r as useMountEffect,
-  d as useSearch
+  d as useFiltersValues,
+  C as useModal,
+  b as useMountEffect,
+  S as useSearch
 };

package/dist/hooks/use-active-section.js

@@ -0,0 +1,52 @@
+import { useReducer as l, useEffect as I, useCallback as g } from "react";
+const u = {
+  activeSectionId: void 0,
+  forcedId: void 0
+}, h = (o, e) => e.type === "FORCE" ? { ...o, forcedId: e.id } : {
+  activeSectionId: e.id,
+  forcedId: o.forcedId === void 0 || o.forcedId === e.id ? void 0 : o.forcedId
+}, S = (o) => {
+  if (typeof window > "u") return u;
+  const e = window.location.hash.slice(1);
+  return e && o.includes(e) ? { activeSectionId: e, forcedId: void 0 } : u;
+}, E = (o, e) => {
+  const [{ activeSectionId: a, forcedId: v }, c] = l(
+    h,
+    o,
+    S
+  );
+  I(() => {
+    if (typeof window > "u")
+      return () => {
+      };
+    const d = e?.rootMarginTop ?? 80, r = /* @__PURE__ */ new Map(), f = new IntersectionObserver(
+      (n) => {
+        n.forEach((t) => {
+          t.isIntersecting ? r.set(t.target.id, t) : r.delete(t.target.id);
+        });
+        const i = [...r.values()].reduce(
+          (t, s) => t === void 0 || s.boundingClientRect.top < t.boundingClientRect.top ? s : t,
+          void 0
+        );
+        i !== void 0 && c({ type: "OBSERVE", id: i.target.id });
+      },
+      {
+        rootMargin: `-${String(d)}px 0px -66% 0px`,
+        threshold: 0
+      }
+    );
+    return o.forEach((n) => {
+      const i = document.getElementById(n);
+      i && f.observe(i);
+    }), () => {
+      f.disconnect();
+    };
+  }, [o, e?.rootMarginTop]);
+  const p = g((d) => {
+    c({ type: "FORCE", id: d });
+  }, []);
+  return [v ?? a, p];
+};
+export {
+  E as useActiveSection
+};

package/dist/hooks/use-carousel.js

@@ -0,0 +1,19 @@
+import { useState as e, useEffect as a } from "react";
+const u = (r, n) => {
+  const [p, i] = e(0), [o, c] = e(0), t = o === 100, [L, f] = e(t);
+  return t !== L && (f(t), t && i(
+    (s) => s === n - 1 ? 0 : s + 1
+  )), a(() => {
+    const s = setInterval(() => {
+      c(
+        (m) => m === 100 ? 0 : m + 1
+      );
+    }, r);
+    return () => {
+      clearInterval(s);
+    };
+  }, [r]), { cycle: p, progress: o, setCycle: i, setProgress: c };
+};
+export {
+  u as useCarousel
+};

package/dist/hooks/use-click-outside.js

@@ -0,0 +1,20 @@
+import { useRef as f, useEffect as i } from "react";
+const E = (e) => e instanceof Node ? e : null, R = (e) => e !== null && !(e instanceof Node), l = (e) => R(e) ? E(e.current) : e, N = (e, o, c, t) => {
+  const s = f(o), r = f(c);
+  i(() => {
+    s.current = o, r.current = c;
+  }), i(() => {
+    const u = (m) => {
+      const n = m.target, d = l(e);
+      d && !d.contains(n) && !r.current?.some(
+        (a) => l(a)?.contains(n)
+      ) && !(t && n instanceof Element && n.closest(t) !== null) && s.current();
+    };
+    return document.addEventListener("mousedown", u, !0), () => {
+      document.removeEventListener("mousedown", u, !0);
+    };
+  }, [e, t]);
+};
+export {
+  N as useClickOutside
+};

package/dist/hooks/use-cloudinary-image.js

@@ -0,0 +1,16 @@
+import { useMemo as n } from "react";
+import { Cloudinary as t } from "../node_modules/@cloudinary/url-gen/instance/Cloudinary.js";
+const i = ({
+  publicId: e,
+  format: o = "webp"
+}) => {
+  const r = n(() => new t({
+    cloud: {
+      cloudName: "fluid-attacks"
+    }
+  }), []);
+  return n(() => r.image(e).format(o), [r, e, o]);
+};
+export {
+  i as useCloudinaryImage
+};

package/dist/hooks/use-columns-modal.js

@@ -0,0 +1,54 @@
+import N from "../_virtual/some.js";
+import { useMemo as f, useState as S, useCallback as m } from "react";
+import { useModal as h } from "./use-modal.js";
+const M = (a) => a.reduce(
+  (o, t) => ({ ...o, [t.id]: t.visible }),
+  {}
+), V = ({
+  name: a,
+  items: o,
+  columnOrder: t,
+  setColumnOrder: u,
+  setColumnVisibility: c
+}) => {
+  const v = f(
+    () => [
+      // locked -> visible -> hidden
+      ...o.filter(({ locked: e }) => e).map(({ locked: e, ...i }) => ({ ...i, visible: !0, locked: e })),
+      ...o.filter(({ locked: e }) => !e)
+    ],
+    [o]
+  ), [l, p] = S(v), b = m(
+    (e) => {
+      const i = e.filter(({ locked: s }) => !s), r = [...e.filter(({ locked: s }) => s), ...i], d = r.map(({ name: s }) => s);
+      p((s) => [
+        ...r,
+        ...s.filter(({ name: C }) => !d.includes(C))
+      ]), u && u(r.map(({ id: s }) => s));
+    },
+    [u]
+  ), k = m(() => {
+    const e = l.map((i) => ({
+      ...i,
+      visible: i.locked || (t?.includes(i.id) ?? !1)
+    })).toSorted((i, n) => {
+      if (i.locked && !n.locked) return -1;
+      if (!i.locked && n.locked) return 1;
+      if (Number(n.visible) !== Number(i.visible))
+        return Number(n.visible) - Number(i.visible);
+      const r = t?.indexOf(i.id) ?? 0, d = t?.indexOf(n.id) ?? 0;
+      return r - d;
+    });
+    c?.(M(e)), b(e);
+  }, [l, t, b, c]), x = f(() => N(l, (e) => (t?.includes(e.id) ?? !1) !== e.visible), [l, t]);
+  return {
+    setColumns: b,
+    resetToDefault: k,
+    columns: l,
+    ...h(a),
+    hasChanged: x
+  };
+};
+export {
+  V as useColumnsModal
+};

package/dist/hooks/use-debounced-callback.js

@@ -0,0 +1,9 @@
+import c from "../_virtual/lodash.js";
+import { useMemo as n } from "react";
+const d = (e, o) => n(
+  () => c.debounce(e, o),
+  [e, o]
+);
+export {
+  d as useDebouncedCallback
+};

package/dist/hooks/use-filters.js

@@ -0,0 +1,188 @@
+import { parseAsString as X } from "nuqs";
+import { useState as _, useMemo as b, useCallback as M } from "react";
+import { partitionFilters as G } from "../components/filters/utils.js";
+import { useQueryStatesWithLocalStorage as H } from "./use-query-states.js";
+import { parseIncludeExcludeFilterValue as P, parseTextFilterValue as z, EXCLUDE_TOKEN as J, analyzeFilterValue as B, parseCheckboxesFilterValue as K, formatIncludeExcludeFilterValue as Y, normalizeCheckboxesFilterValue as Z } from "../utils/filters.js";
+import { getPathname as I } from "../utils/storage.js";
+const q = (x) => !!x?.options?.some((k) => k.type === "includeExclude"), re = ({
+  filters: x,
+  storageKey: k
+}) => {
+  const [O] = _(I), A = b(() => k ?? O, [k, O]), v = b(
+    () => x.flatMap((e) => e.id),
+    [x]
+  ), D = b(
+    () => ({
+      ...Object.fromEntries(
+        v.map((e) => [e, X.withDefault("")])
+      )
+    }),
+    [v]
+  ), [N, S] = H(
+    A,
+    D,
+    { history: "replace", shallow: !1 }
+  ), V = N, g = M(
+    (e) => {
+      S(e);
+    },
+    [S]
+  ), d = b(
+    () => new Map(G(x).menu.map((e) => [e.id, e])),
+    [x]
+  ), R = b(() => Object.entries(V).filter(
+    ([e, o]) => d.has(e) && !!o && o !== "undefined"
+  ).reduce((e, [o, c]) => {
+    const l = d.get(o);
+    if (q(l)) {
+      const { include: n, exclude: r } = P(c);
+      return e + n.length + r.length;
+    }
+    if (l?.options?.some(
+      (n) => n.type === "text"
+    )) {
+      const { text: n } = z(c);
+      return n ? e + 1 : e;
+    }
+    const p = c.trim().split(",").filter((n) => {
+      const r = n.trim();
+      return r !== "-" && r !== "" && r !== J;
+    });
+    return e + p.length;
+  }, 0), [V, d]), Q = b(() => Object.entries(V).filter(([, e]) => !!e && e !== "undefined").flatMap(([e, o]) => {
+    const c = d.get(e);
+    if (!c) return [];
+    const { label: l, options: i, hideChipLabel: h } = c, p = i?.find((s) => s.type === "text"), n = h ? { hideChipLabel: !0 } : {}, r = i?.find(
+      (s) => s.type === "includeExclude"
+    );
+    if (r) {
+      const { include: s, exclude: u } = P(o), E = r.includeLabel ?? "Include", t = r.excludeLabel ?? "Exclude", m = new Map(
+        (r.items ?? []).map(
+          (F) => [F.value, F.label]
+        )
+      ), w = (F) => {
+        const $ = F.map((f) => {
+          const j = m.get(f);
+          return j !== void 0 && j !== f ? `${f} ${j}` : f;
+        });
+        return $.some((f, j) => f !== F[j]) ? $ : void 0;
+      };
+      return [
+        ...s.length > 0 ? [
+          {
+            id: e,
+            label: `${l}/${E}`,
+            mode: "include",
+            tooltipContent: w(s),
+            type: "includeExclude",
+            value: s.join(", "),
+            ...n
+          }
+        ] : [],
+        ...u.length > 0 ? [
+          {
+            id: e,
+            label: `${l}/${t}`,
+            mode: "exclude",
+            tooltipContent: w(u),
+            type: "includeExclude",
+            value: u.join(", "),
+            ...n
+          }
+        ] : []
+      ];
+    }
+    if (p) {
+      const { text: s, checked: u } = z(o);
+      if (s === "") return [];
+      const E = u && p.checkboxLabel;
+      return [
+        {
+          id: e,
+          label: l,
+          type: "text",
+          ...E ? { checkboxLabel: p.checkboxLabel } : {},
+          value: o,
+          ...n
+        }
+      ];
+    }
+    const { preservedValues: L, mappedValues: a } = B(
+      c,
+      o
+    ), T = a && a.length > 0, C = L.length > 0, y = K(o).mode === "exclude" ? i?.find(
+      (s) => s.type === "checkboxes" && s.excludeLabel
+    )?.excludeLabel : void 0;
+    return T && C ? [
+      {
+        id: e,
+        label: l,
+        type: "list",
+        value: a.join(", "),
+        excludeLabel: y,
+        ...n
+      },
+      { id: e, label: l, value: L.join(", "), ...n }
+    ] : T ? [
+      {
+        id: e,
+        label: l,
+        type: "list",
+        value: a.join(", "),
+        excludeLabel: y,
+        ...n
+      }
+    ] : C ? [
+      { id: e, label: l, value: L.join(", "), ...n }
+    ] : [{ id: e, label: l, value: o, ...n }];
+  }), [V, d]), U = M(
+    (e, o, c) => () => {
+      g((l) => {
+        const i = l[e];
+        if (!i || i === "undefined") return l;
+        const h = d.get(e);
+        if (c && q(h)) {
+          const t = P(i), m = c === "include" ? { exclude: t.exclude, include: [] } : { exclude: [], include: t.include };
+          return {
+            ...l,
+            [e]: Y(m)
+          };
+        }
+        if (!o) return { ...l, [e]: "" };
+        if (!h) return { ...l, [e]: "" };
+        const { splitValues: p, preservedValues: n, labelToValueMap: r } = B(h, i), L = p.map((t) => t.trim()), a = o.split(",").map((t) => t.trim()), y = n.map(
+          (t) => t.trim()
+        ).some(
+          (t) => a.some((m) => t === m)
+        ) ? n.filter(
+          (t) => a.some((m) => t.trim() === m)
+        ) : a.map((t) => r.get(t)).filter(Boolean), s = new Set(
+          y.map((t) => t.trim())
+        ), u = L.filter(
+          (t) => t !== "" && !s.has(t)
+        ), E = u.length > 0 ? u.join(",") : "";
+        return {
+          ...l,
+          [e]: Z(E)
+        };
+      });
+    },
+    [g, d]
+  ), W = M(() => {
+    g((e) => ({
+      ...e,
+      ...Object.fromEntries(v.map((o) => [o, ""]))
+    }));
+  }, [g, v]);
+  return {
+    activeFilters: R,
+    appliedFilters: Q,
+    removeAll: W,
+    removeFilter: U,
+    setValues: g,
+    values: V
+  };
+};
+export {
+  re as useFiltersValues
+};

package/dist/hooks/use-local-storage.js

@@ -0,0 +1,36 @@
+import { useState as c, useEffect as u } from "react";
+const d = (e, o) => e instanceof Function ? e(o) : e, f = (e, o) => {
+  const [r, s] = c(() => {
+    if (typeof window > "u")
+      return o;
+    try {
+      const t = window.localStorage.getItem(e);
+      return t === null ? o : JSON.parse(t);
+    } catch {
+      return o;
+    }
+  }), a = (t) => {
+    try {
+      const n = d(t, r);
+      s(n), typeof window < "u" && window.localStorage.setItem(e, JSON.stringify(n));
+    } catch {
+    }
+  };
+  return u(() => {
+    if (typeof window > "u")
+      return;
+    const t = (n) => {
+      if (n.key === e && n.newValue !== null)
+        try {
+          s(JSON.parse(n.newValue));
+        } catch {
+        }
+    };
+    return window.addEventListener("storage", t), () => {
+      window.removeEventListener("storage", t);
+    };
+  }, [e]), [r, a];
+};
+export {
+  f as useLocalStorage
+};

package/dist/hooks/use-modal.js

@@ -0,0 +1,14 @@
+import { useState as r, useCallback as s } from "react";
+const u = (t) => {
+  const [o, e] = r(!1), n = s(() => {
+    e(!0);
+  }, []), c = s(() => {
+    e(!1);
+  }, []), l = s(() => {
+    e((a) => !a);
+  }, []);
+  return { close: c, isOpen: o, name: t, open: n, setIsOpen: e, toggle: l };
+};
+export {
+  u as useModal
+};

package/dist/hooks/use-mount-effect.js

@@ -0,0 +1,8 @@
+import { useRef as f, useEffect as o } from "react";
+const u = (e) => {
+  const t = f(e);
+  o(() => t.current(), []);
+};
+export {
+  u as useMountEffect
+};