@emeraldemperaur/vector-sigma 1.4.6 → 1.4.9

package/lib/index.cjs

@@ -12242,14 +12242,14 @@ const AvatarInput = (_a) => {
             React.createElement("div", null,
                 inputlabel && (React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", color: 'gray', highContrast: inputtype !== 'avatar-neumorphic', htmlFor: alias }, inputlabel)),
                 "\u00A0",
-                props.isHinted ?
+                props.ishinted ?
                     React.createElement(React.Fragment, null,
-                        React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
-                            React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
+                        React.createElement(e, { content: props.hinttext || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
+                            React.createElement("a", { href: props.hinturl || "", target: "_blank", rel: "noopener noreferrer" },
                                 React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
                 hasError ?
                     React.createElement(React.Fragment, null,
-                        React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || `Required field`)) : null))));
+                        React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errortext || `Required field`)) : null))));
 };
 
 /**
@@ -12318,7 +12318,7 @@ const formatBytes = (bytes, decimals = 2) => {
 };
 
 const ButtonInput = (_a) => {
-    var { inputtype = 'button-outline', type = 'button', inputlabel, alias, readOnly, style, width, children } = _a, props = __rest$1(_a, ["inputtype", "type", "inputlabel", "alias", "readOnly", "style", "width", "children"]);
+    var { inputtype = 'button-outline', type = 'button', inputlabel, alias, readonly, style, width, children } = _a, props = __rest$1(_a, ["inputtype", "type", "inputlabel", "alias", "readonly", "style", "width", "children"]);
     const buttonRef = React.useRef(null);
     const [neumorphicVars, setNeumorphicVars] = React.useState({});
     const [bgColor, setBgColor] = React.useState('#ffffff');
@@ -12402,14 +12402,14 @@ const ButtonInput = (_a) => {
             transform: translateY(-2px);
           }
         ` } })),
-            React.createElement(o$a, Object.assign({ name: alias, disabled: readOnly, id: `${alias}FormInput`, "aria-describedby": `${alias}InputLabel`, ref: buttonRef, onClick: handler, type: type }, props, getVariantProps()),
+            React.createElement(o$a, Object.assign({ name: alias, disabled: readonly, id: `${alias}FormInput`, "aria-describedby": `${alias}InputLabel`, ref: buttonRef, onClick: handler, type: type }, props, getVariantProps()),
                 props.icon && (React.createElement("span", { style: { display: 'flex', alignItems: 'center' } }, props.icon)),
                 children),
             React.createElement("br", null),
-            React.createElement("div", null, props.isHinted ?
+            React.createElement("div", null, props.ishinted ?
                 React.createElement(React.Fragment, null,
-                    React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
-                        React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
+                    React.createElement(e, { content: props.hinttext || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
+                        React.createElement("a", { href: props.hinturl || "", target: "_blank", rel: "noopener noreferrer" },
                             React.createElement(Icon, { name: 'questionmarkcircled', height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null))));
 };
 
@@ -12482,14 +12482,14 @@ const CheckboxGroupInput = (_a) => {
             React.createElement("div", null,
                 React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
                 "\u00A0",
-                props.isHinted ?
+                props.ishinted ?
                     React.createElement(React.Fragment, null,
-                        React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
-                            React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
+                        React.createElement(e, { content: props.hinttext || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
+                            React.createElement("a", { href: props.hinturl || "", target: "_blank", rel: "noopener noreferrer" },
                                 React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
                 hasError ?
                     React.createElement(React.Fragment, null,
-                        React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || "Required field")) : null))));
+                        React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errortext || "Required field")) : null))));
 };
 
 const animationStyles = {
@@ -12562,14 +12562,14 @@ const ConditionalTrigger = (_a) => {
             React.createElement("div", null,
                 React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias, style: { cursor: 'pointer' } }, inputlabel),
                 "\u00A0",
-                props.isHinted ?
+                props.ishinted ?
                     React.createElement(React.Fragment, null,
-                        React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
-                            React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
+                        React.createElement(e, { content: props.hinttext || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
+                            React.createElement("a", { href: props.hinturl || "", target: "_blank", rel: "noopener noreferrer" },
                                 React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
                 hasError ?
                     React.createElement(React.Fragment, null,
-                        React.createElement("p", { id: errorId, className: 'core-input-label-error' }, typeof meta.error === 'string' ? React.createElement(React.Fragment, null, props.errorText || "Required field")
+                        React.createElement("p", { id: errorId, className: 'core-input-label-error' }, typeof meta.error === 'string' ? React.createElement(React.Fragment, null, props.errortext || "Required field")
                             : 'Invalid file selection')) : null))));
 };
 
@@ -21049,19 +21049,19 @@ const DatePicker = (_a) => {
             React.createElement("div", null,
                 React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
                 "\u00A0",
-                props.isHinted ?
+                props.ishinted ?
                     React.createElement(React.Fragment, null,
-                        React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
-                            React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
+                        React.createElement(e, { content: props.hinttext || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
+                            React.createElement("a", { href: props.hinturl || "", target: "_blank", rel: "noopener noreferrer" },
                                 React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
                 hasError ?
                     React.createElement(React.Fragment, null,
-                        React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || (meta.error || "Required field"))) : null))));
+                        React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errortext || (meta.error || "Required field"))) : null))));
 };
 
 const DateRangePicker = (_a) => {
     var _b, _c;
-    var { inputtype = 'daterangepicker-outline', alias, readOnly, width, inputlabel, placeholder = 'Pick a date range', value, minvalue, maxvalue, className, style } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputlabel", "placeholder", "value", "minvalue", "maxvalue", "className", "style"]);
+    var { inputtype = 'daterangepicker-outline', alias, readonly, width, inputlabel, placeholder = 'Pick a date range', value, minvalue, maxvalue, classname, style } = _a, props = __rest$1(_a, ["inputtype", "alias", "readonly", "width", "inputlabel", "placeholder", "value", "minvalue", "maxvalue", "classname", "style"]);
     const { setFieldValue, setFieldTouched } = formik.useFormikContext();
     const [field, meta] = formik.useField(alias);
     const hasError = Boolean(meta.touched && meta.error);
@@ -21131,8 +21131,8 @@ const DateRangePicker = (_a) => {
         // Material
         return Object.assign(Object.assign({}, base), { backgroundColor: 'var(--color-panel-solid)', border: 'none', boxShadow: '0 10px 38px -10px rgba(22, 23, 24, 0.35), 0 10px 20px -15px rgba(22, 23, 24, 0.2)' });
     }, [inputtype, neuVars]);
-    return (React.createElement(Column, { span: width, newLine: props.newRow },
-        React.createElement(p$5, { direction: "column", gap: "2", width: "100%", ref: containerRef, style: style, className: className },
+    return (React.createElement(Column, { span: width, newLine: props.newrow },
+        React.createElement(p$5, { direction: "column", gap: "2", width: "100%", ref: containerRef, style: style, className: classname },
             React.createElement("input", { type: "hidden", name: alias, value: JSON.stringify({
                     from: (_b = selectedRange.from) === null || _b === void 0 ? void 0 : _b.toISOString(),
                     to: (_c = selectedRange.to) === null || _c === void 0 ? void 0 : _c.toISOString()
@@ -21237,15 +21237,15 @@ const DateRangePicker = (_a) => {
       ` } }),
             React.createElement(P$1, { open: isOpen, onOpenChange: setIsOpen },
                 React.createElement(s$1, null,
-                    React.createElement(u, { variant: "surface", style: Object.assign({ cursor: 'pointer', height: inputtype === 'daterangepicker-neumorphic' ? '40px' : '32px' }, activeInputStyle), onClick: () => !readOnly && setIsOpen(true) },
+                    React.createElement(u, { variant: "surface", style: Object.assign({ cursor: 'pointer', height: inputtype === 'daterangepicker-neumorphic' ? '40px' : '32px' }, activeInputStyle), onClick: () => !readonly && setIsOpen(true) },
                         React.createElement(c, null,
                             React.createElement(Icon, { name: 'calendar', height: "16", width: "16", style: { color: 'var(--gray-10)' } })),
-                        React.createElement("input", { id: inputId, "aria-describedby": hasError ? errorId : `${alias}InputLabel`, readOnly: true, disabled: readOnly, value: displayText, placeholder: placeholder, style: {
+                        React.createElement("input", { id: inputId, "aria-describedby": hasError ? errorId : `${alias}InputLabel`, readOnly: true, disabled: readonly, value: displayText, placeholder: placeholder, style: {
                                 backgroundColor: 'transparent',
                                 border: 'none',
                                 outline: 'none',
                                 width: '100%',
-                                cursor: readOnly ? 'default' : 'pointer',
+                                cursor: readonly ? 'default' : 'pointer',
                                 color: 'inherit',
                                 fontFamily: 'inherit',
                                 fontSize: 'var(--font-size-2)',
@@ -21260,7 +21260,7 @@ const DateRangePicker = (_a) => {
                                     setIsOpen(false);
                                 }
                             }, disabled: [
-                                ...(readOnly ? [{ from: new Date(1900, 0, 1), to: new Date(2100, 0, 1) }] : []),
+                                ...(readonly ? [{ from: new Date(1900, 0, 1), to: new Date(2100, 0, 1) }] : []),
                                 { before: parsedMin || new Date(1900, 0, 1) },
                                 { after: parsedMax || new Date(2100, 0, 1) }
                             ], components: {
@@ -21274,18 +21274,18 @@ const DateRangePicker = (_a) => {
             React.createElement("div", null,
                 React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
                 "\u00A0",
-                props.isHinted ?
+                props.ishinted ?
                     React.createElement(React.Fragment, null,
-                        React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
-                            React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
+                        React.createElement(e, { content: props.hinttext || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
+                            React.createElement("a", { href: props.hinturl || "", target: "_blank", rel: "noopener noreferrer" },
                                 React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
                 hasError ?
                     React.createElement(React.Fragment, null,
-                        React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || (meta.error || "Required field"))) : null))));
+                        React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errortext || (meta.error || "Required field"))) : null))));
 };
 
 const DateTimePicker = (_a) => {
-    var { inputtype = 'datetimepicker-outline', alias, readonly, width, inputlabel, placeholder = 'Pick date & time', value, minvalue, maxvalue, className, style } = _a, props = __rest$1(_a, ["inputtype", "alias", "readonly", "width", "inputlabel", "placeholder", "value", "minvalue", "maxvalue", "className", "style"]);
+    var { inputtype = 'datetimepicker-outline', alias, readonly, width, inputlabel, placeholder = 'Pick date & time', value, minvalue, maxvalue, classname, style } = _a, props = __rest$1(_a, ["inputtype", "alias", "readonly", "width", "inputlabel", "placeholder", "value", "minvalue", "maxvalue", "classname", "style"]);
     const { setFieldValue, setFieldTouched } = formik.useFormikContext();
     const [field, meta] = formik.useField(alias);
     const hasError = Boolean(meta.touched && meta.error);
@@ -21366,8 +21366,8 @@ const DateTimePicker = (_a) => {
         // Material
         return Object.assign(Object.assign({}, base), { backgroundColor: 'var(--color-panel-solid)', border: 'none', boxShadow: '0 10px 38px -10px rgba(22, 23, 24, 0.35), 0 10px 20px -15px rgba(22, 23, 24, 0.2)' });
     }, [inputtype, neuVars]);
-    return (React.createElement(Column, { span: width, newLine: props.newRow },
-        React.createElement(p$5, { direction: "column", gap: "2", width: "100%", ref: containerRef, style: style, className: className },
+    return (React.createElement(Column, { span: width, newLine: props.newrow },
+        React.createElement(p$5, { direction: "column", gap: "2", width: "100%", ref: containerRef, style: style, className: classname },
             React.createElement("input", { type: "hidden", name: alias, value: selectedDate ? selectedDate.toISOString() : '' }),
             React.createElement("style", { dangerouslySetInnerHTML: { __html: `
         /* Reset & Layout */
@@ -21490,18 +21490,18 @@ const DateTimePicker = (_a) => {
             React.createElement("div", null,
                 React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
                 "\u00A0",
-                props.isHinted ?
+                props.ishinted ?
                     React.createElement(React.Fragment, null,
-                        React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
-                            React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
+                        React.createElement(e, { content: props.hinttext || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
+                            React.createElement("a", { href: props.hinturl || "", target: "_blank", rel: "noopener noreferrer" },
                                 React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
                 hasError ?
                     React.createElement(React.Fragment, null,
-                        React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || (meta.error || "Required field"))) : null))));
+                        React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errortext || (meta.error || "Required field"))) : null))));
 };
 
 const Dropdown = (_a) => {
-    var { inputtype = 'dropdown-outline', alias, readonly, width, inputlabel, placeholder, value, inputoptions, style } = _a, props = __rest$1(_a, ["inputtype", "alias", "readonly", "width", "inputlabel", "placeholder", "value", "inputoptions", "style"]);
+    var { inputtype = 'dropdown-outline', alias, readonly, width, inputlabel, placeholder, value, inputoptions, style, newrow, ishinted, hinttext, hinturl, defaultvalue, errortext } = _a, props = __rest$1(_a, ["inputtype", "alias", "readonly", "width", "inputlabel", "placeholder", "value", "inputoptions", "style", "newrow", "ishinted", "hinttext", "hinturl", "defaultvalue", "errortext"]);
     const triggerRef = React.useRef(null);
     const [neuVars, setNeuVars] = React.useState({});
     const { setFieldValue, setFieldTouched } = formik.useFormikContext();
@@ -21575,7 +21575,7 @@ const Dropdown = (_a) => {
         inputtype === 'dropdown-material' ? materialContent :
             inputtype === 'dropdown-outline' ? outlineContent : Object.assign(Object.assign({}, neumorphicContent), neuVars);
     return (React.createElement(React.Fragment, null,
-        React.createElement(Column, { span: width, newLine: props.newRow },
+        React.createElement(Column, { span: width, newLine: newrow },
             React.createElement(p$5, { direction: "column", gap: "2", style: { width: '100%' } },
                 inputtype === 'dropdown-neumorphic' && (React.createElement("style", { dangerouslySetInnerHTML: { __html: `
           .neu-select-trigger[data-state='open'] {
@@ -21587,19 +21587,20 @@ const Dropdown = (_a) => {
             cursor: pointer;
           }
         ` } })),
-                React.createElement(C$1, { name: alias, disabled: readonly, defaultValue: props.defaultValue || value, value: field.value, onValueChange: (val) => {
-                        setFieldValue(alias, val);
+                React.createElement(C$1, { name: alias, disabled: readonly, value: field.value || "", onValueChange: (val) => {
+                        const finalVal = val === "__RESET__" ? "" : val;
+                        setFieldValue(alias, finalVal);
                         setTimeout(() => setFieldTouched(alias, true), 0);
                         if (props.onValueChange)
-                            props.onValueChange(val);
+                            props.onValueChange(finalVal);
                     }, onOpenChange: (isOpen) => {
                         if (!isOpen) {
                             setFieldTouched(alias, true);
                         }
                     } },
-                    React.createElement(u$1, { id: `${alias}FormInput`, ref: triggerRef, variant: "ghost", placeholder: placeholder || "Select an option", className: `${inputtype === 'dropdown-neumorphic' ? 'neu-select-trigger' : ''} ${props.className || ''}`, style: Object.assign(Object.assign({}, activeTriggerStyle), style) }),
+                    React.createElement(u$1, Object.assign({ id: `${alias}FormInput`, ref: triggerRef, variant: "ghost", placeholder: placeholder || "Select an option", className: `${inputtype === 'dropdown-neumorphic' ? 'neu-select-trigger' : ''} ${props.classname || ''}`, style: Object.assign(Object.assign({}, activeTriggerStyle), style) }, props)),
                     React.createElement(g, { position: "popper", sideOffset: 5, style: activeContentStyle },
-                        React.createElement(v, { value: "", className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '', style: { color: 'var(--gray-10)', fontStyle: 'italic' } }, placeholder || "Select an option"),
+                        React.createElement(v, { value: "__RESET__", className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '', style: { color: 'var(--gray-10)', fontStyle: 'italic' } }, placeholder || "Select an option"),
                         React.createElement(o$2, { size: "4", style: { margin: '4px 0', opacity: 0.5 } }),
                         inputoptions.map((inputoption) => (React.createElement(React.Fragment, { key: inputoption.optionid || crypto.randomUUID() }, inputoption.optionurl ?
                             React.createElement(v, { id: String(inputoption.optionid) || '', value: inputoption.optionvalue, className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '' },
@@ -21609,14 +21610,14 @@ const Dropdown = (_a) => {
                 React.createElement("div", null,
                     React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
                     "\u00A0",
-                    props.isHinted ?
+                    ishinted ?
                         React.createElement(React.Fragment, null,
-                            React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
-                                React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
+                            React.createElement(e, { content: hinttext || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
+                                React.createElement("a", { href: hinturl || "", target: "_blank", rel: "noopener noreferrer" },
                                     React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
                     hasError ?
                         React.createElement(React.Fragment, null,
-                            React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || meta.error || "Required field")) : null)))));
+                            React.createElement("p", { id: errorId, className: 'core-input-label-error' }, errortext || meta.error || "Required field")) : null)))));
 };
 
 const getFileIcon$1 = (type, name) => {
@@ -21634,7 +21635,7 @@ const getFileIcon$1 = (type, name) => {
 };
 const File$1 = (_a) => {
     var _b;
-    var { inputtype = 'fileinput-outline', alias, readonly, width, inputlabel, placeholder = '', preview = false, className, style } = _a, props = __rest$1(_a, ["inputtype", "alias", "readonly", "width", "inputlabel", "placeholder", "preview", "className", "style"]);
+    var { inputtype = 'fileinput-outline', alias, readonly, width, inputlabel, placeholder = '', preview = false, classname, style } = _a, props = __rest$1(_a, ["inputtype", "alias", "readonly", "width", "inputlabel", "placeholder", "preview", "classname", "style"]);
     const { setFieldValue, setFieldTouched } = formik.useFormikContext();
     const [field, meta] = formik.useField(alias);
     const selectedFile = field.value;
@@ -21704,8 +21705,8 @@ const File$1 = (_a) => {
             : '6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light)', border: 'none' }), neuVars);
     const activeStyle = inputtype === 'fileinput-neumorphic' ? neumorphicTrigger :
         inputtype === 'fileinput-outline' ? outlineTrigger : materialTrigger;
-    return (React.createElement(Column, { span: width, newLine: props.newRow },
-        React.createElement(p$5, { direction: "column", gap: "2", width: "100%", ref: containerRef, style: style, className: className },
+    return (React.createElement(Column, { span: width, newLine: props.newrow },
+        React.createElement(p$5, { direction: "column", gap: "2", width: "100%", ref: containerRef, style: style, className: classname },
             React.createElement("input", { ref: inputRef, id: inputId, name: alias, readOnly: readonly, type: "file", accept: ACCEPTED_FORMATS, onChange: handleFileChange, style: { display: 'none' }, "aria-describedby": hasError ? errorId : undefined }),
             React.createElement("div", { onClick: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, style: activeStyle, onMouseEnter: (e) => {
                     if (inputtype === 'fileinput-outline')
@@ -21740,14 +21741,14 @@ const File$1 = (_a) => {
             React.createElement("div", null,
                 React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
                 "\u00A0",
-                props.isHinted ?
+                props.ishinted ?
                     React.createElement(React.Fragment, null,
-                        React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
-                            React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
+                        React.createElement(e, { content: props.hinttext || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
+                            React.createElement("a", { href: props.hinturl || "", target: "_blank", rel: "noopener noreferrer" },
                                 React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
                 hasError ?
                     React.createElement(React.Fragment, null,
-                        React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || "Required field")) : null))));
+                        React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errortext || "Required field")) : null))));
 };
 
 const getFileIcon = (fileOrUrl) => {
@@ -21797,7 +21798,7 @@ const styles = {
     }
 };
 const FileMultiple = (_a) => {
-    var { inputtype = 'filemultiple-outline', alias, readonly, width, inputlabel, placeholder = '', preview = true, className, style } = _a, props = __rest$1(_a, ["inputtype", "alias", "readonly", "width", "inputlabel", "placeholder", "preview", "className", "style"]);
+    var { inputtype = 'filemultiple-outline', alias, readonly, width, inputlabel, placeholder = '', preview = true, classname, style } = _a, props = __rest$1(_a, ["inputtype", "alias", "readonly", "width", "inputlabel", "placeholder", "preview", "classname", "style"]);
     const [field, meta] = formik.useField(alias);
     const { setFieldValue, setFieldTouched } = formik.useFormikContext();
     const inputRef = React.useRef(null);
@@ -21846,8 +21847,8 @@ const FileMultiple = (_a) => {
     };
     const isNeumorphic = inputtype === 'filemultiple-neumorphic';
     const hasError = meta.touched && meta.error;
-    return (React.createElement(Column, { span: width, newLine: props.newRow },
-        React.createElement(p$8, { className: className, style: style },
+    return (React.createElement(Column, { span: width, newLine: props.newrow },
+        React.createElement(p$8, { className: classname, style: style },
             React.createElement(p$8, { onClick: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, p: "4", style: Object.assign(Object.assign({}, styles[inputtype]), { cursor: 'pointer', transition: 'all 0.2s', borderColor: hasError ? 'var(--red-9)' : (styles[inputtype].borderBottom ? 'var(--accent-9)' : 'var(--gray-a8)'), position: 'relative' }) },
                 React.createElement(p$5, { align: "center", gap: "4" },
                     React.createElement(p$8, { style: {
@@ -21908,15 +21909,15 @@ const FileMultiple = (_a) => {
                 React.createElement("br", null),
                 React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
                 "\u00A0",
-                props.isHinted ?
+                props.ishinted ?
                     React.createElement(React.Fragment, null,
-                        React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
-                            React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
+                        React.createElement(e, { content: props.hinttext || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
+                            React.createElement("a", { href: props.hinturl || "", target: "_blank", rel: "noopener noreferrer" },
                                 React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
                 hasError ?
                     React.createElement(React.Fragment, null,
                         React.createElement("p", { id: errorId, className: 'core-input-label-error' }, typeof meta.error === 'string' ?
-                            React.createElement(React.Fragment, null, props.errorText || "Required field")
+                            React.createElement(React.Fragment, null, props.errortext || "Required field")
                             : 'Invalid file selection')) : null))));
 };
 
@@ -29211,10 +29212,10 @@ const getStyles = (design, layout) => {
     }
     return Object.assign(Object.assign({ borderRadius }, visualStyles), { position: 'relative', overflow: 'hidden', display: 'block' });
 };
-const ImageOutput = ({ id, src, alt = "Image", design = 'outline', layout = 'normal', aspectRatio = 16 / 9, height, width = '100%', className, style, onClick, }) => {
+const ImageOutput = ({ id, src, alt = "Image", design = 'outline', layout = 'normal', aspectratio = 16 / 9, height, width = '100%', classname, style, onClick, }) => {
     const containerStyles = getStyles(design, layout);
     const iconColor = design === 'neumorphic' ? '#555' : 'var(--gray-9)';
-    const content = (React.createElement(p$8, { className: className, style: Object.assign(Object.assign(Object.assign({}, containerStyles), { width, height: height || 'auto' }), style), onClick: onClick }, src ? (React.createElement("img", { id: String(id), src: src, alt: alt, style: {
+    const content = (React.createElement(p$8, { className: classname, style: Object.assign(Object.assign(Object.assign({}, containerStyles), { width, height: height || 'auto' }), style), onClick: onClick }, src ? (React.createElement("img", { id: String(id), src: src, alt: alt, style: {
             width: '100%',
             height: '100%',
             objectFit: 'cover',
@@ -29232,36 +29233,36 @@ const ImageOutput = ({ id, src, alt = "Image", design = 'outline', layout = 'nor
         return content;
     }
     return (React.createElement(p$8, { style: { width } },
-        React.createElement(i$9, { ratio: aspectRatio }, content)));
+        React.createElement(i$9, { ratio: aspectratio }, content)));
 };
 
 const Input$2 = (_a) => {
-    var { alias, inputtype = "text", width, inputlabel, readonly = false, placeholder = '', className, size = "2", style, inputVariant = 'input-outline' } = _a, props = __rest$1(_a, ["alias", "inputtype", "width", "inputlabel", "readonly", "placeholder", "className", "size", "style", "inputVariant"]);
+    var { alias, inputtype = "text", width, inputlabel, readonly = false, placeholder = '', className, size = "2", style, inputvariant = 'input-outline' } = _a, props = __rest$1(_a, ["alias", "inputtype", "width", "inputlabel", "readonly", "placeholder", "className", "size", "style", "inputvariant"]);
     const [inputField, meta] = formik.useField(alias);
     const hasError = Boolean(meta.touched && meta.error);
-    const variantClass = inputVariant !== 'input-outline' ? `input-${inputVariant}` : '';
+    const variantClass = inputvariant !== 'input-outline' ? `input-${inputvariant}` : '';
     const errorId = `${alias}-error`;
-    return (React.createElement(Column, { span: width, newLine: props.newRow },
+    return (React.createElement(Column, { span: width, newLine: props.newrow },
         React.createElement(u, Object.assign({ size: size, type: inputtype, id: `${alias}FormInput`, "aria-describedby": `${alias}InputLabel`, readOnly: readonly, placeholder: placeholder, color: hasError ? "red" : undefined, className: `${variantClass} ${className || ''}` }, inputField, props, { name: alias })),
         React.createElement("div", null,
             React.createElement("br", null),
             React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
             "\u00A0",
-            props.isHinted && (React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
-                React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
+            props.ishinted && (React.createElement(e, { content: props.hinttext || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
+                React.createElement("a", { href: props.hinturl || "", target: "_blank", rel: "noopener noreferrer" },
                     React.createElement(QuestionMarkCircledIcon, { height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
-            hasError && (React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || `Required field`)))));
+            hasError && (React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errortext || `Required field`)))));
 };
 
 const PasswordInput = (_a) => {
-    var { alias, inputlabel, width, readonly = false, placeholder = '', inputVariant = 'input-outline', size = "2", className } = _a, props = __rest$1(_a, ["alias", "inputlabel", "width", "readonly", "placeholder", "inputVariant", "size", "className"]);
+    var { alias, inputlabel, width, readonly = false, placeholder = '', inputvariant = 'input-outline', size = "2", className } = _a, props = __rest$1(_a, ["alias", "inputlabel", "width", "readonly", "placeholder", "inputvariant", "size", "className"]);
     const [showPassword, setShowPassword] = React.useState(false);
     const toggleVisibility = () => setShowPassword(!showPassword);
     const [field, meta] = formik.useField(alias);
     const hasError = Boolean(meta.touched && meta.error);
-    const variantClass = inputVariant !== 'input-outline' ? `input-${inputVariant}` : '';
+    const variantClass = inputvariant !== 'input-outline' ? `input-${inputvariant}` : '';
     const errorId = `${alias}-error`;
-    return (React.createElement(Column, { span: width, newLine: props.newRow },
+    return (React.createElement(Column, { span: width, newLine: props.newrow },
         React.createElement(u, Object.assign({ size: size, type: showPassword ? "text" : "password", id: `${alias}FormInput`, readOnly: readonly, "aria-describedby": `${alias}InputLabel`, placeholder: placeholder, color: hasError ? "red" : undefined, className: `${variantClass} ${className || ''}` }, field, props, { name: alias }),
             React.createElement(c, null,
                 React.createElement(Icon, { name: "lockclosed", height: "16", width: "16" })),
@@ -29272,10 +29273,10 @@ const PasswordInput = (_a) => {
             React.createElement("br", null),
             React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
             "\u00A0",
-            props.isHinted && (React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
-                React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
+            props.ishinted && (React.createElement(e, { content: props.hinttext || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
+                React.createElement("a", { href: props.hinturl || "", target: "_blank", rel: "noopener noreferrer" },
                     React.createElement(QuestionMarkCircledIcon, { height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
-            hasError && (React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || `Required field`)))));
+            hasError && (React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errortext || `Required field`)))));
 };
 
 // This file is a workaround for a bug in web browsers' "native"
@@ -36817,14 +36818,14 @@ var en = {
 };
 
 const PhoneInput = (_a) => {
-    var { alias, inputlabel, width, placeholder = "Phone Number", readonly, inputVariant = 'input-outline', size = "2", className } = _a, props = __rest$1(_a, ["alias", "inputlabel", "width", "placeholder", "readonly", "inputVariant", "size", "className"]);
+    var { alias, inputlabel, width, placeholder = "Phone Number", readonly, inputvariant = 'input-outline', size = "2", className } = _a, props = __rest$1(_a, ["alias", "inputlabel", "width", "placeholder", "readonly", "inputvariant", "size", "className"]);
     const { setFieldValue, setFieldTouched } = formik.useFormikContext();
     const [field, meta] = formik.useField(alias);
     const hasError = Boolean(meta.touched && meta.error);
     const [country, setCountry] = React.useState('US');
-    const variantClass = inputVariant !== 'input-outline' ? `input-${inputVariant}` : '';
+    const variantClass = inputvariant !== 'input-outline' ? `input-${inputvariant}` : '';
     const errorId = `${alias}-error`;
-    return (React.createElement(Column, { span: width, newLine: props.newRow },
+    return (React.createElement(Column, { span: width, newLine: props.newrow },
         React.createElement(p$5, { direction: "column", gap: "2", style: { width: '100%' } },
             React.createElement(u, Object.assign({ size: size, variant: "surface", color: hasError ? "red" : undefined, className: `${variantClass} ${className || ''}` }, props),
                 React.createElement(c, { style: { padding: 0 } },
@@ -36852,7 +36853,7 @@ const PhoneInput = (_a) => {
                                     "(+",
                                     getCountryCallingCode(c),
                                     ")")))))))),
-                React.createElement(Input, { country: country, international: false, withCountryCallingCode: false, limitMaxLength: true, value: field.value || '', onChange: (val) => setFieldValue(alias, val || ''), onBlur: () => setFieldTouched(alias, true), readOnly: readonly, placeholder: placeholder, id: `${alias}FormInput`, "aria-describedby": `${alias}InputLabel`, style: {
+                React.createElement(Input, { country: country, international: true, withCountryCallingCode: false, limitMaxLength: true, value: field.value || '', onChange: (val) => setFieldValue(alias, val || ''), onBlur: () => setFieldTouched(alias, true), readOnly: readonly, placeholder: placeholder, id: `${alias}FormInput`, "aria-describedby": `${alias}InputLabel`, style: {
                         flex: 1,
                         border: 'none',
                         outline: 'none',
@@ -36866,10 +36867,10 @@ const PhoneInput = (_a) => {
                     } })),
             React.createElement("div", { style: { marginTop: 4, display: 'flex', alignItems: 'center', gap: 6 } },
                 React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
-                props.isHinted && (React.createElement(e, { content: props.hintText || "No hint available" },
-                    React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { display: 'flex' } },
+                props.ishinted && (React.createElement(e, { content: props.hinttext || "No hint available" },
+                    React.createElement("a", { href: props.hinturl || "", target: "_blank", rel: "noopener noreferrer", style: { display: 'flex' } },
                         React.createElement(QuestionMarkCircledIcon, { height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
-                hasError && (React.createElement(p$d, { id: errorId, size: "1", color: "red", className: 'core-input-label-error' }, props.errorText || meta.error || `Required field`))))));
+                hasError && (React.createElement(p$d, { id: errorId, size: "1", color: "red", className: 'core-input-label-error' }, props.errortext || meta.error || `Required field`))))));
 };
 
 /** Checks if value is string */
@@ -40660,7 +40661,7 @@ const parseUuidFormat = (input) => {
 };
 
 const UUIDInput = (_a) => {
-    var { alias, type, inputLabel, width, delimiter = "-", format = [4, 4, 4, 4], placeholder = '', readOnly = false, inputVariant = 'input-outline', size = "2", className } = _a, props = __rest$1(_a, ["alias", "type", "inputLabel", "width", "delimiter", "format", "placeholder", "readOnly", "inputVariant", "size", "className"]);
+    var { alias, type, inputlabel, width, delimiter = "-", format = [4, 4, 4, 4], placeholder = '', readOnly = false, inputvariant = 'input-outline', size = "2", className } = _a, props = __rest$1(_a, ["alias", "type", "inputlabel", "width", "delimiter", "format", "placeholder", "readOnly", "inputvariant", "size", "className"]);
     const { setFieldValue, setFieldTouched } = formik.useFormikContext();
     const [field, meta] = formik.useField(alias);
     const hasError = Boolean(meta.touched && meta.error);
@@ -40687,8 +40688,8 @@ const UUIDInput = (_a) => {
         setCopied(true);
         setTimeout(() => setCopied(false), 2000);
     };
-    const variantClass = inputVariant !== 'input-outline' ? `input-${inputVariant}` : '';
-    return (React.createElement(Column, { span: width, newLine: props.newRow },
+    const variantClass = inputvariant !== 'input-outline' ? `input-${inputvariant}` : '';
+    return (React.createElement(Column, { span: width, newLine: props.newrow },
         React.createElement(p$5, { direction: "column", gap: "2", style: { width: '100%' } },
             React.createElement(u, Object.assign({ size: size, variant: "surface", color: hasError ? 'red' : undefined, className: `${variantClass} ${className || ''}` }, props),
                 React.createElement(IMaskInput, { id: `${alias}FormInput`, name: alias, "aria-describedby": `${alias}InputLabel`, readOnly: readOnly, mask: maskPattern, definitions: definitions, value: field.value || '', unmask: true, onAccept: (val) => setFieldValue(alias, val), onBlur: () => setFieldTouched(alias, true), placeholder: placeholder, style: {
@@ -40708,12 +40709,12 @@ const UUIDInput = (_a) => {
                     React.createElement(e, { content: copied ? "Copied!" : "Copy to clipboard" },
                         React.createElement(o$5, { size: "1", variant: "ghost", color: copied ? "green" : "gray", onClick: handleCopy, type: "button", disabled: !field.value }, copied ? React.createElement(CheckIcon, null) : React.createElement(CopyIcon, null))))),
             React.createElement("div", null,
-                React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel),
+                React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
                 "\u00A0",
-                props.isHinted && (React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
-                    React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
+                props.ishinted && (React.createElement(e, { content: props.hinttext || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
+                    React.createElement("a", { href: props.hinturl || "", target: "_blank", rel: "noopener noreferrer" },
                         React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
-                hasError && (React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || meta.error || `Required field`))))));
+                hasError && (React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errortext || meta.error || `Required field`))))));
 };
 
 var FaCcVisa = {};
@@ -42145,7 +42146,7 @@ var cardValidator = /*@__PURE__*/getDefaultExportFromCjs(distExports);
 
 const CreditCardInput = (_a) => {
     var _b;
-    var { alias, inputlabel, width, placeholder, readonly = false, inputVariant = 'input-outline', className } = _a, props = __rest$1(_a, ["alias", "inputlabel", "width", "placeholder", "readonly", "inputVariant", "className"]);
+    var { alias, inputlabel, width, placeholder, readonly = false, inputvariant = 'input-outline', classname } = _a, props = __rest$1(_a, ["alias", "inputlabel", "width", "placeholder", "readonly", "inputvariant", "classname"]);
     const { setFieldValue, setFieldTouched } = formik.useFormikContext();
     const [field, meta] = formik.useField(alias);
     const hasError = Boolean(meta.touched && meta.error);
@@ -42164,11 +42165,11 @@ const CreditCardInput = (_a) => {
             default: return React.createElement(FaCreditCardExports.FaCreditCard, { color: "var(--gray-8)", size: "20" });
         }
     };
-    const variantClass = inputVariant !== 'input-outline' ? `input-${inputVariant}` : '';
-    const isOutline = inputVariant === 'input-outline';
-    return (React.createElement(Column, { span: width, newLine: props.newRow },
+    const variantClass = inputvariant !== 'input-outline' ? `input-${inputvariant}` : '';
+    const isOutline = inputvariant === 'input-outline';
+    return (React.createElement(Column, { span: width, newLine: props.newrow },
         React.createElement(p$5, { direction: "column", gap: "2", style: { width: '100%' } },
-            React.createElement(p$5, { align: "center", className: `rt-TextFieldRoot rt-r-size-2 rt-variant-surface ${variantClass} ${className || ''}`, style: {
+            React.createElement(p$5, { align: "center", className: `rt-TextFieldRoot rt-r-size-2 rt-variant-surface ${variantClass} ${classname || ''}`, style: {
                     width: '100%',
                     boxShadow: (isOutline && hasError) ? 'inset 0 0 0 1px var(--red-9)' : undefined,
                     backgroundColor: isOutline ? 'var(--color-surface)' : undefined,
@@ -42191,10 +42192,10 @@ const CreditCardInput = (_a) => {
             React.createElement("div", { style: { marginTop: 4, display: 'flex', alignItems: 'center', gap: 6 } },
                 React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
                 "\u00A0",
-                props.isHinted && (React.createElement(e, { content: props.hintText || "No hint available" },
-                    React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { display: 'flex' } },
+                props.ishinted && (React.createElement(e, { content: props.hinttext || "No hint available" },
+                    React.createElement("a", { href: props.hinturl || "", target: "_blank", rel: "noopener noreferrer", style: { display: 'flex' } },
                         React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
-                hasError && (React.createElement(p$d, { id: errorId, size: "1", color: "red", className: 'core-input-label-error' }, props.errorText || `Required field`))))));
+                hasError && (React.createElement(p$d, { id: errorId, size: "1", color: "red", className: 'core-input-label-error' }, props.errortext || `Required field`))))));
 };
 
 const CURRENCIES = {
@@ -42266,7 +42267,7 @@ const CURRENCIES = {
 };
 
 const CurrencyInput = (_a) => {
-    var { alias, inputtype = "currency", inputlabel, width, defaultValue = "USD", placeholder, readOnly = false, inputVariant = 'input-outline', className } = _a, props = __rest$1(_a, ["alias", "inputtype", "inputlabel", "width", "defaultValue", "placeholder", "readOnly", "inputVariant", "className"]);
+    var { alias, inputtype = "currency", inputlabel, width, defaultvalue = "USD", placeholder, readonly = false, inputvariant = 'input-outline', classname } = _a, props = __rest$1(_a, ["alias", "inputtype", "inputlabel", "width", "defaultvalue", "placeholder", "readonly", "inputvariant", "classname"]);
     const { setFieldValue, setFieldTouched } = formik.useFormikContext();
     const [amountField, amountMeta] = formik.useField(alias);
     const currencyAlias = `${alias}Currency`;
@@ -42276,24 +42277,24 @@ const CurrencyInput = (_a) => {
             currencyHelpers.setValue(inputtype);
         }
         else if (!currencyField.value) {
-            currencyHelpers.setValue(defaultValue);
+            currencyHelpers.setValue(defaultvalue);
         }
-    }, [inputtype, defaultValue]);
+    }, [inputtype, defaultvalue]);
     const hasError = Boolean(amountMeta.touched && amountMeta.error);
     const currentCode = currencyField.value || "USD";
     const activeCurrency = CURRENCIES[currentCode] || CURRENCIES.USD;
-    const variantClass = inputVariant !== 'input-outline' ? `input-${inputVariant}` : '';
-    const isOutline = inputVariant === 'input-outline';
+    const variantClass = inputvariant !== 'input-outline' ? `input-${inputvariant}` : '';
+    const isOutline = inputvariant === 'input-outline';
     const errorId = `${alias}-error`;
     return (React.createElement(Column, { span: width, newLine: props.newRow },
         React.createElement(p$5, { direction: "column", gap: "2", style: { width: '100%' } },
-            React.createElement(p$5, { align: "center", className: `rt-TextFieldRoot rt-r-size-2 rt-variant-surface ${variantClass} ${className || ''}`, style: {
+            React.createElement(p$5, { align: "center", className: `rt-TextFieldRoot rt-r-size-2 rt-variant-surface ${variantClass} ${classname || ''}`, style: {
                     width: '100%',
                     boxShadow: (isOutline && hasError) ? 'inset 0 0 0 1px var(--red-9)' : undefined,
                     backgroundColor: isOutline ? 'var(--color-surface)' : undefined,
                     cursor: 'text'
                 } },
-                React.createElement(C$1, { value: activeCurrency.code, onValueChange: (val) => setFieldValue(currencyAlias, val), disabled: readOnly || inputtype !== "currency" },
+                React.createElement(C$1, { value: activeCurrency.code, onValueChange: (val) => setFieldValue(currencyAlias, val), disabled: readonly || inputtype !== "currency" },
                     React.createElement(u$1, { variant: "ghost", style: {
                             height: '100%',
                             padding: '0 8px 0 12px',
@@ -42318,13 +42319,13 @@ const CurrencyInput = (_a) => {
                 React.createElement(IMaskInput, Object.assign({ id: `${alias}FormInput`, name: alias, "aria-describedby": `${alias}InputLabel` }, {
                     mask: Number,
                     scale: activeCurrency.scale,
-                    signed: false,
+                    signed: String(false),
                     thousandsSeparator: ",",
                     padFractionalZeros: true,
                     normalizeZeros: true,
                     radix: ".",
                     mapToRadix: ['.'],
-                }, { value: amountField.value !== undefined && amountField.value !== null ? String(amountField.value) : '', unmask: true, onAccept: (val) => setFieldValue(alias, val), onBlur: () => setFieldTouched(alias, true), readOnly: readOnly, placeholder: placeholder || '0.00', style: {
+                }, { value: amountField.value !== undefined && amountField.value !== null ? String(amountField.value) : '', unmask: true, onAccept: (val) => setFieldValue(alias, val), onBlur: () => setFieldTouched(alias, true), readOnly: readonly, placeholder: placeholder || '0.00', style: {
                         flex: 1,
                         border: 'none',
                         outline: 'none',
@@ -42340,10 +42341,10 @@ const CurrencyInput = (_a) => {
             React.createElement("div", null,
                 React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
                 "\u00A0",
-                props.isHinted && (React.createElement(e, { content: props.hintText || "No hint available" },
-                    React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { display: 'flex' } },
+                props.ishinted && (React.createElement(e, { content: props.hinttext || "No hint available" },
+                    React.createElement("a", { href: props.hinturl || "", target: "_blank", rel: "noopener noreferrer", style: { display: 'flex' } },
                         React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
-                hasError && (React.createElement(p$d, { id: errorId, size: "1", color: "red", className: 'core-input-label-error' }, props.errorText || amountMeta.error || `Required field`))))));
+                hasError && (React.createElement(p$d, { id: errorId, size: "1", color: "red", className: 'core-input-label-error' }, props.errortext || amountMeta.error || `Required field`))))));
 };
 
 var FaChartLine = {};
@@ -42364,16 +42365,16 @@ function requireFaChartLine () {
 var FaChartLineExports = /*@__PURE__*/ requireFaChartLine();
 
 const StockInput = (_a) => {
-    var { alias, inputlabel, width, defaultValue, placeholder, readOnly = false, inputVariant = 'input-outline', className } = _a, props = __rest$1(_a, ["alias", "inputlabel", "width", "defaultValue", "placeholder", "readOnly", "inputVariant", "className"]);
+    var { alias, inputlabel, width, defaultvalue, placeholder, readonly = false, inputvariant = 'input-outline', classname } = _a, props = __rest$1(_a, ["alias", "inputlabel", "width", "defaultvalue", "placeholder", "readonly", "inputvariant", "classname"]);
     const { setFieldValue, setFieldTouched } = formik.useFormikContext();
     const [priceField, meta] = formik.useField(alias);
     const hasError = Boolean(meta.touched && meta.error);
-    const variantClass = inputVariant !== 'input-outline' ? `input-${inputVariant}` : '';
-    const isOutline = inputVariant === 'input-outline';
+    const variantClass = inputvariant !== 'input-outline' ? `input-${inputvariant}` : '';
+    const isOutline = inputvariant === 'input-outline';
     const errorId = `${alias}-error`;
-    return (React.createElement(Column, { span: width, newLine: props.newRow },
+    return (React.createElement(Column, { span: width, newLine: props.newrow },
         React.createElement(p$5, { direction: "column", gap: "2", style: { width: '100%' } },
-            React.createElement(p$5, { align: "center", justify: "between", className: `rt-TextFieldRoot rt-r-size-2 rt-variant-surface ${variantClass} ${className || ''}`, style: {
+            React.createElement(p$5, { align: "center", justify: "between", className: `rt-TextFieldRoot rt-r-size-2 rt-variant-surface ${variantClass} ${classname || ''}`, style: {
                     width: '100%',
                     height: 'var(--space-6)',
                     boxShadow: (isOutline)
@@ -42395,11 +42396,11 @@ const StockInput = (_a) => {
                         letterSpacing: '0.05em',
                         fontWeight: 600,
                         userSelect: 'none'
-                    } }, defaultValue || React.createElement(FaChartLineExports.FaChartLine, null)),
+                    } }, defaultvalue || React.createElement(FaChartLineExports.FaChartLine, null)),
                 React.createElement(p$5, { align: "center", style: { flex: 1, height: '100%', justifyContent: 'flex-end' } },
-                    React.createElement(IMaskInput, { id: `${alias}FormInput`, name: alias, "aria-describedby": `${alias}InputLabel`, mask: Number, scale: 2, readOnly: readOnly, 
+                    React.createElement(IMaskInput, { id: `${alias}FormInput`, name: alias, "aria-describedby": `${alias}InputLabel`, mask: Number, scale: 2, readOnly: readonly, 
                         // @ts-expect-error: known library type definition gap
-                        signed: false, thousandsSeparator: ",", padFractionalZeros: true, normalizeZeros: true, radix: ".", mapToRadix: ['.'], value: priceField.value !== undefined && priceField.value !== null ? String(priceField.value) : '', unmask: true, onAccept: (val) => setFieldValue(alias, val), onBlur: () => setFieldTouched(alias, true), placeholder: placeholder || "0.00", style: {
+                        signed: String(false), thousandsSeparator: ",", padFractionalZeros: true, normalizeZeros: true, radix: ".", mapToRadix: ['.'], value: priceField.value !== undefined && priceField.value !== null ? String(priceField.value) : '', unmask: true, onAccept: (val) => setFieldValue(alias, val), onBlur: () => setFieldTouched(alias, true), placeholder: placeholder || "0.00", style: {
                             border: 'none',
                             outline: 'none',
                             background: 'transparent',
@@ -42414,14 +42415,14 @@ const StockInput = (_a) => {
             React.createElement("div", null,
                 React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
                 "\u00A0",
-                props.isHinted && (React.createElement(e, { content: props.hintText || "No hint available" },
-                    React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { display: 'flex' } },
+                props.ishinted && (React.createElement(e, { content: props.hinttext || "No hint available" },
+                    React.createElement("a", { href: props.hinturl || "", target: "_blank", rel: "noopener noreferrer", style: { display: 'flex' } },
                         React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
-                hasError && (React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || `Required field`))))));
+                hasError && (React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errortext || `Required field`))))));
 };
 
 const RadioGroupInput = (_a) => {
-    var { inputtype = 'radio-outline', alias, readOnly, width, inputlabel, placeholder = '', style, inputoptions, direction = 'column', columns, className } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputlabel", "placeholder", "style", "inputoptions", "direction", "columns", "className"]);
+    var { inputtype = 'radio-outline', alias, readonly, width, inputlabel, placeholder = '', style, inputoptions, direction = 'column', columns, classname } = _a, props = __rest$1(_a, ["inputtype", "alias", "readonly", "width", "inputlabel", "placeholder", "style", "inputoptions", "direction", "columns", "classname"]);
     const { setFieldValue, setFieldTouched } = formik.useFormikContext();
     const [field, meta] = formik.useField(alias);
     const hasError = Boolean(meta.touched && meta.error);
@@ -42439,8 +42440,8 @@ const RadioGroupInput = (_a) => {
             });
         }
     }, [inputtype]);
-    return (React.createElement(Column, { span: width, newLine: props.newRow },
-        React.createElement(p$5, { direction: "column", gap: "2", width: "100%", ref: containerRef, style: style, className: className },
+    return (React.createElement(Column, { span: width, newLine: props.newrow },
+        React.createElement(p$5, { direction: "column", gap: "2", width: "100%", ref: containerRef, style: style, className: classname },
             inputtype === 'radio-neumorphic' && (React.createElement("style", { dangerouslySetInnerHTML: { __html: `
           /* Target the specific Radio Item button class */
           .neu-radio .rt-RadioGroupItem { 
@@ -42475,7 +42476,7 @@ const RadioGroupInput = (_a) => {
             transform: none; /* Don't scale if pressed in */
           }
         ` } })),
-            React.createElement(I$1, { name: alias, id: `${alias}FormInput`, "aria-describedby": `${alias}InputLabel`, disabled: readOnly, value: field.value, onValueChange: (val) => {
+            React.createElement(I$1, { name: alias, id: `${alias}FormInput`, "aria-describedby": `${alias}InputLabel`, disabled: readonly, value: field.value, onValueChange: (val) => {
                     setFieldValue(alias, val);
                     setTimeout(() => setFieldTouched(alias, true), 0);
                 } },
@@ -42492,10 +42493,10 @@ const RadioGroupInput = (_a) => {
             React.createElement("div", null,
                 React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
                 "\u00A0",
-                props.isHinted ?
+                props.ishinted ?
                     React.createElement(React.Fragment, null,
-                        React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
-                            React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
+                        React.createElement(e, { content: props.hinttext || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
+                            React.createElement("a", { href: props.hinturl || "", target: "_blank", rel: "noopener noreferrer" },
                                 React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
                 hasError ?
                     React.createElement(React.Fragment, null,
@@ -42503,7 +42504,7 @@ const RadioGroupInput = (_a) => {
 };
 
 const OptionSelect = (_a) => {
-    var { inputtype = 'select-outline', alias, readOnly, width, inputlabel, placeholder, style, inputoptions, className } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputlabel", "placeholder", "style", "inputoptions", "className"]);
+    var { inputtype = 'dropdown-outline', alias, readonly, width, inputlabel, placeholder, value, inputoptions, style, newRow, ishinted, hinttext, hinturl, defaultvalue, errortext } = _a, props = __rest$1(_a, ["inputtype", "alias", "readonly", "width", "inputlabel", "placeholder", "value", "inputoptions", "style", "newRow", "ishinted", "hinttext", "hinturl", "defaultvalue", "errortext"]);
     const triggerRef = React.useRef(null);
     const [neuVars, setNeuVars] = React.useState({});
     const { setFieldValue, setFieldTouched } = formik.useFormikContext();
@@ -42511,7 +42512,7 @@ const OptionSelect = (_a) => {
     const hasError = Boolean(meta.touched && meta.error);
     const errorId = `${alias}-error`;
     React.useEffect(() => {
-        if (inputtype === 'select-neumorphic' && triggerRef.current) {
+        if (inputtype === 'dropdown-neumorphic' && triggerRef.current) {
             const parentBg = getNearestParentBackground(triggerRef.current.parentElement);
             const shadowDark = adjustColor(parentBg, -30);
             const shadowLight = adjustColor(parentBg, 30);
@@ -42523,25 +42524,37 @@ const OptionSelect = (_a) => {
             });
         }
     }, [inputtype]);
+    const openLink = (inputUrl) => {
+        window.open(inputUrl, '_blank', 'noopener,noreferrer');
+    };
     // --- STYLES ---
     const materialTrigger = {
         backgroundColor: 'var(--color-surface)',
-        border: hasError ? '1px solid var(--red-9)' : 'none',
+        border: 'none',
         boxShadow: '0 2px 5px rgba(0,0,0,0.1)',
         borderRadius: '4px',
         height: '32px',
         fontWeight: 500,
     };
+    const materialContent = {
+        borderRadius: '4px',
+        boxShadow: '0 5px 15px rgba(0,0,0,0.2)',
+    };
     const outlineTrigger = {
         backgroundColor: 'transparent',
-        border: hasError ? '2px solid var(--red-9)' : '2px solid var(--gray-7)',
+        border: '2px solid var(--gray-7)',
         borderRadius: '4px',
         height: '32px',
         fontWeight: 600,
     };
+    const outlineContent = {
+        border: '2px solid var(--gray-7)',
+        borderRadius: '4px',
+        boxShadow: 'none',
+    };
     const neumorphicTrigger = {
         backgroundColor: 'var(--neu-bg)',
-        color: hasError ? 'var(--red-9)' : 'var(--neu-text)',
+        color: 'var(--neu-text)',
         border: 'none',
         borderRadius: '12px',
         height: '40px',
@@ -42550,52 +42563,63 @@ const OptionSelect = (_a) => {
         boxShadow: '6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light)',
         transition: 'all 0.2s ease',
     };
-    const activeTriggerStyle = inputtype === 'select' ? materialTrigger :
-        inputtype === 'select-material' ? materialTrigger :
-            inputtype === 'select-outline' ? outlineTrigger : Object.assign(Object.assign({}, neumorphicTrigger), neuVars);
-    return (React.createElement(Column, { span: width, newLine: props.newRow },
+    const neumorphicContent = {
+        backgroundColor: 'var(--neu-bg)',
+        borderRadius: '12px',
+        border: 'none',
+        boxShadow: '6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light)',
+    };
+    const activeTriggerStyle = inputtype === 'dropdown' ? materialTrigger :
+        inputtype === 'dropdown-material' ? materialTrigger :
+            inputtype === 'dropdown-outline' ? outlineTrigger : Object.assign(Object.assign({}, neumorphicTrigger), neuVars);
+    const activeContentStyle = inputtype === 'dropdown' ? materialContent :
+        inputtype === 'dropdown-material' ? materialContent :
+            inputtype === 'dropdown-outline' ? outlineContent : Object.assign(Object.assign({}, neumorphicContent), neuVars);
+    return (React.createElement(Column, { span: width, newLine: newRow },
         React.createElement(p$5, { direction: "column", gap: "2", style: { width: '100%' } },
-            inputtype === 'select-neumorphic' && (React.createElement("style", { dangerouslySetInnerHTML: { __html: `
-                    .neu-select-trigger[data-state='open'] {
-                        box-shadow: inset 6px 6px 12px var(--neu-shadow-dark), 
-                                    inset -6px -6px 12px var(--neu-shadow-light) !important;
-                    }
-                    .neu-select-item:hover {
-                        background-color: rgba(0,0,0,0.05) !important;
-                        cursor: pointer;
-                    }
-                ` } })),
-            React.createElement(C$1, { name: alias, disabled: readOnly, "aria-describedby": `${alias}InputLabel`, defaultValue: props.defaultValue, value: field.value, onValueChange: (val) => {
-                    setFieldValue(alias, val);
+            inputtype === 'dropdown-neumorphic' && (React.createElement("style", { dangerouslySetInnerHTML: { __html: `
+            .neu-select-trigger[data-state='open'] {
+              box-shadow: inset 6px 6px 12px var(--neu-shadow-dark), 
+                          inset -6px -6px 12px var(--neu-shadow-light) !important;
+            }
+            .neu-select-item:hover {
+              background-color: rgba(0,0,0,0.05) !important;
+              cursor: pointer;
+            }
+          ` } })),
+            React.createElement(C$1, { name: alias, disabled: readonly, value: field.value || "", onValueChange: (val) => {
+                    const finalVal = val === "__RESET__" ? "" : val;
+                    setFieldValue(alias, finalVal);
                     setTimeout(() => setFieldTouched(alias, true), 0);
                     if (props.onValueChange)
-                        props.onValueChange(val);
+                        props.onValueChange(finalVal);
                 }, onOpenChange: (isOpen) => {
                     if (!isOpen) {
                         setFieldTouched(alias, true);
                     }
                 } },
-                React.createElement(u$1, { id: `${alias}FormInput`, ref: triggerRef, variant: "ghost", placeholder: placeholder || "Select an option", className: `${inputtype === 'select-neumorphic' ? 'neu-select-trigger' : ''} ${className || ''}`, style: Object.assign(Object.assign({}, activeTriggerStyle), style) }),
-                React.createElement(g, { position: "popper", sideOffset: 5 },
-                    React.createElement(v, { value: "", className: inputtype === 'select-neumorphic' ? 'neu-select-item' : '', style: { color: 'var(--gray-10)', fontStyle: 'italic' } }, placeholder || "Select an option"),
+                React.createElement(u$1, Object.assign({ id: `${alias}FormInput`, ref: triggerRef, variant: "ghost", placeholder: placeholder || "Select an option", className: `${inputtype === 'dropdown-neumorphic' ? 'neu-select-trigger' : ''} ${props.className || ''}`, style: Object.assign(Object.assign({}, activeTriggerStyle), style) }, props)),
+                React.createElement(g, { position: "popper", sideOffset: 5, style: activeContentStyle },
+                    React.createElement(v, { value: "__RESET__", className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '', style: { color: 'var(--gray-10)', fontStyle: 'italic' } }, placeholder || "Select an option"),
                     React.createElement(o$2, { size: "4", style: { margin: '4px 0', opacity: 0.5 } }),
-                    inputoptions.map((option) => (React.createElement(v, { id: String(option.optionid) || '', key: option.optionid, value: option.optionvalue, className: inputtype === 'select-neumorphic' ? 'neu-select-item' : '' }, option.text))))),
+                    inputoptions.map((inputoption) => (React.createElement(React.Fragment, { key: inputoption.optionid || crypto.randomUUID() }, inputoption.optionurl ? (React.createElement(v, { id: String(inputoption.optionid) || '', value: inputoption.optionvalue, className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '' },
+                        React.createElement("a", { onClick: (e) => { e.stopPropagation(); openLink(inputoption.optionurl || "#"); }, style: { textDecoration: 'none', color: 'inherit' } }, inputoption.text))) : (React.createElement(v, { id: String(inputoption.optionid) || '', value: inputoption.optionvalue, className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '' }, inputoption.text))))))),
             React.createElement("div", null,
                 React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
                 "\u00A0",
-                props.isHinted ?
+                ishinted ?
                     React.createElement(React.Fragment, null,
-                        React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
-                            React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
+                        React.createElement(e, { content: hinttext || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
+                            React.createElement("a", { href: hinturl || "", target: "_blank", rel: "noopener noreferrer" },
                                 React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
                 hasError ?
                     React.createElement(React.Fragment, null,
-                        React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || (meta.error || "Required field"))) : null))));
+                        React.createElement("p", { id: errorId, className: 'core-input-label-error' }, errortext || meta.error || "Required field")) : null))));
 };
 
 const MultipleSelect = (_a) => {
     var _b;
-    var { inputtype = 'multiselect-outline', alias, readOnly, width, inputlabel, placeholder = '', style, inputoptions, className } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputlabel", "placeholder", "style", "inputoptions", "className"]);
+    var { inputtype = 'multiselect-outline', alias, readonly, width, inputlabel, placeholder = '', style, inputoptions, classname } = _a, props = __rest$1(_a, ["inputtype", "alias", "readonly", "width", "inputlabel", "placeholder", "style", "inputoptions", "classname"]);
     const { setFieldValue, setFieldTouched } = formik.useFormikContext();
     const [field, meta] = formik.useField(alias);
     const selectedValues = (Array.isArray(field.value) ? field.value : []);
@@ -42651,12 +42675,12 @@ const MultipleSelect = (_a) => {
             : '6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light)', transition: 'all 0.2s ease' });
     const activeTrigger = inputtype === 'multiselect-material' ? materialTrigger :
         inputtype === 'multiselect-outline' ? outlineTrigger : Object.assign(Object.assign({}, neumorphicTrigger), neuVars);
-    return (React.createElement(Column, { span: width, newLine: props.newRow },
+    return (React.createElement(Column, { span: width, newLine: props.newrow },
         React.createElement(p$5, { direction: "column", gap: "2", style: { width: '100%' } },
             React.createElement("input", { type: "hidden", name: alias, value: JSON.stringify(selectedValues) }),
             React.createElement(P$1, { onOpenChange: setIsOpen },
                 React.createElement(s$1, null,
-                    React.createElement("button", { id: `${alias}FormInput`, type: "button", ref: triggerRef, className: className, style: Object.assign(Object.assign({}, activeTrigger), style), "aria-describedby": `${alias}InputLabel` },
+                    React.createElement("button", { id: `${alias}FormInput`, type: "button", ref: triggerRef, className: classname, style: Object.assign(Object.assign({}, activeTrigger), style), "aria-describedby": `${alias}InputLabel` },
                         React.createElement("span", { style: {
                                 overflow: 'hidden',
                                 textOverflow: 'ellipsis',
@@ -42676,24 +42700,24 @@ const MultipleSelect = (_a) => {
                                         backgroundColor: isSelected ? 'var(--accent-a3)' : 'transparent',
                                         transition: 'background-color 0.1s'
                                     }, className: "multiselect-item" },
-                                    React.createElement(c$2, { disabled: readOnly, checked: isSelected, style: { pointerEvents: 'none' } }),
+                                    React.createElement(c$2, { disabled: readonly, checked: isSelected, style: { pointerEvents: 'none' } }),
                                     React.createElement(p$d, { size: "2" }, inputoption.text)));
                             })))))),
             React.createElement("div", null,
                 React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
                 "\u00A0",
-                props.isHinted ?
+                props.ishinted ?
                     React.createElement(React.Fragment, null,
-                        React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
-                            React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
+                        React.createElement(e, { content: props.hinttext || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
+                            React.createElement("a", { href: props.hinturl || "", target: "_blank", rel: "noopener noreferrer" },
                                 React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
                 hasError ?
                     React.createElement(React.Fragment, null,
-                        React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || `Required field`)) : null))));
+                        React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errortext || `Required field`)) : null))));
 };
 
 const SliderInput = (_a) => {
-    var { inputtype = 'slider-outline', alias, readOnly, width, inputlabel, placeholder = '', minvalue = 0, maxvalue = 100, stepvalue = 1, className, style } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputlabel", "placeholder", "minvalue", "maxvalue", "stepvalue", "className", "style"]);
+    var { inputtype = 'slider-outline', alias, readonly, width, inputlabel, placeholder = '', minvalue = 0, maxvalue = 100, stepvalue = 1, className, style } = _a, props = __rest$1(_a, ["inputtype", "alias", "readonly", "width", "inputlabel", "placeholder", "minvalue", "maxvalue", "stepvalue", "className", "style"]);
     const { setFieldValue, setFieldTouched } = formik.useFormikContext();
     const [field, meta] = formik.useField(alias);
     const fieldValue = Array.isArray(field.value) ? field.value : [field.value || minvalue];
@@ -42712,7 +42736,7 @@ const SliderInput = (_a) => {
             });
         }
     }, [inputtype]);
-    return (React.createElement(Column, { span: width, newLine: props.newRow },
+    return (React.createElement(Column, { span: width, newLine: props.newrow },
         React.createElement(p$5, { direction: "column", gap: "3", width: "100%", ref: containerRef, style: style, className: className },
             React.createElement(p$5, { justify: "between", align: "center" },
                 React.createElement(p$d, { size: "2", color: "gray", style: { fontVariantNumeric: 'tabular-nums' } }, fieldValue[0])),
@@ -42773,7 +42797,7 @@ const SliderInput = (_a) => {
            box-shadow: none;
         }
       ` } }),
-            React.createElement(s, { name: alias, id: `${alias}FormInput`, disabled: readOnly, "aria-describedby": `${alias}InputLabel`, min: minvalue, max: maxvalue, step: stepvalue, value: fieldValue, onValueChange: (val) => {
+            React.createElement(s, { name: alias, id: `${alias}FormInput`, disabled: readonly, "aria-describedby": `${alias}InputLabel`, min: minvalue, max: maxvalue, step: stepvalue, value: fieldValue, onValueChange: (val) => {
                     // Formik Implementation - For array, pass 'val' directly
                     setFieldValue(alias, val[0]);
                 }, onValueCommit: () => {
@@ -42782,14 +42806,14 @@ const SliderInput = (_a) => {
             React.createElement("div", null,
                 React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
                 "\u00A0",
-                props.isHinted ?
+                props.ishinted ?
                     React.createElement(React.Fragment, null,
-                        React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
-                            React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
+                        React.createElement(e, { content: props.hinttext || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
+                            React.createElement("a", { href: props.hinturl || "", target: "_blank", rel: "noopener noreferrer" },
                                 React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
                 hasError ?
                     React.createElement(React.Fragment, null,
-                        React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || `Required field`)) : null))));
+                        React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errortext || `Required field`)) : null))));
 };
 
 const RangeSlider = (_a) => {
@@ -42819,7 +42843,7 @@ const RangeSlider = (_a) => {
             });
         }
     }, [inputtype]);
-    return (React.createElement(Column, { span: width, newLine: props.newRow },
+    return (React.createElement(Column, { span: width, newLine: props.newrow },
         React.createElement(p$5, { direction: "column", gap: "3", width: "100%", ref: containerRef, style: style, className: className },
             React.createElement(p$5, { justify: "between", align: "center" },
                 React.createElement(p$d, { size: "2", color: "gray", style: { fontVariantNumeric: 'tabular-nums' } }, fieldValue.join(' - '))),
@@ -42862,18 +42886,18 @@ const RangeSlider = (_a) => {
             React.createElement("div", null,
                 React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
                 "\u00A0",
-                props.isHinted ?
+                props.ishinted ?
                     React.createElement(React.Fragment, null,
-                        React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
-                            React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
+                        React.createElement(e, { content: props.hinttext || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
+                            React.createElement("a", { href: props.hinturl || "", target: "_blank", rel: "noopener noreferrer" },
                                 React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
                 hasError ?
                     React.createElement(React.Fragment, null,
-                        React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || `Required field`)) : null))));
+                        React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errortext || `Required field`)) : null))));
 };
 
 const Toggle = (_a) => {
-    var { inputtype = 'toggle-neumorphic', alias, readOnly, width, inputLabel, style, children, newRow, isHinted, hintText, hintUrl, icon = 'stack' } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "style", "children", "newRow", "isHinted", "hintText", "hintUrl", "icon"]);
+    var { inputtype = 'toggle-neumorphic', alias, readonly, width, inputlabel, style, children, newrow, ishinted, hinttext, hinturl, icon = 'stack' } = _a, props = __rest$1(_a, ["inputtype", "alias", "readonly", "width", "inputlabel", "style", "children", "newrow", "ishinted", "hinttext", "hinturl", "icon"]);
     const { setFieldValue, setFieldTouched } = formik.useFormikContext();
     const [field, meta] = formik.useField(alias);
     const hasError = Boolean(meta.touched && meta.error);
@@ -42908,14 +42932,14 @@ const Toggle = (_a) => {
         transition: 'all 0.1s ease',
     };
     const handleToggle = (val) => {
-        if (!readOnly) {
+        if (!readonly) {
             setFieldValue(alias, val);
             setFieldTouched(alias, true);
         }
     };
-    return (React.createElement(Column, { span: width, newLine: newRow },
+    return (React.createElement(Column, { span: width, newLine: newrow },
         React.createElement("div", { ref: containerRef, style: { width: '100%', display: 'flex', flexDirection: 'column', gap: '4px' } },
-            inputtype === 'toggle-neumorphic' ? (React.createElement("div", { className: "neu-toggle-wrapper", style: Object.assign(Object.assign({}, neuVars), { opacity: readOnly ? 0.6 : 1, pointerEvents: readOnly ? 'none' : 'auto' }), onClick: () => handleToggle(!field.value) },
+            inputtype === 'toggle-neumorphic' ? (React.createElement("div", { className: "neu-toggle-wrapper", style: Object.assign(Object.assign({}, neuVars), { opacity: readonly ? 0.6 : 1, pointerEvents: readonly ? 'none' : 'auto' }), onClick: () => handleToggle(!field.value) },
                 React.createElement("style", { dangerouslySetInnerHTML: { __html: `
                     .neu-toggle-wrapper {
                         isolation: isolate;
@@ -42957,8 +42981,8 @@ const Toggle = (_a) => {
                 ` } }),
                 React.createElement("input", { className: "neu-toggle-state", type: "checkbox", checked: !!field.value, readOnly: true }),
                 React.createElement("div", { className: "neu-indicator" }),
-                React.createElement(Icon, { name: icon }))) : (React.createElement(Root$1, { pressed: field.value, onPressedChange: handleToggle, name: alias, disabled: readOnly, id: `${alias}FormInput`, "aria-describedby": `${alias}InputLabel`, asChild: true },
-                React.createElement(o$a, Object.assign({ disabled: readOnly }, props, { className: `design-toggle ${inputtype} ${props.className || ''}`, style: Object.assign(Object.assign(Object.assign(Object.assign({}, style), (inputtype === 'toggle' ? materialStyle : {})), (inputtype === 'toggle-material' ? materialStyle : {})), (inputtype === 'toggle-outline' ? outlineStyle : {})), type: "button" }),
+                React.createElement(Icon, { name: icon }))) : (React.createElement(Root$1, { pressed: field.value, onPressedChange: handleToggle, name: alias, disabled: readonly, id: `${alias}FormInput`, "aria-describedby": `${alias}InputLabel`, asChild: true },
+                React.createElement(o$a, Object.assign({ disabled: readonly }, props, { className: `design-toggle ${inputtype} ${props.className || ''}`, style: Object.assign(Object.assign(Object.assign(Object.assign({}, style), (inputtype === 'toggle' ? materialStyle : {})), (inputtype === 'toggle-material' ? materialStyle : {})), (inputtype === 'toggle-outline' ? outlineStyle : {})), type: "button" }),
                     React.createElement("style", { dangerouslySetInnerHTML: { __html: `
                         /* Material States */
                         .design-toggle.toggle-material[data-state='on'] {
@@ -42983,26 +43007,35 @@ const Toggle = (_a) => {
                     ` } }),
                     children))),
             React.createElement("div", null,
-                inputLabel && (React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel)),
+                inputlabel && (React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel)),
                 "\u00A0",
-                isHinted && (React.createElement(e, { content: hintText || "No hint available" },
-                    React.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { marginLeft: 6 } },
+                ishinted && (React.createElement(e, { content: hinttext || "No hint available" },
+                    React.createElement("a", { href: hinturl || "", target: "_blank", rel: "noopener noreferrer", style: { marginLeft: 6 } },
                         React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
-                hasError && (React.createElement(p$d, { size: "1", color: "red", style: { display: 'block', marginTop: 2 } }, props.errorText || `Required field`))))));
+                hasError && (React.createElement(p$d, { size: "1", color: "red", style: { display: 'block', marginTop: 2 } }, props.errortext || `Required field`))))));
 };
 
-const SectionTitle = ({ title, width = 12, newRow = true, size = "5", subsize = "2", subtitle, align = "left", withSeparator = true, className }) => {
+const SectionTitle = ({ title, width = 12, newRow = true, size = "5", subsize = "2", subtitle, align = "left", withSeparator = true, className, backgroundcolor, icon }) => {
+    const justifyMap = {
+        left: 'start',
+        center: 'center',
+        right: 'end'
+    };
     return (React.createElement(Column, { span: width, newLine: newRow },
         React.createElement(p$5, { direction: "column", gap: "2", className: className, style: {
                 width: '100%',
                 marginBottom: 'var(--space-2)',
-                textAlign: align
+                textAlign: align,
+                backgroundColor: backgroundcolor || 'transparent',
+                padding: backgroundcolor ? 'var(--space-3) var(--space-4)' : '0',
+                borderRadius: backgroundcolor ? 'var(--radius-3)' : '0',
             } },
-            React.createElement(r$g, { size: size, weight: "bold", style: {
-                    width: '100%',
-                    color: 'var(--gray-12)',
-                    lineHeight: '1.2'
-                } }, title),
+            React.createElement(p$5, { align: "center", justify: justifyMap[align], gap: "3", style: { width: '100%' } },
+                icon && (React.createElement(p$5, { align: "center", justify: "center", style: { color: 'var(--gray-12)' } }, icon)),
+                React.createElement(r$g, { size: size, weight: "bold", style: {
+                        color: 'var(--gray-12)',
+                        lineHeight: '1.2'
+                    } }, title)),
             subtitle && (React.createElement(p$d, { size: subsize, color: "gray", style: { maxWidth: '80%', margin: align === 'center' ? '0 auto' : undefined } }, subtitle)),
             withSeparator && (React.createElement(o$2, { size: "4", style: {
                     width: '100%',