@fluidattacks/design 3.1.12 → 3.1.13

package/dist/use-modal-CtgexKnf.mjs

@@ -0,0 +1,14 @@
+import { useState as r, useCallback as s } from "react";
+const p = (t) => {
+  const [o, e] = r(!1), n = s(() => {
+    e(!0);
+  }, []), a = s(() => {
+    e(!1);
+  }, []), c = s(() => {
+    e((l) => !l);
+  }, []);
+  return { close: a, isOpen: o, name: t, open: n, setIsOpen: e, toggle: c };
+};
+export {
+  p as u
+};

package/dist/use-search-Dj47QDw9.mjs

@@ -0,0 +1,15 @@
+import { useMemo as u, useState as d } from "react";
+import r from "lodash";
+const s = (e, o) => u(
+  () => r.debounce(e, o),
+  [e, o]
+), a = (e) => {
+  const [o, c] = d(), t = s((n) => {
+    c(n);
+  }, (e == null ? void 0 : e.debounceWait) ?? 300);
+  return [o, t];
+};
+export {
+  a,
+  s as u
+};

package/dist/utils-V0EumEPM.mjs

@@ -0,0 +1,6 @@
+const e = (a) => ({
+  getVariant: (t, r) => a(t)[r]
+});
+export {
+  e as v
+};

package/package.json

@@ -25,7 +25,6 @@
   },
   "description": "Fluidattacks core components library",
   "devDependencies": {
-    "@rollup/plugin-terser": "0.4.4",
     "@storybook/addon-a11y": "8.4.7",
     "@storybook/addon-essentials": "8.4.7",
     "@storybook/addon-interactions": "8.4.7",
@@ -56,7 +55,6 @@
     "postcss": "8.4.49",
     "postcss-styled-syntax": "0.7.0",
     "remark-gfm": "4.0.0",
-    "rollup-plugin-visualizer": "5.12.0",
     "storybook": "8.4.7",
     "stylelint": "16.12.0",
     "stylelint-config-standard": "36.0.1",
@@ -119,5 +117,5 @@
     "test-storybook": "test-storybook"
   },
   "typings": "./dist/index.d.ts",
-  "version": "3.1.12"
+  "version": "3.1.13"
 }

package/dist/index-38JqtnAI.mjs

@@ -1,122 +0,0 @@
-import { jsx as t } from "react/jsx-runtime";
-import { styled as e } from "styled-components";
-import "./components/typography/heading/index.js";
-import "./components/typography/span/index.js";
-import { Text as i } from "./components/typography/text/index.js";
-const l = e.button`
-  ${({ theme: n }) => `
-    align-items: center;
-    border-left: 3px solid transparent;
-    display: flex;
-    gap: ${n.spacing[0.625]};
-    height: 42px;
-    min-width: 50px;
-    padding: ${n.spacing[0.625]} ${n.spacing[1]};
-
-    &.dark {
-      background-color: ${n.palette.gray[800]};
-      color: ${n.palette.gray[25]};
-
-      &.disabled {
-        border-color: ${n.palette.gray[500]};
-        color: ${n.palette.gray[500]};
-        cursor: not-allowed;
-      }
-
-      &:hover:not(.disabled) {
-        background-color: ${n.palette.gray[700]};
-        border-color: ${n.palette.primary[400]};
-      }
-    }
-
-    &.light {
-      background-color: ${n.palette.gray[50]};
-      color: ${n.palette.gray[800]};
-
-      &.disabled {
-        background-color: ${n.palette.white};
-        border-color: ${n.palette.gray[300]};
-        color: ${n.palette.gray[300]};
-        cursor: not-allowed;
-      }
-
-      &:hover:not(.disabled) {
-        background-color: ${n.palette.gray[100]};
-        border-color: ${n.palette.primary[400]};
-      }
-    }
-  `}
-`, $ = e.div`
-  ${({ theme: n }) => `
-    align-items: center;
-    background-color: transparent;
-    border-bottom: 2px solid transparent;
-    display: flex;
-    font-family: ${n.typography.type.primary};
-    font-size: ${n.typography.text.sm};
-    font-weight: ${n.typography.weight.regular};
-    gap: ${n.spacing[0.5]};
-    height: 30px;
-    justify-content: center;
-    padding: ${n.spacing[0.25]};
-    margin-bottom: ${n.spacing[0.25]};
-    min-width: 50px;
-    width: max-content;
-    z-index: 11;
-
-    &:hover {
-      border-color: ${n.palette.primary[400]};
-    }
-
-    &.dark {
-      color: ${n.palette.gray[25]};
-    }
-
-    &.light {
-      color: ${n.palette.gray[800]};
-    }
-  `}
-`, m = e.div`
-  ${({ theme: n }) => `
-    background-color: ${n.palette.white};
-    border-radius: 0 0 ${n.spacing[0.25]} ${n.spacing[0.25]};
-    box-shadow: ${n.shadows.lg};
-    display: none;
-    flex-direction: column;
-    position: absolute;
-    top: 100%;
-    z-index: 11;
-
-    > button:last-child {
-      border-radius: 0 0 ${n.spacing[0.25]} ${n.spacing[0.25]};
-    }
-  `}
-`, h = e.div`
-  ${({ theme: n }) => `
-    align-items: flex-start;
-    cursor: pointer;
-    display: flex;
-    flex-direction: column;
-    gap: ${n.spacing[0.25]};
-    height: max-content;
-    position: relative;
-    width: max-content;
-    z-index: 10;
-
-    &:hover {
-      > div:first-child {
-        border-color: ${n.palette.primary[400]};
-      }
-
-      > div:last-child {
-        display: flex;
-      }
-    }
-  `}
-`, y = ({ disabled: n = !1, mode: o, onClick: r, text: a }) => t(l, { className: `${n && "disabled"} ${o}`, disabled: n, onClick: r, children: t(i, { color: "inherit", size: "sm", sizeSm: "xs", children: a }) });
-export {
-  y as I,
-  h as S,
-  $ as a,
-  m as b
-};

package/dist/index-B5yoGFs6.mjs

@@ -1,54 +0,0 @@
-import { jsxs as d, jsx as r } from "react/jsx-runtime";
-import { useCallback as s } from "react";
-import { styled as a, useTheme as l } from "styled-components";
-import { Icon as p } from "./components/icon/index.js";
-import "./components/typography/heading/index.js";
-import "./components/typography/span/index.js";
-import { Text as c } from "./components/typography/text/index.js";
-const f = a.div`
-  ${({ theme: e, $itemsLength: n }) => `
-    display: flex;
-    background-color: ${e.palette.white};
-    border: 1px solid ${e.palette.gray[200]};
-    border-radius: ${e.spacing[0.25]};
-    box-shadow: ${e.shadows.lg};
-    flex-direction: column;
-    min-width: 507px;
-    max-width: ${n <= 4 ? "507px" : "980px"};
-    padding: ${e.spacing[1.5]};
-
-    @media screen and (max-width: 980px) and (min-width: 742px) {
-      width: 742px;
-    }
-    @media screen and (max-width: 742px) {
-      width: 507px;
-    }
-  `}
-`, m = a.div`
-  ${({ theme: e, $isSelected: n }) => `
-    align-items: center;
-    background-color: ${n ? e.palette.gray[100] : e.palette.white};
-    border: 1px solid ${e.palette.gray[200]};
-    border-radius: ${e.spacing[0.25]};
-    cursor: pointer;
-    display: flex;
-    flex-direction: ${n ? "row-reverse" : "row"};
-    min-height: 50px;
-    padding: ${e.spacing[1]} ${e.spacing[0.625]};
-    width: 215px;
-
-    &:hover {
-      background-color: ${e.palette.gray[100]};
-    }
-  `}
-`, y = ({ isSelected: e = !1, label: n, onSelect: i }) => {
-  const t = l(), o = s(() => {
-    i && i(n);
-  }, [i, n]);
-  return d(m, { $isSelected: e, onClick: o, children: [e ? r(p, { icon: "check", iconColor: t.palette.gray[800], iconSize: "md" }) : null, r(c, { color: t.palette.gray[800], fontWeight: "bold", size: "sm", children: n })] });
-};
-export {
-  m as O,
-  f as S,
-  y as a
-};

package/dist/index-BLbKylyw.mjs

@@ -1,209 +0,0 @@
-import { jsxs as p, jsx as r } from "react/jsx-runtime";
-import { styled as e } from "styled-components";
-import { theme as d } from "./components/colors/index.js";
-import { Icon as c } from "./components/icon/index.js";
-import "./components/typography/heading/index.js";
-import "./components/typography/span/index.js";
-import { Text as l } from "./components/typography/text/index.js";
-const g = e.a`
-  ${({ theme: n }) => `
-    align-items: center;
-    display: flex;
-    background: ${n.palette.white};
-    border-radius: ${n.spacing[0.5]};
-    cursor: pointer;
-    gap: ${n.spacing[1]};
-    padding:
-      ${n.spacing[0.5]}
-      ${n.spacing[1]}
-      ${n.spacing[0.5]}
-      ${n.spacing[0.5]};
-    width: 1143px;
-
-    &:hover {
-      background: ${n.palette.gray[100]};
-
-      > div.icon-wrap {
-        background: ${n.palette.gradients["01"]};
-
-        path {
-          fill: ${n.palette.white};
-        }
-      }
-    }
-
-    @media screen
-      and (min-width: ${n.breakpoints.sm})
-      and (max-width: ${n.breakpoints.md})
-    {
-      width: 905px;
-    }
-
-    @media screen
-      and (min-width: 40em)
-      and (max-width: ${n.breakpoints.sm})
-    {
-      width: 475px;
-    }
-
-    @media screen and (max-width: 40em) {
-      width: 270px;
-    }
-  `}
-`, m = e.div.attrs({ className: "icon-wrap" })`
-  ${({ theme: n }) => `
-    align-items: center;
-    background: ${n.palette.primary[25]};
-    border-radius: ${n.spacing[0.25]};
-    display: flex;
-    justify-content: center;
-    min-width: ${n.spacing[2.5]};
-    height: ${n.spacing[2.5]};
-    padding: ${n.spacing[0.5]};
-
-    span {
-      font-size: 20px;
-    }
-  `}
-`, f = e.div`
-  ${({ theme: n }) => `
-    align-items: flex-start;
-    display: flex;
-    flex-direction: column;
-    gap: ${n.spacing[1.5]};
-    width: 1193px;
-
-    > :is(form, .dropdown) {
-      border-radius: ${n.spacing[0.5]};
-      border: 1px solid ${n.palette.gray[200]};
-      background-color:  ${n.palette.white};
-    }
-
-    @media screen
-      and (min-width: ${n.breakpoints.sm})
-      and (max-width: ${n.breakpoints.md})
-    {
-      width: 954px;
-    }
-
-    @media screen
-      and (min-width: 40em)
-      and (max-width: ${n.breakpoints.sm})
-    {
-      width: 526px;
-    }
-
-    @media screen and (max-width: 40em) {
-      width: 320px;
-    }
-  `}
-`, k = e.form`
-  ${({ theme: n }) => `
-    align-items: center;
-    display: flex;
-    gap: ${n.spacing[0.5]};
-    justify-content: space-between;
-    padding: ${n.spacing[1]} ${n.spacing[1.5]};
-    width: 100%;
-  `}
-`, v = e.input`
-  ${({ theme: n }) => `
-    flex: 1 0 0;
-    border: none;
-    color: ${n.palette.gray[600]};
-    font-family: ${n.typography.type.primary};
-    font-size: ${n.typography.text.md};
-    font-weight: ${n.typography.weight.regular};
-    line-height: ${n.spacing[1.5]};
-    outline: none;
-
-    &::placeholder {
-      color: ${n.palette.gray[400]};
-    }
-
-    &::-webkit-search-decoration,
-    &::-webkit-search-cancel-button,
-    &::-webkit-search-results-button,
-    &::-webkit-search-results-decoration {
-      -webkit-appearance:none;
-    }
-
-    @media screen and (max-width: ${n.breakpoints.mobile}) {
-      font-size: ${n.typography.text.sm};
-    }
-  `}
-`, S = e.button`
-  ${({ theme: n }) => `
-    align-items: center;
-    border-radius: ${n.spacing[0.5]};
-    display: flex;
-    width: ${n.spacing[2.5]};
-    height: ${n.spacing[2.5]};
-    padding: ${n.spacing[0.625]} ${n.spacing[1]};
-    justify-content: center;
-    gap: ${n.spacing[0.5]};
-    flex-shrink: 0;
-
-    span {
-      color: ${n.palette.gray[400]};
-    }
-
-    &:hover {
-      background-color: ${n.palette.gray[100]};
-    }
-  `}
-`, z = e.div.attrs({ className: "dropdown" })`
-  ${({ theme: n, $empty: a = !1, $showHits: i = !1 }) => `
-    align-items: flex-start;
-    align-self: stretch;
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    display: flex;
-    flex-direction: column;
-    gap: ${n.spacing[0.5]};
-    max-height: ${i ? "270px" : "500px"};
-    overflow: hidden auto;
-    padding: ${n.spacing[1.5]};
-    scrollbar-color: ${n.palette.gray[600]} ${n.palette.gray[100]};
-    scroll-padding: ${n.spacing[0.5]};
-    scrollbar-width: thin;
-
-    @media screen and (max-width: ${n.breakpoints.sm}) and (${!a}) {
-      max-height: 410px;
-    }
-    ${a && `
-    @media screen and (min-width: ${n.breakpoints.mobile}) {
-      border: none !important;
-      background-image: url(https://res.cloudinary.com/fluid-attacks/image/upload/v1729784164/airs/search-bar/empty_state_bg.webp);
-    }
-    @media screen and (max-width: ${n.breakpoints.mobile}) {
-      border: none !important;
-      background-image: url(https://res.cloudinary.com/fluid-attacks/image/upload/v1729783908/airs/search-bar/empty_state_bg_mobile.webp);
-    }
-      `}
-
-    &::-webkit-scrollbar {
-      height: ${n.spacing[0.5]};
-      width: ${n.spacing[0.5]};
-    }
-    &::-webkit-scrollbar-track {
-      background: ${n.palette.gray[100]};
-    }
-    &::-webkit-scrollbar-thumb {
-      background-color: ${n.palette.gray[600]};
-      border-radius: ${n.spacing[5]};
-      height: ${n.spacing[0.5]};
-    }
-  `}
-`, j = ({ hit: n, icon: a = "infinity", showIcon: i = !1 }) => {
-  const { slug: t, title: s } = n, o = String(t).startsWith("/pages/") ? String(t).replace("/pages/", "/") : String(t);
-  return p(g, { href: o, rel: "nofollow noopener noreferrer", children: [i && r(m, { children: r(c, { icon: a, iconClass: "fill-gradient-01", iconSize: "sm", iconType: "fa-light" }) }), r(l, { color: d.palette.gray[800], lineSpacing: 1.5, size: "md", sizeSm: "sm", whiteSpace: "wrap", children: String(s) })] });
-};
-export {
-  j as I,
-  f as S,
-  k as a,
-  v as b,
-  S as c,
-  z as d
-};

package/dist/index-Bu448Tz2.mjs

@@ -1,106 +0,0 @@
-import { jsxs as s, jsx as e } from "react/jsx-runtime";
-import { styled as a, useTheme as p } from "styled-components";
-import "./components/typography/heading/index.js";
-import "./components/typography/span/index.js";
-import { Text as t } from "./components/typography/text/index.js";
-const c = a.div`
-  ${({ theme: n }) => `
-    align-items: center;
-    background-color: ${n.palette.white};
-    border: 1px solid ${n.palette.gray[200]};
-    border-radius: ${n.spacing[0.25]};
-    display: flex;
-    flex-direction: column;
-    gap: ${n.spacing[0.5]};
-    min-height: 180px;
-    padding: ${n.spacing[1.5]};
-    width: 510px;
-
-    p {
-      font-style: normal;
-      line-height: ${n.spacing[1.25]};
-    }
-
-    &:hover {
-      border: 1px solid ${n.palette.gray[600]};
-    }
-  `}
-`, b = a.div`
-  ${({ theme: n }) => `
-    display: flex;
-    flex-direction: column;
-    gap: ${n.spacing[1.5]};
-    position: relative;
-    max-width: 1268px;
-
-    &::before {
-      background-color: ${n.palette.gray[200]};
-      border-radius: 5px;
-      height: 100%;
-      width: 4px;
-      transform: translate(-50%, 0);
-    }
-
-    > * {
-      &:nth-child(even) {
-        align-self: end;
-      }
-
-      &:nth-child(odd) {
-        align-self: start;
-      }
-
-      &::before {
-        position: absolute;
-        background-color: ${n.palette.primary[500]};
-        border-radius: 50%;
-        height: 14px;
-        width: 14px;
-        z-index: 1;
-      }
-    }
-
-    &::before,
-    > *::before {
-      content: "";
-      left: 50%;
-      position: absolute;
-      transform: translateX(-50%);
-    }
-
-    @media (width <= 1270px) {
-      max-width: 540px;
-
-      p {
-        text-align: center;
-      }
-
-      &::before,
-      > *::before {
-        left: 8px;
-      }
-
-      > * {
-        &:nth-child(odd) {
-          align-self: end;
-        }
-      }
-
-      @media (width <= 630px) {
-        display: block;
-
-        .timeline-card {
-          width: auto;
-          margin-left: 30px;
-        }
-      }
-    }
-  `}
-`, $ = ({ date: n, description: o, title: l }) => {
-  const i = p();
-  return s(c, { className: "timeline-card", children: [e(t, { color: i.palette.gray[800], fontWeight: "bold", lineSpacing: 1.75, size: "xl", children: n }), e(t, { color: i.palette.gray[800], fontWeight: "bold", lineSpacing: 1.5, mb: 0.5, size: "md", textAlign: "center", children: l }), e("div", { children: o.map((r, d) => e(t, { size: "sm", textAlign: "center", wordBreak: "break-word", children: r }, `${r}#${d}`)) })] });
-};
-export {
-  b as T,
-  $ as a
-};