@wallarm-org/design-system 0.73.0 → 0.74.0

package/dist/components/Attribute/AttributeValue.js

@@ -18,7 +18,7 @@ const AttributeValue = ({ ref, children, className, ...props })=>{
         ref: ref,
         "data-testid": testId,
         "data-slot": "attribute-value",
-        className: cn('flex items-center', '[&_[data-slot=inline-edit-preview]]:-my-4', 'has-[[data-slot=inline-edit]]:overflow-visible', isHorizontal ? 'flex-1 min-w-0 py-4 truncate' : 'pt-4 min-h-[28px]', className),
+        className: cn('flex items-center', '[&_[data-slot=inline-edit-preview]]:-my-4', '[&_[data-slot=inline-edit-control]]:-my-4', !isHorizontal && 'has-[[data-slot=inline-edit]]:-ml-7', !isHorizontal && 'has-[[data-slot=attribute-actions-target]]:-ml-7', !isHorizontal && '[&_[data-slot=inline-edit-error]]:ml-7', 'has-[[data-slot=inline-edit]]:overflow-visible', isHorizontal ? 'flex-1 min-w-0 py-4 truncate' : 'pt-4 min-h-[28px]', className),
         children: showPlaceholder ? /*#__PURE__*/ jsx(Text, {
             size: "sm",
             color: "secondary",

package/dist/components/ButtonBase/classes.d.ts

@@ -1,5 +1,5 @@
 export declare const buttonBaseVariants: (props?: ({
-    size?: "small" | "medium" | "large" | null | undefined;
+    size?: "small" | "medium" | "large" | "inline-edit" | null | undefined;
     iconOnly?: boolean | null | undefined;
     loading?: boolean | null | undefined;
     hasNonTextEnd?: boolean | null | undefined;

package/dist/components/ButtonBase/classes.js

@@ -5,7 +5,8 @@ const buttonBaseVariants = cva(cn('items-center justify-center min-w-0 rounded-8
         size: {
             small: 'h-24 px-8 py-2 gap-4',
             medium: 'h-32 px-12 py-6 gap-6',
-            large: 'h-36 px-16 py-8 gap-8'
+            large: 'h-36 px-16 py-8 gap-8',
+            'inline-edit': 'h-28 px-10 py-4 gap-5'
         },
         iconOnly: {
             true: '',
@@ -39,6 +40,11 @@ const buttonBaseVariants = cva(cn('items-center justify-center min-w-0 rounded-8
             size: 'large',
             className: 'w-36 h-36 p-8'
         },
+        {
+            iconOnly: true,
+            size: 'inline-edit',
+            className: 'w-28 h-28 p-4'
+        },
         {
             hasNonTextEnd: true,
             size: 'small',
@@ -53,6 +59,11 @@ const buttonBaseVariants = cva(cn('items-center justify-center min-w-0 rounded-8
             hasNonTextEnd: true,
             size: 'large',
             className: 'pr-10'
+        },
+        {
+            hasNonTextEnd: true,
+            size: 'inline-edit',
+            className: 'pr-4'
         }
     ]
 });

package/dist/components/InlineEdit/InlineEditControl.js

@@ -3,7 +3,13 @@ import { useCallback, useEffect, useRef } from "react";
 import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
 import { useInlineEdit } from "./InlineEditContext.js";
-const FOCUSABLE_SELECTOR = 'input, textarea, select, button, [tabindex]:not([tabindex="-1"])';
+const FOCUSABLE_SELECTOR = 'input:not([tabindex="-1"]), textarea:not([tabindex="-1"]), select:not([tabindex="-1"]), button:not([tabindex="-1"]), [tabindex]:not([tabindex="-1"])';
+function findOpenListbox(focusable) {
+    const controlsId = focusable.getAttribute('aria-controls');
+    if (!controlsId) return null;
+    const controlled = document.getElementById(controlsId);
+    return controlled?.getAttribute('role') === 'listbox' ? controlled : null;
+}
 const InlineEditControl = ({ ref, children, className, onKeyDown, onBlur, submitMode: submitModeProp, ...props })=>{
     const testId = useTestId('control');
     const ctx = useInlineEdit();
@@ -16,8 +22,9 @@ const InlineEditControl = ({ ref, children, className, onKeyDown, onBlur, submit
         if (!editing) return;
         const node = divRef.current;
         if (!node) return;
-        const focusable = node.querySelector(FOCUSABLE_SELECTOR);
-        if (!focusable) return;
+        const firstFocusable = node.querySelector(FOCUSABLE_SELECTOR);
+        if (!firstFocusable) return;
+        const focusable = findOpenListbox(firstFocusable) ?? firstFocusable;
         focusable.focus();
         if (selectOnFocusRef.current && (focusable instanceof HTMLInputElement || focusable instanceof HTMLTextAreaElement)) focusable.select();
     }, [
@@ -64,7 +71,7 @@ const InlineEditControl = ({ ref, children, className, onKeyDown, onBlur, submit
         "data-slot": "inline-edit-control",
         onKeyDown: handleKeyDown,
         onBlur: handleBlur,
-        className: cn('w-full min-w-0', '-ml-7', '[&_[data-slot=input]]:px-6', '[&_textarea]:px-6', '[&_[data-scope=number-input][data-part=input]]:px-6', '[&_[data-scope=select][data-part=trigger]]:px-6', '[&_div[data-scope=select][data-part=trigger]:has([data-slot=overflow-list])]:pl-0', '[&_[data-slot=input-group-addon]]:px-6', '[&_[data-slot=input-group]>div:not([data-slot])]:pl-0', className),
+        className: cn('w-full min-w-0', '[&_[data-slot=input]]:px-6', '[&_textarea]:px-6', '[&_[data-scope=number-input][data-part=input]]:px-6', '[&_[data-scope=select][data-part=trigger]]:px-6', '[&_div[data-scope=select][data-part=trigger]:has([data-slot=overflow-list])]:pl-0', '[&_[data-slot=input-group-addon]]:px-6', '[&_[data-slot=input-group]>div:not([data-slot])]:pl-0', className),
         children: 'function' == typeof children ? children(ctx) : children
     });
 };

package/dist/components/InlineEdit/InlineEditInput.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { useTestId } from "../../utils/testId.js";
 import { Input } from "../Input/index.js";
 import { useInlineEdit } from "./InlineEditContext.js";
-const InlineEditInput = ({ size = 'small', 'data-testid': testIdProp, ...props })=>{
+const InlineEditInput = ({ size = 'inline-edit', 'data-testid': testIdProp, ...props })=>{
     const testId = useTestId('input', testIdProp);
     const { value, setValue, invalid } = useInlineEdit();
     return /*#__PURE__*/ jsx(Input, {

package/dist/components/InlineEdit/InlineEditNumber.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { useTestId } from "../../utils/testId.js";
 import { NumberInput } from "../NumberInput/index.js";
 import { useInlineEdit } from "./InlineEditContext.js";
-const InlineEditNumber = ({ size = 'small', 'data-testid': testIdProp, ...props })=>{
+const InlineEditNumber = ({ size = 'inline-edit', 'data-testid': testIdProp, ...props })=>{
     const testId = useTestId('input', testIdProp);
     const { value, setValue, invalid } = useInlineEdit();
     return /*#__PURE__*/ jsx(NumberInput, {

package/dist/components/InlineEdit/InlineEditPreviewValue.js

@@ -17,7 +17,7 @@ const InlineEditPreviewValue = ({ ref, lineClamp, children })=>{
         ref: ref,
         "data-testid": testId,
         "data-slot": "inline-edit-preview-value",
-        className: cn('min-w-0 flex-1', lineClamp ? LINE_CLAMP_CLASS[lineClamp] : 'truncate', 'loading' === status && 'opacity-50'),
+        className: cn('min-w-0 flex-1', lineClamp ? cn(LINE_CLAMP_CLASS[lineClamp], 'whitespace-normal') : 'truncate', 'loading' === status && 'opacity-50'),
         children: children
     });
 };

package/dist/components/InlineEdit/InlineEditSelect.js

@@ -28,6 +28,7 @@ const InlineEditSelect = ({ items, collection, multiple = false, children })=>{
     return /*#__PURE__*/ jsx(Select, {
         "data-testid": testId,
         defaultOpen: true,
+        defaultHighlightedValue: selected[0] ?? resolvedCollection.firstValue,
         collection: resolvedCollection,
         multiple: multiple,
         value: selected,

package/dist/components/InlineEdit/InlineEditTextarea.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { useTestId } from "../../utils/testId.js";
 import { Textarea } from "../Textarea/index.js";
 import { useInlineEdit } from "./InlineEditContext.js";
-const InlineEditTextarea = ({ size = 'small', 'data-testid': testIdProp, ...props })=>{
+const InlineEditTextarea = ({ size = 'inline-edit', 'data-testid': testIdProp, ...props })=>{
     const testId = useTestId('input', testIdProp);
     const { value, setValue, invalid } = useInlineEdit();
     return /*#__PURE__*/ jsx(Textarea, {

package/dist/components/InlineEdit/InlineEditTime.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { useTestId } from "../../utils/testId.js";
 import { TimeInput } from "../TimeInput/index.js";
 import { useInlineEdit, useInlineEditSubmitMode } from "./InlineEditContext.js";
-const InlineEditTime = ({ 'data-testid': testIdProp, granularity = 'minute', showTimeDropdown = true, showIcon = false, size = 'small', ...props })=>{
+const InlineEditTime = ({ 'data-testid': testIdProp, granularity = 'minute', showTimeDropdown = true, showIcon = false, size = 'inline-edit', ...props })=>{
     const testId = useTestId('input', testIdProp);
     const { value, setValue } = useInlineEdit();
     useInlineEditSubmitMode('blur');

package/dist/components/InlineEdit/classes.js

@@ -1,9 +1,9 @@
 import { cva } from "class-variance-authority";
-const inlineEditPreviewVariants = cva('group flex w-full min-w-0 gap-4 rounded-8 border border-transparent px-6 -ml-7 font-sans text-sm text-text-primary transition-colors', {
+const inlineEditPreviewVariants = cva('group flex w-full min-w-0 gap-4 rounded-8 border border-transparent px-6 font-sans text-sm text-text-primary transition-colors', {
     variants: {
         multiline: {
-            true: 'items-start py-0',
-            false: 'items-center py-2 h-24'
+            true: 'items-start py-4',
+            false: 'items-center py-4 h-28'
         },
         activatable: {
             true: '',

package/dist/components/Input/classes.d.ts

@@ -1,4 +1,4 @@
 export declare const inputVariants: (props?: ({
     error?: boolean | null | undefined;
-    size?: "small" | "medium" | "default" | null | undefined;
+    size?: "small" | "medium" | "default" | "inline-edit" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/Input/classes.js

@@ -1,6 +1,6 @@
 import { cva } from "class-variance-authority";
 import { cn } from "../../utils/cn.js";
-const inputVariants = cva(cn('flex w-full px-12 rounded-8 border bg-component-input-bg', 'font-sans text-sm text-text-primary placeholder:text-text-secondary', 'shadow-xs transition-[color,border,box-shadow]', 'focus-visible:outline-none focus-visible:ring-3', 'disabled:aria-disabled:cursor-not-allowed disabled:aria-disabled:opacity-50'), {
+const inputVariants = cva(cn('flex w-full px-12 rounded-8 border bg-component-input-bg', 'font-sans text-sm text-text-primary placeholder:text-text-secondary', 'placeholder:text-sm', 'shadow-xs transition-[color,border,box-shadow]', 'focus-visible:outline-none focus-visible:ring-3', 'disabled:aria-disabled:cursor-not-allowed disabled:aria-disabled:opacity-50'), {
     variants: {
         error: {
             true: cn('border-border-strong-danger', 'hover:not-disabled:border-border-strong-danger', 'hover:not-disabled:outline-none', 'hover:not-disabled:ring-3', 'hover:not-disabled:ring-focus-destructive-hover', 'focus-visible:ring-focus-destructive'),
@@ -9,7 +9,8 @@ const inputVariants = cva(cn('flex w-full px-12 rounded-8 border bg-component-in
         size: {
             default: 'h-36 py-8',
             medium: 'h-32 py-6',
-            small: 'h-24 py-2'
+            small: 'h-24 py-2',
+            'inline-edit': 'h-28 py-4'
         }
     },
     defaultVariants: {

package/dist/components/InputGroup/InputGroup.d.ts

@@ -2,7 +2,7 @@ import type { FC, HTMLAttributes } from 'react';
 import { type VariantProps } from 'class-variance-authority';
 import { type TestableProps } from '../../utils/testId';
 export declare const inputGroupVariants: (props?: ({
-    size?: "small" | "medium" | "default" | null | undefined;
+    size?: "small" | "medium" | "default" | "inline-edit" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type InputGroupSize = NonNullable<VariantProps<typeof inputGroupVariants>['size']>;
 type InputGroupProps = HTMLAttributes<HTMLDivElement> & VariantProps<typeof inputGroupVariants> & TestableProps;

package/dist/components/InputGroup/InputGroup.js

@@ -7,7 +7,8 @@ const inputGroupVariants = cva(cn('group/input-group', 'w-full flex items-center
         size: {
             default: 'h-36',
             medium: 'h-32',
-            small: 'h-24'
+            small: 'h-24',
+            'inline-edit': 'h-28'
         }
     },
     defaultVariants: {

package/dist/components/NumberInput/classes.d.ts

@@ -1,12 +1,12 @@
 export declare const numberInputRootVariants: (props?: ({
-    size?: "small" | "medium" | "default" | null | undefined;
+    size?: "small" | "medium" | "default" | "inline-edit" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const numberInputFieldVariants: (props?: ({
-    size?: "small" | "medium" | "default" | null | undefined;
+    size?: "small" | "medium" | "default" | "inline-edit" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const numberInputControlVariants: (props?: ({
-    size?: "small" | "medium" | "default" | null | undefined;
+    size?: "small" | "medium" | "default" | "inline-edit" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const numberInputTriggerVariants: (props?: ({
-    size?: "small" | "medium" | "default" | null | undefined;
+    size?: "small" | "medium" | "default" | "inline-edit" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/NumberInput/classes.js

@@ -5,7 +5,8 @@ const numberInputRootVariants = cva(cn('flex items-stretch border rounded-8 bg-c
         size: {
             default: 'h-36',
             medium: 'h-32',
-            small: 'h-24'
+            small: 'h-24',
+            'inline-edit': 'h-28'
         }
     },
     defaultVariants: {
@@ -17,7 +18,8 @@ const numberInputFieldVariants = cva(cn('flex-1 h-full rounded-none border-0 bg-
         size: {
             default: 'px-12 py-8',
             medium: 'px-12 py-6',
-            small: 'px-12 py-2'
+            small: 'px-12 py-2',
+            'inline-edit': 'px-12 py-4'
         }
     },
     defaultVariants: {
@@ -29,7 +31,8 @@ const numberInputControlVariants = cva(cn('flex flex-col justify-center', 'bg-st
         size: {
             default: 'px-4 py-2 [&_svg]:icon-sm',
             medium: 'px-3 py-1 [&_svg]:icon-sm',
-            small: 'px-2 py-0 [&_svg]:icon-xs'
+            small: 'px-2 py-0 [&_svg]:icon-xs',
+            'inline-edit': 'px-2 py-0 [&_svg]:icon-xs'
         }
     },
     defaultVariants: {
@@ -41,7 +44,8 @@ const numberInputTriggerVariants = cva(cn('flex items-center justify-center roun
         size: {
             default: 'w-16 h-14 px-2 py-1',
             medium: 'w-14 h-12 px-2 py-1',
-            small: 'w-12 h-10 px-1 py-0'
+            small: 'w-12 h-10 px-1 py-0',
+            'inline-edit': 'w-12 h-11 px-1 py-0'
         }
     },
     defaultVariants: {

package/dist/components/Select/SelectButton.d.ts

@@ -2,7 +2,7 @@ import type { FC } from 'react';
 import { type ButtonProps } from '../Button';
 import { type SelectValueTextProps } from './SelectValueText';
 type SelectButtonBaseProps = Omit<ButtonProps, 'variant' | 'color' | 'size' | 'disabled'>;
-export type SelectButtonSize = 'small' | 'medium' | 'default';
+export type SelectButtonSize = 'small' | 'medium' | 'default' | 'inline-edit';
 export interface SelectButtonVariantProps {
     variant?: Exclude<ButtonProps['variant'], 'primary'>;
     color?: Exclude<ButtonProps['color'], 'destructive'>;

package/dist/components/Select/SelectButton.js

@@ -9,7 +9,8 @@ import { SelectValueText } from "./SelectValueText.js";
 const SELECT_BUTTON_SIZE_MAP = {
     small: 'small',
     medium: 'medium',
-    default: 'large'
+    default: 'large',
+    'inline-edit': 'inline-edit'
 };
 const SelectButton = ({ placeholder = 'Choose...', variant = 'outline', color = 'neutral', size = 'default', 'data-testid': testIdProp, ...props })=>{
     const testId = useTestId('button', testIdProp);

package/dist/components/Select/SelectInput/SelectInput.d.ts

@@ -2,7 +2,7 @@ import type { FC } from 'react';
 import { type SelectValueTextProps } from '../SelectValueText';
 interface SelectInputBaseProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'color'> {
     'data-testid'?: string;
-    size?: 'small' | 'medium' | 'default';
+    size?: 'small' | 'medium' | 'default' | 'inline-edit';
 }
 type SelectInputProps = SelectInputBaseProps & Pick<SelectValueTextProps, 'placeholder'>;
 export declare const SelectInput: FC<SelectInputProps>;

package/dist/components/Select/SelectInput/SelectInput.js

@@ -45,7 +45,8 @@ const selectInputVariants = cva([
         size: {
             default: 'h-36',
             medium: 'h-32',
-            small: 'h-24'
+            small: 'h-24',
+            'inline-edit': 'h-28'
         }
     },
     compoundVariants: [

package/dist/components/Select/SelectInput/SelectInputItemRenderer.d.ts

@@ -4,8 +4,8 @@ import type { SelectDataItem } from '../types';
 type SelectInputItemRendererProps = {
     item: SelectDataItem;
     /** `SelectInput`'s own size — chips scale down with it, see `TAG_SIZE_BY_SELECT_SIZE`. */
-    size?: 'small' | 'medium' | 'default';
+    size?: 'small' | 'medium' | 'default' | 'inline-edit';
 };
-export declare const TAG_SIZE_BY_SELECT_SIZE: Record<'small' | 'medium' | 'default', TagProps['size']>;
+export declare const TAG_SIZE_BY_SELECT_SIZE: Record<'small' | 'medium' | 'default' | 'inline-edit', TagProps['size']>;
 export declare const SelectInputItemRenderer: FC<SelectInputItemRendererProps>;
 export {};

package/dist/components/Select/SelectInput/SelectInputItemRenderer.js

@@ -4,7 +4,8 @@ import { Tag, TagClose } from "../../Tag/index.js";
 const TAG_SIZE_BY_SELECT_SIZE = {
     small: 'medium',
     medium: 'large',
-    default: 'large'
+    default: 'large',
+    'inline-edit': 'large'
 };
 const SelectInputItemRenderer = ({ item, size = 'default' })=>{
     const { value, setValue } = useSelectContext();

package/dist/components/Select/SelectInput/SelectInputOverflowRenderer.d.ts

@@ -1,2 +1,2 @@
 import type { SelectDataItem } from '../types';
-export declare const createSelectInputOverflowRenderer: (size: "small" | "medium" | "default") => (items: SelectDataItem[]) => import("react").JSX.Element;
+export declare const createSelectInputOverflowRenderer: (size: "small" | "medium" | "default" | "inline-edit") => (items: SelectDataItem[]) => import("react").JSX.Element;

package/dist/components/SimpleCharts/HorizontalBarStack/HorizontalBarStack.d.ts

@@ -0,0 +1,50 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+import { type TestableProps } from '../../../utils/testId';
+import type { ChartColor } from '../types';
+export interface HorizontalBarStackDatum {
+    /** Legend label, React key, and `data-name` hook. */
+    name: string;
+    /** Segment size; proportional to the bar total. */
+    value: number;
+    /** Built-in palette; resolves via `resolveChartColor`. Omitted → auto-assigned by index. */
+    color?: ChartColor;
+    /** Tailwind `bg-*` escape hatch; wins over `color` (inline fill is skipped). */
+    className?: string;
+}
+export interface HorizontalBarStackProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'>, TestableProps {
+    ref?: Ref<HTMLDivElement>;
+    /** Segments + legend. One array drives both, so colors stay in sync. */
+    data: HorizontalBarStackDatum[];
+    /**
+     * Header slot. Compose the headline from the shared `Metric` bricks —
+     * `<MetricHeader>` wrapping `<MetricValue>` / `<MetricDelta>` (and optionally `<MetricTotal>` /
+     * `<MetricCaption>`) — exactly as `Metric` and `PieChart`'s centre do. Rendered above the bar
+     * under this component's own `TestIdProvider`. Omitted → no header. (Replaces the former
+     * `value` / `delta` config props: one way to build a delta across the whole chart family.)
+     */
+    children?: ReactNode;
+    /** Bar denominator. `> sum(data.value)` → grey remainder tail. Default: `sum(data.value)`. */
+    total?: number;
+    /** Show/hide the legend. Default: true. */
+    legend?: boolean;
+    /**
+     * Controlled hover target, joined by `name`. Omitted → managed internally. Set together
+     * with `onActiveNameChange` to sync hover across charts (e.g. a sibling highlights the
+     * same series). Mirrors `PieChart`.
+     */
+    activeName?: string | null;
+    onActiveNameChange?: (name: string | null) => void;
+    /**
+     * Names to emphasise. When non-empty, non-selected segments + legend items fade. Hover
+     * (`activeName`) wins — while a series is hovered, only it stays bright. Names not in
+     * `data` are ignored.
+     */
+    selectedNames?: string[];
+    /**
+     * Click-to-filter. When provided, legend items become interactive (`role='button'`,
+     * `tabIndex=0`, Enter/Space) and fire with the clicked datum's `name`. The caller owns
+     * the filter (typically: drive `selectedNames`, or filter `data`).
+     */
+    onSelect?: (name: string) => void;
+}
+export declare const HorizontalBarStack: FC<HorizontalBarStackProps>;

package/dist/components/SimpleCharts/{HorizontalBar/HorizontalBar.figma.js → HorizontalBarStack/HorizontalBarStack.figma.js}

@@ -3,7 +3,8 @@ import code_connect from "@figma/code-connect";
 import { Chart } from "../Chart/Chart.js";
 import { ChartHeader } from "../Chart/ChartHeader.js";
 import { ChartTitle } from "../Chart/ChartTitle.js";
-import { HorizontalBar } from "./HorizontalBar.js";
+import { MetricDelta, MetricHeader, MetricValue } from "../Metric/index.js";
+import { HorizontalBarStack } from "./HorizontalBarStack.js";
 const figmaNodeUrl = 'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=9667-10883';
 const sampleData = [
     {
@@ -22,7 +23,7 @@ const sampleData = [
         color: 'amber'
     }
 ];
-code_connect.connect(HorizontalBar, figmaNodeUrl, {
+code_connect.connect(HorizontalBarStack, figmaNodeUrl, {
     props: {
         title: code_connect.string('Title')
     },
@@ -33,13 +34,20 @@ code_connect.connect(HorizontalBar, figmaNodeUrl, {
                         children: title
                     })
                 }),
-                /*#__PURE__*/ jsx(HorizontalBar, {
+                /*#__PURE__*/ jsx(HorizontalBarStack, {
                     data: sampleData,
-                    value: 91,
-                    delta: {
-                        value: 10,
-                        trend: 'up'
-                    }
+                    children: /*#__PURE__*/ jsxs(MetricHeader, {
+                        children: [
+                            /*#__PURE__*/ jsx(MetricValue, {
+                                children: "91"
+                            }),
+                            /*#__PURE__*/ jsx(MetricDelta, {
+                                value: 10,
+                                trend: "up",
+                                sentiment: "negative"
+                            })
+                        ]
+                    })
                 })
             ]
         })