@fluidattacks/design 3.1.13 → 3.2.0

package/dist/components/menu/index.js

@@ -1,67 +1,8 @@
-import { jsxs as o, jsx as e } from "react/jsx-runtime";
-import { isUndefined as g } from "lodash";
-import { useTheme as x } from "styled-components";
-import { Container as t } from "../container/index.js";
-import { Divider as l } from "../divider/index.js";
-import { Link as y } from "../link/index.js";
+import "react/jsx-runtime";
+import "lodash";
+import "styled-components";
+import { ab as a } from "../../components-C7JPRIEW.mjs";
 import "react";
-import { a as z } from "../../styles-Bdque9TT.mjs";
-import "../icon/index.js";
-import { Tag as b } from "../tag/index.js";
-import "../typography/heading/index.js";
-import "../typography/span/index.js";
-import { Text as r } from "../typography/text/index.js";
-import { u as k } from "../../use-click-outside-BUll8Ag-.mjs";
-const R = ({
-  children: n,
-  commitSha: s,
-  commitShortSha: a,
-  parentElement: c,
-  userInfo: p,
-  setVisibility: d
-}) => {
-  const i = x(), { userName: f, email: h, phone: m, userRole: u } = p;
-  return k(c, () => {
-    d(!1);
-  }), /* @__PURE__ */ o(z, { children: [
-    /* @__PURE__ */ e("li", { className: "user-info", children: /* @__PURE__ */ o(t, { display: "inline-flex", gap: 0.25, width: "100%", children: [
-      /* @__PURE__ */ o(
-        t,
-        {
-          display: "flex",
-          flexDirection: "column",
-          gap: 0.25,
-          width: "100%",
-          children: [
-            /* @__PURE__ */ e(
-              r,
-              {
-                color: i.palette.gray[800],
-                fontWeight: "bold",
-                size: "sm",
-                children: f
-              }
-            ),
-            /* @__PURE__ */ e(r, { color: i.palette.gray[400], size: "sm", children: h }),
-            g(m) ? void 0 : /* @__PURE__ */ e(r, { color: i.palette.gray[400], size: "sm", children: m })
-          ]
-        }
-      ),
-      /* @__PURE__ */ e(t, { children: /* @__PURE__ */ e(b, { tagLabel: u, variant: "role" }) })
-    ] }) }),
-    /* @__PURE__ */ e(l, {}),
-    n,
-    /* @__PURE__ */ e(l, {}),
-    /* @__PURE__ */ e("li", { className: "commit-info", children: /* @__PURE__ */ e(
-      y,
-      {
-        href: `https://gitlab.com/fluidattacks/universe/-/tree/${s}`,
-        iconPosition: "hidden",
-        children: /* @__PURE__ */ e(r, { color: i.palette.gray[400], size: "xs", children: `commit : ${a}` })
-      }
-    ) })
-  ] });
-};
 export {
-  R as Menu
+  a as Menu
 };

package/dist/components/message-banner/index.js

@@ -1,101 +1,7 @@
-import { jsxs as n, jsx as r } from "react/jsx-runtime";
-import { useState as x, useCallback as w } from "react";
-import { styled as b, useTheme as z } from "styled-components";
-import { theme as c } from "../colors/index.js";
-import { Container as l } from "../container/index.js";
-import { Icon as p } from "../icon/index.js";
-import "../typography/heading/index.js";
-import "../typography/span/index.js";
-import { Text as m } from "../typography/text/index.js";
-const S = b.button`
-  align-items: center;
-  background-color: transparent;
-  border: unset;
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  gap: 5px;
-  padding: 0;
-
-  &:hover p {
-    color: ${c.palette.primary[200]};
-  }
-
-  &:hover span {
-    color: ${c.palette.primary[200]};
-  }
-`, j = (t) => t === "platform" ? { normal: "sm", small: void 0 } : { normal: "md", small: "sm" }, M = ({
-  message: t,
-  onClickButton: a,
-  buttonText: d,
-  buttonFontWeight: s = "regular",
-  icon: f,
-  onClose: i,
-  variant: h = "web"
-}) => {
-  const e = z(), [u, g] = x(!0), y = w(() => {
-    g(!1), i == null || i();
-  }, [i]), o = j(h);
-  return /* @__PURE__ */ n(
-    l,
-    {
-      alignItems: "center",
-      bgGradient: e.palette.gradients["01"],
-      display: u ? "flex" : "none",
-      id: "message-banner",
-      justify: "space-between",
-      padding: [0.75, 0.75, 0.75, 0.75],
-      children: [
-        /* @__PURE__ */ n(l, { display: "flex", gap: 0.5, justify: "center", width: "100%", children: [
-          /* @__PURE__ */ r(l, { children: typeof t == "string" ? /* @__PURE__ */ r(
-            m,
-            {
-              color: e.palette.white,
-              display: "inline",
-              size: o.normal,
-              sizeSm: o.small,
-              children: t
-            }
-          ) : t }),
-          a ? /* @__PURE__ */ n(S, { onClick: a, children: [
-            /* @__PURE__ */ r(
-              m,
-              {
-                color: e.palette.white,
-                fontWeight: s,
-                size: o.normal,
-                sizeSm: o.small,
-                textDecoration: "underline",
-                children: d
-              }
-            ),
-            /* @__PURE__ */ r(
-              p,
-              {
-                icon: f ?? "arrow-right",
-                iconColor: e.palette.white,
-                iconSize: "xs",
-                iconType: s === "bold" ? "fa-regular" : "fa-light"
-              }
-            )
-          ] }) : void 0
-        ] }),
-        /* @__PURE__ */ r(
-          p,
-          {
-            clickable: !0,
-            hoverColor: e.palette.primary[200],
-            icon: "close",
-            iconColor: e.palette.white,
-            iconSize: "xs",
-            iconType: "fa-light",
-            onClick: y
-          }
-        )
-      ]
-    }
-  );
-};
+import "react/jsx-runtime";
+import "react";
+import "styled-components";
+import { ac as p } from "../../components-C7JPRIEW.mjs";
 export {
-  M as MessageBanner
+  p as MessageBanner
 };

package/dist/components/modal/index.js

@@ -1,65 +1,8 @@
-import { jsx as e, jsxs as c } from "react/jsx-runtime";
-import a from "lodash";
-import { createPortal as M } from "react-dom";
-import { ModalConfirm as k } from "./modal-confirm/index.js";
-import { ModalFooter as x } from "./modal-footer/index.js";
-import { ModalHeader as b } from "./modal-header/index.js";
-import { M as I, a as h, I as j } from "../../styles-BZQOqe8p.mjs";
-import { M as O } from "../../index-maWH3JYC.mjs";
-import "../typography/heading/index.js";
-import "../typography/span/index.js";
-import { Text as S } from "../typography/text/index.js";
-const P = ({
-  _portal: t = !0,
-  cancelButton: n = void 0,
-  children: p = void 0,
-  confirmButton: s = void 0,
-  content: r = void 0,
-  description: l = "",
-  modalRef: i,
-  otherActions: u = void 0,
-  onClose: f = void 0,
-  title: m = "",
-  size: g,
-  id: o = "modal-container"
-}) => {
-  const d = () => /* @__PURE__ */ e(
-    I,
-    {
-      "aria-label": i.name,
-      "aria-modal": "true",
-      id: "modal-wrapper",
-      children: /* @__PURE__ */ c(h, { $size: g, "data-testid": o, id: o, children: [
-        !a.isEmpty(m) && /* @__PURE__ */ e(
-          b,
-          {
-            description: l,
-            modalRef: i,
-            onClose: f,
-            otherActions: u,
-            title: m
-          }
-        ),
-        p,
-        a.isObject(r) && a.isString(r.imageSrc) && /* @__PURE__ */ e(j, { $framed: r.imageFramed, children: /* @__PURE__ */ e(O, { alt: "modal-img", publicId: r.imageSrc }) }),
-        a.isObject(r) && a.isString(r.imageText) && /* @__PURE__ */ e(S, { mb: 1.5, size: "sm", children: r.imageText }),
-        /* @__PURE__ */ e(
-          x,
-          {
-            cancelButton: n,
-            confirmButton: s,
-            modalRef: i
-          }
-        )
-      ] })
-    }
-  );
-  return t && i.isOpen ? M(
-    d(),
-    document.getElementById("portals") ?? document.body
-  ) : i.isOpen ? d() : null;
-};
+import "react/jsx-runtime";
+import "lodash";
+import "react-dom";
+import { ad as p, ae as t } from "../../components-C7JPRIEW.mjs";
 export {
-  P as Modal,
-  k as ModalConfirm
+  p as Modal,
+  t as ModalConfirm
 };

package/dist/components/modal/modal-confirm/index.js

@@ -1,51 +1,5 @@
-import { jsxs as s, jsx as e } from "react/jsx-runtime";
-import { Button as m } from "../../button/index.js";
-import { Container as c } from "../../container/index.js";
-const l = ({
-  disabled: o,
-  id: i = "modal-confirm",
-  onCancel: t,
-  onConfirm: r = "submit",
-  txtCancel: d,
-  txtConfirm: a
-}) => {
-  const n = r === "submit";
-  return /* @__PURE__ */ s(
-    c,
-    {
-      display: "flex",
-      gap: 0.75,
-      maxWidth: t ? "392px" : "190px",
-      mt: 1.5,
-      children: [
-        t ? /* @__PURE__ */ e(
-          m,
-          {
-            id: `${i}-cancel`,
-            justify: "center",
-            onClick: t,
-            variant: "tertiary",
-            width: "100%",
-            children: d ?? "Cancel"
-          }
-        ) : void 0,
-        /* @__PURE__ */ e(
-          m,
-          {
-            disabled: o,
-            id: i,
-            justify: "center",
-            onClick: n ? void 0 : r,
-            type: n ? "submit" : "button",
-            variant: "primary",
-            width: "100%",
-            children: a ?? "Confirm"
-          }
-        )
-      ]
-    }
-  );
-};
+import "react/jsx-runtime";
+import { ae as m } from "../../../components-C7JPRIEW.mjs";
 export {
-  l as ModalConfirm
+  m as ModalConfirm
 };

package/dist/components/modal/modal-footer/index.js

@@ -1,25 +1,7 @@
-import { jsx as s, jsxs as x } from "react/jsx-runtime";
-import { isEmpty as C } from "lodash";
-import { useCallback as d } from "react";
-import { F as m } from "../../../styles-BZQOqe8p.mjs";
-import { Button as h } from "../../button/index.js";
-const j = ({
-  modalRef: l,
-  confirmButton: r = void 0,
-  cancelButton: i = void 0
-}) => {
-  const { close: e } = l, p = d(() => {
-    i == null || i.onClick(), e();
-  }, [i, e]), a = d(() => {
-    r == null || r.onClick(), e();
-  }, [r, e]);
-  return [r, i].some(
-    (o) => !C(o)
-  ) ? /* @__PURE__ */ s(m, { children: /* @__PURE__ */ x("div", { children: [
-    i && /* @__PURE__ */ s(h, { onClick: p, variant: "tertiary", width: "100%", children: i.text }),
-    r && /* @__PURE__ */ s(h, { onClick: a, variant: "primary", width: "100%", children: r.text })
-  ] }) }) : null;
-};
+import "react/jsx-runtime";
+import "lodash";
+import "react";
+import { bb as i } from "../../../components-C7JPRIEW.mjs";
 export {
-  j as ModalFooter
+  i as ModalFooter
 };

package/dist/components/modal/modal-header/index.js

@@ -1,51 +1,8 @@
-import { jsxs as t, jsx as n } from "react/jsx-runtime";
-import { isString as l, isEmpty as f } from "lodash";
-import { useCallback as h, useEffect as p } from "react";
-import { useTheme as g } from "styled-components";
-import { H as y, T as w } from "../../../styles-BZQOqe8p.mjs";
-import { IconButton as u } from "../../icon-button/index.js";
-import { Heading as x } from "../../typography/heading/index.js";
-import "../../typography/span/index.js";
-import { Text as k } from "../../typography/text/index.js";
-const B = ({
-  title: o,
-  description: e,
-  modalRef: m,
-  otherActions: a,
-  onClose: r
-}) => {
-  const c = g(), i = h(() => {
-    r == null || r(), m.close();
-  }, [m, r]);
-  return p(() => {
-    const s = (d) => {
-      d.key === "Escape" && i();
-    };
-    return window.addEventListener("keydown", s), () => {
-      window.removeEventListener("keydown", s);
-    };
-  }, [i]), /* @__PURE__ */ t(y, { children: [
-    /* @__PURE__ */ t(w, { children: [
-      typeof o == "string" ? /* @__PURE__ */ n(x, { fontWeight: "bold", lineSpacing: 1.75, mr: 1, size: "sm", children: o }) : o,
-      /* @__PURE__ */ t("div", { className: "flex", children: [
-        a,
-        /* @__PURE__ */ n(
-          u,
-          {
-            icon: "close",
-            iconColor: c.palette.gray[300],
-            iconSize: "xs",
-            iconType: "fa-light",
-            id: "modal-close",
-            onClick: i,
-            variant: "ghost"
-          }
-        )
-      ] })
-    ] }),
-    e && l(e) && !f(e) ? /* @__PURE__ */ n(k, { mt: 0.5, size: "sm", children: e }) : e
-  ] });
-};
+import "react/jsx-runtime";
+import "lodash";
+import "react";
+import "styled-components";
+import { bc as a } from "../../../components-C7JPRIEW.mjs";
 export {
-  B as ModalHeader
+  a as ModalHeader
 };

package/dist/components/notification/index.js

@@ -1,113 +1,7 @@
-import { jsxs as e, jsx as t } from "react/jsx-runtime";
-import { useCallback as p } from "react";
-import { styled as c, useTheme as d } from "styled-components";
-import { Container as f } from "../container/index.js";
-import { Icon as r } from "../icon/index.js";
-import { IconButton as g } from "../icon-button/index.js";
-import { Heading as x } from "../typography/heading/index.js";
-import "../typography/span/index.js";
-import { Text as $ } from "../typography/text/index.js";
-const u = c.div`
-  ${({ theme: i, $variant: o }) => `
-    background: ${i.palette.white};
-    border: 1px solid ${i.palette.gray[200]};
-    border-radius: ${i.spacing[0.25]};
-    border-left: 4px solid ${i.palette[o][500]};
-    box-shadow: ${i.shadows.md};
-    position: relative;
-    display: flex;
-    width: 360px;
-    padding: ${i.spacing[1.25]} ${i.spacing[1]} ${i.spacing[1.25]} ${i.spacing[0.75]};
-    gap: ${i.spacing[0.5]};
-
-    button {
-      position: absolute;
-      top: 20px;
-      right: 16px;
-    }
-  `}
-`, m = c.div`
-  ${({ theme: i, $variant: o }) => `
-    height: ${i.spacing[2.5]};
-    width: ${i.spacing[2.5]};
-    position: relative;
-    flex-shrink: 0;
-
-    & .ellipse-1,
-    & .ellipse-2,
-    & .icon {
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      position: absolute;
-    }
-
-    & .ellipse-1 {
-      transform: scale(2.5) translate(-20%, -20%);
-      color: ${i.palette[o][50]};
-      position: absolute;
-    }
-
-    & .ellipse-2 {
-      transform: scale(2) translate(-25%, -25%);
-      color: ${i.palette[o][200]};
-    }
-
-    & .icon {
-      color: ${i.palette[o][500]};
-    }
-  `}
-`, b = (i) => i === "warning" ? "triangle-exclamation" : i === "info" ? "circle-info" : i === "success" ? "circle-check" : "circle-exclamation", N = ({
-  description: i,
-  onClose: o,
-  title: s,
-  variant: n
-}) => {
-  const l = d(), a = p(() => {
-    o == null || o();
-  }, [o]);
-  return /* @__PURE__ */ e(
-    u,
-    {
-      $variant: n,
-      className: `notification notification__${n}`,
-      role: "alertdialog",
-      children: [
-        /* @__PURE__ */ e(m, { $variant: n, children: [
-          /* @__PURE__ */ t(r, { icon: "circle", iconClass: "ellipse-1", iconSize: "xs" }),
-          /* @__PURE__ */ t(r, { icon: "circle", iconClass: "ellipse-2", iconSize: "xs" }),
-          /* @__PURE__ */ t(
-            r,
-            {
-              icon: b(n),
-              iconClass: "icon",
-              iconSize: "xs",
-              iconType: "fa-light"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ e(f, { pr: 1.5, children: [
-          /* @__PURE__ */ t(x, { fontWeight: "bold", size: "xs", children: s }),
-          /* @__PURE__ */ t($, { size: "sm", whiteSpace: "break-spaces", wordWrap: "break-word", children: i })
-        ] }),
-        /* @__PURE__ */ t(
-          g,
-          {
-            height: "fit-content",
-            icon: "close",
-            iconColor: l.palette.gray[400],
-            iconSize: "xs",
-            iconType: "fa-light",
-            onClick: a,
-            px: 0.125,
-            py: 0.125,
-            variant: "ghost"
-          }
-        )
-      ]
-    }
-  );
-};
+import "react/jsx-runtime";
+import "react";
+import "styled-components";
+import { af as p } from "../../components-C7JPRIEW.mjs";
 export {
-  N as Notification
+  p as Notification
 };

package/dist/components/notification-sign/index.js

@@ -1,47 +1,6 @@
-import { jsx as o } from "react/jsx-runtime";
-import { forwardRef as s } from "react";
-import { styled as n } from "styled-components";
-import { B as c } from "../../styles-CplEd2kw.mjs";
-const f = n(
-  c
-)`
-  ${({ theme: t, $variant: i }) => `
-    align-items: center;
-    background: ${i === "error" ? t.palette.primary[400] : t.palette.warning[500]};
-    border-radius: 100%;
-    font-family: ${t.typography.type.primary};
-    justify-content: center;
-    padding: 0;
-    position: absolute;
-    z-index: 11;
-    width: ${t.spacing[0.5]};
-    height: ${t.spacing[0.5]};
-  `}
-`, d = n.div`
-  align-items: center;
-  color: ${({ theme: t }) => t.palette.white};
-  display: flex;
-  font-size: 6px;
-  font-weight: ${({ theme: t }) => t.typography.weight.bold};
-  justify-content: center;
-`, $ = s(function({
-  numberIndicator: i,
-  show: r,
-  variant: e = "error",
-  ...a
-}, p) {
-  return /* @__PURE__ */ o(
-    f,
-    {
-      $variant: e,
-      className: r ? "flex" : "hidden",
-      "data-testid": "notification-sign",
-      ref: p,
-      ...a,
-      children: i && /* @__PURE__ */ o(d, { children: i <= 9 ? i : 9 })
-    }
-  );
-});
+import "react/jsx-runtime";
+import "react";
+import { ag as a } from "../../components-C7JPRIEW.mjs";
 export {
-  $ as NotificationSign
+  a as NotificationSign
 };

package/dist/components/number-input/index.js

@@ -1,89 +1,7 @@
-import { jsx as l } from "react/jsx-runtime";
-import { toNumber as d, isEmpty as k } from "lodash";
-import { forwardRef as T, useState as C, useCallback as s } from "react";
-import { styled as f } from "styled-components";
-import { T as $ } from "../../index-DwznImvK.mjs";
-const S = f.div`
-  width: fit-content;
-  border: ${({ theme: e }) => `1px solid ${e.palette.gray[300]}`};
-  border-radius: 4px;
-  background: none;
-  color: ${({ theme: e }) => e.palette.black};
-  font-family: ${({ theme: e }) => e.typography.type.primary};
-  font-size: ${({ theme: e }) => e.typography.text.md};
-  height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.5em;
-`, F = f.input`
-  width: 4em;
-  appearance: textfield;
-  border-style: none;
-  padding: 0.5rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  padding-left: 0.5rem;
-  background: none;
-
-  &:focus {
-    border-color: unset;
-    box-shadow: none;
-    outline: none;
-  }
-
-  &::-webkit-outer-spin-button,
-  &::-webkit-inner-spin-button {
-    opacity: 1;
-  }
-`, K = T(function({
-  autoUpdate: c = !1,
-  decimalPlaces: b = 0,
-  defaultValue: p = 0,
-  max: o,
-  min: n,
-  name: m,
-  onEnter: a,
-  tooltipMessage: y,
-  ...h
-}, x) {
-  const r = b < 0 ? 0 : b, [g, u] = C(Number(p).toFixed(r)), N = s(
-    (t) => {
-      const i = d(t.target.value);
-      t.target.value.endsWith(".") ? u(t.target.value) : i >= Number(n) && i <= Number(o) && (u(String(i)), c && a(d(i.toFixed(r)))), t.stopPropagation();
-    },
-    [c, r, o, n, a]
-  ), I = s(
-    (t) => {
-      t.currentTarget.contains(t.relatedTarget) || u(Number(p).toFixed(r)), t.stopPropagation();
-    },
-    [r, p]
-  ), w = s(
-    (t) => {
-      t.stopPropagation(), t.key === "Enter" && !k(t.currentTarget.value) && a(d(t.currentTarget.value));
-    },
-    [a]
-  );
-  return /* @__PURE__ */ l(S, { onBlur: I, tabIndex: -1, children: /* @__PURE__ */ l($, { id: "numberInputTooltip", tip: y, children: /* @__PURE__ */ l(
-    F,
-    {
-      ...h,
-      "aria-label": m,
-      "aria-valuemax": Number(o),
-      "aria-valuemin": Number(n),
-      "aria-valuenow": Number(g),
-      max: o,
-      min: n,
-      name: m,
-      onChange: N,
-      onKeyUp: w,
-      ref: x,
-      step: 10 ** -r,
-      type: "number",
-      value: g
-    }
-  ) }) });
-});
+import "react/jsx-runtime";
+import "lodash";
+import "react";
+import { ah as i } from "../../components-C7JPRIEW.mjs";
 export {
-  K as NumberInput
+  i as NumberInput
 };