@vygruppen/spor-react 2.2.0 → 2.3.0

package/dist/index.d.ts

@@ -75,7 +75,7 @@ type ExpandableProps = AccordionProps & {
  * </Expandable>
  * ```
  */
-declare const Expandable: ({ children, headingLevel, title, leftIcon, size, ...rest }: ExpandableProps) => JSX.Element;
+declare const Expandable: ({ children, headingLevel, title, leftIcon, size, ...rest }: ExpandableProps) => React__default.JSX.Element;
 type ExpandableItemProps = AccordionItemProps & {
     /** The hidden content */
     children: React__default.ReactNode;
@@ -106,7 +106,7 @@ type ExpandableItemProps = AccordionItemProps & {
  *
  * If you need even more control, you can put together your own expandable with the `Accordion`, `AccordionItem`, `AccordionButton`, `AccordionIcon` and `AccordionPanel` components.
  */
-declare const ExpandableItem: ({ children, title, headingLevel, leftIcon, ...rest }: ExpandableItemProps) => JSX.Element;
+declare const ExpandableItem: ({ children, title, headingLevel, leftIcon, ...rest }: ExpandableItemProps) => React__default.JSX.Element;
 
 type BaseAlertProps = BoxProps & {
     /** The color scheme and icon of the alert */
@@ -141,7 +141,7 @@ type ClosableAlertProps = BaseAlertProps & {
  *   <Text>Some info here</Text>
  * </ClosableAlert>
  */
-declare const ClosableAlert: ({ variant, children, onClose: externalOnClose, }: ClosableAlertProps) => JSX.Element | null;
+declare const ClosableAlert: ({ variant, children, onClose: externalOnClose, }: ClosableAlertProps) => React__default.JSX.Element | null;
 
 type ExpandableAlertProps = BaseAlertProps & {
     /** The title string  */
@@ -167,7 +167,7 @@ type ExpandableAlertProps = BaseAlertProps & {
  * </ExpandableAlert>
  * ```
  */
-declare const ExpandableAlert: ({ variant, children, title, headingLevel, defaultOpen, onToggle, }: ExpandableAlertProps) => JSX.Element;
+declare const ExpandableAlert: ({ variant, children, title, headingLevel, defaultOpen, onToggle, }: ExpandableAlertProps) => React__default.JSX.Element;
 
 type StaticAlertProps = BaseAlertProps;
 /**
@@ -181,7 +181,7 @@ type StaticAlertProps = BaseAlertProps;
  * </StaticAlert>
  * ```
  */
-declare const StaticAlert: ({ children, ...props }: StaticAlertProps) => JSX.Element;
+declare const StaticAlert: ({ children, ...props }: StaticAlertProps) => React__default.JSX.Element;
 
 type ButtonProps = Exclude<ButtonProps$1, "colorScheme" | "loadingText" | "size" | "variant"> & {
     /**
@@ -336,7 +336,7 @@ type FloatingActionButtonProps = BoxProps & {
  *  placement="bottom right"
  * />
  */
-declare const FloatingActionButton: ({ children, icon, variant, isTextVisible: externalIsTextVisible, placement, ...props }: FloatingActionButtonProps) => JSX.Element;
+declare const FloatingActionButton: ({ children, icon, variant, isTextVisible: externalIsTextVisible, placement, ...props }: FloatingActionButtonProps) => React__default.JSX.Element;
 
 type DividerProps = BoxProps;
 /** A dividing line, used to divide content.
@@ -432,7 +432,7 @@ type DatePickerProps = AriaDatePickerProps<DateValue> & Pick<BoxProps, "minHeigh
  * <DatePicker label="Dato" variant="simple" />
  * ```
  */
-declare function DatePicker({ variant, errorMessage, minHeight, showYearNavigation, ...props }: DatePickerProps): JSX.Element;
+declare function DatePicker({ variant, errorMessage, minHeight, showYearNavigation, ...props }: DatePickerProps): React__default.JSX.Element;
 
 type DateRangePickerProps = AriaDateRangePickerProps<DateValue> & Pick<BoxProps, "minHeight"> & {
     startLabel?: string;
@@ -450,7 +450,7 @@ type DateRangePickerProps = AriaDateRangePickerProps<DateValue> & Pick<BoxProps,
  * <DateRangePicker startLabel="From" startName="from" endLabel="To" endName="to" variant="simple" />
  * ```
  */
-declare function DateRangePicker({ variant, minHeight, startName, endName, ...props }: DateRangePickerProps): JSX.Element;
+declare function DateRangePicker({ variant, minHeight, startName, endName, ...props }: DateRangePickerProps): React__default.JSX.Element;
 
 type TimePickerProps = Omit<BoxProps, "defaultValue"> & {
     /** The label. Defaults to a localized version of "Time" */
@@ -497,7 +497,7 @@ type TimePickerProps = Omit<BoxProps, "defaultValue"> & {
  *
  * @see https://spor.vy.no/komponenter/timepicker
  */
-declare const TimePicker: ({ label: externalLabel, value, defaultValue, onChange, minuteInterval, isDisabled: isDisabledExternally, name, ...boxProps }: TimePickerProps) => JSX.Element;
+declare const TimePicker: ({ label: externalLabel, value, defaultValue, onChange, minuteInterval, isDisabled: isDisabledExternally, name, ...boxProps }: TimePickerProps) => React__default.JSX.Element;
 
 declare enum Language {
     NorwegianBokmal = "nb",
@@ -545,7 +545,7 @@ type AttachedInputsProps = FlexProps;
  * </AttachedInputs>
  * ```
  */
-declare const AttachedInputs: ({ flexDirection, ...rest }: AttachedInputsProps) => JSX.Element;
+declare const AttachedInputs: ({ flexDirection, ...rest }: AttachedInputsProps) => React__default.JSX.Element;
 
 type CardSelectProps = BoxProps & {
     /** The design of the trigger button.
@@ -630,7 +630,7 @@ type CheckboxGroupProps = Exclude<CheckboxGroupProps$1, "colorScheme" | "size" |
  *   <Checkbox>First Class</Checkbox>
  * </CheckboxGroup>
  */
-declare const CheckboxGroup: ({ direction, children, ...props }: CheckboxGroupProps) => JSX.Element;
+declare const CheckboxGroup: ({ direction, children, ...props }: CheckboxGroupProps) => React__default.JSX.Element;
 
 type ChoiceChipProps = {
     onChange?: (value: ChangeEvent<HTMLInputElement>) => void;
@@ -677,6 +677,48 @@ type ChoiceChipProps = {
  */
 declare const ChoiceChip: _chakra_ui_system_dist_system_types.ComponentWithAs<_chakra_ui_system_dist_system_types.As, ChoiceChipProps>;
 
+type CounterProps = {
+    /** The name of the input field */
+    name?: string;
+    /** The current value */
+    value?: number;
+    /** A default value, if uncontrolled */
+    defaultValue?: number;
+    /** Callback for when the value changes */
+    onChange?: (value: number) => void;
+    /** Optional minimum value. Defaults to 0 */
+    minValue?: number;
+    /** Optional maximum value. Defaults to 99 */
+    maxValue?: number;
+    /** Whether the counter is disabled or not */
+    isDisabled?: boolean;
+} & BoxProps;
+/** A simple counter component
+ *
+ * Allows you to choose a given integer value, like for example the number of
+ * adults on your journey.
+ *
+ * ```tsx
+ * <Counter value={value} onChange={setValue} />
+ * ```
+ *
+ * You can also set a minimum and/or maximum value:
+ *
+ * ```tsx
+ * <Counter value={value} onChange={setValue} minValue={1} maxValue={10} />
+ * ```
+ *
+ * You can use the Counter inside of a FormControl component to get IDs etc linked up automatically:
+ *
+ * ```tsx
+ * <FormControl>
+ *   <FormLabel>Number of adults</FormLabel>
+ *   <Counter />
+ * </FormControl>
+ * ```
+ */
+declare function Counter({ name: nameProp, id: idProp, value: valueProp, defaultValue, onChange: onChangeProp, minValue, maxValue, isDisabled, ...boxProps }: CounterProps): React__default.JSX.Element;
+
 type FormControlProps = FormControlProps$1;
 declare const FormControl: _chakra_ui_system_dist_system_types.ComponentWithAs<"div", FormControlProps$1>;
 
@@ -711,7 +753,7 @@ type FormErrorMessageProps = BoxProps & {
  *
  * @see https://spor.vy.no/komponenter/skjemaelementer
  */
-declare const FormErrorMessage: ({ children, ...boxProps }: FormErrorMessageProps) => JSX.Element | null;
+declare const FormErrorMessage: ({ children, ...boxProps }: FormErrorMessageProps) => React__default.JSX.Element | null;
 
 type FormLabelProps = FormLabelProps$1;
 declare const FormLabel: _chakra_ui_system_dist_system_types.ComponentWithAs<"label", FormLabelProps$1>;
@@ -851,7 +893,7 @@ type InfoSelectProps<T> = {
  */
 declare function InfoSelect<T extends {
     key: string;
-}>({ placeholder, width, height, onChange, value, isLabelSrOnly, defaultValue, ...props }: InfoSelectProps<T>): JSX.Element;
+}>({ placeholder, width, height, onChange, value, isLabelSrOnly, defaultValue, ...props }: InfoSelectProps<T>): React__default.JSX.Element;
 
 type InputProps = Exclude<InputProps$1, "variant" | "size"> & {
     /** The input's label */
@@ -928,7 +970,7 @@ declare const ListBox: _chakra_ui_system_dist_system_types.ComponentWithAs<"ul",
  */
 declare function SelectItemLabel({ children }: {
     children: React__default.ReactNode;
-}): JSX.Element;
+}): React__default.JSX.Element;
 /**
  * Renders a description for a SelectItem.
  *
@@ -936,7 +978,7 @@ declare function SelectItemLabel({ children }: {
  */
 declare function SelectItemDescription({ children, }: {
     children: React__default.ReactNode;
-}): JSX.Element;
+}): React__default.JSX.Element;
 
 type NativeSelectProps = Exclude<SelectProps, "colorScheme" | "variant" | "size"> & {
     label?: string;
@@ -1142,7 +1184,7 @@ type InfoTagProps = TagProps;
  *
  * @see https://spor.vy.no/komponenter/linjetags
  */
-declare const InfoTag: ({ variant, size, title, description, }: InfoTagProps) => JSX.Element;
+declare const InfoTag: ({ variant, size, title, description, }: InfoTagProps) => React__default.JSX.Element;
 
 type LineIconProps = BoxProps & {
     variant: TagProps["variant"];
@@ -1165,7 +1207,7 @@ type LineIconProps = BoxProps & {
  *
  * @see https://spor.vy.no/komponenter/linjetags
  */
-declare const LineIcon: ({ variant, size, sx, ...rest }: LineIconProps) => JSX.Element | null;
+declare const LineIcon: ({ variant, size, sx, ...rest }: LineIconProps) => React__default.JSX.Element | null;
 
 type TravelTagProps = TagProps & BoxProps & {
     deviationLevel?: "critical" | "major" | "minor" | "info" | "none";
@@ -1225,7 +1267,7 @@ type ColorInlineLoaderProps = Exclude<BoxProps, "children">;
  *
  * This component should only be used on light backgrounds with low saturation (e.g. white, light grey etc.). For colored backgrounds, please use the LightInlineLoader component.
  */
-declare const ColorInlineLoader: ({ width, maxWidth, ...props }: ColorInlineLoaderProps) => JSX.Element;
+declare const ColorInlineLoader: ({ width, maxWidth, ...props }: ColorInlineLoaderProps) => React__default.JSX.Element;
 
 type SpinnerProps = BoxProps;
 type ColorSpinnerProps = SpinnerProps;
@@ -1244,23 +1286,23 @@ type ColorSpinnerProps = SpinnerProps;
  *   Hold your horses
  * </ColorSpinner>
  */
-declare const ColorSpinner: ({ children, width, maxWidth, ...props }: SpinnerProps) => JSX.Element;
+declare const ColorSpinner: ({ children, width, maxWidth, ...props }: SpinnerProps) => React__default.JSX.Element;
 
 type ContentLoaderProps = BoxProps;
 /**
  * ContentLoader is a component that renders a loading animation.
  * It should mostly be used for
  */
-declare const ContentLoader: ({ children, ...props }: ContentLoaderProps) => JSX.Element;
+declare const ContentLoader: ({ children, ...props }: ContentLoaderProps) => React__default.JSX.Element;
 
 type DarkFullScreenLoaderProps = BoxProps;
-declare const DarkFullScreenLoader: ({ width, maxWidth, ...props }: DarkFullScreenLoaderProps) => JSX.Element;
+declare const DarkFullScreenLoader: ({ width, maxWidth, ...props }: DarkFullScreenLoaderProps) => React__default.JSX.Element;
 
 type DarkInlineLoaderProps = Exclude<BoxProps, "children">;
 /**
  * Loading component that works well in bounded contexts, like inside a button.
  */
-declare const DarkInlineLoader: ({ width, maxWidth, ...props }: DarkInlineLoaderProps) => JSX.Element;
+declare const DarkInlineLoader: ({ width, maxWidth, ...props }: DarkInlineLoaderProps) => React__default.JSX.Element;
 
 type DarkSpinnerProps = BoxProps;
 /** A circular spinner
@@ -1278,16 +1320,16 @@ type DarkSpinnerProps = BoxProps;
  *   Hold your horses
  * </DarkSpinner>
  */
-declare const DarkSpinner: ({ children, width, maxWidth, ...props }: DarkSpinnerProps) => JSX.Element;
+declare const DarkSpinner: ({ children, width, maxWidth, ...props }: DarkSpinnerProps) => React__default.JSX.Element;
 
 type LightFullScreenLoaderProps = BoxProps;
-declare const LightFullScreenLoader: ({ width, maxWidth, ...props }: LightFullScreenLoaderProps) => JSX.Element;
+declare const LightFullScreenLoader: ({ width, maxWidth, ...props }: LightFullScreenLoaderProps) => React__default.JSX.Element;
 
 type LightInlineLoaderProps = Exclude<BoxProps, "children">;
 /**
  * Loading component that works well in bounded contexts, like inside a button.
  */
-declare const LightInlineLoader: ({ width, maxWidth, ...props }: LightInlineLoaderProps) => JSX.Element;
+declare const LightInlineLoader: ({ width, maxWidth, ...props }: LightInlineLoaderProps) => React__default.JSX.Element;
 
 type LightSpinnerProps = BoxProps;
 /** A circular spinner
@@ -1305,7 +1347,7 @@ type LightSpinnerProps = BoxProps;
  *   Hold your horses
  * </LightSpinner>
  */
-declare const LightSpinner: ({ children, width, maxWidth, ...props }: LightSpinnerProps) => JSX.Element;
+declare const LightSpinner: ({ children, width, maxWidth, ...props }: LightSpinnerProps) => React__default.JSX.Element;
 
 type ProgressBarProps = BoxProps & {
     /** The percentage of progress made.
@@ -1361,7 +1403,7 @@ type ProgressBarProps = BoxProps & {
  * <ProgressBar value={50} aria-label="Loading..." />
  * ```
  */
-declare const ProgressBar: ({ value, label, labelRotationDelay, height, width, "aria-label": ariaLabel, ...rest }: ProgressBarProps) => JSX.Element;
+declare const ProgressBar: ({ value, label, labelRotationDelay, height, width, "aria-label": ariaLabel, ...rest }: ProgressBarProps) => React__default.JSX.Element;
 
 type ProgressLoaderProps = BoxProps & {
     /** The percentage of progress made.
@@ -1413,7 +1455,7 @@ type ProgressLoaderProps = BoxProps & {
  * <ProgressLoader value={50} aria-label="Fetching your trips..." />
  * ```
  */
-declare const ProgressLoader: ({ value, label, labelRotationDelay, "aria-label": ariaLabel, width, ...rest }: ProgressLoaderProps) => JSX.Element;
+declare const ProgressLoader: ({ value, label, labelRotationDelay, "aria-label": ariaLabel, width, ...rest }: ProgressLoaderProps) => React__default.JSX.Element;
 
 type SkeletonProps = BoxProps & {
     isLoaded?: boolean;
@@ -1427,13 +1469,13 @@ type SkeletonCircleProps = BoxProps;
 /**
  * SkeletonCircle renders a loading animation for a given circle. It works great as a placeholder to avoid layout shifts.
  */
-declare const SkeletonCircle: (props: SkeletonCircleProps) => JSX.Element;
+declare const SkeletonCircle: (props: SkeletonCircleProps) => React__default.JSX.Element;
 
 type SkeletonTextProps = BoxProps;
 /**
  * SkeletonText renders a loading animation for a given text. It works great as a placeholder to avoid layout shifts.
  */
-declare const SkeletonText: (props: SkeletonTextProps) => JSX.Element;
+declare const SkeletonText: (props: SkeletonTextProps) => React__default.JSX.Element;
 
 type VyLogoProps = {
     /** The color of the logo
@@ -1443,7 +1485,7 @@ type VyLogoProps = {
      */
     colorScheme: "light" | "dark";
 } & BoxProps;
-declare const VyLogo: ({ colorScheme, ...boxProps }: VyLogoProps) => JSX.Element;
+declare const VyLogo: ({ colorScheme, ...boxProps }: VyLogoProps) => React__default.JSX.Element;
 
 type JumpButtonProps = BoxProps & {
     onClick: () => void;
@@ -1463,7 +1505,7 @@ type JumpButtonProps = BoxProps & {
  * <JumpButton direction="forward" onClick={onGoForward} />
  * ```
  */
-declare const JumpButton: ({ direction, isDisabled, size, ...props }: JumpButtonProps) => JSX.Element;
+declare const JumpButton: ({ direction, isDisabled, size, ...props }: JumpButtonProps) => React__default.JSX.Element;
 
 type PlayPauseButtonProps = BoxProps & {
     onClick: () => void;
@@ -1483,7 +1525,7 @@ type PlayPauseButtonProps = BoxProps & {
  * <PlayPauseButton isPlaying={isPlaying} onClick={onPlaybackClick} />
  * ```
  */
-declare const PlayPauseButton: ({ size, isPlaying, isDisabled, ...props }: PlayPauseButtonProps) => JSX.Element;
+declare const PlayPauseButton: ({ size, isPlaying, isDisabled, ...props }: PlayPauseButtonProps) => React__default.JSX.Element;
 
 type SkipButtonProps = BoxProps & {
     onClick: () => void;
@@ -1503,7 +1545,7 @@ type SkipButtonProps = BoxProps & {
  * <SkipButton direction="forward" onClick={onNextChapter} />
  * ```
  */
-declare const SkipButton: ({ direction, isDisabled, size, ...props }: SkipButtonProps) => JSX.Element;
+declare const SkipButton: ({ direction, isDisabled, size, ...props }: SkipButtonProps) => React__default.JSX.Element;
 
 type ModalHeaderProps = ModalHeaderProps$1 & {
     size?: "sm" | "lg";
@@ -1516,7 +1558,7 @@ type ModalHeaderProps = ModalHeaderProps$1 & {
 declare const ModalHeader: _chakra_ui_system_dist_system_types.ComponentWithAs<"header", ModalHeaderProps>;
 
 type DrawerProps = DrawerProps$1;
-declare const Drawer: (props: DrawerProps) => JSX.Element;
+declare const Drawer: (props: DrawerProps) => React__default.JSX.Element;
 declare const DrawerContent: _chakra_ui_system_dist_system_types.ComponentWithAs<any, DrawerContentProps>;
 
 type SimpleDrawerProps = {
@@ -1536,14 +1578,14 @@ type SimpleDrawerProps = {
  *
  * For more advanced use cases, see the [Drawer](./Drawer.tsx) component.
  */
-declare const SimpleDrawer: ({ placement, children, title, ...props }: SimpleDrawerProps) => JSX.Element;
+declare const SimpleDrawer: ({ placement, children, title, ...props }: SimpleDrawerProps) => React__default.JSX.Element;
 
 type PopoverWizardProps = {
     /** Each child will be their own step */
     children: React.ReactNode;
 };
 /** A popover wizard is great for showing new features one by one */
-declare const PopoverWizardBody: ({ children }: PopoverWizardProps) => JSX.Element;
+declare const PopoverWizardBody: ({ children }: PopoverWizardProps) => React.JSX.Element;
 
 type SimplePopoverProps = PopoverProps & {
     /**
@@ -1574,7 +1616,7 @@ type SimplePopoverProps = PopoverProps & {
     borderRadius?: string;
 };
 /** A basic popover component for basic content */
-declare const SimplePopover: ({ children, triggerElement, onClose, isOpen, defaultIsOpen, placement, size, withCloseButton, borderRadius, ...props }: SimplePopoverProps) => JSX.Element;
+declare const SimplePopover: ({ children, triggerElement, onClose, isOpen, defaultIsOpen, placement, size, withCloseButton, borderRadius, ...props }: SimplePopoverProps) => React__default.JSX.Element;
 
 type WizardPopoverProps = PopoverProps & {
     /** Steps in the wizard. Each item is its own step */
@@ -1607,7 +1649,7 @@ type WizardPopoverProps = PopoverProps & {
  * </WizardPopover>
  * ```
  */
-declare const WizardPopover: ({ children, triggerElement, withCloseButton, }: WizardPopoverProps) => JSX.Element;
+declare const WizardPopover: ({ children, triggerElement, withCloseButton, }: WizardPopoverProps) => React.JSX.Element;
 
 type SporProviderProps = ChakraProviderProps & {
     language?: Language;
@@ -1648,7 +1690,7 @@ type SporProviderProps = ChakraProviderProps & {
  * );
  * ```
  */
-declare const SporProvider: ({ theme, language, children, ...props }: SporProviderProps) => JSX.Element;
+declare const SporProvider: ({ theme, language, children, ...props }: SporProviderProps) => React__default.JSX.Element;
 
 type StepperProps = {
     onClick: (clickedStep: number) => void;
@@ -1671,13 +1713,13 @@ type StepperProps = {
  * />
  * ```
  **/
-declare const Stepper: ({ onClick, steps, activeStep: activeStepAsStringOrNumber, title, colorScheme, }: StepperProps) => JSX.Element;
+declare const Stepper: ({ onClick, steps, activeStep: activeStepAsStringOrNumber, title, colorScheme, }: StepperProps) => React__default.JSX.Element;
 
 type StepperStepProps = {
     children: React__default.ReactNode;
     stepNumber: number;
 };
-declare const StepperStep: ({ children, stepNumber }: StepperStepProps) => JSX.Element;
+declare const StepperStep: ({ children, stepNumber }: StepperStepProps) => React__default.JSX.Element;
 
 type TabsProps = Exclude<TabsProps$1, "colorScheme" | "variant" | "orientation" | "size"> & {
     colorScheme: "dark" | "light" | "green" | "grey";
@@ -2032,7 +2074,7 @@ declare const theme: {
                     color: string;
                     fontWeight: string;
                 };
-                additional: ({ colorMode }: _chakra_ui_styled_system.StyleFunctionProps) => {
+                additional: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     _hover: {
                         boxShadow: string;
                     };
@@ -2048,7 +2090,7 @@ declare const theme: {
                     fontWeight: string;
                     boxShadow: string;
                 };
-                ghost: () => {
+                ghost: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     _hover: {
                         backgroundColor: string;
                         _disabled: {
@@ -2507,7 +2549,7 @@ declare const theme: {
             } | undefined;
         };
         Datepicker: {
-            baseStyle?: {
+            baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
                 wrapper: {
                     backgroundColor: string;
                     boxShadow: string;
@@ -2540,6 +2582,9 @@ declare const theme: {
                     color: string;
                     margin: number;
                 };
+                dateTimeSegment: {
+                    color: string;
+                };
                 calendarTriggerButton: {
                     _invalid: {
                         boxShadow: string;
@@ -2547,6 +2592,7 @@ declare const theme: {
                     _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;
                     boxShadow: string;
                     width: number;
                     display: string;
@@ -2564,6 +2610,19 @@ declare const theme: {
                         backgroundColor: string;
                     };
                 };
+                arrow: {
+                    [x: string]: string;
+                };
+                calendar: {
+                    backgroundColor: string;
+                    color: string;
+                };
+                weekdays: {
+                    color: string;
+                };
+                weekend: {
+                    color: string;
+                };
                 dateCell: {
                     _active: {
                         backgroundColor: string;
@@ -2608,10 +2667,10 @@ declare const theme: {
                         backgroundColor: string;
                     };
                 };
-            } | undefined;
+            }) | undefined;
             sizes?: {
                 [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
-                    keys: ("dateCell" | "calendarTriggerButton" | "inputLabel" | "wrapper")[];
+                    keys: ("dateCell" | "weekdays" | "weekend" | "calendarTriggerButton" | "dateTimeSegment" | "calendar" | "inputLabel" | "wrapper" | "arrow")[];
                 }>;
             } | undefined;
             variants?: {
@@ -2631,7 +2690,7 @@ declare const theme: {
                 variant?: "simple" | "with-trigger" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
-            parts: ("dateCell" | "calendarTriggerButton" | "inputLabel" | "wrapper")[];
+            parts: ("dateCell" | "weekdays" | "weekend" | "calendarTriggerButton" | "dateTimeSegment" | "calendar" | "inputLabel" | "wrapper" | "arrow")[];
         };
         Drawer: {
             baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
@@ -3720,7 +3779,7 @@ declare const theme: {
             } | undefined;
             variants?: {
                 [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
-                    keys: ("body" | "footer" | "header" | "content" | "closeButton" | "popper" | "arrow")[];
+                    keys: ("body" | "footer" | "header" | "content" | "closeButton" | "arrow" | "popper")[];
                 }>;
             } | undefined;
             defaultProps?: {
@@ -3728,7 +3787,7 @@ declare const theme: {
                 variant?: string | number | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
-            parts: ("body" | "footer" | "header" | "content" | "closeButton" | "popper" | "arrow")[];
+            parts: ("body" | "footer" | "header" | "content" | "closeButton" | "arrow" | "popper")[];
         };
         Radio: {
             baseStyle?: {
@@ -4004,7 +4063,7 @@ declare const theme: {
             }) | undefined;
             sizes?: {
                 [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
-                    keys: ("title" | "container" | "closeButton" | "root" | "innerContainer" | "stepNumber" | "backButton" | "stepCounter" | "stepContainer" | "stepButton" | "stepTitle")[];
+                    keys: ("title" | "container" | "closeButton" | "root" | "innerContainer" | "backButton" | "stepCounter" | "stepContainer" | "stepButton" | "stepNumber" | "stepTitle")[];
                 }>;
             } | undefined;
             variants?: {
@@ -4065,7 +4124,7 @@ declare const theme: {
                 variant?: "disabled" | "active" | "completed" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
-            parts: ("title" | "container" | "closeButton" | "root" | "innerContainer" | "stepNumber" | "backButton" | "stepCounter" | "stepContainer" | "stepButton" | "stepTitle")[];
+            parts: ("title" | "container" | "closeButton" | "root" | "innerContainer" | "backButton" | "stepCounter" | "stepContainer" | "stepButton" | "stepNumber" | "stepTitle")[];
         };
         Switch: {
             baseStyle?: {
@@ -4456,6 +4515,7 @@ declare const theme: {
                     transitionDuration: string;
                     width: string;
                     height: string;
+                    whiteSpace: string;
                 } | {
                     _selected: {
                         backgroundColor: string;
@@ -4530,6 +4590,7 @@ declare const theme: {
                     transitionDuration: string;
                     width: string;
                     height: string;
+                    whiteSpace: string;
                 };
                 tabpanel: {};
             }) | undefined;
@@ -5135,18 +5196,29 @@ declare const theme: {
         Breadcrumb: {
             baseStyle?: {
                 link: {
+                    [x: string]: string | {
+                        cursor: string;
+                        _hover: {
+                            [x: string]: string;
+                        };
+                        _focusVisible: {
+                            boxShadow: string;
+                        };
+                    };
                     transitionProperty: string;
                     transitionDuration: string;
                     transitionTimingFunction: string;
-                    cursor: string;
-                    textDecoration: string;
                     outline: string;
                     color: string;
-                    _hover: {
-                        textDecoration: string;
-                    };
-                    _focusVisible: {
-                        boxShadow: string;
+                    textDecoration: string;
+                    "&:not([aria-current=page])": {
+                        cursor: string;
+                        _hover: {
+                            [x: string]: string;
+                        };
+                        _focusVisible: {
+                            boxShadow: string;
+                        };
                     };
                 };
             } | undefined;
@@ -6123,6 +6195,9 @@ declare const theme: {
         Tag: {
             baseStyle?: {
                 container: {
+                    [x: string]: string | number | {
+                        [x: string]: string;
+                    };
                     fontWeight: string;
                     lineHeight: number;
                     outline: number;
@@ -6130,8 +6205,12 @@ declare const theme: {
                     bg: string;
                     boxShadow: string;
                     borderRadius: string;
+                    minH: string;
+                    minW: string;
+                    fontSize: string;
+                    px: string;
                     _focusVisible: {
-                        boxShadow: string;
+                        [x: string]: string;
                     };
                 };
                 label: {
@@ -6166,10 +6245,7 @@ declare const theme: {
             sizes?: {
                 sm: {
                     container: {
-                        minH: string;
-                        minW: string;
-                        fontSize: string;
-                        px: string;
+                        [x: string]: string;
                     };
                     closeButton: {
                         marginEnd: string;
@@ -6178,18 +6254,12 @@ declare const theme: {
                 };
                 md: {
                     container: {
-                        minH: string;
-                        minW: string;
-                        fontSize: string;
-                        px: string;
+                        [x: string]: string;
                     };
                 };
                 lg: {
                     container: {
-                        minH: string;
-                        minW: string;
-                        fontSize: string;
-                        px: string;
+                        [x: string]: string;
                     };
                 };
             } | undefined;
@@ -6643,10 +6713,18 @@ declare const theme: {
                 _light: string;
                 _dark: string;
             };
+            "chakra-inverse-text": {
+                _light: string;
+                _dark: string;
+            };
             "chakra-subtle-bg": {
                 _light: string;
                 _dark: string;
             };
+            "chakra-subtle-text": {
+                _light: string;
+                _dark: string;
+            };
             "chakra-placeholder-color": {
                 _light: string;
                 _dark: string;
@@ -6773,7 +6851,7 @@ type HeadingProps = Exclude<HeadingProps$1, "textStyle"> & {
  * <Heading as="h1">Page heading</Heading>
  * ```
  */
-declare const Heading: ({ variant, as, ...props }: any) => JSX.Element;
+declare const Heading: ({ variant, as, ...props }: any) => React__default.JSX.Element;
 
 type TextProps = Omit<TextProps$1, "textStyle"> & {
     /** The size and style of the text.
@@ -6790,4 +6868,4 @@ type TextProps = Omit<TextProps$1, "textStyle"> & {
  */
 declare const Text: _chakra_ui_system_dist_system_types.ComponentWithAs<"p", TextProps>;
 
-export { Accordion, AccordionProps, AttachedInputs, Badge, BadgeProps, Button, ButtonGroup, ButtonGroupProps, ButtonProps, Card, CardProps, CardSelect, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChoiceChip, ChoiceChipProps, ClosableAlert, CloseButton, CloseButtonProps, Code, CodeProps, ColorInlineLoader, ColorInlineLoaderProps, ColorSpinner, ColorSpinnerProps, ContentLoader, ContentLoaderProps, DarkFullScreenLoader, DarkInlineLoader, DarkInlineLoaderProps, DarkSpinner, DarkSpinnerProps, DatePicker, DateRangePicker, Divider, DividerProps, Drawer, DrawerContent, ModalHeader as DrawerHeader, Expandable, ExpandableAlert, ExpandableItem, ExpandableItemProps, FloatingActionButton, FormControl, FormControlProps, FormErrorMessage, FormErrorMessageProps, FormLabel, FormLabelProps, Heading, HeadingProps, IconButton, IconButtonProps, InfoSelect, InfoTag, InfoTagProps, Input, InputElementProps, InputLeftElement, InputProps, InputRightElement, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightInlineLoaderProps, LightSpinner, LightSpinnerProps, LineIcon, LineIconProps, ListBox, ModalHeader, ModalHeaderProps, NativeSelect, NativeSelectProps, PasswordInput, PasswordInputProps, PhoneNumberInput, PlayPauseButton, PopoverWizardBody, PopoverWizardProps, ProgressBar, ProgressLoader, Radio, RadioGroup, RadioGroupProps, RadioProps, SearchInput, SearchInputProps, SelectItemDescription, SelectItemLabel, SimpleDrawer, SimpleDrawerProps, SimplePopover, Skeleton, SkeletonCircle, SkeletonCircleProps, SkeletonProps, SkeletonText, SkeletonTextProps, SkipButton, SpinnerProps, SporProvider, Stack, StackProps, StaticAlert, Stepper, StepperStep, Switch, SwitchProps, Table, TableProps, Tabs, TabsProps, Text, TextLink, TextProps, Textarea, TextareaProps, TimePicker, ToastOptions, Translations, TravelTag, TravelTagProps, VyLogo, VyLogoProps, WizardPopover, WizardPopoverProps, createTexts, fontFaces, theme, useToast, useTranslation };
+export { Accordion, AccordionProps, AttachedInputs, Badge, BadgeProps, Button, ButtonGroup, ButtonGroupProps, ButtonProps, Card, CardProps, CardSelect, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChoiceChip, ChoiceChipProps, ClosableAlert, CloseButton, CloseButtonProps, Code, CodeProps, ColorInlineLoader, ColorInlineLoaderProps, ColorSpinner, ColorSpinnerProps, ContentLoader, ContentLoaderProps, Counter, DarkFullScreenLoader, DarkInlineLoader, DarkInlineLoaderProps, DarkSpinner, DarkSpinnerProps, DatePicker, DateRangePicker, Divider, DividerProps, Drawer, DrawerContent, ModalHeader as DrawerHeader, Expandable, ExpandableAlert, ExpandableItem, ExpandableItemProps, FloatingActionButton, FormControl, FormControlProps, FormErrorMessage, FormErrorMessageProps, FormLabel, FormLabelProps, Heading, HeadingProps, IconButton, IconButtonProps, InfoSelect, InfoTag, InfoTagProps, Input, InputElementProps, InputLeftElement, InputProps, InputRightElement, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightInlineLoaderProps, LightSpinner, LightSpinnerProps, LineIcon, LineIconProps, ListBox, ModalHeader, ModalHeaderProps, NativeSelect, NativeSelectProps, PasswordInput, PasswordInputProps, PhoneNumberInput, PlayPauseButton, PopoverWizardBody, PopoverWizardProps, ProgressBar, ProgressLoader, Radio, RadioGroup, RadioGroupProps, RadioProps, SearchInput, SearchInputProps, SelectItemDescription, SelectItemLabel, SimpleDrawer, SimpleDrawerProps, SimplePopover, Skeleton, SkeletonCircle, SkeletonCircleProps, SkeletonProps, SkeletonText, SkeletonTextProps, SkipButton, SpinnerProps, SporProvider, Stack, StackProps, StaticAlert, Stepper, StepperStep, Switch, SwitchProps, Table, TableProps, Tabs, TabsProps, Text, TextLink, TextProps, Textarea, TextareaProps, TimePicker, ToastOptions, Translations, TravelTag, TravelTagProps, VyLogo, VyLogoProps, WizardPopover, WizardPopoverProps, createTexts, fontFaces, theme, useToast, useTranslation };