@northlight/ui 2.11.0 → 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,7 +22,7 @@ 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 { NumericFormatProps } from 'react-number-format';
 import * as _chakra_ui_toast_dist_toast_types_24f022fd from '@chakra-ui/toast/dist/toast.types-24f022fd';
@@ -100,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;
@@ -249,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}
@@ -297,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'> {
@@ -622,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;
@@ -808,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';
@@ -844,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>
@@ -862,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
@@ -989,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;
@@ -1000,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;
@@ -2440,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;
 
 /**
@@ -3613,6 +3652,11 @@ interface StepStackProps extends StackProps {
      * Defaults to "center".
     */
     stepCircleAlignment?: string;
+    /** Margin top for circles in pixels.
+     * Useful for nonsymmetrical layouts.
+     * Defaults to 0.
+    */
+    stepCircleMarginTopPx?: number;
 }
 
 /**
@@ -3634,23 +3678,43 @@ interface StepStackProps extends StackProps {
   <br />
   ## Example with flex-start stepCircleAlignment prop
   (?
-    <StepStack maxW="sm" spacing="4" rowHeight="10" stepCircleAlignment="flex-start">
+    <StepStack
+      maxW="sm"
+      spacing="4"
+      rowHeight="10"
+      stepCircleAlignment="flex-start"
+      stepCircleMarginTopPx={ 40 }
+    >
       { Array.from({ length: 5 }, (_, i) => i).map((i) => (
-        <Center
-          key={ i }
-          width={ 400 }
-          height={ 100 }
-          borderRadius={ 10 }
-          backgroundColor="blue.500"
-          color="white"
-        >
-          <Text>Step { i + 1 }</Text>
-        </Center>
+        <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, ...rest }: StepStackProps) => JSX.Element;
+declare const StepStack: ({ children, spacing, rowHeight, stepCircleAlignment, stepCircleMarginTopPx, ...rest }: StepStackProps) => JSX.Element;
 
 declare const useDebounce: <T>(value: T, delay: number) => T;
 
@@ -3702,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, FormattedNumberInputField, FormattedNumberInputFieldProps, FormattedNumberInputPreset, 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, 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, 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 };