@emeraldemperaur/vector-sigma 1.4.5 → 1.4.8

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 (14) hide show
  1. package/README.md +18 -5
  2. package/lib/index.cjs +726 -338
  3. package/lib/index.esm.js +726 -338
  4. package/lib/types/components/conditional/conditional.d.ts +2 -2
  5. package/lib/types/components/dropdown/dropdown.d.ts +4 -4
  6. package/lib/types/components/inputcurrency/inputcurrency.d.ts +3 -3
  7. package/lib/types/components/inputcurrency/stockInput.d.ts +2 -2
  8. package/lib/types/components/radio/radio.d.ts +2 -2
  9. package/lib/types/components/select/select.d.ts +14 -8
  10. package/lib/types/components/selectmultiple/selectmultiple.d.ts +2 -2
  11. package/lib/types/components/slider/slider.d.ts +2 -2
  12. package/lib/types/components/toggle/toggle.d.ts +2 -1
  13. package/lib/types/components/xtitle/xtitle.d.ts +10 -9
  14. package/package.json +1 -1
package/lib/index.esm.js CHANGED
@@ -12500,7 +12500,7 @@ const getDesignStyles = (inputtype, isOpen) => {
12500
12500
  return Object.assign(Object.assign({}, base), { backgroundColor: 'transparent', border: '1px solid var(--gray-6)', borderLeft: isOpen ? '4px solid var(--accent-9)' : '1px solid var(--gray-6)' });
12501
12501
  };
12502
12502
  const ConditionalTrigger = (_a) => {
12503
- var { alias, readOnly, width, placeholder = '', value, inputlabel, inputtype = 'conditionaltoggle-outline', triggerValue = true, inputoptions = [], toggledinputtype = "conditionaltoggle-outline", children, style, className } = _a, props = __rest$1(_a, ["alias", "readOnly", "width", "placeholder", "value", "inputlabel", "inputtype", "triggerValue", "inputoptions", "toggledinputtype", "children", "style", "className"]);
12503
+ var { alias, readonly, width, placeholder = '', value, inputlabel, inputtype = 'conditionaltoggle-outline', triggerValue = true, inputoptions = [], toggledinputtype = "conditionaltoggle-outline", children, style, className } = _a, props = __rest$1(_a, ["alias", "readonly", "width", "placeholder", "value", "inputlabel", "inputtype", "triggerValue", "inputoptions", "toggledinputtype", "children", "style", "className"]);
12504
12504
  const [field, meta, helpers] = useField(alias);
12505
12505
  const { setTouched } = useFormikContext();
12506
12506
  const inputId = `${alias}FormInput` || crypto.randomUUID();
@@ -12517,16 +12517,16 @@ const ConditionalTrigger = (_a) => {
12517
12517
  switch (true) {
12518
12518
  case inputtype.includes('conditionalcheckbox'):
12519
12519
  return (React__default.createElement(p$5, { align: "center", gap: "2", style: { cursor: 'pointer' } },
12520
- React__default.createElement(c$2, { name: alias, disabled: readOnly, checked: field.value === true, onCheckedChange: (checked) => handleChange(!!checked), id: inputId })));
12520
+ React__default.createElement(c$2, { name: alias, disabled: readonly, checked: field.value === true, onCheckedChange: (checked) => handleChange(!!checked), id: inputId })));
12521
12521
  case inputtype.includes('conditionalselect'):
12522
12522
  return (React__default.createElement(p$5, { direction: "column", gap: "1", style: { width: '100%' } },
12523
- React__default.createElement(C$1, { name: alias, disabled: readOnly, value: field.value, defaultValue: placeholder || String(value) || "", onValueChange: handleChange },
12523
+ React__default.createElement(C$1, { name: alias, disabled: readonly, value: field.value, defaultValue: placeholder || String(value) || "", onValueChange: handleChange },
12524
12524
  React__default.createElement(u$1, { id: inputId, variant: isNeumorphic ? 'soft' : 'surface', style: { width: '100%' } }),
12525
12525
  React__default.createElement(g, null, inputoptions.map((inputoption) => (React__default.createElement(v, { key: inputoption.optionvalue || crypto.randomUUID(), value: inputoption.optionvalue }, inputoption.text)))))));
12526
12526
  case inputtype.includes('conditionaltoggle'):
12527
12527
  default:
12528
12528
  return (React__default.createElement(p$5, { justify: "between", align: "center", style: { width: '100%' } },
12529
- React__default.createElement(i$1, { id: inputId, name: alias, disabled: readOnly, checked: field.value === true, onCheckedChange: (checked) => handleChange(!!checked), variant: isNeumorphic ? 'soft' : 'surface' })));
12529
+ React__default.createElement(i$1, { id: inputId, name: alias, disabled: readonly, checked: field.value === true, onCheckedChange: (checked) => handleChange(!!checked), variant: isNeumorphic ? 'soft' : 'surface' })));
12530
12530
  }
12531
12531
  };
12532
12532
  const containerStyle = getDesignStyles(inputtype, isOpen);
@@ -20833,10 +20833,12 @@ const DatePicker = (_a) => {
20833
20833
  const { setFieldValue, setFieldTouched } = useFormikContext();
20834
20834
  const [field, meta] = useField(alias);
20835
20835
  const hasError = Boolean(meta.touched && meta.error);
20836
- const selectedDate = field.value ? (typeof field.value === 'string' ? parseISO(field.value) : field.value) : undefined;
20836
+ const selectedDate = field.value
20837
+ ? (typeof field.value === 'string' ? parseISO(field.value) : field.value)
20838
+ : undefined;
20837
20839
  const parsedMin = ensureDate(minvalue);
20838
20840
  const parsedMax = ensureDate(maxvalue);
20839
- const inputId = `${alias}FormInput` || crypto.randomUUID();
20841
+ const inputId = `${alias}FormInput`;
20840
20842
  const errorId = `${alias}-error`;
20841
20843
  const [isOpen, setIsOpen] = useState(false);
20842
20844
  const containerRef = useRef(null);
@@ -20853,85 +20855,177 @@ const DatePicker = (_a) => {
20853
20855
  });
20854
20856
  }
20855
20857
  }, [inputtype]);
20856
- // --- STYLES ---
20857
- const activeInputStyle = inputtype === 'datepicker-neumorphic'
20858
- ? Object.assign({ backgroundColor: 'var(--neu-bg)', border: 'none', color: hasError ? 'var(--red-9)' : 'var(--neu-text)', boxShadow: 'inset 3px 3px 6px var(--neu-shadow-dark), inset -3px -3px 6px var(--neu-shadow-light)', borderRadius: '8px' }, neuVars) : inputtype === 'datepicker-outline'
20859
- ? { backgroundColor: 'transparent', boxShadow: 'none', border: hasError ? '2px solid var(--red-9)' : '2px solid var(--gray-7)' }
20860
- : { backgroundColor: 'var(--color-surface)', boxShadow: hasError ? 'inset 0 0 0 1px var(--red-9)' : '0 2px 5px rgba(0,0,0,0.1)', border: 'none' };
20858
+ // --- INPUT STYLES ---
20859
+ const activeInputStyle = React__default.useMemo(() => {
20860
+ if (inputtype === 'datepicker-neumorphic') {
20861
+ return Object.assign({ backgroundColor: 'var(--neu-bg)', border: 'none', color: hasError ? 'var(--red-9)' : 'var(--neu-text)', boxShadow: 'inset 3px 3px 6px var(--neu-shadow-dark), inset -3px -3px 6px var(--neu-shadow-light)', borderRadius: '8px' }, neuVars);
20862
+ }
20863
+ if (inputtype === 'datepicker-outline') {
20864
+ return {
20865
+ backgroundColor: 'transparent',
20866
+ boxShadow: 'none',
20867
+ border: hasError ? '1px solid var(--red-9)' : '1px solid var(--gray-7)',
20868
+ borderRadius: 'var(--radius-2)'
20869
+ };
20870
+ }
20871
+ // Material / Default
20872
+ return {
20873
+ backgroundColor: 'var(--color-surface)',
20874
+ boxShadow: hasError ? 'inset 0 0 0 1px var(--red-9)' : '0 1px 2px rgba(0,0,0,0.05)',
20875
+ border: '1px solid var(--gray-5)',
20876
+ borderRadius: 'var(--radius-2)'
20877
+ };
20878
+ }, [inputtype, hasError, neuVars]);
20879
+ // --- CALENDAR POPUP STYLES ---
20880
+ const calendarContainerStyle = React__default.useMemo(() => {
20881
+ const base = { padding: '16px', borderRadius: '12px' };
20882
+ if (inputtype === 'datepicker-neumorphic') {
20883
+ return Object.assign(Object.assign(Object.assign({}, base), { backgroundColor: 'var(--neu-bg)', boxShadow: '6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light)', border: 'none' }), neuVars);
20884
+ }
20885
+ if (inputtype === 'datepicker-outline') {
20886
+ return Object.assign(Object.assign({}, base), { backgroundColor: 'var(--color-panel-solid)', border: '1px solid var(--gray-6)', boxShadow: '0 4px 12px rgba(0,0,0,0.05)' });
20887
+ }
20888
+ // Material
20889
+ return Object.assign(Object.assign({}, base), { backgroundColor: 'var(--color-panel-solid)', border: 'none', boxShadow: '0 10px 38px -10px rgba(22, 23, 24, 0.35), 0 10px 20px -15px rgba(22, 23, 24, 0.2)' });
20890
+ }, [inputtype, neuVars]);
20861
20891
  return (React__default.createElement(Column, { span: width, newLine: props.newRow },
20862
20892
  React__default.createElement(p$5, { direction: "column", gap: "2", width: "100%", ref: containerRef, style: style, className: className },
20863
20893
  React__default.createElement("input", { type: "hidden", "aria-describedby": `${alias}InputLabel`, name: alias, value: selectedDate ? selectedDate.toISOString() : '' }),
20864
20894
  React__default.createElement("style", { dangerouslySetInnerHTML: { __html: `
20865
- /* Base Calendar */
20866
- .rdp { --rdp-cell-size: 32px; margin: 0; }
20867
- .rdp-months { display: flex; justify-content: center; }
20868
- .rdp-month { background: ${inputtype === 'datepicker-neumorphic' ? 'var(--neu-bg)' : 'var(--color-panel-solid)'}; padding: 10px; border-radius: 8px; }
20869
- .rdp-caption { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
20870
- .rdp-caption_label { font-weight: bold; color: var(--gray-12); font-size: var(--font-size-3); }
20871
- .rdp-nav { display: flex; gap: 5px; }
20872
- .rdp-head_cell { font-size: 0.8rem; font-weight: 500; color: var(--gray-10); padding-bottom: 5px; }
20873
-
20874
- /* Day */
20875
- .rdp-day {
20876
- width: var(--rdp-cell-size); height: var(--rdp-cell-size);
20877
- border-radius: 50%; border: none; background: transparent;
20878
- cursor: pointer; color: var(--gray-12);
20879
- display: flex; align-items: center; justify-content: center;
20880
- }
20881
- .rdp-day:hover:not(.rdp-day_selected) { background-color: var(--gray-4); }
20895
+ /* Reset & Layout */
20896
+ .rdp {
20897
+ --rdp-cell-size: 36px;
20898
+ --rdp-caption-font-size: 16px;
20899
+ margin: 0;
20900
+ font-family: var(--default-font-family, sans-serif);
20901
+ }
20902
+ .rdp-months { justify-content: center; }
20903
+ .rdp-month { background: transparent; }
20904
+
20905
+ /* Header (Month Name + Nav) */
20906
+ .rdp-caption {
20907
+ display: flex;
20908
+ align-items: center;
20909
+ justify-content: space-between;
20910
+ margin-bottom: 12px;
20911
+ padding: 0 4px;
20912
+ }
20913
+ .rdp-caption_label {
20914
+ font-weight: 600;
20915
+ color: var(--gray-12);
20916
+ font-size: var(--font-size-3);
20917
+ text-transform: capitalize;
20918
+ }
20919
+ .rdp-nav { display: flex; gap: 8px; }
20920
+ .rdp-nav_button {
20921
+ color: var(--gray-11);
20922
+ border-radius: 6px;
20923
+ padding: 4px;
20924
+ transition: background 0.2s;
20925
+ background: transparent;
20926
+ border: none;
20927
+ cursor: pointer;
20928
+ display: flex;
20929
+ align-items: center;
20930
+ justify-content: center;
20931
+ }
20932
+ .rdp-nav_button:hover { background-color: var(--gray-4); color: var(--gray-12); }
20933
+
20934
+ /* Weekdays Row */
20935
+ .rdp-head_cell {
20936
+ font-size: 0.75rem;
20937
+ font-weight: 600;
20938
+ color: var(--gray-9);
20939
+ text-transform: uppercase;
20940
+ padding-bottom: 8px;
20941
+ width: var(--rdp-cell-size);
20942
+ text-align: center;
20943
+ }
20944
+
20945
+ /* Day Cells */
20946
+ .rdp-cell { text-align: center; }
20947
+ .rdp-day {
20948
+ width: var(--rdp-cell-size);
20949
+ height: var(--rdp-cell-size);
20950
+ border-radius: 50%;
20951
+ border: 2px solid transparent;
20952
+ background: transparent;
20953
+ cursor: pointer;
20954
+ color: var(--gray-12);
20955
+ font-size: var(--font-size-2);
20956
+ display: flex;
20957
+ align-items: center;
20958
+ justify-content: center;
20959
+ transition: all 0.15s ease;
20960
+ margin: 1px;
20961
+ }
20882
20962
 
20883
- /* Selected State */
20884
- .rdp-day_selected {
20885
- background-color: var(--accent-9); color: white;
20886
- font-weight: bold;
20887
- }
20963
+ /* States */
20964
+ .rdp-day:hover:not(.rdp-day_selected):not([disabled]) {
20965
+ background-color: var(--gray-4);
20966
+ }
20967
+
20968
+ .rdp-day_selected {
20969
+ background-color: var(--accent-9) !important;
20970
+ color: white !important;
20971
+ font-weight: 600;
20972
+ }
20888
20973
 
20889
- /* NEUMORPHIC OVERRIDES */
20890
- .neu-calendar .rdp-month {
20891
- /* The floating plate */
20892
- box-shadow: 6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light);
20893
- }
20894
- .neu-calendar .rdp-day:hover:not(.rdp-day_selected) {
20895
- background-color: transparent;
20896
- /* Hover = pop out slightly */
20897
- box-shadow: 3px 3px 6px var(--neu-shadow-dark), -3px -3px 6px var(--neu-shadow-light);
20898
- }
20899
- .neu-calendar .rdp-day_selected {
20900
- background-color: var(--neu-bg);
20901
- color: var(--neu-accent);
20902
- /* Pressed in state for selected */
20903
- box-shadow: inset 3px 3px 6px var(--neu-shadow-dark), inset -3px -3px 6px var(--neu-shadow-light);
20904
- }
20905
- ` } }),
20974
+ .rdp-day_today {
20975
+ color: var(--accent-11);
20976
+ font-weight: 700;
20977
+ position: relative;
20978
+ }
20979
+
20980
+ .rdp-day_disabled { opacity: 0.3; cursor: not-allowed; }
20981
+
20982
+ /* NEUMORPHIC OVERRIDES */
20983
+ ${inputtype === 'datepicker-neumorphic' ? `
20984
+ .rdp-day:hover:not(.rdp-day_selected) {
20985
+ box-shadow: 3px 3px 6px var(--neu-shadow-dark), -3px -3px 6px var(--neu-shadow-light);
20986
+ background-color: transparent;
20987
+ }
20988
+ .rdp-day_selected {
20989
+ box-shadow: inset 2px 2px 5px var(--neu-shadow-dark), inset -2px -2px 5px var(--neu-shadow-light);
20990
+ color: var(--neu-accent) !important;
20991
+ background-color: var(--neu-bg) !important;
20992
+ }
20993
+ ` : ''}
20994
+ ` } }),
20906
20995
  React__default.createElement(P$1, { open: isOpen, onOpenChange: setIsOpen },
20907
20996
  React__default.createElement(s$1, null,
20908
- React__default.createElement(u, { variant: "surface", style: Object.assign({ cursor: 'pointer', height: inputtype === 'datepicker-neumorphic' ? '40px' : '32px' }, activeInputStyle), onClick: () => setIsOpen(true) },
20997
+ React__default.createElement(u, { variant: "surface", style: Object.assign({ cursor: 'pointer', height: inputtype === 'datepicker-neumorphic' ? '40px' : '32px' }, activeInputStyle), onClick: () => !readonly && setIsOpen(true) },
20909
20998
  React__default.createElement(c, null,
20910
20999
  React__default.createElement(Icon, { name: 'calendar', height: "16", width: "16", style: { color: 'var(--gray-10)' } })),
20911
- React__default.createElement("input", { readOnly: true, value: selectedDate && isValid(selectedDate) ? format$2(selectedDate, 'PPP') : '', placeholder: placeholder, style: {
21000
+ React__default.createElement("input", { readOnly: true, disabled: readonly, value: selectedDate && isValid(selectedDate) ? format$2(selectedDate, 'PPP') : '', placeholder: placeholder, style: {
20912
21001
  backgroundColor: 'transparent',
20913
21002
  border: 'none',
20914
21003
  outline: 'none',
20915
21004
  width: '100%',
20916
- cursor: 'pointer',
21005
+ cursor: readonly ? 'default' : 'pointer',
20917
21006
  color: 'inherit',
20918
21007
  fontFamily: 'inherit',
20919
- fontSize: 'var(--font-size-2)'
21008
+ fontSize: 'var(--font-size-2)',
21009
+ fontWeight: 500
20920
21010
  }, id: inputId, "aria-describedby": hasError ? errorId : `${alias}InputLabel` }))),
20921
- React__default.createElement(i$3, { style: { padding: 0, backgroundColor: 'transparent', boxShadow: 'none' }, align: "start" },
20922
- React__default.createElement("div", { className: inputtype === 'datepicker-neumorphic' ? 'neu-calendar' : '', style: neuVars },
20923
- React__default.createElement(DayPicker, { mode: "single", selected: selectedDate, onSelect: (date) => {
20924
- setFieldValue(alias, date);
20925
- setIsOpen(false);
20926
- setFieldTouched(alias, true);
20927
- }, disabled: [{ before: parsedMin || new Date(1900, 0, 1) }, { after: parsedMax || new Date(2100, 0, 1) }], components: {
20928
- Chevron: (props) => {
20929
- if (props.orientation === 'left') {
20930
- return React__default.createElement(Icon, { name: 'chevronleft', height: "16", width: "16" });
20931
- }
20932
- return React__default.createElement(Icon, { name: 'chevronright', height: "16", width: "16" });
21011
+ React__default.createElement(i$3, { style: calendarContainerStyle, align: "start", sideOffset: 5 },
21012
+ React__default.createElement(DayPicker, { mode: "single", selected: selectedDate, onSelect: (date) => {
21013
+ setFieldValue(alias, date);
21014
+ setIsOpen(false);
21015
+ setFieldTouched(alias, true);
21016
+ }, disabled: [
21017
+ ...(readonly ? [{ from: new Date(1900, 0, 1), to: new Date(2100, 0, 1) }] : []),
21018
+ { before: parsedMin || new Date(1900, 0, 1) },
21019
+ { after: parsedMax || new Date(2100, 0, 1) }
21020
+ ], components: {
21021
+ Chevron: (props) => {
21022
+ const style = { display: 'block', cursor: 'pointer', color: 'var(--gray-11)' };
21023
+ if (props.orientation === 'left') {
21024
+ return React__default.createElement(Icon, { name: 'chevronleft', height: "16", width: "16", style: style });
20933
21025
  }
20934
- } })))),
21026
+ return React__default.createElement(Icon, { name: 'chevronright', height: "16", width: "16", style: style });
21027
+ }
21028
+ } }))),
20935
21029
  React__default.createElement("div", null,
20936
21030
  React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
20937
21031
  "\u00A0",
@@ -20942,16 +21036,16 @@ const DatePicker = (_a) => {
20942
21036
  React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
20943
21037
  hasError ?
20944
21038
  React__default.createElement(React__default.Fragment, null,
20945
- React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || "Required field")) : null))));
21039
+ React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || (meta.error || "Required field"))) : null))));
20946
21040
  };
20947
21041
 
20948
21042
  const DateRangePicker = (_a) => {
20949
21043
  var _b, _c;
20950
- var { inputtype = 'daterangepicker-outline', alias, readOnly, width, inputlabel, placeholder = '', value, minvalue, maxvalue, className, style } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputlabel", "placeholder", "value", "minvalue", "maxvalue", "className", "style"]);
21044
+ var { inputtype = 'daterangepicker-outline', alias, readOnly, width, inputlabel, placeholder = 'Pick a date range', value, minvalue, maxvalue, className, style } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputlabel", "placeholder", "value", "minvalue", "maxvalue", "className", "style"]);
20951
21045
  const { setFieldValue, setFieldTouched } = useFormikContext();
20952
21046
  const [field, meta] = useField(alias);
20953
21047
  const hasError = Boolean(meta.touched && meta.error);
20954
- // Range object value format: { from: "2023-01-01", to: "2023-01-05" } :: Strings or Date Objects
21048
+ // Range object value format: { from: "2023-01-01", to: "2023-01-05" }
20955
21049
  const rawVal = field.value || {};
20956
21050
  const selectedRange = {
20957
21051
  from: ensureDate(rawVal.from),
@@ -20959,7 +21053,7 @@ const DateRangePicker = (_a) => {
20959
21053
  };
20960
21054
  const parsedMin = ensureDate(minvalue);
20961
21055
  const parsedMax = ensureDate(maxvalue);
20962
- const inputId = `${alias}FormInput` || crypto.randomUUID();
21056
+ const inputId = `${alias}FormInput`;
20963
21057
  const errorId = `${alias}-error`;
20964
21058
  const [isOpen, setIsOpen] = useState(false);
20965
21059
  const containerRef = useRef(null);
@@ -20985,11 +21079,38 @@ const DateRangePicker = (_a) => {
20985
21079
  displayText = format$2(selectedRange.from, 'LLL dd');
20986
21080
  }
20987
21081
  }
20988
- // Styles
20989
- const activeInputStyle = inputtype === 'daterangepicker-neumorphic'
20990
- ? Object.assign({ backgroundColor: 'var(--neu-bg)', border: 'none', color: hasError ? 'var(--red-9)' : 'var(--neu-text)', boxShadow: 'inset 3px 3px 6px var(--neu-shadow-dark), inset -3px -3px 6px var(--neu-shadow-light)', borderRadius: '8px' }, neuVars) : inputtype === 'daterangepicker-outline'
20991
- ? { backgroundColor: 'transparent', boxShadow: 'none', border: hasError ? '2px solid var(--red-9)' : '2px solid var(--gray-7)' }
20992
- : { backgroundColor: 'var(--color-surface)', boxShadow: hasError ? 'inset 0 0 0 1px var(--red-9)' : '0 2px 5px rgba(0,0,0,0.1)', border: 'none' };
21082
+ // --- STYLES ---
21083
+ const activeInputStyle = React__default.useMemo(() => {
21084
+ if (inputtype === 'daterangepicker-neumorphic') {
21085
+ return Object.assign({ backgroundColor: 'var(--neu-bg)', border: 'none', color: hasError ? 'var(--red-9)' : 'var(--neu-text)', boxShadow: 'inset 3px 3px 6px var(--neu-shadow-dark), inset -3px -3px 6px var(--neu-shadow-light)', borderRadius: '8px' }, neuVars);
21086
+ }
21087
+ if (inputtype === 'daterangepicker-outline') {
21088
+ return {
21089
+ backgroundColor: 'transparent',
21090
+ boxShadow: 'none',
21091
+ border: hasError ? '1px solid var(--red-9)' : '1px solid var(--gray-7)',
21092
+ borderRadius: 'var(--radius-2)'
21093
+ };
21094
+ }
21095
+ // Material
21096
+ return {
21097
+ backgroundColor: 'var(--color-surface)',
21098
+ boxShadow: hasError ? 'inset 0 0 0 1px var(--red-9)' : '0 1px 2px rgba(0,0,0,0.05)',
21099
+ border: '1px solid var(--gray-5)',
21100
+ borderRadius: 'var(--radius-2)'
21101
+ };
21102
+ }, [inputtype, hasError, neuVars]);
21103
+ const calendarContainerStyle = React__default.useMemo(() => {
21104
+ const base = { padding: '16px', borderRadius: '12px' };
21105
+ if (inputtype === 'daterangepicker-neumorphic') {
21106
+ return Object.assign(Object.assign(Object.assign({}, base), { backgroundColor: 'var(--neu-bg)', boxShadow: '6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light)', border: 'none' }), neuVars);
21107
+ }
21108
+ if (inputtype === 'daterangepicker-outline') {
21109
+ return Object.assign(Object.assign({}, base), { backgroundColor: 'var(--color-panel-solid)', border: '1px solid var(--gray-6)', boxShadow: '0 4px 12px rgba(0,0,0,0.05)' });
21110
+ }
21111
+ // Material
21112
+ return Object.assign(Object.assign({}, base), { backgroundColor: 'var(--color-panel-solid)', border: 'none', boxShadow: '0 10px 38px -10px rgba(22, 23, 24, 0.35), 0 10px 20px -15px rgba(22, 23, 24, 0.2)' });
21113
+ }, [inputtype, neuVars]);
20993
21114
  return (React__default.createElement(Column, { span: width, newLine: props.newRow },
20994
21115
  React__default.createElement(p$5, { direction: "column", gap: "2", width: "100%", ref: containerRef, style: style, className: className },
20995
21116
  React__default.createElement("input", { type: "hidden", name: alias, value: JSON.stringify({
@@ -20997,31 +21118,120 @@ const DateRangePicker = (_a) => {
20997
21118
  to: (_c = selectedRange.to) === null || _c === void 0 ? void 0 : _c.toISOString()
20998
21119
  }) }),
20999
21120
  React__default.createElement("style", { dangerouslySetInnerHTML: { __html: `
21000
- .rdp { --rdp-cell-size: 32px; margin: 0; }
21121
+ /* Reset & Layout */
21122
+ .rdp {
21123
+ --rdp-cell-size: 36px;
21124
+ --rdp-caption-font-size: 16px;
21125
+ margin: 0;
21126
+ font-family: var(--default-font-family, sans-serif);
21127
+ }
21001
21128
  .rdp-months { justify-content: center; }
21002
- .rdp-month { background: ${inputtype === 'daterangepicker-neumorphic' ? 'var(--neu-bg)' : 'var(--color-panel-solid)'}; padding: 10px; border-radius: 8px; }
21003
- .rdp-caption { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
21004
- .rdp-caption_label { font-weight: bold; color: var(--gray-12); font-size: var(--font-size-3); }
21005
- .rdp-nav { display: flex; gap: 5px; }
21006
- .rdp-head_cell { font-size: 0.8rem; font-weight: 500; color: var(--gray-10); padding-bottom: 5px; }
21007
- .rdp-day { width: var(--rdp-cell-size); height: var(--rdp-cell-size); border-radius: 50%; border: none; background: transparent; cursor: pointer; color: var(--gray-12); display: flex; align-items: center; justify-content: center; }
21008
- .rdp-day:hover:not(.rdp-day_selected) { background-color: var(--gray-4); }
21129
+ .rdp-month { background: transparent; }
21009
21130
 
21010
- .rdp-day_selected:not(.rdp-day_range_start):not(.rdp-day_range_end) { background-color: var(--accent-4); color: var(--accent-11); border-radius: 0; }
21011
- .rdp-day_range_start { border-radius: 50% 0 0 50%; background-color: var(--accent-9); color: white; }
21012
- .rdp-day_range_end { border-radius: 0 50% 50% 0; background-color: var(--accent-9); color: white; }
21131
+ /* Header */
21132
+ .rdp-caption {
21133
+ display: flex; align-items: center; justify-content: space-between;
21134
+ margin-bottom: 12px; padding: 0 4px;
21135
+ }
21136
+ .rdp-caption_label {
21137
+ font-weight: 600; color: var(--gray-12); font-size: var(--font-size-3);
21138
+ text-transform: capitalize;
21139
+ }
21140
+ .rdp-nav { display: flex; gap: 8px; }
21141
+ .rdp-nav_button {
21142
+ color: var(--gray-11); border-radius: 6px; padding: 4px;
21143
+ transition: background 0.2s; background: transparent; border: none; cursor: pointer;
21144
+ display: flex; align-items: center; justify-content: center;
21145
+ }
21146
+ .rdp-nav_button:hover { background-color: var(--gray-4); color: var(--gray-12); }
21147
+
21148
+ /* Weekdays */
21149
+ .rdp-head_cell {
21150
+ font-size: 0.75rem; font-weight: 600; color: var(--gray-9);
21151
+ text-transform: uppercase; padding-bottom: 8px; width: var(--rdp-cell-size);
21152
+ text-align: center;
21153
+ }
21154
+
21155
+ /* Cells */
21156
+ .rdp-cell { text-align: center; padding: 1px 0; }
21157
+ .rdp-day {
21158
+ width: var(--rdp-cell-size); height: var(--rdp-cell-size);
21159
+ border-radius: 50%; border: 2px solid transparent;
21160
+ background: transparent; cursor: pointer; color: var(--gray-12);
21161
+ font-size: var(--font-size-2); display: flex; align-items: center; justify-content: center;
21162
+ margin: 0 auto;
21163
+ }
21164
+
21165
+ /* States */
21166
+ .rdp-day:hover:not(.rdp-day_selected):not([disabled]) { background-color: var(--gray-4); }
21167
+
21168
+ /* --- RANGE STYLES --- */
21169
+ .rdp-day_range_middle {
21170
+ background-color: var(--accent-3) !important;
21171
+ color: var(--accent-11) !important;
21172
+ border-radius: 0 !important;
21173
+ width: 100%; /* Fill cell width for continuous strip */
21174
+ }
21175
+ .rdp-day_range_start {
21176
+ background-color: var(--accent-9) !important;
21177
+ color: white !important;
21178
+ border-top-left-radius: 50% !important;
21179
+ border-bottom-left-radius: 50% !important;
21180
+ border-top-right-radius: 0 !important;
21181
+ border-bottom-right-radius: 0 !important;
21182
+ width: 100%;
21183
+ }
21184
+ .rdp-day_range_end {
21185
+ background-color: var(--accent-9) !important;
21186
+ color: white !important;
21187
+ border-top-right-radius: 50% !important;
21188
+ border-bottom-right-radius: 50% !important;
21189
+ border-top-left-radius: 0 !important;
21190
+ border-bottom-left-radius: 0 !important;
21191
+ width: 100%;
21192
+ }
21193
+ .rdp-day_range_start.rdp-day_range_end {
21194
+ border-radius: 50% !important;
21195
+ width: var(--rdp-cell-size);
21196
+ }
21197
+ .rdp-day_today { color: var(--accent-11); font-weight: 700; }
21198
+ .rdp-day_disabled { opacity: 0.3; cursor: not-allowed; }
21013
21199
 
21014
- /* Neumorphic */
21015
- .neu-calendar .rdp-month { box-shadow: 6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light); }
21016
- .neu-calendar .rdp-day_range_start, .neu-calendar .rdp-day_range_end { box-shadow: inset 2px 2px 4px rgba(0,0,0,0.2); }
21200
+ /* NEUMORPHIC OVERRIDES */
21201
+ ${inputtype === 'daterangepicker-neumorphic' ? `
21202
+ .neu-calendar .rdp-day:hover:not(.rdp-day_selected) {
21203
+ box-shadow: 3px 3px 6px var(--neu-shadow-dark), -3px -3px 6px var(--neu-shadow-light);
21204
+ background-color: transparent;
21205
+ }
21206
+ .neu-calendar .rdp-day_range_start,
21207
+ .neu-calendar .rdp-day_range_end {
21208
+ box-shadow: inset 2px 2px 5px var(--neu-shadow-dark), inset -2px -2px 5px var(--neu-shadow-light);
21209
+ color: var(--neu-accent) !important;
21210
+ background-color: var(--neu-bg) !important;
21211
+ }
21212
+ .neu-calendar .rdp-day_range_middle {
21213
+ box-shadow: inset 1px 1px 2px var(--neu-shadow-dark), inset -1px -1px 2px var(--neu-shadow-light);
21214
+ background-color: transparent !important;
21215
+ }
21216
+ ` : ''}
21017
21217
  ` } }),
21018
21218
  React__default.createElement(P$1, { open: isOpen, onOpenChange: setIsOpen },
21019
21219
  React__default.createElement(s$1, null,
21020
- React__default.createElement(u, { variant: "surface", style: Object.assign({ cursor: 'pointer', height: inputtype === 'daterangepicker-neumorphic' ? '40px' : '32px' }, activeInputStyle), onClick: () => setIsOpen(true) },
21220
+ React__default.createElement(u, { variant: "surface", style: Object.assign({ cursor: 'pointer', height: inputtype === 'daterangepicker-neumorphic' ? '40px' : '32px' }, activeInputStyle), onClick: () => !readOnly && setIsOpen(true) },
21021
21221
  React__default.createElement(c, null,
21022
21222
  React__default.createElement(Icon, { name: 'calendar', height: "16", width: "16", style: { color: 'var(--gray-10)' } })),
21023
- React__default.createElement("input", { id: inputId, "aria-describedby": hasError ? errorId : `${alias}InputLabel`, readOnly: true, value: displayText, style: { backgroundColor: 'transparent', border: 'none', outline: 'none', width: '100%', cursor: 'pointer', color: 'inherit', fontSize: 'var(--font-size-2)' } }))),
21024
- React__default.createElement(i$3, { style: { padding: 0, backgroundColor: 'transparent', boxShadow: 'none' }, align: "start" },
21223
+ React__default.createElement("input", { id: inputId, "aria-describedby": hasError ? errorId : `${alias}InputLabel`, readOnly: true, disabled: readOnly, value: displayText, placeholder: placeholder, style: {
21224
+ backgroundColor: 'transparent',
21225
+ border: 'none',
21226
+ outline: 'none',
21227
+ width: '100%',
21228
+ cursor: readOnly ? 'default' : 'pointer',
21229
+ color: 'inherit',
21230
+ fontFamily: 'inherit',
21231
+ fontSize: 'var(--font-size-2)',
21232
+ fontWeight: 500
21233
+ } }))),
21234
+ React__default.createElement(i$3, { style: calendarContainerStyle, align: "start", sideOffset: 5 },
21025
21235
  React__default.createElement("div", { className: inputtype === 'daterangepicker-neumorphic' ? 'neu-calendar' : '', style: neuVars },
21026
21236
  React__default.createElement(DayPicker, { mode: "range", selected: selectedRange, onSelect: (range) => {
21027
21237
  setFieldValue(alias, range);
@@ -21030,13 +21240,15 @@ const DateRangePicker = (_a) => {
21030
21240
  setIsOpen(false);
21031
21241
  }
21032
21242
  }, disabled: [
21243
+ ...(readOnly ? [{ from: new Date(1900, 0, 1), to: new Date(2100, 0, 1) }] : []),
21033
21244
  { before: parsedMin || new Date(1900, 0, 1) },
21034
21245
  { after: parsedMax || new Date(2100, 0, 1) }
21035
21246
  ], components: {
21036
21247
  Chevron: (props) => {
21248
+ const style = { display: 'block', cursor: 'pointer', color: 'var(--gray-11)' };
21037
21249
  if (props.orientation === 'left')
21038
- return React__default.createElement(Icon, { name: 'chevronleft' });
21039
- return React__default.createElement(Icon, { name: 'chevronright' });
21250
+ return React__default.createElement(Icon, { name: 'chevronleft', height: "16", width: "16", style: style });
21251
+ return React__default.createElement(Icon, { name: 'chevronright', height: "16", width: "16", style: style });
21040
21252
  }
21041
21253
  } })))),
21042
21254
  React__default.createElement("div", null,
@@ -21049,18 +21261,18 @@ const DateRangePicker = (_a) => {
21049
21261
  React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
21050
21262
  hasError ?
21051
21263
  React__default.createElement(React__default.Fragment, null,
21052
- React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || "Required field")) : null))));
21264
+ React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || (meta.error || "Required field"))) : null))));
21053
21265
  };
21054
21266
 
21055
21267
  const DateTimePicker = (_a) => {
21056
- var { inputtype = 'datetimepicker-outline', alias, readonly, width, inputlabel, placeholder = '', value, minvalue, maxvalue, className, style } = _a, props = __rest$1(_a, ["inputtype", "alias", "readonly", "width", "inputlabel", "placeholder", "value", "minvalue", "maxvalue", "className", "style"]);
21268
+ var { inputtype = 'datetimepicker-outline', alias, readonly, width, inputlabel, placeholder = 'Pick date & time', value, minvalue, maxvalue, className, style } = _a, props = __rest$1(_a, ["inputtype", "alias", "readonly", "width", "inputlabel", "placeholder", "value", "minvalue", "maxvalue", "className", "style"]);
21057
21269
  const { setFieldValue, setFieldTouched } = useFormikContext();
21058
21270
  const [field, meta] = useField(alias);
21059
21271
  const hasError = Boolean(meta.touched && meta.error);
21060
21272
  const selectedDate = ensureDate(field.value);
21061
21273
  const parsedMin = ensureDate(minvalue);
21062
21274
  const parsedMax = ensureDate(maxvalue);
21063
- const inputId = `${alias}FormInput` || crypto.randomUUID();
21275
+ const inputId = `${alias}FormInput`;
21064
21276
  const errorId = `${alias}-error`;
21065
21277
  const [isOpen, setIsOpen] = useState(false);
21066
21278
  const containerRef = useRef(null);
@@ -21093,55 +21305,128 @@ const DateTimePicker = (_a) => {
21093
21305
  const baseDate = selectedDate || new Date();
21094
21306
  let newDate = baseDate;
21095
21307
  if (type === 'hours') {
21096
- // 0-23 limiters
21097
21308
  const h = Math.min(23, Math.max(0, numVal));
21098
21309
  newDate = setHours(baseDate, h);
21099
21310
  }
21100
21311
  else {
21101
- // 0-59 limiters
21102
21312
  const m = Math.min(59, Math.max(0, numVal));
21103
21313
  newDate = setMinutes(baseDate, m);
21104
21314
  }
21105
21315
  setFieldValue(alias, newDate);
21106
21316
  };
21107
- // Styles
21108
- const activeInputStyle = inputtype === 'datetimepicker-neumorphic'
21109
- ? Object.assign({ backgroundColor: 'var(--neu-bg)', border: 'none', color: hasError ? 'var(--red-9)' : 'var(--neu-text)', boxShadow: 'inset 3px 3px 6px var(--neu-shadow-dark), inset -3px -3px 6px var(--neu-shadow-light)', borderRadius: '8px' }, neuVars) : inputtype === 'datetimepicker-outline'
21110
- ? { backgroundColor: 'transparent', boxShadow: 'none', border: hasError ? '2px solid var(--red-9)' : '2px solid var(--gray-7)' }
21111
- : { backgroundColor: 'var(--color-surface)', boxShadow: hasError ? 'inset 0 0 0 1px var(--red-9)' : '0 2px 5px rgba(0,0,0,0.1)', border: 'none' };
21317
+ // --- STYLES ---
21318
+ const activeInputStyle = React__default.useMemo(() => {
21319
+ if (inputtype === 'datetimepicker-neumorphic') {
21320
+ return Object.assign({ backgroundColor: 'var(--neu-bg)', border: 'none', color: hasError ? 'var(--red-9)' : 'var(--neu-text)', boxShadow: 'inset 3px 3px 6px var(--neu-shadow-dark), inset -3px -3px 6px var(--neu-shadow-light)', borderRadius: '8px' }, neuVars);
21321
+ }
21322
+ if (inputtype === 'datetimepicker-outline') {
21323
+ return {
21324
+ backgroundColor: 'transparent',
21325
+ boxShadow: 'none',
21326
+ border: hasError ? '1px solid var(--red-9)' : '1px solid var(--gray-7)',
21327
+ borderRadius: 'var(--radius-2)'
21328
+ };
21329
+ }
21330
+ // Material
21331
+ return {
21332
+ backgroundColor: 'var(--color-surface)',
21333
+ boxShadow: hasError ? 'inset 0 0 0 1px var(--red-9)' : '0 1px 2px rgba(0,0,0,0.05)',
21334
+ border: '1px solid var(--gray-5)',
21335
+ borderRadius: 'var(--radius-2)'
21336
+ };
21337
+ }, [inputtype, hasError, neuVars]);
21338
+ const calendarContainerStyle = React__default.useMemo(() => {
21339
+ const base = { padding: 0, borderRadius: '12px', overflow: 'hidden' }; // Padding 0 to let Time section flush to bottom
21340
+ if (inputtype === 'datetimepicker-neumorphic') {
21341
+ return Object.assign(Object.assign(Object.assign({}, base), { backgroundColor: 'var(--neu-bg)', boxShadow: '6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light)', border: 'none' }), neuVars);
21342
+ }
21343
+ if (inputtype === 'datetimepicker-outline') {
21344
+ return Object.assign(Object.assign({}, base), { backgroundColor: 'var(--color-panel-solid)', border: '1px solid var(--gray-6)', boxShadow: '0 4px 12px rgba(0,0,0,0.05)' });
21345
+ }
21346
+ // Material
21347
+ return Object.assign(Object.assign({}, base), { backgroundColor: 'var(--color-panel-solid)', border: 'none', boxShadow: '0 10px 38px -10px rgba(22, 23, 24, 0.35), 0 10px 20px -15px rgba(22, 23, 24, 0.2)' });
21348
+ }, [inputtype, neuVars]);
21112
21349
  return (React__default.createElement(Column, { span: width, newLine: props.newRow },
21113
21350
  React__default.createElement(p$5, { direction: "column", gap: "2", width: "100%", ref: containerRef, style: style, className: className },
21114
21351
  React__default.createElement("input", { type: "hidden", name: alias, value: selectedDate ? selectedDate.toISOString() : '' }),
21115
21352
  React__default.createElement("style", { dangerouslySetInnerHTML: { __html: `
21116
- .rdp { --rdp-cell-size: 32px; margin: 0; }
21353
+ /* Reset & Layout */
21354
+ .rdp {
21355
+ --rdp-cell-size: 36px;
21356
+ --rdp-caption-font-size: 16px;
21357
+ margin: 0;
21358
+ padding: 16px; /* Padding moved to RDP so Time section is flush */
21359
+ font-family: var(--default-font-family, sans-serif);
21360
+ }
21117
21361
  .rdp-months { justify-content: center; }
21118
- .rdp-month { background: ${inputtype === 'datetimepicker-neumorphic' ? 'var(--neu-bg)' : 'var(--color-panel-solid)'}; padding: 10px; border-radius: 8px; }
21119
- .rdp-caption { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
21120
- .rdp-caption_label { font-weight: bold; color: var(--gray-12); font-size: var(--font-size-3); }
21121
- .rdp-nav { display: flex; gap: 5px; }
21122
- .rdp-day { width: var(--rdp-cell-size); height: var(--rdp-cell-size); border-radius: 50%; border: none; background: transparent; cursor: pointer; color: var(--gray-12); display: flex; align-items: center; justify-content: center; }
21123
- .rdp-day:hover:not(.rdp-day_selected) { background-color: var(--gray-4); }
21124
- .rdp-day_selected { background-color: var(--accent-9); color: white; font-weight: bold; }
21362
+ .rdp-month { background: transparent; }
21125
21363
 
21126
- .neu-calendar .rdp-month { box-shadow: 6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light); }
21127
- .neu-calendar .rdp-day:hover:not(.rdp-day_selected) { background-color: transparent; box-shadow: 3px 3px 6px var(--neu-shadow-dark), -3px -3px 6px var(--neu-shadow-light); }
21128
- .neu-calendar .rdp-day_selected { background-color: var(--neu-bg); color: var(--neu-accent); box-shadow: inset 3px 3px 6px var(--neu-shadow-dark), inset -3px -3px 6px var(--neu-shadow-light); }
21364
+ /* Header */
21365
+ .rdp-caption {
21366
+ display: flex; align-items: center; justify-content: space-between;
21367
+ margin-bottom: 12px; padding: 0 4px;
21368
+ }
21369
+ .rdp-caption_label {
21370
+ font-weight: 600; color: var(--gray-12); font-size: var(--font-size-3);
21371
+ text-transform: capitalize;
21372
+ }
21373
+ .rdp-nav { display: flex; gap: 8px; }
21374
+ .rdp-nav_button {
21375
+ color: var(--gray-11); border-radius: 6px; padding: 4px;
21376
+ transition: background 0.2s; background: transparent; border: none; cursor: pointer;
21377
+ display: flex; align-items: center; justify-content: center;
21378
+ }
21379
+ .rdp-nav_button:hover { background-color: var(--gray-4); color: var(--gray-12); }
21380
+
21381
+ /* Weekdays */
21382
+ .rdp-head_cell {
21383
+ font-size: 0.75rem; font-weight: 600; color: var(--gray-9);
21384
+ text-transform: uppercase; padding-bottom: 8px; width: var(--rdp-cell-size);
21385
+ text-align: center;
21386
+ }
21387
+
21388
+ /* Cells */
21389
+ .rdp-cell { text-align: center; }
21390
+ .rdp-day {
21391
+ width: var(--rdp-cell-size); height: var(--rdp-cell-size);
21392
+ border-radius: 50%; border: 2px solid transparent;
21393
+ background: transparent; cursor: pointer; color: var(--gray-12);
21394
+ font-size: var(--font-size-2); display: flex; align-items: center; justify-content: center;
21395
+ transition: all 0.15s ease; margin: 1px;
21396
+ }
21397
+
21398
+ .rdp-day:hover:not(.rdp-day_selected):not([disabled]) { background-color: var(--gray-4); }
21399
+ .rdp-day_selected { background-color: var(--accent-9) !important; color: white !important; font-weight: 600; }
21400
+ .rdp-day_today { color: var(--accent-11); font-weight: 700; position: relative; }
21401
+ .rdp-day_today:not(.rdp-day_selected)::after {
21402
+ content: ''; position: absolute; bottom: 4px; width: 4px; height: 4px; border-radius: 50%; background-color: var(--accent-9);
21403
+ }
21404
+ .rdp-day_disabled { opacity: 0.3; cursor: not-allowed; }
21129
21405
 
21130
21406
  /* Time Input Styling */
21131
21407
  .time-input {
21132
- text-align: center;
21133
- font-variant-numeric: tabular-nums;
21134
- width: 40px;
21135
- padding: 4px;
21136
- border-radius: 4px;
21137
- border: 1px solid var(--gray-6);
21138
- background: var(--color-surface);
21139
- }
21140
- .neu-calendar .time-input {
21141
- background: var(--neu-bg);
21142
- border: none;
21143
- box-shadow: inset 2px 2px 4px var(--neu-shadow-dark), inset -2px -2px 4px var(--neu-shadow-light);
21408
+ text-align: center; font-variant-numeric: tabular-nums;
21409
+ width: 44px; padding: 4px; border-radius: 6px;
21410
+ border: 1px solid var(--gray-6); background: var(--color-surface);
21411
+ color: var(--gray-12); font-weight: 500;
21144
21412
  }
21413
+ .time-input:focus { outline: 2px solid var(--accent-9); border-color: transparent; }
21414
+
21415
+ /* Neumorphic Overrides */
21416
+ ${inputtype === 'datetimepicker-neumorphic' ? `
21417
+ .neu-calendar .rdp-day:hover:not(.rdp-day_selected) {
21418
+ box-shadow: 3px 3px 6px var(--neu-shadow-dark), -3px -3px 6px var(--neu-shadow-light);
21419
+ background-color: transparent;
21420
+ }
21421
+ .neu-calendar .rdp-day_selected {
21422
+ box-shadow: inset 2px 2px 5px var(--neu-shadow-dark), inset -2px -2px 5px var(--neu-shadow-light);
21423
+ color: var(--neu-accent) !important; background-color: var(--neu-bg) !important;
21424
+ }
21425
+ .neu-calendar .time-input {
21426
+ background: var(--neu-bg); border: none;
21427
+ box-shadow: inset 2px 2px 4px var(--neu-shadow-dark), inset -2px -2px 4px var(--neu-shadow-light);
21428
+ }
21429
+ ` : ''}
21145
21430
  ` } }),
21146
21431
  React__default.createElement(P$1, { open: isOpen, onOpenChange: (open) => {
21147
21432
  setIsOpen(open);
@@ -21149,28 +21434,39 @@ const DateTimePicker = (_a) => {
21149
21434
  setFieldTouched(alias, true);
21150
21435
  } },
21151
21436
  React__default.createElement(s$1, null,
21152
- React__default.createElement(u, { variant: "surface", style: Object.assign({ cursor: 'pointer', height: inputtype === 'datetimepicker-neumorphic' ? '40px' : '32px' }, activeInputStyle), onClick: () => setIsOpen(true) },
21437
+ React__default.createElement(u, { variant: "surface", style: Object.assign({ cursor: 'pointer', height: inputtype === 'datetimepicker-neumorphic' ? '40px' : '32px' }, activeInputStyle), onClick: () => !readonly && setIsOpen(true) },
21153
21438
  React__default.createElement(c, null,
21154
21439
  React__default.createElement(Icon, { name: 'calendar', height: "16", width: "16", style: { color: 'var(--gray-10)' } })),
21155
- React__default.createElement("input", { id: inputId, "aria-describedby": hasError ? errorId : undefined, readOnly: true, value: selectedDate ? format$2(selectedDate, 'PPP p') : '', placeholder: placeholder, style: { backgroundColor: 'transparent', border: 'none', outline: 'none', width: '100%', cursor: 'pointer', color: 'inherit', fontFamily: 'inherit', fontSize: 'var(--font-size-2)' } }))),
21156
- React__default.createElement(i$3, { style: { padding: 0, backgroundColor: 'transparent', boxShadow: 'none' }, align: "start" },
21440
+ React__default.createElement("input", { id: inputId, "aria-describedby": hasError ? errorId : undefined, readOnly: true, disabled: readonly, value: selectedDate && isValid(selectedDate) ? format$2(selectedDate, 'PPP p') : '', placeholder: placeholder, style: {
21441
+ backgroundColor: 'transparent', border: 'none', outline: 'none', width: '100%',
21442
+ cursor: readonly ? 'default' : 'pointer', color: 'inherit', fontFamily: 'inherit',
21443
+ fontSize: 'var(--font-size-2)', fontWeight: 500
21444
+ } }))),
21445
+ React__default.createElement(i$3, { style: calendarContainerStyle, align: "start", sideOffset: 5 },
21157
21446
  React__default.createElement("div", { className: inputtype === 'datetimepicker-neumorphic' ? 'neu-calendar' : '', style: neuVars },
21158
- React__default.createElement(DayPicker, { mode: "single", selected: selectedDate, onSelect: handleDaySelect, disabled: [{ before: parsedMin || new Date(1900, 0, 1) }, { after: parsedMax || new Date(2100, 0, 1) }], components: {
21159
- Chevron: (props) => props.orientation === 'left' ? React__default.createElement(Icon, { name: 'chevronleft' }) : React__default.createElement(Icon, { name: 'chevronright' })
21447
+ React__default.createElement(DayPicker, { mode: "single", selected: selectedDate, onSelect: handleDaySelect, disabled: [
21448
+ ...(readonly ? [{ from: new Date(1900, 0, 1), to: new Date(2100, 0, 1) }] : []),
21449
+ { before: parsedMin || new Date(1900, 0, 1) },
21450
+ { after: parsedMax || new Date(2100, 0, 1) }
21451
+ ], modifiers: { today: new Date() }, modifiersClassNames: { today: 'rdp-day_today' }, components: {
21452
+ Chevron: (props) => {
21453
+ const style = { display: 'block', cursor: 'pointer', color: 'var(--gray-11)' };
21454
+ if (props.orientation === 'left')
21455
+ return React__default.createElement(Icon, { name: 'chevronleft', height: "16", width: "16", style: style });
21456
+ return React__default.createElement(Icon, { name: 'chevronright', height: "16", width: "16", style: style });
21457
+ }
21160
21458
  } }),
21161
21459
  React__default.createElement(o$2, { size: "4" }),
21162
21460
  React__default.createElement(p$5, { p: "3", gap: "3", align: "center", justify: "center", style: {
21163
- backgroundColor: inputtype === 'datetimepicker-neumorphic' ? 'var(--neu-bg)' : 'var(--color-panel-solid)',
21164
- borderBottomLeftRadius: '8px',
21165
- borderBottomRightRadius: '8px',
21166
- boxShadow: inputtype === 'datetimepicker-neumorphic' ? '6px 6px 12px var(--neu-shadow-dark), -6px 6px 12px var(--neu-shadow-light)' : undefined
21461
+ backgroundColor: inputtype === 'datetimepicker-neumorphic' ? 'rgba(0,0,0,0.02)' : 'var(--gray-2)',
21462
+ borderTop: inputtype === 'datetimepicker-neumorphic' ? 'none' : '1px solid var(--gray-4)'
21167
21463
  } },
21168
21464
  React__default.createElement(Icon, { name: "clock", width: "16", height: "16", style: { opacity: 0.7 } }),
21169
- React__default.createElement(p$d, { size: "2", weight: "bold" }, "Time:"),
21170
- React__default.createElement("input", { type: "number", className: "time-input", min: "0", max: "23", value: selectedDate ? format$2(selectedDate, 'HH') : '12', onChange: (e) => handleTimeChange('hours', e.target.value) }),
21171
- React__default.createElement(p$d, null, ":"),
21172
- React__default.createElement("input", { type: "number", className: "time-input", min: "0", max: "59", value: selectedDate ? format$2(selectedDate, 'mm') : '00', onChange: (e) => handleTimeChange('minutes', e.target.value) }),
21173
- React__default.createElement(o$a, { size: "1", variant: "soft", onClick: () => setIsOpen(false) }, "Done"))))),
21465
+ React__default.createElement(p$5, { align: "center", gap: "1" },
21466
+ React__default.createElement("input", { type: "number", className: "time-input", min: "0", max: "23", disabled: readonly, value: selectedDate ? format$2(selectedDate, 'HH') : '12', onChange: (e) => handleTimeChange('hours', e.target.value) }),
21467
+ React__default.createElement(p$d, { weight: "bold", style: { paddingBottom: 2 } }, ":"),
21468
+ React__default.createElement("input", { type: "number", className: "time-input", min: "0", max: "59", disabled: readonly, value: selectedDate ? format$2(selectedDate, 'mm') : '00', onChange: (e) => handleTimeChange('minutes', e.target.value) })),
21469
+ React__default.createElement(o$a, { size: "1", variant: "soft", onClick: () => setIsOpen(false), style: { marginLeft: 'auto' } }, "Done"))))),
21174
21470
  React__default.createElement("div", null,
21175
21471
  React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
21176
21472
  "\u00A0",
@@ -21181,11 +21477,11 @@ const DateTimePicker = (_a) => {
21181
21477
  React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
21182
21478
  hasError ?
21183
21479
  React__default.createElement(React__default.Fragment, null,
21184
- React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || "Required field")) : null))));
21480
+ React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || (meta.error || "Required field"))) : null))));
21185
21481
  };
21186
21482
 
21187
21483
  const Dropdown = (_a) => {
21188
- var { inputtype = 'dropdown-outline', alias, readonly, width, inputlabel, placeholder, value, inputoptions, style } = _a, props = __rest$1(_a, ["inputtype", "alias", "readonly", "width", "inputlabel", "placeholder", "value", "inputoptions", "style"]);
21484
+ var { inputtype = 'dropdown-outline', alias, readonly, width, inputlabel, placeholder, value, inputoptions, style, newRow, isHinted, hintText, hintUrl, defaultValue, errorText } = _a, props = __rest$1(_a, ["inputtype", "alias", "readonly", "width", "inputlabel", "placeholder", "value", "inputoptions", "style", "newRow", "isHinted", "hintText", "hintUrl", "defaultValue", "errorText"]);
21189
21485
  const triggerRef = useRef(null);
21190
21486
  const [neuVars, setNeuVars] = useState({});
21191
21487
  const { setFieldValue, setFieldTouched } = useFormikContext();
@@ -21209,7 +21505,6 @@ const Dropdown = (_a) => {
21209
21505
  window.open(inputUrl, '_blank', 'noopener,noreferrer');
21210
21506
  };
21211
21507
  // --- STYLES ---
21212
- // MATERIAL
21213
21508
  const materialTrigger = {
21214
21509
  backgroundColor: 'var(--color-surface)',
21215
21510
  border: 'none',
@@ -21260,7 +21555,7 @@ const Dropdown = (_a) => {
21260
21555
  inputtype === 'dropdown-material' ? materialContent :
21261
21556
  inputtype === 'dropdown-outline' ? outlineContent : Object.assign(Object.assign({}, neumorphicContent), neuVars);
21262
21557
  return (React__default.createElement(React__default.Fragment, null,
21263
- React__default.createElement(Column, { span: width, newLine: props.newRow },
21558
+ React__default.createElement(Column, { span: width, newLine: newRow },
21264
21559
  React__default.createElement(p$5, { direction: "column", gap: "2", style: { width: '100%' } },
21265
21560
  inputtype === 'dropdown-neumorphic' && (React__default.createElement("style", { dangerouslySetInnerHTML: { __html: `
21266
21561
  .neu-select-trigger[data-state='open'] {
@@ -21272,32 +21567,37 @@ const Dropdown = (_a) => {
21272
21567
  cursor: pointer;
21273
21568
  }
21274
21569
  ` } })),
21275
- React__default.createElement(C$1, { name: alias, disabled: readonly, "aria-describedby": `${alias}InputLabel`, defaultValue: props.defaultValue || value, value: field.value, onValueChange: (val) => {
21276
- setFieldValue(alias, val);
21570
+ React__default.createElement(C$1, { name: alias, disabled: readonly, value: field.value || "", onValueChange: (val) => {
21571
+ const finalVal = val === "__RESET__" ? "" : val;
21572
+ setFieldValue(alias, finalVal);
21277
21573
  setTimeout(() => setFieldTouched(alias, true), 0);
21574
+ if (props.onValueChange)
21575
+ props.onValueChange(finalVal);
21278
21576
  }, onOpenChange: (isOpen) => {
21279
21577
  if (!isOpen) {
21280
21578
  setFieldTouched(alias, true);
21281
21579
  }
21282
21580
  } },
21283
- React__default.createElement(u$1, { id: `${alias}FormInput`, ref: triggerRef, variant: "ghost", placeholder: placeholder, className: `${inputtype === 'dropdown-neumorphic' ? 'neu-select-trigger' : ''} ${props.className || ''}`, style: Object.assign(Object.assign({}, activeTriggerStyle), style) }),
21284
- React__default.createElement(g, { position: "popper", sideOffset: 5, style: activeContentStyle }, inputoptions.map((inputoption) => (React__default.createElement(React__default.Fragment, { key: inputoption.optionid || crypto.randomUUID() }, inputoption.optionurl ?
21285
- React__default.createElement(v, { id: String(inputoption.optionid) || '', key: inputoption.optionid, value: inputoption.optionvalue, className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '' },
21286
- React__default.createElement("a", { onClick: () => openLink(inputoption.optionurl || "#"), style: { textDecoration: 'none' } }, inputoption.text))
21287
- :
21288
- React__default.createElement(React__default.Fragment, null,
21289
- React__default.createElement(v, { id: String(inputoption.optionid) || '', key: inputoption.optionid, value: inputoption.optionvalue, className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '' }, inputoption.text))))))),
21581
+ React__default.createElement(u$1, Object.assign({ id: `${alias}FormInput`, ref: triggerRef, variant: "ghost", placeholder: placeholder || "Select an option", className: `${inputtype === 'dropdown-neumorphic' ? 'neu-select-trigger' : ''} ${props.className || ''}`, style: Object.assign(Object.assign({}, activeTriggerStyle), style) }, props)),
21582
+ React__default.createElement(g, { position: "popper", sideOffset: 5, style: activeContentStyle },
21583
+ React__default.createElement(v, { value: "__RESET__", className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '', style: { color: 'var(--gray-10)', fontStyle: 'italic' } }, placeholder || "Select an option"),
21584
+ React__default.createElement(o$2, { size: "4", style: { margin: '4px 0', opacity: 0.5 } }),
21585
+ inputoptions.map((inputoption) => (React__default.createElement(React__default.Fragment, { key: inputoption.optionid || crypto.randomUUID() }, inputoption.optionurl ?
21586
+ React__default.createElement(v, { id: String(inputoption.optionid) || '', value: inputoption.optionvalue, className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '' },
21587
+ React__default.createElement("a", { onClick: (e) => { e.stopPropagation(); openLink(inputoption.optionurl || "#"); }, style: { textDecoration: 'none', color: 'inherit' } }, inputoption.text))
21588
+ :
21589
+ React__default.createElement(v, { id: String(inputoption.optionid) || '', value: inputoption.optionvalue, className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '' }, inputoption.text)))))),
21290
21590
  React__default.createElement("div", null,
21291
21591
  React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
21292
21592
  "\u00A0",
21293
- props.isHinted ?
21593
+ isHinted ?
21294
21594
  React__default.createElement(React__default.Fragment, null,
21295
- React__default.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
21296
- React__default.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
21595
+ React__default.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
21596
+ React__default.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
21297
21597
  React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
21298
21598
  hasError ?
21299
21599
  React__default.createElement(React__default.Fragment, null,
21300
- React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || "Required field")) : null)))));
21600
+ React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, errorText || meta.error || "Required field")) : null)))));
21301
21601
  };
21302
21602
 
21303
21603
  const getFileIcon$1 = (type, name) => {
@@ -21586,6 +21886,7 @@ const FileMultiple = (_a) => {
21586
21886
  React__default.createElement(Icon, { name: 'close' })))));
21587
21887
  }))),
21588
21888
  React__default.createElement("div", null,
21889
+ React__default.createElement("br", null),
21589
21890
  React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
21590
21891
  "\u00A0",
21591
21892
  props.isHinted ?
@@ -28915,7 +29216,7 @@ const ImageOutput = ({ id, src, alt = "Image", design = 'outline', layout = 'nor
28915
29216
  React__default.createElement(i$9, { ratio: aspectRatio }, content)));
28916
29217
  };
28917
29218
 
28918
- const Input$1 = (_a) => {
29219
+ const Input$2 = (_a) => {
28919
29220
  var { alias, inputtype = "text", width, inputlabel, readonly = false, placeholder = '', className, size = "2", style, inputVariant = 'input-outline' } = _a, props = __rest$1(_a, ["alias", "inputtype", "width", "inputlabel", "readonly", "placeholder", "className", "size", "style", "inputVariant"]);
28920
29221
  const [inputField, meta] = useField(alias);
28921
29222
  const hasError = Boolean(meta.touched && meta.error);
@@ -28924,6 +29225,7 @@ const Input$1 = (_a) => {
28924
29225
  return (React__default.createElement(Column, { span: width, newLine: props.newRow },
28925
29226
  React__default.createElement(u, Object.assign({ size: size, type: inputtype, id: `${alias}FormInput`, "aria-describedby": `${alias}InputLabel`, readOnly: readonly, placeholder: placeholder, color: hasError ? "red" : undefined, className: `${variantClass} ${className || ''}` }, inputField, props, { name: alias })),
28926
29227
  React__default.createElement("div", null,
29228
+ React__default.createElement("br", null),
28927
29229
  React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
28928
29230
  "\u00A0",
28929
29231
  props.isHinted && (React__default.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
@@ -28948,6 +29250,7 @@ const PasswordInput = (_a) => {
28948
29250
  React__default.createElement(e, { content: showPassword ? "Hide password" : "Show password" },
28949
29251
  React__default.createElement(o$5, { size: "1", variant: "ghost", color: "gray", onClick: toggleVisibility, type: "button", "aria-label": showPassword ? "Hide password" : "Show password" }, showPassword ? (React__default.createElement(Icon, { name: "eyeopen", height: "16", width: "16" })) : (React__default.createElement(Icon, { name: "eyeclosed", height: "16", width: "16" })))))),
28950
29252
  React__default.createElement("div", null,
29253
+ React__default.createElement("br", null),
28951
29254
  React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
28952
29255
  "\u00A0",
28953
29256
  props.isHinted && (React__default.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
@@ -30741,7 +31044,7 @@ function _objectWithoutPropertiesLoose$4(source, excluded) { if (source == null)
30741
31044
  // format={value => ({ text: value, template: 'xxxxxxxx' })}/>
30742
31045
  //
30743
31046
 
30744
- function Input(_ref, ref) {
31047
+ function Input$1(_ref, ref) {
30745
31048
  var _ref$inputComponent = _ref.inputComponent,
30746
31049
  InputComponent = _ref$inputComponent === void 0 ? 'input' : _ref$inputComponent,
30747
31050
  parse = _ref.parse,
@@ -30769,8 +31072,8 @@ function Input(_ref, ref) {
30769
31072
  return /*#__PURE__*/React__default.createElement(InputComponent, inputProps);
30770
31073
  }
30771
31074
 
30772
- Input = /*#__PURE__*/React__default.forwardRef(Input);
30773
- Input.propTypes = {
31075
+ Input$1 = /*#__PURE__*/React__default.forwardRef(Input$1);
31076
+ Input$1.propTypes = {
30774
31077
  // Parses a single characher of `<input/>` text.
30775
31078
  parse: PropTypes.func.isRequired,
30776
31079
  // Formats `value` into `<input/>` text.
@@ -35495,7 +35798,7 @@ function createInput$2(defaultMetadata) {
35495
35798
  onKeyDown: onKeyDown,
35496
35799
  inputFormat: inputFormat
35497
35800
  });
35498
- return /*#__PURE__*/React__default.createElement(Input, _extends$3({}, rest, {
35801
+ return /*#__PURE__*/React__default.createElement(Input$1, _extends$3({}, rest, {
35499
35802
  ref: ref,
35500
35803
  parse: parsePhoneNumberCharacter_,
35501
35804
  format: format,
@@ -36223,7 +36526,7 @@ function call(func, _arguments) {
36223
36526
  return func.apply(this, args)
36224
36527
  }
36225
36528
 
36226
- var PhoneInputInput = createInput(metadata$1);
36529
+ var Input = createInput(metadata$1);
36227
36530
 
36228
36531
  function getCountries() {
36229
36532
  return call(getCountries$1, arguments)
@@ -36504,7 +36807,7 @@ const PhoneInput = (_a) => {
36504
36807
  const errorId = `${alias}-error`;
36505
36808
  return (React__default.createElement(Column, { span: width, newLine: props.newRow },
36506
36809
  React__default.createElement(p$5, { direction: "column", gap: "2", style: { width: '100%' } },
36507
- React__default.createElement(u, Object.assign({ size: size, variant: "surface", id: `${alias}FormInput`, "aria-describedby": `${alias}InputLabel`, color: hasError ? "red" : undefined, className: `${variantClass} ${className || ''}` }, props, { name: alias }),
36810
+ React__default.createElement(u, Object.assign({ size: size, variant: "surface", color: hasError ? "red" : undefined, className: `${variantClass} ${className || ''}` }, props),
36508
36811
  React__default.createElement(c, { style: { padding: 0 } },
36509
36812
  React__default.createElement(C$1, { value: country, onValueChange: (value) => setCountry(value) },
36510
36813
  React__default.createElement(u$1, { variant: "ghost", style: {
@@ -36512,7 +36815,9 @@ const PhoneInput = (_a) => {
36512
36815
  padding: '0 8px 0 12px',
36513
36816
  gap: '6px',
36514
36817
  borderTopRightRadius: 0,
36515
- borderBottomRightRadius: 0
36818
+ borderBottomRightRadius: 0,
36819
+ backgroundColor: 'var(--gray-3)',
36820
+ borderRight: '1px solid var(--gray-alpha-5)'
36516
36821
  } },
36517
36822
  React__default.createElement(p$5, { align: "center", gap: "2" },
36518
36823
  React__default.createElement(FlagIcon, { country: country }),
@@ -36527,9 +36832,8 @@ const PhoneInput = (_a) => {
36527
36832
  React__default.createElement(p$d, { color: "gray", size: "1" },
36528
36833
  "(+",
36529
36834
  getCountryCallingCode(c),
36530
- ")"))))))),
36531
- React__default.createElement("div", { style: { width: '1px', height: '20px', backgroundColor: 'var(--gray-a4)', alignSelf: 'center' } })),
36532
- React__default.createElement(PhoneInputInput, { country: country, value: field.value, onChange: (val) => setFieldValue(alias, val), onBlur: () => setFieldTouched(alias, true), placeholder: placeholder, readOnly: readonly, style: {
36835
+ ")")))))))),
36836
+ React__default.createElement(Input, { country: country, defaultCountry: "US", international: true, withCountryCallingCode: false, limitMaxLength: true, value: field.value || '', onChange: (val) => setFieldValue(alias, val || ''), onBlur: () => setFieldTouched(alias, true), readOnly: readonly, placeholder: placeholder, id: `${alias}FormInput`, "aria-describedby": `${alias}InputLabel`, style: {
36533
36837
  flex: 1,
36534
36838
  border: 'none',
36535
36839
  outline: 'none',
@@ -36538,15 +36842,15 @@ const PhoneInput = (_a) => {
36538
36842
  paddingLeft: '12px',
36539
36843
  color: 'var(--gray-12)',
36540
36844
  fontFamily: 'var(--default-font-family)',
36541
- fontSize: 'var(--font-size-2)'
36845
+ fontSize: 'var(--font-size-2)',
36846
+ width: '100%'
36542
36847
  } })),
36543
36848
  React__default.createElement("div", { style: { marginTop: 4, display: 'flex', alignItems: 'center', gap: 6 } },
36544
36849
  React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
36545
- "\u00A0",
36546
36850
  props.isHinted && (React__default.createElement(e, { content: props.hintText || "No hint available" },
36547
36851
  React__default.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { display: 'flex' } },
36548
36852
  React__default.createElement(QuestionMarkCircledIcon, { height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
36549
- hasError && (React__default.createElement(p$d, { id: errorId, size: "1", color: "red", className: 'core-input-label-error' }, props.errorText || `Required field`))))));
36853
+ hasError && (React__default.createElement(p$d, { id: errorId, size: "1", color: "red", className: 'core-input-label-error' }, props.errorText || meta.error || `Required field`))))));
36550
36854
  };
36551
36855
 
36552
36856
  /** Checks if value is string */
@@ -40338,16 +40642,27 @@ const parseUuidFormat = (input) => {
40338
40642
 
40339
40643
  const UUIDInput = (_a) => {
40340
40644
  var { alias, type, inputLabel, width, delimiter = "-", format = [4, 4, 4, 4], placeholder = '', readOnly = false, inputVariant = 'input-outline', size = "2", className } = _a, props = __rest$1(_a, ["alias", "type", "inputLabel", "width", "delimiter", "format", "placeholder", "readOnly", "inputVariant", "size", "className"]);
40341
- let activeFormat = format;
40342
- if (type && type.toLowerCase().startsWith("uuid") && type.length > 4) {
40343
- activeFormat = parseUuidFormat(type) || format;
40344
- }
40345
- const maskPattern = activeFormat.map(len => '*'.repeat(len)).join(delimiter);
40346
40645
  const { setFieldValue, setFieldTouched } = useFormikContext();
40347
40646
  const [field, meta] = useField(alias);
40348
40647
  const hasError = Boolean(meta.touched && meta.error);
40349
40648
  const [copied, setCopied] = useState(false);
40350
40649
  const errorId = `${alias}-error`;
40650
+ const { maskPattern, definitions } = useMemo(() => {
40651
+ let activeFormat = format;
40652
+ if (type && type.toLowerCase().startsWith("uuid") && type.length > 4) {
40653
+ const parsed = parseUuidFormat(type);
40654
+ if (parsed)
40655
+ activeFormat = parsed;
40656
+ }
40657
+ const maskChar = '#';
40658
+ const pattern = activeFormat.map(len => maskChar.repeat(len)).join(delimiter);
40659
+ return {
40660
+ maskPattern: pattern,
40661
+ definitions: {
40662
+ '#': /[0-9a-fA-F]/
40663
+ }
40664
+ };
40665
+ }, [format, type, delimiter]);
40351
40666
  const handleCopy = () => {
40352
40667
  navigator.clipboard.writeText(field.value || '');
40353
40668
  setCopied(true);
@@ -40357,7 +40672,7 @@ const UUIDInput = (_a) => {
40357
40672
  return (React__default.createElement(Column, { span: width, newLine: props.newRow },
40358
40673
  React__default.createElement(p$5, { direction: "column", gap: "2", style: { width: '100%' } },
40359
40674
  React__default.createElement(u, Object.assign({ size: size, variant: "surface", color: hasError ? 'red' : undefined, className: `${variantClass} ${className || ''}` }, props),
40360
- React__default.createElement(IMaskInput, { id: `${alias}FormInput`, name: alias, "aria-describedby": `${alias}InputLabel`, readOnly: readOnly, mask: maskPattern, value: field.value, unmask: true, onAccept: (val) => setFieldValue(alias, val), onBlur: () => setFieldTouched(alias, true), placeholder: placeholder, style: {
40675
+ React__default.createElement(IMaskInput, { id: `${alias}FormInput`, name: alias, "aria-describedby": `${alias}InputLabel`, readOnly: readOnly, mask: maskPattern, definitions: definitions, value: field.value || '', unmask: true, onAccept: (val) => setFieldValue(alias, val), onBlur: () => setFieldTouched(alias, true), placeholder: placeholder, style: {
40361
40676
  flex: 1,
40362
40677
  border: 'none',
40363
40678
  outline: 'none',
@@ -40369,7 +40684,7 @@ const UUIDInput = (_a) => {
40369
40684
  fontSize: 'var(--font-size-2)',
40370
40685
  textTransform: 'uppercase',
40371
40686
  width: '100%'
40372
- }, autoComplete: "off" }),
40687
+ }, autoComplete: "off", spellCheck: false }),
40373
40688
  React__default.createElement(c, null,
40374
40689
  React__default.createElement(e, { content: copied ? "Copied!" : "Copy to clipboard" },
40375
40690
  React__default.createElement(o$5, { size: "1", variant: "ghost", color: copied ? "green" : "gray", onClick: handleCopy, type: "button", disabled: !field.value }, copied ? React__default.createElement(CheckIcon, null) : React__default.createElement(CopyIcon, null))))),
@@ -40379,7 +40694,7 @@ const UUIDInput = (_a) => {
40379
40694
  props.isHinted && (React__default.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
40380
40695
  React__default.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
40381
40696
  React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
40382
- hasError && (React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || `Required field`))))));
40697
+ hasError && (React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || meta.error || `Required field`))))));
40383
40698
  };
40384
40699
 
40385
40700
  var FaCcVisa = {};
@@ -41932,13 +42247,22 @@ const CURRENCIES = {
41932
42247
  };
41933
42248
 
41934
42249
  const CurrencyInput = (_a) => {
41935
- var { alias, inputtype = "currency", inputLabel, width, defaultValue, placeholder, readOnly = false, inputVariant = 'input-outline', className } = _a, props = __rest$1(_a, ["alias", "inputtype", "inputLabel", "width", "defaultValue", "placeholder", "readOnly", "inputVariant", "className"]);
42250
+ var { alias, inputtype = "currency", inputlabel, width, defaultValue = "USD", placeholder, readOnly = false, inputVariant = 'input-outline', className } = _a, props = __rest$1(_a, ["alias", "inputtype", "inputlabel", "width", "defaultValue", "placeholder", "readOnly", "inputVariant", "className"]);
41936
42251
  const { setFieldValue, setFieldTouched } = useFormikContext();
41937
42252
  const [amountField, amountMeta] = useField(alias);
41938
- const currencyFieldName = inputtype === "currency" ? "USD" : inputtype;
41939
- const [currencyField] = useField(currencyFieldName);
42253
+ const currencyAlias = `${alias}Currency`;
42254
+ const [currencyField, , currencyHelpers] = useField(currencyAlias);
42255
+ useEffect(() => {
42256
+ if (inputtype !== "currency" && CURRENCIES[inputtype]) {
42257
+ currencyHelpers.setValue(inputtype);
42258
+ }
42259
+ else if (!currencyField.value) {
42260
+ currencyHelpers.setValue(defaultValue);
42261
+ }
42262
+ }, [inputtype, defaultValue]);
41940
42263
  const hasError = Boolean(amountMeta.touched && amountMeta.error);
41941
- const activeCurrency = CURRENCIES[currencyField.value] || CURRENCIES.USD;
42264
+ const currentCode = currencyField.value || "USD";
42265
+ const activeCurrency = CURRENCIES[currentCode] || CURRENCIES.USD;
41942
42266
  const variantClass = inputVariant !== 'input-outline' ? `input-${inputVariant}` : '';
41943
42267
  const isOutline = inputVariant === 'input-outline';
41944
42268
  const errorId = `${alias}-error`;
@@ -41950,7 +42274,7 @@ const CurrencyInput = (_a) => {
41950
42274
  backgroundColor: isOutline ? 'var(--color-surface)' : undefined,
41951
42275
  cursor: 'text'
41952
42276
  } },
41953
- React__default.createElement(C$1, { value: activeCurrency.code, onValueChange: (val) => setFieldValue(currencyFieldName, val) },
42277
+ React__default.createElement(C$1, { value: activeCurrency.code, onValueChange: (val) => setFieldValue(currencyAlias, val), disabled: readOnly || inputtype !== "currency" },
41954
42278
  React__default.createElement(u$1, { variant: "ghost", style: {
41955
42279
  height: '100%',
41956
42280
  padding: '0 8px 0 12px',
@@ -41972,11 +42296,16 @@ const CurrencyInput = (_a) => {
41972
42296
  c.symbol,
41973
42297
  ")"))))))),
41974
42298
  React__default.createElement(p$d, { color: "gray", size: "2", style: { paddingLeft: '12px', userSelect: 'none' } }, activeCurrency.symbol),
41975
- React__default.createElement(IMaskInput, { id: `${alias}FormInput`, name: alias, "aria-describedby": `${alias}InputLabel`, mask: Number, scale: activeCurrency.scale, defaultValue: defaultValue, readOnly: readOnly,
41976
- // @ts-expect-error: known library type definition gap
41977
- signed: false, thousandsSeparator: ",", padFractionalZeros: true, normalizeZeros: true, radix: ".", mapToRadix: ['.'],
41978
- // Bind to Amount Field
41979
- value: amountField.value !== undefined && amountField.value !== null ? String(amountField.value) : '', unmask: true, onAccept: (val) => setFieldValue(alias, val), onBlur: () => setFieldTouched(alias, true), placeholder: placeholder || '0.00', style: {
42299
+ React__default.createElement(IMaskInput, Object.assign({ id: `${alias}FormInput`, name: alias, "aria-describedby": `${alias}InputLabel` }, {
42300
+ mask: Number,
42301
+ scale: activeCurrency.scale,
42302
+ signed: String(false),
42303
+ thousandsSeparator: ",",
42304
+ padFractionalZeros: true,
42305
+ normalizeZeros: true,
42306
+ radix: ".",
42307
+ mapToRadix: ['.'],
42308
+ }, { value: amountField.value !== undefined && amountField.value !== null ? String(amountField.value) : '', unmask: true, onAccept: (val) => setFieldValue(alias, val), onBlur: () => setFieldTouched(alias, true), readOnly: readOnly, placeholder: placeholder || '0.00', style: {
41980
42309
  flex: 1,
41981
42310
  border: 'none',
41982
42311
  outline: 'none',
@@ -41988,14 +42317,14 @@ const CurrencyInput = (_a) => {
41988
42317
  fontSize: 'var(--font-size-2)',
41989
42318
  textAlign: 'right',
41990
42319
  width: '100%'
41991
- }, inputMode: "decimal", autoComplete: "off" })),
42320
+ }, inputMode: "decimal", autoComplete: "off" }))),
41992
42321
  React__default.createElement("div", null,
41993
- React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel),
42322
+ React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
41994
42323
  "\u00A0",
41995
42324
  props.isHinted && (React__default.createElement(e, { content: props.hintText || "No hint available" },
41996
42325
  React__default.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { display: 'flex' } },
41997
42326
  React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
41998
- hasError && (React__default.createElement(p$d, { id: errorId, size: "1", color: "red", className: 'core-input-label-error' }, props.errorText || `Required field`))))));
42327
+ hasError && (React__default.createElement(p$d, { id: errorId, size: "1", color: "red", className: 'core-input-label-error' }, props.errorText || amountMeta.error || `Required field`))))));
41999
42328
  };
42000
42329
 
42001
42330
  var FaChartLine = {};
@@ -42016,7 +42345,7 @@ function requireFaChartLine () {
42016
42345
  var FaChartLineExports = /*@__PURE__*/ requireFaChartLine();
42017
42346
 
42018
42347
  const StockInput = (_a) => {
42019
- var { alias, inputLabel, width, defaultValue, placeholder, readOnly = false, inputVariant = 'input-outline', className } = _a, props = __rest$1(_a, ["alias", "inputLabel", "width", "defaultValue", "placeholder", "readOnly", "inputVariant", "className"]);
42348
+ var { alias, inputlabel, width, defaultValue, placeholder, readOnly = false, inputVariant = 'input-outline', className } = _a, props = __rest$1(_a, ["alias", "inputlabel", "width", "defaultValue", "placeholder", "readOnly", "inputVariant", "className"]);
42020
42349
  const { setFieldValue, setFieldTouched } = useFormikContext();
42021
42350
  const [priceField, meta] = useField(alias);
42022
42351
  const hasError = Boolean(meta.touched && meta.error);
@@ -42064,7 +42393,7 @@ const StockInput = (_a) => {
42064
42393
  fontFamily: 'var(--default-font-family)',
42065
42394
  }, inputMode: "decimal", autoComplete: "off" }))),
42066
42395
  React__default.createElement("div", null,
42067
- React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel),
42396
+ React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
42068
42397
  "\u00A0",
42069
42398
  props.isHinted && (React__default.createElement(e, { content: props.hintText || "No hint available" },
42070
42399
  React__default.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { display: 'flex' } },
@@ -42073,7 +42402,7 @@ const StockInput = (_a) => {
42073
42402
  };
42074
42403
 
42075
42404
  const RadioGroupInput = (_a) => {
42076
- var { inputtype = 'radio-outline', alias, readOnly, width, inputLabel, placeholder = '', style, inputoptions, direction = 'column', columns, className } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "placeholder", "style", "inputoptions", "direction", "columns", "className"]);
42405
+ var { inputtype = 'radio-outline', alias, readOnly, width, inputlabel, placeholder = '', style, inputoptions, direction = 'column', columns, className } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputlabel", "placeholder", "style", "inputoptions", "direction", "columns", "className"]);
42077
42406
  const { setFieldValue, setFieldTouched } = useFormikContext();
42078
42407
  const [field, meta] = useField(alias);
42079
42408
  const hasError = Boolean(meta.touched && meta.error);
@@ -42142,19 +42471,20 @@ const RadioGroupInput = (_a) => {
42142
42471
  React__default.createElement("span", { style: { userSelect: 'none' } }, inputoption.text))));
42143
42472
  }))),
42144
42473
  React__default.createElement("div", null,
42145
- React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel),
42146
- hasError ?
42147
- React__default.createElement(React__default.Fragment, null,
42148
- React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || `Required field`)) : null,
42474
+ React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
42475
+ "\u00A0",
42149
42476
  props.isHinted ?
42150
42477
  React__default.createElement(React__default.Fragment, null,
42151
42478
  React__default.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
42152
42479
  React__default.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
42153
- React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null))));
42480
+ React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
42481
+ hasError ?
42482
+ React__default.createElement(React__default.Fragment, null,
42483
+ React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || `Required field`)) : null))));
42154
42484
  };
42155
42485
 
42156
42486
  const OptionSelect = (_a) => {
42157
- var { inputtype = 'select-outline', alias, readOnly, width, inputLabel, placeholder = '', style, inputoptions, className } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "placeholder", "style", "inputoptions", "className"]);
42487
+ var { inputtype = 'dropdown-outline', alias, readonly, width, inputlabel, placeholder, value, inputoptions, style, newRow, isHinted, hintText, hintUrl, defaultValue, errorText } = _a, props = __rest$1(_a, ["inputtype", "alias", "readonly", "width", "inputlabel", "placeholder", "value", "inputoptions", "style", "newRow", "isHinted", "hintText", "hintUrl", "defaultValue", "errorText"]);
42158
42488
  const triggerRef = useRef(null);
42159
42489
  const [neuVars, setNeuVars] = useState({});
42160
42490
  const { setFieldValue, setFieldTouched } = useFormikContext();
@@ -42162,7 +42492,7 @@ const OptionSelect = (_a) => {
42162
42492
  const hasError = Boolean(meta.touched && meta.error);
42163
42493
  const errorId = `${alias}-error`;
42164
42494
  useEffect(() => {
42165
- if (inputtype === 'select-neumorphic' && triggerRef.current) {
42495
+ if (inputtype === 'dropdown-neumorphic' && triggerRef.current) {
42166
42496
  const parentBg = getNearestParentBackground(triggerRef.current.parentElement);
42167
42497
  const shadowDark = adjustColor(parentBg, -30);
42168
42498
  const shadowLight = adjustColor(parentBg, 30);
@@ -42174,25 +42504,37 @@ const OptionSelect = (_a) => {
42174
42504
  });
42175
42505
  }
42176
42506
  }, [inputtype]);
42507
+ const openLink = (inputUrl) => {
42508
+ window.open(inputUrl, '_blank', 'noopener,noreferrer');
42509
+ };
42177
42510
  // --- STYLES ---
42178
42511
  const materialTrigger = {
42179
42512
  backgroundColor: 'var(--color-surface)',
42180
- border: hasError ? '1px solid var(--red-9)' : 'none',
42513
+ border: 'none',
42181
42514
  boxShadow: '0 2px 5px rgba(0,0,0,0.1)',
42182
42515
  borderRadius: '4px',
42183
42516
  height: '32px',
42184
42517
  fontWeight: 500,
42185
42518
  };
42519
+ const materialContent = {
42520
+ borderRadius: '4px',
42521
+ boxShadow: '0 5px 15px rgba(0,0,0,0.2)',
42522
+ };
42186
42523
  const outlineTrigger = {
42187
42524
  backgroundColor: 'transparent',
42188
- border: hasError ? '2px solid var(--red-9)' : '2px solid var(--gray-7)',
42525
+ border: '2px solid var(--gray-7)',
42189
42526
  borderRadius: '4px',
42190
42527
  height: '32px',
42191
42528
  fontWeight: 600,
42192
42529
  };
42530
+ const outlineContent = {
42531
+ border: '2px solid var(--gray-7)',
42532
+ borderRadius: '4px',
42533
+ boxShadow: 'none',
42534
+ };
42193
42535
  const neumorphicTrigger = {
42194
42536
  backgroundColor: 'var(--neu-bg)',
42195
- color: hasError ? 'var(--red-9)' : 'var(--neu-text)',
42537
+ color: 'var(--neu-text)',
42196
42538
  border: 'none',
42197
42539
  borderRadius: '12px',
42198
42540
  height: '40px',
@@ -42201,46 +42543,63 @@ const OptionSelect = (_a) => {
42201
42543
  boxShadow: '6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light)',
42202
42544
  transition: 'all 0.2s ease',
42203
42545
  };
42204
- const activeTriggerStyle = inputtype === 'select' ? materialTrigger :
42205
- inputtype === 'select-material' ? materialTrigger :
42206
- inputtype === 'select-outline' ? outlineTrigger : Object.assign(Object.assign({}, neumorphicTrigger), neuVars);
42207
- return (React__default.createElement(Column, { span: width, newLine: props.newRow },
42546
+ const neumorphicContent = {
42547
+ backgroundColor: 'var(--neu-bg)',
42548
+ borderRadius: '12px',
42549
+ border: 'none',
42550
+ boxShadow: '6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light)',
42551
+ };
42552
+ const activeTriggerStyle = inputtype === 'dropdown' ? materialTrigger :
42553
+ inputtype === 'dropdown-material' ? materialTrigger :
42554
+ inputtype === 'dropdown-outline' ? outlineTrigger : Object.assign(Object.assign({}, neumorphicTrigger), neuVars);
42555
+ const activeContentStyle = inputtype === 'dropdown' ? materialContent :
42556
+ inputtype === 'dropdown-material' ? materialContent :
42557
+ inputtype === 'dropdown-outline' ? outlineContent : Object.assign(Object.assign({}, neumorphicContent), neuVars);
42558
+ return (React__default.createElement(Column, { span: width, newLine: newRow },
42208
42559
  React__default.createElement(p$5, { direction: "column", gap: "2", style: { width: '100%' } },
42209
- inputtype === 'select-neumorphic' && (React__default.createElement("style", { dangerouslySetInnerHTML: { __html: `
42210
- .neu-select-trigger[data-state='open'] {
42211
- box-shadow: inset 6px 6px 12px var(--neu-shadow-dark),
42212
- inset -6px -6px 12px var(--neu-shadow-light) !important;
42213
- }
42214
- .neu-select-item:hover {
42215
- background-color: rgba(0,0,0,0.05) !important;
42216
- cursor: pointer;
42217
- }
42218
- ` } })),
42219
- React__default.createElement(C$1, { name: alias, disabled: readOnly, "aria-describedby": `${alias}InputLabel`, defaultValue: props.defaultValue, value: field.value, onValueChange: (val) => {
42220
- setFieldValue(alias, val);
42560
+ inputtype === 'dropdown-neumorphic' && (React__default.createElement("style", { dangerouslySetInnerHTML: { __html: `
42561
+ .neu-select-trigger[data-state='open'] {
42562
+ box-shadow: inset 6px 6px 12px var(--neu-shadow-dark),
42563
+ inset -6px -6px 12px var(--neu-shadow-light) !important;
42564
+ }
42565
+ .neu-select-item:hover {
42566
+ background-color: rgba(0,0,0,0.05) !important;
42567
+ cursor: pointer;
42568
+ }
42569
+ ` } })),
42570
+ React__default.createElement(C$1, { name: alias, disabled: readonly, value: field.value || "", onValueChange: (val) => {
42571
+ const finalVal = val === "__RESET__" ? "" : val;
42572
+ setFieldValue(alias, finalVal);
42221
42573
  setTimeout(() => setFieldTouched(alias, true), 0);
42574
+ if (props.onValueChange)
42575
+ props.onValueChange(finalVal);
42222
42576
  }, onOpenChange: (isOpen) => {
42223
42577
  if (!isOpen) {
42224
42578
  setFieldTouched(alias, true);
42225
42579
  }
42226
42580
  } },
42227
- React__default.createElement(u$1, { id: `${alias}FormInput`, ref: triggerRef, variant: "ghost", placeholder: placeholder, className: `${inputtype === 'select-neumorphic' ? 'neu-select-trigger' : ''} ${className || ''}`, style: Object.assign(Object.assign({}, activeTriggerStyle), style) }),
42228
- React__default.createElement(g, { position: "popper", sideOffset: 5 }, inputoptions.map((option) => (React__default.createElement(v, { id: String(option.optionid) || '', key: option.optionid, value: option.optionvalue, className: inputtype === 'select-neumorphic' ? 'neu-select-item' : '' }, option.text))))),
42581
+ React__default.createElement(u$1, Object.assign({ id: `${alias}FormInput`, ref: triggerRef, variant: "ghost", placeholder: placeholder || "Select an option", className: `${inputtype === 'dropdown-neumorphic' ? 'neu-select-trigger' : ''} ${props.className || ''}`, style: Object.assign(Object.assign({}, activeTriggerStyle), style) }, props)),
42582
+ React__default.createElement(g, { position: "popper", sideOffset: 5, style: activeContentStyle },
42583
+ React__default.createElement(v, { value: "__RESET__", className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '', style: { color: 'var(--gray-10)', fontStyle: 'italic' } }, placeholder || "Select an option"),
42584
+ React__default.createElement(o$2, { size: "4", style: { margin: '4px 0', opacity: 0.5 } }),
42585
+ inputoptions.map((inputoption) => (React__default.createElement(React__default.Fragment, { key: inputoption.optionid || crypto.randomUUID() }, inputoption.optionurl ? (React__default.createElement(v, { id: String(inputoption.optionid) || '', value: inputoption.optionvalue, className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '' },
42586
+ React__default.createElement("a", { onClick: (e) => { e.stopPropagation(); openLink(inputoption.optionurl || "#"); }, style: { textDecoration: 'none', color: 'inherit' } }, inputoption.text))) : (React__default.createElement(v, { id: String(inputoption.optionid) || '', value: inputoption.optionvalue, className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '' }, inputoption.text))))))),
42229
42587
  React__default.createElement("div", null,
42230
- React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel),
42231
- hasError ?
42588
+ React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
42589
+ "\u00A0",
42590
+ isHinted ?
42232
42591
  React__default.createElement(React__default.Fragment, null,
42233
- React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || `Required field`)) : null,
42234
- props.isHinted ?
42592
+ React__default.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
42593
+ React__default.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
42594
+ React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
42595
+ hasError ?
42235
42596
  React__default.createElement(React__default.Fragment, null,
42236
- React__default.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
42237
- React__default.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
42238
- React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null))));
42597
+ React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, errorText || meta.error || "Required field")) : null))));
42239
42598
  };
42240
42599
 
42241
42600
  const MultipleSelect = (_a) => {
42242
42601
  var _b;
42243
- var { inputtype = 'multiselect-outline', alias, readOnly, width, inputLabel, placeholder = '', style, inputoptions, className } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "placeholder", "style", "inputoptions", "className"]);
42602
+ var { inputtype = 'multiselect-outline', alias, readOnly, width, inputlabel, placeholder = '', style, inputoptions, className } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputlabel", "placeholder", "style", "inputoptions", "className"]);
42244
42603
  const { setFieldValue, setFieldTouched } = useFormikContext();
42245
42604
  const [field, meta] = useField(alias);
42246
42605
  const selectedValues = (Array.isArray(field.value) ? field.value : []);
@@ -42325,19 +42684,20 @@ const MultipleSelect = (_a) => {
42325
42684
  React__default.createElement(p$d, { size: "2" }, inputoption.text)));
42326
42685
  })))))),
42327
42686
  React__default.createElement("div", null,
42328
- React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel),
42329
- hasError ?
42330
- React__default.createElement(React__default.Fragment, null,
42331
- React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || `Required field`)) : null,
42687
+ React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
42688
+ "\u00A0",
42332
42689
  props.isHinted ?
42333
42690
  React__default.createElement(React__default.Fragment, null,
42334
42691
  React__default.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
42335
42692
  React__default.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
42336
- React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null))));
42693
+ React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
42694
+ hasError ?
42695
+ React__default.createElement(React__default.Fragment, null,
42696
+ React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || `Required field`)) : null))));
42337
42697
  };
42338
42698
 
42339
42699
  const SliderInput = (_a) => {
42340
- var { inputtype = 'slider-outline', alias, readOnly, width, inputLabel, placeholder = '', minvalue = 0, maxvalue = 100, stepvalue = 1, className, style } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "placeholder", "minvalue", "maxvalue", "stepvalue", "className", "style"]);
42700
+ var { inputtype = 'slider-outline', alias, readOnly, width, inputlabel, placeholder = '', minvalue = 0, maxvalue = 100, stepvalue = 1, className, style } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputlabel", "placeholder", "minvalue", "maxvalue", "stepvalue", "className", "style"]);
42341
42701
  const { setFieldValue, setFieldTouched } = useFormikContext();
42342
42702
  const [field, meta] = useField(alias);
42343
42703
  const fieldValue = Array.isArray(field.value) ? field.value : [field.value || minvalue];
@@ -42424,15 +42784,16 @@ const SliderInput = (_a) => {
42424
42784
  setFieldTouched(alias, true);
42425
42785
  }, className: inputtype === 'slider-neumorphic' ? 'neu-slider' : inputtype === 'slider-outline' ? 'outline-slider' : '', style: neuVars }),
42426
42786
  React__default.createElement("div", null,
42427
- React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel),
42428
- hasError ?
42429
- React__default.createElement(React__default.Fragment, null,
42430
- React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || `Required field`)) : null,
42787
+ React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
42788
+ "\u00A0",
42431
42789
  props.isHinted ?
42432
42790
  React__default.createElement(React__default.Fragment, null,
42433
42791
  React__default.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
42434
42792
  React__default.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
42435
- React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null))));
42793
+ React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
42794
+ hasError ?
42795
+ React__default.createElement(React__default.Fragment, null,
42796
+ React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || `Required field`)) : null))));
42436
42797
  };
42437
42798
 
42438
42799
  const RangeSlider = (_a) => {
@@ -42504,39 +42865,40 @@ const RangeSlider = (_a) => {
42504
42865
  }, onValueCommit: () => setFieldTouched(alias, true), className: inputtype === 'range-neumorphic' ? 'neu-slider' : inputtype === 'range-outline' ? 'outline-slider' : '', style: neuVars }),
42505
42866
  React__default.createElement("div", null,
42506
42867
  React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
42507
- hasError ?
42508
- React__default.createElement(React__default.Fragment, null,
42509
- React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || `Required field`)) : null,
42868
+ "\u00A0",
42510
42869
  props.isHinted ?
42511
42870
  React__default.createElement(React__default.Fragment, null,
42512
42871
  React__default.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
42513
42872
  React__default.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
42514
- React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null))));
42873
+ React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
42874
+ hasError ?
42875
+ React__default.createElement(React__default.Fragment, null,
42876
+ React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || `Required field`)) : null))));
42515
42877
  };
42516
42878
 
42517
42879
  const Toggle = (_a) => {
42518
- var { inputtype = 'toggle-outline', alias, readOnly, width, inputLabel, style, children, newRow, isHinted, hintText, hintUrl } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "style", "children", "newRow", "isHinted", "hintText", "hintUrl"]);
42880
+ var { inputtype = 'toggle-neumorphic', alias, readOnly, width, inputLabel, style, children, newRow, isHinted, hintText, hintUrl, icon = 'stack' } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "style", "children", "newRow", "isHinted", "hintText", "hintUrl", "icon"]);
42519
42881
  const { setFieldValue, setFieldTouched } = useFormikContext();
42520
42882
  const [field, meta] = useField(alias);
42521
42883
  const hasError = Boolean(meta.touched && meta.error);
42522
- const buttonRef = useRef(null);
42523
- const [neumorphicVars, setNeumorphicVars] = useState({});
42524
- const errorId = `${alias}-error`;
42884
+ const containerRef = useRef(null);
42885
+ const [neuVars, setNeuVars] = useState({
42886
+ '--neu-bg': '#ecf0f3',
42887
+ '--neu-shadow-light': '#ffffff',
42888
+ '--neu-shadow-dark': '#d1d9e6'
42889
+ });
42525
42890
  useEffect(() => {
42526
- if (inputtype === 'toggle-neumorphic' && buttonRef.current) {
42527
- const parentBg = getNearestParentBackground(buttonRef.current.parentElement);
42528
- const shadowDark = adjustColor(parentBg, -30);
42529
- const shadowLight = adjustColor(parentBg, 30);
42530
- setNeumorphicVars({
42531
- '--neu-bg': parentBg,
42532
- '--neu-shadow-dark': shadowDark,
42533
- '--neu-shadow-light': shadowLight,
42534
- '--neu-text': 'var(--gray-12)',
42535
- '--neu-active-color': 'var(--accent-9)',
42536
- });
42891
+ if (inputtype === 'toggle-neumorphic' && containerRef.current) {
42892
+ const parentBg = getNearestParentBackground(containerRef.current.parentElement);
42893
+ if (parentBg && parentBg !== 'transparent') {
42894
+ setNeuVars({
42895
+ '--neu-bg': parentBg,
42896
+ '--neu-shadow-dark': adjustColor(parentBg, -20),
42897
+ '--neu-shadow-light': adjustColor(parentBg, 20),
42898
+ });
42899
+ }
42537
42900
  }
42538
42901
  }, [inputtype]);
42539
- // --- STYLES ---
42540
42902
  const materialStyle = {
42541
42903
  textTransform: 'uppercase',
42542
42904
  letterSpacing: '0.05em',
@@ -42549,86 +42911,108 @@ const Toggle = (_a) => {
42549
42911
  background: 'transparent',
42550
42912
  transition: 'all 0.1s ease',
42551
42913
  };
42552
- const neumorphicStyle = {
42553
- backgroundColor: 'var(--neu-bg)',
42554
- color: 'var(--neu-text)',
42555
- border: 'none',
42556
- borderRadius: '12px',
42557
- fontWeight: 600,
42558
- transition: 'all 0.2s ease-in-out',
42914
+ const handleToggle = (val) => {
42915
+ if (!readOnly) {
42916
+ setFieldValue(alias, val);
42917
+ setFieldTouched(alias, true);
42918
+ }
42559
42919
  };
42560
42920
  return (React__default.createElement(Column, { span: width, newLine: newRow },
42561
- React__default.createElement(Root$1, { pressed: field.value, onPressedChange: (val) => {
42562
- if (!readOnly) {
42563
- setFieldValue(alias, val);
42564
- setFieldTouched(alias, true);
42565
- }
42566
- }, name: alias, disabled: readOnly, id: `${alias}FormInput`, "aria-describedby": `${alias}InputLabel`, asChild: true },
42567
- React__default.createElement(o$a, Object.assign({ disabled: readOnly, ref: buttonRef }, props, { className: `design-toggle ${inputtype} ${props.className || ''}`, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, style), (inputtype === 'toggle' ? materialStyle : {})), (inputtype === 'toggle-material' ? materialStyle : {})), (inputtype === 'toggle-outline' ? outlineStyle : {})), (inputtype === 'toggle-neumorphic' ? Object.assign(Object.assign({}, neumorphicStyle), neumorphicVars) : {})), type: "button" }),
42921
+ React__default.createElement("div", { ref: containerRef, style: { width: '100%', display: 'flex', flexDirection: 'column', gap: '4px' } },
42922
+ inputtype === 'toggle-neumorphic' ? (React__default.createElement("div", { className: "neu-toggle-wrapper", style: Object.assign(Object.assign({}, neuVars), { opacity: readOnly ? 0.6 : 1, pointerEvents: readOnly ? 'none' : 'auto' }), onClick: () => handleToggle(!field.value) },
42568
42923
  React__default.createElement("style", { dangerouslySetInnerHTML: { __html: `
42569
- /* --- MATERIAL --- */
42570
- .design-toggle.toggle-material[data-state='on'] {
42571
- background-color: var(--accent-9);
42572
- color: white;
42573
- box-shadow: 0 2px 5px rgba(0,0,0,0.2);
42574
- }
42575
- .design-toggle.toggle-material[data-state='off'] {
42576
- background-color: var(--gray-3);
42577
- color: var(--gray-11);
42578
- }
42579
-
42580
- /* --- OUTLINE --- */
42581
- .design-toggle.toggle-outline[data-state='on'] {
42582
- border: 2px solid var(--accent-9);
42583
- color: var(--accent-9);
42584
- background-color: var(--accent-2);
42585
- }
42586
- .design-toggle.toggle-outline[data-state='off'] {
42587
- border: 1px solid var(--gray-7);
42588
- color: var(--gray-11);
42589
- }
42924
+ .neu-toggle-wrapper {
42925
+ isolation: isolate;
42926
+ position: relative;
42927
+ height: 30px;
42928
+ width: 60px;
42929
+ border-radius: 15px;
42930
+ overflow: hidden;
42931
+ cursor: pointer;
42932
+ background: var(--neu-bg);
42933
+ box-shadow:
42934
+ -8px -4px 8px 0px var(--neu-shadow-light),
42935
+ 8px 4px 12px 0px var(--neu-shadow-dark),
42936
+ 4px 4px 4px 0px var(--neu-shadow-dark) inset,
42937
+ -4px -4px 4px 0px var(--neu-shadow-light) inset;
42938
+ }
42939
+
42940
+ /* The Input is hidden visually but keeps state for CSS selector */
42941
+ .neu-toggle-state {
42942
+ display: none;
42943
+ }
42590
42944
 
42591
- /* --- NEUMORPHIC --- */
42592
- .design-toggle.toggle-neumorphic[data-state='off'] {
42593
- box-shadow: 6px 6px 12px var(--neu-shadow-dark),
42594
- -6px -6px 12px var(--neu-shadow-light);
42595
- }
42596
- .design-toggle.toggle-neumorphic[data-state='on'] {
42597
- box-shadow: inset 6px 6px 12px var(--neu-shadow-dark),
42598
- inset -6px -6px 12px var(--neu-shadow-light);
42599
- color: var(--neu-active-color);
42600
- }
42601
- .design-toggle.toggle-neumorphic:hover {
42602
- transform: translateY(-1px);
42603
- }
42604
- ` } }),
42605
- children)),
42606
- React__default.createElement("div", null,
42607
- inputLabel && (React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel)),
42608
- isHinted && (React__default.createElement(e, { content: hintText || "No hint available" },
42609
- React__default.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { marginLeft: 6 } },
42610
- React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
42611
- hasError && (React__default.createElement(p$d, { id: errorId, size: "1", color: "red", style: { display: 'block', marginTop: 2 } }, props.errorText || `Required field`)))));
42612
- };
42945
+ .neu-indicator {
42946
+ height: 100%;
42947
+ width: 200%;
42948
+ background: var(--neu-bg);
42949
+ border-radius: 15px;
42950
+ transform: translate3d(-75%, 0, 0);
42951
+ transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35);
42952
+ box-shadow:
42953
+ -8px -4px 8px 0px var(--neu-shadow-light),
42954
+ 8px 4px 12px 0px var(--neu-shadow-dark);
42955
+ }
42613
42956
 
42614
- const Row = ({ children, className, gap = "4" }) => {
42615
- return (React__default.createElement(o$6, { columns: "12", gap: gap, width: "auto", className: className }, children));
42957
+ /* Sibling selector triggers animation when checked */
42958
+ .neu-toggle-state:checked ~ .neu-indicator {
42959
+ transform: translate3d(25%, 0, 0);
42960
+ }
42961
+ ` } }),
42962
+ React__default.createElement("input", { className: "neu-toggle-state", type: "checkbox", checked: !!field.value, readOnly: true }),
42963
+ React__default.createElement("div", { className: "neu-indicator" }),
42964
+ React__default.createElement(Icon, { name: icon }))) : (React__default.createElement(Root$1, { pressed: field.value, onPressedChange: handleToggle, name: alias, disabled: readOnly, id: `${alias}FormInput`, "aria-describedby": `${alias}InputLabel`, asChild: true },
42965
+ React__default.createElement(o$a, Object.assign({ disabled: readOnly }, props, { className: `design-toggle ${inputtype} ${props.className || ''}`, style: Object.assign(Object.assign(Object.assign(Object.assign({}, style), (inputtype === 'toggle' ? materialStyle : {})), (inputtype === 'toggle-material' ? materialStyle : {})), (inputtype === 'toggle-outline' ? outlineStyle : {})), type: "button" }),
42966
+ React__default.createElement("style", { dangerouslySetInnerHTML: { __html: `
42967
+ /* Material States */
42968
+ .design-toggle.toggle-material[data-state='on'] {
42969
+ background-color: var(--accent-9);
42970
+ color: white;
42971
+ box-shadow: 0 2px 5px rgba(0,0,0,0.2);
42972
+ }
42973
+ .design-toggle.toggle-material[data-state='off'] {
42974
+ background-color: var(--gray-3);
42975
+ color: var(--gray-11);
42976
+ }
42977
+ /* Outline States */
42978
+ .design-toggle.toggle-outline[data-state='on'] {
42979
+ border: 2px solid var(--accent-9);
42980
+ color: var(--accent-9);
42981
+ background-color: var(--accent-2);
42982
+ }
42983
+ .design-toggle.toggle-outline[data-state='off'] {
42984
+ border: 1px solid var(--gray-7);
42985
+ color: var(--gray-11);
42986
+ }
42987
+ ` } }),
42988
+ children))),
42989
+ React__default.createElement("div", null,
42990
+ inputLabel && (React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel)),
42991
+ "\u00A0",
42992
+ isHinted && (React__default.createElement(e, { content: hintText || "No hint available" },
42993
+ React__default.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { marginLeft: 6 } },
42994
+ React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
42995
+ hasError && (React__default.createElement(p$d, { size: "1", color: "red", style: { display: 'block', marginTop: 2 } }, props.errorText || `Required field`))))));
42616
42996
  };
42617
42997
 
42618
- const SectionTitle = (_a) => {
42619
- var { title, iconname, textColor = "#FFFFFF", backgroundColor = "#000000", fontFamily } = _a, props = __rest$1(_a, ["title", "iconname", "textColor", "backgroundColor", "fontFamily"]);
42620
- return (React__default.createElement(React__default.Fragment, null,
42621
- React__default.createElement(Row, null,
42622
- React__default.createElement(Column, { span: 12, newLine: true },
42623
- React__default.createElement("div", { id: "", style: { backgroundColor: backgroundColor }, className: 'core-input-section-ribbon' },
42624
- React__default.createElement("p", { style: { color: textColor, fontFamily: fontFamily ? fontFamily : 'inherit' }, className: 'core-input-section-text' },
42625
- React__default.createElement(Icon, { name: iconname || "input" }),
42626
- "\u00A0",
42627
- title),
42628
- props.subTitle ?
42629
- React__default.createElement(React__default.Fragment, null,
42630
- React__default.createElement("p", { style: { color: textColor, fontFamily: fontFamily ? fontFamily : 'inherit' }, className: 'core-input-section-text' }, props.subTitle))
42631
- : null)))));
42998
+ const SectionTitle = ({ title, width = 12, newRow = true, size = "5", subsize = "2", subtitle, align = "left", withSeparator = true, className }) => {
42999
+ return (React__default.createElement(Column, { span: width, newLine: newRow },
43000
+ React__default.createElement(p$5, { direction: "column", gap: "2", className: className, style: {
43001
+ width: '100%',
43002
+ marginBottom: 'var(--space-2)',
43003
+ textAlign: align
43004
+ } },
43005
+ React__default.createElement(r$g, { size: size, weight: "bold", style: {
43006
+ width: '100%',
43007
+ color: 'var(--gray-12)',
43008
+ lineHeight: '1.2'
43009
+ } }, title),
43010
+ subtitle && (React__default.createElement(p$d, { size: subsize, color: "gray", style: { maxWidth: '80%', margin: align === 'center' ? '0 auto' : undefined } }, subtitle)),
43011
+ withSeparator && (React__default.createElement(o$2, { size: "4", style: {
43012
+ width: '100%',
43013
+ marginTop: '4px',
43014
+ backgroundColor: 'var(--gray-6)'
43015
+ } })))));
42632
43016
  };
42633
43017
 
42634
43018
  const Container = (_a) => {
@@ -42639,6 +43023,10 @@ const Container = (_a) => {
42639
43023
  return (React__default.createElement(p$2, Object.assign({ size: "3", px: "3" }, props), children));
42640
43024
  };
42641
43025
 
43026
+ const Row = ({ children, className, gap = "4" }) => {
43027
+ return (React__default.createElement(o$6, { columns: "12", gap: gap, width: "auto", className: className }, children));
43028
+ };
43029
+
42642
43030
  /** A special constant with type `never` */
42643
43031
  function $constructor(name, initializer, params) {
42644
43032
  function init(inst, def) {
@@ -47138,4 +47526,4 @@ const xFormSchema = object({
47138
47526
  model: array(SectionSchema),
47139
47527
  });
47140
47528
 
47141
- export { AvatarInput, ButtonInput, CURRENCIES, CheckboxGroupInput, Column, ConditionalTrigger, Container, CreditCardInput, CurrencyInput, DatePicker, DateRangePicker, DateTimePicker, Dropdown, File$1 as File, FileMultiple, FlagIcon, Icon, ImageOutput, Input$1 as Input, MultipleSelect, OptionSelect, PasswordInput, PhoneInput, RadioGroupInput, RangeSlider, Row, SectionTitle, SliderInput, StockInput, R as Theme, N as ThemePanel, Toggle, UUIDInput, parseUuidFormat, primeMatrix, vectorSigma, xFormSchema };
47529
+ export { AvatarInput, ButtonInput, CURRENCIES, CheckboxGroupInput, Column, ConditionalTrigger, Container, CreditCardInput, CurrencyInput, DatePicker, DateRangePicker, DateTimePicker, Dropdown, File$1 as File, FileMultiple, FlagIcon, Icon, ImageOutput, Input$2 as Input, MultipleSelect, OptionSelect, PasswordInput, PhoneInput, RadioGroupInput, RangeSlider, Row, SectionTitle, SliderInput, StockInput, R as Theme, N as ThemePanel, Toggle, UUIDInput, parseUuidFormat, primeMatrix, vectorSigma, xFormSchema };