@simplybusiness/mobius 3.8.0 → 3.9.1

package/dist/cjs/components/Flex/Flex.stories.js

@@ -0,0 +1,151 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColumnLayout = exports.RowLayout = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Flex_1 = require("./Flex");
+const Box_1 = require("../Box");
+const excludeControls_1 = require("../../utils/excludeControls");
+const sizeOptions = [
+    "",
+    "var(--size-0)",
+    "var(--size-10)",
+    "var(--size-20)",
+    "var(--size-30)",
+    "var(--size-40)",
+    "var(--size-50)",
+    "var(--size-60)",
+    "var(--size-70)",
+    "var(--size-80)",
+    "var(--size-90)",
+    "var(--size-100)",
+];
+const Card = (_a) => {
+    var { children, style } = _a, props = __rest(_a, ["children", "style"]);
+    return ((0, jsx_runtime_1.jsx)(Box_1.Box, Object.assign({ style: Object.assign({ borderRadius: "4px", padding: "8px", backgroundColor: "#dddddd", width: "100%" }, style) }, props, { children: children })));
+};
+exports.default = {
+    title: "Layout/Flex",
+    component: Flex_1.Flex,
+    argTypes: Object.assign({ flexDirection: {
+            control: { type: "select" },
+            options: ["", "row", "row-reverse", "column", "column-reverse"],
+        }, flexWrap: {
+            control: { type: "select" },
+            options: ["", "nowrap", "wrap", "wrap-reverse"],
+        }, flexGrow: {
+            control: { type: "text" },
+            if: {
+                arg: "flex",
+                truthy: false,
+            },
+        }, flex: {
+            control: { type: "text" },
+        }, justifyContent: {
+            control: { type: "select" },
+            options: [
+                "",
+                "space-around",
+                "space-between",
+                "space-evenly",
+                "stretch",
+                "center",
+                "end",
+                "flex-end",
+                "flex-start",
+                "start",
+                "left",
+                "normal",
+                "right",
+            ],
+        }, alignItems: {
+            control: { type: "select" },
+            options: [
+                "",
+                "center",
+                "end",
+                "flex-end",
+                "flex-start",
+                "self-end",
+                "self-start",
+                "start",
+                "baseline",
+                "normal",
+                "stretch",
+            ],
+        }, alignContent: {
+            control: { type: "select" },
+            options: [
+                "",
+                "space-around",
+                "space-between",
+                "space-evenly",
+                "stretch",
+                "center",
+                "end",
+                "flex-end",
+                "flex-start",
+                "start",
+                "baseline",
+                "normal",
+            ],
+        }, gap: {
+            control: { type: "select" },
+            options: [...sizeOptions],
+        }, rowGap: {
+            control: { type: "select" },
+            options: [...sizeOptions],
+            if: {
+                arg: "gap",
+                truthy: false,
+            },
+        }, columnGap: {
+            control: { type: "select" },
+            options: [...sizeOptions],
+            if: {
+                arg: "gap",
+                truthy: false,
+            },
+        } }, (0, excludeControls_1.excludeControls)("className", "elementType", "style")),
+};
+exports.RowLayout = {
+    render: (args) => ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, Object.assign({}, args, { children: [(0, jsx_runtime_1.jsx)(Card, { children: "Item" }), (0, jsx_runtime_1.jsx)(Card, { children: "Item" }), (0, jsx_runtime_1.jsx)(Card, { children: "Item" })] }))),
+    args: {
+        flexDirection: "row",
+        flexWrap: "nowrap",
+        flexGrow: "0",
+        flex: "1 1 0px",
+        justifyContent: "normal",
+        alignItems: "stretch",
+        alignContent: "flex-start",
+        gap: "var(--size-20)",
+        rowGap: "",
+        columnGap: "",
+    },
+};
+exports.ColumnLayout = {
+    render: (args) => ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, Object.assign({}, args, { children: [(0, jsx_runtime_1.jsx)(Card, { children: "Item" }), (0, jsx_runtime_1.jsx)(Card, { children: "Item" }), (0, jsx_runtime_1.jsx)(Card, { children: "Item" })] }))),
+    args: {
+        flexDirection: "column",
+        flexWrap: "nowrap",
+        flexGrow: "0",
+        flex: "1 1 0px",
+        justifyContent: "normal",
+        alignItems: "stretch",
+        alignContent: "normal",
+        gap: "var(--size-20)",
+        rowGap: "",
+        columnGap: "",
+    },
+};
+//# sourceMappingURL=Flex.stories.js.map

package/dist/cjs/components/Flex/Flex.stories.js.map

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

package/dist/cjs/components/Grid/Grid.d.ts

@@ -20,6 +20,8 @@ export interface GridProps extends RefAttributes<GridElementType>, DOMProps {
     alignItems?: "center" | "start" | "end" | "stretch" | "baseline";
     /** Aligns grid items along the inline (row) axis  */
     justifyItems?: "start" | "end" | "center" | "stretch";
+    /** Custom class name for setting specific CSS */
+    className?: string;
 }
 export type GridRef = Ref<GridElementType>;
 declare const Grid: ForwardedRefComponent<GridProps, GridElementType>;

package/dist/cjs/components/Grid/Grid.js

@@ -10,13 +10,19 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Grid = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const clsx_1 = __importDefault(require("clsx"));
+const propUtils_1 = require("../Flex/propUtils");
 const Grid = (0, react_1.forwardRef)((props, _ref) => {
-    const { columns = 12, gap, columnGap, rowGap, alignContent, alignItems, justifyContent, justifyItems } = props, rest = __rest(props, ["columns", "gap", "columnGap", "rowGap", "alignContent", "alignItems", "justifyContent", "justifyItems"]);
-    const styles = {
+    const { columns = 12, gap, columnGap, rowGap, alignContent, alignItems, justifyContent, justifyItems, className } = props, rest = __rest(props, ["columns", "gap", "columnGap", "rowGap", "alignContent", "alignItems", "justifyContent", "justifyItems", "className"]);
+    const classes = (0, clsx_1.default)("mobius", "mobius/Grid", className);
+    const styles = (0, propUtils_1.withoutUndefinedValues)({
         boxSizing: "border-box",
         display: "grid",
         gridTemplateColumns: `repeat(${columns}, 1fr)`,
@@ -27,8 +33,8 @@ const Grid = (0, react_1.forwardRef)((props, _ref) => {
         alignItems,
         justifyContent,
         justifyItems,
-    };
-    return (0, jsx_runtime_1.jsx)("div", Object.assign({ style: styles }, rest));
+    });
+    return (0, jsx_runtime_1.jsx)("div", Object.assign({ style: styles, className: classes }, rest));
 });
 exports.Grid = Grid;
 Grid.displayName = "Grid";

package/dist/cjs/components/Grid/Grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.js","sourceRoot":"","sources":["../../../../src/components/Grid/Grid.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,iCAAiF;AAuCjF,MAAM,IAAI,GAAsD,IAAA,kBAAU,EACxE,CAAC,KAAgB,EAAE,IAAa,EAAE,EAAE;IAClC,MAAM,EACJ,OAAO,GAAG,EAAE,EACZ,GAAG,EACH,SAAS,EACT,MAAM,EACN,YAAY,EACZ,UAAU,EACV,cAAc,EACd,YAAY,KAEV,KAAK,EADJ,IAAI,UACL,KAAK,EAVH,yGAUL,CAAQ,CAAC;IAEV,MAAM,MAAM,GAAkB;QAC5B,SAAS,EAAE,YAAY;QACvB,OAAO,EAAE,MAAM;QACf,mBAAmB,EAAE,UAAU,OAAO,QAAQ;QAC9C,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,SAAS,GAAG,GAAG,CAAC,CAAC,CAAC,SAAS;QACtC,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,SAAS,GAAG,CAAC,CAAC,CAAC,SAAS;QACxD,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,SAAS,MAAM,GAAG,CAAC,CAAC,CAAC,SAAS;QAC/C,YAAY;QACZ,UAAU;QACV,cAAc;QACd,YAAY;KACb,CAAC;IAEF,OAAO,8CAAK,KAAK,EAAE,MAAM,IAAM,IAAI,EAAI,CAAC;AAC1C,CAAC,CACF,CAAC;AAGO,oBAAI;AADb,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC"}
+{"version":3,"file":"Grid.js","sourceRoot":"","sources":["../../../../src/components/Grid/Grid.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,iCAMe;AACf,gDAAwB;AAGxB,iDAA2D;AAuC3D,MAAM,IAAI,GAAsD,IAAA,kBAAU,EACxE,CAAC,KAAgB,EAAE,IAAa,EAAE,EAAE;IAClC,MAAM,EACJ,OAAO,GAAG,EAAE,EACZ,GAAG,EACH,SAAS,EACT,MAAM,EACN,YAAY,EACZ,UAAU,EACV,cAAc,EACd,YAAY,EACZ,SAAS,KAEP,KAAK,EADJ,IAAI,UACL,KAAK,EAXH,sHAWL,CAAQ,CAAC;IACV,MAAM,OAAO,GAAG,IAAA,cAAI,EAAC,QAAQ,EAAE,aAAa,EAAE,SAAS,CAAC,CAAC;IAEzD,MAAM,MAAM,GAAkB,IAAA,kCAAsB,EAAC;QACnD,SAAS,EAAE,YAAY;QACvB,OAAO,EAAE,MAAM;QACf,mBAAmB,EAAE,UAAU,OAAO,QAAQ;QAC9C,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,SAAS,GAAG,GAAG,CAAC,CAAC,CAAC,SAAS;QACtC,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,SAAS,GAAG,CAAC,CAAC,CAAC,SAAS;QACxD,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,SAAS,MAAM,GAAG,CAAC,CAAC,CAAC,SAAS;QAC/C,YAAY;QACZ,UAAU;QACV,cAAc;QACd,YAAY;KACb,CAAC,CAAC;IAEH,OAAO,8CAAK,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,IAAM,IAAI,EAAI,CAAC;AAC9D,CAAC,CACF,CAAC;AAGO,oBAAI;AADb,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC"}

package/dist/cjs/components/Grid/Grid.stories.d.ts

@@ -0,0 +1,86 @@
+import { ReactNode } from "react";
+import type { Meta } from "@storybook/react";
+import { Grid } from ".";
+import { GridItem } from "./Item";
+declare const _default: {
+    title: string;
+    component: import(".").GridCompound;
+    argTypes: {
+        columns: {
+            control: {
+                type: string;
+            };
+        };
+        gap: {
+            control: {
+                type: string;
+            };
+            options: string[];
+        };
+        rowGap: {
+            control: {
+                type: string;
+            };
+            options: string[];
+            if: {
+                arg: string;
+                truthy: false;
+            };
+        };
+        columnGap: {
+            control: {
+                type: string;
+            };
+            options: string[];
+            if: {
+                arg: string;
+                truthy: false;
+            };
+        };
+        alignContent: {
+            control: {
+                type: string;
+            };
+            options: string[];
+        };
+        justifyContent: {
+            control: {
+                type: string;
+            };
+            options: string[];
+        };
+        alignItems: {
+            control: {
+                type: string;
+            };
+            options: string[];
+        };
+        justifyItems: {
+            control: {
+                type: string;
+            };
+            options: string[];
+        };
+    };
+    decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/react/dist/types-0a347bb9").R, {
+        alignContent?: "space-around" | "space-between" | "space-evenly" | "stretch" | "center" | undefined;
+        alignItems?: "stretch" | "center" | "end" | "start" | "baseline" | undefined;
+        columnGap?: string | undefined;
+        justifyContent?: "space-around" | "space-between" | "space-evenly" | "center" | "end" | "start" | undefined;
+        justifyItems?: "stretch" | "center" | "end" | "start" | undefined;
+        rowGap?: string | undefined;
+        columns?: number | undefined;
+        gap?: string | undefined;
+        key?: import("react").Key | null | undefined;
+        className?: string | undefined;
+        id?: string | undefined;
+        children?: ReactNode;
+        ref?: import("react").Ref<HTMLDivElement> | undefined;
+    }>) => JSX.Element)[];
+};
+export default _default;
+export declare const AlignmentProperties: Meta<typeof Grid>;
+export declare const Normal: Meta<typeof Grid>;
+export declare const EightColumns: Meta<typeof Grid>;
+export declare const Responsive: Meta<typeof GridItem>;
+export declare const ItemPositioning: Meta<typeof GridItem>;

package/dist/cjs/components/Grid/Grid.stories.js

@@ -0,0 +1,230 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ItemPositioning = exports.Responsive = exports.EightColumns = exports.Normal = exports.AlignmentProperties = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const _1 = require(".");
+const Box_1 = require("../Box");
+const Flex_1 = require("../Flex");
+const contexts_1 = require("../../contexts");
+const excludeControls_1 = require("../../utils/excludeControls");
+const sizeOptions = [
+    "",
+    "size-0",
+    "size-10",
+    "size-20",
+    "size-30",
+    "size-40",
+    "size-50",
+    "size-60",
+    "size-70",
+    "size-80",
+    "size-90",
+    "size-100",
+];
+const breakpoints = [
+    { size: "xs", value: 320 },
+    { size: "sm", value: 480 },
+    { size: "md", value: 670 },
+    { size: "lg", value: 960 },
+    { size: "xl", value: 1200 },
+    { size: "xxl", value: 1320 },
+];
+const setBreakpoints = () => { };
+const Card = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return ((0, jsx_runtime_1.jsx)(Box_1.Box, Object.assign({ style: {
+            borderRadius: "4px",
+            padding: "8px",
+            backgroundColor: "#dddddd",
+            width: "80%",
+        } }, props, { children: children })));
+};
+const Square = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, Object.assign({ alignItems: "center", justifyContent: "center", style: { height: "100%" } }, props, { children: children })));
+};
+const AlignSquare = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return ((0, jsx_runtime_1.jsx)(Box_1.Box, Object.assign({ style: {} }, props, { children: children })));
+};
+exports.default = {
+    title: "Layout/Grid",
+    component: _1.Grid,
+    argTypes: Object.assign({ columns: {
+            control: { type: "number" },
+        }, gap: {
+            control: { type: "select" },
+            options: [...sizeOptions],
+        }, rowGap: {
+            control: { type: "select" },
+            options: [...sizeOptions],
+            if: {
+                arg: "gap",
+                truthy: false,
+            },
+        }, columnGap: {
+            control: { type: "select" },
+            options: [...sizeOptions],
+            if: {
+                arg: "gap",
+                truthy: false,
+            },
+        }, alignContent: {
+            control: { type: "select" },
+            options: [
+                "",
+                "center",
+                "space-around",
+                "space-between",
+                "space-evenly",
+                "stretch",
+            ],
+        }, justifyContent: {
+            control: { type: "select" },
+            options: [
+                "",
+                "center",
+                "start",
+                "end",
+                "space-around",
+                "space-between",
+                "space-evenly",
+            ],
+        }, alignItems: {
+            control: { type: "select" },
+            options: ["", "center", "start", "end", "stretch", "baseline"],
+        }, justifyItems: {
+            control: { type: "select" },
+            options: ["", "start", "end", "center", "stretch"],
+        } }, (0, excludeControls_1.excludeControls)("className")),
+    decorators: [
+        Story => {
+            // eslint-disable-next-line global-require
+            require("./Grid.story.styles.css");
+            return (0, jsx_runtime_1.jsx)(Story, {});
+        },
+    ],
+};
+exports.AlignmentProperties = {
+    render: (args) => ((0, jsx_runtime_1.jsxs)(_1.Grid, Object.assign({}, args, { children: [(0, jsx_runtime_1.jsx)(_1.Grid.Item, Object.assign({ className: "grid-example-grid-alignment-item", span: 4 }, { children: (0, jsx_runtime_1.jsx)(Square, { children: "1" }) })), (0, jsx_runtime_1.jsx)(_1.Grid.Item, Object.assign({ className: "grid-example-grid-alignment-item", span: 4 }, { children: (0, jsx_runtime_1.jsx)(Square, { children: "2" }) })), (0, jsx_runtime_1.jsx)(_1.Grid.Item, Object.assign({ className: "grid-example-grid-alignment-item", span: 4 }, { children: (0, jsx_runtime_1.jsx)(Square, { children: "3" }) })), (0, jsx_runtime_1.jsx)(_1.Grid.Item, Object.assign({ className: "grid-example-grid-alignment-item", span: 4 }, { children: (0, jsx_runtime_1.jsx)(Square, { children: "4" }) })), (0, jsx_runtime_1.jsx)(_1.Grid.Item, Object.assign({ className: "grid-example-grid-alignment-item", span: 4 }, { children: (0, jsx_runtime_1.jsx)(Square, { children: "5" }) })), (0, jsx_runtime_1.jsx)(_1.Grid.Item, Object.assign({ className: "grid-example-grid-alignment-item", span: 4 }, { children: (0, jsx_runtime_1.jsx)(Square, { children: "6" }) })), (0, jsx_runtime_1.jsx)(_1.Grid.Item, Object.assign({ className: "grid-example-grid-alignment-item", span: 4 }, { children: (0, jsx_runtime_1.jsx)(Square, { children: "7" }) })), (0, jsx_runtime_1.jsx)(_1.Grid.Item, Object.assign({ className: "grid-example-grid-alignment-item", span: 4 }, { children: (0, jsx_runtime_1.jsx)(Square, { children: "8" }) })), (0, jsx_runtime_1.jsx)(_1.Grid.Item, Object.assign({ className: "grid-example-grid-alignment-item", span: 4 }, { children: (0, jsx_runtime_1.jsx)(Square, { children: "9" }) }))] }))),
+    args: {
+        columns: 12,
+        gap: "size-20",
+        rowGap: "",
+        columnGap: "",
+        alignItems: "stretch",
+        justifyItems: "stretch",
+        className: "grid-example-fixed-size-grid",
+    },
+};
+exports.Normal = {
+    render: (args) => ((0, jsx_runtime_1.jsxs)(_1.Grid, Object.assign({}, args, { children: [(0, jsx_runtime_1.jsx)(_1.Grid.Item, Object.assign({ span: 12 }, { children: (0, jsx_runtime_1.jsx)(Card, { children: "span=12" }) })), (0, jsx_runtime_1.jsx)(_1.Grid.Item, Object.assign({ span: 11 }, { children: (0, jsx_runtime_1.jsx)(Card, { children: "span=11" }) })), (0, jsx_runtime_1.jsx)(_1.Grid.Item, Object.assign({ span: 1 }, { children: (0, jsx_runtime_1.jsx)(Card, { children: "span=1" }) })), (0, jsx_runtime_1.jsx)(_1.Grid.Item, Object.assign({ span: 10 }, { children: (0, jsx_runtime_1.jsx)(Card, { children: "span=10" }) })), (0, jsx_runtime_1.jsx)(_1.Grid.Item, Object.assign({ span: 2 }, { children: (0, jsx_runtime_1.jsx)(Card, { children: "span=2" }) })), (0, jsx_runtime_1.jsx)(_1.Grid.Item, Object.assign({ span: 9 }, { children: (0, jsx_runtime_1.jsx)(Card, { children: "span=9" }) })), (0, jsx_runtime_1.jsx)(_1.Grid.Item, Object.assign({ span: 3 }, { children: (0, jsx_runtime_1.jsx)(Card, { children: "span=3" }) })), (0, jsx_runtime_1.jsx)(_1.Grid.Item, Object.assign({ span: 8 }, { children: (0, jsx_runtime_1.jsx)(Card, { children: "span=8" }) })), (0, jsx_runtime_1.jsx)(_1.Grid.Item, Object.assign({ span: 4 }, { children: (0, jsx_runtime_1.jsx)(Card, { children: "span=4" }) })), (0, jsx_runtime_1.jsx)(_1.Grid.Item, Object.assign({ span: 7 }, { children: (0, jsx_runtime_1.jsx)(Card, { children: "span=7" }) })), (0, jsx_runtime_1.jsx)(_1.Grid.Item, Object.assign({ span: 5 }, { children: (0, jsx_runtime_1.jsx)(Card, { children: "span=5" }) })), (0, jsx_runtime_1.jsx)(_1.Grid.Item, Object.assign({ span: 6 }, { children: (0, jsx_runtime_1.jsx)(Card, { children: "span=6" }) })), (0, jsx_runtime_1.jsx)(_1.Grid.Item, Object.assign({ span: 6 }, { children: (0, jsx_runtime_1.jsx)(Card, { children: "span=6" }) }))] }))),
+    args: {
+        columns: 12,
+        gap: "size-20",
+        rowGap: "",
+        columnGap: "",
+        alignItems: "stretch",
+        justifyItems: "stretch",
+    },
+};
+exports.EightColumns = {
+    render: (args) => ((0, jsx_runtime_1.jsx)(_1.Grid, Object.assign({}, args, { children: [...new Array(8)].map((_, k) => (
+        // eslint-disable-next-line react/no-array-index-key
+        (0, jsx_runtime_1.jsx)(Card, { children: "span=1" }, k))) }))),
+    args: {
+        columns: 8,
+        gap: "size-20",
+        alignItems: "stretch",
+        justifyItems: "stretch",
+        className: "grid-example-eight-columns",
+    },
+};
+const breakpointControl = {
+    control: {
+        type: "number",
+        min: 0,
+        max: 12,
+        step: 1,
+    },
+};
+exports.Responsive = {
+    render: (args) => {
+        const breakpointArgs = ["xs", "sm", "md", "lg", "xl", "xxl"];
+        const allArgs = Object.entries(args)
+            .filter(([breakpoint]) => breakpointArgs.includes(breakpoint))
+            .map(([breakpoint, value]) => `${breakpoint}=${value}`)
+            .join(" ");
+        return ((0, jsx_runtime_1.jsxs)(_1.Grid, Object.assign({ gap: "size-20", alignItems: "stretch", justifyItems: "stretch" }, { children: [(0, jsx_runtime_1.jsx)(_1.Grid.Item, Object.assign({}, args, { children: (0, jsx_runtime_1.jsx)(Card, { children: allArgs }) })), (0, jsx_runtime_1.jsx)(_1.Grid.Item, Object.assign({ lg: 4 }, { children: (0, jsx_runtime_1.jsx)(Card, { children: "lg=4" }) })), (0, jsx_runtime_1.jsx)(_1.Grid.Item, Object.assign({ xs: 5 }, { children: (0, jsx_runtime_1.jsx)(Card, { children: "xs=5" }) })), (0, jsx_runtime_1.jsx)(_1.Grid.Item, Object.assign({ span: 5 }, { children: (0, jsx_runtime_1.jsx)(Card, { children: "span=5" }) }))] })));
+    },
+    args: {
+        xs: 12,
+        sm: 6,
+        md: 2,
+        lg: 8,
+        xl: 12,
+        xxl: 4,
+    },
+    parameters: {
+        controls: {
+            exclude: ["columns"],
+        },
+    },
+    argTypes: {
+        xs: breakpointControl,
+        sm: breakpointControl,
+        md: breakpointControl,
+        lg: breakpointControl,
+        xl: breakpointControl,
+        xxl: breakpointControl,
+    },
+    decorators: [
+        Story => ((0, jsx_runtime_1.jsx)(contexts_1.ThemeContext.Provider, Object.assign({ value: {
+                breakpoints,
+                setBreakpoints,
+            } }, { children: (0, jsx_runtime_1.jsx)(Story, {}) }))),
+    ],
+};
+exports.ItemPositioning = {
+    render: (args) => ((0, jsx_runtime_1.jsxs)(_1.Grid, Object.assign({ columns: 12, gap: "size-20", alignItems: "stretch", justifyItems: "stretch", className: "grid-example-fixed-size-grid" }, { children: [(0, jsx_runtime_1.jsx)(_1.Grid.Item, Object.assign({ className: "grid-example-align-square-item", span: 4 }, args, { children: (0, jsx_runtime_1.jsx)(AlignSquare, { children: "1" }) })), (0, jsx_runtime_1.jsx)(_1.Grid.Item, Object.assign({ className: "grid-example-align-square-item", span: 4 }, { children: (0, jsx_runtime_1.jsx)(AlignSquare, { children: "2" }) })), (0, jsx_runtime_1.jsx)(_1.Grid.Item, Object.assign({ className: "grid-example-align-square-item", span: 4 }, { children: (0, jsx_runtime_1.jsx)(AlignSquare, { children: "3" }) })), (0, jsx_runtime_1.jsx)(_1.Grid.Item, Object.assign({ className: "grid-example-align-square-item", span: 4 }, { children: (0, jsx_runtime_1.jsx)(AlignSquare, { children: "4" }) }))] }))),
+    args: {
+        alignSelf: "center",
+        justifySelf: "end",
+    },
+    argTypes: {
+        alignSelf: {
+            control: { type: "select" },
+            options: ["", "center", "start", "end", "stretch"],
+        },
+        justifySelf: {
+            control: { type: "select" },
+            options: ["", "center", "start", "end", "stretch"],
+        },
+    },
+    parameters: {
+        controls: {
+            exclude: [
+                "columns",
+                "gap",
+                "rowGap",
+                "columnGap",
+                "alignContent",
+                "justifyContent",
+                "alignItems",
+                "justifyItems",
+            ],
+        },
+    },
+};
+//# sourceMappingURL=Grid.stories.js.map

package/dist/cjs/components/Grid/Grid.stories.js.map

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

package/dist/cjs/components/Grid/Item.d.ts

@@ -20,6 +20,8 @@ export interface GridItemProps extends RefAttributes<GridItemElementType>, DOMPr
     alignSelf?: "center" | "start" | "end" | "stretch";
     /** Aligns the grid item along the inline (row) axis */
     justifySelf?: "center" | "start" | "end" | "stretch";
+    /** Custom class name for setting specific CSS */
+    className?: string;
 }
 export declare const getBreakpointMap: (config: Partial<Record<SizeType, number>>) => {};
 export type GridItemRef = Ref<GridItemElementType>;

package/dist/cjs/components/Grid/Item.js

@@ -11,10 +11,14 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GridItem = exports.DEFAULT_SPAN = exports.getBreakpointMap = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const clsx_1 = __importDefault(require("clsx"));
 const hooks_1 = require("../../hooks");
 const getBreakpointMap = (config) => Object.entries(config).reduce((prev, [key, value]) => {
     const previous = Object.values(prev);
@@ -25,7 +29,7 @@ exports.getBreakpointMap = getBreakpointMap;
 exports.DEFAULT_SPAN = 12;
 const GridItem = (0, react_1.forwardRef)((props, _ref) => {
     const { breakpoint: { size: breakpointSize }, } = (0, hooks_1.useBreakpoint)();
-    const { span, xs = Array.isArray(span) ? exports.DEFAULT_SPAN : span, sm, md, lg, xl, xxl, alignSelf, justifySelf } = props, rest = __rest(props, ["span", "xs", "sm", "md", "lg", "xl", "xxl", "alignSelf", "justifySelf"]);
+    const { span, xs = Array.isArray(span) ? exports.DEFAULT_SPAN : span, sm, md, lg, xl, xxl, alignSelf, justifySelf, className } = props, rest = __rest(props, ["span", "xs", "sm", "md", "lg", "xl", "xxl", "alignSelf", "justifySelf", "className"]);
     const breakpointMap = (0, exports.getBreakpointMap)({
         xs,
         sm,
@@ -35,6 +39,7 @@ const GridItem = (0, react_1.forwardRef)((props, _ref) => {
         xxl,
     });
     const [responsiveSpan, setResponsiveSpan] = (0, react_1.useState)();
+    const classes = (0, clsx_1.default)("mobius/GridItem", className);
     (0, react_1.useEffect)(() => {
         // @ts-expect-error
         setResponsiveSpan(breakpointMap[breakpointSize]);
@@ -44,7 +49,7 @@ const GridItem = (0, react_1.forwardRef)((props, _ref) => {
         alignSelf,
         justifySelf,
     };
-    return (0, jsx_runtime_1.jsx)("div", Object.assign({ style: Object.assign({}, styles) }, rest));
+    return (0, jsx_runtime_1.jsx)("div", Object.assign({ style: Object.assign({}, styles), className: classes }, rest));
 });
 exports.GridItem = GridItem;
 GridItem.displayName = "GridItem";

package/dist/cjs/components/Grid/Item.js.map

@@ -1 +1 @@
-{"version":3,"file":"Item.js","sourceRoot":"","sources":["../../../../src/components/Grid/Item.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;AAEb,iCAA2F;AAE3F,uCAA4C;AA2BrC,MAAM,gBAAgB,GAAG,CAAC,MAAyC,EAAE,EAAE,CAC5E,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE;IACnD,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IACrC,MAAM,WAAW,GAAG,QAAQ,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IAClD,uCAAY,IAAI,KAAE,CAAC,GAAG,CAAC,EAAE,KAAK,IAAI,WAAW,IAAG;AAClD,CAAC,EAAE,EAAE,CAAC,CAAC;AALI,QAAA,gBAAgB,oBAKpB;AAII,QAAA,YAAY,GAAG,EAAE,CAAC;AAE/B,MAAM,QAAQ,GACZ,IAAA,kBAAU,EAAC,CAAC,KAAoB,EAAE,IAAiB,EAAE,EAAE;IACrD,MAAM,EACJ,UAAU,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE,GACrC,GAAG,IAAA,qBAAa,GAAE,CAAC;IACpB,MAAM,EACJ,IAAI,EACJ,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,oBAAY,CAAC,CAAC,CAAC,IAAI,EAC9C,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,GAAG,EACH,SAAS,EACT,WAAW,KAET,KAAK,EADJ,IAAI,UACL,KAAK,EAXH,yEAWL,CAAQ,CAAC;IACV,MAAM,aAAa,GAAG,IAAA,wBAAgB,EAAC;QACrC,EAAE;QACF,EAAE;QACF,EAAE;QACF,EAAE;QACF,EAAE;QACF,GAAG;KACJ,CAAC,CAAC;IACH,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,IAAA,gBAAQ,GAAE,CAAC;IAEvD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,mBAAmB;QACnB,iBAAiB,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC,CAAC;IACnD,CAAC,EAAE,CAAC,cAAc,EAAE,aAAa,CAAC,CAAC,CAAC;IAEpC,MAAM,MAAM,GAAkB;QAC5B,UAAU,EAAE,cAAc,CAAC,CAAC,CAAC,QAAQ,cAAc,EAAE,CAAC,CAAC,CAAC,SAAS;QACjE,SAAS;QACT,WAAW;KACZ,CAAC;IAEF,OAAO,8CAAK,KAAK,oBAAO,MAAM,KAAQ,IAAI,EAAI,CAAC;AACjD,CAAC,CAAC,CAAC;AAGI,4BAAQ;AADjB,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC"}
+{"version":3,"file":"Item.js","sourceRoot":"","sources":["../../../../src/components/Grid/Item.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;AAEb,iCAOe;AACf,gDAAwB;AAExB,uCAA4C;AA6BrC,MAAM,gBAAgB,GAAG,CAAC,MAAyC,EAAE,EAAE,CAC5E,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE;IACnD,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IACrC,MAAM,WAAW,GAAG,QAAQ,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IAClD,uCAAY,IAAI,KAAE,CAAC,GAAG,CAAC,EAAE,KAAK,IAAI,WAAW,IAAG;AAClD,CAAC,EAAE,EAAE,CAAC,CAAC;AALI,QAAA,gBAAgB,oBAKpB;AAII,QAAA,YAAY,GAAG,EAAE,CAAC;AAE/B,MAAM,QAAQ,GACZ,IAAA,kBAAU,EAAC,CAAC,KAAoB,EAAE,IAAiB,EAAE,EAAE;IACrD,MAAM,EACJ,UAAU,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE,GACrC,GAAG,IAAA,qBAAa,GAAE,CAAC;IACpB,MAAM,EACJ,IAAI,EACJ,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,oBAAY,CAAC,CAAC,CAAC,IAAI,EAC9C,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,GAAG,EACH,SAAS,EACT,WAAW,EACX,SAAS,KAEP,KAAK,EADJ,IAAI,UACL,KAAK,EAZH,sFAYL,CAAQ,CAAC;IACV,MAAM,aAAa,GAAG,IAAA,wBAAgB,EAAC;QACrC,EAAE;QACF,EAAE;QACF,EAAE;QACF,EAAE;QACF,EAAE;QACF,GAAG;KACJ,CAAC,CAAC;IACH,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,IAAA,gBAAQ,GAAE,CAAC;IACvD,MAAM,OAAO,GAAG,IAAA,cAAI,EAAC,iBAAiB,EAAE,SAAS,CAAC,CAAC;IAEnD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,mBAAmB;QACnB,iBAAiB,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC,CAAC;IACnD,CAAC,EAAE,CAAC,cAAc,EAAE,aAAa,CAAC,CAAC,CAAC;IAEpC,MAAM,MAAM,GAAkB;QAC5B,UAAU,EAAE,cAAc,CAAC,CAAC,CAAC,QAAQ,cAAc,EAAE,CAAC,CAAC,CAAC,SAAS;QACjE,SAAS;QACT,WAAW;KACZ,CAAC;IAEF,OAAO,8CAAK,KAAK,oBAAO,MAAM,GAAI,SAAS,EAAE,OAAO,IAAM,IAAI,EAAI,CAAC;AACrE,CAAC,CAAC,CAAC;AAGI,4BAAQ;AADjB,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC"}

package/dist/cjs/components/Icon/Icon.stories.d.ts

@@ -0,0 +1,24 @@
+import type { Meta } from "@storybook/react";
+import { Icon } from "./Icon";
+import { IconProps } from "./types";
+declare const _default: {
+    title: string;
+    component: import("../..").ForwardedRefComponent<IconProps, SVGSVGElement>;
+    argTypes: {
+        name: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+        spin: {
+            if: {
+                arg: string;
+                eq: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Normal: Meta<typeof Icon>;
+export declare const Spinning: Meta<typeof Icon>;