@fluidattacks/design 3.1.13 → 3.2.0

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

@@ -1,67 +1,6 @@
-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 })
-        ] })
-      ]
-    }
-  );
-};
+import "react/jsx-runtime";
+import "styled-components";
+import { bt as e } from "../../../components-C7JPRIEW.mjs";
 export {
-  j as MenuItem
+  e as MenuItem
 };

package/dist/components/slider/index.js

@@ -1,124 +1,9 @@
-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) }) })
-  ] });
-};
+import "react/jsx-runtime";
+import "react";
+import "react-aria";
+import "react-stately";
+import "styled-components";
+import { aw as e } from "../../components-C7JPRIEW.mjs";
 export {
-  D as Slider
+  e as Slider
 };

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

@@ -1,17 +1,7 @@
-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 }) }) });
-};
+import "react/jsx-runtime";
+import "react";
+import "react-aria";
+import { bu as i } from "../../../components-C7JPRIEW.mjs";
 export {
-  g as Thumb
+  i as Thumb
 };

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

@@ -1,159 +1,6 @@
-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: t }) => t.spacing[2]};
-
-  &:last-child > div:first-child > span::after {
-    display: none;
-  }
-`, 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);
-  }) });
-};
+import "react/jsx-runtime";
+import "react";
+import { ax as a } from "../../components-C7JPRIEW.mjs";
 export {
-  J as StepLapse
+  a as StepLapse
 };

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

@@ -1,97 +1,6 @@
-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 })
-  ] });
-};
+import "react/jsx-runtime";
+import "styled-components";
+import { ay as m } from "../../components-C7JPRIEW.mjs";
 export {
-  v as TableButton
+  m as TableButton
 };

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

@@ -1,29 +1,5 @@
-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}`
-  )
-) });
+import "react/jsx-runtime";
+import { az as e } from "../../../components-C7JPRIEW.mjs";
 export {
-  h as FixedTabs
+  e as FixedTabs
 };

package/dist/components/tabs/index.js

@@ -1,57 +1,8 @@
-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
-        )
-      )
-    }
-  );
-};
+import "react/jsx-runtime";
+import "styled-components";
+import { az as b, aB as i, aA as m } from "../../components-C7JPRIEW.mjs";
 export {
-  w as FixedTabs,
-  u as Tab,
-  b as Tabs
+  b as FixedTabs,
+  i as Tab,
+  m as Tabs
 };

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

@@ -1,39 +1,5 @@
-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
-        }
-      )
-    ]
-  }
-) });
+import "react/jsx-runtime";
+import { aB as m } from "../../../components-C7JPRIEW.mjs";
 export {
-  N as Tab
+  m as Tab
 };