@northlight/ui 2.11.0 → 2.12.1

package/dist/ts/types.d.ts

@@ -1,3705 +0,0 @@
-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';
-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 * as React$1 from 'react';
-import React__default, { ChangeEvent, ComponentType, InputHTMLAttributes, ReactNode, Ref, 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 { 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';
-export * from '@dnd-kit/sortable';
-import { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities';
-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 { 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';
-import { UseClickableProps } from '@chakra-ui/clickable';
-import * as _react_types_shared from '@react-types/shared';
-import * as _react_aria_focus from '@react-aria/focus';
-
-/**
- * The wrapper that uses cloneElement to pass props to AccordionItem children.
- * @see {@link https::/northlight.dev/reference/accordion}
- *
- * @example
- * (?
- * <Accordion>
-  <AccordionItem>
-    <H2>
-      <AccordionButton>
-        <Box as="span" flex='1' textAlign='left'>
-          Section 1 title
-        </Box>
-        <AccordionIcon />
-      </AccordionButton>
-    </H2>
-    <AccordionPanel pb={4}>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-      commodo consequat.
-    </AccordionPanel>
-  </AccordionItem>
-
-  <AccordionItem>
-    <H2>
-      <AccordionButton>
-        <Box as="span" flex='1' textAlign='left'>
-          Section 2 title
-        </Box>
-        <AccordionIcon />
-      </AccordionButton>
-    </H2>
-    <AccordionPanel pb={4}>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-      commodo consequat.
-    </AccordionPanel>
-  </AccordionItem>
-</Accordion>
- * ?)
- */
-declare const Accordion: (props: AccordionProps) => JSX.Element;
-
-/**
- * The button that toggles the expand/collapse state of the accordion item.
- * This button must be wrapped in an element with role heading.
- * @see Accordion
- * @see AcordionItem
- * @see {@link https://northlight.dev/reference/accordion-button}
- * @example
- * (Needs to be wrapped around AccordionItem and
- * Accordion context)
- * (?
- * <Accordion>
- * <AccordionItem>
- * <AccordionButton>Content</AccordionButton>
- * </AccordionItem>
- * </Accordion>
- * ?)
- */
-declare const AccordionButton: (props: AccordionButtonProps) => JSX.Element;
-
-/**
- * The container for the details to be revealed.
- * @see {@link htpts://northlight.dev/reference/accordion-panel}
- */
-declare const AccordionPanel: (props: AccordionPanelProps) => JSX.Element;
-
-declare const AccordionItem: (props: AccordionItemProps) => JSX.Element;
-
-interface OrganizationLogoProps extends AvatarProps$1 {
-    name: string;
-    image?: string;
-}
-
-/**
- * @see {@link https://northlight.dev/reference/organization-logo}
- *
- * @example
- * (?
- * <OrganizationLogo name="mediatool" />
- * ?)
- *
- */
-declare const OrganizationLogo: ({ name, image, variant, ...rest }: OrganizationLogoProps) => JSX.Element;
-
-type AlertVariants = 'success' | 'warning' | 'error' | 'info';
-interface AlertProps extends AlertProps$1 {
-    variant?: AlertVariants;
-}
-
-declare const Alert: ({ variant, children, ...rest }: AlertProps) => JSX.Element;
-
-/**
- * Meant to restrict child by specific ratio
- * @see {@link https://northlight.dev/aspect-ratio}
- * @example
- * (?
- <AspectRatio maxW='400px' ratio={4 / 3}>
-   <Image src='https://bit.ly/naruto-sage' alt='naruto' objectFit='cover' />
-</AspectRatio>
-?)
- *
- * */
-declare const AspectRatio: (props: AspectRatioProps) => JSX.Element;
-
-interface AvatarProps extends Omit<AvatarProps$1, 'src' | 'srcSet' | 'getInitials' | 'onError' | 'loading' | 'icon' | 'referrerPolicy' | 'showBorder' | 'iconLabel' | 'ignoreFallback'> {
-    name?: string;
-    image?: string;
-    /** This will render a badge in the corner of the avatar  */
-    notificationCount?: number;
-    size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg';
-    variant?: 'square' | 'rounded';
-}
-interface AvatarBadgeProps {
-    notificationCount?: number;
-}
-interface AvatarGroupProps extends StackProps {
-    max: number;
-    spacing?: number | string;
-    /** The children should be avatar components */
-    children: JSX.Element[] | React__default.ReactNode[];
-}
-
-/**
- * @see AvatarGroup
- * @see {@link https://northlight.dev/reference/avatar}
- *
- * @example (Example)
- * Avatar takes a name and image
- * (?
- * <Avatar name="Anakin Skywalker" image='src/assets/avatars/vader.png' />
- * ?)
- *
- * <br />
- * If there is no image, it will render the initials of the name along with a random bg color.
- * (?
- * <Avatar name="Anakin Skywalker" />
- * ?)
- *
- * <br />
- *
- * If the name also is undefined, it will render a fallback icon
- * (?
- * <Avatar />
- * ?)
- */
-declare const Avatar: ({ variant, notificationCount, name, image, size, ...rest }: AvatarProps) => JSX.Element;
-
-/**
- * Used to display a group of users
- * @see Avatar
- * @see {@link https://northlight.dev/reference/avatar-group}
- *
- * @example (Example)
- * (?
- * <AvatarGroup max={ 3 }>
-  {[1, 2, 3, 4, 5].map((i) => (
-    <Avatar
-      name="Anakin Skywalker"
-      image="src/assets/avatars/trooper.png"
-      size="sm"
-      variant="rounded"
-      key={ i }
-    />
-  )) }
-</AvatarGroup>
- * ?)
- *
- */
-declare const AvatarGroup: ({ children, max, spacing, ...rest }: AvatarGroupProps) => JSX.Element;
-
-/**
- * Badges are used to highlight an item's status for quick recognition.
- * @see {@link https://northlight.dev/reference/badge}
- *
- * @example
- * (?
- * <Stack>
-    <HStack spacing={ 4 }>
-      <Badge>Default badge</Badge>
-      <Badge variant="outline">Outline badge</Badge>
-      <Badge variant="subtle">Subtle badge</Badge>
-    </HStack>
-    <HStack spacing={ 4 } mt={ 4 }>
-      <Badge variant="solid" colorScheme="mediatoolBlue">Solid badge</Badge>
-      <Badge variant="outline" colorScheme="mediatoolBlue">Outline badge</Badge>
-      <Badge variant="subtle" colorScheme="mediatoolBlue">Subtle badge</Badge>
-    </HStack>
-    <HStack spacing={ 4 } mt={ 4 }>
-      <Badge variant="solid" colorScheme="red">Solid badge</Badge>
-      <Badge variant="outline" colorScheme="red">Outline badge</Badge>
-      <Badge variant="subtle" colorScheme="red">Subtle badge</Badge>
-    </HStack>
-  </Stack>
- * ?)
- */
-declare const Badge: (props: BadgeProps) => JSX.Element;
-
-interface BlinkerProps {
-    color?: string;
-    size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg';
-    isBlinking?: boolean;
-}
-
-/**
- * Status indicator of some sorts
- * @see {@link https://northlight.dev/reference/blinker}
- *
- * @example (Example)
- * (?
- * <Box p="4">
-  * <Blinker color="bg.brand.default" />
- * </Box>
- * ?)
- */
-declare const Blinker: ({ color, size, isBlinking, ...rest }: BlinkerProps) => JSX.Element;
-
-type ButtonVariants = 'default' | 'danger' | 'success' | 'brand' | 'brandSubdued' | 'link' | 'ghost';
-interface ButtonProps extends ButtonProps$1 {
-    variant?: ButtonVariants;
-}
-
-/**
- * @see {@link https://northlight.dev/reference/button}
- *
- * @example
- * (?
-        <Button
-          variant="success"
-          leftIcon={ <Icon as={ FolderCheckDuo } /> }
-          rightIcon={ <Icon as={ PlusDuo } /> }
-        >
-          Create folder
-        </Button>
- * ?)
- *
- * @example (Example)
- * (?
- * +
- * const variants = ['link', 'success', 'default', 'danger', 'brand', 'ghost']
- *
- * const ExampleButton = () => {
- *  const [currentVariant, setCurrentVariant ] = useState(0)
- *  const [ isLoading, setIsLoading ] = useState(false)
- *
- * const handleClick = () => {
- * setIsLoading(true)
- * setTimeout(() => {
- * setCurrentVariant((prev) => prev === 5 ? 0 : prev + 1)
- * setIsLoading(false)
- * }, 300)
- *
- * }
- *
- *  return (
- * <Button variant={variants[currentVariant]}
- * isLoading={isLoading} onClick={handleClick} loadingText="Saving...">
- * Save changes
- * </Button>
- * )
- *
- * }
- *
- * render(<ExampleButton/>)
- * ?)
- */
-declare const Button: (props: ButtonProps & 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'> {
-    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
-    value?: boolean;
-    variant?: CheckboxVariants;
-}
-interface CheckboxFieldProps extends CheckboxProps$1 {
-    name: string;
-    label: string;
-    validate?: RegisterOptions;
-    isRequired?: boolean;
-    variant?: CheckboxVariants;
-    direction?: StackDirection;
-    labelPlacement?: 'left' | 'right';
-    labelSize?: '2xs' | 'xs' | 'sm' | 'md' | 'lg';
-}
-
-/**
- * @see CheckboxField
- * @see {@link https://northlight.dev/reference/checkbox}
- *
- * @example (Example)
- * Mainly used for forms, however this component is controlled by
- *  a value prop and an onChange callback
- *
- * (?
- * +
- * const MyForm = () => {
- * const [ isVegan, setIsVegan ] = useState(false)
- *
- * return (
- * <Stack p="2">
- * <Label size="sm" htmlFor="vegan-checkbox">Are you vegan</Label>
- * <Checkbox name="vegan-checkbox" onChange={() => setIsVegan((prev) => !prev)} value={isVegan} />
- * </Stack>
- *
- * )
- * }
- *
- * render(<MyForm />)
- *
- * ?)
- *
- */
-declare const Checkbox: ({ value, onChange, name, size, variant, ...rest }: CheckboxProps) => JSX.Element;
-
-/**
- * The checkbox component wrapped in a <Field />
- * meant to be used only inside <Form />
- * @see Checkbox
- * @see {@link https://northlight.dev/reference/checkbox-field}
- * @example (Example)
- * ## Basic
- * (?
- * <Form initialValues={{name: ''}}>
- *  <CheckboxField
- *   name="terms"
- *   label="I agree to the Terms & Conditions"
- *   labelPlacement="left"
- *   labelSize="md"
- *  />
- * </Form>
- * ?)
- *
- */
-declare const CheckboxField: ({ name, label, variant, isRequired, validate, onChange: onChangeCallback, direction, labelPlacement, labelSize, ...rest }: CheckboxFieldProps) => JSX.Element;
-
-type ColorPickerSize = 'sm' | 'md' | 'lg';
-interface ColorPickerProps extends Omit<IconButtonProps$1, 'onChange' | 'value' | 'aria-label' | 'variant'> {
-    onChange?: (value: string) => void;
-    /** This are what color options the user can choose */
-    colors?: string[];
-    /** This are the extended color options  displayed when clicking the down caret */
-    expandedColors?: string[];
-    value?: string | null;
-    size?: ColorPickerSize;
-    name?: string;
-}
-type ColorButtonProps = {
-    color: string;
-    onClick: () => void;
-    size?: ColorPickerSize;
-    selected?: boolean;
-};
-type ColorsExpandButtonProps = {
-    onClick: () => void;
-    size: ColorPickerSize;
-    expanded: boolean;
-};
-type ColorPickerFieldProps = ColorPickerProps & {
-    name: string;
-    label: string;
-    validate?: RegisterOptions;
-    size?: ColorPickerSize;
-    isRequired?: boolean;
-    direction?: StackDirection;
-};
-
-/**
- * Dropdown menu where user can select hex value
- * from set colors
- * @see {@link https://northlight.dev/reference/color-picker}
- *
- * @example (Example)
- * ##Pick a color for this campaign
- * (?
- * () => {
- * const [ color, setColor ] = useState(undefined)
- * return (
- * <HStack>
- * <ColorPicker color={color} onChange={setColor}/>
- *   <ClipboardInput value={ color } />
-
- * </HStack>
- * )
- * }
- *
- * ?)
- *
- *
- */
-declare const ColorPicker: ({ onChange, colors, expandedColors, value, name, size, ...rest }: ColorPickerProps) => JSX.Element;
-
-/**
- * The <ColorPicker /> component wrapped in a <Field />
- * meant to be used only inside <Form />
- * @see ColorPicker
- * @see {@link https://northlight.dev/reference/color-picker}
- *
- */
-declare const ColorPickerField: ({ name, label, direction, isRequired, validate, ...rest }: ColorPickerFieldProps) => JSX.Element;
-
-type FlipButtonSize = 'xs' | 'sm' | 'md' | 'lg';
-type FlipButtonVariant = 'default' | 'brand';
-type StyleType = {
-    opacity: '0';
-    width: '0';
-    height: '0';
-};
-type InputPropsType = InputHTMLAttributes<HTMLInputElement>;
-type FocusPropsType = React__default.DOMAttributes<Element>;
-type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
-type TupleTypes<T> = {
-    [P in keyof T]: T[P];
-} extends {
-    [key: number]: infer V;
-} ? V : never;
-type MergedFocusAndInputProps = UnionToIntersection<TupleTypes<[InputPropsType, FocusPropsType]>>;
-interface CustomFlipButtonPropsType extends MergedFocusAndInputProps {
-    ref: React__default.MutableRefObject<null>;
-    style: StyleType;
-    'aria-label': string;
-}
-type FocusRingType = {
-    outline?: string;
-    ring?: string;
-    ringColor?: string;
-    ringOffset?: string;
-};
-type CustomContainerPropsType = {
-    'aria-checked': boolean;
-    'aria-disabled': boolean;
-    sx: FocusRingType;
-    as: 'label';
-    cursor: 'pointer';
-};
-interface CustomFlipButtonProps {
-    state: CheckboxGroupState | RadioGroupState | null;
-    flipButtonProps: CustomFlipButtonPropsType;
-    containerProps: CustomContainerPropsType;
-    isFocused: boolean;
-    isSelected: boolean;
-    isDisabled: boolean;
-    isMulti: boolean;
-    focusRing: FocusRingType;
-    label?: string;
-    value: string;
-}
-interface FlipButtonProps {
-    size?: FlipButtonSize;
-    variant?: FlipButtonVariant;
-    isMulti?: boolean;
-    isDisabled?: boolean;
-    icon?: ComponentType<any>;
-    value: string;
-    label?: string;
-    iconPlacement?: 'left' | 'right' | 'none';
-    children?: ((props: CustomFlipButtonProps) => JSX.Element) | string;
-}
-interface FlipButtonGroupProps extends Omit<FlipButtonProps, 'value' | 'children' | 'label'> {
-    onChange?: (val: string | string[]) => void;
-    direction?: StackDirection;
-    children?: React__default.ReactNode[] | React__default.ReactNode;
-    name?: string;
-    value?: string | string[];
-    iconPlacement?: 'left' | 'right' | 'none';
-    /** This enables passing styles directly to the div closes to the flip buttons */
-    sx?: CSSObject;
-}
-interface FlipButtonGroupFieldProps extends FlipButtonGroupProps {
-    name: string;
-    label: string;
-    isRequired?: boolean;
-    validate?: RegisterOptions;
-    value?: string;
-    iconPlacement?: 'left' | 'right' | 'none';
-}
-
-/**
- * Meant to act as a middleman to turn any component into
- * either a radio or checkbox input
- * where the user can choose between multiple options
- * @see CheckboxGroup
- * @see RadioGroup
- * @see FlipButtonGroup
- * @see {@link https://northlight.dev/reference/flip-button}
- *
- * @example (Example)
- * ### It must always be wrapped in a group
- * (?
- * <FlipButton />
- * ?)
- * Or it will throw an error
- *
- *
- * @example (Example)
- * ### As a radio button group
- * (?
-  *<FlipButtonGroup isMulti={ false } size="sm">
-  <FlipButton value="one" icon={AgencyDuo}>One</FlipButton>
-  <FlipButton value="two" icon={StagesDuo}>Two</FlipButton>
-  <FlipButton value="three" icon={Flag04Duo}>Three</FlipButton>
-</FlipButtonGroup>
- * ?)
- *
- * @example (Example)
- * ### As a checkbox button group
- * (?
-  *<FlipButtonGroup isMulti={ true } size="sm">
-  <FlipButton value="one" icon={TagsStackDuo}>One</FlipButton>
-  <FlipButton value="two" icon={Image03Duo}>Two</FlipButton>
-  <FlipButton value="three" icon={TagDuo }>Three</FlipButton>
-</FlipButtonGroup>
- * ?)
- *
- * @example (Example)
- * ###Custom Flip Button
- * (?
- * +
- * const customElement = ({
-  flipButtonProps,
-  containerProps,
-  isSelected,
-  label,
-  value,
-}) => (
-  <HStack
-    { ...containerProps }
-    spacing="4"
-    _checked={ { bgColor: 'blue.500', color: 'text.inverted' } }
-    borderRadius="md"
-    p="2"
-  >
-    <input { ...flipButtonProps } />
-    <Icon as={ UsersDuo } />
-    <Stack spacing="0">
-      <Text>{ label }</Text>
-      <Text color={ isSelected ? 'text.inverted' : 'gray.200' }>
-        { value === 'public'
-          ? 'Everyone can view and edit the plan'
-          : 'The plan is only visible to you'
-        }
-      </Text>
-    </Stack>
-  </HStack>
-)
-
-const MyComponent = () => (
-<FlipButtonGroup direction="column" sx={{bgColor: 'transparent'}}>
-  <FlipButton value="public" label="Public">
-    { customElement }
-  </FlipButton>
-  <FlipButton value="private" label="Private">
-    { customElement }
-  </FlipButton>
-</FlipButtonGroup>
-
-)
-render(<MyComponent/>)
- *
- * ?)
- *
- */
-declare const FlipButton: (props: FlipButtonProps) => JSX.Element;
-
-/**
- * Provides context to FlipButton
- * @see FlipButton
- * @see {@link https://northlight.dev/reference/flip-button-group}
- */
-declare const FlipButtonGroup: (props: FlipButtonGroupProps) => JSX.Element;
-
-/**
- * The FlipButtonGroup component wrapped in a <Field />
- * meant to be used only inside <Form />
- * @see FlipButton
- * @see {@link https://northlight.dev/reference/flip-button-group-field}
- *
- * @example (Example)
- * (?
- * <Form intitialValues={{foods: 'pizza'}}>
-          <FlipButtonGroupField name="foods" label="Select the food you enjoy most" variant="brand">
-            <FlipButton value="pizza">Pizza</FlipButton>
-            <FlipButton value="hamburger">Button</FlipButton>
-            <FlipButton value="steak">Steak</FlipButton>
-          </FlipButtonGroupField>
- * </Form>
- *
- * ?)
- *
- */
-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;
-}
-interface DatePickerSettings {
-    firstDayOfWeek: 'sunday' | 'monday';
-    resetDate: () => void;
-    isInvalid?: boolean;
-    /** The dateFormat is a string,
-     *  which acts as a template on how to display the date for the user, ex:
-     *  dateFormat="mm.dd.yyyy" */
-    dateFormat?: string;
-    isClearable?: boolean;
-    variant?: 'outline' | 'filled';
-}
-type DatePickerMode = 'simple' | 'advanced';
-interface DatePickerProps extends AriaDatePickerProps<DateValue>, DatePickerSettings {
-}
-interface DateRangePickerProps extends Omit<AriaDateRangePickerProps<DateValue>, 'onChange' | 'value' | 'minValue' | 'maxValue'>, DatePickerSettings {
-    onChange?: (date: null | DateRange) => void;
-    value: DateRange | null;
-    minValue?: string | undefined;
-    maxValue?: string | undefined;
-    fiscalStartMonth?: number;
-    fiscalStartDay?: number;
-    mode?: DatePickerMode;
-}
-interface DatePickerFieldProps extends Omit<InputProps, 'onChange'>, InputFieldProps {
-    name: string;
-    label: string;
-    minValue?: string;
-    maxValue?: string;
-    validate?: RegisterOptions;
-    firstDayOfWeek?: 'sunday' | 'monday';
-    direction?: StackDirection;
-    dateFormat?: string;
-    onChange?: (date: DateValue) => void;
-    isClearable?: boolean;
-    fiscalStartMonth?: number;
-    fiscalStartDay?: number;
-}
-interface DateRangePickerFieldProps extends Omit<DatePickerFieldProps, 'onChange'> {
-    onChange?: (date: null | DateRange) => void;
-    mode?: DatePickerMode;
-}
-type FormBody = Record<string, DateRange>;
-
-/**
- * Popover to select single date
- * @see DatePickerField
- * @see {@link https://northlight.dev/reference/date-picker}
- *
- * @example (Example)
- * ## When is your birthday
- * (?
- * () => {
- * const [ date, setDate ] = useState('2023-10-10')
- *
- * const parseDate = () => {
- * return undefined
- * }
- *
- * return (
- * <DatePicker
- * firstDayOfWeek="monday"
- * resetDate={() => setDate(null)} onChange={setDate} value={parseDate(date)}/>
- * )
- * }
- *
- * ?)
- * <br />
- * ### Some notes on date format
- * As you can see in the above example, the parseDate function returns undefined.
- *  The DatePicker natively handles
- * dates as a DateValue object. To get out a string value on format yyyy-mm-dd,
- *  you can use the javascript <b>.toString</b> method,
- *  and for getting it back from string to DateValue,
- *  you can use the parseDate util.
- * <br />
- * To read more about date formatting, consult the
- * <a target="_blank" style="fontWeight: bold;" href="https://react-spectrum.adobe.com/internationalized/date/CalendarDate.html">react aria internationalized documentation</a>
- *
- * @example (Example)
- * ## Another example
- * (?
-  * <DatePicker
-  * variant="filled"
-  * dateFormat="mm|dd-yyyy"
-  * />
- * ?)
- *
- */
-declare const DatePicker: (props: DatePickerProps) => JSX.Element;
-
-/**
- * Popover to choose date range on format {startDate:' yyyy-mm-dd', endDate: 'yyyy-mm-dd'}
- *
- * @see DatePicker
- * @see DateRangePickerField
- * @see {@link https://northlight.dev/reference/date-range-picker}
- * @example (Example)
- * ## Advanced Mode
- * (Due to it being harder to setup normal date range picker,
- *  the date range picker field is demoed,
- *  here, you need to pass down and parse a value for the date range picker for it to work properly,
- *  consult the date picker documentation and the source code for date range picker
- * field for appropiate use)
- * (?
- * <Form initialValues={{date: null}}>
-  * <DateRangePickerField name="date"/>
- * </Form>
- * ?)
- *
- * @example (Example)
- * ## Simple mode
- * The previous example was the date range picker variant
- * for which we call advance, this one is a simpler version with the same core functionality:
- * (?
- * <Form initialValues={{date: null}}>
-  * <DateRangePickerField name="date" mode="simple"/>
- * </Form>
- * ?)
- *
- * @example (Example)
- * ## Sophisticated example
- * The `DateRangePickerField` can have **fiscalStartMonth** and **fiscalStartDay** as a `number`
- * (?
- * <Form initialValues={{date: null}}>
-  * <DateRangePickerField
-  * name="date"
-  * mode="advanced"
-  * variant="filled"
-  * fiscalStartMonth={3}
-  * fiscalStartDay={5}
-  * dateFormat="mm|dd-yyyy"
-  * minValue="2023-01-01"
-  * maxValue="2028-01-01"
-  * />
- * </Form>
- * ?)
- */
-declare const DateRangePicker: (props: DateRangePickerProps) => JSX.Element;
-
-/**
- * The <DatePicker /> component wrapped in a <Field />
- * meant to be used only inside <Form />
- * @see DatePicker
- * @see {@link https://northlight.dev/reference/date-picker-field}
- *
- * @example (Example)
- * ##Fill in your information:
- * (?
- * <Form initialValues={{date: null}}>
- * <DatePickerField name="date" />
- * </Form>
- *
- * ?)
- * <br />
- * ###The simplest way
- * Using the date picker in a form is probably the easiest
- * way to use it, it will handle the state for you and you
- * can retrieve the date at the end as a string on format
- * yyyy-mm-dd on the onSubmit callback on <Form>
- *
- */
-declare const DatePickerField: ({ name, minValue, maxValue, isRequired, direction, label, validate, firstDayOfWeek, onChange: onChangeCallback, inputLeftElement, inputRightElement, ...rest }: DatePickerFieldProps) => JSX.Element;
-
-/**
- * The <DateRangePicker /> component wrapped in a <Field />
- * meant to be used only inside <Form />
- * @see DateRangePicker
- * @see {@link https://northlight.dev/reference/date-range-picker-field}
- *
- */
-declare const DateRangePickerField: ({ name, minValue, maxValue, isRequired, direction, label, validate, firstDayOfWeek, onChange: onChangeCallback, isClearable, ...rest }: DateRangePickerFieldProps) => JSX.Element;
-
-interface ToolboxProps extends Omit<FlexProps, 'direction'> {
-    isOpen: boolean;
-    /** where the toolbox pops in from */
-    direction?: 'right' | 'left';
-    /** if true creates a statically positioned box element that takes up
-     *  width, causes layout change. */
-    shouldPush?: boolean;
-    children: JSX.Element[] | JSX.Element;
-    size?: 'sm' | 'md' | 'lg';
-    onClose: () => void;
-    /** if true focuses on the first element in the toolboxcontent. */
-    autoFocus?: boolean;
-}
-interface ToolboxHeaderProps extends FlexProps {
-    onClose?: () => void;
-    children: JSX.Element | string;
-}
-interface ToolboxContentProps extends FlexProps {
-    children: JSX.Element | string;
-}
-interface ToolboxFooterProps extends FlexProps {
-    children: JSX.Element | JSX.Element[] | string;
-}
-
-/**
- * Controllable Sidebar drawer
- * @see Slide
- * @see {@link https://northlight.dev/reference/toolbox}
- * @example
- * (?
- *() => {
-  const { isOpen, onOpen, onClose } = useDisclosure()
-  return (
-    <Flex>
-      <Button onClick={ onOpen } w="full">
-        Open Toolbox
-      </Button>
-      <Toolbox isOpen={ isOpen } onClose={ onClose } size="md">
-        <ToolboxHeader>Title</ToolboxHeader>
-        <ToolboxContent>
-          <Stack>
-            <Input />
-            <Input />
-          </Stack>
-        </ToolboxContent>
-        <ToolboxFooter justifyContent="end" gap="2">
-          <Button variant="ghost">Cancel</Button>
-          <Button variant="brand">Save</Button>
-        </ToolboxFooter>
-      </Toolbox>
-    </Flex>
-  )
- }
- * ?)
- */
-declare const Toolbox: ({ isOpen, children, direction, shouldPush, size, width, onClose, autoFocus, ...rest }: ToolboxProps) => JSX.Element;
-
-/**
- * @see Toolbox
- * @see {@link https://northlight.dev/reference/toolbox-header}
- *
- */
-declare const ToolboxHeader: ({ children, onClose, ...rest }: ToolboxHeaderProps) => JSX.Element;
-
-/**
- * Main content of toolbox drawer
- * @see Toolbox
- * @see {@link https://northlight.dev/reference/toolbox-content}
- */
-declare const ToolboxContent: ({ children, ...rest }: ToolboxContentProps) => JSX.Element;
-
-/**
- * @see Toolbox
- * @see {@link https://northlight.dev/reference/toolbox-footer}
- */
-declare const ToolboxFooter: ({ children, ...rest }: ToolboxFooterProps) => JSX.Element;
-
-interface CarouselProps extends Omit<BoxProps, 'onChange'> {
-    children: JSX.Element[];
-    /** Whether to show default navigational arrows on sides */
-    showArrows?: boolean;
-    /** Whether to show default navigational radio button on bottom  */
-    showRadio?: boolean;
-    /** This is the width of the container that each seperate child component is rendered within  */
-    itemWidth?: number;
-    /** This is the height of the container that each seperate child component is rendered within  */
-    itemHeight?: number;
-    spacing?: number;
-    /** A number, representing the index of the number
-     * that is currently centered/focused in the carousel */
-    value?: number;
-    /** callback function that passes the current centered item in the carousel */
-    onChange?: (value: number) => void;
-    /** Custom styles to apply directly on closes wrapper to children */
-    carouselStyles?: StackProps;
-}
-
-/**
- * Easiely one of the fanciest components, horizontal carousel wrapper for anything
- *
- * @see {@link https://northlight.dev/reference/carousel}
- *
- * @example (Example)
- * The carousel takes up 100% of its parents container width and height.
- *  It then renders all children div into a draggable div using framer-motion
-
- * (?
- * +
- *const Item = ({ name, ...rest }) => (
-  <Center color="white" bg="teal.500" rounded="md" w="full" h="full" { ...rest }>
-    { name }
-  </Center>
-)
-
-const MyCarousel = () => (
-<Box h="300px">
-  <Carousel>
-    <Item name="Item 1" />
-    <Item name="Item 2" />
-    <Item name="Item 3" />
-  </Carousel>
-</Box>
-
-)
-
-render(<MyCarousel />)
- *
- * ?)
- *
- * @example (Example)
- * ##Controling the carousel state
- * The carousel takes an **onChange** and value
- * (which is the index of the current active element), meaning it can be controlled.
- *
- * (?
- * +
- * const Item = ({ name, ...rest }) => (
-  <Center color="white" bg="teal.500" rounded="md" w="full" h="full" { ...rest }>
-    { name }
-  </Center>
-)
-
-const MyCarousel = () => {
-  const [index, setIndex ] = useState(0)
-  return (
-
-    <VStack
-    borderColor="border.default"
-    borderWidth="st.border.width.sm" borderStyle="solid" p="2" borderRadius="st.border.radius.lg">
-      <Box w="full" h="sm">
-        <Carousel
-          showArrows={ false }
-          showRadio={ false }
-          value={ index }
-          onChange={ (v) => setIndex(v) }
-        >
-          <Item name="Item 1" />
-          <Item name="Item 2" />
-          <Item name="Item 3" />
-        </Carousel>
-      </Box>
-      <FlipButtonGroup
-        onChange={ (v) => setIndex(parseInt(v, 10)) }
-        value={ `${index}` }
-        variant="brand"
-      >
-        <FlipButton value="0">One</FlipButton>
-        <FlipButton value="1">Two</FlipButton>
-        <FlipButton value="2">Three</FlipButton>
-      </FlipButtonGroup>
-    </VStack>
-  )
-}
-*
-render(<MyCarousel/>)
- * ?)
- *(You can also hide the default
-            navigational arrows and radio button using <b>showArrows</b> and
-            <b>showRadio</b> as in example)
- */
-declare const Carousel: ({ children, showArrows, showRadio, value: controlledIndex, onChange, itemWidth, itemHeight, spacing, carouselStyles, ...rest }: CarouselProps) => JSX.Element;
-
-type Size$1 = 'sm' | 'md' | 'lg';
-interface SearchBarOptionType {
-    label: string;
-    value: any;
-}
-type CustomElementType<T extends SearchBarOptionType> = ((props: T) => JSX.Element) | null;
-interface SearchBarProps<T extends SearchBarOptionType, K extends boolean = false> extends Omit<Props<T, boolean, GroupBase<T>>, 'onChange' | 'value'> {
-    value?: T | T[];
-    onChange?: (val: any, event: ActionMeta<T>) => void;
-    onAdd?: (val: unknown) => void;
-    onRemove?: (val: unknown) => void;
-    size?: Size$1;
-    'data-testid'?: string;
-    debouncedWaitTime?: number;
-    clearInputOnSelect?: boolean;
-    closeMenuonSelect?: boolean;
-    defaultOptions?: T[];
-    sx?: ChakraStylesConfig<any>;
-    isMulti?: K;
-    customOption?: CustomElementType<T>;
-    customTag?: CustomElementType<T>;
-    loadOptions?: ((query: string) => Promise<T[]>) | null;
-    onSearchInputChange?: (input: string) => void;
-    icon?: ComponentType<any>;
-}
-interface SearchBarFieldProps<T extends SearchBarOptionType, K extends boolean = false> extends Omit<SearchBarProps<T, K>, 'onChange'>, InputFieldProps {
-    onChange?: (val: T | T[], event: ActionMeta<T>) => void;
-    direction?: StackDirection;
-    name: string;
-    label: string;
-    validate?: RegisterOptions;
-    isRequired?: boolean;
-}
-
-declare const SearchBar: <T extends SearchBarOptionType, K extends boolean = false>(props: SearchBarProps<T, K> & React__default.RefAttributes<SelectInstance<T, K, GroupBase<T>>>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
-
-declare const SearchBarField: <T extends SearchBarOptionType, K extends boolean = false>({ name, label, direction, isMulti, isRequired, validate, isClearable, onChange: onChangeCallback, inputLeftElement, inputRightElement, ...rest }: SearchBarFieldProps<T, K>) => JSX.Element;
-
-/**
- * Context used for all drag and drop components
- * (Based on dnd-kit)
- * @see Draggable
- * @see Droppable
- * @see {@link https://northlight.dev}
- * @see {@link https://dndkit.com/}
- *
- */
-declare const DragAndDrop: (props: DndContextProps) => JSX.Element;
-
-type ListenersType = SyntheticListenerMap;
-type ChildrenType$1<PropType = any, PropTypeTwo = any> = ((props: PropType, secondProp: PropTypeTwo, thirdProp?: any) => JSX.Element | JSX.Element[] | undefined) | (JSX.Element | JSX.Element[]);
-type MultiItemType<itemKeys extends string | number | symbol> = Record<itemKeys, string[]>;
-interface DroppableProps extends UseDroppableArguments {
-    children?: ((props: any) => JSX.Element | JSX.Element[]) | (JSX.Element | JSX.Element[]);
-}
-interface DraggableProps extends UseDraggableArguments {
-    itemLabel?: string;
-    children?: ChildrenType$1<ListenersType>;
-    disableDrag?: boolean;
-}
-interface SortableItemProps extends UseSortableArguments {
-    children?: ChildrenType$1<ListenersType>;
-    itemLabel?: UniqueIdentifier;
-    dblClickThreshold?: number;
-    disableDrag?: boolean;
-}
-type MovedItemType<T> = {
-    item: T;
-    oldIndex: number;
-    newIndex: number;
-};
-interface SortableListProps<T> {
-    children?: ChildrenType$1<T, ListenersType>;
-    items: T[];
-    /** Play around with this in case the sortable items don't land where
-     *  supposed to. See: https://docs.dndkit.com/api-documentation/context-provider/collision-detection-algorithms */
-    collisionDetection?: CollisionDetection;
-    /** Used to optimize rendering, see: https://docs.dndkit.com/presets/sortable#sorting-strategies  */
-    strategy?: SortingStrategy;
-    onChange?: (items: T[]) => void;
-    createKey?: (item: T) => UniqueIdentifier;
-    /** You can add an overlay, which can make it more accessible in use
-     *  cases where it can be hard to see for the user where their item will land on drop */
-    displayOverlay?: boolean;
-    /** In case you want to adjust the input methods, see: https://docs.dndkit.com/api-documentation/sensors */
-    sensors?: SensorDescriptor<SensorOptions>[];
-    dblClickThreshold?: number;
-    disableDrag?: boolean;
-    /** callback, passes the dragged item and it's old / new index after a drag, */
-    onMovedItem?: ({ item, oldIndex, newIndex }: MovedItemType<T>) => void;
-    /** Read: https://docs.dndkit.com/api-documentation/modifiers#restricting-motion-to-an-axis */
-    modifiers?: Modifiers;
-}
-interface MultiSortProps<itemKeys extends string | number | symbol> {
-    children?: ChildrenType$1;
-    items: MultiItemType<itemKeys>;
-    /** https://docs.dndkit.com/api-documentation/context-provider/collision-detection-algorithms */
-    collisionDetection?: CollisionDetection;
-    onChange?: (items: MultiItemType<itemKeys>) => void;
-    /** https://docs.dndkit.com/api-documentation/sensors */
-    sensors?: SensorDescriptor<SensorOptions>[];
-}
-interface DragItemProps extends Omit<TagProps$1, 'variant'> {
-    isDragging?: boolean;
-    itemLabel?: UniqueIdentifier;
-    bgColor?: string;
-}
-interface DragHandleProps extends IconProps$1 {
-    isDragging?: boolean;
-    icon?: ComponentType<any>;
-}
-interface DropZoneProps {
-    sx?: SystemStyleObject;
-    name: UniqueIdentifier;
-    children?: JSX.Element;
-}
-interface SortableContainerProps {
-    items: UniqueIdentifier[];
-    strategy?: SortingStrategy;
-    children?: (id: UniqueIdentifier) => JSX.Element;
-}
-
-/**
- *  Will turn it's childen into a draggable component when under DragAndDrop context
- * @see {@link https://northlight.dev/reference/draggable}
- *
- * @example (Example)
- * ##Basic exapmle
- * (?
- * <DragAndDrop>
- * <HStack>
- * <Draggable id="random-id" />
- * <Draggable />
- * </HStack>
- * </DragAndDrop>
- * ?)
- * <br />
- * (Notice that the id prop is required)
- *
- * @example (Example)
- * ## With custom children
- *
- * (?
- * <DragAndDrop>
- * <Box p="4">
- * <Draggable id="random-id">
- * <Center
- * boxSize="3xs"
- * boxShadow="xl"
- * borderRadius="st.border.radius.lg"
- * bgColor="bg.overlayer"
- * >I am draggable</Center>
- * </Draggable>
- * </Box>
- *
- * </DragAndDrop>
- * ?)
- *
- *
- */
-declare const Draggable: ({ itemLabel, children, disableDrag, ...rest }: DraggableProps) => JSX.Element;
-
-/**
- * Wrapper where you can style a container to place draggable elements
- * @see DropZone
- * @see Draggable
- * @see DragAndDrop
- * @see {@link https://northlight.dev/reference/droppable}
- *
- * @example (Example)
- * ## Move the item into the container
- * (?
- * () => {
- * const [ isDropped, setIsDropped ] = useState(false)
- * const handleDragEnd = (e) => {
- * setIsDropped(e.over && e.over.id === 'droppable')
- * }
- *
- * return (
- * <DragAndDrop onDragEnd={handleDragEnd}>
- * <HStack>
- * {!isDropped && <Draggable id="draggable" />}
- * <Droppable id="droppable">
- *  <Center bgColor="bg.filled" boxSize="3xs">
- * {isDropped ? <Draggable id="draggable"/> :  <P>Drop here!</P>}
- * </Center>
- * </Droppable>
- * </HStack>
- *
- * </DragAndDrop>
- *
- * )
- *
- *
- * }
- * ?)
- *
- */
-declare const Droppable: ({ children, ...rest }: DroppableProps) => JSX.Element;
-
-/**
- * Wrapper that provides context for sortable elements using DnD-kit
- * @see DragAndDrop
- * @see SortableList
- * @see MultiSort
- * @see {@link https://northlight.dev}
- * @see {@link https://docs.dndkit.com/presets/sortable/sortable-context}
- * @example
- * **<a href="https://docs.dndkit.com/presets/sortable/sortable-context" target="_blank">Read more on dnd-docs</a>**
- * */
-declare const Sortable: (props: SortableContextProps) => JSX.Element;
-
-/**
- * Renders a draggable item under sortable context
- * @see SortableList
- * @see MultiSort
- * @see {@link https://northlight.dev/reference/sortable-item}
- *
- * @example
- * (? <SortableItem id="sortable-1"/> ?)
- * */
-declare const SortableItem: ({ itemLabel, dblClickThreshold, children, disableDrag, ...rest }: SortableItemProps) => JSX.Element;
-
-/**
- * Default draggable item none other provided in SortableList and MultiSort.
- *  Renders a tag which can be used under the DragAndDrop context
- * @see DragAndDrop
- * @see SortableList
- * @see MultiSort
- * @see {@link https://northlight.dev/reference/drag-item}
- *
- * @example (Example)
- * (?
- * <DragItem itemLabel="Option 1" bgColor="bg.filled" />
- * ?)
- *
- */
-declare const DragItem: (props: DragItemProps & React__default.RefAttributes<unknown>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
-
-/**
- * Util component to display drag handle icon
- * for draggable react components under DragAndDrop context
- * @see DragAndDrop
- * @see {@link https://northlight.dev/reference/drag-handle}
- *
- * @example (Example)
- * (?
- * <DragHandle />
- * ?)
- */
-declare const DragHandle: ({ icon, isDragging, ...rest }: DragHandleProps) => JSX.Element;
-
-/**
- * Prestyled droppable area to drop draggable components,
- *  you can override the styles of dropzone with sx prop
- * @see Draggable
- * @see Droppable
- * @see DragAndDrop
- * @see {@link https://northlight.dev/reference/drop-zone}
- *
- * @example (Example)
- * ## You can drop draggable components
- * (?
- * <DragAndDrop>
- * <DropZone name="random-id-2"><Draggable  id="test"/></DropZone>
- * </DragAndDrop>
- * ?)
- */
-declare const DropZone: ({ sx, name, children, ...rest }: DropZoneProps) => JSX.Element;
-
-/**
- * Util component for sorting items in two dimensions(container and order in container)
- * @see SortableList
- * @see DragAndDrop
- * @see {@link https://northlight.dev/reference/multi-sort}
- *
- * @example
- * (?
- * () => {
-  const [ multiItems, setMultiItems ] = useState({
-    container1: [
-      'JavaScript',
-      'Python',
-      'Front end',
-      'Back end',
-    ],
-    container2: [ 'HTML', 'CSS' ],
-    container3: [ 'Chakra UI', 'Next.js', 'Tailwind UI' ],
-  })
-  return (
-    <Stack>
-          <MultiSort
-            items={ multiItems }
-            onChange={ (items) => setMultiItems(items) }
-          >
-            { (items, activeId) => (
-              <HStack alignItems="start">
-                <VStack>
-                  <Heading size="sm">I like</Heading>
-                  <DropZone name="container1">
-                    <SortableContainer items={ items.container1 } />
-                  </DropZone>
-                </VStack>
-                <VStack>
-                  <Heading size="sm">I don't like</Heading>
-                  <DropZone name="container2">
-                    <SortableContainer items={ items.container2 } />
-                  </DropZone>
-                </VStack>
-                <VStack>
-                  <Heading size="sm">Neutral</Heading>
-                  <DropZone name="container3">
-                    <SortableContainer items={ items.container3 } />
-                  </DropZone>
-                </VStack>
-                <DragOverlay>
-                  { activeId ? (
-                    <DragItem
-                      itemLabel={ activeId }
-                      isDragging={ true }
-                      bgColor="background.tag.default"
-                    />
-                  ) : null }
-                </DragOverlay>
-              </HStack>
-            ) }
-          </MultiSort>
-          <Text>Controlled output: </Text>
-          <Code p={ 2 } borderRadius={ 4 }>
-            <pre>{ JSON.stringify(multiItems, null, 2) }</pre>
-          </Code>
-</Stack>
-  )
- * }
- * ?)
- * <br />
- * Multisort abstracts logic away for setting up sortable items between multiple containers,
- *  you can then separate, or create and style this containers as you want,
- *  by putting them under <Droppable /> or a prestyled <Dropzone />
-
-SortableContainer is a wrapper for a <Sortable /> with a sortable item
- * */
-declare function MultiSort<itemKeys extends string | number | symbol>({ items: sortableItems, onChange, children, collisionDetection, sensors, }: MultiSortProps<itemKeys>): JSX.Element;
-
-/**
- * Util component to render sortable items under sortable context
- * @see SortableItem
- * @see Sortable
- * @see {@link https://northlight.dev/reference/sortable-list}
- *
- * @example (Example)
- * ## You can render any layout of sortable components, for example grid:
- * (?
- * () => {
- * const [items, setItems] = useState(Array.from({length: 100}, (_, i) => i))
- * return (
- * <Stack>
-<SimpleGrid minChildWidth="50px" spacing={ 4 }>
-    <SortableList
-        items={ items }
-        onChange={ (items) => setItems(items) }
-    />
-</SimpleGrid>
-          <Code p={ 2 } borderRadius={ 4 }>
-            { JSON.stringify(items, null, 2) }
-          </Code>
-          </Stack>
- * )}
- * ?)
- *
- * @example (Example)
- * ### With custom component
- * (?
- * () => {
- * const [items, setItems] = useState([ { name: 'item1' }, { name: 'item2' }, { name: 'item3' } ])
- * return (
- * <Stack>
- *
- * <SortableList
-  items={ items }
-  createKey={ (item) => item.name }
-  disableDrag={ true }
-  onChange={setItems}
->
-  { ({ name }, listeners, { isOver }) => (
-    <HStack>
-      <DragHandle { ...listeners } isDragging={ isOver } />
-      <Input defaultValue={ name } />
-    </HStack>
-  ) }
-</SortableList>
-</Stack>
-  )}
- * ?)
-<br />
-If disableDrag=false, then when the user double clicks it will trigger
-the default behaviour of the rendered component instead of the dragging,
- you can adjust the threshold with dblClickThreshold, default is 300ms
- *
- *
- */
-declare function SortableList<T>({ children, items, collisionDetection, createKey, strategy, onChange, onMovedItem, displayOverlay, sensors, dblClickThreshold, disableDrag, modifiers, }: SortableListProps<T>): JSX.Element;
-
-/**
- * Used with multi sort to render a sortable list inside a droppable
- * @see MultiSort
- * @see {@link https://northlight.dev/reference/sortable-container}
- *
- * @example
- * (?
- * <SortableContainer items={['item 1', 'item 2', 'item 3']} />
- * ?)
- *
- */
-declare const SortableContainer: ({ children, items, strategy }: SortableContainerProps) => JSX.Element;
-
-interface HeadingProps extends HeadingProps$1 {
-}
-
-/**
- * @see {@link https://northlight.dev/reference/h1}
- * @example (Example)
- * (?
- * <H1>Heading 1</H1>
- * ?)
- */
-declare const H1: ({ children, sx, ...rest }: HeadingProps) => JSX.Element;
-
-/**
- * @see {@link https://northlight.dev/reference/h2}
- * @example (Example)
- * (?
- * <H2>Heading 2</H2>
- * ?)
- *
- */
-declare const H2: ({ children, sx, ...rest }: HeadingProps) => JSX.Element;
-
-/**
- * @see {@link https://northlight.dev/reference/h3}
- * @example (Example)
- * (?
- * <H3>Heading 3</H3>
- * ?)
- */
-declare const H3: ({ children, sx, ...rest }: HeadingProps) => JSX.Element;
-
-/**
- * @see {@link https://northlight.dev/reference/h4}
- * @example (Example)
- * (?
- * <H4>Heading 4</H4>
- * ?)
- */
-declare const H4: ({ children, sx, ...rest }: HeadingProps) => JSX.Element;
-
-/**
- * @see {@link https://northlight.dev/reference/h5}
- * @example (Example)
- * (?
- * <H5>Heading 5</H5>
- * ?)
- */
-declare const H5: ({ children, sx, ...rest }: HeadingProps) => JSX.Element;
-
-/**
- * @see {@link https://northlight.dev/reference/h6}
- * @example (Example)
- * (?
- * <H6>Heading 6</H6>
- * ?)
- */
-declare const H6: ({ children, sx, ...rest }: HeadingProps) => JSX.Element;
-
-interface PProps extends TextProps {
-    variant?: '14' | '16';
-}
-
-/**
- * @see {@link https://northlight.dev/reference/p}
- * @example
- * (?
- * <P>Body text</P>
- * ?)
- *
- */
-declare const P: ({ children, variant, sx, ...rest }: PProps) => JSX.Element;
-
-/**
- * One of the stylized typography components
- * @see Capitalized
- * @see Lead
- * @see Small
- * @see Tiny
- * @see {@link https://northlight.dev/reference/blockquote }
- *
- * @example (Example)
- * (?
- * <Blockquote sx={{color: 'green.500' }}>Success</Blockquote>
- * ?)
- * (_Note, all other css properties not listed under the
- * props tab to right should be passed down via **sx**_)
- *
- *
- *
- */
-declare const Blockquote: ({ children, sx, ...rest }: TextProps) => JSX.Element;
-
-/**
- * One of the stylized typography components
- * @see Blockquote
- * @see Lead
- * @see Small
- * @see Tiny
- * @see {@link https://northlight.dev/reference/capitalized }
- *
- * @example (Example)
- * (?
- * <Capitalized sx={{color: 'red.500' }}>Error</Capitalized>
- * ?)
- * (_Note, all other css properties not listed
- * under the props tab to right should be passed down via **sx**_)
- *
- */
-declare const Capitalized: ({ children, sx, ...rest }: TextProps) => JSX.Element;
-
-/**
- * One of the stylized typography components
- * @see Blockquote
- * @see Lead
- * @see Small
- * @see Tiny
- * @see {@link https://northlight.dev/reference/lead }
- *
- * @example
- * (?
- * <Lead>Lead</Lead>
- * ?)
- * (_Note, all other css properties not listed
- * under the props tab to right should be passed down via **sx**_)
- *
- */
-declare const Lead: ({ children, sx, ...rest }: TextProps) => JSX.Element;
-
-/**
- * One of the stylized typography components
- * @see Capitalized
- * @see Lead
- * @see Blockquote
- * @see Tiny
- * @see {@link https://northlight.dev/reference/small }
- *
- * @example (Example)
- * (?
- * <Small>Small</Small>
- * ?)
- * (_Note, all other css properties not listed under the
- * props tab to right should be passed down via **sx**_)
- *
- */
-declare const Small: ({ children, sx, ...rest }: TextProps) => JSX.Element;
-
-/**
- * One of the stylized typography components
- * @see Capitalized
- * @see Lead
- * @see Blockquote
- * @see Small
- * @see {@link https://northlight.dev/reference/tiny }
- *
- * @example (Example)
- * (?
- * <Tiny>Tiny</Tiny>
- * ?)
- * (_Note, all other css properties not listed under the
- * props tab to right should be passed down via **sx**_)
- *
- */
-declare const Tiny: ({ children, sx, ...rest }: TextProps) => JSX.Element;
-
-type LabelSizes = '2xs' | 'xs' | 'sm' | 'md' | 'lg';
-interface LabelProps extends FormLabelProps$1 {
-    size?: LabelSizes;
-}
-
-/**
- * One of the stylized typography components
- * @see Blockquote
- * @see Lead
- * @see Small
- * @see Tiny
- * @see {@link https://northlight.dev/reference/label }
- *
- * @example
- * (?
- * <Label sx={{color: 'brand.500' }} size="lg">Brand</Label>
- * ?)
- * (_Note, all other css properties not listed
- * under the props tab to right should be passed down via **sx**_)
- *
- */
-declare const Label: ({ children, size, sx, ...rest }: LabelProps) => JSX.Element;
-
-type HeadingType = typeof Heading;
-type BodyType = typeof P;
-type StylizedType = typeof Text;
-type LabelType = typeof Label;
-
-interface FormLabelProps extends LabelProps {
-    size?: LabelSizes;
-}
-
-/**
- * Renders a label, meant to be used alongside a field component
- * @see Field
- * @see {@link https://northlight.dev/reference/form-label}
- *
- */
-declare const FormLabel: ({ children: label, ...rest }: FormLabelProps) => JSX.Element;
-
-interface FastListProps extends Omit<VariableSizeListProps, 'itemSize' | 'children' | 'height' | 'width' | 'direction'> {
-    itemSize: number | ((index: number) => number);
-    itemCount: number;
-    direction?: StackDirection;
-    children: JSX.Element | ((index: number) => JSX.Element | string) | string;
-    width?: number;
-    height?: number;
-    initialScrollOffset?: number;
-    overscanCount?: number;
-}
-
-/**
- * Wrapper that renders children in a virtualized stacked layout
- * @see FastGrid
- * @see {@link https://northlight.dev/reference/fast-list}
- *
- * @example (Example)
- * (?
- * <Box h="500px" w="300p" border="1px solid gray" p={ 4 } borderRadius={ 4 }>
-    <FastList itemCount={ 10000 } itemSize={ 30 } overscanCount={ 100 }>
-        { (index) => `item-${index}` }
-    </FastList>
-</Box>
- * ?)
- *
- */
-declare const FastList: (props: FastListProps & React__default.RefAttributes<VariableSizeList<any>>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
-
-interface FastGridProps extends Omit<VariableSizeGridProps, 'children' | 'height' | 'width' | 'columnWidth' | 'rowHeight' | 'columnCount' | 'rowCount'> {
-    columnSize: number | ((index: number) => number);
-    rowSize: number | ((index: number) => number);
-    columns: number;
-    rows: number;
-    children: JSX.Element | ((rowIndex: number, columnIndex: number) => JSX.Element | string | null) | string;
-    width?: number;
-    height?: number;
-    overscanRowCount?: number;
-    overscanColumnCount?: number;
-}
-
-/**
- * Wrapper that renders children in a virtualized html grid layout
- * @see FastList
- * @see {@link https://northlight.dev/reference/fast-grid}
- *
- * @example (Example)
- * ## Simple example
- * (?
- *       <Box h="500px" w="500px" border="1px solid gray" p={ 4 } borderRadius={ 4 }>
-        <FastGrid
-          columns={ 10000 }
-          rows={ 10000 }
-          rowSize={ 100 }
-          columnSize={ 100 }
-          overscanRowCount={ 10 }
-          overscanColumnCount={ 1 }
-        >
-          { (rowIndex, columnIndex) => `[${rowIndex}, ${columnIndex}]` }
-        </FastGrid>
-      </Box>
- *
- * ?)
- *
- * @example (Example)
- * ## Spreadsheet example
- * (?
- * +
- *
-const getCell = (rowIndex, columnIndex) => {
-  if (rowIndex === 0 && columnIndex === 0) return ''
-  if (rowIndex === 0) {
-    return (
-      <Lead w="full">
-        { ' ' }
-        Col { columnIndex }
-      </Lead>
-    )
-  }
-  if (columnIndex === 0) {
-    return (
-      <Lead w="full">
-        { ' ' }
-        Row { rowIndex }
-      </Lead>
-    )
-  }
-  return (
-    <TextField name={ `${rowIndex}-${columnIndex}` } />
-  )
-}
- *
- * const MyGrid = () => {
- * const [values, setValues ] = useState({})
- * return(
- * <Form initialValues={{}}>
- * {({getValues}) => (
- * <Stack>
- * <Box h="500px" w="500p" border="1px solid gray" p={ 4 } borderRadius={ 4 }>
-    <FastGrid
-        columns={ 10000 }
-        rows={ 10000 }
-        rowSize={ 50 }
-        columnSize={ 100 }
-        overscanRowCount={ 10 }
-        overscanColumnCount={ 1 }
-    >
-    {getCell}
-    </FastGrid>
-</Box>
-<Button onClick={() => setValues(getValues())} variant="success">Save</Button>
-<Code> <pre>{JSON.stringify(values, null, 2)}</pre></Code>
-</Stack>
- * )}
-    </Form>
- * )}
-
-render(<MyGrid />)
- *
- *
- * ?)
- * **(Note, FastGrid must be wrapped in a parent element with set height and width!)**
- *
-*/
-declare const FastGrid: (props: FastGridProps & React__default.RefAttributes<VariableSizeGrid<any>>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
-
-interface IconProps extends IconProps$1 {
-    as?: ComponentType<any>;
-    size?: 'xs' | 'sm' | 'md' | 'lg';
-}
-
-/**
- * Pass down any icon from northlight/icons via as prop
- * @see IconButton
- * @see {@link https://northlight.dev/reference/icon}
- *
- * @example
- * (?
- * <Icon as={SmileyDuo} size="lg" />
- * ?)
- */
-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;
-}
-
-/**
- * A normal button but renders an icon instead of text
- * @see Button
- * @see Icon
- * @see {@link https://northlight.dev/reference/icon-button}
- *
- * @example (Example)
- * (?
- * <IconButton variant='brand' icon={<Icon as={UsersDuo} />} onClick={console.log}/>
- * ?)
- *
- * @example (Example)
- * (?
-        <IconButton
-          isRound={ true }
-          aria-label="create"
-          variant="success"
-          icon={ <Icon as={ PlusSolid } /> }
-        />
- * ?)
- *
- */
-declare const IconButton: (props: IconButtonProps & React__default.RefAttributes<unknown>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
-
-type ModalSizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | 'full' | 'huge';
-interface ModalProps extends ModalProps$1 {
-    size?: ModalSizes;
-    /** If true then the modal will never unmount but only hide when closing,
-     * stayMountedOnClose is false by default */
-    stayMountedOnClose?: boolean;
-}
-
-interface CompressionType {
-    width: number;
-    height: number;
-    quality: number;
-}
-interface EditFileOptionsType {
-    canEdit: boolean;
-    canEditImage: boolean;
-    canEditName: boolean;
-}
-interface FileFormat {
-    src: string | null;
-    name: string;
-    type: string;
-    _id: string;
-    isLazy?: boolean;
-    size: number | null;
-    isUploading?: boolean;
-    uploaded?: number;
-    lastModified?: number;
-}
-type FileWithType = Pick<FileFormat, 'type'>;
-type FileWithSrcNameType = Pick<FileFormat, 'src' | 'name' | 'type'>;
-type FileWithSizeAndType = Pick<FileFormat, 'type' | 'size'>;
-type ModalBooleans = {
-    canCropImage?: boolean;
-    canEditFile?: boolean;
-    confirmDelete?: boolean;
-    canEditFileName?: boolean;
-};
-interface FilePickerProps {
-    /** Ex: acceptFormat="'acceptFormat="video/*, .jpg" */
-    acceptFormat?: string;
-    onChange?: (image: File | null) => void;
-    compression?: CompressionType;
-    isUploading?: boolean;
-    uploaded?: number;
-    maxFileSize?: number;
-    value?: string | null;
-    loadWithSpinner?: boolean;
-    /** Will upon a popup modal for the user to click another button to triggr delte callback */
-    confirmDelete?: boolean;
-    editFileOptions?: EditFileOptionsType;
-    showProgress?: boolean;
-}
-interface FilePickerFieldProps extends Omit<FilePickerProps, 'onChange'> {
-    name: string;
-    label: string;
-    validate?: RegisterOptions;
-    isRequired?: boolean;
-    direction?: StackDirection;
-    onChange?: (File: string | null) => void;
-}
-interface MultiFilePickerFieldProps extends Omit<FilePickerFieldProps, 'onChange'> {
-    onChange?: (File: string[]) => void;
-}
-interface MultiFilePickerProps<T extends FileFormat> extends Omit<FilePickerProps, 'onChange'> {
-    onChange?: (files: File[]) => void;
-    compression?: CompressionType;
-    files?: T[] | null;
-    uploadingFiles?: T[];
-    deleteFile?: ((file: T | FileFormat) => void) | null;
-    enablePreLoad?: boolean;
-    enableSmartLoad?: boolean;
-    confirmDelete?: boolean;
-}
-interface MultiFileUploaderProps<T extends FileFormat> {
-    /** Ex: acceptFormat="'acceptFormat="video/*, .jpg" */
-    acceptFormat?: string;
-    compression?: CompressionType;
-    maxFileSize?: number;
-    /** Callback Will immediately return file objects before compressed */
-    addFilesToQueue?: (files: T[]) => void;
-    updatePreviewFiles?: (files: any[]) => void;
-    onChange?: (files: File[]) => void;
-}
-interface MultiFileListProps<T extends FileFormat> {
-    files?: T[];
-    uploadingFiles?: T[];
-    deleteFile?: (file: T | FileFormat) => void;
-    onChange?: (files: File[]) => void;
-    addFile?: (file: File, id: string) => void;
-    enableSmartLoad?: boolean;
-    editFileOptions?: EditFileOptionsType;
-    confirmDelete?: boolean;
-}
-interface FileItemProps<T> {
-    file: T | FileFormat;
-    deleteFile: (file: T | FileFormat) => void;
-    onChangeCallback: (files: File[]) => void;
-    addFile?: (file: File, id: string) => void;
-    isLazy?: boolean;
-    editFileOptions?: EditFileOptionsType;
-    confirmDelete?: boolean;
-}
-interface ConfirmDeleteModalProps extends Omit<ModalProps, 'children'> {
-    confirmDelete: () => void;
-    fileName: string;
-}
-interface FileEditorModalProps extends Omit<ModalProps, 'children'> {
-    fileName: string;
-    canEditFileName?: boolean;
-    canCropImage?: boolean;
-    isImage: boolean;
-    handleCrop: () => void;
-    image: File | string | null;
-    setFileName: (value: string) => void;
-}
-interface FileIconButtonProps extends Omit<IconButtonProps$1, 'icon' | 'ButtonVariants'> {
-    icon: ComponentType<any>;
-    variant?: ButtonVariants;
-}
-
-/**
- * Lets user import file of any type as Javascript File Object
- * @see MultiFilePicker
- * @see {@link https://northlight.dev/reference/file-picker}
- *
- * @example (Example)
- * (?
- * <FilePicker />
- * ?)
- *
- *
- */
-declare const FilePicker: ({ acceptFormat, onChange, compression, uploaded: uploadedInitial, maxFileSize, showProgress, value, loadWithSpinner, confirmDelete, editFileOptions, }: FilePickerProps) => JSX.Element;
-
-/**
- * The file picker component wrapped in a <Field />
- * meant to be used only inside <Form />
- * @see FilePicker
- * @see Field
- * @see {@link https://northlight.dev/reference/file-picker-field}
- *
- * @example (Example)
- * ## Meant for uploading images in a form
- * Where they handled as base64 string
- * (?
- * <Form initialValues={{image: ''}}>
- * {({watch}) => (
- * <Stack>
- * <FilePickerField name="image" />
- * <Code maxH="xs" overflowY="scroll">{JSON.stringify(watch(), null, 2)}</Code>
- * </Stack>
- * )}
- * </Form>
- *
- * ?)
- *
- */
-declare const FilePickerField: ({ name, label, direction, isRequired, validate, onChange: onChangeCallback, ...rest }: FilePickerFieldProps) => JSX.Element;
-
-/**
- * Input to upload multiple files without ui to render files
- * @see MultiFilePicker
- * @see {@link https://northlight.dev/reference/multi-file-uploader}
- * @example
- * (?
- * () => {
- * const [ images, setImages ] = useState([])
- * return (
- * <Stack>
-    <Box h="sm">
-      <Carousel>
-        { images.map((imageSrc) => (
-          <Image src={imageSrc} borderRadius="st.border.radius.md" />
-        )) }
-      </Carousel>
-    </Box>
-    <MultiFileUploader
-      acceptFormat="image/*"
-      onChange={ (newFiles) =>
-        setImages(
-          newFiles.map((file) => URL.createObjectURL(file))
-        )
-      }
-    />
-    </Stack>
- * )
- * }
- * ?)
- *
- */
-declare function MultiFileUploader<T extends FileFormat>({ acceptFormat, compression, onChange, addFilesToQueue, updatePreviewFiles, maxFileSize, }: MultiFileUploaderProps<T>): JSX.Element;
-
-/**
- * Lets user import file of any type as Javascript File Object
- * @see FilePicker
- * @see {@link https://northlight.dev/reference/multi-file-picker}
- *
- * @example (Example)
- * (?
- * <MultiFilePicker />
- * ?)
- * ## For more information, view: <a href="https://northlight.dev/components/file%20picker">guide</a>
- *
- *
- */
-declare function MultiFilePicker<T extends FileFormat>({ acceptFormat, compression, onChange, files, uploadingFiles, deleteFile, confirmDelete, maxFileSize, enablePreLoad, enableSmartLoad, editFileOptions, }: MultiFilePickerProps<T>): JSX.Element;
-
-/**
- * Show list of files, their uploading progress as well as options to edit/delete them
- * @see MultiFileUploader
- * @see MultiFilePicker
- * @see {@link https://northlight.dev/multi-file-list}
- *
- */
-declare function MultiFileList<T extends FileFormat>({ files, uploadingFiles, onChange, deleteFile, addFile, confirmDelete, editFileOptions, enableSmartLoad, }: MultiFileListProps<T>): JSX.Element;
-
-/**
- * The multi file picker component wrapped in a <Field />
- * meant to be used only inside <Form />
- * @see MultiFilePicker
- * @see Field
- * @see {@link https://northlight.dev/reference/multi-file-picker-field}
- *
- * @example (Example)
- * ## Meant for uploading images in a form
- * Where they handled as base64 strings
- * (?
- * <Form initialValues={{images: []}}>
- * {({watch}) => (
- * <Stack>
- * <MultiFilePickerField name="images" />
- * <Code maxH="xs" overflowY="scroll">{JSON.stringify(watch(), null, 2)}</Code>
- * </Stack>
- * )}
- * </Form>
- *
- * ?)
- *
- */
-declare const MultiFilePickerField: ({ name, label, direction, isRequired, validate, onChange: onChangeCallback, ...rest }: MultiFilePickerFieldProps) => JSX.Element;
-
-interface OverflowGroupProps {
-    childrenProps?: Record<string, any>;
-    max?: number;
-    children: JSX.Element[] | React__default.ReactNode[];
-    onChange?: (nbrRemainingChildren: number) => void;
-    /** Should be used together with the userOverflowGroup hook to fit by parent element */
-    rect?: HTMLElement | null;
-}
-
-/**
- * Util wrapper for lists by only rendering as many items as fit per the specification
- * @see {@link https://northlight.dev/reference/overflow-group}
- * @example
- * (?
- * +
- *
-const CustomSlider = ({ onChange }) => (
-  <Slider min={ 100 } max={ 300 } step={ 1 } onChange={ onChange }>
-    <SliderTrack>
-      <SliderFilledTrack />
-    </SliderTrack>
-    <SliderThumb />
-  </Slider>
-)
- *
-
-const arrayWithLength = (n) => {
-  let buffer = []
-  for(let i = 0; i < n; i++) {
-    buffer.push(i)
-  }
-  return buffer
-}
- * const MyComponent =  () => {
- *   const [ n, setN ] = useState(5)
-  const [ max, setMax ] = useState(10)
-  const [ width, setWidth ] = useState(200)
-  const [ height, setHeight ] = useState(200)
-  const { containerRef, rect } = useOverflowGroup()
-  const [ nbrRemainingItems, setNbrRemainingItems ] = useState(0)
- * return (
- *   <Stack mb={ 4 } spacing={ 4 } w="40%">
-          <Stack h="300px">
-            <Wrap
-              w={ width }
-              h={ height }
-              ref={ containerRef }
-              borderWidth="2px"
-              borderColor="gray.200"
-              borderStyle="solid"
-              p="2"
-              borderRadius="md"
-            >
-              <OverflowGroup
-                max={ max }
-                rect={ rect }
-                onChange={ setNbrRemainingItems }
-              >
-                { arrayWithLength(n).map((i) => (
-                  <Badge key={ i } h="max-content">
-                    Item { i }
-                  </Badge>
-                )) }
-              </OverflowGroup>
-              { nbrRemainingItems > 0 && (
-                <Tag w="fit-content">+{ nbrRemainingItems }</Tag>
-              ) }
-            </Wrap>
-          </Stack>
-          <Stack bgColor="gray.50" p="2" borderRadius="md">
-            <HStack>
-              <Label>Height</Label>
-              <CustomSlider onChange={ setHeight } />
-            </HStack>
-            <HStack>
-              <Label>Width</Label>
-              <CustomSlider onChange={ setWidth } />
-            </HStack>
-            <HStack>
-              <Label>Number of items </Label>
-              <NumberInput onChange={ (v) => setN(Number(v)) } value={ n } />
-            </HStack>
-            <HStack>
-              <Label>Render max </Label>
-              <NumberInput onChange={ (v) => setMax(Number(v)) } value={ max } />
-            </HStack>
-          </Stack>
-        </Stack>
- * )}
-render(<MyComponent/>)
- * ?)
-<br />
-The overflow group requires either a max prop for a set limit, or a rect prop,
- for a dynamic, responsive layouts. The rect prop can be received via the useOverflowGroup hook,
-  along with a containerRef that needs to be set on the wrapper around the overflow group.
-<br />
-<br />
-The overflow group is ambiguous in the styling of the children and does not pose any premade layout;
- instead the wrapper parent container determines the layout.
- One could for example use a <Stack /> <HStack /> or <Grid> and all would work.
-  The overflow group only checks if the children don't fit within the height/width
-   of it's container via the containerRef.
-
- *
- */
-declare const OverflowGroup: ({ children, max: initMax, childrenProps, onChange, rect, }: OverflowGroupProps) => JSX.Element;
-
-declare const useOverflowGroup: () => {
-    rect: HTMLDivElement | null;
-    containerRef: (node: any) => void;
-};
-
-declare const getContrastColor: (color: string) => "text.default" | "text.inverted";
-
-declare const luminosity: (hexcolor: string) => number;
-
-declare const ring: CSSObject;
-
-declare const highlight: CSSObject;
-
-declare const getShades: (startShade: number, endShade?: number) => string[];
-
-declare const getInitials: (name: string) => string;
-
-type UseFormReturn<T extends FieldValues> = UseFormReturn$1<T>;
-type Maybe<T> = T | undefined;
-type CustomSubmitHandler<TFieldValues extends FieldValues> = (data: TFieldValues, event: UseFormReturn<TFieldValues>) => any | Promise<any>;
-type SetValueOptionsType = Maybe<SetValueConfig>;
-interface FieldProps<FormValues extends FieldValues = FieldValues, FieldName extends FieldPath<FormValues> = FieldPath<FormValues>> extends Omit<StackProps, 'children'> {
-    name: FieldName;
-    /** Label displayed as text beside or under/over
-     * (depending on direction prop) over children. Recommended for accesibility */
-    label?: string;
-    /** The input and label will be rendered inside a stack,
-     *  this determines whether to put the label above/below/left/right of the input */
-    direction?: StackDirection;
-    isRequired?: boolean;
-    /** In rare cases the htmlFor attribute can mess up the markup,
-     *  if this prop is true then htmlFor on the label will be undefined */
-    noLabelConnection?: boolean;
-    /** Inline validation, in most cases validation should be handled in the form component itself,
-     *  but you can pass down simple validation like
-     * validate={{maxLength: {message: 'Max 40 characters', value: 40}}}
-     * for more information view https://react-hook-form.com/api/useform/register/ docs. (Whatever you put into the validate object will be put as the second options arguments on the react hook form register method)
-     * */
-    validate?: RegisterOptions;
-    /**
-    * The value is taken from the formContext by default,
-    * but may be manually specified to ensure field type inference.
-    * */
-    control?: Control<FormValues>;
-    children: (field: ControllerRenderProps<FormValues, FieldName>, methods: UseFormReturn<FormValues>) => JSX.Element;
-}
-interface FormProps<FormValues extends FieldValues> {
-    /** This should contain an object with the name of the fields and their default values. */
-    initialValues: FormValues;
-    /** This prop will reset the form if the initial values change */
-    enableReinitialize?: boolean;
-    onSubmit: CustomSubmitHandler<FormValues>;
-    /** You can define your own form methods outside of the form component using the useForm hook and passing down via methods prop:  https://react-hook-form.com/api/useform/ */
-    methods?: UseFormReturn<FormValues>;
-    /** Every option that can be passed to useForm hook kan be passed here,
-     *  for example formSettings={{mode: 'onChange'}}
-     * (will trigger validation function on every change in form state */
-    formSettings?: UseFormProps<FormValues>;
-    /** A functtion that takes in the current form values, and returns an object,
-     *  where the keys are the name of the fields and the values are object
-     * with a message key of what error occured.
-     * ex: validate ={(formValues) => {
-     * let errors = {}
-     * if(formValues.name === 'DROP TABLE;') {
-     * errors.name = {message: 'Nice try'}
-     * }
-     * return errors
-     * }}
-     * */
-    validate?: any;
-    /** This will recursively trim all values strings inside the form values,
-     *  no matter how nesteed they are */
-    shouldTrim?: boolean;
-    children: ((methods: UseFormReturn<FormValues>) => ReactNode) | ReactNode;
-    innerFormStyle?: any;
-}
-type FieldErrorType<T extends FieldValues> = FieldError | Merge<FieldError, FieldErrorsImpl<T>> | undefined;
-
-declare function getFieldError<T extends FieldValues>(name: string, errors: FieldErrorsImpl<T>): FieldErrorType<T>;
-
-declare const getChildrenWithProps: (children: React__default.ReactNode | React__default.ReactNode[], styles: Record<string, any>, predicate?: (child: React__default.ReactNode, index: number) => boolean) => (string | number | boolean | React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | React__default.ReactFragment | null | undefined)[];
-
-declare const addAlpha: (color: string, alpha?: number) => string;
-
-/** A debounce function to be used together with Async select in SearchBar.
- * The reason to why the usual debounce hook does not work is because we
- * don't control the loadOptions call ourselves.
- *
- * Important to note is that the timeout here needs to NOT be reinstantiated
- * every render, otherwise it defeats the purpose as a new timeout will be
- * created every time the component re-renders.
-*/
-declare const createDebounceFunctionInstance: (delay: number) => (fn: any) => (...args: any) => void;
-
-type CurrentTheme = 'webappTheme' | 'tottTheme';
-declare const CustomTheme: React$1.Context<CurrentTheme>;
-declare const useCurrentTheme: () => CurrentTheme;
-
-interface MediatoolThemeProviderProps {
-    children: ReactNode;
-    theme?: Record<string, any>;
-    themeName?: CurrentTheme;
-}
-
-/**
- * Should be at the root of you project, wraps the app in the theme context
- * @see {@link https://northlight.dev/reference/mediatool-theme-provider}
- *
- * @example
- * Should pass down a theme from northlight/ui, currently exports two themes:
- * * theme - light mode
- * * tottTheme - dark mode
- *
- *
- */
-declare const MediatoolThemeProvider: ({ children, theme, themeName, }: MediatoolThemeProviderProps) => JSX.Element;
-
-type NumberInputSizeProps = 'sm' | 'md' | 'lg';
-interface NumberInputProps extends NumberInputProps$1 {
-    size?: NumberInputSizeProps;
-    onChange?: (...event: any[]) => void;
-    onlyAcceptPercentage?: boolean;
-    onInputChange?: (input: string) => void;
-    /** If true it will show arrows on far right of number input that when clicked can
-     * increment and decrement the number value.
-     */
-    enableStepperArrows?: boolean;
-}
-type NumberInputFieldProps = Omit<NumberInputProps, 'onChange'> & InputFieldProps & {
-    name: string;
-    label: string;
-    validate?: RegisterOptions;
-    size?: NumberInputSizeProps;
-    isRequired?: boolean;
-    unit?: string;
-    direction?: StackDirection;
-    onChange?: (e: number | string) => void;
-    inputLeftElement?: React.ReactNode;
-    inputRightElement?: React.ReactNode;
-};
-interface NumberInputStepperProps {
-    includePercentage?: boolean;
-}
-
-/**
- * Basic accessible input that only allows numbers, with support for arrow keys,
- *  min max values and percentages
- *
- * @example
- * (?
- * <Box p="3">
- * <NumberInput max={100} min={0} step={3} onlyAcceptPercentage={true} enableStepperArrows={true}/>
- * </Box>
- * ?)
- *
- */
-declare const NumberInput: ({ variant, size, onChange, onInputChange, enableStepperArrows, name, onlyAcceptPercentage, ...rest }: NumberInputProps) => JSX.Element;
-
-/**
- * The number input component wrapped in a <Field />
- * meant to be used only inside <Form />
- * @see NumberInput
- * @see {@link https://northlight.dev/reference/number-input-field}
- *
- */
-declare const NumberInputField: ({ name, label, direction, isRequired, validate, onChange: onChangeCallback, onlyAcceptPercentage, inputLeftElement, inputRightElement, ...rest }: NumberInputFieldProps) => JSX.Element;
-
-declare const advancedParseFloat: (value: number | string) => string | number;
-
-interface NotificationIconButtonProps extends IconButtonProps$1 {
-    variant?: ButtonVariants;
-    blinkerColor?: string;
-    hasNotification?: boolean;
-}
-
-/**
- * A custom component that composes the IconButton and Blinker components.
- *  The notification blinker blinks on hover.
- * @see {@link https://northlight.dev/reference/notification-icon-button}
- *
- * @example
- * (?
- * <Box w="min-content">
-<NotificationIconButton
-  variant="brand"
-  aria-label="conversations"
-  icon={ <Icon as={ ConversationDuo } /> }
-  hasNotification={ true }
-  size="lg"
-/>
-</Box>
- * ?)
- */
-declare const NotificationIconButton: (props: NotificationIconButtonProps & React__default.RefAttributes<unknown>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
-
-type PinVariant = 'green' | 'yellow' | 'gray' | 'red';
-type PinSize = 'sm' | 'md' | 'lg';
-type PinSizeTuple = [number, number];
-interface PinInputProps extends PinInputProps$1 {
-    size?: PinSize;
-    hidden?: boolean;
-}
-
-/**
- * For entering numbers in ex two factor authentication
- * @see {@link https://northlight.dev/reference/pin-input}
- * @example
- * (?
-  <HStack p="1">
-    <PinInput>
-      <PinInputField />
-      <PinInputField />
-      <PinInputField />
-      <PinInputField />
-    </PinInput>
-  </HStack>
- * ?)
- *
- *
- */
-declare const PinInput: ({ variant, hidden, children, ...rest }: PinInputProps) => JSX.Element;
-
-interface ProgressBarProps extends StackProps {
-    loaded: number;
-    /** Whether to remove the progress bar from the DOM tree once finnished loading */
-    hideDisplay?: boolean;
-    onLoadEnd?: () => void;
-}
-
-/**
- * @see {@link https:/northlight/reference/progress-bar}
- *
- * @example
- * (?
- * () => {
-  const [ progress, setProgress ] = useState(0)
-  if (progress > 1 && buffer) {
-    clearInterval(buffer)
-    buffer = null
-  }
-
-  const handleClick = () => {
-    setProgress(0)
-    buffer = setInterval(
-      () => setProgress((prev) => prev + Math.random() * 0.1),
-      Math.random() * 300 + 200
-    )
-  }
-  return (
-    <Stack>
-    <ProgressBar loaded={ progress } hideDisplay={true}/>
-    <Button onClick={ handleClick }>Start Loading</Button>
-    </Stack>
-  )
- * }
- * ?)
- *
- */
-declare const ProgressBar: ({ loaded, onLoadEnd, hideDisplay, ...rest }: ProgressBarProps) => JSX.Element;
-
-type RadioProps = RadioProps$1 & {
-    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
-    value?: string;
-};
-type RadioFieldProps = RadioProps$1 & {
-    value: string;
-};
-type RadioGroupProps = RadioGroupProps$1 & {
-    direction?: StackDirection;
-};
-type RadioFieldGroupProps = RadioGroupProps$1 & {
-    direction?: StackDirection;
-    name: string;
-    label: string;
-    validate?: RegisterOptions;
-    isRequired?: boolean;
-    value?: string;
-};
-
-/**
- * @see RadioGroup
- * @see {@link https://northlight.dev/reference/radio}
- */
-declare const Radio: ({ size, onChange, name, value, ...rest }: RadioProps) => JSX.Element;
-
-/**
- * Wrapper to select one of multiple options
- * @see {@link https://northlight.dev/reference/radio-group}
- * @example
- * (?
-      <RadioGroup>
-        <HStack>
-          <Radio value="1" />
-          <Radio value="2" />
-          <Radio value="3" />
-        </HStack>
-      </RadioGroup>
- * ?)
- *
- */
-declare const RadioGroup: ({ direction, children, name, ...rest }: RadioGroupProps) => JSX.Element;
-
-/**
- * The radio group component wrapped in a <Field />
- * meant to be used only inside <Form />
- * @see RadioGroup
- * @see Radio
- * @see {@link https://northlight.dev/reference/radio-group-field}
- *
- */
-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;
-
-/**
- * Loading indicator
- * @see {@link https://northlight.dev/reference/spinner }
- * @example
- * (? <Spinner /> ?)
- */
-declare const Spinner: ({ ...rest }: SpinnerProps) => JSX.Element;
-
-type SwitchProps = SwitchProps$1 & {
-    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
-    value?: boolean;
-};
-type SwitchFieldProps = SwitchProps$1 & {
-    name: string;
-    label: string;
-    validate?: RegisterOptions;
-    isRequired?: boolean;
-    direction?: StackDirection;
-    labelPosition?: 'left' | 'right';
-};
-
-/**
- * @see SwitchField
- * @see {@link https://northlight.dev/reference/switch}
- *
- * @example (Example)
- * Mainly used for forms, however this component is controlled by
- *  a value prop and an onChange callback
- *
- * (?
- * () => {
- * const [ advancedMode, setAdvancedMode ] = useState(false)
- *
- * return (
- * <Stack p="2">
-  * <Label size="sm" htmlFor="advanced-mode-switch">Advanced mode</Label>
-  * <Switch name="vegan-checkbox" onChange={() => setAdvancedMode((prev) => !prev)}
-  *  value={advancedMode} />
- * </Stack>
- * )
- * }
- * ?)
- */
-declare const Switch: ({ value, onChange, name, size, ...rest }: SwitchProps) => JSX.Element;
-
-/**
- * The switch component wrapped in a <Field />
- * meant to be used only inside <Form />
- * @see switch
- * @see {@link https://northlight.dev/reference/switch-field}
-* @example (Example)
- * ## Basic
- * (?
- * <Form initialValues={{name: ''}}>
- *  <SwitchField
- *   name="terms"
- *   label="I agree to the Terms & Conditions"
- *   labelPosition="left"
- *  />
- * </Form>
- * ?)
- *
- */
-declare const SwitchField: ({ name, label, isRequired, validate, onChange: onChangeCallback, direction, labelPosition, ...rest }: SwitchFieldProps) => JSX.Element;
-
-interface TableProps extends Omit<TableProps$1, 'variant'> {
-    variant?: TableProps$1['variant'] | 'rounded';
-}
-
-/**
- * @see {@link https://northlight.dev/reference/table}
- *
- * @example
- * (?
-      <Table variant="rounded">
-    <Thead>
-        <Tr>
-            <Th fontWeight="bold"> Number</Th>
-            <Th fontWeight="bold"> Title</Th>
-        </Tr>
-    </Thead>
-        <Tbody>
-          { [1, 2, 3, 4, 5].map((num) => (
-            <Tr key={ num }>
-              <Td>{ num }</Td>
-              <Td>
-                This is great Typography man
-              </Td>
-            </Tr>
-          )) }
-        </Tbody>
-      </Table>
- * ?)
- *
- */
-declare const Table: (props: TableProps) => JSX.Element;
-
-interface TabsProps extends TabsProps$1 {
-}
-interface TabPanelProps extends TabPanelProps$1 {
-}
-
-/**
- * Used to display content under tabs context
- * @see Tabs
- * @see {@link https://northlight.dev/reference/tab-panel}
- * @example
- * (? <TabPanel>Tab 1</TabPanel>  ?)
- */
-declare const TabPanel: (props: TabPanelProps) => JSX.Element;
-
-/**
- * Context provider for tabs tabs
- * @see TabList
- * @see TabPanels
- * @see {@link https://northlight.dev/reference/tabs}
- * @example
- * (?
-    <Tabs>
-    <Stack spacing="2">
-      <TabList>
-        <Tab>One</Tab>
-        <Tab>Two</Tab>
-        <Tab>Three</Tab>
-      </TabList>
-      <TabPanels>
-        <TabPanel>
-          <P>one!</P>
-        </TabPanel>
-        <TabPanel>
-          <P>two!</P>
-        </TabPanel>
-        <TabPanel>
-          <P>three!</P>
-        </TabPanel>
-      </TabPanels>
-      </Stack>
-    </Tabs>
- * ?)
- *
- */
-declare const Tabs: ({ children, variant, isManual, ...rest }: TabsProps) => JSX.Element;
-
-interface TagProps extends TagProps$1 {
-    bgColor?: string;
-    variant?: 'solid' | 'subtle';
-}
-interface OverflowIndicatorProps {
-    nbrRemainingTags: number;
-}
-interface TagGroupProps extends StackProps {
-    max?: number;
-    spacing?: number | string;
-    children: JSX.Element[] | React.ReactNode[];
-    OverflowIndicator?: (props: OverflowIndicatorProps) => JSX.Element;
-}
-
-/**
- * @see TagGroup
- * @see {@link https://northlight.dev/reference/tag}
- *
- * @example
- * (? <Tag>Brand 1</Tag> ?)
- *
- * @example
- * (?
- *   <Tag>
-    <TagLeftIcon>
-      <Icon as={ StackSolid } />
-    </TagLeftIcon>
-    <TagLabel>Left Icon</TagLabel>
-  </Tag>
- * ?)
- *
-*/
-declare const Tag: (props: TagProps & React__default.RefAttributes<unknown>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
-
-/**
- * Used when rending multiple tags in limited container for responsive layout
- * @see Tag
- * @see {@link https://northlight.dev/reference/tag-group}
- *
- * @example
- * ##Try resizing the window!
- * (?
-  <TagGroup w="full"
-  borderWidth="st.border.width.sm"
-  borderColor="border.default"
-  borderStyle="solid"
-  p="2"
-  borderRadius="md"
-  >
-    { Array.from({length: 20}, (_, i) => i).map((i) => (
-      <Tag w="max-content" key={ i }>Brand-{ i }</Tag>
-    )) }
-  </TagGroup>
- * ?)
- *
- *
- */
-declare const TagGroup: ({ children, max, spacing, OverflowIndicator, ...rest }: TagGroupProps) => JSX.Element;
-
-type TextSizeProps = 'sm' | 'md';
-interface TextareaProps extends TextareaProps$1 {
-    onChange?: (...event: any[]) => void | ((e: ChangeEvent<HTMLInputElement>) => void);
-    value?: string;
-    size?: TextSizeProps;
-}
-type TextareaFieldProps = TextareaProps$1 & {
-    name: string;
-    label: string;
-    validate?: RegisterOptions;
-    isRequired?: boolean;
-    size?: TextSizeProps;
-    direction?: StackDirection;
-};
-
-/**
- * Text input for larger raw text
- * @see Input
- * @see {@link https://northlight.dev/reference/textarea}
- *
- * @example
- * (? <Textarea /> ?)
- */
-declare const Textarea: ({ size, onChange, name, value, ...rest }: TextareaProps) => JSX.Element;
-
-declare const TextareaField: ({ name, label, isRequired, validate, direction, onChange: onChangeCallback, ...rest }: TextareaFieldProps) => JSX.Element;
-
-interface TextInputFormatter {
-    format: (value: string) => string;
-    unFormat: (value: string) => string;
-}
-interface TextFieldProps extends Omit<InputProps, 'onChange'>, InputFieldProps {
-    name: string;
-    label: string;
-    mask?: string;
-    formatter?: TextInputFormatter;
-    validate?: RegisterOptions;
-    direction?: StackDirection;
-    onChange?: (e: React.ChangeEvent<HTMLInputElement> | string) => void;
-}
-type MaskedTextInputProps = InputProps & Props$1 & {
-    maskPlaceholder?: 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: ({ 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;
-
-/**
- * The Input component wrapped in <Field />
- * Also supported formmated and musked input via as prop
- * @see Input
- * @see MaskedTextInput
- * @see FormattedNumberInput
- * @see {@link https://northlight.dev/reference/text-field}
- *
- *
- */
-declare const TextField: ({ name, label, as: As, isRequired, validate, direction, onChange: onChangeCallback, inputLeftElement, inputRightElement, ...rest }: TextFieldProps) => JSX.Element;
-
-interface ToastProps extends AlertProps {
-    title?: string;
-    variant?: AlertVariants;
-    description?: string;
-    onClose?: () => void;
-}
-interface UseToastOptions extends UseToastOptions$1 {
-    variant?: AlertVariants;
-    title?: string;
-    description?: string;
-}
-
-/**
- * Toast is a modified alert meant for popup alerts
- * @see useToast
- * @see Alert
- * @see {@link https://northlight.dev/reference/toast}
- * @example
- * (?
- *
-        <HStack spacing={ 4 }>
-          <Toast variant="success" title="success" />
-          <Toast variant="warning" title="warning" />
-          <Toast variant="info" title="info" />
-          <Toast variant="error" title="error" />
-        </HStack>
- * ?)
- *
- */
-declare const Toast: ({ variant, title, description, onClose, ...rest }: ToastProps) => JSX.Element;
-
-/**
- * This hook returns a toast function that when called will popup a toast
- * @see Toast
- * @see {@link https://northlight.dev/reference/use-toast}
- * @example
- * (?
- * () => {
- * const toast = useToast()
- * const handleClick = () => {
- * toast({title: 'Success', description: 'Your file changes have been saved' })
- * }
- * return (
- * <Button onClick={handleClick} variant="success">Save</Button>
- * )}
- * ?)
- */
-declare const useToast: (defaultOpts?: UseToastOptions) => (opts?: UseToastOptions) => _chakra_ui_toast_dist_toast_types_24f022fd.a;
-
-type DurationType = number | null;
-type OffsetType = number | string;
-type ChildrenType = React.ReactNode | React.ReactNode[];
-type TransitionDirection = 'right' | 'bottom' | 'left' | 'top' | null;
-/** For fade component */
-interface FadeProps extends FadeProps$1 {
-    /** Sets both enterDuration and exitDuration at same time to same value */
-    duration?: DurationType;
-    enterDuration?: DurationType;
-    exitDuration?: DurationType;
-    /** Makes the element not focusable when not visible */
-    disableFocus?: boolean;
-    /** Will remove the component from DOM tree if in is false */
-    hideDisplay?: boolean;
-    enterDelay?: number;
-    exitDelay?: number;
-    onTransitionComplete?: (isHidden: boolean) => void;
-}
-interface ScaleFadeProps extends FadeProps, Omit<ScaleFadeProps$1, 'delay'> {
-}
-interface SlideProps extends FadeProps, Omit<SlideProps$1, 'delay'> {
-}
-interface SlideFadeProps extends FadeProps, Omit<SlideFadeProps$1, 'delay'> {
-    direction?: TransitionDirection;
-    offset?: number;
-}
-interface CollapseProps extends FadeProps, Omit<CollapseProps$1, 'delay'> {
-}
-
-/**
- * Simple transition to hide/show content
- * @see ScaleFade
- * @see SlideFade
- * @see {@link https://northlight.dev/reference/fade}
- *
- * @example (Example)
- * ##View other options
- * (?
- *
-() => {
-  const [ show, setShow ] = useState(false)
-  const toggle = () => {
-    setShow((prev) => !prev)
-
-  }
-  return (
-    <>
-       <Button onClick={toggle}>Render random number</Button>
-  <Box borderRadius="st.border.radius.sm"
-  borderWidth="st.border.width.sm" borderColor="border.default">
-            <Fade in={ show} exitDuration={1}>
-  <HStack p="10" bg="bg.filled" rounded="md" >
-  <H3>
-  {Math.round(Math.random() * 100)}
-  </H3>
-  </HStack>
-            </Fade>
-  </Box>
-    </>
-
-  )
-
-}
-
- * ?)
- *
- */
-declare const Fade: ({ children, enterDuration, exitDuration, duration, in: show, disableFocus, hideDisplay, enterDelay, exitDelay, onTransitionComplete, ...rest }: FadeProps) => JSX.Element;
-
-/**
- * Simple transition to hide/show content
- * @see Fade
- * @see SlideFade
- * @see {@link https://northlight.dev/reference/slide-fade}
- *
- * @example (Example)
- * ##View other options
- * (?
- *
-() => {
-  const [ show, setShow ] = useState(false)
-  const toggle = () => {
-    setShow((prev) => !prev)
-
-  }
-  return (
-    <>
-       <Button onClick={toggle}>Render random number</Button>
-  <Box borderRadius="st.border.radius.sm"
-  borderWidth="st.border.width.sm" borderColor="border.default">
-            <SlideFade in={ show} exitDuration={1}>
-  <HStack p="10" bg="bg.filled" rounded="md" >
-  <H3>
-  {Math.round(Math.random() * 100)}
-  </H3>
-  </HStack>
-            </SlideFade>
-  </Box>
-    </>
-  )
-}
- * ?)
- *
- */
-declare const ScaleFade: ({ children, enterDuration, exitDuration, duration, in: show, disableFocus, hideDisplay, enterDelay, exitDelay, onTransitionComplete, ...rest }: ScaleFadeProps) => JSX.Element;
-
-declare const Slide: ({ children, enterDuration, exitDuration, duration, in: show, disableFocus, hideDisplay, enterDelay, exitDelay, direction, onTransitionComplete, ...rest }: SlideProps) => JSX.Element;
-
-declare const SlideFade: ({ children, enterDuration, exitDuration, duration, in: show, disableFocus, hideDisplay, direction, offset: delta, offsetX: deltaX, offsetY: deltaY, enterDelay, exitDelay, onTransitionComplete, ...rest }: SlideFadeProps) => JSX.Element;
-
-/**
- * Simple transition to hide/show content
- * @see Fade
- * @see ScaleFade
- * @see SlideFade
- * @see {@link https://northlight.dev/reference/collapse}
- *
- * @example (Example)
- * ##View other options
- * (?
- *
-() => {
-  const [ show, setShow ] = useState(false)
-  const toggle = () => {
-    setShow((prev) => !prev)
-
-  }
-  return (
-    <>
-       <Button onClick={toggle}>Click Me</Button>
-  <Box borderRadius="st.border.radius.sm"
-  borderWidth="st.border.width.sm" borderColor="border.default">
-            <Collapse in={ show}>
-  <HStack p="10" bg="bg.filled" rounded="md" >
-  <P>
-  Enable advanced mode
-  </P>
-
-  <Switch />
-  </HStack>
-            </Collapse>
-  </Box>
-    </>
-
-  )
-
-}
-
- * ?)
-
- *
- */
-declare const Collapse: ({ children, enterDuration, exitDuration, duration, in: show, disableFocus, hideDisplay, enterDelay, exitDelay, onTransitionComplete, ...rest }: CollapseProps) => JSX.Element;
-
-interface StatusPinProps {
-    size?: PinSize;
-    variant: PinVariant;
-}
-
-/**
- * @see StatusBlock
- * @see {@link https://northlight/reference/status-pin}
- *
- * @example
- * (? <StatusPin variant="green" /> ?)
- *
- */
-declare const StatusPin: ({ size, variant }: StatusPinProps) => JSX.Element;
-
-type BlockVariant = 'working' | 'pending' | 'approved' | 'rejected';
-interface StatusBlockProps {
-    variant: BlockVariant;
-}
-type BlockVariantColorTuple = [`${Color}.${ColorGrade}`, `${Color}.${ColorGrade}`];
-declare const statusIconMap: Record<BlockVariant, any>;
-
-/**
- * Used as status indicator
- * @see {@link https://northlight.dev/reference/status-block}
- * @example
- * (? <StatusBlock variant="approved" /> ?)
- */
-declare const StatusBlock: ({ variant }: StatusBlockProps) => JSX.Element;
-
-interface AsyncErrorProps extends AlertProps {
-    message?: string;
-}
-
-/**
- * @see {@link https://northlight.dev/reference/async-error}
- * @example
- * (?
- * <AsyncError />
- * ?)
- *
- */
-declare const AsyncError: ({ message, ...rest }: AsyncErrorProps) => JSX.Element;
-
-/**
- * @see {@link https://northlight.dev/reference/modal}
- *
- * */
-declare const ModalBase: ({ isCentered, children, ...rest }: ModalProps) => JSX.Element;
-declare const Modal: ({ stayMountedOnClose, isOpen, ...rest }: ModalProps) => JSX.Element;
-
-/**
- * The context provider for handling state of components wrapped in field
- * @see Field
- * @see {@link https://northlight.dev/reference/form}
- *
- * @example (Example)
- * ## Basic
- * (?
- * <Form initialValues={{name: ''}} onSubmit={console.log}>
- * <TextField name="name" label="What is your name" />
- * </Form>
- * ?)
- *
- * @example (Example)
- * ## With form methods
- * The form context provider passes down a lot of methods for handling state
- * (?
- * <Form initialValues={{name: ''}}>
- * {({watch, reset }) => (
- * <Stack>
- * <TextField name="name" label="What is your name?"/>
- * <Button variant="danger" onClick={() => reset({})}>Reset</Button>
- * <Code>{JSON.stringify(watch(), null, 2)}</Code>
- * </Stack>
- * )}
- *
- * </Form>
- * ?)
- * You can view more form methods on the **<a href="https://react-hook-form.com/api/useform/" target="_blank">react hook form docs</a>**
- *  (everything that the useForm hooks returns)
- *
- * @example (Example)
- * ## Moving the form state outside of Form
- * (?
- * +
-
-//This code could live in the backend
-const submitValuesToBackend = (values) => {
-  console.log({values})
-  if(values.firstName !== 'Steve') {
-    throw Error('We only allow people named Steve \;\)')
-  }
-}
-const MyForm = () => (
-<Form
-  initialValues={ { firstName: '' } }
-  onSubmit={ async (values, methods) => {
-      try {
-        await submitValuesToBackend(values)
-      }
-      catch (err) {
-        methods.setError('firstName', { message: err.message })
-      }
-  } }
->
-  <HStack alignItems="end" p="3">
-    <TextField
-      name="firstName"
-      label="First Name"
-      isRequired={ true }
-    />
-    <Button type="submit" variant="success">Validate</Button>
-  </HStack>
-</Form>
-
-  )
-
-render(<MyForm />)
-
- * ?)
-
-@example (Example)
-## Using a ref
-You can move up the form state using a ref as well
-(?
-() => {
-  const methods = useRef(null)
-
-  return (
-    <Stack>
-    <Form
-    ref={methods}
-    initialValues={{name: ''}}
-    >
-    <TextField name="name" label="What is your name?" />
-    </Form>
-  <Button onClick={() => methods.current.reset({name: (Math.round(Math.random() * 100))})}>
-  Get random number
-  </Button>
-    </Stack>
-
-  )
-
-}
-?)
-
- */
-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
- * @see TextField
- * @see Form
- * @see {@link https://northlight.dev/reference/field}
- *
- * @example (Example)
- * ## Input example
- * (?
- * <Form initialValues={{name: ''}}>
- * <Box p="2">
- * <Field name="name" label="Input name">
- * {({value, onChange}) => (
- * <Input value={value} onChange={onChange} />
- * )}
- * </Field>
- * </Box>
- *
- * </Form>
- * ?)
- * <br />
- * As you can see the field component acts as a middleman to connect
- * any component to the form context, via a controlled value and onChange prop.
- *  Most of the common use cases for field,
- *  such as text input have been abstracted into their own components, for example _TextField_
- *
- * @example (Example)
- * ## Example with validation and form submition
- * (?
- * () => {
- * const toast = useToast()
- * const handleSubmit =(v) => {
- *  toast({title: 'Sent Message', description: `"${v.message}"`})
- * }
- * return (
- * <Form initialValues={{message: ''}} onSubmit={handleSubmit}>
- * <Stack p="2">
- * <Field
- * name="message"
- * label="Write email"
- * isRequired={true}
- * validate={{maxLength: {message: 'Message must be under 30 characters', value: 30}}}
- * >
- * {({value, onChange}) => (
- * <Textarea value={value} onChange={onChange} />
- * )}
- * </Field>
- * <Button type="submit" variant="brand">Send Message</Button>
- * </Stack>
- *
- * </Form>
- * )
- * }
- * ?)
- *
- * @example (Example)
- * ## Type-safety
- * There are multiple ways to provide types for
- * the field callback values. To ensure that each
- * component within the field receives the correct
- * value, it's essential to make the field aware
- * of the form state values. When the Field component
- * does not receive any types, the "value" callback
- * argument will have the type of "any".
- * <br /><br />
- * ### Passing down the control prop (Recommended)
- * (?
- * <Form initialValues={{username: 'Alex'}}>
- * {
- * ({ control }) => {
- * <Box p="2">
- * <Field name="username" label="Input name" control={ control }>
- * {({value, onChange}) => ( // "value" has type of "string"
- * <Input value={value} onChange={onChange} />
- * )}
- * </Field>
- * </Box>
- * }
- * }
- * </Form>
- * ?)
- * <br /><br />
- * ### Specifying generic arguments
- * You can also specify generic arguments on the Field
- * component to ensure that "value" has a valid type.
- * The passed generic type combined with the valid
- * "name" property ensures that "value" has the expected
- * type received from the generic type:
- * `<Field<MyFormBody> name="username">...</Field>`
- */
-declare function Field<FormValues extends FieldValues = FieldValues, FieldName extends FieldPath<FormValues> = FieldPath<FormValues>>({ name, label, children, direction, isRequired, noLabelConnection, validate, control: passedControl, ...rest }: FieldProps<FormValues, FieldName>): JSX.Element;
-
-declare const useSetValueRefreshed: () => (name: any, value: any, options: SetValueOptionsType) => void;
-
-declare const trimFormValues: <T extends FieldValues>(obj: FieldValues) => T;
-
-type StepListProps = TabListProps;
-interface StepPanelProps extends TabPanelProps$1 {
-}
-type StepsProps = TabsProps$1;
-interface StepProps extends TabProps {
-    label: string;
-    description?: string;
-}
-
-/**
- * Used to display content under specific step
- * @see Steps
- * @see StepPanels
- * @see {@link https://northlight.dev/reference/step-panel}
- * @example
- * (? <StepPanel>Step 1</StepPanel>  ?)
- */
-declare const StepPanel: (props: StepPanelProps) => JSX.Element;
-
-/**
- * Context provider for steps tabs
- * @see StepList
- * @see StepPanels
- * @see {@link https://northlight.dev/reference/steps}
- * @example
- * (?
-  <Steps>
-    <StepList>
-      <Step label="Step 1" description="Name and email" />
-      <Step label="Step 2" description="Pick a password" />
-      <Step label="Step 3" description="Review" />
-    </StepList>
-    <StepPanels>
-      <StepPanel>1</StepPanel>
-      <StepPanel>2</StepPanel>
-      <StepPanel>3</StepPanel>
-    </StepPanels>
-  </Steps>
- * ?)
- *
- *
- */
-declare const Steps: (props: StepsProps) => JSX.Element;
-
-/**
- * Renders a step in a step list
- * @see StepList
- * @see Steps
- * @see {@link https://northlight.dev/reference/step}
- * @example
- * (? <Step label="Step 1" description="Personal information" /> ?)
- *
- */
-declare const Step: ({ label, description, ...rest }: StepProps) => JSX.Element;
-
-/**
- * Used to render a navigational list of steps
- * @see Step
- * @see Steps
- * @see {@link https://northlight.dev/reference/step-list}
- * @example
- * (?
-        <StepList>
-          <Step label="Step 1" description="Name and email" />
-          <Step label="Step 2" description="Pick a password" />
-          <Step label="Step 3" description="Review" />
-        </StepList>
- * ?)
- *
- */
-declare const StepList: ({ children, ...rest }: StepListProps) => JSX.Element;
-
-interface ClipboardInputProps extends InputProps {
-    value: string;
-    size?: 'sm' | 'md' | 'lg';
-}
-
-/**
- * Meant to display non editable copiable text
- * @see {@link https://northlight.dev/reference/clipboard-input}
- *
- * @example (Example)
- * ## Your token
- * (?
- * <ClipboardInput value="8aa6d075-eae2-49b3-8f65-318ece801b3b" aria-label="Copy token" />
- * ?)
- *
- */
-declare const ClipboardInput: ({ size, value, "aria-label": ariaLabel, ...rest }: ClipboardInputProps) => JSX.Element;
-
-interface ClickableProps extends UseClickableProps {
-    href?: string;
-    linkProps?: LinkProps;
-}
-
-/**
- * Wrapper component to make children interactive
- * by taking care of focus/accessibility, will render
- * either a link or button depending on if passing
- * an href
- * @see {@link https://northlight.dev/reference/clickable}
- * @example (Example)
- * ### Click to send notification
- * (?
- * () => {
- * const [ count, setCount ] = useState(0)
- * return (
- *             <Clickable onClick={ () => setCount((prev) => prev + 1) }>
-              <Avatar name="anakin skywalker" variant="rounded" notificationCount={count}/>
-            </Clickable>
- * )
- * }
- * ?)
- * @example (Example)
- * ### Rendering a link if passing href
- * (?
-          <Clickable href="/reference/select">
-            <Center boxSize="3xs" bgColor="gray.50">
-              Link
-            </Center>
-          </Clickable>
- * ?)
- *
- */
-declare const Clickable: ({ href, linkProps, ...rest }: ClickableProps) => JSX.Element;
-
-interface SplitPaneProps extends GridProps {
-    isOpen: boolean;
-    children: ReactElement[];
-    initialSplit?: number;
-    minLeftWidth?: number;
-    minRightWidth?: number;
-}
-
-/**
- * Used for split screen layouts
- * @see PaneItem
- * @see PaneDivider
- * @see {@link https://northlight.dev/reference/split-pane}
- *
- */
-declare const SplitPane: ({ children, initialSplit, isOpen, minLeftWidth, minRightWidth, }: SplitPaneProps) => JSX.Element;
-
-/**
- *  Wrapper around child of split pane
- * @see SplitPane
- * @see {@link https://northlight.dev/reference/PaneItem}
- *
- */
-declare const PaneItem: ({ children, ...rest }: GridItemProps) => JSX.Element;
-
-/**
- * Simple vertical line for split screen
- * @see SplitPane
- * @see PaneItem
- * @see {@link https://northlight.dev/reference/pane-divider}
- * @example
- * (?
- * <Box h="xs">
- * <PaneDivider />
- * </Box>
- * ?)
- * */
-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 {
-    value?: string;
-    size?: EditableSizes;
-    leftItem?: ReactElement;
-}
-interface EditableControlsProps {
-    size: EditableSizes;
-}
-
-/**
- * Used to safely modify text with default or previousely set value
- * @see {@link https://northlight.dev/reference/editable-text}
- *
- * @example (Example)
- * ##Edit password
- * (?
- * () => {
- * const [v, setV] = useState('123456789')
- * return (
- * <Box p="2">
- * <EditableText value={v} onSubmit={setV} leftItem={<Icon as={LockDuo} />}/>
- * </Box>
- * )
- * }
- * ?)
- *
- * @example (Example)
- * ## Other notes
-        <p>
-          Pressing <b>ESC</b> or clicking on the
-          <b> red icon</b> will delete the changes and go back to the original state
-        </p>
-        <p>
-          Pressing <b>ENTER</b> or clicking on the
-          <b> green icon</b> will save the changes internally and fire the{ ' ' }
-          <Code>onSubmit</Code> callback.
-        </p>
- *
- */
-declare const EditableText: ({ size, value: inputValue, onSubmit, leftItem, ...rest }: EditableProps) => JSX.Element;
-
-interface StepStackProps extends StackProps {
-    children: ReactNode | ReactNode[];
-    rowHeight?: string;
-    /** The vertical alignment of the circles.
-     * Accepts any values that can be used with the alignItems CSS property.
-     * Defaults to "center".
-    */
-    stepCircleAlignment?: string;
-}
-
-/**
-  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 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">
-      { 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>
-      )) }
-    </StepStack>
-  ?)
-*/
-declare const StepStack: ({ children, spacing, rowHeight, stepCircleAlignment, ...rest }: StepStackProps) => JSX.Element;
-
-declare const useDebounce: <T>(value: T, delay: number) => T;
-
-declare const useLoadingMessage: (prefix?: string, delay?: number) => string;
-
-interface Message {
-    content: string;
-    role: string;
-    type?: string;
-    data?: string;
-}
-declare const useScrollToBottom: (scrollView: RefObject<HTMLDivElement>, messages: Message[]) => void;
-
-declare const useArrowFocus: (columns: number) => {
-    defaultArrows: (e: any) => void;
-    focusPrevious: ({ repeat, wrap, }?: {
-        wrap: boolean;
-        repeat: number;
-    }) => void;
-    focusNext: ({ repeat, wrap, }?: {
-        wrap: boolean;
-        repeat: number;
-    }) => void;
-    focusFirst: (opts?: _react_aria_focus.FocusManagerOptions | undefined) => _react_types_shared.FocusableElement;
-    focusLast: (opts?: _react_aria_focus.FocusManagerOptions | undefined) => _react_types_shared.FocusableElement;
-};
-
-interface UseSelectCallbacksProps<T, K extends boolean = false> extends Omit<Props<T, boolean, GroupBase<T>>, 'onChange' | 'value'> {
-    onChange: (option: K extends true ? MultiValue<T> : SingleValue<T>, event: ActionMeta<T>) => void;
-    onAdd: (val: unknown) => void;
-    onRemove: (val: unknown) => void;
-    isMulti?: boolean;
-    value: T | T[];
-}
-interface BasicOption {
-    label: string;
-    value: unknown;
-}
-type SelectActionMeta<T> = ActionMeta<T>;
-
-declare const useSelectCallbacks: <T extends BasicOption, K extends boolean = false>({ onChange, onAdd, onRemove, isMulti, value, }: UseSelectCallbacksProps<T, K>) => (val: K extends true ? MultiValue<T> : SingleValue<T>, event: ActionMeta<T>) => void;
-
-declare const useOutsideRectClick: (ref: MutableRefObject<HTMLElement | null>, callback: (event: MouseEvent | TouchEvent) => void) => void;
-
-declare const useScreenSize: () => "sm" | "md" | "lg";
-
-declare const useDidUpdateEffect: (effect: EffectCallback, dependencies: DependencyList) => void;
-
-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 };