@fluidattacks/design 3.1.11 → 3.1.13

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

@@ -1,3 +1,85 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),e=require("styled-components"),i=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"),s=e.styled.div`
-  ${({theme:n})=>`\n    height: ${n.spacing[1]};\n    width: ${n.spacing[1]};\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      color: ${n.palette.warning[200]};\n      position: absolute;\n    }\n\n    & .ellipse-2 {\n      transform: scale(0.75) translate(-67%, -66%);\n      color: ${n.palette.warning[400]};\n    }\n\n    & .icon {\n      color: ${n.palette.warning[600]};\n      font-size: ${n.spacing[.5]};\n    }\n  `}
-`;exports.PremiumFeature=({margin:t,onClick:l,text:c})=>{const a=e.useTheme(),p=n.jsxs(s,{children:[n.jsx(r.Icon,{icon:"circle",iconClass:"ellipse-1",iconSize:"xs"}),n.jsx(r.Icon,{icon:"circle",iconClass:"ellipse-2",iconSize:"xs"}),n.jsx(r.Icon,{icon:"crown",iconClass:"icon",iconSize:"xs"})]});return void 0!==c?n.jsx(i.Container,{cursor:"pointer",display:"inline-block",mr:t,onClick:l,children:n.jsxs(i.Container,{alignItems:"center",bgColor:a.palette.warning[50],borderRadius:"4px",display:"flex",padding:[.25,.25,.25,.25],width:"fit-content",children:[p,n.jsx(o.Text,{color:a.palette.warning[500],display:"inline",ml:.25,size:"xs",children:c})]})}):n.jsx(i.Container,{display:"inline-block",mr:t,onClick:l,children:p})};
+import { jsx as n, jsxs as c } from "react/jsx-runtime";
+import { styled as a, useTheme as p } from "styled-components";
+import { Container as o } from "../container/index.js";
+import { Icon as e } from "../icon/index.js";
+import "../typography/heading/index.js";
+import "../typography/span/index.js";
+import { Text as d } from "../typography/text/index.js";
+const m = a.div`
+  ${({ theme: i }) => `
+    height: ${i.spacing[1]};
+    width: ${i.spacing[1]};
+    position: relative;
+    flex-shrink: 0;
+
+    & .ellipse-1,
+    & .ellipse-2,
+    & .icon {
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      position: absolute;
+    }
+
+    & .ellipse-1 {
+      color: ${i.palette.warning[200]};
+      position: absolute;
+    }
+
+    & .ellipse-2 {
+      transform: scale(0.75) translate(-67%, -66%);
+      color: ${i.palette.warning[400]};
+    }
+
+    & .icon {
+      color: ${i.palette.warning[600]};
+      font-size: ${i.spacing[0.5]};
+    }
+  `}
+`, b = ({
+  margin: i,
+  onClick: r,
+  text: l
+}) => {
+  const s = p(), t = /* @__PURE__ */ c(m, { children: [
+    /* @__PURE__ */ n(e, { icon: "circle", iconClass: "ellipse-1", iconSize: "xs" }),
+    /* @__PURE__ */ n(e, { icon: "circle", iconClass: "ellipse-2", iconSize: "xs" }),
+    /* @__PURE__ */ n(e, { icon: "crown", iconClass: "icon", iconSize: "xs" })
+  ] });
+  return l !== void 0 ? /* @__PURE__ */ n(
+    o,
+    {
+      cursor: "pointer",
+      display: "inline-block",
+      mr: i,
+      onClick: r,
+      children: /* @__PURE__ */ c(
+        o,
+        {
+          alignItems: "center",
+          bgColor: s.palette.warning[50],
+          borderRadius: "4px",
+          display: "flex",
+          padding: [0.25, 0.25, 0.25, 0.25],
+          width: "fit-content",
+          children: [
+            t,
+            /* @__PURE__ */ n(
+              d,
+              {
+                color: s.palette.warning[500],
+                display: "inline",
+                ml: 0.25,
+                size: "xs",
+                children: l
+              }
+            )
+          ]
+        }
+      )
+    }
+  ) : /* @__PURE__ */ n(o, { display: "inline-block", mr: i, onClick: r, children: t });
+};
+export {
+  b as PremiumFeature
+};

package/dist/components/priority-score/index.js

@@ -1 +1,29 @@
-"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");require("../typography/heading/index.js"),require("../typography/span/index.js");const o=require("../typography/text/index.js");exports.PriorityScore=({score:n})=>{const s=r.useTheme(),a=n>66||0===n?"priority-bars-high":n<=33?"priority-bars-low":"priority-bars-medium";return e.jsxs(i.Container,{alignItems:"center",display:"inline-flex",gap:.25,children:[e.jsx(t.Icon,{icon:a,iconClass:n<=66?"fa-kit-duotone":"",iconColor:n>0?s.palette.primary[500]:s.palette.gray[200],iconSize:"xs",iconType:"fa-kit",secondaryColor:s.palette.gray[200]}),e.jsx(o.Text,{color:s.palette.gray[800],size:"sm",textAlign:"right",children:n+"%"})]})};
+import { jsxs as n, jsx as o } from "react/jsx-runtime";
+import { useTheme as a } from "styled-components";
+import { Container as m } 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 l } from "../typography/text/index.js";
+const d = ({
+  score: r
+}) => {
+  const i = a(), t = r <= 33 ? "priority-bars-low" : "priority-bars-medium", e = r > 66 || r === 0 ? "priority-bars-high" : t;
+  return /* @__PURE__ */ n(m, { alignItems: "center", display: "inline-flex", gap: 0.25, children: [
+    /* @__PURE__ */ o(
+      p,
+      {
+        icon: e,
+        iconClass: r <= 66 ? "fa-kit-duotone" : "",
+        iconColor: r > 0 ? i.palette.primary[500] : i.palette.gray[200],
+        iconSize: "xs",
+        iconType: "fa-kit",
+        secondaryColor: i.palette.gray[200]
+      }
+    ),
+    /* @__PURE__ */ o(l, { color: i.palette.gray[800], size: "sm", textAlign: "right", children: r + "%" })
+  ] });
+};
+export {
+  d as PriorityScore
+};

package/dist/components/progress/index.js

@@ -1,5 +1,10 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),r=require("styled-components"),s=require("../../styles-C2CoGJl7.js"),i=require("../container/index.js"),n=r.styled(s.BaseComponent)`
-  animation: ${({$animationTime:e})=>`progress-bar ${e}s ease-in-out`};
+import { jsx as o } from "react/jsx-runtime";
+import { useState as f, useEffect as n } from "react";
+import { styled as g, useTheme as c } from "styled-components";
+import { B as d } from "../../styles-CplEd2kw.mjs";
+import { Container as l } from "../container/index.js";
+const p = g(d)`
+  animation: ${({ $animationTime: t }) => `progress-bar ${t}s ease-in-out`};
   animation-fill-mode: both;
 
   @keyframes progress-bar {
@@ -11,4 +16,32 @@
       width: 100%;
     }
   }
-`;exports.Progress=({progressTime:s=10,onComplete:o})=>{const a=r.useTheme(),[l,u]=t.useState(0);return t.useEffect((()=>{100===l&&(null==o||o())}),[l,o]),t.useEffect((()=>{const e=setInterval((()=>{u((e=>100===e?0:e+1))}),1e3*s/100);return()=>{clearInterval(e)}}),[l,s]),e.jsx(i.Container,{bgColor:a.palette.gray[200],height:"4px",children:e.jsx(n,{$animationTime:s,bgGradient:a.palette.gradients["01"],height:"100%",width:`${l}%`})})};
+`, b = (t) => t * 1e3 / 100, x = ({
+  progressTime: t = 10,
+  onComplete: r
+}) => {
+  const s = c(), i = 100, [e, m] = f(0);
+  return n(() => {
+    e === i && (r == null || r());
+  }, [e, r]), n(() => {
+    const h = setInterval(() => {
+      m(
+        (a) => a === i ? 0 : a + 1
+      );
+    }, b(t));
+    return () => {
+      clearInterval(h);
+    };
+  }, [e, t]), /* @__PURE__ */ o(l, { bgColor: s.palette.gray[200], height: "4px", children: /* @__PURE__ */ o(
+    p,
+    {
+      $animationTime: t,
+      bgGradient: s.palette.gradients["01"],
+      height: "100%",
+      width: `${e}%`
+    }
+  ) });
+};
+export {
+  x as Progress
+};

package/dist/components/progress-bar/index.js

@@ -1,5 +1,153 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),e=require("styled-components"),r=require("../../utils-C2whpEd3.js");require("../../styles-C2CoGJl7.js");const i=require("../container/index.js");require("../typography/heading/index.js"),require("../typography/span/index.js");const t=require("../typography/text/index.js"),{getVariant:a}=r.variantBuilder((n=>({compliance:`\n      display: inline-flex;\n\n      &.horizontal {\n        height: ${n.spacing[.75]};\n      }\n      &.vertical {\n        width: ${n.spacing[.75]};\n      }\n    `,default:`\n      display: inline-flex;\n\n      &.horizontal {\n        height: ${n.spacing[.5]};\n      }\n      &.vertical {\n        width: ${n.spacing[.5]};\n      }\n      .progress-bar {\n        background-color: ${n.palette.primary[500]};\n      }\n    `,progressIndicator:`\n      display: flex;\n\n      &.horizontal {\n        height: ${n.spacing[.125]};\n      }\n      &.vertical {\n        width: ${n.spacing[.125]};\n      }\n      .progress-bar {\n        background-color: ${n.palette.primary[500]};\n      }\n    `,progressIndicatorError:`\n      display: flex;\n\n      &.horizontal {\n        height: ${n.spacing[.125]};\n      }\n      &.vertical {\n        width: ${n.spacing[.125]};\n      }\n      .progress-bar {\n        background-color: ${n.palette.error[200]};\n      }\n    `,small:`\n      color: ${n.palette.primary[500]};\n      display: inline-flex;\n\n      &.horizontal {\n        height: ${n.spacing[.25]};\n      }\n      &.vertical {\n        width: ${n.spacing[.25]};\n      }\n      .progress-bar {\n        background-color: ${n.palette.primary[500]};\n      }\n    `}))),o=e.styled.div`
-  ${({theme:n,$minWidth:e,$orientation:r,$rounded:i,$variant:t})=>`\n    background-color: ${n.palette.gray[100]};\n    border-radius: ${i?"100px":"unset"};\n    ${"horizontal"===r?"min-width":"min-height"}: ${e}px;\n    ${"horizontal"===r?"":"height: 100%;"}\n\n    ${a(n,t)}\n\n  `}
-`,s=e.styled.div`
-  ${({theme:n,$percentage:e,$rounded:r,$variant:i})=>{return`\n    display: inline-flex;\n    width: ${e}%;\n    max-width: 100%;\n    min-width: 0%;\n    height: 100%;\n    border-radius: ${r?"100px":"unset"};\n    border-end-end-radius: ${r&&e<100?"0":"inherit"};\n    border-start-end-radius: ${r&&e<100?"0":"inherit"};\n    background-color: ${"compliance"===i?(t=n,a=e,a<50?t.palette.error[500]:a<80?t.palette.warning[500]:t.palette.success[500]):"inherit"};\n  `;var t,a}}
-`;exports.ProgressBar=({minWidth:e=100,percentage:r,percentageLocation:a="right",showPercentage:l=!1,orientation:d="horizontal",rounded:p=!0,variant:c="default"})=>{const h=l&&"left"===a,g=l?n.jsx(i.Container,{alignItems:"center",display:"flex",justify:h?"flex-end":"flex-start",width:"40px",children:n.jsx(t.Text,{ml:.5,mr:h?.5:0,size:"sm",children:`${r}%`})}):null,$=n.jsx(o,{$minWidth:e,$orientation:d,$rounded:p,$variant:c,className:d,children:n.jsx(s,{$percentage:r,$rounded:p,$variant:c,className:"progress-bar"})});return n.jsxs(i.Container,{alignItems:"center",display:"inline-flex",flexDirection:h?"row-reverse":"row",height:"horizontal"===d?"auto":"100%",maxWidth:h?`${e+43}px`:void 0,minWidth:h?`${e+43}px`:void 0,textAlign:"end",children:[$,g]})};
+import { jsxs as $, jsx as n } from "react/jsx-runtime";
+import { styled as p } from "styled-components";
+import { v as h } from "../../utils-V0EumEPM.mjs";
+import "../../styles-CplEd2kw.mjs";
+import { Container as d } from "../container/index.js";
+import "../typography/heading/index.js";
+import "../typography/span/index.js";
+import { Text as f } from "../typography/text/index.js";
+const { getVariant: u } = h(
+  (r) => ({
+    compliance: `
+      display: inline-flex;
+
+      &.horizontal {
+        height: ${r.spacing[0.75]};
+      }
+      &.vertical {
+        width: ${r.spacing[0.75]};
+      }
+    `,
+    default: `
+      display: inline-flex;
+
+      &.horizontal {
+        height: ${r.spacing[0.5]};
+      }
+      &.vertical {
+        width: ${r.spacing[0.5]};
+      }
+      .progress-bar {
+        background-color: ${r.palette.primary[500]};
+      }
+    `,
+    progressIndicator: `
+      display: flex;
+
+      &.horizontal {
+        height: ${r.spacing[0.125]};
+      }
+      &.vertical {
+        width: ${r.spacing[0.125]};
+      }
+      .progress-bar {
+        background-color: ${r.palette.primary[500]};
+      }
+    `,
+    progressIndicatorError: `
+      display: flex;
+
+      &.horizontal {
+        height: ${r.spacing[0.125]};
+      }
+      &.vertical {
+        width: ${r.spacing[0.125]};
+      }
+      .progress-bar {
+        background-color: ${r.palette.error[200]};
+      }
+    `,
+    small: `
+      color: ${r.palette.primary[500]};
+      display: inline-flex;
+
+      &.horizontal {
+        height: ${r.spacing[0.25]};
+      }
+      &.vertical {
+        width: ${r.spacing[0.25]};
+      }
+      .progress-bar {
+        background-color: ${r.palette.primary[500]};
+      }
+    `
+  })
+), x = (r, i) => i < 50 ? r.palette.error[500] : i < 80 ? r.palette.warning[500] : r.palette.success[500], b = p.div`
+  ${({ theme: r, $minWidth: i, $orientation: a, $rounded: t, $variant: o }) => `
+    background-color: ${r.palette.gray[100]};
+    border-radius: ${t ? "100px" : "unset"};
+    ${a === "horizontal" ? "min-width" : "min-height"}: ${i}px;
+    ${a === "horizontal" ? "" : "height: 100%;"}
+
+    ${u(r, o)}
+
+  `}
+`, m = p.div`
+  ${({ theme: r, $percentage: i, $rounded: a, $variant: t }) => `
+    display: inline-flex;
+    width: ${i}%;
+    max-width: 100%;
+    min-width: 0%;
+    height: 100%;
+    border-radius: ${a ? "100px" : "unset"};
+    border-end-end-radius: ${a && i < 100 ? "0" : "inherit"};
+    border-start-end-radius: ${a && i < 100 ? "0" : "inherit"};
+    background-color: ${t === "compliance" ? x(r, i) : "inherit"};
+  `}
+`, C = ({
+  minWidth: r = 100,
+  percentage: i,
+  percentageLocation: a = "right",
+  showPercentage: t = !1,
+  orientation: o = "horizontal",
+  rounded: s = !0,
+  variant: e = "default"
+}) => {
+  const l = t && a === "left", c = t ? /* @__PURE__ */ n(
+    d,
+    {
+      alignItems: "center",
+      display: "flex",
+      justify: l ? "flex-end" : "flex-start",
+      width: "40px",
+      children: /* @__PURE__ */ n(f, { ml: 0.5, mr: l ? 0.5 : 0, size: "sm", children: `${i}%` })
+    }
+  ) : null, g = /* @__PURE__ */ n(
+    b,
+    {
+      $minWidth: r,
+      $orientation: o,
+      $rounded: s,
+      $variant: e,
+      className: o,
+      children: /* @__PURE__ */ n(
+        m,
+        {
+          $percentage: i,
+          $rounded: s,
+          $variant: e,
+          className: "progress-bar"
+        }
+      )
+    }
+  );
+  return /* @__PURE__ */ $(
+    d,
+    {
+      alignItems: "center",
+      display: "inline-flex",
+      flexDirection: l ? "row-reverse" : "row",
+      height: o === "horizontal" ? "auto" : "100%",
+      maxWidth: l ? `${r + 43}px` : void 0,
+      minWidth: l ? `${r + 43}px` : void 0,
+      textAlign: "end",
+      children: [
+        g,
+        c
+      ]
+    }
+  );
+};
+export {
+  C as ProgressBar
+};

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

@@ -1,3 +1,125 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("react"),t=require("styled-components"),a=t.styled.label`
-  ${({theme:e})=>`\n    align-items: center;\n    display: flex;\n    color: ${e.palette.gray[600]};\n    cursor: pointer;\n    font-family: ${e.typography.type.primary};\n    font-size: ${e.typography.text.sm};\n    font-weight: ${e.typography.weight.regular};\n    gap: ${e.spacing[.5]};\n    line-height: ${e.typography.text.lg};\n    text-align: left;\n    position: relative;\n\n    &[aria-disabled="true"] {\n      color: ${e.palette.gray[300]};\n      cursor: not-allowed;\n    }\n\n    input {\n      position: absolute;\n      opacity: 0;\n      cursor: pointer;\n      width: 0;\n    }\n\n    .checkmark {\n      position: relative;\n      top: 0;\n      left: 0;\n      height: 16px;\n      width: 16px;\n      background-color: ${e.palette.white};\n      border-radius: 50%;\n      border: 1px solid ${e.palette.gray[600]};\n    }\n\n    input:disabled ~ .checkmark {\n      border: 1px solid ${e.palette.gray[300]};\n      background-color: ${e.palette.white};\n      cursor: not-allowed;\n    }\n\n    input:not(:disabled):checked ~ .checkmark {\n      background-color: ${e.palette.white};\n      border: 1px solid ${e.palette.primary[500]};\n    }\n\n    input:not(:disabled):hover ~ .checkmark {\n      background-color: ${e.palette.white};\n      box-shadow: 0 0 0 4px ${e.palette.gray[100]};\n    }\n\n    input:not(:disabled):hover:checked ~ .checkmark {\n      background-color: ${e.palette.white};\n      box-shadow: 0 0 0 4px ${e.palette.primary[50]};\n    }\n\n    .checkmark::after {\n      content: "";\n      position: absolute;\n      display: none;\n      top: 3px;\n      left: 3px;\n      width: 8px;\n      height: 8px;\n      border-radius: 50%;\n      background: ${e.palette.primary[500]};\n    }\n\n    input:checked ~ .checkmark::after {\n      display: block;\n    }\n\n    input:disabled:checked ~ .checkmark::after {\n      background-color: ${e.palette.gray[300]};\n    }\n\n  `}
-`,r=t.styled.span.attrs({className:"checkmark"})``,o=n.forwardRef((function({defaultChecked:n=!1,disabled:t=!1,label:o,name:i,onChange:l,onClick:p,value:d,...c},s){return e.jsxs(a,{"aria-disabled":t,"aria-label":i,role:"radiogroup",children:[e.jsx("input",{"aria-checked":n,"aria-disabled":t,"aria-label":i,defaultChecked:n,disabled:t,name:i,onChange:l,onClick:p,ref:s,type:"radio",value:d,...c}),e.jsx(r,{}),o??null]})}));exports.RadioButton=o;
+import { jsxs as k, jsx as e } from "react/jsx-runtime";
+import { forwardRef as u } from "react";
+import { styled as i } from "styled-components";
+const g = i.label`
+  ${({ theme: r }) => `
+    align-items: center;
+    display: flex;
+    color: ${r.palette.gray[600]};
+    cursor: pointer;
+    font-family: ${r.typography.type.primary};
+    font-size: ${r.typography.text.sm};
+    font-weight: ${r.typography.weight.regular};
+    gap: ${r.spacing[0.5]};
+    line-height: ${r.typography.text.lg};
+    text-align: left;
+    position: relative;
+
+    &[aria-disabled="true"] {
+      color: ${r.palette.gray[300]};
+      cursor: not-allowed;
+    }
+
+    input {
+      position: absolute;
+      opacity: 0;
+      cursor: pointer;
+      width: 0;
+    }
+
+    .checkmark {
+      position: relative;
+      top: 0;
+      left: 0;
+      height: 16px;
+      width: 16px;
+      background-color: ${r.palette.white};
+      border-radius: 50%;
+      border: 1px solid ${r.palette.gray[600]};
+    }
+
+    input:disabled ~ .checkmark {
+      border: 1px solid ${r.palette.gray[300]};
+      background-color: ${r.palette.white};
+      cursor: not-allowed;
+    }
+
+    input:not(:disabled):checked ~ .checkmark {
+      background-color: ${r.palette.white};
+      border: 1px solid ${r.palette.primary[500]};
+    }
+
+    input:not(:disabled):hover ~ .checkmark {
+      background-color: ${r.palette.white};
+      box-shadow: 0 0 0 4px ${r.palette.gray[100]};
+    }
+
+    input:not(:disabled):hover:checked ~ .checkmark {
+      background-color: ${r.palette.white};
+      box-shadow: 0 0 0 4px ${r.palette.primary[50]};
+    }
+
+    .checkmark::after {
+      content: "";
+      position: absolute;
+      display: none;
+      top: 3px;
+      left: 3px;
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: ${r.palette.primary[500]};
+    }
+
+    input:checked ~ .checkmark::after {
+      display: block;
+    }
+
+    input:disabled:checked ~ .checkmark::after {
+      background-color: ${r.palette.gray[300]};
+    }
+
+  `}
+`, b = i.span.attrs({ className: "checkmark" })``, $ = u(function({
+  defaultChecked: t = !1,
+  disabled: a = !1,
+  label: l,
+  name: o,
+  onChange: p,
+  onClick: c,
+  value: d,
+  ...n
+}, s) {
+  return /* @__PURE__ */ k(
+    g,
+    {
+      "aria-disabled": a,
+      "aria-label": o,
+      role: "radiogroup",
+      children: [
+        /* @__PURE__ */ e(
+          "input",
+          {
+            "aria-checked": t,
+            "aria-disabled": a,
+            "aria-label": o,
+            defaultChecked: t,
+            disabled: a,
+            name: o,
+            onChange: p,
+            onClick: c,
+            ref: s,
+            type: "radio",
+            value: d,
+            ...n
+          }
+        ),
+        /* @__PURE__ */ e(b, {}),
+        l ?? null
+      ]
+    }
+  );
+});
+export {
+  $ as RadioButton
+};

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

@@ -1,6 +1,42 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),o=require("styled-components"),r=require("../icon-button/index.js"),l=o.styled.div.attrs({className:"comp-scroll-up"})`
+import { jsx as s } from "react/jsx-runtime";
+import { useState as i, useEffect as p, useCallback as m } from "react";
+import { styled as a } from "styled-components";
+import { IconButton as u } from "../icon-button/index.js";
+const d = a.div.attrs({
+  className: "comp-scroll-up"
+})`
   bottom: 15px;
   position: fixed;
   right: 140px;
   z-index: 100;
-`;exports.ScrollUpButton=({scrollerId:o="dashboard",visibleAt:s=500})=>{const[n,i]=t.useState(!1),[c,u]=t.useState(null);t.useEffect((()=>{u(document.getElementById(o)),null==c||c.addEventListener("scroll",(()=>{i(c.scrollTop>s)}))}),[c,o,s]);const d=t.useCallback((()=>{null==c||c.scrollTo({behavior:"smooth",top:0})}),[c]);return n?e.jsx(l,{children:e.jsx(r.IconButton,{height:"40px",icon:"arrow-up",iconSize:"sm",id:"scroll-up",onClick:d,width:"40px"})}):null};
+`, g = ({
+  scrollerId: t = "dashboard",
+  visibleAt: e = 500
+}) => {
+  const [n, l] = i(!1), [o, r] = i(null);
+  p(() => {
+    r(document.getElementById(t)), o == null || o.addEventListener("scroll", () => {
+      l(o.scrollTop > e);
+    });
+  }, [o, t, e]);
+  const c = m(() => {
+    o == null || o.scrollTo({
+      behavior: "smooth",
+      top: 0
+    });
+  }, [o]);
+  return n ? /* @__PURE__ */ s(d, { children: /* @__PURE__ */ s(
+    u,
+    {
+      height: "40px",
+      icon: "arrow-up",
+      iconSize: "sm",
+      id: "scroll-up",
+      onClick: c,
+      width: "40px"
+    }
+  ) }) : null;
+};
+export {
+  g as ScrollUpButton
+};

package/dist/components/search/index.js

@@ -1,7 +1,105 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("../../index-CmylnDrF.js"),t=require("lodash"),r=require("react"),i=require("styled-components"),o=require("../icon/index.js"),a=require("../icon-button/index.js"),s=require("../../use-click-outside-BqkLISED.js"),l=i.styled.input`
-  ${({theme:e})=>`\n    background: none;\n    border: none !important;\n    box-shadow: none;\n    box-sizing: border-box;\n    color: ${e.palette.gray[800]};\n    font-family: ${e.typography.type.primary};\n    font-size: ${e.typography.text.sm};\n    outline: none;\n    width: 100%;\n\n    &::placeholder {\n      color: ${e.palette.gray[400]};\n    }\n  `}
-`,c=i.styled.div`
-  ${({theme:e})=>`\n    align-items: center;\n    background-color: ${e.palette.white};\n    border: 1px solid ${e.palette.gray[300]};\n    border-radius: ${e.spacing[.5]};\n    display: flex;\n    height: 40px;\n    gap: ${e.spacing[.5]};\n    padding: ${e.spacing[.5]};\n    width: 100%;\n\n    &:hover {\n      border-color: ${e.palette.gray[600]};\n    }\n\n    &:focus-within {\n      border: 2px solid ${e.palette.black};\n    }\n  `}
-`,d=i.styled.div`
-  ${({theme:e})=>`\n    background-color: ${e.palette.white};\n    border-radius: ${e.spacing[.5]};\n    width: 250px;\n  `}
-`,p=r.forwardRef((function({name:p,smallSearch:g=!1,value:u,...y},h){const x=i.useTheme(),[f,m]=r.useState(!1),{refs:b,floatingStyles:$}=n.useFloating(),j=r.useCallback((()=>{m((e=>!e))}),[]);s.useClickOutside(b.floating.current,(()=>{m(!1)}),!0);const k=e.jsxs(c,{children:[e.jsx(o.Icon,{icon:"magnifying-glass",iconColor:x.palette.gray[700],iconSize:"xs",iconType:"fa-light"}),e.jsx(l,{...y,id:p,name:p,ref:h,value:u}),!t.isEmpty(u)&&e.jsx(a.IconButton,{icon:"xmark",iconColor:x.palette.gray[300],iconSize:"xs",iconType:"fa-light",px:.25,py:.25,type:"reset",variant:"ghost"})]});return g?e.jsxs(r.Fragment,{children:[e.jsx(a.IconButton,{border:`1px solid ${x.palette.gray[300]} !important`,icon:"magnifying-glass",iconSize:"xs",iconType:"fa-light",onClick:j,ref:b.setReference,variant:"ghost"}),f?e.jsx(d,{ref:b.setFloating,style:$,children:k}):void 0]}):k}));exports.Search=p;
+import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import { u as h } from "../../index-DwznImvK.mjs";
+import { isEmpty as $ } from "lodash";
+import { forwardRef as b, useState as w, useCallback as S, Fragment as k } from "react";
+import { styled as i, useTheme as C } from "styled-components";
+import { Icon as z } from "../icon/index.js";
+import { IconButton as c } from "../icon-button/index.js";
+import { u as O } from "../../use-click-outside-BUll8Ag-.mjs";
+const v = i.input`
+  ${({ theme: o }) => `
+    background: none;
+    border: none !important;
+    box-shadow: none;
+    box-sizing: border-box;
+    color: ${o.palette.gray[800]};
+    font-family: ${o.typography.type.primary};
+    font-size: ${o.typography.text.sm};
+    outline: none;
+    width: 100%;
+
+    &::placeholder {
+      color: ${o.palette.gray[400]};
+    }
+  `}
+`, I = i.div`
+  ${({ theme: o }) => `
+    align-items: center;
+    background-color: ${o.palette.white};
+    border: 1px solid ${o.palette.gray[300]};
+    border-radius: ${o.spacing[0.5]};
+    display: flex;
+    height: 40px;
+    gap: ${o.spacing[0.5]};
+    padding: ${o.spacing[0.5]};
+    width: 100%;
+
+    &:hover {
+      border-color: ${o.palette.gray[600]};
+    }
+
+    &:focus-within {
+      border: 2px solid ${o.palette.black};
+    }
+  `}
+`, T = i.div`
+  ${({ theme: o }) => `
+    background-color: ${o.palette.white};
+    border-radius: ${o.spacing[0.5]};
+    width: 250px;
+  `}
+`, G = b(function({ name: n, smallSearch: d = !1, value: a, ...g }, f) {
+  const t = C(), [y, s] = w(!1), { refs: e, floatingStyles: u } = h(), m = S(() => {
+    s((x) => !x);
+  }, []);
+  O(
+    e.floating.current,
+    () => {
+      s(!1);
+    },
+    !0
+  );
+  const p = /* @__PURE__ */ l(I, { children: [
+    /* @__PURE__ */ r(
+      z,
+      {
+        icon: "magnifying-glass",
+        iconColor: t.palette.gray[700],
+        iconSize: "xs",
+        iconType: "fa-light"
+      }
+    ),
+    /* @__PURE__ */ r(v, { ...g, id: n, name: n, ref: f, value: a }),
+    !$(a) && /* @__PURE__ */ r(
+      c,
+      {
+        icon: "xmark",
+        iconColor: t.palette.gray[300],
+        iconSize: "xs",
+        iconType: "fa-light",
+        px: 0.25,
+        py: 0.25,
+        type: "reset",
+        variant: "ghost"
+      }
+    )
+  ] });
+  return d ? /* @__PURE__ */ l(k, { children: [
+    /* @__PURE__ */ r(
+      c,
+      {
+        border: `1px solid ${t.palette.gray[300]} !important`,
+        icon: "magnifying-glass",
+        iconSize: "xs",
+        iconType: "fa-light",
+        onClick: m,
+        ref: e.setReference,
+        variant: "ghost"
+      }
+    ),
+    y ? /* @__PURE__ */ r(T, { ref: e.setFloating, style: u, children: p }) : void 0
+  ] }) : p;
+});
+export {
+  G as Search
+};