@wistia/ui 0.8.11 → 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;
 };
 
@@ -1612,7 +1622,7 @@ type IconProps = ComponentPropsWithoutRef<'svg'> & {
     /**
      * The size of the icon to display
      */
-    size?: keyof typeof iconSizeMap;
+    size?: ResponsiveObject<keyof typeof iconSizeMap> | keyof typeof iconSizeMap;
     /**
      * @ignore
      */
@@ -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
@@ -2703,18 +2711,21 @@ type StackProps = {
     /**
      * The gap between each item in the stack. Can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
      * TODO: add link to Spacing docs
+     *
      */
-    gap?: Spacings;
+    gap?: ResponsiveObject<Spacings> | Spacings;
     /**
      * Vertical is equivalent to `flex-direction: column;`, horizontal is equivalent to `flex-direction: row;`.
      * The default behavior is `vertical`. Can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
      */
-    direction?: 'horizontal' | 'vertical';
+    direction?: ResponsiveObject<'horizontal' | 'vertical'> | 'horizontal' | 'vertical';
     /**
      * Controls how items are aligned along the cross-axis.
      * Can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
+     *
+     * @type 'baseline' | 'center' | 'flex-end' | 'flex-start' | 'stretch' | ResponsiveObject<'baseline' | 'center' | 'flex-end' | 'flex-start' | 'stretch'>
      */
-    alignItems?: AlignItemsType;
+    alignItems?: AlignItemsType | ResponsiveObject<AlignItemsType>;
     renderAs?: ElementType;
 };
 /**

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;
 };
 
@@ -1612,7 +1622,7 @@ type IconProps = ComponentPropsWithoutRef<'svg'> & {
     /**
      * The size of the icon to display
      */
-    size?: keyof typeof iconSizeMap;
+    size?: ResponsiveObject<keyof typeof iconSizeMap> | keyof typeof iconSizeMap;
     /**
      * @ignore
      */
@@ -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
@@ -2703,18 +2711,21 @@ type StackProps = {
     /**
      * The gap between each item in the stack. Can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
      * TODO: add link to Spacing docs
+     *
      */
-    gap?: Spacings;
+    gap?: ResponsiveObject<Spacings> | Spacings;
     /**
      * Vertical is equivalent to `flex-direction: column;`, horizontal is equivalent to `flex-direction: row;`.
      * The default behavior is `vertical`. Can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
      */
-    direction?: 'horizontal' | 'vertical';
+    direction?: ResponsiveObject<'horizontal' | 'vertical'> | 'horizontal' | 'vertical';
     /**
      * Controls how items are aligned along the cross-axis.
      * Can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
+     *
+     * @type 'baseline' | 'center' | 'flex-end' | 'flex-start' | 'stretch' | ResponsiveObject<'baseline' | 'center' | 'flex-end' | 'flex-start' | 'stretch'>
      */
-    alignItems?: AlignItemsType;
+    alignItems?: AlignItemsType | ResponsiveObject<AlignItemsType>;
     renderAs?: ElementType;
 };
 /**

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.8.11
+ * @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,