@vygruppen/spor-react 12.0.1 → 12.0.3

package/eslint.config.mjs

@@ -0,0 +1,9 @@
+import config from "@vygruppen/eslint-config";
+
+/** @type {import("eslint").Linter.Config} */
+export default [
+  ...config,
+  {
+    ignores: ["./dist/*"],
+  },
+];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "12.0.1",
+  "version": "12.0.3",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -13,9 +13,9 @@
     "directory": "packages/spor-react"
   },
   "dependencies": {
-    "@chakra-ui/react": "^3.9.0",
     "@ark-ui/react": "^4.9.2",
     "@chakra-ui/anatomy": "^2.3.4",
+    "@chakra-ui/react": "^3.9.0",
     "@chakra-ui/react-use-size": "^2.1.0",
     "@chakra-ui/styled-system": "^2.12.0",
     "@chakra-ui/system": "^2.6.2",
@@ -35,9 +35,9 @@
     "react-stately": "^3.31.1",
     "react-swipeable": "^7.0.1",
     "usehooks-ts": "^3.1.0",
-    "@vygruppen/spor-design-tokens": "4.0.0",
-    "@vygruppen/spor-loader": "0.6.0",
-    "@vygruppen/spor-icon-react": "4.0.1"
+    "@vygruppen/spor-design-tokens": "4.0.1",
+    "@vygruppen/spor-icon-react": "4.0.2",
+    "@vygruppen/spor-loader": "0.6.0"
   },
   "devDependencies": {
     "@chakra-ui/cli": "^3.8.0",
@@ -48,6 +48,7 @@
     "@types/node": "^22.13.4",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "eslint": "^9.25.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "tsup": "^7.2.0",
@@ -55,6 +56,7 @@
     "vitest": "^0.26.3",
     "vitest-axe": "^0.1.0",
     "vitest-canvas-mock": "^0.2.2",
+    "@vygruppen/eslint-config": "1.0.0",
     "@vygruppen/tsconfig": "0.1.0"
   },
   "peerDependencies": {
@@ -66,6 +68,7 @@
     "dev": "tsup --watch",
     "typegen": "npx @chakra-ui/cli typegen src/theme/index.ts",
     "typegen:watch": "npx @chakra-ui/cli typegen src/theme/index.ts --watch",
-    "typegen:strict": "npx @chakra-ui/cli typegen /src/theme/index.ts --strict"
+    "typegen:strict": "npx @chakra-ui/cli typegen /src/theme/index.ts --strict",
+    "lint": "eslint ."
   }
 }

package/src/accordion/Accordion.tsx

@@ -1,20 +1,21 @@
 "use client";
 
 import {
-  Box,
   Accordion as ChakraAccordion,
+  Box,
   HStack,
   Stack,
   useSlotRecipe,
 } from "@chakra-ui/react";
 import { DropdownDownFill24Icon } from "@vygruppen/spor-icon-react";
 import React, { forwardRef } from "react";
+
+import { warnAboutMismatchingIcon } from "./helpers";
 import {
-  AccordionProps,
-  AccordionItemTriggerProps,
   AccordionItemContentProps,
+  AccordionItemTriggerProps,
+  AccordionProps,
 } from "./types";
-import { warnAboutMismatchingIcon } from "./helpers";
 
 /*
  * Wraps a set of AccordionItem or AccordionItem components.

package/src/accordion/Expandable.tsx

@@ -1,14 +1,15 @@
 "use client";
 
 import React, { forwardRef } from "react";
+
 import {
   Accordion,
   AccordionItem,
   AccordionItemContent,
   AccordionItemTrigger,
 } from "./Accordion";
-import { ExpandableItemProps, ExpandableProps } from "./types";
 import { warnAboutMismatchingIcon } from "./helpers";
+import { ExpandableItemProps, ExpandableProps } from "./types";
 
 /**
  * A standalone expandable component.

package/src/accordion/types.ts

@@ -1,11 +1,12 @@
-import { accordionSlotRecipe } from "@/theme/slot-recipes/accordion";
 import { RecipeVariantProps } from "@chakra-ui/react";
 import {
-  AccordionRootProps as ChakraAccordionProps,
   Accordion as ChakraAccordion,
+  AccordionRootProps as ChakraAccordionProps,
 } from "@chakra-ui/react";
 import { PropsWithChildren } from "react";
 
+import { accordionSlotRecipe } from "@/theme/slot-recipes/accordion";
+
 export type AccordionVariantProps = RecipeVariantProps<
   typeof accordionSlotRecipe
 >;

package/src/alert/Alert.tsx

@@ -2,14 +2,16 @@
 
 import {
   Alert as ChakraAlert,
-  useDisclosure,
   HStack,
+  useDisclosure,
   useSlotRecipe,
 } from "@chakra-ui/react";
+import { IconComponent } from "@vygruppen/spor-icon-react";
 import React, { forwardRef } from "react";
-import { AlertIcon } from "./AlertIcon";
+
 import { CloseButton } from "@/button";
-import { IconComponent } from "@vygruppen/spor-icon-react";
+
+import { AlertIcon } from "./AlertIcon";
 
 export type AlertProps = Omit<ChakraAlert.RootProps, "colorPalette"> & {
   /** Whether or not to show the alert icon */

package/src/alert/AlertIcon.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { Alert as ChakraAlert, Box, useSlotRecipe } from "@chakra-ui/react";
 import {
   AltTransportFill24Icon,
   ErrorFill24Icon,
@@ -12,9 +13,9 @@ import {
   WarningFill24Icon,
 } from "@vygruppen/spor-icon-react";
 import React, { PropsWithChildren } from "react";
+
 import { createTexts, useTranslation } from "../i18n";
 import { AlertProps } from "./Alert";
-import { Box, useSlotRecipe, Alert as ChakraAlert } from "@chakra-ui/react";
 
 type AlertIconProps = {
   variant: ChakraAlert.RootProps["variant"];

package/src/alert/ExpandableAlert.tsx

@@ -9,12 +9,14 @@ import {
   Span,
   useSlotRecipe,
 } from "@chakra-ui/react";
-import React, { forwardRef, PropsWithChildren } from "react";
-import { AlertIcon } from "./AlertIcon";
-import { AlertProps } from "./Alert";
-import { alertExpandableSlotRecipe } from "@/theme/slot-recipes/alert-expandable";
 import { DropdownDownFill18Icon } from "@vygruppen/spor-icon-react";
+import React, { forwardRef, PropsWithChildren } from "react";
+
 import { AccordionItemContent } from "@/accordion";
+import { alertExpandableSlotRecipe } from "@/theme/slot-recipes/alert-expandable";
+
+import { AlertProps } from "./Alert";
+import { AlertIcon } from "./AlertIcon";
 
 type ExpandableAlertVariantProps = RecipeVariantProps<
   typeof alertExpandableSlotRecipe

package/src/alert/ServiceAlert.tsx

@@ -10,15 +10,16 @@ import {
   Text,
   useSlotRecipe,
 } from "@chakra-ui/react";
-import React, { forwardRef, PropsWithChildren } from "react";
-import { AlertProps } from "./Alert";
-import { createTexts, useTranslation } from "../i18n";
-import { alertServiceSlotRecipe } from "../theme/slot-recipes/alert-service";
 import {
   DropdownDownFill24Icon,
   ServiceFill24Icon,
   WarningFill24Icon,
 } from "@vygruppen/spor-icon-react";
+import React, { forwardRef, PropsWithChildren } from "react";
+
+import { createTexts, useTranslation } from "../i18n";
+import { alertServiceSlotRecipe } from "../theme/slot-recipes/alert-service";
+import { AlertProps } from "./Alert";
 
 type ServiceAlertVariantProps = RecipeVariantProps<
   typeof alertServiceSlotRecipe

package/src/alert/index.ts

@@ -1,3 +1,3 @@
+export * from "./Alert";
 export * from "./ExpandableAlert";
 export * from "./ServiceAlert";
-export * from "./Alert";

package/src/breadcrumb/Breadcrumb.tsx

@@ -1,14 +1,14 @@
 "use client";
 
-import React, { forwardRef } from "react";
 import {
   Breadcrumb as ChakraBreadcrumb,
-  BreadcrumbRootProps,
-  BreadcrumbLink as ChakraBreadcrumbLink,
   BreadcrumbCurrentLink as ChakraBreadcrumbCurrentLink,
   BreadcrumbEllipsis as ChakraBreadcrumbEllipsis,
+  BreadcrumbLink as ChakraBreadcrumbLink,
+  BreadcrumbRootProps,
 } from "@chakra-ui/react";
 import { DropdownRightFill18Icon } from "@vygruppen/spor-icon-react";
+import React, { forwardRef } from "react";
 /**
  * A breadcrumb component.
  *

package/src/button/Button.tsx

@@ -1,13 +1,14 @@
 import {
   Box,
-  Center,
   Button as ChakraButton,
-  Flex,
-  Span,
   type ButtonProps as ChakraButtonProps,
+  Center,
+  Flex,
   type RecipeVariantProps,
+  Span,
 } from "@chakra-ui/react";
 import React, { forwardRef, PropsWithChildren } from "react";
+
 import { createTexts, useTranslation } from "../i18n";
 import { ColorInlineLoader } from "../loader";
 import { buttonRecipe } from "../theme/recipes/button";

package/src/button/ButtonGroup.tsx

@@ -1,12 +1,13 @@
 "use client";
 
 import {
-  type GroupProps as ChakraGroupProps,
+  chakra,
   Group as ChakraGroup,
+  type GroupProps as ChakraGroupProps,
   type RecipeVariantProps,
-  chakra,
 } from "@chakra-ui/react";
 import React, { forwardRef, PropsWithChildren } from "react";
+
 import { groupRecipe } from "../theme/recipes/group";
 
 export type GroupVariantProps = RecipeVariantProps<typeof groupRecipe>;

package/src/button/Clipboard.tsx

@@ -1,13 +1,15 @@
 import { Clipboard as ChakraClipboard } from "@chakra-ui/react";
-import * as React from "react";
-import { createTexts, useTranslation } from "@/i18n";
 import {
   CheckmarkFill18Icon,
   CopyOutline18Icon,
 } from "@vygruppen/spor-icon-react";
-import { Button, ButtonProps } from "./Button";
+import * as React from "react";
+
+import { createTexts, useTranslation } from "@/i18n";
 import { Text } from "@/typography";
 
+import { Button, ButtonProps } from "./Button";
+
 /**
  *
  * Creates a button that copies text to the clipboard.

package/src/button/CloseButton.tsx

@@ -6,6 +6,7 @@ import {
   CloseFill30Icon,
 } from "@vygruppen/spor-icon-react";
 import React, { forwardRef } from "react";
+
 import { createTexts, useTranslation } from "../i18n";
 import { IconButton, IconButtonProps } from "./IconButton";
 

package/src/button/FloatingActionButton.tsx

@@ -8,6 +8,7 @@ import {
   useSlotRecipe,
 } from "@chakra-ui/react";
 import React, { forwardRef, PropsWithChildren, useEffect } from "react";
+
 import { floatingActionButtonSlotRecipe } from "../theme/slot-recipes/floating-action-button";
 
 type FloatingActionButtonVariantProps = RecipeVariantProps<

package/src/button/IconButton.tsx

@@ -3,6 +3,7 @@ import {
   type IconButtonProps as ChakraIconButtonProps,
 } from "@chakra-ui/react";
 import React, { forwardRef, PropsWithChildren } from "react";
+
 import { ButtonVariantProps, ColorSpinner } from "..";
 
 export type IconButtonProps = Exclude<

package/src/button/index.tsx

@@ -1,6 +1,6 @@
 export * from "./Button";
 export * from "./ButtonGroup";
+export * from "./Clipboard";
 export * from "./CloseButton";
 export * from "./FloatingActionButton";
 export * from "./IconButton";
-export * from "./Clipboard";

package/src/color-mode/color-mode.tsx

@@ -2,8 +2,8 @@
 
 import type { IconButtonProps } from "@chakra-ui/react";
 import { ClientOnly, IconButton, Skeleton } from "@chakra-ui/react";
-import { ThemeProvider, useTheme } from "next-themes";
 import type { ThemeProviderProps } from "next-themes";
+import { ThemeProvider, useTheme } from "next-themes";
 import * as React from "react";
 import { LuMoon, LuSun } from "react-icons/lu";
 

package/src/datepicker/Calendar.tsx

@@ -5,16 +5,18 @@ import { createCalendar } from "@internationalized/date";
 import React from "react";
 import {
   CalendarProps as ReactAriaCalendarProps,
-  useCalendar,
   DateValue,
+  useCalendar,
 } from "react-aria";
 import { useCalendarState } from "react-stately";
+
+import { datePickerSlotRecipe } from "@/theme/slot-recipes/datepicker";
+
 import { createTexts, useTranslation } from "../i18n";
 import { CalendarGrid } from "./CalendarGrid";
 import { CalendarHeader } from "./CalendarHeader";
-import { useCurrentLocale } from "./utils";
 import { CalendarVariants } from "./types";
-import { datePickerSlotRecipe } from "@/theme/slot-recipes/datepicker";
+import { useCurrentLocale } from "./utils";
 
 type CalendarProps = ReactAriaCalendarProps<DateValue> &
   CalendarVariants & {

package/src/datepicker/CalendarCell.tsx

@@ -10,8 +10,9 @@ import {
 import React, { PropsWithChildren, useEffect, useRef } from "react";
 import { useCalendarCell } from "react-aria";
 import { CalendarState, RangeCalendarState } from "react-stately";
-import { DatePickerVariantProps } from "./DatePicker";
+
 import { datePickerSlotRecipe } from "../theme/slot-recipes/datepicker";
+import { DatePickerVariantProps } from "./DatePicker";
 import { CalendarVariants } from "./types";
 
 type CalendarCellProps = PropsWithChildren<DatePickerVariantProps> &

package/src/datepicker/CalendarGrid.tsx

@@ -1,16 +1,17 @@
 "use client";
 
+import { Box, useSlotRecipe } from "@chakra-ui/react";
 import { endOfMonth, getWeeksInMonth } from "@internationalized/date";
 import React from "react";
 import { AriaCalendarGridProps, useCalendarGrid } from "react-aria";
 import { CalendarState, RangeCalendarState } from "react-stately";
+
 import { Language, useTranslation } from "../i18n";
+import { datePickerSlotRecipe } from "../theme/slot-recipes/datepicker";
 import { Text } from "../typography";
 import { CalendarCell } from "./CalendarCell";
-import { useCurrentLocale } from "./utils";
-import { Box, useSlotRecipe } from "@chakra-ui/react";
-import { datePickerSlotRecipe } from "../theme/slot-recipes/datepicker";
 import { CalendarVariants } from "./types";
+import { useCurrentLocale } from "./utils";
 
 const weekDays: Record<Language, string[]> = {
   nb: ["Ma", "Ti", "On", "To", "Fr", "Lø", "Sø"],

package/src/datepicker/CalendarHeader.tsx

@@ -7,6 +7,7 @@ import {
 } from "@vygruppen/spor-icon-react";
 import React from "react";
 import { CalendarState, RangeCalendarState } from "react-stately";
+
 import { createTexts, useTranslation } from "../i18n";
 import { CalendarNavigationButton } from "./CalendarNavigationButton";
 import { useCurrentLocale } from "./utils";

package/src/datepicker/CalendarNavigationButton.tsx

@@ -1,6 +1,7 @@
 "use client";
 import React, { useRef } from "react";
 import { AriaButtonProps, useButton } from "react-aria";
+
 import { IconButton } from "..";
 
 type CalendarButtonProps = AriaButtonProps<"button"> & {

package/src/datepicker/CalendarTriggerButton.tsx

@@ -4,6 +4,7 @@ import { BoxProps, PopoverAnchor, useSlotRecipe } from "@chakra-ui/react";
 import { CalendarOutline24Icon } from "@vygruppen/spor-icon-react";
 import React, { forwardRef, PropsWithChildren } from "react";
 import { AriaButtonProps } from "react-aria";
+
 import {
   createTexts,
   DatePickerVariantProps,

package/src/datepicker/DateField.tsx

@@ -2,14 +2,15 @@
 import { Box, Flex, useSlotRecipe } from "@chakra-ui/react";
 import { DateValue, GregorianCalendar } from "@internationalized/date";
 import { DOMAttributes, FocusableElement } from "@react-types/shared";
-import React, { PropsWithChildren, RefObject, forwardRef, useRef } from "react";
+import React, { forwardRef, PropsWithChildren, RefObject, useRef } from "react";
 import { AriaDateFieldProps, useDateField } from "react-aria";
 import { DateSegment, useDateFieldState } from "react-stately";
-import { DateTimeSegment } from "./DateTimeSegment";
-import { useCurrentLocale } from "./utils";
+
 import { createTexts, useTranslation } from "../i18n";
-import { DatePickerVariantProps } from "./DatePicker";
 import { datePickerSlotRecipe } from "../theme/slot-recipes/datepicker";
+import { DatePickerVariantProps } from "./DatePicker";
+import { DateTimeSegment } from "./DateTimeSegment";
+import { useCurrentLocale } from "./utils";
 
 function createCalendar(identifier: string) {
   switch (identifier) {

package/src/datepicker/DatePicker.tsx

@@ -1,5 +1,4 @@
 "use client";
-import { Field } from "@/input/Field";
 import {
   Box,
   BoxProps,
@@ -11,9 +10,9 @@ import {
   useSlotRecipe,
 } from "@chakra-ui/react";
 import React, {
+  forwardRef,
   PropsWithChildren,
   ReactNode,
-  forwardRef,
   useId,
   useRef,
 } from "react";
@@ -24,6 +23,9 @@ import {
   useDatePicker,
 } from "react-aria";
 import { useDatePickerState } from "react-stately";
+
+import { Field } from "@/input/Field";
+
 import { datePickerSlotRecipe } from "../theme/slot-recipes/datepicker";
 import { Calendar } from "./Calendar";
 import { CalendarTriggerButton } from "./CalendarTriggerButton";

package/src/datepicker/DateRangePicker.tsx

@@ -2,8 +2,8 @@
 import {
   Box,
   BoxProps,
-  PopoverAnchor,
   Popover as ChakraPopover,
+  PopoverAnchor,
   Portal,
   useFieldContext,
   useSlotRecipe,
@@ -17,16 +17,16 @@ import {
   useId,
 } from "react-aria";
 import { useDateRangePickerState } from "react-stately";
-import { DateField } from "./DateField";
-import { RangeCalendar } from "./RangeCalendar";
-import { StyledField } from "./StyledField";
-import { useCurrentLocale } from "./utils";
 
 import { Field } from "../input/Field";
-import { DatePickerVariantProps } from "./DatePicker";
 import { datePickerSlotRecipe } from "../theme/slot-recipes/datepicker";
-import { CalendarVariants } from "./types";
 import { CalendarTriggerButton } from "./CalendarTriggerButton";
+import { DateField } from "./DateField";
+import { DatePickerVariantProps } from "./DatePicker";
+import { RangeCalendar } from "./RangeCalendar";
+import { StyledField } from "./StyledField";
+import { CalendarVariants } from "./types";
+import { useCurrentLocale } from "./utils";
 
 type DateRangePickerProps = Omit<
   AriaDateRangePickerProps<DateValue>,

package/src/datepicker/DateTimeSegment.tsx

@@ -1,10 +1,11 @@
 "use client";
 import { Box, useSlotRecipe } from "@chakra-ui/react";
-import React, { PropsWithChildren, RefObject, forwardRef, useRef } from "react";
+import React, { forwardRef, PropsWithChildren, RefObject, useRef } from "react";
 import { useDateSegment } from "react-aria";
 import { DateFieldState, DateSegment } from "react-stately";
-import { datePickerSlotRecipe } from "../theme/slot-recipes/datepicker";
+
 import { DatePickerVariantProps } from "..";
+import { datePickerSlotRecipe } from "../theme/slot-recipes/datepicker";
 
 type DateTimeSegmentProps = PropsWithChildren<DatePickerVariantProps> & {
   segment: DateSegment;

package/src/datepicker/RangeCalendar.tsx

@@ -1,17 +1,19 @@
 "use client";
 import { Box, useSlotRecipe } from "@chakra-ui/react";
-import { DateValue, createCalendar } from "@internationalized/date";
+import { createCalendar, DateValue } from "@internationalized/date";
 import React, { useRef } from "react";
 import {
   RangeCalendarProps as ReactAriaRangeCalendarProps,
   useRangeCalendar,
 } from "react-aria";
 import { useRangeCalendarState } from "react-stately";
+
+import { datePickerSlotRecipe } from "@/theme/slot-recipes/datepicker";
+
 import { CalendarGrid } from "./CalendarGrid";
 import { CalendarHeader } from "./CalendarHeader";
-import { useCurrentLocale } from "./utils";
 import { CalendarVariants } from "./types";
-import { datePickerSlotRecipe } from "@/theme/slot-recipes/datepicker";
+import { useCurrentLocale } from "./utils";
 
 type RangeCalendarProps = ReactAriaRangeCalendarProps<DateValue> &
   CalendarVariants;

package/src/datepicker/StyledField.tsx

@@ -6,8 +6,9 @@ import {
   useSlotRecipe,
 } from "@chakra-ui/react";
 import React, { forwardRef, PropsWithChildren } from "react";
-import { DatePickerVariantProps } from "./DatePicker";
+
 import { datePickerSlotRecipe } from "../theme/slot-recipes/datepicker";
+import { DatePickerVariantProps } from "./DatePicker";
 import { CalendarVariants } from "./types";
 
 type StyledFieldProps = BoxProps &

package/src/datepicker/TimeField.tsx

@@ -1,9 +1,10 @@
 "use client";
 import { Box, Flex } from "@chakra-ui/react";
 import { CalendarDateTime, Time } from "@internationalized/date";
+import { TimeFieldState } from "@react-stately/datepicker";
 import React, { useRef } from "react";
 import { AriaTimeFieldProps, useTimeField } from "react-aria";
-import { TimeFieldState } from "@react-stately/datepicker";
+
 import { DateTimeSegment } from "./DateTimeSegment";
 import { getTimestampFromTime } from "./utils";
 

package/src/datepicker/TimePicker.tsx

@@ -8,11 +8,13 @@ import {
 } from "@vygruppen/spor-icon-react";
 import React from "react";
 import { useTimeFieldState } from "react-stately";
-import { IconButton, createTexts, useTranslation } from "..";
+
+import { Field } from "@/input/Field";
+
+import { createTexts, IconButton, useTranslation } from "..";
 import { StyledField } from "./StyledField";
 import { TimeField } from "./TimeField";
 import { getCurrentTime, useCurrentLocale } from "./utils";
-import { Field } from "@/input/Field";
 
 type TimePickerProps = Omit<BoxProps, "defaultValue" | "onChange"> & {
   /** The label. Defaults to a localized version of "Time" */

package/src/datepicker/index.tsx

@@ -1,4 +1,4 @@
-export { Time } from "@internationalized/date";
 export * from "./DatePicker";
 export * from "./DateRangePicker";
 export * from "./TimePicker";
+export { Time } from "@internationalized/date";

package/src/datepicker/utils.ts

@@ -1,4 +1,5 @@
 import { CalendarDateTime, parseTime } from "@internationalized/date";
+
 import { useTranslation } from "..";
 
 /**

package/src/dialog/Dialog.tsx

@@ -1,6 +1,7 @@
 "use client";
 import { Dialog as ChakraDialog, Portal } from "@chakra-ui/react";
 import * as React from "react";
+
 import { CloseButton } from "../button";
 
 interface DialogContentProps extends ChakraDialog.ContentProps {

package/src/dialog/Drawer.tsx

@@ -2,8 +2,8 @@
 
 import {
   Box,
-  Drawer as ChakraDrawer,
   createContext,
+  Drawer as ChakraDrawer,
   Grid,
   GridItem,
   Portal,
@@ -13,6 +13,7 @@ import {
   CloseFill24Icon,
 } from "@vygruppen/spor-icon-react";
 import React, { forwardRef } from "react";
+
 import { Button, CloseButton } from "../button";
 import { createTexts, useTranslation } from "../i18n";
 import {

package/src/dialog/index.ts

@@ -1,2 +1,2 @@
-export * from "./Drawer";
 export * from "./Dialog";
+export * from "./Drawer";

package/src/dialog/types.ts

@@ -1,7 +1,8 @@
-import { drawerSlotRecipe } from "@/theme/slot-recipes/drawer";
-import { RecipeVariantProps, Drawer as ChakraDrawer } from "@chakra-ui/react";
+import { Drawer as ChakraDrawer, RecipeVariantProps } from "@chakra-ui/react";
 import { PropsWithChildren } from "react";
 
+import { drawerSlotRecipe } from "@/theme/slot-recipes/drawer";
+
 export type DrawerVariantProps = RecipeVariantProps<typeof drawerSlotRecipe>;
 
 export type DrawerContentProps = ChakraDrawer.ContentProps &

package/src/image/index.tsx

@@ -1,2 +1,2 @@
-export { Image } from "@chakra-ui/react";
 export type { ImageProps } from "@chakra-ui/react";
+export { Image } from "@chakra-ui/react";