@ryuzaki13/react-foundation-ui 0.1.0

package/dist/flex/stories/Flex.stories.js

@@ -0,0 +1,607 @@
+import { t as e } from "../../chunks/Flex-DbBdq336.js";
+import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
+import "react";
+//#region src/flex/stories/Flex.stories.tsx
+var i = {
+	container: {
+		border: "2px dashed var(--border-0)",
+		padding: "2em",
+		marginBlock: "1em"
+	},
+	item: {
+		padding: "16px",
+		textAlign: "center",
+		fontWeight: "bold",
+		color: "white",
+		minHeight: "5em",
+		minWidth: "10em",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center"
+	},
+	itemColors: [
+		"#ff6b6b",
+		"#4ecdc4",
+		"#45b7d1",
+		"#96ceb4",
+		"#feca57",
+		"#ff9ff3"
+	]
+}, a = (e) => i.itemColors[e % i.itemColors.length], o = ({ children: t, index: r = 0 }) => /* @__PURE__ */ n(e.Item, {
+	style: {
+		...i.item,
+		backgroundColor: a(r)
+	},
+	children: t
+}), s = {
+	title: "Shared/Layout/Flex",
+	component: e.Container,
+	parameters: { layout: "padded" },
+	tags: ["autodocs"]
+}, c = {
+	render: (t) => /* @__PURE__ */ n(e.Container, {
+		...t,
+		style: i.container
+	}),
+	args: {
+		children: /* @__PURE__ */ r(t, { children: [
+			/* @__PURE__ */ n(o, {
+				index: 0,
+				children: "Item 1"
+			}),
+			/* @__PURE__ */ n(o, {
+				index: 1,
+				children: "Item 2"
+			}),
+			/* @__PURE__ */ n(o, {
+				index: 2,
+				children: "Item 3"
+			})
+		] }),
+		row: !0
+	}
+}, l = {
+	render: (t) => /* @__PURE__ */ n(e.Container, {
+		...t,
+		style: i.container
+	}),
+	args: {
+		children: /* @__PURE__ */ r(t, { children: [
+			/* @__PURE__ */ n(o, {
+				index: 0,
+				children: "Header"
+			}),
+			/* @__PURE__ */ n(o, {
+				index: 1,
+				children: "Content"
+			}),
+			/* @__PURE__ */ n(o, {
+				index: 2,
+				children: "Footer"
+			})
+		] }),
+		column: !0
+	}
+}, u = {
+	render: () => /* @__PURE__ */ r("div", { children: [
+		/* @__PURE__ */ n("h3", { children: "Row (default)" }),
+		/* @__PURE__ */ r(e.Container, {
+			row: !0,
+			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("h3", { children: "Row Reverse" }),
+		/* @__PURE__ */ r(e.Container, {
+			rowReverse: !0,
+			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("h3", { children: "Column" }),
+		/* @__PURE__ */ r(e.Container, {
+			column: !0,
+			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("h3", { children: "Column Reverse" }),
+		/* @__PURE__ */ r(e.Container, {
+			columnReverse: !0,
+			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"
+				})
+			]
+		})
+	] }),
+	args: { children: void 0 }
+}, d = {
+	render: () => /* @__PURE__ */ n("div", { children: [
+		"start",
+		"center",
+		"end",
+		"between",
+		"around",
+		"evenly"
+	].map((t) => /* @__PURE__ */ r("div", { children: [/* @__PURE__ */ r("h3", { children: ["Justify: ", t] }), /* @__PURE__ */ r(e.Container, {
+		row: !0,
+		justify: t,
+		style: i.container,
+		children: [
+			/* @__PURE__ */ n(o, {
+				index: 0,
+				children: "Item 1"
+			}),
+			/* @__PURE__ */ n(o, {
+				index: 1,
+				children: "Item 2"
+			}),
+			/* @__PURE__ */ n(o, {
+				index: 2,
+				children: "Item 3"
+			})
+		]
+	})] }, t)) }),
+	args: { children: void 0 }
+}, f = {
+	render: () => /* @__PURE__ */ n("div", { children: [
+		"start",
+		"center",
+		"end",
+		"stretch",
+		"baseline"
+	].map((t) => /* @__PURE__ */ r("div", { children: [/* @__PURE__ */ r("h3", { children: ["Align: ", t] }), /* @__PURE__ */ r(e.Container, {
+		row: !0,
+		align: t,
+		style: {
+			...i.container,
+			height: "120px"
+		},
+		children: [
+			/* @__PURE__ */ n(o, {
+				index: 0,
+				children: /* @__PURE__ */ n("div", { children: "Short" })
+			}),
+			/* @__PURE__ */ n(o, {
+				index: 1,
+				children: /* @__PURE__ */ n("div", {
+					style: { padding: "40px" },
+					children: "Tall"
+				})
+			}),
+			/* @__PURE__ */ n(o, {
+				index: 2,
+				children: /* @__PURE__ */ n("div", {
+					style: { padding: "24px" },
+					children: "Medium"
+				})
+			})
+		]
+	})] }, t)) }),
+	args: { children: void 0 }
+}, p = {
+	render: () => /* @__PURE__ */ r("div", { children: [
+		/* @__PURE__ */ n("h3", { children: "No Wrap (default)" }),
+		/* @__PURE__ */ n(e.Container, {
+			row: !0,
+			nowrap: !0,
+			style: i.container,
+			children: [
+				1,
+				2,
+				3,
+				4,
+				5,
+				6,
+				7,
+				8,
+				9,
+				10,
+				11,
+				12
+			].map((e) => /* @__PURE__ */ r(o, {
+				index: e,
+				children: ["Item ", e]
+			}, e))
+		}),
+		/* @__PURE__ */ n("h3", { children: "Wrap" }),
+		/* @__PURE__ */ n(e.Container, {
+			row: !0,
+			wrap: !0,
+			style: i.container,
+			children: [
+				1,
+				2,
+				3,
+				4,
+				5,
+				6,
+				7,
+				8,
+				9,
+				10,
+				11,
+				12
+			].map((e) => /* @__PURE__ */ r(o, {
+				index: e,
+				children: ["Item ", e]
+			}, e))
+		}),
+		/* @__PURE__ */ n("h3", { children: "Wrap Reverse" }),
+		/* @__PURE__ */ n(e.Container, {
+			row: !0,
+			wrapReverse: !0,
+			style: i.container,
+			children: [
+				1,
+				2,
+				3,
+				4,
+				5,
+				6,
+				7,
+				8,
+				9,
+				10,
+				11,
+				12
+			].map((e) => /* @__PURE__ */ r(o, {
+				index: e,
+				children: ["Item ", e]
+			}, e))
+		})
+	] }),
+	args: { children: void 0 }
+}, m = {
+	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, {
+			row: !0,
+			wrap: !0,
+			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, {
+			row: !0,
+			wrap: !0,
+			gapRow: "lg",
+			gapColumn: "sm",
+			style: i.container,
+			children: [
+				1,
+				2,
+				3,
+				4,
+				5,
+				6,
+				7,
+				8,
+				9,
+				10,
+				11,
+				12
+			].map((e) => /* @__PURE__ */ r(o, {
+				index: e,
+				children: ["Item ", e]
+			}, e))
+		})
+	] }),
+	args: { children: void 0 }
+}, h = {
+	render: () => /* @__PURE__ */ r("div", { children: [
+		/* @__PURE__ */ n("h3", { children: "Grow Properties" }),
+		/* @__PURE__ */ r(e.Container, {
+			row: !0,
+			style: i.container,
+			children: [
+				/* @__PURE__ */ n(o, {
+					index: 0,
+					children: "Default"
+				}),
+				/* @__PURE__ */ n(e.Item, {
+					grow: !0,
+					children: /* @__PURE__ */ n("div", {
+						style: {
+							...i.item,
+							backgroundColor: a(1)
+						},
+						children: "Grow"
+					})
+				}),
+				/* @__PURE__ */ n(o, {
+					index: 2,
+					children: "Default"
+				})
+			]
+		}),
+		/* @__PURE__ */ n("h3", { children: "Shrink Properties" }),
+		/* @__PURE__ */ r(e.Container, {
+			row: !0,
+			style: {
+				...i.container,
+				width: "300px"
+			},
+			children: [/* @__PURE__ */ n(e.Item, {
+				shrink: !1,
+				children: /* @__PURE__ */ n("div", {
+					style: {
+						...i.item,
+						backgroundColor: a(0),
+						width: "150px"
+					},
+					children: "No Shrink"
+				})
+			}), /* @__PURE__ */ n(e.Item, { children: /* @__PURE__ */ n("div", {
+				style: {
+					...i.item,
+					backgroundColor: a(1),
+					width: "150px"
+				},
+				children: "Shrink (default)"
+			}) })]
+		}),
+		/* @__PURE__ */ n("h3", { children: "Composite Classes" }),
+		/* @__PURE__ */ r(e.Container, {
+			row: !0,
+			style: i.container,
+			children: [
+				/* @__PURE__ */ n(e.Item, {
+					flex0: !0,
+					children: /* @__PURE__ */ n("div", {
+						style: {
+							...i.item,
+							backgroundColor: a(0)
+						},
+						children: "flex0"
+					})
+				}),
+				/* @__PURE__ */ n(e.Item, {
+					flex1: !0,
+					children: /* @__PURE__ */ n("div", {
+						style: {
+							...i.item,
+							backgroundColor: a(1)
+						},
+						children: "flex1"
+					})
+				}),
+				/* @__PURE__ */ n(e.Item, {
+					flex0: !0,
+					children: /* @__PURE__ */ n("div", {
+						style: {
+							...i.item,
+							backgroundColor: a(2)
+						},
+						children: "flex0"
+					})
+				})
+			]
+		})
+	] }),
+	args: { children: void 0 }
+}, g = {
+	render: () => /* @__PURE__ */ r("div", { children: [
+		/* @__PURE__ */ n("h3", { children: "Center" }),
+		/* @__PURE__ */ n(e.Predefined, {
+			variant: "center",
+			style: {
+				...i.container,
+				height: "100px"
+			},
+			children: /* @__PURE__ */ n(o, {
+				index: 0,
+				children: "Centered Content"
+			})
+		}),
+		/* @__PURE__ */ n("h3", { children: "Center Between" }),
+		/* @__PURE__ */ r(e.Predefined, {
+			variant: "centerBetween",
+			style: i.container,
+			children: [/* @__PURE__ */ n(o, {
+				index: 0,
+				children: "Left"
+			}), /* @__PURE__ */ n(o, {
+				index: 1,
+				children: "Right"
+			})]
+		})
+	] }),
+	args: { children: void 0 }
+}, _ = {
+	render: () => /* @__PURE__ */ r("div", { children: [/* @__PURE__ */ r("p", { children: [
+		"This is text with",
+		/* @__PURE__ */ r(e.Container, {
+			inline: !0,
+			align: "center",
+			gap: "sm",
+			style: { margin: "0 8px" },
+			children: [/* @__PURE__ */ n(o, {
+				index: 0,
+				children: "inline"
+			}), /* @__PURE__ */ n(o, {
+				index: 1,
+				children: "flex"
+			})]
+		}),
+		"elements inside."
+	] }), /* @__PURE__ */ r("p", { children: [
+		"Another example with",
+		/* @__PURE__ */ r(e.Container, {
+			inline: !0,
+			column: !0,
+			gap: "xs",
+			style: { margin: "0 8px" },
+			children: [/* @__PURE__ */ n(o, {
+				index: 2,
+				children: "vertical"
+			}), /* @__PURE__ */ n(o, {
+				index: 3,
+				children: "inline"
+			})]
+		}),
+		"flex."
+	] })] }),
+	args: { children: void 0 }
+}, v = {
+	render: () => /* @__PURE__ */ r("div", { children: [
+		/* @__PURE__ */ n("h3", { children: "Navigation Bar" }),
+		/* @__PURE__ */ r(e.Predefined, {
+			variant: "centerBetween",
+			style: i.container,
+			children: [/* @__PURE__ */ r(e.Container, {
+				row: !0,
+				align: "center",
+				gap: "md",
+				children: [
+					/* @__PURE__ */ n(o, {
+						index: 0,
+						children: "Logo"
+					}),
+					/* @__PURE__ */ n(o, {
+						index: 1,
+						children: "Home"
+					}),
+					/* @__PURE__ */ n(o, {
+						index: 2,
+						children: "About"
+					}),
+					/* @__PURE__ */ n(o, {
+						index: 3,
+						children: "Contact"
+					})
+				]
+			}), /* @__PURE__ */ n(o, {
+				index: 4,
+				children: "Login"
+			})]
+		}),
+		/* @__PURE__ */ n("h3", { children: "Card Layout" }),
+		/* @__PURE__ */ n(e.Container, {
+			row: !0,
+			wrap: !0,
+			gap: "lg",
+			style: i.container,
+			children: [
+				1,
+				2,
+				3,
+				4
+			].map((t) => /* @__PURE__ */ n(e.Item, {
+				flex1: !0,
+				style: { minWidth: "200px" },
+				children: /* @__PURE__ */ r("div", {
+					style: {
+						border: "1px solid #ddd",
+						borderRadius: "8px",
+						padding: "16px",
+						textAlign: "center",
+						backgroundColor: a(t)
+					},
+					children: [/* @__PURE__ */ r("h4", { children: ["Card ", t] }), /* @__PURE__ */ n("p", { children: "Card content goes here" })]
+				})
+			}, t))
+		}),
+		/* @__PURE__ */ n("h3", { children: "Form Layout" }),
+		/* @__PURE__ */ r(e.Container, {
+			column: !0,
+			gap: "md",
+			style: i.container,
+			children: [
+				/* @__PURE__ */ r(e.Container, {
+					row: !0,
+					gap: "md",
+					children: [/* @__PURE__ */ n(e.Item, {
+						flex1: !0,
+						children: /* @__PURE__ */ n(o, {
+							index: 0,
+							children: "First Name"
+						})
+					}), /* @__PURE__ */ n(e.Item, {
+						flex1: !0,
+						children: /* @__PURE__ */ n(o, {
+							index: 1,
+							children: "Last Name"
+						})
+					})]
+				}),
+				/* @__PURE__ */ n(o, {
+					index: 2,
+					children: "Email"
+				}),
+				/* @__PURE__ */ n(o, {
+					index: 3,
+					children: "Message"
+				})
+			]
+		})
+	] }),
+	args: { children: void 0 }
+};
+//#endregion
+export { f as AlignItems, l as BasicColumn, c as BasicRow, u as Directions, h as FlexItems, m as Gaps, _ as InlineFlex, d as JustifyContent, g as Predefined, v as RealWorld, p as Wrapping, s as default };
+
+//# sourceMappingURL=Flex.stories.js.map

package/dist/flex/stories/Flex.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flex.stories.js","names":[],"sources":["../../../src/flex/stories/Flex.stories.tsx"],"sourcesContent":["// Flex.stories.tsx\nimport React from \"react\";\n\nimport { Flex } from \"../Flex\";\n\nimport type { Meta, StoryObj } from \"@storybook/react-vite\";\n\n// Стили для демонстрационных блоков\nconst demoStyles = {\n\tcontainer: {\n\t\tborder: \"2px dashed var(--border-0)\",\n\t\tpadding: \"2em\",\n\t\tmarginBlock: \"1em\"\n\t},\n\titem: {\n\t\tpadding: \"16px\",\n\t\ttextAlign: \"center\" as const,\n\t\tfontWeight: \"bold\",\n\t\tcolor: \"white\",\n\t\tminHeight: \"5em\",\n\t\tminWidth: \"10em\",\n\t\tdisplay: \"flex\",\n\t\talignItems: \"center\",\n\t\tjustifyContent: \"center\"\n\t},\n\titemColors: [\"#ff6b6b\", \"#4ecdc4\", \"#45b7d1\", \"#96ceb4\", \"#feca57\", \"#ff9ff3\"]\n};\n\nconst getItemColor = (index: number) => demoStyles.itemColors[index % demoStyles.itemColors.length];\n\nconst DemoItem = ({ children, index = 0 }: { children: React.ReactNode; index?: number }) => (\n\t<Flex.Item\n\t\tstyle={{\n\t\t\t...demoStyles.item,\n\t\t\tbackgroundColor: getItemColor(index)\n\t\t}}>\n\t\t{children}\n\t</Flex.Item>\n);\n\nconst meta = {\n\ttitle: \"Shared/Layout/Flex\",\n\tcomponent: Flex.Container,\n\tparameters: {\n\t\tlayout: \"padded\"\n\t},\n\ttags: [\"autodocs\"]\n} satisfies Meta<typeof Flex.Container>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n// Базовые примеры\nexport const BasicRow: Story = {\n\trender: (args) => <Flex.Container {...args} style={demoStyles.container} />,\n\targs: {\n\t\tchildren: (\n\t\t\t<>\n\t\t\t\t<DemoItem index={0}>Item 1</DemoItem>\n\t\t\t\t<DemoItem index={1}>Item 2</DemoItem>\n\t\t\t\t<DemoItem index={2}>Item 3</DemoItem>\n\t\t\t</>\n\t\t),\n\t\trow: true\n\t}\n};\n\nexport const BasicColumn: Story = {\n\trender: (args) => <Flex.Container {...args} style={demoStyles.container} />,\n\targs: {\n\t\tchildren: (\n\t\t\t<>\n\t\t\t\t<DemoItem index={0}>Header</DemoItem>\n\t\t\t\t<DemoItem index={1}>Content</DemoItem>\n\t\t\t\t<DemoItem index={2}>Footer</DemoItem>\n\t\t\t</>\n\t\t),\n\t\tcolumn: true\n\t}\n};\n\n// Направления\nexport const Directions: Story = {\n\trender: () => (\n\t\t<div>\n\t\t\t<h3>Row (default)</h3>\n\t\t\t<Flex.Container row style={demoStyles.container}>\n\t\t\t\t<DemoItem index={0}>1</DemoItem>\n\t\t\t\t<DemoItem index={1}>2</DemoItem>\n\t\t\t\t<DemoItem index={2}>3</DemoItem>\n\t\t\t</Flex.Container>\n\n\t\t\t<h3>Row Reverse</h3>\n\t\t\t<Flex.Container rowReverse style={demoStyles.container}>\n\t\t\t\t<DemoItem index={0}>1</DemoItem>\n\t\t\t\t<DemoItem index={1}>2</DemoItem>\n\t\t\t\t<DemoItem index={2}>3</DemoItem>\n\t\t\t</Flex.Container>\n\n\t\t\t<h3>Column</h3>\n\t\t\t<Flex.Container column style={demoStyles.container}>\n\t\t\t\t<DemoItem index={0}>1</DemoItem>\n\t\t\t\t<DemoItem index={1}>2</DemoItem>\n\t\t\t\t<DemoItem index={2}>3</DemoItem>\n\t\t\t</Flex.Container>\n\n\t\t\t<h3>Column Reverse</h3>\n\t\t\t<Flex.Container columnReverse style={demoStyles.container}>\n\t\t\t\t<DemoItem index={0}>1</DemoItem>\n\t\t\t\t<DemoItem index={1}>2</DemoItem>\n\t\t\t\t<DemoItem index={2}>3</DemoItem>\n\t\t\t</Flex.Container>\n\t\t</div>\n\t),\n\targs: { children: undefined }\n};\n\n// Выравнивание по главной оси\nexport const JustifyContent: Story = {\n\trender: () => (\n\t\t<div>\n\t\t\t{([\"start\", \"center\", \"end\", \"between\", \"around\", \"evenly\"] as const).map((justify) => (\n\t\t\t\t<div key={justify}>\n\t\t\t\t\t<h3>Justify: {justify}</h3>\n\t\t\t\t\t<Flex.Container row justify={justify} style={demoStyles.container}>\n\t\t\t\t\t\t<DemoItem index={0}>Item 1</DemoItem>\n\t\t\t\t\t\t<DemoItem index={1}>Item 2</DemoItem>\n\t\t\t\t\t\t<DemoItem index={2}>Item 3</DemoItem>\n\t\t\t\t\t</Flex.Container>\n\t\t\t\t</div>\n\t\t\t))}\n\t\t</div>\n\t),\n\targs: { children: undefined }\n};\n\n// Выравнивание по поперечной оси\nexport const AlignItems: Story = {\n\trender: () => (\n\t\t<div>\n\t\t\t{([\"start\", \"center\", \"end\", \"stretch\", \"baseline\"] as const).map((align) => (\n\t\t\t\t<div key={align}>\n\t\t\t\t\t<h3>Align: {align}</h3>\n\t\t\t\t\t<Flex.Container\n\t\t\t\t\t\trow\n\t\t\t\t\t\talign={align}\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t...demoStyles.container,\n\t\t\t\t\t\t\theight: \"120px\"\n\t\t\t\t\t\t}}>\n\t\t\t\t\t\t<DemoItem index={0}>\n\t\t\t\t\t\t\t<div>Short</div>\n\t\t\t\t\t\t</DemoItem>\n\t\t\t\t\t\t<DemoItem index={1}>\n\t\t\t\t\t\t\t<div style={{ padding: \"40px\" }}>Tall</div>\n\t\t\t\t\t\t</DemoItem>\n\t\t\t\t\t\t<DemoItem index={2}>\n\t\t\t\t\t\t\t<div style={{ padding: \"24px\" }}>Medium</div>\n\t\t\t\t\t\t</DemoItem>\n\t\t\t\t\t</Flex.Container>\n\t\t\t\t</div>\n\t\t\t))}\n\t\t</div>\n\t),\n\targs: { children: undefined }\n};\n\n// Перенос\nexport const Wrapping: Story = {\n\trender: () => (\n\t\t<div>\n\t\t\t<h3>No Wrap (default)</h3>\n\t\t\t<Flex.Container row nowrap style={demoStyles.container}>\n\t\t\t\t{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((i) => (\n\t\t\t\t\t<DemoItem key={i} index={i}>\n\t\t\t\t\t\tItem {i}\n\t\t\t\t\t</DemoItem>\n\t\t\t\t))}\n\t\t\t</Flex.Container>\n\n\t\t\t<h3>Wrap</h3>\n\t\t\t<Flex.Container row wrap style={demoStyles.container}>\n\t\t\t\t{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((i) => (\n\t\t\t\t\t<DemoItem key={i} index={i}>\n\t\t\t\t\t\tItem {i}\n\t\t\t\t\t</DemoItem>\n\t\t\t\t))}\n\t\t\t</Flex.Container>\n\n\t\t\t<h3>Wrap Reverse</h3>\n\t\t\t<Flex.Container row wrapReverse style={demoStyles.container}>\n\t\t\t\t{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((i) => (\n\t\t\t\t\t<DemoItem key={i} index={i}>\n\t\t\t\t\t\tItem {i}\n\t\t\t\t\t</DemoItem>\n\t\t\t\t))}\n\t\t\t</Flex.Container>\n\t\t</div>\n\t),\n\targs: { children: undefined }\n};\n\n// Gap свойства\nexport const Gaps: Story = {\n\trender: () => (\n\t\t<div>\n\t\t\t{([\"xs\", \"sm\", \"md\", \"lg\", \"xl\"] as const).map((gap) => (\n\t\t\t\t<div key={gap}>\n\t\t\t\t\t<h3>Gap: {gap}</h3>\n\t\t\t\t\t<Flex.Container row wrap gap={gap} style={demoStyles.container}>\n\t\t\t\t\t\t{[1, 2, 3, 4, 5, 6].map((i) => (\n\t\t\t\t\t\t\t<DemoItem key={i} index={i}>\n\t\t\t\t\t\t\t\tItem {i}\n\t\t\t\t\t\t\t</DemoItem>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</Flex.Container>\n\t\t\t\t</div>\n\t\t\t))}\n\n\t\t\t<h3>Different Row and Column Gaps</h3>\n\t\t\t<Flex.Container row wrap gapRow=\"lg\" gapColumn=\"sm\" style={demoStyles.container}>\n\t\t\t\t{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((i) => (\n\t\t\t\t\t<DemoItem key={i} index={i}>\n\t\t\t\t\t\tItem {i}\n\t\t\t\t\t</DemoItem>\n\t\t\t\t))}\n\t\t\t</Flex.Container>\n\t\t</div>\n\t),\n\targs: { children: undefined }\n};\n\n// Flex Item свойства\nexport const FlexItems: Story = {\n\trender: () => (\n\t\t<div>\n\t\t\t<h3>Grow Properties</h3>\n\t\t\t<Flex.Container row style={demoStyles.container}>\n\t\t\t\t<DemoItem index={0}>Default</DemoItem>\n\t\t\t\t<Flex.Item grow>\n\t\t\t\t\t<div style={{ ...demoStyles.item, backgroundColor: getItemColor(1) }}>Grow</div>\n\t\t\t\t</Flex.Item>\n\t\t\t\t<DemoItem index={2}>Default</DemoItem>\n\t\t\t</Flex.Container>\n\n\t\t\t<h3>Shrink Properties</h3>\n\t\t\t<Flex.Container row style={{ ...demoStyles.container, width: \"300px\" }}>\n\t\t\t\t<Flex.Item shrink={false}>\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t...demoStyles.item,\n\t\t\t\t\t\t\tbackgroundColor: getItemColor(0),\n\t\t\t\t\t\t\twidth: \"150px\"\n\t\t\t\t\t\t}}>\n\t\t\t\t\t\tNo Shrink\n\t\t\t\t\t</div>\n\t\t\t\t</Flex.Item>\n\t\t\t\t<Flex.Item>\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t...demoStyles.item,\n\t\t\t\t\t\t\tbackgroundColor: getItemColor(1),\n\t\t\t\t\t\t\twidth: \"150px\"\n\t\t\t\t\t\t}}>\n\t\t\t\t\t\tShrink (default)\n\t\t\t\t\t</div>\n\t\t\t\t</Flex.Item>\n\t\t\t</Flex.Container>\n\n\t\t\t<h3>Composite Classes</h3>\n\t\t\t<Flex.Container row style={demoStyles.container}>\n\t\t\t\t<Flex.Item flex0>\n\t\t\t\t\t<div style={{ ...demoStyles.item, backgroundColor: getItemColor(0) }}>flex0</div>\n\t\t\t\t</Flex.Item>\n\t\t\t\t<Flex.Item flex1>\n\t\t\t\t\t<div style={{ ...demoStyles.item, backgroundColor: getItemColor(1) }}>flex1</div>\n\t\t\t\t</Flex.Item>\n\t\t\t\t<Flex.Item flex0>\n\t\t\t\t\t<div style={{ ...demoStyles.item, backgroundColor: getItemColor(2) }}>flex0</div>\n\t\t\t\t</Flex.Item>\n\t\t\t</Flex.Container>\n\t\t</div>\n\t),\n\targs: { children: undefined }\n};\n\n// Предопределенные композиции\nexport const Predefined: Story = {\n\trender: () => (\n\t\t<div>\n\t\t\t<h3>Center</h3>\n\t\t\t<Flex.Predefined variant=\"center\" style={{ ...demoStyles.container, height: \"100px\" }}>\n\t\t\t\t<DemoItem index={0}>Centered Content</DemoItem>\n\t\t\t</Flex.Predefined>\n\n\t\t\t<h3>Center Between</h3>\n\t\t\t<Flex.Predefined variant=\"centerBetween\" style={demoStyles.container}>\n\t\t\t\t<DemoItem index={0}>Left</DemoItem>\n\t\t\t\t<DemoItem index={1}>Right</DemoItem>\n\t\t\t</Flex.Predefined>\n\t\t</div>\n\t),\n\targs: { children: undefined }\n};\n\n// Inline Flex\nexport const InlineFlex: Story = {\n\trender: () => (\n\t\t<div>\n\t\t\t<p>\n\t\t\t\tThis is text with\n\t\t\t\t<Flex.Container inline align=\"center\" gap=\"sm\" style={{ margin: \"0 8px\" }}>\n\t\t\t\t\t<DemoItem index={0}>inline</DemoItem>\n\t\t\t\t\t<DemoItem index={1}>flex</DemoItem>\n\t\t\t\t</Flex.Container>\n\t\t\t\telements inside.\n\t\t\t</p>\n\n\t\t\t<p>\n\t\t\t\tAnother example with\n\t\t\t\t<Flex.Container inline column gap=\"xs\" style={{ margin: \"0 8px\" }}>\n\t\t\t\t\t<DemoItem index={2}>vertical</DemoItem>\n\t\t\t\t\t<DemoItem index={3}>inline</DemoItem>\n\t\t\t\t</Flex.Container>\n\t\t\t\tflex.\n\t\t\t</p>\n\t\t</div>\n\t),\n\targs: { children: undefined }\n};\n\n// Real World Examples\nexport const RealWorld: Story = {\n\trender: () => (\n\t\t<div>\n\t\t\t<h3>Navigation Bar</h3>\n\t\t\t<Flex.Predefined variant=\"centerBetween\" style={demoStyles.container}>\n\t\t\t\t<Flex.Container row align=\"center\" gap=\"md\">\n\t\t\t\t\t<DemoItem index={0}>Logo</DemoItem>\n\t\t\t\t\t<DemoItem index={1}>Home</DemoItem>\n\t\t\t\t\t<DemoItem index={2}>About</DemoItem>\n\t\t\t\t\t<DemoItem index={3}>Contact</DemoItem>\n\t\t\t\t</Flex.Container>\n\t\t\t\t<DemoItem index={4}>Login</DemoItem>\n\t\t\t</Flex.Predefined>\n\n\t\t\t<h3>Card Layout</h3>\n\t\t\t<Flex.Container row wrap gap=\"lg\" style={demoStyles.container}>\n\t\t\t\t{[1, 2, 3, 4].map((i) => (\n\t\t\t\t\t<Flex.Item key={i} flex1 style={{ minWidth: \"200px\" }}>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tborder: \"1px solid #ddd\",\n\t\t\t\t\t\t\t\tborderRadius: \"8px\",\n\t\t\t\t\t\t\t\tpadding: \"16px\",\n\t\t\t\t\t\t\t\ttextAlign: \"center\",\n\t\t\t\t\t\t\t\tbackgroundColor: getItemColor(i)\n\t\t\t\t\t\t\t}}>\n\t\t\t\t\t\t\t<h4>Card {i}</h4>\n\t\t\t\t\t\t\t<p>Card content goes here</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</Flex.Item>\n\t\t\t\t))}\n\t\t\t</Flex.Container>\n\n\t\t\t<h3>Form Layout</h3>\n\t\t\t<Flex.Container column gap=\"md\" style={demoStyles.container}>\n\t\t\t\t<Flex.Container row gap=\"md\">\n\t\t\t\t\t<Flex.Item flex1>\n\t\t\t\t\t\t<DemoItem index={0}>First Name</DemoItem>\n\t\t\t\t\t</Flex.Item>\n\t\t\t\t\t<Flex.Item flex1>\n\t\t\t\t\t\t<DemoItem index={1}>Last Name</DemoItem>\n\t\t\t\t\t</Flex.Item>\n\t\t\t\t</Flex.Container>\n\t\t\t\t<DemoItem index={2}>Email</DemoItem>\n\t\t\t\t<DemoItem index={3}>Message</DemoItem>\n\t\t\t</Flex.Container>\n\t\t</div>\n\t),\n\targs: { children: undefined }\n};\n"],"mappings":";;;;AAQA,IAAM,IAAa;CAClB,WAAW;EACV,QAAQ;EACR,SAAS;EACT,aAAa;CACd;CACA,MAAM;EACL,SAAS;EACT,WAAW;EACX,YAAY;EACZ,OAAO;EACP,WAAW;EACX,UAAU;EACV,SAAS;EACT,YAAY;EACZ,gBAAgB;CACjB;CACA,YAAY;EAAC;EAAW;EAAW;EAAW;EAAW;EAAW;CAAS;AAC9E,GAEM,KAAgB,MAAkB,EAAW,WAAW,IAAQ,EAAW,WAAW,SAEtF,KAAY,EAAE,aAAU,WAAQ,QACrC,kBAAC,EAAK,MAAN;CACC,OAAO;EACN,GAAG,EAAW;EACd,iBAAiB,EAAa,CAAK;CACpC;CACC;AACS,CAAA,GAGN,IAAO;CACZ,OAAO;CACP,WAAW,EAAK;CAChB,YAAY,EACX,QAAQ,SACT;CACA,MAAM,CAAC,UAAU;AAClB,GAMa,IAAkB;CAC9B,SAAS,MAAS,kBAAC,EAAK,WAAN;EAAgB,GAAI;EAAM,OAAO,EAAW;CAAY,CAAA;CAC1E,MAAM;EACL,UACC,kBAAA,GAAA,EAAA,UAAA;GACC,kBAAC,GAAD;IAAU,OAAO;cAAG;GAAgB,CAAA;GACpC,kBAAC,GAAD;IAAU,OAAO;cAAG;GAAgB,CAAA;GACpC,kBAAC,GAAD;IAAU,OAAO;cAAG;GAAgB,CAAA;EACnC,EAAA,CAAA;EAEH,KAAK;CACN;AACD,GAEa,IAAqB;CACjC,SAAS,MAAS,kBAAC,EAAK,WAAN;EAAgB,GAAI;EAAM,OAAO,EAAW;CAAY,CAAA;CAC1E,MAAM;EACL,UACC,kBAAA,GAAA,EAAA,UAAA;GACC,kBAAC,GAAD;IAAU,OAAO;cAAG;GAAgB,CAAA;GACpC,kBAAC,GAAD;IAAU,OAAO;cAAG;GAAiB,CAAA;GACrC,kBAAC,GAAD;IAAU,OAAO;cAAG;GAAgB,CAAA;EACnC,EAAA,CAAA;EAEH,QAAQ;CACT;AACD,GAGa,IAAoB;CAChC,cACC,kBAAC,OAAD,EAAA,UAAA;EACC,kBAAC,MAAD,EAAA,UAAI,gBAAiB,CAAA;EACrB,kBAAC,EAAK,WAAN;GAAgB,KAAA;GAAI,OAAO,EAAW;aAAtC;IACC,kBAAC,GAAD;KAAU,OAAO;eAAG;IAAW,CAAA;IAC/B,kBAAC,GAAD;KAAU,OAAO;eAAG;IAAW,CAAA;IAC/B,kBAAC,GAAD;KAAU,OAAO;eAAG;IAAW,CAAA;GAChB;;EAEhB,kBAAC,MAAD,EAAA,UAAI,cAAe,CAAA;EACnB,kBAAC,EAAK,WAAN;GAAgB,YAAA;GAAW,OAAO,EAAW;aAA7C;IACC,kBAAC,GAAD;KAAU,OAAO;eAAG;IAAW,CAAA;IAC/B,kBAAC,GAAD;KAAU,OAAO;eAAG;IAAW,CAAA;IAC/B,kBAAC,GAAD;KAAU,OAAO;eAAG;IAAW,CAAA;GAChB;;EAEhB,kBAAC,MAAD,EAAA,UAAI,SAAU,CAAA;EACd,kBAAC,EAAK,WAAN;GAAgB,QAAA;GAAO,OAAO,EAAW;aAAzC;IACC,kBAAC,GAAD;KAAU,OAAO;eAAG;IAAW,CAAA;IAC/B,kBAAC,GAAD;KAAU,OAAO;eAAG;IAAW,CAAA;IAC/B,kBAAC,GAAD;KAAU,OAAO;eAAG;IAAW,CAAA;GAChB;;EAEhB,kBAAC,MAAD,EAAA,UAAI,iBAAkB,CAAA;EACtB,kBAAC,EAAK,WAAN;GAAgB,eAAA;GAAc,OAAO,EAAW;aAAhD;IACC,kBAAC,GAAD;KAAU,OAAO;eAAG;IAAW,CAAA;IAC/B,kBAAC,GAAD;KAAU,OAAO;eAAG;IAAW,CAAA;IAC/B,kBAAC,GAAD;KAAU,OAAO;eAAG;IAAW,CAAA;GAChB;;CACZ,EAAA,CAAA;CAEN,MAAM,EAAE,UAAU,KAAA,EAAU;AAC7B,GAGa,IAAwB;CACpC,cACC,kBAAC,OAAD,EAAA,UACG;EAAC;EAAS;EAAU;EAAO;EAAW;EAAU;CAAQ,CAAC,CAAW,KAAK,MAC1E,kBAAC,OAAD,EAAA,UAAA,CACC,kBAAC,MAAD,EAAA,UAAA,CAAI,aAAU,CAAY,EAAA,CAAA,GAC1B,kBAAC,EAAK,WAAN;EAAgB,KAAA;EAAa;EAAS,OAAO,EAAW;YAAxD;GACC,kBAAC,GAAD;IAAU,OAAO;cAAG;GAAgB,CAAA;GACpC,kBAAC,GAAD;IAAU,OAAO;cAAG;GAAgB,CAAA;GACpC,kBAAC,GAAD;IAAU,OAAO;cAAG;GAAgB,CAAA;EACrB;GACZ,EAAA,GAPK,CAOL,CACL,EACG,CAAA;CAEN,MAAM,EAAE,UAAU,KAAA,EAAU;AAC7B,GAGa,IAAoB;CAChC,cACC,kBAAC,OAAD,EAAA,UACG;EAAC;EAAS;EAAU;EAAO;EAAW;CAAU,CAAC,CAAW,KAAK,MAClE,kBAAC,OAAD,EAAA,UAAA,CACC,kBAAC,MAAD,EAAA,UAAA,CAAI,WAAQ,CAAU,EAAA,CAAA,GACtB,kBAAC,EAAK,WAAN;EACC,KAAA;EACO;EACP,OAAO;GACN,GAAG,EAAW;GACd,QAAQ;EACT;YAND;GAOC,kBAAC,GAAD;IAAU,OAAO;cAChB,kBAAC,OAAD,EAAA,UAAK,QAAU,CAAA;GACN,CAAA;GACV,kBAAC,GAAD;IAAU,OAAO;cAChB,kBAAC,OAAD;KAAK,OAAO,EAAE,SAAS,OAAO;eAAG;IAAS,CAAA;GACjC,CAAA;GACV,kBAAC,GAAD;IAAU,OAAO;cAChB,kBAAC,OAAD;KAAK,OAAO,EAAE,SAAS,OAAO;eAAG;IAAW,CAAA;GACnC,CAAA;EACK;GACZ,EAAA,GAnBK,CAmBL,CACL,EACG,CAAA;CAEN,MAAM,EAAE,UAAU,KAAA,EAAU;AAC7B,GAGa,IAAkB;CAC9B,cACC,kBAAC,OAAD,EAAA,UAAA;EACC,kBAAC,MAAD,EAAA,UAAI,oBAAqB,CAAA;EACzB,kBAAC,EAAK,WAAN;GAAgB,KAAA;GAAI,QAAA;GAAO,OAAO,EAAW;aAC3C;IAAC;IAAG;IAAG;IAAG;IAAG;IAAG;IAAG;IAAG;IAAG;IAAG;IAAI;IAAI;GAAE,CAAC,CAAC,KAAK,MAC7C,kBAAC,GAAD;IAAkB,OAAO;cAAzB,CAA4B,SACrB,CACG;MAFK,CAEL,CACV;EACc,CAAA;EAEhB,kBAAC,MAAD,EAAA,UAAI,OAAQ,CAAA;EACZ,kBAAC,EAAK,WAAN;GAAgB,KAAA;GAAI,MAAA;GAAK,OAAO,EAAW;aACzC;IAAC;IAAG;IAAG;IAAG;IAAG;IAAG;IAAG;IAAG;IAAG;IAAG;IAAI;IAAI;GAAE,CAAC,CAAC,KAAK,MAC7C,kBAAC,GAAD;IAAkB,OAAO;cAAzB,CAA4B,SACrB,CACG;MAFK,CAEL,CACV;EACc,CAAA;EAEhB,kBAAC,MAAD,EAAA,UAAI,eAAgB,CAAA;EACpB,kBAAC,EAAK,WAAN;GAAgB,KAAA;GAAI,aAAA;GAAY,OAAO,EAAW;aAChD;IAAC;IAAG;IAAG;IAAG;IAAG;IAAG;IAAG;IAAG;IAAG;IAAG;IAAI;IAAI;GAAE,CAAC,CAAC,KAAK,MAC7C,kBAAC,GAAD;IAAkB,OAAO;cAAzB,CAA4B,SACrB,CACG;MAFK,CAEL,CACV;EACc,CAAA;CACZ,EAAA,CAAA;CAEN,MAAM,EAAE,UAAU,KAAA,EAAU;AAC7B,GAGa,IAAc;CAC1B,cACC,kBAAC,OAAD,EAAA,UAAA;EACG;GAAC;GAAM;GAAM;GAAM;GAAM;EAAI,CAAC,CAAW,KAAK,MAC/C,kBAAC,OAAD,EAAA,UAAA,CACC,kBAAC,MAAD,EAAA,UAAA,CAAI,SAAM,CAAQ,EAAA,CAAA,GAClB,kBAAC,EAAK,WAAN;GAAgB,KAAA;GAAI,MAAA;GAAU;GAAK,OAAO,EAAW;aACnD;IAAC;IAAG;IAAG;IAAG;IAAG;IAAG;GAAC,CAAC,CAAC,KAAK,MACxB,kBAAC,GAAD;IAAkB,OAAO;cAAzB,CAA4B,SACrB,CACG;MAFK,CAEL,CACV;EACc,CAAA,CACZ,EAAA,GATK,CASL,CACL;EAED,kBAAC,MAAD,EAAA,UAAI,gCAAiC,CAAA;EACrC,kBAAC,EAAK,WAAN;GAAgB,KAAA;GAAI,MAAA;GAAK,QAAO;GAAK,WAAU;GAAK,OAAO,EAAW;aACpE;IAAC;IAAG;IAAG;IAAG;IAAG;IAAG;IAAG;IAAG;IAAG;IAAG;IAAI;IAAI;GAAE,CAAC,CAAC,KAAK,MAC7C,kBAAC,GAAD;IAAkB,OAAO;cAAzB,CAA4B,SACrB,CACG;MAFK,CAEL,CACV;EACc,CAAA;CACZ,EAAA,CAAA;CAEN,MAAM,EAAE,UAAU,KAAA,EAAU;AAC7B,GAGa,IAAmB;CAC/B,cACC,kBAAC,OAAD,EAAA,UAAA;EACC,kBAAC,MAAD,EAAA,UAAI,kBAAmB,CAAA;EACvB,kBAAC,EAAK,WAAN;GAAgB,KAAA;GAAI,OAAO,EAAW;aAAtC;IACC,kBAAC,GAAD;KAAU,OAAO;eAAG;IAAiB,CAAA;IACrC,kBAAC,EAAK,MAAN;KAAW,MAAA;eACV,kBAAC,OAAD;MAAK,OAAO;OAAE,GAAG,EAAW;OAAM,iBAAiB,EAAa,CAAC;MAAE;gBAAG;KAAS,CAAA;IACrE,CAAA;IACX,kBAAC,GAAD;KAAU,OAAO;eAAG;IAAiB,CAAA;GACtB;;EAEhB,kBAAC,MAAD,EAAA,UAAI,oBAAqB,CAAA;EACzB,kBAAC,EAAK,WAAN;GAAgB,KAAA;GAAI,OAAO;IAAE,GAAG,EAAW;IAAW,OAAO;GAAQ;aAArE,CACC,kBAAC,EAAK,MAAN;IAAW,QAAQ;cAClB,kBAAC,OAAD;KACC,OAAO;MACN,GAAG,EAAW;MACd,iBAAiB,EAAa,CAAC;MAC/B,OAAO;KACR;eAAG;IAEC,CAAA;GACK,CAAA,GACX,kBAAC,EAAK,MAAN,EAAA,UACC,kBAAC,OAAD;IACC,OAAO;KACN,GAAG,EAAW;KACd,iBAAiB,EAAa,CAAC;KAC/B,OAAO;IACR;cAAG;GAEC,CAAA,EACK,CAAA,CACI;;EAEhB,kBAAC,MAAD,EAAA,UAAI,oBAAqB,CAAA;EACzB,kBAAC,EAAK,WAAN;GAAgB,KAAA;GAAI,OAAO,EAAW;aAAtC;IACC,kBAAC,EAAK,MAAN;KAAW,OAAA;eACV,kBAAC,OAAD;MAAK,OAAO;OAAE,GAAG,EAAW;OAAM,iBAAiB,EAAa,CAAC;MAAE;gBAAG;KAAU,CAAA;IACtE,CAAA;IACX,kBAAC,EAAK,MAAN;KAAW,OAAA;eACV,kBAAC,OAAD;MAAK,OAAO;OAAE,GAAG,EAAW;OAAM,iBAAiB,EAAa,CAAC;MAAE;gBAAG;KAAU,CAAA;IACtE,CAAA;IACX,kBAAC,EAAK,MAAN;KAAW,OAAA;eACV,kBAAC,OAAD;MAAK,OAAO;OAAE,GAAG,EAAW;OAAM,iBAAiB,EAAa,CAAC;MAAE;gBAAG;KAAU,CAAA;IACtE,CAAA;GACI;;CACZ,EAAA,CAAA;CAEN,MAAM,EAAE,UAAU,KAAA,EAAU;AAC7B,GAGa,IAAoB;CAChC,cACC,kBAAC,OAAD,EAAA,UAAA;EACC,kBAAC,MAAD,EAAA,UAAI,SAAU,CAAA;EACd,kBAAC,EAAK,YAAN;GAAiB,SAAQ;GAAS,OAAO;IAAE,GAAG,EAAW;IAAW,QAAQ;GAAQ;aACnF,kBAAC,GAAD;IAAU,OAAO;cAAG;GAA0B,CAAA;EAC9B,CAAA;EAEjB,kBAAC,MAAD,EAAA,UAAI,iBAAkB,CAAA;EACtB,kBAAC,EAAK,YAAN;GAAiB,SAAQ;GAAgB,OAAO,EAAW;aAA3D,CACC,kBAAC,GAAD;IAAU,OAAO;cAAG;GAAc,CAAA,GAClC,kBAAC,GAAD;IAAU,OAAO;cAAG;GAAe,CAAA,CACnB;;CACb,EAAA,CAAA;CAEN,MAAM,EAAE,UAAU,KAAA,EAAU;AAC7B,GAGa,IAAoB;CAChC,cACC,kBAAC,OAAD,EAAA,UAAA,CACC,kBAAC,KAAD,EAAA,UAAA;EAAG;EAEF,kBAAC,EAAK,WAAN;GAAgB,QAAA;GAAO,OAAM;GAAS,KAAI;GAAK,OAAO,EAAE,QAAQ,QAAQ;aAAxE,CACC,kBAAC,GAAD;IAAU,OAAO;cAAG;GAAgB,CAAA,GACpC,kBAAC,GAAD;IAAU,OAAO;cAAG;GAAc,CAAA,CACnB;;EAAC;CAEf,EAAA,CAAA,GAEH,kBAAC,KAAD,EAAA,UAAA;EAAG;EAEF,kBAAC,EAAK,WAAN;GAAgB,QAAA;GAAO,QAAA;GAAO,KAAI;GAAK,OAAO,EAAE,QAAQ,QAAQ;aAAhE,CACC,kBAAC,GAAD;IAAU,OAAO;cAAG;GAAkB,CAAA,GACtC,kBAAC,GAAD;IAAU,OAAO;cAAG;GAAgB,CAAA,CACrB;;EAAC;CAEf,EAAA,CAAA,CACC,EAAA,CAAA;CAEN,MAAM,EAAE,UAAU,KAAA,EAAU;AAC7B,GAGa,IAAmB;CAC/B,cACC,kBAAC,OAAD,EAAA,UAAA;EACC,kBAAC,MAAD,EAAA,UAAI,iBAAkB,CAAA;EACtB,kBAAC,EAAK,YAAN;GAAiB,SAAQ;GAAgB,OAAO,EAAW;aAA3D,CACC,kBAAC,EAAK,WAAN;IAAgB,KAAA;IAAI,OAAM;IAAS,KAAI;cAAvC;KACC,kBAAC,GAAD;MAAU,OAAO;gBAAG;KAAc,CAAA;KAClC,kBAAC,GAAD;MAAU,OAAO;gBAAG;KAAc,CAAA;KAClC,kBAAC,GAAD;MAAU,OAAO;gBAAG;KAAe,CAAA;KACnC,kBAAC,GAAD;MAAU,OAAO;gBAAG;KAAiB,CAAA;IACtB;OAChB,kBAAC,GAAD;IAAU,OAAO;cAAG;GAAe,CAAA,CACnB;;EAEjB,kBAAC,MAAD,EAAA,UAAI,cAAe,CAAA;EACnB,kBAAC,EAAK,WAAN;GAAgB,KAAA;GAAI,MAAA;GAAK,KAAI;GAAK,OAAO,EAAW;aAClD;IAAC;IAAG;IAAG;IAAG;GAAC,CAAC,CAAC,KAAK,MAClB,kBAAC,EAAK,MAAN;IAAmB,OAAA;IAAM,OAAO,EAAE,UAAU,QAAQ;cACnD,kBAAC,OAAD;KACC,OAAO;MACN,QAAQ;MACR,cAAc;MACd,SAAS;MACT,WAAW;MACX,iBAAiB,EAAa,CAAC;KAChC;eAPD,CAQC,kBAAC,MAAD,EAAA,UAAA,CAAI,SAAM,CAAM,EAAA,CAAA,GAChB,kBAAC,KAAD,EAAA,UAAG,yBAAyB,CAAA,CACxB;;GACK,GAZK,CAYL,CACX;EACc,CAAA;EAEhB,kBAAC,MAAD,EAAA,UAAI,cAAe,CAAA;EACnB,kBAAC,EAAK,WAAN;GAAgB,QAAA;GAAO,KAAI;GAAK,OAAO,EAAW;aAAlD;IACC,kBAAC,EAAK,WAAN;KAAgB,KAAA;KAAI,KAAI;eAAxB,CACC,kBAAC,EAAK,MAAN;MAAW,OAAA;gBACV,kBAAC,GAAD;OAAU,OAAO;iBAAG;MAAoB,CAAA;KAC9B,CAAA,GACX,kBAAC,EAAK,MAAN;MAAW,OAAA;gBACV,kBAAC,GAAD;OAAU,OAAO;iBAAG;MAAmB,CAAA;KAC7B,CAAA,CACI;;IAChB,kBAAC,GAAD;KAAU,OAAO;eAAG;IAAe,CAAA;IACnC,kBAAC,GAAD;KAAU,OAAO;eAAG;IAAiB,CAAA;GACtB;;CACZ,EAAA,CAAA;CAEN,MAAM,EAAE,UAAU,KAAA,EAAU;AAC7B"}