@fluidattacks/design 3.1.10 → 3.1.12

package/dist/index-Co_k0WFk.mjs

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

package/dist/index-Cu7uUMlx.mjs

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