@northlight/ui 2.33.12 → 2.33.14

package/dist/es/northlight.d.ts

@@ -1,4 +1,4 @@
-import { AccordionProps, AccordionButtonProps, AccordionPanelProps, AccordionItemProps, Icon as Icon$1, StackDirection, AvatarProps as AvatarProps$1, AlertProps as AlertProps$1, AspectRatioProps, StackProps, BadgeProps as BadgeProps$1, ThemingProps, ButtonProps as ButtonProps$1, CheckboxProps as CheckboxProps$1, CheckboxGroupProps, 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';
+import { AccordionProps, AccordionButtonProps, AccordionPanelProps, AccordionItemProps, Icon as Icon$1, StackDirection, AvatarProps as AvatarProps$1, AlertProps as AlertProps$1, AspectRatioProps, StackProps, BadgeProps as BadgeProps$1, ThemingProps, ButtonProps as ButtonProps$1, CheckboxProps as CheckboxProps$1, CheckboxGroupProps, 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, 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, ContainerProps, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, DrawerHeader, DrawerOverlay, Editable, EditableInput, EditablePreview, Flex, FormControl, FormErrorMessage, FormHelperText, Grid, GridItem, HStack, Heading, Hide, Highlight, Image, ImageProps, 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, 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, CreatableSelectComponent } from 'chakra-react-select';
 export { AsyncCreatableSelect, AsyncSelect, Select as ChakraReactSelect, CreatableSelect, MultiValue, SingleValue, chakraComponents as selectChakraComponents } from 'chakra-react-select';
@@ -915,6 +915,7 @@ interface DateRangePickerProps extends Omit<AriaDateRangePickerProps<DateValue>,
     fiscalStartMonth?: number;
     fiscalStartDay?: number;
     renderInPortal?: boolean;
+    buttonLabel?: string;
 }
 interface DatePickerFieldProps extends Omit<InputProps, 'onChange'>, InputFieldProps {
     name: string;
@@ -933,6 +934,7 @@ interface DatePickerFieldProps extends Omit<InputProps, 'onChange'>, InputFieldP
 }
 interface DateRangePickerFieldProps extends Omit<DatePickerFieldProps, 'onChange'> {
     onChange?: (date: null | DateRange) => void;
+    buttonLabel?: string;
 }
 type FormBody = Record<string, DateRange>;
 
@@ -1794,7 +1796,7 @@ interface PProps extends TextProps {
  * ?)
  *
  */
-declare const P: ({ children, variant, sx, ...rest }: PProps) => JSX.Element;
+declare const P: (props: PProps & React__default.RefAttributes<HTMLParagraphElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 /**
  * One of the stylized typography components
@@ -1814,7 +1816,7 @@ declare const P: ({ children, variant, sx, ...rest }: PProps) => JSX.Element;
  *
  *
  */
-declare const Blockquote: ({ children, sx, ...rest }: TextProps) => JSX.Element;
+declare const Blockquote: (props: TextProps & React__default.RefAttributes<HTMLParagraphElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 /**
  * One of the stylized typography components
@@ -1832,7 +1834,7 @@ declare const Blockquote: ({ children, sx, ...rest }: TextProps) => JSX.Element;
  * under the props tab to right should be passed down via **sx**_)
  *
  */
-declare const Capitalized: ({ children, sx, ...rest }: TextProps) => JSX.Element;
+declare const Capitalized: (props: TextProps & React__default.RefAttributes<HTMLParagraphElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 /**
  * One of the stylized typography components
@@ -1850,7 +1852,7 @@ declare const Capitalized: ({ children, sx, ...rest }: TextProps) => JSX.Element
  * under the props tab to right should be passed down via **sx**_)
  *
  */
-declare const Lead: ({ children, sx, ...rest }: TextProps) => JSX.Element;
+declare const Lead: (props: TextProps & React__default.RefAttributes<HTMLParagraphElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 /**
  * One of the stylized typography components
@@ -1868,7 +1870,7 @@ declare const Lead: ({ children, sx, ...rest }: TextProps) => JSX.Element;
  * props tab to right should be passed down via **sx**_)
  *
  */
-declare const Small: ({ children, sx, ...rest }: TextProps) => JSX.Element;
+declare const Small: (props: TextProps & React__default.RefAttributes<HTMLParagraphElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 /**
  * One of the stylized typography components
@@ -1886,7 +1888,7 @@ declare const Small: ({ children, sx, ...rest }: TextProps) => JSX.Element;
  * props tab to right should be passed down via **sx**_)
  *
  */
-declare const Tiny: ({ children, sx, ...rest }: TextProps) => JSX.Element;
+declare const Tiny: (props: TextProps & React__default.RefAttributes<HTMLParagraphElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 type LabelSizes = '2xs' | 'xs' | 'sm' | 'md' | 'lg';
 interface LabelProps extends FormLabelProps$1 {
@@ -1925,7 +1927,7 @@ declare const NumVal: (props: TextProps & React__default.RefAttributes<HTMLLabel
 
 type HeadingType = typeof Heading;
 type BodyType = typeof P;
-type StylizedType = typeof Text;
+type StylizedType = typeof Blockquote;
 type LabelType = typeof Label;
 type NumValType = typeof NumVal;
 

package/dist/es/northlight.js

@@ -4421,7 +4421,7 @@ var __objRest$1F = (source, exclude) => {
     }
   return target;
 };
-const P = (_a) => {
+const P = forwardRef$1((_a, ref) => {
   var _b = _a, {
     children,
     variant = "16",
@@ -4436,11 +4436,12 @@ const P = (_a) => {
     Text,
     __spreadValues$23({
       variant,
-      sx: styles
+      sx: styles,
+      ref
     }, rest),
     children
   );
-};
+});
 
 var __defProp$22 = Object.defineProperty;
 var __getOwnPropSymbols$22 = Object.getOwnPropertySymbols;
@@ -4470,11 +4471,13 @@ var __objRest$1E = (source, exclude) => {
     }
   return target;
 };
-const Blockquote = (_a) => {
-  var _b = _a, { children, sx = {} } = _b, rest = __objRest$1E(_b, ["children", "sx"]);
-  const styles = useStyleConfig("Blockquote", { sx });
-  return /* @__PURE__ */ React.createElement(Text, __spreadValues$22({ as: "span", sx: styles }, rest), children);
-};
+const Blockquote = forwardRef$1(
+  (_a, ref) => {
+    var _b = _a, { children, sx = {} } = _b, rest = __objRest$1E(_b, ["children", "sx"]);
+    const styles = useStyleConfig("Blockquote", { sx });
+    return /* @__PURE__ */ React.createElement(Text, __spreadValues$22({ as: "span", sx: styles, ref }, rest), children);
+  }
+);
 
 var __defProp$21 = Object.defineProperty;
 var __getOwnPropSymbols$21 = Object.getOwnPropertySymbols;
@@ -4504,7 +4507,7 @@ var __objRest$1D = (source, exclude) => {
     }
   return target;
 };
-const Capitalized = (_a) => {
+const Capitalized = forwardRef$1((_a, ref) => {
   var _b = _a, {
     children,
     sx = {}
@@ -4517,11 +4520,12 @@ const Capitalized = (_a) => {
     Text,
     __spreadValues$21({
       as: "span",
-      sx: styles
+      sx: styles,
+      ref
     }, rest),
     children
   );
-};
+});
 
 var __defProp$20 = Object.defineProperty;
 var __getOwnPropSymbols$20 = Object.getOwnPropertySymbols;
@@ -4551,7 +4555,7 @@ var __objRest$1C = (source, exclude) => {
     }
   return target;
 };
-const Lead = (_a) => {
+const Lead = forwardRef$1((_a, ref) => {
   var _b = _a, {
     children,
     sx = {}
@@ -4564,11 +4568,12 @@ const Lead = (_a) => {
     Text,
     __spreadValues$20({
       as: "span",
-      sx: styles
+      sx: styles,
+      ref
     }, rest),
     children
   );
-};
+});
 
 var __defProp$1$ = Object.defineProperty;
 var __getOwnPropSymbols$1$ = Object.getOwnPropertySymbols;
@@ -4598,7 +4603,7 @@ var __objRest$1B = (source, exclude) => {
     }
   return target;
 };
-const Small = (_a) => {
+const Small = forwardRef$1((_a, ref) => {
   var _b = _a, {
     children,
     sx = {}
@@ -4611,11 +4616,12 @@ const Small = (_a) => {
     Text,
     __spreadValues$1$({
       as: "small",
-      sx: styles
+      sx: styles,
+      ref
     }, rest),
     children
   );
-};
+});
 
 var __defProp$1_ = Object.defineProperty;
 var __getOwnPropSymbols$1_ = Object.getOwnPropertySymbols;
@@ -4645,7 +4651,7 @@ var __objRest$1A = (source, exclude) => {
     }
   return target;
 };
-const Tiny = (_a) => {
+const Tiny = forwardRef$1((_a, ref) => {
   var _b = _a, {
     children,
     sx = {}
@@ -4658,11 +4664,12 @@ const Tiny = (_a) => {
     Text,
     __spreadValues$1_({
       as: "span",
-      sx: styles
+      sx: styles,
+      ref
     }, rest),
     children
   );
-};
+});
 
 var __defProp$1Z = Object.defineProperty;
 var __getOwnPropSymbols$1Z = Object.getOwnPropertySymbols;
@@ -7449,7 +7456,8 @@ const RangeCalendar = (props) => {
     minValue,
     maxValue,
     firstDayOfWeek,
-    onSave
+    onSave,
+    buttonLabel = "Save"
   } = props;
   const { locale } = useLocale();
   const ref = useRef(null);
@@ -7521,7 +7529,7 @@ const RangeCalendar = (props) => {
       range: value,
       firstDayOfWeek
     }
-  ))), /* @__PURE__ */ React.createElement(HStack, { pt: "2", alignSelf: "end" }, isClearable && /* @__PURE__ */ React.createElement(Button, { onClick: resetDate, variant: "ghost", size: "sm" }, "Clear"), /* @__PURE__ */ React.createElement(Button, { variant: "brand", onClick: handleSave, size: "sm" }, "Save"))))))));
+  ))), /* @__PURE__ */ React.createElement(HStack, { pt: "2", alignSelf: "end" }, isClearable && /* @__PURE__ */ React.createElement(Button, { onClick: resetDate, variant: "ghost", size: "sm" }, "Clear"), /* @__PURE__ */ React.createElement(Button, { variant: "brand", onClick: handleSave, size: "sm" }, buttonLabel))))))));
 };
 
 const isValidDateRange = (value) => is(Object, value) && has("startDate", value) && has("endDate", value) && is(String, value.startDate) && is(String, value.endDate);
@@ -7575,7 +7583,8 @@ const DateRangePicker = (props) => {
     maxValue,
     renderInPortal = false,
     firstDayOfWeek,
-    onSave
+    onSave,
+    buttonLabel = "Save"
   } = props;
   const ref = useRef();
   const { group } = useMultiStyleConfig("DatePicker");
@@ -7659,7 +7668,8 @@ const DateRangePicker = (props) => {
         fiscalStartDay: fiscalStartDay || 0,
         isClearable,
         firstDayOfWeek,
-        onSave
+        onSave,
+        buttonLabel
       })
     )))))
   );
@@ -7848,7 +7858,8 @@ const DateRangePickerField = forwardRef$1((_a, ref) => {
     firstDayOfWeek = "monday",
     onChange: onChangeCallback = identity,
     isClearable = true,
-    onSave
+    onSave,
+    buttonLabel = "Save"
   } = _b, rest = __objRest$19(_b, [
     "name",
     "minValue",
@@ -7860,7 +7871,8 @@ const DateRangePickerField = forwardRef$1((_a, ref) => {
     "firstDayOfWeek",
     "onChange",
     "isClearable",
-    "onSave"
+    "onSave",
+    "buttonLabel"
   ]);
   const { setValue, setError, trigger } = useFormContext();
   const handleChange = (dateRange) => {
@@ -7898,7 +7910,8 @@ const DateRangePickerField = forwardRef$1((_a, ref) => {
         minValue,
         maxValue,
         validationState: errors.name ? "invalid" : "valid",
-        isClearable
+        isClearable,
+        buttonLabel
       }, rest)
     )
   );