ui-lab-registry 0.3.44 → 0.3.46

package/dist/components/Gallery/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Gallery/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Gallery/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/Grid/examples/02-track-placement.d.ts

@@ -0,0 +1,11 @@
+import type { ControlDef } from '@/types';
+export declare const metadata: {
+    title: string;
+    description: string;
+};
+export declare const controls: ControlDef[];
+export declare const previewLayout: "start";
+export declare const resizable = true;
+export declare function renderPreview(props: Record<string, unknown>): import("react/jsx-runtime").JSX.Element;
+export default function Example(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=02-track-placement.d.ts.map

package/dist/components/Grid/examples/02-track-placement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"02-track-placement.d.ts","sourceRoot":"","sources":["../../../../src/components/Grid/examples/02-track-placement.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAUzC,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,UAAU,EA4EhC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAG,OAAgB,CAAC;AAC9C,eAAO,MAAM,SAAS,OAAO,CAAC;AAqF9B,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,2CAqB3D;AAED,MAAM,CAAC,OAAO,UAAU,OAAO,4CAE9B"}

package/dist/components/Grid/examples/02-track-placement.js

@@ -0,0 +1,181 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Grid, Frame } from 'ui-lab-components';
+const BASE_CELL_STYLE = {
+    '--frame-fill': 'var(--background-900)',
+    '--frame-stroke-color': 'var(--background-600)',
+};
+export const metadata = {
+    title: 'Track Placement',
+    description: 'Adjust columns, gap, alignment, and auto-placement flow to explore the CSS Grid track model.',
+};
+export const controls = [
+    {
+        name: 'columns',
+        label: 'Columns',
+        type: 'select',
+        options: [
+            { label: '1 Column', value: '1' },
+            { label: '2 Columns', value: '2' },
+            { label: '3 Columns', value: '3' },
+            { label: '4 Columns', value: '4' },
+            { label: '5 Columns', value: '5' },
+            { label: '6 Columns', value: '6' },
+            { label: 'Auto Fit', value: 'auto-fit' },
+            { label: 'Auto Fill', value: 'auto-fill' },
+        ],
+        defaultValue: '3',
+    },
+    {
+        name: 'gap',
+        label: 'Gap Token',
+        type: 'select',
+        options: [
+            { label: 'Extra Small', value: 'xs' },
+            { label: 'Small', value: 'sm' },
+            { label: 'Medium', value: 'md' },
+            { label: 'Large', value: 'lg' },
+            { label: 'Extra Large', value: 'xl' },
+        ],
+        defaultValue: 'md',
+    },
+    {
+        name: 'justifyItems',
+        label: 'Inline Alignment',
+        type: 'select',
+        options: [
+            { label: 'Stretch', value: 'stretch' },
+            { label: 'Start', value: 'start' },
+            { label: 'Center', value: 'center' },
+            { label: 'End', value: 'end' },
+        ],
+        defaultValue: 'stretch',
+    },
+    {
+        name: 'alignItems',
+        label: 'Block Alignment',
+        type: 'select',
+        options: [
+            { label: 'Stretch', value: 'stretch' },
+            { label: 'Start', value: 'start' },
+            { label: 'Center', value: 'center' },
+            { label: 'End', value: 'end' },
+            { label: 'Baseline', value: 'baseline' },
+        ],
+        defaultValue: 'stretch',
+    },
+    {
+        name: 'autoFlow',
+        label: 'Auto Placement',
+        type: 'select',
+        options: [
+            { label: 'Row', value: 'row' },
+            { label: 'Column', value: 'column' },
+            { label: 'Row Dense', value: 'row-dense' },
+            { label: 'Column Dense', value: 'column-dense' },
+        ],
+        defaultValue: 'row',
+    },
+    {
+        name: 'frameCount',
+        label: 'Panels',
+        type: 'stepper',
+        defaultValue: 6,
+        min: 4,
+        max: 12,
+        step: 1,
+    },
+];
+export const previewLayout = 'start';
+export const resizable = true;
+function getColumns(value) {
+    if (value === '1' || value === '2' || value === '4' || value === '5' || value === '6' || value === 'auto-fit' || value === 'auto-fill')
+        return value;
+    return '3';
+}
+function toColumns(value) {
+    if (value === 'auto-fit' || value === 'auto-fill')
+        return value;
+    return Number(value);
+}
+function getApproxColumnCount(value) {
+    if (value === 'auto-fit' || value === 'auto-fill')
+        return 4;
+    return Number(value);
+}
+function getGap(value) {
+    if (value === 'xs' || value === 'sm' || value === 'lg' || value === 'xl')
+        return value;
+    return 'md';
+}
+function getJustifyItems(value) {
+    if (value === 'start' || value === 'center' || value === 'end')
+        return value;
+    return 'stretch';
+}
+function getAlignItems(value) {
+    if (value === 'start' || value === 'center' || value === 'end' || value === 'baseline')
+        return value;
+    return 'stretch';
+}
+function getAutoFlow(value) {
+    if (value === 'column' || value === 'row-dense' || value === 'column-dense')
+        return value;
+    return 'row';
+}
+function getFrameCount(value, min, max, fallback) {
+    const n = typeof value === 'number' ? value : Number(value);
+    if (Number.isNaN(n))
+        return fallback;
+    return Math.min(max, Math.max(min, Math.round(n)));
+}
+function span(trackCount, desired) {
+    return `span ${Math.max(1, Math.min(desired, trackCount))}`;
+}
+function getSpecs(trackCount, frameCount) {
+    if (trackCount <= 2) {
+        const pattern = [{ minHeight: '5rem' }, { minHeight: '3rem' }, { minHeight: '4.5rem' }];
+        return [
+            { minHeight: '3rem' },
+            { minHeight: '8rem' },
+            ...Array.from({ length: Math.max(frameCount - 2, 0) }, (_, i) => ({ minHeight: pattern[i % pattern.length].minHeight })),
+        ].map(s => ({ style: { width: '100%', ...s } }));
+    }
+    if (trackCount === 3) {
+        const pattern = [
+            { width: '100%', minHeight: '6rem', gridColumn: 'span 2' },
+            { width: '100%', minHeight: '3rem' },
+            { width: '100%', minHeight: '4.5rem' },
+        ];
+        return [
+            { style: { width: '100%', minHeight: '9rem', gridColumn: 'span 1', gridRow: 'span 2' } },
+            { style: { width: '100%', minHeight: '5rem', gridColumn: 'span 2' } },
+            { style: { width: '100%', minHeight: '3rem' } },
+            { style: { width: '100%', minHeight: '3rem' } },
+            ...Array.from({ length: Math.max(frameCount - 4, 0) }, (_, i) => ({ style: pattern[i % pattern.length] })),
+        ];
+    }
+    const pattern = [
+        { width: '100%', minHeight: '6.5rem', gridColumn: span(trackCount, 2) },
+        { width: '100%', minHeight: '3rem' },
+        { width: '100%', minHeight: '4rem' },
+        { width: '100%', minHeight: '5rem', gridColumn: span(trackCount, 2) },
+    ];
+    return [
+        { style: { width: '100%', minHeight: '10rem', gridRow: 'span 2' } },
+        { style: { width: '100%', minHeight: '6rem', gridColumn: span(trackCount - 1, trackCount - 1) } },
+        { style: { width: '100%', minHeight: '3rem' } },
+        { style: { width: '100%', minHeight: '3rem' } },
+        ...Array.from({ length: Math.max(frameCount - 4, 0) }, (_, i) => ({ style: pattern[i % pattern.length] })),
+    ];
+}
+export function renderPreview(props) {
+    const columns = getColumns(props.columns);
+    const frameCount = getFrameCount(props.frameCount, 4, 12, 6);
+    const specs = getSpecs(getApproxColumnCount(columns), frameCount);
+    return (_jsx(Grid, { columns: toColumns(columns), gap: getGap(props.gap), justifyItems: getJustifyItems(props.justifyItems), alignItems: getAlignItems(props.alignItems), autoFlow: getAutoFlow(props.autoFlow), className: "w-full", children: specs.map((spec, index) => (_jsx(Frame, { pathStroke: "dashed", style: { ...BASE_CELL_STYLE, ...spec.style }, className: "w-full h-full", children: _jsx("div", { className: "size-full" }) }, index))) }));
+}
+export default function Example() {
+    return renderPreview({ columns: '3', gap: 'md', justifyItems: 'stretch', alignItems: 'stretch', autoFlow: 'row', frameCount: 6 });
+}
+//# sourceMappingURL=02-track-placement.js.map

package/dist/components/Grid/examples/02-track-placement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"02-track-placement.js","sourceRoot":"","sources":["../../../../src/components/Grid/examples/02-track-placement.tsx"],"names":[],"mappings":"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"}

package/dist/components/Grid/examples/03-editorial-spans.d.ts

@@ -0,0 +1,11 @@
+import type { ControlDef } from '@/types';
+export declare const metadata: {
+    title: string;
+    description: string;
+};
+export declare const controls: ControlDef[];
+export declare const previewLayout: "start";
+export declare const resizable = true;
+export declare function renderPreview(props: Record<string, unknown>): import("react/jsx-runtime").JSX.Element;
+export default function Example(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=03-editorial-spans.d.ts.map

package/dist/components/Grid/examples/03-editorial-spans.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"03-editorial-spans.d.ts","sourceRoot":"","sources":["../../../../src/components/Grid/examples/03-editorial-spans.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAUzC,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,UAAU,EA4EhC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAG,OAAgB,CAAC;AAC9C,eAAO,MAAM,SAAS,OAAO,CAAC;AAuE9B,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,2CAqB3D;AAED,MAAM,CAAC,OAAO,UAAU,OAAO,4CAE9B"}

package/dist/components/Grid/examples/03-editorial-spans.js

@@ -0,0 +1,167 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Grid, Frame } from 'ui-lab-components';
+const BASE_CELL_STYLE = {
+    '--frame-fill': 'var(--background-900)',
+    '--frame-stroke-color': 'var(--background-600)',
+};
+export const metadata = {
+    title: 'Editorial Spans',
+    description: 'Dense auto-flow grid with mixed column spans for editorial content layouts.',
+};
+export const controls = [
+    {
+        name: 'columns',
+        label: 'Columns',
+        type: 'select',
+        options: [
+            { label: '1 Column', value: '1' },
+            { label: '2 Columns', value: '2' },
+            { label: '3 Columns', value: '3' },
+            { label: '4 Columns', value: '4' },
+            { label: '5 Columns', value: '5' },
+            { label: '6 Columns', value: '6' },
+            { label: 'Auto Fit', value: 'auto-fit' },
+            { label: 'Auto Fill', value: 'auto-fill' },
+        ],
+        defaultValue: '4',
+    },
+    {
+        name: 'gap',
+        label: 'Gap Token',
+        type: 'select',
+        options: [
+            { label: 'Extra Small', value: 'xs' },
+            { label: 'Small', value: 'sm' },
+            { label: 'Medium', value: 'md' },
+            { label: 'Large', value: 'lg' },
+            { label: 'Extra Large', value: 'xl' },
+        ],
+        defaultValue: 'md',
+    },
+    {
+        name: 'justifyItems',
+        label: 'Inline Alignment',
+        type: 'select',
+        options: [
+            { label: 'Stretch', value: 'stretch' },
+            { label: 'Start', value: 'start' },
+            { label: 'Center', value: 'center' },
+            { label: 'End', value: 'end' },
+        ],
+        defaultValue: 'stretch',
+    },
+    {
+        name: 'alignItems',
+        label: 'Block Alignment',
+        type: 'select',
+        options: [
+            { label: 'Stretch', value: 'stretch' },
+            { label: 'Start', value: 'start' },
+            { label: 'Center', value: 'center' },
+            { label: 'End', value: 'end' },
+            { label: 'Baseline', value: 'baseline' },
+        ],
+        defaultValue: 'stretch',
+    },
+    {
+        name: 'autoFlow',
+        label: 'Auto Placement',
+        type: 'select',
+        options: [
+            { label: 'Row', value: 'row' },
+            { label: 'Column', value: 'column' },
+            { label: 'Row Dense', value: 'row-dense' },
+            { label: 'Column Dense', value: 'column-dense' },
+        ],
+        defaultValue: 'row-dense',
+    },
+    {
+        name: 'frameCount',
+        label: 'Panels',
+        type: 'stepper',
+        defaultValue: 7,
+        min: 5,
+        max: 12,
+        step: 1,
+    },
+];
+export const previewLayout = 'start';
+export const resizable = true;
+function getColumns(value) {
+    if (value === '1' || value === '2' || value === '4' || value === '5' || value === '6' || value === 'auto-fit' || value === 'auto-fill')
+        return value;
+    return '3';
+}
+function toColumns(value) {
+    if (value === 'auto-fit' || value === 'auto-fill')
+        return value;
+    return Number(value);
+}
+function getApproxColumnCount(value) {
+    if (value === 'auto-fit' || value === 'auto-fill')
+        return 4;
+    return Number(value);
+}
+function getGap(value) {
+    if (value === 'xs' || value === 'sm' || value === 'lg' || value === 'xl')
+        return value;
+    return 'md';
+}
+function getJustifyItems(value) {
+    if (value === 'start' || value === 'center' || value === 'end')
+        return value;
+    return 'stretch';
+}
+function getAlignItems(value) {
+    if (value === 'start' || value === 'center' || value === 'end' || value === 'baseline')
+        return value;
+    return 'stretch';
+}
+function getAutoFlow(value) {
+    if (value === 'column' || value === 'row-dense' || value === 'column-dense')
+        return value;
+    return 'row';
+}
+function getFrameCount(value, min, max, fallback) {
+    const n = typeof value === 'number' ? value : Number(value);
+    if (Number.isNaN(n))
+        return fallback;
+    return Math.min(max, Math.max(min, Math.round(n)));
+}
+function span(trackCount, desired) {
+    return `span ${Math.max(1, Math.min(desired, trackCount))}`;
+}
+function getSpecs(trackCount, frameCount) {
+    if (trackCount <= 2) {
+        const pattern = [{ minHeight: '4rem' }, { minHeight: '5.5rem' }, { minHeight: '3rem' }];
+        return [
+            { style: { width: '100%', minHeight: '8rem' } },
+            ...Array.from({ length: Math.max(frameCount - 1, 0) }, (_, i) => ({ style: { width: '100%', ...pattern[i % pattern.length] } })),
+        ];
+    }
+    const pattern = [
+        { width: '100%', minHeight: '3rem' },
+        { width: '100%', minHeight: '6.5rem', gridColumn: span(trackCount, 2) },
+        { width: '100%', minHeight: '4rem' },
+        { width: '100%', minHeight: '3rem' },
+    ];
+    return [
+        { style: { width: '100%', minHeight: '8rem', gridColumn: span(trackCount, Math.max(trackCount - 1, 2)) } },
+        { style: { width: '100%', minHeight: '8rem' } },
+        { style: { width: '100%', minHeight: '3rem' } },
+        { style: { width: '100%', minHeight: '5rem', gridColumn: span(trackCount, 2) } },
+        { style: { width: '100%', minHeight: '5rem' } },
+        ...Array.from({ length: Math.max(frameCount - 5, 0) }, (_, i) => ({ style: pattern[i % pattern.length] })),
+    ];
+}
+export function renderPreview(props) {
+    const columns = getColumns(props.columns);
+    const frameCount = getFrameCount(props.frameCount, 5, 12, 7);
+    const specs = getSpecs(getApproxColumnCount(columns), frameCount);
+    return (_jsx(Grid, { columns: toColumns(columns), gap: getGap(props.gap), justifyItems: getJustifyItems(props.justifyItems), alignItems: getAlignItems(props.alignItems), autoFlow: getAutoFlow(props.autoFlow), className: "w-full", children: specs.map((spec, index) => (_jsx(Frame, { pathStroke: "dashed", style: { ...BASE_CELL_STYLE, ...spec.style }, className: "w-full h-full", children: _jsx("div", { className: "size-full" }) }, index))) }));
+}
+export default function Example() {
+    return renderPreview({ columns: '4', gap: 'md', justifyItems: 'stretch', alignItems: 'stretch', autoFlow: 'row-dense', frameCount: 7 });
+}
+//# sourceMappingURL=03-editorial-spans.js.map

package/dist/components/Grid/examples/03-editorial-spans.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"03-editorial-spans.js","sourceRoot":"","sources":["../../../../src/components/Grid/examples/03-editorial-spans.tsx"],"names":[],"mappings":"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"}

package/dist/components/Grid/examples/04-responsive-card-rail.d.ts

@@ -0,0 +1,11 @@
+import type { ControlDef } from '@/types';
+export declare const metadata: {
+    title: string;
+    description: string;
+};
+export declare const controls: ControlDef[];
+export declare const previewLayout: "start";
+export declare const resizable = true;
+export declare function renderPreview(props: Record<string, unknown>): import("react/jsx-runtime").JSX.Element;
+export default function Example(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=04-responsive-card-rail.d.ts.map

package/dist/components/Grid/examples/04-responsive-card-rail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"04-responsive-card-rail.d.ts","sourceRoot":"","sources":["../../../../src/components/Grid/examples/04-responsive-card-rail.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAUzC,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,UAAU,EAiEhC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAG,OAAgB,CAAC;AAC9C,eAAO,MAAM,SAAS,OAAO,CAAC;AAqC9B,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,2CAwB3D;AAED,MAAM,CAAC,OAAO,UAAU,OAAO,4CAE9B"}

package/dist/components/Grid/examples/04-responsive-card-rail.js

@@ -0,0 +1,126 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Grid, Frame } from 'ui-lab-components';
+const BASE_CELL_STYLE = {
+    '--frame-fill': 'var(--background-900)',
+    '--frame-stroke-color': 'var(--background-600)',
+};
+export const metadata = {
+    title: 'Responsive Card Rail',
+    description: 'Grid that adapts column count and gap based on container width using responsive prop objects.',
+};
+export const controls = [
+    {
+        name: 'columns',
+        label: 'Columns',
+        type: 'select',
+        options: [
+            { label: '2 Columns', value: '2' },
+            { label: '3 Columns', value: '3' },
+            { label: '4 Columns', value: '4' },
+            { label: 'Auto Fit', value: 'auto-fit' },
+            { label: 'Auto Fill', value: 'auto-fill' },
+        ],
+        defaultValue: '4',
+    },
+    {
+        name: 'gap',
+        label: 'Base Gap Token',
+        type: 'select',
+        options: [
+            { label: 'Small', value: 'sm' },
+            { label: 'Medium', value: 'md' },
+            { label: 'Large', value: 'lg' },
+            { label: 'Extra Large', value: 'xl' },
+        ],
+        defaultValue: 'md',
+    },
+    {
+        name: 'rowGap',
+        label: 'Row Gap',
+        type: 'select',
+        options: [
+            { label: 'Match Gap', value: 'inherit' },
+            { label: 'Small', value: 'sm' },
+            { label: 'Medium', value: 'md' },
+            { label: 'Large', value: 'lg' },
+        ],
+        defaultValue: 'inherit',
+    },
+    {
+        name: 'columnGap',
+        label: 'Column Gap',
+        type: 'select',
+        options: [
+            { label: 'Match Gap', value: 'inherit' },
+            { label: 'Small', value: 'sm' },
+            { label: 'Medium', value: 'md' },
+            { label: 'Large', value: 'lg' },
+        ],
+        defaultValue: 'inherit',
+    },
+    {
+        name: 'frameCount',
+        label: 'Cards',
+        type: 'stepper',
+        defaultValue: 6,
+        min: 4,
+        max: 10,
+        step: 1,
+    },
+    {
+        name: 'responsive',
+        label: 'Enable Responsive Object',
+        type: 'toggle',
+        defaultValue: true,
+    },
+];
+export const previewLayout = 'start';
+export const resizable = true;
+function getColumns(value) {
+    if (value === '2' || value === '3' || value === 'auto-fit' || value === 'auto-fill')
+        return value;
+    return '4';
+}
+function toColumns(value) {
+    if (value === 'auto-fit' || value === 'auto-fill')
+        return value;
+    return Number(value);
+}
+function getGap(value) {
+    if (value === 'xs' || value === 'sm' || value === 'lg' || value === 'xl')
+        return value;
+    return 'md';
+}
+function getOptionalGap(value) {
+    if (value === 'inherit' || value == null)
+        return undefined;
+    return getGap(value);
+}
+function getFrameCount(value, min, max, fallback) {
+    const n = typeof value === 'number' ? value : Number(value);
+    if (Number.isNaN(n))
+        return fallback;
+    return Math.min(max, Math.max(min, Math.round(n)));
+}
+const SPEC_PATTERN = [
+    { minHeight: '9rem' },
+    { minHeight: '4rem' },
+    { minHeight: '3rem' },
+    { minHeight: '5rem' },
+    { minHeight: '3.5rem' },
+    { minHeight: '6rem' },
+];
+export function renderPreview(props) {
+    const columns = getColumns(props.columns);
+    const baseColumns = toColumns(columns);
+    const gap = getGap(props.gap);
+    const responsive = Boolean(props.responsive);
+    const frameCount = getFrameCount(props.frameCount, 4, 10, 6);
+    const specs = Array.from({ length: frameCount }, (_, i) => SPEC_PATTERN[i % SPEC_PATTERN.length]);
+    return (_jsx(Grid, { columns: responsive ? { sm: 1, md: 2, lg: baseColumns } : baseColumns, gap: responsive ? { sm: 'sm', md: gap, lg: gap } : gap, rowGap: getOptionalGap(props.rowGap), columnGap: getOptionalGap(props.columnGap), responsive: responsive, className: "w-full", children: specs.map((spec, index) => (_jsx(Frame, { pathStroke: "dashed", style: { ...BASE_CELL_STYLE, width: '100%', minHeight: spec.minHeight }, className: "w-full h-full", children: _jsx("div", { className: "size-full" }) }, index))) }));
+}
+export default function Example() {
+    return renderPreview({ columns: '4', gap: 'md', rowGap: 'inherit', columnGap: 'inherit', frameCount: 6, responsive: true });
+}
+//# sourceMappingURL=04-responsive-card-rail.js.map

package/dist/components/Grid/examples/04-responsive-card-rail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"04-responsive-card-rail.js","sourceRoot":"","sources":["../../../../src/components/Grid/examples/04-responsive-card-rail.tsx"],"names":[],"mappings":"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"}

package/dist/components/Grid/examples/index.d.ts

@@ -1,3 +1,7 @@
-export { default as Example1 } from './01-basic-grid.js';
-export { metadata as metadata1 } from './01-basic-grid.js';
+export { default as Example2 } from './02-track-placement.js';
+export { metadata as metadata2 } from './02-track-placement.js';
+export { default as Example3 } from './03-editorial-spans.js';
+export { metadata as metadata3 } from './03-editorial-spans.js';
+export { default as Example4 } from './04-responsive-card-rail.js';
+export { metadata as metadata4 } from './04-responsive-card-rail.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Grid/examples/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Grid/examples/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Grid/examples/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,8BAA8B,CAAC"}

package/dist/components/Grid/examples/index.js

@@ -1,3 +1,7 @@
-export { default as Example1 } from './01-basic-grid.js';
-export { metadata as metadata1 } from './01-basic-grid.js';
+export { default as Example2 } from './02-track-placement.js';
+export { metadata as metadata2 } from './02-track-placement.js';
+export { default as Example3 } from './03-editorial-spans.js';
+export { metadata as metadata3 } from './03-editorial-spans.js';
+export { default as Example4 } from './04-responsive-card-rail.js';
+export { metadata as metadata4 } from './04-responsive-card-rail.js';
 //# sourceMappingURL=index.js.map

package/dist/components/Grid/examples/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Grid/examples/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Grid/examples/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,8BAA8B,CAAC"}