@emeraldemperaur/vector-sigma 1.4.4 → 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 +695 -327
  2. package/lib/index.esm.js +695 -327
  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
@@ -12114,15 +12114,19 @@ const Column = (_a) => {
12114
12114
  return "span 12";
12115
12115
  return `span ${value}`;
12116
12116
  };
12117
- const spanString = span ? `span ${span}` : (getSpan(xs) || "span 12");
12118
- const initialGridColumn = newLine ? `1 / ${spanString}` : spanString;
12117
+ const formatGridColumn = (spanValue) => {
12118
+ if (!spanValue)
12119
+ return undefined;
12120
+ return newLine ? `1 / ${spanValue}` : spanValue;
12121
+ };
12122
+ const baseSpan = span ? `span ${span}` : (getSpan(xs) || "span 12");
12119
12123
  return (React.createElement(p$8, Object.assign({}, props, { gridColumn: {
12120
- initial: initialGridColumn,
12121
- xs: getSpan(xs),
12122
- sm: getSpan(sm),
12123
- md: getSpan(md),
12124
- lg: getSpan(lg),
12125
- xl: getSpan(xl),
12124
+ initial: formatGridColumn(baseSpan),
12125
+ xs: formatGridColumn(getSpan(xs)),
12126
+ sm: formatGridColumn(getSpan(sm)),
12127
+ md: formatGridColumn(getSpan(md)),
12128
+ lg: formatGridColumn(getSpan(lg)),
12129
+ xl: formatGridColumn(getSpan(xl)),
12126
12130
  } }), children));
12127
12131
  };
12128
12132
 
@@ -12516,7 +12520,7 @@ const getDesignStyles = (inputtype, isOpen) => {
12516
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)' });
12517
12521
  };
12518
12522
  const ConditionalTrigger = (_a) => {
12519
- 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"]);
12520
12524
  const [field, meta, helpers] = formik.useField(alias);
12521
12525
  const { setTouched } = formik.useFormikContext();
12522
12526
  const inputId = `${alias}FormInput` || crypto.randomUUID();
@@ -12533,16 +12537,16 @@ const ConditionalTrigger = (_a) => {
12533
12537
  switch (true) {
12534
12538
  case inputtype.includes('conditionalcheckbox'):
12535
12539
  return (React.createElement(p$5, { align: "center", gap: "2", style: { cursor: 'pointer' } },
12536
- 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 })));
12537
12541
  case inputtype.includes('conditionalselect'):
12538
12542
  return (React.createElement(p$5, { direction: "column", gap: "1", style: { width: '100%' } },
12539
- 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 },
12540
12544
  React.createElement(u$1, { id: inputId, variant: isNeumorphic ? 'soft' : 'surface', style: { width: '100%' } }),
12541
12545
  React.createElement(g, null, inputoptions.map((inputoption) => (React.createElement(v, { key: inputoption.optionvalue || crypto.randomUUID(), value: inputoption.optionvalue }, inputoption.text)))))));
12542
12546
  case inputtype.includes('conditionaltoggle'):
12543
12547
  default:
12544
12548
  return (React.createElement(p$5, { justify: "between", align: "center", style: { width: '100%' } },
12545
- 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' })));
12546
12550
  }
12547
12551
  };
12548
12552
  const containerStyle = getDesignStyles(inputtype, isOpen);
@@ -20849,10 +20853,12 @@ const DatePicker = (_a) => {
20849
20853
  const { setFieldValue, setFieldTouched } = formik.useFormikContext();
20850
20854
  const [field, meta] = formik.useField(alias);
20851
20855
  const hasError = Boolean(meta.touched && meta.error);
20852
- 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;
20853
20859
  const parsedMin = ensureDate(minvalue);
20854
20860
  const parsedMax = ensureDate(maxvalue);
20855
- const inputId = `${alias}FormInput` || crypto.randomUUID();
20861
+ const inputId = `${alias}FormInput`;
20856
20862
  const errorId = `${alias}-error`;
20857
20863
  const [isOpen, setIsOpen] = React.useState(false);
20858
20864
  const containerRef = React.useRef(null);
@@ -20869,85 +20875,177 @@ const DatePicker = (_a) => {
20869
20875
  });
20870
20876
  }
20871
20877
  }, [inputtype]);
20872
- // --- STYLES ---
20873
- const activeInputStyle = inputtype === 'datepicker-neumorphic'
20874
- ? 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'
20875
- ? { backgroundColor: 'transparent', boxShadow: 'none', border: hasError ? '2px solid var(--red-9)' : '2px solid var(--gray-7)' }
20876
- : { 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]);
20877
20911
  return (React.createElement(Column, { span: width, newLine: props.newRow },
20878
20912
  React.createElement(p$5, { direction: "column", gap: "2", width: "100%", ref: containerRef, style: style, className: className },
20879
20913
  React.createElement("input", { type: "hidden", "aria-describedby": `${alias}InputLabel`, name: alias, value: selectedDate ? selectedDate.toISOString() : '' }),
20880
20914
  React.createElement("style", { dangerouslySetInnerHTML: { __html: `
20881
- /* Base Calendar */
20882
- .rdp { --rdp-cell-size: 32px; margin: 0; }
20883
- .rdp-months { display: flex; justify-content: center; }
20884
- .rdp-month { background: ${inputtype === 'datepicker-neumorphic' ? 'var(--neu-bg)' : 'var(--color-panel-solid)'}; padding: 10px; border-radius: 8px; }
20885
- .rdp-caption { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
20886
- .rdp-caption_label { font-weight: bold; color: var(--gray-12); font-size: var(--font-size-3); }
20887
- .rdp-nav { display: flex; gap: 5px; }
20888
- .rdp-head_cell { font-size: 0.8rem; font-weight: 500; color: var(--gray-10); padding-bottom: 5px; }
20889
-
20890
- /* Day */
20891
- .rdp-day {
20892
- width: var(--rdp-cell-size); height: var(--rdp-cell-size);
20893
- border-radius: 50%; border: none; background: transparent;
20894
- cursor: pointer; color: var(--gray-12);
20895
- display: flex; align-items: center; justify-content: center;
20896
- }
20897
- .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
+ }
20898
20982
 
20899
- /* Selected State */
20900
- .rdp-day_selected {
20901
- background-color: var(--accent-9); color: white;
20902
- font-weight: bold;
20903
- }
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
+ }
20904
20993
 
20905
- /* NEUMORPHIC OVERRIDES */
20906
- .neu-calendar .rdp-month {
20907
- /* The floating plate */
20908
- box-shadow: 6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light);
20909
- }
20910
- .neu-calendar .rdp-day:hover:not(.rdp-day_selected) {
20911
- background-color: transparent;
20912
- /* Hover = pop out slightly */
20913
- box-shadow: 3px 3px 6px var(--neu-shadow-dark), -3px -3px 6px var(--neu-shadow-light);
20914
- }
20915
- .neu-calendar .rdp-day_selected {
20916
- background-color: var(--neu-bg);
20917
- color: var(--neu-accent);
20918
- /* Pressed in state for selected */
20919
- box-shadow: inset 3px 3px 6px var(--neu-shadow-dark), inset -3px -3px 6px var(--neu-shadow-light);
20920
- }
20921
- ` } }),
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
+ ` } }),
20922
21015
  React.createElement(P$1, { open: isOpen, onOpenChange: setIsOpen },
20923
21016
  React.createElement(s$1, null,
20924
- 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) },
20925
21018
  React.createElement(c, null,
20926
21019
  React.createElement(Icon, { name: 'calendar', height: "16", width: "16", style: { color: 'var(--gray-10)' } })),
20927
- 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: {
20928
21021
  backgroundColor: 'transparent',
20929
21022
  border: 'none',
20930
21023
  outline: 'none',
20931
21024
  width: '100%',
20932
- cursor: 'pointer',
21025
+ cursor: readonly ? 'default' : 'pointer',
20933
21026
  color: 'inherit',
20934
21027
  fontFamily: 'inherit',
20935
- fontSize: 'var(--font-size-2)'
21028
+ fontSize: 'var(--font-size-2)',
21029
+ fontWeight: 500
20936
21030
  }, id: inputId, "aria-describedby": hasError ? errorId : `${alias}InputLabel` }))),
20937
- React.createElement(i$3, { style: { padding: 0, backgroundColor: 'transparent', boxShadow: 'none' }, align: "start" },
20938
- React.createElement("div", { className: inputtype === 'datepicker-neumorphic' ? 'neu-calendar' : '', style: neuVars },
20939
- React.createElement(DayPicker, { mode: "single", selected: selectedDate, onSelect: (date) => {
20940
- setFieldValue(alias, date);
20941
- setIsOpen(false);
20942
- setFieldTouched(alias, true);
20943
- }, disabled: [{ before: parsedMin || new Date(1900, 0, 1) }, { after: parsedMax || new Date(2100, 0, 1) }], components: {
20944
- Chevron: (props) => {
20945
- if (props.orientation === 'left') {
20946
- return React.createElement(Icon, { name: 'chevronleft', height: "16", width: "16" });
20947
- }
20948
- 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 });
20949
21045
  }
20950
- } })))),
21046
+ return React.createElement(Icon, { name: 'chevronright', height: "16", width: "16", style: style });
21047
+ }
21048
+ } }))),
20951
21049
  React.createElement("div", null,
20952
21050
  React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
20953
21051
  "\u00A0",
@@ -20958,16 +21056,16 @@ const DatePicker = (_a) => {
20958
21056
  React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
20959
21057
  hasError ?
20960
21058
  React.createElement(React.Fragment, null,
20961
- 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))));
20962
21060
  };
20963
21061
 
20964
21062
  const DateRangePicker = (_a) => {
20965
21063
  var _b, _c;
20966
- 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"]);
20967
21065
  const { setFieldValue, setFieldTouched } = formik.useFormikContext();
20968
21066
  const [field, meta] = formik.useField(alias);
20969
21067
  const hasError = Boolean(meta.touched && meta.error);
20970
- // 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" }
20971
21069
  const rawVal = field.value || {};
20972
21070
  const selectedRange = {
20973
21071
  from: ensureDate(rawVal.from),
@@ -20975,7 +21073,7 @@ const DateRangePicker = (_a) => {
20975
21073
  };
20976
21074
  const parsedMin = ensureDate(minvalue);
20977
21075
  const parsedMax = ensureDate(maxvalue);
20978
- const inputId = `${alias}FormInput` || crypto.randomUUID();
21076
+ const inputId = `${alias}FormInput`;
20979
21077
  const errorId = `${alias}-error`;
20980
21078
  const [isOpen, setIsOpen] = React.useState(false);
20981
21079
  const containerRef = React.useRef(null);
@@ -21001,11 +21099,38 @@ const DateRangePicker = (_a) => {
21001
21099
  displayText = format$2(selectedRange.from, 'LLL dd');
21002
21100
  }
21003
21101
  }
21004
- // Styles
21005
- const activeInputStyle = inputtype === 'daterangepicker-neumorphic'
21006
- ? 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'
21007
- ? { backgroundColor: 'transparent', boxShadow: 'none', border: hasError ? '2px solid var(--red-9)' : '2px solid var(--gray-7)' }
21008
- : { 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]);
21009
21134
  return (React.createElement(Column, { span: width, newLine: props.newRow },
21010
21135
  React.createElement(p$5, { direction: "column", gap: "2", width: "100%", ref: containerRef, style: style, className: className },
21011
21136
  React.createElement("input", { type: "hidden", name: alias, value: JSON.stringify({
@@ -21013,31 +21138,120 @@ const DateRangePicker = (_a) => {
21013
21138
  to: (_c = selectedRange.to) === null || _c === void 0 ? void 0 : _c.toISOString()
21014
21139
  }) }),
21015
21140
  React.createElement("style", { dangerouslySetInnerHTML: { __html: `
21016
- .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
+ }
21017
21148
  .rdp-months { justify-content: center; }
21018
- .rdp-month { background: ${inputtype === 'daterangepicker-neumorphic' ? 'var(--neu-bg)' : 'var(--color-panel-solid)'}; padding: 10px; border-radius: 8px; }
21019
- .rdp-caption { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
21020
- .rdp-caption_label { font-weight: bold; color: var(--gray-12); font-size: var(--font-size-3); }
21021
- .rdp-nav { display: flex; gap: 5px; }
21022
- .rdp-head_cell { font-size: 0.8rem; font-weight: 500; color: var(--gray-10); padding-bottom: 5px; }
21023
- .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; }
21024
- .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
+ }
21025
21174
 
21026
- .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; }
21027
- .rdp-day_range_start { border-radius: 50% 0 0 50%; background-color: var(--accent-9); color: white; }
21028
- .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; }
21029
21219
 
21030
- /* Neumorphic */
21031
- .neu-calendar .rdp-month { box-shadow: 6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light); }
21032
- .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
+ ` : ''}
21033
21237
  ` } }),
21034
21238
  React.createElement(P$1, { open: isOpen, onOpenChange: setIsOpen },
21035
21239
  React.createElement(s$1, null,
21036
- 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) },
21037
21241
  React.createElement(c, null,
21038
21242
  React.createElement(Icon, { name: 'calendar', height: "16", width: "16", style: { color: 'var(--gray-10)' } })),
21039
- 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)' } }))),
21040
- 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 },
21041
21255
  React.createElement("div", { className: inputtype === 'daterangepicker-neumorphic' ? 'neu-calendar' : '', style: neuVars },
21042
21256
  React.createElement(DayPicker, { mode: "range", selected: selectedRange, onSelect: (range) => {
21043
21257
  setFieldValue(alias, range);
@@ -21046,13 +21260,15 @@ const DateRangePicker = (_a) => {
21046
21260
  setIsOpen(false);
21047
21261
  }
21048
21262
  }, disabled: [
21263
+ ...(readOnly ? [{ from: new Date(1900, 0, 1), to: new Date(2100, 0, 1) }] : []),
21049
21264
  { before: parsedMin || new Date(1900, 0, 1) },
21050
21265
  { after: parsedMax || new Date(2100, 0, 1) }
21051
21266
  ], components: {
21052
21267
  Chevron: (props) => {
21268
+ const style = { display: 'block', cursor: 'pointer', color: 'var(--gray-11)' };
21053
21269
  if (props.orientation === 'left')
21054
- return React.createElement(Icon, { name: 'chevronleft' });
21055
- 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 });
21056
21272
  }
21057
21273
  } })))),
21058
21274
  React.createElement("div", null,
@@ -21065,18 +21281,18 @@ const DateRangePicker = (_a) => {
21065
21281
  React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
21066
21282
  hasError ?
21067
21283
  React.createElement(React.Fragment, null,
21068
- 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))));
21069
21285
  };
21070
21286
 
21071
21287
  const DateTimePicker = (_a) => {
21072
- 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"]);
21073
21289
  const { setFieldValue, setFieldTouched } = formik.useFormikContext();
21074
21290
  const [field, meta] = formik.useField(alias);
21075
21291
  const hasError = Boolean(meta.touched && meta.error);
21076
21292
  const selectedDate = ensureDate(field.value);
21077
21293
  const parsedMin = ensureDate(minvalue);
21078
21294
  const parsedMax = ensureDate(maxvalue);
21079
- const inputId = `${alias}FormInput` || crypto.randomUUID();
21295
+ const inputId = `${alias}FormInput`;
21080
21296
  const errorId = `${alias}-error`;
21081
21297
  const [isOpen, setIsOpen] = React.useState(false);
21082
21298
  const containerRef = React.useRef(null);
@@ -21109,55 +21325,128 @@ const DateTimePicker = (_a) => {
21109
21325
  const baseDate = selectedDate || new Date();
21110
21326
  let newDate = baseDate;
21111
21327
  if (type === 'hours') {
21112
- // 0-23 limiters
21113
21328
  const h = Math.min(23, Math.max(0, numVal));
21114
21329
  newDate = setHours(baseDate, h);
21115
21330
  }
21116
21331
  else {
21117
- // 0-59 limiters
21118
21332
  const m = Math.min(59, Math.max(0, numVal));
21119
21333
  newDate = setMinutes(baseDate, m);
21120
21334
  }
21121
21335
  setFieldValue(alias, newDate);
21122
21336
  };
21123
- // Styles
21124
- const activeInputStyle = inputtype === 'datetimepicker-neumorphic'
21125
- ? 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'
21126
- ? { backgroundColor: 'transparent', boxShadow: 'none', border: hasError ? '2px solid var(--red-9)' : '2px solid var(--gray-7)' }
21127
- : { 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]);
21128
21369
  return (React.createElement(Column, { span: width, newLine: props.newRow },
21129
21370
  React.createElement(p$5, { direction: "column", gap: "2", width: "100%", ref: containerRef, style: style, className: className },
21130
21371
  React.createElement("input", { type: "hidden", name: alias, value: selectedDate ? selectedDate.toISOString() : '' }),
21131
21372
  React.createElement("style", { dangerouslySetInnerHTML: { __html: `
21132
- .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
+ }
21133
21381
  .rdp-months { justify-content: center; }
21134
- .rdp-month { background: ${inputtype === 'datetimepicker-neumorphic' ? 'var(--neu-bg)' : 'var(--color-panel-solid)'}; padding: 10px; border-radius: 8px; }
21135
- .rdp-caption { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
21136
- .rdp-caption_label { font-weight: bold; color: var(--gray-12); font-size: var(--font-size-3); }
21137
- .rdp-nav { display: flex; gap: 5px; }
21138
- .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; }
21139
- .rdp-day:hover:not(.rdp-day_selected) { background-color: var(--gray-4); }
21140
- .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
+ }
21141
21407
 
21142
- .neu-calendar .rdp-month { box-shadow: 6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light); }
21143
- .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); }
21144
- .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); }
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
+ }
21417
+
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; }
21145
21425
 
21146
21426
  /* Time Input Styling */
21147
21427
  .time-input {
21148
- text-align: center;
21149
- font-variant-numeric: tabular-nums;
21150
- width: 40px;
21151
- padding: 4px;
21152
- border-radius: 4px;
21153
- border: 1px solid var(--gray-6);
21154
- background: var(--color-surface);
21155
- }
21156
- .neu-calendar .time-input {
21157
- background: var(--neu-bg);
21158
- border: none;
21159
- 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;
21160
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
+ ` : ''}
21161
21450
  ` } }),
21162
21451
  React.createElement(P$1, { open: isOpen, onOpenChange: (open) => {
21163
21452
  setIsOpen(open);
@@ -21165,28 +21454,39 @@ const DateTimePicker = (_a) => {
21165
21454
  setFieldTouched(alias, true);
21166
21455
  } },
21167
21456
  React.createElement(s$1, null,
21168
- 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) },
21169
21458
  React.createElement(c, null,
21170
21459
  React.createElement(Icon, { name: 'calendar', height: "16", width: "16", style: { color: 'var(--gray-10)' } })),
21171
- 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)' } }))),
21172
- 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 },
21173
21466
  React.createElement("div", { className: inputtype === 'datetimepicker-neumorphic' ? 'neu-calendar' : '', style: neuVars },
21174
- 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: {
21175
- 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
+ }
21176
21478
  } }),
21177
21479
  React.createElement(o$2, { size: "4" }),
21178
21480
  React.createElement(p$5, { p: "3", gap: "3", align: "center", justify: "center", style: {
21179
- backgroundColor: inputtype === 'datetimepicker-neumorphic' ? 'var(--neu-bg)' : 'var(--color-panel-solid)',
21180
- borderBottomLeftRadius: '8px',
21181
- borderBottomRightRadius: '8px',
21182
- 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)'
21183
21483
  } },
21184
21484
  React.createElement(Icon, { name: "clock", width: "16", height: "16", style: { opacity: 0.7 } }),
21185
- React.createElement(p$d, { size: "2", weight: "bold" }, "Time:"),
21186
- 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) }),
21187
- React.createElement(p$d, null, ":"),
21188
- 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) }),
21189
- 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"))))),
21190
21490
  React.createElement("div", null,
21191
21491
  React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
21192
21492
  "\u00A0",
@@ -21197,7 +21497,7 @@ const DateTimePicker = (_a) => {
21197
21497
  React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
21198
21498
  hasError ?
21199
21499
  React.createElement(React.Fragment, null,
21200
- 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))));
21201
21501
  };
21202
21502
 
21203
21503
  const Dropdown = (_a) => {
@@ -21225,7 +21525,6 @@ const Dropdown = (_a) => {
21225
21525
  window.open(inputUrl, '_blank', 'noopener,noreferrer');
21226
21526
  };
21227
21527
  // --- STYLES ---
21228
- // MATERIAL
21229
21528
  const materialTrigger = {
21230
21529
  backgroundColor: 'var(--color-surface)',
21231
21530
  border: 'none',
@@ -21288,21 +21587,25 @@ const Dropdown = (_a) => {
21288
21587
  cursor: pointer;
21289
21588
  }
21290
21589
  ` } })),
21291
- 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) => {
21292
21591
  setFieldValue(alias, val);
21293
21592
  setTimeout(() => setFieldTouched(alias, true), 0);
21593
+ if (props.onValueChange)
21594
+ props.onValueChange(val);
21294
21595
  }, onOpenChange: (isOpen) => {
21295
21596
  if (!isOpen) {
21296
21597
  setFieldTouched(alias, true);
21297
21598
  }
21298
21599
  } },
21299
- 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) }),
21300
- React.createElement(g, { position: "popper", sideOffset: 5, style: activeContentStyle }, inputoptions.map((inputoption) => (React.createElement(React.Fragment, { key: inputoption.optionid || crypto.randomUUID() }, inputoption.optionurl ?
21301
- React.createElement(v, { id: String(inputoption.optionid) || '', key: inputoption.optionid, value: inputoption.optionvalue, className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '' },
21302
- React.createElement("a", { onClick: () => openLink(inputoption.optionurl || "#"), style: { textDecoration: 'none' } }, inputoption.text))
21303
- :
21304
- React.createElement(React.Fragment, null,
21305
- 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)))))),
21306
21609
  React.createElement("div", null,
21307
21610
  React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
21308
21611
  "\u00A0",
@@ -21313,7 +21616,7 @@ const Dropdown = (_a) => {
21313
21616
  React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
21314
21617
  hasError ?
21315
21618
  React.createElement(React.Fragment, null,
21316
- 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)))));
21317
21620
  };
21318
21621
 
21319
21622
  const getFileIcon$1 = (type, name) => {
@@ -21602,6 +21905,7 @@ const FileMultiple = (_a) => {
21602
21905
  React.createElement(Icon, { name: 'close' })))));
21603
21906
  }))),
21604
21907
  React.createElement("div", null,
21908
+ React.createElement("br", null),
21605
21909
  React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
21606
21910
  "\u00A0",
21607
21911
  props.isHinted ?
@@ -28931,7 +29235,7 @@ const ImageOutput = ({ id, src, alt = "Image", design = 'outline', layout = 'nor
28931
29235
  React.createElement(i$9, { ratio: aspectRatio }, content)));
28932
29236
  };
28933
29237
 
28934
- const Input$1 = (_a) => {
29238
+ const Input$2 = (_a) => {
28935
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"]);
28936
29240
  const [inputField, meta] = formik.useField(alias);
28937
29241
  const hasError = Boolean(meta.touched && meta.error);
@@ -28940,6 +29244,7 @@ const Input$1 = (_a) => {
28940
29244
  return (React.createElement(Column, { span: width, newLine: props.newRow },
28941
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 })),
28942
29246
  React.createElement("div", null,
29247
+ React.createElement("br", null),
28943
29248
  React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
28944
29249
  "\u00A0",
28945
29250
  props.isHinted && (React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
@@ -28964,6 +29269,7 @@ const PasswordInput = (_a) => {
28964
29269
  React.createElement(e, { content: showPassword ? "Hide password" : "Show password" },
28965
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" })))))),
28966
29271
  React.createElement("div", null,
29272
+ React.createElement("br", null),
28967
29273
  React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
28968
29274
  "\u00A0",
28969
29275
  props.isHinted && (React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
@@ -30757,7 +31063,7 @@ function _objectWithoutPropertiesLoose$4(source, excluded) { if (source == null)
30757
31063
  // format={value => ({ text: value, template: 'xxxxxxxx' })}/>
30758
31064
  //
30759
31065
 
30760
- function Input(_ref, ref) {
31066
+ function Input$1(_ref, ref) {
30761
31067
  var _ref$inputComponent = _ref.inputComponent,
30762
31068
  InputComponent = _ref$inputComponent === void 0 ? 'input' : _ref$inputComponent,
30763
31069
  parse = _ref.parse,
@@ -30785,8 +31091,8 @@ function Input(_ref, ref) {
30785
31091
  return /*#__PURE__*/React.createElement(InputComponent, inputProps);
30786
31092
  }
30787
31093
 
30788
- Input = /*#__PURE__*/React.forwardRef(Input);
30789
- Input.propTypes = {
31094
+ Input$1 = /*#__PURE__*/React.forwardRef(Input$1);
31095
+ Input$1.propTypes = {
30790
31096
  // Parses a single characher of `<input/>` text.
30791
31097
  parse: PropTypes.func.isRequired,
30792
31098
  // Formats `value` into `<input/>` text.
@@ -35511,7 +35817,7 @@ function createInput$2(defaultMetadata) {
35511
35817
  onKeyDown: onKeyDown,
35512
35818
  inputFormat: inputFormat
35513
35819
  });
35514
- return /*#__PURE__*/React.createElement(Input, _extends$3({}, rest, {
35820
+ return /*#__PURE__*/React.createElement(Input$1, _extends$3({}, rest, {
35515
35821
  ref: ref,
35516
35822
  parse: parsePhoneNumberCharacter_,
35517
35823
  format: format,
@@ -36239,7 +36545,7 @@ function call(func, _arguments) {
36239
36545
  return func.apply(this, args)
36240
36546
  }
36241
36547
 
36242
- var PhoneInputInput = createInput(metadata$1);
36548
+ var Input = createInput(metadata$1);
36243
36549
 
36244
36550
  function getCountries() {
36245
36551
  return call(getCountries$1, arguments)
@@ -36520,7 +36826,7 @@ const PhoneInput = (_a) => {
36520
36826
  const errorId = `${alias}-error`;
36521
36827
  return (React.createElement(Column, { span: width, newLine: props.newRow },
36522
36828
  React.createElement(p$5, { direction: "column", gap: "2", style: { width: '100%' } },
36523
- 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),
36524
36830
  React.createElement(c, { style: { padding: 0 } },
36525
36831
  React.createElement(C$1, { value: country, onValueChange: (value) => setCountry(value) },
36526
36832
  React.createElement(u$1, { variant: "ghost", style: {
@@ -36528,7 +36834,9 @@ const PhoneInput = (_a) => {
36528
36834
  padding: '0 8px 0 12px',
36529
36835
  gap: '6px',
36530
36836
  borderTopRightRadius: 0,
36531
- borderBottomRightRadius: 0
36837
+ borderBottomRightRadius: 0,
36838
+ backgroundColor: 'var(--gray-3)',
36839
+ borderRight: '1px solid var(--gray-alpha-5)'
36532
36840
  } },
36533
36841
  React.createElement(p$5, { align: "center", gap: "2" },
36534
36842
  React.createElement(FlagIcon, { country: country }),
@@ -36543,9 +36851,8 @@ const PhoneInput = (_a) => {
36543
36851
  React.createElement(p$d, { color: "gray", size: "1" },
36544
36852
  "(+",
36545
36853
  getCountryCallingCode(c),
36546
- ")"))))))),
36547
- React.createElement("div", { style: { width: '1px', height: '20px', backgroundColor: 'var(--gray-a4)', alignSelf: 'center' } })),
36548
- 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: {
36549
36856
  flex: 1,
36550
36857
  border: 'none',
36551
36858
  outline: 'none',
@@ -36554,15 +36861,15 @@ const PhoneInput = (_a) => {
36554
36861
  paddingLeft: '12px',
36555
36862
  color: 'var(--gray-12)',
36556
36863
  fontFamily: 'var(--default-font-family)',
36557
- fontSize: 'var(--font-size-2)'
36864
+ fontSize: 'var(--font-size-2)',
36865
+ width: '100%'
36558
36866
  } })),
36559
36867
  React.createElement("div", { style: { marginTop: 4, display: 'flex', alignItems: 'center', gap: 6 } },
36560
36868
  React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
36561
- "\u00A0",
36562
36869
  props.isHinted && (React.createElement(e, { content: props.hintText || "No hint available" },
36563
36870
  React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { display: 'flex' } },
36564
36871
  React.createElement(QuestionMarkCircledIcon, { height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
36565
- 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`))))));
36566
36873
  };
36567
36874
 
36568
36875
  /** Checks if value is string */
@@ -40354,16 +40661,27 @@ const parseUuidFormat = (input) => {
40354
40661
 
40355
40662
  const UUIDInput = (_a) => {
40356
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"]);
40357
- let activeFormat = format;
40358
- if (type && type.toLowerCase().startsWith("uuid") && type.length > 4) {
40359
- activeFormat = parseUuidFormat(type) || format;
40360
- }
40361
- const maskPattern = activeFormat.map(len => '*'.repeat(len)).join(delimiter);
40362
40664
  const { setFieldValue, setFieldTouched } = formik.useFormikContext();
40363
40665
  const [field, meta] = formik.useField(alias);
40364
40666
  const hasError = Boolean(meta.touched && meta.error);
40365
40667
  const [copied, setCopied] = React.useState(false);
40366
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]);
40367
40685
  const handleCopy = () => {
40368
40686
  navigator.clipboard.writeText(field.value || '');
40369
40687
  setCopied(true);
@@ -40373,7 +40691,7 @@ const UUIDInput = (_a) => {
40373
40691
  return (React.createElement(Column, { span: width, newLine: props.newRow },
40374
40692
  React.createElement(p$5, { direction: "column", gap: "2", style: { width: '100%' } },
40375
40693
  React.createElement(u, Object.assign({ size: size, variant: "surface", color: hasError ? 'red' : undefined, className: `${variantClass} ${className || ''}` }, props),
40376
- 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: {
40377
40695
  flex: 1,
40378
40696
  border: 'none',
40379
40697
  outline: 'none',
@@ -40385,7 +40703,7 @@ const UUIDInput = (_a) => {
40385
40703
  fontSize: 'var(--font-size-2)',
40386
40704
  textTransform: 'uppercase',
40387
40705
  width: '100%'
40388
- }, autoComplete: "off" }),
40706
+ }, autoComplete: "off", spellCheck: false }),
40389
40707
  React.createElement(c, null,
40390
40708
  React.createElement(e, { content: copied ? "Copied!" : "Copy to clipboard" },
40391
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))))),
@@ -40395,7 +40713,7 @@ const UUIDInput = (_a) => {
40395
40713
  props.isHinted && (React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
40396
40714
  React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
40397
40715
  React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
40398
- 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`))))));
40399
40717
  };
40400
40718
 
40401
40719
  var FaCcVisa = {};
@@ -41948,13 +42266,22 @@ const CURRENCIES = {
41948
42266
  };
41949
42267
 
41950
42268
  const CurrencyInput = (_a) => {
41951
- 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"]);
41952
42270
  const { setFieldValue, setFieldTouched } = formik.useFormikContext();
41953
42271
  const [amountField, amountMeta] = formik.useField(alias);
41954
- const currencyFieldName = inputtype === "currency" ? "USD" : inputtype;
41955
- 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]);
41956
42282
  const hasError = Boolean(amountMeta.touched && amountMeta.error);
41957
- const activeCurrency = CURRENCIES[currencyField.value] || CURRENCIES.USD;
42283
+ const currentCode = currencyField.value || "USD";
42284
+ const activeCurrency = CURRENCIES[currentCode] || CURRENCIES.USD;
41958
42285
  const variantClass = inputVariant !== 'input-outline' ? `input-${inputVariant}` : '';
41959
42286
  const isOutline = inputVariant === 'input-outline';
41960
42287
  const errorId = `${alias}-error`;
@@ -41966,7 +42293,7 @@ const CurrencyInput = (_a) => {
41966
42293
  backgroundColor: isOutline ? 'var(--color-surface)' : undefined,
41967
42294
  cursor: 'text'
41968
42295
  } },
41969
- 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" },
41970
42297
  React.createElement(u$1, { variant: "ghost", style: {
41971
42298
  height: '100%',
41972
42299
  padding: '0 8px 0 12px',
@@ -41988,11 +42315,16 @@ const CurrencyInput = (_a) => {
41988
42315
  c.symbol,
41989
42316
  ")"))))))),
41990
42317
  React.createElement(p$d, { color: "gray", size: "2", style: { paddingLeft: '12px', userSelect: 'none' } }, activeCurrency.symbol),
41991
- React.createElement(IMaskInput, { id: `${alias}FormInput`, name: alias, "aria-describedby": `${alias}InputLabel`, mask: Number, scale: activeCurrency.scale, defaultValue: defaultValue, readOnly: readOnly,
41992
- // @ts-expect-error: known library type definition gap
41993
- signed: false, thousandsSeparator: ",", padFractionalZeros: true, normalizeZeros: true, radix: ".", mapToRadix: ['.'],
41994
- // Bind to Amount Field
41995
- 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: {
41996
42328
  flex: 1,
41997
42329
  border: 'none',
41998
42330
  outline: 'none',
@@ -42004,14 +42336,14 @@ const CurrencyInput = (_a) => {
42004
42336
  fontSize: 'var(--font-size-2)',
42005
42337
  textAlign: 'right',
42006
42338
  width: '100%'
42007
- }, inputMode: "decimal", autoComplete: "off" })),
42339
+ }, inputMode: "decimal", autoComplete: "off" }))),
42008
42340
  React.createElement("div", null,
42009
- 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),
42010
42342
  "\u00A0",
42011
42343
  props.isHinted && (React.createElement(e, { content: props.hintText || "No hint available" },
42012
42344
  React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { display: 'flex' } },
42013
42345
  React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
42014
- 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`))))));
42015
42347
  };
42016
42348
 
42017
42349
  var FaChartLine = {};
@@ -42032,7 +42364,7 @@ function requireFaChartLine () {
42032
42364
  var FaChartLineExports = /*@__PURE__*/ requireFaChartLine();
42033
42365
 
42034
42366
  const StockInput = (_a) => {
42035
- 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"]);
42036
42368
  const { setFieldValue, setFieldTouched } = formik.useFormikContext();
42037
42369
  const [priceField, meta] = formik.useField(alias);
42038
42370
  const hasError = Boolean(meta.touched && meta.error);
@@ -42080,7 +42412,7 @@ const StockInput = (_a) => {
42080
42412
  fontFamily: 'var(--default-font-family)',
42081
42413
  }, inputMode: "decimal", autoComplete: "off" }))),
42082
42414
  React.createElement("div", null,
42083
- 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),
42084
42416
  "\u00A0",
42085
42417
  props.isHinted && (React.createElement(e, { content: props.hintText || "No hint available" },
42086
42418
  React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { display: 'flex' } },
@@ -42089,7 +42421,7 @@ const StockInput = (_a) => {
42089
42421
  };
42090
42422
 
42091
42423
  const RadioGroupInput = (_a) => {
42092
- 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"]);
42093
42425
  const { setFieldValue, setFieldTouched } = formik.useFormikContext();
42094
42426
  const [field, meta] = formik.useField(alias);
42095
42427
  const hasError = Boolean(meta.touched && meta.error);
@@ -42158,19 +42490,20 @@ const RadioGroupInput = (_a) => {
42158
42490
  React.createElement("span", { style: { userSelect: 'none' } }, inputoption.text))));
42159
42491
  }))),
42160
42492
  React.createElement("div", null,
42161
- React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel),
42162
- hasError ?
42163
- React.createElement(React.Fragment, null,
42164
- 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",
42165
42495
  props.isHinted ?
42166
42496
  React.createElement(React.Fragment, null,
42167
42497
  React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
42168
42498
  React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
42169
- 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))));
42170
42503
  };
42171
42504
 
42172
42505
  const OptionSelect = (_a) => {
42173
- 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"]);
42174
42507
  const triggerRef = React.useRef(null);
42175
42508
  const [neuVars, setNeuVars] = React.useState({});
42176
42509
  const { setFieldValue, setFieldTouched } = formik.useFormikContext();
@@ -42223,40 +42556,46 @@ const OptionSelect = (_a) => {
42223
42556
  return (React.createElement(Column, { span: width, newLine: props.newRow },
42224
42557
  React.createElement(p$5, { direction: "column", gap: "2", style: { width: '100%' } },
42225
42558
  inputtype === 'select-neumorphic' && (React.createElement("style", { dangerouslySetInnerHTML: { __html: `
42226
- .neu-select-trigger[data-state='open'] {
42227
- box-shadow: inset 6px 6px 12px var(--neu-shadow-dark),
42228
- inset -6px -6px 12px var(--neu-shadow-light) !important;
42229
- }
42230
- .neu-select-item:hover {
42231
- background-color: rgba(0,0,0,0.05) !important;
42232
- cursor: pointer;
42233
- }
42234
- ` } })),
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
+ ` } })),
42235
42568
  React.createElement(C$1, { name: alias, disabled: readOnly, "aria-describedby": `${alias}InputLabel`, defaultValue: props.defaultValue, value: field.value, onValueChange: (val) => {
42236
42569
  setFieldValue(alias, val);
42237
42570
  setTimeout(() => setFieldTouched(alias, true), 0);
42571
+ if (props.onValueChange)
42572
+ props.onValueChange(val);
42238
42573
  }, onOpenChange: (isOpen) => {
42239
42574
  if (!isOpen) {
42240
42575
  setFieldTouched(alias, true);
42241
42576
  }
42242
42577
  } },
42243
- 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) }),
42244
- 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))))),
42245
42583
  React.createElement("div", null,
42246
- React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel),
42247
- hasError ?
42248
- React.createElement(React.Fragment, null,
42249
- 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",
42250
42586
  props.isHinted ?
42251
42587
  React.createElement(React.Fragment, null,
42252
42588
  React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
42253
42589
  React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
42254
- 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))));
42255
42594
  };
42256
42595
 
42257
42596
  const MultipleSelect = (_a) => {
42258
42597
  var _b;
42259
- 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"]);
42260
42599
  const { setFieldValue, setFieldTouched } = formik.useFormikContext();
42261
42600
  const [field, meta] = formik.useField(alias);
42262
42601
  const selectedValues = (Array.isArray(field.value) ? field.value : []);
@@ -42341,19 +42680,20 @@ const MultipleSelect = (_a) => {
42341
42680
  React.createElement(p$d, { size: "2" }, inputoption.text)));
42342
42681
  })))))),
42343
42682
  React.createElement("div", null,
42344
- React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel),
42345
- hasError ?
42346
- React.createElement(React.Fragment, null,
42347
- 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",
42348
42685
  props.isHinted ?
42349
42686
  React.createElement(React.Fragment, null,
42350
42687
  React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
42351
42688
  React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
42352
- 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))));
42353
42693
  };
42354
42694
 
42355
42695
  const SliderInput = (_a) => {
42356
- 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"]);
42357
42697
  const { setFieldValue, setFieldTouched } = formik.useFormikContext();
42358
42698
  const [field, meta] = formik.useField(alias);
42359
42699
  const fieldValue = Array.isArray(field.value) ? field.value : [field.value || minvalue];
@@ -42440,15 +42780,16 @@ const SliderInput = (_a) => {
42440
42780
  setFieldTouched(alias, true);
42441
42781
  }, className: inputtype === 'slider-neumorphic' ? 'neu-slider' : inputtype === 'slider-outline' ? 'outline-slider' : '', style: neuVars }),
42442
42782
  React.createElement("div", null,
42443
- React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel),
42444
- hasError ?
42445
- React.createElement(React.Fragment, null,
42446
- 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",
42447
42785
  props.isHinted ?
42448
42786
  React.createElement(React.Fragment, null,
42449
42787
  React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
42450
42788
  React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
42451
- 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))));
42452
42793
  };
42453
42794
 
42454
42795
  const RangeSlider = (_a) => {
@@ -42520,39 +42861,40 @@ const RangeSlider = (_a) => {
42520
42861
  }, onValueCommit: () => setFieldTouched(alias, true), className: inputtype === 'range-neumorphic' ? 'neu-slider' : inputtype === 'range-outline' ? 'outline-slider' : '', style: neuVars }),
42521
42862
  React.createElement("div", null,
42522
42863
  React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
42523
- hasError ?
42524
- React.createElement(React.Fragment, null,
42525
- React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || `Required field`)) : null,
42864
+ "\u00A0",
42526
42865
  props.isHinted ?
42527
42866
  React.createElement(React.Fragment, null,
42528
42867
  React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
42529
42868
  React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
42530
- 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))));
42531
42873
  };
42532
42874
 
42533
42875
  const Toggle = (_a) => {
42534
- 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"]);
42535
42877
  const { setFieldValue, setFieldTouched } = formik.useFormikContext();
42536
42878
  const [field, meta] = formik.useField(alias);
42537
42879
  const hasError = Boolean(meta.touched && meta.error);
42538
- const buttonRef = React.useRef(null);
42539
- const [neumorphicVars, setNeumorphicVars] = React.useState({});
42540
- 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
+ });
42541
42886
  React.useEffect(() => {
42542
- if (inputtype === 'toggle-neumorphic' && buttonRef.current) {
42543
- const parentBg = getNearestParentBackground(buttonRef.current.parentElement);
42544
- const shadowDark = adjustColor(parentBg, -30);
42545
- const shadowLight = adjustColor(parentBg, 30);
42546
- setNeumorphicVars({
42547
- '--neu-bg': parentBg,
42548
- '--neu-shadow-dark': shadowDark,
42549
- '--neu-shadow-light': shadowLight,
42550
- '--neu-text': 'var(--gray-12)',
42551
- '--neu-active-color': 'var(--accent-9)',
42552
- });
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
+ }
42553
42896
  }
42554
42897
  }, [inputtype]);
42555
- // --- STYLES ---
42556
42898
  const materialStyle = {
42557
42899
  textTransform: 'uppercase',
42558
42900
  letterSpacing: '0.05em',
@@ -42565,86 +42907,108 @@ const Toggle = (_a) => {
42565
42907
  background: 'transparent',
42566
42908
  transition: 'all 0.1s ease',
42567
42909
  };
42568
- const neumorphicStyle = {
42569
- backgroundColor: 'var(--neu-bg)',
42570
- color: 'var(--neu-text)',
42571
- border: 'none',
42572
- borderRadius: '12px',
42573
- fontWeight: 600,
42574
- transition: 'all 0.2s ease-in-out',
42910
+ const handleToggle = (val) => {
42911
+ if (!readOnly) {
42912
+ setFieldValue(alias, val);
42913
+ setFieldTouched(alias, true);
42914
+ }
42575
42915
  };
42576
42916
  return (React.createElement(Column, { span: width, newLine: newRow },
42577
- React.createElement(Root$1, { pressed: field.value, onPressedChange: (val) => {
42578
- if (!readOnly) {
42579
- setFieldValue(alias, val);
42580
- setFieldTouched(alias, true);
42581
- }
42582
- }, name: alias, disabled: readOnly, id: `${alias}FormInput`, "aria-describedby": `${alias}InputLabel`, asChild: true },
42583
- 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) },
42584
42919
  React.createElement("style", { dangerouslySetInnerHTML: { __html: `
42585
- /* --- MATERIAL --- */
42586
- .design-toggle.toggle-material[data-state='on'] {
42587
- background-color: var(--accent-9);
42588
- color: white;
42589
- box-shadow: 0 2px 5px rgba(0,0,0,0.2);
42590
- }
42591
- .design-toggle.toggle-material[data-state='off'] {
42592
- background-color: var(--gray-3);
42593
- color: var(--gray-11);
42594
- }
42595
-
42596
- /* --- OUTLINE --- */
42597
- .design-toggle.toggle-outline[data-state='on'] {
42598
- border: 2px solid var(--accent-9);
42599
- color: var(--accent-9);
42600
- background-color: var(--accent-2);
42601
- }
42602
- .design-toggle.toggle-outline[data-state='off'] {
42603
- border: 1px solid var(--gray-7);
42604
- color: var(--gray-11);
42605
- }
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
+ }
42606
42940
 
42607
- /* --- NEUMORPHIC --- */
42608
- .design-toggle.toggle-neumorphic[data-state='off'] {
42609
- box-shadow: 6px 6px 12px var(--neu-shadow-dark),
42610
- -6px -6px 12px var(--neu-shadow-light);
42611
- }
42612
- .design-toggle.toggle-neumorphic[data-state='on'] {
42613
- box-shadow: inset 6px 6px 12px var(--neu-shadow-dark),
42614
- inset -6px -6px 12px var(--neu-shadow-light);
42615
- color: var(--neu-active-color);
42616
- }
42617
- .design-toggle.toggle-neumorphic:hover {
42618
- transform: translateY(-1px);
42619
- }
42620
- ` } }),
42621
- children)),
42622
- React.createElement("div", null,
42623
- inputLabel && (React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel)),
42624
- isHinted && (React.createElement(e, { content: hintText || "No hint available" },
42625
- React.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { marginLeft: 6 } },
42626
- React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
42627
- hasError && (React.createElement(p$d, { id: errorId, size: "1", color: "red", style: { display: 'block', marginTop: 2 } }, props.errorText || `Required field`)))));
42628
- };
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
+ }
42629
42952
 
42630
- const Row = ({ children, className, gap = "4" }) => {
42631
- 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`))))));
42632
42992
  };
42633
42993
 
42634
- const SectionTitle = (_a) => {
42635
- var { title, iconname, textColor = "#FFFFFF", backgroundColor = "#000000", fontFamily } = _a, props = __rest$1(_a, ["title", "iconname", "textColor", "backgroundColor", "fontFamily"]);
42636
- return (React.createElement(React.Fragment, null,
42637
- React.createElement(Row, null,
42638
- React.createElement(Column, { span: 12, newLine: true },
42639
- React.createElement("div", { id: "", style: { backgroundColor: backgroundColor }, className: 'core-input-section-ribbon' },
42640
- React.createElement("p", { style: { color: textColor, fontFamily: fontFamily ? fontFamily : 'inherit' }, className: 'core-input-section-text' },
42641
- React.createElement(Icon, { name: iconname || "input" }),
42642
- "\u00A0",
42643
- title),
42644
- props.subTitle ?
42645
- React.createElement(React.Fragment, null,
42646
- React.createElement("p", { style: { color: textColor, fontFamily: fontFamily ? fontFamily : 'inherit' }, className: 'core-input-section-text' }, props.subTitle))
42647
- : 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
+ } })))));
42648
43012
  };
42649
43013
 
42650
43014
  const Container = (_a) => {
@@ -42655,6 +43019,10 @@ const Container = (_a) => {
42655
43019
  return (React.createElement(p$2, Object.assign({ size: "3", px: "3" }, props), children));
42656
43020
  };
42657
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
+
42658
43026
  /** A special constant with type `never` */
42659
43027
  function $constructor(name, initializer, params) {
42660
43028
  function init(inst, def) {
@@ -47172,7 +47540,7 @@ exports.FileMultiple = FileMultiple;
47172
47540
  exports.FlagIcon = FlagIcon;
47173
47541
  exports.Icon = Icon;
47174
47542
  exports.ImageOutput = ImageOutput;
47175
- exports.Input = Input$1;
47543
+ exports.Input = Input$2;
47176
47544
  exports.MultipleSelect = MultipleSelect;
47177
47545
  exports.OptionSelect = OptionSelect;
47178
47546
  exports.PasswordInput = PasswordInput;