@vygruppen/spor-react 9.6.5 → 9.8.0

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, 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-F6WDIMSM.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.6.5",
+  "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/RadioCard.tsx

@@ -0,0 +1,95 @@
+import {
+  BoxProps,
+  UseRadioProps,
+  chakra,
+  forwardRef,
+  useRadio,
+  useStyleConfig,
+} from "@chakra-ui/react";
+import { dataAttr } from "@chakra-ui/utils";
+import React, { useId } from "react";
+
+type RadioCardProps = UseRadioProps &
+  BoxProps & {
+    children: React.ReactNode;
+    variant: "floating" | "base";
+  };
+
+/**
+ * Renders a radio card.
+ *
+ * The most basic version looks like this:
+ *
+ * ```tsx
+ * <RadioCard>
+ *   Content
+ * </RadioCard>
+ * ```
+ *
+ * In order to use RadioCard, you typically want to place these components in a group with several other RadioCards.
+ *
+ * ```tsx
+ * <RadioCardGroup name="ticket">
+ *   <RadioCard value="economy">Economy</RadioCard>
+ *   <RadioCard value="business">Business</RadioCard>
+ *   <RadioCard value="first-class">First Class</RadioCard>
+ * </RadioCardGroup>
+ * ```
+ *
+ * You can add styling to each card seperately, or you can add a common style to the group.
+ * Group styling overrides single styling if both are present.
+ *
+ * This example shows how to style all cards in a group:
+ *
+ * ```tsx
+ * <RadioCardGroup name="ticket" variant="floating" padding={3}>
+ *  <RadioCard value="economy">Economy</RadioCard>
+ *  <RadioCard value="business">Business</RadioCard>
+ *  <RadioCard value="first-class">First Class</RadioCard>
+ * </RadioCardGroup>
+ * ```
+ *
+ * This example shows how to style a single card:
+ *
+ * ```tsx
+ * <RadioCard variant="floating" padding={3}>
+ *  Economy
+ * </RadioCard>
+ * ```
+ */
+
+export const RadioCard = forwardRef<RadioCardProps, "div">(
+  ({ children, variant = "base", ...props }, ref) => {
+    const { getInputProps, getRadioProps, getRootProps, state } =
+      useRadio(props);
+
+    const styles = useStyleConfig("RadioCard", { variant });
+
+    const input = getInputProps({}, ref);
+    const radio = getRadioProps();
+
+    const id = `radio-card-${useId()}`;
+
+    return (
+      <chakra.label
+        htmlFor={id}
+        {...getRootProps()}
+        aria-label={String(children)}
+      >
+        <chakra.input {...input} id={id} disabled={state.isDisabled} />
+        <chakra.div
+          __css={styles}
+          {...radio}
+          data-checked={dataAttr(state.isChecked)}
+          data-hover={dataAttr(state.isHovered)}
+          data-focus={dataAttr(state.isFocused)}
+          data-active={dataAttr(state.isActive)}
+          data-disabled={dataAttr(state.isDisabled)}
+          {...props}
+        >
+          {children}
+        </chakra.div>
+      </chakra.label>
+    );
+  },
+);

package/src/layout/RadioCardGroup.tsx

@@ -0,0 +1,81 @@
+import {
+  useRadioGroup,
+  RadioGroupProps,
+  StackDirection,
+  Stack,
+} from "@chakra-ui/react";
+import React, { Children } from "react";
+
+type RadioCardGroupProps = RadioGroupProps & {
+  children: React.ReactNode;
+  props?: RadioGroupProps;
+  direction?: StackDirection;
+};
+
+/**
+ * Radio card groups are used to group several radio cards together.
+ *
+ * You can and should pass the common `name` prop to the `RadioGroup`, instead of to each `Radio` component.
+ *
+ * ```tsx
+ * <RadioCardGroup name="ticket">
+ *   <RadioCard>Economy</RadioCard>
+ *   <RadioCard>Business</RadioCard>
+ *   <RadioCard>First Class</RadioCard>
+ * </RadioCardGroup>
+ * ```
+ *
+ * By default, radio cards show up horizontally. If you want them to show up vertically, please specify the `direction="column"` prop.
+ *
+ * ```tsx
+ * <RadioCardGroup name="ticket" direction="column">
+ *   <RadioCard>Economy</RadioCard>
+ *   <RadioCard>Business</RadioCard>
+ *   <RadioCard>First Class</RadioCard>
+ * </RadioCardGroup>
+ * ```
+ *
+ * You can also specify the `defaultValue` prop to set the default value of the radio group.
+ *
+ * ```tsx
+ * <RadioCardGroup name="ticket" defaultValue="Economy">
+ *    <RadioCard>Economy</RadioCard>
+ *    <RadioCard>Business</RadioCard>
+ *    <RadioCard>First Class</RadioCard>
+ * </RadioCardGroup>
+ * ```
+ *
+ * Check out RadioCard for more information on how to style the radio cards.
+ * @see RadioCard
+ */
+
+export const RadioCardGroup = ({
+  children,
+  name,
+  direction = "row",
+  onChange,
+  defaultValue,
+  variant = "base",
+  ...props
+}: RadioCardGroupProps) => {
+  const { getRootProps, getRadioProps } = useRadioGroup({
+    defaultValue: defaultValue,
+    name: name,
+    onChange: onChange,
+    ...props,
+  });
+
+  const group = getRootProps();
+
+  return (
+    <Stack direction={direction} {...group}>
+      {Children.map(
+        children as React.ReactElement[],
+        (child: React.ReactElement) => {
+          const radio = getRadioProps({ value: child.props.value });
+          return React.cloneElement(child, { ...radio, variant, ...props });
+        },
+      )}
+    </Stack>
+  );
+};

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

@@ -26,3 +26,7 @@ export type {
 } from "@chakra-ui/react";
 export * from "./Divider";
 export * from "./Stack";
+export * from "./RadioCard";
+export * from "./RadioCardGroup";
+export * from "./StaticCard";
+export * from "./PressableCard";

package/src/theme/components/index.ts

@@ -30,6 +30,7 @@ export { default as Pagination } from "./pagination";
 export { default as Popover } from "./popover";
 export { default as ProgressBar } from "./progress-bar";
 export { default as ProgressIndicator } from "./progress-indicator";
+export { default as RadioCard } from "./radio-card";
 export { default as Radio } from "./radio";
 export { default as Select } from "./select";
 export { default as Skeleton } from "./skeleton";

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),
-        },
-      };
-  }
-};

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

@@ -0,0 +1,64 @@
+import { defineStyleConfig } from "@chakra-ui/react";
+import { baseBackground, baseBorder, baseText } from "../utils/base-utils";
+import { floatingBackground, floatingBorder } from "../utils/floating-utils";
+import { focusVisibleStyles } from "../utils/focus-utils";
+
+const config = defineStyleConfig({
+  baseStyle: (props: any) => ({
+    appearance: "none",
+    border: "none",
+    overflow: "hidden",
+    fontSize: "inherit",
+    display: "block",
+    borderRadius: "sm",
+    ...focusVisibleStyles(props),
+    _checked: {
+      outline: "1px solid",
+      outlineColor: "greenHaze",
+      ...floatingBackground("active", props),
+      _hover: {
+        ...floatingBackground("active", props),
+      },
+    },
+    _disabled: {
+      pointerEvents: "none",
+      ...baseBackground("disabled", props),
+      ...baseBorder("disabled", props),
+      ...baseText("disabled", props),
+    },
+  }),
+  variants: {
+    base: (props) => ({
+      ...baseBackground("default", props),
+      ...baseBorder("default", props),
+      _hover: {
+        ...baseBackground("hover", props),
+        ...baseBorder("hover", props),
+      },
+      _active: {
+        ...baseBackground("active", props),
+      },
+    }),
+    floating: (props) => ({
+      ...floatingBackground("default", props),
+      boxShadow: "sm",
+      _hover: {
+        ...floatingBackground("hover", props),
+        ...floatingBorder("hover", props),
+        boxShadow: "md",
+      },
+      _active: {
+        ...floatingBackground("active", props),
+        ...floatingBorder("active", props),
+      },
+      _checked: {
+        _hover: {
+          outline: "1px solid",
+          outlineColor: "silver",
+        },
+      },
+    }),
+  },
+});
+
+export default config;

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

@@ -1,7 +1,6 @@
 import { defineStyleConfig } from "@chakra-ui/react";
-import { mode } from "@chakra-ui/theme-tools";
 import { colors } from "../foundations";
-import { baseBorder, baseText } from "../utils/base-utils";
+import { focusVisibleStyles } from "../utils/focus-utils";
 
 const config = defineStyleConfig({
   baseStyle: (props: any) => ({
@@ -11,8 +10,8 @@ const config = defineStyleConfig({
     fontSize: "inherit",
     display: "block",
     borderRadius: "md",
-    // Except for white cards, all cards are light mode always
     color: "text.default.light",
+    ...focusVisibleStyles(props),
     ...getColorSchemeBaseProps(props),
   }),
 });
@@ -31,20 +30,14 @@ type CardThemeProps = {
     | "darkBlue"
     | "darkGreen"
     | "darkYellow";
-  theme: any;
-  colorMode: "light" | "dark";
 };
 
 const getColorSchemeBaseProps = (props: CardThemeProps) => {
   switch (props.colorScheme) {
     case "white":
       return {
-        ...baseBorder("default", props),
-        backgroundColor: mode(
-          "white",
-          `color-mix(in srgb, white 10%, var(--spor-colors-bg-default-dark))`,
-        )(props),
-        color: "inherit",
+        backgroundColor: "white",
+        color: "darkGrey",
       };
     case "grey":
       return {
@@ -80,7 +73,6 @@ const getColorSchemeBaseProps = (props: CardThemeProps) => {
     default:
       return {
         backgroundColor: colors[props.colorScheme]?.[100] ?? "default",
-        ...baseText("default", props),
       };
   }
 };

package/src/theme/components/table.ts

@@ -22,12 +22,10 @@ const config = helpers.defineMultiStyleConfig({
     th: {
       fontWeight: "bold",
       textAlign: "start",
-      verticalAlign: "top",
       minWidth: "68px",
     },
     td: {
       textAlign: "start",
-      verticalAlign: "top",
     },
     tfoot: {
       tr: {