@vygruppen/spor-react 9.7.0 → 9.8.0

package/dist/index.js

@@ -907,12 +907,42 @@ var init_RadioCardGroup = __esm({
     };
   }
 });
+exports.StaticCard = void 0;
+var init_StaticCard = __esm({
+  "src/layout/StaticCard.tsx"() {
+    exports.StaticCard = react.forwardRef(
+      ({ colorScheme = "white", children, ...props }, ref) => {
+        const styles3 = react.useStyleConfig("StaticCard", {
+          colorScheme
+        });
+        return /* @__PURE__ */ React73__namespace.default.createElement(react.Box, { __css: styles3, ...props, ref }, children, /* @__PURE__ */ React73__namespace.default.createElement(react.Card, null));
+      }
+    );
+  }
+});
+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);
+    };
+  }
+});
 var init_layout = __esm({
   "src/layout/index.tsx"() {
     init_Divider();
     init_Stack();
     init_RadioCard();
     init_RadioCardGroup();
+    init_StaticCard();
+    init_PressableCard();
   }
 });
 var AccordionContext, AccordionProvider, useAccordionContext;
@@ -1938,6 +1968,9 @@ var init_Card = __esm({
   "src/card/Card.tsx"() {
     exports.Card = react.forwardRef(
       ({ size: size2 = "sm", colorScheme = "white", children, ...props }, ref) => {
+        console.warn(
+          "Warning: Card is deprecated. Use `StaticCard` or `PressableCard` instead."
+        );
         const styles3 = react.useStyleConfig("Card", {
           colorScheme,
           size: size2
@@ -1947,37 +1980,11 @@ var init_Card = __esm({
     );
   }
 });
-exports.StaticCard = void 0;
-var init_StaticCard = __esm({
-  "src/card/StaticCard.tsx"() {
-    exports.StaticCard = ({ colorScheme, ...props }) => {
-      const styles3 = react.useStyleConfig("StaticCard", { colorScheme });
-      return /* @__PURE__ */ React73__namespace.default.createElement(react.Box, { __css: styles3, ...props });
-    };
-  }
-});
-exports.PressableCard = void 0;
-var init_PressableCard = __esm({
-  "src/card/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);
-    };
-  }
-});
 
 // src/card/index.tsx
 var init_card = __esm({
   "src/card/index.tsx"() {
     init_Card();
-    init_StaticCard();
-    init_PressableCard();
   }
 });
 exports.Badge = void 0;
@@ -11231,6 +11238,12 @@ function baseBorder(state2, props) {
         )(props)
       };
     }
+    case "active": {
+      return {
+        outline: "2px solid",
+        outlineColor: themeTools.mode("base.outline.light", "base.outline.dark")(props)
+      };
+    }
     case "invalid": {
       return {
         outline: "2px solid",
@@ -15449,7 +15462,6 @@ var config43, static_card_default, getColorSchemeBaseProps2;
 var init_static_card = __esm({
   "src/theme/components/static-card.ts"() {
     init_foundations();
-    init_base_utils();
     init_focus_utils();
     config43 = react.defineStyleConfig({
       baseStyle: (props) => ({
@@ -15459,7 +15471,6 @@ var init_static_card = __esm({
         fontSize: "inherit",
         display: "block",
         borderRadius: "md",
-        // Except for white cards, all cards are light mode always
         color: "text.default.light",
         ...focusVisibleStyles(props),
         ...getColorSchemeBaseProps2(props)
@@ -15471,12 +15482,8 @@ var init_static_card = __esm({
       switch (props.colorScheme) {
         case "white":
           return {
-            ...baseBorder("default", props),
-            backgroundColor: themeTools.mode(
-              "white",
-              `color-mix(in srgb, white 10%, var(--spor-colors-bg-default-dark))`
-            )(props),
-            color: "inherit"
+            backgroundColor: "white",
+            color: "darkGrey"
           };
         case "grey":
           return {
@@ -15511,33 +15518,13 @@ var init_static_card = __esm({
         }
         default:
           return {
-            backgroundColor: ((_a6 = colors2[props.colorScheme]) == null ? void 0 : _a6[100]) ?? "default",
-            ...baseText("default", props)
+            backgroundColor: ((_a6 = colors2[props.colorScheme]) == null ? void 0 : _a6[100]) ?? "default"
           };
       }
     };
   }
 });
-function getColorSchemeClickableProps2(props) {
-  switch (props.colorScheme) {
-    case "default":
-      return {
-        ...floatingBorder("default", props)
-      };
-    case "accent":
-      return {
-        ...accentBackground("default", props),
-        ...accentText("default", props),
-        _hover: {
-          ...accentBackground("hover", props)
-        },
-        _active: {
-          ...accentBackground("active", props)
-        }
-      };
-  }
-}
-var config44, pressable_card_default, getColorSchemeBaseProps3, getColorSchemeHoverProps2, getColorSchemeActiveProps2;
+var config44, pressable_card_default;
 var init_pressable_card = __esm({
   "src/theme/components/pressable-card.ts"() {
     init_base_utils();
@@ -15552,137 +15539,52 @@ var init_pressable_card = __esm({
         fontSize: "inherit",
         display: "block",
         borderRadius: "md",
-        ...getColorSchemeBaseProps3(props),
-        ...getColorSchemeClickableProps2(props),
         ...focusVisibleStyles(props),
-        ...getColorSchemeActiveProps2(props),
-        _hover: getColorSchemeHoverProps2(props),
         _disabled: {
           ...baseBackground("disabled", props),
-          ...baseBorder("disabled", props),
           ...baseText("disabled", props),
+          outline: "none",
           pointerEvents: "none"
         }
       }),
       variants: {
         base: (props) => ({
-          ...baseBackground("default", props),
+          ...baseBorder("default", props),
           _hover: {
-            ...baseBackground("hover", props)
+            ...baseBorder("hover", props)
           },
           _active: {
-            ...baseBackground("active", props)
+            ...baseBackground("active", props),
+            ...baseBorder("active", props)
           }
         }),
         accent: (props) => ({
           ...accentBackground("default", props),
+          boxShadow: "sm",
           _hover: {
-            ...accentBackground("hover", props)
+            ...accentBackground("hover", props),
+            boxShadow: "sm"
           },
           _active: {
-            ...accentBackground("active", props)
+            ...accentBackground("active", props),
+            boxShadow: "none"
           }
         }),
         floating: (props) => ({
           ...floatingBackground("default", props),
-          _hover: {
-            ...floatingBackground("hover", props)
-          },
-          _active: {
-            ...floatingBackground("active", props)
-          }
-        })
-      },
-      sizes: {
-        sm: {
           boxShadow: "sm",
           _hover: {
+            ...floatingBackground("hover", props),
             boxShadow: "md"
           },
           _active: {
+            ...floatingBackground("active", props),
             boxShadow: "none"
           }
-        },
-        lg: {
-          boxShadow: "md",
-          _hover: {
-            boxShadow: "lg"
-          },
-          _active: {
-            boxShadow: "sm"
-          }
-        }
+        })
       }
     });
     pressable_card_default = config44;
-    getColorSchemeBaseProps3 = (props) => {
-      switch (props.colorScheme) {
-        case "default":
-          return {
-            ...baseBorder("default", props),
-            backgroundColor: themeTools.mode(
-              "white",
-              `color-mix(in srgb, white 10%, var(--spor-colors-bg-default-dark))`
-            )(props),
-            color: "inherit"
-          };
-        case "accent":
-          return {
-            ...accentBackground("default", props),
-            ...accentText("default", props),
-            _hover: {
-              ...accentBackground("hover", props)
-            },
-            _active: {
-              ...accentBackground("active", props)
-            }
-          };
-      }
-    };
-    getColorSchemeHoverProps2 = (props) => {
-      switch (props.colorScheme) {
-        case "default":
-          return {
-            backgroundColor: themeTools.mode(
-              "white",
-              `color-mix(in srgb, white 20%, var(--spor-colors-bg-default-dark))`
-            )(props),
-            ...floatingBorder("hover", props)
-          };
-        case "accent":
-          return {
-            ...accentBackground("default", props),
-            ...accentText("default", props),
-            _hover: {
-              ...accentBackground("hover", props)
-            },
-            _active: {
-              ...accentBackground("active", props)
-            }
-          };
-      }
-    };
-    getColorSchemeActiveProps2 = (props) => {
-      const { colorScheme } = props;
-      switch (colorScheme) {
-        case "default":
-          return {
-            backgroundColor: themeTools.mode("bg.tertiary.light", `bg.default.dark`)(props),
-            ...floatingBorder("active", props)
-          };
-        case "accent":
-          return {
-            ...accentBackground("default", props),
-            ...accentText("default", props),
-            _hover: {
-              ...accentBackground("hover", props)
-            },
-            _active: {
-              ...accentBackground("active", props)
-            }
-          };
-      }
-    };
   }
 });
 

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-QGMF2EAE.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-3P7NVQKW.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "9.7.0",
+  "version": "9.8.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/src/card/Card.tsx

@@ -50,8 +50,15 @@ export type CardProps = Exclude<BoxProps, "size"> & {
  * </Card>
  * ```
  */
+
+/**
+ * @deprecated Card is deprecated. Use `StaticCard` or `PressableCard` instead.
+ */
 export const Card = forwardRef<CardProps, As>(
   ({ size = "sm", colorScheme = "white", children, ...props }, ref) => {
+    console.warn(
+      "Warning: Card is deprecated. Use `StaticCard` or `PressableCard` instead.",
+    );
     const styles = useStyleConfig("Card", {
       colorScheme,
       size,

package/src/card/index.tsx

@@ -1,3 +1 @@
 export * from "./Card";
-export * from "./StaticCard";
-export * from "./PressableCard";

package/src/layout/PressableCard.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { Box, BoxProps, useStyleConfig } from "@chakra-ui/react";
+
+type PressableCardProps = Omit<BoxProps, "as"> & {
+  /** Use "floating" | "accent" | "base". 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.
+ *
+ * The `PressableCard` component can be used to create a card that responds to user interactions.
+ * 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:
+ *
+ * ```tsx
+ * <PressableCard>
+ *   Content
+ * </PressableCard>
+ * ```
+ *
+ * To render the card as a different HTML element, specify the `as` prop:
+ *
+ * ```tsx
+ * <PressableCard as="a">
+ *   This is now a <a /> element
+ * </PressableCard>
+ * ```
+ *
+ * For a static card with other color schemes, use the `StaticCard` component.
+ *
+ * @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>
+  );
+};

package/src/layout/StaticCard.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import {
+  As,
+  Box,
+  BoxProps,
+  useStyleConfig,
+  forwardRef,
+  Card,
+} from "@chakra-ui/react";
+
+export type StaticCardProps = BoxProps & {
+  children: React.ReactNode;
+  /** Defaults to "white" */
+  colorScheme:
+    | "white"
+    | "grey"
+    | "green"
+    | "orange"
+    | "red"
+    | "yellow"
+    | "blue"
+    | "darkBlue"
+    | "darkGreen"
+    | "darkYellow";
+};
+
+/**
+ * `StaticCard` is a component that renders a static card.
+ *
+ * The `StaticCard` component can be used to create a card that does not respond to user interactions.
+ * It can be rendered as any HTML element by specifying the `as` prop.
+ *
+ * The `colorScheme` prop can be used to control the color scheme of the card. It defaults to "white".
+ *
+ * Example usage:
+ *
+ * ```tsx
+ * <StaticCard>
+ *   Content
+ * </StaticCard>
+ * ```
+ *
+ * To render the card as a different HTML element, specify the `as` prop:
+ *
+ * ```tsx
+ * <StaticCard as="section">
+ *   This is now a <section /> element
+ * </StaticCard>
+ * ```
+ *
+ * To change the color scheme of the card, specify the `colorScheme` prop:
+ *
+ * ```tsx
+ * <StaticCard colorScheme="orange">
+ *   An orange card
+ * </StaticCard>
+ * ```
+ *
+ * For a card with click functionality, use the `PressableCard` component.
+ *
+ * @see PressableCard
+ */
+
+export const StaticCard = forwardRef<StaticCardProps, As>(
+  ({ colorScheme = "white", children, ...props }, ref) => {
+    const styles = useStyleConfig("StaticCard", {
+      colorScheme,
+    });
+
+    return (
+      <Box __css={styles} {...props} ref={ref}>
+        {children}
+        <Card />
+      </Box>
+    );
+  },
+);

package/src/layout/index.tsx

@@ -28,3 +28,5 @@ export * from "./Divider";
 export * from "./Stack";
 export * from "./RadioCard";
 export * from "./RadioCardGroup";
+export * from "./StaticCard";
+export * from "./PressableCard";

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

@@ -1,179 +1,61 @@
 import { defineStyleConfig } from "@chakra-ui/react";
-import { mode } from "@chakra-ui/theme-tools";
 import { baseBackground, baseBorder, baseText } from "../utils/base-utils";
-import { floatingBackground, floatingBorder } from "../utils/floating-utils";
+import { floatingBackground } from "../utils/floating-utils";
 import { focusVisibleStyles } from "../utils/focus-utils";
-import { accentBackground, accentText } from "../utils/accent-utils";
+import { accentBackground } from "../utils/accent-utils";
 
 const config = defineStyleConfig({
-  baseStyle: (props: any) => ({
+  baseStyle: (props) => ({
     appearance: "none",
     border: "none",
     overflow: "hidden",
     fontSize: "inherit",
     display: "block",
     borderRadius: "md",
-    ...getColorSchemeBaseProps(props),
-    ...getColorSchemeClickableProps(props),
     ...focusVisibleStyles(props),
-    ...getColorSchemeActiveProps(props),
-    _hover: getColorSchemeHoverProps(props),
     _disabled: {
       ...baseBackground("disabled", props),
-      ...baseBorder("disabled", props),
       ...baseText("disabled", props),
+      outline: "none",
       pointerEvents: "none",
     },
   }),
   variants: {
     base: (props) => ({
-      ...baseBackground("default", props),
+      ...baseBorder("default", props),
       _hover: {
-        ...baseBackground("hover", props),
+        ...baseBorder("hover", props),
       },
       _active: {
         ...baseBackground("active", props),
+        ...baseBorder("active", props),
       },
     }),
     accent: (props) => ({
       ...accentBackground("default", props),
+      boxShadow: "sm",
       _hover: {
         ...accentBackground("hover", props),
+        boxShadow: "sm",
       },
       _active: {
         ...accentBackground("active", props),
+        boxShadow: "none",
       },
     }),
     floating: (props) => ({
       ...floatingBackground("default", props),
-      _hover: {
-        ...floatingBackground("hover", props),
-      },
-      _active: {
-        ...floatingBackground("active", props),
-      },
-    }),
-  },
-  sizes: {
-    sm: {
       boxShadow: "sm",
-
       _hover: {
+        ...floatingBackground("hover", props),
         boxShadow: "md",
       },
-
       _active: {
+        ...floatingBackground("active", props),
         boxShadow: "none",
       },
-    },
-    lg: {
-      boxShadow: "md",
-
-      _hover: {
-        boxShadow: "lg",
-      },
-
-      _active: {
-        boxShadow: "sm",
-      },
-    },
+    }),
   },
 });
 
 export default config;
-
-type CardThemeProps = {
-  colorScheme: "accent" | "default";
-  theme: any;
-  colorMode: "light" | "dark";
-};
-
-const getColorSchemeBaseProps = (props: CardThemeProps) => {
-  switch (props.colorScheme) {
-    case "default":
-      return {
-        ...baseBorder("default", props),
-        backgroundColor: mode(
-          "white",
-          `color-mix(in srgb, white 10%, var(--spor-colors-bg-default-dark))`,
-        )(props),
-        color: "inherit",
-      };
-    case "accent":
-      return {
-        ...accentBackground("default", props),
-        ...accentText("default", props),
-        _hover: {
-          ...accentBackground("hover", props),
-        },
-        _active: {
-          ...accentBackground("active", props),
-        },
-      };
-  }
-};
-
-function getColorSchemeClickableProps(props: CardThemeProps) {
-  switch (props.colorScheme) {
-    case "default":
-      return {
-        ...floatingBorder("default", props),
-      };
-    case "accent":
-      return {
-        ...accentBackground("default", props),
-        ...accentText("default", props),
-        _hover: {
-          ...accentBackground("hover", props),
-        },
-        _active: {
-          ...accentBackground("active", props),
-        },
-      };
-  }
-}
-
-const getColorSchemeHoverProps = (props: CardThemeProps) => {
-  switch (props.colorScheme) {
-    case "default":
-      return {
-        backgroundColor: mode(
-          "white",
-          `color-mix(in srgb, white 20%, var(--spor-colors-bg-default-dark))`,
-        )(props),
-        ...floatingBorder("hover", props),
-      };
-    case "accent":
-      return {
-        ...accentBackground("default", props),
-        ...accentText("default", props),
-        _hover: {
-          ...accentBackground("hover", props),
-        },
-        _active: {
-          ...accentBackground("active", props),
-        },
-      };
-  }
-};
-const getColorSchemeActiveProps = (props: CardThemeProps) => {
-  const { colorScheme } = props;
-  switch (colorScheme) {
-    case "default":
-      return {
-        backgroundColor: mode("bg.tertiary.light", `bg.default.dark`)(props),
-        ...floatingBorder("active", props),
-      };
-    case "accent":
-      return {
-        ...accentBackground("default", props),
-        ...accentText("default", props),
-        _hover: {
-          ...accentBackground("hover", props),
-        },
-        _active: {
-          ...accentBackground("active", props),
-        },
-      };
-  }
-};