@vygruppen/spor-react 3.8.1 → 4.0.1

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,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;
         };
@@ -2908,21 +2874,10 @@ declare const theme: {
                     paddingY: number;
                     alignItems: string;
                     _hover: {
-                        boxShadow: string;
                         zIndex: number;
                     };
-                    _focusWithin: {
-                        boxShadow: string;
-                    };
-                    _invalid: {
-                        boxShadow: string;
-                    };
                     _disabled: {
                         pointerEvents: string;
-                        boxShadow: string;
-                        _focus: {
-                            boxShadow: string;
-                        };
                     };
                 };
                 inputLabel: {
@@ -2966,7 +2921,7 @@ declare const theme: {
                 arrow: {
                     [x: string]: string;
                 };
-                calendar: {
+                calendarPopover: {
                     backgroundColor: string;
                     color: string;
                     boxShadow: string;
@@ -3028,11 +2983,29 @@ declare const theme: {
             }) | undefined;
             sizes?: {
                 [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
-                    keys: ("dateCell" | "weekdays" | "weekend" | "calendar" | "calendarTriggerButton" | "dateTimeSegment" | "inputLabel" | "wrapper" | "arrow")[];
+                    keys: ("dateCell" | "weekdays" | "weekend" | "calendar" | "calendarTriggerButton" | "dateTimeSegment" | "inputLabel" | "wrapper" | "calendarPopover" | "arrow")[];
                 }>;
             } | undefined;
             variants?: {
                 base: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                    wrapper: {
+                        boxShadow: string;
+                        _hover: {
+                            boxShadow: string;
+                        };
+                        _focusWithin: {
+                            boxShadow: string;
+                        };
+                        _invalid: {
+                            boxShadow: string;
+                        };
+                        _disabled: {
+                            boxShadow: string;
+                            _focus: {
+                                boxShadow: string;
+                            };
+                        };
+                    };
                     calendar: {
                         backgroundColor: string;
                         color: string;
@@ -3049,6 +3022,24 @@ declare const theme: {
                     };
                 };
                 floating: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                    wrapper: {
+                        boxShadow: string;
+                        _hover: {
+                            boxShadow: string;
+                        };
+                        _focusWithin: {
+                            boxShadow: string;
+                        };
+                        _invalid: {
+                            boxShadow: string;
+                        };
+                        _disabled: {
+                            boxShadow: string;
+                            _focus: {
+                                boxShadow: string;
+                            };
+                        };
+                    };
                     calendar: {
                         backgroundColor: string;
                         color: string;
@@ -3062,6 +3053,24 @@ declare const theme: {
                     };
                 };
                 ghost: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                    wrapper: {
+                        boxShadow: string;
+                        _hover: {
+                            boxShadow: string;
+                        };
+                        _focusWithin: {
+                            boxShadow: string;
+                        };
+                        _invalid: {
+                            boxShadow: string;
+                        };
+                        _disabled: {
+                            boxShadow: string;
+                            _focus: {
+                                boxShadow: string;
+                            };
+                        };
+                    };
                     calendar: {
                         backgroundColor: string;
                         color: string;
@@ -3084,7 +3093,7 @@ declare const theme: {
                 variant?: "base" | "ghost" | "floating" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
-            parts: ("dateCell" | "weekdays" | "weekend" | "calendar" | "calendarTriggerButton" | "dateTimeSegment" | "inputLabel" | "wrapper" | "arrow")[];
+            parts: ("dateCell" | "weekdays" | "weekend" | "calendar" | "calendarTriggerButton" | "dateTimeSegment" | "inputLabel" | "wrapper" | "calendarPopover" | "arrow")[];
         };
         Divider: {
             baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
@@ -3123,6 +3132,7 @@ declare const theme: {
                 overlay: {
                     backgroundColor: string;
                     zIndex: string;
+                    color: string;
                 };
                 dialogContainer: {
                     display: string;
@@ -3132,7 +3142,7 @@ declare const theme: {
                     overflow: string;
                 };
                 dialog: {
-                    background: string;
+                    backgroundColor: string;
                     color: string;
                     zIndex: string;
                     maxHeight: string | undefined;
@@ -3435,7 +3445,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 +3972,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 +4233,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 +4259,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: {