{
  "name": "product-variant-05-block",
  "type": "registry:block",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "https://ui.stackzero.co/r/price-format-basic.json",
    "https://ui.stackzero.co/r/variant-selector-multiple.json",
    "https://ui.stackzero.co/r/star-rating-fractions.json",
    "https://ui.stackzero.co/r/quantity-input-basic.json",
    "https://ui.stackzero.co/r/image-carousel-basic.json"
  ],
  "files": [
    {
      "type": "registry:block",
      "content": "\"use client\";\n\nimport ImageCarouselBasic, {\n  CarouselImage,\n} from \"@/components/commerce-ui/image-carousel-basic\";\nimport PriceFormat from \"@/components/commerce-ui/price-format-basic\";\nimport QuantityInputBasic from \"@/components/commerce-ui/quantity-input-basic\";\nimport StarRating_Fractions from \"@/components/commerce-ui/star-rating-fractions\";\nimport VariantSelectorMultiple, {\n  VariantItem as BaseVariantItem,\n} from \"@/components/commerce-ui/variant-selector-multiple\";\nimport { Button } from \"@/components/ui/button\";\nimport { ShieldCheck, Users } from \"lucide-react\";\nimport { useState } from \"react\";\n\ninterface AccessoryVariant extends BaseVariantItem {\n  price: number;\n  salePrice?: number;\n  isInStock?: boolean;\n  availableQuantity?: number | null;\n}\n\ninterface ServiceVariant extends BaseVariantItem {\n  price: number;\n  salePrice?: number;\n}\n\ninterface Benefit {\n  icon?: React.ReactNode;\n  title: string;\n  description: string;\n}\n\ninterface FeaturedReview {\n  rating: number;\n  reviewDate: string;\n  reviewText: string;\n  avatarUrl: string;\n  reviewerName: string;\n  reviewerTitle: string;\n}\n\ninterface VariantSelectionPayload {\n  productPrice: number;\n  accessoryIds: string[];\n  accessoryLabels: string[];\n  accessoriesPrice: number;\n  serviceIds: string[];\n  serviceLabels: string[];\n  servicesPrice: number;\n  quantity: number;\n  totalPrice: number;\n}\n\ninterface ProductVariant05Props {\n  title?: string;\n  description?: string;\n  price?: number;\n  badge?: string | null;\n  rating?: number;\n  reviewCount?: number;\n  warranty?: string;\n  images?: CarouselImage[];\n  defaultImages?: CarouselImage[];\n  benefits?: Benefit[];\n  accessoryVariants?: AccessoryVariant[];\n  serviceVariants?: ServiceVariant[];\n  initialAccessories?: string[];\n  initialServices?: string[];\n  selectedAccessories?: string[];\n  onAccessoriesChange?: (accessories: string[]) => void;\n  selectedServices?: string[];\n  onServicesChange?: (services: string[]) => void;\n  quantity?: number;\n  onQuantityChange?: (quantity: number) => void;\n  onAddToCart?: (payload: VariantSelectionPayload) => void;\n  onBuyNow?: (payload: VariantSelectionPayload) => void;\n  isLoading?: boolean;\n  errorMessage?: string | null;\n  currencyPrefix?: string;\n  featuredReview?: FeaturedReview;\n}\n\n// Default accessory options\nconst DEFAULT_ACCESSORY_VARIANTS: AccessoryVariant[] = [\n  {\n    id: \"acc-1\",\n    isInStock: true,\n    label: \"Accessory 1\",\n    price: 10.99,\n    value: \"acc-1\",\n  },\n  {\n    id: \"acc-2\",\n    isInStock: true,\n    label: \"Accessory 2\",\n    price: 15.99,\n    value: \"acc-3\",\n  },\n  {\n    id: \"acc-3\",\n    isInStock: true,\n    label: \"Accessory 3\",\n    price: 65.99,\n    value: \"acc-3\",\n  },\n];\n\n// Default service options\nconst DEFAULT_SERVICE_VARIANTS: ServiceVariant[] = [\n  {\n    id: \"serv-extended\",\n    label: \"Extended Warranty (+2 Years)\",\n    price: 99.99,\n    value: \"serv-extended\",\n  },\n  {\n    id: \"serv-installation\",\n    label: \"Professional Installation\",\n    price: 79.99,\n    value: \"serv-installation\",\n  },\n  {\n    id: \"serv-maintenance\",\n    label: \"Annual Maintenance Plan\",\n    price: 149.99,\n    value: \"serv-maintenance\",\n  },\n];\n\n// Default product images for carousel\nconst DEFAULT_PRODUCT_IMAGES: CarouselImage[] = [\n  {\n    title: \"Coffee Machine Front View\",\n    url: \"https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/coffee-machine-01.jpg\",\n  },\n  {\n    title: \"Coffee Machine Side View\",\n    url: \"https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/coffee-machine-02.jpg\",\n  },\n  {\n    title: \"Coffee Machine Cups\",\n    url: \"https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/coffee-cups-01.jpg\",\n  },\n  {\n    title: \"Coffee Filters\",\n    url: \"https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/coffee-filter-01.jpg\",\n  },\n];\n\nfunction ProductVariant_05({\n  accessoryVariants = DEFAULT_ACCESSORY_VARIANTS,\n  badge = \"New Arrival\",\n  description = \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\",\n  title = \"Product Title\",\n  benefits = [\n    {\n      description: \"A very good benefit description\",\n      title: \"Benefit A\",\n    },\n    {\n      description: \"A very good benefit description\",\n      title: \"Benefit B\",\n    },\n    {\n      description: \"A very good benefit description\",\n      title: \"Benefit C\",\n    },\n  ],\n  currencyPrefix = \"$\",\n  defaultImages = [],\n  errorMessage = null,\n  rating = 4.8,\n  featuredReview = {\n    avatarUrl:\n      \"https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/user-04.jpg\",\n    rating: 5,\n    reviewDate: \"Mar 15, 2024\",\n    reviewerName: \"John Doe\",\n    reviewerTitle: \"Reviewer\",\n    reviewText:\n      \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\",\n  },\n  images = DEFAULT_PRODUCT_IMAGES,\n  initialAccessories = [\"acc-descaler\"],\n  initialServices = [],\n  isLoading = false,\n  onAccessoriesChange,\n  onAddToCart = () => {},\n  onBuyNow = () => {},\n  onQuantityChange,\n  onServicesChange,\n  price = 399.99,\n  quantity: controlledQuantity,\n  reviewCount = 256,\n  selectedAccessories: controlledAccessories,\n  selectedServices: controlledServices,\n  serviceVariants = DEFAULT_SERVICE_VARIANTS,\n  warranty = \"2 Year\",\n}: ProductVariant05Props) {\n  // Internal state management for uncontrolled component\n  const [internalSelectedAccessories, setInternalSelectedAccessories] =\n    useState<string[]>(initialAccessories);\n  const [internalSelectedServices, setInternalSelectedServices] =\n    useState<string[]>(initialServices);\n  const [internalQuantity, setInternalQuantity] = useState(1);\n\n  // Determine if we're in controlled or uncontrolled mode\n  const isAccessoriesControlled = controlledAccessories !== undefined;\n  const isServicesControlled = controlledServices !== undefined;\n  const isQuantityControlled = controlledQuantity !== undefined;\n\n  const selectedAccessoryIds = isAccessoriesControlled\n    ? controlledAccessories\n    : internalSelectedAccessories;\n  const selectedServiceIds = isServicesControlled\n    ? controlledServices\n    : internalSelectedServices;\n  const quantity = isQuantityControlled ? controlledQuantity : internalQuantity;\n\n  const handleAccessoriesChange = (newAccessories: string[]) => {\n    if (isAccessoriesControlled) {\n      onAccessoriesChange?.(newAccessories);\n    } else {\n      setInternalSelectedAccessories(newAccessories);\n    }\n  };\n\n  const handleServicesChange = (newServices: string[]) => {\n    if (isServicesControlled) {\n      onServicesChange?.(newServices);\n    } else {\n      setInternalSelectedServices(newServices);\n    }\n  };\n\n  const handleQuantityChange = (newQuantity: number) => {\n    if (isQuantityControlled) {\n      onQuantityChange?.(newQuantity);\n    } else {\n      setInternalQuantity(newQuantity);\n    }\n  };\n\n  // Calculate accessories price\n  const accessoriesPrice = selectedAccessoryIds.reduce((total, acc) => {\n    const accessory = accessoryVariants.find((a) => a.value === acc);\n    return total + (accessory?.price || 0);\n  }, 0);\n\n  // Calculate services price\n  const servicesPrice = selectedServiceIds.reduce((total, serv) => {\n    const service = serviceVariants.find((s) => s.value === serv);\n    return total + (service?.price || 0);\n  }, 0);\n\n  // Calculate total price\n  const itemPrice = price + accessoriesPrice + servicesPrice;\n  const totalPrice = itemPrice * quantity;\n\n  // Add visual indicator for out of stock items\n  const accessoryVariantsWithStockIndicator = accessoryVariants.map(\n    (variant) => {\n      const isInStock =\n        variant.isInStock !== undefined ? variant.isInStock : true;\n      return {\n        ...variant,\n        disabled: !isInStock,\n        label: variant.label + (isInStock ? \"\" : \" (Out of Stock)\"),\n      };\n    }\n  );\n\n  const handleAddToCart = () => {\n    onAddToCart({\n      accessoriesPrice,\n      accessoryIds: selectedAccessoryIds,\n      accessoryLabels: selectedAccessoryIds.map((id) => {\n        const accessory = accessoryVariants.find((a) => a.value === id);\n        return accessory?.label || \"\";\n      }),\n      productPrice: price,\n      quantity,\n      serviceIds: selectedServiceIds,\n      serviceLabels: selectedServiceIds.map((id) => {\n        const service = serviceVariants.find((s) => s.value === id);\n        return service?.label || \"\";\n      }),\n      servicesPrice,\n      totalPrice,\n    });\n  };\n\n  const handleBuyNow = () => {\n    onBuyNow({\n      accessoriesPrice,\n      accessoryIds: selectedAccessoryIds,\n      accessoryLabels: selectedAccessoryIds.map((id) => {\n        const accessory = accessoryVariants.find((a) => a.value === id);\n        return accessory?.label || \"\";\n      }),\n      productPrice: price,\n      quantity,\n      serviceIds: selectedServiceIds,\n      serviceLabels: selectedServiceIds.map((id) => {\n        const service = serviceVariants.find((s) => s.value === id);\n        return service?.label || \"\";\n      }),\n      servicesPrice,\n      totalPrice,\n    });\n  };\n\n  if (errorMessage) {\n    return (\n      <div className=\"my-6 rounded-lg border border-red-200 bg-red-50 p-6 text-red-600 dark:border-red-900 dark:bg-red-900/20 dark:text-red-400\">\n        <p className=\"font-medium\">Error loading product</p>\n        <p className=\"text-sm\">{errorMessage}</p>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"max-w-screen-x flex flex-col\">\n      {/* Main product card */}\n      <div className=\"border-brown-200 dark:border-brown-800 relative flex flex-col overflow-hidden rounded-xl border bg-white shadow-sm transition-all duration-300 hover:shadow-md dark:bg-gray-900\">\n        <div className=\"absolute inset-0 overflow-hidden\">\n          <div className=\"absolute -top-8 -left-8 h-32 w-32 animate-pulse rounded-full bg-amber-700/20\"></div>\n          <div className=\"absolute right-0 bottom-0 h-40 w-40 rounded-full bg-amber-900/10 blur-md\"></div>\n          <div className=\"absolute bottom-12 left-1/3 h-24 w-24 rounded-full bg-amber-600/10 blur-sm\"></div>\n          <div className=\"absolute inset-0 bg-[radial-gradient(circle_at_20%_70%,rgba(146,64,14,0.08),transparent)]\"></div>\n        </div>\n\n        <div className=\"flex flex-col lg:flex-row\">\n          {/* Image and review section - left column */}\n          <div className=\"to-brown-50 relative flex w-full flex-col bg-gradient-to-br from-amber-50 via-amber-100/50 lg:h-auto lg:w-1/2 dark:from-gray-900 dark:via-amber-950/10 dark:to-gray-900\">\n            {badge && (\n              <div className=\"absolute top-3 left-3 z-20 flex items-center justify-center\">\n                <div className=\"rounded-md bg-gradient-to-r from-amber-700 to-amber-900 px-3 py-1 text-xs font-bold tracking-wider text-amber-50 uppercase shadow-md\">\n                  {badge}\n                </div>\n              </div>\n            )}\n\n            <div className=\"absolute inset-0 z-10\">\n              <div className=\"absolute top-1/3 left-1/2 h-12 w-8 -translate-x-1/2 rounded-full border-t border-l border-amber-700/20 opacity-30\"></div>\n              <div className=\"absolute top-1/4 left-1/3 h-8 w-12 -translate-x-1/2 rounded-full border-t border-r border-amber-700/20 opacity-30\"></div>\n            </div>\n\n            {/* Image Carousel */}\n            <div className=\"relative z-10 flex h-full items-center justify-center p-6\">\n              <div className=\"w-full transition-all duration-500\">\n                {isLoading ? (\n                  <div className=\"flex h-[300px] items-center justify-center\">\n                    <div className=\"h-10 w-10 animate-spin rounded-full border-4 border-amber-200 border-t-amber-600\"></div>\n                  </div>\n                ) : (\n                  <ImageCarouselBasic\n                    images={images.length > 0 ? images : defaultImages}\n                    showThumbs={true}\n                    thumbPosition=\"bottom\"\n                    showCarouselControls={true}\n                    className=\"mx-auto\"\n                  />\n                )}\n              </div>\n            </div>\n\n            <div className=\"relative z-10 px-6 pb-6\">\n              <div className=\"rounded-lg bg-white/80 p-4 shadow-sm backdrop-blur-sm dark:bg-gray-800/80\">\n                <div className=\"mb-2 flex items-center justify-between\">\n                  <div className=\"flex items-center space-x-2\">\n                    <Users className=\"h-4 w-4 text-amber-700 dark:text-amber-500\" />\n                    <h4 className=\"text-sm font-medium text-amber-900 dark:text-amber-100\">\n                      {reviewCount}+ Happy Customers\n                    </h4>\n                  </div>\n                </div>\n                <div className=\"space-y-2\">\n                  <div className=\"flex items-center justify-between\">\n                    <StarRating_Fractions\n                      value={featuredReview.rating}\n                      readOnly={true}\n                      iconSize={14}\n                      color=\"#92400E\"\n                      className=\"flex-shrink-0\"\n                    />\n                    <span className=\"text-xs\">{featuredReview.reviewDate}</span>\n                  </div>\n                  <p className=\"text-sm italic\">\n                    &quot;{featuredReview.reviewText}&quot;\n                  </p>\n                  <div className=\"flex items-center space-x-3\">\n                    <img\n                      src={featuredReview.avatarUrl}\n                      alt={featuredReview.reviewerName}\n                      className=\"h-7 w-7 rounded-full object-cover\"\n                    />\n                    <div>\n                      <p className=\"text-xs font-medium text-amber-900 dark:text-amber-100\">\n                        {featuredReview.reviewerName}\n                      </p>\n                      <p className=\"text-xs text-amber-700 dark:text-amber-400\">\n                        {featuredReview.reviewerTitle}\n                      </p>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          {/* Content section - right side */}\n          <div className=\"relative z-10 flex flex-1 flex-col justify-between p-5 lg:w-1/2\">\n            <div>\n              <div className=\"mb-3\">\n                <div className=\"mb-1 flex items-center justify-between\">\n                  <h3 className=\"text-xl font-bold text-amber-900 dark:text-amber-100\">\n                    {title}\n                  </h3>\n                  <PriceFormat\n                    prefix={currencyPrefix}\n                    value={price}\n                    className=\"text-xl font-bold text-amber-800 dark:text-amber-300\"\n                  />\n                </div>\n\n                <div className=\"mb-2 flex items-center\">\n                  <StarRating_Fractions\n                    value={rating}\n                    readOnly={true}\n                    iconSize={16}\n                    color=\"#92400E\"\n                    className=\"flex-shrink-0\"\n                  />\n                  <span className=\"ml-2 text-sm text-amber-700 dark:text-amber-400\">\n                    ({reviewCount} reviews)\n                  </span>\n                </div>\n\n                <p className=\"text-sm\">{description}</p>\n              </div>\n\n              <div className=\"space-y-4\">\n                <div>\n                  <label className=\"mb-2 block text-sm font-medium text-amber-800 dark:text-amber-300\">\n                    Accessories\n                  </label>\n                  <VariantSelectorMultiple\n                    values={selectedAccessoryIds}\n                    onValuesChange={handleAccessoriesChange}\n                    variants={accessoryVariantsWithStockIndicator}\n                    className=\"flex-wrap\"\n                    itemClassName=\"bg-amber-50 border-amber-200 hover:border-amber-400 dark:bg-gray-800 dark:border-amber-700/50\n                                data-[state=on]:border-amber-600 data-[state=on]:bg-amber-100 \n                                data-[state=on]:text-amber-800 dark:data-[state=on]:bg-gray-700 \n                                dark:data-[state=on]:border-amber-500 dark:data-[state=on]:text-amber-300\n                                focus:ring-2 focus:ring-amber-500/40 focus:ring-offset-1\n                                dark:focus:ring-amber-500/30 dark:focus:ring-offset-gray-900\"\n                  />\n                </div>\n\n                <div>\n                  <label className=\"mb-2 block text-sm font-medium text-amber-800 dark:text-amber-300\">\n                    Service & Protection\n                  </label>\n                  <VariantSelectorMultiple\n                    values={selectedServiceIds}\n                    onValuesChange={handleServicesChange}\n                    variants={serviceVariants}\n                    className=\"flex-wrap\"\n                    itemClassName=\"bg-amber-50 border-amber-200 hover:border-amber-400 dark:bg-gray-800 dark:border-amber-700/50\n                                data-[state=on]:border-amber-600 data-[state=on]:bg-amber-100 \n                                data-[state=on]:text-amber-800 dark:data-[state=on]:bg-gray-700 \n                                dark:data-[state=on]:border-amber-500 dark:data-[state=on]:text-amber-300\n                                focus:ring-2 focus:ring-amber-500/40 focus:ring-offset-1\n                                dark:focus:ring-amber-500/30 dark:focus:ring-offset-gray-900\"\n                  />\n                </div>\n              </div>\n\n              {/* Selections summary */}\n              {(selectedAccessoryIds.length > 0 ||\n                selectedServiceIds.length > 0) && (\n                <div className=\"my-4 rounded-md bg-amber-50 p-3 dark:bg-amber-950/20\">\n                  {selectedAccessoryIds.length > 0 && (\n                    <div className=\"mb-2\">\n                      <h4 className=\"text-sm font-medium text-amber-800 dark:text-amber-200\">\n                        Selected accessories:\n                      </h4>\n                      <ul className=\"space-y-1\">\n                        {selectedAccessoryIds.map((accId) => {\n                          const accessory = accessoryVariants.find(\n                            (a) => a.value === accId\n                          );\n                          return (\n                            <li\n                              key={accId}\n                              className=\"flex items-center justify-between text-sm\"\n                            >\n                              <span>{accessory?.label}</span>\n                              <PriceFormat\n                                prefix={currencyPrefix}\n                                value={accessory?.price || 0}\n                                className=\"font-light\"\n                              />\n                            </li>\n                          );\n                        })}\n                      </ul>\n                    </div>\n                  )}\n\n                  {selectedServiceIds.length > 0 && (\n                    <div>\n                      <h4 className=\"text-sm font-medium text-amber-800 dark:text-amber-200\">\n                        Selected services:\n                      </h4>\n                      <ul className=\"space-y-1\">\n                        {selectedServiceIds.map((servId) => {\n                          const service = serviceVariants.find(\n                            (s) => s.value === servId\n                          );\n                          return (\n                            <li\n                              key={servId}\n                              className=\"flex items-center justify-between text-sm\"\n                            >\n                              <span>{service?.label}</span>\n                              <PriceFormat\n                                prefix={currencyPrefix}\n                                value={service?.price || 0}\n                                className=\"font-light\"\n                              />\n                            </li>\n                          );\n                        })}\n                      </ul>\n                    </div>\n                  )}\n                </div>\n              )}\n\n              {/* Quantity selection */}\n              <div className=\"mb-4\">\n                <div className=\"flex items-center justify-between\">\n                  <div>\n                    <label className=\"mb-2 block text-sm font-medium text-amber-800 dark:text-amber-300\">\n                      Quantity\n                    </label>\n                    <QuantityInputBasic\n                      quantity={quantity}\n                      onChange={handleQuantityChange}\n                      max={10}\n                      className=\"w-[120px] border-amber-200 dark:border-amber-700/50\"\n                    />\n                  </div>\n                  <div className=\"text-right\">\n                    <span className=\"block text-sm font-medium text-amber-800 dark:text-amber-300\">\n                      Total\n                    </span>\n                    <PriceFormat\n                      prefix={currencyPrefix}\n                      value={totalPrice}\n                      className=\"text-lg font-bold text-amber-800 dark:text-amber-300\"\n                    />\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            {/* Action buttons */}\n            <div className=\"mt-2 flex space-x-2\">\n              <Button\n                variant=\"outline\"\n                onClick={handleAddToCart}\n                className=\"flex-1 border-amber-300 bg-white text-amber-800 hover:border-amber-500 hover:bg-amber-50 hover:text-amber-900 dark:border-amber-700/50 dark:bg-gray-800 dark:text-amber-300 dark:hover:border-amber-600\"\n                disabled={isLoading}\n              >\n                {isLoading ? \"Loading...\" : \"Add to cart\"}\n              </Button>\n              <Button\n                onClick={handleBuyNow}\n                className=\"flex-1 bg-gradient-to-r from-amber-700 to-amber-900 text-white hover:from-amber-800 hover:to-amber-950\"\n                disabled={isLoading}\n              >\n                {isLoading ? \"Loading...\" : \"Buy now\"}\n              </Button>\n            </div>\n\n            {/* Warranty info */}\n            <div className=\"mt-3\">\n              <p className=\"flex items-center text-xs font-medium text-amber-700 dark:text-amber-400\">\n                <ShieldCheck className=\"mr-1 h-4 w-4 text-amber-700 dark:text-amber-400\" />\n                {warranty} Manufacturer Warranty Included\n              </p>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      {/* Horizontal benefits list */}\n      <div className=\"mt-4 grid grid-cols-1 gap-4 md:grid-cols-3\">\n        {benefits.map((benefit, index) => (\n          <div\n            key={index}\n            className=\"relative flex items-center gap-4 overflow-hidden rounded-lg border border-amber-200 bg-gradient-to-br from-white to-amber-50 p-4 shadow-sm transition-all hover:border-amber-300 hover:shadow-md dark:border-amber-900/50 dark:from-gray-900 dark:to-amber-950/20\"\n          >\n            {/* Decorations */}\n            <div className=\"absolute right-0 bottom-0 h-16 w-16 rounded-tl-full bg-amber-800/5\"></div>\n\n            <div className=\"flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-amber-100 to-amber-200 text-amber-800 dark:from-amber-900/40 dark:to-amber-800/40 dark:text-amber-300\">\n              {benefit.icon}\n            </div>\n            <div className=\"relative z-10\">\n              <h4 className=\"font-medium text-amber-900 dark:text-amber-100\">\n                {benefit.title}\n              </h4>\n              <p className=\"text-sm text-amber-700/80 dark:text-amber-300/80\">\n                {benefit.description}\n              </p>\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\nexport default ProductVariant_05;\nexport type {\n  AccessoryVariant,\n  Benefit,\n  FeaturedReview,\n  ProductVariant05Props,\n  ServiceVariant,\n  VariantSelectionPayload,\n};\n",
      "path": "/components/commerce-ui/blocks/product-variants/product-variants-05.tsx",
      "target": "components/commerce-ui/product-variants-05.tsx"
    }
  ]
}