@fluidattacks/design 3.1.12 → 3.1.13

package/dist/{styles-Cx93EcVo.mjs → styles-CROOwXEH.mjs}

@@ -1,5 +1,5 @@
-import { styled as t } from "styled-components";
-const i = t.div`
+import { styled as i } from "styled-components";
+const t = i.div`
   ${({ theme: n }) => `
     background-color: ${n.palette.gray[100]};
     border-radius: ${n.spacing[0.25]};
@@ -51,7 +51,7 @@ const i = t.div`
       padding-bottom: unset;
     }
   `}
-`, o = t.div`
+`, a = i.div`
   ${({ theme: n }) => `
     align-items: end;
     background-color: ${n.palette.gray[100]};
@@ -71,6 +71,6 @@ const i = t.div`
   `}
 `;
 export {
-  o as B,
-  i as C
+  a as B,
+  t as C
 };

package/dist/styles-CplEd2kw.mjs

@@ -0,0 +1,228 @@
+import { styled as g } from "styled-components";
+import { theme as n } from "./components/colors/index.js";
+const G = [
+  // IPaddingModifiable
+  "padding",
+  "px",
+  "py",
+  "pl",
+  "pr",
+  "pt",
+  "pb",
+  // IMarginModifiable
+  "margin",
+  "mx",
+  "my",
+  "ml",
+  "mr",
+  "mt",
+  "mb",
+  // IPositionModifiable
+  "zIndex",
+  "position",
+  "top",
+  "right",
+  "bottom",
+  "left",
+  // IBorderModifiable
+  "border",
+  "borderTop",
+  "borderRight",
+  "borderBottom",
+  "borderLeft",
+  "borderColor",
+  "borderRadius",
+  // IDisplayModifiable
+  "scroll",
+  "visibility",
+  "display",
+  "height",
+  "width",
+  "maxHeight",
+  "maxWidth",
+  "minHeight",
+  "minWidth",
+  "shadow",
+  "bgColor",
+  "bgGradient",
+  "gap",
+  "flexDirection",
+  "flexGrow",
+  "justify",
+  "justifySelf",
+  "alignItems",
+  "alignSelf",
+  "wrap",
+  // ITextModifiable
+  "color",
+  "fontFamily",
+  "fontSize",
+  "fontWeight",
+  "textAlign",
+  "whiteSpace",
+  "letterSpacing",
+  "lineSpacing",
+  "textDecoration",
+  "textOverflow",
+  "whiteSpace",
+  "wordBreak",
+  "wordWrap",
+  // IInteractionModifiable
+  "cursor",
+  "transition",
+  "borderColorHover",
+  "bgColorHover",
+  "shadowHover"
+], o = (t, e) => e === void 0 ? "" : `${t}: ${e};`, $ = (t) => {
+  const e = t.py ?? t.pt ?? 0, i = t.px ?? t.pr ?? 0, r = t.py ?? t.pb ?? 0, c = t.px ?? t.pl ?? 0;
+  if (t.padding) {
+    const [a, s, d, l] = t.padding;
+    return `padding: ${n.spacing[a]} ${n.spacing[s]} ${n.spacing[d]} ${n.spacing[l]};`;
+  }
+  return `padding: ${n.spacing[e]} ${n.spacing[i]} ${n.spacing[r]} ${n.spacing[c]};`;
+}, f = (t) => {
+  const e = t.my ?? t.mt ?? 0, i = t.mx ?? t.mr ?? 0, r = t.my ?? t.mb ?? 0, c = t.mx ?? t.ml ?? 0;
+  if (t.margin) {
+    const [a, s, d, l] = t.margin;
+    return `margin: ${n.spacing[a]} ${n.spacing[s]} ${n.spacing[d]} ${n.spacing[l]};`;
+  }
+  return `margin: ${n.spacing[e]} ${n.spacing[i]} ${n.spacing[r]} ${n.spacing[c]};`;
+}, h = (t) => {
+  const e = o("position", t.position), i = o("top", t.top), r = o("right", t.right), c = o("bottom", t.bottom), a = o("left", t.left), s = o("z-index", t.zIndex);
+  return `
+    ${e}
+    ${i}
+    ${r}
+    ${c}
+    ${a}
+    ${s}
+  `;
+}, m = (t) => {
+  const e = o("border", t.border), i = o("border-top", t.borderTop), r = o("border-right", t.borderRight), c = o("border-bottom", t.borderBottom), a = o("border-left", t.borderLeft), s = o("border-color", t.borderColor), d = o("border-radius", t.borderRadius);
+  return `
+    ${e}
+    ${i}
+    ${r}
+    ${c}
+    ${a}
+    ${s}
+    ${d}
+  `;
+}, R = (t) => t.includes("x") ? "overflow-x: auto;" : "", P = (t) => t.includes("y") ? "overflow-y: auto;" : "", b = (t) => {
+  const e = t.scroll ? `
+      ${R(t.scroll)}
+      ${P(t.scroll)}
+    ` : "", i = o("visibility", t.visibility), r = o("display", t.display), c = o("height", t.height), a = o("width", t.width), s = o("max-height", t.maxHeight), d = o("max-width", t.maxWidth), l = o("min-height", t.minHeight), y = o("min-width", t.minWidth), S = o(
+    "box-shadow",
+    t.shadow ? n.shadows[t.shadow] : void 0
+  ), v = o(
+    "gap",
+    t.gap === void 0 ? void 0 : n.spacing[t.gap]
+  ), C = o("background-color", t.bgColor), H = o("background", t.bgGradient), B = o("flex-direction", t.flexDirection), W = o("flex-grow", t.flexGrow), j = o("justify-content", t.justify), k = o("justify-self", t.justifySelf), z = o("align-items", t.alignItems), I = o("align-self", t.alignSelf), D = o("flex-wrap", t.wrap);
+  return `
+    ${e}
+    ${i}
+    ${r}
+    ${c}
+    ${a}
+    ${s}
+    ${d}
+    ${l}
+    ${y}
+    ${S}
+    ${C}
+    ${H}
+    ${v}
+    ${B}
+    ${W}
+    ${j}
+    ${k}
+    ${z}
+    ${I}
+    ${D}
+  `;
+}, w = (t) => {
+  const e = o("color", t.color), i = o("font-family", t.fontFamily), r = o("font-size", t.fontSize), c = o("font-weight", t.fontWeight), a = o("line-spacing", t.letterSpacing), s = o("line-height", t.lineSpacing), d = o("text-align", t.textAlign), l = o("text-decoration", t.textDecoration), y = o("text-overflow", t.textOverflow), S = o("white-space", t.whiteSpace), v = o("word-break", t.wordBreak), C = o("word-wrap", t.wordWrap);
+  return `
+    ${e}
+    ${i}
+    ${r}
+    ${c}
+    ${a}
+    ${s}
+    ${d}
+    ${l}
+    ${y}
+    ${S}
+    ${v}
+    ${C}
+  `;
+}, x = (t) => {
+  const e = o("cursor", t.cursor), i = o("border-color", t.borderColorHover), r = o("background-color", t.bgColorHover), c = o(
+    "box-shadow",
+    t.shadowHover === void 0 ? void 0 : n.shadows[t.shadowHover]
+  ), a = o("transition", t.transition);
+  return `
+    ${e}
+
+    &:hover {
+      ${a || "transition: all 0.2s;"}
+      ${i}
+      ${r}
+      ${c}
+    }
+  `;
+}, u = () => ({
+  shouldForwardProp: (t) => !G.includes(t)
+}), A = g.div.withConfig(u())`
+  ${$}
+  ${f}
+  ${h}
+  ${b}
+  ${w}
+  ${m}
+  ${x}
+`, L = g.button.withConfig(
+  u()
+)`
+  ${$}
+  ${f}
+  ${h}
+  ${b}
+  ${w}
+  ${m}
+  ${x}
+`, O = g.p.withConfig(u())`
+  ${$}
+  ${f}
+  ${h}
+  ${b}
+  ${w}
+  ${m}
+  ${x}
+`, M = g.span.withConfig(
+  u()
+)`
+  ${$}
+  ${f}
+  ${h}
+  ${b}
+  ${w}
+  ${m}
+  ${x}
+`;
+export {
+  A as B,
+  L as a,
+  O as b,
+  M as c,
+  w as d,
+  f as e,
+  x as f,
+  h as g,
+  G as h,
+  b as i,
+  m as j,
+  u as k,
+  $ as s
+};

package/dist/styles-D1eTIklB.mjs

@@ -0,0 +1,110 @@
+import { styled as i, css as e } from "styled-components";
+import { a as s } from "./styles-CplEd2kw.mjs";
+import "react/jsx-runtime";
+const d = i(s)`
+  align-items: center;
+  background-color: inherit;
+  border-color: inherit;
+  display: flex;
+  height: 38px;
+  justify-content: center;
+  width: 40px;
+  margin: ${({ $margin: t = "0" }) => e`
+    ${t}
+  `};
+
+  &:hover:not(:disabled) {
+    background-color: ${({ theme: t }) => t.palette.gray[100]};
+    cursor: pointer;
+  }
+`, g = i.div`
+  ${({ theme: t }) => `
+    align-items: flex-start;
+    background: ${t.palette.white};
+    border: 1px solid ${t.palette.gray[200]};
+    border-radius: ${t.spacing[0.5]};
+    box-shadow: ${t.shadows.md};
+    display: inline-flex;
+    flex-direction: column;
+    gap: ${t.spacing[0.25]};
+    height: auto;
+    padding: ${t.spacing[0.25]};
+    width: 292px;
+  `}
+`, u = i.button`
+  ${({ theme: t, $disabled: o, $focus: a, $header: n }) => {
+  const r = a ? "34px" : "40px";
+  return `
+      align-items: center;
+      border-radius: ${n ? `0 ${t.spacing[0.5]} ${t.spacing[0.5]} 0` : "4px"};
+      border-left: inherit;
+      display: flex;
+      height: ${n ? "38px" : r};
+      justify-content: center;
+      outline: none;
+      width: ${n ? "38px" : "40px"};
+
+      &:hover {
+        background-color: ${t.palette.gray[o ? 500 : 100]};
+      }
+    `;
+}}
+`, $ = i.div`
+  ${({ theme: t }) => `
+    align-items: center;
+    background: transparent;
+    border-radius: ${t.spacing[0.5]} 0 0 ${t.spacing[0.5]};
+    border-color: inherit;
+    display: flex;
+    height: 100%;
+    justify-content: space-between;
+    width: calc(100% - 40px);
+  `}
+`, x = i.div`
+  align-items: center;
+  display: flex;
+  justify-content: flex-end;
+  gap: ${({ theme: t }) => t.spacing[0.5]};
+  flex: 1 0 0;
+`, y = i.div`
+  ${({ theme: t }) => `
+    align-items: center;
+    align-self: stretch;
+    background-color: ${t.palette.gray[200]};
+    border-radius: ${t.spacing[0.25]};
+    display: flex;
+    font-family: ${t.typography.type.primary};
+    gap: ${t.spacing[0.25]};
+    line-height: ${t.spacing[1.5]};
+    padding: 2px ${t.spacing[0.25]};
+  `}
+`, b = i.button`
+  ${({ theme: t }) => `
+    align-items: center;
+    background-color: inherit;
+    border: 0.5px solid ${t.palette.gray[200]};
+    border-radius: 7px;
+    color: ${t.palette.gray[800]};
+    cursor: pointer;
+    display: flex;
+    font-weight: ${t.typography.weight.regular};
+    justify-content: center;
+    gap: 10px;
+    padding: 2px 10px;
+
+    &#active {
+      background-color: ${t.palette.white};
+      box-shadow: ${t.shadows.md};
+      font-weight: ${t.typography.weight.bold};
+    }
+  `}
+`;
+export {
+  u as C,
+  g as D,
+  $ as I,
+  d as S,
+  x as T,
+  y as a,
+  b
+};

package/dist/styles-ePGii_9g.mjs

@@ -0,0 +1,74 @@
+import { NavLink as o } from "react-router-dom";
+import { styled as t } from "styled-components";
+const p = t.button`
+  ${({ theme: a }) => `
+    align-items: center;
+    color: ${a.palette.gray[500]};
+    display: flex;
+    gap: ${a.spacing[0.625]};
+    justify-content: center;
+    padding: ${a.spacing[0.75]};
+    text-align: center;
+    width: 151px;
+
+    &.active {
+      color: ${a.palette.gray[800]};
+      border-bottom: 3px solid ${a.palette.primary[400]};
+    }
+
+    &:hover {
+      color: ${a.palette.gray[800]};
+    }
+  `}
+`, n = t.div`
+  ${({ theme: a }) => `
+    align-items: center;
+    border-bottom: 2px solid ${a.palette.gray[200]};
+    display: flex;
+    gap: ${a.spacing[3]};
+    height: ${a.spacing[3]};
+    width: max-content;
+  `}
+`, l = t(o)`
+  ${({ theme: a }) => `
+    align-items: center;
+    background: transparent;
+    cursor: pointer;
+    color: ${a.palette.gray[800]};
+    font-family: ${a.typography.type.primary};
+    font-size: ${a.typography.text.sm};
+    display: flex;
+    font-weight: ${a.typography.weight.regular};
+    padding: ${a.spacing[0.625]} ${a.spacing[0.5]};
+    position: relative;
+    text-align: center;
+    text-decoration: unset;
+
+    &:disabled {
+      cursor: not-allowed;
+      background-color: ${a.palette.gray[300]};
+      color: ${a.palette.gray[300]};
+    }
+
+    &:hover:not([disabled]) {
+      background-color: ${a.palette.gray[100]};
+      color: ${a.palette.gray[800]};
+    }
+
+    &.active {
+      background-color: transparent;
+      border-bottom: solid 4px ${a.palette.primary[500]};
+      padding-bottom: calc(${a.spacing[0.625]} - 4px);
+
+      &:hover {
+        background-color: transparent;
+        border-bottom: solid 4px ${a.palette.primary[500]};
+      }
+    }
+  `}
+`;
+export {
+  n as S,
+  l as T,
+  p as a
+};

package/dist/use-carousel-CgAF78h3.mjs

@@ -0,0 +1,23 @@
+import { useState as n, useEffect as a } from "react";
+const m = (t, r) => {
+  const [g, o] = n(0), [e, c] = n(0);
+  return a(() => {
+    e === 100 && (() => {
+      o(
+        (s) => s === r - 1 ? 0 : s + 1
+      );
+    })();
+  }, [e, r]), a(() => {
+    const i = setInterval(() => {
+      c(
+        (s) => s === 100 ? 0 : s + 1
+      );
+    }, t);
+    return () => {
+      clearInterval(i);
+    };
+  }, [t]), { cycle: g, progress: e, setCycle: o, setProgress: c };
+};
+export {
+  m as u
+};

package/dist/use-click-outside-BUll8Ag-.mjs

@@ -0,0 +1,18 @@
+import { useEffect as i } from "react";
+const s = (r, c, n = !1) => {
+  i(() => {
+    var o;
+    const e = (t) => {
+      r && !r.contains(t.target) && c();
+    };
+    return n ? (document.addEventListener("click", e, !0), () => {
+      document.removeEventListener("click", e, !0);
+    }) : ((o = document.getElementById("root")) == null || o.addEventListener("click", e, !0), () => {
+      var t;
+      (t = document.getElementById("root")) == null || t.removeEventListener("click", e, !0);
+    });
+  }, [n, r, c]);
+};
+export {
+  s as u
+};