@jars-labs/jars-components 1.0.80 → 1.0.81

package/dist/{index-Di2CTm6m.js → index-UZcWaZ0v.js}

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Accordion as Accordion$1, AccordionItem as AccordionItem$1, AccordionControl as AccordionControl$1, AccordionPanel as AccordionPanel$1, ActionIcon as ActionIcon$1, Group, Combobox, useCombobox, Flex, TextInput, Loader as Loader$1, Checkbox as Checkbox$1, Menu as Menu$1, Divider, Modal as Modal$1, Tooltip as Tooltip$1, Box, Tabs as Tabs$1, Pagination as Pagination$1, Radio, SegmentedControl as SegmentedControl$1, Select as Select$1, Stepper as Stepper$1, StepperStep, Progress, Table as Table$1, Textarea as Textarea$1 } from '@mantine/core';
+import { Accordion as Accordion$1, AccordionItem as AccordionItem$1, AccordionControl as AccordionControl$1, AccordionPanel as AccordionPanel$1, ActionIcon as ActionIcon$1, Group, Combobox, useCombobox, Flex, TextInput, Loader as Loader$1, Avatar as Avatar$1, Checkbox as Checkbox$1, Menu as Menu$1, Divider, Modal as Modal$1, Tooltip as Tooltip$1, Box, Tabs as Tabs$1, Pagination as Pagination$1, Radio, SegmentedControl as SegmentedControl$1, Select as Select$1, Stepper as Stepper$1, StepperStep, Progress, Table as Table$1, Textarea as Textarea$1 } from '@mantine/core';
 import React, { useRef, useState, useEffect, forwardRef, useMemo, useLayoutEffect } from 'react';
 import { DateInput as DateInput$1 } from '@mantine/dates';
 import { ToastContainer as ToastContainer$1 } from 'react-toastify';
@@ -59,14 +59,14 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-var styles$p = {"accordion":"Accordion-module_accordion__Nl0Vb","item":"Accordion-module_item__85Qrt","item-neutral":"Accordion-module_item-neutral__c06SU","item-white":"Accordion-module_item-white__l-DtA","chevron":"Accordion-module_chevron__kqKKx","bottom-right":"Accordion-module_bottom-right__2C-t6","control":"Accordion-module_control__92uvC","content":"Accordion-module_content__LkKAo","label":"Accordion-module_label__VkyEF"};
+var styles$q = {"accordion":"Accordion-module_accordion__Nl0Vb","item":"Accordion-module_item__85Qrt","item-neutral":"Accordion-module_item-neutral__c06SU","item-white":"Accordion-module_item-white__l-DtA","chevron":"Accordion-module_chevron__kqKKx","bottom-right":"Accordion-module_bottom-right__2C-t6","control":"Accordion-module_control__92uvC","content":"Accordion-module_content__LkKAo","label":"Accordion-module_label__VkyEF"};
 
 var serverSideRenderSVG = function (_a, children) {
     var width = _a.width, height = _a.height, viewBox = _a.viewBox, fill = _a.fill, rotate = _a.rotate;
     return (jsx("svg", { width: width, height: height, viewBox: viewBox, fill: fill, preserveAspectRatio: "xMidYMid meet", xmlns: "http://www.w3.org/2000/svg", transform: "rotate(".concat(rotate, ")"), children: children }));
 };
 var Icon = function (_a) {
-    var _b = _a.width, width = _b === undefined ? '32px' : _b, _c = _a.height, height = _c === undefined ? '32px' : _c, viewBox = _a.viewBox, _d = _a.fill, fill = _d === undefined ? 'none' : _d, _e = _a.stroke, stroke = _e === undefined ? 'currentColor' : _e, _f = _a.rotate, rotate = _f === undefined ? 0 : _f, _g = _a.style, style = _g === undefined ? {} : _g, children = _a.children;
+    var _b = _a.width, width = _b === undefined ? '32px' : _b, _c = _a.height, height = _c === undefined ? '32px' : _c, viewBox = _a.viewBox, _d = _a.fill, fill = _d === undefined ? 'none' : _d, _e = _a.stroke, stroke = _e === undefined ? 'currentColor' : _e, _f = _a.rotate, rotate = _f === undefined ? 0 : _f, _g = _a.style, style = _g === undefined ? {} : _g, children = _a.children, rest = __rest(_a, ["width", "height", "viewBox", "fill", "stroke", "rotate", "style", "children"]);
     if (typeof window === 'undefined') {
         serverSideRenderSVG({
             width: width,
@@ -108,7 +108,7 @@ var Icon = function (_a) {
         };
         centerSvgInViewBox();
     }, [viewBox]);
-    return (jsx("svg", { ref: svgRef, width: width, height: height, viewBox: viewBox, fill: fill, stroke: stroke, preserveAspectRatio: "xMidYMid meet", style: __assign(__assign({}, style), { transform: "rotate(".concat(rotate, "deg)"), transformOrigin: 'center' }), children: jsx("g", { transform: transform || undefined, children: children }) }));
+    return (jsx("svg", __assign({ ref: svgRef, width: width, height: height, viewBox: viewBox, fill: fill, stroke: stroke, preserveAspectRatio: "xMidYMid meet", style: __assign(__assign({}, style), { transform: "rotate(".concat(rotate, "deg)"), transformOrigin: 'center' }) }, rest, { children: jsx("g", { transform: transform || undefined, children: children }) })));
 };
 Icon.displayName = 'Icon';
 
@@ -131,30 +131,30 @@ var Accordion = function (_a) {
         return child;
     });
     return (jsx(Accordion$1, { variant: "unstyled", chevron: jsx(Chevron, { rotate: 270, width: "24px", height: "24px" }), chevronSize: 24, classNames: {
-            root: styles$p.accordion,
-            chevron: "".concat(styles$p.chevron, " ").concat(styles$p[customChevronPosition]),
+            root: styles$q.accordion,
+            chevron: "".concat(styles$q.chevron, " ").concat(styles$q[customChevronPosition]),
         }, multiple: true, children: childrenWithColor }));
 };
 Accordion.displayName = 'Accordion';
 var AccordionItem = function (_a) {
     var children = _a.children, value = _a.value, _b = _a.bgColor, bgColor = _b === undefined ? 'neutral' : _b, props = __rest(_a, ["children", "value", "bgColor"]);
     return (jsx(AccordionItem$1, __assign({ classNames: {
-            item: "".concat(styles$p.item, " ").concat(bgColor === 'white' ? styles$p['item-white'] : styles$p['item-neutral']),
+            item: "".concat(styles$q.item, " ").concat(bgColor === 'white' ? styles$q['item-white'] : styles$q['item-neutral']),
         }, value: value }, props, { children: children })));
 };
 AccordionItem.displayName = 'AccordionItem';
 var AccordionControl = function (_a) {
     var children = _a.children;
-    return (jsx(AccordionControl$1, { classNames: { label: styles$p.label, control: styles$p.control }, children: children }));
+    return (jsx(AccordionControl$1, { classNames: { label: styles$q.label, control: styles$q.control }, children: children }));
 };
 AccordionControl.displayName = 'AccordionControl';
 var AccordionPanel = function (_a) {
     var children = _a.children;
-    return (jsx(AccordionPanel$1, { classNames: { content: styles$p.content }, children: children }));
+    return (jsx(AccordionPanel$1, { classNames: { content: styles$q.content }, children: children }));
 };
 AccordionPanel.displayName = 'AccordionPanel';
 
-var styles$o = {"root":"ActionIcon-module_root__orJKP"};
+var styles$p = {"root":"ActionIcon-module_root__orJKP"};
 
 /**
  * ActionIcon component to display an icon with a clickable action.
@@ -173,7 +173,7 @@ var styles$o = {"root":"ActionIcon-module_root__orJKP"};
 var ActionIcon = forwardRef(function (_a, ref) {
     var onClick = _a.onClick, _b = _a.radius, radius = _b === undefined ? 'xl' : _b, _c = _a.color, color = _c === undefined ? 'var(--color-neutral-200)' : _c, _d = _a.variant, variant = _d === undefined ? 'filled' : _d, _e = _a.size, size = _e === undefined ? 'md' : _e, _f = _a.disabled, disabled = _f === undefined ? false : _f, children = _a.children, rest = __rest(_a, ["onClick", "radius", "color", "variant", "size", "disabled", "children"]);
     return (jsx(ActionIcon$1, __assign({ onClick: onClick && onClick, radius: radius, variant: variant, size: size, disabled: disabled, classNames: {
-            root: styles$o.root,
+            root: styles$p.root,
         }, color: color, ref: ref }, rest, { children: jsx(Group, { children: children }) })));
 });
 ActionIcon.displayName = 'ActionIcon';
@@ -183,7 +183,7 @@ var Animation = function (_a) {
     var refVector = useRef(null);
     var _b = useState(null), lottie = _b[0], setLottie = _b[1];
     useEffect(function () {
-        import('./lottie-CAeceDXT.js').then(function (n) { return n.l; }).then(function (Lottie) { return setLottie(Lottie.default); });
+        import('./lottie-y_cAn6IW.js').then(function (n) { return n.l; }).then(function (Lottie) { return setLottie(Lottie.default); });
     }, []);
     useEffect(function () {
         if (lottie && refVector.current) {
@@ -201,7 +201,7 @@ var Animation = function (_a) {
 };
 Animation.displayName = 'Animation';
 
-var styles$n = {"dropdown":"Dropdown-module_dropdown__Pf3Aj","option":"Dropdown-module_option__5-7L7"};
+var styles$o = {"dropdown":"Dropdown-module_dropdown__Pf3Aj","option":"Dropdown-module_option__5-7L7"};
 
 /**
  *
@@ -241,7 +241,7 @@ var Dropdown = function (_a) {
                         store.selectOption(index);
                         onOptionSubmit === null || onOptionSubmit === undefined ? undefined : onOptionSubmit(option);
                         closeOnSelect && store.closeDropdown();
-                    }, className: styles$n.option, children: option }, index));
+                    }, className: styles$o.option, children: option }, index));
             }
             return option;
         });
@@ -249,7 +249,7 @@ var Dropdown = function (_a) {
     return (jsxs(Combobox, __assign({ store: store, onOptionSubmit: function (value) {
             onOptionSubmit === null || onOptionSubmit === undefined ? undefined : onOptionSubmit(value);
             closeOnSelect && store.closeDropdown();
-        } }, rest, { children: [jsx(Combobox.Target, { children: jsx(Flex, { w: "100%", children: typeof children === 'function' ? children(store) : children }) }), jsxs(Combobox.Dropdown, { classNames: { dropdown: styles$n.dropdown }, children: [jsx(Combobox.Options, { mah: maxHeight, style: { overflow: maxHeight ? 'auto' : 'unset' }, children: renderOptions(options, onOptionSubmit) }), footer && (jsx(Combobox.Footer, { children: typeof footer === 'function' ? footer(store) : footer }))] })] })));
+        } }, rest, { children: [jsx(Combobox.Target, { children: jsx(Flex, { w: "100%", children: typeof children === 'function' ? children(store) : children }) }), jsxs(Combobox.Dropdown, { classNames: { dropdown: styles$o.dropdown }, children: [jsx(Combobox.Options, { mah: maxHeight, style: { overflow: maxHeight ? 'auto' : 'unset' }, children: renderOptions(options, onOptionSubmit) }), footer && (jsx(Combobox.Footer, { children: typeof footer === 'function' ? footer(store) : footer }))] })] })));
 };
 Dropdown.displayName = 'Dropdown';
 Dropdown.Option = Combobox.Option;
@@ -358,7 +358,11 @@ function requireClassnames () {
 var classnamesExports = requireClassnames();
 var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
 
-var styles$m = {"container":"Input-module_container__zzWGm","input":"Input-module_input__aRXjR","inputError":"Input-module_inputError__s3cRz","inputLeftIcon":"Input-module_inputLeftIcon__gObSe","inputRightIcon":"Input-module_inputRightIcon__hWB1a","label":"Input-module_label__HtZ2L","labelFocused":"Input-module_labelFocused__3-p5R","labelError":"Input-module_labelError__MA8Ti","labelDisabled":"Input-module_labelDisabled__lhjNw","description":"Input-module_description__Q1Rbw","error":"Input-module_error__yiAgw","errorVisible":"Input-module_errorVisible__IS7J2","errorHidden":"Input-module_errorHidden__8-hAw","errorText":"Input-module_errorText__wKZ67","leftSection":"Input-module_leftSection__YyGeo","rightSection":"Input-module_rightSection__zMH-z"};
+var styles$n = {"container":"Input-module_container__zzWGm","input":"Input-module_input__aRXjR","inputError":"Input-module_inputError__s3cRz","inputLeftIcon":"Input-module_inputLeftIcon__gObSe","inputRightIcon":"Input-module_inputRightIcon__hWB1a","label":"Input-module_label__HtZ2L","labelFocused":"Input-module_labelFocused__3-p5R","labelError":"Input-module_labelError__MA8Ti","labelDisabled":"Input-module_labelDisabled__lhjNw","description":"Input-module_description__Q1Rbw","error":"Input-module_error__yiAgw","errorVisible":"Input-module_errorVisible__IS7J2","errorHidden":"Input-module_errorHidden__8-hAw","errorText":"Input-module_errorText__wKZ67","leftSection":"Input-module_leftSection__YyGeo","rightSection":"Input-module_rightSection__zMH-z"};
+
+var inputWrapperSlotElement = { component: 'div' };
+var inputDescriptionProps = __assign({ className: styles$n.description }, inputWrapperSlotElement);
+var inputErrorProps = __assign({ className: styles$n.error }, inputWrapperSlotElement);
 
 var Info = function (_a) {
     var width = _a.width, height = _a.height, viewBox = _a.viewBox, _b = _a.stroke, stroke = _b === undefined ? 'currentColor' : _b, _c = _a.strokeWidth, strokeWidth = _c === undefined ? 1.5 : _c;
@@ -366,7 +370,7 @@ var Info = function (_a) {
 };
 Info.displayName = 'Info';
 
-var styles$l = {"text":"Text-module_text__3xRq3","h1":"Text-module_h1__RkLfx","h2":"Text-module_h2__fAm7L","h3":"Text-module_h3__o11c2","h4":"Text-module_h4__RIwZg","m":"Text-module_m__nlfmp","s":"Text-module_s__t9q3d","xs":"Text-module_xs__ZU2jV","xxs":"Text-module_xxs__hmZHQ","bold":"Text-module_bold__N75tZ","medium":"Text-module_medium__Q8kf4","regular":"Text-module_regular__-EdPk"};
+var styles$m = {"text":"Text-module_text__3xRq3","h1":"Text-module_h1__RkLfx","h2":"Text-module_h2__fAm7L","h3":"Text-module_h3__o11c2","h4":"Text-module_h4__RIwZg","m":"Text-module_m__nlfmp","s":"Text-module_s__t9q3d","xs":"Text-module_xs__ZU2jV","xxs":"Text-module_xxs__hmZHQ","bold":"Text-module_bold__N75tZ","medium":"Text-module_medium__Q8kf4","regular":"Text-module_regular__-EdPk"};
 
 var elementType = {
     h1: 'h1',
@@ -377,7 +381,7 @@ var elementType = {
 var Text = React.forwardRef(function (props, ref) {
     var as = props.as, children = props.children, className = props.className, color = props.color, style = props.style, variant = props.variant, weight = props.weight, rest = __rest(props, ["as", "children", "className", "color", "style", "variant", "weight"]);
     var combinedStyle = __assign(__assign({}, style), { color: color });
-    var combinedClassName = classNames(className, styles$l['text'], styles$l[variant || ''], styles$l[weight || '']);
+    var combinedClassName = classNames(className, styles$m['text'], styles$m[variant || ''], styles$m[weight || '']);
     return React.createElement(as || elementType[variant] || 'p', __assign({ ref: ref, className: combinedClassName, style: combinedStyle }, rest), children);
 });
 Text.displayName = 'Text';
@@ -447,19 +451,19 @@ var Input = function (_a) {
     var showLabel = !hideLabel && (isFocused || value.trim());
     var placeHolderValue = placeholder && isFocused ? placeholder : (label !== null && label !== undefined ? label : placeholder);
     var ErrorSection = useMemo(function () {
-        return holdSpace && (jsxs(Flex, { className: classNames(styles$m.error, error ? styles$m.errorVisible : styles$m.errorHidden), gap: 4, ml: 0, style: { alignItems: 'flex-start' }, children: [jsx(Flex, { style: { flexShrink: 0 }, children: jsx(Info, { width: "18px", height: "18px", viewBox: "0 0 24 24", stroke: "var(--color-red-300)" }) }), jsx(Text, { variant: "xs", className: classNames(styles$m.errorText), as: "span", children: capitalizeFirstSentenceLetter(error) })] }));
+        return holdSpace && (jsxs(Flex, { className: classNames(styles$n.error, error ? styles$n.errorVisible : styles$n.errorHidden), gap: 4, ml: 0, style: { alignItems: 'flex-start' }, children: [jsx(Flex, { style: { flexShrink: 0 }, children: jsx(Info, { width: "18px", height: "18px", viewBox: "0 0 24 24", stroke: "var(--color-red-300)" }) }), jsx(Text, { variant: "xs", className: classNames(styles$n.errorText), as: "span", children: capitalizeFirstSentenceLetter(error) })] }));
     }, [error]);
-    return (jsxs("div", { className: styles$m.container, children: [showLabel && (jsx("label", { className: classNames(styles$m.label, (_b = {},
-                    _b[styles$m.labelError] = error && !isFocused,
-                    _b[styles$m.labelFocused] = isFocused || isHovered,
-                    _b[styles$m.labelDisabled] = disabled,
+    return (jsxs("div", { className: styles$n.container, children: [showLabel && (jsx("label", { className: classNames(styles$n.label, (_b = {},
+                    _b[styles$n.labelError] = error && !isFocused,
+                    _b[styles$n.labelFocused] = isFocused || isHovered,
+                    _b[styles$n.labelDisabled] = disabled,
                     _b)), children: label })), jsx("div", { onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, onFocus: function () { return setIsFocused(true); }, onBlur: function () { return setIsFocused(false); }, children: jsx(TextInput, __assign({ classNames: {
-                        input: classNames(styles$m.input, (_c = {},
-                            _c[styles$m.inputLeftIcon] = leftSection,
-                            _c[styles$m.inputRightIcon] = rightSection,
-                            _c[styles$m.inputError] = error,
+                        input: classNames(styles$n.input, (_c = {},
+                            _c[styles$n.inputLeftIcon] = leftSection,
+                            _c[styles$n.inputRightIcon] = rightSection,
+                            _c[styles$n.inputError] = error,
                             _c)),
-                    }, placeholder: placeHolderValue, name: name, error: ErrorSection, description: !error && jsx(Text, { variant: "xs", children: description }), descriptionProps: { className: styles$m.description }, errorProps: { className: styles$m.error }, inputWrapperOrder: ['label', 'input', 'description', 'error'], value: value, onChange: onChange, leftSection: leftSection, rightSection: rightSection, leftSectionProps: { className: styles$m.leftSection }, rightSectionProps: { className: styles$m.rightSection }, type: type, disabled: disabled }, rest)) })] }));
+                    }, placeholder: placeHolderValue, name: name, error: ErrorSection, description: !error && jsx(Text, { variant: "xs", children: description }), descriptionProps: inputDescriptionProps, errorProps: inputErrorProps, inputWrapperOrder: ['label', 'input', 'description', 'error'], value: value, onChange: onChange, leftSection: leftSection, rightSection: rightSection, leftSectionProps: { className: styles$n.leftSection }, rightSectionProps: { className: styles$n.rightSection }, type: type, disabled: disabled }, rest)) })] }));
 };
 Input.displayName = 'Input';
 
@@ -544,12 +548,40 @@ var Autocomplete = function (_a) {
 };
 Autocomplete.displayName = 'Autocomplete';
 
+var styles$l = {"avatar":"Avatar-module_avatar__QJpdG","placeholder":"Avatar-module_placeholder__9AtPN"};
+
 var AvatarPlaceholder = function (_a) {
-    var width = _a.width, height = _a.height, viewBox = _a.viewBox, rotate = _a.rotate;
-    return (jsxs(Icon, { width: width, height: height, viewBox: viewBox, rotate: rotate, stroke: "none", children: [jsx("ellipse", { cx: "11.755", cy: "5.818", fill: "var(--color-tertiary-200)", rx: "5.878", ry: "5.818" }), jsx("path", { fill: "var(--color-primary-300)", d: "M24 24H12 0c0-6.56 5.373-11.879 12-11.879s12 5.319 12 11.88z" })] }));
+    var width = _a.width, height = _a.height, _b = _a.viewBox, viewBox = _b === undefined ? '0 0 24 24' : _b, rotate = _a.rotate, rest = __rest(_a, ["width", "height", "viewBox", "rotate"]);
+    return (jsxs(Icon, __assign({ stroke: "none", width: width, height: height, viewBox: viewBox, rotate: rotate }, rest, { children: [jsx("ellipse", { cx: "11.755", cy: "5.818", fill: "var(--color-tertiary-200)", rx: "5.878", ry: "5.818" }), jsx("path", { fill: "var(--color-primary-300)", d: "M24 24H12 0c0-6.56 5.373-11.879 12-11.879s12 5.319 12 11.88z" })] })));
 };
 AvatarPlaceholder.displayName = 'AvatarPlaceholder';
 
+var sizeMapping = {
+    small: '32px',
+    medium: '48px',
+    large: '112px',
+    extraLarge: '150px',
+};
+var placeholderSizeMapping = {
+    small: '14px',
+    medium: '22px',
+    large: '46px',
+    extraLarge: '60px',
+};
+var Avatar = function (_a) {
+    var src = _a.src, alt = _a.alt, _b = _a.size, size = _b === undefined ? 'medium' : _b, testId = _a.testId, rest = __rest(_a, ["src", "alt", "size", "testId"]);
+    return (jsx(Avatar$1, __assign({ src: src, alt: alt, "data-testid": testId, radius: "xl", variant: "outline", styles: {
+            root: {
+                minWidth: sizeMapping[size],
+                minHeight: sizeMapping[size],
+            },
+        }, classNames: {
+            root: styles$l.avatar,
+            placeholder: styles$l.placeholder,
+        } }, rest, { children: jsx(AvatarPlaceholder, { role: "img", "aria-label": alt, "data-testid": testId ? "".concat(testId, "-placeholder") : undefined, width: placeholderSizeMapping[size], height: placeholderSizeMapping[size] }) })));
+};
+Avatar.displayName = 'Avatar';
+
 var badgeVariantMap = {
     notes: {
         backgroundColor: 'var(--color-neutral-100)',
@@ -834,10 +866,10 @@ var DateInput = function (_a) {
     var showLabel = !hideLabel && (isFocused || value);
     var placeHolderValue = placeholder && isFocused ? placeholder : (label !== null && label !== undefined ? label : placeholder);
     var ErrorSection = useMemo(function () {
-        return holdSpace && (jsxs(Flex, { className: styles$m.error, gap: 4, ml: 16, style: {
+        return holdSpace && (jsxs(Flex, { className: styles$n.error, gap: 4, ml: 16, style: {
                 visibility: error ? 'visible' : 'hidden',
                 alignItems: 'flex-start',
-            }, children: [jsx(Flex, { style: { flexShrink: 0 }, children: jsx(Info, { width: "18px", height: "18px", viewBox: "0 0 24 24", stroke: "var(--color-red-300)" }) }), jsx(Text, { variant: "xs", className: classNames(styles$m.errorText), children: capitalizeFirstSentenceLetter(error || '') })] }));
+            }, children: [jsx(Flex, { style: { flexShrink: 0 }, children: jsx(Info, { width: "18px", height: "18px", viewBox: "0 0 24 24", stroke: "var(--color-red-300)" }) }), jsx(Text, { variant: "xs", className: classNames(styles$n.errorText), children: capitalizeFirstSentenceLetter(error || '') })] }));
     }, [error, holdSpace]);
     var handleBlur = function (e) {
         setIsFocused(false);
@@ -845,16 +877,16 @@ var DateInput = function (_a) {
             onBlur(e);
         }
     };
-    return (jsxs("div", { className: styles$m.container, children: [showLabel && (jsx("label", { className: classNames(styles$m.label, (_b = {},
-                    _b[styles$m.labelError] = error && !isFocused,
-                    _b[styles$m.labelFocused] = isFocused || isHovered,
-                    _b[styles$m.labelDisabled] = disabled,
+    return (jsxs("div", { className: styles$n.container, children: [showLabel && (jsx("label", { className: classNames(styles$n.label, (_b = {},
+                    _b[styles$n.labelError] = error && !isFocused,
+                    _b[styles$n.labelFocused] = isFocused || isHovered,
+                    _b[styles$n.labelDisabled] = disabled,
                     _b)), children: label })), jsx("div", { onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, onFocus: function () { return setIsFocused(true); }, onBlur: function () { return setIsFocused(false); }, children: jsx(DateInput$1, __assign({ name: name, classNames: {
-                        input: classNames(styles$m.input, (_c = {},
-                            _c[styles$m.inputError] = error,
-                            _c[styles$m.inputRightIcon] = true,
+                        input: classNames(styles$n.input, (_c = {},
+                            _c[styles$n.inputError] = error,
+                            _c[styles$n.inputRightIcon] = true,
                             _c)),
-                    }, valueFormat: "MM/DD/YYYY", dateParser: dateParser, rightSection: jsx(Calendar, { stroke: "var(--color-neutral-600)", width: "18px", height: "18px", viewBox: "0 0 24 24" }), rightSectionProps: { className: styles$m.rightSection }, placeholder: placeHolderValue, value: value, onChange: onChange, onBlur: handleBlur, error: ErrorSection, inputWrapperOrder: ['label', 'input', 'error'], disabled: disabled }, rest)) })] }));
+                    }, valueFormat: "MM/DD/YYYY", dateParser: dateParser, rightSection: jsx(Calendar, { stroke: "var(--color-neutral-600)", width: "18px", height: "18px", viewBox: "0 0 24 24" }), rightSectionProps: { className: styles$n.rightSection }, placeholder: placeHolderValue, value: value, onChange: onChange, onBlur: handleBlur, error: ErrorSection, errorProps: inputErrorProps, inputWrapperOrder: ['label', 'input', 'error'], disabled: disabled }, rest)) })] }));
 };
 DateInput.displayName = 'DateInput';
 
@@ -1338,17 +1370,17 @@ var MultiselectInternal = function (_a) {
                     }, onClick: function (e) { return e.stopPropagation(); } }))] }));
     };
     PillAndSearchSection.displayName = 'PillAndSearchSection';
-    var ErrorSection = (jsxs(Flex, { className: styles$m.error, gap: 4, ml: 16, mt: 8, style: { visibility: error ? 'visible' : 'hidden' }, children: [jsx(Info, { width: "18px", height: "18px", viewBox: "0 0 24 24", stroke: "var(--color-red-300)" }), jsx(Text, { variant: "xs", className: classNames(styles$m.errorText), children: error })] }));
-    var DescriptionSection = (jsx(Flex, { className: styles$m.description, gap: 4, ml: 16, mt: 8, style: { visibility: description ? 'visible' : 'hidden' }, children: jsx(Text, { variant: "xs", children: description }) }));
+    var ErrorSection = (jsxs(Flex, { className: styles$n.error, gap: 4, ml: 16, mt: 8, style: { visibility: error ? 'visible' : 'hidden' }, children: [jsx(Info, { width: "18px", height: "18px", viewBox: "0 0 24 24", stroke: "var(--color-red-300)" }), jsx(Text, { variant: "xs", className: classNames(styles$n.errorText), children: error })] }));
+    var DescriptionSection = (jsx(Flex, { className: styles$n.description, gap: 4, ml: 16, mt: 8, style: { visibility: description ? 'visible' : 'hidden' }, children: jsx(Text, { variant: "xs", children: description }) }));
     var dropdownFooter = function (store) { return (jsxs(Flex, { justify: "flex-end", py: 8, gap: 8, children: [jsx(Button, { variant: "outlined", label: "Clear", size: "small", onClick: handleClear }), jsx(Button, { variant: "filled", label: "Apply", size: "small", onClick: function () { return handleApply(store.closeDropdown); } })] })); };
     return (jsx(Dropdown, { options: dropdownOptions, maxHeight: 300, footer: dropdownFooter, children: function (store) {
             var _a, _b;
             var floatLabel = store.dropdownOpened || hasSelectedOptions;
-            return (jsxs("div", { className: styles$m.container, children: [floatLabel && (jsx("label", { className: classNames(styles$m.label, (_a = {},
-                            _a[styles$m.labelError] = error && !isFocused,
-                            _a[styles$m.labelFocused] = isFocused || isHovered,
-                            _a)), children: label })), jsxs(Box, { className: classNames(styles$m.input, multiselectStyles.input, (_b = {},
-                            _b[styles$m.inputError] = error && !isFocused,
+            return (jsxs("div", { className: styles$n.container, children: [floatLabel && (jsx("label", { className: classNames(styles$n.label, (_a = {},
+                            _a[styles$n.labelError] = error && !isFocused,
+                            _a[styles$n.labelFocused] = isFocused || isHovered,
+                            _a)), children: label })), jsxs(Box, { className: classNames(styles$n.input, multiselectStyles.input, (_b = {},
+                            _b[styles$n.inputError] = error && !isFocused,
                             _b[multiselectStyles.inputFocused] = isFocused || store.dropdownOpened,
                             _b[multiselectStyles.disabled] = disabled,
                             _b)), onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, onClick: function () { return store.toggleDropdown(); }, onFocus: function () { return setIsFocused(true); }, onBlur: handleBlur, tabIndex: 0, children: [jsx(PillAndSearchSection, { store: store, maxPills: maxPills }), jsx(Chevron, { rotate: store.dropdownOpened ? 90 : 270 })] }), error ? ErrorSection : DescriptionSection] }));
@@ -1585,7 +1617,7 @@ var Select = function (_a) {
                         label: styles$4['default-label'],
                         dropdown: styles$4.dropdown,
                         option: styles$4.option,
-                    }, data: data, placeholder: placeHolderValue, value: value, name: name || '', onChange: onChange, comboboxProps: { zIndex: 1000 }, error: ErrorSection, onFocus: function () { return setIsFocused(true); }, onBlur: handleBlur, inputWrapperOrder: ['label', 'input', 'description', 'error'], description: !error && description && jsx(Text, { variant: "xs", children: description }), descriptionProps: { className: styles$4.description }, errorProps: { className: styles$4.error }, rightSection: jsx(Chevron, { rotate: isOpen ? 90 : 270 }), rightSectionPointerEvents: "none", rightSectionProps: {
+                    }, data: data, placeholder: placeHolderValue, value: value, name: name || '', onChange: onChange, comboboxProps: { zIndex: 1000 }, error: ErrorSection, onFocus: function () { return setIsFocused(true); }, onBlur: handleBlur, inputWrapperOrder: ['label', 'input', 'description', 'error'], description: !error && description && jsx(Text, { variant: "xs", children: description }), descriptionProps: __assign({ className: styles$4.description }, inputWrapperSlotElement), errorProps: __assign({ className: styles$4.error }, inputWrapperSlotElement), rightSection: jsx(Chevron, { rotate: isOpen ? 90 : 270 }), rightSectionPointerEvents: "none", rightSectionProps: {
                         className: styles$4.chevron,
                     }, withCheckIcon: false, onDropdownOpen: function () { return setIsOpen(true); }, onDropdownClose: function () { return setIsOpen(false); }, disabled: disabled, searchable: searchable, allowDeselect: false, autoComplete: "new-password", renderOption: renderOption }) })] }));
 };
@@ -1795,16 +1827,16 @@ var Textarea = function (_a) {
     var _j = useState(false), isHovered = _j[0], setIsHovered = _j[1];
     var showLabel = !hideLabel && (isFocused || value.trim());
     var ErrorSection = useMemo(function () {
-        return holdSpace && (jsxs(Flex, { className: styles$m.error, gap: 4, ml: 0, style: { visibility: error ? 'visible' : 'hidden' }, children: [jsx(Info, { width: "18px", height: "18px", viewBox: "0 0 24 24", stroke: "var(--color-red-300)" }), jsx(Text, { variant: "xs", className: classNames(styles$m.errorText), children: error })] }));
+        return holdSpace && (jsxs(Flex, { className: styles$n.error, gap: 4, ml: 0, style: { visibility: error ? 'visible' : 'hidden' }, children: [jsx(Info, { width: "18px", height: "18px", viewBox: "0 0 24 24", stroke: "var(--color-red-300)" }), jsx(Text, { variant: "xs", className: classNames(styles$n.errorText), as: "span", children: capitalizeFirstSentenceLetter(error) })] }));
     }, [error]);
-    return (jsxs("div", { className: styles$m.container, children: [showLabel && (jsx("label", { className: classNames(styles$m.label, (_b = {},
-                    _b[styles$m.labelError] = error && !isFocused,
-                    _b[styles$m.labelFocused] = isFocused || isHovered,
+    return (jsxs("div", { className: styles$n.container, children: [showLabel && (jsx("label", { className: classNames(styles$n.label, (_b = {},
+                    _b[styles$n.labelError] = error && !isFocused,
+                    _b[styles$n.labelFocused] = isFocused || isHovered,
                     _b)), children: label })), jsx("div", { onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, onFocus: function () { return setIsFocused(true); }, onBlur: function () { return setIsFocused(false); }, children: jsx(Textarea$1, __assign({ classNames: {
-                        input: classNames(styles$m.input, (_c = {},
-                            _c[styles$m.inputError] = error,
+                        input: classNames(styles$n.input, (_c = {},
+                            _c[styles$n.inputError] = error,
                             _c)),
-                    }, placeholder: placeholder !== null && placeholder !== undefined ? placeholder : label, name: name, error: ErrorSection, description: !error && jsx(Text, { variant: "xs", children: description }), descriptionProps: { className: styles$m.description }, errorProps: { className: styles$m.error }, inputWrapperOrder: ['label', 'input', 'description', 'error'], value: value, onChange: onChange, autosize: rest.h ? false : rest.autosize, minRows: 2 }, rest, { styles: {
+                    }, placeholder: placeholder !== null && placeholder !== undefined ? placeholder : label, name: name, error: ErrorSection, description: !error && jsx(Text, { variant: "xs", children: description }), descriptionProps: inputDescriptionProps, errorProps: inputErrorProps, inputWrapperOrder: ['label', 'input', 'description', 'error'], value: value, onChange: onChange, autosize: rest.h ? false : rest.autosize, minRows: 2 }, rest, { styles: {
                         input: {
                             height: typeof rest.h === 'string' || typeof rest.h === 'number'
                                 ? rest.h
@@ -2050,5 +2082,5 @@ var World = function (_a) {
 };
 World.displayName = 'World';
 
-export { Bell as $, Accordion as A, Badge as B, Card as C, DateInput as D, EnterCodeInput as E, FileInput as F, Text as G, Textarea as H, IncrementNumber as I, ToastContainer as J, Tooltip as K, Link as L, Message as M, NavBar as N, AIGenerate as O, Pagination as P, AIPrompt as Q, RadioButton as R, SegmentedControl as S, Table as T, AIRedo as U, AISearch as V, Alert as W, Archive as X, Arrow as Y, Attachment as Z, AvatarPlaceholder as _, AccordionItem as a, Calendar as a0, Camera as a1, Cat as a2, Chat as a3, Check as a4, Chevron as a5, ChevronCollapse as a6, Clock as a7, Close as a8, Cloud as a9, Refresh as aA, Remove as aB, Search as aC, Shield as aD, StepIndicator as aE, ThreeDots as aF, ThumbsDown as aG, Tick as aH, Umbrello as aI, Upload as aJ, Visa as aK, Warning as aL, World as aM, capitalizeFirstSentenceLetter as aN, CloudUpload as aa, CreditCard as ab, Delete as ac, Document as ad, Dog as ae, EyeHide as af, EyeShow as ag, Fingerprint as ah, Google as ai, Grid as aj, Hamburger as ak, HappyFace as al, House as am, HouseTime as an, Identification as ao, Info as ap, Location as aq, Mail as ar, Menu as as, MenuTouched as at, Notification as au, Open as av, Pets as aw, Phone as ax, Plaid as ay, Plus as az, AccordionControl as b, AccordionPanel as c, ActionIcon as d, Animation as e, Autocomplete as f, getDefaultExportFromCjs as g, badgeVariantMap as h, Button as i, cardStatusVariantMap as j, CardStatus as k, Checkbox as l, Chip as m, Dropdown as n, FileUpload as o, Input as p, LinkModal as q, Loader as r, Modal as s, Multiselect as t, NavBarSide as u, PasswordInput as v, Select as w, StatusBadge as x, Stepper as y, Tabs as z };
-//# sourceMappingURL=index-Di2CTm6m.js.map
+export { AvatarPlaceholder as $, Accordion as A, Badge as B, Card as C, DateInput as D, EnterCodeInput as E, FileInput as F, Tabs as G, Text as H, IncrementNumber as I, Textarea as J, ToastContainer as K, Link as L, Message as M, NavBar as N, Tooltip as O, Pagination as P, AIGenerate as Q, RadioButton as R, SegmentedControl as S, Table as T, AIPrompt as U, AIRedo as V, AISearch as W, Alert as X, Archive as Y, Arrow as Z, Attachment as _, AccordionItem as a, Bell as a0, Calendar as a1, Camera as a2, Cat as a3, Chat as a4, Check as a5, Chevron as a6, ChevronCollapse as a7, Clock as a8, Close as a9, Plus as aA, Refresh as aB, Remove as aC, Search as aD, Shield as aE, StepIndicator as aF, ThreeDots as aG, ThumbsDown as aH, Tick as aI, Umbrello as aJ, Upload as aK, Visa as aL, Warning as aM, World as aN, capitalizeFirstSentenceLetter as aO, Cloud as aa, CloudUpload as ab, CreditCard as ac, Delete as ad, Document as ae, Dog as af, EyeHide as ag, EyeShow as ah, Fingerprint as ai, Google as aj, Grid as ak, Hamburger as al, HappyFace as am, House as an, HouseTime as ao, Identification as ap, Info as aq, Location as ar, Mail as as, Menu as at, MenuTouched as au, Notification as av, Open as aw, Pets as ax, Phone as ay, Plaid as az, AccordionControl as b, AccordionPanel as c, ActionIcon as d, Animation as e, Autocomplete as f, getDefaultExportFromCjs as g, Avatar as h, badgeVariantMap as i, Button as j, cardStatusVariantMap as k, CardStatus as l, Checkbox as m, Chip as n, Dropdown as o, FileUpload as p, Input as q, LinkModal as r, Loader as s, Modal as t, Multiselect as u, NavBarSide as v, PasswordInput as w, Select as x, StatusBadge as y, Stepper as z };
+//# sourceMappingURL=index-UZcWaZ0v.js.map