@northlight/ui 1.5.9 → 2.1.0

package/dist/ts/types.d.ts

@@ -1,5 +1,5 @@
 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, 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, Highlight, Image, Input, InputAddon, InputGroup, InputLeftAddon, InputLeftElement, InputRightAddon, InputRightElement, Kbd, Link, 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, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, Slider, SliderFilledTrack, SliderMark, SliderThumb, SliderTrack, Spacer, Stack, StackDivider, Stat, StatArrow, StatGroup, StatHelpText, StatLabel, StatNumber, TabIndicator as StepIndicator, TabPanels as StepPanels, Tab, TabIndicator, TabList, TabPanels, Table, TableCaption, TableContainer, 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, useMediaQuery, useMergeRefs, useNumberInput, useOutsideClick, usePrefersReducedMotion, useRadio, useRadioGroup, useTab, useTabs, useTheme, useToken } 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, Highlight, Image, Input, InputAddon, InputGroup, InputLeftAddon, InputLeftElement, InputRightAddon, InputRightElement, Kbd, Link, 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, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, Slider, SliderFilledTrack, SliderMark, SliderThumb, SliderTrack, Spacer, Stack, StackDivider, Stat, StatArrow, StatGroup, StatHelpText, StatLabel, StatNumber, TabIndicator as StepIndicator, TabPanels as StepPanels, Tab, TabIndicator, TabList, TabPanels, Table, TableCaption, TableContainer, 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, ReactElement } from 'react';
 import { RegisterOptions, FieldValues, UseFormReturn as UseFormReturn$1, SetValueConfig, ControllerRenderProps, UseFormProps, FieldError, Merge, FieldErrorsImpl } from 'react-hook-form';
@@ -13,6 +13,7 @@ import { Props, GroupBase, ActionMeta, ChakraStylesConfig, SelectInstance, MenuL
 export { AsyncCreatableSelect, AsyncSelect, Select as ChakraReactSelect, CreatableSelect } from 'chakra-react-select';
 import { DndContextProps, UseDroppableArguments, UseDraggableArguments, UniqueIdentifier, CollisionDetection, SensorDescriptor, SensorOptions } from '@dnd-kit/core';
 export * from '@dnd-kit/core';
+export { useInterval as dndUseInterval } 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';
@@ -310,6 +311,8 @@ interface CheckboxFieldProps extends CheckboxProps$1 {
     isRequired?: boolean;
     variant?: CheckboxVariants;
     direction?: StackDirection;
+    labelPlacement?: 'left' | 'right';
+    labelSize?: '2xs' | 'xs' | 'md' | 'lg';
 }
 
 /**
@@ -346,9 +349,21 @@ declare const Checkbox: ({ value, onChange, name, size, variant, ...rest }: Chec
  * 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, direction, ...rest }: CheckboxFieldProps) => JSX.Element;
+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'> {
@@ -469,6 +484,7 @@ interface FlipButtonProps {
     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'> {
@@ -477,6 +493,7 @@ interface FlipButtonGroupProps extends Omit<FlipButtonProps, 'value' | 'children
     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;
 }
@@ -486,6 +503,7 @@ interface FlipButtonGroupFieldProps extends FlipButtonGroupProps {
     isRequired?: boolean;
     validate?: RegisterOptions;
     value?: string;
+    iconPlacement?: 'left' | 'right' | 'none';
 }
 
 /**
@@ -601,7 +619,7 @@ declare const FlipButtonGroup: (props: FlipButtonGroupProps) => JSX.Element;
  * ?)
  *
  */
-declare const FlipButtonGroupField: ({ name, label, children, direction, isRequired, onChange: onChangeCallback, validate, ...rest }: FlipButtonGroupFieldProps) => JSX.Element;
+declare const FlipButtonGroupField: ({ name, label, children, direction, isRequired, iconPlacement, onChange: onChangeCallback, validate, ...rest }: FlipButtonGroupFieldProps) => JSX.Element;
 
 type Color = 'blue' | 'gray' | 'red' | 'pink' | 'green' | 'orange' | 'purple' | 'yellow' | 'mediatoolBlue';
 type ColorGrade = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
@@ -1337,12 +1355,16 @@ declare function MultiSort<itemKeys extends string | number | symbol>({ items: s
  * @example (Example)
  * ### With custom component
  * (?
+ * () => {
+ * const [items, setItems] = useState([ { name: 'item1' }, { name: 'item2' }, { name: 'item3' } ])
+ * return (
  * <Stack>
  *
  * <SortableList
-  items={ [ { name: 'item1' }, { name: 'item2' }, { name: 'item3' } ] }
+  items={ items }
   createKey={ (item) => item.name }
   disableDrag={ true }
+  onChange={setItems}
 >
   { ({ name }, listeners, { isOver }) => (
     <HStack>
@@ -1352,6 +1374,7 @@ declare function MultiSort<itemKeys extends string | number | symbol>({ items: s
   ) }
 </SortableList>
 </Stack>
+  )}
  * ?)
 <br />
 If disableDrag=false, then when the user double clicks it will trigger
@@ -1360,7 +1383,7 @@ the default behaviour of the rendered component instead of the dragging,
  *
  *
  */
-declare function SortableList<T>({ children, items: sortableItems, collisionDetection, createKey, strategy, onChange, onMovedItem, displayOverlay, sensors, dblClickThreshold, disableDrag, }: SortableListProps<T>): JSX.Element;
+declare function SortableList<T>({ children, items, collisionDetection, createKey, strategy, onChange, onMovedItem, displayOverlay, sensors, dblClickThreshold, disableDrag, }: SortableListProps<T>): JSX.Element;
 
 /**
  * Used with multi sort to render a sortable list inside a droppable
@@ -2565,6 +2588,7 @@ type SwitchFieldProps = SwitchProps$1 & {
     validate?: RegisterOptions;
     isRequired?: boolean;
     direction?: StackDirection;
+    labelPosition?: 'left' | 'right';
 };
 
 /**
@@ -2596,9 +2620,20 @@ declare const Switch: ({ value, onChange, name, size, ...rest }: SwitchProps) =>
  * 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, ...rest }: SwitchFieldProps) => JSX.Element;
+declare const SwitchField: ({ name, label, isRequired, validate, onChange: onChangeCallback, direction, labelPosition, ...rest }: SwitchFieldProps) => JSX.Element;
 
 interface TabsProps extends TabsProps$1 {
 }
@@ -3415,6 +3450,10 @@ It takes all the props that a normal stack takes, with the addition of a
  */
 declare const StepStack: ({ children, spacing, rowHeight, ...rest }: StepStackProps) => JSX.Element;
 
+declare const useDebounce: <T>(value: T, delay: number) => T;
+
+declare const useLoadingMessage: (prefix?: string, delay?: number) => string;
+
 declare const useArrowFocus: (columns: number) => {
     defaultArrows: (e: any) => void;
     focusPrevious: ({ repeat, wrap, }?: {
@@ -3447,4 +3486,4 @@ declare const useSelectCallbacks: <T extends BasicOption>({ onChange, onAdd, onR
 declare const theme: Record<string, any>;
 declare const tottTheme: Record<string, any>;
 
-export { Accordion, AccordionButton, AccordionItem, AccordionPanel, Alert, AlertProps, AlertVariants, AspectRatio, AsyncError, AsyncErrorProps, Avatar, AvatarBadgeProps, AvatarGroup, AvatarGroupProps, AvatarProps, Badge, BasicOption, Blinker, BlinkerProps, BlockVariant, BlockVariantColorTuple, Blockquote, BodyType, Button, ButtonProps, ButtonVariants, Capitalized, Carousel, Checkbox, CheckboxField, CheckboxFieldProps, CheckboxProps, CheckboxVariants, ChildrenType, Clickable, ClickableProps, ClipboardInput, ClipboardInputProps, Collapse, CollapseProps, Color, ColorButtonProps, ColorGrade, ColorPicker, ColorPickerField, ColorPickerFieldProps, ColorPickerProps, ColorShades, ColorsExpandButtonProps, ConfirmDeleteModalProps, CurrentTheme, CustomContainerPropsType, CustomElementType, CustomFlipButtonProps, CustomFlipButtonPropsType, CustomTheme, DatePicker, DatePickerField, DatePickerFieldProps, DatePickerProps, DateRange, DateRangePicker, DateRangePickerField, DateRangePickerFieldProps, DateRangePickerProps, DragAndDrop, DragHandle, DragHandleProps, DragItem, DragItemProps, Draggable, DraggableProps, DropZone, DropZoneProps, Droppable, DroppableProps, DurationType, EditableControlsProps, EditableProps, EditableSizes, EditableText, Fade, FadeProps, FastGrid, FastGridProps, FastList, FastListProps, Field, FieldErrorType, FieldProps, FileEditorModalProps, FileFormat, FileIconButtonProps, FileItemProps, FilePicker, FilePickerField, FilePickerFieldProps, FilePickerProps, FileWithSizeAndType, FileWithSrcNameType, FileWithType, FlipButton, FlipButtonGroup, FlipButtonGroupField, FlipButtonGroupFieldProps, FlipButtonGroupProps, FlipButtonProps, Form, FormBody, FormLabel, FormLabelProps, FormProps, FormattedNumberInput, FormattedNumberInputProps, H1, H2, H3, H4, H5, H6, HeadingProps, HeadingType, Icon, IconButton, IconButtonProps, IconProps, InputFieldProps, Label, LabelProps, LabelSizes, LabelType, Lead, ListenersType, MaskedTextInput, MaskedTextInputProps, MediatoolThemeProvider, MediatoolThemeProviderProps, Modal, ModalBooleans, ModalProps, ModalSizes, MultiFileList, MultiFileListProps, MultiFilePicker, MultiFilePickerField, MultiFilePickerFieldProps, MultiFilePickerProps, MultiFileUploader, MultiFileUploaderProps, MultiItemType, MultiSort, MultiSortProps, NotificationIconButton, NotificationIconButtonProps, NumberInput, NumberInputField, NumberInputFieldProps, NumberInputProps, NumberInputSizeProps, NumberInputStepperProps, OffsetType, Option, OrganizationLogo, OrganizationLogoProps, OverflowGroup, OverflowGroupProps, OverflowIndicatorProps, P, PProps, PaneDivider, PaneItem, PinInput, PinInputProps, PinSize, PinSizeTuple, PinVariant, ProgressBar, Radio, RadioFieldGroupProps, RadioFieldProps, RadioGroup, RadioGroupField, RadioGroupProps, RadioProps, ScaleFade, ScaleFadeProps, SearchBar, SearchBarField, SearchBarFieldProps, SearchBarOptionType, SearchBarProps, Select, SelectActionMeta, SelectField, SelectFieldProps, SelectProps, SetValueOptionsType, Slide, SlideFade, SlideFadeProps, SlideProps, Small, Sortable, SortableContainer, SortableContainerProps, SortableItem, SortableItemProps, SortableList, SortableListProps, Spinner, SpinnerProps, SplitPane, SplitPaneProps, StatusBlock, StatusBlockProps, StatusPin, StatusPinProps, Step, StepList, StepListProps, StepPanel, StepPanelProps, StepProps, StepStack, Steps, StepsProps, StylizedType, Switch, SwitchField, SwitchFieldProps, SwitchProps, TabPanel, TabPanelProps, 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, useOverflowGroup, useSelectCallbacks, useSetValueRefreshed, useToast };
+export { Accordion, AccordionButton, AccordionItem, AccordionPanel, Alert, AlertProps, AlertVariants, AspectRatio, AsyncError, AsyncErrorProps, Avatar, AvatarBadgeProps, AvatarGroup, AvatarGroupProps, AvatarProps, Badge, BasicOption, Blinker, BlinkerProps, BlockVariant, BlockVariantColorTuple, Blockquote, BodyType, Button, ButtonProps, ButtonVariants, Capitalized, Carousel, Checkbox, CheckboxField, CheckboxFieldProps, CheckboxProps, CheckboxVariants, ChildrenType, Clickable, ClickableProps, ClipboardInput, ClipboardInputProps, Collapse, CollapseProps, Color, ColorButtonProps, ColorGrade, ColorPicker, ColorPickerField, ColorPickerFieldProps, ColorPickerProps, ColorShades, ColorsExpandButtonProps, ConfirmDeleteModalProps, CurrentTheme, CustomContainerPropsType, CustomElementType, CustomFlipButtonProps, CustomFlipButtonPropsType, CustomTheme, DatePicker, DatePickerField, DatePickerFieldProps, DatePickerProps, DateRange, DateRangePicker, DateRangePickerField, DateRangePickerFieldProps, DateRangePickerProps, DragAndDrop, DragHandle, DragHandleProps, DragItem, DragItemProps, Draggable, DraggableProps, DropZone, DropZoneProps, Droppable, DroppableProps, DurationType, EditableControlsProps, EditableProps, EditableSizes, EditableText, Fade, FadeProps, FastGrid, FastGridProps, FastList, FastListProps, Field, FieldErrorType, FieldProps, FileEditorModalProps, FileFormat, FileIconButtonProps, FileItemProps, FilePicker, FilePickerField, FilePickerFieldProps, FilePickerProps, FileWithSizeAndType, FileWithSrcNameType, FileWithType, FlipButton, FlipButtonGroup, FlipButtonGroupField, FlipButtonGroupFieldProps, FlipButtonGroupProps, FlipButtonProps, Form, FormBody, FormLabel, FormLabelProps, FormProps, FormattedNumberInput, FormattedNumberInputProps, H1, H2, H3, H4, H5, H6, HeadingProps, HeadingType, Icon, IconButton, IconButtonProps, IconProps, InputFieldProps, Label, LabelProps, LabelSizes, LabelType, Lead, ListenersType, MaskedTextInput, MaskedTextInputProps, MediatoolThemeProvider, MediatoolThemeProviderProps, Modal, ModalBooleans, ModalProps, ModalSizes, MultiFileList, MultiFileListProps, MultiFilePicker, MultiFilePickerField, MultiFilePickerFieldProps, MultiFilePickerProps, MultiFileUploader, MultiFileUploaderProps, MultiItemType, MultiSort, MultiSortProps, NotificationIconButton, NotificationIconButtonProps, NumberInput, NumberInputField, NumberInputFieldProps, NumberInputProps, NumberInputSizeProps, NumberInputStepperProps, OffsetType, Option, OrganizationLogo, OrganizationLogoProps, OverflowGroup, OverflowGroupProps, OverflowIndicatorProps, P, PProps, PaneDivider, PaneItem, PinInput, PinInputProps, PinSize, PinSizeTuple, PinVariant, ProgressBar, Radio, RadioFieldGroupProps, RadioFieldProps, RadioGroup, RadioGroupField, RadioGroupProps, RadioProps, ScaleFade, ScaleFadeProps, SearchBar, SearchBarField, SearchBarFieldProps, SearchBarOptionType, SearchBarProps, Select, SelectActionMeta, SelectField, SelectFieldProps, SelectProps, SetValueOptionsType, Slide, SlideFade, SlideFadeProps, SlideProps, Small, Sortable, SortableContainer, SortableContainerProps, SortableItem, SortableItemProps, SortableList, SortableListProps, Spinner, SpinnerProps, SplitPane, SplitPaneProps, StatusBlock, StatusBlockProps, StatusPin, StatusPinProps, Step, StepList, StepListProps, StepPanel, StepPanelProps, StepProps, StepStack, Steps, StepsProps, StylizedType, Switch, SwitchField, SwitchFieldProps, SwitchProps, TabPanel, TabPanelProps, 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, useLoadingMessage, useOverflowGroup, useSelectCallbacks, useSetValueRefreshed, useToast };

package/dist/umd/northlight.js

@@ -1480,6 +1480,31 @@
     );
   };
 
+  const useDebounce = (value, delay) => {
+    const [debouncedValue, setDebouncedValue] = React.useState(value);
+    React.useEffect(() => {
+      const handler = setTimeout(() => {
+        setDebouncedValue(value);
+      }, delay);
+      return () => {
+        clearTimeout(handler);
+      };
+    }, [value, delay]);
+    return debouncedValue;
+  };
+
+  const useLoadingMessage = (prefix = "", delay = 300) => {
+    const [dots, setDots] = React.useState(".");
+    react.useInterval(() => {
+      if (dots.length === 3) {
+        setDots(".");
+      } else {
+        setDots(`${dots}.`);
+      }
+    }, delay);
+    return `${prefix}${dots}`;
+  };
+
   const useArrowFocus = (columns) => {
     const {
       focusNext: next,
@@ -1654,35 +1679,59 @@
       variant,
       isRequired,
       validate,
-      direction = "row"
+      onChange: onChangeCallback = ramda.identity,
+      direction = "row",
+      labelPlacement = "left",
+      labelSize = "md"
     } = _b, rest = __objRest$15(_b, [
       "name",
       "label",
       "variant",
       "isRequired",
       "validate",
-      "direction"
+      "onChange",
+      "direction",
+      "labelPlacement",
+      "labelSize"
     ]);
-    return /* @__PURE__ */ React.createElement(react.Box, { w: label ? "full" : "fit-content" }, /* @__PURE__ */ React.createElement(
-      Field,
+    return /* @__PURE__ */ React.createElement(
+      react.Box,
       {
-        name,
-        label,
-        direction,
-        isRequired,
-        validate
+        w: label ? "full" : "fit-content",
+        display: "inline-flex"
       },
-      (field) => /* @__PURE__ */ React.createElement(
-        Checkbox$1,
-        __spreadValues$1B({
+      /* @__PURE__ */ React.createElement(
+        Field,
+        {
           name,
-          "data-testid": "checkbox-field-test-id",
-          onChange: field.onChange,
-          value: field.value,
-          variant
-        }, rest)
+          label: "",
+          isRequired,
+          direction,
+          validate
+        },
+        ({ onChange, value }) => /* @__PURE__ */ React.createElement(
+          react.Flex,
+          {
+            gap: 2,
+            direction: labelPlacement === "left" ? "row-reverse" : "row"
+          },
+          /* @__PURE__ */ React.createElement(
+            Checkbox$1,
+            __spreadValues$1B({
+              name,
+              onChange: (e) => {
+                onChange(e);
+                onChangeCallback(e);
+              },
+              value,
+              variant,
+              "data-testid": "checkbox-field-test-id"
+            }, rest)
+          ),
+          /* @__PURE__ */ React.createElement(Label$1, { htmlFor: name, sx: { fontWeight: "normal" }, size: labelSize }, label)
+        )
       )
-    ));
+    );
   };
 
   var __defProp$1A = Object.defineProperty;
@@ -2111,7 +2160,8 @@
       isMulti,
       isDisabled = false,
       icon,
-      value
+      value,
+      iconPlacement = "left"
     } = _a, rest = __objRest$11(_a, [
       "children",
       "size",
@@ -2119,7 +2169,8 @@
       "isMulti",
       "isDisabled",
       "icon",
-      "value"
+      "value",
+      "iconPlacement"
     ]);
     const state = React.useContext(FlipButtonContext);
     const ref = React.useRef(null);
@@ -2161,13 +2212,13 @@
       react.HStack,
       {
         spacing: isSelected || icon ? 2 : 0,
-        sx: ramda.merge(button, isFocused ? focusStyles : {}),
+        sx: ramda.mergeAll([button, isFocused ? focusStyles : {}, { flexDirection: iconPlacement === "left" ? "row" : "row-reverse" }]),
         "aria-checked": isSelected,
         "aria-disabled": isDisabled,
         as: "label"
       },
       /* @__PURE__ */ React.createElement("input", __spreadValues$1w({}, flipButtonProps)),
-      icon ? /* @__PURE__ */ React.createElement(Icon$1, { as: icon || icons.CheckSolid, sx: buttonIcon }) : isSelected && /* @__PURE__ */ React.createElement(react.SlideFade, { in: isSelected }, /* @__PURE__ */ React.createElement(Icon$1, { as: icon || icons.CheckSolid, sx: buttonIcon })),
+      icon && iconPlacement !== "none" ? /* @__PURE__ */ React.createElement(Icon$1, { as: icon || icons.CheckSolid, sx: buttonIcon }) : isSelected && iconPlacement !== "none" && /* @__PURE__ */ React.createElement(react.SlideFade, { in: isSelected }, /* @__PURE__ */ React.createElement(Icon$1, { as: icon || icons.CheckSolid, sx: buttonIcon })),
       /* @__PURE__ */ React.createElement(react.Text, { textAlign: "center" }, children)
     );
   };
@@ -2210,6 +2261,7 @@
       children,
       direction = "row",
       isDisabled = false,
+      iconPlacement = "left",
       size,
       variant,
       icon,
@@ -2220,6 +2272,7 @@
       "children",
       "direction",
       "isDisabled",
+      "iconPlacement",
       "size",
       "variant",
       "icon",
@@ -2233,6 +2286,7 @@
         isMulti,
         variant,
         isDisabled,
+        iconPlacement,
         icon,
         size
       }, child.props)) : child
@@ -2291,6 +2345,7 @@
       children,
       direction,
       isRequired,
+      iconPlacement = "left",
       onChange: onChangeCallback = ramda.identity,
       validate
     } = _b, rest = __objRest$$(_b, [
@@ -2299,6 +2354,7 @@
       "children",
       "direction",
       "isRequired",
+      "iconPlacement",
       "onChange",
       "validate"
     ]);
@@ -2320,7 +2376,8 @@
             onChangeCallback(e);
           },
           direction,
-          value
+          value,
+          iconPlacement
         }, rest),
         children
       )
@@ -5943,7 +6000,7 @@
 
   function SortableList({
     children,
-    items: sortableItems,
+    items,
     collisionDetection,
     createKey = ramda.identity,
     strategy,
@@ -5955,7 +6012,6 @@
     dblClickThreshold = 300,
     disableDrag = false
   }) {
-    const [items, setItems] = React.useState(sortableItems);
     const [activeItem, setActiveItem] = React.useState(null);
     const identifierItems = React.useMemo(() => ramda.map(createKey, items), [items]);
     const customSensors = core.useSensors(
@@ -5973,15 +6029,12 @@
     const handleDragEnd = (event) => {
       const { active, over } = event;
       if (active && over && active.id !== over.id) {
-        setItems((prev) => {
-          const prevIds = ramda.map(createKey, prev);
-          const oldIndex = ramda.indexOf(active.id, prevIds);
-          const newIndex = ramda.indexOf(over.id, prevIds);
-          onMovedItem({ item: prev[oldIndex], oldIndex, newIndex });
-          const newItems = sortable.arrayMove(prev, oldIndex, newIndex);
-          onChange(newItems);
-          return newItems;
-        });
+        const prevIds = ramda.map(createKey, items);
+        const oldIndex = ramda.indexOf(active.id, prevIds);
+        const newIndex = ramda.indexOf(over.id, prevIds);
+        onMovedItem({ item: items[oldIndex], oldIndex, newIndex });
+        const newItems = sortable.arrayMove(items, oldIndex, newIndex);
+        onChange(newItems);
       }
     };
     return /* @__PURE__ */ React.createElement(
@@ -10877,35 +10930,45 @@
       isRequired,
       validate,
       onChange: onChangeCallback = ramda.identity,
-      direction = "row"
+      direction = "row",
+      labelPosition = "right"
     } = _b, rest = __objRest$d(_b, [
       "name",
       "label",
       "isRequired",
       "validate",
       "onChange",
-      "direction"
+      "direction",
+      "labelPosition"
     ]);
     return /* @__PURE__ */ React.createElement(react.Box, { w: label ? "full" : "fit-content" }, /* @__PURE__ */ React.createElement(
       Field,
       {
         name,
-        label,
+        label: "",
         isRequired,
         direction,
         validate
       },
       ({ onChange, value }) => /* @__PURE__ */ React.createElement(
-        Switch,
-        __spreadValues$i({
-          name,
-          onChange: (e) => {
-            onChange(e);
-            onChangeCallback(e);
-          },
-          value,
-          "data-testid": "switch-field-test-id"
-        }, rest)
+        react.Flex,
+        {
+          gap: 2,
+          direction: labelPosition === "left" ? "row-reverse" : "row"
+        },
+        /* @__PURE__ */ React.createElement(
+          Switch,
+          __spreadValues$i({
+            name,
+            onChange: (e) => {
+              onChange(e);
+              onChangeCallback(e);
+            },
+            value,
+            "data-testid": "switch-field-test-id"
+          }, rest)
+        ),
+        label && /* @__PURE__ */ React.createElement(Label$1, { htmlFor: name }, label)
       )
     ));
   };
@@ -12526,6 +12589,10 @@
     enumerable: true,
     get: function () { return react.useEditableState; }
   });
+  Object.defineProperty(exports, 'useInterval', {
+    enumerable: true,
+    get: function () { return react.useInterval; }
+  });
   Object.defineProperty(exports, 'useMediaQuery', {
     enumerable: true,
     get: function () { return react.useMediaQuery; }
@@ -12610,6 +12677,10 @@
     enumerable: true,
     get: function () { return chakraReactSelect.CreatableSelect; }
   });
+  Object.defineProperty(exports, 'dndUseInterval', {
+    enumerable: true,
+    get: function () { return core.useInterval; }
+  });
   exports.Accordion = Accordion;
   exports.AccordionButton = AccordionButton;
   exports.AccordionItem = AccordionItem;
@@ -12740,6 +12811,8 @@
   exports.trimFormValues = trimFormValues;
   exports.useArrowFocus = useArrowFocus;
   exports.useCurrentTheme = useCurrentTheme;
+  exports.useDebounce = useDebounce;
+  exports.useLoadingMessage = useLoadingMessage;
   exports.useOverflowGroup = useOverflowGroup;
   exports.useSelectCallbacks = useSelectCallbacks;
   exports.useSetValueRefreshed = useSetValueRefreshed;