@ctrliq/quantic-components 1.85.1 → 1.86.0

package/dist/shared/meta.types.d.ts

@@ -20,7 +20,7 @@ export interface ComponentMeta {
     category: 'action' | 'form' | 'display' | 'layout' | 'feedback' | 'navigation' | 'data';
     ascii?: string;
     deprecated?: {
-        use: string;
+        use?: string;
         reason?: string;
     };
     props?: Record<string, PropMeta>;

package/dist/tabs/index.stories.js

@@ -38,19 +38,19 @@ const base = story({
     <quantic-tab-button index="2">Security</quantic-tab-button>
 
     <quantic-tab-panel index="0">
-      <quantic-text size="lg">Jane Doe</quantic-text>
-      <quantic-text>Email: jane.doe@example.com</quantic-text>
-      <quantic-text>Member since Jan 2021</quantic-text>
+      <p class="story-lead">Jane Doe</p>
+      <p class="story-copy">Email: jane.doe@example.com</p>
+      <p class="story-copy">Member since Jan 2021</p>
     </quantic-tab-panel>
 
     <quantic-tab-panel index="1">
-      <quantic-text size="md">Email Notifications: Enabled</quantic-text>
-      <quantic-text size="md">SMS Alerts: Disabled</quantic-text>
+      <p class="story-copy">Email Notifications: Enabled</p>
+      <p class="story-copy">SMS Alerts: Disabled</p>
       <quantic-button>Edit</quantic-button>
     </quantic-tab-panel>
 
     <quantic-tab-panel index="2">
-      <quantic-text size="md">Change Password</quantic-text>
+      <p class="story-copy">Change Password</p>
       <quantic-password-input placeholder="New password"></quantic-password-input>
       <quantic-button>Save</quantic-button>
     </quantic-tab-panel>
@@ -80,14 +80,14 @@ export const CustomGap = story({
     <quantic-tab-button index="2">Security</quantic-tab-button>
 
     <quantic-tab-panel index="0">
-      <quantic-text size="lg">Jane Doe</quantic-text>
-      <quantic-text>Email: jane.doe@example.com</quantic-text>
+      <p class="story-lead">Jane Doe</p>
+      <p class="story-copy">Email: jane.doe@example.com</p>
     </quantic-tab-panel>
     <quantic-tab-panel index="1">
-      <quantic-text size="md">Email Notifications: Enabled</quantic-text>
+      <p class="story-copy">Email Notifications: Enabled</p>
     </quantic-tab-panel>
     <quantic-tab-panel index="2">
-      <quantic-text size="md">Change Password</quantic-text>
+      <p class="story-copy">Change Password</p>
     </quantic-tab-panel>
   </quantic-tabs>
 `);
@@ -142,14 +142,14 @@ export const CustomIndicator = story({
     <quantic-tab-button index="2">Security</quantic-tab-button>
 
     <quantic-tab-panel index="0">
-      <quantic-text size="lg">Jane Doe</quantic-text>
-      <quantic-text>Email: jane.doe@example.com</quantic-text>
+      <p class="story-lead">Jane Doe</p>
+      <p class="story-copy">Email: jane.doe@example.com</p>
     </quantic-tab-panel>
     <quantic-tab-panel index="1">
-      <quantic-text size="md">Email Notifications: Enabled</quantic-text>
+      <p class="story-copy">Email Notifications: Enabled</p>
     </quantic-tab-panel>
     <quantic-tab-panel index="2">
-      <quantic-text size="md">Change Password</quantic-text>
+      <p class="story-copy">Change Password</p>
     </quantic-tab-panel>
   </quantic-tabs>
 `);
@@ -182,23 +182,23 @@ export const WithDisabled = story({
     <quantic-tab-button index="3" disabled>Billing</quantic-tab-button>
 
     <quantic-tab-panel index="0">
-      <quantic-text size="lg">Jane Doe</quantic-text>
-      <quantic-text>Email: jane.doe@example.com</quantic-text>
-      <quantic-text>Member since Jan 2021</quantic-text>
+      <p class="story-lead">Jane Doe</p>
+      <p class="story-copy">Email: jane.doe@example.com</p>
+      <p class="story-copy">Member since Jan 2021</p>
     </quantic-tab-panel>
 
     <quantic-tab-panel index="1">
-      <quantic-text>Notifications are unavailable for this account.</quantic-text>
+      <p class="story-copy">Notifications are unavailable for this account.</p>
     </quantic-tab-panel>
 
     <quantic-tab-panel index="2">
-      <quantic-text size="md">Change Password</quantic-text>
+      <p class="story-copy">Change Password</p>
       <quantic-password-input placeholder="New password"></quantic-password-input>
       <quantic-button>Save</quantic-button>
     </quantic-tab-panel>
 
     <quantic-tab-panel index="3">
-      <quantic-text>Billing is unavailable for this account.</quantic-text>
+      <p class="story-copy">Billing is unavailable for this account.</p>
     </quantic-tab-panel>
   </quantic-tabs>
 `);
@@ -255,14 +255,14 @@ export const WithIcons = story({
     </quantic-tab-button>
 
     <quantic-tab-panel index="0">
-      <quantic-text size="lg">Jane Doe</quantic-text>
-      <quantic-text>Email: jane.doe@example.com</quantic-text>
+      <p class="story-lead">Jane Doe</p>
+      <p class="story-copy">Email: jane.doe@example.com</p>
     </quantic-tab-panel>
     <quantic-tab-panel index="1">
-      <quantic-text size="md">Email Notifications: Enabled</quantic-text>
+      <p class="story-copy">Email Notifications: Enabled</p>
     </quantic-tab-panel>
     <quantic-tab-panel index="2">
-      <quantic-text size="md">Change Password</quantic-text>
+      <p class="story-copy">Change Password</p>
     </quantic-tab-panel>
   </quantic-tabs>
 `);
@@ -293,20 +293,20 @@ export const NestedTabs = story({
     <quantic-tab-button index="1">Outer B</quantic-tab-button>
 
     <quantic-tab-panel index="0">
-      <quantic-text size="xs">Switching inner tabs here must leave the outer selection on Outer A.</quantic-text>
+      <p class="story-note">Switching inner tabs here must leave the outer selection on Outer A.</p>
       <quantic-tabs selected-index="0" size=${size} orientation=${orientation}>
         <quantic-tab-button index="0">Inner 1</quantic-tab-button>
         <quantic-tab-button index="1">Inner 2</quantic-tab-button>
         <quantic-tab-button index="2">Inner 3</quantic-tab-button>
 
-        <quantic-tab-panel index="0"><quantic-text>Inner panel 1</quantic-text></quantic-tab-panel>
-        <quantic-tab-panel index="1"><quantic-text>Inner panel 2</quantic-text></quantic-tab-panel>
-        <quantic-tab-panel index="2"><quantic-text>Inner panel 3</quantic-text></quantic-tab-panel>
+        <quantic-tab-panel index="0"><p class="story-copy">Inner panel 1</p></quantic-tab-panel>
+        <quantic-tab-panel index="1"><p class="story-copy">Inner panel 2</p></quantic-tab-panel>
+        <quantic-tab-panel index="2"><p class="story-copy">Inner panel 3</p></quantic-tab-panel>
       </quantic-tabs>
     </quantic-tab-panel>
 
     <quantic-tab-panel index="1">
-      <quantic-text>Outer panel B.</quantic-text>
+      <p class="story-copy">Outer panel B.</p>
     </quantic-tab-panel>
   </quantic-tabs>
 `);
@@ -351,13 +351,13 @@ export const IndependentlyScrollable = story({
       <quantic-tab-button index="2">Security</quantic-tab-button>
 
       <quantic-tab-panel index="0">
-        ${Array.from({ length: 12 }, (_, i) => html `<quantic-text>Profile row ${i + 1}</quantic-text>`)}
+        ${Array.from({ length: 12 }, (_, i) => html `<p class="story-copy">Profile row ${i + 1}</p>`)}
       </quantic-tab-panel>
       <quantic-tab-panel index="1">
-        <quantic-text>Email Notifications: Enabled</quantic-text>
+        <p class="story-copy">Email Notifications: Enabled</p>
       </quantic-tab-panel>
       <quantic-tab-panel index="2">
-        <quantic-text>Change Password</quantic-text>
+        <p class="story-copy">Change Password</p>
       </quantic-tab-panel>
     </quantic-tabs>
   </div>
@@ -402,13 +402,13 @@ export const CollapseBelow = story({
       <quantic-tab-button index="2">Security</quantic-tab-button>
 
       <quantic-tab-panel index="0">
-        <quantic-text>Stacked when the tabs container is 640px wide or less.</quantic-text>
+        <p class="story-copy">Stacked when the tabs container is 640px wide or less.</p>
       </quantic-tab-panel>
       <quantic-tab-panel index="1">
-        <quantic-text>Email Notifications: Enabled</quantic-text>
+        <p class="story-copy">Email Notifications: Enabled</p>
       </quantic-tab-panel>
       <quantic-tab-panel index="2">
-        <quantic-text>Change Password</quantic-text>
+        <p class="story-copy">Change Password</p>
       </quantic-tab-panel>
     </quantic-tabs>
   </div>

package/dist/text/index.constants.d.ts

@@ -1,8 +1,11 @@
+/** @deprecated `Text` is deprecated. Set `font-family` from a `--quantic-font-family-*` token in your own stylesheet. */
 export declare const TextVariant: {
     readonly Body: "body";
     readonly Display: "display";
 };
+/** @deprecated `Text` is deprecated. Set `font-family` from a `--quantic-font-family-*` token in your own stylesheet. */
 export type TextVariant = (typeof TextVariant)[keyof typeof TextVariant];
+/** @deprecated `Text` is deprecated. Set `font-size` from a `--quantic-font-size-*` token in your own stylesheet. */
 export declare const TextSize: {
     readonly ExtraSmall: "xs";
     readonly Small: "sm";
@@ -11,4 +14,5 @@ export declare const TextSize: {
     readonly ExtraLarge: "xl";
     readonly TwoExtraLarge: "2xl";
 };
+/** @deprecated `Text` is deprecated. Set `font-size` from a `--quantic-font-size-*` token in your own stylesheet. */
 export type TextSize = (typeof TextSize)[keyof typeof TextSize];

package/dist/text/index.constants.js

@@ -1,7 +1,9 @@
+/** @deprecated `Text` is deprecated. Set `font-family` from a `--quantic-font-family-*` token in your own stylesheet. */
 export const TextVariant = {
     Body: 'body',
     Display: 'display',
 };
+/** @deprecated `Text` is deprecated. Set `font-size` from a `--quantic-font-size-*` token in your own stylesheet. */
 export const TextSize = {
     ExtraSmall: 'xs',
     Small: 'sm',

package/dist/text/index.d.ts

@@ -2,6 +2,13 @@ import { QuanticElement } from '../shared/quantic-element';
 import type { ComponentMeta } from '../shared/meta.types';
 import { TextVariant, TextSize } from './index.constants';
 export { TextVariant, TextSize } from './index.constants';
+/**
+ * @deprecated The markup belongs to the consumer. `as` renders the consumer's own element
+ * inside a shadow root, where `prose.scss` and `type.scss` cannot reach it, type selectors
+ * stop matching, and `aria-labelledby` and `label[for]` cannot cross the boundary. Write
+ * the semantic element in your own document and let the typography stylesheet style it.
+ * Removed in the next major. See `rules/component-api-boundary.md`.
+ */
 export declare class Text extends QuanticElement {
     static meta: ComponentMeta;
     as: keyof HTMLElementTagNameMap;

package/dist/text/index.js

@@ -28,6 +28,13 @@ const rules = [
     ...Object.values(TextVariant).map(variantRule),
     ...Object.values(TextSize).flatMap((size) => Object.values(TextVariant).map((variant) => sizeRule(size, variant))),
 ].join('\n');
+/**
+ * @deprecated The markup belongs to the consumer. `as` renders the consumer's own element
+ * inside a shadow root, where `prose.scss` and `type.scss` cannot reach it, type selectors
+ * stop matching, and `aria-labelledby` and `label[for]` cannot cross the boundary. Write
+ * the semantic element in your own document and let the typography stylesheet style it.
+ * Removed in the next major. See `rules/component-api-boundary.md`.
+ */
 let Text = class Text extends QuanticElement {
     constructor() {
         super(...arguments);
@@ -46,13 +53,16 @@ let Text = class Text extends QuanticElement {
 };
 Text.meta = {
     tag: 'quantic-text',
-    description: 'Typography component for rendering text with consistent sizing, weight, and color tokens. ' +
-        'Renders any HTML element via the `as` prop for semantic correctness.',
+    description: 'Deprecated typography wrapper. Write the semantic element in your own document, ' +
+        'where quantic-css type styles and IDREF-based accessibility can reach it.',
     category: 'display',
+    deprecated: {
+        reason: "Renders the consumer's element inside a shadow root, so the typography stylesheet cannot style it and IDREFs cannot cross the boundary.",
+    },
     slots: {
         '': { description: 'Text content to render.' },
     },
-    relatedTo: [],
+    relatedTo: ['quantic-prose'],
 };
 Text.styles = unsafeCSS(rules);
 __decorate([

package/dist/text-input/index.stories.js

@@ -128,7 +128,7 @@ export const WithEventHandlers = story({
     return `
     <div style="display: flex; gap: .5em; flex-direction: column">
       <quantic-text-input ${attrList}></quantic-text-input>
-      <quantic-text size="xs">See actions panel for more details.</quantic-text>
+      <p class="story-note">See actions panel for more details.</p>
     </div>
   `;
 });
@@ -166,11 +166,11 @@ export const FormAssociated = story({
         <quantic-button size="sm" type="reset" variant="outline">Reset</quantic-button>
       </div>
 
-      <quantic-text size="xs">
+      <p class="story-note">
         This story demonstrates form-associated behavior using ElementInternals.
         Try submitting or resetting the form to see the values in the Actions
         panel.
-      </quantic-text>
+      </p>
     </form>
   `);
 FormAssociated.parameters = {

package/dist/textarea/index.stories.js

@@ -84,7 +84,7 @@ export const WithEventHandlers = story({
     return `
     <div style="display: flex; gap: .5em; flex-direction: column">
       <quantic-textarea ${attrList}></quantic-textarea>
-      <quantic-text size="xs">See actions panel for more details.</quantic-text>
+      <p class="story-note">See actions panel for more details.</p>
     </div>
   `;
 });
@@ -117,10 +117,10 @@ export const FormAssociated = story({
         <quantic-button size="sm" type="reset" variant="outline">Reset</quantic-button>
       </div>
 
-      <quantic-text size="xs">
+      <p class="story-note">
         This story demonstrates form-associated behavior using ElementInternals.
         Try submitting or resetting the form to see the values in the Actions panel.
-      </quantic-text>
+      </p>
     </form>
   `);
 FormAssociated.parameters = {

package/dist/toggle/index.stories.js

@@ -62,7 +62,7 @@ export const WithEventHandlers = story({
       ?required=${required}
       ?invalid=${invalid}
     ></quantic-toggle>
-    <quantic-text size="xs">See actions panel for more details.</quantic-text>
+    <p class="story-note">See actions panel for more details.</p>
   </div>
 `);
 export const WithSlotContent = story().render(() => `
@@ -116,11 +116,11 @@ export const FormAssociated = story({
         <quantic-button size="sm" type="reset" variant="outline">Reset</quantic-button>
       </div>
 
-      <quantic-text size="xs">
+      <p class="story-note">
         This story demonstrates form-associated behavior using ElementInternals.
         Try submitting or resetting the form to see the values in the Actions
         panel.
-      </quantic-text>
+      </p>
     </form>
   `);
 FormAssociated.parameters = {

package/dist/types/cluster/cluster.component.d.ts

@@ -1,6 +1,13 @@
 import { ClusterAxis, ClusterGap, ClusterAlign } from './index.constants';
 import { QuanticElement } from '../shared/quantic-element';
 import type { ComponentMeta } from '../shared/meta.types';
+/**
+ * @deprecated Presentation belongs in CSS. Every prop this element carries maps
+ * one-to-one to a CSS property, so it is a `div` with a shadow root around it. For a
+ * uniform run of children use the group that names them: `TagGroup`, `BadgeGroup` or
+ * `ActionGroup`. Anything else is page layout, so write the flex rule in your own
+ * stylesheet. Removed in the next major. See `rules/component-api-boundary.md`.
+ */
 export declare class Cluster extends QuanticElement {
     static meta: ComponentMeta;
     axis: ClusterAxis;

package/dist/types/cluster/index.constants.d.ts

@@ -1,7 +1,9 @@
+/** @deprecated `Cluster` is deprecated. Set `flex-direction` in your own stylesheet. */
 export declare enum ClusterAxis {
     Horizontal = "horizontal",
     Vertical = "vertical"
 }
+/** @deprecated `Cluster` is deprecated. Set `gap` to a `--quantic-spacing-*` token in your own stylesheet. */
 export declare enum ClusterGap {
     None = "none",
     ExtraSmall = "xs",
@@ -10,6 +12,7 @@ export declare enum ClusterGap {
     Large = "lg",
     ExtraLarge = "xl"
 }
+/** @deprecated `Cluster` is deprecated. Set `align-items` in your own stylesheet. */
 export declare enum ClusterAlign {
     Start = "start",
     Center = "center",

package/dist/types/grid/grid.component.d.ts

@@ -1,6 +1,14 @@
 import { GridDensity } from './index.constants';
 import { QuanticElement } from '../shared/quantic-element';
 import type { ComponentMeta } from '../shared/meta.types';
+/**
+ * @deprecated Becoming internal anatomy. Grid sizes its children, so every layout it does
+ * not anticipate is unreachable from outside the shadow boundary. Use `CardGroup`, which
+ * owns its row sizing, or write the grid in your own stylesheet. `OptionCardGroup` is the
+ * equivalent when the children are option cards. The element stays registered because
+ * those two render it; the public export goes in the next major. See
+ * `rules/component-api-boundary.md`.
+ */
 export declare class Grid extends QuanticElement {
     static meta: ComponentMeta;
     density: GridDensity;

package/dist/types/shared/meta.types.d.ts

@@ -20,7 +20,7 @@ export interface ComponentMeta {
     category: 'action' | 'form' | 'display' | 'layout' | 'feedback' | 'navigation' | 'data';
     ascii?: string;
     deprecated?: {
-        use: string;
+        use?: string;
         reason?: string;
     };
     props?: Record<string, PropMeta>;

package/dist/types/text/index.constants.d.ts

@@ -1,8 +1,11 @@
+/** @deprecated `Text` is deprecated. Set `font-family` from a `--quantic-font-family-*` token in your own stylesheet. */
 export declare const TextVariant: {
     readonly Body: "body";
     readonly Display: "display";
 };
+/** @deprecated `Text` is deprecated. Set `font-family` from a `--quantic-font-family-*` token in your own stylesheet. */
 export type TextVariant = (typeof TextVariant)[keyof typeof TextVariant];
+/** @deprecated `Text` is deprecated. Set `font-size` from a `--quantic-font-size-*` token in your own stylesheet. */
 export declare const TextSize: {
     readonly ExtraSmall: "xs";
     readonly Small: "sm";
@@ -11,4 +14,5 @@ export declare const TextSize: {
     readonly ExtraLarge: "xl";
     readonly TwoExtraLarge: "2xl";
 };
+/** @deprecated `Text` is deprecated. Set `font-size` from a `--quantic-font-size-*` token in your own stylesheet. */
 export type TextSize = (typeof TextSize)[keyof typeof TextSize];

package/dist/types/text/index.d.ts

@@ -2,6 +2,13 @@ import { QuanticElement } from '../shared/quantic-element';
 import type { ComponentMeta } from '../shared/meta.types';
 import { TextVariant, TextSize } from './index.constants';
 export { TextVariant, TextSize } from './index.constants';
+/**
+ * @deprecated The markup belongs to the consumer. `as` renders the consumer's own element
+ * inside a shadow root, where `prose.scss` and `type.scss` cannot reach it, type selectors
+ * stop matching, and `aria-labelledby` and `label[for]` cannot cross the boundary. Write
+ * the semantic element in your own document and let the typography stylesheet style it.
+ * Removed in the next major. See `rules/component-api-boundary.md`.
+ */
 export declare class Text extends QuanticElement {
     static meta: ComponentMeta;
     as: keyof HTMLElementTagNameMap;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ctrliq/quantic-components",
-  "version": "1.85.1",
+  "version": "1.86.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/types/index.d.ts",

package/dist/cluster/cluster.stories.d.ts

@@ -1,57 +0,0 @@
-import { ClusterAxis, ClusterGap, ClusterAlign } from './index.constants';
-declare const _default: {
-    title: string;
-    component: string;
-    tags: string[];
-    argTypes: {
-        axis: {
-            control: string;
-            options: ClusterAxis[];
-            table: {
-                defaultValue: {
-                    summary: ClusterAxis;
-                };
-            };
-        };
-        gap: {
-            control: string;
-            options: ClusterGap[];
-            table: {
-                defaultValue: {
-                    summary: ClusterGap;
-                };
-            };
-        };
-        align: {
-            control: string;
-            options: ClusterAlign[];
-            table: {
-                defaultValue: {
-                    summary: ClusterAlign;
-                };
-            };
-        };
-        wrap: {
-            control: string;
-            table: {
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
-    };
-};
-export default _default;
-interface Args {
-    axis: ClusterAxis;
-    gap: ClusterGap;
-    align: ClusterAlign;
-    wrap: boolean;
-}
-export declare const Horizontal: import("../shared/story").StoryObject<Args>;
-export declare const Vertical: import("../shared/story").StoryObject<Args>;
-export declare const ExtraSmall: import("../shared/story").StoryObject<Args>;
-export declare const Small: import("../shared/story").StoryObject<Args>;
-export declare const Large: import("../shared/story").StoryObject<Args>;
-export declare const ExtraLarge: import("../shared/story").StoryObject<Args>;
-export declare const Centered: import("../shared/story").StoryObject<Args>;

package/dist/cluster/cluster.stories.js

@@ -1,67 +0,0 @@
-import { story } from '../shared/story';
-import { ClusterAxis, ClusterGap, ClusterAlign } from './index.constants';
-export default {
-    title: 'Components/Layout/Cluster',
-    component: 'quantic-cluster',
-    tags: ['autodocs'],
-    argTypes: {
-        axis: {
-            control: 'select',
-            options: Object.values(ClusterAxis),
-            table: { defaultValue: { summary: ClusterAxis.Horizontal } },
-        },
-        gap: {
-            control: 'select',
-            options: Object.values(ClusterGap),
-            table: { defaultValue: { summary: ClusterGap.Medium } },
-        },
-        align: {
-            control: 'select',
-            options: Object.values(ClusterAlign),
-            table: { defaultValue: { summary: ClusterAlign.Start } },
-        },
-        wrap: {
-            control: 'boolean',
-            table: { defaultValue: { summary: 'true' } },
-        },
-    },
-};
-const badges = [
-    'Backgrounds',
-    'Email signatures',
-    'LinkedIn header graphic',
-    'Social media posts',
-    'Presentation slides',
-];
-const renderBadges = () => badges.map((label) => `<quantic-badge color="purple" size="xs">${label}</quantic-badge>`).join('\n');
-const base = story({
-    args: {
-        axis: ClusterAxis.Horizontal,
-        gap: ClusterGap.Medium,
-        align: ClusterAlign.Start,
-        wrap: true,
-    },
-}).render(({ axis, gap, align, wrap }) => `
-    <quantic-cluster axis="${axis}" gap="${gap}" align="${align}" ${wrap ? 'wrap' : 'nowrap'}>
-      ${renderBadges()}
-    </quantic-cluster>
-  `);
-export const Horizontal = base;
-export const Vertical = base.override({
-    axis: ClusterAxis.Vertical,
-});
-export const ExtraSmall = base.override({
-    gap: ClusterGap.ExtraSmall,
-});
-export const Small = base.override({
-    gap: ClusterGap.Small,
-});
-export const Large = base.override({
-    gap: ClusterGap.Large,
-});
-export const ExtraLarge = base.override({
-    gap: ClusterGap.ExtraLarge,
-});
-export const Centered = base.override({
-    align: ClusterAlign.Center,
-});

package/dist/grid/grid.stories.d.ts

@@ -1,36 +0,0 @@
-import { GridDensity } from './index.constants';
-declare const _default: {
-    title: string;
-    component: string;
-    tags: string[];
-    argTypes: {
-        density: {
-            control: string;
-            options: GridDensity[];
-            description: string;
-            table: {
-                defaultValue: {
-                    summary: GridDensity;
-                };
-            };
-        };
-        cardCount: {
-            control: {
-                type: string;
-                min: number;
-                max: number;
-            };
-            description: string;
-        };
-    };
-};
-export default _default;
-interface Args {
-    density: GridDensity;
-    cardCount: number;
-}
-export declare const Dense: import("../shared/story").StoryObject<Args>;
-export declare const Compact: import("../shared/story").StoryObject<Args>;
-export declare const Comfortable: import("../shared/story").StoryObject<Args>;
-export declare const Sparse: import("../shared/story").StoryObject<Args>;
-export declare const Custom: import("../shared/story").StoryObject<Args>;