npm - pixelize-design-library - Versions diffs - 2.4.2-beta.56 → 2.4.2-beta.57 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (354) hide show

package/dist/esm/Theme/tokens/builders/index.js CHANGED Viewed

@@ -11,3 +11,4 @@ export * from "./tone.js";
 export * from "./scrim.js";
 export * from "./tooltipSurface.js";
 export * from "./surfaceRaised.js";
+export * from "./star.js";

package/dist/esm/Theme/tokens/builders/rechartsTheme.js ADDED Viewed

@@ -0,0 +1,37 @@
+import radii from "../primitives/radii.js";
+import { chartInk, getCategoricalSeriesColors } from "./chartColorsFromTheme.js";
+const FONT = "inherit";
+const FONT_SIZE = "12px";
+const DASH = "4 4";
+// Reuses chartInk/getCategoricalSeriesColors — no parallel color derivation. No recharts import.
+export function buildRechartsTheme(colors) {
+    const ink = chartInk(colors);
+    return {
+        seriesColors: getCategoricalSeriesColors(colors),
+        grid: { stroke: ink.grid, strokeDasharray: DASH },
+        axis: {
+            stroke: ink.grid,
+            tick: { fill: ink.axis, fontSize: FONT_SIZE, fontFamily: FONT },
+        },
+        tooltip: {
+            contentStyle: {
+                backgroundColor: ink.tooltipBg,
+                border: `1px solid ${ink.grid}`,
+                borderRadius: radii.md,
+                color: ink.text,
+                fontSize: FONT_SIZE,
+                fontFamily: FONT,
+            },
+            labelStyle: { color: ink.text, fontWeight: 600 },
+            itemStyle: { color: ink.text },
+            cursor: { stroke: ink.grid, strokeDasharray: DASH },
+        },
+        legend: {
+            wrapperStyle: { color: ink.muted, fontSize: FONT_SIZE, fontFamily: FONT },
+        },
+        referenceLine: { stroke: ink.muted, strokeDasharray: DASH },
+        surface: ink.surface,
+        text: ink.text,
+        muted: ink.muted,
+    };
+}

package/dist/esm/Theme/tokens/builders/star.js ADDED Viewed

@@ -0,0 +1,4 @@
+import { relativeLuminance } from "./color.js";
+export const STAR_ON_LIGHT = "#f5a70a";
+export const STAR_ON_DARK = "#f6b93b";
+export const buildStar = (canvas) => relativeLuminance(canvas) > 0.18 ? STAR_ON_LIGHT : STAR_ON_DARK;

package/dist/esm/Theme/useChartTheme.js ADDED Viewed

@@ -0,0 +1,8 @@
+import { useMemo } from "react";
+import { useCustomTheme } from "./useCustomTheme.js";
+import { buildRechartsTheme } from "./tokens/builders/rechartsTheme.js";
+export const useChartTheme = () => {
+    const { colors } = useCustomTheme();
+    return useMemo(() => buildRechartsTheme(colors), [colors]);
+};
+export default useChartTheme;

package/dist/esm/Utils/price.js ADDED Viewed

@@ -0,0 +1,27 @@
+export const DEFAULT_CURRENCY = "INR";
+export const DEFAULT_LOCALE = "en-IN";
+export function formatPrice(value, options = {}) {
+    const { currency = DEFAULT_CURRENCY, locale = DEFAULT_LOCALE, maximumFractionDigits } = options;
+    const whole = Number.isInteger(value);
+    return new Intl.NumberFormat(locale, {
+        style: "currency",
+        currency,
+        minimumFractionDigits: whole ? 0 : 2,
+        maximumFractionDigits: maximumFractionDigits !== null && maximumFractionDigits !== void 0 ? maximumFractionDigits : (whole ? 0 : 2),
+    }).format(value);
+}
+export function discountPercent(price, mrp) {
+    if (mrp === undefined || mrp <= price || mrp <= 0)
+        return 0;
+    return Math.round(((mrp - price) / mrp) * 100);
+}
+export function discountAmount(price, mrp) {
+    if (mrp === undefined || mrp <= price)
+        return 0;
+    return mrp - price;
+}
+export function unitPrice(price, quantity, unit, per = 1) {
+    if (!(quantity > 0))
+        return null;
+    return { value: Math.round((price / quantity) * per * 100) / 100, per, unit };
+}

package/dist/esm/index.js CHANGED Viewed

@@ -143,6 +143,7 @@ export { rafThrottle } from "./Utils/rafThrottle.js";
 export { toWords } from "./Utils/functions.js";
 export { useDebouncedCallback, useDebouncedValue } from "./Hooks/useDebounce.js";
 export { CATEGORICAL_SERIES, chartAxisLabelColor, chartInk, chartMode, getCategoricalSeriesColors, getDefaultSeriesColors, labelOnSeries, } from "./Theme/tokens/builders/chartColorsFromTheme.js";
+export { useChartTheme } from "./Theme/useChartTheme.js";
 // 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
@@ -225,4 +226,39 @@ export { defaultMediaAudioPlayerLabels } from "./Components/MediaViewer/componen
 export { default as MediaScrubber } from "./Components/MediaViewer/components/MediaScrubber.js";
 export { default as MediaStatusPanel } from "./Components/MediaViewer/components/MediaStatusPanel.js";
 export { buildMediaItems, buildFileItems, planPreview, countMedia, fileKind, resolveMediaUrl, MIN_ZOOM, MAX_ZOOM, ZOOM_STEP, PLAYBACK_SPEEDS, SEEK_STEP_SECONDS, } from "./Components/MediaViewer/mediaItems.js";
+// Commerce
+export { default as Rating } from "./Components/Rating/Rating.js";
+export { default as PriceBlock } from "./Components/PriceBlock/PriceBlock.js";
+export { default as StockStatus } from "./Components/StockStatus/StockStatus.js";
+export { default as ProductBadges } from "./Components/ProductBadges/ProductBadges.js";
+export { default as WishlistToggle } from "./Components/WishlistToggle/WishlistToggle.js";
+export { default as OptionChip } from "./Components/OptionChip/OptionChip.js";
+export { default as VariantSelector } from "./Components/VariantSelector/VariantSelector.js";
+export { default as QuantityStepper } from "./Components/QuantityStepper/QuantityStepper.js";
+export { default as CartItem } from "./Components/CartItem/CartItem.js";
+export { default as OrderSummary } from "./Components/OrderSummary/OrderSummary.js";
+export { default as CouponField } from "./Components/CouponField/CouponField.js";
+export { default as OrderStatusTimeline } from "./Components/OrderStatusTimeline/OrderStatusTimeline.js";
+export { default as BagBar } from "./Components/BagBar/BagBar.js";
+export { default as StickyBuyBar } from "./Components/StickyBuyBar/StickyBuyBar.js";
+export { default as PincodeChecker } from "./Components/PincodeChecker/PincodeChecker.js";
+export { default as TrustBadges } from "./Components/TrustBadges/TrustBadges.js";
+export { default as OffersList } from "./Components/OffersList/OffersList.js";
+export { default as SpecTable } from "./Components/SpecTable/SpecTable.js";
+export { default as ReviewSummary } from "./Components/ReviewSummary/ReviewSummary.js";
+export { default as ReviewList } from "./Components/ReviewList/ReviewList.js";
+export { default as DetailSections } from "./Components/DetailSections/DetailSections.js";
+export { default as AddressCard } from "./Components/AddressCard/AddressCard.js";
+export { default as AddressCardGroup } from "./Components/AddressCard/AddressCardGroup.js";
+export { default as PaymentOption } from "./Components/PaymentOption/PaymentOption.js";
+export { default as PaymentOptionGroup } from "./Components/PaymentOption/PaymentOptionGroup.js";
+export { default as MediaGallery } from "./Components/MediaGallery/MediaGallery.js";
+export { default as MediaLightbox } from "./Components/MediaGallery/MediaLightbox.js";
+export { defaultMediaGalleryLabels } from "./Components/MediaGallery/MediaGalleryProps.js";
+export { defaultMediaLightboxLabels } from "./Components/MediaGallery/MediaLightboxProps.js";
+export { LOW_STOCK_THRESHOLD, stockState, selectionComplete, findVariant, isOptionAvailable, remainingStock, priceRange, firstAvailableSelection } from "./Components/Commerce/commerceVariants.js";
+export { formatPrice, discountPercent, discountAmount, unitPrice } from "./Utils/price.js";
+export { default as ProductCardGrid } from "./Components/ProductCard/ProductCardGrid.js";
+export { default as ProductCardSkeleton } from "./Components/ProductCard/ProductCardSkeleton.js";
+export { default as QuickAddSheet } from "./Components/ProductCard/QuickAddSheet.js";
 export * from "./Components/Primitives/Primitives.js";

package/dist/index.d.ts CHANGED Viewed

@@ -127,6 +127,8 @@ export { toWords } from "./Utils/functions";
 export { useDebouncedCallback, useDebouncedValue } from "./Hooks/useDebounce";
 export { CATEGORICAL_SERIES, chartAxisLabelColor, chartInk, chartMode, getCategoricalSeriesColors, getDefaultSeriesColors, labelOnSeries, } from "./Theme/tokens/builders/chartColorsFromTheme";
 export type { ChartMode } from "./Theme/tokens/builders/chartColorsFromTheme";
+export { useChartTheme } from "./Theme/useChartTheme";
+export type { RechartsAxisTheme, RechartsChartTheme, RechartsGridTheme, RechartsLegendTheme, RechartsTooltipTheme, } from "./Theme/useChartTheme";
 export type { ColorMode, ResolvedColorMode, ThemeName, PaletteProps, ColorScale, BrandScale, SemanticColors, NamedSurfaces, FocusRingTokens, } from "./Theme/tokens/types";
 export { statusGradient, inkSafeGradient, chipFill, chipBorder, ACCENT_GRADIENT, STATUS_INK, } from "./Components/PlanPill/planPillGradient";
 export { isDarkCanvas, onFilled, onGradient, accentTextOnCanvas, pickAccentText, AA_NORMAL_TEXT, DARK_CANVAS_LUMINANCE, } from "./Theme/tokens/builders/accentText";
@@ -287,4 +289,68 @@ export { default as MediaStatusPanel } from "./Components/MediaViewer/components
 export type { MediaStatusPanelProps, MediaStatusTone } from "./Components/MediaViewer/components/MediaStatusPanelProps";
 export { buildMediaItems, buildFileItems, planPreview, countMedia, fileKind, resolveMediaUrl, MIN_ZOOM, MAX_ZOOM, ZOOM_STEP, PLAYBACK_SPEEDS, SEEK_STEP_SECONDS, } from "./Components/MediaViewer/mediaItems";
 export type { MediaItem, MediaKind, FileKind, MediaSource, MediaSources, MediaFile, ViewerFile, ResolveUrl, } from "./Components/MediaViewer/mediaItems";
+export { default as Rating } from "./Components/Rating/Rating";
+export type { RatingProps, RatingSize } from "./Components/Rating/RatingProps";
+export { default as PriceBlock } from "./Components/PriceBlock/PriceBlock";
+export type { PriceBlockProps, PriceBlockSize, PriceBlockAlign, PriceBlockLabels } from "./Components/PriceBlock/PriceBlockProps";
+export { default as StockStatus } from "./Components/StockStatus/StockStatus";
+export type { StockStatusProps, StockStatusSize } from "./Components/StockStatus/StockStatusProps";
+export { default as ProductBadges } from "./Components/ProductBadges/ProductBadges";
+export type { ProductBadgesProps, ProductBadgeSize, ProductBadgeVariant, ProductBadgesOrientation } from "./Components/ProductBadges/ProductBadgesProps";
+export { default as WishlistToggle } from "./Components/WishlistToggle/WishlistToggle";
+export type { WishlistToggleProps, WishlistToggleSize, WishlistToggleVariant } from "./Components/WishlistToggle/WishlistToggleProps";
+export { default as OptionChip } from "./Components/OptionChip/OptionChip";
+export type { OptionChipProps, OptionChipVariant, OptionChipSize } from "./Components/OptionChip/OptionChipProps";
+export { default as VariantSelector } from "./Components/VariantSelector/VariantSelector";
+export type { VariantSelectorProps, VariantSelectorLayout } from "./Components/VariantSelector/VariantSelectorProps";
+export { default as QuantityStepper } from "./Components/QuantityStepper/QuantityStepper";
+export type { QuantityStepperProps, QuantityStepperSize, QuantityStepperVariant } from "./Components/QuantityStepper/QuantityStepperProps";
+export { default as CartItem } from "./Components/CartItem/CartItem";
+export type { CartItemProps, CartItemLayout, CartItemLabels } from "./Components/CartItem/CartItemProps";
+export { default as OrderSummary } from "./Components/OrderSummary/OrderSummary";
+export type { OrderSummaryProps, OrderSummaryTone, OrderSummaryLine, FreeShippingProgress, OrderSummaryLabels } from "./Components/OrderSummary/OrderSummaryProps";
+export { default as CouponField } from "./Components/CouponField/CouponField";
+export type { CouponFieldProps, CouponStatus, CouponSuggestion, CouponFieldLabels } from "./Components/CouponField/CouponFieldProps";
+export { default as OrderStatusTimeline } from "./Components/OrderStatusTimeline/OrderStatusTimeline";
+export type { OrderStatusTimelineProps, OrderStepState, OrderStatusStep, OrderStatusOrientation, OrderStatusTimelineLabels } from "./Components/OrderStatusTimeline/OrderStatusTimelineProps";
+export { default as BagBar } from "./Components/BagBar/BagBar";
+export type { BagBarProps, BagBarPosition, BagBarLabels } from "./Components/BagBar/BagBarProps";
+export { default as StickyBuyBar } from "./Components/StickyBuyBar/StickyBuyBar";
+export type { StickyBuyBarProps, StickyBuyBarMode, StickyBuyBarPosition, StickyBuyBarLabels } from "./Components/StickyBuyBar/StickyBuyBarProps";
+export { default as PincodeChecker } from "./Components/PincodeChecker/PincodeChecker";
+export type { PincodeCheckerProps, PincodeStatus, PincodeResult, PincodeCheckerLabels } from "./Components/PincodeChecker/PincodeCheckerProps";
+export { default as TrustBadges } from "./Components/TrustBadges/TrustBadges";
+export type { TrustBadgesProps, TrustItem, TrustBadgesLayout } from "./Components/TrustBadges/TrustBadgesProps";
+export { default as OffersList } from "./Components/OffersList/OffersList";
+export type { OffersListProps, Offer, OffersListLabels } from "./Components/OffersList/OffersListProps";
+export { default as SpecTable } from "./Components/SpecTable/SpecTable";
+export type { SpecTableProps, SpecItem, SpecTableLabels } from "./Components/SpecTable/SpecTableProps";
+export { default as ReviewSummary } from "./Components/ReviewSummary/ReviewSummary";
+export type { ReviewSummaryProps, RatingBreakdown, ReviewSummaryLabels } from "./Components/ReviewSummary/ReviewSummaryProps";
+export { default as ReviewList } from "./Components/ReviewList/ReviewList";
+export type { ReviewListProps, ReviewMedia, ReviewItem, ReviewListLabels } from "./Components/ReviewList/ReviewListProps";
+export { default as DetailSections } from "./Components/DetailSections/DetailSections";
+export type { DetailSectionsProps, DetailSection, LegalInfo, DetailSectionsLabels, DetailSectionsLayout } from "./Components/DetailSections/DetailSectionsProps";
+export { default as AddressCard } from "./Components/AddressCard/AddressCard";
+export { default as AddressCardGroup } from "./Components/AddressCard/AddressCardGroup";
+export type { AddressCardProps, AddressCardGroupProps, AddressCardLabels } from "./Components/AddressCard/AddressCardProps";
+export { default as PaymentOption } from "./Components/PaymentOption/PaymentOption";
+export { default as PaymentOptionGroup } from "./Components/PaymentOption/PaymentOptionGroup";
+export type { PaymentOptionProps, PaymentOptionGroupProps } from "./Components/PaymentOption/PaymentOptionProps";
+export { default as MediaGallery } from "./Components/MediaGallery/MediaGallery";
+export { default as MediaLightbox } from "./Components/MediaGallery/MediaLightbox";
+export { defaultMediaGalleryLabels } from "./Components/MediaGallery/MediaGalleryProps";
+export { defaultMediaLightboxLabels } from "./Components/MediaGallery/MediaLightboxProps";
+export type { MediaGalleryProps, MediaGalleryLabels, MediaGalleryLayout, MediaGalleryZoom, MediaAspectRatio } from "./Components/MediaGallery/MediaGalleryProps";
+export type { MediaLightboxProps, MediaLightboxLabels } from "./Components/MediaGallery/MediaLightboxProps";
+export type { ProductDetailsProps, ProductDetailsProduct, ProductDetailsLabels, ProductDetailsLayout } from "./Components/ProductDetails/ProductDetailsProps";
+export { LOW_STOCK_THRESHOLD, stockState, selectionComplete, findVariant, isOptionAvailable, remainingStock, priceRange, firstAvailableSelection } from "./Components/Commerce/commerceVariants";
+export type { ProductMedia, ProductBadgeTone, ProductBadge, OptionAxisType, OptionValue, OptionAxis, VariantSelection, ProductVariant, StockState, PriceFormat } from "./Components/Commerce/commerceTypes";
+export { formatPrice, discountPercent, discountAmount, unitPrice } from "./Utils/price";
+export type { PriceFormatOptions, UnitPrice } from "./Utils/price";
+export { default as ProductCardGrid } from "./Components/ProductCard/ProductCardGrid";
+export { default as ProductCardSkeleton } from "./Components/ProductCard/ProductCardSkeleton";
+export { default as QuickAddSheet } from "./Components/ProductCard/QuickAddSheet";
+export type { ProductCardProps, ProductCardLayout, ProductCardDensity, ProductCardAspectRatio, ProductCardAction, ProductCardLabels, ProductCardPressHandler, ProductCardSkeletonProps, ProductCardGridProps, ProductCardGridColumns } from "./Components/ProductCard/ProductCardProps";
+export type { QuickAddSheetProps, QuickAddSheetLabels, QuickAddPresentation } from "./Components/ProductCard/QuickAddSheetProps";
 export * from "./Components/Primitives/Primitives";

package/dist/index.js CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.4.2-beta.56",
+  "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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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;