@fluidattacks/design 3.1.12 → 3.1.13

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

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

package/dist/components/notification/index.js

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

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

@@ -1,11 +1,13 @@
-import { jsx as e } from "react/jsx-runtime";
+import { jsx as o } from "react/jsx-runtime";
 import { forwardRef as s } from "react";
-import { styled as i } from "styled-components";
-import { B as p } from "../../styles-C3cZmKVJ.mjs";
-const d = i(p)`
-  ${({ theme: t, $variant: n }) => `
+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: ${n === "error" ? t.palette.primary[400] : t.palette.warning[500]};
+    background: ${i === "error" ? t.palette.primary[400] : t.palette.warning[500]};
     border-radius: 100%;
     font-family: ${t.typography.type.primary};
     justify-content: center;
@@ -15,16 +17,31 @@ const d = i(p)`
     width: ${t.spacing[0.5]};
     height: ${t.spacing[0.5]};
   `}
-`, c = i.div`
+`, 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;
-`, g = s(function({ numberIndicator: t, show: n, variant: r = "error", ...a }, o) {
-  return e(d, { $variant: r, className: n ? "flex" : "hidden", "data-testid": "notification-sign", ref: o, ...a, children: t && e(c, { children: t <= 9 ? t : 9 }) });
+`, $ = 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 })
+    }
+  );
 });
 export {
-  g as NotificationSign
+  $ as NotificationSign
 };

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

@@ -1,22 +1,22 @@
-import { jsx as u } from "react/jsx-runtime";
+import { jsx as l } from "react/jsx-runtime";
 import { toNumber as d, isEmpty as k } from "lodash";
-import { forwardRef as w, useState as T, useCallback as l } from "react";
-import { styled as g } from "styled-components";
-import { T as $ } from "../../index-D-lcuEHY.mjs";
-const P = g.div`
+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: t }) => `1px solid ${t.palette.gray[300]}`};
+  border: ${({ theme: e }) => `1px solid ${e.palette.gray[300]}`};
   border-radius: 4px;
   background: none;
-  color: ${({ theme: t }) => t.palette.black};
-  font-family: ${({ theme: t }) => t.typography.type.primary};
-  font-size: ${({ theme: t }) => t.typography.text.md};
+  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;
-`, E = g.input`
+`, F = f.input`
   width: 4em;
   appearance: textfield;
   border-style: none;
@@ -36,17 +36,54 @@ const P = g.div`
   &::-webkit-inner-spin-button {
     opacity: 1;
   }
-`, U = w(function({ autoUpdate: t = !1, decimalPlaces: s = 0, defaultValue: m = 0, max: r, min: o, name: b, onEnter: n, tooltipMessage: f, ...y }, h) {
-  const a = s < 0 ? 0 : s, [c, p] = T(Number(m).toFixed(a)), x = l((e) => {
-    const i = d(e.target.value);
-    e.target.value.endsWith(".") ? p(e.target.value) : i >= Number(o) && i <= Number(r) && (p(String(i)), t && n(d(i.toFixed(a)))), e.stopPropagation();
-  }, [t, a, r, o, n]), v = l((e) => {
-    e.currentTarget.contains(e.relatedTarget) || p(Number(m).toFixed(a)), e.stopPropagation();
-  }, [a, m]), N = l((e) => {
-    e.stopPropagation(), e.key !== "Enter" || k(e.currentTarget.value) || n(d(e.currentTarget.value));
-  }, [n]);
-  return u(P, { onBlur: v, tabIndex: -1, children: u($, { id: "numberInputTooltip", tip: f, children: u(E, { ...y, "aria-label": b, "aria-valuemax": Number(r), "aria-valuemin": Number(o), "aria-valuenow": Number(c), max: r, min: o, name: b, onChange: x, onKeyUp: N, ref: h, step: 10 ** -a, type: "number", value: c }) }) });
+`, 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
+    }
+  ) }) });
 });
 export {
-  U as NumberInput
+  K as NumberInput
 };

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

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

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

@@ -1,15 +1,76 @@
 import { jsxs as p, jsx as e } from "react/jsx-runtime";
-import { useTheme as s } from "styled-components";
-import { M as c } from "../../../index-BwFnfaRh.mjs";
+import { useTheme as m } from "styled-components";
+import { M as s } from "../../../index-maWH3JYC.mjs";
 import { Container as i } from "../../container/index.js";
-import { Icon as m } from "../../icon/index.js";
+import { Icon as c } from "../../icon/index.js";
 import "../../typography/heading/index.js";
 import "../../typography/span/index.js";
 import { Text as g } from "../../typography/text/index.js";
-const h = { Azure: "integrates/autoenrollment/azureIcon", Bitbucket: "integrates/autoenrollment/bitbucketLogo", GitHub: "integrates/autoenrollment/githubLogo", GitLab: "integrates/autoenrollment/gitlabIcon" }, L = ({ icon: o, label: a, onClick: l, onlyLabel: r = !1, provider: t = "GitLab" }) => {
-  const n = s();
-  return p(i, { alignItems: "center", bgColorHover: n.palette.gray[100], borderRadius: "4px", cursor: "pointer", display: "flex", flexDirection: "column", gap: 0.25, height: "62px", justify: "center", minWidth: "64px", onClick: l, pb: 0.5, pl: 0.25, pr: 0.25, pt: 0.5, children: [!r && e(i, { height: "24px", width: "24px", children: o === void 0 ? e(c, { alt: `${t} Logo`, height: "100%", publicId: h[t], width: "100%" }) : e(m, { icon: o, iconColor: "#000", iconSize: "sm", iconType: "fa-light" }) }), e(i, { alignItems: "center", display: "flex", minWidth: "24px", children: e(g, { color: n.palette.gray[800], display: "inline", size: "xs", textAlign: "center", whiteSpace: r ? "break-spaces" : "nowrap", wordWrap: "unset", children: a ?? t }) })] });
+const h = {
+  Azure: "integrates/autoenrollment/azureIcon",
+  Bitbucket: "integrates/autoenrollment/bitbucketLogo",
+  GitHub: "integrates/autoenrollment/githubLogo",
+  GitLab: "integrates/autoenrollment/gitlabIcon"
+}, z = ({
+  icon: o,
+  label: a,
+  onClick: l,
+  onlyLabel: r = !1,
+  provider: t = "GitLab"
+}) => {
+  const n = m();
+  return /* @__PURE__ */ p(
+    i,
+    {
+      alignItems: "center",
+      bgColorHover: n.palette.gray[100],
+      borderRadius: "4px",
+      cursor: "pointer",
+      display: "flex",
+      flexDirection: "column",
+      gap: 0.25,
+      height: "62px",
+      justify: "center",
+      minWidth: "64px",
+      onClick: l,
+      pb: 0.5,
+      pl: 0.25,
+      pr: 0.25,
+      pt: 0.5,
+      children: [
+        r ? !1 : /* @__PURE__ */ e(i, { height: "24px", width: "24px", children: o === void 0 ? /* @__PURE__ */ e(
+          s,
+          {
+            alt: `${t} Logo`,
+            height: "100%",
+            publicId: h[t],
+            width: "100%"
+          }
+        ) : /* @__PURE__ */ e(
+          c,
+          {
+            icon: o,
+            iconColor: "#000",
+            iconSize: "sm",
+            iconType: "fa-light"
+          }
+        ) }),
+        /* @__PURE__ */ e(i, { alignItems: "center", display: "flex", minWidth: "24px", children: /* @__PURE__ */ e(
+          g,
+          {
+            color: n.palette.gray[800],
+            display: "inline",
+            size: "xs",
+            textAlign: "center",
+            whiteSpace: r ? "break-spaces" : "nowrap",
+            wordWrap: "unset",
+            children: a ?? t
+          }
+        ) })
+      ]
+    }
+  );
 };
 export {
-  L as OptionContainer
+  z as OptionContainer
 };