@vygruppen/spor-react 9.8.2 → 9.9.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@9.8.2 build
+> @vygruppen/spor-react@9.9.0 build
 > tsup src/index.tsx --dts --treeshake --format cjs,esm
 
 CLI Building entry: src/index.tsx
@@ -9,12 +9,12 @@
 CJS Build start
 ESM Build start
 DTS Build start
-CJS dist/index.js 508.50 KB
-CJS ⚡️ Build success in 2284ms
+CJS dist/index.js 511.25 KB
+CJS ⚡️ Build success in 2246ms
 ESM dist/index.mjs                      2.11 KB
-ESM dist/CountryCodeSelect-46ZPAYGJ.mjs 1.19 KB
-ESM dist/chunk-4QF4PJTK.mjs             397.96 KB
-ESM ⚡️ Build success in 2286ms
-DTS ⚡️ Build success in 11777ms
-DTS dist/index.d.ts  337.72 KB
-DTS dist/index.d.mts 337.72 KB
+ESM dist/CountryCodeSelect-U25NF65N.mjs 1.19 KB
+ESM dist/chunk-TEDOVPXZ.mjs             400.45 KB
+ESM ⚡️ Build success in 2246ms
+DTS ⚡️ Build success in 11587ms
+DTS dist/index.d.ts  338.81 KB
+DTS dist/index.d.mts 338.81 KB

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @vygruppen/spor-react
 
+## 9.9.0
+
+### Minor Changes
+
+- 70e5a92: InfoSelect: bugfixes. #1043
+- d4f8abf: Added possibility for title with ClosableAlert and StaticAlert. Some minor bugfixes with colors on darkmode.
+
+### Patch Changes
+
+- 0baf753: PressableCard: Make variant optional. Fix background on darkmode.
+
+## 9.8.3
+
+### Patch Changes
+
+- 50a42b2: Fix render of RadioCardGroup and RadioCard
+- 72afbd7: Removed static values Table styles
+
 ## 9.8.2
 
 ### Patch Changes

package/dist/{CountryCodeSelect-46ZPAYGJ.mjs → CountryCodeSelect-U25NF65N.mjs}

@@ -1,4 +1,4 @@
-import { createTexts, useTranslation, InfoSelect, Item } from './chunk-4QF4PJTK.mjs';
+import { createTexts, useTranslation, InfoSelect, Item } from './chunk-TEDOVPXZ.mjs';
 import React from 'react';
 import { getSupportedCallingCodes } from 'awesome-phonenumber';
 

package/dist/{chunk-4QF4PJTK.mjs → chunk-TEDOVPXZ.mjs}

@@ -1,10 +1,10 @@
 import tokens11__default from '@vygruppen/spor-design-tokens';
 import * as tokens11 from '@vygruppen/spor-design-tokens';
 export { tokens11 as tokens };
-import { forwardRef, Divider as Divider$1, Stack as Stack$1, useRadio, useStyleConfig, chakra, Box, Card, Accordion as Accordion$1, Skeleton as Skeleton$1, useButtonGroup, Center, Flex, ButtonGroup as ButtonGroup$1, IconButton as IconButton$1, useMultiStyleConfig, Badge as Badge$1, Code as Code$1, Text, PopoverAnchor, FormLabel, useFormControlContext, PopoverContent, PopoverArrow, PopoverBody, FocusLock, Popover, InputGroup, PopoverTrigger, Portal, Checkbox as Checkbox$1, useCheckbox, FormControl as FormControl$1, InputLeftElement, Input as Input$1, InputRightElement, Select, useDisclosure, Button as Button$1, useControllableState, Radio as Radio$1, RadioGroup as RadioGroup$1, Switch as Switch$1, Textarea as Textarea$1, Link, ModalHeader as ModalHeader$1, useModalContext, DrawerContent as DrawerContent$1, Tabs as Tabs$1, Table as Table$1, defineStyleConfig as defineStyleConfig$1, createMultiStyleConfigHelpers as createMultiStyleConfigHelpers$1, useRadioGroup, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, useColorMode, SkeletonCircle as SkeletonCircle$1, SkeletonText as SkeletonText$1, useColorModeValue, Breadcrumb as Breadcrumb$1, BreadcrumbItem as BreadcrumbItem$1, BreadcrumbLink as BreadcrumbLink$1, Heading as Heading$1, CheckboxGroup as CheckboxGroup$1, List, ListItem, useFormControlProps, useFormControl, Drawer as Drawer$1, DrawerOverlay, DrawerBody, DrawerHeader, useMediaQuery, DrawerCloseButton, DarkMode, PopoverCloseButton, usePopoverContext, UnorderedList, ChakraProvider, useToast as useToast$1, useInterval } from '@chakra-ui/react';
+import { forwardRef, Divider as Divider$1, Stack as Stack$1, useRadio, useStyleConfig, chakra, Box, Accordion as Accordion$1, Skeleton as Skeleton$1, useButtonGroup, Center, Flex, ButtonGroup as ButtonGroup$1, IconButton as IconButton$1, useMultiStyleConfig, Badge as Badge$1, Code as Code$1, Text, PopoverAnchor, FormLabel, useFormControlContext, PopoverContent, PopoverArrow, PopoverBody, FocusLock, Popover, InputGroup, PopoverTrigger, Portal, Checkbox as Checkbox$1, useCheckbox, FormControl as FormControl$1, InputLeftElement, Input as Input$1, InputRightElement, Select, useDisclosure, Button as Button$1, useControllableState, Radio as Radio$1, RadioGroup as RadioGroup$1, Switch as Switch$1, Textarea as Textarea$1, Link, ModalHeader as ModalHeader$1, useModalContext, DrawerContent as DrawerContent$1, Tabs as Tabs$1, Table as Table$1, defineStyleConfig as defineStyleConfig$1, createMultiStyleConfigHelpers as createMultiStyleConfigHelpers$1, useRadioGroup, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, useColorMode, SkeletonCircle as SkeletonCircle$1, SkeletonText as SkeletonText$1, useColorModeValue, Breadcrumb as Breadcrumb$1, BreadcrumbItem as BreadcrumbItem$1, BreadcrumbLink as BreadcrumbLink$1, Heading as Heading$1, CheckboxGroup as CheckboxGroup$1, List, ListItem, useFormControlProps, useFormControl, Drawer as Drawer$1, DrawerOverlay, DrawerBody, DrawerHeader, useMediaQuery, DrawerCloseButton, DarkMode, PopoverCloseButton, usePopoverContext, UnorderedList, ChakraProvider, useToast as useToast$1, useInterval } from '@chakra-ui/react';
 export { AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Box, Center, Collapse, Container, DarkMode, DrawerBody, DrawerCloseButton, DrawerFooter, DrawerOverlay, Fade, Flex, FormHelperText, Grid, GridItem, HStack, Image, Img, InputGroup, LightMode, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalOverlay, OrderedList, Portal, ScaleFade, SimpleGrid, Slide, SlideFade, Spacer, Tab, TabList, TabPanel, TabPanels, TableCaption, Tbody, Td, Tfoot, Th, Thead, Tr, UnorderedList, VStack, Wrap, WrapItem, defineStyleConfig, extendTheme, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToken } from '@chakra-ui/react';
 import * as React73 from 'react';
-import React73__default, { useId, createContext, useEffect, forwardRef as forwardRef$1, useRef, useState, Suspense, Children, useContext, useCallback, useMemo, useLayoutEffect } from 'react';
+import React73__default, { useId, createContext, useEffect, forwardRef as forwardRef$1, useRef, useState, Suspense, useContext, useCallback, useMemo, useLayoutEffect } from 'react';
 import { CloseFill30Icon, CloseFill24Icon, CloseFill18Icon, CalendarOutline24Icon, CloseOutline24Icon, SearchOutline24Icon, InformationFill24Icon, InformationFill18Icon, WarningFill24Icon, WarningFill18Icon, ErrorFill24Icon, ErrorFill18Icon, LinkOutOutline24Icon, DropdownRightFill18Icon, DropdownLeftFill18Icon, DropdownDownFill18Icon, DropdownDownFill24Icon, DropdownUpFill24Icon, ArrowRightFill18Icon, ArrowLeftFill24Icon, ArrowLeftOutline24Icon, ArrowRightOutline24Icon, ErrorOutline24Icon, AltTransportOutline24Icon, WarningOutline24Icon, SuccessOutline24Icon, InformationOutline24Icon, TrainFill18Icon, TrainFill24Icon, TrainFill30Icon, ExpressBusFill18Icon, ExpressBusFill24Icon, ExpressBusFill30Icon, BusFill18Icon, BusFill24Icon, BusFill30Icon, FerryFill18Icon, FerryFill24Icon, FerryFill30Icon, SubwayFill18Icon, SubwayFill24Icon, SubwayFill30Icon, TramFill18Icon, TramFill24Icon, TramFill30Icon, AltTransportFill18Icon, AltTransportFill24Icon, AltTransportFill30Icon, WalkFill18Icon, WalkFill24Icon, WalkFill30Icon } from '@vygruppen/spor-icon-react';
 import { inlineLoaderColorData, spinnerColorData, contentLoaderData, fullScreenLoaderWhiteData, inlineLoaderDarkData, fullScreenLoaderBlackData, inlineLoaderLightData, spinnerLightData, spinnerDarkData } from '@vygruppen/spor-loader';
 import { useLottie } from 'lottie-react';
@@ -829,24 +829,41 @@ var RadioCardGroup = ({
     ...props
   });
   const group = getRootProps();
-  return /* @__PURE__ */ React73__default.createElement(Stack$1, { direction: direction2, ...group }, Children.map(
-    children,
-    (child) => {
+  return /* @__PURE__ */ React73__default.createElement(Stack$1, { direction: direction2, ...group }, recursiveMap(children, (child) => {
+    if (child.type === RadioCard) {
       const radio = getRadioProps({ value: child.props.value });
-      return React73__default.cloneElement(child, { ...radio, variant, ...props });
+      const variantValue = variant;
+      return React73__default.cloneElement(
+        child,
+        { ...radio, variant: variantValue, ...props }
+      );
     }
-  ));
+    return child;
+  }));
 };
+function recursiveMap(children, fn) {
+  return React73__default.Children.map(children, (child) => {
+    if (React73__default.isValidElement(child) && child.props.children) {
+      child = React73__default.cloneElement(child, {
+        children: recursiveMap(child.props.children, fn)
+      });
+    }
+    if (React73__default.isValidElement(child)) {
+      return fn(child);
+    }
+    return child;
+  });
+}
 var StaticCard = forwardRef(
   ({ colorScheme = "white", children, ...props }, ref) => {
     const styles3 = useStyleConfig("StaticCard", {
       colorScheme
     });
-    return /* @__PURE__ */ React73__default.createElement(Box, { __css: styles3, ...props, ref }, children, /* @__PURE__ */ React73__default.createElement(Card, null));
+    return /* @__PURE__ */ React73__default.createElement(Box, { __css: styles3, ...props, ref }, children);
   }
 );
 var PressableCard = forwardRef(
-  ({ children, variant = "base", ...props }, ref) => {
+  ({ children, variant = "floating", ...props }, ref) => {
     const styles3 = useStyleConfig("PressableCard", {
       variant
     });
@@ -1529,6 +1546,7 @@ var BaseAlert = ({
 // src/alert/ClosableAlert.tsx
 var ClosableAlert = ({
   variant,
+  title,
   children,
   onClose: externalOnClose = () => {
   }
@@ -1553,7 +1571,7 @@ var ClosableAlert = ({
       "aria-label": t2(texts6.close),
       sx: styles3.closeButton
     }
-  ), /* @__PURE__ */ React73__default.createElement(AlertIcon, { variant }), children);
+  ), /* @__PURE__ */ React73__default.createElement(AlertIcon, { variant }), /* @__PURE__ */ React73__default.createElement(Flex, { direction: "column", gap: title ? 2 : void 0, textAlign: "left" }, title && /* @__PURE__ */ React73__default.createElement(Box, { fontWeight: "bold" }, title), /* @__PURE__ */ React73__default.createElement(Box, { marginRight: 1 }, children)));
 };
 var texts6 = createTexts({
   close: {
@@ -1599,16 +1617,21 @@ var ExpandableAlert = ({
             overflow: "hidden",
             "-webkit-line-clamp": "1",
             "-webkit-box-orient": "vertical"
-          }
+          },
+          color: "darkGrey"
         },
         title
       )),
-      /* @__PURE__ */ React73__default.createElement(AccordionIcon, null)
+      /* @__PURE__ */ React73__default.createElement(AccordionIcon, { color: "darkGrey" })
     )), /* @__PURE__ */ React73__default.createElement(AccordionPanel, null, children))
   ));
 };
-var StaticAlert = ({ children, ...props }) => {
-  return /* @__PURE__ */ React73__default.createElement(BaseAlert, { ...props }, /* @__PURE__ */ React73__default.createElement(AlertIcon, { variant: props.variant }), children);
+var StaticAlert = ({
+  children,
+  title,
+  ...props
+}) => {
+  return /* @__PURE__ */ React73__default.createElement(BaseAlert, { ...props }, /* @__PURE__ */ React73__default.createElement(AlertIcon, { variant: props.variant }), /* @__PURE__ */ React73__default.createElement(Flex, { direction: "column", gap: title ? 2 : void 0, textAlign: "left" }, title && /* @__PURE__ */ React73__default.createElement(Box, { fontWeight: "bold" }, title), /* @__PURE__ */ React73__default.createElement(Box, null, children)));
 };
 var Breadcrumb = (props) => {
   const iconColor = useColorModeValue("blackAlpha.400", "whiteAlpha.400");
@@ -3029,13 +3052,11 @@ function ListBoxSection({ section, state: state2 }) {
 // src/input/InfoSelect.tsx
 function InfoSelect({
   placeholder,
-  width = "100%",
-  height = "auto",
   onChange,
   value,
   isLabelSrOnly,
   defaultValue,
-  variant = "base",
+  variant,
   ...props
 }) {
   const renamedProps = {
@@ -3062,7 +3083,8 @@ function InfoSelect({
   const { buttonProps } = useButton(triggerProps, triggerRef);
   const { t: t2 } = useTranslation();
   const formControl = useFormControlProps(props);
-  return /* @__PURE__ */ React73__default.createElement(Box, { sx: styles3.container }, /* @__PURE__ */ React73__default.createElement(chakra.div, { ...labelProps, sx: styles3.label }, props.label), /* @__PURE__ */ React73__default.createElement(
+  const hasChosenValue = state2.selectedItem !== null;
+  return /* @__PURE__ */ React73__default.createElement(Box, { sx: styles3.container }, /* @__PURE__ */ React73__default.createElement(
     HiddenSelect,
     {
       state: state2,
@@ -3077,13 +3099,36 @@ function InfoSelect({
       ref: triggerRef,
       sx: styles3.button,
       ...buttonProps,
-      width,
-      height,
       "data-attachable": true,
       "aria-invalid": formControl.isInvalid,
       "aria-describedby": formControl["aria-describedby"]
     },
-    /* @__PURE__ */ React73__default.createElement(Box, { ...valueProps }, state2.selectedItem ? state2.selectedItem.textValue ?? state2.selectedItem.rendered : placeholder ?? t2(texts11.selectAnOption)),
+    /* @__PURE__ */ React73__default.createElement(chakra.div, { sx: styles3.innerButton }, /* @__PURE__ */ React73__default.createElement(
+      chakra.div,
+      {
+        ...labelProps,
+        sx: {
+          ...styles3.label,
+          ...hasChosenValue && {
+            transform: "scale(0.825) translateY(-10px) translateX(-10%)",
+            transitionProperty: "var(--spor-transition-property-common)",
+            transitionDuration: "var(--spor-transition-duration-normal)"
+          }
+        }
+      },
+      props.label
+    ), /* @__PURE__ */ React73__default.createElement(
+      Box,
+      {
+        ...valueProps,
+        h: !hasChosenValue ? "0px" : "18px",
+        hidden: !hasChosenValue,
+        transform: "scale(1) translateY(-10px)",
+        transitionProperty: "var(--spor-transition-property-common)",
+        transitionDuration: "var(--spor-transition-duration-normal)"
+      },
+      state2.selectedItem ? state2.selectedItem.textValue ?? state2.selectedItem.rendered : placeholder ?? t2(texts11.selectAnOption)
+    )),
     /* @__PURE__ */ React73__default.createElement(Box, { sx: styles3.arrowIcon }, state2.isOpen ? /* @__PURE__ */ React73__default.createElement(DropdownUpFill24Icon, null) : /* @__PURE__ */ React73__default.createElement(DropdownDownFill24Icon, null))
   ), state2.isOpen && /* @__PURE__ */ React73__default.createElement(
     Popover3,
@@ -3428,7 +3473,7 @@ var texts14 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React73__default.lazy(() => import('./CountryCodeSelect-46ZPAYGJ.mjs'));
+var LazyCountryCodeSelect = React73__default.lazy(() => import('./CountryCodeSelect-U25NF65N.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React73__default.createElement(Radio$1, { ...props, ref });
 });
@@ -9943,14 +9988,14 @@ function floatingBackground(state2, props) {
       return {
         backgroundColor: mode(
           "floating.surface.hover.light",
-          "floating.surface.hover.dark"
+          `color-mix(in srgb, white 10%, var(--spor-colors-bg-default-dark))`
         )(props)
       };
     case "default":
       return {
         backgroundColor: mode(
-          "floating.surface.default.light",
-          "floating.surface.default.dark"
+          "white",
+          `color-mix(in srgb, white 10%, var(--spor-colors-bg-default-dark))`
         )(props)
       };
   }
@@ -10007,7 +10052,10 @@ function ghostBackground(state2, props) {
       };
     case "selected": {
       return {
-        backgroundColor: mode("mint", "whiteAlpha.200")(props)
+        backgroundColor: mode(
+          "ghost.surface.selected.light",
+          "ghost.surface.selected.dark"
+        )(props)
       };
     }
     case "default":
@@ -10016,6 +10064,18 @@ function ghostBackground(state2, props) {
       };
   }
 }
+function ghostText(state2, props) {
+  switch (state2) {
+    case "selected":
+      return {
+        color: mode("ghost.text.light", "ghost.text.dark")(props)
+      };
+    default:
+      return {
+        color: mode("ghost.text.light", "ghost.text.dark")(props)
+      };
+  }
+}
 
 // src/theme/components/accordion.ts
 var helpers = createMultiStyleConfigHelpers(accordionAnatomy.keys);
@@ -10165,7 +10225,8 @@ var config3 = helpers2.defineMultiStyleConfig({
     closeButton: {
       position: "absolute",
       top: 1,
-      right: 1
+      right: 1,
+      color: "darkGrey"
     }
   },
   variants: {
@@ -11852,18 +11913,28 @@ var config19 = helpers11.defineMultiStyleConfig({
     container: {},
     label: {
       position: "relative",
+      fontSize: ["mobile.xs", "desktop.sm"],
       ...props.isLabelSrOnly ? srOnly2 : {}
     },
+    innerButton: {
+      display: "flex",
+      flexDir: "column",
+      alignItems: "start",
+      justifyContent: "start"
+    },
     button: {
+      display: "flex",
       appearance: "none",
+      width: "100%",
+      height: "54px",
       borderTopRadius: "sm",
       borderBottomRadius: props.isOpen ? 0 : "sm",
       paddingY: 1.5,
       paddingX: 3,
-      display: "flex",
       justifyContent: "space-between",
       alignItems: "center",
       fontSize: "mobile.md",
+      h: 8,
       ...baseBorder("default", props),
       _hover: {
         ...baseBorder("hover", props)
@@ -11881,6 +11952,7 @@ var config19 = helpers11.defineMultiStyleConfig({
         ...baseBorder("invalid", props)
       }
     },
+    placeholder: {},
     arrowIcon: {}
   }),
   variants: {
@@ -12510,7 +12582,7 @@ var config25 = helpers16.defineMultiStyleConfig({
       marginY: 1,
       marginX: 1,
       borderRadius: "sm",
-      color: mode("darkGrey", "white")(props),
+      ...ghostText("default", props),
       cursor: "pointer",
       outline: "none",
       _active: {
@@ -12523,15 +12595,15 @@ var config25 = helpers16.defineMultiStyleConfig({
         ...ghostBackground("selected", props)
       },
       _selected: {
-        ...ghostBackground("selected", props)
+        ...ghostBackground("active", props)
       }
     },
     label: {},
     description: {
       fontSize: ["mobile.xs", "desktop.xs"],
-      color: mode("dimGrey", "silver")(props),
+      ...ghostText("default", props),
       "[aria-selected='true'] &": {
-        color: mode("lightGrey", "platinum")(props)
+        ...ghostText("selected", props)
       }
     }
   })
@@ -13330,13 +13402,11 @@ var config39 = helpers28.defineMultiStyleConfig({
     table: {
       borderCollapse: "collapse",
       ...baseText("default", props),
-      width: "100%",
-      minWidth: "600px"
+      width: "100%"
     },
     th: {
       fontWeight: "bold",
-      textAlign: "start",
-      minWidth: "68px"
+      textAlign: "start"
     },
     td: {
       textAlign: "start"
@@ -13710,9 +13780,14 @@ var config44 = defineStyleConfig$1({
     display: "block",
     borderRadius: "md",
     cursor: "pointer",
-    ...focusVisibleStyles(props),
+    transitionProperty: "common",
+    transitionDuration: "fast",
+    "button&, a&, label&, &.is-clickable": {
+      ...focusVisibleStyles(props)
+    },
     _disabled: {
       ...baseBackground("disabled", props),
+      ...baseBorder("disabled", props),
       ...baseText("disabled", props),
       outline: "none",
       pointerEvents: "none"

package/dist/index.d.mts

@@ -211,7 +211,7 @@ declare const StaticCard: _chakra_ui_system_dist_system_types.ComponentWithAs<As
 
 type PressableCardProps = BoxProps & {
     /** Defaults to "base"  */
-    variant: "floating" | "accent" | "base";
+    variant?: "floating" | "accent" | "base";
 };
 /**
  * `PressableCard` is a component that renders a pressable card.
@@ -333,6 +333,8 @@ type BaseAlertProps = BoxProps & {
     variant: "info" | "success" | "warning" | "alt-transport" | "error";
     /** The body content of the alert */
     children: React.ReactNode;
+    /** The title of the alert */
+    title?: string;
 };
 
 type ClosableAlertProps = BaseAlertProps & {
@@ -361,7 +363,7 @@ type ClosableAlertProps = BaseAlertProps & {
  *   <Text>Some info here</Text>
  * </ClosableAlert>
  */
-declare const ClosableAlert: ({ variant, children, onClose: externalOnClose, }: ClosableAlertProps) => React.JSX.Element | null;
+declare const ClosableAlert: ({ variant, title, children, onClose: externalOnClose, }: ClosableAlertProps) => React.JSX.Element | null;
 
 type ExpandableAlertProps = BaseAlertProps & {
     /** The title string  */
@@ -401,7 +403,7 @@ type StaticAlertProps = BaseAlertProps;
  * </StaticAlert>
  * ```
  */
-declare const StaticAlert: ({ children, ...props }: StaticAlertProps) => React.JSX.Element;
+declare const StaticAlert: ({ children, title, ...props }: StaticAlertProps) => React.JSX.Element;
 
 type BreadcrumbProps = Omit<BreadcrumbProps$1, "variant"> & {
     variant?: "base" | "ghost";
@@ -1174,7 +1176,7 @@ type InfoSelectProps<T extends object> = {
  *
  * @see https://spor.vy.no/components/info-select
  */
-declare function InfoSelect<T extends object>({ placeholder, width, height, onChange, value, isLabelSrOnly, defaultValue, variant, ...props }: InfoSelectProps<T>): React.JSX.Element;
+declare function InfoSelect<T extends object>({ placeholder, onChange, value, isLabelSrOnly, defaultValue, variant, ...props }: InfoSelectProps<T>): React.JSX.Element;
 
 type InputProps = Omit<InputProps$1, "variant" | "size"> & {
     /** The input's label */
@@ -2534,6 +2536,7 @@ declare const theme: {
                     position: string;
                     top: number;
                     right: number;
+                    color: string;
                 };
             } | undefined;
             sizes?: {
@@ -4619,6 +4622,13 @@ declare const theme: {
                     position: string;
                     width?: string | undefined;
                     whiteSpace?: string | undefined;
+                    fontSize: ("desktop.sm" | "mobile.xs")[];
+                };
+                innerButton: {
+                    display: string;
+                    flexDir: string;
+                    alignItems: string;
+                    justifyContent: string;
                 };
                 button: {
                     _disabled: {
@@ -4657,15 +4667,18 @@ declare const theme: {
                     outlineColor: string;
                     outlineStyle: string;
                     outlineOffset: string;
+                    display: string;
                     appearance: string;
+                    width: string;
+                    height: string;
                     borderTopRadius: string;
                     borderBottomRadius: string | number;
                     paddingY: number;
                     paddingX: number;
-                    display: string;
                     justifyContent: string;
                     alignItems: string;
                     fontSize: string;
+                    h: number;
                 } | {
                     _disabled: {
                         backgroundColor: string;
@@ -4701,16 +4714,20 @@ declare const theme: {
                     };
                     outline: string;
                     outlineColor: string;
+                    display: string;
                     appearance: string;
+                    width: string;
+                    height: string;
                     borderTopRadius: string;
                     borderBottomRadius: string | number;
                     paddingY: number;
                     paddingX: number;
-                    display: string;
                     justifyContent: string;
                     alignItems: string;
                     fontSize: string;
+                    h: number;
                 };
+                placeholder: {};
                 arrowIcon: {};
             }) | undefined;
             sizes?: {
@@ -5369,12 +5386,6 @@ declare const theme: {
                     backgroundColor: string;
                 };
                 item: {
-                    paddingX: number;
-                    paddingY: number;
-                    marginY: number;
-                    marginX: number;
-                    borderRadius: string;
-                    color: string;
                     cursor: string;
                     outline: string;
                     _active: {
@@ -5389,14 +5400,20 @@ declare const theme: {
                     _selected: {
                         backgroundColor: string;
                     };
+                    color: string;
+                    paddingX: number;
+                    paddingY: number;
+                    marginY: number;
+                    marginX: number;
+                    borderRadius: string;
                 };
                 label: {};
                 description: {
-                    fontSize: ("mobile.xs" | "desktop.xs")[];
-                    color: string;
                     "[aria-selected='true'] &": {
                         color: string;
                     };
+                    color: string;
+                    fontSize: ("mobile.xs" | "desktop.xs")[];
                 };
             }) | undefined;
             sizes?: {
@@ -6627,14 +6644,12 @@ declare const theme: {
             baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
                 table: {
                     width: string;
-                    minWidth: string;
                     color: string;
                     borderCollapse: string;
                 };
                 th: {
                     fontWeight: string;
                     textAlign: string;
-                    minWidth: string;
                 };
                 td: {
                     textAlign: string;
@@ -7226,25 +7241,39 @@ declare const theme: {
         };
         PressableCard: {
             baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                appearance: string;
+                border: string;
+                overflow: string;
+                fontSize: string;
+                display: string;
+                borderRadius: string;
+                cursor: string;
+                transitionProperty: string;
+                transitionDuration: string;
+                "button&, a&, label&, &.is-clickable": {
+                    _focusVisible: {
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                    };
+                };
                 _disabled: {
                     outline: string;
                     pointerEvents: string;
                     color: string;
-                    backgroundColor: string;
-                };
-                _focusVisible: {
                     outlineWidth: string;
                     outlineColor: string;
                     outlineStyle: string;
                     outlineOffset: string;
+                    backgroundColor: string;
+                } | {
+                    outline: string;
+                    pointerEvents: string;
+                    color: string;
+                    outlineColor: string;
+                    backgroundColor: string;
                 };
-                appearance: string;
-                border: string;
-                overflow: string;
-                fontSize: string;
-                display: string;
-                borderRadius: string;
-                cursor: string;
             }) | undefined;
             sizes?: {
                 [key: string]: _chakra_ui_styled_system.SystemStyleInterpolation;
@@ -9417,4 +9446,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, 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, 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, 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, VyLogoProps, WizardNudge, WizardNudgeProps, brandTheme, createTexts, fontFaces, slugify, theme, useToast, useTranslation };
+export { Accordion, AccordionProps, AttachedInputs, Badge, BadgeProps, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, ButtonGroupProps, ButtonProps, Card, CardProps, CardSelect, 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, 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, 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, VyLogoProps, WizardNudge, WizardNudgeProps, brandTheme, createTexts, fontFaces, slugify, theme, useToast, useTranslation };