pixelize-design-library 2.4.2-beta.42 → 2.4.2-beta.44

package/dist/Components/Backdrop/BackdropProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/Breadcrumbs/Breadcrumbs.js

@@ -3,10 +3,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = Breadcrumbs;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const breadcrumbInk_1 = require("./breadcrumbInk");
 function Breadcrumbs({ spacing, separator, fontWeight, fontSize, isCurrentPage, handleClick, items, }) {
     const theme = (0, react_1.useTheme)();
-    return ((0, jsx_runtime_1.jsx)(react_1.Breadcrumb, { spacing: spacing, separator: separator, fontWeight: fontWeight, fontSize: fontSize, fontFamily: theme.fonts.body, children: items.map((item, index) => ((0, jsx_runtime_1.jsx)(react_1.BreadcrumbItem, { isCurrentPage: isCurrentPage && index === items.length - 1, children: (0, jsx_runtime_1.jsx)(react_1.BreadcrumbLink, { href: item.path, sx: { "&:hover, &:active": { textDecoration: "none" } }, onClick: (event) => {
-                    event.preventDefault();
-                    handleClick(item.path);
-                }, children: item.label }) }, index))) }));
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const ink = (0, breadcrumbInk_1.breadcrumbInk)(colors);
+    const effectiveSeparator = separator !== null && separator !== void 0 ? separator : ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", color: ink.separator, children: "/" }));
+    return ((0, jsx_runtime_1.jsx)(react_1.Breadcrumb, { spacing: spacing, separator: effectiveSeparator, fontWeight: fontWeight, fontSize: fontSize, fontFamily: theme.fonts.body, children: items.map((item, index) => {
+            const isLast = isCurrentPage && index === items.length - 1;
+            return ((0, jsx_runtime_1.jsx)(react_1.BreadcrumbItem, { isCurrentPage: isLast, children: (0, jsx_runtime_1.jsx)(react_1.BreadcrumbLink, { href: item.path, color: isLast ? ink.current : ink.link, fontWeight: isLast ? 600 : fontWeight, sx: {
+                        "&:hover, &:active": { textDecoration: "none", color: isLast ? ink.current : ink.linkHover },
+                    }, onClick: (event) => {
+                        event.preventDefault();
+                        handleClick(item.path);
+                    }, children: item.label }) }, index));
+        }) }));
 }

package/dist/Components/Breadcrumbs/breadcrumbInk.d.ts

@@ -0,0 +1,9 @@
+import type { PaletteProps } from "../../Theme/tokens/types";
+export type BreadcrumbInk = {
+    link: string;
+    linkHover: string;
+    current: string;
+    separator: string;
+};
+/** Chakra ships no default Breadcrumb theme, so every ink here needs an explicit token. */
+export declare const breadcrumbInk: (colors: PaletteProps) => BreadcrumbInk;

package/dist/Components/Breadcrumbs/breadcrumbInk.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.breadcrumbInk = void 0;
+/** Chakra ships no default Breadcrumb theme, so every ink here needs an explicit token. */
+const breadcrumbInk = (colors) => ({
+    link: colors.textMuted,
+    linkHover: colors.accentText,
+    current: colors.text[900],
+    separator: colors.textMuted,
+});
+exports.breadcrumbInk = breadcrumbInk;

package/dist/Components/Button/Button.js

@@ -3,8 +3,8 @@ 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 Button = (0, react_1.forwardRef)(function Button({ label, children, onClick, opacity, variant = "solid", leftIcon, rightIcon, size, isDisabled = false, isLoading = false, loadingText = "Loading", type, width, w, sx, colorScheme, border, borderRadius, onMouseEnter, onMouseLeave, ...aria }, ref) {
+const Button = (0, react_1.forwardRef)(function Button({ label, children, onClick, opacity, variant = "solid", leftIcon, rightIcon, size, isDisabled = false, isLoading = false, loadingText, type, width, w, sx, colorScheme, border, borderRadius, onMouseEnter, onMouseLeave, ...aria }, ref) {
     const isIconOnly = !children && !label && !!(leftIcon || rightIcon);
-    return ((0, jsx_runtime_1.jsx)(react_2.Button, { ...aria, type: type, onClick: onClick, width: width || w || "fit-content", variant: variant, size: size, isLoading: isLoading, isDisabled: isDisabled, loadingText: loadingText, leftIcon: leftIcon, rightIcon: rightIcon, iconSpacing: isIconOnly ? 0 : undefined, ref: ref, colorScheme: colorScheme, sx: sx, opacity: opacity, border: border, borderRadius: borderRadius, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: children !== null && children !== void 0 ? children : label }));
+    return ((0, jsx_runtime_1.jsx)(react_2.Button, { ...aria, type: type, onClick: onClick, width: width || w || "fit-content", variant: variant, size: size, isLoading: isLoading, isDisabled: isDisabled, loadingText: loadingText, leftIcon: leftIcon, rightIcon: rightIcon, iconSpacing: isIconOnly ? 0 : undefined, px: isIconOnly ? 0 : undefined, ref: ref, colorScheme: colorScheme, sx: sx, opacity: opacity, border: border, borderRadius: borderRadius, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: children !== null && children !== void 0 ? children : label }));
 });
 exports.default = (0, react_1.memo)(Button);

package/dist/Components/Button/Button.styles.js

@@ -5,19 +5,15 @@ const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
 const gradientInk_1 = require("../../Theme/tokens/builders/gradientInk");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
-/**
- * Outline/ghost/link text sits ON the canvas, so it needs a rung that stays readable there —
- * `[500]` is pinned dark enough to carry a white label on the solid variant and measures only
- * ~4.2 against the dark canvas. Returns `[500]` unchanged on light canvases, so existing apps
- * are pixel-identical.
- */
+const motion_1 = require("../../Theme/chakra/motion");
+const primitives_1 = require("../../Theme/tokens/primitives");
+const controlSize = (size) => {
+    const { height, fontSize, paddingX } = primitives_1.CONTROL_SIZES[size];
+    return { h: height, minW: height, fontSize, px: paddingX };
+};
+// NOTE: [500] alone measures ~4.2 on a dark canvas — resolved per-mode so outline/ghost/link text stays readable.
 const onCanvasText = (theme, colorScheme) => (0, accentText_1.accentTextOnCanvas)(theme.colors[colorScheme], theme.colors.backgroundColor.main);
-/**
- * Ghost hover tint: translucent accent composited over whatever is behind it, so one value works
- * on either canvas. The `[50]` rung it replaces sits ~1.04 against its own canvas in BOTH modes —
- * a hover state you cannot see. Utility scales (red, green…) carry no `opacity` ramp, so they keep
- * `[50]`.
- */
+// NOTE: [50] alone measured ~1.04 (invisible) in both modes — opacity ramp fixes it where available.
 const onCanvasHoverBg = (theme, colorScheme, step) => {
     const scale = theme.colors[colorScheme];
     return "opacity" in scale ? scale.opacity[step] : scale[50];
@@ -31,14 +27,7 @@ const darkerFill = (theme, colorScheme, step) => {
 };
 /** Label for the solid variant's filled bg — derived from THAT fill, since hover/active swap it. */
 const labelFor = (theme, fill) => (0, filledSurface_1.labelOnFill)(fill, theme.colors.white, theme.colors.black);
-/**
- * The two-tone `:focus-visible` ring, from the palette's derived `focusRing` pair.
- *
- * Every variant spreads this. Before it, none of them defined `_focusVisible` at all, so every
- * button in every consuming app fell through to Chakra's stock `shadows.outline` — one fixed blue
- * that measured 1.83:1 on the canvas and 1.38:1 on a primary fill, failing WCAG 1.4.11 (3:1) on
- * all nine brands. `focusRing.test.ts` is the gate that keeps this true.
- */
+// NOTE: replaces Chakra's stock ring, which failed WCAG 1.4.11 on every brand — gated by focusRing.test.ts.
 const focusRing = (theme) => (0, focusRing_styles_1.focusVisibleStyles)(theme.colors);
 exports.Button = {
     // The ring is repeated on every variant below AND here, so a variant name this file does not
@@ -46,8 +35,8 @@ exports.Button = {
     baseStyle: ({ theme }) => ({
         borderRadius: "lg",
         fontWeight: 500,
-        fontSize: "1rem",
-        transition: "all 0.2s",
+        transition: (0, primitives_1.transitionFor)(["background-color", "border-color", "color", "box-shadow", "filter"]),
+        ...(0, motion_1.reducedMotionSx)(),
         _disabled: {
             opacity: 0.6,
             cursor: "not-allowed",
@@ -89,30 +78,20 @@ exports.Button = {
             };
         },
         outline: ({ theme, colorScheme = "primary" }) => {
-            // Same rung as `solid`'s fill, not raw [500] — keeps hover bg AA-safe for white text.
-            const hoverFill = theme.colors[colorScheme][buttonSolidRung(theme, colorScheme)];
-            const activeFill = darkerFill(theme, colorScheme, 0);
             const ink = onCanvasText(theme, colorScheme);
             return {
-                border: "0.1rem solid",
+                border: "0.0625rem solid",
                 borderColor: ink,
                 color: ink,
                 bg: "transparent",
                 _hover: {
-                    bg: hoverFill,
-                    borderColor: activeFill,
-                    color: labelFor(theme, hoverFill),
-                    _disabled: {
-                        //  bg: theme.colors[colorScheme][500],
-                        color: ink,
-                    },
+                    bg: onCanvasHoverBg(theme, colorScheme, 16),
+                    _disabled: { bg: "transparent" },
                 },
                 _active: {
-                    bg: activeFill,
-                    color: labelFor(theme, activeFill),
+                    bg: onCanvasHoverBg(theme, colorScheme, 24),
                 },
                 _loading: {
-                    // bg: theme.colors[colorScheme][500],
                     color: ink,
                 },
                 ...focusRing(theme),
@@ -182,34 +161,14 @@ exports.Button = {
         },
     },
     sizes: {
-        xs: {
-            h: "1.5rem",
-            fontSize: "0.75rem",
-            px: "0.5rem",
-        },
-        sm: {
-            h: "2rem",
-            fontSize: "0.875rem",
-            px: "0.75rem",
-        },
-        md: {
-            h: "2.5rem",
-            fontSize: "1rem",
-            px: "1rem",
-        },
-        lg: {
-            h: "3rem",
-            fontSize: "1.125rem",
-            px: "1.5rem",
-        },
-        xl: {
-            h: "3.5rem",
-            fontSize: "1.25rem",
-            px: "2rem",
-        },
+        xs: controlSize("xs"),
+        sm: controlSize("sm"),
+        md: controlSize("md"),
+        lg: controlSize("lg"),
+        xl: { h: "3.5rem", minW: "3.5rem", fontSize: "1.125rem", px: "2rem" },
     },
     defaultProps: {
-        size: "md",
+        size: primitives_1.DEFAULT_CONTROL_SIZE,
         variant: "solid",
         colorScheme: "primary",
     },

package/dist/Components/Button/ButtonProps.d.ts

@@ -3,13 +3,19 @@ type LayoutProps = Pick<ChakraButtonProps, "as" | "m" | "mt" | "mb" | "ml" | "mr
 type DataAttributes = {
     [key: `data-${string}`]: string | number | boolean | undefined;
 };
-/** Themed Chakra Button; loadingText defaults to the literal "Loading" (pass "" for spinner-only) — for a plain unthemed <button>, see the separate Buttons component. */
-export type ButtonProps = LayoutProps & DataAttributes & Pick<ChakraButtonProps, "onClick" | "leftIcon" | "rightIcon" | "isDisabled" | "isLoading" | "loadingText" | "spinner" | "sx" | "border" | "borderRadius" | "onMouseEnter" | "onMouseLeave" | "aria-label" | "aria-labelledby" | "aria-describedby" | "aria-expanded" | "aria-haspopup" | "aria-controls" | "aria-pressed" | "aria-current" | "id" | "title"> & {
+/** Themed Chakra Button (default size "sm"); loading shows a spinner and keeps the width — for a plain unthemed <button>, see the separate Buttons component. */
+export type ButtonProps = LayoutProps & DataAttributes & Pick<ChakraButtonProps, "onClick" | "leftIcon" | "rightIcon" | "isDisabled" | "isLoading" | "spinner" | "sx" | "border" | "borderRadius" | "onMouseEnter" | "onMouseLeave" | "aria-label" | "aria-labelledby" | "aria-describedby" | "aria-expanded" | "aria-haspopup" | "aria-controls" | "aria-pressed" | "aria-current" | "id" | "title"> & {
+    /** Button text; ignored when `children` is passed. No label or children plus an icon = icon-only. */
     label?: string;
+    /** Text beside the spinner while loading; omit it and the label stays laid out, hidden, so the width holds. */
+    loadingText?: string;
     /** Defaults to "fit-content", not 100%; the w alias only applies when width is unset — width wins if both are passed. */
     width?: string | number;
+    /** Control height xs 24 · sm 32 · md 40 · lg 48 (xl 56); defaults to "sm" via the theme, so a ButtonGroup size still applies. */
     size?: "lg" | "md" | "sm" | "xs" | "xl";
+    /** Defaults to "solid"; "gradient" paints the theme's fixed brand gradient. */
     variant?: "solid" | "outline" | "ghost" | "link" | "unstyled" | "gradient";
+    /** Chakra defaults this to "button", so pass "submit" explicitly inside a form. */
     type?: "button" | "submit" | "reset";
     /** Ignored when variant="gradient" — that variant always paints the theme's fixed gradient pair, not this scheme. */
     colorScheme?: 'primary' | 'secondary' | 'tertiary' | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink';

package/dist/Components/ButtonGroupIcon/ButtonGoupIconProps.d.ts

@@ -1,42 +1,2 @@
-import { ReactElement } from "react";
-/** Themed Chakra ButtonGroup wrapper (left icon + text button + right icon/dropdown) — closed prop list, no ...rest, text via buttonText only. */
-export type ButtonGroupIconProps = {
-    leftIcon?: ReactElement;
-    rightIcon?: ReactElement;
-    onLeftIconClick?: () => void;
-    onRightIconClick?: () => void;
-    /** Auto-wrapped in a tooltip showing full text, but only when it visually truncates (maxW 200px). */
-    buttonText: string;
-    onButtonClick?: () => void;
-    /** Fires on every click inside the group via DOM bubbling too — not just clicks on group chrome. */
-    onButtongroupClick?: () => void;
-    size?: "lg" | "md" | "sm" | "xs" | "xl";
-    variant?: "solid" | "outline" | "ghost" | "link" | "unstyled" | "gradient";
-    /** Actually Chakra's colorScheme (a palette name like "red"), not a CSS text or icon color. */
-    color?: "primary" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha";
-    buttonGroupStyle?: React.CSSProperties;
-    buttonGroupLeftIconStyle?: React.CSSProperties;
-    buttonGroupRightIconStyle?: React.CSSProperties;
-    buttonStyle?: React.CSSProperties;
-    onBlurLeftIcon?: () => void;
-    onBlurRightIcon?: () => void;
-    /** Rendered only when BOTH rightIcon and rightIconDropdown are also set — otherwise silently unused. */
-    dropdownOptions?: {
-        label: string;
-        id: string | number;
-        image?: ReactElement | undefined;
-    }[];
-    onDropdownOptionClick?: (event: React.MouseEvent, option: {
-        label: string;
-        id: string | number;
-    }) => void;
-    /** Also requires rightIcon — without it, neither the dropdown nor a plain right icon button renders. */
-    rightIconDropdown?: boolean;
-    menulistStyle?: React.CSSProperties;
-    menuItemStyle?: React.CSSProperties;
-    isLoading?: boolean;
-    divider?: boolean;
-    leftIconLoading?: boolean;
-    /** Capitalized "R" unlike leftIconLoading — same casing must match exactly, there is no rightIconLoading. */
-    RightIconLoading?: boolean;
-};
+/** @deprecated Misspelled path — import from `./ButtonGroupIconProps` instead. */
+export * from "./ButtonGroupIconProps";

package/dist/Components/ButtonGroupIcon/ButtonGoupIconProps.js

@@ -1,2 +1,18 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
+/** @deprecated Misspelled path — import from `./ButtonGroupIconProps` instead. */
+__exportStar(require("./ButtonGroupIconProps"), exports);

package/dist/Components/ButtonGroupIcon/ButtonGroupIcon.d.ts

@@ -1,4 +1,4 @@
-import { ButtonGroupIconProps } from "./ButtonGoupIconProps";
+import { ButtonGroupIconProps } from "./ButtonGroupIconProps";
 export default function ButtonGroupIcon({ leftIcon, rightIcon, onLeftIconClick, onRightIconClick, buttonText, onButtonClick, onButtongroupClick, size, variant, color, buttonGroupStyle, buttonGroupLeftIconStyle, buttonGroupRightIconStyle, buttonStyle, onBlurLeftIcon, onBlurRightIcon, dropdownOptions, // New prop for dropdown options
 onDropdownOptionClick, // New prop to handle option clicks
 rightIconDropdown, menulistStyle, menuItemStyle, isLoading, divider, leftIconLoading, RightIconLoading, }: ButtonGroupIconProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/ButtonGroupIcon/ButtonGroupIcon.js

@@ -40,14 +40,11 @@ rightIconDropdown, menulistStyle, menuItemStyle, isLoading, divider = true, left
     };
     const handleMenuClick = (event, option) => {
         setIsDropdownOpen(false);
-        // console.log("Option clicked:", option,event)
         if (onDropdownOptionClick) {
             onDropdownOptionClick(event, option);
         }
     };
-    // For the gradient variant we paint ONE continuous gradient on the group and
-    // keep the segments transparent (so it doesn't restart per button/icon), with a
-    // translucent-white hover overlay for per-segment feedback.
+    // NOTE: gradient variant paints ONE continuous gradient on the group, segments stay transparent.
     const isGradient = variant === "gradient";
     const gradientStops = (0, gradientInk_1.resolveGradient)(theme.colors.gradient, theme.colors.white, theme.colors.black);
     const gradientBg = (0, gradientInk_1.gradientCss)(gradientStops);
@@ -66,12 +63,8 @@ rightIconDropdown, menulistStyle, menuItemStyle, isLoading, divider = true, left
         : undefined;
     return ((0, jsx_runtime_1.jsxs)(react_2.ButtonGroup, { size: size, isAttached: true, variant: isGradient ? "solid" : variant, onClick: onButtongroupClick, colorScheme: color, style: buttonGroupStyle, sx: isGradient
             ? { bgImage: gradientBg, color: gradientInk, borderRadius: "lg", overflow: "hidden" }
-            : undefined, children: [leftIcon && ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Left icon button", icon: leftIcon, isLoading: leftIconLoading, onClick: onLeftIconClick, onBlur: onBlurLeftIcon, style: buttonGroupLeftIconStyle, sx: gradientItemSx })), (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: buttonText, isDisabled: !buttonText || !isTextTruncated, children: (0, jsx_runtime_1.jsx)(react_2.Button, { onClick: onButtonClick, style: buttonStyle, isLoading: isLoading, borderLeft: "1px solid", borderRight: "1px solid", borderColor: whiteOverlay(0.24), maxW: "200px", sx: gradientItemSx, children: (0, jsx_runtime_1.jsx)(react_2.Box, { ref: textRef, as: "span", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", display: "block", width: "100%", children: buttonText }) }) }), rightIcon && rightIconDropdown ? ((0, jsx_runtime_1.jsxs)(react_2.Menu, { isOpen: isDropdownOpen, onClose: () => setIsDropdownOpen(false), children: [(0, jsx_runtime_1.jsx)(react_2.MenuButton, { as: react_2.IconButton, "aria-label": "Right icon button", icon: rightIcon, isLoading: RightIconLoading, onClick: handleRightIconClick, onBlur: onBlurRightIcon, style: buttonGroupRightIconStyle, sx: gradientItemSx }), (0, jsx_runtime_1.jsx)(react_2.Box, { sx: { zIndex: 99 }, children: (0, jsx_runtime_1.jsx)(react_2.MenuList, { style: menulistStyle, bg: theme.colors.backgroundColor.light, 
-                            // Chakra's own MenuItem renders `background: var(--menu-bg)` at rest, and its
-                            // MenuList baseStyle sets that var to a hardcoded "#fff" (never our `_dark`, which
-                            // this theme-swap app never triggers) — our `bg` prop above only recolors the list
-                            // itself, not the inherited var, so items fell back to white until hover/focus (which
-                            // our own sx already overrides). Setting the var here fixes the rest state too.
+            : undefined, children: [leftIcon && ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Left icon button", icon: leftIcon, isLoading: leftIconLoading, onClick: onLeftIconClick, onBlur: onBlurLeftIcon, style: buttonGroupLeftIconStyle, sx: gradientItemSx })), (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: buttonText, isDisabled: !buttonText || !isTextTruncated, children: (0, jsx_runtime_1.jsx)(react_2.Button, { onClick: onButtonClick, style: buttonStyle, isLoading: isLoading, borderLeft: "1px solid", borderRight: "1px solid", borderColor: whiteOverlay(0.24), maxW: "200px", sx: gradientItemSx, children: (0, jsx_runtime_1.jsx)(react_2.Box, { ref: textRef, as: "span", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", display: "block", width: "100%", children: buttonText }) }) }), rightIcon && rightIconDropdown ? ((0, jsx_runtime_1.jsxs)(react_2.Menu, { isOpen: isDropdownOpen, onClose: () => setIsDropdownOpen(false), children: [(0, jsx_runtime_1.jsx)(react_2.MenuButton, { as: react_2.IconButton, "aria-label": "Right icon button", icon: rightIcon, isLoading: RightIconLoading, onClick: handleRightIconClick, onBlur: onBlurRightIcon, style: buttonGroupRightIconStyle, sx: gradientItemSx }), (0, jsx_runtime_1.jsx)(react_2.Box, { sx: { zIndex: 99 }, children: (0, jsx_runtime_1.jsx)(react_2.MenuList, { style: menulistStyle, bg: theme.colors.surfaceRaised, 
+                            // NOTE: Chakra's MenuItem inherits --menu-bg hardcoded to #fff via dead _dark — set it or items stay white.
                             sx: { "--menu-bg": theme.colors.backgroundColor.light }, borderRadius: "xl", boxShadow: "lg", py: "0.375rem", minW: "12rem", overflow: "hidden", children: dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option, index) => ((0, jsx_runtime_1.jsxs)(react_2.MenuItem, { onClick: (event) => handleMenuClick(event, option), style: menuItemStyle, sx: {
                                     display: "flex",
                                     alignItems: "center",

package/dist/Components/ButtonGroupIcon/ButtonGroupIconProps.d.ts

@@ -0,0 +1,42 @@
+import { ReactElement } from "react";
+/** Themed Chakra ButtonGroup wrapper (left icon + text button + right icon/dropdown) — closed prop list, no ...rest, text via buttonText only. */
+export type ButtonGroupIconProps = {
+    leftIcon?: ReactElement;
+    rightIcon?: ReactElement;
+    onLeftIconClick?: () => void;
+    onRightIconClick?: () => void;
+    /** Auto-wrapped in a tooltip showing full text, but only when it visually truncates (maxW 200px). */
+    buttonText: string;
+    onButtonClick?: () => void;
+    /** Fires on every click inside the group via DOM bubbling too — not just clicks on group chrome. */
+    onButtongroupClick?: () => void;
+    size?: "lg" | "md" | "sm" | "xs" | "xl";
+    variant?: "solid" | "outline" | "ghost" | "link" | "unstyled" | "gradient";
+    /** Actually Chakra's colorScheme (a palette name like "red"), not a CSS text or icon color. */
+    color?: "primary" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha";
+    buttonGroupStyle?: React.CSSProperties;
+    buttonGroupLeftIconStyle?: React.CSSProperties;
+    buttonGroupRightIconStyle?: React.CSSProperties;
+    buttonStyle?: React.CSSProperties;
+    onBlurLeftIcon?: () => void;
+    onBlurRightIcon?: () => void;
+    /** Rendered only when BOTH rightIcon and rightIconDropdown are also set — otherwise silently unused. */
+    dropdownOptions?: {
+        label: string;
+        id: string | number;
+        image?: ReactElement | undefined;
+    }[];
+    onDropdownOptionClick?: (event: React.MouseEvent, option: {
+        label: string;
+        id: string | number;
+    }) => void;
+    /** Also requires rightIcon — without it, neither the dropdown nor a plain right icon button renders. */
+    rightIconDropdown?: boolean;
+    menulistStyle?: React.CSSProperties;
+    menuItemStyle?: React.CSSProperties;
+    isLoading?: boolean;
+    divider?: boolean;
+    leftIconLoading?: boolean;
+    /** Capitalized "R" unlike leftIconLoading — same casing must match exactly, there is no rightIconLoading. */
+    RightIconLoading?: boolean;
+};

package/dist/Components/ButtonGroupIcon/ButtonGroupIconProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/Buttons/Buttons.d.ts

@@ -1,3 +1,3 @@
 import { ButtonsProps } from './ButtonsProps';
-declare const Buttons: ({ onClick, label, className, disabled }: ButtonsProps) => import("react/jsx-runtime").JSX.Element;
+declare const Buttons: ({ onClick, label, isDisabled, disabled }: ButtonsProps) => import("react/jsx-runtime").JSX.Element;
 export default Buttons;

package/dist/Components/Buttons/Buttons.js

@@ -1,7 +1,9 @@
 "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 Buttons = ({ onClick, label, className, disabled }) => {
-    return ((0, jsx_runtime_1.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 }));
-};
+const Button_1 = __importDefault(require("../Button/Button"));
+const Buttons = ({ onClick, label, isDisabled, disabled }) => ((0, jsx_runtime_1.jsx)(Button_1.default, { label: label, onClick: onClick, isDisabled: isDisabled !== null && isDisabled !== void 0 ? isDisabled : disabled, colorScheme: "primary" }));
 exports.default = Buttons;

package/dist/Components/Buttons/ButtonsProps.d.ts

@@ -1,8 +1,12 @@
-/** Hardcoded Tailwind bg-purple-600 button, not theme-aware; not exported from the package root and not a group wrapper despite the plural name. */
+/** Thin, token-themed wrapper over Button; not exported from the package root and not a group wrapper despite the plural name — use Button directly instead. */
 export type ButtonsProps = {
     label: string;
     /** Typed with no event param, so preventDefault/stopPropagation aren't reachable through this prop. */
     onClick: () => void;
+    /** @deprecated No longer applied — this button is theme-token driven, not Tailwind classes. */
     className?: string;
+    /** Blocks the click and dims the button; wins over `disabled` when both are set. */
+    isDisabled?: boolean;
+    /** @deprecated Use `isDisabled` — renamed to match every other field. */
     disabled?: boolean;
 };

package/dist/Components/Card/Card.d.ts

@@ -1,2 +1,18 @@
-import { CardProps } from "./CardProps";
-export default function Card({ maxW, align, variant, direction, justify, children, size, color, overflow, sx, }: CardProps): import("react/jsx-runtime").JSX.Element;
+declare const Card: import("react").ForwardRefExoticComponent<Omit<import("@chakra-ui/react").CardProps, "color" | "colorScheme" | "direction" | "size" | "justify" | "children" | "variant" | "align"> & {
+    dividercolor?: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha";
+    dividersize?: string;
+    dividervariant?: "solid" | "dashed";
+} & {
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+    children: React.ReactNode;
+    variant?: "elevated" | "outline" | "filled" | "unstyled";
+    size?: "sm" | "md" | "lg";
+    colorScheme?: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha";
+    color?: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha";
+    direction?: import("@chakra-ui/react").ResponsiveValue<"row" | "column" | "row-reverse" | "column-reverse">;
+    align?: import("@chakra-ui/react").CardBodyProps["alignItems"];
+    justify?: import("@chakra-ui/react").CardBodyProps["justifyContent"];
+    bodyProps?: import("@chakra-ui/react").CardBodyProps;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export default Card;

package/dist/Components/Card/Card.js

@@ -1,8 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = Card;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("@chakra-ui/react");
-function Card({ maxW, align, variant, direction, justify, children, size, color, overflow, sx, }) {
-    return ((0, jsx_runtime_1.jsx)(react_1.Card, { maxW: maxW, align: align, variant: variant, direction: direction, justify: justify, size: size, overflow: overflow, colorScheme: color, p: 4, sx: sx, children: children }));
-}
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const Card = (0, react_1.forwardRef)(function Card({ header, footer, children, color, colorScheme, direction = "column", align, justify, bodyProps, ...rest }, ref) {
+    const cardProps = { ...rest };
+    delete cardProps.dividercolor;
+    delete cardProps.dividersize;
+    delete cardProps.dividervariant;
+    return ((0, jsx_runtime_1.jsxs)(react_2.Card, { ref: ref, colorScheme: colorScheme !== null && colorScheme !== void 0 ? colorScheme : color, ...cardProps, children: [header && (0, jsx_runtime_1.jsx)(react_2.CardHeader, { children: header }), (0, jsx_runtime_1.jsx)(react_2.CardBody, { display: "flex", flexDirection: direction, alignItems: align, justifyContent: justify, ...bodyProps, children: children }), footer && (0, jsx_runtime_1.jsx)(react_2.CardFooter, { children: footer })] }));
+});
+exports.default = Card;

package/dist/Components/Card/CardProps.d.ts

@@ -1,15 +1,33 @@
-import { CardProps as ChakraCardProps } from "@chakra-ui/react";
-/** Plain padded Chakra Card wrapper for arbitrary children — not ProfileCard, which has Header/Body/Footer slots. */
-export type CardProps = Pick<ChakraCardProps, "direction" | "maxW" | "align" | "justify" | "overflow" | "sx"> & {
-    /** header, footer, dividercolor, dividersize and dividervariant are all declared but never read — Card renders only `children`, no divider. */
+import { CardProps as ChakraCardProps, CardBodyProps, ResponsiveValue } from "@chakra-ui/react";
+type CardColorScheme = "whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink";
+/** @deprecated Never rendered — Card draws no divider; parts are separated by theme padding. */
+type DeadDividerProps = {
+    dividercolor?: CardColorScheme;
+    dividersize?: string;
+    dividervariant?: "solid" | "dashed";
+};
+/** Themed outline surface with optional header/footer slots; children and direction/align/justify apply to the body. */
+export type CardProps = Omit<ChakraCardProps, "children" | "variant" | "size" | "color" | "colorScheme" | "direction" | "align" | "justify"> & DeadDividerProps & {
+    /** Rendered in CardHeader (semibold header ink) only when truthy. */
     header?: React.ReactNode;
+    /** Rendered in CardFooter only when truthy. */
     footer?: React.ReactNode;
     children: React.ReactNode;
+    /** Defaults to "outline", the only token-themed one; others fall back to Chakra's stock look. */
     variant?: "elevated" | "outline" | "filled" | "unstyled";
+    /** Padding scale for header/body/footer; defaults to "md". */
     size?: "sm" | "md" | "lg";
-    /** Passed to Chakra as `colorScheme` — a token name like "blue", not a CSS color or hex value. */
-    color?: "whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink";
-    dividercolor?: "whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink";
-    dividersize?: string;
-    dividervariant?: "solid" | "dashed";
+    /** @deprecated No visual effect — neither Chakra's nor this theme's Card styles read a colour scheme. */
+    colorScheme?: CardColorScheme;
+    /** @deprecated Alias of the no-op `colorScheme`, and not a CSS color. */
+    color?: CardColorScheme;
+    /** Body flex direction; defaults to "column". */
+    direction?: ResponsiveValue<"row" | "column" | "row-reverse" | "column-reverse">;
+    /** Body alignItems; `bodyProps` wins if it sets the same thing. */
+    align?: CardBodyProps["alignItems"];
+    /** Body justifyContent; `bodyProps` wins if it sets the same thing. */
+    justify?: CardBodyProps["justifyContent"];
+    /** Props for the body wrapper, e.g. `p={0}` for edge-to-edge media. */
+    bodyProps?: CardBodyProps;
 };
+export {};

package/dist/Components/Card/PaymentCard/PaymentCard.js

@@ -8,6 +8,9 @@ const react_1 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 const filledSurface_1 = require("../../../Theme/tokens/builders/filledSurface");
+const accentText_1 = require("../../../Theme/tokens/builders/accentText");
+const motion_1 = require("../../../Theme/tokens/primitives/motion");
+const motion_2 = require("../../../Theme/chakra/motion");
 const Button_1 = __importDefault(require("../../Button/Button"));
 const getCardStyles = (isActive, isNextUpgrade, popular, theme) => {
     const withOnButtonColor = (styles) => {
@@ -17,12 +20,13 @@ const getCardStyles = (isActive, isNextUpgrade, popular, theme) => {
             ...styles,
             buttonColor: solid.fill,
             onButtonColor: solid.color,
+            iconInk: (0, accentText_1.accentTextOnCanvas)(scale, styles.buttonColor50),
         };
     };
     if (isActive) {
         return withOnButtonColor({
             badgeText: "Active Plan",
-            badgeColor: `0.125rem solid ${theme.colors.green[500]}`,
+            badgeColor: `0.063rem solid ${theme.colors.green[500]}`,
             buttonColor: theme.colors.green[500],
             buttonScale: "green",
             buttonColor50: theme.colors.green[50],
@@ -32,7 +36,7 @@ const getCardStyles = (isActive, isNextUpgrade, popular, theme) => {
     if (isNextUpgrade) {
         return withOnButtonColor({
             badgeText: "Upgrade Your Plan",
-            badgeColor: `0.125rem solid ${theme.colors.primary[500]}`,
+            badgeColor: `0.063rem solid ${theme.colors.primary[500]}`,
             buttonColor: theme.colors.primary[500],
             buttonScale: "primary",
             buttonColor50: theme.colors.primary[50],
@@ -42,7 +46,7 @@ const getCardStyles = (isActive, isNextUpgrade, popular, theme) => {
     if (popular) {
         return withOnButtonColor({
             badgeText: "Most Popular",
-            badgeColor: `0.125rem solid ${theme.colors.primary[500]}`,
+            badgeColor: `0.063rem solid ${theme.colors.primary[500]}`,
             buttonColor: theme.colors.primary[500],
             buttonScale: "primary",
             buttonColor50: theme.colors.primary[50],
@@ -51,7 +55,7 @@ const getCardStyles = (isActive, isNextUpgrade, popular, theme) => {
     }
     return withOnButtonColor({
         badgeText: "",
-        badgeColor: "",
+        badgeColor: `0.063rem solid ${theme.colors.boxborder[200]}`,
         buttonColor: theme.colors.primary[500],
         buttonScale: "primary",
         buttonColor50: theme.colors.primary[50],
@@ -60,7 +64,7 @@ const getCardStyles = (isActive, isNextUpgrade, popular, theme) => {
 };
 const PaymentCard = ({ plan, isActive = false, isNextUpgrade = false, billingCycle, onSelect, onHover, buttonLoading, isLoading = false, isRenewal = false, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    const { badgeText, badgeColor, buttonColor, buttonColor50, onButtonColor, colorScheme } = getCardStyles(isActive, isNextUpgrade, !!plan.popular, theme);
+    const { badgeText, badgeColor, buttonColor, buttonColor50, onButtonColor, iconInk, colorScheme } = getCardStyles(isActive, isNextUpgrade, !!plan.popular, theme);
     const variantStyles = plan.buttonVariant === "outline"
         ? {}
         : {
@@ -68,12 +72,12 @@ const PaymentCard = ({ plan, isActive = false, isNextUpgrade = false, billingCyc
             color: onButtonColor,
             _hover: { bg: buttonColor },
         };
-    return ((0, jsx_runtime_1.jsx)(react_1.GridItem, { children: (0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.background[50], minH: "100%", borderRadius: "lg", p: 8, borderWidth: "0.063rem", borderColor: theme.colors.gray[200], boxShadow: "md", position: "relative", transition: "all 0.2s", transform: plan.popular ? "scale(1.03)" : "none", border: badgeColor, _hover: { transform: "translateY(-0.313rem)", shadow: "xl" }, children: isLoading ? (
+    return ((0, jsx_runtime_1.jsx)(react_1.GridItem, { children: (0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.background[50], minH: "100%", borderRadius: "xl", p: 8, position: "relative", transition: (0, motion_1.transitionFor)(["transform", "box-shadow"], "base"), transform: plan.popular ? "scale(1.03)" : "none", border: badgeColor, _hover: { transform: "translateY(-0.313rem)", shadow: "lg" }, sx: (0, motion_2.reducedMotionSx)(), children: isLoading ? (
             // 🔹 Skeleton Loader Layout
-            (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "24px", width: "120px", mx: "auto", mb: 4 }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "50px", width: "50px", borderRadius: "lg", mx: "auto", mb: 4 }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "24px", width: "100px", mx: "auto", mb: 3 }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "30px", width: "160px", mx: "auto", mb: 4 }), (0, jsx_runtime_1.jsx)(react_1.SkeletonText, { noOfLines: 2, spacing: "2" }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "44px", width: "full", mt: 6, borderRadius: "md" }), (0, jsx_runtime_1.jsx)(react_1.VStack, { align: "start", spacing: 3, mt: 6, children: [1, 2, 3, 4].map((i) => ((0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "16px", width: "80%" }, i))) })] })) : (
+            (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "24px", width: "120px", mx: "auto", mb: 4 }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "50px", width: "50px", borderRadius: "lg", mx: "auto", mb: 4 }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "24px", width: "100px", mx: "auto", mb: 3 }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "30px", width: "160px", mx: "auto", mb: 4 }), (0, jsx_runtime_1.jsx)(react_1.SkeletonText, { noOfLines: 2, spacing: "2" }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "44px", width: "full", mt: 6, borderRadius: "lg" }), (0, jsx_runtime_1.jsx)(react_1.VStack, { align: "start", spacing: 3, mt: 6, children: [1, 2, 3, 4].map((i) => ((0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "16px", width: "80%" }, i))) })] })) : (
             // 🔹 Actual Card Content
-            (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [badgeText && ((0, jsx_runtime_1.jsx)(react_1.Badge, { position: "absolute", top: "-0.75rem", left: "50%", transform: "translateX(-50%)", bg: buttonColor, color: onButtonColor, fontSize: "sm", px: 4, py: 1, borderRadius: "full", children: badgeText })), (0, jsx_runtime_1.jsxs)(react_1.Box, { textAlign: "center", mb: 6, children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { justify: "center", align: "center", w: "3.125rem", h: "3.125rem", borderRadius: "lg", bg: buttonColor50, color: buttonColor, mx: "auto", mb: 4, children: plan.icon }), (0, jsx_runtime_1.jsx)(react_1.Heading, { as: "h3", size: "lg", mb: 4, color: theme.colors.gray[800], children: plan.name }), (plan.yearlyPrice !== 0 || plan.monthlyPrice !== 0) && ((0, jsx_runtime_1.jsxs)(react_1.Heading, { as: "h4", size: "2xl", mb: 1, color: theme.colors.gray[800], display: "flex", justifyContent: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { fontSize: "1.5rem", children: "\u20B9" }), billingCycle === "yearly"
+            (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [badgeText && ((0, jsx_runtime_1.jsx)(react_1.Badge, { position: "absolute", top: "-0.75rem", left: "50%", transform: "translateX(-50%)", bg: buttonColor, color: onButtonColor, fontSize: "sm", px: 4, py: 1, borderRadius: "full", children: badgeText })), (0, jsx_runtime_1.jsxs)(react_1.Box, { textAlign: "center", mb: 6, children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { justify: "center", align: "center", w: "3.125rem", h: "3.125rem", borderRadius: "lg", bg: buttonColor50, color: iconInk, mx: "auto", mb: 4, children: plan.icon }), (0, jsx_runtime_1.jsx)(react_1.Heading, { as: "h3", size: "lg", mb: 4, color: theme.colors.header[900], children: plan.name }), (plan.yearlyPrice !== 0 || plan.monthlyPrice !== 0) && ((0, jsx_runtime_1.jsxs)(react_1.Heading, { as: "h4", size: "2xl", mb: 1, color: theme.colors.header[900], display: "flex", justifyContent: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { fontSize: "1.5rem", children: "\u20B9" }), billingCycle === "yearly"
                                         ? plan.yearlyPrice
-                                        : plan.monthlyPrice, (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", flexDirection: "column", justifyContent: "end", ml: 1, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.9rem", fontWeight: "normal", color: theme.colors.gray[600], children: plan.billing }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.7rem", fontWeight: "normal", color: theme.colors.gray[600], children: plan.tax })] })] })), plan.priceDescription && ((0, jsx_runtime_1.jsx)(react_1.Text, { color: theme.colors.green[800], mt: 2, children: plan === null || plan === void 0 ? void 0 : plan.priceDescription })), (0, jsx_runtime_1.jsx)(react_1.Text, { color: theme.colors.gray[600], mt: 2, children: plan.description })] }), ((!isActive && plan.buttonText) || isRenewal) && ((0, jsx_runtime_1.jsx)(Button_1.default, { isLoading: plan.plan_id === buttonLoading, loadingText: plan.buttonLoadingText, width: "full", variant: plan.buttonVariant, colorScheme: colorScheme, size: "lg", onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect(plan.plan_id), onMouseEnter: () => onHover === null || onHover === void 0 ? void 0 : onHover(plan.plan_id, "button", true), onMouseLeave: () => onHover === null || onHover === void 0 ? void 0 : onHover(plan.plan_id, "button", false), ...variantStyles, children: plan.buttonText })), (0, jsx_runtime_1.jsx)(react_1.VStack, { align: "start", spacing: 3, mt: 6, children: plan.features.map((feature, i) => ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Icon, { as: lucide_react_1.Check, color: theme.colors.green[500], mr: 2 }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", children: feature })] }, i))) })] })) }) }));
+                                        : plan.monthlyPrice, (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", flexDirection: "column", justifyContent: "end", ml: 1, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.9rem", fontWeight: "normal", color: theme.colors.textMuted, children: plan.billing }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.7rem", fontWeight: "normal", color: theme.colors.textMuted, children: plan.tax })] })] })), plan.priceDescription && ((0, jsx_runtime_1.jsx)(react_1.Text, { color: theme.colors.semanticText.success, mt: 2, children: plan === null || plan === void 0 ? void 0 : plan.priceDescription })), (0, jsx_runtime_1.jsx)(react_1.Text, { color: theme.colors.textMuted, mt: 2, children: plan.description })] }), ((!isActive && plan.buttonText) || isRenewal) && ((0, jsx_runtime_1.jsx)(Button_1.default, { isLoading: plan.plan_id === buttonLoading, loadingText: plan.buttonLoadingText, width: "full", variant: plan.buttonVariant, colorScheme: colorScheme, size: "lg", onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect(plan.plan_id), onMouseEnter: () => onHover === null || onHover === void 0 ? void 0 : onHover(plan.plan_id, "button", true), onMouseLeave: () => onHover === null || onHover === void 0 ? void 0 : onHover(plan.plan_id, "button", false), ...variantStyles, children: plan.buttonText })), (0, jsx_runtime_1.jsx)(react_1.VStack, { align: "start", spacing: 3, mt: 6, children: plan.features.map((feature, i) => ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Icon, { as: lucide_react_1.Check, color: theme.colors.semanticText.success, mr: 2 }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", children: feature })] }, i))) })] })) }) }));
 };
 exports.default = PaymentCard;