@vygruppen/spor-react 4.1.1 → 5.1.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@4.1.1 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
-CJS dist/index.js 490.53 KB
-CJS ⚡️ Build success in 2250ms
-ESM dist/index.mjs                      2.10 KB
-ESM dist/CountryCodeSelect-7MAIS4VT.mjs 1.19 KB
-ESM dist/chunk-U2IWIWOD.mjs             382.91 KB
-ESM ⚡️ Build success in 2252ms
-DTS ⚡️ Build success in 12839ms
-DTS dist/index.d.ts  262.48 KB
-DTS dist/index.d.mts 262.48 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,39 @@
 # @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
+
+- 24963270: Breaking: Rename <Button variant="additional" /> to <Button variant="tertiary" />
+
+  Due to a… minor screwup on ~our~ @selbekk's side, we deprecated the wrong name earlier on.
+
+  To mitigate my screwup, please search through your code base for "additional", and replace it with "tertiary". It should be a simple enough upgrade. Make sure to do this with all Button and IconButton components.
+
+  Sorry. - @selbekk.
+
+### Patch Changes
+
+- 799d47bb: Button: bugfix changed primary button color to pine
+
 ## 4.1.1
 
 ### Patch Changes

package/dist/{CountryCodeSelect-7MAIS4VT.mjs → CountryCodeSelect-M5TBGWY5.mjs}

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

package/dist/{chunk-U2IWIWOD.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-7MAIS4VT.mjs'));
+var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-M5TBGWY5.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React69__default.createElement(Radio$1, { ...props, ref });
 });
@@ -4098,7 +4100,7 @@ var NextStepButton = ({ isLastStep, onNext }) => {
   return /* @__PURE__ */ React69.createElement(
     Button,
     {
-      variant: "additional",
+      variant: "tertiary",
       size: "sm",
       color: "white",
       leftIcon: isLastStep ? void 0 : /* @__PURE__ */ React69.createElement(ArrowRightFill18Icon, null),
@@ -4269,7 +4271,7 @@ var StepperStep = ({
     Button,
     {
       size: "xs",
-      variant: state2 === "active" ? "primary" : state2 === "completed" ? "additional" : "ghost",
+      variant: state2 === "active" ? "primary" : state2 === "completed" ? "tertiary" : "ghost",
       ...adjustedProps,
       onClick: () => onClick(stepNumber)
     },
@@ -9799,7 +9801,7 @@ var config6 = defineStyleConfig$1({
     primary: (props) => ({
       // FIXME: Update to use a global defined background color for darkMode whenever it is available.
       // hardcoded background color as alpha-"hack" below is not feasible for dark mode with solid background color
-      backgroundColor: mode("primaryGreen", "coralGreen")(props),
+      backgroundColor: mode("pine", "coralGreen")(props),
       color: mode("white", "darkTeal")(props),
       ...focusVisible({
         focus: {
@@ -13459,7 +13461,7 @@ var ActionToast = ({
   buttonText,
   id
 }) => {
-  return /* @__PURE__ */ React69__default.createElement(BaseToast, { variant, id }, /* @__PURE__ */ React69__default.createElement(Box, { marginRight: 2, flexGrow: "1" }, children), /* @__PURE__ */ React69__default.createElement(Button, { variant: "additional", size: "sm", onClick }, buttonText));
+  return /* @__PURE__ */ React69__default.createElement(BaseToast, { variant, id }, /* @__PURE__ */ React69__default.createElement(Box, { marginRight: 2, flexGrow: "1" }, children), /* @__PURE__ */ React69__default.createElement(Button, { variant: "tertiary", size: "sm", onClick }, buttonText));
 };
 var ClosableToast = ({
   children,
@@ -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";
@@ -266,7 +267,7 @@ type ButtonProps = Exclude<ButtonProps$1, "colorScheme" | "loadingText" | "size"
      *
      * Defaults to "primary"
      */
-    variant?: "control" | "primary" | "secondary" | "additional" | "ghost" | "floating";
+    variant?: "control" | "primary" | "secondary" | "tertiary" | "ghost" | "floating";
 };
 /**
  * Buttons are used to trigger actions.
@@ -276,7 +277,7 @@ type ButtonProps = Exclude<ButtonProps$1, "colorScheme" | "loadingText" | "size"
  * - `control`: This button is used for ticket controls only.
  * - `primary`: This is our main button. It's used for the main actions in a view, like a call to action. There should only be a single primary button in each view.
  * - `secondary`: Used for secondary actions in a view, and when you need to make several actions available at the same time.
- * - `additional`: Used for additional choices, like a less important secondary action.
+ * - `tertiary`: Used for additional choices, like a less important secondary action.
  * - `ghost`: Used inside other interactive elements, like date pickers and input fields.
  * - `floating`: Used for floating actions, like a menu button in a menu.
  *
@@ -334,7 +335,7 @@ type ButtonGroupProps = ButtonGroupProps$1;
 declare const ButtonGroup: _chakra_ui_system_dist_system_types.ComponentWithAs<"div", ButtonGroupProps$1>;
 
 type IconButtonProps = Omit<IconButtonProps$1, "variant"> & {
-    variant: "control" | "primary" | "secondary" | "additional" | "ghost" | "floating";
+    variant: "control" | "primary" | "secondary" | "tertiary" | "ghost" | "floating";
 };
 /**
  * An icon-only button.
@@ -346,7 +347,7 @@ type IconButtonProps = Omit<IconButtonProps$1, "variant"> & {
  * - `control`: This button is used for ticket controls only.
  * - `primary`: This is our main button. It's used for the main actions in a view, like a call to action. There should only be a single primary button in each view.
  * - `secondary`: Used for secondary actions in a view, and when you need to make several actions available at the same time.
- * - `additional`: Used for additional choices, like a less important secondary action.
+ * - `tertiary`: Used for additional choices, like a less important secondary action.
  * - `ghost`: Used inside other interactive elements, like date pickers and input fields.
  * - `floating`: Used for floating actions, like a menu button in a menu.
  *
@@ -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.
@@ -2363,7 +2365,7 @@ declare const theme: {
             } | undefined;
             defaultProps?: {
                 size?: "sm" | "md" | "lg" | "xs" | undefined;
-                variant?: "primary" | "secondary" | "ghost" | "floating" | "tertiary" | undefined;
+                variant?: "primary" | "secondary" | "tertiary" | "ghost" | "floating" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
         };

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";
@@ -266,7 +267,7 @@ type ButtonProps = Exclude<ButtonProps$1, "colorScheme" | "loadingText" | "size"
      *
      * Defaults to "primary"
      */
-    variant?: "control" | "primary" | "secondary" | "additional" | "ghost" | "floating";
+    variant?: "control" | "primary" | "secondary" | "tertiary" | "ghost" | "floating";
 };
 /**
  * Buttons are used to trigger actions.
@@ -276,7 +277,7 @@ type ButtonProps = Exclude<ButtonProps$1, "colorScheme" | "loadingText" | "size"
  * - `control`: This button is used for ticket controls only.
  * - `primary`: This is our main button. It's used for the main actions in a view, like a call to action. There should only be a single primary button in each view.
  * - `secondary`: Used for secondary actions in a view, and when you need to make several actions available at the same time.
- * - `additional`: Used for additional choices, like a less important secondary action.
+ * - `tertiary`: Used for additional choices, like a less important secondary action.
  * - `ghost`: Used inside other interactive elements, like date pickers and input fields.
  * - `floating`: Used for floating actions, like a menu button in a menu.
  *
@@ -334,7 +335,7 @@ type ButtonGroupProps = ButtonGroupProps$1;
 declare const ButtonGroup: _chakra_ui_system_dist_system_types.ComponentWithAs<"div", ButtonGroupProps$1>;
 
 type IconButtonProps = Omit<IconButtonProps$1, "variant"> & {
-    variant: "control" | "primary" | "secondary" | "additional" | "ghost" | "floating";
+    variant: "control" | "primary" | "secondary" | "tertiary" | "ghost" | "floating";
 };
 /**
  * An icon-only button.
@@ -346,7 +347,7 @@ type IconButtonProps = Omit<IconButtonProps$1, "variant"> & {
  * - `control`: This button is used for ticket controls only.
  * - `primary`: This is our main button. It's used for the main actions in a view, like a call to action. There should only be a single primary button in each view.
  * - `secondary`: Used for secondary actions in a view, and when you need to make several actions available at the same time.
- * - `additional`: Used for additional choices, like a less important secondary action.
+ * - `tertiary`: Used for additional choices, like a less important secondary action.
  * - `ghost`: Used inside other interactive elements, like date pickers and input fields.
  * - `floating`: Used for floating actions, like a menu button in a menu.
  *
@@ -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.
@@ -2363,7 +2365,7 @@ declare const theme: {
             } | undefined;
             defaultProps?: {
                 size?: "sm" | "md" | "lg" | "xs" | undefined;
-                variant?: "primary" | "secondary" | "ghost" | "floating" | "tertiary" | undefined;
+                variant?: "primary" | "secondary" | "tertiary" | "ghost" | "floating" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
         };

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
           }
         ));
@@ -4912,7 +4914,7 @@ var init_PopoverWizardBody = __esm({
       return /* @__PURE__ */ React69__namespace.createElement(
         exports.Button,
         {
-          variant: "additional",
+          variant: "tertiary",
           size: "sm",
           color: "white",
           leftIcon: isLastStep ? void 0 : /* @__PURE__ */ React69__namespace.createElement(sporIconReact.ArrowRightFill18Icon, null),
@@ -5133,7 +5135,7 @@ var init_StepperStep = __esm({
         exports.Button,
         {
           size: "xs",
-          variant: state2 === "active" ? "primary" : state2 === "completed" ? "additional" : "ghost",
+          variant: state2 === "active" ? "primary" : state2 === "completed" ? "tertiary" : "ghost",
           ...adjustedProps,
           onClick: () => onClick(stepNumber)
         },
@@ -11286,7 +11288,7 @@ var init_button2 = __esm({
         primary: (props) => ({
           // FIXME: Update to use a global defined background color for darkMode whenever it is available.
           // hardcoded background color as alpha-"hack" below is not feasible for dark mode with solid background color
-          backgroundColor: themeTools.mode("primaryGreen", "coralGreen")(props),
+          backgroundColor: themeTools.mode("pine", "coralGreen")(props),
           color: themeTools.mode("white", "darkTeal")(props),
           ...focusVisible({
             focus: {
@@ -15295,7 +15297,7 @@ var init_ActionToast = __esm({
       buttonText,
       id
     }) => {
-      return /* @__PURE__ */ React69__namespace.default.createElement(BaseToast, { variant, id }, /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { marginRight: 2, flexGrow: "1" }, children), /* @__PURE__ */ React69__namespace.default.createElement(exports.Button, { variant: "additional", size: "sm", onClick }, buttonText));
+      return /* @__PURE__ */ React69__namespace.default.createElement(BaseToast, { variant, id }, /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { marginRight: 2, flexGrow: "1" }, children), /* @__PURE__ */ React69__namespace.default.createElement(exports.Button, { variant: "tertiary", size: "sm", onClick }, buttonText));
     };
   }
 });
@@ -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-U2IWIWOD.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": "4.1.1",
+  "version": "5.1.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/src/button/Button.tsx

@@ -28,7 +28,7 @@ export type ButtonProps = Exclude<
     | "control"
     | "primary"
     | "secondary"
-    | "additional"
+    | "tertiary"
     | "ghost"
     | "floating";
 };
@@ -40,7 +40,7 @@ export type ButtonProps = Exclude<
  * - `control`: This button is used for ticket controls only.
  * - `primary`: This is our main button. It's used for the main actions in a view, like a call to action. There should only be a single primary button in each view.
  * - `secondary`: Used for secondary actions in a view, and when you need to make several actions available at the same time.
- * - `additional`: Used for additional choices, like a less important secondary action.
+ * - `tertiary`: Used for additional choices, like a less important secondary action.
  * - `ghost`: Used inside other interactive elements, like date pickers and input fields.
  * - `floating`: Used for floating actions, like a menu button in a menu.
  *
@@ -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

@@ -12,7 +12,7 @@ export type IconButtonProps = Omit<ChakraIconButtonProps, "variant"> & {
     | "control"
     | "primary"
     | "secondary"
-    | "additional"
+    | "tertiary"
     | "ghost"
     | "floating";
 };
@@ -26,7 +26,7 @@ export type IconButtonProps = Omit<ChakraIconButtonProps, "variant"> & {
  * - `control`: This button is used for ticket controls only.
  * - `primary`: This is our main button. It's used for the main actions in a view, like a call to action. There should only be a single primary button in each view.
  * - `secondary`: Used for secondary actions in a view, and when you need to make several actions available at the same time.
- * - `additional`: Used for additional choices, like a less important secondary action.
+ * - `tertiary`: Used for additional choices, like a less important secondary action.
  * - `ghost`: Used inside other interactive elements, like date pickers and input fields.
  * - `floating`: Used for floating actions, like a menu button in a menu.
  *
@@ -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/popover/PopoverWizardBody.tsx

@@ -64,7 +64,7 @@ const NextStepButton = ({ isLastStep, onNext }: NextStepButtonProps) => {
   const { t } = useTranslation();
   return (
     <Button
-      variant="additional"
+      variant="tertiary"
       size="sm"
       color="white"
       leftIcon={isLastStep ? undefined : <ArrowRightFill18Icon />}

package/src/stepper/StepperStep.tsx

@@ -35,7 +35,7 @@ export const StepperStep = ({
           state === "active"
             ? "primary"
             : state === "completed"
-            ? "additional"
+            ? "tertiary"
             : "ghost"
         }
         {...adjustedProps}

package/src/theme/components/button.ts

@@ -34,7 +34,7 @@ const config = defineStyleConfig({
     primary: (props) => ({
       // FIXME: Update to use a global defined background color for darkMode whenever it is available.
       // hardcoded background color as alpha-"hack" below is not feasible for dark mode with solid background color
-      backgroundColor: mode("primaryGreen", "coralGreen")(props),
+      backgroundColor: mode("pine", "coralGreen")(props),
       color: mode("white", "darkTeal")(props),
       ...focusVisible({
         focus: {

package/src/toast/ActionToast.tsx

@@ -20,7 +20,7 @@ export const ActionToast = ({
       <Box marginRight={2} flexGrow="1">
         {children}
       </Box>
-      <Button variant="additional" size="sm" onClick={onClick}>
+      <Button variant="tertiary" size="sm" onClick={onClick}>
         {buttonText}
       </Button>
     </BaseToast>

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