@webiny/admin-ui 0.0.0-unstable.e53eceafb5

package/Grid/Grid.d.ts

@@ -0,0 +1,75 @@
+import React from "react";
+import { type VariantProps } from "../utils";
+declare const columnVariants: (props?: ({
+    span?: "auto" | 2 | 1 | 3 | 4 | 8 | 5 | 6 | 10 | 7 | 12 | 9 | 11 | null | undefined;
+    offset?: 2 | 1 | 3 | 4 | 8 | 5 | 6 | 10 | 7 | 9 | 11 | null | undefined;
+    align?: "top" | "bottom" | "middle" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+interface ColumnProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof columnVariants> {
+    children?: React.ReactNode;
+}
+declare const Column: (({ span, align, children, className, offset, ...props }: ColumnProps) => React.JSX.Element) & {
+    original: ({ span, align, children, className, offset, ...props }: ColumnProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (({ span, align, children, className, offset, ...props }: ColumnProps) => React.JSX.Element) & {
+        original: ({ span, align, children, className, offset, ...props }: ColumnProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ span, align, children, className, offset, ...props }: ColumnProps) => React.JSX.Element) & {
+        original: ({ span, align, children, className, offset, ...props }: ColumnProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+declare const gridVariants: (props?: ({
+    gap?: "small" | "none" | "compact" | "comfortable" | "micro" | "spacious" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+interface GridProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof gridVariants> {
+    children: React.ReactElement<ColumnProps, typeof Column> | Array<React.ReactElement<ColumnProps, typeof Column>>;
+}
+declare const Grid: (({ gap, children, className, ...props }: GridProps) => React.JSX.Element) & {
+    original: ({ gap, children, className, ...props }: GridProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (({ gap, children, className, ...props }: GridProps) => React.JSX.Element) & {
+        original: ({ gap, children, className, ...props }: GridProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ gap, children, className, ...props }: GridProps) => React.JSX.Element) & {
+        original: ({ gap, children, className, ...props }: GridProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+} & {
+    Column: (({ span, align, children, className, offset, ...props }: ColumnProps) => React.JSX.Element) & {
+        original: ({ span, align, children, className, offset, ...props }: ColumnProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    } & {
+        original: (({ span, align, children, className, offset, ...props }: ColumnProps) => React.JSX.Element) & {
+            original: ({ span, align, children, className, offset, ...props }: ColumnProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        };
+        originalName: string;
+        displayName: string;
+    } & {
+        createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ span, align, children, className, offset, ...props }: ColumnProps) => React.JSX.Element) & {
+            original: ({ span, align, children, className, offset, ...props }: ColumnProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        }>) => (props: unknown) => React.JSX.Element;
+    };
+};
+export { Grid, type GridProps, type ColumnProps };

package/Grid/Grid.js

@@ -0,0 +1,93 @@
+import React from "react";
+import { cn, cva, withStaticProps, makeDecoratable } from "../utils";
+const columnVariants = cva("", {
+  variants: {
+    span: {
+      auto: "wby-col-auto",
+      1: "wby-col-span-1",
+      2: "wby-col-span-2",
+      3: "wby-col-span-3",
+      4: "wby-col-span-4",
+      5: "wby-col-span-5",
+      6: "wby-col-span-6",
+      7: "wby-col-span-7",
+      8: "wby-col-span-8",
+      9: "wby-col-span-9",
+      10: "wby-col-span-10",
+      11: "wby-col-span-11",
+      12: "wby-col-span-12"
+    },
+    offset: {
+      1: "wby-col-start-2",
+      2: "wby-col-start-3",
+      3: "wby-col-start-4",
+      4: "wby-col-start-5",
+      5: "wby-col-start-6",
+      6: "wby-col-start-7",
+      7: "wby-col-start-8",
+      8: "wby-col-start-9",
+      9: "wby-col-start-10",
+      10: "wby-col-start-11",
+      11: "wby-col-start-12"
+    },
+    align: {
+      top: "wby-self-start",
+      middle: "wby-self-center",
+      bottom: "wby-self-end"
+    }
+  },
+  defaultVariants: {
+    span: "auto"
+  }
+});
+const ColumnBase = ({
+  span,
+  align,
+  children,
+  className,
+  offset,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
+    className: cn(columnVariants({
+      span,
+      offset,
+      align
+    }), className)
+  }), children);
+};
+const Column = makeDecoratable("Column", ColumnBase);
+const gridVariants = cva("wby-grid", {
+  variants: {
+    gap: {
+      none: "wby-gap-0",
+      micro: "wby-gap-xs",
+      small: "wby-gap-sm",
+      compact: "wby-gap-md",
+      comfortable: "wby-gap-lg",
+      spacious: "wby-gap-xl"
+    }
+  },
+  defaultVariants: {
+    gap: "comfortable"
+  }
+});
+const GridBase = ({
+  gap,
+  children,
+  className,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
+    className: cn("wby-grid-cols-12", gridVariants({
+      gap
+    }), className)
+  }), children);
+};
+const DecoratableGrid = makeDecoratable("Grid", GridBase);
+const Grid = withStaticProps(DecoratableGrid, {
+  Column
+});
+export { Grid };
+
+//# sourceMappingURL=Grid.js.map

package/Grid/Grid.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","cn","cva","withStaticProps","makeDecoratable","columnVariants","variants","span","auto","offset","align","top","middle","bottom","defaultVariants","ColumnBase","children","className","props","createElement","Object","assign","Column","gridVariants","gap","none","micro","small","compact","comfortable","spacious","GridBase","DecoratableGrid","Grid"],"sources":["Grid.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, cva, withStaticProps, makeDecoratable, type VariantProps } from \"~/utils\";\n\nconst columnVariants = cva(\"\", {\n    variants: {\n        span: {\n            auto: \"wby-col-auto\",\n            1: \"wby-col-span-1\",\n            2: \"wby-col-span-2\",\n            3: \"wby-col-span-3\",\n            4: \"wby-col-span-4\",\n            5: \"wby-col-span-5\",\n            6: \"wby-col-span-6\",\n            7: \"wby-col-span-7\",\n            8: \"wby-col-span-8\",\n            9: \"wby-col-span-9\",\n            10: \"wby-col-span-10\",\n            11: \"wby-col-span-11\",\n            12: \"wby-col-span-12\"\n        },\n        offset: {\n            1: \"wby-col-start-2\",\n            2: \"wby-col-start-3\",\n            3: \"wby-col-start-4\",\n            4: \"wby-col-start-5\",\n            5: \"wby-col-start-6\",\n            6: \"wby-col-start-7\",\n            7: \"wby-col-start-8\",\n            8: \"wby-col-start-9\",\n            9: \"wby-col-start-10\",\n            10: \"wby-col-start-11\",\n            11: \"wby-col-start-12\"\n        },\n        align: {\n            top: \"wby-self-start\",\n            middle: \"wby-self-center\",\n            bottom: \"wby-self-end\"\n        }\n    },\n    defaultVariants: {\n        span: \"auto\"\n    }\n});\n\ninterface ColumnProps\n    extends React.HTMLAttributes<HTMLDivElement>,\n        VariantProps<typeof columnVariants> {\n    children?: React.ReactNode;\n}\n\nconst ColumnBase = ({ span, align, children, className, offset, ...props }: ColumnProps) => {\n    return (\n        <div {...props} className={cn(columnVariants({ span, offset, align }), className)}>\n            {children}\n        </div>\n    );\n};\n\nconst Column = makeDecoratable(\"Column\", ColumnBase);\n\nconst gridVariants = cva(\"wby-grid\", {\n    variants: {\n        gap: {\n            none: \"wby-gap-0\",\n            micro: \"wby-gap-xs\",\n            small: \"wby-gap-sm\",\n            compact: \"wby-gap-md\",\n            comfortable: \"wby-gap-lg\",\n            spacious: \"wby-gap-xl\"\n        }\n    },\n    defaultVariants: {\n        gap: \"comfortable\"\n    }\n});\n\ninterface GridProps\n    extends React.HTMLAttributes<HTMLDivElement>,\n        VariantProps<typeof gridVariants> {\n    children:\n        | React.ReactElement<ColumnProps, typeof Column>\n        | Array<React.ReactElement<ColumnProps, typeof Column>>;\n}\n\nconst GridBase = ({ gap, children, className, ...props }: GridProps) => {\n    return (\n        <div {...props} className={cn(\"wby-grid-cols-12\", gridVariants({ gap }), className)}>\n            {children}\n        </div>\n    );\n};\n\nconst DecoratableGrid = makeDecoratable(\"Grid\", GridBase);\n\nconst Grid = withStaticProps(DecoratableGrid, { Column });\n\nexport { Grid, type GridProps, type ColumnProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,EAAE,EAAEC,GAAG,EAAEC,eAAe,EAAEC,eAAe;AAElD,MAAMC,cAAc,GAAGH,GAAG,CAAC,EAAE,EAAE;EAC3BI,QAAQ,EAAE;IACNC,IAAI,EAAE;MACFC,IAAI,EAAE,cAAc;MACpB,CAAC,EAAE,gBAAgB;MACnB,CAAC,EAAE,gBAAgB;MACnB,CAAC,EAAE,gBAAgB;MACnB,CAAC,EAAE,gBAAgB;MACnB,CAAC,EAAE,gBAAgB;MACnB,CAAC,EAAE,gBAAgB;MACnB,CAAC,EAAE,gBAAgB;MACnB,CAAC,EAAE,gBAAgB;MACnB,CAAC,EAAE,gBAAgB;MACnB,EAAE,EAAE,iBAAiB;MACrB,EAAE,EAAE,iBAAiB;MACrB,EAAE,EAAE;IACR,CAAC;IACDC,MAAM,EAAE;MACJ,CAAC,EAAE,iBAAiB;MACpB,CAAC,EAAE,iBAAiB;MACpB,CAAC,EAAE,iBAAiB;MACpB,CAAC,EAAE,iBAAiB;MACpB,CAAC,EAAE,iBAAiB;MACpB,CAAC,EAAE,iBAAiB;MACpB,CAAC,EAAE,iBAAiB;MACpB,CAAC,EAAE,iBAAiB;MACpB,CAAC,EAAE,kBAAkB;MACrB,EAAE,EAAE,kBAAkB;MACtB,EAAE,EAAE;IACR,CAAC;IACDC,KAAK,EAAE;MACHC,GAAG,EAAE,gBAAgB;MACrBC,MAAM,EAAE,iBAAiB;MACzBC,MAAM,EAAE;IACZ;EACJ,CAAC;EACDC,eAAe,EAAE;IACbP,IAAI,EAAE;EACV;AACJ,CAAC,CAAC;AAQF,MAAMQ,UAAU,GAAGA,CAAC;EAAER,IAAI;EAAEG,KAAK;EAAEM,QAAQ;EAAEC,SAAS;EAAER,MAAM;EAAE,GAAGS;AAAmB,CAAC,KAAK;EACxF,oBACIlB,KAAA,CAAAmB,aAAA,QAAAC,MAAA,CAAAC,MAAA,KAASH,KAAK;IAAED,SAAS,EAAEhB,EAAE,CAACI,cAAc,CAAC;MAAEE,IAAI;MAAEE,MAAM;MAAEC;IAAM,CAAC,CAAC,EAAEO,SAAS;EAAE,IAC7ED,QACA,CAAC;AAEd,CAAC;AAED,MAAMM,MAAM,GAAGlB,eAAe,CAAC,QAAQ,EAAEW,UAAU,CAAC;AAEpD,MAAMQ,YAAY,GAAGrB,GAAG,CAAC,UAAU,EAAE;EACjCI,QAAQ,EAAE;IACNkB,GAAG,EAAE;MACDC,IAAI,EAAE,WAAW;MACjBC,KAAK,EAAE,YAAY;MACnBC,KAAK,EAAE,YAAY;MACnBC,OAAO,EAAE,YAAY;MACrBC,WAAW,EAAE,YAAY;MACzBC,QAAQ,EAAE;IACd;EACJ,CAAC;EACDhB,eAAe,EAAE;IACbU,GAAG,EAAE;EACT;AACJ,CAAC,CAAC;AAUF,MAAMO,QAAQ,GAAGA,CAAC;EAAEP,GAAG;EAAER,QAAQ;EAAEC,SAAS;EAAE,GAAGC;AAAiB,CAAC,KAAK;EACpE,oBACIlB,KAAA,CAAAmB,aAAA,QAAAC,MAAA,CAAAC,MAAA,KAASH,KAAK;IAAED,SAAS,EAAEhB,EAAE,CAAC,kBAAkB,EAAEsB,YAAY,CAAC;MAAEC;IAAI,CAAC,CAAC,EAAEP,SAAS;EAAE,IAC/ED,QACA,CAAC;AAEd,CAAC;AAED,MAAMgB,eAAe,GAAG5B,eAAe,CAAC,MAAM,EAAE2B,QAAQ,CAAC;AAEzD,MAAME,IAAI,GAAG9B,eAAe,CAAC6B,eAAe,EAAE;EAAEV;AAAO,CAAC,CAAC;AAEzD,SAASW,IAAI","ignoreList":[]}

package/Grid/Grid.mdx

@@ -0,0 +1,249 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as GridStories from './Grid.stories';
+
+<Meta of={GridStories} />
+
+# Grid
+
+Grid structures layouts with clarity and consistency, organizing content, maintaining alignment, and ensuring a seamless experience across screen sizes. Settings include column configuration, gutter spacing, and responsive behavior.
+
+<Canvas of={GridStories.Documentation}  source={ { code: `
+import React from "react";
+import { Grid } from "@webiny/admin-ui";
+
+const GridExample = () => {
+    return (
+        <Grid gap={"comfortable"} className={"wby-bg-neutral-light wby-p-4"}>
+            <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                Col 1
+            </Grid.Column>
+            <Grid.Column span={3} className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                Col 2<br/>Span: 3
+            </Grid.Column>
+            <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                Col 3
+            </Grid.Column>
+            <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                Col 4
+            </Grid.Column>
+            <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                Col 5
+            </Grid.Column>
+            <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                Col 6
+            </Grid.Column>
+            <Grid.Column span={2} className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                Col 7<br/>Span: 2
+            </Grid.Column>
+            <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                Col 8
+            </Grid.Column>
+            <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                Col 9
+            </Grid.Column>
+        </Grid>
+    );
+};
+
+export default GridExample;
+
+` } }
+        additionalActions={[
+            {
+                title: 'Open in GitHub',
+                onClick: () => {
+                    window.open(
+                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Grid/Grid.tsx',
+                        '_blank'
+                    );
+                },
+            }
+        ]}
+/>
+
+<Controls of={GridStories.Documentation}/>
+
+## Usage
+
+```tsx
+import React from "react";
+import { Grid } from "@webiny/admin-ui";
+
+const GridExample = () => {
+    return (
+        <Grid gap={"comfortable"} className={"wby-bg-neutral-light wby-p-4"}>
+            <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                Col 1
+            </Grid.Column>
+            <Grid.Column span={3} className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                Col 2<br/>Span: 3
+            </Grid.Column>
+            <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                Col 3
+            </Grid.Column>
+            <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                Col 4
+            </Grid.Column>
+            <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                Col 5
+            </Grid.Column>
+            <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                Col 6
+            </Grid.Column>
+            <Grid.Column span={2} className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                Col 7<br/>Span: 2
+            </Grid.Column>
+            <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                Col 8
+            </Grid.Column>
+            <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                Col 9
+            </Grid.Column>
+        </Grid>
+    );
+};
+
+export default GridExample;
+```
+
+## Examples
+
+### Spacious Gap
+To have more spacing between grid columns, you can use the `gap` prop and set it to `spacious`.
+
+<Canvas of={GridStories.WithGapSpacious}  source={ { code: `
+import React from "react";
+import { Grid } from "@webiny/admin-ui";
+
+const GridSpaciousExample = () => {
+    return (
+        <Grid gap={"spacious"} className={"wby-bg-neutral-light wby-p-4"}>
+            <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                Col 1
+            </Grid.Column>
+            <Grid.Column span={3} className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                Col 2<br/>Span: 3
+            </Grid.Column>
+            <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                Col 3
+            </Grid.Column>
+            <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                Col 4
+            </Grid.Column>
+            <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                Col 5
+            </Grid.Column>
+            <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                Col 6
+            </Grid.Column>
+            <Grid.Column span={2} className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                Col 7<br/>Span: 2
+            </Grid.Column>
+            <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                Col 8
+            </Grid.Column>
+            <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                Col 9
+            </Grid.Column>
+        </Grid>
+    );
+};
+
+    export default GridSpaciousExample;
+
+` } }
+/>
+
+### With Offset
+With Offset, you can create a grid with a specific offset. The offset is applied to columns, e.g. `<Grid.Column span={8} offset={2}/>`. Please refer to the example - click on **Show code** to see code example.
+
+<Canvas of={GridStories.WithOffset}  source={ { code: `
+import React from "react";
+import { Grid } from "@webiny/admin-ui";
+
+const GridWithOffsetExample = () => {
+    return (
+        <Grid gap={"spacious"} className={"wby-bg-neutral-light wby-p-4"}>
+
+                {/* Row 1 */}
+                <Grid.Column span={8} offset={2} className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                    Col 1<br/>
+                    span: 8<br/>
+                    offset: 2
+                </Grid.Column>
+                <Grid.Column span={2} />
+
+                {/* Row 2 */}
+                <Grid.Column span={8} offset={4} className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                    Col 1<br/>
+                    span: 8<br/>
+                    offset: 4
+                </Grid.Column>
+
+                {/* Row 3 */}
+                <Grid.Column span={10} offset={1} className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                    Col 1<br/>
+                    span: 8<br/>
+                    offset: 4
+                </Grid.Column>
+                <Grid.Column span={1} />
+
+                {/* Row 4 */}
+                <Grid.Column span={12} className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                    Col 1<br/>
+                    span: 12
+                </Grid.Column>
+            </Grid>
+        );
+    };
+
+    export default GridWithOffsetExample;
+
+` } }
+/>
+
+## Horizontal Grids
+The grids within the Webiny Design System behave as fixed and fluid elements relevant to the elements on the page.
+
+### Grid types
+Webiny Design System use two types of grids: fluid and fixed. Both grid types use breakpoints to determine whether the layout needs to change between viewport sizes.
+
+### Fluid
+The fluid grid stretches across an area to fill all available space within the screen, part of the screen or within the specific element if needed.
+
+<img src="/images/storybook/grid/fluid.png" alt="Fluid"/>
+
+<img src="/images/storybook/grid/fluid-dashboard.png" alt="Fluid Dashboard"/>
+
+
+### Fixed
+The fixed grid applies the ideal maximum width to page or page element.
+
+<img src="/images/storybook/grid/fixed.png" alt="Fixed"/>
+
+<img src="/images/storybook/grid/fixed-dashboard.png" alt="Fixed Dashboard"/>
+
+## Grid Gutter Sizes
+We considered using two main sizes for grid application, to be used dependent on the content type.
+
+### Comfortable (Default)
+<img src="/images/storybook/grid/grid-gutter-size-comfortable.png" alt="Comfortable (Default)"/>
+
+### Spacious
+<img src="/images/storybook/grid/grid-gutter-size-spacious.png" alt="Spacious"/>
+
+## Breakpoints
+A breakpoint marks the point where a website’s layout adapts to provide the best user experience. In responsive design, the range of each breakpoint defines the ideal number of columns for a given viewport size, along with the suggested widths for margins and gutters.
+
+<img src="/images/storybook/grid/breakpoints.png" alt="Breakpoints"/>
+
+## Column Spans
+Content should be distributed across a minimum of 3 columns, with the option to extend up to 12 columns. To achieve a range of layouts, vary the number of columns used, allowing for flexible design across different breakpoints.
+
+<img src="/images/storybook/grid/column-spans.png" alt="Column Spans"/>
+
+## Column Offsets
+Content isn't required to span the full 12 columns. It can cover a smaller number of columns, creating a layout where the content is centered within a 12-column grid.
+
+<img src="/images/storybook/grid/column-offsets.png" alt="Column Offsets"/>

package/Grid/Grid.stories.d.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Grid } from "./Grid";
+declare const meta: Meta<typeof Grid>;
+export default meta;
+type Story = StoryObj<typeof Grid>;
+export declare const Default: Story;
+export declare const WithGapNone: Story;
+export declare const WithGapMicro: Story;
+export declare const WithGapSmall: Story;
+export declare const WithGapCompact: Story;
+export declare const WithGapComfortable: Story;
+export declare const WithGapSpacious: Story;
+export declare const WithOffset: Story;
+export declare const Documentation: Story;

package/Grid/Grid.stories.js

@@ -0,0 +1,144 @@
+import React from "react";
+import { Grid } from "./Grid";
+import { StyledColumn } from "./stories/StyledColumn";
+const meta = {
+  title: "Components/Grid",
+  component: Grid,
+  parameters: {
+    layout: "padded"
+  }
+};
+export default meta;
+export const Default = {
+  args: {
+    className: "wby-bg-neutral-light wby-p-md wby-w-full",
+    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledColumn, {
+      index: 1
+    }), /*#__PURE__*/React.createElement(StyledColumn, {
+      index: 2,
+      span: 3
+    }), /*#__PURE__*/React.createElement(StyledColumn, {
+      index: 3
+    }), /*#__PURE__*/React.createElement(StyledColumn, {
+      index: 4
+    }), /*#__PURE__*/React.createElement(StyledColumn, {
+      index: 5
+    }), /*#__PURE__*/React.createElement(StyledColumn, {
+      index: 6
+    }), /*#__PURE__*/React.createElement(StyledColumn, {
+      index: 7,
+      span: 2
+    }), /*#__PURE__*/React.createElement(StyledColumn, {
+      index: 8
+    }), /*#__PURE__*/React.createElement(StyledColumn, {
+      index: 9
+    }))
+  }
+};
+export const WithGapNone = {
+  args: {
+    ...Default.args,
+    gap: "none"
+  }
+};
+export const WithGapMicro = {
+  args: {
+    ...Default.args,
+    gap: "micro"
+  }
+};
+export const WithGapSmall = {
+  args: {
+    ...Default.args,
+    gap: "small"
+  }
+};
+export const WithGapCompact = {
+  args: {
+    ...Default.args,
+    gap: "compact"
+  }
+};
+export const WithGapComfortable = {
+  args: {
+    ...Default.args,
+    gap: "comfortable"
+  }
+};
+export const WithGapSpacious = {
+  args: {
+    ...Default.args,
+    gap: "spacious"
+  }
+};
+export const WithOffset = {
+  parameters: {
+    layout: "padded"
+  },
+  args: {
+    ...Default.args,
+    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledColumn, {
+      span: 8,
+      offset: 2,
+      index: 1
+    }), /*#__PURE__*/React.createElement(Grid.Column, {
+      span: 2
+    }), /*#__PURE__*/React.createElement(StyledColumn, {
+      span: 8,
+      offset: 4,
+      index: 1
+    }), /*#__PURE__*/React.createElement(StyledColumn, {
+      span: 10,
+      offset: 1,
+      index: 1
+    }), /*#__PURE__*/React.createElement(Grid.Column, {
+      span: 1
+    }), /*#__PURE__*/React.createElement(StyledColumn, {
+      span: 12,
+      index: 1
+    }))
+  }
+};
+export const Documentation = {
+  render: args => {
+    return /*#__PURE__*/React.createElement(Grid, args, /*#__PURE__*/React.createElement(Grid.Column, {
+      className: "wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm"
+    }, "Col 1"), /*#__PURE__*/React.createElement(Grid.Column, {
+      className: "wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm",
+      span: 3
+    }, "Col 2", /*#__PURE__*/React.createElement("br", null), "Span: 3"), /*#__PURE__*/React.createElement(Grid.Column, {
+      className: "wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm"
+    }, "Col 3"), /*#__PURE__*/React.createElement(Grid.Column, {
+      className: "wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm"
+    }, "Col 4"), /*#__PURE__*/React.createElement(Grid.Column, {
+      className: "wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm"
+    }, "Col 5"), /*#__PURE__*/React.createElement(Grid.Column, {
+      className: "wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm"
+    }, "Col 6"), /*#__PURE__*/React.createElement(Grid.Column, {
+      className: "wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm",
+      span: 2
+    }, "Col 7", /*#__PURE__*/React.createElement("br", null), "Span: 2"), /*#__PURE__*/React.createElement(Grid.Column, {
+      className: "wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm"
+    }, "Col 8"), /*#__PURE__*/React.createElement(Grid.Column, {
+      className: "wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm"
+    }, "Col 9"));
+  },
+  args: {
+    gap: "comfortable",
+    className: "wby-bg-neutral-light wby-p-md wby-w-full"
+  },
+  argTypes: {
+    gap: {
+      description: "Spacing between grid columns",
+      control: "select",
+      options: ["none", "micro", "small", "compact", "comfortable", "spacious"],
+      defaultValue: "comfortable"
+    },
+    className: {
+      description: "Additional CSS class names. You can pass multiple class names that will be applied to Grid.",
+      control: "text"
+    }
+  }
+};
+
+//# sourceMappingURL=Grid.stories.js.map

package/Grid/Grid.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Grid","StyledColumn","meta","title","component","parameters","layout","Default","args","className","children","createElement","Fragment","index","span","WithGapNone","gap","WithGapMicro","WithGapSmall","WithGapCompact","WithGapComfortable","WithGapSpacious","WithOffset","offset","Column","Documentation","render","argTypes","description","control","options","defaultValue"],"sources":["Grid.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\n\nimport { Grid } from \"./Grid\";\nimport { StyledColumn } from \"./stories/StyledColumn\";\n\nconst meta: Meta<typeof Grid> = {\n    title: \"Components/Grid\",\n    component: Grid,\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Grid>;\n\nexport const Default: Story = {\n    args: {\n        className: \"wby-bg-neutral-light wby-p-md wby-w-full\",\n        children: (\n            <>\n                <StyledColumn index={1} />\n                <StyledColumn index={2} span={3} />\n                <StyledColumn index={3} />\n                <StyledColumn index={4} />\n                <StyledColumn index={5} />\n                <StyledColumn index={6} />\n                <StyledColumn index={7} span={2} />\n                <StyledColumn index={8} />\n                <StyledColumn index={9} />\n            </>\n        )\n    }\n};\n\nexport const WithGapNone: Story = {\n    args: {\n        ...Default.args,\n        gap: \"none\"\n    }\n};\n\nexport const WithGapMicro: Story = {\n    args: {\n        ...Default.args,\n        gap: \"micro\"\n    }\n};\n\nexport const WithGapSmall: Story = {\n    args: {\n        ...Default.args,\n        gap: \"small\"\n    }\n};\n\nexport const WithGapCompact: Story = {\n    args: {\n        ...Default.args,\n        gap: \"compact\"\n    }\n};\n\nexport const WithGapComfortable: Story = {\n    args: {\n        ...Default.args,\n        gap: \"comfortable\"\n    }\n};\n\nexport const WithGapSpacious: Story = {\n    args: {\n        ...Default.args,\n        gap: \"spacious\"\n    }\n};\n\nexport const WithOffset: Story = {\n    parameters: {\n        layout: \"padded\"\n    },\n    args: {\n        ...Default.args,\n        children: (\n            <>\n                {/* Row 1 */}\n                <StyledColumn span={8} offset={2} index={1} />\n                <Grid.Column span={2} />\n\n                {/* Row 2 */}\n                <StyledColumn span={8} offset={4} index={1} />\n\n                {/* Row 3 */}\n                <StyledColumn span={10} offset={1} index={1} />\n                <Grid.Column span={1} />\n\n                {/* Row 4 */}\n                <StyledColumn span={12} index={1} />\n            </>\n        )\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        return (\n            <Grid {...args}>\n                <Grid.Column className=\"wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm\">\n                    Col 1\n                </Grid.Column>\n                <Grid.Column\n                    className=\"wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm\"\n                    span={3}\n                >\n                    Col 2<br />\n                    Span: 3\n                </Grid.Column>\n                <Grid.Column className=\"wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm\">\n                    Col 3\n                </Grid.Column>\n                <Grid.Column className=\"wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm\">\n                    Col 4\n                </Grid.Column>\n                <Grid.Column className=\"wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm\">\n                    Col 5\n                </Grid.Column>\n                <Grid.Column className=\"wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm\">\n                    Col 6\n                </Grid.Column>\n                <Grid.Column\n                    className=\"wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm\"\n                    span={2}\n                >\n                    Col 7<br />\n                    Span: 2\n                </Grid.Column>\n                <Grid.Column className=\"wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm\">\n                    Col 8\n                </Grid.Column>\n                <Grid.Column className=\"wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm\">\n                    Col 9\n                </Grid.Column>\n            </Grid>\n        );\n    },\n    args: {\n        gap: \"comfortable\",\n        className: \"wby-bg-neutral-light wby-p-md wby-w-full\"\n    },\n    argTypes: {\n        gap: {\n            description: \"Spacing between grid columns\",\n            control: \"select\",\n            options: [\"none\", \"micro\", \"small\", \"compact\", \"comfortable\", \"spacious\"],\n            defaultValue: \"comfortable\"\n        },\n        className: {\n            description:\n                \"Additional CSS class names. You can pass multiple class names that will be applied to Grid.\",\n            control: \"text\"\n        }\n    }\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAGzB,SAASC,IAAI;AACb,SAASC,YAAY;AAErB,MAAMC,IAAuB,GAAG;EAC5BC,KAAK,EAAE,iBAAiB;EACxBC,SAAS,EAAEJ,IAAI;EACfK,UAAU,EAAE;IACRC,MAAM,EAAE;EACZ;AACJ,CAAC;AAED,eAAeJ,IAAI;AAInB,OAAO,MAAMK,OAAc,GAAG;EAC1BC,IAAI,EAAE;IACFC,SAAS,EAAE,0CAA0C;IACrDC,QAAQ,eACJX,KAAA,CAAAY,aAAA,CAAAZ,KAAA,CAAAa,QAAA,qBACIb,KAAA,CAAAY,aAAA,CAACV,YAAY;MAACY,KAAK,EAAE;IAAE,CAAE,CAAC,eAC1Bd,KAAA,CAAAY,aAAA,CAACV,YAAY;MAACY,KAAK,EAAE,CAAE;MAACC,IAAI,EAAE;IAAE,CAAE,CAAC,eACnCf,KAAA,CAAAY,aAAA,CAACV,YAAY;MAACY,KAAK,EAAE;IAAE,CAAE,CAAC,eAC1Bd,KAAA,CAAAY,aAAA,CAACV,YAAY;MAACY,KAAK,EAAE;IAAE,CAAE,CAAC,eAC1Bd,KAAA,CAAAY,aAAA,CAACV,YAAY;MAACY,KAAK,EAAE;IAAE,CAAE,CAAC,eAC1Bd,KAAA,CAAAY,aAAA,CAACV,YAAY;MAACY,KAAK,EAAE;IAAE,CAAE,CAAC,eAC1Bd,KAAA,CAAAY,aAAA,CAACV,YAAY;MAACY,KAAK,EAAE,CAAE;MAACC,IAAI,EAAE;IAAE,CAAE,CAAC,eACnCf,KAAA,CAAAY,aAAA,CAACV,YAAY;MAACY,KAAK,EAAE;IAAE,CAAE,CAAC,eAC1Bd,KAAA,CAAAY,aAAA,CAACV,YAAY;MAACY,KAAK,EAAE;IAAE,CAAE,CAC3B;EAEV;AACJ,CAAC;AAED,OAAO,MAAME,WAAkB,GAAG;EAC9BP,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfQ,GAAG,EAAE;EACT;AACJ,CAAC;AAED,OAAO,MAAMC,YAAmB,GAAG;EAC/BT,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfQ,GAAG,EAAE;EACT;AACJ,CAAC;AAED,OAAO,MAAME,YAAmB,GAAG;EAC/BV,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfQ,GAAG,EAAE;EACT;AACJ,CAAC;AAED,OAAO,MAAMG,cAAqB,GAAG;EACjCX,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfQ,GAAG,EAAE;EACT;AACJ,CAAC;AAED,OAAO,MAAMI,kBAAyB,GAAG;EACrCZ,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfQ,GAAG,EAAE;EACT;AACJ,CAAC;AAED,OAAO,MAAMK,eAAsB,GAAG;EAClCb,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfQ,GAAG,EAAE;EACT;AACJ,CAAC;AAED,OAAO,MAAMM,UAAiB,GAAG;EAC7BjB,UAAU,EAAE;IACRC,MAAM,EAAE;EACZ,CAAC;EACDE,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfE,QAAQ,eACJX,KAAA,CAAAY,aAAA,CAAAZ,KAAA,CAAAa,QAAA,qBAEIb,KAAA,CAAAY,aAAA,CAACV,YAAY;MAACa,IAAI,EAAE,CAAE;MAACS,MAAM,EAAE,CAAE;MAACV,KAAK,EAAE;IAAE,CAAE,CAAC,eAC9Cd,KAAA,CAAAY,aAAA,CAACX,IAAI,CAACwB,MAAM;MAACV,IAAI,EAAE;IAAE,CAAE,CAAC,eAGxBf,KAAA,CAAAY,aAAA,CAACV,YAAY;MAACa,IAAI,EAAE,CAAE;MAACS,MAAM,EAAE,CAAE;MAACV,KAAK,EAAE;IAAE,CAAE,CAAC,eAG9Cd,KAAA,CAAAY,aAAA,CAACV,YAAY;MAACa,IAAI,EAAE,EAAG;MAACS,MAAM,EAAE,CAAE;MAACV,KAAK,EAAE;IAAE,CAAE,CAAC,eAC/Cd,KAAA,CAAAY,aAAA,CAACX,IAAI,CAACwB,MAAM;MAACV,IAAI,EAAE;IAAE,CAAE,CAAC,eAGxBf,KAAA,CAAAY,aAAA,CAACV,YAAY;MAACa,IAAI,EAAE,EAAG;MAACD,KAAK,EAAE;IAAE,CAAE,CACrC;EAEV;AACJ,CAAC;AAED,OAAO,MAAMY,aAAoB,GAAG;EAChCC,MAAM,EAAElB,IAAI,IAAI;IACZ,oBACIT,KAAA,CAAAY,aAAA,CAACX,IAAI,EAAKQ,IAAI,eACVT,KAAA,CAAAY,aAAA,CAACX,IAAI,CAACwB,MAAM;MAACf,SAAS,EAAC;IAA0E,GAAC,OAErF,CAAC,eACdV,KAAA,CAAAY,aAAA,CAACX,IAAI,CAACwB,MAAM;MACRf,SAAS,EAAC,0EAA0E;MACpFK,IAAI,EAAE;IAAE,GACX,OACQ,eAAAf,KAAA,CAAAY,aAAA,WAAK,CAAC,WAEF,CAAC,eACdZ,KAAA,CAAAY,aAAA,CAACX,IAAI,CAACwB,MAAM;MAACf,SAAS,EAAC;IAA0E,GAAC,OAErF,CAAC,eACdV,KAAA,CAAAY,aAAA,CAACX,IAAI,CAACwB,MAAM;MAACf,SAAS,EAAC;IAA0E,GAAC,OAErF,CAAC,eACdV,KAAA,CAAAY,aAAA,CAACX,IAAI,CAACwB,MAAM;MAACf,SAAS,EAAC;IAA0E,GAAC,OAErF,CAAC,eACdV,KAAA,CAAAY,aAAA,CAACX,IAAI,CAACwB,MAAM;MAACf,SAAS,EAAC;IAA0E,GAAC,OAErF,CAAC,eACdV,KAAA,CAAAY,aAAA,CAACX,IAAI,CAACwB,MAAM;MACRf,SAAS,EAAC,0EAA0E;MACpFK,IAAI,EAAE;IAAE,GACX,OACQ,eAAAf,KAAA,CAAAY,aAAA,WAAK,CAAC,WAEF,CAAC,eACdZ,KAAA,CAAAY,aAAA,CAACX,IAAI,CAACwB,MAAM;MAACf,SAAS,EAAC;IAA0E,GAAC,OAErF,CAAC,eACdV,KAAA,CAAAY,aAAA,CAACX,IAAI,CAACwB,MAAM;MAACf,SAAS,EAAC;IAA0E,GAAC,OAErF,CACX,CAAC;EAEf,CAAC;EACDD,IAAI,EAAE;IACFQ,GAAG,EAAE,aAAa;IAClBP,SAAS,EAAE;EACf,CAAC;EACDkB,QAAQ,EAAE;IACNX,GAAG,EAAE;MACDY,WAAW,EAAE,8BAA8B;MAC3CC,OAAO,EAAE,QAAQ;MACjBC,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,UAAU,CAAC;MACzEC,YAAY,EAAE;IAClB,CAAC;IACDtB,SAAS,EAAE;MACPmB,WAAW,EACP,6FAA6F;MACjGC,OAAO,EAAE;IACb;EACJ;AACJ,CAAC","ignoreList":[]}

package/Grid/index.d.ts

@@ -0,0 +1 @@
+export * from "./Grid";

package/Grid/index.js

@@ -0,0 +1,3 @@
+export * from "./Grid";
+
+//# sourceMappingURL=index.js.map

package/Grid/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Grid\";\n"],"mappings":"AAAA","ignoreList":[]}

package/Grid/stories/StyledColumn.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { type ColumnProps } from "..";
+export interface StyledColumnProps extends ColumnProps {
+    index: number;
+}
+export declare const StyledColumn: (props: StyledColumnProps) => React.JSX.Element;

package/Grid/stories/StyledColumn.js

@@ -0,0 +1,7 @@
+import React from "react";
+import { Grid } from "./..";
+export const StyledColumn = props => /*#__PURE__*/React.createElement(Grid.Column, Object.assign({
+  className: "wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm"
+}, props), "Col ", props.index, props.span && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("code", null, "span: ", props.span)), props.offset && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("code", null, "offset: ", props.offset)));
+
+//# sourceMappingURL=StyledColumn.js.map

package/Grid/stories/StyledColumn.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Grid","StyledColumn","props","createElement","Column","Object","assign","className","index","span","Fragment","offset"],"sources":["StyledColumn.tsx"],"sourcesContent":["import React from \"react\";\nimport { type ColumnProps, Grid } from \"~/Grid\";\n\nexport interface StyledColumnProps extends ColumnProps {\n    index: number;\n}\n\nexport const StyledColumn = (props: StyledColumnProps) => (\n    <Grid.Column\n        className=\"wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm\"\n        {...props}\n    >\n        Col {props.index}\n        {props.span && (\n            <>\n                <br />\n                <code>span: {props.span}</code>\n            </>\n        )}\n        {props.offset && (\n            <>\n                <br />\n                <code>offset: {props.offset}</code>\n            </>\n        )}\n    </Grid.Column>\n);\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAA2BC,IAAI;AAM/B,OAAO,MAAMC,YAAY,GAAIC,KAAwB,iBACjDH,KAAA,CAAAI,aAAA,CAACH,IAAI,CAACI,MAAM,EAAAC,MAAA,CAAAC,MAAA;EACRC,SAAS,EAAC;AAA0E,GAChFL,KAAK,GACZ,MACO,EAACA,KAAK,CAACM,KAAK,EACfN,KAAK,CAACO,IAAI,iBACPV,KAAA,CAAAI,aAAA,CAAAJ,KAAA,CAAAW,QAAA,qBACIX,KAAA,CAAAI,aAAA,WAAK,CAAC,eACNJ,KAAA,CAAAI,aAAA,eAAM,QAAM,EAACD,KAAK,CAACO,IAAW,CAChC,CACL,EACAP,KAAK,CAACS,MAAM,iBACTZ,KAAA,CAAAI,aAAA,CAAAJ,KAAA,CAAAW,QAAA,qBACIX,KAAA,CAAAI,aAAA,WAAK,CAAC,eACNJ,KAAA,CAAAI,aAAA,eAAM,UAAQ,EAACD,KAAK,CAACS,MAAa,CACpC,CAEG,CAChB","ignoreList":[]}