@vygruppen/spor-react 12.0.2 → 12.0.3

package/src/loader/useHydrated.tsx

@@ -24,7 +24,7 @@ let hydrating = true;
  * ```
  */
 export function useHydrated() {
-  let [hydrated, setHydrated] = useState(() => !hydrating);
+  const [hydrated, setHydrated] = useState(() => !hydrating);
 
   useEffect(function hydrate() {
     hydrating = false;

package/src/logo/VyLogo.tsx

@@ -1,5 +1,6 @@
 import { Box, BoxProps, chakra, Icon } from "@chakra-ui/react";
 import React, { forwardRef, SVGProps, useId } from "react";
+
 import { useColorMode } from "..";
 
 export const SvgBox = chakra("svg");

package/src/logo/VyLogoPride.tsx

@@ -1,5 +1,6 @@
 import { BoxProps } from "@chakra-ui/react";
 import React, { forwardRef, useId } from "react";
+
 import { SvgBox } from "./VyLogo";
 
 export type VyLogoPrideProps = BoxProps;

package/src/logo/index.tsx

@@ -1,3 +1,3 @@
+export * from "./CargonetLogo";
 export * from "./VyLogo";
 export * from "./VyLogoPride";
-export * from "./CargonetLogo";

package/src/media-controller/JumpButton.tsx

@@ -5,12 +5,13 @@ import {
   RecipeVariantProps,
   useSlotRecipe,
 } from "@chakra-ui/react";
-import React, { forwardRef, PropsWithChildren } from "react";
-import { createTexts, useTranslation } from "..";
 import {
   Backward15MediaControllerFill30Icon,
   Forward15MediaControllerFill30Icon,
 } from "@vygruppen/spor-icon-react";
+import React, { forwardRef, PropsWithChildren } from "react";
+
+import { createTexts, useTranslation } from "..";
 import { mediaControllerSlotRecipe } from "../theme/slot-recipes/media-controller-button";
 
 export type MediaControllerVariantProps = RecipeVariantProps<

package/src/media-controller/PlayPauseButton.tsx

@@ -1,11 +1,12 @@
 "use client";
 import { BoxProps, Center, useSlotRecipe } from "@chakra-ui/react";
-import React, { forwardRef, PropsWithChildren } from "react";
-import { createTexts, MediaControllerVariantProps, useTranslation } from "..";
 import {
   PauseMediaControllerFill24Icon,
   PlayMediaControllerFill24Icon,
 } from "@vygruppen/spor-icon-react";
+import React, { forwardRef, PropsWithChildren } from "react";
+
+import { createTexts, MediaControllerVariantProps, useTranslation } from "..";
 
 type PlayPauseButtonProps = BoxProps &
   PropsWithChildren<MediaControllerVariantProps> & {

package/src/media-controller/SkipButton.tsx

@@ -1,11 +1,12 @@
 "use client";
 import { BoxProps, Center, useSlotRecipe } from "@chakra-ui/react";
-import React, { forwardRef, PropsWithChildren } from "react";
-import { createTexts, MediaControllerVariantProps, useTranslation } from "..";
 import {
   NextMediaControllerFill30Icon,
   PreviousMediaControllerFill30Icon,
 } from "@vygruppen/spor-icon-react";
+import React, { forwardRef, PropsWithChildren } from "react";
+
+import { createTexts, MediaControllerVariantProps, useTranslation } from "..";
 
 type SkipButtonProps = BoxProps &
   PropsWithChildren<MediaControllerVariantProps> & {

package/src/nudge/Nudge.tsx

@@ -1,4 +1,17 @@
 "use client";
+import {
+  PopoverCloseTrigger,
+  usePopover,
+  usePopoverContext,
+} from "@ark-ui/react";
+import {
+  Box,
+  BoxProps,
+  chakra,
+  Popover as ChakraPopover,
+  PopoverRootProps,
+} from "@chakra-ui/react";
+import { ArrowRightFill18Icon } from "@vygruppen/spor-icon-react";
 import React, {
   forwardRef,
   PropsWithChildren,
@@ -6,6 +19,7 @@ import React, {
   useRef,
   useState,
 } from "react";
+
 import {
   Button,
   createTexts,
@@ -18,20 +32,6 @@ import {
   useTranslation,
 } from "..";
 
-import {
-  Box,
-  BoxProps,
-  chakra,
-  Popover as ChakraPopover,
-  PopoverRootProps,
-} from "@chakra-ui/react";
-import { ArrowRightFill18Icon } from "@vygruppen/spor-icon-react";
-import {
-  PopoverCloseTrigger,
-  usePopover,
-  usePopoverContext,
-} from "@ark-ui/react";
-
 const EXPIRATION_DELAY_MS = 30 * 24 * 60 * 60 * 1000; // 30 days in milliseconds
 
 const isNudgeExpired = (

package/src/pagination/Pagination.tsx

@@ -2,16 +2,17 @@
 
 import {
   Box,
-  Pagination as ChakraPagination,
   createContext,
+  Pagination as ChakraPagination,
   usePaginationContext,
   useSlotRecipe,
 } from "@chakra-ui/react";
-import * as React from "react";
 import {
-  DropdownRightOutline18Icon,
   DropdownLeftOutline18Icon,
+  DropdownRightOutline18Icon,
 } from "@vygruppen/spor-icon-react";
+import * as React from "react";
+
 import { createTexts, List, ListItem, useTranslation } from "..";
 import { ButtonVariantContext, PaginationRootProps } from "./types";
 

package/src/pagination/types.ts

@@ -1,9 +1,10 @@
-import { paginationSlotRecipe } from "@/theme/slot-recipes/pagination";
 import {
   Pagination as ChakraPagination,
   RecipeVariantProps,
 } from "@chakra-ui/react";
 
+import { paginationSlotRecipe } from "@/theme/slot-recipes/pagination";
+
 export type PaginationVariantProps = RecipeVariantProps<
   typeof paginationSlotRecipe
 >;

package/src/popover/index.tsx

@@ -1,14 +1,15 @@
 "use client";
 
-import { CloseButton } from "@/button";
-import { useColorMode } from "@/color-mode";
 import {
-  Portal,
   Popover as ChakraPopover,
+  Portal,
   usePopoverContext,
 } from "@chakra-ui/react";
 import React, { forwardRef, useEffect } from "react";
 
+import { CloseButton } from "@/button";
+import { useColorMode } from "@/color-mode";
+
 export const Popover = ChakraPopover.Root;
 
 export const PopoverTrigger = forwardRef<

package/src/progress-indicator/ProgressDot.tsx

@@ -1,6 +1,7 @@
 "use client";
-import React, { PropsWithChildren } from "react";
 import { chakra, useSlotRecipe } from "@chakra-ui/react";
+import React, { PropsWithChildren } from "react";
+
 import { ProgressIndicatorVariantProps } from "./ProgressIndicator";
 
 type ProgressDot = PropsWithChildren<ProgressIndicatorVariantProps> & {

package/src/progress-indicator/ProgressIndicator.tsx

@@ -1,9 +1,10 @@
 "use client";
 import { BoxProps, RecipeVariantProps, useSlotRecipe } from "@chakra-ui/react";
 import React, { forwardRef, PropsWithChildren } from "react";
+
 import { Box, createTexts, useTranslation } from "..";
-import { ProgressDot } from "./ProgressDot";
 import { progressIndicatorRecipe } from "../theme/slot-recipes/progress-indicator";
+import { ProgressDot } from "./ProgressDot";
 
 export type ProgressIndicatorVariantProps = RecipeVariantProps<
   typeof progressIndicatorRecipe

package/src/provider/SporProvider.tsx

@@ -1,13 +1,12 @@
 "use client";
+import { ChakraProvider, ChakraProviderProps } from "@chakra-ui/react";
 import { Global } from "@emotion/react";
 import React from "react";
-import { Language, LanguageProvider, system, themes } from "..";
 
-import { Toaster } from "../toast/toast";
-
-import { Brand, fontFaces } from "../theme/brand";
-import { ChakraProvider, ChakraProviderProps } from "@chakra-ui/react";
+import { Language, LanguageProvider, system, themes } from "..";
 import { ColorModeProvider } from "../color-mode";
+import { Brand, fontFaces } from "../theme/brand";
+import { Toaster } from "../toast/toast";
 
 type SporProviderProps = Omit<ChakraProviderProps, "value"> & {
   language?: Language;

package/src/stepper/Stepper.tsx

@@ -2,9 +2,10 @@
 import { Flex, RecipeVariantProps, useSlotRecipe } from "@chakra-ui/react";
 import { ArrowLeftFill24Icon } from "@vygruppen/spor-icon-react";
 import React, { forwardRef, PropsWithChildren } from "react";
-import { StepperStep } from ".";
+
 import { Box, createTexts, IconButton, Text, useTranslation } from "..";
 import { stepperSlotRecipe } from "../theme/slot-recipes/stepper";
+import { StepperStep } from ".";
 import { StepperProvider } from "./StepperContext";
 
 export type StepperVariantProps = RecipeVariantProps<typeof stepperSlotRecipe>;

package/src/stepper/StepperStep.tsx

@@ -2,6 +2,7 @@
 import { useSlotRecipe } from "@chakra-ui/react";
 import { DropdownRightFill18Icon } from "@vygruppen/spor-icon-react";
 import React, { PropsWithChildren } from "react";
+
 import { Box, Button, Text } from "..";
 import { StepperVariantProps } from "./Stepper";
 import { useStepper } from "./StepperContext";

package/src/tab/Tabs.tsx

@@ -1,11 +1,12 @@
 "use client";
 import {
+  RecipeVariantProps,
   Tabs as ChakraTabs,
   TabsRootProps as ChakraTabsRootProps,
-  RecipeVariantProps,
 } from "@chakra-ui/react";
 import * as React from "react";
 import { forwardRef, PropsWithChildren } from "react";
+
 import { tabsSlotRecipe } from "../theme/slot-recipes/tabs";
 
 type TabsVariantProps = RecipeVariantProps<typeof tabsSlotRecipe>;

package/src/table/Table.tsx

@@ -1,12 +1,13 @@
 "use client";
 import {
   Box,
+  RecipeVariantProps,
   Table as ChakraTable,
   TableRootProps as ChakraTableProps,
-  RecipeVariantProps,
   useSlotRecipe,
 } from "@chakra-ui/react";
 import React, { forwardRef, PropsWithChildren } from "react";
+
 import { tableSlotRecipe } from "../theme/slot-recipes/table";
 
 type TableVariantProps = RecipeVariantProps<typeof tableSlotRecipe>;

package/src/table/index.tsx

@@ -1,23 +1,23 @@
-export {
-  TableCaption,
-  TableHeader,
-  TableRow,
-  TableColumn,
-  TableColumnHeader,
-  TableRoot,
-  TableBody,
-  TableCell,
-  TableFooter,
-} from "@chakra-ui/react";
+export * from "./Table";
 export type {
   TableBodyProps,
   TableCaptionProps,
   TableCellProps,
   TableColumnHeaderProps,
+  TableColumnProps,
   TableFooterProps,
-  TableRowProps,
   TableHeaderProps,
-  TableColumnProps,
   TableRootProps,
+  TableRowProps,
+} from "@chakra-ui/react";
+export {
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableColumn,
+  TableColumnHeader,
+  TableFooter,
+  TableHeader,
+  TableRoot,
+  TableRow,
 } from "@chakra-ui/react";
-export * from "./Table";

package/src/theme/index.ts

@@ -3,17 +3,18 @@ import {
   defaultBaseConfig,
   defineConfig,
 } from "@chakra-ui/react";
-import { animationStyles } from "./tokens/animation-styles";
-import { breakpoints } from "./tokens/breakpoints";
-import { globalCss } from "./tokens/global-css";
-import { keyframes } from "./tokens/keyframes";
+
+import { Brand } from "./brand";
 import { recipes } from "./recipes";
 import { semanticTokens } from "./semantic-tokens";
 import { slotRecipes } from "./slot-recipes";
-import { textStyles } from "./tokens/text-styles";
 import { tokens } from "./tokens";
-import { Brand } from "./brand";
+import { animationStyles } from "./tokens/animation-styles";
+import { breakpoints } from "./tokens/breakpoints";
 import { config } from "./tokens/config";
+import { globalCss } from "./tokens/global-css";
+import { keyframes } from "./tokens/keyframes";
+import { textStyles } from "./tokens/text-styles";
 
 const generateTheme = (brand: Brand) => {
   return defineConfig({

package/src/theme/recipes/close-button.ts

@@ -1,4 +1,5 @@
 import { defineRecipe } from "@chakra-ui/react";
+
 import { ghostBackground } from "../utils/ghost-utils";
 
 export const closeButtonRecipe = defineRecipe({

package/src/theme/recipes/code.ts

@@ -1,4 +1,5 @@
 import { defineRecipe } from "@chakra-ui/react";
+
 import { badgeRecipie } from "./badge";
 
 export const codeRecipie = defineRecipe({

package/src/theme/recipes/link.ts

@@ -1,4 +1,5 @@
 import { defineRecipe } from "@chakra-ui/react";
+
 import { coreText } from "../utils/core-utils";
 
 export const linkRecipe = defineRecipe({

package/src/theme/recipes/pressable-card.ts

@@ -1,6 +1,7 @@
-import { defineRecipe } from "../../util";
 import tokens from "@vygruppen/spor-design-tokens";
 
+import { defineRecipe } from "../../util";
+
 export const pressableCardRecipe = defineRecipe({
   base: {
     appearance: "none",

package/src/theme/recipes/textarea.ts

@@ -1,4 +1,5 @@
 import { defineRecipe } from "@chakra-ui/react";
+
 import { inputRecipe } from "./input";
 
 export const textareaRecipe = defineRecipe({

package/src/theme/semantic-tokens/colors.ts

@@ -1,7 +1,7 @@
 import { defineSemanticTokens } from "@chakra-ui/react";
+import cargonetJson from "@vygruppen/spor-design-tokens/tokens/color/cargonet.json";
 import vyDigitalJson from "@vygruppen/spor-design-tokens/tokens/color/vy-digital.json";
 import VyUtviklingJson from "@vygruppen/spor-design-tokens/tokens/color/vy-utvikling.json";
-import cargonetJson from "@vygruppen/spor-design-tokens/tokens/color/cargonet.json";
 
 export enum Brand {
   VyDigital = "VyDigital",

package/src/theme/semantic-tokens/index.ts

@@ -1,5 +1,5 @@
 import { Brand } from "../brand";
-import { cargonetColors, vyUtviklingColors, vyDigitalColors } from "./colors";
+import { cargonetColors, vyDigitalColors, vyUtviklingColors } from "./colors";
 import { radii } from "./radii";
 import { shadows } from "./shadows";
 

package/src/theme/slot-recipes/accordion.ts

@@ -1,7 +1,8 @@
+import { defineSlotRecipe } from "@chakra-ui/react";
+
 import { coreBorder, coreText } from "../utils/core-utils";
 import { floatingBackground, floatingBorder } from "../utils/floating-utils";
 import { ghostBackground } from "../utils/ghost-utils";
-import { defineSlotRecipe } from "@chakra-ui/react";
 import { accordionAnatomy } from "./anatomy";
 
 export const accordionSlotRecipe = defineSlotRecipe({

package/src/theme/slot-recipes/alert-expandable.ts

@@ -1,7 +1,8 @@
 import { defineSlotRecipe } from "@chakra-ui/react";
+import tokens from "@vygruppen/spor-design-tokens";
+
 import { alertSlotRecipe } from "./alert";
 import { alertExpandableAnatomy } from "./anatomy";
-import tokens from "@vygruppen/spor-design-tokens";
 
 export const alertExpandableSlotRecipe = defineSlotRecipe({
   className: "spor-alert-expandable",

package/src/theme/slot-recipes/alert-service.ts

@@ -1,4 +1,5 @@
 import { defineSlotRecipe } from "@chakra-ui/react";
+
 import { alertServiceAnatomy } from "./anatomy";
 
 export const alertServiceSlotRecipe = defineSlotRecipe({

package/src/theme/slot-recipes/alert.ts

@@ -1,4 +1,5 @@
 import { defineSlotRecipe } from "@chakra-ui/react";
+
 import { alertAnatomy } from "./anatomy";
 
 const createVariant = (variant: string) => ({

package/src/theme/slot-recipes/breadcrumb.ts

@@ -1,7 +1,8 @@
 import { defineSlotRecipe } from "@chakra-ui/react";
-import { breadcrumbAnatomy } from "./anatomy";
 import tokens from "@vygruppen/spor-design-tokens";
 
+import { breadcrumbAnatomy } from "./anatomy";
+
 export const breadcrumbSlotRecipe = defineSlotRecipe({
   slots: breadcrumbAnatomy.keys(),
   base: {

package/src/theme/slot-recipes/checkbox.ts

@@ -1,5 +1,6 @@
 import { defineSlotRecipe } from "@chakra-ui/react";
 import tokens from "@vygruppen/spor-design-tokens";
+
 import { brandBackground, brandText } from "../utils/brand-utils";
 import { coreBackground, coreText } from "../utils/core-utils";
 import { checkboxAnatomy } from "./anatomy";

package/src/theme/slot-recipes/datepicker.ts

@@ -1,4 +1,5 @@
 import { defineSlotRecipe } from "@chakra-ui/react";
+
 import { datepickerAnatomy } from "./anatomy";
 
 export const datePickerSlotRecipe = defineSlotRecipe({

package/src/theme/slot-recipes/dialog.ts

@@ -1,4 +1,5 @@
 import { defineSlotRecipe } from "@chakra-ui/react";
+
 import { dialogAnatomy } from "./anatomy";
 
 export const dialogSlotRecipe = defineSlotRecipe({

package/src/theme/slot-recipes/drawer.ts

@@ -1,4 +1,5 @@
 import { defineSlotRecipe } from "@chakra-ui/react";
+
 import { drawerAnatomy } from "./anatomy";
 
 export const drawerSlotRecipe = defineSlotRecipe({

package/src/theme/slot-recipes/field.ts

@@ -1,4 +1,5 @@
 import { defineSlotRecipe } from "@chakra-ui/react";
+
 import { fieldAnatomy } from "./anatomy";
 
 export const fieldSlotRecipe = defineSlotRecipe({

package/src/theme/slot-recipes/floating-action-button.ts

@@ -1,5 +1,6 @@
 import { defineSlotRecipe } from "@chakra-ui/react";
 import tokens from "@vygruppen/spor-design-tokens";
+
 import { floatingActionButtonAnatomy } from "./anatomy";
 
 export const floatingActionButtonSlotRecipe = defineSlotRecipe({

package/src/theme/slot-recipes/index.ts

@@ -16,10 +16,10 @@ import { listBoxSlotRecipe } from "./listbox";
 import { mediaControllerSlotRecipe } from "./media-controller-button";
 import { nativeSelectSlotRecipe } from "./native-select";
 import { numericStepperRecipe } from "./numeric-stepper";
+import { paginationSlotRecipe } from "./pagination";
 import { popoverSlotRecipe } from "./popover";
 import { progressBarRecipe } from "./progress-bar";
 import { progressIndicatorRecipe } from "./progress-indicator";
-import { paginationSlotRecipe } from "./pagination";
 import { radioGroupSlotRecipe } from "./radio";
 import { radioCardSlotRecipe } from "./radio-card";
 import { selectSlotRecipe } from "./select";
@@ -27,8 +27,8 @@ import { stepperSlotRecipe } from "./stepper";
 import { switchSlotRecipe } from "./switch";
 import { tableSlotRecipe } from "./table";
 import { tabsSlotRecipe } from "./tabs";
-import { travelTagSlotRecipe } from "./travel-tag";
 import { toastSlotRecipe } from "./toast";
+import { travelTagSlotRecipe } from "./travel-tag";
 
 export const slotRecipes = {
   accordion: accordionSlotRecipe,

package/src/theme/slot-recipes/info-tag.ts

@@ -1,7 +1,8 @@
 import { defineSlotRecipe } from "@chakra-ui/react";
-import { travelTagSlotRecipe } from "./travel-tag";
-import { infoTagAnatomy } from "./anatomy";
+
 import { coreBorder } from "../utils/core-utils";
+import { infoTagAnatomy } from "./anatomy";
+import { travelTagSlotRecipe } from "./travel-tag";
 
 export const infoTagSlotRecipe = defineSlotRecipe({
   slots: infoTagAnatomy.keys(),

package/src/theme/slot-recipes/line-icon.ts

@@ -1,4 +1,5 @@
 import { defineSlotRecipe } from "@chakra-ui/react";
+
 import { linjetagAnatomy } from "./anatomy";
 
 export const lineIconSlotRecipe = defineSlotRecipe({

package/src/theme/slot-recipes/list.ts

@@ -1,4 +1,5 @@
 import { defineSlotRecipe } from "@chakra-ui/react";
+
 import { listAnatomy } from "./anatomy";
 
 export const listSlotRecipe = defineSlotRecipe({

package/src/theme/slot-recipes/listbox.ts

@@ -1,4 +1,5 @@
 import { defineSlotRecipe } from "@chakra-ui/react";
+
 import { listBoxAnatomy } from "./anatomy";
 
 export const listBoxSlotRecipe = defineSlotRecipe({

package/src/theme/slot-recipes/media-controller-button.ts

@@ -1,4 +1,5 @@
 import { defineSlotRecipe } from "@chakra-ui/react";
+
 import { mediaControllerAnatomy } from "./anatomy";
 
 export const mediaControllerSlotRecipe = defineSlotRecipe({

package/src/theme/slot-recipes/native-select.ts

@@ -1,7 +1,8 @@
-import { coreText } from "../utils/core-utils";
 import { defineSlotRecipe } from "@chakra-ui/react";
-import { NativeSelectAnatomy } from "./anatomy";
+
 import { inputRecipe } from "../recipes/input";
+import { coreText } from "../utils/core-utils";
+import { NativeSelectAnatomy } from "./anatomy";
 
 export const nativeSelectSlotRecipe = defineSlotRecipe({
   slots: NativeSelectAnatomy.keys(),

package/src/theme/slot-recipes/numeric-stepper.ts

@@ -1,4 +1,5 @@
 import { defineSlotRecipe } from "@chakra-ui/react";
+
 import { numericStepperAnatomy } from "./anatomy";
 
 export const numericStepperRecipe = defineSlotRecipe({

package/src/theme/slot-recipes/pagination.ts

@@ -1,4 +1,5 @@
 import { defineSlotRecipe } from "@chakra-ui/react";
+
 import { coreBackground, coreText } from "../utils/core-utils";
 import { ghostBackground } from "../utils/ghost-utils";
 import { paginationAnatomy } from "./anatomy";

package/src/theme/slot-recipes/popover.ts

@@ -1,5 +1,6 @@
-import { surface } from "./../utils/surface-utils";
 import { defineSlotRecipe } from "@chakra-ui/react";
+
+import { surface } from "./../utils/surface-utils";
 import { popoverAnatomy } from "./anatomy";
 
 export const popoverSlotRecipe = defineSlotRecipe({

package/src/theme/slot-recipes/progress-bar.ts

@@ -1,4 +1,5 @@
 import { defineSlotRecipe } from "@chakra-ui/react";
+
 import { progressBarAnotomy } from "./anatomy";
 
 export const progressBarRecipe = defineSlotRecipe({

package/src/theme/slot-recipes/radio-card.ts

@@ -1,9 +1,10 @@
 import { defineSlotRecipe } from "@chakra-ui/react";
+import tokens from "@vygruppen/spor-design-tokens";
+
 import { coreBackground, coreBorder, coreText } from "../utils/core-utils";
 import { floatingBackground, floatingBorder } from "../utils/floating-utils";
 import { outlineBorder } from "../utils/outline-utils";
 import { radioCardAnatomy } from "./anatomy";
-import tokens from "@vygruppen/spor-design-tokens";
 
 export const radioCardSlotRecipe = defineSlotRecipe({
   className: "spor-radio-card",

package/src/theme/slot-recipes/radio.ts

@@ -1,4 +1,5 @@
 import { defineSlotRecipe } from "@chakra-ui/react";
+
 import { radioAnatomy } from "./anatomy";
 
 export const radioGroupSlotRecipe = defineSlotRecipe({

package/src/theme/slot-recipes/select.ts

@@ -1,4 +1,5 @@
 import { defineSlotRecipe } from "@chakra-ui/react";
+
 import { selectAnatomy } from "./anatomy";
 
 export const selectSlotRecipe = defineSlotRecipe({

package/src/theme/slot-recipes/stepper.ts

@@ -1,4 +1,5 @@
 import { defineSlotRecipe } from "@chakra-ui/react";
+
 import { accentBackground, accentText } from "../utils/accent-utils";
 import { brandBackground } from "../utils/brand-utils";
 import { coreText } from "../utils/core-utils";

package/src/theme/slot-recipes/switch.ts

@@ -1,7 +1,8 @@
 import { defineSlotRecipe } from "@chakra-ui/react";
-import { switchAnatomy } from "./anatomy";
 import tokens from "@vygruppen/spor-design-tokens";
 
+import { switchAnatomy } from "./anatomy";
+
 export const switchSlotRecipe = defineSlotRecipe({
   slots: switchAnatomy.keys(),
   className: "spor-switch",