@fluidattacks/design 8.0.0 → 8.2.0

package/dist/components/modal/index.js

@@ -1,12 +1,114 @@
-import "react/jsx-runtime";
-import "../../vendor-i-lggy4V.mjs";
-import "react";
-import "react-dom";
-import "styled-components";
-import { z as p, ak as s, al as d, am as M } from "../../components-BgqdC3aZ.mjs";
+import { jsx as i, jsxs as v } from "react/jsx-runtime";
+import o from "../../_virtual/lodash.js";
+import { useState as E, useRef as y, useEffect as F } from "react";
+import { createPortal as $ } from "react-dom";
+import { useTheme as z } from "styled-components";
+import { ModalFooter as k } from "./footer/index.js";
+import { Header as A } from "./header/index.js";
+import { ModalConfirm as mr } from "./modal-confirm/index.js";
+import { ModalWrapper as I, ModalContainer as w, ModalContent as B, ImageContainer as D } from "./styles.js";
+import { CloudImage as N } from "../cloud-image/index.js";
+import { Container as P } from "../container/index.js";
+import { Tabs as W } from "../tabs/index.js";
+import "../typography/heading/index.js";
+import "../typography/span/index.js";
+import { Text as _ } from "../typography/text/index.js";
+import { ColumnsModal as ar } from "./columns-modal/index.js";
+const er = ({
+  _portal: b = !0,
+  alert: C,
+  cancelButton: n = void 0,
+  children: l = void 0,
+  confirmButton: p = void 0,
+  content: r = void 0,
+  description: M = void 0,
+  dismissable: O = !0,
+  modalRef: e,
+  otherActions: T = void 0,
+  onClose: j = void 0,
+  tabItems: t = void 0,
+  title: s = void 0,
+  size: H,
+  id: c = "modal-container"
+}) => {
+  const f = z(), [u, g] = E(void 0), a = y(null), d = y(!1), m = Array.isArray(t) && t.length > 0, S = n ?? p;
+  F(() => {
+    if (m && !d.current && a.current) {
+      const x = a.current.getBoundingClientRect().height;
+      x > 50 && (g(x), d.current = !0);
+    }
+    e.isOpen || (g(void 0), d.current = !1);
+  }, [m, e.isOpen]);
+  const h = /* @__PURE__ */ i(
+    I,
+    {
+      "aria-label": e.name,
+      "aria-modal": "true",
+      id: "modal-wrapper",
+      children: /* @__PURE__ */ v(
+        w,
+        {
+          $size: H,
+          "data-testid": c,
+          flexDirection: "column",
+          id: c,
+          ref: m ? a : void 0,
+          style: m && u ? { height: u } : void 0,
+          children: [
+            !o.isEmpty(s) && !o.isNil(s) && /* @__PURE__ */ i(
+              A,
+              {
+                description: M,
+                dismissable: O,
+                modalRef: e,
+                onClose: j,
+                otherActions: T,
+                title: s
+              }
+            ),
+            t && /* @__PURE__ */ i(
+              P,
+              {
+                borderTop: `1px solid ${f.palette.gray[300]}`,
+                display: "block",
+                mb: 1.25,
+                position: "sticky",
+                children: /* @__PURE__ */ i(W, { items: t })
+              }
+            ),
+            (o.isObject(r) || l) && /* @__PURE__ */ v(
+              B,
+              {
+                style: S ? { borderBottom: `1px solid ${f.palette.gray[200]}` } : void 0,
+                children: [
+                  l,
+                  o.isObject(r) && o.isString(r.imageSrc) && /* @__PURE__ */ i(D, { $framed: r.imageFramed, children: /* @__PURE__ */ i(N, { alt: "modal-img", publicId: r.imageSrc }) }),
+                  o.isObject(r) && o.isString(r.imageText) && /* @__PURE__ */ i(_, { size: "md", children: r.imageText })
+                ]
+              }
+            ),
+            /* @__PURE__ */ i(
+              k,
+              {
+                alert: C,
+                cancelButton: n,
+                confirmButton: p,
+                modalRef: e
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+  return b && e.isOpen ? $(
+    h,
+    document.getElementById("portals") ?? document.body
+  ) : e.isOpen ? h : null;
+};
 export {
-  p as ColumnsModal,
-  s as Modal,
-  d as ModalConfirm,
-  M as ModalFooter
+  ar as ColumnsModal,
+  er as Modal,
+  mr as ModalConfirm,
+  k as ModalFooter
 };

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

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

package/dist/components/modal/styles.js

@@ -0,0 +1,156 @@
+import { styled as a } from "styled-components";
+import { variantBuilder as o } from "../@core/variants/utils.js";
+import { Container as t } from "../container/index.js";
+const { getVariant: r } = o(
+  (i) => ({
+    fixed: `
+      height: auto;
+      min-width: 300px;
+      padding: ${i.spacing[1.25]};
+      overflow: hidden auto;
+    `,
+    lg: `
+      width: 80%;
+
+      @media screen and (min-width: ${i.breakpoints.sm}) {
+        width: 72%;
+      }
+    `,
+    md: `
+      width: 60%;
+
+      @media screen and (min-width: ${i.breakpoints.sm}) {
+        width: 48%;
+      }
+    `,
+    sm: `
+      width: 40%;
+
+      @media screen and (min-width: ${i.breakpoints.sm}) {
+        width: 32%;
+      }
+    `
+  })
+), c = a.div.attrs({
+  className: "comp-modal fixed inset-0 overflow-auto"
+})`
+  align-items: center;
+  background-color: ${({ $bgColor: i = "rgb(52 64 84 / 70%)" }) => i};
+  display: flex;
+  justify-content: center;
+  z-index: 99999;
+`, l = a(t)`
+  ${({ theme: i, $size: n }) => `
+    background-color: ${i.palette.white};
+    border: 1px solid ${i.palette.gray[200]};
+    border-radius: ${i.spacing[0.25]};
+    color: ${i.palette.gray[800]};
+    display: flex;
+    font-family: ${i.typography.type.primary};
+    font-size: ${i.typography.text.md};
+    max-height: 80%;
+    min-height: minmax(content-fit, 32%);
+    box-shadow: ${i.shadows.lg};
+    margin: auto;
+    white-space: pre-line;
+
+    ${r(i, n)}
+  `}
+`, p = a.div`
+  ${({ theme: i }) => `
+    background-color: ${i.palette.white};
+    border-radius: 0 0 ${i.spacing[0.25]} ${i.spacing[0.25]};
+    display: flex;
+    flex-direction: column;
+    overflow: hidden auto;
+    padding: 0 ${i.spacing[1.5]} ${i.spacing[1.5]} ${i.spacing[1.5]};
+    scrollbar-color: ${i.palette.gray[600]} ${i.palette.gray[100]};
+    scroll-padding: ${i.spacing[0.5]};
+
+    &:has(form) {
+      flex-direction: unset;
+      overflow: hidden;
+      padding: 0;
+    }
+
+    &:has(#footer) {
+      flex-direction: column;
+      overflow: hidden;
+      height: 100%;
+
+      > *:not(#footer) {
+        flex: 1 1 auto;
+        overflow-y: auto;
+      }
+    }
+  `}
+`, g = a.div`
+  border-radius: ${({ theme: i }) => `${i.spacing[0.25]} ${i.spacing[0.25]} 0 0`};
+  display: block;
+  overflow: unset;
+  height: max-content;
+  max-height: 100%;
+  max-width: 100%;
+  padding: ${({ theme: i }) => `${i.spacing[1.25]}`};
+  padding-bottom: ${({ theme: i }) => `${i.spacing[1.5]}`};
+  position: sticky;
+  z-index: 1;
+`, $ = a.div.attrs({
+  className: "flex items-center justify-between"
+})``, f = a.div`
+  ${({ theme: i }) => `
+    border-radius: 0 0 ${i.spacing[0.25]} ${i.spacing[0.25]};
+    display: flex;
+    flex-direction: row;
+    gap: ${i.spacing[0.75]};
+    justify-content: space-between;
+    max-width: 392px;
+
+    > label {
+      margin: 0;
+      flex: 1 1 auto;
+    }
+
+    > div {
+      display: flex;
+      flex-direction: row;
+      flex: 1 1 auto;
+      gap: ${i.spacing[0.75]};
+      margin-right: ${i.spacing[0.75]};
+
+      > button {
+        justify-content: center;
+        max-width: 190px;
+      }
+    }
+
+    > div:last-child {
+      margin-right: 0;
+    }
+  `}
+`, x = a.div`
+  img {
+    margin: 0 calc(-${({ theme: i }) => i.spacing[1.25]} - 1px)
+      ${({ theme: i }) => i.spacing[1.25]};
+
+    min-width: calc(100% + 2px + ${({ theme: i }) => i.spacing[3]});
+    height: 185px;
+    object-fit: cover;
+
+    ${({ $framed: i = !1 }) => i ? `
+            border-radius: 8px;
+            min-width: 100%;
+            margin-left: 0;
+            margin-right: 0;
+          ` : ""}
+  }
+`;
+export {
+  f as Footer,
+  g as Header,
+  x as ImageContainer,
+  l as ModalContainer,
+  p as ModalContent,
+  c as ModalWrapper,
+  $ as Title
+};

package/dist/components/modal/utils.js

@@ -0,0 +1,13 @@
+const g = (u) => u.reduce(
+  (i, r) => r.group ? i[r.group] ? {
+    ...i,
+    [r.group]: [...i[r.group], r]
+  } : {
+    ...i,
+    [r.group]: [r]
+  } : i,
+  {}
+);
+export {
+  g as groupOptions
+};

package/dist/components/notification/index.js

@@ -1,7 +1,65 @@
-import "react/jsx-runtime";
-import "react";
-import "styled-components";
-import { an as p } from "../../components-BgqdC3aZ.mjs";
+import { jsxs as e, jsx as i } from "react/jsx-runtime";
+import { useCallback as s } from "react";
+import { useTheme as m } from "styled-components";
+import { NotificationContainer as p, IconsContainer as f, NotificationTitle as h } from "./styles.js";
+import { getIcon as g } from "./utils.js";
+import { Container as d } from "../container/index.js";
+import { Icon as t } from "../icon/index.js";
+import { IconButton as C } from "../icon-button/index.js";
+import "../typography/heading/index.js";
+import "../typography/span/index.js";
+import { Text as x } from "../typography/text/index.js";
+const j = ({
+  description: c,
+  onClose: n,
+  title: r,
+  variant: o
+}) => {
+  const l = m(), a = s(() => {
+    n?.();
+  }, [n]);
+  return /* @__PURE__ */ e(
+    p,
+    {
+      $variant: o,
+      className: `notification notification__${o}`,
+      role: "alertdialog",
+      children: [
+        /* @__PURE__ */ e(f, { $variant: o, children: [
+          /* @__PURE__ */ i(t, { icon: "circle", iconClass: "ellipse-1", iconSize: "lg" }),
+          /* @__PURE__ */ i(t, { icon: "circle", iconClass: "ellipse-2", iconSize: "lg" }),
+          /* @__PURE__ */ i(
+            t,
+            {
+              icon: g(o),
+              iconClass: "icon",
+              iconSize: "lg",
+              iconType: "fa-light"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e(d, { pr: 1.5, children: [
+          /* @__PURE__ */ i(h, { fontWeight: "bold", size: "xs", children: r }),
+          /* @__PURE__ */ i(x, { size: "md", whiteSpace: "break-spaces", wordWrap: "break-word", children: c })
+        ] }),
+        /* @__PURE__ */ i(
+          C,
+          {
+            height: "fit-content",
+            icon: "close",
+            iconColor: l.palette.gray[400],
+            iconSize: "lg",
+            iconType: "fa-light",
+            onClick: a,
+            px: 0.125,
+            py: 0.125,
+            variant: "ghost"
+          }
+        )
+      ]
+    }
+  );
+};
 export {
-  p as Notification
+  j as Notification
 };

package/dist/components/notification/styles.js

@@ -0,0 +1,62 @@
+import { styled as t } from "styled-components";
+import { Heading as s } from "../typography/heading/index.js";
+import "../typography/span/index.js";
+import "../typography/text/index.js";
+const r = t.div`
+  ${({ theme: o, $variant: i }) => `
+    background: ${o.palette.white};
+    border: 1px solid ${o.palette.gray[200]};
+    border-radius: ${o.spacing[0.25]};
+    border-left: 4px solid ${o.palette[i][500]};
+    box-shadow: ${o.shadows.md};
+    position: relative;
+    display: flex;
+    width: 360px;
+    padding: ${o.spacing[1]} ${o.spacing[1]} ${o.spacing[1]} ${o.spacing[1]};
+    gap: ${o.spacing[0.5]};
+
+    button {
+      position: absolute;
+      top: 20px;
+      right: 16px;
+    }
+  `}
+`, e = t(s)`
+  font-size: ${({ theme: o }) => o.typography.text.md};
+`, c = t.div`
+  ${({ theme: o, $variant: i }) => `
+    height: ${o.spacing[2.5]};
+    width: ${o.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: ${o.palette[i][50]};
+      position: absolute;
+    }
+
+    & .ellipse-2 {
+      transform: scale(2) translate(-25%, -25%);
+      color: ${o.palette[i][200]};
+    }
+
+    & .icon {
+      color: ${o.palette[i][500]};
+    }
+  `}
+`;
+export {
+  c as IconsContainer,
+  r as NotificationContainer,
+  e as NotificationTitle
+};

package/dist/components/notification/utils.js

@@ -0,0 +1,4 @@
+const c = (e) => e === "warning" ? "triangle-exclamation" : e === "info" ? "circle-info" : e === "success" ? "circle-check" : "circle-exclamation";
+export {
+  c as getIcon
+};

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

@@ -1,6 +1,25 @@
-import "react/jsx-runtime";
-import "react";
-import { ao as a } from "../../components-BgqdC3aZ.mjs";
+import { jsx as t } from "react/jsx-runtime";
+import { forwardRef as a } from "react";
+import { NotificationSignButton as e, NumberIndicator as c } from "./styles.js";
+const g = a(function({
+  numberIndicator: i,
+  show: o,
+  variant: n = "error",
+  ...r
+}, f) {
+  return /* @__PURE__ */ t(
+    e,
+    {
+      $numberIndicator: i,
+      $variant: n,
+      className: o ? "flex" : "hidden",
+      "data-testid": "notification-sign",
+      ref: f,
+      ...r,
+      children: i && /* @__PURE__ */ t(c, { children: i <= 9 ? i : 9 })
+    }
+  );
+});
 export {
-  a as NotificationSign
+  g as NotificationSign
 };

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

@@ -0,0 +1,34 @@
+import { styled as o } from "styled-components";
+import { BaseComponent as e } from "../@core/styles.js";
+const s = o(
+  e
+)`
+  ${({ theme: t, $variant: r, $numberIndicator: n }) => {
+  const i = n != null && n > 0;
+  return `
+      align-items: center;
+      background: ${r === "error" ? t.palette.primary[400] : t.palette.warning[500]};
+      border-radius: ${i ? "100px" : "100%"};
+      font-family: ${t.typography.type.primary};
+      justify-content: center;
+      padding: ${i ? `0 ${t.spacing[0.25]}` : `${t.spacing[0.25]}`};
+      position: ${i ? "unset" : "absolute"};
+      max-width: fit-content;
+      ${i ? `min-width: ${t.spacing[1.25]};` : ""}
+      ${i ? "" : "z-index: 11;"}
+      ${i ? `height: ${t.spacing[0.875]};` : ""}
+    `;
+}}
+`, g = o.div`
+  align-items: center;
+  color: ${({ theme: t }) => t.palette.white};
+  display: flex;
+  font-size: ${({ theme: t }) => t.typography.text.sm};
+  font-weight: ${({ theme: t }) => t.typography.weight.regular};
+  justify-content: center;
+  line-height: 18px;
+`;
+export {
+  s as NotificationSignButton,
+  g as NumberIndicator
+};

package/dist/components/oauth-selector/index.js

@@ -1,8 +1,95 @@
-import "react/jsx-runtime";
-import "react";
-import "styled-components";
-import { ap as i, ar as e } from "../../components-BgqdC3aZ.mjs";
+import { jsxs as r, jsx as l } from "react/jsx-runtime";
+import { useState as g, useRef as y, useCallback as n } from "react";
+import { useTheme as w } from "styled-components";
+import { OptionContainer as a } from "./option-container/index.js";
+import { Button as O } from "../button/index.js";
+import { Container as c } from "../container/index.js";
+import { useClickOutside as I } from "../../hooks/use-click-outside.js";
+const B = ({
+  align: p = "end",
+  buttonLabel: d = "Add Credential",
+  children: m,
+  id: f,
+  manualOption: t,
+  providers: i
+}) => {
+  const h = w(), [u, o] = g(!1), s = y(null);
+  I(s, () => {
+    o(!1);
+  });
+  const x = n(
+    (e) => {
+      t?.onClick(e), o(!1);
+    },
+    [t]
+  ), C = n(() => {
+    o((e) => !e);
+  }, [o]), b = n(
+    (e) => (k) => {
+      i[e]?.onClick(k), o(!1);
+    },
+    [i]
+  );
+  return /* @__PURE__ */ r(
+    c,
+    {
+      alignItems: p,
+      display: "flex",
+      flexDirection: "column",
+      position: "relative",
+      ref: s,
+      width: "max-content",
+      zIndex: 10,
+      children: [
+        /* @__PURE__ */ l(O, { icon: "plus", onClick: C, variant: "primary", children: d }),
+        /* @__PURE__ */ r(
+          c,
+          {
+            alignItems: "center",
+            bgColor: "#fff",
+            border: `1px solid ${h.palette.gray[200]}`,
+            borderRadius: "4px",
+            display: "flex",
+            gap: 0.5,
+            height: "78px",
+            id: f,
+            pb: 0.5,
+            pl: 0.75,
+            position: "absolute",
+            pr: 0.75,
+            pt: 0.5,
+            shadow: "md",
+            top: "40px",
+            visibility: u ? "visible" : "hidden",
+            zIndex: 10,
+            children: [
+              Object.keys(i).map(
+                (e) => /* @__PURE__ */ l(
+                  a,
+                  {
+                    onClick: b(e),
+                    provider: e
+                  },
+                  e
+                )
+              ),
+              t === void 0 ? void 0 : /* @__PURE__ */ l(
+                a,
+                {
+                  icon: "square-plus",
+                  label: t.label ?? "Add manually",
+                  onClick: x
+                }
+              ),
+              m
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
 export {
-  i as OAuthSelector,
-  e as OptionContainer
+  B as OAuthSelector,
+  a as OptionContainer
 };