@fluidattacks/design 8.0.0 → 8.2.0

package/dist/components/pop-up/description/index.js

@@ -1,7 +1,60 @@
-import "react/jsx-runtime";
-import "react";
-import "styled-components";
-import { cy as m } from "../../../components-BgqdC3aZ.mjs";
+import { jsx as t, jsxs as d } from "react/jsx-runtime";
+import { Fragment as g } from "react";
+import { useTheme as f } from "styled-components";
+import "../../typography/heading/index.js";
+import { Span as p } from "../../typography/span/index.js";
+import { Text as s } from "../../typography/text/index.js";
+const T = ({
+  description: r = "",
+  highlightDescription: e = "",
+  mobile: i
+}) => {
+  const o = f(), n = i ? "md" : "lg", a = typeof e == "string", c = a ? "" : new RegExp(`(${e.join("|")})`, "u");
+  return e.length > 0 ? /* @__PURE__ */ t(
+    s,
+    {
+      display: "inline",
+      lineSpacing: 1.5,
+      size: n,
+      textAlign: i ? "start" : "center",
+      children: a ? /* @__PURE__ */ d(g, { children: [
+        /* @__PURE__ */ t(
+          p,
+          {
+            color: o.palette.gray[600],
+            display: "inline",
+            fontWeight: "bold",
+            lineSpacing: 1.5,
+            size: n,
+            children: e
+          }
+        ),
+        r
+      ] }) : r.split(c).map(
+        (l, m) => e.includes(l) ? /* @__PURE__ */ t(
+          p,
+          {
+            color: o.palette.gray[600],
+            display: "inline",
+            fontWeight: "bold",
+            lineSpacing: 1.5,
+            size: n,
+            children: l
+          },
+          `${m + 1}-bold`
+        ) : l
+      )
+    }
+  ) : /* @__PURE__ */ t(
+    s,
+    {
+      lineSpacing: 1.5,
+      size: n,
+      textAlign: i ? "start" : "center",
+      children: r
+    }
+  );
+};
 export {
-  m as Description
+  T as Description
 };

package/dist/components/pop-up/index.js

@@ -1,9 +1,166 @@
-import "react/jsx-runtime";
-import "../../vendor-i-lggy4V.mjs";
-import "react";
-import "react-dom";
-import "styled-components";
-import { aw as e } from "../../components-BgqdC3aZ.mjs";
+import { jsx as t, jsxs as l } from "react/jsx-runtime";
+import { l as x } from "../../_virtual/lodash.js";
+import { useCallback as f } from "react";
+import { createPortal as O } from "react-dom";
+import { useTheme as P } from "styled-components";
+import { Description as E } from "./description/index.js";
+import { Button as g } from "../button/index.js";
+import { CloudImage as H } from "../cloud-image/index.js";
+import { Container as i } from "../container/index.js";
+import { Heading as M } from "../typography/heading/index.js";
+import "../typography/span/index.js";
+import "../typography/text/index.js";
+const N = ({
+  _portal: n = !1,
+  cancelButton: r,
+  darkBackground: y = !1,
+  children: s,
+  confirmButton: o,
+  container: C,
+  description: v,
+  highlightDescription: I = "",
+  image: u,
+  maxWidth: b,
+  mobile: e = !1,
+  title: d,
+  titleColor: j
+}) => {
+  const a = P(), { alt: k, src: w, width: z = "77px", height: p = "77px" } = u, D = f(() => {
+    r?.onClick();
+  }, [r]), A = f(() => {
+    o?.onClick();
+  }, [o]), c = /* @__PURE__ */ t(
+    M,
+    {
+      color: j,
+      fontWeight: "bold",
+      lineSpacing: e ? 1.5 : 2.5,
+      mb: e ? 1.5 : 0,
+      size: e ? "sm" : "md",
+      textAlign: e ? "start" : "center",
+      children: d
+    }
+  ), m = /* @__PURE__ */ t(H, { alt: k, height: p, publicId: w, width: z }), h = /* @__PURE__ */ t(
+    i,
+    {
+      alignItems: "center",
+      "aria-label": d,
+      "aria-modal": "true",
+      bgColor: y ? "rgba(52, 64, 84, 70%)" : "",
+      display: "flex",
+      height: "100vh",
+      justify: "center",
+      left: "0",
+      position: n ? "fixed" : "absolute",
+      top: "0px",
+      width: "100%",
+      zIndex: 99999,
+      children: /* @__PURE__ */ l(
+        i,
+        {
+          bgColor: a.palette.white,
+          border: `1px solid ${a.palette.gray[200]}`,
+          borderRadius: "8px",
+          display: "inline-flex",
+          flexDirection: "column",
+          maxWidth: b,
+          position: "relative",
+          px: e ? 1.5 : 2.5,
+          py: e ? 1.5 : 2.5,
+          shadow: "lg",
+          width: e ? "335px" : "100%",
+          zIndex: 11,
+          children: [
+            /* @__PURE__ */ l(
+              i,
+              {
+                alignItems: "center",
+                display: "flex",
+                flexDirection: "column",
+                width: "100%",
+                children: [
+                  e ? c : void 0,
+                  e ? /* @__PURE__ */ t(
+                    i,
+                    {
+                      alignItems: "center",
+                      height: p,
+                      justify: "center",
+                      mr: 0,
+                      children: /* @__PURE__ */ t(
+                        i,
+                        {
+                          bgColor: a.palette.gray[100],
+                          left: "0",
+                          position: "absolute",
+                          textAlign: "center",
+                          width: "100%",
+                          children: m
+                        }
+                      )
+                    }
+                  ) : m,
+                  /* @__PURE__ */ l(
+                    i,
+                    {
+                      display: "flex",
+                      flexDirection: "column",
+                      gap: 0.5,
+                      mb: 1.5,
+                      mt: 1.5,
+                      children: [
+                        e ? void 0 : c,
+                        /* @__PURE__ */ t(
+                          E,
+                          {
+                            description: v,
+                            highlightDescription: I,
+                            mobile: e
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ]
+              }
+            ),
+            s && /* @__PURE__ */ t(i, { mb: 1, scroll: "y", children: /* @__PURE__ */ t(i, { height: "100%", children: s }) }),
+            /* @__PURE__ */ l(
+              i,
+              {
+                alignItems: "flex-start",
+                display: "flex",
+                gap: 1,
+                justify: e ? "start" : "center",
+                children: [
+                  x.isObject(o) ? /* @__PURE__ */ t(
+                    g,
+                    {
+                      onClick: A,
+                      variant: o?.variant ?? "primary",
+                      children: o?.text
+                    },
+                    o?.key
+                  ) : void 0,
+                  x.isObject(r) ? /* @__PURE__ */ t(
+                    g,
+                    {
+                      onClick: D,
+                      variant: r?.variant ?? "tertiary",
+                      children: r?.text
+                    },
+                    r?.key
+                  ) : void 0
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+  return n ? O(h, C ?? document.body) : h;
+};
 export {
-  e as PopUp
+  N as PopUp
 };

package/dist/components/premium-feature/index.js

@@ -1,6 +1,55 @@
-import "react/jsx-runtime";
-import "styled-components";
-import { ax as t } from "../../components-BgqdC3aZ.mjs";
+import { jsx as i, jsxs as s } from "react/jsx-runtime";
+import { useTheme as m } from "styled-components";
+import { IconsContainer as p } from "./styles.js";
+import { Container as o } from "../container/index.js";
+import { Icon as e } from "../icon/index.js";
+import "../typography/heading/index.js";
+import "../typography/span/index.js";
+import { Text as a } from "../typography/text/index.js";
+const w = ({
+  margin: n,
+  onClick: r,
+  text: l
+}) => {
+  const c = m(), t = /* @__PURE__ */ s(p, { children: [
+    /* @__PURE__ */ i(e, { icon: "circle", iconClass: "ellipse-1", iconSize: "lg" }),
+    /* @__PURE__ */ i(e, { icon: "circle", iconClass: "ellipse-2", iconSize: "lg" }),
+    /* @__PURE__ */ i(e, { icon: "crown", iconClass: "icon", iconSize: "lg" })
+  ] });
+  return l !== void 0 ? /* @__PURE__ */ i(
+    o,
+    {
+      cursor: "pointer",
+      display: "inline-block",
+      mr: n,
+      onClick: r,
+      children: /* @__PURE__ */ s(
+        o,
+        {
+          alignItems: "center",
+          bgColor: c.palette.warning[50],
+          borderRadius: "4px",
+          display: "flex",
+          padding: [0.25, 0.25, 0.25, 0.25],
+          width: "fit-content",
+          children: [
+            t,
+            /* @__PURE__ */ i(
+              a,
+              {
+                color: c.palette.warning[500],
+                display: "inline",
+                ml: 0.25,
+                size: "sm",
+                children: l
+              }
+            )
+          ]
+        }
+      )
+    }
+  ) : /* @__PURE__ */ i(o, { display: "inline-block", mr: n, onClick: r, children: t });
+};
 export {
-  t as PremiumFeature
+  w as PremiumFeature
 };

package/dist/components/premium-feature/styles.js

@@ -0,0 +1,36 @@
+import { styled as o } from "styled-components";
+const l = o.div`
+  ${({ theme: i }) => `
+    height: ${i.spacing[1]};
+    width: ${i.spacing[1]};
+    position: relative;
+    flex-shrink: 0;
+
+    & .ellipse-1,
+    & .ellipse-2,
+    & .icon {
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      position: absolute;
+    }
+
+    & .ellipse-1 {
+      color: ${i.palette.warning[200]};
+      position: absolute;
+    }
+
+    & .ellipse-2 {
+      transform: scale(0.75) translate(-67%, -66%);
+      color: ${i.palette.warning[400]};
+    }
+
+    & .icon {
+      color: ${i.palette.warning[600]};
+      font-size: ${i.spacing[0.5]};
+    }
+  `}
+`;
+export {
+  l as IconsContainer
+};

package/dist/components/priority-cards/card/index.js

@@ -1,7 +1,83 @@
-import "react/jsx-runtime";
-import "styled-components";
-import { cA as p } from "../../../components-BgqdC3aZ.mjs";
-import "../../../vendor-i-lggy4V.mjs";
+import { jsx as i, jsxs as e } from "react/jsx-runtime";
+import { useTheme as d } from "styled-components";
+import { StyledPriorityCard as m } from "./styles.js";
+import { Container as p } from "../../container/index.js";
+import { Icon as c } from "../../icon/index.js";
+import { RankPosition as f } from "../../rank-position/index.js";
+import { Heading as h } from "../../typography/heading/index.js";
+import "../../typography/span/index.js";
+import { Text as x } from "../../typography/text/index.js";
+import { ReorderItem as g } from "../../../node_modules/framer-motion/dist/es/components/Reorder/Item.js";
+const R = ({
+  item: r,
+  disabled: o,
+  draggedItem: t,
+  position: l,
+  handleDragEnd: a,
+  handleItemDragStart: s
+}) => {
+  const n = d();
+  return /* @__PURE__ */ i(
+    g,
+    {
+      as: "div",
+      dragListener: !o,
+      onDragEnd: a,
+      onDragStart: s(r.title),
+      style: {
+        zIndex: t === r.title ? 9999 : "auto",
+        position: t === r.title ? "relative" : "static"
+      },
+      value: r,
+      children: /* @__PURE__ */ e(m, { $isDragging: t === r.title, children: [
+        /* @__PURE__ */ e(
+          p,
+          {
+            alignItems: "center",
+            borderRight: "1px solid " + n.palette.gray[200],
+            display: "flex",
+            gap: 0.625,
+            minWidth: "200px",
+            px: 1,
+            py: 1,
+            width: "200px",
+            children: [
+              !o && /* @__PURE__ */ i(
+                c,
+                {
+                  icon: "grip-vertical",
+                  iconColor: n.palette.gray[400],
+                  iconSize: "md",
+                  mx: 0.75,
+                  my: 0.75
+                }
+              ),
+              /* @__PURE__ */ i(h, { fontWeight: "bold", size: "xs", children: r.title })
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(
+          p,
+          {
+            alignItems: "center",
+            display: "flex",
+            gap: 0.625,
+            justify: "space-between",
+            pl: 1,
+            pr: 1.75,
+            py: 1,
+            width: "100%",
+            children: [
+              /* @__PURE__ */ i(x, { size: "md", children: r.description }),
+              /* @__PURE__ */ i(f, { rank: l + 1 })
+            ]
+          }
+        )
+      ] })
+    },
+    r.title
+  );
+};
 export {
-  p as PriorityCard
+  R as PriorityCard
 };

package/dist/components/priority-cards/card/styles.js

@@ -0,0 +1,18 @@
+import { styled as l } from "styled-components";
+const a = l.div`
+  ${({ theme: r, $isDragging: t }) => `
+    align-items: center;
+    display: flex;
+    background-color: ${r.palette.white};
+    gap: ${r.spacing[0.625]};
+    border-top: 1px solid ${r.palette.gray[200]};
+    border-right: 1px solid ${r.palette.gray[200]};
+    border-left: 1px solid ${r.palette.gray[200]};
+    width: 100%;
+
+    ${t ? `border: 1px solid ${r.palette.black};` : ""}
+  `}
+`;
+export {
+  a as StyledPriorityCard
+};

package/dist/components/priority-cards/index.js

@@ -1,8 +1,52 @@
-import "react/jsx-runtime";
-import "react";
-import "styled-components";
-import { ay as a } from "../../components-BgqdC3aZ.mjs";
-import "../../vendor-i-lggy4V.mjs";
+import { jsx as l } from "react/jsx-runtime";
+import { useState as m, useCallback as o } from "react";
+import { useTheme as f } from "styled-components";
+import { PriorityCard as D } from "./card/index.js";
+import { ReorderGroup as x } from "../../node_modules/framer-motion/dist/es/components/Reorder/Group.js";
+const O = ({
+  disabled: c,
+  items: e,
+  handleSetItems: d
+}) => {
+  const g = f(), [t, a] = m(void 0), [p, s] = m(void 0), n = t ?? e, u = o(
+    (r) => {
+      a([...r]);
+    },
+    []
+  ), i = o((r) => {
+    s(r);
+  }, []), h = o(() => {
+    s(void 0), a(void 0), d(t ?? e);
+  }, [t, d, e]), v = o(
+    (r) => () => {
+      i(r);
+    },
+    [i]
+  );
+  return /* @__PURE__ */ l(
+    x,
+    {
+      as: "div",
+      axis: "y",
+      layoutScroll: !0,
+      onReorder: u,
+      style: { borderBottom: `1px solid ${g.palette.gray[200]}` },
+      values: n,
+      children: n.map((r, y) => /* @__PURE__ */ l(
+        D,
+        {
+          disabled: c,
+          draggedItem: p,
+          handleDragEnd: h,
+          handleItemDragStart: v,
+          item: r,
+          position: y
+        },
+        r.title
+      ))
+    }
+  );
+};
 export {
-  a as PriorityCards
+  O as PriorityCards
 };

package/dist/components/priority-score/index.js

@@ -1,6 +1,30 @@
-import "react/jsx-runtime";
-import "styled-components";
-import { az as m } from "../../components-BgqdC3aZ.mjs";
+import { jsxs as l, jsx as n } from "react/jsx-runtime";
+import { useTheme as c } from "styled-components";
+import { Container as s } from "../container/index.js";
+import { Icon as d } from "../icon/index.js";
+import "../typography/heading/index.js";
+import "../typography/span/index.js";
+import { Text as y } from "../typography/text/index.js";
+const e = 2, T = ({
+  score: t,
+  toFixed: o = void 0
+}) => {
+  const i = c(), a = t <= 33 ? "priority-bars-low" : "priority-bars-medium", p = t > 66 || t === 0 ? "priority-bars-high" : a, r = o === void 0 || o < 0 ? 0 : o, m = t % 1 === 0 ? e + r : e + r + 1;
+  return /* @__PURE__ */ l(s, { alignItems: "center", display: "inline-flex", gap: 0.25, children: [
+    /* @__PURE__ */ n(
+      d,
+      {
+        icon: p,
+        iconClass: t <= 66 ? "fa-kit-duotone" : "",
+        iconColor: t > 0 ? i.palette.primary[500] : i.palette.gray[200],
+        iconSize: "lg",
+        iconType: "fa-kit",
+        secondaryColor: i.palette.gray[200]
+      }
+    ),
+    /* @__PURE__ */ n(y, { color: i.palette.gray[800], size: "md", textAlign: "right", children: (o === void 0 ? t : t.toFixed(r).toString().padStart(m, "0")) + "%" })
+  ] });
+};
 export {
-  m as PriorityScore
+  T as PriorityScore
 };

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

@@ -1,5 +1,63 @@
-import "react/jsx-runtime";
-import { aA as s } from "../../components-BgqdC3aZ.mjs";
+import { jsxs as c, jsx as l } from "react/jsx-runtime";
+import { Bar as d, StyledProgressBar as p } from "./styles.js";
+import { Container as n } from "../container/index.js";
+import "../typography/heading/index.js";
+import "../typography/span/index.js";
+import { Text as u } from "../typography/text/index.js";
+const w = ({
+  minWidth: r = 100,
+  percentage: o,
+  percentageLocation: f = "right",
+  showPercentage: s = !1,
+  orientation: t = "horizontal",
+  rounded: a = !0,
+  variant: i = "default"
+}) => {
+  const e = s && f === "left", x = s ? /* @__PURE__ */ l(
+    n,
+    {
+      alignItems: "center",
+      display: "flex",
+      justify: e ? "flex-end" : "flex-start",
+      width: "40px",
+      children: /* @__PURE__ */ l(u, { ml: 0.5, mr: e ? 0.5 : 0, size: "md", children: `${o}%` })
+    }
+  ) : null, m = /* @__PURE__ */ l(
+    d,
+    {
+      $minWidth: r,
+      $orientation: t,
+      $rounded: a,
+      $variant: i,
+      className: t,
+      children: /* @__PURE__ */ l(
+        p,
+        {
+          $percentage: o,
+          $rounded: a,
+          $variant: i,
+          className: "progress-bar"
+        }
+      )
+    }
+  );
+  return /* @__PURE__ */ c(
+    n,
+    {
+      alignItems: "center",
+      display: "inline-flex",
+      flexDirection: e ? "row-reverse" : "row",
+      height: t === "horizontal" ? "auto" : "100%",
+      maxWidth: e && r !== "full" ? `${r + 43}px` : r == "full" ? "100%" : void 0,
+      minWidth: e && r !== "full" ? `${r + 43}px` : r == "full" ? "100%" : void 0,
+      textAlign: "end",
+      children: [
+        m,
+        x
+      ]
+    }
+  );
+};
 export {
-  s as ProgressBar
+  w as ProgressBar
 };