@fluidattacks/design 3.1.11 → 3.1.13

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

@@ -1 +1,100 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),n=require("styled-components"),t=require("./option-container/index.js"),r=require("../button/index.js"),o=require("../container/index.js"),l=require("../../use-click-outside-BqkLISED.js");exports.OptionContainer=t.OptionContainer,exports.OAuthSelector=({align:s="end",buttonLabel:a="Add Credential",children:u,id:d,manualOption:c,providers:p})=>{const x=n.useTheme(),[b,C]=i.useState(!1),m=i.useRef(null);l.useClickOutside(m.current,(()=>{C(!1)}),!0);const j=i.useCallback((e=>{null==c||c.onClick(e),C(!1)}),[c]),h=i.useCallback((()=>{C((e=>!e))}),[C]),k=i.useCallback((e=>i=>{var n;null==(n=p[e])||n.onClick(i),C(!1)}),[p]);return e.jsxs(o.Container,{alignItems:s,display:"flex",flexDirection:"column",position:"relative",ref:m,width:"max-content",zIndex:10,children:[e.jsx(r.Button,{icon:"plus",onClick:h,variant:"primary",children:a}),e.jsxs(o.Container,{alignItems:"center",bgColor:"#fff",border:`1px solid ${x.palette.gray[200]}`,borderRadius:"4px",display:"flex",gap:.5,height:"78px",id:d,pb:.5,pl:.75,position:"absolute",pr:.75,pt:.5,shadow:"md",top:"40px",visibility:b?"visible":"hidden",zIndex:10,children:[Object.keys(p).map((i=>e.jsx(t.OptionContainer,{onClick:k(i),provider:i},i))),void 0===c?void 0:e.jsx(t.OptionContainer,{icon:"square-plus",label:c.label??"Add manually",onClick:j}),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 {
+  O as OAuthSelector,
+  d as OptionContainer
+};

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

@@ -1 +1,76 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("styled-components"),i=require("../../../index-TKLFHcRp.js"),n=require("../../container/index.js"),r=require("../../icon/index.js");require("../../typography/heading/index.js"),require("../../typography/span/index.js");const o=require("../../typography/text/index.js"),a={Azure:"integrates/autoenrollment/azureIcon",Bitbucket:"integrates/autoenrollment/bitbucketLogo",GitHub:"integrates/autoenrollment/githubLogo",GitLab:"integrates/autoenrollment/gitlabIcon"};exports.OptionContainer=({icon:l,label:s,onClick:c,onlyLabel:p=!1,provider:u="GitLab"})=>{const d=t.useTheme();return e.jsxs(n.Container,{alignItems:"center",bgColorHover:d.palette.gray[100],borderRadius:"4px",cursor:"pointer",display:"flex",flexDirection:"column",gap:.25,height:"62px",justify:"center",minWidth:"64px",onClick:c,pb:.5,pl:.25,pr:.25,pt:.5,children:[!p&&e.jsx(n.Container,{height:"24px",width:"24px",children:void 0===l?e.jsx(i.MemoizedImage,{alt:`${u} Logo`,height:"100%",publicId:a[u],width:"100%"}):e.jsx(r.Icon,{icon:l,iconColor:"#000",iconSize:"sm",iconType:"fa-light"})}),e.jsx(n.Container,{alignItems:"center",display:"flex",minWidth:"24px",children:e.jsx(o.Text,{color:d.palette.gray[800],display:"inline",size:"xs",textAlign:"center",whiteSpace:p?"break-spaces":"nowrap",wordWrap:"unset",children:s??u})})]})};
+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
+          }
+        ) })
+      ]
+    }
+  );
+};
+export {
+  z as OptionContainer
+};

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

@@ -1,5 +1,155 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("./recommended-tag/index.js"),t=require("styled-components"),i=require("../button/index.js"),a=require("../colors/index.js"),r=require("../container/index.js"),s=require("../typography/heading/index.js");require("../typography/span/index.js");const o=require("../typography/text/index.js"),d=t.styled.div`
-  ${({className:e,theme:n})=>`\n    align-items: flex-start;\n    border-radius: ${n.spacing[1]};\n    background: ${n.palette.white};\n    display: flex;\n    flex-direction: column;\n    gap: ${n.spacing[1]};\n    padding: ${n.spacing[1.5]};\n    position: relative;\n    width: 320px;\n\n    button {\n      text-align: center;\n      width: 100%;\n    }\n\n    ${"essential"===e?`border: 2px solid ${n.palette.gray[300]};`:`\n          box-shadow: 0px 9px 18px 0px rgba(243, 38, 55, 0.06),\n            0px 18px 27px 0px rgba(243, 38, 55, 0.10);\n\n          &::before {\n            background: ${n.palette.gradients["01"]} border-box;\n            border-radius: ${n.spacing[1]};\n            content: "";\n            position: absolute;\n            inset: 0;\n            border: 2px solid transparent;\n            mask:\n              linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);\n            mask-composite: exclude;\n          }\n        `}\n  `}
-`;t.styled.div`
-  ${({className:e,theme:n})=>`\n    align-items: flex-start;\n    border-radius: ${n.spacing[1]};\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    gap: ${n.spacing[1.5]};\n    padding: ${n.spacing[1.5]};\n    width: 466px;\n\n    button {\n      text-align: center;\n      width: 100%;\n    }\n\n    ${"essential"===e?`\n          background: linear-gradient(\n            180deg,\n            ${n.palette.primary[400]} 0%,\n            ${n.palette.black} 100%\n          );`:`\n          background: ${n.palette.white};\n          box-shadow: 0px 9px 18px 0px rgba(243, 38, 55, 0.06),\n            0px 18px 27px 0px rgba(243, 38, 55, 0.10);\n        `}\n\n    @media screen and (max-width: ${n.breakpoints.mobile}) {\n      width: 320px;\n    }\n  `}
-`;const p={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\n        through our scanning tool.",priceAuthor:"$499",priceGroup:"$1,579"}};exports.PlanCard=({description:t,onClick:l,plan:c})=>{const{title:x,description:g,benefits:u,buttonText:b}=p[c],m=t??g;return e.jsxs(d,{className:c,children:[e.jsxs(r.Container,{display:"flex",flexDirection:"column",gap:.25,pt:"essential"===c?1.75:0,children:["advanced"===c&&e.jsx(n.RecommendedTag,{}),e.jsx(s.Heading,{color:a.theme.palette.gray[900],fontWeight:"semibold",size:"sm",sizeSm:"xs",children:x}),e.jsx(o.Text,{color:a.theme.palette.gray[400],fontWeight:"semibold",pb:"essential"===c?1.25:0,size:"sm",sizeSm:"xs",children:u})]}),e.jsx(o.Text,{lineSpacing:1.5,lineSpacingSm:1.25,pb:"advanced"===c?1.5:0,size:"md",sizeSm:"sm",children:m}),e.jsx(i.Button,{onClick:l,variant:"primary",children:b})]})};
+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 })
+  ] });
+};
+export {
+  j as PlanCard
+};

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

@@ -1 +1,31 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../colors/index.js"),r=require("../../container/index.js");require("../../typography/heading/index.js"),require("../../typography/span/index.js");const i=require("../../typography/text/index.js");exports.RecommendedTag=()=>e.jsx(r.Container,{alignItems:"center",bgColor:t.theme.palette.primary[25],borderRadius:"8px",gap:.5,justify:"center",padding:[.125,.25,.125,.25],width:"max-content",children:e.jsx(i.Text,{bgGradient:t.theme.palette.gradients["01"],fontWeight:"semibold",size:"xs",textFill:"transparent",children:"Recommended"})});
+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"
+      }
+    )
+  }
+);
+export {
+  s as RecommendedTag
+};

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

@@ -1 +1,51 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),n=require("styled-components");require("../../typography/heading/index.js");const t=require("../../typography/span/index.js"),r=require("../../typography/text/index.js");exports.Description=({description:l="",highlightDescription:s=""})=>{const p=n.useTheme(),o="string"==typeof s,g=o?"":new RegExp(`(${s.join("|")})`,"u");return s.length>0?e.jsx(r.Text,{display:"inline",lineSpacing:1.5,size:"lg",textAlign:"center",children:o?e.jsxs(i.Fragment,{children:[e.jsx(t.Span,{color:p.palette.gray[600],display:"inline",fontWeight:"bold",lineSpacing:1.5,size:"lg",children:s}),l]}):l.split(g).map(((i,n)=>s.includes(i)?e.jsx(t.Span,{color:p.palette.gray[600],display:"inline",fontWeight:"bold",lineSpacing:1.5,size:"lg",children:i},`${n+1}-bold`):i))}):e.jsx(r.Text,{lineSpacing:1.5,size:"lg",textAlign:"center",children:l})};
+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 });
+};
+export {
+  z as Description
+};

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

@@ -1 +1,152 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("lodash"),t=require("react"),r=require("react-dom"),n=require("styled-components"),l=require("./description/index.js"),o=require("../button/index.js"),a=require("../../index-TKLFHcRp.js"),d=require("../container/index.js"),s=require("../typography/heading/index.js");require("../typography/span/index.js"),require("../typography/text/index.js"),exports.PopUp=({_portal:c=!1,cancelButton:x,darkBackground:h=!1,children:u,confirmButton:p,container:g,description:j,highlightDescription:m="",image:y,maxWidth:b,title:C,titleColor:f})=>{const v=n.useTheme(),{alt:q,src:k,width:w="77px",height:I="77px"}=y,D=t.useCallback((()=>{null==x||x.onClick()}),[x]),B=t.useCallback((()=>{null==p||p.onClick()}),[p]),z=e.jsx(d.Container,{alignItems:"center","aria-label":C,"aria-modal":"true",bgColor:h?"rgba(52, 64, 84, 70%)":"",display:"flex",height:"100vh",justify:"center",left:"0",position:c?"fixed":"absolute",top:"0px",width:"100%",zIndex:99999,children:e.jsxs(d.Container,{bgColor:v.palette.white,border:`1px solid ${v.palette.gray[200]}`,borderRadius:"8px",display:"inline-flex",flexDirection:"column",maxWidth:b,pb:2.5,pl:2.5,pr:2.5,pt:2.5,shadow:"lg",width:"100%",zIndex:11,children:[e.jsxs(d.Container,{alignItems:"center",display:"flex",flexDirection:"column",width:"100%",children:[e.jsx(d.Container,{children:e.jsx(a.MemoizedImage,{alt:q,height:I,publicId:k,width:w})}),e.jsxs(d.Container,{display:"flex",flexDirection:"column",gap:.5,mb:1.5,mt:1.5,children:[e.jsx(s.Heading,{color:f,fontWeight:"bold",lineSpacing:2.5,size:"lg",textAlign:"center",children:C}),e.jsx(l.Description,{description:j,highlightDescription:m})]})]}),u&&e.jsx(d.Container,{mb:1,scroll:"y",children:e.jsx(d.Container,{height:"100%",children:u})}),e.jsxs(d.Container,{alignItems:"flex-start",display:"flex",gap:1,justify:"center",children:[i.isObject(p)?e.jsx(o.Button,{onClick:B,variant:(null==p?void 0:p.variant)??"primary",children:null==p?void 0:p.text},null==p?void 0:p.key):void 0,i.isObject(x)?e.jsx(o.Button,{onClick:D,variant:(null==x?void 0:x.variant)??"tertiary",children:null==x?void 0:x.text},null==x?void 0:x.key):void 0]})]})});return c?r.createPortal(z,g??document.body):z};
+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;
+};
+export {
+  Q as PopUp
+};