@simplybusiness/mobius 4.3.0 → 4.3.1

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

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
+const _1 = require(".");
+const CLASS_NAME = "mobius/Flex";
+describe("Test for Flex", () => {
+    it("should render without errors", () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsxs)(_1.Flex, { flexDirection: "column", alignItems: "start", children: [(0, jsx_runtime_1.jsx)("div", { children: "block 1" }), (0, jsx_runtime_1.jsx)("div", { children: "block 2" })] }));
+    });
+    describe("given elementType", () => {
+        it("is not applied as element attribute", () => {
+            const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Flex, { elementType: "ul" }));
+            expect(container.firstChild).not.toHaveAttribute("elementtype", "ul");
+        });
+    });
+    describe("uses correct class names", () => {
+        it("uses Mobius class", () => {
+            (0, react_1.render)((0, jsx_runtime_1.jsxs)(_1.Flex, { flexDirection: "column", alignItems: "start", "data-testid": "test", children: [(0, jsx_runtime_1.jsx)("div", { children: "block 1" }), (0, jsx_runtime_1.jsx)("div", { children: "block 2" })] }));
+            expect(react_1.screen.getByTestId("test")).toHaveClass("mobius");
+        });
+        it("uses base Mobius class", () => {
+            (0, react_1.render)((0, jsx_runtime_1.jsxs)(_1.Flex, { flexDirection: "column", alignItems: "start", "data-testid": "test", children: [(0, jsx_runtime_1.jsx)("div", { children: "block 1" }), (0, jsx_runtime_1.jsx)("div", { children: "block 2" })] }));
+            expect(react_1.screen.getByTestId("test")).toHaveClass(CLASS_NAME);
+        });
+        it("includes custom class name", () => {
+            (0, react_1.render)((0, jsx_runtime_1.jsxs)(_1.Flex, { flexDirection: "column", alignItems: "start", "data-testid": "test", className: "my-class", children: [(0, jsx_runtime_1.jsx)("div", { children: "block 1" }), (0, jsx_runtime_1.jsx)("div", { children: "block 2" })] }));
+            expect(react_1.screen.getByTestId("test")).toHaveClass("my-class");
+            expect(react_1.screen.getByTestId("test")).toHaveClass(CLASS_NAME);
+        });
+    });
+});
+//# sourceMappingURL=Flex.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Flex.test.js","sourceRoot":"","sources":["../../../../src/components/Flex/Flex.test.tsx"],"names":[],"mappings":";;;AAAA,kDAAwD;AACxD,wBAAyB;AAEzB,MAAM,UAAU,GAAG,aAAa,CAAC;AAEjC,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;IAC7B,EAAE,CAAC,8BAA8B,EAAE,GAAG,EAAE;QACtC,IAAA,cAAM,EACJ,wBAAC,OAAI,IAAC,aAAa,EAAC,QAAQ,EAAC,UAAU,EAAC,OAAO,aAC7C,sDAAkB,EAClB,sDAAkB,IACb,CACR,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;QACjC,EAAE,CAAC,qCAAqC,EAAE,GAAG,EAAE;YAC7C,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,cAAM,EAAC,uBAAC,OAAI,IAAC,WAAW,EAAC,IAAI,GAAG,CAAC,CAAC;YACxD,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,eAAe,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC;QACxE,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,0BAA0B,EAAE,GAAG,EAAE;QACxC,EAAE,CAAC,mBAAmB,EAAE,GAAG,EAAE;YAC3B,IAAA,cAAM,EACJ,wBAAC,OAAI,IAAC,aAAa,EAAC,QAAQ,EAAC,UAAU,EAAC,OAAO,iBAAa,MAAM,aAChE,sDAAkB,EAClB,sDAAkB,IACb,CACR,CAAC;YACF,MAAM,CAAC,cAAM,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;QAC3D,CAAC,CAAC,CAAC;QAEH,EAAE,CAAC,wBAAwB,EAAE,GAAG,EAAE;YAChC,IAAA,cAAM,EACJ,wBAAC,OAAI,IAAC,aAAa,EAAC,QAAQ,EAAC,UAAU,EAAC,OAAO,iBAAa,MAAM,aAChE,sDAAkB,EAClB,sDAAkB,IACb,CACR,CAAC;YACF,MAAM,CAAC,cAAM,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;QAC7D,CAAC,CAAC,CAAC;QAEH,EAAE,CAAC,4BAA4B,EAAE,GAAG,EAAE;YACpC,IAAA,cAAM,EACJ,wBAAC,OAAI,IACH,aAAa,EAAC,QAAQ,EACtB,UAAU,EAAC,OAAO,iBACN,MAAM,EAClB,SAAS,EAAC,UAAU,aAEpB,sDAAkB,EAClB,sDAAkB,IACb,CACR,CAAC;YACF,MAAM,CAAC,cAAM,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;YAC3D,MAAM,CAAC,cAAM,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;QAC7D,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/cjs/components/Flex/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Flex";
+export * from "./types";

package/dist/cjs/components/Flex/propUtils.d.ts

@@ -0,0 +1,8 @@
+import { FlexNonStyleProps, FlexProps, FlexStyleProps } from "./types";
+export declare const withoutUndefinedValues: (obj: Record<string, unknown>) => {
+    [k: string]: unknown;
+};
+export declare const buildFlexStyles: (props: FlexStyleProps) => {
+    [k: string]: unknown;
+};
+export declare const splitProps: (props: FlexProps) => [FlexStyleProps, FlexNonStyleProps];

package/dist/cjs/components/Flex/propUtils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/components/Flex/propUtils.test.js

@@ -0,0 +1,99 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const propUtils_1 = require("./propUtils");
+describe("withoutUndefinedValues", () => {
+    it("returns object without undefined values", () => {
+        const props = {
+            a: 1,
+            b: "Two",
+            c: [],
+            d: {},
+            e: undefined,
+            f: undefined,
+        };
+        const actual = (0, propUtils_1.withoutUndefinedValues)(props);
+        const expected = {
+            a: 1,
+            b: "Two",
+            c: [],
+            d: {},
+        };
+        expect(actual).toStrictEqual(expected);
+    });
+});
+describe("buildFlexStyles", () => {
+    describe("given a list of props", () => {
+        it("returns a specified list of flex props", () => {
+            const props = {
+                flexDirection: "row",
+                flexWrap: "wrap",
+                flexGrow: "1",
+                flex: "1 1 0px",
+                justifyContent: "start",
+                alignItems: "stretch",
+                alignContent: "center",
+                gap: "10px",
+                rowGap: "20px",
+                columnGap: "30px",
+            };
+            const expectedProps = Object.assign(Object.assign({}, props), { display: "flex" });
+            const actual = (0, propUtils_1.buildFlexStyles)(props);
+            expect(actual).toStrictEqual(expectedProps);
+        });
+    });
+    describe("given a list of partially defined props", () => {
+        it("returns flex props that are defined", () => {
+            const props = {
+                flexDirection: "row",
+                flexWrap: undefined,
+                flexGrow: "1",
+                flex: undefined,
+                justifyContent: "start",
+                alignItems: undefined,
+                alignContent: "center",
+                gap: undefined,
+                rowGap: "20px",
+                columnGap: undefined,
+            };
+            const expectedProps = {
+                flexDirection: "row",
+                flexGrow: "1",
+                justifyContent: "start",
+                alignContent: "center",
+                rowGap: "20px",
+                display: "flex",
+            };
+            const actual = (0, propUtils_1.buildFlexStyles)(props);
+            expect(actual).toStrictEqual(expectedProps);
+        });
+    });
+});
+describe("splitProps", () => {
+    describe("given a list of props", () => {
+        it("returns an array with two items: 1) specified flex props; 2) all other props", () => {
+            const flexProps = {
+                flexDirection: "row",
+                flexWrap: "wrap",
+                flexGrow: "1",
+                flex: "1 1 0px",
+                justifyContent: "start",
+                alignItems: "stretch",
+                alignContent: "center",
+                gap: "10px",
+                rowGap: "20px",
+                columnGap: "30px",
+            };
+            const otherProps = {
+                a: 1,
+                b: "Two",
+                c: [],
+                d: {},
+            };
+            const props = Object.assign(Object.assign({}, flexProps), otherProps);
+            const actual = (0, propUtils_1.splitProps)(props);
+            const expected = [flexProps, otherProps];
+            expect(actual).toStrictEqual(expected);
+        });
+    });
+});
+//# sourceMappingURL=propUtils.test.js.map

package/dist/cjs/components/Flex/propUtils.test.js.map

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

package/dist/cjs/components/Flex/types.d.ts

@@ -0,0 +1,33 @@
+import { Ref, ReactNode, RefAttributes, AriaRole } from "react";
+import type { Property } from "csstype";
+import { DOMProps } from "../../types/dom";
+export type FlexElementType = HTMLDivElement;
+export interface FlexStyleProps {
+    elementType?: string | React.ElementType;
+    flexDirection?: Property.FlexDirection;
+    flexWrap?: Property.FlexWrap;
+    flexGrow?: Property.FlexGrow;
+    flex?: Property.Flex;
+    /** Aligns grid items along the block (column) axis  */
+    alignItems?: Property.AlignItems;
+    /** Aligns the grid along the inline (row) axis */
+    alignContent?: Property.AlignContent;
+    /** Aligns the grid along the inline (row) axis */
+    justifyContent?: Property.JustifyContent;
+    /** How big a gap between the columns and rows */
+    gap?: Property.Gap;
+    /** How big a gap between the rows */
+    rowGap?: Property.RowGap;
+    /** How big a gap between the columns */
+    columnGap?: Property.ColumnGap;
+    style?: React.CSSProperties;
+    role?: AriaRole;
+}
+export interface FlexNonStyleProps extends DOMProps, RefAttributes<FlexElementType> {
+    children?: ReactNode;
+    /** Custom class name for setting specific CSS */
+    className?: string;
+}
+export interface FlexProps extends FlexStyleProps, FlexNonStyleProps {
+}
+export type FlexRef = Ref<FlexElementType>;

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

@@ -0,0 +1,28 @@
+import { Ref, ReactNode, RefAttributes } from "react";
+import { DOMProps } from "../../types/dom";
+import { ForwardedRefComponent } from "../../types/components";
+export type GridElementType = HTMLDivElement;
+export interface GridProps extends RefAttributes<GridElementType>, DOMProps {
+    children?: ReactNode;
+    /** The number of columns */
+    columns?: number;
+    /** How big a gap between the columns and rows */
+    gap?: string;
+    /** How big a gap between the columns */
+    columnGap?: string;
+    /** How big a gap between the rows */
+    rowGap?: string;
+    /** Aligns the grid along the block (column) axis */
+    alignContent?: "center" | "space-around" | "space-between" | "space-evenly" | "stretch";
+    /** Aligns the grid along the inline (row) axis */
+    justifyContent?: "center" | "start" | "end" | "space-around" | "space-between" | "space-evenly";
+    /** Aligns grid items along the block (column) axis  */
+    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>;
+export { Grid };

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

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Grid } from ".";
+import { GridItem } from "./Item";
+type StoryType = StoryObj<typeof Grid>;
+declare const meta: Meta<typeof Grid>;
+export declare const AlignmentProperties: StoryType;
+export declare const Normal: StoryType;
+export declare const EightColumns: StoryType;
+export declare const Responsive: Meta<typeof GridItem>;
+export declare const ItemPositioning: Meta<typeof GridItem>;
+export default meta;

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

@@ -0,0 +1,218 @@
+"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 sizeOptions = [
+    "",
+    "size-xs",
+    "size-s",
+    "size-m",
+    "size-l",
+    "size-xl",
+    "size-xxl",
+];
+const meta = {
+    title: "Layout/Grid",
+    component: _1.Grid,
+    argTypes: {
+        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"],
+        },
+    },
+    decorators: [
+        Story => {
+            // eslint-disable-next-line global-require
+            require("./Grid.story.styles.css");
+            return (0, jsx_runtime_1.jsx)(Story, {});
+        },
+    ],
+};
+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.AlignmentProperties = {
+    render: (args) => ((0, jsx_runtime_1.jsxs)(_1.Grid, Object.assign({}, args, { children: [(0, jsx_runtime_1.jsx)(_1.Grid.Item, { 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, { 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, { 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, { 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, { 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, { 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, { 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, { 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, { className: "grid-example-grid-alignment-item", span: 4, children: (0, jsx_runtime_1.jsx)(Square, { children: "9" }) })] }))),
+    args: {
+        columns: 12,
+        gap: "size-xs",
+        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, { span: 12, children: (0, jsx_runtime_1.jsx)(Card, { children: "span=12" }) }), (0, jsx_runtime_1.jsx)(_1.Grid.Item, { span: 11, children: (0, jsx_runtime_1.jsx)(Card, { children: "span=11" }) }), (0, jsx_runtime_1.jsx)(_1.Grid.Item, { span: 1, children: (0, jsx_runtime_1.jsx)(Card, { children: "span=1" }) }), (0, jsx_runtime_1.jsx)(_1.Grid.Item, { span: 10, children: (0, jsx_runtime_1.jsx)(Card, { children: "span=10" }) }), (0, jsx_runtime_1.jsx)(_1.Grid.Item, { span: 2, children: (0, jsx_runtime_1.jsx)(Card, { children: "span=2" }) }), (0, jsx_runtime_1.jsx)(_1.Grid.Item, { span: 9, children: (0, jsx_runtime_1.jsx)(Card, { children: "span=9" }) }), (0, jsx_runtime_1.jsx)(_1.Grid.Item, { span: 3, children: (0, jsx_runtime_1.jsx)(Card, { children: "span=3" }) }), (0, jsx_runtime_1.jsx)(_1.Grid.Item, { span: 8, children: (0, jsx_runtime_1.jsx)(Card, { children: "span=8" }) }), (0, jsx_runtime_1.jsx)(_1.Grid.Item, { span: 4, children: (0, jsx_runtime_1.jsx)(Card, { children: "span=4" }) }), (0, jsx_runtime_1.jsx)(_1.Grid.Item, { span: 7, children: (0, jsx_runtime_1.jsx)(Card, { children: "span=7" }) }), (0, jsx_runtime_1.jsx)(_1.Grid.Item, { span: 5, children: (0, jsx_runtime_1.jsx)(Card, { children: "span=5" }) }), (0, jsx_runtime_1.jsx)(_1.Grid.Item, { span: 6, children: (0, jsx_runtime_1.jsx)(Card, { children: "span=6" }) }), (0, jsx_runtime_1.jsx)(_1.Grid.Item, { span: 6, children: (0, jsx_runtime_1.jsx)(Card, { children: "span=6" }) })] }))),
+    args: {
+        columns: 12,
+        gap: "size-xs",
+        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-xs",
+        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, { gap: "size-xs", 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, { lg: 4, children: (0, jsx_runtime_1.jsx)(Card, { children: "lg=4" }) }), (0, jsx_runtime_1.jsx)(_1.Grid.Item, { xs: 5, children: (0, jsx_runtime_1.jsx)(Card, { children: "xs=5" }) }), (0, jsx_runtime_1.jsx)(_1.Grid.Item, { 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,
+    },
+};
+exports.ItemPositioning = {
+    render: (args) => ((0, jsx_runtime_1.jsxs)(_1.Grid, { columns: 12, gap: "size-xs", 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, { 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, { 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, { 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",
+            ],
+        },
+    },
+};
+exports.default = meta;
+//# 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/Grid.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,97 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
+const _1 = require(".");
+const Item_1 = require("./Item");
+describe("Test for Grid", () => {
+    it("should render without errors", () => {
+        const component = (0, react_1.render)((0, jsx_runtime_1.jsxs)(_1.Grid, { children: [(0, jsx_runtime_1.jsx)(_1.Grid.Item, { span: 11, children: "span=11" }), (0, jsx_runtime_1.jsx)(_1.Grid.Item, { span: 1, children: "span=1" })] }));
+        expect(component).toBeTruthy();
+    });
+    describe("given the span prop is an array", () => {
+        it("should render default as fallback", () => {
+            const span = [1, 2, 3];
+            const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Grid, { children: (0, jsx_runtime_1.jsxs)(_1.Grid.Item, { span: span, children: ["span=", Item_1.DEFAULT_SPAN] }) }));
+            expect(container).toBeTruthy();
+            expect(react_1.screen.getByText(`span=${Item_1.DEFAULT_SPAN}`)).toHaveStyle(`grid-column: span ${Item_1.DEFAULT_SPAN};`);
+        });
+    });
+    describe("given the span prop is a custom number", () => {
+        it("should render using the custom value", () => {
+            const span = 5;
+            const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Grid, { children: (0, jsx_runtime_1.jsxs)(_1.Grid.Item, { span: span, children: ["span=", span] }) }));
+            expect(container).toBeTruthy();
+            expect(react_1.screen.getByText(`span=${span}`)).toHaveStyle(`grid-column: span ${span};`);
+        });
+    });
+});
+describe("getBreakpointMap", () => {
+    describe("given only the smallest breakpoint is provided", () => {
+        it("returns the smallest breakpoint repeated across the map", () => {
+            const config = {
+                xs: 6,
+                sm: undefined,
+                md: undefined,
+                lg: undefined,
+                xl: undefined,
+                xxl: undefined,
+            };
+            const breakpointMap = (0, Item_1.getBreakpointMap)(config);
+            const expected = {
+                xs: 6,
+                sm: 6,
+                md: 6,
+                lg: 6,
+                xl: 6,
+                xxl: 6,
+            };
+            expect(breakpointMap).toEqual(expected);
+        });
+    });
+    describe("given only a single breakpoint is provided", () => {
+        it("returns the breakpoint, which is then repeated across the higher breakpoints", () => {
+            const config = {
+                xs: undefined,
+                sm: undefined,
+                md: undefined,
+                lg: 9,
+                xl: undefined,
+                xxl: undefined,
+            };
+            const breakpointMap = (0, Item_1.getBreakpointMap)(config);
+            const expected = {
+                xs: undefined,
+                sm: undefined,
+                md: undefined,
+                lg: 9,
+                xl: 9,
+                xxl: 9,
+            };
+            expect(breakpointMap).toEqual(expected);
+        });
+    });
+    describe("given only the largest breakpoint is provided", () => {
+        it("returns the largest breakpoint", () => {
+            const config = {
+                xs: undefined,
+                sm: undefined,
+                md: undefined,
+                lg: undefined,
+                xl: undefined,
+                xxl: 2,
+            };
+            const breakpointMap = (0, Item_1.getBreakpointMap)(config);
+            const expected = {
+                xs: undefined,
+                sm: undefined,
+                md: undefined,
+                lg: undefined,
+                xl: undefined,
+                xxl: 2,
+            };
+            expect(breakpointMap).toEqual(expected);
+        });
+    });
+});
+//# sourceMappingURL=Grid.test.js.map

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

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

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

@@ -0,0 +1,30 @@
+import { Ref, RefAttributes } from "react";
+import { DOMProps } from "../../types/dom";
+import { ForwardedRefComponent } from "../../types/components";
+import { SizeType } from "../../types";
+export type GridItemElementType = HTMLDivElement;
+export interface GridItemProps extends RefAttributes<GridItemElementType>, DOMProps {
+    /** How many columns the item spans */
+    span?: number | number[];
+    /** React children */
+    children?: React.ReactNode;
+    /** How many columns the item spans on the smallest breakpoint */
+    xs?: number;
+    sm?: number;
+    md?: number;
+    lg?: number;
+    xl?: number;
+    /** How many columns the item spans on the largest breakpoint */
+    xxl?: number;
+    /** Aligns the grid item along the block (column) axis */
+    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>;
+export declare const DEFAULT_SPAN = 12;
+declare const GridItem: ForwardedRefComponent<GridItemProps, GridItemElementType>;
+export { GridItem };

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

@@ -0,0 +1,9 @@
+import { ForwardedRefComponent } from "../../types/components";
+import { GridElementType, GridProps } from "./Grid";
+import { GridItemProps, GridItemElementType } from "./Item";
+export interface GridCompound extends ForwardedRefComponent<GridProps, GridItemElementType> {
+    Item: ForwardedRefComponent<GridItemProps, GridElementType>;
+}
+declare const Grid: GridCompound;
+export { Grid };
+export type { GridProps, GridItemProps, GridElementType, GridItemElementType };

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

@@ -0,0 +1,2 @@
+import { IconProps } from "./types";
+export declare function Icon({ icon, className, size, color, fixedWidth, spin, spinReverse, ...otherProps }: IconProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Icon } from "./Icon";
+type StoryType = StoryObj<typeof Icon>;
+declare const meta: Meta<typeof Icon>;
+export declare const Normal: StoryType;
+export declare const Spinning: StoryType;
+export default meta;