@vygruppen/spor-react 4.0.1 → 4.0.3

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@4.0.1 build
+> @vygruppen/spor-react@4.0.3 build
 > tsup src/index.tsx --dts --treeshake --format cjs,esm
 
 CLI Building entry: src/index.tsx
@@ -8,15 +8,15 @@
 CLI Target: node16
 CJS Build start
 ESM Build start
-DTS Build start
+"toZoned" and "toTime" are imported from external module "@internationalized/date" but never used in "dist/chunk-XT6QVKN5.mjs".
 "toZoned" and "toTime" are imported from external module "@internationalized/date" but never used in "dist/index.js".
-"toZoned" and "toTime" are imported from external module "@internationalized/date" but never used in "dist/chunk-3SY4N6MP.mjs".
-CJS dist/index.js 550.61 KB
-CJS ⚡️ Build success in 3780ms
+DTS Build start
 ESM dist/index.mjs                      2.10 KB
-ESM dist/CountryCodeSelect-HCQZVKWU.mjs 1.19 KB
-ESM dist/chunk-3SY4N6MP.mjs             439.68 KB
-ESM ⚡️ Build success in 3781ms
-DTS ⚡️ Build success in 18223ms
-DTS dist/index.d.ts  264.40 KB
-DTS dist/index.d.mts 264.40 KB
+ESM dist/CountryCodeSelect-RUH47EQH.mjs 1.19 KB
+ESM dist/chunk-XT6QVKN5.mjs             441.18 KB
+ESM ⚡️ Build success in 3115ms
+CJS dist/index.js 552.47 KB
+CJS ⚡️ Build success in 3116ms
+DTS ⚡️ Build success in 14728ms
+DTS dist/index.d.ts  265.43 KB
+DTS dist/index.d.mts 265.43 KB

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @vygruppen/spor-react
 
+## 4.0.3
+
+### Patch Changes
+
+- 1cd9939e: TimePicker: Make defaultValue=null a valid value
+- 8b4ab3ac: spinner: added darkmode for Darkspinner
+
+## 4.0.2
+
+### Patch Changes
+
+- 0f59ee68: InfoSelect: Added dark mode
+- 573f649a: Input, PasswordInput, SearchInput, InfoSelect, NativeSelect: Tweak disabled state styling.
+- d9c2de51: docs: update links
+- 0cc70e7e: Fix some issues with the styling of lists"
+
 ## 4.0.1
 
 ### Patch Changes

package/dist/{CountryCodeSelect-HCQZVKWU.mjs → CountryCodeSelect-RUH47EQH.mjs}

@@ -1,4 +1,4 @@
-import { createTexts, useTranslation, InfoSelect, Item } from './chunk-3SY4N6MP.mjs';
+import { createTexts, useTranslation, InfoSelect, Item } from './chunk-XT6QVKN5.mjs';
 import React from 'react';
 import { getSupportedCallingCodes } from 'awesome-phonenumber';
 

package/dist/{chunk-3SY4N6MP.mjs → chunk-XT6QVKN5.mjs}

@@ -1,4 +1,4 @@
-import { forwardRef, Divider as Divider$1, Stack as Stack$1, Accordion as Accordion$1, Skeleton as Skeleton$1, useButtonGroup, Button as Button$1, Box, Center, ButtonGroup as ButtonGroup$1, IconButton as IconButton$1, useMultiStyleConfig, useStyleConfig, Badge as Badge$1, Code as Code$1, Text, PopoverAnchor, FormLabel, Flex, useFormControlContext, PopoverContent, PopoverArrow, PopoverBody, FocusLock, Popover, InputGroup, PopoverTrigger, Portal, chakra, Checkbox as Checkbox$1, useCheckbox, FormControl as FormControl$1, InputLeftElement, Input as Input$1, InputRightElement, Select, useDisclosure, useControllableState, Radio as Radio$1, RadioGroup as RadioGroup$1, Switch as Switch$1, Textarea as Textarea$1, Link, ModalHeader as ModalHeader$1, useModalContext, DrawerContent as DrawerContent$1, Tabs as Tabs$1, Table as Table$1, defineStyleConfig as defineStyleConfig$1, createMultiStyleConfigHelpers as createMultiStyleConfigHelpers$1, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, SkeletonCircle as SkeletonCircle$1, SkeletonText as SkeletonText$1, Breadcrumb as Breadcrumb$1, BreadcrumbItem as BreadcrumbItem$1, BreadcrumbLink as BreadcrumbLink$1, Heading as Heading$1, CheckboxGroup as CheckboxGroup$1, List, ListItem, useColorModeValue, useFormControlProps, useFormControl, Drawer as Drawer$1, DrawerOverlay, DrawerCloseButton, DrawerBody, usePopoverContext, DarkMode, PopoverCloseButton, ChakraProvider, HStack, useToast as useToast$1, useInterval } from '@chakra-ui/react';
+import { forwardRef, Divider as Divider$1, Stack as Stack$1, Accordion as Accordion$1, Skeleton as Skeleton$1, useButtonGroup, Button as Button$1, Box, Center, ButtonGroup as ButtonGroup$1, IconButton as IconButton$1, useMultiStyleConfig, useStyleConfig, Badge as Badge$1, Code as Code$1, Text, PopoverAnchor, FormLabel, Flex, useFormControlContext, PopoverContent, PopoverArrow, PopoverBody, FocusLock, Popover, InputGroup, PopoverTrigger, Portal, chakra, Checkbox as Checkbox$1, useCheckbox, FormControl as FormControl$1, InputLeftElement, Input as Input$1, InputRightElement, Select, useDisclosure, useControllableState, Radio as Radio$1, RadioGroup as RadioGroup$1, Switch as Switch$1, Textarea as Textarea$1, Link, ModalHeader as ModalHeader$1, useModalContext, DrawerContent as DrawerContent$1, Tabs as Tabs$1, Table as Table$1, defineStyleConfig as defineStyleConfig$1, createMultiStyleConfigHelpers as createMultiStyleConfigHelpers$1, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, useColorMode, SkeletonCircle as SkeletonCircle$1, SkeletonText as SkeletonText$1, Breadcrumb as Breadcrumb$1, BreadcrumbItem as BreadcrumbItem$1, BreadcrumbLink as BreadcrumbLink$1, Heading as Heading$1, CheckboxGroup as CheckboxGroup$1, List, ListItem, useColorModeValue, useFormControlProps, useFormControl, Drawer as Drawer$1, DrawerOverlay, DrawerCloseButton, DrawerBody, usePopoverContext, DarkMode, PopoverCloseButton, ChakraProvider, HStack, useToast as useToast$1, useInterval } from '@chakra-ui/react';
 export { AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Box, Center, Collapse, Container, DarkMode, DrawerBody, DrawerCloseButton, DrawerFooter, DrawerOverlay, Fade, Flex, FormHelperText, Grid, GridItem, HStack, Image, Img, InputGroup, LightMode, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalOverlay, OrderedList, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, Portal, ScaleFade, SimpleGrid, Slide, SlideFade, Spacer, Tab, TabList, TabPanel, TabPanels, TableCaption, Tbody, Td, Tfoot, Th, Thead, Tr, UnorderedList, VStack, Wrap, WrapItem, extendTheme, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToken } from '@chakra-ui/react';
 import tokens10__default from '@vygruppen/spor-design-tokens';
 import * as tokens10 from '@vygruppen/spor-design-tokens';
@@ -6,7 +6,7 @@ export { tokens10 as tokens };
 import * as React69 from 'react';
 import React69__default, { createContext, useEffect, forwardRef as forwardRef$1, useRef, useState, useId, Suspense, useMemo, useContext, useCallback } from 'react';
 import { CloseFill30Icon, CloseFill24Icon, CloseFill18Icon, CalendarOutline24Icon, CloseOutline24Icon, SearchOutline24Icon, InformationFill24Icon, InformationFill18Icon, WarningFill24Icon, WarningFill18Icon, ErrorFill24Icon, ErrorFill18Icon, LinkOutOutline24Icon, DropdownRightFill18Icon, DropdownLeftFill18Icon, DropdownDownFill18Icon, DropdownDownFill24Icon, DropdownUpFill24Icon, ArrowRightFill18Icon, DropdownLeftFill24Icon, ArrowLeftOutline24Icon, ArrowRightOutline24Icon, ErrorOutline24Icon, AltTransportOutline24Icon, WarningOutline24Icon, SuccessOutline24Icon, InformationOutline24Icon, TrainFill18Icon, TrainFill24Icon, TrainFill30Icon, ExpressBusFill18Icon, ExpressBusFill24Icon, ExpressBusFill30Icon, BusFill18Icon, BusFill24Icon, BusFill30Icon, FerryFill18Icon, FerryFill24Icon, FerryFill30Icon, SubwayFill18Icon, SubwayFill24Icon, SubwayFill30Icon, TramFill18Icon, TramFill24Icon, TramFill30Icon, AltTransportFill18Icon, AltTransportFill24Icon, AltTransportFill30Icon, WalkFill18Icon, WalkFill24Icon, WalkFill30Icon } from '@vygruppen/spor-icon-react';
-import { inlineLoaderColorData, spinnerColorData, contentLoaderData, fullScreenLoaderWhiteData, inlineLoaderDarkData, spinnerDarkData, fullScreenLoaderBlackData, inlineLoaderLightData, spinnerLightData } from '@vygruppen/spor-loader';
+import { inlineLoaderColorData, spinnerColorData, contentLoaderData, fullScreenLoaderWhiteData, inlineLoaderDarkData, fullScreenLoaderBlackData, inlineLoaderLightData, spinnerLightData, spinnerDarkData } from '@vygruppen/spor-loader';
 import { useLottie } from 'lottie-react';
 import { useDateSegment, useDateField, useDatePicker, I18nProvider, usePopover, DismissButton, Overlay, useOverlayTrigger, useButton, useProgressBar, useCalendar, useDateRangePicker, useDialog, useFilter, useComboBox, useListBox, useOption, useListBoxSection, useSelect, HiddenSelect, useCalendarGrid, useRangeCalendar, useTimeField, useCalendarCell } from 'react-aria';
 import { motion } from 'framer-motion';
@@ -961,7 +961,9 @@ var DarkSpinner = ({
   maxWidth,
   ...props
 }) => {
-  return /* @__PURE__ */ React69__default.createElement(Center, { flexDirection: "column", ...props }, /* @__PURE__ */ React69__default.createElement(Box, { width, maxWidth }, /* @__PURE__ */ React69__default.createElement(ClientOnly, null, () => /* @__PURE__ */ React69__default.createElement(Lottie, { animationData: spinnerDarkData }))), children && /* @__PURE__ */ React69__default.createElement(Box, { marginTop: 3, fontWeight: "bold" }, children));
+  const { colorMode } = useColorMode();
+  const spinnerData = colorMode === "dark" ? spinnerLightData : spinnerDarkData;
+  return /* @__PURE__ */ React69__default.createElement(Center, { flexDirection: "column", ...props }, /* @__PURE__ */ React69__default.createElement(Box, { width, maxWidth }, /* @__PURE__ */ React69__default.createElement(ClientOnly, null, () => /* @__PURE__ */ React69__default.createElement(Lottie, { animationData: spinnerData }))), children && /* @__PURE__ */ React69__default.createElement(Box, { marginTop: 3, fontWeight: "bold" }, children));
 };
 var LightFullScreenLoader = ({
   width,
@@ -5022,7 +5024,8 @@ var PasswordInput = forwardRef(
         type: "button",
         onClick: onToggle,
         borderRadius: "sm",
-        marginRight: 1
+        marginRight: 1,
+        isDisabled: props.disabled || props.isDisabled
       },
       isShowingPassword ? t2(texts13.hidePassword) : t2(texts13.showPassword)
     )));
@@ -5110,7 +5113,7 @@ var texts14 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-HCQZVKWU.mjs'));
+var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-RUH47EQH.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React69__default.createElement(Radio$1, { ...props, ref });
 });
@@ -12910,6 +12913,71 @@ var srOnly2 = {
   width: "1px !important",
   whiteSpace: "nowrap !important"
 };
+function baseBorder(state2, props) {
+  switch (state2) {
+    case "hover":
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("darkGrey", "white")(props),
+          borderWidth: 2
+        })
+      };
+    case "focus": {
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("greenHaze", "azure")(props),
+          borderWidth: 2
+        })
+      };
+    }
+    case "disabled": {
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("platinum", "whiteAlpha.400")(props)
+        })
+      };
+    }
+    case "selected":
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("greenHaze", "azure")(props)
+        })
+      };
+    case "invalid": {
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: "brightRed",
+          borderWidth: 2
+        })
+      };
+    }
+    case "default":
+    default:
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props)
+        })
+      };
+  }
+}
+function baseBackground(state2, props) {
+  switch (state2) {
+    case "active":
+      return {
+        backgroundColor: mode("mint", "whiteAlpha.100")(props)
+      };
+    case "selected":
+      return {
+        backgroundColor: "pine"
+      };
+    case "disabled":
+      return {
+        backgroundColor: mode("silver", "whiteAlpha.100")(props)
+      };
+    default:
+      return {};
+  }
+}
 
 // src/theme/components/info-select.ts
 var parts6 = anatomy("InfoSelect").parts(
@@ -12936,57 +13004,44 @@ var config18 = helpers10.defineMultiStyleConfig({
       justifyContent: "space-between",
       alignItems: "center",
       fontSize: "mobile.md",
-      boxShadow: getBoxShadowString({
-        borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props)
-      }),
+      ...baseBorder("default", props),
       _hover: {
-        boxShadow: getBoxShadowString({
-          borderColor: mode("darkGrey", "whiteAlpha.600")(props),
-          borderWidth: 2
-        })
+        ...baseBorder("hover", props)
       },
       ...focusVisible({
         focus: {
-          boxShadow: getBoxShadowString({
-            borderColor: "greenHaze",
-            borderWidth: 2
-          }),
+          ...baseBorder("focus", props),
           outline: "none"
         },
         notFocus: {
-          boxShadow: getBoxShadowString({
-            borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props)
-          })
+          ...baseBorder("default", props)
         }
       }),
       _disabled: {
-        boxShadow: getBoxShadowString({ borderColor: "platinum" }),
-        _hover: { boxShadow: getBoxShadowString({ borderColor: "platinum" }) },
-        _focus: { boxShadow: getBoxShadowString({ borderColor: "platinum" }) }
+        color: "whiteAlpha.400",
+        ...baseBackground("disabled", props),
+        _hover: { ...baseBorder("disabled", props) },
+        _focus: { ...baseBorder("disabled", props) }
+      },
+      _active: {
+        ...baseBackground("active", props),
+        ...baseBorder("focus", props)
+      },
+      _expanded: {
+        ...baseBackground("active", props),
+        ...baseBorder("focus", props)
       },
       _invalid: {
-        boxShadow: getBoxShadowString({
-          borderColor: "brightRed",
-          borderWidth: 2
-        }),
+        ...baseBorder("invalid", props),
         _hover: {
-          boxShadow: getBoxShadowString({
-            borderColor: "darkGrey",
-            borderWidth: 2
-          })
+          ...baseBorder("hover", props)
         },
         ...focusVisible({
           focus: {
-            boxShadow: getBoxShadowString({
-              borderColor: "greenHaze",
-              borderWidth: 2
-            })
+            ...baseBorder("focus", props)
           },
           notFocus: {
-            boxShadow: getBoxShadowString({
-              borderColor: "brightRed",
-              borderWidth: 2
-            })
+            ...baseBorder("invalid", props)
           }
         })
       }
@@ -13348,13 +13403,15 @@ var config21 = helpers13.defineMultiStyleConfig({
           })
         },
         notFocus: {
-          boxShadow: getBoxShadowString({ borderColor: "darkGrey" })
+          boxShadow: getBoxShadowString({ borderColor: mode("darkGrey", "white")(props) })
         }
       }),
       _disabled: {
-        boxShadow: getBoxShadowString({ borderColor: "platinum" }),
-        _hover: { boxShadow: getBoxShadowString({ borderColor: "platinum" }) },
-        _focus: { boxShadow: getBoxShadowString({ borderColor: "platinum" }) }
+        backgroundColor: mode("blackAlpha.100", "whiteAlpha.100")(props),
+        boxShadow: getBoxShadowString({
+          borderColor: mode("blackAlpha.200", "whiteAlpha.200")(props)
+        }),
+        cursor: "not-allowed"
       },
       _invalid: {
         boxShadow: getBoxShadowString({
@@ -13363,7 +13420,7 @@ var config21 = helpers13.defineMultiStyleConfig({
         }),
         _hover: {
           boxShadow: getBoxShadowString({
-            borderColor: "darkGrey",
+            borderColor: mode("darkGrey", "white")(props),
             borderWidth: 2
           })
         },
@@ -13402,6 +13459,11 @@ var config21 = helpers13.defineMultiStyleConfig({
     },
     element: {
       height: "100%"
+    },
+    group: {
+      ":has(:disabled)": {
+        color: mode("blackAlpha.400", "whiteAlpha.400")(props)
+      }
     }
   })
 });
@@ -13608,14 +13670,18 @@ var link_default = config23;
 
 // src/theme/components/list.ts
 var { defineMultiStyleConfig: defineMultiStyleConfig28, definePartsStyle: definePartsStyle28 } = createMultiStyleConfigHelpers(listAnatomy.keys);
-var baseStyleIcon8 = defineStyle({
-  marginEnd: "2",
-  display: "inline",
-  verticalAlign: "text-bottom",
-  fontFamily: "body"
-});
 var baseStyle45 = definePartsStyle28({
-  icon: baseStyleIcon8
+  container: {
+    fontSize: ["mobile.sm", "desktop.sm"]
+  },
+  item: {
+    fontFamily: "body"
+  },
+  icon: {
+    marginEnd: "2",
+    display: "inline",
+    verticalAlign: "text-bottom"
+  }
 });
 var list_default = defineMultiStyleConfig28({
   baseStyle: baseStyle45
@@ -13630,7 +13696,11 @@ var helpers15 = createMultiStyleConfigHelpers$1(parts10.keys);
 var config24 = helpers15.defineMultiStyleConfig({
   baseStyle: (props) => ({
     container: {
-      background: mode("white", "darkGrey")(props),
+      // avoiding extra div by blending a transparent color into darkGrey for dark mode
+      backgroundColor: mode(
+        "mint",
+        `color-mix(in srgb, ${colors.darkGrey}, ${colors.white} 10%)`
+      )(props),
       boxShadow: "sm",
       overflowY: "auto",
       maxHeight: "50vh",
@@ -13647,20 +13717,20 @@ var config24 = helpers15.defineMultiStyleConfig({
       color: mode("darkGrey", "white")(props),
       cursor: "pointer",
       _hover: {
-        backgroundColor: mode("seaMist", "darkTeal")(props),
+        backgroundColor: mode("seaMist", "pine")(props),
         outline: "none"
       },
       _active: {
-        backgroundColor: mode("mint", "darkTeal")(props),
+        backgroundColor: mode("mint", "pine")(props),
         outline: "none"
       },
       _focus: {
         outline: "none",
-        backgroundColor: mode("seaMist", "darkTeal")(props)
+        backgroundColor: mode("seaMist", "pine")(props)
       },
       _selected: {
-        backgroundColor: mode("pine", "pine")(props),
-        color: mode("white", "white")(props)
+        ...baseBackground("selected", props),
+        color: "white"
       }
     },
     label: {},
@@ -14046,7 +14116,7 @@ var config29 = helpers20.defineMultiStyleConfig({
       strokeLinecap: "round",
       fontSize: "1.125rem",
       _disabled: {
-        opacity: 0.5
+        color: mode("blackAlpha.400", "whiteAlpha.400")(props)
       }
     }
   })

package/dist/index.d.mts

@@ -294,7 +294,7 @@ type ButtonProps = Exclude<ButtonProps$1, "colorScheme" | "loadingText" | "size"
  * </Button>
  * ```
  *
- * @see https://spor.vy.no/komponenter/button
+ * @see https://spor.vy.no/components/button
  */
 declare const Button: _chakra_ui_system_dist_system_types.ComponentWithAs<"button", ButtonProps>;
 
@@ -493,9 +493,11 @@ type TimePickerProps = Omit<BoxProps, "defaultValue" | "onChange"> & {
     value?: TimeValue;
     /** A default value, if any.
      *
-     * A `new Time(hours, minutes)` should be passed. Defaults to the current time if not provided.
+     * A `new Time(hours, minutes)` should be passed.
+     * Defaults to the current time if not provided.
+     * Can be set to null if you don't want a time to be selected by default.
      **/
-    defaultValue?: TimeValue;
+    defaultValue?: TimeValue | null;
     /** Callback for when the time changes */
     onChange?: (value: TimeValue) => void;
     /** The maxiumum number of minutes to move when the step buttons are used.
@@ -524,7 +526,7 @@ type TimePickerProps = Omit<BoxProps, "defaultValue" | "onChange"> & {
  *
  * Note that the TimePicker uses the `Time` class to represent the time. This is a class that is part of the `@internationalized/date` package.
  *
- * @see https://spor.vy.no/komponenter/timepicker
+ * @see https://spor.vy.no/komponents/timepicker
  */
 declare const TimePicker: ({ label: externalLabel, value, defaultValue, onChange, minuteInterval, isDisabled: isDisabledExternally, name, ...boxProps }: TimePickerProps) => React__default.JSX.Element;
 
@@ -676,7 +678,7 @@ type CardSelectProps = BoxProps & {
  * </CardSelect>
  * ```
  *
- * @see https://spor.vy.no/komponenter/card-select
+ * @see https://spor.vy.no/components/card-select
  */
 declare const CardSelect: _chakra_ui_system_dist_system_types.ComponentWithAs<"button", CardSelectProps>;
 
@@ -831,7 +833,7 @@ type FormErrorMessageProps = BoxProps & {
  * </FormControl>
  * ```
  *
- * @see https://spor.vy.no/komponenter/skjemaelementer
+ * @see https://spor.vy.no/components/form-control
  */
 declare const FormErrorMessage: ({ children, ...boxProps }: FormErrorMessageProps) => React__default.JSX.Element | null;
 
@@ -969,7 +971,7 @@ type InfoSelectProps<T extends object> = {
  * </InfoSelect>
  * ```
  *
- * @see https://spor.vy.no/komponenter/info-select
+ * @see https://spor.vy.no/components/info-select
  */
 declare function InfoSelect<T extends object>({ placeholder, width, height, onChange, value, isLabelSrOnly, defaultValue, ...props }: InfoSelectProps<T>): React__default.JSX.Element;
 
@@ -1343,7 +1345,7 @@ type InfoTagProps = TagProps;
  * />
  * ```
  *
- * @see https://spor.vy.no/komponenter/linjetags
+ * @see https://spor.vy.no/components/line-tags
  */
 declare const InfoTag: ({ variant, size, title, description, }: InfoTagProps) => React__default.JSX.Element;
 
@@ -1366,7 +1368,7 @@ type LineIconProps = BoxProps & {
  * <LineIcon variant="subway" size="lg" />
  * ```
  *
- * @see https://spor.vy.no/komponenter/linjetags
+ * @see https://spor.vy.no/components/line-tags
  */
 declare const LineIcon: ({ variant, size, sx, ...rest }: LineIconProps) => React__default.JSX.Element | null;
 
@@ -1409,7 +1411,7 @@ type TravelTagProps = TagProps & BoxProps & {
  * />
  * ```
  *
- * @see https://spor.vy.no/komponenter/linjetags
+ * @see https://spor.vy.no/components/line-tags
  */
 declare const TravelTag: _chakra_ui_system_dist_system_types.ComponentWithAs<As, TravelTagProps>;
 
@@ -3445,7 +3447,7 @@ declare const theme: {
             } | undefined;
             defaultProps?: {
                 size?: string | number | undefined;
-                variant?: "base" | "green" | "light" | "accent" | "brand" | "dark" | undefined;
+                variant?: "base" | "green" | "light" | "dark" | "accent" | "brand" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
             parts: ("text" | "container" | "icon")[];
@@ -3527,26 +3529,54 @@ declare const theme: {
                 };
                 button: {
                     _disabled: {
-                        boxShadow: string;
                         _hover: {
                             boxShadow: string;
                         };
                         _focus: {
                             boxShadow: string;
                         };
+                        backgroundColor: string;
+                        color: string;
+                    } | {
+                        _hover: {
+                            boxShadow: string;
+                        };
+                        _focus: {
+                            boxShadow: string;
+                        };
+                        backgroundColor?: undefined;
+                        color: string;
+                    };
+                    _active: {
+                        boxShadow: string;
+                        backgroundColor: string;
+                    } | {
+                        boxShadow: string;
+                        backgroundColor?: undefined;
+                    };
+                    _expanded: {
+                        boxShadow: string;
+                        backgroundColor: string;
+                    } | {
+                        boxShadow: string;
+                        backgroundColor?: undefined;
                     };
                     _invalid: {
                         _focus: _chakra_ui_styled_system.SystemStyleObject;
                         _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
                         "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
-                        boxShadow: string;
                         _hover: {
                             boxShadow: string;
                         };
+                        boxShadow: string;
                     };
                     _focus: _chakra_ui_styled_system.SystemStyleObject;
                     _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
                     "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
+                    _hover: {
+                        boxShadow: string;
+                    };
+                    boxShadow: string;
                     appearance: string;
                     borderTopRadius: string;
                     borderBottomRadius: string | number;
@@ -3556,10 +3586,6 @@ declare const theme: {
                     justifyContent: string;
                     alignItems: string;
                     fontSize: string;
-                    boxShadow: string;
-                    _hover: {
-                        boxShadow: string;
-                    };
                 };
                 arrowIcon: {};
             }) | undefined;
@@ -3716,13 +3742,9 @@ declare const theme: {
             baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
                 field: {
                     _disabled: {
+                        backgroundColor: string;
                         boxShadow: string;
-                        _hover: {
-                            boxShadow: string;
-                        };
-                        _focus: {
-                            boxShadow: string;
-                        };
+                        cursor: string;
                     };
                     _invalid: {
                         _focus: _chakra_ui_styled_system.SystemStyleObject;
@@ -3777,6 +3799,11 @@ declare const theme: {
                 element: {
                     height: string;
                 };
+                group: {
+                    ":has(:disabled)": {
+                        color: string;
+                    };
+                };
             }) | undefined;
             sizes?: {
                 [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
@@ -3981,11 +4008,16 @@ declare const theme: {
         };
         List: {
             baseStyle?: {
+                container: {
+                    fontSize: ("mobile.sm" | "desktop.sm")[];
+                };
+                item: {
+                    fontFamily: string;
+                };
                 icon: {
                     marginEnd: string;
                     display: string;
                     verticalAlign: string;
-                    fontFamily: string;
                 };
             } | undefined;
             sizes?: {
@@ -4008,7 +4040,7 @@ declare const theme: {
         ListBox: {
             baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
                 container: {
-                    background: string;
+                    backgroundColor: string;
                     boxShadow: string;
                     overflowY: string;
                     maxHeight: string;
@@ -4037,8 +4069,11 @@ declare const theme: {
                         backgroundColor: string;
                     };
                     _selected: {
+                        color: string;
                         backgroundColor: string;
+                    } | {
                         color: string;
+                        backgroundColor?: undefined;
                     };
                 };
                 label: {};
@@ -4400,13 +4435,9 @@ declare const theme: {
                         background: string;
                     };
                     _disabled: {
+                        backgroundColor: string;
                         boxShadow: string;
-                        _hover: {
-                            boxShadow: string;
-                        };
-                        _focus: {
-                            boxShadow: string;
-                        };
+                        cursor: string;
                     };
                     _invalid: {
                         _focus: _chakra_ui_styled_system.SystemStyleObject;
@@ -4466,7 +4497,7 @@ declare const theme: {
                     strokeLinecap: string;
                     fontSize: string;
                     _disabled: {
-                        opacity: number;
+                        color: string;
                     };
                 };
             }) | undefined;
@@ -5217,13 +5248,9 @@ declare const theme: {
                     };
                 };
                 _disabled: {
+                    backgroundColor: string;
                     boxShadow: string;
-                    _hover: {
-                        boxShadow: string;
-                    };
-                    _focus: {
-                        boxShadow: string;
-                    };
+                    cursor: string;
                 };
                 _invalid: {
                     _focus: _chakra_ui_styled_system.SystemStyleObject;