@fluidattacks/design 3.1.11 → 3.1.13

package/dist/components/tag/index.js

@@ -1,3 +1,184 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),e=require("lodash"),o=require("styled-components"),t=require("../../utils-C2whpEd3.js");require("../../styles-C2CoGJl7.js");const r=require("../icon/index.js"),a=require("../icon-button/index.js"),i=require("../link/index.js");require("../typography/heading/index.js");const l=require("../typography/span/index.js");require("../typography/text/index.js");const{getVariant:c}=t.variantBuilder((n=>({default:`\n      background-color: ${n.palette.gray[200]};\n      color: ${n.palette.gray[800]};\n    `,error:`\n      &.high {\n        background-color: ${n.palette.error[700]};\n        color: ${n.palette.white};\n      }\n      &.low {\n        background-color: ${n.palette.error[50]};\n        color: ${n.palette.error[700]};\n      }\n      &.medium {\n        background-color: ${n.palette.error[500]};\n        color: ${n.palette.error[50]};\n      }\n    `,inactive:`\n      background-color: ${n.palette.gray[200]};\n      color: ${n.palette.gray[600]};\n    `,info:`\n      &.high {\n        background-color: ${n.palette.info[700]};\n        color: ${n.palette.white};\n      }\n      &.low {\n        background-color: ${n.palette.info[50]};\n        color: ${n.palette.info[700]};\n      }\n      &.medium {\n        background-color: ${n.palette.info[500]};\n        color: ${n.palette.info[50]};\n      }\n    `,reachable:`\n      background-color: ${n.palette.gray[50]};\n      color: ${n.palette.gray[800]};\n    `,remediation:`\n      background-color: inherit;\n      border: 1px solid ${n.palette.gray[300]};\n      color: ${n.palette.gray[400]};\n    `,role:`\n      background-color: ${n.palette.gray[800]};\n      color: ${n.palette.white};\n    `,success:`\n      &.high {\n        background-color: ${n.palette.success[700]};\n        color: ${n.palette.white};\n      }\n      &.low {\n        background-color: ${n.palette.success[50]};\n        color: ${n.palette.success[700]};\n      }\n      &.medium {\n        background-color: ${n.palette.success[500]};\n        color: ${n.palette.success[50]};\n      }\n    `,technique:`\n      --tag-padding-y: ${n.spacing[.25]};\n      --tag-padding-x: ${n.spacing[.75]};\n\n      background-color: inherit;\n      border: 1px solid ${n.palette.success[800]};\n      color: ${n.palette.success[800]};\n    `,warning:`\n      &.high {\n        background-color: ${n.palette.warning[600]};\n        color: ${n.palette.white};\n      }\n      &.low {\n        background-color: ${n.palette.warning[50]};\n        color: ${n.palette.warning[700]};\n      }\n      &.medium {\n        background-color: ${n.palette.warning[400]};\n        color: ${n.palette.warning[700]};\n      }\n    `}))),s=o.styled.span`
-  ${({theme:n,$fontSize:e=n.typography.text.xs,$variant:o})=>`\n    align-items: center;\n    border-radius: ${n.spacing["technique"===o?1:.25]};\n    display: inline-flex;\n    gap: ${n.spacing[.25]};\n    font-family: ${n.typography.type.primary};\n    font-size: ${e};\n    font-style: normal;\n    font-weight: ${n.typography.weight.regular};\n    justify-content: center;\n    line-height: 18px;\n    padding: var(--tag-padding-y) var(--tag-padding-x);\n    white-space: nowrap;\n    width: max-content;\n\n    ~ a {\n      font-size: ${n.typography.text.xs};\n      display: flex;\n    }\n\n    ${c(n,o)}\n  `}
-`;exports.Tag=({disabled:o,icon:t,iconColor:c="inherit",iconType:p="fa-light",id:g="close-tag",filterValues:d="",fontSize:u,href:$,linkLabel:h,onClose:y,priority:x="default",tagTitle:b="",tagLabel:f,variant:k="default"})=>{const m=f.length>25&&e.isEmpty(b+d),j=`${f.slice(0,25)}...`;return n.jsxs(l.Span,{className:"gap-0.5",display:void 0===$?"initial":"flex",size:"sm",children:[n.jsxs(s,{$fontSize:u,$variant:k,className:x,children:[t&&n.jsx(r.Icon,{icon:t,iconColor:c,iconSize:"xxs",iconType:p}),n.jsxs("span",{children:[n.jsx("strong",{children:b}),n.jsx("span",{children:m?j:f}),n.jsx("strong",{children:d})]}),y?n.jsx(a.IconButton,{disabled:o,icon:"xmark",iconSize:"xxs",iconType:"fa-light",id:g,onClick:y,px:.125,py:.125,variant:"ghost"}):void 0]}),void 0===$?void 0:n.jsx(i.Link,{href:$,children:h})]})};
+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: $ })
+      ]
+    }
+  );
+};
+export {
+  K as Tag
+};

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

@@ -1 +1,9 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),require("react/jsx-runtime"),require("styled-components");const e=require("../../../index-CA_9DXWd.js");require("../../typography/heading/index.js"),require("../../typography/span/index.js"),require("../../typography/text/index.js"),exports.TimeLineCard=e.TimeLineCard;
+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";
+export {
+  e as TimeLineCard
+};

package/dist/components/timeline/index.js

@@ -1 +1,17 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("../../index-CA_9DXWd.js");exports.TimeLineCard=i.TimeLineCard,exports.TimeLine=({items:t})=>e.jsx(i.TimelineContainer,{children:t.map(((t,r)=>e.jsx(i.TimeLineCard,{date:t.date,description:t.description,title:t.title},`${t.title}-${r}`)))});
+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 {
+  p as TimeLine,
+  o as TimeLineCard
+};

package/dist/components/toggle/index.js

@@ -1,8 +1,31 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),i=require("styled-components"),n=require("../container/index.js"),r=i.styled.div`
-  ${({theme:e})=>`\n    align-items: center;\n    background-color: ${e.palette.gray[200]};\n    border-radius: 34px;\n    cursor: pointer;\n    display: flex;\n    height: 20px;\n    position: relative;\n    transition: 0.2s;\n    width: 36px;\n  `}
-`,o=i.styled.div`
-  ${({theme:e})=>`\n    background-color: ${e.palette.white};\n    border-radius: 50%;\n    height: ${e.spacing[1]};\n    left: 2px;\n    position: absolute;\n    transition: 0.2s;\n    width: ${e.spacing[1]};\n    z-index: 1;\n  `}
-`,a=i.styled.label`
+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 {
@@ -12,21 +35,69 @@
     width: 0;
   }
 
-  input:checked + ${r} {
-    background-color: ${({theme:e})=>e.palette.primary[500]};
+  input:checked + ${e} {
+    background-color: ${({ theme: o }) => o.palette.primary[500]};
   }
 
-  input:checked + ${r} > div {
+  input:checked + ${e} > div {
     transform: translateX(100%);
   }
 
-  input:disabled + ${r} {
+  input:disabled + ${e} {
     cursor: not-allowed;
-    background-color: ${({theme:e})=>e.palette.gray[100]};
+    background-color: ${({ theme: o }) => o.palette.gray[100]};
   }
 
-  input:disabled + ${r} > 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]};
   }
-`,l=t.forwardRef((function({defaultChecked:i,disabled:l=!1,justify:s,name:d,leftDescription:c,rightDescription:p,...u},g){const h=!0===i?"on":"off",b="object"==typeof c&&c.on&&c.off?c[h]:c,f=t.useCallback((e=>{e.stopPropagation()}),[]);return e.jsxs(n.Container,{alignItems:"center",display:"flex",fontSize:"14px",gap:.75,justify:s,children:[b,e.jsxs(a,{onClick:f,role:"switch",children:[e.jsx("input",{...u,"aria-disabled":l,"aria-label":d,checked:!0===i,disabled:l,name:d,ref:g,type:"checkbox"}),e.jsx(r,{"aria-label":"Toggle Switch",id:`${d}Toggle`,children:e.jsx(o,{})})]}),p]})}));exports.Toggle=l;
+`, 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 {
+  j as Toggle
+};

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

@@ -1,5 +1,103 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),e=require("react"),t=require("styled-components");require("../typography/heading/index.js"),require("../typography/span/index.js");const r=require("../typography/text/index.js"),a=t.styled.div`
-  ${({theme:n})=>`\n    align-items: center;\n    display: flex;\n    position: relative;\n    width: 352px;\n\n    > button:first-child {\n      border-radius: ${n.spacing[2]} 0 0 ${n.spacing[2]};\n    }\n    > button:last-child {\n      --angle-grad: -45deg;\n      border-radius: 0 ${n.spacing[2]} ${n.spacing[2]} 0;\n    }\n\n    &::before {\n      background: ${n.palette.gradients["01"]} border-box;\n      border-radius: ${n.spacing[2]};\n      content: "";\n      position: absolute;\n      inset: 0;\n      border: 2px solid transparent;\n      mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);\n      mask-composite: exclude;\n    }\n\n    @media screen and (max-width: ${n.breakpoints.mobile}) {\n      width: 320px;\n    }\n  `}
-`,i=t.styled.button`
-  ${({theme:n})=>`\n    align-items: center;\n    background: linear-gradient(\n      var(--angle-grad),\n      rgba(243, 38, 55, var(--opacity-grad)),\n      rgba(184, 7, 93, var(--opacity-grad))\n    );\n    color: ${n.palette.primary[500]};\n    cursor: pointer;\n    display: flex;\n    flex: 1 0 0;\n    justify-content: center;\n    gap: ${n.spacing[.625]};\n    height: ${n.spacing[4]};\n    padding: ${n.spacing[1.25]};\n    position: relative;\n    transition: color, --opacity-grad 0.5s ease-in-out;\n\n    &.selected {\n      --opacity-grad: 1;\n      background: linear-gradient(\n        var(--angle-grad),\n        rgba(243, 38, 55, var(--opacity-grad)),\n        rgba(184, 7, 93, var(--opacity-grad))\n      );\n      color: ${n.palette.white};\n    }\n  `}
-`;exports.ToggleButton=({defaultSelection:t,options:o,handleClick:s})=>{const[d,l]=e.useState(t??o[0]),c=e.useCallback((n=>()=>{l(n),s(n)}),[s]);return n.jsx(a,{children:o.map(((e,t)=>n.jsx(i,{className:`${e.includes(d)&&"selected"}`,onClick:c(e),children:n.jsx(r.Text,{color:"inherit",fontWeight:"bold",size:"md",sizeSm:"sm",textAlign:"center",children:e})},`${e}-${t}`)))})};
+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}`
+    )
+  ) });
+};
+export {
+  k as ToggleButton
+};

package/dist/components/tooltip/index.js

@@ -1 +1,13 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),require("react/jsx-runtime");const e=require("../../index-CmylnDrF.js");require("lodash"),require("react"),require("react-dom"),require("styled-components"),require("../icon/index.js"),require("../typography/heading/index.js"),require("../typography/span/index.js"),require("../typography/text/index.js"),exports.Tooltip=e.Tooltip;
+import "react/jsx-runtime";
+import { T as s } from "../../index-DwznImvK.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";
+export {
+  s as Tooltip
+};