@ryuzaki13/react-foundation-ui 0.1.0

package/dist/grid/stories/Grid.stories.js

@@ -0,0 +1,840 @@
+import { t as e } from "../../chunks/Grid-ByIIytjh.js";
+import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
+import "react";
+//#region src/grid/stories/Grid.stories.tsx
+var i = {
+	container: {
+		border: "2px dashed var(--border-0)",
+		padding: "2em",
+		marginBlock: "1em"
+	},
+	item: {
+		textAlign: "center",
+		fontWeight: "bold",
+		color: "white",
+		minHeight: "5em",
+		minWidth: "10em",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center"
+	},
+	itemColors: [
+		"#ff6b6b",
+		"#4ecdc4",
+		"#45b7d1",
+		"#96ceb4",
+		"#feca57",
+		"#ff9ff3",
+		"#54a0ff",
+		"#5f27cd"
+	]
+}, a = (e) => i.itemColors[e % i.itemColors.length], o = ({ children: t, index: r = 0, style: o }) => /* @__PURE__ */ n(e.Item, {
+	style: {
+		...i.item,
+		backgroundColor: a(r),
+		...o
+	},
+	children: t
+}), s = {
+	title: "Shared/Layout/Grid",
+	component: e.Container,
+	parameters: { layout: "padded" },
+	tags: ["autodocs"]
+}, c = {
+	render: ({ children: t, ...r }) => /* @__PURE__ */ n(e.Container, {
+		...r,
+		templateColumns: "1fr 1fr 1fr",
+		style: i.container,
+		children: t
+	}),
+	args: { children: /* @__PURE__ */ r(t, { children: [
+		/* @__PURE__ */ n(o, {
+			index: 0,
+			children: "1"
+		}),
+		/* @__PURE__ */ n(o, {
+			index: 1,
+			children: "2"
+		}),
+		/* @__PURE__ */ n(o, {
+			index: 2,
+			children: "3"
+		}),
+		/* @__PURE__ */ n(o, {
+			index: 3,
+			children: "4"
+		}),
+		/* @__PURE__ */ n(o, {
+			index: 4,
+			children: "5"
+		}),
+		/* @__PURE__ */ n(o, {
+			index: 5,
+			children: "6"
+		})
+	] }) }
+}, l = {
+	render: () => /* @__PURE__ */ r("div", { children: [
+		/* @__PURE__ */ n("h3", { children: "Row (default)" }),
+		/* @__PURE__ */ r(e.Container, {
+			templateColumns: "repeat(3, 100px)",
+			templateRows: "repeat(2, 60px)",
+			gap: "sm",
+			style: i.container,
+			children: [
+				/* @__PURE__ */ n(o, {
+					index: 0,
+					children: "1"
+				}),
+				/* @__PURE__ */ n(o, {
+					index: 1,
+					children: "2"
+				}),
+				/* @__PURE__ */ n(o, {
+					index: 2,
+					children: "3"
+				}),
+				/* @__PURE__ */ n(o, {
+					index: 3,
+					children: "4"
+				}),
+				/* @__PURE__ */ n(o, {
+					index: 4,
+					children: "5"
+				}),
+				/* @__PURE__ */ n(o, {
+					index: 5,
+					children: "6"
+				})
+			]
+		}),
+		/* @__PURE__ */ n("h3", { children: "Column" }),
+		/* @__PURE__ */ r(e.Container, {
+			templateColumns: "repeat(2, 100px)",
+			templateRows: "repeat(3, 60px)",
+			column: !0,
+			gap: "sm",
+			style: i.container,
+			children: [
+				/* @__PURE__ */ n(o, {
+					index: 0,
+					children: "1"
+				}),
+				/* @__PURE__ */ n(o, {
+					index: 1,
+					children: "2"
+				}),
+				/* @__PURE__ */ n(o, {
+					index: 2,
+					children: "3"
+				}),
+				/* @__PURE__ */ n(o, {
+					index: 3,
+					children: "4"
+				}),
+				/* @__PURE__ */ n(o, {
+					index: 4,
+					children: "5"
+				}),
+				/* @__PURE__ */ n(o, {
+					index: 5,
+					children: "6"
+				})
+			]
+		}),
+		/* @__PURE__ */ n("h3", { children: "Dense" }),
+		/* @__PURE__ */ r(e.Container, {
+			templateColumns: "repeat(4, 80px)",
+			templateRows: "repeat(3, 60px)",
+			dense: !0,
+			gap: "sm",
+			style: i.container,
+			children: [
+				/* @__PURE__ */ n(o, {
+					index: 0,
+					style: { gridColumn: "span 2" },
+					children: "Span 2"
+				}),
+				/* @__PURE__ */ n(o, {
+					index: 1,
+					children: "2"
+				}),
+				/* @__PURE__ */ n(o, {
+					index: 2,
+					style: { gridRow: "span 2" },
+					children: "Span 2"
+				}),
+				/* @__PURE__ */ n(o, {
+					index: 3,
+					children: "4"
+				}),
+				/* @__PURE__ */ n(o, {
+					index: 4,
+					children: "5"
+				}),
+				/* @__PURE__ */ n(o, {
+					index: 5,
+					children: "6"
+				}),
+				/* @__PURE__ */ n(o, {
+					index: 6,
+					children: "7"
+				})
+			]
+		})
+	] }),
+	args: { children: void 0 }
+}, u = {
+	render: () => /* @__PURE__ */ r("div", { children: [
+		/* @__PURE__ */ n("h3", {
+			style: { marginBlock: "1em" },
+			children: "Align Items"
+		}),
+		[
+			"start",
+			"center",
+			"end",
+			"stretch"
+		].map((t) => /* @__PURE__ */ r("div", { children: [/* @__PURE__ */ n("h4", { children: t }), /* @__PURE__ */ r(e.Container, {
+			templateColumns: "repeat(3, 1fr)",
+			align: t,
+			gap: "sm",
+			style: i.container,
+			children: [
+				/* @__PURE__ */ n(o, {
+					index: 0,
+					style: { height: t === "stretch" ? "auto" : "5em" },
+					children: "Short"
+				}),
+				/* @__PURE__ */ n(o, {
+					index: 1,
+					style: { height: t === "stretch" ? "auto" : "10em" },
+					children: "Tall"
+				}),
+				/* @__PURE__ */ n(o, {
+					index: 2,
+					style: { height: t === "stretch" ? "auto" : "8em" },
+					children: "Medium"
+				})
+			]
+		})] }, t)),
+		/* @__PURE__ */ n("h3", {
+			style: { marginBlock: "1em" },
+			children: "Justify Items"
+		}),
+		[
+			"start",
+			"center",
+			"end",
+			"stretch"
+		].map((t) => /* @__PURE__ */ r("div", { children: [/* @__PURE__ */ n("h4", { children: t }), /* @__PURE__ */ r(e.Container, {
+			templateColumns: "repeat(3, 20em)",
+			justify: t,
+			gap: "sm",
+			style: i.container,
+			children: [
+				/* @__PURE__ */ n(o, {
+					index: 0,
+					style: { width: t === "stretch" ? "auto" : "10em" },
+					children: "Item"
+				}),
+				/* @__PURE__ */ n(o, {
+					index: 1,
+					style: { width: t === "stretch" ? "auto" : "10em" },
+					children: "Item"
+				}),
+				/* @__PURE__ */ n(o, {
+					index: 2,
+					style: { width: t === "stretch" ? "auto" : "10em" },
+					children: "Item"
+				})
+			]
+		})] }, t))
+	] }),
+	args: { children: void 0 }
+}, d = {
+	render: () => /* @__PURE__ */ r("div", { children: [
+		[
+			"xs",
+			"sm",
+			"md",
+			"lg",
+			"xl"
+		].map((t) => /* @__PURE__ */ r("div", { children: [/* @__PURE__ */ r("h3", { children: ["Gap: ", t] }), /* @__PURE__ */ n(e.Container, {
+			templateColumns: "repeat(3, 1fr)",
+			gap: t,
+			style: i.container,
+			children: [
+				1,
+				2,
+				3,
+				4,
+				5,
+				6
+			].map((e) => /* @__PURE__ */ r(o, {
+				index: e,
+				children: ["Item ", e]
+			}, e))
+		})] }, t)),
+		/* @__PURE__ */ n("h3", { children: "Different Row and Column Gaps" }),
+		/* @__PURE__ */ n(e.Container, {
+			templateColumns: "repeat(3, 1fr)",
+			gapRow: "lg",
+			gapColumn: "sm",
+			style: i.container,
+			children: [
+				1,
+				2,
+				3,
+				4,
+				5,
+				6
+			].map((e) => /* @__PURE__ */ r(o, {
+				index: e,
+				children: ["Item ", e]
+			}, e))
+		})
+	] }),
+	args: { children: void 0 }
+}, f = {
+	render: () => /* @__PURE__ */ r("div", { children: [
+		/* @__PURE__ */ n("h3", { children: "Single Column (grid-template-columns: 100%; grid-auto-rows: auto 1fr)" }),
+		/* @__PURE__ */ r(e.Container, {
+			variant: "single-column",
+			style: {
+				...i.container,
+				height: "200px"
+			},
+			children: [/* @__PURE__ */ n(o, {
+				index: 0,
+				children: "Header (auto)"
+			}), /* @__PURE__ */ n(o, {
+				index: 1,
+				children: "Content (1fr)"
+			})]
+		}),
+		/* @__PURE__ */ n("h3", { children: "Auto 1fr Rows (grid-auto-rows: 1fr)" }),
+		/* @__PURE__ */ r(e.Container, {
+			variant: "auto-1fr",
+			templateColumns: "1fr 1fr",
+			style: {
+				...i.container,
+				height: "150px"
+			},
+			children: [/* @__PURE__ */ n(o, {
+				index: 0,
+				children: "Equal"
+			}), /* @__PURE__ */ n(o, {
+				index: 1,
+				children: "Height"
+			})]
+		}),
+		/* @__PURE__ */ n("h3", { children: "Auto 1fr Columns (grid-template-columns: auto 1fr; grid-auto-rows: auto)" }),
+		/* @__PURE__ */ r(e.Container, {
+			variant: "auto1fr-rows-auto",
+			gap: "sm",
+			style: i.container,
+			children: [
+				/* @__PURE__ */ n(o, {
+					index: 0,
+					children: "Label"
+				}),
+				/* @__PURE__ */ n(o, {
+					index: 1,
+					children: "Content that takes remaining space"
+				}),
+				/* @__PURE__ */ n(o, {
+					index: 2,
+					children: "Another"
+				}),
+				/* @__PURE__ */ n(o, {
+					index: 3,
+					children: "More content here"
+				})
+			]
+		})
+	] }),
+	args: { children: void 0 }
+}, p = {
+	render: () => /* @__PURE__ */ r("div", { children: [
+		/* @__PURE__ */ n("h3", { children: "Auto-fit with Minmax" }),
+		/* @__PURE__ */ n(e.Container, {
+			templateColumns: "repeat(auto-fit, minmax(150px, 1fr))",
+			gap: "md",
+			style: i.container,
+			children: [
+				1,
+				2,
+				3,
+				4,
+				5,
+				6
+			].map((e) => /* @__PURE__ */ r(o, {
+				index: e,
+				children: ["Card ", e]
+			}, e))
+		}),
+		/* @__PURE__ */ n("h3", { children: "Fixed and Flexible Columns" }),
+		/* @__PURE__ */ r(e.Container, {
+			templateColumns: "200px 1fr 100px",
+			gap: "sm",
+			style: i.container,
+			children: [
+				/* @__PURE__ */ n(o, {
+					index: 0,
+					children: "Sidebar"
+				}),
+				/* @__PURE__ */ n(o, {
+					index: 1,
+					children: "Main Content"
+				}),
+				/* @__PURE__ */ n(o, {
+					index: 2,
+					children: "Tools"
+				})
+			]
+		}),
+		/* @__PURE__ */ n("h3", { children: "Masonry-like Layout" }),
+		/* @__PURE__ */ r(e.Container, {
+			templateColumns: "repeat(4, 1fr)",
+			autoRows: "100px",
+			gap: "sm",
+			style: i.container,
+			children: [
+				/* @__PURE__ */ n(o, {
+					index: 0,
+					style: { gridRow: "span 2" },
+					children: "Tall"
+				}),
+				/* @__PURE__ */ n(o, {
+					index: 1,
+					children: "Normal"
+				}),
+				/* @__PURE__ */ n(o, {
+					index: 2,
+					children: "Normal"
+				}),
+				/* @__PURE__ */ n(o, {
+					index: 3,
+					style: { gridRow: "span 3" },
+					children: "Very Tall"
+				}),
+				/* @__PURE__ */ n(o, {
+					index: 4,
+					children: "Normal"
+				}),
+				/* @__PURE__ */ n(o, {
+					index: 5,
+					style: { gridRow: "span 2" },
+					children: "Tall"
+				}),
+				/* @__PURE__ */ n(o, {
+					index: 6,
+					children: "Normal"
+				}),
+				/* @__PURE__ */ n(o, {
+					index: 7,
+					children: "Normal"
+				})
+			]
+		})
+	] }),
+	args: { children: void 0 }
+}, m = {
+	render: () => /* @__PURE__ */ r("div", { children: [
+		/* @__PURE__ */ n("h3", { children: "Basic Layout with Areas" }),
+		/* @__PURE__ */ r(e.Container, {
+			areas: "\n          \"header header\"\n          \"nav main\"\n          \"footer footer\"\n        ",
+			templateColumns: "200px 1fr",
+			templateRows: "auto 1fr auto",
+			gap: "md",
+			style: {
+				...i.container,
+				height: "300px"
+			},
+			children: [
+				/* @__PURE__ */ n(e.Item, {
+					area: "header",
+					children: /* @__PURE__ */ n(o, {
+						index: 0,
+						children: "Header"
+					})
+				}),
+				/* @__PURE__ */ n(e.Item, {
+					area: "nav",
+					children: /* @__PURE__ */ n(o, {
+						index: 1,
+						children: "Navigation"
+					})
+				}),
+				/* @__PURE__ */ n(e.Item, {
+					area: "main",
+					children: /* @__PURE__ */ n(o, {
+						index: 2,
+						children: "Main Content"
+					})
+				}),
+				/* @__PURE__ */ n(e.Item, {
+					area: "footer",
+					children: /* @__PURE__ */ n(o, {
+						index: 3,
+						children: "Footer"
+					})
+				})
+			]
+		}),
+		/* @__PURE__ */ n("h3", { children: "Complex Areas Layout" }),
+		/* @__PURE__ */ r(e.Container, {
+			areas: "\n          \"header header header\"\n          \"sidebar content ads\"\n          \"sidebar footer footer\"\n        ",
+			templateColumns: "150px 1fr 120px",
+			templateRows: "60px 1fr 60px",
+			gap: "sm",
+			style: {
+				...i.container,
+				height: "350px"
+			},
+			children: [
+				/* @__PURE__ */ n(e.Item, {
+					area: "header",
+					children: /* @__PURE__ */ n(o, {
+						index: 0,
+						children: "Header"
+					})
+				}),
+				/* @__PURE__ */ n(e.Item, {
+					area: "sidebar",
+					children: /* @__PURE__ */ n(o, {
+						index: 1,
+						children: "Sidebar"
+					})
+				}),
+				/* @__PURE__ */ n(e.Item, {
+					area: "content",
+					children: /* @__PURE__ */ n(o, {
+						index: 2,
+						children: "Content"
+					})
+				}),
+				/* @__PURE__ */ n(e.Item, {
+					area: "ads",
+					children: /* @__PURE__ */ n(o, {
+						index: 3,
+						children: "Ads"
+					})
+				}),
+				/* @__PURE__ */ n(e.Item, {
+					area: "footer",
+					children: /* @__PURE__ */ n(o, {
+						index: 4,
+						children: "Footer"
+					})
+				})
+			]
+		})
+	] }),
+	args: { children: void 0 }
+}, h = {
+	render: () => /* @__PURE__ */ r("div", { children: [
+		/* @__PURE__ */ n("h3", { children: "Column and Row Span" }),
+		/* @__PURE__ */ r(e.Container, {
+			templateColumns: "repeat(4, 1fr)",
+			templateRows: "repeat(3, 80px)",
+			gap: "sm",
+			style: i.container,
+			children: [
+				/* @__PURE__ */ n(o, {
+					index: 0,
+					style: { gridColumn: "span 2" },
+					children: "Span 2 Columns"
+				}),
+				/* @__PURE__ */ n(o, {
+					index: 1,
+					children: "Normal"
+				}),
+				/* @__PURE__ */ n(o, {
+					index: 2,
+					children: "Normal"
+				}),
+				/* @__PURE__ */ n(o, {
+					index: 3,
+					style: { gridRow: "span 2" },
+					children: "Span 2 Rows"
+				}),
+				/* @__PURE__ */ n(o, {
+					index: 4,
+					children: "Normal"
+				}),
+				/* @__PURE__ */ n(o, {
+					index: 5,
+					children: "Normal"
+				}),
+				/* @__PURE__ */ n(o, {
+					index: 6,
+					style: {
+						gridColumn: "span 3",
+						gridRow: "span 2"
+					},
+					children: "Span 3 Columns & 2 Rows"
+				})
+			]
+		}),
+		/* @__PURE__ */ n("h3", { children: "Self Alignment" }),
+		/* @__PURE__ */ r(e.Container, {
+			templateColumns: "repeat(3, 1fr)",
+			templateRows: "repeat(2, 100px)",
+			gap: "sm",
+			style: i.container,
+			children: [
+				/* @__PURE__ */ n(e.Item, {
+					alignSelf: "start",
+					children: /* @__PURE__ */ n(o, {
+						index: 0,
+						children: "Start"
+					})
+				}),
+				/* @__PURE__ */ n(e.Item, {
+					alignSelf: "center",
+					children: /* @__PURE__ */ n(o, {
+						index: 1,
+						children: "Center"
+					})
+				}),
+				/* @__PURE__ */ n(e.Item, {
+					alignSelf: "end",
+					children: /* @__PURE__ */ n(o, {
+						index: 2,
+						children: "End"
+					})
+				}),
+				/* @__PURE__ */ n(e.Item, {
+					justifySelf: "start",
+					children: /* @__PURE__ */ n(o, {
+						index: 3,
+						style: { width: "80px" },
+						children: "Start"
+					})
+				}),
+				/* @__PURE__ */ n(e.Item, {
+					justifySelf: "center",
+					children: /* @__PURE__ */ n(o, {
+						index: 4,
+						style: { width: "80px" },
+						children: "Center"
+					})
+				}),
+				/* @__PURE__ */ n(e.Item, {
+					justifySelf: "end",
+					children: /* @__PURE__ */ n(o, {
+						index: 5,
+						style: { width: "80px" },
+						children: "End"
+					})
+				})
+			]
+		})
+	] }),
+	args: { children: void 0 }
+}, g = {
+	render: () => /* @__PURE__ */ r("div", { children: [/* @__PURE__ */ r("p", { children: [
+		"This is text with",
+		/* @__PURE__ */ r(e.Container, {
+			inline: !0,
+			templateColumns: "repeat(2, auto)",
+			gap: "xs",
+			style: { margin: "0 8px" },
+			children: [/* @__PURE__ */ n(o, {
+				index: 0,
+				children: "inline"
+			}), /* @__PURE__ */ n(o, {
+				index: 1,
+				children: "grid"
+			})]
+		}),
+		"elements inside."
+	] }), /* @__PURE__ */ r("p", { children: [
+		"Another inline grid example:",
+		/* @__PURE__ */ r(e.Container, {
+			inline: !0,
+			templateColumns: "auto auto",
+			gap: "sm",
+			align: "center",
+			style: { margin: "0 8px" },
+			children: [/* @__PURE__ */ n(o, {
+				index: 2,
+				style: {
+					fontSize: "12px",
+					padding: "4px 8px"
+				},
+				children: "Small"
+			}), /* @__PURE__ */ n(o, {
+				index: 3,
+				style: {
+					fontSize: "12px",
+					padding: "4px 8px"
+				},
+				children: "Items"
+			})]
+		}),
+		"in text flow."
+	] })] }),
+	args: { children: void 0 }
+}, _ = {
+	render: () => /* @__PURE__ */ r("div", { children: [
+		/* @__PURE__ */ n("h3", { children: "Dashboard Layout" }),
+		/* @__PURE__ */ r(e.Container, {
+			areas: "\n          \"header header header\"\n          \"stats stats sidebar\"\n          \"chart chart sidebar\"\n          \"table table sidebar\"\n        ",
+			templateColumns: "1fr 1fr 300px",
+			templateRows: "auto auto 1fr auto",
+			gap: "lg",
+			style: {
+				...i.container,
+				minHeight: "500px"
+			},
+			children: [
+				/* @__PURE__ */ n(e.Item, {
+					area: "header",
+					children: /* @__PURE__ */ n(o, {
+						index: 0,
+						children: "Dashboard Header"
+					})
+				}),
+				/* @__PURE__ */ n(e.Item, {
+					area: "stats",
+					children: /* @__PURE__ */ n(o, {
+						index: 1,
+						children: "Statistics Cards"
+					})
+				}),
+				/* @__PURE__ */ n(e.Item, {
+					area: "chart",
+					children: /* @__PURE__ */ n(o, {
+						index: 2,
+						children: "Main Chart"
+					})
+				}),
+				/* @__PURE__ */ n(e.Item, {
+					area: "table",
+					children: /* @__PURE__ */ n(o, {
+						index: 3,
+						children: "Data Table"
+					})
+				}),
+				/* @__PURE__ */ n(e.Item, {
+					area: "sidebar",
+					children: /* @__PURE__ */ n(o, {
+						index: 4,
+						children: "Sidebar Widgets"
+					})
+				})
+			]
+		}),
+		/* @__PURE__ */ n("h3", { children: "Product Grid" }),
+		/* @__PURE__ */ n(e.Container, {
+			templateColumns: "repeat(auto-fill, minmax(200px, 1fr))",
+			autoRows: "minmax(250px, auto)",
+			gap: "md",
+			style: i.container,
+			children: [
+				1,
+				2,
+				3,
+				4,
+				5,
+				6,
+				7,
+				8
+			].map((t) => /* @__PURE__ */ n(e.Item, { children: /* @__PURE__ */ r("div", {
+				style: {
+					border: "1px solid #ddd",
+					borderRadius: "8px",
+					padding: "16px",
+					height: "100%",
+					backgroundColor: a(t),
+					display: "flex",
+					flexDirection: "column",
+					justifyContent: "center",
+					alignItems: "center",
+					color: "white"
+				},
+				children: [
+					/* @__PURE__ */ r("h4", { children: ["Product ", t] }),
+					/* @__PURE__ */ n("p", { children: "Description" }),
+					/* @__PURE__ */ n("button", {
+						style: {
+							marginTop: "8px",
+							padding: "8px 16px"
+						},
+						children: "Buy Now"
+					})
+				]
+			}) }, t))
+		}),
+		/* @__PURE__ */ n("h3", { children: "Form Layout" }),
+		/* @__PURE__ */ r(e.Container, {
+			templateColumns: "auto 1fr",
+			autoRows: "auto",
+			gap: "md",
+			align: "center",
+			style: i.container,
+			children: [
+				/* @__PURE__ */ n(o, {
+					index: 0,
+					style: { justifySelf: "end" },
+					children: "Name:"
+				}),
+				/* @__PURE__ */ n(o, {
+					index: 1,
+					children: "Input Field"
+				}),
+				/* @__PURE__ */ n(o, {
+					index: 2,
+					style: { justifySelf: "end" },
+					children: "Email:"
+				}),
+				/* @__PURE__ */ n(o, {
+					index: 3,
+					children: "Input Field"
+				}),
+				/* @__PURE__ */ n(o, {
+					index: 4,
+					style: { justifySelf: "end" },
+					children: "Message:"
+				}),
+				/* @__PURE__ */ n(e.Item, {
+					style: {
+						gridColumn: "2",
+						alignSelf: "stretch"
+					},
+					children: /* @__PURE__ */ n(o, {
+						index: 5,
+						style: { height: "100%" },
+						children: "Textarea"
+					})
+				})
+			]
+		})
+	] }),
+	args: { children: void 0 }
+}, v = {
+	render: () => /* @__PURE__ */ r("div", { children: [/* @__PURE__ */ n("h3", { children: "Adaptive Layout" }), /* @__PURE__ */ n(e.Container, {
+		templateColumns: "repeat(auto-fit, minmax(min(100%, 300px), 1fr))",
+		gap: "lg",
+		style: i.container,
+		children: [
+			1,
+			2,
+			3,
+			4,
+			5,
+			6
+		].map((e) => /* @__PURE__ */ r(o, {
+			index: e,
+			children: ["Adaptive Card ", e]
+		}, e))
+	})] }),
+	args: { children: void 0 }
+};
+//#endregion
+export { u as Alignment, l as AutoFlow, c as BasicGrid, p as ComplexTemplates, d as Gaps, m as GridAreas, g as InlineGrid, h as ItemPlacement, f as PredefinedVariants, _ as RealWorld, v as Responsive, s as default };
+
+//# sourceMappingURL=Grid.stories.js.map