@cimplify/sdk 0.60.0 → 0.61.0

package/dist/react.d.mts

@@ -1873,6 +1873,24 @@ interface ProductCardProps {
  */
 declare function ProductCard({ product, displayMode, variant, cards, href, renderModal, renderImage, renderLink, onQuickAdd, children, aspectRatio, className, classNames, }: ProductCardProps): React$1.ReactElement;
 
+/**
+ * Sanitize merchant-authored HTML for safe rendering. Runs identically on the
+ * Cloudflare Workers edge (SSR) and in the browser — no DOM dependency.
+ */
+declare function sanitizeRichTextHtml(html: string): string;
+interface RichTextProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "dangerouslySetInnerHTML" | "children"> {
+    /** Merchant-authored HTML (e.g. a product description). Sanitized before render. */
+    html?: string | null;
+}
+/**
+ * RichText — renders sanitized merchant-authored HTML with theme-aware prose
+ * styling. Headings, lists, bold, italics, links, quotes and code all display
+ * correctly; scripts and event handlers are stripped.
+ *
+ * Returns `null` when there's no renderable content.
+ */
+declare function RichText({ html, className, ...rest }: RichTextProps): React$1.ReactElement | null;
+
 interface ProductGridClassNames {
     root?: string;
     item?: string;
@@ -3425,4 +3443,4 @@ interface ChatWidgetProps {
 }
 declare function ChatWidget({ client: clientProp, businessName, greeting, subtitle, starters, placeholder, position, defaultOpen, pollInterval, className, classNames, }: ChatWidgetProps): react_jsx_runtime.JSX.Element;
 
-export { AccommodationCard, AccountContent, type AccountContentProps, AccountDashboardPage, type AccountDashboardPageProps, AccountHero, type AccountHeroProps, AccountIdentityStrip, type AccountIdentityStripProps, AccountNav, type AccountNavProps, AccountOrderDetailPage, type AccountOrderDetailPageProps, AccountOrdersPage, type AccountOrdersPageProps, type AccountPageBaseProps, AccountShell, type AccountShellProps, AccountSidebar, type AccountSidebarProps, AccountSignedOutPrompt, type AccountSignedOutPromptProps, AccountSubscriptionDetailPage, type AccountSubscriptionDetailPageProps, AccountSubscriptionsPage, type AccountSubscriptionsPageProps, Ad, AdPosition, type AdProps, AdProvider, AdSlot, AddOnSelector, type AddOnSelectorClassNames, type AddOnSelectorProps, type AddToCartOptions, AddressElement, AuthElement, AvailabilityBadge, type AvailabilityBadgeClassNames, type AvailabilityBadgeProps, BackLink, type BackLinkProps, BillingPlanSelector, type BillingPlanSelectorClassNames, type BillingPlanSelectorProps, BookingCard, type BookingCardClassNames, type BookingCardProps, BookingList, type BookingListClassNames, type BookingListProps, BookingPage, type BookingPageClassNames, type BookingPageProps, BookingsPage, type BookingsPageClassNames, type BookingsPageProps, BoxIcon24, BundleProductCard, BundleProductLayout, BundleSelector, type BundleSelectorClassNames, type BundleSelectorProps, Button, type ButtonProps, CardImage, type CardLayoutProps, CardShell, CardVariant, type CartAddOnOptionSelection, CartDrawer, type CartDrawerProps, CartDrawerProvider, type CartLayoutProps, CartPage, type CartPageClassNames, type CartPageProps, CartSummary, type CartSummaryClassNames, type CartSummaryProps, CartTemplate, type CartVariantSelection, CatalogueCollectionLayout, type CatalogueLayoutProps, CataloguePage, type CataloguePageClassNames, type CataloguePageProps, CatalogueTemplate, CategoryFilter, type CategoryFilterClassNames, type CategoryFilterProps, CategoryGrid, type CategoryGridClassNames, type CategoryGridProps, ChatWidget, type ChatWidgetClassNames, type ChatWidgetProps, CheckIcon, CheckoutPage, type CheckoutPageClassNames, type CheckoutPageProps, CimplifyAccount, type CimplifyAccountProps, CimplifyCheckout, type CimplifyCheckoutProps, type CimplifyClientContextValue, type CimplifyClientSession, type CimplifyContextValue, CimplifyProvider, type CimplifyProviderProps, CimplifySignInButton, type CimplifySignInButtonProps, type CollectionLayoutProps, CollectionPage, type CollectionPageClassNames, type CollectionPageProps, CollectionTemplate, CompactCartLayout, CompactCatalogueLayout, CompactSearchLayout, CompactServiceCard, CompositeProductCard, CompositeProductLayout, CompositeSelector, type CompositeSelectorClassNames, type CompositeSelectorProps, ContextCard, type ContextCardProps, type ContextRow, ContinuityCard, type ContinuityCardProps, CurrencySelector, type CurrencySelectorClassNames, type CurrencySelectorProps, CustomAttributesTable, CustomerInputFields, type CustomerInputFieldsClassNames, type CustomerInputFieldsProps, DashboardIcon, DashboardIcon20, DatePicker, type DatePickerClassNames, type DatePickerProps, DateSlotPicker, type DateSlotPickerClassNames, type DateSlotPickerProps, DealBanner, type DealBannerClassNames, type DealBannerProps, DealsPage, type DealsPageClassNames, type DealsPageProps, DefaultCartLayout, DefaultCatalogueLayout, DefaultCollectionLayout, DefaultProductLayout, DefaultSearchLayout, DeliveryEstimate, type DeliveryEstimateClassNames, type DeliveryEstimateProps, DeliveryTruckIcon, DigitalProductCard, DigitalProductLayout, DiscountInput, type DiscountInputClassNames, type DiscountInputProps, ElementsProvider, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, FeaturedCollectionLayout, type FilterTabItem, FilterTabs, type FilterTabsProps, FoodProductCard, FoodProductLayout, HappeningCard, type HappeningCardProps, type HappeningPaneData, IdentityIcon, IdentityOfframp, type IdentityOfframpProps, type IdentitySummary, InventoryBadge, ItemsCard, type ItemsCardProps, LeaseServiceCard, LocationPicker, type LocationPickerClassNames, type LocationPickerProps, MediaGallery, type MediaGalleryProps, type MediaItem, MetadataStringList, MobileAccountShell, type MobileAccountShellProps, MobileBackButton, MobileMoreButton, MobileTabBar, type MobileTabBarProps, type NavItem, NextDeliveryCard, type NextDeliveryCardProps, OrderDetailHeader, type OrderDetailHeaderProps, OrderDetailMetaPipe, OrderDetailPage, type OrderDetailPageClassNames, type OrderDetailPageProps, OrderHistory, type OrderHistoryClassNames, OrderHistoryPage, type OrderHistoryPageClassNames, type OrderHistoryPageProps, type OrderHistoryProps, type OrderItemData, OrderList, type OrderListProps, OrderRow, type OrderRowData, type OrderRowProps, type OrderRowStatus, OrderSummary, type OrderSummaryClassNames, type OrderSummaryProps, OrderTimeline, type OrderTimelineProps, OrderTotals, type OrderTotalsProps, OrdersIcon, OrdersIcon20, OvenIcon, PackageIcon, PaymentElement, Price, type PriceProps, PriceRange, type PriceRangeProps, ProductCard, type ProductCardClassNames, type ProductCardProps, ProductCustomizer, type ProductCustomizerClassNames, type ProductCustomizerProps, ProductGrid, type ProductGridClassNames, type ProductGridProps, ProductImageGallery, type ProductImageGalleryProps, type ProductLayoutProps, ProductModel3D, type ProductModel3DProps, ProductPage, type ProductPageClassNames, type ProductPageProps, ProductSheet, type ProductSheetClassNames, type ProductSheetProps, ProductTemplate, PropertiesTable, QuantitySelector, type QuantitySelectorClassNames, type QuantitySelectorProps, QuickAddButton, RecentlyViewed, type RecentlyViewedClassNames, type RecentlyViewedProps, RecommendationCarousel, type RecommendationCarouselClassNames, type RecommendationCarouselProps, RelatedProductsSection, RentalServiceCard, type Resource, ResourcePicker, type ResourcePickerClassNames, type ResourcePickerProps, RetailProductCard, SaleBadge, type SaleBadgeClassNames, type SaleBadgeProps, ScheduleServiceCard, SearchInput, type SearchInputClassNames, type SearchInputProps, type SearchLayoutProps, SearchPage, type SearchPageClassNames, type SearchPageProps, SearchTemplate, Section, SectionMore, type SectionMoreProps, type SectionProps, type ServiceCardLayoutProps, ServiceProductLayout, SessionMessageBanner, type SessionMessageBannerClassNames, type SessionMessageBannerProps, SignOutIcon, Skeleton, type SkeletonProps, SlotPicker, type SlotPickerClassNames, type SlotPickerProps, SoldOutOverlay, StaffPicker, type StaffPickerClassNames, type StaffPickerProps, StandardServiceCard, Status, type StatusProps, StoreNav, type StoreNavClassNames, type StoreNavProps, StoreVideo, type StoreVideoProps, SubscriptionCard, SubscriptionList, type SubscriptionListProps, SubscriptionRow, type SubscriptionRowData, type SubscriptionRowProps, SubscriptionsIcon, SubscriptionsIcon20, TagPills, TimePicker, type TimePickerClassNames, type TimePickerProps, type TimelineStep, Toast, type ToastProps, type TotalsData, TwoColumnGrid, type UseActivityStateOptions, type UseActivityStateResult, type UseAttributeDefinitionsOptions, type UseAttributeDefinitionsResult, type UseAvailableSlotsOptions, type UseAvailableSlotsResult, type UseBillingPlansOptions, type UseBillingPlansResult, type UseBookingsOptions, type UseBookingsResult, type UseBootstrapOptions, type UseBootstrapResult, type UseBundlesOptions, type UseBundlesResult, type UseCartItem, type UseCartOptions, type UseCartResult, type UseCategoriesOptions, type UseCategoriesResult, type UseChatOptions, type UseChatResult, type UseCimplifySessionOptions, type UseCimplifySessionResult, type UseCollectionOptions, type UseCollectionResult, type UseCollectionsOptions, type UseCollectionsResult, type UseDealsOptions, type UseDealsResult, type UseDeliveryFeeOptions, type UseDeliveryFeeResult, type UseFxRateOptions, type UseFxRateResult, type UseLocationsOptions, type UseLocationsResult, type UseOrderOptions, type UseOrderResult, type UseOrdersOptions, type UseOrdersResult, type UseProductAvailabilityOptions, type UseProductAvailabilityResult, type UseProductDealsOptions, type UseProductDealsResult, type UseProductOptions, type UseProductPriceInput, type UseProductPriceResult, type UseProductResult, type UseProductSchedulesOptions, type UseProductSchedulesResult, type UseProductsOnSaleOptions, type UseProductsOnSaleResult, type UseProductsOptions, type UseProductsResult, type UsePropertyFacetsOptions, type UsePropertyFacetsResult, type UseQuoteInput, type UseQuoteOptions, type UseQuoteResult, type UseRecommendationsOptions, type UseRecommendationsResult, type UseSearchOptions, type UseSearchResult, type UseServiceAvailabilityOptions, type UseServiceAvailabilityResult, type UseServicesOptions, type UseServicesResult, type UseTaxonomiesOptions, type UseTaxonomiesResult, type UseTaxonomyOptions, type UseTaxonomyPathOptions, type UseTaxonomyPathResult, type UseTaxonomyResult, type UseValidateDiscountOptions, type UseValidateDiscountResult, type UseVariantSelectorOptions, type UseVariantSelectorResult, VariantSelector, type VariantSelectorClassNames, type VariantSelectorProps, VolumePricing, type VolumePricingClassNames, type VolumePricingProps, WelcomeCard, type WelcomeCardProps, WholesaleProductCard, WholesaleProductLayout, WishlistButton, cn, roomToResource, useActivityState, useAds, useAttributeDefinitions, useAvailableSlots, useBillingPlans, useBookings, useBootstrap, useBundles, useCart, useCartDrawer, useCategories, useChat, useCheckout, useCimplify, useCimplifyClient, useCimplifySession, useCollection, useCollections, useDeals, useDeliveryFee, useElements, useElementsReady, useFxRate, useLocations, useOptionalCimplify, useOrder, useOrders, useProduct, useProductAvailability, useProductDeals, useProductPrice, useProductSchedules, useProducts, useProductsOnSale, usePropertyFacets, useQuote, useRecommendations, useSearch, useServiceAvailability, useServices, useSubscription, useSubscriptions, useTaxonomies, useTaxonomy, useTaxonomyPath, useValidateDiscount, useVariantSelector };
+export { AccommodationCard, AccountContent, type AccountContentProps, AccountDashboardPage, type AccountDashboardPageProps, AccountHero, type AccountHeroProps, AccountIdentityStrip, type AccountIdentityStripProps, AccountNav, type AccountNavProps, AccountOrderDetailPage, type AccountOrderDetailPageProps, AccountOrdersPage, type AccountOrdersPageProps, type AccountPageBaseProps, AccountShell, type AccountShellProps, AccountSidebar, type AccountSidebarProps, AccountSignedOutPrompt, type AccountSignedOutPromptProps, AccountSubscriptionDetailPage, type AccountSubscriptionDetailPageProps, AccountSubscriptionsPage, type AccountSubscriptionsPageProps, Ad, AdPosition, type AdProps, AdProvider, AdSlot, AddOnSelector, type AddOnSelectorClassNames, type AddOnSelectorProps, type AddToCartOptions, AddressElement, AuthElement, AvailabilityBadge, type AvailabilityBadgeClassNames, type AvailabilityBadgeProps, BackLink, type BackLinkProps, BillingPlanSelector, type BillingPlanSelectorClassNames, type BillingPlanSelectorProps, BookingCard, type BookingCardClassNames, type BookingCardProps, BookingList, type BookingListClassNames, type BookingListProps, BookingPage, type BookingPageClassNames, type BookingPageProps, BookingsPage, type BookingsPageClassNames, type BookingsPageProps, BoxIcon24, BundleProductCard, BundleProductLayout, BundleSelector, type BundleSelectorClassNames, type BundleSelectorProps, Button, type ButtonProps, CardImage, type CardLayoutProps, CardShell, CardVariant, type CartAddOnOptionSelection, CartDrawer, type CartDrawerProps, CartDrawerProvider, type CartLayoutProps, CartPage, type CartPageClassNames, type CartPageProps, CartSummary, type CartSummaryClassNames, type CartSummaryProps, CartTemplate, type CartVariantSelection, CatalogueCollectionLayout, type CatalogueLayoutProps, CataloguePage, type CataloguePageClassNames, type CataloguePageProps, CatalogueTemplate, CategoryFilter, type CategoryFilterClassNames, type CategoryFilterProps, CategoryGrid, type CategoryGridClassNames, type CategoryGridProps, ChatWidget, type ChatWidgetClassNames, type ChatWidgetProps, CheckIcon, CheckoutPage, type CheckoutPageClassNames, type CheckoutPageProps, CimplifyAccount, type CimplifyAccountProps, CimplifyCheckout, type CimplifyCheckoutProps, type CimplifyClientContextValue, type CimplifyClientSession, type CimplifyContextValue, CimplifyProvider, type CimplifyProviderProps, CimplifySignInButton, type CimplifySignInButtonProps, type CollectionLayoutProps, CollectionPage, type CollectionPageClassNames, type CollectionPageProps, CollectionTemplate, CompactCartLayout, CompactCatalogueLayout, CompactSearchLayout, CompactServiceCard, CompositeProductCard, CompositeProductLayout, CompositeSelector, type CompositeSelectorClassNames, type CompositeSelectorProps, ContextCard, type ContextCardProps, type ContextRow, ContinuityCard, type ContinuityCardProps, CurrencySelector, type CurrencySelectorClassNames, type CurrencySelectorProps, CustomAttributesTable, CustomerInputFields, type CustomerInputFieldsClassNames, type CustomerInputFieldsProps, DashboardIcon, DashboardIcon20, DatePicker, type DatePickerClassNames, type DatePickerProps, DateSlotPicker, type DateSlotPickerClassNames, type DateSlotPickerProps, DealBanner, type DealBannerClassNames, type DealBannerProps, DealsPage, type DealsPageClassNames, type DealsPageProps, DefaultCartLayout, DefaultCatalogueLayout, DefaultCollectionLayout, DefaultProductLayout, DefaultSearchLayout, DeliveryEstimate, type DeliveryEstimateClassNames, type DeliveryEstimateProps, DeliveryTruckIcon, DigitalProductCard, DigitalProductLayout, DiscountInput, type DiscountInputClassNames, type DiscountInputProps, ElementsProvider, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, FeaturedCollectionLayout, type FilterTabItem, FilterTabs, type FilterTabsProps, FoodProductCard, FoodProductLayout, HappeningCard, type HappeningCardProps, type HappeningPaneData, IdentityIcon, IdentityOfframp, type IdentityOfframpProps, type IdentitySummary, InventoryBadge, ItemsCard, type ItemsCardProps, LeaseServiceCard, LocationPicker, type LocationPickerClassNames, type LocationPickerProps, MediaGallery, type MediaGalleryProps, type MediaItem, MetadataStringList, MobileAccountShell, type MobileAccountShellProps, MobileBackButton, MobileMoreButton, MobileTabBar, type MobileTabBarProps, type NavItem, NextDeliveryCard, type NextDeliveryCardProps, OrderDetailHeader, type OrderDetailHeaderProps, OrderDetailMetaPipe, OrderDetailPage, type OrderDetailPageClassNames, type OrderDetailPageProps, OrderHistory, type OrderHistoryClassNames, OrderHistoryPage, type OrderHistoryPageClassNames, type OrderHistoryPageProps, type OrderHistoryProps, type OrderItemData, OrderList, type OrderListProps, OrderRow, type OrderRowData, type OrderRowProps, type OrderRowStatus, OrderSummary, type OrderSummaryClassNames, type OrderSummaryProps, OrderTimeline, type OrderTimelineProps, OrderTotals, type OrderTotalsProps, OrdersIcon, OrdersIcon20, OvenIcon, PackageIcon, PaymentElement, Price, type PriceProps, PriceRange, type PriceRangeProps, ProductCard, type ProductCardClassNames, type ProductCardProps, ProductCustomizer, type ProductCustomizerClassNames, type ProductCustomizerProps, ProductGrid, type ProductGridClassNames, type ProductGridProps, ProductImageGallery, type ProductImageGalleryProps, type ProductLayoutProps, ProductModel3D, type ProductModel3DProps, ProductPage, type ProductPageClassNames, type ProductPageProps, ProductSheet, type ProductSheetClassNames, type ProductSheetProps, ProductTemplate, PropertiesTable, QuantitySelector, type QuantitySelectorClassNames, type QuantitySelectorProps, QuickAddButton, RecentlyViewed, type RecentlyViewedClassNames, type RecentlyViewedProps, RecommendationCarousel, type RecommendationCarouselClassNames, type RecommendationCarouselProps, RelatedProductsSection, RentalServiceCard, type Resource, ResourcePicker, type ResourcePickerClassNames, type ResourcePickerProps, RetailProductCard, RichText, type RichTextProps, SaleBadge, type SaleBadgeClassNames, type SaleBadgeProps, ScheduleServiceCard, SearchInput, type SearchInputClassNames, type SearchInputProps, type SearchLayoutProps, SearchPage, type SearchPageClassNames, type SearchPageProps, SearchTemplate, Section, SectionMore, type SectionMoreProps, type SectionProps, type ServiceCardLayoutProps, ServiceProductLayout, SessionMessageBanner, type SessionMessageBannerClassNames, type SessionMessageBannerProps, SignOutIcon, Skeleton, type SkeletonProps, SlotPicker, type SlotPickerClassNames, type SlotPickerProps, SoldOutOverlay, StaffPicker, type StaffPickerClassNames, type StaffPickerProps, StandardServiceCard, Status, type StatusProps, StoreNav, type StoreNavClassNames, type StoreNavProps, StoreVideo, type StoreVideoProps, SubscriptionCard, SubscriptionList, type SubscriptionListProps, SubscriptionRow, type SubscriptionRowData, type SubscriptionRowProps, SubscriptionsIcon, SubscriptionsIcon20, TagPills, TimePicker, type TimePickerClassNames, type TimePickerProps, type TimelineStep, Toast, type ToastProps, type TotalsData, TwoColumnGrid, type UseActivityStateOptions, type UseActivityStateResult, type UseAttributeDefinitionsOptions, type UseAttributeDefinitionsResult, type UseAvailableSlotsOptions, type UseAvailableSlotsResult, type UseBillingPlansOptions, type UseBillingPlansResult, type UseBookingsOptions, type UseBookingsResult, type UseBootstrapOptions, type UseBootstrapResult, type UseBundlesOptions, type UseBundlesResult, type UseCartItem, type UseCartOptions, type UseCartResult, type UseCategoriesOptions, type UseCategoriesResult, type UseChatOptions, type UseChatResult, type UseCimplifySessionOptions, type UseCimplifySessionResult, type UseCollectionOptions, type UseCollectionResult, type UseCollectionsOptions, type UseCollectionsResult, type UseDealsOptions, type UseDealsResult, type UseDeliveryFeeOptions, type UseDeliveryFeeResult, type UseFxRateOptions, type UseFxRateResult, type UseLocationsOptions, type UseLocationsResult, type UseOrderOptions, type UseOrderResult, type UseOrdersOptions, type UseOrdersResult, type UseProductAvailabilityOptions, type UseProductAvailabilityResult, type UseProductDealsOptions, type UseProductDealsResult, type UseProductOptions, type UseProductPriceInput, type UseProductPriceResult, type UseProductResult, type UseProductSchedulesOptions, type UseProductSchedulesResult, type UseProductsOnSaleOptions, type UseProductsOnSaleResult, type UseProductsOptions, type UseProductsResult, type UsePropertyFacetsOptions, type UsePropertyFacetsResult, type UseQuoteInput, type UseQuoteOptions, type UseQuoteResult, type UseRecommendationsOptions, type UseRecommendationsResult, type UseSearchOptions, type UseSearchResult, type UseServiceAvailabilityOptions, type UseServiceAvailabilityResult, type UseServicesOptions, type UseServicesResult, type UseTaxonomiesOptions, type UseTaxonomiesResult, type UseTaxonomyOptions, type UseTaxonomyPathOptions, type UseTaxonomyPathResult, type UseTaxonomyResult, type UseValidateDiscountOptions, type UseValidateDiscountResult, type UseVariantSelectorOptions, type UseVariantSelectorResult, VariantSelector, type VariantSelectorClassNames, type VariantSelectorProps, VolumePricing, type VolumePricingClassNames, type VolumePricingProps, WelcomeCard, type WelcomeCardProps, WholesaleProductCard, WholesaleProductLayout, WishlistButton, cn, roomToResource, sanitizeRichTextHtml, useActivityState, useAds, useAttributeDefinitions, useAvailableSlots, useBillingPlans, useBookings, useBootstrap, useBundles, useCart, useCartDrawer, useCategories, useChat, useCheckout, useCimplify, useCimplifyClient, useCimplifySession, useCollection, useCollections, useDeals, useDeliveryFee, useElements, useElementsReady, useFxRate, useLocations, useOptionalCimplify, useOrder, useOrders, useProduct, useProductAvailability, useProductDeals, useProductPrice, useProductSchedules, useProducts, useProductsOnSale, usePropertyFacets, useQuote, useRecommendations, useSearch, useServiceAvailability, useServices, useSubscription, useSubscriptions, useTaxonomies, useTaxonomy, useTaxonomyPath, useValidateDiscount, useVariantSelector };

package/dist/react.d.ts

@@ -1873,6 +1873,24 @@ interface ProductCardProps {
  */
 declare function ProductCard({ product, displayMode, variant, cards, href, renderModal, renderImage, renderLink, onQuickAdd, children, aspectRatio, className, classNames, }: ProductCardProps): React$1.ReactElement;
 
+/**
+ * Sanitize merchant-authored HTML for safe rendering. Runs identically on the
+ * Cloudflare Workers edge (SSR) and in the browser — no DOM dependency.
+ */
+declare function sanitizeRichTextHtml(html: string): string;
+interface RichTextProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "dangerouslySetInnerHTML" | "children"> {
+    /** Merchant-authored HTML (e.g. a product description). Sanitized before render. */
+    html?: string | null;
+}
+/**
+ * RichText — renders sanitized merchant-authored HTML with theme-aware prose
+ * styling. Headings, lists, bold, italics, links, quotes and code all display
+ * correctly; scripts and event handlers are stripped.
+ *
+ * Returns `null` when there's no renderable content.
+ */
+declare function RichText({ html, className, ...rest }: RichTextProps): React$1.ReactElement | null;
+
 interface ProductGridClassNames {
     root?: string;
     item?: string;
@@ -3425,4 +3443,4 @@ interface ChatWidgetProps {
 }
 declare function ChatWidget({ client: clientProp, businessName, greeting, subtitle, starters, placeholder, position, defaultOpen, pollInterval, className, classNames, }: ChatWidgetProps): react_jsx_runtime.JSX.Element;
 
-export { AccommodationCard, AccountContent, type AccountContentProps, AccountDashboardPage, type AccountDashboardPageProps, AccountHero, type AccountHeroProps, AccountIdentityStrip, type AccountIdentityStripProps, AccountNav, type AccountNavProps, AccountOrderDetailPage, type AccountOrderDetailPageProps, AccountOrdersPage, type AccountOrdersPageProps, type AccountPageBaseProps, AccountShell, type AccountShellProps, AccountSidebar, type AccountSidebarProps, AccountSignedOutPrompt, type AccountSignedOutPromptProps, AccountSubscriptionDetailPage, type AccountSubscriptionDetailPageProps, AccountSubscriptionsPage, type AccountSubscriptionsPageProps, Ad, AdPosition, type AdProps, AdProvider, AdSlot, AddOnSelector, type AddOnSelectorClassNames, type AddOnSelectorProps, type AddToCartOptions, AddressElement, AuthElement, AvailabilityBadge, type AvailabilityBadgeClassNames, type AvailabilityBadgeProps, BackLink, type BackLinkProps, BillingPlanSelector, type BillingPlanSelectorClassNames, type BillingPlanSelectorProps, BookingCard, type BookingCardClassNames, type BookingCardProps, BookingList, type BookingListClassNames, type BookingListProps, BookingPage, type BookingPageClassNames, type BookingPageProps, BookingsPage, type BookingsPageClassNames, type BookingsPageProps, BoxIcon24, BundleProductCard, BundleProductLayout, BundleSelector, type BundleSelectorClassNames, type BundleSelectorProps, Button, type ButtonProps, CardImage, type CardLayoutProps, CardShell, CardVariant, type CartAddOnOptionSelection, CartDrawer, type CartDrawerProps, CartDrawerProvider, type CartLayoutProps, CartPage, type CartPageClassNames, type CartPageProps, CartSummary, type CartSummaryClassNames, type CartSummaryProps, CartTemplate, type CartVariantSelection, CatalogueCollectionLayout, type CatalogueLayoutProps, CataloguePage, type CataloguePageClassNames, type CataloguePageProps, CatalogueTemplate, CategoryFilter, type CategoryFilterClassNames, type CategoryFilterProps, CategoryGrid, type CategoryGridClassNames, type CategoryGridProps, ChatWidget, type ChatWidgetClassNames, type ChatWidgetProps, CheckIcon, CheckoutPage, type CheckoutPageClassNames, type CheckoutPageProps, CimplifyAccount, type CimplifyAccountProps, CimplifyCheckout, type CimplifyCheckoutProps, type CimplifyClientContextValue, type CimplifyClientSession, type CimplifyContextValue, CimplifyProvider, type CimplifyProviderProps, CimplifySignInButton, type CimplifySignInButtonProps, type CollectionLayoutProps, CollectionPage, type CollectionPageClassNames, type CollectionPageProps, CollectionTemplate, CompactCartLayout, CompactCatalogueLayout, CompactSearchLayout, CompactServiceCard, CompositeProductCard, CompositeProductLayout, CompositeSelector, type CompositeSelectorClassNames, type CompositeSelectorProps, ContextCard, type ContextCardProps, type ContextRow, ContinuityCard, type ContinuityCardProps, CurrencySelector, type CurrencySelectorClassNames, type CurrencySelectorProps, CustomAttributesTable, CustomerInputFields, type CustomerInputFieldsClassNames, type CustomerInputFieldsProps, DashboardIcon, DashboardIcon20, DatePicker, type DatePickerClassNames, type DatePickerProps, DateSlotPicker, type DateSlotPickerClassNames, type DateSlotPickerProps, DealBanner, type DealBannerClassNames, type DealBannerProps, DealsPage, type DealsPageClassNames, type DealsPageProps, DefaultCartLayout, DefaultCatalogueLayout, DefaultCollectionLayout, DefaultProductLayout, DefaultSearchLayout, DeliveryEstimate, type DeliveryEstimateClassNames, type DeliveryEstimateProps, DeliveryTruckIcon, DigitalProductCard, DigitalProductLayout, DiscountInput, type DiscountInputClassNames, type DiscountInputProps, ElementsProvider, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, FeaturedCollectionLayout, type FilterTabItem, FilterTabs, type FilterTabsProps, FoodProductCard, FoodProductLayout, HappeningCard, type HappeningCardProps, type HappeningPaneData, IdentityIcon, IdentityOfframp, type IdentityOfframpProps, type IdentitySummary, InventoryBadge, ItemsCard, type ItemsCardProps, LeaseServiceCard, LocationPicker, type LocationPickerClassNames, type LocationPickerProps, MediaGallery, type MediaGalleryProps, type MediaItem, MetadataStringList, MobileAccountShell, type MobileAccountShellProps, MobileBackButton, MobileMoreButton, MobileTabBar, type MobileTabBarProps, type NavItem, NextDeliveryCard, type NextDeliveryCardProps, OrderDetailHeader, type OrderDetailHeaderProps, OrderDetailMetaPipe, OrderDetailPage, type OrderDetailPageClassNames, type OrderDetailPageProps, OrderHistory, type OrderHistoryClassNames, OrderHistoryPage, type OrderHistoryPageClassNames, type OrderHistoryPageProps, type OrderHistoryProps, type OrderItemData, OrderList, type OrderListProps, OrderRow, type OrderRowData, type OrderRowProps, type OrderRowStatus, OrderSummary, type OrderSummaryClassNames, type OrderSummaryProps, OrderTimeline, type OrderTimelineProps, OrderTotals, type OrderTotalsProps, OrdersIcon, OrdersIcon20, OvenIcon, PackageIcon, PaymentElement, Price, type PriceProps, PriceRange, type PriceRangeProps, ProductCard, type ProductCardClassNames, type ProductCardProps, ProductCustomizer, type ProductCustomizerClassNames, type ProductCustomizerProps, ProductGrid, type ProductGridClassNames, type ProductGridProps, ProductImageGallery, type ProductImageGalleryProps, type ProductLayoutProps, ProductModel3D, type ProductModel3DProps, ProductPage, type ProductPageClassNames, type ProductPageProps, ProductSheet, type ProductSheetClassNames, type ProductSheetProps, ProductTemplate, PropertiesTable, QuantitySelector, type QuantitySelectorClassNames, type QuantitySelectorProps, QuickAddButton, RecentlyViewed, type RecentlyViewedClassNames, type RecentlyViewedProps, RecommendationCarousel, type RecommendationCarouselClassNames, type RecommendationCarouselProps, RelatedProductsSection, RentalServiceCard, type Resource, ResourcePicker, type ResourcePickerClassNames, type ResourcePickerProps, RetailProductCard, SaleBadge, type SaleBadgeClassNames, type SaleBadgeProps, ScheduleServiceCard, SearchInput, type SearchInputClassNames, type SearchInputProps, type SearchLayoutProps, SearchPage, type SearchPageClassNames, type SearchPageProps, SearchTemplate, Section, SectionMore, type SectionMoreProps, type SectionProps, type ServiceCardLayoutProps, ServiceProductLayout, SessionMessageBanner, type SessionMessageBannerClassNames, type SessionMessageBannerProps, SignOutIcon, Skeleton, type SkeletonProps, SlotPicker, type SlotPickerClassNames, type SlotPickerProps, SoldOutOverlay, StaffPicker, type StaffPickerClassNames, type StaffPickerProps, StandardServiceCard, Status, type StatusProps, StoreNav, type StoreNavClassNames, type StoreNavProps, StoreVideo, type StoreVideoProps, SubscriptionCard, SubscriptionList, type SubscriptionListProps, SubscriptionRow, type SubscriptionRowData, type SubscriptionRowProps, SubscriptionsIcon, SubscriptionsIcon20, TagPills, TimePicker, type TimePickerClassNames, type TimePickerProps, type TimelineStep, Toast, type ToastProps, type TotalsData, TwoColumnGrid, type UseActivityStateOptions, type UseActivityStateResult, type UseAttributeDefinitionsOptions, type UseAttributeDefinitionsResult, type UseAvailableSlotsOptions, type UseAvailableSlotsResult, type UseBillingPlansOptions, type UseBillingPlansResult, type UseBookingsOptions, type UseBookingsResult, type UseBootstrapOptions, type UseBootstrapResult, type UseBundlesOptions, type UseBundlesResult, type UseCartItem, type UseCartOptions, type UseCartResult, type UseCategoriesOptions, type UseCategoriesResult, type UseChatOptions, type UseChatResult, type UseCimplifySessionOptions, type UseCimplifySessionResult, type UseCollectionOptions, type UseCollectionResult, type UseCollectionsOptions, type UseCollectionsResult, type UseDealsOptions, type UseDealsResult, type UseDeliveryFeeOptions, type UseDeliveryFeeResult, type UseFxRateOptions, type UseFxRateResult, type UseLocationsOptions, type UseLocationsResult, type UseOrderOptions, type UseOrderResult, type UseOrdersOptions, type UseOrdersResult, type UseProductAvailabilityOptions, type UseProductAvailabilityResult, type UseProductDealsOptions, type UseProductDealsResult, type UseProductOptions, type UseProductPriceInput, type UseProductPriceResult, type UseProductResult, type UseProductSchedulesOptions, type UseProductSchedulesResult, type UseProductsOnSaleOptions, type UseProductsOnSaleResult, type UseProductsOptions, type UseProductsResult, type UsePropertyFacetsOptions, type UsePropertyFacetsResult, type UseQuoteInput, type UseQuoteOptions, type UseQuoteResult, type UseRecommendationsOptions, type UseRecommendationsResult, type UseSearchOptions, type UseSearchResult, type UseServiceAvailabilityOptions, type UseServiceAvailabilityResult, type UseServicesOptions, type UseServicesResult, type UseTaxonomiesOptions, type UseTaxonomiesResult, type UseTaxonomyOptions, type UseTaxonomyPathOptions, type UseTaxonomyPathResult, type UseTaxonomyResult, type UseValidateDiscountOptions, type UseValidateDiscountResult, type UseVariantSelectorOptions, type UseVariantSelectorResult, VariantSelector, type VariantSelectorClassNames, type VariantSelectorProps, VolumePricing, type VolumePricingClassNames, type VolumePricingProps, WelcomeCard, type WelcomeCardProps, WholesaleProductCard, WholesaleProductLayout, WishlistButton, cn, roomToResource, useActivityState, useAds, useAttributeDefinitions, useAvailableSlots, useBillingPlans, useBookings, useBootstrap, useBundles, useCart, useCartDrawer, useCategories, useChat, useCheckout, useCimplify, useCimplifyClient, useCimplifySession, useCollection, useCollections, useDeals, useDeliveryFee, useElements, useElementsReady, useFxRate, useLocations, useOptionalCimplify, useOrder, useOrders, useProduct, useProductAvailability, useProductDeals, useProductPrice, useProductSchedules, useProducts, useProductsOnSale, usePropertyFacets, useQuote, useRecommendations, useSearch, useServiceAvailability, useServices, useSubscription, useSubscriptions, useTaxonomies, useTaxonomy, useTaxonomyPath, useValidateDiscount, useVariantSelector };
+export { AccommodationCard, AccountContent, type AccountContentProps, AccountDashboardPage, type AccountDashboardPageProps, AccountHero, type AccountHeroProps, AccountIdentityStrip, type AccountIdentityStripProps, AccountNav, type AccountNavProps, AccountOrderDetailPage, type AccountOrderDetailPageProps, AccountOrdersPage, type AccountOrdersPageProps, type AccountPageBaseProps, AccountShell, type AccountShellProps, AccountSidebar, type AccountSidebarProps, AccountSignedOutPrompt, type AccountSignedOutPromptProps, AccountSubscriptionDetailPage, type AccountSubscriptionDetailPageProps, AccountSubscriptionsPage, type AccountSubscriptionsPageProps, Ad, AdPosition, type AdProps, AdProvider, AdSlot, AddOnSelector, type AddOnSelectorClassNames, type AddOnSelectorProps, type AddToCartOptions, AddressElement, AuthElement, AvailabilityBadge, type AvailabilityBadgeClassNames, type AvailabilityBadgeProps, BackLink, type BackLinkProps, BillingPlanSelector, type BillingPlanSelectorClassNames, type BillingPlanSelectorProps, BookingCard, type BookingCardClassNames, type BookingCardProps, BookingList, type BookingListClassNames, type BookingListProps, BookingPage, type BookingPageClassNames, type BookingPageProps, BookingsPage, type BookingsPageClassNames, type BookingsPageProps, BoxIcon24, BundleProductCard, BundleProductLayout, BundleSelector, type BundleSelectorClassNames, type BundleSelectorProps, Button, type ButtonProps, CardImage, type CardLayoutProps, CardShell, CardVariant, type CartAddOnOptionSelection, CartDrawer, type CartDrawerProps, CartDrawerProvider, type CartLayoutProps, CartPage, type CartPageClassNames, type CartPageProps, CartSummary, type CartSummaryClassNames, type CartSummaryProps, CartTemplate, type CartVariantSelection, CatalogueCollectionLayout, type CatalogueLayoutProps, CataloguePage, type CataloguePageClassNames, type CataloguePageProps, CatalogueTemplate, CategoryFilter, type CategoryFilterClassNames, type CategoryFilterProps, CategoryGrid, type CategoryGridClassNames, type CategoryGridProps, ChatWidget, type ChatWidgetClassNames, type ChatWidgetProps, CheckIcon, CheckoutPage, type CheckoutPageClassNames, type CheckoutPageProps, CimplifyAccount, type CimplifyAccountProps, CimplifyCheckout, type CimplifyCheckoutProps, type CimplifyClientContextValue, type CimplifyClientSession, type CimplifyContextValue, CimplifyProvider, type CimplifyProviderProps, CimplifySignInButton, type CimplifySignInButtonProps, type CollectionLayoutProps, CollectionPage, type CollectionPageClassNames, type CollectionPageProps, CollectionTemplate, CompactCartLayout, CompactCatalogueLayout, CompactSearchLayout, CompactServiceCard, CompositeProductCard, CompositeProductLayout, CompositeSelector, type CompositeSelectorClassNames, type CompositeSelectorProps, ContextCard, type ContextCardProps, type ContextRow, ContinuityCard, type ContinuityCardProps, CurrencySelector, type CurrencySelectorClassNames, type CurrencySelectorProps, CustomAttributesTable, CustomerInputFields, type CustomerInputFieldsClassNames, type CustomerInputFieldsProps, DashboardIcon, DashboardIcon20, DatePicker, type DatePickerClassNames, type DatePickerProps, DateSlotPicker, type DateSlotPickerClassNames, type DateSlotPickerProps, DealBanner, type DealBannerClassNames, type DealBannerProps, DealsPage, type DealsPageClassNames, type DealsPageProps, DefaultCartLayout, DefaultCatalogueLayout, DefaultCollectionLayout, DefaultProductLayout, DefaultSearchLayout, DeliveryEstimate, type DeliveryEstimateClassNames, type DeliveryEstimateProps, DeliveryTruckIcon, DigitalProductCard, DigitalProductLayout, DiscountInput, type DiscountInputClassNames, type DiscountInputProps, ElementsProvider, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, FeaturedCollectionLayout, type FilterTabItem, FilterTabs, type FilterTabsProps, FoodProductCard, FoodProductLayout, HappeningCard, type HappeningCardProps, type HappeningPaneData, IdentityIcon, IdentityOfframp, type IdentityOfframpProps, type IdentitySummary, InventoryBadge, ItemsCard, type ItemsCardProps, LeaseServiceCard, LocationPicker, type LocationPickerClassNames, type LocationPickerProps, MediaGallery, type MediaGalleryProps, type MediaItem, MetadataStringList, MobileAccountShell, type MobileAccountShellProps, MobileBackButton, MobileMoreButton, MobileTabBar, type MobileTabBarProps, type NavItem, NextDeliveryCard, type NextDeliveryCardProps, OrderDetailHeader, type OrderDetailHeaderProps, OrderDetailMetaPipe, OrderDetailPage, type OrderDetailPageClassNames, type OrderDetailPageProps, OrderHistory, type OrderHistoryClassNames, OrderHistoryPage, type OrderHistoryPageClassNames, type OrderHistoryPageProps, type OrderHistoryProps, type OrderItemData, OrderList, type OrderListProps, OrderRow, type OrderRowData, type OrderRowProps, type OrderRowStatus, OrderSummary, type OrderSummaryClassNames, type OrderSummaryProps, OrderTimeline, type OrderTimelineProps, OrderTotals, type OrderTotalsProps, OrdersIcon, OrdersIcon20, OvenIcon, PackageIcon, PaymentElement, Price, type PriceProps, PriceRange, type PriceRangeProps, ProductCard, type ProductCardClassNames, type ProductCardProps, ProductCustomizer, type ProductCustomizerClassNames, type ProductCustomizerProps, ProductGrid, type ProductGridClassNames, type ProductGridProps, ProductImageGallery, type ProductImageGalleryProps, type ProductLayoutProps, ProductModel3D, type ProductModel3DProps, ProductPage, type ProductPageClassNames, type ProductPageProps, ProductSheet, type ProductSheetClassNames, type ProductSheetProps, ProductTemplate, PropertiesTable, QuantitySelector, type QuantitySelectorClassNames, type QuantitySelectorProps, QuickAddButton, RecentlyViewed, type RecentlyViewedClassNames, type RecentlyViewedProps, RecommendationCarousel, type RecommendationCarouselClassNames, type RecommendationCarouselProps, RelatedProductsSection, RentalServiceCard, type Resource, ResourcePicker, type ResourcePickerClassNames, type ResourcePickerProps, RetailProductCard, RichText, type RichTextProps, SaleBadge, type SaleBadgeClassNames, type SaleBadgeProps, ScheduleServiceCard, SearchInput, type SearchInputClassNames, type SearchInputProps, type SearchLayoutProps, SearchPage, type SearchPageClassNames, type SearchPageProps, SearchTemplate, Section, SectionMore, type SectionMoreProps, type SectionProps, type ServiceCardLayoutProps, ServiceProductLayout, SessionMessageBanner, type SessionMessageBannerClassNames, type SessionMessageBannerProps, SignOutIcon, Skeleton, type SkeletonProps, SlotPicker, type SlotPickerClassNames, type SlotPickerProps, SoldOutOverlay, StaffPicker, type StaffPickerClassNames, type StaffPickerProps, StandardServiceCard, Status, type StatusProps, StoreNav, type StoreNavClassNames, type StoreNavProps, StoreVideo, type StoreVideoProps, SubscriptionCard, SubscriptionList, type SubscriptionListProps, SubscriptionRow, type SubscriptionRowData, type SubscriptionRowProps, SubscriptionsIcon, SubscriptionsIcon20, TagPills, TimePicker, type TimePickerClassNames, type TimePickerProps, type TimelineStep, Toast, type ToastProps, type TotalsData, TwoColumnGrid, type UseActivityStateOptions, type UseActivityStateResult, type UseAttributeDefinitionsOptions, type UseAttributeDefinitionsResult, type UseAvailableSlotsOptions, type UseAvailableSlotsResult, type UseBillingPlansOptions, type UseBillingPlansResult, type UseBookingsOptions, type UseBookingsResult, type UseBootstrapOptions, type UseBootstrapResult, type UseBundlesOptions, type UseBundlesResult, type UseCartItem, type UseCartOptions, type UseCartResult, type UseCategoriesOptions, type UseCategoriesResult, type UseChatOptions, type UseChatResult, type UseCimplifySessionOptions, type UseCimplifySessionResult, type UseCollectionOptions, type UseCollectionResult, type UseCollectionsOptions, type UseCollectionsResult, type UseDealsOptions, type UseDealsResult, type UseDeliveryFeeOptions, type UseDeliveryFeeResult, type UseFxRateOptions, type UseFxRateResult, type UseLocationsOptions, type UseLocationsResult, type UseOrderOptions, type UseOrderResult, type UseOrdersOptions, type UseOrdersResult, type UseProductAvailabilityOptions, type UseProductAvailabilityResult, type UseProductDealsOptions, type UseProductDealsResult, type UseProductOptions, type UseProductPriceInput, type UseProductPriceResult, type UseProductResult, type UseProductSchedulesOptions, type UseProductSchedulesResult, type UseProductsOnSaleOptions, type UseProductsOnSaleResult, type UseProductsOptions, type UseProductsResult, type UsePropertyFacetsOptions, type UsePropertyFacetsResult, type UseQuoteInput, type UseQuoteOptions, type UseQuoteResult, type UseRecommendationsOptions, type UseRecommendationsResult, type UseSearchOptions, type UseSearchResult, type UseServiceAvailabilityOptions, type UseServiceAvailabilityResult, type UseServicesOptions, type UseServicesResult, type UseTaxonomiesOptions, type UseTaxonomiesResult, type UseTaxonomyOptions, type UseTaxonomyPathOptions, type UseTaxonomyPathResult, type UseTaxonomyResult, type UseValidateDiscountOptions, type UseValidateDiscountResult, type UseVariantSelectorOptions, type UseVariantSelectorResult, VariantSelector, type VariantSelectorClassNames, type VariantSelectorProps, VolumePricing, type VolumePricingClassNames, type VolumePricingProps, WelcomeCard, type WelcomeCardProps, WholesaleProductCard, WholesaleProductLayout, WishlistButton, cn, roomToResource, sanitizeRichTextHtml, useActivityState, useAds, useAttributeDefinitions, useAvailableSlots, useBillingPlans, useBookings, useBootstrap, useBundles, useCart, useCartDrawer, useCategories, useChat, useCheckout, useCimplify, useCimplifyClient, useCimplifySession, useCollection, useCollections, useDeals, useDeliveryFee, useElements, useElementsReady, useFxRate, useLocations, useOptionalCimplify, useOrder, useOrders, useProduct, useProductAvailability, useProductDeals, useProductPrice, useProductSchedules, useProducts, useProductsOnSale, usePropertyFacets, useQuote, useRecommendations, useSearch, useServiceAvailability, useServices, useSubscription, useSubscriptions, useTaxonomies, useTaxonomy, useTaxonomyPath, useValidateDiscount, useVariantSelector };

package/dist/react.js

@@ -21,6 +21,7 @@ var popover = require('@base-ui/react/popover');
 var reactDayPicker = require('react-day-picker');
 var dateFns = require('date-fns');
 var tabs = require('@base-ui/react/tabs');
+var xss = require('xss');
 var dialog = require('@base-ui/react/dialog');
 var field = require('@base-ui/react/field');
 var input = require('@base-ui/react/input');
@@ -9239,6 +9240,85 @@ function SaleBadge({
     }
   );
 }
+var RICH_TEXT_WHITELIST = {
+  p: [],
+  br: [],
+  strong: [],
+  b: [],
+  em: [],
+  i: [],
+  u: [],
+  s: [],
+  strike: [],
+  del: [],
+  h1: [],
+  h2: [],
+  h3: [],
+  h4: [],
+  h5: [],
+  h6: [],
+  ul: [],
+  ol: ["start", "type"],
+  li: [],
+  blockquote: [],
+  code: [],
+  pre: [],
+  hr: [],
+  span: [],
+  a: ["href", "title", "target", "rel"],
+  img: ["src", "alt", "title", "width", "height"]
+};
+var FILTER = new xss.FilterXSS({
+  whiteList: RICH_TEXT_WHITELIST,
+  // Drop unknown tags but keep their text content (e.g. a stray <font>Foo</font>
+  // becomes "Foo" rather than vanishing).
+  stripIgnoreTag: true,
+  // Discard the *contents* of these entirely — script/style bodies are never text.
+  stripIgnoreTagBody: ["script", "style"],
+  allowCommentTag: false
+});
+function sanitizeRichTextHtml(html) {
+  return FILTER.process(html);
+}
+var RICH_TEXT_PROSE = cn(
+  "text-muted-foreground leading-relaxed",
+  "[&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
+  "[&_p]:my-3",
+  "[&_h1]:mt-6 [&_h1]:mb-2 [&_h1]:text-xl [&_h1]:font-semibold [&_h1]:leading-snug [&_h1]:text-foreground",
+  "[&_h2]:mt-5 [&_h2]:mb-2 [&_h2]:text-lg [&_h2]:font-semibold [&_h2]:leading-snug [&_h2]:text-foreground",
+  "[&_h3]:mt-4 [&_h3]:mb-1.5 [&_h3]:text-base [&_h3]:font-semibold [&_h3]:text-foreground",
+  "[&_h4]:mt-4 [&_h4]:mb-1.5 [&_h4]:text-sm [&_h4]:font-semibold [&_h4]:text-foreground",
+  "[&_h5]:mt-3 [&_h5]:mb-1 [&_h5]:font-semibold [&_h5]:text-foreground",
+  "[&_h6]:mt-3 [&_h6]:mb-1 [&_h6]:font-semibold [&_h6]:text-foreground",
+  "[&_strong]:font-semibold [&_strong]:text-foreground [&_b]:font-semibold [&_b]:text-foreground",
+  "[&_em]:italic [&_i]:italic",
+  "[&_u]:underline [&_s]:line-through [&_del]:line-through",
+  "[&_a]:font-medium [&_a]:text-primary [&_a]:underline [&_a]:underline-offset-2",
+  "[&_ul]:my-3 [&_ul]:list-disc [&_ul]:pl-5 [&_ul]:space-y-1",
+  "[&_ol]:my-3 [&_ol]:list-decimal [&_ol]:pl-5 [&_ol]:space-y-1",
+  "[&_li]:pl-1 [&_li>p]:my-0 [&_ul_ul]:my-1 [&_ol_ol]:my-1 [&_ul_ul]:list-[circle]",
+  "[&_blockquote]:my-3 [&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-4 [&_blockquote]:italic",
+  "[&_code]:rounded [&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-[0.85em]",
+  "[&_pre]:my-3 [&_pre]:overflow-x-auto [&_pre]:rounded-md [&_pre]:bg-muted [&_pre]:p-3 [&_pre]:text-[0.85em]",
+  "[&_pre>code]:bg-transparent [&_pre>code]:p-0",
+  "[&_hr]:my-4 [&_hr]:border-border",
+  "[&_img]:my-3 [&_img]:h-auto [&_img]:max-w-full [&_img]:rounded-md"
+);
+function RichText({ html, className, ...rest }) {
+  const clean = React12.useMemo(() => html ? sanitizeRichTextHtml(html) : "", [html]);
+  if (!clean) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-cimplify-rich-text": true,
+      className: cn(RICH_TEXT_PROSE, className),
+      dangerouslySetInnerHTML: { __html: clean },
+      ...rest
+    }
+  );
+}
 function isProductWithDetails(product) {
   return "variants" in product;
 }
@@ -9374,12 +9454,12 @@ function ProductSheet({
             }
           )
         ] }),
-        fullProduct.description && /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
+        /* @__PURE__ */ jsxRuntime.jsx(
+          RichText,
           {
+            html: fullProduct.description,
             "data-cimplify-product-sheet-description": true,
-            className: cn("text-sm leading-relaxed text-muted-foreground [&_p]:m-0 [&_p+p]:mt-2", classNames?.description),
-            dangerouslySetInnerHTML: { __html: fullProduct.description }
+            className: cn("text-sm", classNames?.description)
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -12657,7 +12737,7 @@ function DefaultProductLayout({
             ] })
           ] }) : /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price, className: "text-2xl font-semibold" }) }),
           /* @__PURE__ */ jsxRuntime.jsx(InventoryBadge, { product }),
-          product.description && /* @__PURE__ */ jsxRuntime.jsx("p", { "data-cimplify-product-layout-description": true, className: "text-muted-foreground leading-relaxed", children: product.description }),
+          /* @__PURE__ */ jsxRuntime.jsx(RichText, { html: product.description, "data-cimplify-product-layout-description": true }),
           hasPhysicalDetails && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-product-layout-details": true, className: "space-y-1 text-sm text-muted-foreground", children: [
             product.sku && /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
               "SKU: ",
@@ -12754,7 +12834,7 @@ function FoodProductLayout({
               " calories"
             ] })
           ] }),
-          product.description && /* @__PURE__ */ jsxRuntime.jsx("p", { "data-cimplify-product-layout-description": true, className: "text-muted-foreground leading-relaxed", children: product.description }),
+          /* @__PURE__ */ jsxRuntime.jsx(RichText, { html: product.description, "data-cimplify-product-layout-description": true }),
           (ingredients.length > 0 || pairings.length > 0) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid sm:grid-cols-2 gap-4", children: [
             /* @__PURE__ */ jsxRuntime.jsx(MetadataStringList, { items: ingredients, label: "Key Ingredients" }),
             /* @__PURE__ */ jsxRuntime.jsx(MetadataStringList, { items: pairings, label: "Pairings" })
@@ -12819,7 +12899,7 @@ function WholesaleProductLayout({
               " units"
             ] })
           ] }),
-          product.description && /* @__PURE__ */ jsxRuntime.jsx("p", { "data-cimplify-product-layout-description": true, className: "text-muted-foreground leading-relaxed", children: product.description }),
+          /* @__PURE__ */ jsxRuntime.jsx(RichText, { html: product.description, "data-cimplify-product-layout-description": true }),
           hasTiers && /* @__PURE__ */ jsxRuntime.jsx(
             VolumePricing,
             {
@@ -12908,7 +12988,7 @@ function ServiceProductLayout({
               " min buffer"
             ] })
           ] }),
-          product.description && /* @__PURE__ */ jsxRuntime.jsx("p", { "data-cimplify-product-layout-description": true, className: "text-muted-foreground leading-relaxed", children: product.description }),
+          /* @__PURE__ */ jsxRuntime.jsx(RichText, { html: product.description, "data-cimplify-product-layout-description": true }),
           (product.requires_specific_staff || product.requires_specific_resource) && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-product-layout-requirements": true, className: "text-sm text-muted-foreground space-y-1", children: [
             product.requires_specific_staff && /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Staff selection required" }),
             product.requires_specific_resource && /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Resource selection required" })
@@ -12997,7 +13077,7 @@ function DigitalProductLayout({
             /* @__PURE__ */ jsxRuntime.jsx("h1", { "data-cimplify-product-layout-name": true, className: "text-3xl lg:text-4xl font-extrabold tracking-tight", children: product.name }),
             /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price, className: "text-2xl font-bold mt-2 block" })
           ] }),
-          product.description && /* @__PURE__ */ jsxRuntime.jsx("p", { "data-cimplify-product-layout-description": true, className: "text-muted-foreground leading-relaxed", children: product.description }),
+          /* @__PURE__ */ jsxRuntime.jsx(RichText, { html: product.description, "data-cimplify-product-layout-description": true }),
           isDownload && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-product-layout-delivery": true, className: "flex items-center gap-3 px-4 py-3 bg-muted rounded-lg", children: [
             /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-5 h-5 text-primary shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 10V3L4 14h7v7l9-11h-7z" }) }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
@@ -13136,7 +13216,7 @@ function BundleProductLayout({
               onSale && baseTotal > 0 && /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: baseTotal, className: "text-lg text-muted-foreground line-through" })
             ] })
           ] }),
-          product.description && /* @__PURE__ */ jsxRuntime.jsx("p", { "data-cimplify-product-layout-description": true, className: "text-muted-foreground leading-relaxed", children: product.description }),
+          /* @__PURE__ */ jsxRuntime.jsx(RichText, { html: product.description, "data-cimplify-product-layout-description": true }),
           components.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-bundle-components": true, className: "space-y-3", children: [
             /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold", children: "Included in this bundle" }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "divide-y divide-border border border-border rounded-lg overflow-hidden", children: components.map((component) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 p-3", children: [
@@ -13211,7 +13291,7 @@ function CompositeProductLayout({
               /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price, className: "font-semibold text-foreground" })
             ] })
           ] }),
-          product.description && /* @__PURE__ */ jsxRuntime.jsx("p", { "data-cimplify-product-layout-description": true, className: "text-muted-foreground leading-relaxed", children: product.description }),
+          /* @__PURE__ */ jsxRuntime.jsx(RichText, { html: product.description, "data-cimplify-product-layout-description": true }),
           groups.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-composite-overview": true, className: "flex flex-wrap gap-2", children: groups.map((group) => {
             const availableCount = group.components.filter((c) => c.is_available && !c.is_archived).length;
             return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 px-3 py-2 bg-muted rounded-lg text-sm", children: [
@@ -15642,6 +15722,7 @@ exports.RelatedProductsSection = RelatedProductsSection;
 exports.RentalServiceCard = RentalServiceCard;
 exports.ResourcePicker = ResourcePicker;
 exports.RetailProductCard = RetailProductCard;
+exports.RichText = RichText;
 exports.SaleBadge = SaleBadge;
 exports.ScheduleServiceCard = ScheduleServiceCard;
 exports.SearchInput = SearchInput;
@@ -15677,6 +15758,7 @@ exports.WholesaleProductLayout = WholesaleProductLayout;
 exports.WishlistButton = WishlistButton;
 exports.cn = cn;
 exports.roomToResource = roomToResource;
+exports.sanitizeRichTextHtml = sanitizeRichTextHtml;
 exports.useActivityState = useActivityState;
 exports.useAds = useAds;
 exports.useAttributeDefinitions = useAttributeDefinitions;

package/dist/react.mjs

@@ -20,6 +20,7 @@ import { Popover } from '@base-ui/react/popover';
 import { DayPicker } from 'react-day-picker';
 import { format, parseISO, isValid } from 'date-fns';
 import { Tabs } from '@base-ui/react/tabs';
+import { FilterXSS } from 'xss';
 import { Dialog } from '@base-ui/react/dialog';
 import { Field } from '@base-ui/react/field';
 import { Input } from '@base-ui/react/input';
@@ -9234,6 +9235,85 @@ function SaleBadge({
     }
   );
 }
+var RICH_TEXT_WHITELIST = {
+  p: [],
+  br: [],
+  strong: [],
+  b: [],
+  em: [],
+  i: [],
+  u: [],
+  s: [],
+  strike: [],
+  del: [],
+  h1: [],
+  h2: [],
+  h3: [],
+  h4: [],
+  h5: [],
+  h6: [],
+  ul: [],
+  ol: ["start", "type"],
+  li: [],
+  blockquote: [],
+  code: [],
+  pre: [],
+  hr: [],
+  span: [],
+  a: ["href", "title", "target", "rel"],
+  img: ["src", "alt", "title", "width", "height"]
+};
+var FILTER = new FilterXSS({
+  whiteList: RICH_TEXT_WHITELIST,
+  // Drop unknown tags but keep their text content (e.g. a stray <font>Foo</font>
+  // becomes "Foo" rather than vanishing).
+  stripIgnoreTag: true,
+  // Discard the *contents* of these entirely — script/style bodies are never text.
+  stripIgnoreTagBody: ["script", "style"],
+  allowCommentTag: false
+});
+function sanitizeRichTextHtml(html) {
+  return FILTER.process(html);
+}
+var RICH_TEXT_PROSE = cn(
+  "text-muted-foreground leading-relaxed",
+  "[&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
+  "[&_p]:my-3",
+  "[&_h1]:mt-6 [&_h1]:mb-2 [&_h1]:text-xl [&_h1]:font-semibold [&_h1]:leading-snug [&_h1]:text-foreground",
+  "[&_h2]:mt-5 [&_h2]:mb-2 [&_h2]:text-lg [&_h2]:font-semibold [&_h2]:leading-snug [&_h2]:text-foreground",
+  "[&_h3]:mt-4 [&_h3]:mb-1.5 [&_h3]:text-base [&_h3]:font-semibold [&_h3]:text-foreground",
+  "[&_h4]:mt-4 [&_h4]:mb-1.5 [&_h4]:text-sm [&_h4]:font-semibold [&_h4]:text-foreground",
+  "[&_h5]:mt-3 [&_h5]:mb-1 [&_h5]:font-semibold [&_h5]:text-foreground",
+  "[&_h6]:mt-3 [&_h6]:mb-1 [&_h6]:font-semibold [&_h6]:text-foreground",
+  "[&_strong]:font-semibold [&_strong]:text-foreground [&_b]:font-semibold [&_b]:text-foreground",
+  "[&_em]:italic [&_i]:italic",
+  "[&_u]:underline [&_s]:line-through [&_del]:line-through",
+  "[&_a]:font-medium [&_a]:text-primary [&_a]:underline [&_a]:underline-offset-2",
+  "[&_ul]:my-3 [&_ul]:list-disc [&_ul]:pl-5 [&_ul]:space-y-1",
+  "[&_ol]:my-3 [&_ol]:list-decimal [&_ol]:pl-5 [&_ol]:space-y-1",
+  "[&_li]:pl-1 [&_li>p]:my-0 [&_ul_ul]:my-1 [&_ol_ol]:my-1 [&_ul_ul]:list-[circle]",
+  "[&_blockquote]:my-3 [&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-4 [&_blockquote]:italic",
+  "[&_code]:rounded [&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-[0.85em]",
+  "[&_pre]:my-3 [&_pre]:overflow-x-auto [&_pre]:rounded-md [&_pre]:bg-muted [&_pre]:p-3 [&_pre]:text-[0.85em]",
+  "[&_pre>code]:bg-transparent [&_pre>code]:p-0",
+  "[&_hr]:my-4 [&_hr]:border-border",
+  "[&_img]:my-3 [&_img]:h-auto [&_img]:max-w-full [&_img]:rounded-md"
+);
+function RichText({ html, className, ...rest }) {
+  const clean = useMemo(() => html ? sanitizeRichTextHtml(html) : "", [html]);
+  if (!clean) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-cimplify-rich-text": true,
+      className: cn(RICH_TEXT_PROSE, className),
+      dangerouslySetInnerHTML: { __html: clean },
+      ...rest
+    }
+  );
+}
 function isProductWithDetails(product) {
   return "variants" in product;
 }
@@ -9369,12 +9449,12 @@ function ProductSheet({
             }
           )
         ] }),
-        fullProduct.description && /* @__PURE__ */ jsx(
-          "div",
+        /* @__PURE__ */ jsx(
+          RichText,
           {
+            html: fullProduct.description,
             "data-cimplify-product-sheet-description": true,
-            className: cn("text-sm leading-relaxed text-muted-foreground [&_p]:m-0 [&_p+p]:mt-2", classNames?.description),
-            dangerouslySetInnerHTML: { __html: fullProduct.description }
+            className: cn("text-sm", classNames?.description)
           }
         ),
         /* @__PURE__ */ jsx(
@@ -12652,7 +12732,7 @@ function DefaultProductLayout({
             ] })
           ] }) : /* @__PURE__ */ jsx(Price, { amount: product.default_price, className: "text-2xl font-semibold" }) }),
           /* @__PURE__ */ jsx(InventoryBadge, { product }),
-          product.description && /* @__PURE__ */ jsx("p", { "data-cimplify-product-layout-description": true, className: "text-muted-foreground leading-relaxed", children: product.description }),
+          /* @__PURE__ */ jsx(RichText, { html: product.description, "data-cimplify-product-layout-description": true }),
           hasPhysicalDetails && /* @__PURE__ */ jsxs("div", { "data-cimplify-product-layout-details": true, className: "space-y-1 text-sm text-muted-foreground", children: [
             product.sku && /* @__PURE__ */ jsxs("p", { children: [
               "SKU: ",
@@ -12749,7 +12829,7 @@ function FoodProductLayout({
               " calories"
             ] })
           ] }),
-          product.description && /* @__PURE__ */ jsx("p", { "data-cimplify-product-layout-description": true, className: "text-muted-foreground leading-relaxed", children: product.description }),
+          /* @__PURE__ */ jsx(RichText, { html: product.description, "data-cimplify-product-layout-description": true }),
           (ingredients.length > 0 || pairings.length > 0) && /* @__PURE__ */ jsxs("div", { className: "grid sm:grid-cols-2 gap-4", children: [
             /* @__PURE__ */ jsx(MetadataStringList, { items: ingredients, label: "Key Ingredients" }),
             /* @__PURE__ */ jsx(MetadataStringList, { items: pairings, label: "Pairings" })
@@ -12814,7 +12894,7 @@ function WholesaleProductLayout({
               " units"
             ] })
           ] }),
-          product.description && /* @__PURE__ */ jsx("p", { "data-cimplify-product-layout-description": true, className: "text-muted-foreground leading-relaxed", children: product.description }),
+          /* @__PURE__ */ jsx(RichText, { html: product.description, "data-cimplify-product-layout-description": true }),
           hasTiers && /* @__PURE__ */ jsx(
             VolumePricing,
             {
@@ -12903,7 +12983,7 @@ function ServiceProductLayout({
               " min buffer"
             ] })
           ] }),
-          product.description && /* @__PURE__ */ jsx("p", { "data-cimplify-product-layout-description": true, className: "text-muted-foreground leading-relaxed", children: product.description }),
+          /* @__PURE__ */ jsx(RichText, { html: product.description, "data-cimplify-product-layout-description": true }),
           (product.requires_specific_staff || product.requires_specific_resource) && /* @__PURE__ */ jsxs("div", { "data-cimplify-product-layout-requirements": true, className: "text-sm text-muted-foreground space-y-1", children: [
             product.requires_specific_staff && /* @__PURE__ */ jsx("p", { children: "Staff selection required" }),
             product.requires_specific_resource && /* @__PURE__ */ jsx("p", { children: "Resource selection required" })
@@ -12992,7 +13072,7 @@ function DigitalProductLayout({
             /* @__PURE__ */ jsx("h1", { "data-cimplify-product-layout-name": true, className: "text-3xl lg:text-4xl font-extrabold tracking-tight", children: product.name }),
             /* @__PURE__ */ jsx(Price, { amount: product.default_price, className: "text-2xl font-bold mt-2 block" })
           ] }),
-          product.description && /* @__PURE__ */ jsx("p", { "data-cimplify-product-layout-description": true, className: "text-muted-foreground leading-relaxed", children: product.description }),
+          /* @__PURE__ */ jsx(RichText, { html: product.description, "data-cimplify-product-layout-description": true }),
           isDownload && /* @__PURE__ */ jsxs("div", { "data-cimplify-product-layout-delivery": true, className: "flex items-center gap-3 px-4 py-3 bg-muted rounded-lg", children: [
             /* @__PURE__ */ jsx("svg", { className: "w-5 h-5 text-primary shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 10V3L4 14h7v7l9-11h-7z" }) }),
             /* @__PURE__ */ jsxs("div", { children: [
@@ -13131,7 +13211,7 @@ function BundleProductLayout({
               onSale && baseTotal > 0 && /* @__PURE__ */ jsx(Price, { amount: baseTotal, className: "text-lg text-muted-foreground line-through" })
             ] })
           ] }),
-          product.description && /* @__PURE__ */ jsx("p", { "data-cimplify-product-layout-description": true, className: "text-muted-foreground leading-relaxed", children: product.description }),
+          /* @__PURE__ */ jsx(RichText, { html: product.description, "data-cimplify-product-layout-description": true }),
           components.length > 0 && /* @__PURE__ */ jsxs("div", { "data-cimplify-bundle-components": true, className: "space-y-3", children: [
             /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold", children: "Included in this bundle" }),
             /* @__PURE__ */ jsx("div", { className: "divide-y divide-border border border-border rounded-lg overflow-hidden", children: components.map((component) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 p-3", children: [
@@ -13206,7 +13286,7 @@ function CompositeProductLayout({
               /* @__PURE__ */ jsx(Price, { amount: product.default_price, className: "font-semibold text-foreground" })
             ] })
           ] }),
-          product.description && /* @__PURE__ */ jsx("p", { "data-cimplify-product-layout-description": true, className: "text-muted-foreground leading-relaxed", children: product.description }),
+          /* @__PURE__ */ jsx(RichText, { html: product.description, "data-cimplify-product-layout-description": true }),
           groups.length > 0 && /* @__PURE__ */ jsx("div", { "data-cimplify-composite-overview": true, className: "flex flex-wrap gap-2", children: groups.map((group) => {
             const availableCount = group.components.filter((c) => c.is_available && !c.is_archived).length;
             return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 py-2 bg-muted rounded-lg text-sm", children: [
@@ -15498,4 +15578,4 @@ function SparkleIcon({ className }) {
   );
 }
 
-export { AccommodationCard, AccountContent, AccountDashboardPage, AccountHero, AccountIdentityStrip, AccountNav, AccountOrderDetailPage, AccountOrdersPage, AccountShell, AccountSidebar, AccountSignedOutPrompt, AccountSubscriptionDetailPage, AccountSubscriptionsPage, Ad, AdProvider, AddOnSelector, AddressElement, AuthElement, AvailabilityBadge, BackLink, BillingPlanSelector, BookingCard, BookingList, BookingPage, BookingsPage, BoxIcon24, BundleProductCard, BundleProductLayout, BundleSelector, Button, CardImage, CardShell, CardVariant, CartDrawer, CartDrawerProvider, CartPage, CartSummary, CartTemplate, CatalogueCollectionLayout, CataloguePage, CatalogueTemplate, CategoryFilter, CategoryGrid, ChatWidget, CheckIcon, CheckoutPage, CimplifyAccount, CimplifyCheckout, CimplifyProvider, CimplifySignInButton, CollectionPage, CollectionTemplate, CompactCartLayout, CompactCatalogueLayout, CompactSearchLayout, CompactServiceCard, CompositeProductCard, CompositeProductLayout, CompositeSelector, ContextCard, ContinuityCard, CurrencySelector, CustomAttributesTable, CustomerInputFields, DashboardIcon, DashboardIcon20, DatePicker, DateSlotPicker, DealBanner, DealsPage, DefaultCartLayout, DefaultCatalogueLayout, DefaultCollectionLayout, DefaultProductLayout, DefaultSearchLayout, DeliveryEstimate, DeliveryTruckIcon, DigitalProductCard, DigitalProductLayout, DiscountInput, ElementsProvider, EmptyState, ErrorState, FeaturedCollectionLayout, FilterTabs, FoodProductCard, FoodProductLayout, HappeningCard, IdentityIcon, IdentityOfframp, InventoryBadge, ItemsCard, LeaseServiceCard, LocationPicker, MediaGallery, MetadataStringList, MobileAccountShell, MobileBackButton, MobileMoreButton, MobileTabBar, NextDeliveryCard, OrderDetailHeader, OrderDetailMetaPipe, OrderDetailPage, OrderHistory, OrderHistoryPage, OrderList, OrderRow, OrderSummary, OrderTimeline, OrderTotals, OrdersIcon, OrdersIcon20, OvenIcon, PackageIcon, PaymentElement, Price, PriceRange, ProductCard, ProductCustomizer, ProductGrid, ProductImageGallery, ProductModel3D, ProductPage, ProductSheet, ProductTemplate, PropertiesTable, QuantitySelector, QuickAddButton, RecentlyViewed, RecommendationCarousel, RelatedProductsSection, RentalServiceCard, ResourcePicker, RetailProductCard, SaleBadge, ScheduleServiceCard, SearchInput, SearchPage, SearchTemplate, Section, SectionMore, ServiceProductLayout, SessionMessageBanner, SignOutIcon, Skeleton, SlotPicker, SoldOutOverlay, StaffPicker, StandardServiceCard, Status, StoreNav, StoreVideo, SubscriptionCard, SubscriptionList, SubscriptionRow, SubscriptionsIcon, SubscriptionsIcon20, TagPills, TimePicker, Toast, TwoColumnGrid, VariantSelector, VolumePricing, WelcomeCard, WholesaleProductCard, WholesaleProductLayout, WishlistButton, cn, roomToResource, useActivityState, useAds, useAttributeDefinitions, useAvailableSlots, useBillingPlans, useBookings, useBootstrap, useBundles, useCart, useCartDrawer, useCategories, useChat, useCheckout, useCimplify, useCimplifyClient, useCimplifySession, useCollection, useCollections, useDeals, useDeliveryFee, useElements, useElementsReady, useFxRate, useLocations, useOptionalCimplify, useOrder, useOrders, useProduct, useProductAvailability, useProductDeals, useProductPrice, useProductSchedules, useProducts, useProductsOnSale, usePropertyFacets, useQuote, useRecommendations, useSearch, useServiceAvailability, useServices, useSubscription, useSubscriptions, useTaxonomies, useTaxonomy, useTaxonomyPath, useValidateDiscount, useVariantSelector };
+export { AccommodationCard, AccountContent, AccountDashboardPage, AccountHero, AccountIdentityStrip, AccountNav, AccountOrderDetailPage, AccountOrdersPage, AccountShell, AccountSidebar, AccountSignedOutPrompt, AccountSubscriptionDetailPage, AccountSubscriptionsPage, Ad, AdProvider, AddOnSelector, AddressElement, AuthElement, AvailabilityBadge, BackLink, BillingPlanSelector, BookingCard, BookingList, BookingPage, BookingsPage, BoxIcon24, BundleProductCard, BundleProductLayout, BundleSelector, Button, CardImage, CardShell, CardVariant, CartDrawer, CartDrawerProvider, CartPage, CartSummary, CartTemplate, CatalogueCollectionLayout, CataloguePage, CatalogueTemplate, CategoryFilter, CategoryGrid, ChatWidget, CheckIcon, CheckoutPage, CimplifyAccount, CimplifyCheckout, CimplifyProvider, CimplifySignInButton, CollectionPage, CollectionTemplate, CompactCartLayout, CompactCatalogueLayout, CompactSearchLayout, CompactServiceCard, CompositeProductCard, CompositeProductLayout, CompositeSelector, ContextCard, ContinuityCard, CurrencySelector, CustomAttributesTable, CustomerInputFields, DashboardIcon, DashboardIcon20, DatePicker, DateSlotPicker, DealBanner, DealsPage, DefaultCartLayout, DefaultCatalogueLayout, DefaultCollectionLayout, DefaultProductLayout, DefaultSearchLayout, DeliveryEstimate, DeliveryTruckIcon, DigitalProductCard, DigitalProductLayout, DiscountInput, ElementsProvider, EmptyState, ErrorState, FeaturedCollectionLayout, FilterTabs, FoodProductCard, FoodProductLayout, HappeningCard, IdentityIcon, IdentityOfframp, InventoryBadge, ItemsCard, LeaseServiceCard, LocationPicker, MediaGallery, MetadataStringList, MobileAccountShell, MobileBackButton, MobileMoreButton, MobileTabBar, NextDeliveryCard, OrderDetailHeader, OrderDetailMetaPipe, OrderDetailPage, OrderHistory, OrderHistoryPage, OrderList, OrderRow, OrderSummary, OrderTimeline, OrderTotals, OrdersIcon, OrdersIcon20, OvenIcon, PackageIcon, PaymentElement, Price, PriceRange, ProductCard, ProductCustomizer, ProductGrid, ProductImageGallery, ProductModel3D, ProductPage, ProductSheet, ProductTemplate, PropertiesTable, QuantitySelector, QuickAddButton, RecentlyViewed, RecommendationCarousel, RelatedProductsSection, RentalServiceCard, ResourcePicker, RetailProductCard, RichText, SaleBadge, ScheduleServiceCard, SearchInput, SearchPage, SearchTemplate, Section, SectionMore, ServiceProductLayout, SessionMessageBanner, SignOutIcon, Skeleton, SlotPicker, SoldOutOverlay, StaffPicker, StandardServiceCard, Status, StoreNav, StoreVideo, SubscriptionCard, SubscriptionList, SubscriptionRow, SubscriptionsIcon, SubscriptionsIcon20, TagPills, TimePicker, Toast, TwoColumnGrid, VariantSelector, VolumePricing, WelcomeCard, WholesaleProductCard, WholesaleProductLayout, WishlistButton, cn, roomToResource, sanitizeRichTextHtml, useActivityState, useAds, useAttributeDefinitions, useAvailableSlots, useBillingPlans, useBookings, useBootstrap, useBundles, useCart, useCartDrawer, useCategories, useChat, useCheckout, useCimplify, useCimplifyClient, useCimplifySession, useCollection, useCollections, useDeals, useDeliveryFee, useElements, useElementsReady, useFxRate, useLocations, useOptionalCimplify, useOrder, useOrders, useProduct, useProductAvailability, useProductDeals, useProductPrice, useProductSchedules, useProducts, useProductsOnSale, usePropertyFacets, useQuote, useRecommendations, useSearch, useServiceAvailability, useServices, useSubscription, useSubscriptions, useTaxonomies, useTaxonomy, useTaxonomyPath, useValidateDiscount, useVariantSelector };

package/dist/styles.css

@@ -1,2 +1,2 @@
 /*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-divide-y-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1}}}.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.collapse{visibility:collapse}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.top-1\/2{top:50%}.top-\[18px\]{top:18px}.top-full{top:100%}.left-\[14px\]{left:14px}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-50{z-index:50}.z-\[1\]{z-index:1}.z-\[2\]{z-index:2}.z-\[200\]{z-index:200}.z-\[9999\]{z-index:9999}.container{width:100%}.m-auto{margin:auto}.mx-auto{margin-inline:auto}.-mt-px{margin-top:-1px}.mt-auto{margin-top:auto}.mr-auto{margin-right:auto}.-mb-px{margin-bottom:-1px}.ml-auto{margin-left:auto}.line-clamp-1{-webkit-line-clamp:1;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.aspect-\[3\/4\]{aspect-ratio:3/4}.aspect-\[4\/3\]{aspect-ratio:4/3}.aspect-\[5\/2\]{aspect-ratio:5/2}.aspect-\[16\/9\]{aspect-ratio:16/9}.aspect-square{aspect-ratio:1}.size-\[7px\]{width:7px;height:7px}.size-\[22px\]{width:22px;height:22px}.size-\[26px\]{width:26px;height:26px}.size-\[38px\]{width:38px;height:38px}.h-\[6px\]{height:6px}.h-\[7px\]{height:7px}.h-\[11px\]{height:11px}.h-\[18px\]{height:18px}.h-\[72px\]{height:72px}.h-\[min\(600px\,calc\(100vh-6rem\)\)\]{height:min(600px,100vh - 6rem)}.h-fit{height:fit-content}.h-full{height:100%}.h-px{height:1px}.max-h-\[85vh\]{max-height:85vh}.max-h-\[100px\]{max-height:100px}.min-h-\[20px\]{min-height:20px}.min-h-\[480px\]{min-height:480px}.min-h-\[720px\]{min-height:720px}.min-h-screen{min-height:100vh}.w-1\/2{width:50%}.w-2\/5{width:40%}.w-3\/4{width:75%}.w-3\/5{width:60%}.w-4\/5{width:80%}.w-\[6px\]{width:6px}.w-\[7px\]{width:7px}.w-\[11px\]{width:11px}.w-\[18px\]{width:18px}.w-\[72px\]{width:72px}.w-\[400px\]{width:400px}.w-full{width:100%}.max-w-\[85\%\]{max-width:85%}.max-w-\[260px\]{max-width:260px}.max-w-\[280px\]{max-width:280px}.max-w-\[300px\]{max-width:300px}.max-w-\[380px\]{max-width:380px}.max-w-\[420px\]{max-width:420px}.max-w-\[460px\]{max-width:460px}.max-w-\[calc\(100vw-3rem\)\]{max-width:calc(100vw - 3rem)}.flex-1{flex:1}.flex-shrink-0,.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.origin-bottom-left{transform-origin:0 100%}.origin-bottom-right{transform-origin:100% 100%}.translate-x-full{--tw-translate-x:100%;translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cursor-crosshair{cursor:crosshair}.cursor-default{cursor:default}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.touch-none{touch-action:none}.resize-none{resize:none}.list-none{list-style-type:none}.\[appearance\:textfield\]{appearance:textfield}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.grid-cols-\[16px_1fr_auto\]{grid-template-columns:16px 1fr auto}.grid-cols-\[22px_1fr_auto_auto\]{grid-template-columns:22px 1fr auto auto}.grid-cols-\[40px_1fr\]{grid-template-columns:40px 1fr}.grid-cols-\[40px_1fr_auto\]{grid-template-columns:40px 1fr auto}.grid-cols-\[44px_1fr_60px\]{grid-template-columns:44px 1fr 60px}.grid-cols-\[48px_1fr_auto_auto\]{grid-template-columns:48px 1fr auto auto}.grid-cols-\[56px_1fr_auto_auto\]{grid-template-columns:56px 1fr auto auto}.grid-cols-\[130px_1fr_auto\]{grid-template-columns:130px 1fr auto}.grid-cols-\[auto_1fr_auto\]{grid-template-columns:auto 1fr auto}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.place-items-center{place-items:center}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.items-stretch{align-items:stretch}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-\[7px\]{gap:7px}.gap-px{gap:1px}:where(.divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(.divide-border>:not(:last-child)){border-color:var(--color-border,oklch(90% 0 0))}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:var(--radius,.5rem)}.rounded-\[8px\]{border-radius:8px}.rounded-\[10px\]{border-radius:10px}.rounded-\[12px\]{border-radius:12px}.rounded-\[14px\]{border-radius:14px}.rounded-\[16px\]{border-radius:16px}.rounded-\[inherit\]{border-radius:inherit}.rounded-full{border-radius:3.40282e38px}.rounded-tl{border-top-left-radius:var(--radius,.5rem)}.rounded-tr{border-top-right-radius:var(--radius,.5rem)}.rounded-br{border-bottom-right-radius:var(--radius,.5rem)}.rounded-bl{border-bottom-left-radius:var(--radius,.5rem)}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-\[1\.5px\]{border-style:var(--tw-border-style);border-width:1.5px}.border-y{border-block-style:var(--tw-border-style);border-block-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-none{--tw-border-style:none;border-style:none}.border-\[color-mix\(in_oklch\,var\(--color-primary\)_18\%\,transparent\)\]{border-color:#934c3a2e}@supports (color:color-mix(in lab, red, red)){.border-\[color-mix\(in_oklch\,var\(--color-primary\)_18\%\,transparent\)\]{border-color:color-mix(in oklch,var(--color-primary) 18%,transparent)}}.border-border{border-color:var(--color-border,oklch(90% 0 0))}.border-border\/60{border-color:#dedede99}@supports (color:color-mix(in lab, red, red)){.border-border\/60{border-color:color-mix(in oklab, var(--color-border,oklch(90% 0 0)) 60%, transparent)}}.border-foreground{border-color:var(--color-foreground,oklch(15% 0 0))}.border-input{border-color:var(--color-input,oklch(90% 0 0))}.border-muted-foreground\/30{border-color:#6363634d}@supports (color:color-mix(in lab, red, red)){.border-muted-foreground\/30{border-color:color-mix(in oklab, var(--color-muted-foreground,oklch(50% 0 0)) 30%, transparent)}}.border-primary{border-color:var(--color-primary,oklch(50% .1 35))}.border-transparent{border-color:#0000}.border-t-foreground{border-top-color:var(--color-foreground,oklch(15% 0 0))}.bg-background{background-color:var(--color-background,oklch(99% 0 0))}.bg-background\/50{background-color:#fcfcfc80}@supports (color:color-mix(in lab, red, red)){.bg-background\/50{background-color:color-mix(in oklab, var(--color-background,oklch(99% 0 0)) 50%, transparent)}}.bg-background\/90{background-color:#fcfcfce6}@supports (color:color-mix(in lab, red, red)){.bg-background\/90{background-color:color-mix(in oklab, var(--color-background,oklch(99% 0 0)) 90%, transparent)}}.bg-background\/92{background-color:#fcfcfceb}@supports (color:color-mix(in lab, red, red)){.bg-background\/92{background-color:color-mix(in oklab, var(--color-background,oklch(99% 0 0)) 92%, transparent)}}.bg-border{background-color:var(--color-border,oklch(90% 0 0))}.bg-border\/60{background-color:#dedede99}@supports (color:color-mix(in lab, red, red)){.bg-border\/60{background-color:color-mix(in oklab, var(--color-border,oklch(90% 0 0)) 60%, transparent)}}.bg-current{background-color:currentColor}.bg-destructive{background-color:var(--color-destructive,oklch(50% .2 25))}.bg-destructive\/10{background-color:#bb061e1a}@supports (color:color-mix(in lab, red, red)){.bg-destructive\/10{background-color:color-mix(in oklab, var(--color-destructive,oklch(50% .2 25)) 10%, transparent)}}.bg-foreground{background-color:var(--color-foreground,oklch(15% 0 0))}.bg-foreground\/40{background-color:#0b0b0b66}@supports (color:color-mix(in lab, red, red)){.bg-foreground\/40{background-color:color-mix(in oklab, var(--color-foreground,oklch(15% 0 0)) 40%, transparent)}}.bg-muted{background-color:var(--color-muted,oklch(95% 0 0))}.bg-muted-foreground\/40{background-color:#63636366}@supports (color:color-mix(in lab, red, red)){.bg-muted-foreground\/40{background-color:color-mix(in oklab, var(--color-muted-foreground,oklch(50% 0 0)) 40%, transparent)}}.bg-muted\/30{background-color:#eeeeee4d}@supports (color:color-mix(in lab, red, red)){.bg-muted\/30{background-color:color-mix(in oklab, var(--color-muted,oklch(95% 0 0)) 30%, transparent)}}.bg-muted\/40{background-color:#eee6}@supports (color:color-mix(in lab, red, red)){.bg-muted\/40{background-color:color-mix(in oklab, var(--color-muted,oklch(95% 0 0)) 40%, transparent)}}.bg-muted\/50{background-color:#eeeeee80}@supports (color:color-mix(in lab, red, red)){.bg-muted\/50{background-color:color-mix(in oklab, var(--color-muted,oklch(95% 0 0)) 50%, transparent)}}.bg-primary{background-color:var(--color-primary,oklch(50% .1 35))}.bg-primary\/5{background-color:#934c3a0d}@supports (color:color-mix(in lab, red, red)){.bg-primary\/5{background-color:color-mix(in oklab, var(--color-primary,oklch(50% .1 35)) 5%, transparent)}}.bg-primary\/10{background-color:#934c3a1a}@supports (color:color-mix(in lab, red, red)){.bg-primary\/10{background-color:color-mix(in oklab, var(--color-primary,oklch(50% .1 35)) 10%, transparent)}}.bg-transparent{background-color:#0000}.bg-gradient-to-t{--tw-gradient-position:to top in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.bg-\[linear-gradient\(135deg\,color-mix\(in_oklch\,var\(--color-primary\)_8\%\,transparent\)\,var\(--color-background\)\)\]{background-image:linear-gradient(135deg,#934c3a14,var(--color-background))}@supports (color:color-mix(in lab, red, red)){.bg-\[linear-gradient\(135deg\,color-mix\(in_oklch\,var\(--color-primary\)_8\%\,transparent\)\,var\(--color-background\)\)\]{background-image:linear-gradient(135deg,color-mix(in oklch,var(--color-primary) 8%,transparent),var(--color-background))}}.bg-\[linear-gradient\(135deg\,oklch\(0\.92_0\.05_80\)\,oklch\(0\.84_0\.10_60\)\)\]{background-image:linear-gradient(135deg,oklch(92% .05 80),oklch(84% .1 60))}.bg-\[radial-gradient\(900px_480px_at_50\%_0\%\,color-mix\(in_oklch\,var\(--color-primary\)_8\%\,transparent\)\,transparent_70\%\)\,var\(--color-background\)\]{background-image:radial-gradient(900px 480px at 50% 0%,#934c3a14,transparent 70%),var(--color-background)}@supports (color:color-mix(in lab, red, red)){.bg-\[radial-gradient\(900px_480px_at_50\%_0\%\,color-mix\(in_oklch\,var\(--color-primary\)_8\%\,transparent\)\,transparent_70\%\)\,var\(--color-background\)\]{background-image:radial-gradient(900px 480px at 50% 0%,color-mix(in oklch,var(--color-primary) 8%,transparent),transparent 70%),var(--color-background)}}.to-transparent{--tw-gradient-to:transparent;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.object-cover{object-fit:cover}.px-\[13px\]{padding-inline:13px}.px-\[18px\]{padding-inline:18px}.px-\[22px\]{padding-inline:22px}.py-\[7px\]{padding-block:7px}.py-\[10px\]{padding-block:10px}.py-\[18px\]{padding-block:18px}.pb-\[13px\]{padding-bottom:13px}.pb-\[22px\]{padding-bottom:22px}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.\[font-family\:inherit\],.font-\[inherit\]{font-family:inherit}.text-\[9px\]{font-size:9px}.text-\[10\.5px\]{font-size:10.5px}.text-\[10px\]{font-size:10px}.text-\[11\.5px\]{font-size:11.5px}.text-\[11px\]{font-size:11px}.text-\[12\.5px\]{font-size:12.5px}.text-\[12px\]{font-size:12px}.text-\[13\.5px\]{font-size:13.5px}.text-\[13px\]{font-size:13px}.text-\[14\.5px\]{font-size:14.5px}.text-\[14px\]{font-size:14px}.text-\[15px\]{font-size:15px}.text-\[16px\]{font-size:16px}.text-\[17px\]{font-size:17px}.text-\[18px\]{font-size:18px}.text-\[22px\]{font-size:22px}.text-\[24px\]{font-size:24px}.text-\[28px\]{font-size:28px}.text-\[30px\]{font-size:30px}.text-\[clamp\(26px\,2\.8vw\,34px\)\]{font-size:clamp(26px,2.8vw,34px)}.text-\[clamp\(28px\,3vw\,40px\)\]{font-size:clamp(28px,3vw,40px)}.leading-\[1\.1\]{--tw-leading:1.1;line-height:1.1}.leading-\[1\.2\]{--tw-leading:1.2;line-height:1.2}.leading-\[1\.4\]{--tw-leading:1.4;line-height:1.4}.leading-\[1\.05\]{--tw-leading:1.05;line-height:1.05}.leading-\[1\.5\]{--tw-leading:1.5;line-height:1.5}.leading-\[1\.15\]{--tw-leading:1.15;line-height:1.15}.leading-\[1\.55\]{--tw-leading:1.55;line-height:1.55}.leading-none{--tw-leading:1;line-height:1}.tracking-\[-0\.01em\]{--tw-tracking:-.01em;letter-spacing:-.01em}.tracking-\[-0\.02em\]{--tw-tracking:-.02em;letter-spacing:-.02em}.tracking-\[-0\.015em\]{--tw-tracking:-.015em;letter-spacing:-.015em}.tracking-\[-0\.025em\]{--tw-tracking:-.025em;letter-spacing:-.025em}.tracking-\[0\.1em\]{--tw-tracking:.1em;letter-spacing:.1em}.tracking-\[0\.06em\]{--tw-tracking:.06em;letter-spacing:.06em}.tracking-\[0\.08em\]{--tw-tracking:.08em;letter-spacing:.08em}.tracking-\[0\.12em\]{--tw-tracking:.12em;letter-spacing:.12em}.tracking-\[0\.16em\]{--tw-tracking:.16em;letter-spacing:.16em}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.text-\[inherit\]{color:inherit}.text-background{color:var(--color-background,oklch(99% 0 0))}.text-background\/60{color:#fcfcfc99}@supports (color:color-mix(in lab, red, red)){.text-background\/60{color:color-mix(in oklab, var(--color-background,oklch(99% 0 0)) 60%, transparent)}}.text-border{color:var(--color-border,oklch(90% 0 0))}.text-destructive{color:var(--color-destructive,oklch(50% .2 25))}.text-destructive-foreground{color:var(--color-destructive-foreground,oklch(99% 0 0))}.text-foreground{color:var(--color-foreground,oklch(15% 0 0))}.text-foreground\/55{color:#0b0b0b8c}@supports (color:color-mix(in lab, red, red)){.text-foreground\/55{color:color-mix(in oklab, var(--color-foreground,oklch(15% 0 0)) 55%, transparent)}}.text-foreground\/70{color:#0b0b0bb3}@supports (color:color-mix(in lab, red, red)){.text-foreground\/70{color:color-mix(in oklab, var(--color-foreground,oklch(15% 0 0)) 70%, transparent)}}.text-foreground\/80{color:#0b0b0bcc}@supports (color:color-mix(in lab, red, red)){.text-foreground\/80{color:color-mix(in oklab, var(--color-foreground,oklch(15% 0 0)) 80%, transparent)}}.text-muted-foreground{color:var(--color-muted-foreground,oklch(50% 0 0))}.text-muted-foreground\/30{color:#6363634d}@supports (color:color-mix(in lab, red, red)){.text-muted-foreground\/30{color:color-mix(in oklab, var(--color-muted-foreground,oklch(50% 0 0)) 30%, transparent)}}.text-muted-foreground\/40{color:#63636366}@supports (color:color-mix(in lab, red, red)){.text-muted-foreground\/40{color:color-mix(in oklab, var(--color-muted-foreground,oklch(50% 0 0)) 40%, transparent)}}.text-muted-foreground\/50{color:#63636380}@supports (color:color-mix(in lab, red, red)){.text-muted-foreground\/50{color:color-mix(in oklab, var(--color-muted-foreground,oklch(50% 0 0)) 50%, transparent)}}.text-muted-foreground\/60{color:#63636399}@supports (color:color-mix(in lab, red, red)){.text-muted-foreground\/60{color:color-mix(in oklab, var(--color-muted-foreground,oklch(50% 0 0)) 60%, transparent)}}.text-muted-foreground\/70{color:#636363b3}@supports (color:color-mix(in lab, red, red)){.text-muted-foreground\/70{color:color-mix(in oklab, var(--color-muted-foreground,oklch(50% 0 0)) 70%, transparent)}}.text-primary{color:var(--color-primary,oklch(50% .1 35))}.text-primary-foreground{color:var(--color-primary-foreground,oklch(99% 0 0))}.capitalize{text-transform:capitalize}.uppercase{text-transform:uppercase}.italic{font-style:italic}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.line-through{text-decoration-line:line-through}.no-underline{text-decoration-line:none}.underline{text-decoration-line:underline}.accent-foreground{accent-color:var(--color-foreground,oklch(15% 0 0))}.accent-primary{accent-color:var(--color-primary,oklch(50% .1 35))}.opacity-0{opacity:0}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-75{opacity:.75}.opacity-85{opacity:.85}.opacity-100{opacity:1}.shadow-\[0_0_0_1px_var\(--color-border\)\]{--tw-shadow:0 0 0 1px var(--tw-shadow-color,var(--color-border));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0_0_0_2px_var\(--color-card\)\]{--tw-shadow:0 0 0 2px var(--tw-shadow-color,var(--color-card));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0_0_0_6px_color-mix\(in_oklch\,var\(--color-primary\)_18\%\,transparent\)\]{--tw-shadow:0 0 0 6px var(--tw-shadow-color,#934c3a2e)}@supports (color:color-mix(in lab, red, red)){.shadow-\[0_0_0_6px_color-mix\(in_oklch\,var\(--color-primary\)_18\%\,transparent\)\]{--tw-shadow:0 0 0 6px var(--tw-shadow-color,color-mix(in oklch,var(--color-primary) 18%,transparent))}}.shadow-\[0_0_0_6px_color-mix\(in_oklch\,var\(--color-primary\)_18\%\,transparent\)\]{box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0_1px_0_rgba\(0\,0\,0\,0\.04\)\,0_8px_24px_rgba\(0\,0\,0\,0\.12\)\]{--tw-shadow:0 1px 0 var(--tw-shadow-color,#0000000a), 0 8px 24px var(--tw-shadow-color,#0000001f);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0_1px_0_rgba\(0\,0\,0\,0\.04\)\,0_16px_48px_rgba\(0\,0\,0\,0\.08\)\]{--tw-shadow:0 1px 0 var(--tw-shadow-color,#0000000a), 0 16px 48px var(--tw-shadow-color,#00000014);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0_1px_3px_rgba\(0\,0\,0\,0\.04\)\,0_6px_24px_rgba\(0\,0\,0\,0\.06\)\]{--tw-shadow:0 1px 3px var(--tw-shadow-color,#0000000a), 0 6px 24px var(--tw-shadow-color,#0000000f);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0_1px_4px_rgba\(0\,0\,0\,0\.10\)\,0_4px_12px_rgba\(0\,0\,0\,0\.08\)\]{--tw-shadow:0 1px 4px var(--tw-shadow-color,#0000001a), 0 4px 12px var(--tw-shadow-color,#00000014);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-1{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-2{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-background{--tw-ring-color:var(--color-background,oklch(99% 0 0))}.ring-primary\/40{--tw-ring-color:#934c3a66}@supports (color:color-mix(in lab, red, red)){.ring-primary\/40{--tw-ring-color:color-mix(in oklab, var(--color-primary,oklch(50% .1 35)) 40%, transparent)}}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.backdrop-blur-\[1px\]{--tw-backdrop-blur:blur(1px);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-\[width\]{transition-property:width;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-shadow{transition-property:box-shadow;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.duration-500{--tw-duration:.5s;transition-duration:.5s}.duration-700{--tw-duration:.7s;transition-duration:.7s}.ease-\[cubic-bezier\(0\.19\,1\,0\.22\,1\)\]{--tw-ease:cubic-bezier(.19,1,.22,1);transition-timing-function:cubic-bezier(.19,1,.22,1)}.\[transition-timing-function\:cubic-bezier\(0\.16\,1\,0\.3\,1\)\]{transition-timing-function:cubic-bezier(.16,1,.3,1)}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}.\[cimplify\:checkout\]{cimplify:checkout}.ring-inset{--tw-ring-inset:inset}@media (hover:hover){.group-hover\:scale-105:is(:where(.group):hover *){--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x) var(--tw-scale-y)}.group-hover\:scale-\[1\.04\]:is(:where(.group):hover *){scale:1.04}.group-hover\:text-foreground:is(:where(.group):hover *){color:var(--color-foreground,oklch(15% 0 0))}.group-hover\:text-primary:is(:where(.group):hover *){color:var(--color-primary,oklch(50% .1 35))}.group-hover\:opacity-100:is(:where(.group):hover *){opacity:1}}.placeholder\:text-muted-foreground::placeholder{color:var(--color-muted-foreground,oklch(50% 0 0))}.last\:border-b-0:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}.focus-within\:border-foreground:focus-within{border-color:var(--color-foreground,oklch(15% 0 0))}.focus-within\:bg-background:focus-within{background-color:var(--color-background,oklch(99% 0 0))}@media (hover:hover){.hover\:-translate-y-\[1px\]:hover{--tw-translate-y:calc(1px * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.hover\:-translate-y-px:hover{--tw-translate-y:-1px;translate:var(--tw-translate-x) var(--tw-translate-y)}.hover\:\!scale-110:hover{--tw-scale-x:110%!important;--tw-scale-y:110%!important;--tw-scale-z:110%!important;scale:var(--tw-scale-x) var(--tw-scale-y)!important}.hover\:scale-105:hover{--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x) var(--tw-scale-y)}.hover\:scale-110:hover{--tw-scale-x:110%;--tw-scale-y:110%;--tw-scale-z:110%;scale:var(--tw-scale-x) var(--tw-scale-y)}.hover\:scale-\[1\.04\]:hover{scale:1.04}.hover\:scale-\[1\.08\]:hover{scale:1.08}.hover\:border-destructive:hover{border-color:var(--color-destructive,oklch(50% .2 25))}.hover\:border-foreground:hover{border-color:var(--color-foreground,oklch(15% 0 0))}.hover\:border-foreground\/40:hover{border-color:#0b0b0b66}@supports (color:color-mix(in lab, red, red)){.hover\:border-foreground\/40:hover{border-color:color-mix(in oklab, var(--color-foreground,oklch(15% 0 0)) 40%, transparent)}}.hover\:border-primary\/20:hover{border-color:#934c3a33}@supports (color:color-mix(in lab, red, red)){.hover\:border-primary\/20:hover{border-color:color-mix(in oklab, var(--color-primary,oklch(50% .1 35)) 20%, transparent)}}.hover\:border-primary\/40:hover{border-color:#934c3a66}@supports (color:color-mix(in lab, red, red)){.hover\:border-primary\/40:hover{border-color:color-mix(in oklab, var(--color-primary,oklch(50% .1 35)) 40%, transparent)}}.hover\:border-primary\/50:hover{border-color:#934c3a80}@supports (color:color-mix(in lab, red, red)){.hover\:border-primary\/50:hover{border-color:color-mix(in oklab, var(--color-primary,oklch(50% .1 35)) 50%, transparent)}}.hover\:\!bg-foreground:hover{background-color:var(--color-foreground,oklch(15% 0 0))!important}.hover\:bg-background:hover{background-color:var(--color-background,oklch(99% 0 0))}.hover\:bg-destructive\/10:hover{background-color:#bb061e1a}@supports (color:color-mix(in lab, red, red)){.hover\:bg-destructive\/10:hover{background-color:color-mix(in oklab, var(--color-destructive,oklch(50% .2 25)) 10%, transparent)}}.hover\:bg-foreground\/90:hover{background-color:#0b0b0be6}@supports (color:color-mix(in lab, red, red)){.hover\:bg-foreground\/90:hover{background-color:color-mix(in oklab, var(--color-foreground,oklch(15% 0 0)) 90%, transparent)}}.hover\:bg-muted:hover{background-color:var(--color-muted,oklch(95% 0 0))}.hover\:bg-muted\/40:hover{background-color:#eee6}@supports (color:color-mix(in lab, red, red)){.hover\:bg-muted\/40:hover{background-color:color-mix(in oklab, var(--color-muted,oklch(95% 0 0)) 40%, transparent)}}.hover\:bg-muted\/70:hover{background-color:#eeeeeeb3}@supports (color:color-mix(in lab, red, red)){.hover\:bg-muted\/70:hover{background-color:color-mix(in oklab, var(--color-muted,oklch(95% 0 0)) 70%, transparent)}}.hover\:bg-muted\/80:hover{background-color:#eeec}@supports (color:color-mix(in lab, red, red)){.hover\:bg-muted\/80:hover{background-color:color-mix(in oklab, var(--color-muted,oklch(95% 0 0)) 80%, transparent)}}.hover\:bg-primary\/90:hover{background-color:#934c3ae6}@supports (color:color-mix(in lab, red, red)){.hover\:bg-primary\/90:hover{background-color:color-mix(in oklab, var(--color-primary,oklch(50% .1 35)) 90%, transparent)}}.hover\:\!text-background:hover{color:var(--color-background,oklch(99% 0 0))!important}.hover\:text-background:hover{color:var(--color-background,oklch(99% 0 0))}.hover\:text-destructive:hover{color:var(--color-destructive,oklch(50% .2 25))}.hover\:text-foreground:hover{color:var(--color-foreground,oklch(15% 0 0))}.hover\:text-primary:hover{color:var(--color-primary,oklch(50% .1 35))}.hover\:text-primary\/80:hover{color:#934c3acc}@supports (color:color-mix(in lab, red, red)){.hover\:text-primary\/80:hover{color:color-mix(in oklab, var(--color-primary,oklch(50% .1 35)) 80%, transparent)}}.hover\:underline:hover{text-decoration-line:underline}.hover\:shadow-\[0_2px_6px_rgba\(0\,0\,0\,0\.04\)\,0_12px_40px_rgba\(0\,0\,0\,0\.10\)\]:hover{--tw-shadow:0 2px 6px var(--tw-shadow-color,#0000000a), 0 12px 40px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}}.focus\:border-primary:focus{border-color:var(--color-primary,oklch(50% .1 35))}.focus\:border-primary\/30:focus{border-color:#934c3a4d}@supports (color:color-mix(in lab, red, red)){.focus\:border-primary\/30:focus{border-color:color-mix(in oklab, var(--color-primary,oklch(50% .1 35)) 30%, transparent)}}.focus\:bg-foreground:focus{background-color:var(--color-foreground,oklch(15% 0 0))}.focus\:ring-1:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus\:ring-primary\/10:focus{--tw-ring-color:#934c3a1a}@supports (color:color-mix(in lab, red, red)){.focus\:ring-primary\/10:focus{--tw-ring-color:color-mix(in oklab, var(--color-primary,oklch(50% .1 35)) 10%, transparent)}}.focus\:ring-primary\/20:focus{--tw-ring-color:#934c3a33}@supports (color:color-mix(in lab, red, red)){.focus\:ring-primary\/20:focus{--tw-ring-color:color-mix(in oklab, var(--color-primary,oklch(50% .1 35)) 20%, transparent)}}.focus\:ring-ring:focus{--tw-ring-color:var(--color-ring,oklch(50% .1 35))}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\:ring-primary\/40:focus-visible{--tw-ring-color:#934c3a66}@supports (color:color-mix(in lab, red, red)){.focus-visible\:ring-primary\/40:focus-visible{--tw-ring-color:color-mix(in oklab, var(--color-primary,oklch(50% .1 35)) 40%, transparent)}}.focus-visible\:ring-ring:focus-visible{--tw-ring-color:var(--color-ring,oklch(50% .1 35))}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.active\:scale-95:active{--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x) var(--tw-scale-y)}.active\:scale-\[0\.99\]:active{scale:.99}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-30:disabled{opacity:.3}.disabled\:opacity-40:disabled{opacity:.4}.disabled\:opacity-50:disabled{opacity:.5}.aria-selected\:bg-foreground[aria-selected=true]{background-color:var(--color-foreground,oklch(15% 0 0))}.aria-selected\:text-background[aria-selected=true]{color:var(--color-background,oklch(99% 0 0))}@media (hover:hover){.aria-selected\:hover\:bg-foreground\/90[aria-selected=true]:hover{background-color:#0b0b0be6}@supports (color:color-mix(in lab, red, red)){.aria-selected\:hover\:bg-foreground\/90[aria-selected=true]:hover{background-color:color-mix(in oklab, var(--color-foreground,oklch(15% 0 0)) 90%, transparent)}}}.data-\[checked\]\:border-primary[data-checked]{border-color:var(--color-primary,oklch(50% .1 35))}.data-\[checked\]\:bg-primary\/5[data-checked]{background-color:#934c3a0d}@supports (color:color-mix(in lab, red, red)){.data-\[checked\]\:bg-primary\/5[data-checked]{background-color:color-mix(in oklab, var(--color-primary,oklch(50% .1 35)) 5%, transparent)}}.data-\[fully-booked\]\:cursor-not-allowed[data-fully-booked]{cursor:not-allowed}.data-\[fully-booked\]\:opacity-40[data-fully-booked]{opacity:.4}.data-\[selected\]\:border-foreground[data-selected]{border-color:var(--color-foreground,oklch(15% 0 0))}.data-\[selected\]\:bg-foreground[data-selected]{background-color:var(--color-foreground,oklch(15% 0 0))}.data-\[selected\]\:text-background[data-selected]{color:var(--color-background,oklch(99% 0 0))}.data-\[unavailable\]\:cursor-not-allowed[data-unavailable]{cursor:not-allowed}.data-\[unavailable\]\:line-through[data-unavailable]{text-decoration-line:line-through}.data-\[unavailable\]\:opacity-40[data-unavailable]{opacity:.4}.\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker{display:none}.\[\&\:\:-webkit-inner-spin-button\]\:appearance-none::-webkit-inner-spin-button{appearance:none}.\[\&\:\:-webkit-outer-spin-button\]\:appearance-none::-webkit-outer-spin-button{appearance:none}[open]>.\[\[open\]\>\&\]\:rotate-180{rotate:180deg}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-divide-y-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1}}}.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.collapse{visibility:collapse}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.top-1\/2{top:50%}.top-\[18px\]{top:18px}.top-full{top:100%}.left-\[14px\]{left:14px}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-50{z-index:50}.z-\[1\]{z-index:1}.z-\[2\]{z-index:2}.z-\[200\]{z-index:200}.z-\[9999\]{z-index:9999}.container{width:100%}.m-auto{margin:auto}.mx-auto{margin-inline:auto}.-mt-px{margin-top:-1px}.mt-auto{margin-top:auto}.mr-auto{margin-right:auto}.-mb-px{margin-bottom:-1px}.ml-auto{margin-left:auto}.line-clamp-1{-webkit-line-clamp:1;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.aspect-\[3\/4\]{aspect-ratio:3/4}.aspect-\[4\/3\]{aspect-ratio:4/3}.aspect-\[5\/2\]{aspect-ratio:5/2}.aspect-\[16\/9\]{aspect-ratio:16/9}.aspect-square{aspect-ratio:1}.size-\[7px\]{width:7px;height:7px}.size-\[22px\]{width:22px;height:22px}.size-\[26px\]{width:26px;height:26px}.size-\[38px\]{width:38px;height:38px}.h-\[6px\]{height:6px}.h-\[7px\]{height:7px}.h-\[11px\]{height:11px}.h-\[18px\]{height:18px}.h-\[72px\]{height:72px}.h-\[min\(600px\,calc\(100vh-6rem\)\)\]{height:min(600px,100vh - 6rem)}.h-fit{height:fit-content}.h-full{height:100%}.h-px{height:1px}.max-h-\[85vh\]{max-height:85vh}.max-h-\[100px\]{max-height:100px}.min-h-\[20px\]{min-height:20px}.min-h-\[480px\]{min-height:480px}.min-h-\[720px\]{min-height:720px}.min-h-screen{min-height:100vh}.w-1\/2{width:50%}.w-2\/5{width:40%}.w-3\/4{width:75%}.w-3\/5{width:60%}.w-4\/5{width:80%}.w-\[6px\]{width:6px}.w-\[7px\]{width:7px}.w-\[11px\]{width:11px}.w-\[18px\]{width:18px}.w-\[72px\]{width:72px}.w-\[400px\]{width:400px}.w-full{width:100%}.max-w-\[85\%\]{max-width:85%}.max-w-\[260px\]{max-width:260px}.max-w-\[280px\]{max-width:280px}.max-w-\[300px\]{max-width:300px}.max-w-\[380px\]{max-width:380px}.max-w-\[420px\]{max-width:420px}.max-w-\[460px\]{max-width:460px}.max-w-\[calc\(100vw-3rem\)\]{max-width:calc(100vw - 3rem)}.flex-1{flex:1}.flex-shrink-0,.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.origin-bottom-left{transform-origin:0 100%}.origin-bottom-right{transform-origin:100% 100%}.translate-x-full{--tw-translate-x:100%;translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cursor-crosshair{cursor:crosshair}.cursor-default{cursor:default}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.touch-none{touch-action:none}.resize-none{resize:none}.list-none{list-style-type:none}.\[appearance\:textfield\]{appearance:textfield}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.grid-cols-\[16px_1fr_auto\]{grid-template-columns:16px 1fr auto}.grid-cols-\[22px_1fr_auto_auto\]{grid-template-columns:22px 1fr auto auto}.grid-cols-\[40px_1fr\]{grid-template-columns:40px 1fr}.grid-cols-\[40px_1fr_auto\]{grid-template-columns:40px 1fr auto}.grid-cols-\[44px_1fr_60px\]{grid-template-columns:44px 1fr 60px}.grid-cols-\[48px_1fr_auto_auto\]{grid-template-columns:48px 1fr auto auto}.grid-cols-\[56px_1fr_auto_auto\]{grid-template-columns:56px 1fr auto auto}.grid-cols-\[130px_1fr_auto\]{grid-template-columns:130px 1fr auto}.grid-cols-\[auto_1fr_auto\]{grid-template-columns:auto 1fr auto}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.place-items-center{place-items:center}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.items-stretch{align-items:stretch}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-\[7px\]{gap:7px}.gap-px{gap:1px}:where(.divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(.divide-border>:not(:last-child)){border-color:var(--color-border,oklch(90% 0 0))}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:var(--radius,.5rem)}.rounded-\[8px\]{border-radius:8px}.rounded-\[10px\]{border-radius:10px}.rounded-\[12px\]{border-radius:12px}.rounded-\[14px\]{border-radius:14px}.rounded-\[16px\]{border-radius:16px}.rounded-\[inherit\]{border-radius:inherit}.rounded-full{border-radius:3.40282e38px}.rounded-tl{border-top-left-radius:var(--radius,.5rem)}.rounded-tr{border-top-right-radius:var(--radius,.5rem)}.rounded-br{border-bottom-right-radius:var(--radius,.5rem)}.rounded-bl{border-bottom-left-radius:var(--radius,.5rem)}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-\[1\.5px\]{border-style:var(--tw-border-style);border-width:1.5px}.border-y{border-block-style:var(--tw-border-style);border-block-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-none{--tw-border-style:none;border-style:none}.border-\[color-mix\(in_oklch\,var\(--color-primary\)_18\%\,transparent\)\]{border-color:#934c3a2e}@supports (color:color-mix(in lab, red, red)){.border-\[color-mix\(in_oklch\,var\(--color-primary\)_18\%\,transparent\)\]{border-color:color-mix(in oklch,var(--color-primary) 18%,transparent)}}.border-border{border-color:var(--color-border,oklch(90% 0 0))}.border-border\/60{border-color:#dedede99}@supports (color:color-mix(in lab, red, red)){.border-border\/60{border-color:color-mix(in oklab, var(--color-border,oklch(90% 0 0)) 60%, transparent)}}.border-foreground{border-color:var(--color-foreground,oklch(15% 0 0))}.border-input{border-color:var(--color-input,oklch(90% 0 0))}.border-muted-foreground\/30{border-color:#6363634d}@supports (color:color-mix(in lab, red, red)){.border-muted-foreground\/30{border-color:color-mix(in oklab, var(--color-muted-foreground,oklch(50% 0 0)) 30%, transparent)}}.border-primary{border-color:var(--color-primary,oklch(50% .1 35))}.border-transparent{border-color:#0000}.border-t-foreground{border-top-color:var(--color-foreground,oklch(15% 0 0))}.bg-background{background-color:var(--color-background,oklch(99% 0 0))}.bg-background\/50{background-color:#fcfcfc80}@supports (color:color-mix(in lab, red, red)){.bg-background\/50{background-color:color-mix(in oklab, var(--color-background,oklch(99% 0 0)) 50%, transparent)}}.bg-background\/90{background-color:#fcfcfce6}@supports (color:color-mix(in lab, red, red)){.bg-background\/90{background-color:color-mix(in oklab, var(--color-background,oklch(99% 0 0)) 90%, transparent)}}.bg-background\/92{background-color:#fcfcfceb}@supports (color:color-mix(in lab, red, red)){.bg-background\/92{background-color:color-mix(in oklab, var(--color-background,oklch(99% 0 0)) 92%, transparent)}}.bg-border{background-color:var(--color-border,oklch(90% 0 0))}.bg-border\/60{background-color:#dedede99}@supports (color:color-mix(in lab, red, red)){.bg-border\/60{background-color:color-mix(in oklab, var(--color-border,oklch(90% 0 0)) 60%, transparent)}}.bg-current{background-color:currentColor}.bg-destructive{background-color:var(--color-destructive,oklch(50% .2 25))}.bg-destructive\/10{background-color:#bb061e1a}@supports (color:color-mix(in lab, red, red)){.bg-destructive\/10{background-color:color-mix(in oklab, var(--color-destructive,oklch(50% .2 25)) 10%, transparent)}}.bg-foreground{background-color:var(--color-foreground,oklch(15% 0 0))}.bg-foreground\/40{background-color:#0b0b0b66}@supports (color:color-mix(in lab, red, red)){.bg-foreground\/40{background-color:color-mix(in oklab, var(--color-foreground,oklch(15% 0 0)) 40%, transparent)}}.bg-muted{background-color:var(--color-muted,oklch(95% 0 0))}.bg-muted-foreground\/40{background-color:#63636366}@supports (color:color-mix(in lab, red, red)){.bg-muted-foreground\/40{background-color:color-mix(in oklab, var(--color-muted-foreground,oklch(50% 0 0)) 40%, transparent)}}.bg-muted\/30{background-color:#eeeeee4d}@supports (color:color-mix(in lab, red, red)){.bg-muted\/30{background-color:color-mix(in oklab, var(--color-muted,oklch(95% 0 0)) 30%, transparent)}}.bg-muted\/40{background-color:#eee6}@supports (color:color-mix(in lab, red, red)){.bg-muted\/40{background-color:color-mix(in oklab, var(--color-muted,oklch(95% 0 0)) 40%, transparent)}}.bg-muted\/50{background-color:#eeeeee80}@supports (color:color-mix(in lab, red, red)){.bg-muted\/50{background-color:color-mix(in oklab, var(--color-muted,oklch(95% 0 0)) 50%, transparent)}}.bg-primary{background-color:var(--color-primary,oklch(50% .1 35))}.bg-primary\/5{background-color:#934c3a0d}@supports (color:color-mix(in lab, red, red)){.bg-primary\/5{background-color:color-mix(in oklab, var(--color-primary,oklch(50% .1 35)) 5%, transparent)}}.bg-primary\/10{background-color:#934c3a1a}@supports (color:color-mix(in lab, red, red)){.bg-primary\/10{background-color:color-mix(in oklab, var(--color-primary,oklch(50% .1 35)) 10%, transparent)}}.bg-transparent{background-color:#0000}.bg-gradient-to-t{--tw-gradient-position:to top in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.bg-\[linear-gradient\(135deg\,color-mix\(in_oklch\,var\(--color-primary\)_8\%\,transparent\)\,var\(--color-background\)\)\]{background-image:linear-gradient(135deg,#934c3a14,var(--color-background))}@supports (color:color-mix(in lab, red, red)){.bg-\[linear-gradient\(135deg\,color-mix\(in_oklch\,var\(--color-primary\)_8\%\,transparent\)\,var\(--color-background\)\)\]{background-image:linear-gradient(135deg,color-mix(in oklch,var(--color-primary) 8%,transparent),var(--color-background))}}.bg-\[linear-gradient\(135deg\,oklch\(0\.92_0\.05_80\)\,oklch\(0\.84_0\.10_60\)\)\]{background-image:linear-gradient(135deg,oklch(92% .05 80),oklch(84% .1 60))}.bg-\[radial-gradient\(900px_480px_at_50\%_0\%\,color-mix\(in_oklch\,var\(--color-primary\)_8\%\,transparent\)\,transparent_70\%\)\,var\(--color-background\)\]{background-image:radial-gradient(900px 480px at 50% 0%,#934c3a14,transparent 70%),var(--color-background)}@supports (color:color-mix(in lab, red, red)){.bg-\[radial-gradient\(900px_480px_at_50\%_0\%\,color-mix\(in_oklch\,var\(--color-primary\)_8\%\,transparent\)\,transparent_70\%\)\,var\(--color-background\)\]{background-image:radial-gradient(900px 480px at 50% 0%,color-mix(in oklch,var(--color-primary) 8%,transparent),transparent 70%),var(--color-background)}}.to-transparent{--tw-gradient-to:transparent;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.object-cover{object-fit:cover}.px-\[13px\]{padding-inline:13px}.px-\[18px\]{padding-inline:18px}.px-\[22px\]{padding-inline:22px}.py-\[7px\]{padding-block:7px}.py-\[10px\]{padding-block:10px}.py-\[18px\]{padding-block:18px}.pb-\[13px\]{padding-bottom:13px}.pb-\[22px\]{padding-bottom:22px}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.\[font-family\:inherit\],.font-\[inherit\]{font-family:inherit}.text-\[9px\]{font-size:9px}.text-\[10\.5px\]{font-size:10.5px}.text-\[10px\]{font-size:10px}.text-\[11\.5px\]{font-size:11.5px}.text-\[11px\]{font-size:11px}.text-\[12\.5px\]{font-size:12.5px}.text-\[12px\]{font-size:12px}.text-\[13\.5px\]{font-size:13.5px}.text-\[13px\]{font-size:13px}.text-\[14\.5px\]{font-size:14.5px}.text-\[14px\]{font-size:14px}.text-\[15px\]{font-size:15px}.text-\[16px\]{font-size:16px}.text-\[17px\]{font-size:17px}.text-\[18px\]{font-size:18px}.text-\[22px\]{font-size:22px}.text-\[24px\]{font-size:24px}.text-\[28px\]{font-size:28px}.text-\[30px\]{font-size:30px}.text-\[clamp\(26px\,2\.8vw\,34px\)\]{font-size:clamp(26px,2.8vw,34px)}.text-\[clamp\(28px\,3vw\,40px\)\]{font-size:clamp(28px,3vw,40px)}.leading-\[1\.1\]{--tw-leading:1.1;line-height:1.1}.leading-\[1\.2\]{--tw-leading:1.2;line-height:1.2}.leading-\[1\.4\]{--tw-leading:1.4;line-height:1.4}.leading-\[1\.05\]{--tw-leading:1.05;line-height:1.05}.leading-\[1\.5\]{--tw-leading:1.5;line-height:1.5}.leading-\[1\.15\]{--tw-leading:1.15;line-height:1.15}.leading-\[1\.55\]{--tw-leading:1.55;line-height:1.55}.leading-none{--tw-leading:1;line-height:1}.tracking-\[-0\.01em\]{--tw-tracking:-.01em;letter-spacing:-.01em}.tracking-\[-0\.02em\]{--tw-tracking:-.02em;letter-spacing:-.02em}.tracking-\[-0\.015em\]{--tw-tracking:-.015em;letter-spacing:-.015em}.tracking-\[-0\.025em\]{--tw-tracking:-.025em;letter-spacing:-.025em}.tracking-\[0\.1em\]{--tw-tracking:.1em;letter-spacing:.1em}.tracking-\[0\.06em\]{--tw-tracking:.06em;letter-spacing:.06em}.tracking-\[0\.08em\]{--tw-tracking:.08em;letter-spacing:.08em}.tracking-\[0\.12em\]{--tw-tracking:.12em;letter-spacing:.12em}.tracking-\[0\.16em\]{--tw-tracking:.16em;letter-spacing:.16em}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.text-\[inherit\]{color:inherit}.text-background{color:var(--color-background,oklch(99% 0 0))}.text-background\/60{color:#fcfcfc99}@supports (color:color-mix(in lab, red, red)){.text-background\/60{color:color-mix(in oklab, var(--color-background,oklch(99% 0 0)) 60%, transparent)}}.text-border{color:var(--color-border,oklch(90% 0 0))}.text-destructive{color:var(--color-destructive,oklch(50% .2 25))}.text-destructive-foreground{color:var(--color-destructive-foreground,oklch(99% 0 0))}.text-foreground{color:var(--color-foreground,oklch(15% 0 0))}.text-foreground\/55{color:#0b0b0b8c}@supports (color:color-mix(in lab, red, red)){.text-foreground\/55{color:color-mix(in oklab, var(--color-foreground,oklch(15% 0 0)) 55%, transparent)}}.text-foreground\/70{color:#0b0b0bb3}@supports (color:color-mix(in lab, red, red)){.text-foreground\/70{color:color-mix(in oklab, var(--color-foreground,oklch(15% 0 0)) 70%, transparent)}}.text-foreground\/80{color:#0b0b0bcc}@supports (color:color-mix(in lab, red, red)){.text-foreground\/80{color:color-mix(in oklab, var(--color-foreground,oklch(15% 0 0)) 80%, transparent)}}.text-muted-foreground{color:var(--color-muted-foreground,oklch(50% 0 0))}.text-muted-foreground\/30{color:#6363634d}@supports (color:color-mix(in lab, red, red)){.text-muted-foreground\/30{color:color-mix(in oklab, var(--color-muted-foreground,oklch(50% 0 0)) 30%, transparent)}}.text-muted-foreground\/40{color:#63636366}@supports (color:color-mix(in lab, red, red)){.text-muted-foreground\/40{color:color-mix(in oklab, var(--color-muted-foreground,oklch(50% 0 0)) 40%, transparent)}}.text-muted-foreground\/50{color:#63636380}@supports (color:color-mix(in lab, red, red)){.text-muted-foreground\/50{color:color-mix(in oklab, var(--color-muted-foreground,oklch(50% 0 0)) 50%, transparent)}}.text-muted-foreground\/60{color:#63636399}@supports (color:color-mix(in lab, red, red)){.text-muted-foreground\/60{color:color-mix(in oklab, var(--color-muted-foreground,oklch(50% 0 0)) 60%, transparent)}}.text-muted-foreground\/70{color:#636363b3}@supports (color:color-mix(in lab, red, red)){.text-muted-foreground\/70{color:color-mix(in oklab, var(--color-muted-foreground,oklch(50% 0 0)) 70%, transparent)}}.text-primary{color:var(--color-primary,oklch(50% .1 35))}.text-primary-foreground{color:var(--color-primary-foreground,oklch(99% 0 0))}.capitalize{text-transform:capitalize}.uppercase{text-transform:uppercase}.italic{font-style:italic}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.line-through{text-decoration-line:line-through}.no-underline{text-decoration-line:none}.underline{text-decoration-line:underline}.accent-foreground{accent-color:var(--color-foreground,oklch(15% 0 0))}.accent-primary{accent-color:var(--color-primary,oklch(50% .1 35))}.opacity-0{opacity:0}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-75{opacity:.75}.opacity-85{opacity:.85}.opacity-100{opacity:1}.shadow-\[0_0_0_1px_var\(--color-border\)\]{--tw-shadow:0 0 0 1px var(--tw-shadow-color,var(--color-border));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0_0_0_2px_var\(--color-card\)\]{--tw-shadow:0 0 0 2px var(--tw-shadow-color,var(--color-card));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0_0_0_6px_color-mix\(in_oklch\,var\(--color-primary\)_18\%\,transparent\)\]{--tw-shadow:0 0 0 6px var(--tw-shadow-color,#934c3a2e)}@supports (color:color-mix(in lab, red, red)){.shadow-\[0_0_0_6px_color-mix\(in_oklch\,var\(--color-primary\)_18\%\,transparent\)\]{--tw-shadow:0 0 0 6px var(--tw-shadow-color,color-mix(in oklch,var(--color-primary) 18%,transparent))}}.shadow-\[0_0_0_6px_color-mix\(in_oklch\,var\(--color-primary\)_18\%\,transparent\)\]{box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0_1px_0_rgba\(0\,0\,0\,0\.04\)\,0_8px_24px_rgba\(0\,0\,0\,0\.12\)\]{--tw-shadow:0 1px 0 var(--tw-shadow-color,#0000000a), 0 8px 24px var(--tw-shadow-color,#0000001f);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0_1px_0_rgba\(0\,0\,0\,0\.04\)\,0_16px_48px_rgba\(0\,0\,0\,0\.08\)\]{--tw-shadow:0 1px 0 var(--tw-shadow-color,#0000000a), 0 16px 48px var(--tw-shadow-color,#00000014);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0_1px_3px_rgba\(0\,0\,0\,0\.04\)\,0_6px_24px_rgba\(0\,0\,0\,0\.06\)\]{--tw-shadow:0 1px 3px var(--tw-shadow-color,#0000000a), 0 6px 24px var(--tw-shadow-color,#0000000f);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0_1px_4px_rgba\(0\,0\,0\,0\.10\)\,0_4px_12px_rgba\(0\,0\,0\,0\.08\)\]{--tw-shadow:0 1px 4px var(--tw-shadow-color,#0000001a), 0 4px 12px var(--tw-shadow-color,#00000014);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-1{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-2{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-background{--tw-ring-color:var(--color-background,oklch(99% 0 0))}.ring-primary\/40{--tw-ring-color:#934c3a66}@supports (color:color-mix(in lab, red, red)){.ring-primary\/40{--tw-ring-color:color-mix(in oklab, var(--color-primary,oklch(50% .1 35)) 40%, transparent)}}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.backdrop-blur-\[1px\]{--tw-backdrop-blur:blur(1px);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-\[width\]{transition-property:width;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-shadow{transition-property:box-shadow;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.duration-500{--tw-duration:.5s;transition-duration:.5s}.duration-700{--tw-duration:.7s;transition-duration:.7s}.ease-\[cubic-bezier\(0\.19\,1\,0\.22\,1\)\]{--tw-ease:cubic-bezier(.19,1,.22,1);transition-timing-function:cubic-bezier(.19,1,.22,1)}.\[transition-timing-function\:cubic-bezier\(0\.16\,1\,0\.3\,1\)\]{transition-timing-function:cubic-bezier(.16,1,.3,1)}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}.\[cimplify\:checkout\]{cimplify:checkout}.ring-inset{--tw-ring-inset:inset}@media (hover:hover){.group-hover\:scale-105:is(:where(.group):hover *){--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x) var(--tw-scale-y)}.group-hover\:scale-\[1\.04\]:is(:where(.group):hover *){scale:1.04}.group-hover\:text-foreground:is(:where(.group):hover *){color:var(--color-foreground,oklch(15% 0 0))}.group-hover\:text-primary:is(:where(.group):hover *){color:var(--color-primary,oklch(50% .1 35))}.group-hover\:opacity-100:is(:where(.group):hover *){opacity:1}}.placeholder\:text-muted-foreground::placeholder{color:var(--color-muted-foreground,oklch(50% 0 0))}.last\:border-b-0:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}.focus-within\:border-foreground:focus-within{border-color:var(--color-foreground,oklch(15% 0 0))}.focus-within\:bg-background:focus-within{background-color:var(--color-background,oklch(99% 0 0))}@media (hover:hover){.hover\:-translate-y-\[1px\]:hover{--tw-translate-y:calc(1px * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.hover\:-translate-y-px:hover{--tw-translate-y:-1px;translate:var(--tw-translate-x) var(--tw-translate-y)}.hover\:\!scale-110:hover{--tw-scale-x:110%!important;--tw-scale-y:110%!important;--tw-scale-z:110%!important;scale:var(--tw-scale-x) var(--tw-scale-y)!important}.hover\:scale-105:hover{--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x) var(--tw-scale-y)}.hover\:scale-110:hover{--tw-scale-x:110%;--tw-scale-y:110%;--tw-scale-z:110%;scale:var(--tw-scale-x) var(--tw-scale-y)}.hover\:scale-\[1\.04\]:hover{scale:1.04}.hover\:scale-\[1\.08\]:hover{scale:1.08}.hover\:border-destructive:hover{border-color:var(--color-destructive,oklch(50% .2 25))}.hover\:border-foreground:hover{border-color:var(--color-foreground,oklch(15% 0 0))}.hover\:border-foreground\/40:hover{border-color:#0b0b0b66}@supports (color:color-mix(in lab, red, red)){.hover\:border-foreground\/40:hover{border-color:color-mix(in oklab, var(--color-foreground,oklch(15% 0 0)) 40%, transparent)}}.hover\:border-primary\/20:hover{border-color:#934c3a33}@supports (color:color-mix(in lab, red, red)){.hover\:border-primary\/20:hover{border-color:color-mix(in oklab, var(--color-primary,oklch(50% .1 35)) 20%, transparent)}}.hover\:border-primary\/40:hover{border-color:#934c3a66}@supports (color:color-mix(in lab, red, red)){.hover\:border-primary\/40:hover{border-color:color-mix(in oklab, var(--color-primary,oklch(50% .1 35)) 40%, transparent)}}.hover\:border-primary\/50:hover{border-color:#934c3a80}@supports (color:color-mix(in lab, red, red)){.hover\:border-primary\/50:hover{border-color:color-mix(in oklab, var(--color-primary,oklch(50% .1 35)) 50%, transparent)}}.hover\:\!bg-foreground:hover{background-color:var(--color-foreground,oklch(15% 0 0))!important}.hover\:bg-background:hover{background-color:var(--color-background,oklch(99% 0 0))}.hover\:bg-destructive\/10:hover{background-color:#bb061e1a}@supports (color:color-mix(in lab, red, red)){.hover\:bg-destructive\/10:hover{background-color:color-mix(in oklab, var(--color-destructive,oklch(50% .2 25)) 10%, transparent)}}.hover\:bg-foreground\/90:hover{background-color:#0b0b0be6}@supports (color:color-mix(in lab, red, red)){.hover\:bg-foreground\/90:hover{background-color:color-mix(in oklab, var(--color-foreground,oklch(15% 0 0)) 90%, transparent)}}.hover\:bg-muted:hover{background-color:var(--color-muted,oklch(95% 0 0))}.hover\:bg-muted\/40:hover{background-color:#eee6}@supports (color:color-mix(in lab, red, red)){.hover\:bg-muted\/40:hover{background-color:color-mix(in oklab, var(--color-muted,oklch(95% 0 0)) 40%, transparent)}}.hover\:bg-muted\/70:hover{background-color:#eeeeeeb3}@supports (color:color-mix(in lab, red, red)){.hover\:bg-muted\/70:hover{background-color:color-mix(in oklab, var(--color-muted,oklch(95% 0 0)) 70%, transparent)}}.hover\:bg-muted\/80:hover{background-color:#eeec}@supports (color:color-mix(in lab, red, red)){.hover\:bg-muted\/80:hover{background-color:color-mix(in oklab, var(--color-muted,oklch(95% 0 0)) 80%, transparent)}}.hover\:bg-primary\/90:hover{background-color:#934c3ae6}@supports (color:color-mix(in lab, red, red)){.hover\:bg-primary\/90:hover{background-color:color-mix(in oklab, var(--color-primary,oklch(50% .1 35)) 90%, transparent)}}.hover\:\!text-background:hover{color:var(--color-background,oklch(99% 0 0))!important}.hover\:text-background:hover{color:var(--color-background,oklch(99% 0 0))}.hover\:text-destructive:hover{color:var(--color-destructive,oklch(50% .2 25))}.hover\:text-foreground:hover{color:var(--color-foreground,oklch(15% 0 0))}.hover\:text-primary:hover{color:var(--color-primary,oklch(50% .1 35))}.hover\:text-primary\/80:hover{color:#934c3acc}@supports (color:color-mix(in lab, red, red)){.hover\:text-primary\/80:hover{color:color-mix(in oklab, var(--color-primary,oklch(50% .1 35)) 80%, transparent)}}.hover\:underline:hover{text-decoration-line:underline}.hover\:shadow-\[0_2px_6px_rgba\(0\,0\,0\,0\.04\)\,0_12px_40px_rgba\(0\,0\,0\,0\.10\)\]:hover{--tw-shadow:0 2px 6px var(--tw-shadow-color,#0000000a), 0 12px 40px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}}.focus\:border-primary:focus{border-color:var(--color-primary,oklch(50% .1 35))}.focus\:border-primary\/30:focus{border-color:#934c3a4d}@supports (color:color-mix(in lab, red, red)){.focus\:border-primary\/30:focus{border-color:color-mix(in oklab, var(--color-primary,oklch(50% .1 35)) 30%, transparent)}}.focus\:bg-foreground:focus{background-color:var(--color-foreground,oklch(15% 0 0))}.focus\:ring-1:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus\:ring-primary\/10:focus{--tw-ring-color:#934c3a1a}@supports (color:color-mix(in lab, red, red)){.focus\:ring-primary\/10:focus{--tw-ring-color:color-mix(in oklab, var(--color-primary,oklch(50% .1 35)) 10%, transparent)}}.focus\:ring-primary\/20:focus{--tw-ring-color:#934c3a33}@supports (color:color-mix(in lab, red, red)){.focus\:ring-primary\/20:focus{--tw-ring-color:color-mix(in oklab, var(--color-primary,oklch(50% .1 35)) 20%, transparent)}}.focus\:ring-ring:focus{--tw-ring-color:var(--color-ring,oklch(50% .1 35))}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\:ring-primary\/40:focus-visible{--tw-ring-color:#934c3a66}@supports (color:color-mix(in lab, red, red)){.focus-visible\:ring-primary\/40:focus-visible{--tw-ring-color:color-mix(in oklab, var(--color-primary,oklch(50% .1 35)) 40%, transparent)}}.focus-visible\:ring-ring:focus-visible{--tw-ring-color:var(--color-ring,oklch(50% .1 35))}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.active\:scale-95:active{--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x) var(--tw-scale-y)}.active\:scale-\[0\.99\]:active{scale:.99}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-30:disabled{opacity:.3}.disabled\:opacity-40:disabled{opacity:.4}.disabled\:opacity-50:disabled{opacity:.5}.aria-selected\:bg-foreground[aria-selected=true]{background-color:var(--color-foreground,oklch(15% 0 0))}.aria-selected\:text-background[aria-selected=true]{color:var(--color-background,oklch(99% 0 0))}@media (hover:hover){.aria-selected\:hover\:bg-foreground\/90[aria-selected=true]:hover{background-color:#0b0b0be6}@supports (color:color-mix(in lab, red, red)){.aria-selected\:hover\:bg-foreground\/90[aria-selected=true]:hover{background-color:color-mix(in oklab, var(--color-foreground,oklch(15% 0 0)) 90%, transparent)}}}.data-\[checked\]\:border-primary[data-checked]{border-color:var(--color-primary,oklch(50% .1 35))}.data-\[checked\]\:bg-primary\/5[data-checked]{background-color:#934c3a0d}@supports (color:color-mix(in lab, red, red)){.data-\[checked\]\:bg-primary\/5[data-checked]{background-color:color-mix(in oklab, var(--color-primary,oklch(50% .1 35)) 5%, transparent)}}.data-\[fully-booked\]\:cursor-not-allowed[data-fully-booked]{cursor:not-allowed}.data-\[fully-booked\]\:opacity-40[data-fully-booked]{opacity:.4}.data-\[selected\]\:border-foreground[data-selected]{border-color:var(--color-foreground,oklch(15% 0 0))}.data-\[selected\]\:bg-foreground[data-selected]{background-color:var(--color-foreground,oklch(15% 0 0))}.data-\[selected\]\:text-background[data-selected]{color:var(--color-background,oklch(99% 0 0))}.data-\[unavailable\]\:cursor-not-allowed[data-unavailable]{cursor:not-allowed}.data-\[unavailable\]\:line-through[data-unavailable]{text-decoration-line:line-through}.data-\[unavailable\]\:opacity-40[data-unavailable]{opacity:.4}.\[\&_a\]\:text-primary a{color:var(--color-primary,oklch(50% .1 35))}.\[\&_a\]\:underline a{text-decoration-line:underline}.\[\&_a\]\:underline-offset-2 a{text-underline-offset:2px}.\[\&_b\]\:text-foreground b{color:var(--color-foreground,oklch(15% 0 0))}.\[\&_blockquote\]\:border-l-2 blockquote{border-left-style:var(--tw-border-style);border-left-width:2px}.\[\&_blockquote\]\:border-border blockquote{border-color:var(--color-border,oklch(90% 0 0))}.\[\&_blockquote\]\:italic blockquote{font-style:italic}.\[\&_code\]\:rounded code{border-radius:var(--radius,.5rem)}.\[\&_code\]\:bg-muted code{background-color:var(--color-muted,oklch(95% 0 0))}.\[\&_code\]\:text-\[0\.85em\] code{font-size:.85em}.\[\&_del\]\:line-through del{text-decoration-line:line-through}.\[\&_em\]\:italic em{font-style:italic}.\[\&_h1\]\:text-foreground h1,.\[\&_h2\]\:text-foreground h2,.\[\&_h3\]\:text-foreground h3,.\[\&_h4\]\:text-foreground h4,.\[\&_h5\]\:text-foreground h5,.\[\&_h6\]\:text-foreground h6{color:var(--color-foreground,oklch(15% 0 0))}.\[\&_hr\]\:border-border hr{border-color:var(--color-border,oklch(90% 0 0))}.\[\&_i\]\:italic i{font-style:italic}.\[\&_img\]\:h-auto img{height:auto}.\[\&_img\]\:max-w-full img{max-width:100%}.\[\&_ol\]\:list-decimal ol{list-style-type:decimal}.\[\&_pre\]\:overflow-x-auto pre{overflow-x:auto}.\[\&_pre\]\:bg-muted pre{background-color:var(--color-muted,oklch(95% 0 0))}.\[\&_pre\]\:text-\[0\.85em\] pre{font-size:.85em}.\[\&_pre\>code\]\:bg-transparent pre>code{background-color:#0000}.\[\&_s\]\:line-through s{text-decoration-line:line-through}.\[\&_strong\]\:text-foreground strong{color:var(--color-foreground,oklch(15% 0 0))}.\[\&_u\]\:underline u{text-decoration-line:underline}.\[\&_ul\]\:list-disc ul{list-style-type:disc}.\[\&_ul_ul\]\:list-\[circle\] ul ul{list-style-type:circle}.\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker{display:none}.\[\&\:\:-webkit-inner-spin-button\]\:appearance-none::-webkit-inner-spin-button{appearance:none}.\[\&\:\:-webkit-outer-spin-button\]\:appearance-none::-webkit-outer-spin-button{appearance:none}[open]>.\[\[open\]\>\&\]\:rotate-180{rotate:180deg}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cimplify/sdk",
-  "version": "0.60.0",
+  "version": "0.61.0",
   "description": "Cimplify Commerce SDK for storefronts",
   "keywords": [
     "cimplify",
@@ -152,6 +152,7 @@
     "libphonenumber-js": "1.12.41",
     "react-day-picker": "^9.14.0",
     "tailwind-merge": "^3.5.0",
+    "xss": "^1.0.15",
     "zod": "^4.4.3"
   }
 }

package/registry/default-product-layout.json

@@ -10,12 +10,13 @@
     "price-range",
     "availability-badge",
     "sale-badge",
+    "rich-text",
     "cn"
   ],
   "files": [
     {
       "path": "layouts/default-product-layout.tsx",
-      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { ProductLayoutProps } from \"@cimplify/sdk/react\";\nimport {\n  TwoColumnGrid,\n  RelatedProductsSection,\n  CustomAttributesTable,\n  PropertiesTable,\n  TagPills,\n  InventoryBadge,\n} from \"@cimplify/sdk/react\";\nimport { ProductImageGallery } from \"@cimplify/sdk/react\";\nimport { ProductCustomizer } from \"@cimplify/sdk/react\";\nimport { resolveGallery } from \"../../gallery\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { PriceRange } from \"@cimplify/sdk/react\";\nimport { AvailabilityBadge } from \"@cimplify/sdk/react\";\nimport { SaleBadge } from \"@cimplify/sdk/react\";\nimport { parsePrice, isOnSale, getBasePrice, getDiscountPercentage } from \"@cimplify/sdk\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport function DefaultProductLayout({\n  product,\n  onAddToCart,\n  renderBreadcrumb,\n  relatedProducts,\n  showRelated = true,\n  className,\n}: ProductLayoutProps): React.ReactElement {\n  const [selectedVariantId, setSelectedVariantId] = React.useState<string | undefined>();\n  const images = resolveGallery(product, selectedVariantId);\n  const hasRange = (product.quantity_pricing && product.quantity_pricing.length > 1)\n    || (product.variants && product.variants.length > 1);\n  const onSale = isOnSale(product);\n  const hasPhysicalDetails = product.sku || product.vendor || product.material;\n\n  return (\n    <div data-cimplify-product-layout=\"default\" className={cn(\"space-y-8\", className)}>\n      {renderBreadcrumb?.(product)}\n\n      <TwoColumnGrid\n        left={\n          <ProductImageGallery\n            images={images}\n            productName={product.name}\n          />\n        }\n        right={\n          <div className=\"space-y-6\">\n            {/* Brand + Tags */}\n            <div className=\"flex flex-wrap items-center gap-2\">\n              {product.vendor && (\n                <span className=\"text-xs font-semibold text-muted-foreground uppercase tracking-widest\">\n                  {product.vendor}\n                </span>\n              )}\n              <TagPills tags={product.tags || []} />\n            </div>\n\n            {/* Name */}\n            <h1 data-cimplify-product-layout-name className=\"text-3xl lg:text-4xl font-extrabold tracking-tight\">\n              {product.name}\n            </h1>\n\n            {/* Price */}\n            <div className=\"flex items-baseline gap-3\">\n              {hasRange ? (\n                <PriceRange product={product} className=\"text-2xl font-extrabold\" />\n              ) : onSale ? (\n                <>\n                  <Price amount={product.default_price} className=\"text-2xl font-extrabold\" />\n                  <Price amount={getBasePrice(product)} className=\"text-lg text-muted-foreground line-through\" />\n                  <span className=\"text-sm font-bold text-destructive bg-destructive/10 px-2 py-0.5\">\n                    Save {getDiscountPercentage(product)}%\n                  </span>\n                </>\n              ) : (\n                <Price amount={product.default_price} className=\"text-2xl font-semibold\" />\n              )}\n            </div>\n\n            {/* Inventory */}\n            <InventoryBadge product={product} />\n\n            {/* Description */}\n            {product.description && (\n              <p data-cimplify-product-layout-description className=\"text-muted-foreground leading-relaxed\">\n                {product.description}\n              </p>\n            )}\n\n            {/* Physical product details */}\n            {hasPhysicalDetails && (\n              <div data-cimplify-product-layout-details className=\"space-y-1 text-sm text-muted-foreground\">\n                {product.sku && <p>SKU: <span className=\"font-mono text-foreground\">{product.sku}</span></p>}\n                {product.barcode && <p>Barcode: <span className=\"font-mono text-foreground\">{product.barcode}</span></p>}\n                {product.material && <p>Material: <span className=\"text-foreground\">{product.material}</span></p>}\n                {product.vendor && <p>Brand: <span className=\"text-foreground\">{product.vendor}</span></p>}\n                {(product.length_mm || product.width_mm || product.height_mm) && (\n                  <p>Dimensions: <span className=\"text-foreground\">\n                    {[product.length_mm, product.width_mm, product.height_mm]\n                      .filter(Boolean)\n                      .map((d) => `${(d! / 10).toFixed(1)} cm`)\n                      .join(\" x \")}\n                  </span></p>\n                )}\n                {product.item_condition && product.item_condition !== \"new\" && (\n                  <p>Condition: <span className=\"text-foreground capitalize\">{product.item_condition}</span></p>\n                )}\n              </div>\n            )}\n\n            {/* Custom Attributes */}\n            <CustomAttributesTable attributes={product.custom_attributes || []} />\n\n            {/* Properties */}\n            <PropertiesTable properties={product.properties || []} />\n\n            {/* Customizer */}\n            <ProductCustomizer\n              product={product}\n              onAddToCart={onAddToCart}\n              onVariantChange={(variantId) => setSelectedVariantId(variantId)}\n            />\n          </div>\n        }\n      />\n\n      {showRelated && relatedProducts && relatedProducts.length > 0 && (\n        <RelatedProductsSection\n          products={relatedProducts}\n        />\n      )}\n    </div>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { ProductLayoutProps } from \"@cimplify/sdk/react\";\nimport {\n  TwoColumnGrid,\n  RelatedProductsSection,\n  CustomAttributesTable,\n  PropertiesTable,\n  TagPills,\n  InventoryBadge,\n} from \"@cimplify/sdk/react\";\nimport { ProductImageGallery } from \"@cimplify/sdk/react\";\nimport { ProductCustomizer } from \"@cimplify/sdk/react\";\nimport { resolveGallery } from \"../../gallery\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { PriceRange } from \"@cimplify/sdk/react\";\nimport { AvailabilityBadge } from \"@cimplify/sdk/react\";\nimport { SaleBadge } from \"@cimplify/sdk/react\";\nimport { parsePrice, isOnSale, getBasePrice, getDiscountPercentage } from \"@cimplify/sdk\";\nimport { RichText } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport function DefaultProductLayout({\n  product,\n  onAddToCart,\n  renderBreadcrumb,\n  relatedProducts,\n  showRelated = true,\n  className,\n}: ProductLayoutProps): React.ReactElement {\n  const [selectedVariantId, setSelectedVariantId] = React.useState<string | undefined>();\n  const images = resolveGallery(product, selectedVariantId);\n  const hasRange = (product.quantity_pricing && product.quantity_pricing.length > 1)\n    || (product.variants && product.variants.length > 1);\n  const onSale = isOnSale(product);\n  const hasPhysicalDetails = product.sku || product.vendor || product.material;\n\n  return (\n    <div data-cimplify-product-layout=\"default\" className={cn(\"space-y-8\", className)}>\n      {renderBreadcrumb?.(product)}\n\n      <TwoColumnGrid\n        left={\n          <ProductImageGallery\n            images={images}\n            productName={product.name}\n          />\n        }\n        right={\n          <div className=\"space-y-6\">\n            {/* Brand + Tags */}\n            <div className=\"flex flex-wrap items-center gap-2\">\n              {product.vendor && (\n                <span className=\"text-xs font-semibold text-muted-foreground uppercase tracking-widest\">\n                  {product.vendor}\n                </span>\n              )}\n              <TagPills tags={product.tags || []} />\n            </div>\n\n            {/* Name */}\n            <h1 data-cimplify-product-layout-name className=\"text-3xl lg:text-4xl font-extrabold tracking-tight\">\n              {product.name}\n            </h1>\n\n            {/* Price */}\n            <div className=\"flex items-baseline gap-3\">\n              {hasRange ? (\n                <PriceRange product={product} className=\"text-2xl font-extrabold\" />\n              ) : onSale ? (\n                <>\n                  <Price amount={product.default_price} className=\"text-2xl font-extrabold\" />\n                  <Price amount={getBasePrice(product)} className=\"text-lg text-muted-foreground line-through\" />\n                  <span className=\"text-sm font-bold text-destructive bg-destructive/10 px-2 py-0.5\">\n                    Save {getDiscountPercentage(product)}%\n                  </span>\n                </>\n              ) : (\n                <Price amount={product.default_price} className=\"text-2xl font-semibold\" />\n              )}\n            </div>\n\n            {/* Inventory */}\n            <InventoryBadge product={product} />\n\n            {/* Description */}\n            <RichText html={product.description} data-cimplify-product-layout-description />\n\n            {/* Physical product details */}\n            {hasPhysicalDetails && (\n              <div data-cimplify-product-layout-details className=\"space-y-1 text-sm text-muted-foreground\">\n                {product.sku && <p>SKU: <span className=\"font-mono text-foreground\">{product.sku}</span></p>}\n                {product.barcode && <p>Barcode: <span className=\"font-mono text-foreground\">{product.barcode}</span></p>}\n                {product.material && <p>Material: <span className=\"text-foreground\">{product.material}</span></p>}\n                {product.vendor && <p>Brand: <span className=\"text-foreground\">{product.vendor}</span></p>}\n                {(product.length_mm || product.width_mm || product.height_mm) && (\n                  <p>Dimensions: <span className=\"text-foreground\">\n                    {[product.length_mm, product.width_mm, product.height_mm]\n                      .filter(Boolean)\n                      .map((d) => `${(d! / 10).toFixed(1)} cm`)\n                      .join(\" x \")}\n                  </span></p>\n                )}\n                {product.item_condition && product.item_condition !== \"new\" && (\n                  <p>Condition: <span className=\"text-foreground capitalize\">{product.item_condition}</span></p>\n                )}\n              </div>\n            )}\n\n            {/* Custom Attributes */}\n            <CustomAttributesTable attributes={product.custom_attributes || []} />\n\n            {/* Properties */}\n            <PropertiesTable properties={product.properties || []} />\n\n            {/* Customizer */}\n            <ProductCustomizer\n              product={product}\n              onAddToCart={onAddToCart}\n              onVariantChange={(variantId) => setSelectedVariantId(variantId)}\n            />\n          </div>\n        }\n      />\n\n      {showRelated && relatedProducts && relatedProducts.length > 0 && (\n        <RelatedProductsSection\n          products={relatedProducts}\n        />\n      )}\n    </div>\n  );\n}\n"
     }
   ]
 }

package/registry/digital-product-layout.json

@@ -7,12 +7,13 @@
     "product-image-gallery",
     "product-customizer",
     "price",
+    "rich-text",
     "cn"
   ],
   "files": [
     {
       "path": "layouts/digital-product-layout.tsx",
-      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { ProductLayoutProps } from \"@cimplify/sdk/react\";\nimport {\n  TwoColumnGrid,\n  RelatedProductsSection,\n  CustomAttributesTable,\n  TagPills,\n} from \"@cimplify/sdk/react\";\nimport { ProductImageGallery } from \"@cimplify/sdk/react\";\nimport { ProductCustomizer } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nconst DIGITAL_TYPE_LABELS: Record<string, string> = {\n  download: \"Digital download\",\n  license: \"Software license\",\n  event_ticket: \"Event ticket\",\n  access_pass: \"Access pass\",\n  gift_card: \"Gift card\",\n};\n\nexport function DigitalProductLayout({\n  product,\n  onAddToCart,\n  renderBreadcrumb,\n  relatedProducts,\n  showRelated = true,\n  className,\n}: ProductLayoutProps): React.ReactElement {\n  const images = product.images || (product.image_url ? [product.image_url] : []);\n  const typeLabel = product.digital_type\n    ? DIGITAL_TYPE_LABELS[product.digital_type] || product.digital_type\n    : \"Digital product\";\n\n  const isTicket = product.digital_type === \"event_ticket\";\n  const isAccessPass = product.digital_type === \"access_pass\";\n  const isDownload = product.digital_type === \"download\" || product.digital_type === \"license\";\n\n  return (\n    <div data-cimplify-product-layout=\"digital\" className={cn(\"space-y-8\", className)}>\n      {renderBreadcrumb?.(product)}\n\n      <TwoColumnGrid\n        left={\n          <ProductImageGallery\n            images={images}\n            productName={product.name}\n          />\n        }\n        right={\n          <div className=\"space-y-6\">\n            {/* Type badge + tags */}\n            <div className=\"flex flex-wrap items-center gap-2\">\n              <span data-cimplify-product-layout-badge className=\"text-xs font-semibold uppercase tracking-wider text-primary bg-primary/10 px-2.5 py-1 rounded-full\">\n                {typeLabel}\n              </span>\n              <TagPills tags={product.tags || []} />\n            </div>\n\n            {/* Name + Price */}\n            <div>\n              <h1 data-cimplify-product-layout-name className=\"text-3xl lg:text-4xl font-extrabold tracking-tight\">\n                {product.name}\n              </h1>\n              <Price amount={product.default_price} className=\"text-2xl font-bold mt-2 block\" />\n            </div>\n\n            {/* Description */}\n            {product.description && (\n              <p data-cimplify-product-layout-description className=\"text-muted-foreground leading-relaxed\">\n                {product.description}\n              </p>\n            )}\n\n            {/* Delivery notice */}\n            {isDownload && (\n              <div data-cimplify-product-layout-delivery className=\"flex items-center gap-3 px-4 py-3 bg-muted rounded-lg\">\n                <svg className=\"w-5 h-5 text-primary shrink-0\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                  <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M13 10V3L4 14h7v7l9-11h-7z\" />\n                </svg>\n                <div>\n                  <p className=\"text-sm font-medium\">Instant delivery</p>\n                  <p className=\"text-xs text-muted-foreground\">Download immediately after purchase</p>\n                </div>\n              </div>\n            )}\n\n            {/* Event info */}\n            {isTicket && (product.event_date || product.venue) && (\n              <div data-cimplify-product-layout-event className=\"border border-border p-4 space-y-2\">\n                {product.event_date && (\n                  <div className=\"flex items-center gap-2 text-sm\">\n                    <span className=\"text-muted-foreground\">Date:</span>\n                    <span className=\"font-medium\">{new Date(product.event_date).toLocaleDateString(undefined, { weekday: \"long\", year: \"numeric\", month: \"long\", day: \"numeric\" })}</span>\n                  </div>\n                )}\n                {product.venue && (\n                  <div className=\"flex items-center gap-2 text-sm\">\n                    <span className=\"text-muted-foreground\">Venue:</span>\n                    <span className=\"font-medium\">{product.venue}</span>\n                  </div>\n                )}\n                {product.ticket_type && (\n                  <div className=\"flex items-center gap-2 text-sm\">\n                    <span className=\"text-muted-foreground\">Type:</span>\n                    <span className=\"font-medium capitalize\">{product.ticket_type}</span>\n                  </div>\n                )}\n              </div>\n            )}\n\n            {/* Access pass info */}\n            {isAccessPass && (product.access_type || product.access_duration_days) && (\n              <div data-cimplify-product-layout-access className=\"border border-border p-4 space-y-2\">\n                {product.access_type && (\n                  <div className=\"flex items-center gap-2 text-sm\">\n                    <span className=\"text-muted-foreground\">Access:</span>\n                    <span className=\"font-medium capitalize\">{product.access_type}</span>\n                  </div>\n                )}\n                {product.access_level && (\n                  <div className=\"flex items-center gap-2 text-sm\">\n                    <span className=\"text-muted-foreground\">Level:</span>\n                    <span className=\"font-medium capitalize\">{product.access_level}</span>\n                  </div>\n                )}\n                {product.access_duration_days && (\n                  <div className=\"flex items-center gap-2 text-sm\">\n                    <span className=\"text-muted-foreground\">Duration:</span>\n                    <span className=\"font-medium\">{product.access_duration_days} days</span>\n                  </div>\n                )}\n              </div>\n            )}\n\n            {/* File details */}\n            {isDownload && (product.file_size_mb || product.file_type || product.version || product.max_downloads) && (\n              <div data-cimplify-product-layout-file-details className=\"grid grid-cols-2 gap-3\">\n                {product.file_type && (\n                  <div className=\"px-3 py-2 bg-muted text-center\">\n                    <p className=\"text-xs text-muted-foreground\">Format</p>\n                    <p className=\"text-sm font-semibold\">{product.file_type.toUpperCase()}</p>\n                  </div>\n                )}\n                {product.file_size_mb != null && (\n                  <div className=\"px-3 py-2 bg-muted text-center\">\n                    <p className=\"text-xs text-muted-foreground\">Size</p>\n                    <p className=\"text-sm font-semibold\">{product.file_size_mb >= 1024 ? `${(product.file_size_mb / 1024).toFixed(1)} GB` : `${product.file_size_mb} MB`}</p>\n                  </div>\n                )}\n                {product.max_downloads != null && (\n                  <div className=\"px-3 py-2 bg-muted text-center\">\n                    <p className=\"text-xs text-muted-foreground\">Downloads</p>\n                    <p className=\"text-sm font-semibold\">{product.max_downloads}</p>\n                  </div>\n                )}\n                {product.version && (\n                  <div className=\"px-3 py-2 bg-muted text-center\">\n                    <p className=\"text-xs text-muted-foreground\">Version</p>\n                    <p className=\"text-sm font-semibold\">v{product.version}</p>\n                  </div>\n                )}\n                {product.download_expires_days != null && (\n                  <div className=\"px-3 py-2 bg-muted text-center\">\n                    <p className=\"text-xs text-muted-foreground\">Expires</p>\n                    <p className=\"text-sm font-semibold\">{product.download_expires_days} days</p>\n                  </div>\n                )}\n                {product.max_activations != null && (\n                  <div className=\"px-3 py-2 bg-muted text-center\">\n                    <p className=\"text-xs text-muted-foreground\">Activations</p>\n                    <p className=\"text-sm font-semibold\">{product.max_activations}</p>\n                  </div>\n                )}\n              </div>\n            )}\n\n            {/* Custom Attributes */}\n            <CustomAttributesTable attributes={product.custom_attributes || []} />\n\n            {/* Customizer (license variants, billing plans, add to cart) */}\n            <ProductCustomizer\n              product={product}\n              onAddToCart={onAddToCart}\n              showSpecialInstructions={false}\n            />\n          </div>\n        }\n      />\n\n      {showRelated && relatedProducts && relatedProducts.length > 0 && (\n        <RelatedProductsSection\n          products={relatedProducts}\n          title=\"More digital products\"\n        />\n      )}\n    </div>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { ProductLayoutProps } from \"@cimplify/sdk/react\";\nimport {\n  TwoColumnGrid,\n  RelatedProductsSection,\n  CustomAttributesTable,\n  TagPills,\n} from \"@cimplify/sdk/react\";\nimport { ProductImageGallery } from \"@cimplify/sdk/react\";\nimport { ProductCustomizer } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { RichText } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nconst DIGITAL_TYPE_LABELS: Record<string, string> = {\n  download: \"Digital download\",\n  license: \"Software license\",\n  event_ticket: \"Event ticket\",\n  access_pass: \"Access pass\",\n  gift_card: \"Gift card\",\n};\n\nexport function DigitalProductLayout({\n  product,\n  onAddToCart,\n  renderBreadcrumb,\n  relatedProducts,\n  showRelated = true,\n  className,\n}: ProductLayoutProps): React.ReactElement {\n  const images = product.images || (product.image_url ? [product.image_url] : []);\n  const typeLabel = product.digital_type\n    ? DIGITAL_TYPE_LABELS[product.digital_type] || product.digital_type\n    : \"Digital product\";\n\n  const isTicket = product.digital_type === \"event_ticket\";\n  const isAccessPass = product.digital_type === \"access_pass\";\n  const isDownload = product.digital_type === \"download\" || product.digital_type === \"license\";\n\n  return (\n    <div data-cimplify-product-layout=\"digital\" className={cn(\"space-y-8\", className)}>\n      {renderBreadcrumb?.(product)}\n\n      <TwoColumnGrid\n        left={\n          <ProductImageGallery\n            images={images}\n            productName={product.name}\n          />\n        }\n        right={\n          <div className=\"space-y-6\">\n            {/* Type badge + tags */}\n            <div className=\"flex flex-wrap items-center gap-2\">\n              <span data-cimplify-product-layout-badge className=\"text-xs font-semibold uppercase tracking-wider text-primary bg-primary/10 px-2.5 py-1 rounded-full\">\n                {typeLabel}\n              </span>\n              <TagPills tags={product.tags || []} />\n            </div>\n\n            {/* Name + Price */}\n            <div>\n              <h1 data-cimplify-product-layout-name className=\"text-3xl lg:text-4xl font-extrabold tracking-tight\">\n                {product.name}\n              </h1>\n              <Price amount={product.default_price} className=\"text-2xl font-bold mt-2 block\" />\n            </div>\n\n            {/* Description */}\n            <RichText html={product.description} data-cimplify-product-layout-description />\n\n            {/* Delivery notice */}\n            {isDownload && (\n              <div data-cimplify-product-layout-delivery className=\"flex items-center gap-3 px-4 py-3 bg-muted rounded-lg\">\n                <svg className=\"w-5 h-5 text-primary shrink-0\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                  <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M13 10V3L4 14h7v7l9-11h-7z\" />\n                </svg>\n                <div>\n                  <p className=\"text-sm font-medium\">Instant delivery</p>\n                  <p className=\"text-xs text-muted-foreground\">Download immediately after purchase</p>\n                </div>\n              </div>\n            )}\n\n            {/* Event info */}\n            {isTicket && (product.event_date || product.venue) && (\n              <div data-cimplify-product-layout-event className=\"border border-border p-4 space-y-2\">\n                {product.event_date && (\n                  <div className=\"flex items-center gap-2 text-sm\">\n                    <span className=\"text-muted-foreground\">Date:</span>\n                    <span className=\"font-medium\">{new Date(product.event_date).toLocaleDateString(undefined, { weekday: \"long\", year: \"numeric\", month: \"long\", day: \"numeric\" })}</span>\n                  </div>\n                )}\n                {product.venue && (\n                  <div className=\"flex items-center gap-2 text-sm\">\n                    <span className=\"text-muted-foreground\">Venue:</span>\n                    <span className=\"font-medium\">{product.venue}</span>\n                  </div>\n                )}\n                {product.ticket_type && (\n                  <div className=\"flex items-center gap-2 text-sm\">\n                    <span className=\"text-muted-foreground\">Type:</span>\n                    <span className=\"font-medium capitalize\">{product.ticket_type}</span>\n                  </div>\n                )}\n              </div>\n            )}\n\n            {/* Access pass info */}\n            {isAccessPass && (product.access_type || product.access_duration_days) && (\n              <div data-cimplify-product-layout-access className=\"border border-border p-4 space-y-2\">\n                {product.access_type && (\n                  <div className=\"flex items-center gap-2 text-sm\">\n                    <span className=\"text-muted-foreground\">Access:</span>\n                    <span className=\"font-medium capitalize\">{product.access_type}</span>\n                  </div>\n                )}\n                {product.access_level && (\n                  <div className=\"flex items-center gap-2 text-sm\">\n                    <span className=\"text-muted-foreground\">Level:</span>\n                    <span className=\"font-medium capitalize\">{product.access_level}</span>\n                  </div>\n                )}\n                {product.access_duration_days && (\n                  <div className=\"flex items-center gap-2 text-sm\">\n                    <span className=\"text-muted-foreground\">Duration:</span>\n                    <span className=\"font-medium\">{product.access_duration_days} days</span>\n                  </div>\n                )}\n              </div>\n            )}\n\n            {/* File details */}\n            {isDownload && (product.file_size_mb || product.file_type || product.version || product.max_downloads) && (\n              <div data-cimplify-product-layout-file-details className=\"grid grid-cols-2 gap-3\">\n                {product.file_type && (\n                  <div className=\"px-3 py-2 bg-muted text-center\">\n                    <p className=\"text-xs text-muted-foreground\">Format</p>\n                    <p className=\"text-sm font-semibold\">{product.file_type.toUpperCase()}</p>\n                  </div>\n                )}\n                {product.file_size_mb != null && (\n                  <div className=\"px-3 py-2 bg-muted text-center\">\n                    <p className=\"text-xs text-muted-foreground\">Size</p>\n                    <p className=\"text-sm font-semibold\">{product.file_size_mb >= 1024 ? `${(product.file_size_mb / 1024).toFixed(1)} GB` : `${product.file_size_mb} MB`}</p>\n                  </div>\n                )}\n                {product.max_downloads != null && (\n                  <div className=\"px-3 py-2 bg-muted text-center\">\n                    <p className=\"text-xs text-muted-foreground\">Downloads</p>\n                    <p className=\"text-sm font-semibold\">{product.max_downloads}</p>\n                  </div>\n                )}\n                {product.version && (\n                  <div className=\"px-3 py-2 bg-muted text-center\">\n                    <p className=\"text-xs text-muted-foreground\">Version</p>\n                    <p className=\"text-sm font-semibold\">v{product.version}</p>\n                  </div>\n                )}\n                {product.download_expires_days != null && (\n                  <div className=\"px-3 py-2 bg-muted text-center\">\n                    <p className=\"text-xs text-muted-foreground\">Expires</p>\n                    <p className=\"text-sm font-semibold\">{product.download_expires_days} days</p>\n                  </div>\n                )}\n                {product.max_activations != null && (\n                  <div className=\"px-3 py-2 bg-muted text-center\">\n                    <p className=\"text-xs text-muted-foreground\">Activations</p>\n                    <p className=\"text-sm font-semibold\">{product.max_activations}</p>\n                  </div>\n                )}\n              </div>\n            )}\n\n            {/* Custom Attributes */}\n            <CustomAttributesTable attributes={product.custom_attributes || []} />\n\n            {/* Customizer (license variants, billing plans, add to cart) */}\n            <ProductCustomizer\n              product={product}\n              onAddToCart={onAddToCart}\n              showSpecialInstructions={false}\n            />\n          </div>\n        }\n      />\n\n      {showRelated && relatedProducts && relatedProducts.length > 0 && (\n        <RelatedProductsSection\n          products={relatedProducts}\n          title=\"More digital products\"\n        />\n      )}\n    </div>\n  );\n}\n"
     }
   ]
 }

package/registry/food-product-layout.json

@@ -7,12 +7,13 @@
     "product-image-gallery",
     "product-customizer",
     "price",
+    "rich-text",
     "cn"
   ],
   "files": [
     {
       "path": "layouts/food-product-layout.tsx",
-      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { ProductLayoutProps } from \"@cimplify/sdk/react\";\nimport {\n  TwoColumnGrid,\n  RelatedProductsSection,\n  MetadataStringList,\n  CustomAttributesTable,\n  TagPills,\n  getMetadataStringList,\n} from \"@cimplify/sdk/react\";\nimport { ProductImageGallery } from \"@cimplify/sdk/react\";\nimport { ProductCustomizer } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { parsePrice } from \"@cimplify/sdk\";\nimport { cn } from \"@cimplify/sdk/react\";\n\n\nexport function FoodProductLayout({\n  product,\n  onAddToCart,\n  renderBreadcrumb,\n  relatedProducts,\n  showRelated = true,\n  className,\n}: ProductLayoutProps): React.ReactElement {\n  const images = product.images || (product.image_url ? [product.image_url] : []);\n  const tags = product.tags || [];\n  const ingredients = getMetadataStringList(product.metadata, \"ingredients\");\n  const pairings = getMetadataStringList(product.metadata, \"pairings\");\n\n  return (\n    <div data-cimplify-product-layout=\"food\" className={cn(\"space-y-8\", className)}>\n      {renderBreadcrumb?.(product)}\n\n      <TwoColumnGrid\n        left={\n          <ProductImageGallery\n            images={images}\n            productName={product.name}\n          />\n        }\n        right={\n          <div className=\"space-y-6\">\n            {/* Tags + Allergens */}\n            <div className=\"flex flex-wrap gap-1.5\">\n              {tags.map((tag) => (\n                <span key={tag} className=\"inline-flex items-center gap-1 px-2.5 py-1 bg-green-100 text-green-800 text-xs font-medium rounded-full\">\n                  {tag}\n                </span>\n              ))}\n              {product.allergies && product.allergies.map((allergy) => (\n                <span key={allergy} className=\"inline-flex items-center gap-1 px-2.5 py-1 bg-amber-100 text-amber-800 text-xs font-medium rounded-full\">\n                  Contains {allergy}\n                </span>\n              ))}\n            </div>\n\n            {/* Name + Price */}\n            <div>\n              <h1 data-cimplify-product-layout-name className=\"text-3xl lg:text-4xl font-bold tracking-tight\">\n                {product.name}\n              </h1>\n              <Price amount={product.default_price} className=\"text-2xl font-semibold mt-2 block\" />\n            </div>\n\n            {/* Quick stats */}\n            {(product.calories != null || product.preparation_time_minutes != null) && (\n              <div data-cimplify-product-layout-stats className=\"flex flex-wrap gap-4 py-3 border-y border-border\">\n                {product.preparation_time_minutes != null && (\n                  <span className=\"flex items-center gap-1.5 text-sm text-muted-foreground\">\n                    <strong className=\"text-foreground\">{product.preparation_time_minutes} min</strong> prep time\n                  </span>\n                )}\n                {product.calories != null && (\n                  <span className=\"flex items-center gap-1.5 text-sm text-muted-foreground\">\n                    <strong className=\"text-foreground\">{product.calories}</strong> calories\n                  </span>\n                )}\n              </div>\n            )}\n\n            {/* Description */}\n            {product.description && (\n              <p data-cimplify-product-layout-description className=\"text-muted-foreground leading-relaxed\">\n                {product.description}\n              </p>\n            )}\n\n            {/* Ingredients + Pairings */}\n            {(ingredients.length > 0 || pairings.length > 0) && (\n              <div className=\"grid sm:grid-cols-2 gap-4\">\n                <MetadataStringList items={ingredients} label=\"Key Ingredients\" />\n                <MetadataStringList items={pairings} label=\"Pairings\" />\n              </div>\n            )}\n\n            {/* Custom Attributes */}\n            <CustomAttributesTable attributes={product.custom_attributes || []} />\n\n            {/* Customizer (variants, add-ons, composites, bundles, billing, volume) */}\n            <ProductCustomizer\n              product={product}\n              onAddToCart={onAddToCart}\n            />\n          </div>\n        }\n      />\n\n      {showRelated && relatedProducts && relatedProducts.length > 0 && (\n        <RelatedProductsSection\n          products={relatedProducts}\n          title=\"You may also enjoy\"\n        />\n      )}\n    </div>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { ProductLayoutProps } from \"@cimplify/sdk/react\";\nimport {\n  TwoColumnGrid,\n  RelatedProductsSection,\n  MetadataStringList,\n  CustomAttributesTable,\n  TagPills,\n  getMetadataStringList,\n} from \"@cimplify/sdk/react\";\nimport { ProductImageGallery } from \"@cimplify/sdk/react\";\nimport { ProductCustomizer } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { parsePrice } from \"@cimplify/sdk\";\nimport { RichText } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\n\nexport function FoodProductLayout({\n  product,\n  onAddToCart,\n  renderBreadcrumb,\n  relatedProducts,\n  showRelated = true,\n  className,\n}: ProductLayoutProps): React.ReactElement {\n  const images = product.images || (product.image_url ? [product.image_url] : []);\n  const tags = product.tags || [];\n  const ingredients = getMetadataStringList(product.metadata, \"ingredients\");\n  const pairings = getMetadataStringList(product.metadata, \"pairings\");\n\n  return (\n    <div data-cimplify-product-layout=\"food\" className={cn(\"space-y-8\", className)}>\n      {renderBreadcrumb?.(product)}\n\n      <TwoColumnGrid\n        left={\n          <ProductImageGallery\n            images={images}\n            productName={product.name}\n          />\n        }\n        right={\n          <div className=\"space-y-6\">\n            {/* Tags + Allergens */}\n            <div className=\"flex flex-wrap gap-1.5\">\n              {tags.map((tag) => (\n                <span key={tag} className=\"inline-flex items-center gap-1 px-2.5 py-1 bg-green-100 text-green-800 text-xs font-medium rounded-full\">\n                  {tag}\n                </span>\n              ))}\n              {product.allergies && product.allergies.map((allergy) => (\n                <span key={allergy} className=\"inline-flex items-center gap-1 px-2.5 py-1 bg-amber-100 text-amber-800 text-xs font-medium rounded-full\">\n                  Contains {allergy}\n                </span>\n              ))}\n            </div>\n\n            {/* Name + Price */}\n            <div>\n              <h1 data-cimplify-product-layout-name className=\"text-3xl lg:text-4xl font-bold tracking-tight\">\n                {product.name}\n              </h1>\n              <Price amount={product.default_price} className=\"text-2xl font-semibold mt-2 block\" />\n            </div>\n\n            {/* Quick stats */}\n            {(product.calories != null || product.preparation_time_minutes != null) && (\n              <div data-cimplify-product-layout-stats className=\"flex flex-wrap gap-4 py-3 border-y border-border\">\n                {product.preparation_time_minutes != null && (\n                  <span className=\"flex items-center gap-1.5 text-sm text-muted-foreground\">\n                    <strong className=\"text-foreground\">{product.preparation_time_minutes} min</strong> prep time\n                  </span>\n                )}\n                {product.calories != null && (\n                  <span className=\"flex items-center gap-1.5 text-sm text-muted-foreground\">\n                    <strong className=\"text-foreground\">{product.calories}</strong> calories\n                  </span>\n                )}\n              </div>\n            )}\n\n            {/* Description */}\n            <RichText html={product.description} data-cimplify-product-layout-description />\n\n            {/* Ingredients + Pairings */}\n            {(ingredients.length > 0 || pairings.length > 0) && (\n              <div className=\"grid sm:grid-cols-2 gap-4\">\n                <MetadataStringList items={ingredients} label=\"Key Ingredients\" />\n                <MetadataStringList items={pairings} label=\"Pairings\" />\n              </div>\n            )}\n\n            {/* Custom Attributes */}\n            <CustomAttributesTable attributes={product.custom_attributes || []} />\n\n            {/* Customizer (variants, add-ons, composites, bundles, billing, volume) */}\n            <ProductCustomizer\n              product={product}\n              onAddToCart={onAddToCart}\n            />\n          </div>\n        }\n      />\n\n      {showRelated && relatedProducts && relatedProducts.length > 0 && (\n        <RelatedProductsSection\n          products={relatedProducts}\n          title=\"You may also enjoy\"\n        />\n      )}\n    </div>\n  );\n}\n"
     }
   ]
 }

package/registry/index.json

@@ -124,6 +124,15 @@
         "cn"
       ]
     },
+    {
+      "name": "rich-text",
+      "title": "RichText",
+      "description": "Renders sanitized merchant-authored HTML (descriptions) with theme-aware prose styling. Edge-safe XSS sanitization via the pure-JS xss library.",
+      "type": "component",
+      "registryDependencies": [
+        "cn"
+      ]
+    },
     {
       "name": "product-sheet",
       "title": "ProductSheet",
@@ -133,6 +142,7 @@
         "price",
         "product-image-gallery",
         "product-customizer",
+        "rich-text",
         "cn"
       ]
     },
@@ -555,6 +565,7 @@
         "price-range",
         "availability-badge",
         "sale-badge",
+        "rich-text",
         "cn"
       ]
     },
@@ -567,6 +578,7 @@
         "product-image-gallery",
         "product-customizer",
         "price",
+        "rich-text",
         "cn"
       ]
     },
@@ -581,6 +593,7 @@
         "price",
         "price-range",
         "volume-pricing",
+        "rich-text",
         "cn"
       ]
     },
@@ -593,6 +606,7 @@
         "product-image-gallery",
         "product-customizer",
         "price",
+        "rich-text",
         "cn"
       ]
     },
@@ -605,6 +619,7 @@
         "product-image-gallery",
         "product-customizer",
         "price",
+        "rich-text",
         "cn"
       ]
     },

package/registry/product-sheet.json

@@ -7,12 +7,13 @@
     "price",
     "product-image-gallery",
     "product-customizer",
+    "rich-text",
     "cn"
   ],
   "files": [
     {
       "path": "product-sheet.tsx",
-      "content": "\"use client\";\n\nimport React, { useState } from \"react\";\nimport type { Product, ProductWithDetails, VariantView } from \"@cimplify/sdk\";\nimport type { AddToCartOptions } from \"@cimplify/sdk/react\";\nimport { useProduct } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { ProductImageGallery } from \"@cimplify/sdk/react\";\nimport { ProductCustomizer } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface ProductSheetClassNames {\n  root?: string;\n  image?: string;\n  header?: string;\n  name?: string;\n  price?: string;\n  description?: string;\n  customizer?: string;\n  loading?: string;\n}\n\nexport interface ProductSheetProps {\n  /** A slim Product (triggers lazy-fetch) or a fully-loaded ProductWithDetails. */\n  product: Product | ProductWithDetails;\n  /** Called when the sheet should close. */\n  onClose?: () => void;\n  /** Override the default add-to-cart behavior. */\n  onAddToCart?: (\n    product: ProductWithDetails,\n    quantity: number,\n    options: AddToCartOptions,\n  ) => void | Promise<void>;\n  /** Custom image renderer (e.g. Next.js Image). */\n  renderImage?: (props: {\n    src: string;\n    alt: string;\n    className?: string;\n  }) => React.ReactNode;\n  className?: string;\n  classNames?: ProductSheetClassNames;\n}\n\nfunction isProductWithDetails(\n  product: Product | ProductWithDetails,\n): product is ProductWithDetails {\n  return \"variants\" in product;\n}\n\n/**\n * ProductSheet — full product detail view composing gallery, header, and customizer.\n *\n * When given a slim `Product`, it lazy-fetches the full details via `useProduct`.\n * When given a `ProductWithDetails`, it skips the fetch entirely.\n */\nexport function ProductSheet({\n  product,\n  onClose,\n  onAddToCart,\n  renderImage,\n  className,\n  classNames,\n}: ProductSheetProps): React.ReactElement {\n  const needsFetch = !isProductWithDetails(product);\n  const { product: fetched, isLoading } = useProduct(\n    product.slug ?? product.id,\n    { enabled: needsFetch },\n  );\n  const fullProduct = needsFetch ? fetched : (product as ProductWithDetails);\n\n  // Loading state\n  if (isLoading && !fullProduct) {\n    return (\n      <div\n        data-cimplify-product-sheet\n        aria-busy=\"true\"\n        className={cn(className, classNames?.root, classNames?.loading)}\n      >\n        <div\n          data-cimplify-product-sheet-skeleton\n          style={{\n            display: \"flex\",\n            flexDirection: \"column\",\n            gap: \"1rem\",\n          }}\n        >\n          <div\n            style={{\n              aspectRatio: \"4/3\",\n              backgroundColor: \"rgba(0,0,0,0.06)\",\n              borderRadius: \"0.5rem\",\n            }}\n          />\n          <div\n            style={{\n              height: \"1.5rem\",\n              width: \"60%\",\n              backgroundColor: \"rgba(0,0,0,0.06)\",\n              borderRadius: \"0.25rem\",\n            }}\n          />\n          <div\n            style={{\n              height: \"1rem\",\n              width: \"30%\",\n              backgroundColor: \"rgba(0,0,0,0.06)\",\n              borderRadius: \"0.25rem\",\n            }}\n          />\n        </div>\n      </div>\n    );\n  }\n\n  // Error state\n  if (!fullProduct) {\n    return (\n      <div\n        data-cimplify-product-sheet\n        className={cn(className, classNames?.root)}\n      >\n        <p>Product not found.</p>\n      </div>\n    );\n  }\n\n  const [selectedVariant, setSelectedVariant] = useState<VariantView | undefined>(\n    undefined,\n  );\n\n  const variantImages = selectedVariant?.images?.filter(Boolean) ?? [];\n  const productImages: string[] = [];\n  if (fullProduct.images && fullProduct.images.length > 0) {\n    productImages.push(...fullProduct.images.filter(Boolean));\n  } else if (fullProduct.image_url) {\n    productImages.push(fullProduct.image_url);\n  }\n  const images: string[] =\n    variantImages.length > 0 ? variantImages : productImages;\n\n  const hasMultipleImages = images.length > 1;\n  const singleImage = images[0];\n\n  return (\n    <div\n      data-cimplify-product-sheet\n      className={cn(className, classNames?.root)}\n      style={{ display: \"flex\", flexDirection: \"column\", gap: \"1rem\" }}\n    >\n      {/* Image area */}\n      {hasMultipleImages ? (\n        <ProductImageGallery\n          images={images}\n          productName={fullProduct.name}\n          className={classNames?.image}\n        />\n      ) : singleImage ? (\n        <div data-cimplify-product-sheet-image className={classNames?.image}>\n          {renderImage ? (\n            renderImage({ src: singleImage, alt: fullProduct.name })\n          ) : (\n            <img\n              src={singleImage}\n              alt={fullProduct.name}\n              style={{ width: \"100%\", height: \"auto\", objectFit: \"cover\" }}\n            />\n          )}\n        </div>\n      ) : null}\n\n      {/* Header */}\n      <div data-cimplify-product-sheet-header className={classNames?.header}>\n        <h2\n          data-cimplify-product-sheet-name\n          className={classNames?.name}\n          style={{ margin: 0 }}\n        >\n          {fullProduct.name}\n        </h2>\n        <Price\n          amount={fullProduct.default_price}\n          className={classNames?.price}\n        />\n      </div>\n\n      {/* Description — merchant-authored HTML from the catalogue. */}\n      {fullProduct.description && (\n        <div\n          data-cimplify-product-sheet-description\n          className={cn(\"text-sm leading-relaxed text-muted-foreground [&_p]:m-0 [&_p+p]:mt-2\", classNames?.description)}\n          dangerouslySetInnerHTML={{ __html: fullProduct.description }}\n        />\n      )}\n\n      {/* Customizer */}\n      <ProductCustomizer\n        product={fullProduct}\n        onAddToCart={onAddToCart}\n        onVariantChange={(_id, variant) => setSelectedVariant(variant)}\n        className={classNames?.customizer}\n      />\n    </div>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport React, { useState } from \"react\";\nimport type { Product, ProductWithDetails, VariantView } from \"@cimplify/sdk\";\nimport type { AddToCartOptions } from \"@cimplify/sdk/react\";\nimport { useProduct } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { ProductImageGallery } from \"@cimplify/sdk/react\";\nimport { ProductCustomizer } from \"@cimplify/sdk/react\";\nimport { RichText } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface ProductSheetClassNames {\n  root?: string;\n  image?: string;\n  header?: string;\n  name?: string;\n  price?: string;\n  description?: string;\n  customizer?: string;\n  loading?: string;\n}\n\nexport interface ProductSheetProps {\n  /** A slim Product (triggers lazy-fetch) or a fully-loaded ProductWithDetails. */\n  product: Product | ProductWithDetails;\n  /** Called when the sheet should close. */\n  onClose?: () => void;\n  /** Override the default add-to-cart behavior. */\n  onAddToCart?: (\n    product: ProductWithDetails,\n    quantity: number,\n    options: AddToCartOptions,\n  ) => void | Promise<void>;\n  /** Custom image renderer (e.g. Next.js Image). */\n  renderImage?: (props: {\n    src: string;\n    alt: string;\n    className?: string;\n  }) => React.ReactNode;\n  className?: string;\n  classNames?: ProductSheetClassNames;\n}\n\nfunction isProductWithDetails(\n  product: Product | ProductWithDetails,\n): product is ProductWithDetails {\n  return \"variants\" in product;\n}\n\n/**\n * ProductSheet — full product detail view composing gallery, header, and customizer.\n *\n * When given a slim `Product`, it lazy-fetches the full details via `useProduct`.\n * When given a `ProductWithDetails`, it skips the fetch entirely.\n */\nexport function ProductSheet({\n  product,\n  onClose,\n  onAddToCart,\n  renderImage,\n  className,\n  classNames,\n}: ProductSheetProps): React.ReactElement {\n  const needsFetch = !isProductWithDetails(product);\n  const { product: fetched, isLoading } = useProduct(\n    product.slug ?? product.id,\n    { enabled: needsFetch },\n  );\n  const fullProduct = needsFetch ? fetched : (product as ProductWithDetails);\n\n  // Loading state\n  if (isLoading && !fullProduct) {\n    return (\n      <div\n        data-cimplify-product-sheet\n        aria-busy=\"true\"\n        className={cn(className, classNames?.root, classNames?.loading)}\n      >\n        <div\n          data-cimplify-product-sheet-skeleton\n          style={{\n            display: \"flex\",\n            flexDirection: \"column\",\n            gap: \"1rem\",\n          }}\n        >\n          <div\n            style={{\n              aspectRatio: \"4/3\",\n              backgroundColor: \"rgba(0,0,0,0.06)\",\n              borderRadius: \"0.5rem\",\n            }}\n          />\n          <div\n            style={{\n              height: \"1.5rem\",\n              width: \"60%\",\n              backgroundColor: \"rgba(0,0,0,0.06)\",\n              borderRadius: \"0.25rem\",\n            }}\n          />\n          <div\n            style={{\n              height: \"1rem\",\n              width: \"30%\",\n              backgroundColor: \"rgba(0,0,0,0.06)\",\n              borderRadius: \"0.25rem\",\n            }}\n          />\n        </div>\n      </div>\n    );\n  }\n\n  // Error state\n  if (!fullProduct) {\n    return (\n      <div\n        data-cimplify-product-sheet\n        className={cn(className, classNames?.root)}\n      >\n        <p>Product not found.</p>\n      </div>\n    );\n  }\n\n  const [selectedVariant, setSelectedVariant] = useState<VariantView | undefined>(\n    undefined,\n  );\n\n  const variantImages = selectedVariant?.images?.filter(Boolean) ?? [];\n  const productImages: string[] = [];\n  if (fullProduct.images && fullProduct.images.length > 0) {\n    productImages.push(...fullProduct.images.filter(Boolean));\n  } else if (fullProduct.image_url) {\n    productImages.push(fullProduct.image_url);\n  }\n  const images: string[] =\n    variantImages.length > 0 ? variantImages : productImages;\n\n  const hasMultipleImages = images.length > 1;\n  const singleImage = images[0];\n\n  return (\n    <div\n      data-cimplify-product-sheet\n      className={cn(className, classNames?.root)}\n      style={{ display: \"flex\", flexDirection: \"column\", gap: \"1rem\" }}\n    >\n      {/* Image area */}\n      {hasMultipleImages ? (\n        <ProductImageGallery\n          images={images}\n          productName={fullProduct.name}\n          className={classNames?.image}\n        />\n      ) : singleImage ? (\n        <div data-cimplify-product-sheet-image className={classNames?.image}>\n          {renderImage ? (\n            renderImage({ src: singleImage, alt: fullProduct.name })\n          ) : (\n            <img\n              src={singleImage}\n              alt={fullProduct.name}\n              style={{ width: \"100%\", height: \"auto\", objectFit: \"cover\" }}\n            />\n          )}\n        </div>\n      ) : null}\n\n      {/* Header */}\n      <div data-cimplify-product-sheet-header className={classNames?.header}>\n        <h2\n          data-cimplify-product-sheet-name\n          className={classNames?.name}\n          style={{ margin: 0 }}\n        >\n          {fullProduct.name}\n        </h2>\n        <Price\n          amount={fullProduct.default_price}\n          className={classNames?.price}\n        />\n      </div>\n\n      {/* Description — merchant-authored HTML from the catalogue. */}\n      <RichText\n        html={fullProduct.description}\n        data-cimplify-product-sheet-description\n        className={cn(\"text-sm\", classNames?.description)}\n      />\n\n      {/* Customizer */}\n      <ProductCustomizer\n        product={fullProduct}\n        onAddToCart={onAddToCart}\n        onVariantChange={(_id, variant) => setSelectedVariant(variant)}\n        className={classNames?.customizer}\n      />\n    </div>\n  );\n}\n"
     }
   ]
 }

package/registry/rich-text.json

@@ -0,0 +1,15 @@
+{
+  "name": "rich-text",
+  "title": "RichText",
+  "description": "Renders sanitized merchant-authored HTML (descriptions) with theme-aware prose styling. Edge-safe XSS sanitization via the pure-JS xss library.",
+  "type": "component",
+  "registryDependencies": [
+    "cn"
+  ],
+  "files": [
+    {
+      "path": "rich-text.tsx",
+      "content": "\"use client\";\n\nimport React, { useMemo } from \"react\";\nimport { FilterXSS } from \"xss\";\nimport { cn } from \"@cimplify/sdk/react\";\n\n/**\n * Allowlist matching the output of desk's TipTap rich-text editor\n * (StarterKit + Underline + Link + Image). Anything outside this set is\n * dropped; `javascript:`/`vbscript:` URLs and event handlers are stripped by\n * the filter's default safe-value handling.\n */\nconst RICH_TEXT_WHITELIST: Record<string, string[]> = {\n  p: [],\n  br: [],\n  strong: [],\n  b: [],\n  em: [],\n  i: [],\n  u: [],\n  s: [],\n  strike: [],\n  del: [],\n  h1: [],\n  h2: [],\n  h3: [],\n  h4: [],\n  h5: [],\n  h6: [],\n  ul: [],\n  ol: [\"start\", \"type\"],\n  li: [],\n  blockquote: [],\n  code: [],\n  pre: [],\n  hr: [],\n  span: [],\n  a: [\"href\", \"title\", \"target\", \"rel\"],\n  img: [\"src\", \"alt\", \"title\", \"width\", \"height\"],\n};\n\n// A single configured filter instance, reused across every call. Building the\n// filter is non-trivial, so we never reconstruct it per render.\nconst FILTER = new FilterXSS({\n  whiteList: RICH_TEXT_WHITELIST,\n  // Drop unknown tags but keep their text content (e.g. a stray <font>Foo</font>\n  // becomes \"Foo\" rather than vanishing).\n  stripIgnoreTag: true,\n  // Discard the *contents* of these entirely — script/style bodies are never text.\n  stripIgnoreTagBody: [\"script\", \"style\"],\n  allowCommentTag: false,\n});\n\n/**\n * Sanitize merchant-authored HTML for safe rendering. Runs identically on the\n * Cloudflare Workers edge (SSR) and in the browser — no DOM dependency.\n */\nexport function sanitizeRichTextHtml(html: string): string {\n  return FILTER.process(html);\n}\n\n// Theme-aware prose styling. Wired to the consumer's own design tokens\n// (`foreground`, `muted-foreground`, `primary`, `border`, `muted`) so rich\n// text inherits each storefront's type scale and colours.\nconst RICH_TEXT_PROSE = cn(\n  \"text-muted-foreground leading-relaxed\",\n  \"[&>*:first-child]:mt-0 [&>*:last-child]:mb-0\",\n  \"[&_p]:my-3\",\n  \"[&_h1]:mt-6 [&_h1]:mb-2 [&_h1]:text-xl [&_h1]:font-semibold [&_h1]:leading-snug [&_h1]:text-foreground\",\n  \"[&_h2]:mt-5 [&_h2]:mb-2 [&_h2]:text-lg [&_h2]:font-semibold [&_h2]:leading-snug [&_h2]:text-foreground\",\n  \"[&_h3]:mt-4 [&_h3]:mb-1.5 [&_h3]:text-base [&_h3]:font-semibold [&_h3]:text-foreground\",\n  \"[&_h4]:mt-4 [&_h4]:mb-1.5 [&_h4]:text-sm [&_h4]:font-semibold [&_h4]:text-foreground\",\n  \"[&_h5]:mt-3 [&_h5]:mb-1 [&_h5]:font-semibold [&_h5]:text-foreground\",\n  \"[&_h6]:mt-3 [&_h6]:mb-1 [&_h6]:font-semibold [&_h6]:text-foreground\",\n  \"[&_strong]:font-semibold [&_strong]:text-foreground [&_b]:font-semibold [&_b]:text-foreground\",\n  \"[&_em]:italic [&_i]:italic\",\n  \"[&_u]:underline [&_s]:line-through [&_del]:line-through\",\n  \"[&_a]:font-medium [&_a]:text-primary [&_a]:underline [&_a]:underline-offset-2\",\n  \"[&_ul]:my-3 [&_ul]:list-disc [&_ul]:pl-5 [&_ul]:space-y-1\",\n  \"[&_ol]:my-3 [&_ol]:list-decimal [&_ol]:pl-5 [&_ol]:space-y-1\",\n  \"[&_li]:pl-1 [&_li>p]:my-0 [&_ul_ul]:my-1 [&_ol_ol]:my-1 [&_ul_ul]:list-[circle]\",\n  \"[&_blockquote]:my-3 [&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-4 [&_blockquote]:italic\",\n  \"[&_code]:rounded [&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-[0.85em]\",\n  \"[&_pre]:my-3 [&_pre]:overflow-x-auto [&_pre]:rounded-md [&_pre]:bg-muted [&_pre]:p-3 [&_pre]:text-[0.85em]\",\n  \"[&_pre>code]:bg-transparent [&_pre>code]:p-0\",\n  \"[&_hr]:my-4 [&_hr]:border-border\",\n  \"[&_img]:my-3 [&_img]:h-auto [&_img]:max-w-full [&_img]:rounded-md\",\n);\n\nexport interface RichTextProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"dangerouslySetInnerHTML\" | \"children\"> {\n  /** Merchant-authored HTML (e.g. a product description). Sanitized before render. */\n  html?: string | null;\n}\n\n/**\n * RichText — renders sanitized merchant-authored HTML with theme-aware prose\n * styling. Headings, lists, bold, italics, links, quotes and code all display\n * correctly; scripts and event handlers are stripped.\n *\n * Returns `null` when there's no renderable content.\n */\nexport function RichText({ html, className, ...rest }: RichTextProps): React.ReactElement | null {\n  const clean = useMemo(() => (html ? sanitizeRichTextHtml(html) : \"\"), [html]);\n\n  if (!clean) {\n    return null;\n  }\n\n  return (\n    <div\n      data-cimplify-rich-text\n      className={cn(RICH_TEXT_PROSE, className)}\n      dangerouslySetInnerHTML={{ __html: clean }}\n      {...rest}\n    />\n  );\n}\n"
+    }
+  ]
+}

package/registry/service-product-layout.json

@@ -7,12 +7,13 @@
     "product-image-gallery",
     "product-customizer",
     "price",
+    "rich-text",
     "cn"
   ],
   "files": [
     {
       "path": "layouts/service-product-layout.tsx",
-      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { ProductLayoutProps } from \"@cimplify/sdk/react\";\nimport {\n  TwoColumnGrid,\n  RelatedProductsSection,\n  CustomAttributesTable,\n  TagPills,\n} from \"@cimplify/sdk/react\";\nimport { ProductImageGallery } from \"@cimplify/sdk/react\";\nimport { ProductCustomizer } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { parsePrice } from \"@cimplify/sdk\";\nimport { cn } from \"@cimplify/sdk/react\";\nimport { formatDuration } from \"../utils/format-duration\";\n\nexport function ServiceProductLayout({\n  product,\n  onAddToCart,\n  renderBreadcrumb,\n  relatedProducts,\n  showRelated = true,\n  className,\n}: ProductLayoutProps): React.ReactElement {\n  const images = product.images || (product.image_url ? [product.image_url] : []);\n  const hasDeposit = product.deposit_type && product.deposit_type !== \"none\" && product.deposit_amount;\n  const depositAmount = hasDeposit ? parsePrice(product.deposit_amount!) : 0;\n  const cancellationHours = product.cancellation_window_minutes\n    ? Math.floor(product.cancellation_window_minutes / 60)\n    : null;\n\n  return (\n    <div data-cimplify-product-layout=\"service\" className={cn(\"space-y-8\", className)}>\n      {renderBreadcrumb?.(product)}\n\n      <TwoColumnGrid\n        left={\n          <ProductImageGallery\n            images={images}\n            productName={product.name}\n          />\n        }\n        right={\n          <div className=\"space-y-6\">\n            {/* Tags */}\n            <TagPills tags={product.tags || []} />\n\n            {/* Name + Price */}\n            <div>\n              <h1 data-cimplify-product-layout-name className=\"text-3xl lg:text-4xl font-extrabold tracking-tight\">\n                {product.name}\n              </h1>\n              <Price amount={product.default_price} className=\"text-2xl font-bold text-primary mt-2 block\" />\n            </div>\n\n            {/* Service info pills */}\n            <div data-cimplify-product-layout-service-info className=\"flex flex-wrap gap-2\">\n              {product.duration_minutes != null && (\n                <span className=\"inline-flex items-center gap-1.5 px-3 py-1.5 bg-muted text-sm text-muted-foreground rounded-full\">\n                  {formatDuration(product.duration_minutes, product.duration_unit)}\n                </span>\n              )}\n              {hasDeposit && (\n                <span className=\"inline-flex items-center gap-1.5 px-3 py-1.5 bg-muted text-sm text-muted-foreground rounded-full\">\n                  <Price amount={depositAmount} /> deposit\n                </span>\n              )}\n              {product.general_service_capacity != null && product.general_service_capacity > 1 && (\n                <span className=\"inline-flex items-center gap-1.5 px-3 py-1.5 bg-muted text-sm text-muted-foreground rounded-full\">\n                  Up to {product.general_service_capacity} people\n                </span>\n              )}\n              {product.buffer_before_minutes != null && product.buffer_before_minutes > 0 && (\n                <span className=\"inline-flex items-center gap-1.5 px-3 py-1.5 bg-muted text-sm text-muted-foreground rounded-full\">\n                  {product.buffer_before_minutes} min buffer\n                </span>\n              )}\n            </div>\n\n            {/* Description */}\n            {product.description && (\n              <p data-cimplify-product-layout-description className=\"text-muted-foreground leading-relaxed\">\n                {product.description}\n              </p>\n            )}\n\n            {/* Staff & Resource requirements */}\n            {(product.requires_specific_staff || product.requires_specific_resource) && (\n              <div data-cimplify-product-layout-requirements className=\"text-sm text-muted-foreground space-y-1\">\n                {product.requires_specific_staff && (\n                  <p>Staff selection required</p>\n                )}\n                {product.requires_specific_resource && (\n                  <p>Resource selection required</p>\n                )}\n              </div>\n            )}\n\n            {/* Custom Attributes */}\n            <CustomAttributesTable attributes={product.custom_attributes || []} />\n\n            {/* Customizer (variants, scheduling, add to cart) */}\n            <ProductCustomizer\n              product={product}\n              onAddToCart={onAddToCart}\n              showSpecialInstructions={false}\n            />\n\n            {/* Cancellation policy */}\n            {(cancellationHours != null || product.no_show_fee) && (\n              <div data-cimplify-product-layout-cancellation className=\"border border-border p-4 space-y-2 text-sm\">\n                <h3 className=\"font-semibold\">Cancellation Policy</h3>\n                {cancellationHours != null && (\n                  <p className=\"text-muted-foreground\">\n                    Free cancellation up to <strong className=\"text-foreground\">{cancellationHours} hours</strong> before the booking\n                  </p>\n                )}\n                {product.no_show_fee && (\n                  <p className=\"text-muted-foreground\">\n                    No-show fee: <Price amount={product.no_show_fee} className=\"font-medium text-foreground\" />\n                  </p>\n                )}\n                {hasDeposit && (\n                  <p className=\"text-muted-foreground\">\n                    {product.deposit_type === \"fixed\"\n                      ? <><Price amount={depositAmount} className=\"font-medium text-foreground\" /> deposit charged at booking</>\n                      : <>{parsePrice(product.deposit_amount!)}% deposit charged at booking</>\n                    }\n                  </p>\n                )}\n              </div>\n            )}\n          </div>\n        }\n      />\n\n      {showRelated && relatedProducts && relatedProducts.length > 0 && (\n        <RelatedProductsSection\n          products={relatedProducts}\n          title=\"Other services\"\n        />\n      )}\n    </div>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { ProductLayoutProps } from \"@cimplify/sdk/react\";\nimport {\n  TwoColumnGrid,\n  RelatedProductsSection,\n  CustomAttributesTable,\n  TagPills,\n} from \"@cimplify/sdk/react\";\nimport { ProductImageGallery } from \"@cimplify/sdk/react\";\nimport { ProductCustomizer } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { parsePrice } from \"@cimplify/sdk\";\nimport { RichText } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\nimport { formatDuration } from \"../utils/format-duration\";\n\nexport function ServiceProductLayout({\n  product,\n  onAddToCart,\n  renderBreadcrumb,\n  relatedProducts,\n  showRelated = true,\n  className,\n}: ProductLayoutProps): React.ReactElement {\n  const images = product.images || (product.image_url ? [product.image_url] : []);\n  const hasDeposit = product.deposit_type && product.deposit_type !== \"none\" && product.deposit_amount;\n  const depositAmount = hasDeposit ? parsePrice(product.deposit_amount!) : 0;\n  const cancellationHours = product.cancellation_window_minutes\n    ? Math.floor(product.cancellation_window_minutes / 60)\n    : null;\n\n  return (\n    <div data-cimplify-product-layout=\"service\" className={cn(\"space-y-8\", className)}>\n      {renderBreadcrumb?.(product)}\n\n      <TwoColumnGrid\n        left={\n          <ProductImageGallery\n            images={images}\n            productName={product.name}\n          />\n        }\n        right={\n          <div className=\"space-y-6\">\n            {/* Tags */}\n            <TagPills tags={product.tags || []} />\n\n            {/* Name + Price */}\n            <div>\n              <h1 data-cimplify-product-layout-name className=\"text-3xl lg:text-4xl font-extrabold tracking-tight\">\n                {product.name}\n              </h1>\n              <Price amount={product.default_price} className=\"text-2xl font-bold text-primary mt-2 block\" />\n            </div>\n\n            {/* Service info pills */}\n            <div data-cimplify-product-layout-service-info className=\"flex flex-wrap gap-2\">\n              {product.duration_minutes != null && (\n                <span className=\"inline-flex items-center gap-1.5 px-3 py-1.5 bg-muted text-sm text-muted-foreground rounded-full\">\n                  {formatDuration(product.duration_minutes, product.duration_unit)}\n                </span>\n              )}\n              {hasDeposit && (\n                <span className=\"inline-flex items-center gap-1.5 px-3 py-1.5 bg-muted text-sm text-muted-foreground rounded-full\">\n                  <Price amount={depositAmount} /> deposit\n                </span>\n              )}\n              {product.general_service_capacity != null && product.general_service_capacity > 1 && (\n                <span className=\"inline-flex items-center gap-1.5 px-3 py-1.5 bg-muted text-sm text-muted-foreground rounded-full\">\n                  Up to {product.general_service_capacity} people\n                </span>\n              )}\n              {product.buffer_before_minutes != null && product.buffer_before_minutes > 0 && (\n                <span className=\"inline-flex items-center gap-1.5 px-3 py-1.5 bg-muted text-sm text-muted-foreground rounded-full\">\n                  {product.buffer_before_minutes} min buffer\n                </span>\n              )}\n            </div>\n\n            {/* Description */}\n            <RichText html={product.description} data-cimplify-product-layout-description />\n\n            {/* Staff & Resource requirements */}\n            {(product.requires_specific_staff || product.requires_specific_resource) && (\n              <div data-cimplify-product-layout-requirements className=\"text-sm text-muted-foreground space-y-1\">\n                {product.requires_specific_staff && (\n                  <p>Staff selection required</p>\n                )}\n                {product.requires_specific_resource && (\n                  <p>Resource selection required</p>\n                )}\n              </div>\n            )}\n\n            {/* Custom Attributes */}\n            <CustomAttributesTable attributes={product.custom_attributes || []} />\n\n            {/* Customizer (variants, scheduling, add to cart) */}\n            <ProductCustomizer\n              product={product}\n              onAddToCart={onAddToCart}\n              showSpecialInstructions={false}\n            />\n\n            {/* Cancellation policy */}\n            {(cancellationHours != null || product.no_show_fee) && (\n              <div data-cimplify-product-layout-cancellation className=\"border border-border p-4 space-y-2 text-sm\">\n                <h3 className=\"font-semibold\">Cancellation Policy</h3>\n                {cancellationHours != null && (\n                  <p className=\"text-muted-foreground\">\n                    Free cancellation up to <strong className=\"text-foreground\">{cancellationHours} hours</strong> before the booking\n                  </p>\n                )}\n                {product.no_show_fee && (\n                  <p className=\"text-muted-foreground\">\n                    No-show fee: <Price amount={product.no_show_fee} className=\"font-medium text-foreground\" />\n                  </p>\n                )}\n                {hasDeposit && (\n                  <p className=\"text-muted-foreground\">\n                    {product.deposit_type === \"fixed\"\n                      ? <><Price amount={depositAmount} className=\"font-medium text-foreground\" /> deposit charged at booking</>\n                      : <>{parsePrice(product.deposit_amount!)}% deposit charged at booking</>\n                    }\n                  </p>\n                )}\n              </div>\n            )}\n          </div>\n        }\n      />\n\n      {showRelated && relatedProducts && relatedProducts.length > 0 && (\n        <RelatedProductsSection\n          products={relatedProducts}\n          title=\"Other services\"\n        />\n      )}\n    </div>\n  );\n}\n"
     }
   ]
 }

package/registry/wholesale-product-layout.json

@@ -9,12 +9,13 @@
     "price",
     "price-range",
     "volume-pricing",
+    "rich-text",
     "cn"
   ],
   "files": [
     {
       "path": "layouts/wholesale-product-layout.tsx",
-      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { ProductLayoutProps } from \"@cimplify/sdk/react\";\nimport {\n  TwoColumnGrid,\n  RelatedProductsSection,\n  CustomAttributesTable,\n  PropertiesTable,\n  TagPills,\n  InventoryBadge,\n} from \"@cimplify/sdk/react\";\nimport { ProductImageGallery } from \"@cimplify/sdk/react\";\nimport { ProductCustomizer } from \"@cimplify/sdk/react\";\nimport { PriceRange } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { VolumePricing } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport function WholesaleProductLayout({\n  product,\n  onAddToCart,\n  renderBreadcrumb,\n  relatedProducts,\n  showRelated = true,\n  className,\n}: ProductLayoutProps): React.ReactElement {\n  const images = product.images || (product.image_url ? [product.image_url] : []);\n  const hasTiers = product.quantity_pricing && product.quantity_pricing.length > 1;\n\n  return (\n    <div data-cimplify-product-layout=\"wholesale\" className={cn(\"space-y-8\", className)}>\n      {renderBreadcrumb?.(product)}\n\n      <TwoColumnGrid\n        left={\n          <ProductImageGallery\n            images={images}\n            productName={product.name}\n          />\n        }\n        right={\n          <div className=\"space-y-6\">\n            {/* Tags */}\n            <TagPills tags={product.tags || []} />\n\n            {/* SKU + Name */}\n            <div>\n              {product.sku && (\n                <p className=\"text-xs text-muted-foreground font-medium uppercase tracking-wider mb-1\">\n                  SKU: {product.sku}\n                </p>\n              )}\n              <h1 data-cimplify-product-layout-name className=\"text-3xl lg:text-4xl font-extrabold tracking-tight\">\n                {product.name}\n              </h1>\n            </div>\n\n            {/* Price range */}\n            <div>\n              {hasTiers ? (\n                <PriceRange product={product} className=\"text-2xl font-extrabold\" />\n              ) : (\n                <Price amount={product.default_price} className=\"text-2xl font-semibold\" />\n              )}\n            </div>\n\n            {/* Inventory */}\n            <InventoryBadge product={product} />\n\n            {/* Min order notice */}\n            {product.min_order_quantity != null && product.min_order_quantity > 1 && (\n              <div data-cimplify-product-layout-moq className=\"flex items-center gap-3 p-3 bg-amber-50 border border-amber-200 text-sm text-amber-800\">\n                Minimum order quantity: <strong>{product.min_order_quantity} units</strong>\n              </div>\n            )}\n\n            {/* Description */}\n            {product.description && (\n              <p data-cimplify-product-layout-description className=\"text-muted-foreground leading-relaxed\">\n                {product.description}\n              </p>\n            )}\n\n            {/* Volume pricing — open by default for wholesale */}\n            {hasTiers && (\n              <VolumePricing\n                tiers={product.quantity_pricing!}\n                defaultOpen\n              />\n            )}\n\n            {/* Product details */}\n            {(product.sku || product.barcode || product.vendor) && (\n              <div data-cimplify-product-layout-details className=\"space-y-1 text-sm text-muted-foreground\">\n                {product.barcode && <p>Barcode: <span className=\"font-mono text-foreground\">{product.barcode}</span></p>}\n                {product.vendor && <p>Supplier: <span className=\"text-foreground\">{product.vendor}</span></p>}\n                {product.hs_code && <p>HS Code: <span className=\"font-mono text-foreground\">{product.hs_code}</span></p>}\n              </div>\n            )}\n\n            {/* Custom Attributes */}\n            <CustomAttributesTable attributes={product.custom_attributes || []} />\n\n            {/* Properties */}\n            <PropertiesTable properties={product.properties || []} />\n\n            {/* Customizer (variants, billing plans, quantity, add to cart) */}\n            <ProductCustomizer\n              product={product}\n              onAddToCart={onAddToCart}\n            />\n          </div>\n        }\n      />\n\n      {showRelated && relatedProducts && relatedProducts.length > 0 && (\n        <RelatedProductsSection\n          products={relatedProducts}\n          title=\"Related products\"\n        />\n      )}\n    </div>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { ProductLayoutProps } from \"@cimplify/sdk/react\";\nimport {\n  TwoColumnGrid,\n  RelatedProductsSection,\n  CustomAttributesTable,\n  PropertiesTable,\n  TagPills,\n  InventoryBadge,\n} from \"@cimplify/sdk/react\";\nimport { ProductImageGallery } from \"@cimplify/sdk/react\";\nimport { ProductCustomizer } from \"@cimplify/sdk/react\";\nimport { PriceRange } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { VolumePricing } from \"@cimplify/sdk/react\";\nimport { RichText } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport function WholesaleProductLayout({\n  product,\n  onAddToCart,\n  renderBreadcrumb,\n  relatedProducts,\n  showRelated = true,\n  className,\n}: ProductLayoutProps): React.ReactElement {\n  const images = product.images || (product.image_url ? [product.image_url] : []);\n  const hasTiers = product.quantity_pricing && product.quantity_pricing.length > 1;\n\n  return (\n    <div data-cimplify-product-layout=\"wholesale\" className={cn(\"space-y-8\", className)}>\n      {renderBreadcrumb?.(product)}\n\n      <TwoColumnGrid\n        left={\n          <ProductImageGallery\n            images={images}\n            productName={product.name}\n          />\n        }\n        right={\n          <div className=\"space-y-6\">\n            {/* Tags */}\n            <TagPills tags={product.tags || []} />\n\n            {/* SKU + Name */}\n            <div>\n              {product.sku && (\n                <p className=\"text-xs text-muted-foreground font-medium uppercase tracking-wider mb-1\">\n                  SKU: {product.sku}\n                </p>\n              )}\n              <h1 data-cimplify-product-layout-name className=\"text-3xl lg:text-4xl font-extrabold tracking-tight\">\n                {product.name}\n              </h1>\n            </div>\n\n            {/* Price range */}\n            <div>\n              {hasTiers ? (\n                <PriceRange product={product} className=\"text-2xl font-extrabold\" />\n              ) : (\n                <Price amount={product.default_price} className=\"text-2xl font-semibold\" />\n              )}\n            </div>\n\n            {/* Inventory */}\n            <InventoryBadge product={product} />\n\n            {/* Min order notice */}\n            {product.min_order_quantity != null && product.min_order_quantity > 1 && (\n              <div data-cimplify-product-layout-moq className=\"flex items-center gap-3 p-3 bg-amber-50 border border-amber-200 text-sm text-amber-800\">\n                Minimum order quantity: <strong>{product.min_order_quantity} units</strong>\n              </div>\n            )}\n\n            {/* Description */}\n            <RichText html={product.description} data-cimplify-product-layout-description />\n\n            {/* Volume pricing — open by default for wholesale */}\n            {hasTiers && (\n              <VolumePricing\n                tiers={product.quantity_pricing!}\n                defaultOpen\n              />\n            )}\n\n            {/* Product details */}\n            {(product.sku || product.barcode || product.vendor) && (\n              <div data-cimplify-product-layout-details className=\"space-y-1 text-sm text-muted-foreground\">\n                {product.barcode && <p>Barcode: <span className=\"font-mono text-foreground\">{product.barcode}</span></p>}\n                {product.vendor && <p>Supplier: <span className=\"text-foreground\">{product.vendor}</span></p>}\n                {product.hs_code && <p>HS Code: <span className=\"font-mono text-foreground\">{product.hs_code}</span></p>}\n              </div>\n            )}\n\n            {/* Custom Attributes */}\n            <CustomAttributesTable attributes={product.custom_attributes || []} />\n\n            {/* Properties */}\n            <PropertiesTable properties={product.properties || []} />\n\n            {/* Customizer (variants, billing plans, quantity, add to cart) */}\n            <ProductCustomizer\n              product={product}\n              onAddToCart={onAddToCart}\n            />\n          </div>\n        }\n      />\n\n      {showRelated && relatedProducts && relatedProducts.length > 0 && (\n        <RelatedProductsSection\n          products={relatedProducts}\n          title=\"Related products\"\n        />\n      )}\n    </div>\n  );\n}\n"
     }
   ]
 }