@ketvietlab/design-system 0.1.9 → 0.1.13

package/dist/layouts/grouped.css

@@ -1,126 +1 @@
-/* Grey canvas and chrome, white working groups, and a single boundary per group. */
-@layer ket.app {
-  [data-kv-design-system][data-presentation="grouped"] {
-    --kv-page-bg: light-dark(#f6f6f7, var(--kv-ref-bg-main));
-    --kv-app-bg: light-dark(#f6f6f7, var(--kv-ref-bg-app));
-    --kv-sidebar-bg: light-dark(#f7f5f5, var(--kv-ref-bg-sidebar));
-    --kv-nav-selected: light-dark(#eef0fb, var(--kv-ref-nav-selected));
-    --kv-nav-selected-hover: light-dark(#dde2f7, var(--kv-ref-nav-selected-hover));
-    --kv-panel-bg-subtle: light-dark(#f6f6f7, var(--kv-ref-surface-0));
-    --kv-surface-raised: light-dark(#fafafb, var(--kv-ref-surface-2));
-    --kv-surface-hover: light-dark(#f0f1f3, var(--kv-ref-surface-3));
-    --kv-panel-border: light-dark(#e2e4e8, var(--kv-ref-border-subtle));
-    --kv-sidebar-border: light-dark(#e9e7e8, rgb(255 255 255 / 7%));
-    --kv-table-header-bg: light-dark(#f0f1f3, #282d34);
-    --kv-table-row-hover: light-dark(#f6f6f7, rgb(255 255 255 / 2.7%));
-    --kv-input-bg-hover: light-dark(#f6f6f7, #252b32);
-    --kv-interactive-hover: light-dark(#f6f6f7, var(--kv-ref-control-hover));
-    --kv-interactive-active: light-dark(#f0f1f3, var(--kv-ref-control-active));
-    --kv-interactive-disabled: light-dark(#f0f1f3, var(--kv-ref-control-disabled));
-    /* Rebind inherited aliases at the presentation boundary. */
-    --kv-page-content-bg: var(--kv-page-bg);
-    --kv-panel-divider: var(--kv-panel-border);
-    --kv-table-border: var(--kv-panel-border);
-    --kv-right-rail-border: var(--kv-sidebar-border);
-    --kv-color-canvas: var(--kv-page-bg);
-    --kv-color-canvas-raised: var(--kv-panel-bg-subtle);
-    --kv-color-surface-subtle: var(--kv-surface-raised);
-    --kv-color-surface-hover: var(--kv-surface-hover);
-    --kv-color-line: var(--kv-panel-border);
-  }
-
-  [data-kv-design-system][data-presentation="grouped"] :is([data-ui="app-main"], [data-ui="modal-layer"]) {
-    color-scheme: light;
-    --kv-page-chrome-bg: var(--kv-page-bg);
-    color: var(--kv-text-main);
-  }
-
-  [data-kv-design-system][data-presentation="grouped"] [data-ui="app-main"] {
-    --kv-page-padding-x: var(--kv-space-3);
-    background: var(--kv-page-bg);
-  }
-
-  [data-kv-design-system][data-presentation="grouped"]
-    :is([data-ui="list-page"], [data-ui="record-page"], [data-pattern="workspace"])
-    > :is([data-ui$="-context"], [data-ui$="-header"], [data-ui$="-navigation"], [data-ui$="-toolbar"]) {
-    padding-inline: var(--kv-page-padding-x);
-  }
-
-  @media (max-width: 42rem) {
-    [data-kv-design-system][data-presentation="grouped"]
-      :is([data-ui="list-page-body"], [data-ui="list-page-footer"]) {
-      margin-inline: var(--kv-page-padding-x);
-    }
-  }
-
-  [data-kv-design-system][data-presentation="grouped"]
-    :is([data-ui="dashboard-page-body"], [data-ui="board-page-body"], [data-ui="record-page-body"]) {
-    padding: var(--kv-space-3) var(--kv-page-padding-x);
-    gap: var(--kv-space-2);
-  }
-
-  [data-kv-design-system][data-presentation="grouped"]
-    :is([data-ui="dashboard-page-body"], [data-ui="board-page-body"], [data-ui="record-page-body"])
-    > [data-ui="stack"],
-  [data-kv-design-system][data-presentation="grouped"] [data-ui="app-main"] [data-ui="grid"],
-  [data-kv-design-system][data-presentation="grouped"]
-    [data-ui="section-body"]
-    > [data-ui="stack"]:has(> [data-ui="content-card"]) {
-    gap: var(--kv-space-2);
-  }
-
-  [data-kv-design-system][data-presentation="grouped"]
-    :is([data-ui="surface"], [data-ui="metric"], [data-ui="content-card"]) {
-    padding: var(--kv-space-3);
-  }
-
-  [data-kv-design-system][data-presentation="grouped"] [data-ui="surface-head"] {
-    padding: 0;
-    margin-bottom: var(--kv-space-3);
-  }
-
-  [data-kv-design-system][data-presentation="grouped"] [data-ui="table-scroll"][data-framed="false"] {
-    width: auto;
-    margin-inline: 0;
-  }
-
-  [data-kv-design-system][data-presentation="grouped"]
-    [data-ui="surface"][data-padding="none"]
-    > [data-ui="surface-head"] {
-    padding: 0;
-    margin-bottom: var(--kv-space-3);
-  }
-
-  [data-kv-design-system][data-presentation="grouped"] [data-ui="record-page-aside"] {
-    padding: var(--kv-space-3);
-  }
-
-  [data-kv-design-system][data-presentation="grouped"] [data-ui="record-page-aside"] > [data-ui="stack"] {
-    gap: var(--kv-space-3);
-  }
-
-  [data-kv-design-system][data-presentation="grouped"] [data-ui="record-page-aside"] {
-    background: var(--kv-panel-bg);
-  }
-
-  /* The context column already owns its white background. */
-  [data-kv-design-system][data-presentation="grouped"] [data-ui="record-page-aside"] [data-ui="metric"] {
-    padding: 0;
-    min-height: 0;
-    border: 0;
-    border-radius: 0;
-    background: transparent;
-  }
-
-  [data-kv-design-system][data-presentation="grouped"] [data-ui="surface"] [data-ui="disclosure"] {
-    border: 0;
-    border-radius: 0;
-    background: transparent;
-  }
-
-  [data-kv-design-system][data-presentation="grouped"]
-    [data-ui="surface"]
-    :is([data-ui="disclosure-summary"], [data-ui="disclosure-body"]) {
-    padding-inline: 0;
-  }
-}
+@import "./grouped/styles.css";

package/dist/layouts/index.d.ts

@@ -1,70 +1,2 @@
-import type { JSXChild, TemplateResult } from '@ketvietlab/ketjs-view';
-import type { Tone } from '../primitives/status.tsx';
-export declare const HOOKS: readonly ['stack', 'inline', 'grid', 'surface', 'surface-head', 'surface-title', 'surface-actions', 'disclosure', 'disclosure-summary', 'disclosure-body', 'section', 'section-head', 'section-eyebrow', 'section-title', 'section-description', 'section-actions', 'section-body', 'content-card', 'card-head', 'card-title', 'card-summary', 'card-body', 'card-meta', 'card-actions', 'metric', 'metric-icon', 'metric-label', 'metric-value', 'metric-detail'];
-export { AppShell, Page, PageHeader, RecordCanvas, RecordSection } from './shell.tsx';
-export declare const Stack: (props: {
-    items: readonly JSXChild[];
-    gap?: 'compact' | 'default' | 'loose';
-}) => TemplateResult;
-export declare const Inline: (props: {
-    items: readonly JSXChild[];
-}) => TemplateResult;
-export declare const Grid: (props: {
-    items: readonly JSXChild[];
-    columns?: 2 | 3 | 4;
-}) => TemplateResult;
-export declare const Surface: (props: {
-    body: JSXChild;
-    title?: string;
-    actions?: JSXChild;
-    tone?: 'default' | 'subtle' | 'raised';
-    padding?: 'none' | 'compact' | 'default';
-}) => TemplateResult;
-/** Native, keyboard-accessible progressive disclosure for dense secondary detail. */
-export declare const Disclosure: (props: {
-    summary: string;
-    body: JSXChild;
-    open?: boolean;
-}) => TemplateResult;
-export declare const Section: (props: {
-    title: string;
-    body: JSXChild;
-    description?: string | null;
-    eyebrow?: string | null;
-    actions?: JSXChild;
-}) => TemplateResult;
-export declare const ContentCard: (props: {
-    title: string;
-    summary?: string | null;
-    body?: JSXChild;
-    meta?: JSXChild;
-    actions?: JSXChild;
-    href?: string | null;
-    selected?: boolean;
-}) => TemplateResult;
-/**
- * One number, with the context that makes it mean something.
- *
- * `tone` colours a dot beside the label and nothing else. The number itself stays
- * in the page's ink: a KPI row is read by comparing figures, and four differently
- * coloured figures are compared by colour instead. The dot is drawn only when a
- * tone is passed, so a metric that has no state to report does not grow a grey
- * bullet that means nothing.
- *
- * `href` makes the whole card the link rather than the label, because the card is
- * what the pointer is already over. There is nothing else inside a metric to
- * click, which is exactly why `ContentCard` does the opposite.
- */
-export declare const Metric: (props: {
-    label: string;
-    value: string | number;
-    detail?: string | null;
-    tone?: Tone;
-    /**
-     * A glyph naming the quantity, in a tile beside it. Decorative: the label is
-     * the name of the number, so this is hidden from assistive technology.
-     */
-    icon?: JSXChild;
-    href?: string | null;
-}) => TemplateResult;
+export * from './layout/index.tsx';
 //# sourceMappingURL=index.d.ts.map

package/dist/layouts/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/design-system/src/layouts/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/design-system/src/layouts/index.tsx"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA"}

package/dist/layouts/index.js

@@ -1,69 +1,2 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
-import { each } from '@ketvietlab/ketjs-view';
-export const HOOKS = [
-    'stack',
-    'inline',
-    'grid',
-    'surface',
-    'surface-head',
-    'surface-title',
-    'surface-actions',
-    'disclosure',
-    'disclosure-summary',
-    'disclosure-body',
-    'section',
-    'section-head',
-    'section-eyebrow',
-    'section-title',
-    'section-description',
-    'section-actions',
-    'section-body',
-    'content-card',
-    'card-head',
-    'card-title',
-    'card-summary',
-    'card-body',
-    'card-meta',
-    'card-actions',
-    'metric',
-    'metric-icon',
-    'metric-label',
-    'metric-value',
-    'metric-detail',
-];
-export { AppShell, Page, PageHeader, RecordCanvas, RecordSection } from './shell.js';
-const Items = (props) => (_jsx(_Fragment, { children: each(props.items, (_, index) => index, (item) => (typeof item === 'string' || typeof item === 'number' ? _jsx("span", { children: item }) : _jsx(_Fragment, { children: item }))) }));
-export const Stack = (props) => (_jsx("div", { "data-ui": "stack", "data-gap": props.gap ?? 'default', children: _jsx(Items, { items: props.items }) }));
-export const Inline = (props) => (_jsx("div", { "data-ui": "inline", children: _jsx(Items, { items: props.items }) }));
-export const Grid = (props) => (_jsx("div", { "data-ui": "grid", "data-columns": String(props.columns ?? 3), children: _jsx(Items, { items: props.items }) }));
-export const Surface = (props) => (_jsxs("div", { "data-ui": "surface", "data-tone": props.tone ?? 'default', "data-padding": props.padding ?? 'default', "data-has-heading": props.title ? 'true' : null, children: [props.title && (_jsxs("header", { "data-ui": "surface-head", children: [_jsx("h2", { "data-ui": "surface-title", children: props.title }), props.actions !== undefined && _jsx("div", { "data-ui": "surface-actions", children: props.actions })] })), props.body] }));
-/** Native, keyboard-accessible progressive disclosure for dense secondary detail. */
-export const Disclosure = (props) => (_jsxs("details", { "data-ui": "disclosure", open: props.open === true ? true : undefined, children: [_jsx("summary", { "data-ui": "disclosure-summary", children: props.summary }), _jsx("div", { "data-ui": "disclosure-body", children: props.body })] }));
-export const Section = (props) => (_jsxs("section", { "data-ui": "section", children: [_jsxs("header", { "data-ui": "section-head", children: [_jsxs("div", { children: [!!props.eyebrow && _jsx("p", { "data-ui": "section-eyebrow", children: props.eyebrow }), _jsx("h2", { "data-ui": "section-title", children: props.title }), !!props.description && _jsx("p", { "data-ui": "section-description", children: props.description })] }), props.actions !== undefined && _jsx("div", { "data-ui": "section-actions", children: props.actions })] }), _jsx("div", { "data-ui": "section-body", children: props.body })] }));
-export const ContentCard = (props) => (_jsxs("article", { "data-ui": "content-card", "data-interactive": String(!!props.href), "data-selected": String(props.selected === true), children: [_jsxs("header", { "data-ui": "card-head", children: [_jsx("h3", { "data-ui": "card-title", children: props.href ? _jsx("a", { href: props.href, children: props.title }) : props.title }), !!props.summary && _jsx("p", { "data-ui": "card-summary", children: props.summary })] }), props.body !== undefined && _jsx("div", { "data-ui": "card-body", children: props.body }), props.meta !== undefined && _jsx("div", { "data-ui": "card-meta", children: props.meta }), props.actions !== undefined && _jsx("div", { "data-ui": "card-actions", children: props.actions })] }));
-/**
- * One number, with the context that makes it mean something.
- *
- * `tone` colours a dot beside the label and nothing else. The number itself stays
- * in the page's ink: a KPI row is read by comparing figures, and four differently
- * coloured figures are compared by colour instead. The dot is drawn only when a
- * tone is passed, so a metric that has no state to report does not grow a grey
- * bullet that means nothing.
- *
- * `href` makes the whole card the link rather than the label, because the card is
- * what the pointer is already over. There is nothing else inside a metric to
- * click, which is exactly why `ContentCard` does the opposite.
- */
-export const Metric = (props) => {
-    const attributes = {
-        'data-ui': 'metric',
-        'data-tone': props.tone ?? 'neutral',
-        // One marker to a card, never two. The dot reports state for a metric that
-        // has no glyph; where there is a glyph, the glyph is already the thing the
-        // eye lands on, and a coloured bullet beside the label competes with it.
-        'data-dot': String(props.tone !== undefined && props.icon === undefined),
-    };
-    const body = (_jsxs(_Fragment, { children: [props.icon !== undefined && (_jsx("span", { "data-ui": "metric-icon", "aria-hidden": "true", children: props.icon })), _jsx("p", { "data-ui": "metric-label", children: props.label }), _jsx("p", { "data-ui": "metric-value", children: String(props.value) }), !!props.detail && _jsx("p", { "data-ui": "metric-detail", children: props.detail })] }));
-    return props.href ? (_jsx("a", { ...attributes, "data-interactive": "true", href: props.href, children: body })) : (_jsx("article", { ...attributes, "data-interactive": "false", children: body }));
-};
+export * from './layout/index.js';
 //# sourceMappingURL=index.js.map

package/dist/layouts/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../packages/design-system/src/layouts/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../packages/design-system/src/layouts/index.tsx"],"names":[],"mappings":"AAAA,cAAc,mBAAoB,CAAA"}

package/dist/layouts/layout/index.d.ts

@@ -0,0 +1,70 @@
+import type { JSXChild, TemplateResult } from '@ketvietlab/ketjs-view';
+import type { Tone } from '../../primitives/status.tsx';
+export declare const HOOKS: readonly ['stack', 'inline', 'grid', 'surface', 'surface-head', 'surface-title', 'surface-actions', 'disclosure', 'disclosure-summary', 'disclosure-body', 'section', 'section-head', 'section-eyebrow', 'section-title', 'section-description', 'section-actions', 'section-body', 'content-card', 'card-head', 'card-title', 'card-summary', 'card-body', 'card-meta', 'card-actions', 'metric', 'metric-icon', 'metric-label', 'metric-value', 'metric-detail'];
+export { AppShell, Page, PageHeader, RecordCanvas, RecordSection } from '../shell.tsx';
+export declare const Stack: (props: {
+    items: readonly JSXChild[];
+    gap?: 'compact' | 'default' | 'loose';
+}) => TemplateResult;
+export declare const Inline: (props: {
+    items: readonly JSXChild[];
+}) => TemplateResult;
+export declare const Grid: (props: {
+    items: readonly JSXChild[];
+    columns?: 2 | 3 | 4;
+}) => TemplateResult;
+export declare const Surface: (props: {
+    body: JSXChild;
+    title?: string;
+    actions?: JSXChild;
+    tone?: 'default' | 'subtle' | 'raised';
+    padding?: 'none' | 'compact' | 'default';
+}) => TemplateResult;
+/** Native, keyboard-accessible progressive disclosure for dense secondary detail. */
+export declare const Disclosure: (props: {
+    summary: string;
+    body: JSXChild;
+    open?: boolean;
+}) => TemplateResult;
+export declare const Section: (props: {
+    title: string;
+    body: JSXChild;
+    description?: string | null;
+    eyebrow?: string | null;
+    actions?: JSXChild;
+}) => TemplateResult;
+export declare const ContentCard: (props: {
+    title: string;
+    summary?: string | null;
+    body?: JSXChild;
+    meta?: JSXChild;
+    actions?: JSXChild;
+    href?: string | null;
+    selected?: boolean;
+}) => TemplateResult;
+/**
+ * One number, with the context that makes it mean something.
+ *
+ * `tone` colours a dot beside the label and nothing else. The number itself stays
+ * in the page's ink: a KPI row is read by comparing figures, and four differently
+ * coloured figures are compared by colour instead. The dot is drawn only when a
+ * tone is passed, so a metric that has no state to report does not grow a grey
+ * bullet that means nothing.
+ *
+ * `href` makes the whole card the link rather than the label, because the card is
+ * what the pointer is already over. There is nothing else inside a metric to
+ * click, which is exactly why `ContentCard` does the opposite.
+ */
+export declare const Metric: (props: {
+    label: string;
+    value: string | number;
+    detail?: string | null;
+    tone?: Tone;
+    /**
+     * A glyph naming the quantity, in a tile beside it. Decorative: the label is
+     * the name of the number, so this is hidden from assistive technology.
+     */
+    icon?: JSXChild;
+    href?: string | null;
+}) => TemplateResult;
+//# sourceMappingURL=index.d.ts.map

package/dist/layouts/layout/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/layouts/layout/index.tsx"],"names":[],"mappings":"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"}

package/dist/layouts/layout/index.js

@@ -0,0 +1,71 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
+import { each } from '@ketvietlab/ketjs-view';
+export const HOOKS = [
+    'stack',
+    'inline',
+    'grid',
+    'surface',
+    'surface-head',
+    'surface-title',
+    'surface-actions',
+    'disclosure',
+    'disclosure-summary',
+    'disclosure-body',
+    'section',
+    'section-head',
+    'section-eyebrow',
+    'section-title',
+    'section-description',
+    'section-actions',
+    'section-body',
+    'content-card',
+    'card-head',
+    'card-title',
+    'card-summary',
+    'card-body',
+    'card-meta',
+    'card-actions',
+    'metric',
+    'metric-icon',
+    'metric-label',
+    'metric-value',
+    'metric-detail',
+];
+export { AppShell, Page, PageHeader, RecordCanvas, RecordSection } from '../shell.js';
+const Items = (props) => (_jsx(_Fragment, { children: each(props.items, (_, index) => index, 
+    // biome-ignore lint/complexity/noUselessFragments: `each` requires a TemplateResult callback.
+    (item) => (typeof item === 'string' || typeof item === 'number' ? _jsx("span", { children: item }) : _jsx(_Fragment, { children: item }))) }));
+export const Stack = (props) => (_jsx("div", { "data-ui": "stack", "data-gap": props.gap ?? 'default', children: _jsx(Items, { items: props.items }) }));
+export const Inline = (props) => (_jsx("div", { "data-ui": "inline", children: _jsx(Items, { items: props.items }) }));
+export const Grid = (props) => (_jsx("div", { "data-ui": "grid", "data-columns": String(props.columns ?? 3), children: _jsx(Items, { items: props.items }) }));
+export const Surface = (props) => (_jsxs("div", { "data-ui": "surface", "data-tone": props.tone ?? 'default', "data-padding": props.padding ?? 'default', "data-has-heading": props.title ? 'true' : null, children: [props.title && (_jsxs("header", { "data-ui": "surface-head", children: [_jsx("h2", { "data-ui": "surface-title", children: props.title }), props.actions !== undefined && _jsx("div", { "data-ui": "surface-actions", children: props.actions })] })), props.body] }));
+/** Native, keyboard-accessible progressive disclosure for dense secondary detail. */
+export const Disclosure = (props) => (_jsxs("details", { "data-ui": "disclosure", open: props.open === true ? true : undefined, children: [_jsx("summary", { "data-ui": "disclosure-summary", children: props.summary }), _jsx("div", { "data-ui": "disclosure-body", children: props.body })] }));
+export const Section = (props) => (_jsxs("section", { "data-ui": "section", children: [_jsxs("header", { "data-ui": "section-head", children: [_jsxs("div", { children: [!!props.eyebrow && _jsx("p", { "data-ui": "section-eyebrow", children: props.eyebrow }), _jsx("h2", { "data-ui": "section-title", children: props.title }), !!props.description && _jsx("p", { "data-ui": "section-description", children: props.description })] }), props.actions !== undefined && _jsx("div", { "data-ui": "section-actions", children: props.actions })] }), _jsx("div", { "data-ui": "section-body", children: props.body })] }));
+export const ContentCard = (props) => (_jsxs("article", { "data-ui": "content-card", "data-interactive": String(!!props.href), "data-selected": String(props.selected === true), children: [_jsxs("header", { "data-ui": "card-head", children: [_jsx("h3", { "data-ui": "card-title", children: props.href ? _jsx("a", { href: props.href, children: props.title }) : props.title }), !!props.summary && _jsx("p", { "data-ui": "card-summary", children: props.summary })] }), props.body !== undefined && _jsx("div", { "data-ui": "card-body", children: props.body }), props.meta !== undefined && _jsx("div", { "data-ui": "card-meta", children: props.meta }), props.actions !== undefined && _jsx("div", { "data-ui": "card-actions", children: props.actions })] }));
+/**
+ * One number, with the context that makes it mean something.
+ *
+ * `tone` colours a dot beside the label and nothing else. The number itself stays
+ * in the page's ink: a KPI row is read by comparing figures, and four differently
+ * coloured figures are compared by colour instead. The dot is drawn only when a
+ * tone is passed, so a metric that has no state to report does not grow a grey
+ * bullet that means nothing.
+ *
+ * `href` makes the whole card the link rather than the label, because the card is
+ * what the pointer is already over. There is nothing else inside a metric to
+ * click, which is exactly why `ContentCard` does the opposite.
+ */
+export const Metric = (props) => {
+    const attributes = {
+        'data-ui': 'metric',
+        'data-tone': props.tone ?? 'neutral',
+        // One marker to a card, never two. The dot reports state for a metric that
+        // has no glyph; where there is a glyph, the glyph is already the thing the
+        // eye lands on, and a coloured bullet beside the label competes with it.
+        'data-dot': String(props.tone !== undefined && props.icon === undefined),
+    };
+    const body = (_jsxs(_Fragment, { children: [props.icon !== undefined && (_jsx("span", { "data-ui": "metric-icon", "aria-hidden": "true", children: props.icon })), _jsx("p", { "data-ui": "metric-label", children: props.label }), _jsx("p", { "data-ui": "metric-value", children: String(props.value) }), !!props.detail && _jsx("p", { "data-ui": "metric-detail", children: props.detail })] }));
+    return props.href ? (_jsx("a", { ...attributes, "data-interactive": "true", href: props.href, children: body })) : (_jsx("article", { ...attributes, "data-interactive": "false", children: body }));
+};
+//# sourceMappingURL=index.js.map

package/dist/layouts/layout/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/design-system/src/layouts/layout/index.tsx"],"names":[],"mappings":"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"}