@vygruppen/spor-react 4.0.0 → 4.0.2

package/dist/index.js

@@ -3476,7 +3476,7 @@ var init_DatePicker = __esm({
         const onFieldClick = () => {
           state2.setOpen(true);
         };
-        const popoverContent = /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverContent, { color: "darkGrey", boxShadow: "md", sx: styles3.calendar }, /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverArrow, { sx: styles3.arrow }), /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverBody, null, /* @__PURE__ */ React69__namespace.default.createElement(react.FocusLock, null, /* @__PURE__ */ React69__namespace.default.createElement(
+        const popoverContent = /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverContent, { color: "darkGrey", sx: styles3.calendarPopover }, /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverArrow, { sx: styles3.arrow }), /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverBody, null, /* @__PURE__ */ React69__namespace.default.createElement(react.FocusLock, null, /* @__PURE__ */ React69__namespace.default.createElement(
           Calendar,
           {
             ...calendarProps,
@@ -3591,7 +3591,7 @@ function DateRangePicker({
   const onFieldClick = () => {
     state2.setOpen(true);
   };
-  const popoverContent = /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverContent, { sx: styles3.calendar, boxShadow: "md", maxWidth: "none" }, /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverArrow, { sx: styles3.arrow }), /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverBody, null, /* @__PURE__ */ React69__namespace.default.createElement(react.FocusLock, null, /* @__PURE__ */ React69__namespace.default.createElement(RangeCalendar, { variant: "base", ...calendarProps }))));
+  const popoverContent = /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverContent, { sx: styles3.calendarPopover, maxWidth: "none" }, /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverArrow, { sx: styles3.arrow }), /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverBody, null, /* @__PURE__ */ React69__namespace.default.createElement(react.FocusLock, null, /* @__PURE__ */ React69__namespace.default.createElement(RangeCalendar, { variant: "base", ...calendarProps }))));
   return /* @__PURE__ */ React69__namespace.default.createElement(reactAria.I18nProvider, { locale }, /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { position: "relative", display: "inline-flex", flexDirection: "column" }, props.label && /* @__PURE__ */ React69__namespace.default.createElement(react.FormLabel, { ...labelProps, sx: styles3.inputLabel }, props.label), /* @__PURE__ */ React69__namespace.default.createElement(
     react.Popover,
     {
@@ -3610,7 +3610,16 @@ function DateRangePicker({
         onKeyPress: handleEnterClick,
         minHeight
       },
-      variant && /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverTrigger, null, /* @__PURE__ */ React69__namespace.default.createElement(CalendarTriggerButton, { paddingLeft: 1, paddingRight: 1, variant, ref, ...buttonProps })),
+      variant && /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverTrigger, null, /* @__PURE__ */ React69__namespace.default.createElement(
+        CalendarTriggerButton,
+        {
+          paddingLeft: 1,
+          paddingRight: 1,
+          variant,
+          ref,
+          ...buttonProps
+        }
+      )),
       /* @__PURE__ */ React69__namespace.default.createElement(
         DateField,
         {
@@ -5623,7 +5632,8 @@ var init_PasswordInput = __esm({
             type: "button",
             onClick: onToggle,
             borderRadius: "sm",
-            marginRight: 1
+            marginRight: 1,
+            isDisabled: props.disabled || props.isDisabled
           },
           isShowingPassword ? t2(texts13.hidePassword) : t2(texts13.showPassword)
         )));
@@ -13776,6 +13786,7 @@ var init_datepicker2 = __esm({
       "wrapper",
       "calendarTriggerButton",
       "arrow",
+      "calendarPopover",
       "calendar",
       "weekdays",
       "weekend",
@@ -13800,36 +13811,10 @@ var init_datepicker2 = __esm({
           paddingY: 0.5,
           alignItems: "center",
           _hover: {
-            boxShadow: getBoxShadowString({
-              borderColor: themeTools.mode("darkGrey", "white")(props),
-              borderWidth: 2
-            }),
             zIndex: zIndices2.docked
           },
-          _focusWithin: {
-            boxShadow: getBoxShadowString({
-              borderColor: themeTools.mode("greenHaze", "azure")(props),
-              borderWidth: 2
-            })
-          },
-          _invalid: {
-            boxShadow: getBoxShadowString({
-              borderColor: "brightRed",
-              borderWidth: 2
-            })
-          },
           _disabled: {
-            pointerEvents: "none",
-            boxShadow: getBoxShadowString({
-              borderColor: themeTools.mode("osloGrey", "whiteAlpha.400")(props),
-              borderWidth: 1
-            }),
-            _focus: {
-              boxShadow: getBoxShadowString({
-                borderColor: themeTools.mode("osloGrey", "whiteAlpha.400")(props),
-                borderWidth: 1
-              })
-            }
+            pointerEvents: "none"
           }
         },
         inputLabel: {
@@ -13891,12 +13876,13 @@ var init_datepicker2 = __esm({
         arrow: {
           [$arrowBackground.variable]: themeTools.mode("white", colors.night)(props)
         },
-        calendar: {
+        calendarPopover: {
           backgroundColor: themeTools.mode("white", "night")(props),
           color: themeTools.mode("darkGrey", "white")(props),
           boxShadow: getBoxShadowString({
             borderWidth: 2,
-            borderColor: themeTools.mode("blackAlpha.200", "whiteAlpha.200")(props)
+            borderColor: themeTools.mode("blackAlpha.200", "whiteAlpha.200")(props),
+            baseShadow: "md"
           })
         },
         weekdays: {
@@ -13980,6 +13966,41 @@ var init_datepicker2 = __esm({
       }),
       variants: {
         base: (props) => ({
+          wrapper: {
+            boxShadow: getBoxShadowString({
+              borderColor: themeTools.mode("blackAlpha.400", "whiteAlpha.400")(props)
+            }),
+            _hover: {
+              boxShadow: getBoxShadowString({
+                borderColor: themeTools.mode("darkGrey", "white")(props),
+                borderWidth: 2
+              })
+            },
+            _focusWithin: {
+              boxShadow: getBoxShadowString({
+                borderColor: themeTools.mode("greenHaze", "azure")(props),
+                borderWidth: 2
+              })
+            },
+            _invalid: {
+              boxShadow: getBoxShadowString({
+                borderColor: "brightRed",
+                borderWidth: 2
+              })
+            },
+            _disabled: {
+              boxShadow: getBoxShadowString({
+                borderColor: themeTools.mode("osloGrey", "whiteAlpha.400")(props),
+                borderWidth: 1
+              }),
+              _focus: {
+                boxShadow: getBoxShadowString({
+                  borderColor: themeTools.mode("osloGrey", "whiteAlpha.400")(props),
+                  borderWidth: 1
+                })
+              }
+            }
+          },
           calendar: {
             backgroundColor: themeTools.mode("white", "night")(props),
             color: themeTools.mode("darkGrey", "white")(props),
@@ -14002,6 +14023,47 @@ var init_datepicker2 = __esm({
           }
         }),
         floating: (props) => ({
+          wrapper: {
+            boxShadow: getBoxShadowString({
+              borderColor: themeTools.mode("blackAlpha.400", "whiteAlpha.400")(props),
+              baseShadow: "sm"
+            }),
+            _hover: {
+              boxShadow: getBoxShadowString({
+                borderColor: themeTools.mode("darkGrey", "white")(props),
+                borderWidth: 2,
+                baseShadow: "sm"
+              })
+            },
+            _focusWithin: {
+              boxShadow: getBoxShadowString({
+                borderColor: themeTools.mode("greenHaze", "azure")(props),
+                borderWidth: 2,
+                baseShadow: "sm"
+              })
+            },
+            _invalid: {
+              boxShadow: getBoxShadowString({
+                borderColor: "brightRed",
+                borderWidth: 2,
+                baseShadow: "sm"
+              })
+            },
+            _disabled: {
+              boxShadow: getBoxShadowString({
+                borderColor: themeTools.mode("osloGrey", "whiteAlpha.400")(props),
+                borderWidth: 1,
+                baseShadow: "sm"
+              }),
+              _focus: {
+                boxShadow: getBoxShadowString({
+                  borderColor: themeTools.mode("osloGrey", "whiteAlpha.400")(props),
+                  borderWidth: 1,
+                  baseShadow: "sm"
+                })
+              }
+            }
+          },
           calendar: {
             backgroundColor: themeTools.mode("white", "night")(props),
             color: themeTools.mode("darkGrey", "white")(props),
@@ -14018,13 +14080,43 @@ var init_datepicker2 = __esm({
           }
         }),
         ghost: (props) => ({
+          wrapper: {
+            boxShadow: "none",
+            _hover: {
+              boxShadow: getBoxShadowString({
+                borderColor: themeTools.mode("darkGrey", "white")(props),
+                borderWidth: 2
+              })
+            },
+            _focusWithin: {
+              boxShadow: getBoxShadowString({
+                borderColor: themeTools.mode("greenHaze", "azure")(props),
+                borderWidth: 2
+              })
+            },
+            _invalid: {
+              boxShadow: getBoxShadowString({
+                borderColor: "brightRed",
+                borderWidth: 2
+              })
+            },
+            _disabled: {
+              boxShadow: getBoxShadowString({
+                borderColor: themeTools.mode("osloGrey", "whiteAlpha.400")(props),
+                borderWidth: 1
+              }),
+              _focus: {
+                boxShadow: getBoxShadowString({
+                  borderColor: themeTools.mode("osloGrey", "whiteAlpha.400")(props),
+                  borderWidth: 1
+                })
+              }
+            }
+          },
           calendar: {
             backgroundColor: themeTools.mode("white", "night")(props),
             color: themeTools.mode("darkGrey", "white")(props),
-            boxShadow: getBoxShadowString({
-              borderWidth: 2,
-              borderColor: themeTools.mode("", "")(props)
-            })
+            boxShadow: "none"
           },
           dateCell: {
             color: themeTools.mode("darkGrey", "white")(props),
@@ -14032,7 +14124,7 @@ var init_datepicker2 = __esm({
               backgroundColor: themeTools.mode("seaMist", "pine")(props)
             },
             _selected: {
-              backgroundColor: themeTools.mode("", "primaryGreen")(props),
+              backgroundColor: themeTools.mode("transparent", "primaryGreen")(props),
               color: "darkGrey"
             }
           }
@@ -14422,13 +14514,88 @@ var init_sr_utils = __esm({
     };
   }
 });
+function baseBorder(state2, props) {
+  switch (state2) {
+    case "hover":
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: themeTools.mode("darkGrey", "white")(props),
+          borderWidth: 2
+        })
+      };
+    case "focus": {
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: themeTools.mode("greenHaze", "azure")(props),
+          borderWidth: 2
+        })
+      };
+    }
+    case "disabled": {
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: themeTools.mode("platinum", "whiteAlpha.400")(props)
+        })
+      };
+    }
+    case "selected":
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: themeTools.mode("greenHaze", "azure")(props)
+        })
+      };
+    case "invalid": {
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: "brightRed",
+          borderWidth: 2
+        })
+      };
+    }
+    case "default":
+    default:
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: themeTools.mode("blackAlpha.400", "whiteAlpha.400")(props)
+        })
+      };
+  }
+}
+var init_border_utils = __esm({
+  "src/theme/utils/border-utils.ts"() {
+    init_box_shadow_utils();
+  }
+});
+function baseBackground(state2, props) {
+  switch (state2) {
+    case "active":
+      return {
+        backgroundColor: themeTools.mode("mint", "whiteAlpha.100")(props)
+      };
+    case "selected":
+      return {
+        backgroundColor: "pine"
+      };
+    case "disabled":
+      return {
+        backgroundColor: themeTools.mode("silver", "whiteAlpha.100")(props)
+      };
+    default:
+      return {};
+  }
+}
+var init_background_utils = __esm({
+  "src/theme/utils/background-utils.ts"() {
+  }
+});
 var parts6, helpers10, config18, info_select_default;
 var init_info_select = __esm({
   "src/theme/components/info-select.ts"() {
     init_dist4();
-    init_box_shadow_utils();
     init_focus_utils();
     init_sr_utils();
+    init_border_utils();
+    init_background_utils();
     parts6 = anatomy("InfoSelect").parts(
       "container",
       "label",
@@ -14453,57 +14620,44 @@ var init_info_select = __esm({
           justifyContent: "space-between",
           alignItems: "center",
           fontSize: "mobile.md",
-          boxShadow: getBoxShadowString({
-            borderColor: themeTools.mode("blackAlpha.400", "whiteAlpha.400")(props)
-          }),
+          ...baseBorder("default", props),
           _hover: {
-            boxShadow: getBoxShadowString({
-              borderColor: themeTools.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: themeTools.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)
               }
             })
           }
@@ -14884,13 +15038,15 @@ var init_input2 = __esm({
               })
             },
             notFocus: {
-              boxShadow: getBoxShadowString({ borderColor: "darkGrey" })
+              boxShadow: getBoxShadowString({ borderColor: themeTools.mode("darkGrey", "white")(props) })
             }
           }),
           _disabled: {
-            boxShadow: getBoxShadowString({ borderColor: "platinum" }),
-            _hover: { boxShadow: getBoxShadowString({ borderColor: "platinum" }) },
-            _focus: { boxShadow: getBoxShadowString({ borderColor: "platinum" }) }
+            backgroundColor: themeTools.mode("blackAlpha.100", "whiteAlpha.100")(props),
+            boxShadow: getBoxShadowString({
+              borderColor: themeTools.mode("blackAlpha.200", "whiteAlpha.200")(props)
+            }),
+            cursor: "not-allowed"
           },
           _invalid: {
             boxShadow: getBoxShadowString({
@@ -14899,7 +15055,7 @@ var init_input2 = __esm({
             }),
             _hover: {
               boxShadow: getBoxShadowString({
-                borderColor: "darkGrey",
+                borderColor: themeTools.mode("darkGrey", "white")(props),
                 borderWidth: 2
               })
             },
@@ -14938,6 +15094,11 @@ var init_input2 = __esm({
         },
         element: {
           height: "100%"
+        },
+        group: {
+          ":has(:disabled)": {
+            color: themeTools.mode("blackAlpha.400", "whiteAlpha.400")(props)
+          }
         }
       })
     });
@@ -15157,20 +15318,24 @@ var init_link2 = __esm({
 });
 
 // src/theme/components/list.ts
-var defineMultiStyleConfig28, definePartsStyle28, baseStyleIcon8, baseStyle45, list_default;
+var defineMultiStyleConfig28, definePartsStyle28, baseStyle45, list_default;
 var init_list2 = __esm({
   "src/theme/components/list.ts"() {
     init_dist4();
     init_dist3();
     ({ defineMultiStyleConfig: defineMultiStyleConfig28, definePartsStyle: definePartsStyle28 } = createMultiStyleConfigHelpers(listAnatomy.keys));
-    baseStyleIcon8 = defineStyle({
-      marginEnd: "2",
-      display: "inline",
-      verticalAlign: "text-bottom",
-      fontFamily: "body"
-    });
     baseStyle45 = definePartsStyle28({
-      icon: baseStyleIcon8
+      container: {
+        fontSize: ["mobile.sm", "desktop.sm"]
+      },
+      item: {
+        fontFamily: "body"
+      },
+      icon: {
+        marginEnd: "2",
+        display: "inline",
+        verticalAlign: "text-bottom"
+      }
     });
     list_default = defineMultiStyleConfig28({
       baseStyle: baseStyle45
@@ -15181,6 +15346,8 @@ var parts10, helpers15, config24, listbox_default;
 var init_listbox = __esm({
   "src/theme/components/listbox.ts"() {
     init_dist4();
+    init_foundations();
+    init_background_utils();
     parts10 = anatomy("ListBox").parts(
       "container",
       "item",
@@ -15191,7 +15358,11 @@ var init_listbox = __esm({
     config24 = helpers15.defineMultiStyleConfig({
       baseStyle: (props) => ({
         container: {
-          background: themeTools.mode("white", "darkGrey")(props),
+          // avoiding extra div by blending a transparent color into darkGrey for dark mode
+          backgroundColor: themeTools.mode(
+            "mint",
+            `color-mix(in srgb, ${colors.darkGrey}, ${colors.white} 10%)`
+          )(props),
           boxShadow: "sm",
           overflowY: "auto",
           maxHeight: "50vh",
@@ -15208,20 +15379,20 @@ var init_listbox = __esm({
           color: themeTools.mode("darkGrey", "white")(props),
           cursor: "pointer",
           _hover: {
-            backgroundColor: themeTools.mode("seaMist", "darkTeal")(props),
+            backgroundColor: themeTools.mode("seaMist", "pine")(props),
             outline: "none"
           },
           _active: {
-            backgroundColor: themeTools.mode("mint", "darkTeal")(props),
+            backgroundColor: themeTools.mode("mint", "pine")(props),
             outline: "none"
           },
           _focus: {
             outline: "none",
-            backgroundColor: themeTools.mode("seaMist", "darkTeal")(props)
+            backgroundColor: themeTools.mode("seaMist", "pine")(props)
           },
           _selected: {
-            backgroundColor: themeTools.mode("pine", "pine")(props),
-            color: themeTools.mode("white", "white")(props)
+            ...baseBackground("selected", props),
+            color: "white"
           }
         },
         label: {},
@@ -15641,7 +15812,7 @@ var init_select = __esm({
           strokeLinecap: "round",
           fontSize: "1.125rem",
           _disabled: {
-            opacity: 0.5
+            color: themeTools.mode("blackAlpha.400", "whiteAlpha.400")(props)
           }
         }
       })

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-B77QE6EZ.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-MGJQOEU2.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "4.0.0",
+  "version": "4.0.2",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/src/button/Button.tsx

@@ -58,7 +58,7 @@ export type ButtonProps = Exclude<
  * </Button>
  * ```
  *
- * @see https://spor.vy.no/komponenter/button
+ * @see https://spor.vy.no/components/button
  */
 export const Button = forwardRef<ButtonProps, "button">((props, ref) => {
   const {

package/src/datepicker/DatePicker.tsx

@@ -88,7 +88,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
     };
 
     const popoverContent = (
-      <PopoverContent color="darkGrey" boxShadow="md" sx={styles.calendar}>
+      <PopoverContent color="darkGrey" sx={styles.calendarPopover}>
         <PopoverArrow sx={styles.arrow} />
         <PopoverBody>
           <FocusLock>

package/src/datepicker/DateRangePicker.tsx

@@ -12,7 +12,6 @@ import {
   PopoverTrigger,
   Portal,
   ResponsiveValue,
-  useBreakpointValue,
   useFormControlContext,
   useMultiStyleConfig,
 } from "@chakra-ui/react";
@@ -36,11 +35,7 @@ type DateRangePickerProps = AriaDateRangePickerProps<DateValue> &
     startName?: string;
     endLabel?: string;
     endName?: string;
-    variant: ResponsiveValue<
-     "base" 
-    | "floating"
-    | "ghost"
-    >;
+    variant: ResponsiveValue<"base" | "floating" | "ghost">;
     withPortal?: boolean;
   };
 /**
@@ -78,7 +73,7 @@ export function DateRangePicker({
     calendarProps,
   } = useDateRangePicker(props, state, ref);
 
-  const styles = useMultiStyleConfig("Datepicker", {variant});
+  const styles = useMultiStyleConfig("Datepicker", { variant });
   const locale = useCurrentLocale();
 
   const handleEnterClick = (e: React.KeyboardEvent) => {
@@ -90,11 +85,11 @@ export function DateRangePicker({
   };
 
   const onFieldClick = () => {
-      state.setOpen(true);
+    state.setOpen(true);
   };
 
   const popoverContent = (
-    <PopoverContent sx={styles.calendar} boxShadow="md" maxWidth="none">
+    <PopoverContent sx={styles.calendarPopover} maxWidth="none">
       <PopoverArrow sx={styles.arrow} />
       <PopoverBody>
         <FocusLock>
@@ -130,7 +125,13 @@ export function DateRangePicker({
               >
                 {variant && (
                   <PopoverTrigger>
-                    <CalendarTriggerButton paddingLeft={1} paddingRight={1} variant={variant} ref={ref} {...buttonProps} />
+                    <CalendarTriggerButton
+                      paddingLeft={1}
+                      paddingRight={1}
+                      variant={variant}
+                      ref={ref}
+                      {...buttonProps}
+                    />
                   </PopoverTrigger>
                 )}
                 <DateField
@@ -139,7 +140,7 @@ export function DateRangePicker({
                   label={props.startLabel}
                   labelProps={labelProps}
                 />
-                 <Box as="span" aria-hidden="true" paddingRight="2">
+                <Box as="span" aria-hidden="true" paddingRight="2">
                   –
                 </Box>
                 <DateField

package/src/datepicker/TimePicker.tsx

@@ -55,7 +55,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
  */
 export const TimePicker = ({
   label: externalLabel,

package/src/input/CardSelect.tsx

@@ -58,7 +58,7 @@ type CardSelectProps = BoxProps & {
  * </CardSelect>
  * ```
  *
- * @see https://spor.vy.no/komponenter/card-select
+ * @see https://spor.vy.no/components/card-select
  */
 export const CardSelect = forwardRef<CardSelectProps, "button">(
   (