@fluidattacks/design 3.1.13 → 3.2.0

package/dist/components/tag/index.js

@@ -1,184 +1,6 @@
-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 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 j } from "../typography/span/index.js";
-import "../typography/text/index.js";
-const { getVariant: T } = w(
-  (o) => ({
-    default: `
-      background-color: ${o.palette.gray[200]};
-      color: ${o.palette.gray[800]};
-    `,
-    error: `
-      &.high {
-        background-color: ${o.palette.error[700]};
-        color: ${o.palette.white};
-      }
-      &.low {
-        background-color: ${o.palette.error[50]};
-        color: ${o.palette.error[700]};
-      }
-      &.medium {
-        background-color: ${o.palette.error[500]};
-        color: ${o.palette.error[50]};
-      }
-    `,
-    inactive: `
-      background-color: ${o.palette.gray[200]};
-      color: ${o.palette.gray[600]};
-    `,
-    info: `
-      &.high {
-        background-color: ${o.palette.info[700]};
-        color: ${o.palette.white};
-      }
-      &.low {
-        background-color: ${o.palette.info[50]};
-        color: ${o.palette.info[700]};
-      }
-      &.medium {
-        background-color: ${o.palette.info[500]};
-        color: ${o.palette.info[50]};
-      }
-    `,
-    reachable: `
-      background-color: ${o.palette.gray[50]};
-      color: ${o.palette.gray[800]};
-    `,
-    remediation: `
-      background-color: inherit;
-      border: 1px solid ${o.palette.gray[300]};
-      color: ${o.palette.gray[400]};
-    `,
-    role: `
-      background-color: ${o.palette.gray[800]};
-      color: ${o.palette.white};
-    `,
-    success: `
-      &.high {
-        background-color: ${o.palette.success[700]};
-        color: ${o.palette.white};
-      }
-      &.low {
-        background-color: ${o.palette.success[50]};
-        color: ${o.palette.success[700]};
-      }
-      &.medium {
-        background-color: ${o.palette.success[500]};
-        color: ${o.palette.success[50]};
-      }
-    `,
-    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: `
-      &.high {
-        background-color: ${o.palette.warning[600]};
-        color: ${o.palette.white};
-      }
-      &.low {
-        background-color: ${o.palette.warning[50]};
-        color: ${o.palette.warning[700]};
-      }
-      &.medium {
-        background-color: ${o.palette.warning[400]};
-        color: ${o.palette.warning[700]};
-      }
-    `
-  })
-), q = b.span`
-  ${({ theme: o, $fontSize: a = o.typography.text.xs, $variant: l }) => `
-    align-items: center;
-    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: ${a};
-    font-style: normal;
-    font-weight: ${o.typography.weight.regular};
-    justify-content: center;
-    line-height: 18px;
-    padding: var(--tag-padding-y) var(--tag-padding-x);
-    white-space: nowrap;
-    width: max-content;
-
-    ~ a {
-      font-size: ${o.typography.text.xs};
-      display: flex;
-    }
-
-    ${T(o, l)}
-  `}
-`, 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: $ })
-      ]
-    }
-  );
-};
+import "react/jsx-runtime";
+import "lodash";
+import { aC as p } from "../../components-C7JPRIEW.mjs";
 export {
-  K as Tag
+  p as Tag
 };

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

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

package/dist/components/timeline/index.js

@@ -1,17 +1,6 @@
-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}`
-  )
-) });
+import "react/jsx-runtime";
+import { aE as m, aD as r } from "../../components-C7JPRIEW.mjs";
 export {
-  p as TimeLine,
-  o as TimeLineCard
+  m as TimeLine,
+  r as TimeLineCard
 };

package/dist/components/toggle/index.js

@@ -1,103 +1,6 @@
-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 k } from "../container/index.js";
-const e = a.div`
-  ${({ theme: o }) => `
-    align-items: center;
-    background-color: ${o.palette.gray[200]};
-    border-radius: 34px;
-    cursor: pointer;
-    display: flex;
-    height: 20px;
-    position: relative;
-    transition: 0.2s;
-    width: 36px;
-  `}
-`, y = a.div`
-  ${({ theme: o }) => `
-    background-color: ${o.palette.white};
-    border-radius: 50%;
-    height: ${o.spacing[1]};
-    left: 2px;
-    position: absolute;
-    transition: 0.2s;
-    width: ${o.spacing[1]};
-    z-index: 1;
-  `}
-`, m = a.label`
-  display: inline-block;
-
-  input {
-    position: absolute;
-    height: 0;
-    opacity: 0;
-    width: 0;
-  }
-
-  input:checked + ${e} {
-    background-color: ${({ theme: o }) => o.palette.primary[500]};
-  }
-
-  input:checked + ${e} > div {
-    transform: translateX(100%);
-  }
-
-  input:disabled + ${e} {
-    cursor: not-allowed;
-    background-color: ${({ theme: o }) => o.palette.gray[100]};
-  }
-
-  input:disabled + ${e} > div {
-    background-color: ${({ theme: o }) => o.palette.gray[200]};
-    border: 1px solid ${({ theme: o }) => o.palette.gray[200]};
-  }
-`, 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
-      ]
-    }
-  );
-});
+import "react/jsx-runtime";
+import "react";
+import { aF as t } from "../../components-C7JPRIEW.mjs";
 export {
-  j as Toggle
+  t as Toggle
 };

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

@@ -1,103 +1,6 @@
-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 b = n.div`
-  ${({ theme: r }) => `
-    align-items: center;
-    display: flex;
-    position: relative;
-    width: 352px;
-
-    > button:first-child {
-      border-radius: ${r.spacing[2]} 0 0 ${r.spacing[2]};
-    }
-    > button:last-child {
-      --angle-grad: -45deg;
-      border-radius: 0 ${r.spacing[2]} ${r.spacing[2]} 0;
-    }
-
-    &::before {
-      background: ${r.palette.gradients["01"]} border-box;
-      border-radius: ${r.spacing[2]};
-      content: "";
-      position: absolute;
-      inset: 0;
-      border: 2px solid transparent;
-      mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
-      mask-composite: exclude;
-    }
-
-    @media screen and (max-width: ${r.breakpoints.mobile}) {
-      width: 320px;
-    }
-  `}
-`, 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: ${r.palette.primary[500]};
-    cursor: pointer;
-    display: flex;
-    flex: 1 0 0;
-    justify-content: center;
-    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;
-
-    &.selected {
-      --opacity-grad: 1;
-      background: linear-gradient(
-        var(--angle-grad),
-        rgba(243, 38, 55, var(--opacity-grad)),
-        rgba(184, 7, 93, var(--opacity-grad))
-      );
-      color: ${r.palette.white};
-    }
-  `}
-`, 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}`
-    )
-  ) });
-};
+import "react/jsx-runtime";
+import "react";
+import { aG as p } from "../../components-C7JPRIEW.mjs";
 export {
-  k as ToggleButton
+  p as ToggleButton
 };

package/dist/components/tooltip/index.js

@@ -1,13 +1,10 @@
 import "react/jsx-runtime";
-import { T as s } from "../../index-DwznImvK.mjs";
+import "../../vendor-_XDhaIzo.mjs";
 import "lodash";
 import "react";
 import "react-dom";
 import "styled-components";
-import "../icon/index.js";
-import "../typography/heading/index.js";
-import "../typography/span/index.js";
-import "../typography/text/index.js";
+import { aH as f } from "../../components-C7JPRIEW.mjs";
 export {
-  s as Tooltip
+  f as Tooltip
 };