@emeraldemperaur/vector-sigma 1.4.45 → 1.4.47

package/README.md

@@ -343,25 +343,34 @@ import { useVectorSigma } from './hooks/useVectorSigma';
 
 <li><strong>🎨Theming Extensibilty</strong></br>
 <p align="justify">Customizable to fit seamlessly into an existing design system and allow developer control of the visual layer through standard CSS patterns.</p>
+<p>Radix UI <code>theme</code> {} passed into the <code>transfrom()</code> or <code>render()</code> method(s) as an <code>options</code> attribute can be leveraged to cleverly align the returned xForm style and appearance with an extant application design system.</p>
 
 ```javascript
-import { Theme, File, Dropdown } from '@emeraldemperaur/vector-sigma';
+import React from 'react';
+import { VectorSigma } from './VectorSigma';
 
-const App = () => {
-  return (
-    
-    <Theme>
-      <File/>
-      <Dropdown/>
-    </Theme>
-  );
-}
+const xForm97 = new VectorSigma(apiJSONData);
+
+return xForm97.render({
+    displayMode: 'codex',
+    // www.radix-ui.com/themes/docs/components/theme
+    theme: {
+        appearance: 'dark',  
+        accentColor: 'yellow',     
+        grayColor: 'slate',        
+        radius: 'none',            
+        scaling: '100%'            
+    },
+    onSubmit: async (values, actions, instance) => {
+        console.log(values);
+    }
+});
 ```
 </li>
 
 <li><strong>🧩Exported UI Components</strong></br>
 <p align="justify">Explicitly exported reusable form UI components with material, outline and neumorphic design variants from package entry point <code>src/index.ts</code> to enable developer-friendly use as lightweight ARIA compliant component library.</p>
-<p><em>Container, Row, Column, Theme, Accordion, AccordionItem, Codex, CodexItem, CodexControls, AvatarInput, ButtonInput, CheckboxGroupInput, ConditionalTrigger, DatePicker, DateRangePicker, DateTimePicker, Dropdown, File, FileMultiple, FlagIcon, Icon, Image, Input, PasswordInput, PhoneInput, CreditCardInput, CurrencyInput, StockInput, RadioGroupInput, OptionSelect, MultipleSelect, RangeSlider, SliderInput, Toggle, SectionTitle, Teletraan1 (Render Matrix)</em></p>
+<p><em>Container, Row, Column, Theme, Accordion, AccordionItem, Codex, CodexItem, CodexControls, AvatarInput, ButtonInput, CheckboxGroupInput, ConditionalTrigger, DatePicker, DateRangePicker, DateTimePicker, Dropdown, CountrySelect, File, FileMultiple, FlagIcon, Icon, Image, Input, PasswordInput, PhoneInput, CreditCardInput, CurrencyInput, StockInput, RadioGroupInput, OptionSelect, MultipleSelect, RangeSlider, SliderInput, Toggle, SectionTitle, Teletraan1 (Render Matrix)</em></p>
 
 ```javascript
 import { Container, Column, Row, CheckboxGroup, Dropdown, File, RangeSlider } 

package/lib/index.cjs

@@ -31804,13 +31804,11 @@ const File$1 = (_a) => {
         width: '100%',
         position: 'relative',
         overflow: 'hidden',
+        boxSizing: 'border-box',
     };
     const materialTrigger = Object.assign(Object.assign({}, baseTriggerStyle), { backgroundColor: 'var(--color-surface)', boxShadow: hasError ? 'inset 0 0 0 1px var(--red-9)' : '0 2px 5px rgba(0,0,0,0.1)' });
     const outlineTrigger = Object.assign(Object.assign({}, baseTriggerStyle), { backgroundColor: 'transparent', border: hasError ? '2px dashed var(--red-9)' : '2px dashed var(--gray-8)' });
-    const neumorphicTrigger = Object.assign(Object.assign(Object.assign({}, baseTriggerStyle), { backgroundColor: 'var(--neu-bg)', color: hasError ? 'var(--red-9)' : 'var(--neu-text)', 
-        // Empty: (Dropzone effect)
-        // Selected: (Card effect)
-        boxShadow: !selectedFile
+    const neumorphicTrigger = Object.assign(Object.assign(Object.assign({}, baseTriggerStyle), { backgroundColor: 'var(--neu-bg)', color: hasError ? 'var(--red-9)' : 'var(--neu-text)', boxShadow: !selectedFile
             ? 'inset 3px 3px 6px var(--neu-shadow-dark), inset -3px -3px 6px var(--neu-shadow-light)'
             : '6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light)', border: 'none' }), neuVars);
     const activeStyle = inputtype === 'fileinput-neumorphic' ? neumorphicTrigger :
@@ -31827,11 +31825,11 @@ const File$1 = (_a) => {
                 } }, !selectedFile ? (
             // --- EMPTY STATE RENDER ---
             React.createElement(p$5, { align: "center", gap: "3", style: { width: '100%', color: 'var(--gray-10)' } },
-                React.createElement(p$8, { style: { padding: 8, borderRadius: '50%', backgroundColor: 'var(--gray-3)' } },
+                React.createElement(p$8, { style: { padding: 8, borderRadius: '50%', backgroundColor: 'var(--gray-3)', flexShrink: 0 } },
                     React.createElement(Icon, { name: 'upload', width: "18", height: "18" })),
-                React.createElement(p$5, { direction: "column" },
-                    React.createElement(p$d, { size: "2", weight: "bold", color: "gray" }, "Upload File"),
-                    React.createElement(p$d, { size: "1", color: "gray" }, "Supports PDF, Images, Excel, JSON...")))) : (
+                React.createElement(p$5, { direction: "column", style: { minWidth: 0, flex: 1 } },
+                    React.createElement(p$d, { size: "2", weight: "bold", color: "gray", style: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } }, "Upload File"),
+                    React.createElement(p$d, { size: "1", color: "gray", style: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } }, "Supports PDF, Images, Excel, JSON...")))) : (
             // --- SELECTED STATE RENDER ---
             React.createElement(p$5, { align: "center", gap: "4", style: { width: '100%' } },
                 preview && previewUrl ? (React.createElement(i$9, { ratio: 1, style: { width: 48, height: 48, borderRadius: 6, overflow: 'hidden', flexShrink: 0 } },
@@ -31841,24 +31839,19 @@ const File$1 = (_a) => {
                         backgroundColor: 'var(--accent-3)', color: 'var(--accent-9)',
                         borderRadius: 6, flexShrink: 0
                     } }, getFileIcon$1(selectedFile.type, selectedFile.name))),
-                React.createElement(p$5, { direction: "column", style: { flexGrow: 1, overflow: 'hidden' } },
+                React.createElement(p$5, { direction: "column", style: { flexGrow: 1, minWidth: 0, overflow: 'hidden' } },
                     React.createElement(p$d, { size: "2", weight: "bold", style: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } }, selectedFile.name),
                     React.createElement(p$5, { gap: "2", align: "center" },
                         React.createElement(p$d, { size: "1", color: "gray" }, formatBytes(selectedFile.size)),
                         React.createElement(e$a, { size: "1", color: "gray", variant: "soft" }, (_b = selectedFile.name.split('.').pop()) === null || _b === void 0 ? void 0 : _b.toUpperCase()))),
                 React.createElement(o$5, { size: "1", variant: "ghost", color: "red", onClick: handleClear, style: { borderRadius: '50%', padding: 4 } },
                     React.createElement(Icon, { name: 'close', width: "16", height: "16" }))))),
-            React.createElement("div", null,
-                React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: inputId }, inputLabel),
-                "\u00A0",
-                isHinted ?
-                    React.createElement(React.Fragment, null,
-                        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' }, errorText || (typeof fieldError === 'string' ? fieldError : "Required field"))) : null))));
+            React.createElement("div", { style: { marginTop: 4, display: 'flex', alignItems: 'center', gap: 6 } },
+                inputLabel && (React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: inputId }, inputLabel)),
+                isHinted && (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", 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' }, errorText || (typeof fieldError === 'string' ? fieldError : `Required field`)))))));
 };
 
 const getFileIcon = (fileOrUrl) => {
@@ -31961,20 +31954,21 @@ const FileMultiple = (_a) => {
     const isNeumorphic = inputtype === 'filemultiple-neumorphic';
     return (React.createElement(Column, { span: width, newLine: newRow },
         React.createElement(p$5, { direction: "column", gap: "2", className: className, style: Object.assign({ width: '100%' }, style) },
-            React.createElement(p$8, { onClick: () => { var _a; return !readOnly && ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click()); }, p: "4", style: Object.assign(Object.assign({}, styles[inputtype]), { cursor: readOnly ? 'default' : 'pointer', transition: 'all 0.2s', borderColor: hasError ? 'var(--red-9)' : (styles[inputtype].borderBottom ? 'var(--accent-9)' : 'var(--gray-a8)'), position: 'relative', opacity: readOnly ? 0.7 : 1 }) },
+            React.createElement(p$8, { onClick: () => { var _a; return !readOnly && ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click()); }, p: "4", style: Object.assign(Object.assign({}, styles[inputtype]), { cursor: readOnly ? 'default' : 'pointer', transition: 'all 0.2s', borderColor: hasError ? 'var(--red-9)' : (inputtype === 'filemultiple-material' ? 'var(--accent-9)' : 'var(--gray-a8)'), position: 'relative', opacity: readOnly ? 0.7 : 1, boxSizing: 'border-box', width: '100%', overflow: 'hidden' }) },
                 React.createElement(p$5, { align: "center", gap: "4" },
                     React.createElement(p$8, { style: {
                             background: isNeumorphic ? '#e0e0e0' : 'var(--accent-3)',
                             borderRadius: '50%',
                             padding: '10px',
-                            boxShadow: isNeumorphic ? 'inset 3px 3px 6px #b8b9be, inset -3px -3px 6px #ffffff' : 'none'
+                            boxShadow: isNeumorphic ? 'inset 3px 3px 6px #b8b9be, inset -3px -3px 6px #ffffff' : 'none',
+                            flexShrink: 0
                         } },
                         React.createElement(Icon, { name: 'upload', width: "20", height: "20", color: isNeumorphic ? '#555' : 'var(--accent-9)' })),
-                    React.createElement(p$5, { direction: "column" },
-                        React.createElement(p$d, { weight: "bold", style: { color: isNeumorphic ? '#444' : 'inherit' } }, currentFiles.length > 0
+                    React.createElement(p$5, { direction: "column", style: { minWidth: 0, flex: 1 } },
+                        React.createElement(p$d, { weight: "bold", style: { color: isNeumorphic ? '#444' : 'inherit', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } }, currentFiles.length > 0
                             ? `${currentFiles.length} file${currentFiles.length !== 1 ? 's' : ''} selected`
                             : (placeholder || "Choose files...")),
-                        React.createElement(p$d, { size: "1", color: "gray", style: { opacity: 0.8 } }, "PDF, Images, Office Docs, JSON, ZIP"))),
+                        React.createElement(p$d, { size: "1", color: "gray", style: { opacity: 0.8, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } }, "PDF, Images, Office Docs, JSON, ZIP"))),
                 React.createElement("input", { id: inputId, ref: inputRef, name: alias, type: "file", multiple: true, accept: ACCEPTED_EXTENSIONS, onChange: handleFileChange, disabled: readOnly, style: { display: 'none' }, "aria-describedby": hasError ? errorId : undefined })),
             preview && currentFiles.length > 0 && (React.createElement(o$6, { columns: "repeat(auto-fill, minmax(220px, 1fr))", gap: "3", mt: "1" }, currentFiles.map((file, index) => {
                 let previewUrl = null;
@@ -32003,7 +31997,8 @@ const FileMultiple = (_a) => {
                                 background: 'var(--gray-a3)',
                                 display: 'flex',
                                 alignItems: 'center',
-                                justifyContent: 'center'
+                                justifyContent: 'center',
+                                flexShrink: 0
                             } }, previewUrl && (fileName.match(/\.(jpeg|jpg|png|gif|webp)$/i) || (file instanceof File && file.type.startsWith('image/'))) ? (React.createElement("img", { src: previewUrl, alt: "preview", style: { width: '100%', height: '100%', objectFit: 'cover' } })) : (getFileIcon(file))),
                         React.createElement(p$5, { direction: "column", style: { flex: 1, overflow: 'hidden' } },
                             React.createElement(p$d, { size: "1", weight: "bold", style: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', color: isNeumorphic ? '#444' : 'inherit' } }, fileName),
@@ -32014,13 +32009,12 @@ const FileMultiple = (_a) => {
                             } },
                             React.createElement(Icon, { name: 'close' }))))));
             }))),
-            React.createElement("div", null,
+            React.createElement("div", { style: { marginTop: 4, display: 'flex', alignItems: 'center', gap: 6 } },
                 inputLabel && (React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: inputId }, inputLabel)),
-                "\u00A0",
-                isHinted && (React.createElement(e, { content: hintText || "No hint available" },
-                    React.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
-                        React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray', marginLeft: 4 } })))),
-                hasError && (React.createElement(p$d, { id: errorId, size: "1", color: "red", style: { display: 'block', marginTop: 2 } }, typeof fieldError === 'string' ? (errorText || fieldError) : 'Invalid file selection'))))));
+                isHinted && (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", 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' }, errorText || (typeof fieldError === 'string' ? fieldError : `Required field`)))))));
 };
 
 const getStyles = (design, layout) => {
@@ -32055,9 +32049,9 @@ const getStyles = (design, layout) => {
 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: {
-            width: '333px',
-            height: '333px',
+    const content = (React.createElement(p$8, { className: className, style: Object.assign(Object.assign(Object.assign({}, containerStyles), { width: '100%', height: height || '100%' }), style), onClick: onClick }, src ? (React.createElement("img", { id: String(id), src: src, alt: alt, style: {
+            width: '100%',
+            height: '100%',
             objectFit: 'cover',
             display: 'block',
         } })) : (React.createElement(p$5, { align: "center", justify: "center", style: {
@@ -32069,11 +32063,7 @@ const ImageOutput = ({ id, src, alt = "Image", design = 'outline', layout = 'nor
         React.createElement(p$5, { direction: "column", align: "center", gap: "2" },
             React.createElement(Icon, { name: 'image', width: "32", height: "32", color: iconColor, style: { opacity: 0.5 } }),
             React.createElement(p$d, { size: "1", color: "gray" }, "No Image"))))));
-    if (height) {
-        return content;
-    }
-    return (React.createElement(p$8, { style: { width } },
-        React.createElement(i$9, { ratio: aspectratio }, content)));
+    return (React.createElement(p$8, { style: { width, maxWidth: 500, maxHeight: 500 } }, height ? (content) : (React.createElement(i$9, { ratio: aspectratio }, content))));
 };
 
 const Input$1 = (_a) => {
@@ -39690,7 +39680,7 @@ function _arrayLikeToArray$3(arr, len) { if (len == null || len > arr.length) le
 function _extends$8() { _extends$8 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$8.apply(this, arguments); }
 function _objectWithoutProperties$8(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$8(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$8(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-function CountrySelect(_ref) {
+function CountrySelect$1(_ref) {
   var value = _ref.value,
     onChange = _ref.onChange,
     options = _ref.options,
@@ -39724,7 +39714,7 @@ function CountrySelect(_ref) {
     }, label);
   }));
 }
-CountrySelect.propTypes = {
+CountrySelect$1.propTypes = {
   /**
    * A two-letter country code.
    * Example: "US", "RU", etc.
@@ -39769,7 +39759,7 @@ function CountrySelectWithIcon(_ref3) {
   }, [options, value]);
   return /*#__PURE__*/React.createElement("div", {
     className: "PhoneInputCountry"
-  }, /*#__PURE__*/React.createElement(CountrySelect, _extends$8({}, rest, {
+  }, /*#__PURE__*/React.createElement(CountrySelect$1, _extends$8({}, rest, {
     value: value,
     options: options,
     className: classNames('PhoneInputCountrySelect', className)
@@ -55533,7 +55523,6 @@ const CreditCardInput = (_a) => {
                 React.createElement("div", { style: { display: 'flex', alignItems: 'center' } }, getCardIcon())),
             React.createElement("div", { style: { marginTop: 4, display: 'flex', alignItems: 'center', gap: 6 } },
                 inputLabel && (React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: `${alias}FormInput` }, inputLabel)),
-                "\u00A0",
                 isHinted && (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", style: { display: 'flex' } },
                         React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
@@ -55688,8 +55677,8 @@ const CurrencyInput = (_a) => {
                         textAlign: 'right',
                         width: '100%'
                     }, inputMode: "decimal", autoComplete: "off" }))),
-            React.createElement("div", null,
-                React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: `${alias}FormInput` }, inputLabel),
+            React.createElement("div", { style: { marginTop: 4, display: 'flex', alignItems: 'center', gap: 6 } },
+                inputLabel && (React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: `${alias}FormInput` }, inputLabel)),
                 isHinted && (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", style: { display: 'flex' } },
                         React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
@@ -55769,12 +55758,12 @@ const StockInput = (_a) => {
                             fontWeight: 500,
                             fontFamily: 'var(--default-font-family)',
                         }, inputMode: "decimal", autoComplete: "off" }))),
-            React.createElement("div", null,
+            React.createElement("div", { style: { marginTop: 4, display: 'flex', alignItems: 'center', gap: 6 } },
                 inputLabel && (React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: `${alias}FormInput` }, inputLabel)),
                 isHinted && (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", 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' }, errorText || (typeof fieldError === 'string' ? fieldError : `Required field`)))))));
+                hasError && (React.createElement(p$d, { id: errorId, size: "1", color: "red", className: 'core-input-label-error' }, errorText || (typeof fieldError === 'string' ? fieldError : `Required field`)))))));
 };
 
 const RadioGroupInput = (_a) => {
@@ -56187,9 +56176,8 @@ const SliderInput = (_a) => {
                 }, onValueCommit: () => {
                     setFieldTouched(alias, true, false);
                 }, className: inputtype === 'slider-neumorphic' ? 'neu-slider' : inputtype === 'slider-outline' ? 'outline-slider' : '', style: neuVars }),
-            React.createElement("div", null,
-                React.createElement(p$d, { id: labelId, as: "div", size: "2", weight: "bold" }, inputLabel),
-                "\u00A0",
+            React.createElement("div", { style: { marginTop: 4, display: 'flex', alignItems: 'center', gap: 6 } },
+                inputLabel && (React.createElement(p$d, { id: labelId, as: "div", size: "2", weight: "bold" }, inputLabel)),
                 isHinted ?
                     React.createElement(React.Fragment, null,
                         React.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
@@ -56259,8 +56247,8 @@ const RangeSlider = (_a) => {
             React.createElement(s, { name: alias, id: `${alias}FormInput`, disabled: readOnly, "aria-labelledby": labelId, min: minvalue, max: maxvalue, step: stepvalue, minStepsBetweenThumbs: minStepsBetweenThumbs, value: sliderValue, onValueChange: (val) => {
                     setFieldValue(alias, isRange ? val : val[0]);
                 }, onValueCommit: () => setFieldTouched(alias, true, false), className: inputtype === 'range-neumorphic' ? 'neu-slider' : inputtype === 'range-outline' ? 'outline-slider' : '', style: neuVars }),
-            React.createElement("div", null,
-                React.createElement(p$d, { id: labelId, as: "div", size: "2", weight: "bold", style: { display: 'inline' } }, inputLabel),
+            React.createElement("div", { style: { marginTop: 4, display: 'flex', alignItems: 'center', gap: 6 } },
+                inputLabel && (React.createElement(p$d, { id: labelId, as: "div", size: "2", weight: "bold", style: { display: 'inline' } }, inputLabel)),
                 isHinted && (React.createElement(React.Fragment, null,
                     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" },
@@ -56863,6 +56851,9 @@ const datePickerInputType = ["datepicker", "datepickerinput", "datepicker-input"
 const dateRangePickerInputType = ["daterangepicker", "daterangepickerinput", "daterangepicker-input", "input-daterangepicker", "inputdaterangepicker"];
 const dateTimePickerInputType = ["datetimepicker", "datetimepickerinput", "datetimepicker-input", "input-datetimepicker", "inputdatetimepicker"];
 const dropdownInputType = ["dropdown", "dropdowninput", "dropdown-input", "input-dropdown", "inputdropdown"];
+const countrydropdownInputType = ["countrydropdown", "countrydropdowninput", "countrydropdown-input", "input-countrydropdown", "inputcountrydropdown",
+    "countryselect", "countryselect-input", "countryselectinput", "input-countryselect"];
+const countrymultiselectInputType = ["countrymultiselect", "countrymultiselectinput", "countrymultiselect-input", "input-countrymultiselect", "inputcountrymultiselect"];
 const fileInputType = ["file", "fileinput", "file-input", "input-file", "inputfile"];
 const fileMultipleInputType = ["filemultiple", "filemultipleinput", "filemultiple-input", "input-filemultiple", "inputfilemultiple"];
 const imageOutputType = ["image", "imageoutput", "image-output", "output-image", "outputimage"];
@@ -57012,6 +57003,151 @@ const DateTimePicker = ({ alias, inputLabel, inputtype = 'datetimepicker-outline
                 hasError && (React.createElement(p$d, { size: "1", color: "red", style: { display: 'block' } }, errorText || (typeof fieldError === 'string' ? fieldError : "Required field")))))));
 };
 
+const CountrySelect = (_a) => {
+    var _b;
+    var { inputtype = 'countryselect-outline', alias, readOnly, width, inputLabel, placeholder = 'Select Country...', newRow, isHinted, hintText, hintUrl, errorText, displayFlag = true, multiselect = false, enableSearch = false, style, className, formikContext } = _a; __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "placeholder", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "displayFlag", "multiselect", "enableSearch", "style", "className", "formikContext"]);
+    const defaultFormikContext = formik.useFormikContext();
+    const activeContext = formikContext || defaultFormikContext;
+    if (!activeContext) {
+        console.error(`CountryDropdown '${alias}' must be used within a Formik provider.`);
+        return null;
+    }
+    const { values, touched, errors, setFieldValue, setFieldTouched } = activeContext;
+    const fieldValue = formik.getIn(values, alias);
+    const fieldTouched = formik.getIn(touched, alias);
+    const fieldError = formik.getIn(errors, alias);
+    const selectedValues = React.useMemo(() => {
+        if (multiselect)
+            return Array.isArray(fieldValue) ? fieldValue : [];
+        return fieldValue ? [String(fieldValue)] : [];
+    }, [fieldValue, multiselect]);
+    const hasError = Boolean(fieldTouched && fieldError);
+    const triggerRef = React.useRef(null);
+    const [neuVars, setNeuVars] = React.useState({});
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [searchQuery, setSearchQuery] = React.useState("");
+    const errorId = `${alias}-error`;
+    const allCountries = React.useMemo(() => {
+        return getCountries().map(c => ({ value: c, label: en[c] }));
+    }, []);
+    const filteredCountries = React.useMemo(() => {
+        if (!enableSearch || !searchQuery)
+            return allCountries;
+        const lowerSearch = searchQuery.toLowerCase();
+        return allCountries.filter(c => c.label.toLowerCase().includes(lowerSearch));
+    }, [allCountries, searchQuery, enableSearch]);
+    const handleSelection = (countryCode) => {
+        if (multiselect) {
+            const newValues = selectedValues.includes(countryCode)
+                ? selectedValues.filter((v) => v !== countryCode)
+                : [...selectedValues, countryCode];
+            setFieldValue(alias, newValues);
+        }
+        else {
+            setFieldValue(alias, countryCode);
+            setIsOpen(false);
+        }
+        setTimeout(() => setFieldTouched(alias, true, false), 0);
+    };
+    const displayLabel = React.useMemo(() => {
+        if (selectedValues.length === 0)
+            return placeholder;
+        if (!multiselect) {
+            const c = allCountries.find(x => x.value === selectedValues[0]);
+            return c ? c.label : selectedValues[0];
+        }
+        if (selectedValues.length <= 2) {
+            return selectedValues.map(v => { var _a; return ((_a = allCountries.find(x => x.value === v)) === null || _a === void 0 ? void 0 : _a.label) || v; }).join(', ');
+        }
+        return `${selectedValues.length} countries selected`;
+    }, [selectedValues, multiselect, allCountries, placeholder]);
+    React.useEffect(() => {
+        if (inputtype === 'countryselect-neumorphic' && triggerRef.current) {
+            const parentBg = getNearestParentBackground(triggerRef.current.parentElement);
+            setNeuVars({
+                '--neu-bg': parentBg,
+                '--neu-shadow-dark': adjustColor(parentBg, -30),
+                '--neu-shadow-light': adjustColor(parentBg, 30),
+                '--neu-text': 'var(--gray-12)',
+                '--neu-error': 'var(--red-9)',
+            });
+        }
+    }, [inputtype]);
+    React.useEffect(() => {
+        if (!isOpen)
+            setSearchQuery("");
+    }, [isOpen]);
+    // --- STYLES ---
+    const baseTrigger = {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        width: '100%',
+        cursor: readOnly ? 'default' : 'pointer',
+        textAlign: 'left',
+        padding: '0 12px',
+        fontSize: 'var(--font-size-2)',
+        fontFamily: 'var(--default-font-family)',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        boxSizing: 'border-box',
+        opacity: readOnly ? 0.7 : 1,
+    };
+    const materialTrigger = Object.assign(Object.assign({}, baseTrigger), { backgroundColor: 'var(--color-surface)', border: hasError ? '1px solid var(--red-9)' : 'none', boxShadow: '0 2px 5px rgba(0,0,0,0.1)', borderRadius: '4px', height: '32px', fontWeight: 500 });
+    const outlineTrigger = Object.assign(Object.assign({}, baseTrigger), { backgroundColor: 'transparent', border: hasError ? '2px solid var(--red-9)' : '2px solid var(--gray-7)', borderRadius: '4px', height: '32px', fontWeight: 600 });
+    const neumorphicTrigger = Object.assign(Object.assign({}, baseTrigger), { backgroundColor: 'var(--neu-bg)', color: hasError ? 'var(--neu-error)' : 'var(--neu-text)', border: 'none', borderRadius: '12px', height: '40px', fontWeight: 600, boxShadow: isOpen
+            ? 'inset 6px 6px 12px var(--neu-shadow-dark), inset -6px -6px 12px var(--neu-shadow-light)'
+            : '6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light)', transition: 'all 0.2s ease' });
+    const activeTrigger = inputtype === 'countryselect-material' ? materialTrigger :
+        inputtype === 'countryselect-outline' ? outlineTrigger : Object.assign(Object.assign({}, neumorphicTrigger), neuVars);
+    return (React.createElement(Column, { span: width, newLine: newRow },
+        React.createElement(p$5, { direction: "column", gap: "2", style: { width: '100%' } },
+            React.createElement(P$1, { open: isOpen, onOpenChange: (open) => {
+                    if (readOnly)
+                        return;
+                    setIsOpen(open);
+                    if (!open)
+                        setFieldTouched(alias, true, false);
+                } },
+                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`, disabled: readOnly },
+                        React.createElement(p$5, { align: "center", gap: "2", style: { minWidth: 0, flex: 1 } },
+                            !multiselect && displayFlag && selectedValues.length === 1 && (React.createElement(FlagIcon, { country: selectedValues[0] })),
+                            React.createElement("span", { style: {
+                                    overflow: 'hidden',
+                                    textOverflow: 'ellipsis',
+                                    whiteSpace: 'nowrap',
+                                    color: selectedValues.length === 0 ? 'var(--gray-8)' : 'inherit'
+                                } }, displayLabel)),
+                        React.createElement(Icon, { name: 'chevrondown', style: { flexShrink: 0, opacity: 0.5, marginLeft: 8 } }))),
+                React.createElement(i$3, { align: "start", sideOffset: 5, style: Object.assign({ width: ((_b = triggerRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth) || 240, padding: 0, overflow: 'hidden', backgroundColor: inputtype === 'countryselect-neumorphic' ? 'var(--neu-bg)' : 'var(--color-panel-solid)' }, neuVars) },
+                    enableSearch && (React.createElement(p$8, { p: "2", style: { borderBottom: inputtype === 'countryselect-neumorphic' ? 'none' : '1px solid var(--gray-6)' } },
+                        React.createElement(u, { placeholder: "Search countries...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), variant: inputtype === 'countryselect-neumorphic' ? 'soft' : 'surface' },
+                            React.createElement(c, null,
+                                React.createElement(Icon, { name: "magnifyingglass", height: "14", width: "14", style: { opacity: 0.5 } }))))),
+                    React.createElement(c$1, { type: "auto", scrollbars: "vertical", style: { maxHeight: 250 } },
+                        React.createElement(p$8, { p: "2" },
+                            React.createElement(p$5, { direction: "column", gap: "1" }, filteredCountries.length === 0 ? (React.createElement(p$d, { size: "2", color: "gray", align: "center", style: { padding: '16px 0' } }, "No countries found.")) : (filteredCountries.map((country) => {
+                                const isSelected = selectedValues.includes(country.value);
+                                return (React.createElement(p$5, { key: country.value, align: "center", gap: "3", onClick: () => handleSelection(country.value), style: {
+                                        padding: '8px',
+                                        cursor: 'pointer',
+                                        borderRadius: '4px',
+                                        backgroundColor: isSelected ? 'var(--accent-a3)' : 'transparent',
+                                        transition: 'background-color 0.1s'
+                                    } },
+                                    multiselect && (React.createElement(c$2, { checked: isSelected, style: { pointerEvents: 'none' } })),
+                                    displayFlag && (React.createElement(FlagIcon, { country: country.value })),
+                                    React.createElement(p$d, { size: "2", style: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } }, country.label)));
+                            }))))))),
+            React.createElement("div", { style: { marginTop: 4, display: 'flex', alignItems: 'center', gap: 6 } },
+                inputLabel && (React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: `${alias}FormInput` }, inputLabel)),
+                isHinted && (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", 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' }, errorText || (typeof fieldError === 'string' ? fieldError : `Required field`)))))));
+};
+
 const Teletraan1 = ({ xFormModel, readOnlyMode = false, displayMode = 'codice', brandColor = "#000000", onPrev, onNext, onFinish }) => {
     const [dualToggled, setDualToggled] = React.useState(false);
     const [neuVars] = React.useState({
@@ -57058,6 +57194,10 @@ const Teletraan1 = ({ xFormModel, readOnlyMode = false, displayMode = 'codice',
                 return React.createElement(DateTimePicker, Object.assign({}, layoutProps, { placeholder: inputPlaceholder }));
             case dropdownInputType.includes(normalizedType):
                 return React.createElement(Dropdown, Object.assign({}, layoutProps, { placeholder: inputPlaceholder, inputOptions: inputOptions || [InputOptionsPlaceholder] }));
+            case countrydropdownInputType.includes(normalizedType):
+                return React.createElement(CountrySelect, Object.assign({ displayFlag: true, enableSearch: true }, layoutProps, { placeholder: inputPlaceholder }));
+            case countrymultiselectInputType.includes(normalizedType):
+                return React.createElement(CountrySelect, Object.assign({ displayFlag: true, enableSearch: true, multiselect: true }, layoutProps, { placeholder: inputPlaceholder }));
             case fileInputType.includes(normalizedType):
                 return React.createElement(File$1, Object.assign({}, layoutProps, { preview: true }));
             case fileMultipleInputType.includes(normalizedType):
@@ -57129,7 +57269,7 @@ const Teletraan1 = ({ xFormModel, readOnlyMode = false, displayMode = 'codice',
             case 'codex':
                 return (React.createElement(Codex, { brandColor: brandColor }, xFormModel.model.map((formsection, index, array) => (React.createElement(CodexItem, { key: formsection.sectionId, stepId: String(formsection.sectionId), title: formsection.title, subtitleDescription: formsection.subtitle ? formsection.subtitle : undefined, icon: React.createElement(Icon, { name: formsection.icon || "fontfamily" }) },
                     React.createElement(Row, { key: formsection.sectionId }, renderQueries(formsection.queries)),
-                    React.createElement(CodexControls, { prevStepId: index > 0 ? String(array[index - 1].sectionId) : undefined, nextStepId: index < array.length - 1 ? String(array[index + 1].sectionId) : undefined, onPrev: onPrev, onNext: onNext, onFinish: onFinish }))))));
+                    React.createElement(CodexControls, { prevStepId: index > 0 ? String(array[index - 1].sectionId) : undefined, nextStepId: index < array.length - 1 ? String(array[index + 1].sectionId) : undefined, onPrev: onPrev, onNext: onNext, onFinish: () => onFinish }))))));
             case 'codice':
             default:
                 return (React.createElement(React.Fragment, { key: xFormModel.uuid }, xFormModel.model.map((formsection) => (React.createElement(React.Fragment, { key: formsection.sectionId || crypto.randomUUID() },
@@ -57213,14 +57353,15 @@ class VectorSigma {
             "checkbox", "checkboxes", "checkboxinput", "chechbox-input", "input-checkbox", "inputcheckbox", "checkboxgroup-input",
             "filemultiple", "filemultipleinput", "filemultiple-input", "input-filemultiple", "inputfilemultiple",
             "selectmultiple", "selectmultipleinput", "selectmultiple-input", "input-selectmultiple", "inputselectmultiple",
-            "range", "rangeslider", "rangeinput", "rangesliderinput", "rangeslider-input", "range-input", "input-rangeslider", "inputrangeslider"
+            "countrymultiselect", "countrymultiselectinput", "countrymultiselect-input", "input-countrymultiselect", "inputcountrymultiselect",
+            "range", "rangeslider", "rangeinput", "rangesliderinput", "rangeslider-input", "range-input", "input-rangeslider", "inputrangeslider",
+            "slider", "sliderinput", "slider-input", "input-slider", "inputslider"
         ];
         const booleanTypes = [
             "toggle", "switch", "toggleinput", "toggle-input", "input-toggle", "inputtoggle",
             "conditionaltoggle", "conditionalcheckbox", "conditional-toggle", "conditional-checkbox"
         ];
         const numberTypes = [
-            "slider", "sliderinput", "slider-input", "input-slider", "inputslider",
             "currency", "currencyinput", "currency-input", "input-currency", "inputcurrency",
             "stock", "stockinput", "stock-input", "input-stock", "inputstock"
         ];
@@ -57442,7 +57583,8 @@ class VectorSigma {
         const sanitizedData = normalizeXForm(this.formObject);
         const { initialValues, validationSchema } = this.buildFormikConfig(sanitizedData);
         const isCodexMode = (options === null || options === void 0 ? void 0 : options.displayMode) === 'codex';
-        return (React.createElement(R, null,
+        const themeConfig = Object.assign({ appearance: 'inherit', accentColor: 'blue', radius: 'medium' }, options === null || options === void 0 ? void 0 : options.theme);
+        return (React.createElement(R, Object.assign({}, themeConfig),
             React.createElement(formik.Formik, { initialValues: initialValues, validationSchema: validationSchema, onSubmit: (values, actions) => __awaiter(this, void 0, void 0, function* () {
                     try {
                         this.statusCode = 2;
@@ -57453,7 +57595,7 @@ class VectorSigma {
                             yield options.onSubmit(values, actions, this);
                         }
                         if (options === null || options === void 0 ? void 0 : options.onFinish) {
-                            options.onFinish();
+                            options.onFinish(values, actions, this);
                         }
                     }
                     catch (error) {
@@ -57640,6 +57782,7 @@ exports.CodexItem = CodexItem;
 exports.Column = Column;
 exports.ConditionalTrigger = ConditionalTrigger;
 exports.Container = Container;
+exports.CountrySelect = CountrySelect;
 exports.CreditCardInput = CreditCardInput;
 exports.CurrencyInput = CurrencyInput;
 exports.DatePicker = DatePicker;

package/lib/index.esm.js

@@ -31783,13 +31783,11 @@ const File$1 = (_a) => {
         width: '100%',
         position: 'relative',
         overflow: 'hidden',
+        boxSizing: 'border-box',
     };
     const materialTrigger = Object.assign(Object.assign({}, baseTriggerStyle), { backgroundColor: 'var(--color-surface)', boxShadow: hasError ? 'inset 0 0 0 1px var(--red-9)' : '0 2px 5px rgba(0,0,0,0.1)' });
     const outlineTrigger = Object.assign(Object.assign({}, baseTriggerStyle), { backgroundColor: 'transparent', border: hasError ? '2px dashed var(--red-9)' : '2px dashed var(--gray-8)' });
-    const neumorphicTrigger = Object.assign(Object.assign(Object.assign({}, baseTriggerStyle), { backgroundColor: 'var(--neu-bg)', color: hasError ? 'var(--red-9)' : 'var(--neu-text)', 
-        // Empty: (Dropzone effect)
-        // Selected: (Card effect)
-        boxShadow: !selectedFile
+    const neumorphicTrigger = Object.assign(Object.assign(Object.assign({}, baseTriggerStyle), { backgroundColor: 'var(--neu-bg)', color: hasError ? 'var(--red-9)' : 'var(--neu-text)', boxShadow: !selectedFile
             ? 'inset 3px 3px 6px var(--neu-shadow-dark), inset -3px -3px 6px var(--neu-shadow-light)'
             : '6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light)', border: 'none' }), neuVars);
     const activeStyle = inputtype === 'fileinput-neumorphic' ? neumorphicTrigger :
@@ -31806,11 +31804,11 @@ const File$1 = (_a) => {
                 } }, !selectedFile ? (
             // --- EMPTY STATE RENDER ---
             React__default.createElement(p$5, { align: "center", gap: "3", style: { width: '100%', color: 'var(--gray-10)' } },
-                React__default.createElement(p$8, { style: { padding: 8, borderRadius: '50%', backgroundColor: 'var(--gray-3)' } },
+                React__default.createElement(p$8, { style: { padding: 8, borderRadius: '50%', backgroundColor: 'var(--gray-3)', flexShrink: 0 } },
                     React__default.createElement(Icon, { name: 'upload', width: "18", height: "18" })),
-                React__default.createElement(p$5, { direction: "column" },
-                    React__default.createElement(p$d, { size: "2", weight: "bold", color: "gray" }, "Upload File"),
-                    React__default.createElement(p$d, { size: "1", color: "gray" }, "Supports PDF, Images, Excel, JSON...")))) : (
+                React__default.createElement(p$5, { direction: "column", style: { minWidth: 0, flex: 1 } },
+                    React__default.createElement(p$d, { size: "2", weight: "bold", color: "gray", style: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } }, "Upload File"),
+                    React__default.createElement(p$d, { size: "1", color: "gray", style: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } }, "Supports PDF, Images, Excel, JSON...")))) : (
             // --- SELECTED STATE RENDER ---
             React__default.createElement(p$5, { align: "center", gap: "4", style: { width: '100%' } },
                 preview && previewUrl ? (React__default.createElement(i$9, { ratio: 1, style: { width: 48, height: 48, borderRadius: 6, overflow: 'hidden', flexShrink: 0 } },
@@ -31820,24 +31818,19 @@ const File$1 = (_a) => {
                         backgroundColor: 'var(--accent-3)', color: 'var(--accent-9)',
                         borderRadius: 6, flexShrink: 0
                     } }, getFileIcon$1(selectedFile.type, selectedFile.name))),
-                React__default.createElement(p$5, { direction: "column", style: { flexGrow: 1, overflow: 'hidden' } },
+                React__default.createElement(p$5, { direction: "column", style: { flexGrow: 1, minWidth: 0, overflow: 'hidden' } },
                     React__default.createElement(p$d, { size: "2", weight: "bold", style: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } }, selectedFile.name),
                     React__default.createElement(p$5, { gap: "2", align: "center" },
                         React__default.createElement(p$d, { size: "1", color: "gray" }, formatBytes(selectedFile.size)),
                         React__default.createElement(e$a, { size: "1", color: "gray", variant: "soft" }, (_b = selectedFile.name.split('.').pop()) === null || _b === void 0 ? void 0 : _b.toUpperCase()))),
                 React__default.createElement(o$5, { size: "1", variant: "ghost", color: "red", onClick: handleClear, style: { borderRadius: '50%', padding: 4 } },
                     React__default.createElement(Icon, { name: 'close', width: "16", height: "16" }))))),
-            React__default.createElement("div", null,
-                React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: inputId }, inputLabel),
-                "\u00A0",
-                isHinted ?
-                    React__default.createElement(React__default.Fragment, null,
-                        React__default.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
-                            React__default.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
-                                React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
-                hasError ?
-                    React__default.createElement(React__default.Fragment, null,
-                        React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, errorText || (typeof fieldError === 'string' ? fieldError : "Required field"))) : null))));
+            React__default.createElement("div", { style: { marginTop: 4, display: 'flex', alignItems: 'center', gap: 6 } },
+                inputLabel && (React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: inputId }, inputLabel)),
+                isHinted && (React__default.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
+                    React__default.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { display: 'flex' } },
+                        React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
+                hasError && (React__default.createElement(p$d, { id: errorId, size: "1", color: "red", className: 'core-input-label-error' }, errorText || (typeof fieldError === 'string' ? fieldError : `Required field`)))))));
 };
 
 const getFileIcon = (fileOrUrl) => {
@@ -31940,20 +31933,21 @@ const FileMultiple = (_a) => {
     const isNeumorphic = inputtype === 'filemultiple-neumorphic';
     return (React__default.createElement(Column, { span: width, newLine: newRow },
         React__default.createElement(p$5, { direction: "column", gap: "2", className: className, style: Object.assign({ width: '100%' }, style) },
-            React__default.createElement(p$8, { onClick: () => { var _a; return !readOnly && ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click()); }, p: "4", style: Object.assign(Object.assign({}, styles[inputtype]), { cursor: readOnly ? 'default' : 'pointer', transition: 'all 0.2s', borderColor: hasError ? 'var(--red-9)' : (styles[inputtype].borderBottom ? 'var(--accent-9)' : 'var(--gray-a8)'), position: 'relative', opacity: readOnly ? 0.7 : 1 }) },
+            React__default.createElement(p$8, { onClick: () => { var _a; return !readOnly && ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click()); }, p: "4", style: Object.assign(Object.assign({}, styles[inputtype]), { cursor: readOnly ? 'default' : 'pointer', transition: 'all 0.2s', borderColor: hasError ? 'var(--red-9)' : (inputtype === 'filemultiple-material' ? 'var(--accent-9)' : 'var(--gray-a8)'), position: 'relative', opacity: readOnly ? 0.7 : 1, boxSizing: 'border-box', width: '100%', overflow: 'hidden' }) },
                 React__default.createElement(p$5, { align: "center", gap: "4" },
                     React__default.createElement(p$8, { style: {
                             background: isNeumorphic ? '#e0e0e0' : 'var(--accent-3)',
                             borderRadius: '50%',
                             padding: '10px',
-                            boxShadow: isNeumorphic ? 'inset 3px 3px 6px #b8b9be, inset -3px -3px 6px #ffffff' : 'none'
+                            boxShadow: isNeumorphic ? 'inset 3px 3px 6px #b8b9be, inset -3px -3px 6px #ffffff' : 'none',
+                            flexShrink: 0
                         } },
                         React__default.createElement(Icon, { name: 'upload', width: "20", height: "20", color: isNeumorphic ? '#555' : 'var(--accent-9)' })),
-                    React__default.createElement(p$5, { direction: "column" },
-                        React__default.createElement(p$d, { weight: "bold", style: { color: isNeumorphic ? '#444' : 'inherit' } }, currentFiles.length > 0
+                    React__default.createElement(p$5, { direction: "column", style: { minWidth: 0, flex: 1 } },
+                        React__default.createElement(p$d, { weight: "bold", style: { color: isNeumorphic ? '#444' : 'inherit', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } }, currentFiles.length > 0
                             ? `${currentFiles.length} file${currentFiles.length !== 1 ? 's' : ''} selected`
                             : (placeholder || "Choose files...")),
-                        React__default.createElement(p$d, { size: "1", color: "gray", style: { opacity: 0.8 } }, "PDF, Images, Office Docs, JSON, ZIP"))),
+                        React__default.createElement(p$d, { size: "1", color: "gray", style: { opacity: 0.8, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } }, "PDF, Images, Office Docs, JSON, ZIP"))),
                 React__default.createElement("input", { id: inputId, ref: inputRef, name: alias, type: "file", multiple: true, accept: ACCEPTED_EXTENSIONS, onChange: handleFileChange, disabled: readOnly, style: { display: 'none' }, "aria-describedby": hasError ? errorId : undefined })),
             preview && currentFiles.length > 0 && (React__default.createElement(o$6, { columns: "repeat(auto-fill, minmax(220px, 1fr))", gap: "3", mt: "1" }, currentFiles.map((file, index) => {
                 let previewUrl = null;
@@ -31982,7 +31976,8 @@ const FileMultiple = (_a) => {
                                 background: 'var(--gray-a3)',
                                 display: 'flex',
                                 alignItems: 'center',
-                                justifyContent: 'center'
+                                justifyContent: 'center',
+                                flexShrink: 0
                             } }, previewUrl && (fileName.match(/\.(jpeg|jpg|png|gif|webp)$/i) || (file instanceof File && file.type.startsWith('image/'))) ? (React__default.createElement("img", { src: previewUrl, alt: "preview", style: { width: '100%', height: '100%', objectFit: 'cover' } })) : (getFileIcon(file))),
                         React__default.createElement(p$5, { direction: "column", style: { flex: 1, overflow: 'hidden' } },
                             React__default.createElement(p$d, { size: "1", weight: "bold", style: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', color: isNeumorphic ? '#444' : 'inherit' } }, fileName),
@@ -31993,13 +31988,12 @@ const FileMultiple = (_a) => {
                             } },
                             React__default.createElement(Icon, { name: 'close' }))))));
             }))),
-            React__default.createElement("div", null,
+            React__default.createElement("div", { style: { marginTop: 4, display: 'flex', alignItems: 'center', gap: 6 } },
                 inputLabel && (React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: inputId }, inputLabel)),
-                "\u00A0",
-                isHinted && (React__default.createElement(e, { content: hintText || "No hint available" },
-                    React__default.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
-                        React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray', marginLeft: 4 } })))),
-                hasError && (React__default.createElement(p$d, { id: errorId, size: "1", color: "red", style: { display: 'block', marginTop: 2 } }, typeof fieldError === 'string' ? (errorText || fieldError) : 'Invalid file selection'))))));
+                isHinted && (React__default.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
+                    React__default.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { display: 'flex' } },
+                        React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
+                hasError && (React__default.createElement(p$d, { id: errorId, size: "1", color: "red", className: 'core-input-label-error' }, errorText || (typeof fieldError === 'string' ? fieldError : `Required field`)))))));
 };
 
 const getStyles = (design, layout) => {
@@ -32034,9 +32028,9 @@ const getStyles = (design, layout) => {
 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__default.createElement(p$8, { className: className, style: Object.assign(Object.assign(Object.assign({}, containerStyles), { width, height: height || 'auto' }), style), onClick: onClick }, src ? (React__default.createElement("img", { id: String(id), src: src, alt: alt, style: {
-            width: '333px',
-            height: '333px',
+    const content = (React__default.createElement(p$8, { className: className, style: Object.assign(Object.assign(Object.assign({}, containerStyles), { width: '100%', height: height || '100%' }), style), onClick: onClick }, src ? (React__default.createElement("img", { id: String(id), src: src, alt: alt, style: {
+            width: '100%',
+            height: '100%',
             objectFit: 'cover',
             display: 'block',
         } })) : (React__default.createElement(p$5, { align: "center", justify: "center", style: {
@@ -32048,11 +32042,7 @@ const ImageOutput = ({ id, src, alt = "Image", design = 'outline', layout = 'nor
         React__default.createElement(p$5, { direction: "column", align: "center", gap: "2" },
             React__default.createElement(Icon, { name: 'image', width: "32", height: "32", color: iconColor, style: { opacity: 0.5 } }),
             React__default.createElement(p$d, { size: "1", color: "gray" }, "No Image"))))));
-    if (height) {
-        return content;
-    }
-    return (React__default.createElement(p$8, { style: { width } },
-        React__default.createElement(i$9, { ratio: aspectratio }, content)));
+    return (React__default.createElement(p$8, { style: { width, maxWidth: 500, maxHeight: 500 } }, height ? (content) : (React__default.createElement(i$9, { ratio: aspectratio }, content))));
 };
 
 const Input$1 = (_a) => {
@@ -39669,7 +39659,7 @@ function _arrayLikeToArray$3(arr, len) { if (len == null || len > arr.length) le
 function _extends$8() { _extends$8 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$8.apply(this, arguments); }
 function _objectWithoutProperties$8(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$8(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$8(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-function CountrySelect(_ref) {
+function CountrySelect$1(_ref) {
   var value = _ref.value,
     onChange = _ref.onChange,
     options = _ref.options,
@@ -39703,7 +39693,7 @@ function CountrySelect(_ref) {
     }, label);
   }));
 }
-CountrySelect.propTypes = {
+CountrySelect$1.propTypes = {
   /**
    * A two-letter country code.
    * Example: "US", "RU", etc.
@@ -39748,7 +39738,7 @@ function CountrySelectWithIcon(_ref3) {
   }, [options, value]);
   return /*#__PURE__*/React__default.createElement("div", {
     className: "PhoneInputCountry"
-  }, /*#__PURE__*/React__default.createElement(CountrySelect, _extends$8({}, rest, {
+  }, /*#__PURE__*/React__default.createElement(CountrySelect$1, _extends$8({}, rest, {
     value: value,
     options: options,
     className: classNames('PhoneInputCountrySelect', className)
@@ -55512,7 +55502,6 @@ const CreditCardInput = (_a) => {
                 React__default.createElement("div", { style: { display: 'flex', alignItems: 'center' } }, getCardIcon())),
             React__default.createElement("div", { style: { marginTop: 4, display: 'flex', alignItems: 'center', gap: 6 } },
                 inputLabel && (React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: `${alias}FormInput` }, inputLabel)),
-                "\u00A0",
                 isHinted && (React__default.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
                     React__default.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { display: 'flex' } },
                         React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
@@ -55667,8 +55656,8 @@ const CurrencyInput = (_a) => {
                         textAlign: 'right',
                         width: '100%'
                     }, inputMode: "decimal", autoComplete: "off" }))),
-            React__default.createElement("div", null,
-                React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: `${alias}FormInput` }, inputLabel),
+            React__default.createElement("div", { style: { marginTop: 4, display: 'flex', alignItems: 'center', gap: 6 } },
+                inputLabel && (React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: `${alias}FormInput` }, inputLabel)),
                 isHinted && (React__default.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
                     React__default.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { display: 'flex' } },
                         React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
@@ -55748,12 +55737,12 @@ const StockInput = (_a) => {
                             fontWeight: 500,
                             fontFamily: 'var(--default-font-family)',
                         }, inputMode: "decimal", autoComplete: "off" }))),
-            React__default.createElement("div", null,
+            React__default.createElement("div", { style: { marginTop: 4, display: 'flex', alignItems: 'center', gap: 6 } },
                 inputLabel && (React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: `${alias}FormInput` }, inputLabel)),
                 isHinted && (React__default.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
                     React__default.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { display: 'flex' } },
                         React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
-                hasError && (React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, errorText || (typeof fieldError === 'string' ? fieldError : `Required field`)))))));
+                hasError && (React__default.createElement(p$d, { id: errorId, size: "1", color: "red", className: 'core-input-label-error' }, errorText || (typeof fieldError === 'string' ? fieldError : `Required field`)))))));
 };
 
 const RadioGroupInput = (_a) => {
@@ -56166,9 +56155,8 @@ const SliderInput = (_a) => {
                 }, onValueCommit: () => {
                     setFieldTouched(alias, true, false);
                 }, className: inputtype === 'slider-neumorphic' ? 'neu-slider' : inputtype === 'slider-outline' ? 'outline-slider' : '', style: neuVars }),
-            React__default.createElement("div", null,
-                React__default.createElement(p$d, { id: labelId, as: "div", size: "2", weight: "bold" }, inputLabel),
-                "\u00A0",
+            React__default.createElement("div", { style: { marginTop: 4, display: 'flex', alignItems: 'center', gap: 6 } },
+                inputLabel && (React__default.createElement(p$d, { id: labelId, as: "div", size: "2", weight: "bold" }, inputLabel)),
                 isHinted ?
                     React__default.createElement(React__default.Fragment, null,
                         React__default.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
@@ -56238,8 +56226,8 @@ const RangeSlider = (_a) => {
             React__default.createElement(s, { name: alias, id: `${alias}FormInput`, disabled: readOnly, "aria-labelledby": labelId, min: minvalue, max: maxvalue, step: stepvalue, minStepsBetweenThumbs: minStepsBetweenThumbs, value: sliderValue, onValueChange: (val) => {
                     setFieldValue(alias, isRange ? val : val[0]);
                 }, onValueCommit: () => setFieldTouched(alias, true, false), className: inputtype === 'range-neumorphic' ? 'neu-slider' : inputtype === 'range-outline' ? 'outline-slider' : '', style: neuVars }),
-            React__default.createElement("div", null,
-                React__default.createElement(p$d, { id: labelId, as: "div", size: "2", weight: "bold", style: { display: 'inline' } }, inputLabel),
+            React__default.createElement("div", { style: { marginTop: 4, display: 'flex', alignItems: 'center', gap: 6 } },
+                inputLabel && (React__default.createElement(p$d, { id: labelId, as: "div", size: "2", weight: "bold", style: { display: 'inline' } }, inputLabel)),
                 isHinted && (React__default.createElement(React__default.Fragment, null,
                     React__default.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
                         React__default.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
@@ -56842,6 +56830,9 @@ const datePickerInputType = ["datepicker", "datepickerinput", "datepicker-input"
 const dateRangePickerInputType = ["daterangepicker", "daterangepickerinput", "daterangepicker-input", "input-daterangepicker", "inputdaterangepicker"];
 const dateTimePickerInputType = ["datetimepicker", "datetimepickerinput", "datetimepicker-input", "input-datetimepicker", "inputdatetimepicker"];
 const dropdownInputType = ["dropdown", "dropdowninput", "dropdown-input", "input-dropdown", "inputdropdown"];
+const countrydropdownInputType = ["countrydropdown", "countrydropdowninput", "countrydropdown-input", "input-countrydropdown", "inputcountrydropdown",
+    "countryselect", "countryselect-input", "countryselectinput", "input-countryselect"];
+const countrymultiselectInputType = ["countrymultiselect", "countrymultiselectinput", "countrymultiselect-input", "input-countrymultiselect", "inputcountrymultiselect"];
 const fileInputType = ["file", "fileinput", "file-input", "input-file", "inputfile"];
 const fileMultipleInputType = ["filemultiple", "filemultipleinput", "filemultiple-input", "input-filemultiple", "inputfilemultiple"];
 const imageOutputType = ["image", "imageoutput", "image-output", "output-image", "outputimage"];
@@ -56991,6 +56982,151 @@ const DateTimePicker = ({ alias, inputLabel, inputtype = 'datetimepicker-outline
                 hasError && (React__default.createElement(p$d, { size: "1", color: "red", style: { display: 'block' } }, errorText || (typeof fieldError === 'string' ? fieldError : "Required field")))))));
 };
 
+const CountrySelect = (_a) => {
+    var _b;
+    var { inputtype = 'countryselect-outline', alias, readOnly, width, inputLabel, placeholder = 'Select Country...', newRow, isHinted, hintText, hintUrl, errorText, displayFlag = true, multiselect = false, enableSearch = false, style, className, formikContext } = _a; __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "placeholder", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "displayFlag", "multiselect", "enableSearch", "style", "className", "formikContext"]);
+    const defaultFormikContext = useFormikContext();
+    const activeContext = formikContext || defaultFormikContext;
+    if (!activeContext) {
+        console.error(`CountryDropdown '${alias}' must be used within a Formik provider.`);
+        return null;
+    }
+    const { values, touched, errors, setFieldValue, setFieldTouched } = activeContext;
+    const fieldValue = getIn(values, alias);
+    const fieldTouched = getIn(touched, alias);
+    const fieldError = getIn(errors, alias);
+    const selectedValues = useMemo(() => {
+        if (multiselect)
+            return Array.isArray(fieldValue) ? fieldValue : [];
+        return fieldValue ? [String(fieldValue)] : [];
+    }, [fieldValue, multiselect]);
+    const hasError = Boolean(fieldTouched && fieldError);
+    const triggerRef = useRef(null);
+    const [neuVars, setNeuVars] = useState({});
+    const [isOpen, setIsOpen] = useState(false);
+    const [searchQuery, setSearchQuery] = useState("");
+    const errorId = `${alias}-error`;
+    const allCountries = useMemo(() => {
+        return getCountries().map(c => ({ value: c, label: en[c] }));
+    }, []);
+    const filteredCountries = useMemo(() => {
+        if (!enableSearch || !searchQuery)
+            return allCountries;
+        const lowerSearch = searchQuery.toLowerCase();
+        return allCountries.filter(c => c.label.toLowerCase().includes(lowerSearch));
+    }, [allCountries, searchQuery, enableSearch]);
+    const handleSelection = (countryCode) => {
+        if (multiselect) {
+            const newValues = selectedValues.includes(countryCode)
+                ? selectedValues.filter((v) => v !== countryCode)
+                : [...selectedValues, countryCode];
+            setFieldValue(alias, newValues);
+        }
+        else {
+            setFieldValue(alias, countryCode);
+            setIsOpen(false);
+        }
+        setTimeout(() => setFieldTouched(alias, true, false), 0);
+    };
+    const displayLabel = useMemo(() => {
+        if (selectedValues.length === 0)
+            return placeholder;
+        if (!multiselect) {
+            const c = allCountries.find(x => x.value === selectedValues[0]);
+            return c ? c.label : selectedValues[0];
+        }
+        if (selectedValues.length <= 2) {
+            return selectedValues.map(v => { var _a; return ((_a = allCountries.find(x => x.value === v)) === null || _a === void 0 ? void 0 : _a.label) || v; }).join(', ');
+        }
+        return `${selectedValues.length} countries selected`;
+    }, [selectedValues, multiselect, allCountries, placeholder]);
+    useEffect(() => {
+        if (inputtype === 'countryselect-neumorphic' && triggerRef.current) {
+            const parentBg = getNearestParentBackground(triggerRef.current.parentElement);
+            setNeuVars({
+                '--neu-bg': parentBg,
+                '--neu-shadow-dark': adjustColor(parentBg, -30),
+                '--neu-shadow-light': adjustColor(parentBg, 30),
+                '--neu-text': 'var(--gray-12)',
+                '--neu-error': 'var(--red-9)',
+            });
+        }
+    }, [inputtype]);
+    useEffect(() => {
+        if (!isOpen)
+            setSearchQuery("");
+    }, [isOpen]);
+    // --- STYLES ---
+    const baseTrigger = {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        width: '100%',
+        cursor: readOnly ? 'default' : 'pointer',
+        textAlign: 'left',
+        padding: '0 12px',
+        fontSize: 'var(--font-size-2)',
+        fontFamily: 'var(--default-font-family)',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        boxSizing: 'border-box',
+        opacity: readOnly ? 0.7 : 1,
+    };
+    const materialTrigger = Object.assign(Object.assign({}, baseTrigger), { backgroundColor: 'var(--color-surface)', border: hasError ? '1px solid var(--red-9)' : 'none', boxShadow: '0 2px 5px rgba(0,0,0,0.1)', borderRadius: '4px', height: '32px', fontWeight: 500 });
+    const outlineTrigger = Object.assign(Object.assign({}, baseTrigger), { backgroundColor: 'transparent', border: hasError ? '2px solid var(--red-9)' : '2px solid var(--gray-7)', borderRadius: '4px', height: '32px', fontWeight: 600 });
+    const neumorphicTrigger = Object.assign(Object.assign({}, baseTrigger), { backgroundColor: 'var(--neu-bg)', color: hasError ? 'var(--neu-error)' : 'var(--neu-text)', border: 'none', borderRadius: '12px', height: '40px', fontWeight: 600, boxShadow: isOpen
+            ? 'inset 6px 6px 12px var(--neu-shadow-dark), inset -6px -6px 12px var(--neu-shadow-light)'
+            : '6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light)', transition: 'all 0.2s ease' });
+    const activeTrigger = inputtype === 'countryselect-material' ? materialTrigger :
+        inputtype === 'countryselect-outline' ? outlineTrigger : Object.assign(Object.assign({}, neumorphicTrigger), neuVars);
+    return (React__default.createElement(Column, { span: width, newLine: newRow },
+        React__default.createElement(p$5, { direction: "column", gap: "2", style: { width: '100%' } },
+            React__default.createElement(P$1, { open: isOpen, onOpenChange: (open) => {
+                    if (readOnly)
+                        return;
+                    setIsOpen(open);
+                    if (!open)
+                        setFieldTouched(alias, true, false);
+                } },
+                React__default.createElement(s$1, null,
+                    React__default.createElement("button", { id: `${alias}FormInput`, type: "button", ref: triggerRef, className: className, style: Object.assign(Object.assign({}, activeTrigger), style), "aria-describedby": `${alias}InputLabel`, disabled: readOnly },
+                        React__default.createElement(p$5, { align: "center", gap: "2", style: { minWidth: 0, flex: 1 } },
+                            !multiselect && displayFlag && selectedValues.length === 1 && (React__default.createElement(FlagIcon, { country: selectedValues[0] })),
+                            React__default.createElement("span", { style: {
+                                    overflow: 'hidden',
+                                    textOverflow: 'ellipsis',
+                                    whiteSpace: 'nowrap',
+                                    color: selectedValues.length === 0 ? 'var(--gray-8)' : 'inherit'
+                                } }, displayLabel)),
+                        React__default.createElement(Icon, { name: 'chevrondown', style: { flexShrink: 0, opacity: 0.5, marginLeft: 8 } }))),
+                React__default.createElement(i$3, { align: "start", sideOffset: 5, style: Object.assign({ width: ((_b = triggerRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth) || 240, padding: 0, overflow: 'hidden', backgroundColor: inputtype === 'countryselect-neumorphic' ? 'var(--neu-bg)' : 'var(--color-panel-solid)' }, neuVars) },
+                    enableSearch && (React__default.createElement(p$8, { p: "2", style: { borderBottom: inputtype === 'countryselect-neumorphic' ? 'none' : '1px solid var(--gray-6)' } },
+                        React__default.createElement(u, { placeholder: "Search countries...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), variant: inputtype === 'countryselect-neumorphic' ? 'soft' : 'surface' },
+                            React__default.createElement(c, null,
+                                React__default.createElement(Icon, { name: "magnifyingglass", height: "14", width: "14", style: { opacity: 0.5 } }))))),
+                    React__default.createElement(c$1, { type: "auto", scrollbars: "vertical", style: { maxHeight: 250 } },
+                        React__default.createElement(p$8, { p: "2" },
+                            React__default.createElement(p$5, { direction: "column", gap: "1" }, filteredCountries.length === 0 ? (React__default.createElement(p$d, { size: "2", color: "gray", align: "center", style: { padding: '16px 0' } }, "No countries found.")) : (filteredCountries.map((country) => {
+                                const isSelected = selectedValues.includes(country.value);
+                                return (React__default.createElement(p$5, { key: country.value, align: "center", gap: "3", onClick: () => handleSelection(country.value), style: {
+                                        padding: '8px',
+                                        cursor: 'pointer',
+                                        borderRadius: '4px',
+                                        backgroundColor: isSelected ? 'var(--accent-a3)' : 'transparent',
+                                        transition: 'background-color 0.1s'
+                                    } },
+                                    multiselect && (React__default.createElement(c$2, { checked: isSelected, style: { pointerEvents: 'none' } })),
+                                    displayFlag && (React__default.createElement(FlagIcon, { country: country.value })),
+                                    React__default.createElement(p$d, { size: "2", style: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } }, country.label)));
+                            }))))))),
+            React__default.createElement("div", { style: { marginTop: 4, display: 'flex', alignItems: 'center', gap: 6 } },
+                inputLabel && (React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: `${alias}FormInput` }, inputLabel)),
+                isHinted && (React__default.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
+                    React__default.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { display: 'flex' } },
+                        React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
+                hasError && (React__default.createElement(p$d, { id: errorId, size: "1", color: "red", className: 'core-input-label-error' }, errorText || (typeof fieldError === 'string' ? fieldError : `Required field`)))))));
+};
+
 const Teletraan1 = ({ xFormModel, readOnlyMode = false, displayMode = 'codice', brandColor = "#000000", onPrev, onNext, onFinish }) => {
     const [dualToggled, setDualToggled] = useState(false);
     const [neuVars] = useState({
@@ -57037,6 +57173,10 @@ const Teletraan1 = ({ xFormModel, readOnlyMode = false, displayMode = 'codice',
                 return React__default.createElement(DateTimePicker, Object.assign({}, layoutProps, { placeholder: inputPlaceholder }));
             case dropdownInputType.includes(normalizedType):
                 return React__default.createElement(Dropdown, Object.assign({}, layoutProps, { placeholder: inputPlaceholder, inputOptions: inputOptions || [InputOptionsPlaceholder] }));
+            case countrydropdownInputType.includes(normalizedType):
+                return React__default.createElement(CountrySelect, Object.assign({ displayFlag: true, enableSearch: true }, layoutProps, { placeholder: inputPlaceholder }));
+            case countrymultiselectInputType.includes(normalizedType):
+                return React__default.createElement(CountrySelect, Object.assign({ displayFlag: true, enableSearch: true, multiselect: true }, layoutProps, { placeholder: inputPlaceholder }));
             case fileInputType.includes(normalizedType):
                 return React__default.createElement(File$1, Object.assign({}, layoutProps, { preview: true }));
             case fileMultipleInputType.includes(normalizedType):
@@ -57108,7 +57248,7 @@ const Teletraan1 = ({ xFormModel, readOnlyMode = false, displayMode = 'codice',
             case 'codex':
                 return (React__default.createElement(Codex, { brandColor: brandColor }, xFormModel.model.map((formsection, index, array) => (React__default.createElement(CodexItem, { key: formsection.sectionId, stepId: String(formsection.sectionId), title: formsection.title, subtitleDescription: formsection.subtitle ? formsection.subtitle : undefined, icon: React__default.createElement(Icon, { name: formsection.icon || "fontfamily" }) },
                     React__default.createElement(Row, { key: formsection.sectionId }, renderQueries(formsection.queries)),
-                    React__default.createElement(CodexControls, { prevStepId: index > 0 ? String(array[index - 1].sectionId) : undefined, nextStepId: index < array.length - 1 ? String(array[index + 1].sectionId) : undefined, onPrev: onPrev, onNext: onNext, onFinish: onFinish }))))));
+                    React__default.createElement(CodexControls, { prevStepId: index > 0 ? String(array[index - 1].sectionId) : undefined, nextStepId: index < array.length - 1 ? String(array[index + 1].sectionId) : undefined, onPrev: onPrev, onNext: onNext, onFinish: () => onFinish }))))));
             case 'codice':
             default:
                 return (React__default.createElement(React__default.Fragment, { key: xFormModel.uuid }, xFormModel.model.map((formsection) => (React__default.createElement(React__default.Fragment, { key: formsection.sectionId || crypto.randomUUID() },
@@ -57192,14 +57332,15 @@ class VectorSigma {
             "checkbox", "checkboxes", "checkboxinput", "chechbox-input", "input-checkbox", "inputcheckbox", "checkboxgroup-input",
             "filemultiple", "filemultipleinput", "filemultiple-input", "input-filemultiple", "inputfilemultiple",
             "selectmultiple", "selectmultipleinput", "selectmultiple-input", "input-selectmultiple", "inputselectmultiple",
-            "range", "rangeslider", "rangeinput", "rangesliderinput", "rangeslider-input", "range-input", "input-rangeslider", "inputrangeslider"
+            "countrymultiselect", "countrymultiselectinput", "countrymultiselect-input", "input-countrymultiselect", "inputcountrymultiselect",
+            "range", "rangeslider", "rangeinput", "rangesliderinput", "rangeslider-input", "range-input", "input-rangeslider", "inputrangeslider",
+            "slider", "sliderinput", "slider-input", "input-slider", "inputslider"
         ];
         const booleanTypes = [
             "toggle", "switch", "toggleinput", "toggle-input", "input-toggle", "inputtoggle",
             "conditionaltoggle", "conditionalcheckbox", "conditional-toggle", "conditional-checkbox"
         ];
         const numberTypes = [
-            "slider", "sliderinput", "slider-input", "input-slider", "inputslider",
             "currency", "currencyinput", "currency-input", "input-currency", "inputcurrency",
             "stock", "stockinput", "stock-input", "input-stock", "inputstock"
         ];
@@ -57421,7 +57562,8 @@ class VectorSigma {
         const sanitizedData = normalizeXForm(this.formObject);
         const { initialValues, validationSchema } = this.buildFormikConfig(sanitizedData);
         const isCodexMode = (options === null || options === void 0 ? void 0 : options.displayMode) === 'codex';
-        return (React__default.createElement(R, null,
+        const themeConfig = Object.assign({ appearance: 'inherit', accentColor: 'blue', radius: 'medium' }, options === null || options === void 0 ? void 0 : options.theme);
+        return (React__default.createElement(R, Object.assign({}, themeConfig),
             React__default.createElement(Formik, { initialValues: initialValues, validationSchema: validationSchema, onSubmit: (values, actions) => __awaiter(this, void 0, void 0, function* () {
                     try {
                         this.statusCode = 2;
@@ -57432,7 +57574,7 @@ class VectorSigma {
                             yield options.onSubmit(values, actions, this);
                         }
                         if (options === null || options === void 0 ? void 0 : options.onFinish) {
-                            options.onFinish();
+                            options.onFinish(values, actions, this);
                         }
                     }
                     catch (error) {
@@ -57607,4 +57749,4 @@ const parseUuidFormat = (input) => {
     return numbers;
 };
 
-export { Accordion, AccordionItem, AvatarInput, ButtonInput, CURRENCIES, CheckboxGroupInput, Codex, CodexControls, CodexItem, Column, ConditionalTrigger, Container, CreditCardInput, CurrencyInput, DatePicker, DateRangePicker, DateTimePicker, Dropdown, File$1 as File, FileMultiple, FlagIcon, Icon, ImageOutput, Input$1 as Input, InputOptionSchema, MultipleSelect, OptionSelect, PasswordInput, PhoneInput, QuerySchema, RadioGroupInput, RangeSlider, Row, SectionSchema, SectionTitle, SliderInput, StockInput, Teletraan1, R as Theme, N as ThemePanel, Toggle, UUIDInput, VectorSigma, XFormSchema, normalizeXForm, parseUuidFormat, primeMatrix, useStepper };
+export { Accordion, AccordionItem, AvatarInput, ButtonInput, CURRENCIES, CheckboxGroupInput, Codex, CodexControls, CodexItem, Column, ConditionalTrigger, Container, CountrySelect, CreditCardInput, CurrencyInput, DatePicker, DateRangePicker, DateTimePicker, Dropdown, File$1 as File, FileMultiple, FlagIcon, Icon, ImageOutput, Input$1 as Input, InputOptionSchema, MultipleSelect, OptionSelect, PasswordInput, PhoneInput, QuerySchema, RadioGroupInput, RangeSlider, Row, SectionSchema, SectionTitle, SliderInput, StockInput, Teletraan1, R as Theme, N as ThemePanel, Toggle, UUIDInput, VectorSigma, XFormSchema, normalizeXForm, parseUuidFormat, primeMatrix, useStepper };

package/lib/types/components/dropdown/countrydropdown.d.ts

@@ -0,0 +1,103 @@
+import React, { ReactNode } from 'react';
+import { FormikContextType } from 'formik';
+import '../../styles/main.scss';
+export type CountrySelectDesign = 'countryselect' | 'countryselect-material' | 'countryselect-outline' | 'countryselect-neumorphic';
+export interface CountryDropdownProps {
+    /**
+     * * The required unique identifier for the CountrySelect input field.
+     * * @example alias="citizenshipCountries"
+     */
+    alias: string;
+    /**
+     * * The design variation of the CountrySelect input.
+     * Default: 'countryselect-outline'
+     * Variants: 'countryselect', 'countryselect-outline', 'countryselect-material', 'countryselect-neumorphic'.
+     */
+    inputtype?: CountrySelectDesign & {};
+    /**
+     * * The optional input label or description.
+     */
+    inputLabel?: string;
+    /**
+     * * The required viewport column width for the CountrySelect input field.
+     * i.e. 1 - 12
+     * * @example
+     * width={5}
+     */
+    width: number;
+    /**
+     * * Option to render CountrySelect input field on new row.
+     * * @example
+     * newRow
+     */
+    newRow?: boolean;
+    /**
+     * * Option to force set the default value for a CountrySelect input field.
+     * * @example
+     * placeholder="Select a country"
+     */
+    placeholder?: string;
+    /**
+     * * Option to disable edits for CountrySelect input field.
+     * * @example
+     * readOnly
+     */
+    readOnly?: boolean;
+    /**
+       * * Option to enable a hint for CountrySelect input field.
+       * * @example
+       * isHinted
+       */
+    isHinted?: boolean;
+    /**
+     * * Option to specify hint text for CountrySelect input field.
+     * * @example
+     * hintText="This is a hint for a VΣ CountrySelect"
+     */
+    hintText?: string;
+    /**
+     * * Option to specify a hint url reference or resource for CountrySelect input field.
+     * * @example
+     * hintUrl="https://www.mekaegwim.ca"
+     */
+    hintUrl?: string;
+    /**
+     * * Option to specify the isRequired error text for the CountrySelect input field.
+     * * @example
+     * errorText="Country selection is required"
+     */
+    errorText?: ReactNode | string | null;
+    /**
+     * * Option to specify the .scss class selector for the CountrySelect input field.
+     * * @example
+     * className="teletraan-1-countryselect"
+     */
+    className?: string;
+    /**
+     * * Option to inject custom CSS for the CountrySelect input field.
+     * * @example
+     * style={{ color: "#000000" }}
+     */
+    style?: React.CSSProperties;
+    /**
+     * Optional explicit Formik context. Useful when bypassing duplicate
+     * context issues in monorepos or bundled npm packages.
+     */
+    formikContext?: FormikContextType<any>;
+    /**
+     * * Option to render the country flag icon next to the country name.
+     * Default: true
+     */
+    displayFlag?: boolean;
+    /**
+     * * Option to allow multiple country selections and return an array of country codes.
+     * Default: false
+     */
+    multiselect?: boolean;
+    /**
+     * * Option to enable search bar inside the CountrySelect to filter countries.
+     * Default: false
+     */
+    enableSearch?: boolean;
+}
+export declare const CountrySelect: ({ inputtype, alias, readOnly, width, inputLabel, placeholder, newRow, isHinted, hintText, hintUrl, errorText, displayFlag, multiselect, enableSearch, style, className, formikContext, ...props }: CountryDropdownProps) => React.JSX.Element | null;

package/lib/types/components/dropdown/dropdown.d.ts

@@ -98,7 +98,7 @@ export interface xDropDownProps {
      */
     className?: string;
     /**
-     * * Option to inject custom CSS the Dropdown input field.
+     * * Option to inject custom CSS for the Dropdown input field.
      * * @example
      * style={{ color: "#000000" }}
      */

package/lib/types/components/file/file.d.ts

@@ -80,7 +80,7 @@ export interface FileInputProps {
      */
     errorText?: ReactNode | string | null;
     /**
-     * * Option to inject custom CSS the File input field.
+     * * Option to inject custom CSS for the File input field.
      * * @example
      * style={{ color: "#000000" }}
      */

package/lib/types/components/file/filemultiple.d.ts

@@ -86,7 +86,7 @@ export interface FileMultipleInputProps {
      */
     className?: string;
     /**
-     * * Option to inject custom CSS the FileMultiple input field.
+     * * Option to inject custom CSS for the FileMultiple input field.
      * * @example
      * style={{ color: "#000000" }}
      */

package/lib/types/index.d.ts

@@ -9,6 +9,7 @@ export * from './components/datepicker/datepicker';
 export * from './components/daterangepicker/daterangepicker';
 export * from './components/datetimepicker/datetimepicker';
 export * from './components/dropdown/dropdown';
+export * from './components/dropdown/countrydropdown';
 export * from './components/file/file';
 export * from './components/file/filemultiple';
 export * from './components/icons/icons';

package/lib/types/teletraan1.d.ts

@@ -1,5 +1,7 @@
 import React from 'react';
 import { XFormType } from 'utils/voltron';
+import { FormikHelpers } from 'formik';
+import { VectorSigma } from 'vectorSigma';
 export type teletraan1Display = 'accordion' | 'codice' | 'codex' | 'dual';
 export interface Teletraan1Props {
     /**
@@ -49,6 +51,6 @@ export interface Teletraan1Props {
      * * @example
      * onFinish={console.log("Teletraan-1 Codex :: onFinish()")}
      */
-    onFinish?: () => void;
+    onFinish?: (values: any, actions: FormikHelpers<any>, instance: VectorSigma<any>) => void | Promise<any>;
 }
 export declare const Teletraan1: ({ xFormModel, readOnlyMode, displayMode, brandColor, onPrev, onNext, onFinish }: Teletraan1Props) => React.JSX.Element;

package/lib/types/tests/builds/orion.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/types/tests/builds/pax.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/types/tests/components/components.countryselect.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/types/utils/voltaire.d.ts

@@ -6,6 +6,8 @@ export declare const datePickerInputType: string[];
 export declare const dateRangePickerInputType: string[];
 export declare const dateTimePickerInputType: string[];
 export declare const dropdownInputType: string[];
+export declare const countrydropdownInputType: string[];
+export declare const countrymultiselectInputType: string[];
 export declare const fileInputType: string[];
 export declare const fileMultipleInputType: string[];
 export declare const imageOutputType: string[];

package/lib/types/vectorSigma.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { XFormType, XFormQuery, SectionSchema } from './utils/voltron';
 import { Teletraan1Props } from './teletraan1';
 import { z } from "zod";
+import { ThemeProps } from '@radix-ui/themes';
 import { FormikHelpers } from 'formik';
 import './styles/main.scss';
 export interface VectorSigmaRenderProps<T extends Record<string, any> = Record<string, any>> extends Omit<Teletraan1Props, 'xFormModel'> {
@@ -20,6 +21,15 @@ export interface VectorSigmaRenderProps<T extends Record<string, any> = Record<s
     }}
      */
     onSubmit?: (values: T, actions: FormikHelpers<T>, instance: VectorSigma<T>) => void | Promise<any>;
+    /**
+     * * Optional Radix UI Theme configuration.
+     * Enables developer theming extensibility to align xForm appearance with an extant application design system.
+     *
+     * https://www.radix-ui.com/themes/docs/components/theme
+     * @example
+     * theme={{ appearance: 'dark', accentColor: 'ruby', radius: 'large' }}
+     */
+    theme?: Omit<ThemeProps, 'children'>;
 }
 export declare class VectorSigma<T extends Record<string, any> = Record<string, any>> {
     isValid: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@emeraldemperaur/vector-sigma",
-  "version": "1.4.45",
+  "version": "1.4.47",
   "description": "Dynamic Form Orchestrator: NPM Package",
   "repository": {
     "type": "git",