@vygruppen/spor-react 3.8.0 → 4.0.0

package/dist/index.d.ts

@@ -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,13 +2371,13 @@ 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;
         };
         Card: {
             baseStyle?: ((props: any) => {
-                "button&, a&": {
+                "button&, a&, label&, &.is-clickable": {
                     _disabled: {
                         backgroundColor: string;
                         boxShadow: string;
@@ -2469,7 +2435,7 @@ declare const theme: {
                 transitionDuration: string;
                 borderRadius: string;
             } | {
-                "button&, a&": {
+                "button&, a&, label&, &.is-clickable": {
                     _disabled: {
                         backgroundColor: string;
                         boxShadow: string;
@@ -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: {

package/dist/index.js

@@ -3484,37 +3484,53 @@ var init_DatePicker = __esm({
             showYearNavigation
           }
         ))));
-        return /* @__PURE__ */ React69__namespace.default.createElement(reactAria.I18nProvider, { locale }, /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { position: "relative", display: "inline-flex", flexDirection: "column", width }, /* @__PURE__ */ React69__namespace.default.createElement(
-          react.Popover,
+        return /* @__PURE__ */ React69__namespace.default.createElement(reactAria.I18nProvider, { locale }, /* @__PURE__ */ React69__namespace.default.createElement(
+          react.Box,
           {
-            ...dialogProps,
-            isOpen: state2.isOpen,
-            onOpen: state2.open,
-            onClose: state2.close
+            position: "relative",
+            display: "inline-flex",
+            flexDirection: "column",
+            width
           },
-          /* @__PURE__ */ React69__namespace.default.createElement(react.InputGroup, { ...groupProps, display: "inline-flex" }, /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverAnchor, null, /* @__PURE__ */ React69__namespace.default.createElement(
-            StyledField,
+          /* @__PURE__ */ React69__namespace.default.createElement(
+            react.Popover,
             {
-              variant,
-              onClick: onFieldClick,
-              paddingX: 3,
-              minHeight
+              ...dialogProps,
+              isOpen: state2.isOpen,
+              onOpen: state2.open,
+              onClose: state2.close
             },
-            /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverTrigger, null, /* @__PURE__ */ React69__namespace.default.createElement(CalendarTriggerButton, { variant, ref, ...buttonProps })),
-            /* @__PURE__ */ React69__namespace.default.createElement(
-              DateField,
+            /* @__PURE__ */ React69__namespace.default.createElement(react.InputGroup, { ...groupProps, display: "inline-flex" }, /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverAnchor, null, /* @__PURE__ */ React69__namespace.default.createElement(
+              StyledField,
               {
-                label: props.label,
-                labelProps,
-                name: props.name,
-                ...fieldProps
-              }
-            )
-          ))),
-          /* @__PURE__ */ React69__namespace.default.createElement(exports.FormErrorMessage, { ...errorMessageProps }, errorMessage),
-          state2.isOpen && !props.isDisabled && withPortal && /* @__PURE__ */ React69__namespace.default.createElement(react.Portal, null, popoverContent),
-          state2.isOpen && !props.isDisabled && !withPortal && popoverContent
-        )));
+                variant,
+                onClick: onFieldClick,
+                paddingX: 3,
+                minHeight
+              },
+              /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverTrigger, null, /* @__PURE__ */ React69__namespace.default.createElement(
+                CalendarTriggerButton,
+                {
+                  variant,
+                  ref,
+                  ...buttonProps
+                }
+              )),
+              /* @__PURE__ */ React69__namespace.default.createElement(
+                DateField,
+                {
+                  label: props.label,
+                  labelProps,
+                  name: props.name,
+                  ...fieldProps
+                }
+              )
+            ))),
+            /* @__PURE__ */ React69__namespace.default.createElement(exports.FormErrorMessage, { ...errorMessageProps }, errorMessage),
+            state2.isOpen && !props.isDisabled && withPortal && /* @__PURE__ */ React69__namespace.default.createElement(react.Portal, null, popoverContent),
+            state2.isOpen && !props.isDisabled && !withPortal && popoverContent
+          )
+        ));
       }
     );
   }
@@ -6512,7 +6528,7 @@ var init_Drawer = __esm({
         /* @__PURE__ */ React69__namespace.default.createElement(
           react.Center,
           {
-            background: `linear-gradient(to ${placement === "bottom" ? "bottom" : "top"}, white 0%, white 60%, transparent)`,
+            background: placement === "bottom" ? "bottom" : "top",
             padding: 2,
             borderRadius: "md"
           },
@@ -13037,26 +13053,6 @@ var init_button2 = __esm({
             }
           }
         }),
-        /**
-         * @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: themeTools.mode("darkGrey", "white")(props),
@@ -13233,7 +13229,7 @@ var init_card2 = __esm({
         transitionDuration: "fast",
         borderRadius: "md",
         ...getColorSchemeBaseProps(props),
-        "button&, a&": {
+        "button&, a&, label&, &.is-clickable": {
           ...getColorSchemeClickableProps(props),
           _hover: getColorSchemeHoverProps(props),
           _active: getColorSchemeActiveProps(props),
@@ -13722,7 +13718,7 @@ var init_close_button = __esm({
           }
         }),
         _hover: {
-          backgroundColor: themeTools.mode("seaMist", "pine")(props),
+          backgroundColor: themeTools.mode("seaMist", "whiteAlpha.100")(props),
           _disabled: {
             color: "dimGrey"
           }
@@ -14114,7 +14110,8 @@ var init_drawer = __esm({
       baseStyle: (props) => ({
         overlay: {
           backgroundColor: "blackAlpha.600",
-          zIndex: "modal"
+          zIndex: "modal",
+          color: "red"
         },
         dialogContainer: {
           display: "flex",
@@ -14124,8 +14121,8 @@ var init_drawer = __esm({
           overflow: props.scrollBehavior === "inside" ? "hidden" : "auto"
         },
         dialog: {
-          background: "white",
-          color: "inherit",
+          backgroundColor: themeTools.mode("white", "pine")(props),
+          color: themeTools.mode("inherit", "white")(props),
           zIndex: "modal",
           maxHeight: props.scrollBehavior === "inside" ? "calc(100% - 7.5rem)" : void 0,
           boxShadow: "md"
@@ -15149,47 +15146,6 @@ var init_link2 = __esm({
             backgroundColor: themeTools.mode("mint", "whiteAlpha.100")(props),
             color: themeTools.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: {
@@ -15450,7 +15406,7 @@ var init_modal2 = __esm({
         },
         dialog: {
           borderRadius: "md",
-          background: themeTools.mode("white", "night")(props),
+          background: themeTools.mode("white", "pine")(props),
           color: themeTools.mode("inherit", "white")(props),
           my: "3.75rem",
           zIndex: "modal",
@@ -15505,17 +15461,19 @@ var $popperBg2, $arrowBg3, $arrowShadowColor2, helpers18, config27, popover_defa
 var init_popover2 = __esm({
   "src/theme/components/popover.ts"() {
     init_dist4();
+    init_box_shadow_utils();
+    init_focus_utils();
     $popperBg2 = themeTools.cssVar("popper-bg");
     $arrowBg3 = themeTools.cssVar("popper-arrow-bg");
     $arrowShadowColor2 = themeTools.cssVar("popper-arrow-shadow-color");
     helpers18 = react.createMultiStyleConfigHelpers(popoverAnatomy.keys);
     config27 = helpers18.defineMultiStyleConfig({
-      baseStyle: {
+      baseStyle: (props) => ({
         popper: {
           zIndex: "popover"
         },
         content: {
-          [$popperBg2.variable]: `colors.darkTeal`,
+          [$popperBg2.variable]: themeTools.mode(`colors.darkTeal`, `colors.pine`)(props),
           backgroundColor: $popperBg2.reference,
           [$arrowBg3.variable]: $popperBg2.reference,
           [$arrowShadowColor2.variable]: `colors.blackAlpha.300`,
@@ -15536,6 +15494,19 @@ var init_popover2 = __esm({
         },
         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,
@@ -15543,7 +15514,7 @@ var init_popover2 = __esm({
           height: 2,
           padding: 1
         }
-      },
+      }),
       sizes: {
         sm: {
           content: {
@@ -17283,6 +17254,10 @@ Object.defineProperty(exports, 'PopoverTrigger', {
   enumerable: true,
   get: function () { return react.PopoverTrigger; }
 });
+Object.defineProperty(exports, 'Portal', {
+  enumerable: true,
+  get: function () { return react.Portal; }
+});
 Object.defineProperty(exports, 'ScaleFade', {
   enumerable: true,
   get: function () { return react.ScaleFade; }

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, 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-HL3ESNVB.mjs';
+export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, Portal, ProgressBar, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardPopover, Wrap, WrapItem, createTexts, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToast, useToken, useTranslation } from './chunk-B77QE6EZ.mjs';

package/package.json

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

package/src/button/Button.tsx

@@ -28,8 +28,6 @@ export type ButtonProps = Exclude<
     | "control"
     | "primary"
     | "secondary"
-    /** @deprecated Use `secondary` instead */
-    | "tertiary"
     | "additional"
     | "ghost"
     | "floating";
@@ -42,8 +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.
- * - `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.
  *
@@ -56,7 +53,7 @@ export type ButtonProps = Exclude<
  * 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>
  * ```

package/src/button/ButtonGroup.tsx

@@ -13,7 +13,7 @@ export type ButtonGroupProps = ChakraButtonGroupProps;
  *
  * ```tsx
  * <ButtonGroup>
- *   <Button variant="tertiary">Cancel</Button>
+ *   <Button variant="secondary">Cancel</Button>
  *   <Button variant="primary">Save</Button>
  * </ButtonGroup>
  * ```

package/src/button/FloatingActionButton.tsx

@@ -11,16 +11,7 @@ import React, { useEffect } from "react";
 const MotionBox = motion(Box);
 
 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.ReactNode;
   children: React.ReactNode;
@@ -34,7 +25,7 @@ type FloatingActionButtonProps = BoxProps & {
  *
  * ```tsx
  * <FloatingActionButton
- *  variant="green"
+ *  variant="accent"
  *  icon={<TicketControlFill30Icon />}
  *  placement="bottom right"
  * />

package/src/button/IconButton.tsx

@@ -12,7 +12,6 @@ export type IconButtonProps = Omit<ChakraIconButtonProps, "variant"> & {
     | "control"
     | "primary"
     | "secondary"
-    | "tertiary"
     | "additional"
     | "ghost"
     | "floating";
@@ -27,8 +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.
- * - `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.
  *