react-science 19.3.1 → 19.4.0

package/lib/components/color-picker/react-color/ColorPicker.d.ts

@@ -17,7 +17,7 @@ export interface HSV {
     v: number;
     a: number;
 }
-interface ChangeCallbackProps {
+export interface ChangeCallbackProps {
     hex: string;
     hsl: HSL;
     hsv: HSV;
@@ -39,5 +39,4 @@ export interface ColorPickerProps {
     style?: CSSProperties;
 }
 export declare function ColorPicker(props: ColorPickerProps): import("react/jsx-runtime").JSX.Element;
-export {};
 //# sourceMappingURL=ColorPicker.d.ts.map

package/lib/components/color-picker/react-color/ColorPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../../src/components/color-picker/react-color/ColorPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAW3C,MAAM,WAAW,GAAG;IAClB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AACD,MAAM,WAAW,GAAG;IAClB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AACD,MAAM,WAAW,GAAG;IAClB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,UAAU,mBAAmB;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,GAAG,CAAC;IACT,GAAG,EAAE,GAAG,CAAC;IACT,MAAM,EAAE,MAAM,CAAC;IACf,GAAG,EAAE,GAAG,CAAC;IACT,MAAM,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;CACvC;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,KAAK,CAAC,EACF;QACE,GAAG,EAAE,MAAM,CAAC;KACb,GACD,GAAG,GACH,GAAG,GACH,GAAG,CAAC;IACR,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,EAAE,KAAK,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC/D,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,EAAE,KAAK,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IACvE,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,EAAE,KAAK,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IACpE,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAsFD,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAiGlD"}
+{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../../src/components/color-picker/react-color/ColorPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAW3C,MAAM,WAAW,GAAG;IAClB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AACD,MAAM,WAAW,GAAG;IAClB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AACD,MAAM,WAAW,GAAG;IAClB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,mBAAmB;IAClC,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,GAAG,CAAC;IACT,GAAG,EAAE,GAAG,CAAC;IACT,MAAM,EAAE,MAAM,CAAC;IACf,GAAG,EAAE,GAAG,CAAC;IACT,MAAM,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;CACvC;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,KAAK,CAAC,EACF;QACE,GAAG,EAAE,MAAM,CAAC;KACb,GACD,GAAG,GACH,GAAG,GACH,GAAG,CAAC;IACR,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,EAAE,KAAK,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC/D,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,EAAE,KAAK,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IACvE,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,EAAE,KAAK,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IACpE,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAsFD,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAiGlD"}

package/lib/components/form/components/input/checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/components/input/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAS1E,KAAK,aAAa,GAAG,IAAI,CAAC,eAAe,EAAE,gBAAgB,GAAG,MAAM,CAAC,GAAG;IACtE,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAQF,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,2CAiC5C"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/components/input/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAS1E,KAAK,aAAa,GAAG,IAAI,CAAC,eAAe,EAAE,gBAAgB,GAAG,MAAM,CAAC,GAAG;IACtE,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAQF,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,2CAkC5C"}

package/lib/components/form/components/input/checkbox.js

@@ -10,7 +10,7 @@ const StyledCheckbox = styled(BPCheckbox) `
   width: fit-content;
 `;
 export function Checkbox(props) {
-    const { helpText, label } = props;
+    const { helpText, label, ...otherProps } = props;
     const field = useFieldContext();
     const error = field
         .getMeta()
@@ -21,6 +21,6 @@ export function Checkbox(props) {
         const checked = event.target.checked;
         return field.handleChange(checked);
     }
-    return (_jsx(FormGroup, { name: field.name, intent: intent, error: error, fullWidth: true, helpText: helpText, children: _jsx(StyledCheckbox, { label: label, name: field.name, value: String(field.state.value), onChange: onChange, onBlur: field.handleBlur, defaultChecked: field.state.value }) }));
+    return (_jsx(FormGroup, { name: field.name, intent: intent, error: error, fullWidth: true, helpText: helpText, children: _jsx(StyledCheckbox, { ...otherProps, label: label, name: field.name, value: String(field.state.value), onChange: onChange, onBlur: field.handleBlur, defaultChecked: field.state.value }) }));
 }
 //# sourceMappingURL=checkbox.js.map

package/lib/components/form/components/input/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../../../src/components/form/components/input/checkbox.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,IAAI,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAGrC,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAM1D,4FAA4F;AAC5F,MAAM,cAAc,GAAG,MAAM,CAAC,UAAU,CAAC,CAAe;;;CAGvD,CAAC;AAEF,MAAM,UAAU,QAAQ,CAAC,KAAoB;IAC3C,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAClC,MAAM,KAAK,GAAG,eAAe,EAAW,CAAC;IACzC,MAAM,KAAK,GAAG,KAAK;SAChB,OAAO,EAAE;SACT,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC;SAC5B,EAAE,CAAC,CAAC,CAAC,CAAC;IAET,MAAM,MAAM,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC;IAEhC,SAAS,QAAQ,CAAC,KAAoC;QACpD,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;QACrC,OAAO,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IACrC,CAAC;IAED,OAAO,CACL,KAAC,SAAS,IACR,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,SAAS,QACT,QAAQ,EAAE,QAAQ,YAElB,KAAC,cAAc,IACb,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,EAChC,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,KAAK,CAAC,UAAU,EACxB,cAAc,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,GACjC,GACQ,CACb,CAAC;AACJ,CAAC"}
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../../../src/components/form/components/input/checkbox.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,IAAI,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAGrC,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAM1D,4FAA4F;AAC5F,MAAM,cAAc,GAAG,MAAM,CAAC,UAAU,CAAC,CAAe;;;CAGvD,CAAC;AAEF,MAAM,UAAU,QAAQ,CAAC,KAAoB;IAC3C,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;IACjD,MAAM,KAAK,GAAG,eAAe,EAAW,CAAC;IACzC,MAAM,KAAK,GAAG,KAAK;SAChB,OAAO,EAAE;SACT,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC;SAC5B,EAAE,CAAC,CAAC,CAAC,CAAC;IAET,MAAM,MAAM,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC;IAEhC,SAAS,QAAQ,CAAC,KAAoC;QACpD,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;QACrC,OAAO,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IACrC,CAAC;IAED,OAAO,CACL,KAAC,SAAS,IACR,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,SAAS,QACT,QAAQ,EAAE,QAAQ,YAElB,KAAC,cAAc,OACT,UAAU,EACd,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,EAChC,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,KAAK,CAAC,UAAU,EACxB,cAAc,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,GACjC,GACQ,CACb,CAAC;AACJ,CAAC"}

package/lib/components/form/components/input/color_picker.d.ts

@@ -0,0 +1,5 @@
+import type { FormGroupInputProps } from '../input_groups/form_group.js';
+type ColorPickerProps = Omit<FormGroupInputProps, 'placeholder'>;
+export declare function ColorPicker(props: ColorPickerProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=color_picker.d.ts.map

package/lib/components/form/components/input/color_picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color_picker.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/components/input/color_picker.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AAGzE,KAAK,gBAAgB,GAAG,IAAI,CAAC,mBAAmB,EAAE,aAAa,CAAC,CAAC;AAEjE,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CA6BlD"}

package/lib/components/form/components/input/color_picker.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ColorPickerDropdown } from '../../../color-picker/index.js';
+import { useFieldContext } from '../../context/use_ts_form.js';
+import { FormGroup } from '../input_groups/form_group.js';
+export function ColorPicker(props) {
+    const { label, helpText, layout, fullWidth, required } = props;
+    const field = useFieldContext();
+    const error = field
+        .getMeta()
+        .errors.map((e) => e.message)
+        .at(0);
+    function onChange(color) {
+        field.setValue(color.hex);
+    }
+    return (_jsx(FormGroup, { name: field.name, label: label, helpText: helpText, error: error, layout: layout, fullWidth: fullWidth, required: required, intent: error ? 'danger' : 'none', children: _jsx(ColorPickerDropdown, { color: { hex: field.state.value }, onChange: onChange }) }));
+}
+//# sourceMappingURL=color_picker.js.map

package/lib/components/form/components/input/color_picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color_picker.js","sourceRoot":"","sources":["../../../../../src/components/form/components/input/color_picker.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AAErE,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAE/D,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAI1D,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAC/D,MAAM,KAAK,GAAG,eAAe,EAAU,CAAC;IACxC,MAAM,KAAK,GAAG,KAAK;SAChB,OAAO,EAAE;SACT,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC;SAC5B,EAAE,CAAC,CAAC,CAAC,CAAC;IAET,SAAS,QAAQ,CAAC,KAAmC;QACnD,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAC5B,CAAC;IAED,OAAO,CACL,KAAC,SAAS,IACR,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,YAEjC,KAAC,mBAAmB,IAClB,KAAK,EAAE,EAAE,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,EAAE,EACjC,QAAQ,EAAE,QAAQ,GAClB,GACQ,CACb,CAAC;AACJ,CAAC"}

package/lib/components/form/components/input/input.d.ts

@@ -1,5 +1,6 @@
+import type { InputGroupProps } from '@blueprintjs/core';
 import type { FormGroupInputProps } from '../input_groups/form_group.js';
-interface InputProps extends FormGroupInputProps {
+interface InputProps extends FormGroupInputProps, InputGroupProps {
     type?: string;
 }
 export declare function Input(props: InputProps): import("react/jsx-runtime").JSX.Element;

package/lib/components/form/components/input/input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/components/input/input.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AAGzE,UAAU,UAAW,SAAQ,mBAAmB;IAC9C,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,2CA6CtC"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/components/input/input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAKzD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AAGzE,UAAU,UAAW,SAAQ,mBAAmB,EAAE,eAAe;IAC/D,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,2CAoCtC"}

package/lib/components/form/components/input/input.js

@@ -3,7 +3,7 @@ import { InputGroup } from '@blueprintjs/core';
 import { useFieldContext } from '../../context/use_ts_form.js';
 import { FormGroup } from '../input_groups/form_group.js';
 export function Input(props) {
-    const { label, required, placeholder, type = 'text', helpText, layout, fullWidth, } = props;
+    const { label, required, helpText, layout, fullWidth, ...otherProps } = props;
     const field = useFieldContext();
     const error = field
         .getMeta()
@@ -12,6 +12,6 @@ export function Input(props) {
     function onChange(event) {
         return field.handleChange(event.target.value);
     }
-    return (_jsx(FormGroup, { name: field.name, label: label, intent: error ? 'danger' : 'none', required: required, error: error, helpText: helpText, layout: layout, fullWidth: fullWidth, children: _jsx(InputGroup, { id: field.name, name: field.name, required: required, type: type, onChange: onChange, onBlur: field.handleBlur, intent: error ? 'danger' : 'none', value: field.state.value, placeholder: placeholder }) }));
+    return (_jsx(FormGroup, { name: field.name, label: label, intent: error ? 'danger' : 'none', required: required, error: error, helpText: helpText, layout: layout, fullWidth: fullWidth, children: _jsx(InputGroup, { ...otherProps, id: field.name, name: field.name, onChange: onChange, onBlur: field.handleBlur, intent: error ? 'danger' : 'none', value: field.state.value, required: required }) }));
 }
 //# sourceMappingURL=input.js.map

package/lib/components/form/components/input/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../../../src/components/form/components/input/input.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAG/C,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAE/D,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAM1D,MAAM,UAAU,KAAK,CAAC,KAAiB;IACrC,MAAM,EACJ,KAAK,EACL,QAAQ,EACR,WAAW,EACX,IAAI,GAAG,MAAM,EACb,QAAQ,EACR,MAAM,EACN,SAAS,GACV,GAAG,KAAK,CAAC;IAEV,MAAM,KAAK,GAAG,eAAe,EAAU,CAAC;IACxC,MAAM,KAAK,GAAG,KAAK;SAChB,OAAO,EAAE;SACT,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC;SAC5B,EAAE,CAAC,CAAC,CAAC,CAAC;IAET,SAAS,QAAQ,CAAC,KAAoC;QACpD,OAAO,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAChD,CAAC;IAED,OAAO,CACL,KAAC,SAAS,IACR,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,EACjC,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,YAEpB,KAAC,UAAU,IACT,EAAE,EAAE,KAAK,CAAC,IAAI,EACd,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,KAAK,CAAC,UAAU,EACxB,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,EACjC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,EACxB,WAAW,EAAE,WAAW,GACxB,GACQ,CACb,CAAC;AACJ,CAAC"}
+{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../../../src/components/form/components/input/input.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAG/C,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAE/D,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAM1D,MAAM,UAAU,KAAK,CAAC,KAAiB;IACrC,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;IAE9E,MAAM,KAAK,GAAG,eAAe,EAAU,CAAC;IACxC,MAAM,KAAK,GAAG,KAAK;SAChB,OAAO,EAAE;SACT,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC;SAC5B,EAAE,CAAC,CAAC,CAAC,CAAC;IAET,SAAS,QAAQ,CAAC,KAAoC;QACpD,OAAO,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAChD,CAAC;IAED,OAAO,CACL,KAAC,SAAS,IACR,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,EACjC,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,YAEpB,KAAC,UAAU,OACL,UAAU,EACd,EAAE,EAAE,KAAK,CAAC,IAAI,EACd,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,KAAK,CAAC,UAAU,EACxB,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,EACjC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,EACxB,QAAQ,EAAE,QAAQ,GAClB,GACQ,CACb,CAAC;AACJ,CAAC"}

package/lib/components/form/components/input/numeric_input.d.ts

@@ -1,5 +1,6 @@
+import type { NumericInputProps as BPNumericInputProps } from '@blueprintjs/core';
 import type { FormGroupInputProps } from '../input_groups/form_group.js';
-interface NumericInputProps extends FormGroupInputProps {
+interface NumericInputProps extends FormGroupInputProps, BPNumericInputProps {
     step?: number;
     min?: number;
     max?: number;

package/lib/components/form/components/input/numeric_input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"numeric_input.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/components/input/numeric_input.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AAGzE,UAAU,iBAAkB,SAAQ,mBAAmB;IACrD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,2CAkDpD"}
+{"version":3,"file":"numeric_input.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/components/input/numeric_input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,IAAI,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAKlF,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AAGzE,UAAU,iBAAkB,SAAQ,mBAAmB,EAAE,mBAAmB;IAC1E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,2CAoDpD"}

package/lib/components/form/components/input/numeric_input.js

@@ -4,7 +4,7 @@ import { useFieldContext } from '../../context/use_ts_form.js';
 import { getIntent } from '../../utils/use_intent.js';
 import { FormGroup } from '../input_groups/form_group.js';
 export function NumericInput(props) {
-    const { label, required, helpText, placeholder, step, min, max, layout, fullWidth, } = props;
+    const { label, required, helpText, placeholder, step, min, max, layout, fullWidth, ...otherProps } = props;
     const field = useFieldContext();
     const error = field
         .getMeta()
@@ -14,6 +14,6 @@ export function NumericInput(props) {
     function onChange(_, valueAsString) {
         return field.handleChange(valueAsString);
     }
-    return (_jsx(FormGroup, { name: field.name, label: label, intent: intent, required: required, helpText: helpText, layout: layout, error: error, fullWidth: fullWidth, children: _jsx(BPNumericInput, { id: field.name, name: field.name, stepSize: step, min: min, max: max, value: field.state.value ?? '', onValueChange: onChange, intent: intent, placeholder: placeholder, required: required }) }));
+    return (_jsx(FormGroup, { name: field.name, label: label, intent: intent, required: required, helpText: helpText, layout: layout, error: error, fullWidth: fullWidth, children: _jsx(BPNumericInput, { ...otherProps, id: field.name, name: field.name, stepSize: step, min: min, max: max, value: field.state.value ?? '', onValueChange: onChange, intent: intent, placeholder: placeholder, required: required }) }));
 }
 //# sourceMappingURL=numeric_input.js.map

package/lib/components/form/components/input/numeric_input.js.map

@@ -1 +1 @@
-{"version":3,"file":"numeric_input.js","sourceRoot":"","sources":["../../../../../src/components/form/components/input/numeric_input.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,IAAI,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEtD,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAQ1D,MAAM,UAAU,YAAY,CAAC,KAAwB;IACnD,MAAM,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,GAAG,EACH,GAAG,EACH,MAAM,EACN,SAAS,GACV,GAAG,KAAK,CAAC;IAEV,MAAM,KAAK,GAAG,eAAe,EAAU,CAAC;IACxC,MAAM,KAAK,GAAG,KAAK;SAChB,OAAO,EAAE;SACT,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC;SAC5B,EAAE,CAAC,CAAC,CAAC,CAAC;IAET,MAAM,MAAM,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC;IAEhC,SAAS,QAAQ,CAAC,CAAS,EAAE,aAAqB;QAChD,OAAO,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC;IAC3C,CAAC;IAED,OAAO,CACL,KAAC,SAAS,IACR,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,YAEpB,KAAC,cAAc,IACb,EAAE,EAAE,KAAK,CAAC,IAAI,EACd,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,QAAQ,EAAE,IAAI,EACd,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE,EAC9B,aAAa,EAAE,QAAQ,EACvB,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,GAClB,GACQ,CACb,CAAC;AACJ,CAAC"}
+{"version":3,"file":"numeric_input.js","sourceRoot":"","sources":["../../../../../src/components/form/components/input/numeric_input.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,YAAY,IAAI,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEtD,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAQ1D,MAAM,UAAU,YAAY,CAAC,KAAwB;IACnD,MAAM,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,GAAG,EACH,GAAG,EACH,MAAM,EACN,SAAS,EACT,GAAG,UAAU,EACd,GAAG,KAAK,CAAC;IAEV,MAAM,KAAK,GAAG,eAAe,EAAU,CAAC;IACxC,MAAM,KAAK,GAAG,KAAK;SAChB,OAAO,EAAE;SACT,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC;SAC5B,EAAE,CAAC,CAAC,CAAC,CAAC;IAET,MAAM,MAAM,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC;IAEhC,SAAS,QAAQ,CAAC,CAAS,EAAE,aAAqB;QAChD,OAAO,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC;IAC3C,CAAC;IAED,OAAO,CACL,KAAC,SAAS,IACR,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,YAEpB,KAAC,cAAc,OACT,UAAU,EACd,EAAE,EAAE,KAAK,CAAC,IAAI,EACd,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,QAAQ,EAAE,IAAI,EACd,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE,EAC9B,aAAa,EAAE,QAAQ,EACvB,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,GAClB,GACQ,CACb,CAAC;AACJ,CAAC"}

package/lib/components/form/components/input_groups/form_group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form_group.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/components/input_groups/form_group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAsDhD,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,UAAU,cAAc;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,2CAgD9C"}
+{"version":3,"file":"form_group.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/components/input_groups/form_group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AA+DhD,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,UAAU,cAAc;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,2CAkD9C"}

package/lib/components/form/components/input_groups/form_group.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Classes } from '@blueprintjs/core';
+import { Classes, Colors } from '@blueprintjs/core';
 import styled from '@emotion/styled';
 import { useFormContext } from './form_context.js';
 const INPUT_HEIGHT = 30;
@@ -23,25 +23,32 @@ const ContainerElement = styled.div `
         : '1 / -1'};
   height: ${(props) => props.height === 'auto' ? props.height : `${props.height}px`};
   width: fit-content;
+  min-width: 180px;
 `;
+// Keep 26 px for inline layout to align with input height
 const Label = styled.label `
-  padding-top: calc(${INPUT_HEIGHT}px - 26px);
+  padding-top: calc(
+    ${INPUT_HEIGHT}px - ${(props) => (props.layout === 'inline' ? 26 : 20)}px
+  );
   grid-column: ${(props) => (props.layout === 'inline' ? 'label' : '1 / -1')};
   height: 30px;
-
-  @media (width < 48rem) {
-    padding: 0;
-  }
 `;
 const ErrorAndHelpText = styled.div `
   display: flex;
   flex-direction: column;
 `;
+const InfoText = styled.span `
+  margin-bottom: 5px;
+`;
+// Enforce that the help text will be only gray
+const HelpText = styled(InfoText) `
+  color: ${Colors.GRAY1} !important;
+`;
 export function FormGroup(props) {
     const { label, intent = 'none', name, required, children, helpText, error, layout, fullWidth = false, } = props;
     const { layout: formLayout } = useFormContext();
     // If intent is undefined or none intentClass will return undefined
     const intentClass = Classes.intentClass(intent) ?? '';
-    return (_jsxs(FormContainer, { layout: layout || formLayout, className: `${Classes.FORM_GROUP} ${intentClass}`, children: [label && (_jsxs(Label, { layout: layout || formLayout, className: Classes.LABEL, htmlFor: name, children: [label, ' ', required && (_jsx(RequiredSpan, { className: Classes.TEXT_MUTED, children: "*" }))] })), _jsxs(ContainerElement, { fullWidth: fullWidth, layout: layout || formLayout, children: [children, _jsxs(ErrorAndHelpText, { children: [helpText && (_jsx("span", { className: Classes.FORM_HELPER_TEXT, children: helpText })), error && _jsx("span", { className: Classes.FORM_HELPER_TEXT, children: error })] })] })] }));
+    return (_jsxs(FormContainer, { layout: layout || formLayout, className: `${Classes.FORM_GROUP} ${intentClass}`, children: [label && (_jsxs(Label, { layout: layout || formLayout, className: Classes.LABEL, htmlFor: name, children: [label, ' ', required && (_jsx(RequiredSpan, { className: Classes.TEXT_MUTED, children: "*" }))] })), _jsxs(ContainerElement, { fullWidth: fullWidth, layout: layout || formLayout, children: [children, _jsxs(ErrorAndHelpText, { children: [helpText && (_jsx(HelpText, { className: Classes.FORM_HELPER_TEXT, children: helpText })), error && (_jsx(InfoText, { className: Classes.FORM_HELPER_TEXT, children: error }))] })] })] }));
 }
 //# sourceMappingURL=form_group.js.map

package/lib/components/form/components/input_groups/form_group.js.map

@@ -1 +1 @@
-{"version":3,"file":"form_group.js","sourceRoot":"","sources":["../../../../../src/components/form/components/input_groups/form_group.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnD,MAAM,YAAY,GAAG,EAAE,CAAC;AAExB,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAE9B;gBACc,YAAY;;;;2BAID,CAAC,KAAK,EAAE,EAAE,CACjC,KAAK,CAAC,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,KAAK;wBACzC,CAAC,KAAK,EAAE,EAAE,CAC9B,KAAK,CAAC,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM;CACnD,CAAC;AAEF,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAA;;CAE/B,CAAC;AAEF,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAIjC;;iBAEe,CAAC,KAAK,EAAE,EAAE,CACvB,KAAK,CAAC,SAAS;IACb,CAAC,CAAC,QAAQ;IACV,CAAC,CAAC,KAAK,CAAC,MAAM,KAAK,QAAQ;QACzB,CAAC,CAAC,OAAO;QACT,CAAC,CAAC,QAAQ;YACN,CAAC,KAAK,EAAE,EAAE,CAClB,KAAK,CAAC,MAAM,KAAK,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,IAAI;;CAE/D,CAAC;AAEF,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAoB;sBACxB,YAAY;iBACjB,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC;;;;;;CAM3E,CAAC;AAEF,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAGlC,CAAC;AAuBF,MAAM,UAAU,SAAS,CAAC,KAAqB;IAC7C,MAAM,EACJ,KAAK,EACL,MAAM,GAAG,MAAM,EACf,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,MAAM,EACN,SAAS,GAAG,KAAK,GAClB,GAAG,KAAK,CAAC;IAEV,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,cAAc,EAAE,CAAC;IAEhD,mEAAmE;IACnE,MAAM,WAAW,GAAG,OAAO,CAAC,WAAW,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;IAEtD,OAAO,CACL,MAAC,aAAa,IACZ,MAAM,EAAE,MAAM,IAAI,UAAU,EAC5B,SAAS,EAAE,GAAG,OAAO,CAAC,UAAU,IAAI,WAAW,EAAE,aAEhD,KAAK,IAAI,CACR,MAAC,KAAK,IACJ,MAAM,EAAE,MAAM,IAAI,UAAU,EAC5B,SAAS,EAAE,OAAO,CAAC,KAAK,EACxB,OAAO,EAAE,IAAI,aAEZ,KAAK,EAAE,GAAG,EACV,QAAQ,IAAI,CACX,KAAC,YAAY,IAAC,SAAS,EAAE,OAAO,CAAC,UAAU,kBAAkB,CAC9D,IACK,CACT,EACD,MAAC,gBAAgB,IAAC,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,IAAI,UAAU,aACjE,QAAQ,EAET,MAAC,gBAAgB,eACd,QAAQ,IAAI,CACX,eAAM,SAAS,EAAE,OAAO,CAAC,gBAAgB,YAAG,QAAQ,GAAQ,CAC7D,EAEA,KAAK,IAAI,eAAM,SAAS,EAAE,OAAO,CAAC,gBAAgB,YAAG,KAAK,GAAQ,IAClD,IACF,IACL,CACjB,CAAC;AACJ,CAAC"}
+{"version":3,"file":"form_group.js","sourceRoot":"","sources":["../../../../../src/components/form/components/input_groups/form_group.tsx"],"names":[],"mappings":"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"}

package/lib/components/form/components/layout/Section.js

@@ -29,7 +29,7 @@ const ContainerContent = styled.div `
   flex-direction: column;
   gap: 2px;
   border-radius: 0.75rem;
-  padding: 7px 10px 2px;
+  padding: 7px 10px 10px;
 `;
 export function Section(props) {
     const { title, description, children } = props;

package/lib/components/form/context/use_ts_form.d.ts

@@ -1,4 +1,5 @@
 import { Checkbox } from '../components/input/checkbox.js';
+import { ColorPicker } from '../components/input/color_picker.tsx';
 import { Input } from '../components/input/input.js';
 import { NumericInput } from '../components/input/numeric_input.js';
 import { ResetButton } from '../components/input/reset_button.js';
@@ -13,6 +14,7 @@ declare const withForm: <TFormData, TOnMount extends import("@tanstack/react-for
     readonly Checkbox: typeof Checkbox;
     readonly Select: typeof Select;
     readonly Switch: typeof Switch;
+    readonly ColorPicker: typeof ColorPicker;
 }, {
     readonly SubmitButton: typeof SubmitButton;
     readonly ResetButton: typeof ResetButton;
@@ -24,6 +26,7 @@ declare const withForm: <TFormData, TOnMount extends import("@tanstack/react-for
         readonly Checkbox: typeof Checkbox;
         readonly Select: typeof Select;
         readonly Switch: typeof Switch;
+        readonly ColorPicker: typeof ColorPicker;
     }, {
         readonly SubmitButton: typeof SubmitButton;
         readonly ResetButton: typeof ResetButton;
@@ -36,6 +39,7 @@ export declare const useForm: <TFormData, TOnMount extends import("@tanstack/rea
     readonly Checkbox: typeof Checkbox;
     readonly Select: typeof Select;
     readonly Switch: typeof Switch;
+    readonly ColorPicker: typeof ColorPicker;
 }, {
     readonly SubmitButton: typeof SubmitButton;
     readonly ResetButton: typeof ResetButton;

package/lib/components/form/context/use_ts_form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use_ts_form.d.ts","sourceRoot":"","sources":["../../../../src/components/form/context/use_ts_form.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,iCAAiC,CAAC;AAE1D,QAAA,MAAQ,cAAc,2IAAE,eAAe,8KACb,CAAC;AAE3B,QAAA,MAAoB,QAAQ;;;;;;;;;;;;;;;;;;;;;;kCAe1B,CAAC;AAEH,eAAO,MAAM,OAAO;;;;;;;;;;EAAa,CAAC;AAClC,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"use_ts_form.d.ts","sourceRoot":"","sources":["../../../../src/components/form/context/use_ts_form.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AACnE,OAAO,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,iCAAiC,CAAC;AAE1D,QAAA,MAAQ,cAAc,2IAAE,eAAe,8KACb,CAAC;AAE3B,QAAA,MAAoB,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;kCAgB1B,CAAC;AAEH,eAAO,MAAM,OAAO;;;;;;;;;;;EAAa,CAAC;AAClC,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,QAAQ,EAAE,CAAC"}

package/lib/components/form/context/use_ts_form.js

@@ -1,5 +1,6 @@
 import { createFormHook, createFormHookContexts } from '@tanstack/react-form';
 import { Checkbox } from '../components/input/checkbox.js';
+import { ColorPicker } from "../components/input/color_picker.js";
 import { Input } from '../components/input/input.js';
 import { NumericInput } from '../components/input/numeric_input.js';
 import { ResetButton } from '../components/input/reset_button.js';
@@ -22,6 +23,7 @@ const { useAppForm, withForm } = createFormHook({
         Checkbox,
         Select,
         Switch,
+        ColorPicker,
     },
 });
 export const useForm = useAppForm;

package/lib/components/form/context/use_ts_form.js.map

@@ -1 +1 @@
-{"version":3,"file":"use_ts_form.js","sourceRoot":"","sources":["../../../../src/components/form/context/use_ts_form.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAE9E,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,iCAAiC,CAAC;AAE1D,MAAM,EAAE,cAAc,EAAE,eAAe,EAAE,WAAW,EAAE,YAAY,EAAE,GAClE,sBAAsB,EAAE,CAAC;AAE3B,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,cAAc,CAAC;IAC9C,YAAY;IACZ,WAAW;IACX,cAAc,EAAE;QACd,YAAY;QACZ,WAAW;QACX,OAAO;KACR;IACD,eAAe,EAAE;QACf,KAAK;QACL,YAAY;QACZ,QAAQ;QACR,MAAM;QACN,MAAM;KACP;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,OAAO,GAAG,UAAU,CAAC;AAClC,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"use_ts_form.js","sourceRoot":"","sources":["../../../../src/components/form/context/use_ts_form.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAE9E,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,qCAAsC,CAAC;AACnE,OAAO,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,iCAAiC,CAAC;AAE1D,MAAM,EAAE,cAAc,EAAE,eAAe,EAAE,WAAW,EAAE,YAAY,EAAE,GAClE,sBAAsB,EAAE,CAAC;AAE3B,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,cAAc,CAAC;IAC9C,YAAY;IACZ,WAAW;IACX,cAAc,EAAE;QACd,YAAY;QACZ,WAAW;QACX,OAAO;KACR;IACD,eAAe,EAAE;QACf,KAAK;QACL,YAAY;QACZ,QAAQ;QACR,MAAM;QACN,MAAM;QACN,WAAW;KACZ;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,OAAO,GAAG,UAAU,CAAC;AAClC,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,QAAQ,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-science",
-  "version": "19.3.1",
+  "version": "19.4.0",
   "description": "React components to build scientific applications UI",
   "type": "module",
   "exports": {

package/src/components/color-picker/react-color/ColorPicker.tsx

@@ -28,7 +28,7 @@ export interface HSV {
   a: number;
 }
 
-interface ChangeCallbackProps {
+export interface ChangeCallbackProps {
   hex: string;
   hsl: HSL;
   hsv: HSV;

package/src/components/form/components/input/checkbox.tsx

@@ -18,7 +18,7 @@ const StyledCheckbox = styled(BPCheckbox)<CheckboxProps>`
 `;
 
 export function Checkbox(props: CheckboxProps) {
-  const { helpText, label } = props;
+  const { helpText, label, ...otherProps } = props;
   const field = useFieldContext<boolean>();
   const error = field
     .getMeta()
@@ -41,6 +41,7 @@ export function Checkbox(props: CheckboxProps) {
       helpText={helpText}
     >
       <StyledCheckbox
+        {...otherProps}
         label={label}
         name={field.name}
         value={String(field.state.value)}

package/src/components/form/components/input/color_picker.tsx

@@ -0,0 +1,38 @@
+import { ColorPickerDropdown } from '../../../color-picker/index.js';
+import type { ChangeCallbackProps as ChangeCallbackComponentProps } from '../../../color-picker/react-color/ColorPicker.js';
+import { useFieldContext } from '../../context/use_ts_form.js';
+import type { FormGroupInputProps } from '../input_groups/form_group.js';
+import { FormGroup } from '../input_groups/form_group.js';
+
+type ColorPickerProps = Omit<FormGroupInputProps, 'placeholder'>;
+
+export function ColorPicker(props: ColorPickerProps) {
+  const { label, helpText, layout, fullWidth, required } = props;
+  const field = useFieldContext<string>();
+  const error = field
+    .getMeta()
+    .errors.map((e) => e.message)
+    .at(0);
+
+  function onChange(color: ChangeCallbackComponentProps) {
+    field.setValue(color.hex);
+  }
+
+  return (
+    <FormGroup
+      name={field.name}
+      label={label}
+      helpText={helpText}
+      error={error}
+      layout={layout}
+      fullWidth={fullWidth}
+      required={required}
+      intent={error ? 'danger' : 'none'}
+    >
+      <ColorPickerDropdown
+        color={{ hex: field.state.value }}
+        onChange={onChange}
+      />
+    </FormGroup>
+  );
+}

package/src/components/form/components/input/input.tsx

@@ -1,3 +1,4 @@
+import type { InputGroupProps } from '@blueprintjs/core';
 import { InputGroup } from '@blueprintjs/core';
 import type { ChangeEvent } from 'react';
 
@@ -5,20 +6,12 @@ import { useFieldContext } from '../../context/use_ts_form.js';
 import type { FormGroupInputProps } from '../input_groups/form_group.js';
 import { FormGroup } from '../input_groups/form_group.js';
 
-interface InputProps extends FormGroupInputProps {
+interface InputProps extends FormGroupInputProps, InputGroupProps {
   type?: string;
 }
 
 export function Input(props: InputProps) {
-  const {
-    label,
-    required,
-    placeholder,
-    type = 'text',
-    helpText,
-    layout,
-    fullWidth,
-  } = props;
+  const { label, required, helpText, layout, fullWidth, ...otherProps } = props;
 
   const field = useFieldContext<string>();
   const error = field
@@ -42,15 +35,14 @@ export function Input(props: InputProps) {
       fullWidth={fullWidth}
     >
       <InputGroup
+        {...otherProps}
         id={field.name}
         name={field.name}
-        required={required}
-        type={type}
         onChange={onChange}
         onBlur={field.handleBlur}
         intent={error ? 'danger' : 'none'}
         value={field.state.value}
-        placeholder={placeholder}
+        required={required}
       />
     </FormGroup>
   );

package/src/components/form/components/input/numeric_input.tsx

@@ -1,3 +1,4 @@
+import type { NumericInputProps as BPNumericInputProps } from '@blueprintjs/core';
 import { NumericInput as BPNumericInput } from '@blueprintjs/core';
 
 import { useFieldContext } from '../../context/use_ts_form.js';
@@ -5,7 +6,7 @@ import { getIntent } from '../../utils/use_intent.js';
 import type { FormGroupInputProps } from '../input_groups/form_group.js';
 import { FormGroup } from '../input_groups/form_group.js';
 
-interface NumericInputProps extends FormGroupInputProps {
+interface NumericInputProps extends FormGroupInputProps, BPNumericInputProps {
   step?: number;
   min?: number;
   max?: number;
@@ -22,6 +23,7 @@ export function NumericInput(props: NumericInputProps) {
     max,
     layout,
     fullWidth,
+    ...otherProps
   } = props;
 
   const field = useFieldContext<string>();
@@ -48,6 +50,7 @@ export function NumericInput(props: NumericInputProps) {
       fullWidth={fullWidth}
     >
       <BPNumericInput
+        {...otherProps}
         id={field.name}
         name={field.name}
         stepSize={step}

package/src/components/form/components/input_groups/form_group.tsx

@@ -1,5 +1,5 @@
 import type { Intent } from '@blueprintjs/core';
-import { Classes } from '@blueprintjs/core';
+import { Classes, Colors } from '@blueprintjs/core';
 import styled from '@emotion/styled';
 import type { ReactNode } from 'react';
 
@@ -40,16 +40,16 @@ const ContainerElement = styled.div<{
   height: ${(props) =>
     props.height === 'auto' ? props.height : `${props.height}px`};
   width: fit-content;
+  min-width: 180px;
 `;
 
+// Keep 26 px for inline layout to align with input height
 const Label = styled.label<{ layout: Layout }>`
-  padding-top: calc(${INPUT_HEIGHT}px - 26px);
+  padding-top: calc(
+    ${INPUT_HEIGHT}px - ${(props) => (props.layout === 'inline' ? 26 : 20)}px
+  );
   grid-column: ${(props) => (props.layout === 'inline' ? 'label' : '1 / -1')};
   height: 30px;
-
-  @media (width < 48rem) {
-    padding: 0;
-  }
 `;
 
 const ErrorAndHelpText = styled.div`
@@ -57,6 +57,15 @@ const ErrorAndHelpText = styled.div`
   flex-direction: column;
 `;
 
+const InfoText = styled.span`
+  margin-bottom: 5px;
+`;
+
+// Enforce that the help text will be only gray
+const HelpText = styled(InfoText)`
+  color: ${Colors.GRAY1} !important;
+`;
+
 export interface FormGroupInputProps {
   label?: string;
   required?: boolean;
@@ -118,10 +127,12 @@ export function FormGroup(props: FormGroupProps) {
 
         <ErrorAndHelpText>
           {helpText && (
-            <span className={Classes.FORM_HELPER_TEXT}>{helpText}</span>
+            <HelpText className={Classes.FORM_HELPER_TEXT}>{helpText}</HelpText>
           )}
 
-          {error && <span className={Classes.FORM_HELPER_TEXT}>{error}</span>}
+          {error && (
+            <InfoText className={Classes.FORM_HELPER_TEXT}>{error}</InfoText>
+          )}
         </ErrorAndHelpText>
       </ContainerElement>
     </FormContainer>

package/src/components/form/components/layout/Section.tsx

@@ -32,7 +32,7 @@ const ContainerContent = styled.div`
   flex-direction: column;
   gap: 2px;
   border-radius: 0.75rem;
-  padding: 7px 10px 2px;
+  padding: 7px 10px 10px;
 `;
 
 interface SectionProps {

package/src/components/form/context/use_ts_form.ts

@@ -1,6 +1,7 @@
 import { createFormHook, createFormHookContexts } from '@tanstack/react-form';
 
 import { Checkbox } from '../components/input/checkbox.js';
+import { ColorPicker } from '../components/input/color_picker.tsx';
 import { Input } from '../components/input/input.js';
 import { NumericInput } from '../components/input/numeric_input.js';
 import { ResetButton } from '../components/input/reset_button.js';
@@ -26,6 +27,7 @@ const { useAppForm, withForm } = createFormHook({
     Checkbox,
     Select,
     Switch,
+    ColorPicker,
   },
 });