pixelize-design-library 2.4.1-beta.9 → 2.4.2-beta.0

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

@@ -0,0 +1,65 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Badge, Flex, GridItem, Heading, Icon, Text, VStack, Skeleton, SkeletonText, } from "@chakra-ui/react";
+import { Check } from "lucide-react";
+import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+import { onFilled } from "../../../Theme/tokens/builders/accentText.js";
+import Button from "../../Button/Button.js";
+const getCardStyles = (isActive, isNextUpgrade, popular, theme) => {
+    const withOnButtonColor = (styles) => ({
+        ...styles,
+        onButtonColor: onFilled(styles.buttonColor, theme.colors.white, theme.colors.black),
+    });
+    if (isActive) {
+        return withOnButtonColor({
+            badgeText: "Active Plan",
+            badgeColor: `0.125rem solid ${theme.colors.green[500]}`,
+            buttonColor: theme.colors.green[500],
+            buttonColor50: theme.colors.green[50],
+        });
+    }
+    if (isNextUpgrade) {
+        return withOnButtonColor({
+            badgeText: "Upgrade Your Plan",
+            badgeColor: `0.125rem solid ${theme.colors.primary[500]}`,
+            buttonColor: theme.colors.primary[500],
+            buttonColor50: theme.colors.primary[50],
+        });
+    }
+    if (popular) {
+        return withOnButtonColor({
+            badgeText: "Most Popular",
+            badgeColor: `0.125rem solid ${theme.colors.primary[500]}`,
+            buttonColor: theme.colors.primary[500],
+            buttonColor50: theme.colors.primary[50],
+        });
+    }
+    return withOnButtonColor({
+        badgeText: "",
+        badgeColor: "",
+        buttonColor: theme.colors.primary[500],
+        buttonColor50: theme.colors.primary[50],
+    });
+};
+const PaymentCard = ({ plan, isActive = false, isNextUpgrade = false, billingCycle, onSelect, onHover, buttonLoading, isLoading = false, isRenewal = false, }) => {
+    const theme = useCustomTheme();
+    const { badgeText, badgeColor, buttonColor, buttonColor50, onButtonColor } = getCardStyles(isActive, isNextUpgrade, !!plan.popular, theme);
+    const variantStyles = plan.buttonVariant === "outline"
+        ? {
+            borderColor: buttonColor,
+            color: buttonColor,
+            _hover: { bg: buttonColor50 },
+        }
+        : {
+            bg: buttonColor,
+            color: onButtonColor,
+            _hover: { bg: buttonColor },
+        };
+    return (_jsx(GridItem, { children: _jsx(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 ? (
+            // 🔹 Skeleton Loader Layout
+            _jsxs(_Fragment, { children: [_jsx(Skeleton, { height: "24px", width: "120px", mx: "auto", mb: 4 }), _jsx(Skeleton, { height: "50px", width: "50px", borderRadius: "lg", mx: "auto", mb: 4 }), _jsx(Skeleton, { height: "24px", width: "100px", mx: "auto", mb: 3 }), _jsx(Skeleton, { height: "30px", width: "160px", mx: "auto", mb: 4 }), _jsx(SkeletonText, { noOfLines: 2, spacing: "2" }), _jsx(Skeleton, { height: "44px", width: "full", mt: 6, borderRadius: "md" }), _jsx(VStack, { align: "start", spacing: 3, mt: 6, children: [1, 2, 3, 4].map((i) => (_jsx(Skeleton, { height: "16px", width: "80%" }, i))) })] })) : (
+            // 🔹 Actual Card Content
+            _jsxs(_Fragment, { children: [badgeText && (_jsx(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 })), _jsxs(Box, { textAlign: "center", mb: 6, children: [_jsx(Flex, { justify: "center", align: "center", w: "3.125rem", h: "3.125rem", borderRadius: "lg", bg: buttonColor50, color: buttonColor, mx: "auto", mb: 4, children: plan.icon }), _jsx(Heading, { as: "h3", size: "lg", mb: 4, color: theme.colors.gray[800], children: plan.name }), (plan.yearlyPrice !== 0 || plan.monthlyPrice !== 0) && (_jsxs(Heading, { as: "h4", size: "2xl", mb: 1, color: theme.colors.gray[800], display: "flex", justifyContent: "center", children: [_jsx(Box, { fontSize: "1.5rem", children: "\u20B9" }), billingCycle === "yearly"
+                                        ? plan.yearlyPrice
+                                        : plan.monthlyPrice, _jsxs(Box, { display: "flex", flexDirection: "column", justifyContent: "end", ml: 1, children: [_jsx(Text, { fontSize: "0.9rem", fontWeight: "normal", color: theme.colors.gray[600], children: plan.billing }), _jsx(Text, { fontSize: "0.7rem", fontWeight: "normal", color: theme.colors.gray[600], children: plan.tax })] })] })), plan.priceDescription && (_jsx(Text, { color: theme.colors.green[800], mt: 2, children: plan === null || plan === void 0 ? void 0 : plan.priceDescription })), _jsx(Text, { color: theme.colors.gray[600], mt: 2, children: plan.description })] }), ((!isActive && plan.buttonText) || isRenewal) && (_jsx(Button, { isLoading: plan.plan_id === buttonLoading, loadingText: plan.buttonLoadingText, width: "full", variant: plan.buttonVariant, 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 })), _jsx(VStack, { align: "start", spacing: 3, mt: 6, children: plan.features.map((feature, i) => (_jsxs(Flex, { align: "center", children: [_jsx(Icon, { as: Check, color: theme.colors.green[500], mr: 2 }), _jsx(Text, { fontSize: "sm", children: feature })] }, i))) })] })) }) }));
+};
+export default PaymentCard;

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

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/Checkbox/Checkbox.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Checkbox as ChakraCheckbox, Box } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import ErrorMessage from "../Common/ErrorMessage.js";
+import HelperText from "../Common/HelperText.js";
+import ToolTip from "../ToolTip/ToolTip.js";
+export default function CheckBox({ label, labelFontSize, showLabelTooltip, labelTooltip, labelClampLines, spacing, isInvalid, color, iconColor, iconSize, isChecked, isIndeterminate, onChange, isDisabled, size = "md", value, defaultChecked, sx, error, errorMessage, helperText, onClick, labelSx, ...aria }) {
+    const theme = useCustomTheme();
+    const controlSize = size === "sm" ? "1rem"
+        : size === "md" ? "1.25rem"
+            : size === "lg" ? "1.5rem"
+                : size; // pass-through if already a CSS value
+    const clampStyles = labelClampLines
+        ? {
+            display: "-webkit-box",
+            WebkitLineClamp: labelClampLines,
+            WebkitBoxOrient: "vertical",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "normal",
+            ...labelSx,
+        }
+        : { ...labelSx };
+    return (_jsxs(_Fragment, { children: [_jsx(ChakraCheckbox, { ...aria, onClick: onClick, spacing: spacing !== null && spacing !== void 0 ? spacing : "0.5rem", isInvalid: isInvalid, colorScheme: color, iconColor: iconColor, iconSize: iconSize, isChecked: isChecked, isIndeterminate: isIndeterminate, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked, borderColor: theme.colors.gray[500], display: "flex", alignItems: "center", sx: {
+                    ...sx,
+                    ".chakra-checkbox__control": { w: controlSize, h: controlSize },
+                }, children: label && (showLabelTooltip ? (_jsx(ToolTip, { label: labelTooltip !== null && labelTooltip !== void 0 ? labelTooltip : label, hasArrow: true, placement: "top", fontSize: "0.75rem", children: _jsx(Box, { as: "span", sx: clampStyles, fontSize: labelFontSize !== null && labelFontSize !== void 0 ? labelFontSize : "0.8125rem", color: theme.colors.text[700], fontWeight: 500, ml: 0, children: label }) })) : (_jsx(Box, { as: "span", sx: clampStyles, fontSize: labelFontSize !== null && labelFontSize !== void 0 ? labelFontSize : "0.8125rem", color: theme.colors.text[700], fontWeight: 500, ml: 0, children: label }))) }), error && _jsx(ErrorMessage, { errorMessage: errorMessage }), helperText && !error && _jsx(HelperText, { helperText: helperText })] }));
+}

package/dist/esm/Components/Checkbox/Checkbox.styles.js

@@ -0,0 +1,69 @@
+import { resolveHoverTint } from "../../Theme/tokens/builders/outlineRung.js";
+export const Checkbox = {
+    baseStyle: ({ theme, colorScheme = "primary" }) => {
+        var _a;
+        const palette = (_a = theme.colors[colorScheme]) !== null && _a !== void 0 ? _a : theme.colors.primary;
+        // A browser probe found the checked checkbox's hover repeating its own resting `[600]` fill.
+        // Chakra's stock control also carries a checked-hover at `_checked._hover` (this override
+        // nests the other way, `_hover._checked`) — two different key paths landing on the same
+        // selector, so whichever one the cascade picks must still differ from resting. Setting both
+        // paths to the same lifted value removes that ambiguity outright.
+        const hoverChecked = resolveHoverTint(palette[600], palette[600]);
+        return {
+            control: {
+                width: "1.25rem",
+                height: "1.25rem",
+                borderWidth: "1.6px",
+                borderRadius: "base",
+                transition: "background 0.15s, border-color 0.15s, box-shadow 0.15s",
+                _disabled: {
+                    bg: theme.colors.background[50],
+                    borderColor: theme.colors.boxborder[500],
+                    cursor: "not-allowed",
+                },
+                _indeterminate: {
+                    bg: theme.colors.background[50],
+                    borderColor: palette[500],
+                    svg: {
+                        color: palette[500],
+                    },
+                },
+                _checked: {
+                    bg: palette[600],
+                    borderColor: palette[600],
+                    _hover: {
+                        bg: hoverChecked,
+                        borderColor: hoverChecked,
+                    },
+                },
+                _hover: {
+                    bg: theme.colors.background[100],
+                    borderColor: palette[400],
+                    _checked: {
+                        bg: hoverChecked,
+                        borderColor: hoverChecked,
+                    },
+                    _indeterminate: {
+                        bg: "none",
+                        borderColor: palette[600],
+                    },
+                },
+                _focus: {
+                    boxShadow: `0 0 0 2px ${palette[300]}`,
+                    borderColor: palette[500],
+                },
+                _active: {
+                    bg: palette[600],
+                    borderColor: palette[600],
+                },
+            },
+            icon: {
+                color: theme.colors.background[50],
+            },
+        };
+    },
+    defaultProps: {
+        colorScheme: "primary",
+        size: "md",
+    },
+};

package/dist/esm/Components/Checkbox/CheckboxProps.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { HStack, Text } from "@chakra-ui/react";
+import { useTheme } from "@chakra-ui/react";
+import { DEFAULT_CANVAS, accentTextOnCanvas, onFilled } from "../../Theme/tokens/builders/accentText.js";
+const ErrorComponent = ({ error, errorClassName, }) => {
+    var _a, _b, _c, _d;
+    const theme = useTheme();
+    // [500] alone fails AA on the page canvas in every brand — step to a darker rung instead.
+    const errorFill = accentTextOnCanvas((_b = (_a = theme.colors.semantic) === null || _a === void 0 ? void 0 : _a.error) !== null && _b !== void 0 ? _b : theme.colors.red, (_d = (_c = theme.colors.backgroundColor) === null || _c === void 0 ? void 0 : _c.main) !== null && _d !== void 0 ? _d : DEFAULT_CANVAS);
+    // errorFill is tuned for text-on-page-canvas, not for carrying a white mark on top of itself —
+    // pick the mark ink structurally (onFilled) instead of assuming white always clears AA on it.
+    const markInk = onFilled(errorFill, theme.colors.white, theme.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/ErrorMessage.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex, Text, } from "@chakra-ui/react";
+import { Info } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { DEFAULT_CANVAS, accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
+// `id` lets a field point `aria-describedby` here so the message is part of the control's
+// description on every focus. `role="alert"` alone announces once, when it first renders.
+const ErrorMessage = ({ errorMessage, id }) => {
+    var _a, _b;
+    const theme = useCustomTheme();
+    // red[500] alone fails AA on the page canvas (~3.4:1 vs the ~4.5 bar) in every brand — step
+    // to a darker rung of the same scale instead of hardcoding one, since a manual retune of a
+    // vivid-alert red collides with its own darker rungs before it clears AA (see red/error
+    // scale comments in each brand's palette.light.ts).
+    return (_jsxs(Flex, { id: id, align: "center", color: accentTextOnCanvas(theme.colors.red, (_b = (_a = theme.colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : DEFAULT_CANVAS), fontSize: "0.875rem", role: "alert", children: [_jsx(Info, { width: "0.875rem" }), _jsx(Text, { ml: "0.188rem", children: errorMessage !== null && errorMessage !== void 0 ? errorMessage : "Error" })] }));
+};
+export default ErrorMessage;

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

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Icon } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { DEFAULT_CANVAS, accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { InfoIcon } from "lucide-react";
+import ToolTip from "../ToolTip/ToolTip.js";
+export const TextLabel = ({ label, id, isRequired = false, isInformation = false, informationMessage = "", fontSize, showTooltip, tooltipLabel, clampLines, inline = false, }) => {
+    var _a, _b, _c;
+    const theme = useCustomTheme();
+    const clampStyles = clampLines ? {
+        display: "-webkit-box",
+        WebkitLineClamp: clampLines,
+        WebkitBoxOrient: "vertical",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "normal",
+    } : {};
+    const wrapperStyles = {
+        display: inline ? "inline-flex" : "block",
+        alignItems: inline ? "center" : undefined,
+        mb: inline ? 0 : "0.375rem",
+        color: theme.colors.text[700],
+        fontWeight: 500,
+        fontSize: fontSize !== null && fontSize !== void 0 ? fontSize : "0.8125rem",
+        lineHeight: "1.2",
+    };
+    const content = (_jsxs(Box, { as: "span", display: "inline-flex", alignItems: "center", gap: "0.35rem", children: [showTooltip ? (_jsx(ToolTip, { label: tooltipLabel !== null && tooltipLabel !== void 0 ? tooltipLabel : label, hasArrow: true, placement: "top", fontSize: "0.75rem", children: _jsx(Box, { as: "span", sx: clampStyles, children: label }) })) : (_jsx(Box, { as: "span", sx: clampStyles, children: label })), isRequired && (_jsx("span", { style: { color: accentTextOnCanvas((_a = theme.colors.semantic) === null || _a === void 0 ? void 0 : _a.error, (_c = (_b = theme.colors.backgroundColor) === null || _b === void 0 ? void 0 : _b.main) !== null && _c !== void 0 ? _c : DEFAULT_CANVAS), marginLeft: "0.125rem" }, children: "*" })), isInformation && informationMessage && (_jsx(ToolTip, { label: informationMessage, hasArrow: true, placement: "top", fontSize: "0.75rem", children: _jsx(Icon, { as: InfoIcon, color: theme.colors.text[700], boxSize: 3.5 }) }))] }));
+    // A real <label> only when there is a control id to point at. Without one it would name
+    // nothing, and TextLabel also renders `inline` inside controls that are themselves a <label>
+    // (Checkbox/Radio) — nesting labels there would be invalid markup.
+    return id ? (_jsx(Box, { as: "label", htmlFor: id, ...wrapperStyles, children: content })) : (_jsx(Box, { as: "span", ...wrapperStyles, children: content }));
+};

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

@@ -0,0 +1,57 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Text } from "@chakra-ui/react";
+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 }) => {
+    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: "gray.700", mt: idx === 0 ? 0 : 2, textAlign: "justify", children: _jsx(InlineText, { text: line }) }, `p-${idx}`));
+        }) }));
+};
+export default FormattedDescription;

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

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormHelperText, Text, useFormControlContext } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+const HelperText = ({ helperText, id }) => {
+    const theme = useCustomTheme();
+    const field = useFormControlContext();
+    // An explicit id={undefined} overwrites the id FormHelperText generates for aria-describedby.
+    const idProp = id ? { id } : {};
+    const style = { mt: 1, fontSize: 14, color: theme.colors.gray[500] };
+    // FormHelperText throws without a FormControl ancestor; Checkbox, MultiSelect and
+    // SearchSelect render this outside one.
+    if (!field) {
+        return (_jsx(Text, { ...idProp, ...style, children: helperText }));
+    }
+    return (_jsx(FormHelperText, { ...idProp, ...style, children: helperText }));
+};
+export default HelperText;

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FormLabel, Text } from "@chakra-ui/react";
+import { useTheme } from "@chakra-ui/react";
+import { DEFAULT_CANVAS, accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
+const Label = ({ label, htmlFor, labelClassName, isRequired, }) => {
+    var _a, _b, _c, _d, _e, _f;
+    const theme = useTheme();
+    const headerColor = (_b = (_a = theme.colors.header) === null || _a === void 0 ? void 0 : _a[500]) !== null && _b !== void 0 ? _b : (_c = theme.colors.text) === null || _c === void 0 ? void 0 : _c[500];
+    // [500] alone fails AA on the page canvas in every brand — step to a darker rung instead.
+    const errorColor = accentTextOnCanvas((_d = theme.colors.semantic) === null || _d === void 0 ? void 0 : _d.error, (_f = (_e = theme.colors.backgroundColor) === null || _e === void 0 ? void 0 : _e.main) !== null && _f !== void 0 ? _f : DEFAULT_CANVAS);
+    return (_jsxs(FormLabel, { htmlFor: htmlFor, mb: 1, fontSize: "sm", fontWeight: "medium", className: labelClassName, color: headerColor, children: [label, isRequired && (_jsx(Text, { as: "span", color: errorColor, ml: 1, children: "*" }))] }));
+};
+export default Label;

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

@@ -0,0 +1,34 @@
+// Shared field-box visual standard, so the custom-styled form components
+// (SearchSelect, MultiSelect, SelectSearch, date pickers, …) match the theme
+// `Input` config exactly instead of each re-deriving border/focus/bg values.
+export const FIELD_RADIUS = "lg";
+export const FIELD_BORDER_WIDTH = "0.063rem";
+export const FIELD_TRANSITION = "border-color 0.2s, box-shadow 0.2s";
+/**
+ * State-based field styles for components that track `focused`/`error` in JS
+ * (e.g. SearchSelect, SingleDatePicker). Returns Chakra style props.
+ */
+export const getFieldStateStyles = (theme, { error = false, focused = false } = {}) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    // [800], not [500]: WCAG 1.4.11 needs >=3.0 for a control boundary against any named surface
+    // up to `muted` (lightest); [500] fails there, [800] clears all with margin.
+    const idleBorder = (_b = (_a = theme.colors.boxborder) === null || _a === void 0 ? void 0 : _a[800]) !== null && _b !== void 0 ? _b : (_c = theme.colors.gray) === null || _c === void 0 ? void 0 : _c[300];
+    const primary = theme.colors.primary[500];
+    const errorColor = (_e = (_d = theme.colors.semantic) === null || _d === void 0 ? void 0 : _d.error) === null || _e === void 0 ? void 0 : _e[500];
+    const ringPrimary = (_f = theme.colors.boxShadow) === null || _f === void 0 ? void 0 : _f.primary;
+    const ringError = (_g = theme.colors.boxShadow) === null || _g === void 0 ? void 0 : _g.error;
+    return {
+        bg: (_h = theme.colors.gray) === null || _h === void 0 ? void 0 : _h[50],
+        borderRadius: FIELD_RADIUS,
+        border: `${FIELD_BORDER_WIDTH} solid`,
+        borderColor: error ? errorColor : focused ? primary : idleBorder,
+        boxShadow: error
+            ? `0 0 0 0.125rem ${ringError}`
+            : focused
+                ? `0 0 0 0.125rem ${ringPrimary}`
+                : "none",
+        transition: FIELD_TRANSITION,
+    };
+};
+/** Focus ring value (e.g. for `_focus` / `_focusWithin` pseudo styles). */
+export const fieldFocusRing = (theme, error = false) => { var _a, _b; return `0 0 0 0.125rem ${error ? (_a = theme.colors.boxShadow) === null || _a === void 0 ? void 0 : _a.error : (_b = theme.colors.boxShadow) === null || _b === void 0 ? void 0 : _b.primary}`; };

package/dist/esm/Components/ContactForm/ContactForm.js

@@ -0,0 +1,112 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Box, Heading, Text, VStack, SimpleGrid, FormControl, Alert, } from "@chakra-ui/react";
+import TextInput from "../Input/TextInput.js";
+import { CircleCheck, CircleX } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import InputTextArea from "../InputTextArea/InputTextArea.js";
+import Button from "../Button/Button.js";
+const ContactForm = ({ apiKey, customFields, getCustomValues, isDisabled = false, organizationId, customerId, buttonColorScheme = "primary", buttonSx, }) => {
+    var _a;
+    const { colors } = useCustomTheme();
+    const [formData, setFormData] = useState({
+        firstName: "",
+        lastName: "",
+        email: "",
+        phone: "",
+        enquiry: "",
+    });
+    const [response, setResponse] = useState({
+        title: "",
+        isSuccess: false,
+    });
+    const [errors, setErrors] = useState({});
+    const [isLoading, setIsLoading] = useState(false);
+    const handleChange = (field, value) => {
+        setFormData((prev) => ({ ...prev, [field]: value }));
+        setErrors((prev) => ({ ...prev, [field]: "" }));
+    };
+    const validate = () => {
+        const newErrors = {};
+        if (!formData.firstName.trim())
+            newErrors.firstName = "First name is required";
+        if (!formData.email.trim()) {
+            // newErrors.email = "Email is required";
+        }
+        else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
+            newErrors.email = "Invalid email format";
+        }
+        if (!formData.phone.trim()) {
+            newErrors.phone = "Phone is required";
+        }
+        else if (!/^\d{7,15}$/.test(formData.phone)) {
+            newErrors.phone = "Phone must be 7–15 digits";
+        }
+        setErrors(newErrors);
+        return Object.keys(newErrors).length === 0;
+    };
+    const handleSubmit = async (e) => {
+        var _a;
+        e.preventDefault();
+        if (isDisabled)
+            return;
+        if (!validate())
+            return;
+        if (!apiKey) {
+            setResponse({
+                title: "API key missing",
+                isSuccess: false,
+            });
+            return;
+        }
+        const customValues = (_a = getCustomValues === null || getCustomValues === void 0 ? void 0 : getCustomValues()) !== null && _a !== void 0 ? _a : {};
+        const payload = {
+            name: (formData === null || formData === void 0 ? void 0 : formData.firstName) + " " + (formData === null || formData === void 0 ? void 0 : formData.lastName),
+            firstName: formData === null || formData === void 0 ? void 0 : formData.firstName,
+            lastName: formData === null || formData === void 0 ? void 0 : formData.lastName,
+            email: formData.email,
+            phone: formData.phone,
+            message: formData.enquiry,
+            ...customValues,
+            customerId,
+            organizationId,
+        };
+        try {
+            setIsLoading(true);
+            const response = await fetch(apiKey, {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify(payload),
+            });
+            const result = await response.json();
+            if (!response.ok)
+                throw new Error(result.message || "Submission failed");
+            // onSubmit(formData);
+            setFormData({
+                firstName: "",
+                lastName: "",
+                email: "",
+                phone: "",
+                enquiry: "",
+            });
+            setResponse({
+                title: "Message Sent Successfully",
+                isSuccess: true,
+            });
+        }
+        catch (error) {
+            console.error("Error sending message:", error);
+            setResponse({
+                title: "Failed to send message",
+                isSuccess: false,
+            });
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    return (_jsxs(Box, { maxW: "lg", mx: "auto", p: 8, borderRadius: "2xl", boxShadow: "lg", bg: (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[300], children: [response.title ? (_jsxs(Alert, { status: (response === null || response === void 0 ? void 0 : response.isSuccess) ? "success" : "error", fontWeight: "bold", variant: "solid", mb: 1, children: [(response === null || response === void 0 ? void 0 : response.isSuccess) ? _jsx(CircleCheck, {}) : _jsx(CircleX, {}), " \u00A0", " ", response.title] })) : null, _jsx(Heading, { textAlign: "center", size: "lg", mb: 2, children: "Contact Us" }), _jsx(Text, { textAlign: "center", mb: 6, color: "gray.500", children: "Fill in the form below to reach out to us." }), _jsx(Box, { as: "form", onSubmit: handleSubmit, children: _jsxs(VStack, { spacing: 4, children: [_jsxs(SimpleGrid, { columns: { base: 1, md: 2 }, spacing: 4, w: "100%", children: [_jsx(FormControl, { children: _jsx(TextInput, { label: "First Name", placeholder: "Enter first name", value: formData.firstName, onChange: (e) => handleChange("firstName", e.target.value), error: Boolean(errors.firstName), errorMessage: errors.firstName, isRequired: true }) }), _jsx(FormControl, { children: _jsx(TextInput, { label: "Last Name", placeholder: "Enter last name", value: formData.lastName, onChange: (e) => handleChange("lastName", e.target.value) }) })] }), _jsxs(SimpleGrid, { columns: { base: 1, md: 2 }, spacing: 4, w: "100%", children: [_jsx(FormControl, { children: _jsx(TextInput, { label: "Phone", placeholder: "Enter phone number", value: formData.phone, onChange: (e) => handleChange("phone", e.target.value), isRequired: true, error: Boolean(errors.phone), errorMessage: errors.phone }) }), _jsx(FormControl, { isInvalid: !!errors.email, children: _jsx(TextInput, { label: "Email", placeholder: "Enter email", value: formData.email, onChange: (e) => handleChange("email", e.target.value), error: Boolean(errors.email), errorMessage: errors.email }) })] }), customFields, _jsxs(FormControl, { children: [_jsx(Text, { fontSize: "sm", mb: 1, children: "Enquiry" }), _jsx(Box, { children: _jsx(InputTextArea, { placeholder: "Enter your enquiry", rows: 4, width: "100%", value: formData.enquiry, onChange: (e) => handleChange("enquiry", e.target.value) }) })] }), _jsx(Button, { type: "submit", isDisabled: isDisabled, colorScheme: buttonColorScheme, width: "full", sx: buttonSx, isLoading: isLoading, loadingText: "Sending...", children: "Send Message" })] }) })] }));
+};
+export default ContactForm;

package/dist/esm/Components/ContactForm/ContactFormProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/CopyButton/CopyButton.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Box, Flex, IconButton, Text } from "@chakra-ui/react";
+import { Check, Copy } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
+import ToolTip from "../ToolTip/ToolTip.js";
+const CopyButton = ({ value, variant = "icon", label = "Copy", copiedLabel = "Copied!", tooltip = "Copy", feedbackDuration = 1500, iconSize = 16, size = "sm", onCopy, }) => {
+    var _a, _b;
+    const theme = useCustomTheme();
+    const [copied, setCopied] = useState(false);
+    const timer = useRef();
+    useEffect(() => () => clearTimeout(timer.current), []);
+    const handleCopy = async (e) => {
+        e.stopPropagation();
+        try {
+            await navigator.clipboard.writeText(value);
+            setCopied(true);
+            onCopy === null || onCopy === void 0 ? void 0 : onCopy(value);
+            clearTimeout(timer.current);
+            timer.current = setTimeout(() => setCopied(false), feedbackDuration);
+        }
+        catch {
+            /* clipboard unavailable — silently ignore */
+        }
+    };
+    // primary[500] is tuned for a white label on a filled button, not for reading as ink on the
+    // canvas — it fails AA here in 5 of 7 brands in dark mode. accentTextOnCanvas steps to the
+    // nearest rung that clears AA against the canvas this button actually sits on.
+    const accent = accentTextOnCanvas(theme.colors.primary, theme.colors.backgroundColor.main);
+    const success = theme.colors.semantic.success[500];
+    if (variant === "menu-item") {
+        return (_jsxs(Flex, { align: "center", gap: "0.5rem", px: "12px", py: "8px", width: "100%", cursor: "pointer", borderRadius: "md", transition: "background 0.15s ease", _hover: { bg: theme.colors.gray[100] }, onClick: handleCopy, children: [copied ? _jsx(Check, { size: iconSize, color: success }) : _jsx(Copy, { size: iconSize, color: accent }), _jsx(Box, { fontSize: "14px", fontWeight: 500, color: copied ? success : accent, children: copied ? copiedLabel : label })] }));
+    }
+    if (variant === "button") {
+        return (_jsxs(Flex, { as: "button", align: "center", gap: "6px", px: "12px", py: "6px", borderRadius: "lg", border: "1px solid", 
+            // boxborder[800], not raw gray[200]: this renders as a real `<button>` (as="button"),
+            // so its border is a control boundary — WCAG 1.4.11 needs >=3.0 against any named
+            // surface up to `muted` (lightest); gray[200] fails there in dark mode.
+            borderColor: copied ? success : ((_b = (_a = theme.colors.boxborder) === null || _a === void 0 ? void 0 : _a[800]) !== null && _b !== void 0 ? _b : theme.colors.gray[200]), bg: "transparent", color: copied ? success : theme.colors.gray[700], fontSize: "14px", fontWeight: 500, transition: "all 0.15s ease", _hover: { borderColor: accent, color: accent }, onClick: handleCopy, children: [copied ? _jsx(Check, { size: iconSize }) : _jsx(Copy, { size: iconSize }), _jsx(Text, { children: copied ? copiedLabel : label })] }));
+    }
+    return (_jsx(ToolTip, { label: copied ? copiedLabel : tooltip, placement: "top", children: _jsx(IconButton, { "aria-label": tooltip, size: size, variant: "ghost", onClick: handleCopy, color: copied ? success : theme.colors.gray[500], _hover: { color: accent, bg: theme.colors.primary[50] }, icon: copied ? _jsx(Check, { size: iconSize }) : _jsx(Copy, { size: iconSize }) }) }));
+};
+export default CopyButton;

package/dist/esm/Components/CustomModulesTable/CustomModulesTable.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { Box, Flex, Heading, HStack, Skeleton, Table, Tbody, Td, Text, Th, Thead, Tooltip, Tr, VStack, } from "@chakra-ui/react";
+import { Boxes, Pencil, Trash2 } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import Button from "../Button/Button.js";
+import EmptyState from "../EmptyState/EmptyState.js";
+import EditModuleModal from "./EditModuleModal.js";
+import DeleteModuleModal from "./DeleteModuleModal.js";
+const DEFAULT_LABELS = {
+    title: "Custom Modules",
+    moduleName: "Module Name",
+    moduleOwner: "Module Owner",
+    action: "Action",
+    edit: "Edit",
+    delete: "Delete",
+    noModules: "No custom modules found",
+    loading: "Loading...",
+    editModuleTitle: "Edit Module Name",
+    moduleNamePlaceholder: "Enter module name",
+    cancel: "Cancel",
+    update: "Update",
+    confirmDeletion: "Confirm Deletion",
+    deleteConfirmPrefix: "Are you sure you want to delete",
+};
+const CustomModulesTable = ({ modules, isLoading = false, isUpdating = false, isDeleting = false, onUpdateModule, onDeleteModule, labels: labelOverrides, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+    const { colors } = useCustomTheme();
+    const labels = useMemo(() => ({ ...DEFAULT_LABELS, ...labelOverrides }), [labelOverrides]);
+    const [editTarget, setEditTarget] = useState(null);
+    const [deleteTarget, setDeleteTarget] = useState(null);
+    const border = (_b = (_a = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _a === void 0 ? void 0 : _a[200]) !== null && _b !== void 0 ? _b : (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[200];
+    const surface = (_e = (_d = colors === null || colors === void 0 ? void 0 : colors.background) === null || _d === void 0 ? void 0 : _d[50]) !== null && _e !== void 0 ? _e : (_f = colors === null || colors === void 0 ? void 0 : colors.backgroundColor) === null || _f === void 0 ? void 0 : _f.light;
+    const muted = (_h = (_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[500]) !== null && _h !== void 0 ? _h : (_j = colors === null || colors === void 0 ? void 0 : colors.text) === null || _j === void 0 ? void 0 : _j[500];
+    const heading = (_l = (_k = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _k === void 0 ? void 0 : _k[800]) !== null && _l !== void 0 ? _l : (_m = colors === null || colors === void 0 ? void 0 : colors.text) === null || _m === void 0 ? void 0 : _m[800];
+    const headBg = (_p = (_o = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _o === void 0 ? void 0 : _o[50]) !== null && _p !== void 0 ? _p : (_q = colors === null || colors === void 0 ? void 0 : colors.backgroundColor) === null || _q === void 0 ? void 0 : _q.tableHeader;
+    const thStyle = {
+        fontSize: "0.7rem",
+        textTransform: "uppercase",
+        letterSpacing: "0.04em",
+        color: muted,
+        borderColor: border,
+        py: 3,
+    };
+    return (_jsxs(Box, { backgroundColor: surface, borderRadius: "xl", border: "1px solid", borderColor: border, boxShadow: "sm", overflow: "hidden", children: [_jsx(Flex, { px: 4, py: 3, borderBottom: "1px solid", borderColor: border, alignItems: "center", children: _jsx(Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.title }) }), _jsx(Box, { overflowX: "auto", children: isLoading ? (_jsx(VStack, { spacing: 3, p: 4, align: "stretch", children: Array.from({ length: 4 }).map((_, idx) => {
+                        var _a, _b;
+                        return (_jsx(Skeleton, { height: "18px", borderRadius: "md", startColor: (_a = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _a === void 0 ? void 0 : _a[100], endColor: (_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[400] }, idx));
+                    }) })) : modules.length === 0 ? (_jsx(EmptyState, { icon: Boxes, title: labels.noModules, size: "sm", minH: "180px" })) : (_jsxs(Table, { variant: "simple", size: "sm", children: [_jsx(Thead, { bg: headBg, children: _jsxs(Tr, { children: [_jsx(Th, { ...thStyle, children: labels.moduleName }), _jsx(Th, { ...thStyle, children: labels.moduleOwner }), _jsx(Th, { ...thStyle, textAlign: "right", children: labels.action })] }) }), _jsx(Tbody, { children: modules.map((item) => (_jsxs(Tr, { _hover: { bg: headBg }, transition: "background 0.15s ease", children: [_jsx(Td, { borderColor: border, fontSize: "sm", fontWeight: 500, color: heading, maxW: "220px", children: _jsx(Tooltip, { label: item.moduleName, hasArrow: true, openDelay: 400, children: _jsx(Text, { noOfLines: 1, children: item.moduleName }) }) }), _jsx(Td, { borderColor: border, fontSize: "sm", color: muted, children: item.ownerLabel || "—" }), _jsx(Td, { borderColor: border, children: _jsxs(HStack, { spacing: 2, justifyContent: "flex-end", children: [_jsx(Button, { size: "xs", variant: "outline", colorScheme: "primary", leftIcon: _jsx(Pencil, { size: 13 }), label: labels.edit, onClick: () => setEditTarget(item) }), _jsx(Button, { size: "xs", variant: "outline", colorScheme: "red", leftIcon: _jsx(Trash2, { size: 13 }), label: labels.delete, onClick: () => setDeleteTarget(item) })] }) })] }, item.module_id))) })] })) }), _jsx(EditModuleModal, { isOpen: editTarget !== null, onClose: () => setEditTarget(null), initialName: (_r = editTarget === null || editTarget === void 0 ? void 0 : editTarget.moduleName) !== null && _r !== void 0 ? _r : "", isLoading: isUpdating, onSubmit: async (name) => {
+                    if (editTarget) {
+                        await (onUpdateModule === null || onUpdateModule === void 0 ? void 0 : onUpdateModule({
+                            moduleId: editTarget.module_id,
+                            moduleName: name,
+                        }));
+                    }
+                    setEditTarget(null);
+                }, labels: labels }), _jsx(DeleteModuleModal, { isOpen: deleteTarget !== null, onClose: () => setDeleteTarget(null), moduleName: deleteTarget === null || deleteTarget === void 0 ? void 0 : deleteTarget.moduleName, isLoading: isDeleting, onConfirm: async () => {
+                    if (deleteTarget) {
+                        await (onDeleteModule === null || onDeleteModule === void 0 ? void 0 : onDeleteModule(deleteTarget.module_id));
+                    }
+                    setDeleteTarget(null);
+                }, labels: labels })] }));
+};
+export default CustomModulesTable;

package/dist/esm/Components/CustomModulesTable/CustomModulesTableProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/CustomModulesTable/DeleteModuleModal.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, Flex, HStack, Text, } from "@chakra-ui/react";
+import { AlertTriangle, Trash2 } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import Button from "../Button/Button.js";
+const DeleteModuleModal = ({ isOpen, onClose, moduleName, isLoading, onConfirm, labels, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+    const { colors } = useCustomTheme();
+    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { borderRadius: "2xl", overflow: "hidden", bg: (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[50], children: [_jsxs(ModalHeader, { borderBottom: "1px solid", borderColor: (_c = (_b = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _b === void 0 ? void 0 : _b[200]) !== null && _c !== void 0 ? _c : (_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[200], display: "flex", alignItems: "center", gap: 3, children: [_jsx(Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: (_g = (_f = (_e = colors === null || colors === void 0 ? void 0 : colors.semantic) === null || _e === void 0 ? void 0 : _e.error) === null || _f === void 0 ? void 0 : _f[50]) !== null && _g !== void 0 ? _g : (_h = colors === null || colors === void 0 ? void 0 : colors.red) === null || _h === void 0 ? void 0 : _h[50], color: (_l = (_k = (_j = colors === null || colors === void 0 ? void 0 : colors.semantic) === null || _j === void 0 ? void 0 : _j.error) === null || _k === void 0 ? void 0 : _k[500]) !== null && _l !== void 0 ? _l : (_m = colors === null || colors === void 0 ? void 0 : colors.red) === null || _m === void 0 ? void 0 : _m[500], children: _jsx(AlertTriangle, { size: 18 }) }), _jsx(Text, { fontSize: "1.05rem", fontWeight: 600, children: labels.confirmDeletion })] }), _jsx(ModalCloseButton, {}), _jsxs(ModalBody, { py: 6, children: [_jsxs(Text, { color: (_o = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _o === void 0 ? void 0 : _o[600], fontSize: "sm", mb: 5, children: [labels.deleteConfirmPrefix, " ", _jsx(Text, { as: "span", fontWeight: 600, color: (_p = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _p === void 0 ? void 0 : _p[800], children: moduleName }), "?"] }), _jsxs(HStack, { justifyContent: "flex-end", spacing: 3, children: [_jsx(Button, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm" }), _jsx(Button, { label: labels.delete, onClick: onConfirm, colorScheme: "red", size: "sm", isLoading: isLoading, leftIcon: _jsx(Trash2, { size: 15 }) })] })] })] })] }));
+};
+export default DeleteModuleModal;