pixelize-design-library 2.3.1-beta.13 → 2.3.1-beta.14

package/.claude/settings.local.json

@@ -35,7 +35,11 @@
       "Bash(node -e \"console.log\\(JSON.stringify\\(require\\('./node_modules/pixelize-authenticator/package.json'\\).dependencies\\)\\)\")",
       "Bash(node -e \"console.log\\(require\\('./node_modules/pixelize-authenticator/package.json'\\).version\\)\")",
       "Bash(node -e \"console.log\\(require\\('./node_modules/pixelize-authenticator/node_modules/pixelize-design-library/package.json'\\).version\\)\")",
-      "Bash(echo \"tsc exit code: $?\")"
+      "Bash(echo \"tsc exit code: $?\")",
+      "Bash(./node_modules/.bin/tsc --noEmit --skipLibCheck)",
+      "Bash(./node_modules/.bin/tsc --noEmit)",
+      "Bash(echo \"tsc exit: $?\")",
+      "Bash(echo \"local tsc exit: $?\")"
     ],
     "additionalDirectories": [
       "/private/tmp",

package/dist/Components/OrgSwitcher/OrgSwitcher.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { OrgSwitcherProps } from "./OrgSwitcherProps";
+declare const OrgSwitcher: React.FC<OrgSwitcherProps>;
+export default OrgSwitcher;

package/dist/Components/OrgSwitcher/OrgSwitcher.js

@@ -0,0 +1,121 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_2 = require("@chakra-ui/react");
+var lucide_react_1 = require("lucide-react");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var OrgSwitcherProps_1 = require("./OrgSwitcherProps");
+var sizeMap = {
+    sm: { h: "32px", avatar: "22px", font: "0.8rem", sub: "0.65rem", px: 2 },
+    md: { h: "40px", avatar: "28px", font: "0.9rem", sub: "0.7rem", px: 3 },
+    lg: { h: "48px", avatar: "34px", font: "1rem", sub: "0.78rem", px: 4 },
+};
+var Avatar = function (_a) {
+    var org = _a.org, boxSize = _a.boxSize, fontSize = _a.fontSize;
+    if (org.logoUrl) {
+        return (react_1.default.createElement(react_2.Image, { src: org.logoUrl, alt: org.name, boxSize: boxSize, borderRadius: "8px", objectFit: "cover", flexShrink: 0 }));
+    }
+    return (react_1.default.createElement(react_2.Flex, { align: "center", justify: "center", boxSize: boxSize, borderRadius: "8px", flexShrink: 0, bg: (0, OrgSwitcherProps_1.avatarColor)(org.name), color: "white", fontSize: fontSize, fontWeight: 700 }, (0, OrgSwitcherProps_1.orgInitial)(org.name)));
+};
+var OrgSwitcher = function (_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
+    var organizations = _a.organizations, value = _a.value, onChange = _a.onChange, _y = _a.isLoading, isLoading = _y === void 0 ? false : _y, isSearchable = _a.isSearchable, _z = _a.searchThreshold, searchThreshold = _z === void 0 ? 6 : _z, _0 = _a.triggerVariant, triggerVariant = _0 === void 0 ? "ghost" : _0, _1 = _a.size, size = _1 === void 0 ? "md" : _1, _2 = _a.maxWidth, maxWidth = _2 === void 0 ? "200px" : _2, _3 = _a.menuMinWidth, menuMinWidth = _3 === void 0 ? "280px" : _3, _4 = _a.placeholder, placeholder = _4 === void 0 ? "Select organization" : _4, _5 = _a.ariaLabel, ariaLabel = _5 === void 0 ? "Switch organization" : _5, _6 = _a.showRole, showRole = _6 === void 0 ? true : _6;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var s = sizeMap[size];
+    var _7 = (0, react_2.useDisclosure)(), isOpen = _7.isOpen, onOpen = _7.onOpen, onClose = _7.onClose;
+    var _8 = (0, react_1.useState)(""), query = _8[0], setQuery = _8[1];
+    var searchRef = (0, react_1.useRef)(null);
+    var selected = (0, react_1.useMemo)(function () { return organizations.find(function (o) { return o.id === value; }); }, [organizations, value]);
+    var showSearch = isSearchable !== null && isSearchable !== void 0 ? isSearchable : organizations.length >= searchThreshold;
+    var filtered = (0, react_1.useMemo)(function () {
+        if (!query.trim())
+            return organizations;
+        var q = query.toLowerCase();
+        return organizations.filter(function (o) { return o.name.toLowerCase().includes(q); });
+    }, [organizations, query]);
+    var triggerStyles = triggerVariant === "outline"
+        ? { border: "1px solid", borderColor: (_c = (_b = theme.colors.gray) === null || _b === void 0 ? void 0 : _b[200]) !== null && _c !== void 0 ? _c : "#E2E8F0", bg: theme.colors.white }
+        : triggerVariant === "subtle"
+            ? { bg: (_e = (_d = theme.colors.gray) === null || _d === void 0 ? void 0 : _d[50]) !== null && _e !== void 0 ? _e : "#F8FAFC" }
+            : { bg: "transparent" };
+    var handleSelect = function (org) {
+        onClose();
+        setQuery("");
+        if (org.id !== value)
+            onChange(org.id, org);
+    };
+    return (react_1.default.createElement(react_2.Popover, { isOpen: isOpen, onOpen: onOpen, onClose: function () {
+            onClose();
+            setQuery("");
+        }, placement: "bottom-start", initialFocusRef: showSearch ? searchRef : undefined, isLazy: true },
+        react_1.default.createElement(react_2.PopoverTrigger, null,
+            react_1.default.createElement(react_2.Flex, __assign({ as: "button", type: "button", "aria-label": ariaLabel, align: "center", gap: s.px === 2 ? "8px" : "10px", h: s.h, px: s.px, borderRadius: "10px", cursor: isLoading ? "default" : "pointer", opacity: isLoading ? 0.6 : 1, pointerEvents: isLoading ? "none" : "auto", transition: "background 0.15s ease", _hover: { bg: triggerVariant === "ghost" ? (_g = (_f = theme.colors.gray) === null || _f === void 0 ? void 0 : _f[100]) !== null && _g !== void 0 ? _g : "#F1F5F9" : undefined } }, triggerStyles),
+                selected ? (react_1.default.createElement(Avatar, { org: selected, boxSize: s.avatar, fontSize: s.sub })) : (react_1.default.createElement(react_2.Flex, { align: "center", justify: "center", boxSize: s.avatar, borderRadius: "8px", bg: (_j = (_h = theme.colors.gray) === null || _h === void 0 ? void 0 : _h[100]) !== null && _j !== void 0 ? _j : "#F1F5F9", color: (_l = (_k = theme.colors.gray) === null || _k === void 0 ? void 0 : _k[400]) !== null && _l !== void 0 ? _l : "#A0AEC0", flexShrink: 0 },
+                    react_1.default.createElement(lucide_react_1.Building2, { size: 14 }))),
+                react_1.default.createElement(react_2.Text, { fontSize: s.font, fontWeight: 600, color: (_o = (_m = theme.colors.gray) === null || _m === void 0 ? void 0 : _m[700]) !== null && _o !== void 0 ? _o : "#2D3748", maxW: maxWidth, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", textAlign: "left" }, (_p = selected === null || selected === void 0 ? void 0 : selected.name) !== null && _p !== void 0 ? _p : placeholder),
+                isLoading ? (react_1.default.createElement(react_2.Spinner, { size: "xs", thickness: "1.5px", color: theme.colors.primary[500], flexShrink: 0 })) : (react_1.default.createElement(react_2.Box, { as: lucide_react_1.ChevronsUpDown, size: 16, color: (_r = (_q = theme.colors.gray) === null || _q === void 0 ? void 0 : _q[400]) !== null && _r !== void 0 ? _r : "#A0AEC0", flexShrink: 0 })))),
+        react_1.default.createElement(react_2.PopoverContent, { minW: menuMinWidth, w: "auto", borderRadius: "12px", overflow: "hidden", boxShadow: "0 10px 30px rgba(0,0,0,0.14)", _focus: { outline: "none", boxShadow: "0 10px 30px rgba(0,0,0,0.14)" } },
+            react_1.default.createElement(react_2.PopoverBody, { p: 0 },
+                showSearch && (react_1.default.createElement(react_2.Box, { p: 2, borderBottom: "1px solid", borderColor: (_t = (_s = theme.colors.gray) === null || _s === void 0 ? void 0 : _s[100]) !== null && _t !== void 0 ? _t : "#EDF2F7" },
+                    react_1.default.createElement(react_2.InputGroup, { size: "sm" },
+                        react_1.default.createElement(react_2.InputLeftElement, { pointerEvents: "none" },
+                            react_1.default.createElement(lucide_react_1.Search, { size: 15, color: (_v = (_u = theme.colors.gray) === null || _u === void 0 ? void 0 : _u[400]) !== null && _v !== void 0 ? _v : "#A0AEC0" })),
+                        react_1.default.createElement(react_2.Input, { ref: searchRef, placeholder: "Search organizations", value: query, onChange: function (e) { return setQuery(e.target.value); }, borderRadius: "8px" })))),
+                react_1.default.createElement(react_2.Box, { maxH: "320px", overflowY: "auto", py: 1 },
+                    filtered.map(function (org) {
+                        var _a, _b, _c, _d, _e, _f;
+                        var isActive = org.id === value;
+                        return (react_1.default.createElement(react_2.Flex, { key: org.id, align: "center", gap: "10px", px: 3, py: 2, cursor: "pointer", bg: isActive ? theme.colors.primary[50] : "transparent", transition: "background 0.12s ease", _hover: { bg: isActive ? theme.colors.primary[50] : (_b = (_a = theme.colors.gray) === null || _a === void 0 ? void 0 : _a[50]) !== null && _b !== void 0 ? _b : "#F8FAFC" }, onClick: function () { return handleSelect(org); } },
+                            react_1.default.createElement(Avatar, { org: org, boxSize: s.avatar, fontSize: s.sub }),
+                            react_1.default.createElement(react_2.Box, { flex: "1", minW: 0 },
+                                react_1.default.createElement(react_2.Text, { fontSize: s.font, fontWeight: isActive ? 600 : 500, color: (_d = (_c = theme.colors.gray) === null || _c === void 0 ? void 0 : _c[800]) !== null && _d !== void 0 ? _d : "#1A202C", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, org.name),
+                                showRole && org.role && (react_1.default.createElement(react_2.Text, { fontSize: s.sub, color: (_f = (_e = theme.colors.gray) === null || _e === void 0 ? void 0 : _e[500]) !== null && _f !== void 0 ? _f : "#718096", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, org.role))),
+                            isActive && (react_1.default.createElement(react_2.Box, { as: lucide_react_1.Check, size: 16, color: theme.colors.primary[500], flexShrink: 0 }))));
+                    }),
+                    filtered.length === 0 && (react_1.default.createElement(react_2.Text, { fontSize: "sm", color: (_x = (_w = theme.colors.gray) === null || _w === void 0 ? void 0 : _w[500]) !== null && _x !== void 0 ? _x : "#718096", textAlign: "center", py: 6 }, "No organizations found")))))));
+};
+exports.default = OrgSwitcher;

package/dist/Components/OrgSwitcher/OrgSwitcherProps.d.ts

@@ -0,0 +1,41 @@
+export interface OrgOption {
+    id: string | number;
+    /** Organization display name. */
+    name: string;
+    /** Optional subtitle, e.g. the user's role/designation in that org. */
+    role?: string;
+    /** Optional logo image URL. Falls back to an initial-based avatar. */
+    logoUrl?: string;
+}
+export type OrgSwitcherSize = "sm" | "md" | "lg";
+export interface OrgSwitcherProps {
+    /** Organizations to choose from. */
+    organizations: OrgOption[];
+    /** id of the currently active organization. */
+    value?: string | number;
+    /** Fired when a different organization is picked. */
+    onChange: (id: string | number, org: OrgOption) => void;
+    /** Shows an inline spinner and disables interaction (e.g. while switching). */
+    isLoading?: boolean;
+    /** Force the search box on/off. Auto-enabled when there are many orgs. */
+    isSearchable?: boolean;
+    /** Org count at/above which search auto-appears. Default 6. */
+    searchThreshold?: number;
+    /** Trigger styling. "ghost" suits a navbar; "outline"/"subtle" for forms. */
+    triggerVariant?: "ghost" | "outline" | "subtle";
+    size?: OrgSwitcherSize;
+    /** Max width of the trigger label before truncation. */
+    maxWidth?: string;
+    /** Min width of the dropdown panel. */
+    menuMinWidth?: string;
+    /** Shown when no org is selected. */
+    placeholder?: string;
+    /** Accessible label for the trigger. */
+    ariaLabel?: string;
+    /** Show the role subtitle inside the dropdown rows. Default true. */
+    showRole?: boolean;
+}
+/** Deterministically pick an avatar color from an org name. */
+export declare const avatarColor: (seed: string) => string;
+/** First letter (uppercased) of an org name, for the fallback avatar. */
+export declare const orgInitial: (name: string) => string;

package/dist/Components/OrgSwitcher/OrgSwitcherProps.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.orgInitial = exports.avatarColor = void 0;
+var AVATAR_COLORS = [
+    "#6366F1",
+    "#0EA5E9",
+    "#10B981",
+    "#F59E0B",
+    "#EF4444",
+    "#EC4899",
+    "#8B5CF6",
+    "#14B8A6",
+];
+/** Deterministically pick an avatar color from an org name. */
+var avatarColor = function (seed) {
+    var hash = 0;
+    for (var i = 0; i < seed.length; i += 1) {
+        hash = seed.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    return AVATAR_COLORS[Math.abs(hash) % AVATAR_COLORS.length];
+};
+exports.avatarColor = avatarColor;
+/** First letter (uppercased) of an org name, for the fallback avatar. */
+var orgInitial = function (name) { var _a, _b; return ((_b = (_a = name === null || name === void 0 ? void 0 : name.trim()) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : "?").toUpperCase(); };
+exports.orgInitial = orgInitial;

package/dist/Components/StageProgress/StageItem.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { StageItemProps } from "./StageProgressProps";
+declare const StageItem: React.FC<StageItemProps>;
+export default StageItem;

package/dist/Components/StageProgress/StageItem.js

@@ -0,0 +1,137 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_2 = require("@chakra-ui/react");
+var lucide_react_1 = require("lucide-react");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
+var StageProgressProps_1 = require("./StageProgressProps");
+var sizeMap = {
+    sm: { arrow: 12, minW: "120px", h: "28px", px: 3, font: "0.75rem", icon: 12 },
+    md: { arrow: 16, minW: "160px", h: "36px", px: 4, font: "0.875rem", icon: 14 },
+    lg: { arrow: 20, minW: "200px", h: "44px", px: 5, font: "1rem", icon: 16 },
+};
+var clipFor = function (index, total, a) {
+    var isFirst = index === 0;
+    var isLast = index === total - 1;
+    if (total === 1)
+        return "none";
+    if (isFirst)
+        return "polygon(0 0, calc(100% - ".concat(a, "px) 0, 100% 50%, calc(100% - ").concat(a, "px) 100%, 0 100%)");
+    if (isLast)
+        return "polygon(0 0, 100% 0, 100% 100%, 0 100%, ".concat(a, "px 50%)");
+    return "polygon(0 0, calc(100% - ".concat(a, "px) 0, 100% 50%, calc(100% - ").concat(a, "px) 100%, 0 100%, ").concat(a, "px 50%)");
+};
+var StageItem = function (_a) {
+    var _b;
+    var label = _a.label, index = _a.index, total = _a.total, state = _a.state, _c = _a.variant, variant = _c === void 0 ? "chevron" : _c, _d = _a.size, size = _d === void 0 ? "md" : _d, _e = _a.colorScheme, colorScheme = _e === void 0 ? "primary" : _e, onClick = _a.onClick, _f = _a.isReadOnly, isReadOnly = _f === void 0 ? false : _f, _g = _a.disabled, disabled = _g === void 0 ? false : _g, _h = _a.showCheck, showCheck = _h === void 0 ? false : _h, minWidth = _a.minWidth, _j = _a.scrollIntoViewWhenActive, scrollIntoViewWhenActive = _j === void 0 ? true : _j, _k = _a.tooltipThreshold, tooltipThreshold = _k === void 0 ? 20 : _k;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var palette = (0, StageProgressProps_1.resolveStagePalette)(theme, colorScheme);
+    var ref = (0, react_1.useRef)(null);
+    var s = sizeMap[size];
+    (0, react_1.useEffect)(function () {
+        if (state === "active" && scrollIntoViewWhenActive && ref.current) {
+            ref.current.scrollIntoView({
+                behavior: "smooth",
+                inline: "center",
+                block: "nearest",
+            });
+        }
+    }, [state, scrollIntoViewWhenActive]);
+    var bg = state === "active"
+        ? palette.strong
+        : state === "completed"
+            ? palette.soft
+            : palette.muted;
+    var color = state === "active"
+        ? palette.onStrong
+        : state === "completed"
+            ? palette.softText
+            : palette.mutedText;
+    var interactive = !isReadOnly && !disabled;
+    var isFirst = index === 0;
+    var isLast = index === total - 1;
+    var isChevron = variant === "chevron";
+    // Chevron pads extra on the left to clear the inbound notch and on the right
+    // to keep text clear of the outgoing arrow point; others are centered.
+    var leftPad = isChevron && !isFirst ? s.arrow + s.px * 4 : s.px * 2;
+    var rightPad = isChevron ? s.arrow + s.px * 4 : s.px * 2;
+    // Chevron overlaps into the previous point, leaving a thin 2px divider.
+    var overlap = isChevron && !isFirst ? -(s.arrow - 2) : 0;
+    var clipPath = isChevron ? clipFor(index, total, s.arrow) : "none";
+    var borderRadius = variant === "pills"
+        ? "full"
+        : variant === "bar"
+            ? isFirst && isLast
+                ? "8px"
+                : isFirst
+                    ? "8px 2px 2px 8px"
+                    : isLast
+                        ? "2px 8px 8px 2px"
+                        : "2px"
+            : "0";
+    // Upcoming pills read as outlined; other states stay filled.
+    var isOutlinePill = variant === "pills" && state === "upcoming";
+    var hoverStyles = interactive
+        ? state === "active"
+            ? { bg: palette.hover }
+            : { bg: palette.strong, color: palette.onStrong, borderColor: palette.strong }
+        : undefined;
+    var showTooltip = ((_b = label === null || label === void 0 ? void 0 : label.length) !== null && _b !== void 0 ? _b : 0) > tooltipThreshold;
+    var content = (react_1.default.createElement(react_2.Box, { ref: ref, role: interactive ? "button" : undefined, "aria-current": state === "active" ? "step" : undefined, onClick: interactive ? onClick : undefined, flexShrink: 0, minWidth: minWidth || s.minW, height: s.h, ml: "".concat(overlap, "px"), pl: "".concat(leftPad, "px"), pr: "".concat(rightPad, "px"), bg: isOutlinePill ? "transparent" : bg, color: isOutlinePill ? palette.mutedText : color, border: isOutlinePill ? "1px solid" : undefined, borderColor: isOutlinePill ? palette.muted : undefined, borderRadius: borderRadius, fontSize: s.font, fontWeight: state === "active" ? 600 : 500, display: "flex", alignItems: "center", justifyContent: isChevron ? "flex-start" : "center", cursor: interactive ? "pointer" : "default", opacity: disabled ? 0.55 : 1, transition: "background 0.18s ease, color 0.18s ease, filter 0.18s ease, border-color 0.18s ease", sx: { clipPath: clipPath }, _hover: interactive ? __assign(__assign({}, hoverStyles), { filter: "brightness(0.97)" }) : undefined },
+        react_1.default.createElement(react_2.Flex, { align: "center", justify: isChevron ? "flex-start" : "center", gap: "6px", width: "100%", minW: 0 },
+            showCheck && state === "completed" && (react_1.default.createElement(lucide_react_1.Check, { size: s.icon, style: { flexShrink: 0 } })),
+            react_1.default.createElement(react_2.Box, { as: "span", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", textAlign: "center", flex: "1" }, label))));
+    if (showTooltip) {
+        return (react_1.default.createElement(ToolTip_1.default, { label: label, placement: "top", openDelay: 300 }, content));
+    }
+    return content;
+};
+exports.default = StageItem;

package/dist/Components/StageProgress/StageProgress.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { StageProgressProps } from "./StageProgressProps";
+declare const StageProgress: React.FC<StageProgressProps>;
+export default StageProgress;

package/dist/Components/StageProgress/StageProgress.js

@@ -0,0 +1,59 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@chakra-ui/react");
+var StageItem_1 = __importDefault(require("./StageItem"));
+var StepperStage_1 = __importDefault(require("./StepperStage"));
+var scrollSx = {
+    "&::-webkit-scrollbar": { height: "4px" },
+    "&::-webkit-scrollbar-thumb": {
+        borderRadius: "10px",
+        backgroundColor: "rgba(0,0,0,0.25)",
+    },
+    "&::-webkit-scrollbar-track": { background: "transparent" },
+};
+// Gap between items per variant (chevron interlocks via negative margin).
+var gapFor = {
+    chevron: "0",
+    bar: "4px",
+    pills: "8px",
+    stepper: "0",
+};
+var StageProgress = function (_a) {
+    var stages = _a.stages, _b = _a.variant, variant = _b === void 0 ? "chevron" : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.colorScheme, colorScheme = _d === void 0 ? "primary" : _d, _e = _a.markCompleted, markCompleted = _e === void 0 ? true : _e, _f = _a.showCheck, showCheck = _f === void 0 ? false : _f, _g = _a.isReadOnly, isReadOnly = _g === void 0 ? false : _g, _h = _a.isLoading, isLoading = _h === void 0 ? false : _h, minStageWidth = _a.minStageWidth, _j = _a.scrollActiveIntoView, scrollActiveIntoView = _j === void 0 ? true : _j, _k = _a.tooltipThreshold, tooltipThreshold = _k === void 0 ? 20 : _k;
+    if (isLoading) {
+        var skeletonH_1 = size === "sm" ? "28px" : size === "lg" ? "44px" : "36px";
+        return (react_1.default.createElement(react_2.Flex, { gap: "6px", width: "100%", overflowX: "hidden", p: "0.1rem" }, Array.from({ length: 6 }).map(function (_, i) { return (react_1.default.createElement(react_2.Skeleton, { key: i, height: skeletonH_1, minWidth: minStageWidth || "160px", borderRadius: "6px", flexShrink: 0 })); })));
+    }
+    var activeIndex = stages.findIndex(function (st) { return st.id === value; });
+    var stateFor = function (index) {
+        if (index === activeIndex)
+            return "active";
+        if (markCompleted && activeIndex > -1 && index < activeIndex)
+            return "completed";
+        return "upcoming";
+    };
+    var total = stages.length;
+    return (react_1.default.createElement(react_2.Box, { display: "flex", alignItems: variant === "stepper" ? "flex-start" : "stretch", gap: gapFor[variant], overflowX: "hidden", p: "0.1rem", sx: __assign({ "&:hover": { overflowX: "auto" } }, scrollSx) }, stages.map(function (stage, index) {
+        var state = stateFor(index);
+        if (variant === "stepper") {
+            return (react_1.default.createElement(StepperStage_1.default, { key: stage.id, label: stage.label, number: index + 1, state: state, size: size, colorScheme: colorScheme, isReadOnly: isReadOnly, disabled: stage.disabled, showCheck: showCheck, isFirst: index === 0, isLast: index === total - 1, leftDone: activeIndex > -1 && index <= activeIndex, rightDone: activeIndex > -1 && index < activeIndex, scrollIntoViewWhenActive: scrollActiveIntoView, onClick: function () { return onChange === null || onChange === void 0 ? void 0 : onChange(stage.id, stage, index); } }));
+        }
+        return (react_1.default.createElement(StageItem_1.default, { key: stage.id, label: stage.label, index: index, total: total, state: state, variant: variant, size: size, colorScheme: colorScheme, isReadOnly: isReadOnly, disabled: stage.disabled, showCheck: showCheck, minWidth: minStageWidth, scrollIntoViewWhenActive: scrollActiveIntoView, tooltipThreshold: tooltipThreshold, onClick: function () { return onChange === null || onChange === void 0 ? void 0 : onChange(stage.id, stage, index); } }));
+    })));
+};
+exports.default = StageProgress;

package/dist/Components/StageProgress/StageProgressProps.d.ts

@@ -0,0 +1,85 @@
+import { CustomThemeProps } from "../../Theme/themeProps";
+export type StageSize = "sm" | "md" | "lg";
+export type StageColorScheme = "primary" | "secondary" | "tertiary" | "success" | "error" | "warning" | "info";
+export type StageState = "completed" | "active" | "upcoming";
+/** Visual style of the tracker. */
+export type StageVariant = "chevron" | "bar" | "pills" | "stepper";
+export interface Stage {
+    id: string | number;
+    label: string;
+    /** Disable selecting this stage individually. */
+    disabled?: boolean;
+}
+export interface StageProgressProps {
+    /** Ordered list of pipeline stages. */
+    stages: Stage[];
+    /** Visual style. Default "chevron". */
+    variant?: StageVariant;
+    /** id of the currently active stage. */
+    value?: string | number;
+    /** Fired when a stage is clicked (ignored when isReadOnly). */
+    onChange?: (id: string | number, stage: Stage, index: number) => void;
+    size?: StageSize;
+    colorScheme?: StageColorScheme;
+    /** Render stages before the active one in a distinct "done" style. Default true. */
+    markCompleted?: boolean;
+    /** Show a check icon on completed stages. Default false. */
+    showCheck?: boolean;
+    /** Render as a non-interactive indicator. */
+    isReadOnly?: boolean;
+    /** Show the loading skeleton row instead of stages. */
+    isLoading?: boolean;
+    /** Min width of each chevron. */
+    minStageWidth?: string;
+    /** Auto-scroll the active stage into view. Default true. */
+    scrollActiveIntoView?: boolean;
+    /** Label length beyond which a tooltip is shown. Default 20. */
+    tooltipThreshold?: number;
+}
+export interface StageItemProps {
+    label: string;
+    index: number;
+    total: number;
+    state: StageState;
+    /** "chevron" | "bar" | "pills" (stepper has its own renderer). */
+    variant?: Exclude<StageVariant, "stepper">;
+    size?: StageSize;
+    colorScheme?: StageColorScheme;
+    onClick?: () => void;
+    isReadOnly?: boolean;
+    disabled?: boolean;
+    showCheck?: boolean;
+    minWidth?: string;
+    scrollIntoViewWhenActive?: boolean;
+    tooltipThreshold?: number;
+}
+export interface StepperStageProps {
+    label: string;
+    /** 1-based step number shown inside the circle. */
+    number: number;
+    state: StageState;
+    size?: StageSize;
+    colorScheme?: StageColorScheme;
+    onClick?: () => void;
+    isReadOnly?: boolean;
+    disabled?: boolean;
+    showCheck?: boolean;
+    isFirst: boolean;
+    isLast: boolean;
+    /** Connector entering this node is part of a completed segment. */
+    leftDone: boolean;
+    /** Connector leaving this node is part of a completed segment. */
+    rightDone: boolean;
+    scrollIntoViewWhenActive?: boolean;
+}
+export interface StagePalette {
+    soft: string;
+    softText: string;
+    strong: string;
+    onStrong: string;
+    hover: string;
+    muted: string;
+    mutedText: string;
+}
+/** Resolve a chevron palette for a given color scheme from the theme. */
+export declare const resolveStagePalette: (theme: CustomThemeProps, colorScheme?: StageColorScheme) => StagePalette;

package/dist/Components/StageProgress/StageProgressProps.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveStagePalette = void 0;
+var SEMANTIC = ["success", "error", "warning", "info"];
+/** Resolve a chevron palette for a given color scheme from the theme. */
+var resolveStagePalette = function (theme, colorScheme) {
+    var _a;
+    if (colorScheme === void 0) { colorScheme = "primary"; }
+    var colors = theme.colors;
+    var scale = SEMANTIC.includes(colorScheme)
+        ? theme.colors.semantic[colorScheme]
+        : colors[colorScheme];
+    var gray = (_a = colors.gray) !== null && _a !== void 0 ? _a : {};
+    var get = function (s, k, fb) {
+        return (s && s[k]) || fb;
+    };
+    return {
+        soft: get(scale, 100, "#E6F0FF"),
+        softText: get(scale, 700, "#1D4ED8"),
+        strong: get(scale, 500, "#3B82F6"),
+        onStrong: theme.colors.white || "#FFFFFF",
+        hover: get(scale, 600, "#2563EB"),
+        muted: get(gray, 100, "#F1F5F9"),
+        mutedText: get(gray, 500, "#64748B"),
+    };
+};
+exports.resolveStagePalette = resolveStagePalette;

package/dist/Components/StageProgress/StepperStage.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { StepperStageProps } from "./StageProgressProps";
+declare const StepperStage: React.FC<StepperStageProps>;
+export default StepperStage;

package/dist/Components/StageProgress/StepperStage.js

@@ -0,0 +1,78 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_2 = require("@chakra-ui/react");
+var lucide_react_1 = require("lucide-react");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var StageProgressProps_1 = require("./StageProgressProps");
+var sizeMap = {
+    sm: { circle: "24px", font: "0.7rem", label: "0.7rem", icon: 12, minW: "84px" },
+    md: { circle: "30px", font: "0.8rem", label: "0.8rem", icon: 14, minW: "104px" },
+    lg: { circle: "38px", font: "0.95rem", label: "0.9rem", icon: 16, minW: "124px" },
+};
+var StepperStage = function (_a) {
+    var label = _a.label, number = _a.number, state = _a.state, _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.colorScheme, colorScheme = _c === void 0 ? "primary" : _c, onClick = _a.onClick, _d = _a.isReadOnly, isReadOnly = _d === void 0 ? false : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.showCheck, showCheck = _f === void 0 ? true : _f, isFirst = _a.isFirst, isLast = _a.isLast, leftDone = _a.leftDone, rightDone = _a.rightDone, _g = _a.scrollIntoViewWhenActive, scrollIntoViewWhenActive = _g === void 0 ? true : _g;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var palette = (0, StageProgressProps_1.resolveStagePalette)(theme, colorScheme);
+    var ref = (0, react_1.useRef)(null);
+    var s = sizeMap[size];
+    var interactive = !isReadOnly && !disabled;
+    (0, react_1.useEffect)(function () {
+        if (state === "active" && scrollIntoViewWhenActive && ref.current) {
+            ref.current.scrollIntoView({
+                behavior: "smooth",
+                inline: "center",
+                block: "nearest",
+            });
+        }
+    }, [state, scrollIntoViewWhenActive]);
+    var filled = state === "active" || state === "completed";
+    var circleBg = filled ? palette.strong : theme.colors.white;
+    var circleColor = filled ? palette.onStrong : palette.mutedText;
+    var circleBorder = filled ? palette.strong : palette.muted;
+    var line = function (done, hidden) { return (react_1.default.createElement(react_2.Box, { flex: "1", height: "2px", bg: done ? palette.strong : palette.muted, visibility: hidden ? "hidden" : "visible", transition: "background 0.18s ease" })); };
+    return (react_1.default.createElement(react_2.Flex, { ref: ref, direction: "column", align: "center", flex: "1", minWidth: s.minW, flexShrink: 0, role: "group", cursor: interactive ? "pointer" : "default", opacity: disabled ? 0.55 : 1, onClick: interactive ? onClick : undefined },
+        react_1.default.createElement(react_2.Flex, { align: "center", width: "100%" },
+            line(leftDone, isFirst),
+            react_1.default.createElement(react_2.Flex, { align: "center", justify: "center", boxSize: s.circle, borderRadius: "full", flexShrink: 0, bg: circleBg, color: circleColor, border: "2px solid", borderColor: circleBorder, fontSize: s.font, fontWeight: 600, transition: "all 0.18s ease", "aria-current": state === "active" ? "step" : undefined, sx: state === "active"
+                    ? { boxShadow: "0 0 0 4px ".concat(palette.soft) }
+                    : undefined, _groupHover: interactive
+                    ? { borderColor: palette.strong, color: filled ? palette.onStrong : palette.strong }
+                    : undefined }, showCheck && state === "completed" ? react_1.default.createElement(lucide_react_1.Check, { size: s.icon }) : number),
+            line(rightDone, isLast)),
+        react_1.default.createElement(react_2.Text, { mt: 2, px: 1, fontSize: s.label, fontWeight: state === "active" ? 600 : 500, color: state === "upcoming" ? palette.mutedText : palette.softText, textAlign: "center", noOfLines: 2, _groupHover: interactive ? { color: palette.strong } : undefined }, label)));
+};
+exports.default = StepperStage;

package/dist/Components/UpgradeButton/UpgradeButton.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { UpgradeButtonProps } from "./UpgradeButtonProps";
+declare const UpgradeButton: React.FC<UpgradeButtonProps>;
+export default UpgradeButton;

package/dist/Components/UpgradeButton/UpgradeButton.js

@@ -0,0 +1,58 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@chakra-ui/react");
+var lucide_react_1 = require("lucide-react");
+var sizeMap = {
+    sm: { px: "12px", py: "4px", font: "12px", sub: "8px", icon: 11, radius: "40px" },
+    md: { px: "20px", py: "5px", font: "14px", sub: "10px", icon: 13, radius: "50px" },
+    lg: { px: "26px", py: "8px", font: "16px", sub: "11px", icon: 16, radius: "60px" },
+};
+var DEFAULT_GRADIENT = { from: "#667eea", to: "#764ba2" };
+var UpgradeButton = function (_a) {
+    var label = _a.label, mobileLabel = _a.mobileLabel, subtitle = _a.subtitle, _b = _a.icon, icon = _b === void 0 ? lucide_react_1.Sparkles : _b, _c = _a.iconColor, iconColor = _c === void 0 ? "#FFD66B" : _c, _d = _a.gradient, gradient = _d === void 0 ? DEFAULT_GRADIENT : _d, _e = _a.size, size = _e === void 0 ? "md" : _e, _f = _a.shimmer, shimmer = _f === void 0 ? true : _f, _g = _a.isLoading, isLoading = _g === void 0 ? false : _g, _h = _a.isDisabled, isDisabled = _h === void 0 ? false : _h, _j = _a.maxLabelWidth, maxLabelWidth = _j === void 0 ? "160px" : _j, ariaLabel = _a.ariaLabel, onClick = _a.onClick;
+    var s = sizeMap[size];
+    var Icon = icon;
+    var blocked = isLoading || isDisabled;
+    var g = "linear-gradient(135deg, ".concat(gradient.from, " 0%, ").concat(gradient.to, " 100%)");
+    var gReversed = "linear-gradient(135deg, ".concat(gradient.to, " 0%, ").concat(gradient.from, " 100%)");
+    var hasMobile = !!mobileLabel && mobileLabel !== label;
+    return (react_1.default.createElement(react_2.Box, { as: "button", type: "button", "aria-label": ariaLabel || label, onClick: blocked ? undefined : onClick, disabled: isDisabled, position: "relative", cursor: blocked ? "default" : "pointer", opacity: isDisabled ? 0.6 : 1, px: { base: s.px === "20px" ? "14px" : s.px, md: s.px }, py: s.py, bgImage: g, color: "white", borderRadius: s.radius, fontWeight: "bold", textAlign: "center", overflow: "hidden", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", transition: "transform 0.3s ease, box-shadow 0.3s ease, background-image 0.3s ease", _focusVisible: { outline: "none", boxShadow: "0 0 0 3px ".concat(gradient.from, "55") }, _hover: blocked
+            ? undefined
+            : __assign({ transform: "translateY(-2px)", bgImage: gReversed, boxShadow: "0 10px 30px ".concat(gradient.from, "66") }, (shimmer ? { _before: { left: "130%" } } : {})), sx: shimmer
+            ? {
+                _before: {
+                    content: '""',
+                    position: "absolute",
+                    top: 0,
+                    left: "-75%",
+                    width: "55%",
+                    height: "100%",
+                    background: "linear-gradient(120deg, transparent, rgba(255,255,255,0.45), transparent)",
+                    transform: "skewX(-20deg)",
+                    transition: "left 0.7s ease",
+                    pointerEvents: "none",
+                },
+            }
+            : undefined },
+        react_1.default.createElement(react_2.Flex, { align: "center", gap: "6px", maxW: maxLabelWidth, overflow: "hidden", whiteSpace: "nowrap", zIndex: 1 },
+            react_1.default.createElement(react_2.Text, { as: "span", fontSize: s.font, overflow: "hidden", textOverflow: "ellipsis", display: hasMobile ? { base: "none", md: "block" } : "block" }, label),
+            hasMobile && (react_1.default.createElement(react_2.Text, { as: "span", fontSize: s.font, overflow: "hidden", textOverflow: "ellipsis", display: { base: "block", md: "none" } }, mobileLabel)),
+            isLoading ? (react_1.default.createElement(react_2.Spinner, { size: "xs", thickness: "1.5px", color: iconColor })) : (Icon && react_1.default.createElement(Icon, { size: s.icon, color: iconColor, style: { flexShrink: 0 } }))),
+        subtitle && (react_1.default.createElement(react_2.Text, { as: "span", mt: "1px", fontSize: s.sub, fontWeight: "bold", color: iconColor, maxW: maxLabelWidth, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", zIndex: 1 }, subtitle))));
+};
+exports.default = UpgradeButton;

package/dist/Components/UpgradeButton/UpgradeButtonProps.d.ts

@@ -0,0 +1,30 @@
+import { ElementType } from "react";
+export type UpgradeButtonSize = "sm" | "md" | "lg";
+export interface UpgradeButtonProps {
+    /** Primary label (shown on md+ screens). */
+    label: string;
+    /** Compact label for small screens. Defaults to `label`. */
+    mobileLabel?: string;
+    /** Optional small second line, e.g. a plan-expiry message. */
+    subtitle?: string;
+    /** Leading icon. Defaults to lucide `Sparkles`. Pass null to hide. */
+    icon?: ElementType | null;
+    /** Icon color. Defaults to a gold tone. */
+    iconColor?: string;
+    /** Gradient stops. Defaults to the brand purple gradient. */
+    gradient?: {
+        from: string;
+        to: string;
+    };
+    size?: UpgradeButtonSize;
+    /** Animated light sweep on hover. Default true. */
+    shimmer?: boolean;
+    /** Show a spinner and block interaction. */
+    isLoading?: boolean;
+    isDisabled?: boolean;
+    /** Truncate the label beyond this width. */
+    maxLabelWidth?: string;
+    /** Accessible label (falls back to `label`). */
+    ariaLabel?: string;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+}

package/dist/Components/UpgradeButton/UpgradeButtonProps.js

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

package/dist/index.d.ts

@@ -68,5 +68,9 @@ import FieldSelectModal from "./Components/FieldSelectModal/FieldSelectModal";
 import PdfViewer from "./Components/PdfViewer/PdfViewer";
 import LazyWrapper from "./Components/LazyWrapper/LazyWrapper";
 import FilePreview, { FilePreviewTrigger } from "./Components/FilePreview/FilePreview";
-export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, ApexPolarChart, ApexLineChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, ContactForm, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, EmptyState, FieldSelectModal, FilePreview, FilePreviewTrigger, FileUpload, FileUploader, FilterSidebar, FormWrapper, LazyWrapper, MoreItems, PdfViewer, ScrollToTop, CopyButton, Header, HeaderActions, InputTextArea, InputSwitch, KanbanBoard, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, Notification, NoteTextArea, MultiSelect, NumberInput, PaymentCard, PhoneNumberInput, PinInput, ProductCard, ProductDetails, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Reorder, Search, Select, SearchSelect, SelectSearch, SideBar, Slider, Skeletons, Switch, Table, TableToggle, Tag, TextInput, Timeline, Toaster, ToolTip, useToaster, VerifyEmailOtp, useCustomTheme, ThemesList, debounce, };
+import StageProgress from "./Components/StageProgress/StageProgress";
+import StageItem from "./Components/StageProgress/StageItem";
+import OrgSwitcher from "./Components/OrgSwitcher/OrgSwitcher";
+import UpgradeButton from "./Components/UpgradeButton/UpgradeButton";
+export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, ApexPolarChart, ApexLineChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, ContactForm, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, EmptyState, FieldSelectModal, FilePreview, FilePreviewTrigger, FileUpload, FileUploader, FilterSidebar, FormWrapper, LazyWrapper, MoreItems, PdfViewer, ScrollToTop, CopyButton, StageProgress, StageItem, OrgSwitcher, UpgradeButton, Header, HeaderActions, InputTextArea, InputSwitch, KanbanBoard, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, Notification, NoteTextArea, MultiSelect, NumberInput, PaymentCard, PhoneNumberInput, PinInput, ProductCard, ProductDetails, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Reorder, Search, Select, SearchSelect, SelectSearch, SideBar, Slider, Skeletons, Switch, Table, TableToggle, Tag, TextInput, Timeline, Toaster, ToolTip, useToaster, VerifyEmailOtp, useCustomTheme, ThemesList, debounce, };
 export default withTheme;

package/dist/index.js

@@ -37,8 +37,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PinInput = exports.PhoneNumberInput = exports.PaymentCard = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.Notification = exports.NavigationBar = exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Modal = exports.Loading = exports.KanbanBoard = exports.InputSwitch = exports.InputTextArea = exports.HeaderActions = exports.Header = exports.CopyButton = exports.ScrollToTop = exports.PdfViewer = exports.MoreItems = exports.LazyWrapper = exports.FormWrapper = exports.FilterSidebar = exports.FileUploader = exports.FileUpload = exports.FilePreviewTrigger = exports.FilePreview = exports.FieldSelectModal = exports.EmptyState = exports.Editor = exports.Dropdown = exports.DrawerFooter = exports.DrawerBody = exports.DrawerHeader = exports.Drawer = exports.DatePicker = exports.ContactForm = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexLineChart = exports.ApexPolarChart = exports.ApexPieChart = exports.ApexBarChart = exports.AlertDialog = exports.Accordian = void 0;
-exports.debounce = exports.ThemesList = exports.useCustomTheme = exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = exports.Toaster = exports.Timeline = exports.TextInput = exports.Tag = exports.TableToggle = exports.Table = exports.Switch = exports.Skeletons = exports.Slider = exports.SideBar = exports.SelectSearch = exports.SearchSelect = exports.Select = exports.Search = exports.Reorder = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = exports.ProfileCard = exports.ProductDetails = exports.ProductCard = void 0;
+exports.MultiSelect = exports.NoteTextArea = exports.Notification = exports.NavigationBar = exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Modal = exports.Loading = exports.KanbanBoard = exports.InputSwitch = exports.InputTextArea = exports.HeaderActions = exports.Header = exports.UpgradeButton = exports.OrgSwitcher = exports.StageItem = exports.StageProgress = exports.CopyButton = exports.ScrollToTop = exports.PdfViewer = exports.MoreItems = exports.LazyWrapper = exports.FormWrapper = exports.FilterSidebar = exports.FileUploader = exports.FileUpload = exports.FilePreviewTrigger = exports.FilePreview = exports.FieldSelectModal = exports.EmptyState = exports.Editor = exports.Dropdown = exports.DrawerFooter = exports.DrawerBody = exports.DrawerHeader = exports.Drawer = exports.DatePicker = exports.ContactForm = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexLineChart = exports.ApexPolarChart = exports.ApexPieChart = exports.ApexBarChart = exports.AlertDialog = exports.Accordian = void 0;
+exports.debounce = exports.ThemesList = exports.useCustomTheme = exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = exports.Toaster = exports.Timeline = exports.TextInput = exports.Tag = exports.TableToggle = exports.Table = exports.Switch = exports.Skeletons = exports.Slider = exports.SideBar = exports.SelectSearch = exports.SearchSelect = exports.Select = exports.Search = exports.Reorder = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = exports.ProfileCard = exports.ProductDetails = exports.ProductCard = exports.PinInput = exports.PhoneNumberInput = exports.PaymentCard = exports.NumberInput = void 0;
 var Accordion_1 = __importDefault(require("./Components/Accordion/Accordion"));
 exports.Accordian = Accordion_1.default;
 var AlertDialog_1 = __importDefault(require("./Components/AlertDialog/AlertDialog"));
@@ -191,4 +191,12 @@ exports.LazyWrapper = LazyWrapper_1.default;
 var FilePreview_1 = __importStar(require("./Components/FilePreview/FilePreview"));
 exports.FilePreview = FilePreview_1.default;
 Object.defineProperty(exports, "FilePreviewTrigger", { enumerable: true, get: function () { return FilePreview_1.FilePreviewTrigger; } });
+var StageProgress_1 = __importDefault(require("./Components/StageProgress/StageProgress"));
+exports.StageProgress = StageProgress_1.default;
+var StageItem_1 = __importDefault(require("./Components/StageProgress/StageItem"));
+exports.StageItem = StageItem_1.default;
+var OrgSwitcher_1 = __importDefault(require("./Components/OrgSwitcher/OrgSwitcher"));
+exports.OrgSwitcher = OrgSwitcher_1.default;
+var UpgradeButton_1 = __importDefault(require("./Components/UpgradeButton/UpgradeButton"));
+exports.UpgradeButton = UpgradeButton_1.default;
 exports.default = withTheme_1.default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.3.1-beta.13",
+  "version": "2.3.1-beta.14",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",