no-frills-ui 0.0.14-rc.1 → 0.0.14-rc.3

package/dist/index.js

@@ -252,21 +252,25 @@ const getThemeValue = (key)=>{
 };
 
 const Ellipsis = /*#__PURE__*/ styled("span", {
-    target: "e3amiur0",
+    target: "eot8j4m0",
     label: "Ellipsis"
 })("white-space:nowrap;text-overflow:ellipsis;overflow:hidden;flex:1;");
 const Header$1 = /*#__PURE__*/ styled("div", {
-    target: "e3amiur1",
+    target: "eot8j4m1",
     label: "Header"
 })("padding:10px 15px;line-height:26px;border-bottom:1px solid ", getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR), ";font-size:16px;font-weight:bold;");
 const Body$1 = /*#__PURE__*/ styled("div", {
-    target: "e3amiur2",
+    target: "eot8j4m2",
     label: "Body"
-})("padding:0 15px;margin:20px 0;flex:1;overflow:auto;");
+})("padding:0 15px;margin:20px 0;flex:1;overflow:visible;");
 const Footer$1 = /*#__PURE__*/ styled("div", {
-    target: "e3amiur3",
+    target: "eot8j4m3",
     label: "Footer"
 })("padding:10px 15px;border-top:1px solid ", getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR), ";display:flex;justify-content:flex-end;");
+const ErrorContainer$7 = /*#__PURE__*/ styled("div", {
+    target: "eot8j4m4",
+    label: "ErrorContainer"
+})("color:", getThemeValue(THEME_NAME.ERROR), ";padding-top:3px;font-size:12px;line-height:14px;");
 
 var BADGE_TYPE = /*#__PURE__*/ function(BADGE_TYPE) {
     BADGE_TYPE["PRIMARY"] = "primary";
@@ -322,35 +326,35 @@ const StyledCard = /*#__PURE__*/ styled("div", {
 const Card = /*#__PURE__*/ React.forwardRef(CardComponent);
 
 const Step$1 = /*#__PURE__*/ styled(Card, {
-    target: "e1l2mhfb0",
+    target: "ex87x7i0",
     label: "Step"
 })("transition:all 0.6s ease;overflow:visible;", (props)=>props.open && `margin: 20px 5px;`);
 const StepHeader = /*#__PURE__*/ styled("button", {
-    target: "e1l2mhfb1",
+    target: "ex87x7i1",
     label: "StepHeader"
 })("padding:20px 15px;display:flex;justify-content:space-between;background:none;border:none;border-radius:10px;width:100%;font-size:inherit;color:", getThemeValue(THEME_NAME.TEXT_COLOR_DARK), ";&:focus-visible{box-shadow:0 0 0 4px ", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";}& input{appearance:none;margin:0;}", (props)=>props.open && `border-bottom: 1px solid ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};`, " ", (props)=>props.open && `border-radius: 10px 10px 0 0;`, " ", (props)=>props.disabled && `color: ${getThemeValue(THEME_NAME.DISABLED)};`);
 const HeaderContainer = /*#__PURE__*/ styled("div", {
-    target: "e1l2mhfb2",
+    target: "ex87x7i2",
     label: "HeaderContainer"
 })("display:flex;align-items:center;min-width:40px;& svg{vertical-align:top;margin-right:10px;fill:", (props)=>props.open ? getThemeValue(THEME_NAME.PRIMARY) : props.completed ? getThemeValue(THEME_NAME.SUCCESS) : getThemeValue(THEME_NAME.LIGHT_GREY), ";transform:", (props)=>props.open ? 'scale(0.8)' : 'scale(0.6)', ";transition:all 0.3s ease;min-width:24px;}");
 const ExpandContainer = /*#__PURE__*/ styled("div", {
-    target: "e1l2mhfb3",
+    target: "ex87x7i3",
     label: "ExpandContainer"
 })("display:flex;align-items:center;& svg{vertical-align:top;margin-right:10px;transition:all 0.6s ease;fill:currentColor;}", (props)=>props.open ? `& svg { transform: rotate(180deg); }` : '');
 const StepBody = /*#__PURE__*/ styled("div", {
-    target: "e1l2mhfb4",
+    target: "ex87x7i4",
     label: "StepBody"
 })("transition:all 0.6s ease;overflow:hidden;height:", (props)=>props.height || 0, "px;");
 const AccordionBadge = /*#__PURE__*/ styled(Badge, {
-    target: "e1l2mhfb5",
+    target: "ex87x7i5",
     label: "AccordionBadge"
 })("margin-right:15px;");
 const AccordionStepBody = /*#__PURE__*/ styled("div", {
-    target: "e1l2mhfb6",
+    target: "ex87x7i6",
     label: "AccordionStepBody"
 })("padding:20px 15px;");
 const AccordionStepFooter = /*#__PURE__*/ styled("div", {
-    target: "e1l2mhfb7",
+    target: "ex87x7i7",
     label: "AccordionStepFooter"
 })("display:flex;justify-content:flex-end;padding:10px 15px;border-top:1px solid ", getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR), ";");
 /**
@@ -380,6 +384,7 @@ const AccordionStepFooter = /*#__PURE__*/ styled("div", {
         completed: completed,
         children: [
             /*#__PURE__*/ jsxRuntime.jsxs(StepHeader, {
+                type: "button",
                 open: open,
                 disabled: disabled,
                 onClick: onStepClick,
@@ -518,12 +523,12 @@ const StyledIconButton = /*#__PURE__*/ styled("button", {
 }
 const IconButton = /*#__PURE__*/ React.forwardRef(IconButtonComponent);
 
-const Container$8 = /*#__PURE__*/ styled("span", {
-    target: "eg8hsap0",
+const Container$b = /*#__PURE__*/ styled("span", {
+    target: "e3nd8sw0",
     label: "Container"
 })("padding:5px;padding-left:15px;border-radius:16px;background-color:", getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR), ";display:inline-flex;margin:5px;line-height:20px;align-items:center;");
 const Button$1 = /*#__PURE__*/ styled("button", {
-    target: "eg8hsap1",
+    target: "e3nd8sw1",
     label: "Button"
 })("color:", getThemeValue(THEME_NAME.BACKGROUND), ";background-color:", getThemeValue(THEME_NAME.DISABLED), ";border-radius:50%;border:none;padding:4px;display:inline-flex;margin-left:5px;&:focus-within{outline:4px solid ", getThemeValue(THEME_NAME.ERROR_LIGHT), ";}");
 /**
@@ -543,13 +548,14 @@ const Button$1 = /*#__PURE__*/ styled("button", {
             e.stopPropagation();
         }
     };
-    return /*#__PURE__*/ jsxRuntime.jsxs(Container$8, {
+    return /*#__PURE__*/ jsxRuntime.jsxs(Container$b, {
         ...rest,
         ref: ref,
         onKeyUp: keyUpHandler,
         children: [
             label,
             /*#__PURE__*/ jsxRuntime.jsx(Button$1, {
+                type: "button",
                 onClick: onCloseClick,
                 onKeyDown: buttonKeyDownHandler,
                 "aria-label": closeButtonAriaLabel ?? `Remove ${label}`,
@@ -578,7 +584,7 @@ const DragContext = React.createContext(null);
     target: "ertl9d71",
     label: "DragKnob"
 })("padding-top:8px;cursor:move;touch-action:none;color:", getThemeValue(THEME_NAME.DISABLED), ";");
-/** Container for the children */ const Container$7 = /*#__PURE__*/ styled("div", {
+/** Container for the children */ const Container$a = /*#__PURE__*/ styled("div", {
     target: "ertl9d72",
     label: "Container"
 })("flex:1;");
@@ -820,14 +826,14 @@ const DragContext = React.createContext(null);
                 tabIndex: -1,
                 children: /*#__PURE__*/ jsxRuntime.jsx(CheckCircle, {})
             }),
-            /*#__PURE__*/ jsxRuntime.jsx(Container$7, {
+            /*#__PURE__*/ jsxRuntime.jsx(Container$a, {
                 children: children
             })
         ]
     });
 }
 
-/** Container Component */ const Container$6 = /*#__PURE__*/ styled("div", {
+/** Container Component */ const Container$9 = /*#__PURE__*/ styled("div", {
     target: "e18d6tqk0",
     label: "Container"
 })("flex:1;display:flex;position:relative;flex-wrap:wrap;flex-direction:", (props)=>props.orientation === ORIENTATION.HORIZONTAL ? 'row' : 'column', ";");
@@ -930,7 +936,7 @@ const DragContext = React.createContext(null);
                     setDragOver,
                     i18n
                 },
-                children: /*#__PURE__*/ jsxRuntime.jsx(Container$6, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(Container$9, {
                     ...rest,
                     ref: ref,
                     orientation: orientation,
@@ -957,11 +963,16 @@ const DragContext = React.createContext(null);
 }
 const DragAndDrop = /*#__PURE__*/ React.forwardRef(DragAndDropComponent);
 
+// Container for the ChipInput
+const Container$8 = /*#__PURE__*/ styled("div", {
+    target: "e7l19410",
+    label: "Container"
+})("margin:10px 5px;");
 // Label component for the ChipInput
 const Label$6 = /*#__PURE__*/ styled("label", {
-    target: "ew8m37a0",
+    target: "e7l19411",
     label: "Label"
-})("display:inline-flex;flex-direction:column;flex:1;position:relative;margin:10px 5px;color:inherit;padding:0 8px;border-radius:3px;border:1px solid ", getThemeValue(THEME_NAME.BORDER_COLOR), ";background-color:", getThemeValue(THEME_NAME.BACKGROUND), ";width:", (props)=>typeof props.width === 'number' ? `${props.width}px` : props.width || '250px', ";max-width:100%;&:has(:focus),&:has(:active){border-color:", getThemeValue(THEME_NAME.PRIMARY), ";box-shadow:0 0 0 4px ", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";}&:has(:focus) > span,&:has(:active) > span{color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:has(:disabled){border-color:", getThemeValue(THEME_NAME.DISABLED_BORDER), ";background-color:", getThemeValue(THEME_NAME.DISABLED_BACKGROUND), ";}&:has(:disabled) > span{color:", getThemeValue(THEME_NAME.DISABLED), ";}&:has(:focus:invalid){border-color:", getThemeValue(THEME_NAME.ERROR), ";box-shadow:0 0 0 4px ", getThemeValue(THEME_NAME.ERROR_LIGHT), ";}", (props)=>props.touched ? `
+})("display:inline-flex;flex-direction:column;flex:1;position:relative;color:inherit;padding:0 8px;border-radius:3px;border:1px solid ", getThemeValue(THEME_NAME.BORDER_COLOR), ";background-color:", getThemeValue(THEME_NAME.BACKGROUND), ";width:", (props)=>typeof props.width === 'number' ? `${props.width}px` : props.width || '250px', ";max-width:100%;&:has(:focus),&:has(:active){border-color:", getThemeValue(THEME_NAME.PRIMARY), ";box-shadow:0 0 0 4px ", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";}&:has(:focus) > span,&:has(:active) > span{color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:has(:disabled){border-color:", getThemeValue(THEME_NAME.DISABLED_BORDER), ";background-color:", getThemeValue(THEME_NAME.DISABLED_BACKGROUND), ";}&:has(:disabled) > span{color:", getThemeValue(THEME_NAME.DISABLED), ";}&:has(:focus:invalid){border-color:", getThemeValue(THEME_NAME.ERROR), ";box-shadow:0 0 0 4px ", getThemeValue(THEME_NAME.ERROR_LIGHT), ";}", (props)=>props.touched ? `
         &:has(:invalid) {
             border-color: ${getThemeValue(THEME_NAME.ERROR)};
         }
@@ -988,13 +999,13 @@ const Label$6 = /*#__PURE__*/ styled("label", {
     }
     ` : '');
 // Error message container
-const ErrorContainer$4 = /*#__PURE__*/ styled("div", {
-    target: "ew8m37a1",
+const ErrorContainer$6 = /*#__PURE__*/ styled("div", {
+    target: "e7l19412",
     label: "ErrorContainer"
 })("color:", getThemeValue(THEME_NAME.ERROR), ";padding-top:3px;font-size:12px;line-height:14px;margin-left:3px;");
 // Visually hidden but accessible to screen readers
 const VisuallyHidden$1 = /*#__PURE__*/ styled("ul", {
-    target: "ew8m37a2",
+    target: "e7l19413",
     label: "VisuallyHidden"
 })("position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;& li{list-style:none;}");
 /**
@@ -1010,7 +1021,7 @@ const VisuallyHidden$1 = /*#__PURE__*/ styled("ul", {
  * />
  * ```
  */ function ChipInputComponent(props, ref) {
-    const { value: propValue = [], closeButtonAriaLabel = `Remove {:label}`, addedAnnouncementTemplate = '{:label} was added', removedAnnouncementTemplate = '{:label} was removed' } = props;
+    const { value: propValue = [], onChange: onChangeCallback, label, errorText, closeButtonAriaLabel = `Remove {:label}`, addedAnnouncementTemplate = '{:label} was added', removedAnnouncementTemplate = '{:label} was removed', width, ...inputProps } = props;
     const [text, setText] = React.useState('');
     const [touched, setTouched] = React.useState(false);
     const [value, setValue] = React.useState(propValue || []);
@@ -1039,21 +1050,28 @@ const VisuallyHidden$1 = /*#__PURE__*/ styled("ul", {
     }, [
         propValue
     ]);
+    React.useEffect(()=>{
+        if (InputRef.current) {
+            InputRef.current.setCustomValidity(errorText || '');
+        }
+    }, [
+        errorText
+    ]);
     /**
      * Update the chip values and notify changes.
      * @param newValue The new array of chip values
      */ const updateValue = (newValue)=>{
         const deduped = Array.from(new Set(newValue));
         setValue(deduped);
-        props.onChange?.(deduped);
+        onChangeCallback?.(deduped);
     };
     /**
      * Marks the input as touched on focus.
      * @param e React focus event
      */ const handleFocus = (e)=>{
         setTouched(true);
-        if (props.onFocus) {
-            props.onFocus(e);
+        if (inputProps.onFocus) {
+            inputProps.onFocus(e);
         }
     };
     /**
@@ -1065,15 +1083,28 @@ const VisuallyHidden$1 = /*#__PURE__*/ styled("ul", {
     /**
      * Adds a new chip on Enter key press.
      * @param e React keyboard event
-     */ const handleKeyUp = (e)=>{
-        if (e.key === 'Enter' && text.trim() !== '' && InputRef.current?.validity.valid) {
-            const newValue = [
-                ...value,
-                text.trim()
-            ];
-            updateValue(newValue);
-            setText('');
-            setAnnouncement(replacePlaceholder(addedAnnouncementTemplate, text.trim()));
+     */ const handleKeyDown = (e)=>{
+        if (e.key === 'Enter') {
+            // Check validity against HTML5 constraints only (ignore custom validity from errorText)
+            let isValid;
+            if (InputRef.current) {
+                InputRef.current.setCustomValidity('');
+                isValid = InputRef.current.checkValidity();
+                InputRef.current.setCustomValidity(errorText || '');
+            }
+            // Only prevent form submission if we have valid text to add as a chip
+            if (text.trim() !== '' && isValid) {
+                e.preventDefault();
+                e.stopPropagation();
+                const newValue = [
+                    ...value,
+                    text.trim()
+                ];
+                updateValue(newValue);
+                setText('');
+                setAnnouncement(replacePlaceholder(addedAnnouncementTemplate, text.trim()));
+            }
+        // Otherwise, allow form submission to proceed
         }
     };
     /**
@@ -1103,42 +1134,46 @@ const VisuallyHidden$1 = /*#__PURE__*/ styled("ul", {
     // Render the component
     return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [
-            /*#__PURE__*/ jsxRuntime.jsxs(Label$6, {
-                text: text,
-                touched: touched,
-                errorText: props.errorText,
-                required: props.required,
-                width: props.width,
+            /*#__PURE__*/ jsxRuntime.jsxs(Container$8, {
                 children: [
-                    /*#__PURE__*/ jsxRuntime.jsx("input", {
-                        ...props,
-                        ref: InputRef,
-                        value: text,
-                        onChange: handleChange,
-                        onFocus: handleFocus,
-                        onKeyUp: handleKeyUp,
-                        required: props.required && value.length === 0,
-                        "aria-required": props.required,
-                        "aria-invalid": !!props.errorText,
-                        "aria-describedby": props.errorText ? errorId : undefined
-                    }),
-                    /*#__PURE__*/ jsxRuntime.jsx("div", {
-                        children: value?.length > 0 && /*#__PURE__*/ jsxRuntime.jsx(DragAndDrop, {
-                            orientation: ORIENTATION.HORIZONTAL,
-                            onDrop: onDrop,
-                            children: value.map((chip)=>/*#__PURE__*/ jsxRuntime.jsx(Chip, {
-                                    label: chip,
-                                    onCloseClick: ()=>removeChip(chip),
-                                    closeButtonAriaLabel: replacePlaceholder(closeButtonAriaLabel, chip)
-                                }, chip))
-                        })
-                    }),
-                    /*#__PURE__*/ jsxRuntime.jsx("span", {
-                        children: props.label
+                    /*#__PURE__*/ jsxRuntime.jsxs(Label$6, {
+                        text: text,
+                        touched: touched,
+                        errorText: errorText,
+                        required: inputProps.required,
+                        width: width,
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx("input", {
+                                ...inputProps,
+                                ref: InputRef,
+                                value: text,
+                                onChange: handleChange,
+                                onFocus: handleFocus,
+                                onKeyDown: handleKeyDown,
+                                required: inputProps.required && value.length === 0,
+                                "aria-required": inputProps.required,
+                                "aria-invalid": !!errorText,
+                                "aria-describedby": errorText ? errorId : undefined
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                children: value?.length > 0 && /*#__PURE__*/ jsxRuntime.jsx(DragAndDrop, {
+                                    orientation: ORIENTATION.HORIZONTAL,
+                                    onDrop: onDrop,
+                                    children: value.map((chip)=>/*#__PURE__*/ jsxRuntime.jsx(Chip, {
+                                            label: chip,
+                                            onCloseClick: ()=>removeChip(chip),
+                                            closeButtonAriaLabel: replacePlaceholder(closeButtonAriaLabel, chip)
+                                        }, chip))
+                                })
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx("span", {
+                                children: label
+                            })
+                        ]
                     }),
-                    props.errorText && /*#__PURE__*/ jsxRuntime.jsx(ErrorContainer$4, {
+                    errorText && /*#__PURE__*/ jsxRuntime.jsx(ErrorContainer$6, {
                         id: errorId,
-                        children: props.errorText
+                        children: errorText
                     })
                 ]
             }),
@@ -1180,7 +1215,7 @@ const ChipInput = /*#__PURE__*/ React.forwardRef(ChipInputComponent);
     [5]: 'bottom: 0; right: 0; justify-content: flex-end;',
     [6]: 'top: 0; left: 0; justify-content: center; align-items: center;'
 };
-/** Layer container component. */ const Container$5 = /*#__PURE__*/ styled("div", {
+/** Layer container component. */ const Container$7 = /*#__PURE__*/ styled("div", {
     target: "e1at2bda0",
     label: "Container"
 })("position:fixed;display:flex;opacity:0;transition:opacity 0.3s ease;", (props)=>POSITION_STYLE[props.position], " ", (props)=>props.overlay && `
@@ -1400,7 +1435,7 @@ const ChipInput = /*#__PURE__*/ React.forwardRef(ChipInputComponent);
                 if (!divElement) {
                     return null;
                 }
-                return /*#__PURE__*/ reactDom.createPortal(/*#__PURE__*/ jsxRuntime.jsx(Container$5, {
+                return /*#__PURE__*/ reactDom.createPortal(/*#__PURE__*/ jsxRuntime.jsx(Container$7, {
                     ...props,
                     ref: ref,
                     onClick: overlayClickHandler,
@@ -1673,11 +1708,11 @@ ConfirmDialog.defaultProps = {
 };
 
 const Label$5 = /*#__PURE__*/ styled("label", {
-    target: "el9i5v60",
+    target: "e1g8e2pu0",
     label: "Label"
 })("display:inline-flex;flex-direction:column;position:relative;margin:10px 5px;");
 const TextField$1 = /*#__PURE__*/ styled("input", {
-    target: "el9i5v61",
+    target: "e1g8e2pu1",
     label: "TextField"
 })("outline:none;color:inherit;padding:0 8px;line-height:30px;min-height:30px;width:250px;border-radius:3px;border:1px solid ", getThemeValue(THEME_NAME.BORDER_COLOR), ";display:inline-block;background-color:", getThemeValue(THEME_NAME.BACKGROUND), ";&:focus,&:active{border-color:", getThemeValue(THEME_NAME.PRIMARY), ";box-shadow:0 0 0 4px ", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";}&:focus + span,&:active + span{color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:disabled{border-color:", getThemeValue(THEME_NAME.DISABLED_BORDER), ";background-color:", getThemeValue(THEME_NAME.DISABLED_BACKGROUND), ";padding:0 8px;}&:disabled + span{color:", getThemeValue(THEME_NAME.DISABLED), ";}&:focus:invalid{border-color:", getThemeValue(THEME_NAME.ERROR), ";box-shadow:0 0 0 4px ", getThemeValue(THEME_NAME.ERROR_LIGHT), ";}", (props)=>props.touched ? `
     &:invalid {
@@ -1701,19 +1736,21 @@ const TextField$1 = /*#__PURE__*/ styled("input", {
         line-height: 14px;
     }
     ` : '', "    &:focus + span,&:placeholder-shown + span{top:-8px;background:", getThemeValue(THEME_NAME.BACKGROUND), ";font-size:12px;line-height:14px;}");
-const ErrorContainer$3 = /*#__PURE__*/ styled("div", {
-    target: "el9i5v62",
+const ErrorContainer$5 = /*#__PURE__*/ styled("div", {
+    target: "e1g8e2pu2",
     label: "ErrorContainer"
 })("color:", getThemeValue(THEME_NAME.ERROR), ";padding-top:3px;font-size:12px;line-height:14px;margin-left:3px;");
 /**
  * Input Component
  * @param props - Component props
  * @param ref - Ref forwarded to the underlying HTMLInputElement
- */ const Input$2 = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+ */ const Input$2 = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
     const [touched, setTouched] = React.useState(false);
     const [value, setValue] = React.useState(props.value || '');
     const errorId = React.useId();
     const prevValueRef = React.useRef(undefined);
+    const internalRef = React.useRef(null);
+    React.useImperativeHandle(forwardedRef, ()=>internalRef.current);
     React.useEffect(()=>{
         if (props.value !== undefined && props.value !== prevValueRef.current) {
             setValue(props.value);
@@ -1722,6 +1759,13 @@ const ErrorContainer$3 = /*#__PURE__*/ styled("div", {
     }, [
         props.value
     ]);
+    React.useEffect(()=>{
+        if (internalRef.current) {
+            internalRef.current.setCustomValidity(props.errorText || '');
+        }
+    }, [
+        props.errorText
+    ]);
     const handleFocus = (e)=>{
         setTouched(true);
         if (props.onFocus) {
@@ -1740,7 +1784,7 @@ const ErrorContainer$3 = /*#__PURE__*/ styled("div", {
         children: [
             /*#__PURE__*/ jsxRuntime.jsx(TextField$1, {
                 ...props,
-                ref: ref,
+                ref: internalRef,
                 value: value,
                 onChange: onChangeHandler,
                 onFocus: handleFocus,
@@ -1752,7 +1796,7 @@ const ErrorContainer$3 = /*#__PURE__*/ styled("div", {
             /*#__PURE__*/ jsxRuntime.jsx("span", {
                 children: props.label
             }),
-            props.errorText && /*#__PURE__*/ jsxRuntime.jsx(ErrorContainer$3, {
+            props.errorText && /*#__PURE__*/ jsxRuntime.jsx(ErrorContainer$5, {
                 id: errorId,
                 children: props.errorText
             })
@@ -1762,11 +1806,11 @@ const ErrorContainer$3 = /*#__PURE__*/ styled("div", {
 Input$2.displayName = 'Input';
 
 const Label$4 = /*#__PURE__*/ styled("label", {
-    target: "e1j32tnv0",
+    target: "e1towgf50",
     label: "Label"
 })("display:inline-flex;flex-direction:column;position:relative;margin:10px 5px;");
 const TextField = /*#__PURE__*/ styled("textarea", {
-    target: "e1j32tnv1",
+    target: "e1towgf51",
     label: "TextField"
 })("border:none;color:inherit;padding:8px;min-height:150px;min-width:250px;border-radius:3px;border:1px solid ", getThemeValue(THEME_NAME.BORDER_COLOR), ";display:inline-block;background-color:", getThemeValue(THEME_NAME.BACKGROUND), ";&:focus,&:active{border-color:", getThemeValue(THEME_NAME.PRIMARY), ";box-shadow:0 0 0 4px ", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";}&:focus + span,&:active + span{color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:disabled{border-color:", getThemeValue(THEME_NAME.DISABLED_BORDER), ";background-color:", getThemeValue(THEME_NAME.DISABLED_BACKGROUND), ";}&:disabled + span{color:", getThemeValue(THEME_NAME.DISABLED), ";}&:focus:invalid{border-color:", getThemeValue(THEME_NAME.ERROR), ";box-shadow:0 0 0 4px ", getThemeValue(THEME_NAME.ERROR_LIGHT), ";}", (props)=>props.touched ? `
     &:invalid {
@@ -1790,20 +1834,22 @@ const TextField = /*#__PURE__*/ styled("textarea", {
         line-height: 14px;
     }
     ` : '', "    &:focus + span,&:placeholder-shown + span{top:-8px;background:", getThemeValue(THEME_NAME.BACKGROUND), ";font-size:12px;line-height:14px;}");
-const ErrorContainer$2 = /*#__PURE__*/ styled("div", {
-    target: "e1j32tnv2",
+const ErrorContainer$4 = /*#__PURE__*/ styled("div", {
+    target: "e1towgf52",
     label: "ErrorContainer"
 })("color:", getThemeValue(THEME_NAME.ERROR), ";padding-top:3px;font-size:12px;line-height:14px;margin-left:3px;");
 /**
  * TextArea Component
  * @param props - Component props
  * @param ref - Ref forwarded to the underlying HTMLTextAreaElement
- */ function TextAreaComponent(props, ref) {
+ */ function TextAreaComponent(props, forwardedRef) {
     const { label, errorText, value: propsValue, required, ...rest } = props;
     const [touched, setTouched] = React.useState(false);
     const [value, setValue] = React.useState(propsValue || '');
     const errorId = React.useId();
     const prevValueRef = React.useRef(undefined);
+    const internalRef = React.useRef(null);
+    React.useImperativeHandle(forwardedRef, ()=>internalRef.current);
     React.useEffect(()=>{
         if (propsValue !== undefined && propsValue !== prevValueRef.current) {
             setValue(propsValue);
@@ -1812,6 +1858,13 @@ const ErrorContainer$2 = /*#__PURE__*/ styled("div", {
     }, [
         propsValue
     ]);
+    React.useEffect(()=>{
+        if (internalRef.current) {
+            internalRef.current.setCustomValidity(errorText || '');
+        }
+    }, [
+        errorText
+    ]);
     const handleFocus = (e)=>{
         setTouched(true);
         if (props.onFocus) {
@@ -1830,7 +1883,7 @@ const ErrorContainer$2 = /*#__PURE__*/ styled("div", {
         children: [
             /*#__PURE__*/ jsxRuntime.jsx(TextField, {
                 ...rest,
-                ref: ref,
+                ref: internalRef,
                 value: value,
                 onChange: onChangeHandler,
                 onFocus: handleFocus,
@@ -1843,7 +1896,7 @@ const ErrorContainer$2 = /*#__PURE__*/ styled("div", {
             /*#__PURE__*/ jsxRuntime.jsx("span", {
                 children: label
             }),
-            errorText && /*#__PURE__*/ jsxRuntime.jsx(ErrorContainer$2, {
+            errorText && /*#__PURE__*/ jsxRuntime.jsx(ErrorContainer$4, {
                 id: errorId,
                 children: errorText
             })
@@ -1853,11 +1906,11 @@ const ErrorContainer$2 = /*#__PURE__*/ styled("div", {
 const TextArea = /*#__PURE__*/ React.forwardRef(TextAreaComponent);
 
 const Label$3 = /*#__PURE__*/ styled("label", {
-    target: "e13b7jm0",
+    target: "e1trg58l0",
     label: "Label"
 })("display:inline-flex;flex-direction:column;position:relative;margin:10px 5px;pointer-events:none;max-width:268px;& svg{fill:currentColor;}");
 const SelectField = /*#__PURE__*/ styled("select", {
-    target: "e13b7jm1",
+    target: "e1trg58l1",
     label: "SelectField"
 })("border:none;color:inherit;padding:0 8px;line-height:30px;min-height:32px;width:268px;border-radius:3px;border:1px solid ", getThemeValue(THEME_NAME.BORDER_COLOR), ";display:inline-block;background-color:", getThemeValue(THEME_NAME.BACKGROUND), ";pointer-events:auto;appearance:none;&:focus,&:active{border-color:", getThemeValue(THEME_NAME.PRIMARY), ";box-shadow:0 0 0 4px ", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";}&:focus ~ span,&:active ~ span{color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:disabled{border-color:", getThemeValue(THEME_NAME.DISABLED_BORDER), ";background-color:", getThemeValue(THEME_NAME.DISABLED_BACKGROUND), ";}&:disabled ~ span{color:", getThemeValue(THEME_NAME.DISABLED), ";}&:focus:invalid{border-color:", getThemeValue(THEME_NAME.ERROR), ";box-shadow:0 0 0 4px ", getThemeValue(THEME_NAME.ERROR_LIGHT), ";}", (props)=>props.touched ? `
     &:invalid {
@@ -1881,31 +1934,41 @@ const SelectField = /*#__PURE__*/ styled("select", {
         line-height: 14px;
     }
     ` : '', "    &:focus + span,&:placeholder-shown + span{top:-8px;background:", getThemeValue(THEME_NAME.BACKGROUND), ";font-size:12px;line-height:14px;}");
-const ErrorContainer$1 = /*#__PURE__*/ styled("div", {
-    target: "e13b7jm2",
+const ErrorContainer$3 = /*#__PURE__*/ styled("div", {
+    target: "e1trg58l2",
     label: "ErrorContainer"
 })("color:", getThemeValue(THEME_NAME.ERROR), ";padding-top:3px;font-size:12px;line-height:14px;margin-left:3px;");
 const ArrowContainer$1 = /*#__PURE__*/ styled("span", {
-    target: "e13b7jm3",
+    target: "e1trg58l3",
     label: "ArrowContainer"
 })("position:absolute;right:8px;top:8px;");
 /**
  * Select Component
  * @param props - Component props
  * @param ref - Ref forwarded to the underlying HTMLSelectElement
- */ function SelectComponent(props, ref) {
+ */ function SelectComponent(props, forwardedRef) {
     const [touched, setTouched] = React.useState(false);
     const [value, setValue] = React.useState(props.value || '');
     const errorId = React.useId();
     const prevValueRef = React.useRef(undefined);
+    const internalRef = React.useRef(null);
+    React.useImperativeHandle(forwardedRef, ()=>internalRef.current);
+    // Sync prop value with state
     React.useEffect(()=>{
-        if (props.value !== undefined && props.value !== prevValueRef.current) {
-            setValue(props.value);
+        if (props.value !== prevValueRef.current) {
+            setValue(props.value || '');
             prevValueRef.current = props.value;
         }
     }, [
         props.value
     ]);
+    React.useEffect(()=>{
+        if (internalRef.current) {
+            internalRef.current.setCustomValidity(props.errorText || '');
+        }
+    }, [
+        props.errorText
+    ]);
     const handleFocus = (e)=>{
         setTouched(true);
         if (props.onFocus) {
@@ -1924,7 +1987,7 @@ const ArrowContainer$1 = /*#__PURE__*/ styled("span", {
         children: [
             /*#__PURE__*/ jsxRuntime.jsxs(SelectField, {
                 ...props,
-                ref: ref,
+                ref: internalRef,
                 multiple: false,
                 value: value,
                 onChange: onChangeHandler,
@@ -1945,7 +2008,7 @@ const ArrowContainer$1 = /*#__PURE__*/ styled("span", {
                 "aria-hidden": "true",
                 children: /*#__PURE__*/ jsxRuntime.jsx(ExpandMore, {})
             }),
-            props.errorText && /*#__PURE__*/ jsxRuntime.jsx(ErrorContainer$1, {
+            props.errorText && /*#__PURE__*/ jsxRuntime.jsx(ErrorContainer$3, {
                 id: errorId,
                 children: props.errorText
             })
@@ -1955,50 +2018,81 @@ const ArrowContainer$1 = /*#__PURE__*/ styled("span", {
 const Select = /*#__PURE__*/ React.forwardRef(SelectComponent);
 
 const Label$2 = /*#__PURE__*/ styled("label", {
-    target: "e10ud8wb0",
+    target: "e74kvzt0",
     label: "Label"
 })("margin:5px 0;position:relative;display:inline-flex;align-items:center;cursor:pointer;");
 const StyledCheckmark = /*#__PURE__*/ styled("span", {
-    target: "e10ud8wb1",
+    target: "e74kvzt1",
     label: "StyledCheckmark"
 })("width:16px;height:16px;border:1px solid ", getThemeValue(THEME_NAME.BORDER_COLOR), ";display:inline-block;border-radius:3px;margin-right:5px;background-color:", getThemeValue(THEME_NAME.BACKGROUND), ";transition:all 0.3s ease;position:relative;flex-shrink:0;&::after{content:'';width:3px;height:10px;border-right:2px solid ", getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT), ";border-bottom:2px solid ", getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT), ";position:absolute;top:1px;left:6px;opacity:0;transform:rotate(45deg) scale(0);transition:all 0.2s ease;}");
 const HiddenInput$1 = /*#__PURE__*/ styled("input", {
-    target: "e10ud8wb2",
+    target: "e74kvzt2",
     label: "HiddenInput"
 })("opacity:0;width:0;height:0;position:absolute;margin:0;&:checked + ", StyledCheckmark, "{background-color:", getThemeValue(THEME_NAME.PRIMARY), ";border-color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:checked + ", StyledCheckmark, "::after{opacity:1;transform:rotate(45deg) scale(1);}&:indeterminate + ", StyledCheckmark, "{background-color:", getThemeValue(THEME_NAME.PRIMARY), ";border-color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:indeterminate + ", StyledCheckmark, "::after{opacity:1;height:0;width:8px;border-right:none;border-bottom:2px solid ", getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT), ";transform:rotate(0deg) scale(1);top:7px;left:4px;}&:enabled:active + ", StyledCheckmark, ",&:focus + ", StyledCheckmark, "{border-color:", getThemeValue(THEME_NAME.PRIMARY), ";box-shadow:0 0 0 3px ", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";}&:enabled:active ~ span,&:focus ~ span{color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:enabled:hover + ", StyledCheckmark, "{border-color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:enabled:hover ~ span{color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:disabled + ", StyledCheckmark, "{border-color:", getThemeValue(THEME_NAME.DISABLED_BORDER), ";cursor:not-allowed;}&:disabled ~ span{color:", getThemeValue(THEME_NAME.DISABLED), ";cursor:not-allowed;}&:checked:disabled + ", StyledCheckmark, ",&:indeterminate:disabled + ", StyledCheckmark, "{background-color:", getThemeValue(THEME_NAME.DISABLED), ";}");
+const ErrorContainer$2 = /*#__PURE__*/ styled("div", {
+    target: "e74kvzt3",
+    label: "ErrorContainer"
+})("color:", getThemeValue(THEME_NAME.ERROR), ";padding-top:3px;font-size:12px;line-height:14px;");
+const Container$6 = /*#__PURE__*/ styled("div", {
+    target: "e74kvzt4",
+    label: "Container"
+})("display:inline-flex;flex-direction:column;");
 /**
  * Checkbox Component
  * @param props - Component props
  * @param fwdRef - Ref forwarded to the underlying HTMLInputElement
  */ function CheckboxComponent(props, fwdRef) {
-    const { label = '', indeterminate = false, checked, ...rest } = props;
+    const { label = '', indeterminate = false, checked, errorText, ...rest } = props;
+    const internalRef = React.useRef(null);
+    const errorId = React.useId();
+    React.useImperativeHandle(fwdRef, ()=>internalRef.current);
+    React.useEffect(()=>{
+        if (internalRef.current) {
+            internalRef.current.setCustomValidity(errorText || '');
+        }
+    }, [
+        errorText
+    ]);
     const ref = React.useCallback((node)=>{
+        internalRef.current = node;
         // Ensure the DOM `indeterminate` flag always matches the prop
         if (node) {
             node.indeterminate = !!indeterminate;
         }
-        // Forward the node (or null) to the parent ref (supports function or ref object)
-        if (typeof fwdRef === 'function') {
-            fwdRef(node);
-        } else if (fwdRef) {
-            fwdRef.current = node;
-        }
+    // Forward the node (or null) to the parent ref (supports function or ref object)
+    // Note: Since we use useImperativeHandle now, we don't technically need to manually forward here
+    // if we weren't doing the ref callback pattern for indeterminate.
+    // However, useImperativeHandle handles the forwarding.
+    // BUT, our local ref callback `ref` is passed to the input `ref={ref}`.
+    // React will call this callback with the node.
+    // Inside this callback, we set internalRef.current.
+    // useImperativeHandle exposes internalRef.current to fwdRef.
+    // So we don't need manual forwarding logic here anymore!
     }, [
-        indeterminate,
-        fwdRef
+        indeterminate
     ]);
-    return /*#__PURE__*/ jsxRuntime.jsxs(Label$2, {
+    return /*#__PURE__*/ jsxRuntime.jsxs(Container$6, {
         children: [
-            /*#__PURE__*/ jsxRuntime.jsx(HiddenInput$1, {
-                ...rest,
-                ref: ref,
-                type: "checkbox",
-                checked: checked,
-                "aria-checked": indeterminate ? 'mixed' : checked
+            /*#__PURE__*/ jsxRuntime.jsxs(Label$2, {
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(HiddenInput$1, {
+                        ...rest,
+                        ref: ref,
+                        type: "checkbox",
+                        checked: checked,
+                        "aria-checked": indeterminate ? 'mixed' : checked,
+                        "aria-invalid": !!errorText,
+                        "aria-describedby": errorText ? errorId : undefined
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(StyledCheckmark, {}),
+                    /*#__PURE__*/ jsxRuntime.jsx("span", {
+                        children: label
+                    })
+                ]
             }),
-            /*#__PURE__*/ jsxRuntime.jsx(StyledCheckmark, {}),
-            /*#__PURE__*/ jsxRuntime.jsx("span", {
-                children: label
+            errorText && /*#__PURE__*/ jsxRuntime.jsx(ErrorContainer$2, {
+                id: errorId,
+                children: errorText
             })
         ]
     });
@@ -2006,30 +2100,60 @@ const HiddenInput$1 = /*#__PURE__*/ styled("input", {
 const Checkbox = /*#__PURE__*/ React.forwardRef(CheckboxComponent);
 
 const Switch = /*#__PURE__*/ styled("label", {
-    target: "e185uavx0",
+    target: "ecxpw850",
     label: "Switch"
 })("position:relative;display:inline-flex;margin:5px 0;");
 const Input$1 = /*#__PURE__*/ styled("input", {
-    target: "e185uavx1",
+    target: "ecxpw851",
     label: "Input"
 })("position:absolute;width:0;height:0;appearance:none;margin:0;& + span{position:relative;cursor:pointer;width:30px;height:18px;background-color:", getThemeValue(THEME_NAME.LIGHT_GREY), ";transition:0.4s;border-radius:10px;padding:0 3px;margin:0 10px 0 5px;}& + span:before{position:absolute;content:'';height:14px;width:14px;left:1px;top:1px;border:1px solid ", getThemeValue(THEME_NAME.DISABLED_BORDER), ";border-radius:50%;background-color:", getThemeValue(THEME_NAME.BACKGROUND), ";transition:0.4s;}&:checked + span{background-color:", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";}&:checked + span:before{transform:translateX(18px);border-color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:enabled:focus + span:before{box-shadow:0 0 0 3px ", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";border-color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:enabled:hover ~ span{cursor:pointer;color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:disabled ~ span{color:", getThemeValue(THEME_NAME.DISABLED_BORDER), ";}&:disabled + span{background-color:", getThemeValue(THEME_NAME.LIGHT_GREY), ";cursor:not-allowed;}&:disabled + span:before{background-color:", getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR), ";border-color:", getThemeValue(THEME_NAME.DISABLED_BORDER), ";}");
+const ErrorContainer$1 = /*#__PURE__*/ styled("div", {
+    target: "ecxpw852",
+    label: "ErrorContainer"
+})("color:", getThemeValue(THEME_NAME.ERROR), ";padding-top:3px;font-size:12px;line-height:14px;");
+const Container$5 = /*#__PURE__*/ styled("div", {
+    target: "ecxpw853",
+    label: "Container"
+})("display:inline-flex;flex-direction:column;");
 /**
  * Toggle Component
  * @param props - Component props
- * @param ref - Ref forwarded to the underlying HTMLInputElement
- */ function ToggleComponent(props, ref) {
-    return /*#__PURE__*/ jsxRuntime.jsxs(Switch, {
+ * @param forwardedRef - Ref forwarded to the underlying HTMLInputElement
+ */ function ToggleComponent(props, forwardedRef) {
+    const { label, errorText, ...rest } = props;
+    const internalRef = React.useRef(null);
+    const errorId = React.useId();
+    React.useImperativeHandle(forwardedRef, ()=>internalRef.current);
+    React.useEffect(()=>{
+        if (internalRef.current) {
+            internalRef.current.setCustomValidity(errorText || '');
+        }
+    }, [
+        errorText
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsxs(Container$5, {
         children: [
-            /*#__PURE__*/ jsxRuntime.jsx(Input$1, {
-                ...props,
-                ref: ref,
-                type: "checkbox",
-                role: "switch",
-                "aria-checked": props.checked
+            /*#__PURE__*/ jsxRuntime.jsxs(Switch, {
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(Input$1, {
+                        ...rest,
+                        ref: internalRef,
+                        type: "checkbox",
+                        role: "switch",
+                        "aria-checked": props.checked,
+                        "aria-invalid": !!errorText,
+                        "aria-label": label,
+                        "aria-describedby": errorText ? errorId : undefined
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx("span", {}),
+                    /*#__PURE__*/ jsxRuntime.jsx("span", {
+                        children: label
+                    })
+                ]
             }),
-            /*#__PURE__*/ jsxRuntime.jsx("span", {}),
-            /*#__PURE__*/ jsxRuntime.jsx("span", {
-                children: props.label
+            errorText && /*#__PURE__*/ jsxRuntime.jsx(ErrorContainer$1, {
+                id: errorId,
+                children: errorText
             })
         ]
     });
@@ -2037,29 +2161,41 @@ const Input$1 = /*#__PURE__*/ styled("input", {
 const Toggle = /*#__PURE__*/ React.forwardRef(ToggleComponent);
 
 const Label$1 = /*#__PURE__*/ styled("label", {
-    target: "e12cx2u30",
+    target: "edovkv60",
     label: "Label"
-})("display:inline-flex;align-items:center;margin:5px 0;cursor:pointer;position:relative;");
+})("display:inline-flex;align-items:center;margin:5px 10px 5px 0;cursor:pointer;position:relative;");
 const StyledRadio = /*#__PURE__*/ styled("span", {
-    target: "e12cx2u31",
+    target: "edovkv61",
     label: "StyledRadio"
 })("width:16px;height:16px;margin-right:5px;border:1px solid ", getThemeValue(THEME_NAME.BORDER_COLOR), ";border-radius:50%;display:block;transition:background-color 0.3s ease;position:relative;flex-shrink:0;&::after{content:'';width:100%;height:100%;border-radius:50%;position:absolute;top:0;left:0;box-shadow:inset 0 0 0 3px ", getThemeValue(THEME_NAME.BACKGROUND), ";opacity:0;transition:opacity 0.2s ease;}");
 const HiddenInput = /*#__PURE__*/ styled("input", {
-    target: "e12cx2u32",
+    target: "edovkv62",
     label: "HiddenInput"
 })("opacity:0;width:0;height:0;position:absolute;margin:0;&:checked + ", StyledRadio, "{border-color:", getThemeValue(THEME_NAME.PRIMARY), ";background-color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:checked + ", StyledRadio, "::after{opacity:1;}&:enabled:focus + ", StyledRadio, "{border-color:", getThemeValue(THEME_NAME.PRIMARY), ";box-shadow:0 0 0 3px ", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";}&:enabled:checked:focus + ", StyledRadio, "{border-color:", getThemeValue(THEME_NAME.PRIMARY), ";box-shadow:0 0 0 3px ", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";}&:enabled:hover + ", StyledRadio, "{border-color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:enabled:hover ~ span{color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:disabled + ", StyledRadio, "{border-color:", getThemeValue(THEME_NAME.DISABLED_BORDER), ";background-color:", getThemeValue(THEME_NAME.LIGHT_GREY), ";cursor:not-allowed;}&:disabled:checked + ", StyledRadio, "{border-color:", getThemeValue(THEME_NAME.DISABLED_BORDER), ";background-color:", getThemeValue(THEME_NAME.DISABLED_BORDER), ";}&:disabled ~ span{color:", getThemeValue(THEME_NAME.DISABLED_BORDER), ";cursor:not-allowed;}");
 /**
  * Radio Component
  * @param props - Component props
- * @param ref - Ref forwarded to the underlying HTMLInputElement
- */ function RadioComponent(props, ref) {
-    const { label, ...rest } = props;
+ * @param forwardedRef - Ref forwarded to the underlying HTMLInputElement
+ */ function RadioComponent(props, forwardedRef) {
+    const { label, errorText, ...rest } = props;
+    const internalRef = React.useRef(null);
+    const errorId = React.useId();
+    React.useImperativeHandle(forwardedRef, ()=>internalRef.current);
+    React.useEffect(()=>{
+        if (internalRef.current) {
+            internalRef.current.setCustomValidity(errorText || '');
+        }
+    }, [
+        errorText
+    ]);
     return /*#__PURE__*/ jsxRuntime.jsxs(Label$1, {
         children: [
             /*#__PURE__*/ jsxRuntime.jsx(HiddenInput, {
                 ...rest,
-                ref: ref,
-                type: "radio"
+                ref: internalRef,
+                type: "radio",
+                "aria-invalid": !!errorText,
+                "aria-describedby": errorText ? errorId : undefined
             }),
             /*#__PURE__*/ jsxRuntime.jsx(StyledRadio, {}),
             /*#__PURE__*/ jsxRuntime.jsx("span", {
@@ -2071,29 +2207,41 @@ const HiddenInput = /*#__PURE__*/ styled("input", {
 const Radio = /*#__PURE__*/ React.forwardRef(RadioComponent);
 
 const Input = /*#__PURE__*/ styled("input", {
-    target: "e1yp0s5y0",
+    target: "e76n0060",
     label: "Input"
 })("appearance:none;margin:0;width:0;& + span{color:", getThemeValue(THEME_NAME.PRIMARY), ";padding:6px 12px;border:none;border:1px solid ", getThemeValue(THEME_NAME.PRIMARY), ";cursor:pointer;margin-right:-1px;line-height:18px;}&:enabled:focus + span{box-shadow:0 0 0 4px ", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";}&:enabled:hover + span{background-color:", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";color:", getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT), ";}&:enabled:checked + span{background-color:", getThemeValue(THEME_NAME.PRIMARY), ";color:", getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT), ";}&:disabled + span{background-color:", getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR), ";color:", getThemeValue(THEME_NAME.DISABLED_BORDER), ";}&:disabled:checked + span{background-color:", getThemeValue(THEME_NAME.DISABLED_BORDER), ";color:", getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT), ";}");
 const Label = /*#__PURE__*/ styled("label", {
-    target: "e1yp0s5y1",
+    target: "e76n0061",
     label: "Label"
 })("display:inline-flex;&:focus-within{z-index:1;}");
 const RadioGroup = /*#__PURE__*/ styled("div", {
-    target: "e1yp0s5y2",
+    target: "e76n0062",
     label: "RadioGroup"
-})("display:inline-flex;align-items:center;border-radius:3px;margin:5px 0;& ", Label, ":first-child > span{border-radius:3px 0 0 3px;}& ", Label, ":last-child > span{border-radius:0 3px 3px 0;}");
+})("display:inline-flex;align-items:center;border-radius:3px;margin:5px 0;& > ", Label, ":first-of-type > span{border-radius:3px 0 0 3px;}& > ", Label, ":last-of-type > span{border-radius:0 3px 3px 0;}");
 /**
  * RadioButton Component
  * @param props - Component props
- * @param ref - Ref forwarded to the underlying HTMLInputElement
- */ function RadioButtonComponent(props, ref) {
-    const { label, ...rest } = props;
+ * @param forwardedRef - Ref forwarded to the underlying HTMLInputElement
+ */ function RadioButtonComponent(props, forwardedRef) {
+    const { label, errorText, ...rest } = props;
+    const internalRef = React.useRef(null);
+    const errorId = React.useId();
+    React.useImperativeHandle(forwardedRef, ()=>internalRef.current);
+    React.useEffect(()=>{
+        if (internalRef.current) {
+            internalRef.current.setCustomValidity(errorText || '');
+        }
+    }, [
+        errorText
+    ]);
     return /*#__PURE__*/ jsxRuntime.jsxs(Label, {
         children: [
             /*#__PURE__*/ jsxRuntime.jsx(Input, {
                 ...rest,
                 type: "radio",
-                ref: ref
+                ref: internalRef,
+                "aria-invalid": !!errorText,
+                "aria-describedby": errorText ? errorId : undefined
             }),
             /*#__PURE__*/ jsxRuntime.jsx("span", {
                 children: label
@@ -2234,7 +2382,7 @@ const MenuContainer = /*#__PURE__*/ styled("div", {
 const Menu = /*#__PURE__*/ React.forwardRef(MenuInner);
 
 const Container$4 = /*#__PURE__*/ styled("button", {
-    target: "ebwocs30",
+    target: "e1u7wt750",
     label: "Container"
 })("font-weight:", (props)=>props.selected ? 'bold' : 'normal', ";padding:8px;border:none;border-left:4px solid\n        ", (props)=>props.selected && !props.multiselect ? getThemeValue(THEME_NAME.TEXT_COLOR_DARK) : 'transparent', ";background-color:transparent;font-size:16px;border-bottom:1px solid ", getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR), ";min-height:41px;display:flex;align-items:center;cursor:pointer;position:relative;color:", getThemeValue(THEME_NAME.TEXT_COLOR_DARK), ";&:hover,&:focus,&:focus-within{background-color:", getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR), ";}& > label{margin:0 4px 0 0;}");
 /**
@@ -2307,11 +2455,11 @@ const positionMap$2 = {
     `
 };
 const PopoverDiv = /*#__PURE__*/ styled("div", {
-    target: "ejcb1ps0",
+    target: "e13swao70",
     label: "PopoverDiv"
 })("position:relative;display:inline-flex;");
 const Popper = /*#__PURE__*/ styled(Card, {
-    target: "ejcb1ps1",
+    target: "e13swao71",
     label: "Popper"
 })("position:absolute;width:100%;min-width:200px;overflow:auto;animation:enter 0.3s linear;border-radius:3px;z-index:1;transform:translate(", (props)=>props.translateX, "px,", (props)=>props.translateY, "px);", (props)=>positionMap$2[props.position], "    &.closing{animation:exit 0.3s linear;}@keyframes enter{from{max-height:0px;opacity:1;overflow:hidden;}to{max-height:300px;opacity:1;overflow:hidden;}}@keyframes exit{to{max-height:0px;opacity:1;overflow:hidden;}from{max-height:300px;opacity:1;overflow:hidden;}}");
 const KEY_CODES = {
@@ -2490,7 +2638,7 @@ const KEY_CODES = {
         ref: forwardRef,
         ...rest,
         children: [
-            /*#__PURE__*/ React.createElement(element, {
+            /*#__PURE__*/ React.cloneElement(element, {
                 ref: triggerRef,
                 id: triggerId,
                 'aria-expanded': open,
@@ -2520,9 +2668,63 @@ const KEY_CODES = {
 const Popover = /*#__PURE__*/ React.forwardRef(PopoverComponent);
 
 const ArrowContainer = /*#__PURE__*/ styled("span", {
-    target: "e1d5dyoc0",
+    target: "eph6dat0",
     label: "ArrowContainer"
 })("position:absolute;right:12px;top:16px;pointer-events:none;");
+/**
+ * DropdownTrigger Component
+ */ const DropdownTrigger = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const { displayValue, label, errorText, open, menuId, toggleOpen, onKeyDown, forwardedRef, ...rest } = props;
+    const triggerRef = React.useRef(null);
+    // Helper to assign both internal triggerRef and external forwarded ref
+    const assignRefs = React.useCallback((node)=>{
+        triggerRef.current = node;
+        if (!forwardedRef) return;
+        if (typeof forwardedRef === 'function') {
+            forwardedRef(node);
+        } else {
+            forwardedRef.current = node;
+        }
+    }, [
+        forwardedRef
+    ]);
+    // Combine the ref passed by parent with our assignRefs so both are updated
+    const combinedRef = React.useCallback((node)=>{
+        assignRefs(node);
+        if (typeof ref === 'function') {
+            ref(node);
+        } else if (ref) {
+            ref.current = node;
+        }
+    }, [
+        assignRefs,
+        ref
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(Input$2, {
+                ...rest,
+                ref: combinedRef,
+                type: "text",
+                value: displayValue,
+                label: label,
+                errorText: errorText,
+                onClick: toggleOpen,
+                onKeyDown: onKeyDown,
+                inputMode: "none",
+                role: "combobox",
+                "aria-haspopup": "listbox",
+                "aria-expanded": open,
+                "aria-controls": menuId
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(ArrowContainer, {
+                "aria-hidden": "true",
+                children: /*#__PURE__*/ jsxRuntime.jsx(ExpandMore, {})
+            })
+        ]
+    });
+});
+DropdownTrigger.displayName = 'DropdownTrigger';
 /**
  * Dropdown component that allows selection from a list of options.
  * Supports single and multi-select modes.
@@ -2530,11 +2732,6 @@ const ArrowContainer = /*#__PURE__*/ styled("span", {
  * @template T - The type of the value(s) in the dropdown.
  * @param props - The properties for the Dropdown component.
  * @returns The rendered Dropdown component.
- */ /**
- * Dropdown Component
- * @template T - The type of value(s) in the dropdown.
- * @param props - Component props
- * @param outerRef - Ref forwarded to the underlying HTMLInputElement
  */ function DropdownComponent(props, outerRef) {
     const { multiSelect = false, onChange, children, value: propValue, label, errorText, required, disabled, ...rest } = props;
     const [open, setOpen] = React.useState(false);
@@ -2543,6 +2740,42 @@ const ArrowContainer = /*#__PURE__*/ styled("span", {
     const menuId = `${id}-menu`;
     const menuRef = React.useRef(null);
     const triggerRef = React.useRef(null);
+    /**
+     * Gets the display value for the dropdown based on the current value and children.
+     *
+     * @param currentValue - The current value of the dropdown.
+     * @param currentChildren - The children of the dropdown.
+     * @returns The display value.
+     */ const getDisplayValue = (currentValue, currentChildren)=>{
+        if (currentValue === undefined || currentValue === null) return '';
+        const findLabel = (val)=>{
+            let label = '';
+            React.Children.forEach(currentChildren, (child)=>{
+                if (/*#__PURE__*/ React.isValidElement(child)) {
+                    const props = child.props;
+                    if ('value' in props && props.value === val) {
+                        label = String(props.children);
+                    }
+                }
+            });
+            return label;
+        };
+        if (Array.isArray(currentValue)) {
+            return currentValue.map(findLabel).filter(Boolean).join(', ');
+        }
+        return findLabel(currentValue);
+    };
+    const displayValue = getDisplayValue(value, children) || (value ? String(value) : '');
+    // Sync prop value with state
+    const prevValueRef = React.useRef(undefined);
+    React.useEffect(()=>{
+        if (propValue !== prevValueRef.current) {
+            setValue(propValue);
+            prevValueRef.current = propValue;
+        }
+    }, [
+        propValue
+    ]);
     // Focus menu when opened
     React.useEffect(()=>{
         if (open) {
@@ -2564,7 +2797,7 @@ const ArrowContainer = /*#__PURE__*/ styled("span", {
      * Opens the menu on 'Enter', 'Space', 'ArrowDown', or 'ArrowUp'.
      *
      * @param {React.KeyboardEvent<HTMLInputElement>} e - The keyboard event.
-     */ const onKeyDown = (e)=>{
+     */ const onKeyDown = React.useCallback((e)=>{
         if ([
             'ArrowDown',
             'ArrowUp',
@@ -2573,8 +2806,11 @@ const ArrowContainer = /*#__PURE__*/ styled("span", {
         ].includes(e.key)) {
             e.preventDefault();
             setOpen(true);
+        } else if (e.key !== 'Tab') {
+            // Prevent typing to mimic readOnly behavior while allowing native validation
+            e.preventDefault();
         }
-    };
+    }, []);
     /**
      * Handles changes to the dropdown value.
      * Updates local state and calls the external onChange handler.
@@ -2592,59 +2828,35 @@ const ArrowContainer = /*#__PURE__*/ styled("span", {
     };
     /**
      * Toggles the dropdown open state on click.
-     */ const clickHandler = ()=>setOpen(true);
-    const TriggerElement = /*#__PURE__*/ React.forwardRef((passedProps, ref)=>{
-        // Helper to assign both internal triggerRef and external forwarded ref
-        const assignRefs = (node)=>{
-            triggerRef.current = node;
-            if (!outerRef) return;
-            if (typeof outerRef === 'function') {
-                outerRef(node);
-            } else {
-                outerRef.current = node;
-            }
-        };
-        // Combine the ref passed by parent with our assignRefs so both are updated
-        const combinedRef = (node)=>{
-            assignRefs(node);
-            if (typeof ref === 'function') {
-                ref(node);
-            } else if (ref) {
-                ref.current = node;
-            }
-        };
-        return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-            children: [
-                /*#__PURE__*/ jsxRuntime.jsx(Input$2, {
-                    ...rest,
-                    ...passedProps,
-                    ref: combinedRef,
-                    type: "text",
-                    value: value && String(value),
-                    label: label,
-                    errorText: errorText,
-                    onClick: clickHandler,
-                    onKeyDown: onKeyDown,
-                    required: required,
-                    disabled: disabled,
-                    readOnly: true,
-                    role: "combobox",
-                    "aria-haspopup": "listbox",
-                    "aria-expanded": open,
-                    "aria-controls": menuId
-                }),
-                /*#__PURE__*/ jsxRuntime.jsx(ArrowContainer, {
-                    "aria-hidden": "true",
-                    children: /*#__PURE__*/ jsxRuntime.jsx(ExpandMore, {})
-                })
-            ]
-        });
-    });
-    TriggerElement.displayName = 'DropdownTrigger';
+     */ const clickHandler = React.useCallback(()=>setOpen(true), []);
+    /**
+     * Forwarded ref handler for the trigger input.
+     */ const handleForwardedRef = React.useCallback((node)=>{
+        triggerRef.current = node;
+        if (typeof outerRef === 'function') {
+            outerRef(node);
+        } else if (outerRef) {
+            outerRef.current = node;
+        }
+    }, [
+        outerRef
+    ]);
     return /*#__PURE__*/ jsxRuntime.jsx(Popover, {
         position: POPOVER_POSITION.BOTTOM_LEFT,
         open: open,
-        element: TriggerElement,
+        element: /*#__PURE__*/ jsxRuntime.jsx(DropdownTrigger, {
+            ...rest,
+            displayValue: displayValue,
+            label: label,
+            errorText: errorText,
+            open: open,
+            menuId: menuId,
+            toggleOpen: clickHandler,
+            onKeyDown: onKeyDown,
+            required: required,
+            disabled: disabled,
+            forwardedRef: handleForwardedRef
+        }),
         onClose: ()=>{
             setOpen(false);
             triggerRef.current?.focus();
@@ -2781,7 +2993,7 @@ const positionStyle$1 = (size)=>({
         }
     });
 const DrawerDiv = /*#__PURE__*/ styled("div", {
-    target: "e1topccf0",
+    target: "e1qyfyr80",
     label: "DrawerDiv"
 })("display:flex;flex-direction:column;background-color:", getThemeValue(THEME_NAME.BACKGROUND), ";transition:transform 0.3s ease;box-shadow:", getThemeValue(THEME_NAME.MODAL_SHADOW), ";", (props)=>positionStyle$1(props.size)[props.position].before, "    .nf-layer-enter &{transform:translateX(0%);", (props)=>positionStyle$1(props.size)[props.position].after, "}");
 const positionMap$1 = {
@@ -2819,7 +3031,7 @@ class Drawer extends React.Component {
     /**
      * Lifecycle method to handle Drawer updates.
      * Manages opening/closing logic via LayerManager and focus preservation.
-     */ getSnapshotBeforeUpdate(prevProps) {
+     */ componentDidUpdate(prevProps) {
         const { open } = this.props;
         if (prevProps.open && !open) {
             this.closeCallback?.();
@@ -2830,7 +3042,6 @@ class Drawer extends React.Component {
             this.lastFocusedElement = document.activeElement;
             this.handleOpen();
         }
-        return null;
     }
     /**
      * Renders the Drawer component via the LayerManager portal.
@@ -2974,9 +3185,9 @@ Drawer.defaultProps = {
 };
 
 const Container$3 = /*#__PURE__*/ styled("div", {
-    target: "eahc3qe0",
+    target: "e1m58trk0",
     label: "Container"
-})("display:inline-flex;border:1px solid ", getThemeValue(THEME_NAME.BORDER_COLOR), ";border-radius:3px;margin:5px;& button,& label{margin:0;border:none;border-radius:0;border-left:1px solid ", getThemeValue(THEME_NAME.BORDER_COLOR), ";box-shadow:none;height:32px;}& > div button{border-left:none;}& input,& select{border:none;height:32px;}& input,& select{border-radius:0;}& input:active,& select:active{box-shadow:none;}& > div > span{top:8px;}& > *:first-child,& > label:first-child input,& > label:first-child select,& > *:first-child label,& > *:first-child input{border-left:none;border-radius:2px 0 0 2px;}& > *:last-child,& > label:last-child input,& > label:last-child select,& > *:last-child label,& > *:last-child input{border-radius:0 2px 2px 0;}& *:focus,& *:focus + span{z-index:1;}&:focus-within,&:hover{box-shadow:", getThemeValue(THEME_NAME.HOVER_SHADOW), ";}", (props)=>props.errorText ? `
+})("display:inline-flex;border:1px solid ", getThemeValue(THEME_NAME.BORDER_COLOR), ";border-radius:3px;margin:5px;& button,& label{margin:0;border:none;border-radius:0;border-left:1px solid ", getThemeValue(THEME_NAME.BORDER_COLOR), ";box-shadow:none;height:32px;}& > div button{border-left:none;}& input,& select{border:none;height:32px;}& input,& select{border-radius:0;}& input:active,& select:active{box-shadow:none;}& > div > span{top:8px;}& > *:first-of-type,& > label:first-of-type input,& > label:first-of-type select,& > *:first-of-type label,& > *:first-of-type input{border-left:none;border-radius:2px 0 0 2px;}& > *:last-child,& > label:last-child input,& > label:last-child select,& > *:last-child label,& > *:last-child input{border-radius:0 2px 2px 0;}& *:focus,& *:focus + span{z-index:1;}&:focus-within,&:hover{box-shadow:", getThemeValue(THEME_NAME.HOVER_SHADOW), ";}", (props)=>props.errorText ? `
         border-color: ${getThemeValue(THEME_NAME.ERROR)};
 
         & > button, & > label {
@@ -2984,7 +3195,7 @@ const Container$3 = /*#__PURE__*/ styled("div", {
         }
     ` : '');
 const ErrorContainer = /*#__PURE__*/ styled("div", {
-    target: "eahc3qe1",
+    target: "e1m58trk1",
     label: "ErrorContainer"
 })("color:", getThemeValue(THEME_NAME.ERROR), ";margin-left:8px;font-size:12px;");
 /**
@@ -3051,7 +3262,7 @@ class Modal extends React.Component {
     /**
      * Lifecycle method to handle Modal updates.
      * Manages opening/closing logic via LayerManager and focus preservation.
-     */ getSnapshotBeforeUpdate(prevProps) {
+     */ componentDidUpdate(prevProps) {
         const { open } = this.props;
         if (prevProps.open && !open) {
             this.closeCallback?.();
@@ -3062,7 +3273,6 @@ class Modal extends React.Component {
             this.lastFocusedElement = document.activeElement;
             this.handleOpen();
         }
-        return null;
     }
     /**
      * Renders the Modal component via the LayerManager portal.
@@ -3374,6 +3584,7 @@ const DEFAULT_DURATION$1 = 5000;
                                     ]
                                 }),
                                 /*#__PURE__*/ jsxRuntime.jsx(CloseButton, {
+                                    type: "button",
                                     onClick: this.closeClickHandler(id),
                                     "aria-label": closeButtonAriaLabel || 'Close notification',
                                     tabIndex: 0,
@@ -3630,19 +3841,19 @@ const SpinnerDiv = /*#__PURE__*/ styled("div", {
 const Spinner = /*#__PURE__*/ React.forwardRef(SpinnerComponent);
 
 const Container$1 = /*#__PURE__*/ styled("div", {
-    target: "e14em2c80",
+    target: "er9cpfq0",
     label: "Container"
 })("flex:1;display:flex;flex-direction:column;min-height:400px;");
 const Header = /*#__PURE__*/ styled("div", {
-    target: "e14em2c81",
+    target: "er9cpfq1",
     label: "Header"
 })("display:flex;flex-direction:row;justify-content:space-between;border-bottom:1px solid ", getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR), ";@media (min-width:601px){&::before{position:absolute;top:25px;left:0;right:0;height:2px;background-color:", getThemeValue(THEME_NAME.LIGHT_GREY), ";content:' ';z-index:0;}}& > *{z-index:1;}");
 const HeaderButton = /*#__PURE__*/ styled("button", {
-    target: "e14em2c82",
+    target: "er9cpfq2",
     label: "HeaderButton"
 })("border:none;padding:16px 24px 16px 16px;font-size:16px;cursor:pointer;background-color:", (props)=>props.active ? getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR) : getThemeValue(THEME_NAME.BACKGROUND), ";font-weight:", (props)=>props.active ? 'bold' : 'normal', ";overflow:hidden;display:flex;align-items:center;color:", getThemeValue(THEME_NAME.TEXT_COLOR_DARK), ";&:disabled{cursor:not-allowed;background-color:", getThemeValue(THEME_NAME.DISABLED_BACKGROUND), ";}&:enabled:hover,&:focus{background-color:", getThemeValue(THEME_NAME.PRIMARY_LIGHTER), ";}@media (max-width:600px){&{display:none;}}");
 const MobileHeader = /*#__PURE__*/ styled("div", {
-    target: "e14em2c83",
+    target: "er9cpfq3",
     label: "MobileHeader"
 })("padding:16px;font-size:16px;line-height:18px;align-items:center;font-weight:bold;flex:1;display:flex;flex-direction:row;justify-content:space-between;@media (min-width:601px){&{display:none;}}");
 /**
@@ -3654,6 +3865,15 @@ const MobileHeader = /*#__PURE__*/ styled("div", {
     const [active, setActive] = React.useState(propsActive);
     const childrenArray = React.Children.toArray(children);
     const stepRefs = [];
+    const prevActiveRef = React.useRef(null);
+    React.useEffect(()=>{
+        if (prevActiveRef.current !== propsActive) {
+            setActive(propsActive);
+        }
+        prevActiveRef.current = propsActive;
+    }, [
+        propsActive
+    ]);
     const stepClickHandler = (index)=>()=>{
             setActive(index);
             onStepClick?.(index);
@@ -4188,6 +4408,7 @@ exports.DrawerBody = Body$1;
 exports.DrawerFooter = Footer$1;
 exports.DrawerHeader = Header$1;
 exports.Dropdown = Dropdown;
+exports.ErrorContainer = ErrorContainer$7;
 exports.Group = Group;
 exports.GroupLabel = GroupLabel;
 exports.IconButton = IconButton;