@northlight/ui 2.26.0 → 2.26.1

package/dist/es/northlight.d.ts

@@ -1,7 +1,7 @@
 import { AccordionProps, AccordionButtonProps, AccordionPanelProps, AccordionItemProps, StackDirection, AvatarProps as AvatarProps$1, AlertProps as AlertProps$1, AspectRatioProps, StackProps, BadgeProps, ButtonProps as ButtonProps$1, CheckboxProps as CheckboxProps$1, IconButtonProps as IconButtonProps$1, PopoverProps, BoxProps, InputProps, CenterProps, FlexProps, TagProps as TagProps$1, IconProps as IconProps$1, SystemStyleObject, HeadingProps as HeadingProps$1, TextProps, FormLabelProps as FormLabelProps$1, Heading, Text, ModalProps as ModalProps$1, ResponsiveValue, MenuProps as MenuProps$1, NumberInputProps as NumberInputProps$1, PinInputProps as PinInputProps$1, ProgressProps, RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1, SpinnerProps as SpinnerProps$1, SwitchProps as SwitchProps$1, TableProps as TableProps$1, TabsProps as TabsProps$1, TabPanelProps as TabPanelProps$1, TextareaProps as TextareaProps$1, UseToastOptions as UseToastOptions$1, TooltipProps, FadeProps as FadeProps$1, ScaleFadeProps as ScaleFadeProps$1, SlideProps as SlideProps$1, SlideFadeProps as SlideFadeProps$1, CollapseProps as CollapseProps$1, ModalBodyProps, TabListProps, TabProps, LinkProps, GridProps, GridItemProps, EditableProps as EditableProps$1 } from '@chakra-ui/react';
 export { AbsoluteCenter, AccordionButtonProps, AccordionIcon, AccordionIconProps, AccordionItemProps, AccordionPanelProps, AccordionProps, AlertDescription, AlertDialog, AlertDialogBody, AlertDialogCloseButton, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertIcon, AlertTitle, AspectRatioProps, BadgeProps, Box, BoxProps, BreadcrumbItem as Breadcrumb, BreadcrumbLink, BreadcrumbSeparator, Breadcrumb as Breadcrumbs, ButtonGroup, Card, CardBody, CardFooter, CardHeader, Center, Modal as ChakraModal, CheckboxGroup, Circle, CircularProgress, CircularProgressLabel, CloseButton, Code, Container, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, DrawerHeader, DrawerOverlay, Editable, EditableInput, EditablePreview, Flex, FormControl, FormErrorMessage, FormHelperText, Grid, GridItem, HStack, Heading, Hide, Highlight, Image, Input, InputAddon, InputGroup, InputLeftAddon, InputLeftElement, InputRightAddon, InputRightElement, Kbd, Link, LinkBox, LinkOverlay, List, ListIcon, ListItem, MenuButton, MenuCommand, MenuDivider, MenuGroup, MenuIcon, MenuItem, MenuItemOption, MenuList, MenuOptionGroup, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, NumberDecrementStepper, NumberIncrementStepper, OrderedList, PinInputField, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, Portal, RangeSlider, RangeSliderFilledTrack, RangeSliderMark, RangeSliderThumb, RangeSliderTrack, Show, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, Slider, SliderFilledTrack, SliderMark, SliderThumb, SliderTrack, Spacer, Stack, StackDivider, StackProps, Stat, StatArrow, StatGroup, StatHelpText, StatLabel, StatNumber, TabIndicator as StepIndicator, TabPanels as StepPanels, Tab, TabIndicator, TabList, TabPanels, TableBodyProps, TableCaption, TableCaptionProps, TableCellProps, TableColumnHeaderProps, TableContainer, TableContainerProps, TableFooterProps, TableHeadProps, TableRowProps, TagCloseButton, TagLabel, TagLeftIcon, TagRightIcon, Tbody, Td, Text, Tfoot, Th, Thead, Tr, UnorderedList, VStack, VisuallyHidden, VisuallyHiddenInput, Wrap, WrapItem, keyframes, useBoolean, useBreakpoint, useBreakpointValue, useClipboard, useControllableProp, useControllableState, useDisclosure, useEditable, useEditableControls, useEditableState, useInterval, useMediaQuery, useMergeRefs, useNumberInput, useOutsideClick, usePrefersReducedMotion, useRadio, useRadioGroup, useTab, useTabs, useTheme, useToken } from '@chakra-ui/react';
 import { Props, GroupBase, MultiValue, SingleValue, ActionMeta, MenuListProps, SelectInstance, ChakraStylesConfig } from 'chakra-react-select';
-export { AsyncCreatableSelect, AsyncSelect, Select as ChakraReactSelect, CreatableSelect, MultiValue, SingleValue } from 'chakra-react-select';
+export { AsyncCreatableSelect, AsyncSelect, Select as ChakraReactSelect, CreatableSelect, MultiValue, SingleValue, chakraComponents as selectChakraComponents } from 'chakra-react-select';
 import * as React$1 from 'react';
 import React__default, { ComponentType, Ref, ChangeEvent, InputHTMLAttributes, ReactNode, ReactElement, RefObject, MutableRefObject, EffectCallback, DependencyList, MouseEvent as MouseEvent$1 } from 'react';
 import * as react_hook_form from 'react-hook-form';

package/dist/es/northlight.js

@@ -2,7 +2,7 @@ import { Accordion as Accordion$1, AccordionButton as AccordionButton$1, Accordi
 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';
-export { AsyncCreatableSelect, AsyncSelect, Select as ChakraReactSelect, CreatableSelect } from 'chakra-react-select';
+export { AsyncCreatableSelect, AsyncSelect, Select as ChakraReactSelect, CreatableSelect, chakraComponents as selectChakraComponents } from 'chakra-react-select';
 import { isNil, last, map, prop, difference, replace, split, path, T, identity, any, isEmpty, init, append, ifElse, gt, always, defaultTo, take, inc, dec, forEach, is, trim, keys, values, equals, omit, mergeAll, merge, toLower, find, times, add, has, not, all, filter, test, indexOf, remove, insert, intersection, findIndex, concat, head, match, length, propEq } from 'ramda';
 import { useFocusManager, FocusScope, useFocusRing } from '@react-aria/focus';
 import { useForm, FormProvider, useFormContext, Controller } from 'react-hook-form';
@@ -4034,91 +4034,94 @@ const NumberInput$1 = {
     radii: borderRadius,
     borders: borderWidth,
     opacity
-  }, isReadOnly }) => ({
-    root: {
-      borderRadius: borderRadius.input.outline
-    },
-    field: {
-      minWidth: sizing["44"],
-      paddingInlineStart: spacing["padding-inline"].input.default,
-      paddingInlineEnd: spacing["padding-inline"].input.default,
-      WebkitPaddingStart: spacing["padding-inline"].input.default,
-      WebkitPaddingEnd: spacing["padding-inline"].input.default,
-      color: color.text.default,
-      bg: color.background.input["outline-default"],
-      borderWidth: borderWidth.input.default,
-      borderColor: color.border.input.default,
-      paddingRight: spacing.paddingRight["number-input"].field,
-      _hover: {
-        bg: color.background.input["outline-hover"],
-        borderColor: color.border.input["default-hover"]
-      },
-      _focusVisible: {
-        bg: color.background.input["outline-focus"],
-        borderColor: color.border.input.focus,
-        boxShadow: `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}`
-      },
-      _disabled: {
-        bg: color.background.input["outline-disabled"],
-        opacity: opacity.input.disabled,
-        borderColor: color.border.input.disabled
+  }, isReadOnly, minWidth, minW }) => {
+    var _a;
+    return {
+      root: {
+        borderRadius: borderRadius.input.outline
       },
-      _readOnly: {
-        _focusVisible: {
-          borderColor: color.border.input.readonly,
-          boxShadow: "none"
-        },
-        _hover: {
-          borderColor: color.border.input.readonly
-        }
-      }
-    },
-    stepperGroup: {
-      width: "auto",
-      paddingRight: spacing.paddingRight["number-input"].stepper
-    },
-    stepper: {
-      _first: {
-        border: "none",
-        borderTopRightRadius: borderRadius["input-stepper"].default,
-        borderRadius: borderRadius["input-stepper"].default,
-        bg: color.background["input-stepper"].default,
-        opacity: isReadOnly ? opacity.input.disabled : "auto",
+      field: {
+        minWidth: (_a = minWidth != null ? minWidth : minW) != null ? _a : sizing["44"],
+        paddingInlineStart: spacing["padding-inline"].input.default,
+        paddingInlineEnd: spacing["padding-inline"].input.default,
+        WebkitPaddingStart: spacing["padding-inline"].input.default,
+        WebkitPaddingEnd: spacing["padding-inline"].input.default,
+        color: color.text.default,
+        bg: color.background.input["outline-default"],
+        borderWidth: borderWidth.input.default,
+        borderColor: color.border.input.default,
+        paddingRight: spacing.paddingRight["number-input"].field,
         _hover: {
-          bg: isReadOnly ? "none" : color.background["input-stepper"].hover
+          bg: color.background.input["outline-hover"],
+          borderColor: color.border.input["default-hover"]
         },
-        _active: {
-          bg: color.background["input-stepper"].active
+        _focusVisible: {
+          bg: color.background.input["outline-focus"],
+          borderColor: color.border.input.focus,
+          boxShadow: `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}`
         },
         _disabled: {
-          bg: color.background["input-stepper"].disabled,
-          color: color.icon["input-stepper"].disabled
+          bg: color.background.input["outline-disabled"],
+          opacity: opacity.input.disabled,
+          borderColor: color.border.input.disabled
+        },
+        _readOnly: {
+          _focusVisible: {
+            borderColor: color.border.input.readonly,
+            boxShadow: "none"
+          },
+          _hover: {
+            borderColor: color.border.input.readonly
+          }
         }
       },
-      _last: {
-        border: "none",
-        bg: color.background["input-stepper"].default,
-        borderBottomRightRadius: borderRadius["input-stepper"].default,
-        borderRadius: borderRadius["input-stepper"].default,
-        opacity: isReadOnly ? opacity.input.disabled : "auto",
-        _hover: {
-          bg: isReadOnly ? "none" : color.background["input-stepper"].hover
-        },
-        _active: {
-          bg: color.background["input-stepper"].active
+      stepperGroup: {
+        width: "auto",
+        paddingRight: spacing.paddingRight["number-input"].stepper
+      },
+      stepper: {
+        _first: {
+          border: "none",
+          borderTopRightRadius: borderRadius["input-stepper"].default,
+          borderRadius: borderRadius["input-stepper"].default,
+          bg: color.background["input-stepper"].default,
+          opacity: isReadOnly ? opacity.input.disabled : "auto",
+          _hover: {
+            bg: isReadOnly ? "none" : color.background["input-stepper"].hover
+          },
+          _active: {
+            bg: color.background["input-stepper"].active
+          },
+          _disabled: {
+            bg: color.background["input-stepper"].disabled,
+            color: color.icon["input-stepper"].disabled
+          }
         },
-        _disabled: {
-          bg: color.background["input-stepper"].disabled,
-          color: color.icon["input-stepper"].disabled
+        _last: {
+          border: "none",
+          bg: color.background["input-stepper"].default,
+          borderBottomRightRadius: borderRadius["input-stepper"].default,
+          borderRadius: borderRadius["input-stepper"].default,
+          opacity: isReadOnly ? opacity.input.disabled : "auto",
+          _hover: {
+            bg: isReadOnly ? "none" : color.background["input-stepper"].hover
+          },
+          _active: {
+            bg: color.background["input-stepper"].active
+          },
+          _disabled: {
+            bg: color.background["input-stepper"].disabled,
+            color: color.icon["input-stepper"].disabled
+          }
         }
       }
-    }
-  })
+    };
+  }
 };
 
 const NotificationIconButton$1 = {
@@ -8950,17 +8953,24 @@ var __objRest$R = (source, exclude) => {
     }
   return target;
 };
-function getComponents() {
-  return {
-    Menu: (props) => /* @__PURE__ */ React.createElement(Box, { "data-testid": "select-menu-wrapper-test-id" }, /* @__PURE__ */ React.createElement(chakraComponents.Menu, __spreadValues$12({}, props), props.children)),
-    DropdownIndicator: (props) => props.selectProps.icon ? /* @__PURE__ */ React.createElement(chakraComponents.DropdownIndicator, __spreadValues$12({}, props), /* @__PURE__ */ React.createElement(Icon$1, { as: props.selectProps.icon })) : /* @__PURE__ */ React.createElement(chakraComponents.DropdownIndicator, __spreadValues$12({}, props)),
-    Option: (props) => props.selectProps.customOption ? /* @__PURE__ */ React.createElement(chakraComponents.Option, __spreadValues$12({}, props), props.selectProps.customOption(props.data)) : /* @__PURE__ */ React.createElement(chakraComponents.Option, __spreadValues$12({}, props)),
-    MultiValueContainer: (props) => props.selectProps.customTag ? /* @__PURE__ */ React.createElement(chakraComponents.MultiValueContainer, __spreadValues$12({}, props), props.selectProps.customTag(props.data)) : /* @__PURE__ */ React.createElement(chakraComponents.MultiValueContainer, __spreadValues$12({}, props)),
-    Control: (_a) => {
-      var _b = _a, { children } = _b, props = __objRest$R(_b, ["children"]);
-      return props.selectProps.leftComponent ? /* @__PURE__ */ React.createElement(chakraComponents.Control, __spreadValues$12({}, 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$12({}, props), children);
-    }
-  };
+function getComponents(components) {
+  return merge(
+    {
+      Menu: (props) => /* @__PURE__ */ React.createElement(Box, { "data-testid": "select-menu-wrapper-test-id" }, /* @__PURE__ */ React.createElement(chakraComponents.Menu, __spreadValues$12({}, props), props.children)),
+      DropdownIndicator: (props) => props.selectProps.icon ? /* @__PURE__ */ React.createElement(chakraComponents.DropdownIndicator, __spreadValues$12({}, props), /* @__PURE__ */ React.createElement(Icon$1, { as: props.selectProps.icon })) : /* @__PURE__ */ React.createElement(chakraComponents.DropdownIndicator, __spreadValues$12({}, props)),
+      Option: (props) => props.selectProps.customOption ? /* @__PURE__ */ React.createElement(chakraComponents.Option, __spreadValues$12({}, props), props.selectProps.customOption(props.data)) : /* @__PURE__ */ React.createElement(chakraComponents.Option, __spreadValues$12({}, props)),
+      MultiValueContainer: (props) => props.selectProps.customTag ? /* @__PURE__ */ React.createElement(chakraComponents.MultiValueContainer, __spreadValues$12({}, props), props.selectProps.customTag(props.data)) : /* @__PURE__ */ React.createElement(chakraComponents.MultiValueContainer, __spreadValues$12({}, props)),
+      Control: (_a) => {
+        var _b = _a, {
+          children
+        } = _b, props = __objRest$R(_b, [
+          "children"
+        ]);
+        return props.selectProps.leftComponent ? /* @__PURE__ */ React.createElement(chakraComponents.Control, __spreadValues$12({}, 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$12({}, props), children);
+      }
+    },
+    components || {}
+  );
 }
 
 var __defProp$11 = Object.defineProperty;
@@ -12289,7 +12299,8 @@ const Select = forwardRef$1((_a, ref) => {
     customTag = null,
     isClearable = false,
     value,
-    icon
+    icon,
+    components
   } = _b, rest = __objRest$l(_b, [
     "options",
     "isMulti",
@@ -12303,7 +12314,8 @@ const Select = forwardRef$1((_a, ref) => {
     "customTag",
     "isClearable",
     "value",
-    "icon"
+    "icon",
+    "components"
   ]);
   const handleChange = useSelectCallbacks({
     onChange,
@@ -12313,7 +12325,7 @@ const Select = forwardRef$1((_a, ref) => {
     value: is(Array, value) ? value : []
   });
   const customComponents = useMemo(
-    () => getComponents(),
+    () => getComponents(components),
     []
   );
   const prevOptions = useRef(