@fluidattacks/design 3.1.11 → 3.1.12

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

@@ -1 +1,15 @@
-"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 t, jsx as r } from "react/jsx-runtime";
+import { useTheme as m } from "styled-components";
+import { Container as i } 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: a, description: l, icon: s, onClick: n, requiresUpgrade: p = !1, title: c }) => {
+  const e = m();
+  return t(i, { bgColor: e.palette.white, bgColorHover: e.palette.gray[100], cursor: "pointer", display: "flex", gap: 0.5, onClick: n, px: 1.25, py: 1, width: "100%", children: [r(i, { alignItems: "center", bgColor: e.palette.gray[300], borderRadius: e.spacing[0.25], display: "flex", height: "24px", justify: "center", width: "24px", children: r(d, { icon: s, iconColor: e.palette.gray[800], iconSize: "xxs", ml: 0.5, mr: 0.5 }) }), t(i, { children: [t(i, { alignItems: "center", display: "inline-flex", gap: 0.5, children: [r(o, { color: e.palette.gray[800], size: "sm", children: c }), p ? r(g, { text: "Upgrade" }) : void 0, a] }), r(o, { color: e.palette.gray[400], size: "xs", children: l })] })] });
+};
+export {
+  j as MenuItem
+};

package/dist/components/slider/index.js

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

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

@@ -1 +1,10 @@
-"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 u } from "react";
+import { useSliderThumb as o, VisuallyHidden as p } from "react-aria";
+const l = ({ state: i, trackRef: s, index: t }) => {
+  const e = u(null), { thumbProps: n, inputProps: a, isDragging: m } = o({ index: t, trackRef: s, inputRef: e }, i);
+  return r("div", { ...n, className: "thumb " + (m ? "dragging" : ""), children: r(p, { children: r("input", { ref: e, ...a }) }) });
+};
+export {
+  l as Thumb
+};

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

@@ -1,15 +1,101 @@
-"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 e, jsxs as r } from "react/jsx-runtime";
+import { useState as v, useCallback as k } from "react";
+import { styled as o } from "styled-components";
+import { v as w } from "../../utils-CQvBF-wY.mjs";
+import "../../styles-C3cZmKVJ.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: S } = 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]};
+      }
+    ` })), j = o.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;
+  `}
+`, A = o.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)}))})};
+`, D = o.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]};
+    }
+  `}
+`, N = o.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]});
+    }
+
+    ${S(t, l)}
+  `}
+`, G = ({ button: { disabled: t = !1, text: l, type: y = "button", onClick: $ }, steps: h }) => {
+  const [a, f] = v(1), m = k((n, i) => () => {
+    f((p) => p + n), i == null || i();
+  }, []);
+  return e(j, { children: h.map((n, i) => {
+    const { content: p, title: b, nextAction: u, previousAction: x } = n, c = i + 1, s = c < a ? "completed" : c === a ? "current" : "disabled";
+    return r(A, { children: [e(g, { maxWidth: "40px", position: "relative", children: e(N, { $variant: s, children: s === "completed" ? e(C, { icon: "check", iconSize: "xs", iconType: "fa-solid" }) : c }) }), r(g, { ml: 1.5, width: "100%", children: [e(z, { fontWeight: "bold", lineSpacing: 1.25, mb: 1.5, size: "xs", children: b }), s === "current" && r(g, { children: [p, r(D, { children: [a > 1 && e(d, { disabled: n.isDisabledPrevious ?? !1, onClick: m(-1, x), variant: "tertiary", children: "Previous" }), a < h.length ? e(d, { disabled: n.isDisabledNext ?? !1, onClick: m(1, u), variant: "primary", children: "Next step" }) : e(d, { disabled: t, onClick: $, type: y, variant: "primary", children: l })] })] })] })] }, n.title);
+  }) });
+};
+export {
+  G as StepLapse
+};

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

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

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

@@ -1 +1,9 @@
-"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 r, a } from "../../../styles-BA0WIQL-.mjs";
+import { Heading as c } from "../../typography/heading/index.js";
+import "../../typography/span/index.js";
+import "../../typography/text/index.js";
+const b = ({ items: o }) => i(r, { children: o.map(({ isActive: s, label: e, onClick: t }, m) => i(a, { className: s ? "active" : "", onClick: t, type: "button", children: i(c, { color: "inherit", fontWeight: "semibold", size: "sm", sizeSm: "xs", children: e }) }, `${e}-${m}`)) });
+export {
+  b as FixedTabs
+};

package/dist/components/tabs/index.js

@@ -1 +1,14 @@
-"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 e } from "react/jsx-runtime";
+import { useTheme as m } from "styled-components";
+import { FixedTabs as u } from "./fixed-tabs/index.js";
+import { Tab as c } from "./tab/index.js";
+import { Container as v } from "../container/index.js";
+const T = ({ items: a, borders: t = !0, box: i = !1 }) => {
+  const o = m();
+  return e(v, { bgColor: o.palette.white, border: i ? "1px solid" : void 0, borderBottom: t ? `1px solid ${o.palette.gray[300]}` : void 0, borderColor: i ? o.palette.gray[200] : void 0, borderRadius: i ? o.spacing[0.25] : void 0, display: "inline-flex", gap: 0.25, padding: i ? [0, 0, 0, 0] : void 0, pl: t ? 1.25 : void 0, pr: t ? 1.25 : void 0, role: "tablist", width: i ? "max-content" : "100%", children: a.map(({ id: r, isActive: l, link: s, label: d, notificationSign: p, onClick: n, tooltip: b }) => e(c, { id: r, isActive: l, label: d, link: s, notificationSign: p, onClick: n, tooltip: b }, r)) });
+};
+export {
+  u as FixedTabs,
+  c as Tab,
+  T as Tabs
+};

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

@@ -1 +1,8 @@
-"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 a, jsxs as l } from "react/jsx-runtime";
+import { T as m } from "../../../styles-BA0WIQL-.mjs";
+import { NotificationSign as p } from "../../notification-sign/index.js";
+import { T as d } from "../../../index-D-lcuEHY.mjs";
+const x = ({ label: r, id: o, isActive: t = !1, link: n, notificationSign: i, onClick: e, tooltip: s = "" }) => a(d, { display: "flex", id: `${o}-tooltip`, tip: s, children: l(m, { "aria-selected": t, className: t ? "active" : "", id: o, onClick: e, role: "tab", to: n, children: [r, a(p, { left: i == null ? void 0 : i.left, numberIndicator: i == null ? void 0 : i.numberIndicator, show: i == null ? void 0 : i.show, top: i == null ? void 0 : i.top, variant: i == null ? void 0 : i.variant })] }) });
+export {
+  x as Tab
+};

package/dist/components/tag/index.js

@@ -1,3 +1,116 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),e=require("lodash"),o=require("styled-components"),t=require("../../utils-C2whpEd3.js");require("../../styles-C2CoGJl7.js");const r=require("../icon/index.js"),a=require("../icon-button/index.js"),i=require("../link/index.js");require("../typography/heading/index.js");const l=require("../typography/span/index.js");require("../typography/text/index.js");const{getVariant:c}=t.variantBuilder((n=>({default:`\n      background-color: ${n.palette.gray[200]};\n      color: ${n.palette.gray[800]};\n    `,error:`\n      &.high {\n        background-color: ${n.palette.error[700]};\n        color: ${n.palette.white};\n      }\n      &.low {\n        background-color: ${n.palette.error[50]};\n        color: ${n.palette.error[700]};\n      }\n      &.medium {\n        background-color: ${n.palette.error[500]};\n        color: ${n.palette.error[50]};\n      }\n    `,inactive:`\n      background-color: ${n.palette.gray[200]};\n      color: ${n.palette.gray[600]};\n    `,info:`\n      &.high {\n        background-color: ${n.palette.info[700]};\n        color: ${n.palette.white};\n      }\n      &.low {\n        background-color: ${n.palette.info[50]};\n        color: ${n.palette.info[700]};\n      }\n      &.medium {\n        background-color: ${n.palette.info[500]};\n        color: ${n.palette.info[50]};\n      }\n    `,reachable:`\n      background-color: ${n.palette.gray[50]};\n      color: ${n.palette.gray[800]};\n    `,remediation:`\n      background-color: inherit;\n      border: 1px solid ${n.palette.gray[300]};\n      color: ${n.palette.gray[400]};\n    `,role:`\n      background-color: ${n.palette.gray[800]};\n      color: ${n.palette.white};\n    `,success:`\n      &.high {\n        background-color: ${n.palette.success[700]};\n        color: ${n.palette.white};\n      }\n      &.low {\n        background-color: ${n.palette.success[50]};\n        color: ${n.palette.success[700]};\n      }\n      &.medium {\n        background-color: ${n.palette.success[500]};\n        color: ${n.palette.success[50]};\n      }\n    `,technique:`\n      --tag-padding-y: ${n.spacing[.25]};\n      --tag-padding-x: ${n.spacing[.75]};\n\n      background-color: inherit;\n      border: 1px solid ${n.palette.success[800]};\n      color: ${n.palette.success[800]};\n    `,warning:`\n      &.high {\n        background-color: ${n.palette.warning[600]};\n        color: ${n.palette.white};\n      }\n      &.low {\n        background-color: ${n.palette.warning[50]};\n        color: ${n.palette.warning[700]};\n      }\n      &.medium {\n        background-color: ${n.palette.warning[400]};\n        color: ${n.palette.warning[700]};\n      }\n    `}))),s=o.styled.span`
-  ${({theme:n,$fontSize:e=n.typography.text.xs,$variant:o})=>`\n    align-items: center;\n    border-radius: ${n.spacing["technique"===o?1:.25]};\n    display: inline-flex;\n    gap: ${n.spacing[.25]};\n    font-family: ${n.typography.type.primary};\n    font-size: ${e};\n    font-style: normal;\n    font-weight: ${n.typography.weight.regular};\n    justify-content: center;\n    line-height: 18px;\n    padding: var(--tag-padding-y) var(--tag-padding-x);\n    white-space: nowrap;\n    width: max-content;\n\n    ~ a {\n      font-size: ${n.typography.text.xs};\n      display: flex;\n    }\n\n    ${c(n,o)}\n  `}
-`;exports.Tag=({disabled:o,icon:t,iconColor:c="inherit",iconType:p="fa-light",id:g="close-tag",filterValues:d="",fontSize:u,href:$,linkLabel:h,onClose:y,priority:x="default",tagTitle:b="",tagLabel:f,variant:k="default"})=>{const m=f.length>25&&e.isEmpty(b+d),j=`${f.slice(0,25)}...`;return n.jsxs(l.Span,{className:"gap-0.5",display:void 0===$?"initial":"flex",size:"sm",children:[n.jsxs(s,{$fontSize:u,$variant:k,className:x,children:[t&&n.jsx(r.Icon,{icon:t,iconColor:c,iconSize:"xxs",iconType:p}),n.jsxs("span",{children:[n.jsx("strong",{children:b}),n.jsx("span",{children:m?j:f}),n.jsx("strong",{children:d})]}),y?n.jsx(a.IconButton,{disabled:o,icon:"xmark",iconSize:"xxs",iconType:"fa-light",id:g,onClick:y,px:.125,py:.125,variant:"ghost"}):void 0]}),void 0===$?void 0:n.jsx(i.Link,{href:$,children:h})]})};
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { isEmpty as y } from "lodash";
+import { styled as b } from "styled-components";
+import { v as k } from "../../utils-CQvBF-wY.mjs";
+import "../../styles-C3cZmKVJ.mjs";
+import { Icon as w } from "../icon/index.js";
+import { IconButton as x } from "../icon-button/index.js";
+import { Link as v } from "../link/index.js";
+import "../typography/heading/index.js";
+import { Span as z } from "../typography/span/index.js";
+import "../typography/text/index.js";
+const { getVariant: S } = k((o) => ({ default: `
+      background-color: ${o.palette.gray[200]};
+      color: ${o.palette.gray[800]};
+    `, error: `
+      &.high {
+        background-color: ${o.palette.error[700]};
+        color: ${o.palette.white};
+      }
+      &.low {
+        background-color: ${o.palette.error[50]};
+        color: ${o.palette.error[700]};
+      }
+      &.medium {
+        background-color: ${o.palette.error[500]};
+        color: ${o.palette.error[50]};
+      }
+    `, inactive: `
+      background-color: ${o.palette.gray[200]};
+      color: ${o.palette.gray[600]};
+    `, info: `
+      &.high {
+        background-color: ${o.palette.info[700]};
+        color: ${o.palette.white};
+      }
+      &.low {
+        background-color: ${o.palette.info[50]};
+        color: ${o.palette.info[700]};
+      }
+      &.medium {
+        background-color: ${o.palette.info[500]};
+        color: ${o.palette.info[50]};
+      }
+    `, reachable: `
+      background-color: ${o.palette.gray[50]};
+      color: ${o.palette.gray[800]};
+    `, remediation: `
+      background-color: inherit;
+      border: 1px solid ${o.palette.gray[300]};
+      color: ${o.palette.gray[400]};
+    `, role: `
+      background-color: ${o.palette.gray[800]};
+      color: ${o.palette.white};
+    `, success: `
+      &.high {
+        background-color: ${o.palette.success[700]};
+        color: ${o.palette.white};
+      }
+      &.low {
+        background-color: ${o.palette.success[50]};
+        color: ${o.palette.success[700]};
+      }
+      &.medium {
+        background-color: ${o.palette.success[500]};
+        color: ${o.palette.success[50]};
+      }
+    `, technique: `
+      --tag-padding-y: ${o.spacing[0.25]};
+      --tag-padding-x: ${o.spacing[0.75]};
+
+      background-color: inherit;
+      border: 1px solid ${o.palette.success[800]};
+      color: ${o.palette.success[800]};
+    `, warning: `
+      &.high {
+        background-color: ${o.palette.warning[600]};
+        color: ${o.palette.white};
+      }
+      &.low {
+        background-color: ${o.palette.warning[50]};
+        color: ${o.palette.warning[700]};
+      }
+      &.medium {
+        background-color: ${o.palette.warning[400]};
+        color: ${o.palette.warning[700]};
+      }
+    ` })), T = b.span`
+  ${({ theme: o, $fontSize: n = o.typography.text.xs, $variant: t }) => `
+    align-items: center;
+    border-radius: ${o.spacing[t === "technique" ? 1 : 0.25]};
+    display: inline-flex;
+    gap: ${o.spacing[0.25]};
+    font-family: ${o.typography.type.primary};
+    font-size: ${n};
+    font-style: normal;
+    font-weight: ${o.typography.weight.regular};
+    justify-content: center;
+    line-height: 18px;
+    padding: var(--tag-padding-y) var(--tag-padding-x);
+    white-space: nowrap;
+    width: max-content;
+
+    ~ a {
+      font-size: ${o.typography.text.xs};
+      display: flex;
+    }
+
+    ${S(o, t)}
+  `}
+`, F = ({ disabled: o, icon: n, iconColor: t = "inherit", iconType: s = "fa-light", id: g = "close-tag", filterValues: l = "", fontSize: d, href: r, linkLabel: $, onClose: c, priority: h = "default", tagTitle: p = "", tagLabel: a, variant: m = "default" }) => {
+  const u = a.length > 25 && y(p + l), f = `${a.slice(0, 25)}...`;
+  return i(z, { className: "gap-0.5", display: r === void 0 ? "initial" : "flex", size: "sm", children: [i(T, { $fontSize: d, $variant: m, className: h, children: [n && e(w, { icon: n, iconColor: t, iconSize: "xxs", iconType: s }), i("span", { children: [e("strong", { children: p }), e("span", { children: u ? f : a }), e("strong", { children: l })] }), c ? e(x, { disabled: o, icon: "xmark", iconSize: "xxs", iconType: "fa-light", id: g, onClick: c, px: 0.125, py: 0.125, variant: "ghost" }) : void 0] }), r === void 0 ? void 0 : e(v, { href: r, children: $ })] });
+};
+export {
+  F as Tag
+};

package/dist/components/timeline/card/index.js

@@ -1 +1,9 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),require("react/jsx-runtime"),require("styled-components");const e=require("../../../index-CA_9DXWd.js");require("../../typography/heading/index.js"),require("../../typography/span/index.js"),require("../../typography/text/index.js"),exports.TimeLineCard=e.TimeLineCard;
+import "react/jsx-runtime";
+import "styled-components";
+import { a as e } from "../../../index-Bu448Tz2.mjs";
+import "../../typography/heading/index.js";
+import "../../typography/span/index.js";
+import "../../typography/text/index.js";
+export {
+  e as TimeLineCard
+};

package/dist/components/timeline/index.js

@@ -1 +1,7 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("../../index-CA_9DXWd.js");exports.TimeLineCard=i.TimeLineCard,exports.TimeLine=({items:t})=>e.jsx(i.TimelineContainer,{children:t.map(((t,r)=>e.jsx(i.TimeLineCard,{date:t.date,description:t.description,title:t.title},`${t.title}-${r}`)))});
+import { jsx as t } from "react/jsx-runtime";
+import { T as r, a as s } from "../../index-Bu448Tz2.mjs";
+const d = ({ items: e }) => t(r, { children: e.map((i, a) => t(s, { date: i.date, description: i.description, title: i.title }, `${i.title}-${a}`)) });
+export {
+  d as TimeLine,
+  s as TimeLineCard
+};

package/dist/components/toggle/index.js

@@ -1,8 +1,31 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),i=require("styled-components"),n=require("../container/index.js"),r=i.styled.div`
-  ${({theme:e})=>`\n    align-items: center;\n    background-color: ${e.palette.gray[200]};\n    border-radius: 34px;\n    cursor: pointer;\n    display: flex;\n    height: 20px;\n    position: relative;\n    transition: 0.2s;\n    width: 36px;\n  `}
-`,o=i.styled.div`
-  ${({theme:e})=>`\n    background-color: ${e.palette.white};\n    border-radius: 50%;\n    height: ${e.spacing[1]};\n    left: 2px;\n    position: absolute;\n    transition: 0.2s;\n    width: ${e.spacing[1]};\n    z-index: 1;\n  `}
-`,a=i.styled.label`
+import { jsxs as l, jsx as o } from "react/jsx-runtime";
+import { forwardRef as u, useCallback as m } from "react";
+import { styled as a } from "styled-components";
+import { Container as $ } from "../container/index.js";
+const i = a.div`
+  ${({ theme: e }) => `
+    align-items: center;
+    background-color: ${e.palette.gray[200]};
+    border-radius: 34px;
+    cursor: pointer;
+    display: flex;
+    height: 20px;
+    position: relative;
+    transition: 0.2s;
+    width: 36px;
+  `}
+`, y = a.div`
+  ${({ theme: e }) => `
+    background-color: ${e.palette.white};
+    border-radius: 50%;
+    height: ${e.spacing[1]};
+    left: 2px;
+    position: absolute;
+    transition: 0.2s;
+    width: ${e.spacing[1]};
+    z-index: 1;
+  `}
+`, k = a.label`
   display: inline-block;
 
   input {
@@ -12,21 +35,29 @@
     width: 0;
   }
 
-  input:checked + ${r} {
-    background-color: ${({theme:e})=>e.palette.primary[500]};
+  input:checked + ${i} {
+    background-color: ${({ theme: e }) => e.palette.primary[500]};
   }
 
-  input:checked + ${r} > div {
+  input:checked + ${i} > div {
     transform: translateX(100%);
   }
 
-  input:disabled + ${r} {
+  input:disabled + ${i} {
     cursor: not-allowed;
-    background-color: ${({theme:e})=>e.palette.gray[100]};
+    background-color: ${({ theme: e }) => e.palette.gray[100]};
   }
 
-  input:disabled + ${r} > div {
-    background-color: ${({theme:e})=>e.palette.gray[200]};
-    border: 1px solid ${({theme:e})=>e.palette.gray[200]};
+  input:disabled + ${i} > div {
+    background-color: ${({ theme: e }) => e.palette.gray[200]};
+    border: 1px solid ${({ theme: e }) => e.palette.gray[200]};
   }
-`,l=t.forwardRef((function({defaultChecked:i,disabled:l=!1,justify:s,name:d,leftDescription:c,rightDescription:p,...u},g){const h=!0===i?"on":"off",b="object"==typeof c&&c.on&&c.off?c[h]:c,f=t.useCallback((e=>{e.stopPropagation()}),[]);return e.jsxs(n.Container,{alignItems:"center",display:"flex",fontSize:"14px",gap:.75,justify:s,children:[b,e.jsxs(a,{onClick:f,role:"switch",children:[e.jsx("input",{...u,"aria-disabled":l,"aria-label":d,checked:!0===i,disabled:l,name:d,ref:g,type:"checkbox"}),e.jsx(r,{"aria-label":"Toggle Switch",id:`${d}Toggle`,children:e.jsx(o,{})})]}),p]})}));exports.Toggle=l;
+`, C = u(function({ defaultChecked: e, disabled: r = !1, justify: d, name: n, leftDescription: t, rightDescription: s, ...c }, p) {
+  const h = e === !0 ? "on" : "off", g = typeof t == "object" && t.on && t.off ? t[h] : t, b = m((f) => {
+    f.stopPropagation();
+  }, []);
+  return l($, { alignItems: "center", display: "flex", fontSize: "14px", gap: 0.75, justify: d, children: [g, l(k, { onClick: b, role: "switch", children: [o("input", { ...c, "aria-disabled": r, "aria-label": n, checked: e === !0, disabled: r, name: n, ref: p, type: "checkbox" }), o(i, { "aria-label": "Toggle Switch", id: `${n}Toggle`, children: o(y, {}) })] }), s] });
+});
+export {
+  C as Toggle
+};