@fluidattacks/design 3.1.13 → 3.2.0

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

@@ -1,100 +1,8 @@
-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
-            ]
-          }
-        )
-      ]
-    }
-  );
-};
+import "react/jsx-runtime";
+import "react";
+import "styled-components";
+import { ai as p, aj as e } from "../../components-C7JPRIEW.mjs";
 export {
-  O as OAuthSelector,
-  d as OptionContainer
+  p as OAuthSelector,
+  e as OptionContainer
 };

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

@@ -1,76 +1,6 @@
-import { jsxs as p, jsx as e } from "react/jsx-runtime";
-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 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"
-}, 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
-          }
-        ) })
-      ]
-    }
-  );
-};
+import "react/jsx-runtime";
+import "styled-components";
+import { aj as p } from "../../../components-C7JPRIEW.mjs";
 export {
-  z as OptionContainer
+  p as OptionContainer
 };

package/dist/components/plan-card/index.js

@@ -1,155 +1,5 @@
-import { jsxs as a, jsx as r } from "react/jsx-runtime";
-import { RecommendedTag as g } from "./recommended-tag/index.js";
-import { styled as s } from "styled-components";
-import { Button as b } from "../button/index.js";
-import { theme as n } from "../colors/index.js";
-import { Container as m } from "../container/index.js";
-import { Heading as u } from "../typography/heading/index.js";
-import "../typography/span/index.js";
-import { Text as o } from "../typography/text/index.js";
-const f = s.div`
-  ${({ className: t, theme: e }) => `
-    align-items: flex-start;
-    border-radius: ${e.spacing[1]};
-    background: ${e.palette.white};
-    display: flex;
-    flex-direction: column;
-    gap: ${e.spacing[1]};
-    padding: ${e.spacing[1.5]};
-    position: relative;
-    width: 320px;
-
-    button {
-      text-align: center;
-      width: 100%;
-    }
-
-    ${t === "essential" ? `border: 2px solid ${e.palette.gray[300]};` : `
-          box-shadow: 0px 9px 18px 0px rgba(243, 38, 55, 0.06),
-            0px 18px 27px 0px rgba(243, 38, 55, 0.10);
-
-          &::before {
-            background: ${e.palette.gradients["01"]} border-box;
-            border-radius: ${e.spacing[1]};
-            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;
-          }
-        `}
-  `}
-`;
-s.div`
-  ${({ className: t, theme: e }) => `
-    align-items: flex-start;
-    border-radius: ${e.spacing[1]};
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    gap: ${e.spacing[1.5]};
-    padding: ${e.spacing[1.5]};
-    width: 466px;
-
-    button {
-      text-align: center;
-      width: 100%;
-    }
-
-    ${t === "essential" ? `
-          background: linear-gradient(
-            180deg,
-            ${e.palette.primary[400]} 0%,
-            ${e.palette.black} 100%
-          );` : `
-          background: ${e.palette.white};
-          box-shadow: 0px 9px 18px 0px rgba(243, 38, 55, 0.06),
-            0px 18px 27px 0px rgba(243, 38, 55, 0.10);
-        `}
-
-    @media screen and (max-width: ${e.breakpoints.mobile}) {
-      width: 320px;
-    }
-  `}
-`;
-const $ = {
-  advanced: {
-    title: "Advanced plan",
-    benefits: "Leverage vulnerability scanning + AI + expert intelligence",
-    buttonText: "Contact sales",
-    description: "For teams that want to discover risk exposure with speed and accuracy.",
-    priceGroup: "$1,579"
-  },
-  essential: {
-    title: "Essential plan",
-    benefits: "Leverage vulnerability scanning",
-    buttonText: "Start a 21-day free trial",
-    description: `For teams that want to discover risk exposure quickly
-        through our scanning tool.`,
-    priceAuthor: "$499",
-    priceGroup: "$1,579"
-  }
-}, j = ({
-  description: t,
-  onClick: e,
-  plan: i
-}) => {
-  const {
-    title: p,
-    description: d,
-    benefits: l,
-    buttonText: c
-  } = $[i], x = t ?? d;
-  return /* @__PURE__ */ a(f, { className: i, children: [
-    /* @__PURE__ */ a(
-      m,
-      {
-        display: "flex",
-        flexDirection: "column",
-        gap: 0.25,
-        pt: i === "essential" ? 1.75 : 0,
-        children: [
-          i === "advanced" && /* @__PURE__ */ r(g, {}),
-          /* @__PURE__ */ r(
-            u,
-            {
-              color: n.palette.gray[900],
-              fontWeight: "semibold",
-              size: "sm",
-              sizeSm: "xs",
-              children: p
-            }
-          ),
-          /* @__PURE__ */ r(
-            o,
-            {
-              color: n.palette.gray[400],
-              fontWeight: "semibold",
-              pb: i === "essential" ? 1.25 : 0,
-              size: "sm",
-              sizeSm: "xs",
-              children: l
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ r(
-      o,
-      {
-        lineSpacing: 1.5,
-        lineSpacingSm: 1.25,
-        pb: i === "advanced" ? 1.5 : 0,
-        size: "md",
-        sizeSm: "sm",
-        children: x
-      }
-    ),
-    /* @__PURE__ */ r(b, { onClick: e, variant: "primary", children: c })
-  ] });
-};
+import "react/jsx-runtime";
+import { bo as m } from "../../components-C7JPRIEW.mjs";
 export {
-  j as PlanCard
+  m as PlanCard
 };

package/dist/components/plan-card/recommended-tag/index.js

@@ -1,31 +1,5 @@
-import { jsx as e } from "react/jsx-runtime";
-import { theme as t } from "../../colors/index.js";
-import { Container as r } from "../../container/index.js";
-import "../../typography/heading/index.js";
-import "../../typography/span/index.js";
-import { Text as i } from "../../typography/text/index.js";
-const s = () => /* @__PURE__ */ e(
-  r,
-  {
-    alignItems: "center",
-    bgColor: t.palette.primary[25],
-    borderRadius: "8px",
-    gap: 0.5,
-    justify: "center",
-    padding: [0.125, 0.25, 0.125, 0.25],
-    width: "max-content",
-    children: /* @__PURE__ */ e(
-      i,
-      {
-        bgGradient: t.palette.gradients["01"],
-        fontWeight: "semibold",
-        size: "xs",
-        textFill: "transparent",
-        children: "Recommended"
-      }
-    )
-  }
-);
+import "react/jsx-runtime";
+import { bn as r } from "../../../components-C7JPRIEW.mjs";
 export {
-  s as RecommendedTag
+  r as RecommendedTag
 };

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

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

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

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

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

@@ -1,85 +1,6 @@
-import { jsx as n, jsxs as c } from "react/jsx-runtime";
-import { styled as a, useTheme as p } from "styled-components";
-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 d } from "../typography/text/index.js";
-const m = a.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]};
-    }
-  `}
-`, b = ({
-  margin: i,
-  onClick: r,
-  text: l
-}) => {
-  const s = p(), t = /* @__PURE__ */ c(m, { children: [
-    /* @__PURE__ */ n(e, { icon: "circle", iconClass: "ellipse-1", iconSize: "xs" }),
-    /* @__PURE__ */ n(e, { icon: "circle", iconClass: "ellipse-2", iconSize: "xs" }),
-    /* @__PURE__ */ n(e, { icon: "crown", iconClass: "icon", iconSize: "xs" })
-  ] });
-  return l !== void 0 ? /* @__PURE__ */ n(
-    o,
-    {
-      cursor: "pointer",
-      display: "inline-block",
-      mr: i,
-      onClick: r,
-      children: /* @__PURE__ */ c(
-        o,
-        {
-          alignItems: "center",
-          bgColor: s.palette.warning[50],
-          borderRadius: "4px",
-          display: "flex",
-          padding: [0.25, 0.25, 0.25, 0.25],
-          width: "fit-content",
-          children: [
-            t,
-            /* @__PURE__ */ n(
-              d,
-              {
-                color: s.palette.warning[500],
-                display: "inline",
-                ml: 0.25,
-                size: "xs",
-                children: l
-              }
-            )
-          ]
-        }
-      )
-    }
-  ) : /* @__PURE__ */ n(o, { display: "inline-block", mr: i, onClick: r, children: t });
-};
+import "react/jsx-runtime";
+import "styled-components";
+import { ak as t } from "../../components-C7JPRIEW.mjs";
 export {
-  b as PremiumFeature
+  t as PremiumFeature
 };