@emeraldemperaur/vector-sigma 1.4.5 → 1.4.6

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 (12) hide show
  1. package/lib/index.cjs +683 -319
  2. package/lib/index.esm.js +683 -319
  3. package/lib/types/components/conditional/conditional.d.ts +2 -2
  4. package/lib/types/components/inputcurrency/inputcurrency.d.ts +3 -3
  5. package/lib/types/components/inputcurrency/stockInput.d.ts +2 -2
  6. package/lib/types/components/radio/radio.d.ts +2 -2
  7. package/lib/types/components/select/select.d.ts +2 -2
  8. package/lib/types/components/selectmultiple/selectmultiple.d.ts +2 -2
  9. package/lib/types/components/slider/slider.d.ts +2 -2
  10. package/lib/types/components/toggle/toggle.d.ts +2 -1
  11. package/lib/types/components/xtitle/xtitle.d.ts +10 -9
  12. package/package.json +1 -1
package/lib/index.cjs CHANGED
@@ -12520,7 +12520,7 @@ const getDesignStyles = (inputtype, isOpen) => {
12520
12520
  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)' });
12521
12521
  };
12522
12522
  const ConditionalTrigger = (_a) => {
12523
- 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"]);
12523
+ 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"]);
12524
12524
  const [field, meta, helpers] = formik.useField(alias);
12525
12525
  const { setTouched } = formik.useFormikContext();
12526
12526
  const inputId = `${alias}FormInput` || crypto.randomUUID();
@@ -12537,16 +12537,16 @@ const ConditionalTrigger = (_a) => {
12537
12537
  switch (true) {
12538
12538
  case inputtype.includes('conditionalcheckbox'):
12539
12539
  return (React.createElement(p$5, { align: "center", gap: "2", style: { cursor: 'pointer' } },
12540
- React.createElement(c$2, { name: alias, disabled: readOnly, checked: field.value === true, onCheckedChange: (checked) => handleChange(!!checked), id: inputId })));
12540
+ React.createElement(c$2, { name: alias, disabled: readonly, checked: field.value === true, onCheckedChange: (checked) => handleChange(!!checked), id: inputId })));
12541
12541
  case inputtype.includes('conditionalselect'):
12542
12542
  return (React.createElement(p$5, { direction: "column", gap: "1", style: { width: '100%' } },
12543
- React.createElement(C$1, { name: alias, disabled: readOnly, value: field.value, defaultValue: placeholder || String(value) || "", onValueChange: handleChange },
12543
+ React.createElement(C$1, { name: alias, disabled: readonly, value: field.value, defaultValue: placeholder || String(value) || "", onValueChange: handleChange },
12544
12544
  React.createElement(u$1, { id: inputId, variant: isNeumorphic ? 'soft' : 'surface', style: { width: '100%' } }),
12545
12545
  React.createElement(g, null, inputoptions.map((inputoption) => (React.createElement(v, { key: inputoption.optionvalue || crypto.randomUUID(), value: inputoption.optionvalue }, inputoption.text)))))));
12546
12546
  case inputtype.includes('conditionaltoggle'):
12547
12547
  default:
12548
12548
  return (React.createElement(p$5, { justify: "between", align: "center", style: { width: '100%' } },
12549
- React.createElement(i$1, { id: inputId, name: alias, disabled: readOnly, checked: field.value === true, onCheckedChange: (checked) => handleChange(!!checked), variant: isNeumorphic ? 'soft' : 'surface' })));
12549
+ React.createElement(i$1, { id: inputId, name: alias, disabled: readonly, checked: field.value === true, onCheckedChange: (checked) => handleChange(!!checked), variant: isNeumorphic ? 'soft' : 'surface' })));
12550
12550
  }
12551
12551
  };
12552
12552
  const containerStyle = getDesignStyles(inputtype, isOpen);
@@ -20853,10 +20853,12 @@ const DatePicker = (_a) => {
20853
20853
  const { setFieldValue, setFieldTouched } = formik.useFormikContext();
20854
20854
  const [field, meta] = formik.useField(alias);
20855
20855
  const hasError = Boolean(meta.touched && meta.error);
20856
- const selectedDate = field.value ? (typeof field.value === 'string' ? parseISO(field.value) : field.value) : undefined;
20856
+ const selectedDate = field.value
20857
+ ? (typeof field.value === 'string' ? parseISO(field.value) : field.value)
20858
+ : undefined;
20857
20859
  const parsedMin = ensureDate(minvalue);
20858
20860
  const parsedMax = ensureDate(maxvalue);
20859
- const inputId = `${alias}FormInput` || crypto.randomUUID();
20861
+ const inputId = `${alias}FormInput`;
20860
20862
  const errorId = `${alias}-error`;
20861
20863
  const [isOpen, setIsOpen] = React.useState(false);
20862
20864
  const containerRef = React.useRef(null);
@@ -20873,85 +20875,177 @@ const DatePicker = (_a) => {
20873
20875
  });
20874
20876
  }
20875
20877
  }, [inputtype]);
20876
- // --- STYLES ---
20877
- const activeInputStyle = inputtype === 'datepicker-neumorphic'
20878
- ? 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'
20879
- ? { backgroundColor: 'transparent', boxShadow: 'none', border: hasError ? '2px solid var(--red-9)' : '2px solid var(--gray-7)' }
20880
- : { 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' };
20878
+ // --- INPUT STYLES ---
20879
+ const activeInputStyle = React.useMemo(() => {
20880
+ if (inputtype === 'datepicker-neumorphic') {
20881
+ 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);
20882
+ }
20883
+ if (inputtype === 'datepicker-outline') {
20884
+ return {
20885
+ backgroundColor: 'transparent',
20886
+ boxShadow: 'none',
20887
+ border: hasError ? '1px solid var(--red-9)' : '1px solid var(--gray-7)',
20888
+ borderRadius: 'var(--radius-2)'
20889
+ };
20890
+ }
20891
+ // Material / Default
20892
+ return {
20893
+ backgroundColor: 'var(--color-surface)',
20894
+ boxShadow: hasError ? 'inset 0 0 0 1px var(--red-9)' : '0 1px 2px rgba(0,0,0,0.05)',
20895
+ border: '1px solid var(--gray-5)',
20896
+ borderRadius: 'var(--radius-2)'
20897
+ };
20898
+ }, [inputtype, hasError, neuVars]);
20899
+ // --- CALENDAR POPUP STYLES ---
20900
+ const calendarContainerStyle = React.useMemo(() => {
20901
+ const base = { padding: '16px', borderRadius: '12px' };
20902
+ if (inputtype === 'datepicker-neumorphic') {
20903
+ 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);
20904
+ }
20905
+ if (inputtype === 'datepicker-outline') {
20906
+ 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)' });
20907
+ }
20908
+ // Material
20909
+ 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)' });
20910
+ }, [inputtype, neuVars]);
20881
20911
  return (React.createElement(Column, { span: width, newLine: props.newRow },
20882
20912
  React.createElement(p$5, { direction: "column", gap: "2", width: "100%", ref: containerRef, style: style, className: className },
20883
20913
  React.createElement("input", { type: "hidden", "aria-describedby": `${alias}InputLabel`, name: alias, value: selectedDate ? selectedDate.toISOString() : '' }),
20884
20914
  React.createElement("style", { dangerouslySetInnerHTML: { __html: `
20885
- /* Base Calendar */
20886
- .rdp { --rdp-cell-size: 32px; margin: 0; }
20887
- .rdp-months { display: flex; justify-content: center; }
20888
- .rdp-month { background: ${inputtype === 'datepicker-neumorphic' ? 'var(--neu-bg)' : 'var(--color-panel-solid)'}; padding: 10px; border-radius: 8px; }
20889
- .rdp-caption { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
20890
- .rdp-caption_label { font-weight: bold; color: var(--gray-12); font-size: var(--font-size-3); }
20891
- .rdp-nav { display: flex; gap: 5px; }
20892
- .rdp-head_cell { font-size: 0.8rem; font-weight: 500; color: var(--gray-10); padding-bottom: 5px; }
20893
-
20894
- /* Day */
20895
- .rdp-day {
20896
- width: var(--rdp-cell-size); height: var(--rdp-cell-size);
20897
- border-radius: 50%; border: none; background: transparent;
20898
- cursor: pointer; color: var(--gray-12);
20899
- display: flex; align-items: center; justify-content: center;
20900
- }
20901
- .rdp-day:hover:not(.rdp-day_selected) { background-color: var(--gray-4); }
20915
+ /* Reset & Layout */
20916
+ .rdp {
20917
+ --rdp-cell-size: 36px;
20918
+ --rdp-caption-font-size: 16px;
20919
+ margin: 0;
20920
+ font-family: var(--default-font-family, sans-serif);
20921
+ }
20922
+ .rdp-months { justify-content: center; }
20923
+ .rdp-month { background: transparent; }
20924
+
20925
+ /* Header (Month Name + Nav) */
20926
+ .rdp-caption {
20927
+ display: flex;
20928
+ align-items: center;
20929
+ justify-content: space-between;
20930
+ margin-bottom: 12px;
20931
+ padding: 0 4px;
20932
+ }
20933
+ .rdp-caption_label {
20934
+ font-weight: 600;
20935
+ color: var(--gray-12);
20936
+ font-size: var(--font-size-3);
20937
+ text-transform: capitalize;
20938
+ }
20939
+ .rdp-nav { display: flex; gap: 8px; }
20940
+ .rdp-nav_button {
20941
+ color: var(--gray-11);
20942
+ border-radius: 6px;
20943
+ padding: 4px;
20944
+ transition: background 0.2s;
20945
+ background: transparent;
20946
+ border: none;
20947
+ cursor: pointer;
20948
+ display: flex;
20949
+ align-items: center;
20950
+ justify-content: center;
20951
+ }
20952
+ .rdp-nav_button:hover { background-color: var(--gray-4); color: var(--gray-12); }
20953
+
20954
+ /* Weekdays Row */
20955
+ .rdp-head_cell {
20956
+ font-size: 0.75rem;
20957
+ font-weight: 600;
20958
+ color: var(--gray-9);
20959
+ text-transform: uppercase;
20960
+ padding-bottom: 8px;
20961
+ width: var(--rdp-cell-size);
20962
+ text-align: center;
20963
+ }
20964
+
20965
+ /* Day Cells */
20966
+ .rdp-cell { text-align: center; }
20967
+ .rdp-day {
20968
+ width: var(--rdp-cell-size);
20969
+ height: var(--rdp-cell-size);
20970
+ border-radius: 50%;
20971
+ border: 2px solid transparent;
20972
+ background: transparent;
20973
+ cursor: pointer;
20974
+ color: var(--gray-12);
20975
+ font-size: var(--font-size-2);
20976
+ display: flex;
20977
+ align-items: center;
20978
+ justify-content: center;
20979
+ transition: all 0.15s ease;
20980
+ margin: 1px;
20981
+ }
20902
20982
 
20903
- /* Selected State */
20904
- .rdp-day_selected {
20905
- background-color: var(--accent-9); color: white;
20906
- font-weight: bold;
20907
- }
20983
+ /* States */
20984
+ .rdp-day:hover:not(.rdp-day_selected):not([disabled]) {
20985
+ background-color: var(--gray-4);
20986
+ }
20987
+
20988
+ .rdp-day_selected {
20989
+ background-color: var(--accent-9) !important;
20990
+ color: white !important;
20991
+ font-weight: 600;
20992
+ }
20908
20993
 
20909
- /* NEUMORPHIC OVERRIDES */
20910
- .neu-calendar .rdp-month {
20911
- /* The floating plate */
20912
- box-shadow: 6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light);
20913
- }
20914
- .neu-calendar .rdp-day:hover:not(.rdp-day_selected) {
20915
- background-color: transparent;
20916
- /* Hover = pop out slightly */
20917
- box-shadow: 3px 3px 6px var(--neu-shadow-dark), -3px -3px 6px var(--neu-shadow-light);
20918
- }
20919
- .neu-calendar .rdp-day_selected {
20920
- background-color: var(--neu-bg);
20921
- color: var(--neu-accent);
20922
- /* Pressed in state for selected */
20923
- box-shadow: inset 3px 3px 6px var(--neu-shadow-dark), inset -3px -3px 6px var(--neu-shadow-light);
20924
- }
20925
- ` } }),
20994
+ .rdp-day_today {
20995
+ color: var(--accent-11);
20996
+ font-weight: 700;
20997
+ position: relative;
20998
+ }
20999
+
21000
+ .rdp-day_disabled { opacity: 0.3; cursor: not-allowed; }
21001
+
21002
+ /* NEUMORPHIC OVERRIDES */
21003
+ ${inputtype === 'datepicker-neumorphic' ? `
21004
+ .rdp-day:hover:not(.rdp-day_selected) {
21005
+ box-shadow: 3px 3px 6px var(--neu-shadow-dark), -3px -3px 6px var(--neu-shadow-light);
21006
+ background-color: transparent;
21007
+ }
21008
+ .rdp-day_selected {
21009
+ box-shadow: inset 2px 2px 5px var(--neu-shadow-dark), inset -2px -2px 5px var(--neu-shadow-light);
21010
+ color: var(--neu-accent) !important;
21011
+ background-color: var(--neu-bg) !important;
21012
+ }
21013
+ ` : ''}
21014
+ ` } }),
20926
21015
  React.createElement(P$1, { open: isOpen, onOpenChange: setIsOpen },
20927
21016
  React.createElement(s$1, null,
20928
- React.createElement(u, { variant: "surface", style: Object.assign({ cursor: 'pointer', height: inputtype === 'datepicker-neumorphic' ? '40px' : '32px' }, activeInputStyle), onClick: () => setIsOpen(true) },
21017
+ React.createElement(u, { variant: "surface", style: Object.assign({ cursor: 'pointer', height: inputtype === 'datepicker-neumorphic' ? '40px' : '32px' }, activeInputStyle), onClick: () => !readonly && setIsOpen(true) },
20929
21018
  React.createElement(c, null,
20930
21019
  React.createElement(Icon, { name: 'calendar', height: "16", width: "16", style: { color: 'var(--gray-10)' } })),
20931
- React.createElement("input", { readOnly: true, value: selectedDate && isValid(selectedDate) ? format$2(selectedDate, 'PPP') : '', placeholder: placeholder, style: {
21020
+ React.createElement("input", { readOnly: true, disabled: readonly, value: selectedDate && isValid(selectedDate) ? format$2(selectedDate, 'PPP') : '', placeholder: placeholder, style: {
20932
21021
  backgroundColor: 'transparent',
20933
21022
  border: 'none',
20934
21023
  outline: 'none',
20935
21024
  width: '100%',
20936
- cursor: 'pointer',
21025
+ cursor: readonly ? 'default' : 'pointer',
20937
21026
  color: 'inherit',
20938
21027
  fontFamily: 'inherit',
20939
- fontSize: 'var(--font-size-2)'
21028
+ fontSize: 'var(--font-size-2)',
21029
+ fontWeight: 500
20940
21030
  }, id: inputId, "aria-describedby": hasError ? errorId : `${alias}InputLabel` }))),
20941
- React.createElement(i$3, { style: { padding: 0, backgroundColor: 'transparent', boxShadow: 'none' }, align: "start" },
20942
- React.createElement("div", { className: inputtype === 'datepicker-neumorphic' ? 'neu-calendar' : '', style: neuVars },
20943
- React.createElement(DayPicker, { mode: "single", selected: selectedDate, onSelect: (date) => {
20944
- setFieldValue(alias, date);
20945
- setIsOpen(false);
20946
- setFieldTouched(alias, true);
20947
- }, disabled: [{ before: parsedMin || new Date(1900, 0, 1) }, { after: parsedMax || new Date(2100, 0, 1) }], components: {
20948
- Chevron: (props) => {
20949
- if (props.orientation === 'left') {
20950
- return React.createElement(Icon, { name: 'chevronleft', height: "16", width: "16" });
20951
- }
20952
- return React.createElement(Icon, { name: 'chevronright', height: "16", width: "16" });
21031
+ React.createElement(i$3, { style: calendarContainerStyle, align: "start", sideOffset: 5 },
21032
+ React.createElement(DayPicker, { mode: "single", selected: selectedDate, onSelect: (date) => {
21033
+ setFieldValue(alias, date);
21034
+ setIsOpen(false);
21035
+ setFieldTouched(alias, true);
21036
+ }, disabled: [
21037
+ ...(readonly ? [{ from: new Date(1900, 0, 1), to: new Date(2100, 0, 1) }] : []),
21038
+ { before: parsedMin || new Date(1900, 0, 1) },
21039
+ { after: parsedMax || new Date(2100, 0, 1) }
21040
+ ], components: {
21041
+ Chevron: (props) => {
21042
+ const style = { display: 'block', cursor: 'pointer', color: 'var(--gray-11)' };
21043
+ if (props.orientation === 'left') {
21044
+ return React.createElement(Icon, { name: 'chevronleft', height: "16", width: "16", style: style });
20953
21045
  }
20954
- } })))),
21046
+ return React.createElement(Icon, { name: 'chevronright', height: "16", width: "16", style: style });
21047
+ }
21048
+ } }))),
20955
21049
  React.createElement("div", null,
20956
21050
  React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
20957
21051
  "\u00A0",
@@ -20962,16 +21056,16 @@ const DatePicker = (_a) => {
20962
21056
  React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
20963
21057
  hasError ?
20964
21058
  React.createElement(React.Fragment, null,
20965
- React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || "Required field")) : null))));
21059
+ React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || (meta.error || "Required field"))) : null))));
20966
21060
  };
20967
21061
 
20968
21062
  const DateRangePicker = (_a) => {
20969
21063
  var _b, _c;
20970
- 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"]);
21064
+ 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"]);
20971
21065
  const { setFieldValue, setFieldTouched } = formik.useFormikContext();
20972
21066
  const [field, meta] = formik.useField(alias);
20973
21067
  const hasError = Boolean(meta.touched && meta.error);
20974
- // Range object value format: { from: "2023-01-01", to: "2023-01-05" } :: Strings or Date Objects
21068
+ // Range object value format: { from: "2023-01-01", to: "2023-01-05" }
20975
21069
  const rawVal = field.value || {};
20976
21070
  const selectedRange = {
20977
21071
  from: ensureDate(rawVal.from),
@@ -20979,7 +21073,7 @@ const DateRangePicker = (_a) => {
20979
21073
  };
20980
21074
  const parsedMin = ensureDate(minvalue);
20981
21075
  const parsedMax = ensureDate(maxvalue);
20982
- const inputId = `${alias}FormInput` || crypto.randomUUID();
21076
+ const inputId = `${alias}FormInput`;
20983
21077
  const errorId = `${alias}-error`;
20984
21078
  const [isOpen, setIsOpen] = React.useState(false);
20985
21079
  const containerRef = React.useRef(null);
@@ -21005,11 +21099,38 @@ const DateRangePicker = (_a) => {
21005
21099
  displayText = format$2(selectedRange.from, 'LLL dd');
21006
21100
  }
21007
21101
  }
21008
- // Styles
21009
- const activeInputStyle = inputtype === 'daterangepicker-neumorphic'
21010
- ? 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'
21011
- ? { backgroundColor: 'transparent', boxShadow: 'none', border: hasError ? '2px solid var(--red-9)' : '2px solid var(--gray-7)' }
21012
- : { 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' };
21102
+ // --- STYLES ---
21103
+ const activeInputStyle = React.useMemo(() => {
21104
+ if (inputtype === 'daterangepicker-neumorphic') {
21105
+ 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);
21106
+ }
21107
+ if (inputtype === 'daterangepicker-outline') {
21108
+ return {
21109
+ backgroundColor: 'transparent',
21110
+ boxShadow: 'none',
21111
+ border: hasError ? '1px solid var(--red-9)' : '1px solid var(--gray-7)',
21112
+ borderRadius: 'var(--radius-2)'
21113
+ };
21114
+ }
21115
+ // Material
21116
+ return {
21117
+ backgroundColor: 'var(--color-surface)',
21118
+ boxShadow: hasError ? 'inset 0 0 0 1px var(--red-9)' : '0 1px 2px rgba(0,0,0,0.05)',
21119
+ border: '1px solid var(--gray-5)',
21120
+ borderRadius: 'var(--radius-2)'
21121
+ };
21122
+ }, [inputtype, hasError, neuVars]);
21123
+ const calendarContainerStyle = React.useMemo(() => {
21124
+ const base = { padding: '16px', borderRadius: '12px' };
21125
+ if (inputtype === 'daterangepicker-neumorphic') {
21126
+ 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);
21127
+ }
21128
+ if (inputtype === 'daterangepicker-outline') {
21129
+ 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)' });
21130
+ }
21131
+ // Material
21132
+ 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)' });
21133
+ }, [inputtype, neuVars]);
21013
21134
  return (React.createElement(Column, { span: width, newLine: props.newRow },
21014
21135
  React.createElement(p$5, { direction: "column", gap: "2", width: "100%", ref: containerRef, style: style, className: className },
21015
21136
  React.createElement("input", { type: "hidden", name: alias, value: JSON.stringify({
@@ -21017,31 +21138,120 @@ const DateRangePicker = (_a) => {
21017
21138
  to: (_c = selectedRange.to) === null || _c === void 0 ? void 0 : _c.toISOString()
21018
21139
  }) }),
21019
21140
  React.createElement("style", { dangerouslySetInnerHTML: { __html: `
21020
- .rdp { --rdp-cell-size: 32px; margin: 0; }
21141
+ /* Reset & Layout */
21142
+ .rdp {
21143
+ --rdp-cell-size: 36px;
21144
+ --rdp-caption-font-size: 16px;
21145
+ margin: 0;
21146
+ font-family: var(--default-font-family, sans-serif);
21147
+ }
21021
21148
  .rdp-months { justify-content: center; }
21022
- .rdp-month { background: ${inputtype === 'daterangepicker-neumorphic' ? 'var(--neu-bg)' : 'var(--color-panel-solid)'}; padding: 10px; border-radius: 8px; }
21023
- .rdp-caption { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
21024
- .rdp-caption_label { font-weight: bold; color: var(--gray-12); font-size: var(--font-size-3); }
21025
- .rdp-nav { display: flex; gap: 5px; }
21026
- .rdp-head_cell { font-size: 0.8rem; font-weight: 500; color: var(--gray-10); padding-bottom: 5px; }
21027
- .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; }
21028
- .rdp-day:hover:not(.rdp-day_selected) { background-color: var(--gray-4); }
21149
+ .rdp-month { background: transparent; }
21150
+
21151
+ /* Header */
21152
+ .rdp-caption {
21153
+ display: flex; align-items: center; justify-content: space-between;
21154
+ margin-bottom: 12px; padding: 0 4px;
21155
+ }
21156
+ .rdp-caption_label {
21157
+ font-weight: 600; color: var(--gray-12); font-size: var(--font-size-3);
21158
+ text-transform: capitalize;
21159
+ }
21160
+ .rdp-nav { display: flex; gap: 8px; }
21161
+ .rdp-nav_button {
21162
+ color: var(--gray-11); border-radius: 6px; padding: 4px;
21163
+ transition: background 0.2s; background: transparent; border: none; cursor: pointer;
21164
+ display: flex; align-items: center; justify-content: center;
21165
+ }
21166
+ .rdp-nav_button:hover { background-color: var(--gray-4); color: var(--gray-12); }
21167
+
21168
+ /* Weekdays */
21169
+ .rdp-head_cell {
21170
+ font-size: 0.75rem; font-weight: 600; color: var(--gray-9);
21171
+ text-transform: uppercase; padding-bottom: 8px; width: var(--rdp-cell-size);
21172
+ text-align: center;
21173
+ }
21029
21174
 
21030
- .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; }
21031
- .rdp-day_range_start { border-radius: 50% 0 0 50%; background-color: var(--accent-9); color: white; }
21032
- .rdp-day_range_end { border-radius: 0 50% 50% 0; background-color: var(--accent-9); color: white; }
21175
+ /* Cells */
21176
+ .rdp-cell { text-align: center; padding: 1px 0; }
21177
+ .rdp-day {
21178
+ width: var(--rdp-cell-size); height: var(--rdp-cell-size);
21179
+ border-radius: 50%; border: 2px solid transparent;
21180
+ background: transparent; cursor: pointer; color: var(--gray-12);
21181
+ font-size: var(--font-size-2); display: flex; align-items: center; justify-content: center;
21182
+ margin: 0 auto;
21183
+ }
21184
+
21185
+ /* States */
21186
+ .rdp-day:hover:not(.rdp-day_selected):not([disabled]) { background-color: var(--gray-4); }
21187
+
21188
+ /* --- RANGE STYLES --- */
21189
+ .rdp-day_range_middle {
21190
+ background-color: var(--accent-3) !important;
21191
+ color: var(--accent-11) !important;
21192
+ border-radius: 0 !important;
21193
+ width: 100%; /* Fill cell width for continuous strip */
21194
+ }
21195
+ .rdp-day_range_start {
21196
+ background-color: var(--accent-9) !important;
21197
+ color: white !important;
21198
+ border-top-left-radius: 50% !important;
21199
+ border-bottom-left-radius: 50% !important;
21200
+ border-top-right-radius: 0 !important;
21201
+ border-bottom-right-radius: 0 !important;
21202
+ width: 100%;
21203
+ }
21204
+ .rdp-day_range_end {
21205
+ background-color: var(--accent-9) !important;
21206
+ color: white !important;
21207
+ border-top-right-radius: 50% !important;
21208
+ border-bottom-right-radius: 50% !important;
21209
+ border-top-left-radius: 0 !important;
21210
+ border-bottom-left-radius: 0 !important;
21211
+ width: 100%;
21212
+ }
21213
+ .rdp-day_range_start.rdp-day_range_end {
21214
+ border-radius: 50% !important;
21215
+ width: var(--rdp-cell-size);
21216
+ }
21217
+ .rdp-day_today { color: var(--accent-11); font-weight: 700; }
21218
+ .rdp-day_disabled { opacity: 0.3; cursor: not-allowed; }
21033
21219
 
21034
- /* Neumorphic */
21035
- .neu-calendar .rdp-month { box-shadow: 6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light); }
21036
- .neu-calendar .rdp-day_range_start, .neu-calendar .rdp-day_range_end { box-shadow: inset 2px 2px 4px rgba(0,0,0,0.2); }
21220
+ /* NEUMORPHIC OVERRIDES */
21221
+ ${inputtype === 'daterangepicker-neumorphic' ? `
21222
+ .neu-calendar .rdp-day:hover:not(.rdp-day_selected) {
21223
+ box-shadow: 3px 3px 6px var(--neu-shadow-dark), -3px -3px 6px var(--neu-shadow-light);
21224
+ background-color: transparent;
21225
+ }
21226
+ .neu-calendar .rdp-day_range_start,
21227
+ .neu-calendar .rdp-day_range_end {
21228
+ box-shadow: inset 2px 2px 5px var(--neu-shadow-dark), inset -2px -2px 5px var(--neu-shadow-light);
21229
+ color: var(--neu-accent) !important;
21230
+ background-color: var(--neu-bg) !important;
21231
+ }
21232
+ .neu-calendar .rdp-day_range_middle {
21233
+ box-shadow: inset 1px 1px 2px var(--neu-shadow-dark), inset -1px -1px 2px var(--neu-shadow-light);
21234
+ background-color: transparent !important;
21235
+ }
21236
+ ` : ''}
21037
21237
  ` } }),
21038
21238
  React.createElement(P$1, { open: isOpen, onOpenChange: setIsOpen },
21039
21239
  React.createElement(s$1, null,
21040
- React.createElement(u, { variant: "surface", style: Object.assign({ cursor: 'pointer', height: inputtype === 'daterangepicker-neumorphic' ? '40px' : '32px' }, activeInputStyle), onClick: () => setIsOpen(true) },
21240
+ React.createElement(u, { variant: "surface", style: Object.assign({ cursor: 'pointer', height: inputtype === 'daterangepicker-neumorphic' ? '40px' : '32px' }, activeInputStyle), onClick: () => !readOnly && setIsOpen(true) },
21041
21241
  React.createElement(c, null,
21042
21242
  React.createElement(Icon, { name: 'calendar', height: "16", width: "16", style: { color: 'var(--gray-10)' } })),
21043
- React.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)' } }))),
21044
- React.createElement(i$3, { style: { padding: 0, backgroundColor: 'transparent', boxShadow: 'none' }, align: "start" },
21243
+ React.createElement("input", { id: inputId, "aria-describedby": hasError ? errorId : `${alias}InputLabel`, readOnly: true, disabled: readOnly, value: displayText, placeholder: placeholder, style: {
21244
+ backgroundColor: 'transparent',
21245
+ border: 'none',
21246
+ outline: 'none',
21247
+ width: '100%',
21248
+ cursor: readOnly ? 'default' : 'pointer',
21249
+ color: 'inherit',
21250
+ fontFamily: 'inherit',
21251
+ fontSize: 'var(--font-size-2)',
21252
+ fontWeight: 500
21253
+ } }))),
21254
+ React.createElement(i$3, { style: calendarContainerStyle, align: "start", sideOffset: 5 },
21045
21255
  React.createElement("div", { className: inputtype === 'daterangepicker-neumorphic' ? 'neu-calendar' : '', style: neuVars },
21046
21256
  React.createElement(DayPicker, { mode: "range", selected: selectedRange, onSelect: (range) => {
21047
21257
  setFieldValue(alias, range);
@@ -21050,13 +21260,15 @@ const DateRangePicker = (_a) => {
21050
21260
  setIsOpen(false);
21051
21261
  }
21052
21262
  }, disabled: [
21263
+ ...(readOnly ? [{ from: new Date(1900, 0, 1), to: new Date(2100, 0, 1) }] : []),
21053
21264
  { before: parsedMin || new Date(1900, 0, 1) },
21054
21265
  { after: parsedMax || new Date(2100, 0, 1) }
21055
21266
  ], components: {
21056
21267
  Chevron: (props) => {
21268
+ const style = { display: 'block', cursor: 'pointer', color: 'var(--gray-11)' };
21057
21269
  if (props.orientation === 'left')
21058
- return React.createElement(Icon, { name: 'chevronleft' });
21059
- return React.createElement(Icon, { name: 'chevronright' });
21270
+ return React.createElement(Icon, { name: 'chevronleft', height: "16", width: "16", style: style });
21271
+ return React.createElement(Icon, { name: 'chevronright', height: "16", width: "16", style: style });
21060
21272
  }
21061
21273
  } })))),
21062
21274
  React.createElement("div", null,
@@ -21069,18 +21281,18 @@ const DateRangePicker = (_a) => {
21069
21281
  React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
21070
21282
  hasError ?
21071
21283
  React.createElement(React.Fragment, null,
21072
- React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || "Required field")) : null))));
21284
+ React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || (meta.error || "Required field"))) : null))));
21073
21285
  };
21074
21286
 
21075
21287
  const DateTimePicker = (_a) => {
21076
- 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"]);
21288
+ 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"]);
21077
21289
  const { setFieldValue, setFieldTouched } = formik.useFormikContext();
21078
21290
  const [field, meta] = formik.useField(alias);
21079
21291
  const hasError = Boolean(meta.touched && meta.error);
21080
21292
  const selectedDate = ensureDate(field.value);
21081
21293
  const parsedMin = ensureDate(minvalue);
21082
21294
  const parsedMax = ensureDate(maxvalue);
21083
- const inputId = `${alias}FormInput` || crypto.randomUUID();
21295
+ const inputId = `${alias}FormInput`;
21084
21296
  const errorId = `${alias}-error`;
21085
21297
  const [isOpen, setIsOpen] = React.useState(false);
21086
21298
  const containerRef = React.useRef(null);
@@ -21113,55 +21325,128 @@ const DateTimePicker = (_a) => {
21113
21325
  const baseDate = selectedDate || new Date();
21114
21326
  let newDate = baseDate;
21115
21327
  if (type === 'hours') {
21116
- // 0-23 limiters
21117
21328
  const h = Math.min(23, Math.max(0, numVal));
21118
21329
  newDate = setHours(baseDate, h);
21119
21330
  }
21120
21331
  else {
21121
- // 0-59 limiters
21122
21332
  const m = Math.min(59, Math.max(0, numVal));
21123
21333
  newDate = setMinutes(baseDate, m);
21124
21334
  }
21125
21335
  setFieldValue(alias, newDate);
21126
21336
  };
21127
- // Styles
21128
- const activeInputStyle = inputtype === 'datetimepicker-neumorphic'
21129
- ? 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'
21130
- ? { backgroundColor: 'transparent', boxShadow: 'none', border: hasError ? '2px solid var(--red-9)' : '2px solid var(--gray-7)' }
21131
- : { 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' };
21337
+ // --- STYLES ---
21338
+ const activeInputStyle = React.useMemo(() => {
21339
+ if (inputtype === 'datetimepicker-neumorphic') {
21340
+ 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);
21341
+ }
21342
+ if (inputtype === 'datetimepicker-outline') {
21343
+ return {
21344
+ backgroundColor: 'transparent',
21345
+ boxShadow: 'none',
21346
+ border: hasError ? '1px solid var(--red-9)' : '1px solid var(--gray-7)',
21347
+ borderRadius: 'var(--radius-2)'
21348
+ };
21349
+ }
21350
+ // Material
21351
+ return {
21352
+ backgroundColor: 'var(--color-surface)',
21353
+ boxShadow: hasError ? 'inset 0 0 0 1px var(--red-9)' : '0 1px 2px rgba(0,0,0,0.05)',
21354
+ border: '1px solid var(--gray-5)',
21355
+ borderRadius: 'var(--radius-2)'
21356
+ };
21357
+ }, [inputtype, hasError, neuVars]);
21358
+ const calendarContainerStyle = React.useMemo(() => {
21359
+ const base = { padding: 0, borderRadius: '12px', overflow: 'hidden' }; // Padding 0 to let Time section flush to bottom
21360
+ if (inputtype === 'datetimepicker-neumorphic') {
21361
+ 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);
21362
+ }
21363
+ if (inputtype === 'datetimepicker-outline') {
21364
+ 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)' });
21365
+ }
21366
+ // Material
21367
+ 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)' });
21368
+ }, [inputtype, neuVars]);
21132
21369
  return (React.createElement(Column, { span: width, newLine: props.newRow },
21133
21370
  React.createElement(p$5, { direction: "column", gap: "2", width: "100%", ref: containerRef, style: style, className: className },
21134
21371
  React.createElement("input", { type: "hidden", name: alias, value: selectedDate ? selectedDate.toISOString() : '' }),
21135
21372
  React.createElement("style", { dangerouslySetInnerHTML: { __html: `
21136
- .rdp { --rdp-cell-size: 32px; margin: 0; }
21373
+ /* Reset & Layout */
21374
+ .rdp {
21375
+ --rdp-cell-size: 36px;
21376
+ --rdp-caption-font-size: 16px;
21377
+ margin: 0;
21378
+ padding: 16px; /* Padding moved to RDP so Time section is flush */
21379
+ font-family: var(--default-font-family, sans-serif);
21380
+ }
21137
21381
  .rdp-months { justify-content: center; }
21138
- .rdp-month { background: ${inputtype === 'datetimepicker-neumorphic' ? 'var(--neu-bg)' : 'var(--color-panel-solid)'}; padding: 10px; border-radius: 8px; }
21139
- .rdp-caption { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
21140
- .rdp-caption_label { font-weight: bold; color: var(--gray-12); font-size: var(--font-size-3); }
21141
- .rdp-nav { display: flex; gap: 5px; }
21142
- .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; }
21143
- .rdp-day:hover:not(.rdp-day_selected) { background-color: var(--gray-4); }
21144
- .rdp-day_selected { background-color: var(--accent-9); color: white; font-weight: bold; }
21382
+ .rdp-month { background: transparent; }
21383
+
21384
+ /* Header */
21385
+ .rdp-caption {
21386
+ display: flex; align-items: center; justify-content: space-between;
21387
+ margin-bottom: 12px; padding: 0 4px;
21388
+ }
21389
+ .rdp-caption_label {
21390
+ font-weight: 600; color: var(--gray-12); font-size: var(--font-size-3);
21391
+ text-transform: capitalize;
21392
+ }
21393
+ .rdp-nav { display: flex; gap: 8px; }
21394
+ .rdp-nav_button {
21395
+ color: var(--gray-11); border-radius: 6px; padding: 4px;
21396
+ transition: background 0.2s; background: transparent; border: none; cursor: pointer;
21397
+ display: flex; align-items: center; justify-content: center;
21398
+ }
21399
+ .rdp-nav_button:hover { background-color: var(--gray-4); color: var(--gray-12); }
21400
+
21401
+ /* Weekdays */
21402
+ .rdp-head_cell {
21403
+ font-size: 0.75rem; font-weight: 600; color: var(--gray-9);
21404
+ text-transform: uppercase; padding-bottom: 8px; width: var(--rdp-cell-size);
21405
+ text-align: center;
21406
+ }
21407
+
21408
+ /* Cells */
21409
+ .rdp-cell { text-align: center; }
21410
+ .rdp-day {
21411
+ width: var(--rdp-cell-size); height: var(--rdp-cell-size);
21412
+ border-radius: 50%; border: 2px solid transparent;
21413
+ background: transparent; cursor: pointer; color: var(--gray-12);
21414
+ font-size: var(--font-size-2); display: flex; align-items: center; justify-content: center;
21415
+ transition: all 0.15s ease; margin: 1px;
21416
+ }
21145
21417
 
21146
- .neu-calendar .rdp-month { box-shadow: 6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light); }
21147
- .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); }
21148
- .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); }
21418
+ .rdp-day:hover:not(.rdp-day_selected):not([disabled]) { background-color: var(--gray-4); }
21419
+ .rdp-day_selected { background-color: var(--accent-9) !important; color: white !important; font-weight: 600; }
21420
+ .rdp-day_today { color: var(--accent-11); font-weight: 700; position: relative; }
21421
+ .rdp-day_today:not(.rdp-day_selected)::after {
21422
+ content: ''; position: absolute; bottom: 4px; width: 4px; height: 4px; border-radius: 50%; background-color: var(--accent-9);
21423
+ }
21424
+ .rdp-day_disabled { opacity: 0.3; cursor: not-allowed; }
21149
21425
 
21150
21426
  /* Time Input Styling */
21151
21427
  .time-input {
21152
- text-align: center;
21153
- font-variant-numeric: tabular-nums;
21154
- width: 40px;
21155
- padding: 4px;
21156
- border-radius: 4px;
21157
- border: 1px solid var(--gray-6);
21158
- background: var(--color-surface);
21159
- }
21160
- .neu-calendar .time-input {
21161
- background: var(--neu-bg);
21162
- border: none;
21163
- box-shadow: inset 2px 2px 4px var(--neu-shadow-dark), inset -2px -2px 4px var(--neu-shadow-light);
21428
+ text-align: center; font-variant-numeric: tabular-nums;
21429
+ width: 44px; padding: 4px; border-radius: 6px;
21430
+ border: 1px solid var(--gray-6); background: var(--color-surface);
21431
+ color: var(--gray-12); font-weight: 500;
21164
21432
  }
21433
+ .time-input:focus { outline: 2px solid var(--accent-9); border-color: transparent; }
21434
+
21435
+ /* Neumorphic Overrides */
21436
+ ${inputtype === 'datetimepicker-neumorphic' ? `
21437
+ .neu-calendar .rdp-day:hover:not(.rdp-day_selected) {
21438
+ box-shadow: 3px 3px 6px var(--neu-shadow-dark), -3px -3px 6px var(--neu-shadow-light);
21439
+ background-color: transparent;
21440
+ }
21441
+ .neu-calendar .rdp-day_selected {
21442
+ box-shadow: inset 2px 2px 5px var(--neu-shadow-dark), inset -2px -2px 5px var(--neu-shadow-light);
21443
+ color: var(--neu-accent) !important; background-color: var(--neu-bg) !important;
21444
+ }
21445
+ .neu-calendar .time-input {
21446
+ background: var(--neu-bg); border: none;
21447
+ box-shadow: inset 2px 2px 4px var(--neu-shadow-dark), inset -2px -2px 4px var(--neu-shadow-light);
21448
+ }
21449
+ ` : ''}
21165
21450
  ` } }),
21166
21451
  React.createElement(P$1, { open: isOpen, onOpenChange: (open) => {
21167
21452
  setIsOpen(open);
@@ -21169,28 +21454,39 @@ const DateTimePicker = (_a) => {
21169
21454
  setFieldTouched(alias, true);
21170
21455
  } },
21171
21456
  React.createElement(s$1, null,
21172
- React.createElement(u, { variant: "surface", style: Object.assign({ cursor: 'pointer', height: inputtype === 'datetimepicker-neumorphic' ? '40px' : '32px' }, activeInputStyle), onClick: () => setIsOpen(true) },
21457
+ React.createElement(u, { variant: "surface", style: Object.assign({ cursor: 'pointer', height: inputtype === 'datetimepicker-neumorphic' ? '40px' : '32px' }, activeInputStyle), onClick: () => !readonly && setIsOpen(true) },
21173
21458
  React.createElement(c, null,
21174
21459
  React.createElement(Icon, { name: 'calendar', height: "16", width: "16", style: { color: 'var(--gray-10)' } })),
21175
- React.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)' } }))),
21176
- React.createElement(i$3, { style: { padding: 0, backgroundColor: 'transparent', boxShadow: 'none' }, align: "start" },
21460
+ React.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: {
21461
+ backgroundColor: 'transparent', border: 'none', outline: 'none', width: '100%',
21462
+ cursor: readonly ? 'default' : 'pointer', color: 'inherit', fontFamily: 'inherit',
21463
+ fontSize: 'var(--font-size-2)', fontWeight: 500
21464
+ } }))),
21465
+ React.createElement(i$3, { style: calendarContainerStyle, align: "start", sideOffset: 5 },
21177
21466
  React.createElement("div", { className: inputtype === 'datetimepicker-neumorphic' ? 'neu-calendar' : '', style: neuVars },
21178
- React.createElement(DayPicker, { mode: "single", selected: selectedDate, onSelect: handleDaySelect, disabled: [{ before: parsedMin || new Date(1900, 0, 1) }, { after: parsedMax || new Date(2100, 0, 1) }], components: {
21179
- Chevron: (props) => props.orientation === 'left' ? React.createElement(Icon, { name: 'chevronleft' }) : React.createElement(Icon, { name: 'chevronright' })
21467
+ React.createElement(DayPicker, { mode: "single", selected: selectedDate, onSelect: handleDaySelect, disabled: [
21468
+ ...(readonly ? [{ from: new Date(1900, 0, 1), to: new Date(2100, 0, 1) }] : []),
21469
+ { before: parsedMin || new Date(1900, 0, 1) },
21470
+ { after: parsedMax || new Date(2100, 0, 1) }
21471
+ ], modifiers: { today: new Date() }, modifiersClassNames: { today: 'rdp-day_today' }, components: {
21472
+ Chevron: (props) => {
21473
+ const style = { display: 'block', cursor: 'pointer', color: 'var(--gray-11)' };
21474
+ if (props.orientation === 'left')
21475
+ return React.createElement(Icon, { name: 'chevronleft', height: "16", width: "16", style: style });
21476
+ return React.createElement(Icon, { name: 'chevronright', height: "16", width: "16", style: style });
21477
+ }
21180
21478
  } }),
21181
21479
  React.createElement(o$2, { size: "4" }),
21182
21480
  React.createElement(p$5, { p: "3", gap: "3", align: "center", justify: "center", style: {
21183
- backgroundColor: inputtype === 'datetimepicker-neumorphic' ? 'var(--neu-bg)' : 'var(--color-panel-solid)',
21184
- borderBottomLeftRadius: '8px',
21185
- borderBottomRightRadius: '8px',
21186
- boxShadow: inputtype === 'datetimepicker-neumorphic' ? '6px 6px 12px var(--neu-shadow-dark), -6px 6px 12px var(--neu-shadow-light)' : undefined
21481
+ backgroundColor: inputtype === 'datetimepicker-neumorphic' ? 'rgba(0,0,0,0.02)' : 'var(--gray-2)',
21482
+ borderTop: inputtype === 'datetimepicker-neumorphic' ? 'none' : '1px solid var(--gray-4)'
21187
21483
  } },
21188
21484
  React.createElement(Icon, { name: "clock", width: "16", height: "16", style: { opacity: 0.7 } }),
21189
- React.createElement(p$d, { size: "2", weight: "bold" }, "Time:"),
21190
- React.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) }),
21191
- React.createElement(p$d, null, ":"),
21192
- React.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) }),
21193
- React.createElement(o$a, { size: "1", variant: "soft", onClick: () => setIsOpen(false) }, "Done"))))),
21485
+ React.createElement(p$5, { align: "center", gap: "1" },
21486
+ React.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) }),
21487
+ React.createElement(p$d, { weight: "bold", style: { paddingBottom: 2 } }, ":"),
21488
+ React.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) })),
21489
+ React.createElement(o$a, { size: "1", variant: "soft", onClick: () => setIsOpen(false), style: { marginLeft: 'auto' } }, "Done"))))),
21194
21490
  React.createElement("div", null,
21195
21491
  React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
21196
21492
  "\u00A0",
@@ -21201,7 +21497,7 @@ const DateTimePicker = (_a) => {
21201
21497
  React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
21202
21498
  hasError ?
21203
21499
  React.createElement(React.Fragment, null,
21204
- React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || "Required field")) : null))));
21500
+ React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || (meta.error || "Required field"))) : null))));
21205
21501
  };
21206
21502
 
21207
21503
  const Dropdown = (_a) => {
@@ -21229,7 +21525,6 @@ const Dropdown = (_a) => {
21229
21525
  window.open(inputUrl, '_blank', 'noopener,noreferrer');
21230
21526
  };
21231
21527
  // --- STYLES ---
21232
- // MATERIAL
21233
21528
  const materialTrigger = {
21234
21529
  backgroundColor: 'var(--color-surface)',
21235
21530
  border: 'none',
@@ -21292,21 +21587,25 @@ const Dropdown = (_a) => {
21292
21587
  cursor: pointer;
21293
21588
  }
21294
21589
  ` } })),
21295
- React.createElement(C$1, { name: alias, disabled: readonly, "aria-describedby": `${alias}InputLabel`, defaultValue: props.defaultValue || value, value: field.value, onValueChange: (val) => {
21590
+ React.createElement(C$1, { name: alias, disabled: readonly, defaultValue: props.defaultValue || value, value: field.value, onValueChange: (val) => {
21296
21591
  setFieldValue(alias, val);
21297
21592
  setTimeout(() => setFieldTouched(alias, true), 0);
21593
+ if (props.onValueChange)
21594
+ props.onValueChange(val);
21298
21595
  }, onOpenChange: (isOpen) => {
21299
21596
  if (!isOpen) {
21300
21597
  setFieldTouched(alias, true);
21301
21598
  }
21302
21599
  } },
21303
- React.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) }),
21304
- React.createElement(g, { position: "popper", sideOffset: 5, style: activeContentStyle }, inputoptions.map((inputoption) => (React.createElement(React.Fragment, { key: inputoption.optionid || crypto.randomUUID() }, inputoption.optionurl ?
21305
- React.createElement(v, { id: String(inputoption.optionid) || '', key: inputoption.optionid, value: inputoption.optionvalue, className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '' },
21306
- React.createElement("a", { onClick: () => openLink(inputoption.optionurl || "#"), style: { textDecoration: 'none' } }, inputoption.text))
21307
- :
21308
- React.createElement(React.Fragment, null,
21309
- React.createElement(v, { id: String(inputoption.optionid) || '', key: inputoption.optionid, value: inputoption.optionvalue, className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '' }, inputoption.text))))))),
21600
+ React.createElement(u$1, { id: `${alias}FormInput`, ref: triggerRef, variant: "ghost", placeholder: placeholder || "Select an option", className: `${inputtype === 'dropdown-neumorphic' ? 'neu-select-trigger' : ''} ${props.className || ''}`, style: Object.assign(Object.assign({}, activeTriggerStyle), style) }),
21601
+ React.createElement(g, { position: "popper", sideOffset: 5, style: activeContentStyle },
21602
+ React.createElement(v, { value: "", className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '', style: { color: 'var(--gray-10)', fontStyle: 'italic' } }, placeholder || "Select an option"),
21603
+ React.createElement(o$2, { size: "4", style: { margin: '4px 0', opacity: 0.5 } }),
21604
+ inputoptions.map((inputoption) => (React.createElement(React.Fragment, { key: inputoption.optionid || crypto.randomUUID() }, inputoption.optionurl ?
21605
+ React.createElement(v, { id: String(inputoption.optionid) || '', value: inputoption.optionvalue, className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '' },
21606
+ React.createElement("a", { onClick: (e) => { e.stopPropagation(); openLink(inputoption.optionurl || "#"); }, style: { textDecoration: 'none', color: 'inherit' } }, inputoption.text))
21607
+ :
21608
+ React.createElement(v, { id: String(inputoption.optionid) || '', value: inputoption.optionvalue, className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '' }, inputoption.text)))))),
21310
21609
  React.createElement("div", null,
21311
21610
  React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
21312
21611
  "\u00A0",
@@ -21317,7 +21616,7 @@ const Dropdown = (_a) => {
21317
21616
  React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
21318
21617
  hasError ?
21319
21618
  React.createElement(React.Fragment, null,
21320
- React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || "Required field")) : null)))));
21619
+ React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || meta.error || "Required field")) : null)))));
21321
21620
  };
21322
21621
 
21323
21622
  const getFileIcon$1 = (type, name) => {
@@ -21606,6 +21905,7 @@ const FileMultiple = (_a) => {
21606
21905
  React.createElement(Icon, { name: 'close' })))));
21607
21906
  }))),
21608
21907
  React.createElement("div", null,
21908
+ React.createElement("br", null),
21609
21909
  React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
21610
21910
  "\u00A0",
21611
21911
  props.isHinted ?
@@ -28935,7 +29235,7 @@ const ImageOutput = ({ id, src, alt = "Image", design = 'outline', layout = 'nor
28935
29235
  React.createElement(i$9, { ratio: aspectRatio }, content)));
28936
29236
  };
28937
29237
 
28938
- const Input$1 = (_a) => {
29238
+ const Input$2 = (_a) => {
28939
29239
  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"]);
28940
29240
  const [inputField, meta] = formik.useField(alias);
28941
29241
  const hasError = Boolean(meta.touched && meta.error);
@@ -28944,6 +29244,7 @@ const Input$1 = (_a) => {
28944
29244
  return (React.createElement(Column, { span: width, newLine: props.newRow },
28945
29245
  React.createElement(u, Object.assign({ size: size, type: inputtype, id: `${alias}FormInput`, "aria-describedby": `${alias}InputLabel`, readOnly: readonly, placeholder: placeholder, color: hasError ? "red" : undefined, className: `${variantClass} ${className || ''}` }, inputField, props, { name: alias })),
28946
29246
  React.createElement("div", null,
29247
+ React.createElement("br", null),
28947
29248
  React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
28948
29249
  "\u00A0",
28949
29250
  props.isHinted && (React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
@@ -28968,6 +29269,7 @@ const PasswordInput = (_a) => {
28968
29269
  React.createElement(e, { content: showPassword ? "Hide password" : "Show password" },
28969
29270
  React.createElement(o$5, { size: "1", variant: "ghost", color: "gray", onClick: toggleVisibility, type: "button", "aria-label": showPassword ? "Hide password" : "Show password" }, showPassword ? (React.createElement(Icon, { name: "eyeopen", height: "16", width: "16" })) : (React.createElement(Icon, { name: "eyeclosed", height: "16", width: "16" })))))),
28970
29271
  React.createElement("div", null,
29272
+ React.createElement("br", null),
28971
29273
  React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
28972
29274
  "\u00A0",
28973
29275
  props.isHinted && (React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
@@ -30761,7 +31063,7 @@ function _objectWithoutPropertiesLoose$4(source, excluded) { if (source == null)
30761
31063
  // format={value => ({ text: value, template: 'xxxxxxxx' })}/>
30762
31064
  //
30763
31065
 
30764
- function Input(_ref, ref) {
31066
+ function Input$1(_ref, ref) {
30765
31067
  var _ref$inputComponent = _ref.inputComponent,
30766
31068
  InputComponent = _ref$inputComponent === void 0 ? 'input' : _ref$inputComponent,
30767
31069
  parse = _ref.parse,
@@ -30789,8 +31091,8 @@ function Input(_ref, ref) {
30789
31091
  return /*#__PURE__*/React.createElement(InputComponent, inputProps);
30790
31092
  }
30791
31093
 
30792
- Input = /*#__PURE__*/React.forwardRef(Input);
30793
- Input.propTypes = {
31094
+ Input$1 = /*#__PURE__*/React.forwardRef(Input$1);
31095
+ Input$1.propTypes = {
30794
31096
  // Parses a single characher of `<input/>` text.
30795
31097
  parse: PropTypes.func.isRequired,
30796
31098
  // Formats `value` into `<input/>` text.
@@ -35515,7 +35817,7 @@ function createInput$2(defaultMetadata) {
35515
35817
  onKeyDown: onKeyDown,
35516
35818
  inputFormat: inputFormat
35517
35819
  });
35518
- return /*#__PURE__*/React.createElement(Input, _extends$3({}, rest, {
35820
+ return /*#__PURE__*/React.createElement(Input$1, _extends$3({}, rest, {
35519
35821
  ref: ref,
35520
35822
  parse: parsePhoneNumberCharacter_,
35521
35823
  format: format,
@@ -36243,7 +36545,7 @@ function call(func, _arguments) {
36243
36545
  return func.apply(this, args)
36244
36546
  }
36245
36547
 
36246
- var PhoneInputInput = createInput(metadata$1);
36548
+ var Input = createInput(metadata$1);
36247
36549
 
36248
36550
  function getCountries() {
36249
36551
  return call(getCountries$1, arguments)
@@ -36524,7 +36826,7 @@ const PhoneInput = (_a) => {
36524
36826
  const errorId = `${alias}-error`;
36525
36827
  return (React.createElement(Column, { span: width, newLine: props.newRow },
36526
36828
  React.createElement(p$5, { direction: "column", gap: "2", style: { width: '100%' } },
36527
- React.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 }),
36829
+ React.createElement(u, Object.assign({ size: size, variant: "surface", color: hasError ? "red" : undefined, className: `${variantClass} ${className || ''}` }, props),
36528
36830
  React.createElement(c, { style: { padding: 0 } },
36529
36831
  React.createElement(C$1, { value: country, onValueChange: (value) => setCountry(value) },
36530
36832
  React.createElement(u$1, { variant: "ghost", style: {
@@ -36532,7 +36834,9 @@ const PhoneInput = (_a) => {
36532
36834
  padding: '0 8px 0 12px',
36533
36835
  gap: '6px',
36534
36836
  borderTopRightRadius: 0,
36535
- borderBottomRightRadius: 0
36837
+ borderBottomRightRadius: 0,
36838
+ backgroundColor: 'var(--gray-3)',
36839
+ borderRight: '1px solid var(--gray-alpha-5)'
36536
36840
  } },
36537
36841
  React.createElement(p$5, { align: "center", gap: "2" },
36538
36842
  React.createElement(FlagIcon, { country: country }),
@@ -36547,9 +36851,8 @@ const PhoneInput = (_a) => {
36547
36851
  React.createElement(p$d, { color: "gray", size: "1" },
36548
36852
  "(+",
36549
36853
  getCountryCallingCode(c),
36550
- ")"))))))),
36551
- React.createElement("div", { style: { width: '1px', height: '20px', backgroundColor: 'var(--gray-a4)', alignSelf: 'center' } })),
36552
- React.createElement(PhoneInputInput, { country: country, value: field.value, onChange: (val) => setFieldValue(alias, val), onBlur: () => setFieldTouched(alias, true), placeholder: placeholder, readOnly: readonly, style: {
36854
+ ")")))))))),
36855
+ React.createElement(Input, { country: country, international: false, withCountryCallingCode: false, limitMaxLength: true, value: field.value || '', onChange: (val) => setFieldValue(alias, val || ''), onBlur: () => setFieldTouched(alias, true), readOnly: readonly, placeholder: placeholder, id: `${alias}FormInput`, "aria-describedby": `${alias}InputLabel`, style: {
36553
36856
  flex: 1,
36554
36857
  border: 'none',
36555
36858
  outline: 'none',
@@ -36558,15 +36861,15 @@ const PhoneInput = (_a) => {
36558
36861
  paddingLeft: '12px',
36559
36862
  color: 'var(--gray-12)',
36560
36863
  fontFamily: 'var(--default-font-family)',
36561
- fontSize: 'var(--font-size-2)'
36864
+ fontSize: 'var(--font-size-2)',
36865
+ width: '100%'
36562
36866
  } })),
36563
36867
  React.createElement("div", { style: { marginTop: 4, display: 'flex', alignItems: 'center', gap: 6 } },
36564
36868
  React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
36565
- "\u00A0",
36566
36869
  props.isHinted && (React.createElement(e, { content: props.hintText || "No hint available" },
36567
36870
  React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { display: 'flex' } },
36568
36871
  React.createElement(QuestionMarkCircledIcon, { height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
36569
- hasError && (React.createElement(p$d, { id: errorId, size: "1", color: "red", className: 'core-input-label-error' }, props.errorText || `Required field`))))));
36872
+ hasError && (React.createElement(p$d, { id: errorId, size: "1", color: "red", className: 'core-input-label-error' }, props.errorText || meta.error || `Required field`))))));
36570
36873
  };
36571
36874
 
36572
36875
  /** Checks if value is string */
@@ -40358,16 +40661,27 @@ const parseUuidFormat = (input) => {
40358
40661
 
40359
40662
  const UUIDInput = (_a) => {
40360
40663
  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"]);
40361
- let activeFormat = format;
40362
- if (type && type.toLowerCase().startsWith("uuid") && type.length > 4) {
40363
- activeFormat = parseUuidFormat(type) || format;
40364
- }
40365
- const maskPattern = activeFormat.map(len => '*'.repeat(len)).join(delimiter);
40366
40664
  const { setFieldValue, setFieldTouched } = formik.useFormikContext();
40367
40665
  const [field, meta] = formik.useField(alias);
40368
40666
  const hasError = Boolean(meta.touched && meta.error);
40369
40667
  const [copied, setCopied] = React.useState(false);
40370
40668
  const errorId = `${alias}-error`;
40669
+ const { maskPattern, definitions } = React.useMemo(() => {
40670
+ let activeFormat = format;
40671
+ if (type && type.toLowerCase().startsWith("uuid") && type.length > 4) {
40672
+ const parsed = parseUuidFormat(type);
40673
+ if (parsed)
40674
+ activeFormat = parsed;
40675
+ }
40676
+ const maskChar = '#';
40677
+ const pattern = activeFormat.map(len => maskChar.repeat(len)).join(delimiter);
40678
+ return {
40679
+ maskPattern: pattern,
40680
+ definitions: {
40681
+ '#': /[0-9a-fA-F]/
40682
+ }
40683
+ };
40684
+ }, [format, type, delimiter]);
40371
40685
  const handleCopy = () => {
40372
40686
  navigator.clipboard.writeText(field.value || '');
40373
40687
  setCopied(true);
@@ -40377,7 +40691,7 @@ const UUIDInput = (_a) => {
40377
40691
  return (React.createElement(Column, { span: width, newLine: props.newRow },
40378
40692
  React.createElement(p$5, { direction: "column", gap: "2", style: { width: '100%' } },
40379
40693
  React.createElement(u, Object.assign({ size: size, variant: "surface", color: hasError ? 'red' : undefined, className: `${variantClass} ${className || ''}` }, props),
40380
- React.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: {
40694
+ React.createElement(IMaskInput, { id: `${alias}FormInput`, name: alias, "aria-describedby": `${alias}InputLabel`, readOnly: readOnly, mask: maskPattern, definitions: definitions, value: field.value || '', unmask: true, onAccept: (val) => setFieldValue(alias, val), onBlur: () => setFieldTouched(alias, true), placeholder: placeholder, style: {
40381
40695
  flex: 1,
40382
40696
  border: 'none',
40383
40697
  outline: 'none',
@@ -40389,7 +40703,7 @@ const UUIDInput = (_a) => {
40389
40703
  fontSize: 'var(--font-size-2)',
40390
40704
  textTransform: 'uppercase',
40391
40705
  width: '100%'
40392
- }, autoComplete: "off" }),
40706
+ }, autoComplete: "off", spellCheck: false }),
40393
40707
  React.createElement(c, null,
40394
40708
  React.createElement(e, { content: copied ? "Copied!" : "Copy to clipboard" },
40395
40709
  React.createElement(o$5, { size: "1", variant: "ghost", color: copied ? "green" : "gray", onClick: handleCopy, type: "button", disabled: !field.value }, copied ? React.createElement(CheckIcon, null) : React.createElement(CopyIcon, null))))),
@@ -40399,7 +40713,7 @@ const UUIDInput = (_a) => {
40399
40713
  props.isHinted && (React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
40400
40714
  React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
40401
40715
  React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
40402
- hasError && (React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || `Required field`))))));
40716
+ hasError && (React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || meta.error || `Required field`))))));
40403
40717
  };
40404
40718
 
40405
40719
  var FaCcVisa = {};
@@ -41952,13 +42266,22 @@ const CURRENCIES = {
41952
42266
  };
41953
42267
 
41954
42268
  const CurrencyInput = (_a) => {
41955
- 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"]);
42269
+ 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"]);
41956
42270
  const { setFieldValue, setFieldTouched } = formik.useFormikContext();
41957
42271
  const [amountField, amountMeta] = formik.useField(alias);
41958
- const currencyFieldName = inputtype === "currency" ? "USD" : inputtype;
41959
- const [currencyField] = formik.useField(currencyFieldName);
42272
+ const currencyAlias = `${alias}Currency`;
42273
+ const [currencyField, , currencyHelpers] = formik.useField(currencyAlias);
42274
+ React.useEffect(() => {
42275
+ if (inputtype !== "currency" && CURRENCIES[inputtype]) {
42276
+ currencyHelpers.setValue(inputtype);
42277
+ }
42278
+ else if (!currencyField.value) {
42279
+ currencyHelpers.setValue(defaultValue);
42280
+ }
42281
+ }, [inputtype, defaultValue]);
41960
42282
  const hasError = Boolean(amountMeta.touched && amountMeta.error);
41961
- const activeCurrency = CURRENCIES[currencyField.value] || CURRENCIES.USD;
42283
+ const currentCode = currencyField.value || "USD";
42284
+ const activeCurrency = CURRENCIES[currentCode] || CURRENCIES.USD;
41962
42285
  const variantClass = inputVariant !== 'input-outline' ? `input-${inputVariant}` : '';
41963
42286
  const isOutline = inputVariant === 'input-outline';
41964
42287
  const errorId = `${alias}-error`;
@@ -41970,7 +42293,7 @@ const CurrencyInput = (_a) => {
41970
42293
  backgroundColor: isOutline ? 'var(--color-surface)' : undefined,
41971
42294
  cursor: 'text'
41972
42295
  } },
41973
- React.createElement(C$1, { value: activeCurrency.code, onValueChange: (val) => setFieldValue(currencyFieldName, val) },
42296
+ React.createElement(C$1, { value: activeCurrency.code, onValueChange: (val) => setFieldValue(currencyAlias, val), disabled: readOnly || inputtype !== "currency" },
41974
42297
  React.createElement(u$1, { variant: "ghost", style: {
41975
42298
  height: '100%',
41976
42299
  padding: '0 8px 0 12px',
@@ -41992,11 +42315,16 @@ const CurrencyInput = (_a) => {
41992
42315
  c.symbol,
41993
42316
  ")"))))))),
41994
42317
  React.createElement(p$d, { color: "gray", size: "2", style: { paddingLeft: '12px', userSelect: 'none' } }, activeCurrency.symbol),
41995
- React.createElement(IMaskInput, { id: `${alias}FormInput`, name: alias, "aria-describedby": `${alias}InputLabel`, mask: Number, scale: activeCurrency.scale, defaultValue: defaultValue, readOnly: readOnly,
41996
- // @ts-expect-error: known library type definition gap
41997
- signed: false, thousandsSeparator: ",", padFractionalZeros: true, normalizeZeros: true, radix: ".", mapToRadix: ['.'],
41998
- // Bind to Amount Field
41999
- 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: {
42318
+ React.createElement(IMaskInput, Object.assign({ id: `${alias}FormInput`, name: alias, "aria-describedby": `${alias}InputLabel` }, {
42319
+ mask: Number,
42320
+ scale: activeCurrency.scale,
42321
+ signed: false,
42322
+ thousandsSeparator: ",",
42323
+ padFractionalZeros: true,
42324
+ normalizeZeros: true,
42325
+ radix: ".",
42326
+ mapToRadix: ['.'],
42327
+ }, { 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: {
42000
42328
  flex: 1,
42001
42329
  border: 'none',
42002
42330
  outline: 'none',
@@ -42008,14 +42336,14 @@ const CurrencyInput = (_a) => {
42008
42336
  fontSize: 'var(--font-size-2)',
42009
42337
  textAlign: 'right',
42010
42338
  width: '100%'
42011
- }, inputMode: "decimal", autoComplete: "off" })),
42339
+ }, inputMode: "decimal", autoComplete: "off" }))),
42012
42340
  React.createElement("div", null,
42013
- React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel),
42341
+ React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
42014
42342
  "\u00A0",
42015
42343
  props.isHinted && (React.createElement(e, { content: props.hintText || "No hint available" },
42016
42344
  React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { display: 'flex' } },
42017
42345
  React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
42018
- hasError && (React.createElement(p$d, { id: errorId, size: "1", color: "red", className: 'core-input-label-error' }, props.errorText || `Required field`))))));
42346
+ hasError && (React.createElement(p$d, { id: errorId, size: "1", color: "red", className: 'core-input-label-error' }, props.errorText || amountMeta.error || `Required field`))))));
42019
42347
  };
42020
42348
 
42021
42349
  var FaChartLine = {};
@@ -42036,7 +42364,7 @@ function requireFaChartLine () {
42036
42364
  var FaChartLineExports = /*@__PURE__*/ requireFaChartLine();
42037
42365
 
42038
42366
  const StockInput = (_a) => {
42039
- 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"]);
42367
+ 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"]);
42040
42368
  const { setFieldValue, setFieldTouched } = formik.useFormikContext();
42041
42369
  const [priceField, meta] = formik.useField(alias);
42042
42370
  const hasError = Boolean(meta.touched && meta.error);
@@ -42084,7 +42412,7 @@ const StockInput = (_a) => {
42084
42412
  fontFamily: 'var(--default-font-family)',
42085
42413
  }, inputMode: "decimal", autoComplete: "off" }))),
42086
42414
  React.createElement("div", null,
42087
- React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel),
42415
+ React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
42088
42416
  "\u00A0",
42089
42417
  props.isHinted && (React.createElement(e, { content: props.hintText || "No hint available" },
42090
42418
  React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { display: 'flex' } },
@@ -42093,7 +42421,7 @@ const StockInput = (_a) => {
42093
42421
  };
42094
42422
 
42095
42423
  const RadioGroupInput = (_a) => {
42096
- 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"]);
42424
+ 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"]);
42097
42425
  const { setFieldValue, setFieldTouched } = formik.useFormikContext();
42098
42426
  const [field, meta] = formik.useField(alias);
42099
42427
  const hasError = Boolean(meta.touched && meta.error);
@@ -42162,19 +42490,20 @@ const RadioGroupInput = (_a) => {
42162
42490
  React.createElement("span", { style: { userSelect: 'none' } }, inputoption.text))));
42163
42491
  }))),
42164
42492
  React.createElement("div", null,
42165
- React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel),
42166
- hasError ?
42167
- React.createElement(React.Fragment, null,
42168
- React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || `Required field`)) : null,
42493
+ React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
42494
+ "\u00A0",
42169
42495
  props.isHinted ?
42170
42496
  React.createElement(React.Fragment, null,
42171
42497
  React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
42172
42498
  React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
42173
- React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null))));
42499
+ React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
42500
+ hasError ?
42501
+ React.createElement(React.Fragment, null,
42502
+ React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || `Required field`)) : null))));
42174
42503
  };
42175
42504
 
42176
42505
  const OptionSelect = (_a) => {
42177
- 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"]);
42506
+ 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"]);
42178
42507
  const triggerRef = React.useRef(null);
42179
42508
  const [neuVars, setNeuVars] = React.useState({});
42180
42509
  const { setFieldValue, setFieldTouched } = formik.useFormikContext();
@@ -42227,40 +42556,46 @@ const OptionSelect = (_a) => {
42227
42556
  return (React.createElement(Column, { span: width, newLine: props.newRow },
42228
42557
  React.createElement(p$5, { direction: "column", gap: "2", style: { width: '100%' } },
42229
42558
  inputtype === 'select-neumorphic' && (React.createElement("style", { dangerouslySetInnerHTML: { __html: `
42230
- .neu-select-trigger[data-state='open'] {
42231
- box-shadow: inset 6px 6px 12px var(--neu-shadow-dark),
42232
- inset -6px -6px 12px var(--neu-shadow-light) !important;
42233
- }
42234
- .neu-select-item:hover {
42235
- background-color: rgba(0,0,0,0.05) !important;
42236
- cursor: pointer;
42237
- }
42238
- ` } })),
42559
+ .neu-select-trigger[data-state='open'] {
42560
+ box-shadow: inset 6px 6px 12px var(--neu-shadow-dark),
42561
+ inset -6px -6px 12px var(--neu-shadow-light) !important;
42562
+ }
42563
+ .neu-select-item:hover {
42564
+ background-color: rgba(0,0,0,0.05) !important;
42565
+ cursor: pointer;
42566
+ }
42567
+ ` } })),
42239
42568
  React.createElement(C$1, { name: alias, disabled: readOnly, "aria-describedby": `${alias}InputLabel`, defaultValue: props.defaultValue, value: field.value, onValueChange: (val) => {
42240
42569
  setFieldValue(alias, val);
42241
42570
  setTimeout(() => setFieldTouched(alias, true), 0);
42571
+ if (props.onValueChange)
42572
+ props.onValueChange(val);
42242
42573
  }, onOpenChange: (isOpen) => {
42243
42574
  if (!isOpen) {
42244
42575
  setFieldTouched(alias, true);
42245
42576
  }
42246
42577
  } },
42247
- React.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) }),
42248
- React.createElement(g, { position: "popper", sideOffset: 5 }, inputoptions.map((option) => (React.createElement(v, { id: String(option.optionid) || '', key: option.optionid, value: option.optionvalue, className: inputtype === 'select-neumorphic' ? 'neu-select-item' : '' }, option.text))))),
42578
+ React.createElement(u$1, { id: `${alias}FormInput`, ref: triggerRef, variant: "ghost", placeholder: placeholder || "Select an option", className: `${inputtype === 'select-neumorphic' ? 'neu-select-trigger' : ''} ${className || ''}`, style: Object.assign(Object.assign({}, activeTriggerStyle), style) }),
42579
+ React.createElement(g, { position: "popper", sideOffset: 5 },
42580
+ React.createElement(v, { value: "", className: inputtype === 'select-neumorphic' ? 'neu-select-item' : '', style: { color: 'var(--gray-10)', fontStyle: 'italic' } }, placeholder || "Select an option"),
42581
+ React.createElement(o$2, { size: "4", style: { margin: '4px 0', opacity: 0.5 } }),
42582
+ inputoptions.map((option) => (React.createElement(v, { id: String(option.optionid) || '', key: option.optionid, value: option.optionvalue, className: inputtype === 'select-neumorphic' ? 'neu-select-item' : '' }, option.text))))),
42249
42583
  React.createElement("div", null,
42250
- React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel),
42251
- hasError ?
42252
- React.createElement(React.Fragment, null,
42253
- React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || `Required field`)) : null,
42584
+ React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
42585
+ "\u00A0",
42254
42586
  props.isHinted ?
42255
42587
  React.createElement(React.Fragment, null,
42256
42588
  React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
42257
42589
  React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
42258
- React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null))));
42590
+ React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
42591
+ hasError ?
42592
+ React.createElement(React.Fragment, null,
42593
+ React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || (meta.error || "Required field"))) : null))));
42259
42594
  };
42260
42595
 
42261
42596
  const MultipleSelect = (_a) => {
42262
42597
  var _b;
42263
- 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"]);
42598
+ 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"]);
42264
42599
  const { setFieldValue, setFieldTouched } = formik.useFormikContext();
42265
42600
  const [field, meta] = formik.useField(alias);
42266
42601
  const selectedValues = (Array.isArray(field.value) ? field.value : []);
@@ -42345,19 +42680,20 @@ const MultipleSelect = (_a) => {
42345
42680
  React.createElement(p$d, { size: "2" }, inputoption.text)));
42346
42681
  })))))),
42347
42682
  React.createElement("div", null,
42348
- React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel),
42349
- hasError ?
42350
- React.createElement(React.Fragment, null,
42351
- React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || `Required field`)) : null,
42683
+ React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
42684
+ "\u00A0",
42352
42685
  props.isHinted ?
42353
42686
  React.createElement(React.Fragment, null,
42354
42687
  React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
42355
42688
  React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
42356
- React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null))));
42689
+ React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
42690
+ hasError ?
42691
+ React.createElement(React.Fragment, null,
42692
+ React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || `Required field`)) : null))));
42357
42693
  };
42358
42694
 
42359
42695
  const SliderInput = (_a) => {
42360
- 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"]);
42696
+ 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"]);
42361
42697
  const { setFieldValue, setFieldTouched } = formik.useFormikContext();
42362
42698
  const [field, meta] = formik.useField(alias);
42363
42699
  const fieldValue = Array.isArray(field.value) ? field.value : [field.value || minvalue];
@@ -42444,15 +42780,16 @@ const SliderInput = (_a) => {
42444
42780
  setFieldTouched(alias, true);
42445
42781
  }, className: inputtype === 'slider-neumorphic' ? 'neu-slider' : inputtype === 'slider-outline' ? 'outline-slider' : '', style: neuVars }),
42446
42782
  React.createElement("div", null,
42447
- React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel),
42448
- hasError ?
42449
- React.createElement(React.Fragment, null,
42450
- React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || `Required field`)) : null,
42783
+ React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
42784
+ "\u00A0",
42451
42785
  props.isHinted ?
42452
42786
  React.createElement(React.Fragment, null,
42453
42787
  React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
42454
42788
  React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
42455
- React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null))));
42789
+ React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
42790
+ hasError ?
42791
+ React.createElement(React.Fragment, null,
42792
+ React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || `Required field`)) : null))));
42456
42793
  };
42457
42794
 
42458
42795
  const RangeSlider = (_a) => {
@@ -42524,39 +42861,40 @@ const RangeSlider = (_a) => {
42524
42861
  }, onValueCommit: () => setFieldTouched(alias, true), className: inputtype === 'range-neumorphic' ? 'neu-slider' : inputtype === 'range-outline' ? 'outline-slider' : '', style: neuVars }),
42525
42862
  React.createElement("div", null,
42526
42863
  React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
42527
- hasError ?
42528
- React.createElement(React.Fragment, null,
42529
- React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || `Required field`)) : null,
42864
+ "\u00A0",
42530
42865
  props.isHinted ?
42531
42866
  React.createElement(React.Fragment, null,
42532
42867
  React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
42533
42868
  React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
42534
- React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null))));
42869
+ React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
42870
+ hasError ?
42871
+ React.createElement(React.Fragment, null,
42872
+ React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || `Required field`)) : null))));
42535
42873
  };
42536
42874
 
42537
42875
  const Toggle = (_a) => {
42538
- 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"]);
42876
+ 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"]);
42539
42877
  const { setFieldValue, setFieldTouched } = formik.useFormikContext();
42540
42878
  const [field, meta] = formik.useField(alias);
42541
42879
  const hasError = Boolean(meta.touched && meta.error);
42542
- const buttonRef = React.useRef(null);
42543
- const [neumorphicVars, setNeumorphicVars] = React.useState({});
42544
- const errorId = `${alias}-error`;
42880
+ const containerRef = React.useRef(null);
42881
+ const [neuVars, setNeuVars] = React.useState({
42882
+ '--neu-bg': '#ecf0f3',
42883
+ '--neu-shadow-light': '#ffffff',
42884
+ '--neu-shadow-dark': '#d1d9e6'
42885
+ });
42545
42886
  React.useEffect(() => {
42546
- if (inputtype === 'toggle-neumorphic' && buttonRef.current) {
42547
- const parentBg = getNearestParentBackground(buttonRef.current.parentElement);
42548
- const shadowDark = adjustColor(parentBg, -30);
42549
- const shadowLight = adjustColor(parentBg, 30);
42550
- setNeumorphicVars({
42551
- '--neu-bg': parentBg,
42552
- '--neu-shadow-dark': shadowDark,
42553
- '--neu-shadow-light': shadowLight,
42554
- '--neu-text': 'var(--gray-12)',
42555
- '--neu-active-color': 'var(--accent-9)',
42556
- });
42887
+ if (inputtype === 'toggle-neumorphic' && containerRef.current) {
42888
+ const parentBg = getNearestParentBackground(containerRef.current.parentElement);
42889
+ if (parentBg && parentBg !== 'transparent') {
42890
+ setNeuVars({
42891
+ '--neu-bg': parentBg,
42892
+ '--neu-shadow-dark': adjustColor(parentBg, -20),
42893
+ '--neu-shadow-light': adjustColor(parentBg, 20),
42894
+ });
42895
+ }
42557
42896
  }
42558
42897
  }, [inputtype]);
42559
- // --- STYLES ---
42560
42898
  const materialStyle = {
42561
42899
  textTransform: 'uppercase',
42562
42900
  letterSpacing: '0.05em',
@@ -42569,86 +42907,108 @@ const Toggle = (_a) => {
42569
42907
  background: 'transparent',
42570
42908
  transition: 'all 0.1s ease',
42571
42909
  };
42572
- const neumorphicStyle = {
42573
- backgroundColor: 'var(--neu-bg)',
42574
- color: 'var(--neu-text)',
42575
- border: 'none',
42576
- borderRadius: '12px',
42577
- fontWeight: 600,
42578
- transition: 'all 0.2s ease-in-out',
42910
+ const handleToggle = (val) => {
42911
+ if (!readOnly) {
42912
+ setFieldValue(alias, val);
42913
+ setFieldTouched(alias, true);
42914
+ }
42579
42915
  };
42580
42916
  return (React.createElement(Column, { span: width, newLine: newRow },
42581
- React.createElement(Root$1, { pressed: field.value, onPressedChange: (val) => {
42582
- if (!readOnly) {
42583
- setFieldValue(alias, val);
42584
- setFieldTouched(alias, true);
42585
- }
42586
- }, name: alias, disabled: readOnly, id: `${alias}FormInput`, "aria-describedby": `${alias}InputLabel`, asChild: true },
42587
- React.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" }),
42917
+ React.createElement("div", { ref: containerRef, style: { width: '100%', display: 'flex', flexDirection: 'column', gap: '4px' } },
42918
+ inputtype === 'toggle-neumorphic' ? (React.createElement("div", { className: "neu-toggle-wrapper", style: Object.assign(Object.assign({}, neuVars), { opacity: readOnly ? 0.6 : 1, pointerEvents: readOnly ? 'none' : 'auto' }), onClick: () => handleToggle(!field.value) },
42588
42919
  React.createElement("style", { dangerouslySetInnerHTML: { __html: `
42589
- /* --- MATERIAL --- */
42590
- .design-toggle.toggle-material[data-state='on'] {
42591
- background-color: var(--accent-9);
42592
- color: white;
42593
- box-shadow: 0 2px 5px rgba(0,0,0,0.2);
42594
- }
42595
- .design-toggle.toggle-material[data-state='off'] {
42596
- background-color: var(--gray-3);
42597
- color: var(--gray-11);
42598
- }
42599
-
42600
- /* --- OUTLINE --- */
42601
- .design-toggle.toggle-outline[data-state='on'] {
42602
- border: 2px solid var(--accent-9);
42603
- color: var(--accent-9);
42604
- background-color: var(--accent-2);
42605
- }
42606
- .design-toggle.toggle-outline[data-state='off'] {
42607
- border: 1px solid var(--gray-7);
42608
- color: var(--gray-11);
42609
- }
42920
+ .neu-toggle-wrapper {
42921
+ isolation: isolate;
42922
+ position: relative;
42923
+ height: 30px;
42924
+ width: 60px;
42925
+ border-radius: 15px;
42926
+ overflow: hidden;
42927
+ cursor: pointer;
42928
+ background: var(--neu-bg);
42929
+ box-shadow:
42930
+ -8px -4px 8px 0px var(--neu-shadow-light),
42931
+ 8px 4px 12px 0px var(--neu-shadow-dark),
42932
+ 4px 4px 4px 0px var(--neu-shadow-dark) inset,
42933
+ -4px -4px 4px 0px var(--neu-shadow-light) inset;
42934
+ }
42935
+
42936
+ /* The Input is hidden visually but keeps state for CSS selector */
42937
+ .neu-toggle-state {
42938
+ display: none;
42939
+ }
42610
42940
 
42611
- /* --- NEUMORPHIC --- */
42612
- .design-toggle.toggle-neumorphic[data-state='off'] {
42613
- box-shadow: 6px 6px 12px var(--neu-shadow-dark),
42614
- -6px -6px 12px var(--neu-shadow-light);
42615
- }
42616
- .design-toggle.toggle-neumorphic[data-state='on'] {
42617
- box-shadow: inset 6px 6px 12px var(--neu-shadow-dark),
42618
- inset -6px -6px 12px var(--neu-shadow-light);
42619
- color: var(--neu-active-color);
42620
- }
42621
- .design-toggle.toggle-neumorphic:hover {
42622
- transform: translateY(-1px);
42623
- }
42624
- ` } }),
42625
- children)),
42626
- React.createElement("div", null,
42627
- inputLabel && (React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel)),
42628
- isHinted && (React.createElement(e, { content: hintText || "No hint available" },
42629
- React.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { marginLeft: 6 } },
42630
- React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
42631
- hasError && (React.createElement(p$d, { id: errorId, size: "1", color: "red", style: { display: 'block', marginTop: 2 } }, props.errorText || `Required field`)))));
42632
- };
42941
+ .neu-indicator {
42942
+ height: 100%;
42943
+ width: 200%;
42944
+ background: var(--neu-bg);
42945
+ border-radius: 15px;
42946
+ transform: translate3d(-75%, 0, 0);
42947
+ transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35);
42948
+ box-shadow:
42949
+ -8px -4px 8px 0px var(--neu-shadow-light),
42950
+ 8px 4px 12px 0px var(--neu-shadow-dark);
42951
+ }
42633
42952
 
42634
- const Row = ({ children, className, gap = "4" }) => {
42635
- return (React.createElement(o$6, { columns: "12", gap: gap, width: "auto", className: className }, children));
42953
+ /* Sibling selector triggers animation when checked */
42954
+ .neu-toggle-state:checked ~ .neu-indicator {
42955
+ transform: translate3d(25%, 0, 0);
42956
+ }
42957
+ ` } }),
42958
+ React.createElement("input", { className: "neu-toggle-state", type: "checkbox", checked: !!field.value, readOnly: true }),
42959
+ React.createElement("div", { className: "neu-indicator" }),
42960
+ React.createElement(Icon, { name: icon }))) : (React.createElement(Root$1, { pressed: field.value, onPressedChange: handleToggle, name: alias, disabled: readOnly, id: `${alias}FormInput`, "aria-describedby": `${alias}InputLabel`, asChild: true },
42961
+ React.createElement(o$a, Object.assign({ disabled: readOnly }, props, { className: `design-toggle ${inputtype} ${props.className || ''}`, style: Object.assign(Object.assign(Object.assign(Object.assign({}, style), (inputtype === 'toggle' ? materialStyle : {})), (inputtype === 'toggle-material' ? materialStyle : {})), (inputtype === 'toggle-outline' ? outlineStyle : {})), type: "button" }),
42962
+ React.createElement("style", { dangerouslySetInnerHTML: { __html: `
42963
+ /* Material States */
42964
+ .design-toggle.toggle-material[data-state='on'] {
42965
+ background-color: var(--accent-9);
42966
+ color: white;
42967
+ box-shadow: 0 2px 5px rgba(0,0,0,0.2);
42968
+ }
42969
+ .design-toggle.toggle-material[data-state='off'] {
42970
+ background-color: var(--gray-3);
42971
+ color: var(--gray-11);
42972
+ }
42973
+ /* Outline States */
42974
+ .design-toggle.toggle-outline[data-state='on'] {
42975
+ border: 2px solid var(--accent-9);
42976
+ color: var(--accent-9);
42977
+ background-color: var(--accent-2);
42978
+ }
42979
+ .design-toggle.toggle-outline[data-state='off'] {
42980
+ border: 1px solid var(--gray-7);
42981
+ color: var(--gray-11);
42982
+ }
42983
+ ` } }),
42984
+ children))),
42985
+ React.createElement("div", null,
42986
+ inputLabel && (React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel)),
42987
+ "\u00A0",
42988
+ isHinted && (React.createElement(e, { content: hintText || "No hint available" },
42989
+ React.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { marginLeft: 6 } },
42990
+ React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
42991
+ hasError && (React.createElement(p$d, { size: "1", color: "red", style: { display: 'block', marginTop: 2 } }, props.errorText || `Required field`))))));
42636
42992
  };
42637
42993
 
42638
- const SectionTitle = (_a) => {
42639
- var { title, iconname, textColor = "#FFFFFF", backgroundColor = "#000000", fontFamily } = _a, props = __rest$1(_a, ["title", "iconname", "textColor", "backgroundColor", "fontFamily"]);
42640
- return (React.createElement(React.Fragment, null,
42641
- React.createElement(Row, null,
42642
- React.createElement(Column, { span: 12, newLine: true },
42643
- React.createElement("div", { id: "", style: { backgroundColor: backgroundColor }, className: 'core-input-section-ribbon' },
42644
- React.createElement("p", { style: { color: textColor, fontFamily: fontFamily ? fontFamily : 'inherit' }, className: 'core-input-section-text' },
42645
- React.createElement(Icon, { name: iconname || "input" }),
42646
- "\u00A0",
42647
- title),
42648
- props.subTitle ?
42649
- React.createElement(React.Fragment, null,
42650
- React.createElement("p", { style: { color: textColor, fontFamily: fontFamily ? fontFamily : 'inherit' }, className: 'core-input-section-text' }, props.subTitle))
42651
- : null)))));
42994
+ const SectionTitle = ({ title, width = 12, newRow = true, size = "5", subsize = "2", subtitle, align = "left", withSeparator = true, className }) => {
42995
+ return (React.createElement(Column, { span: width, newLine: newRow },
42996
+ React.createElement(p$5, { direction: "column", gap: "2", className: className, style: {
42997
+ width: '100%',
42998
+ marginBottom: 'var(--space-2)',
42999
+ textAlign: align
43000
+ } },
43001
+ React.createElement(r$g, { size: size, weight: "bold", style: {
43002
+ width: '100%',
43003
+ color: 'var(--gray-12)',
43004
+ lineHeight: '1.2'
43005
+ } }, title),
43006
+ subtitle && (React.createElement(p$d, { size: subsize, color: "gray", style: { maxWidth: '80%', margin: align === 'center' ? '0 auto' : undefined } }, subtitle)),
43007
+ withSeparator && (React.createElement(o$2, { size: "4", style: {
43008
+ width: '100%',
43009
+ marginTop: '4px',
43010
+ backgroundColor: 'var(--gray-6)'
43011
+ } })))));
42652
43012
  };
42653
43013
 
42654
43014
  const Container = (_a) => {
@@ -42659,6 +43019,10 @@ const Container = (_a) => {
42659
43019
  return (React.createElement(p$2, Object.assign({ size: "3", px: "3" }, props), children));
42660
43020
  };
42661
43021
 
43022
+ const Row = ({ children, className, gap = "4" }) => {
43023
+ return (React.createElement(o$6, { columns: "12", gap: gap, width: "auto", className: className }, children));
43024
+ };
43025
+
42662
43026
  /** A special constant with type `never` */
42663
43027
  function $constructor(name, initializer, params) {
42664
43028
  function init(inst, def) {
@@ -47176,7 +47540,7 @@ exports.FileMultiple = FileMultiple;
47176
47540
  exports.FlagIcon = FlagIcon;
47177
47541
  exports.Icon = Icon;
47178
47542
  exports.ImageOutput = ImageOutput;
47179
- exports.Input = Input$1;
47543
+ exports.Input = Input$2;
47180
47544
  exports.MultipleSelect = MultipleSelect;
47181
47545
  exports.OptionSelect = OptionSelect;
47182
47546
  exports.PasswordInput = PasswordInput;