From df41a238793f1cb842f2d79944e25aa84dbd4464 Mon Sep 17 00:00:00 2001
From: dangthang <dangthangkk2000@gmail.com>
Date: Wed, 20 Nov 2024 09:43:28 +0700
Subject: [PATCH 01/19] feat: add motion animations to various components and
 implement useMotion hook for scroll reveal functionality

---
 @/components/button.tsx                       |  2 +-
 app/hooks/use-motion.tsx                      | 48 +++++++++++++++++++
 app/sections/atoms/Description.tsx            |  1 +
 app/sections/atoms/Heading.tsx                |  1 +
 app/sections/atoms/Section.tsx                |  8 ++--
 app/sections/atoms/SubHeading.tsx             |  1 +
 app/sections/atoms/button.tsx                 |  1 +
 app/sections/before-and-after/slider.tsx      |  2 +-
 app/sections/blog-post/blog-post.tsx          |  1 +
 app/sections/blogs/index.tsx                  |  5 +-
 app/sections/contact-form/contact-form.tsx    | 18 ++++---
 app/sections/countdown/timer.tsx              |  1 +
 .../feature-product/list-products.tsx         |  4 +-
 app/sections/hightlight/item.tsx              |  1 +
 app/sections/video-banner/index.tsx           |  5 +-
 app/weaverse/schema.server.ts                 |  6 +++
 16 files changed, 89 insertions(+), 16 deletions(-)
 create mode 100644 app/hooks/use-motion.tsx

diff --git a/@/components/button.tsx b/@/components/button.tsx
index 3cc9ca4..499a855 100644
--- a/@/components/button.tsx
+++ b/@/components/button.tsx
@@ -14,7 +14,7 @@ const buttonVariants = cva(
         secondary:
           'border border-bar bg-transparent hover:bg-primary hover:text-secondary',
         outline:
-          'bg-transparent border border-bar text-secondary-foreground font-heading text-xl',
+          'bg-transparent border border-bar text-secondary-foreground !font-heading',
         link: 'text-primary underline-offset-4 hover:underline',
         decor: 'relative',
         custom: '',
diff --git a/app/hooks/use-motion.tsx b/app/hooks/use-motion.tsx
new file mode 100644
index 0000000..aa204e6
--- /dev/null
+++ b/app/hooks/use-motion.tsx
@@ -0,0 +1,48 @@
+import { useThemeSettings } from "@weaverse/hydrogen";
+import { animate, inView, useAnimate } from "framer-motion";
+import { ForwardedRef, useEffect } from "react";
+
+type MotionType = "fade-up" | "fade-in" | "zoom-in" | "slide-in";
+
+const animations: Record<MotionType, any> = {
+  "fade-up": { opacity: [0, 1], y: [20, 0] },
+  "fade-in": { opacity: [0, 1] },
+  "zoom-in": { opacity: [0, 1], scale: [0.8, 1], y: [20, 0] },
+  "slide-in": { opacity: [0, 1], x: [20, 0] },
+};
+
+export function useMotion(ref?: ForwardedRef<any>) {
+  let { enableViewTransition } = useThemeSettings();
+  const [scope] = useAnimate();
+  useEffect(() => {
+    if (!scope.current || !ref) return;
+    Object.assign(ref, { current: scope.current });
+  }, [scope, ref]);
+  useEffect(() => {
+    if (!enableViewTransition) {
+      return;
+    }
+    scope.current?.classList.add("animated-scope");
+    scope.current
+      .querySelectorAll("[data-motion]")
+      .forEach((el: HTMLElement, index: number) => {
+        inView(
+          el,
+          (info) => {
+            const dataDelay = Number.parseInt(el.dataset.delay as string);
+            const motionType = (el.dataset.motion || "fade-up") as MotionType;
+            const motionSettings = animations[motionType];
+            const delay = dataDelay || index * 0.15;
+            animate(info.target, motionSettings, {
+              duration: 0.5,
+              delay,
+            });
+          },
+          {
+            amount: 0.3,
+          }
+        );
+      });
+  }, []);
+  return [scope] as const;
+}
diff --git a/app/sections/atoms/Description.tsx b/app/sections/atoms/Description.tsx
index 5bcf34f..4849967 100644
--- a/app/sections/atoms/Description.tsx
+++ b/app/sections/atoms/Description.tsx
@@ -66,6 +66,7 @@ let Description = forwardRef<
     <Tag
       ref={ref}
       {...rest}
+      data-motion="fade-up"
       style={{color}}
       className={clsx(variants({textSize, width, alignment, className}))}
       suppressHydrationWarning
diff --git a/app/sections/atoms/Heading.tsx b/app/sections/atoms/Heading.tsx
index 026509a..780613c 100644
--- a/app/sections/atoms/Heading.tsx
+++ b/app/sections/atoms/Heading.tsx
@@ -126,6 +126,7 @@ let Heading = forwardRef<
     <Tag
       ref={ref}
       {...rest}
+      data-motion="fade-up"
       style={style}
       className={cn(
         size === 'custom' && fontSizeVariants({mobileSize, desktopSize}),
diff --git a/app/sections/atoms/Section.tsx b/app/sections/atoms/Section.tsx
index 8241602..bfebcb2 100644
--- a/app/sections/atoms/Section.tsx
+++ b/app/sections/atoms/Section.tsx
@@ -13,6 +13,7 @@ import type { OverlayProps } from "./Overlay";
 import { overlayInputs } from "./Overlay";
 import { OverlayAndBackground } from "./OverlayAndBackground";
 import { cn } from "@/lib/utils";
+import { useMotion } from "~/hooks/use-motion";
 
 export type BackgroundProps = BackgroundImageProps & {
   backgroundFor: "section" | "content";
@@ -78,6 +79,7 @@ let variants = cva("relative", {
 });
 
 export let Section = forwardRef<HTMLElement, SectionProps>((props, ref) => {
+  const [scope] = useMotion(ref);
   let {
     as: Component = "section",
     width,
@@ -112,12 +114,12 @@ export let Section = forwardRef<HTMLElement, SectionProps>((props, ref) => {
 
   return (
     <Component
-      ref={ref}
+      ref={scope}
       {...rest}
       style={style}
       className={cn(
         variants({ padding: width, overflow, className }),
-        hasBackground && !isBgForContent && "has-background",
+        hasBackground && !isBgForContent && "has-background"
       )}
     >
       {!isBgForContent && <OverlayAndBackground {...props} />}
@@ -125,7 +127,7 @@ export let Section = forwardRef<HTMLElement, SectionProps>((props, ref) => {
         className={cn(
           variants({ gap, width, verticalPadding, overflow }),
           hasBackground && isBgForContent && "has-background px-4 sm:px-8",
-          containerClassName,
+          containerClassName
         )}
       >
         {isBgForContent && <OverlayAndBackground {...props} />}
diff --git a/app/sections/atoms/SubHeading.tsx b/app/sections/atoms/SubHeading.tsx
index 83baecc..80ae5ac 100644
--- a/app/sections/atoms/SubHeading.tsx
+++ b/app/sections/atoms/SubHeading.tsx
@@ -56,6 +56,7 @@ let SubHeading = forwardRef<
     <Tag
       ref={ref}
       {...rest}
+      data-motion="fade-up"
       style={{color}}
       className={cn(variants({size, weight, alignment, className}))}
     >
diff --git a/app/sections/atoms/button.tsx b/app/sections/atoms/button.tsx
index 382d711..d4cc2ce 100644
--- a/app/sections/atoms/button.tsx
+++ b/app/sections/atoms/button.tsx
@@ -36,6 +36,7 @@ const WeaverseButton = forwardRef<HTMLButtonElement, OriginalButtonProps>(
       <Button
         as={Component}
         to={href}
+        data-motion="fade-up"
         target={target}
         variant={variant}
         shape={shape}
diff --git a/app/sections/before-and-after/slider.tsx b/app/sections/before-and-after/slider.tsx
index 65e728c..edd25fa 100644
--- a/app/sections/before-and-after/slider.tsx
+++ b/app/sections/before-and-after/slider.tsx
@@ -169,7 +169,7 @@ const BeforeAndAfter = forwardRef<HTMLDivElement, BeforeAndAfterProps>((props, r
     } as CSSProperties;
 
     return (
-        <div ref={containerRef} {...rest} className="w-full relative h-[var(--slider-height-mobile)] sm:h-[var(--slider-height-desktop)] select-none" style={sliderStyle}>
+        <div data-motion="slide-in" ref={containerRef} {...rest} className="w-full relative h-[var(--slider-height-mobile)] sm:h-[var(--slider-height-desktop)] select-none" style={sliderStyle}>
             <div className="left-0 absolute top-0 h-full w-full" ref={firstHalfRef}>
                 {afterImage ? (<Image
                     data={afterImage}
diff --git a/app/sections/blog-post/blog-post.tsx b/app/sections/blog-post/blog-post.tsx
index f16e6be..add7030 100644
--- a/app/sections/blog-post/blog-post.tsx
+++ b/app/sections/blog-post/blog-post.tsx
@@ -20,6 +20,7 @@ let BlogPost = forwardRef<HTMLElement, BlogPostProps>((props, ref) => {
     return (
       <Section ref={ref} {...rest} className='h-fit'>
         <div
+          data-motion="fade-in"
           className='flex flex-col h-fit'
         >
           <div className="h-full flex flex-col">
diff --git a/app/sections/blogs/index.tsx b/app/sections/blogs/index.tsx
index e508a7f..b2c0c06 100644
--- a/app/sections/blogs/index.tsx
+++ b/app/sections/blogs/index.tsx
@@ -12,6 +12,7 @@ import {BLOG_QUERY} from '~/data/queries';
 import {cva, VariantProps} from 'class-variance-authority';
 import clsx from 'clsx';
 import {CSSProperties, forwardRef} from 'react';
+import { useMotion } from '~/hooks/use-motion';
 
 let fontSizeVariants = cva('', {
   variants: {
@@ -98,6 +99,7 @@ let articlesPerRowClasses: {[item: number]: string} = {
 };
 
 const Blogs = forwardRef<HTMLElement, BlogProps>((props, ref) => {
+  const [scope] = useMotion(ref);
   let {
     blogs,
     backgroundColor,
@@ -137,7 +139,7 @@ const Blogs = forwardRef<HTMLElement, BlogProps>((props, ref) => {
 
   return (
     <section
-      ref={ref}
+      ref={scope}
       {...rest}
       className="flex h-full w-full justify-center bg-[var(--background-color)]"
       style={sectionStyle}
@@ -154,6 +156,7 @@ const Blogs = forwardRef<HTMLElement, BlogProps>((props, ref) => {
             <Link
               key={i}
               to={idx.handle ? `/blogs/${blogs.handle}/${idx.handle}` : '#'}
+              data-motion="slide-in"
               className={'group'}
             >
               <div
diff --git a/app/sections/contact-form/contact-form.tsx b/app/sections/contact-form/contact-form.tsx
index 33965f5..efada6e 100644
--- a/app/sections/contact-form/contact-form.tsx
+++ b/app/sections/contact-form/contact-form.tsx
@@ -6,6 +6,7 @@ import { forwardRef, CSSProperties } from "react";
 import { Form } from "@remix-run/react";
 import { Input } from "@/components/input";
 import { Button } from "@/components/button";
+import { useMotion } from "~/hooks/use-motion";
 
 interface ContactFormProps extends HydrogenComponentProps {
   backgroundColor: string;
@@ -13,12 +14,13 @@ interface ContactFormProps extends HydrogenComponentProps {
   heading: string;
   subHeading: string;
   buttonLabel: string;
-  variant: string;
+  variant: "custom" | "outline" | "link" | "primary" | "secondary" | "decor" | null | undefined;
   topPadding: number;
   bottomPadding: number;
 }
 
 let ContactForm = forwardRef<HTMLDivElement, ContactFormProps>((props, ref) => {
+  const [scope] = useMotion(ref);
   let {backgroundColor, contentAlignment, heading, subHeading, buttonLabel, variant, topPadding, bottomPadding} = props;
   let sectionStyle: CSSProperties = {
     justifyContent: `${contentAlignment}`,
@@ -27,7 +29,7 @@ let ContactForm = forwardRef<HTMLDivElement, ContactFormProps>((props, ref) => {
     '--bottom-padding': `${bottomPadding}px`,
   } as CSSProperties;
   return (
-    <div ref={ref} {...props} style={sectionStyle} className="flex justify-center px-0 md:px-10">
+    <div ref={scope} {...props} style={sectionStyle} className="flex justify-center px-0 md:px-10">
       <Form
         action="/contact"
         method="POST"
@@ -36,28 +38,30 @@ let ContactForm = forwardRef<HTMLDivElement, ContactFormProps>((props, ref) => {
         className="w-80 pt-[var(--top-padding)] pb-[var(--bottom-padding)] text-center"
       >
         <div className="space-y-2 flex flex-col gap-5">
-          <label htmlFor="contact-us" className="text-5xl font-medium font-heading">
+          <label htmlFor="contact-us" data-motion="fade-up" className="text-5xl font-medium !font-heading">
             {heading}
           </label>
-          <p className="font-body font-normal">{subHeading}</p>
+          <p data-motion="fade-up" className="font-body font-normal">{subHeading}</p>
         </div>
         <div className="space-y-2 mt-8 mb-5">
-          <Input type="text" name="name" placeholder="Name" className="placeholder-foreground-subtle" />
-          <Input type="email" name="email" placeholder="Email" className="placeholder-foreground-subtle" />
+          <Input data-motion="fade-up" type="text" name="name" placeholder="Name" className="placeholder-foreground-subtle" />
+          <Input data-motion="fade-up" type="email" name="email" placeholder="Email" className="placeholder-foreground-subtle" />
           <Input
+            data-motion="fade-up"
             type="text"
             name="subject"
             placeholder="Subject"
             className="placeholder-foreground-subtle"
           />
           <textarea
+            data-motion="fade-up"
             className="resize-none w-full p-2.5 border-2 border-bar-subtle rounded focus-visible:outline-none focus-visible:border-bar hover:border-bar placeholder-foreground-subtle"
             rows={4}
             name="message"
             placeholder="Message"
           />
         </div>
-        {buttonLabel && <Button type="submit" variant={variant}>{buttonLabel}</Button>}
+        {buttonLabel && <Button data-motion="fade-up" type="submit" variant={variant}>{buttonLabel}</Button>}
       </Form>
     </div>
   );
diff --git a/app/sections/countdown/timer.tsx b/app/sections/countdown/timer.tsx
index 552cf5c..9caf0f2 100644
--- a/app/sections/countdown/timer.tsx
+++ b/app/sections/countdown/timer.tsx
@@ -63,6 +63,7 @@ let CountdownTimer = forwardRef<
     <div
       ref={ref}
       {...rest}
+      data-motion="fade-up"
       className="countdown--timer flex text-[var(--timer-color)] py-3 sm:py-0"
       style={timerStyle}
     >
diff --git a/app/sections/feature-product/list-products.tsx b/app/sections/feature-product/list-products.tsx
index 83bb9be..4db8b60 100644
--- a/app/sections/feature-product/list-products.tsx
+++ b/app/sections/feature-product/list-products.tsx
@@ -71,13 +71,13 @@ const ListProducts = forwardRef<HTMLDivElement, FeaturedProductsProps>(
     const renderProducts = () => {
       if (!loaderData || !displayedProducts) {
         return Array.from({ length: 4 }).map((_, i) => (
-          <SwiperSlide key={i} className="w-full">
+          <SwiperSlide key={i} data-motion="slide-in" className="w-full">
             {productItemBlank()}
           </SwiperSlide>
         ));
       } else {
         return displayedProducts.map((product, i) => (
-          <SwiperSlide key={product.id}>
+          <SwiperSlide key={product.id} data-motion="slide-in">
               <ProductCard
                 quickAdd
                 product={product}
diff --git a/app/sections/hightlight/item.tsx b/app/sections/hightlight/item.tsx
index a29d929..6cc231b 100644
--- a/app/sections/hightlight/item.tsx
+++ b/app/sections/hightlight/item.tsx
@@ -24,6 +24,7 @@ const HighlightItem = forwardRef<HTMLDivElement, HightlightProps>(
             <div
                 ref={ref}
                 {...rest}
+                data-motion="slide-in"
                 className={clsx('flex flex-col gap-4 items-center w-full border-2 border-[var(--border-color)] rounded px-8 py-10',
                 !visibleOnMobile && 'hidden sm:flex',
                 )}
diff --git a/app/sections/video-banner/index.tsx b/app/sections/video-banner/index.tsx
index f52d003..5e5c70c 100644
--- a/app/sections/video-banner/index.tsx
+++ b/app/sections/video-banner/index.tsx
@@ -17,6 +17,7 @@ import {
 } from 'react';
 import {useInView} from 'react-intersection-observer';
 import {Overlay, overlayInputs, OverlayProps} from '../atoms/Overlay';
+import { useMotion } from '~/hooks/use-motion';
 
 const SECTION_HEIGHTS = {
   small: {
@@ -159,6 +160,8 @@ let VideoBanner = forwardRef<HTMLElement, VideoBannerProps>((props, ref) => {
     };
   }, [inView, height, heightOnDesktop, heightOnMobile]);
 
+  const [scope] = useMotion(ref);
+
   return (
     <section
       ref={setRefs}
@@ -195,7 +198,7 @@ let VideoBanner = forwardRef<HTMLElement, VideoBannerProps>((props, ref) => {
           overlayOpacity={overlayOpacity}
           className="z-0"
         />
-        <div className={clsx(variants({gap}))}>{children}</div>
+        <div ref={scope} className={clsx(variants({gap}))}>{children}</div>
       </div>
     </section>
   );
diff --git a/app/weaverse/schema.server.ts b/app/weaverse/schema.server.ts
index a060475..6c1bb25 100644
--- a/app/weaverse/schema.server.ts
+++ b/app/weaverse/schema.server.ts
@@ -532,6 +532,12 @@ export const themeSchema: HydrogenThemeSchema = {
           name: "enableViewTransition",
           defaultValue: true,
         },
+        {
+          type: "switch",
+          label: "Enable scroll reveal",
+          name: "enableScrollReveal",
+          defaultValue: true,
+        }
       ],
     },
     {

From a5ce65930691e4c7109ad05487273889dbcece1b Mon Sep 17 00:00:00 2001
From: dangthang <dangthangkk2000@gmail.com>
Date: Thu, 21 Nov 2024 17:03:01 +0700
Subject: [PATCH 02/19] feat: enhance CollectionCard with rounded styles and
 add motion effects for smoother appearance

---
 app/sections/collection-list/collection-card.tsx | 12 ++++++------
 app/sections/feature-product/list-products.tsx   |  5 +++--
 app/sections/image-hotspots/index.tsx            | 10 ++++++++--
 app/sections/image-with-text/image.tsx           |  2 +-
 app/sections/instagram/index.tsx                 |  4 +++-
 app/sections/judgeme-reviews/review-form.tsx     |  3 +++
 app/sections/judgeme-reviews/review-list.tsx     |  6 +++---
 app/sections/newsletter/input-email.tsx          |  1 +
 app/sections/newsletter/newsletter-icon.tsx      |  2 +-
 app/sections/product-placement/productItem.tsx   |  2 +-
 app/sections/slides/index.tsx                    |  4 +++-
 app/sections/slides/slide.tsx                    |  3 ++-
 app/sections/slideshowbanner/index.tsx           |  4 +++-
 app/sections/testimonials/review.tsx             |  2 +-
 14 files changed, 39 insertions(+), 21 deletions(-)

diff --git a/app/sections/collection-list/collection-card.tsx b/app/sections/collection-list/collection-card.tsx
index ea90065..b4cb469 100644
--- a/app/sections/collection-list/collection-card.tsx
+++ b/app/sections/collection-list/collection-card.tsx
@@ -12,9 +12,9 @@ export function CollectionCard({
   loading?: HTMLImageElement['loading'];
 }) {
   return (
-    <Link to={`/collections/${collection.handle}`} className="grid gap-4 group relative">
-      <div className='w-full h-full flex justify-center items-center'>
-        <div className="card-image bg-primary/5 w-full h-full">
+    <Link to={`/collections/${collection.handle}`} className="grid gap-4 group relative rounded">
+      <div className='w-full h-full flex justify-center items-center rounded'>
+        <div className="card-image bg-primary/5 w-full h-full rounded">
           {collection?.image && (
             <Image
               data={collection.image}
@@ -23,15 +23,15 @@ export function CollectionCard({
               aspectRatio={imageAspectRatio}
               sizes="(max-width: 32em) 100vw, 45vw"
               loading={loading}
-              className='w-full h-full object-cover'
+              className='w-full h-full object-cover rounded'
             />
           )}
         </div>
       </div>
-      <div className='absolute inset-0 justify-center items-center z-10 flex'>
+      <div className='absolute inset-0 justify-center items-center z-10 flex rounded'>
         <h3 className='group-hover:underline text-white font-medium'>{collection.title}</h3>
       </div>
-      <div className='absolute inset-0 group-hover:bg-foreground group-hover:opacity-50 opacity-30 bg-foreground transition-opacity duration-500'/>
+      <div className='absolute inset-0 group-hover:bg-foreground group-hover:opacity-50 opacity-30 bg-foreground transition-opacity duration-500 rounded'/>
     </Link>
   );
 }
diff --git a/app/sections/feature-product/list-products.tsx b/app/sections/feature-product/list-products.tsx
index 4db8b60..5f4311d 100644
--- a/app/sections/feature-product/list-products.tsx
+++ b/app/sections/feature-product/list-products.tsx
@@ -71,13 +71,13 @@ const ListProducts = forwardRef<HTMLDivElement, FeaturedProductsProps>(
     const renderProducts = () => {
       if (!loaderData || !displayedProducts) {
         return Array.from({ length: 4 }).map((_, i) => (
-          <SwiperSlide key={i} data-motion="slide-in" className="w-full">
+          <SwiperSlide key={i} className="w-full">
             {productItemBlank()}
           </SwiperSlide>
         ));
       } else {
         return displayedProducts.map((product, i) => (
-          <SwiperSlide key={product.id} data-motion="slide-in">
+          <SwiperSlide key={product.id}>
               <ProductCard
                 quickAdd
                 product={product}
@@ -97,6 +97,7 @@ const ListProducts = forwardRef<HTMLDivElement, FeaturedProductsProps>(
         key={key}
         ref={ref}
         {...rest}
+        data-motion="fade-up"
         className={"group/arrow flex flex-col gap-12 px-0 md:px-8 lg:px-12"}
       >
         <Swiper
diff --git a/app/sections/image-hotspots/index.tsx b/app/sections/image-hotspots/index.tsx
index 1e52362..edcaf94 100644
--- a/app/sections/image-hotspots/index.tsx
+++ b/app/sections/image-hotspots/index.tsx
@@ -14,11 +14,17 @@ let Hotspots = forwardRef<HTMLElement, HotspotsProps>((props, ref) => {
   let { heading, description, children, ...rest } = props;
   return (
     <Section ref={ref} {...rest} overflow="unset">
-      {heading && <Heading as="h2" content={heading} />}
+      {heading && <Heading data-motion="fade-up" as="h2" content={heading} />}
       {description && (
-        <Description as="p" content={description} alignment="center" />
+        <Description
+          data-motion="fade-up"
+          as="p"
+          content={description}
+          alignment="center"
+        />
       )}
       <div
+        data-motion="zoom-in"
         className={clsx(
           "grid grid-cols-1 gap-4 md:gap-6 lg:gap-8 w-full h-full",
           React.Children.count(children) > 1
diff --git a/app/sections/image-with-text/image.tsx b/app/sections/image-with-text/image.tsx
index eeb1dab..1449a26 100644
--- a/app/sections/image-with-text/image.tsx
+++ b/app/sections/image-with-text/image.tsx
@@ -76,7 +76,7 @@ let ImageWithTextImage = forwardRef<HTMLDivElement, ImageWithTextImageProps>(
     }
 
     return (
-      <div ref={ref} {...rest} className={cn(variants({width}))}>
+      <div data-motion="zoom-in" ref={ref} {...rest} className={cn(variants({width}))}>
         <Image
           data={imageData}
           sizes="auto"
diff --git a/app/sections/instagram/index.tsx b/app/sections/instagram/index.tsx
index 701a010..0e400f8 100644
--- a/app/sections/instagram/index.tsx
+++ b/app/sections/instagram/index.tsx
@@ -11,6 +11,7 @@ import 'swiper/css/pagination';
 import {IconImageBlank, IconInstagram} from '~/components/Icon';
 import clsx from 'clsx';
 import {Pagination} from 'swiper/modules';
+import { useMotion } from '~/hooks/use-motion';
 
 type InstagramData = {
   instagramToken: string;
@@ -50,6 +51,7 @@ const Instagram = forwardRef<HTMLElement, InstagramProps>((props, ref) => {
     children,
     ...rest
   } = props;
+  const [scope] = useMotion(ref);
 
   let sectionStyle: CSSProperties = {
     backgroundColor: backgroundColor,
@@ -123,7 +125,7 @@ const Instagram = forwardRef<HTMLElement, InstagramProps>((props, ref) => {
 
   return (
     <section
-      ref={ref}
+      ref={scope}
       {...rest}
       className={clsx('h-full w-full', !visibleOnMobile && 'hidden sm:block')}
       style={sectionStyle}
diff --git a/app/sections/judgeme-reviews/review-form.tsx b/app/sections/judgeme-reviews/review-form.tsx
index 84609b7..43bbba3 100644
--- a/app/sections/judgeme-reviews/review-form.tsx
+++ b/app/sections/judgeme-reviews/review-form.tsx
@@ -54,6 +54,7 @@ export function ReviewForm({
     >
       {judgemeReviews.reviews.length !== 0 || !isFormVisible ? (
         <div
+          data-motion="fade-up"
           className={clsx(
             "flex flex-col gap-4 bg-background-subtle-1 p-6 w-full",
             judgemeReviews.reviews.length === 0 ? "items-center" : "items-start"
@@ -90,6 +91,7 @@ export function ReviewForm({
       ) : null}
       {isFormVisible && (
         <div
+          data-motion="fade-up"
           className={clsx(
             "bg-background-subtle-1 p-6 w-full",
             judgemeReviews.reviews.length === 0 && "flex justify-center"
@@ -237,6 +239,7 @@ export function ReviewForm({
       )}
       {isPopupVisible && (
         <div
+          data-motion="fade-up"
           className={clsx(
             "flex flex-col gap-6 p-6 bg-background-subtle-1 w-full",
             judgemeReviews.reviews.length === 0 && "items-center"
diff --git a/app/sections/judgeme-reviews/review-list.tsx b/app/sections/judgeme-reviews/review-list.tsx
index 09567c7..4f26e3f 100644
--- a/app/sections/judgeme-reviews/review-list.tsx
+++ b/app/sections/judgeme-reviews/review-list.tsx
@@ -23,7 +23,7 @@ export function ReviewList({judgemeReviews}: {judgemeReviews: JudgemeReviewsData
           Reviews ({judgemeReviews.reviewNumber})
         </span>
         {reviews.map((review, index) => (
-          <>
+          <div data-motion="fade-up">
             <div key={index} className="flex gap-4 flex-col md:flex-row">
               <div className="flex flex-col gap-4 md:w-1/4 w-full">
                 <div className="flex items-center gap-0.5">
@@ -43,11 +43,11 @@ export function ReviewList({judgemeReviews}: {judgemeReviews: JudgemeReviewsData
               </div>
             </div>
             <hr className="border-t border-bar-subtle" />
-          </>
+          </div>
         ))}
       </div>
       {pageNumber > 1 && (
-        <div className="flex justify-center gap-2">
+        <div data-motion="fade-up" className="flex justify-center gap-2">
           {Array.from({ length: pageNumber }, (_, i) => (
             <button
               key={i}
diff --git a/app/sections/newsletter/input-email.tsx b/app/sections/newsletter/input-email.tsx
index 50c1329..cf3b9d4 100644
--- a/app/sections/newsletter/input-email.tsx
+++ b/app/sections/newsletter/input-email.tsx
@@ -50,6 +50,7 @@ const NewsletterInput = forwardRef<HTMLDivElement, InputEmailProps>((props, ref)
     <div
       ref={ref}
       {...rest}
+      data-motion="fade-up"
       style={style}
       className="flex h-full flex-col items-center justify-center gap-5 text-center"
     >
diff --git a/app/sections/newsletter/newsletter-icon.tsx b/app/sections/newsletter/newsletter-icon.tsx
index 025e942..b5e58af 100644
--- a/app/sections/newsletter/newsletter-icon.tsx
+++ b/app/sections/newsletter/newsletter-icon.tsx
@@ -19,7 +19,7 @@ const NewsletterIcon = forwardRef<HTMLDivElement, NewsletterIconProps>((props, r
   } as CSSProperties;
 
   return (
-    <div ref={ref} {...rest} style={style} className="flex items-center justify-center">
+    <div data-motion="fade-up" ref={ref} {...rest} style={style} className="flex items-center justify-center">
       {iconImage ? (
         <Image
           data={iconImage}
diff --git a/app/sections/product-placement/productItem.tsx b/app/sections/product-placement/productItem.tsx
index b99d0d0..8b69f57 100644
--- a/app/sections/product-placement/productItem.tsx
+++ b/app/sections/product-placement/productItem.tsx
@@ -22,7 +22,7 @@ const ProductPlacementItem = forwardRef<
   let {image, product, ...rest} = props;
   let contentStyle: CSSProperties = {} as CSSProperties;
   return (
-    <div ref={ref} {...rest} style={contentStyle} className="h-full w-full">
+    <div data-motion="slide-in" ref={ref} {...rest} style={contentStyle} className="h-full w-full">
       {image ? (
         <div className="relative h-full w-full">
           <Image
diff --git a/app/sections/slides/index.tsx b/app/sections/slides/index.tsx
index 80c227b..a71c66d 100644
--- a/app/sections/slides/index.tsx
+++ b/app/sections/slides/index.tsx
@@ -8,6 +8,7 @@ import {Swiper, SwiperSlide} from 'swiper/react';
 import 'swiper/css';
 import 'swiper/css/effect-fade';
 import clsx from 'clsx';
+import { useMotion } from '~/hooks/use-motion';
 
 interface SlidesProps extends HydrogenComponentProps {
   sectionHeight: number;
@@ -22,6 +23,7 @@ let widthClasses: {[item: string]: string} = {
 const Slides = forwardRef<HTMLElement, SlidesProps>((props, ref) => {
   let {sectionHeight, width, children, ...rest} = props;
   const [isMobile, setIsMobile] = useState(false);
+  const [scope] = useMotion(ref);
   useEffect(() => {
     const handleResize = () => {
       setIsMobile(window.innerWidth < 640);
@@ -42,7 +44,7 @@ const Slides = forwardRef<HTMLElement, SlidesProps>((props, ref) => {
 
   return (
     <section
-      ref={ref}
+      ref={scope}
       {...rest}
       style={sectionStyle}
       className={clsx(
diff --git a/app/sections/slides/slide.tsx b/app/sections/slides/slide.tsx
index 5814f79..f0fa05b 100644
--- a/app/sections/slides/slide.tsx
+++ b/app/sections/slides/slide.tsx
@@ -52,6 +52,7 @@ const Slide = forwardRef<HTMLDivElement, SlideProps>((props, ref) => {
             <div className='h-full w-full sm:px-0'>
                 <div className={clsx('flex flex-col justify-center items-center h-full w-full', AlignImageClasses[imageAlignment!])}>
                     <div
+                        data-motion="zoom-in"
                         className="w-full h-1/2 sm:h-full flex flex-1 items-center justify-center sm:w-1/2 aspect-square overflow-hidden"
                     >
                         {backgroundImage ? (
@@ -78,7 +79,7 @@ const Slide = forwardRef<HTMLDivElement, SlideProps>((props, ref) => {
                         )}>
                             {children}
                         </div>
-                        <div className='sm:flex gap-4 justify-center items-center hidden'>
+                        <div data-motion="fade-up" className='sm:flex gap-4 justify-center items-center hidden'>
                             <IconArrowLeft onClick={() => swiper.slidePrev()} className='w-8 h-8 cursor-pointer' viewBox='0 0 32 32' />
                             <IconArrowRight onClick={() => swiper.slideNext()} className='w-8 h-8 cursor-pointer' viewBox='0 0 32 32' />
                         </div>
diff --git a/app/sections/slideshowbanner/index.tsx b/app/sections/slideshowbanner/index.tsx
index 96659b2..8c821a0 100644
--- a/app/sections/slideshowbanner/index.tsx
+++ b/app/sections/slideshowbanner/index.tsx
@@ -13,6 +13,7 @@ import type {SlideshowArrowsProps} from './arrows';
 import {Arrows} from './arrows';
 import type {SlideshowDotsProps} from './dots';
 import {Dots} from './dots';
+import { useMotion } from '~/hooks/use-motion';
 
 let variants = cva('group [&_.swiper]:h-full', {
   variants: {
@@ -60,12 +61,13 @@ let Slideshow = forwardRef<HTMLDivElement, SlideshowProps>((props, ref) => {
     children = [],
     ...rest
   } = props;
+  const [scope] = useMotion(ref);
 
   let id = rest['data-wv-id'];
   let key = `slideshow-${id}-${loop}-${autoRotate}-${changeSlidesEvery}`;
 
   return (
-    <section key={key} ref={ref} {...rest} className={variants({height})}>
+    <section key={key} ref={scope} {...rest} className={variants({height})}>
       <Swiper
         effect="fade"
         loop={loop}
diff --git a/app/sections/testimonials/review.tsx b/app/sections/testimonials/review.tsx
index 70f8e24..88dd01a 100644
--- a/app/sections/testimonials/review.tsx
+++ b/app/sections/testimonials/review.tsx
@@ -28,7 +28,7 @@ const Review = forwardRef<HTMLDivElement, ReviewProps>((props, ref) => {
         return stars;
     };
     return (
-        <div ref={ref} {...rest} className='border rounded border-[var(--border-color)] gap-2 p-6 flex flex-col relative'>
+        <div data-motion="fade-up" ref={ref} {...rest} className='border rounded border-[var(--border-color)] gap-2 p-6 flex flex-col relative'>
             {name && <h4 className='font-medium text-[var(--text-color)]'>{name}</h4>}
             <p className='flex gap-1'>
                 {renderStars()}

From 8b16aa7c509669e723e94cf258727c2507ebdfdf Mon Sep 17 00:00:00 2001
From: dangthang <dangthangkk2000@gmail.com>
Date: Thu, 21 Nov 2024 17:04:27 +0700
Subject: [PATCH 03/19] feat: update styles in Cart and ResultItem components
 to include rounded corners for a polished look

---
 app/components/Cart.tsx                         | 2 +-
 app/components/predictive-search/ResultItem.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/Cart.tsx b/app/components/Cart.tsx
index da6b3c1..2326da7 100644
--- a/app/components/Cart.tsx
+++ b/app/components/Cart.tsx
@@ -130,7 +130,7 @@ function CartLineItem({
             height={100}
             loading="lazy"
             width={100}
-            className="object-cover"
+            className="object-cover rounded-[2px]"
           />
         )}
       </td>
diff --git a/app/components/predictive-search/ResultItem.tsx b/app/components/predictive-search/ResultItem.tsx
index 9044be1..a6538bc 100644
--- a/app/components/predictive-search/ResultItem.tsx
+++ b/app/components/predictive-search/ResultItem.tsx
@@ -23,7 +23,7 @@ export function SearchResultItem({
                 src={item.image.url}
                 width={80}
                 height={80}
-                className="h-full w-full object-cover"
+                className="h-full w-full object-cover rounded-[2px]"
               />
             )}
           </div>

From 77563cbf0b1aed6bb48e8db986e504385337a9be Mon Sep 17 00:00:00 2001
From: dangthang <dangthangkk2000@gmail.com>
Date: Tue, 3 Dec 2024 16:02:44 +0700
Subject: [PATCH 04/19] update color theme setting

---
 app/weaverse/schema.server.ts | 616 +++++++++++++++++++---------------
 1 file changed, 354 insertions(+), 262 deletions(-)

diff --git a/app/weaverse/schema.server.ts b/app/weaverse/schema.server.ts
index 6c1bb25..898cb85 100644
--- a/app/weaverse/schema.server.ts
+++ b/app/weaverse/schema.server.ts
@@ -1,4 +1,4 @@
-import type {HydrogenThemeSchema} from '@weaverse/hydrogen';
+import type { HydrogenThemeSchema } from "@weaverse/hydrogen";
 let variantSwatch = {
   configs: [],
   swatches: {
@@ -8,28 +8,28 @@ let variantSwatch = {
 };
 export const themeSchema: HydrogenThemeSchema = {
   info: {
-    version: '1.0.0',
-    author: 'Weaverse',
-    name: 'Naturélle',
+    version: "1.0.0",
+    author: "Weaverse",
+    name: "Naturélle",
     authorProfilePhoto:
-      'https://cdn.shopify.com/s/files/1/0838/0052/3057/files/Weaverse_logo_-_3000x_e2fa8c13-dac2-4dcb-a2c2-f7aaf7a58169.png?v=1698245759',
-    documentationUrl: 'https://weaverse.io/docs',
-    supportUrl: 'https://weaverse.io/contact',
+      "https://cdn.shopify.com/s/files/1/0838/0052/3057/files/Weaverse_logo_-_3000x_e2fa8c13-dac2-4dcb-a2c2-f7aaf7a58169.png?v=1698245759",
+    documentationUrl: "https://weaverse.io/docs",
+    supportUrl: "https://weaverse.io/contact",
   },
   inspector: [
     {
-      group: 'Product swatches',
+      group: "Product swatches",
       inputs: [
         {
-          type: 'swatches',
-          name: 'swatches',
-          label: 'Config swatches',
+          type: "swatches",
+          name: "swatches",
+          label: "Config swatches",
           defaultValue: variantSwatch,
         },
       ],
     },
     {
-      group: 'Layout',
+      group: "Layout",
       inputs: [
         {
           type: "range",
@@ -44,14 +44,14 @@ export const themeSchema: HydrogenThemeSchema = {
           defaultValue: 1440,
         },
         {
-          type: 'range',
-          label: 'Nav height (mobile)',
-          name: 'navHeightMobile',
+          type: "range",
+          label: "Nav height (mobile)",
+          name: "navHeightMobile",
           configs: {
             min: 2,
             max: 8,
             step: 1,
-            unit: 'rem',
+            unit: "rem",
           },
           defaultValue: 3,
         },
@@ -82,7 +82,7 @@ export const themeSchema: HydrogenThemeSchema = {
       ],
     },
     {
-      group: 'Header',
+      group: "Header",
       inputs: [
         {
           type: "toggle-group",
@@ -92,9 +92,9 @@ export const themeSchema: HydrogenThemeSchema = {
             options: [
               { value: "mega", label: "Mega" },
               { value: "drawer", label: "Drawer" },
-            ]
+            ],
           },
-          defaultValue: "mega"
+          defaultValue: "mega",
         },
         {
           type: "switch",
@@ -103,23 +103,23 @@ export const themeSchema: HydrogenThemeSchema = {
           defaultValue: true,
         },
         {
-          type: 'image',
-          name: 'logoData',
-          label: 'Logo',
+          type: "image",
+          name: "logoData",
+          label: "Logo",
           defaultValue: {
-            altText: 'Logo',
-            url: 'https://cdn.shopify.com/s/files/1/0838/0052/3057/files/naturelle_logo.png?v=1705045487',
+            altText: "Logo",
+            url: "https://cdn.shopify.com/s/files/1/0838/0052/3057/files/naturelle_logo.png?v=1705045487",
             width: 320,
             height: 116,
           },
         },
         {
-          type: 'image',
-          name: 'transparentLogoData',
-          label: 'Transparent Logo',
+          type: "image",
+          name: "transparentLogoData",
+          label: "Transparent Logo",
           defaultValue: {
-            altText: 'Logo',
-            url: 'https://cdn.shopify.com/s/files/1/0652/5888/1081/files/Property_1_White.png?v=1720064102',
+            altText: "Logo",
+            url: "https://cdn.shopify.com/s/files/1/0652/5888/1081/files/Property_1_White.png?v=1720064102",
             width: 320,
             height: 116,
           },
@@ -144,50 +144,32 @@ export const themeSchema: HydrogenThemeSchema = {
             options: [
               { value: "popupSearch", label: "Popup search" },
               { value: "drawerSearch", label: "Drawer search" },
-            ]
+            ],
           },
-          defaultValue: "headerSearch"
+          defaultValue: "headerSearch",
         },
         {
-          type: 'heading',
-          label: 'Trial shipping',
+          type: "heading",
+          label: "Trial shipping",
         },
         {
-          type: 'textarea',
-          name: 'content',
-          label: 'Text',
-          defaultValue:
-            'FREE SHIPPING IN THE US FOR ORDER OVER $100',
+          type: "textarea",
+          name: "content",
+          label: "Text",
+          defaultValue: "FREE SHIPPING IN THE US FOR ORDER OVER $100",
         },
         {
-          type: 'toggle-group',
-          label: 'Text size',
-          name: 'textSize',
+          type: "toggle-group",
+          label: "Text size",
+          name: "textSize",
           configs: {
             options: [
-              {label: 'S', value: '16'},
-              {label: 'M', value: '18'},
-              {label: 'L', value: '20'},
+              { label: "S", value: "16" },
+              { label: "M", value: "18" },
+              { label: "L", value: "20" },
             ],
           },
-          defaultValue: '16',
-        },
-        {
-          type: 'color',
-          name: 'textColor',
-          label: 'Text color',
-        },
-        {
-          type: 'color',
-          name: 'borderColor',
-          label: 'Border color',
-          defaultValue: '#3D490B',
-        },
-        {
-          type: 'color',
-          name: 'backgroundColor',
-          label: 'Background color',
-          defaultValue: '#E5E7D4',
+          defaultValue: "16",
         },
         {
           type: "range",
@@ -202,36 +184,36 @@ export const themeSchema: HydrogenThemeSchema = {
           defaultValue: 48,
         },
         {
-          type: 'switch',
-          name: 'enableScrollingText',
-          label: 'Enable scrolling text',
+          type: "switch",
+          name: "enableScrollingText",
+          label: "Enable scrolling text",
           defaultValue: false,
         },
         {
-          type: 'range',
-          name: 'speed',
-          label: 'Speed',
+          type: "range",
+          name: "speed",
+          label: "Speed",
           defaultValue: 9,
           configs: {
             min: 0.1,
             max: 20,
             step: 0.1,
-            unit: 's',
+            unit: "s",
           },
-          condition: 'enableScrollingText.eq.true',
+          condition: "enableScrollingText.eq.true",
         },
         {
-          type: 'range',
-          name: 'gap',
-          label: 'Gap',
+          type: "range",
+          name: "gap",
+          label: "Gap",
           defaultValue: 10,
           configs: {
             min: 0,
             max: 100,
             step: 1,
-            unit: 'px',
+            unit: "px",
           },
-          condition: 'enableScrollingText.eq.true',
+          condition: "enableScrollingText.eq.true",
         },
         {
           type: "switch",
@@ -240,47 +222,41 @@ export const themeSchema: HydrogenThemeSchema = {
           defaultValue: true,
         },
         {
-          type: 'switch',
-          name: 'enableTrialShipping',
-          label: 'Enable trial shipping',
+          type: "switch",
+          name: "enableTrialShipping",
+          label: "Enable trial shipping",
           defaultValue: false,
         },
       ],
     },
     {
-      group: 'Footer',
+      group: "Footer",
       inputs: [
         {
-          type: 'text',
-          label: 'Footer text Copyright @',
-          name: 'footerTextCopyright',
-          defaultValue: '© 2024 Weaverse. All rights reserved.',
-        },
-        {
-          type: 'color',
-          label: 'Footer menu background color',
-          name: 'footerMenuBackgroundColor',
-          defaultValue: '#C5C6BB',
+          type: "text",
+          label: "Footer text Copyright @",
+          name: "footerTextCopyright",
+          defaultValue: "© 2024 Weaverse. All rights reserved.",
         },
         {
-          type: 'select',
-          name: 'tagNameTitle',
-          label: 'Tag name title',
+          type: "select",
+          name: "tagNameTitle",
+          label: "Tag name title",
           configs: {
             options: [
-              {value: 'h1', label: '<h1> (Heading 1)'},
-              {value: 'h2', label: '<h2> (Heading 2)'},
-              {value: 'h3', label: '<h3> (Heading 3)'},
-              {value: 'h4', label: '<h4> (Heading 4)'},
-              {value: 'h5', label: '<h5> (Heading 5)'},
-              {value: 'h6', label: '<h6> (Heading 6)'},
+              { value: "h1", label: "<h1> (Heading 1)" },
+              { value: "h2", label: "<h2> (Heading 2)" },
+              { value: "h3", label: "<h3> (Heading 3)" },
+              { value: "h4", label: "<h4> (Heading 4)" },
+              { value: "h5", label: "<h5> (Heading 5)" },
+              { value: "h6", label: "<h6> (Heading 6)" },
             ],
           },
-          defaultValue: 'h6',
+          defaultValue: "h6",
         },
         {
-          type: 'heading',
-          label: 'Newsletter',
+          type: "heading",
+          label: "Newsletter",
         },
         {
           type: "text",
@@ -292,7 +268,8 @@ export const themeSchema: HydrogenThemeSchema = {
           type: "text",
           name: "newsletterDescription",
           label: "Newsletter description",
-          defaultValue: "Sign up for 15% off and updates straight to your inbox.",
+          defaultValue:
+            "Sign up for 15% off and updates straight to your inbox.",
         },
         {
           type: "text",
@@ -305,150 +282,265 @@ export const themeSchema: HydrogenThemeSchema = {
           name: "newsletterButtonText",
           label: "Button text",
           defaultValue: "Subcribe",
-        }
+        },
       ],
     },
     {
-      group: 'Colors',
+      group: "Colors",
       inputs: [
         {
-          type: 'color',
-          label: 'Background',
-          name: 'colorBackground',
-          defaultValue: '#EEEFEA',
+          type: "heading",
+          label: "General",
+        },
+        {
+          type: "color",
+          label: "Background",
+          name: "colorBackground",
+          defaultValue: "#F0F2EE",
+        },
+        {
+          type: "color",
+          label: "Text (primary)",
+          name: "colorTextPrimary",
+          defaultValue: "#26490D",
+        },
+        {
+          type: "color",
+          label: "Text (subtle)",
+          name: "colorTextSubtle",
+          defaultValue: "#68887C",
+        },
+        {
+          type: "color",
+          label: "Text (inverse)",
+          name: "colorTextInverse",
+          defaultValue: "#FFFFFF",
+        },
+        {
+          type: "heading",
+          label: "Announcement bar",
         },
         {
-          type: 'color',
-          label: 'Subtle background',
-          name: 'colorBackgroundSubtle',
-          defaultValue: '#E5E6D4',
+          type: "color",
+          label: "Announcement text",
+          name: "topbarTextColor",
+          defaultValue: "#26490D",
         },
         {
-          type: 'color',
-          label: 'Subtle background 2',
-          name: 'colorBackgroundSubtle2',
-          defaultValue: '#C5C6BB',
+          type: "color",
+          label: "Announcement border",
+          name: "topbarBorderColor",
+          defaultValue: "#3d490b",
         },
         {
-          type: 'color',
-          label: 'Basic background',
-          name: 'colorBackgroundBasic',
-          defaultValue: '#FFFFFF',
+          type: "color",
+          label: "Announcement background",
+          name: "topbarBgColor",
+          defaultValue: "#E0E5D6",
         },
         {
-          type: 'color',
-          label: 'Foreground',
-          name: 'colorForeground',
-          defaultValue: '#3D490B',
+          type: "heading",
+          label: "Header",
         },
         {
-          type: 'color',
-          label: 'Subtle foreground',
-          name: 'colorForegroundSubtle',
-          defaultValue: '#8B926D',
+          type: "color",
+          label: "Header text",
+          name: "headerText",
+          defaultValue: "#26490D",
         },
         {
-          type: 'color',
-          label: 'Basic foreground',
-          name: 'colorForegroundBasic',
-          defaultValue: '#FFFFFF',
+          type: "color",
+          label: "Transparent header",
+          name: "transparentHeader",
+          defaultValue: "#ffffff",
         },
         {
-          type: 'color',
-          label: 'Primary',
-          name: 'colorPrimary',
-          defaultValue: '#3D490B',
+          type: "color",
+          label: "Header background",
+          name: "headerBgColor",
+          defaultValue: "#E0E5D6",
         },
+        { type: "heading", label: "Footer" },
         {
-          type: 'color',
-          label: 'Primary foreground',
-          name: 'colorPrimaryForeground',
-          defaultValue: '#EAEAD6',
+          type: "color",
+          label: "Footer text",
+          name: "footerText",
+          defaultValue: "#26490D",
         },
         {
-          type: 'color',
-          label: 'Secondary',
-          name: 'colorSecondary',
-          defaultValue: '#F8F8F0',
+          type: "color",
+          label: "Footer background",
+          name: "footerBgColor",
+          defaultValue: "#E0E5D6",
         },
+        { type: "heading", label: "Border" },
         {
-          type: 'color',
-          label: 'Secondary foreground',
-          name: 'colorSecondaryForeground',
-          defaultValue: '#3D490B',
+          type: "color",
+          label: "Border",
+          name: "borderColor",
+          defaultValue: "#386E4A",
         },
         {
-          type: 'color',
-          label: 'Outline',
-          name: 'colorOutline',
-          defaultValue: '#3D490B',
+          type: "color",
+          label: "Border (subtle)",
+          name: "borderSubtleColor",
+          defaultValue: "#78A286",
         },
+        {type: "heading", label: "Drawer"},
         {
-          type: 'color',
-          label: 'Outline foreground',
-          name: 'colorOutlineForeground',
-          defaultValue: '#3D490B',
+          type: "color",
+          label: "Drawer background",
+          name: "drawerBgColor",
+          defaultValue: "#E0E5D6",
         },
+        { type: "heading", label: "Buttons" },
+        {type: "heading", label: "Button primary"},
         {
-          type: 'color',
-          label: 'Border',
-          name: 'colorBorder',
-          defaultValue: '#3D490B',
+          type: "color",
+          label: "Button text",
+          name: "buttonTextPrimary",
+          defaultValue: "#EAEAD6",
+        },
+        {
+          type: "color",
+          label: "Button background",
+          name: "buttonBgColorPrimary",
+          defaultValue: "#2B602A",
         },
         {
-          type: 'color',
-          label: 'Border subtle',
-          name: 'colorBorderSubtle',
-          defaultValue: '#9AA473',
+          type: "color",
+          label: "Button border",
+          name: "buttonBorderColorPrimary",
+          defaultValue: "#2E6A53",
+        },
+        {
+          type: "color",
+          label: "Button text (hover)",
+          name: "buttonTextHoverPrimary",
+          defaultValue: "#2E6A53",
+        },
+        {
+          type: "color",
+          label: "Button background (hover)",
+          name: "buttonBgHoverPrimary",          
+          defaultValue: "#F8F8F0",
+        },
+        {
+          type: "color",
+          label: "Button border (hover)",
+          name: "buttonBorderHoverPrimary",
+          defaultValue: "#2E6A53",
+        },
+        {type: "heading", label: "Button secondary"},
+        {
+          type: "color",
+          label: "Button text",
+          name: "buttonTextSecondary",
+          defaultValue: "#2E6A53",
+        },
+        {
+          type: "color",
+          label: "Button background",
+          name: "buttonBgColorSecondary",
+          defaultValue: "#F8F8F0",
+        },
+        {
+          type: "color",
+          label: "Button border",
+          name: "buttonBorderColorSecondary",
+          defaultValue: "#2E6A53",
+        },
+        {
+          type: "color",
+          label: "Button text (hover)",
+          name: "buttonTextHoverSecondary",
+          defaultValue: "#F8F8F0",
+        },
+        {
+          type: "color",
+          label: "Button background (hover)",
+          name: "buttonBgHoverSecondary",          
+          defaultValue: "#2E6A53",
+        },
+        {
+          type: "color",
+          label: "Button border (hover)",
+          name: "buttonBorderHoverSecondary",
+          defaultValue: "#2E6A53",
+        },
+        {type: "heading", label: "Button outlined"},
+        {
+          type: "color",
+          label: "Button text",
+          name: "buttonTextOutline",
+          defaultValue: "#25490B",
+        },
+        {
+          type: "color",
+          label: "Button border",
+          name: "buttonBorderColorOutline",
+          defaultValue: "#25490B",
+        },
+        {
+          type: "color",
+          label: "Button text (hover)",
+          name: "buttonTextHoverOutline",
+          defaultValue: "#25490B",
+        },
+        {
+          type: "color",
+          label: "Button border (hover)",
+          name: "buttonBorderHoverOutline",
+          defaultValue: "#25490B",
         },
       ],
     },
     {
-      group: 'Typography',
+      group: "Typography",
       inputs: [
         {
-          type: 'heading',
-          label: 'Headings',
+          type: "heading",
+          label: "Headings",
         },
         {
-          type: 'select',
-          label: 'Letter spacing',
-          name: 'headingBaseSpacing',
+          type: "select",
+          label: "Letter spacing",
+          name: "headingBaseSpacing",
           configs: {
             options: [
-              {label: '-75', value: '-0.075em'},
-              {label: '-50', value: '-0.05em'},
-              {label: '-25', value: '-0.025em'},
-              {label: '-12.5', value: '-0.0125em'},
-              {label: '0', value: '0em'},
-              {label: '12.5', value: '0.0125em'},
-              {label: '25', value: '0.025em'},
-              {label: '50', value: '0.05em'},
-              {label: '75', value: '0.075em'},
-              {label: '100', value: '0.1em'},
-              {label: '150', value: '0.15em'},
-              {label: '200', value: '0.2em'},
-              {label: '250', value: '0.25em'},
+              { label: "-75", value: "-0.075em" },
+              { label: "-50", value: "-0.05em" },
+              { label: "-25", value: "-0.025em" },
+              { label: "-12.5", value: "-0.0125em" },
+              { label: "0", value: "0em" },
+              { label: "12.5", value: "0.0125em" },
+              { label: "25", value: "0.025em" },
+              { label: "50", value: "0.05em" },
+              { label: "75", value: "0.075em" },
+              { label: "100", value: "0.1em" },
+              { label: "150", value: "0.15em" },
+              { label: "200", value: "0.2em" },
+              { label: "250", value: "0.25em" },
             ],
           },
-          defaultValue: '0.025em',
+          defaultValue: "0.025em",
         },
         {
-          type: 'range',
-          label: 'Font size',
-          name: 'headingBaseSize',
+          type: "range",
+          label: "Font size",
+          name: "headingBaseSize",
           configs: {
             min: 22,
             max: 60,
             step: 1,
-            unit: 'px',
+            unit: "px",
           },
           defaultValue: 38,
         },
         {
-          type: 'range',
-          label: 'Line height',
-          name: 'headingBaseLineHeight',
+          type: "range",
+          label: "Line height",
+          name: "headingBaseLineHeight",
           configs: {
             min: 0.8,
             max: 2,
@@ -457,46 +549,46 @@ export const themeSchema: HydrogenThemeSchema = {
           defaultValue: 1.2,
         },
         {
-          type: 'heading',
-          label: 'Body text',
+          type: "heading",
+          label: "Body text",
         },
         {
-          type: 'select',
-          label: 'Letter spacing',
-          name: 'bodyBaseSpacing',
+          type: "select",
+          label: "Letter spacing",
+          name: "bodyBaseSpacing",
           configs: {
             options: [
-              {label: '-75', value: '-0.075em'},
-              {label: '-50', value: '-0.05em'},
-              {label: '-25', value: '-0.025em'},
-              {label: '0', value: '0em'},
-              {label: '25', value: '0.025em'},
-              {label: '50', value: '0.05em'},
-              {label: '75', value: '0.075em'},
-              {label: '100', value: '0.1em'},
-              {label: '150', value: '0.15em'},
-              {label: '200', value: '0.2em'},
-              {label: '250', value: '0.25em'},
+              { label: "-75", value: "-0.075em" },
+              { label: "-50", value: "-0.05em" },
+              { label: "-25", value: "-0.025em" },
+              { label: "0", value: "0em" },
+              { label: "25", value: "0.025em" },
+              { label: "50", value: "0.05em" },
+              { label: "75", value: "0.075em" },
+              { label: "100", value: "0.1em" },
+              { label: "150", value: "0.15em" },
+              { label: "200", value: "0.2em" },
+              { label: "250", value: "0.25em" },
             ],
           },
-          defaultValue: '0.025em',
+          defaultValue: "0.025em",
         },
         {
-          type: 'range',
-          label: 'Font size',
-          name: 'bodyBaseSize',
+          type: "range",
+          label: "Font size",
+          name: "bodyBaseSize",
           configs: {
             min: 12,
             max: 48,
             step: 1,
-            unit: 'px',
+            unit: "px",
           },
           defaultValue: 18,
         },
         {
-          type: 'range',
-          label: 'Line height',
-          name: 'bodyBaseLineHeight',
+          type: "range",
+          label: "Line height",
+          name: "bodyBaseLineHeight",
           configs: {
             min: 0.8,
             max: 2,
@@ -507,17 +599,17 @@ export const themeSchema: HydrogenThemeSchema = {
       ],
     },
     {
-      group: 'Buttons',
+      group: "Buttons",
       inputs: [
         {
-          type: 'range',
-          label: 'Corner radius',
-          name: 'radius',
+          type: "range",
+          label: "Corner radius",
+          name: "radius",
           configs: {
             min: 0,
             max: 2,
             step: 0.1,
-            unit: 'rem',
+            unit: "rem",
           },
           defaultValue: 2,
         },
@@ -537,72 +629,72 @@ export const themeSchema: HydrogenThemeSchema = {
           label: "Enable scroll reveal",
           name: "enableScrollReveal",
           defaultValue: true,
-        }
+        },
       ],
     },
     {
-      group: 'Quick view',
+      group: "Quick view",
       inputs: [
         {
-          type: 'text',
-          label: 'Add to cart text',
-          name: 'addToCartText',
-          defaultValue: 'Add to cart',
-          placeholder: 'Add to cart',
+          type: "text",
+          label: "Add to cart text",
+          name: "addToCartText",
+          defaultValue: "Add to cart",
+          placeholder: "Add to cart",
         },
         {
-          type: 'text',
-          label: 'Sold out text',
-          name: 'soldOutText',
-          defaultValue: 'Sold out',
-          placeholder: 'Sold out',
+          type: "text",
+          label: "Sold out text",
+          name: "soldOutText",
+          defaultValue: "Sold out",
+          placeholder: "Sold out",
         },
         {
-          type: 'text',
-          label: 'Unavailable text',
-          name: 'unavailableText',
-          defaultValue: 'Unavailable',
-          placeholder: 'Unavailable',
+          type: "text",
+          label: "Unavailable text",
+          name: "unavailableText",
+          defaultValue: "Unavailable",
+          placeholder: "Unavailable",
         },
         {
-          type: 'switch',
-          label: 'Show vendor',
-          name: 'showVendor',
+          type: "switch",
+          label: "Show vendor",
+          name: "showVendor",
           defaultValue: true,
         },
         {
-          type: 'switch',
-          label: 'Show sale price',
-          name: 'showSalePrice',
+          type: "switch",
+          label: "Show sale price",
+          name: "showSalePrice",
           defaultValue: true,
         },
         {
-          type: 'switch',
-          label: 'Show details',
-          name: 'showDetails',
+          type: "switch",
+          label: "Show details",
+          name: "showDetails",
           defaultValue: true,
         },
         {
-          type: 'switch',
-          label: 'Show shipping policy',
-          name: 'showShippingPolicy',
+          type: "switch",
+          label: "Show shipping policy",
+          name: "showShippingPolicy",
           defaultValue: true,
         },
         {
-          type: 'switch',
-          label: 'Show refund policy',
-          name: 'showRefundPolicy',
+          type: "switch",
+          label: "Show refund policy",
+          name: "showRefundPolicy",
           defaultValue: true,
         },
         {
-          label: 'Hide unavailable options',
-          type: 'switch',
-          name: 'hideUnavailableOptions',
+          label: "Hide unavailable options",
+          type: "switch",
+          name: "hideUnavailableOptions",
         },
         {
-          label: 'Show thumbnails',
-          name: 'showThumbnails',
-          type: 'switch',
+          label: "Show thumbnails",
+          name: "showThumbnails",
+          type: "switch",
           defaultValue: true,
         },
         {
@@ -621,9 +713,9 @@ export const themeSchema: HydrogenThemeSchema = {
           condition: "showThumbnails.eq.true",
         },
         {
-          label: 'Gap between images',
-          name: 'spacing',
-          type: 'range',
+          label: "Gap between images",
+          name: "spacing",
+          type: "range",
           configs: {
             min: 0,
             step: 2,
@@ -633,6 +725,6 @@ export const themeSchema: HydrogenThemeSchema = {
           condition: "showThumbnails.eq.true",
         },
       ],
-    }
+    },
   ],
 };

From 393f1d482fe297a28c7e74997a6a91a082baea1e Mon Sep 17 00:00:00 2001
From: dangthang <dangthangkk2000@gmail.com>
Date: Tue, 3 Dec 2024 16:03:17 +0700
Subject: [PATCH 05/19] Update config style color

---
 app/weaverse/style.tsx | 148 +++++++++++++++++++----------------------
 tailwind.config.js     |  27 ++------
 2 files changed, 73 insertions(+), 102 deletions(-)

diff --git a/app/weaverse/style.tsx b/app/weaverse/style.tsx
index 5566736..d0e42d5 100644
--- a/app/weaverse/style.tsx
+++ b/app/weaverse/style.tsx
@@ -23,20 +23,36 @@ export function GlobalStyle() {
   if (settings) {
     let {
       colorBackground,
-      colorBackgroundSubtle,
-      colorBackgroundSubtle2,
-      colorBackgroundBasic,
-      colorForeground,
-      colorForegroundSubtle,
-      colorForegroundBasic,
-      colorPrimary,
-      colorPrimaryForeground,
-      colorSecondary,
-      colorSecondaryForeground,
-      colorOutline,
-      colorOutlineForeground,
-      colorBorder,
-      colorBorderSubtle,
+      colorTextPrimary,
+      colorTextSubtle,
+      colorTextInverse,
+      topbarTextColor,
+      topbarBorderColor,
+      topbarBgColor,
+      headerText,
+      transparentHeader,
+      headerBgColor,
+      footerText,
+      footerBgColor,
+      borderColor,
+      borderSubtleColor,
+      drawerBgColor,
+      buttonTextPrimary,
+      buttonBgColorPrimary,
+      buttonBorderColorPrimary,
+      buttonTextHoverPrimary,
+      buttonBgHoverPrimary,
+      buttonBorderHoverPrimary,
+      buttonTextSecondary,
+      buttonBgColorSecondary,
+      buttonBorderColorSecondary,
+      buttonTextHoverSecondary,
+      buttonBgHoverSecondary,
+      buttonBorderHoverSecondary,
+      buttonTextOutline,
+      buttonBorderColorOutline,
+      buttonTextHoverOutline,
+      buttonBorderHoverOutline,
     } = settings;
     const {
       bodyBaseSize,
@@ -47,43 +63,16 @@ export function GlobalStyle() {
       headingBaseLineHeight,
       navHeightDesktop,
       navHeightTablet,
-      buttonPrimaryBg,
-      buttonPrimaryBgHover,
-      buttonPrimaryColor,
-      buttonPrimaryColorHover,
-      buttonPrimaryBorder,
-      buttonPrimaryBorderHover,
-      buttonSecondaryBg,
-      buttonSecondaryBgHover,
-      buttonSecondaryColor,
-      buttonSecondaryColorHover,
-      buttonSecondaryBorder,
-      buttonSecondaryBorderHover,
-      buttonSubtleBg,
-      buttonSubtleBgHover,
-      buttonSubtleColor,
-      buttonSubtleColorHover,
-      buttonSubtleBorder,
-      buttonSubtleBorderHover,
       radius,
       footerMenuBackgroundColor,
       pageWidth,
     } = settings;
     colorBackground = hexToRgbString(colorBackground);
-    colorBackgroundSubtle = hexToRgbString(colorBackgroundSubtle);
-    colorBackgroundSubtle2 = hexToRgbString(colorBackgroundSubtle2);
-    colorBackgroundBasic = hexToRgbString(colorBackgroundBasic);
-    colorForeground = hexToRgbString(colorForeground);
-    colorForegroundSubtle = hexToRgbString(colorForegroundSubtle);
-    colorForegroundBasic = hexToRgbString(colorForegroundBasic);
-    colorPrimary = hexToRgbString(colorPrimary);
-    colorPrimaryForeground = hexToRgbString(colorPrimaryForeground);
-    colorSecondary = hexToRgbString(colorSecondary);
-    colorSecondaryForeground = hexToRgbString(colorSecondaryForeground);
-    colorOutline = hexToRgbString(colorOutline);
-    colorOutlineForeground = hexToRgbString(colorOutlineForeground);
-    colorBorder = hexToRgbString(colorBorder);
-    colorBorderSubtle = hexToRgbString(colorBorderSubtle);
+    colorTextPrimary = hexToRgbString(colorTextPrimary);
+    colorTextSubtle = hexToRgbString(colorTextSubtle);
+    colorTextInverse = hexToRgbString(colorTextInverse);
+    borderColor = hexToRgbString(borderColor);
+    borderSubtleColor = hexToRgbString(borderSubtleColor);
     return (
       <style
         id="global-theme-style"
@@ -93,20 +82,21 @@ export function GlobalStyle() {
             :root {
               /* Colors */
               --color-background: ${colorBackground};
-              --color-background-subtle: ${colorBackgroundSubtle};
-              --color-background-subtle-2: ${colorBackgroundSubtle2};
-              --color-background-basic: ${colorBackgroundBasic};
-              --color-foreground: ${colorForeground};
-              --color-foreground-subtle: ${colorForegroundSubtle};
-              --color-foreground-basic: ${colorForegroundBasic};
-              --color-primary: ${colorPrimary};
-              --color-primary-foreground: ${colorPrimaryForeground};
-              --color-secondary: ${colorSecondary};
-              --color-secondary-foreground: ${colorSecondaryForeground};
-              --color-outline: ${colorOutline};
-              --color-outline-foreground: ${colorOutlineForeground};
-              --color-border: ${colorBorder};
-              --color-border-subtle: ${colorBorderSubtle};
+              --color-text-primary: ${colorTextPrimary};
+              --color-text-subtle: ${colorTextSubtle};
+              --color-text-inverse: ${colorTextInverse};
+              --color-topbar-text: ${topbarTextColor};
+              --color-topbar-border: ${topbarBorderColor};
+              --color-topbar-bg: ${topbarBgColor};
+              --color-header-text: ${headerText};
+              --color-transparent-header: ${transparentHeader};
+              --color-header-bg: ${headerBgColor};
+              --color-footer-text: ${footerText};
+              --color-footer-bg: ${footerBgColor};
+              --color-border: ${borderColor};
+              --color-border-subtle: ${borderSubtleColor};
+              --color-drawer-bg: ${drawerBgColor};
+              
 
               /* Typography */
               --body-base-size: ${bodyBaseSize}px;
@@ -192,36 +182,34 @@ export function GlobalStyle() {
               }
             }
             .btn-primary{
-              background-color: ${buttonPrimaryBg};
-              color: ${buttonPrimaryColor};
-              border: 2px solid ${buttonPrimaryBorder};
+              background-color: ${buttonBgColorPrimary};
+              color: ${buttonTextPrimary}!important;
+              border: 1px solid ${buttonBorderColorPrimary};
             }
             .btn-primary:hover{
-              background-color: ${buttonPrimaryBgHover}!important;
-              color: ${buttonPrimaryColorHover}!important;
-              border: 2px solid ${buttonPrimaryBorderHover} !important;
+              background-color: ${buttonBgHoverPrimary}!important;
+              color: ${buttonTextHoverPrimary}!important;
+              border: 1px solid ${buttonBorderHoverPrimary}!important;
               transition: 0.3s background-color color border;
             }
             .btn-secondary{
-              background-color: ${buttonSecondaryBg};
-              color: ${buttonSecondaryColor};
-              border: 2px solid ${buttonSecondaryBorder};
+              background-color: ${buttonBgColorSecondary};
+              color: ${buttonTextSecondary}!important;
+              border: 1px solid ${buttonBorderColorSecondary};
             }
             .btn-secondary:hover{
-              background-color: ${buttonSecondaryBgHover}!important;
-              color: ${buttonSecondaryColorHover}!important;
-              border: 2px solid ${buttonSecondaryBorderHover} !important;
+              background-color: ${buttonBgHoverSecondary}!important;
+              color: ${buttonTextHoverSecondary}!important;
+              border: 1px solid ${buttonBorderHoverSecondary}!important;
               transition: 0.3s background-color color border;
             }
-            .btn-subtle{
-              background-color: ${buttonSubtleBg};
-              color: ${buttonSubtleColor};
-              border: 2px solid ${buttonSubtleBorder};
+            .btn-outline{
+              color: ${buttonTextOutline}!important;
+              border: 1px solid ${buttonBorderColorOutline};
             }
-            .btn-subtle:hover{
-              background-color: ${buttonSubtleBgHover}!important;
-              color: ${buttonSubtleColorHover}!important;
-              border: 2px solid ${buttonSubtleBorderHover} !important;
+            .btn-outline:hover{
+              color: ${buttonTextHoverOutline}!important;
+              border: 1px solid ${buttonBorderHoverOutline} !important;
               transition: 0.3s background-color color border;
             }
           `,
diff --git a/tailwind.config.js b/tailwind.config.js
index 2a8b675..79c60b2 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -38,30 +38,13 @@ module.exports = {
       colors: {
         background: {
           DEFAULT: 'rgb(var(--color-background) / <alpha-value>)',
-          subtle: {
-            1: 'rgb(var(--color-background-subtle) / <alpha-value>)',
-            2: 'rgb(var(--color-background-subtle-2) / <alpha-value>)',
-          },
-          basic: 'rgb(var(--color-background-basic) / <alpha-value>)',
         },
-        foreground: {
-          DEFAULT: 'rgb(var(--color-foreground) / <alpha-value>)',
-          subtle: 'rgb(var(--color-foreground-subtle) / <alpha-value>)',
-          basic: 'rgb(var(--color-foreground-basis) / <alpha-value>)',
+        text: {
+          primary: 'rgb(var(--color-text-primary) / <alpha-value>)',
+          subtle: 'rgb(var(--color-text-subtle) / <alpha-value>)',
+          inverse: 'rgb(var(--color-text-inverse) / <alpha-value>)',
         },
-        primary: {
-          DEFAULT: 'rgb(var(--color-primary) / <alpha-value>)',
-          foreground: 'rgb(var(--color-primary-foreground) / <alpha-value>)',
-        },
-        secondary: {
-          DEFAULT: 'rgb(var(--color-secondary) / <alpha-value>)',
-          foreground: 'rgb(var(--color-secondary-foreground) / <alpha-value>)',
-        },
-        outline: {
-          DEFAULT: 'rgb(var(--color-outline) / <alpha-value>)',
-          foreground: 'rgb(var(--color-outline-foreground) / <alpha-value>)',
-        },
-        bar: {
+        border: {
           DEFAULT: 'rgb(var(--color-border) / <alpha-value>)',
           subtle: 'rgb(var(--color-border-subtle) / <alpha-value>)',
         },

From b5dcf9bf2e7309fd30529dee68fa77a8f70330a9 Mon Sep 17 00:00:00 2001
From: dangthang <dangthangkk2000@gmail.com>
Date: Tue, 3 Dec 2024 16:03:41 +0700
Subject: [PATCH 06/19] refactor: update Button and Input components with new
 classes and structure; adjust global styles in tailwind.css for consistency

---
 @/components/button.tsx   | 12 ++---
 @/components/input.tsx    | 94 +++++++++++++++++++++++++++++++++++----
 app/components/Button.tsx | 61 -------------------------
 app/components/Input.tsx  | 90 -------------------------------------
 app/styles/tailwind.css   |  6 +--
 5 files changed, 96 insertions(+), 167 deletions(-)
 delete mode 100644 app/components/Button.tsx
 delete mode 100644 app/components/Input.tsx

diff --git a/@/components/button.tsx b/@/components/button.tsx
index 499a855..cf5a075 100644
--- a/@/components/button.tsx
+++ b/@/components/button.tsx
@@ -10,12 +10,12 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        primary: 'bg-primary text-primary-foreground border border-primary hover:bg-transparent hover:text-foreground hover:border-bar',
+        primary: 'btn-primary',
         secondary:
-          'border border-bar bg-transparent hover:bg-primary hover:text-secondary',
+          'btn-secondary',
         outline:
-          'bg-transparent border border-bar text-secondary-foreground !font-heading',
-        link: 'text-primary underline-offset-4 hover:underline',
+          'btn-outline !font-heading',
+        link: 'text-text-primary underline-offset-4 hover:underline',
         decor: 'relative',
         custom: '',
       },
@@ -49,6 +49,7 @@ export interface ButtonProps
   as?: React.ElementType;
   to?: string;
   target?: string;
+  classNameContainer?: string;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
@@ -62,6 +63,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       fontFamily = 'body',
       asChild,
       as = 'button',
+      classNameContainer,
       children,
       ...props
     },
@@ -84,7 +86,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
             <Spinner size={20} />
           </div>
         )}
-        <span className={loading ? 'invisible' : ''}>{children}</span>
+        <span className={cn(classNameContainer, loading ? 'invisible' : '')}>{children}</span>
       </Component>
     );
   },
diff --git a/@/components/input.tsx b/@/components/input.tsx
index fd6d26c..08e24de 100644
--- a/@/components/input.tsx
+++ b/@/components/input.tsx
@@ -1,23 +1,101 @@
 import * as React from 'react';
-
 import {cn} from '@/lib/utils';
+import { cva, VariantProps } from 'class-variance-authority';
+import { useState } from 'react';
+import { IconClose } from '~/components/Icon';
+import clsx from 'clsx';
+
+const inputVariants = cva(
+  'w-full !shadow-none focus:ring-0 focus-visible:outline-none placeholder:text-text-primary bg-transparent',
+  {
+    variants: {
+      variant: {
+        default: 'flex w-full rounded border-2 border-border-subtle px-3 py-3 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:border-border hover:border-border disabled:cursor-not-allowed disabled:opacity-50',
+        search:
+          'px-0 py-2 text-sm placeholder-foreground-subtle w-full focus:ring-0 border-x-0 border-t-0 transition border-b-2 border-bar/10 focus:border-bar/50',
+        minisearch:
+          'hidden md:inline-block text-left lg:text-right border-b transition border-transparent -mb-px border-x-0 border-t-0 appearance-none px-0 py-1 focus:ring-transparent placeholder:opacity-20 placeholder:text-inherit focus:border-bar/50',
+        error: 'border-red-500',
+        custom: '',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
 
 export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {}
+  extends React.InputHTMLAttributes<HTMLInputElement>, VariantProps<typeof inputVariants> {
+    suffix?: React.ReactNode;
+    prefixElement?: React.ReactNode;
+    onClear?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  }
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({className, type, ...props}, ref) => {
-    return (
+  ({className,
+    type,
+    variant = 'default',
+    prefixElement,
+    suffix,
+    onFocus,
+    onBlur,
+    onClear,
+    ...rest}, ref) => {
+      let [focused, setFocused] = useState(false);
+    let commonClasses = cn(
+      'w-full rounded-sm border px-3 py-2.5',
+      focused ? 'border-border' : 'border-border-subtle',
+      className,
+    );
+
+    let handleClear = (e: any) => {
+      e.preventDefault();
+      e.stopPropagation();
+      e.currentTarget.previousSibling.value = '';
+      if (onClear) onClear(e);
+    };
+    if (type === 'search') {
+      suffix = <IconClose className="cursor-pointer" onClick={handleClear} />;
+    }
+    let hasChild = Boolean(prefixElement || suffix);
+
+    let rawInput = (
       <input
         type={type}
+        ref={ref}
         className={cn(
-          'flex w-full rounded border-2 border-bar-subtle px-3 py-3 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:border-bar hover:border-bar disabled:cursor-not-allowed disabled:opacity-50 placeholder:text-foreground-subtle',
-          className,
+          hasChild
+            ? 'relatvie grow border-none p-0'
+            : commonClasses,
+          inputVariants({variant}),
         )}
-        ref={ref}
-        {...props}
+        onFocus={(e) => {
+          setFocused(true);
+          if (onFocus) onFocus(e);
+        }}
+        onBlur={(e) => {
+          setFocused(false);
+          if (onBlur) onBlur(e);
+        }}
+        {...rest}
       />
     );
+
+    return hasChild ? (
+      <div
+        className={clsx(
+          commonClasses,
+          'flex items-center gap-2 overflow-hidden border p-2.5',
+        )}
+      >
+        {prefixElement}
+        {rawInput}
+        {suffix}
+      </div>
+    ) : (
+      rawInput
+    );
   },
 );
 Input.displayName = 'Input';
diff --git a/app/components/Button.tsx b/app/components/Button.tsx
deleted file mode 100644
index 62bda67..0000000
--- a/app/components/Button.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import {forwardRef} from 'react';
-import {Link} from '@remix-run/react';
-import clsx from 'clsx';
-
-import {missingClass} from '~/lib/utils';
-
-export const Button = forwardRef(
-  (
-    {
-      as = 'button',
-      className = '',
-      variant = 'primary',
-      width = 'auto',
-      ...props
-    }: {
-      as?: React.ElementType;
-      className?: string;
-      variant?: 'primary' | 'secondary' | 'inline' | 'secondary-white';
-      width?: 'auto' | 'full';
-      [key: string]: any;
-    },
-    ref,
-  ) => {
-    const Component = props?.to ? Link : as;
-
-    const baseButtonClasses =
-      'inline-block rounded font-medium text-center py-3 px-4 text-sm font-medium';
-
-    const disabledClasses =
-      'disabled:opacity-50 disabled:cursor-not-allowed disabled:select-none disabled:hover:bg-btn disabled:hover:text-btn-content';
-
-    const variants = {
-      primary: `${baseButtonClasses} border-2 border-btn hover:bg-inv-btn hover:text-inv-btn-content bg-btn text-btn-content`,
-      secondary: `${baseButtonClasses} border-2 border-btn text-btnTextInverse hover:bg-btn hover:text-btn-content`,
-      'secondary-white': `${baseButtonClasses} border-2 border-inv-btn text-btn hover:bg-inv-btn hover:text-inv-btn-content`,
-      inline: 'border-b border-bar/10 leading-none pb-1',
-    };
-
-    const widths = {
-      auto: 'w-auto',
-      full: 'w-full',
-    };
-
-    const styles = clsx(
-      missingClass(className, 'bg-') && variants[variant],
-      missingClass(className, 'w-') && widths[width],
-      disabledClasses,
-      className,
-    );
-
-    return (
-      <Component
-        // @todo: not supported until react-router makes it into Remix.
-        // preventScrollReset={true}
-        className={styles}
-        {...props}
-        ref={ref}
-      />
-    );
-  },
-);
diff --git a/app/components/Input.tsx b/app/components/Input.tsx
deleted file mode 100644
index 7a9c46b..0000000
--- a/app/components/Input.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import {cn} from '@/lib/utils';
-import clsx from 'clsx';
-import React, {useState} from 'react';
-import {IconClose} from './Icon';
-
-const variants = {
-  default: '',
-  search:
-    'px-0 py-2 text-sm placeholder-foreground-subtle w-full focus:ring-0 border-x-0 border-t-0 transition border-b-2 border-bar/10 focus:border-bar/50',
-  minisearch:
-    'hidden md:inline-block text-left lg:text-right border-b transition border-transparent -mb-px border-x-0 border-t-0 appearance-none px-0 py-1 focus:ring-transparent placeholder:opacity-20 placeholder:text-inherit focus:border-bar/50',
-  error: 'border-red-500',
-};
-
-interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
-  variant?: 'default' | 'search' | 'minisearch' | 'error';
-  suffix?: React.ReactNode;
-  prefixElement?: React.ReactNode;
-  onClear?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-}
-
-export let Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({
-    className = '',
-    type,
-    variant = 'default',
-    prefixElement,
-    suffix,
-    onFocus,
-    onBlur,
-    onClear,
-    ...rest
-  }, ref) => {
-    let [focused, setFocused] = useState(false);
-    let commonClasses = cn(
-      'w-full rounded-sm border px-3 py-2.5',
-      focused ? 'border-bar' : 'border-bar-subtle',
-      className,
-    );
-
-    let handleClear = (e: any) => {
-      e.preventDefault();
-      e.stopPropagation();
-      e.currentTarget.previousSibling.value = '';
-      if (onClear) onClear(e);
-    };
-    if (type === 'search') {
-      suffix = <IconClose className="cursor-pointer" onClick={handleClear} />;
-    }
-    let hasChild = Boolean(prefixElement || suffix);
-
-    let rawInput = (
-      <input
-        // type={type}
-        ref={ref}
-        className={clsx(
-          'w-full !shadow-none focus:ring-0 focus-visible:outline-none placeholder:text-foreground-subtle',
-          hasChild
-            ? 'relatvie grow border-none bg-transparent p-0'
-            : commonClasses,
-          variants[variant],
-        )}
-        onFocus={(e) => {
-          setFocused(true);
-          if (onFocus) onFocus(e);
-        }}
-        onBlur={(e) => {
-          setFocused(false);
-          if (onBlur) onBlur(e);
-        }}
-        {...rest}
-      />
-    );
-
-    return hasChild ? (
-      <div
-        className={clsx(
-          commonClasses,
-          'flex items-center gap-2 overflow-hidden border p-2.5',
-        )}
-      >
-        {prefixElement}
-        {rawInput}
-        {suffix}
-      </div>
-    ) : (
-      rawInput
-    );
-  },
-);
diff --git a/app/styles/tailwind.css b/app/styles/tailwind.css
index 8ac8335..1c9eed9 100644
--- a/app/styles/tailwind.css
+++ b/app/styles/tailwind.css
@@ -66,10 +66,10 @@
 
 @layer base {
     * {
-        @apply border-bar;
+        @apply border-border;
     }
     body {
-        @apply font-body bg-background text-foreground antialiased;
+        @apply font-body bg-background text-text-primary antialiased;
     }
     h1,
     h2,
@@ -203,7 +203,7 @@
 .animate-hover::before {
     content: "";
     /* transform-origin: right; */
-    @apply absolute bottom-0 left-0 w-full border-b-2 origin-right duration-300 transition-transform scale-x-0;
+    @apply absolute bottom-0 left-0 w-full border-b-2 border-border origin-right duration-300 transition-transform scale-x-0;
 }
 
 .animate-hover:hover::before {

From 69bfddc7d7635fb5e3c12333cf880d30512920d8 Mon Sep 17 00:00:00 2001
From: dangthang <dangthangkk2000@gmail.com>
Date: Tue, 3 Dec 2024 16:03:50 +0700
Subject: [PATCH 07/19] refactor: adjust ErrorBoundary layout for better
 responsiveness and structure in root.tsx; updated height and flex properties

---
 app/root.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/root.tsx b/app/root.tsx
index a37b8d6..29b3192 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -209,7 +209,7 @@ export function ErrorBoundary() {
   }
 
   return (
-    <div className="relative flex h-80 w-full items-center justify-center md:h-[500px] lg:h-[720px]">
+    <div className="relative flex w-full items-center justify-center h-screen">
       <div className="absolute inset-0 h-full w-full">
         <Image
           src="https://cdn.shopify.com/s/files/1/0652/5888/1081/files/d63681d5f3e2ce453bcac09ffead4d62.jpg?v=1720369103"

From db737611b64db364b65543b2dd6b32758b12e4a0 Mon Sep 17 00:00:00 2001
From: dangthang <dangthangkk2000@gmail.com>
Date: Tue, 3 Dec 2024 16:04:24 +0700
Subject: [PATCH 08/19] refactor: update Cart component styling to use border
 consistently, enhancing UI consistency across the cart layout and summary

---
 app/components/Cart.tsx             | 20 ++++++++++----------
 app/components/Header/CartCount.tsx |  2 +-
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/app/components/Cart.tsx b/app/components/Cart.tsx
index 2326da7..b06f18c 100644
--- a/app/components/Cart.tsx
+++ b/app/components/Cart.tsx
@@ -67,20 +67,20 @@ function CartLines({
         {layout === "page" && (
           <thead>
             <tr className="p-2">
-              <th className="font-medium p-4 text-left border-bar/15 border-b border-bar">
+              <th className="font-medium p-4 text-left border-border/15 border-b border-border">
                 Product
               </th>
-              <th className="font-medium p-4 border-b border-bar/15 hidden md:table-cell"></th>
-              <th className="font-medium p-4 border-b border-bar/15 hidden md:table-cell">
+              <th className="font-medium p-4 border-b border-border/15 hidden md:table-cell"></th>
+              <th className="font-medium p-4 border-b border-border/15 hidden md:table-cell">
                 Price
               </th>
-              <th className="font-medium p-4 border-b border-bar/15 hidden md:table-cell">
+              <th className="font-medium p-4 border-b border-border/15 hidden md:table-cell">
                 Quantity
               </th>
-              <th className="font-medium p-4 border-b border-bar/15 hidden md:table-cell">
+              <th className="font-medium p-4 border-b border-border/15 hidden md:table-cell">
                 Total
               </th>
-              <th className="font-medium p-4 border-b border-bar/15 hidden md:table-cell"></th>
+              <th className="font-medium p-4 border-b border-border/15 hidden md:table-cell"></th>
             </tr>
           </thead>
         )}
@@ -208,7 +208,7 @@ function CartCheckout({
   layout: CartMainProps["layout"];
 }) {
   let styles = {
-    page: "grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-1 border-bar-subtle md:border-t md:pt-6 lg:p-0 lg:border-none",
+    page: "grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-1 border-border-subtle md:border-t md:pt-6 lg:p-0 lg:border-none",
     aside: "pb-6 pt-4 shrink-0",
   };
   let isDrawer = layout === "aside";
@@ -295,7 +295,7 @@ export function CartSummary({
 }) {
   const styles = {
     page: "bg-white p-6 space-y-6",
-    aside: "space-y-6 border-t border-bar-subtle pt-4",
+    aside: "space-y-6 border-t border-border-subtle pt-4",
   };
   const totalStyles = {
     page: "text-2xl font-heading",
@@ -355,7 +355,7 @@ function CartLineQuantity({
     aside: "w-10 h-[35px] transition",
   };
   return (
-    <div className="flex items-center border border-bar-subtle rounded w-fit">
+    <div className="flex items-center border border-border-subtle rounded w-fit">
       <CartLineUpdateButton lines={[{ id: lineId, quantity: prevQuantity }]}>
         <button
           className={buttonStyles[layout]}
@@ -467,7 +467,7 @@ function CartDiscounts({
       {/* Show an input to apply a discount */}
       <UpdateDiscountForm discountCodes={codes}>
         <div className="flex gap-2">
-          <Input type="text" name="discountCode" placeholder="Promotion code" />
+          <Input type="text" name="discountCode" variant={"default"} placeholder="Promotion code" />
           <Button type="submit" variant="link">
             Apply
           </Button>
diff --git a/app/components/Header/CartCount.tsx b/app/components/Header/CartCount.tsx
index 4729104..7210f62 100644
--- a/app/components/Header/CartCount.tsx
+++ b/app/components/Header/CartCount.tsx
@@ -42,7 +42,7 @@ export function CartCount({
       () => (
         <>
           <IconBag className="h-6 w-6" viewBox="0 0 24 24" />
-          <div className="absolute right-0 top-0 flex h-4 w-4 items-center justify-center rounded-full bg-primary p-[0.125rem] text-center text-[0.625rem] font-medium leading-none text-primary-foreground subpixel-antialiased">
+          <div className="absolute right-0 top-0 flex h-4 w-4 items-center justify-center rounded-full bg-[var(--color-header-text)] p-[0.125rem] text-center text-[0.625rem] font-medium leading-none text-[var(--color-transparent-header)] subpixel-antialiased">
             <span>{count || 0}</span>
           </div>
         </>

From 8918bf8990e38e0eef4fe736d7828707e0108b18 Mon Sep 17 00:00:00 2001
From: dangthang <dangthangkk2000@gmail.com>
Date: Tue, 3 Dec 2024 16:05:03 +0700
Subject: [PATCH 09/19] refactor: standardize styling across components for
 better visual consistency; update borders and background colors in various
 files

---
 app/components/Drawer.tsx                     | 13 ++---
 app/components/Header/MenuDrawerHeader.tsx    |  8 +--
 app/components/Header/menu/DrawerMenu.tsx     | 28 +++++-----
 .../SearchDrawer/SearchTypeDrawer.tsx         |  4 +-
 .../SearchDrawer/SearchTypeDrawerResults.tsx  | 52 ++++++++++---------
 .../SearchHeader/SearchTypeHeader.tsx         |  4 +-
 .../SearchHeader/SearchTypeHeaderResults.tsx  | 46 ++++++++--------
 .../PredictiveSearchResult.tsx                |  2 +-
 8 files changed, 80 insertions(+), 77 deletions(-)

diff --git a/app/components/Drawer.tsx b/app/components/Drawer.tsx
index a435231..72f703b 100644
--- a/app/components/Drawer.tsx
+++ b/app/components/Drawer.tsx
@@ -70,15 +70,12 @@ export function Drawer({
               >
                 <Dialog.Panel
                   className={cn(
-                    "transform text-left align-middle shadow-xl transition-all",
+                    "transform text-left align-middle shadow-xl transition-all bg-[var(--color-drawer-bg)]",
                     openFrom === "left"
                       ? `h-screen-dynamic w-screen ${maxWidth}`
                       : openFrom === "top"
                         ? "h-fit w-screen"
-                        : `h-screen-dynamic w-screen ${maxWidth}`,
-                    isForm === "cart" || isForm === "filter"
-                      ? "bg-background-basic"
-                      : "bg-background-subtle-1"
+                        : `h-screen-dynamic w-screen ${maxWidth}`
                   )}
                 >
                   <header
@@ -92,7 +89,7 @@ export function Drawer({
                   >
                     <button
                       type="button"
-                      className="text-body hover:text-body/50 -m-4 p-4 transition"
+                      className="text-text-primary hover:text-text-primary/50 -m-4 p-4 transition"
                       onClick={onClose}
                       data-test="close-cart"
                     >
@@ -100,7 +97,7 @@ export function Drawer({
                     </button>
                     {heading !== null && (
                       <Dialog.Title as="span">
-                        <span className={cn("font-semibold font-heading text-xl", isForm !== 'search' && 'uppercase')} id="cart-contents">
+                        <span className={cn("font-semibold font-heading text-xl text-text-primary", isForm !== 'search' && 'uppercase')} id="cart-contents">
                           {heading}
                         </span>
                       </Dialog.Title>
@@ -108,7 +105,7 @@ export function Drawer({
                     {isBackMenu && (
                       <button
                         type="button"
-                        className="text-body hover:text-body/50 -m-4 p-2 transition"
+                        className="text-text-primary hover:text-text-primary/50 -m-4 p-2 transition"
                         onClick={onClose}
                         data-test="close-cart"
                       >
diff --git a/app/components/Header/MenuDrawerHeader.tsx b/app/components/Header/MenuDrawerHeader.tsx
index eacacd7..2310b9d 100644
--- a/app/components/Header/MenuDrawerHeader.tsx
+++ b/app/components/Header/MenuDrawerHeader.tsx
@@ -47,9 +47,9 @@ export function UseMenuDrawerHeader({
       className={clsx(
         enableTransparent ? "fixed w-screen" : "sticky",
         isTransparent
-          ? "border-secondary bg-transparent text-secondary"
-          : "shadow-header border-foreground bg-background-subtle-1 text-primary",
-        "top-0 z-40 border-b border-foreground",
+          ? "border-[var(--color-transparent-header)] bg-transparent text-[var(--color-transparent-header)]"
+          : "shadow-header border-[var(--color-header-text)] bg-[var(--color-header-bg)] text-[var(--color-header-text)]",
+        "top-0 z-40 border-b",
         className
       )}
       style={{ ["--announcement-bar-height" as string]: `${top}px` }}
@@ -59,7 +59,7 @@ export function UseMenuDrawerHeader({
       <div className="z-40 flex h-nav items-center justify-between gap-3 px-6 md:px-8 lg:px-6 py-4 transition-all duration-300 container">
         <div
           className={clsx(
-            "absolute inset-0 z-20 bg-background-subtle-1",
+            "absolute inset-0 z-20 bg-[var(--color-header-bg)",
             "transition-all duration-300 ease-in-out",
             isTransparent ? "opacity-0" : "opacity-100"
           )}
diff --git a/app/components/Header/menu/DrawerMenu.tsx b/app/components/Header/menu/DrawerMenu.tsx
index d978f1d..6c0d310 100644
--- a/app/components/Header/menu/DrawerMenu.tsx
+++ b/app/components/Header/menu/DrawerMenu.tsx
@@ -10,7 +10,7 @@ import { EnhancedMenu } from '~/lib/utils';
 export function DrawerMenu({ menu }: { menu: EnhancedMenu | null | undefined }) {
   let items = menu?.items as unknown as SingleMenuItem[];
   return (
-    <nav className="grid text-foreground-subtle overflow-auto border-t-2 border-bar-subtle px-6 pb-16 pt-8">
+    <nav className="grid text-text-subtle overflow-auto border-t border-border-subtle px-6 pb-16 pt-8">
       {items.map((item, id) => {
         let { title, ...rest } = item;
         let level = getMaxDepth(item);
@@ -34,7 +34,7 @@ function ItemHeader({title, to}: {title: string; to: string}) {
   return (
     <div className="flex items-center justify-between py-3" role="button">
       <Link to={to}>
-        <h5 className="font-medium text-xl uppercase hover:text-foreground">{title}</h5>
+        <h5 className="font-medium text-xl uppercase hover:text-text-primary">{title}</h5>
       </Link>
     </div>
   );
@@ -56,14 +56,14 @@ function MultiMenu(props: SingleMenuItem) {
       isBackMenu
       // bordered
     >
-      <div className="grid overflow-auto px-6 pb-16 pt-8 border-t-2 border-bar-subtle">
+      <div className="grid overflow-auto px-6 pb-16 pt-8 border-t border-border-subtle">
         {items.map((item, id) => (
           <div key={id}>
             <Disclosure>
               {({open}) => (
                 <>
                   <Disclosure.Button className="w-full text-left">
-                    <h5 className="flex w-full text-xl justify-between py-3 font-medium uppercase text-foreground-subtle hover:text-foreground">
+                    <h5 className="flex w-full text-xl justify-between py-3 font-medium uppercase text-text-subtle hover:text-text-primary">
                       {item.title}
                       {item.items.length > 0 && <span className="">
                         <IconCaret
@@ -87,9 +87,9 @@ function MultiMenu(props: SingleMenuItem) {
                                 key={ind}
                                 to={subItem.to}
                                 prefetch="intent"
-                                className="text-foreground-subtle"
+                                className="text-text-subtle"
                               >
-                                <span className='font-body hover:text-foreground text-base font-normal'>{subItem.title}</span>
+                                <span className='font-body hover:text-text-primary text-base font-normal'>{subItem.title}</span>
                               </Link>
                             </li>
                           ))}
@@ -108,7 +108,7 @@ function MultiMenu(props: SingleMenuItem) {
   return (
     <div className="">
       <div
-        className="flex items-center justify-between py-3 hover:text-foreground"
+        className="flex items-center justify-between py-3 hover:text-text-primary"
         role="button"
         onClick={openMenu}
       >
@@ -137,7 +137,7 @@ function ImageMenu({title, items, to}: SingleMenuItem) {
       isBackMenu
       // bordered
     >
-      <div className="grid grid-cols-2 gap-3 px-6 pb-16 pt-8 border-t-2 border-bar-subtle">
+      <div className="grid grid-cols-2 gap-3 px-6 pb-16 pt-8 border-t border-border-subtle">
         {items.map((item, id) => (
           <Link to={item.to} prefetch="intent" key={id}>
             <div className="relative aspect-square w-full group">
@@ -149,7 +149,7 @@ function ImageMenu({title, items, to}: SingleMenuItem) {
               <div className="absolute left-0 top-1/2 w-full -translate-y-1/2 text-center z-30">
                 <h4 className='font-medium text-center text-white transition-all duration-300 text-2xl group-hover:underline'>{item.title}</h4>
               </div>
-              <div className='absolute inset-0 opacity-0 group-hover:opacity-30 bg-foreground-subtle transition-opacity duration-300'/>
+              <div className='absolute inset-0 opacity-0 group-hover:opacity-30 bg-background transition-opacity duration-300'/>
             </div>
           </Link>
         ))}
@@ -159,7 +159,7 @@ function ImageMenu({title, items, to}: SingleMenuItem) {
   return (
     <div className="">
       <div
-        className="flex items-center justify-between py-3 hover:text-foreground"
+        className="flex items-center justify-between py-3 hover:text-text-primary"
         role="button"
         onClick={openMenu}
       >
@@ -189,7 +189,7 @@ function SingleMenu(props: SingleMenuItem) {
       isBackMenu
       // bordered
     >
-      <div className="grid overflow-auto px-6 pb-16 pt-8 border-t-2 border-bar-subtle">
+      <div className="grid overflow-auto px-6 pb-16 pt-8 border-t border-border-subtle">
         <ul className="space-y-3 pb-3 pt-2">
           {items.map((subItem, ind) => (
             <li key={ind} className="leading-6">
@@ -197,9 +197,9 @@ function SingleMenu(props: SingleMenuItem) {
                 key={ind}
                 to={subItem.to}
                 prefetch="intent"
-                className="text-foreground-subtle"
+                className="text-text-subtle"
               >
-                <span className='font-body hover:text-foreground text-base font-normal'>{subItem.title}</span>
+                <span className='font-body hover:text-text-primary text-base font-normal'>{subItem.title}</span>
               </Link>
             </li>
           ))}
@@ -210,7 +210,7 @@ function SingleMenu(props: SingleMenuItem) {
   return (
     <div className="">
       <div
-        className="flex items-center justify-between py-3 hover:text-foreground"
+        className="flex items-center justify-between py-3 hover:text-text-primary"
         role="button"
         onClick={openMenu}
       >
diff --git a/app/components/predictive-search/PredictiveSearch/SearchDrawer/SearchTypeDrawer.tsx b/app/components/predictive-search/PredictiveSearch/SearchDrawer/SearchTypeDrawer.tsx
index 2978297..bd18e08 100644
--- a/app/components/predictive-search/PredictiveSearch/SearchDrawer/SearchTypeDrawer.tsx
+++ b/app/components/predictive-search/PredictiveSearch/SearchDrawer/SearchTypeDrawer.tsx
@@ -1,5 +1,5 @@
+import { Input } from '@/components/input';
 import {IconSearch} from '../../../Icon';
-import {Input} from '../../../Input';
 import {PredictiveSearchForm} from '../../SearchForm';
 import { SearchTypeDrawerResults } from './SearchTypeDrawerResults';
 
@@ -11,7 +11,7 @@ interface PredictiveSearchProps {
 export function SearchTypeDrawer(props: PredictiveSearchProps) {
   let {isOpen} = props;
   return (
-    <div className="border-t border-bar-subtle">
+    <div className="border-t border-border-subtle flex flex-col">
       <PredictiveSearchForm>
         {({fetchResults, inputRef}) => (
           <div className="mx-auto w-full max-w-[560px] p-6">
diff --git a/app/components/predictive-search/PredictiveSearch/SearchDrawer/SearchTypeDrawerResults.tsx b/app/components/predictive-search/PredictiveSearch/SearchDrawer/SearchTypeDrawerResults.tsx
index 383bb32..64e905e 100644
--- a/app/components/predictive-search/PredictiveSearch/SearchDrawer/SearchTypeDrawerResults.tsx
+++ b/app/components/predictive-search/PredictiveSearch/SearchDrawer/SearchTypeDrawerResults.tsx
@@ -1,26 +1,27 @@
-import {Link} from '@remix-run/react';
-import {PredictiveSearchResult} from '../../PredictiveSearchResult';
-import {usePredictiveSearch} from '../../usePredictiveSearch';
+import { Link } from "@remix-run/react";
+import { PredictiveSearchResult } from "../../PredictiveSearchResult";
+import { usePredictiveSearch } from "../../usePredictiveSearch";
+import { Button } from "@/components/button";
 
 export function SearchTypeDrawerResults() {
-  const {results, totalResults, searchTerm, searchInputRef} =
+  const { results, totalResults, searchTerm, searchInputRef } =
     usePredictiveSearch();
 
-  let queries = results?.find((result) => result.type === 'queries');
-  let articles = results?.find((result) => result.type === 'articles');
-  let products = results?.find((result) => result.type === 'products');
-  let pages = results?.find((result) => result.type === 'pages');
+  let queries = results?.find((result) => result.type === "queries");
+  let articles = results?.find((result) => result.type === "articles");
+  let products = results?.find((result) => result.type === "products");
+  let pages = results?.find((result) => result.type === "pages");
   let totalResultsCount = totalResults || 0;
   function goToSearchResult(event: React.MouseEvent<HTMLAnchorElement>) {
     let type = event.currentTarget.dataset.type;
     if (!searchInputRef.current) return;
-    if (type === 'SearchQuerySuggestion') {
+    if (type === "SearchQuerySuggestion") {
       searchInputRef.current.value = event.currentTarget.innerText;
       // dispatch event onchange for the search
       searchInputRef.current.focus();
     } else {
       searchInputRef.current.blur();
-      searchInputRef.current.value = '';
+      searchInputRef.current.value = "";
       // close the aside
       window.location.href = event.currentTarget.href;
     }
@@ -28,17 +29,17 @@ export function SearchTypeDrawerResults() {
 
   if (!totalResults) {
     return (
-      <div className="flex w-full items-center justify-center border-t border-bar-subtle">
+      <div className="flex w-full items-center justify-center border-t border-border-subtle">
         <NoPredictiveSearchResults searchTerm={searchTerm} />
       </div>
     );
   }
   return (
-    <div className="relative flex items-center justify-center border-t bg-background-subtle-1">
+    <div className="relative flex items-center justify-center border-t border-border-subtle">
       <div className="grid custom-scroll max-h-[81vh] w-screen grid-cols-1 gap-6 overflow-y-auto p-6">
         <div className="space-y-8">
           {queries && (
-            <div className="flex flex-col gap-4 divide-y divide-bar-subtle">
+            <div className="flex flex-col gap-4 divide-y divide-border-subtle">
               <PredictiveSearchResult
                 goToSearchResult={goToSearchResult}
                 items={queries.items}
@@ -83,18 +84,21 @@ export function SearchTypeDrawerResults() {
             />
           </div>
         )}
-        <div className='h-[50px] mt-2'/>
+        <div className="h-[50px] mt-2" />
         {searchTerm.current && (
-          <Link
-            onClick={goToSearchResult}
-            to={`/search?q=${searchTerm.current}`}
-            className="flex justify-center absolute bottom-0 p-6 bg-background-subtle-1 left-0 right-0"
-            style={{ boxShadow: '0 -4px 6px -1px rgba(0, 0, 0, 0.1)' }}
+          <div
+            className="flex justify-center absolute bottom-0 p-6 bg-[var(--color-drawer-bg)] left-0 right-0"
+            style={{ boxShadow: "0 -4px 6px -1px rgba(0, 0, 0, 0.1)" }}
           >
-            <p className="inline-flex h-[50px] items-center justify-center rounded-md border border-primary bg-primary px-5 py-3 font-normal text-primary-foreground hover:border-bar hover:bg-background hover:text-foreground">
-              Show All Results ({totalResultsCount})
-            </p>
-          </Link>
+            <Button variant={"primary"}>
+              <Link
+                onClick={goToSearchResult}
+                to={`/search?q=${searchTerm.current}`}
+              >
+                Show All Results ({totalResultsCount})
+              </Link>
+            </Button>
+          </div>
         )}
       </div>
     </div>
@@ -111,7 +115,7 @@ function NoPredictiveSearchResults({
   }
   return (
     <div className="w-full p-6">
-      <p className="border-b border-bar-subtle pb-3">NO RESULTS</p>
+      <p className="border-b border-border-subtle pb-3">NO RESULTS</p>
       <p className="pt-5">
         No results found for <q>{searchTerm.current}</q>
       </p>
diff --git a/app/components/predictive-search/PredictiveSearch/SearchHeader/SearchTypeHeader.tsx b/app/components/predictive-search/PredictiveSearch/SearchHeader/SearchTypeHeader.tsx
index a5d8f8a..5551a5c 100644
--- a/app/components/predictive-search/PredictiveSearch/SearchHeader/SearchTypeHeader.tsx
+++ b/app/components/predictive-search/PredictiveSearch/SearchHeader/SearchTypeHeader.tsx
@@ -1,7 +1,7 @@
 import {IconSearch} from '~/components/Icon';
-import {Input} from '~/components/Input';
 import {PredictiveSearchForm} from '../../SearchForm';
 import { SearchTypeHeaderResults } from './SearchTypeHeaderResults';
+import { Input } from '@/components/input';
 
 interface PredictiveSearchProps {
   // Predictive search props
@@ -11,7 +11,7 @@ interface PredictiveSearchProps {
 export function SearchTypeHeader(props: PredictiveSearchProps) {
   let {isOpen} = props;
   return (
-    <div className="relative border-t border-bar-subtle">
+    <div className="relative border-t border-border-subtle">
       <PredictiveSearchForm>
         {({fetchResults, inputRef}) => (
           <div className="mx-auto w-full max-w-[560px] p-6">
diff --git a/app/components/predictive-search/PredictiveSearch/SearchHeader/SearchTypeHeaderResults.tsx b/app/components/predictive-search/PredictiveSearch/SearchHeader/SearchTypeHeaderResults.tsx
index 05b43d9..b70a9f6 100644
--- a/app/components/predictive-search/PredictiveSearch/SearchHeader/SearchTypeHeaderResults.tsx
+++ b/app/components/predictive-search/PredictiveSearch/SearchHeader/SearchTypeHeaderResults.tsx
@@ -1,26 +1,27 @@
-import {Link} from '@remix-run/react';
-import {PredictiveSearchResult} from '../../PredictiveSearchResult';
-import {usePredictiveSearch} from '../../usePredictiveSearch';
+import { Link } from "@remix-run/react";
+import { PredictiveSearchResult } from "../../PredictiveSearchResult";
+import { usePredictiveSearch } from "../../usePredictiveSearch";
+import { Button } from "@/components/button";
 
 export function SearchTypeHeaderResults() {
-  const {results, totalResults, searchTerm, searchInputRef} =
+  const { results, totalResults, searchTerm, searchInputRef } =
     usePredictiveSearch();
 
-  let queries = results?.find((result) => result.type === 'queries');
-  let articles = results?.find((result) => result.type === 'articles');
-  let products = results?.find((result) => result.type === 'products');
-  let pages = results?.find((result) => result.type === 'pages');
+  let queries = results?.find((result) => result.type === "queries");
+  let articles = results?.find((result) => result.type === "articles");
+  let products = results?.find((result) => result.type === "products");
+  let pages = results?.find((result) => result.type === "pages");
   let totalResultsCount = totalResults || 0;
   function goToSearchResult(event: React.MouseEvent<HTMLAnchorElement>) {
     let type = event.currentTarget.dataset.type;
     if (!searchInputRef.current) return;
-    if (type === 'SearchQuerySuggestion') {
+    if (type === "SearchQuerySuggestion") {
       searchInputRef.current.value = event.currentTarget.innerText;
       // dispatch event onchange for the search
       searchInputRef.current.focus();
     } else {
       searchInputRef.current.blur();
-      searchInputRef.current.value = '';
+      searchInputRef.current.value = "";
       // close the aside
       window.location.href = event.currentTarget.href;
     }
@@ -35,10 +36,10 @@ export function SearchTypeHeaderResults() {
   }
   return (
     <div className="absolute left-1/2 top-20 z-10 flex w-fit -translate-x-1/2 items-center justify-center">
-      <div className="grid max-h-[80vh] w-screen min-w-[430px] max-w-[720px] grid-cols-1 gap-6 overflow-y-auto border bg-background-subtle-1 p-6 lg:grid-cols-[1fr_2fr]">
+      <div className="grid max-h-[80vh] w-screen min-w-[430px] max-w-[720px] grid-cols-1 gap-6 overflow-y-auto border bg-[var(--color-drawer-bg)] p-6 lg:grid-cols-[1fr_2fr]">
         <div className="space-y-8">
           {queries && (
-            <div className="flex flex-col gap-4 divide-y divide-bar-subtle">
+            <div className="flex flex-col gap-4 divide-y divide-border-subtle">
               <PredictiveSearchResult
                 goToSearchResult={goToSearchResult}
                 items={queries.items}
@@ -71,15 +72,16 @@ export function SearchTypeHeaderResults() {
             />
             {/* view all results /search?q=term */}
             {searchTerm.current && (
-              <Link
-                onClick={goToSearchResult}
-                to={`/search?q=${searchTerm.current}`}
-                className="flex justify-center"
-              >
-                <p className="inline-flex h-[50px] items-center justify-center rounded-md border border-primary bg-primary px-5 py-3 font-normal text-primary-foreground hover:border-bar hover:bg-background hover:text-foreground">
-                  Show All Results ({totalResultsCount})
-                </p>
-              </Link>
+              <div className="flex justify-center">
+                <Button variant={"primary"}>
+                  <Link
+                    onClick={goToSearchResult}
+                    to={`/search?q=${searchTerm.current}`}
+                  >
+                    Show All Results ({totalResultsCount})
+                  </Link>
+                </Button>
+              </div>
             )}
           </div>
         )}
@@ -108,7 +110,7 @@ function NoPredictiveSearchResults({
     return null;
   }
   return (
-    <div className="w-[640px] border bg-background-subtle-1 p-6">
+    <div className="w-[640px] border bg-[var(--color-drawer-bg)] p-6">
       <p className="border-b border-bar-subtle pb-3">NO RESULTS</p>
       <p className="pt-5">
         No results found for <q>{searchTerm.current}</q>
diff --git a/app/components/predictive-search/PredictiveSearchResult.tsx b/app/components/predictive-search/PredictiveSearchResult.tsx
index f4cbf3e..3b7fa2c 100644
--- a/app/components/predictive-search/PredictiveSearchResult.tsx
+++ b/app/components/predictive-search/PredictiveSearchResult.tsx
@@ -20,7 +20,7 @@ export function PredictiveSearchResult({
 
   return (
     <div
-      className="predictive-search-result flex flex-col gap-3 divide-y divide-bar-subtle"
+      className="predictive-search-result flex flex-col gap-3 divide-y divide-border-subtle"
       key={type}
     >
       <Link prefetch="intent" to={categoryUrl} onClick={goToSearchResult}>

From c1e5d21669cb53c5fb233fbbd7b9cfda2574e0fd Mon Sep 17 00:00:00 2001
From: dangthang <dangthangkk2000@gmail.com>
Date: Tue, 3 Dec 2024 16:05:19 +0700
Subject: [PATCH 10/19] refactor: standardize button and dropdown styling in
 CountrySelector for improved UI consistency; update class names and colors

---
 app/components/CountrySelector.tsx | 13 +++++++------
 app/components/Footer.tsx          |  3 +--
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/app/components/CountrySelector.tsx b/app/components/CountrySelector.tsx
index 8dd5a1d..9088ed2 100644
--- a/app/components/CountrySelector.tsx
+++ b/app/components/CountrySelector.tsx
@@ -1,7 +1,6 @@
 import {useFetcher, useLocation, useRouteLoaderData} from '@remix-run/react';
 import {CartForm} from '@shopify/hydrogen';
 import type {CartBuyerIdentityInput} from '@shopify/hydrogen/storefront-api-types';
-import {Button} from '~/components/Button';
 import {IconCaret, IconCheck} from '~/components/Icon';
 import type {Locale, Localizations} from '~/lib/type';
 import {DEFAULT_LOCALE} from '~/lib/utils';
@@ -9,6 +8,7 @@ import {useRootLoaderData} from '~/root';
 import clsx from 'clsx';
 import {useCallback, useEffect, useRef, useState} from 'react';
 import {useInView} from 'react-intersection-observer';
+import { Button } from '@/components/button';
 
 export function CountrySelector() {
   const fetcher = useFetcher();
@@ -57,7 +57,7 @@ export function CountrySelector() {
     <div ref={observerRef} className="md:max-w-72 w-full" onMouseLeave={closeDropdown}>
       <div className="relative">
         <details
-          className="w-full overflow-hidden rounded border border-bar-subtle dark:border-white"
+          className="w-full overflow-hidden rounded border border-border-subtle dark:border-white"
           ref={closeRef}
           onToggle={toggleDropdown}
         >
@@ -67,7 +67,7 @@ export function CountrySelector() {
               <IconCaret direction="down" className="h-4 w-4" />
             </span>
           </summary>
-          <div className={`hiddenScroll absolute bottom-full left-0 right-0 w-full overflow-auto border-t border-bar-subtle bg-white dark:border-white transition-all duration-500
+          <div className={`hiddenScroll absolute bottom-full left-0 right-0 w-full overflow-auto border-t border-border-subtle bg-background dark:border-white transition-all duration-500
             ${isOpen ? 'max-h-36' : 'max-h-0'}`}>
             {countries &&
               Object.keys(countries).map((countryPath) => {
@@ -117,12 +117,13 @@ function Country({
       }}
     >
       <Button
-        className={clsx([
-          'flex w-full justify-start rounded bg-background p-2 transition',
+        classNameContainer={clsx([
+          'flex w-full justify-start',
           'cursor-pointer items-center px-4 py-2 text-left',
         ])}
+        className='rounded bg-background p-2 transition w-full'
+        variant={"custom"}
         type="submit"
-        variant="primary"
         onClick={closeDropdown}
       >
         {countryLocale.label}
diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx
index 1f73993..131478c 100644
--- a/app/components/Footer.tsx
+++ b/app/components/Footer.tsx
@@ -12,7 +12,6 @@ import {IconPlusLinkFooter} from './Icon';
 import {LayoutProps} from './Layout';
 
 type FooterProps = Pick<LayoutProps, 'footerMenu'>;
-type TagName = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 export function Footer({footerMenu}: FooterProps) {
   let fetcher = useFetcher<any>();
   let isError = fetcher.state === 'idle' && fetcher.data?.errors;
@@ -26,7 +25,7 @@ export function Footer({footerMenu}: FooterProps) {
     tagNameTitle: Tag = 'h6',
   } = settings;
   return (
-    <footer className="footer w-full bg-[var(--footer-menu-background-color)]">
+    <footer className="footer w-full bg-[var(--color-footer-bg)] text-[var(--color-footer-text)] border-t border-[var(--color-footer-text)]">
       <div className="container flex h-fit flex-col gap-6 px-4 pb-10 pt-6 md:gap-10 md:px-6 md:py-10 lg:gap-8 lg:px-0 lg:py-16">
         <div className="flex flex-col justify-center gap-4 md:flex-row md:gap-4 lg:gap-10">
           <div className="flex w-full flex-col items-start gap-6 border-b border-foreground pb-6 md:h-fit md:border-none md:pb-0">

From 095e519899495b0074f25572bd928ccedd8db85d Mon Sep 17 00:00:00 2001
From: dangthang <dangthangkk2000@gmail.com>
Date: Tue, 3 Dec 2024 16:05:35 +0700
Subject: [PATCH 11/19] refactor: update Preloader and GlobalLoading styles to
 improve visual consistency and enhance user experience with background colors

---
 app/components/Preloader.tsx      | 2 +-
 app/components/global-loading.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/Preloader.tsx b/app/components/Preloader.tsx
index 1cc8945..5033ec2 100644
--- a/app/components/Preloader.tsx
+++ b/app/components/Preloader.tsx
@@ -13,7 +13,7 @@ export function Preloader() {
 
   return (
     <div
-      className={`fixed inset-0 bg-background-subtle-1 z-50 flex items-center justify-center transition-opacity duration-500 ${
+      className={`fixed inset-0 bg-background z-50 flex items-center justify-center transition-opacity duration-500 ${
         isLoading ? "opacity-100" : "opacity-0 pointer-events-none"
       }`}
     />
diff --git a/app/components/global-loading.tsx b/app/components/global-loading.tsx
index 8524960..f39cf41 100644
--- a/app/components/global-loading.tsx
+++ b/app/components/global-loading.tsx
@@ -35,7 +35,7 @@ export function GlobalLoading() {
       <div
         ref={ref}
         className={clsx(
-          "h-full bg-gradient-to-r from-secondary to-primary transition-all duration-500 ease-in-out",
+          "h-full bg-gradient-to-r from-[#F8f8f0] to-[#3D490B] transition-all duration-500 ease-in-out",
           transition.state === "idle" &&
             (animating ? "w-full" : "w-0 opacity-0 transition-none"),
           transition.state === "submitting" && "w-4/12",

From 8199566adaaf780a95cecf9ee9c2e8799bc503f7 Mon Sep 17 00:00:00 2001
From: dangthang <dangthangkk2000@gmail.com>
Date: Tue, 3 Dec 2024 16:06:23 +0700
Subject: [PATCH 12/19] refactor: unify background and border colors in Modal
 and VariantOption for improved UI consistency across components

---
 app/components/Modal.tsx                           |  2 +-
 app/components/product-form/options.tsx            | 14 +++++++-------
 app/components/product-form/product-media.tsx      |  4 ++--
 app/components/product-form/quantity.tsx           |  4 ++--
 app/sections/product-information/index.tsx         |  2 +-
 .../product-information/product-detail.tsx         |  2 +-
 6 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/app/components/Modal.tsx b/app/components/Modal.tsx
index f1171bf..be08aa5 100644
--- a/app/components/Modal.tsx
+++ b/app/components/Modal.tsx
@@ -29,7 +29,7 @@ export function Modal({
       aria-modal="true"
       id="modal-bg"
     >
-      <div className="fixed inset-0 bg-primary/40 bg-opacity-75 transition-opacity"></div>
+      <div className="fixed inset-0 bg-black/60 bg-opacity-75 transition-opacity"></div>
       <div
         className="fixed inset-0 z-50 overflow-y-hidden"
       >
diff --git a/app/components/product-form/options.tsx b/app/components/product-form/options.tsx
index c31d156..336876c 100644
--- a/app/components/product-form/options.tsx
+++ b/app/components/product-form/options.tsx
@@ -65,7 +65,7 @@ export function VariantOption(props: VariantOptionProps) {
   );
 
   let defaultButtonClassName = clsx(
-    "border border-bar-subtle cursor-pointer",
+    "border border-border-subtle cursor-pointer",
     BUTTON_SIZE_MAP[size],
     "p-2 text-sm text-center",
     roundedClassName
@@ -87,7 +87,7 @@ export function VariantOption(props: VariantOptionProps) {
               className={cn(
                 defaultButtonClassName,
                 selectedOptionValue === value.value &&
-                  "border-bar bg-background-subtle-1",
+                  "border-border bg-[#E5E6D4]",
                 !value.isAvailable && "opacity-50 bg-btn/30"
               )}
               onClick={() => onSelectOptionValue(value.value)}
@@ -111,7 +111,7 @@ export function VariantOption(props: VariantOptionProps) {
                   defaultClassName,
                   "p-1",
                   selectedOptionValue === value.value &&
-                    "border-2 border-bar/70",
+                    "border-2 border-border/90",
                   !value.isAvailable && disabledClassName
                 )}
                 onClick={() => onSelectOptionValue(value.value)}
@@ -140,7 +140,7 @@ export function VariantOption(props: VariantOptionProps) {
                   defaultClassName,
                   "p-0.5",
                   selectedOptionValue === value.value &&
-                    "border-2 border-bar/70",
+                    "border-2 border-border/90",
                   !value.isAvailable && disabledClassName
                 )}
                 onClick={() => onSelectOptionValue(value.value)}
@@ -167,7 +167,7 @@ export function VariantOption(props: VariantOptionProps) {
                 className={clsx(
                   defaultClassName,
                   selectedOptionValue === value.value &&
-                    "border-2 border-bar/70",
+                    "border-2 border-border/90",
                   !value.isAvailable && disabledClassName
                 )}
                 onClick={() => onSelectOptionValue(value.value)}
@@ -205,9 +205,9 @@ export function VariantOption(props: VariantOptionProps) {
               className={clsx(
                 "!leading-none py-3 px-3 cursor-pointer transition-all duration-200 font-normal border-2 rounded",
                 value.isAvailable && selectedOptionValue === value.value
-                  ? "border-bar bg-background-subtle-1"
+                  ? "border-border/90 bg-[#E5E6D4]"
                   : value.isAvailable
-                  ? "border-bar-subtle"
+                  ? "border-border-subtle"
                   : `${disabledClassName} border-[#C2C3C2] text-[#C2C3C2] bg-[#EBEBEA]`,
               )}
               onClick={() => onSelectOptionValue(value.value)}
diff --git a/app/components/product-form/product-media.tsx b/app/components/product-form/product-media.tsx
index 94c6038..6682791 100644
--- a/app/components/product-form/product-media.tsx
+++ b/app/components/product-form/product-media.tsx
@@ -102,8 +102,8 @@ export function ProductMedia(props: ProductMediaProps) {
               <SwiperSlide
                 key={med.id}
                 className={clsx(
-                  "!h-fit !w-fit p-1 border transition-colors cursor-pointer rounded",
-                  activeIndex === i ? "border-black" : "border-transparent"
+                  "!h-fit !w-fit border-2 transition-colors cursor-pointer rounded",
+                  activeIndex === i ? "border-border" : "border-transparent"
                 )}
               >
                 <Image
diff --git a/app/components/product-form/quantity.tsx b/app/components/product-form/quantity.tsx
index 7e40c30..b47ab5e 100644
--- a/app/components/product-form/quantity.tsx
+++ b/app/components/product-form/quantity.tsx
@@ -27,7 +27,7 @@ export function Quantity(props: QuantityProps) {
         <button
           name="decrease-quantity"
           aria-label="Decrease quantity"
-          className="transition py-2.5 px-5 border-2 rounded border-bar-subtle"
+          className="transition py-2.5 px-5 border-2 rounded border-border-subtle"
           disabled={value <= 1}
           onClick={() => onChange(value - 1)}
         >
@@ -40,7 +40,7 @@ export function Quantity(props: QuantityProps) {
           onChange={(e) => onChange(Number(e.currentTarget.value))}
         />
         <button
-          className="transition py-2.5 px-5 border-2 rounded border-bar-subtle"
+          className="transition py-2.5 px-5 border-2 rounded border-border-subtle"
           name="increase-quantity"
           aria-label="Increase quantity"
           onClick={() => onChange(value + 1)}
diff --git a/app/sections/product-information/index.tsx b/app/sections/product-information/index.tsx
index 08f664a..14b7f06 100644
--- a/app/sections/product-information/index.tsx
+++ b/app/sections/product-information/index.tsx
@@ -135,7 +135,7 @@ let ProductInformation = forwardRef<HTMLDivElement, ProductInformationProps>(
                       <h2 className="font-medium tracking-tighter">
                         {title}
                       </h2>
-                      {judgemeReviews && (
+                      {judgemeReviews?.rating === 0 && (
                         <div className="flex items-center gap-0.5">
                           <StarRating rating={judgemeReviews.rating} />
                           <span className="ml-1">({judgemeReviews.rating.toFixed(1)})</span>
diff --git a/app/sections/product-information/product-detail.tsx b/app/sections/product-information/product-detail.tsx
index 4024a83..e00518a 100644
--- a/app/sections/product-information/product-detail.tsx
+++ b/app/sections/product-information/product-detail.tsx
@@ -17,7 +17,7 @@ export function ProductDetail({
       {({ open }) => (
         <>
           <Disclosure.Button className="text-left">
-            <div className="flex justify-between items-center bg-background-subtle-1 py-3 px-4">
+            <div className="flex justify-between items-center bg-[#e0e5d6] py-3 px-4">
               <Text as="span" className="font-normal text-base uppercase">
                 {title}
               </Text>

From 5e7750f7abc3a3d75b25df87ca5e5f2594ae0787 Mon Sep 17 00:00:00 2001
From: dangthang <dangthangkk2000@gmail.com>
Date: Tue, 3 Dec 2024 16:06:38 +0700
Subject: [PATCH 13/19] refactor: simplify AnnouncementBar colors and styles;
 unify Header components for improved visual consistency and maintainability

---
 app/components/Header/AnnouncementBar.tsx |  16 +---
 app/components/Header/Header.tsx          | 110 +---------------------
 app/components/Header/MenuMegaHeader.tsx  |   6 +-
 app/components/Header/menu/MegaMenu.tsx   |   4 +-
 app/routes/($locale).search.tsx           |   4 +-
 5 files changed, 13 insertions(+), 127 deletions(-)

diff --git a/app/components/Header/AnnouncementBar.tsx b/app/components/Header/AnnouncementBar.tsx
index 1e7de45..14b0c9a 100644
--- a/app/components/Header/AnnouncementBar.tsx
+++ b/app/components/Header/AnnouncementBar.tsx
@@ -11,9 +11,6 @@ export function AnnouncementBar() {
   let {
     content,
     textSize,
-    textColor,
-    borderColor,
-    backgroundColor,
     announcementBarHeight,
     speed,
     gap,
@@ -21,9 +18,6 @@ export function AnnouncementBar() {
     enableScrollingText,
   } = settings;
   let style: CSSProperties = {
-    '--text-color': textColor,
-    '--border-color': borderColor,
-    '--background-color': backgroundColor,
     '--height-bar': `${announcementBarHeight}px`,
     '--speed': `${speed}s`,
     '--gap': `${gap}px`,
@@ -59,15 +53,15 @@ export function AnnouncementBar() {
       ref={containerRef}
       style={style}
       className={clsx(
-        'h-[var(--height-bar)] bg-[var(--background-color)] py-[var(--vertical-padding)]',
-        'border-y border-y-[var(--border-color)]',
+        'h-[var(--height-bar)] bg-[var(--color-topbar-bg)] py-[var(--vertical-padding)]',
+        'border-y border-y-[var(--color-topbar-border)]',
         'flex w-full items-center justify-center overflow-hidden',
         stickyAnnouncementBar ? 'sticky top-0 z-40' : 'relative',
       )}
     >
       <button
         onClick={handleClose}
-        className="absolute right-4 top-1/2 z-20 -translate-y-1/2 transform cursor-pointer border-none bg-transparent text-[var(--text-color)]"
+        className="absolute right-4 top-1/2 z-20 -translate-y-1/2 transform cursor-pointer border-none bg-transparent text-[var(--color-topbar-text)]"
       >
         ×
       </button>
@@ -79,7 +73,7 @@ export function AnnouncementBar() {
             {Array.from({length: 15}).map((_, i) => (
               <li
                 key={i}
-                className="animate-scrollContent whitespace-nowrap pr-[var(--gap)] font-body font-normal text-[var(--text-color)]"
+                className="animate-scrollContent whitespace-nowrap pr-[var(--gap)] font-body font-normal text-[var(--color-topbar-text)]"
                 style={{
                   animationDuration: `var(--speed)`,
                   fontSize: `${textSize}px`,
@@ -100,7 +94,7 @@ export function AnnouncementBar() {
       >
         <div
           ref={contentRef}
-          className="w-fit whitespace-nowrap px-11 font-body font-normal text-[var(--text-color)]"
+          className="w-fit whitespace-nowrap px-11 font-body font-normal text-[var(--color-topbar-text)]"
         >
           {content}
         </div>
diff --git a/app/components/Header/Header.tsx b/app/components/Header/Header.tsx
index 20b4bba..1f93947 100644
--- a/app/components/Header/Header.tsx
+++ b/app/components/Header/Header.tsx
@@ -80,112 +80,4 @@ function CartDrawer({
       </div>
     </Drawer>
   );
-}
-
-// export function HeaderMenu({
-//   menu,
-//   primaryDomainUrl,
-//   viewport,
-//   showMenu,
-//   onCloseMenu,
-// }: {
-//   menu: HeaderProps['header']['menu'];
-//   primaryDomainUrl: HeaderQuery['shop']['primaryDomain']['url'];
-//   viewport: Viewport;
-//   showMenu: boolean;
-//   onCloseMenu: () => void;
-// }) {
-//   const {publicStoreDomain} = useRootLoaderData();
-//   // const className = `header-menu-${viewport}`;
-
-//   function closeAside(event: React.MouseEvent<HTMLAnchorElement>) {
-//     if (viewport === 'desktop') {
-//       event.preventDefault();
-//       window.location.href = event.currentTarget.href;
-//     }
-//     onCloseMenu();
-//   }
-//   return (
-//     <div className="flex h-full w-full flex-col border-t border-bar-subtle bg-background-subtle-1">
-//       <div className="grid h-full grid-cols-1 duration-500 sm:container  md:grid-cols-2">
-//         <nav
-//           className="flex flex-col gap-4 pb-8 pl-6 pr-8 pt-8 md:gap-5 md:pl-12 lg:gap-6 lg:pb-16 lg:pl-20"
-//           role="navigation"
-//         >
-//           {/* {viewport === 'mobile' && (
-//         <NavLink
-//           end
-//           onClick={closeAside}
-//           prefetch="intent"
-//           style={activeLinkStyle}
-//           to="/"
-//         >
-//           Home
-//         </NavLink>
-//       )} */}
-//           {(menu || FALLBACK_HEADER_MENU).items.map((item) => {
-//             if (!item.url) return null;
-
-//             // if the url is internal, we strip the domain
-//             const url =
-//               item.url.includes('myshopify.com') ||
-//               item.url.includes(publicStoreDomain) ||
-//               item.url.includes(primaryDomainUrl)
-//                 ? new URL(item.url).pathname
-//                 : item.url;
-//             return (
-//               <NavLink
-//                 className="font-heading text-4xl text-foreground-subtle transition-colors duration-300 hover:text-foreground-basic"
-//                 end
-//                 key={item.id}
-//                 onClick={(event) => {
-//                   closeAside(event);
-//                 }}
-//                 prefetch="intent"
-//                 to={url}
-//               >
-//                 <h3 className=" font-medium">{item.title}</h3>
-//               </NavLink>
-//             );
-//           })}
-//         </nav>
-//         {/* <div
-//           style={{
-//             backgroundImage:
-//               'url(https://cdn.shopify.com/s/files/1/0838/0052/3057/files/naturelle-menu-bg.jpg?v=1706411874)',
-//           }}
-//         ></div> */}
-//         <div className="h-full w-full">
-//           <Image
-//             data={{
-//               url: 'https://cdn.shopify.com/s/files/1/0838/0052/3057/files/naturelle-menu-bg.jpg?v=1706411874',
-//               altText: 'Naturelle Menu',
-//               // width: 668,
-//               // height: 1002,
-//             }}
-//             loading="eager"
-//             className="aspect-square h-full object-cover lg:aspect-[2/1]"
-//             sizes="auto"
-//           />
-//         </div>
-//       </div>
-//     </div>
-//   );
-// }
-
-// function CartBadge({count}: {count: number}) {
-//   return <a href="#cart-aside">Cart {count}</a>;
-// }
-
-// function CartToggle({cart}: Pick<HeaderProps, 'cart'>) {
-//   return (
-//     <Suspense fallback={<CartBadge count={0} />}>
-//       <Await resolve={cart}>
-//         {(cart) => {
-//           if (!cart) return <CartBadge count={0} />;
-//           return <CartBadge count={cart.totalQuantity || 0} />;
-//         }}
-//       </Await>
-//     </Suspense>
-//   );
-// }
+}
\ No newline at end of file
diff --git a/app/components/Header/MenuMegaHeader.tsx b/app/components/Header/MenuMegaHeader.tsx
index 4b0f643..ba65be0 100644
--- a/app/components/Header/MenuMegaHeader.tsx
+++ b/app/components/Header/MenuMegaHeader.tsx
@@ -47,8 +47,8 @@ export function UseMenuMegaHeader({
       className={clsx(
         enableTransparent ? 'fixed w-screen' : 'sticky',
         isTransparent
-          ? 'border-secondary bg-transparent text-secondary'
-          : 'shadow-header border-foreground bg-background-subtle-1 text-primary',
+          ? 'border-[var(--color-transparent-header)] bg-transparent text-[var(--color-transparent-header)]'
+          : 'shadow-header border-[var(--color-header-text)] bg-[var(--color-header-bg)] text-[var(--color-header-text)]',
         'top-0 z-40 border-b',
         className,
       )}
@@ -59,7 +59,7 @@ export function UseMenuMegaHeader({
       <div className="container px-6 md:px-8 lg:px-6 z-40 flex h-nav items-center justify-between gap-3 transition-all duration-300">
         <div
           className={clsx(
-            'absolute inset-0 z-20 bg-background-subtle-1',
+            'absolute inset-0 z-20 bg-[var(--color-header-bg)]',
             'transition-all duration-500 ease-in-out',
             isTransparent ? 'opacity-0' : 'opacity-100',
           )}
diff --git a/app/components/Header/menu/MegaMenu.tsx b/app/components/Header/menu/MegaMenu.tsx
index b5b064c..f27f86f 100644
--- a/app/components/Header/menu/MegaMenu.tsx
+++ b/app/components/Header/menu/MegaMenu.tsx
@@ -12,7 +12,7 @@ interface EnhancedMenuItem extends SingleMenuItem {
 }
 
 const dropdownContentClass =
-  'absolute overflow-hidden bg-background-subtle-1 shadow-md z-10 dropdown-transition border-t';
+  'absolute overflow-hidden bg-[var(--color-header-bg)] shadow-md z-10 dropdown-transition border-t';
 
 export function MegaMenu(props: {menu: EnhancedMenu | null | undefined}) {
   let {menu} = props;
@@ -58,7 +58,7 @@ function MultiMenu(props: SingleMenuItem & {isShowIconCaret?: boolean}) {
       key={idx}
       style={{'--item-index': idx} as {[key: string]: any}}
     >
-      <h5 className="mb-4 font-semibold uppercase text-foreground">
+      <h5 className="mb-4 font-semibold uppercase text-text-primary">
         <Link to={item.to} prefetch="intent">
           <span className="text-animation">{item.title}</span>
         </Link>
diff --git a/app/routes/($locale).search.tsx b/app/routes/($locale).search.tsx
index 4cb5749..7fa5c52 100644
--- a/app/routes/($locale).search.tsx
+++ b/app/routes/($locale).search.tsx
@@ -18,7 +18,6 @@ import {defer, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 import {DrawerFilter} from '~/components/DrawerFilter';
 import {Grid} from '~/components/Grid';
 import {IconSearch} from '~/components/Icon';
-import {Input} from '~/components/Input';
 import {ProductCard} from '~/components/ProductCard';
 import {ProductSwimlane} from '~/components/ProductSwimlane';
 import {PageHeader, Text} from '~/components/Text';
@@ -37,6 +36,7 @@ import {
   getFeaturedData,
   type FeaturedData,
 } from './($locale).featured-products';
+import { Input } from '@/components/input';
 
 export async function loader({request, context}: LoaderFunctionArgs) {
   const {storefront} = context;
@@ -176,7 +176,7 @@ export default function Search() {
 
   return (
     <>
-      <PageHeader variant="search" className="bg-background-subtle-1">
+      <PageHeader variant="search" className="bg-[#e0e5d6]">
         <h1 className="w-full text-center text-3xl font-medium md:text-4xl lg:text-5xl">
           {searchTerm
             ? `Search results for “${searchTerm}”`

From 4a5d7d1a65b5f9449b1fcf1e072f10c525af7999 Mon Sep 17 00:00:00 2001
From: dangthang <dangthangkk2000@gmail.com>
Date: Tue, 3 Dec 2024 16:07:10 +0700
Subject: [PATCH 14/19] refactor: unify background colors across various
 components for enhanced visual consistency and improved user experience

---
 app/sections/atoms/button.tsx                 |   3 +-
 app/sections/before-and-after/slider.tsx      |   4 +-
 app/sections/blogs/index.tsx                  | 371 +++++++++---------
 app/sections/feature-product/arrows.tsx       |   5 +-
 .../feature-product/list-products.tsx         |   2 +-
 app/sections/instagram/index.tsx              |   2 +-
 app/sections/judgeme-reviews/review-form.tsx  |   8 +-
 app/sections/judgeme-reviews/review-list.tsx  |   6 +-
 .../product-placement/productItem.tsx         |   2 +-
 app/sections/slides/slide.tsx                 |   2 +-
 app/sections/testimonials/index.tsx           |   4 +-
 app/sections/video-banner/index.tsx           |   2 +-
 12 files changed, 212 insertions(+), 199 deletions(-)

diff --git a/app/sections/atoms/button.tsx b/app/sections/atoms/button.tsx
index d4cc2ce..93f008c 100644
--- a/app/sections/atoms/button.tsx
+++ b/app/sections/atoms/button.tsx
@@ -30,7 +30,7 @@ const WeaverseButton = forwardRef<HTMLButtonElement, OriginalButtonProps>(
     } as CSSProperties;
     let styleButton = ""
     if (variant === 'custom') {
-      styleButton = "bg-[var(--background-color)] border border-[var(--border-color)] text-[var(--text-color)] hover:bg-[var(--background-color-hover)] hover:text-[var(--text-color-hover)] hover:border-[var(--border-color-hover)]"
+      styleButton = "bg-[var(--background-color)] border border-[var(--border-color)] !text-[var(--text-color)] hover:bg-[var(--background-color-hover)] hover:!text-[var(--text-color-hover)] hover:border-[var(--border-color-hover)]"
     }
     return (
       <Button
@@ -163,6 +163,7 @@ export const schema: HydrogenComponentSchema = {
           type: 'color',
           label: 'Text color',
           name: 'textColorDecor',
+          defaultValue: '#fff',
           condition: "variant.eq.decor",
         },
         {
diff --git a/app/sections/before-and-after/slider.tsx b/app/sections/before-and-after/slider.tsx
index edd25fa..af625f6 100644
--- a/app/sections/before-and-after/slider.tsx
+++ b/app/sections/before-and-after/slider.tsx
@@ -175,7 +175,7 @@ const BeforeAndAfter = forwardRef<HTMLDivElement, BeforeAndAfterProps>((props, r
                     data={afterImage}
                     sizes='auto'
                     className='h-full w-full box-border object-cover object-center' />) :
-                    (<div className="flex justify-center items-center bg-background-subtle-1 w-full h-full">
+                    (<div className="flex justify-center items-center bg-[#e5e6d4] w-full h-full">
                         <IconImageBlank
                             className="w-96 h-96 opacity-80"
                             viewBox="0 0 526 526"
@@ -199,7 +199,7 @@ const BeforeAndAfter = forwardRef<HTMLDivElement, BeforeAndAfterProps>((props, r
                     data={beforeImage}
                     sizes='auto'
                     className='h-full w-full box-border object-cover object-center' />) : (
-                    <div className="flex justify-center items-center bg-background-subtle-1 w-full h-full">
+                    <div className="flex justify-center items-center bg-[#e5e6d4] w-full h-full">
                         <IconImageBlank
                             className="w-96 h-96 opacity-80"
                             viewBox="0 0 526 526"
diff --git a/app/sections/blogs/index.tsx b/app/sections/blogs/index.tsx
index b2c0c06..28cec92 100644
--- a/app/sections/blogs/index.tsx
+++ b/app/sections/blogs/index.tsx
@@ -1,76 +1,76 @@
-import {cn} from '@/lib/utils';
-import {Image} from '@shopify/hydrogen';
+import { cn } from "@/lib/utils";
+import { Image } from "@shopify/hydrogen";
 import type {
   ComponentLoaderArgs,
   HydrogenComponentProps,
   HydrogenComponentSchema,
   WeaverseBlog,
-} from '@weaverse/hydrogen';
-import {IconImageBlank} from '~/components/Icon';
-import {Link} from '~/components/Link';
-import {BLOG_QUERY} from '~/data/queries';
-import {cva, VariantProps} from 'class-variance-authority';
-import clsx from 'clsx';
-import {CSSProperties, forwardRef} from 'react';
-import { useMotion } from '~/hooks/use-motion';
+} from "@weaverse/hydrogen";
+import { IconImageBlank } from "~/components/Icon";
+import { Link } from "~/components/Link";
+import { BLOG_QUERY } from "~/data/queries";
+import { cva, VariantProps } from "class-variance-authority";
+import clsx from "clsx";
+import { CSSProperties, forwardRef } from "react";
+import { useMotion } from "~/hooks/use-motion";
 
-let fontSizeVariants = cva('', {
+let fontSizeVariants = cva("", {
   variants: {
     mobileSize: {
-      xs: 'text-xs',
-      sm: 'text-sm',
-      base: 'text-base',
-      lg: 'text-lg',
-      xl: 'text-xl',
-      '2xl': 'text-2xl',
-      '3xl': 'text-3xl',
-      '4xl': 'text-4xl',
-      '5xl': 'text-5xl',
-      '6xl': 'text-6xl',
-      '7xl': 'text-7xl',
-      '8xl': 'text-8xl',
-      '9xl': 'text-9xl',
+      xs: "text-xs",
+      sm: "text-sm",
+      base: "text-base",
+      lg: "text-lg",
+      xl: "text-xl",
+      "2xl": "text-2xl",
+      "3xl": "text-3xl",
+      "4xl": "text-4xl",
+      "5xl": "text-5xl",
+      "6xl": "text-6xl",
+      "7xl": "text-7xl",
+      "8xl": "text-8xl",
+      "9xl": "text-9xl",
     },
     desktopSize: {
-      xs: 'md:text-xs',
-      sm: 'md:text-sm',
-      base: 'md:text-base',
-      lg: 'md:text-lg',
-      xl: 'md:text-xl',
-      '2xl': 'md:text-2xl',
-      '3xl': 'md:text-3xl',
-      '4xl': 'md:text-4xl',
-      '5xl': 'md:text-5xl',
-      '6xl': 'md:text-6xl',
-      '7xl': 'md:text-7xl',
-      '8xl': 'md:text-8xl',
-      '9xl': 'md:text-9xl',
+      xs: "md:text-xs",
+      sm: "md:text-sm",
+      base: "md:text-base",
+      lg: "md:text-lg",
+      xl: "md:text-xl",
+      "2xl": "md:text-2xl",
+      "3xl": "md:text-3xl",
+      "4xl": "md:text-4xl",
+      "5xl": "md:text-5xl",
+      "6xl": "md:text-6xl",
+      "7xl": "md:text-7xl",
+      "8xl": "md:text-8xl",
+      "9xl": "md:text-9xl",
     },
   },
 });
 
-let variants = cva('heading', {
+let variants = cva("heading", {
   variants: {
     size: {
-      default: '',
-      custom: '',
-      scale: 'text-scale',
+      default: "",
+      custom: "",
+      scale: "text-scale",
     },
     weight: {
-      '100': 'font-thin',
-      '200': 'font-extralight',
-      '300': 'font-light',
-      '400': 'font-normal',
-      '500': 'font-medium',
-      '600': 'font-semibold',
-      '700': 'font-bold',
-      '800': 'font-extrabold',
-      '900': 'font-black',
+      "100": "font-thin",
+      "200": "font-extralight",
+      "300": "font-light",
+      "400": "font-normal",
+      "500": "font-medium",
+      "600": "font-semibold",
+      "700": "font-bold",
+      "800": "font-extrabold",
+      "900": "font-black",
     },
   },
   defaultVariants: {
-    size: 'default',
-    weight: '400',
+    size: "default",
+    weight: "400",
   },
 });
 
@@ -80,7 +80,7 @@ type BlogData = {
   articlePerRow: number;
   gapRow: number;
   showSeperator: boolean;
-  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
   minSize?: number;
   maxSize?: number;
 };
@@ -91,11 +91,11 @@ export interface BlogProps
     VariantProps<typeof variants>,
     VariantProps<typeof fontSizeVariants> {}
 
-let articlesPerRowClasses: {[item: number]: string} = {
-  1: 'sm:grid-cols-1',
-  2: 'sm:grid-cols-2',
-  3: 'sm:grid-cols-3',
-  4: 'sm:grid-cols-4',
+let articlesPerRowClasses: { [item: number]: string } = {
+  1: "sm:grid-cols-1",
+  2: "sm:grid-cols-2",
+  3: "sm:grid-cols-3",
+  4: "sm:grid-cols-4",
 };
 
 const Blogs = forwardRef<HTMLElement, BlogProps>((props, ref) => {
@@ -106,7 +106,7 @@ const Blogs = forwardRef<HTMLElement, BlogProps>((props, ref) => {
     articlePerRow,
     gapRow,
     showSeperator,
-    as: Tag = 'h4',
+    as: Tag = "h4",
     size,
     mobileSize,
     desktopSize,
@@ -118,17 +118,30 @@ const Blogs = forwardRef<HTMLElement, BlogProps>((props, ref) => {
     ...rest
   } = props;
 
+  const calculateColor = (hex: string) =>
+    `#${[...Array(3)]
+      .map((_, i) =>
+        Math.max(
+          0,
+          parseInt(hex.slice(1 + i * 2, 3 + i * 2), 16) - [19, 18, 28][i]
+        )
+          .toString(16)
+          .padStart(2, "0")
+      )
+      .join("")}`;
+
   let sectionStyle: CSSProperties = {
-    '--background-color': backgroundColor,
-    '--min-size-px': `${minSize}px`,
-    '--min-size': minSize,
-    '--max-size': maxSize,
-    '--gap-row': `${gapRow}px`,
+    "--background-color": backgroundColor,
+    "--calculate-color": calculateColor(backgroundColor),
+    "--min-size-px": `${minSize}px`,
+    "--min-size": minSize,
+    "--max-size": maxSize,
+    "--gap-row": `${gapRow}px`,
   } as CSSProperties;
 
-  const defaultArticles = Array.from({length: 3}).map((_, i) => ({
+  const defaultArticles = Array.from({ length: 3 }).map((_, i) => ({
     id: i,
-    title: 'Trendy items for this Winter Fall 2025 season',
+    title: "Trendy items for this Winter Fall 2025 season",
     excerpt:
       "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.",
     image: null,
@@ -148,20 +161,20 @@ const Blogs = forwardRef<HTMLElement, BlogProps>((props, ref) => {
         {children}
         <div
           className={clsx(
-            'flex flex-col gap-[var(--gap-row)] sm:grid sm:gap-0 sm:justify-self-center sm:gap-y-[var(--gap-row)]',
-            articlesPerRowClasses[Math.min(articlePerRow, res?.length || 1)],
+            "flex flex-col gap-[var(--gap-row)] sm:grid sm:gap-0 sm:justify-self-center sm:gap-y-[var(--gap-row)]",
+            articlesPerRowClasses[Math.min(articlePerRow, res?.length || 1)]
           )}
         >
           {res?.map((idx, i) => (
             <Link
               key={i}
-              to={idx.handle ? `/blogs/${blogs.handle}/${idx.handle}` : '#'}
+              to={idx.handle ? `/blogs/${blogs.handle}/${idx.handle}` : "#"}
               data-motion="slide-in"
-              className={'group'}
+              className={"group"}
             >
               <div
                 key={idx.id}
-                className="flex w-full h-full cursor-pointer flex-col items-center gap-4 rounded p-0 transition-colors duration-500 group-hover:bg-background-subtle-1 sm:p-6"
+                className="flex w-full h-full cursor-pointer flex-col items-center gap-4 rounded p-0 transition-colors duration-500 group-hover:bg-[var(--calculate-color)] sm:p-6"
               >
                 {idx.image ? (
                   <Image
@@ -170,7 +183,7 @@ const Blogs = forwardRef<HTMLElement, BlogProps>((props, ref) => {
                     className="!aspect-square !w-full rounded object-cover"
                   />
                 ) : (
-                  <div className="flex aspect-square w-full items-center justify-center bg-background-subtle-1">
+                  <div className="flex aspect-square w-full items-center justify-center bg-[var(--calculate-color)]">
                     <IconImageBlank
                       viewBox="0 0 526 526"
                       className="h-full w-full opacity-80"
@@ -180,15 +193,15 @@ const Blogs = forwardRef<HTMLElement, BlogProps>((props, ref) => {
                 <div className="flex flex-col gap-4">
                   <Tag
                     className={cn(
-                      size === 'custom' &&
-                        fontSizeVariants({mobileSize, desktopSize}),
-                      variants({size, weight}),
+                      size === "custom" &&
+                        fontSizeVariants({ mobileSize, desktopSize }),
+                      variants({ size, weight })
                     )}
                   >
                     {idx.title}
                   </Tag>
                   {showSeperator && (
-                    <div className="w-full border-b border-bar-subtle"></div>
+                    <div className="w-full border-b border-border-subtle"></div>
                   )}
                   <p className="line-clamp-3">{idx.excerpt}</p>
                 </div>
@@ -204,8 +217,8 @@ const Blogs = forwardRef<HTMLElement, BlogProps>((props, ref) => {
 export default Blogs;
 
 export let loader = async (args: ComponentLoaderArgs<BlogData>) => {
-  let {weaverse, data} = args;
-  let {storefront, request} = weaverse;
+  let { weaverse, data } = args;
+  let { storefront, request } = weaverse;
   if (data.blogs) {
     const res = await storefront.query(BLOG_QUERY, {
       variables: {
@@ -217,28 +230,28 @@ export let loader = async (args: ComponentLoaderArgs<BlogData>) => {
 };
 
 export const schema: HydrogenComponentSchema = {
-  type: 'blogs',
-  title: 'Blogs',
-  toolbar: ['general-settings', ['duplicate', 'delete']],
+  type: "blogs",
+  title: "Blogs",
+  toolbar: ["general-settings", ["duplicate", "delete"]],
   inspector: [
     {
-      group: 'Blog',
+      group: "Blog",
       inputs: [
         {
-          type: 'blog',
-          name: 'blogs',
-          label: 'Blog',
+          type: "blog",
+          name: "blogs",
+          label: "Blog",
         },
         {
-          type: 'color',
-          label: 'Background color',
-          name: 'backgroundColor',
-          defaultValue: '#F8F8F0',
+          type: "color",
+          label: "Background color",
+          name: "backgroundColor",
+          defaultValue: "#F8F8F0",
         },
         {
-          type: 'range',
-          name: 'articlePerRow',
-          label: 'Articles per row',
+          type: "range",
+          name: "articlePerRow",
+          label: "Articles per row",
           defaultValue: 3,
           configs: {
             min: 1,
@@ -247,161 +260,161 @@ export const schema: HydrogenComponentSchema = {
           },
         },
         {
-          type: 'range',
-          label: 'Spacing between rows',
-          name: 'gapRow',
+          type: "range",
+          label: "Spacing between rows",
+          name: "gapRow",
           configs: {
             min: 0,
             max: 100,
             step: 1,
-            unit: 'px',
+            unit: "px",
           },
           defaultValue: 20,
         },
         {
-          type: 'switch',
-          name: 'showSeperator',
-          label: 'Seperator',
+          type: "switch",
+          name: "showSeperator",
+          label: "Seperator",
           defaultValue: true,
         },
       ],
     },
     {
-      group: 'Heading title (optional)',
+      group: "Heading title (optional)",
       inputs: [
         {
-          type: 'select',
-          name: 'as',
-          label: 'HTML tag',
+          type: "select",
+          name: "as",
+          label: "HTML tag",
           configs: {
             options: [
-              {value: 'h1', label: '<h1> (Heading 1)'},
-              {value: 'h2', label: '<h2> (Heading 2)'},
-              {value: 'h3', label: '<h3> (Heading 3)'},
-              {value: 'h4', label: '<h4> (Heading 4)'},
-              {value: 'h5', label: '<h5> (Heading 5)'},
-              {value: 'h6', label: '<h6> (Heading 6)'},
+              { value: "h1", label: "<h1> (Heading 1)" },
+              { value: "h2", label: "<h2> (Heading 2)" },
+              { value: "h3", label: "<h3> (Heading 3)" },
+              { value: "h4", label: "<h4> (Heading 4)" },
+              { value: "h5", label: "<h5> (Heading 5)" },
+              { value: "h6", label: "<h6> (Heading 6)" },
             ],
           },
-          defaultValue: 'h4',
+          defaultValue: "h4",
         },
         {
-          type: 'select',
-          name: 'size',
-          label: 'Text size',
+          type: "select",
+          name: "size",
+          label: "Text size",
           configs: {
             options: [
-              {value: 'default', label: 'Default'},
-              {value: 'scale', label: 'Auto scale'},
-              {value: 'custom', label: 'Custom'},
+              { value: "default", label: "Default" },
+              { value: "scale", label: "Auto scale" },
+              { value: "custom", label: "Custom" },
             ],
           },
-          defaultValue: 'default',
+          defaultValue: "default",
         },
         {
-          type: 'range',
-          name: 'minSize',
-          label: 'Minimum scale size',
+          type: "range",
+          name: "minSize",
+          label: "Minimum scale size",
           configs: {
             min: 12,
             max: 32,
             step: 1,
-            unit: 'px',
+            unit: "px",
           },
           defaultValue: 16,
-          condition: 'size.eq.scale',
+          condition: "size.eq.scale",
         },
         {
-          type: 'range',
-          name: 'maxSize',
-          label: 'Maximum scale size',
+          type: "range",
+          name: "maxSize",
+          label: "Maximum scale size",
           configs: {
             min: 40,
             max: 96,
             step: 1,
-            unit: 'px',
+            unit: "px",
           },
           defaultValue: 64,
-          condition: 'size.eq.scale',
+          condition: "size.eq.scale",
           helpText:
             'See how scale text works <a href="https://css-tricks.com/snippets/css/fluid-typography/" target="_blank" rel="noreferrer">here</a>.',
         },
         {
-          type: 'select',
-          name: 'mobileSize',
-          label: 'Mobile text size',
-          condition: 'size.eq.custom',
+          type: "select",
+          name: "mobileSize",
+          label: "Mobile text size",
+          condition: "size.eq.custom",
           configs: {
             options: [
-              {value: 'xs', label: 'Extra small (text-xs)'},
-              {value: 'sm', label: 'Small (text-sm)'},
-              {value: 'base', label: 'Base (text-base)'},
-              {value: 'lg', label: 'Large (text-lg)'},
-              {value: 'xl', label: 'Extra large (text-xl)'},
-              {value: '2xl', label: '2x large (text-2xl)'},
-              {value: '3xl', label: '3x large (text-3xl)'},
-              {value: '4xl', label: '4x large (text-4xl)'},
-              {value: '5xl', label: '5x large (text-5xl)'},
-              {value: '6xl', label: '6x large (text-6xl)'},
-              {value: '7xl', label: '7x large (text-7xl)'},
-              {value: '8xl', label: '8x large (text-8xl)'},
-              {value: '9xl', label: '9x large (text-9xl)'},
+              { value: "xs", label: "Extra small (text-xs)" },
+              { value: "sm", label: "Small (text-sm)" },
+              { value: "base", label: "Base (text-base)" },
+              { value: "lg", label: "Large (text-lg)" },
+              { value: "xl", label: "Extra large (text-xl)" },
+              { value: "2xl", label: "2x large (text-2xl)" },
+              { value: "3xl", label: "3x large (text-3xl)" },
+              { value: "4xl", label: "4x large (text-4xl)" },
+              { value: "5xl", label: "5x large (text-5xl)" },
+              { value: "6xl", label: "6x large (text-6xl)" },
+              { value: "7xl", label: "7x large (text-7xl)" },
+              { value: "8xl", label: "8x large (text-8xl)" },
+              { value: "9xl", label: "9x large (text-9xl)" },
             ],
           },
-          defaultValue: '3xl',
+          defaultValue: "3xl",
         },
         {
-          type: 'select',
-          name: 'desktopSize',
-          label: 'Desktop text size',
-          condition: 'size.eq.custom',
+          type: "select",
+          name: "desktopSize",
+          label: "Desktop text size",
+          condition: "size.eq.custom",
           configs: {
             options: [
-              {value: 'xs', label: 'Extra small (text-xs)'},
-              {value: 'sm', label: 'Small (text-sm)'},
-              {value: 'base', label: 'Base (text-base)'},
-              {value: 'lg', label: 'Large (text-lg)'},
-              {value: 'xl', label: 'Extra large (text-xl)'},
-              {value: '2xl', label: '2x large (text-2xl)'},
-              {value: '3xl', label: '3x large (text-3xl)'},
-              {value: '4xl', label: '4x large (text-4xl)'},
-              {value: '5xl', label: '5x large (text-5xl)'},
-              {value: '6xl', label: '6x large (text-6xl)'},
-              {value: '7xl', label: '7x large (text-7xl)'},
-              {value: '8xl', label: '8x large (text-8xl)'},
-              {value: '9xl', label: '9x large (text-9xl)'},
+              { value: "xs", label: "Extra small (text-xs)" },
+              { value: "sm", label: "Small (text-sm)" },
+              { value: "base", label: "Base (text-base)" },
+              { value: "lg", label: "Large (text-lg)" },
+              { value: "xl", label: "Extra large (text-xl)" },
+              { value: "2xl", label: "2x large (text-2xl)" },
+              { value: "3xl", label: "3x large (text-3xl)" },
+              { value: "4xl", label: "4x large (text-4xl)" },
+              { value: "5xl", label: "5x large (text-5xl)" },
+              { value: "6xl", label: "6x large (text-6xl)" },
+              { value: "7xl", label: "7x large (text-7xl)" },
+              { value: "8xl", label: "8x large (text-8xl)" },
+              { value: "9xl", label: "9x large (text-9xl)" },
             ],
           },
-          defaultValue: '5xl',
+          defaultValue: "5xl",
         },
         {
-          type: 'select',
-          name: 'weight',
-          label: 'Weight',
+          type: "select",
+          name: "weight",
+          label: "Weight",
           configs: {
             options: [
-              {value: '100', label: '100 - Thin'},
-              {value: '200', label: '200 - Extra Light'},
-              {value: '300', label: '300 - Light'},
-              {value: '400', label: '400 - Normal'},
-              {value: '500', label: '500 - Medium'},
-              {value: '600', label: '600 - Semi Bold'},
-              {value: '700', label: '700 - Bold'},
-              {value: '800', label: '800 - Extra Bold'},
-              {value: '900', label: '900 - Black'},
+              { value: "100", label: "100 - Thin" },
+              { value: "200", label: "200 - Extra Light" },
+              { value: "300", label: "300 - Light" },
+              { value: "400", label: "400 - Normal" },
+              { value: "500", label: "500 - Medium" },
+              { value: "600", label: "600 - Semi Bold" },
+              { value: "700", label: "700 - Bold" },
+              { value: "800", label: "800 - Extra Bold" },
+              { value: "900", label: "900 - Black" },
             ],
           },
-          defaultValue: '400',
+          defaultValue: "400",
         },
       ],
     },
   ],
-  childTypes: ['heading'],
+  childTypes: ["heading"],
   presets: {
     children: [
       {
-        type: 'heading',
-        content: 'Blogs',
+        type: "heading",
+        content: "Blogs",
       },
     ],
   },
diff --git a/app/sections/feature-product/arrows.tsx b/app/sections/feature-product/arrows.tsx
index 8097eed..f5947b1 100644
--- a/app/sections/feature-product/arrows.tsx
+++ b/app/sections/feature-product/arrows.tsx
@@ -10,14 +10,13 @@ let variants = cva(
     "z-10",
     "absolute top-1/2 -translate-y-1/2 z-1",
     "p-2 text-center cursor-pointer",
-    "border border-bar-subtle",
     "transition-all duration-200",
   ],
   {
     variants: {
       arrowsColor: {
-        light: "text-foreground bg-transparent",
-        dark: "text-gray-100 bg-primary",
+        light: "text-text bg-transparent border border-border-subtle",
+        dark: "text-gray-100 bg-[#3d490b]",
       },
       arrowsShape: {
         square: "",
diff --git a/app/sections/feature-product/list-products.tsx b/app/sections/feature-product/list-products.tsx
index 5f4311d..a68b07c 100644
--- a/app/sections/feature-product/list-products.tsx
+++ b/app/sections/feature-product/list-products.tsx
@@ -54,7 +54,7 @@ const ListProducts = forwardRef<HTMLDivElement, FeaturedProductsProps>(
     const productItemBlank = () => {
       return (
         <div className="flex w-full cursor-pointer flex-col gap-4">
-          <div className="flex aspect-square w-full items-center justify-center bg-background-subtle-1">
+          <div className="flex aspect-square w-full items-center justify-center bg-[#e5e6d4]">
             <IconImageBlank
               viewBox="0 0 526 526"
               className="h-full w-full opacity-80"
diff --git a/app/sections/instagram/index.tsx b/app/sections/instagram/index.tsx
index 0e400f8..451cb85 100644
--- a/app/sections/instagram/index.tsx
+++ b/app/sections/instagram/index.tsx
@@ -60,7 +60,7 @@ const Instagram = forwardRef<HTMLElement, InstagramProps>((props, ref) => {
   } as CSSProperties;
   const imageItemBlank = () => {
     return (
-      <div className="flex aspect-square w-full items-center justify-center bg-background-subtle-1">
+      <div className="flex aspect-square w-full items-center justify-center bg-[#e5e6d4]">
         <IconImageBlank
           viewBox="0 0 526 526"
           className="!h-full !w-full opacity-80"
diff --git a/app/sections/judgeme-reviews/review-form.tsx b/app/sections/judgeme-reviews/review-form.tsx
index 43bbba3..7884231 100644
--- a/app/sections/judgeme-reviews/review-form.tsx
+++ b/app/sections/judgeme-reviews/review-form.tsx
@@ -56,7 +56,7 @@ export function ReviewForm({
         <div
           data-motion="fade-up"
           className={clsx(
-            "flex flex-col gap-4 bg-background-subtle-1 p-6 w-full",
+            "flex flex-col gap-4 bg-[#E0E5D6] p-6 w-full",
             judgemeReviews.reviews.length === 0 ? "items-center" : "items-start"
           )}
         >
@@ -93,7 +93,7 @@ export function ReviewForm({
         <div
           data-motion="fade-up"
           className={clsx(
-            "bg-background-subtle-1 p-6 w-full",
+            "bg-[#E0E5D6] p-6 w-full",
             judgemeReviews.reviews.length === 0 && "flex justify-center"
           )}
         >
@@ -205,7 +205,7 @@ export function ReviewForm({
                   <textarea
                     id="body"
                     name="body"
-                    className="w-full bg-transparent border px-3 py-3 border-line/30 outline-none focus-visible:border-line"
+                    className="w-full bg-transparent rounded border-2 px-3 py-3 border-border-subtle outline-none focus-visible:border-border"
                     rows={4}
                   ></textarea>
                 </div>
@@ -241,7 +241,7 @@ export function ReviewForm({
         <div
           data-motion="fade-up"
           className={clsx(
-            "flex flex-col gap-6 p-6 bg-background-subtle-1 w-full",
+            "flex flex-col gap-6 p-6 bg-[#E0E5D6] w-full",
             judgemeReviews.reviews.length === 0 && "items-center"
           )}
           role="alert"
diff --git a/app/sections/judgeme-reviews/review-list.tsx b/app/sections/judgeme-reviews/review-list.tsx
index 4f26e3f..b5be408 100644
--- a/app/sections/judgeme-reviews/review-list.tsx
+++ b/app/sections/judgeme-reviews/review-list.tsx
@@ -23,7 +23,7 @@ export function ReviewList({judgemeReviews}: {judgemeReviews: JudgemeReviewsData
           Reviews ({judgemeReviews.reviewNumber})
         </span>
         {reviews.map((review, index) => (
-          <div data-motion="fade-up">
+          <div data-motion="fade-up" className="space-y-6">
             <div key={index} className="flex gap-4 flex-col md:flex-row">
               <div className="flex flex-col gap-4 md:w-1/4 w-full">
                 <div className="flex items-center gap-0.5">
@@ -42,7 +42,7 @@ export function ReviewList({judgemeReviews}: {judgemeReviews: JudgemeReviewsData
                 <p className="font-normal text-base line-clamp-4">{review.body}</p>
               </div>
             </div>
-            <hr className="border-t border-bar-subtle" />
+            <hr className="border-t border-border-subtle" />
           </div>
         ))}
       </div>
@@ -52,7 +52,7 @@ export function ReviewList({judgemeReviews}: {judgemeReviews: JudgemeReviewsData
             <button
               key={i}
               onClick={() => setPage(i)}
-              className="bg-primary/5 px-4 py-2 rounded-md hover:bg-primary/20 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-primary disabled:text-white"
+              className="bg-[#3d490b]/5 px-4 py-2 rounded-md hover:bg-[#3d490b]/20 transition-colors duration-200 disabled:bg-[#3d490b] disabled:text-white"
               disabled={i === page}
             >
               {i + 1}
diff --git a/app/sections/product-placement/productItem.tsx b/app/sections/product-placement/productItem.tsx
index 8b69f57..5124b93 100644
--- a/app/sections/product-placement/productItem.tsx
+++ b/app/sections/product-placement/productItem.tsx
@@ -39,7 +39,7 @@ const ProductPlacementItem = forwardRef<
           )}
         </div>
       ) : (
-        <div className="flex h-full w-full items-center justify-center bg-background-subtle-1">
+        <div className="flex h-full w-full items-center justify-center bg-[#e5e6d4]">
           <IconImageBlank
             className="h-full w-full opacity-80 !aspect-[var(--item-thumbs-ratio)]"
             viewBox="0 0 526 526"
diff --git a/app/sections/slides/slide.tsx b/app/sections/slides/slide.tsx
index f0fa05b..3e9c091 100644
--- a/app/sections/slides/slide.tsx
+++ b/app/sections/slides/slide.tsx
@@ -64,7 +64,7 @@ const Slide = forwardRef<HTMLDivElement, SlideProps>((props, ref) => {
                                 )}
                             />
                         ) : (
-                            <div className="flex justify-center items-center bg-background-subtle-1 w-full h-full">
+                            <div className="flex justify-center items-center bg-[#e5e6d4] w-full h-full">
                                 <IconImageBlank
                                     className="w-96 h-96 opacity-80"
                                     viewBox="0 0 526 526"
diff --git a/app/sections/testimonials/index.tsx b/app/sections/testimonials/index.tsx
index 03862b4..aaadf1f 100644
--- a/app/sections/testimonials/index.tsx
+++ b/app/sections/testimonials/index.tsx
@@ -44,7 +44,7 @@ const Testimonials = forwardRef<HTMLElement, TestimonialsProps & SectionProps>((
         <Section
             ref={ref}
             {...rest}
-            className='relative bg-secondary overflow-hidden px-0'
+            className='relative bg-[#f8f8f0] overflow-hidden px-0'
             style={sectionStyle}
         >
             <div className="absolute inset-0">
@@ -55,7 +55,7 @@ const Testimonials = forwardRef<HTMLElement, TestimonialsProps & SectionProps>((
                         sizes="auto"
                     />
                 ) : (
-                    <div className="flex justify-center items-center bg-background-subtle-1 w-full h-full">
+                    <div className="flex justify-center items-center bg-[#e5e6d4] w-full h-full">
                         <IconImageBlank
                             className="w-96 h-96 opacity-80"
                             viewBox="0 0 526 526"
diff --git a/app/sections/video-banner/index.tsx b/app/sections/video-banner/index.tsx
index 5e5c70c..963183b 100644
--- a/app/sections/video-banner/index.tsx
+++ b/app/sections/video-banner/index.tsx
@@ -178,7 +178,7 @@ let VideoBanner = forwardRef<HTMLElement, VideoBannerProps>((props, ref) => {
         )}
       >
         {inView && (
-          <Suspense fallback={<div className='w-full h-full bg-background-subtle-1'></div>}>
+          <Suspense fallback={<div className='w-full h-full bg-background'></div>}>
             <ReactPlayer
               url={videoURL2 || videoURL.url}
               playing

From b150281dbb3a5ebdd9b99900e00c672b482e348c Mon Sep 17 00:00:00 2001
From: dangthang <dangthangkk2000@gmail.com>
Date: Thu, 5 Dec 2024 15:08:14 +0700
Subject: [PATCH 15/19] refactor: remove Checkbox component; update import
 paths of Button and Input across the application for consistency and clarity

---
 @/components/checkbox.tsx                     | 35 -------------------
 app/components/AddToCartButton.tsx            |  2 +-
 app/components/Cart.tsx                       |  4 +--
 app/components/CountrySelector.tsx            |  2 +-
 app/components/Footer.tsx                     |  4 +--
 app/components/Modal.tsx                      |  2 +-
 app/components/ProductCard.tsx                |  2 +-
 app/components/QuickView.tsx                  |  2 +-
 app/components/account/Addresses.tsx          |  6 ++--
 {@ => app}/components/button.tsx              |  0
 {@ => app}/components/input.tsx               |  0
 .../SearchDrawer/SearchTypeDrawer.tsx         |  2 +-
 .../SearchDrawer/SearchTypeDrawerResults.tsx  |  2 +-
 .../SearchHeader/SearchTypeHeader.tsx         |  2 +-
 .../SearchHeader/SearchTypeHeaderResults.tsx  |  2 +-
 app/components/product-form/quantity.tsx      |  2 +-
 {@ => app}/components/spinner.tsx             |  0
 app/root.tsx                                  |  2 +-
 app/routes/($locale).search.tsx               |  4 +--
 app/sections/all-products/index.tsx           |  2 +-
 app/sections/atoms/button.tsx                 |  2 +-
 app/sections/collection-filters/index.tsx     |  2 +-
 .../collection-list/collection-list.tsx       |  2 +-
 app/sections/contact-form/contact-form.tsx    |  4 +--
 app/sections/judgeme-reviews/review-form.tsx  |  4 +--
 app/sections/newsletter/input-email.tsx       |  4 +--
 app/sections/style-guide.tsx                  |  4 +--
 27 files changed, 32 insertions(+), 67 deletions(-)
 delete mode 100644 @/components/checkbox.tsx
 rename {@ => app}/components/button.tsx (100%)
 rename {@ => app}/components/input.tsx (100%)
 rename {@ => app}/components/spinner.tsx (100%)

diff --git a/@/components/checkbox.tsx b/@/components/checkbox.tsx
deleted file mode 100644
index 679e79a..0000000
--- a/@/components/checkbox.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import * as React from 'react';
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import {Check} from 'lucide-react';
-
-import {cn} from '@/lib/utils';
-
-interface CheckboxProps
-  extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {
-  label?: string;
-}
-
-const Checkbox = React.forwardRef<
-  React.ElementRef<typeof CheckboxPrimitive.Root>,
-  CheckboxProps
->(({className, label, ...props}, ref) => (
-    <div className={cn(`flex items-center space-x-2.5`, className)}>
-      <CheckboxPrimitive.Root
-        ref={ref}
-        className={cn(
-          'peer w-5 h-5 shrink-0 rounded border-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
-        )}
-        {...props}
-      >
-        <CheckboxPrimitive.Indicator
-          className={cn('flex items-center justify-center text-current')}
-        >
-          <Check className="h-4 w-4" />
-        </CheckboxPrimitive.Indicator>
-      </CheckboxPrimitive.Root>
-      {label ? <span>{label}</span> : null}
-    </div>
-  ));
-Checkbox.displayName = CheckboxPrimitive.Root.displayName;
-
-export {Checkbox};
diff --git a/app/components/AddToCartButton.tsx b/app/components/AddToCartButton.tsx
index 19ad808..f32ea27 100644
--- a/app/components/AddToCartButton.tsx
+++ b/app/components/AddToCartButton.tsx
@@ -9,7 +9,7 @@ import {
 import type { FetcherWithComponents } from '@remix-run/react';
 import { useEffect } from 'react';
 
-import { Button } from '@/components/button';
+import { Button } from '~/components/button';
 import { usePageAnalytics } from '~/hooks/usePageAnalytics';
 
 export function AddToCartButton({
diff --git a/app/components/Cart.tsx b/app/components/Cart.tsx
index b06f18c..f688a25 100644
--- a/app/components/Cart.tsx
+++ b/app/components/Cart.tsx
@@ -1,5 +1,5 @@
-import { Button } from "@/components/button";
-import { Input } from "@/components/input";
+import { Button } from "~/components/button";
+import { Input } from "~/components/input";
 import { cn } from "@/lib/utils";
 import { Link } from "@remix-run/react";
 import { CartForm, Image, Money } from "@shopify/hydrogen";
diff --git a/app/components/CountrySelector.tsx b/app/components/CountrySelector.tsx
index 9088ed2..7de398d 100644
--- a/app/components/CountrySelector.tsx
+++ b/app/components/CountrySelector.tsx
@@ -8,7 +8,7 @@ import {useRootLoaderData} from '~/root';
 import clsx from 'clsx';
 import {useCallback, useEffect, useRef, useState} from 'react';
 import {useInView} from 'react-intersection-observer';
-import { Button } from '@/components/button';
+import { Button } from '~/components/button';
 
 export function CountrySelector() {
   const fetcher = useFetcher();
diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx
index 131478c..f2cfaf6 100644
--- a/app/components/Footer.tsx
+++ b/app/components/Footer.tsx
@@ -1,5 +1,5 @@
-import {Button} from '@/components/button';
-import {Input} from '@/components/input';
+import {Button} from '~/components/button';
+import {Input} from '~/components/input';
 import {Disclosure} from '@headlessui/react';
 import {NavLink, useFetcher} from '@remix-run/react';
 import {useThemeSettings} from '@weaverse/hydrogen';
diff --git a/app/components/Modal.tsx b/app/components/Modal.tsx
index be08aa5..26812bf 100644
--- a/app/components/Modal.tsx
+++ b/app/components/Modal.tsx
@@ -1,4 +1,4 @@
-import {Button} from '@/components/button';
+import {Button} from '~/components/button';
 import {Link} from '@remix-run/react';
 import {useEffect} from 'react';
 import {IconClose} from './Icon';
diff --git a/app/components/ProductCard.tsx b/app/components/ProductCard.tsx
index 51cabc2..5894f13 100644
--- a/app/components/ProductCard.tsx
+++ b/app/components/ProductCard.tsx
@@ -1,4 +1,4 @@
-import {Button} from '@/components/button';
+import {Button} from '~/components/button';
 import type {ShopifyAnalyticsProduct} from '@shopify/hydrogen';
 import {flattenConnection, Image, Money, useMoney} from '@shopify/hydrogen';
 import type {MoneyV2, Product} from '@shopify/hydrogen/storefront-api-types';
diff --git a/app/components/QuickView.tsx b/app/components/QuickView.tsx
index 9831ad2..9b15789 100644
--- a/app/components/QuickView.tsx
+++ b/app/components/QuickView.tsx
@@ -1,4 +1,4 @@
-import { Button } from "@/components/button";
+import { Button } from "~/components/button";
 import { useFetcher } from "@remix-run/react";
 import { Jsonify } from "@remix-run/server-runtime/dist/jsonify";
 import { Money, ShopPayButton } from "@shopify/hydrogen";
diff --git a/app/components/account/Addresses.tsx b/app/components/account/Addresses.tsx
index 42f1dea..832d1ee 100644
--- a/app/components/account/Addresses.tsx
+++ b/app/components/account/Addresses.tsx
@@ -1,6 +1,6 @@
-import { Button } from "@/components/button";
-import { Checkbox } from "@/components/checkbox";
-import { Input } from "@/components/input";
+import { Button } from "~/components/button";
+import { Checkbox } from "~/components/checkbox";
+import { Input } from "~/components/input";
 import { Dialog } from "@headlessui/react";
 import {
   Form,
diff --git a/@/components/button.tsx b/app/components/button.tsx
similarity index 100%
rename from @/components/button.tsx
rename to app/components/button.tsx
diff --git a/@/components/input.tsx b/app/components/input.tsx
similarity index 100%
rename from @/components/input.tsx
rename to app/components/input.tsx
diff --git a/app/components/predictive-search/PredictiveSearch/SearchDrawer/SearchTypeDrawer.tsx b/app/components/predictive-search/PredictiveSearch/SearchDrawer/SearchTypeDrawer.tsx
index bd18e08..3d756fc 100644
--- a/app/components/predictive-search/PredictiveSearch/SearchDrawer/SearchTypeDrawer.tsx
+++ b/app/components/predictive-search/PredictiveSearch/SearchDrawer/SearchTypeDrawer.tsx
@@ -1,4 +1,4 @@
-import { Input } from '@/components/input';
+import { Input } from '~/components/input';
 import {IconSearch} from '../../../Icon';
 import {PredictiveSearchForm} from '../../SearchForm';
 import { SearchTypeDrawerResults } from './SearchTypeDrawerResults';
diff --git a/app/components/predictive-search/PredictiveSearch/SearchDrawer/SearchTypeDrawerResults.tsx b/app/components/predictive-search/PredictiveSearch/SearchDrawer/SearchTypeDrawerResults.tsx
index 64e905e..5ab1dd3 100644
--- a/app/components/predictive-search/PredictiveSearch/SearchDrawer/SearchTypeDrawerResults.tsx
+++ b/app/components/predictive-search/PredictiveSearch/SearchDrawer/SearchTypeDrawerResults.tsx
@@ -1,7 +1,7 @@
 import { Link } from "@remix-run/react";
 import { PredictiveSearchResult } from "../../PredictiveSearchResult";
 import { usePredictiveSearch } from "../../usePredictiveSearch";
-import { Button } from "@/components/button";
+import { Button } from "~/components/button";
 
 export function SearchTypeDrawerResults() {
   const { results, totalResults, searchTerm, searchInputRef } =
diff --git a/app/components/predictive-search/PredictiveSearch/SearchHeader/SearchTypeHeader.tsx b/app/components/predictive-search/PredictiveSearch/SearchHeader/SearchTypeHeader.tsx
index 5551a5c..6f36a8a 100644
--- a/app/components/predictive-search/PredictiveSearch/SearchHeader/SearchTypeHeader.tsx
+++ b/app/components/predictive-search/PredictiveSearch/SearchHeader/SearchTypeHeader.tsx
@@ -1,7 +1,7 @@
 import {IconSearch} from '~/components/Icon';
 import {PredictiveSearchForm} from '../../SearchForm';
 import { SearchTypeHeaderResults } from './SearchTypeHeaderResults';
-import { Input } from '@/components/input';
+import { Input } from '~/components/input';
 
 interface PredictiveSearchProps {
   // Predictive search props
diff --git a/app/components/predictive-search/PredictiveSearch/SearchHeader/SearchTypeHeaderResults.tsx b/app/components/predictive-search/PredictiveSearch/SearchHeader/SearchTypeHeaderResults.tsx
index b70a9f6..46b2f6f 100644
--- a/app/components/predictive-search/PredictiveSearch/SearchHeader/SearchTypeHeaderResults.tsx
+++ b/app/components/predictive-search/PredictiveSearch/SearchHeader/SearchTypeHeaderResults.tsx
@@ -1,7 +1,7 @@
 import { Link } from "@remix-run/react";
 import { PredictiveSearchResult } from "../../PredictiveSearchResult";
 import { usePredictiveSearch } from "../../usePredictiveSearch";
-import { Button } from "@/components/button";
+import { Button } from "~/components/button";
 
 export function SearchTypeHeaderResults() {
   const { results, totalResults, searchTerm, searchInputRef } =
diff --git a/app/components/product-form/quantity.tsx b/app/components/product-form/quantity.tsx
index b47ab5e..f58ea96 100644
--- a/app/components/product-form/quantity.tsx
+++ b/app/components/product-form/quantity.tsx
@@ -1,4 +1,4 @@
-import { Input } from "@/components/input";
+import { Input } from "~/components/input";
 
 interface QuantityProps {
   value: number;
diff --git a/@/components/spinner.tsx b/app/components/spinner.tsx
similarity index 100%
rename from @/components/spinner.tsx
rename to app/components/spinner.tsx
diff --git a/app/root.tsx b/app/root.tsx
index 29b3192..a06556e 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -31,7 +31,7 @@ import tailwind from "./styles/tailwind.css?url";
 import { GlobalStyle } from "./weaverse/style";
 import "@fontsource-variable/cormorant";
 import "@fontsource-variable/nunito-sans";
-import { Button } from "@/components/button";
+import { Button } from "~/components/button";
 import invariant from "tiny-invariant";
 import { CustomAnalytics } from "~/components/Analytics";
 import { seoPayload } from "~/lib/seo.server";
diff --git a/app/routes/($locale).search.tsx b/app/routes/($locale).search.tsx
index 7fa5c52..bc6d4db 100644
--- a/app/routes/($locale).search.tsx
+++ b/app/routes/($locale).search.tsx
@@ -1,4 +1,4 @@
-import {Button} from '@/components/button';
+import {Button} from '~/components/button';
 import {
   Await,
   Form,
@@ -36,7 +36,7 @@ import {
   getFeaturedData,
   type FeaturedData,
 } from './($locale).featured-products';
-import { Input } from '@/components/input';
+import { Input } from '~/components/input';
 
 export async function loader({request, context}: LoaderFunctionArgs) {
   const {storefront} = context;
diff --git a/app/sections/all-products/index.tsx b/app/sections/all-products/index.tsx
index ba174f7..6254f7b 100644
--- a/app/sections/all-products/index.tsx
+++ b/app/sections/all-products/index.tsx
@@ -1,4 +1,4 @@
-import { Button } from "@/components/button";
+import { Button } from "~/components/button";
 import { useLoaderData } from "@remix-run/react";
 import { Pagination } from "@shopify/hydrogen";
 import type {
diff --git a/app/sections/atoms/button.tsx b/app/sections/atoms/button.tsx
index 93f008c..a70a8df 100644
--- a/app/sections/atoms/button.tsx
+++ b/app/sections/atoms/button.tsx
@@ -1,4 +1,4 @@
-import {Button, type ButtonProps} from '@/components/button';
+import {Button, type ButtonProps} from '~/components/button';
 import type {HydrogenComponentSchema} from '@weaverse/hydrogen';
 import {IconEllipse} from '~/components/Icon';
 import {CSSProperties, forwardRef} from 'react';
diff --git a/app/sections/collection-filters/index.tsx b/app/sections/collection-filters/index.tsx
index c55de43..a8f1b9d 100644
--- a/app/sections/collection-filters/index.tsx
+++ b/app/sections/collection-filters/index.tsx
@@ -8,7 +8,7 @@ import { forwardRef } from "react";
 import { useInView } from "react-intersection-observer";
 import type { CollectionDetailsQuery } from "storefrontapi.generated";
 import { ProductsLoadedOnScroll } from "./products-loaded-on-scroll";
-import { Button } from "@/components/button";
+import { Button } from "~/components/button";
 import { cva, VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
diff --git a/app/sections/collection-list/collection-list.tsx b/app/sections/collection-list/collection-list.tsx
index 55b859d..566292d 100644
--- a/app/sections/collection-list/collection-list.tsx
+++ b/app/sections/collection-list/collection-list.tsx
@@ -1,4 +1,4 @@
-import {Button} from '@/components/button';
+import {Button} from '~/components/button';
 import {useLoaderData} from '@remix-run/react';
 import {Pagination} from '@shopify/hydrogen';
 import type {
diff --git a/app/sections/contact-form/contact-form.tsx b/app/sections/contact-form/contact-form.tsx
index efada6e..842e9f6 100644
--- a/app/sections/contact-form/contact-form.tsx
+++ b/app/sections/contact-form/contact-form.tsx
@@ -4,8 +4,8 @@ import type {
  } from "@weaverse/hydrogen";
 import { forwardRef, CSSProperties } from "react";
 import { Form } from "@remix-run/react";
-import { Input } from "@/components/input";
-import { Button } from "@/components/button";
+import { Input } from "~/components/input";
+import { Button } from "~/components/button";
 import { useMotion } from "~/hooks/use-motion";
 
 interface ContactFormProps extends HydrogenComponentProps {
diff --git a/app/sections/judgeme-reviews/review-form.tsx b/app/sections/judgeme-reviews/review-form.tsx
index 7884231..1466608 100644
--- a/app/sections/judgeme-reviews/review-form.tsx
+++ b/app/sections/judgeme-reviews/review-form.tsx
@@ -1,5 +1,5 @@
-import { Button } from "@/components/button";
-import { Input } from "@/components/input";
+import { Button } from "~/components/button";
+import { Input } from "~/components/input";
 import { useFetcher, useLoaderData } from "@remix-run/react";
 import clsx from "clsx";
 import { FormEvent, useEffect, useRef, useState } from "react";
diff --git a/app/sections/newsletter/input-email.tsx b/app/sections/newsletter/input-email.tsx
index cf3b9d4..374769a 100644
--- a/app/sections/newsletter/input-email.tsx
+++ b/app/sections/newsletter/input-email.tsx
@@ -1,5 +1,5 @@
-import {Button} from '@/components/button';
-import {Input} from '@/components/input';
+import {Button} from '~/components/button';
+import {Input} from '~/components/input';
 import {useFetcher} from '@remix-run/react';
 import type {
   HydrogenComponentProps,
diff --git a/app/sections/style-guide.tsx b/app/sections/style-guide.tsx
index 4881e6c..a10d99a 100644
--- a/app/sections/style-guide.tsx
+++ b/app/sections/style-guide.tsx
@@ -1,5 +1,5 @@
-import {Input} from '@/components/input';
-import {Button} from '@/components/button';
+import {Input} from '~/components/input';
+import {Button} from '~/components/button';
 import type {HydrogenComponentSchema} from '@weaverse/hydrogen';
 import {forwardRef} from 'react';
 

From 2f4cd0ec5757e0444a6de17f57bfbc5f3d643289 Mon Sep 17 00:00:00 2001
From: dangthang <dangthangkk2000@gmail.com>
Date: Thu, 5 Dec 2024 15:08:24 +0700
Subject: [PATCH 16/19] feat: add Checkbox component with customizable label
 and styling options for improved form functionality and user experience

---
 app/components/checkbox.tsx | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 app/components/checkbox.tsx

diff --git a/app/components/checkbox.tsx b/app/components/checkbox.tsx
new file mode 100644
index 0000000..eac9739
--- /dev/null
+++ b/app/components/checkbox.tsx
@@ -0,0 +1,35 @@
+import * as React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import {Check} from 'lucide-react';
+
+import {cn} from '@/lib/utils';
+
+interface CheckboxProps
+  extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {
+  label?: string;
+}
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  CheckboxProps
+>(({className, label, ...props}, ref) => (
+    <div className={cn(`flex items-center space-x-2.5`, className)}>
+      <CheckboxPrimitive.Root
+        ref={ref}
+        className={cn(
+          'peer w-5 h-5 shrink-0 rounded border-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-[#3D490B] data-[state=checked]:text-[#EAEAD6]',
+        )}
+        {...props}
+      >
+        <CheckboxPrimitive.Indicator
+          className={cn('flex items-center justify-center text-current')}
+        >
+          <Check className="h-4 w-4" />
+        </CheckboxPrimitive.Indicator>
+      </CheckboxPrimitive.Root>
+      {label ? <span>{label}</span> : null}
+    </div>
+  ));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export {Checkbox};

From 31d6b9b9088c463a47bbc0c6a35031b30c0fd120 Mon Sep 17 00:00:00 2001
From: dangthang <dangthangkk2000@gmail.com>
Date: Thu, 5 Dec 2024 15:08:36 +0700
Subject: [PATCH 17/19] refactor: update import paths and border class names
 for consistent styling across DrawerFilter and SortMenu components

---
 app/components/DrawerFilter.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/components/DrawerFilter.tsx b/app/components/DrawerFilter.tsx
index adac97a..9ed3e87 100644
--- a/app/components/DrawerFilter.tsx
+++ b/app/components/DrawerFilter.tsx
@@ -1,6 +1,6 @@
-import {Button} from '@/components/button';
-import {Checkbox} from '@/components/checkbox';
-import {Input} from '@/components/input';
+import {Button} from '~/components/button';
+import {Checkbox} from '~/components/checkbox';
+import {Input} from '~/components/input';
 import {Disclosure, Menu} from '@headlessui/react';
 import {
   Link,
@@ -45,7 +45,7 @@ export function DrawerFilter({
   const {openDrawer, isOpen, closeDrawer} = useDrawer();
   return (
     <>
-      <div className="border-y border-bar-subtle py-4 px-3 md:px-4 lg:px-0">
+      <div className="border-y border-border-subtle py-4 px-3 md:px-4 lg:px-0">
         <div className="container flex w-full items-center justify-between">
           <span className="font-heading text-xl font-medium tracking-tight">
             {productNumber} Products
@@ -137,7 +137,7 @@ export function FiltersDrawer({
 
   return (
     <nav className="">
-      <div className="divide-y divide-bar-subtle">
+      <div className="divide-y divide-border-subtle">
         {filters.map((filter: Filter) => (
           <Disclosure as="div" key={filter.id} className="w-full pb-6 pt-5">
             {({open}) => (
@@ -315,7 +315,7 @@ export default function SortMenu({
 
   return (
     <Menu as="div" className="relative z-30">
-      <Menu.Button className="flex h-[50px] items-center gap-[10px] rounded border border-foreground px-4 py-3">
+      <Menu.Button className="flex h-[50px] items-center gap-[10px] rounded border border-border px-4 py-3">
         <span className="font-heading text-xl font-medium">Sort by</span>
         <IconCaret />
       </Menu.Button>

From 9139b65f8b71654766e8742e7ffc73c0dcd8792b Mon Sep 17 00:00:00 2001
From: dangthang <dangthangkk2000@gmail.com>
Date: Thu, 5 Dec 2024 15:08:51 +0700
Subject: [PATCH 18/19] refactor: rename unstable_viewTransition to
 viewTransition for consistency in Link component and related hooks updates

---
 app/components/Link.tsx  |   4 +-
 app/hooks/use-motion.tsx |   4 +-
 app/styles/tailwind.css  | 183 ++++++++++++++++++++-------------------
 3 files changed, 98 insertions(+), 93 deletions(-)

diff --git a/app/components/Link.tsx b/app/components/Link.tsx
index 3c25063..25f8617 100644
--- a/app/components/Link.tsx
+++ b/app/components/Link.tsx
@@ -44,7 +44,7 @@ export function Link(props: LinkProps) {
   if (typeof className === 'function') {
     return (
       <RemixNavLink
-        unstable_viewTransition={enableViewTransition}
+        viewTransition={enableViewTransition}
         to={toWithLocale}
         className={className}
         {...resOfProps}
@@ -54,7 +54,7 @@ export function Link(props: LinkProps) {
 
   return (
     <RemixLink
-      unstable_viewTransition={enableViewTransition}
+      viewTransition={enableViewTransition}
       to={toWithLocale}
       className={className}
       {...resOfProps}
diff --git a/app/hooks/use-motion.tsx b/app/hooks/use-motion.tsx
index aa204e6..2f5f8a6 100644
--- a/app/hooks/use-motion.tsx
+++ b/app/hooks/use-motion.tsx
@@ -12,14 +12,14 @@ const animations: Record<MotionType, any> = {
 };
 
 export function useMotion(ref?: ForwardedRef<any>) {
-  let { enableViewTransition } = useThemeSettings();
+  let { enableScrollReveal } = useThemeSettings();
   const [scope] = useAnimate();
   useEffect(() => {
     if (!scope.current || !ref) return;
     Object.assign(ref, { current: scope.current });
   }, [scope, ref]);
   useEffect(() => {
-    if (!enableViewTransition) {
+    if (!enableScrollReveal) {
       return;
     }
     scope.current?.classList.add("animated-scope");
diff --git a/app/styles/tailwind.css b/app/styles/tailwind.css
index 1c9eed9..9b1eaf8 100644
--- a/app/styles/tailwind.css
+++ b/app/styles/tailwind.css
@@ -1,9 +1,9 @@
-@import 'swiper/swiper-bundle.css';
+@import "swiper/swiper-bundle.css";
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 @layer base {
-    /* :root {
+  /* :root {
     --background: 0 0% 100%;
     --foreground: 222.2 84% 4.9%;
 
@@ -33,7 +33,7 @@
     --ring: 222.2 84% 4.9%;
  
   } */
-    /* .dark {
+  /* .dark {
     --background: 222.2 84% 4.9%;
     --foreground: 210 40% 98%;
  
@@ -65,151 +65,156 @@
 }
 
 @layer base {
-    * {
-        @apply border-border;
-    }
-    body {
-        @apply font-body bg-background text-text-primary antialiased;
-    }
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-        @apply font-heading;
-    }
-    mark {
-        @apply bg-transparent font-normal;
-    }
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply font-body bg-background text-text-primary antialiased;
+  }
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @apply font-heading;
+  }
+  mark {
+    @apply bg-transparent font-normal;
+  }
 }
 
 @layer components {
-    .swimlane {
-        @apply grid w-full snap-x snap-mandatory scroll-px-6 grid-flow-col justify-start gap-4 overflow-x-scroll px-6 pb-4;
-    }
+  .swimlane {
+    @apply grid w-full snap-x snap-mandatory scroll-px-6 grid-flow-col justify-start gap-4 overflow-x-scroll px-6 pb-4;
+  }
 }
 
 @layer utilities {
-    .hiddenScroll {
-        scrollbar-width: none;
-        &::-webkit-scrollbar {
-            display: none;
-        }
+  .hiddenScroll {
+    scrollbar-width: none;
+    &::-webkit-scrollbar {
+      display: none;
     }
+  }
 }
 
 .diagonal {
-    position: relative;
-    overflow: hidden;
-  }
-  
-  .diagonal::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 1;
-    background: linear-gradient(
-        to top left,
-        transparent calc(50% - 2px),
-        #C2C3C2,
-        transparent calc(50% + 2px)
-      ) no-repeat;
-  }
+  position: relative;
+  overflow: hidden;
+}
+
+.diagonal::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+  background: linear-gradient(
+      to top left,
+      transparent calc(50% - 2px),
+      #c2c3c2,
+      transparent calc(50% + 2px)
+    )
+    no-repeat;
+}
 
 .container {
-    max-width: var(--page-width, 1440px);
+  max-width: var(--page-width, 1440px);
+}
+
+input[type="search"]::-webkit-search-cancel-button {
+  display: none;
 }
 
 .custom-scroll::-webkit-scrollbar {
-    width: 6px;
+  width: 6px;
 }
 
 .custom-scroll::-webkit-scrollbar-track {
-    background: #f1f1f1;
-    border-radius: 10px;
+  background: #f1f1f1;
+  border-radius: 10px;
 }
 
 .custom-scroll::-webkit-scrollbar-thumb {
-    background: #888;
-    border-radius: 10px;
+  background: #888;
+  border-radius: 10px;
 }
 
 .custom-scroll::-webkit-scrollbar-thumb:hover {
-    background: #555;
+  background: #555;
 }
 
 .has-background {
-    background-color: var(--section-background-color);
-    border-radius: var(--section-border-radius);
+  background-color: var(--section-background-color);
+  border-radius: var(--section-border-radius);
 }
 
 .dropdown-transition {
-    @apply transform-gpu;
-    z-index: 0;
-    visibility: hidden;
-    opacity: 0;
-    transition: all 200ms cubic-bezier(0.104, 0.204, 0.492, 1);
+  @apply transform-gpu;
+  z-index: 0;
+  visibility: hidden;
+  opacity: 0;
+  transition: all 200ms cubic-bezier(0.104, 0.204, 0.492, 1);
 }
 
 .group:hover .dropdown-transition {
-    opacity: 1;
-    z-index: 30;
-    visibility: visible;
+  opacity: 1;
+  z-index: 30;
+  visibility: visible;
 }
 
 .fly-in {
-    opacity: 0;
-    transform: translateX(80px);
+  opacity: 0;
+  transform: translateX(80px);
 }
 
 .group:hover .fly-in {
-    transform: translateX(0);
-    opacity: 1;
-    transition: transform 0.5s cubic-bezier(0.14, 0.8, 0.6, 1), opacity 0.5s ease;
-    transition-delay: calc(var(--item-index) * 0.1s + 0.2s);
+  transform: translateX(0);
+  opacity: 1;
+  transition: transform 0.5s cubic-bezier(0.14, 0.8, 0.6, 1), opacity 0.5s ease;
+  transition-delay: calc(var(--item-index) * 0.1s + 0.2s);
 }
 
 .text-animation {
-    background-image: linear-gradient(to right, rgb(15, 15, 15), rgb(15, 15, 15));
-    background-size: 0% 1px;
-    background-repeat: no-repeat;
-    display: inline;
-    padding-bottom: 3px;
-    transition: all .2s ease;
-    background-position: left calc(1em + 4px);
+  background-image: linear-gradient(to right, rgb(15, 15, 15), rgb(15, 15, 15));
+  background-size: 0% 1px;
+  background-repeat: no-repeat;
+  display: inline;
+  padding-bottom: 3px;
+  transition: all 0.2s ease;
+  background-position: left calc(1em + 4px);
 }
 
 .text-animation:hover {
-    background-size: 100% 1px;
+  background-size: 100% 1px;
 }
 
 .group\/header.text-animation {
-    background-position: left calc(1em + 8px);
+  background-position: left calc(1em + 8px);
 }
 
 .group:hover .group\/header.text-animation {
-    background-size: 100% 1px;
+  background-size: 100% 1px;
 }
 
 .animate-hover {
-    @apply relative;
-    overflow: hidden;
+  @apply relative;
+  overflow: hidden;
 }
 
 .animate-hover::before {
-    content: "";
-    /* transform-origin: right; */
-    @apply absolute bottom-0 left-0 w-full border-b-2 border-border origin-right duration-300 transition-transform scale-x-0;
+  content: "";
+  /* transform-origin: right; */
+  @apply absolute bottom-0 left-0 w-full border-b-2 border-border origin-right duration-300 transition-transform scale-x-0;
 }
 
 .animate-hover:hover::before {
-    @apply origin-left scale-x-100;
+  @apply origin-left scale-x-100;
 }
 
-#announcement-bar~header {
-    top: var(--announcement-bar-height, 0px);
-}
\ No newline at end of file
+#announcement-bar ~ header {
+  top: var(--announcement-bar-height, 0px);
+}

From 33d68a2d3c1403e604743ffe5ded15033f8a923a Mon Sep 17 00:00:00 2001
From: dangthang <dangthangkk2000@gmail.com>
Date: Fri, 6 Dec 2024 10:36:01 +0700
Subject: [PATCH 19/19] v2.1.0

---
 package-lock.json | 976 +++++++++++++++++++++++-----------------------
 package.json      |   2 +-
 2 files changed, 498 insertions(+), 480 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e1dd745..4067a32 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "naturelle",
-    "version": "2.0.9",
+    "version": "2.1.0",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "naturelle",
-            "version": "2.0.9",
+            "version": "2.1.0",
             "dependencies": {
                 "@fontsource-variable/cormorant": "^5.1.0",
                 "@fontsource-variable/nunito-sans": "^5.1.0",
@@ -447,9 +447,9 @@
             }
         },
         "node_modules/@babel/compat-data": {
-            "version": "7.26.2",
-            "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.26.2.tgz",
-            "integrity": "sha512-Z0WgzSEa+aUcdiJuCIqgujCshpMWgUpgOxXotrYPSA53hA3qopNaqcJpyr0hVb1FeWdnqFA35/fUtXgBK8srQg==",
+            "version": "7.26.3",
+            "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.26.3.tgz",
+            "integrity": "sha512-nHIxvKPniQXpmQLb0vhY3VaFb3S0YrTAwpOWJZh1wn3oJPjJk9Asva204PsBdmAE8vpzfHudT8DB0scYvy9q0g==",
             "dev": true,
             "license": "MIT",
             "engines": {
@@ -488,14 +488,14 @@
             }
         },
         "node_modules/@babel/generator": {
-            "version": "7.26.2",
-            "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.26.2.tgz",
-            "integrity": "sha512-zevQbhbau95nkoxSq3f/DC/SC+EEOUZd3DYqfSkMhY2/wfSeaHV1Ew4vk8e+x8lja31IbyuUa2uQ3JONqKbysw==",
+            "version": "7.26.3",
+            "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.26.3.tgz",
+            "integrity": "sha512-6FF/urZvD0sTeO7k6/B15pMLC4CHUv1426lzr3N01aHJTl046uCAh9LXW/fzeXXjPNCJ6iABW5XaWOsIZB93aQ==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@babel/parser": "^7.26.2",
-                "@babel/types": "^7.26.0",
+                "@babel/parser": "^7.26.3",
+                "@babel/types": "^7.26.3",
                 "@jridgewell/gen-mapping": "^0.3.5",
                 "@jridgewell/trace-mapping": "^0.3.25",
                 "jsesc": "^3.0.2"
@@ -643,20 +643,6 @@
                 "@babel/core": "^7.0.0"
             }
         },
-        "node_modules/@babel/helper-simple-access": {
-            "version": "7.25.9",
-            "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.25.9.tgz",
-            "integrity": "sha512-c6WHXuiaRsJTyHYLJV75t9IqsmTbItYfdj99PnzYGQZkYKvan5/2jKJ7gu31J3/BJ/A18grImSPModuyG/Eo0Q==",
-            "dev": true,
-            "license": "MIT",
-            "dependencies": {
-                "@babel/traverse": "^7.25.9",
-                "@babel/types": "^7.25.9"
-            },
-            "engines": {
-                "node": ">=6.9.0"
-            }
-        },
         "node_modules/@babel/helper-skip-transparent-expression-wrappers": {
             "version": "7.25.9",
             "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.25.9.tgz",
@@ -716,13 +702,13 @@
             }
         },
         "node_modules/@babel/parser": {
-            "version": "7.26.2",
-            "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.2.tgz",
-            "integrity": "sha512-DWMCZH9WA4Maitz2q21SRKHo9QXZxkDsbNZoVD62gusNtNBBqDg9i7uOhASfTfIGNzW+O+r7+jAlM8dwphcJKQ==",
+            "version": "7.26.3",
+            "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.3.tgz",
+            "integrity": "sha512-WJ/CvmY8Mea8iDXo6a7RK2wbmJITT5fN3BEkRuFlxVyNx8jOKIIhmC4fSkTcPcf8JyavbBwIe6OpiCOBXt/IcA==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@babel/types": "^7.26.0"
+                "@babel/types": "^7.26.3"
             },
             "bin": {
                 "parser": "bin/babel-parser.js"
@@ -1063,15 +1049,14 @@
             }
         },
         "node_modules/@babel/plugin-transform-modules-commonjs": {
-            "version": "7.25.9",
-            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.25.9.tgz",
-            "integrity": "sha512-dwh2Ol1jWwL2MgkCzUSOvfmKElqQcuswAZypBSUsScMXvgdT8Ekq5YA6TtqpTVWH+4903NmboMuH1o9i8Rxlyg==",
+            "version": "7.26.3",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.26.3.tgz",
+            "integrity": "sha512-MgR55l4q9KddUDITEzEFYn5ZsGDXMSsU9E+kh7fjRXTIC3RHqfCo8RPRbyReYJh44HQ/yomFkqbOFohXvDCiIQ==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@babel/helper-module-transforms": "^7.25.9",
-                "@babel/helper-plugin-utils": "^7.25.9",
-                "@babel/helper-simple-access": "^7.25.9"
+                "@babel/helper-module-transforms": "^7.26.0",
+                "@babel/helper-plugin-utils": "^7.25.9"
             },
             "engines": {
                 "node": ">=6.9.0"
@@ -1215,9 +1200,9 @@
             }
         },
         "node_modules/@babel/plugin-transform-typescript": {
-            "version": "7.25.9",
-            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.25.9.tgz",
-            "integrity": "sha512-7PbZQZP50tzv2KGGnhh82GSyMB01yKY9scIjf1a+GfZCtInOWqUH5+1EBU4t9fyR5Oykkkc9vFTs4OHrhHXljQ==",
+            "version": "7.26.3",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.26.3.tgz",
+            "integrity": "sha512-6+5hpdr6mETwSKjmJUdYw0EIkATiQhnELWlE3kJFBwSg/BGIVwVaVbX+gOXBCdc7Ln1RXZxyWGecIXhUfnl7oA==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
@@ -1282,17 +1267,17 @@
             }
         },
         "node_modules/@babel/traverse": {
-            "version": "7.25.9",
-            "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.9.tgz",
-            "integrity": "sha512-ZCuvfwOwlz/bawvAuvcj8rrithP2/N55Tzz342AkTvq4qaWbGfmCk/tKhNaV2cthijKrPAA8SRJV5WWe7IBMJw==",
+            "version": "7.26.4",
+            "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.26.4.tgz",
+            "integrity": "sha512-fH+b7Y4p3yqvApJALCPJcwb0/XaOSgtK4pzV6WVjPR5GLFQBRI7pfoX2V2iM48NXvX07NUxxm1Vw98YjqTcU5w==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@babel/code-frame": "^7.25.9",
-                "@babel/generator": "^7.25.9",
-                "@babel/parser": "^7.25.9",
+                "@babel/code-frame": "^7.26.2",
+                "@babel/generator": "^7.26.3",
+                "@babel/parser": "^7.26.3",
                 "@babel/template": "^7.25.9",
-                "@babel/types": "^7.25.9",
+                "@babel/types": "^7.26.3",
                 "debug": "^4.3.1",
                 "globals": "^11.1.0"
             },
@@ -1301,9 +1286,9 @@
             }
         },
         "node_modules/@babel/types": {
-            "version": "7.26.0",
-            "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.0.tgz",
-            "integrity": "sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==",
+            "version": "7.26.3",
+            "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.3.tgz",
+            "integrity": "sha512-vN5p+1kl59GVKMvTHt55NzzmYVxprfJD+ql7U9NFIfKCBkYE55LYtS+WtPlaYOyzydrKI8Nezd+aZextrd+FMA==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
@@ -1537,9 +1522,9 @@
             "license": "MIT"
         },
         "node_modules/@cloudflare/workerd-darwin-64": {
-            "version": "1.20241106.1",
-            "resolved": "https://registry.npmjs.org/@cloudflare/workerd-darwin-64/-/workerd-darwin-64-1.20241106.1.tgz",
-            "integrity": "sha512-zxvaToi1m0qzAScrxFt7UvFVqU8DxrCO2CinM1yQkv5no7pA1HolpIrwZ0xOhR3ny64Is2s/J6BrRjpO5dM9Zw==",
+            "version": "1.20241106.2",
+            "resolved": "https://registry.npmjs.org/@cloudflare/workerd-darwin-64/-/workerd-darwin-64-1.20241106.2.tgz",
+            "integrity": "sha512-p3PzgiMBp9xKo4dMINM1RkrC+miUtz65IuuMCEdCa5QZTM0eyEGcBj1A9/lmS3wW72oMfRTo6CxCkqPteFJeBA==",
             "cpu": [
                 "x64"
             ],
@@ -1554,9 +1539,9 @@
             }
         },
         "node_modules/@cloudflare/workerd-darwin-arm64": {
-            "version": "1.20241106.1",
-            "resolved": "https://registry.npmjs.org/@cloudflare/workerd-darwin-arm64/-/workerd-darwin-arm64-1.20241106.1.tgz",
-            "integrity": "sha512-j3dg/42D/bPgfNP3cRUBxF+4waCKO/5YKwXNj+lnVOwHxDu+ne5pFw9TIkKYcWTcwn0ZUkbNZNM5rhJqRn4xbg==",
+            "version": "1.20241106.2",
+            "resolved": "https://registry.npmjs.org/@cloudflare/workerd-darwin-arm64/-/workerd-darwin-arm64-1.20241106.2.tgz",
+            "integrity": "sha512-AZQTAKG6bP9z0SKSXQGlXR2K2MQnDMtKC78NGjN0NOcjALTsFlLFhczaLvmuJjsT16k9yJUq2Gl+NG4ao/qgvg==",
             "cpu": [
                 "arm64"
             ],
@@ -1571,9 +1556,9 @@
             }
         },
         "node_modules/@cloudflare/workerd-linux-64": {
-            "version": "1.20241106.1",
-            "resolved": "https://registry.npmjs.org/@cloudflare/workerd-linux-64/-/workerd-linux-64-1.20241106.1.tgz",
-            "integrity": "sha512-Ih+Ye8E1DMBXcKrJktGfGztFqHKaX1CeByqshmTbODnWKHt6O65ax3oTecUwyC0+abuyraOpAtdhHNpFMhUkmw==",
+            "version": "1.20241106.2",
+            "resolved": "https://registry.npmjs.org/@cloudflare/workerd-linux-64/-/workerd-linux-64-1.20241106.2.tgz",
+            "integrity": "sha512-TWIcVdUzU7w7YP2OEIgTDtNl9jyzjxOptjRDw7jhSUsQy/02IjBLP+ZnNpgB5CUJ1tCbcOp1L2IGhZmayd7OEQ==",
             "cpu": [
                 "x64"
             ],
@@ -1588,9 +1573,9 @@
             }
         },
         "node_modules/@cloudflare/workerd-linux-arm64": {
-            "version": "1.20241106.1",
-            "resolved": "https://registry.npmjs.org/@cloudflare/workerd-linux-arm64/-/workerd-linux-arm64-1.20241106.1.tgz",
-            "integrity": "sha512-mdQFPk4+14Yywn7n1xIzI+6olWM8Ybz10R7H3h+rk0XulMumCWUCy1CzIDauOx6GyIcSgKIibYMssVHZR30ObA==",
+            "version": "1.20241106.2",
+            "resolved": "https://registry.npmjs.org/@cloudflare/workerd-linux-arm64/-/workerd-linux-arm64-1.20241106.2.tgz",
+            "integrity": "sha512-f5Mn9IzfLs9yGjB2UCcKh+I7Ahiw6xqiQ9f/FGsHjsgLELjJ8JCKBwXmc9WdfNmVPae5jNCg2N5qVfDoWBKbCA==",
             "cpu": [
                 "arm64"
             ],
@@ -1605,9 +1590,9 @@
             }
         },
         "node_modules/@cloudflare/workerd-windows-64": {
-            "version": "1.20241106.1",
-            "resolved": "https://registry.npmjs.org/@cloudflare/workerd-windows-64/-/workerd-windows-64-1.20241106.1.tgz",
-            "integrity": "sha512-4rtcss31E/Rb/PeFocZfr+B9i1MdrkhsTBWizh8siNR4KMmkslU2xs2wPaH1z8+ErxkOsHrKRa5EPLh5rIiFeg==",
+            "version": "1.20241106.2",
+            "resolved": "https://registry.npmjs.org/@cloudflare/workerd-windows-64/-/workerd-windows-64-1.20241106.2.tgz",
+            "integrity": "sha512-kdLExN3rktax23iHUKP7AHQP0HT0yGHik58fMP4kExjsMnwxw92TLI3n4HlmEqsbtMtwr9rhTJVaMBRUXq0aXw==",
             "cpu": [
                 "x64"
             ],
@@ -3367,21 +3352,21 @@
             }
         },
         "node_modules/@graphql-codegen/client-preset": {
-            "version": "4.5.0",
-            "resolved": "https://registry.npmjs.org/@graphql-codegen/client-preset/-/client-preset-4.5.0.tgz",
-            "integrity": "sha512-0fFGSjpDhB7Jp6v+FQWDIeNJhL8VEiy3zeazyus3mGUELPaRQsoos2NczkDWnyMjSB1NHn4GrI53DB4TXkTAog==",
+            "version": "4.5.1",
+            "resolved": "https://registry.npmjs.org/@graphql-codegen/client-preset/-/client-preset-4.5.1.tgz",
+            "integrity": "sha512-UE2/Kz2eaxv35HIXFwlm2QwoUH77am6+qp54aeEWYq+T+WPwmIc6+YzqtGiT/VcaXgoOUSgidREGm9R6jKcf9g==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@babel/helper-plugin-utils": "^7.20.2",
                 "@babel/template": "^7.20.7",
                 "@graphql-codegen/add": "^5.0.3",
-                "@graphql-codegen/gql-tag-operations": "4.0.11",
+                "@graphql-codegen/gql-tag-operations": "4.0.12",
                 "@graphql-codegen/plugin-helpers": "^5.1.0",
-                "@graphql-codegen/typed-document-node": "^5.0.11",
-                "@graphql-codegen/typescript": "^4.1.1",
-                "@graphql-codegen/typescript-operations": "^4.3.1",
-                "@graphql-codegen/visitor-plugin-common": "^5.5.0",
+                "@graphql-codegen/typed-document-node": "^5.0.12",
+                "@graphql-codegen/typescript": "^4.1.2",
+                "@graphql-codegen/typescript-operations": "^4.4.0",
+                "@graphql-codegen/visitor-plugin-common": "^5.6.0",
                 "@graphql-tools/documents": "^1.0.0",
                 "@graphql-tools/utils": "^10.0.0",
                 "@graphql-typed-document-node/core": "3.2.0",
@@ -3425,14 +3410,14 @@
             "license": "0BSD"
         },
         "node_modules/@graphql-codegen/gql-tag-operations": {
-            "version": "4.0.11",
-            "resolved": "https://registry.npmjs.org/@graphql-codegen/gql-tag-operations/-/gql-tag-operations-4.0.11.tgz",
-            "integrity": "sha512-EUQuBsYB5RtNlzBb/O0nJvbWC8HvPRWwVTHRf0ElOoQlJfRgfDom2GWmEM5hXa2afzMqB7AWxOH24ibOqiYnMQ==",
+            "version": "4.0.12",
+            "resolved": "https://registry.npmjs.org/@graphql-codegen/gql-tag-operations/-/gql-tag-operations-4.0.12.tgz",
+            "integrity": "sha512-v279i49FJ5dMmQXIGUgm6FtnnkxtJjVJWDNYh9JK4ppvOixdHp+PmEzW227DkLN6avhVxNnYdp/1gdRBwdWypw==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@graphql-codegen/plugin-helpers": "^5.1.0",
-                "@graphql-codegen/visitor-plugin-common": "5.5.0",
+                "@graphql-codegen/visitor-plugin-common": "5.6.0",
                 "@graphql-tools/utils": "^10.0.0",
                 "auto-bind": "~4.0.0",
                 "tslib": "~2.6.0"
@@ -3502,14 +3487,14 @@
             "license": "0BSD"
         },
         "node_modules/@graphql-codegen/typed-document-node": {
-            "version": "5.0.11",
-            "resolved": "https://registry.npmjs.org/@graphql-codegen/typed-document-node/-/typed-document-node-5.0.11.tgz",
-            "integrity": "sha512-btENKrSIUZ5UllS8sFhVZ+Y91VL0knK9gHxW/6/WzaCTxBQ+wOk07vQNeoWlvMrkl0QeUsGt6YvSo0SoPtsKdA==",
+            "version": "5.0.12",
+            "resolved": "https://registry.npmjs.org/@graphql-codegen/typed-document-node/-/typed-document-node-5.0.12.tgz",
+            "integrity": "sha512-Wsbc1AqC+MFp3maWPzrmmyHLuWCPB63qBBFLTKtO6KSsnn0KnLocBp475wkfBZnFISFvzwpJ0e6LV71gKfTofQ==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@graphql-codegen/plugin-helpers": "^5.1.0",
-                "@graphql-codegen/visitor-plugin-common": "5.5.0",
+                "@graphql-codegen/visitor-plugin-common": "5.6.0",
                 "auto-bind": "~4.0.0",
                 "change-case-all": "1.0.15",
                 "tslib": "~2.6.0"
@@ -3529,15 +3514,15 @@
             "license": "0BSD"
         },
         "node_modules/@graphql-codegen/typescript": {
-            "version": "4.1.1",
-            "resolved": "https://registry.npmjs.org/@graphql-codegen/typescript/-/typescript-4.1.1.tgz",
-            "integrity": "sha512-+o5LOT71K9hdO4lDVnRGkkET5RdlKvxlQGug8dZgRGrhE2/xoPBsKfLhg9AoJGYMauNZxKj3blABQxHOKEku6Q==",
+            "version": "4.1.2",
+            "resolved": "https://registry.npmjs.org/@graphql-codegen/typescript/-/typescript-4.1.2.tgz",
+            "integrity": "sha512-GhPgfxgWEkBrvKR2y77OThus3K8B6U3ESo68l7+sHH1XiL2WapK5DdClViblJWKQerJRjfJu8tcaxQ8Wpk6Ogw==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@graphql-codegen/plugin-helpers": "^5.1.0",
                 "@graphql-codegen/schema-ast": "^4.0.2",
-                "@graphql-codegen/visitor-plugin-common": "5.5.0",
+                "@graphql-codegen/visitor-plugin-common": "5.6.0",
                 "auto-bind": "~4.0.0",
                 "tslib": "~2.6.0"
             },
@@ -3549,15 +3534,15 @@
             }
         },
         "node_modules/@graphql-codegen/typescript-operations": {
-            "version": "4.3.1",
-            "resolved": "https://registry.npmjs.org/@graphql-codegen/typescript-operations/-/typescript-operations-4.3.1.tgz",
-            "integrity": "sha512-yW5Iia6IK1VKiPm3oeukYMQN5pEBLwRlG8ZzQA9beeLQ8PskKyz6mjar6U7dJ2hc8pv/qT4R8kcJOQ2RloniAQ==",
+            "version": "4.4.0",
+            "resolved": "https://registry.npmjs.org/@graphql-codegen/typescript-operations/-/typescript-operations-4.4.0.tgz",
+            "integrity": "sha512-oVlos2ySx8xIbbe8r5ZI6mOpI+OTeP14RmS2MchBJ6DL+S9G16O6+9V3Y8V22fTnmBTZkTfAAaBv4HYhhDGWVA==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@graphql-codegen/plugin-helpers": "^5.1.0",
-                "@graphql-codegen/typescript": "^4.1.1",
-                "@graphql-codegen/visitor-plugin-common": "5.5.0",
+                "@graphql-codegen/typescript": "^4.1.2",
+                "@graphql-codegen/visitor-plugin-common": "5.6.0",
                 "auto-bind": "~4.0.0",
                 "tslib": "~2.6.0"
             },
@@ -3583,9 +3568,9 @@
             "license": "0BSD"
         },
         "node_modules/@graphql-codegen/visitor-plugin-common": {
-            "version": "5.5.0",
-            "resolved": "https://registry.npmjs.org/@graphql-codegen/visitor-plugin-common/-/visitor-plugin-common-5.5.0.tgz",
-            "integrity": "sha512-FSkxe/o4qKbpK+ipIT/jxZLYH0+3+XdIrJWsKlCW9wwJMF9mEJLJtzZNcxHSjz7+Eny6SUElAT2dqZ5XByxkog==",
+            "version": "5.6.0",
+            "resolved": "https://registry.npmjs.org/@graphql-codegen/visitor-plugin-common/-/visitor-plugin-common-5.6.0.tgz",
+            "integrity": "sha512-PowcVPJbUqMC9xTJ/ZRX1p/fsdMZREc+69CM1YY+AlFng2lL0zsdBskFJSRoviQk2Ch9IPhKGyHxlJCy9X22tg==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
@@ -3615,14 +3600,14 @@
             "license": "0BSD"
         },
         "node_modules/@graphql-tools/apollo-engine-loader": {
-            "version": "8.0.4",
-            "resolved": "https://registry.npmjs.org/@graphql-tools/apollo-engine-loader/-/apollo-engine-loader-8.0.4.tgz",
-            "integrity": "sha512-dwFhFDvqRr1+UkSPVYciz202a0TInKe1at+eS3YYoirg2FacaCuQDeGWG4w3rLJQXKnGhFAdFUfgBMt2ZqXxYA==",
+            "version": "8.0.7",
+            "resolved": "https://registry.npmjs.org/@graphql-tools/apollo-engine-loader/-/apollo-engine-loader-8.0.7.tgz",
+            "integrity": "sha512-jyQU4ZhbkUM7C3V+m15K3ch7BSCTdWw/bthjhYhMkiMoFGL/ClNL5+fCIFMcQi5xSxPPmwkBkxzQ8u8UoNPMAg==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@ardatan/sync-fetch": "^0.0.1",
-                "@graphql-tools/utils": "^10.5.6",
+                "@graphql-tools/utils": "^10.6.2",
                 "@whatwg-node/fetch": "^0.10.0",
                 "tslib": "^2.4.0"
             },
@@ -3648,13 +3633,14 @@
             }
         },
         "node_modules/@graphql-tools/apollo-engine-loader/node_modules/@whatwg-node/node-fetch": {
-            "version": "0.7.3",
-            "resolved": "https://registry.npmjs.org/@whatwg-node/node-fetch/-/node-fetch-0.7.3.tgz",
-            "integrity": "sha512-mqHYN1JZG0bSnOi6bxYq8zSBLfp02597yb9YNwZ0Zqn3TdC7/YjRWKnnGm49rzIWGaNaHiUjv8KThuhpK7NDLA==",
+            "version": "0.7.4",
+            "resolved": "https://registry.npmjs.org/@whatwg-node/node-fetch/-/node-fetch-0.7.4.tgz",
+            "integrity": "sha512-rvUtU/xKKl/av5EIwyqfw7w0R+hx+tQrlhpIyFr27MwJRlUb+xcYv97kOmp7FE/WmQ8s+Tb6bcD6W8o/s2pGWw==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@kamilkisiela/fast-url-parser": "^1.1.4",
+                "@whatwg-node/disposablestack": "^0.0.5",
                 "busboy": "^1.6.0",
                 "fast-querystring": "^1.1.1",
                 "tslib": "^2.6.3"
@@ -3671,33 +3657,32 @@
             "license": "MIT"
         },
         "node_modules/@graphql-tools/batch-execute": {
-            "version": "9.0.6",
-            "resolved": "https://registry.npmjs.org/@graphql-tools/batch-execute/-/batch-execute-9.0.6.tgz",
-            "integrity": "sha512-S0mLTUJQJuItGmwouYZyXeFaRWOVmVCAMLi33M5PuZbnsoTwKMB/YPPkAQ72ay3GfclnW66XcO4EClbVynw7eQ==",
+            "version": "9.0.9",
+            "resolved": "https://registry.npmjs.org/@graphql-tools/batch-execute/-/batch-execute-9.0.9.tgz",
+            "integrity": "sha512-w8q7x7Xb0uYrFU/QBnxz4s1KQ8TJ7PwAnBKgOiQo6V/hyn9I4C2NL2VvODma0VToj/lalTiVqlbZXyEz/LnXXw==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@graphql-tools/utils": "^10.5.6",
-                "dataloader": "^2.2.2",
-                "tslib": "^2.4.0",
-                "value-or-promise": "^1.0.12"
+                "@graphql-tools/utils": "^10.6.2",
+                "dataloader": "^2.2.3",
+                "tslib": "^2.4.0"
             },
             "engines": {
-                "node": ">=16.0.0"
+                "node": ">=18.0.0"
             },
             "peerDependencies": {
                 "graphql": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
             }
         },
         "node_modules/@graphql-tools/code-file-loader": {
-            "version": "8.1.5",
-            "resolved": "https://registry.npmjs.org/@graphql-tools/code-file-loader/-/code-file-loader-8.1.5.tgz",
-            "integrity": "sha512-2witIKEmcFbJH+PFIsO60Gy4RtaPFP1QageDdd4Ra77DN4kHKbPOjlbaPWynECySz7yIZfUEkVO2PLqrb/h5BQ==",
+            "version": "8.1.8",
+            "resolved": "https://registry.npmjs.org/@graphql-tools/code-file-loader/-/code-file-loader-8.1.8.tgz",
+            "integrity": "sha512-b8BTP0cVTgWgc60H7LNfY7dZcEJVsgyCm52BsWOggwWapKAdli1T7ZaLJvnTAbVd8EY8+k4OAO1Z/ti1iirVOA==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@graphql-tools/graphql-tag-pluck": "8.3.4",
-                "@graphql-tools/utils": "^10.5.6",
+                "@graphql-tools/graphql-tag-pluck": "8.3.7",
+                "@graphql-tools/utils": "^10.6.2",
                 "globby": "^11.0.3",
                 "tslib": "^2.4.0",
                 "unixify": "^1.0.0"
@@ -3710,18 +3695,18 @@
             }
         },
         "node_modules/@graphql-tools/delegate": {
-            "version": "10.1.3",
-            "resolved": "https://registry.npmjs.org/@graphql-tools/delegate/-/delegate-10.1.3.tgz",
-            "integrity": "sha512-ISfHtAeUeNxcFSE+BG+1VLwEkvgIHJTg3gkVUqPUUw5laAmUw8vDpx4Z+eZ+V7TjlyZaekN5LQoJAmplY4vAJQ==",
+            "version": "10.2.6",
+            "resolved": "https://registry.npmjs.org/@graphql-tools/delegate/-/delegate-10.2.6.tgz",
+            "integrity": "sha512-TiDYEgJ+WWg3VVIhYQtWZufHGJolHSiWjzyB+krOLvLYEIhrmWJtCIc7WZ4lEe4VWJK3CA+eyQzp3hBMoa2i5g==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@graphql-tools/batch-execute": "^9.0.6",
-                "@graphql-tools/executor": "^1.3.3",
-                "@graphql-tools/schema": "^10.0.8",
-                "@graphql-tools/utils": "^10.5.6",
+                "@graphql-tools/batch-execute": "^9.0.9",
+                "@graphql-tools/executor": "^1.3.6",
+                "@graphql-tools/schema": "^10.0.11",
+                "@graphql-tools/utils": "^10.6.2",
                 "@repeaterjs/repeater": "^3.0.6",
-                "dataloader": "^2.2.2",
+                "dataloader": "^2.2.3",
                 "dset": "^3.1.2",
                 "tslib": "^2.5.0"
             },
@@ -3750,13 +3735,13 @@
             }
         },
         "node_modules/@graphql-tools/executor": {
-            "version": "1.3.3",
-            "resolved": "https://registry.npmjs.org/@graphql-tools/executor/-/executor-1.3.3.tgz",
-            "integrity": "sha512-lpkgokF6vjGHNluANOTsWoSM0vuvUuVpjY1810tvM6Vlyoq2tJ+nmqweGbMsq/GLhmZQP1lY/nOkj2zPJXLWiw==",
+            "version": "1.3.6",
+            "resolved": "https://registry.npmjs.org/@graphql-tools/executor/-/executor-1.3.6.tgz",
+            "integrity": "sha512-ZmWsWdUhTez2b4w9NkmL4wpPb8n8WZmLOMIPTXH2A2yEe2nHrK/tk653JZXvZFtx2HrBIcoZD4Fe/STYWIR74Q==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@graphql-tools/utils": "^10.5.6",
+                "@graphql-tools/utils": "^10.6.2",
                 "@graphql-typed-document-node/core": "3.2.0",
                 "@repeaterjs/repeater": "^3.0.4",
                 "tslib": "^2.4.0",
@@ -3770,43 +3755,44 @@
             }
         },
         "node_modules/@graphql-tools/executor-graphql-ws": {
-            "version": "1.3.2",
-            "resolved": "https://registry.npmjs.org/@graphql-tools/executor-graphql-ws/-/executor-graphql-ws-1.3.2.tgz",
-            "integrity": "sha512-m+7+g3dSyaomuJAgDoG/9RcZC5/hGEpDQjmKmbLf/WvGdv5fLJNsuoJ7pIjlT5r7wQJNjEPGoHeh9pD/YykRww==",
+            "version": "1.3.4",
+            "resolved": "https://registry.npmjs.org/@graphql-tools/executor-graphql-ws/-/executor-graphql-ws-1.3.4.tgz",
+            "integrity": "sha512-Xbh2djfECNjf8NhOWWmmT5fJGU+PJjJG84vZic/CrnFI9eZPoCNu9BCCGsr8JrCthIFzFOdmXQ7oSHSTwjOSlQ==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@graphql-tools/utils": "^10.5.6",
-                "@types/ws": "^8.0.0",
+                "@graphql-tools/utils": "^10.6.2",
+                "@whatwg-node/disposablestack": "^0.0.5",
                 "graphql-ws": "^5.14.0",
                 "isomorphic-ws": "^5.0.0",
                 "tslib": "^2.4.0",
                 "ws": "^8.17.1"
             },
             "engines": {
-                "node": ">=16.0.0"
+                "node": ">=18.0.0"
             },
             "peerDependencies": {
                 "graphql": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
             }
         },
         "node_modules/@graphql-tools/executor-http": {
-            "version": "1.1.9",
-            "resolved": "https://registry.npmjs.org/@graphql-tools/executor-http/-/executor-http-1.1.9.tgz",
-            "integrity": "sha512-dJRj78QEGNNnlhkhqPUG9z+1uAr7znZ4dzabEVgY5uSXTmUIFcTKpOGYv2/QAuvyqGN40XxbcdVRJta6XHX2BQ==",
+            "version": "1.1.13",
+            "resolved": "https://registry.npmjs.org/@graphql-tools/executor-http/-/executor-http-1.1.13.tgz",
+            "integrity": "sha512-At9AQCgEmf55myf71am8XoIBpvVcYFl6ndM72fSaxp77pPgqfZhElPbszAARSdeb4ftSa8h2aAI02q1+oRCcmA==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@graphql-tools/utils": "^10.5.6",
+                "@graphql-tools/utils": "^10.6.2",
                 "@repeaterjs/repeater": "^3.0.4",
-                "@whatwg-node/fetch": "^0.10.0",
+                "@whatwg-node/disposablestack": "^0.0.5",
+                "@whatwg-node/fetch": "^0.10.1",
                 "extract-files": "^11.0.0",
                 "meros": "^1.2.1",
                 "tslib": "^2.4.0",
                 "value-or-promise": "^1.0.12"
             },
             "engines": {
-                "node": ">=16.0.0"
+                "node": ">=18.0.0"
             },
             "peerDependencies": {
                 "graphql": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
@@ -3827,13 +3813,14 @@
             }
         },
         "node_modules/@graphql-tools/executor-http/node_modules/@whatwg-node/node-fetch": {
-            "version": "0.7.3",
-            "resolved": "https://registry.npmjs.org/@whatwg-node/node-fetch/-/node-fetch-0.7.3.tgz",
-            "integrity": "sha512-mqHYN1JZG0bSnOi6bxYq8zSBLfp02597yb9YNwZ0Zqn3TdC7/YjRWKnnGm49rzIWGaNaHiUjv8KThuhpK7NDLA==",
+            "version": "0.7.4",
+            "resolved": "https://registry.npmjs.org/@whatwg-node/node-fetch/-/node-fetch-0.7.4.tgz",
+            "integrity": "sha512-rvUtU/xKKl/av5EIwyqfw7w0R+hx+tQrlhpIyFr27MwJRlUb+xcYv97kOmp7FE/WmQ8s+Tb6bcD6W8o/s2pGWw==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@kamilkisiela/fast-url-parser": "^1.1.4",
+                "@whatwg-node/disposablestack": "^0.0.5",
                 "busboy": "^1.6.0",
                 "fast-querystring": "^1.1.1",
                 "tslib": "^2.6.3"
@@ -3850,13 +3837,13 @@
             "license": "MIT"
         },
         "node_modules/@graphql-tools/executor-legacy-ws": {
-            "version": "1.1.2",
-            "resolved": "https://registry.npmjs.org/@graphql-tools/executor-legacy-ws/-/executor-legacy-ws-1.1.2.tgz",
-            "integrity": "sha512-Bjgny4svnOVOCKXuiS6oSiZB3oy/GVMHh+6CbztlA+YcDu6jUiB7fTQiJuZA/c+e3xTxl9xMe3zOsEKwuHy07A==",
+            "version": "1.1.5",
+            "resolved": "https://registry.npmjs.org/@graphql-tools/executor-legacy-ws/-/executor-legacy-ws-1.1.5.tgz",
+            "integrity": "sha512-iqN3NYpv4mGTOUUkhNOL0v9kskVHXl1BrzueRtDFaWznjO7qpwAUwCAih3AMHDNadLQdppkjIhOJB+YU8KCfsQ==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@graphql-tools/utils": "^10.5.6",
+                "@graphql-tools/utils": "^10.6.2",
                 "@types/ws": "^8.0.0",
                 "isomorphic-ws": "^5.0.0",
                 "tslib": "^2.4.0",
@@ -3870,14 +3857,14 @@
             }
         },
         "node_modules/@graphql-tools/git-loader": {
-            "version": "8.0.9",
-            "resolved": "https://registry.npmjs.org/@graphql-tools/git-loader/-/git-loader-8.0.9.tgz",
-            "integrity": "sha512-buiGwz6C5kPAn5ROIfa+IlYO05n/veuQ2H6rv+dvxB8XUGTQ0beO1jSUeDaLuxWBfWUxEaaKdqB6WIGA2y75fA==",
+            "version": "8.0.12",
+            "resolved": "https://registry.npmjs.org/@graphql-tools/git-loader/-/git-loader-8.0.12.tgz",
+            "integrity": "sha512-B65UbwMeR6TWwTzz5OS6iGuqSa1za/lbLO3buSwDs8+zxTpqrJljeKllG2EFk7g7D2OtTt3Tu9+itWkuIbqOUw==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@graphql-tools/graphql-tag-pluck": "8.3.4",
-                "@graphql-tools/utils": "^10.5.6",
+                "@graphql-tools/graphql-tag-pluck": "8.3.7",
+                "@graphql-tools/utils": "^10.6.2",
                 "is-glob": "4.0.3",
                 "micromatch": "^4.0.8",
                 "tslib": "^2.4.0",
@@ -3891,16 +3878,16 @@
             }
         },
         "node_modules/@graphql-tools/github-loader": {
-            "version": "8.0.4",
-            "resolved": "https://registry.npmjs.org/@graphql-tools/github-loader/-/github-loader-8.0.4.tgz",
-            "integrity": "sha512-9CQ6moBPZS2ZEcodqG03r2+xX4zZSu1H4VfK1y4GwSPwow6T2crgW//8/j3HWfUI8FxPCiLjCFeGjlaskhdjJQ==",
+            "version": "8.0.7",
+            "resolved": "https://registry.npmjs.org/@graphql-tools/github-loader/-/github-loader-8.0.7.tgz",
+            "integrity": "sha512-p7aGLbOkwLTCKk/hSEJJgrSIhbwNS7SBhtYFPMa1uoga4I10xDJuGrUl8l9Jq2y953rtJA6/aGyVJs87Yn2hwA==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@ardatan/sync-fetch": "^0.0.1",
                 "@graphql-tools/executor-http": "^1.1.9",
-                "@graphql-tools/graphql-tag-pluck": "^8.3.4",
-                "@graphql-tools/utils": "^10.5.6",
+                "@graphql-tools/graphql-tag-pluck": "^8.3.7",
+                "@graphql-tools/utils": "^10.6.2",
                 "@whatwg-node/fetch": "^0.10.0",
                 "tslib": "^2.4.0",
                 "value-or-promise": "^1.0.12"
@@ -3927,13 +3914,14 @@
             }
         },
         "node_modules/@graphql-tools/github-loader/node_modules/@whatwg-node/node-fetch": {
-            "version": "0.7.3",
-            "resolved": "https://registry.npmjs.org/@whatwg-node/node-fetch/-/node-fetch-0.7.3.tgz",
-            "integrity": "sha512-mqHYN1JZG0bSnOi6bxYq8zSBLfp02597yb9YNwZ0Zqn3TdC7/YjRWKnnGm49rzIWGaNaHiUjv8KThuhpK7NDLA==",
+            "version": "0.7.4",
+            "resolved": "https://registry.npmjs.org/@whatwg-node/node-fetch/-/node-fetch-0.7.4.tgz",
+            "integrity": "sha512-rvUtU/xKKl/av5EIwyqfw7w0R+hx+tQrlhpIyFr27MwJRlUb+xcYv97kOmp7FE/WmQ8s+Tb6bcD6W8o/s2pGWw==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@kamilkisiela/fast-url-parser": "^1.1.4",
+                "@whatwg-node/disposablestack": "^0.0.5",
                 "busboy": "^1.6.0",
                 "fast-querystring": "^1.1.1",
                 "tslib": "^2.6.3"
@@ -3950,14 +3938,14 @@
             "license": "MIT"
         },
         "node_modules/@graphql-tools/graphql-file-loader": {
-            "version": "8.0.3",
-            "resolved": "https://registry.npmjs.org/@graphql-tools/graphql-file-loader/-/graphql-file-loader-8.0.3.tgz",
-            "integrity": "sha512-r47xfTaulXuqjvg/tzUxjhH9Q0FTe9/ApFZsDUyV6Kw4u8n4Ku0ofg7etf1kYDpMVNclici0qB32fnvMi4p3BA==",
+            "version": "8.0.6",
+            "resolved": "https://registry.npmjs.org/@graphql-tools/graphql-file-loader/-/graphql-file-loader-8.0.6.tgz",
+            "integrity": "sha512-nLOvotKcvZLXQWryYl34vHI4Fr+VTA/y6WHcZ73gXBQ//8oGKgnuDNoAdi4rXgk4iGyIMvRxZpYU27k6Z4acBw==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@graphql-tools/import": "7.0.3",
-                "@graphql-tools/utils": "^10.5.6",
+                "@graphql-tools/import": "7.0.6",
+                "@graphql-tools/utils": "^10.6.2",
                 "globby": "^11.0.3",
                 "tslib": "^2.4.0",
                 "unixify": "^1.0.0"
@@ -3970,9 +3958,9 @@
             }
         },
         "node_modules/@graphql-tools/graphql-tag-pluck": {
-            "version": "8.3.4",
-            "resolved": "https://registry.npmjs.org/@graphql-tools/graphql-tag-pluck/-/graphql-tag-pluck-8.3.4.tgz",
-            "integrity": "sha512-prb+3Pec8qxgouZVBA4jOXGTxKFEw7w2IPPLnz1P06EgxBvRQXTcHtRo9HNWSGMYO4jUrpYiIqlq/Jzjlgb3rA==",
+            "version": "8.3.7",
+            "resolved": "https://registry.npmjs.org/@graphql-tools/graphql-tag-pluck/-/graphql-tag-pluck-8.3.7.tgz",
+            "integrity": "sha512-QoGf/8oVzhMZW+EbgpkM7zUxlNyv60Twb254R0D8TxS19OznoMMZMiDJdoID/k42QRoJ7o1V/yEOHgJFcqYHVw==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
@@ -3981,7 +3969,7 @@
                 "@babel/plugin-syntax-import-assertions": "^7.20.0",
                 "@babel/traverse": "^7.16.8",
                 "@babel/types": "^7.16.8",
-                "@graphql-tools/utils": "^10.5.6",
+                "@graphql-tools/utils": "^10.6.2",
                 "tslib": "^2.4.0"
             },
             "engines": {
@@ -3992,13 +3980,13 @@
             }
         },
         "node_modules/@graphql-tools/import": {
-            "version": "7.0.3",
-            "resolved": "https://registry.npmjs.org/@graphql-tools/import/-/import-7.0.3.tgz",
-            "integrity": "sha512-uCL95SW7kI5D3bGbDEgs7JTRGedJ2OQM/jmT9GVc5KAkZr9JJN6rxqwiypFzV475Dox5q9CKSz80JPui4vc6zg==",
+            "version": "7.0.6",
+            "resolved": "https://registry.npmjs.org/@graphql-tools/import/-/import-7.0.6.tgz",
+            "integrity": "sha512-F28lG9w3gckZ+ubnq3jM2s2OiyH+cVZZXvOZ8RO/EJQ0dS+BE/S9zzvpCTuOWyuZvcLvbYBDjliZTOmeSQUhMg==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@graphql-tools/utils": "^10.5.6",
+                "@graphql-tools/utils": "^10.6.2",
                 "resolve-from": "5.0.0",
                 "tslib": "^2.4.0"
             },
@@ -4010,13 +3998,13 @@
             }
         },
         "node_modules/@graphql-tools/json-file-loader": {
-            "version": "8.0.3",
-            "resolved": "https://registry.npmjs.org/@graphql-tools/json-file-loader/-/json-file-loader-8.0.3.tgz",
-            "integrity": "sha512-hKXLhO7Ba6W2+yEGGPZs2/xHDGt56D0eW1ZgleV1PyDIALuLl9gNsg3IU70N4m8j07sHHTwbKaoUnsACkDkpbA==",
+            "version": "8.0.6",
+            "resolved": "https://registry.npmjs.org/@graphql-tools/json-file-loader/-/json-file-loader-8.0.6.tgz",
+            "integrity": "sha512-mjZFVMtBL9fcvovwCoXKjZxXqr92/dcPZmHlQsW9jUC9WW6KfmolwtyvRxy9CcOjjh1HDTPcNoDgW05iI1CFYQ==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@graphql-tools/utils": "^10.5.6",
+                "@graphql-tools/utils": "^10.6.2",
                 "globby": "^11.0.3",
                 "tslib": "^2.4.0",
                 "unixify": "^1.0.0"
@@ -4029,14 +4017,14 @@
             }
         },
         "node_modules/@graphql-tools/load": {
-            "version": "8.0.4",
-            "resolved": "https://registry.npmjs.org/@graphql-tools/load/-/load-8.0.4.tgz",
-            "integrity": "sha512-5S7DCsvGz/SU/YP9nbo1sUHVzO2sGi/DCeiNUilI3m2bIEpWkGe7GVvUUKUSusgbNRbd5u6+trLJD8f7N7uXjw==",
+            "version": "8.0.7",
+            "resolved": "https://registry.npmjs.org/@graphql-tools/load/-/load-8.0.7.tgz",
+            "integrity": "sha512-1JmZaMxs9LOyyq7XF/knBxY+Uejnc68+nILCFYwsts9KTUOZHpJqjleIIDf7Il1yHDaujjThX4Xqg2Dwhdb/bw==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@graphql-tools/schema": "^10.0.8",
-                "@graphql-tools/utils": "^10.5.6",
+                "@graphql-tools/schema": "^10.0.11",
+                "@graphql-tools/utils": "^10.6.2",
                 "p-limit": "3.1.0",
                 "tslib": "^2.4.0"
             },
@@ -4048,13 +4036,13 @@
             }
         },
         "node_modules/@graphql-tools/merge": {
-            "version": "9.0.9",
-            "resolved": "https://registry.npmjs.org/@graphql-tools/merge/-/merge-9.0.9.tgz",
-            "integrity": "sha512-w9yaU7UMRQvtkTYZHo+c7cS7LO7rqc2H6g3k0aUs8VE9YlFYG1bYdxvEPM5bloaoVqr5TmbqIZqzl1CHeJKilQ==",
+            "version": "9.0.12",
+            "resolved": "https://registry.npmjs.org/@graphql-tools/merge/-/merge-9.0.12.tgz",
+            "integrity": "sha512-ECkUdgWkizhzQ6JJg16MCYnIN2r2+q/vP5smzi3YeeJkZ/3f9ynFDkaqoMg0Ddg9MugR03hMiQQrssk5f0389Q==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@graphql-tools/utils": "^10.5.6",
+                "@graphql-tools/utils": "^10.6.2",
                 "tslib": "^2.4.0"
             },
             "engines": {
@@ -4126,13 +4114,14 @@
             }
         },
         "node_modules/@graphql-tools/prisma-loader/node_modules/@whatwg-node/node-fetch": {
-            "version": "0.7.3",
-            "resolved": "https://registry.npmjs.org/@whatwg-node/node-fetch/-/node-fetch-0.7.3.tgz",
-            "integrity": "sha512-mqHYN1JZG0bSnOi6bxYq8zSBLfp02597yb9YNwZ0Zqn3TdC7/YjRWKnnGm49rzIWGaNaHiUjv8KThuhpK7NDLA==",
+            "version": "0.7.4",
+            "resolved": "https://registry.npmjs.org/@whatwg-node/node-fetch/-/node-fetch-0.7.4.tgz",
+            "integrity": "sha512-rvUtU/xKKl/av5EIwyqfw7w0R+hx+tQrlhpIyFr27MwJRlUb+xcYv97kOmp7FE/WmQ8s+Tb6bcD6W8o/s2pGWw==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@kamilkisiela/fast-url-parser": "^1.1.4",
+                "@whatwg-node/disposablestack": "^0.0.5",
                 "busboy": "^1.6.0",
                 "fast-querystring": "^1.1.1",
                 "tslib": "^2.6.3"
@@ -4149,14 +4138,14 @@
             "license": "MIT"
         },
         "node_modules/@graphql-tools/relay-operation-optimizer": {
-            "version": "7.0.3",
-            "resolved": "https://registry.npmjs.org/@graphql-tools/relay-operation-optimizer/-/relay-operation-optimizer-7.0.3.tgz",
-            "integrity": "sha512-CqtzgLkFQaDCDePVoC9myPLcp2kCDQQCdyliR1Q0YOa6tbBUNl7q82n7qznrzrJVH3Y+Is59ASz3FhjOolUy4g==",
+            "version": "7.0.6",
+            "resolved": "https://registry.npmjs.org/@graphql-tools/relay-operation-optimizer/-/relay-operation-optimizer-7.0.6.tgz",
+            "integrity": "sha512-hzzH1flmvL0o7tczQbnGVmsaLruhl8rxoqszo6uBjjjPxppoT0vwqIvU5X+lGJi2U+/fv3Q2FV3XALQB5Pmeaw==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@ardatan/relay-compiler": "12.0.0",
-                "@graphql-tools/utils": "^10.5.6",
+                "@graphql-tools/utils": "^10.6.2",
                 "tslib": "^2.4.0"
             },
             "engines": {
@@ -4167,14 +4156,14 @@
             }
         },
         "node_modules/@graphql-tools/schema": {
-            "version": "10.0.8",
-            "resolved": "https://registry.npmjs.org/@graphql-tools/schema/-/schema-10.0.8.tgz",
-            "integrity": "sha512-jkCSq+DdT6Rf/MN3oVz250AMFWZO0E5kh0C2K+kJfS80iBW7/7kLjiSbKz+WD9UBtsJPW2zyzKYC4ylU4jmnLw==",
+            "version": "10.0.11",
+            "resolved": "https://registry.npmjs.org/@graphql-tools/schema/-/schema-10.0.11.tgz",
+            "integrity": "sha512-cYr/7SJSKtdwPByTKHlBr0tYGf7/sYNyzKlPhPMHWoYyGxtn8ytbfF6wEUcxuaOoqksIFxOGr+WOJh1WvShb6A==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@graphql-tools/merge": "^9.0.9",
-                "@graphql-tools/utils": "^10.5.6",
+                "@graphql-tools/merge": "^9.0.12",
+                "@graphql-tools/utils": "^10.6.2",
                 "tslib": "^2.4.0",
                 "value-or-promise": "^1.0.12"
             },
@@ -4186,17 +4175,17 @@
             }
         },
         "node_modules/@graphql-tools/url-loader": {
-            "version": "8.0.15",
-            "resolved": "https://registry.npmjs.org/@graphql-tools/url-loader/-/url-loader-8.0.15.tgz",
-            "integrity": "sha512-4cCSaUFK/cULxDnU6mwwRLsFKxEswuFmG7/J68ic+CyJYUVMCc0x2QoKG4E2oeTY2dYIzlT39BmOT4+auqjDmw==",
+            "version": "8.0.18",
+            "resolved": "https://registry.npmjs.org/@graphql-tools/url-loader/-/url-loader-8.0.18.tgz",
+            "integrity": "sha512-gz6oRoZzUJyBDIVMBKFa35InRqzq3FOb/kEb+8T3/DrDZCIxFlmLBZzy9ANjKmF3ctLn0WQXopRSaG/Wq7NEwA==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@ardatan/sync-fetch": "^0.0.1",
                 "@graphql-tools/executor-graphql-ws": "^1.3.2",
                 "@graphql-tools/executor-http": "^1.1.9",
-                "@graphql-tools/executor-legacy-ws": "^1.1.2",
-                "@graphql-tools/utils": "^10.5.6",
+                "@graphql-tools/executor-legacy-ws": "^1.1.5",
+                "@graphql-tools/utils": "^10.6.2",
                 "@graphql-tools/wrap": "^10.0.16",
                 "@types/ws": "^8.0.0",
                 "@whatwg-node/fetch": "^0.10.0",
@@ -4227,13 +4216,14 @@
             }
         },
         "node_modules/@graphql-tools/url-loader/node_modules/@whatwg-node/node-fetch": {
-            "version": "0.7.3",
-            "resolved": "https://registry.npmjs.org/@whatwg-node/node-fetch/-/node-fetch-0.7.3.tgz",
-            "integrity": "sha512-mqHYN1JZG0bSnOi6bxYq8zSBLfp02597yb9YNwZ0Zqn3TdC7/YjRWKnnGm49rzIWGaNaHiUjv8KThuhpK7NDLA==",
+            "version": "0.7.4",
+            "resolved": "https://registry.npmjs.org/@whatwg-node/node-fetch/-/node-fetch-0.7.4.tgz",
+            "integrity": "sha512-rvUtU/xKKl/av5EIwyqfw7w0R+hx+tQrlhpIyFr27MwJRlUb+xcYv97kOmp7FE/WmQ8s+Tb6bcD6W8o/s2pGWw==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@kamilkisiela/fast-url-parser": "^1.1.4",
+                "@whatwg-node/disposablestack": "^0.0.5",
                 "busboy": "^1.6.0",
                 "fast-querystring": "^1.1.1",
                 "tslib": "^2.6.3"
@@ -4250,9 +4240,9 @@
             "license": "MIT"
         },
         "node_modules/@graphql-tools/utils": {
-            "version": "10.5.6",
-            "resolved": "https://registry.npmjs.org/@graphql-tools/utils/-/utils-10.5.6.tgz",
-            "integrity": "sha512-JAC44rhbLzXUHiltceyEpWkxmX4e45Dfg19wRFoA9EbDxQVbOzVNF76eEECdg0J1owFsJwfLqCwz7/6xzrovOw==",
+            "version": "10.6.2",
+            "resolved": "https://registry.npmjs.org/@graphql-tools/utils/-/utils-10.6.2.tgz",
+            "integrity": "sha512-ABZHTpwiVR8oE2//NI/nnU3nNhbBpqMlMYyCF5cnqjLfhlyOdFfoRuhYEATEsmMfDg0ijGreULywK/SmepVGfw==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
@@ -4269,17 +4259,16 @@
             }
         },
         "node_modules/@graphql-tools/wrap": {
-            "version": "10.0.17",
-            "resolved": "https://registry.npmjs.org/@graphql-tools/wrap/-/wrap-10.0.17.tgz",
-            "integrity": "sha512-VgPan0Pyt2ifSeBS5SN/agmiklstu9St+lP1tfADenTYzjiHM4EsJ1TbJF0k9ZPPsdrb+SgjbS+NUE6ouVNL8A==",
+            "version": "10.0.24",
+            "resolved": "https://registry.npmjs.org/@graphql-tools/wrap/-/wrap-10.0.24.tgz",
+            "integrity": "sha512-8aXz+vf45G89UjAVYHUWG7et1QvZ3Rs3OUVu5P4WiBttn3bcBY34qzbQgTdkC0lUwRtXWisendcUA3pSrBoBxg==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@graphql-tools/delegate": "^10.1.3",
-                "@graphql-tools/schema": "^10.0.7",
-                "@graphql-tools/utils": "^10.5.6",
-                "tslib": "^2.4.0",
-                "value-or-promise": "^1.0.12"
+                "@graphql-tools/delegate": "^10.2.6",
+                "@graphql-tools/schema": "^10.0.11",
+                "@graphql-tools/utils": "^10.6.2",
+                "tslib": "^2.4.0"
             },
             "engines": {
                 "node": ">=18.0.0"
@@ -5640,40 +5629,40 @@
             }
         },
         "node_modules/@react-aria/focus": {
-            "version": "3.18.4",
-            "resolved": "https://registry.npmjs.org/@react-aria/focus/-/focus-3.18.4.tgz",
-            "integrity": "sha512-91J35077w9UNaMK1cpMUEFRkNNz0uZjnSwiyBCFuRdaVuivO53wNC9XtWSDNDdcO5cGy87vfJRVAiyoCn/mjqA==",
+            "version": "3.19.0",
+            "resolved": "https://registry.npmjs.org/@react-aria/focus/-/focus-3.19.0.tgz",
+            "integrity": "sha512-hPF9EXoUQeQl1Y21/rbV2H4FdUR2v+4/I0/vB+8U3bT1CJ+1AFj1hc/rqx2DqEwDlEwOHN+E4+mRahQmlybq0A==",
             "license": "Apache-2.0",
             "dependencies": {
-                "@react-aria/interactions": "^3.22.4",
-                "@react-aria/utils": "^3.25.3",
-                "@react-types/shared": "^3.25.0",
+                "@react-aria/interactions": "^3.22.5",
+                "@react-aria/utils": "^3.26.0",
+                "@react-types/shared": "^3.26.0",
                 "@swc/helpers": "^0.5.0",
                 "clsx": "^2.0.0"
             },
             "peerDependencies": {
-                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
             }
         },
         "node_modules/@react-aria/interactions": {
-            "version": "3.22.4",
-            "resolved": "https://registry.npmjs.org/@react-aria/interactions/-/interactions-3.22.4.tgz",
-            "integrity": "sha512-E0vsgtpItmknq/MJELqYJwib+YN18Qag8nroqwjk1qOnBa9ROIkUhWJerLi1qs5diXq9LHKehZDXRlwPvdEFww==",
+            "version": "3.22.5",
+            "resolved": "https://registry.npmjs.org/@react-aria/interactions/-/interactions-3.22.5.tgz",
+            "integrity": "sha512-kMwiAD9E0TQp+XNnOs13yVJghiy8ET8L0cbkeuTgNI96sOAp/63EJ1FSrDf17iD8sdjt41LafwX/dKXW9nCcLQ==",
             "license": "Apache-2.0",
             "dependencies": {
-                "@react-aria/ssr": "^3.9.6",
-                "@react-aria/utils": "^3.25.3",
-                "@react-types/shared": "^3.25.0",
+                "@react-aria/ssr": "^3.9.7",
+                "@react-aria/utils": "^3.26.0",
+                "@react-types/shared": "^3.26.0",
                 "@swc/helpers": "^0.5.0"
             },
             "peerDependencies": {
-                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
             }
         },
         "node_modules/@react-aria/ssr": {
-            "version": "3.9.6",
-            "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.6.tgz",
-            "integrity": "sha512-iLo82l82ilMiVGy342SELjshuWottlb5+VefO3jOQqQRNYnJBFpUSadswDPbRimSgJUZuFwIEYs6AabkP038fA==",
+            "version": "3.9.7",
+            "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.7.tgz",
+            "integrity": "sha512-GQygZaGlmYjmYM+tiNBA5C6acmiDWF52Nqd40bBp0Znk4M4hP+LTmI0lpI1BuKMw45T8RIhrAsICIfKwZvi2Gg==",
             "license": "Apache-2.0",
             "dependencies": {
                 "@swc/helpers": "^0.5.0"
@@ -5682,59 +5671,59 @@
                 "node": ">= 12"
             },
             "peerDependencies": {
-                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
             }
         },
         "node_modules/@react-aria/utils": {
-            "version": "3.25.3",
-            "resolved": "https://registry.npmjs.org/@react-aria/utils/-/utils-3.25.3.tgz",
-            "integrity": "sha512-PR5H/2vaD8fSq0H/UB9inNbc8KDcVmW6fYAfSWkkn+OAdhTTMVKqXXrZuZBWyFfSD5Ze7VN6acr4hrOQm2bmrA==",
+            "version": "3.26.0",
+            "resolved": "https://registry.npmjs.org/@react-aria/utils/-/utils-3.26.0.tgz",
+            "integrity": "sha512-LkZouGSjjQ0rEqo4XJosS4L3YC/zzQkfRM3KoqK6fUOmUJ9t0jQ09WjiF+uOoG9u+p30AVg3TrZRUWmoTS+koQ==",
             "license": "Apache-2.0",
             "dependencies": {
-                "@react-aria/ssr": "^3.9.6",
-                "@react-stately/utils": "^3.10.4",
-                "@react-types/shared": "^3.25.0",
+                "@react-aria/ssr": "^3.9.7",
+                "@react-stately/utils": "^3.10.5",
+                "@react-types/shared": "^3.26.0",
                 "@swc/helpers": "^0.5.0",
                 "clsx": "^2.0.0"
             },
             "peerDependencies": {
-                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
             }
         },
         "node_modules/@react-stately/utils": {
-            "version": "3.10.4",
-            "resolved": "https://registry.npmjs.org/@react-stately/utils/-/utils-3.10.4.tgz",
-            "integrity": "sha512-gBEQEIMRh5f60KCm7QKQ2WfvhB2gLUr9b72sqUdIZ2EG+xuPgaIlCBeSicvjmjBvYZwOjoOEnmIkcx2GHp/HWw==",
+            "version": "3.10.5",
+            "resolved": "https://registry.npmjs.org/@react-stately/utils/-/utils-3.10.5.tgz",
+            "integrity": "sha512-iMQSGcpaecghDIh3mZEpZfoFH3ExBwTtuBEcvZ2XnGzCgQjeYXcMdIUwAfVQLXFTdHUHGF6Gu6/dFrYsCzySBQ==",
             "license": "Apache-2.0",
             "dependencies": {
                 "@swc/helpers": "^0.5.0"
             },
             "peerDependencies": {
-                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
             }
         },
         "node_modules/@react-types/shared": {
-            "version": "3.25.0",
-            "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.25.0.tgz",
-            "integrity": "sha512-OZSyhzU6vTdW3eV/mz5i6hQwQUhkRs7xwY2d1aqPvTdMe0+2cY7Fwp45PAiwYLEj73i9ro2FxF9qC4DvHGSCgQ==",
+            "version": "3.26.0",
+            "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.26.0.tgz",
+            "integrity": "sha512-6FuPqvhmjjlpEDLTiYx29IJCbCNWPlsyO+ZUmCUXzhUv2ttShOXfw8CmeHWHftT/b2KweAWuzqSlfeXPR76jpw==",
             "license": "Apache-2.0",
             "peerDependencies": {
-                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
             }
         },
         "node_modules/@remix-run/css-bundle": {
-            "version": "2.14.0",
-            "resolved": "https://registry.npmjs.org/@remix-run/css-bundle/-/css-bundle-2.14.0.tgz",
-            "integrity": "sha512-ihdLzO3UUAbdTkBQ/jl9rEmhFKzUA8eEAvvpjdkumipoKkiOsjqAFV62FAMf7mrKNBCv7UeoIOm6XHV9Io2DZg==",
+            "version": "2.15.0",
+            "resolved": "https://registry.npmjs.org/@remix-run/css-bundle/-/css-bundle-2.15.0.tgz",
+            "integrity": "sha512-Jf4AHdObVyGbPf5V4rIB7cRLdluFkzKvrHglDUrrH1KvbD+jNulQt+Kz3bjbEeEdyUSK+LdVMD2E2zOx+ZNXyg==",
             "license": "MIT",
             "engines": {
                 "node": ">=18.0.0"
             }
         },
         "node_modules/@remix-run/dev": {
-            "version": "2.14.0",
-            "resolved": "https://registry.npmjs.org/@remix-run/dev/-/dev-2.14.0.tgz",
-            "integrity": "sha512-WMun4fy0ANh92WecufUNb3IV/R02uyfBslM7g7nCO1/lzDII+XmfEkZY5CWPaLmnkoAc1DR2G60+eTHRo480Ug==",
+            "version": "2.15.0",
+            "resolved": "https://registry.npmjs.org/@remix-run/dev/-/dev-2.15.0.tgz",
+            "integrity": "sha512-iXV6u9PBwFc7KriDpVcjqLGJzZZd6ZOrxewen7hoH0OBzGwjkhtm46BTQEJrZ/e/dzlU1IU/0ylH29tN9BZoyg==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
@@ -5748,9 +5737,9 @@
                 "@babel/types": "^7.22.5",
                 "@mdx-js/mdx": "^2.3.0",
                 "@npmcli/package-json": "^4.0.1",
-                "@remix-run/node": "2.14.0",
+                "@remix-run/node": "2.15.0",
                 "@remix-run/router": "1.21.0",
-                "@remix-run/server-runtime": "2.14.0",
+                "@remix-run/server-runtime": "2.15.0",
                 "@types/mdx": "^2.0.5",
                 "@vanilla-extract/integration": "^6.2.0",
                 "arg": "^5.0.1",
@@ -5801,8 +5790,8 @@
                 "node": ">=18.0.0"
             },
             "peerDependencies": {
-                "@remix-run/react": "^2.14.0",
-                "@remix-run/serve": "^2.14.0",
+                "@remix-run/react": "^2.15.0",
+                "@remix-run/serve": "^2.15.0",
                 "typescript": "^5.1.0",
                 "vite": "^5.1.0",
                 "wrangler": "^3.28.2"
@@ -5858,13 +5847,13 @@
             }
         },
         "node_modules/@remix-run/node": {
-            "version": "2.14.0",
-            "resolved": "https://registry.npmjs.org/@remix-run/node/-/node-2.14.0.tgz",
-            "integrity": "sha512-ou16LMJYv0ElIToZ6dDqaLjv1T3iBEwuJTBahveEA8NkkACIWODJ2fgUYf1UKLMKHVdHjNImLzS37HdSZY0Q6g==",
+            "version": "2.15.0",
+            "resolved": "https://registry.npmjs.org/@remix-run/node/-/node-2.15.0.tgz",
+            "integrity": "sha512-tWbR7pQ6gwj+MkGf6WVIYnjgfGfpdU8EOIa6xsCIRlrm0p3BtMz4jA3GvBWEpOuEnN5MV7CarVzhduaRzkZ0SQ==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@remix-run/server-runtime": "2.14.0",
+                "@remix-run/server-runtime": "2.15.0",
                 "@remix-run/web-fetch": "^4.4.2",
                 "@web3-storage/multipart-parser": "^1.0.0",
                 "cookie-signature": "^1.1.0",
@@ -5885,13 +5874,13 @@
             }
         },
         "node_modules/@remix-run/react": {
-            "version": "2.14.0",
-            "resolved": "https://registry.npmjs.org/@remix-run/react/-/react-2.14.0.tgz",
-            "integrity": "sha512-uQcy5gxazHtpislgonx2dwRuR/CbvYUeguQxDgawd+dAyoglK2rFx58+F6Kj0Vjw6v/iuvxibA/lEAiAaB4ZmQ==",
+            "version": "2.15.0",
+            "resolved": "https://registry.npmjs.org/@remix-run/react/-/react-2.15.0.tgz",
+            "integrity": "sha512-puqDbi9N/WfaUhzDnw2pACXtCB7ukrtFJ9ILwpEuhlaTBpjefifJ89igokW+tt1ePphIFMivAm/YspcbZdCQsA==",
             "license": "MIT",
             "dependencies": {
                 "@remix-run/router": "1.21.0",
-                "@remix-run/server-runtime": "2.14.0",
+                "@remix-run/server-runtime": "2.15.0",
                 "react-router": "6.28.0",
                 "react-router-dom": "6.28.0",
                 "turbo-stream": "2.4.0"
@@ -5920,9 +5909,9 @@
             }
         },
         "node_modules/@remix-run/server-runtime": {
-            "version": "2.14.0",
-            "resolved": "https://registry.npmjs.org/@remix-run/server-runtime/-/server-runtime-2.14.0.tgz",
-            "integrity": "sha512-9Th9UzDaoFFBD7zA5mRI1KT8JktFLN4ij9jPygrKBhG/kYmNIvhcMtq9VyjcbMvFK5natTyhOhrrKRIHtijD4w==",
+            "version": "2.15.0",
+            "resolved": "https://registry.npmjs.org/@remix-run/server-runtime/-/server-runtime-2.15.0.tgz",
+            "integrity": "sha512-FuM8vAg1sPskf4wn0ivbuj/7s9Qdh2wnKu+sVXqYz0a95gH5b73TuMzk6n3NMSkFVKKc6+UmlG1WLYre7L2LTg==",
             "license": "MIT",
             "dependencies": {
                 "@remix-run/router": "1.21.0",
@@ -6014,9 +6003,9 @@
             "license": "MIT"
         },
         "node_modules/@rollup/rollup-android-arm-eabi": {
-            "version": "4.27.3",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.27.3.tgz",
-            "integrity": "sha512-EzxVSkIvCFxUd4Mgm4xR9YXrcp976qVaHnqom/Tgm+vU79k4vV4eYTjmRvGfeoW8m9LVcsAy/lGjcgVegKEhLQ==",
+            "version": "4.28.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.28.0.tgz",
+            "integrity": "sha512-wLJuPLT6grGZsy34g4N1yRfYeouklTgPhH1gWXCYspenKYD0s3cR99ZevOGw5BexMNywkbV3UkjADisozBmpPQ==",
             "cpu": [
                 "arm"
             ],
@@ -6028,9 +6017,9 @@
             ]
         },
         "node_modules/@rollup/rollup-android-arm64": {
-            "version": "4.27.3",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.27.3.tgz",
-            "integrity": "sha512-LJc5pDf1wjlt9o/Giaw9Ofl+k/vLUaYsE2zeQGH85giX2F+wn/Cg8b3c5CDP3qmVmeO5NzwVUzQQxwZvC2eQKw==",
+            "version": "4.28.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.28.0.tgz",
+            "integrity": "sha512-eiNkznlo0dLmVG/6wf+Ifi/v78G4d4QxRhuUl+s8EWZpDewgk7PX3ZyECUXU0Zq/Ca+8nU8cQpNC4Xgn2gFNDA==",
             "cpu": [
                 "arm64"
             ],
@@ -6042,9 +6031,9 @@
             ]
         },
         "node_modules/@rollup/rollup-darwin-arm64": {
-            "version": "4.27.3",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.27.3.tgz",
-            "integrity": "sha512-OuRysZ1Mt7wpWJ+aYKblVbJWtVn3Cy52h8nLuNSzTqSesYw1EuN6wKp5NW/4eSre3mp12gqFRXOKTcN3AI3LqA==",
+            "version": "4.28.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.28.0.tgz",
+            "integrity": "sha512-lmKx9yHsppblnLQZOGxdO66gT77bvdBtr/0P+TPOseowE7D9AJoBw8ZDULRasXRWf1Z86/gcOdpBrV6VDUY36Q==",
             "cpu": [
                 "arm64"
             ],
@@ -6056,9 +6045,9 @@
             ]
         },
         "node_modules/@rollup/rollup-darwin-x64": {
-            "version": "4.27.3",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.27.3.tgz",
-            "integrity": "sha512-xW//zjJMlJs2sOrCmXdB4d0uiilZsOdlGQIC/jjmMWT47lkLLoB1nsNhPUcnoqyi5YR6I4h+FjBpILxbEy8JRg==",
+            "version": "4.28.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.28.0.tgz",
+            "integrity": "sha512-8hxgfReVs7k9Js1uAIhS6zq3I+wKQETInnWQtgzt8JfGx51R1N6DRVy3F4o0lQwumbErRz52YqwjfvuwRxGv1w==",
             "cpu": [
                 "x64"
             ],
@@ -6070,9 +6059,9 @@
             ]
         },
         "node_modules/@rollup/rollup-freebsd-arm64": {
-            "version": "4.27.3",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.27.3.tgz",
-            "integrity": "sha512-58E0tIcwZ+12nK1WiLzHOD8I0d0kdrY/+o7yFVPRHuVGY3twBwzwDdTIBGRxLmyjciMYl1B/U515GJy+yn46qw==",
+            "version": "4.28.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.28.0.tgz",
+            "integrity": "sha512-lA1zZB3bFx5oxu9fYud4+g1mt+lYXCoch0M0V/xhqLoGatbzVse0wlSQ1UYOWKpuSu3gyN4qEc0Dxf/DII1bhQ==",
             "cpu": [
                 "arm64"
             ],
@@ -6084,9 +6073,9 @@
             ]
         },
         "node_modules/@rollup/rollup-freebsd-x64": {
-            "version": "4.27.3",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.27.3.tgz",
-            "integrity": "sha512-78fohrpcVwTLxg1ZzBMlwEimoAJmY6B+5TsyAZ3Vok7YabRBUvjYTsRXPTjGEvv/mfgVBepbW28OlMEz4w8wGA==",
+            "version": "4.28.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.28.0.tgz",
+            "integrity": "sha512-aI2plavbUDjCQB/sRbeUZWX9qp12GfYkYSJOrdYTL/C5D53bsE2/nBPuoiJKoWp5SN78v2Vr8ZPnB+/VbQ2pFA==",
             "cpu": [
                 "x64"
             ],
@@ -6098,9 +6087,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-            "version": "4.27.3",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.27.3.tgz",
-            "integrity": "sha512-h2Ay79YFXyQi+QZKo3ISZDyKaVD7uUvukEHTOft7kh00WF9mxAaxZsNs3o/eukbeKuH35jBvQqrT61fzKfAB/Q==",
+            "version": "4.28.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.28.0.tgz",
+            "integrity": "sha512-WXveUPKtfqtaNvpf0iOb0M6xC64GzUX/OowbqfiCSXTdi/jLlOmH0Ba94/OkiY2yTGTwteo4/dsHRfh5bDCZ+w==",
             "cpu": [
                 "arm"
             ],
@@ -6112,9 +6101,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-            "version": "4.27.3",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.27.3.tgz",
-            "integrity": "sha512-Sv2GWmrJfRY57urktVLQ0VKZjNZGogVtASAgosDZ1aUB+ykPxSi3X1nWORL5Jk0sTIIwQiPH7iE3BMi9zGWfkg==",
+            "version": "4.28.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.28.0.tgz",
+            "integrity": "sha512-yLc3O2NtOQR67lI79zsSc7lk31xjwcaocvdD1twL64PK1yNaIqCeWI9L5B4MFPAVGEVjH5k1oWSGuYX1Wutxpg==",
             "cpu": [
                 "arm"
             ],
@@ -6126,9 +6115,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-arm64-gnu": {
-            "version": "4.27.3",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.27.3.tgz",
-            "integrity": "sha512-FPoJBLsPW2bDNWjSrwNuTPUt30VnfM8GPGRoLCYKZpPx0xiIEdFip3dH6CqgoT0RnoGXptaNziM0WlKgBc+OWQ==",
+            "version": "4.28.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.28.0.tgz",
+            "integrity": "sha512-+P9G9hjEpHucHRXqesY+3X9hD2wh0iNnJXX/QhS/J5vTdG6VhNYMxJ2rJkQOxRUd17u5mbMLHM7yWGZdAASfcg==",
             "cpu": [
                 "arm64"
             ],
@@ -6140,9 +6129,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-arm64-musl": {
-            "version": "4.27.3",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.27.3.tgz",
-            "integrity": "sha512-TKxiOvBorYq4sUpA0JT+Fkh+l+G9DScnG5Dqx7wiiqVMiRSkzTclP35pE6eQQYjP4Gc8yEkJGea6rz4qyWhp3g==",
+            "version": "4.28.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.28.0.tgz",
+            "integrity": "sha512-1xsm2rCKSTpKzi5/ypT5wfc+4bOGa/9yI/eaOLW0oMs7qpC542APWhl4A37AENGZ6St6GBMWhCCMM6tXgTIplw==",
             "cpu": [
                 "arm64"
             ],
@@ -6154,9 +6143,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
-            "version": "4.27.3",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.27.3.tgz",
-            "integrity": "sha512-v2M/mPvVUKVOKITa0oCFksnQQ/TqGrT+yD0184/cWHIu0LoIuYHwox0Pm3ccXEz8cEQDLk6FPKd1CCm+PlsISw==",
+            "version": "4.28.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.28.0.tgz",
+            "integrity": "sha512-zgWxMq8neVQeXL+ouSf6S7DoNeo6EPgi1eeqHXVKQxqPy1B2NvTbaOUWPn/7CfMKL7xvhV0/+fq/Z/J69g1WAQ==",
             "cpu": [
                 "ppc64"
             ],
@@ -6168,9 +6157,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-            "version": "4.27.3",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.27.3.tgz",
-            "integrity": "sha512-LdrI4Yocb1a/tFVkzmOE5WyYRgEBOyEhWYJe4gsDWDiwnjYKjNs7PS6SGlTDB7maOHF4kxevsuNBl2iOcj3b4A==",
+            "version": "4.28.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.28.0.tgz",
+            "integrity": "sha512-VEdVYacLniRxbRJLNtzwGt5vwS0ycYshofI7cWAfj7Vg5asqj+pt+Q6x4n+AONSZW/kVm+5nklde0qs2EUwU2g==",
             "cpu": [
                 "riscv64"
             ],
@@ -6182,9 +6171,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-s390x-gnu": {
-            "version": "4.27.3",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.27.3.tgz",
-            "integrity": "sha512-d4wVu6SXij/jyiwPvI6C4KxdGzuZOvJ6y9VfrcleHTwo68fl8vZC5ZYHsCVPUi4tndCfMlFniWgwonQ5CUpQcA==",
+            "version": "4.28.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.28.0.tgz",
+            "integrity": "sha512-LQlP5t2hcDJh8HV8RELD9/xlYtEzJkm/aWGsauvdO2ulfl3QYRjqrKW+mGAIWP5kdNCBheqqqYIGElSRCaXfpw==",
             "cpu": [
                 "s390x"
             ],
@@ -6196,9 +6185,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-x64-gnu": {
-            "version": "4.27.3",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.27.3.tgz",
-            "integrity": "sha512-/6bn6pp1fsCGEY5n3yajmzZQAh+mW4QPItbiWxs69zskBzJuheb3tNynEjL+mKOsUSFK11X4LYF2BwwXnzWleA==",
+            "version": "4.28.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.28.0.tgz",
+            "integrity": "sha512-Nl4KIzteVEKE9BdAvYoTkW19pa7LR/RBrT6F1dJCV/3pbjwDcaOq+edkP0LXuJ9kflW/xOK414X78r+K84+msw==",
             "cpu": [
                 "x64"
             ],
@@ -6210,9 +6199,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-x64-musl": {
-            "version": "4.27.3",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.27.3.tgz",
-            "integrity": "sha512-nBXOfJds8OzUT1qUreT/en3eyOXd2EH5b0wr2bVB5999qHdGKkzGzIyKYaKj02lXk6wpN71ltLIaQpu58YFBoQ==",
+            "version": "4.28.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.28.0.tgz",
+            "integrity": "sha512-eKpJr4vBDOi4goT75MvW+0dXcNUqisK4jvibY9vDdlgLx+yekxSm55StsHbxUsRxSTt3JEQvlr3cGDkzcSP8bw==",
             "cpu": [
                 "x64"
             ],
@@ -6224,9 +6213,9 @@
             ]
         },
         "node_modules/@rollup/rollup-win32-arm64-msvc": {
-            "version": "4.27.3",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.27.3.tgz",
-            "integrity": "sha512-ogfbEVQgIZOz5WPWXF2HVb6En+kWzScuxJo/WdQTqEgeyGkaa2ui5sQav9Zkr7bnNCLK48uxmmK0TySm22eiuw==",
+            "version": "4.28.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.28.0.tgz",
+            "integrity": "sha512-Vi+WR62xWGsE/Oj+mD0FNAPY2MEox3cfyG0zLpotZdehPFXwz6lypkGs5y38Jd/NVSbOD02aVad6q6QYF7i8Bg==",
             "cpu": [
                 "arm64"
             ],
@@ -6238,9 +6227,9 @@
             ]
         },
         "node_modules/@rollup/rollup-win32-ia32-msvc": {
-            "version": "4.27.3",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.27.3.tgz",
-            "integrity": "sha512-ecE36ZBMLINqiTtSNQ1vzWc5pXLQHlf/oqGp/bSbi7iedcjcNb6QbCBNG73Euyy2C+l/fn8qKWEwxr+0SSfs3w==",
+            "version": "4.28.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.28.0.tgz",
+            "integrity": "sha512-kN/Vpip8emMLn/eOza+4JwqDZBL6MPNpkdaEsgUtW1NYN3DZvZqSQrbKzJcTL6hd8YNmFTn7XGWMwccOcJBL0A==",
             "cpu": [
                 "ia32"
             ],
@@ -6252,9 +6241,9 @@
             ]
         },
         "node_modules/@rollup/rollup-win32-x64-msvc": {
-            "version": "4.27.3",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.27.3.tgz",
-            "integrity": "sha512-vliZLrDmYKyaUoMzEbMTg2JkerfBjn03KmAw9CykO0Zzkzoyd7o3iZNam/TpyWNjNT+Cz2iO3P9Smv2wgrR+Eg==",
+            "version": "4.28.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.28.0.tgz",
+            "integrity": "sha512-Bvno2/aZT6usSa7lRDL2+hMjVAGjuqaymF1ApZm31JXzniR/hvr14jpU+/z4X6Gt5BPlzosscyJZGUvguXIqeQ==",
             "cpu": [
                 "x64"
             ],
@@ -6266,9 +6255,9 @@
             ]
         },
         "node_modules/@shopify/cli": {
-            "version": "3.70.0",
-            "resolved": "https://registry.npmjs.org/@shopify/cli/-/cli-3.70.0.tgz",
-            "integrity": "sha512-WgrwsiTH4DnfsZSCqP++nhsKXsM7BMqsuaiBhXBco4bwhnLAKUHCM0hI2ChYR2KjceNfsZQ+9ffWbAiaYdJLsA==",
+            "version": "3.71.3",
+            "resolved": "https://registry.npmjs.org/@shopify/cli/-/cli-3.71.3.tgz",
+            "integrity": "sha512-wurHoQJJyOhb7xtB4P41bfxCxpln4BoZB709svErQ2SbLhF0FsOXqP7ZseuRqdiA4Uha1Qi5Rmo00qWBBXVLKw==",
             "license": "MIT",
             "os": [
                 "darwin",
@@ -6520,6 +6509,18 @@
                 "node": ">= 12"
             }
         },
+        "node_modules/@shopify/cli-kit/node_modules/dotenv": {
+            "version": "16.4.5",
+            "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.5.tgz",
+            "integrity": "sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==",
+            "license": "BSD-2-Clause",
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://dotenvx.com"
+            }
+        },
         "node_modules/@shopify/cli-kit/node_modules/execa": {
             "version": "7.2.0",
             "resolved": "https://registry.npmjs.org/execa/-/execa-7.2.0.tgz",
@@ -7709,25 +7710,25 @@
             "license": "MIT"
         },
         "node_modules/@types/node": {
-            "version": "22.9.1",
-            "resolved": "https://registry.npmjs.org/@types/node/-/node-22.9.1.tgz",
-            "integrity": "sha512-p8Yy/8sw1caA8CdRIQBG5tiLHmxtQKObCijiAa9Ez+d4+PRffM4054xbju0msf+cvhJpnFEeNjxmVT/0ipktrg==",
+            "version": "22.10.1",
+            "resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.1.tgz",
+            "integrity": "sha512-qKgsUwfHZV2WCWLAnVP1JqnpE6Im6h3Y0+fYgMTasNQ7V++CBX5OT1as0g0f+OyubbFqhf6XVNIsmN4IIhEgGQ==",
             "license": "MIT",
             "dependencies": {
-                "undici-types": "~6.19.8"
+                "undici-types": "~6.20.0"
             }
         },
         "node_modules/@types/prop-types": {
-            "version": "15.7.13",
-            "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz",
-            "integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==",
+            "version": "15.7.14",
+            "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz",
+            "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==",
             "dev": true,
             "license": "MIT"
         },
         "node_modules/@types/react": {
-            "version": "18.3.12",
-            "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.12.tgz",
-            "integrity": "sha512-D2wOSq/d6Agt28q7rSI3jhU7G6aiuzljDGZ2hTZHIkrTLUI+AF3WMeKkEZ9nN2fkBAlcktT6vcZjDFiIhMYEQw==",
+            "version": "18.3.14",
+            "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.14.tgz",
+            "integrity": "sha512-NzahNKvjNhVjuPBQ+2G7WlxstQ+47kXZNHlUvFakDViuIEfGY926GqhMueQFZ7woG+sPiQKlF36XfrIUVSUfFg==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
@@ -7736,13 +7737,13 @@
             }
         },
         "node_modules/@types/react-dom": {
-            "version": "18.3.1",
-            "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.1.tgz",
-            "integrity": "sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==",
+            "version": "18.3.2",
+            "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.2.tgz",
+            "integrity": "sha512-Fqp+rcvem9wEnGr3RY8dYNvSQ8PoLqjZ9HLgaPUOjJJD120uDyOxOjc/39M4Kddp9JQCxpGQbnhVQF0C0ncYVg==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@types/react": "*"
+                "@types/react": "^18"
             }
         },
         "node_modules/@types/readdir-glob": {
@@ -7794,9 +7795,9 @@
             }
         },
         "node_modules/@vanilla-extract/css": {
-            "version": "1.16.0",
-            "resolved": "https://registry.npmjs.org/@vanilla-extract/css/-/css-1.16.0.tgz",
-            "integrity": "sha512-05JTbvG1E0IrSZKZ5el2EM9CmAX0XSdsNY+d4aRZxDvYf3/hwxomvFFEz2b/awjgg9yTVHW83Wq19wE4OoTEMg==",
+            "version": "1.16.1",
+            "resolved": "https://registry.npmjs.org/@vanilla-extract/css/-/css-1.16.1.tgz",
+            "integrity": "sha512-3jKxH5ty/ZjmGoLAx8liY7e87FRCIJfnuufX/K9fQklu0YHP3ClrNisU++LkZuD+GZleqMSAQMF0r8Otln+OPQ==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
@@ -7973,6 +7974,19 @@
             "integrity": "sha512-BEO6al7BYqcnfX15W2cnGR+Q566ACXAT9UQykORCWW80lmkpWsnEob6zJS1ZVBKsSJC8+7vJkHwlp+lXG1UCdw==",
             "license": "(Apache-2.0 AND MIT)"
         },
+        "node_modules/@whatwg-node/disposablestack": {
+            "version": "0.0.5",
+            "resolved": "https://registry.npmjs.org/@whatwg-node/disposablestack/-/disposablestack-0.0.5.tgz",
+            "integrity": "sha512-9lXugdknoIequO4OYvIjhygvfSEgnO8oASLqLelnDhkRjgBZhc39shC3QSlZuyDO9bgYSIVa2cHAiN+St3ty4w==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "tslib": "^2.6.3"
+            },
+            "engines": {
+                "node": ">=18.0.0"
+            }
+        },
         "node_modules/@whatwg-node/fetch": {
             "version": "0.9.23",
             "resolved": "https://registry.npmjs.org/@whatwg-node/fetch/-/fetch-0.9.23.tgz",
@@ -8940,9 +8954,9 @@
             }
         },
         "node_modules/caniuse-lite": {
-            "version": "1.0.30001680",
-            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001680.tgz",
-            "integrity": "sha512-rPQy70G6AGUMnbwS1z6Xg+RkHYPAi18ihs47GH0jcxIG7wArmPgY3XbS2sRdBbxJljp3thdT8BIqv9ccCypiPA==",
+            "version": "1.0.30001686",
+            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001686.tgz",
+            "integrity": "sha512-Y7deg0Aergpa24M3qLC5xjNklnKnhsmSyR/V89dLZ1n0ucJIFNs7PgR2Yfa/Zf6W79SbBicgtGxZr2juHkEUIA==",
             "dev": true,
             "funding": [
                 {
@@ -9175,24 +9189,15 @@
             }
         },
         "node_modules/class-variance-authority": {
-            "version": "0.7.0",
-            "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.0.tgz",
-            "integrity": "sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==",
+            "version": "0.7.1",
+            "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
+            "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
             "license": "Apache-2.0",
             "dependencies": {
-                "clsx": "2.0.0"
+                "clsx": "^2.1.1"
             },
             "funding": {
-                "url": "https://joebell.co.uk"
-            }
-        },
-        "node_modules/class-variance-authority/node_modules/clsx": {
-            "version": "2.0.0",
-            "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
-            "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==",
-            "license": "MIT",
-            "engines": {
-                "node": ">=6"
+                "url": "https://polar.sh/cva"
             }
         },
         "node_modules/clean-stack": {
@@ -10001,9 +10006,9 @@
             }
         },
         "node_modules/cssdb": {
-            "version": "8.2.1",
-            "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-8.2.1.tgz",
-            "integrity": "sha512-KwEPys7lNsC8OjASI8RrmwOYYDcm0JOW9zQhcV83ejYcQkirTEyeAGui8aO2F5PiS6SLpxuTzl6qlMElIdsgIg==",
+            "version": "8.2.2",
+            "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-8.2.2.tgz",
+            "integrity": "sha512-Z3kpWyvN68aKyeMxOUGmffQeHjvrzDxbre2B2ikr/WqQ4ZMkhHu2nOD6uwSeq3TpuOYU7ckvmJRAUIt6orkYUg==",
             "dev": true,
             "funding": [
                 {
@@ -10047,9 +10052,9 @@
             }
         },
         "node_modules/dataloader": {
-            "version": "2.2.2",
-            "resolved": "https://registry.npmjs.org/dataloader/-/dataloader-2.2.2.tgz",
-            "integrity": "sha512-8YnDaaf7N3k/q5HnTJVuzSyLETjoZjVmHc4AeKAzOvKHEFQKcn64OKBfzHYtE9zGjctNM7V9I0MfnUVLpi7M5g==",
+            "version": "2.2.3",
+            "resolved": "https://registry.npmjs.org/dataloader/-/dataloader-2.2.3.tgz",
+            "integrity": "sha512-y2krtASINtPFS1rSDjacrFgn1dcUuoREVabwlOGOe4SdxenREqwjwjElAdwvbGM7kgZz9a3KVicWR7vcz8rnzA==",
             "dev": true,
             "license": "MIT"
         },
@@ -10387,9 +10392,10 @@
             }
         },
         "node_modules/dotenv": {
-            "version": "16.4.5",
-            "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.5.tgz",
-            "integrity": "sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==",
+            "version": "16.4.7",
+            "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.7.tgz",
+            "integrity": "sha512-47qPchRCykZC03FhkYAhrvwU4xDBFIj1QPqaarj6mdM/hgUzfPHcpkHJOn3mJAufFeeAxAzeGsr5X0M4k6fLZQ==",
+            "dev": true,
             "license": "BSD-2-Clause",
             "engines": {
                 "node": ">=12"
@@ -10479,9 +10485,9 @@
             }
         },
         "node_modules/electron-to-chromium": {
-            "version": "1.5.63",
-            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.63.tgz",
-            "integrity": "sha512-ddeXKuY9BHo/mw145axlyWjlJ1UBt4WK3AlvkT7W2AbqfRQoacVoRUCF6wL3uIx/8wT9oLKXzI+rFqHHscByaA==",
+            "version": "1.5.71",
+            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.71.tgz",
+            "integrity": "sha512-dB68l59BI75W1BUGVTAEJy45CEVuEGy9qPVVQ8pnHyHMn36PLPPoE1mjLH+lo9rKulO3HC2OhbACI/8tCqJBcA==",
             "dev": true,
             "license": "ISC"
         },
@@ -10842,9 +10848,9 @@
             }
         },
         "node_modules/express": {
-            "version": "4.21.1",
-            "resolved": "https://registry.npmjs.org/express/-/express-4.21.1.tgz",
-            "integrity": "sha512-YSFlK1Ee0/GC8QaO91tHcDxJiE/X4FbpAyQWkxAvG6AXCuR65YzK8ua6D9hvi/TzUfZMpc+BwuM1IPw8fmQBiQ==",
+            "version": "4.21.2",
+            "resolved": "https://registry.npmjs.org/express/-/express-4.21.2.tgz",
+            "integrity": "sha512-28HqgMZAmih1Czt9ny7qr6ek2qddF4FclbMzwhCREB6OFfH+rXAnuNCwo1/wFvrtbgsQDb4kSbX9de9lFbrXnA==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
@@ -10867,7 +10873,7 @@
                 "methods": "~1.1.2",
                 "on-finished": "2.4.1",
                 "parseurl": "~1.3.3",
-                "path-to-regexp": "0.1.10",
+                "path-to-regexp": "0.1.12",
                 "proxy-addr": "~2.0.7",
                 "qs": "6.13.0",
                 "range-parser": "~1.2.1",
@@ -10882,6 +10888,10 @@
             },
             "engines": {
                 "node": ">= 0.10.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/express"
             }
         },
         "node_modules/express/node_modules/body-parser": {
@@ -11397,11 +11407,13 @@
             }
         },
         "node_modules/framer-motion": {
-            "version": "11.11.17",
-            "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.11.17.tgz",
-            "integrity": "sha512-O8QzvoKiuzI5HSAHbcYuL6xU+ZLXbrH7C8Akaato4JzQbX2ULNeniqC2Vo5eiCtFktX9XsJ+7nUhxcl2E2IjpA==",
+            "version": "11.13.1",
+            "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.13.1.tgz",
+            "integrity": "sha512-F40tpGTHByhn9h3zdBQPcEro+pSLtzARcocbNqAyfBI+u9S+KZuHH/7O9+z+GEkoF3eqFxfvVw0eBDytohwqmQ==",
             "license": "MIT",
             "dependencies": {
+                "motion-dom": "^11.13.0",
+                "motion-utils": "^11.13.0",
                 "tslib": "^2.4.0"
             },
             "peerDependencies": {
@@ -11722,13 +11734,13 @@
             "license": "MIT"
         },
         "node_modules/gopd": {
-            "version": "1.0.1",
-            "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
-            "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+            "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
             "dev": true,
             "license": "MIT",
-            "dependencies": {
-                "get-intrinsic": "^1.1.3"
+            "engines": {
+                "node": ">= 0.4"
             },
             "funding": {
                 "url": "https://github.com/sponsors/ljharb"
@@ -11820,9 +11832,9 @@
             }
         },
         "node_modules/graphql-config/node_modules/jiti": {
-            "version": "2.4.0",
-            "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.4.0.tgz",
-            "integrity": "sha512-H5UpaUI+aHOqZXlYOaFP/8AzKsg+guWu+Pr3Y8i7+Y3zr1aXAvCvTAQ1RxSc6oVD8R8c7brgNtTVP91E7upH/g==",
+            "version": "2.4.1",
+            "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.4.1.tgz",
+            "integrity": "sha512-yPBThwecp1wS9DmoA4x4KR2h3QoslacnDR8ypuFM962kI4/456Iy1oHx2RAgh4jfZNdn0bctsdadceiBUgpU1g==",
             "dev": true,
             "license": "MIT",
             "bin": {
@@ -11914,11 +11926,14 @@
             }
         },
         "node_modules/has-proto": {
-            "version": "1.0.3",
-            "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz",
-            "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==",
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.1.0.tgz",
+            "integrity": "sha512-QLdzI9IIO1Jg7f9GT1gXpPpXArAn6cS31R1eEZqz08Gc+uQ8/XiqHWt17Fiw+2p6oTTIq5GXEpQkAlA88YRl/Q==",
             "dev": true,
             "license": "MIT",
+            "dependencies": {
+                "call-bind": "^1.0.7"
+            },
             "engines": {
                 "node": ">= 0.4"
             },
@@ -11927,9 +11942,9 @@
             }
         },
         "node_modules/has-symbols": {
-            "version": "1.0.3",
-            "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
-            "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+            "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
             "dev": true,
             "license": "MIT",
             "engines": {
@@ -12018,9 +12033,9 @@
             }
         },
         "node_modules/hosted-git-info": {
-            "version": "6.1.1",
-            "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-6.1.1.tgz",
-            "integrity": "sha512-r0EI+HBMcXadMrugk0GCQ+6BQV39PiWAZVfq7oIckeGiN7sjRGyQxPdft3nQekFTCQbYxLBH+/axZMeH8UX6+w==",
+            "version": "6.1.3",
+            "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-6.1.3.tgz",
+            "integrity": "sha512-HVJyzUrLIL1c0QmviVh5E8VGyUS7xCFPS6yydaVd1UegW+ibV/CohqTH9MkOLDp5o+rb82DMo77PTuc9F/8GKw==",
             "dev": true,
             "license": "ISC",
             "dependencies": {
@@ -13393,9 +13408,9 @@
             }
         },
         "node_modules/lilconfig": {
-            "version": "3.1.2",
-            "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.2.tgz",
-            "integrity": "sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==",
+            "version": "3.1.3",
+            "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
+            "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
             "dev": true,
             "license": "MIT",
             "engines": {
@@ -14885,9 +14900,9 @@
             }
         },
         "node_modules/miniflare": {
-            "version": "3.20241106.0",
-            "resolved": "https://registry.npmjs.org/miniflare/-/miniflare-3.20241106.0.tgz",
-            "integrity": "sha512-PjOoJKjUUofCueQskfhXlGvvHxZj36UAJAp1DnquMK88MFF50zCULblh0KXMSNM+bXeQYA94Gj06a7kfmBGxPw==",
+            "version": "3.20241106.2",
+            "resolved": "https://registry.npmjs.org/miniflare/-/miniflare-3.20241106.2.tgz",
+            "integrity": "sha512-40JAPtNFMFrSW41CSxPgDykX4CgDokDfTZgDYYL8dsODb7pdAlj/dvlDPnaonkyXjRO7svyDwAavQT6IdagMwA==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
@@ -14899,7 +14914,7 @@
                 "glob-to-regexp": "^0.4.1",
                 "stoppable": "^1.1.0",
                 "undici": "^5.28.4",
-                "workerd": "1.20241106.1",
+                "workerd": "1.20241106.2",
                 "ws": "^8.18.0",
                 "youch": "^3.2.2",
                 "zod": "^3.22.3"
@@ -15131,12 +15146,22 @@
             "license": "MIT"
         },
         "node_modules/modern-ahocorasick": {
-            "version": "1.0.1",
-            "resolved": "https://registry.npmjs.org/modern-ahocorasick/-/modern-ahocorasick-1.0.1.tgz",
-            "integrity": "sha512-yoe+JbhTClckZ67b2itRtistFKf8yPYelHLc7e5xAwtNAXxM6wJTUx2C7QeVSJFDzKT7bCIFyBVybPMKvmB9AA==",
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/modern-ahocorasick/-/modern-ahocorasick-1.1.0.tgz",
+            "integrity": "sha512-sEKPVl2rM+MNVkGQt3ChdmD8YsigmXdn5NifZn6jiwn9LRJpWm8F3guhaqrJT/JOat6pwpbXEk6kv+b9DMIjsQ==",
             "dev": true,
             "license": "MIT"
         },
+        "node_modules/motion-dom": {
+            "version": "11.13.0",
+            "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-11.13.0.tgz",
+            "integrity": "sha512-Oc1MLGJQ6nrvXccXA89lXtOqFyBmvHtaDcTRGT66o8Czl7nuA8BeHAd9MQV1pQKX0d2RHFBFaw5g3k23hQJt0w=="
+        },
+        "node_modules/motion-utils": {
+            "version": "11.13.0",
+            "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-11.13.0.tgz",
+            "integrity": "sha512-lq6TzXkH5c/ysJQBxgLXgM01qwBH1b4goTPh57VvZWJbVJZF/0SB31UWEn4EIqbVPf3au88n2rvK17SpDTja1A=="
+        },
         "node_modules/mri": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
@@ -15212,9 +15237,9 @@
             }
         },
         "node_modules/nanoid": {
-            "version": "3.3.7",
-            "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
-            "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+            "version": "3.3.8",
+            "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
+            "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
             "dev": true,
             "funding": [
                 {
@@ -16232,9 +16257,9 @@
             "license": "ISC"
         },
         "node_modules/path-to-regexp": {
-            "version": "0.1.10",
-            "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.10.tgz",
-            "integrity": "sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w==",
+            "version": "0.1.12",
+            "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.12.tgz",
+            "integrity": "sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==",
             "dev": true,
             "license": "MIT"
         },
@@ -17966,9 +17991,9 @@
             }
         },
         "node_modules/registry-auth-token": {
-            "version": "5.0.2",
-            "resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-5.0.2.tgz",
-            "integrity": "sha512-o/3ikDxtXaA59BmZuZrJZDJv8NMDGSj+6j6XaeBmHw8eY1i1qd9+6H+LjVvQXx3HN6aRCGa1cUdJ9RaJZUugnQ==",
+            "version": "5.0.3",
+            "resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-5.0.3.tgz",
+            "integrity": "sha512-1bpc9IyC+e+CNFRaWyn77tk4xGG4PPUyfakSmA6F6cvUDjrm58dfyJ3II+9yb10EDkHoy1LaPSmHaWLOH3m6HA==",
             "license": "MIT",
             "dependencies": {
                 "@pnpm/npm-conf": "^2.1.0"
@@ -18196,9 +18221,9 @@
             }
         },
         "node_modules/resolve.exports": {
-            "version": "2.0.2",
-            "resolved": "https://registry.npmjs.org/resolve.exports/-/resolve.exports-2.0.2.tgz",
-            "integrity": "sha512-X2UW6Nw3n/aMgDVy+0rSqgHlv39WZAlZrXCdnbyEiKm17DSqHX4MmQMaST3FbeWR5FTuRcUwYAziZajji0Y7mg==",
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/resolve.exports/-/resolve.exports-2.0.3.tgz",
+            "integrity": "sha512-OcXjMsGdhL4XnbShKpAcSqPMzQoYkYyhbEaeSko47MjRP9NfEQMhZkXL1DoFlt9LWQn4YttrdnV6X2OiyzBi+A==",
             "dev": true,
             "license": "MIT",
             "engines": {
@@ -18280,9 +18305,9 @@
             }
         },
         "node_modules/rollup": {
-            "version": "4.27.3",
-            "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.27.3.tgz",
-            "integrity": "sha512-SLsCOnlmGt9VoZ9Ek8yBK8tAdmPHeppkw+Xa7yDlCEhDTvwYei03JlWo1fdc7YTfLZ4tD8riJCUyAgTbszk1fQ==",
+            "version": "4.28.0",
+            "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.28.0.tgz",
+            "integrity": "sha512-G9GOrmgWHBma4YfCcX8PjH0qhXSdH8B4HDE2o4/jaxj93S4DPCIDoLcXz99eWMji4hB29UFCEd7B2gwGJDR9cQ==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
@@ -18296,24 +18321,24 @@
                 "npm": ">=8.0.0"
             },
             "optionalDependencies": {
-                "@rollup/rollup-android-arm-eabi": "4.27.3",
-                "@rollup/rollup-android-arm64": "4.27.3",
-                "@rollup/rollup-darwin-arm64": "4.27.3",
-                "@rollup/rollup-darwin-x64": "4.27.3",
-                "@rollup/rollup-freebsd-arm64": "4.27.3",
-                "@rollup/rollup-freebsd-x64": "4.27.3",
-                "@rollup/rollup-linux-arm-gnueabihf": "4.27.3",
-                "@rollup/rollup-linux-arm-musleabihf": "4.27.3",
-                "@rollup/rollup-linux-arm64-gnu": "4.27.3",
-                "@rollup/rollup-linux-arm64-musl": "4.27.3",
-                "@rollup/rollup-linux-powerpc64le-gnu": "4.27.3",
-                "@rollup/rollup-linux-riscv64-gnu": "4.27.3",
-                "@rollup/rollup-linux-s390x-gnu": "4.27.3",
-                "@rollup/rollup-linux-x64-gnu": "4.27.3",
-                "@rollup/rollup-linux-x64-musl": "4.27.3",
-                "@rollup/rollup-win32-arm64-msvc": "4.27.3",
-                "@rollup/rollup-win32-ia32-msvc": "4.27.3",
-                "@rollup/rollup-win32-x64-msvc": "4.27.3",
+                "@rollup/rollup-android-arm-eabi": "4.28.0",
+                "@rollup/rollup-android-arm64": "4.28.0",
+                "@rollup/rollup-darwin-arm64": "4.28.0",
+                "@rollup/rollup-darwin-x64": "4.28.0",
+                "@rollup/rollup-freebsd-arm64": "4.28.0",
+                "@rollup/rollup-freebsd-x64": "4.28.0",
+                "@rollup/rollup-linux-arm-gnueabihf": "4.28.0",
+                "@rollup/rollup-linux-arm-musleabihf": "4.28.0",
+                "@rollup/rollup-linux-arm64-gnu": "4.28.0",
+                "@rollup/rollup-linux-arm64-musl": "4.28.0",
+                "@rollup/rollup-linux-powerpc64le-gnu": "4.28.0",
+                "@rollup/rollup-linux-riscv64-gnu": "4.28.0",
+                "@rollup/rollup-linux-s390x-gnu": "4.28.0",
+                "@rollup/rollup-linux-x64-gnu": "4.28.0",
+                "@rollup/rollup-linux-x64-musl": "4.28.0",
+                "@rollup/rollup-win32-arm64-msvc": "4.28.0",
+                "@rollup/rollup-win32-ia32-msvc": "4.28.0",
+                "@rollup/rollup-win32-x64-msvc": "4.28.0",
                 "fsevents": "~2.3.2"
             }
         },
@@ -18611,11 +18636,14 @@
             }
         },
         "node_modules/shell-quote": {
-            "version": "1.8.1",
-            "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.1.tgz",
-            "integrity": "sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==",
+            "version": "1.8.2",
+            "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.2.tgz",
+            "integrity": "sha512-AzqKpGKjrj7EM6rKVQEPpB288oCfnrEIuyoT9cyF4nmGa7V8Zk6f7RRqYisX8X9m+Q7bd632aZW4ky7EhbQztA==",
             "dev": true,
             "license": "MIT",
+            "engines": {
+                "node": ">= 0.4"
+            },
             "funding": {
                 "url": "https://github.com/sponsors/ljharb"
             }
@@ -19276,9 +19304,9 @@
             "license": "MIT"
         },
         "node_modules/tailwind-merge": {
-            "version": "2.5.4",
-            "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.4.tgz",
-            "integrity": "sha512-0q8cfZHMu9nuYP/b5Shb7Y7Sh1B7Nnl5GqNr1U+n2p6+mybvRtayrQ+0042Z5byvTA8ihjlP8Odo8/VnHbZu4Q==",
+            "version": "2.5.5",
+            "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.5.tgz",
+            "integrity": "sha512-0LXunzzAZzo0tEPxV3I297ffKZPlKDrjj7NXphC8V5ak9yHC5zRmxnOe2m/Rd/7ivsOMJe3JZ2JVocoDdQTRBA==",
             "license": "MIT",
             "funding": {
                 "type": "github",
@@ -19286,9 +19314,9 @@
             }
         },
         "node_modules/tailwindcss": {
-            "version": "3.4.15",
-            "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.15.tgz",
-            "integrity": "sha512-r4MeXnfBmSOuKUWmXe6h2CcyfzJCEk4F0pptO5jlnYSIViUkVmsawj80N5h2lO3gwcmSb4n3PuN+e+GC1Guylw==",
+            "version": "3.4.16",
+            "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.16.tgz",
+            "integrity": "sha512-TI4Cyx7gDiZ6r44ewaJmt0o6BrMCT5aK5e0rmJ/G9Xq3w7CX/5VXl/zIPEJZFUK5VEqwByyhqNPycPlvcK4ZNw==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
@@ -19301,7 +19329,7 @@
                 "glob-parent": "^6.0.2",
                 "is-glob": "^4.0.3",
                 "jiti": "^1.21.6",
-                "lilconfig": "^2.1.0",
+                "lilconfig": "^3.1.3",
                 "micromatch": "^4.0.8",
                 "normalize-path": "^3.0.0",
                 "object-hash": "^3.0.0",
@@ -19375,16 +19403,6 @@
                 "node": ">=10.13.0"
             }
         },
-        "node_modules/tailwindcss/node_modules/lilconfig": {
-            "version": "2.1.0",
-            "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
-            "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
-            "dev": true,
-            "license": "MIT",
-            "engines": {
-                "node": ">=10"
-            }
-        },
         "node_modules/tailwindcss/node_modules/postcss-import": {
             "version": "15.1.0",
             "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
@@ -19890,9 +19908,9 @@
             "license": "ISC"
         },
         "node_modules/type-fest": {
-            "version": "4.27.0",
-            "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.27.0.tgz",
-            "integrity": "sha512-3IMSWgP7C5KSQqmo1wjhKrwsvXAtF33jO3QY+Uy++ia7hqvgSK6iXbbg5PbDBc1P2ZbNEDgejOrN4YooXvhwCw==",
+            "version": "4.30.0",
+            "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.30.0.tgz",
+            "integrity": "sha512-G6zXWS1dLj6eagy6sVhOMQiLtJdxQBHIA9Z6HFUNLOlr6MFOgzV8wvmidtPONfPtEUv0uZsy77XJNzTAfwPDaA==",
             "license": "(MIT OR CC0-1.0)",
             "engines": {
                 "node": ">=16"
@@ -19916,9 +19934,9 @@
             }
         },
         "node_modules/typescript": {
-            "version": "5.6.3",
-            "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
-            "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
+            "version": "5.7.2",
+            "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.2.tgz",
+            "integrity": "sha512-i5t66RHxDvVN40HfDd1PsEThGNnlMCMT3jMUuoh9/0TaqWevNontacunWyN02LA9/fIbEWlcHZcgTKb9QoaLfg==",
             "dev": true,
             "license": "Apache-2.0",
             "bin": {
@@ -20102,9 +20120,9 @@
             }
         },
         "node_modules/undici-types": {
-            "version": "6.19.8",
-            "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
-            "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
+            "version": "6.20.0",
+            "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz",
+            "integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==",
             "license": "MIT"
         },
         "node_modules/unified": {
@@ -20432,12 +20450,12 @@
             }
         },
         "node_modules/use-sync-external-store": {
-            "version": "1.2.2",
-            "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz",
-            "integrity": "sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==",
+            "version": "1.4.0",
+            "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.4.0.tgz",
+            "integrity": "sha512-9WXSPC5fMv61vaupRkCKCxsPxBocVnwakBEkMIHHpkTTg6icbJtg6jzgtLDm4bl3cSHAca52rYWih0k4K3PfHw==",
             "license": "MIT",
             "peerDependencies": {
-                "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+                "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
             }
         },
         "node_modules/util": {
@@ -21170,9 +21188,9 @@
             "license": "ISC"
         },
         "node_modules/which-typed-array": {
-            "version": "1.1.15",
-            "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.15.tgz",
-            "integrity": "sha512-oV0jmFtUky6CXfkqehVvBP/LSWJ2sy4vWMioiENyJLePrBO/yKyV9OyJySfAKosh+RYkIl5zJCNZ8/4JncrpdA==",
+            "version": "1.1.16",
+            "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.16.tgz",
+            "integrity": "sha512-g+N+GAWiRj66DngFwHvISJd+ITsyphZvD1vChfVg6cEdnzy53GzB3oy0fUNlvhz7H7+MiqhYr26qxQShCpKTTQ==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
@@ -21208,9 +21226,9 @@
             "license": "MIT"
         },
         "node_modules/workerd": {
-            "version": "1.20241106.1",
-            "resolved": "https://registry.npmjs.org/workerd/-/workerd-1.20241106.1.tgz",
-            "integrity": "sha512-1GdKl0kDw8rrirr/ThcK66Kbl4/jd4h8uHx5g7YHBrnenY5SX1UPuop2cnCzYUxlg55kPjzIqqYslz1muRFgFw==",
+            "version": "1.20241106.2",
+            "resolved": "https://registry.npmjs.org/workerd/-/workerd-1.20241106.2.tgz",
+            "integrity": "sha512-Xw2hVIXA9MvDSHx3IX55ouGRPsQUzG0oadRVeQRs5xwgmiKshR0ompyYDO1JUvozJazfjcCSdgV8jyLcPqNIDA==",
             "dev": true,
             "hasInstallScript": true,
             "license": "Apache-2.0",
@@ -21221,11 +21239,11 @@
                 "node": ">=16"
             },
             "optionalDependencies": {
-                "@cloudflare/workerd-darwin-64": "1.20241106.1",
-                "@cloudflare/workerd-darwin-arm64": "1.20241106.1",
-                "@cloudflare/workerd-linux-64": "1.20241106.1",
-                "@cloudflare/workerd-linux-arm64": "1.20241106.1",
-                "@cloudflare/workerd-windows-64": "1.20241106.1"
+                "@cloudflare/workerd-darwin-64": "1.20241106.2",
+                "@cloudflare/workerd-darwin-arm64": "1.20241106.2",
+                "@cloudflare/workerd-linux-64": "1.20241106.2",
+                "@cloudflare/workerd-linux-arm64": "1.20241106.2",
+                "@cloudflare/workerd-windows-64": "1.20241106.2"
             }
         },
         "node_modules/worktop": {
diff --git a/package.json b/package.json
index 598a8f7..b07235b 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
     "name": "naturelle",
     "private": true,
     "sideEffects": false,
-    "version": "2.0.9",
+    "version": "2.1.0",
     "scripts": {
         "build": "shopify hydrogen build --codegen",
         "dev": "shopify hydrogen dev --port 3456 --codegen",