feat: first step of adding core charge functionality

Signed-off-by: Chloe <pinkcloudvnn@gmail.com>

components/cart/core-charge-badge.tsx

@@ -0,0 +1,23 @@
+import CoreCharge from 'components/core-charge';
+import { ProductVariant } from 'lib/shopify/types';
+
+type CoreChargeBadgeProps = {
+  selectedOptions: {
+    name: string;
+    value: string;
+  }[];
+  variants: ProductVariant[];
+};
+
+const CoreChargeBadge = ({ variants, selectedOptions }: CoreChargeBadgeProps) => {
+  const selectedOptionsMap = new Map(selectedOptions.map((option) => [option.name, option.value]));
+  console.log({ selectedOptionsMap, variants });
+  const variant = variants.find((variant: ProductVariant) =>
+    variant.selectedOptions.every((option) => option.value === selectedOptionsMap.get(option.name))
+  );
+
+  console.log({ variant });
+  return <CoreCharge variant={variant} sm />;
+};
+
+export default CoreChargeBadge;

components/cart/modal.tsx

@@ -10,6 +10,7 @@ import Image from 'next/image';
 import Link from 'next/link';
 import { Fragment, useEffect, useRef, useState } from 'react';
 import CloseCart from './close-cart';
+import CoreChargeBadge from './core-charge-badge';
 import { DeleteItemButton } from './delete-item-button';
 import { EditItemQuantityButton } from './edit-item-quantity-button';
 import OpenCart from './open-cart';
@@ -98,7 +99,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
                       return (
                         <li
                           key={i}
-                          className="flex w-full flex-col border-b border-neutral-300 dark:border-neutral-700"
+                          className="flex w-full flex-col border-b border-neutral-300 pb-3 dark:border-neutral-700"
                         >
                           <div className="relative flex w-full flex-row justify-between px-1 py-4">
                             <div className="absolute z-40 -mt-2 ml-[55px]">
@@ -122,7 +123,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
                                 />
                               </div>
 
-                              <div className="flex flex-1 flex-col text-base">
+                              <div className="flex flex-1 flex-col gap-1 text-base">
                                 <span className="leading-tight">
                                   {item.merchandise.product.title}
                                 </span>
@@ -133,19 +134,25 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
                                 ) : null}
                               </div>
                             </Link>
-                            <div className="flex h-16 flex-col justify-between">
+                          </div>
+                          <div className="ml-20 flex flex-col gap-2">
+                            <div className="flex flex-row items-center gap-2">
                               <Price
-                                className="flex justify-end space-y-2 text-right text-sm"
+                                className="font-semibold"
                                 amount={item.cost.totalAmount.amount}
                                 currencyCode={item.cost.totalAmount.currencyCode}
                               />
-                              <div className="ml-auto flex h-9 flex-row items-center rounded-full border border-neutral-200 dark:border-neutral-700">
+                              <CoreChargeBadge
-                                <EditItemQuantityButton item={item} type="minus" />
+                                variants={item.merchandise.product.variants}
-                                <p className="w-6 text-center">
+                                selectedOptions={item.merchandise.selectedOptions}
-                                  <span className="w-full text-sm">{item.quantity}</span>
+                              />
-                                </p>
+                            </div>
-                                <EditItemQuantityButton item={item} type="plus" />
+                            <div className="flex h-9 w-fit flex-row items-center rounded-sm border border-neutral-300 dark:border-neutral-700">
-                              </div>
+                              <EditItemQuantityButton item={item} type="minus" />
+                              <p className="w-6 text-center">
+                                <span className="w-full text-sm">{item.quantity}</span>
+                              </p>
+                              <EditItemQuantityButton item={item} type="plus" />
                             </div>
                           </div>
                         </li>

components/checkbox.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { CheckIcon } from '@heroicons/react/24/outline';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { cn } from 'lib/utils';
+import { forwardRef } from 'react';
+
+const Checkbox = forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      'ring-offset-background focus-visible:ring-ring peer h-4 w-4 shrink-0 rounded-sm border border-dark focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-dark data-[state=checked]:text-white',
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator className={cn('flex items-center justify-center text-current')}>
+      <CheckIcon className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };

components/core-charge.tsx

@@ -0,0 +1,47 @@
+import { ArrowPathIcon } from '@heroicons/react/16/solid';
+import { ProductVariant } from 'lib/shopify/types';
+import Price from './price';
+import Tooltip from './tooltip';
+
+type CoreChargeProps = {
+  variant?: ProductVariant;
+  sm?: boolean;
+};
+
+const CoreCharge = ({ variant, sm = false }: CoreChargeProps) => {
+  if (!variant || !variant.coreCharge?.amount || variant.waiverAvailable) return null;
+
+  const originalPrice = String(Number(variant.price.amount) - Number(variant.coreCharge.amount));
+
+  const coreChargeDisplay = (
+    <Price amount={variant.coreCharge.amount} currencyCode={variant.price.currencyCode} />
+  );
+
+  return (
+    <div className="flex items-center gap-2 rounded-md bg-gray-100 px-3 py-1 text-sm">
+      <ArrowPathIcon className="h-4 w-4" />
+      <span className="flex items-center gap-1" data-tooltip-id="core-charge-explanation">
+        {sm ? coreChargeDisplay : <>Core Charge: {coreChargeDisplay}</>}
+      </span>
+      {sm ? null : (
+        <Tooltip id="core-charge-explanation" className="max-w-64">
+          <p className="flex flex-wrap items-center gap-1">
+            The core charge of {coreChargeDisplay} is a refundable deposit that is added to the
+            price of the part.
+          </p>
+          <p>
+            This charge ensures that the old, worn-out part is returned to the supplier for proper
+            disposal or recycling.
+          </p>
+          <p className="flex flex-wrap items-center gap-1">
+            When you return the old part, you&apos;ll receive a refund of the core charge, making
+            the final price of the part{' '}
+            <Price amount={originalPrice} currencyCode={variant.price.currencyCode} />
+          </p>
+        </Tooltip>
+      )}
+    </div>
+  );
+};
+
+export default CoreCharge;

components/product/price-with-core-charge.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import { InformationCircleIcon } from '@heroicons/react/24/outline';
+import { Checkbox } from 'components/checkbox';
+import CoreCharge from 'components/core-charge';
+import Price from 'components/price';
+import Tooltip from 'components/tooltip';
+import { Money, ProductVariant } from 'lib/shopify/types';
+import { useSearchParams } from 'next/navigation';
+
+type PriceWithCoreChargeProps = {
+  variants: ProductVariant[];
+  defaultPrice: Money;
+};
+
+const PriceWithCoreCharge = ({ variants, defaultPrice }: PriceWithCoreChargeProps) => {
+  const searchParams = useSearchParams();
+  const variant = variants.find((variant: ProductVariant) =>
+    variant.selectedOptions.every(
+      (option) => option.value === searchParams.get(option.name.toLowerCase())
+    )
+  );
+  console.log({ variant });
+  return (
+    <div className="mr-auto flex w-auto flex-row flex-wrap items-center gap-3 text-sm">
+      <Price
+        amount={variant?.price.amount || defaultPrice.amount}
+        currencyCode={variant?.price.currencyCode || defaultPrice.currencyCode}
+        className="text-lg font-semibold"
+      />
+      <CoreCharge variant={variant} />
+      {variant?.coreCharge?.amount && variant.waiverAvailable ? (
+        <div className="mt-1 flex w-full items-center space-x-3">
+          <Checkbox id="payCoreCharge" />
+          <label htmlFor="payCoreCharge" className="text-md flex items-center gap-1 leading-none">
+            Pay a core charge of
+            <Price
+              amount={variant.coreCharge.amount}
+              currencyCode={variant.coreCharge.currencyCode}
+            />
+            <span data-tooltip-id="payCoreCharge">
+              <InformationCircleIcon className="ml-1 h-4 w-4 text-gray-500" />
+            </span>
+          </label>
+          <Tooltip id="payCoreCharge">Select this if you do not have a core to return</Tooltip>
+        </div>
+      ) : null}
+    </div>
+  );
+};
+
+export default PriceWithCoreCharge;

components/product/product-description.tsx

@@ -1,22 +1,19 @@
 import { AddToCart } from 'components/cart/add-to-cart';
-import Price from 'components/price';
 import Prose from 'components/prose';
 import { Product } from 'lib/shopify/types';
 import { Suspense } from 'react';
+import PriceWithCoreCharge from './price-with-core-charge';
 import { VariantSelector } from './variant-selector';
 
 export function ProductDescription({ product }: { product: Product }) {
   return (
     <>
       <div className="mb-6 flex flex-col border-b pb-6 dark:border-neutral-700">
-        <h1 className="mb-2 text-4xl font-bold">{product.title}</h1>
+        <h1 className="mb-3 text-4xl font-bold">{product.title}</h1>
-        <div className="mr-auto w-auto text-sm">
+        <PriceWithCoreCharge
-          <Price
+          variants={product.variants}
-            amount={product.priceRange.minVariantPrice.amount}
+          defaultPrice={product.priceRange.minVariantPrice}
-            currencyCode={product.priceRange.minVariantPrice.currencyCode}
+        />
-            className="text-base font-semibold"
-          />
-        </div>
       </div>
       <Suspense fallback={null}>
         <VariantSelector options={product.options} variants={product.variants} />

lib/shopify/fragments/product.ts

@@ -44,6 +44,12 @@ const productFragment = /* GraphQL */ `
             amount
             currencyCode
           }
+          coreCharge: metafield(namespace: "custom", key: "core_charge") {
+            value
+          }
+          waiverAvailable: metafield(namespace: "custom", key: "waiver_available") {
+            value
+          }
         }
       }
     }

lib/shopify/index.ts

@@ -1,6 +1,6 @@
 import { HIDDEN_PRODUCT_TAG, SHOPIFY_GRAPHQL_API_ENDPOINT, TAGS } from 'lib/constants';
 import { isShopifyError } from 'lib/type-guards';
-import { ensureStartsWith, normalizeUrl } from 'lib/utils';
+import { ensureStartsWith, normalizeUrl, parseMetaFieldValue } from 'lib/utils';
 import { revalidateTag } from 'next/cache';
 import { headers } from 'next/headers';
 import { NextRequest, NextResponse } from 'next/server';
@@ -29,8 +29,10 @@ import {
   Connection,
   Image,
   Menu,
+  Money,
   Page,
   Product,
+  ProductVariant,
   ShopifyAddToCartOperation,
   ShopifyCart,
   ShopifyCartOperation,
@@ -45,6 +47,7 @@ import {
   ShopifyProduct,
   ShopifyProductOperation,
   ShopifyProductRecommendationsOperation,
+  ShopifyProductVariant,
   ShopifyProductsOperation,
   ShopifyRemoveFromCartOperation,
   ShopifyUpdateCartOperation
@@ -128,7 +131,13 @@ const reshapeCart = (cart: ShopifyCart): Cart => {
 
   return {
     ...cart,
-    lines: removeEdgesAndNodes(cart.lines)
+    lines: removeEdgesAndNodes(cart.lines).map((lineItem) => ({
+      ...lineItem,
+      merchandise: {
+        ...lineItem.merchandise,
+        product: reshapeProduct(lineItem.merchandise.product)
+      }
+    }))
   };
 };
 
@@ -171,6 +180,14 @@ const reshapeImages = (images: Connection<Image>, productTitle: string) => {
   });
 };
 
+const reshapeVariants = (variants: ShopifyProductVariant[]): ProductVariant[] => {
+  return variants.map((variant) => ({
+    ...variant,
+    coreCharge: parseMetaFieldValue<Money>(variant.coreCharge),
+    waiverAvailable: parseMetaFieldValue<boolean>(variant.waiverAvailable)
+  }));
+};
+
 const reshapeProduct = (product: ShopifyProduct, filterHiddenProducts: boolean = true) => {
   if (!product || (filterHiddenProducts && product.tags.includes(HIDDEN_PRODUCT_TAG))) {
     return undefined;
@@ -181,7 +198,7 @@ const reshapeProduct = (product: ShopifyProduct, filterHiddenProducts: boolean =
   return {
     ...rest,
     images: reshapeImages(images, product.title),
-    variants: removeEdgesAndNodes(variants)
+    variants: reshapeVariants(removeEdgesAndNodes(variants))
   };
 };
 

lib/shopify/types.ts

@@ -82,6 +82,13 @@ export type ProductVariant = {
     value: string;
   }[];
   price: Money;
+  coreCharge: Money | null;
+  waiverAvailable: boolean | null;
+};
+
+export type ShopifyProductVariant = Omit<ProductVariant, 'coreCharge' | 'waiverAvailable'> & {
+  coreCharge: { value: string } | null;
+  waiverAvailable: { value: string };
 };
 
 export type SEO = {
@@ -121,7 +128,7 @@ export type ShopifyProduct = {
     maxVariantPrice: Money;
     minVariantPrice: Money;
   };
-  variants: Connection<ProductVariant>;
+  variants: Connection<ShopifyProductVariant>;
   featuredImage: Image;
   images: Connection<Image>;
   seo: SEO;

lib/utils.ts

@@ -47,3 +47,11 @@ export function cn(...inputs: ClassValue[]) {
 export function normalizeUrl(domain: string, url: string) {
   return url.replace(domain, '').replace('/collections', '/search').replace('/pages', '');
 }
+
+export const parseMetaFieldValue = <T>(field: { value: string } | null): T | null => {
+  try {
+    return JSON.parse(field?.value || '{}');
+  } catch (error) {
+    return null;
+  }
+};

package.json

@@ -24,6 +24,7 @@
   "dependencies": {
     "@headlessui/react": "^1.7.18",
     "@heroicons/react": "^2.1.3",
+    "@radix-ui/react-checkbox": "^1.0.4",
     "clsx": "^2.1.0",
     "geist": "^1.3.0",
     "next": "14.1.4",

pnpm-lock.yaml

@@ -11,6 +11,9 @@ dependencies:
   '@heroicons/react':
     specifier: ^2.1.3
     version: 2.1.3(react@18.2.0)
+  '@radix-ui/react-checkbox':
+    specifier: ^1.0.4
+    version: 1.0.4(@types/react-dom@18.2.22)(@types/react@18.2.72)(react-dom@18.2.0)(react@18.2.0)
   clsx:
     specifier: ^2.1.0
     version: 2.1.0
@@ -383,6 +386,198 @@ packages:
     dev: true
     optional: true
 
+  /@radix-ui/primitive@1.0.1:
+    resolution: {integrity: sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==}
+    dependencies:
+      '@babel/runtime': 7.24.1
+    dev: false
+
+  /@radix-ui/react-checkbox@1.0.4(@types/react-dom@18.2.22)(@types/react@18.2.72)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-CBuGQa52aAYnADZVt/KBQzXrwx6TqnlwtcIPGtVt5JkkzQwMOLJjPukimhfKEr4GQNd43C+djUh5Ikopj8pSLg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.1
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.72)(react@18.2.0)
+      '@radix-ui/react-context': 1.0.1(@types/react@18.2.72)(react@18.2.0)
+      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.22)(@types/react@18.2.72)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.72)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.72)(react@18.2.0)
+      '@radix-ui/react-use-previous': 1.0.1(@types/react@18.2.72)(react@18.2.0)
+      '@radix-ui/react-use-size': 1.0.1(@types/react@18.2.72)(react@18.2.0)
+      '@types/react': 18.2.72
+      '@types/react-dom': 18.2.22
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
+  /@radix-ui/react-compose-refs@1.0.1(@types/react@18.2.72)(react@18.2.0):
+    resolution: {integrity: sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.1
+      '@types/react': 18.2.72
+      react: 18.2.0
+    dev: false
+
+  /@radix-ui/react-context@1.0.1(@types/react@18.2.72)(react@18.2.0):
+    resolution: {integrity: sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.1
+      '@types/react': 18.2.72
+      react: 18.2.0
+    dev: false
+
+  /@radix-ui/react-presence@1.0.1(@types/react-dom@18.2.22)(@types/react@18.2.72)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.1
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.72)(react@18.2.0)
+      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.72)(react@18.2.0)
+      '@types/react': 18.2.72
+      '@types/react-dom': 18.2.22
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
+  /@radix-ui/react-primitive@1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.72)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.1
+      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.72)(react@18.2.0)
+      '@types/react': 18.2.72
+      '@types/react-dom': 18.2.22
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
+  /@radix-ui/react-slot@1.0.2(@types/react@18.2.72)(react@18.2.0):
+    resolution: {integrity: sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.1
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.72)(react@18.2.0)
+      '@types/react': 18.2.72
+      react: 18.2.0
+    dev: false
+
+  /@radix-ui/react-use-callback-ref@1.0.1(@types/react@18.2.72)(react@18.2.0):
+    resolution: {integrity: sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.1
+      '@types/react': 18.2.72
+      react: 18.2.0
+    dev: false
+
+  /@radix-ui/react-use-controllable-state@1.0.1(@types/react@18.2.72)(react@18.2.0):
+    resolution: {integrity: sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.1
+      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.72)(react@18.2.0)
+      '@types/react': 18.2.72
+      react: 18.2.0
+    dev: false
+
+  /@radix-ui/react-use-layout-effect@1.0.1(@types/react@18.2.72)(react@18.2.0):
+    resolution: {integrity: sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.1
+      '@types/react': 18.2.72
+      react: 18.2.0
+    dev: false
+
+  /@radix-ui/react-use-previous@1.0.1(@types/react@18.2.72)(react@18.2.0):
+    resolution: {integrity: sha512-cV5La9DPwiQ7S0gf/0qiD6YgNqM5Fk97Kdrlc5yBcrF3jyEZQwm7vYFqMo4IfeHgJXsRaMvLABFtd0OVEmZhDw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.1
+      '@types/react': 18.2.72
+      react: 18.2.0
+    dev: false
+
+  /@radix-ui/react-use-size@1.0.1(@types/react@18.2.72)(react@18.2.0):
+    resolution: {integrity: sha512-ibay+VqrgcaI6veAojjofPATwledXiSmX+C0KrBk/xgpX9rBzPV3OsfwlhQdUOFbh+LKQorLYT+xTXW9V8yd0g==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.1
+      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.72)(react@18.2.0)
+      '@types/react': 18.2.72
+      react: 18.2.0
+    dev: false
+
   /@rushstack/eslint-patch@1.8.0:
     resolution: {integrity: sha512-0HejFckBN2W+ucM6cUOlwsByTKt9/+0tWhqUffNIcHqCXkthY/mZ7AuYPK/2IIaGWhdl0h+tICDO0ssLMd6XMQ==}
     dev: true
@@ -444,20 +639,17 @@ packages:
 
   /@types/prop-types@15.7.12:
     resolution: {integrity: sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==}
-    dev: true
 
   /@types/react-dom@18.2.22:
     resolution: {integrity: sha512-fHkBXPeNtfvri6gdsMYyW+dW7RXFo6Ad09nLFK0VQWR7yGLai/Cyvyj696gbwYvBnhGtevUG9cET0pmUbMtoPQ==}
     dependencies:
       '@types/react': 18.2.72
-    dev: true
 
   /@types/react@18.2.72:
     resolution: {integrity: sha512-/e7GWxGzXQF7OJAua7UAYqYi/4VpXEfbGtmYQcAQwP3SjjjAXfybTf/JK5S+SaetB/ChXl8Y2g1hCsj7jDXxcg==}
     dependencies:
       '@types/prop-types': 15.7.12
       csstype: 3.1.3
-    dev: true
 
   /@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.3):
     resolution: {integrity: sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==}
@@ -970,7 +1162,6 @@ packages:
 
   /csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
-    dev: true
 
   /damerau-levenshtein@1.0.8:
     resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}