@fluidattacks/design 3.1.11 → 3.1.13

package/dist/components/menu/index.js

@@ -1 +1,67 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("lodash"),r=require("styled-components"),s=require("../container/index.js"),t=require("../divider/index.js"),n=require("../link/index.js");require("react");const o=require("../../styles-BWVdbvFu.js");require("../icon/index.js");const l=require("../tag/index.js");require("../typography/heading/index.js"),require("../typography/span/index.js");const a=require("../typography/text/index.js"),c=require("../../use-click-outside-BqkLISED.js");exports.Menu=({children:d,commitSha:x,commitShortSha:u,parentElement:h,userInfo:j,setVisibility:p})=>{const m=r.useTheme(),{userName:g,email:y,phone:q,userRole:f}=j;return c.useClickOutside(h,(()=>{p(!1)})),e.jsxs(o.ListItemsWrapper,{children:[e.jsx("li",{className:"user-info",children:e.jsxs(s.Container,{display:"inline-flex",gap:.25,width:"100%",children:[e.jsxs(s.Container,{display:"flex",flexDirection:"column",gap:.25,width:"100%",children:[e.jsx(a.Text,{color:m.palette.gray[800],fontWeight:"bold",size:"sm",children:g}),e.jsx(a.Text,{color:m.palette.gray[400],size:"sm",children:y}),i.isUndefined(q)?void 0:e.jsx(a.Text,{color:m.palette.gray[400],size:"sm",children:q})]}),e.jsx(s.Container,{children:e.jsx(l.Tag,{tagLabel:f,variant:"role"})})]})}),e.jsx(t.Divider,{}),d,e.jsx(t.Divider,{}),e.jsx("li",{className:"commit-info",children:e.jsx(n.Link,{href:`https://gitlab.com/fluidattacks/universe/-/tree/${x}`,iconPosition:"hidden",children:e.jsx(a.Text,{color:m.palette.gray[400],size:"xs",children:`commit : ${u}`})})})]})};
+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";
+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
+};

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

@@ -1,4 +1,13 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),r=require("styled-components"),n=require("../colors/index.js"),i=require("../container/index.js"),o=require("../icon/index.js");require("../typography/heading/index.js"),require("../typography/span/index.js");const s=require("../typography/text/index.js"),a=r.styled.button`
+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;
@@ -9,10 +18,84 @@
   padding: 0;
 
   &:hover p {
-    color: ${n.theme.palette.primary[200]};
+    color: ${c.palette.primary[200]};
   }
 
   &:hover span {
-    color: ${n.theme.palette.primary[200]};
+    color: ${c.palette.primary[200]};
   }
-`;exports.MessageBanner=({message:n,onClickButton:l,buttonText:c,buttonFontWeight:p="regular",icon:d,onClose:u,variant:x="web"})=>{const m=r.useTheme(),[g,h]=t.useState(!0),y=t.useCallback((()=>{h(!1),null==u||u()}),[u]),j=(e=>"platform"===e?{normal:"sm",small:void 0}:{normal:"md",small:"sm"})(x);return e.jsxs(i.Container,{alignItems:"center",bgGradient:m.palette.gradients["01"],display:g?"flex":"none",id:"message-banner",justify:"space-between",padding:[.75,.75,.75,.75],children:[e.jsxs(i.Container,{display:"flex",gap:.5,justify:"center",width:"100%",children:[e.jsx(i.Container,{children:"string"==typeof n?e.jsx(s.Text,{color:m.palette.white,display:"inline",size:j.normal,sizeSm:j.small,children:n}):n}),l?e.jsxs(a,{onClick:l,children:[e.jsx(s.Text,{color:m.palette.white,fontWeight:p,size:j.normal,sizeSm:j.small,textDecoration:"underline",children:c}),e.jsx(o.Icon,{icon:d??"arrow-right",iconColor:m.palette.white,iconSize:"xs",iconType:"bold"===p?"fa-regular":"fa-light"})]}):void 0]}),e.jsx(o.Icon,{clickable:!0,hoverColor:m.palette.primary[200],icon:"close",iconColor:m.palette.white,iconSize:"xs",iconType:"fa-light",onClick:y})]})};
+`, 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
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  M as MessageBanner
+};

package/dist/components/modal/index.js

@@ -1 +1,65 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("lodash"),i=require("react-dom"),t=require("./modal-confirm/index.js"),o=require("./modal-footer/index.js"),a=require("./modal-header/index.js"),n=require("../../styles-CdD9waPD.js"),d=require("../../index-TKLFHcRp.js");require("../typography/heading/index.js"),require("../typography/span/index.js");const s=require("../typography/text/index.js");exports.ModalConfirm=t.ModalConfirm,exports.Modal=({_portal:t=!0,cancelButton:l,children:m,confirmButton:c,content:u,description:p="",modalRef:x,otherActions:j,onClose:g,title:h="",size:y,id:f="modal-container"})=>{const q=()=>e.jsx(n.ModalWrapper,{"aria-label":x.name,"aria-modal":"true",id:"modal-wrapper",children:e.jsxs(n.ModalContainer,{$size:y,"data-testid":f,id:f,children:[!r.isEmpty(h)&&e.jsx(a.ModalHeader,{description:p,modalRef:x,onClose:g,otherActions:j,title:h}),m,r.isObject(u)&&r.isString(u.imageSrc)&&e.jsx(n.ImageContainer,{$framed:u.imageFramed,children:e.jsx(d.MemoizedImage,{alt:"modal-img",publicId:u.imageSrc})}),r.isObject(u)&&r.isString(u.imageText)&&e.jsx(s.Text,{mb:1.5,size:"sm",children:u.imageText}),e.jsx(o.ModalFooter,{cancelButton:l,confirmButton:c,modalRef:x})]})});return t&&x.isOpen?i.createPortal(q(),document.getElementById("portals")??document.body):x.isOpen?q():null};
+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;
+};
+export {
+  P as Modal,
+  k as ModalConfirm
+};

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

@@ -1 +1,51 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),i=require("../../button/index.js"),e=require("../../container/index.js");exports.ModalConfirm=({disabled:n,id:r="modal-confirm",onCancel:o,onConfirm:a="submit",txtCancel:d,txtConfirm:s})=>{const c="submit"===a;return t.jsxs(e.Container,{display:"flex",gap:.75,maxWidth:o?"392px":"190px",mt:1.5,children:[o?t.jsx(i.Button,{id:`${r}-cancel`,justify:"center",onClick:o,variant:"tertiary",width:"100%",children:d??"Cancel"}):void 0,t.jsx(i.Button,{disabled:n,id:r,justify:"center",onClick:c?void 0:a,type:c?"submit":"button",variant:"primary",width:"100%",children:s??"Confirm"})]})};
+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"
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  l as ModalConfirm
+};

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

@@ -1 +1,25 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("lodash"),r=require("react"),i=require("../../../styles-CdD9waPD.js"),l=require("../../button/index.js");exports.ModalFooter=({modalRef:n,confirmButton:o,cancelButton:s})=>{const{close:c}=n,u=r.useCallback((()=>{null==s||s.onClick(),c()}),[s,c]),a=r.useCallback((()=>{null==o||o.onClick(),c()}),[o,c]);return[o,s].some((e=>!t.isEmpty(e)))?e.jsx(i.Footer,{children:e.jsxs("div",{children:[s&&e.jsx(l.Button,{onClick:u,variant:"tertiary",width:"100%",children:s.text}),o&&e.jsx(l.Button,{onClick:a,variant:"primary",width:"100%",children:o.text})]})}):null};
+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;
+};
+export {
+  j as ModalFooter
+};

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

@@ -1 +1,51 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("lodash"),t=require("react"),r=require("styled-components"),s=require("../../../styles-CdD9waPD.js"),n=require("../../icon-button/index.js"),o=require("../../typography/heading/index.js");require("../../typography/span/index.js");const l=require("../../typography/text/index.js");exports.ModalHeader=({title:c,description:d,modalRef:a,otherActions:u,onClose:p})=>{const x=r.useTheme(),y=t.useCallback((()=>{null==p||p(),a.close()}),[a,p]);return t.useEffect((()=>{const e=e=>{"Escape"===e.key&&y()};return window.addEventListener("keydown",e),()=>{window.removeEventListener("keydown",e)}}),[y]),e.jsxs(s.Header,{children:[e.jsxs(s.Title,{children:["string"==typeof c?e.jsx(o.Heading,{fontWeight:"bold",lineSpacing:1.75,mr:1,size:"sm",children:c}):c,e.jsxs("div",{className:"flex",children:[u,e.jsx(n.IconButton,{icon:"close",iconColor:x.palette.gray[300],iconSize:"xs",iconType:"fa-light",id:"modal-close",onClick:y,variant:"ghost"})]})]}),d&&i.isString(d)&&!i.isEmpty(d)?e.jsx(l.Text,{mt:.5,size:"sm",children:d}):d]})};
+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
+  ] });
+};
+export {
+  B as ModalHeader
+};

package/dist/components/notification/index.js

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

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

@@ -1,10 +1,47 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),n=require("styled-components"),r=require("../../styles-C2CoGJl7.js"),i=n.styled(r.BaseComponent)`
-  ${({theme:e,$variant:t})=>`\n    align-items: center;\n    background: ${"error"===t?e.palette.primary[400]:e.palette.warning[500]};\n    border-radius: 100%;\n    font-family: ${e.typography.type.primary};\n    justify-content: center;\n    padding: 0;\n    position: absolute;\n    z-index: 11;\n    width: ${e.spacing[.5]};\n    height: ${e.spacing[.5]};\n  `}
-`,a=n.styled.div`
+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:e})=>e.palette.white};
+  color: ${({ theme: t }) => t.palette.white};
   display: flex;
   font-size: 6px;
-  font-weight: ${({theme:e})=>e.typography.weight.bold};
+  font-weight: ${({ theme: t }) => t.typography.weight.bold};
   justify-content: center;
-`,o=t.forwardRef((function({numberIndicator:t,show:n,variant:r="error",...o},s){return e.jsx(i,{$variant:r,className:n?"flex":"hidden","data-testid":"notification-sign",ref:s,...o,children:t&&e.jsx(a,{children:t<=9?t:9})})}));exports.NotificationSign=o;
+`, $ = 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 {
+  $ as NotificationSign
+};

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

@@ -1,17 +1,22 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("lodash"),r=require("react"),a=require("styled-components"),n=require("../../index-CmylnDrF.js"),o=a.styled.div`
+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: ${({ 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};
+  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;
-`,i=a.styled.input`
+`, F = f.input`
   width: 4em;
   appearance: textfield;
   border-style: none;
@@ -31,4 +36,54 @@
   &::-webkit-inner-spin-button {
     opacity: 1;
   }
-`,u=r.forwardRef((function({autoUpdate:a=!1,decimalPlaces:u=0,defaultValue:l=0,max:d,min:p,name:s,onEnter:m,tooltipMessage:b,...c},g){const x=u<0?0:u,[y,h]=r.useState(Number(l).toFixed(x)),f=r.useCallback((e=>{const r=t.toNumber(e.target.value);e.target.value.endsWith(".")?h(e.target.value):r>=Number(p)&&r<=Number(d)&&(h(String(r)),a&&m(t.toNumber(r.toFixed(x)))),e.stopPropagation()}),[a,x,d,p,m]),v=r.useCallback((e=>{e.currentTarget.contains(e.relatedTarget)||h(Number(l).toFixed(x)),e.stopPropagation()}),[x,l]),N=r.useCallback((e=>{e.stopPropagation(),"Enter"!==e.key||t.isEmpty(e.currentTarget.value)||m(t.toNumber(e.currentTarget.value))}),[m]);return e.jsx(o,{onBlur:v,tabIndex:-1,children:e.jsx(n.Tooltip,{id:"numberInputTooltip",tip:b,children:e.jsx(i,{...c,"aria-label":s,"aria-valuemax":Number(d),"aria-valuemin":Number(p),"aria-valuenow":Number(y),max:d,min:p,name:s,onChange:f,onKeyUp:N,ref:g,step:10**-x,type:"number",value:y})})})}));exports.NumberInput=u;
+`, 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 {
+  K as NumberInput
+};