@vygruppen/spor-react 4.0.1 → 4.0.3

package/dist/index.d.ts

@@ -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;

package/dist/index.js

@@ -360,7 +360,9 @@ var init_DarkSpinner = __esm({
       maxWidth,
       ...props
     }) => {
-      return /* @__PURE__ */ React69__namespace.default.createElement(react.Center, { flexDirection: "column", ...props }, /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { width, maxWidth }, /* @__PURE__ */ React69__namespace.default.createElement(ClientOnly, null, () => /* @__PURE__ */ React69__namespace.default.createElement(Lottie, { animationData: sporLoader.spinnerDarkData }))), children && /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { marginTop: 3, fontWeight: "bold" }, children));
+      const { colorMode } = react.useColorMode();
+      const spinnerData = colorMode === "dark" ? sporLoader.spinnerLightData : sporLoader.spinnerDarkData;
+      return /* @__PURE__ */ React69__namespace.default.createElement(react.Center, { flexDirection: "column", ...props }, /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { width, maxWidth }, /* @__PURE__ */ React69__namespace.default.createElement(ClientOnly, null, () => /* @__PURE__ */ React69__namespace.default.createElement(Lottie, { animationData: spinnerData }))), children && /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { marginTop: 3, fontWeight: "bold" }, children));
     };
   }
 });
@@ -5632,7 +5634,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)
         )));
@@ -14513,13 +14516,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",
@@ -14544,57 +14622,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)
               }
             })
           }
@@ -14975,13 +15040,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({
@@ -14990,7 +15057,7 @@ var init_input2 = __esm({
             }),
             _hover: {
               boxShadow: getBoxShadowString({
-                borderColor: "darkGrey",
+                borderColor: themeTools.mode("darkGrey", "white")(props),
                 borderWidth: 2
               })
             },
@@ -15029,6 +15096,11 @@ var init_input2 = __esm({
         },
         element: {
           height: "100%"
+        },
+        group: {
+          ":has(:disabled)": {
+            color: themeTools.mode("blackAlpha.400", "whiteAlpha.400")(props)
+          }
         }
       })
     });
@@ -15248,20 +15320,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
@@ -15272,6 +15348,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",
@@ -15282,7 +15360,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",
@@ -15299,20 +15381,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: {},
@@ -15732,7 +15814,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-3SY4N6MP.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-XT6QVKN5.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "4.0.1",
+  "version": "4.0.3",
   "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/TimePicker.tsx

@@ -24,9 +24,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.
@@ -55,7 +57,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">(
   (

package/src/input/FormErrorMessage.tsx

@@ -30,7 +30,7 @@ export type FormErrorMessageProps = BoxProps & {
  * </FormControl>
  * ```
  *
- * @see https://spor.vy.no/komponenter/skjemaelementer
+ * @see https://spor.vy.no/components/form-control
  */
 export const FormErrorMessage = ({
   children,

package/src/input/InfoSelect.tsx

@@ -147,7 +147,7 @@ type InfoSelectProps<T extends object> = {
  * </InfoSelect>
  * ```
  *
- * @see https://spor.vy.no/komponenter/info-select
+ * @see https://spor.vy.no/components/info-select
  */
 export function InfoSelect<T extends object>({
   placeholder,

package/src/input/PasswordInput.tsx

@@ -46,6 +46,7 @@ export const PasswordInput = forwardRef<PasswordInputProps, "input">(
             onClick={onToggle}
             borderRadius="sm"
             marginRight={1}
+            isDisabled={props.disabled || props.isDisabled}
           >
             {isShowingPassword ? t(texts.hidePassword) : t(texts.showPassword)}
           </Button>