@fluidattacks/design 3.1.12 → 3.1.13

package/dist/components/tabs/tab/index.js

@@ -1,8 +1,39 @@
-import { jsx as a, jsxs as l } from "react/jsx-runtime";
-import { T as m } from "../../../styles-BA0WIQL-.mjs";
-import { NotificationSign as p } from "../../notification-sign/index.js";
-import { T as d } from "../../../index-D-lcuEHY.mjs";
-const x = ({ label: r, id: o, isActive: t = !1, link: n, notificationSign: i, onClick: e, tooltip: s = "" }) => a(d, { display: "flex", id: `${o}-tooltip`, tip: s, children: l(m, { "aria-selected": t, className: t ? "active" : "", id: o, onClick: e, role: "tab", to: n, children: [r, a(p, { left: i == null ? void 0 : i.left, numberIndicator: i == null ? void 0 : i.numberIndicator, show: i == null ? void 0 : i.show, top: i == null ? void 0 : i.top, variant: i == null ? void 0 : i.variant })] }) });
+import { jsx as s, jsxs as T } from "react/jsx-runtime";
+import { T as h } from "../../../styles-ePGii_9g.mjs";
+import { NotificationSign as x } from "../../notification-sign/index.js";
+import { T as u } from "../../../index-DwznImvK.mjs";
+const N = ({
+  label: m,
+  id: e,
+  isActive: l = !1,
+  link: p,
+  notificationSign: r,
+  onClick: d,
+  tooltip: b = ""
+}) => /* @__PURE__ */ s(u, { display: "flex", id: `${e}-tooltip`, tip: b, children: /* @__PURE__ */ T(
+  h,
+  {
+    "aria-selected": l,
+    className: l ? "active" : "",
+    id: e,
+    onClick: d,
+    role: "tab",
+    to: p,
+    children: [
+      m,
+      /* @__PURE__ */ s(
+        x,
+        {
+          left: r == null ? void 0 : r.left,
+          numberIndicator: r == null ? void 0 : r.numberIndicator,
+          show: r == null ? void 0 : r.show,
+          top: r == null ? void 0 : r.top,
+          variant: r == null ? void 0 : r.variant
+        }
+      )
+    ]
+  }
+) });
 export {
-  x as Tab
+  N as Tab
 };

package/dist/components/tag/index.js

@@ -1,18 +1,21 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { isEmpty as y } from "lodash";
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import { isEmpty as k } from "lodash";
 import { styled as b } from "styled-components";
-import { v as k } from "../../utils-CQvBF-wY.mjs";
-import "../../styles-C3cZmKVJ.mjs";
-import { Icon as w } from "../icon/index.js";
-import { IconButton as x } from "../icon-button/index.js";
-import { Link as v } from "../link/index.js";
+import { v as w } from "../../utils-V0EumEPM.mjs";
+import "../../styles-CplEd2kw.mjs";
+import { Icon as v } from "../icon/index.js";
+import { IconButton as z } from "../icon-button/index.js";
+import { Link as S } from "../link/index.js";
 import "../typography/heading/index.js";
-import { Span as z } from "../typography/span/index.js";
+import { Span as j } from "../typography/span/index.js";
 import "../typography/text/index.js";
-const { getVariant: S } = k((o) => ({ default: `
+const { getVariant: T } = w(
+  (o) => ({
+    default: `
       background-color: ${o.palette.gray[200]};
       color: ${o.palette.gray[800]};
-    `, error: `
+    `,
+    error: `
       &.high {
         background-color: ${o.palette.error[700]};
         color: ${o.palette.white};
@@ -25,10 +28,12 @@ const { getVariant: S } = k((o) => ({ default: `
         background-color: ${o.palette.error[500]};
         color: ${o.palette.error[50]};
       }
-    `, inactive: `
+    `,
+    inactive: `
       background-color: ${o.palette.gray[200]};
       color: ${o.palette.gray[600]};
-    `, info: `
+    `,
+    info: `
       &.high {
         background-color: ${o.palette.info[700]};
         color: ${o.palette.white};
@@ -41,17 +46,21 @@ const { getVariant: S } = k((o) => ({ default: `
         background-color: ${o.palette.info[500]};
         color: ${o.palette.info[50]};
       }
-    `, reachable: `
+    `,
+    reachable: `
       background-color: ${o.palette.gray[50]};
       color: ${o.palette.gray[800]};
-    `, remediation: `
+    `,
+    remediation: `
       background-color: inherit;
       border: 1px solid ${o.palette.gray[300]};
       color: ${o.palette.gray[400]};
-    `, role: `
+    `,
+    role: `
       background-color: ${o.palette.gray[800]};
       color: ${o.palette.white};
-    `, success: `
+    `,
+    success: `
       &.high {
         background-color: ${o.palette.success[700]};
         color: ${o.palette.white};
@@ -64,14 +73,16 @@ const { getVariant: S } = k((o) => ({ default: `
         background-color: ${o.palette.success[500]};
         color: ${o.palette.success[50]};
       }
-    `, technique: `
+    `,
+    technique: `
       --tag-padding-y: ${o.spacing[0.25]};
       --tag-padding-x: ${o.spacing[0.75]};
 
       background-color: inherit;
       border: 1px solid ${o.palette.success[800]};
       color: ${o.palette.success[800]};
-    `, warning: `
+    `,
+    warning: `
       &.high {
         background-color: ${o.palette.warning[600]};
         color: ${o.palette.white};
@@ -84,14 +95,16 @@ const { getVariant: S } = k((o) => ({ default: `
         background-color: ${o.palette.warning[400]};
         color: ${o.palette.warning[700]};
       }
-    ` })), T = b.span`
-  ${({ theme: o, $fontSize: n = o.typography.text.xs, $variant: t }) => `
+    `
+  })
+), q = b.span`
+  ${({ theme: o, $fontSize: a = o.typography.text.xs, $variant: l }) => `
     align-items: center;
-    border-radius: ${o.spacing[t === "technique" ? 1 : 0.25]};
+    border-radius: ${o.spacing[l === "technique" ? 1 : 0.25]};
     display: inline-flex;
     gap: ${o.spacing[0.25]};
     font-family: ${o.typography.type.primary};
-    font-size: ${n};
+    font-size: ${a};
     font-style: normal;
     font-weight: ${o.typography.weight.regular};
     justify-content: center;
@@ -105,12 +118,67 @@ const { getVariant: S } = k((o) => ({ default: `
       display: flex;
     }
 
-    ${S(o, t)}
+    ${T(o, l)}
   `}
-`, F = ({ disabled: o, icon: n, iconColor: t = "inherit", iconType: s = "fa-light", id: g = "close-tag", filterValues: l = "", fontSize: d, href: r, linkLabel: $, onClose: c, priority: h = "default", tagTitle: p = "", tagLabel: a, variant: m = "default" }) => {
-  const u = a.length > 25 && y(p + l), f = `${a.slice(0, 25)}...`;
-  return i(z, { className: "gap-0.5", display: r === void 0 ? "initial" : "flex", size: "sm", children: [i(T, { $fontSize: d, $variant: m, className: h, children: [n && e(w, { icon: n, iconColor: t, iconSize: "xxs", iconType: s }), i("span", { children: [e("strong", { children: p }), e("span", { children: u ? f : a }), e("strong", { children: l })] }), c ? e(x, { disabled: o, icon: "xmark", iconSize: "xxs", iconType: "fa-light", id: g, onClick: c, px: 0.125, py: 0.125, variant: "ghost" }) : void 0] }), r === void 0 ? void 0 : e(v, { href: r, children: $ })] });
+`, K = ({
+  disabled: o,
+  icon: a,
+  iconColor: l = "inherit",
+  iconType: s = "fa-light",
+  id: g = "close-tag",
+  filterValues: c = "",
+  fontSize: d,
+  href: t,
+  linkLabel: $,
+  onClose: p,
+  priority: u = "default",
+  tagTitle: e = "",
+  tagLabel: i,
+  variant: y = "default"
+}) => {
+  const f = i.length > 25 && k(e + c), x = `${i.slice(0, 25)}...`;
+  return /* @__PURE__ */ n(
+    j,
+    {
+      className: "gap-0.5",
+      display: t === void 0 ? "initial" : "flex",
+      size: "sm",
+      children: [
+        /* @__PURE__ */ n(q, { $fontSize: d, $variant: y, className: u, children: [
+          a && /* @__PURE__ */ r(
+            v,
+            {
+              icon: a,
+              iconColor: l,
+              iconSize: "xxs",
+              iconType: s
+            }
+          ),
+          /* @__PURE__ */ n("span", { children: [
+            /* @__PURE__ */ r("strong", { children: e }),
+            /* @__PURE__ */ r("span", { children: f ? x : i }),
+            /* @__PURE__ */ r("strong", { children: c })
+          ] }),
+          p ? /* @__PURE__ */ r(
+            z,
+            {
+              disabled: o,
+              icon: "xmark",
+              iconSize: "xxs",
+              iconType: "fa-light",
+              id: g,
+              onClick: p,
+              px: 0.125,
+              py: 0.125,
+              variant: "ghost"
+            }
+          ) : void 0
+        ] }),
+        t === void 0 ? void 0 : /* @__PURE__ */ r(S, { href: t, children: $ })
+      ]
+    }
+  );
 };
 export {
-  F as Tag
+  K as Tag
 };

package/dist/components/timeline/card/index.js

@@ -1,6 +1,6 @@
 import "react/jsx-runtime";
 import "styled-components";
-import { a as e } from "../../../index-Bu448Tz2.mjs";
+import { a as e } from "../../../index-C6LbClYh.mjs";
 import "../../typography/heading/index.js";
 import "../../typography/span/index.js";
 import "../../typography/text/index.js";

package/dist/components/timeline/index.js

@@ -1,7 +1,17 @@
-import { jsx as t } from "react/jsx-runtime";
-import { T as r, a as s } from "../../index-Bu448Tz2.mjs";
-const d = ({ items: e }) => t(r, { children: e.map((i, a) => t(s, { date: i.date, description: i.description, title: i.title }, `${i.title}-${a}`)) });
+import { jsx as e } from "react/jsx-runtime";
+import { T as n, a as o } from "../../index-C6LbClYh.mjs";
+const p = ({ items: t }) => /* @__PURE__ */ e(n, { children: t.map(
+  (i, r) => /* @__PURE__ */ e(
+    o,
+    {
+      date: i.date,
+      description: i.description,
+      title: i.title
+    },
+    `${i.title}-${r}`
+  )
+) });
 export {
-  d as TimeLine,
-  s as TimeLineCard
+  p as TimeLine,
+  o as TimeLineCard
 };

package/dist/components/toggle/index.js

@@ -1,11 +1,11 @@
-import { jsxs as l, jsx as o } from "react/jsx-runtime";
-import { forwardRef as u, useCallback as m } from "react";
+import { jsxs as c, jsx as r } from "react/jsx-runtime";
+import { forwardRef as f, useCallback as x } from "react";
 import { styled as a } from "styled-components";
-import { Container as $ } from "../container/index.js";
-const i = a.div`
-  ${({ theme: e }) => `
+import { Container as k } from "../container/index.js";
+const e = a.div`
+  ${({ theme: o }) => `
     align-items: center;
-    background-color: ${e.palette.gray[200]};
+    background-color: ${o.palette.gray[200]};
     border-radius: 34px;
     cursor: pointer;
     display: flex;
@@ -15,17 +15,17 @@ const i = a.div`
     width: 36px;
   `}
 `, y = a.div`
-  ${({ theme: e }) => `
-    background-color: ${e.palette.white};
+  ${({ theme: o }) => `
+    background-color: ${o.palette.white};
     border-radius: 50%;
-    height: ${e.spacing[1]};
+    height: ${o.spacing[1]};
     left: 2px;
     position: absolute;
     transition: 0.2s;
-    width: ${e.spacing[1]};
+    width: ${o.spacing[1]};
     z-index: 1;
   `}
-`, k = a.label`
+`, m = a.label`
   display: inline-block;
 
   input {
@@ -35,29 +35,69 @@ const i = a.div`
     width: 0;
   }
 
-  input:checked + ${i} {
-    background-color: ${({ theme: e }) => e.palette.primary[500]};
+  input:checked + ${e} {
+    background-color: ${({ theme: o }) => o.palette.primary[500]};
   }
 
-  input:checked + ${i} > div {
+  input:checked + ${e} > div {
     transform: translateX(100%);
   }
 
-  input:disabled + ${i} {
+  input:disabled + ${e} {
     cursor: not-allowed;
-    background-color: ${({ theme: e }) => e.palette.gray[100]};
+    background-color: ${({ theme: o }) => o.palette.gray[100]};
   }
 
-  input:disabled + ${i} > div {
-    background-color: ${({ theme: e }) => e.palette.gray[200]};
-    border: 1px solid ${({ theme: e }) => e.palette.gray[200]};
+  input:disabled + ${e} > div {
+    background-color: ${({ theme: o }) => o.palette.gray[200]};
+    border: 1px solid ${({ theme: o }) => o.palette.gray[200]};
   }
-`, C = u(function({ defaultChecked: e, disabled: r = !1, justify: d, name: n, leftDescription: t, rightDescription: s, ...c }, p) {
-  const h = e === !0 ? "on" : "off", g = typeof t == "object" && t.on && t.off ? t[h] : t, b = m((f) => {
-    f.stopPropagation();
-  }, []);
-  return l($, { alignItems: "center", display: "flex", fontSize: "14px", gap: 0.75, justify: d, children: [g, l(k, { onClick: b, role: "switch", children: [o("input", { ...c, "aria-disabled": r, "aria-label": n, checked: e === !0, disabled: r, name: n, ref: p, type: "checkbox" }), o(i, { "aria-label": "Toggle Switch", id: `${n}Toggle`, children: o(y, {}) })] }), s] });
+`, j = f(function({
+  defaultChecked: l,
+  disabled: n = !1,
+  justify: s,
+  name: i,
+  leftDescription: t,
+  rightDescription: d,
+  ...p
+}, g) {
+  const u = l === !0 ? "on" : "off", b = typeof t == "object" && t.on && t.off ? t[u] : t, h = x(
+    ($) => {
+      $.stopPropagation();
+    },
+    []
+  );
+  return /* @__PURE__ */ c(
+    k,
+    {
+      alignItems: "center",
+      display: "flex",
+      fontSize: "14px",
+      gap: 0.75,
+      justify: s,
+      children: [
+        b,
+        /* @__PURE__ */ c(m, { onClick: h, role: "switch", children: [
+          /* @__PURE__ */ r(
+            "input",
+            {
+              ...p,
+              "aria-disabled": n,
+              "aria-label": i,
+              checked: l === !0,
+              disabled: n,
+              name: i,
+              ref: g,
+              type: "checkbox"
+            }
+          ),
+          /* @__PURE__ */ r(e, { "aria-label": "Toggle Switch", id: `${i}Toggle`, children: /* @__PURE__ */ r(y, {}) })
+        ] }),
+        d
+      ]
+    }
+  );
 });
 export {
-  C as Toggle
+  j as Toggle
 };

package/dist/components/toggle-buttons/index.js

@@ -1,27 +1,27 @@
-import { jsx as e } from "react/jsx-runtime";
-import { useState as c, useCallback as g } from "react";
-import { styled as r } from "styled-components";
+import { jsx as i } from "react/jsx-runtime";
+import { useState as l, useCallback as g } from "react";
+import { styled as n } from "styled-components";
 import "../typography/heading/index.js";
 import "../typography/span/index.js";
 import { Text as p } from "../typography/text/index.js";
-const m = r.div`
-  ${({ theme: n }) => `
+const b = n.div`
+  ${({ theme: r }) => `
     align-items: center;
     display: flex;
     position: relative;
     width: 352px;
 
     > button:first-child {
-      border-radius: ${n.spacing[2]} 0 0 ${n.spacing[2]};
+      border-radius: ${r.spacing[2]} 0 0 ${r.spacing[2]};
     }
     > button:last-child {
       --angle-grad: -45deg;
-      border-radius: 0 ${n.spacing[2]} ${n.spacing[2]} 0;
+      border-radius: 0 ${r.spacing[2]} ${r.spacing[2]} 0;
     }
 
     &::before {
-      background: ${n.palette.gradients["01"]} border-box;
-      border-radius: ${n.spacing[2]};
+      background: ${r.palette.gradients["01"]} border-box;
+      border-radius: ${r.spacing[2]};
       content: "";
       position: absolute;
       inset: 0;
@@ -30,26 +30,26 @@ const m = r.div`
       mask-composite: exclude;
     }
 
-    @media screen and (max-width: ${n.breakpoints.mobile}) {
+    @media screen and (max-width: ${r.breakpoints.mobile}) {
       width: 320px;
     }
   `}
-`, b = r.button`
-  ${({ theme: n }) => `
+`, u = n.button`
+  ${({ theme: r }) => `
     align-items: center;
     background: linear-gradient(
       var(--angle-grad),
       rgba(243, 38, 55, var(--opacity-grad)),
       rgba(184, 7, 93, var(--opacity-grad))
     );
-    color: ${n.palette.primary[500]};
+    color: ${r.palette.primary[500]};
     cursor: pointer;
     display: flex;
     flex: 1 0 0;
     justify-content: center;
-    gap: ${n.spacing[0.625]};
-    height: ${n.spacing[4]};
-    padding: ${n.spacing[1.25]};
+    gap: ${r.spacing[0.625]};
+    height: ${r.spacing[4]};
+    padding: ${r.spacing[1.25]};
     position: relative;
     transition: color, --opacity-grad 0.5s ease-in-out;
 
@@ -60,14 +60,43 @@ const m = r.div`
         rgba(243, 38, 55, var(--opacity-grad)),
         rgba(184, 7, 93, var(--opacity-grad))
       );
-      color: ${n.palette.white};
+      color: ${r.palette.white};
     }
   `}
-`, k = ({ defaultSelection: n, options: t, handleClick: i }) => {
-  const [o, s] = c(n ?? t[0]), d = g((a) => () => {
-    s(a), i(a);
-  }, [i]);
-  return e(m, { children: t.map((a, l) => e(b, { className: `${a.includes(o) && "selected"}`, onClick: d(a), children: e(p, { color: "inherit", fontWeight: "bold", size: "md", sizeSm: "sm", textAlign: "center", children: a }) }, `${a}-${l}`)) });
+`, k = ({
+  defaultSelection: r,
+  options: e,
+  handleClick: t
+}) => {
+  const [o, d] = l(
+    r ?? e[0]
+  ), s = g(
+    (a) => () => {
+      d(a), t(a);
+    },
+    [t]
+  );
+  return /* @__PURE__ */ i(b, { children: e.map(
+    (a, c) => /* @__PURE__ */ i(
+      u,
+      {
+        className: `${a.includes(o) && "selected"}`,
+        onClick: s(a),
+        children: /* @__PURE__ */ i(
+          p,
+          {
+            color: "inherit",
+            fontWeight: "bold",
+            size: "md",
+            sizeSm: "sm",
+            textAlign: "center",
+            children: a
+          }
+        )
+      },
+      `${a}-${c}`
+    )
+  ) });
 };
 export {
   k as ToggleButton

package/dist/components/tooltip/index.js

@@ -1,5 +1,5 @@
 import "react/jsx-runtime";
-import { T as s } from "../../index-D-lcuEHY.mjs";
+import { T as s } from "../../index-DwznImvK.mjs";
 import "lodash";
 import "react";
 import "react-dom";