@vygruppen/spor-react 3.8.1 → 4.0.1

package/dist/index.js

@@ -3476,7 +3476,7 @@ var init_DatePicker = __esm({
         const onFieldClick = () => {
           state2.setOpen(true);
         };
-        const popoverContent = /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverContent, { color: "darkGrey", boxShadow: "md", sx: styles3.calendar }, /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverArrow, { sx: styles3.arrow }), /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverBody, null, /* @__PURE__ */ React69__namespace.default.createElement(react.FocusLock, null, /* @__PURE__ */ React69__namespace.default.createElement(
+        const popoverContent = /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverContent, { color: "darkGrey", sx: styles3.calendarPopover }, /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverArrow, { sx: styles3.arrow }), /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverBody, null, /* @__PURE__ */ React69__namespace.default.createElement(react.FocusLock, null, /* @__PURE__ */ React69__namespace.default.createElement(
           Calendar,
           {
             ...calendarProps,
@@ -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
+          )
+        ));
       }
     );
   }
@@ -3575,7 +3591,7 @@ function DateRangePicker({
   const onFieldClick = () => {
     state2.setOpen(true);
   };
-  const popoverContent = /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverContent, { sx: styles3.calendar, boxShadow: "md", maxWidth: "none" }, /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverArrow, { sx: styles3.arrow }), /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverBody, null, /* @__PURE__ */ React69__namespace.default.createElement(react.FocusLock, null, /* @__PURE__ */ React69__namespace.default.createElement(RangeCalendar, { variant: "base", ...calendarProps }))));
+  const popoverContent = /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverContent, { sx: styles3.calendarPopover, maxWidth: "none" }, /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverArrow, { sx: styles3.arrow }), /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverBody, null, /* @__PURE__ */ React69__namespace.default.createElement(react.FocusLock, null, /* @__PURE__ */ React69__namespace.default.createElement(RangeCalendar, { variant: "base", ...calendarProps }))));
   return /* @__PURE__ */ React69__namespace.default.createElement(reactAria.I18nProvider, { locale }, /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { position: "relative", display: "inline-flex", flexDirection: "column" }, props.label && /* @__PURE__ */ React69__namespace.default.createElement(react.FormLabel, { ...labelProps, sx: styles3.inputLabel }, props.label), /* @__PURE__ */ React69__namespace.default.createElement(
     react.Popover,
     {
@@ -3594,7 +3610,16 @@ function DateRangePicker({
         onKeyPress: handleEnterClick,
         minHeight
       },
-      variant && /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverTrigger, null, /* @__PURE__ */ React69__namespace.default.createElement(CalendarTriggerButton, { paddingLeft: 1, paddingRight: 1, variant, ref, ...buttonProps })),
+      variant && /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverTrigger, null, /* @__PURE__ */ React69__namespace.default.createElement(
+        CalendarTriggerButton,
+        {
+          paddingLeft: 1,
+          paddingRight: 1,
+          variant,
+          ref,
+          ...buttonProps
+        }
+      )),
       /* @__PURE__ */ React69__namespace.default.createElement(
         DateField,
         {
@@ -6512,7 +6537,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 +13062,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),
@@ -13722,7 +13727,7 @@ var init_close_button = __esm({
           }
         }),
         _hover: {
-          backgroundColor: themeTools.mode("seaMist", "pine")(props),
+          backgroundColor: themeTools.mode("seaMist", "whiteAlpha.100")(props),
           _disabled: {
             color: "dimGrey"
           }
@@ -13780,6 +13785,7 @@ var init_datepicker2 = __esm({
       "wrapper",
       "calendarTriggerButton",
       "arrow",
+      "calendarPopover",
       "calendar",
       "weekdays",
       "weekend",
@@ -13804,36 +13810,10 @@ var init_datepicker2 = __esm({
           paddingY: 0.5,
           alignItems: "center",
           _hover: {
-            boxShadow: getBoxShadowString({
-              borderColor: themeTools.mode("darkGrey", "white")(props),
-              borderWidth: 2
-            }),
             zIndex: zIndices2.docked
           },
-          _focusWithin: {
-            boxShadow: getBoxShadowString({
-              borderColor: themeTools.mode("greenHaze", "azure")(props),
-              borderWidth: 2
-            })
-          },
-          _invalid: {
-            boxShadow: getBoxShadowString({
-              borderColor: "brightRed",
-              borderWidth: 2
-            })
-          },
           _disabled: {
-            pointerEvents: "none",
-            boxShadow: getBoxShadowString({
-              borderColor: themeTools.mode("osloGrey", "whiteAlpha.400")(props),
-              borderWidth: 1
-            }),
-            _focus: {
-              boxShadow: getBoxShadowString({
-                borderColor: themeTools.mode("osloGrey", "whiteAlpha.400")(props),
-                borderWidth: 1
-              })
-            }
+            pointerEvents: "none"
           }
         },
         inputLabel: {
@@ -13895,12 +13875,13 @@ var init_datepicker2 = __esm({
         arrow: {
           [$arrowBackground.variable]: themeTools.mode("white", colors.night)(props)
         },
-        calendar: {
+        calendarPopover: {
           backgroundColor: themeTools.mode("white", "night")(props),
           color: themeTools.mode("darkGrey", "white")(props),
           boxShadow: getBoxShadowString({
             borderWidth: 2,
-            borderColor: themeTools.mode("blackAlpha.200", "whiteAlpha.200")(props)
+            borderColor: themeTools.mode("blackAlpha.200", "whiteAlpha.200")(props),
+            baseShadow: "md"
           })
         },
         weekdays: {
@@ -13984,6 +13965,41 @@ var init_datepicker2 = __esm({
       }),
       variants: {
         base: (props) => ({
+          wrapper: {
+            boxShadow: getBoxShadowString({
+              borderColor: themeTools.mode("blackAlpha.400", "whiteAlpha.400")(props)
+            }),
+            _hover: {
+              boxShadow: getBoxShadowString({
+                borderColor: themeTools.mode("darkGrey", "white")(props),
+                borderWidth: 2
+              })
+            },
+            _focusWithin: {
+              boxShadow: getBoxShadowString({
+                borderColor: themeTools.mode("greenHaze", "azure")(props),
+                borderWidth: 2
+              })
+            },
+            _invalid: {
+              boxShadow: getBoxShadowString({
+                borderColor: "brightRed",
+                borderWidth: 2
+              })
+            },
+            _disabled: {
+              boxShadow: getBoxShadowString({
+                borderColor: themeTools.mode("osloGrey", "whiteAlpha.400")(props),
+                borderWidth: 1
+              }),
+              _focus: {
+                boxShadow: getBoxShadowString({
+                  borderColor: themeTools.mode("osloGrey", "whiteAlpha.400")(props),
+                  borderWidth: 1
+                })
+              }
+            }
+          },
           calendar: {
             backgroundColor: themeTools.mode("white", "night")(props),
             color: themeTools.mode("darkGrey", "white")(props),
@@ -14006,6 +14022,47 @@ var init_datepicker2 = __esm({
           }
         }),
         floating: (props) => ({
+          wrapper: {
+            boxShadow: getBoxShadowString({
+              borderColor: themeTools.mode("blackAlpha.400", "whiteAlpha.400")(props),
+              baseShadow: "sm"
+            }),
+            _hover: {
+              boxShadow: getBoxShadowString({
+                borderColor: themeTools.mode("darkGrey", "white")(props),
+                borderWidth: 2,
+                baseShadow: "sm"
+              })
+            },
+            _focusWithin: {
+              boxShadow: getBoxShadowString({
+                borderColor: themeTools.mode("greenHaze", "azure")(props),
+                borderWidth: 2,
+                baseShadow: "sm"
+              })
+            },
+            _invalid: {
+              boxShadow: getBoxShadowString({
+                borderColor: "brightRed",
+                borderWidth: 2,
+                baseShadow: "sm"
+              })
+            },
+            _disabled: {
+              boxShadow: getBoxShadowString({
+                borderColor: themeTools.mode("osloGrey", "whiteAlpha.400")(props),
+                borderWidth: 1,
+                baseShadow: "sm"
+              }),
+              _focus: {
+                boxShadow: getBoxShadowString({
+                  borderColor: themeTools.mode("osloGrey", "whiteAlpha.400")(props),
+                  borderWidth: 1,
+                  baseShadow: "sm"
+                })
+              }
+            }
+          },
           calendar: {
             backgroundColor: themeTools.mode("white", "night")(props),
             color: themeTools.mode("darkGrey", "white")(props),
@@ -14022,13 +14079,43 @@ var init_datepicker2 = __esm({
           }
         }),
         ghost: (props) => ({
+          wrapper: {
+            boxShadow: "none",
+            _hover: {
+              boxShadow: getBoxShadowString({
+                borderColor: themeTools.mode("darkGrey", "white")(props),
+                borderWidth: 2
+              })
+            },
+            _focusWithin: {
+              boxShadow: getBoxShadowString({
+                borderColor: themeTools.mode("greenHaze", "azure")(props),
+                borderWidth: 2
+              })
+            },
+            _invalid: {
+              boxShadow: getBoxShadowString({
+                borderColor: "brightRed",
+                borderWidth: 2
+              })
+            },
+            _disabled: {
+              boxShadow: getBoxShadowString({
+                borderColor: themeTools.mode("osloGrey", "whiteAlpha.400")(props),
+                borderWidth: 1
+              }),
+              _focus: {
+                boxShadow: getBoxShadowString({
+                  borderColor: themeTools.mode("osloGrey", "whiteAlpha.400")(props),
+                  borderWidth: 1
+                })
+              }
+            }
+          },
           calendar: {
             backgroundColor: themeTools.mode("white", "night")(props),
             color: themeTools.mode("darkGrey", "white")(props),
-            boxShadow: getBoxShadowString({
-              borderWidth: 2,
-              borderColor: themeTools.mode("", "")(props)
-            })
+            boxShadow: "none"
           },
           dateCell: {
             color: themeTools.mode("darkGrey", "white")(props),
@@ -14036,7 +14123,7 @@ var init_datepicker2 = __esm({
               backgroundColor: themeTools.mode("seaMist", "pine")(props)
             },
             _selected: {
-              backgroundColor: themeTools.mode("", "primaryGreen")(props),
+              backgroundColor: themeTools.mode("transparent", "primaryGreen")(props),
               color: "darkGrey"
             }
           }
@@ -14114,7 +14201,8 @@ var init_drawer = __esm({
       baseStyle: (props) => ({
         overlay: {
           backgroundColor: "blackAlpha.600",
-          zIndex: "modal"
+          zIndex: "modal",
+          color: "red"
         },
         dialogContainer: {
           display: "flex",
@@ -14124,8 +14212,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 +15237,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 +15497,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 +15552,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 +15585,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 +15605,7 @@ var init_popover2 = __esm({
           height: 2,
           padding: 1
         }
-      },
+      }),
       sizes: {
         sm: {
           content: {
@@ -17283,6 +17345,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-HCSXVAA5.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-3SY4N6MP.mjs';

package/package.json

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