@emeraldemperaur/vector-sigma 1.4.40 → 1.4.42

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 (4) hide show
  1. package/README.md +3 -3
  2. package/lib/index.cjs +25 -36
  3. package/lib/index.esm.js +25 -36
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -60,7 +60,7 @@ return xForm.transform({
60
60
  ```
61
61
  #### Stateful Implementation
62
62
  <p align="justify">
63
- <code>useVectorSigma</code> hook method utilizes React lazy initialization in tandem with <code>useRef</code> to guarantee VectorSigma class is created exactly once when the VΣ component mounts, and safely persists across DOM re-renders.
63
+ <code>useVectorSigma</code> hook method utilizes <code>React</code> lazy initialization in tandem with <code>useRef</code> to guarantee VectorSigma class object is created in a singleton-ish fashion when the VΣ component mounts, and safely persists across DOM re-renders.
64
64
  </p>
65
65
 
66
66
  ```javascript
@@ -124,9 +124,9 @@ export const VΣRegistrationForm = () => {
124
124
 
125
125
  ### Screenshots
126
126
 
127
- #### Automation Workflow Use Case
127
+ #### Automation Workflow (N8N Webhook Trigger Node) Use Case
128
128
 
129
- #### Web Application Use Case
129
+ #### Web Application (User Onboarding Data Pipeline) Use Case
130
130
 
131
131
  ### Design Tenets
132
132
  <ul>
package/lib/index.cjs CHANGED
@@ -50216,21 +50216,9 @@ const FlagIcon = ({ country }) => {
50216
50216
  };
50217
50217
 
50218
50218
  const BespokeRadixPhoneInput = React.forwardRef((props, ref) => {
50219
- const { radixProps, countrySelectUI } = props, inputProps = __rest$1(props, ["radixProps", "countrySelectUI"]);
50220
- return (React.createElement(u, { id: radixProps.id, size: radixProps.size, variant: "surface", color: radixProps.color, className: radixProps.className, autoComplete: "off", style: { width: '100%' } },
50221
- React.createElement(c, { style: { padding: 0 } }, countrySelectUI),
50222
- React.createElement("input", Object.assign({ ref: ref }, inputProps, { "aria-describedby": radixProps.ariaDescribedBy, style: {
50223
- flex: 1,
50224
- border: 'none',
50225
- outline: 'none',
50226
- backgroundColor: 'transparent',
50227
- height: '100%',
50228
- paddingLeft: '12px',
50229
- color: 'var(--gray-12)',
50230
- fontFamily: 'var(--default-font-family)',
50231
- fontSize: 'var(--font-size-2)',
50232
- width: '100%'
50233
- } }))));
50219
+ const { radixProps, countrySelectUI, placeholder } = props, inputProps = __rest$1(props, ["radixProps", "countrySelectUI", "placeholder"]);
50220
+ return (React.createElement(u, Object.assign({}, inputProps, { ref: ref, value: inputProps.value || '', id: radixProps.id, size: radixProps.size, variant: "surface", color: radixProps.color, className: radixProps.className, autoComplete: "off", style: { width: '100%' }, placeholder: radixProps.placeholder || placeholder || "Phone Number" }),
50221
+ React.createElement(c, { style: { padding: 0 } }, countrySelectUI)));
50234
50222
  });
50235
50223
  const PhoneInput = (_a) => {
50236
50224
  var { alias, inputLabel, width, placeholder = "Phone Number", newRow, isHinted, hintText, hintUrl, errorText, readOnly, inputvariant = 'input-outline', size = "2", className, formikContext } = _a; __rest$1(_a, ["alias", "inputLabel", "width", "placeholder", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "readOnly", "inputvariant", "size", "className", "formikContext"]);
@@ -50245,10 +50233,10 @@ const PhoneInput = (_a) => {
50245
50233
  const fieldTouched = formik.getIn(touched, alias);
50246
50234
  const fieldError = formik.getIn(errors, alias);
50247
50235
  const hasError = Boolean(fieldTouched && fieldError);
50248
- const [country, setCountry] = React.useState('US');
50236
+ const [country, setCountry] = React.useState('CA');
50249
50237
  const variantClass = inputvariant !== 'input-outline' ? `input-${inputvariant}` : '';
50250
50238
  const errorId = `${alias}-error`;
50251
- const countrySelectUI = (React.createElement(C$1, { value: country, onValueChange: (value) => {
50239
+ const countrySelectUI = (React.createElement(C$1, { value: country || 'CA', onValueChange: (value) => {
50252
50240
  setCountry(value);
50253
50241
  setFieldValue(alias, '');
50254
50242
  }, name: `${alias}Country` },
@@ -50262,10 +50250,10 @@ const PhoneInput = (_a) => {
50262
50250
  borderRight: '1px solid var(--gray-alpha-5)'
50263
50251
  } },
50264
50252
  React.createElement(p$5, { align: "center", gap: "2" },
50265
- React.createElement(FlagIcon, { country: country }),
50253
+ React.createElement(FlagIcon, { country: country || 'CA' }),
50266
50254
  React.createElement(p$d, { weight: "bold" },
50267
50255
  "+",
50268
- getCountryCallingCode(country)),
50256
+ getCountryCallingCode(country || 'CA')),
50269
50257
  React.createElement(Icon, { name: "caret-down", style: { width: "12px", opacity: 0.5 } }))),
50270
50258
  React.createElement(g, { position: "popper", style: { minWidth: '240px', maxHeight: '300px' } }, getCountries().map((c) => (React.createElement(v, { key: c, value: c },
50271
50259
  React.createElement(p$5, { align: "center", gap: "2" },
@@ -50277,12 +50265,13 @@ const PhoneInput = (_a) => {
50277
50265
  ")"))))))));
50278
50266
  return (React.createElement(Column, { span: width, newLine: newRow },
50279
50267
  React.createElement(p$5, { direction: "column", gap: "2", style: { width: '100%' } },
50280
- React.createElement(PhoneInputMain, { style: { width: '100%' }, international: true, withCountryCallingCode: false, country: country, name: alias, value: fieldValue || '', onChange: (val) => setFieldValue(alias, val || ''), onBlur: () => setFieldTouched(alias, true, false), readOnly: readOnly, placeholder: placeholder, countrySelectComponent: () => null, inputComponent: BespokeRadixPhoneInput, radixProps: {
50268
+ React.createElement(PhoneInputMain, { style: { width: '100%' }, country: country, name: alias, value: fieldValue || '', onChange: (val) => setFieldValue(alias, val || ''), onBlur: () => setFieldTouched(alias, true, false), readOnly: readOnly, placeholder: placeholder, countrySelectComponent: () => null, inputComponent: BespokeRadixPhoneInput, radixProps: {
50281
50269
  id: `${alias}PhoneInput`,
50282
50270
  size: size,
50283
50271
  color: hasError ? "red" : undefined,
50284
50272
  className: `${variantClass} ${className || ''}`,
50285
- ariaDescribedBy: `${alias}InputLabel`
50273
+ ariaDescribedBy: `${alias}InputLabel`,
50274
+ placeholder: placeholder
50286
50275
  }, countrySelectUI: countrySelectUI }),
50287
50276
  React.createElement("div", { style: { marginTop: 4, display: 'flex', alignItems: 'center', gap: 6 } },
50288
50277
  inputLabel && (React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: `${alias}PhoneInput` }, inputLabel)),
@@ -55848,11 +55837,11 @@ const RadioGroupInput = (_a) => {
55848
55837
  transform: none;
55849
55838
  }
55850
55839
  ` } })),
55851
- React.createElement(I$1, { name: alias, id: `${alias}FormInput`, "aria-labelledby": `${alias}InputLabel`, disabled: readOnly, value: fieldValue !== undefined && fieldValue !== null ? String(fieldValue) : "", onValueChange: (val) => {
55840
+ React.createElement(I$1, { name: alias, id: `${alias}FormInput`, "aria-labelledby": `${alias}InputLabel`, disabled: readOnly, style: { width: '100%' }, value: fieldValue !== undefined && fieldValue !== null ? String(fieldValue) : "", onValueChange: (val) => {
55852
55841
  setFieldValue(alias, val);
55853
55842
  setTimeout(() => setFieldTouched(alias, true, false), 0);
55854
55843
  } },
55855
- React.createElement(o$6, { columns: columns || (direction === 'row' ? 'repeat(auto-fit, minmax(100px, 1fr))' : '1'), gap: "3", style: neuVars }, inputOptions.map((inputoption, idx) => {
55844
+ React.createElement(o$6, { width: "100%", columns: columns || (direction === 'row' ? 'repeat(auto-fit, minmax(100px, 1fr))' : '1'), gap: "3", style: neuVars }, inputOptions.map((inputoption, idx) => {
55856
55845
  const optionValue = String(inputoption.optionvalue);
55857
55846
  const isChecked = String(fieldValue) === optionValue;
55858
55847
  return (React.createElement(p$5, { asChild: true, key: `${alias}-radio-${idx}`, align: "center", gap: "2" },
@@ -55863,12 +55852,12 @@ const RadioGroupInput = (_a) => {
55863
55852
  } : {})) }),
55864
55853
  React.createElement("span", { style: { userSelect: 'none' } }, inputoption.text))));
55865
55854
  }))),
55866
- React.createElement("div", null,
55855
+ React.createElement("div", { style: { marginTop: 4, display: 'flex', alignItems: 'center', gap: 6 } },
55867
55856
  React.createElement(p$d, { id: `${alias}InputLabel`, as: "div", size: "2", weight: "bold" }, inputLabel),
55868
55857
  isHinted && (React.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
55869
- React.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
55858
+ React.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { display: 'flex' } },
55870
55859
  React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
55871
- hasError && (React.createElement("p", { id: errorId, className: 'core-input-label-error' }, errorText || (typeof fieldError === 'string' ? fieldError : `Required field`)))))));
55860
+ hasError && (React.createElement(p$d, { id: errorId, size: "1", color: "red", className: 'core-input-label-error' }, errorText || (typeof fieldError === 'string' ? fieldError : `Required field`)))))));
55872
55861
  };
55873
55862
 
55874
55863
  const OptionSelect = (_a) => {
@@ -55995,7 +55984,7 @@ const OptionSelect = (_a) => {
55995
55984
 
55996
55985
  const MultipleSelect = (_a) => {
55997
55986
  var _b;
55998
- var { inputtype = 'multiselect-outline', alias, readOnly, width, inputLabel, placeholder = '', newRow, isHinted, hintText, hintUrl, errorText, style, inputOptions, className, formikContext } = _a; __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "placeholder", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "style", "inputOptions", "className", "formikContext"]);
55987
+ var { inputtype = 'multiselect-outline', alias, readOnly, width, inputLabel, placeholder = 'Select...', newRow, isHinted, hintText, hintUrl, errorText, style, inputOptions, className, formikContext } = _a; __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "placeholder", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "style", "inputOptions", "className", "formikContext"]);
55999
55988
  const defaultFormikContext = formik.useFormikContext();
56000
55989
  const activeContext = formikContext || defaultFormikContext;
56001
55990
  if (!activeContext) {
@@ -56427,7 +56416,8 @@ const animationStyles = {
56427
56416
  inner: {
56428
56417
  overflow: 'hidden',
56429
56418
  minHeight: 0,
56430
- width: '100%',
56419
+ margin: '0 -16px',
56420
+ padding: '0 16px',
56431
56421
  }
56432
56422
  };
56433
56423
  const getDesignStyles = (inputtype, isOpen) => {
@@ -56476,7 +56466,7 @@ const ConditionalTrigger = (_a) => {
56476
56466
  }
56477
56467
  else if (inputtype.includes('conditionalselect') || inputtype.includes('conditional-select')) {
56478
56468
  return (React.createElement(p$5, { direction: "column", gap: "1", style: { width: '100%' } },
56479
- React.createElement(C$1, { name: alias, disabled: readOnly, value: fieldValue !== undefined ? String(fieldValue) : undefined, onValueChange: handleChange },
56469
+ React.createElement(C$1, { name: alias, disabled: readOnly, value: fieldValue ? String(fieldValue) : "", onValueChange: handleChange },
56480
56470
  React.createElement(u$1, { id: inputId, variant: isNeumorphic ? 'soft' : 'surface', style: { width: '100%' }, placeholder: placeholder || "Select" }),
56481
56471
  React.createElement(g, null, inputOptions.map((inputoption, idx) => (React.createElement(v, { key: `${alias}-opt-${inputoption.optionid || idx}`, value: String(inputoption.optionvalue) }, inputoption.text)))))));
56482
56472
  }
@@ -56492,9 +56482,8 @@ const ConditionalTrigger = (_a) => {
56492
56482
  React.createElement("div", { style: Object.assign(Object.assign({}, animationStyles.wrapper), { gridTemplateRows: isOpen ? '1fr' : '0fr', opacity: isOpen ? 1 : 0.6 }) },
56493
56483
  React.createElement("div", { style: animationStyles.inner },
56494
56484
  React.createElement(p$8, { style: {
56495
- paddingTop: '8px',
56496
- paddingLeft: '4px',
56497
- paddingRight: '4px',
56485
+ paddingTop: '12px',
56486
+ paddingBottom: '8px',
56498
56487
  borderTop: isOpen && !isNeumorphic ? '1px dashed var(--gray-6)' : 'none',
56499
56488
  } },
56500
56489
  React.createElement(Row, null, children)))),
@@ -56939,7 +56928,7 @@ const Teletraan1 = ({ xFormModel, readOnlyMode = false, displayMode = 'codice',
56939
56928
  case dateTimePickerInputType.includes(normalizedType):
56940
56929
  return React.createElement(DateRangePicker, Object.assign({}, layoutProps));
56941
56930
  case dropdownInputType.includes(normalizedType):
56942
- return React.createElement(Dropdown, Object.assign({}, layoutProps, { inputOptions: inputOptions || [InputOptionsPlaceholder] }));
56931
+ return React.createElement(Dropdown, Object.assign({}, layoutProps, { placeholder: inputPlaceholder, inputOptions: inputOptions || [InputOptionsPlaceholder] }));
56943
56932
  case fileInputType.includes(normalizedType):
56944
56933
  return React.createElement(File$1, Object.assign({}, layoutProps, { preview: true }));
56945
56934
  case fileMultipleInputType.includes(normalizedType):
@@ -56959,11 +56948,11 @@ const Teletraan1 = ({ xFormModel, readOnlyMode = false, displayMode = 'codice',
56959
56948
  case stockInputType.includes(normalizedType):
56960
56949
  return React.createElement(StockInput, Object.assign({}, layoutProps, { placeholder: inputPlaceholder, defaultvalue: defaultValue }));
56961
56950
  case radioInputType.includes(normalizedType):
56962
- return React.createElement(RadioGroupInput, Object.assign({}, layoutProps, { inputOptions: inputOptions || [InputOptionsPlaceholder] }));
56951
+ return React.createElement(RadioGroupInput, Object.assign({}, layoutProps, { direction: "row", inputOptions: inputOptions || [InputOptionsPlaceholder] }));
56963
56952
  case selectInputType.includes(normalizedType):
56964
- return React.createElement(OptionSelect, Object.assign({}, layoutProps, { inputOptions: inputOptions || [InputOptionsPlaceholder] }));
56953
+ return React.createElement(OptionSelect, Object.assign({}, layoutProps, { placeholder: inputPlaceholder, inputOptions: inputOptions || [InputOptionsPlaceholder] }));
56965
56954
  case selectMultipleInputType.includes(normalizedType):
56966
- return React.createElement(MultipleSelect, Object.assign({}, layoutProps, { inputOptions: inputOptions || [InputOptionsPlaceholder] }));
56955
+ return React.createElement(MultipleSelect, Object.assign({}, layoutProps, { placeholder: inputPlaceholder, inputOptions: inputOptions || [InputOptionsPlaceholder] }));
56967
56956
  case sliderInputType.includes(normalizedType):
56968
56957
  return React.createElement(SliderInput, Object.assign({}, layoutProps, { stepvalue: Number(stepValue), minvalue: Number(inputMinValue), maxvalue: Number(inputMaxValue) }));
56969
56958
  case rangeSliderInputType.includes(normalizedType):
package/lib/index.esm.js CHANGED
@@ -50195,21 +50195,9 @@ const FlagIcon = ({ country }) => {
50195
50195
  };
50196
50196
 
50197
50197
  const BespokeRadixPhoneInput = forwardRef((props, ref) => {
50198
- const { radixProps, countrySelectUI } = props, inputProps = __rest$1(props, ["radixProps", "countrySelectUI"]);
50199
- return (React__default.createElement(u, { id: radixProps.id, size: radixProps.size, variant: "surface", color: radixProps.color, className: radixProps.className, autoComplete: "off", style: { width: '100%' } },
50200
- React__default.createElement(c, { style: { padding: 0 } }, countrySelectUI),
50201
- React__default.createElement("input", Object.assign({ ref: ref }, inputProps, { "aria-describedby": radixProps.ariaDescribedBy, style: {
50202
- flex: 1,
50203
- border: 'none',
50204
- outline: 'none',
50205
- backgroundColor: 'transparent',
50206
- height: '100%',
50207
- paddingLeft: '12px',
50208
- color: 'var(--gray-12)',
50209
- fontFamily: 'var(--default-font-family)',
50210
- fontSize: 'var(--font-size-2)',
50211
- width: '100%'
50212
- } }))));
50198
+ const { radixProps, countrySelectUI, placeholder } = props, inputProps = __rest$1(props, ["radixProps", "countrySelectUI", "placeholder"]);
50199
+ return (React__default.createElement(u, Object.assign({}, inputProps, { ref: ref, value: inputProps.value || '', id: radixProps.id, size: radixProps.size, variant: "surface", color: radixProps.color, className: radixProps.className, autoComplete: "off", style: { width: '100%' }, placeholder: radixProps.placeholder || placeholder || "Phone Number" }),
50200
+ React__default.createElement(c, { style: { padding: 0 } }, countrySelectUI)));
50213
50201
  });
50214
50202
  const PhoneInput = (_a) => {
50215
50203
  var { alias, inputLabel, width, placeholder = "Phone Number", newRow, isHinted, hintText, hintUrl, errorText, readOnly, inputvariant = 'input-outline', size = "2", className, formikContext } = _a; __rest$1(_a, ["alias", "inputLabel", "width", "placeholder", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "readOnly", "inputvariant", "size", "className", "formikContext"]);
@@ -50224,10 +50212,10 @@ const PhoneInput = (_a) => {
50224
50212
  const fieldTouched = getIn(touched, alias);
50225
50213
  const fieldError = getIn(errors, alias);
50226
50214
  const hasError = Boolean(fieldTouched && fieldError);
50227
- const [country, setCountry] = useState('US');
50215
+ const [country, setCountry] = useState('CA');
50228
50216
  const variantClass = inputvariant !== 'input-outline' ? `input-${inputvariant}` : '';
50229
50217
  const errorId = `${alias}-error`;
50230
- const countrySelectUI = (React__default.createElement(C$1, { value: country, onValueChange: (value) => {
50218
+ const countrySelectUI = (React__default.createElement(C$1, { value: country || 'CA', onValueChange: (value) => {
50231
50219
  setCountry(value);
50232
50220
  setFieldValue(alias, '');
50233
50221
  }, name: `${alias}Country` },
@@ -50241,10 +50229,10 @@ const PhoneInput = (_a) => {
50241
50229
  borderRight: '1px solid var(--gray-alpha-5)'
50242
50230
  } },
50243
50231
  React__default.createElement(p$5, { align: "center", gap: "2" },
50244
- React__default.createElement(FlagIcon, { country: country }),
50232
+ React__default.createElement(FlagIcon, { country: country || 'CA' }),
50245
50233
  React__default.createElement(p$d, { weight: "bold" },
50246
50234
  "+",
50247
- getCountryCallingCode(country)),
50235
+ getCountryCallingCode(country || 'CA')),
50248
50236
  React__default.createElement(Icon, { name: "caret-down", style: { width: "12px", opacity: 0.5 } }))),
50249
50237
  React__default.createElement(g, { position: "popper", style: { minWidth: '240px', maxHeight: '300px' } }, getCountries().map((c) => (React__default.createElement(v, { key: c, value: c },
50250
50238
  React__default.createElement(p$5, { align: "center", gap: "2" },
@@ -50256,12 +50244,13 @@ const PhoneInput = (_a) => {
50256
50244
  ")"))))))));
50257
50245
  return (React__default.createElement(Column, { span: width, newLine: newRow },
50258
50246
  React__default.createElement(p$5, { direction: "column", gap: "2", style: { width: '100%' } },
50259
- React__default.createElement(PhoneInputMain, { style: { width: '100%' }, international: true, withCountryCallingCode: false, country: country, name: alias, value: fieldValue || '', onChange: (val) => setFieldValue(alias, val || ''), onBlur: () => setFieldTouched(alias, true, false), readOnly: readOnly, placeholder: placeholder, countrySelectComponent: () => null, inputComponent: BespokeRadixPhoneInput, radixProps: {
50247
+ React__default.createElement(PhoneInputMain, { style: { width: '100%' }, country: country, name: alias, value: fieldValue || '', onChange: (val) => setFieldValue(alias, val || ''), onBlur: () => setFieldTouched(alias, true, false), readOnly: readOnly, placeholder: placeholder, countrySelectComponent: () => null, inputComponent: BespokeRadixPhoneInput, radixProps: {
50260
50248
  id: `${alias}PhoneInput`,
50261
50249
  size: size,
50262
50250
  color: hasError ? "red" : undefined,
50263
50251
  className: `${variantClass} ${className || ''}`,
50264
- ariaDescribedBy: `${alias}InputLabel`
50252
+ ariaDescribedBy: `${alias}InputLabel`,
50253
+ placeholder: placeholder
50265
50254
  }, countrySelectUI: countrySelectUI }),
50266
50255
  React__default.createElement("div", { style: { marginTop: 4, display: 'flex', alignItems: 'center', gap: 6 } },
50267
50256
  inputLabel && (React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: `${alias}PhoneInput` }, inputLabel)),
@@ -55827,11 +55816,11 @@ const RadioGroupInput = (_a) => {
55827
55816
  transform: none;
55828
55817
  }
55829
55818
  ` } })),
55830
- React__default.createElement(I$1, { name: alias, id: `${alias}FormInput`, "aria-labelledby": `${alias}InputLabel`, disabled: readOnly, value: fieldValue !== undefined && fieldValue !== null ? String(fieldValue) : "", onValueChange: (val) => {
55819
+ React__default.createElement(I$1, { name: alias, id: `${alias}FormInput`, "aria-labelledby": `${alias}InputLabel`, disabled: readOnly, style: { width: '100%' }, value: fieldValue !== undefined && fieldValue !== null ? String(fieldValue) : "", onValueChange: (val) => {
55831
55820
  setFieldValue(alias, val);
55832
55821
  setTimeout(() => setFieldTouched(alias, true, false), 0);
55833
55822
  } },
55834
- React__default.createElement(o$6, { columns: columns || (direction === 'row' ? 'repeat(auto-fit, minmax(100px, 1fr))' : '1'), gap: "3", style: neuVars }, inputOptions.map((inputoption, idx) => {
55823
+ React__default.createElement(o$6, { width: "100%", columns: columns || (direction === 'row' ? 'repeat(auto-fit, minmax(100px, 1fr))' : '1'), gap: "3", style: neuVars }, inputOptions.map((inputoption, idx) => {
55835
55824
  const optionValue = String(inputoption.optionvalue);
55836
55825
  const isChecked = String(fieldValue) === optionValue;
55837
55826
  return (React__default.createElement(p$5, { asChild: true, key: `${alias}-radio-${idx}`, align: "center", gap: "2" },
@@ -55842,12 +55831,12 @@ const RadioGroupInput = (_a) => {
55842
55831
  } : {})) }),
55843
55832
  React__default.createElement("span", { style: { userSelect: 'none' } }, inputoption.text))));
55844
55833
  }))),
55845
- React__default.createElement("div", null,
55834
+ React__default.createElement("div", { style: { marginTop: 4, display: 'flex', alignItems: 'center', gap: 6 } },
55846
55835
  React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "div", size: "2", weight: "bold" }, inputLabel),
55847
55836
  isHinted && (React__default.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
55848
- React__default.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
55837
+ React__default.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { display: 'flex' } },
55849
55838
  React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
55850
- hasError && (React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, errorText || (typeof fieldError === 'string' ? fieldError : `Required field`)))))));
55839
+ hasError && (React__default.createElement(p$d, { id: errorId, size: "1", color: "red", className: 'core-input-label-error' }, errorText || (typeof fieldError === 'string' ? fieldError : `Required field`)))))));
55851
55840
  };
55852
55841
 
55853
55842
  const OptionSelect = (_a) => {
@@ -55974,7 +55963,7 @@ const OptionSelect = (_a) => {
55974
55963
 
55975
55964
  const MultipleSelect = (_a) => {
55976
55965
  var _b;
55977
- var { inputtype = 'multiselect-outline', alias, readOnly, width, inputLabel, placeholder = '', newRow, isHinted, hintText, hintUrl, errorText, style, inputOptions, className, formikContext } = _a; __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "placeholder", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "style", "inputOptions", "className", "formikContext"]);
55966
+ var { inputtype = 'multiselect-outline', alias, readOnly, width, inputLabel, placeholder = 'Select...', newRow, isHinted, hintText, hintUrl, errorText, style, inputOptions, className, formikContext } = _a; __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "placeholder", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "style", "inputOptions", "className", "formikContext"]);
55978
55967
  const defaultFormikContext = useFormikContext();
55979
55968
  const activeContext = formikContext || defaultFormikContext;
55980
55969
  if (!activeContext) {
@@ -56406,7 +56395,8 @@ const animationStyles = {
56406
56395
  inner: {
56407
56396
  overflow: 'hidden',
56408
56397
  minHeight: 0,
56409
- width: '100%',
56398
+ margin: '0 -16px',
56399
+ padding: '0 16px',
56410
56400
  }
56411
56401
  };
56412
56402
  const getDesignStyles = (inputtype, isOpen) => {
@@ -56455,7 +56445,7 @@ const ConditionalTrigger = (_a) => {
56455
56445
  }
56456
56446
  else if (inputtype.includes('conditionalselect') || inputtype.includes('conditional-select')) {
56457
56447
  return (React__default.createElement(p$5, { direction: "column", gap: "1", style: { width: '100%' } },
56458
- React__default.createElement(C$1, { name: alias, disabled: readOnly, value: fieldValue !== undefined ? String(fieldValue) : undefined, onValueChange: handleChange },
56448
+ React__default.createElement(C$1, { name: alias, disabled: readOnly, value: fieldValue ? String(fieldValue) : "", onValueChange: handleChange },
56459
56449
  React__default.createElement(u$1, { id: inputId, variant: isNeumorphic ? 'soft' : 'surface', style: { width: '100%' }, placeholder: placeholder || "Select" }),
56460
56450
  React__default.createElement(g, null, inputOptions.map((inputoption, idx) => (React__default.createElement(v, { key: `${alias}-opt-${inputoption.optionid || idx}`, value: String(inputoption.optionvalue) }, inputoption.text)))))));
56461
56451
  }
@@ -56471,9 +56461,8 @@ const ConditionalTrigger = (_a) => {
56471
56461
  React__default.createElement("div", { style: Object.assign(Object.assign({}, animationStyles.wrapper), { gridTemplateRows: isOpen ? '1fr' : '0fr', opacity: isOpen ? 1 : 0.6 }) },
56472
56462
  React__default.createElement("div", { style: animationStyles.inner },
56473
56463
  React__default.createElement(p$8, { style: {
56474
- paddingTop: '8px',
56475
- paddingLeft: '4px',
56476
- paddingRight: '4px',
56464
+ paddingTop: '12px',
56465
+ paddingBottom: '8px',
56477
56466
  borderTop: isOpen && !isNeumorphic ? '1px dashed var(--gray-6)' : 'none',
56478
56467
  } },
56479
56468
  React__default.createElement(Row, null, children)))),
@@ -56918,7 +56907,7 @@ const Teletraan1 = ({ xFormModel, readOnlyMode = false, displayMode = 'codice',
56918
56907
  case dateTimePickerInputType.includes(normalizedType):
56919
56908
  return React__default.createElement(DateRangePicker, Object.assign({}, layoutProps));
56920
56909
  case dropdownInputType.includes(normalizedType):
56921
- return React__default.createElement(Dropdown, Object.assign({}, layoutProps, { inputOptions: inputOptions || [InputOptionsPlaceholder] }));
56910
+ return React__default.createElement(Dropdown, Object.assign({}, layoutProps, { placeholder: inputPlaceholder, inputOptions: inputOptions || [InputOptionsPlaceholder] }));
56922
56911
  case fileInputType.includes(normalizedType):
56923
56912
  return React__default.createElement(File$1, Object.assign({}, layoutProps, { preview: true }));
56924
56913
  case fileMultipleInputType.includes(normalizedType):
@@ -56938,11 +56927,11 @@ const Teletraan1 = ({ xFormModel, readOnlyMode = false, displayMode = 'codice',
56938
56927
  case stockInputType.includes(normalizedType):
56939
56928
  return React__default.createElement(StockInput, Object.assign({}, layoutProps, { placeholder: inputPlaceholder, defaultvalue: defaultValue }));
56940
56929
  case radioInputType.includes(normalizedType):
56941
- return React__default.createElement(RadioGroupInput, Object.assign({}, layoutProps, { inputOptions: inputOptions || [InputOptionsPlaceholder] }));
56930
+ return React__default.createElement(RadioGroupInput, Object.assign({}, layoutProps, { direction: "row", inputOptions: inputOptions || [InputOptionsPlaceholder] }));
56942
56931
  case selectInputType.includes(normalizedType):
56943
- return React__default.createElement(OptionSelect, Object.assign({}, layoutProps, { inputOptions: inputOptions || [InputOptionsPlaceholder] }));
56932
+ return React__default.createElement(OptionSelect, Object.assign({}, layoutProps, { placeholder: inputPlaceholder, inputOptions: inputOptions || [InputOptionsPlaceholder] }));
56944
56933
  case selectMultipleInputType.includes(normalizedType):
56945
- return React__default.createElement(MultipleSelect, Object.assign({}, layoutProps, { inputOptions: inputOptions || [InputOptionsPlaceholder] }));
56934
+ return React__default.createElement(MultipleSelect, Object.assign({}, layoutProps, { placeholder: inputPlaceholder, inputOptions: inputOptions || [InputOptionsPlaceholder] }));
56946
56935
  case sliderInputType.includes(normalizedType):
56947
56936
  return React__default.createElement(SliderInput, Object.assign({}, layoutProps, { stepvalue: Number(stepValue), minvalue: Number(inputMinValue), maxvalue: Number(inputMaxValue) }));
56948
56937
  case rangeSliderInputType.includes(normalizedType):
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@emeraldemperaur/vector-sigma",
3
- "version": "1.4.40",
3
+ "version": "1.4.42",
4
4
  "description": "Dynamic Form Orchestrator: NPM Package",
5
5
  "repository": {
6
6
  "type": "git",