@vygruppen/spor-react 9.8.0 → 9.8.2

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@9.8.0 build
+> @vygruppen/spor-react@9.8.2 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
 ESM dist/index.mjs                      2.11 KB
-ESM dist/CountryCodeSelect-EKYAUNTI.mjs 1.19 KB
-ESM dist/chunk-3P7NVQKW.mjs             397.80 KB
-ESM ⚡️ Build success in 2067ms
-CJS dist/index.js 508.29 KB
-CJS ⚡️ Build success in 2068ms
-DTS ⚡️ Build success in 11221ms
-DTS dist/index.d.ts  337.50 KB
-DTS dist/index.d.mts 337.50 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

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @vygruppen/spor-react
 
+## 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
+
+- 6852a42: Update docs for PressableCard and RadioCard
+
 ## 9.8.0
 
 ### Minor Changes

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

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

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

@@ -845,16 +845,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",
-  size: size2 = "sm",
-  variant = "base",
-  ...props
-}) => {
-  const styles3 = useStyleConfig("PressableCard", { variant, size: size2 });
-  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,
@@ -2638,10 +2636,12 @@ var CardSelect = forwardRef(
         placement
       },
       /* @__PURE__ */ React73__default.createElement(
-        Card2,
+        StaticCard,
         {
           colorScheme: "white",
           size: "lg",
+          border: "sm",
+          borderColor: "grey",
           sx: styles3.card,
           ...overlayProps
         },
@@ -3428,7 +3428,7 @@ var texts14 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React73__default.lazy(() => import('./CountryCodeSelect-EKYAUNTI.mjs'));
+var LazyCountryCodeSelect = React73__default.lazy(() => import('./CountryCodeSelect-46ZPAYGJ.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React73__default.createElement(Radio$1, { ...props, ref });
 });
@@ -13661,8 +13661,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 {
@@ -13709,6 +13709,7 @@ var config44 = defineStyleConfig$1({
     fontSize: "inherit",
     display: "block",
     borderRadius: "md",
+    cursor: "pointer",
     ...focusVisibleStyles(props),
     _disabled: {
       ...baseBackground("disabled", props),
@@ -13745,6 +13746,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>
  * ```
  */
@@ -67,6 +67,7 @@ declare const Stack: _chakra_ui_system_dist_system_types.ComponentWithAs<"div",
 
 type RadioCardProps = UseRadioProps & BoxProps & {
     children: React.ReactNode;
+    /** Defaults to "base" */
     variant: "floating" | "base";
 };
 /**
@@ -116,7 +117,16 @@ declare const RadioCard: _chakra_ui_system_dist_system_types.ComponentWithAs<"di
 type RadioCardGroupProps = RadioGroupProps$1 & {
     children: React.ReactNode;
     props?: RadioGroupProps$1;
+    /** Defaults to "row" */
     direction?: StackDirection;
+    /** Defaults to "base" */
+    variant?: string;
+    /** The name of the radio group */
+    name?: string;
+    /** The default value of the radio group */
+    defaultValue?: string;
+    /** The callback function to be called when the radio group value changes */
+    onChange?: (value: string) => void;
 };
 /**
  * Radio card groups are used to group several radio cards together.
@@ -199,13 +209,9 @@ type StaticCardProps = BoxProps & {
  */
 declare const StaticCard: _chakra_ui_system_dist_system_types.ComponentWithAs<As, StaticCardProps>;
 
-type PressableCardProps = Omit<BoxProps, "as"> & {
-    /** Use "floating" | "accent" | "base". Defaults to base  */
+type PressableCardProps = BoxProps & {
+    /** Defaults to "base"  */
     variant: "floating" | "accent" | "base";
-    /** Use "sm" | "lg". Defaults to sm  */
-    size?: "sm" | "lg";
-    /** Use "button" | "a" | "label". Defaults to button  */
-    as: "button" | "a" | "label";
 };
 /**
  * `PressableCard` is a component that renders a pressable card.
@@ -214,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:
@@ -237,7 +242,7 @@ type PressableCardProps = Omit<BoxProps, "as"> & {
  *
  * @see StaticCard
  */
-declare const PressableCard: ({ children, as, size, 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"> & {
     /**
@@ -2101,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>
  * ```
  */
@@ -2126,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>
  * ```
  */
@@ -7177,8 +7182,8 @@ declare const theme: {
         };
         StaticCard: {
             baseStyle?: ((props: any) => {
-                backgroundColor: string;
                 color: string;
+                backgroundColor: string;
                 _focusVisible: {
                     outlineWidth: string;
                     outlineColor: string;
@@ -7192,8 +7197,7 @@ declare const theme: {
                 display: string;
                 borderRadius: string;
             } | {
-                backgroundColor: string;
-                color: string;
+                backgroundColor: any;
                 _focusVisible: {
                     outlineWidth: string;
                     outlineColor: string;
@@ -7206,6 +7210,7 @@ declare const theme: {
                 fontSize: string;
                 display: string;
                 borderRadius: string;
+                color: string;
             }) | undefined;
             sizes?: {
                 [key: string]: _chakra_ui_styled_system.SystemStyleInterpolation;
@@ -7239,6 +7244,7 @@ declare const theme: {
                 fontSize: string;
                 display: string;
                 borderRadius: string;
+                cursor: string;
             }) | undefined;
             sizes?: {
                 [key: string]: _chakra_ui_styled_system.SystemStyleInterpolation;
@@ -7309,6 +7315,8 @@ declare const theme: {
                     boxShadow: string;
                     _hover: {
                         boxShadow: string;
+                        outline: string;
+                        outlineColor: string;
                         backgroundColor: string;
                     };
                     _active: {

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>
  * ```
  */
@@ -67,6 +67,7 @@ declare const Stack: _chakra_ui_system_dist_system_types.ComponentWithAs<"div",
 
 type RadioCardProps = UseRadioProps & BoxProps & {
     children: React.ReactNode;
+    /** Defaults to "base" */
     variant: "floating" | "base";
 };
 /**
@@ -116,7 +117,16 @@ declare const RadioCard: _chakra_ui_system_dist_system_types.ComponentWithAs<"di
 type RadioCardGroupProps = RadioGroupProps$1 & {
     children: React.ReactNode;
     props?: RadioGroupProps$1;
+    /** Defaults to "row" */
     direction?: StackDirection;
+    /** Defaults to "base" */
+    variant?: string;
+    /** The name of the radio group */
+    name?: string;
+    /** The default value of the radio group */
+    defaultValue?: string;
+    /** The callback function to be called when the radio group value changes */
+    onChange?: (value: string) => void;
 };
 /**
  * Radio card groups are used to group several radio cards together.
@@ -199,13 +209,9 @@ type StaticCardProps = BoxProps & {
  */
 declare const StaticCard: _chakra_ui_system_dist_system_types.ComponentWithAs<As, StaticCardProps>;
 
-type PressableCardProps = Omit<BoxProps, "as"> & {
-    /** Use "floating" | "accent" | "base". Defaults to base  */
+type PressableCardProps = BoxProps & {
+    /** Defaults to "base"  */
     variant: "floating" | "accent" | "base";
-    /** Use "sm" | "lg". Defaults to sm  */
-    size?: "sm" | "lg";
-    /** Use "button" | "a" | "label". Defaults to button  */
-    as: "button" | "a" | "label";
 };
 /**
  * `PressableCard` is a component that renders a pressable card.
@@ -214,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:
@@ -237,7 +242,7 @@ type PressableCardProps = Omit<BoxProps, "as"> & {
  *
  * @see StaticCard
  */
-declare const PressableCard: ({ children, as, size, 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"> & {
     /**
@@ -2101,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>
  * ```
  */
@@ -2126,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>
  * ```
  */
@@ -7177,8 +7182,8 @@ declare const theme: {
         };
         StaticCard: {
             baseStyle?: ((props: any) => {
-                backgroundColor: string;
                 color: string;
+                backgroundColor: string;
                 _focusVisible: {
                     outlineWidth: string;
                     outlineColor: string;
@@ -7192,8 +7197,7 @@ declare const theme: {
                 display: string;
                 borderRadius: string;
             } | {
-                backgroundColor: string;
-                color: string;
+                backgroundColor: any;
                 _focusVisible: {
                     outlineWidth: string;
                     outlineColor: string;
@@ -7206,6 +7210,7 @@ declare const theme: {
                 fontSize: string;
                 display: string;
                 borderRadius: string;
+                color: string;
             }) | undefined;
             sizes?: {
                 [key: string]: _chakra_ui_styled_system.SystemStyleInterpolation;
@@ -7239,6 +7244,7 @@ declare const theme: {
                 fontSize: string;
                 display: string;
                 borderRadius: string;
+                cursor: string;
             }) | undefined;
             sizes?: {
                 [key: string]: _chakra_ui_styled_system.SystemStyleInterpolation;
@@ -7309,6 +7315,8 @@ declare const theme: {
                     boxShadow: string;
                     _hover: {
                         boxShadow: string;
+                        outline: string;
+                        outlineColor: string;
                         backgroundColor: string;
                     };
                     _active: {

package/dist/index.js

@@ -923,16 +923,14 @@ var init_StaticCard = __esm({
 exports.PressableCard = void 0;
 var init_PressableCard = __esm({
   "src/layout/PressableCard.tsx"() {
-    exports.PressableCard = ({
-      children,
-      as = "button",
-      size: size2 = "sm",
-      variant = "base",
-      ...props
-    }) => {
-      const styles3 = react.useStyleConfig("PressableCard", { variant, size: size2 });
-      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({
@@ -3156,10 +3154,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
             },
@@ -15463,6 +15463,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",
@@ -15482,8 +15483,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 {
@@ -15539,6 +15540,7 @@ var init_pressable_card = __esm({
         fontSize: "inherit",
         display: "block",
         borderRadius: "md",
+        cursor: "pointer",
         ...focusVisibleStyles(props),
         _disabled: {
           ...baseBackground("disabled", props),
@@ -15575,6 +15577,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-3P7NVQKW.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-4QF4PJTK.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "9.8.0",
+  "version": "9.8.2",
   "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,13 +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"> & {
-  /** Use "floating" | "accent" | "base". Defaults to base  */
+type PressableCardProps = BoxProps & {
+  /** Defaults to "base"  */
   variant: "floating" | "accent" | "base";
-  /** Use "sm" | "lg". Defaults to sm  */
-  size?: "sm" | "lg";
-  /** Use "button" | "a" | "label". Defaults to button  */
-  as: "button" | "a" | "label";
 };
 
 /**
@@ -17,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:
@@ -41,17 +42,16 @@ type PressableCardProps = Omit<BoxProps, "as"> & {
  * @see StaticCard
  */
 
-export const PressableCard = ({
-  children,
-  as = "button",
-  size = "sm",
-  variant = "base",
-  ...props
-}: PressableCardProps) => {
-  const styles = useStyleConfig("PressableCard", { variant, size });
-  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

@@ -12,6 +12,7 @@ import React, { useId } from "react";
 type RadioCardProps = UseRadioProps &
   BoxProps & {
     children: React.ReactNode;
+    /** Defaults to "base" */
     variant: "floating" | "base";
   };
 

package/src/layout/RadioCardGroup.tsx

@@ -9,7 +9,16 @@ import React, { Children } from "react";
 type RadioCardGroupProps = RadioGroupProps & {
   children: React.ReactNode;
   props?: RadioGroupProps;
+  /** Defaults to "row" */
   direction?: StackDirection;
+  /** Defaults to "base" */
+  variant?: string;
+  /** The name of the radio group */
+  name?: string;
+  /** The default value of the radio group */
+  defaultValue?: string;
+  /** The callback function to be called when the radio group value changes */
+  onChange?: (value: string) => void;
 };
 
 /**

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 {