pixelize-design-library 2.4.2-beta.55 → 2.4.2-beta.57

package/dist/index.js

@@ -43,10 +43,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.splitMonthsAndDays = exports.resolvePlanBadge = exports.formatPlanRemaining = exports.formatPlanExpiry = exports.formatPlanElapsed = exports.PlanBadge = exports.PlanPill = exports.UpgradeButton = exports.LimitReachedModal = exports.AppSwitcher = exports.OrgSwitcher = exports.StageItem = exports.StageProgress = exports.CopyButton = exports.ScrollToTop = exports.PdfViewer = exports.MoreItems = exports.LazyWrapper = exports.FormWrapper = exports.FilterSidebar = exports.FileUploader = exports.FileUpload = exports.FilePreviewTrigger = exports.FilePreview = exports.FieldSelectModal = exports.WorkspaceTrayPreview = exports.WorkspaceTray = exports.WorkspaceWindow = exports.EmptyState = exports.Editor = exports.Dropdown = exports.DrawerFooter = exports.DrawerBody = exports.DrawerHeader = exports.Drawer = exports.DatePicker = exports.ContactForm = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexRadialChart = exports.ApexAreaChart = exports.ApexLineChart = exports.ApexPolarChart = exports.ApexPieChart = exports.ApexBarChart = exports.AlertDialog = exports.Accordion = void 0;
 exports.Tag = exports.TableToggle = exports.Table = exports.SegmentedControl = exports.ToggleSwitch = exports.Switch = exports.Skeletons = exports.ScrollbarBox = exports.Slider = exports.SideBar = exports.SelectSearch = exports.SearchSelect = exports.SelectV2 = exports.Select = exports.Search = exports.Reorder = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = exports.ProfileCard = exports.ProductDetails = exports.ProductCard = exports.PinInput = exports.PhoneNumberInput = exports.PaymentCard = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.Notification = exports.NavigationBar = exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Modal = exports.Loading = exports.KanbanActions = exports.KanbanBoard = exports.InputSwitch = exports.InputTextArea = exports.HeaderActions = exports.Header = exports.OrganizationDetails = exports.SignInActivityTable = exports.CustomModulesTable = exports.RolesPermission = exports.UserDetails = void 0;
 exports.setRef = exports.mergeRefs = exports.resolveStatusTone = exports.resolveAvatarFill = exports.meetsBodyText = exports.avatarFillFor = exports.AVATAR_SEEDS = exports.FOCUS_RING_WIDTH = exports.FOCUS_HALO_WIDTH = exports.FOCUS_VISIBLE_OVER_STATE = exports.focusVisibleStyles = exports.focusVisibleRing = exports.focusRingShadow = exports.withFocusRing = exports.settleBetween = exports.buildFocusRing = exports.listRowBackgrounds = exports.withOutlineRung = exports.liftToContrast = exports.AA_NON_TEXT = exports.buildDarkPalette = exports.themeNames = exports.palettes = exports.darkPalettes = exports.lightPalettes = exports.brandThemes = exports.AppearanceSettings = exports.useFontSizeSync = exports.resolveFontSize = exports.isFontSize = exports.FONT_SIZE_OPTIONS = exports.DEFAULT_FONT_SIZE = exports.ThemeSwitcher = exports.useThemeMode = exports.PixelizeThemeProvider = exports.createAccountHandoff = exports.resolveReturnUrl = exports.isAllowedReturnUrl = exports.debounce = exports.ThemesList = exports.useCustomTheme = exports.useIsTruncated = exports.useSidebarPrefs = exports.VerifyEmailOtp = exports.useToaster = exports.OverflowToolTip = exports.ToolTip = exports.Toaster = exports.Timeline = exports.TextInput = void 0;
-exports.filterApps = exports.appInitials = exports.describeDayStates = exports.resolveDayStateVisual = exports.isDayStateKey = exports.CALENDAR_DAY_CLASS = exports.DAY_STATE_KEYS = exports.contrastRatio = exports.relativeLuminance = exports.mix = exports.withLightness = exports.hslToHex = exports.hexToHsl = exports.hslToRgb = exports.rgbToHsl = exports.rgbToHex = exports.compositeOver = exports.hexToRgba = exports.hexToRgb = exports.optionRowDescriptionInk = exports.optionRowWeight = exports.optionRowInk = exports.resolveFilledSurface = exports.labelOnFill = exports.darkerFillRung = exports.solidFillRung = exports.DARK_CANVAS_LUMINANCE = exports.AA_NORMAL_TEXT = exports.pickAccentText = exports.accentTextOnCanvas = exports.onGradient = exports.onFilled = exports.isDarkCanvas = exports.STATUS_INK = exports.ACCENT_GRADIENT = exports.chipBorder = exports.chipFill = exports.inkSafeGradient = exports.statusGradient = exports.labelOnSeries = exports.getDefaultSeriesColors = exports.getCategoricalSeriesColors = exports.chartMode = exports.chartInk = exports.chartAxisLabelColor = exports.CATEGORICAL_SERIES = exports.useDebouncedValue = exports.useDebouncedCallback = exports.toWords = exports.rafThrottle = void 0;
-exports.Spinner = exports.Backdrop = exports.QueryStateBoundary = exports.ErrorState = exports.StatCard = exports.PageHeader = exports.fieldMessageStyles = exports.fieldLabelStyles = exports.controlSizeStyles = exports.fieldControlStyles = exports.FieldMessage = exports.useFieldIds = exports.REDUCED_MOTION_QUERY = exports.reducedMotionSx = exports.usePrefersReducedMotion = exports.OVERLAY_BLUR = exports.overlayScrimStyles = exports.RAISED_OVERLAY = exports.raisedRule = exports.buildSurfaceRaised = exports.tooltipSurface = exports.SCRIM_OPACITY = exports.overlayScrim = exports.resolveSoftTone = exports.toneInk = exports.toneScale = exports.toneToSemantic = exports.toneToColorScheme = exports.isTone = exports.TONES = exports.transitionFor = exports.MOTION_EASE = exports.MOTION_MS = exports.isControlSize = exports.DEFAULT_CONTROL_SIZE = exports.CONTROL_SIZE_NAMES = exports.CONTROL_SIZES = exports.inkSafeGradientToken = exports.gradientCss = exports.resolveGradient = exports.fieldSurfaces = exports.placeholderInkOn = exports.placeholderInk = exports.SCROLLBAR_WIDTH = exports.globalScrollbarStyles = exports.scrollbarStyles = exports.useAppSwitcherShortcut = exports.buildSuiteApps = exports.formatShortcut = exports.matchesShortcut = void 0;
-exports.MediaViewer = exports.RangeSlider = exports.getApiErrorStatus = exports.getApiErrorMessage = exports.defaultValidationMessages = exports.validateYoutubeUrl = exports.validateVideoFile = exports.validateVideoFileType = exports.validateFile = exports.validateFileSize = exports.validateFileType = exports.validatePositiveNumber = exports.validateRequired = exports.validatePassword = exports.validateEmail = exports.EMAIL_REGEX = exports.createEnumLabelResolver = exports.humanize = exports.clearChunkReloadGuard = exports.isChunkLoadError = exports.installPreloadErrorReload = exports.lazyWithRetry = exports.useAnchoredPanelHeight = exports.formatRelativeTime = exports.formatCount = exports.groupConsecutive = exports.sectionizeByDay = exports.NotificationItem = exports.NotificationList = exports.NotificationPanel = exports.NotificationBell = exports.ConfirmDialog = exports.TabPanel = exports.TabPanels = exports.Tab = exports.TabList = exports.Tabs = exports.Accordian = exports.SaveBar = exports.FeedbackForm = exports.PersonChip = exports.initialsFor = exports.avatarScaleKeyFor = exports.resolveAvatarColorway = exports.AvatarGroup = exports.Avatar = exports.SettingsSection = exports.SettingRow = exports.FilterBar = exports.DescriptionList = void 0;
-exports.SEEK_STEP_SECONDS = exports.PLAYBACK_SPEEDS = exports.ZOOM_STEP = exports.MAX_ZOOM = exports.MIN_ZOOM = exports.resolveMediaUrl = exports.fileKind = exports.countMedia = exports.planPreview = exports.buildFileItems = exports.buildMediaItems = exports.MediaStatusPanel = exports.MediaScrubber = exports.defaultMediaAudioPlayerLabels = exports.MediaAudioPlayer = exports.defaultMediaViewerLabels = exports.defaultMediaDocumentStageLabels = exports.MediaDocumentStage = exports.defaultMediaVideoPlayerLabels = exports.MediaVideoPlayer = exports.defaultMediaImageViewerLabels = exports.MediaImageViewer = exports.useFileViewer = void 0;
+exports.appInitials = exports.describeDayStates = exports.resolveDayStateVisual = exports.isDayStateKey = exports.CALENDAR_DAY_CLASS = exports.DAY_STATE_KEYS = exports.contrastRatio = exports.relativeLuminance = exports.mix = exports.withLightness = exports.hslToHex = exports.hexToHsl = exports.hslToRgb = exports.rgbToHsl = exports.rgbToHex = exports.compositeOver = exports.hexToRgba = exports.hexToRgb = exports.optionRowDescriptionInk = exports.optionRowWeight = exports.optionRowInk = exports.resolveFilledSurface = exports.labelOnFill = exports.darkerFillRung = exports.solidFillRung = exports.DARK_CANVAS_LUMINANCE = exports.AA_NORMAL_TEXT = exports.pickAccentText = exports.accentTextOnCanvas = exports.onGradient = exports.onFilled = exports.isDarkCanvas = exports.STATUS_INK = exports.ACCENT_GRADIENT = exports.chipBorder = exports.chipFill = exports.inkSafeGradient = exports.statusGradient = exports.useChartTheme = exports.labelOnSeries = exports.getDefaultSeriesColors = exports.getCategoricalSeriesColors = exports.chartMode = exports.chartInk = exports.chartAxisLabelColor = exports.CATEGORICAL_SERIES = exports.useDebouncedValue = exports.useDebouncedCallback = exports.toWords = exports.rafThrottle = void 0;
+exports.Backdrop = exports.QueryStateBoundary = exports.ErrorState = exports.StatCard = exports.PageHeader = exports.fieldMessageStyles = exports.fieldLabelStyles = exports.controlSizeStyles = exports.fieldControlStyles = exports.FieldMessage = exports.useFieldIds = exports.REDUCED_MOTION_QUERY = exports.reducedMotionSx = exports.usePrefersReducedMotion = exports.OVERLAY_BLUR = exports.overlayScrimStyles = exports.RAISED_OVERLAY = exports.raisedRule = exports.buildSurfaceRaised = exports.tooltipSurface = exports.SCRIM_OPACITY = exports.overlayScrim = exports.resolveSoftTone = exports.toneInk = exports.toneScale = exports.toneToSemantic = exports.toneToColorScheme = exports.isTone = exports.TONES = exports.transitionFor = exports.MOTION_EASE = exports.MOTION_MS = exports.isControlSize = exports.DEFAULT_CONTROL_SIZE = exports.CONTROL_SIZE_NAMES = exports.CONTROL_SIZES = exports.inkSafeGradientToken = exports.gradientCss = exports.resolveGradient = exports.fieldSurfaces = exports.placeholderInkOn = exports.placeholderInk = exports.SCROLLBAR_WIDTH = exports.globalScrollbarStyles = exports.scrollbarStyles = exports.useAppSwitcherShortcut = exports.buildSuiteApps = exports.formatShortcut = exports.matchesShortcut = exports.filterApps = void 0;
+exports.RangeSlider = exports.getApiErrorStatus = exports.getApiErrorMessage = exports.defaultValidationMessages = exports.validateYoutubeUrl = exports.validateVideoFile = exports.validateVideoFileType = exports.validateFile = exports.validateFileSize = exports.validateFileType = exports.validatePositiveNumber = exports.validateRequired = exports.validatePassword = exports.validateEmail = exports.EMAIL_REGEX = exports.createEnumLabelResolver = exports.humanize = exports.clearChunkReloadGuard = exports.isChunkLoadError = exports.installPreloadErrorReload = exports.lazyWithRetry = exports.useAnchoredPanelHeight = exports.formatRelativeTime = exports.formatCount = exports.groupConsecutive = exports.sectionizeByDay = exports.NotificationItem = exports.NotificationList = exports.NotificationPanel = exports.NotificationBell = exports.ConfirmDialog = exports.TabPanel = exports.TabPanels = exports.Tab = exports.TabList = exports.Tabs = exports.Accordian = exports.SaveBar = exports.FeedbackForm = exports.PersonChip = exports.initialsFor = exports.avatarScaleKeyFor = exports.resolveAvatarColorway = exports.AvatarGroup = exports.Avatar = exports.SettingsSection = exports.SettingRow = exports.FilterBar = exports.DescriptionList = exports.Spinner = void 0;
+exports.MediaGallery = exports.PaymentOptionGroup = exports.PaymentOption = exports.AddressCardGroup = exports.AddressCard = exports.DetailSections = exports.ReviewList = exports.ReviewSummary = exports.SpecTable = exports.OffersList = exports.TrustBadges = exports.PincodeChecker = exports.StickyBuyBar = exports.BagBar = exports.OrderStatusTimeline = exports.CouponField = exports.OrderSummary = exports.CartItem = exports.QuantityStepper = exports.VariantSelector = exports.OptionChip = exports.WishlistToggle = exports.ProductBadges = exports.StockStatus = exports.PriceBlock = exports.Rating = exports.SEEK_STEP_SECONDS = exports.PLAYBACK_SPEEDS = exports.ZOOM_STEP = exports.MAX_ZOOM = exports.MIN_ZOOM = exports.resolveMediaUrl = exports.fileKind = exports.countMedia = exports.planPreview = exports.buildFileItems = exports.buildMediaItems = exports.MediaStatusPanel = exports.MediaScrubber = exports.defaultMediaAudioPlayerLabels = exports.MediaAudioPlayer = exports.defaultMediaViewerLabels = exports.defaultMediaDocumentStageLabels = exports.MediaDocumentStage = exports.defaultMediaVideoPlayerLabels = exports.MediaVideoPlayer = exports.defaultMediaImageViewerLabels = exports.MediaImageViewer = exports.useFileViewer = exports.MediaViewer = void 0;
+exports.QuickAddSheet = exports.ProductCardSkeleton = exports.ProductCardGrid = exports.unitPrice = exports.discountAmount = exports.discountPercent = exports.formatPrice = exports.firstAvailableSelection = exports.priceRange = exports.remainingStock = exports.isOptionAvailable = exports.findVariant = exports.selectionComplete = exports.stockState = exports.LOW_STOCK_THRESHOLD = exports.defaultMediaLightboxLabels = exports.defaultMediaGalleryLabels = exports.MediaLightbox = void 0;
 const Accordion_1 = __importDefault(require("./Components/Accordion/Accordion"));
 exports.Accordion = Accordion_1.default;
 const AlertDialog_1 = __importDefault(require("./Components/AlertDialog/AlertDialog"));
@@ -341,6 +342,8 @@ Object.defineProperty(exports, "chartMode", { enumerable: true, get: function ()
 Object.defineProperty(exports, "getCategoricalSeriesColors", { enumerable: true, get: function () { return chartColorsFromTheme_1.getCategoricalSeriesColors; } });
 Object.defineProperty(exports, "getDefaultSeriesColors", { enumerable: true, get: function () { return chartColorsFromTheme_1.getDefaultSeriesColors; } });
 Object.defineProperty(exports, "labelOnSeries", { enumerable: true, get: function () { return chartColorsFromTheme_1.labelOnSeries; } });
+var useChartTheme_1 = require("./Theme/useChartTheme");
+Object.defineProperty(exports, "useChartTheme", { enumerable: true, get: function () { return useChartTheme_1.useChartTheme; } });
 // WCAG contrast + accent-picking helpers this library uses internally to keep text readable
 // against any canvas/fill a palette produces. Pure and dependency-free — consumers building
 // custom components against `ColorScale`/`PaletteProps` tokens can reuse the same logic instead
@@ -585,4 +588,83 @@ Object.defineProperty(exports, "MAX_ZOOM", { enumerable: true, get: function ()
 Object.defineProperty(exports, "ZOOM_STEP", { enumerable: true, get: function () { return mediaItems_1.ZOOM_STEP; } });
 Object.defineProperty(exports, "PLAYBACK_SPEEDS", { enumerable: true, get: function () { return mediaItems_1.PLAYBACK_SPEEDS; } });
 Object.defineProperty(exports, "SEEK_STEP_SECONDS", { enumerable: true, get: function () { return mediaItems_1.SEEK_STEP_SECONDS; } });
+// Commerce
+var Rating_1 = require("./Components/Rating/Rating");
+Object.defineProperty(exports, "Rating", { enumerable: true, get: function () { return __importDefault(Rating_1).default; } });
+var PriceBlock_1 = require("./Components/PriceBlock/PriceBlock");
+Object.defineProperty(exports, "PriceBlock", { enumerable: true, get: function () { return __importDefault(PriceBlock_1).default; } });
+var StockStatus_1 = require("./Components/StockStatus/StockStatus");
+Object.defineProperty(exports, "StockStatus", { enumerable: true, get: function () { return __importDefault(StockStatus_1).default; } });
+var ProductBadges_1 = require("./Components/ProductBadges/ProductBadges");
+Object.defineProperty(exports, "ProductBadges", { enumerable: true, get: function () { return __importDefault(ProductBadges_1).default; } });
+var WishlistToggle_1 = require("./Components/WishlistToggle/WishlistToggle");
+Object.defineProperty(exports, "WishlistToggle", { enumerable: true, get: function () { return __importDefault(WishlistToggle_1).default; } });
+var OptionChip_1 = require("./Components/OptionChip/OptionChip");
+Object.defineProperty(exports, "OptionChip", { enumerable: true, get: function () { return __importDefault(OptionChip_1).default; } });
+var VariantSelector_1 = require("./Components/VariantSelector/VariantSelector");
+Object.defineProperty(exports, "VariantSelector", { enumerable: true, get: function () { return __importDefault(VariantSelector_1).default; } });
+var QuantityStepper_1 = require("./Components/QuantityStepper/QuantityStepper");
+Object.defineProperty(exports, "QuantityStepper", { enumerable: true, get: function () { return __importDefault(QuantityStepper_1).default; } });
+var CartItem_1 = require("./Components/CartItem/CartItem");
+Object.defineProperty(exports, "CartItem", { enumerable: true, get: function () { return __importDefault(CartItem_1).default; } });
+var OrderSummary_1 = require("./Components/OrderSummary/OrderSummary");
+Object.defineProperty(exports, "OrderSummary", { enumerable: true, get: function () { return __importDefault(OrderSummary_1).default; } });
+var CouponField_1 = require("./Components/CouponField/CouponField");
+Object.defineProperty(exports, "CouponField", { enumerable: true, get: function () { return __importDefault(CouponField_1).default; } });
+var OrderStatusTimeline_1 = require("./Components/OrderStatusTimeline/OrderStatusTimeline");
+Object.defineProperty(exports, "OrderStatusTimeline", { enumerable: true, get: function () { return __importDefault(OrderStatusTimeline_1).default; } });
+var BagBar_1 = require("./Components/BagBar/BagBar");
+Object.defineProperty(exports, "BagBar", { enumerable: true, get: function () { return __importDefault(BagBar_1).default; } });
+var StickyBuyBar_1 = require("./Components/StickyBuyBar/StickyBuyBar");
+Object.defineProperty(exports, "StickyBuyBar", { enumerable: true, get: function () { return __importDefault(StickyBuyBar_1).default; } });
+var PincodeChecker_1 = require("./Components/PincodeChecker/PincodeChecker");
+Object.defineProperty(exports, "PincodeChecker", { enumerable: true, get: function () { return __importDefault(PincodeChecker_1).default; } });
+var TrustBadges_1 = require("./Components/TrustBadges/TrustBadges");
+Object.defineProperty(exports, "TrustBadges", { enumerable: true, get: function () { return __importDefault(TrustBadges_1).default; } });
+var OffersList_1 = require("./Components/OffersList/OffersList");
+Object.defineProperty(exports, "OffersList", { enumerable: true, get: function () { return __importDefault(OffersList_1).default; } });
+var SpecTable_1 = require("./Components/SpecTable/SpecTable");
+Object.defineProperty(exports, "SpecTable", { enumerable: true, get: function () { return __importDefault(SpecTable_1).default; } });
+var ReviewSummary_1 = require("./Components/ReviewSummary/ReviewSummary");
+Object.defineProperty(exports, "ReviewSummary", { enumerable: true, get: function () { return __importDefault(ReviewSummary_1).default; } });
+var ReviewList_1 = require("./Components/ReviewList/ReviewList");
+Object.defineProperty(exports, "ReviewList", { enumerable: true, get: function () { return __importDefault(ReviewList_1).default; } });
+var DetailSections_1 = require("./Components/DetailSections/DetailSections");
+Object.defineProperty(exports, "DetailSections", { enumerable: true, get: function () { return __importDefault(DetailSections_1).default; } });
+var AddressCard_1 = require("./Components/AddressCard/AddressCard");
+Object.defineProperty(exports, "AddressCard", { enumerable: true, get: function () { return __importDefault(AddressCard_1).default; } });
+var AddressCardGroup_1 = require("./Components/AddressCard/AddressCardGroup");
+Object.defineProperty(exports, "AddressCardGroup", { enumerable: true, get: function () { return __importDefault(AddressCardGroup_1).default; } });
+var PaymentOption_1 = require("./Components/PaymentOption/PaymentOption");
+Object.defineProperty(exports, "PaymentOption", { enumerable: true, get: function () { return __importDefault(PaymentOption_1).default; } });
+var PaymentOptionGroup_1 = require("./Components/PaymentOption/PaymentOptionGroup");
+Object.defineProperty(exports, "PaymentOptionGroup", { enumerable: true, get: function () { return __importDefault(PaymentOptionGroup_1).default; } });
+var MediaGallery_1 = require("./Components/MediaGallery/MediaGallery");
+Object.defineProperty(exports, "MediaGallery", { enumerable: true, get: function () { return __importDefault(MediaGallery_1).default; } });
+var MediaLightbox_1 = require("./Components/MediaGallery/MediaLightbox");
+Object.defineProperty(exports, "MediaLightbox", { enumerable: true, get: function () { return __importDefault(MediaLightbox_1).default; } });
+var MediaGalleryProps_1 = require("./Components/MediaGallery/MediaGalleryProps");
+Object.defineProperty(exports, "defaultMediaGalleryLabels", { enumerable: true, get: function () { return MediaGalleryProps_1.defaultMediaGalleryLabels; } });
+var MediaLightboxProps_1 = require("./Components/MediaGallery/MediaLightboxProps");
+Object.defineProperty(exports, "defaultMediaLightboxLabels", { enumerable: true, get: function () { return MediaLightboxProps_1.defaultMediaLightboxLabels; } });
+var commerceVariants_1 = require("./Components/Commerce/commerceVariants");
+Object.defineProperty(exports, "LOW_STOCK_THRESHOLD", { enumerable: true, get: function () { return commerceVariants_1.LOW_STOCK_THRESHOLD; } });
+Object.defineProperty(exports, "stockState", { enumerable: true, get: function () { return commerceVariants_1.stockState; } });
+Object.defineProperty(exports, "selectionComplete", { enumerable: true, get: function () { return commerceVariants_1.selectionComplete; } });
+Object.defineProperty(exports, "findVariant", { enumerable: true, get: function () { return commerceVariants_1.findVariant; } });
+Object.defineProperty(exports, "isOptionAvailable", { enumerable: true, get: function () { return commerceVariants_1.isOptionAvailable; } });
+Object.defineProperty(exports, "remainingStock", { enumerable: true, get: function () { return commerceVariants_1.remainingStock; } });
+Object.defineProperty(exports, "priceRange", { enumerable: true, get: function () { return commerceVariants_1.priceRange; } });
+Object.defineProperty(exports, "firstAvailableSelection", { enumerable: true, get: function () { return commerceVariants_1.firstAvailableSelection; } });
+var price_1 = require("./Utils/price");
+Object.defineProperty(exports, "formatPrice", { enumerable: true, get: function () { return price_1.formatPrice; } });
+Object.defineProperty(exports, "discountPercent", { enumerable: true, get: function () { return price_1.discountPercent; } });
+Object.defineProperty(exports, "discountAmount", { enumerable: true, get: function () { return price_1.discountAmount; } });
+Object.defineProperty(exports, "unitPrice", { enumerable: true, get: function () { return price_1.unitPrice; } });
+var ProductCardGrid_1 = require("./Components/ProductCard/ProductCardGrid");
+Object.defineProperty(exports, "ProductCardGrid", { enumerable: true, get: function () { return __importDefault(ProductCardGrid_1).default; } });
+var ProductCardSkeleton_1 = require("./Components/ProductCard/ProductCardSkeleton");
+Object.defineProperty(exports, "ProductCardSkeleton", { enumerable: true, get: function () { return __importDefault(ProductCardSkeleton_1).default; } });
+var QuickAddSheet_1 = require("./Components/ProductCard/QuickAddSheet");
+Object.defineProperty(exports, "QuickAddSheet", { enumerable: true, get: function () { return __importDefault(QuickAddSheet_1).default; } });
 __exportStar(require("./Components/Primitives/Primitives"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.4.2-beta.55",
+  "version": "2.4.2-beta.57",
   "description": "React component library for Pixelize apps: themeable Chakra-based components, design tokens and light/dark brand theming.",
   "keywords": [
     "react",

package/dist/Components/ProductCard/ProductLabel.d.ts

@@ -1,7 +0,0 @@
-import { SizeType } from './ProductCardProps';
-declare const ProductLabel: ({ label, description, size }: {
-    label: string;
-    description?: string;
-    size: SizeType;
-}) => import("react/jsx-runtime").JSX.Element;
-export default ProductLabel;

package/dist/Components/ProductCard/ProductLabel.js

@@ -1,20 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("@chakra-ui/react");
-const ProductLabel = ({ label, description, size }) => {
-    const fontSizes = {
-        xs: "md",
-        sm: "lg",
-        md: "xl",
-        lg: "2xl"
-    };
-    const descriptionSizes = {
-        xs: 'xs',
-        sm: 'sm',
-        md: 'md',
-        lg: 'lg',
-    };
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontWeight: "bold", fontSize: fontSizes[size], children: label }), description && (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: descriptionSizes[size], fontStyle: "italic", children: description })] }));
-};
-exports.default = ProductLabel;

package/dist/Components/ProductCard/ProductPrice.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-import { options, SizeType } from './ProductCardProps';
-type ProductPriceProps = {
-    options: options[];
-    size: SizeType;
-    onSelect?: (option: options) => void;
-    rightSlot?: React.ReactNode;
-};
-declare const ProductPrice: ({ options, size, onSelect, rightSlot }: ProductPriceProps) => import("react/jsx-runtime").JSX.Element;
-export default ProductPrice;

package/dist/Components/ProductCard/ProductPrice.js

@@ -1,126 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_2 = require("@chakra-ui/react");
-const OverflowTooltipText_1 = __importDefault(require("../SideBar/components/OverflowTooltipText"));
-const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-const accentText_1 = require("../../Theme/tokens/builders/accentText");
-const rafThrottle_1 = require("../../Utils/rafThrottle");
-const motion_1 = require("../../Theme/tokens/primitives/motion");
-const sizeConfig = {
-    xs: {
-        font: "xs",
-        label: "sm",
-        price: "sm",
-        px: 2,
-        py: 1,
-        rowHeight: "2rem",
-        iconSize: "0.75rem",
-        dotSize: "0.375rem",
-    },
-    sm: {
-        font: "sm",
-        label: "md",
-        price: "md",
-        px: 3,
-        py: 1.5,
-        rowHeight: "2.5rem",
-        iconSize: "1rem",
-        dotSize: "0.5rem",
-    },
-    md: {
-        font: "md",
-        label: "lg",
-        price: "lg",
-        px: 4,
-        py: 2,
-        rowHeight: "3rem",
-        iconSize: "1.25rem",
-        dotSize: "0.625rem",
-    },
-    lg: {
-        font: "lg",
-        label: "xl",
-        price: "xl",
-        px: 5,
-        py: 2.5,
-        rowHeight: "3.5rem",
-        iconSize: "1.5rem",
-        dotSize: "0.75rem",
-    },
-};
-const ProductPrice = ({ options, size, onSelect, rightSlot }) => {
-    const cfg = sizeConfig[size];
-    const theme = (0, useCustomTheme_1.useCustomTheme)();
-    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
-    const [selected, setSelected] = (0, react_1.useState)(options[0]);
-    const [dropdownPosition, setDropdownPosition] = (0, react_1.useState)({ top: 0, left: 0, width: 0 });
-    const buttonRef = (0, react_1.useRef)(null);
-    const dropdownRef = (0, react_1.useRef)(null);
-    const isSingleOption = options.length === 1;
-    const isMobile = (0, react_2.useBreakpointValue)({ base: true, md: false });
-    (0, react_2.useOutsideClick)({
-        ref: dropdownRef,
-        handler: () => setIsOpen(false),
-    });
-    const getDiscountedPrice = (option) => Math.round(option.price - (option.price * option.offer) / 100);
-    (0, react_1.useEffect)(() => {
-        const updatePosition = () => {
-            if (buttonRef.current) {
-                const rect = buttonRef.current.getBoundingClientRect();
-                setDropdownPosition({
-                    top: rect.bottom + 4,
-                    left: rect.left,
-                    width: rect.width
-                });
-            }
-        };
-        if (!isOpen)
-            return;
-        updatePosition();
-        const onReposition = (0, rafThrottle_1.rafThrottle)(updatePosition);
-        window.addEventListener("resize", onReposition);
-        window.addEventListener("scroll", onReposition, {
-            capture: true, // every scrollable ancestor, not just the window
-            passive: true,
-        });
-        return () => {
-            onReposition.cancel();
-            window.removeEventListener("resize", onReposition);
-            window.removeEventListener("scroll", onReposition, true);
-        };
-    }, [isOpen]);
-    (0, react_1.useEffect)(() => {
-        onSelect === null || onSelect === void 0 ? void 0 : onSelect(selected);
-    }, [selected, onSelect]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isSingleOption ? ((0, jsx_runtime_1.jsx)(react_2.Box, { border: "0.063rem solid", borderColor: theme.colors.primary[300], bg: theme.colors.primary[50], px: cfg.px, rounded: "lg", display: "inline-block", w: "100%", children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: cfg.label, fontWeight: "medium", children: options[0].label }) })) : ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: buttonRef, role: "button", tabIndex: 0, "aria-haspopup": "listbox", "aria-expanded": isOpen, onClick: () => setIsOpen(!isOpen), onKeyDown: (e) => {
-                    if (e.key === "Enter" || e.key === " ") {
-                        e.preventDefault();
-                        setIsOpen((prev) => !prev);
-                    }
-                    else if (e.key === "Escape") {
-                        setIsOpen(false);
-                    }
-                }, border: "0.063rem solid", borderColor: theme.colors.primary[300], bg: theme.colors.primary[50], px: cfg.px, rounded: "lg", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", minW: 0, children: (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "top", maxWidth: "100%", fontSize: cfg.label, fontWeight: "medium", whiteSpace: "nowrap", children: selected.label }) }), (0, jsx_runtime_1.jsx)(react_2.Text, { "aria-hidden": "true", fontSize: cfg.font, color: (0, accentText_1.accentTextOnCanvas)(theme.colors.primary, theme.colors.primary[50]), transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)', transition: (0, motion_1.transitionFor)(["transform"]), children: "\u25BE" })] })), !isSingleOption && isOpen && ((0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { ref: dropdownRef, role: "listbox", position: "fixed", top: `${dropdownPosition.top}px`, left: `${dropdownPosition.left}px`, width: `${dropdownPosition.width}px`, bg: theme.colors.background[50], border: "0.063rem solid", borderColor: theme.colors.primary[300], borderRadius: "xl", overflow: "hidden", maxH: "13rem", overflowY: "auto", shadow: "md", zIndex: 100000, children: options.map((option) => {
-                        const discounted = getDiscountedPrice(option);
-                        const isSelected = selected.var_id === option.var_id;
-                        return ((0, jsx_runtime_1.jsxs)(react_2.Grid, { role: "option", "aria-selected": isSelected, tabIndex: 0, px: 1, py: 0.5, cursor: "pointer", bg: isSelected ? theme.colors.primary[50] : theme.colors.background[50], borderLeft: isSelected ? '0.25rem solid' : '0.25rem solid transparent', borderLeftColor: isSelected ? theme.colors.primary[300] : "transparent", _hover: { bg: theme.colors.primary[100] }, onClick: () => {
-                                setSelected(option);
-                                setIsOpen(false);
-                            }, onKeyDown: (e) => {
-                                if (e.key === "Enter" || e.key === " ") {
-                                    e.preventDefault();
-                                    setSelected(option);
-                                    setIsOpen(false);
-                                }
-                            }, templateColumns: { base: '1fr auto', md: '1fr auto' }, 
-                            // columnGap={{ base: 2, md: 3 }}
-                            // rowGap={{ base: 1.5, md: 2 }}
-                            alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_2.HStack, { gridColumn: 1, gridRow: 1, spacing: 2, align: "center", minW: 0, mb: 0, children: (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", minW: 0, children: (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "top", maxWidth: "100%", fontSize: { base: "xs", md: "sm" }, fontWeight: "medium", whiteSpace: "nowrap", children: option.label }) }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { gridColumn: 1, gridRow: 2, mt: 0, textAlign: "left", children: (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, align: "center", children: [option.offer > 0 && ((0, jsx_runtime_1.jsx)(react_2.Badge, { bg: theme.colors.green[100], color: (0, accentText_1.accentTextOnCanvas)(theme.colors.green, theme.colors.green[100]), borderRadius: "full", px: { base: 0, md: 0.5 }, py: { base: 0, md: 0.25 }, fontWeight: "bold", fontSize: "11px", flexShrink: 0, children: isMobile ? `${option.offer}%` : `${option.offer}% OFF` })), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", fontWeight: "bold", color: (0, accentText_1.accentTextOnCanvas)(theme.colors.red, isSelected ? theme.colors.red[50] : theme.colors.background[50]), whiteSpace: "nowrap", children: ["\u20B9", discounted] }), option.offer > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", color: theme.colors.textMuted, textDecoration: "line-through", whiteSpace: "nowrap", children: ["\u20B9", option.price] }))] }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { gridColumn: 2, gridRow: 1, ml: { base: 0, md: 0 }, justifySelf: "end", w: { base: "0.625rem", md: "0.75rem" }, h: { base: "0.625rem", md: "0.75rem" }, minW: { base: "0.625rem", md: "0.75rem" }, borderRadius: "full", border: "0.063rem solid", borderColor: isSelected ? theme.colors.primary[500] : theme.colors.boxborder[500], bg: theme.colors.background[50], display: "flex", alignItems: "center", justifyContent: "center", boxShadow: "none", children: isSelected && ((0, jsx_runtime_1.jsx)(react_2.Box, { w: { base: "0.25rem", md: "0.3125rem" }, h: { base: "0.25rem", md: "0.3125rem" }, bg: theme.colors.primary[500], borderRadius: "full" })) })] }, option.var_id));
-                    }) }) })), (0, jsx_runtime_1.jsxs)(react_2.Flex, { mt: 2, w: "full", gap: 3, direction: { base: "column", md: "row" }, align: { base: "flex-start", md: "center" }, justify: { base: "flex-start", md: rightSlot ? "space-between" : "flex-start" }, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", fontSize: cfg.price, gap: 2, minW: 0, children: [selected.offer > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Text, { color: theme.colors.textMuted, textDecoration: "line-through", children: ["\u20B9", selected.price] })), (0, jsx_runtime_1.jsxs)(react_2.Text, { color: (0, accentText_1.accentTextOnCanvas)(theme.colors.red, theme.colors.backgroundColor.main), fontWeight: "semibold", children: ["\u20B9", getDiscountedPrice(selected)] })] }), rightSlot && ((0, jsx_runtime_1.jsx)(react_2.Box, { flexShrink: 0, mt: { base: 2, md: 0 }, children: rightSlot }))] })] }));
-};
-exports.default = ProductPrice;

package/dist/Components/ProductCard/ProductReview.d.ts

@@ -1,8 +0,0 @@
-type ProductReviewProps = {
-    /** Clamped 0-5, but the fill bar divides by 6 internally — a perfect 5 rating never fully fills the star. */
-    rating?: string | number;
-    reviewCount?: string | number;
-    mb?: number;
-};
-declare const ProductReview: ({ rating, reviewCount, mb }: ProductReviewProps) => import("react/jsx-runtime").JSX.Element;
-export default ProductReview;

package/dist/Components/ProductCard/ProductReview.js

@@ -1,30 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("@chakra-ui/react");
-const lucide_react_1 = require("lucide-react");
-const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-const accentText_1 = require("../../Theme/tokens/builders/accentText");
-const color_1 = require("../../Theme/tokens/builders/color");
-const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
-const neutrals_1 = require("../../Theme/tokens/brands/neutrals");
-// The theme's `yellow` scale reverses index roles in dark mode (like every utility hue), so
-// pulling it through the theme would silently flip this decorative "filled star" from gold to
-// pale. A rating star is a universal, brand-independent gold — not something that should follow
-// canvas/mode — so it's pinned here instead. Needs a design-token addition (a mode-stable
-// "rating gold") to pixelize-design-library if this pattern is needed elsewhere.
-const RATING_STAR_FILL = neutrals_1.neutralTokens.yellow[500];
-const ProductReview = ({ rating, reviewCount, mb = 0 }) => {
-    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    const hasRating = rating !== undefined && rating !== null;
-    const hasReviewCount = reviewCount !== undefined && reviewCount !== null;
-    // Convert rating to number and ensure it's between 0 and 5
-    // Calculate fill percentage: (rating / 5) * 100%
-    const numericRating = hasRating ? Math.min(Math.max(Number(rating), 0), 5) : 0;
-    const fillPercentage = (numericRating / 6) * 100;
-    const chipBg = colors.teal[50];
-    const chipInk = (0, accentText_1.accentTextOnCanvas)(colors.teal, chipBg);
-    const starFill = (0, color_1.contrastRatio)(RATING_STAR_FILL, chipBg) >= outlineRung_1.AA_NON_TEXT ? RATING_STAR_FILL : chipInk;
-    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 2, mb: mb, children: [hasRating && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 1, bg: chipBg, color: chipInk, px: 2, borderRadius: "full", children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", flexShrink: 0, display: "inline-block", width: "14px", height: "14px", lineHeight: 0, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { position: "absolute", top: 0, left: 0, width: "14px", height: "14px", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 14, fill: "none", strokeWidth: 1.5 }) }), fillPercentage > 0 && ((0, jsx_runtime_1.jsx)(react_1.Box, { position: "absolute", top: 0, left: 0, width: `${fillPercentage}%`, height: "100%", overflow: "hidden", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 14, color: starFill, fill: starFill }) }))] }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", fontWeight: "bold", children: numericRating })] })), hasRating && hasReviewCount && (0, jsx_runtime_1.jsx)(react_1.Box, { h: "4", w: "0.063rem", bg: colors.boxborder[500] }), hasReviewCount && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "1", children: [(0, jsx_runtime_1.jsx)(react_1.Icon, { as: lucide_react_1.BookCheck, boxSize: 3.5 }), (0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "sm", color: colors.textMuted, children: ["(", reviewCount, ")"] })] }))] }));
-};
-exports.default = ProductReview;

package/dist/Components/ProductCard/ProductTags.d.ts

@@ -1,8 +0,0 @@
-import { SizeType } from './ProductCardProps';
-type ProductTagsProps = {
-    tags: string[];
-    className?: string;
-    size: SizeType;
-};
-declare const ProductTags: ({ tags, className, size }: ProductTagsProps) => import("react/jsx-runtime").JSX.Element;
-export default ProductTags;

package/dist/Components/ProductCard/ProductTags.js

@@ -1,53 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
-const react_2 = require("@chakra-ui/react");
-const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
-const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-const ProductTags = ({ tags, className, size = 'sm' }) => {
-    const getRows = (tags) => {
-        const count = tags.length;
-        if (count === 1)
-            return [tags];
-        if (count === 2)
-            return [tags];
-        if (count === 3)
-            return [[tags[0]], tags.slice(1)];
-        if (count === 4)
-            return [tags.slice(0, 2), tags.slice(2, 4)];
-        return [];
-    };
-    return ((0, jsx_runtime_1.jsx)(react_2.Flex, { direction: "column", gap: "1", className: className, w: "full", children: getRows(tags).map((row, rowIndex) => ((0, jsx_runtime_1.jsx)(react_2.Flex, { gap: "1", children: row.map((tag, tagIndex) => ((0, jsx_runtime_1.jsx)(Tag, { fullWidth: row.length === 1, size: size, children: tag }, tagIndex))) }, rowIndex))) }));
-};
-const Tag = ({ children, fullWidth = false, size = 'sm', }) => {
-    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    const tagText = colors.text[900];
-    const tagBorder = colors.boxborder[500];
-    // Size map for tags
-    const tagSizes = {
-        xs: { fontSize: '0.625rem', px: '0.5rem', py: '0.125rem' },
-        sm: { fontSize: '0.75rem', px: '0.6rem', py: '0.2rem' },
-        md: { fontSize: '0.875rem', px: '0.75rem', py: '0.3rem' },
-        lg: { fontSize: '0.938rem', px: '0.938rem', py: '0.4rem' },
-    };
-    const ref = react_1.default.useRef(null);
-    const [truncated, setTruncated] = react_1.default.useState(false);
-    react_1.default.useEffect(() => {
-        const el = ref.current;
-        if (!el)
-            return;
-        const check = () => setTruncated(el.scrollWidth > el.clientWidth);
-        check();
-        window.addEventListener('resize', check);
-        return () => {
-            window.removeEventListener('resize', check);
-        };
-    }, [children]);
-    const content = ((0, jsx_runtime_1.jsx)(react_2.Box, { ref: ref, flex: fullWidth ? '1' : '1', border: "0.063rem solid", borderColor: tagBorder, color: tagText, fontSize: tagSizes[size].fontSize, fontWeight: "semibold", borderRadius: "full", px: tagSizes[size].px, py: tagSizes[size].py, textAlign: "center", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", children: children }));
-    return truncated ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: String(children), hasArrow: true, openDelay: 300, placement: 'bottom', children: content })) : (content);
-};
-exports.default = ProductTags;

package/dist/Components/ProductDetails/ProductDtlPrice.d.ts

@@ -1,7 +0,0 @@
-import { options } from "../ProductCard/ProductCardProps";
-interface ProductDtlPriceProps {
-    price: options[];
-    onSelect?: (option: options) => void;
-}
-declare const ProductDtlPrice: ({ price, onSelect }: ProductDtlPriceProps) => import("react/jsx-runtime").JSX.Element;
-export default ProductDtlPrice;

package/dist/Components/ProductDetails/ProductDtlPrice.js

@@ -1,24 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_2 = require("@chakra-ui/react");
-const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-const accentText_1 = require("../../Theme/tokens/builders/accentText");
-const tone_1 = require("../../Theme/tokens/builders/tone");
-const ProductDtlPrice = ({ price, onSelect }) => {
-    const [selectedIndex, setSelectedIndex] = (0, react_1.useState)(0);
-    const selected = price[selectedIndex];
-    const discounted = Math.round(selected.price - (selected.price * selected.offer) / 100);
-    const theme = (0, useCustomTheme_1.useCustomTheme)();
-    const saveTone = (0, tone_1.resolveSoftTone)(theme.colors, theme.colors.semantic.success);
-    (0, react_1.useEffect)(() => {
-        onSelect === null || onSelect === void 0 ? void 0 : onSelect(selected);
-    }, [selected, onSelect]);
-    return ((0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "start", spacing: 3, p: 4, borderRadius: "lg", w: "full", children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, align: "center", children: [selected.offer > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "lg", color: theme.colors.textMuted, as: "s", children: ["\u20B9", selected.price] })), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xl", color: (0, accentText_1.accentTextOnCanvas)(theme.colors.red, theme.colors.backgroundColor.main), fontWeight: "bold", children: ["\u20B9", discounted] }), selected.offer > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Badge, { bg: saveTone.bg, color: saveTone.fg, fontSize: "xs", borderRadius: "full", px: 2, py: 0.5, children: ["SAVE ", selected.offer, "%"] }))] }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: theme.colors.textMuted, children: "(Incl. of all taxes)" }), (0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", fontWeight: "bold", textTransform: "uppercase", mb: 1, children: ["Packs : ", selected.label] }), (0, jsx_runtime_1.jsx)(react_2.HStack, { spacing: 2, children: price.map((pack, idx) => ((0, jsx_runtime_1.jsx)(react_2.Button, { size: "xs", variant: "outline", borderColor: idx === selectedIndex ? theme.colors.primary[400] : theme.colors.primary[200], bg: idx === selectedIndex ? theme.colors.primary[50] : theme.colors.background[50], color: (0, accentText_1.accentTextOnCanvas)(theme.colors.primary, idx === selectedIndex ? theme.colors.primary[50] : theme.colors.background[50]), borderRadius: "lg", fontWeight: "medium", _hover: {
-                                bg: theme.colors.primary[100],
-                            }, _active: {
-                                bg: theme.colors.primary[100],
-                            }, onClick: () => setSelectedIndex(idx), children: pack.label }, pack.var_id))) })] })] }));
-};
-exports.default = ProductDtlPrice;

package/dist/Components/ProductDetails/ProductImageSlider.d.ts

@@ -1,13 +0,0 @@
-import { images } from "./ProductDetailsProps";
-import { batch } from "../ProductCard/ProductCardProps";
-interface ProductImageSliderProps {
-    images?: images[];
-    thumbHeight?: number;
-    imageSize?: number;
-    thumbnailsToShow?: number;
-    batch?: batch;
-    /** Used to build each image's alt text ("<name>, image 2 of 5"); falls back to "Product". */
-    productName?: string;
-}
-export default function ProductImageSlider({ images, thumbHeight, imageSize, thumbnailsToShow, batch, productName, }: ProductImageSliderProps): import("react/jsx-runtime").JSX.Element;
-export {};