@fluidattacks/design 3.1.11 → 3.1.13

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

@@ -1 +1,47 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),r=require("../../../styles-DlmKLhPh.js"),t=i.forwardRef((function({bgGradient:i,children:t,className:n,color:a,display:l,fontFamily:s,fontWeight:o,letterSpacing:c,lineSpacing:d,lineSpacingSm:g,size:S,sizeMd:$,sizeSm:p,textFill:m,wordBreak:f,...u},y){return e.jsx(r.StyledHeading,{$bgGradient:i,$color:a,$display:l,$fontFamily:s,$fontWeight:o,$letterSpacing:c,$lineSpacing:d,$lineSpacingSm:g,$size:S,$sizeMd:$,$sizeSm:p,$textFill:m,$wordBreak:f,className:n,ref:y,...u,children:t})}));exports.Heading=t;
+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/index.js

@@ -1 +1,8 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./heading/index.js"),t=require("./span/index.js"),r=require("./text/index.js");exports.Heading=e.Heading,exports.Span=t.Span,exports.Text=r.Text;
+import { Heading as e } from "./heading/index.js";
+import { Span as t } from "./span/index.js";
+import { Text as f } from "./text/index.js";
+export {
+  e as Heading,
+  t as Span,
+  f as Text
+};

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

@@ -1 +1,41 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),t=require("../../../styles-DlmKLhPh.js"),n=i.forwardRef((function({children:i,color:n,content:r,display:l,fontFamily:o,fontWeight:c,letterSpacing:s,lineSpacing:a,lineSpacingSm:S,size:p,sizeMd:$,sizeSm:d,...g},f){return e.jsx(t.StyledSpan,{$color:n,$content:r,$display:l,$fontFamily:o,$fontWeight:c,$letterSpacing:s,$lineSpacing:a,$lineSpacingSm:S,$size:p,$sizeMd:$,$sizeSm:d,ref:f,...g,children:i})}));exports.Span=n;
+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 {
+  h as Span
+};

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

@@ -1 +1,47 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),t=require("../../../styles-DlmKLhPh.js"),r=i.forwardRef((function({bgGradient:i,children:r,className:l,color:n,display:a,fontFamily:s,fontWeight:o,letterSpacing:c,lineSpacing:d,lineSpacingSm:S,size:$,sizeMd:g,sizeSm:p,textFill:m,wordBreak:f,...u},x){return e.jsx(t.StyledText,{$bgGradient:i,$color:n,$display:a,$fontFamily:s,$fontWeight:o,$letterSpacing:c,$lineSpacing:d,$lineSpacingSm:S,$size:$,$sizeMd:g,$sizeSm:p,$textFill:m,$wordBreak:f,className:l,ref:x,...u,children:r})}));exports.Text=r;
+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 {
+  F as Text
+};

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

@@ -1,11 +1,40 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),e=require("styled-components"),i=require("../button/index.js"),t=e.styled.form`
-  ${({theme:n})=>`\n    align-items: center;\n    background: ${n.palette.gray[50]};\n    backdrop-filter: blur(11px);\n    border-radius: ${n.spacing[1]};\n    box-shadow: ${n.shadows.md};\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    padding: ${n.spacing[3]} ${n.spacing[2]};\n    width: 628px;\n\n    &::before {\n      background: ${n.palette.gradients["02"]} border-box;\n      border-radius: ${n.spacing[1]};\n      content: "";\n      position: absolute;\n      inset: 0;\n      border: 2px solid transparent;\n      mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);\n      mask-composite: exclude;\n    }\n\n    @media screen and (max-width: ${n.breakpoints.mobile}) {\n      width: 320px;\n    }\n  `}
-`,r=e.styled.div`
+import { jsx as n, jsxs as s } from "react/jsx-runtime";
+import { styled as e } from "styled-components";
+import { Button as d } from "../button/index.js";
+const l = e.form`
+  ${({ theme: i }) => `
+    align-items: center;
+    background: ${i.palette.gray[50]};
+    backdrop-filter: blur(11px);
+    border-radius: ${i.spacing[1]};
+    box-shadow: ${i.shadows.md};
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: ${i.spacing[3]} ${i.spacing[2]};
+    width: 628px;
+
+    &::before {
+      background: ${i.palette.gradients["02"]} border-box;
+      border-radius: ${i.spacing[1]};
+      content: "";
+      position: absolute;
+      inset: 0;
+      border: 2px solid transparent;
+      mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
+      mask-composite: exclude;
+    }
+
+    @media screen and (max-width: ${i.breakpoints.mobile}) {
+      width: 320px;
+    }
+  `}
+`, 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%;
@@ -14,6 +43,38 @@
       text-align: center;
     }
   }
-`,a=e.styled.div`
-  ${({theme:n})=>`\n    align-items: flex-start;\n    align-self: stretch;\n    container-type: inline-size;\n    display: flex;\n    flex-direction: row;\n    gap: ${n.spacing[1]};\n    position: relative;\n\n    &:has(> :nth-child(2)) {\n      > div {\n        display: flex;\n        width: 50%;\n      }\n    }\n\n    @media screen and (max-width: ${n.breakpoints.mobile}) {\n      flex-direction: column;\n    }\n  `}
-`;exports.FormItem=a,exports.WebForm=({children:e,name:a,onSubmit:s,submitDisabled:d,submitLabel:l="Submit"})=>n.jsx(t,{"aria-label":a,name:a,onSubmit:s,children:n.jsxs(r,{children:[e,n.jsx(i.Button,{disabled:d,type:"submit",children:l})]})});
+`, x = e.div`
+  ${({ theme: i }) => `
+    align-items: flex-start;
+    align-self: stretch;
+    container-type: inline-size;
+    display: flex;
+    flex-direction: row;
+    gap: ${i.spacing[1]};
+    position: relative;
+
+    &:has(> :nth-child(2)) {
+      > div {
+        display: flex;
+        width: 50%;
+      }
+    }
+
+    @media screen and (max-width: ${i.breakpoints.mobile}) {
+      flex-direction: column;
+    }
+  `}
+`, 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 {
+  x as FormItem,
+  g as WebForm
+};

package/dist/hooks/index.js

@@ -1 +1,13 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../use-carousel-64dKFW4E.js"),s=require("../use-click-outside-BqkLISED.js"),u=require("../use-cloudinary-image-YMMafagv.js"),r=require("../use-search-DeL4UDMh.js"),o=require("../use-modal-_bYY6M_n.js");exports.useCarousel=e.useCarousel,exports.useClickOutside=s.useClickOutside,exports.useCloudinaryImage=u.useCloudinaryImage,exports.useDebouncedCallback=r.useDebouncedCallback,exports.useSearch=r.useSearch,exports.useModal=o.useModal;
+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,
+  l as useCloudinaryImage,
+  t as useDebouncedCallback,
+  x as useModal,
+  f as useSearch
+};

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
+};