@fluidattacks/design 3.1.11 → 3.1.13

package/dist/components/slide-out-menu/menu-item/index.js

@@ -1 +1,67 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("styled-components"),i=require("../../container/index.js"),t=require("../../icon/index.js"),n=require("../../premium-feature/index.js");require("../../typography/heading/index.js"),require("../../typography/span/index.js");const o=require("../../typography/text/index.js");exports.MenuItem=({customBadge:s,description:a,icon:l,onClick:p,requiresUpgrade:c=!1,title:x})=>{const d=r.useTheme();return e.jsxs(i.Container,{bgColor:d.palette.white,bgColorHover:d.palette.gray[100],cursor:"pointer",display:"flex",gap:.5,onClick:p,px:1.25,py:1,width:"100%",children:[e.jsx(i.Container,{alignItems:"center",bgColor:d.palette.gray[300],borderRadius:d.spacing[.25],display:"flex",height:"24px",justify:"center",width:"24px",children:e.jsx(t.Icon,{icon:l,iconColor:d.palette.gray[800],iconSize:"xxs",ml:.5,mr:.5})}),e.jsxs(i.Container,{children:[e.jsxs(i.Container,{alignItems:"center",display:"inline-flex",gap:.5,children:[e.jsx(o.Text,{color:d.palette.gray[800],size:"sm",children:x}),c?e.jsx(n.PremiumFeature,{text:"Upgrade"}):void 0,s]}),e.jsx(o.Text,{color:d.palette.gray[400],size:"xs",children:a})]})]})};
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import { useTheme as c } from "styled-components";
+import { Container as t } from "../../container/index.js";
+import { Icon as d } from "../../icon/index.js";
+import { PremiumFeature as g } from "../../premium-feature/index.js";
+import "../../typography/heading/index.js";
+import "../../typography/span/index.js";
+import { Text as o } from "../../typography/text/index.js";
+const j = ({
+  customBadge: l = void 0,
+  description: n,
+  icon: p,
+  onClick: a,
+  requiresUpgrade: m = !1,
+  title: s
+}) => {
+  const e = c();
+  return /* @__PURE__ */ i(
+    t,
+    {
+      bgColor: e.palette.white,
+      bgColorHover: e.palette.gray[100],
+      cursor: "pointer",
+      display: "flex",
+      gap: 0.5,
+      onClick: a,
+      px: 1.25,
+      py: 1,
+      width: "100%",
+      children: [
+        /* @__PURE__ */ r(
+          t,
+          {
+            alignItems: "center",
+            bgColor: e.palette.gray[300],
+            borderRadius: e.spacing[0.25],
+            display: "flex",
+            height: "24px",
+            justify: "center",
+            width: "24px",
+            children: /* @__PURE__ */ r(
+              d,
+              {
+                icon: p,
+                iconColor: e.palette.gray[800],
+                iconSize: "xxs",
+                ml: 0.5,
+                mr: 0.5
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ i(t, { children: [
+          /* @__PURE__ */ i(t, { alignItems: "center", display: "inline-flex", gap: 0.5, children: [
+            /* @__PURE__ */ r(o, { color: e.palette.gray[800], size: "sm", children: s }),
+            m ? /* @__PURE__ */ r(g, { text: "Upgrade" }) : void 0,
+            l
+          ] }),
+          /* @__PURE__ */ r(o, { color: e.palette.gray[400], size: "xs", children: n })
+        ] })
+      ]
+    }
+  );
+};
+export {
+  j as MenuItem
+};

package/dist/components/slider/index.js

@@ -1,7 +1,124 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("react"),t=require("react-aria"),r=require("react-stately"),a=require("styled-components"),i=require("./thumb/index.js"),s=require("../container/index.js");require("../typography/heading/index.js"),require("../typography/span/index.js");const l=require("../typography/text/index.js"),p=a.styled.div`
-  ${({theme:e,$min:n,$value:t})=>{return`\n    align-items: center;\n    align-self: stretch;\n    display: flex;\n    flex-direction: column;\n    justify-content: end;\n    gap: ${e.spacing[.75]};\n    width: 304px;\n\n    .track {\n      background: linear-gradient(\n        to right,\n        ${n>=0?`\n              ${e.palette.primary[500]} ${t}%,\n              ${e.palette.gray[200]} ${t}%\n            `:(r=e,a=t,a>=50?`\n      ${r.palette.gray[200]} 50%,\n      ${r.palette.primary[500]} 50.05%,\n      ${r.palette.primary[500]} ${a}%,\n      ${r.palette.gray[200]} ${a}%\n    `:`\n      ${r.palette.gray[200]} ${a}%,\n      ${r.palette.primary[500]} ${a}%,\n      ${r.palette.primary[500]} 50%,\n      ${r.palette.gray[200]} 50.05%,\n      ${r.palette.gray[200]} 100%\n    `)}\n      );\n      border-radius: ${e.spacing[.125]};\n      height: ${e.spacing[.25]};\n      width: 100%;\n    }\n\n    .track.disabled {\n      opacity: 0.4;\n    }\n\n    .thumb {\n      background: ${e.palette.white};\n      border-radius: ${e.spacing[1.25]};\n      box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.30);\n      top: 50%;\n      height: 20px;\n      width: 20px;\n    }\n\n    .thumb.dragging {\n      border: 1px solid ${e.palette.primary[500]};\n    }\n  `;var r,a}}
-`,d=a.styled.div`
-  ${({theme:e})=>`\n    align-items: center;\n    display: flex;\n    justify-content: space-between;\n    height: ${e.spacing[.625]};\n    width: 100%;\n\n    p {\n      color: ${e.palette.gray[400]};\n      font-family: ${e.typography.type.primary};\n      font-size: ${e.spacing[.5]};\n    }\n  `}
-`,g=a.styled.output`
-  ${({theme:e})=>`\n    align-items: flex-end;\n    border-radius: ${e.spacing[.5]};\n    border: 1px solid ${e.palette.gray[300]};\n    background: ${e.palette.white};\n    display: flex;\n    gap: ${e.spacing[.625]};\n    padding: ${e.spacing[.625]} ${e.spacing[.75]};\n    width: 59px;\n  `}
-`;exports.Slider=c=>{const o=a.useTheme(),u=n.useRef(null),{minValue:h=0,maxValue:$=100}=c,x=t.useNumberFormatter(),y=r.useSliderState({...c,numberFormatter:x}),m=(f=h,q=$,w=y.getThumbValue(0),Math.round((w-f)/(q-f)*100)),{groupProps:b,trackProps:j}=t.useSlider({...c,"aria-label":"slider"},y,u);var f,q,w;return e.jsxs(s.Container,{alignItems:"center",display:"inline-flex",gap:1.25,children:[e.jsxs(p,{...b,$min:h??0,$value:m,className:"slider",children:[e.jsx("div",{...j,className:"track "+(y.isDisabled?"disabled":""),ref:u,children:e.jsx(i.Thumb,{index:0,state:y,trackRef:u})}),e.jsxs(d,{children:[e.jsx("p",{children:`${x.format(h)} (Low)`}),h<0&&e.jsx("p",{children:"0"}),e.jsx("p",{children:`${x.format($)} (High)`})]})]}),e.jsx(g,{children:e.jsx(l.Text,{color:o.palette.gray[800],size:"sm",textAlign:"right",children:y.getThumbValueLabel(0)})})]})};
+import { jsxs as n, jsx as a } from "react/jsx-runtime";
+import { useRef as $ } from "react";
+import { useNumberFormatter as u, useSlider as y } from "react-aria";
+import { useSliderState as m } from "react-stately";
+import { styled as o, useTheme as f } from "styled-components";
+import { Thumb as b } from "./thumb/index.js";
+import { Container as x } from "../container/index.js";
+import "../typography/heading/index.js";
+import "../typography/span/index.js";
+import { Text as h } from "../typography/text/index.js";
+const w = (r, t) => t >= 50 ? `
+      ${r.palette.gray[200]} 50%,
+      ${r.palette.primary[500]} 50.05%,
+      ${r.palette.primary[500]} ${t}%,
+      ${r.palette.gray[200]} ${t}%
+    ` : `
+      ${r.palette.gray[200]} ${t}%,
+      ${r.palette.primary[500]} ${t}%,
+      ${r.palette.primary[500]} 50%,
+      ${r.palette.gray[200]} 50.05%,
+      ${r.palette.gray[200]} 100%
+    `, k = o.div`
+  ${({ theme: r, $min: t, $value: i }) => `
+    align-items: center;
+    align-self: stretch;
+    display: flex;
+    flex-direction: column;
+    justify-content: end;
+    gap: ${r.spacing[0.75]};
+    width: 304px;
+
+    .track {
+      background: linear-gradient(
+        to right,
+        ${t >= 0 ? `
+              ${r.palette.primary[500]} ${i}%,
+              ${r.palette.gray[200]} ${i}%
+            ` : w(r, i)}
+      );
+      border-radius: ${r.spacing[0.125]};
+      height: ${r.spacing[0.25]};
+      width: 100%;
+    }
+
+    .track.disabled {
+      opacity: 0.4;
+    }
+
+    .thumb {
+      background: ${r.palette.white};
+      border-radius: ${r.spacing[1.25]};
+      box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.30);
+      top: 50%;
+      height: 20px;
+      width: 20px;
+    }
+
+    .thumb.dragging {
+      border: 1px solid ${r.palette.primary[500]};
+    }
+  `}
+`, S = o.div`
+  ${({ theme: r }) => `
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    height: ${r.spacing[0.625]};
+    width: 100%;
+
+    p {
+      color: ${r.palette.gray[400]};
+      font-family: ${r.typography.type.primary};
+      font-size: ${r.spacing[0.5]};
+    }
+  `}
+`, V = o.output`
+  ${({ theme: r }) => `
+    align-items: flex-end;
+    border-radius: ${r.spacing[0.5]};
+    border: 1px solid ${r.palette.gray[300]};
+    background: ${r.palette.white};
+    display: flex;
+    gap: ${r.spacing[0.625]};
+    padding: ${r.spacing[0.625]} ${r.spacing[0.75]};
+    width: 59px;
+  `}
+`, T = (r, t, i) => Math.round((i - r) / (t - r) * 100), D = (r) => {
+  const t = f(), i = $(null), { minValue: p = 0, maxValue: s = 100 } = r, l = u(), e = m({ ...r, numberFormatter: l }), d = T(p, s, e.getThumbValue(0)), { groupProps: c, trackProps: g } = y(
+    { ...r, "aria-label": "slider" },
+    e,
+    i
+  );
+  return /* @__PURE__ */ n(x, { alignItems: "center", display: "inline-flex", gap: 1.25, children: [
+    /* @__PURE__ */ n(
+      k,
+      {
+        ...c,
+        $min: p ?? 0,
+        $value: d,
+        className: "slider",
+        children: [
+          /* @__PURE__ */ a(
+            "div",
+            {
+              ...g,
+              className: `track ${e.isDisabled ? "disabled" : ""}`,
+              ref: i,
+              children: /* @__PURE__ */ a(b, { index: 0, state: e, trackRef: i })
+            }
+          ),
+          /* @__PURE__ */ n(S, { children: [
+            /* @__PURE__ */ a("p", { children: `${l.format(p)} (Low)` }),
+            p < 0 && /* @__PURE__ */ a("p", { children: "0" }),
+            /* @__PURE__ */ a("p", { children: `${l.format(s)} (High)` })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ a(V, { children: /* @__PURE__ */ a(h, { color: t.palette.gray[800], size: "sm", textAlign: "right", children: e.getThumbValueLabel(0) }) })
+  ] });
+};
+export {
+  D as Slider
+};

package/dist/components/slider/thumb/index.js

@@ -1 +1,17 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),t=require("react-aria");exports.Thumb=({state:i,trackRef:s,index:u})=>{const n=r.useRef(null),{thumbProps:a,inputProps:c,isDragging:d}=t.useSliderThumb({index:u,trackRef:s,inputRef:n},i);return e.jsx("div",{...a,className:"thumb "+(d?"dragging":""),children:e.jsx(t.VisuallyHidden,{children:e.jsx("input",{ref:n,...c})})})};
+import { jsx as r } from "react/jsx-runtime";
+import { useRef as m } from "react";
+import { useSliderThumb as p, VisuallyHidden as l } from "react-aria";
+const g = ({
+  state: n,
+  trackRef: t,
+  index: e
+}) => {
+  const i = m(null), { thumbProps: o, inputProps: s, isDragging: u } = p(
+    { index: e, trackRef: t, inputRef: i },
+    n
+  );
+  return /* @__PURE__ */ r("div", { ...o, className: `thumb ${u ? "dragging" : ""}`, children: /* @__PURE__ */ r(l, { children: /* @__PURE__ */ r("input", { ref: i, ...s }) }) });
+};
+export {
+  g as Thumb
+};

package/dist/components/step-lapse/index.js

@@ -1,15 +1,159 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),e=require("react"),t=require("styled-components"),i=require("../../utils-C2whpEd3.js");require("../../styles-C2CoGJl7.js");const r=require("../button/index.js"),a=require("../container/index.js"),o=require("../icon/index.js"),l=require("../typography/heading/index.js");require("../typography/span/index.js"),require("../typography/text/index.js");const{getVariant:s}=i.variantBuilder((n=>({completed:`\n      background-color: ${n.palette.primary[500]};\n      color: ${n.palette.white};\n\n      &::after {\n        background-color: ${n.palette.primary[500]};\n      }\n    `,current:`\n      background-color: ${n.palette.primary[500]};\n      color: ${n.palette.white};\n\n      &::after {\n        background-color: ${n.palette.gray[200]};\n      }\n    `,disabled:`\n      background-color: ${n.palette.gray[200]};\n      outline: 1px solid ${n.palette.gray[400]};\n      outline-offset: -1px;\n      color: ${n.palette.gray[400]};\n\n      &::after {\n        background-color: ${n.palette.gray[200]};\n      }\n    `}))),c=t.styled.div`
-  ${({theme:n})=>`\n    align-items: stretch;\n    background-color: ${n.palette.white};\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    padding: ${n.spacing[1]} ${n.spacing[1]};\n    scroll-behavior: unset;\n  `}
-`,p=t.styled.div`
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useState as k, useCallback as S } from "react";
+import { styled as e } from "styled-components";
+import { v as w } from "../../utils-V0EumEPM.mjs";
+import "../../styles-CplEd2kw.mjs";
+import { Button as d } from "../button/index.js";
+import { Container as g } from "../container/index.js";
+import { Icon as C } from "../icon/index.js";
+import { Heading as z } from "../typography/heading/index.js";
+import "../typography/span/index.js";
+import "../typography/text/index.js";
+const { getVariant: B } = w(
+  (t) => ({
+    completed: `
+      background-color: ${t.palette.primary[500]};
+      color: ${t.palette.white};
+
+      &::after {
+        background-color: ${t.palette.primary[500]};
+      }
+    `,
+    current: `
+      background-color: ${t.palette.primary[500]};
+      color: ${t.palette.white};
+
+      &::after {
+        background-color: ${t.palette.gray[200]};
+      }
+    `,
+    disabled: `
+      background-color: ${t.palette.gray[200]};
+      outline: 1px solid ${t.palette.gray[400]};
+      outline-offset: -1px;
+      color: ${t.palette.gray[400]};
+
+      &::after {
+        background-color: ${t.palette.gray[200]};
+      }
+    `
+  })
+), N = e.div`
+  ${({ theme: t }) => `
+    align-items: stretch;
+    background-color: ${t.palette.white};
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding: ${`${t.spacing[1]} ${t.spacing[1]}`};
+    scroll-behavior: unset;
+  `}
+`, j = e.div`
   display: flex;
   flex-direction: row;
-  margin-bottom: ${({theme:n})=>n.spacing[2]};
+  margin-bottom: ${({ theme: t }) => t.spacing[2]};
 
   &:last-child > div:first-child > span::after {
     display: none;
   }
-`,d=t.styled.div`
-  ${({theme:n})=>`\n    display: inline-flex;\n    font-family: ${n.typography.type.primary};\n    font-size: ${n.typography.text.sm};\n    line-height: ${n.spacing[1.25]};\n    margin-top: ${n.spacing[1]};\n\n    & > button:first-child {\n      margin-right: ${n.spacing[.5]};\n    }\n  `}
-`,g=t.styled.span`
-  ${({theme:n,$variant:e})=>`\n    border-radius: 6px;\n    display: inline-block;\n    text-align: center;\n    font-size: ${n.typography.text.sm};\n    font-weight: ${n.typography.weight.bold};\n    font-family: ${n.typography.type.primary};\n    line-height: ${n.spacing[1]};\n    padding: ${n.spacing[.5]} ${n.spacing[.5]};\n    height: ${n.spacing[2]};\n    width: ${n.spacing[2]};\n\n    &::after {\n      content: "";\n      position: absolute;\n      top: calc(32px + ${n.spacing[.5]});\n      left: 50%;\n      bottom: 0;\n      width: 2px;\n      height: calc(100% - ${n.spacing[1]});\n    }\n\n    ${s(n,e)}\n  `}
-`;exports.StepLapse=({button:{disabled:t=!1,text:i,type:s="button",onClick:h},steps:y})=>{const[u,x]=e.useState(1),$=e.useCallback(((n,e)=>()=>{x((e=>e+n)),null==e||e()}),[]);return n.jsx(c,{children:y.map(((e,c)=>{const{content:x,title:m,nextAction:b,previousAction:f}=e,j=c+1,v=j<u?"completed":j===u?"current":"disabled";return n.jsxs(p,{children:[n.jsx(a.Container,{maxWidth:"40px",position:"relative",children:n.jsx(g,{$variant:v,children:"completed"===v?n.jsx(o.Icon,{icon:"check",iconSize:"xs",iconType:"fa-solid"}):j})}),n.jsxs(a.Container,{ml:1.5,width:"100%",children:[n.jsx(l.Heading,{fontWeight:"bold",lineSpacing:1.25,mb:1.5,size:"xs",children:m}),"current"===v&&n.jsxs(a.Container,{children:[x,n.jsxs(d,{children:[u>1&&n.jsx(r.Button,{disabled:e.isDisabledPrevious??!1,onClick:$(-1,f),variant:"tertiary",children:"Previous"}),u<y.length?n.jsx(r.Button,{disabled:e.isDisabledNext??!1,onClick:$(1,b),variant:"primary",children:"Next step"}):n.jsx(r.Button,{disabled:t,onClick:h,type:s,variant:"primary",children:i})]})]})]})]},e.title)}))})};
+`, A = e.div`
+  ${({ theme: t }) => `
+    display: inline-flex;
+    font-family: ${t.typography.type.primary};
+    font-size: ${t.typography.text.sm};
+    line-height: ${t.spacing[1.25]};
+    margin-top: ${t.spacing[1]};
+
+    & > button:first-child {
+      margin-right: ${t.spacing[0.5]};
+    }
+  `}
+`, D = e.span`
+  ${({ theme: t, $variant: l }) => `
+    border-radius: 6px;
+    display: inline-block;
+    text-align: center;
+    font-size: ${t.typography.text.sm};
+    font-weight: ${t.typography.weight.bold};
+    font-family: ${t.typography.type.primary};
+    line-height: ${t.spacing[1]};
+    padding: ${`${t.spacing[0.5]} ${t.spacing[0.5]}`};
+    height: ${t.spacing[2]};
+    width: ${t.spacing[2]};
+
+    &::after {
+      content: "";
+      position: absolute;
+      top: calc(32px + ${t.spacing[0.5]});
+      left: 50%;
+      bottom: 0;
+      width: 2px;
+      height: calc(100% - ${t.spacing[1]});
+    }
+
+    ${B(t, l)}
+  `}
+`, J = ({
+  button: { disabled: t = !1, text: l, type: f = "button", onClick: u },
+  steps: y
+}) => {
+  const [n, b] = k(1), $ = S(
+    (r, o) => () => {
+      b((p) => p + r), o == null || o();
+    },
+    []
+  );
+  return /* @__PURE__ */ i(N, { children: y.map((r, o) => {
+    const { content: p, title: x, nextAction: h, previousAction: m } = r, c = o + 1, v = c === n ? "current" : "disabled", s = c < n ? "completed" : v;
+    return /* @__PURE__ */ a(j, { children: [
+      /* @__PURE__ */ i(g, { maxWidth: "40px", position: "relative", children: /* @__PURE__ */ i(D, { $variant: s, children: s === "completed" ? /* @__PURE__ */ i(C, { icon: "check", iconSize: "xs", iconType: "fa-solid" }) : c }) }),
+      /* @__PURE__ */ a(g, { ml: 1.5, width: "100%", children: [
+        /* @__PURE__ */ i(
+          z,
+          {
+            fontWeight: "bold",
+            lineSpacing: 1.25,
+            mb: 1.5,
+            size: "xs",
+            children: x
+          }
+        ),
+        s === "current" && /* @__PURE__ */ a(g, { children: [
+          p,
+          /* @__PURE__ */ a(A, { children: [
+            n > 1 && /* @__PURE__ */ i(
+              d,
+              {
+                disabled: r.isDisabledPrevious ?? !1,
+                onClick: $(-1, m),
+                variant: "tertiary",
+                children: "Previous"
+              }
+            ),
+            n < y.length ? /* @__PURE__ */ i(
+              d,
+              {
+                disabled: r.isDisabledNext ?? !1,
+                onClick: $(1, h),
+                variant: "primary",
+                children: "Next step"
+              }
+            ) : /* @__PURE__ */ i(
+              d,
+              {
+                disabled: t,
+                onClick: u,
+                type: f,
+                variant: "primary",
+                children: l
+              }
+            )
+          ] })
+        ] })
+      ] })
+    ] }, r.title);
+  }) });
+};
+export {
+  J as StepLapse
+};

package/dist/components/table-button/index.js

@@ -1,3 +1,97 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("styled-components"),t=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"),i=n.styled.button`
-  ${({theme:e})=>`\n    align-items: center;\n    background-color: ${e.palette.white};\n    border: 1px solid ${e.palette.gray[100]};\n    border-radius: ${e.spacing[.25]};\n    color: ${e.palette.gray[800]};\n    cursor: pointer;\n    display: flex;\n    font-size: ${e.typography.text.sm};\n    gap: ${e.spacing[.25]};\n    height: 21px;\n    width: 21px;\n    justify-content: center;\n    padding: 6px;\n    transition: all 0.25s ease;\n\n    &[aria-label] {\n      height: auto;\n      width: auto;\n    }\n\n    &.success {\n      border-color: ${e.palette.success[500]};\n      color: ${e.palette.success[500]};\n\n      &:hover {\n        background-color: ${e.palette.success[200]};\n      }\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      background: ${e.palette.gray[200]};\n      border-color: ${e.palette.gray[200]};\n      color: ${e.palette.gray[300]};\n    }\n\n    &:hover:not(.success) {\n      background-color: ${e.palette.gray[100]};\n    }\n  `}
-`,a={add:{icon:"plus"},approve:{icon:"check"},disabled:{icon:"ban"},reject:{icon:"xmark"},submit:{icon:"arrow-right"},success:{icon:"check"}};exports.TableButton=({disabled:s=!1,icon:c,id:l,label:d,name:p,onClick:u,type:g="button",variant:x})=>{const y=n.useTheme(),b=e.jsxs(i,{"aria-label":p??void 0,className:x,disabled:s,id:l,onClick:u,type:g,children:[e.jsx(r.Icon,{clickable:!1,icon:c??a[x].icon,iconSize:void 0===p?"xxs":"xs",iconType:"fa-light"}),p??void 0]});return e.jsxs(t.Container,{alignItems:"center",display:"flex",children:[b,d&&e.jsx(o.Text,{color:y.palette.gray[800],ml:.5,size:"sm",children:d})]})};
+import { jsxs as c, jsx as s } from "react/jsx-runtime";
+import { styled as u, useTheme as g } from "styled-components";
+import { Container as b } from "../container/index.js";
+import { Icon as y } from "../icon/index.js";
+import "../typography/heading/index.js";
+import "../typography/span/index.js";
+import { Text as f } from "../typography/text/index.js";
+const x = u.button`
+  ${({ theme: o }) => `
+    align-items: center;
+    background-color: ${o.palette.white};
+    border: 1px solid ${o.palette.gray[100]};
+    border-radius: ${o.spacing[0.25]};
+    color: ${o.palette.gray[800]};
+    cursor: pointer;
+    display: flex;
+    font-size: ${o.typography.text.sm};
+    gap: ${o.spacing[0.25]};
+    height: 21px;
+    width: 21px;
+    justify-content: center;
+    padding: 6px;
+    transition: all 0.25s ease;
+
+    &[aria-label] {
+      height: auto;
+      width: auto;
+    }
+
+    &.success {
+      border-color: ${o.palette.success[500]};
+      color: ${o.palette.success[500]};
+
+      &:hover {
+        background-color: ${o.palette.success[200]};
+      }
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      background: ${o.palette.gray[200]};
+      border-color: ${o.palette.gray[200]};
+      color: ${o.palette.gray[300]};
+    }
+
+    &:hover:not(.success) {
+      background-color: ${o.palette.gray[100]};
+    }
+  `}
+`, $ = {
+  add: { icon: "plus" },
+  approve: { icon: "check" },
+  disabled: { icon: "ban" },
+  reject: { icon: "xmark" },
+  submit: { icon: "arrow-right" },
+  success: { icon: "check" }
+}, v = ({
+  disabled: o = !1,
+  icon: a,
+  id: i,
+  label: e,
+  name: r,
+  onClick: n,
+  type: l = "button",
+  variant: t
+}) => {
+  const p = g(), d = /* @__PURE__ */ c(
+    x,
+    {
+      "aria-label": r ?? void 0,
+      className: t,
+      disabled: o,
+      id: i,
+      onClick: n,
+      type: l,
+      children: [
+        /* @__PURE__ */ s(
+          y,
+          {
+            clickable: !1,
+            icon: a ?? $[t].icon,
+            iconSize: r === void 0 ? "xxs" : "xs",
+            iconType: "fa-light"
+          }
+        ),
+        r ?? void 0
+      ]
+    }
+  );
+  return /* @__PURE__ */ c(b, { alignItems: "center", display: "flex", children: [
+    d,
+    e && /* @__PURE__ */ s(f, { color: p.palette.gray[800], ml: 0.5, size: "sm", children: e })
+  ] });
+};
+export {
+  v as TableButton
+};

package/dist/components/tabs/fixed-tabs/index.js

@@ -1 +1,29 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("../../../styles-Bn42XCW5.js"),t=require("../../typography/heading/index.js");require("../../typography/span/index.js"),require("../../typography/text/index.js"),exports.FixedTabs=({items:s})=>e.jsx(i.StyledFixedTabs,{children:s.map((({isActive:s,label:r,onClick:n},a)=>e.jsx(i.StyledFixedTab,{className:s?"active":"",onClick:n,type:"button",children:e.jsx(t.Heading,{color:"inherit",fontWeight:"semibold",size:"sm",sizeSm:"xs",children:r})},`${r}-${a}`)))});
+import { jsx as i } from "react/jsx-runtime";
+import { S as s, a } from "../../../styles-ePGii_9g.mjs";
+import { Heading as d } from "../../typography/heading/index.js";
+import "../../typography/span/index.js";
+import "../../typography/text/index.js";
+const h = ({ items: t }) => /* @__PURE__ */ i(s, { children: t.map(
+  ({ isActive: r, label: e, onClick: o }, m) => /* @__PURE__ */ i(
+    a,
+    {
+      className: r ? "active" : "",
+      onClick: o,
+      type: "button",
+      children: /* @__PURE__ */ i(
+        d,
+        {
+          color: "inherit",
+          fontWeight: "semibold",
+          size: "sm",
+          sizeSm: "xs",
+          children: e
+        }
+      )
+    },
+    `${e}-${m}`
+  )
+) });
+export {
+  h as FixedTabs
+};

package/dist/components/tabs/index.js

@@ -1 +1,57 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("styled-components"),o=require("./fixed-tabs/index.js"),t=require("./tab/index.js"),r=require("../container/index.js");exports.FixedTabs=o.FixedTabs,exports.Tab=t.Tab,exports.Tabs=({items:o,borders:n=!0,box:d=!1})=>{const s=i.useTheme();return e.jsx(r.Container,{bgColor:s.palette.white,border:d?"1px solid":void 0,borderBottom:n?`1px solid ${s.palette.gray[300]}`:void 0,borderColor:d?s.palette.gray[200]:void 0,borderRadius:d?s.spacing[.25]:void 0,display:"inline-flex",gap:.25,padding:d?[0,0,0,0]:void 0,pl:n?1.25:void 0,pr:n?1.25:void 0,role:"tablist",width:d?"max-content":"100%",children:o.map((({id:i,isActive:o,link:r,label:n,notificationSign:d,onClick:s,tooltip:a})=>e.jsx(t.Tab,{id:i,isActive:o,label:n,link:r,notificationSign:d,onClick:s,tooltip:a},i)))})};
+import { jsx as d } from "react/jsx-runtime";
+import { useTheme as s } from "styled-components";
+import { FixedTabs as w } from "./fixed-tabs/index.js";
+import { Tab as u } from "./tab/index.js";
+import { Container as g } from "../container/index.js";
+const b = ({
+  items: i,
+  borders: r = !0,
+  box: e = !1
+}) => {
+  const n = s();
+  return /* @__PURE__ */ d(
+    g,
+    {
+      bgColor: n.palette.white,
+      border: e ? "1px solid" : void 0,
+      borderBottom: r ? `1px solid ${n.palette.gray[300]}` : void 0,
+      borderColor: e ? n.palette.gray[200] : void 0,
+      borderRadius: e ? n.spacing[0.25] : void 0,
+      display: "inline-flex",
+      gap: 0.25,
+      padding: e ? [0, 0, 0, 0] : void 0,
+      pl: r ? 1.25 : void 0,
+      pr: r ? 1.25 : void 0,
+      role: "tablist",
+      width: e ? "max-content" : "100%",
+      children: i.map(
+        ({
+          id: t,
+          isActive: o,
+          link: a,
+          label: p,
+          notificationSign: l,
+          onClick: f,
+          tooltip: m
+        }) => /* @__PURE__ */ d(
+          u,
+          {
+            id: t,
+            isActive: o,
+            label: p,
+            link: a,
+            notificationSign: l,
+            onClick: f,
+            tooltip: m
+          },
+          t
+        )
+      )
+    }
+  );
+};
+export {
+  w as FixedTabs,
+  u as Tab,
+  b as Tabs
+};

package/dist/components/tabs/tab/index.js

@@ -1 +1,39 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),e=require("../../../styles-Bn42XCW5.js"),t=require("../../notification-sign/index.js"),o=require("../../../index-CmylnDrF.js");exports.Tab=({label:l,id:n,isActive:r=!1,link:s,notificationSign:a,onClick:c,tooltip:d=""})=>i.jsx(o.Tooltip,{display:"flex",id:`${n}-tooltip`,tip:d,children:i.jsxs(e.TabLink,{"aria-selected":r,className:r?"active":"",id:n,onClick:c,role:"tab",to:s,children:[l,i.jsx(t.NotificationSign,{left:null==a?void 0:a.left,numberIndicator:null==a?void 0:a.numberIndicator,show:null==a?void 0:a.show,top:null==a?void 0:a.top,variant:null==a?void 0:a.variant})]})});
+import { jsx as s, jsxs as T } from "react/jsx-runtime";
+import { T as h } from "../../../styles-ePGii_9g.mjs";
+import { NotificationSign as x } from "../../notification-sign/index.js";
+import { T as u } from "../../../index-DwznImvK.mjs";
+const N = ({
+  label: m,
+  id: e,
+  isActive: l = !1,
+  link: p,
+  notificationSign: r,
+  onClick: d,
+  tooltip: b = ""
+}) => /* @__PURE__ */ s(u, { display: "flex", id: `${e}-tooltip`, tip: b, children: /* @__PURE__ */ T(
+  h,
+  {
+    "aria-selected": l,
+    className: l ? "active" : "",
+    id: e,
+    onClick: d,
+    role: "tab",
+    to: p,
+    children: [
+      m,
+      /* @__PURE__ */ s(
+        x,
+        {
+          left: r == null ? void 0 : r.left,
+          numberIndicator: r == null ? void 0 : r.numberIndicator,
+          show: r == null ? void 0 : r.show,
+          top: r == null ? void 0 : r.top,
+          variant: r == null ? void 0 : r.variant
+        }
+      )
+    ]
+  }
+) });
+export {
+  N as Tab
+};