@emeraldemperaur/vector-sigma 1.4.44 → 1.4.46

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/README.md +1 -1
  2. package/lib/index.cjs +195 -49
  3. package/lib/index.esm.js +195 -50
  4. package/lib/types/components/dropdown/countrydropdown.d.ts +103 -0
  5. package/lib/types/components/dropdown/dropdown.d.ts +1 -1
  6. package/lib/types/components/file/file.d.ts +1 -1
  7. package/lib/types/components/file/filemultiple.d.ts +1 -1
  8. package/lib/types/index.d.ts +1 -0
  9. package/lib/types/utils/voltaire.d.ts +2 -0
  10. package/package.json +1 -1
package/README.md CHANGED
@@ -361,7 +361,7 @@ const App = () => {
361
361
 
362
362
  <li><strong>🧩Exported UI Components</strong></br>
363
363
  <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>
364
- <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>
364
+ <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>
365
365
 
366
366
  ```javascript
367
367
  import { Container, Column, Row, CheckboxGroup, Dropdown, File, RangeSlider }
package/lib/index.cjs CHANGED
@@ -31804,13 +31804,11 @@ const File$1 = (_a) => {
31804
31804
  width: '100%',
31805
31805
  position: 'relative',
31806
31806
  overflow: 'hidden',
31807
+ boxSizing: 'border-box',
31807
31808
  };
31808
31809
  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)' });
31809
31810
  const outlineTrigger = Object.assign(Object.assign({}, baseTriggerStyle), { backgroundColor: 'transparent', border: hasError ? '2px dashed var(--red-9)' : '2px dashed var(--gray-8)' });
31810
- const neumorphicTrigger = Object.assign(Object.assign(Object.assign({}, baseTriggerStyle), { backgroundColor: 'var(--neu-bg)', color: hasError ? 'var(--red-9)' : 'var(--neu-text)',
31811
- // Empty: (Dropzone effect)
31812
- // Selected: (Card effect)
31813
- boxShadow: !selectedFile
31811
+ const neumorphicTrigger = Object.assign(Object.assign(Object.assign({}, baseTriggerStyle), { backgroundColor: 'var(--neu-bg)', color: hasError ? 'var(--red-9)' : 'var(--neu-text)', boxShadow: !selectedFile
31814
31812
  ? 'inset 3px 3px 6px var(--neu-shadow-dark), inset -3px -3px 6px var(--neu-shadow-light)'
31815
31813
  : '6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light)', border: 'none' }), neuVars);
31816
31814
  const activeStyle = inputtype === 'fileinput-neumorphic' ? neumorphicTrigger :
@@ -31827,11 +31825,11 @@ const File$1 = (_a) => {
31827
31825
  } }, !selectedFile ? (
31828
31826
  // --- EMPTY STATE RENDER ---
31829
31827
  React.createElement(p$5, { align: "center", gap: "3", style: { width: '100%', color: 'var(--gray-10)' } },
31830
- React.createElement(p$8, { style: { padding: 8, borderRadius: '50%', backgroundColor: 'var(--gray-3)' } },
31828
+ React.createElement(p$8, { style: { padding: 8, borderRadius: '50%', backgroundColor: 'var(--gray-3)', flexShrink: 0 } },
31831
31829
  React.createElement(Icon, { name: 'upload', width: "18", height: "18" })),
31832
- React.createElement(p$5, { direction: "column" },
31833
- React.createElement(p$d, { size: "2", weight: "bold", color: "gray" }, "Upload File"),
31834
- React.createElement(p$d, { size: "1", color: "gray" }, "Supports PDF, Images, Excel, JSON...")))) : (
31830
+ React.createElement(p$5, { direction: "column", style: { minWidth: 0, flex: 1 } },
31831
+ React.createElement(p$d, { size: "2", weight: "bold", color: "gray", style: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } }, "Upload File"),
31832
+ React.createElement(p$d, { size: "1", color: "gray", style: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } }, "Supports PDF, Images, Excel, JSON...")))) : (
31835
31833
  // --- SELECTED STATE RENDER ---
31836
31834
  React.createElement(p$5, { align: "center", gap: "4", style: { width: '100%' } },
31837
31835
  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) => {
31841
31839
  backgroundColor: 'var(--accent-3)', color: 'var(--accent-9)',
31842
31840
  borderRadius: 6, flexShrink: 0
31843
31841
  } }, getFileIcon$1(selectedFile.type, selectedFile.name))),
31844
- React.createElement(p$5, { direction: "column", style: { flexGrow: 1, overflow: 'hidden' } },
31842
+ React.createElement(p$5, { direction: "column", style: { flexGrow: 1, minWidth: 0, overflow: 'hidden' } },
31845
31843
  React.createElement(p$d, { size: "2", weight: "bold", style: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } }, selectedFile.name),
31846
31844
  React.createElement(p$5, { gap: "2", align: "center" },
31847
31845
  React.createElement(p$d, { size: "1", color: "gray" }, formatBytes(selectedFile.size)),
31848
31846
  React.createElement(e$a, { size: "1", color: "gray", variant: "soft" }, (_b = selectedFile.name.split('.').pop()) === null || _b === void 0 ? void 0 : _b.toUpperCase()))),
31849
31847
  React.createElement(o$5, { size: "1", variant: "ghost", color: "red", onClick: handleClear, style: { borderRadius: '50%', padding: 4 } },
31850
31848
  React.createElement(Icon, { name: 'close', width: "16", height: "16" }))))),
31851
- React.createElement("div", null,
31852
- React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: inputId }, inputLabel),
31853
- "\u00A0",
31854
- isHinted ?
31855
- React.createElement(React.Fragment, null,
31856
- React.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
31857
- React.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
31858
- React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
31859
- hasError ?
31860
- React.createElement(React.Fragment, null,
31861
- React.createElement("p", { id: errorId, className: 'core-input-label-error' }, errorText || (typeof fieldError === 'string' ? fieldError : "Required field"))) : null))));
31849
+ React.createElement("div", { style: { marginTop: 4, display: 'flex', alignItems: 'center', gap: 6 } },
31850
+ inputLabel && (React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: inputId }, inputLabel)),
31851
+ isHinted && (React.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
31852
+ React.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { display: 'flex' } },
31853
+ React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
31854
+ hasError && (React.createElement(p$d, { id: errorId, size: "1", color: "red", className: 'core-input-label-error' }, errorText || (typeof fieldError === 'string' ? fieldError : `Required field`)))))));
31862
31855
  };
31863
31856
 
31864
31857
  const getFileIcon = (fileOrUrl) => {
@@ -31961,20 +31954,21 @@ const FileMultiple = (_a) => {
31961
31954
  const isNeumorphic = inputtype === 'filemultiple-neumorphic';
31962
31955
  return (React.createElement(Column, { span: width, newLine: newRow },
31963
31956
  React.createElement(p$5, { direction: "column", gap: "2", className: className, style: Object.assign({ width: '100%' }, style) },
31964
- 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 }) },
31957
+ 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' }) },
31965
31958
  React.createElement(p$5, { align: "center", gap: "4" },
31966
31959
  React.createElement(p$8, { style: {
31967
31960
  background: isNeumorphic ? '#e0e0e0' : 'var(--accent-3)',
31968
31961
  borderRadius: '50%',
31969
31962
  padding: '10px',
31970
- boxShadow: isNeumorphic ? 'inset 3px 3px 6px #b8b9be, inset -3px -3px 6px #ffffff' : 'none'
31963
+ boxShadow: isNeumorphic ? 'inset 3px 3px 6px #b8b9be, inset -3px -3px 6px #ffffff' : 'none',
31964
+ flexShrink: 0
31971
31965
  } },
31972
31966
  React.createElement(Icon, { name: 'upload', width: "20", height: "20", color: isNeumorphic ? '#555' : 'var(--accent-9)' })),
31973
- React.createElement(p$5, { direction: "column" },
31974
- React.createElement(p$d, { weight: "bold", style: { color: isNeumorphic ? '#444' : 'inherit' } }, currentFiles.length > 0
31967
+ React.createElement(p$5, { direction: "column", style: { minWidth: 0, flex: 1 } },
31968
+ React.createElement(p$d, { weight: "bold", style: { color: isNeumorphic ? '#444' : 'inherit', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } }, currentFiles.length > 0
31975
31969
  ? `${currentFiles.length} file${currentFiles.length !== 1 ? 's' : ''} selected`
31976
31970
  : (placeholder || "Choose files...")),
31977
- React.createElement(p$d, { size: "1", color: "gray", style: { opacity: 0.8 } }, "PDF, Images, Office Docs, JSON, ZIP"))),
31971
+ React.createElement(p$d, { size: "1", color: "gray", style: { opacity: 0.8, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } }, "PDF, Images, Office Docs, JSON, ZIP"))),
31978
31972
  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 })),
31979
31973
  preview && currentFiles.length > 0 && (React.createElement(o$6, { columns: "repeat(auto-fill, minmax(220px, 1fr))", gap: "3", mt: "1" }, currentFiles.map((file, index) => {
31980
31974
  let previewUrl = null;
@@ -32003,7 +31997,8 @@ const FileMultiple = (_a) => {
32003
31997
  background: 'var(--gray-a3)',
32004
31998
  display: 'flex',
32005
31999
  alignItems: 'center',
32006
- justifyContent: 'center'
32000
+ justifyContent: 'center',
32001
+ flexShrink: 0
32007
32002
  } }, 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))),
32008
32003
  React.createElement(p$5, { direction: "column", style: { flex: 1, overflow: 'hidden' } },
32009
32004
  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) => {
32014
32009
  } },
32015
32010
  React.createElement(Icon, { name: 'close' }))))));
32016
32011
  }))),
32017
- React.createElement("div", null,
32012
+ React.createElement("div", { style: { marginTop: 4, display: 'flex', alignItems: 'center', gap: 6 } },
32018
32013
  inputLabel && (React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: inputId }, inputLabel)),
32019
- "\u00A0",
32020
- isHinted && (React.createElement(e, { content: hintText || "No hint available" },
32021
- React.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
32022
- React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray', marginLeft: 4 } })))),
32023
- hasError && (React.createElement(p$d, { id: errorId, size: "1", color: "red", style: { display: 'block', marginTop: 2 } }, typeof fieldError === 'string' ? (errorText || fieldError) : 'Invalid file selection'))))));
32014
+ isHinted && (React.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
32015
+ React.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { display: 'flex' } },
32016
+ React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
32017
+ hasError && (React.createElement(p$d, { id: errorId, size: "1", color: "red", className: 'core-input-label-error' }, errorText || (typeof fieldError === 'string' ? fieldError : `Required field`)))))));
32024
32018
  };
32025
32019
 
32026
32020
  const getStyles = (design, layout) => {
@@ -39690,7 +39684,7 @@ function _arrayLikeToArray$3(arr, len) { if (len == null || len > arr.length) le
39690
39684
  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); }
39691
39685
  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; }
39692
39686
  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; }
39693
- function CountrySelect(_ref) {
39687
+ function CountrySelect$1(_ref) {
39694
39688
  var value = _ref.value,
39695
39689
  onChange = _ref.onChange,
39696
39690
  options = _ref.options,
@@ -39724,7 +39718,7 @@ function CountrySelect(_ref) {
39724
39718
  }, label);
39725
39719
  }));
39726
39720
  }
39727
- CountrySelect.propTypes = {
39721
+ CountrySelect$1.propTypes = {
39728
39722
  /**
39729
39723
  * A two-letter country code.
39730
39724
  * Example: "US", "RU", etc.
@@ -39769,7 +39763,7 @@ function CountrySelectWithIcon(_ref3) {
39769
39763
  }, [options, value]);
39770
39764
  return /*#__PURE__*/React.createElement("div", {
39771
39765
  className: "PhoneInputCountry"
39772
- }, /*#__PURE__*/React.createElement(CountrySelect, _extends$8({}, rest, {
39766
+ }, /*#__PURE__*/React.createElement(CountrySelect$1, _extends$8({}, rest, {
39773
39767
  value: value,
39774
39768
  options: options,
39775
39769
  className: classNames('PhoneInputCountrySelect', className)
@@ -55533,7 +55527,6 @@ const CreditCardInput = (_a) => {
55533
55527
  React.createElement("div", { style: { display: 'flex', alignItems: 'center' } }, getCardIcon())),
55534
55528
  React.createElement("div", { style: { marginTop: 4, display: 'flex', alignItems: 'center', gap: 6 } },
55535
55529
  inputLabel && (React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: `${alias}FormInput` }, inputLabel)),
55536
- "\u00A0",
55537
55530
  isHinted && (React.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
55538
55531
  React.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { display: 'flex' } },
55539
55532
  React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
@@ -55688,8 +55681,8 @@ const CurrencyInput = (_a) => {
55688
55681
  textAlign: 'right',
55689
55682
  width: '100%'
55690
55683
  }, inputMode: "decimal", autoComplete: "off" }))),
55691
- React.createElement("div", null,
55692
- React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: `${alias}FormInput` }, inputLabel),
55684
+ React.createElement("div", { style: { marginTop: 4, display: 'flex', alignItems: 'center', gap: 6 } },
55685
+ inputLabel && (React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: `${alias}FormInput` }, inputLabel)),
55693
55686
  isHinted && (React.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
55694
55687
  React.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { display: 'flex' } },
55695
55688
  React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
@@ -55769,12 +55762,12 @@ const StockInput = (_a) => {
55769
55762
  fontWeight: 500,
55770
55763
  fontFamily: 'var(--default-font-family)',
55771
55764
  }, inputMode: "decimal", autoComplete: "off" }))),
55772
- React.createElement("div", null,
55765
+ React.createElement("div", { style: { marginTop: 4, display: 'flex', alignItems: 'center', gap: 6 } },
55773
55766
  inputLabel && (React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: `${alias}FormInput` }, inputLabel)),
55774
55767
  isHinted && (React.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
55775
55768
  React.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { display: 'flex' } },
55776
55769
  React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
55777
- hasError && (React.createElement("p", { id: errorId, className: 'core-input-label-error' }, errorText || (typeof fieldError === 'string' ? fieldError : `Required field`)))))));
55770
+ hasError && (React.createElement(p$d, { id: errorId, size: "1", color: "red", className: 'core-input-label-error' }, errorText || (typeof fieldError === 'string' ? fieldError : `Required field`)))))));
55778
55771
  };
55779
55772
 
55780
55773
  const RadioGroupInput = (_a) => {
@@ -56187,9 +56180,8 @@ const SliderInput = (_a) => {
56187
56180
  }, onValueCommit: () => {
56188
56181
  setFieldTouched(alias, true, false);
56189
56182
  }, className: inputtype === 'slider-neumorphic' ? 'neu-slider' : inputtype === 'slider-outline' ? 'outline-slider' : '', style: neuVars }),
56190
- React.createElement("div", null,
56191
- React.createElement(p$d, { id: labelId, as: "div", size: "2", weight: "bold" }, inputLabel),
56192
- "\u00A0",
56183
+ React.createElement("div", { style: { marginTop: 4, display: 'flex', alignItems: 'center', gap: 6 } },
56184
+ inputLabel && (React.createElement(p$d, { id: labelId, as: "div", size: "2", weight: "bold" }, inputLabel)),
56193
56185
  isHinted ?
56194
56186
  React.createElement(React.Fragment, null,
56195
56187
  React.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
@@ -56259,8 +56251,8 @@ const RangeSlider = (_a) => {
56259
56251
  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) => {
56260
56252
  setFieldValue(alias, isRange ? val : val[0]);
56261
56253
  }, onValueCommit: () => setFieldTouched(alias, true, false), className: inputtype === 'range-neumorphic' ? 'neu-slider' : inputtype === 'range-outline' ? 'outline-slider' : '', style: neuVars }),
56262
- React.createElement("div", null,
56263
- React.createElement(p$d, { id: labelId, as: "div", size: "2", weight: "bold", style: { display: 'inline' } }, inputLabel),
56254
+ React.createElement("div", { style: { marginTop: 4, display: 'flex', alignItems: 'center', gap: 6 } },
56255
+ inputLabel && (React.createElement(p$d, { id: labelId, as: "div", size: "2", weight: "bold", style: { display: 'inline' } }, inputLabel)),
56264
56256
  isHinted && (React.createElement(React.Fragment, null,
56265
56257
  React.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
56266
56258
  React.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
@@ -56863,6 +56855,9 @@ const datePickerInputType = ["datepicker", "datepickerinput", "datepicker-input"
56863
56855
  const dateRangePickerInputType = ["daterangepicker", "daterangepickerinput", "daterangepicker-input", "input-daterangepicker", "inputdaterangepicker"];
56864
56856
  const dateTimePickerInputType = ["datetimepicker", "datetimepickerinput", "datetimepicker-input", "input-datetimepicker", "inputdatetimepicker"];
56865
56857
  const dropdownInputType = ["dropdown", "dropdowninput", "dropdown-input", "input-dropdown", "inputdropdown"];
56858
+ const countrydropdownInputType = ["countrydropdown", "countrydropdowninput", "countrydropdown-input", "input-countrydropdown", "inputcountrydropdown",
56859
+ "countryselect", "countryselect-input", "countryselectinput", "input-countryselect"];
56860
+ const countrymultiselectInputType = ["countrymultiselect", "countrymultiselectinput", "countrymultiselect-input", "input-countrymultiselect", "inputcountrymultiselect"];
56866
56861
  const fileInputType = ["file", "fileinput", "file-input", "input-file", "inputfile"];
56867
56862
  const fileMultipleInputType = ["filemultiple", "filemultipleinput", "filemultiple-input", "input-filemultiple", "inputfilemultiple"];
56868
56863
  const imageOutputType = ["image", "imageoutput", "image-output", "output-image", "outputimage"];
@@ -57012,6 +57007,151 @@ const DateTimePicker = ({ alias, inputLabel, inputtype = 'datetimepicker-outline
57012
57007
  hasError && (React.createElement(p$d, { size: "1", color: "red", style: { display: 'block' } }, errorText || (typeof fieldError === 'string' ? fieldError : "Required field")))))));
57013
57008
  };
57014
57009
 
57010
+ const CountrySelect = (_a) => {
57011
+ var _b;
57012
+ 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"]);
57013
+ const defaultFormikContext = formik.useFormikContext();
57014
+ const activeContext = formikContext || defaultFormikContext;
57015
+ if (!activeContext) {
57016
+ console.error(`CountryDropdown '${alias}' must be used within a Formik provider.`);
57017
+ return null;
57018
+ }
57019
+ const { values, touched, errors, setFieldValue, setFieldTouched } = activeContext;
57020
+ const fieldValue = formik.getIn(values, alias);
57021
+ const fieldTouched = formik.getIn(touched, alias);
57022
+ const fieldError = formik.getIn(errors, alias);
57023
+ const selectedValues = React.useMemo(() => {
57024
+ if (multiselect)
57025
+ return Array.isArray(fieldValue) ? fieldValue : [];
57026
+ return fieldValue ? [String(fieldValue)] : [];
57027
+ }, [fieldValue, multiselect]);
57028
+ const hasError = Boolean(fieldTouched && fieldError);
57029
+ const triggerRef = React.useRef(null);
57030
+ const [neuVars, setNeuVars] = React.useState({});
57031
+ const [isOpen, setIsOpen] = React.useState(false);
57032
+ const [searchQuery, setSearchQuery] = React.useState("");
57033
+ const errorId = `${alias}-error`;
57034
+ const allCountries = React.useMemo(() => {
57035
+ return getCountries().map(c => ({ value: c, label: en[c] }));
57036
+ }, []);
57037
+ const filteredCountries = React.useMemo(() => {
57038
+ if (!enableSearch || !searchQuery)
57039
+ return allCountries;
57040
+ const lowerSearch = searchQuery.toLowerCase();
57041
+ return allCountries.filter(c => c.label.toLowerCase().includes(lowerSearch));
57042
+ }, [allCountries, searchQuery, enableSearch]);
57043
+ const handleSelection = (countryCode) => {
57044
+ if (multiselect) {
57045
+ const newValues = selectedValues.includes(countryCode)
57046
+ ? selectedValues.filter((v) => v !== countryCode)
57047
+ : [...selectedValues, countryCode];
57048
+ setFieldValue(alias, newValues);
57049
+ }
57050
+ else {
57051
+ setFieldValue(alias, countryCode);
57052
+ setIsOpen(false);
57053
+ }
57054
+ setTimeout(() => setFieldTouched(alias, true, false), 0);
57055
+ };
57056
+ const displayLabel = React.useMemo(() => {
57057
+ if (selectedValues.length === 0)
57058
+ return placeholder;
57059
+ if (!multiselect) {
57060
+ const c = allCountries.find(x => x.value === selectedValues[0]);
57061
+ return c ? c.label : selectedValues[0];
57062
+ }
57063
+ if (selectedValues.length <= 2) {
57064
+ return selectedValues.map(v => { var _a; return ((_a = allCountries.find(x => x.value === v)) === null || _a === void 0 ? void 0 : _a.label) || v; }).join(', ');
57065
+ }
57066
+ return `${selectedValues.length} countries selected`;
57067
+ }, [selectedValues, multiselect, allCountries, placeholder]);
57068
+ React.useEffect(() => {
57069
+ if (inputtype === 'countryselect-neumorphic' && triggerRef.current) {
57070
+ const parentBg = getNearestParentBackground(triggerRef.current.parentElement);
57071
+ setNeuVars({
57072
+ '--neu-bg': parentBg,
57073
+ '--neu-shadow-dark': adjustColor(parentBg, -30),
57074
+ '--neu-shadow-light': adjustColor(parentBg, 30),
57075
+ '--neu-text': 'var(--gray-12)',
57076
+ '--neu-error': 'var(--red-9)',
57077
+ });
57078
+ }
57079
+ }, [inputtype]);
57080
+ React.useEffect(() => {
57081
+ if (!isOpen)
57082
+ setSearchQuery("");
57083
+ }, [isOpen]);
57084
+ // --- STYLES ---
57085
+ const baseTrigger = {
57086
+ display: 'flex',
57087
+ alignItems: 'center',
57088
+ justifyContent: 'space-between',
57089
+ width: '100%',
57090
+ cursor: readOnly ? 'default' : 'pointer',
57091
+ textAlign: 'left',
57092
+ padding: '0 12px',
57093
+ fontSize: 'var(--font-size-2)',
57094
+ fontFamily: 'var(--default-font-family)',
57095
+ whiteSpace: 'nowrap',
57096
+ overflow: 'hidden',
57097
+ boxSizing: 'border-box',
57098
+ opacity: readOnly ? 0.7 : 1,
57099
+ };
57100
+ 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 });
57101
+ 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 });
57102
+ 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
57103
+ ? 'inset 6px 6px 12px var(--neu-shadow-dark), inset -6px -6px 12px var(--neu-shadow-light)'
57104
+ : '6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light)', transition: 'all 0.2s ease' });
57105
+ const activeTrigger = inputtype === 'countryselect-material' ? materialTrigger :
57106
+ inputtype === 'countryselect-outline' ? outlineTrigger : Object.assign(Object.assign({}, neumorphicTrigger), neuVars);
57107
+ return (React.createElement(Column, { span: width, newLine: newRow },
57108
+ React.createElement(p$5, { direction: "column", gap: "2", style: { width: '100%' } },
57109
+ React.createElement(P$1, { open: isOpen, onOpenChange: (open) => {
57110
+ if (readOnly)
57111
+ return;
57112
+ setIsOpen(open);
57113
+ if (!open)
57114
+ setFieldTouched(alias, true, false);
57115
+ } },
57116
+ React.createElement(s$1, null,
57117
+ 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 },
57118
+ React.createElement(p$5, { align: "center", gap: "2", style: { minWidth: 0, flex: 1 } },
57119
+ !multiselect && displayFlag && selectedValues.length === 1 && (React.createElement(FlagIcon, { country: selectedValues[0] })),
57120
+ React.createElement("span", { style: {
57121
+ overflow: 'hidden',
57122
+ textOverflow: 'ellipsis',
57123
+ whiteSpace: 'nowrap',
57124
+ color: selectedValues.length === 0 ? 'var(--gray-8)' : 'inherit'
57125
+ } }, displayLabel)),
57126
+ React.createElement(Icon, { name: 'chevrondown', style: { flexShrink: 0, opacity: 0.5, marginLeft: 8 } }))),
57127
+ 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) },
57128
+ enableSearch && (React.createElement(p$8, { p: "2", style: { borderBottom: inputtype === 'countryselect-neumorphic' ? 'none' : '1px solid var(--gray-6)' } },
57129
+ React.createElement(u, { placeholder: "Search countries...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), variant: inputtype === 'countryselect-neumorphic' ? 'soft' : 'surface' },
57130
+ React.createElement(c, null,
57131
+ React.createElement(Icon, { name: "magnifyingglass", height: "14", width: "14", style: { opacity: 0.5 } }))))),
57132
+ React.createElement(c$1, { type: "auto", scrollbars: "vertical", style: { maxHeight: 250 } },
57133
+ React.createElement(p$8, { p: "2" },
57134
+ 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) => {
57135
+ const isSelected = selectedValues.includes(country.value);
57136
+ return (React.createElement(p$5, { key: country.value, align: "center", gap: "3", onClick: () => handleSelection(country.value), style: {
57137
+ padding: '8px',
57138
+ cursor: 'pointer',
57139
+ borderRadius: '4px',
57140
+ backgroundColor: isSelected ? 'var(--accent-a3)' : 'transparent',
57141
+ transition: 'background-color 0.1s'
57142
+ } },
57143
+ multiselect && (React.createElement(c$2, { checked: isSelected, style: { pointerEvents: 'none' } })),
57144
+ displayFlag && (React.createElement(FlagIcon, { country: country.value })),
57145
+ React.createElement(p$d, { size: "2", style: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } }, country.label)));
57146
+ }))))))),
57147
+ React.createElement("div", { style: { marginTop: 4, display: 'flex', alignItems: 'center', gap: 6 } },
57148
+ inputLabel && (React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: `${alias}FormInput` }, inputLabel)),
57149
+ isHinted && (React.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
57150
+ React.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { display: 'flex' } },
57151
+ React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
57152
+ hasError && (React.createElement(p$d, { id: errorId, size: "1", color: "red", className: 'core-input-label-error' }, errorText || (typeof fieldError === 'string' ? fieldError : `Required field`)))))));
57153
+ };
57154
+
57015
57155
  const Teletraan1 = ({ xFormModel, readOnlyMode = false, displayMode = 'codice', brandColor = "#000000", onPrev, onNext, onFinish }) => {
57016
57156
  const [dualToggled, setDualToggled] = React.useState(false);
57017
57157
  const [neuVars] = React.useState({
@@ -57058,6 +57198,10 @@ const Teletraan1 = ({ xFormModel, readOnlyMode = false, displayMode = 'codice',
57058
57198
  return React.createElement(DateTimePicker, Object.assign({}, layoutProps, { placeholder: inputPlaceholder }));
57059
57199
  case dropdownInputType.includes(normalizedType):
57060
57200
  return React.createElement(Dropdown, Object.assign({}, layoutProps, { placeholder: inputPlaceholder, inputOptions: inputOptions || [InputOptionsPlaceholder] }));
57201
+ case countrydropdownInputType.includes(normalizedType):
57202
+ return React.createElement(CountrySelect, Object.assign({ displayFlag: true, enableSearch: true }, layoutProps, { placeholder: inputPlaceholder }));
57203
+ case countrymultiselectInputType.includes(normalizedType):
57204
+ return React.createElement(CountrySelect, Object.assign({ displayFlag: true, enableSearch: true, multiselect: true }, layoutProps, { placeholder: inputPlaceholder }));
57061
57205
  case fileInputType.includes(normalizedType):
57062
57206
  return React.createElement(File$1, Object.assign({}, layoutProps, { preview: true }));
57063
57207
  case fileMultipleInputType.includes(normalizedType):
@@ -57121,7 +57265,7 @@ const Teletraan1 = ({ xFormModel, readOnlyMode = false, displayMode = 'codice',
57121
57265
  React.createElement(Row, { key: formsection.sectionId }, renderQueries(formsection.queries))))))
57122
57266
  :
57123
57267
  xFormModel.model.map((formsection) => (React.createElement(React.Fragment, { key: formsection.sectionId || crypto.randomUUID() },
57124
- React.createElement(SectionTitle, { withSeparator: false, backgroundColor: brandColor, titleColor: '#FFFFFF', title: formsection.title, subTitle: formsection.subtitle ? formsection.subtitle : undefined, icon: React.createElement(Icon, { name: formsection.icon || "fontfamily" }) }),
57268
+ React.createElement(SectionTitle, { withSeparator: false, backgroundColor: brandColor, titleColor: '#FFFFFF', title: formsection.title, subtitleColor: '#FFFFFF', subTitle: formsection.subtitle ? formsection.subtitle : undefined, icon: React.createElement(Icon, { name: formsection.icon || "fontfamily" }) }),
57125
57269
  React.createElement(Row, null, renderQueries(formsection.queries)))))));
57126
57270
  case 'accordion':
57127
57271
  return (React.createElement(Accordion, { defaultOpenId: ((_d = (_c = xFormModel.model) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.sectionId) ? String(xFormModel.model[0].sectionId) : '', allowMultiple: true, brandcolor: brandColor, titleColor: '#ffffff' }, xFormModel.model.map((formsection) => (React.createElement(AccordionItem, { key: formsection.sectionId, sectionId: String(formsection.sectionId), title: formsection.title, subtitle: formsection.subtitle ? formsection.subtitle : undefined, icon: React.createElement(Icon, { name: formsection.icon || "fontfamily" }) },
@@ -57133,7 +57277,7 @@ const Teletraan1 = ({ xFormModel, readOnlyMode = false, displayMode = 'codice',
57133
57277
  case 'codice':
57134
57278
  default:
57135
57279
  return (React.createElement(React.Fragment, { key: xFormModel.uuid }, xFormModel.model.map((formsection) => (React.createElement(React.Fragment, { key: formsection.sectionId || crypto.randomUUID() },
57136
- React.createElement(SectionTitle, { withSeparator: false, backgroundColor: brandColor, titleColor: '#FFFFFF', title: formsection.title, subTitle: formsection.subtitle ? formsection.subtitle : undefined, icon: React.createElement(Icon, { name: String(formsection.icon) }) }),
57280
+ React.createElement(SectionTitle, { withSeparator: false, backgroundColor: brandColor, titleColor: '#FFFFFF', title: formsection.title, subtitleColor: '#FFFFFF', subTitle: formsection.subtitle ? formsection.subtitle : undefined, icon: React.createElement(Icon, { name: String(formsection.icon) }) }),
57137
57281
  React.createElement(Row, null, renderQueries(formsection.queries)))))));
57138
57282
  }
57139
57283
  };
@@ -57213,14 +57357,15 @@ class VectorSigma {
57213
57357
  "checkbox", "checkboxes", "checkboxinput", "chechbox-input", "input-checkbox", "inputcheckbox", "checkboxgroup-input",
57214
57358
  "filemultiple", "filemultipleinput", "filemultiple-input", "input-filemultiple", "inputfilemultiple",
57215
57359
  "selectmultiple", "selectmultipleinput", "selectmultiple-input", "input-selectmultiple", "inputselectmultiple",
57216
- "range", "rangeslider", "rangeinput", "rangesliderinput", "rangeslider-input", "range-input", "input-rangeslider", "inputrangeslider"
57360
+ "countrymultiselect", "countrymultiselectinput", "countrymultiselect-input", "input-countrymultiselect", "inputcountrymultiselect",
57361
+ "range", "rangeslider", "rangeinput", "rangesliderinput", "rangeslider-input", "range-input", "input-rangeslider", "inputrangeslider",
57362
+ "slider", "sliderinput", "slider-input", "input-slider", "inputslider"
57217
57363
  ];
57218
57364
  const booleanTypes = [
57219
57365
  "toggle", "switch", "toggleinput", "toggle-input", "input-toggle", "inputtoggle",
57220
57366
  "conditionaltoggle", "conditionalcheckbox", "conditional-toggle", "conditional-checkbox"
57221
57367
  ];
57222
57368
  const numberTypes = [
57223
- "slider", "sliderinput", "slider-input", "input-slider", "inputslider",
57224
57369
  "currency", "currencyinput", "currency-input", "input-currency", "inputcurrency",
57225
57370
  "stock", "stockinput", "stock-input", "input-stock", "inputstock"
57226
57371
  ];
@@ -57640,6 +57785,7 @@ exports.CodexItem = CodexItem;
57640
57785
  exports.Column = Column;
57641
57786
  exports.ConditionalTrigger = ConditionalTrigger;
57642
57787
  exports.Container = Container;
57788
+ exports.CountrySelect = CountrySelect;
57643
57789
  exports.CreditCardInput = CreditCardInput;
57644
57790
  exports.CurrencyInput = CurrencyInput;
57645
57791
  exports.DatePicker = DatePicker;
package/lib/index.esm.js CHANGED
@@ -31783,13 +31783,11 @@ const File$1 = (_a) => {
31783
31783
  width: '100%',
31784
31784
  position: 'relative',
31785
31785
  overflow: 'hidden',
31786
+ boxSizing: 'border-box',
31786
31787
  };
31787
31788
  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)' });
31788
31789
  const outlineTrigger = Object.assign(Object.assign({}, baseTriggerStyle), { backgroundColor: 'transparent', border: hasError ? '2px dashed var(--red-9)' : '2px dashed var(--gray-8)' });
31789
- const neumorphicTrigger = Object.assign(Object.assign(Object.assign({}, baseTriggerStyle), { backgroundColor: 'var(--neu-bg)', color: hasError ? 'var(--red-9)' : 'var(--neu-text)',
31790
- // Empty: (Dropzone effect)
31791
- // Selected: (Card effect)
31792
- boxShadow: !selectedFile
31790
+ const neumorphicTrigger = Object.assign(Object.assign(Object.assign({}, baseTriggerStyle), { backgroundColor: 'var(--neu-bg)', color: hasError ? 'var(--red-9)' : 'var(--neu-text)', boxShadow: !selectedFile
31793
31791
  ? 'inset 3px 3px 6px var(--neu-shadow-dark), inset -3px -3px 6px var(--neu-shadow-light)'
31794
31792
  : '6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light)', border: 'none' }), neuVars);
31795
31793
  const activeStyle = inputtype === 'fileinput-neumorphic' ? neumorphicTrigger :
@@ -31806,11 +31804,11 @@ const File$1 = (_a) => {
31806
31804
  } }, !selectedFile ? (
31807
31805
  // --- EMPTY STATE RENDER ---
31808
31806
  React__default.createElement(p$5, { align: "center", gap: "3", style: { width: '100%', color: 'var(--gray-10)' } },
31809
- React__default.createElement(p$8, { style: { padding: 8, borderRadius: '50%', backgroundColor: 'var(--gray-3)' } },
31807
+ React__default.createElement(p$8, { style: { padding: 8, borderRadius: '50%', backgroundColor: 'var(--gray-3)', flexShrink: 0 } },
31810
31808
  React__default.createElement(Icon, { name: 'upload', width: "18", height: "18" })),
31811
- React__default.createElement(p$5, { direction: "column" },
31812
- React__default.createElement(p$d, { size: "2", weight: "bold", color: "gray" }, "Upload File"),
31813
- React__default.createElement(p$d, { size: "1", color: "gray" }, "Supports PDF, Images, Excel, JSON...")))) : (
31809
+ React__default.createElement(p$5, { direction: "column", style: { minWidth: 0, flex: 1 } },
31810
+ React__default.createElement(p$d, { size: "2", weight: "bold", color: "gray", style: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } }, "Upload File"),
31811
+ React__default.createElement(p$d, { size: "1", color: "gray", style: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } }, "Supports PDF, Images, Excel, JSON...")))) : (
31814
31812
  // --- SELECTED STATE RENDER ---
31815
31813
  React__default.createElement(p$5, { align: "center", gap: "4", style: { width: '100%' } },
31816
31814
  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) => {
31820
31818
  backgroundColor: 'var(--accent-3)', color: 'var(--accent-9)',
31821
31819
  borderRadius: 6, flexShrink: 0
31822
31820
  } }, getFileIcon$1(selectedFile.type, selectedFile.name))),
31823
- React__default.createElement(p$5, { direction: "column", style: { flexGrow: 1, overflow: 'hidden' } },
31821
+ React__default.createElement(p$5, { direction: "column", style: { flexGrow: 1, minWidth: 0, overflow: 'hidden' } },
31824
31822
  React__default.createElement(p$d, { size: "2", weight: "bold", style: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } }, selectedFile.name),
31825
31823
  React__default.createElement(p$5, { gap: "2", align: "center" },
31826
31824
  React__default.createElement(p$d, { size: "1", color: "gray" }, formatBytes(selectedFile.size)),
31827
31825
  React__default.createElement(e$a, { size: "1", color: "gray", variant: "soft" }, (_b = selectedFile.name.split('.').pop()) === null || _b === void 0 ? void 0 : _b.toUpperCase()))),
31828
31826
  React__default.createElement(o$5, { size: "1", variant: "ghost", color: "red", onClick: handleClear, style: { borderRadius: '50%', padding: 4 } },
31829
31827
  React__default.createElement(Icon, { name: 'close', width: "16", height: "16" }))))),
31830
- React__default.createElement("div", null,
31831
- React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: inputId }, inputLabel),
31832
- "\u00A0",
31833
- isHinted ?
31834
- React__default.createElement(React__default.Fragment, null,
31835
- React__default.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
31836
- React__default.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
31837
- React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
31838
- hasError ?
31839
- React__default.createElement(React__default.Fragment, null,
31840
- React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, errorText || (typeof fieldError === 'string' ? fieldError : "Required field"))) : null))));
31828
+ React__default.createElement("div", { style: { marginTop: 4, display: 'flex', alignItems: 'center', gap: 6 } },
31829
+ inputLabel && (React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: inputId }, inputLabel)),
31830
+ isHinted && (React__default.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
31831
+ React__default.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { display: 'flex' } },
31832
+ React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
31833
+ hasError && (React__default.createElement(p$d, { id: errorId, size: "1", color: "red", className: 'core-input-label-error' }, errorText || (typeof fieldError === 'string' ? fieldError : `Required field`)))))));
31841
31834
  };
31842
31835
 
31843
31836
  const getFileIcon = (fileOrUrl) => {
@@ -31940,20 +31933,21 @@ const FileMultiple = (_a) => {
31940
31933
  const isNeumorphic = inputtype === 'filemultiple-neumorphic';
31941
31934
  return (React__default.createElement(Column, { span: width, newLine: newRow },
31942
31935
  React__default.createElement(p$5, { direction: "column", gap: "2", className: className, style: Object.assign({ width: '100%' }, style) },
31943
- 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 }) },
31936
+ 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' }) },
31944
31937
  React__default.createElement(p$5, { align: "center", gap: "4" },
31945
31938
  React__default.createElement(p$8, { style: {
31946
31939
  background: isNeumorphic ? '#e0e0e0' : 'var(--accent-3)',
31947
31940
  borderRadius: '50%',
31948
31941
  padding: '10px',
31949
- boxShadow: isNeumorphic ? 'inset 3px 3px 6px #b8b9be, inset -3px -3px 6px #ffffff' : 'none'
31942
+ boxShadow: isNeumorphic ? 'inset 3px 3px 6px #b8b9be, inset -3px -3px 6px #ffffff' : 'none',
31943
+ flexShrink: 0
31950
31944
  } },
31951
31945
  React__default.createElement(Icon, { name: 'upload', width: "20", height: "20", color: isNeumorphic ? '#555' : 'var(--accent-9)' })),
31952
- React__default.createElement(p$5, { direction: "column" },
31953
- React__default.createElement(p$d, { weight: "bold", style: { color: isNeumorphic ? '#444' : 'inherit' } }, currentFiles.length > 0
31946
+ React__default.createElement(p$5, { direction: "column", style: { minWidth: 0, flex: 1 } },
31947
+ React__default.createElement(p$d, { weight: "bold", style: { color: isNeumorphic ? '#444' : 'inherit', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } }, currentFiles.length > 0
31954
31948
  ? `${currentFiles.length} file${currentFiles.length !== 1 ? 's' : ''} selected`
31955
31949
  : (placeholder || "Choose files...")),
31956
- React__default.createElement(p$d, { size: "1", color: "gray", style: { opacity: 0.8 } }, "PDF, Images, Office Docs, JSON, ZIP"))),
31950
+ 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"))),
31957
31951
  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 })),
31958
31952
  preview && currentFiles.length > 0 && (React__default.createElement(o$6, { columns: "repeat(auto-fill, minmax(220px, 1fr))", gap: "3", mt: "1" }, currentFiles.map((file, index) => {
31959
31953
  let previewUrl = null;
@@ -31982,7 +31976,8 @@ const FileMultiple = (_a) => {
31982
31976
  background: 'var(--gray-a3)',
31983
31977
  display: 'flex',
31984
31978
  alignItems: 'center',
31985
- justifyContent: 'center'
31979
+ justifyContent: 'center',
31980
+ flexShrink: 0
31986
31981
  } }, 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))),
31987
31982
  React__default.createElement(p$5, { direction: "column", style: { flex: 1, overflow: 'hidden' } },
31988
31983
  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) => {
31993
31988
  } },
31994
31989
  React__default.createElement(Icon, { name: 'close' }))))));
31995
31990
  }))),
31996
- React__default.createElement("div", null,
31991
+ React__default.createElement("div", { style: { marginTop: 4, display: 'flex', alignItems: 'center', gap: 6 } },
31997
31992
  inputLabel && (React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: inputId }, inputLabel)),
31998
- "\u00A0",
31999
- isHinted && (React__default.createElement(e, { content: hintText || "No hint available" },
32000
- React__default.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
32001
- React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray', marginLeft: 4 } })))),
32002
- 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'))))));
31993
+ isHinted && (React__default.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
31994
+ React__default.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { display: 'flex' } },
31995
+ React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
31996
+ hasError && (React__default.createElement(p$d, { id: errorId, size: "1", color: "red", className: 'core-input-label-error' }, errorText || (typeof fieldError === 'string' ? fieldError : `Required field`)))))));
32003
31997
  };
32004
31998
 
32005
31999
  const getStyles = (design, layout) => {
@@ -39669,7 +39663,7 @@ function _arrayLikeToArray$3(arr, len) { if (len == null || len > arr.length) le
39669
39663
  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); }
39670
39664
  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; }
39671
39665
  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; }
39672
- function CountrySelect(_ref) {
39666
+ function CountrySelect$1(_ref) {
39673
39667
  var value = _ref.value,
39674
39668
  onChange = _ref.onChange,
39675
39669
  options = _ref.options,
@@ -39703,7 +39697,7 @@ function CountrySelect(_ref) {
39703
39697
  }, label);
39704
39698
  }));
39705
39699
  }
39706
- CountrySelect.propTypes = {
39700
+ CountrySelect$1.propTypes = {
39707
39701
  /**
39708
39702
  * A two-letter country code.
39709
39703
  * Example: "US", "RU", etc.
@@ -39748,7 +39742,7 @@ function CountrySelectWithIcon(_ref3) {
39748
39742
  }, [options, value]);
39749
39743
  return /*#__PURE__*/React__default.createElement("div", {
39750
39744
  className: "PhoneInputCountry"
39751
- }, /*#__PURE__*/React__default.createElement(CountrySelect, _extends$8({}, rest, {
39745
+ }, /*#__PURE__*/React__default.createElement(CountrySelect$1, _extends$8({}, rest, {
39752
39746
  value: value,
39753
39747
  options: options,
39754
39748
  className: classNames('PhoneInputCountrySelect', className)
@@ -55512,7 +55506,6 @@ const CreditCardInput = (_a) => {
55512
55506
  React__default.createElement("div", { style: { display: 'flex', alignItems: 'center' } }, getCardIcon())),
55513
55507
  React__default.createElement("div", { style: { marginTop: 4, display: 'flex', alignItems: 'center', gap: 6 } },
55514
55508
  inputLabel && (React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: `${alias}FormInput` }, inputLabel)),
55515
- "\u00A0",
55516
55509
  isHinted && (React__default.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
55517
55510
  React__default.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { display: 'flex' } },
55518
55511
  React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
@@ -55667,8 +55660,8 @@ const CurrencyInput = (_a) => {
55667
55660
  textAlign: 'right',
55668
55661
  width: '100%'
55669
55662
  }, inputMode: "decimal", autoComplete: "off" }))),
55670
- React__default.createElement("div", null,
55671
- React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: `${alias}FormInput` }, inputLabel),
55663
+ React__default.createElement("div", { style: { marginTop: 4, display: 'flex', alignItems: 'center', gap: 6 } },
55664
+ inputLabel && (React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: `${alias}FormInput` }, inputLabel)),
55672
55665
  isHinted && (React__default.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
55673
55666
  React__default.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { display: 'flex' } },
55674
55667
  React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
@@ -55748,12 +55741,12 @@ const StockInput = (_a) => {
55748
55741
  fontWeight: 500,
55749
55742
  fontFamily: 'var(--default-font-family)',
55750
55743
  }, inputMode: "decimal", autoComplete: "off" }))),
55751
- React__default.createElement("div", null,
55744
+ React__default.createElement("div", { style: { marginTop: 4, display: 'flex', alignItems: 'center', gap: 6 } },
55752
55745
  inputLabel && (React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: `${alias}FormInput` }, inputLabel)),
55753
55746
  isHinted && (React__default.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
55754
55747
  React__default.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { display: 'flex' } },
55755
55748
  React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
55756
- hasError && (React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, errorText || (typeof fieldError === 'string' ? fieldError : `Required field`)))))));
55749
+ hasError && (React__default.createElement(p$d, { id: errorId, size: "1", color: "red", className: 'core-input-label-error' }, errorText || (typeof fieldError === 'string' ? fieldError : `Required field`)))))));
55757
55750
  };
55758
55751
 
55759
55752
  const RadioGroupInput = (_a) => {
@@ -56166,9 +56159,8 @@ const SliderInput = (_a) => {
56166
56159
  }, onValueCommit: () => {
56167
56160
  setFieldTouched(alias, true, false);
56168
56161
  }, className: inputtype === 'slider-neumorphic' ? 'neu-slider' : inputtype === 'slider-outline' ? 'outline-slider' : '', style: neuVars }),
56169
- React__default.createElement("div", null,
56170
- React__default.createElement(p$d, { id: labelId, as: "div", size: "2", weight: "bold" }, inputLabel),
56171
- "\u00A0",
56162
+ React__default.createElement("div", { style: { marginTop: 4, display: 'flex', alignItems: 'center', gap: 6 } },
56163
+ inputLabel && (React__default.createElement(p$d, { id: labelId, as: "div", size: "2", weight: "bold" }, inputLabel)),
56172
56164
  isHinted ?
56173
56165
  React__default.createElement(React__default.Fragment, null,
56174
56166
  React__default.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
@@ -56238,8 +56230,8 @@ const RangeSlider = (_a) => {
56238
56230
  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) => {
56239
56231
  setFieldValue(alias, isRange ? val : val[0]);
56240
56232
  }, onValueCommit: () => setFieldTouched(alias, true, false), className: inputtype === 'range-neumorphic' ? 'neu-slider' : inputtype === 'range-outline' ? 'outline-slider' : '', style: neuVars }),
56241
- React__default.createElement("div", null,
56242
- React__default.createElement(p$d, { id: labelId, as: "div", size: "2", weight: "bold", style: { display: 'inline' } }, inputLabel),
56233
+ React__default.createElement("div", { style: { marginTop: 4, display: 'flex', alignItems: 'center', gap: 6 } },
56234
+ inputLabel && (React__default.createElement(p$d, { id: labelId, as: "div", size: "2", weight: "bold", style: { display: 'inline' } }, inputLabel)),
56243
56235
  isHinted && (React__default.createElement(React__default.Fragment, null,
56244
56236
  React__default.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
56245
56237
  React__default.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
@@ -56842,6 +56834,9 @@ const datePickerInputType = ["datepicker", "datepickerinput", "datepicker-input"
56842
56834
  const dateRangePickerInputType = ["daterangepicker", "daterangepickerinput", "daterangepicker-input", "input-daterangepicker", "inputdaterangepicker"];
56843
56835
  const dateTimePickerInputType = ["datetimepicker", "datetimepickerinput", "datetimepicker-input", "input-datetimepicker", "inputdatetimepicker"];
56844
56836
  const dropdownInputType = ["dropdown", "dropdowninput", "dropdown-input", "input-dropdown", "inputdropdown"];
56837
+ const countrydropdownInputType = ["countrydropdown", "countrydropdowninput", "countrydropdown-input", "input-countrydropdown", "inputcountrydropdown",
56838
+ "countryselect", "countryselect-input", "countryselectinput", "input-countryselect"];
56839
+ const countrymultiselectInputType = ["countrymultiselect", "countrymultiselectinput", "countrymultiselect-input", "input-countrymultiselect", "inputcountrymultiselect"];
56845
56840
  const fileInputType = ["file", "fileinput", "file-input", "input-file", "inputfile"];
56846
56841
  const fileMultipleInputType = ["filemultiple", "filemultipleinput", "filemultiple-input", "input-filemultiple", "inputfilemultiple"];
56847
56842
  const imageOutputType = ["image", "imageoutput", "image-output", "output-image", "outputimage"];
@@ -56991,6 +56986,151 @@ const DateTimePicker = ({ alias, inputLabel, inputtype = 'datetimepicker-outline
56991
56986
  hasError && (React__default.createElement(p$d, { size: "1", color: "red", style: { display: 'block' } }, errorText || (typeof fieldError === 'string' ? fieldError : "Required field")))))));
56992
56987
  };
56993
56988
 
56989
+ const CountrySelect = (_a) => {
56990
+ var _b;
56991
+ 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"]);
56992
+ const defaultFormikContext = useFormikContext();
56993
+ const activeContext = formikContext || defaultFormikContext;
56994
+ if (!activeContext) {
56995
+ console.error(`CountryDropdown '${alias}' must be used within a Formik provider.`);
56996
+ return null;
56997
+ }
56998
+ const { values, touched, errors, setFieldValue, setFieldTouched } = activeContext;
56999
+ const fieldValue = getIn(values, alias);
57000
+ const fieldTouched = getIn(touched, alias);
57001
+ const fieldError = getIn(errors, alias);
57002
+ const selectedValues = useMemo(() => {
57003
+ if (multiselect)
57004
+ return Array.isArray(fieldValue) ? fieldValue : [];
57005
+ return fieldValue ? [String(fieldValue)] : [];
57006
+ }, [fieldValue, multiselect]);
57007
+ const hasError = Boolean(fieldTouched && fieldError);
57008
+ const triggerRef = useRef(null);
57009
+ const [neuVars, setNeuVars] = useState({});
57010
+ const [isOpen, setIsOpen] = useState(false);
57011
+ const [searchQuery, setSearchQuery] = useState("");
57012
+ const errorId = `${alias}-error`;
57013
+ const allCountries = useMemo(() => {
57014
+ return getCountries().map(c => ({ value: c, label: en[c] }));
57015
+ }, []);
57016
+ const filteredCountries = useMemo(() => {
57017
+ if (!enableSearch || !searchQuery)
57018
+ return allCountries;
57019
+ const lowerSearch = searchQuery.toLowerCase();
57020
+ return allCountries.filter(c => c.label.toLowerCase().includes(lowerSearch));
57021
+ }, [allCountries, searchQuery, enableSearch]);
57022
+ const handleSelection = (countryCode) => {
57023
+ if (multiselect) {
57024
+ const newValues = selectedValues.includes(countryCode)
57025
+ ? selectedValues.filter((v) => v !== countryCode)
57026
+ : [...selectedValues, countryCode];
57027
+ setFieldValue(alias, newValues);
57028
+ }
57029
+ else {
57030
+ setFieldValue(alias, countryCode);
57031
+ setIsOpen(false);
57032
+ }
57033
+ setTimeout(() => setFieldTouched(alias, true, false), 0);
57034
+ };
57035
+ const displayLabel = useMemo(() => {
57036
+ if (selectedValues.length === 0)
57037
+ return placeholder;
57038
+ if (!multiselect) {
57039
+ const c = allCountries.find(x => x.value === selectedValues[0]);
57040
+ return c ? c.label : selectedValues[0];
57041
+ }
57042
+ if (selectedValues.length <= 2) {
57043
+ return selectedValues.map(v => { var _a; return ((_a = allCountries.find(x => x.value === v)) === null || _a === void 0 ? void 0 : _a.label) || v; }).join(', ');
57044
+ }
57045
+ return `${selectedValues.length} countries selected`;
57046
+ }, [selectedValues, multiselect, allCountries, placeholder]);
57047
+ useEffect(() => {
57048
+ if (inputtype === 'countryselect-neumorphic' && triggerRef.current) {
57049
+ const parentBg = getNearestParentBackground(triggerRef.current.parentElement);
57050
+ setNeuVars({
57051
+ '--neu-bg': parentBg,
57052
+ '--neu-shadow-dark': adjustColor(parentBg, -30),
57053
+ '--neu-shadow-light': adjustColor(parentBg, 30),
57054
+ '--neu-text': 'var(--gray-12)',
57055
+ '--neu-error': 'var(--red-9)',
57056
+ });
57057
+ }
57058
+ }, [inputtype]);
57059
+ useEffect(() => {
57060
+ if (!isOpen)
57061
+ setSearchQuery("");
57062
+ }, [isOpen]);
57063
+ // --- STYLES ---
57064
+ const baseTrigger = {
57065
+ display: 'flex',
57066
+ alignItems: 'center',
57067
+ justifyContent: 'space-between',
57068
+ width: '100%',
57069
+ cursor: readOnly ? 'default' : 'pointer',
57070
+ textAlign: 'left',
57071
+ padding: '0 12px',
57072
+ fontSize: 'var(--font-size-2)',
57073
+ fontFamily: 'var(--default-font-family)',
57074
+ whiteSpace: 'nowrap',
57075
+ overflow: 'hidden',
57076
+ boxSizing: 'border-box',
57077
+ opacity: readOnly ? 0.7 : 1,
57078
+ };
57079
+ 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 });
57080
+ 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 });
57081
+ 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
57082
+ ? 'inset 6px 6px 12px var(--neu-shadow-dark), inset -6px -6px 12px var(--neu-shadow-light)'
57083
+ : '6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light)', transition: 'all 0.2s ease' });
57084
+ const activeTrigger = inputtype === 'countryselect-material' ? materialTrigger :
57085
+ inputtype === 'countryselect-outline' ? outlineTrigger : Object.assign(Object.assign({}, neumorphicTrigger), neuVars);
57086
+ return (React__default.createElement(Column, { span: width, newLine: newRow },
57087
+ React__default.createElement(p$5, { direction: "column", gap: "2", style: { width: '100%' } },
57088
+ React__default.createElement(P$1, { open: isOpen, onOpenChange: (open) => {
57089
+ if (readOnly)
57090
+ return;
57091
+ setIsOpen(open);
57092
+ if (!open)
57093
+ setFieldTouched(alias, true, false);
57094
+ } },
57095
+ React__default.createElement(s$1, null,
57096
+ 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 },
57097
+ React__default.createElement(p$5, { align: "center", gap: "2", style: { minWidth: 0, flex: 1 } },
57098
+ !multiselect && displayFlag && selectedValues.length === 1 && (React__default.createElement(FlagIcon, { country: selectedValues[0] })),
57099
+ React__default.createElement("span", { style: {
57100
+ overflow: 'hidden',
57101
+ textOverflow: 'ellipsis',
57102
+ whiteSpace: 'nowrap',
57103
+ color: selectedValues.length === 0 ? 'var(--gray-8)' : 'inherit'
57104
+ } }, displayLabel)),
57105
+ React__default.createElement(Icon, { name: 'chevrondown', style: { flexShrink: 0, opacity: 0.5, marginLeft: 8 } }))),
57106
+ 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) },
57107
+ enableSearch && (React__default.createElement(p$8, { p: "2", style: { borderBottom: inputtype === 'countryselect-neumorphic' ? 'none' : '1px solid var(--gray-6)' } },
57108
+ React__default.createElement(u, { placeholder: "Search countries...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), variant: inputtype === 'countryselect-neumorphic' ? 'soft' : 'surface' },
57109
+ React__default.createElement(c, null,
57110
+ React__default.createElement(Icon, { name: "magnifyingglass", height: "14", width: "14", style: { opacity: 0.5 } }))))),
57111
+ React__default.createElement(c$1, { type: "auto", scrollbars: "vertical", style: { maxHeight: 250 } },
57112
+ React__default.createElement(p$8, { p: "2" },
57113
+ 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) => {
57114
+ const isSelected = selectedValues.includes(country.value);
57115
+ return (React__default.createElement(p$5, { key: country.value, align: "center", gap: "3", onClick: () => handleSelection(country.value), style: {
57116
+ padding: '8px',
57117
+ cursor: 'pointer',
57118
+ borderRadius: '4px',
57119
+ backgroundColor: isSelected ? 'var(--accent-a3)' : 'transparent',
57120
+ transition: 'background-color 0.1s'
57121
+ } },
57122
+ multiselect && (React__default.createElement(c$2, { checked: isSelected, style: { pointerEvents: 'none' } })),
57123
+ displayFlag && (React__default.createElement(FlagIcon, { country: country.value })),
57124
+ React__default.createElement(p$d, { size: "2", style: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } }, country.label)));
57125
+ }))))))),
57126
+ React__default.createElement("div", { style: { marginTop: 4, display: 'flex', alignItems: 'center', gap: 6 } },
57127
+ inputLabel && (React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: `${alias}FormInput` }, inputLabel)),
57128
+ isHinted && (React__default.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
57129
+ React__default.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { display: 'flex' } },
57130
+ React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
57131
+ hasError && (React__default.createElement(p$d, { id: errorId, size: "1", color: "red", className: 'core-input-label-error' }, errorText || (typeof fieldError === 'string' ? fieldError : `Required field`)))))));
57132
+ };
57133
+
56994
57134
  const Teletraan1 = ({ xFormModel, readOnlyMode = false, displayMode = 'codice', brandColor = "#000000", onPrev, onNext, onFinish }) => {
56995
57135
  const [dualToggled, setDualToggled] = useState(false);
56996
57136
  const [neuVars] = useState({
@@ -57037,6 +57177,10 @@ const Teletraan1 = ({ xFormModel, readOnlyMode = false, displayMode = 'codice',
57037
57177
  return React__default.createElement(DateTimePicker, Object.assign({}, layoutProps, { placeholder: inputPlaceholder }));
57038
57178
  case dropdownInputType.includes(normalizedType):
57039
57179
  return React__default.createElement(Dropdown, Object.assign({}, layoutProps, { placeholder: inputPlaceholder, inputOptions: inputOptions || [InputOptionsPlaceholder] }));
57180
+ case countrydropdownInputType.includes(normalizedType):
57181
+ return React__default.createElement(CountrySelect, Object.assign({ displayFlag: true, enableSearch: true }, layoutProps, { placeholder: inputPlaceholder }));
57182
+ case countrymultiselectInputType.includes(normalizedType):
57183
+ return React__default.createElement(CountrySelect, Object.assign({ displayFlag: true, enableSearch: true, multiselect: true }, layoutProps, { placeholder: inputPlaceholder }));
57040
57184
  case fileInputType.includes(normalizedType):
57041
57185
  return React__default.createElement(File$1, Object.assign({}, layoutProps, { preview: true }));
57042
57186
  case fileMultipleInputType.includes(normalizedType):
@@ -57100,7 +57244,7 @@ const Teletraan1 = ({ xFormModel, readOnlyMode = false, displayMode = 'codice',
57100
57244
  React__default.createElement(Row, { key: formsection.sectionId }, renderQueries(formsection.queries))))))
57101
57245
  :
57102
57246
  xFormModel.model.map((formsection) => (React__default.createElement(React__default.Fragment, { key: formsection.sectionId || crypto.randomUUID() },
57103
- React__default.createElement(SectionTitle, { withSeparator: false, backgroundColor: brandColor, titleColor: '#FFFFFF', title: formsection.title, subTitle: formsection.subtitle ? formsection.subtitle : undefined, icon: React__default.createElement(Icon, { name: formsection.icon || "fontfamily" }) }),
57247
+ React__default.createElement(SectionTitle, { withSeparator: false, backgroundColor: brandColor, titleColor: '#FFFFFF', title: formsection.title, subtitleColor: '#FFFFFF', subTitle: formsection.subtitle ? formsection.subtitle : undefined, icon: React__default.createElement(Icon, { name: formsection.icon || "fontfamily" }) }),
57104
57248
  React__default.createElement(Row, null, renderQueries(formsection.queries)))))));
57105
57249
  case 'accordion':
57106
57250
  return (React__default.createElement(Accordion, { defaultOpenId: ((_d = (_c = xFormModel.model) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.sectionId) ? String(xFormModel.model[0].sectionId) : '', allowMultiple: true, brandcolor: brandColor, titleColor: '#ffffff' }, xFormModel.model.map((formsection) => (React__default.createElement(AccordionItem, { key: formsection.sectionId, sectionId: String(formsection.sectionId), title: formsection.title, subtitle: formsection.subtitle ? formsection.subtitle : undefined, icon: React__default.createElement(Icon, { name: formsection.icon || "fontfamily" }) },
@@ -57112,7 +57256,7 @@ const Teletraan1 = ({ xFormModel, readOnlyMode = false, displayMode = 'codice',
57112
57256
  case 'codice':
57113
57257
  default:
57114
57258
  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() },
57115
- React__default.createElement(SectionTitle, { withSeparator: false, backgroundColor: brandColor, titleColor: '#FFFFFF', title: formsection.title, subTitle: formsection.subtitle ? formsection.subtitle : undefined, icon: React__default.createElement(Icon, { name: String(formsection.icon) }) }),
57259
+ React__default.createElement(SectionTitle, { withSeparator: false, backgroundColor: brandColor, titleColor: '#FFFFFF', title: formsection.title, subtitleColor: '#FFFFFF', subTitle: formsection.subtitle ? formsection.subtitle : undefined, icon: React__default.createElement(Icon, { name: String(formsection.icon) }) }),
57116
57260
  React__default.createElement(Row, null, renderQueries(formsection.queries)))))));
57117
57261
  }
57118
57262
  };
@@ -57192,14 +57336,15 @@ class VectorSigma {
57192
57336
  "checkbox", "checkboxes", "checkboxinput", "chechbox-input", "input-checkbox", "inputcheckbox", "checkboxgroup-input",
57193
57337
  "filemultiple", "filemultipleinput", "filemultiple-input", "input-filemultiple", "inputfilemultiple",
57194
57338
  "selectmultiple", "selectmultipleinput", "selectmultiple-input", "input-selectmultiple", "inputselectmultiple",
57195
- "range", "rangeslider", "rangeinput", "rangesliderinput", "rangeslider-input", "range-input", "input-rangeslider", "inputrangeslider"
57339
+ "countrymultiselect", "countrymultiselectinput", "countrymultiselect-input", "input-countrymultiselect", "inputcountrymultiselect",
57340
+ "range", "rangeslider", "rangeinput", "rangesliderinput", "rangeslider-input", "range-input", "input-rangeslider", "inputrangeslider",
57341
+ "slider", "sliderinput", "slider-input", "input-slider", "inputslider"
57196
57342
  ];
57197
57343
  const booleanTypes = [
57198
57344
  "toggle", "switch", "toggleinput", "toggle-input", "input-toggle", "inputtoggle",
57199
57345
  "conditionaltoggle", "conditionalcheckbox", "conditional-toggle", "conditional-checkbox"
57200
57346
  ];
57201
57347
  const numberTypes = [
57202
- "slider", "sliderinput", "slider-input", "input-slider", "inputslider",
57203
57348
  "currency", "currencyinput", "currency-input", "input-currency", "inputcurrency",
57204
57349
  "stock", "stockinput", "stock-input", "input-stock", "inputstock"
57205
57350
  ];
@@ -57607,4 +57752,4 @@ const parseUuidFormat = (input) => {
57607
57752
  return numbers;
57608
57753
  };
57609
57754
 
57610
- 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 };
57755
+ 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 ADDED
@@ -0,0 +1,103 @@
1
+ import React, { ReactNode } from 'react';
2
+ import { FormikContextType } from 'formik';
3
+ import '../../styles/main.scss';
4
+ export type CountrySelectDesign = 'countryselect' | 'countryselect-material' | 'countryselect-outline' | 'countryselect-neumorphic';
5
+ export interface CountryDropdownProps {
6
+ /**
7
+ * * The required unique identifier for the CountrySelect input field.
8
+ * * @example alias="citizenshipCountries"
9
+ */
10
+ alias: string;
11
+ /**
12
+ * * The design variation of the CountrySelect input.
13
+ * Default: 'countryselect-outline'
14
+ * Variants: 'countryselect', 'countryselect-outline', 'countryselect-material', 'countryselect-neumorphic'.
15
+ */
16
+ inputtype?: CountrySelectDesign & {};
17
+ /**
18
+ * * The optional input label or description.
19
+ */
20
+ inputLabel?: string;
21
+ /**
22
+ * * The required viewport column width for the CountrySelect input field.
23
+ * i.e. 1 - 12
24
+ * * @example
25
+ * width={5}
26
+ */
27
+ width: number;
28
+ /**
29
+ * * Option to render CountrySelect input field on new row.
30
+ * * @example
31
+ * newRow
32
+ */
33
+ newRow?: boolean;
34
+ /**
35
+ * * Option to force set the default value for a CountrySelect input field.
36
+ * * @example
37
+ * placeholder="Select a country"
38
+ */
39
+ placeholder?: string;
40
+ /**
41
+ * * Option to disable edits for CountrySelect input field.
42
+ * * @example
43
+ * readOnly
44
+ */
45
+ readOnly?: boolean;
46
+ /**
47
+ * * Option to enable a hint for CountrySelect input field.
48
+ * * @example
49
+ * isHinted
50
+ */
51
+ isHinted?: boolean;
52
+ /**
53
+ * * Option to specify hint text for CountrySelect input field.
54
+ * * @example
55
+ * hintText="This is a hint for a VΣ CountrySelect"
56
+ */
57
+ hintText?: string;
58
+ /**
59
+ * * Option to specify a hint url reference or resource for CountrySelect input field.
60
+ * * @example
61
+ * hintUrl="https://www.mekaegwim.ca"
62
+ */
63
+ hintUrl?: string;
64
+ /**
65
+ * * Option to specify the isRequired error text for the CountrySelect input field.
66
+ * * @example
67
+ * errorText="Country selection is required"
68
+ */
69
+ errorText?: ReactNode | string | null;
70
+ /**
71
+ * * Option to specify the .scss class selector for the CountrySelect input field.
72
+ * * @example
73
+ * className="teletraan-1-countryselect"
74
+ */
75
+ className?: string;
76
+ /**
77
+ * * Option to inject custom CSS for the CountrySelect input field.
78
+ * * @example
79
+ * style={{ color: "#000000" }}
80
+ */
81
+ style?: React.CSSProperties;
82
+ /**
83
+ * Optional explicit Formik context. Useful when bypassing duplicate
84
+ * context issues in monorepos or bundled npm packages.
85
+ */
86
+ formikContext?: FormikContextType<any>;
87
+ /**
88
+ * * Option to render the country flag icon next to the country name.
89
+ * Default: true
90
+ */
91
+ displayFlag?: boolean;
92
+ /**
93
+ * * Option to allow multiple country selections and return an array of country codes.
94
+ * Default: false
95
+ */
96
+ multiselect?: boolean;
97
+ /**
98
+ * * Option to enable search bar inside the CountrySelect to filter countries.
99
+ * Default: false
100
+ */
101
+ enableSearch?: boolean;
102
+ }
103
+ 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 CHANGED
@@ -98,7 +98,7 @@ export interface xDropDownProps {
98
98
  */
99
99
  className?: string;
100
100
  /**
101
- * * Option to inject custom CSS the Dropdown input field.
101
+ * * Option to inject custom CSS for the Dropdown input field.
102
102
  * * @example
103
103
  * style={{ color: "#000000" }}
104
104
  */
package/lib/types/components/file/file.d.ts CHANGED
@@ -80,7 +80,7 @@ export interface FileInputProps {
80
80
  */
81
81
  errorText?: ReactNode | string | null;
82
82
  /**
83
- * * Option to inject custom CSS the File input field.
83
+ * * Option to inject custom CSS for the File input field.
84
84
  * * @example
85
85
  * style={{ color: "#000000" }}
86
86
  */
package/lib/types/components/file/filemultiple.d.ts CHANGED
@@ -86,7 +86,7 @@ export interface FileMultipleInputProps {
86
86
  */
87
87
  className?: string;
88
88
  /**
89
- * * Option to inject custom CSS the FileMultiple input field.
89
+ * * Option to inject custom CSS for the FileMultiple input field.
90
90
  * * @example
91
91
  * style={{ color: "#000000" }}
92
92
  */
package/lib/types/index.d.ts CHANGED
@@ -9,6 +9,7 @@ export * from './components/datepicker/datepicker';
9
9
  export * from './components/daterangepicker/daterangepicker';
10
10
  export * from './components/datetimepicker/datetimepicker';
11
11
  export * from './components/dropdown/dropdown';
12
+ export * from './components/dropdown/countrydropdown';
12
13
  export * from './components/file/file';
13
14
  export * from './components/file/filemultiple';
14
15
  export * from './components/icons/icons';
package/lib/types/utils/voltaire.d.ts CHANGED
@@ -6,6 +6,8 @@ export declare const datePickerInputType: string[];
6
6
  export declare const dateRangePickerInputType: string[];
7
7
  export declare const dateTimePickerInputType: string[];
8
8
  export declare const dropdownInputType: string[];
9
+ export declare const countrydropdownInputType: string[];
10
+ export declare const countrymultiselectInputType: string[];
9
11
  export declare const fileInputType: string[];
10
12
  export declare const fileMultipleInputType: string[];
11
13
  export declare const imageOutputType: string[];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@emeraldemperaur/vector-sigma",
3
- "version": "1.4.44",
3
+ "version": "1.4.46",
4
4
  "description": "Dynamic Form Orchestrator: NPM Package",
5
5
  "repository": {
6
6
  "type": "git",