react-n-design
Version:
react-n-design: A modern, lightweight, and animated modern React component library.
527 lines (505 loc) • 107 kB
JavaScript
'use strict';
var jsxRuntime = require('react/jsx-runtime');
var framerMotion = require('framer-motion');
var styled = require('styled-components');
var React = require('react');
var fa = require('react-icons/fa');
/******************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
var __assign = function() {
__assign = Object.assign || function __assign(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);
};
function __rest(s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
}
function __spreadArray(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));
}
function __makeTemplateObject(cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
}
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
var e = new Error(message);
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
};
// Sizing for default and circle shapes
var sizes$7 = {
small: { height: '36px', padding: '0 16px', fontSize: '14px', radius: '10px', circleSize: '36px' },
medium: {
height: '48px',
padding: '0 24px',
fontSize: '16px',
radius: function (_a) {
var theme = _a.theme;
return theme.borderRadius;
},
circleSize: '48px'
},
large: { height: '56px', padding: '0 32px', fontSize: '18px', radius: '16px', circleSize: '56px' },
};
// Keyframes for the spinner animation
var spin$4 = styled.keyframes(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n to {\n transform: rotate(360deg);\n }\n"], ["\n to {\n transform: rotate(360deg);\n }\n"])));
// A simple CSS spinner component
var Spinner$3 = styled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n border: 2px solid rgba(255, 255, 255, 0.3);\n border-top-color: #fff;\n border-radius: 50%;\n width: 1em;\n height: 1em;\n animation: ", " 0.8s linear infinite;\n"], ["\n border: 2px solid rgba(255, 255, 255, 0.3);\n border-top-color: #fff;\n border-radius: 50%;\n width: 1em;\n height: 1em;\n animation: ", " 0.8s linear infinite;\n"])), spin$4);
var ButtonIcon = styled.span(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n"], ["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n"])));
var ButtonContent = styled.span(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 8px; /* Space between icon and text */\n"], ["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 8px; /* Space between icon and text */\n"])));
var StyledButton = styled.button.withConfig({
shouldForwardProp: function (prop) { return !['size', 'variant', 'shape', 'fullWidth', 'hasChildren'].includes(prop); },
})(templateObject_9$7 || (templateObject_9$7 = __makeTemplateObject(["\n /* Reset and Core Styles */\n border: none;\n outline: none;\n font-weight: 600;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s ease-in-out;\n cursor: pointer;\n width: ", ";\n\n /* Size Styles */\n height: ", ";\n font-size: ", ";\n\n /* Shape Styles */\n ", "\n\n /* Variant Styles */\n ", "\n\n /* Disabled State */\n &:disabled {\n cursor: not-allowed;\n color: #aaa;\n background: ", ";\n box-shadow: ", ";\n \n ", " {\n border-top-color: #aaa;\n }\n }\n"], ["\n /* Reset and Core Styles */\n border: none;\n outline: none;\n font-weight: 600;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s ease-in-out;\n cursor: pointer;\n width: ", ";\n\n /* Size Styles */\n height: ", ";\n font-size: ", ";\n\n /* Shape Styles */\n ", "\n\n /* Variant Styles */\n ", "\n\n /* Disabled State */\n &:disabled {\n cursor: not-allowed;\n color: #aaa;\n background: ", ";\n box-shadow: ", ";\n \n ", " {\n border-top-color: #aaa;\n }\n }\n"])), function (_a) {
var fullWidth = _a.fullWidth;
return (fullWidth ? '100%' : 'auto');
}, function (_a) {
var size = _a.size;
return sizes$7[size].height;
}, function (_a) {
var size = _a.size;
return sizes$7[size].fontSize;
}, function (_a) {
var shape = _a.shape, size = _a.size;
return shape === 'circle'
? styled.css(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n width: ", ";\n border-radius: 50%;\n padding: 0;\n "], ["\n width: ", ";\n border-radius: 50%;\n padding: 0;\n "])), sizes$7[size].circleSize) : styled.css(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["\n padding: ", ";\n border-radius: ", ";\n "], ["\n padding: ", ";\n border-radius: ", ";\n "])), sizes$7[size].padding, sizes$7[size].radius);
}, function (_a) {
var variant = _a.variant, theme = _a.theme;
switch (variant) {
case 'text':
return styled.css(templateObject_7$a || (templateObject_7$a = __makeTemplateObject(["\n background: transparent;\n box-shadow: none;\n color: ", ";\n &:hover:not(:disabled) {\n background: #e0e5ec50;\n }\n &:active:not(:disabled) {\n background: #e0e5ec80;\n }\n "], ["\n background: transparent;\n box-shadow: none;\n color: ", ";\n &:hover:not(:disabled) {\n background: #e0e5ec50;\n }\n &:active:not(:disabled) {\n background: #e0e5ec80;\n }\n "])), theme.colors.primary);
default: // primary & secondary
return styled.css(templateObject_8$9 || (templateObject_8$9 = __makeTemplateObject(["\n background: ", ";\n box-shadow: ", ";\n color: ", ";\n\n &:hover:not(:disabled) {\n color: ", ";\n }\n\n &:active:not(:disabled) {\n box-shadow: ", ";\n color: ", ";\n }\n "], ["\n background: ", ";\n box-shadow: ", ";\n color: ", ";\n\n &:hover:not(:disabled) {\n color: ", ";\n }\n\n &:active:not(:disabled) {\n box-shadow: ", ";\n color: ", ";\n }\n "])), theme.colors.background, theme.shadows.soft, variant === 'primary' ? theme.colors.primary : theme.colors.text, theme.colors.primary, theme.shadows.softInset, theme.colors.primary);
}
}, function (_a) {
var theme = _a.theme;
return theme.colors.background;
}, function (_a) {
var theme = _a.theme;
return theme.shadows.softInset;
}, Spinner$3);
var templateObject_1$d, templateObject_2$d, templateObject_3$d, templateObject_4$d, templateObject_5$d, templateObject_6$d, templateObject_7$a, templateObject_8$9, templateObject_9$7;
/**
* The ultimate neomorphic button, packed with features like icons,
* loading states, multiple shapes, and variants.
*/
var Button = function (_a) {
var children = _a.children, as = _a.as, _b = _a.size, size = _b === void 0 ? 'medium' : _b, _c = _a.variant, variant = _c === void 0 ? 'primary' : _c, _d = _a.shape, shape = _d === void 0 ? 'default' : _d, _e = _a.fullWidth, fullWidth = _e === void 0 ? false : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.loading, loading = _g === void 0 ? false : _g, loadingText = _a.loadingText, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, props = __rest(_a, ["children", "as", "size", "variant", "shape", "fullWidth", "disabled", "loading", "loadingText", "leftIcon", "rightIcon"]);
var isDisabled = disabled || loading;
var content = loading ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Spinner$3, {}), loadingText && jsxRuntime.jsx("span", { children: loadingText })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [leftIcon && jsxRuntime.jsx(ButtonIcon, { children: leftIcon }), children && jsxRuntime.jsx("span", { children: children }), rightIcon && jsxRuntime.jsx(ButtonIcon, { children: rightIcon })] }));
return (jsxRuntime.jsx(framerMotion.motion.div, { whileTap: isDisabled ? {} : { scale: 0.95 }, style: { width: fullWidth ? '100%' : 'auto', display: 'inline-block' }, children: jsxRuntime.jsx(StyledButton, __assign({ as: as, size: size, variant: variant, shape: shape, fullWidth: fullWidth, disabled: isDisabled, hasChildren: !!children }, props, { children: jsxRuntime.jsx(ButtonContent, { children: content }) })) }));
};
// --- Re-usable Spinner ---
var spin$3 = styled.keyframes(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["to { transform: rotate(360deg); }"], ["to { transform: rotate(360deg); }"])));
var Spinner$2 = styled.div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n border: 3px solid rgba(0, 0, 0, 0.2);\n /* 2. Access theme from props */\n border-top-color: ", ";\n border-radius: 50%;\n width: 2.5em;\n height: 2.5em;\n animation: ", " 1s linear infinite;\n"], ["\n border: 3px solid rgba(0, 0, 0, 0.2);\n /* 2. Access theme from props */\n border-top-color: ", ";\n border-radius: 50%;\n width: 2.5em;\n height: 2.5em;\n animation: ", " 1s linear infinite;\n"])), function (_a) {
var theme = _a.theme;
return theme.colors.primary;
}, spin$3);
var LoadingOverlay$1 = styled.div(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n /* 3. Use theme color for background with alpha transparency */\n background: ", "b3; /* b3 is ~70% opacity */\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 10;\n border-radius: ", ";\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n /* 3. Use theme color for background with alpha transparency */\n background: ", "b3; /* b3 is ~70% opacity */\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 10;\n border-radius: ", ";\n"])), function (_a) {
var theme = _a.theme;
return theme.colors.background;
}, function (_a) {
var theme = _a.theme;
return theme.borderRadius;
});
// --- End Spinner ---
var paddings = {
none: '0px',
small: '16px',
medium: '24px',
large: '32px',
};
var CardCover = styled.div(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n width: 100%;\n img {\n display: block;\n width: 100%;\n }\n"], ["\n width: 100%;\n img {\n display: block;\n width: 100%;\n }\n"])));
var CardHeader = styled.div(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n margin-bottom: 16px;\n font-size: 1.25rem;\n font-weight: 600;\n"], ["\n margin-bottom: 16px;\n font-size: 1.25rem;\n font-weight: 600;\n"])));
var CardBody = styled.div.withConfig({
shouldForwardProp: function (prop) { return !['padding'].includes(prop); },
})(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n padding: ", ";\n"], ["\n padding: ", ";\n"])), function (_a) {
var padding = _a.padding;
return paddings[padding];
});
var CardFooter = styled.div(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n margin-top: 16px;\n /* 4. Use a theme color for borders */\n border-top: 1px solid ", "40; /* 40 is ~25% opacity */\n padding-top: 16px;\n"], ["\n margin-top: 16px;\n /* 4. Use a theme color for borders */\n border-top: 1px solid ", "40; /* 40 is ~25% opacity */\n padding-top: 16px;\n"])), function (_a) {
var theme = _a.theme;
return theme.colors.shadowDark;
});
var StyledCard = styled.div.withConfig({
shouldForwardProp: function (prop) { return !['variant', 'bordered', 'hoverable', 'isLoading'].includes(prop); },
})(templateObject_11$4 || (templateObject_11$4 = __makeTemplateObject(["\n position: relative;\n /* 5. Access all theme values from props */\n background: ", ";\n border-radius: ", ";\n color: ", ";\n box-shadow: ", ";\n overflow: hidden;\n transition: all 0.2s ease-in-out;\n\n ", "\n\n ", "\n \n ", "\n"], ["\n position: relative;\n /* 5. Access all theme values from props */\n background: ", ";\n border-radius: ", ";\n color: ", ";\n box-shadow: ", ";\n overflow: hidden;\n transition: all 0.2s ease-in-out;\n\n ", "\n\n ", "\n \n ", "\n"])), function (_a) {
var theme = _a.theme;
return theme.colors.background;
}, function (_a) {
var theme = _a.theme;
return theme.borderRadius;
}, function (_a) {
var theme = _a.theme;
return theme.colors.text;
}, function (_a) {
var variant = _a.variant, theme = _a.theme;
return variant === 'inset' ? theme.shadows.softInset : theme.shadows.soft;
}, function (_a) {
var bordered = _a.bordered, theme = _a.theme;
return bordered && styled.css(templateObject_8$8 || (templateObject_8$8 = __makeTemplateObject(["\n border: 1px solid ", "40;\n "], ["\n border: 1px solid ", "40;\n "])), theme.colors.shadowDark);
}, function (_a) {
var hoverable = _a.hoverable;
return hoverable && styled.css(templateObject_9$6 || (templateObject_9$6 = __makeTemplateObject(["\n cursor: pointer;\n &:hover {\n transform: translateY(-4px);\n /* 6. Make hover shadow theme-aware */\n box-shadow: 10px 10px 20px ", ", -10px -10px 20px ", ";\n }\n "], ["\n cursor: pointer;\n &:hover {\n transform: translateY(-4px);\n /* 6. Make hover shadow theme-aware */\n box-shadow: 10px 10px 20px ", ", -10px -10px 20px ", ";\n }\n "])), function (_a) {
var theme = _a.theme;
return theme.colors.shadowDark;
}, function (_a) {
var theme = _a.theme;
return theme.colors.shadowLight;
});
}, function (_a) {
var isLoading = _a.isLoading;
return isLoading && styled.css(templateObject_10$4 || (templateObject_10$4 = __makeTemplateObject(["\n & > *:not(", ") {\n filter: blur(4px);\n }\n "], ["\n & > *:not(", ") {\n filter: blur(4px);\n }\n "])), LoadingOverlay$1);
});
var templateObject_1$c, templateObject_2$c, templateObject_3$c, templateObject_4$c, templateObject_5$c, templateObject_6$c, templateObject_7$9, templateObject_8$8, templateObject_9$6, templateObject_10$4, templateObject_11$4;
/**
* An advanced neomorphic container with support for covers, headers,
* footers, and loading states.
*/
var Card = function (_a) {
var children = _a.children, as = _a.as, _b = _a.variant, variant = _b === void 0 ? 'outset' : _b, _c = _a.padding, padding = _c === void 0 ? 'medium' : _c, _d = _a.bordered, bordered = _d === void 0 ? false : _d, _e = _a.hoverable, hoverable = _e === void 0 ? false : _e, _f = _a.loading, loading = _f === void 0 ? false : _f, cover = _a.cover, header = _a.header, footer = _a.footer, props = __rest(_a, ["children", "as", "variant", "padding", "bordered", "hoverable", "loading", "cover", "header", "footer"]);
return (jsxRuntime.jsxs(StyledCard, __assign({ as: as, variant: variant, bordered: bordered, hoverable: hoverable, isLoading: loading }, props, { children: [loading && (jsxRuntime.jsx(LoadingOverlay$1, { children: jsxRuntime.jsx(Spinner$2, {}) })), cover && jsxRuntime.jsx(CardCover, { children: cover }), jsxRuntime.jsxs(CardBody, { padding: padding, children: [header && jsxRuntime.jsx(CardHeader, { children: header }), children, footer && jsxRuntime.jsx(CardFooter, { children: footer })] })] })));
};
var sizes$6 = {
small: { height: '36px', fontSize: '14px', padding: '0 12px' },
medium: { height: '48px', fontSize: '16px', padding: '0 16px' },
large: { height: '56px', fontSize: '18px', padding: '0 20px' },
};
// This is the outermost container for the label, input group, and error message
var InputContainer = styled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 8px;\n width: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n gap: 8px;\n width: ", ";\n"])), function (_a) {
var fullWidth = _a.fullWidth;
return (fullWidth ? '100%' : 'auto');
});
var StyledLabel = styled.label(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n font-size: 14px;\n /* 2. Access theme from props */\n color: ", ";\n font-weight: 500;\n"], ["\n font-size: 14px;\n /* 2. Access theme from props */\n color: ", ";\n font-weight: 500;\n"])), function (_a) {
var theme = _a.theme;
return theme.colors.text;
});
var ErrorText = styled.p(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n font-size: 12px;\n color: #e53e3e;\n margin: 0;\n"], ["\n font-size: 12px;\n color: #e53e3e;\n margin: 0;\n"])));
// This container is only used when addons are present
var InputGroupWrapper = styled.div(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n display: flex;\n align-items: stretch; // Ensures children have same height\n width: 100%;\n\n /* --- STYLING FIX FOR SEAMLESS ADDONS --- */\n\n /* Flatten the right side of the input when it's not the last element */\n & > div:first-child:not(:last-child) {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n \n /* Flatten the left side of the addon when it comes after the input */\n & > .input-addon:last-child:not(:first-child) {\n margin-left: -2px; /* Overlap to hide seams */\n z-index: 1;\n\n & > div, & > div > button { // Target the Button's motion.div and the button itself\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n }\n\n /* Flatten the right side of the addon when it comes before the input */\n & > .input-addon:first-child:not(:last-child) {\n margin-right: -2px;\n z-index: 1;\n\n & > div, & > div > button {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n }\n"], ["\n display: flex;\n align-items: stretch; // Ensures children have same height\n width: 100%;\n\n /* --- STYLING FIX FOR SEAMLESS ADDONS --- */\n\n /* Flatten the right side of the input when it's not the last element */\n & > div:first-child:not(:last-child) {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n \n /* Flatten the left side of the addon when it comes after the input */\n & > .input-addon:last-child:not(:first-child) {\n margin-left: -2px; /* Overlap to hide seams */\n z-index: 1;\n\n & > div, & > div > button { // Target the Button's motion.div and the button itself\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n }\n\n /* Flatten the right side of the addon when it comes before the input */\n & > .input-addon:first-child:not(:last-child) {\n margin-right: -2px;\n z-index: 1;\n\n & > div, & > div > button {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n }\n"])));
var InputAddon = styled.div(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n display: flex;\n align-items: stretch;\n"], ["\n display: flex;\n align-items: stretch;\n"])));
// This is the main neomorphic element
var InputInnerWrapper = styled.div(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n width: 100%;\n position: relative; // Needed for z-index context with addons\n /* 3. Access all theme values from props */\n background: ", ";\n border-radius: ", ";\n box-shadow: ", ";\n transition: box-shadow 0.2s ease-in-out;\n height: ", ";\n padding: ", ";\n gap: 8px;\n\n ", "\n \n &:focus-within {\n z-index: 2; // Bring input to the front on focus\n box-shadow: ", ", 0 0 0 2px ", "40;\n }\n"], ["\n display: flex;\n align-items: center;\n width: 100%;\n position: relative; // Needed for z-index context with addons\n /* 3. Access all theme values from props */\n background: ", ";\n border-radius: ", ";\n box-shadow: ", ";\n transition: box-shadow 0.2s ease-in-out;\n height: ", ";\n padding: ", ";\n gap: 8px;\n\n ", "\n \n &:focus-within {\n z-index: 2; // Bring input to the front on focus\n box-shadow: ", ", 0 0 0 2px ", "40;\n }\n"])), function (_a) {
var theme = _a.theme;
return theme.colors.background;
}, function (_a) {
var theme = _a.theme;
return theme.borderRadius;
}, function (_a) {
var theme = _a.theme;
return theme.shadows.softInset;
}, function (_a) {
var size = _a.size;
return sizes$6[size].height;
}, function (_a) {
var size = _a.size;
return sizes$6[size].padding;
}, function (_a) {
var hasError = _a.hasError, theme = _a.theme;
return hasError && styled.css(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n box-shadow: ", ", 0 0 0 2px #e53e3e90 !important;\n "], ["\n box-shadow: ", ", 0 0 0 2px #e53e3e90 !important;\n "])), theme.shadows.softInset);
}, function (_a) {
var theme = _a.theme;
return theme.shadows.softInset;
}, function (_a) {
var hasError = _a.hasError, theme = _a.theme;
return (hasError ? '#e53e3e' : theme.colors.primary);
});
var IconWrapper = styled.span(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n color: ", ";\n"], ["\n display: flex;\n align-items: center;\n color: ", ";\n"])), function (_a) {
var theme = _a.theme;
return theme.colors.text;
});
var InputPrefix = styled(IconWrapper)(templateObject_9$5 || (templateObject_9$5 = __makeTemplateObject([""], [""])));
var InputSuffix = styled(IconWrapper)(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject([""], [""])));
var ClearIcon = styled(IconWrapper)(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject(["\n cursor: pointer;\n font-size: 1.2em;\n color: #aaa;\n &:hover { color: #555; }\n"], ["\n cursor: pointer;\n font-size: 1.2em;\n color: #aaa;\n &:hover { color: #555; }\n"])));
var PasswordToggleIcon = styled(IconWrapper)(templateObject_12$3 || (templateObject_12$3 = __makeTemplateObject(["\n cursor: pointer;\n"], ["\n cursor: pointer;\n"])));
var StyledInput = styled.input(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border: none;\n outline: none;\n background: transparent;\n font-size: inherit;\n color: ", ";\n\n &::placeholder {\n color: #a0a5b0;\n }\n"], ["\n width: 100%;\n height: 100%;\n border: none;\n outline: none;\n background: transparent;\n font-size: inherit;\n color: ", ";\n\n &::placeholder {\n color: #a0a5b0;\n }\n"])), function (_a) {
var theme = _a.theme;
return theme.colors.text;
});
var templateObject_1$b, templateObject_2$b, templateObject_3$b, templateObject_4$b, templateObject_5$b, templateObject_6$b, templateObject_7$8, templateObject_8$7, templateObject_9$5, templateObject_10$3, templateObject_11$3, templateObject_12$3, templateObject_13$2;
/**
* An advanced neomorphic input with support for addons, icons,
* password visibility toggle, and a clear button.
*/
var Input = function (_a) {
var label = _a.label, id = _a.id, _b = _a.inputSize, inputSize = _b === void 0 ? 'medium' : _b, _c = _a.fullWidth, fullWidth = _c === void 0 ? false : _c, _d = _a.error, error = _d === void 0 ? '' : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, type = _a.type, value = _a.value, onChange = _a.onChange, addonBefore = _a.addonBefore, addonAfter = _a.addonAfter, prefix = _a.prefix, suffix = _a.suffix, allowClear = _a.allowClear, props = __rest(_a, ["label", "id", "inputSize", "fullWidth", "error", "disabled", "type", "value", "onChange", "addonBefore", "addonAfter", "prefix", "suffix", "allowClear"]);
var _f = React.useState(false), isPasswordVisible = _f[0], setIsPasswordVisible = _f[1];
var inputId = id || (label ? label.replace(/\s+/g, '-').toLowerCase() : undefined);
var handleClear = function (e) {
var mockEvent = __assign(__assign({}, e), { target: __assign(__assign({}, e.target), { value: '' }), currentTarget: __assign(__assign({}, e.currentTarget), { value: '' }) });
onChange === null || onChange === void 0 ? void 0 : onChange(mockEvent);
};
var isPassword = type === 'password';
var inputType = isPassword ? (isPasswordVisible ? 'text' : 'password') : type;
var renderSuffix = function () {
if (isPassword) {
return jsxRuntime.jsx(PasswordToggleIcon, { onClick: function () { return setIsPasswordVisible(!isPasswordVisible); }, children: isPasswordVisible ? jsxRuntime.jsx(fa.FaEyeSlash, {}) : jsxRuntime.jsx(fa.FaEye, {}) });
}
if (allowClear && value) {
return jsxRuntime.jsx(ClearIcon, { onClick: handleClear, children: "\u00D7" });
}
return suffix ? jsxRuntime.jsx(InputSuffix, { children: suffix }) : null;
};
var inputElement = (jsxRuntime.jsxs(InputInnerWrapper, { size: inputSize, hasError: !!error, disabled: disabled, children: [prefix && jsxRuntime.jsx(InputPrefix, { children: prefix }), jsxRuntime.jsx(StyledInput, __assign({ id: inputId, type: inputType, disabled: disabled, value: value, onChange: onChange }, props)), renderSuffix()] }));
return (jsxRuntime.jsxs(InputContainer, { fullWidth: fullWidth, children: [label && jsxRuntime.jsx(StyledLabel, { htmlFor: inputId, children: label }), addonBefore || addonAfter ? (jsxRuntime.jsxs(InputGroupWrapper, { children: [addonBefore && jsxRuntime.jsx(InputAddon, { className: "input-addon", children: addonBefore }), inputElement, addonAfter && jsxRuntime.jsx(InputAddon, { className: "input-addon", children: addonAfter })] })) : (inputElement), error && jsxRuntime.jsx(ErrorText, { children: error })] }));
};
var sizes$5 = {
small: '400px',
medium: '600px',
large: '800px',
};
var ModalWrapper = styled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: ", ";\n padding-top: ", ";\n z-index: 1000;\n"], ["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: ", ";\n padding-top: ", ";\n z-index: 1000;\n"])), function (_a) {
var position = _a.position;
return (position === 'center' ? 'center' : 'flex-start');
}, function (_a) {
var position = _a.position;
return (position === 'top' ? '5vh' : '0');
});
var ModalBackdrop = styled(framerMotion.motion.div)(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.5); /* This generally works for both themes */\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.5); /* This generally works for both themes */\n"])));
var ModalBody = styled.div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n /* Add any specific body styling here */\n"], ["\n /* Add any specific body styling here */\n"])));
var ModalContent = styled(framerMotion.motion.div)(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n position: relative;\n z-index: 1001;\n width: 90vw;\n max-width: ", ";\n\n ", "\n"], ["\n position: relative;\n z-index: 1001;\n width: 90vw;\n max-width: ", ";\n\n ", "\n"])), function (_a) {
var size = _a.size;
return sizes$5[size];
}, function (_a) {
var fullScreen = _a.fullScreen;
return fullScreen && styled.css(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n width: 100vw;\n height: 100vh;\n max-width: 100vw;\n border-radius: 0;\n & > div { /* Target the Card inside */\n height: 100%;\n border-radius: 0;\n display: flex;\n flex-direction: column;\n }\n & ", " {\n flex-grow: 1;\n overflow-y: auto;\n }\n "], ["\n width: 100vw;\n height: 100vh;\n max-width: 100vw;\n border-radius: 0;\n & > div { /* Target the Card inside */\n height: 100%;\n border-radius: 0;\n display: flex;\n flex-direction: column;\n }\n & ", " {\n flex-grow: 1;\n overflow-y: auto;\n }\n "])), ModalBody);
});
var ModalHeader = styled.div(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 16px;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 16px;\n"])));
var ModalTitle = styled.h3(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n margin: 0;\n font-size: 20px;\n /* 2. Access theme from props */\n color: ", ";\n"], ["\n margin: 0;\n font-size: 20px;\n /* 2. Access theme from props */\n color: ", ";\n"])), function (_a) {
var theme = _a.theme;
return theme.colors.text;
});
var ModalCloseButton = styled.button(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n background: none;\n border: none;\n font-size: 28px;\n line-height: 1;\n /* 3. Access theme from props */\n color: ", ";\n cursor: pointer;\n padding: 0 4px;\n\n &:hover {\n color: ", ";\n }\n"], ["\n background: none;\n border: none;\n font-size: 28px;\n line-height: 1;\n /* 3. Access theme from props */\n color: ", ";\n cursor: pointer;\n padding: 0 4px;\n\n &:hover {\n color: ", ";\n }\n"])), function (_a) {
var theme = _a.theme;
return theme.colors.text;
}, function (_a) {
var theme = _a.theme;
return theme.colors.primary;
});
var ModalFooter = styled.div(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["\n margin-top: 24px;\n display: flex;\n justify-content: flex-end;\n gap: 12px;\n"], ["\n margin-top: 24px;\n display: flex;\n justify-content: flex-end;\n gap: 12px;\n"])));
var templateObject_1$a, templateObject_2$a, templateObject_3$a, templateObject_4$a, templateObject_5$a, templateObject_6$a, templateObject_7$7, templateObject_8$6, templateObject_9$4;
/**
* An advanced modal with positioning, fullscreen, and scroll-locking capabilities.
*/
var Modal = function (_a) {
var isOpen = _a.isOpen, onClose = _a.onClose, children = _a.children, title = _a.title, _b = _a.size, size = _b === void 0 ? 'medium' : _b, footer = _a.footer, _c = _a.preventBackdropClick, preventBackdropClick = _c === void 0 ? false : _c, _d = _a.position, position = _d === void 0 ? 'center' : _d, _e = _a.fullScreen, fullScreen = _e === void 0 ? false : _e, _f = _a.lockScroll, lockScroll = _f === void 0 ? true : _f;
React.useEffect(function () {
if (isOpen && lockScroll) {
document.body.style.overflow = 'hidden';
}
return function () {
if (lockScroll) {
document.body.style.overflow = 'unset';
}
};
}, [isOpen, lockScroll]);
var handleBackdropClick = function () {
if (!preventBackdropClick) {
onClose();
}
};
return (jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isOpen && (jsxRuntime.jsxs(ModalWrapper, { position: position, children: [jsxRuntime.jsx(ModalBackdrop, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, onClick: handleBackdropClick }), jsxRuntime.jsx(ModalContent, { size: size, fullScreen: fullScreen, initial: { y: position === 'top' ? -50 : 0, scale: 0.9, opacity: 0 }, animate: { y: 0, scale: 1, opacity: 1 }, exit: { y: position === 'top' ? -50 : 0, scale: 0.9, opacity: 0 }, transition: { type: 'spring', stiffness: 300, damping: 30 }, children: jsxRuntime.jsxs(Card, { padding: "large", children: [title && (jsxRuntime.jsxs(ModalHeader, { children: [jsxRuntime.jsx(ModalTitle, { children: title }), jsxRuntime.jsx(ModalCloseButton, { onClick: onClose, children: "\u00D7" })] })), jsxRuntime.jsx(ModalBody, { children: children }), footer && jsxRuntime.jsx(ModalFooter, { children: footer })] }) })] })) }));
};
var getPositionStyles = function (position) {
switch (position) {
case 'bottom':
return styled.css(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n top: calc(100% + 8px);\n left: 50%;\n transform: translateX(-50%);\n &::after {\n bottom: 100%; left: 50%; margin-left: -5px;\n border-color: transparent transparent #333 transparent;\n }\n "], ["\n top: calc(100% + 8px);\n left: 50%;\n transform: translateX(-50%);\n &::after {\n bottom: 100%; left: 50%; margin-left: -5px;\n border-color: transparent transparent #333 transparent;\n }\n "])));
case 'left':
return styled.css(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n top: 50%;\n right: calc(100% + 8px);\n transform: translateY(-50%);\n &::after {\n top: 50%; left: 100%; margin-top: -5px;\n border-color: transparent transparent transparent #333;\n }\n "], ["\n top: 50%;\n right: calc(100% + 8px);\n transform: translateY(-50%);\n &::after {\n top: 50%; left: 100%; margin-top: -5px;\n border-color: transparent transparent transparent #333;\n }\n "])));
case 'right':
return styled.css(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n top: 50%;\n left: calc(100% + 8px);\n transform: translateY(-50%);\n &::after {\n top: 50%; right: 100%; margin-top: -5px;\n border-color: transparent #333 transparent transparent;\n }\n "], ["\n top: 50%;\n left: calc(100% + 8px);\n transform: translateY(-50%);\n &::after {\n top: 50%; right: 100%; margin-top: -5px;\n border-color: transparent #333 transparent transparent;\n }\n "])));
case 'top':
default:
return styled.css(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n bottom: calc(100% + 8px);\n left: 50%;\n transform: translateX(-50%);\n &::after {\n top: 100%; left: 50%; margin-left: -5px;\n border-color: #333 transparent transparent transparent;\n }\n "], ["\n bottom: calc(100% + 8px);\n left: 50%;\n transform: translateX(-50%);\n &::after {\n top: 100%; left: 50%; margin-left: -5px;\n border-color: #333 transparent transparent transparent;\n }\n "])));
}
};
var TooltipWrapper = styled.div(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n position: relative;\n display: inline-flex;\n"], ["\n position: relative;\n display: inline-flex;\n"])));
var TooltipContent = styled(framerMotion.motion.div)(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n position: absolute;\n background-color: #333;\n color: #fff;\n padding: 8px 12px;\n border-radius: 6px;\n font-size: 14px;\n white-space: nowrap;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n z-index: 10;\n \n &::after {\n content: '';\n position: absolute;\n border-width: 5px;\n border-style: solid;\n display: ", ";\n }\n\n ", ";\n"], ["\n position: absolute;\n background-color: #333;\n color: #fff;\n padding: 8px 12px;\n border-radius: 6px;\n font-size: 14px;\n white-space: nowrap;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n z-index: 10;\n \n &::after {\n content: '';\n position: absolute;\n border-width: 5px;\n border-style: solid;\n display: ", ";\n }\n\n ", ";\n"])), function (_a) {
var withArrow = _a.withArrow;
return (withArrow ? 'block' : 'none');
}, function (_a) {
var position = _a.position;
return getPositionStyles(position);
});
var templateObject_1$9, templateObject_2$9, templateObject_3$9, templateObject_4$9, templateObject_5$9, templateObject_6$9;
/**
* An advanced tooltip with multiple triggers, delays, and rich content support.
*/
var Tooltip = function (_a) {
var children = _a.children, content = _a.content, _b = _a.position, position = _b === void 0 ? 'top' : _b, _c = _a.trigger, trigger = _c === void 0 ? 'hover' : _c, isOpen = _a.isOpen, _d = _a.mouseEnterDelay, mouseEnterDelay = _d === void 0 ? 100 : _d, _e = _a.mouseLeaveDelay, mouseLeaveDelay = _e === void 0 ? 200 : _e, _f = _a.withArrow, withArrow = _f === void 0 ? true : _f;
var _g = React.useState(false), isVisible = _g[0], setIsVisible = _g[1];
var enterTimer = React.useRef();
var leaveTimer = React.useRef();
var isControlled = isOpen !== undefined;
var visible = isControlled ? isOpen : isVisible;
var showTooltip = function () {
clearTimeout(leaveTimer.current);
enterTimer.current = setTimeout(function () { return setIsVisible(true); }, mouseEnterDelay);
};
var hideTooltip = function () {
clearTimeout(enterTimer.current);
leaveTimer.current = setTimeout(function () { return setIsVisible(false); }, mouseLeaveDelay);
};
var toggleTooltip = function () {
setIsVisible(!isVisible);
};
React.useEffect(function () {
return function () {
clearTimeout(enterTimer.current);
clearTimeout(leaveTimer.current);
};
}, []);
var triggerProps = {};
if (trigger === 'hover') {
triggerProps.onMouseEnter = showTooltip;
triggerProps.onMouseLeave = hideTooltip;
}
else if (trigger === 'click') {
triggerProps.onClick = toggleTooltip;
}
else if (trigger === 'focus') {
triggerProps.onFocus = showTooltip;
triggerProps.onBlur = hideTooltip;
}
return (jsxRuntime.jsxs(TooltipWrapper, { children: [React.cloneElement(children, triggerProps), jsxRuntime.jsx(framerMotion.AnimatePresence, { children: visible && (jsxRuntime.jsx(TooltipContent, { position: position, withArrow: withArrow, initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10, transition: { duration: 0.1 } }, children: content })) })] }));
};
var sizes$4 = {
small: { wrapperWidth: '40px', wrapperHeight: '22px', knobSize: '16px' },
medium: { wrapperWidth: '50px', wrapperHeight: '28px', knobSize: '20px' },
large: { wrapperWidth: '60px', wrapperHeight: '34px', knobSize: '26px' },
};
var SwitchContainer = styled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n gap: 10px;\n cursor: ", ";\n"], ["\n display: inline-flex;\n align-items: center;\n gap: 10px;\n cursor: ", ";\n"])), function (_a) {
var disabled = _a.disabled;
return (disabled ? 'not-allowed' : 'pointer');
});
var LabelText = styled.span(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n /* 2. Access theme from props */\n color: ", ";\n font-size: 16px;\n font-weight: 500;\n user-select: none; /* Prevents text selection on click */\n"], ["\n /* 2. Access theme from props */\n color: ", ";\n font-size: 16px;\n font-weight: 500;\n user-select: none; /* Prevents text selection on click */\n"])), function (_a) {
var theme = _a.theme;
return theme.colors.text;
});
var SwitchWrapper = styled.div(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n border-radius: 50px;\n display: flex;\n align-items: center;\n padding: 4px;\n box-shadow: ", ";\n transition: background-color 0.2s ease-in-out;\n transform: translateZ(0); /* Promotes to new layer for better rendering */\n\n &[data-checked='true'] {\n justify-content: flex-end;\n background-color: ", ";\n }\n \n ", "\n"], ["\n width: ", ";\n height: ", ";\n border-radius: 50px;\n display: flex;\n align-items: center;\n padding: 4px;\n box-shadow: ", ";\n transition: background-color 0.2s ease-in-out;\n transform: translateZ(0); /* Promotes to new layer for better rendering */\n\n &[data-checked='true'] {\n justify-content: flex-end;\n background-color: ", ";\n }\n \n ", "\n"])), function (_a) {
var size = _a.size;
return sizes$4[size].wrapperWidth;
}, function (_a) {
var size = _a.size;
return sizes$4[size].wrapperHeight;
}, function (_a) {
var theme = _a.theme;
return theme.shadows.softInset;
}, function (_a) {
var theme = _a.theme;
return theme.colors.primary;
}, function (_a) {
var disabled = _a.disabled;
return disabled && styled.css(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n opacity: 0.6;\n "], ["\n opacity: 0.6;\n "])));
});
var spin$2 = styled.keyframes(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["to { transform: rotate(360deg); }"], ["to { transform: rotate(360deg); }"])));
var KnobSpinner = styled.div(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n border: 2px solid rgba(0, 0, 0, 0.2);\n border-top-color: ", ";\n border-radius: 50%;\n width: 60%;\n height: 60%;\n animation: ", " 0.8s linear infinite;\n"], ["\n border: 2px solid rgba(0, 0, 0, 0.2);\n border-top-color: ", ";\n border-radius: 50%;\n width: 60%;\n height: 60%;\n animation: ", " 0.8s linear infinite;\n"])), function (_a) {
var theme = _a.theme;
return theme.colors.primary;
}, spin$2);
var KnobIcon = styled.div(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n color: ", ";\n font-size: 0.6em; /* Scale icon size relative to knob */\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n color: ", ";\n font-size: 0.6em; /* Scale icon size relative to knob */\n"])), function (_a) {
var theme = _a.theme;
return theme.colors.primary;
});
var SwitchKnob = styled(framerMotion.motion.div)(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n /* 3. Make knob theme-aware */\n background-color: ", ";\n border-radius: 50%;\n box-shadow: 3px 3px 6px ", ", -3px -3px 6px ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n"], ["\n width: ", ";\n height: ", ";\n /* 3. Make knob theme-aware */\n background-color: ", ";\n border-radius: 50%;\n box-shadow: 3px 3px 6px ", ", -3px -3px 6px ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n"])), function (_a) {
var size = _a.size;
return sizes$4[size].knobSize;
}, function (_a) {
var size = _a.size;
return sizes$4[size].knobSize;
}, function (_a) {
var theme = _a.theme;
return theme.colors.knobBg;
}, function (_a) {
var theme = _a.theme;
return theme.colors.shadowDark;
}, function (_a) {
var theme = _a.theme;
return theme.colors.shadowLight;
});
var templateObject_1$8, templateObject_2$8, templateObject_3$8, templateObject_4$8, templateObject_5$8, templateObject_6$8, templateObject_7$6, templateObject_8$5;
/**
* An advanced neomorphic switch with loading states and custom icons.
*/
var Switch = function (_a) {
var checked = _a.checked, onChange = _a.onChange, _b = _a.size, size = _b === void 0 ? 'medium' : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.label, label = _d === void 0 ? '' : _d, _e = _a.labelPosition, labelPosition = _e === void 0 ? 'right' : _e, _f = _a.loading, loading = _f === void 0 ? false : _f, onIcon = _a.onIcon, offIcon = _a.offIcon;
var isDisabled = disabled || loading;
var toggleSwitch = function () {
if (!isDisabled) {
onChange(!checked);
}
};
var KnobContent = function () {
if (loading)
return jsxRuntime.jsx(KnobSpinner, {});
if (checked && onIcon)
return jsxRuntime.jsx(KnobIcon, { children: onIcon });
if (!checked && offIcon)
return jsxRuntime.jsx(KnobIcon, { children: offIcon });
return null;
};
var SwitchControl = (jsxRuntime.jsx(SwitchWrapper, { size: size, "data-checked": checked, onClick: toggleSwitch, disabled: isDisabled, children: jsxRuntime.jsx(SwitchKnob, { size: size, layout: true, transition: { type: 'spring', stiffness: 700, damping: 30 }, children: jsxRuntime.jsx(KnobContent, {}) }) }));
return (jsxRuntime.jsxs(SwitchContainer, { onClick: toggleSwitch, disabled: isDisabled, children: [label && labelPosition === 'left' && jsxRuntime.jsx(LabelText, { children: label }), SwitchControl, label && labelPosition === 'right' && jsxRuntime.jsx(LabelText, { children: label })] }));
};
// 2. This helper function now receives the theme to get the primary color
var getStatusColor = function (theme, status) {
switch (status) {
case 'success':
return '#28a745';
case 'error':
return '#dc3545';
case 'normal':
default:
return theme.colors.primary;
}
};
var stripes = styled.keyframes(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n from { background-position: 40px 0; }\n to { background-position: 0 0; }\n"], ["\n from { background-position: 40px 0; }\n to { background-position: 0 0; }\n"])));
var indeterminate = styled.keyframes(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n 0% { left: -100%; }\n 100% { left: 100%; }\n"], ["\n 0% { left: -100%; }\n 100% { left: 100%; }\n"])));
var sizes$3 = {
small: styled.css(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n height: 10px;\n "], ["\n height: 10px;\n "]))),
medium: styled.css(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n height: 16px;\n "], ["\n height: 16px;\n "]))),
};
var ProgressBarWrapper = styled.div(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n position: relative;\n width: 100%;\n /* 3. Access theme from props */\n background-color: ", ";\n border-radius: 10px;\n box-shadow: ", ";\n overflow: hidden;\n\n ", ";\n"], ["\n position: relative;\n width: 100%;\n /* 3. Access theme from props */\n background-color: ", ";\n border-radius: 10px;\n box-shadow: ", ";\n overflow: hidden;\n\n ", ";\n"])), function (_a) {
var theme = _a.theme;
return theme.colors.background;
}, function (_a) {
var theme = _a.theme;
return theme.shadows.softInset;
}, function (_a) {
var size = _a.size;
return sizes$3[size];
});
var ProgressBarFill = styled.div(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n height: 100%;\n border-radius: 10px;\n transition: width 0.3s ease-in-out;\n position: relative;\n overflow: hidden;\n \n /* 4. Use the helper function to set the color */\n background-color: ", ";\n \n ", "\n\n ", "\n"], ["\n height: 100%;\n border-radius: 10px;\n transition: width 0.3s ease-in-out;\n position: relative;\n overflow: hidden;\n \n /* 4. Use the helper function to set the color */\n background-color: ", ";\n \n ", "\n\n ", "\n"])), function (_a) {
var status = _a.status, theme = _a.theme;
return getStatusColor(theme, status);
}, function (_a) {
var variant = _a.variant;
return variant === 'striped' && styled.css(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n background-image: linear-gradient(\n 45deg,\n rgba(255, 255, 255, 0.15) 25%, transparent 25%,\n transparent 50%, rgba(255, 255, 255, 0.15) 50%,\n rgba(255, 255, 255, 0.15) 75%, transparent 75%,\n transparent\n );\n background-size: 40px 40px;\n animation: ", " 2s linear infinite;\n "], ["\n background-image: linear-gradient(\n 45deg,\n rgba(255, 255, 255, 0.15) 25%, transparent 2