@vygruppen/spor-react 4.0.3 → 4.1.1

package/dist/index.mjs

@@ -1 +1 @@
-export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, Portal, ProgressBar, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardPopover, Wrap, WrapItem, createTexts, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToast, useToken, useTranslation } from './chunk-XT6QVKN5.mjs';
+export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, Portal, ProgressBar, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardPopover, Wrap, WrapItem, createTexts, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToast, useToken, useTranslation } from './chunk-U2IWIWOD.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "4.0.3",
+  "version": "4.1.1",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -28,8 +28,8 @@
     "awesome-phonenumber": "^5.10.0",
     "framer-motion": "^9.1.7",
     "lottie-react": "^2.3.1",
-    "react-aria": "^3.27.0",
-    "react-stately": "^3.25.0",
+    "react-aria": "^3.30.0",
+    "react-stately": "^3.28.0",
     "react-swipeable": "^7.0.0"
   },
   "devDependencies": {

package/src/accordion/Accordion.test.tsx

@@ -9,7 +9,7 @@ describe("<Accordion />", () => {
     const { container, getByRole } = render(
       <Accordion>
         <ExpandableItem title="Title">Content</ExpandableItem>
-      </Accordion>
+      </Accordion>,
     );
     await act(async () => {
       expect(await axe(container)).toHaveNoViolations();

package/src/accordion/Accordion.tsx

@@ -64,5 +64,5 @@ export const Accordion = forwardRef<AccordionProps, "div">(
         </ChakraAccordion>
       </AccordionProvider>
     );
-  }
+  },
 );

package/src/accordion/AccordionContext.tsx

@@ -20,7 +20,7 @@ export const useAccordionContext = () => {
   const context = React.useContext(AccordionContext);
   if (context === null) {
     throw new Error(
-      "useAccordionContext must be used within AccordionProvider"
+      "useAccordionContext must be used within AccordionProvider",
     );
   }
   return context;

package/src/accordion/Expandable.tsx

@@ -131,8 +131,8 @@ const warnAboutMismatchingIcon = ({ icon, size }: WarnAboutMismatchingIcon) => {
       console.warn(
         `You passed a filled icon. This component requires outlined icons. You passed ${displayName}, replace it with ${displayName.replace(
           "Fill",
-          "Outline"
-        )}.`
+          "Outline",
+        )}.`,
       );
       return;
     }
@@ -140,8 +140,8 @@ const warnAboutMismatchingIcon = ({ icon, size }: WarnAboutMismatchingIcon) => {
       console.warn(
         `The icon you passed was of the wrong size for the lg size. You passed ${displayName}, replace it with ${displayName.replace(
           /(\d{2})Icon/,
-          "30Icon"
-        )}.`
+          "30Icon",
+        )}.`,
       );
       return;
     }
@@ -149,8 +149,8 @@ const warnAboutMismatchingIcon = ({ icon, size }: WarnAboutMismatchingIcon) => {
       console.warn(
         `The icon you passed was of the wrong size for the ${size} size. You passed ${displayName}, replace it with ${displayName.replace(
           /(\d{2})Icon/,
-          "24Icon"
-        )}.`
+          "24Icon",
+        )}.`,
       );
     }
   }

package/src/alert/BaseAlert.test.tsx

@@ -6,31 +6,31 @@ import { BaseAlert } from "./BaseAlert";
 describe("<BaseAlert />", () => {
   it("is accessible as variant='success'", async () => {
     const { container } = render(
-      <BaseAlert variant="success">Test text</BaseAlert>
+      <BaseAlert variant="success">Test text</BaseAlert>,
     );
     expect(await axe(container)).toHaveNoViolations();
   });
   it("is accessible as variant='info'", async () => {
     const { container } = render(
-      <BaseAlert variant="info">Test text</BaseAlert>
+      <BaseAlert variant="info">Test text</BaseAlert>,
     );
     expect(await axe(container)).toHaveNoViolations();
   });
   it("is accessible as variant='warning'", async () => {
     const { container } = render(
-      <BaseAlert variant="warning">Test text</BaseAlert>
+      <BaseAlert variant="warning">Test text</BaseAlert>,
     );
     expect(await axe(container)).toHaveNoViolations();
   });
   it("is accessible as variant='error'", async () => {
     const { container } = render(
-      <BaseAlert variant="error">Test text</BaseAlert>
+      <BaseAlert variant="error">Test text</BaseAlert>,
     );
     expect(await axe(container)).toHaveNoViolations();
   });
   it("is accessible as variant='alt-transport'", async () => {
     const { container } = render(
-      <BaseAlert variant="alt-transport">Test text</BaseAlert>
+      <BaseAlert variant="alt-transport">Test text</BaseAlert>,
     );
     expect(await axe(container)).toHaveNoViolations();
   });

package/src/alert/BaseAlert.tsx

@@ -11,7 +11,11 @@ export type BaseAlertProps = BoxProps & {
 /**
  * A base alert box component. Should only be composed by other alert components.
  */
-export const BaseAlert = ({ variant, children, ...boxProps }: BaseAlertProps) => {
+export const BaseAlert = ({
+  variant,
+  children,
+  ...boxProps
+}: BaseAlertProps) => {
   const styles = useMultiStyleConfig("Alert", { variant });
   return (
     <Box __css={styles.container} {...boxProps}>

package/src/alert/ClosableAlert.test.tsx

@@ -7,7 +7,7 @@ import { ClosableAlert } from ".";
 describe("<ClosableAlert />", () => {
   it("closes when you click the close button", async () => {
     const { getByRole, queryByRole } = render(
-      <ClosableAlert variant="info">Test text</ClosableAlert>
+      <ClosableAlert variant="info">Test text</ClosableAlert>,
     );
     act(() => {
       getByRole("button").click();
@@ -20,7 +20,7 @@ describe("<ClosableAlert />", () => {
     const { getByRole } = render(
       <ClosableAlert variant="info" onClose={handleClick}>
         Test text
-      </ClosableAlert>
+      </ClosableAlert>,
     );
     act(() => {
       getByRole("button").click();
@@ -30,7 +30,7 @@ describe("<ClosableAlert />", () => {
 
   it("is accessible", async () => {
     const { container } = render(
-      <ClosableAlert variant="info">Test text</ClosableAlert>
+      <ClosableAlert variant="info">Test text</ClosableAlert>,
     );
     expect(await axe(container)).toHaveNoViolations();
   });

package/src/alert/ExpandableAlert.test.tsx

@@ -9,7 +9,7 @@ describe("<ExpandableAlert />", () => {
     const { getByRole, getByText } = render(
       <ExpandableAlert variant="info" title="Title">
         Test text
-      </ExpandableAlert>
+      </ExpandableAlert>,
     );
     await waitFor(() => expect(getByText("Test text")).not.toBeVisible());
     act(() => {
@@ -27,7 +27,7 @@ describe("<ExpandableAlert />", () => {
     const { getByRole } = render(
       <ExpandableAlert variant="info" title="Title" onToggle={handleClick}>
         Test text
-      </ExpandableAlert>
+      </ExpandableAlert>,
     );
 
     act(() => {
@@ -47,13 +47,13 @@ describe("<ExpandableAlert />", () => {
     const { queryByRole, rerender } = render(
       <ExpandableAlert variant="info" title="Title" headingLevel="h2">
         Test text
-      </ExpandableAlert>
+      </ExpandableAlert>,
     );
     expect(queryByRole("heading", { level: 2 })).toBeInTheDocument();
     rerender(
       <ExpandableAlert variant="info" title="Title" headingLevel="h3">
         Test text
-      </ExpandableAlert>
+      </ExpandableAlert>,
     );
     expect(queryByRole("heading", { level: 2 })).not.toBeInTheDocument();
     expect(queryByRole("heading", { level: 3 })).toBeInTheDocument();
@@ -63,7 +63,7 @@ describe("<ExpandableAlert />", () => {
     const { container, getByRole } = render(
       <ExpandableAlert variant="info" title="Title">
         Test text
-      </ExpandableAlert>
+      </ExpandableAlert>,
     );
     await act(async () => {
       expect(await axe(container)).toHaveNoViolations();

package/src/button/Button.test.tsx

@@ -10,7 +10,7 @@ describe("<Button />", () => {
     const { getByRole } = render(
       <Button variant="primary" onClick={handleClick}>
         Click me
-      </Button>
+      </Button>,
     );
     getByRole("button").click();
     expect(handleClick).toHaveBeenCalled();

package/src/button/Button.tsx

@@ -46,7 +46,7 @@ export type ButtonProps = Exclude<
  *
  * ```tsx
  * <Button variant="primary" onClick={confirmOrder}>
- *   Buy trip
+ *  Buy trip
  * </Button>
  * ```
  *

package/src/button/CloseButton.tsx

@@ -38,7 +38,7 @@ export const CloseButton = forwardRef<CloseButtonProps, "button">(
         {...props}
       />
     );
-  }
+  },
 );
 
 const getIcon = (size: CloseButtonProps["size"]) => {

package/src/button/FloatingActionButton.tsx

@@ -44,10 +44,10 @@ export const FloatingActionButton = forwardRef<
       placement = "bottom right",
       ...props
     },
-    ref
+    ref,
   ) => {
     const [isTextVisible, setIsTextVisible] = React.useState(
-      externalIsTextVisible !== undefined ? externalIsTextVisible : false
+      externalIsTextVisible !== undefined ? externalIsTextVisible : false,
     );
     const scrollDirection = useScrollDirection();
     useEffect(() => {
@@ -56,7 +56,7 @@ export const FloatingActionButton = forwardRef<
       }
       const id = window.setTimeout(
         () => setIsTextVisible(scrollDirection !== "down"),
-        1000
+        1000,
       );
       return () => window.clearTimeout(id);
     }, [scrollDirection, externalIsTextVisible]);
@@ -99,7 +99,7 @@ export const FloatingActionButton = forwardRef<
         </MotionBox>
       </MotionBox>
     );
-  }
+  },
 );
 
 type ScrollDirection = "up" | "down" | null;
@@ -107,7 +107,7 @@ const useScrollDirection = () => {
   const [scrollDirection, setScrollDirection] =
     React.useState<ScrollDirection>(null);
   const lastScrollPosition = React.useRef(
-    typeof window !== "undefined" ? window.scrollY : 0
+    typeof window !== "undefined" ? window.scrollY : 0,
   );
   React.useEffect(() => {
     const onScroll = () => {

package/src/button/IconButton.tsx

@@ -59,5 +59,5 @@ export const IconButton = forwardRef<IconButtonProps, As>(
       spinner={<ColorSpinner margin={1} />}
       ref={ref}
     />
-  )
+  ),
 );

package/src/card/Card.tsx

@@ -12,7 +12,8 @@ export type CardProps = Exclude<BoxProps, "size"> & {
     | "green"
     | "teal"
     | "yellow"
-    | "orange";
+    | "orange"
+    | "red";
 };
 /**
  * Renders a card.
@@ -55,5 +56,5 @@ export const Card = forwardRef<CardProps, As>(
         {children}
       </Box>
     );
-  }
+  },
 );

package/src/card/index.tsx

@@ -1 +1 @@
-export * from "./Card";
+export * from "./Card";

package/src/datepicker/Calendar.tsx

@@ -1,25 +1,25 @@
 import { Box, ResponsiveValue } from "@chakra-ui/react";
-import { createCalendar, DateValue } from "@internationalized/date";
-import { useCalendarState } from "@react-stately/calendar";
+import { DateValue, createCalendar } from "@internationalized/date";
 import React from "react";
 import {
   CalendarProps as ReactAriaCalendarProps,
   useCalendar,
 } from "react-aria";
+import { useCalendarState } from "react-stately";
+import { createTexts, useTranslation } from "../i18n";
 import { CalendarGrid } from "./CalendarGrid";
 import { CalendarHeader } from "./CalendarHeader";
 import { useCurrentLocale } from "./utils";
-import { createTexts, useTranslation } from "../i18n";
 
 type CalendarProps = ReactAriaCalendarProps<DateValue> & {
   showYearNavigation?: boolean;
-  variant: ResponsiveValue<
-   "base"
-  | "floating"
-  | "ghost"
-  >;
+  variant: ResponsiveValue<"base" | "floating" | "ghost">;
 };
-export function Calendar({ showYearNavigation, variant, ...props }: CalendarProps) {
+export function Calendar({
+  showYearNavigation,
+  variant,
+  ...props
+}: CalendarProps) {
   const { t } = useTranslation();
   const locale = useCurrentLocale();
   const state = useCalendarState({

package/src/datepicker/CalendarCell.tsx

@@ -10,16 +10,17 @@ import { useCalendarCell } from "react-aria";
 import { CalendarState, RangeCalendarState } from "react-stately";
 
 type CalendarCellProps = {
-  variant: ResponsiveValue<
-    "base" 
-  | "floating"
-  | "ghost"
-  >;
+  variant: ResponsiveValue<"base" | "floating" | "ghost">;
   state: CalendarState | RangeCalendarState;
   date: CalendarDate;
   currentMonth: DateValue;
 };
-export function CalendarCell({ state, date, currentMonth, variant }: CalendarCellProps) {
+export function CalendarCell({
+  state,
+  date,
+  currentMonth,
+  variant,
+}: CalendarCellProps) {
   const ref = useRef(null);
   const {
     cellProps,
@@ -31,7 +32,7 @@ export function CalendarCell({ state, date, currentMonth, variant }: CalendarCel
   } = useCalendarCell({ date }, state, ref);
 
   const isOutsideMonth = !isSameMonth(currentMonth, date);
-  const styles = useMultiStyleConfig("Datepicker", {variant});
+  const styles = useMultiStyleConfig("Datepicker", { variant });
 
   const stateProps: Record<string, any> = {};
   if (isSelected) {
@@ -58,7 +59,7 @@ export function CalendarCell({ state, date, currentMonth, variant }: CalendarCel
       (event: TouchEvent) => {
         event.preventDefault();
       },
-      { passive: false, once: true }
+      { passive: false, once: true },
     );
   }, []);
 

package/src/datepicker/CalendarGrid.tsx

@@ -16,15 +16,15 @@ const weekDays: Record<Language, string[]> = {
 };
 
 type CalendarGridProps = AriaCalendarGridProps & {
-  variant: ResponsiveValue<
-   "base" 
-  | "floating"
-  | "ghost"
-  >;
+  variant: ResponsiveValue<"base" | "floating" | "ghost">;
   state: CalendarState | RangeCalendarState;
   offset?: { months?: number };
 };
-export function CalendarGrid({ state, variant ,offset = {} }: CalendarGridProps) {
+export function CalendarGrid({
+  state,
+  variant,
+  offset = {},
+}: CalendarGridProps) {
   const { language } = useTranslation();
   const locale = useCurrentLocale();
   const startDate = state.visibleRange.start.add(offset);
@@ -34,13 +34,13 @@ export function CalendarGrid({ state, variant ,offset = {} }: CalendarGridProps)
       startDate,
       endDate,
     },
-    state
+    state,
   );
 
   // Get the number of weeks in the month so we can render the proper number of rows.
   const weeksInMonth = getWeeksInMonth(state.visibleRange.start, locale);
   const weeksInMonthRange = new Array(weeksInMonth).fill(0).map((_, i) => i);
-  const styles = useMultiStyleConfig("Datepicker", {variant});
+  const styles = useMultiStyleConfig("Datepicker", { variant });
 
   return (
     <table {...gridProps}>
@@ -76,7 +76,7 @@ export function CalendarGrid({ state, variant ,offset = {} }: CalendarGridProps)
                   />
                 ) : (
                   <td key={dayIndex} />
-                )
+                ),
               )}
           </tr>
         ))}

package/src/datepicker/CalendarHeader.tsx

@@ -31,10 +31,10 @@ export function CalendarHeader({
   const monthAndYearTitle = `${monthTitle} ${state.focusedDate.year}`;
 
   const isPreviousYearDisabled = state.isInvalid(
-    state.visibleRange.start.subtract({ years: 1 })
+    state.visibleRange.start.subtract({ years: 1 }),
   );
   const isNextYearDisabled = state.isInvalid(
-    state.visibleRange.start.add({ years: 1 })
+    state.visibleRange.start.add({ years: 1 }),
   );
   const areAllOtherYearsDisabled = isPreviousYearDisabled && isNextYearDisabled;
   const isYearPickerVisible = showYearNavigation && !areAllOtherYearsDisabled;

package/src/datepicker/CalendarTriggerButton.tsx

@@ -12,25 +12,20 @@ import { AriaButtonProps } from "react-aria";
 import { createTexts, useTranslation } from "..";
 
 type CalendarTriggerButtonProps = AriaButtonProps<"button"> & {
-  variant: ResponsiveValue<
-     "base" 
-    | "floating" 
-    | "ghost"
-  >;
+  variant: ResponsiveValue<"base" | "floating" | "ghost">;
 };
 export const CalendarTriggerButton = forwardRef<CalendarTriggerButtonProps, As>(
   ({ variant, ...buttonProps }, ref) => {
     const { t } = useTranslation();
-    const styles = useMultiStyleConfig("Datepicker", {variant});
+    const styles = useMultiStyleConfig("Datepicker", { variant });
 
     const { onPress, ...filteredButtonProps } = buttonProps;
 
     const handleOnPress = (event: KeyboardEvent) => {
       if (onPress) {
-        if (event.key == "Enter" || event.key == " ")
-        onPress(event as any)
+        if (event.key == "Enter" || event.key == " ") onPress(event as any);
       }
-    }
+    };
 
     return (
       <PopoverAnchor>
@@ -47,7 +42,7 @@ export const CalendarTriggerButton = forwardRef<CalendarTriggerButtonProps, As>(
         </Box>
       </PopoverAnchor>
     );
-  }
+  },
 );
 
 const texts = createTexts({

package/src/datepicker/DateField.tsx

@@ -1,9 +1,9 @@
 import { Box, Flex, FormLabel, useMultiStyleConfig } from "@chakra-ui/react";
 import { DateValue, GregorianCalendar } from "@internationalized/date";
-import { useDateFieldState } from "@react-stately/datepicker";
 import { DOMAttributes, FocusableElement } from "@react-types/shared";
 import React, { RefObject, forwardRef, useRef } from "react";
 import { AriaDateFieldProps, useDateField } from "react-aria";
+import { useDateFieldState } from "react-stately";
 import { DateTimeSegment } from "./DateTimeSegment";
 import { useCurrentLocale } from "./utils";
 
@@ -36,7 +36,7 @@ export const DateField = forwardRef<HTMLDivElement, DateFieldProps>(
     const { fieldProps, labelProps } = useDateField(
       props,
       state,
-      ref as RefObject<HTMLDivElement>
+      ref as RefObject<HTMLDivElement>,
     );
 
     return (
@@ -69,5 +69,5 @@ export const DateField = forwardRef<HTMLDivElement, DateFieldProps>(
         />
       </Box>
     );
-  }
+  },
 );

package/src/datepicker/DatePicker.tsx

@@ -15,9 +15,9 @@ import {
   useMultiStyleConfig,
 } from "@chakra-ui/react";
 import { DateValue } from "@internationalized/date";
-import { useDatePickerState } from "@react-stately/datepicker";
-import React, { forwardRef, useRef } from "react";
+import React, { ReactNode, forwardRef, useRef } from "react";
 import { AriaDatePickerProps, I18nProvider, useDatePicker } from "react-aria";
+import { useDatePickerState } from "react-stately";
 import { FormErrorMessage } from "..";
 import { Calendar } from "./Calendar";
 import { CalendarTriggerButton } from "./CalendarTriggerButton";
@@ -54,7 +54,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
       width = "auto",
       ...props
     },
-    externalRef
+    externalRef,
   ) => {
     const formControlProps = useFormControlContext();
     const state = useDatePickerState({
@@ -77,7 +77,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
     } = useDatePicker(
       props,
       state,
-      ref as React.MutableRefObject<HTMLDivElement>
+      ref as React.MutableRefObject<HTMLDivElement>,
     );
 
     const styles = useMultiStyleConfig("Datepicker", { variant });
@@ -141,7 +141,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
               </PopoverAnchor>
             </InputGroup>
             <FormErrorMessage {...errorMessageProps}>
-              {errorMessage}
+              {errorMessage as ReactNode}
             </FormErrorMessage>
             {state.isOpen && !props.isDisabled && withPortal && (
               <Portal>{popoverContent}</Portal>
@@ -151,5 +151,5 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
         </Box>
       </I18nProvider>
     );
-  }
+  },
 );

package/src/datepicker/DateRangePicker.tsx

@@ -16,13 +16,13 @@ import {
   useMultiStyleConfig,
 } from "@chakra-ui/react";
 import { DateValue } from "@internationalized/date";
-import { useDateRangePickerState } from "@react-stately/datepicker";
 import React, { useRef } from "react";
 import {
   AriaDateRangePickerProps,
   I18nProvider,
   useDateRangePicker,
 } from "react-aria";
+import { useDateRangePickerState } from "react-stately";
 import { CalendarTriggerButton } from "./CalendarTriggerButton";
 import { DateField } from "./DateField";
 import { RangeCalendar } from "./RangeCalendar";

package/src/datepicker/DateTimeSegment.tsx

@@ -22,7 +22,7 @@ export const DateTimeSegment = forwardRef<HTMLDivElement, DateTimeSegmentProps>(
     const { segmentProps } = useDateSegment(
       segment,
       state,
-      ref as RefObject<HTMLDivElement>
+      ref as RefObject<HTMLDivElement>,
     );
 
     const styles = useMultiStyleConfig("Datepicker", {
@@ -52,7 +52,7 @@ export const DateTimeSegment = forwardRef<HTMLDivElement, DateTimeSegmentProps>(
           : segment.text}
       </Box>
     );
-  }
+  },
 );
 
 const isPaddable = (segmentType: DateSegment["type"]) =>

package/src/datepicker/RangeCalendar.tsx

@@ -1,11 +1,11 @@
-import { Box, ResponsiveValue, useMultiStyleConfig } from "@chakra-ui/react";
-import { createCalendar, DateValue } from "@internationalized/date";
-import { useRangeCalendarState } from "@react-stately/calendar";
+import { Box, ResponsiveValue } from "@chakra-ui/react";
+import { DateValue, createCalendar } from "@internationalized/date";
 import React, { useRef } from "react";
 import {
   RangeCalendarProps as ReactAriaRangeCalendarProps,
   useRangeCalendar,
 } from "react-aria";
+import { useRangeCalendarState } from "react-stately";
 import { CalendarGrid } from "./CalendarGrid";
 import { CalendarHeader } from "./CalendarHeader";
 import { useCurrentLocale } from "./utils";
@@ -26,13 +26,16 @@ export function RangeCalendar(props: RangeCalendarProps) {
   const ref = useRef(null);
   const { calendarProps, title } = useRangeCalendar(props, state, ref);
 
-
   return (
     <Box {...calendarProps} ref={ref}>
       <CalendarHeader state={state} title={title} />
       <Box display="flex" gap="8">
         <CalendarGrid variant={props.variant} state={state} />
-        <CalendarGrid variant={props.variant} state={state} offset={{ months: 1 }} />
+        <CalendarGrid
+          variant={props.variant}
+          state={state}
+          offset={{ months: 1 }}
+        />
       </Box>
     </Box>
   );

package/src/datepicker/StyledField.tsx

@@ -10,11 +10,7 @@ import {
 import React from "react";
 
 type StyledFieldProps = BoxProps & {
-  variant: ResponsiveValue< 
-  "base" 
-  | "floating" 
-  | "ghost" 
->;
+  variant: ResponsiveValue<"base" | "floating" | "ghost">;
 };
 export const StyledField = forwardRef<StyledFieldProps, As>(
   ({ children, variant, ...otherProps }, ref) => {
@@ -32,5 +28,5 @@ export const StyledField = forwardRef<StyledFieldProps, As>(
         {children}
       </Box>
     );
-  }
+  },
 );