@wistia/ui 0.14.13 → 0.14.15

package/dist/index.d.mts

@@ -1401,7 +1401,7 @@ declare const Icon: {
     displayName: string;
 };
 
-type CollapsibleTriggerIconProps = {
+type CollapsibleTriggerIconProps = Omit<IconProps, 'type'> & {
     type: Extract<IconProps['type'], 'caret-left-strong' | 'caret-left' | 'caret-right-strong' | 'caret-right' | 'plus'>;
 };
 declare const CollapsibleTriggerIcon: {
@@ -2861,6 +2861,10 @@ type ProgressBarProps = ComponentPropsWithoutRef<'div'> & {
      * The maximum progress value
      */
     max?: number;
+    /**
+     * Sets the [color scheme](../?path=/docs/docs-color-schemes--docs)
+     */
+    colorScheme?: ColorSchemeTypes;
     /**
      * Slot for additional content to be rendered to the left of the progress bar
      */
@@ -2874,7 +2878,7 @@ type ProgressBarProps = ComponentPropsWithoutRef<'div'> & {
  * A progress component that visually represents the completion status of a task
  */
 declare const ProgressBar: {
-    ({ progress, max, children, labelLeft, labelRight, ...props }: ProgressBarProps): JSX.Element;
+    ({ progress, max, children, labelLeft, labelRight, colorScheme, ...props }: ProgressBarProps): JSX.Element;
     displayName: string;
 };
 
@@ -3907,4 +3911,60 @@ type ContextMenuProps = {
  */
 declare const ContextMenu: ({ position, triggerRef, children, onRequestClose, }: ContextMenuProps) => react_jsx_runtime.JSX.Element | null;
 
-export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Banner, type BannerProps, Box, type BoxProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonProps, Card, type CardProps, Center, type CenterProps, Checkbox, CheckboxGroup, CheckboxMenuItem, ClickRegion, type ClickRegionProps, Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleTrigger, CollapsibleTriggerIcon, ColorGrid, ColorGridOption, type ColorGridOptionProps, type ColorGridProps, ColorList, ColorListGroup, type ColorListGroupProps, ColorListOption, type ColorListOptionProps, type ColorListProps, ColorPicker, ColorPickerPopoverContent, type ColorPickerPopoverContentProps, type ColorPickerProps, ColorPickerSection, type ColorPickerSectionProps, ColorPickerTrigger, type ColorPickerTriggerProps, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Combobox, ComboboxOption, type ComboboxOptionProps, type ComboboxProps, ContextMenu, type ContextMenuProps, ContrastControls, DataCard, DataCardHoverArrow, type DataCardProps, DataCardTrend, type DataCardTrendProps, DataCards, type DataCardsProps, Divider, EditableHeading, type EditableHeadingProps, Ellipsis, type EllipsisProps, FilterMenu, FilterMenuItem, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Grid, type GridProps, Heading, type HeadingProps, HexColorInput, type HexColorInputProps, HueSlider, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, InputClickToCopy, type InputClickToCopyProps, InputPassword, type InputPasswordProps, type InputProps, type KeyboardKeys, KeyboardShortcut, Label, type LabelProps, Link, type LinkProps, List, type ListProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, Radio, RadioCard, RadioCardImage, type RadioCardImageProps, type RadioCardProps, RadioGroup, RadioMenuItem, type RadioProps, SaturationAndValuePicker, ScreenReaderOnly, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Slider, type SliderProps, Stack, SubMenu, Switch, type SwitchProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableFoot, type TableFootProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, Text, type TextProps, Thumbnail, ThumbnailBadge, type ThumbnailBadgeProps, ThumbnailCollage, type ThumbnailCollageProps, type ThumbnailProps, Tooltip, type TooltipProps, UIProvider, type UseToastProps, ValueNameOrHexCode, ValueSwatch, WistiaLogo, calculateContrast, colorSchemeOptions, copyToClipboard, dateTime, iconSizeMap, mergeRefs, mq, useActiveMq, useAriaLive, useBoolean, useClipboard, useElementObserver, useFilePicker, useFocusTrap, useForceUpdate, useFormState, useImperativeFilePicker, useIsHovered, useKey, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, usePreviousValue, useToast, useWindowSize };
+type DataListProps = ComponentPropsWithoutRef<'dl'> & {
+    /**
+     * Should only contain `DataListItem` components.
+     */
+    children: ReactNode;
+    /**
+     * Maximum width for the label.
+     */
+    labelMaxWith?: string;
+    /**
+     * Prominence of the label text. Default is `primary`.
+     */
+    labelProminence?: 'primary' | 'secondary';
+    /**
+     * Alignment of the value text. Default is `start`.
+     */
+    valueAlignment?: 'end' | 'start';
+};
+/**
+ * The DataList component is used to display a list of items with labels and values.
+ */
+declare const DataList: {
+    ({ children, valueAlignment, labelMaxWith, labelProminence, ...props }: DataListProps): JSX.Element;
+    displayName: string;
+};
+
+type DataListItemProps = Omit<ComponentPropsWithoutRef<'dl'>, 'childern'> & {
+    /**
+     * Should only contain `DataListItemItem` components.
+     */
+    children: ReactNode;
+};
+/**
+ * An item within a `DataList`. It should only contain `DataListItemLabel` and `DataListItemValue` components.
+ */
+declare const DataListItem: {
+    ({ children }: DataListItemProps): ReactNode;
+    displayName: string;
+};
+
+/**
+ * The label of the `DataListItem`. Extends the [Text]() component.
+ */
+declare const DataListItemLabel: {
+    (props: TextProps): JSX.Element;
+    displayName: string;
+};
+
+/**
+ * The value of the `DataListItem`. Extends the [Text]() component.
+ */
+declare const DataListItemValue: {
+    (props: TextProps): JSX.Element;
+    displayName: string;
+};
+
+export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Banner, type BannerProps, Box, type BoxProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonProps, Card, type CardProps, Center, type CenterProps, Checkbox, CheckboxGroup, CheckboxMenuItem, ClickRegion, type ClickRegionProps, Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleTrigger, CollapsibleTriggerIcon, ColorGrid, ColorGridOption, type ColorGridOptionProps, type ColorGridProps, ColorList, ColorListGroup, type ColorListGroupProps, ColorListOption, type ColorListOptionProps, type ColorListProps, ColorPicker, ColorPickerPopoverContent, type ColorPickerPopoverContentProps, type ColorPickerProps, ColorPickerSection, type ColorPickerSectionProps, ColorPickerTrigger, type ColorPickerTriggerProps, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Combobox, ComboboxOption, type ComboboxOptionProps, type ComboboxProps, ContextMenu, type ContextMenuProps, ContrastControls, DataCard, DataCardHoverArrow, type DataCardProps, DataCardTrend, type DataCardTrendProps, DataCards, type DataCardsProps, DataList, DataListItem, DataListItemLabel, DataListItemValue, type DataListProps, Divider, EditableHeading, type EditableHeadingProps, Ellipsis, type EllipsisProps, FilterMenu, FilterMenuItem, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Grid, type GridProps, Heading, type HeadingProps, HexColorInput, type HexColorInputProps, HueSlider, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, InputClickToCopy, type InputClickToCopyProps, InputPassword, type InputPasswordProps, type InputProps, type KeyboardKeys, KeyboardShortcut, Label, type LabelProps, Link, type LinkProps, List, type ListProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, Radio, RadioCard, RadioCardImage, type RadioCardImageProps, type RadioCardProps, RadioGroup, RadioMenuItem, type RadioProps, SaturationAndValuePicker, ScreenReaderOnly, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Slider, type SliderProps, Stack, SubMenu, Switch, type SwitchProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableFoot, type TableFootProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, Text, type TextProps, Thumbnail, ThumbnailBadge, type ThumbnailBadgeProps, ThumbnailCollage, type ThumbnailCollageProps, type ThumbnailProps, Tooltip, type TooltipProps, UIProvider, type UseToastProps, ValueNameOrHexCode, ValueSwatch, WistiaLogo, calculateContrast, colorSchemeOptions, copyToClipboard, dateTime, iconSizeMap, mergeRefs, mq, useActiveMq, useAriaLive, useBoolean, useClipboard, useElementObserver, useFilePicker, useFocusTrap, useForceUpdate, useFormState, useImperativeFilePicker, useIsHovered, useKey, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, usePreviousValue, useToast, useWindowSize };

package/dist/index.d.ts

@@ -1401,7 +1401,7 @@ declare const Icon: {
     displayName: string;
 };
 
-type CollapsibleTriggerIconProps = {
+type CollapsibleTriggerIconProps = Omit<IconProps, 'type'> & {
     type: Extract<IconProps['type'], 'caret-left-strong' | 'caret-left' | 'caret-right-strong' | 'caret-right' | 'plus'>;
 };
 declare const CollapsibleTriggerIcon: {
@@ -2861,6 +2861,10 @@ type ProgressBarProps = ComponentPropsWithoutRef<'div'> & {
      * The maximum progress value
      */
     max?: number;
+    /**
+     * Sets the [color scheme](../?path=/docs/docs-color-schemes--docs)
+     */
+    colorScheme?: ColorSchemeTypes;
     /**
      * Slot for additional content to be rendered to the left of the progress bar
      */
@@ -2874,7 +2878,7 @@ type ProgressBarProps = ComponentPropsWithoutRef<'div'> & {
  * A progress component that visually represents the completion status of a task
  */
 declare const ProgressBar: {
-    ({ progress, max, children, labelLeft, labelRight, ...props }: ProgressBarProps): JSX.Element;
+    ({ progress, max, children, labelLeft, labelRight, colorScheme, ...props }: ProgressBarProps): JSX.Element;
     displayName: string;
 };
 
@@ -3907,4 +3911,60 @@ type ContextMenuProps = {
  */
 declare const ContextMenu: ({ position, triggerRef, children, onRequestClose, }: ContextMenuProps) => react_jsx_runtime.JSX.Element | null;
 
-export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Banner, type BannerProps, Box, type BoxProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonProps, Card, type CardProps, Center, type CenterProps, Checkbox, CheckboxGroup, CheckboxMenuItem, ClickRegion, type ClickRegionProps, Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleTrigger, CollapsibleTriggerIcon, ColorGrid, ColorGridOption, type ColorGridOptionProps, type ColorGridProps, ColorList, ColorListGroup, type ColorListGroupProps, ColorListOption, type ColorListOptionProps, type ColorListProps, ColorPicker, ColorPickerPopoverContent, type ColorPickerPopoverContentProps, type ColorPickerProps, ColorPickerSection, type ColorPickerSectionProps, ColorPickerTrigger, type ColorPickerTriggerProps, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Combobox, ComboboxOption, type ComboboxOptionProps, type ComboboxProps, ContextMenu, type ContextMenuProps, ContrastControls, DataCard, DataCardHoverArrow, type DataCardProps, DataCardTrend, type DataCardTrendProps, DataCards, type DataCardsProps, Divider, EditableHeading, type EditableHeadingProps, Ellipsis, type EllipsisProps, FilterMenu, FilterMenuItem, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Grid, type GridProps, Heading, type HeadingProps, HexColorInput, type HexColorInputProps, HueSlider, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, InputClickToCopy, type InputClickToCopyProps, InputPassword, type InputPasswordProps, type InputProps, type KeyboardKeys, KeyboardShortcut, Label, type LabelProps, Link, type LinkProps, List, type ListProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, Radio, RadioCard, RadioCardImage, type RadioCardImageProps, type RadioCardProps, RadioGroup, RadioMenuItem, type RadioProps, SaturationAndValuePicker, ScreenReaderOnly, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Slider, type SliderProps, Stack, SubMenu, Switch, type SwitchProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableFoot, type TableFootProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, Text, type TextProps, Thumbnail, ThumbnailBadge, type ThumbnailBadgeProps, ThumbnailCollage, type ThumbnailCollageProps, type ThumbnailProps, Tooltip, type TooltipProps, UIProvider, type UseToastProps, ValueNameOrHexCode, ValueSwatch, WistiaLogo, calculateContrast, colorSchemeOptions, copyToClipboard, dateTime, iconSizeMap, mergeRefs, mq, useActiveMq, useAriaLive, useBoolean, useClipboard, useElementObserver, useFilePicker, useFocusTrap, useForceUpdate, useFormState, useImperativeFilePicker, useIsHovered, useKey, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, usePreviousValue, useToast, useWindowSize };
+type DataListProps = ComponentPropsWithoutRef<'dl'> & {
+    /**
+     * Should only contain `DataListItem` components.
+     */
+    children: ReactNode;
+    /**
+     * Maximum width for the label.
+     */
+    labelMaxWith?: string;
+    /**
+     * Prominence of the label text. Default is `primary`.
+     */
+    labelProminence?: 'primary' | 'secondary';
+    /**
+     * Alignment of the value text. Default is `start`.
+     */
+    valueAlignment?: 'end' | 'start';
+};
+/**
+ * The DataList component is used to display a list of items with labels and values.
+ */
+declare const DataList: {
+    ({ children, valueAlignment, labelMaxWith, labelProminence, ...props }: DataListProps): JSX.Element;
+    displayName: string;
+};
+
+type DataListItemProps = Omit<ComponentPropsWithoutRef<'dl'>, 'childern'> & {
+    /**
+     * Should only contain `DataListItemItem` components.
+     */
+    children: ReactNode;
+};
+/**
+ * An item within a `DataList`. It should only contain `DataListItemLabel` and `DataListItemValue` components.
+ */
+declare const DataListItem: {
+    ({ children }: DataListItemProps): ReactNode;
+    displayName: string;
+};
+
+/**
+ * The label of the `DataListItem`. Extends the [Text]() component.
+ */
+declare const DataListItemLabel: {
+    (props: TextProps): JSX.Element;
+    displayName: string;
+};
+
+/**
+ * The value of the `DataListItem`. Extends the [Text]() component.
+ */
+declare const DataListItemValue: {
+    (props: TextProps): JSX.Element;
+    displayName: string;
+};
+
+export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Banner, type BannerProps, Box, type BoxProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonProps, Card, type CardProps, Center, type CenterProps, Checkbox, CheckboxGroup, CheckboxMenuItem, ClickRegion, type ClickRegionProps, Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleTrigger, CollapsibleTriggerIcon, ColorGrid, ColorGridOption, type ColorGridOptionProps, type ColorGridProps, ColorList, ColorListGroup, type ColorListGroupProps, ColorListOption, type ColorListOptionProps, type ColorListProps, ColorPicker, ColorPickerPopoverContent, type ColorPickerPopoverContentProps, type ColorPickerProps, ColorPickerSection, type ColorPickerSectionProps, ColorPickerTrigger, type ColorPickerTriggerProps, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Combobox, ComboboxOption, type ComboboxOptionProps, type ComboboxProps, ContextMenu, type ContextMenuProps, ContrastControls, DataCard, DataCardHoverArrow, type DataCardProps, DataCardTrend, type DataCardTrendProps, DataCards, type DataCardsProps, DataList, DataListItem, DataListItemLabel, DataListItemValue, type DataListProps, Divider, EditableHeading, type EditableHeadingProps, Ellipsis, type EllipsisProps, FilterMenu, FilterMenuItem, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Grid, type GridProps, Heading, type HeadingProps, HexColorInput, type HexColorInputProps, HueSlider, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, InputClickToCopy, type InputClickToCopyProps, InputPassword, type InputPasswordProps, type InputProps, type KeyboardKeys, KeyboardShortcut, Label, type LabelProps, Link, type LinkProps, List, type ListProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, Radio, RadioCard, RadioCardImage, type RadioCardImageProps, type RadioCardProps, RadioGroup, RadioMenuItem, type RadioProps, SaturationAndValuePicker, ScreenReaderOnly, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Slider, type SliderProps, Stack, SubMenu, Switch, type SwitchProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableFoot, type TableFootProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, Text, type TextProps, Thumbnail, ThumbnailBadge, type ThumbnailBadgeProps, ThumbnailCollage, type ThumbnailCollageProps, type ThumbnailProps, Tooltip, type TooltipProps, UIProvider, type UseToastProps, ValueNameOrHexCode, ValueSwatch, WistiaLogo, calculateContrast, colorSchemeOptions, copyToClipboard, dateTime, iconSizeMap, mergeRefs, mq, useActiveMq, useAriaLive, useBoolean, useClipboard, useElementObserver, useFilePicker, useFocusTrap, useForceUpdate, useFormState, useImperativeFilePicker, useIsHovered, useKey, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, usePreviousValue, useToast, useWindowSize };

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.14.13
+ * @license @wistia/ui v0.14.15
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -7133,7 +7133,7 @@ var StyledLink = styled4.a`
   ${({ href }) => isNil6(href) && buttonResetCss};
   ${({ $colorScheme }) => getColorScheme($colorScheme)}
   cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "pointer"};
-  font-family: var(--wui-typography-family-default);
+  font-family: inherit;
   color: ${({ $disabled }) => $disabled ? "var(--wui-color-text-disabled)" : "var(--wui-color-text-link)"};
   text-decoration: ${({ $underline }) => $underline === "always" ? "underline" : "none"};
   display: inline-flex;
@@ -14634,8 +14634,6 @@ import { isNotNil as isNotNil31 } from "@wistia/type-guards";
 import { jsx as jsx285, jsxs as jsxs51 } from "react/jsx-runtime";
 var ProgressBarWrapper = styled75.div`
   --progress-bar-height: 8px;
-  --progress-bar-indicator-color: var(--wui-color-bg-fill);
-  --progress-bar-background-color: var(--wui-color-bg-surface-secondary);
 
   display: flex;
   align-items: center;
@@ -14657,7 +14655,8 @@ var ProgressBarLabel = styled75.div`
   flex-shrink: 0;
 `;
 var StyledProgressIndicator = styled75(ProgressIndicator)`
-  background-color: var(--progress-bar-indicator-color);
+  ${({ $colorScheme }) => getColorScheme($colorScheme)}
+  background-color: var(--wui-color-bg-fill);
   width: 100%;
   height: 100%;
   border-top-right-radius: var(--wui-border-radius-rounded);
@@ -14666,9 +14665,10 @@ var StyledProgressIndicator = styled75(ProgressIndicator)`
   transform: ${({ $progress, $max }) => getTranslateValue($progress, $max)};
 `;
 var StyledProgressBar = styled75(ProgressRoot)`
+  ${({ $colorScheme }) => getColorScheme($colorScheme)}
   position: relative;
   overflow: hidden;
-  background: var(--progress-bar-background-color);
+  background-color: var(--wui-color-bg-surface-secondary);
   border-radius: var(--wui-border-radius-rounded);
   width: 100%;
   height: var(--progress-bar-height);
@@ -14682,6 +14682,7 @@ var ProgressBar = ({
   children,
   labelLeft,
   labelRight,
+  colorScheme = "inherit",
   ...props
 }) => {
   return /* @__PURE__ */ jsxs51(ProgressBarWrapper, { children: [
@@ -14689,12 +14690,14 @@ var ProgressBar = ({
     /* @__PURE__ */ jsx285(
       StyledProgressBar,
       {
+        $colorScheme: colorScheme,
         max,
         value: progress,
         ...props,
         children: /* @__PURE__ */ jsx285(
           StyledProgressIndicator,
           {
+            $colorScheme: colorScheme,
             $max: max,
             $progress: progress
           }
@@ -16917,6 +16920,87 @@ var ContextMenu = ({
     }
   ) : null;
 };
+
+// src/components/DataList/DataList.tsx
+import styled103 from "styled-components";
+import { jsx as jsx315 } from "react/jsx-runtime";
+var StyledDataList = styled103.dl`
+  display: grid;
+  grid-template-columns: auto 1fr;
+  column-gap: var(--wui-space-02);
+  row-gap: var(--wui-space-04);
+  align-items: baseline;
+  align-content: start;
+
+  dt {
+    margin: 0;
+    padding: 0;
+    font-weight: var(--wui-datalist-label-prominence);
+    width: var(--wui-datalist-label-max-width, auto);
+  }
+
+  dd {
+    margin: 0;
+    padding: 0;
+    text-align: var(--wui-datalist-value-alignment, start);
+  }
+`;
+var DataList = ({
+  children,
+  valueAlignment = "start",
+  labelMaxWith = "auto",
+  labelProminence = "primary",
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx315(
+    StyledDataList,
+    {
+      role: "list",
+      style: {
+        "--wui-datalist-label-max-width": labelMaxWith,
+        "--wui-datalist-value-alignment": valueAlignment === "end" ? "right" : "left",
+        "--wui-datalist-label-prominence": labelProminence === "secondary" ? "var(--wui-typography-weight-label)" : "var(--wui-typography-weight-label-bold)"
+      },
+      ...props,
+      children
+    }
+  );
+};
+DataList.displayName = "DataList_UI";
+
+// src/components/DataList/DataListItem.tsx
+var DataListItem = ({ children }) => {
+  return children;
+};
+DataListItem.displayName = "DataListItem_UI";
+
+// src/components/DataList/DataListItemLabel.tsx
+import { jsx as jsx316 } from "react/jsx-runtime";
+var DataListItemLabel = (props) => {
+  return /* @__PURE__ */ jsx316(
+    Text,
+    {
+      variant: "label4",
+      ...props,
+      renderAs: "dt"
+    }
+  );
+};
+DataListItemLabel.displayName = "DataListItemLabel_UI";
+
+// src/components/DataList/DataListItemValue.tsx
+import { jsx as jsx317 } from "react/jsx-runtime";
+var DataListItemValue = (props) => {
+  return /* @__PURE__ */ jsx317(
+    Text,
+    {
+      variant: "body3",
+      ...props,
+      renderAs: "dd"
+    }
+  );
+};
+DataListItemValue.displayName = "DataListItemValue_UI";
 export {
   ActionButton,
   Avatar,
@@ -16955,6 +17039,10 @@ export {
   DataCardHoverArrow,
   DataCardTrend,
   DataCards,
+  DataList,
+  DataListItem,
+  DataListItemLabel,
+  DataListItemValue,
   Divider,
   EditableHeading,
   Ellipsis,