@northlight/ui 2.22.1 → 2.23.0

package/dist/es/northlight.d.ts

@@ -1,4 +1,4 @@
-import { AccordionProps, AccordionButtonProps, AccordionPanelProps, AccordionItemProps, StackDirection, AvatarProps as AvatarProps$1, AlertProps as AlertProps$1, AspectRatioProps, StackProps, BadgeProps, ButtonProps as ButtonProps$1, CheckboxProps as CheckboxProps$1, IconButtonProps as IconButtonProps$1, PopoverProps, BoxProps, InputProps, FlexProps, TagProps as TagProps$1, IconProps as IconProps$1, SystemStyleObject, HeadingProps as HeadingProps$1, TextProps, FormLabelProps as FormLabelProps$1, Heading, Text, ModalProps as ModalProps$1, ResponsiveValue, MenuProps as MenuProps$1, NumberInputProps as NumberInputProps$1, PinInputProps as PinInputProps$1, ProgressProps, 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, TooltipProps, FadeProps as FadeProps$1, ScaleFadeProps as ScaleFadeProps$1, SlideProps as SlideProps$1, SlideFadeProps as SlideFadeProps$1, CollapseProps as CollapseProps$1, ModalBodyProps, TabListProps, TabProps, LinkProps, GridProps, GridItemProps, EditableProps as EditableProps$1 } from '@chakra-ui/react';
+import { AccordionProps, AccordionButtonProps, AccordionPanelProps, AccordionItemProps, StackDirection, AvatarProps as AvatarProps$1, AlertProps as AlertProps$1, AspectRatioProps, StackProps, BadgeProps, ButtonProps as ButtonProps$1, CheckboxProps as CheckboxProps$1, IconButtonProps as IconButtonProps$1, PopoverProps, BoxProps, InputProps, CenterProps, FlexProps, TagProps as TagProps$1, IconProps as IconProps$1, SystemStyleObject, HeadingProps as HeadingProps$1, TextProps, FormLabelProps as FormLabelProps$1, Heading, Text, ModalProps as ModalProps$1, ResponsiveValue, MenuProps as MenuProps$1, NumberInputProps as NumberInputProps$1, PinInputProps as PinInputProps$1, ProgressProps, 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, TooltipProps, FadeProps as FadeProps$1, ScaleFadeProps as ScaleFadeProps$1, SlideProps as SlideProps$1, SlideFadeProps as SlideFadeProps$1, CollapseProps as CollapseProps$1, ModalBodyProps, 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, MenuButton, MenuCommand, MenuDivider, MenuGroup, MenuIcon, MenuItem, MenuItemOption, MenuList, MenuOptionGroup, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, NumberDecrementStepper, NumberIncrementStepper, OrderedList, PinInputField, 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, Tr, UnorderedList, VStack, VisuallyHidden, VisuallyHiddenInput, Wrap, WrapItem, keyframes, useBoolean, useBreakpoint, useBreakpointValue, useClipboard, useControllableProp, useControllableState, useDisclosure, useEditable, useEditableControls, useEditableState, useInterval, useMediaQuery, useMergeRefs, useNumberInput, useOutsideClick, usePrefersReducedMotion, useRadio, useRadioGroup, useTab, useTabs, useTheme, useToken } from '@chakra-ui/react';
 import { Props, GroupBase, MultiValue, SingleValue, ActionMeta, MenuListProps, SelectInstance, ChakraStylesConfig } from 'chakra-react-select';
 export { AsyncCreatableSelect, AsyncSelect, Select as ChakraReactSelect, CreatableSelect, MultiValue, SingleValue } from 'chakra-react-select';
@@ -32,6 +32,8 @@ import { Props as Props$1 } from 'react-input-mask';
 import { NumericFormatProps } from 'react-number-format';
 import { Schema } from 'joi';
 import { UseClickableProps } from '@chakra-ui/clickable';
+import { Option as Option$1 } from '@northlight/ui';
+import { Variant } from 'chakra-react-select/dist/types/types';
 import * as _react_types_shared from '@react-types/shared';
 import * as _react_aria_focus from '@react-aria/focus';
 
@@ -328,7 +330,7 @@ interface OrganizationLogoProps extends AvatarProps$1 {
  */
 declare const OrganizationLogo: ({ name, image, variant, ...rest }: OrganizationLogoProps) => JSX.Element;
 
-type AlertVariants = 'success' | 'warning' | 'error' | 'info';
+type AlertVariants = 'success' | 'warning' | 'error' | 'info' | 'danger' | 'ai' | 'default' | 'ghost';
 interface AlertProps extends AlertProps$1 {
     variant?: AlertVariants;
 }
@@ -1025,7 +1027,7 @@ declare const DatePickerField: (props: DatePickerFieldProps & React__default.Ref
  */
 declare const DateRangePickerField: (props: DateRangePickerFieldProps & React__default.RefAttributes<HTMLDivElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
-interface IntentButtonProps {
+interface IntentButtonProps extends CenterProps {
     icon?: ComponentType<any>;
     timeout?: number;
     onTimeout?: () => void;
@@ -1063,7 +1065,7 @@ interface IntentButtonProps {
  *?)
  *
  */
-declare const IntentButton: ({ icon, timeout, ringColor, onTimeout, tooltipText, "aria-label": ariaLabel, }: IntentButtonProps) => JSX.Element;
+declare const IntentButton: ({ icon, timeout, ringColor, onTimeout, tooltipText, "aria-label": ariaLabel, ...rest }: IntentButtonProps) => JSX.Element;
 
 interface ToolboxProps extends Omit<FlexProps, 'direction'> {
     isResizable?: boolean;
@@ -1310,17 +1312,20 @@ type ChildrenType$1<PropType = any, PropTypeTwo = any> = ((props: PropType, seco
 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[]);
+    'data-testid'?: string;
 }
 interface DraggableProps extends UseDraggableArguments {
     itemLabel?: string;
     children?: ChildrenType$1<ListenersType>;
     disableDrag?: boolean;
+    'data-testid'?: string;
 }
 interface SortableItemProps extends UseSortableArguments {
     children?: ChildrenType$1<ListenersType>;
     itemLabel?: UniqueIdentifier;
     dblClickThreshold?: number;
     disableDrag?: boolean;
+    'data-testid'?: string;
 }
 type MovedItemType<T> = {
     item: T;
@@ -1416,7 +1421,7 @@ interface SortableContainerProps {
  *
  *
  */
-declare const Draggable: ({ itemLabel, children, disableDrag, ...rest }: DraggableProps) => JSX.Element;
+declare const Draggable: ({ itemLabel, children, disableDrag, "data-testid": dataTestId, ...rest }: DraggableProps) => JSX.Element;
 
 /**
  * Wrapper where you can style a container to place draggable elements
@@ -1454,7 +1459,7 @@ declare const Draggable: ({ itemLabel, children, disableDrag, ...rest }: Draggab
  * ?)
  *
  */
-declare const Droppable: ({ children, ...rest }: DroppableProps) => JSX.Element;
+declare const Droppable: ({ children, "data-testid": testId, ...rest }: DroppableProps) => JSX.Element;
 
 /**
  * Wrapper that provides context for sortable elements using DnD-kit
@@ -1477,7 +1482,7 @@ declare const Sortable: (props: SortableContextProps) => JSX.Element;
  * @example
  * (? <SortableItem id="sortable-1"/> ?)
  * */
-declare const SortableItem: ({ itemLabel, dblClickThreshold, children, disableDrag, ...rest }: SortableItemProps) => JSX.Element;
+declare const SortableItem: ({ itemLabel, dblClickThreshold, children, disableDrag, "data-testid": dataTestId, ...rest }: SortableItemProps) => JSX.Element;
 
 /**
  * Default draggable item none other provided in SortableList and MultiSort.
@@ -2097,7 +2102,7 @@ type ModalBooleans = {
     confirmDelete?: boolean;
     canEditFileName?: boolean;
 };
-interface FilePickerProps {
+interface FilePickerProps extends Omit<StackProps, 'onChange'> {
     /** Ex: acceptFormat="'acceptFormat="video/*, .jpg" */
     acceptFormat?: string;
     onChange?: (image: File | null) => void;
@@ -2124,7 +2129,7 @@ interface FilePickerFieldProps extends Omit<FilePickerProps, 'onChange'> {
 interface MultiFilePickerFieldProps extends Omit<FilePickerFieldProps, 'onChange'> {
     onChange?: (File: string[]) => void;
 }
-interface MultiFilePickerProps<T extends FileFormat> extends Omit<FilePickerProps, 'onChange'> {
+interface MultiFilePickerProps<T extends FileFormat> extends Omit<FilePickerProps, 'onChange'>, Omit<StackProps, 'onChange'> {
     onChange?: (files: File[]) => void;
     compression?: CompressionType;
     files?: T[] | null;
@@ -2135,7 +2140,7 @@ interface MultiFilePickerProps<T extends FileFormat> extends Omit<FilePickerProp
     confirmDelete?: boolean;
     variant?: 'ai';
 }
-interface MultiFileUploaderProps<T extends FileFormat> {
+interface MultiFileUploaderProps<T extends FileFormat> extends Omit<BoxProps, 'onChange'> {
     /** Ex: acceptFormat="'acceptFormat="video/*, .jpg" */
     variant?: 'ai';
     acceptFormat?: string;
@@ -2146,7 +2151,7 @@ interface MultiFileUploaderProps<T extends FileFormat> {
     updatePreviewFiles?: (files: any[]) => void;
     onChange?: (files: File[]) => void;
 }
-interface MultiFileListProps<T extends FileFormat> {
+interface MultiFileListProps<T extends FileFormat> extends Omit<StackProps, 'onChange'> {
     files?: T[];
     uploadingFiles?: T[];
     deleteFile?: (file: T | FileFormat) => void;
@@ -2268,7 +2273,7 @@ declare function MultiFileUploader<T extends FileFormat>({ acceptFormat, compres
  *
  *
  */
-declare function MultiFilePicker<T extends FileFormat>({ acceptFormat, compression, onChange, files, uploadingFiles, deleteFile, confirmDelete, maxFileSize, enablePreLoad, enableSmartLoad, editFileOptions, variant, }: MultiFilePickerProps<T>): JSX.Element;
+declare function MultiFilePicker<T extends FileFormat>({ acceptFormat, compression, onChange, files, uploadingFiles, deleteFile, confirmDelete, maxFileSize, enablePreLoad, enableSmartLoad, editFileOptions, variant, ...rest }: MultiFilePickerProps<T>): JSX.Element;
 
 /**
  * Show list of files, their uploading progress as well as options to edit/delete them
@@ -2277,7 +2282,7 @@ declare function MultiFilePicker<T extends FileFormat>({ acceptFormat, compressi
  * @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;
+declare function MultiFileList<T extends FileFormat>({ files, uploadingFiles, onChange, deleteFile, addFile, confirmDelete, editFileOptions, enableSmartLoad, ...rest }: MultiFileListProps<T>): JSX.Element;
 
 /**
  * The multi file picker component wrapped in a <Field />
@@ -3295,9 +3300,6 @@ interface UseToastOptions extends UseToastOptions$1 {
     variant?: AlertVariants;
     title?: string;
     description?: string;
-    /** if set to true and if there is already another toast visible,
-     *  it will update the information on the current visible toast rather
-     *  than displaying a new one on top of the previous one */
     replacePreviousToast?: boolean;
 }
 
@@ -3310,10 +3312,12 @@ interface UseToastOptions extends UseToastOptions$1 {
  * (?
  *
         <HStack spacing={ 4 }>
+          <Toast variant="default" title="default" />
           <Toast variant="success" title="success" />
           <Toast variant="warning" title="warning" />
-          <Toast variant="info" title="info" />
           <Toast variant="error" title="error" />
+          <Toast variant="info" title="info" />
+          <Toast variant="ai" title="mtGPT" />
         </HStack>
  * ?)
  *
@@ -3340,60 +3344,160 @@ declare const Toast: ({ variant, title, description, onClose, ...rest }: ToastPr
  */
 declare const useToast: (defaultOpts?: UseToastOptions) => (opts?: UseToastOptions) => void;
 
+type TooltipVariants = 'success' | 'warning' | 'error' | 'info' | 'danger' | 'ai' | 'default' | 'ghost';
+interface OurTooltipProps extends TooltipProps {
+    variant?: TooltipVariants;
+    description?: React.ReactNode;
+    hasIcon?: boolean;
+}
+
 /**
+ * A tooltip is a brief, informative message that appears when a user interacts with an element.
  * @see {@link https://northlight.dev/reference/tooltip}
  *
  * @example
  * (?
- * <Tooltip label="Secret message">
- * <Badge>Hover over me</Badge>
- * </Tooltip>
+ * <HStack>
+ *    <Tooltip
+ *      description="Here’s a regular tooltip with some with icon
+ *      inside of it that’s supposed to be substantially large.">
+ *      <Badge>ICON</Badge>
+ *    </Tooltip>
+ *    <Tooltip
+ *       hasIcon={ false }
+ *       description="Here’s a regular tooltip with some text without icon
+ *      inside of it that’s supposed to be substantially large."
+ *    >
+ *      <Badge>NOICON</Badge>
+ *    </Tooltip>
+ *    <Tooltip
+ *      hasIcon={ false }
+ *      description={
+ *        <Box>
+ *          <Text>
+ *            Some text
+ *          </Text>
+ *          <UnorderedList>
+ *            <ListItem>
+ *              List item 1
+ *            </ListItem>
+ *            <ListItem>
+ *              List item 2
+ *            </ListItem>
+ *            <ListItem>
+ *              List item 3
+ *            </ListItem>
+ *          </UnorderedList>
+ *        </Box>
+ *      }
+ *    >
+ *      <Badge>With JSX content</Badge>
+ *    </Tooltip>
+ * </HStack>
  * ?)
  *
- * @example (Example)
- * You can render a custom component
- * (?
- * +
- * const TooltipContent = (
- * <Box>
- * <Label size="sm">Text</Label>
- * <P sx={{color: 'text.inverted'}}>Content</P>
- * </Box>
- * )
- *
- * const ExampleTooltip = () => {
- * return (
- * <Tooltip label={TooltipContent}>
- * <Badge>Hover here</Badge>
- * </Tooltip>
- * )}
- *
- * render(<ExampleTooltip />)
- * ?)
  *
- * @example (Example)
- * Try out a variant, success, info, warning, danger, ghost
+ * @example
  * (?
  * <HStack>
- * <Tooltip label="Secret message" variant="success">
- * <Badge colorScheme="green">Success</Badge>
- * </Tooltip>
- * <Tooltip label="Secret message" variant="info">
- * <Badge colorScheme="blue">Info</Badge>
- * </Tooltip>
- * <Tooltip label="Secret message" variant="warning">
- * <Badge colorScheme="yellow">Warning</Badge>
- * </Tooltip>
- * <Tooltip label="Secret message" variant="danger">
- * <Badge colorScheme="red">Danger</Badge>
- * </Tooltip>
- * <Tooltip label="Secret message" variant="ghost">
- * <Badge>Ghost</Badge>
- * </Tooltip>
+ *     <VStack>
+ *        <Tooltip
+ *          variant="success"
+ *          description="This is a successful message"
+ *          >
+ *          <Badge colorScheme="green">Success</Badge>
+ *        </Tooltip>
+ *        <Tooltip
+ *          variant="success"
+ *          title="Please check fields"
+ *          description="This is a successful message with a title and an icon
+ *          that’s supposed to be substantially large."
+ *          >
+ *          <Badge colorScheme="green">Success</Badge>
+ *          </Tooltip>
+ *     </VStack>
+ *     <VStack>
+ *        <Tooltip
+ *          variant="info"
+ *          description="This is an informative text"
+ *          >
+ *          <Badge colorScheme="blue">Info</Badge>
+ *        </Tooltip>
+ *        <Tooltip
+ *          variant="info"
+ *          title="Please check fields"
+ *          description="This is an informative text with a title and an icon
+ *          that’s supposed to be substantially large."
+ *          >
+ *        <Badge colorScheme="blue">Info</Badge>
+ *        </Tooltip>
+ *     </VStack>
+ *     <VStack>
+ *        <Tooltip
+ *          variant="warning"
+ *          description="This is a warning"
+ *          >
+ *        <Badge colorScheme="yellow">Warning</Badge>
+ *        </Tooltip>
+ *        <Tooltip
+ *          variant="warning"
+ *          title="Please check fields"
+ *          description="This is a warning with a title and an icon
+ *          that’s supposed to be substantially large."
+ *          >
+ *          <Badge colorScheme="yellow">Warning</Badge>
+ *        </Tooltip>
+ *      </VStack>
+ *      <VStack>
+ *        <Tooltip
+ *          variant="danger"
+ *          description="This is an error message"
+ *          >
+ *        <Badge colorScheme="red">Error</Badge>
+ *        </Tooltip>
+ *        <Tooltip
+ *          variant="danger"
+ *          title="Please check fields"
+ *          description="This is an error message with a title and an icon
+ *          that’s supposed to be substantially large."
+ *          >
+ *          <Badge colorScheme="red">Error</Badge>
+ *        </Tooltip>
+ *      </VStack>
+ *      <VStack>
+ *        <Tooltip
+ *          variant="ai"
+ *          description="This is an AI message">
+ *        <Badge colorScheme="teal" variant="subtle">AI</Badge>
+ *        </Tooltip>
+ *        <Tooltip
+ *          variant="ai"
+ *          title="Please check fields"
+ *          description="This is an AI message with a title and an icon
+ *          that’s supposed to be substantially large."
+ *          >
+ *          <Badge colorScheme="teal" variant="subtle">AI</Badge>
+ *        </Tooltip>
+ *      </VStack>
+ *      <VStack>
+ *        <Tooltip
+ *          variant="ghost"
+ *          description="This is an clean message">
+ *        <Badge>Ghost</Badge>
+ *        </Tooltip>
+ *        <Tooltip
+ *          variant="ghost"
+ *          title="Please check fields"
+ *          description="This is an clean message with a title and an icon
+ *          that’s supposed to be substantially large."
+ *          >
+ *          <Badge>Ghost</Badge>
+ *        </Tooltip>
+ *      </VStack>
  * </HStack>
  * ?)
  */
-declare const Tooltip: ({ hasArrow, ...rest }: TooltipProps) => JSX.Element;
+declare const Tooltip: React__default.FC<OurTooltipProps>;
 
 type DurationType = number | null;
 type OffsetType = number | string;
@@ -3549,7 +3653,7 @@ declare const SlideFade: ({ children, enterDuration, exitDuration, duration, in:
  */
 declare const Collapse: ({ children, enterDuration, exitDuration, duration, in: show, disableFocus, hideDisplay, enterDelay, exitDelay, onTransitionComplete, ...rest }: CollapseProps) => JSX.Element;
 
-interface StatusPinProps {
+interface StatusPinProps extends BoxProps {
     size?: PinSize;
     variant: PinVariant;
 }
@@ -3580,10 +3684,10 @@ interface StatusPinProps {
  * ?)
  *
  */
-declare const StatusPin: ({ size, variant }: StatusPinProps) => JSX.Element;
+declare const StatusPin: ({ size, variant, ...rest }: StatusPinProps) => JSX.Element;
 
 type BlockVariant = 'working' | 'pending' | 'approved' | 'rejected';
-interface StatusBlockProps {
+interface StatusBlockProps extends Omit<TagProps$1, 'bgColor'> {
     variant: BlockVariant;
 }
 type BlockVariantColorTuple = [`${Color}.${ColorGrade}`, `${Color}.${ColorGrade}`];
@@ -3595,7 +3699,7 @@ declare const statusIconMap: Record<BlockVariant, any>;
  * @example
  * (? <StatusBlock variant="approved" /> ?)
  */
-declare const StatusBlock: ({ variant }: StatusBlockProps) => JSX.Element;
+declare const StatusBlock: ({ variant, ...rest }: StatusBlockProps) => JSX.Element;
 
 interface AsyncErrorProps extends AlertProps {
     message?: string;
@@ -3893,7 +3997,7 @@ interface SplitPaneProps extends GridProps {
  * @see {@link https://northlight.dev/reference/split-pane}
  *
  */
-declare const SplitPane: ({ children, initialSplit, isOpen, minLeftWidth, minRightWidth, }: SplitPaneProps) => JSX.Element;
+declare const SplitPane: ({ children, initialSplit, isOpen, minLeftWidth, minRightWidth, ...rest }: SplitPaneProps) => JSX.Element;
 
 /**
  *  Wrapper around child of split pane
@@ -4031,6 +4135,88 @@ interface StepStackProps extends StackProps {
 */
 declare const StepStack: ({ children, spacing, rowHeight, stepCircleAlignment, stepCircleMarginTopPx, ...rest }: StepStackProps) => JSX.Element;
 
+interface CreationOption extends Option$1 {
+    isCreation: boolean;
+}
+interface CreatableSelectDropdownProps {
+    /**
+     * An array of "Option" objects that represents the initial options available in the dropdown.
+     * Each "Option" object must have a "label" and a "value" property (both strings).
+     */
+    standardOptions: Option$1[];
+    /**
+     * A callback function that is called whenever the selected option changes.
+     * This function receives the newly selected "Option" object as its only argument.
+     */
+    onOptionChange: (option: Option$1) => void;
+    /**
+     * Optional placeholder text displayed when no option is selected and the dropdown is not focused.
+     * Defaults to 'Select or create...' if not provided.
+     */
+    initialPlaceholder?: string;
+    /**
+     * Optional placeholder text displayed when the dropdown is
+     * focused and the user is prompted to create a new option.
+     * Defaults to 'Enter text...' if not provided.
+     */
+    addOptionPlaceholder?: string;
+    /**
+     * Optional "Option" object representing the option to create a new item within the dropdown.
+     * This option is typically displayed at the top of the dropdown list.
+     * Defaults to "{ label: 'Add option...', value: 'Add option...' }" if not provided.
+     */
+    creationOption?: CreationOption;
+    /**
+     * Optional CSS width property value for the dropdown container.
+     * Specify the width of the dropdown. Defaults to '100%' if not provided.
+     */
+    width?: string;
+    /**
+     * An optional string that determines the overall styling of the select field.
+     * Accepted values are 'outline', 'filled', 'flushed', or 'unstyled'.
+     * The default value is 'outline'.
+     *
+    */
+    variant?: Variant;
+}
+
+/**
+ * A dropdown component that allows users to select a value from given options
+ * or create a new one if it doesn't exist.
+ * @see {@link https://northlight.dev/reference/creatable-select-dropdown}
+ *
+ * @example (Example)
+ * ##Select the best artist
+ * (?
+ * () => {
+ *   const [artist, setArtist] = useState(null);
+ *   const options = [
+ *     { label: 'Scooter', value: 'scooter' },
+ *     { label: 'Snoop Doggy Dogg', value: 'snoop-dogg' },
+ *   ];
+ *
+ *   const handleOptionChange = (newOption) => {
+ *     setArtist(newOption);
+ *     // Perform additional actions with the selected or created option
+ *   };
+ *
+ *   return (
+ *     <Box align="left">
+ *       <CreatableSelectDropdown
+ *         standardOptions={options}
+ *         onOptionChange={handleOptionChange}
+ *         width="300px"
+ *       />
+ *       { artist && artist.value !== 'Add option...' && (
+ *          <H3 py={8}>The best artist is: { artist.label }</H3>
+ *        ) }
+ *     </Box>
+ *   );
+ * }
+ * ?)
+ */
+declare const CreatableSelectDropdown: ({ standardOptions, initialPlaceholder, addOptionPlaceholder, creationOption, onOptionChange, width, variant, }: CreatableSelectDropdownProps) => JSX.Element;
+
 declare const useDebounce: <T>(value: T, delay: number) => T;
 
 declare const useLoadingMessage: (prefix?: string, delay?: number) => string;
@@ -4095,4 +4281,4 @@ declare const useResizeWidth: ({ stationaryEdge, minWidthPx, maxWidthPx, default
 declare const theme: Record<string, any>;
 declare const tottTheme: Record<string, any>;
 
-export { Accordion, AccordionButton, AccordionItem, AccordionPanel, Alert, AlertProps, AlertVariants, AspectRatio, AsyncError, AsyncErrorProps, Avatar, AvatarBadgeProps, AvatarGroup, AvatarGroupProps, AvatarProps, Badge, BasicOption, Blinker, BlinkerProps, 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, IntentButton, Label, LabelProps, LabelSizes, LabelType, Lead, ListenersType, LoadingBar, MaskedTextInput, MaskedTextInputProps, MediatoolThemeProvider, MediatoolThemeProviderProps, Menu, MenuProps, MenuVariants, Message, Modal, ModalBase, ModalBody, ModalBooleans, ModalProps, ModalSizes, MultiFileList, MultiFileListProps, MultiFilePicker, MultiFilePickerField, MultiFilePickerFieldProps, MultiFilePickerProps, MultiFileUploader, MultiFileUploaderProps, MultiItemType, MultiSort, MultiSortProps, NotificationIconButton, NotificationIconButtonProps, NumVal, NumValType, NumberInput, NumberInputField, NumberInputFieldProps, NumberInputProps, NumberInputSizeProps, NumberInputStepperProps, OffsetType, Option, OrganizationLogo, OrganizationLogoProps, OverflowGroup, OverflowGroupProps, OverflowIndicatorProps, P, PProps, PaneDivider, PaneItem, PinInput, PinInputProps, PinSize, PinSizeTuple, PinVariant, Popover, PresetOptions, ProgressBar, ProgressBarProps, Radio, RadioFieldGroupProps, RadioFieldProps, RadioGroup, RadioGroupField, RadioGroupProps, RadioProps, ResizeHandle, ScaleFade, ScaleFadeProps, SearchBar, SearchBarField, SearchBarFieldProps, SearchBarOptionType, SearchBarProps, Select, SelectActionMeta, SelectField, SelectFieldProps, SelectProps, SetValueOptionsType, Slide, SlideFade, SlideFadeProps, SlideProps, Small, Sortable, SortableContainer, SortableContainerProps, SortableItem, SortableItemProps, SortableList, SortableListProps, Spinner, SpinnerProps, SplitPane, SplitPaneProps, StatusBlock, StatusBlockProps, StatusPin, StatusPinProps, Step, StepList, StepListProps, StepPanel, StepPanelProps, StepProps, StepStack, Steps, StepsProps, StylizedType, Switch, SwitchField, SwitchFieldProps, SwitchProps, TabPanel, TabPanelProps, Table, TableProps, Tabs, TabsProps, Tag, TagGroup, TagGroupProps, TagProps, TagsInput, TagsInputProps, TextField, TextFieldProps, TextInputFormatter, TextSizeProps, Textarea, TextareaField, TextareaFieldProps, TextareaProps, Tiny, Toast, ToastProps, Toolbox, ToolboxContent, ToolboxContentProps, ToolboxFooter, ToolboxFooterProps, ToolboxHeader, ToolboxHeaderProps, ToolboxProps, Tooltip, TransitionDirection, UseFormReturn, UseSelectCallbacksProps, UseToastOptions, addAlpha, advancedParseFloat, clamp, createDebounceFunctionInstance, getChildrenWithProps, getContrastColor, getFieldError, getInitials, getMatchingValue, getShades, highlight, luminosity, ring, statusIconMap, theme, tottTheme, trimFormValues, useArrowFocus, useCurrentTheme, useDebounce, useDidUpdateEffect, useLoadingMessage, useOutsideRectClick, useOverflowGroup, useResizeWidth, useScreenSize, useScrollToBottom, useSelectCallbacks, useSetValueRefreshed, useToast };
+export { Accordion, AccordionButton, AccordionItem, AccordionPanel, Alert, AlertProps, AlertVariants, AspectRatio, AsyncError, AsyncErrorProps, Avatar, AvatarBadgeProps, AvatarGroup, AvatarGroupProps, AvatarProps, Badge, BasicOption, Blinker, BlinkerProps, 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, CreatableSelectDropdown, 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, IntentButton, Label, LabelProps, LabelSizes, LabelType, Lead, ListenersType, LoadingBar, MaskedTextInput, MaskedTextInputProps, MediatoolThemeProvider, MediatoolThemeProviderProps, Menu, MenuProps, MenuVariants, Message, Modal, ModalBase, ModalBody, ModalBooleans, ModalProps, ModalSizes, MultiFileList, MultiFileListProps, MultiFilePicker, MultiFilePickerField, MultiFilePickerFieldProps, MultiFilePickerProps, MultiFileUploader, MultiFileUploaderProps, MultiItemType, MultiSort, MultiSortProps, NotificationIconButton, NotificationIconButtonProps, NumVal, NumValType, NumberInput, NumberInputField, NumberInputFieldProps, NumberInputProps, NumberInputSizeProps, NumberInputStepperProps, OffsetType, Option, OrganizationLogo, OrganizationLogoProps, OverflowGroup, OverflowGroupProps, OverflowIndicatorProps, P, PProps, PaneDivider, PaneItem, PinInput, PinInputProps, PinSize, PinSizeTuple, PinVariant, Popover, PresetOptions, ProgressBar, ProgressBarProps, Radio, RadioFieldGroupProps, RadioFieldProps, RadioGroup, RadioGroupField, RadioGroupProps, RadioProps, ResizeHandle, ScaleFade, ScaleFadeProps, SearchBar, SearchBarField, SearchBarFieldProps, SearchBarOptionType, SearchBarProps, Select, SelectActionMeta, SelectField, SelectFieldProps, SelectProps, SetValueOptionsType, Slide, SlideFade, SlideFadeProps, SlideProps, Small, Sortable, SortableContainer, SortableContainerProps, SortableItem, SortableItemProps, SortableList, SortableListProps, Spinner, SpinnerProps, SplitPane, SplitPaneProps, StatusBlock, StatusBlockProps, StatusPin, StatusPinProps, Step, StepList, StepListProps, StepPanel, StepPanelProps, StepProps, StepStack, Steps, StepsProps, StylizedType, Switch, SwitchField, SwitchFieldProps, SwitchProps, TabPanel, TabPanelProps, Table, TableProps, Tabs, TabsProps, Tag, TagGroup, TagGroupProps, TagProps, TagsInput, TagsInputProps, TextField, TextFieldProps, TextInputFormatter, TextSizeProps, Textarea, TextareaField, TextareaFieldProps, TextareaProps, Tiny, Toast, ToastProps, Toolbox, ToolboxContent, ToolboxContentProps, ToolboxFooter, ToolboxFooterProps, ToolboxHeader, ToolboxHeaderProps, ToolboxProps, Tooltip, TransitionDirection, UseFormReturn, UseSelectCallbacksProps, UseToastOptions, addAlpha, advancedParseFloat, clamp, createDebounceFunctionInstance, getChildrenWithProps, getContrastColor, getFieldError, getInitials, getMatchingValue, getShades, highlight, luminosity, ring, statusIconMap, theme, tottTheme, trimFormValues, useArrowFocus, useCurrentTheme, useDebounce, useDidUpdateEffect, useLoadingMessage, useOutsideRectClick, useOverflowGroup, useResizeWidth, useScreenSize, useScrollToBottom, useSelectCallbacks, useSetValueRefreshed, useToast };