@northlight/ui 2.10.1 → 2.12.0

package/dist/es/northlight.d.mts

@@ -1,16 +1,18 @@
-import { AccordionProps, AccordionButtonProps, AccordionPanelProps, AccordionItemProps, AvatarProps as AvatarProps$1, AlertProps as AlertProps$1, AspectRatioProps, StackProps, BadgeProps, ButtonProps as ButtonProps$1, CheckboxProps as CheckboxProps$1, StackDirection, IconButtonProps as IconButtonProps$1, InputProps, FlexProps, BoxProps, TagProps as TagProps$1, IconProps as IconProps$1, SystemStyleObject, HeadingProps as HeadingProps$1, TextProps, FormLabelProps as FormLabelProps$1, Heading, Text, ModalProps as ModalProps$1, NumberInputProps as NumberInputProps$1, PinInputProps as PinInputProps$1, RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1, SpinnerProps as SpinnerProps$1, SwitchProps as SwitchProps$1, TableProps as TableProps$1, TabsProps as TabsProps$1, TabPanelProps as TabPanelProps$1, TextareaProps as TextareaProps$1, UseToastOptions as UseToastOptions$1, FadeProps as FadeProps$1, ScaleFadeProps as ScaleFadeProps$1, SlideProps as SlideProps$1, SlideFadeProps as SlideFadeProps$1, CollapseProps as CollapseProps$1, TabListProps, TabProps, LinkProps, GridProps, GridItemProps, EditableProps as EditableProps$1 } from '@chakra-ui/react';
+import { AccordionProps, AccordionButtonProps, AccordionPanelProps, AccordionItemProps, StackDirection, AvatarProps as AvatarProps$1, AlertProps as AlertProps$1, AspectRatioProps, StackProps, BadgeProps, ButtonProps as ButtonProps$1, CheckboxProps as CheckboxProps$1, IconButtonProps as IconButtonProps$1, InputProps, FlexProps, BoxProps, TagProps as TagProps$1, IconProps as IconProps$1, SystemStyleObject, HeadingProps as HeadingProps$1, TextProps, FormLabelProps as FormLabelProps$1, Heading, Text, ModalProps as ModalProps$1, NumberInputProps as NumberInputProps$1, PinInputProps as PinInputProps$1, RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1, SpinnerProps as SpinnerProps$1, SwitchProps as SwitchProps$1, TableProps as TableProps$1, TabsProps as TabsProps$1, TabPanelProps as TabPanelProps$1, TextareaProps as TextareaProps$1, UseToastOptions as UseToastOptions$1, FadeProps as FadeProps$1, ScaleFadeProps as ScaleFadeProps$1, SlideProps as SlideProps$1, SlideFadeProps as SlideFadeProps$1, CollapseProps as CollapseProps$1, TabListProps, TabProps, LinkProps, GridProps, GridItemProps, EditableProps as EditableProps$1 } from '@chakra-ui/react';
 export { AbsoluteCenter, AccordionButtonProps, AccordionIcon, AccordionIconProps, AccordionItemProps, AccordionPanelProps, AccordionProps, AlertDescription, AlertDialog, AlertDialogBody, AlertDialogCloseButton, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertIcon, AlertTitle, AspectRatioProps, BadgeProps, Box, BoxProps, BreadcrumbItem as Breadcrumb, BreadcrumbLink, BreadcrumbSeparator, Breadcrumb as Breadcrumbs, ButtonGroup, Card, CardBody, CardFooter, CardHeader, Center, Modal as ChakraModal, CheckboxGroup, Circle, CircularProgress, CircularProgressLabel, CloseButton, Code, Container, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, DrawerHeader, DrawerOverlay, Editable, EditableInput, EditablePreview, Flex, FormControl, FormErrorMessage, FormHelperText, Grid, GridItem, HStack, Heading, Hide, Highlight, Image, Input, InputAddon, InputGroup, InputLeftAddon, InputLeftElement, InputRightAddon, InputRightElement, Kbd, Link, LinkBox, LinkOverlay, List, ListIcon, ListItem, Menu, MenuButton, MenuCommand, MenuDivider, MenuGroup, MenuIcon, MenuItem, MenuItemOption, MenuList, MenuOptionGroup, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, NumberDecrementStepper, NumberIncrementStepper, OrderedList, PinInputField, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, Portal, RangeSlider, RangeSliderFilledTrack, RangeSliderMark, RangeSliderThumb, RangeSliderTrack, Show, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, Slider, SliderFilledTrack, SliderMark, SliderThumb, SliderTrack, Spacer, Stack, StackDivider, StackProps, Stat, StatArrow, StatGroup, StatHelpText, StatLabel, StatNumber, TabIndicator as StepIndicator, TabPanels as StepPanels, Tab, TabIndicator, TabList, TabPanels, TableBodyProps, TableCaption, TableCaptionProps, TableCellProps, TableColumnHeaderProps, TableContainer, TableContainerProps, TableFooterProps, TableHeadProps, TableRowProps, TagCloseButton, TagLabel, TagLeftIcon, TagRightIcon, Tbody, Td, Text, Tfoot, Th, Thead, Tooltip, Tr, UnorderedList, VStack, VisuallyHidden, VisuallyHiddenInput, Wrap, WrapItem, useBoolean, useBreakpoint, useBreakpointValue, useClipboard, useControllableProp, useControllableState, useDisclosure, useEditable, useEditableControls, useEditableState, useInterval, useMediaQuery, useMergeRefs, useNumberInput, useOutsideClick, usePrefersReducedMotion, useRadio, useRadioGroup, useTab, useTabs, useTheme, useToken } from '@chakra-ui/react';
+import { Props, GroupBase, MultiValue, SingleValue, ActionMeta, MenuListProps, SelectInstance, ChakraStylesConfig } from 'chakra-react-select';
+export { AsyncCreatableSelect, AsyncSelect, Select as ChakraReactSelect, CreatableSelect } from 'chakra-react-select';
 import * as React$1 from 'react';
-import React__default, { ChangeEvent, ComponentType, InputHTMLAttributes, ReactNode, Ref, ReactElement, RefObject, MutableRefObject, EffectCallback, DependencyList } from 'react';
+import React__default, { ComponentType, Ref, ComponentProps, ChangeEvent, InputHTMLAttributes, ReactNode, ReactElement, RefObject, MutableRefObject, EffectCallback, DependencyList } from 'react';
 import { RegisterOptions, FieldValues, UseFormReturn as UseFormReturn$1, SetValueConfig, FieldPath, Control, ControllerRenderProps, UseFormProps, FieldError, Merge, FieldErrorsImpl } from 'react-hook-form';
 export { useController, useFieldArray, useForm, useFormContext, useFormState, useWatch } from 'react-hook-form';
+import * as _chakra_ui_system_dist_system_types from '@chakra-ui/system/dist/system.types';
+import * as _chakra_ui_button_dist_button from '@chakra-ui/button/dist/button';
 import { CheckboxGroupState } from '@react-stately/checkbox';
 import { RadioGroupState } from '@react-stately/radio';
 import { CSSObject } from '@emotion/react';
 import { DateValue } from '@internationalized/date';
 import { AriaDatePickerProps, AriaDateRangePickerProps } from '@react-aria/datepicker';
-import { Props, GroupBase, ActionMeta, ChakraStylesConfig, SelectInstance, MultiValue, SingleValue, MenuListProps } from 'chakra-react-select';
-export { AsyncCreatableSelect, AsyncSelect, Select as ChakraReactSelect, CreatableSelect } from 'chakra-react-select';
 import { DndContextProps, UseDroppableArguments, UseDraggableArguments, UniqueIdentifier, CollisionDetection, SensorDescriptor, SensorOptions, Modifiers } from '@dnd-kit/core';
 export * from '@dnd-kit/core';
 import { UseSortableArguments, SortingStrategy, SortableContextProps } from '@dnd-kit/sortable';
@@ -20,9 +22,10 @@ export * from '@dnd-kit/utilities';
 export { useInterval as dndUseInterval } from '@dnd-kit/utilities';
 export * from '@dnd-kit/modifiers';
 import { VariableSizeListProps, VariableSizeList, VariableSizeGridProps, VariableSizeGrid } from 'react-window';
-import * as _chakra_ui_system_dist_system_types from '@chakra-ui/system/dist/system.types';
+import * as react_select from 'react-select';
 import { Props as Props$1 } from 'react-input-mask';
-import * as _chakra_ui_toast_dist_toast_types_76829e6b from '@chakra-ui/toast/dist/toast.types-76829e6b';
+import { NumericFormatProps } from 'react-number-format';
+import * as _chakra_ui_toast_dist_toast_types_24f022fd from '@chakra-ui/toast/dist/toast.types-24f022fd';
 import { UseClickableProps } from '@chakra-ui/clickable';
 import * as _react_types_shared from '@react-types/shared';
 import * as _react_aria_focus from '@react-aria/focus';
@@ -99,6 +102,205 @@ declare const AccordionPanel: (props: AccordionPanelProps) => JSX.Element;
 
 declare const AccordionItem: (props: AccordionItemProps) => JSX.Element;
 
+type Color = 'blue' | 'gray' | 'red' | 'pink' | 'green' | 'orange' | 'purple' | 'yellow' | 'mediatoolBlue';
+type ColorGrade = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
+type ColorShades = Record<ColorGrade, string>;
+
+interface InputFieldProps {
+    inputLeftElement?: React.ReactNode;
+    inputRightElement?: React.ReactNode;
+}
+
+type Size$1 = 'sm' | 'md' | 'lg';
+interface Option {
+    label: string;
+    value: string;
+}
+interface SelectProps<T, K extends boolean> extends Omit<Props<T, K, GroupBase<T>>, 'onChange' | 'value' | 'isMulti'> {
+    /** Whatever is currently selected by the select will be controlled by value prop, if value is
+     *  of type string then it will automatically pair it up with matching object from options list */
+    value?: K extends true ? T[] | string[] : T | string;
+    /** Take a look at the second argument, the event,
+     *  for info as to which specific element was added */
+    onChange?: (option: K extends true ? MultiValue<T> : SingleValue<T>, event: ActionMeta<T>) => void;
+    onAdd?: (val: unknown) => void;
+    onRemove?: (val: unknown) => void;
+    /** Used for accessibility */
+    name?: string;
+    size?: Size$1;
+    'data-testid'?: string;
+    loadingList?: ComponentType<MenuListProps<T, K, GroupBase<T>>> | undefined;
+    /** Custom icon that will be put to the faremost right of the component */
+    icon?: ComponentType<any>;
+    /** Custom icon that will be put to the faremost left of the component */
+    leftIcon?: ComponentType<any>;
+    customOption?: ((option: T) => JSX.Element) | null;
+    isMulti?: K;
+    ref?: Ref<SelectInstance<T, K, GroupBase<T>>>;
+}
+type SelectFieldProps<T, K extends boolean = false> = SelectProps<T, K> & Omit<InputFieldProps, 'isMulti'> & {
+    direction?: StackDirection;
+    name: string;
+    label: string;
+    validate?: RegisterOptions;
+    isRequired?: boolean;
+};
+
+/**
+ * Select component that provides a customizable and accessible select input.
+ * It is built on top of Chakra UI and Chakra React Select components.
+ *
+ * @see SearchBar
+ * @see {@link https://northlight.dev/reference/select}
+ *
+ * @example (Example)
+ * ## Single Select
+ * (?
+ * <Select
+ *   options={[{ label: 'Option 1', value: '1' }, { label: 'Option 2', value: '2' }]}
+ *   onChange={(value, action) => console.log('Selected:', value)}
+ * />
+ * ?)
+ *
+ * @example (Example)
+ * ## Clearable Select
+ * (?
+ * <Select
+ *   options={[{ label: 'Option 1', value: '1' }, { label: 'Option 2', value: '2' }]}
+ *   onChange={(value, action) => console.log('Selected:', value)}
+ *   isClearable={ true }
+ * />
+ * ?)
+ *
+ * @example (Example)
+ * ## Multi select
+ * (?
+ * <Select
+ *   options={[{ label: 'Option 1', value: '1' }, { label: 'Option 2', value: '2' }]}
+ *   onChange={(value, action) => console.log('Selected:', value)}
+ *   isMulti
+ * />
+ * ?)
+ *
+ * @example (Example)
+ * ## Event meta
+ * _There is a second argument passed to the handlechange that can be useful
+ * for knowing which elements where adding/removed_
+ * (?
+ * () => {
+ *   const handleChange = (val, e) => {
+    switch (e.action) {
+      case 'select-option':
+        //on add value
+        console.log(e.option)
+        break
+      case 'pop-value':
+        //on remove value
+        console.log(e.removedValue.categoryKey)
+        break
+      default:
+        break
+    }
+  }
+ *  return <Select onChange={handleChange} options={[{label: '1', value: '1'}]} isMulti={true}/>
+ *
+ * }
+ * ?)
+ *
+ * @example (Example)
+ * ##Customizing
+ * There are two special props for easy customization
+ * * customOption
+ * * customTag
+ *
+ * This are themselves react components
+ * (?
++const customOption = ({ label }) => (
+  <HStack>
+    <Avatar name={label} />
+    <P>{label}</P>
+  </HStack>
+);
+
+const customTag = ({ label }) => {
+  const [ isIncluded, setIsIncluded ] = useState(true)
+  const toggle = () => setIsIncluded((prev) => !prev)
+
+  return (
+    <Flex>
+      <Button
+        size="xs"
+        onClick={ toggle }
+        onMouseDown={ (e) => e.stopPropagation() }
+      >
+        { isIncluded ? 'Include' : 'Exclude' }
+      </Button>
+      <Tag>{ label }</Tag>
+    </Flex>
+  )
+}
+
+const CustomSelect = () => (
+  <Select
+  customOption={customOption}
+          customTag={ customTag }
+          isMulti={true}
+    options={[
+      { label: 'Option 1', value: '1' },
+      { label: 'Option 2', value: '2' },
+    ]}
+
+  />
+);
+
+render(<CustomSelect />);
+ *
+ * ?)
+  *
+ *
+ * @example (Example)
+ * ## Testing
+ * You can grab the test id for the select by
+ * **screen.getByTestId('custom-testid)
+ * .children[0].children[2].children[0].children[1].children[0]**
+ * (?
+ * <Select
+  * data-testid="custom-test-id"
+ * />
+ * ?)
+*/
+declare const Select: <T extends Option, K extends boolean = false>(props: SelectProps<T, K> & React__default.RefAttributes<SelectInstance<T, K, GroupBase<T>>>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+
+declare function SelectField<T extends Option, K extends boolean = false>({ name, label, options, direction, isMulti, isRequired, validate, isClearable, onChange: onChangeCallback, inputLeftElement, inputRightElement, ...rest }: SelectFieldProps<T, K>): JSX.Element;
+
+declare const getMatchingValue: <T extends Option, K extends boolean>(value: (K extends true ? string[] | T[] : string | T) | undefined, options: react_select.OptionsOrGroups<T, react_select.GroupBase<T>> | undefined) => T | T[] | undefined;
+
+interface TagsInputProps<T> extends Omit<SelectProps<T, true>, 'value' | 'formatCreateLabel' | 'isValidNewOption' | 'onAdd' | 'onRemove' | 'leftIcon' | 'icon' | 'customOption'> {
+    value?: MultiValue<T>;
+    formatCreateLabel?: (textInputValue: string) => string;
+    isValidNewOption?: (option: string, selectOptions: MultiValue<T>) => boolean;
+}
+
+/**
+ * Tags Input, based of react creatable select, is meant to select
+ * multiple tags. Follows styling of textarea and is resizable.
+ *
+ * @see {@link https://northlight.dev/reference/tags-input}
+ * @example (Example)
+ * ## Simple
+ * (?
+ * <TagsInput />
+ * ?)
+ *
+ * @example (Example)
+ * ## With suggestions
+ * (?
+ * <TagsInput options={[{ label: 'Option 1', value: '1' }, { label: 'Option 2', value: '2' }]}/>
+ * ?)
+ *
+ */
+declare function TagsInput<T extends Option>({ options, onChange, isLoading, loadingList, 'data-testid': testId, value, ...rest }: TagsInputProps<T>): JSX.Element;
+
 interface OrganizationLogoProps extends AvatarProps$1 {
     name: string;
     image?: string;
@@ -160,7 +362,7 @@ interface AvatarGroupProps extends StackProps {
  * @example (Example)
  * Avatar takes a name and image
  * (?
- * <Avatar name="Anakin Skywalker" image='https://thenerdstash.com/wp-content/uploads/2021/10/Hayden-Christensen-Anakin-Skywalker.jpg' />
+ * <Avatar name="Anakin Skywalker" image='src/assets/avatars/vader.png' />
  * ?)
  *
  * <br />
@@ -189,7 +391,7 @@ declare const Avatar: ({ variant, notificationCount, name, image, size, ...rest
   {[1, 2, 3, 4, 5].map((i) => (
     <Avatar
       name="Anakin Skywalker"
-      image="https://thenerdstash.com/wp-content/uploads/2021/10/Hayden-Christensen-Anakin-Skywalker.jpg"
+      image="src/assets/avatars/trooper.png"
       size="sm"
       variant="rounded"
       key={ i }
@@ -248,9 +450,12 @@ interface BlinkerProps {
 declare const Blinker: ({ color, size, isBlinking, ...rest }: BlinkerProps) => JSX.Element;
 
 type ButtonVariants = 'default' | 'danger' | 'success' | 'brand' | 'brandSubdued' | 'link' | 'ghost';
-interface ButtonProps extends ButtonProps$1 {
+type ButtonProps<As extends React.ElementType> = Omit<ButtonProps$1, 'as'> & GenericAsProps<As> & {
     variant?: ButtonVariants;
-}
+};
+type GenericAsProps<As extends React.ElementType> = ({
+    as?: As;
+} & ComponentProps<As>);
 
 /**
  * @see {@link https://northlight.dev/reference/button}
@@ -296,7 +501,11 @@ interface ButtonProps extends ButtonProps$1 {
  * render(<ExampleButton/>)
  * ?)
  */
-declare const Button: (props: ButtonProps & React__default.RefAttributes<unknown>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+declare const Button: <As extends React__default.ElementType<any> = _chakra_ui_system_dist_system_types.ComponentWithAs<"button", _chakra_ui_button_dist_button.ButtonProps>>(props: Omit<_chakra_ui_button_dist_button.ButtonProps, "as"> & {
+    as?: As | undefined;
+} & React__default.ComponentProps<As> & {
+    variant?: ButtonVariants | undefined;
+} & React__default.RefAttributes<unknown>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 type CheckboxVariants = 'default' | 'rounded';
 interface CheckboxProps extends Omit<CheckboxProps$1, 'value'> {
@@ -312,7 +521,7 @@ interface CheckboxFieldProps extends CheckboxProps$1 {
     variant?: CheckboxVariants;
     direction?: StackDirection;
     labelPlacement?: 'left' | 'right';
-    labelSize?: '2xs' | 'xs' | 'md' | 'lg';
+    labelSize?: '2xs' | 'xs' | 'sm' | 'md' | 'lg';
 }
 
 /**
@@ -621,15 +830,6 @@ declare const FlipButtonGroup: (props: FlipButtonGroupProps) => JSX.Element;
  */
 declare const FlipButtonGroupField: ({ name, label, children, direction, isRequired, iconPlacement, onChange: onChangeCallback, validate, ...rest }: FlipButtonGroupFieldProps) => JSX.Element;
 
-type Color = 'blue' | 'gray' | 'red' | 'pink' | 'green' | 'orange' | 'purple' | 'yellow' | 'mediatoolBlue';
-type ColorGrade = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
-type ColorShades = Record<ColorGrade, string>;
-
-interface InputFieldProps {
-    inputLeftElement?: React.ReactNode;
-    inputRightElement?: React.ReactNode;
-}
-
 interface DateRange {
     startDate: string;
     endDate: string;
@@ -807,6 +1007,7 @@ declare const DatePickerField: ({ name, minValue, maxValue, isRequired, directio
 declare const DateRangePickerField: ({ name, minValue, maxValue, isRequired, direction, label, validate, firstDayOfWeek, onChange: onChangeCallback, isClearable, ...rest }: DateRangePickerFieldProps) => JSX.Element;
 
 interface ToolboxProps extends Omit<FlexProps, 'direction'> {
+    isResizable?: boolean;
     isOpen: boolean;
     /** where the toolbox pops in from */
     direction?: 'right' | 'left';
@@ -843,7 +1044,7 @@ interface ToolboxFooterProps extends FlexProps {
       <Button onClick={ onOpen } w="full">
         Open Toolbox
       </Button>
-      <Toolbox isOpen={ isOpen } onClose={ onClose } size="md">
+      <Toolbox isOpen={ isOpen } onClose={ onClose } size="sm">
         <ToolboxHeader>Title</ToolboxHeader>
         <ToolboxContent>
           <Stack>
@@ -861,7 +1062,7 @@ interface ToolboxFooterProps extends FlexProps {
  }
  * ?)
  */
-declare const Toolbox: ({ isOpen, children, direction, shouldPush, size, width, onClose, autoFocus, ...rest }: ToolboxProps) => JSX.Element;
+declare const Toolbox: ({ isResizable, isOpen, children, direction, shouldPush, size, onClose, autoFocus, ...rest }: ToolboxProps) => JSX.Element;
 
 /**
  * @see Toolbox
@@ -988,7 +1189,7 @@ render(<MyCarousel/>)
  */
 declare const Carousel: ({ children, showArrows, showRadio, value: controlledIndex, onChange, itemWidth, itemHeight, spacing, carouselStyles, ...rest }: CarouselProps) => JSX.Element;
 
-type Size$1 = 'sm' | 'md' | 'lg';
+type Size = 'sm' | 'md' | 'lg';
 interface SearchBarOptionType {
     label: string;
     value: any;
@@ -999,7 +1200,7 @@ interface SearchBarProps<T extends SearchBarOptionType, K extends boolean = fals
     onChange?: (val: any, event: ActionMeta<T>) => void;
     onAdd?: (val: unknown) => void;
     onRemove?: (val: unknown) => void;
-    size?: Size$1;
+    size?: Size;
     'data-testid'?: string;
     debouncedWaitTime?: number;
     clearInputOnSelect?: boolean;
@@ -1748,7 +1949,7 @@ interface IconProps extends IconProps$1 {
  * <Icon as={SmileyDuo} size="lg" />
  * ?)
  */
-declare const Icon: _chakra_ui_system_dist_system_types.ComponentWithAs<_chakra_ui_system_dist_system_types.As<any>, IconProps>;
+declare const Icon: _chakra_ui_system_dist_system_types.ComponentWithAs<_chakra_ui_system_dist_system_types.As, IconProps>;
 
 interface IconButtonProps extends IconButtonProps$1 {
     variant?: ButtonVariants;
@@ -2439,167 +2640,6 @@ declare const RadioGroup: ({ direction, children, name, ...rest }: RadioGroupPro
  */
 declare const RadioGroupField: ({ name, label, children, direction, isRequired, validate, onChange: onChangeCallback, ...rest }: RadioFieldGroupProps) => JSX.Element;
 
-type Size = 'sm' | 'md' | 'lg';
-interface Option {
-    label: string;
-    value: string;
-}
-interface SelectProps<T, K extends boolean> extends Omit<Props<T, K, GroupBase<T>>, 'onChange' | 'value' | 'isMulti'> {
-    /** Whatever is currently selected by the select will be controlled by value prop */
-    value?: Option | Option[];
-    /** Take a look at the second argument, the event,
-     *  for info as to which specific element was added */
-    onChange?: (option: K extends true ? MultiValue<T> : SingleValue<T>, event: ActionMeta<T>) => void;
-    onAdd?: (val: unknown) => void;
-    onRemove?: (val: unknown) => void;
-    /** Used for accessibility */
-    name?: string;
-    size?: Size;
-    'data-testid'?: string;
-    loadingList?: ComponentType<MenuListProps<T, K, GroupBase<T>>> | undefined;
-    /** Custom icon that will be put to the faremost right of the component */
-    icon?: ComponentType<any>;
-    /** Custom icon that will be put to the faremost left of the component */
-    leftIcon?: ComponentType<any>;
-    customOption?: ((option: T) => JSX.Element) | null;
-    isMulti?: K;
-    ref?: Ref<SelectInstance<T, K, GroupBase<T>>>;
-}
-type SelectFieldProps<T, K extends boolean = false> = SelectProps<T, K> & Omit<InputFieldProps, 'isMulti'> & {
-    direction?: StackDirection;
-    name: string;
-    label: string;
-    validate?: RegisterOptions;
-    isRequired?: boolean;
-};
-
-/**
- * Select component that provides a customizable and accessible select input.
- * It is built on top of Chakra UI and Chakra React Select components.
- *
- * @see SearchBar
- * @see {@link https://northlight.dev/reference/select}
- *
- * @example (Example)
- * ## Single Select
- * (?
- * <Select
- *   options={[{ label: 'Option 1', value: '1' }, { label: 'Option 2', value: '2' }]}
- *   onChange={(value, action) => console.log('Selected:', value)}
- * />
- * ?)
- *
- * @example (Example)
- * ## Clearable Select
- * (?
- * <Select
- *   options={[{ label: 'Option 1', value: '1' }, { label: 'Option 2', value: '2' }]}
- *   onChange={(value, action) => console.log('Selected:', value)}
- *   isClearable={ true }
- * />
- * ?)
- *
- * @example (Example)
- * ## Multi select
- * (?
- * <Select
- *   options={[{ label: 'Option 1', value: '1' }, { label: 'Option 2', value: '2' }]}
- *   onChange={(value, action) => console.log('Selected:', value)}
- *   isMulti
- * />
- * ?)
- *
- * @example (Example)
- * ## Event meta
- * _There is a second argument passed to the handlechange that can be useful
- * for knowing which elements where adding/removed_
- * (?
- * () => {
- *   const handleChange = (val, e) => {
-    switch (e.action) {
-      case 'select-option':
-        //on add value
-        console.log(e.option)
-        break
-      case 'pop-value':
-        //on remove value
-        console.log(e.removedValue.categoryKey)
-        break
-      default:
-        break
-    }
-  }
- *  return <Select onChange={handleChange} options={[{label: '1', value: '1'}]} isMulti={true}/>
- *
- * }
- * ?)
- *
- * @example (Example)
- * ##Customizing
- * There are two special props for easy customization
- * * customOption
- * * customTag
- *
- * This are themselves react components
- * (?
-+const customOption = ({ label }) => (
-  <HStack>
-    <Avatar name={label} />
-    <P>{label}</P>
-  </HStack>
-);
-
-const customTag = ({ label }) => {
-  const [ isIncluded, setIsIncluded ] = useState(true)
-  const toggle = () => setIsIncluded((prev) => !prev)
-
-  return (
-    <Flex>
-      <Button
-        size="xs"
-        onClick={ toggle }
-        onMouseDown={ (e) => e.stopPropagation() }
-      >
-        { isIncluded ? 'Include' : 'Exclude' }
-      </Button>
-      <Tag>{ label }</Tag>
-    </Flex>
-  )
-}
-
-const CustomSelect = () => (
-  <Select
-  customOption={customOption}
-          customTag={ customTag }
-          isMulti={true}
-    options={[
-      { label: 'Option 1', value: '1' },
-      { label: 'Option 2', value: '2' },
-    ]}
-
-  />
-);
-
-render(<CustomSelect />);
- *
- * ?)
-  *
- *
- * @example (Example)
- * ## Testing
- * You can grab the test id for the select by
- * **screen.getByTestId('custom-testid)
- * .children[0].children[2].children[0].children[1].children[0]**
- * (?
- * <Select
-  * data-testid="custom-test-id"
- * />
- * ?)
-*/
-declare const Select: <T extends Option, K extends boolean = false>(props: SelectProps<T, K> & React__default.RefAttributes<SelectInstance<T, K, GroupBase<T>>>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
-
-declare function SelectField<T extends Option, K extends boolean = false>({ name, label, options, direction, isMulti, isRequired, validate, isClearable, onChange: onChangeCallback, inputLeftElement, inputRightElement, ...rest }: SelectFieldProps<T, K>): JSX.Element;
-
 type SpinnerProps = SpinnerProps$1;
 
 /**
@@ -2847,13 +2887,92 @@ interface TextFieldProps extends Omit<InputProps, 'onChange'>, InputFieldProps {
 type MaskedTextInputProps = InputProps & Props$1 & {
     maskPlaceholder?: string;
 };
-type FormattedNumberInputProps = Omit<InputProps, 'onChange'> & {
-    formatter: TextInputFormatter;
-    onChange?: (value: string) => void;
-    value?: string;
-};
+type FormattedNumberInputPreset = 'eu' | 'us' | 'nor';
+interface PresetOptions {
+    thousandSeparator: string;
+    decimalSeparator: string;
+}
+interface FormattedNumberInputProps extends Omit<NumericFormatProps, 'onChange' | 'max' | 'min'> {
+    max?: number;
+    min?: number;
+    /** 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'];
+    /** Will format number UI as percentage, but return as decimal value */
+    isPercentage?: boolean;
+    /** Will round up and restrict number of decimals */
+    numberOfDecimals?: number;
+}
+interface FormattedNumberInputFieldProps extends FormattedNumberInputProps {
+    name: string;
+    label: string;
+    validate?: RegisterOptions;
+    isRequired?: boolean;
+    direction?: StackDirection;
+}
+
+/**
+ * @see {@link https://northlight.dev/reference/formatted-number-input-field}
+  @example (Example)
+ * The formatted number input is built uppon react-number-format
+ * It formats numbers by adjusting thousand and decimal separators
+ * ex : 22345351.34234 => 222 453 51,34234
+ * It comes with three presets: eu, us and nor.
+ * These have the following separators:
+  (?
+    <FormattedNumberInput
+      preset="us"
+      onChange={(values) => console.log(values.floatValue)}
+      isPercentage={true}
+      max={1E9}
+      min={0}
+    />
+  ?)
+
+  @example (Example)
+  ### Nor preset
+  (?
+    <FormattedNumberInput
+      preset="nor"
+      onChange={(values) => console.log(values.floatValue)}
+      value={320341345102.34134}
+      numberOfDecimals={5}
+    />
+  ?)
+
+  @example (Example)
+  ### Eu preset
+  (?
+    <FormattedNumberInput
+      preset="eu"
+      onChange={(values) => console.log(values.floatValue)}
+      value={320341345102.34134}
+      numberOfDecimals={5}
+    />
+  ?)
 
-declare const FormattedNumberInput: ({ onChange, formatter, ...rest }: FormattedNumberInputProps) => JSX.Element;
+ */
+declare const FormattedNumberInput: ({ preset, isPercentage, onChange, value, numberOfDecimals, max, min, ...rest }: FormattedNumberInputProps) => JSX.Element;
+
+/**
+ * The formatted number input component wrapped in a <Field />
+ * meant to be used only inside <Form />
+ * @see FormattedNumberInput
+ * @see {@link https://northlight.dev/reference/formatted-number-input-field}
+ * @example (Example)
+ * (?
+ * <Form initialValues={{money: ''}}>
+ *  <FormattedNumberInputField
+ *   name="money"
+ *   label="How much money is currently on your account"
+ *   labelPosition="left"
+ *  />
+ * </Form>
+ * ?)
+ *
+ */
+declare const FormattedNumberInputField: ({ name, label, isRequired, validate, onChange: onChangeCallback, direction, ...rest }: FormattedNumberInputFieldProps) => JSX.Element;
 
 declare const MaskedTextInput: ({ mask, maskPlaceholder, alwaysShowMask, name, value, placeholder, onChange, onBlur, ...rest }: MaskedTextInputProps) => JSX.Element;
 
@@ -2916,7 +3035,7 @@ declare const Toast: ({ variant, title, description, onClose, ...rest }: ToastPr
  * )}
  * ?)
  */
-declare const useToast: (defaultOpts?: UseToastOptions) => (opts?: UseToastOptions) => _chakra_ui_toast_dist_toast_types_76829e6b.b;
+declare const useToast: (defaultOpts?: UseToastOptions) => (opts?: UseToastOptions) => _chakra_ui_toast_dist_toast_types_24f022fd.a;
 
 type DurationType = number | null;
 type OffsetType = number | string;
@@ -3220,7 +3339,7 @@ You can move up the form state using a ref as well
 ?)
 
  */
-declare const Form: <FormValues extends FieldValues>(props: FormProps<FormValues> & React__default.RefAttributes<UseFormReturn$1<FormValues, any>>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+declare const Form: <FormValues extends FieldValues>(props: FormProps<FormValues> & React__default.RefAttributes<UseFormReturn$1<FormValues>>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 /**
  * Wraps children under form context
@@ -3481,7 +3600,7 @@ declare const PaneItem: ({ children, ...rest }: GridItemProps) => JSX.Element;
  * </Box>
  * ?)
  * */
-declare const PaneDivider: _chakra_ui_system_dist_system_types.ComponentWithAs<_chakra_ui_system_dist_system_types.As<any>, BoxProps>;
+declare const PaneDivider: _chakra_ui_system_dist_system_types.ComponentWithAs<_chakra_ui_system_dist_system_types.As, BoxProps>;
 
 type EditableSizes = 'sm' | 'md' | 'lg';
 interface EditableProps extends EditableProps$1 {
@@ -3528,26 +3647,74 @@ declare const EditableText: ({ size, value: inputValue, onSubmit, leftItem, ...r
 interface StepStackProps extends StackProps {
     children: ReactNode | ReactNode[];
     rowHeight?: string;
-}
-
-/**
- * Util wraper for creating ordered vertical layouts by stack
- * @see {@link https://northlight.dev/reference/step-stack}
- * @example
- * (?
- * <StepStack maxW="sm" spacing="4" rowHeight="10">
-    { Array.from({length: 5}, (_, i) => i).map((i) => <Input key={ i } />) }
-</StepStack>
- * ?)
-<br />
-It takes all the props that a normal stack takes, with the addition of a
- rowHeight prop, which is needed to get the correct height for the grey
+    /** The vertical alignment of the circles.
+     * Accepts any values that can be used with the alignItems CSS property.
+     * Defaults to "center".
+    */
+    stepCircleAlignment?: string;
+    /** Margin top for circles in pixels.
+     * Useful for nonsymmetrical layouts.
+     * Defaults to 0.
+    */
+    stepCircleMarginTopPx?: number;
+}
+
+/**
+  Util wrapper for creating ordered vertical layouts by stack
+  @see {@link https://northlight.dev/reference/step-stack}
+  @example
+  The component takes all the props that a normal stack takes, with the addition of a
+  rowHeight prop, which is needed to get the correct height for the grey
   line that goes between the steps. Any valid css height unit, px, rem, %,
-   and tokens xs, sm are valid input for rowHeight.
-(ex: rowHeight="3rem")
- *
- */
-declare const StepStack: ({ children, spacing, rowHeight, ...rest }: StepStackProps) => JSX.Element;
+  and tokens xs, sm are valid input for the <Code>rowHeight</Code> prop,
+  for example, <Code>rowHeight="3rem"</Code>.
+  <br /><br />
+  ## Simple step stack
+  (?
+    <StepStack maxW="sm" spacing="4" rowHeight="10">
+      { Array.from({length: 5}, (_, i) => i).map((i) => <Input key={ i } />) }
+    </StepStack>
+  ?)
+  <br />
+  ## Example with flex-start stepCircleAlignment prop
+  (?
+    <StepStack
+      maxW="sm"
+      spacing="4"
+      rowHeight="10"
+      stepCircleAlignment="flex-start"
+      stepCircleMarginTopPx={ 40 }
+    >
+      { Array.from({ length: 5 }, (_, i) => i).map((i) => (
+        <VStack key={ i }>
+          <Center
+            width={ 400 }
+            height={ 24 }
+            borderRadius={ 10 }
+            backgroundColor="blue.500"
+            color="white"
+          >
+            <VStack spacing="5">
+              <Text>Step { i + 1 }</Text>
+            </VStack>
+          </Center>
+          <Center
+            width={ 400 }
+            height={ 36 }
+            borderRadius={ 10 }
+            backgroundColor="green.500"
+            color="white"
+           >
+            <VStack spacing="5">
+              <Text>Some information</Text>
+            </VStack>
+          </Center>
+        </VStack>
+      )) }
+    </StepStack>
+  ?)
+*/
+declare const StepStack: ({ children, spacing, rowHeight, stepCircleAlignment, stepCircleMarginTopPx, ...rest }: StepStackProps) => JSX.Element;
 
 declare const useDebounce: <T>(value: T, delay: number) => T;
 
@@ -3599,4 +3766,4 @@ declare const useDidUpdateEffect: (effect: EffectCallback, dependencies: Depende
 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, BlockVariant, BlockVariantColorTuple, 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, ConfirmDeleteModalProps, CurrentTheme, CustomContainerPropsType, CustomElementType, CustomFlipButtonProps, CustomFlipButtonPropsType, CustomTheme, DatePicker, DatePickerField, DatePickerFieldProps, DatePickerProps, DateRange, DateRangePicker, DateRangePickerField, DateRangePickerFieldProps, DateRangePickerProps, DragAndDrop, DragHandle, DragHandleProps, DragItem, DragItemProps, Draggable, DraggableProps, DropZone, DropZoneProps, Droppable, DroppableProps, DurationType, EditableControlsProps, EditableProps, EditableSizes, EditableText, 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, FormattedNumberInputProps, H1, H2, H3, H4, H5, H6, HeadingProps, HeadingType, Icon, IconButton, IconButtonProps, IconProps, InputFieldProps, Label, LabelProps, LabelSizes, LabelType, Lead, ListenersType, MaskedTextInput, MaskedTextInputProps, MediatoolThemeProvider, MediatoolThemeProviderProps, Message, Modal, ModalBase, ModalBooleans, ModalProps, ModalSizes, MultiFileList, MultiFileListProps, MultiFilePicker, MultiFilePickerField, MultiFilePickerFieldProps, MultiFilePickerProps, MultiFileUploader, MultiFileUploaderProps, MultiItemType, MultiSort, MultiSortProps, NotificationIconButton, NotificationIconButtonProps, NumberInput, NumberInputField, NumberInputFieldProps, NumberInputProps, NumberInputSizeProps, NumberInputStepperProps, OffsetType, Option, OrganizationLogo, OrganizationLogoProps, OverflowGroup, OverflowGroupProps, OverflowIndicatorProps, P, PProps, PaneDivider, PaneItem, PinInput, PinInputProps, PinSize, PinSizeTuple, PinVariant, ProgressBar, Radio, RadioFieldGroupProps, RadioFieldProps, RadioGroup, RadioGroupField, RadioGroupProps, RadioProps, 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, StatusBlock, StatusBlockProps, 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, TextField, TextFieldProps, TextInputFormatter, TextSizeProps, Textarea, TextareaField, TextareaFieldProps, TextareaProps, Tiny, Toast, ToastProps, Toolbox, ToolboxContent, ToolboxContentProps, ToolboxFooter, ToolboxFooterProps, ToolboxHeader, ToolboxHeaderProps, ToolboxProps, TransitionDirection, UseFormReturn, UseSelectCallbacksProps, UseToastOptions, addAlpha, advancedParseFloat, createDebounceFunctionInstance, getChildrenWithProps, getContrastColor, getFieldError, getInitials, getShades, highlight, luminosity, ring, statusIconMap, theme, tottTheme, trimFormValues, useArrowFocus, useCurrentTheme, useDebounce, useDidUpdateEffect, useLoadingMessage, useOutsideRectClick, useOverflowGroup, 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, BlockVariant, BlockVariantColorTuple, 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, ConfirmDeleteModalProps, CurrentTheme, CustomContainerPropsType, CustomElementType, CustomFlipButtonProps, CustomFlipButtonPropsType, CustomTheme, DatePicker, DatePickerField, DatePickerFieldProps, DatePickerProps, DateRange, DateRangePicker, DateRangePickerField, DateRangePickerFieldProps, DateRangePickerProps, DragAndDrop, DragHandle, DragHandleProps, DragItem, DragItemProps, Draggable, DraggableProps, DropZone, DropZoneProps, Droppable, DroppableProps, DurationType, EditableControlsProps, EditableProps, EditableSizes, EditableText, 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, GenericAsProps, H1, H2, H3, H4, H5, H6, HeadingProps, HeadingType, Icon, IconButton, IconButtonProps, IconProps, InputFieldProps, Label, LabelProps, LabelSizes, LabelType, Lead, ListenersType, MaskedTextInput, MaskedTextInputProps, MediatoolThemeProvider, MediatoolThemeProviderProps, Message, Modal, ModalBase, ModalBooleans, ModalProps, ModalSizes, MultiFileList, MultiFileListProps, MultiFilePicker, MultiFilePickerField, MultiFilePickerFieldProps, MultiFilePickerProps, MultiFileUploader, MultiFileUploaderProps, MultiItemType, MultiSort, MultiSortProps, NotificationIconButton, NotificationIconButtonProps, NumberInput, NumberInputField, NumberInputFieldProps, NumberInputProps, NumberInputSizeProps, NumberInputStepperProps, OffsetType, Option, OrganizationLogo, OrganizationLogoProps, OverflowGroup, OverflowGroupProps, OverflowIndicatorProps, P, PProps, PaneDivider, PaneItem, PinInput, PinInputProps, PinSize, PinSizeTuple, PinVariant, PresetOptions, ProgressBar, Radio, RadioFieldGroupProps, RadioFieldProps, RadioGroup, RadioGroupField, RadioGroupProps, RadioProps, 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, StatusBlock, StatusBlockProps, 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, TransitionDirection, UseFormReturn, UseSelectCallbacksProps, UseToastOptions, addAlpha, advancedParseFloat, createDebounceFunctionInstance, getChildrenWithProps, getContrastColor, getFieldError, getInitials, getMatchingValue, getShades, highlight, luminosity, ring, statusIconMap, theme, tottTheme, trimFormValues, useArrowFocus, useCurrentTheme, useDebounce, useDidUpdateEffect, useLoadingMessage, useOutsideRectClick, useOverflowGroup, useScreenSize, useScrollToBottom, useSelectCallbacks, useSetValueRefreshed, useToast };