@vygruppen/spor-react 9.16.0 → 10.0.0

package/dist/index.d.ts

@@ -223,7 +223,6 @@ type AccordionProps = Omit<AccordionProps$1, "variant" | "size"> & {
      * - `floating` renders a version with a drop shadow
      */
     variant?: "ghost" | "base" | "floating";
-    size?: "sm" | "md" | "lg";
     /** The margin between accordion items */
     spacing?: StackProps["spacing"];
 };
@@ -240,10 +239,7 @@ type ExpandableProps = Omit<AccordionProps, "title" | "index" | "defaultIndex" |
     /**
      * Icon shown to the left of the title
      *
-     * Make sure it's the outlined version of the icon.
-     *
-     * If the size is set to `sm` or `md` the icon should be 24px.
-     * If the size is set to `lg`, the icon should be 30px.
+     * Make sure it's the 24px outlined version of the icon
      */
     leftIcon?: React.ReactNode;
     /** Controlled value of whether the accordion is open or not */
@@ -260,12 +256,12 @@ type ExpandableProps = Omit<AccordionProps, "title" | "index" | "defaultIndex" |
  * If you want several expandables in a row, use the `Accordion` and `ExpandableItem` components instead.
  *
  * ```tsx
- * <Expandable title="Click for more" variant="base" size="lg">
+ * <Expandable title="Click for more" variant="base">
  *   <Text>MORE! 🎉</Text>
  * </Expandable>
  * ```
  */
-declare const Expandable: ({ children, headingLevel, title, leftIcon, size, defaultOpen, isOpen, onChange, ...rest }: ExpandableProps) => React.JSX.Element;
+declare const Expandable: ({ children, headingLevel, title, leftIcon, defaultOpen, isOpen, onChange, ...rest }: ExpandableProps) => React.JSX.Element;
 type ExpandableItemProps = Omit<AccordionItemProps, "title"> & {
     /** The hidden content */
     children: React.ReactNode;
@@ -276,7 +272,7 @@ type ExpandableItemProps = Omit<AccordionItemProps, "title"> & {
     /**
      * Icon shown to the left of the title
      *
-     * Make sure it's the 30px outlined version of the icon
+     * Make sure it's the 24px outlined version of the icon
      */
     leftIcon?: React.ReactNode;
 };
@@ -284,7 +280,7 @@ type ExpandableItemProps = Omit<AccordionItemProps, "title"> & {
  * An item in a set of Expandables. Must be wrapped in an `<Accordion>` component.
  *
  * ```tsx
- * <Accordion variant="ghost" size="md">
+ * <Accordion variant="ghost">
  *  <ExpandableItem title="Is Spor easy?" headingLevel="h3">
  *    Yes
  *  </ExpandableItem>
@@ -557,46 +553,6 @@ type FloatingActionButtonProps = BoxProps & {
  */
 declare const FloatingActionButton: ComponentWithAs<ComponentWithAs<"a" | "button", {}>, FloatingActionButtonProps>;
 
-type CardProps = Exclude<BoxProps, "size"> & {
-    size?: "sm" | "lg";
-    children: React.ReactNode;
-    colorScheme: "white" | "grey" | "blue" | "green" | "teal" | "yellow" | "orange" | "red";
-};
-/**
- * Renders a card.
- *
- * The most basic version looks like this:
- *
- * ```tsx
- * <Card>
- *   Content
- * </Card>
- * ```
- *
- * There are lots of color schemes available. You can also set the size as either `sm` or `lg`. The default is `sm`.
- *
- * ```tsx
- * <Card colorScheme="orange" size="lg">
- *   A smaller card
- * </Card>
- * ```
- *
- * Cards are not interactive by default. If you specify the `as` prop to be a link or a button, you can make them work as links or buttons respectively. This will also give it a drop shadow.
- *
- * ```tsx
- * <Card colorScheme="blue" as="button" onClick={handleClick}>
- *   Click for profit
- * </Card>
- * <Card colorScheme="green" as="a" href="https://vy.no">
- *   Go to start
- * </Card>
- * ```
- */
-/**
- * @deprecated Card is deprecated. Use `StaticCard` or `PressableCard` instead.
- */
-declare const Card: _chakra_ui_system_dist_system_types.ComponentWithAs<As, CardProps>;
-
 /**
  * A date picker component.
  *
@@ -1477,43 +1433,28 @@ type TextareaProps = Exclude<TextareaProps$1, "variant" | "size"> & {
  */
 declare const Textarea: _chakra_ui_system_dist_system_types.ComponentWithAs<"textarea", TextareaProps>;
 
-type Variant =
-  | "local-train"
-  | "region-train"
-  | "region-express-train"
-  | "long-distance-train"
-  | "airport-express-train"
-  | "vy-bus"
-  | "local-bus"
-  | "ferry"
-  | "subway"
-  | "tram"
-  | "alt-transport"
-  | "walk";
-
+type Variant = "local-train" | "region-train" | "region-express-train" | "long-distance-train" | "airport-express-train" | "vy-bus" | "local-bus" | "ferry" | "subway" | "tram" | "alt-transport" | "walk";
 type Size = "sm" | "md" | "lg";
-
 type TagProps = VariantProps$1 & {
-  size: Size;
-  title: string;
-  description?: string;
+    size: Size;
+    title: string;
+    description?: string;
 };
-
 type DefaultVariantProps$1 = {
-  variant: Variant;
+    variant: Variant;
 };
-type CustomVariantProps$1 = {
-  variant: "custom";
-  /** When variant="custom", the foreground color of the tag */
-  foregroundColor: string;
-  /** When variant="custom", the background color of the tag */
-  backgroundColor: string;
-  /** When variant="custom", this is the icon you want to display.
-   * It should be one of the other variants
-   */
-  customIconVariant: Variant;
+type CustomVariantProps = {
+    variant: "custom";
+    /** When variant="custom", the foreground color of the tag */
+    foregroundColor: string;
+    /** When variant="custom", the background color of the tag */
+    backgroundColor: string;
+    /** When variant="custom", this is the icon you want to display.
+     * It should be one of the other variants
+     */
+    customIconVariant: Variant;
 };
-type VariantProps$1 = DefaultVariantProps$1 | CustomVariantProps$1;
+type VariantProps$1 = DefaultVariantProps$1 | CustomVariantProps;
 
 type InfoTagProps = TagProps;
 /**
@@ -1554,12 +1495,6 @@ type DefaultVariants = Exclude<TagProps["variant"], "custom">;
 type DefaultVariantProps = {
     variant: DefaultVariants;
 };
-type CustomVariantProps = {
-    variant: "custom";
-    customIconVariant: DefaultVariants;
-    foregroundColor: string;
-    backgroundColor: string;
-};
 type VariantProps = DefaultVariantProps | CustomVariantProps;
 type LineIconProps = Exclude<BoxProps, "variant"> & VariantProps & {
     size: TagProps["size"];
@@ -1598,6 +1533,9 @@ declare const LineIcon: ({ variant, size, sx, ...rest }: LineIconProps) => React
 type TravelTagProps = TagProps & BoxProps & {
     deviationLevel?: "critical" | "major" | "minor" | "info" | "none";
     isDisabled?: boolean;
+    foregroundColor?: string;
+    backgroundColor?: string;
+    customIconVariant?: string;
 };
 /**
  * A travel tag component.
@@ -2379,9 +2317,13 @@ declare const theme: {
                         outlineOffset: string;
                     };
                     textAlign: string;
+                    fontSize: ("mobile.sm" | "desktop.sm" | null)[];
                     fontFamily: string;
                     fontWeight: string;
                     outlineOffset: string;
+                    paddingX: (number | null)[];
+                    paddingY: (number | null)[];
+                    minHeight: (number | null)[];
                     color: string;
                     transitionProperty: string;
                     transitionDuration: string;
@@ -2391,49 +2333,18 @@ declare const theme: {
                 };
                 panel: {
                     paddingY: number;
+                    paddingX: (number | null)[];
                     borderBottomRadius: string;
+                    fontSize: ("mobile.sm" | "desktop.sm" | null)[];
                 };
                 icon: {
                     fontSize: string;
                 };
             }) | undefined;
             sizes?: {
-                sm: {
-                    button: {
-                        fontSize: ("mobile.xs" | "desktop.xs" | null)[];
-                        paddingX: number;
-                        paddingY: number;
-                        minHeight: number;
-                    };
-                    panel: {
-                        fontSize: ("mobile.xs" | "desktop.xs" | null)[];
-                        paddingX: number;
-                    };
-                };
-                md: {
-                    button: {
-                        fontSize: ("mobile.sm" | "desktop.sm" | null)[];
-                        paddingX: number;
-                        paddingY: number;
-                        minHeight: number;
-                    };
-                    panel: {
-                        fontSize: ("mobile.sm" | "desktop.sm" | null)[];
-                        paddingX: number;
-                    };
-                };
-                lg: {
-                    button: {
-                        fontSize: ("mobile.sm" | "desktop.sm" | null)[];
-                        paddingX: number;
-                        paddingY: number;
-                        minHeight: number;
-                    };
-                    panel: {
-                        fontSize: ("mobile.sm" | "desktop.sm" | null)[];
-                        paddingX: number;
-                    };
-                };
+                [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
+                    keys: ("button" | "container" | "icon" | "root" | "panel")[];
+                }>;
             } | undefined;
             variants?: {
                 ghost: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
@@ -2509,7 +2420,7 @@ declare const theme: {
                 };
             } | undefined;
             defaultProps?: {
-                size?: "sm" | "md" | "lg" | undefined;
+                size?: string | number | undefined;
                 variant?: "base" | "ghost" | "floating" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
@@ -2809,588 +2720,115 @@ declare const theme: {
                     paddingY: number;
                     fontSize: string;
                     fontWeight: string;
-                };
-            } | undefined;
-            variants?: {
-                primary: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
-                    _hover: {
-                        backgroundColor: string;
-                    };
-                    _active: {
-                        backgroundColor: string;
-                    };
-                    color: string;
-                    backgroundColor: string;
-                };
-                secondary: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
-                    _hover: {
-                        backgroundColor: string;
-                    };
-                    _active: {
-                        backgroundColor: string;
-                    };
-                    color: string;
-                    backgroundColor: string;
-                };
-                tertiary: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
-                    _hover: {
-                        outlineWidth: string;
-                        outlineColor: string;
-                        outlineStyle: string;
-                        outlineOffset: string;
-                    } | {
-                        outline: string;
-                        outlineColor: string;
-                    };
-                    _active: {
-                        backgroundColor: string;
-                        outlineWidth: string;
-                        outlineColor: string;
-                        outlineStyle: string;
-                        outlineOffset: string;
-                    } | {
-                        backgroundColor: string;
-                        outline: string;
-                        outlineColor: string;
-                    };
-                    outlineWidth: string;
-                    outlineColor: string;
-                    outlineStyle: string;
-                    outlineOffset: string;
-                    color: string;
-                    backgroundColor: string;
-                } | {
-                    _hover: {
-                        outlineWidth: string;
-                        outlineColor: string;
-                        outlineStyle: string;
-                        outlineOffset: string;
-                    } | {
-                        outline: string;
-                        outlineColor: string;
-                    };
-                    _active: {
-                        backgroundColor: string;
-                        outlineWidth: string;
-                        outlineColor: string;
-                        outlineStyle: string;
-                        outlineOffset: string;
-                    } | {
-                        backgroundColor: string;
-                        outline: string;
-                        outlineColor: string;
-                    };
-                    outline: string;
-                    outlineColor: string;
-                    color: string;
-                    backgroundColor: string;
-                };
-                ghost: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
-                    _hover: {
-                        _disabled: {
-                            color: string;
-                        };
-                        backgroundColor: string;
-                    };
-                    _active: {
-                        backgroundColor: string;
-                    };
-                    color: string;
-                    backgroundColor: string;
-                };
-                floating: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
-                    boxShadow: string;
-                    _hover: {
-                        boxShadow: string;
-                        outline: string;
-                        outlineColor: string;
-                        backgroundColor: string;
-                    };
-                    _active: {
-                        boxShadow: string;
-                        backgroundColor: string;
-                    };
-                    outline: string;
-                    outlineColor: string;
-                    backgroundColor: string;
-                };
-            } | undefined;
-            defaultProps?: {
-                size?: "sm" | "md" | "lg" | "xs" | undefined;
-                variant?: "ghost" | "floating" | "primary" | "secondary" | "tertiary" | undefined;
-                colorScheme?: string | undefined;
-            } | undefined;
-        };
-        Card: {
-            baseStyle?: ((props: any) => {
-                "button&, a&, label&, &.is-clickable": {
-                    _hover: {
-                        outline: string;
-                        outlineColor: string;
-                        backgroundColor: string;
-                    } | {
-                        outlineColor: string;
-                        backgroundColor?: undefined;
-                    } | {
-                        backgroundColor: string;
-                        outlineColor: string;
-                    };
-                    _active: {
-                        outline: string;
-                        outlineColor: string;
-                        backgroundColor: string;
-                    } | {
-                        backgroundColor: string;
-                        outlineColor: string;
-                    };
-                    _disabled: {
-                        pointerEvents: string;
-                        color: string;
-                        outlineWidth: string;
-                        outlineColor: string;
-                        outlineStyle: string;
-                        outlineOffset: string;
-                        backgroundColor: string;
-                    } | {
-                        pointerEvents: string;
-                        color: string;
-                        outline: string;
-                        outlineColor: string;
-                        backgroundColor: string;
-                    };
-                    _focusVisible: {
-                        outlineWidth: string;
-                        outlineColor: string;
-                        outlineStyle: string;
-                        outlineOffset: string;
-                    };
-                    outline: string;
-                    outlineColor: string;
-                    backgroundColor?: undefined;
-                } | {
-                    _hover: {
-                        outline: string;
-                        outlineColor: string;
-                        backgroundColor: string;
-                    } | {
-                        outlineColor: string;
-                        backgroundColor?: undefined;
-                    } | {
-                        backgroundColor: string;
-                        outlineColor: string;
-                    };
-                    _active: {
-                        outline: string;
-                        outlineColor: string;
-                        backgroundColor: string;
-                    } | {
-                        backgroundColor: string;
-                        outlineColor: string;
-                    };
-                    _disabled: {
-                        pointerEvents: string;
-                        color: string;
-                        outlineWidth: string;
-                        outlineColor: string;
-                        outlineStyle: string;
-                        outlineOffset: string;
-                        backgroundColor: string;
-                    } | {
-                        pointerEvents: string;
-                        color: string;
-                        outline: string;
-                        outlineColor: string;
-                        backgroundColor: string;
-                    };
-                    _focusVisible: {
-                        outlineWidth: string;
-                        outlineColor: string;
-                        outlineStyle: string;
-                        outlineOffset: string;
-                    };
-                    outlineColor: string;
-                    backgroundColor?: undefined;
-                    outline: string;
-                } | {
-                    _hover: {
-                        outline: string;
-                        outlineColor: string;
-                        backgroundColor: string;
-                    } | {
-                        outlineColor: string;
-                        backgroundColor?: undefined;
-                    } | {
-                        backgroundColor: string;
-                        outlineColor: string;
-                    };
-                    _active: {
-                        outline: string;
-                        outlineColor: string;
-                        backgroundColor: string;
-                    } | {
-                        backgroundColor: string;
-                        outlineColor: string;
-                    };
-                    _disabled: {
-                        pointerEvents: string;
-                        color: string;
-                        outlineWidth: string;
-                        outlineColor: string;
-                        outlineStyle: string;
-                        outlineOffset: string;
-                        backgroundColor: string;
-                    } | {
-                        pointerEvents: string;
-                        color: string;
-                        outline: string;
-                        outlineColor: string;
-                        backgroundColor: string;
-                    };
-                    _focusVisible: {
-                        outlineWidth: string;
-                        outlineColor: string;
-                        outlineStyle: string;
-                        outlineOffset: string;
-                    };
-                    backgroundColor: string;
-                    outlineColor: string;
-                    outline: string;
-                };
-                backgroundColor: string;
-                color: string;
-                outlineWidth: string;
-                outlineColor: string;
-                outlineStyle: string;
-                outlineOffset: string;
-                appearance: string;
-                border: string;
-                overflow: string;
-                fontSize: string;
-                display: string;
-                transitionProperty: string;
-                transitionDuration: string;
-                borderRadius: string;
-            } | {
-                "button&, a&, label&, &.is-clickable": {
-                    _hover: {
-                        outline: string;
-                        outlineColor: string;
-                        backgroundColor: string;
-                    } | {
-                        outlineColor: string;
-                        backgroundColor?: undefined;
-                    } | {
-                        backgroundColor: string;
-                        outlineColor: string;
-                    };
-                    _active: {
-                        outline: string;
-                        outlineColor: string;
-                        backgroundColor: string;
-                    } | {
-                        backgroundColor: string;
-                        outlineColor: string;
-                    };
-                    _disabled: {
-                        pointerEvents: string;
-                        color: string;
-                        outlineWidth: string;
-                        outlineColor: string;
-                        outlineStyle: string;
-                        outlineOffset: string;
-                        backgroundColor: string;
-                    } | {
-                        pointerEvents: string;
-                        color: string;
-                        outline: string;
-                        outlineColor: string;
-                        backgroundColor: string;
-                    };
-                    _focusVisible: {
-                        outlineWidth: string;
-                        outlineColor: string;
-                        outlineStyle: string;
-                        outlineOffset: string;
-                    };
-                    outline: string;
-                    outlineColor: string;
-                    backgroundColor?: undefined;
-                } | {
-                    _hover: {
-                        outline: string;
-                        outlineColor: string;
-                        backgroundColor: string;
-                    } | {
-                        outlineColor: string;
-                        backgroundColor?: undefined;
-                    } | {
-                        backgroundColor: string;
-                        outlineColor: string;
-                    };
-                    _active: {
-                        outline: string;
-                        outlineColor: string;
-                        backgroundColor: string;
-                    } | {
-                        backgroundColor: string;
-                        outlineColor: string;
-                    };
-                    _disabled: {
-                        pointerEvents: string;
-                        color: string;
-                        outlineWidth: string;
-                        outlineColor: string;
-                        outlineStyle: string;
-                        outlineOffset: string;
-                        backgroundColor: string;
-                    } | {
-                        pointerEvents: string;
-                        color: string;
-                        outline: string;
-                        outlineColor: string;
-                        backgroundColor: string;
-                    };
-                    _focusVisible: {
-                        outlineWidth: string;
-                        outlineColor: string;
-                        outlineStyle: string;
-                        outlineOffset: string;
-                    };
-                    outlineColor: string;
-                    backgroundColor?: undefined;
-                    outline: string;
-                } | {
-                    _hover: {
-                        outline: string;
-                        outlineColor: string;
-                        backgroundColor: string;
-                    } | {
-                        outlineColor: string;
-                        backgroundColor?: undefined;
-                    } | {
-                        backgroundColor: string;
-                        outlineColor: string;
-                    };
-                    _active: {
-                        outline: string;
-                        outlineColor: string;
-                        backgroundColor: string;
-                    } | {
-                        backgroundColor: string;
-                        outlineColor: string;
-                    };
-                    _disabled: {
-                        pointerEvents: string;
-                        color: string;
-                        outlineWidth: string;
-                        outlineColor: string;
-                        outlineStyle: string;
-                        outlineOffset: string;
-                        backgroundColor: string;
-                    } | {
-                        pointerEvents: string;
-                        color: string;
-                        outline: string;
-                        outlineColor: string;
-                        backgroundColor: string;
-                    };
-                    _focusVisible: {
-                        outlineWidth: string;
-                        outlineColor: string;
-                        outlineStyle: string;
-                        outlineOffset: string;
-                    };
-                    backgroundColor: string;
-                    outlineColor: string;
-                    outline: string;
-                };
-                backgroundColor: string;
-                color: string;
-                outline: string;
-                outlineColor: string;
-                appearance: string;
-                border: string;
-                overflow: string;
-                fontSize: string;
-                display: string;
-                transitionProperty: string;
-                transitionDuration: string;
-                borderRadius: string;
-            } | {
-                "button&, a&, label&, &.is-clickable": {
-                    _hover: {
-                        outline: string;
-                        outlineColor: string;
-                        backgroundColor: string;
-                    } | {
-                        outlineColor: string;
-                        backgroundColor?: undefined;
-                    } | {
-                        backgroundColor: string;
-                        outlineColor: string;
-                    };
-                    _active: {
-                        outline: string;
-                        outlineColor: string;
-                        backgroundColor: string;
-                    } | {
-                        backgroundColor: string;
-                        outlineColor: string;
-                    };
-                    _disabled: {
-                        pointerEvents: string;
-                        color: string;
-                        outlineWidth: string;
-                        outlineColor: string;
-                        outlineStyle: string;
-                        outlineOffset: string;
-                        backgroundColor: string;
-                    } | {
-                        pointerEvents: string;
-                        color: string;
-                        outline: string;
-                        outlineColor: string;
+                };
+            } | undefined;
+            variants?: {
+                primary: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                    _hover: {
                         backgroundColor: string;
                     };
-                    _focusVisible: {
-                        outlineWidth: string;
-                        outlineColor: string;
-                        outlineStyle: string;
-                        outlineOffset: string;
+                    _active: {
+                        backgroundColor: string;
                     };
-                    outline: string;
-                    outlineColor: string;
-                    backgroundColor?: undefined;
-                } | {
+                    color: string;
+                    backgroundColor: string;
+                };
+                secondary: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     _hover: {
-                        outline: string;
-                        outlineColor: string;
-                        backgroundColor: string;
-                    } | {
-                        outlineColor: string;
-                        backgroundColor?: undefined;
-                    } | {
                         backgroundColor: string;
-                        outlineColor: string;
                     };
                     _active: {
-                        outline: string;
-                        outlineColor: string;
                         backgroundColor: string;
-                    } | {
-                        backgroundColor: string;
-                        outlineColor: string;
                     };
-                    _disabled: {
-                        pointerEvents: string;
-                        color: string;
+                    color: string;
+                    backgroundColor: string;
+                };
+                tertiary: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                    _hover: {
                         outlineWidth: string;
                         outlineColor: string;
                         outlineStyle: string;
                         outlineOffset: string;
-                        backgroundColor: string;
                     } | {
-                        pointerEvents: string;
-                        color: string;
                         outline: string;
                         outlineColor: string;
-                        backgroundColor: string;
                     };
-                    _focusVisible: {
+                    _active: {
+                        backgroundColor: string;
                         outlineWidth: string;
                         outlineColor: string;
                         outlineStyle: string;
                         outlineOffset: string;
+                    } | {
+                        backgroundColor: string;
+                        outline: string;
+                        outlineColor: string;
                     };
+                    outlineWidth: string;
                     outlineColor: string;
-                    backgroundColor?: undefined;
-                    outline: string;
+                    outlineStyle: string;
+                    outlineOffset: string;
+                    color: string;
+                    backgroundColor: string;
                 } | {
                     _hover: {
-                        outline: string;
-                        outlineColor: string;
-                        backgroundColor: string;
-                    } | {
+                        outlineWidth: string;
                         outlineColor: string;
-                        backgroundColor?: undefined;
+                        outlineStyle: string;
+                        outlineOffset: string;
                     } | {
-                        backgroundColor: string;
+                        outline: string;
                         outlineColor: string;
                     };
                     _active: {
-                        outline: string;
-                        outlineColor: string;
-                        backgroundColor: string;
-                    } | {
                         backgroundColor: string;
-                        outlineColor: string;
-                    };
-                    _disabled: {
-                        pointerEvents: string;
-                        color: string;
                         outlineWidth: string;
                         outlineColor: string;
                         outlineStyle: string;
                         outlineOffset: string;
-                        backgroundColor: string;
                     } | {
-                        pointerEvents: string;
-                        color: string;
+                        backgroundColor: string;
                         outline: string;
                         outlineColor: string;
+                    };
+                    outline: string;
+                    outlineColor: string;
+                    color: string;
+                    backgroundColor: string;
+                };
+                ghost: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                    _hover: {
+                        _disabled: {
+                            color: string;
+                        };
                         backgroundColor: string;
                     };
-                    _focusVisible: {
-                        outlineWidth: string;
-                        outlineColor: string;
-                        outlineStyle: string;
-                        outlineOffset: string;
+                    _active: {
+                        backgroundColor: string;
                     };
+                    color: string;
                     backgroundColor: string;
-                    outlineColor: string;
-                    outline: string;
                 };
-                backgroundColor: string;
-                appearance: string;
-                border: string;
-                overflow: string;
-                fontSize: string;
-                display: string;
-                transitionProperty: string;
-                transitionDuration: string;
-                borderRadius: string;
-                color: string;
-            }) | undefined;
-            sizes?: {
-                sm: {
-                    "button&, a&, label&, &.is-clickable": {
+                floating: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                    boxShadow: string;
+                    _hover: {
                         boxShadow: string;
-                        _hover: {
-                            boxShadow: string;
-                        };
-                        _active: {
-                            boxShadow: string;
-                        };
+                        outline: string;
+                        outlineColor: string;
+                        backgroundColor: string;
                     };
-                };
-                lg: {
-                    "button&, a&, label&, &.is-clickable": {
+                    _active: {
                         boxShadow: string;
-                        _hover: {
-                            boxShadow: string;
-                        };
-                        _active: {
-                            boxShadow: string;
-                        };
+                        backgroundColor: string;
                     };
+                    outline: string;
+                    outlineColor: string;
+                    backgroundColor: string;
                 };
             } | undefined;
-            variants?: {
-                [key: string]: _chakra_ui_styled_system.SystemStyleInterpolation;
-            } | undefined;
             defaultProps?: {
-                size?: "sm" | "lg" | undefined;
-                variant?: string | number | undefined;
+                size?: "sm" | "md" | "lg" | "xs" | undefined;
+                variant?: "ghost" | "floating" | "primary" | "secondary" | "tertiary" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
         };
@@ -3927,6 +3365,17 @@ declare const theme: {
                         zIndex: number;
                     };
                     _disabled: {
+                        color: string;
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                        backgroundColor: string;
+                        pointerEvents: string;
+                    } | {
+                        color: string;
+                        outline: string;
+                        outlineColor: string;
                         backgroundColor: string;
                         pointerEvents: string;
                     };
@@ -3939,12 +3388,10 @@ declare const theme: {
                 };
                 inputLabel: {
                     fontSize: string;
-                    color: string;
                     margin: number;
                     cursor: string;
                 };
                 dateTimeSegment: {
-                    color: string;
                     _focus: {
                         color: string;
                         backgroundColor: string;
@@ -3976,13 +3423,9 @@ declare const theme: {
                     display: string;
                     alignItems: string;
                     justifyContent: string;
-                    borderLeftRadius: string;
                     transitionProperty: string;
                     transitionSpeed: string;
                     position: string;
-                    paddingTop: number;
-                    paddingBottom: number;
-                    borderRadius: string;
                     right: string;
                 };
                 arrow: {
@@ -4095,15 +3538,6 @@ declare const theme: {
                             outline: string;
                             outlineColor: string;
                         };
-                        _disabled: {
-                            outlineWidth: string;
-                            outlineColor: string;
-                            outlineStyle: string;
-                            outlineOffset: string;
-                        } | {
-                            outline: string;
-                            outlineColor: string;
-                        };
                         backgroundColor: string;
                         outlineWidth: string;
                         outlineColor: string;
@@ -4128,15 +3562,6 @@ declare const theme: {
                             outline: string;
                             outlineColor: string;
                         };
-                        _disabled: {
-                            outlineWidth: string;
-                            outlineColor: string;
-                            outlineStyle: string;
-                            outlineOffset: string;
-                        } | {
-                            outline: string;
-                            outlineColor: string;
-                        };
                         backgroundColor: string;
                         outline: string;
                         outlineColor: string;
@@ -4158,15 +3583,6 @@ declare const theme: {
                             outline: string;
                             outlineColor: string;
                         };
-                        _disabled: {
-                            outlineWidth: string;
-                            outlineColor: string;
-                            outlineStyle: string;
-                            outlineOffset: string;
-                        } | {
-                            outline: string;
-                            outlineColor: string;
-                        };
                         outline: string;
                         outlineColor: string;
                         backgroundColor: string;
@@ -8983,6 +8399,85 @@ declare const theme: {
                 colorScheme?: string | undefined;
             } | undefined;
         };
+        Card: {
+            baseStyle?: {
+                container: {
+                    [x: string]: string;
+                    backgroundColor: string;
+                    boxShadow: string;
+                    borderRadius: string;
+                    color: string;
+                    borderWidth: string;
+                    borderColor: string;
+                };
+                body: {
+                    padding: string;
+                    flex: string;
+                };
+                header: {
+                    padding: string;
+                };
+                footer: {
+                    padding: string;
+                };
+            } | undefined;
+            sizes?: {
+                sm: {
+                    container: {
+                        [x: string]: string;
+                    };
+                };
+                md: {
+                    container: {
+                        [x: string]: string;
+                    };
+                };
+                lg: {
+                    container: {
+                        [x: string]: string;
+                    };
+                };
+            } | undefined;
+            variants?: {
+                elevated: {
+                    container: {
+                        [x: string]: string | {
+                            [x: string]: string;
+                        };
+                        _dark: {
+                            [x: string]: string;
+                        };
+                    };
+                };
+                outline: {
+                    container: {
+                        [x: string]: string;
+                    };
+                };
+                filled: {
+                    container: {
+                        [x: string]: string;
+                    };
+                };
+                unstyled: {
+                    body: {
+                        [x: string]: number;
+                    };
+                    header: {
+                        [x: string]: number;
+                    };
+                    footer: {
+                        [x: string]: number;
+                    };
+                };
+            } | undefined;
+            defaultProps?: {
+                size?: "sm" | "md" | "lg" | undefined;
+                variant?: "outline" | "filled" | "unstyled" | "elevated" | undefined;
+                colorScheme?: string | undefined;
+            } | undefined;
+            parts: ("body" | "footer" | "header" | "container")[];
+        };
     };
     borders: {
         none: string;
@@ -9571,4 +9066,4 @@ declare const Text: _chakra_ui_system_dist_system_types.ComponentWithAs<"p", Tex
  **/
 declare function slugify(text: string | string[], maxLength?: number): string;
 
-export { Accordion, AccordionProps, AttachedInputs, Badge, BadgeProps, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, ButtonGroupProps, ButtonProps, Card, CardProps, CardSelect, CargonetLogo, CargonetLogoProps, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChoiceChip, ChoiceChipProps, ClosableAlert, CloseButton, CloseButtonProps, Code, CodeProps, ColorInlineLoader, ColorInlineLoaderProps, ColorSpinner, ColorSpinnerProps, Combobox, ComboboxProps, ContentLoader, ContentLoaderProps, DarkFullScreenLoader, DarkInlineLoader, DarkInlineLoaderProps, DarkSpinner, DarkSpinnerProps, DatePicker, DateRangePicker, Divider, DividerProps, Drawer, DrawerBodyProps, DrawerContent, ModalHeader as DrawerHeader, Expandable, ExpandableAlert, ExpandableItem, ExpandableItemProps, FloatingActionButton, FormControl, FormControlProps, FormErrorMessage, FormErrorMessageProps, FormLabel, FormLabelProps, FullScreenDrawer, Heading, HeadingProps, IconButton, IconButtonProps, InfoSelect, InfoTag, InfoTagProps, Input, InputElementProps, InputLeftElement, InputProps, InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightInlineLoaderProps, LightSpinner, LightSpinnerProps, LineIcon, LineIconProps, ListBox, ModalHeader, ModalHeaderProps, NativeSelect, NativeSelectProps, Nudge, NudgeProps, NumericStepper, Pagination, PasswordInput, PasswordInputProps, PhoneNumberInput, PlayPauseButton, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, RadioCardProps, RadioGroup, RadioGroupProps, RadioProps, SearchInput, SearchInputProps, SimpleDrawer, SimpleDrawerProps, Skeleton, SkeletonCircle, SkeletonCircleProps, SkeletonProps, SkeletonText, SkeletonTextProps, SkipButton, SpinnerProps, SporProvider, Stack, StackProps, StaticAlert, StaticCard, StaticCardProps, Stepper, StepperStep, Switch, SwitchProps, Table, TableProps, Tabs, TabsProps, Text, TextLink, TextProps, Textarea, TextareaProps, TimePicker, ToastOptions, Tooltip, TooltipProps, Translations, TravelTag, TravelTagProps, VyLogo, VyLogoPride, VyLogoPrideProps, VyLogoProps, WizardNudge, WizardNudgeProps, brandTheme, createTexts, fontFaces, slugify, theme, useToast, useTranslation };
+export { Accordion, AccordionProps, AttachedInputs, Badge, BadgeProps, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, ButtonGroupProps, ButtonProps, CardSelect, CargonetLogo, CargonetLogoProps, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChoiceChip, ChoiceChipProps, ClosableAlert, CloseButton, CloseButtonProps, Code, CodeProps, ColorInlineLoader, ColorInlineLoaderProps, ColorSpinner, ColorSpinnerProps, Combobox, ComboboxProps, ContentLoader, ContentLoaderProps, DarkFullScreenLoader, DarkInlineLoader, DarkInlineLoaderProps, DarkSpinner, DarkSpinnerProps, DatePicker, DateRangePicker, Divider, DividerProps, Drawer, DrawerBodyProps, DrawerContent, ModalHeader as DrawerHeader, Expandable, ExpandableAlert, ExpandableItem, ExpandableItemProps, FloatingActionButton, FormControl, FormControlProps, FormErrorMessage, FormErrorMessageProps, FormLabel, FormLabelProps, FullScreenDrawer, Heading, HeadingProps, IconButton, IconButtonProps, InfoSelect, InfoTag, InfoTagProps, Input, InputElementProps, InputLeftElement, InputProps, InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightInlineLoaderProps, LightSpinner, LightSpinnerProps, LineIcon, LineIconProps, ListBox, ModalHeader, ModalHeaderProps, NativeSelect, NativeSelectProps, Nudge, NudgeProps, NumericStepper, Pagination, PasswordInput, PasswordInputProps, PhoneNumberInput, PlayPauseButton, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, RadioCardProps, RadioGroup, RadioGroupProps, RadioProps, SearchInput, SearchInputProps, SimpleDrawer, SimpleDrawerProps, Skeleton, SkeletonCircle, SkeletonCircleProps, SkeletonProps, SkeletonText, SkeletonTextProps, SkipButton, SpinnerProps, SporProvider, Stack, StackProps, StaticAlert, StaticCard, StaticCardProps, Stepper, StepperStep, Switch, SwitchProps, Table, TableProps, Tabs, TabsProps, Text, TextLink, TextProps, Textarea, TextareaProps, TimePicker, ToastOptions, Tooltip, TooltipProps, Translations, TravelTag, TravelTagProps, VyLogo, VyLogoPride, VyLogoPrideProps, VyLogoProps, WizardNudge, WizardNudgeProps, brandTheme, createTexts, fontFaces, slugify, theme, useToast, useTranslation };