@northlight/ui 2.31.1 → 2.32.0

package/dist/es/northlight.d.ts

@@ -30,7 +30,7 @@ import * as react_select_dist_declarations_src_types from 'react-select/dist/dec
 import * as _chakra_ui_switch_dist_switch from '@chakra-ui/switch/dist/switch';
 import * as _chakra_ui_textarea_dist_textarea from '@chakra-ui/textarea/dist/textarea';
 import { Props as Props$1 } from 'react-input-mask';
-import { NumericFormatProps } from 'react-number-format';
+import { NumericFormatProps, NumberFormatValues, SourceInfo } from 'react-number-format';
 import { Schema } from 'joi';
 import { UseClickableProps } from '@chakra-ui/clickable';
 import { Variant } from 'chakra-react-select/dist/types/types';
@@ -2543,6 +2543,8 @@ declare const useCurrentTheme: () => CurrentTheme;
 
 declare const clamp: (minValue: number, maxValue: number, value: number) => number;
 
+declare const getConsistentRandomColorFromString: (str: string, colors?: string[]) => string;
+
 interface MediatoolThemeProviderProps {
     children: ReactNode;
     theme?: Record<string, any>;
@@ -3234,7 +3236,7 @@ interface TextFieldProps extends Omit<InputProps, 'onChange'>, InputFieldProps {
     formatter?: TextInputFormatter;
     validate?: RegisterOptions;
     direction?: StackDirection;
-    onChange?: (e: React.ChangeEvent<HTMLInputElement> | string) => void;
+    onChange?: (e: React__default.ChangeEvent<HTMLInputElement> | string) => void;
 }
 type MaskedTextInputProps = InputProps & Props$1 & {
     maskPlaceholder?: string;
@@ -3250,13 +3252,13 @@ interface FormattedNumberInputProps extends Omit<NumericFormatProps, 'onChange'
     /** Changes thousand and decimal separators */
     preset?: FormattedNumberInputPreset;
     /** Gives you back an object, see https://s-yadav.github.io/react-number-format/docs/quirks */
-    onChange?: NumericFormatProps['onValueChange'];
+    onChange?: (values: NumberFormatValues, sourceInfo?: SourceInfo) => void;
     /** Will format number UI as percentage, but return as decimal value */
     isPercentage?: boolean;
     /** Will round up and restrict number of decimals */
     numberOfDecimals?: number;
-    inputLeftElement?: React.ReactNode;
-    inputRightElement?: React.ReactNode;
+    inputLeftElement?: React__default.ReactNode;
+    inputRightElement?: React__default.ReactNode;
 }
 interface FormattedNumberInputFieldProps extends FormattedNumberInputProps {
     name: string;
@@ -3307,7 +3309,7 @@ interface FormattedNumberInputFieldProps extends FormattedNumberInputProps {
   ?)
 
  */
-declare const FormattedNumberInput: ({ preset, isPercentage, onChange, value, numberOfDecimals, max, min, inputLeftElement, inputRightElement, ...rest }: FormattedNumberInputProps) => JSX.Element;
+declare const FormattedNumberInput: ({ preset, isPercentage, onChange, value: valueProp, numberOfDecimals, max, min, inputLeftElement, inputRightElement, onBlur, ...rest }: FormattedNumberInputProps) => JSX.Element;
 
 /**
  * The formatted number input component wrapped in a <Field />
@@ -3411,19 +3413,18 @@ interface OurTooltipProps extends TooltipProps {
  * (?
  * <HStack>
  *    <Tooltip
+ *      hasIcon={ true }
  *      description="Here’s a regular tooltip with some with icon
  *      inside of it that’s supposed to be substantially large.">
  *      <Badge>ICON</Badge>
  *    </Tooltip>
  *    <Tooltip
- *       hasIcon={ false }
  *       description="Here’s a regular tooltip with some text without icon
  *      inside of it that’s supposed to be substantially large."
  *    >
  *      <Badge>NOICON</Badge>
  *    </Tooltip>
  *    <Tooltip
- *      hasIcon={ false }
  *      description={
  *        <Box>
  *          <Text>
@@ -3454,12 +3455,14 @@ interface OurTooltipProps extends TooltipProps {
  * <HStack>
  *     <VStack>
  *        <Tooltip
+ *          hasIcon={ true }
  *          variant="success"
  *          description="This is a successful message"
  *          >
  *          <Badge colorScheme="green">Success</Badge>
  *        </Tooltip>
  *        <Tooltip
+ *          hasIcon={ true }
  *          variant="success"
  *          title="Please check fields"
  *          description="This is a successful message with a title and an icon
@@ -3470,12 +3473,14 @@ interface OurTooltipProps extends TooltipProps {
  *     </VStack>
  *     <VStack>
  *        <Tooltip
+ *          hasIcon={ true }
  *          variant="info"
  *          description="This is an informative text"
  *          >
  *          <Badge colorScheme="blue">Info</Badge>
  *        </Tooltip>
  *        <Tooltip
+ *          hasIcon={ true }
  *          variant="info"
  *          title="Please check fields"
  *          description="This is an informative text with a title and an icon
@@ -3486,12 +3491,14 @@ interface OurTooltipProps extends TooltipProps {
  *     </VStack>
  *     <VStack>
  *        <Tooltip
+ *          hasIcon={ true }
  *          variant="warning"
  *          description="This is a warning"
  *          >
  *        <Badge colorScheme="yellow">Warning</Badge>
  *        </Tooltip>
  *        <Tooltip
+ *          hasIcon={ true }
  *          variant="warning"
  *          title="Please check fields"
  *          description="This is a warning with a title and an icon
@@ -3502,12 +3509,14 @@ interface OurTooltipProps extends TooltipProps {
  *      </VStack>
  *      <VStack>
  *        <Tooltip
+ *          hasIcon={ true }
  *          variant="danger"
  *          description="This is an error message"
  *          >
  *        <Badge colorScheme="red">Error</Badge>
  *        </Tooltip>
  *        <Tooltip
+ *          hasIcon={ true }
  *          variant="danger"
  *          title="Please check fields"
  *          description="This is an error message with a title and an icon
@@ -3518,11 +3527,13 @@ interface OurTooltipProps extends TooltipProps {
  *      </VStack>
  *      <VStack>
  *        <Tooltip
+ *          hasIcon={ true }
  *          variant="ai"
  *          description="This is an AI message">
  *        <Badge colorScheme="teal" variant="subtle">AI</Badge>
  *        </Tooltip>
  *        <Tooltip
+ *          hasIcon={ true }
  *          variant="ai"
  *          title="Please check fields"
  *          description="This is an AI message with a title and an icon
@@ -3533,11 +3544,13 @@ interface OurTooltipProps extends TooltipProps {
  *      </VStack>
  *      <VStack>
  *        <Tooltip
+ *          hasIcon={ true }
  *          variant="ghost"
  *          description="This is an clean message">
  *        <Badge>Ghost</Badge>
  *        </Tooltip>
  *        <Tooltip
+ *          hasIcon={ true }
  *          variant="ghost"
  *          title="Please check fields"
  *          description="This is an clean message with a title and an icon
@@ -4256,6 +4269,7 @@ interface ComboPickerProps extends Omit<FormattedNumberInputProps, 'value' | 'on
     formatPreset?: FormattedNumberInputPreset;
     isDisabled?: boolean;
     isReadOnly?: boolean;
+    defaultToZeroIfEmpty?: boolean;
 }
 interface ComboPickerFieldProps extends ComboPickerProps {
     name: string;
@@ -4271,7 +4285,7 @@ interface ComboPickerFieldProps extends ComboPickerProps {
  * @see ComboPickerField
  * @see {@link https://northlight.dev/reference/combo-picker}
  */
-declare const ComboPicker: ({ onChange, options, size, value, placeholder, precision, formatPreset, isDisabled, isReadOnly, ...rest }: ComboPickerProps) => JSX.Element;
+declare const ComboPicker: ({ onChange, options, size, value: valueProp, placeholder, precision, formatPreset, isDisabled, isReadOnly, defaultToZeroIfEmpty, max, min, ...rest }: ComboPickerProps) => JSX.Element;
 
 /**
  * The <ComboPicker /> component wrapped in a <Field />
@@ -4402,4 +4416,4 @@ declare const useResizeWidth: ({ stationaryEdge, minWidthPx, maxWidthPx, default
 declare const theme: Record<string, any>;
 declare const tottTheme: Record<string, any>;
 
-export { Accordion, AccordionButton, AccordionItem, AccordionPanel, Alert, AlertProps, AlertVariants, AspectRatio, AsyncError, AsyncErrorProps, Avatar, AvatarBadgeProps, AvatarGroup, AvatarGroupProps, AvatarProps, Badge, BasicOption, Blinker, BlinkerProps, Blockquote, BodyType, Button, ButtonProps, ButtonVariants, Capitalized, Carousel, Checkbox, CheckboxField, CheckboxFieldProps, CheckboxProps, CheckboxVariants, ChildrenType, Clickable, ClickableProps, ClipboardInput, ClipboardInputProps, Collapse, CollapseProps, Color, ColorButtonProps, ColorGrade, ColorPicker, ColorPickerField, ColorPickerFieldProps, ColorPickerProps, ColorShades, ColorsExpandButtonProps, ComboPicker, ComboPickerField, ComboPickerFieldProps, ComboPickerOption, ComboPickerProps, ComboPickerValue, ConfirmDeleteModalProps, CreatableSelectDropdown, CurrentTheme, CustomContainerPropsType, CustomElementType, CustomFlipButtonProps, CustomFlipButtonPropsType, CustomTheme, DatePicker, DatePickerField, DatePickerFieldProps, DatePickerLocaleWrapper, DatePickerProps, DateRange, DateRangePicker, DateRangePickerField, DateRangePickerFieldProps, DateRangePickerProps, DragAndDrop, DragHandle, DragHandleProps, DragItem, DragItemProps, Draggable, DraggableProps, DropZone, DropZoneProps, Droppable, DroppableProps, DurationType, EditableControlsProps, EditableProps, EditableSizes, EditableText, EditableVariant, Fade, FadeProps, FastGrid, FastGridProps, FastList, FastListProps, Field, FieldErrorType, FieldProps, FileEditorModalProps, FileFormat, FileIconButtonProps, FileItemProps, FilePicker, FilePickerField, FilePickerFieldProps, FilePickerProps, FileWithSizeAndType, FileWithSrcNameType, FileWithType, FlipButton, FlipButtonGroup, FlipButtonGroupField, FlipButtonGroupFieldProps, FlipButtonGroupProps, FlipButtonProps, Form, FormBody, FormLabel, FormLabelProps, FormProps, FormattedNumberInput, FormattedNumberInputField, FormattedNumberInputFieldProps, FormattedNumberInputPreset, FormattedNumberInputProps, H1, H2, H3, H4, H5, H6, HeadingProps, HeadingType, Icon, IconButton, IconButtonProps, IconProps, InputFieldProps, IntentButton, Label, LabelProps, LabelSizes, LabelType, Lead, ListenersType, LoadingBar, MaskedTextInput, MaskedTextInputProps, MediatoolThemeProvider, MediatoolThemeProviderProps, Menu, MenuProps, MenuVariants, Message, Modal, ModalBase, ModalBody, ModalBooleans, ModalProps, ModalSizes, MultiFileList, MultiFileListProps, MultiFilePicker, MultiFilePickerField, MultiFilePickerFieldProps, MultiFilePickerProps, MultiFileUploader, MultiFileUploaderProps, MultiItemType, MultiSort, MultiSortProps, NotificationIconButton, NotificationIconButtonProps, NumVal, NumValType, NumberInput, NumberInputField, NumberInputFieldProps, NumberInputProps, NumberInputSizeProps, NumberInputStepperProps, OffsetType, Option, OrganizationLogo, OrganizationLogoProps, OverflowGroup, OverflowGroupProps, OverflowIndicatorProps, P, PProps, PaneDivider, PaneItem, PinInput, PinInputProps, PinSize, PinSizeTuple, PinVariant, Popover, PresetOptions, ProgressBar, ProgressBarProps, Radio, RadioFieldGroupProps, RadioFieldProps, RadioGroup, RadioGroupField, RadioGroupProps, RadioProps, ResizeHandle, ScaleFade, ScaleFadeProps, SearchBar, SearchBarField, SearchBarFieldProps, SearchBarOptionType, SearchBarProps, Select, SelectActionMeta, SelectField, SelectFieldProps, SelectProps, SetValueOptionsType, Slide, SlideFade, SlideFadeProps, SlideProps, Small, Sortable, SortableContainer, SortableContainerProps, SortableItem, SortableItemProps, SortableList, SortableListProps, Spinner, SpinnerProps, SplitPane, SplitPaneProps, StatusPin, StatusPinProps, Step, StepList, StepListProps, StepPanel, StepPanelProps, StepProps, StepStack, Steps, StepsProps, StylizedType, Switch, SwitchField, SwitchFieldProps, SwitchProps, TabPanel, TabPanelProps, Table, TableProps, Tabs, TabsProps, Tag, TagGroup, TagGroupProps, TagProps, TagsInput, TagsInputProps, TextField, TextFieldProps, TextInputFormatter, TextSizeProps, Textarea, TextareaField, TextareaFieldProps, TextareaProps, Tiny, Toast, ToastProps, Toolbox, ToolboxContent, ToolboxContentProps, ToolboxFooter, ToolboxFooterProps, ToolboxHeader, ToolboxHeaderProps, ToolboxProps, Tooltip, TransitionDirection, UseFormReturn, UseSelectCallbacksProps, UseToastOptions, addAlpha, advancedParseFloat, clamp, createDebounceFunctionInstance, getChildrenWithProps, getContrastColor, getFieldError, getInitials, getMatchingValue, getShades, highlight, luminosity, ring, theme, tottTheme, trimFormValues, useArrowFocus, useCurrentTheme, useDebounce, useDidUpdateEffect, useLoadingMessage, useOutsideRectClick, useOverflowGroup, useResizeWidth, useScreenSize, useScrollToBottom, useSelectCallbacks, useSetValueRefreshed, useToast };
+export { Accordion, AccordionButton, AccordionItem, AccordionPanel, Alert, AlertProps, AlertVariants, AspectRatio, AsyncError, AsyncErrorProps, Avatar, AvatarBadgeProps, AvatarGroup, AvatarGroupProps, AvatarProps, Badge, BasicOption, Blinker, BlinkerProps, Blockquote, BodyType, Button, ButtonProps, ButtonVariants, Capitalized, Carousel, Checkbox, CheckboxField, CheckboxFieldProps, CheckboxProps, CheckboxVariants, ChildrenType, Clickable, ClickableProps, ClipboardInput, ClipboardInputProps, Collapse, CollapseProps, Color, ColorButtonProps, ColorGrade, ColorPicker, ColorPickerField, ColorPickerFieldProps, ColorPickerProps, ColorShades, ColorsExpandButtonProps, ComboPicker, ComboPickerField, ComboPickerFieldProps, ComboPickerOption, ComboPickerProps, ComboPickerValue, ConfirmDeleteModalProps, CreatableSelectDropdown, CurrentTheme, CustomContainerPropsType, CustomElementType, CustomFlipButtonProps, CustomFlipButtonPropsType, CustomTheme, DatePicker, DatePickerField, DatePickerFieldProps, DatePickerLocaleWrapper, DatePickerProps, DateRange, DateRangePicker, DateRangePickerField, DateRangePickerFieldProps, DateRangePickerProps, DragAndDrop, DragHandle, DragHandleProps, DragItem, DragItemProps, Draggable, DraggableProps, DropZone, DropZoneProps, Droppable, DroppableProps, DurationType, EditableControlsProps, EditableProps, EditableSizes, EditableText, EditableVariant, Fade, FadeProps, FastGrid, FastGridProps, FastList, FastListProps, Field, FieldErrorType, FieldProps, FileEditorModalProps, FileFormat, FileIconButtonProps, FileItemProps, FilePicker, FilePickerField, FilePickerFieldProps, FilePickerProps, FileWithSizeAndType, FileWithSrcNameType, FileWithType, FlipButton, FlipButtonGroup, FlipButtonGroupField, FlipButtonGroupFieldProps, FlipButtonGroupProps, FlipButtonProps, Form, FormBody, FormLabel, FormLabelProps, FormProps, FormattedNumberInput, FormattedNumberInputField, FormattedNumberInputFieldProps, FormattedNumberInputPreset, FormattedNumberInputProps, H1, H2, H3, H4, H5, H6, HeadingProps, HeadingType, Icon, IconButton, IconButtonProps, IconProps, InputFieldProps, IntentButton, Label, LabelProps, LabelSizes, LabelType, Lead, ListenersType, LoadingBar, MaskedTextInput, MaskedTextInputProps, MediatoolThemeProvider, MediatoolThemeProviderProps, Menu, MenuProps, MenuVariants, Message, Modal, ModalBase, ModalBody, ModalBooleans, ModalProps, ModalSizes, MultiFileList, MultiFileListProps, MultiFilePicker, MultiFilePickerField, MultiFilePickerFieldProps, MultiFilePickerProps, MultiFileUploader, MultiFileUploaderProps, MultiItemType, MultiSort, MultiSortProps, NotificationIconButton, NotificationIconButtonProps, NumVal, NumValType, NumberInput, NumberInputField, NumberInputFieldProps, NumberInputProps, NumberInputSizeProps, NumberInputStepperProps, OffsetType, Option, OrganizationLogo, OrganizationLogoProps, OverflowGroup, OverflowGroupProps, OverflowIndicatorProps, P, PProps, PaneDivider, PaneItem, PinInput, PinInputProps, PinSize, PinSizeTuple, PinVariant, Popover, PresetOptions, ProgressBar, ProgressBarProps, Radio, RadioFieldGroupProps, RadioFieldProps, RadioGroup, RadioGroupField, RadioGroupProps, RadioProps, ResizeHandle, ScaleFade, ScaleFadeProps, SearchBar, SearchBarField, SearchBarFieldProps, SearchBarOptionType, SearchBarProps, Select, SelectActionMeta, SelectField, SelectFieldProps, SelectProps, SetValueOptionsType, Slide, SlideFade, SlideFadeProps, SlideProps, Small, Sortable, SortableContainer, SortableContainerProps, SortableItem, SortableItemProps, SortableList, SortableListProps, Spinner, SpinnerProps, SplitPane, SplitPaneProps, StatusPin, StatusPinProps, Step, StepList, StepListProps, StepPanel, StepPanelProps, StepProps, StepStack, Steps, StepsProps, StylizedType, Switch, SwitchField, SwitchFieldProps, SwitchProps, TabPanel, TabPanelProps, Table, TableProps, Tabs, TabsProps, Tag, TagGroup, TagGroupProps, TagProps, TagsInput, TagsInputProps, TextField, TextFieldProps, TextInputFormatter, TextSizeProps, Textarea, TextareaField, TextareaFieldProps, TextareaProps, Tiny, Toast, ToastProps, Toolbox, ToolboxContent, ToolboxContentProps, ToolboxFooter, ToolboxFooterProps, ToolboxHeader, ToolboxHeaderProps, ToolboxProps, Tooltip, TransitionDirection, UseFormReturn, UseSelectCallbacksProps, UseToastOptions, addAlpha, advancedParseFloat, clamp, createDebounceFunctionInstance, getChildrenWithProps, getConsistentRandomColorFromString, getContrastColor, getFieldError, getInitials, getMatchingValue, getShades, highlight, luminosity, ring, theme, tottTheme, trimFormValues, useArrowFocus, useCurrentTheme, useDebounce, useDidUpdateEffect, useLoadingMessage, useOutsideRectClick, useOverflowGroup, useResizeWidth, useScreenSize, useScrollToBottom, useSelectCallbacks, useSetValueRefreshed, useToast };

package/dist/es/northlight.js

@@ -3,7 +3,7 @@ export { AbsoluteCenter, AccordionIcon, AlertDescription, AlertDialog, AlertDial
 import React, { useState, useEffect, useRef, isValidElement, cloneElement, Children, createContext, useContext, forwardRef as forwardRef$1, useImperativeHandle, memo, useMemo, useCallback } from 'react';
 import { CreatableSelect, chakraComponents, AsyncSelect, Select as Select$3 } from 'chakra-react-select';
 export { AsyncCreatableSelect, AsyncSelect, Select as ChakraReactSelect, CreatableSelect, chakraComponents as selectChakraComponents } from 'chakra-react-select';
-import { isNil, last, map, prop, difference, replace, split, path, T, identity, any, isEmpty, init, append, ifElse, gt, always, defaultTo, take, inc, dec, forEach, is, trim, keys, values, equals, omit, mergeAll, merge, toLower, find, times, add, has, not, all, filter, test, indexOf, remove, insert, intersection, findIndex, concat, head, match, length, propEq } from 'ramda';
+import { isNil, last, map, prop, difference, replace, split, path, T, keys, omit, identity, any, isEmpty, init, append, ifElse, gt, always, defaultTo, take, inc, dec, forEach, is, trim, values, equals, mergeAll, merge, toLower, find, times, add, has, not, all, filter, test, indexOf, remove, insert, intersection, findIndex, concat, head, match, length, propEq } from 'ramda';
 import { useFocusManager, FocusScope, useFocusRing } from '@react-aria/focus';
 import { useForm, FormProvider, useFormContext, Controller } from 'react-hook-form';
 export { useController, useFieldArray, useForm, useFormContext, useFormState, useWatch } from 'react-hook-form';
@@ -38,7 +38,7 @@ export * from '@dnd-kit/modifiers';
 import { VariableSizeList, VariableSizeGrid } from 'react-window';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import AvatarEditor from 'react-avatar-editor';
-import { NumericFormat } from 'react-number-format';
+import { NumericFormat, numericFormatter } from 'react-number-format';
 import InputMask from 'react-input-mask';
 import { uniqBy } from 'yafu';
 
@@ -496,6 +496,21 @@ const useCurrentTheme = () => {
 
 const clamp = (minValue, maxValue, value) => Math.min(Math.max(value, minValue), maxValue);
 
+const availableColorSchemes = keys(omit(["mono"], palette));
+const djb2Hash = (str, colors) => {
+  let hash = 5381;
+  for (let i = 0; i < str.length; i += 1) {
+    const char = str.charCodeAt(i);
+    hash = (hash << 5) + hash + char;
+    hash &= hash;
+  }
+  return Math.abs(hash) % colors.length;
+};
+const getConsistentRandomColorFromString = (str, colors = availableColorSchemes) => {
+  const index = djb2Hash(str, colors);
+  return colors[index];
+};
+
 const useResizeWidth = ({
   stationaryEdge = "left",
   minWidthPx = 0,
@@ -4805,10 +4820,13 @@ const Tooltip$1 = {
   }),
   variants: {
     default: ({ theme: { colors: color } }) => ({
-      bgColor: "bg.tertiary.default",
-      color: color.text.inverted,
-      [$arrowBg.variable]: color.bg.tertiary.default,
-      [$arrowBorder.variable]: color.bg.tertiary.default
+      color: color.text.default,
+      bgColor: color.bg.base,
+      borderWidth: "xs",
+      borderColor: color.border.default,
+      borderStyle: "solid",
+      [$arrowBg.variable]: color.bg.base,
+      [$arrowBorder.variable]: color.border.default
     }),
     success: ({ theme: { colors: color } }) => ({
       color: "text.over.success",
@@ -7810,7 +7828,7 @@ const Tooltip = (_a) => {
     hasArrow = true,
     title = "",
     description = "",
-    hasIcon = "true"
+    hasIcon = false
   } = _b, rest = __objRest$18(_b, [
     "variant",
     "hasArrow",
@@ -7825,7 +7843,7 @@ const Tooltip = (_a) => {
     {
       variant: "14",
       sx: {
-        color: !variant || variant === "ai" || variant === "default" ? "text.inverted" : void 0
+        color: !variant || variant === "ai" ? "text.inverted" : "text.default"
       }
     },
     description
@@ -13053,12 +13071,13 @@ const FormattedNumberInput = (_a) => {
     preset = "eu",
     isPercentage = false,
     onChange = identity,
-    value,
+    value: valueProp,
     numberOfDecimals = 2,
     max = Infinity,
     min = -Infinity,
     inputLeftElement,
-    inputRightElement
+    inputRightElement,
+    onBlur
   } = _b, rest = __objRest$g(_b, [
     "preset",
     "isPercentage",
@@ -13068,27 +13087,37 @@ const FormattedNumberInput = (_a) => {
     "max",
     "min",
     "inputLeftElement",
-    "inputRightElement"
+    "inputRightElement",
+    "onBlur"
   ]);
+  const [valueState, setValueState] = useState(valueProp);
+  const isControlled = typeof valueProp !== "undefined";
+  const value = isControlled ? valueProp : valueState;
   const props = presetMap[preset];
-  const [v, setV] = useState(value);
+  const getNumberFormatValues = (number) => ({
+    floatValue: number,
+    formattedValue: numericFormatter(number.toString(), props),
+    value: number.toString()
+  });
   const validateRange = () => {
-    if (isNil(v))
+    if (isNil(value))
       return;
-    const vNum = typeof v === "string" ? parseFloat(v) : v;
+    const vNum = typeof value === "string" ? parseFloat(value) : value;
     const factor = isPercentage ? 100 : 1;
     if (vNum * factor > max) {
       const newValue = roundToPrecision(max / factor, numberOfDecimals);
-      setV(newValue);
+      setValueState(newValue);
+      onChange(getNumberFormatValues(newValue));
     }
     if (vNum * factor < min) {
       const newValue = roundToPrecision(min / factor, numberOfDecimals);
-      setV(newValue);
+      setValueState(newValue);
+      onChange(getNumberFormatValues(newValue));
     }
   };
   const onValueChangeHandler = (values, sourceInfo) => {
     const newFloatValue = values.floatValue && isPercentage ? roundToPrecision(values.floatValue / 100, numberOfDecimals) : values.floatValue;
-    setV(newFloatValue);
+    setValueState(newFloatValue);
     onChange(
       __spreadProps$3(__spreadValues$k({}, values), {
         floatValue: newFloatValue
@@ -13096,6 +13125,9 @@ const FormattedNumberInput = (_a) => {
       sourceInfo
     );
   };
+  useEffect(() => {
+    validateRange();
+  }, [value]);
   return /* @__PURE__ */ React.createElement(
     InputGroupWrapper,
     {
@@ -13107,10 +13139,13 @@ const FormattedNumberInput = (_a) => {
       __spreadValues$k(__spreadValues$k({
         allowLeadingZeros: true,
         customInput: Input$1,
-        onBlur: validateRange,
+        onBlur: (e) => {
+          onBlur == null ? void 0 : onBlur(e);
+          validateRange();
+        },
         onValueChange: onValueChangeHandler,
         decimalScale: numberOfDecimals,
-        value: isPercentage ? roundToPrecision(parseFloat(`${v != null ? v : 0}`) * 100, numberOfDecimals) : v,
+        value: isPercentage ? roundToPrecision(parseFloat(`${value != null ? value : 0}`) * 100, numberOfDecimals) : value,
         suffix: isPercentage ? "%" : ""
       }, props), rest)
     )
@@ -14274,12 +14309,15 @@ const ComboPicker = (_a) => {
     onChange,
     options,
     size,
-    value,
+    value: valueProp,
     placeholder,
     precision,
     formatPreset,
     isDisabled,
-    isReadOnly
+    isReadOnly,
+    defaultToZeroIfEmpty = true,
+    max = Infinity,
+    min = -Infinity
   } = _b, rest = __objRest$1(_b, [
     "onChange",
     "options",
@@ -14289,19 +14327,26 @@ const ComboPicker = (_a) => {
     "precision",
     "formatPreset",
     "isDisabled",
-    "isReadOnly"
+    "isReadOnly",
+    "defaultToZeroIfEmpty",
+    "max",
+    "min"
   ]);
   var _a2;
   const { isOpen, onToggle, onClose } = useDisclosure();
-  const [inputValue, setInputValue] = useState(value == null ? void 0 : value.input);
-  const [selectOption, setSelectOption] = useState((_a2 = value == null ? void 0 : value.option) != null ? _a2 : options[0]);
+  const [inputValueState, setInputValueState] = useState(valueProp == null ? void 0 : valueProp.input);
+  const [selectOptionState, setselectOptionState] = useState((_a2 = valueProp == null ? void 0 : valueProp.option) != null ? _a2 : options[0]);
   const [enableSelectInput, setEnableSelectInput] = useState(false);
+  const isInputValueControlled = typeof (valueProp == null ? void 0 : valueProp.input) !== "undefined";
+  const inputValue = isInputValueControlled ? valueProp.input : inputValueState;
+  const isOptionControlled = typeof (valueProp == null ? void 0 : valueProp.option) !== "undefined";
+  const selectOption = isOptionControlled ? valueProp.option : selectOptionState;
   const buttonRef = useRef();
   const selectRef = useRef();
-  const getNewValue = (option, input) => input ? { input: Number(input), option } : { option };
+  const getNewValue = (option, input) => is(Number, input) ? { input: Number(input), option } : { option };
   const handleInputChange = (newInputvalue) => {
-    const newValue = getNewValue(selectOption, newInputvalue.floatValue);
-    setInputValue(newValue.input);
+    const newValue = getNewValue(selectOption, newInputvalue);
+    setInputValueState(newValue.input);
     onChange == null ? void 0 : onChange(newValue);
   };
   const handleSelectClose = () => {
@@ -14313,9 +14358,11 @@ const ComboPicker = (_a) => {
   };
   const handleSelectChange = (selectedOption) => {
     if (selectedOption) {
-      setSelectOption(selectedOption);
+      setselectOptionState(selectedOption);
       onChange == null ? void 0 : onChange(getNewValue(selectedOption, inputValue));
-      handleSelectClose();
+      if (isOpen) {
+        handleSelectClose();
+      }
     }
   };
   const handleSelectToggle = () => {
@@ -14329,18 +14376,25 @@ const ComboPicker = (_a) => {
       selectRef.current.focus();
     }
   }, [enableSelectInput]);
+  useEffect(() => {
+    if (!is(Number, inputValue) && defaultToZeroIfEmpty) {
+      handleInputChange(clamp(min, max, 0));
+    }
+  }, [valueProp == null ? void 0 : valueProp.input]);
   return /* @__PURE__ */ React.createElement(InputGroup, null, /* @__PURE__ */ React.createElement(
     FormattedNumberInput,
     __spreadValues$1({
       width: "100%",
-      onChange: handleInputChange,
-      defaultValue: inputValue,
+      onChange: (values) => handleInputChange(values.floatValue),
+      value: inputValue,
       placeholder,
       size,
       numberOfDecimals: precision,
       preset: formatPreset,
       disabled: isDisabled,
-      readOnly: isReadOnly
+      readOnly: isReadOnly,
+      min,
+      max
     }, rest)
   ), /* @__PURE__ */ React.createElement(
     InputRightElement,
@@ -14458,5 +14512,5 @@ const ComboPickerField = (_a) => {
   );
 };
 
-export { Accordion, AccordionButton, AccordionItem, AccordionPanel, Alert$1 as Alert, AspectRatio, AsyncError, Avatar$1 as Avatar, AvatarGroup, Badge$1 as Badge, Blinker$1 as Blinker, Blockquote$1 as Blockquote, Button$1 as Button, Capitalized$1 as Capitalized, Carousel, Checkbox$1 as Checkbox, CheckboxField, Clickable, ClipboardInput, Collapse, ColorPicker$1 as ColorPicker, ColorPickerField, ComboPicker, ComboPickerField, CreatableSelectDropdown, CustomTheme, DatePicker, DatePickerField, DatePickerLocaleWrapper, DateRangePicker, DateRangePickerField, DragAndDrop, DragHandle, DragItem, Draggable, DropZone, Droppable, EditableText, Fade, FastGrid, FastList, Field, FilePicker, FilePickerField, FlipButton$1 as FlipButton, FlipButtonGroup, FlipButtonGroupField, Form, FormLabel, FormattedNumberInput, FormattedNumberInputField, H1$1 as H1, H2$1 as H2, H3$1 as H3, H4$1 as H4, H5$1 as H5, H6$1 as H6, Icon$1 as Icon, IconButton, IntentButton, Label$1 as Label, Lead$1 as Lead, LoadingBar, MaskedTextInput, MediatoolThemeProvider, Menu, Modal, ModalBase, ModalBody, MultiFileList, MultiFilePicker, MultiFilePickerField, MultiFileUploader, MultiSort, NotificationIconButton, NumVal$1 as NumVal, NumberInput, NumberInputField, OrganizationLogo, OverflowGroup, P$1 as P, PaneDivider, PaneItem, PinInput, Popover$1 as Popover, ProgressBar, Radio, RadioGroup, RadioGroupField, ResizeHandle, ScaleFade, SearchBar, SearchBarField, Select, SelectField, Slide, SlideFade, Small$1 as Small, Sortable, SortableContainer, SortableItem, SortableList, Spinner$1 as Spinner, SplitPane, StatusPin, Step, StepList, StepPanel, StepStack, Steps, Switch, SwitchField, TabPanel, Table, Tabs, Tag, TagGroup, TagsInput, TextField, Textarea, TextareaField, Tiny$1 as Tiny, Toast, Toolbox, ToolboxContent, ToolboxFooter, ToolboxHeader, Tooltip, addAlpha, advancedParseFloat, clamp, createDebounceFunctionInstance, getChildrenWithProps, getContrastColor, getFieldError, getInitials, getMatchingValue, getShades, highlight, luminosity, ring, theme, tottTheme, trimFormValues, useArrowFocus, useCurrentTheme, useDebounce, useDidUpdateEffect, useLoadingMessage, useOutsideRectClick, useOverflowGroup, useResizeWidth, useScreenSize, useScrollToBottom, useSelectCallbacks, useSetValueRefreshed, useToast };
+export { Accordion, AccordionButton, AccordionItem, AccordionPanel, Alert$1 as Alert, AspectRatio, AsyncError, Avatar$1 as Avatar, AvatarGroup, Badge$1 as Badge, Blinker$1 as Blinker, Blockquote$1 as Blockquote, Button$1 as Button, Capitalized$1 as Capitalized, Carousel, Checkbox$1 as Checkbox, CheckboxField, Clickable, ClipboardInput, Collapse, ColorPicker$1 as ColorPicker, ColorPickerField, ComboPicker, ComboPickerField, CreatableSelectDropdown, CustomTheme, DatePicker, DatePickerField, DatePickerLocaleWrapper, DateRangePicker, DateRangePickerField, DragAndDrop, DragHandle, DragItem, Draggable, DropZone, Droppable, EditableText, Fade, FastGrid, FastList, Field, FilePicker, FilePickerField, FlipButton$1 as FlipButton, FlipButtonGroup, FlipButtonGroupField, Form, FormLabel, FormattedNumberInput, FormattedNumberInputField, H1$1 as H1, H2$1 as H2, H3$1 as H3, H4$1 as H4, H5$1 as H5, H6$1 as H6, Icon$1 as Icon, IconButton, IntentButton, Label$1 as Label, Lead$1 as Lead, LoadingBar, MaskedTextInput, MediatoolThemeProvider, Menu, Modal, ModalBase, ModalBody, MultiFileList, MultiFilePicker, MultiFilePickerField, MultiFileUploader, MultiSort, NotificationIconButton, NumVal$1 as NumVal, NumberInput, NumberInputField, OrganizationLogo, OverflowGroup, P$1 as P, PaneDivider, PaneItem, PinInput, Popover$1 as Popover, ProgressBar, Radio, RadioGroup, RadioGroupField, ResizeHandle, ScaleFade, SearchBar, SearchBarField, Select, SelectField, Slide, SlideFade, Small$1 as Small, Sortable, SortableContainer, SortableItem, SortableList, Spinner$1 as Spinner, SplitPane, StatusPin, Step, StepList, StepPanel, StepStack, Steps, Switch, SwitchField, TabPanel, Table, Tabs, Tag, TagGroup, TagsInput, TextField, Textarea, TextareaField, Tiny$1 as Tiny, Toast, Toolbox, ToolboxContent, ToolboxFooter, ToolboxHeader, Tooltip, addAlpha, advancedParseFloat, clamp, createDebounceFunctionInstance, getChildrenWithProps, getConsistentRandomColorFromString, getContrastColor, getFieldError, getInitials, getMatchingValue, getShades, highlight, luminosity, ring, theme, tottTheme, trimFormValues, useArrowFocus, useCurrentTheme, useDebounce, useDidUpdateEffect, useLoadingMessage, useOutsideRectClick, useOverflowGroup, useResizeWidth, useScreenSize, useScrollToBottom, useSelectCallbacks, useSetValueRefreshed, useToast };
 //# sourceMappingURL=northlight.js.map