@mond-design-system/react 4.10.2 → 4.12.0

package/dist/index.d.cts

@@ -1125,16 +1125,21 @@ interface ToastProviderProps {
  */
 declare function ToastProvider({ children, regionLabel, dismissLabel, }: ToastProviderProps): ReactElement;
 
+/** A component's own props, plus every prop the element it renders takes. */
+type Polymorphic<T extends ElementType, Own> = Own & {
+    /** Element to render. Default div. */
+    as?: T;
+} & Omit<ComponentPropsWithRef<T>, keyof Own | "as">;
+
 type StackGap = "hairline" | "tight" | "base" | "loose" | "group" | "section";
 type StackAlign = "start" | "center" | "end" | "stretch";
-interface StackProps extends HTMLAttributes<HTMLElement> {
+interface StackOwnProps {
     /** Space between children, on the gap scale. Default "base". */
     gap?: StackGap;
     /** Cross-axis alignment. Default "stretch". */
     align?: StackAlign;
-    /** Element to render. Default div. */
-    as?: ElementType;
 }
+type StackProps<T extends ElementType = "div"> = Polymorphic<T, StackOwnProps>;
 /**
  * Vertical flow. The parent owns spacing between siblings via gap —
  * children carry no outer margins. Token-bounded on purpose: no arbitrary
@@ -1147,12 +1152,12 @@ interface StackProps extends HTMLAttributes<HTMLElement> {
  * </Stack>
  * ```
  */
-declare function Stack({ gap, align, as, className, ...rest }: StackProps): ReactElement;
+declare function Stack<T extends ElementType = "div">(props: StackProps<T>): ReactElement;
 
 type InlineGap = "hairline" | "tight" | "base" | "loose";
 type InlineAlign = "start" | "center" | "end" | "baseline";
 type InlineJustify = "start" | "center" | "end" | "between";
-interface InlineProps extends HTMLAttributes<HTMLElement> {
+interface InlineOwnProps {
     /** Space between children, on the gap scale. Default "base". */
     gap?: InlineGap;
     /** Cross-axis alignment. Default "center". */
@@ -1161,9 +1166,8 @@ interface InlineProps extends HTMLAttributes<HTMLElement> {
     justify?: InlineJustify;
     /** Allow wrapping onto new lines. */
     wrap?: boolean;
-    /** Element to render. Default div. */
-    as?: ElementType;
 }
+type InlineProps<T extends ElementType = "div"> = Polymorphic<T, InlineOwnProps>;
 /**
  * Horizontal flow — Stack's row twin. Same token-bounded contract.
  *
@@ -1174,15 +1178,14 @@ interface InlineProps extends HTMLAttributes<HTMLElement> {
  * </Inline>
  * ```
  */
-declare function Inline({ gap, align, justify, wrap, as, className, ...rest }: InlineProps): ReactElement;
+declare function Inline<T extends ElementType = "div">(props: InlineProps<T>): ReactElement;
 
 type ContainerWidth = "content" | "wide";
-interface ContainerProps extends HTMLAttributes<HTMLElement> {
+interface ContainerOwnProps {
     /** content = reading column, wide = desktop shell. Default "content". */
     width?: ContainerWidth;
-    /** Element to render. Default div. */
-    as?: ElementType;
 }
+type ContainerProps<T extends ElementType = "div"> = Polymorphic<T, ContainerOwnProps>;
 /**
  * Centered max-width column with page-edge padding.
  *
@@ -1192,7 +1195,7 @@ interface ContainerProps extends HTMLAttributes<HTMLElement> {
  * </Container>
  * ```
  */
-declare function Container({ width, as, className, ...rest }: ContainerProps): ReactElement;
+declare function Container<T extends ElementType = "div">(props: ContainerProps<T>): ReactElement;
 
 type CardVariant = "card" | "raised" | "sunken";
 interface CardProps extends Omit<HTMLAttributes<HTMLElement>, "onClick"> {
@@ -1236,8 +1239,24 @@ type CardSectionProps = HTMLAttributes<HTMLDivElement> & {
 };
 /** Top slot — title row, media, tabs. */
 declare function CardHeader({ className, ...rest }: CardSectionProps): ReactElement;
-/** Main content slot. */
-declare function CardBody({ className, ...rest }: CardSectionProps): ReactElement;
+interface CardBodyProps extends CardSectionProps {
+    /** How many lines of content the card affords. Past it the body clips, with
+        an ellipsis on the last line. Unset, the body grows to what it holds. */
+    lines?: number;
+}
+/**
+ * Main content slot.
+ *
+ * The card is the box, so the box is what says how much of a thing fits:
+ * `lines` clips whatever the body holds — a paragraph, two of them, a bare
+ * string — rather than asking each child to clip itself.
+ *
+ * A budgeted body counts lines, which is a thing only `-webkit-box` does, so it
+ * is no longer a flex column: `gap` between its children stops applying and a
+ * margin is what separates them. A body doing layout for a card keeps its own
+ * budget-free, and holds a budgeted one for the part that has to fit.
+ */
+declare function CardBody({ lines, className, style, ...rest }: CardBodyProps): ReactElement;
 /** Bottom slot — actions, meta. */
 declare function CardFooter({ className, ...rest }: CardSectionProps): ReactElement;
 
@@ -1939,4 +1958,4 @@ interface RovingGroupOptions {
  */
 declare function useRovingGroup(ref: RefObject<HTMLElement | null>, { selector, orientation }: RovingGroupOptions): (event: KeyboardEvent<HTMLElement>) => void;
 
-export { AppBar, type AppBarProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeTone, Breadcrumb, type BreadcrumbProps, Button, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, type CSSVars, Card, CardBody, CardFooter, CardHeader, type CardProps, type CardSectionProps, type CardVariant, type CarouselPager, type CarouselSlide, Checkbox, type CheckboxProps, Chip, ChipBar, type ChipBarGap, type ChipBarProps, ChipGroup, type ChipGroupGap, type ChipGroupProps, type ChipProps, type ChipVariant, ConfirmDialog, type ConfirmDialogProps, type ConfirmDialogTone, Container, type ContainerProps, type ContainerWidth, CountButton, type CountButtonProps, type CountButtonTone, type Crumb, type DataColumn, DataTable, type DataTableProps, type DataTableSelectionLabels, DateTimePicker, type DateTimePickerLabels, type DateTimePickerProps, Divider, type DividerProps, EmptyState, type EmptyStateProps, Field, type FieldContextValue, type FieldProps, FileDrop, type FileDropProps, Heading, type HeadingLevel, type HeadingProps, type HeadingTone, Icon, type IconProps, IconProvider, type IconProviderProps, type IconRender, type IconRenderProps, type IconSize, ImageCarousel, type ImageCarouselLabels, type ImageCarouselProps, Inline, type InlineAlign, type InlineGap, type InlineJustify, type InlineProps, Input, type InputProps, type InputSize, Lightbox, type LightboxLabels, type LightboxProps, Link, type LinkProps, type LinkVariant, ListGroup, type ListGroupProps, ListItem, type ListItemProps, MediaPlaceholder, type MediaPlaceholderProps, Modal, ModalBody, ModalFooter, ModalHeader, type ModalProps, type OverlayHistory, OverlayHistoryContext, PasswordInput, type PasswordInputProps, type Presence, ProgressBar, type ProgressBarProps, Radio, type RadioProps, type RovingGroupOptions, Screen, ScreenContent, type ScreenContentProps, Scroller, type ScrollerLabels, type ScrollerProps, SearchField, type SearchFieldProps, type SegmentOption, SegmentedControl, type SegmentedControlProps, type SegmentedControlSize, Select, type SelectProps, type SelectSize, Sheet, SheetBody, SheetFooter, SheetHeader, type SheetProps, SideNav, SideNavGroup, type SideNavGroupProps, SideNavItem, type SideNavItemProps, type SideNavProps, Skeleton, type SkeletonProps, type SkeletonVariant, Spinner, type SpinnerProps, Stack, type StackAlign, type StackGap, type StackProps, Switch, type SwitchProps, Tab, TabBar, TabBarAction, type TabBarActionProps, TabBarItem, type TabBarItemProps, type TabBarProps, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps, Tag, type TagProps, type TagTone, Text, type TextProps, type TextTone, type TextVariant, Textarea, type TextareaProps, type ToastAction, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastTone, UploadProgress, type UploadProgressLabels, type UploadProgressProps, type UploadStatus, type UseOverlayOptions, type VideoCaptions, type VideoChapter, VideoPlayer, type VideoPlayerLabels, type VideoPlayerProps, VisuallyHidden, type VisuallyHiddenProps, cx, useFieldContext, useOverlay, usePresence, useRovingGroup, useToast };
+export { AppBar, type AppBarProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeTone, Breadcrumb, type BreadcrumbProps, Button, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, type CSSVars, Card, CardBody, type CardBodyProps, CardFooter, CardHeader, type CardProps, type CardSectionProps, type CardVariant, type CarouselPager, type CarouselSlide, Checkbox, type CheckboxProps, Chip, ChipBar, type ChipBarGap, type ChipBarProps, ChipGroup, type ChipGroupGap, type ChipGroupProps, type ChipProps, type ChipVariant, ConfirmDialog, type ConfirmDialogProps, type ConfirmDialogTone, Container, type ContainerProps, type ContainerWidth, CountButton, type CountButtonProps, type CountButtonTone, type Crumb, type DataColumn, DataTable, type DataTableProps, type DataTableSelectionLabels, DateTimePicker, type DateTimePickerLabels, type DateTimePickerProps, Divider, type DividerProps, EmptyState, type EmptyStateProps, Field, type FieldContextValue, type FieldProps, FileDrop, type FileDropProps, Heading, type HeadingLevel, type HeadingProps, type HeadingTone, Icon, type IconProps, IconProvider, type IconProviderProps, type IconRender, type IconRenderProps, type IconSize, ImageCarousel, type ImageCarouselLabels, type ImageCarouselProps, Inline, type InlineAlign, type InlineGap, type InlineJustify, type InlineProps, Input, type InputProps, type InputSize, Lightbox, type LightboxLabels, type LightboxProps, Link, type LinkProps, type LinkVariant, ListGroup, type ListGroupProps, ListItem, type ListItemProps, MediaPlaceholder, type MediaPlaceholderProps, Modal, ModalBody, ModalFooter, ModalHeader, type ModalProps, type OverlayHistory, OverlayHistoryContext, PasswordInput, type PasswordInputProps, type Presence, ProgressBar, type ProgressBarProps, Radio, type RadioProps, type RovingGroupOptions, Screen, ScreenContent, type ScreenContentProps, Scroller, type ScrollerLabels, type ScrollerProps, SearchField, type SearchFieldProps, type SegmentOption, SegmentedControl, type SegmentedControlProps, type SegmentedControlSize, Select, type SelectProps, type SelectSize, Sheet, SheetBody, SheetFooter, SheetHeader, type SheetProps, SideNav, SideNavGroup, type SideNavGroupProps, SideNavItem, type SideNavItemProps, type SideNavProps, Skeleton, type SkeletonProps, type SkeletonVariant, Spinner, type SpinnerProps, Stack, type StackAlign, type StackGap, type StackProps, Switch, type SwitchProps, Tab, TabBar, TabBarAction, type TabBarActionProps, TabBarItem, type TabBarItemProps, type TabBarProps, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps, Tag, type TagProps, type TagTone, Text, type TextProps, type TextTone, type TextVariant, Textarea, type TextareaProps, type ToastAction, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastTone, UploadProgress, type UploadProgressLabels, type UploadProgressProps, type UploadStatus, type UseOverlayOptions, type VideoCaptions, type VideoChapter, VideoPlayer, type VideoPlayerLabels, type VideoPlayerProps, VisuallyHidden, type VisuallyHiddenProps, cx, useFieldContext, useOverlay, usePresence, useRovingGroup, useToast };

package/dist/index.d.ts

@@ -1125,16 +1125,21 @@ interface ToastProviderProps {
  */
 declare function ToastProvider({ children, regionLabel, dismissLabel, }: ToastProviderProps): ReactElement;
 
+/** A component's own props, plus every prop the element it renders takes. */
+type Polymorphic<T extends ElementType, Own> = Own & {
+    /** Element to render. Default div. */
+    as?: T;
+} & Omit<ComponentPropsWithRef<T>, keyof Own | "as">;
+
 type StackGap = "hairline" | "tight" | "base" | "loose" | "group" | "section";
 type StackAlign = "start" | "center" | "end" | "stretch";
-interface StackProps extends HTMLAttributes<HTMLElement> {
+interface StackOwnProps {
     /** Space between children, on the gap scale. Default "base". */
     gap?: StackGap;
     /** Cross-axis alignment. Default "stretch". */
     align?: StackAlign;
-    /** Element to render. Default div. */
-    as?: ElementType;
 }
+type StackProps<T extends ElementType = "div"> = Polymorphic<T, StackOwnProps>;
 /**
  * Vertical flow. The parent owns spacing between siblings via gap —
  * children carry no outer margins. Token-bounded on purpose: no arbitrary
@@ -1147,12 +1152,12 @@ interface StackProps extends HTMLAttributes<HTMLElement> {
  * </Stack>
  * ```
  */
-declare function Stack({ gap, align, as, className, ...rest }: StackProps): ReactElement;
+declare function Stack<T extends ElementType = "div">(props: StackProps<T>): ReactElement;
 
 type InlineGap = "hairline" | "tight" | "base" | "loose";
 type InlineAlign = "start" | "center" | "end" | "baseline";
 type InlineJustify = "start" | "center" | "end" | "between";
-interface InlineProps extends HTMLAttributes<HTMLElement> {
+interface InlineOwnProps {
     /** Space between children, on the gap scale. Default "base". */
     gap?: InlineGap;
     /** Cross-axis alignment. Default "center". */
@@ -1161,9 +1166,8 @@ interface InlineProps extends HTMLAttributes<HTMLElement> {
     justify?: InlineJustify;
     /** Allow wrapping onto new lines. */
     wrap?: boolean;
-    /** Element to render. Default div. */
-    as?: ElementType;
 }
+type InlineProps<T extends ElementType = "div"> = Polymorphic<T, InlineOwnProps>;
 /**
  * Horizontal flow — Stack's row twin. Same token-bounded contract.
  *
@@ -1174,15 +1178,14 @@ interface InlineProps extends HTMLAttributes<HTMLElement> {
  * </Inline>
  * ```
  */
-declare function Inline({ gap, align, justify, wrap, as, className, ...rest }: InlineProps): ReactElement;
+declare function Inline<T extends ElementType = "div">(props: InlineProps<T>): ReactElement;
 
 type ContainerWidth = "content" | "wide";
-interface ContainerProps extends HTMLAttributes<HTMLElement> {
+interface ContainerOwnProps {
     /** content = reading column, wide = desktop shell. Default "content". */
     width?: ContainerWidth;
-    /** Element to render. Default div. */
-    as?: ElementType;
 }
+type ContainerProps<T extends ElementType = "div"> = Polymorphic<T, ContainerOwnProps>;
 /**
  * Centered max-width column with page-edge padding.
  *
@@ -1192,7 +1195,7 @@ interface ContainerProps extends HTMLAttributes<HTMLElement> {
  * </Container>
  * ```
  */
-declare function Container({ width, as, className, ...rest }: ContainerProps): ReactElement;
+declare function Container<T extends ElementType = "div">(props: ContainerProps<T>): ReactElement;
 
 type CardVariant = "card" | "raised" | "sunken";
 interface CardProps extends Omit<HTMLAttributes<HTMLElement>, "onClick"> {
@@ -1236,8 +1239,24 @@ type CardSectionProps = HTMLAttributes<HTMLDivElement> & {
 };
 /** Top slot — title row, media, tabs. */
 declare function CardHeader({ className, ...rest }: CardSectionProps): ReactElement;
-/** Main content slot. */
-declare function CardBody({ className, ...rest }: CardSectionProps): ReactElement;
+interface CardBodyProps extends CardSectionProps {
+    /** How many lines of content the card affords. Past it the body clips, with
+        an ellipsis on the last line. Unset, the body grows to what it holds. */
+    lines?: number;
+}
+/**
+ * Main content slot.
+ *
+ * The card is the box, so the box is what says how much of a thing fits:
+ * `lines` clips whatever the body holds — a paragraph, two of them, a bare
+ * string — rather than asking each child to clip itself.
+ *
+ * A budgeted body counts lines, which is a thing only `-webkit-box` does, so it
+ * is no longer a flex column: `gap` between its children stops applying and a
+ * margin is what separates them. A body doing layout for a card keeps its own
+ * budget-free, and holds a budgeted one for the part that has to fit.
+ */
+declare function CardBody({ lines, className, style, ...rest }: CardBodyProps): ReactElement;
 /** Bottom slot — actions, meta. */
 declare function CardFooter({ className, ...rest }: CardSectionProps): ReactElement;
 
@@ -1939,4 +1958,4 @@ interface RovingGroupOptions {
  */
 declare function useRovingGroup(ref: RefObject<HTMLElement | null>, { selector, orientation }: RovingGroupOptions): (event: KeyboardEvent<HTMLElement>) => void;
 
-export { AppBar, type AppBarProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeTone, Breadcrumb, type BreadcrumbProps, Button, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, type CSSVars, Card, CardBody, CardFooter, CardHeader, type CardProps, type CardSectionProps, type CardVariant, type CarouselPager, type CarouselSlide, Checkbox, type CheckboxProps, Chip, ChipBar, type ChipBarGap, type ChipBarProps, ChipGroup, type ChipGroupGap, type ChipGroupProps, type ChipProps, type ChipVariant, ConfirmDialog, type ConfirmDialogProps, type ConfirmDialogTone, Container, type ContainerProps, type ContainerWidth, CountButton, type CountButtonProps, type CountButtonTone, type Crumb, type DataColumn, DataTable, type DataTableProps, type DataTableSelectionLabels, DateTimePicker, type DateTimePickerLabels, type DateTimePickerProps, Divider, type DividerProps, EmptyState, type EmptyStateProps, Field, type FieldContextValue, type FieldProps, FileDrop, type FileDropProps, Heading, type HeadingLevel, type HeadingProps, type HeadingTone, Icon, type IconProps, IconProvider, type IconProviderProps, type IconRender, type IconRenderProps, type IconSize, ImageCarousel, type ImageCarouselLabels, type ImageCarouselProps, Inline, type InlineAlign, type InlineGap, type InlineJustify, type InlineProps, Input, type InputProps, type InputSize, Lightbox, type LightboxLabels, type LightboxProps, Link, type LinkProps, type LinkVariant, ListGroup, type ListGroupProps, ListItem, type ListItemProps, MediaPlaceholder, type MediaPlaceholderProps, Modal, ModalBody, ModalFooter, ModalHeader, type ModalProps, type OverlayHistory, OverlayHistoryContext, PasswordInput, type PasswordInputProps, type Presence, ProgressBar, type ProgressBarProps, Radio, type RadioProps, type RovingGroupOptions, Screen, ScreenContent, type ScreenContentProps, Scroller, type ScrollerLabels, type ScrollerProps, SearchField, type SearchFieldProps, type SegmentOption, SegmentedControl, type SegmentedControlProps, type SegmentedControlSize, Select, type SelectProps, type SelectSize, Sheet, SheetBody, SheetFooter, SheetHeader, type SheetProps, SideNav, SideNavGroup, type SideNavGroupProps, SideNavItem, type SideNavItemProps, type SideNavProps, Skeleton, type SkeletonProps, type SkeletonVariant, Spinner, type SpinnerProps, Stack, type StackAlign, type StackGap, type StackProps, Switch, type SwitchProps, Tab, TabBar, TabBarAction, type TabBarActionProps, TabBarItem, type TabBarItemProps, type TabBarProps, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps, Tag, type TagProps, type TagTone, Text, type TextProps, type TextTone, type TextVariant, Textarea, type TextareaProps, type ToastAction, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastTone, UploadProgress, type UploadProgressLabels, type UploadProgressProps, type UploadStatus, type UseOverlayOptions, type VideoCaptions, type VideoChapter, VideoPlayer, type VideoPlayerLabels, type VideoPlayerProps, VisuallyHidden, type VisuallyHiddenProps, cx, useFieldContext, useOverlay, usePresence, useRovingGroup, useToast };
+export { AppBar, type AppBarProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeTone, Breadcrumb, type BreadcrumbProps, Button, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, type CSSVars, Card, CardBody, type CardBodyProps, CardFooter, CardHeader, type CardProps, type CardSectionProps, type CardVariant, type CarouselPager, type CarouselSlide, Checkbox, type CheckboxProps, Chip, ChipBar, type ChipBarGap, type ChipBarProps, ChipGroup, type ChipGroupGap, type ChipGroupProps, type ChipProps, type ChipVariant, ConfirmDialog, type ConfirmDialogProps, type ConfirmDialogTone, Container, type ContainerProps, type ContainerWidth, CountButton, type CountButtonProps, type CountButtonTone, type Crumb, type DataColumn, DataTable, type DataTableProps, type DataTableSelectionLabels, DateTimePicker, type DateTimePickerLabels, type DateTimePickerProps, Divider, type DividerProps, EmptyState, type EmptyStateProps, Field, type FieldContextValue, type FieldProps, FileDrop, type FileDropProps, Heading, type HeadingLevel, type HeadingProps, type HeadingTone, Icon, type IconProps, IconProvider, type IconProviderProps, type IconRender, type IconRenderProps, type IconSize, ImageCarousel, type ImageCarouselLabels, type ImageCarouselProps, Inline, type InlineAlign, type InlineGap, type InlineJustify, type InlineProps, Input, type InputProps, type InputSize, Lightbox, type LightboxLabels, type LightboxProps, Link, type LinkProps, type LinkVariant, ListGroup, type ListGroupProps, ListItem, type ListItemProps, MediaPlaceholder, type MediaPlaceholderProps, Modal, ModalBody, ModalFooter, ModalHeader, type ModalProps, type OverlayHistory, OverlayHistoryContext, PasswordInput, type PasswordInputProps, type Presence, ProgressBar, type ProgressBarProps, Radio, type RadioProps, type RovingGroupOptions, Screen, ScreenContent, type ScreenContentProps, Scroller, type ScrollerLabels, type ScrollerProps, SearchField, type SearchFieldProps, type SegmentOption, SegmentedControl, type SegmentedControlProps, type SegmentedControlSize, Select, type SelectProps, type SelectSize, Sheet, SheetBody, SheetFooter, SheetHeader, type SheetProps, SideNav, SideNavGroup, type SideNavGroupProps, SideNavItem, type SideNavItemProps, type SideNavProps, Skeleton, type SkeletonProps, type SkeletonVariant, Spinner, type SpinnerProps, Stack, type StackAlign, type StackGap, type StackProps, Switch, type SwitchProps, Tab, TabBar, TabBarAction, type TabBarActionProps, TabBarItem, type TabBarItemProps, type TabBarProps, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps, Tag, type TagProps, type TagTone, Text, type TextProps, type TextTone, type TextVariant, Textarea, type TextareaProps, type ToastAction, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastTone, UploadProgress, type UploadProgressLabels, type UploadProgressProps, type UploadStatus, type UseOverlayOptions, type VideoCaptions, type VideoChapter, VideoPlayer, type VideoPlayerLabels, type VideoPlayerProps, VisuallyHidden, type VisuallyHiddenProps, cx, useFieldContext, useOverlay, usePresence, useRovingGroup, useToast };

package/dist/index.js

@@ -1786,13 +1786,14 @@ function ToastProvider({
 var Stack_module_default = { "stack": "mds-Stack__stack", "gap-hairline": "mds-Stack__gap-hairline", "gap-tight": "mds-Stack__gap-tight", "gap-base": "mds-Stack__gap-base", "gap-loose": "mds-Stack__gap-loose", "gap-group": "mds-Stack__gap-group", "gap-section": "mds-Stack__gap-section", "align-start": "mds-Stack__align-start", "align-center": "mds-Stack__align-center", "align-end": "mds-Stack__align-end", "align-stretch": "mds-Stack__align-stretch" };
 
 // src/components/Stack/Stack.tsx
-function Stack({
-  gap = "base",
-  align = "stretch",
-  as = "div",
-  className,
-  ...rest
-}) {
+function Stack(props) {
+  const {
+    gap = "base",
+    align = "stretch",
+    as = "div",
+    className,
+    ...rest
+  } = props;
   return createElement(as, {
     className: cx(Stack_module_default.stack, Stack_module_default[`gap-${gap}`], Stack_module_default[`align-${align}`], className),
     ...rest
@@ -1803,15 +1804,16 @@ function Stack({
 var Inline_module_default = { "inline": "mds-Inline__inline", "gap-hairline": "mds-Inline__gap-hairline", "gap-tight": "mds-Inline__gap-tight", "gap-base": "mds-Inline__gap-base", "gap-loose": "mds-Inline__gap-loose", "align-start": "mds-Inline__align-start", "align-center": "mds-Inline__align-center", "align-end": "mds-Inline__align-end", "align-baseline": "mds-Inline__align-baseline", "justify-start": "mds-Inline__justify-start", "justify-center": "mds-Inline__justify-center", "justify-end": "mds-Inline__justify-end", "justify-between": "mds-Inline__justify-between", "wrap": "mds-Inline__wrap" };
 
 // src/components/Inline/Inline.tsx
-function Inline({
-  gap = "base",
-  align = "center",
-  justify = "start",
-  wrap = false,
-  as = "div",
-  className,
-  ...rest
-}) {
+function Inline(props) {
+  const {
+    gap = "base",
+    align = "center",
+    justify = "start",
+    wrap = false,
+    as = "div",
+    className,
+    ...rest
+  } = props;
   return createElement(as, {
     className: cx(
       Inline_module_default.inline,
@@ -1829,12 +1831,8 @@ function Inline({
 var Container_module_default = { "container": "mds-Container__container", "width-content": "mds-Container__width-content", "width-wide": "mds-Container__width-wide" };
 
 // src/components/Container/Container.tsx
-function Container({
-  width = "content",
-  as = "div",
-  className,
-  ...rest
-}) {
+function Container(props) {
+  const { width = "content", as = "div", className, ...rest } = props;
   return createElement(as, {
     className: cx(Container_module_default.container, Container_module_default[`width-${width}`], className),
     ...rest
@@ -1842,7 +1840,7 @@ function Container({
 }
 
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Card/Card.module.css?mds-scoped
-var Card_module_default = { "card": "mds-Card__card", "variant-raised": "mds-Card__variant-raised", "variant-sunken": "mds-Card__variant-sunken", "emphasis": "mds-Card__emphasis", "interactive": "mds-Card__interactive", "header": "mds-Card__header", "body": "mds-Card__body", "footer": "mds-Card__footer" };
+var Card_module_default = { "card": "mds-Card__card", "variant-raised": "mds-Card__variant-raised", "variant-sunken": "mds-Card__variant-sunken", "emphasis": "mds-Card__emphasis", "interactive": "mds-Card__interactive", "header": "mds-Card__header", "body": "mds-Card__body", "footer": "mds-Card__footer", "clipped": "mds-Card__clipped" };
 function Card({ children, variant = "card", emphasis = false, onClick, href, as, className, ref, ...rest }) {
   const cardClass = cx(Card_module_default.card, Card_module_default[`variant-${variant}`], emphasis && Card_module_default.emphasis, className);
   if (href !== void 0) {
@@ -1868,8 +1866,16 @@ function Card({ children, variant = "card", emphasis = false, onClick, href, as,
 function CardHeader({ className, ...rest }) {
   return /* @__PURE__ */ jsx("div", { className: cx(Card_module_default.header, className), ...rest });
 }
-function CardBody({ className, ...rest }) {
-  return /* @__PURE__ */ jsx("div", { className: cx(Card_module_default.body, className), ...rest });
+function CardBody({ lines, className, style, ...rest }) {
+  const vars = lines === void 0 ? void 0 : { "--card-lines": lines };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx(Card_module_default.body, lines !== void 0 && Card_module_default.clipped, className),
+      style: { ...vars, ...style },
+      ...rest
+    }
+  );
 }
 function CardFooter({ className, ...rest }) {
   return /* @__PURE__ */ jsx("div", { className: cx(Card_module_default.footer, className), ...rest });