@northlight/ui 2.20.0 → 2.21.0

package/dist/es/northlight.d.ts

@@ -420,23 +420,24 @@ declare const AvatarGroup: ({ children, max, spacing, ...rest }: AvatarGroupProp
  *
  * @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>
+ * +
+ * const colors = ["gray", "mediatoolBlue", "blue", "red", "green",
+ * "orange", "yellow", "teal", "purple", "pink"]
+ * const variants = ["solid", "outline", "subtle"]
+ * const Example = () => {
+ *     return <Stack>
+ *         { colors.map((color) => (
+ *         <HStack spacing={ 4 }>
+ *          {
+ *              variants.map((variant) => (
+ *                    <Badge colorScheme={color} variant={variant}>{variant} Badge</Badge>
+ *              ))
+ *          }
+ *         </HStack>
+ *         ))}
+ *     </Stack>
+ * }
+ * render(<Example/>)
  * ?)
  */
 declare const Badge: (props: BadgeProps & React__default.RefAttributes<HTMLDivElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
@@ -1597,7 +1598,7 @@ declare const DropZone: ({ sx, name, children, ...rest }: DropZoneProps) => JSX.
 
 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;
+declare function MultiSort<itemKeys extends string | number | symbol>({ items, onChange, children, collisionDetection, sensors, }: MultiSortProps<itemKeys>): JSX.Element;
 
 /**
  * Util component to render sortable items under sortable context
@@ -1681,7 +1682,7 @@ interface HeadingProps extends HeadingProps$1 {
  * <H1>Heading 1</H1>
  * ?)
  */
-declare const H1: ({ children, sx, ...rest }: HeadingProps) => JSX.Element;
+declare const H1: (props: HeadingProps & React__default.RefAttributes<HTMLHeadingElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 /**
  * @see {@link https://northlight.dev/reference/h2}
@@ -1691,7 +1692,7 @@ declare const H1: ({ children, sx, ...rest }: HeadingProps) => JSX.Element;
  * ?)
  *
  */
-declare const H2: ({ children, sx, ...rest }: HeadingProps) => JSX.Element;
+declare const H2: (props: HeadingProps & React__default.RefAttributes<HTMLHeadingElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 /**
  * @see {@link https://northlight.dev/reference/h3}
@@ -1700,7 +1701,7 @@ declare const H2: ({ children, sx, ...rest }: HeadingProps) => JSX.Element;
  * <H3>Heading 3</H3>
  * ?)
  */
-declare const H3: ({ children, sx, ...rest }: HeadingProps) => JSX.Element;
+declare const H3: (props: HeadingProps & React__default.RefAttributes<HTMLHeadingElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 /**
  * @see {@link https://northlight.dev/reference/h4}
@@ -1709,7 +1710,7 @@ declare const H3: ({ children, sx, ...rest }: HeadingProps) => JSX.Element;
  * <H4>Heading 4</H4>
  * ?)
  */
-declare const H4: ({ children, sx, ...rest }: HeadingProps) => JSX.Element;
+declare const H4: (props: HeadingProps & React__default.RefAttributes<HTMLHeadingElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 /**
  * @see {@link https://northlight.dev/reference/h5}
@@ -1718,7 +1719,7 @@ declare const H4: ({ children, sx, ...rest }: HeadingProps) => JSX.Element;
  * <H5>Heading 5</H5>
  * ?)
  */
-declare const H5: ({ children, sx, ...rest }: HeadingProps) => JSX.Element;
+declare const H5: (props: HeadingProps & React__default.RefAttributes<HTMLHeadingElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 /**
  * @see {@link https://northlight.dev/reference/h6}
@@ -1727,7 +1728,7 @@ declare const H5: ({ children, sx, ...rest }: HeadingProps) => JSX.Element;
  * <H6>Heading 6</H6>
  * ?)
  */
-declare const H6: ({ children, sx, ...rest }: HeadingProps) => JSX.Element;
+declare const H6: (props: HeadingProps & React__default.RefAttributes<HTMLHeadingElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 interface PProps extends TextProps {
     variant?: '14' | '16';
@@ -3022,22 +3023,74 @@ interface TagGroupProps extends StackProps {
 }
 
 /**
+ * Tag component is used for items that need to be labeled,
+ * categorized, or organized using keywords that describe them.
  * @see TagGroup
  * @see {@link https://northlight.dev/reference/tag}
  *
  * @example
- * (? <Tag>Brand 1</Tag> ?)
+ * (?
+ * <Tag>Hello</Tag>
+ * ?)
  *
  * @example
  * (?
- *   <Tag>
-    <TagLeftIcon>
-      <Icon as={ StackSolid } />
-    </TagLeftIcon>
-    <TagLabel>Left Icon</TagLabel>
-  </Tag>
+ * +
+ * const colors = ["mediatoolBlue", "blue", "gray", "red", "green",
+ * "orange", "yellow", "teal", "purple", "pink"]
+ * const variants = ["solid", "subtle"]
+ * const Example = () =>  {
+ *    return <Stack>
+ *        { colors.map((color) => (
+ *    <HStack spacing={ 4 }>
+ *        {
+ *      variants.map((variant) => (
+ *      <HStack spacing={ 4 }>
+ *                 <Tag size="sm" variant={variant} colorScheme={color}>
+ *                    <TagLeftIcon size="xs">
+*                       <Icon as={ MediatoolLogoDuo } />
+ *                    </TagLeftIcon>
+ *                    <TagLabel>
+ *                      Hello
+ *                    </TagLabel>
+ *                    <TagRightIcon size="xs">
+ *                      <Icon as={ MediatoolLogoDuo } />
+ *                    </TagRightIcon>
+ *                  </Tag>
+ *                  <Tag size="md" variant={variant} colorScheme={color}>
+ *                    <TagLeftIcon size="md">
+ *                       <Icon as={ MediatoolLogoDuo } />
+ *                    </TagLeftIcon>
+ *                    <TagLabel>
+ *                      Hello
+ *                    </TagLabel>
+ *                    <TagRightIcon size="md">
+ *                      <Icon as={ MediatoolLogoDuo } />
+ *                    </TagRightIcon>
+ *                  </Tag>
+ *                  <Tag size="lg" variant={variant} colorScheme={color}>
+ *                    <TagLeftIcon size="lg">
+ *                       <Icon as={ MediatoolLogoDuo } />
+ *                    </TagLeftIcon>
+ *                    <TagLabel>
+ *                      Hello
+ *                    </TagLabel>
+ *                    <TagRightIcon size="lg">
+ *                      <Icon as={ MediatoolLogoDuo } />
+ *                    </TagRightIcon>
+ *                  </Tag>
+ *         </HStack>
+ *      ))
+ *      }
+ *       </HStack>
+ *    ))
+ *    }
+ *    </Stack>
+ * }
+ *  render(<Example/>)
  * ?)
  *
+ *
 */
 declare const Tag: (props: TagProps & React__default.RefAttributes<HTMLSpanElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 

package/dist/es/northlight.js

@@ -1,4 +1,4 @@
-import { Accordion as Accordion$1, AccordionButton as AccordionButton$1, AccordionPanel as AccordionPanel$1, AccordionItem as AccordionItem$1, useInterval, useMediaQuery, useToken as useToken$1, Box, useMultiStyleConfig, chakra, Alert as Alert$2, AspectRatio as AspectRatio$1, forwardRef, useStyleConfig, Icon as Icon$2, Heading, Text, FormLabel as FormLabel$1, VisuallyHidden, HStack, Badge as Badge$1, Spinner as Spinner$2, Button as Button$2, Checkbox as Checkbox$2, FormControl, Stack, FormErrorMessage, Flex, IconButton as IconButton$1, Popover as Popover$1, useDisclosure, useBoolean, PopoverTrigger, PopoverContent, PopoverHeader, PopoverBody, SimpleGrid, SlideFade as SlideFade$1, keyframes, extendTheme, Table as Table$2, Thead, Tbody, Tr, Select as Select$2, PopoverAnchor, InputGroup, InputRightElement, Link as Link$1, Tooltip as Tooltip$2, Circle, Center, Fade as Fade$1, ScaleFade as ScaleFade$1, Slide as Slide$1, Collapse as Collapse$1, Portal, CloseButton as CloseButton$1, Radio as Radio$2, RadioGroup as RadioGroup$1, Tag as Tag$2, TagLabel, TagRightIcon, useEditableControls, useEditableState, Editable, InputLeftElement, Input as Input$1, EditablePreview, EditableInput, Modal as Modal$2, ModalOverlay, ModalContent, ModalCloseButton, ModalBody as ModalBody$1, ModalHeader, Slider, SliderTrack, SliderFilledTrack, SliderThumb, ModalFooter, VStack, Progress, Image as Image$1, ChakraProvider, Menu as Menu$2, NumberInputStepper as NumberInputStepper$1, Divider, NumberIncrementStepper, NumberDecrementStepper, NumberInput as NumberInput$2, NumberInputField as NumberInputField$1, PinInput as PinInput$2, Switch as Switch$2, TabPanel as TabPanel$1, Tabs as Tabs$2, Textarea as Textarea$2, useToast as useToast$1, TagLeftIcon, AlertTitle, AlertDescription, Tab, TabList, useClipboard, Grid, GridItem } from '@chakra-ui/react';
+import { Accordion as Accordion$1, AccordionButton as AccordionButton$1, AccordionPanel as AccordionPanel$1, AccordionItem as AccordionItem$1, useInterval, useMediaQuery, useToken as useToken$1, Box, useMultiStyleConfig, chakra, Alert as Alert$2, AspectRatio as AspectRatio$1, forwardRef, useStyleConfig, Icon as Icon$2, Heading, Text, FormLabel as FormLabel$1, VisuallyHidden, HStack, Badge as Badge$2, Spinner as Spinner$2, Button as Button$2, Checkbox as Checkbox$2, FormControl, Stack, FormErrorMessage, Flex, IconButton as IconButton$1, Popover as Popover$1, useDisclosure, useBoolean, PopoverTrigger, PopoverContent, PopoverHeader, PopoverBody, SimpleGrid, SlideFade as SlideFade$1, keyframes, extendTheme, Table as Table$2, Thead, Tbody, Tr, Select as Select$2, PopoverAnchor, InputGroup, InputRightElement, Link as Link$1, Tooltip as Tooltip$2, Circle, Center, Fade as Fade$1, ScaleFade as ScaleFade$1, Slide as Slide$1, Collapse as Collapse$1, Portal, CloseButton as CloseButton$1, Radio as Radio$2, RadioGroup as RadioGroup$1, Tag as Tag$2, TagLabel, TagRightIcon, useEditableControls, useEditableState, Editable, InputLeftElement, Input as Input$1, EditablePreview, EditableInput, Modal as Modal$2, ModalOverlay, ModalContent, ModalCloseButton, ModalBody as ModalBody$1, ModalHeader, Slider, SliderTrack, SliderFilledTrack, SliderThumb, ModalFooter, VStack, Progress, Image as Image$1, ChakraProvider, Menu as Menu$2, NumberInputStepper as NumberInputStepper$1, Divider, NumberIncrementStepper, NumberDecrementStepper, NumberInput as NumberInput$2, NumberInputField as NumberInputField$1, PinInput as PinInput$2, Switch as Switch$2, TabPanel as TabPanel$1, Tabs as Tabs$2, Textarea as Textarea$2, useToast as useToast$1, TagLeftIcon, AlertTitle, AlertDescription, Tab, TabList, useClipboard, Grid, GridItem } from '@chakra-ui/react';
 export { AbsoluteCenter, AccordionIcon, AlertDescription, AlertDialog, AlertDialogBody, AlertDialogCloseButton, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertIcon, AlertTitle, Box, 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, Stat, StatArrow, StatGroup, StatHelpText, StatLabel, StatNumber, TabIndicator as StepIndicator, TabPanels as StepPanels, Tab, TabIndicator, TabList, TabPanels, TableCaption, TableContainer, 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 React, { useState, useEffect, useRef, isValidElement, cloneElement, Children, createContext, useContext, forwardRef as forwardRef$1, useImperativeHandle, memo, useMemo, useCallback } from 'react';
 import { CreatableSelect, chakraComponents, AsyncSelect, Select as Select$3 } from 'chakra-react-select';
@@ -1027,7 +1027,7 @@ var __objRest$1A = (source, exclude) => {
     }
   return target;
 };
-const H1$1 = (_a) => {
+const H1$1 = forwardRef$1((_a, ref) => {
   var _b = _a, {
     children,
     sx = {}
@@ -1040,11 +1040,12 @@ const H1$1 = (_a) => {
     Heading,
     __spreadValues$23({
       as: "h1",
-      sx: styles
+      sx: styles,
+      ref
     }, rest),
     children
   );
-};
+});
 
 var __defProp$22 = Object.defineProperty;
 var __getOwnPropSymbols$22 = Object.getOwnPropertySymbols;
@@ -1074,7 +1075,7 @@ var __objRest$1z = (source, exclude) => {
     }
   return target;
 };
-const H2$1 = (_a) => {
+const H2$1 = forwardRef$1((_a, ref) => {
   var _b = _a, {
     children,
     sx = {}
@@ -1087,11 +1088,12 @@ const H2$1 = (_a) => {
     Heading,
     __spreadValues$22({
       as: "h2",
-      sx: styles
+      sx: styles,
+      ref
     }, rest),
     children
   );
-};
+});
 
 var __defProp$21 = Object.defineProperty;
 var __getOwnPropSymbols$21 = Object.getOwnPropertySymbols;
@@ -1121,7 +1123,7 @@ var __objRest$1y = (source, exclude) => {
     }
   return target;
 };
-const H3$1 = (_a) => {
+const H3$1 = forwardRef$1((_a, ref) => {
   var _b = _a, {
     children,
     sx = {}
@@ -1134,11 +1136,12 @@ const H3$1 = (_a) => {
     Heading,
     __spreadValues$21({
       as: "h3",
-      sx: styles
+      sx: styles,
+      ref
     }, rest),
     children
   );
-};
+});
 
 var __defProp$20 = Object.defineProperty;
 var __getOwnPropSymbols$20 = Object.getOwnPropertySymbols;
@@ -1168,7 +1171,7 @@ var __objRest$1x = (source, exclude) => {
     }
   return target;
 };
-const H4$1 = (_a) => {
+const H4$1 = forwardRef$1((_a, ref) => {
   var _b = _a, {
     children,
     sx = {}
@@ -1181,11 +1184,12 @@ const H4$1 = (_a) => {
     Heading,
     __spreadValues$20({
       as: "h4",
-      sx: styles
+      sx: styles,
+      ref
     }, rest),
     children
   );
-};
+});
 
 var __defProp$1$ = Object.defineProperty;
 var __getOwnPropSymbols$1$ = Object.getOwnPropertySymbols;
@@ -1215,7 +1219,7 @@ var __objRest$1w = (source, exclude) => {
     }
   return target;
 };
-const H5$1 = (_a) => {
+const H5$1 = forwardRef$1((_a, ref) => {
   var _b = _a, {
     children,
     sx = {}
@@ -1228,11 +1232,12 @@ const H5$1 = (_a) => {
     Heading,
     __spreadValues$1$({
       as: "h5",
-      sx: styles
+      sx: styles,
+      ref
     }, rest),
     children
   );
-};
+});
 
 var __defProp$1_ = Object.defineProperty;
 var __getOwnPropSymbols$1_ = Object.getOwnPropertySymbols;
@@ -1262,7 +1267,7 @@ var __objRest$1v = (source, exclude) => {
     }
   return target;
 };
-const H6$1 = (_a) => {
+const H6$1 = forwardRef$1((_a, ref) => {
   var _b = _a, {
     children,
     sx = {}
@@ -1275,11 +1280,12 @@ const H6$1 = (_a) => {
     Heading,
     __spreadValues$1_({
       as: "h6",
-      sx: styles
+      sx: styles,
+      ref
     }, rest),
     children
   );
-};
+});
 
 var __defProp$1Z = Object.defineProperty;
 var __getOwnPropSymbols$1Z = Object.getOwnPropertySymbols;
@@ -1784,7 +1790,7 @@ var __spreadValues$1Q = (a, b) => {
     }
   return a;
 };
-const Badge = forwardRef$1((props, ref) => /* @__PURE__ */ React.createElement(Badge$1, __spreadValues$1Q({ ref }, props)));
+const Badge$1 = forwardRef$1((props, ref) => /* @__PURE__ */ React.createElement(Badge$2, __spreadValues$1Q({ ref }, props)));
 
 var __defProp$1P = Object.defineProperty;
 var __getOwnPropSymbols$1P = Object.getOwnPropertySymbols;
@@ -3062,6 +3068,7 @@ const Button = {
   variants: {
     default: ({ theme: { colors: color } }) => ({
       bgColor: color.background.button.default,
+      color: color.text.button.default,
       _hover: {
         bgColor: color.background.button["default-hover"]
       },
@@ -3084,6 +3091,7 @@ const Button = {
     }),
     success: ({ theme: { colors: color } }) => ({
       bgColor: color.background.button.success,
+      color: color.text.button.success,
       _hover: {
         bg: color.background.button["success-hover"],
         _disabled: {
@@ -3136,6 +3144,15 @@ const Button = {
         bgColor: color.background.button["link-active"]
       }
     }),
+    outline: ({ theme: { colors: color } }) => ({
+      color: color.text.default,
+      _hover: {
+        bg: color.background.button["ghost-hover"]
+      },
+      _active: {
+        bg: color.background.button["ghost-active"]
+      }
+    }),
     ghost: ({ theme: { colors: color } }) => ({
       color: color.text.default,
       bgColor: color.background.button.ghost,
@@ -3892,16 +3909,16 @@ const Tag$1 = {
     }
   },
   variants: {
-    solid: ({ bgColor, colorScheme }) => ({
+    solid: ({ theme: { colors }, colorScheme }) => ({
       container: {
-        bgColor: bgColor != null ? bgColor : colorScheme,
-        color: getContrastColor(bgColor != null ? bgColor : useToken$1("colors", colorScheme))
+        bgColor: colors[colorScheme] && colors[colorScheme][500] ? colors[colorScheme][500] : colorScheme,
+        color: colorScheme === "yellow" ? "mono.black" : "mono.white"
       }
     }),
-    subtle: () => ({
+    subtle: ({ theme: { colors }, colorScheme }) => ({
       container: {
-        bgColor: useToken$1("colors", "background.tag.subtle"),
-        color: "text.default"
+        bgColor: colors[colorScheme] && colors[colorScheme][100] ? colors[colorScheme][100] : colorScheme,
+        color: "mono.black"
       }
     }),
     ai: {
@@ -5647,10 +5664,39 @@ const Menu$1 = {
   }
 };
 
+const Badge = {
+  baseStyle: ({ colorScheme, theme: { colors } }) => {
+    const bgColor = colorScheme === "mediatoolBlue" ? colors[colorScheme][100] : colors[colorScheme] && colors[colorScheme][100];
+    const textColor = colorScheme === "mediatoolBlue" ? colors[colorScheme][800] : colors[colorScheme] && colors[colorScheme][800];
+    return {
+      bgColor,
+      color: textColor
+    };
+  },
+  variants: {
+    solid: ({ colorScheme, theme: { colors } }) => {
+      const bgColor = colorScheme === "mediatoolBlue" ? colors[colorScheme][500] : colors[colorScheme] && colors[colorScheme][500];
+      const textColor = colorScheme === "yellow" ? "mono.black" : "mono.white";
+      return {
+        bgColor,
+        color: textColor
+      };
+    },
+    outline: ({ colorScheme, theme: { colors } }) => {
+      const textColor = colorScheme === "mediatoolBlue" ? colors[colorScheme][500] : colors[colorScheme] && colors[colorScheme][700];
+      return {
+        bgColor: "mono.transparent",
+        color: textColor
+      };
+    }
+  }
+};
+
 var components = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Alert: Alert,
   Avatar: Avatar,
+  Badge: Badge,
   Blinker: Blinker,
   Blockquote: Blockquote,
   Breadcrumb: Breadcrumb,
@@ -8736,15 +8782,12 @@ var __objRest$K = (source, exclude) => {
 };
 function getComponents() {
   return {
+    Menu: (props) => /* @__PURE__ */ React.createElement(Box, { "data-testid": "select-menu-wrapper-test-id" }, /* @__PURE__ */ React.createElement(chakraComponents.Menu, __spreadValues$W({}, props), props.children)),
     DropdownIndicator: (props) => props.selectProps.icon ? /* @__PURE__ */ React.createElement(chakraComponents.DropdownIndicator, __spreadValues$W({}, props), /* @__PURE__ */ React.createElement(Icon$1, { as: props.selectProps.icon })) : /* @__PURE__ */ React.createElement(chakraComponents.DropdownIndicator, __spreadValues$W({}, props)),
     Option: (props) => props.selectProps.customOption ? /* @__PURE__ */ React.createElement(chakraComponents.Option, __spreadValues$W({}, props), props.selectProps.customOption(props.data)) : /* @__PURE__ */ React.createElement(chakraComponents.Option, __spreadValues$W({}, props)),
     MultiValueContainer: (props) => props.selectProps.customTag ? /* @__PURE__ */ React.createElement(chakraComponents.MultiValueContainer, __spreadValues$W({}, props), props.selectProps.customTag(props.data)) : /* @__PURE__ */ React.createElement(chakraComponents.MultiValueContainer, __spreadValues$W({}, props)),
     Control: (_a) => {
-      var _b = _a, {
-        children
-      } = _b, props = __objRest$K(_b, [
-        "children"
-      ]);
+      var _b = _a, { children } = _b, props = __objRest$K(_b, ["children"]);
       return props.selectProps.leftComponent ? /* @__PURE__ */ React.createElement(chakraComponents.Control, __spreadValues$W({}, props), /* @__PURE__ */ React.createElement(HStack, { w: "full", pl: "2" }, props.selectProps.leftComponent, /* @__PURE__ */ React.createElement(HStack, { w: "full", justify: "space-between" }, children))) : /* @__PURE__ */ React.createElement(chakraComponents.Control, __spreadValues$W({}, props), children);
     }
   };
@@ -9490,25 +9533,18 @@ var __spreadValues$J = (a, b) => {
 };
 var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
 function MultiSort({
-  items: sortableItems,
+  items,
   onChange = () => {
   },
   children,
   collisionDetection,
   sensors
 }) {
-  const [items, setItems] = useState(sortableItems);
   const [activeItem, setActiveItem] = useState(null);
   const moveBetweenContainers = (activeContainerName, activeIndex, overContainerName, overIndex, item) => __spreadProps$7(__spreadValues$J({}, items), {
     [activeContainerName]: remove(activeIndex, 1, items[activeContainerName]),
     [overContainerName]: insert(overIndex, item, items[overContainerName])
   });
-  useEffect(() => {
-    onChange(items);
-  }, [items]);
-  useEffect(() => {
-    setItems(sortableItems);
-  }, [sortableItems]);
   const customSensors = useSensors(
     useSensor(PointerSensor),
     useSensor(KeyboardSensor, {
@@ -9535,46 +9571,40 @@ function MultiSort({
   const handleDragOver = (e) => {
     const { activeContainerName, overContainerName, id, overId } = getContainers(e);
     if (!(!activeContainerName || !overContainerName || activeContainerName === overContainerName)) {
-      setItems((prev) => {
-        const activeIndex = indexOf(id, prev[activeContainerName]);
-        const overIndex = indexOf(overId, prev[overContainerName]);
-        return moveBetweenContainers(
-          activeContainerName,
-          activeIndex,
-          overContainerName,
-          overIndex,
-          id
-        );
-      });
+      const activeIndex = indexOf(id, items[activeContainerName]);
+      const overIndex = indexOf(overId, items[overContainerName]);
+      onChange(moveBetweenContainers(
+        activeContainerName,
+        activeIndex,
+        overContainerName,
+        overIndex,
+        id
+      ));
     }
   };
   const handleDragEnd = (e) => {
     const { activeContainerName, overContainerName, id, overId, active } = getContainers(e);
-    setItems((prev) => {
-      if (!activeContainerName || !overContainerName)
-        return prev;
-      const activeIndex = indexOf(id, prev[activeContainerName]);
-      const overIndex = indexOf(overId, prev[overContainerName]);
-      let newItems;
-      if (activeContainerName === overContainerName) {
-        newItems = __spreadProps$7(__spreadValues$J({}, prev), {
-          [overContainerName]: arrayMove(
-            prev[overContainerName],
-            activeIndex,
-            overIndex
-          )
-        });
-      } else {
-        newItems = moveBetweenContainers(
-          activeContainerName,
+    if (!activeContainerName || !overContainerName)
+      return;
+    const activeIndex = indexOf(id, items[activeContainerName]);
+    const overIndex = indexOf(overId, items[overContainerName]);
+    if (activeContainerName === overContainerName) {
+      onChange(__spreadProps$7(__spreadValues$J({}, items), {
+        [overContainerName]: arrayMove(
+          items[overContainerName],
           activeIndex,
-          overContainerName,
-          overIndex,
-          active == null ? void 0 : active.id
-        );
-      }
-      return newItems;
-    });
+          overIndex
+        )
+      }));
+    } else {
+      onChange(moveBetweenContainers(
+        activeContainerName,
+        activeIndex,
+        overContainerName,
+        overIndex,
+        active == null ? void 0 : active.id
+      ));
+    }
   };
   return /* @__PURE__ */ React.createElement(
     DragAndDrop,
@@ -13400,5 +13430,5 @@ const StepStack = (_a) => {
   ));
 };
 
-export { Accordion, AccordionButton, AccordionItem, AccordionPanel, Alert$1 as Alert, AspectRatio, AsyncError, Avatar$1 as Avatar, AvatarGroup, Badge, Blinker$1 as Blinker, Blockquote$1 as Blockquote, Button$1 as Button, Capitalized$1 as Capitalized, Carousel, Checkbox$1 as Checkbox, CheckboxField, Clickable, ClipboardInput, Collapse, ColorPicker$1 as ColorPicker, ColorPickerField, CustomTheme, DatePicker, DatePickerField, DateRangePicker, DateRangePickerField, DragAndDrop, DragHandle, DragItem, Draggable, DropZone, Droppable, EditableText, Fade, FastGrid, FastList, Field, FilePicker, FilePickerField, FlipButton$1 as FlipButton, FlipButtonGroup, FlipButtonGroupField, Form, FormLabel, FormattedNumberInput, FormattedNumberInputField, H1$1 as H1, H2$1 as H2, H3$1 as H3, H4$1 as H4, H5$1 as H5, H6$1 as H6, Icon$1 as Icon, IconButton, IntentButton, Label$1 as Label, Lead$1 as Lead, MaskedTextInput, MediatoolThemeProvider, Menu, Modal, ModalBase, ModalBody, MultiFileList, MultiFilePicker, MultiFilePickerField, MultiFileUploader, MultiSort, NotificationIconButton, NumVal$1 as NumVal, NumberInput, NumberInputField, OrganizationLogo, OverflowGroup, P$1 as P, PaneDivider, PaneItem, PinInput, Popover, ProgressBar, Radio, RadioGroup, RadioGroupField, ResizeHandle, ScaleFade, SearchBar, SearchBarField, Select, SelectField, Slide, SlideFade, Small$1 as Small, Sortable, SortableContainer, SortableItem, SortableList, Spinner$1 as Spinner, SplitPane, StatusBlock, StatusPin, Step, StepList, StepPanel, StepStack, Steps, Switch, SwitchField, TabPanel, Table, Tabs, Tag, TagGroup, TagsInput, TextField, Textarea, TextareaField, Tiny$1 as Tiny, Toast, Toolbox, ToolboxContent, ToolboxFooter, ToolboxHeader, Tooltip, 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$1 as Alert, AspectRatio, AsyncError, Avatar$1 as Avatar, AvatarGroup, Badge$1 as Badge, Blinker$1 as Blinker, Blockquote$1 as Blockquote, Button$1 as Button, Capitalized$1 as Capitalized, Carousel, Checkbox$1 as Checkbox, CheckboxField, Clickable, ClipboardInput, Collapse, ColorPicker$1 as ColorPicker, ColorPickerField, CustomTheme, DatePicker, DatePickerField, DateRangePicker, DateRangePickerField, DragAndDrop, DragHandle, DragItem, Draggable, DropZone, Droppable, EditableText, Fade, FastGrid, FastList, Field, FilePicker, FilePickerField, FlipButton$1 as FlipButton, FlipButtonGroup, FlipButtonGroupField, Form, FormLabel, FormattedNumberInput, FormattedNumberInputField, H1$1 as H1, H2$1 as H2, H3$1 as H3, H4$1 as H4, H5$1 as H5, H6$1 as H6, Icon$1 as Icon, IconButton, IntentButton, Label$1 as Label, Lead$1 as Lead, MaskedTextInput, MediatoolThemeProvider, Menu, Modal, ModalBase, ModalBody, MultiFileList, MultiFilePicker, MultiFilePickerField, MultiFileUploader, MultiSort, NotificationIconButton, NumVal$1 as NumVal, NumberInput, NumberInputField, OrganizationLogo, OverflowGroup, P$1 as P, PaneDivider, PaneItem, PinInput, Popover, ProgressBar, Radio, RadioGroup, RadioGroupField, ResizeHandle, ScaleFade, SearchBar, SearchBarField, Select, SelectField, Slide, SlideFade, Small$1 as Small, Sortable, SortableContainer, SortableItem, SortableList, Spinner$1 as Spinner, SplitPane, StatusBlock, StatusPin, Step, StepList, StepPanel, StepStack, Steps, Switch, SwitchField, TabPanel, Table, Tabs, Tag, TagGroup, TagsInput, TextField, Textarea, TextareaField, Tiny$1 as Tiny, Toast, Toolbox, ToolboxContent, ToolboxFooter, ToolboxHeader, Tooltip, 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 };
 //# sourceMappingURL=northlight.js.map