@vygruppen/spor-react 5.0.0 → 5.1.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@5.0.0 build
+> @vygruppen/spor-react@5.1.0 build
 > tsup src/index.tsx --dts --treeshake --format cjs,esm
 
 CLI Building entry: src/index.tsx
@@ -8,13 +8,15 @@
 CLI Target: node16
 CJS Build start
 ESM Build start
+"Collapse" is imported from external module "@chakra-ui/react" but never used in "dist/index.js".
+"Collapse" is imported from external module "@chakra-ui/react" but never used in "dist/chunk-VXZX2ZXT.mjs".
 DTS Build start
-ESM dist/index.mjs                      2.10 KB
-ESM dist/CountryCodeSelect-YOBYHYCF.mjs 1.19 KB
-ESM dist/chunk-UOZQ4EDI.mjs             382.90 KB
-ESM ⚡️ Build success in 2307ms
-CJS dist/index.js 490.51 KB
-CJS ⚡️ Build success in 2308ms
-DTS ⚡️ Build success in 13078ms
-DTS dist/index.d.ts  262.47 KB
-DTS dist/index.d.mts 262.47 KB
+CJS dist/index.js 493.70 KB
+CJS ⚡️ Build success in 2337ms
+ESM dist/index.mjs                      2.12 KB
+ESM dist/CountryCodeSelect-M5TBGWY5.mjs 1.19 KB
+ESM dist/chunk-VXZX2ZXT.mjs             385.58 KB
+ESM ⚡️ Build success in 2338ms
+DTS ⚡️ Build success in 12621ms
+DTS dist/index.d.ts  262.63 KB
+DTS dist/index.d.mts 262.63 KB

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @vygruppen/spor-react
 
+## 5.1.0
+
+### Minor Changes
+
+- a16a9972: Expose new methods and components from Chakra:
+
+  - defineStyleConfig
+  - Collapse
+  - useSize
+  - ComponentStyleConfig (type)
+  - CSSWithMultiValues (type)
+
+### Patch Changes
+
+- f3394fb3: DatePicker: Fix bug where field went from uncontrolled to controleld
+- 1a6eb2f8: TimePicker: Allow for null values (so the time can be reset)
+- 6043ebfb: Button, IconButton: Fix a bug that broke loading states
+
 ## 5.0.0
 
 ### Major Changes

package/dist/{CountryCodeSelect-YOBYHYCF.mjs → CountryCodeSelect-M5TBGWY5.mjs}

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

package/dist/{chunk-UOZQ4EDI.mjs → chunk-VXZX2ZXT.mjs}

@@ -1,10 +1,10 @@
-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';
 export { tokens10 as tokens };
+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, 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, defineStyleConfig, extendTheme, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToken } from '@chakra-ui/react';
 import * as React69 from 'react';
-import React69__default, { createContext, useEffect, forwardRef as forwardRef$1, useRef, useState, useId, Suspense, useContext, useCallback, useMemo } from 'react';
+import React69__default, { createContext, useEffect, forwardRef as forwardRef$1, useRef, useState, useId, Suspense, useContext, useCallback, useMemo, useLayoutEffect } 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, fullScreenLoaderBlackData, inlineLoaderLightData, spinnerLightData, spinnerDarkData } from '@vygruppen/spor-loader';
 import { useLottie } from 'lottie-react';
@@ -1167,7 +1167,8 @@ var Button = forwardRef((props, ref) => {
     isLoading,
     isDisabled,
     leftIcon,
-    rightIcon
+    rightIcon,
+    ...rest
   } = props;
   const ariaLabel = useCorrectAriaLabel(props);
   const buttonGroup = useButtonGroup();
@@ -1178,7 +1179,7 @@ var Button = forwardRef((props, ref) => {
     {
       size: finalSize,
       variant: finalVariant,
-      ...props,
+      ...rest,
       ref,
       "aria-label": ariaLabel,
       "aria-busy": isLoading,
@@ -1200,8 +1201,9 @@ var Button = forwardRef((props, ref) => {
         ColorInlineLoader,
         {
           maxWidth: getLoaderWidth(finalSize),
-          width: "100%",
-          marginX: 2
+          width: "80%",
+          marginX: 2,
+          marginY: 2
         }
       )
     ),
@@ -1251,7 +1253,7 @@ var IconButton = forwardRef(
     {
       title: props["aria-label"],
       ...props,
-      spinner: /* @__PURE__ */ React69__default.createElement(ColorSpinner, { margin: 1 }),
+      spinner: /* @__PURE__ */ React69__default.createElement(ColorSpinner, { width: "80%", height: "80%", marginX: 1, marginTop: 1 }),
       ref
     }
   )
@@ -2004,7 +2006,7 @@ var DateField = forwardRef$1(
       "input",
       {
         type: "hidden",
-        value: (_a6 = state2.value) == null ? void 0 : _a6.toString(),
+        value: ((_a6 = state2.value) == null ? void 0 : _a6.toString()) ?? "",
         name: props.name
       }
     ));
@@ -3416,7 +3418,7 @@ var texts14 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-YOBYHYCF.mjs'));
+var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-M5TBGWY5.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React69__default.createElement(Radio$1, { ...props, ref });
 });
@@ -13533,4 +13535,95 @@ var getToastComponent = (opts) => {
   return ({ id }) => /* @__PURE__ */ React69__default.createElement(BaseToast, { id, variant: opts.variant }, opts.text);
 };
 
-export { Accordion, AttachedInputs, Badge, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, ColorInlineLoader, ColorSpinner, Combobox, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerContent, Expandable, ExpandableAlert, ExpandableItem, FloatingActionButton, FormControl, FormErrorMessage, FormLabel3 as FormLabel, Heading, IconButton, InfoSelect, InfoTag, Input, InputLeftElement2 as InputLeftElement, InputRightElement2 as InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightSpinner, LineIcon, ListBox, ModalHeader, NativeSelect, NumericStepper, PasswordInput, PhoneNumberInput, PlayPauseButton, PopoverWizardBody, ProgressBar, ProgressLoader, Radio, RadioGroup, SearchInput, SimpleDrawer, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Table, Tabs, Text4 as Text, TextLink, Textarea, TimePicker, TravelTag, VyLogo, WizardPopover, createTexts, fontFaces, theme, useToast, useTranslation };
+// ../../node_modules/@zag-js/element-size/dist/track-size.mjs
+function trackElementSize(element, callback) {
+  if (!element) {
+    callback(void 0);
+    return;
+  }
+  callback({ width: element.offsetWidth, height: element.offsetHeight });
+  const win = element.ownerDocument.defaultView ?? window;
+  const observer = new win.ResizeObserver((entries) => {
+    if (!Array.isArray(entries) || !entries.length)
+      return;
+    const [entry] = entries;
+    let width;
+    let height;
+    if ("borderBoxSize" in entry) {
+      const borderSizeEntry = entry["borderBoxSize"];
+      const borderSize = Array.isArray(borderSizeEntry) ? borderSizeEntry[0] : borderSizeEntry;
+      width = borderSize["inlineSize"];
+      height = borderSize["blockSize"];
+    } else {
+      width = element.offsetWidth;
+      height = element.offsetHeight;
+    }
+    callback({ width, height });
+  });
+  observer.observe(element, { box: "border-box" });
+  return () => observer.unobserve(element);
+}
+var useSafeLayoutEffect = Boolean(globalThis == null ? void 0 : globalThis.document) ? useLayoutEffect : useEffect;
+function trackMutation(el, cb) {
+  var _a6, _b5;
+  if (!el || !el.parentElement)
+    return;
+  const win = (_b5 = (_a6 = el.ownerDocument) == null ? void 0 : _a6.defaultView) != null ? _b5 : window;
+  const observer = new win.MutationObserver(() => {
+    cb();
+  });
+  observer.observe(el.parentElement, { childList: true });
+  return () => {
+    observer.disconnect();
+  };
+}
+function useSizes({
+  getNodes,
+  observeMutation = true
+}) {
+  const [sizes26, setSizes] = useState([]);
+  const [count, setCount] = useState(0);
+  useSafeLayoutEffect(() => {
+    const elements = getNodes();
+    const cleanups = elements.map(
+      (element, index) => trackElementSize(element, (size2) => {
+        setSizes((sizes27) => {
+          return [
+            ...sizes27.slice(0, index),
+            size2,
+            ...sizes27.slice(index + 1)
+          ];
+        });
+      })
+    );
+    if (observeMutation) {
+      const firstNode = elements[0];
+      cleanups.push(
+        trackMutation(firstNode, () => {
+          setCount((count2) => count2 + 1);
+        })
+      );
+    }
+    return () => {
+      cleanups.forEach((cleanup) => {
+        cleanup == null ? void 0 : cleanup();
+      });
+    };
+  }, [count]);
+  return sizes26;
+}
+function isRef(ref) {
+  return typeof ref === "object" && ref !== null && "current" in ref;
+}
+function useSize(subject) {
+  const [size2] = useSizes({
+    observeMutation: false,
+    getNodes() {
+      const node = isRef(subject) ? subject.current : subject;
+      return [node];
+    }
+  });
+  return size2;
+}
+
+export { Accordion, AttachedInputs, Badge, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, ColorInlineLoader, ColorSpinner, Combobox, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerContent, Expandable, ExpandableAlert, ExpandableItem, FloatingActionButton, FormControl, FormErrorMessage, FormLabel3 as FormLabel, Heading, IconButton, InfoSelect, InfoTag, Input, InputLeftElement2 as InputLeftElement, InputRightElement2 as InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightSpinner, LineIcon, ListBox, ModalHeader, NativeSelect, NumericStepper, PasswordInput, PhoneNumberInput, PlayPauseButton, PopoverWizardBody, ProgressBar, ProgressLoader, Radio, RadioGroup, SearchInput, SimpleDrawer, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Table, Tabs, Text4 as Text, TextLink, Textarea, TimePicker, TravelTag, VyLogo, WizardPopover, createTexts, fontFaces, theme, useSize, useToast, useTranslation };

package/dist/index.d.mts

@@ -1,9 +1,9 @@
-import { DividerProps as DividerProps$1, As, BoxProps, StackProps as StackProps$1, AccordionProps as AccordionProps$1, AccordionItemProps, BreadcrumbProps as BreadcrumbProps$1, ButtonProps as ButtonProps$1, ButtonGroupProps as ButtonGroupProps$1, IconButtonProps as IconButtonProps$1, ComponentWithAs, ResponsiveValue, FlexProps, CheckboxProps as CheckboxProps$1, CheckboxGroupProps as CheckboxGroupProps$1, StackDirection, FormControlProps as FormControlProps$1, FormLabelProps as FormLabelProps$1, InputProps as InputProps$1, InputElementProps as InputElementProps$1, SelectProps, RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1, SwitchProps as SwitchProps$1, TextareaProps as TextareaProps$1, LinkProps as LinkProps$1, SkeletonTextProps as SkeletonTextProps$1, ModalHeaderProps as ModalHeaderProps$1, DrawerContentProps, DrawerProps as DrawerProps$1, PopoverProps, ChakraProviderProps, TabsProps as TabsProps$1, TableProps as TableProps$1, BadgeProps as BadgeProps$1, CodeProps as CodeProps$1, HeadingProps as HeadingProps$1, TextProps as TextProps$1 } from '@chakra-ui/react';
-export { AccordionButton, AccordionButtonProps, AccordionIcon, AccordionItem, AccordionItemProps, AccordionPanel, AccordionPanelProps, Box, BoxProps, Center, CenterProps, Collapse, CollapseProps, Container, ContainerProps, DarkMode, DrawerBody, DrawerCloseButton, DrawerFooter, DrawerOverlay, DrawerProps, Fade, FadeProps, Flex, FlexProps, FormHelperText, Grid, GridItem, GridItemProps, GridProps, HStack, Image, ImageProps, Img, ImgProps, InputGroup, InputGroupProps, LightMode, ListItem, ListItemProps, ListProps, Modal, ModalBody, ModalBodyProps, ModalCloseButton, ModalContent, ModalContentProps, ModalFooter, ModalFooterProps, ModalOverlay, ModalOverlayProps, ModalProps, OrderedList, Popover, PopoverAnchor, PopoverArrow, PopoverArrowProps, PopoverBody, PopoverBodyProps, PopoverCloseButton, PopoverCloseButtonProps, PopoverContent, PopoverContentProps, PopoverFooter, PopoverFooterProps, PopoverHeader, PopoverHeaderProps, PopoverProps, PopoverTrigger, Portal, PortalProps, ScaleFade, ScaleFadeProps, SimpleGrid, SimpleGridProps, Slide, SlideFade, SlideFadeProps, SlideProps, Spacer, SpacerProps, Tab, TabList, TabListProps, TabPanel, TabPanelProps, TabPanels, TabPanelsProps, TabProps, TableBodyProps, TableCaption, TableCaptionProps, TableCellProps, TableColumnHeaderProps, TableFooterProps, TableHeadProps, TableRowProps, Tbody, Td, Tfoot, Th, Thead, Tr, UnorderedList, UseClipboardOptions, UseDisclosureProps, UseOutsideClickProps, VStack, Wrap, WrapItem, WrapItemProps, WrapProps, extendTheme, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToken } from '@chakra-ui/react';
 import tokens__default from '@vygruppen/spor-design-tokens';
 import * as tokens from '@vygruppen/spor-design-tokens';
 export { tokens };
 import * as _chakra_ui_system_dist_system_types from '@chakra-ui/system/dist/system.types';
+import { DividerProps as DividerProps$1, As, BoxProps, StackProps as StackProps$1, AccordionProps as AccordionProps$1, AccordionItemProps, BreadcrumbProps as BreadcrumbProps$1, ButtonProps as ButtonProps$1, ButtonGroupProps as ButtonGroupProps$1, IconButtonProps as IconButtonProps$1, ComponentWithAs, ResponsiveValue, FlexProps, CheckboxProps as CheckboxProps$1, CheckboxGroupProps as CheckboxGroupProps$1, StackDirection, FormControlProps as FormControlProps$1, FormLabelProps as FormLabelProps$1, InputProps as InputProps$1, InputElementProps as InputElementProps$1, SelectProps, RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1, SwitchProps as SwitchProps$1, TextareaProps as TextareaProps$1, LinkProps as LinkProps$1, SkeletonTextProps as SkeletonTextProps$1, ModalHeaderProps as ModalHeaderProps$1, DrawerContentProps, DrawerProps as DrawerProps$1, PopoverProps, ChakraProviderProps, TabsProps as TabsProps$1, TableProps as TableProps$1, BadgeProps as BadgeProps$1, CodeProps as CodeProps$1, HeadingProps as HeadingProps$1, TextProps as TextProps$1 } from '@chakra-ui/react';
+export { AccordionButton, AccordionButtonProps, AccordionIcon, AccordionItem, AccordionItemProps, AccordionPanel, AccordionPanelProps, Box, BoxProps, CSSWithMultiValues, Center, CenterProps, Collapse, CollapseProps, ComponentStyleConfig, Container, ContainerProps, DarkMode, DrawerBody, DrawerCloseButton, DrawerFooter, DrawerOverlay, DrawerProps, Fade, FadeProps, Flex, FlexProps, FormHelperText, Grid, GridItem, GridItemProps, GridProps, HStack, Image, ImageProps, Img, ImgProps, InputGroup, InputGroupProps, LightMode, ListItem, ListItemProps, ListProps, Modal, ModalBody, ModalBodyProps, ModalCloseButton, ModalContent, ModalContentProps, ModalFooter, ModalFooterProps, ModalOverlay, ModalOverlayProps, ModalProps, OrderedList, Popover, PopoverAnchor, PopoverArrow, PopoverArrowProps, PopoverBody, PopoverBodyProps, PopoverCloseButton, PopoverCloseButtonProps, PopoverContent, PopoverContentProps, PopoverFooter, PopoverFooterProps, PopoverHeader, PopoverHeaderProps, PopoverProps, PopoverTrigger, Portal, PortalProps, ScaleFade, ScaleFadeProps, SimpleGrid, SimpleGridProps, Slide, SlideFade, SlideFadeProps, SlideProps, Spacer, SpacerProps, Tab, TabList, TabListProps, TabPanel, TabPanelProps, TabPanels, TabPanelsProps, TabProps, TableBodyProps, TableCaption, TableCaptionProps, TableCellProps, TableColumnHeaderProps, TableFooterProps, TableHeadProps, TableRowProps, Tbody, Td, Tfoot, Th, Thead, Tr, UnorderedList, UseClipboardOptions, UseDisclosureProps, UseOutsideClickProps, VStack, Wrap, WrapItem, WrapItemProps, WrapProps, defineStyleConfig, extendTheme, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToken } from '@chakra-ui/react';
 import * as React from 'react';
 import React__default, { ChangeEvent } from 'react';
 import * as _chakra_ui_breadcrumb_dist_breadcrumb_link from '@chakra-ui/breadcrumb/dist/breadcrumb-link';
@@ -15,6 +15,7 @@ import { TimeValue } from '@react-types/datepicker';
 import { ListState, SelectState } from 'react-stately';
 export { Item, Section } from 'react-stately';
 import * as _chakra_ui_styled_system from '@chakra-ui/styled-system';
+export { useSize } from '@chakra-ui/react-use-size';
 
 type DividerProps = DividerProps$1 & {
     size?: "sm" | "md" | "lg";
@@ -488,9 +489,10 @@ type TimePickerProps = Omit<BoxProps, "defaultValue" | "onChange"> & {
     name?: string;
     /** The controlled value, if any.
      *
-     * A `new Time(hours, minutes)` should be passed
+     * A `new Time(hours, minutes)` should be passed.
+     * Or `null` if the time should be unset.
      **/
-    value?: TimeValue;
+    value?: TimeValue | null;
     /** A default value, if any.
      *
      * A `new Time(hours, minutes)` should be passed.

package/dist/index.d.ts

@@ -1,9 +1,9 @@
-import { DividerProps as DividerProps$1, As, BoxProps, StackProps as StackProps$1, AccordionProps as AccordionProps$1, AccordionItemProps, BreadcrumbProps as BreadcrumbProps$1, ButtonProps as ButtonProps$1, ButtonGroupProps as ButtonGroupProps$1, IconButtonProps as IconButtonProps$1, ComponentWithAs, ResponsiveValue, FlexProps, CheckboxProps as CheckboxProps$1, CheckboxGroupProps as CheckboxGroupProps$1, StackDirection, FormControlProps as FormControlProps$1, FormLabelProps as FormLabelProps$1, InputProps as InputProps$1, InputElementProps as InputElementProps$1, SelectProps, RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1, SwitchProps as SwitchProps$1, TextareaProps as TextareaProps$1, LinkProps as LinkProps$1, SkeletonTextProps as SkeletonTextProps$1, ModalHeaderProps as ModalHeaderProps$1, DrawerContentProps, DrawerProps as DrawerProps$1, PopoverProps, ChakraProviderProps, TabsProps as TabsProps$1, TableProps as TableProps$1, BadgeProps as BadgeProps$1, CodeProps as CodeProps$1, HeadingProps as HeadingProps$1, TextProps as TextProps$1 } from '@chakra-ui/react';
-export { AccordionButton, AccordionButtonProps, AccordionIcon, AccordionItem, AccordionItemProps, AccordionPanel, AccordionPanelProps, Box, BoxProps, Center, CenterProps, Collapse, CollapseProps, Container, ContainerProps, DarkMode, DrawerBody, DrawerCloseButton, DrawerFooter, DrawerOverlay, DrawerProps, Fade, FadeProps, Flex, FlexProps, FormHelperText, Grid, GridItem, GridItemProps, GridProps, HStack, Image, ImageProps, Img, ImgProps, InputGroup, InputGroupProps, LightMode, ListItem, ListItemProps, ListProps, Modal, ModalBody, ModalBodyProps, ModalCloseButton, ModalContent, ModalContentProps, ModalFooter, ModalFooterProps, ModalOverlay, ModalOverlayProps, ModalProps, OrderedList, Popover, PopoverAnchor, PopoverArrow, PopoverArrowProps, PopoverBody, PopoverBodyProps, PopoverCloseButton, PopoverCloseButtonProps, PopoverContent, PopoverContentProps, PopoverFooter, PopoverFooterProps, PopoverHeader, PopoverHeaderProps, PopoverProps, PopoverTrigger, Portal, PortalProps, ScaleFade, ScaleFadeProps, SimpleGrid, SimpleGridProps, Slide, SlideFade, SlideFadeProps, SlideProps, Spacer, SpacerProps, Tab, TabList, TabListProps, TabPanel, TabPanelProps, TabPanels, TabPanelsProps, TabProps, TableBodyProps, TableCaption, TableCaptionProps, TableCellProps, TableColumnHeaderProps, TableFooterProps, TableHeadProps, TableRowProps, Tbody, Td, Tfoot, Th, Thead, Tr, UnorderedList, UseClipboardOptions, UseDisclosureProps, UseOutsideClickProps, VStack, Wrap, WrapItem, WrapItemProps, WrapProps, extendTheme, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToken } from '@chakra-ui/react';
 import tokens__default from '@vygruppen/spor-design-tokens';
 import * as tokens from '@vygruppen/spor-design-tokens';
 export { tokens };
 import * as _chakra_ui_system_dist_system_types from '@chakra-ui/system/dist/system.types';
+import { DividerProps as DividerProps$1, As, BoxProps, StackProps as StackProps$1, AccordionProps as AccordionProps$1, AccordionItemProps, BreadcrumbProps as BreadcrumbProps$1, ButtonProps as ButtonProps$1, ButtonGroupProps as ButtonGroupProps$1, IconButtonProps as IconButtonProps$1, ComponentWithAs, ResponsiveValue, FlexProps, CheckboxProps as CheckboxProps$1, CheckboxGroupProps as CheckboxGroupProps$1, StackDirection, FormControlProps as FormControlProps$1, FormLabelProps as FormLabelProps$1, InputProps as InputProps$1, InputElementProps as InputElementProps$1, SelectProps, RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1, SwitchProps as SwitchProps$1, TextareaProps as TextareaProps$1, LinkProps as LinkProps$1, SkeletonTextProps as SkeletonTextProps$1, ModalHeaderProps as ModalHeaderProps$1, DrawerContentProps, DrawerProps as DrawerProps$1, PopoverProps, ChakraProviderProps, TabsProps as TabsProps$1, TableProps as TableProps$1, BadgeProps as BadgeProps$1, CodeProps as CodeProps$1, HeadingProps as HeadingProps$1, TextProps as TextProps$1 } from '@chakra-ui/react';
+export { AccordionButton, AccordionButtonProps, AccordionIcon, AccordionItem, AccordionItemProps, AccordionPanel, AccordionPanelProps, Box, BoxProps, CSSWithMultiValues, Center, CenterProps, Collapse, CollapseProps, ComponentStyleConfig, Container, ContainerProps, DarkMode, DrawerBody, DrawerCloseButton, DrawerFooter, DrawerOverlay, DrawerProps, Fade, FadeProps, Flex, FlexProps, FormHelperText, Grid, GridItem, GridItemProps, GridProps, HStack, Image, ImageProps, Img, ImgProps, InputGroup, InputGroupProps, LightMode, ListItem, ListItemProps, ListProps, Modal, ModalBody, ModalBodyProps, ModalCloseButton, ModalContent, ModalContentProps, ModalFooter, ModalFooterProps, ModalOverlay, ModalOverlayProps, ModalProps, OrderedList, Popover, PopoverAnchor, PopoverArrow, PopoverArrowProps, PopoverBody, PopoverBodyProps, PopoverCloseButton, PopoverCloseButtonProps, PopoverContent, PopoverContentProps, PopoverFooter, PopoverFooterProps, PopoverHeader, PopoverHeaderProps, PopoverProps, PopoverTrigger, Portal, PortalProps, ScaleFade, ScaleFadeProps, SimpleGrid, SimpleGridProps, Slide, SlideFade, SlideFadeProps, SlideProps, Spacer, SpacerProps, Tab, TabList, TabListProps, TabPanel, TabPanelProps, TabPanels, TabPanelsProps, TabProps, TableBodyProps, TableCaption, TableCaptionProps, TableCellProps, TableColumnHeaderProps, TableFooterProps, TableHeadProps, TableRowProps, Tbody, Td, Tfoot, Th, Thead, Tr, UnorderedList, UseClipboardOptions, UseDisclosureProps, UseOutsideClickProps, VStack, Wrap, WrapItem, WrapItemProps, WrapProps, defineStyleConfig, extendTheme, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToken } from '@chakra-ui/react';
 import * as React from 'react';
 import React__default, { ChangeEvent } from 'react';
 import * as _chakra_ui_breadcrumb_dist_breadcrumb_link from '@chakra-ui/breadcrumb/dist/breadcrumb-link';
@@ -15,6 +15,7 @@ import { TimeValue } from '@react-types/datepicker';
 import { ListState, SelectState } from 'react-stately';
 export { Item, Section } from 'react-stately';
 import * as _chakra_ui_styled_system from '@chakra-ui/styled-system';
+export { useSize } from '@chakra-ui/react-use-size';
 
 type DividerProps = DividerProps$1 & {
     size?: "sm" | "md" | "lg";
@@ -488,9 +489,10 @@ type TimePickerProps = Omit<BoxProps, "defaultValue" | "onChange"> & {
     name?: string;
     /** The controlled value, if any.
      *
-     * A `new Time(hours, minutes)` should be passed
+     * A `new Time(hours, minutes)` should be passed.
+     * Or `null` if the time should be unset.
      **/
-    value?: TimeValue;
+    value?: TimeValue | null;
     /** A default value, if any.
      *
      * A `new Time(hours, minutes)` should be passed.

package/dist/index.js

@@ -664,7 +664,8 @@ var init_Button = __esm({
         isLoading,
         isDisabled,
         leftIcon,
-        rightIcon
+        rightIcon,
+        ...rest
       } = props;
       const ariaLabel = useCorrectAriaLabel(props);
       const buttonGroup = react.useButtonGroup();
@@ -675,7 +676,7 @@ var init_Button = __esm({
         {
           size: finalSize,
           variant: finalVariant,
-          ...props,
+          ...rest,
           ref,
           "aria-label": ariaLabel,
           "aria-busy": isLoading,
@@ -697,8 +698,9 @@ var init_Button = __esm({
             exports.ColorInlineLoader,
             {
               maxWidth: getLoaderWidth(finalSize),
-              width: "100%",
-              marginX: 2
+              width: "80%",
+              marginX: 2,
+              marginY: 2
             }
           )
         ),
@@ -739,7 +741,7 @@ var init_IconButton = __esm({
         {
           title: props["aria-label"],
           ...props,
-          spinner: /* @__PURE__ */ React69__namespace.default.createElement(exports.ColorSpinner, { margin: 1 }),
+          spinner: /* @__PURE__ */ React69__namespace.default.createElement(exports.ColorSpinner, { width: "80%", height: "80%", marginX: 1, marginTop: 1 }),
           ref
         }
       )
@@ -1663,7 +1665,7 @@ var init_DateField = __esm({
           "input",
           {
             type: "hidden",
-            value: (_a6 = state2.value) == null ? void 0 : _a6.toString(),
+            value: ((_a6 = state2.value) == null ? void 0 : _a6.toString()) ?? "",
             name: props.name
           }
         ));
@@ -15394,8 +15396,118 @@ var init_transition = __esm({
   "src/transition/index.ts"() {
   }
 });
+
+// ../../node_modules/@zag-js/element-size/dist/track-size.mjs
+function trackElementSize(element, callback) {
+  if (!element) {
+    callback(void 0);
+    return;
+  }
+  callback({ width: element.offsetWidth, height: element.offsetHeight });
+  const win = element.ownerDocument.defaultView ?? window;
+  const observer = new win.ResizeObserver((entries) => {
+    if (!Array.isArray(entries) || !entries.length)
+      return;
+    const [entry] = entries;
+    let width;
+    let height;
+    if ("borderBoxSize" in entry) {
+      const borderSizeEntry = entry["borderBoxSize"];
+      const borderSize = Array.isArray(borderSizeEntry) ? borderSizeEntry[0] : borderSizeEntry;
+      width = borderSize["inlineSize"];
+      height = borderSize["blockSize"];
+    } else {
+      width = element.offsetWidth;
+      height = element.offsetHeight;
+    }
+    callback({ width, height });
+  });
+  observer.observe(element, { box: "border-box" });
+  return () => observer.unobserve(element);
+}
+var init_track_size = __esm({
+  "../../node_modules/@zag-js/element-size/dist/track-size.mjs"() {
+  }
+});
+
+// ../../node_modules/@zag-js/element-size/dist/index.mjs
+var init_dist8 = __esm({
+  "../../node_modules/@zag-js/element-size/dist/index.mjs"() {
+    init_track_size();
+  }
+});
+function trackMutation(el, cb) {
+  var _a6, _b5;
+  if (!el || !el.parentElement)
+    return;
+  const win = (_b5 = (_a6 = el.ownerDocument) == null ? void 0 : _a6.defaultView) != null ? _b5 : window;
+  const observer = new win.MutationObserver(() => {
+    cb();
+  });
+  observer.observe(el.parentElement, { childList: true });
+  return () => {
+    observer.disconnect();
+  };
+}
+function useSizes({
+  getNodes,
+  observeMutation = true
+}) {
+  const [sizes26, setSizes] = React69.useState([]);
+  const [count, setCount] = React69.useState(0);
+  useSafeLayoutEffect(() => {
+    const elements = getNodes();
+    const cleanups = elements.map(
+      (element, index) => trackElementSize(element, (size2) => {
+        setSizes((sizes27) => {
+          return [
+            ...sizes27.slice(0, index),
+            size2,
+            ...sizes27.slice(index + 1)
+          ];
+        });
+      })
+    );
+    if (observeMutation) {
+      const firstNode = elements[0];
+      cleanups.push(
+        trackMutation(firstNode, () => {
+          setCount((count2) => count2 + 1);
+        })
+      );
+    }
+    return () => {
+      cleanups.forEach((cleanup) => {
+        cleanup == null ? void 0 : cleanup();
+      });
+    };
+  }, [count]);
+  return sizes26;
+}
+function isRef(ref) {
+  return typeof ref === "object" && ref !== null && "current" in ref;
+}
+function useSize(subject) {
+  const [size2] = useSizes({
+    observeMutation: false,
+    getNodes() {
+      const node = isRef(subject) ? subject.current : subject;
+      return [node];
+    }
+  });
+  return size2;
+}
+var useSafeLayoutEffect;
+var init_dist9 = __esm({
+  "../../node_modules/@chakra-ui/react-use-size/dist/index.mjs"() {
+    "use client";
+    init_dist8();
+    useSafeLayoutEffect = Boolean(globalThis == null ? void 0 : globalThis.document) ? React69.useLayoutEffect : React69.useEffect;
+  }
+});
 var init_externals = __esm({
   "src/util/externals.tsx"() {
+    init_dist9();
   }
 });
 
@@ -15462,10 +15574,6 @@ Object.defineProperty(exports, 'Center', {
   enumerable: true,
   get: function () { return react.Center; }
 });
-Object.defineProperty(exports, 'Collapse', {
-  enumerable: true,
-  get: function () { return react.Collapse; }
-});
 Object.defineProperty(exports, 'Container', {
   enumerable: true,
   get: function () { return react.Container; }
@@ -15682,6 +15790,10 @@ Object.defineProperty(exports, 'WrapItem', {
   enumerable: true,
   get: function () { return react.WrapItem; }
 });
+Object.defineProperty(exports, 'defineStyleConfig', {
+  enumerable: true,
+  get: function () { return react.defineStyleConfig; }
+});
 Object.defineProperty(exports, 'extendTheme', {
   enumerable: true,
   get: function () { return react.extendTheme; }
@@ -15761,4 +15873,5 @@ exports.LanguageProvider = LanguageProvider;
 exports.ListBox = ListBox;
 exports.NumericStepper = NumericStepper;
 exports.createTexts = createTexts;
+exports.useSize = useSize;
 exports.useTranslation = useTranslation;

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-UOZQ4EDI.mjs';
+export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, 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, defineStyleConfig, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-VXZX2ZXT.mjs';

package/package.json

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

package/src/button/Button.tsx

@@ -69,6 +69,7 @@ export const Button = forwardRef<ButtonProps, "button">((props, ref) => {
     isDisabled,
     leftIcon,
     rightIcon,
+    ...rest
   } = props;
   const ariaLabel = useCorrectAriaLabel(props);
   const buttonGroup = useButtonGroup();
@@ -83,7 +84,7 @@ export const Button = forwardRef<ButtonProps, "button">((props, ref) => {
     <ChakraButton
       size={finalSize}
       variant={finalVariant}
-      {...props}
+      {...rest}
       ref={ref}
       aria-label={ariaLabel}
       aria-busy={isLoading}
@@ -118,8 +119,9 @@ export const Button = forwardRef<ButtonProps, "button">((props, ref) => {
         >
           <ColorInlineLoader
             maxWidth={getLoaderWidth(finalSize)}
-            width="100%"
+            width="80%"
             marginX={2}
+            marginY={2}
           />
         </Center>
       )}

package/src/button/IconButton.tsx

@@ -56,7 +56,9 @@ export const IconButton = forwardRef<IconButtonProps, As>(
     <ChakraIconButton
       title={props["aria-label"]}
       {...props}
-      spinner={<ColorSpinner margin={1} />}
+      spinner={
+        <ColorSpinner width="80%" height="80%" marginX={1} marginTop={1} />
+      }
       ref={ref}
     />
   ),

package/src/datepicker/DateField.tsx

@@ -64,7 +64,7 @@ export const DateField = forwardRef<HTMLDivElement, DateFieldProps>(
         </Flex>
         <input
           type="hidden"
-          value={state.value?.toString()}
+          value={state.value?.toString() ?? ""}
           name={props.name}
         />
       </Box>

package/src/datepicker/TimeField.tsx

@@ -2,13 +2,13 @@ import { Box, Flex } from "@chakra-ui/react";
 import { CalendarDateTime, Time } from "@internationalized/date";
 import React, { useRef } from "react";
 import { AriaTimeFieldProps, useTimeField } from "react-aria";
-import { DateFieldState } from "react-stately";
+import { TimeFieldState } from "@react-stately/datepicker";
 import { FormLabel } from "..";
 import { DateTimeSegment } from "./DateTimeSegment";
 import { getTimestampFromTime } from "./utils";
 
 type TimeFieldProps = AriaTimeFieldProps<Time> & {
-  state: DateFieldState;
+  state: TimeFieldState;
   label: string;
   name?: string;
 };

package/src/datepicker/TimePicker.tsx

@@ -19,9 +19,10 @@ type TimePickerProps = Omit<BoxProps, "defaultValue" | "onChange"> & {
   name?: string;
   /** The controlled value, if any.
    *
-   * A `new Time(hours, minutes)` should be passed
+   * A `new Time(hours, minutes)` should be passed.
+   * Or `null` if the time should be unset.
    **/
-  value?: TimeValue;
+  value?: TimeValue | null;
   /** A default value, if any.
    *
    * A `new Time(hours, minutes)` should be passed.

package/src/index.tsx

@@ -1,4 +1,3 @@
-export { extendTheme } from "@chakra-ui/react";
 export * as tokens from "@vygruppen/spor-design-tokens";
 export * from "./accordion";
 export * from "./alert";

package/src/util/externals.tsx

@@ -1,8 +1,11 @@
 /** This file works as a proxy for all Chakra UI exports */
 export {
+  Collapse,
   DarkMode,
   LightMode,
   Portal,
+  defineStyleConfig,
+  extendTheme,
   useBreakpointValue,
   useClipboard,
   useColorMode,
@@ -18,8 +21,11 @@ export {
   useToken,
 } from "@chakra-ui/react";
 export type {
+  CSSWithMultiValues,
+  ComponentStyleConfig,
   PortalProps,
   UseClipboardOptions,
   UseDisclosureProps,
   UseOutsideClickProps,
 } from "@chakra-ui/react";
+export { useSize } from "@chakra-ui/react-use-size";