@fluidattacks/design 3.1.12 → 3.1.13

package/dist/components/typography/heading/index.js

@@ -1,8 +1,46 @@
-import { jsx as z } from "react/jsx-runtime";
-import { forwardRef as h } from "react";
-import { S as x } from "../../../styles-fH2c4cfc.mjs";
-const b = h(function({ bgGradient: i, children: e, className: r, color: a, display: t, fontFamily: n, fontWeight: l, letterSpacing: o, lineSpacing: s, lineSpacingSm: c, size: m, sizeMd: $, sizeSm: d, textFill: p, wordBreak: f, ...g }, S) {
-  return z(x, { $bgGradient: i, $color: a, $display: t, $fontFamily: n, $fontWeight: l, $letterSpacing: o, $lineSpacing: s, $lineSpacingSm: c, $size: m, $sizeMd: $, $sizeSm: d, $textFill: p, $wordBreak: f, className: r, ref: S, ...g, children: e });
+import { jsx as x } from "react/jsx-runtime";
+import { forwardRef as y } from "react";
+import { S as z } from "../../../styles-B64DVBIF.mjs";
+const b = y(function({
+  bgGradient: i,
+  children: e,
+  className: r,
+  color: t,
+  display: n,
+  fontFamily: o,
+  fontWeight: $,
+  letterSpacing: a,
+  lineSpacing: d,
+  lineSpacingSm: l,
+  size: m,
+  sizeMd: f,
+  sizeSm: g,
+  textFill: p,
+  wordBreak: s,
+  ...S
+}, c) {
+  return /* @__PURE__ */ x(
+    z,
+    {
+      $bgGradient: i,
+      $color: t,
+      $display: n,
+      $fontFamily: o,
+      $fontWeight: $,
+      $letterSpacing: a,
+      $lineSpacing: d,
+      $lineSpacingSm: l,
+      $size: m,
+      $sizeMd: f,
+      $sizeSm: g,
+      $textFill: p,
+      $wordBreak: s,
+      className: r,
+      ref: c,
+      ...S,
+      children: e
+    }
+  );
 });
 export {
   b as Heading

package/dist/components/typography/span/index.js

@@ -1,9 +1,41 @@
-import { jsx as $ } from "react/jsx-runtime";
-import { forwardRef as g } from "react";
-import { a as d } from "../../../styles-fH2c4cfc.mjs";
-const u = g(function({ children: i, color: n, content: e, display: t, fontFamily: o, fontWeight: r, letterSpacing: a, lineSpacing: c, lineSpacingSm: l, size: s, sizeMd: p, sizeSm: m, ...f }, S) {
-  return $(d, { $color: n, $content: e, $display: t, $fontFamily: o, $fontWeight: r, $letterSpacing: a, $lineSpacing: c, $lineSpacingSm: l, $size: s, $sizeMd: p, $sizeSm: m, ref: S, ...f, children: i });
+import { jsx as s } from "react/jsx-runtime";
+import { forwardRef as d } from "react";
+import { a as g } from "../../../styles-B64DVBIF.mjs";
+const h = d(function({
+  children: n,
+  color: i,
+  content: o,
+  display: t,
+  fontFamily: e,
+  fontWeight: r,
+  letterSpacing: a,
+  lineSpacing: p,
+  lineSpacingSm: $,
+  size: m,
+  sizeMd: S,
+  sizeSm: f,
+  ...c
+}, l) {
+  return /* @__PURE__ */ s(
+    g,
+    {
+      $color: i,
+      $content: o,
+      $display: t,
+      $fontFamily: e,
+      $fontWeight: r,
+      $letterSpacing: a,
+      $lineSpacing: p,
+      $lineSpacingSm: $,
+      $size: m,
+      $sizeMd: S,
+      $sizeSm: f,
+      ref: l,
+      ...c,
+      children: n
+    }
+  );
 });
 export {
-  u as Span
+  h as Span
 };

package/dist/components/typography/text/index.js

@@ -1,9 +1,47 @@
-import { jsx as z } from "react/jsx-runtime";
-import { forwardRef as x } from "react";
-import { b as h } from "../../../styles-fH2c4cfc.mjs";
-const w = x(function({ bgGradient: i, children: e, className: r, color: t, display: a, fontFamily: n, fontWeight: l, letterSpacing: o, lineSpacing: s, lineSpacingSm: c, size: m, sizeMd: $, sizeSm: p, textFill: d, wordBreak: f, ...g }, S) {
-  return z(h, { $bgGradient: i, $color: t, $display: a, $fontFamily: n, $fontWeight: l, $letterSpacing: o, $lineSpacing: s, $lineSpacingSm: c, $size: m, $sizeMd: $, $sizeSm: p, $textFill: d, $wordBreak: f, className: r, ref: S, ...g, children: e });
+import { jsx as g } from "react/jsx-runtime";
+import { forwardRef as y } from "react";
+import { b as z } from "../../../styles-B64DVBIF.mjs";
+const F = y(function({
+  bgGradient: t,
+  children: e,
+  className: i,
+  color: r,
+  display: o,
+  fontFamily: $,
+  fontWeight: n,
+  letterSpacing: a,
+  lineSpacing: l,
+  lineSpacingSm: m,
+  size: f,
+  sizeMd: p,
+  sizeSm: s,
+  textFill: c,
+  wordBreak: d,
+  ...x
+}, S) {
+  return /* @__PURE__ */ g(
+    z,
+    {
+      $bgGradient: t,
+      $color: r,
+      $display: o,
+      $fontFamily: $,
+      $fontWeight: n,
+      $letterSpacing: a,
+      $lineSpacing: l,
+      $lineSpacingSm: m,
+      $size: f,
+      $sizeMd: p,
+      $sizeSm: s,
+      $textFill: c,
+      $wordBreak: d,
+      className: i,
+      ref: S,
+      ...x,
+      children: e
+    }
+  );
 });
 export {
-  w as Text
+  F as Text
 };

package/dist/components/web-form/index.js

@@ -1,22 +1,22 @@
-import { jsx as t, jsxs as d } from "react/jsx-runtime";
+import { jsx as n, jsxs as s } from "react/jsx-runtime";
 import { styled as e } from "styled-components";
-import { Button as o } from "../button/index.js";
+import { Button as d } from "../button/index.js";
 const l = e.form`
-  ${({ theme: n }) => `
+  ${({ theme: i }) => `
     align-items: center;
-    background: ${n.palette.gray[50]};
+    background: ${i.palette.gray[50]};
     backdrop-filter: blur(11px);
-    border-radius: ${n.spacing[1]};
-    box-shadow: ${n.shadows.md};
+    border-radius: ${i.spacing[1]};
+    box-shadow: ${i.shadows.md};
     display: flex;
     flex-direction: column;
     justify-content: center;
-    padding: ${n.spacing[3]} ${n.spacing[2]};
+    padding: ${i.spacing[3]} ${i.spacing[2]};
     width: 628px;
 
     &::before {
-      background: ${n.palette.gradients["02"]} border-box;
-      border-radius: ${n.spacing[1]};
+      background: ${i.palette.gradients["02"]} border-box;
+      border-radius: ${i.spacing[1]};
       content: "";
       position: absolute;
       inset: 0;
@@ -25,16 +25,16 @@ const l = e.form`
       mask-composite: exclude;
     }
 
-    @media screen and (max-width: ${n.breakpoints.mobile}) {
+    @media screen and (max-width: ${i.breakpoints.mobile}) {
       width: 320px;
     }
   `}
-`, m = e.div`
+`, c = e.div`
   align-items: flex-start;
   align-self: stretch;
   display: flex;
   flex-direction: column;
-  gap: ${({ theme: n }) => n.spacing[1.5]};
+  gap: ${({ theme: i }) => i.spacing[1.5]};
 
   button[type="submit"] {
     width: 100%;
@@ -43,14 +43,14 @@ const l = e.form`
       text-align: center;
     }
   }
-`, f = e.div`
-  ${({ theme: n }) => `
+`, x = e.div`
+  ${({ theme: i }) => `
     align-items: flex-start;
     align-self: stretch;
     container-type: inline-size;
     display: flex;
     flex-direction: row;
-    gap: ${n.spacing[1]};
+    gap: ${i.spacing[1]};
     position: relative;
 
     &:has(> :nth-child(2)) {
@@ -60,12 +60,21 @@ const l = e.form`
       }
     }
 
-    @media screen and (max-width: ${n.breakpoints.mobile}) {
+    @media screen and (max-width: ${i.breakpoints.mobile}) {
       flex-direction: column;
     }
   `}
-`, x = ({ children: n, name: i, onSubmit: a, submitDisabled: s, submitLabel: r = "Submit" }) => t(l, { "aria-label": i, name: i, onSubmit: a, children: d(m, { children: [n, t(o, { disabled: s, type: "submit", children: r })] }) });
+`, g = ({
+  children: i,
+  name: t,
+  onSubmit: r,
+  submitDisabled: a,
+  submitLabel: o = "Submit"
+}) => /* @__PURE__ */ n(l, { "aria-label": t, name: t, onSubmit: r, children: /* @__PURE__ */ s(c, { children: [
+  i,
+  /* @__PURE__ */ n(d, { disabled: a, type: "submit", children: o })
+] }) });
 export {
-  f as FormItem,
-  x as WebForm
+  x as FormItem,
+  g as WebForm
 };

package/dist/hooks/index.js

@@ -1,8 +1,8 @@
-import { u as a } from "../use-carousel-CvRxi2FI.mjs";
-import { u as s } from "../use-click-outside-BtZLIoU1.mjs";
-import { u as l } from "../use-cloudinary-image-fG7ODNgr.mjs";
-import { u as t, a as f } from "../use-search-DpLNvt7Q.mjs";
-import { u as x } from "../use-modal-CkrZ-_-M.mjs";
+import { u as a } from "../use-carousel-CgAF78h3.mjs";
+import { u as s } from "../use-click-outside-BUll8Ag-.mjs";
+import { u as l } from "../use-cloudinary-image-BCxwj15o.mjs";
+import { u as t, a as f } from "../use-search-Dj47QDw9.mjs";
+import { u as x } from "../use-modal-CtgexKnf.mjs";
 export {
   a as useCarousel,
   s as useClickOutside,

package/dist/index-BMHVi812.mjs

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

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