@vygruppen/spor-react 9.8.1 → 9.8.3

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@9.8.1 build
+> @vygruppen/spor-react@9.8.3 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.25 KB
-CJS ⚡️ Build success in 2175ms
+CJS dist/index.js 509.04 KB
+CJS ⚡️ Build success in 2230ms
 ESM dist/index.mjs                      2.11 KB
-ESM dist/chunk-S335RZ6M.mjs             397.76 KB
-ESM dist/CountryCodeSelect-FODJ4ZSF.mjs 1.19 KB
-ESM ⚡️ Build success in 2175ms
-DTS ⚡️ Build success in 11477ms
-DTS dist/index.d.ts  337.73 KB
-DTS dist/index.d.mts 337.73 KB
+ESM dist/CountryCodeSelect-C2XKHNTP.mjs 1.19 KB
+ESM dist/chunk-ZDOSE4VD.mjs             398.42 KB
+ESM ⚡️ Build success in 2232ms
+DTS ⚡️ Build success in 11754ms
+DTS dist/index.d.ts  337.67 KB
+DTS dist/index.d.mts 337.67 KB

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @vygruppen/spor-react
 
+## 9.8.3
+
+### Patch Changes
+
+- 50a42b2: Fix render of RadioCardGroup and RadioCard
+- 72afbd7: Removed static values Table styles
+
+## 9.8.2
+
+### Patch Changes
+
+- 5503c91: Fixes on new Cards
+  - Make PressableCard more scalable (removed as)
+  - Edit "white" colorScheme on StaticCard to support darkmode
+
 ## 9.8.1
 
 ### Patch Changes

package/dist/{CountryCodeSelect-FODJ4ZSF.mjs → CountryCodeSelect-C2XKHNTP.mjs}

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

package/dist/{chunk-S335RZ6M.mjs → chunk-ZDOSE4VD.mjs}

@@ -4,7 +4,7 @@ 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';
 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,14 +829,31 @@ 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", {
@@ -845,15 +862,14 @@ var StaticCard = forwardRef(
     return /* @__PURE__ */ React73__default.createElement(Box, { __css: styles3, ...props, ref }, children, /* @__PURE__ */ React73__default.createElement(Card, null));
   }
 );
-var PressableCard = ({
-  children,
-  as = "button",
-  variant = "base",
-  ...props
-}) => {
-  const styles3 = useStyleConfig("PressableCard", { variant });
-  return /* @__PURE__ */ React73__default.createElement(Box, { as, __css: styles3, ...props }, children);
-};
+var PressableCard = forwardRef(
+  ({ children, variant = "base", ...props }, ref) => {
+    const styles3 = useStyleConfig("PressableCard", {
+      variant
+    });
+    return /* @__PURE__ */ React73__default.createElement(Box, { __css: styles3, ...props, ref }, children);
+  }
+);
 var AccordionContext = React73__default.createContext(null);
 var AccordionProvider = ({
   size: size2,
@@ -2637,10 +2653,12 @@ var CardSelect = forwardRef(
         placement
       },
       /* @__PURE__ */ React73__default.createElement(
-        Card2,
+        StaticCard,
         {
           colorScheme: "white",
           size: "lg",
+          border: "sm",
+          borderColor: "grey",
           sx: styles3.card,
           ...overlayProps
         },
@@ -3427,7 +3445,7 @@ var texts14 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React73__default.lazy(() => import('./CountryCodeSelect-FODJ4ZSF.mjs'));
+var LazyCountryCodeSelect = React73__default.lazy(() => import('./CountryCodeSelect-C2XKHNTP.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React73__default.createElement(Radio$1, { ...props, ref });
 });
@@ -13329,13 +13347,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"
@@ -13660,8 +13676,8 @@ var getColorSchemeBaseProps2 = (props) => {
   switch (props.colorScheme) {
     case "white":
       return {
-        backgroundColor: "white",
-        color: "darkGrey"
+        ...floatingBackground("default", props),
+        color: mode("text.default.light", "text.default.dark")(props)
       };
     case "grey":
       return {
@@ -13708,6 +13724,7 @@ var config44 = defineStyleConfig$1({
     fontSize: "inherit",
     display: "block",
     borderRadius: "md",
+    cursor: "pointer",
     ...focusVisibleStyles(props),
     _disabled: {
       ...baseBackground("disabled", props),
@@ -13744,6 +13761,7 @@ var config44 = defineStyleConfig$1({
       boxShadow: "sm",
       _hover: {
         ...floatingBackground("hover", props),
+        ...floatingBorder("hover", props),
         boxShadow: "md"
       },
       _active: {

package/dist/index.d.mts

@@ -58,8 +58,8 @@ type StackProps = Exclude<StackProps$1, "direction"> & {
  *
  * ```tsx
  * <Stack spacing={4}>
- *   <Card>Here's one card</Card>
- *   <Card>Here's another card, with a lot of space between it</Card>
+ *   <StaticCard>Here's one card</StaticCard>
+ *   <StaticCard>Here's another card, with a lot of space between it</StaticCard>
  * </Stack>
  * ```
  */
@@ -209,11 +209,9 @@ type StaticCardProps = BoxProps & {
  */
 declare const StaticCard: _chakra_ui_system_dist_system_types.ComponentWithAs<As, StaticCardProps>;
 
-type PressableCardProps = Omit<BoxProps, "as"> & {
+type PressableCardProps = BoxProps & {
     /** Defaults to "base"  */
     variant: "floating" | "accent" | "base";
-    /** Defaults to "button"  */
-    as: "button" | "a" | "label";
 };
 /**
  * `PressableCard` is a component that renders a pressable card.
@@ -222,7 +220,6 @@ type PressableCardProps = Omit<BoxProps, "as"> & {
  * It can be rendered as a button, link, label, or any other HTML element by specifying the `as` prop.
  * If no `as` prop is provided, it defaults to a button.
  *
- * The `size` prop can be used to control the size of the card. It defaults to "sm".
  * The `variant` prop can be used to control the style variant of the card. It defaults to "base".
  *
  * Example usage:
@@ -245,7 +242,7 @@ type PressableCardProps = Omit<BoxProps, "as"> & {
  *
  * @see StaticCard
  */
-declare const PressableCard: ({ children, as, variant, ...props }: PressableCardProps) => React.JSX.Element;
+declare const PressableCard: _chakra_ui_system_dist_system_types.ComponentWithAs<As, PressableCardProps>;
 
 type AccordionProps = Omit<AccordionProps$1, "variant" | "size"> & {
     /**
@@ -2109,7 +2106,7 @@ type NudgeProps = {
  *  name="my-nudge"
  *  content="Check out this enormous new feature!"
  * >
- *   <Card variant="base" padding={2} width="fit-content">My new feature</Card>
+ *   <StaticCard variant="base" padding={2} width="fit-content">My new feature</StaticCard>
  * </Nudge>
  * ```
  */
@@ -2134,9 +2131,9 @@ type WizardNudgeProps = Omit<NudgeProps, "actions" | "content"> & {
  *  name="my-wizard-nudge"
  *  introducedDate="2024-02-19"
  * >
- *   <Card width="fit-content" padding={2}>
+ *   <StaticCard width="fit-content" padding={2}>
  *    My new feature
- *  </Card>
+ *  </StaticCard>
  * </WizardNudge>
  * ```
  */
@@ -6630,14 +6627,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;
@@ -7185,8 +7180,8 @@ declare const theme: {
         };
         StaticCard: {
             baseStyle?: ((props: any) => {
-                backgroundColor: string;
                 color: string;
+                backgroundColor: string;
                 _focusVisible: {
                     outlineWidth: string;
                     outlineColor: string;
@@ -7200,8 +7195,7 @@ declare const theme: {
                 display: string;
                 borderRadius: string;
             } | {
-                backgroundColor: string;
-                color: string;
+                backgroundColor: any;
                 _focusVisible: {
                     outlineWidth: string;
                     outlineColor: string;
@@ -7214,6 +7208,7 @@ declare const theme: {
                 fontSize: string;
                 display: string;
                 borderRadius: string;
+                color: string;
             }) | undefined;
             sizes?: {
                 [key: string]: _chakra_ui_styled_system.SystemStyleInterpolation;
@@ -7247,6 +7242,7 @@ declare const theme: {
                 fontSize: string;
                 display: string;
                 borderRadius: string;
+                cursor: string;
             }) | undefined;
             sizes?: {
                 [key: string]: _chakra_ui_styled_system.SystemStyleInterpolation;
@@ -7317,6 +7313,8 @@ declare const theme: {
                     boxShadow: string;
                     _hover: {
                         boxShadow: string;
+                        outline: string;
+                        outlineColor: string;
                         backgroundColor: string;
                     };
                     _active: {
@@ -9417,4 +9415,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 };

package/dist/index.d.ts

@@ -58,8 +58,8 @@ type StackProps = Exclude<StackProps$1, "direction"> & {
  *
  * ```tsx
  * <Stack spacing={4}>
- *   <Card>Here's one card</Card>
- *   <Card>Here's another card, with a lot of space between it</Card>
+ *   <StaticCard>Here's one card</StaticCard>
+ *   <StaticCard>Here's another card, with a lot of space between it</StaticCard>
  * </Stack>
  * ```
  */
@@ -209,11 +209,9 @@ type StaticCardProps = BoxProps & {
  */
 declare const StaticCard: _chakra_ui_system_dist_system_types.ComponentWithAs<As, StaticCardProps>;
 
-type PressableCardProps = Omit<BoxProps, "as"> & {
+type PressableCardProps = BoxProps & {
     /** Defaults to "base"  */
     variant: "floating" | "accent" | "base";
-    /** Defaults to "button"  */
-    as: "button" | "a" | "label";
 };
 /**
  * `PressableCard` is a component that renders a pressable card.
@@ -222,7 +220,6 @@ type PressableCardProps = Omit<BoxProps, "as"> & {
  * It can be rendered as a button, link, label, or any other HTML element by specifying the `as` prop.
  * If no `as` prop is provided, it defaults to a button.
  *
- * The `size` prop can be used to control the size of the card. It defaults to "sm".
  * The `variant` prop can be used to control the style variant of the card. It defaults to "base".
  *
  * Example usage:
@@ -245,7 +242,7 @@ type PressableCardProps = Omit<BoxProps, "as"> & {
  *
  * @see StaticCard
  */
-declare const PressableCard: ({ children, as, variant, ...props }: PressableCardProps) => React.JSX.Element;
+declare const PressableCard: _chakra_ui_system_dist_system_types.ComponentWithAs<As, PressableCardProps>;
 
 type AccordionProps = Omit<AccordionProps$1, "variant" | "size"> & {
     /**
@@ -2109,7 +2106,7 @@ type NudgeProps = {
  *  name="my-nudge"
  *  content="Check out this enormous new feature!"
  * >
- *   <Card variant="base" padding={2} width="fit-content">My new feature</Card>
+ *   <StaticCard variant="base" padding={2} width="fit-content">My new feature</StaticCard>
  * </Nudge>
  * ```
  */
@@ -2134,9 +2131,9 @@ type WizardNudgeProps = Omit<NudgeProps, "actions" | "content"> & {
  *  name="my-wizard-nudge"
  *  introducedDate="2024-02-19"
  * >
- *   <Card width="fit-content" padding={2}>
+ *   <StaticCard width="fit-content" padding={2}>
  *    My new feature
- *  </Card>
+ *  </StaticCard>
  * </WizardNudge>
  * ```
  */
@@ -6630,14 +6627,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;
@@ -7185,8 +7180,8 @@ declare const theme: {
         };
         StaticCard: {
             baseStyle?: ((props: any) => {
-                backgroundColor: string;
                 color: string;
+                backgroundColor: string;
                 _focusVisible: {
                     outlineWidth: string;
                     outlineColor: string;
@@ -7200,8 +7195,7 @@ declare const theme: {
                 display: string;
                 borderRadius: string;
             } | {
-                backgroundColor: string;
-                color: string;
+                backgroundColor: any;
                 _focusVisible: {
                     outlineWidth: string;
                     outlineColor: string;
@@ -7214,6 +7208,7 @@ declare const theme: {
                 fontSize: string;
                 display: string;
                 borderRadius: string;
+                color: string;
             }) | undefined;
             sizes?: {
                 [key: string]: _chakra_ui_styled_system.SystemStyleInterpolation;
@@ -7247,6 +7242,7 @@ declare const theme: {
                 fontSize: string;
                 display: string;
                 borderRadius: string;
+                cursor: string;
             }) | undefined;
             sizes?: {
                 [key: string]: _chakra_ui_styled_system.SystemStyleInterpolation;
@@ -7317,6 +7313,8 @@ declare const theme: {
                     boxShadow: string;
                     _hover: {
                         boxShadow: string;
+                        outline: string;
+                        outlineColor: string;
                         backgroundColor: string;
                     };
                     _active: {
@@ -9417,4 +9415,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 };

package/dist/index.js

@@ -878,9 +878,23 @@ var init_RadioCard = __esm({
     );
   }
 });
+function recursiveMap(children, fn) {
+  return React73__namespace.default.Children.map(children, (child) => {
+    if (React73__namespace.default.isValidElement(child) && child.props.children) {
+      child = React73__namespace.default.cloneElement(child, {
+        children: recursiveMap(child.props.children, fn)
+      });
+    }
+    if (React73__namespace.default.isValidElement(child)) {
+      return fn(child);
+    }
+    return child;
+  });
+}
 exports.RadioCardGroup = void 0;
 var init_RadioCardGroup = __esm({
   "src/layout/RadioCardGroup.tsx"() {
+    init_RadioCard();
     exports.RadioCardGroup = ({
       children,
       name,
@@ -897,13 +911,17 @@ var init_RadioCardGroup = __esm({
         ...props
       });
       const group = getRootProps();
-      return /* @__PURE__ */ React73__namespace.default.createElement(react.Stack, { direction: direction2, ...group }, React73.Children.map(
-        children,
-        (child) => {
+      return /* @__PURE__ */ React73__namespace.default.createElement(react.Stack, { direction: direction2, ...group }, recursiveMap(children, (child) => {
+        if (child.type === exports.RadioCard) {
           const radio = getRadioProps({ value: child.props.value });
-          return React73__namespace.default.cloneElement(child, { ...radio, variant, ...props });
+          const variantValue = variant;
+          return React73__namespace.default.cloneElement(
+            child,
+            { ...radio, variant: variantValue, ...props }
+          );
         }
-      ));
+        return child;
+      }));
     };
   }
 });
@@ -923,15 +941,14 @@ var init_StaticCard = __esm({
 exports.PressableCard = void 0;
 var init_PressableCard = __esm({
   "src/layout/PressableCard.tsx"() {
-    exports.PressableCard = ({
-      children,
-      as = "button",
-      variant = "base",
-      ...props
-    }) => {
-      const styles3 = react.useStyleConfig("PressableCard", { variant });
-      return /* @__PURE__ */ React73__namespace.default.createElement(react.Box, { as, __css: styles3, ...props }, children);
-    };
+    exports.PressableCard = react.forwardRef(
+      ({ children, variant = "base", ...props }, ref) => {
+        const styles3 = react.useStyleConfig("PressableCard", {
+          variant
+        });
+        return /* @__PURE__ */ React73__namespace.default.createElement(react.Box, { __css: styles3, ...props, ref }, children);
+      }
+    );
   }
 });
 var init_layout = __esm({
@@ -3155,10 +3172,12 @@ var init_CardSelect = __esm({
             placement
           },
           /* @__PURE__ */ React73__namespace.default.createElement(
-            exports.Card,
+            exports.StaticCard,
             {
               colorScheme: "white",
               size: "lg",
+              border: "sm",
+              borderColor: "grey",
               sx: styles3.card,
               ...overlayProps
             },
@@ -15122,13 +15141,11 @@ var init_table2 = __esm({
         table: {
           borderCollapse: "collapse",
           ...baseText("default", props),
-          width: "100%",
-          minWidth: "600px"
+          width: "100%"
         },
         th: {
           fontWeight: "bold",
-          textAlign: "start",
-          minWidth: "68px"
+          textAlign: "start"
         },
         td: {
           textAlign: "start"
@@ -15462,6 +15479,7 @@ var init_static_card = __esm({
   "src/theme/components/static-card.ts"() {
     init_foundations();
     init_focus_utils();
+    init_floating_utils();
     config43 = react.defineStyleConfig({
       baseStyle: (props) => ({
         appearance: "none",
@@ -15481,8 +15499,8 @@ var init_static_card = __esm({
       switch (props.colorScheme) {
         case "white":
           return {
-            backgroundColor: "white",
-            color: "darkGrey"
+            ...floatingBackground("default", props),
+            color: themeTools.mode("text.default.light", "text.default.dark")(props)
           };
         case "grey":
           return {
@@ -15538,6 +15556,7 @@ var init_pressable_card = __esm({
         fontSize: "inherit",
         display: "block",
         borderRadius: "md",
+        cursor: "pointer",
         ...focusVisibleStyles(props),
         _disabled: {
           ...baseBackground("disabled", props),
@@ -15574,6 +15593,7 @@ var init_pressable_card = __esm({
           boxShadow: "sm",
           _hover: {
             ...floatingBackground("hover", props),
+            ...floatingBorder("hover", props),
             boxShadow: "md"
           },
           _active: {

package/dist/index.mjs

@@ -1 +1 @@
-export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, FullScreenDrawer, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, Nudge, NumericStepper, OrderedList, Pagination, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, StaticCard, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-S335RZ6M.mjs';
+export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, FullScreenDrawer, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, Nudge, NumericStepper, OrderedList, Pagination, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, StaticCard, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-ZDOSE4VD.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "9.8.1",
+  "version": "9.8.3",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -23,7 +23,7 @@
     "@emotion/styled": "^11.10.4",
     "@internationalized/date": "^3.0.1",
     "@vygruppen/spor-design-tokens": ">3.4.0",
-    "@vygruppen/spor-icon-react": ">3.2.3",
+    "@vygruppen/spor-icon-react": ">3.6.0",
     "@vygruppen/spor-loader": ">0.3.1",
     "awesome-phonenumber": "^5.10.0",
     "deepmerge": "^4.3.1",

package/src/input/CardSelect.tsx

@@ -14,7 +14,7 @@ import {
 import React, { useEffect, useRef, useState } from "react";
 import { AriaPositionProps, useButton, useOverlayTrigger } from "react-aria";
 import { useOverlayTriggerState } from "react-stately";
-import { Card } from "..";
+import { StaticCard } from "..";
 import { Dialog } from "./Dialog";
 import { Popover } from "./Popover";
 
@@ -149,14 +149,16 @@ export const CardSelect = forwardRef<CardSelectProps, "button">(
             crossOffset={crossOffset}
             placement={placement}
           >
-            <Card
+            <StaticCard
               colorScheme="white"
               size="lg"
+              border={"sm"}
+              borderColor={"grey"}
               sx={styles.card}
               {...overlayProps}
             >
               <Dialog aria-label={label}>{children}</Dialog>
-            </Card>
+            </StaticCard>
           </Popover>
         )}
       </Box>

package/src/layout/PressableCard.tsx

@@ -1,11 +1,15 @@
 import React from "react";
-import { Box, BoxProps, useStyleConfig } from "@chakra-ui/react";
+import {
+  As,
+  Box,
+  BoxProps,
+  forwardRef,
+  useStyleConfig,
+} from "@chakra-ui/react";
 
-type PressableCardProps = Omit<BoxProps, "as"> & {
+type PressableCardProps = BoxProps & {
   /** Defaults to "base"  */
   variant: "floating" | "accent" | "base";
-  /** Defaults to "button"  */
-  as: "button" | "a" | "label";
 };
 
 /**
@@ -15,7 +19,6 @@ type PressableCardProps = Omit<BoxProps, "as"> & {
  * It can be rendered as a button, link, label, or any other HTML element by specifying the `as` prop.
  * If no `as` prop is provided, it defaults to a button.
  *
- * The `size` prop can be used to control the size of the card. It defaults to "sm".
  * The `variant` prop can be used to control the style variant of the card. It defaults to "base".
  *
  * Example usage:
@@ -39,16 +42,16 @@ type PressableCardProps = Omit<BoxProps, "as"> & {
  * @see StaticCard
  */
 
-export const PressableCard = ({
-  children,
-  as = "button",
-  variant = "base",
-  ...props
-}: PressableCardProps) => {
-  const styles = useStyleConfig("PressableCard", { variant });
-  return (
-    <Box as={as} __css={styles} {...props}>
-      {children}
-    </Box>
-  );
-};
+export const PressableCard = forwardRef<PressableCardProps, As>(
+  ({ children, variant = "base", ...props }, ref) => {
+    const styles = useStyleConfig("PressableCard", {
+      variant,
+    });
+
+    return (
+      <Box __css={styles} {...props} ref={ref}>
+        {children}
+      </Box>
+    );
+  },
+);

package/src/layout/RadioCard.tsx

@@ -9,7 +9,7 @@ import {
 import { dataAttr } from "@chakra-ui/utils";
 import React, { useId } from "react";
 
-type RadioCardProps = UseRadioProps &
+export type RadioCardProps = UseRadioProps &
   BoxProps & {
     children: React.ReactNode;
     /** Defaults to "base" */

package/src/layout/RadioCardGroup.tsx

@@ -5,6 +5,7 @@ import {
   Stack,
 } from "@chakra-ui/react";
 import React, { Children } from "react";
+import { RadioCard, RadioCardProps } from "./RadioCard";
 
 type RadioCardGroupProps = RadioGroupProps & {
   children: React.ReactNode;
@@ -78,13 +79,38 @@ export const RadioCardGroup = ({
 
   return (
     <Stack direction={direction} {...group}>
-      {Children.map(
-        children as React.ReactElement[],
-        (child: React.ReactElement) => {
+      {recursiveMap(children, (child: React.ReactElement) => {
+        if (child.type === RadioCard) {
           const radio = getRadioProps({ value: child.props.value });
-          return React.cloneElement(child, { ...radio, variant, ...props });
-        },
-      )}
+          const variantValue = variant as "base" | "floating" | undefined;
+          return React.cloneElement(
+            child as React.ReactElement<RadioCardProps>,
+            { ...radio, variant: variantValue, ...props },
+          );
+        }
+        return child;
+      })}
     </Stack>
   );
 };
+
+function recursiveMap(
+  children: React.ReactNode,
+  fn: (child: React.ReactElement) => React.ReactElement,
+): React.ReactNode {
+  return React.Children.map(children, (child) => {
+    // If this child is a React element and has children, recurse
+    if (React.isValidElement(child) && child.props.children) {
+      child = React.cloneElement(child as React.ReactElement<any>, {
+        children: recursiveMap(child.props.children, fn),
+      });
+    }
+
+    // Apply the function to the child (if it's a React element)
+    if (React.isValidElement(child)) {
+      return fn(child);
+    }
+
+    return child;
+  });
+}

package/src/layout/Stack.tsx

@@ -30,8 +30,8 @@ export type StackProps = Exclude<ChakraStackProps, "direction"> & {
  *
  * ```tsx
  * <Stack spacing={4}>
- *   <Card>Here's one card</Card>
- *   <Card>Here's another card, with a lot of space between it</Card>
+ *   <StaticCard>Here's one card</StaticCard>
+ *   <StaticCard>Here's another card, with a lot of space between it</StaticCard>
  * </Stack>
  * ```
  */

package/src/nudge/Nudge.tsx

@@ -74,7 +74,7 @@ const EXPIRATION_DELAY = 1000 * 60 * 60 * 24 * 30; // 30 days
  *  name="my-nudge"
  *  content="Check out this enormous new feature!"
  * >
- *   <Card variant="base" padding={2} width="fit-content">My new feature</Card>
+ *   <StaticCard variant="base" padding={2} width="fit-content">My new feature</StaticCard>
  * </Nudge>
  * ```
  */

package/src/nudge/WizardNudge.tsx

@@ -30,9 +30,9 @@ export type WizardNudgeProps = Omit<NudgeProps, "actions" | "content"> & {
  *  name="my-wizard-nudge"
  *  introducedDate="2024-02-19"
  * >
- *   <Card width="fit-content" padding={2}>
+ *   <StaticCard width="fit-content" padding={2}>
  *    My new feature
- *  </Card>
+ *  </StaticCard>
  * </WizardNudge>
  * ```
  */

package/src/theme/components/pressable-card.ts

@@ -1,6 +1,6 @@
 import { defineStyleConfig } from "@chakra-ui/react";
 import { baseBackground, baseBorder, baseText } from "../utils/base-utils";
-import { floatingBackground } from "../utils/floating-utils";
+import { floatingBackground, floatingBorder } from "../utils/floating-utils";
 import { focusVisibleStyles } from "../utils/focus-utils";
 import { accentBackground } from "../utils/accent-utils";
 
@@ -12,6 +12,7 @@ const config = defineStyleConfig({
     fontSize: "inherit",
     display: "block",
     borderRadius: "md",
+    cursor: "pointer",
     ...focusVisibleStyles(props),
     _disabled: {
       ...baseBackground("disabled", props),
@@ -48,6 +49,7 @@ const config = defineStyleConfig({
       boxShadow: "sm",
       _hover: {
         ...floatingBackground("hover", props),
+        ...floatingBorder("hover", props),
         boxShadow: "md",
       },
       _active: {

package/src/theme/components/static-card.ts

@@ -1,6 +1,9 @@
 import { defineStyleConfig } from "@chakra-ui/react";
 import { colors } from "../foundations";
 import { focusVisibleStyles } from "../utils/focus-utils";
+import { bg } from "../utils/bg-utils";
+import { floatingBackground } from "../utils/floating-utils";
+import { mode } from "@chakra-ui/theme-tools";
 
 const config = defineStyleConfig({
   baseStyle: (props: any) => ({
@@ -32,12 +35,12 @@ type CardThemeProps = {
     | "darkYellow";
 };
 
-const getColorSchemeBaseProps = (props: CardThemeProps) => {
+const getColorSchemeBaseProps = (props: any) => {
   switch (props.colorScheme) {
     case "white":
       return {
-        backgroundColor: "white",
-        color: "darkGrey",
+        ...floatingBackground("default", props),
+        color: mode("text.default.light", "text.default.dark")(props),
       };
     case "grey":
       return {

package/src/theme/components/table.ts

@@ -17,12 +17,10 @@ const config = helpers.defineMultiStyleConfig({
       borderCollapse: "collapse",
       ...baseText("default", props),
       width: "100%",
-      minWidth: "600px",
     },
     th: {
       fontWeight: "bold",
       textAlign: "start",
-      minWidth: "68px",
     },
     td: {
       textAlign: "start",