@telia/teddy 0.0.10 → 0.0.12

package/dist/utils/layout/gap.d.ts

@@ -0,0 +1,340 @@
+import { Responsive } from './util';
+
+declare const gapValues: readonly [{
+    readonly key: "0";
+    readonly value: "var(--teddy-spacing-0)";
+}, {
+    readonly key: "10";
+    readonly value: "var(--teddy-spacing-10)";
+}, {
+    readonly key: "25";
+    readonly value: "var(--teddy-spacing-25)";
+}, {
+    readonly key: "50";
+    readonly value: "var(--teddy-spacing-50)";
+}, {
+    readonly key: "100";
+    readonly value: "var(--teddy-spacing-100)";
+}, {
+    readonly key: "150";
+    /**
+     * The gap between items in horizontal and vertical directions. It can be a number, 'none' or a responsive value.
+     * A responsive value is an object with the keys 'sm', 'md', 'lg', 'xl' and a value for the corresponding breakpoint.
+     * @example gap={{ sm: '100', md: '200' }}
+     * @default '100'
+     */
+    readonly value: "var(--teddy-spacing-150)";
+}, {
+    readonly key: "200";
+    readonly value: "var(--teddy-spacing-200)";
+}, {
+    readonly key: "250";
+    readonly value: "var(--teddy-spacing-250)";
+}, {
+    readonly key: "300";
+    readonly value: "var(--teddy-spacing-300)";
+}, {
+    readonly key: "400";
+    readonly value: "var(--teddy-spacing-400)";
+}, {
+    readonly key: "600";
+    readonly value: "var(--teddy-spacing-600)";
+}, {
+    readonly key: "800";
+    readonly value: "var(--teddy-spacing-800)";
+}, {
+    readonly key: "1000";
+    readonly value: "var(--teddy-spacing-1000)";
+}, {
+    readonly key: "1200";
+    readonly value: "var(--teddy-spacing-1200)";
+}, {
+    readonly key: "1600";
+    readonly value: "var(--teddy-spacing-1600)";
+}, {
+    readonly key: "gutter-sm";
+    readonly value: "var(--teddy-spacing-gutter-sm)";
+}, {
+    readonly key: "gutter-md";
+    readonly value: "var(--teddy-spacing-gutter-md)";
+}, {
+    readonly key: "gutter-lg";
+    readonly value: "var(--teddy-spacing-gutter-lg)";
+}, {
+    readonly key: "gutter-xl";
+    readonly value: "var(--teddy-spacing-gutter-xl)";
+}, {
+    readonly key: "page-padding-sm";
+    readonly value: "var(--teddy-spacing-page-padding-sm)";
+}, {
+    readonly key: "page-padding-md";
+    readonly value: "var(--teddy-spacing-page-padding-md)";
+}, {
+    readonly key: "page-padding-lg";
+    readonly value: "var(--teddy-spacing-page-padding-lg)";
+}, {
+    readonly key: "page-padding-xl";
+    readonly value: "var(--teddy-spacing-page-padding-xl)";
+}];
+export declare const gap: readonly [{
+    readonly key: "gap";
+    readonly className: "teddy-gap";
+    readonly values: readonly [{
+        readonly key: "0";
+        readonly value: "var(--teddy-spacing-0)";
+    }, {
+        readonly key: "10";
+        readonly value: "var(--teddy-spacing-10)";
+    }, {
+        readonly key: "25";
+        readonly value: "var(--teddy-spacing-25)";
+    }, {
+        readonly key: "50";
+        readonly value: "var(--teddy-spacing-50)";
+    }, {
+        readonly key: "100";
+        readonly value: "var(--teddy-spacing-100)";
+    }, {
+        readonly key: "150";
+        /**
+         * The gap between items in horizontal and vertical directions. It can be a number, 'none' or a responsive value.
+         * A responsive value is an object with the keys 'sm', 'md', 'lg', 'xl' and a value for the corresponding breakpoint.
+         * @example gap={{ sm: '100', md: '200' }}
+         * @default '100'
+         */
+        readonly value: "var(--teddy-spacing-150)";
+    }, {
+        readonly key: "200";
+        readonly value: "var(--teddy-spacing-200)";
+    }, {
+        readonly key: "250";
+        readonly value: "var(--teddy-spacing-250)";
+    }, {
+        readonly key: "300";
+        readonly value: "var(--teddy-spacing-300)";
+    }, {
+        readonly key: "400";
+        readonly value: "var(--teddy-spacing-400)";
+    }, {
+        readonly key: "600";
+        readonly value: "var(--teddy-spacing-600)";
+    }, {
+        readonly key: "800";
+        readonly value: "var(--teddy-spacing-800)";
+    }, {
+        readonly key: "1000";
+        readonly value: "var(--teddy-spacing-1000)";
+    }, {
+        readonly key: "1200";
+        readonly value: "var(--teddy-spacing-1200)";
+    }, {
+        readonly key: "1600";
+        readonly value: "var(--teddy-spacing-1600)";
+    }, {
+        readonly key: "gutter-sm";
+        readonly value: "var(--teddy-spacing-gutter-sm)";
+    }, {
+        readonly key: "gutter-md";
+        readonly value: "var(--teddy-spacing-gutter-md)";
+    }, {
+        readonly key: "gutter-lg";
+        readonly value: "var(--teddy-spacing-gutter-lg)";
+    }, {
+        readonly key: "gutter-xl";
+        readonly value: "var(--teddy-spacing-gutter-xl)";
+    }, {
+        readonly key: "page-padding-sm";
+        readonly value: "var(--teddy-spacing-page-padding-sm)";
+    }, {
+        readonly key: "page-padding-md";
+        readonly value: "var(--teddy-spacing-page-padding-md)";
+    }, {
+        readonly key: "page-padding-lg";
+        readonly value: "var(--teddy-spacing-page-padding-lg)";
+    }, {
+        readonly key: "page-padding-xl";
+        readonly value: "var(--teddy-spacing-page-padding-xl)";
+    }];
+}, {
+    readonly key: "gapX";
+    readonly className: "teddy-cg";
+    readonly values: readonly [{
+        readonly key: "0";
+        readonly value: "var(--teddy-spacing-0)";
+    }, {
+        readonly key: "10";
+        readonly value: "var(--teddy-spacing-10)";
+    }, {
+        readonly key: "25";
+        readonly value: "var(--teddy-spacing-25)";
+    }, {
+        readonly key: "50";
+        readonly value: "var(--teddy-spacing-50)";
+    }, {
+        readonly key: "100";
+        readonly value: "var(--teddy-spacing-100)";
+    }, {
+        readonly key: "150";
+        /**
+         * The gap between items in horizontal and vertical directions. It can be a number, 'none' or a responsive value.
+         * A responsive value is an object with the keys 'sm', 'md', 'lg', 'xl' and a value for the corresponding breakpoint.
+         * @example gap={{ sm: '100', md: '200' }}
+         * @default '100'
+         */
+        readonly value: "var(--teddy-spacing-150)";
+    }, {
+        readonly key: "200";
+        readonly value: "var(--teddy-spacing-200)";
+    }, {
+        readonly key: "250";
+        readonly value: "var(--teddy-spacing-250)";
+    }, {
+        readonly key: "300";
+        readonly value: "var(--teddy-spacing-300)";
+    }, {
+        readonly key: "400";
+        readonly value: "var(--teddy-spacing-400)";
+    }, {
+        readonly key: "600";
+        readonly value: "var(--teddy-spacing-600)";
+    }, {
+        readonly key: "800";
+        readonly value: "var(--teddy-spacing-800)";
+    }, {
+        readonly key: "1000";
+        readonly value: "var(--teddy-spacing-1000)";
+    }, {
+        readonly key: "1200";
+        readonly value: "var(--teddy-spacing-1200)";
+    }, {
+        readonly key: "1600";
+        readonly value: "var(--teddy-spacing-1600)";
+    }, {
+        readonly key: "gutter-sm";
+        readonly value: "var(--teddy-spacing-gutter-sm)";
+    }, {
+        readonly key: "gutter-md";
+        readonly value: "var(--teddy-spacing-gutter-md)";
+    }, {
+        readonly key: "gutter-lg";
+        readonly value: "var(--teddy-spacing-gutter-lg)";
+    }, {
+        readonly key: "gutter-xl";
+        readonly value: "var(--teddy-spacing-gutter-xl)";
+    }, {
+        readonly key: "page-padding-sm";
+        readonly value: "var(--teddy-spacing-page-padding-sm)";
+    }, {
+        readonly key: "page-padding-md";
+        readonly value: "var(--teddy-spacing-page-padding-md)";
+    }, {
+        readonly key: "page-padding-lg";
+        readonly value: "var(--teddy-spacing-page-padding-lg)";
+    }, {
+        readonly key: "page-padding-xl";
+        readonly value: "var(--teddy-spacing-page-padding-xl)";
+    }];
+}, {
+    readonly key: "gapY";
+    readonly className: "teddy-rg";
+    readonly values: readonly [{
+        readonly key: "0";
+        readonly value: "var(--teddy-spacing-0)";
+    }, {
+        readonly key: "10";
+        readonly value: "var(--teddy-spacing-10)";
+    }, {
+        readonly key: "25";
+        readonly value: "var(--teddy-spacing-25)";
+    }, {
+        readonly key: "50";
+        readonly value: "var(--teddy-spacing-50)";
+    }, {
+        readonly key: "100";
+        readonly value: "var(--teddy-spacing-100)";
+    }, {
+        readonly key: "150";
+        /**
+         * The gap between items in horizontal and vertical directions. It can be a number, 'none' or a responsive value.
+         * A responsive value is an object with the keys 'sm', 'md', 'lg', 'xl' and a value for the corresponding breakpoint.
+         * @example gap={{ sm: '100', md: '200' }}
+         * @default '100'
+         */
+        readonly value: "var(--teddy-spacing-150)";
+    }, {
+        readonly key: "200";
+        readonly value: "var(--teddy-spacing-200)";
+    }, {
+        readonly key: "250";
+        readonly value: "var(--teddy-spacing-250)";
+    }, {
+        readonly key: "300";
+        readonly value: "var(--teddy-spacing-300)";
+    }, {
+        readonly key: "400";
+        readonly value: "var(--teddy-spacing-400)";
+    }, {
+        readonly key: "600";
+        readonly value: "var(--teddy-spacing-600)";
+    }, {
+        readonly key: "800";
+        readonly value: "var(--teddy-spacing-800)";
+    }, {
+        readonly key: "1000";
+        readonly value: "var(--teddy-spacing-1000)";
+    }, {
+        readonly key: "1200";
+        readonly value: "var(--teddy-spacing-1200)";
+    }, {
+        readonly key: "1600";
+        readonly value: "var(--teddy-spacing-1600)";
+    }, {
+        readonly key: "gutter-sm";
+        readonly value: "var(--teddy-spacing-gutter-sm)";
+    }, {
+        readonly key: "gutter-md";
+        readonly value: "var(--teddy-spacing-gutter-md)";
+    }, {
+        readonly key: "gutter-lg";
+        readonly value: "var(--teddy-spacing-gutter-lg)";
+    }, {
+        readonly key: "gutter-xl";
+        readonly value: "var(--teddy-spacing-gutter-xl)";
+    }, {
+        readonly key: "page-padding-sm";
+        readonly value: "var(--teddy-spacing-page-padding-sm)";
+    }, {
+        readonly key: "page-padding-md";
+        readonly value: "var(--teddy-spacing-page-padding-md)";
+    }, {
+        readonly key: "page-padding-lg";
+        readonly value: "var(--teddy-spacing-page-padding-lg)";
+    }, {
+        readonly key: "page-padding-xl";
+        readonly value: "var(--teddy-spacing-page-padding-xl)";
+    }];
+}];
+export type GapProps = {
+    /**
+     * The gap between items in horizontal and vertical directions. It can be a number, 'none' or a responsive value.
+     * A responsive value is an object with the keys 'sm', 'md', 'lg', 'xl' and a value for the corresponding breakpoint.
+     * @example gap={{ sm: '100', md: '200' }}
+     * @default '100'
+     */
+    gap?: Responsive<(typeof gapValues)[number]['key']>;
+    /**
+     * The gap between grid items in horizontal direction. It can be a number, 'none' or a responsive value.
+     * A responsive value is an object with the keys 'sm', 'md', 'lg', 'xl' and a value for the corresponding breakpoint.
+     * @example gap={{ sm: '100', md: '200' }}
+     * @default '100'
+     */
+    gapX?: Responsive<(typeof gapValues)[number]['key']>;
+    /**
+     * The gap between grid items in vertical direction. It can be a number, 'none' or a responsive value.
+     * A responsive value is an object with the keys 'sm', 'md', 'lg', 'xl' and a value for the corresponding breakpoint.
+     * @example gap={{ sm: '100', md: '200' }}
+     * @default '100'
+     */
+    gapY?: Responsive<(typeof gapValues)[number]['key']>;
+};
+export {};

package/dist/utils/layout/gap.js

@@ -0,0 +1,21 @@
+import { spacingValues as e } from "./util.js";
+const a = e, g = [
+  {
+    key: "gap",
+    className: "teddy-gap",
+    values: a
+  },
+  {
+    key: "gapX",
+    className: "teddy-cg",
+    values: a
+  },
+  {
+    key: "gapY",
+    className: "teddy-rg",
+    values: a
+  }
+];
+export {
+  g as gap
+};

package/dist/utils/layout/grid.d.ts

@@ -0,0 +1,313 @@
+import { Responsive, numberIterator } from './util';
+
+export declare const gridTemplateRowsValues: readonly [...{
+    key: "10" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
+    value: "10" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
+}[], {
+    readonly key: "none";
+    readonly value: "none";
+}];
+export declare const gridTemplateColumnsValues: readonly [...{
+    readonly key: "10" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
+    readonly value: "repeat(10, minmax(0, 1fr))" | "repeat(1, minmax(0, 1fr))" | "repeat(2, minmax(0, 1fr))" | "repeat(3, minmax(0, 1fr))" | "repeat(4, minmax(0, 1fr))" | "repeat(5, minmax(0, 1fr))" | "repeat(6, minmax(0, 1fr))" | "repeat(7, minmax(0, 1fr))" | "repeat(8, minmax(0, 1fr))" | "repeat(9, minmax(0, 1fr))" | "repeat(11, minmax(0, 1fr))" | "repeat(12, minmax(0, 1fr))";
+}[], {
+    readonly key: "none";
+    readonly value: "none";
+}];
+declare const gridColumnValues: readonly [...{
+    key: "10" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
+    value: "10" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
+}[], {
+    readonly key: "span-2";
+    readonly value: "span 2";
+}, {
+    readonly key: "span-3";
+    readonly value: "span 3";
+}, {
+    readonly key: "span-4";
+    readonly value: "span 4";
+}, {
+    readonly key: "span-5";
+    readonly value: "span 5";
+}, {
+    readonly key: "span-6";
+    readonly value: "span 6";
+}, {
+    readonly key: "span-7";
+    readonly value: "span 7";
+}, {
+    readonly key: "span-8";
+    readonly value: "span 8";
+}, {
+    readonly key: "span-9";
+    readonly value: "span 9";
+}, {
+    readonly key: "span-10";
+    readonly value: "span 10";
+}, {
+    readonly key: "span-11";
+    readonly value: "span 11";
+}, {
+    readonly key: "span-12";
+    readonly value: "span 12";
+}];
+declare const gridRowValues: readonly [...{
+    key: "10" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
+    value: "10" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
+}[], {
+    readonly key: "span-2";
+    readonly value: "span 2";
+}, {
+    readonly key: "span-3";
+    readonly value: "span 3";
+}, {
+    readonly key: "span-4";
+    readonly value: "span 4";
+}, {
+    readonly key: "span-5";
+    readonly value: "span 5";
+}, {
+    readonly key: "span-6";
+    readonly value: "span 6";
+}, {
+    readonly key: "span-7";
+    readonly value: "span 7";
+}, {
+    readonly key: "span-8";
+    readonly value: "span 8";
+}, {
+    readonly key: "span-9";
+    readonly value: "span 9";
+}, {
+    readonly key: "span-10";
+    readonly value: "span 10";
+}, {
+    readonly key: "span-11";
+    readonly value: "span 11";
+}, {
+    readonly key: "span-12";
+    readonly value: "span 12";
+}];
+export declare const displayGridValues: readonly [{
+    readonly key: "none";
+    readonly value: "none";
+}, {
+    readonly key: "grid";
+    readonly value: "grid";
+}, {
+    readonly key: "inline-grid";
+    readonly value: "inline-grid";
+}];
+declare const gridFlowValues: readonly [{
+    readonly key: "row";
+    readonly value: "row";
+}, {
+    readonly key: "column";
+    readonly value: "column";
+}, {
+    readonly key: "dense";
+    readonly value: "dense";
+}, {
+    readonly key: "row-dense";
+    readonly value: "row-dense";
+}, {
+    readonly key: "column-dense";
+    readonly value: "column-dense";
+}];
+export declare const gridLayout: readonly [{
+    readonly key: "display";
+    readonly className: "teddy-display";
+    readonly values: readonly [{
+        readonly key: "none";
+        readonly value: "none";
+    }, {
+        readonly key: "grid";
+        readonly value: "grid";
+    }, {
+        readonly key: "inline-grid";
+        readonly value: "inline-grid";
+    }];
+}, {
+    readonly key: "rows";
+    readonly className: "teddy-gtr";
+    readonly values: readonly [...{
+        key: "10" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
+        value: "10" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
+    }[], {
+        readonly key: "none";
+        readonly value: "none";
+    }];
+}, {
+    readonly key: "columns";
+    readonly className: "teddy-gtc";
+    readonly values: readonly [...{
+        readonly key: "10" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
+        readonly value: "repeat(10, minmax(0, 1fr))" | "repeat(1, minmax(0, 1fr))" | "repeat(2, minmax(0, 1fr))" | "repeat(3, minmax(0, 1fr))" | "repeat(4, minmax(0, 1fr))" | "repeat(5, minmax(0, 1fr))" | "repeat(6, minmax(0, 1fr))" | "repeat(7, minmax(0, 1fr))" | "repeat(8, minmax(0, 1fr))" | "repeat(9, minmax(0, 1fr))" | "repeat(11, minmax(0, 1fr))" | "repeat(12, minmax(0, 1fr))";
+    }[], {
+        readonly key: "none";
+        readonly value: "none";
+    }];
+}, {
+    readonly key: "flow";
+    readonly className: "teddy-gaf";
+    readonly values: readonly [{
+        readonly key: "row";
+        readonly value: "row";
+    }, {
+        readonly key: "column";
+        readonly value: "column";
+    }, {
+        readonly key: "dense";
+        readonly value: "dense";
+    }, {
+        readonly key: "row-dense";
+        readonly value: "row-dense";
+    }, {
+        readonly key: "column-dense";
+        readonly value: "column-dense";
+    }];
+}];
+export declare const gridChildren: readonly [{
+    readonly key: "gridColumnStart";
+    readonly className: "teddy-gcs";
+    readonly values: {
+        key: "10" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
+        value: "10" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
+    }[];
+}, {
+    readonly key: "gridColumnEnd";
+    readonly className: "teddy-gce";
+    readonly values: {
+        key: "10" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
+        value: "10" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
+    }[];
+}, {
+    readonly key: "gridRowStart";
+    readonly className: "teddy-grs";
+    readonly values: {
+        key: "10" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
+        value: "10" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
+    }[];
+}, {
+    readonly key: "gridRowEnd";
+    readonly className: "teddy-gre";
+    readonly values: {
+        key: "10" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
+        value: "10" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
+    }[];
+}, {
+    readonly key: "gridColumn";
+    readonly className: "teddy-gc";
+    readonly values: readonly [...{
+        key: "10" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
+        value: "10" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
+    }[], {
+        readonly key: "span-2";
+        readonly value: "span 2";
+    }, {
+        readonly key: "span-3";
+        readonly value: "span 3";
+    }, {
+        readonly key: "span-4";
+        readonly value: "span 4";
+    }, {
+        readonly key: "span-5";
+        readonly value: "span 5";
+    }, {
+        readonly key: "span-6";
+        readonly value: "span 6";
+    }, {
+        readonly key: "span-7";
+        readonly value: "span 7";
+    }, {
+        readonly key: "span-8";
+        readonly value: "span 8";
+    }, {
+        readonly key: "span-9";
+        readonly value: "span 9";
+    }, {
+        readonly key: "span-10";
+        readonly value: "span 10";
+    }, {
+        readonly key: "span-11";
+        readonly value: "span 11";
+    }, {
+        readonly key: "span-12";
+        readonly value: "span 12";
+    }];
+}, {
+    readonly key: "gridRow";
+    readonly className: "teddy-gr";
+    readonly values: readonly [...{
+        key: "10" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
+        value: "10" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
+    }[], {
+        readonly key: "span-2";
+        readonly value: "span 2";
+    }, {
+        readonly key: "span-3";
+        readonly value: "span 3";
+    }, {
+        readonly key: "span-4";
+        readonly value: "span 4";
+    }, {
+        readonly key: "span-5";
+        readonly value: "span 5";
+    }, {
+        readonly key: "span-6";
+        readonly value: "span 6";
+    }, {
+        readonly key: "span-7";
+        readonly value: "span 7";
+    }, {
+        readonly key: "span-8";
+        readonly value: "span 8";
+    }, {
+        readonly key: "span-9";
+        readonly value: "span 9";
+    }, {
+        readonly key: "span-10";
+        readonly value: "span 10";
+    }, {
+        readonly key: "span-11";
+        readonly value: "span 11";
+    }, {
+        readonly key: "span-12";
+        readonly value: "span 12";
+    }];
+}];
+export type GridLayout = {
+    /**
+     * The display of the grid. It can be 'none', 'inline-grid', 'grid' or a responsive value.
+     * @default 'grid'
+     */
+    display?: Responsive<(typeof displayGridValues)[number]['key']>;
+    /**
+     * The number of rows in the grid. It can be a number, 'none' or a responsive value.
+     * A responsive value is an object with the keys 'sm', 'md', 'lg', 'xl' and a value for the corresponding breakpoint.
+     * @example rows={{ sm: '3', md: '5' }}
+     */
+    rows?: Responsive<(typeof gridTemplateRowsValues)[number]['key']>;
+    /**
+     * The number of columns in the grid. It can be a number, 'none' or a responsive value.
+     * A responsive value is an object with the keys 'sm', 'md', 'lg', 'xl' and a value for the corresponding breakpoint.
+     * @example columns={{ sm: '3', md: '5' }}
+     */
+    columns?: Responsive<(typeof gridTemplateColumnsValues)[number]['key']>;
+    flow?: Responsive<(typeof gridFlowValues)[number]['key']>;
+};
+export type GridChildren = {
+    /**
+     * The grid-column CSS shorthand property specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area.
+     */
+    gridColumn?: Responsive<(typeof gridColumnValues)[number]['key']>;
+    gridColumnStart?: Responsive<(typeof numberIterator)[number]['key']>;
+    gridColumnEnd?: Responsive<(typeof numberIterator)[number]['key']>;
+    /**
+     * The grid-row CSS shorthand property specifies a grid item's size and location within a grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area.
+     */
+    gridRow?: Responsive<(typeof gridRowValues)[number]['key']>;
+    gridRowStart?: Responsive<(typeof numberIterator)[number]['key']>;
+    gridRowEnd?: Responsive<(typeof numberIterator)[number]['key']>;
+};
+export {};