@fluidattacks/design 3.1.10 → 3.1.12

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

@@ -1 +1,9 @@
-"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 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 });
+});
+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,9 @@
-"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 $ } 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 });
+});
+export {
+  u as Span
+};

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

@@ -1 +1,9 @@
-"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 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 });
+});
+export {
+  w 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 t, jsxs as d } from "react/jsx-runtime";
+import { styled as e } from "styled-components";
+import { Button as o } from "../button/index.js";
+const l = e.form`
+  ${({ theme: n }) => `
+    align-items: center;
+    background: ${n.palette.gray[50]};
+    backdrop-filter: blur(11px);
+    border-radius: ${n.spacing[1]};
+    box-shadow: ${n.shadows.md};
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: ${n.spacing[3]} ${n.spacing[2]};
+    width: 628px;
+
+    &::before {
+      background: ${n.palette.gradients["02"]} border-box;
+      border-radius: ${n.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: ${n.breakpoints.mobile}) {
+      width: 320px;
+    }
+  `}
+`, m = e.div`
   align-items: flex-start;
   align-self: stretch;
   display: flex;
   flex-direction: column;
-  gap: ${({theme:n})=>n.spacing[1.5]};
+  gap: ${({ theme: n }) => n.spacing[1.5]};
 
   button[type="submit"] {
     width: 100%;
@@ -14,6 +43,29 @@
       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})]})});
+`, f = e.div`
+  ${({ theme: n }) => `
+    align-items: flex-start;
+    align-self: stretch;
+    container-type: inline-size;
+    display: flex;
+    flex-direction: row;
+    gap: ${n.spacing[1]};
+    position: relative;
+
+    &:has(> :nth-child(2)) {
+      > div {
+        display: flex;
+        width: 50%;
+      }
+    }
+
+    @media screen and (max-width: ${n.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 })] }) });
+export {
+  f as FormItem,
+  x 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-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";
+export {
+  a as useCarousel,
+  s as useClickOutside,
+  l as useCloudinaryImage,
+  t as useDebouncedCallback,
+  x as useModal,
+  f as useSearch
+};

package/dist/index-38JqtnAI.mjs

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

package/dist/index-B5yoGFs6.mjs

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

package/dist/index-BLbKylyw.mjs

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

package/dist/{index-C0_LPuYU.mjs → index-Bu448Tz2.mjs}

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