@vygruppen/spor-react 3.8.1 → 4.0.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@3.8.1 build
+> @vygruppen/spor-react@4.0.0 build
 > tsup src/index.tsx --dts --treeshake --format cjs,esm
 
 CLI Building entry: src/index.tsx
@@ -8,15 +8,15 @@
 CLI Target: node16
 CJS Build start
 ESM Build start
-"toZoned" and "toTime" are imported from external module "@internationalized/date" but never used in "dist/index.js".
-"toZoned" and "toTime" are imported from external module "@internationalized/date" but never used in "dist/chunk-HCSXVAA5.mjs".
 DTS Build start
-CJS dist/index.js 548.76 KB
-CJS ⚡️ Build success in 2577ms
-ESM dist/index.mjs                      2.09 KB
-ESM dist/CountryCodeSelect-UG3JHWO3.mjs 1.19 KB
-ESM dist/chunk-HCSXVAA5.mjs             438.31 KB
-ESM ⚡️ Build success in 2578ms
-DTS ⚡️ Build success in 12922ms
-DTS dist/index.d.ts  264.69 KB
-DTS dist/index.d.mts 264.69 KB
+"toZoned" and "toTime" are imported from external module "@internationalized/date" but never used in "dist/index.js".
+"toZoned" and "toTime" are imported from external module "@internationalized/date" but never used in "dist/chunk-B77QE6EZ.mjs".
+CJS dist/index.js 547.83 KB
+CJS ⚡️ Build success in 4018ms
+ESM dist/index.mjs                      2.10 KB
+ESM dist/CountryCodeSelect-7WPJ6BDU.mjs 1.19 KB
+ESM dist/chunk-B77QE6EZ.mjs             437.32 KB
+ESM ⚡️ Build success in 4019ms
+DTS ⚡️ Build success in 17985ms
+DTS dist/index.d.ts  262.81 KB
+DTS dist/index.d.mts 262.81 KB

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @vygruppen/spor-react
 
+## 4.0.0
+
+### Major Changes
+
+- 8d9d381c: This major version removes a bunch of deprecated properties, and revamps our Datepicker component.
+
+  To migrate, please follow the following instructions:
+
+  DatePicker, DateRangePicker: `variant="simple"` and `variant="with-trigger"` has been removed (without a deprecation warning – sorry! 🙈). In their place, you'll find "base", "floating" and "ghost".
+
+  Button: The deprecated `variant="tertiary" is removed. To migrate, use `variant="secondary"` instead.
+
+  TextLink: The deprecated `variant="tertiary" is removed. To migrate, use `variant="secondary"` instead.
+
+  FloatingActionButton: The deprecated variants "green", "light" and "dark" are deprecated. To migrate, use "accent" for all three versions.
+
+  Tabs: The deprecated color schemes "dark", "light", "green" and "grey" are all removed. For "dark" and "green", please use "accent". For "light" and "grey", please use "default"
+
+### Minor Changes
+
+- 8d9d381c: Add new Portal component
+
+### Patch Changes
+
+- 7b828801: Drawer: added dark mode support
+- 342931bc: Popover: Add dark mode support
+
 ## 3.8.1
 
 ### Patch Changes

package/dist/{CountryCodeSelect-UG3JHWO3.mjs → CountryCodeSelect-7WPJ6BDU.mjs}

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

package/dist/{chunk-HCSXVAA5.mjs → chunk-B77QE6EZ.mjs}

@@ -1,5 +1,5 @@
 import { forwardRef, Divider as Divider$1, Stack as Stack$1, Accordion as Accordion$1, Skeleton as Skeleton$1, useButtonGroup, Button as Button$1, Box, Center, ButtonGroup as ButtonGroup$1, IconButton as IconButton$1, useMultiStyleConfig, useStyleConfig, Badge as Badge$1, Code as Code$1, Text, PopoverAnchor, FormLabel, Flex, useFormControlContext, PopoverContent, PopoverArrow, PopoverBody, FocusLock, Popover, InputGroup, PopoverTrigger, Portal, chakra, Checkbox as Checkbox$1, useCheckbox, FormControl as FormControl$1, InputLeftElement, Input as Input$1, InputRightElement, Select, useDisclosure, useControllableState, Radio as Radio$1, RadioGroup as RadioGroup$1, Switch as Switch$1, Textarea as Textarea$1, Link, ModalHeader as ModalHeader$1, useModalContext, DrawerContent as DrawerContent$1, Tabs as Tabs$1, Table as Table$1, defineStyleConfig as defineStyleConfig$1, createMultiStyleConfigHelpers as createMultiStyleConfigHelpers$1, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, SkeletonCircle as SkeletonCircle$1, SkeletonText as SkeletonText$1, Breadcrumb as Breadcrumb$1, BreadcrumbItem as BreadcrumbItem$1, BreadcrumbLink as BreadcrumbLink$1, Heading as Heading$1, CheckboxGroup as CheckboxGroup$1, List, ListItem, useColorModeValue, useFormControlProps, useFormControl, Drawer as Drawer$1, DrawerOverlay, DrawerCloseButton, DrawerBody, usePopoverContext, DarkMode, PopoverCloseButton, ChakraProvider, HStack, useToast as useToast$1, useInterval } from '@chakra-ui/react';
-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, 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';
+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 };
@@ -3785,37 +3785,53 @@ var DatePicker = forwardRef$1(
         showYearNavigation
       }
     ))));
-    return /* @__PURE__ */ React69__default.createElement(I18nProvider, { locale }, /* @__PURE__ */ React69__default.createElement(Box, { position: "relative", display: "inline-flex", flexDirection: "column", width }, /* @__PURE__ */ React69__default.createElement(
-      Popover,
+    return /* @__PURE__ */ React69__default.createElement(I18nProvider, { locale }, /* @__PURE__ */ React69__default.createElement(
+      Box,
       {
-        ...dialogProps,
-        isOpen: state2.isOpen,
-        onOpen: state2.open,
-        onClose: state2.close
+        position: "relative",
+        display: "inline-flex",
+        flexDirection: "column",
+        width
       },
-      /* @__PURE__ */ React69__default.createElement(InputGroup, { ...groupProps, display: "inline-flex" }, /* @__PURE__ */ React69__default.createElement(PopoverAnchor, null, /* @__PURE__ */ React69__default.createElement(
-        StyledField,
+      /* @__PURE__ */ React69__default.createElement(
+        Popover,
         {
-          variant,
-          onClick: onFieldClick,
-          paddingX: 3,
-          minHeight
+          ...dialogProps,
+          isOpen: state2.isOpen,
+          onOpen: state2.open,
+          onClose: state2.close
         },
-        /* @__PURE__ */ React69__default.createElement(PopoverTrigger, null, /* @__PURE__ */ React69__default.createElement(CalendarTriggerButton, { variant, ref, ...buttonProps })),
-        /* @__PURE__ */ React69__default.createElement(
-          DateField,
+        /* @__PURE__ */ React69__default.createElement(InputGroup, { ...groupProps, display: "inline-flex" }, /* @__PURE__ */ React69__default.createElement(PopoverAnchor, null, /* @__PURE__ */ React69__default.createElement(
+          StyledField,
           {
-            label: props.label,
-            labelProps,
-            name: props.name,
-            ...fieldProps
-          }
-        )
-      ))),
-      /* @__PURE__ */ React69__default.createElement(FormErrorMessage, { ...errorMessageProps }, errorMessage),
-      state2.isOpen && !props.isDisabled && withPortal && /* @__PURE__ */ React69__default.createElement(Portal, null, popoverContent),
-      state2.isOpen && !props.isDisabled && !withPortal && popoverContent
-    )));
+            variant,
+            onClick: onFieldClick,
+            paddingX: 3,
+            minHeight
+          },
+          /* @__PURE__ */ React69__default.createElement(PopoverTrigger, null, /* @__PURE__ */ React69__default.createElement(
+            CalendarTriggerButton,
+            {
+              variant,
+              ref,
+              ...buttonProps
+            }
+          )),
+          /* @__PURE__ */ React69__default.createElement(
+            DateField,
+            {
+              label: props.label,
+              labelProps,
+              name: props.name,
+              ...fieldProps
+            }
+          )
+        ))),
+        /* @__PURE__ */ React69__default.createElement(FormErrorMessage, { ...errorMessageProps }, errorMessage),
+        state2.isOpen && !props.isDisabled && withPortal && /* @__PURE__ */ React69__default.createElement(Portal, null, popoverContent),
+        state2.isOpen && !props.isDisabled && !withPortal && popoverContent
+      )
+    ));
   }
 );
 function RangeCalendar(props) {
@@ -5085,7 +5101,7 @@ var texts14 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-UG3JHWO3.mjs'));
+var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-7WPJ6BDU.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React69__default.createElement(Radio$1, { ...props, ref });
 });
@@ -5696,7 +5712,7 @@ var Notch = forwardRef((props, ref) => {
     /* @__PURE__ */ React69__default.createElement(
       Center,
       {
-        background: `linear-gradient(to ${placement === "bottom" ? "bottom" : "top"}, white 0%, white 60%, transparent)`,
+        background: placement === "bottom" ? "bottom" : "top",
         padding: 2,
         borderRadius: "md"
       },
@@ -11522,26 +11538,6 @@ var config6 = defineStyleConfig$1({
         }
       }
     }),
-    /**
-     * @deprecated use `secondary` instead.
-     */
-    tertiary: {
-      backgroundColor: "mint",
-      color: "darkGrey",
-      fontWeight: "normal",
-      ...focusVisible({
-        focus: {
-          boxShadow: `inset 0 0 0 4px ${colors.mint}, inset 0 0 0 4px ${colors.mint}, inset 0 0 0 6px currentColor`
-        },
-        notFocus: { boxShadow: "none" }
-      }),
-      _hover: {
-        backgroundColor: "seaMist"
-      },
-      _active: {
-        backgroundColor: "lightGrey"
-      }
-    },
     additional: (props) => ({
       backgroundColor: "transparent",
       color: mode("darkGrey", "white")(props),
@@ -12170,7 +12166,7 @@ var config11 = defineStyleConfig$1({
       }
     }),
     _hover: {
-      backgroundColor: mode("seaMist", "pine")(props),
+      backgroundColor: mode("seaMist", "whiteAlpha.100")(props),
       _disabled: {
         color: "dimGrey"
       }
@@ -12519,7 +12515,8 @@ var config14 = helpers7.defineMultiStyleConfig({
   baseStyle: (props) => ({
     overlay: {
       backgroundColor: "blackAlpha.600",
-      zIndex: "modal"
+      zIndex: "modal",
+      color: "red"
     },
     dialogContainer: {
       display: "flex",
@@ -12529,8 +12526,8 @@ var config14 = helpers7.defineMultiStyleConfig({
       overflow: props.scrollBehavior === "inside" ? "hidden" : "auto"
     },
     dialog: {
-      background: "white",
-      color: "inherit",
+      backgroundColor: mode("white", "pine")(props),
+      color: mode("inherit", "white")(props),
       zIndex: "modal",
       maxHeight: props.scrollBehavior === "inside" ? "calc(100% - 7.5rem)" : void 0,
       boxShadow: "md"
@@ -13510,47 +13507,6 @@ var config23 = defineStyleConfig$1({
         backgroundColor: mode("mint", "whiteAlpha.100")(props),
         color: mode("darkGrey", "white")(props)
       }
-    }),
-    /**
-     * @deprecated tertiary style will be deprecated in the future.
-     * Please use the secondary style instead.
-     */
-    tertiary: (props) => ({
-      color: "white",
-      ...focusVisible({
-        focus: {
-          color: "pine",
-          backgroundColor: "white",
-          boxShadow: getBoxShadowString({
-            borderColor: "white",
-            borderWidth: 3,
-            isInset: false
-          })
-        },
-        notFocus: {
-          color: "white",
-          boxShadow: "none",
-          backgroundColor: "transparent"
-        }
-      }),
-      _hover: {
-        color: "white",
-        backgroundColor: "whiteAlpha.200",
-        boxShadow: getBoxShadowString({
-          borderColor: props.theme.colors.whiteAlpha[200],
-          borderWidth: 3,
-          isInset: false
-        })
-      },
-      _active: {
-        color: "white",
-        backgroundColor: "whiteAlpha.400",
-        boxShadow: getBoxShadowString({
-          borderColor: props.theme.colors.whiteAlpha[400],
-          borderWidth: 3,
-          isInset: false
-        })
-      }
     })
   },
   defaultProps: {
@@ -13768,7 +13724,7 @@ var config26 = helpers17.defineMultiStyleConfig({
     },
     dialog: {
       borderRadius: "md",
-      background: mode("white", "night")(props),
+      background: mode("white", "pine")(props),
       color: mode("inherit", "white")(props),
       my: "3.75rem",
       zIndex: "modal",
@@ -13839,12 +13795,12 @@ var $arrowBg3 = cssVar$1("popper-arrow-bg");
 var $arrowShadowColor2 = cssVar$1("popper-arrow-shadow-color");
 var helpers18 = createMultiStyleConfigHelpers$1(popoverAnatomy.keys);
 var config27 = helpers18.defineMultiStyleConfig({
-  baseStyle: {
+  baseStyle: (props) => ({
     popper: {
       zIndex: "popover"
     },
     content: {
-      [$popperBg2.variable]: `colors.darkTeal`,
+      [$popperBg2.variable]: mode(`colors.darkTeal`, `colors.pine`)(props),
       backgroundColor: $popperBg2.reference,
       [$arrowBg3.variable]: $popperBg2.reference,
       [$arrowShadowColor2.variable]: `colors.blackAlpha.300`,
@@ -13865,6 +13821,19 @@ var config27 = helpers18.defineMultiStyleConfig({
     },
     closeButton: {
       position: "absolute",
+      color: "white",
+      hover: "whiteAlpha.100",
+      ...focusVisible({
+        focus: {
+          boxShadow: getBoxShadowString({ borderColor: "azure" })
+        },
+        notFocus: {
+          boxShadow: "none"
+        }
+      }),
+      _active: {
+        backgroundColor: "whiteAlpha.200"
+      },
       borderRadius: "xs",
       top: 1,
       insetEnd: 1,
@@ -13872,7 +13841,7 @@ var config27 = helpers18.defineMultiStyleConfig({
       height: 2,
       padding: 1
     }
-  },
+  }),
   sizes: {
     sm: {
       content: {

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 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, 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';
+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 };
@@ -266,9 +266,7 @@ type ButtonProps = Exclude<ButtonProps$1, "colorScheme" | "loadingText" | "size"
      *
      * Defaults to "primary"
      */
-    variant?: "control" | "primary" | "secondary"
-    /** @deprecated Use `secondary` instead */
-     | "tertiary" | "additional" | "ghost" | "floating";
+    variant?: "control" | "primary" | "secondary" | "additional" | "ghost" | "floating";
 };
 /**
  * Buttons are used to trigger actions.
@@ -278,8 +276,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.
- * - `tertiary`: Used for non-essential actions, as well as in combination with the primary button.
- * - `additional`: Used for additional choices, like a less important tertiary action.
+ * - `additional`: 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.
  *
@@ -292,7 +289,7 @@ type ButtonProps = Exclude<ButtonProps$1, "colorScheme" | "loadingText" | "size"
  * There are also different sizes. You can specify which one you want with the `size` prop. The available sizes are "lg", "md", "sm" and "xs".
  *
  * ```tsx
- * <Button variant="tertiary" size="sm" onClick={cancelOrder}>
+ * <Button variant="secondary" size="sm" onClick={cancelOrder}>
  *   Cancel trip
  * </Button>
  * ```
@@ -309,7 +306,7 @@ type ButtonGroupProps = ButtonGroupProps$1;
  *
  * ```tsx
  * <ButtonGroup>
- *   <Button variant="tertiary">Cancel</Button>
+ *   <Button variant="secondary">Cancel</Button>
  *   <Button variant="primary">Save</Button>
  * </ButtonGroup>
  * ```
@@ -337,7 +334,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" | "tertiary" | "additional" | "ghost" | "floating";
+    variant: "control" | "primary" | "secondary" | "additional" | "ghost" | "floating";
 };
 /**
  * An icon-only button.
@@ -349,8 +346,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.
- * - `tertiary`: Used for non-essential actions, as well as in combination with the primary button.
- * - `additional`: Used for additional choices, like a less important tertiary action.
+ * - `additional`: 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.
  *
@@ -393,13 +389,7 @@ type CloseButtonProps = Omit<IconButtonProps, "variant" | "aria-label"> & {
 declare const CloseButton: _chakra_ui_system_dist_system_types.ComponentWithAs<"button", CloseButtonProps>;
 
 type FloatingActionButtonProps = BoxProps & {
-    variant?: 
-    /** @deprecated dark is deprecated please use accent*/
-    "green"
-    /** @deprecated dark is deprecated please use accent*/
-     | "light"
-    /** @deprecated dark is deprecated please use accent*/
-     | "dark" | "accent" | "base" | "brand";
+    variant?: "accent" | "base" | "brand";
     placement?: "bottom right" | "bottom left" | "top right" | "top left";
     icon: React__default.ReactNode;
     children: React__default.ReactNode;
@@ -412,7 +402,7 @@ type FloatingActionButtonProps = BoxProps & {
  *
  * ```tsx
  * <FloatingActionButton
- *  variant="green"
+ *  variant="accent"
  *  icon={<TicketControlFill30Icon />}
  *  placement="bottom right"
  * />
@@ -459,10 +449,10 @@ declare const Card: _chakra_ui_system_dist_system_types.ComponentWithAs<As, Card
 /**
  * A date picker component.
  *
- * There are two versions of this component – a simple one, and one with a trigger button for showing the calendar. Use whatever fits your design.
+ * There are three different variants – `base`, `floating` and `ghost`.
  *
  * ```tsx
- * <DatePicker label="Dato" variant="simple" />
+ * <DatePicker label="Dato" variant="base" />
  * ```
  */
 declare const DatePicker: React__default.ForwardRefExoticComponent<AriaDatePickerProps<DateValue> & Pick<BoxProps, "width" | "minHeight"> & {
@@ -483,10 +473,10 @@ type DateRangePickerProps = AriaDateRangePickerProps<DateValue> & Pick<BoxProps,
 /**
  * A date range picker component.
  *
- * There are two versions of this component – a simple one, and one with a trigger button for showing the calendar. Use whatever fits your design.
+ * There are three variants to choose from – `base`, `floating` and `ghost`.
  *
  * ```tsx
- * <DateRangePicker startLabel="From" startName="from" endLabel="To" endName="to" variant="simple" />
+ * <DateRangePicker startLabel="From" startName="from" endLabel="To" endName="to" variant="base" />
  * ```
  */
 declare function DateRangePicker({ variant, minHeight, startName, endName, withPortal, ...props }: DateRangePickerProps): React__default.JSX.Element;
@@ -1424,13 +1414,11 @@ type TravelTagProps = TagProps & BoxProps & {
 declare const TravelTag: _chakra_ui_system_dist_system_types.ComponentWithAs<As, TravelTagProps>;
 
 type LinkProps = Omit<LinkProps$1, "variant"> & {
-    variant?: "primary" | "secondary"
-    /** @deprecated Use `secondary` instead */
-     | "tertiary";
+    variant?: "primary" | "secondary";
 };
 /** Link to different sites or parts of site
  *
- * You can specify the `variant` prop to get different link designs. `tertiary` should only be used on dark backgrounds.
+ * You can specify the `variant` prop to get different link designs.
  */
 declare const TextLink: _chakra_ui_system_dist_system_types.ComponentWithAs<"a", LinkProps>;
 
@@ -1895,15 +1883,7 @@ type StepperStepProps = {
 declare const StepperStep: ({ children, stepNumber }: StepperStepProps) => React__default.JSX.Element;
 
 type TabsProps = Exclude<TabsProps$1, "colorScheme" | "variant" | "orientation" | "size"> & {
-    colorScheme: 
-    /** @deprecated dark is deprecated please use accent*/
-    "dark"
-    /** @deprecated light is deprecated please use default*/
-     | "light"
-    /** @deprecated green is deprecated please use accent*/
-     | "green"
-    /** @deprecated grey is deprecated please use default*/
-     | "grey" | "base" | "accent";
+    colorScheme: "base" | "accent";
     /** Defaults to `md` */
     size?: "sm" | "md" | "lg" | "xl";
     /** Defaults to `round` */
@@ -2341,20 +2321,6 @@ declare const theme: {
                         backgroundColor: string;
                     };
                 };
-                tertiary: {
-                    _hover: {
-                        backgroundColor: string;
-                    };
-                    _active: {
-                        backgroundColor: string;
-                    };
-                    _focus: _chakra_ui_styled_system.SystemStyleObject;
-                    _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
-                    "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
-                    backgroundColor: string;
-                    color: string;
-                    fontWeight: string;
-                };
                 additional: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     _hover: {
                         boxShadow: string;
@@ -2405,7 +2371,7 @@ declare const theme: {
             } | undefined;
             defaultProps?: {
                 size?: "sm" | "md" | "lg" | "xs" | undefined;
-                variant?: "control" | "primary" | "secondary" | "tertiary" | "additional" | "ghost" | "floating" | undefined;
+                variant?: "control" | "primary" | "secondary" | "additional" | "ghost" | "floating" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
         };
@@ -3123,6 +3089,7 @@ declare const theme: {
                 overlay: {
                     backgroundColor: string;
                     zIndex: string;
+                    color: string;
                 };
                 dialogContainer: {
                     display: string;
@@ -3132,7 +3099,7 @@ declare const theme: {
                     overflow: string;
                 };
                 dialog: {
-                    background: string;
+                    backgroundColor: string;
                     color: string;
                     zIndex: string;
                     maxHeight: string | undefined;
@@ -3435,7 +3402,7 @@ declare const theme: {
             } | undefined;
             defaultProps?: {
                 size?: string | number | undefined;
-                variant?: "base" | "green" | "light" | "dark" | "accent" | "brand" | undefined;
+                variant?: "base" | "green" | "light" | "accent" | "brand" | "dark" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
             parts: ("text" | "container" | "icon")[];
@@ -3962,26 +3929,10 @@ declare const theme: {
                     "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
                     color: string;
                 };
-                tertiary: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
-                    _hover: {
-                        color: string;
-                        backgroundColor: string;
-                        boxShadow: string;
-                    };
-                    _active: {
-                        color: string;
-                        backgroundColor: string;
-                        boxShadow: string;
-                    };
-                    _focus: _chakra_ui_styled_system.SystemStyleObject;
-                    _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
-                    "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
-                    color: string;
-                };
             } | undefined;
             defaultProps?: {
                 size?: string | number | undefined;
-                variant?: "primary" | "secondary" | "tertiary" | undefined;
+                variant?: "primary" | "secondary" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
         };
@@ -4239,7 +4190,7 @@ declare const theme: {
             parts: ("body" | "dialog" | "footer" | "header" | "overlay" | "closeButton" | "dialogContainer")[];
         };
         Popover: {
-            baseStyle?: {
+            baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
                 popper: {
                     zIndex: string;
                 };
@@ -4265,15 +4216,23 @@ declare const theme: {
                     clipPath: string;
                 };
                 closeButton: {
-                    position: string;
+                    _active: {
+                        backgroundColor: string;
+                    };
                     borderRadius: string;
                     top: number;
                     insetEnd: number;
                     width: number;
                     height: number;
                     padding: number;
+                    _focus: _chakra_ui_styled_system.SystemStyleObject;
+                    _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
+                    "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
+                    position: string;
+                    color: string;
+                    hover: string;
                 };
-            } | undefined;
+            }) | undefined;
             sizes?: {
                 sm: {
                     content: {