@northlight/ui 2.35.3 → 2.36.0

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, extendTheme, 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, CheckboxGroup, IconButton as IconButton$1, Popover as Popover$2, Portal, useDisclosure, useBoolean, PopoverTrigger, PopoverContent, PopoverHeader, PopoverBody, SimpleGrid, SlideFade as SlideFade$1, Table as Table$2, Thead, Tr, Tbody, Select as Select$2, PopoverAnchor, InputGroup, InputRightElement, Link as Link$1, Spacer, useOutsideClick, Tooltip as Tooltip$2, VStack, Circle, Center, Fade as Fade$1, ScaleFade as ScaleFade$1, Slide as Slide$1, Collapse as Collapse$1, 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, 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, AlertTitle, AlertDescription, Tab, TabList, useClipboard, Grid, GridItem, theme as theme$1 } 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, extendTheme, 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, Flex, Spinner as Spinner$2, Button as Button$2, Checkbox as Checkbox$2, FormControl, Stack, FormErrorMessage, CheckboxGroup, IconButton as IconButton$1, Popover as Popover$2, Portal, useDisclosure, useBoolean, PopoverTrigger, PopoverContent, PopoverHeader, PopoverBody, SimpleGrid, SlideFade as SlideFade$1, Table as Table$2, Thead, Tr, Tbody, Select as Select$2, PopoverAnchor, InputGroup, InputRightElement, Link as Link$1, Spacer, useOutsideClick, Tooltip as Tooltip$2, VStack, Circle, Center, Fade as Fade$1, ScaleFade as ScaleFade$1, Slide as Slide$1, Collapse as Collapse$1, 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, 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, AlertTitle, AlertDescription, Tab, TabList, useClipboard, Grid, GridItem, theme as theme$1 } 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, Mark, 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, 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';
@@ -12,7 +12,8 @@ import { palette, WebappComponentsTokensSet, WebappSystemTokensSet, typography,
 import { keyframes } from '@emotion/react';
 export { keyframes } from '@emotion/react';
 import { randomColor, cssVar, mode } from '@chakra-ui/theme-tools';
-import { UserSquareDuo, BusinessContactDuo, CheckDuo, ChevronUpDuo, ChevronDownDuo, ColorsDuo, CheckSolid, CalendarDuo, ChevronLeftSolid, ChevronRightSolid, XCloseSolid, CheckCircleSolid, AlertTriangleSolid, AlertCircleSolid, AlertOctagonSolid, InfoSolid, BrightnessSolid, HelpCircleSolid, TrashDuo, SearchDuo, DotsMatrixSolid, DragDuo, EditDuo, ZoomInDuo, Image03Solid, UploadCloudSolid, FileBlankDuo, EditBoxDuo, DownloadDuo, TrashFullDuo, Image03Duo, ChevronUpSolid, ChevronDownSolid, BellSolid, CopyDuo, PlusSolid } from '@northlight/icons';
+import * as NorthlightIcons from '@northlight/icons';
+import { UserSquareDuo, BusinessContactDuo, MediatoolLogoSolid, CheckDuo, ChevronUpDuo, ChevronDownDuo, ColorsDuo, CheckSolid, CalendarDuo, ChevronLeftSolid, ChevronRightSolid, XCloseSolid, CheckCircleSolid, AlertTriangleSolid, AlertCircleSolid, AlertOctagonSolid, InfoSolid, BrightnessSolid, HelpCircleSolid, TrashDuo, SearchDuo, DotsMatrixSolid, DragDuo, EditDuo, ZoomInDuo, Image03Solid, UploadCloudSolid, FileBlankDuo, EditBoxDuo, DownloadDuo, TrashFullDuo, Image03Duo, ChevronUpSolid, ChevronDownSolid, BellSolid, CopyDuo, PlusSolid } from '@northlight/icons';
 import { joiResolver } from '@hookform/resolvers/joi';
 import { useCheckboxGroup, useCheckboxGroupItem } from '@react-aria/checkbox';
 import { useRadioGroup, useRadio } from '@react-aria/radio';
@@ -1046,8 +1047,9 @@ const Input = {
         _focusVisible: {
           bgColor: color.background.input["outline-focus"],
           borderColor: color.border.input.focus,
+          boxShadow: `inset 0 0 0 1px ${color.border.input.focus}`,
           _invalid: {
-            boxShadow: `0 0 0 1px ${color.border.input.error}`,
+            boxShadow: `inset 0 0 0 1px ${color.border.input.error}`,
             bgColor: color.background.input["outline-error"],
             borderColor: color.border.input.error
           }
@@ -1058,7 +1060,8 @@ const Input = {
         },
         _invalid: {
           bgColor: color.background.input["outline-error"],
-          borderColor: color.border.input.error
+          borderColor: color.border.input.error,
+          boxShadow: `inset 0 0 0 1px ${color.border.input.error}`
         },
         _disabled: {
           bgColor: color.background.input["outline-disabled"],
@@ -1097,20 +1100,20 @@ const Input = {
           bgColor: color.background.input["filled-hover"]
         },
         _focusVisible: {
-          boxShadow: `0 0 0 1px ${color.border.input.focus}`,
+          boxShadow: `inset 0 0 0 1px ${color.border.input.focus}`,
           borderColor: color.border.input.focus,
           bgColor: color.background.input["filled-focus"],
           _readOnly: {
             bgColor: color.background.input["filled-default"]
           },
           _invalid: {
-            boxShadow: `0 0 0 1px ${color.border.input.error}`,
+            boxShadow: `inset 0 0 0 1px ${color.border.input.error}`,
             bgColor: color.background.input["outline-error"],
             borderColor: color.border.input.error
           }
         },
         _invalid: {
-          boxShadow: `0 0 0 1px ${color.border.input.error}`,
+          boxShadow: `inset 0 0 0 1px ${color.border.input.error}`,
           bgColor: color.background.input["filled-error"],
           borderColor: color.border.input.error
         },
@@ -1197,11 +1200,11 @@ const Input = {
         _focusVisible: {
           bgColor: color.background.input["outline-focus"],
           _hover: {
-            boxShadow: `0 0 0 1px ${color.border.ai}`,
+            boxShadow: `inset 0 0 0 1px ${color.border.ai}`,
             borderColor: color.border.ai
           },
           _invalid: {
-            boxShadow: `0 0 0 1px ${color.border.input.error}`,
+            boxShadow: `inset 0 0 0 1px ${color.border.input.error}`,
             bgColor: color.background.input["outline-error"],
             borderColor: color.border.input.error
           }
@@ -1645,7 +1648,7 @@ const Tag$1 = {
 };
 
 const Alert$1 = {
-  parts: ["container", "title", "description"],
+  parts: ["container", "title", "description", "icon"],
   baseStyle: ({ theme: {
     radii: borderRadius,
     colors: color,
@@ -1657,40 +1660,69 @@ const Alert$1 = {
       paddingEnd: coreSpacing[8],
       width: "auto",
       display: "flex"
+    },
+    title: {
+      lineHeight: "1.25",
+      overflowWrap: "break-word"
+    },
+    description: {
+      lineHeight: "1.25",
+      overflowWrap: "break-word"
+    },
+    icon: {
+      boxSize: 6
     }
   }),
   variants: {
     success: ({ theme: { colors: color } }) => ({
       container: {
         bgColor: color.background.toast.success
+      },
+      icon: {
+        color: color.icon.toast.success
       }
     }),
     warning: ({ theme: { colors: color } }) => ({
       container: {
         bgColor: color.background.toast.warning
+      },
+      icon: {
+        color: color.icon.toast.warning
       }
     }),
     info: ({ theme: { colors: color } }) => ({
       container: {
         bgColor: color.background.toast.info
+      },
+      icon: {
+        color: color.icon.toast.info
       }
     }),
     error: ({ theme: { colors: color } }) => ({
       container: {
         bgColor: color.background.toast.error,
         color: color.text.toast.error
+      },
+      icon: {
+        color: color.icon.toast.error
       }
     }),
     ai: ({ theme: { colors: color } }) => ({
       container: {
         bgColor: color.bg.ai.default,
         color: color.text.inverted
+      },
+      icon: {
+        color: color.icon.toast.ai
       }
     }),
     default: ({ theme: { colors: color } }) => ({
       container: {
         bgColor: color.bg.layer,
         color: color.text.default
+      },
+      icon: {
+        color: color.icon.toast.default
       }
     }),
     ghost: ({ theme: { colors: color } }) => ({
@@ -1700,6 +1732,9 @@ const Alert$1 = {
         borderWidth: "xs",
         borderColor: color.border.default,
         borderStyle: "solid"
+      },
+      icon: {
+        color: color.icon.toast.ghost
       }
     })
   }
@@ -1758,12 +1793,12 @@ const NumberInput$1 = {
         _focusVisible: {
           bg: color.background.input["outline-focus"],
           borderColor: color.border.input.focus,
-          boxShadow: `0 0 0 1px ${color.border.textarea.focus}`
+          boxShadow: `inset 0 0 0 1px ${color.border.textarea.focus}`
         },
         _invalid: {
           bg: color.background.input["outline-error"],
           borderColor: color.border.input.error,
-          boxShadow: `0 0 0 1px ${color.border.input.error}`
+          boxShadow: `inset 0 0 0 1px ${color.border.input.error}`
         },
         _disabled: {
           bg: color.background.input["outline-disabled"],
@@ -1969,10 +2004,10 @@ const DatePicker$1 = {
       _focusWithin: {
         bgColor: color.background.input["outline-focus"],
         borderColor: color.border.textarea.focus,
-        boxShadow: `0 0 0 1px ${color.border.textarea.focus}`
+        boxShadow: `inset 0 0 0 1px ${color.border.textarea.focus}`
       },
       _invalid: {
-        boxShadow: `0 0 0 1px ${color.border.input.error}`,
+        boxShadow: `inset 0 0 0 1px ${color.border.input.error}`,
         borderColor: color.border.input.error
       },
       _disabled: {
@@ -1993,11 +2028,11 @@ const DatePicker$1 = {
       outline: "none",
       rounded: "md",
       _focus: {
-        bgColor: "blue.500",
+        bgColor: "bg.brand.default",
         color: color.text.inverted
       },
       _placeholder: {
-        color: "red.500"
+        color: "destructive"
       }
     }
   }),
@@ -3760,7 +3795,7 @@ var __spreadValues$2g = (a, b) => {
   return a;
 };
 var __spreadProps$t = (a, b) => __defProps$t(a, __getOwnPropDescs$t(b));
-var __objRest$1R = (source, exclude) => {
+var __objRest$1S = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$2g.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -3781,7 +3816,7 @@ function TagsInput(_a) {
     "data-testid": testId,
     value = [],
     onError
-  } = _b, rest = __objRest$1R(_b, [
+  } = _b, rest = __objRest$1S(_b, [
     "options",
     "onChange",
     "isLoading",
@@ -3891,7 +3926,7 @@ var __spreadValues$2f = (a, b) => {
     }
   return a;
 };
-var __objRest$1Q = (source, exclude) => {
+var __objRest$1R = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$2f.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -3908,7 +3943,7 @@ const OrganizationLogo = (_a) => {
     name,
     image,
     variant = "square"
-  } = _b, rest = __objRest$1Q(_b, [
+  } = _b, rest = __objRest$1R(_b, [
     "name",
     "image",
     "variant"
@@ -3950,7 +3985,7 @@ var __spreadValues$2e = (a, b) => {
     }
   return a;
 };
-var __objRest$1P = (source, exclude) => {
+var __objRest$1Q = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$2e.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -3966,7 +4001,7 @@ const Alert = (_a) => {
   var _b = _a, {
     variant = "success",
     children
-  } = _b, rest = __objRest$1P(_b, [
+  } = _b, rest = __objRest$1Q(_b, [
     "variant",
     "children"
   ]);
@@ -4007,7 +4042,7 @@ var __spreadValues$2c = (a, b) => {
     }
   return a;
 };
-var __objRest$1O = (source, exclude) => {
+var __objRest$1P = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$2c.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -4025,7 +4060,7 @@ const Icon = forwardRef((_a, ref) => {
     size,
     color,
     boxSize
-  } = _b, rest = __objRest$1O(_b, [
+  } = _b, rest = __objRest$1P(_b, [
     "as",
     "size",
     "color",
@@ -4066,7 +4101,7 @@ var __spreadValues$2b = (a, b) => {
     }
   return a;
 };
-var __objRest$1N = (source, exclude) => {
+var __objRest$1O = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$2b.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -4086,7 +4121,7 @@ const Avatar = (_a) => {
     image,
     size,
     bgColor
-  } = _b, rest = __objRest$1N(_b, [
+  } = _b, rest = __objRest$1O(_b, [
     "variant",
     "notificationCount",
     "name",
@@ -4134,7 +4169,7 @@ var __spreadValues$2a = (a, b) => {
     }
   return a;
 };
-var __objRest$1M = (source, exclude) => {
+var __objRest$1N = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$2a.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -4150,7 +4185,7 @@ const H1 = forwardRef$1((_a, ref) => {
   var _b = _a, {
     children,
     sx = {}
-  } = _b, rest = __objRest$1M(_b, [
+  } = _b, rest = __objRest$1N(_b, [
     "children",
     "sx"
   ]);
@@ -4182,7 +4217,7 @@ var __spreadValues$29 = (a, b) => {
     }
   return a;
 };
-var __objRest$1L = (source, exclude) => {
+var __objRest$1M = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$29.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -4198,7 +4233,7 @@ const H2 = forwardRef$1((_a, ref) => {
   var _b = _a, {
     children,
     sx = {}
-  } = _b, rest = __objRest$1L(_b, [
+  } = _b, rest = __objRest$1M(_b, [
     "children",
     "sx"
   ]);
@@ -4230,7 +4265,7 @@ var __spreadValues$28 = (a, b) => {
     }
   return a;
 };
-var __objRest$1K = (source, exclude) => {
+var __objRest$1L = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$28.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -4246,7 +4281,7 @@ const H3 = forwardRef$1((_a, ref) => {
   var _b = _a, {
     children,
     sx = {}
-  } = _b, rest = __objRest$1K(_b, [
+  } = _b, rest = __objRest$1L(_b, [
     "children",
     "sx"
   ]);
@@ -4278,7 +4313,7 @@ var __spreadValues$27 = (a, b) => {
     }
   return a;
 };
-var __objRest$1J = (source, exclude) => {
+var __objRest$1K = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$27.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -4294,7 +4329,7 @@ const H4 = forwardRef$1((_a, ref) => {
   var _b = _a, {
     children,
     sx = {}
-  } = _b, rest = __objRest$1J(_b, [
+  } = _b, rest = __objRest$1K(_b, [
     "children",
     "sx"
   ]);
@@ -4326,7 +4361,7 @@ var __spreadValues$26 = (a, b) => {
     }
   return a;
 };
-var __objRest$1I = (source, exclude) => {
+var __objRest$1J = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$26.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -4342,7 +4377,7 @@ const H5 = forwardRef$1((_a, ref) => {
   var _b = _a, {
     children,
     sx = {}
-  } = _b, rest = __objRest$1I(_b, [
+  } = _b, rest = __objRest$1J(_b, [
     "children",
     "sx"
   ]);
@@ -4374,7 +4409,7 @@ var __spreadValues$25 = (a, b) => {
     }
   return a;
 };
-var __objRest$1H = (source, exclude) => {
+var __objRest$1I = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$25.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -4390,7 +4425,7 @@ const H6 = forwardRef$1((_a, ref) => {
   var _b = _a, {
     children,
     sx = {}
-  } = _b, rest = __objRest$1H(_b, [
+  } = _b, rest = __objRest$1I(_b, [
     "children",
     "sx"
   ]);
@@ -4422,7 +4457,7 @@ var __spreadValues$24 = (a, b) => {
     }
   return a;
 };
-var __objRest$1G = (source, exclude) => {
+var __objRest$1H = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$24.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -4439,7 +4474,7 @@ const P = forwardRef$1((_a, ref) => {
     children,
     variant = "16",
     sx = {}
-  } = _b, rest = __objRest$1G(_b, [
+  } = _b, rest = __objRest$1H(_b, [
     "children",
     "variant",
     "sx"
@@ -4472,7 +4507,7 @@ var __spreadValues$23 = (a, b) => {
     }
   return a;
 };
-var __objRest$1F = (source, exclude) => {
+var __objRest$1G = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$23.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -4486,7 +4521,7 @@ var __objRest$1F = (source, exclude) => {
 };
 const Blockquote = forwardRef$1(
   (_a, ref) => {
-    var _b = _a, { children, sx = {} } = _b, rest = __objRest$1F(_b, ["children", "sx"]);
+    var _b = _a, { children, sx = {} } = _b, rest = __objRest$1G(_b, ["children", "sx"]);
     const styles = useStyleConfig("Blockquote", { sx });
     return /* @__PURE__ */ React.createElement(Text, __spreadValues$23({ as: "span", sx: styles, ref }, rest), children);
   }
@@ -4508,7 +4543,7 @@ var __spreadValues$22 = (a, b) => {
     }
   return a;
 };
-var __objRest$1E = (source, exclude) => {
+var __objRest$1F = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$22.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -4524,7 +4559,7 @@ const Capitalized = forwardRef$1((_a, ref) => {
   var _b = _a, {
     children,
     sx = {}
-  } = _b, rest = __objRest$1E(_b, [
+  } = _b, rest = __objRest$1F(_b, [
     "children",
     "sx"
   ]);
@@ -4556,7 +4591,7 @@ var __spreadValues$21 = (a, b) => {
     }
   return a;
 };
-var __objRest$1D = (source, exclude) => {
+var __objRest$1E = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$21.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -4572,7 +4607,7 @@ const Lead = forwardRef$1((_a, ref) => {
   var _b = _a, {
     children,
     sx = {}
-  } = _b, rest = __objRest$1D(_b, [
+  } = _b, rest = __objRest$1E(_b, [
     "children",
     "sx"
   ]);
@@ -4604,7 +4639,7 @@ var __spreadValues$20 = (a, b) => {
     }
   return a;
 };
-var __objRest$1C = (source, exclude) => {
+var __objRest$1D = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$20.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -4620,7 +4655,7 @@ const Small = forwardRef$1((_a, ref) => {
   var _b = _a, {
     children,
     sx = {}
-  } = _b, rest = __objRest$1C(_b, [
+  } = _b, rest = __objRest$1D(_b, [
     "children",
     "sx"
   ]);
@@ -4652,7 +4687,7 @@ var __spreadValues$1$ = (a, b) => {
     }
   return a;
 };
-var __objRest$1B = (source, exclude) => {
+var __objRest$1C = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$1$.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -4668,7 +4703,7 @@ const Tiny = forwardRef$1((_a, ref) => {
   var _b = _a, {
     children,
     sx = {}
-  } = _b, rest = __objRest$1B(_b, [
+  } = _b, rest = __objRest$1C(_b, [
     "children",
     "sx"
   ]);
@@ -4700,7 +4735,7 @@ var __spreadValues$1_ = (a, b) => {
     }
   return a;
 };
-var __objRest$1A = (source, exclude) => {
+var __objRest$1B = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$1_.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -4717,7 +4752,7 @@ const Label = forwardRef$1((_a, ref) => {
     children,
     size = "sm",
     sx = {}
-  } = _b, rest = __objRest$1A(_b, [
+  } = _b, rest = __objRest$1B(_b, [
     "children",
     "size",
     "sx"
@@ -4750,7 +4785,7 @@ var __spreadValues$1Z = (a, b) => {
     }
   return a;
 };
-var __objRest$1z = (source, exclude) => {
+var __objRest$1A = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$1Z.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -4764,7 +4799,7 @@ var __objRest$1z = (source, exclude) => {
 };
 const NumVal = forwardRef$1(
   (_a, ref) => {
-    var _b = _a, { children, size = "sm", sx = {} } = _b, rest = __objRest$1z(_b, ["children", "size", "sx"]);
+    var _b = _a, { children, size = "sm", sx = {} } = _b, rest = __objRest$1A(_b, ["children", "size", "sx"]);
     const styles = useStyleConfig("NumVal", { sx, size });
     return /* @__PURE__ */ React.createElement(
       Text,
@@ -4874,7 +4909,7 @@ var __spreadValues$1Y = (a, b) => {
     }
   return a;
 };
-var __objRest$1y = (source, exclude) => {
+var __objRest$1z = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$1Y.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -4891,7 +4926,7 @@ const AvatarGroup = (_a) => {
     children,
     max = Infinity,
     spacing = "-4"
-  } = _b, rest = __objRest$1y(_b, [
+  } = _b, rest = __objRest$1z(_b, [
     "children",
     "max",
     "spacing"
@@ -4921,7 +4956,33 @@ var __spreadValues$1X = (a, b) => {
     }
   return a;
 };
-const Badge = forwardRef$1((props, ref) => /* @__PURE__ */ React.createElement(Badge$2, __spreadValues$1X({ ref }, props)));
+var __objRest$1y = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$1X.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$1X)
+    for (var prop of __getOwnPropSymbols$1X(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$1X.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const Badge = forwardRef$1((props, ref) => {
+  const _a = props, {
+    children,
+    withIcon,
+    iconPosition = "left",
+    iconAs
+  } = _a, rest = __objRest$1y(_a, [
+    "children",
+    "withIcon",
+    "iconPosition",
+    "iconAs"
+  ]);
+  const IconComponent = iconAs ? NorthlightIcons[iconAs] : MediatoolLogoSolid;
+  return /* @__PURE__ */ React.createElement(Badge$2, __spreadValues$1X({ ref }, rest), /* @__PURE__ */ React.createElement(Flex, { align: "center", gap: "1" }, withIcon && iconPosition === "left" && IconComponent && /* @__PURE__ */ React.createElement(Icon, { as: IconComponent, boxSize: "3" }), children, withIcon && iconPosition === "right" && IconComponent && /* @__PURE__ */ React.createElement(Icon, { as: IconComponent, boxSize: "3" })));
+});
 
 var __defProp$1W = Object.defineProperty;
 var __getOwnPropSymbols$1W = Object.getOwnPropertySymbols;
@@ -8744,7 +8805,8 @@ const Toolbox = (_a) => {
     onClose,
     autoFocus = true,
     resizeLimit = "full",
-    zIndex = coreZIndex.overlay
+    zIndex = coreZIndex.overlay,
+    slideProps
   } = _b, rest = __objRest$10(_b, [
     "isResizable",
     "isOpen",
@@ -8755,7 +8817,8 @@ const Toolbox = (_a) => {
     "onClose",
     "autoFocus",
     "resizeLimit",
-    "zIndex"
+    "zIndex",
+    "slideProps"
   ]);
   const { container } = useMultiStyleConfig$1("Toolbox", { size });
   const newChildren = getChildrenWithProps(
@@ -8790,7 +8853,7 @@ const Toolbox = (_a) => {
     },
     /* @__PURE__ */ React.createElement(Portal, null, /* @__PURE__ */ React.createElement(
       Slide,
-      {
+      __spreadValues$1d({
         direction,
         in: isOpen,
         style: {
@@ -8798,7 +8861,7 @@ const Toolbox = (_a) => {
           width: adjustableWidth,
           zIndex
         }
-      },
+      }, slideProps),
       /* @__PURE__ */ React.createElement(
         Flex,
         __spreadValues$1d({