pixelize-design-library 2.4.2 → 3.0.0

package/dist/Theme/chakra/Switch.styles.d.ts

@@ -1,30 +0,0 @@
-import type { StyleFunctionProps } from "@chakra-ui/react";
-declare const $thumbBg: {
-    variable: string;
-    reference: string;
-};
-export declare const Switch: {
-    baseStyle?: (({ theme }: StyleFunctionProps) => {
-        thumb: {
-            [$thumbBg.variable]: string;
-            bg: string;
-        };
-    }) | undefined;
-    sizes?: {
-        [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-            keys: ("label" | "track" | "container" | "thumb")[];
-        }>;
-    } | undefined;
-    variants?: {
-        [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-            keys: ("label" | "track" | "container" | "thumb")[];
-        }>;
-    } | undefined;
-    defaultProps?: {
-        size?: string | number | undefined;
-        variant?: string | number | undefined;
-        colorScheme?: string | undefined;
-    } | undefined;
-    parts: ("label" | "track" | "container" | "thumb")[];
-};
-export {};

package/dist/Theme/chakra/Switch.styles.js

@@ -1,22 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Switch = void 0;
-const react_1 = require("@chakra-ui/react");
-const anatomy_1 = require("@chakra-ui/anatomy");
-const paletteFromTheme_1 = require("./paletteFromTheme");
-const { defineMultiStyleConfig, definePartsStyle } = (0, react_1.createMultiStyleConfigHelpers)(anatomy_1.switchAnatomy.keys);
-const $thumbBg = (0, react_1.cssVar)("switch-thumb-bg");
-/**
- * Same bug as Slider's thumb: Chakra's own Switch thumb baseStyle hardcodes `bg: "white"` with no
- * `_dark` gate at all, so every bare `<Switch>` renders a literal white knob on the dark canvas
- * regardless of mode.
- */
-const baseStyle = definePartsStyle(({ theme }) => ({
-    thumb: {
-        [$thumbBg.variable]: (0, paletteFromTheme_1.paletteOf)(theme).backgroundColor.light,
-        bg: $thumbBg.reference,
-    },
-}));
-exports.Switch = defineMultiStyleConfig({
-    baseStyle,
-});

package/dist/Theme/chakra/Tabs.styles.d.ts

@@ -1,42 +0,0 @@
-import type { StyleFunctionProps } from "@chakra-ui/react";
-declare const $bg: {
-    variable: string;
-    reference: string;
-};
-declare const $border: {
-    variable: string;
-    reference: string;
-};
-export declare const Tabs: {
-    baseStyle?: import("@chakra-ui/react").PartsStyleInterpolation<{
-        keys: ("tab" | "tablist" | "tabpanel" | "tabpanels" | "root" | "indicator")[];
-    }> | undefined;
-    sizes?: {
-        [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-            keys: ("tab" | "tablist" | "tabpanel" | "tabpanels" | "root" | "indicator")[];
-        }>;
-    } | undefined;
-    variants?: {
-        enclosed: ({ theme }: StyleFunctionProps) => {
-            tab: {
-                _selected: {
-                    [$border.variable]: string;
-                };
-            };
-        };
-        "enclosed-colored": ({ theme }: StyleFunctionProps) => {
-            tab: {
-                _selected: {
-                    [$bg.variable]: string;
-                };
-            };
-        };
-    } | undefined;
-    defaultProps?: {
-        size?: string | number | undefined;
-        variant?: "enclosed" | "enclosed-colored" | undefined;
-        colorScheme?: string | undefined;
-    } | undefined;
-    parts: ("tab" | "tablist" | "tabpanel" | "tabpanels" | "root" | "indicator")[];
-};
-export {};

package/dist/Theme/chakra/Tabs.styles.js

@@ -1,36 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tabs = void 0;
-const paletteFromTheme_1 = require("./paletteFromTheme");
-const react_1 = require("@chakra-ui/react");
-const anatomy_1 = require("@chakra-ui/anatomy");
-const { defineMultiStyleConfig, definePartsStyle } = (0, react_1.createMultiStyleConfigHelpers)(anatomy_1.tabsAnatomy.keys);
-const $bg = (0, react_1.cssVar)("tabs-bg");
-const $border = (0, react_1.cssVar)("tabs-border-color");
-/**
- * Same bug class as Menu/Modal/Popover: Chakra's own Tabs baseStyle hardcodes the selected tab's
- * "cutout" color to `colors.white` outside `_dark` for two variants — `enclosed`'s selected border
- * (meant to match the panel it sits against) and `enclosed-colored`'s selected background — both
- * gated behind `_dark`, which this theme-swap app never triggers. Every selected `enclosed`/
- * `enclosed-colored` tab renders a white seam/fill on the dark canvas.
- */
-const variantEnclosed = definePartsStyle(({ theme }) => ({
-    tab: {
-        _selected: {
-            [$border.variable]: (0, paletteFromTheme_1.paletteOf)(theme).backgroundColor.light,
-        },
-    },
-}));
-const variantEnclosedColored = definePartsStyle(({ theme }) => ({
-    tab: {
-        _selected: {
-            [$bg.variable]: (0, paletteFromTheme_1.paletteOf)(theme).backgroundColor.light,
-        },
-    },
-}));
-exports.Tabs = defineMultiStyleConfig({
-    variants: {
-        enclosed: variantEnclosed,
-        "enclosed-colored": variantEnclosedColored,
-    },
-});

package/dist/esm/Components/Buttons/Buttons.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-const Buttons = ({ onClick, label, className, disabled }) => {
-    return (_jsx("button", { onClick: onClick, className: `bg-purple-600 text-white font-medium py-2 px-4 rounded focus:outline-none focus:ring-offset-2  ${className} ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`, disabled: disabled, children: label }));
-};
-export default Buttons;

package/dist/esm/Components/Common/ErrorComponent.js

@@ -1,12 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { HStack, Text } from "@chakra-ui/react";
-import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { onFilled } from "../../Theme/tokens/builders/accentText.js";
-const ErrorComponent = ({ error, errorClassName, }) => {
-    const { colors } = useCustomTheme();
-    const errorFill = colors.semanticText.error;
-    // errorFill is ink, not a fill tuned to carry a mark — pick the mark's ink structurally.
-    const markInk = onFilled(errorFill, colors.white, colors.black);
-    return (_jsxs(HStack, { as: "p", align: "flex-start", spacing: 1, mt: 1, fontSize: "sm", color: errorFill, className: errorClassName, children: [_jsxs("svg", { width: "12", height: "12", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true, children: [_jsx("circle", { cx: "50", cy: "50", r: "50", fill: errorFill }), _jsx("rect", { x: "46", y: "40", width: "8", height: "30", rx: "2", fill: markInk }), _jsx("circle", { cx: "50", cy: "28", r: "4", fill: markInk })] }), _jsx(Text, { as: "span", children: error })] }));
-};
-export default ErrorComponent;

package/dist/esm/Components/Common/FormattedDescription.js

@@ -1,59 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { Box, Text } from "@chakra-ui/react";
-import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-const InlineText = ({ text }) => {
-    const nodes = [];
-    let i = 0;
-    while (i < text.length) {
-        if (text.startsWith("**", i)) {
-            const end = text.indexOf("**", i + 2);
-            if (end !== -1) {
-                nodes.push(_jsx(Text, { as: "span", fontWeight: "bold", children: text.slice(i + 2, end) }, `b-${i}`));
-                i = end + 2;
-                continue;
-            }
-        }
-        if (text.startsWith("*", i)) {
-            const end = text.indexOf("*", i + 1);
-            if (end !== -1) {
-                nodes.push(_jsx(Text, { as: "span", children: text.slice(i + 1, end) }, `i-${i}`));
-                i = end + 1;
-                continue;
-            }
-        }
-        const nextBold = text.indexOf("**", i);
-        const nextIt = text.indexOf("*", i);
-        const next = nextBold === -1
-            ? nextIt
-            : nextIt === -1
-                ? nextBold
-                : Math.min(nextBold, nextIt);
-        if (next === -1) {
-            nodes.push(_jsx(Text, { as: "span", children: text.slice(i) }, `t-${i}`));
-            break;
-        }
-        else {
-            nodes.push(_jsx(Text, { as: "span", children: text.slice(i, next) }, `t-${i}`));
-            i = next;
-        }
-    }
-    return _jsx(_Fragment, { children: nodes });
-};
-const FormattedDescription = ({ content }) => {
-    const { colors } = useCustomTheme();
-    if (!content)
-        return null;
-    const lines = content.split(/\r?\n/);
-    return (_jsx(Box, { children: lines.map((line, idx) => {
-            const m = line.match(/^(#{1,3})\s+(.*)$/);
-            if (m) {
-                const level = m[1].length;
-                const text = m[2];
-                const size = level === 1 ? "lg" : level === 2 ? "md" : "sm";
-                const weight = level === 1 ? "bold" : level === 2 ? "semibold" : "medium";
-                return (_jsx(Text, { fontSize: size, fontWeight: weight, mt: idx === 0 ? 0 : 2, textAlign: "left", children: _jsx(InlineText, { text: text }) }, `h-${idx}`));
-            }
-            return (_jsx(Text, { fontSize: "sm", color: colors.text[500], mt: idx === 0 ? 0 : 2, textAlign: "justify", children: _jsx(InlineText, { text: line }) }, `p-${idx}`));
-        }) }));
-};
-export default FormattedDescription;

package/dist/esm/Components/Common/Label.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { FormLabel, Text } from "@chakra-ui/react";
-import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-const Label = ({ label, htmlFor, labelClassName, isRequired, }) => {
-    const { colors } = useCustomTheme();
-    return (_jsxs(FormLabel, { htmlFor: htmlFor, mb: 1, fontSize: "sm", fontWeight: "medium", className: labelClassName, color: colors.header[500], children: [label, isRequired && (_jsx(Text, { as: "span", color: colors.semanticText.error, ml: 1, children: "*" }))] }));
-};
-export default Label;

package/dist/esm/Components/Input/Input/Input.js

@@ -1,36 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState } from "react";
-import { Box, Input as ChakraInput, IconButton } from "@chakra-ui/react";
-import { Eye, EyeOff } from "lucide-react";
-import { TextLabel } from "../../Common/FormLabel.js";
-import { FIELD_RADIUS } from "../../Common/fieldStyles.js";
-import ErrorComponent from "../../Common/ErrorComponent.js";
-import { accentTextOnCanvas } from "../../../Theme/tokens/builders/accentText.js";
-import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
-const Input = ({ label, type, value, onChange, error, placeholder, className, inputBoxClassName, isRequired, isInformation, informationMessage, }) => {
-    const { colors } = useCustomTheme();
-    const [showPassword, setShowPassword] = useState(false);
-    const isPassword = type === "password";
-    const inputType = isPassword ? (showPassword ? "text" : "password") : type;
-    const borderColor = error
-        ? colors.semanticText.error
-        : value
-            ? colors.primary[500]
-            : colors.boxborder[500];
-    const shadowPrimary = colors.boxShadow.primary;
-    const shadowError = colors.boxShadow.error;
-    return (_jsxs(Box, { className: inputBoxClassName, mb: 4, children: [_jsx(TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage }), _jsxs(Box, { position: "relative", w: "100%", overflow: "hidden", children: [_jsx(ChakraInput, { type: inputType, value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, className: className, px: 4, py: 2, borderRadius: FIELD_RADIUS, borderWidth: "1px", borderColor: borderColor, color: accentTextOnCanvas(colors.secondary, colors.backgroundColor.main), pr: isPassword ? 10 : 4, _hover: {
-                            borderColor: error
-                                ? colors.semantic.error[600]
-                                : value
-                                    ? colors.primary[600]
-                                    : colors.gray[400],
-                        }, _focus: {
-                            borderColor: error ? colors.semanticText.error : colors.primary[500],
-                            boxShadow: error
-                                ? `0 0 0 0.125rem ${shadowError}`
-                                : `0 0 0 0.125rem ${shadowPrimary}`,
-                            outline: "none",
-                        }, required: isRequired }), isPassword && (_jsx(IconButton, { type: "button", "aria-label": showPassword ? "Hide password" : "Show password", variant: "ghost", size: "sm", position: "absolute", right: 2, top: "50%", transform: "translateY(-50%)", icon: showPassword ? _jsx(Eye, { size: 20 }) : _jsx(EyeOff, { size: 20 }), onClick: () => setShowPassword((prev) => !prev), color: colors.textMuted }))] }), error && _jsx(ErrorComponent, { error: error })] }));
-};
-export default React.memo(Input);

package/dist/esm/Components/PinInputs/PinInputs.js

@@ -1,41 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useState } from "react";
-import { Box, HStack, Input } from "@chakra-ui/react";
-import Label from "../Common/Label.js";
-import ErrorComponent from "../Common/ErrorComponent.js";
-import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-const PinInputs = ({ length = 3, label, error, onChange, onComplete, mask = false, placeholder = "*", }) => {
-    const { colors } = useCustomTheme();
-    const [values, setValues] = useState(Array(length).fill(""));
-    const inputsRef = useRef([]);
-    const borderColor = error
-        ? colors.semanticText.error
-        : colors.boxborder[500];
-    const focusRing = error ? colors.boxShadow.error : colors.boxShadow.primary;
-    const focusShadow = `0 0 0 0.125rem ${focusRing}`;
-    const handleChange = (index, value) => {
-        var _a;
-        if (!/^[0-9]?$/.test(value))
-            return;
-        const newValues = [...values];
-        newValues[index] = value;
-        setValues(newValues);
-        onChange === null || onChange === void 0 ? void 0 : onChange(newValues.join(""));
-        if (value && index < length - 1) {
-            (_a = inputsRef.current[index + 1]) === null || _a === void 0 ? void 0 : _a.focus();
-        }
-        if (newValues.every((v) => v !== "")) {
-            onComplete === null || onComplete === void 0 ? void 0 : onComplete(newValues.join(""));
-        }
-    };
-    const handleKeyDown = (e, index) => {
-        var _a;
-        if (e.key === "Backspace" && !values[index] && index > 0) {
-            (_a = inputsRef.current[index - 1]) === null || _a === void 0 ? void 0 : _a.focus();
-        }
-    };
-    return (_jsxs(Box, { children: [label && _jsx(Label, { label: label }), _jsx(HStack, { spacing: 2, children: Array.from({ length }).map((_, index) => (_jsx(Input, { ref: (el) => {
-                        inputsRef.current[index] = el;
-                    }, type: mask ? "password" : "text", inputMode: "numeric", maxLength: 1, placeholder: placeholder, value: values[index], onChange: (e) => handleChange(index, e.target.value), onKeyDown: (e) => handleKeyDown(e, index), w: 12, h: 12, textAlign: "center", fontSize: "lg", borderWidth: "1px", borderColor: borderColor, borderRadius: "md", _focus: { boxShadow: focusShadow, outline: "none" } }, index))) }), error && _jsx(ErrorComponent, { error: error })] }));
-};
-export default PinInputs;

package/dist/esm/Components/ProductCard/ProductLabel.js

@@ -1,18 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Text } from '@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 (_jsxs(Box, { children: [_jsx(Text, { fontWeight: "bold", fontSize: fontSizes[size], children: label }), description && _jsx(Text, { fontSize: descriptionSizes[size], fontStyle: "italic", children: description })] }));
-};
-export default ProductLabel;

package/dist/esm/Components/ProductCard/ProductPrice.js

@@ -1,110 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useRef, useState, useEffect } from 'react';
-import { Box, Text, Portal, useOutsideClick, Flex, Grid, HStack, Badge, useBreakpointValue, } from '@chakra-ui/react';
-import OverflowTooltipText from '../SideBar/components/OverflowTooltipText.js';
-import { useCustomTheme } from '../../Theme/useCustomTheme.js';
-import { accentTextOnCanvas } from '../../Theme/tokens/builders/accentText.js';
-import { rafThrottle } from '../../Utils/rafThrottle.js';
-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 = useCustomTheme();
-    const [isOpen, setIsOpen] = useState(false);
-    const [selected, setSelected] = useState(options[0]);
-    const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0, width: 0 });
-    const buttonRef = useRef(null);
-    const dropdownRef = useRef(null);
-    const isSingleOption = options.length === 1;
-    const isMobile = useBreakpointValue({ base: true, md: false });
-    useOutsideClick({
-        ref: dropdownRef,
-        handler: () => setIsOpen(false),
-    });
-    const getDiscountedPrice = (option) => Math.round(option.price - (option.price * option.offer) / 100);
-    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 = 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]);
-    useEffect(() => {
-        onSelect === null || onSelect === void 0 ? void 0 : onSelect(selected);
-    }, [selected, onSelect]);
-    return (_jsxs(_Fragment, { children: [isSingleOption ? (_jsx(Box, { border: "0.063rem solid", borderColor: theme.colors.red[300], bg: theme.colors.red[50], px: cfg.px, 
-                // py={cfg.py}
-                rounded: "md", display: "inline-block", w: "100%", children: _jsx(Text, { fontSize: cfg.label, fontWeight: "medium", children: options[0].label }) })) : (_jsxs(Box, { ref: buttonRef, onClick: () => setIsOpen(!isOpen), border: "0.063rem solid", borderColor: theme.colors.red[300], bg: theme.colors.red[50], px: cfg.px, 
-                // py={cfg.py}
-                rounded: "md", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", w: "100%", children: [_jsx(Box, { flex: "1", minW: 0, children: _jsx(OverflowTooltipText, { placement: "top", maxWidth: "100%", fontSize: cfg.label, fontWeight: "medium", whiteSpace: "nowrap", children: selected.label }) }), _jsx(Text, { fontSize: cfg.font, color: accentTextOnCanvas(theme.colors.red, theme.colors.red[50]), transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)', transition: "transform 0.2s", children: "\u25BE" })] })), !isSingleOption && isOpen && (_jsx(Portal, { children: _jsx(Box, { ref: dropdownRef, 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.red[300], borderRadius: "md", 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 (_jsxs(Grid, { px: 1, py: 0.5, cursor: "pointer", bg: isSelected ? theme.colors.red[50] : theme.colors.background[50], borderLeft: isSelected ? '0.25rem solid' : '0.25rem solid transparent', borderLeftColor: isSelected ? theme.colors.red[300] : "transparent", _hover: { bg: theme.colors.red[100] }, onClick: () => {
-                                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: [_jsx(HStack, { gridColumn: 1, gridRow: 1, spacing: 2, align: "center", minW: 0, mb: 0, children: _jsx(Box, { flex: "1", minW: 0, children: _jsx(OverflowTooltipText, { placement: "top", maxWidth: "100%", fontSize: { base: "xs", md: "sm" }, fontWeight: "medium", whiteSpace: "nowrap", children: option.label }) }) }), _jsx(Box, { gridColumn: 1, gridRow: 2, mt: 0, textAlign: "left", children: _jsxs(HStack, { spacing: 2, align: "center", children: [option.offer > 0 && (_jsx(Badge, { bg: theme.colors.green[100], color: accentTextOnCanvas(theme.colors.green, theme.colors.green[100]), borderRadius: "md", px: { base: 0, md: 0.5 }, py: { base: 0, md: 0.25 }, fontWeight: "bold", fontSize: "10px", flexShrink: 0, children: isMobile ? `${option.offer}%` : `${option.offer}% OFF` })), _jsxs(Text, { fontSize: "sm", fontWeight: "bold", color: accentTextOnCanvas(theme.colors.red, isSelected ? theme.colors.red[50] : theme.colors.background[50]), whiteSpace: "nowrap", children: ["\u20B9", discounted] }), option.offer > 0 && (_jsxs(Text, { fontSize: "xs", color: theme.colors.textMuted, textDecoration: "line-through", whiteSpace: "nowrap", children: ["\u20B9", option.price] }))] }) }), _jsx(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.125rem solid", borderColor: isSelected ? theme.colors.red[500] : theme.colors.boxborder[500], bg: theme.colors.background[50], display: "flex", alignItems: "center", justifyContent: "center", boxShadow: "none", children: isSelected && (_jsx(Box, { w: { base: "0.25rem", md: "0.3125rem" }, h: { base: "0.25rem", md: "0.3125rem" }, bg: theme.colors.red[500], borderRadius: "full" })) })] }, option.var_id));
-                    }) }) })), _jsxs(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: [_jsxs(Box, { display: "flex", alignItems: "center", fontSize: cfg.price, gap: 2, minW: 0, children: [selected.offer > 0 && (_jsxs(Text, { color: theme.colors.textMuted, textDecoration: "line-through", children: ["\u20B9", selected.price] })), _jsxs(Text, { color: accentTextOnCanvas(theme.colors.red, theme.colors.backgroundColor.main), fontWeight: "semibold", children: ["\u20B9", getDiscountedPrice(selected)] })] }), rightSlot && (_jsx(Box, { flexShrink: 0, mt: { base: 2, md: 0 }, children: rightSlot }))] })] }));
-};
-export default ProductPrice;

package/dist/esm/Components/ProductCard/ProductReview.js

@@ -1,22 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Flex, Text, Icon } from '@chakra-ui/react';
-import { BookCheck, Star } from 'lucide-react';
-import { useCustomTheme } from '../../Theme/useCustomTheme.js';
-import { accentTextOnCanvas } from '../../Theme/tokens/builders/accentText.js';
-// 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 = "#ECC94B";
-const ProductReview = ({ rating, reviewCount, mb = 0 }) => {
-    const { colors } = 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;
-    return (_jsxs(Flex, { align: "center", gap: 2, mb: mb, children: [hasRating && (_jsxs(Flex, { align: "center", gap: 1, bg: colors.teal[50], color: accentTextOnCanvas(colors.teal, colors.teal[50]), px: 2, borderRadius: "md", children: [_jsxs(Box, { position: "relative", flexShrink: 0, display: "inline-block", width: "14px", height: "14px", lineHeight: 0, children: [_jsx(Box, { position: "absolute", top: 0, left: 0, width: "14px", height: "14px", children: _jsx(Star, { size: 14, fill: "none", strokeWidth: 1.5 }) }), fillPercentage > 0 && (_jsx(Box, { position: "absolute", top: 0, left: 0, width: `${fillPercentage}%`, height: "100%", overflow: "hidden", children: _jsx(Star, { size: 14, color: RATING_STAR_FILL, fill: RATING_STAR_FILL }) }))] }), _jsx(Text, { fontSize: "sm", fontWeight: "bold", children: numericRating })] })), hasRating && hasReviewCount && _jsx(Box, { h: "4", w: "0.063rem", bg: colors.boxborder[500] }), hasReviewCount && (_jsxs(Flex, { align: "center", gap: "1", children: [_jsx(Icon, { as: BookCheck, boxSize: 3.5 }), _jsxs(Text, { fontSize: "sm", color: colors.textMuted, children: ["(", reviewCount, ")"] })] }))] }));
-};
-export default ProductReview;

package/dist/esm/Components/ProductCard/ProductTags.js

@@ -1,48 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import { Box, Flex } from '@chakra-ui/react';
-import ToolTip from '../ToolTip/ToolTip.js';
-import { useCustomTheme } from '../../Theme/useCustomTheme.js';
-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 (_jsx(Flex, { direction: "column", gap: "1", className: className, w: "full", children: getRows(tags).map((row, rowIndex) => (_jsx(Flex, { gap: "1", children: row.map((tag, tagIndex) => (_jsx(Tag, { fullWidth: row.length === 1, size: size, children: tag }, tagIndex))) }, rowIndex))) }));
-};
-const Tag = ({ children, fullWidth = false, size = 'sm', }) => {
-    const { colors } = useCustomTheme();
-    const tagBorder = colors.semanticText.error;
-    const tagText = colors.text[900];
-    // 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.useRef(null);
-    const [truncated, setTruncated] = React.useState(false);
-    React.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 = (_jsx(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 ? (_jsx(ToolTip, { label: String(children), hasArrow: true, openDelay: 300, placement: 'bottom', children: content })) : (content);
-};
-export default ProductTags;

package/dist/esm/Components/ProductDetails/ProductDtlPrice.js

@@ -1,22 +0,0 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { useState, useEffect } from "react";
-import { Box, Text, HStack, Badge, Button, VStack, } from "@chakra-ui/react";
-import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
-const ProductDtlPrice = ({ price, onSelect }) => {
-    const [selectedIndex, setSelectedIndex] = useState(0);
-    const selected = price[selectedIndex];
-    const discounted = Math.round(selected.price - (selected.price * selected.offer) / 100);
-    const theme = useCustomTheme();
-    useEffect(() => {
-        onSelect === null || onSelect === void 0 ? void 0 : onSelect(selected);
-    }, [selected, onSelect]);
-    return (_jsxs(VStack, { align: "start", spacing: 3, p: 4, borderRadius: "md", w: "full", children: [_jsxs(HStack, { spacing: 2, align: "center", children: [selected.offer > 0 && (_jsxs(Text, { fontSize: "lg", color: theme.colors.textMuted, as: "s", children: ["\u20B9", selected.price] })), _jsxs(Text, { fontSize: "xl", color: accentTextOnCanvas(theme.colors.red, theme.colors.backgroundColor.main), fontWeight: "bold", children: ["\u20B9", discounted] }), selected.offer > 0 && (_jsxs(Badge, { colorScheme: "pink", fontSize: "xs", borderRadius: "sm", px: 2, py: 0.5, children: ["SAVE ", selected.offer, "%"] }))] }), _jsx(Text, { fontSize: "sm", color: theme.colors.textMuted, children: "(Incl. of all taxes)" }), _jsxs(Box, { children: [_jsxs(Text, { fontSize: "sm", fontWeight: "bold", textTransform: "uppercase", mb: 1, children: ["Packs : ", selected.label] }), _jsx(HStack, { spacing: 2, children: price.map((pack, idx) => (_jsx(Button, { size: "xs", variant: "outline", borderColor: idx === selectedIndex ? theme.colors.orange[400] : theme.colors.orange[200], bg: idx === selectedIndex ? theme.colors.orange[50] : theme.colors.background[50], 
-                            // orange.600 fails AA against both possible bg states — walk the scale per canvas
-                            color: accentTextOnCanvas(theme.colors.orange, idx === selectedIndex ? theme.colors.orange[50] : theme.colors.background[50]), borderRadius: "md", fontWeight: "medium", _hover: {
-                                bg: theme.colors.orange[100],
-                            }, _active: {
-                                bg: theme.colors.orange[100],
-                            }, onClick: () => setSelectedIndex(idx), children: pack.label }, pack.var_id))) })] })] }));
-};
-export default ProductDtlPrice;