@fluidattacks/design 3.1.13 → 3.2.0

package/package.json

@@ -55,6 +55,7 @@
     "postcss": "8.4.49",
     "postcss-styled-syntax": "0.7.0",
     "remark-gfm": "4.0.0",
+    "rollup-plugin-visualizer": "5.14.0",
     "storybook": "8.4.7",
     "stylelint": "16.12.0",
     "stylelint-config-standard": "36.0.1",
@@ -74,12 +75,7 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
-    },
-    "./button": {
-      "types": "./dist/components/button/index.d.ts",
-      "import": "./dist/components/button/index.js"
-    },
-    "./styles": "./dist/assets/design.css"
+    }
   },
   "files": [
     "README.md",
@@ -117,5 +113,5 @@
     "test-storybook": "test-storybook"
   },
   "typings": "./dist/index.d.ts",
-  "version": "3.1.13"
+  "version": "3.2.0"
 }

package/dist/_commonjsHelpers-C6fGbg64.mjs

@@ -1,6 +0,0 @@
-function e(t) {
-  return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
-}
-export {
-  e as g
-};

package/dist/index-BMHVi812.mjs

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

package/dist/index-BzAniA2J.mjs

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

package/dist/index-C6LbClYh.mjs

@@ -1,146 +0,0 @@
-import { jsxs as s, jsx as i } from "react/jsx-runtime";
-import { styled as o, useTheme as c } from "styled-components";
-import "./components/typography/heading/index.js";
-import "./components/typography/span/index.js";
-import { Text as r } from "./components/typography/text/index.js";
-const g = o.div`
-  ${({ theme: e }) => `
-    align-items: center;
-    background-color: ${e.palette.white};
-    border: 1px solid ${e.palette.gray[200]};
-    border-radius: ${e.spacing[0.25]};
-    display: flex;
-    flex-direction: column;
-    gap: ${e.spacing[0.5]};
-    min-height: 180px;
-    padding: ${e.spacing[1.5]};
-    width: 510px;
-
-    p {
-      font-style: normal;
-      line-height: ${e.spacing[1.25]};
-    }
-
-    &:hover {
-      border: 1px solid ${e.palette.gray[600]};
-    }
-  `}
-`, u = o.div`
-  ${({ theme: e }) => `
-    display: flex;
-    flex-direction: column;
-    gap: ${e.spacing[1.5]};
-    position: relative;
-    max-width: 1268px;
-
-    &::before {
-      background-color: ${e.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: ${e.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: e,
-  description: a,
-  title: l
-}) => {
-  const t = c();
-  return /* @__PURE__ */ s(g, { className: "timeline-card", children: [
-    /* @__PURE__ */ i(
-      r,
-      {
-        color: t.palette.gray[800],
-        fontWeight: "bold",
-        lineSpacing: 1.75,
-        size: "xl",
-        children: e
-      }
-    ),
-    /* @__PURE__ */ i(
-      r,
-      {
-        color: t.palette.gray[800],
-        fontWeight: "bold",
-        lineSpacing: 1.5,
-        mb: 0.5,
-        size: "md",
-        textAlign: "center",
-        children: l
-      }
-    ),
-    /* @__PURE__ */ i("div", { children: a.map((n, d) => {
-      const p = `${n}#${d}`;
-      return /* @__PURE__ */ i(
-        r,
-        {
-          size: "sm",
-          textAlign: "center",
-          wordBreak: "break-word",
-          children: n
-        },
-        p
-      );
-    }) })
-  ] });
-};
-export {
-  u as T,
-  $ as a
-};

package/dist/index-CAIe8hBv.mjs

@@ -1,130 +0,0 @@
-import { jsxs as s, jsx as a } from "react/jsx-runtime";
-import { useCallback as c } from "react";
-import { styled as d, useTheme as m } from "styled-components";
-import { Container as x } from "./components/container/index.js";
-import { Icon as p } from "./components/icon/index.js";
-const g = d.button`
-  display: flex;
-  position: relative;
-  height: 32px;
-  width: 32px;
-
-  svg {
-    position: absolute;
-  }
-
-  .hovered {
-    display: none;
-  }
-
-  &:hover {
-    .hovered {
-      display: flex;
-    }
-
-    .uncover {
-      display: none;
-    }
-  }
-`, w = d.div`
-  ${({ theme: o }) => `
-    display: flex;
-    flex-direction: column;
-    gap: ${o.spacing[2.5]};
-    overflow: hidden;
-    min-height: 589px;
-    max-width: 1316px;
-
-    span {
-      background: ${o.palette.gradients["01"]};
-      background-clip: text;
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-    }
-
-    #mobile {
-      display: none;
-    }
-
-    #carousel {
-      scrollbar-width: none;
-
-      &::-webkit-scrollbar {
-        display: none;
-      }
-    }
-
-    @media screen and (max-width: ${o.breakpoints.mobile}) {
-      align-items: center;
-      height: auto;
-      max-width: 340px;
-
-      #desktop {
-        display: none;
-      }
-      #mobile {
-        display: flex;
-      }
-    }
-  `}
-`, v = ({
-  containerRef: o,
-  id: i
-}) => {
-  const l = m(), t = i === "desktop" ? 380 : 342, n = c(
-    (e) => () => {
-      if (o != null && o.current) {
-        const { current: h } = o;
-        h.scrollBy({
-          left: e === "right" ? t : -t,
-          behavior: "smooth"
-        });
-      }
-    },
-    [o, t]
-  ), r = c(
-    (e) => /* @__PURE__ */ s(g, { onClick: n(e), children: [
-      /* @__PURE__ */ a(
-        p,
-        {
-          clickable: !0,
-          icon: `circle-arrow-${e}`,
-          iconClass: "hovered",
-          iconColor: l.palette.gray[800],
-          iconSize: "md",
-          iconType: "fa-solid"
-        }
-      ),
-      /* @__PURE__ */ a(
-        p,
-        {
-          clickable: !0,
-          icon: `circle-arrow-${e}`,
-          iconClass: "uncover",
-          iconColor: l.palette.gray[800],
-          iconSize: "md",
-          iconType: "fa-light"
-        }
-      )
-    ] }),
-    [n, l]
-  );
-  return /* @__PURE__ */ s(
-    x,
-    {
-      alignItems: "center",
-      display: "flex",
-      gap: 1,
-      id: i,
-      width: "max-content",
-      children: [
-        r("left"),
-        r("right")
-      ]
-    }
-  );
-};
-export {
-  w as O,
-  v as S
-};