pixelize-design-library 2.3.7 → 2.3.9

package/dist/Components/SignInActivityTable/SignInActivityTable.js

@@ -1,75 +1,31 @@
 "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 EmptyState_1 = __importDefault(require("../EmptyState/EmptyState"));
-var DEFAULT_LABELS = {
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const EmptyState_1 = __importDefault(require("../EmptyState/EmptyState"));
+const DEFAULT_LABELS = {
     title: "Recent Sign-in Devices",
     browser: "Browser",
     device: "Device",
     recentActivity: "Recent Activity",
     noActivity: "No recent sign-in activity",
 };
-var SignInActivityTable = function (_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-    var devices = _a.devices, _o = _a.isLoading, isLoading = _o === void 0 ? false : _o, labelOverrides = _a.labels;
-    var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
-    var labels = (0, react_1.useMemo)(function () { return (__assign(__assign({}, DEFAULT_LABELS), labelOverrides)); }, [labelOverrides]);
-    var border = (_e = (_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]) !== null && _e !== void 0 ? _e : "#E2E8F0";
-    var surface = (_f = colors === null || colors === void 0 ? void 0 : colors.white) !== null && _f !== void 0 ? _f : "#FFFFFF";
-    var 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 : "#64748B";
-    var heading = (_k = (_j = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _j === void 0 ? void 0 : _j[800]) !== null && _k !== void 0 ? _k : "#1E293B";
-    var headBg = (_m = (_l = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _l === void 0 ? void 0 : _l[50]) !== null && _m !== void 0 ? _m : "#F8FAFC";
-    var thStyle = {
+const SignInActivityTable = ({ devices, isLoading = false, labels: labelOverrides, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const labels = (0, react_1.useMemo)(() => ({ ...DEFAULT_LABELS, ...labelOverrides }), [labelOverrides]);
+    const border = (_d = (_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]) !== null && _d !== void 0 ? _d : "#E2E8F0";
+    const surface = (_e = colors === null || colors === void 0 ? void 0 : colors.white) !== null && _e !== void 0 ? _e : "#FFFFFF";
+    const muted = (_g = (_f = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _f === void 0 ? void 0 : _f[500]) !== null && _g !== void 0 ? _g : "#64748B";
+    const heading = (_j = (_h = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _h === void 0 ? void 0 : _h[800]) !== null && _j !== void 0 ? _j : "#1E293B";
+    const headBg = (_l = (_k = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _k === void 0 ? void 0 : _k[50]) !== null && _l !== void 0 ? _l : "#F8FAFC";
+    const thStyle = {
         fontSize: "0.7rem",
         textTransform: "uppercase",
         letterSpacing: "0.04em",
@@ -77,19 +33,6 @@ var SignInActivityTable = function (_a) {
         borderColor: border,
         py: 3,
     };
-    return (react_1.default.createElement(react_2.Box, { mt: 4, backgroundColor: surface, borderRadius: "xl", border: "1px solid", borderColor: border, boxShadow: "0 1px 2px rgba(16,24,40,0.05)", overflow: "hidden" },
-        react_1.default.createElement(react_2.Flex, { px: 4, py: 3, borderBottom: "1px solid", borderColor: border, alignItems: "center" },
-            react_1.default.createElement(react_2.Heading, { size: "sm", fontWeight: 600, color: heading }, labels.title)),
-        react_1.default.createElement(react_2.Box, { overflowX: "auto" }, isLoading ? (react_1.default.createElement(react_2.VStack, { spacing: 3, p: 4, align: "stretch" }, Array.from({ length: 4 }).map(function (_, idx) { return (react_1.default.createElement(react_2.Skeleton, { key: idx, height: "18px", borderRadius: "md" })); }))) : devices.length === 0 ? (react_1.default.createElement(EmptyState_1.default, { icon: lucide_react_1.MonitorSmartphone, title: labels.noActivity, size: "sm", minH: "160px" })) : (react_1.default.createElement(react_2.Table, { variant: "simple", size: "sm" },
-            react_1.default.createElement(react_2.Thead, { bg: headBg },
-                react_1.default.createElement(react_2.Tr, null,
-                    react_1.default.createElement(react_2.Th, __assign({}, thStyle), labels.browser),
-                    react_1.default.createElement(react_2.Th, __assign({}, thStyle), labels.device),
-                    react_1.default.createElement(react_2.Th, __assign({}, thStyle), labels.recentActivity))),
-            react_1.default.createElement(react_2.Tbody, null, devices.map(function (device, index) { return (react_1.default.createElement(react_2.Tr, { key: index, _hover: { bg: headBg }, transition: "background 0.15s ease" },
-                react_1.default.createElement(react_2.Td, { borderColor: border, fontSize: "sm", fontWeight: 500, color: heading }, device.browser || "—"),
-                react_1.default.createElement(react_2.Td, { borderColor: border, fontSize: "sm", color: muted }, device.device),
-                react_1.default.createElement(react_2.Td, { borderColor: border, fontSize: "sm", color: muted },
-                    react_1.default.createElement(react_2.Text, null, device.activity)))); })))))));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { mt: 4, backgroundColor: surface, borderRadius: "xl", border: "1px solid", borderColor: border, boxShadow: "0 1px 2px rgba(16,24,40,0.05)", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { px: 4, py: 3, borderBottom: "1px solid", borderColor: border, alignItems: "center", children: (0, jsx_runtime_1.jsx)(react_2.Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.title }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { overflowX: "auto", children: isLoading ? ((0, jsx_runtime_1.jsx)(react_2.VStack, { spacing: 3, p: 4, align: "stretch", children: Array.from({ length: 4 }).map((_, idx) => ((0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "18px", borderRadius: "md" }, idx))) })) : devices.length === 0 ? ((0, jsx_runtime_1.jsx)(EmptyState_1.default, { icon: lucide_react_1.MonitorSmartphone, title: labels.noActivity, size: "sm", minH: "160px" })) : ((0, jsx_runtime_1.jsxs)(react_2.Table, { variant: "simple", size: "sm", children: [(0, jsx_runtime_1.jsx)(react_2.Thead, { bg: headBg, children: (0, jsx_runtime_1.jsxs)(react_2.Tr, { children: [(0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, children: labels.browser }), (0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, children: labels.device }), (0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, children: labels.recentActivity })] }) }), (0, jsx_runtime_1.jsx)(react_2.Tbody, { children: devices.map((device, index) => ((0, jsx_runtime_1.jsxs)(react_2.Tr, { _hover: { bg: headBg }, transition: "background 0.15s ease", children: [(0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: border, fontSize: "sm", fontWeight: 500, color: heading, children: device.browser || "—" }), (0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: border, fontSize: "sm", color: muted, children: device.device }), (0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: border, fontSize: "sm", color: muted, children: (0, jsx_runtime_1.jsx)(react_2.Text, { children: device.activity }) })] }, index))) })] })) })] }));
 };
 exports.default = SignInActivityTable;

package/dist/Components/SignInActivityTable/SignInActivityTableProps.d.ts

@@ -19,3 +19,4 @@ export interface SignInActivityTableProps {
     isLoading?: boolean;
     labels?: SignInActivityLabels;
 }
+//# sourceMappingURL=SignInActivityTableProps.d.ts.map

package/dist/Components/SignInActivityTable/SignInActivityTableProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SignInActivityTableProps.d.ts","sourceRoot":"","sources":["../../../src/Components/SignInActivityTable/SignInActivityTableProps.tsx"],"names":[],"mappings":"AAAA,MAAM,MAAM,YAAY,GAAG;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,WAAW,wBAAwB;IACvC,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,oBAAoB,CAAC;CAC/B"}

package/dist/Components/Skeletons/Skeleton.stories.d.ts

@@ -1 +1,2 @@
 export {};
+//# sourceMappingURL=Skeleton.stories.d.ts.map

package/dist/Components/Skeletons/Skeleton.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.stories.d.ts","sourceRoot":"","sources":["../../../src/Components/Skeletons/Skeleton.stories.tsx"],"names":[],"mappings":"AAgEA,OAAO,EAAE,CAAC"}

package/dist/Components/Skeletons/SkeletonProps.d.ts

@@ -2,3 +2,4 @@ import { SkeletonProps as ChakraSkeleton, SkeletonTextProps } from "@chakra-ui/r
 export type SkeletonProps = Pick<ChakraSkeleton, "startColor" | "endColor" | "height" | "isLoaded" | "bg" | "color" | "fadeDuration" | "children" | "speed" | "size" | "mt" | "noOfLines" | "width"> & {
     type: "skeleton" | "circle" | "text";
 } & Partial<Pick<SkeletonTextProps, "spacing" | "skeletonHeight">>;
+//# sourceMappingURL=SkeletonProps.d.ts.map

package/dist/Components/Skeletons/SkeletonProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonProps.d.ts","sourceRoot":"","sources":["../../../src/Components/Skeletons/SkeletonProps.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,aAAa,IAAI,cAAc,EAC/B,iBAAiB,EACpB,MAAM,kBAAkB,CAAC;AAE1B,MAAM,MAAM,aAAa,GAAG,IAAI,CAC5B,cAAc,EACZ,YAAY,GACZ,UAAU,GACV,QAAQ,GACR,UAAU,GACV,IAAI,GACJ,OAAO,GACP,cAAc,GACd,UAAU,GACV,OAAO,GACP,MAAM,GACN,IAAI,GACJ,WAAW,GACX,OAAO,CACZ,GAAG;IACA,IAAI,EAAE,UAAU,GAAG,QAAQ,GAAG,MAAM,CAAC;CACxC,GAAG,OAAO,CAAC,IAAI,CAAC,iBAAiB,EAAE,SAAS,GAAG,gBAAgB,CAAC,CAAC,CAAC"}

package/dist/Components/Skeletons/Skeletons.d.ts

@@ -1,3 +1,3 @@
-import React from "react";
 import { SkeletonProps } from "./SkeletonProps";
-export default function Skeletons({ startColor, endColor, height, isLoaded, bg, color, fadeDuration, children, type, speed, size, mt, noOfLines, spacing, skeletonHeight, width, }: SkeletonProps): React.JSX.Element;
+export default function Skeletons({ startColor, endColor, height, isLoaded, bg, color, fadeDuration, children, type, speed, size, mt, noOfLines, spacing, skeletonHeight, width, }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Skeletons.d.ts.map

package/dist/Components/Skeletons/Skeletons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeletons.d.ts","sourceRoot":"","sources":["../../../src/Components/Skeletons/Skeletons.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,UAAU,EACV,QAAQ,EACR,MAAe,EACf,QAAQ,EACR,EAAE,EACF,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,EAAE,EACF,SAAS,EACT,OAAO,EACP,cAAc,EACd,KAAK,GACN,EAAE,aAAa,2CA6Bf"}

package/dist/Components/Skeletons/Skeletons.js

@@ -1,15 +1,8 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = Skeletons;
-var react_1 = __importDefault(require("react"));
-var react_2 = require("@chakra-ui/react");
-function Skeletons(_a) {
-    var startColor = _a.startColor, endColor = _a.endColor, _b = _a.height, height = _b === void 0 ? "20px" : _b, isLoaded = _a.isLoaded, bg = _a.bg, color = _a.color, fadeDuration = _a.fadeDuration, children = _a.children, type = _a.type, speed = _a.speed, size = _a.size, mt = _a.mt, noOfLines = _a.noOfLines, spacing = _a.spacing, skeletonHeight = _a.skeletonHeight, width = _a.width;
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        type === "skeleton" && (react_1.default.createElement(react_2.Skeleton, { height: height, isLoaded: isLoaded, bg: bg, color: color, fadeDuration: fadeDuration, startColor: startColor, endColor: endColor, speed: speed, width: width }, children)),
-        type === "circle" && react_1.default.createElement(react_2.SkeletonCircle, { size: size, speed: speed }),
-        type === "text" && (react_1.default.createElement(react_2.SkeletonText, { mt: mt, noOfLines: noOfLines, spacing: spacing, skeletonHeight: skeletonHeight }))));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+function Skeletons({ startColor, endColor, height = "20px", isLoaded, bg, color, fadeDuration, children, type, speed, size, mt, noOfLines, spacing, skeletonHeight, width, }) {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [type === "skeleton" && ((0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: height, isLoaded: isLoaded, bg: bg, color: color, fadeDuration: fadeDuration, startColor: startColor, endColor: endColor, speed: speed, width: width, children: children })), type === "circle" && (0, jsx_runtime_1.jsx)(react_1.SkeletonCircle, { size: size, speed: speed }), type === "text" && ((0, jsx_runtime_1.jsx)(react_1.SkeletonText, { mt: mt, noOfLines: noOfLines, spacing: spacing, skeletonHeight: skeletonHeight }))] }));
 }

package/dist/Components/Slider/Slider.d.ts

@@ -9,7 +9,10 @@ type SliderImage = {
     id: string | number;
     label?: string;
     previewUrl: string;
+    /** Optional URL used on small viewports when provided via `mobileImages`. */
+    mobilePreviewUrl?: string;
     order: number;
 };
 declare const Slider: React.FC<ImageSliderProps>;
 export default Slider;
+//# sourceMappingURL=Slider.d.ts.map

package/dist/Components/Slider/Slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/Components/Slider/Slider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAKxE,KAAK,gBAAgB,GAAG;IACtB,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,WAAW,EAAE,CAAC;CAC9B,CAAC;AAEF,KAAK,WAAW,GAAG;IACjB,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,6EAA6E;IAC7E,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAiItC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/Components/Slider/Slider.js

@@ -1,89 +1,43 @@
 "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;
-    };
-})();
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 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 Slider = function (_a) {
-    var _b, _c, _d, _e, _f, _g;
-    var images = _a.images, _h = _a.interval, interval = _h === void 0 ? 5000 : _h, _j = _a.isArrow, isArrow = _j === void 0 ? false : _j, mobileImages = _a.mobileImages;
-    var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
-    var _k = (0, react_1.useState)(0), currentIndex = _k[0], setCurrentIndex = _k[1];
-    var timeoutRef = (0, react_1.useRef)(null);
-    var isMobile = (_b = (0, react_2.useBreakpointValue)({ base: true, md: false })) !== null && _b !== void 0 ? _b : false;
-    var slides = (isMobile && mobileImages && mobileImages.length > 0) ? mobileImages : images;
-    var nextSlide = (0, react_1.useCallback)(function () {
-        setCurrentIndex(function (prev) { return (prev + 1) % slides.length; });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const Slider = ({ images, interval = 5000, isArrow = false, mobileImages, }) => {
+    var _a, _b, _c, _d, _e, _f;
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const [currentIndex, setCurrentIndex] = (0, react_1.useState)(0);
+    const timeoutRef = (0, react_1.useRef)(null);
+    const isMobile = (_a = (0, react_2.useBreakpointValue)({ base: true, md: false })) !== null && _a !== void 0 ? _a : false;
+    const slides = (isMobile && mobileImages && mobileImages.length > 0) ? mobileImages : images;
+    const nextSlide = (0, react_1.useCallback)(() => {
+        setCurrentIndex((prev) => (prev + 1) % slides.length);
     }, [slides.length]);
-    var prevSlide = (0, react_1.useCallback)(function () {
-        setCurrentIndex(function (prev) { return (prev - 1 + slides.length) % slides.length; });
+    const prevSlide = (0, react_1.useCallback)(() => {
+        setCurrentIndex((prev) => (prev - 1 + slides.length) % slides.length);
     }, [slides.length]);
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         if (interval > 0) {
             timeoutRef.current = setTimeout(nextSlide, interval);
         }
-        return function () {
+        return () => {
             if (timeoutRef.current)
                 clearTimeout(timeoutRef.current);
         };
     }, [currentIndex, interval, nextSlide]);
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         if (currentIndex >= slides.length) {
             setCurrentIndex(0);
         }
         // eslint-disable-next-line
     }, [slides.length]);
-    var ratio = (_c = (0, react_2.useBreakpointValue)({ base: 16 / 9, md: 21 / 9, lg: 21 / 9 })) !== null && _c !== void 0 ? _c : 16 / 9;
-    return (react_1.default.createElement(react_2.Box, { position: "relative", w: "100%", h: "auto", overflow: "hidden" },
-        react_1.default.createElement(react_2.Flex, { w: "".concat(slides.length * 100, "%"), transform: "translateX(-".concat((currentIndex * 100) / slides.length, "%)"), transition: "transform 0.5s ease" }, __spreadArray([], slides, true).sort(function (a, b) { return a.order - b.order; })
-            .map(function (image, idx) { return (react_1.default.createElement(react_2.Box, { key: image.id, w: "".concat(100 / slides.length, "%"), h: "auto", flexShrink: 0, display: "flex", justifyContent: "center", alignItems: "center" },
-            react_1.default.createElement(react_2.AspectRatio, { ratio: ratio, w: "100%" },
-                react_1.default.createElement(react_2.Image, { src: isMobile && image.mobilePreviewUrl ? image.mobilePreviewUrl : image.previewUrl, alt: "Slide ".concat(idx + 1), objectFit: "cover", w: "100%", h: "100%", loading: "lazy" })))); })),
-        isArrow && (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.ChevronLeft, { color: (_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[800] }), "aria-label": "Previous Slide", onClick: prevSlide, position: "absolute", top: "50%", left: "1rem", transform: "translateY(-50%)", zIndex: 2, variant: "ghost", _hover: { bg: (_e = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _e === void 0 ? void 0 : _e[200] } }),
-            react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.ChevronRight, { color: (_f = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _f === void 0 ? void 0 : _f[800] }), "aria-label": "Next Slide", onClick: nextSlide, position: "absolute", top: "50%", right: "1rem", transform: "translateY(-50%)", zIndex: 2, variant: "ghost", _hover: { bg: (_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[200] } }))),
-        slides.length > 1 && (react_1.default.createElement(react_2.Flex, { position: "absolute", bottom: "1rem", left: "50%", transform: "translateX(-50%)", gap: "0.5rem", zIndex: 2 }, slides.map(function (_, idx) { return (react_1.default.createElement(react_2.Box, { key: idx, w: { base: "0.5rem", md: "0.8rem" }, h: { base: "0.5rem", md: "0.8rem" }, bg: idx === currentIndex ? "white" : "whiteAlpha.600", borderRadius: "full", cursor: "pointer", onClick: function () { return setCurrentIndex(idx); }, transition: "all 0.3s" })); })))));
+    const ratio = (_b = (0, react_2.useBreakpointValue)({ base: 16 / 9, md: 21 / 9, lg: 21 / 9 })) !== null && _b !== void 0 ? _b : 16 / 9;
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", w: "100%", h: "auto", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { w: `${slides.length * 100}%`, transform: `translateX(-${(currentIndex * 100) / slides.length}%)`, transition: "transform 0.5s ease", children: [...slides]
+                    .sort((a, b) => a.order - b.order)
+                    .map((image, idx) => ((0, jsx_runtime_1.jsx)(react_2.Box, { w: `${100 / slides.length}%`, h: "auto", flexShrink: 0, display: "flex", justifyContent: "center", alignItems: "center", children: (0, jsx_runtime_1.jsx)(react_2.AspectRatio, { ratio: ratio, w: "100%", children: (0, jsx_runtime_1.jsx)(react_2.Image, { src: isMobile && image.mobilePreviewUrl
+                                ? image.mobilePreviewUrl
+                                : image.previewUrl, alt: `Slide ${idx + 1}`, objectFit: "cover", w: "100%", h: "100%", loading: "lazy" }) }) }, image.id))) }), isArrow && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { color: (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[800] }), "aria-label": "Previous Slide", onClick: prevSlide, position: "absolute", top: "50%", left: "1rem", transform: "translateY(-50%)", zIndex: 2, variant: "ghost", _hover: { bg: (_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[200] } }), (0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { color: (_e = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _e === void 0 ? void 0 : _e[800] }), "aria-label": "Next Slide", onClick: nextSlide, position: "absolute", top: "50%", right: "1rem", transform: "translateY(-50%)", zIndex: 2, variant: "ghost", _hover: { bg: (_f = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _f === void 0 ? void 0 : _f[200] } })] })), slides.length > 1 && ((0, jsx_runtime_1.jsx)(react_2.Flex, { position: "absolute", bottom: "1rem", left: "50%", transform: "translateX(-50%)", gap: "0.5rem", zIndex: 2, children: slides.map((_, idx) => ((0, jsx_runtime_1.jsx)(react_2.Box, { w: { base: "0.5rem", md: "0.8rem" }, h: { base: "0.5rem", md: "0.8rem" }, bg: idx === currentIndex ? "white" : "whiteAlpha.600", borderRadius: "full", cursor: "pointer", onClick: () => setCurrentIndex(idx), transition: "all 0.3s" }, idx))) }))] }));
 };
 exports.default = Slider;

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

@@ -2,3 +2,4 @@ import React from "react";
 import { StageItemProps } from "./StageProgressProps";
 declare const StageItem: React.FC<StageItemProps>;
 export default StageItem;
+//# sourceMappingURL=StageItem.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StageItem.d.ts","sourceRoot":"","sources":["../../../src/Components/StageProgress/StageItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAKjD,OAAO,EAEL,cAAc,EAEf,MAAM,sBAAsB,CAAC;AAsB9B,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAyIvC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/Components/StageProgress/StageItem.js

@@ -1,82 +1,38 @@
 "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 = {
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
+const StageProgressProps_1 = require("./StageProgressProps");
+const 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;
+const clipFor = (index, total, a) => {
+    const isFirst = index === 0;
+    const 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%)");
+        return `polygon(0 0, calc(100% - ${a}px) 0, 100% 50%, calc(100% - ${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%)");
+        return `polygon(0 0, 100% 0, 100% 100%, 0 100%, ${a}px 50%)`;
+    return `polygon(0 0, calc(100% - ${a}px) 0, 100% 50%, calc(100% - ${a}px) 100%, 0 100%, ${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 () {
+const StageItem = ({ label, index, total, state, variant = "chevron", size = "md", colorScheme = "primary", onClick, isReadOnly = false, disabled = false, showCheck = false, minWidth, scrollIntoViewWhenActive = true, tooltipThreshold = 20, }) => {
+    var _a;
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const palette = (0, StageProgressProps_1.resolveStagePalette)(theme, colorScheme);
+    const ref = (0, react_1.useRef)(null);
+    const s = sizeMap[size];
+    (0, react_1.useEffect)(() => {
         if (state === "active" && scrollIntoViewWhenActive && ref.current) {
             ref.current.scrollIntoView({
                 behavior: "smooth",
@@ -85,28 +41,28 @@ var StageItem = function (_a) {
             });
         }
     }, [state, scrollIntoViewWhenActive]);
-    var bg = state === "active"
+    const bg = state === "active"
         ? palette.strong
         : state === "completed"
             ? palette.soft
             : palette.muted;
-    var color = state === "active"
+    const 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";
+    const interactive = !isReadOnly && !disabled;
+    const isFirst = index === 0;
+    const isLast = index === total - 1;
+    const 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;
+    const leftPad = isChevron && !isFirst ? s.arrow + s.px * 4 : s.px * 2;
+    const 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"
+    const overlap = isChevron && !isFirst ? -(s.arrow - 2) : 0;
+    const clipPath = isChevron ? clipFor(index, total, s.arrow) : "none";
+    const borderRadius = variant === "pills"
         ? "full"
         : variant === "bar"
             ? isFirst && isLast
@@ -118,19 +74,16 @@ var StageItem = function (_a) {
                         : "2px"
             : "0";
     // Upcoming pills read as outlined; other states stay filled.
-    var isOutlinePill = variant === "pills" && state === "upcoming";
-    var hoverStyles = interactive
+    const isOutlinePill = variant === "pills" && state === "upcoming";
+    const 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))));
+    const showTooltip = ((_a = label === null || label === void 0 ? void 0 : label.length) !== null && _a !== void 0 ? _a : 0) > tooltipThreshold;
+    const content = ((0, jsx_runtime_1.jsx)(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: `${overlap}px`, pl: `${leftPad}px`, pr: `${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 }, _hover: interactive ? { ...hoverStyles, filter: "brightness(0.97)" } : undefined, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: isChevron ? "flex-start" : "center", gap: "6px", width: "100%", minW: 0, children: [showCheck && state === "completed" && ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: s.icon, style: { flexShrink: 0 } })), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", textAlign: "center", flex: "1", children: label })] }) }));
     if (showTooltip) {
-        return (react_1.default.createElement(ToolTip_1.default, { label: label, placement: "top", openDelay: 300 }, content));
+        return ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: label, placement: "top", openDelay: 300, children: content }));
     }
     return content;
 };

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

@@ -2,3 +2,4 @@ import React from "react";
 import { StageProgressProps } from "./StageProgressProps";
 declare const StageProgress: React.FC<StageProgressProps>;
 export default StageProgress;
+//# sourceMappingURL=StageProgress.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StageProgress.d.ts","sourceRoot":"","sources":["../../../src/Components/StageProgress/StageProgress.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAEL,kBAAkB,EAEnB,MAAM,sBAAsB,CAAC;AAmB9B,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAgG/C,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/Components/StageProgress/StageProgress.js

@@ -1,24 +1,13 @@
 "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 = {
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const StageItem_1 = __importDefault(require("./StageItem"));
+const StepperStage_1 = __importDefault(require("./StepperStage"));
+const scrollSx = {
     "&::-webkit-scrollbar": { height: "4px" },
     "&::-webkit-scrollbar-thumb": {
         borderRadius: "10px",
@@ -27,33 +16,32 @@ var scrollSx = {
     "&::-webkit-scrollbar-track": { background: "transparent" },
 };
 // Gap between items per variant (chevron interlocks via negative margin).
-var gapFor = {
+const 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;
+const StageProgress = ({ stages, variant = "chevron", value, onChange, size = "md", colorScheme = "primary", markCompleted = true, showCheck = false, isReadOnly = false, isLoading = false, minStageWidth, scrollActiveIntoView = true, tooltipThreshold = 20, }) => {
     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 })); })));
+        const skeletonH = size === "sm" ? "28px" : size === "lg" ? "44px" : "36px";
+        return ((0, jsx_runtime_1.jsx)(react_1.Flex, { gap: "6px", width: "100%", overflowX: "hidden", p: "0.1rem", children: Array.from({ length: 6 }).map((_, i) => ((0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: skeletonH, minWidth: minStageWidth || "160px", borderRadius: "6px", flexShrink: 0 }, i))) }));
     }
-    var activeIndex = stages.findIndex(function (st) { return st.id === value; });
-    var stateFor = function (index) {
+    const activeIndex = stages.findIndex((st) => st.id === value);
+    const stateFor = (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); } }));
-    })));
+    const total = stages.length;
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: variant === "stepper" ? "flex-start" : "stretch", gap: gapFor[variant], overflowX: "hidden", p: "0.1rem", sx: { "&:hover": { overflowX: "auto" }, ...scrollSx }, children: stages.map((stage, index) => {
+            const state = stateFor(index);
+            if (variant === "stepper") {
+                return ((0, jsx_runtime_1.jsx)(StepperStage_1.default, { 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: () => onChange === null || onChange === void 0 ? void 0 : onChange(stage.id, stage, index) }, stage.id));
+            }
+            return ((0, jsx_runtime_1.jsx)(StageItem_1.default, { 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: () => onChange === null || onChange === void 0 ? void 0 : onChange(stage.id, stage, index) }, stage.id));
+        }) }));
 };
 exports.default = StageProgress;