@northlight/ui 2.28.5 → 2.28.6

package/dist/es/northlight.d.ts

@@ -939,10 +939,10 @@ type FormBody = Record<string, DateRange>;
  * @example (Example)
  * ## Another example
  * (?
-  * <DatePicker
-  * variant="filled"
-  * dateFormat="mm|dd-yyyy"
-  * />
+ * <DatePicker
+ * variant="filled"
+ * dateFormat="mm|dd-yyyy"
+ * />
  * ?)
  *
  */

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$2, Spinner as Spinner$2, Button as Button$2, Checkbox as Checkbox$2, FormControl, Stack, FormErrorMessage, Flex, IconButton as IconButton$1, Popover as Popover$2, 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, Portal, 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, TagLeftIcon, 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, 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$2, useDisclosure, useBoolean, PopoverTrigger, PopoverContent, PopoverHeader, PopoverBody, SimpleGrid, SlideFade as SlideFade$1, keyframes, extendTheme, Table as Table$2, Thead, Tr, Tbody, Select as Select$2, PopoverAnchor, InputGroup, InputRightElement, Link as Link$1, Spacer, useOutsideClick, Portal, 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, TagLeftIcon, 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, 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';
@@ -16,7 +16,7 @@ import { useRadioGroup, useRadio } from '@react-aria/radio';
 import { mergeProps } from '@react-aria/utils';
 import { useRadioGroupState } from '@react-stately/radio';
 import { useCheckboxGroupState } from '@react-stately/checkbox';
-import { randomColor, cssVar } from '@chakra-ui/theme-tools';
+import { randomColor, cssVar, mode } from '@chakra-ui/theme-tools';
 import { useDateSegment, useDateField, useDatePicker, useDateRangePicker } from '@react-aria/datepicker';
 import { useDateFieldState, useDatePickerState, useDateRangePickerState } from '@react-stately/datepicker';
 import { createCalendar, today, isSameMonth, getWeeksInMonth, getDayOfWeek, GregorianCalendar, parseDate, startOfWeek, endOfWeek, startOfMonth, endOfMonth, startOfYear, endOfYear } from '@internationalized/date';
@@ -5682,7 +5682,16 @@ const FilePicker$1 = {
 };
 
 const Table$1 = {
-  parts: ["table", "th", "td"],
+  parts: [
+    "table",
+    "th",
+    "td",
+    "columnHeader",
+    "cell",
+    "caption",
+    "footer",
+    "tr"
+  ],
   variants: {
     rounded: () => ({
       table: {
@@ -5703,7 +5712,48 @@ const Table$1 = {
         borderColor: "border.default",
         borderTopWidth: "xs"
       }
-    })
+    }),
+    striped: (props) => {
+      const { colorScheme: c = "gray" } = props;
+      return {
+        table: {
+          borderSpacing: "0",
+          borderCollapse: "separate",
+          borderRadius: "md",
+          borderColor: "border.default",
+          borderWidth: "xs",
+          p: "2"
+        },
+        columnHeader: {
+          color: "text.subdued",
+          bgColor: mode(`${c}.100`, `${c}.700`)(props),
+          fontWeight: "bold",
+          textTransform: "none",
+          fontSize: "sm"
+        },
+        cell: {
+          bgColor: mode(`${c}.100`, `${c}.700`)(props)
+        },
+        caption: {
+          color: mode("gray.600", "gray.100")(props)
+        },
+        th: {
+          borderBottomWidth: "0"
+        },
+        tr: {
+          "&:nth-of-type(odd)": {
+            td: {
+              background: mode(`${c}.100`, `${c}.700`)(props)
+            }
+          }
+        },
+        footer: {
+          tr: {
+            th: { borderBottomWidth: 0 }
+          }
+        }
+      };
+    }
   }
 };
 
@@ -6284,14 +6334,16 @@ const CalendarCell = ({
   ));
 };
 
-const DayLabels = memo(({
-  weekDays
-}) => {
+const DayLabels = memo(({ weekDays }) => {
   const { dayLabel } = useMultiStyleConfig$1("Calendar");
   const weekDaysWithIds = weekDays.map((day, i) => ({ label: day, _id: i }));
-  return /* @__PURE__ */ React.createElement(chakra$1.tr, null, /* @__PURE__ */ React.createElement(chakra$1.th, null), weekDaysWithIds.map(({ label, _id }) => /* @__PURE__ */ React.createElement(chakra$1.th, { key: _id, __css: dayLabel }, label)));
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, weekDaysWithIds.map(({ label, _id }) => /* @__PURE__ */ React.createElement(chakra$1.th, { key: _id, __css: dayLabel }, label)));
 });
 
+const mondayFirstWeekDays = ["M", "T", "W", "T", "F", "S", "S"];
+const sundayFirstWeekDays = ["S", "M", "T", "W", "T", "F", "S"];
+const getWeekdays = (firstDayOfWeek) => firstDayOfWeek === "monday" ? mondayFirstWeekDays : sundayFirstWeekDays;
+
 var __defProp$1w = Object.defineProperty;
 var __getOwnPropSymbols$1w = Object.getOwnPropertySymbols;
 var __hasOwnProp$1w = Object.prototype.hasOwnProperty;
@@ -6322,21 +6374,25 @@ var __objRest$1e = (source, exclude) => {
 };
 const CalendarGrid = memo(
   (_a) => {
-    var _b = _a, { state, locale } = _b, rest = __objRest$1e(_b, ["state", "locale"]);
+    var _b = _a, { state, locale, firstDayOfWeek } = _b, rest = __objRest$1e(_b, ["state", "locale", "firstDayOfWeek"]);
     const startDate = state.visibleRange.start;
-    const { gridProps, headerProps, weekDays } = useCalendarGrid(rest, state);
+    const { gridProps, headerProps } = useCalendarGrid(rest, state);
     const weeksInMonth = getWeeksInMonth(startDate, locale);
-    return /* @__PURE__ */ React.createElement(Table, __spreadValues$1w({ variant: "unstyled" }, gridProps), /* @__PURE__ */ React.createElement(Thead, __spreadValues$1w({}, headerProps), /* @__PURE__ */ React.createElement(DayLabels, { weekDays })), /* @__PURE__ */ React.createElement(Tbody, null, times((weekIndex) => /* @__PURE__ */ React.createElement(Tr, { key: weekIndex }, state.getDatesInWeek(weekIndex, startDate).map(
-      (date) => date ? /* @__PURE__ */ React.createElement(
-        CalendarCell,
-        {
-          key: date.day,
-          state,
-          date,
-          currentMonth: startDate
-        }
-      ) : /* @__PURE__ */ React.createElement(chakra.td, null)
-    )), weeksInMonth)));
+    const weekDays = getWeekdays(firstDayOfWeek);
+    return /* @__PURE__ */ React.createElement(Table, __spreadValues$1w({ variant: "unstyled" }, gridProps), /* @__PURE__ */ React.createElement(Thead, __spreadValues$1w({}, headerProps), /* @__PURE__ */ React.createElement(Tr, null, /* @__PURE__ */ React.createElement(DayLabels, { weekDays }))), /* @__PURE__ */ React.createElement(Tbody, null, times(
+      (weekIndex) => /* @__PURE__ */ React.createElement(Tr, { key: weekIndex }, state.getDatesInWeek(weekIndex, startDate).map(
+        (date) => date ? /* @__PURE__ */ React.createElement(
+          CalendarCell,
+          {
+            key: date.day,
+            state,
+            date,
+            currentMonth: startDate
+          }
+        ) : /* @__PURE__ */ React.createElement(chakra.td, null)
+      )),
+      weeksInMonth
+    )));
   }
 );
 
@@ -6425,7 +6481,7 @@ const MonthSelect = ({ state }) => {
       w: "max-content",
       textAlign: "center"
     },
-    months.map((month, i) => /* @__PURE__ */ React.createElement("option", { value: i }, month))
+    months.map((month, i) => /* @__PURE__ */ React.createElement("option", { value: i, key: `month-${i}` }, month))
   );
 };
 
@@ -6576,6 +6632,7 @@ const RangeCell = ({
       ring: isToday && !isSelected ? "1px" : "0px",
       ringColor: "blue.500",
       mx: "-1px",
+      ml: isToday ? "-2px " : void 0,
       my: "0a",
       w: "8",
       h: "8",
@@ -6635,10 +6692,12 @@ var __objRest$1c = (source, exclude) => {
 const StandaloneCalendarGrid = (_a) => {
   var _b = _a, {
     state,
-    range
+    range,
+    firstDayOfWeek
   } = _b, rest = __objRest$1c(_b, [
     "state",
-    "range"
+    "range",
+    "firstDayOfWeek"
   ]);
   const { locale } = useLocale();
   const { calendarProps, prevButtonProps, nextButtonProps } = useCalendar(
@@ -6646,7 +6705,8 @@ const StandaloneCalendarGrid = (_a) => {
     state
   );
   const startDate = state.visibleRange.start;
-  const { gridProps, headerProps, weekDays } = useCalendarGrid(rest, state);
+  const { gridProps, headerProps } = useCalendarGrid(rest, state);
+  const weekDays = getWeekdays(firstDayOfWeek);
   const weeksInMonth = getWeeksInMonth(startDate, locale);
   const weekNumberStart = useMemo(
     () => getWeekNumberAtStartOfMonth(
@@ -6656,24 +6716,21 @@ const StandaloneCalendarGrid = (_a) => {
     ),
     [startDate.year, startDate.month]
   );
-  return /* @__PURE__ */ React.createElement(Box, __spreadProps$g(__spreadValues$1t({}, calendarProps), { h: "265px", p: "0" }), /* @__PURE__ */ React.createElement(Stack, null, /* @__PURE__ */ React.createElement(Flex, { justify: "space-between", w: "full", p: "1", alignItems: "center" }, /* @__PURE__ */ React.createElement(MonthButton, __spreadValues$1t({}, prevButtonProps), /* @__PURE__ */ React.createElement(Icon$1, { as: ChevronLeftSolid, boxSize: 4 })), /* @__PURE__ */ React.createElement(HStack, { spacing: "0" }, /* @__PURE__ */ React.createElement(MonthSelect, { state }), /* @__PURE__ */ React.createElement(YearSelectRangeCalendar, { state })), /* @__PURE__ */ React.createElement(MonthButton, __spreadValues$1t({}, nextButtonProps), /* @__PURE__ */ React.createElement(Icon$1, { as: ChevronRightSolid, boxSize: 4 }))), /* @__PURE__ */ React.createElement(chakra.table, __spreadProps$g(__spreadValues$1t({}, gridProps), { sx: { borderSpacing: "0" } }), /* @__PURE__ */ React.createElement(chakra.thead, __spreadValues$1t({}, headerProps), /* @__PURE__ */ React.createElement(DayLabels, { weekDays })), /* @__PURE__ */ React.createElement(chakra.tbody, null, times(
-    (weekIndex) => {
-      const weekNumber = weekNumberStart + weekIndex;
-      return /* @__PURE__ */ React.createElement(chakra.tr, { key: weekIndex }, /* @__PURE__ */ React.createElement(chakra.td, null, /* @__PURE__ */ React.createElement(Small$1, { sx: { color: "text.subdued" }, pr: "2" }, "w.", weekNumber > 52 ? weekNumber - 52 : weekNumber)), state.getDatesInWeek(weekIndex, startDate).map(
-        (date) => date ? /* @__PURE__ */ React.createElement(
-          RangeCell,
-          {
-            key: date.day,
-            state,
-            range,
-            date,
-            currentMonth: startDate
-          }
-        ) : /* @__PURE__ */ React.createElement(chakra.td, null)
-      ));
-    },
-    weeksInMonth
-  )))));
+  return /* @__PURE__ */ React.createElement(Box, __spreadProps$g(__spreadValues$1t({}, calendarProps), { h: "265px", p: "0" }), /* @__PURE__ */ React.createElement(Stack, null, /* @__PURE__ */ React.createElement(Flex, { justify: "space-between", w: "full", p: "1", alignItems: "center" }, /* @__PURE__ */ React.createElement(MonthButton, __spreadValues$1t({}, prevButtonProps), /* @__PURE__ */ React.createElement(Icon$1, { as: ChevronLeftSolid, boxSize: 4 })), /* @__PURE__ */ React.createElement(HStack, { spacing: "0" }, /* @__PURE__ */ React.createElement(MonthSelect, { state }), /* @__PURE__ */ React.createElement(YearSelectRangeCalendar, { state })), /* @__PURE__ */ React.createElement(MonthButton, __spreadValues$1t({}, nextButtonProps), /* @__PURE__ */ React.createElement(Icon$1, { as: ChevronRightSolid, boxSize: 4 }))), /* @__PURE__ */ React.createElement(chakra.table, __spreadProps$g(__spreadValues$1t({}, gridProps), { sx: { borderSpacing: "0" } }), /* @__PURE__ */ React.createElement(chakra.thead, __spreadValues$1t({}, headerProps), /* @__PURE__ */ React.createElement(chakra.tr, null, /* @__PURE__ */ React.createElement(chakra.th, null), /* @__PURE__ */ React.createElement(DayLabels, { weekDays }))), /* @__PURE__ */ React.createElement(chakra.tbody, null, times((weekIndex) => {
+    const weekNumber = weekNumberStart + weekIndex;
+    return /* @__PURE__ */ React.createElement(chakra.tr, { key: weekIndex }, /* @__PURE__ */ React.createElement(chakra.td, null, /* @__PURE__ */ React.createElement(Small$1, { sx: { color: "text.subdued" }, pr: "2" }, "w.", weekNumber > 52 ? weekNumber - 52 : weekNumber)), state.getDatesInWeek(weekIndex, startDate).map(
+      (date) => date ? /* @__PURE__ */ React.createElement(
+        RangeCell,
+        {
+          key: date.day,
+          state,
+          range,
+          date,
+          currentMonth: startDate
+        }
+      ) : /* @__PURE__ */ React.createElement(chakra.td, null)
+    ));
+  }, weeksInMonth)))));
 };
 
 var __defProp$1s = Object.defineProperty;
@@ -6696,6 +6753,7 @@ var __spreadValues$1s = (a, b) => {
 };
 var __spreadProps$f = (a, b) => __defProps$f(a, __getOwnPropDescs$f(b));
 const Calendar = (props) => {
+  const { firstDayOfWeek } = props;
   const { locale } = useLocale();
   const { container } = useMultiStyleConfig("Calendar");
   const state = useCalendarState(__spreadProps$f(__spreadValues$1s({}, props), {
@@ -6706,7 +6764,14 @@ const Calendar = (props) => {
     props,
     state
   );
-  return /* @__PURE__ */ React.createElement(Box, __spreadProps$f(__spreadValues$1s({}, calendarProps), { __css: container }), /* @__PURE__ */ React.createElement(Stack, null, /* @__PURE__ */ React.createElement(Flex, { justifyContent: "space-between" }, /* @__PURE__ */ React.createElement(Box, { paddingInlineStart: "2" }, /* @__PURE__ */ React.createElement(YearSelectCalendar, { state })), /* @__PURE__ */ React.createElement(HStack, { spacing: 2 }, /* @__PURE__ */ React.createElement(MonthButton, __spreadValues$1s({}, prevButtonProps), /* @__PURE__ */ React.createElement(Icon$1, { as: ChevronLeftSolid, boxSize: 4 })), /* @__PURE__ */ React.createElement(MonthButton, __spreadValues$1s({}, nextButtonProps), /* @__PURE__ */ React.createElement(Icon$1, { as: ChevronRightSolid, boxSize: 4 })))), /* @__PURE__ */ React.createElement(CalendarGrid, { state, locale })));
+  return /* @__PURE__ */ React.createElement(Box, __spreadProps$f(__spreadValues$1s({}, calendarProps), { __css: container }), /* @__PURE__ */ React.createElement(Stack, null, /* @__PURE__ */ React.createElement(Flex, { justifyContent: "space-between" }, /* @__PURE__ */ React.createElement(Box, { paddingInlineStart: "2" }, /* @__PURE__ */ React.createElement(YearSelectCalendar, { state })), /* @__PURE__ */ React.createElement(HStack, { spacing: 2 }, /* @__PURE__ */ React.createElement(MonthButton, __spreadValues$1s({}, prevButtonProps), /* @__PURE__ */ React.createElement(Icon$1, { as: ChevronLeftSolid, boxSize: 4 })), /* @__PURE__ */ React.createElement(MonthButton, __spreadValues$1s({}, nextButtonProps), /* @__PURE__ */ React.createElement(Icon$1, { as: ChevronRightSolid, boxSize: 4 })))), /* @__PURE__ */ React.createElement(
+    CalendarGrid,
+    {
+      state,
+      locale,
+      firstDayOfWeek
+    }
+  )));
 };
 
 var __defProp$1r = Object.defineProperty;
@@ -6736,7 +6801,8 @@ const DatePicker = (props) => {
     isInvalid = false,
     dateFormat,
     minValue,
-    variant = "outline"
+    variant = "outline",
+    firstDayOfWeek = "monday"
   } = props;
   const ref = useRef();
   const { group } = useMultiStyleConfig("DatePicker");
@@ -6757,19 +6823,15 @@ const DatePicker = (props) => {
       onClose: () => state.setOpen(false),
       placement: "bottom-end"
     },
-    /* @__PURE__ */ React.createElement(PopoverAnchor, null, /* @__PURE__ */ React.createElement(HStack, { minW: 56 }, /* @__PURE__ */ React.createElement(InputGroup, __spreadProps$e(__spreadValues$1r({}, groupProps), { ref, __css: group }), /* @__PURE__ */ React.createElement(StyledField, { isDisabled, isInvalid, variant }, /* @__PURE__ */ React.createElement(
-      Box,
+    /* @__PURE__ */ React.createElement(PopoverAnchor, null, /* @__PURE__ */ React.createElement(HStack, { minW: 56 }, /* @__PURE__ */ React.createElement(InputGroup, __spreadProps$e(__spreadValues$1r({}, groupProps), { ref, __css: group }), /* @__PURE__ */ React.createElement(
+      StyledField,
       {
-        paddingInlineStart: "1a",
-        paddingInlineEnd: 10
+        isDisabled,
+        isInvalid,
+        variant
       },
-      /* @__PURE__ */ React.createElement(
-        DateField,
-        __spreadProps$e(__spreadValues$1r({}, fieldProps), {
-          dateFormat
-        })
-      )
-    )), /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React.createElement(Box, { paddingInlineStart: "1a", paddingInlineEnd: 10 }, /* @__PURE__ */ React.createElement(DateField, __spreadProps$e(__spreadValues$1r({}, fieldProps), { dateFormat })))
+    ), /* @__PURE__ */ React.createElement(
       InputRightElement,
       {
         sx: { height: "100%", paddingRight: "1" },
@@ -6795,7 +6857,7 @@ const DatePicker = (props) => {
         icon: /* @__PURE__ */ React.createElement(Icon$1, { as: XCloseSolid })
       }
     ))),
-    state.isOpen && /* @__PURE__ */ React.createElement(PopoverContent, __spreadProps$e(__spreadValues$1r({}, dialogProps), { ref, w: 64, border: "none" }), /* @__PURE__ */ React.createElement(FocusScope, { contain: true, restoreFocus: true }, /* @__PURE__ */ React.createElement(Calendar, __spreadValues$1r({}, calendarProps))))
+    state.isOpen && /* @__PURE__ */ React.createElement(PopoverContent, __spreadProps$e(__spreadValues$1r({}, dialogProps), { ref, w: 64, border: "none" }), /* @__PURE__ */ React.createElement(FocusScope, { contain: true, restoreFocus: true }, /* @__PURE__ */ React.createElement(Calendar, __spreadProps$e(__spreadValues$1r({}, calendarProps), { firstDayOfWeek }))))
   );
 };
 
@@ -7090,7 +7152,7 @@ const QuickSelect = ({
   fiscalStartMonth = 0,
   fiscalStartDay = 0,
   locale = "",
-  height = "2xs"
+  height = "17.5rem"
 }) => {
   const { quickDates, fiscalQuarters } = useMemo(
     () => getQuickSelectOptions(state, locale, fiscalStartMonth, fiscalStartDay),
@@ -7112,8 +7174,7 @@ const QuickSelect = ({
       pr: "4",
       _hover: { overflowY: "scroll" },
       w: "36",
-      display: shouldShow(quickDates) ? "initial" : "none",
-      mb: "4"
+      display: shouldShow(quickDates) ? "initial" : "none"
     },
     map(
       (quickDate) => validRange(quickDate.value, state) && /* @__PURE__ */ React.createElement(Box, { minH: "20px", key: `quick-select-${quickDate.label}` }, /* @__PURE__ */ React.createElement(
@@ -7133,7 +7194,7 @@ const QuickSelect = ({
       borderTop: seperator,
       display: shouldShow(fiscalQuarters) ? "initial" : "none"
     }
-  ), /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ React.createElement(Spacer, null), /* @__PURE__ */ React.createElement(
     Flex,
     {
       justifyContent: "space-between",
@@ -7189,7 +7250,8 @@ const RangeCalendar = (props) => {
     fiscalStartMonth,
     fiscalStartDay,
     minValue,
-    maxValue
+    maxValue,
+    firstDayOfWeek
   } = props;
   const { locale } = useLocale();
   const ref = useRef(null);
@@ -7247,13 +7309,15 @@ const RangeCalendar = (props) => {
     StandaloneCalendarGrid,
     {
       state: calendarOneState,
-      range: value
+      range: value,
+      firstDayOfWeek
     }
   ))), /* @__PURE__ */ React.createElement(Stack, { h: "full", justify: "space-between" }, /* @__PURE__ */ React.createElement(Stack, { opacity: value && value.start ? "1" : "0.4" }, /* @__PURE__ */ React.createElement(Box, { p: "2" }, /* @__PURE__ */ React.createElement(Label$1, { size: "xs" }, "End date:"), /* @__PURE__ */ React.createElement(
     StandaloneCalendarGrid,
     {
       state: calendarTwoState,
-      range: value
+      range: value,
+      firstDayOfWeek
     }
   ))), /* @__PURE__ */ React.createElement(HStack, { pt: "2", alignSelf: "end" }, isClearable && /* @__PURE__ */ React.createElement(Button$1, { onClick: resetDate, variant: "ghost", size: "sm" }, "Clear"), /* @__PURE__ */ React.createElement(Button$1, { variant: "brand", onClick: handleClose, size: "sm" }, "Save"))))))));
 };
@@ -7307,7 +7371,8 @@ const DateRangePicker = (props) => {
     value,
     minValue = "1994-03-08",
     maxValue,
-    renderInPortal = false
+    renderInPortal = false,
+    firstDayOfWeek
   } = props;
   const ref = useRef();
   const { group } = useMultiStyleConfig("DatePicker");
@@ -7344,6 +7409,10 @@ const DateRangePicker = (props) => {
   const handleClose = () => {
     state.setOpen(false);
   };
+  useOutsideClick({
+    ref,
+    handler: () => state.setOpen(false)
+  });
   return /* @__PURE__ */ React.createElement(
     Popover$1,
     {
@@ -7385,7 +7454,8 @@ const DateRangePicker = (props) => {
         handleClose,
         fiscalStartMonth: fiscalStartMonth || 0,
         fiscalStartDay: fiscalStartDay || 0,
-        isClearable
+        isClearable,
+        firstDayOfWeek
       })
     ))))
   );