@fluidattacks/design 3.1.11 → 3.1.13

package/dist/index-C6LbClYh.mjs

@@ -0,0 +1,146 @@
+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

@@ -0,0 +1,130 @@
+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
+};

package/dist/index-CUQBAqt_.mjs

@@ -0,0 +1,75 @@
+import { jsxs as p, jsx as c } from "react/jsx-runtime";
+import { useRef as d } from "react";
+import { useOption as g } from "react-aria";
+import { styled as r } from "styled-components";
+import { Icon as y } from "./components/icon/index.js";
+const k = r.ul`
+  ${({ theme: o }) => `
+    align-self: center;
+    background: ${o.palette.white};
+    border: 1px solid ${o.palette.gray[200]};
+    border-radius: ${o.spacing[0.25]};
+    box-shadow: ${o.shadows.md};
+    list-style: none;
+    max-height: 200px;
+    min-width: 240px;
+    overflow: hidden auto;
+    scrollbar-color: ${o.palette.gray[600]} ${o.palette.gray[100]};
+    scroll-padding: ${o.spacing[0.5]};
+    width: 95%;
+  `}
+`, $ = r.li`
+  ${({ theme: o }) => `
+    align-items: center;
+    color: ${o.palette.gray[800]};
+    cursor: pointer;
+    display: flex;
+    font-family: ${o.typography.type.primary};
+    font-size: ${o.typography.text.sm};
+    gap: ${o.spacing[0.5]};
+    justify-content: space-between;
+    line-height: ${o.spacing[1.25]};
+    padding: ${o.spacing[0.25]} ${o.spacing[1]};
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    span {
+      color: ${o.palette.gray[700]};
+    }
+
+    &:hover {
+      background: ${o.palette.gray[100]};
+    }
+
+    &.selected {
+      background: ${o.palette.gray[200]};
+    }
+
+    &.disabled {
+      color: ${o.palette.gray[400]};
+      cursor: not-allowed;
+    }
+  `}
+`, v = ({
+  item: o,
+  state: i
+}) => {
+  const s = d(null), { optionProps: e, isSelected: a, isFocused: l, isDisabled: n } = g(
+    { key: o.value },
+    i,
+    s
+  ), t = [
+    a ? "selected" : "",
+    l ? "focused" : "",
+    n ? "disabled" : ""
+  ].join(" ");
+  return /* @__PURE__ */ p($, { ...e, className: t, ref: s, children: [
+    o.name,
+    a ? /* @__PURE__ */ c(y, { icon: "check", iconSize: "xxs", iconType: "fa-light" }) : void 0
+  ] });
+};
+export {
+  v as O,
+  k as S
+};

package/dist/index-CWlrSlUk.mjs

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

package/dist/index-Ckmu1TfV.mjs

@@ -0,0 +1,86 @@
+import { jsx as t } from "react/jsx-runtime";
+import { styled as a } from "styled-components";
+import { theme as o } from "./components/colors/index.js";
+import { Icon as r } from "./components/icon/index.js";
+const c = a.div`
+  ${({ theme: i }) => `
+    align-items: flex-start;
+    backdrop-filter: blur(3.15px);
+    background: radial-gradient(
+      68.83% 167.8% at 171.9% 90.34%,
+      ${i.palette.complementary[300]} 0%,
+      ${i.palette.primary[400]} 100%
+    ),
+    linear-gradient(
+      241deg,
+      ${i.palette.primary[400]} 3.45%,
+      ${i.palette.primary[500]} 82.59%
+    );
+    border-radius: ${i.spacing[1]};
+    box-shadow: ${i.shadows.md};
+    display: flex;
+    flex-direction: column;
+    gap: ${i.spacing[0.625]};
+    height: 300px;
+    padding: ${i.spacing[1]};
+    position: relative;
+    width: 300px;
+
+    button > * {
+      font-size: ${i.typography.text.sm};
+    }
+
+    #hovered {
+      display: none;
+    }
+
+    &:hover {
+      background: ${i.palette.gray[900]};
+
+      #hovered {
+        display: flex;
+      }
+      #uncover {
+        display: none;
+      }
+    }
+
+    @media screen and (max-width: ${i.breakpoints.mobile}) {
+      height: 320px;
+      width: 320px;
+
+      #hovered {
+        margin-bottom: ${i.spacing[1.75]};
+      }
+    }
+  `}
+`, n = a.div`
+  align-items: center;
+  position: absolute;
+  justify-content: center;
+  opacity: 0.15;
+  top: 14%;
+  left: 25%;
+  z-index: -1;
+
+  span {
+    font-size: 265px;
+    height: 260px;
+    width: 260px;
+  }
+`, l = ({
+  icon: i
+}) => /* @__PURE__ */ t(n, { children: /* @__PURE__ */ t(
+  r,
+  {
+    icon: i,
+    iconColor: o.palette.white,
+    iconSize: "xs",
+    iconTransform: "shrink-2",
+    iconType: "fa-light"
+  }
+) });
+export {
+  c as I,
+  l as a
+};