@wistia/ui 0.8.12 → 0.8.13

package/dist/index.d.mts

@@ -800,6 +800,8 @@ declare const ButtonGroup: {
     displayName: string;
 };
 
+type BorderRadius = 'border-radius-00' | 'border-radius-01' | 'border-radius-02' | 'border-radius-03' | 'border-radius-04' | 'border-radius-05' | 'border-radius-rounded';
+
 type CardProps = BoxProps & ComponentPropsWithoutRef<'div'> & {
     /**
      * Content to be rendered inside the Card component
@@ -822,9 +824,9 @@ type CardProps = BoxProps & ComponentPropsWithoutRef<'div'> & {
      */
     border?: boolean;
     /**
-     * Sets the flex direction of the card's contents.
+     * Border radius to apply to the Card
      */
-    direction?: BoxProps['direction'];
+    borderRadius?: BorderRadius;
     /**
      * Specifies the gaps (gutters) between rows and columns
      */
@@ -853,6 +855,10 @@ type CardProps = BoxProps & ComponentPropsWithoutRef<'div'> & {
      * @ignore
      */
     basis?: BoxProps['basis'];
+    /**
+     * @ignore
+     */
+    direction?: BoxProps['direction'];
     /**
      * @ignore
      */
@@ -861,6 +867,10 @@ type CardProps = BoxProps & ComponentPropsWithoutRef<'div'> & {
      * @ignore
      */
     fillViewport?: BoxProps['fillViewport'];
+    /**
+     * @ignore
+     */
+    flexMode?: BoxProps['flexMode'];
     /**
      * @ignore
      */
@@ -891,7 +901,7 @@ type CardProps = BoxProps & ComponentPropsWithoutRef<'div'> & {
  * Cards can be used to visually distinguish content sections. Extends the [Box component.](https://wistia.github.io/vhs/storybook-ui/?path=/docs/components-box--docs)
  */
 declare const Card: {
-    ({ children, paddingSize, gap, direction, colorScheme, prominence, border, height, width, ...props }: CardProps): JSX.Element;
+    ({ children, border, borderRadius, colorScheme, direction, gap, height, paddingSize, prominence, width, ...props }: CardProps): JSX.Element;
     displayName: string;
 };
 
@@ -1665,8 +1675,6 @@ declare const IconButton: react.ForwardRefExoticComponent<(Omit<{
     children: JSX.Element;
 } & Omit<ButtonAsLinkProps, "leftIcon" | "rightIcon" | "fullWidth">, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 
-type BorderRadius = 'border-radius-01' | 'border-radius-02' | 'border-radius-03' | 'border-radius-04' | 'border-radius-05' | 'border-radius-rounded';
-
 type ImageProps = ComponentPropsWithoutRef<'img'> & {
     /**
      * Accessible text to apply to the image

package/dist/index.d.ts

@@ -800,6 +800,8 @@ declare const ButtonGroup: {
     displayName: string;
 };
 
+type BorderRadius = 'border-radius-00' | 'border-radius-01' | 'border-radius-02' | 'border-radius-03' | 'border-radius-04' | 'border-radius-05' | 'border-radius-rounded';
+
 type CardProps = BoxProps & ComponentPropsWithoutRef<'div'> & {
     /**
      * Content to be rendered inside the Card component
@@ -822,9 +824,9 @@ type CardProps = BoxProps & ComponentPropsWithoutRef<'div'> & {
      */
     border?: boolean;
     /**
-     * Sets the flex direction of the card's contents.
+     * Border radius to apply to the Card
      */
-    direction?: BoxProps['direction'];
+    borderRadius?: BorderRadius;
     /**
      * Specifies the gaps (gutters) between rows and columns
      */
@@ -853,6 +855,10 @@ type CardProps = BoxProps & ComponentPropsWithoutRef<'div'> & {
      * @ignore
      */
     basis?: BoxProps['basis'];
+    /**
+     * @ignore
+     */
+    direction?: BoxProps['direction'];
     /**
      * @ignore
      */
@@ -861,6 +867,10 @@ type CardProps = BoxProps & ComponentPropsWithoutRef<'div'> & {
      * @ignore
      */
     fillViewport?: BoxProps['fillViewport'];
+    /**
+     * @ignore
+     */
+    flexMode?: BoxProps['flexMode'];
     /**
      * @ignore
      */
@@ -891,7 +901,7 @@ type CardProps = BoxProps & ComponentPropsWithoutRef<'div'> & {
  * Cards can be used to visually distinguish content sections. Extends the [Box component.](https://wistia.github.io/vhs/storybook-ui/?path=/docs/components-box--docs)
  */
 declare const Card: {
-    ({ children, paddingSize, gap, direction, colorScheme, prominence, border, height, width, ...props }: CardProps): JSX.Element;
+    ({ children, border, borderRadius, colorScheme, direction, gap, height, paddingSize, prominence, width, ...props }: CardProps): JSX.Element;
     displayName: string;
 };
 
@@ -1665,8 +1675,6 @@ declare const IconButton: react.ForwardRefExoticComponent<(Omit<{
     children: JSX.Element;
 } & Omit<ButtonAsLinkProps, "leftIcon" | "rightIcon" | "fullWidth">, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 
-type BorderRadius = 'border-radius-01' | 'border-radius-02' | 'border-radius-03' | 'border-radius-04' | 'border-radius-05' | 'border-radius-rounded';
-
 type ImageProps = ComponentPropsWithoutRef<'img'> & {
     /**
      * Accessible text to apply to the image

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.8.12
+ * @license @wistia/ui v0.8.13
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -1142,6 +1142,7 @@ var colorAliasTokens = css3`
 // src/css/designTokens/borderRadius.tsx
 import { css as css4 } from "styled-components";
 var borderRadiusTokens = css4`
+  --wui-border-radius-00: 0;
   --wui-border-radius-01: 4px;
   --wui-border-radius-02: 8px;
   --wui-border-radius-03: 16px;
@@ -7914,7 +7915,7 @@ var StyledCard = styled15(Box)`
   background-color: ${({ $backgroundColor }) => $backgroundColor};
   outline: 2px solid ${({ $borderColor }) => $borderColor};
   outline-offset: -2px;
-  border-radius: var(--wui-border-radius-04);
+  border-radius: ${({ $borderRadius }) => `var(--wui-${$borderRadius})`};
   display: flex;
   height: ${({ $height }) => $height};
   width: ${({ $width }) => $width};
@@ -7935,13 +7936,14 @@ var prominenceMap = {
 };
 var Card = ({
   children,
-  paddingSize = "space-04",
-  gap = "space-03",
-  direction = "column",
-  colorScheme = "inherit",
-  prominence = "secondary",
   border = false,
+  borderRadius = "border-radius-04",
+  colorScheme = "inherit",
+  direction = "column",
+  gap = "space-03",
   height,
+  paddingSize = "space-04",
+  prominence = "secondary",
   width,
   ...props
 }) => /* @__PURE__ */ jsx203(
@@ -7949,6 +7951,7 @@ var Card = ({
   {
     $backgroundColor: prominenceMap[prominence].backgroundColor,
     $borderColor: border ? prominenceMap[prominence].borderColor : "transparent",
+    $borderRadius: borderRadius,
     $colorScheme: colorScheme,
     $height: height,
     $paddingSize: paddingSize,