@beweco/aurora-ui 0.6.0 → 0.6.2

package/dist/index.cjs.js

@@ -5,8 +5,8 @@ var jsxRuntime = require('react/jsx-runtime');
 var react$1 = require('@iconify/react');
 var React = require('react');
 var recharts = require('recharts');
-var framerMotion = require('framer-motion');
 var reactDom = require('react-dom');
+var framerMotion = require('framer-motion');
 var useTheme = require('@heroui/use-theme');
 
 /******************************************************************************
@@ -615,7 +615,7 @@ var AuraAutocomplete = function (_a) {
     var resolvedIcon = icon === undefined ? DEFAULT_ICON : icon;
     var hasIcon = resolvedIcon != null;
     var endContent = hasIcon ? (jsxRuntime.jsx("span", { className: ICON_WRAPPER_CLASSNAME, children: resolvedIcon })) : null;
-    return (jsxRuntime.jsxs("div", { children: [label && (jsxRuntime.jsx("label", { htmlFor: autoId, className: "block mb-2 text-tiny text-default-600", children: label })), jsxRuntime.jsx(react.Autocomplete, __assign({}, props, { id: autoId, label: undefined, labelPlacement: "outside", variant: variant, size: size, radius: radius, endContent: endContent, classNames: __assign({ base: "[&_[data-slot=input-wrapper][data-focus=true]]:!border-primary-500", popoverContent: "[&_li[data-hover=true]]:!bg-primary-50 [&_li[data-hover=true]]:!text-default-600 [&_li]:!text-default-500" }, (hasIcon && { selectorButton: "!hidden" })) }))] }));
+    return (jsxRuntime.jsxs("div", { children: [label && (jsxRuntime.jsx("label", { htmlFor: autoId, className: "block mb-2 text-tiny text-default-600", children: label })), jsxRuntime.jsx(react.Autocomplete, __assign({}, props, { id: autoId, label: undefined, labelPlacement: "outside", variant: variant, size: size, radius: radius, endContent: endContent, classNames: __assign({ base: "[&_[data-slot=input-wrapper][data-focus=true]]:!border-primary-500", popoverContent: "aura-popover-content [&_li[data-hover=true]]:!bg-primary-50 [&_li[data-hover=true]]:!text-default-600 [&_li]:!text-default-500" }, (hasIcon && { selectorButton: "!hidden" })) }))] }));
 };
 
 /**
@@ -2490,37 +2490,58 @@ function $458b0a5536c1a7cf$export$40bfa8c7b0832715(value, defaultValue, onChange
     ];
 }
 
+var VALID_STEP_COLORS$1 = [
+    "primary",
+    "secondary",
+    "success",
+    "warning",
+    "danger",
+    "default",
+];
 var defaultTranslations$7 = {
     checkIconTitle: "Check",
 };
-var COLOR_DEFAULTS = {
-    primary: {
-        stepColor: "hsl(var(--heroui-primary))",
-        stepFgColor: "hsl(var(--heroui-primary-foreground))",
-    },
-    secondary: {
-        stepColor: "hsl(var(--heroui-secondary))",
-        stepFgColor: "hsl(var(--heroui-secondary-foreground))",
-    },
-    success: {
-        stepColor: "hsl(var(--heroui-success))",
-        stepFgColor: "hsl(var(--heroui-success-foreground))",
-    },
-    warning: {
-        stepColor: "hsl(var(--heroui-warning))",
-        stepFgColor: "hsl(var(--heroui-warning-foreground))",
-    },
-    danger: {
-        stepColor: "hsl(var(--heroui-danger))",
-        stepFgColor: "hsl(var(--heroui-danger-foreground))",
-    },
-    default: {
-        stepColor: "hsl(var(--heroui-default))",
-        stepFgColor: "hsl(var(--heroui-default-foreground))",
-    },
-};
+function getContainerCSSVars$1(color) {
+    var baseColor = "hsl(var(--heroui-".concat(color, "))");
+    var fgColor = "hsl(var(--heroui-".concat(color, "-foreground))");
+    var inactiveColor = "hsl(var(--heroui-default-300))";
+    return {
+        "--step-color": baseColor,
+        "--step-fg-color": fgColor,
+        "--active-fg-color": fgColor,
+        "--active-border-color": baseColor,
+        "--active-color": baseColor,
+        "--complete-background-color": baseColor,
+        "--complete-border-color": baseColor,
+        "--inactive-border-color": inactiveColor,
+        "--inactive-color": inactiveColor,
+        "--inactive-bar-color": inactiveColor,
+    };
+}
+function getCircleStyle$1(status) {
+    switch (status) {
+        case "complete":
+            return {
+                backgroundColor: "var(--complete-background-color)",
+                borderColor: "var(--complete-border-color)",
+                color: "var(--active-fg-color)",
+            };
+        case "active":
+            return {
+                backgroundColor: "transparent",
+                borderColor: "var(--active-border-color)",
+                color: "var(--active-color)",
+            };
+        default:
+            return {
+                backgroundColor: "transparent",
+                borderColor: "var(--inactive-border-color)",
+                color: "var(--inactive-color)",
+            };
+    }
+}
 var VerticalSteps = React.forwardRef(function (_a, ref) {
-    var _b = _a.color, color = _b === void 0 ? "primary" : _b, _c = _a.steps, stepsProp = _c === void 0 ? [] : _c, _d = _a.defaultStep, defaultStep = _d === void 0 ? 0 : _d, onStepChange = _a.onStepChange, currentStepProp = _a.currentStep, _e = _a.hideProgressBars, hideProgressBars = _e === void 0 ? false : _e, _f = _a.hideInactiveDescriptions, hideInactiveDescriptions = _f === void 0 ? false : _f, stepClassName = _a.stepClassName, className = _a.className, translations = _a.translations, colorVars = _a.colorVars, props = __rest(_a, ["color", "steps", "defaultStep", "onStepChange", "currentStep", "hideProgressBars", "hideInactiveDescriptions", "stepClassName", "className", "translations", "colorVars"]);
+    var _b = _a.color, color = _b === void 0 ? "primary" : _b, _c = _a.steps, stepsProp = _c === void 0 ? [] : _c, _d = _a.defaultStep, defaultStep = _d === void 0 ? 0 : _d, onStepChange = _a.onStepChange, currentStepProp = _a.currentStep, _e = _a.hideProgressBars, hideProgressBars = _e === void 0 ? false : _e, _f = _a.hideInactiveDescriptions, hideInactiveDescriptions = _f === void 0 ? false : _f, stepClassName = _a.stepClassName, className = _a.className, translations = _a.translations, props = __rest(_a, ["color", "steps", "defaultStep", "onStepChange", "currentStep", "hideProgressBars", "hideInactiveDescriptions", "stepClassName", "className", "translations"]);
     var _g = $458b0a5536c1a7cf$export$40bfa8c7b0832715(currentStepProp, defaultStep, onStepChange), currentStep = _g[0], setCurrentStep = _g[1];
     var t = __assign(__assign({}, defaultTranslations$7), translations);
     var steps = React.useMemo(function () {
@@ -2529,26 +2550,14 @@ var VerticalSteps = React.forwardRef(function (_a, ref) {
         }
         return stepsProp;
     }, [stepsProp]);
-    var colorStyle = React.useMemo(function () {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-        var defaults = (_a = COLOR_DEFAULTS[color]) !== null && _a !== void 0 ? _a : COLOR_DEFAULTS.primary;
-        return {
-            "--step-color": (_b = colorVars === null || colorVars === void 0 ? void 0 : colorVars.stepColor) !== null && _b !== void 0 ? _b : defaults.stepColor,
-            "--step-fg-color": (_c = colorVars === null || colorVars === void 0 ? void 0 : colorVars.stepFgColor) !== null && _c !== void 0 ? _c : defaults.stepFgColor,
-            "--active-fg-color": (_d = colorVars === null || colorVars === void 0 ? void 0 : colorVars.activeFgColor) !== null && _d !== void 0 ? _d : "var(--step-fg-color)",
-            "--active-border-color": (_e = colorVars === null || colorVars === void 0 ? void 0 : colorVars.activeBorderColor) !== null && _e !== void 0 ? _e : "var(--step-color)",
-            "--active-color": (_f = colorVars === null || colorVars === void 0 ? void 0 : colorVars.activeColor) !== null && _f !== void 0 ? _f : "var(--step-color)",
-            "--complete-background-color": (_g = colorVars === null || colorVars === void 0 ? void 0 : colorVars.completeBackgroundColor) !== null && _g !== void 0 ? _g : "var(--step-color)",
-            "--complete-border-color": (_h = colorVars === null || colorVars === void 0 ? void 0 : colorVars.completeBorderColor) !== null && _h !== void 0 ? _h : "var(--step-color)",
-            "--inactive-border-color": (_j = colorVars === null || colorVars === void 0 ? void 0 : colorVars.inactiveBorderColor) !== null && _j !== void 0 ? _j : "hsl(var(--heroui-default-300))",
-            "--inactive-color": (_k = colorVars === null || colorVars === void 0 ? void 0 : colorVars.inactiveColor) !== null && _k !== void 0 ? _k : "hsl(var(--heroui-default-300))",
-            "--inactive-bar-color": (_l = colorVars === null || colorVars === void 0 ? void 0 : colorVars.inactiveBarColor) !== null && _l !== void 0 ? _l : "hsl(var(--heroui-default-300))",
-        };
-    }, [color, colorVars]);
-    return (jsxRuntime.jsx("nav", { "aria-label": "Progress", className: "max-w-fit", children: jsxRuntime.jsx("ol", { className: react.cn("flex flex-col gap-y-3", className), style: colorStyle, children: steps === null || steps === void 0 ? void 0 : steps.map(function (step, stepIdx) {
+    var stepColor = VALID_STEP_COLORS$1.includes(color)
+        ? color
+        : "primary";
+    var containerVars = React.useMemo(function () { return getContainerCSSVars$1(stepColor); }, [stepColor]);
+    return (jsxRuntime.jsx("nav", { "aria-label": "Progress", className: "max-w-fit", children: jsxRuntime.jsx("ol", { "data-step-color": stepColor, className: react.cn("flex flex-col gap-y-3", className), style: containerVars, children: steps === null || steps === void 0 ? void 0 : steps.map(function (step, stepIdx) {
                 var status = currentStep === stepIdx
                     ? "active"
-                    : step.isCompleted
+                    : stepIdx < currentStep || step.isCompleted
                         ? "complete"
                         : "inactive";
                 var isDisabled = status === "inactive";
@@ -2556,85 +2565,38 @@ var VerticalSteps = React.forwardRef(function (_a, ref) {
                 // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
                 jsxRuntime.jsxs("li", { className: "relative", children: [jsxRuntime.jsx("div", { className: "flex w-full max-w-full items-center", children: jsxRuntime.jsxs("button", __assign({ type: "button", ref: ref, "aria-current": status === "active" ? "step" : undefined, className: react.cn("group rounded-large flex w-full cursor-pointer items-center justify-center gap-4 px-3 py-2.5", stepClassName, {
                                     "cursor-not-allowed": isDisabled,
-                                }), onClick: function () { return setCurrentStep(stepIdx); }, disabled: isDisabled }, props, { children: [jsxRuntime.jsx("div", { className: "flex h-full items-center", children: jsxRuntime.jsx(framerMotion.LazyMotion, { features: framerMotion.domAnimation, children: jsxRuntime.jsx("div", { className: "relative", children: jsxRuntime.jsx(framerMotion.m.div, { animate: status, className: react.cn("border-medium text-large text-default-600 relative flex h-[34px] w-[34px] items-center justify-center rounded-full font-semibold", {
-                                                        "shadow-lg": status === "complete",
-                                                    }), "data-status": status, initial: false, transition: { duration: 0.25 }, variants: {
-                                                        inactive: {
-                                                            backgroundColor: "transparent",
-                                                            borderColor: "var(--inactive-border-color)",
-                                                            color: "var(--inactive-color)",
-                                                        },
-                                                        active: {
-                                                            backgroundColor: "transparent",
-                                                            borderColor: "var(--active-border-color)",
-                                                            color: "var(--active-color)",
-                                                        },
-                                                        complete: {
-                                                            backgroundColor: "var(--complete-background-color)",
-                                                            borderColor: "var(--complete-border-color)",
-                                                        },
-                                                    }, children: jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: status === "complete" ? (jsxRuntime.jsx(IconComponent, { style: { color: "var(--active-fg-color)" }, className: "font-bold", icon: "material-symbols:check-rounded", title: t.checkIconTitle })) : (jsxRuntime.jsx("span", { children: stepIdx + 1 })) }) }) }) }) }), jsxRuntime.jsx("div", { className: "flex-1 text-left", children: jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { className: react.cn("text-medium text-default-600 font-medium transition-[color,opacity] duration-300 group-active:opacity-70", {
-                                                        "text-default-300": status === "inactive",
+                                }), onClick: function () { return setCurrentStep(stepIdx); }, disabled: isDisabled }, props, { children: [jsxRuntime.jsx("div", { className: "flex h-full items-center", children: jsxRuntime.jsx("div", { className: "relative", children: jsxRuntime.jsx("div", { className: react.cn("border-medium text-large relative flex h-[34px] w-[34px] items-center justify-center rounded-full font-semibold", "transition-[background-color,border-color,color,box-shadow] duration-300", {
+                                                    "shadow-lg": status === "complete",
+                                                }), "data-status": status, style: getCircleStyle$1(status), children: jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: status === "complete" ? (jsxRuntime.jsx(IconComponent, { className: "font-bold", style: {
+                                                            color: "var(--active-fg-color)",
+                                                        }, icon: "material-symbols:check-rounded", title: t.checkIconTitle })) : (jsxRuntime.jsx("span", { children: stepIdx + 1 })) }) }) }) }), jsxRuntime.jsx("div", { className: "flex-1 text-left", children: jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { className: react.cn("text-medium text-default-600 font-medium transition-[color,opacity] duration-300 group-active:opacity-70", {
+                                                        "text-default-300": status ===
+                                                            "inactive",
                                                     }), children: step.title }), (!hideInactiveDescriptions ||
                                                     status === "active") && (jsxRuntime.jsx("div", { className: react.cn("text-tiny text-default-600 lg:text-small transition-[color,opacity] duration-300 group-active:opacity-70", {
-                                                        "text-default-300": status === "inactive",
-                                                    }), children: step.description }))] }) })] }), stepIdx) }), stepIdx < steps.length - 1 && !hideProgressBars && (jsxRuntime.jsx("div", { "aria-hidden": "true", className: react.cn("pointer-events-none absolute left-3 flex h-1/2 -translate-y-1/3 items-center px-4", {
+                                                        "text-default-300": status ===
+                                                            "inactive",
+                                                    }), children: step.description }))] }) })] }), stepIdx) }), stepIdx < steps.length - 1 &&
+                            !hideProgressBars && (jsxRuntime.jsx("div", { "aria-hidden": "true", className: react.cn("pointer-events-none absolute top-[calc(64px*var(--idx)+1)] left-3 flex h-1/2 -translate-y-1/3 items-center px-4", {
                                 "h-1/4": stepIdx === currentStep,
                             }), style: {
-                                top: "calc(64px * ".concat(stepIdx, " + 1px)"),
-                            }, children: jsxRuntime.jsx("div", { className: "relative h-full w-0.5 transition-colors duration-300", style: {
-                                    backgroundColor: "var(--inactive-bar-color)",
-                                }, children: jsxRuntime.jsx("div", { className: "absolute inset-0 w-full transition-[height] duration-300", style: {
-                                        backgroundColor: "var(--active-border-color)",
-                                        height: stepIdx < currentStep ? "100%" : "0",
-                                    } }) }) }))] }, stepIdx));
+                                "--idx": stepIdx,
+                            }, children: jsxRuntime.jsx("div", { className: react.cn("relative h-full w-0.5 bg-[var(--inactive-bar-color)] transition-colors duration-300", "after:absolute after:block after:h-0 after:w-full after:bg-[var(--active-border-color)] after:transition-[height] after:duration-300 after:content-['']", {
+                                    "after:h-full": stepIdx <
+                                        currentStep,
+                                }) }) }))] }, stepIdx));
             }) }) }));
 });
 VerticalSteps.displayName = "VerticalSteps";
 
-var LIGHT_COLOR_VARS = {
-    stepColor: "hsl(var(--heroui-primary-400))",
-    activeColor: "hsl(var(--heroui-primary-400))",
-    inactiveBorderColor: "hsl(var(--heroui-primary-200))",
-    inactiveBarColor: "hsl(var(--heroui-primary-200))",
-    inactiveColor: "hsl(var(--heroui-primary-300))",
-};
-var DARK_COLOR_VARS = {
-    stepColor: "rgba(255,255,255,0.1)",
-    stepFgColor: "hsl(var(--heroui-foreground-600))",
-    activeColor: "hsl(var(--heroui-foreground-600))",
-    activeBorderColor: "rgba(255,255,255,0.5)",
-    inactiveBorderColor: "rgba(255,255,255,0.1)",
-    inactiveBarColor: "rgba(255,255,255,0.1)",
-    inactiveColor: "rgba(255,255,255,0.2)",
-};
-var useIsDarkMode = function () {
-    var _a = React.useState(function () {
-        if (typeof document !== "undefined") {
-            return document.documentElement.classList.contains("dark");
-        }
-        return false;
-    }), isDark = _a[0], setIsDark = _a[1];
-    React.useEffect(function () {
-        var el = document.documentElement;
-        var update = function () { return setIsDark(el.classList.contains("dark")); };
-        var observer = new MutationObserver(update);
-        observer.observe(el, { attributes: true, attributeFilter: ["class"] });
-        update();
-        return function () { return observer.disconnect(); };
-    }, []);
-    return isDark;
-};
 var MultiStepSidebar = React.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, currentPage = _a.currentPage; _a.onBack; _a.onNext; var onChangePage = _a.onChangePage, steps = _a.steps; _a.goBackTranslation; var onClose = _a.onClose, _b = _a.hideInactiveDescriptions, hideInactiveDescriptions = _b === void 0 ? false : _b, props = __rest(_a, ["children", "className", "currentPage", "onBack", "onNext", "onChangePage", "steps", "goBackTranslation", "onClose", "hideInactiveDescriptions"]);
-    var isDark = useIsDarkMode();
-    var stepperColorVars = isDark ? DARK_COLOR_VARS : LIGHT_COLOR_VARS;
     var handleOverlayClick = function (e) {
         if (e.target === e.currentTarget) {
             onClose === null || onClose === void 0 ? void 0 : onClose();
         }
     };
-    return (jsxRuntime.jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-content3/50 backdrop-blur-sm", onClick: handleOverlayClick, children: jsxRuntime.jsxs("div", __assign({ ref: ref, className: react.cn("relative flex h-full w-full max-w-4xl overflow-hidden rounded-lg bg-background shadow-lg lg:h-auto lg:max-h-[85vh] lg:min-h-[512px]", className) }, props, { children: [jsxRuntime.jsx("div", { className: react.cn("absolute inset-y-0 left-0 hidden w-1/3 flex-col justify-start gap-y-8 overflow-y-auto p-8 md:flex [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]"), children: jsxRuntime.jsx(VerticalSteps, { colorVars: stepperColorVars, color: "primary", currentStep: currentPage, steps: steps, onStepChange: onChangePage, hideInactiveDescriptions: hideInactiveDescriptions }) }), jsxRuntime.jsxs("div", { className: "relative flex w-full flex-col items-center justify-between gap-4 md:ml-[33.333333%] md:w-2/3 md:p-4 min-h-0", children: [jsxRuntime.jsx(Button, { isIconOnly: true, className: "absolute right-4 top-4", size: "sm", variant: "light", color: "default", onPress: onClose, startContent: jsxRuntime.jsx(IconComponent, { className: "text-foreground", icon: "material-symbols:close-rounded", size: "lg" }) }), jsxRuntime.jsx("div", { className: "pt-9 w-10/12 md:hidden", children: jsxRuntime.jsx("div", { className: "flex  w-full justify-center", children: jsxRuntime.jsx(StepIndicator, { currentStep: currentPage + 1, totalSteps: steps.length }) }) }), jsxRuntime.jsx("div", { className: "flex flex-col flex-1 w-full justify-between p-4 sm:max-w-md md:max-w-lg overflow-y-auto min-h-0 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]", children: children })] })] })) }));
+    return (jsxRuntime.jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-content3/50 backdrop-blur-sm", onClick: handleOverlayClick, children: jsxRuntime.jsxs("div", __assign({ ref: ref, className: react.cn("relative flex h-full w-full max-w-4xl overflow-hidden rounded-lg bg-background shadow-lg lg:h-auto lg:max-h-[85vh] lg:min-h-[512px]", className) }, props, { children: [jsxRuntime.jsx("div", { className: react.cn("absolute inset-y-0 left-0 hidden w-1/3 flex-col justify-start gap-y-8 overflow-y-auto p-8 md:flex [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]"), children: jsxRuntime.jsx(VerticalSteps, { className: "aura-stepper-theme", color: "primary", currentStep: currentPage, steps: steps, onStepChange: onChangePage, hideInactiveDescriptions: hideInactiveDescriptions }) }), jsxRuntime.jsxs("div", { className: "relative flex w-full flex-col items-center justify-between gap-4 md:ml-[33.333333%] md:w-2/3 md:p-4 min-h-0", children: [jsxRuntime.jsx(Button, { isIconOnly: true, className: "absolute right-4 top-4", size: "sm", variant: "light", color: "default", onPress: onClose, startContent: jsxRuntime.jsx(IconComponent, { className: "text-foreground", icon: "material-symbols:close-rounded", size: "lg" }) }), jsxRuntime.jsx("div", { className: "pt-9 w-10/12 md:hidden", children: jsxRuntime.jsx("div", { className: "flex  w-full justify-center", children: jsxRuntime.jsx(StepIndicator, { className: "aura-stepper-theme", currentStep: currentPage + 1, totalSteps: steps.length }) }) }), jsxRuntime.jsx("div", { className: "flex flex-col flex-1 w-full justify-between p-4 sm:max-w-md md:max-w-lg overflow-y-auto min-h-0 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]", children: children })] })] })) }));
 });
 MultiStepSidebar.displayName = "MultiStepSidebar";
 
@@ -3297,6 +3259,53 @@ var PromotionalBanner = function (_a) {
                 }, variant: "bordered", onClick: handleButtonClick }, buttonProps, { children: finalButtonText })), showCloseButton && (jsxRuntime.jsx("div", { className: "flex flex-1 justify-end", children: jsxRuntime.jsx(react.Button, { isIconOnly: true, "aria-label": t.closeButtonLabel, className: "-m-1", size: "lg", variant: "bordered", onClick: handleClose, children: jsxRuntime.jsx(IconComponent, { "aria-hidden": "true", className: "text-default-500", icon: "lucide:x", size: "md" }) }) }))] }));
 };
 
+var VALID_STEP_COLORS = [
+    "primary",
+    "secondary",
+    "success",
+    "warning",
+    "danger",
+    "default",
+];
+function getContainerCSSVars(color) {
+    var baseColor = "hsl(var(--heroui-".concat(color, "))");
+    var fgColor = "hsl(var(--heroui-".concat(color, "-foreground))");
+    var inactiveColor = "hsl(var(--heroui-default-300))";
+    return {
+        "--step-color": baseColor,
+        "--step-fg-color": fgColor,
+        "--active-fg-color": fgColor,
+        "--active-border-color": baseColor,
+        "--active-color": baseColor,
+        "--complete-background-color": baseColor,
+        "--complete-border-color": baseColor,
+        "--inactive-border-color": inactiveColor,
+        "--inactive-color": inactiveColor,
+        "--inactive-bar-color": inactiveColor,
+    };
+}
+function getCircleStyle(status) {
+    switch (status) {
+        case "complete":
+            return {
+                backgroundColor: "var(--complete-background-color)",
+                borderColor: "var(--complete-border-color)",
+                color: "var(--active-fg-color)",
+            };
+        case "active":
+            return {
+                backgroundColor: "transparent",
+                borderColor: "var(--active-border-color)",
+                color: "var(--active-color)",
+            };
+        default:
+            return {
+                backgroundColor: "transparent",
+                borderColor: "var(--inactive-border-color)",
+                color: "var(--inactive-color)",
+            };
+    }
+}
 var RowSteps = React.forwardRef(function (_a, ref) {
     var _b = _a.color, color = _b === void 0 ? "primary" : _b, _c = _a.steps, stepsProp = _c === void 0 ? [] : _c, _d = _a.defaultStep, defaultStep = _d === void 0 ? 0 : _d, onStepChange = _a.onStepChange, currentStepProp = _a.currentStep, _e = _a.hideProgressBars, hideProgressBars = _e === void 0 ? false : _e, stepClassName = _a.stepClassName, className = _a.className; _a.translations; var props = __rest(_a, ["color", "steps", "defaultStep", "onStepChange", "currentStep", "hideProgressBars", "stepClassName", "className", "translations"]);
     var _f = $458b0a5536c1a7cf$export$40bfa8c7b0832715(currentStepProp, defaultStep, onStepChange), currentStep = _f[0], setCurrentStep = _f[1];
@@ -3306,85 +3315,30 @@ var RowSteps = React.forwardRef(function (_a, ref) {
         }
         return stepsProp;
     }, [stepsProp]);
-    var colors = React.useMemo(function () {
-        var _a;
-        var colorMappings = {
-            primary: [
-                "[--step-color:hsl(var(--heroui-primary))]",
-                "[--step-fg-color:hsl(var(--heroui-primary-foreground))]",
-            ],
-            secondary: [
-                "[--step-color:hsl(var(--heroui-secondary))]",
-                "[--step-fg-color:hsl(var(--heroui-secondary-foreground))]",
-            ],
-            success: [
-                "[--step-color:hsl(var(--heroui-success))]",
-                "[--step-fg-color:hsl(var(--heroui-success-foreground))]",
-            ],
-            warning: [
-                "[--step-color:hsl(var(--heroui-warning))]",
-                "[--step-fg-color:hsl(var(--heroui-warning-foreground))]",
-            ],
-            danger: [
-                "[--step-color:hsl(var(--heroui-danger))]",
-                "[--step-fg-color:hsl(var(--heroui-danger-foreground))]",
-            ],
-            default: [
-                "[--step-color:hsl(var(--heroui-default))]",
-                "[--step-fg-color:hsl(var(--heroui-default-foreground))]",
-            ],
-        };
-        var _b = (_a = colorMappings[color]) !== null && _a !== void 0 ? _a : colorMappings.primary, userColor = _b[0], fgColor = _b[1];
-        var colorsVars = [
-            "[--active-fg-color:var(--step-fg-color)]",
-            "[--active-border-color:var(--step-color)]",
-            "[--active-color:var(--step-color)]",
-            "[--complete-background-color:var(--step-color)]",
-            "[--complete-border-color:var(--step-color)]",
-            "[--inactive-border-color:hsl(var(--heroui-default-300))]",
-            "[--inactive-color:hsl(var(--heroui-default-300))]",
-        ];
-        if (!(className === null || className === void 0 ? void 0 : className.includes("--step-fg-color"))) {
-            colorsVars.unshift(fgColor);
-        }
-        if (!(className === null || className === void 0 ? void 0 : className.includes("--step-color"))) {
-            colorsVars.unshift(userColor);
-        }
-        if (!(className === null || className === void 0 ? void 0 : className.includes("--inactive-bar-color"))) {
-            colorsVars.push("[--inactive-bar-color:hsl(var(--heroui-default-300))]");
-        }
-        return colorsVars;
-    }, [color, className]);
-    return (jsxRuntime.jsx("nav", { "aria-label": "Progress", className: "-my-4 max-w-fit overflow-x-auto py-4", children: jsxRuntime.jsx("ol", { className: react.cn("flex flex-row flex-nowrap gap-x-3", colors, className), children: steps === null || steps === void 0 ? void 0 : steps.map(function (step, stepIdx) {
+    var stepColor = VALID_STEP_COLORS.includes(color)
+        ? color
+        : "primary";
+    var containerVars = React.useMemo(function () { return getContainerCSSVars(stepColor); }, [stepColor]);
+    return (jsxRuntime.jsx("nav", { "aria-label": "Progress", className: "-my-4 max-w-fit overflow-x-auto py-4", children: jsxRuntime.jsx("ol", { "data-step-color": stepColor, className: react.cn("flex flex-row flex-nowrap gap-x-3", className), style: containerVars, children: steps === null || steps === void 0 ? void 0 : steps.map(function (step, stepIdx) {
                 var status = currentStep === stepIdx
                     ? "active"
                     : currentStep < stepIdx
                         ? "inactive"
                         : "complete";
-                return (jsxRuntime.jsx("li", { className: "relative flex w-full items-center pr-12 last:pr-0", children: jsxRuntime.jsxs("button", __assign({ type: "button", ref: ref, "aria-current": status === "active" ? "step" : undefined, className: react.cn("group rounded-large flex w-full cursor-pointer flex-row items-center justify-center gap-x-3 py-2.5", stepClassName), onClick: function () { return setCurrentStep(stepIdx); } }, props, { children: [jsxRuntime.jsx("div", { className: "h-ful relative flex items-center", children: jsxRuntime.jsx(framerMotion.LazyMotion, { features: framerMotion.domAnimation, children: jsxRuntime.jsx(framerMotion.m.div, { animate: status, className: "relative", children: jsxRuntime.jsx(framerMotion.m.div, { className: react.cn("border-medium text-large text-default-600 relative flex h-[34px] w-[34px] items-center justify-center rounded-full font-semibold", {
-                                                "shadow-lg": status === "complete",
-                                            }), initial: false, transition: { duration: 0.25 }, variants: {
-                                                inactive: {
-                                                    backgroundColor: "transparent",
-                                                    borderColor: "var(--inactive-border-color)",
-                                                    color: "var(--inactive-color)",
-                                                },
-                                                active: {
-                                                    backgroundColor: "transparent",
-                                                    borderColor: "var(--active-border-color)",
-                                                    color: "var(--active-color)",
-                                                },
-                                                complete: {
-                                                    backgroundColor: "var(--complete-background-color)",
-                                                    borderColor: "var(--complete-border-color)",
-                                                },
-                                            }, children: jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: status === "complete" ? (jsxRuntime.jsx(IconComponent, { className: " text-[var(--active-fg-color)] font-bold", icon: "material-symbols:check-rounded" })) : (jsxRuntime.jsx("span", { children: stepIdx + 1 })) }) }) }) }) }), step.title && (jsxRuntime.jsx("div", { className: "max-w-full flex-1 text-start", children: jsxRuntime.jsx("div", { className: react.cn("text-small text-default-600 lg:text-medium font-medium transition-[color,opacity] duration-300 group-active:opacity-80", {
-                                        "text-default-300": status === "inactive",
-                                    }), children: step.title }) })), stepIdx < steps.length - 1 && !hideProgressBars && (jsxRuntime.jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute right-0 w-10 flex-none items-center", style: {
-                                    // @ts-ignore
+                return (jsxRuntime.jsx("li", { className: "relative flex w-full items-center pr-12 last:pr-0", children: jsxRuntime.jsxs("button", __assign({ type: "button", ref: ref, "aria-current": status === "active" ? "step" : undefined, className: react.cn("group rounded-large flex w-full cursor-pointer flex-row items-center justify-center gap-x-3 py-2.5", stepClassName), onClick: function () { return setCurrentStep(stepIdx); } }, props, { children: [jsxRuntime.jsx("div", { className: "h-ful relative flex items-center", children: jsxRuntime.jsx("div", { className: "relative", children: jsxRuntime.jsx("div", { className: react.cn("border-medium text-large relative flex h-[34px] w-[34px] items-center justify-center rounded-full font-semibold", "transition-[background-color,border-color,color,box-shadow] duration-300", {
+                                            "shadow-lg": status ===
+                                                "complete",
+                                        }), "data-status": status, style: getCircleStyle(status), children: jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: status === "complete" ? (jsxRuntime.jsx(IconComponent, { className: "font-bold", style: {
+                                                    color: "var(--active-fg-color)",
+                                                }, icon: "material-symbols:check-rounded" })) : (jsxRuntime.jsx("span", { children: stepIdx + 1 })) }) }) }) }), step.title && (jsxRuntime.jsx("div", { className: "max-w-full flex-1 text-start", children: jsxRuntime.jsx("div", { className: react.cn("text-small text-default-600 lg:text-medium font-medium transition-[color,opacity] duration-300 group-active:opacity-80", {
+                                        "text-default-300": status ===
+                                            "inactive",
+                                    }), children: step.title }) })), stepIdx < steps.length - 1 &&
+                                !hideProgressBars && (jsxRuntime.jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute right-0 w-10 flex-none items-center", style: {
                                     "--idx": stepIdx,
                                 }, children: jsxRuntime.jsx("div", { className: react.cn("relative h-0.5 w-full bg-[var(--inactive-bar-color)] transition-colors duration-300", "after:absolute after:block after:h-full after:w-0 after:bg-[var(--active-border-color)] after:transition-[width] after:duration-300 after:content-['']", {
-                                        "after:w-full": stepIdx < currentStep,
+                                        "after:w-full": stepIdx <
+                                            currentStep,
                                     }) }) }))] }), stepIdx) }, stepIdx));
             }) }) }));
 });
@@ -3808,7 +3762,7 @@ var Select = function (_a) {
     return (jsxRuntime.jsx("div", { className: "group", children: jsxRuntime.jsx(react.Select, __assign({}, props, { id: selectId, label: label, labelPlacement: "outside", placeholder: placeholder, variant: variant, size: size, radius: radius, classNames: {
                 label: "text-default-600 text-tiny group-data-[filled=true]:text-default-600",
                 trigger: "data-[open=true]:!border-primary-500 data-[focus=true]:!border-primary-500 data-[disabled=true]:bg-default-100",
-                popoverContent: "[&_[data-focus-visible=true]]:!outline-none [&_[data-selectable=true]:focus]:!bg-primary-50 [&_li]:!text-default-500 [&_li[data-hover=true]]:!text-default-600",
+                popoverContent: "aura-popover-content [&_[data-focus-visible=true]]:!outline-none [&_[data-selectable=true]:focus]:!bg-primary-50 [&_li]:!text-default-500 [&_li[data-hover=true]]:!text-default-600",
             } })) }));
 };