@northlight/ui 2.36.5 → 2.36.7

package/dist/es/northlight.d.ts

@@ -129,7 +129,7 @@ interface Option<T extends string = string> {
 interface SelectProps<T, K extends boolean> extends Omit<Props<T, K, GroupBase<T>>, 'onChange' | 'value' | 'isMulti'> {
     /** Whatever is currently selected by the select will be controlled by value prop, if value is
      *  of type string then it will automatically pair it up with matching object from options list */
-    value?: K extends true ? T[] | string[] : T | string;
+    value?: K extends true ? T[] | string[] : T | string | null;
     /** Take a look at the second argument, the event,
      *  for info as to which specific element was added */
     onChange?: (option: K extends true ? MultiValue<T> : SingleValue<T>, event: ActionMeta<T>) => void;
@@ -295,7 +295,7 @@ declare const SelectField: <T extends Option<string>, K extends boolean = false>
     onChange?: ((option: K extends true ? react_select_dist_declarations_src_types.MultiValue<T> | undefined : react_select_dist_declarations_src_types.SingleValue<T> | undefined, event: react_select.ActionMeta<T>) => void) | undefined;
 } & React__default.RefAttributes<HTMLDivElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
-declare const getMatchingValue: <T extends Option<string>, K extends boolean>(value: (K extends true ? string[] | T[] : string | T) | undefined, options: react_select.OptionsOrGroups<T, react_select.GroupBase<T>> | undefined) => T | T[] | undefined;
+declare const getMatchingValue: <T extends Option<string>, K extends boolean>(value: (K extends true ? string[] | T[] : string | T | null) | undefined, options: react_select.OptionsOrGroups<T, react_select.GroupBase<T>> | undefined) => T | T[] | undefined;
 
 interface TagsInputProps<T> extends Omit<SelectProps<T, true>, 'value' | 'formatCreateLabel' | 'isValidNewOption' | 'onAdd' | 'onRemove' | 'leftIcon' | 'icon' | 'customOption'> {
     value?: MultiValue<T>;

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, 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';
+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 as Progress$1, 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';
@@ -671,18 +671,18 @@ const Breadcrumb = {
   baseStyle: {
     link: {
       padding: [0.5, 1],
-      color: "primary",
-      fontWeight: "600",
-      fontSize: "semibold",
+      color: "text.default",
+      fontWeight: "semibold",
+      fontSize: "md",
       _hover: {
-        bg: "blue.50",
+        bg: "brand-alt",
         borderRadius: "base",
         textDecor: "none"
       }
     },
     separator: {
-      color: "gray.300",
-      fontSize: "semibold"
+      color: "subdued",
+      fontSize: "sm"
     }
   }
 };
@@ -2358,7 +2358,7 @@ const Avatar$1 = {
         fontSize: "xs",
         fontWeight: "semibold",
         padding: sizing["0a"],
-        bgColor: color.red["500"],
+        bgColor: color.destructive,
         color: color.text.inverted,
         borderRadius: borderRadius.avatar.square,
         border: "none"
@@ -3344,21 +3344,21 @@ const getBgColor = (currentTheme) => {
   }
 };
 const getInvalidColorStyles = (isInvalid, isImage = true, currentTheme = "webappTheme") => ({
-  borderColor: isInvalid ? "red.500" : "gray.300",
-  bgColor: isInvalid && "red.50",
+  borderColor: isInvalid ? "border.error" : "border.default",
+  bgColor: isInvalid && "bg.error.default",
   animation: isInvalid && `500ms ${shakeAnimation} ease`,
   _hover: isImage && {
-    bgColor: isInvalid ? "red.50" : getBgColor(currentTheme),
-    borderColor: isInvalid ? "red.500" : "blue.500"
+    bgColor: isInvalid ? "bg.error.default" : getBgColor(currentTheme),
+    borderColor: isInvalid ? "border.error" : "border.brand.default"
   }
 });
 const getAiColorStyles = (isInvalid, isImage = true) => ({
-  borderColor: isInvalid ? "red.500" : "gray.300",
-  bgColor: isInvalid && "red.50",
+  borderColor: isInvalid ? "border.error" : "border.default",
+  bgColor: isInvalid && "bg.error.default",
   animation: isInvalid && `500ms ${shakeAnimation} ease`,
   _hover: isImage && {
-    bgColor: isInvalid ? "red.50" : "bg.filled",
-    borderColor: isInvalid ? "red.500" : "border.ai"
+    bgColor: isInvalid ? "bg.error.default" : "bg.filled",
+    borderColor: isInvalid ? "border.error" : "border.ai"
   }
 });
 const FilePicker$1 = {
@@ -3593,6 +3593,17 @@ const Popover$1 = {
   }
 };
 
+const Progress = {
+  baseStyle: ({ theme: { colors: color } }) => ({
+    track: {
+      bg: color["subdued-alt"]
+    },
+    filledTrack: {
+      bg: color.brand
+    }
+  })
+};
+
 var components = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Alert: Alert$1,
@@ -3634,6 +3645,7 @@ var components = /*#__PURE__*/Object.freeze({
   PaneDivider: PaneDivider$1,
   PinInput: PinInput$1,
   Popover: Popover$1,
+  Progress: Progress,
   Radio: Radio$1,
   Select: Select$1,
   Small: Small$1,
@@ -4937,7 +4949,7 @@ const AvatarGroup = (_a) => {
     { ml: spacing },
     (_child, idx) => idx > 0
   );
-  return /* @__PURE__ */ React.createElement(HStack, __spreadValues$1Y({ bgColor: "background.default" }, rest), /* @__PURE__ */ React.createElement(HStack, { spacing: 0 }, /* @__PURE__ */ React.createElement(OverflowGroup, { max, onChange: setNbrRemainingAvatars }, childrenWithMargin)), nbrRemainingAvatars > 0 && /* @__PURE__ */ React.createElement(Small, { sx: { color: "blue.500" } }, "+", nbrRemainingAvatars));
+  return /* @__PURE__ */ React.createElement(HStack, __spreadValues$1Y({ bgColor: "background.default" }, rest), /* @__PURE__ */ React.createElement(HStack, { spacing: 0 }, /* @__PURE__ */ React.createElement(OverflowGroup, { max, onChange: setNbrRemainingAvatars }, childrenWithMargin)), nbrRemainingAvatars > 0 && /* @__PURE__ */ React.createElement(Small, { sx: { color: "brand" } }, "+", nbrRemainingAvatars));
 };
 
 var __defProp$1X = Object.defineProperty;
@@ -6607,7 +6619,7 @@ const CalendarCell = ({
       fontWeight: "medium",
       variant: isSelected ? "brand" : "ghost",
       ring: isToday && !isSelected ? "1px" : "0px",
-      ringColor: "blue.500"
+      ringColor: "brand"
     }),
     formattedDate
   ));
@@ -6924,11 +6936,11 @@ const RangeCell = ({
       type: "button",
       ref,
       borderRadius: "xs",
-      bgColor: isHighlighted ? "brand-alt" : isSelected ? "blue.500" : "transparent",
+      bgColor: isHighlighted ? "brand-alt" : isSelected ? "brand" : "transparent",
       color: isSelected ? "text.inverted" : "text.default",
       fontSize: "sm",
       ring: isToday && !isSelected ? "1px" : "0px",
-      ringColor: "blue.500",
+      ringColor: "brand",
       mx: "-1px",
       ml: isToday ? "-2px " : void 0,
       my: "0a",
@@ -6943,7 +6955,7 @@ const RangeCell = ({
         ringOffset: "1px"
       },
       _hover: {
-        bgColor: isSelected ? "blue.400" : "bg.filled",
+        bgColor: isSelected ? " background.button.brand-hover" : "bg.filled",
         _disabled: {
           bgColor: "transparent"
         }
@@ -10977,7 +10989,7 @@ const ProgressBar = forwardRef$1(
   (_a, ref) => {
     var _b = _a, { animationSlideTimeMs = animationSlideTime, sx } = _b, props = __objRest$B(_b, ["animationSlideTimeMs", "sx"]);
     return /* @__PURE__ */ React.createElement(
-      Progress,
+      Progress$1,
       __spreadValues$I({
         ref,
         width: "full",
@@ -11551,7 +11563,7 @@ const FilePicker = (_a) => {
         {
           as: onlyImageAccepted ? Image03Solid : UploadCloudSolid,
           boxSize: "32px",
-          color: isInvalid ? "red.500" : editable ? "blue.500" : "gray.300",
+          color: isInvalid ? "destructive" : editable ? "brand" : "text.subdued",
           display: isImage && !hasLoaded ? "inline-block" : "none",
           "aria-label": "file-icon-upload"
         }
@@ -11583,7 +11595,7 @@ const FilePicker = (_a) => {
         {
           sx: {
             textDecoration: "underline",
-            color: isInvalid ? "red.500" : "blue.500"
+            color: isInvalid ? "destructive" : "brand"
           },
           display: isLoading || hasLoaded ? "none" : "default"
         },
@@ -11633,7 +11645,7 @@ const FilePicker = (_a) => {
             "aria-label": "delete-file",
             onClick: confirmDelete ? deleteModal.onOpen : clearImage,
             icon: TrashFullDuo,
-            color: "red.500"
+            color: "destructive"
           }
         )
       )
@@ -11872,12 +11884,12 @@ function MultiFileUploader(_a) {
         {
           as: onlyImageAccepted ? Image03Solid : UploadCloudSolid,
           boxSize: "32px",
-          color: isInvalid ? "red.500 " : active ? "blue.500 " : "gray.300",
+          color: isInvalid ? "destructive" : active ? "brand" : "text.subdued",
           "aria-label": "image-icon-upload",
           mb: onlyImageAccepted ? "0a" : 0
         }
       ),
-      /* @__PURE__ */ React.createElement(HStack, { spacing: 1, display: isInvalid ? "none" : "flex" }, /* @__PURE__ */ React.createElement(P, { variant: "14", textAlign: "center", alignSelf: "center" }, "Drag & drop ", onlyImageAccepted ? "images" : "files", " here or"), /* @__PURE__ */ React.createElement(Lead, { sx: { textDecoration: "underline", color: "blue.500" } }, "choose ", onlyImageAccepted ? "image" : "file")),
+      /* @__PURE__ */ React.createElement(HStack, { spacing: 1, display: isInvalid ? "none" : "flex" }, /* @__PURE__ */ React.createElement(P, { variant: "14", textAlign: "center", alignSelf: "center" }, "Drag & drop ", onlyImageAccepted ? "images" : "files", " here or"), /* @__PURE__ */ React.createElement(Lead, { sx: { textDecoration: "underline", color: "brand" } }, "choose ", onlyImageAccepted ? "image" : "file")),
       /* @__PURE__ */ React.createElement(P, { variant: "14", textAlign: "center", alignSelf: "center", display: isInvalid ? "initial" : "none" }, errorMessage),
       /* @__PURE__ */ React.createElement(P, { variant: "14", sx: { color: "gray.400" } }, "Max file size is ", readableFileSize(maxFileSize))
     ), /* @__PURE__ */ React.createElement(
@@ -12459,7 +12471,7 @@ const Menu = (_a) => {
 const NumberInputStepper = ({
   includePercentage = false,
   enableStepperArrows = false
-}) => /* @__PURE__ */ React.createElement(NumberInputStepper$1, null, /* @__PURE__ */ React.createElement(HStack, { alignItems: "center", h: "full" }, includePercentage && /* @__PURE__ */ React.createElement(Center, { bgColor: "gray.50", borderRadius: "md", boxSize: "6" }, /* @__PURE__ */ React.createElement(P, null, "%")), enableStepperArrows && /* @__PURE__ */ React.createElement(HStack, { alignItems: "center", h: "full" }, /* @__PURE__ */ React.createElement(Divider, { orientation: "vertical", h: "50%" }), /* @__PURE__ */ React.createElement(NumberIncrementStepper, { border: "none" }, /* @__PURE__ */ React.createElement(
+}) => /* @__PURE__ */ React.createElement(NumberInputStepper$1, null, /* @__PURE__ */ React.createElement(HStack, { alignItems: "center", h: "full" }, includePercentage && /* @__PURE__ */ React.createElement(Center, { bgColor: "bg.layer", borderRadius: "md", boxSize: "6" }, /* @__PURE__ */ React.createElement(P, null, "%")), enableStepperArrows && /* @__PURE__ */ React.createElement(HStack, { alignItems: "center", h: "full" }, /* @__PURE__ */ React.createElement(Divider, { orientation: "vertical", h: "50%" }), /* @__PURE__ */ React.createElement(NumberIncrementStepper, { border: "none" }, /* @__PURE__ */ React.createElement(
   Icon,
   {
     as: ChevronUpSolid,
@@ -14324,7 +14336,7 @@ const StepStack = (_a) => {
       Box,
       {
         borderRadius: "full",
-        bgColor: "blue.500",
+        bgColor: "brand",
         boxSize: "6",
         minW: "6",
         minH: "6",