@simplybusiness/mobius 4.4.5 → 4.4.6

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

@@ -0,0 +1,66 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WithCustomTrigger = exports.Normal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_1 = require("@simplybusiness/icons");
+const react_1 = require("react");
+const dedupe_1 = __importDefault(require("classnames/dedupe"));
+const _1 = require(".");
+const Icon_1 = require("../Icon");
+const utils_1 = require("../../utils");
+const meta = {
+    title: "Components/DropdownMenu",
+    component: _1.DropdownMenu,
+    argTypes: (0, utils_1.excludeControls)("trigger", "style"),
+    decorators: [
+        Story => {
+            // eslint-disable-next-line global-require
+            require("./DropdownMenu.story.styles.css");
+            return ((0, jsx_runtime_1.jsx)(utils_1.StoryContainer, { children: (0, jsx_runtime_1.jsx)(Story, {}) }));
+        },
+    ],
+};
+const CustomTrigger = (0, react_1.forwardRef)((props) => {
+    const { className, open } = props, otherProps = __rest(props, ["className", "open"]);
+    const classes = (0, dedupe_1.default)({
+        "--is-open": open,
+    });
+    return ((0, jsx_runtime_1.jsxs)("button", Object.assign({ type: "button", className: className }, otherProps, { children: [open ? "Close" : "Open", " ", (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: icons_1.chevronDown, className: classes })] })));
+});
+exports.Normal = {
+    render: (args) => ((0, jsx_runtime_1.jsx)("div", { style: {
+            height: 300,
+        }, children: (0, jsx_runtime_1.jsxs)(_1.DropdownMenu, Object.assign({}, args, { children: [(0, jsx_runtime_1.jsx)(_1.DropdownMenu.Item, { children: "Home" }), (0, jsx_runtime_1.jsx)(_1.DropdownMenu.Item, { children: "My details" }), (0, jsx_runtime_1.jsx)(_1.DropdownMenu.Item, { children: "Sign out" })] })) })),
+    args: {
+        label: "Menu",
+    },
+};
+exports.WithCustomTrigger = {
+    render: (args) => ((0, jsx_runtime_1.jsx)("div", { style: {
+            height: 300,
+        }, className: "dropdownmenu-example-custom-trigger", children: (0, jsx_runtime_1.jsxs)(_1.DropdownMenu, Object.assign({}, args, { children: [(0, jsx_runtime_1.jsx)(_1.DropdownMenu.Item, { onClick: () => alert("Clicked Home"), children: "Home" }), (0, jsx_runtime_1.jsx)(_1.DropdownMenu.Item, { children: "My details" }), (0, jsx_runtime_1.jsx)(_1.DropdownMenu.Item, { children: "Sign out" })] })) })),
+    args: {
+        trigger: (0, jsx_runtime_1.jsx)(CustomTrigger, {}),
+    },
+    parameters: {
+        controls: {
+            exclude: ["label"],
+        },
+    },
+};
+exports.default = meta;
+//# sourceMappingURL=DropdownMenu.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenu.stories.js","sourceRoot":"","sources":["../../../../src/components/DropdownMenu/DropdownMenu.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AACA,iDAAoD;AACpD,iCAAmC;AACnC,+DAA2C;AAC3C,wBAAoD;AACpD,kCAA+B;AAC/B,uCAA8D;AAI9D,MAAM,IAAI,GAA8B;IACtC,KAAK,EAAE,yBAAyB;IAChC,SAAS,EAAE,eAAY;IACvB,QAAQ,EAAE,IAAA,uBAAe,EAAC,SAAS,EAAE,OAAO,CAAC;IAC7C,UAAU,EAAE;QACV,KAAK,CAAC,EAAE;YACN,0CAA0C;YAC1C,OAAO,CAAC,iCAAiC,CAAC,CAAC;YAE3C,OAAO,CACL,uBAAC,sBAAc,cACb,uBAAC,KAAK,KAAG,GACM,CAClB,CAAC;QACJ,CAAC;KACF;CACF,CAAC;AAOF,MAAM,aAAa,GAAG,IAAA,kBAAU,EAAC,CAAC,KAAyB,EAAE,EAAE;IAC7D,MAAM,EAAE,SAAS,EAAE,IAAI,KAAoB,KAAK,EAApB,UAAU,UAAK,KAAK,EAA1C,qBAAkC,CAAQ,CAAC;IACjD,MAAM,OAAO,GAAG,IAAA,gBAAU,EAAC;QACzB,WAAW,EAAE,IAAI;KAClB,CAAC,CAAC;IACH,OAAO,CACL,kDAAQ,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAE,SAAS,IAAM,UAAU,eACvD,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,OAAE,uBAAC,WAAI,IAAC,IAAI,EAAE,mBAAW,EAAE,SAAS,EAAE,OAAO,GAAI,KAClE,CACV,CAAC;AACJ,CAAC,CAAC,CAAC;AAEU,QAAA,MAAM,GAAc;IAC/B,MAAM,EAAE,CAAC,IAAuB,EAAE,EAAE,CAAC,CACnC,gCACE,KAAK,EAAE;YACL,MAAM,EAAE,GAAG;SACZ,YAED,wBAAC,eAAY,oBAAK,IAAI,eACpB,uBAAC,eAAY,CAAC,IAAI,uBAAyB,EAC3C,uBAAC,eAAY,CAAC,IAAI,6BAA+B,EACjD,uBAAC,eAAY,CAAC,IAAI,2BAA6B,KAClC,GACX,CACP;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;KACd;CACF,CAAC;AAEW,QAAA,iBAAiB,GAAc;IAC1C,MAAM,EAAE,CAAC,IAAuB,EAAE,EAAE,CAAC,CACnC,gCACE,KAAK,EAAE;YACL,MAAM,EAAE,GAAG;SACZ,EACD,SAAS,EAAC,qCAAqC,YAE/C,wBAAC,eAAY,oBAAK,IAAI,eAEpB,uBAAC,eAAY,CAAC,IAAI,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,qBAEnC,EACpB,uBAAC,eAAY,CAAC,IAAI,6BAA+B,EACjD,uBAAC,eAAY,CAAC,IAAI,2BAA6B,KAClC,GACX,CACP;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,uBAAC,aAAa,KAAG;KAC3B;IACD,UAAU,EAAE;QACV,QAAQ,EAAE;YACR,OAAO,EAAE,CAAC,OAAO,CAAC;SACnB;KACF;CACF,CAAC;AAEF,kBAAe,IAAI,CAAC"}

package/dist/cjs/components/DropdownMenu/DropdownMenu.test.d.ts

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

package/dist/cjs/components/DropdownMenu/DropdownMenu.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("react");
+const react_2 = require("@testing-library/react");
+const _1 = require(".");
+const CLASS_NAME = "mobius/DropdownMenu";
+const TRIGGER_CLASS_NAME = "mobius/DropdownMenuTrigger";
+const LIST_CLASS_NAME = "mobius/DropdownMenuList";
+const ITEM_CLASS_NAME = "mobius/DropdownMenuItem";
+const ACTIVE_ITEM_CLASS_NAME = "--is-active";
+describe("DropdownMenu", () => {
+    it("should render without errors", () => {
+        const component = (0, react_2.render)((0, jsx_runtime_1.jsx)(_1.DropdownMenu, { children: (0, jsx_runtime_1.jsx)(_1.DropdownMenu.Item, { children: "Home" }) }));
+        expect(component).toBeTruthy();
+    });
+    it("should use the provided elementType", () => {
+        var _a;
+        const { container } = (0, react_2.render)((0, jsx_runtime_1.jsx)(_1.DropdownMenu, { elementType: "span", children: (0, jsx_runtime_1.jsx)(_1.DropdownMenu.Item, { children: "Home" }) }));
+        expect((_a = container.firstElementChild) === null || _a === void 0 ? void 0 : _a.tagName).toBe("SPAN");
+    });
+    describe("given elementType", () => {
+        it("is not applied as element attribute", () => {
+            const { container } = (0, react_2.render)((0, jsx_runtime_1.jsx)(_1.DropdownMenu, { elementType: "ul", children: (0, jsx_runtime_1.jsx)(_1.DropdownMenu.Item, { elementType: "li", children: "Home" }) }));
+            expect(container.firstChild).not.toHaveAttribute("elementtype", "ul");
+            expect(react_2.screen.queryByRole("menuitem")).not.toHaveAttribute("elementtype", "li");
+        });
+    });
+    it("should use the provided label", () => {
+        const label = "Menu";
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(_1.DropdownMenu, { label: label, children: (0, jsx_runtime_1.jsx)(_1.DropdownMenu.Item, { children: "Home" }) }));
+        expect(react_2.screen.getByText(label)).toBeInTheDocument();
+    });
+    it("should use the provided trigger", () => {
+        const triggerText = "My custom trigger";
+        const Trigger = (0, react_1.forwardRef)(() => (0, jsx_runtime_1.jsx)("span", { children: triggerText }));
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(_1.DropdownMenu, { trigger: (0, jsx_runtime_1.jsx)(Trigger, {}), children: (0, jsx_runtime_1.jsx)(_1.DropdownMenu.Item, { children: "Home" }) }));
+        expect(react_2.screen.getByText(triggerText)).toBeInTheDocument();
+    });
+    it("should use the onClick handler on menu item", () => {
+        const customHandler = jest.fn();
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(_1.DropdownMenu, { children: (0, jsx_runtime_1.jsx)(_1.DropdownMenu.Item, { onClick: customHandler, children: "Home" }) }));
+        const trigger = react_2.screen.getByRole("button");
+        react_2.fireEvent.click(trigger);
+        const item = react_2.screen.getByRole("menuitem");
+        react_2.fireEvent.click(item);
+        expect(customHandler).toHaveBeenCalled();
+    });
+    it("should close menu upon item selection", () => {
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(_1.DropdownMenu, { children: (0, jsx_runtime_1.jsx)(_1.DropdownMenu.Item, { children: "Home" }) }));
+        const trigger = react_2.screen.getByRole("button");
+        react_2.fireEvent.click(trigger);
+        const item = react_2.screen.getByRole("menuitem");
+        react_2.fireEvent.click(item);
+        expect(trigger).toHaveAttribute("aria-expanded", "false");
+    });
+    describe("uses correct class names", () => {
+        it("uses Mobius class", () => {
+            const { container } = (0, react_2.render)((0, jsx_runtime_1.jsx)(_1.DropdownMenu, { children: (0, jsx_runtime_1.jsx)(_1.DropdownMenu.Item, { children: "Home" }) }));
+            expect(container.firstChild).toHaveClass("mobius");
+        });
+        it("uses base Mobius class", () => {
+            const { container } = (0, react_2.render)((0, jsx_runtime_1.jsx)(_1.DropdownMenu, { children: (0, jsx_runtime_1.jsx)(_1.DropdownMenu.Item, { children: "Home" }) }));
+            expect(container.firstChild).toHaveClass(CLASS_NAME);
+        });
+        it("includes custom class name", () => {
+            const { container } = (0, react_2.render)((0, jsx_runtime_1.jsx)(_1.DropdownMenu, { className: "my-class", children: (0, jsx_runtime_1.jsx)(_1.DropdownMenu.Item, { children: "Home" }) }));
+            expect(container.firstChild).toHaveClass("my-class");
+            expect(container.firstChild).toHaveClass(CLASS_NAME);
+        });
+        it("uses trigger class name", () => {
+            (0, react_2.render)((0, jsx_runtime_1.jsx)(_1.DropdownMenu, { className: "my-class", children: (0, jsx_runtime_1.jsx)(_1.DropdownMenu.Item, { children: "Home" }) }));
+            expect(react_2.screen.getByRole("button")).toHaveClass(TRIGGER_CLASS_NAME);
+        });
+        it("uses list class name", () => {
+            (0, react_2.render)((0, jsx_runtime_1.jsx)(_1.DropdownMenu, { className: "my-class", children: (0, jsx_runtime_1.jsx)(_1.DropdownMenu.Item, { children: "Home" }) }));
+            const trigger = react_2.screen.getByRole("button");
+            react_2.fireEvent.click(trigger);
+            expect(react_2.screen.getByRole("menu")).toHaveClass(LIST_CLASS_NAME);
+        });
+        it("uses list item class name", () => {
+            (0, react_2.render)((0, jsx_runtime_1.jsx)(_1.DropdownMenu, { className: "my-class", children: (0, jsx_runtime_1.jsx)(_1.DropdownMenu.Item, { children: "Home" }) }));
+            const trigger = react_2.screen.getByRole("button");
+            react_2.fireEvent.click(trigger);
+            expect(react_2.screen.getByRole("menuitem")).toHaveClass(ITEM_CLASS_NAME);
+        });
+        it("uses list item active class name", () => {
+            (0, react_2.render)((0, jsx_runtime_1.jsx)(_1.DropdownMenu, { className: "my-class", children: (0, jsx_runtime_1.jsx)(_1.DropdownMenu.Item, { children: "Home" }) }));
+            const trigger = react_2.screen.getByRole("button");
+            react_2.fireEvent.click(trigger);
+            const item = react_2.screen.getByRole("menuitem");
+            react_2.fireEvent.click(item);
+            expect(item).toHaveClass(ACTIVE_ITEM_CLASS_NAME);
+        });
+    });
+});
+//# sourceMappingURL=DropdownMenu.test.js.map

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

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

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

@@ -0,0 +1,15 @@
+import { Ref, RefAttributes, ReactNode } from "react";
+import { DOMProps } from "../../types/dom";
+import { ForwardedRefComponent } from "../../types/components";
+export type ItemElementType = HTMLLIElement;
+export interface ItemProps extends DOMProps, RefAttributes<ItemElementType> {
+    elementType?: string | React.ElementType;
+    /** Custom class name for setting specific CSS */
+    className?: string;
+    active?: boolean;
+    children?: ReactNode;
+    onClick?: () => void;
+}
+export type ItemRef = Ref<ItemElementType>;
+declare const Item: ForwardedRefComponent<ItemProps, ItemElementType>;
+export { Item };

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

@@ -0,0 +1,10 @@
+import { ForwardedRefComponent } from "../../types/components";
+import { DropdownMenuProps, DropdownMenuRef } from "./DropdownMenu";
+import type { DropdownMenuElementType } from "./DropdownMenu";
+import type { ItemProps as DropdownMenuItemProps, ItemRef as DropdownMenuItemRef, ItemElementType as DropdownMenuItemElementType } from "./Item";
+export interface DropdownMenuCompound extends ForwardedRefComponent<DropdownMenuProps, HTMLElement> {
+    Item: ForwardedRefComponent<DropdownMenuItemProps, HTMLLIElement>;
+}
+declare const DropdownMenu: DropdownMenuCompound;
+export type { DropdownMenuElementType, DropdownMenuProps, DropdownMenuRef, DropdownMenuItemProps, DropdownMenuItemRef, DropdownMenuItemElementType, };
+export { DropdownMenu };

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

@@ -0,0 +1,9 @@
+export interface ErrorMessageProps {
+    errorMessage?: string;
+    id?: string;
+    className?: string;
+}
+export declare const ErrorMessage: {
+    ({ id, errorMessage, className, }: ErrorMessageProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};

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

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

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

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LongMessage = exports.Normal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const _1 = require(".");
+const meta = {
+    title: "Forms/ErrorMessage",
+    component: _1.ErrorMessage,
+};
+exports.Normal = {
+    render: (args) => (0, jsx_runtime_1.jsx)(_1.ErrorMessage, Object.assign({}, args)),
+    args: {
+        errorMessage: "This is an error message",
+    },
+};
+exports.LongMessage = {
+    render: (args) => (0, jsx_runtime_1.jsx)(_1.ErrorMessage, Object.assign({}, args)),
+    args: {
+        errorMessage: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vestibulum, mauris ac egestas rutrum, dui urna imperdiet velit, ac malesuada velit augue eget orci. Duis id purus et elit tempus egestas ut eget tellus. Praesent tempus sit amet metus iaculis auctor. Morbi aliquet nibh sit amet neque congue dictum. Proin auctor pellentesque facilisis. Donec rutrum at ante a pulvinar. In hac habitasse platea dictumst. Mauris non blandit nulla. Duis facilisis fringilla cursus. Interdum et malesuada fames ac ante ipsum primis in faucibus.",
+    },
+};
+exports.default = meta;
+//# sourceMappingURL=ErrorMessage.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorMessage.stories.js","sourceRoot":"","sources":["../../../../src/components/ErrorMessage/ErrorMessage.stories.tsx"],"names":[],"mappings":";;;;AACA,wBAAoD;AAIpD,MAAM,IAAI,GAA8B;IACtC,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,eAAY;CACxB,CAAC;AAEW,QAAA,MAAM,GAAc;IAC/B,MAAM,EAAE,CAAC,IAAuB,EAAE,EAAE,CAAC,uBAAC,eAAY,oBAAK,IAAI,EAAI;IAC/D,IAAI,EAAE;QACJ,YAAY,EAAE,0BAA0B;KACzC;CACF,CAAC;AAEW,QAAA,WAAW,GAAc;IACpC,MAAM,EAAE,CAAC,IAAuB,EAAE,EAAE,CAAC,uBAAC,eAAY,oBAAK,IAAI,EAAI;IAC/D,IAAI,EAAE;QACJ,YAAY,EACV,giBAAgiB;KACniB;CACF,CAAC;AAEF,kBAAe,IAAI,CAAC"}

package/dist/cjs/components/ErrorMessage/ErrorMessage.test.d.ts

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

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

@@ -0,0 +1,32 @@
+"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/ErrorMessage";
+describe("Error message", () => {
+    it("should render without errors", () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.ErrorMessage, {}));
+    });
+    it("should not display when there is no message", () => {
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.ErrorMessage, {}));
+        expect(container.childNodes.length).toEqual(0);
+    });
+    it("should display when there is a message", () => {
+        const { getByText } = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.ErrorMessage, { errorMessage: "Oops" }));
+        expect(getByText("Oops")).toBeTruthy();
+    });
+    it("uses Mobius class", () => {
+        const { getByText } = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.ErrorMessage, { errorMessage: "Oops" }));
+        expect(getByText("Oops").closest("div")).toHaveClass("mobius");
+    });
+    it("uses base Mobius class", () => {
+        const { getByText } = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.ErrorMessage, { errorMessage: "Oops" }));
+        expect(getByText("Oops").closest("div")).toHaveClass(CLASS_NAME);
+    });
+    it("uses CSS classes", () => {
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.ErrorMessage, { errorMessage: "Oops", className: "custom-class" }));
+        expect(container.firstChild).toHaveClass("custom-class");
+    });
+});
+//# sourceMappingURL=ErrorMessage.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorMessage.test.js","sourceRoot":"","sources":["../../../../src/components/ErrorMessage/ErrorMessage.test.tsx"],"names":[],"mappings":";;;AAAA,kDAAgD;AAChD,wBAAiC;AAEjC,MAAM,UAAU,GAAG,qBAAqB,CAAC;AAEzC,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;IAC7B,EAAE,CAAC,8BAA8B,EAAE,GAAG,EAAE;QACtC,IAAA,cAAM,EAAC,uBAAC,eAAY,KAAG,CAAC,CAAC;IAC3B,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6CAA6C,EAAE,GAAG,EAAE;QACrD,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,cAAM,EAAC,uBAAC,eAAY,KAAG,CAAC,CAAC;QAC/C,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;IACjD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,wCAAwC,EAAE,GAAG,EAAE;QAChD,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,cAAM,EAAC,uBAAC,eAAY,IAAC,YAAY,EAAC,MAAM,GAAG,CAAC,CAAC;QACnE,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC;IACzC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mBAAmB,EAAE,GAAG,EAAE;QAC3B,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,cAAM,EAAC,uBAAC,eAAY,IAAC,YAAY,EAAC,MAAM,GAAG,CAAC,CAAC;QACnE,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;IACjE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,wBAAwB,EAAE,GAAG,EAAE;QAChC,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,cAAM,EAAC,uBAAC,eAAY,IAAC,YAAY,EAAC,MAAM,GAAG,CAAC,CAAC;QACnE,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IACnE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kBAAkB,EAAE,GAAG,EAAE;QAC1B,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,cAAM,EAC1B,uBAAC,eAAY,IAAC,YAAY,EAAC,MAAM,EAAC,SAAS,EAAC,cAAc,GAAG,CAC9D,CAAC;QACF,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC;IAC3D,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

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

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

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

@@ -0,0 +1,17 @@
+import { ReactElement, ReactNode, Ref, RefAttributes } from "react";
+import { DOMProps } from "../../types/dom";
+import { ForwardedRefComponent } from "../../types/components";
+export type LegendProps = {
+    id?: string;
+    className?: string;
+};
+export type FieldsetElementType = HTMLDivElement;
+export interface FieldsetProps extends DOMProps, RefAttributes<FieldsetElementType> {
+    legend?: string;
+    children: ReactNode;
+    className?: string;
+    legendComponent?: ReactElement<any>;
+}
+export type FieldsetRef = Ref<FieldsetElementType>;
+declare const Fieldset: ForwardedRefComponent<FieldsetProps, FieldsetElementType>;
+export { Fieldset };

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

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

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

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WithLegend = exports.Normal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Fieldset_1 = require("./Fieldset");
+const TextField_1 = require("../TextField");
+const utils_1 = require("../../utils");
+const meta = {
+    title: "Forms/Fieldset",
+    component: Fieldset_1.Fieldset,
+    argTypes: (0, utils_1.excludeControls)("legendComponent"),
+};
+exports.Normal = {
+    render: (args) => ((0, jsx_runtime_1.jsxs)(Fieldset_1.Fieldset, Object.assign({}, args, { children: [(0, jsx_runtime_1.jsx)(TextField_1.TextField, { label: "Full name" }), (0, jsx_runtime_1.jsx)(TextField_1.TextField, { label: "Street" }), (0, jsx_runtime_1.jsx)(TextField_1.TextField, { label: "Number" }), (0, jsx_runtime_1.jsx)(TextField_1.TextField, { label: "City" }), (0, jsx_runtime_1.jsx)(TextField_1.TextField, { label: "Postcode" })] }))),
+    args: {
+        legend: "",
+    },
+    decorators: [
+        Story => ((0, jsx_runtime_1.jsx)(utils_1.StoryContainer, { children: (0, jsx_runtime_1.jsx)(Story, {}) })),
+    ],
+};
+exports.WithLegend = {
+    render: (args) => ((0, jsx_runtime_1.jsxs)(Fieldset_1.Fieldset, Object.assign({}, args, { children: [(0, jsx_runtime_1.jsx)(TextField_1.TextField, { label: "Full name" }), (0, jsx_runtime_1.jsx)(TextField_1.TextField, { label: "Street" }), (0, jsx_runtime_1.jsx)(TextField_1.TextField, { label: "Number" }), (0, jsx_runtime_1.jsx)(TextField_1.TextField, { label: "City" }), (0, jsx_runtime_1.jsx)(TextField_1.TextField, { label: "Postcode" })] }))),
+    args: {
+        legend: "Contact Details",
+    },
+};
+exports.default = meta;
+//# sourceMappingURL=Fieldset.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Fieldset.stories.js","sourceRoot":"","sources":["../../../../src/components/Fieldset/Fieldset.stories.tsx"],"names":[],"mappings":";;;;AACA,yCAAqD;AACrD,4CAAyC;AACzC,uCAA8D;AAI9D,MAAM,IAAI,GAA0B;IAClC,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,mBAAQ;IACnB,QAAQ,EAAE,IAAA,uBAAe,EAAC,iBAAiB,CAAC;CAC7C,CAAC;AAEW,QAAA,MAAM,GAAc;IAC/B,MAAM,EAAE,CAAC,IAAmB,EAAE,EAAE,CAAC,CAC/B,wBAAC,mBAAQ,oBAAK,IAAI,eAChB,uBAAC,qBAAS,IAAC,KAAK,EAAC,WAAW,GAAG,EAC/B,uBAAC,qBAAS,IAAC,KAAK,EAAC,QAAQ,GAAG,EAC5B,uBAAC,qBAAS,IAAC,KAAK,EAAC,QAAQ,GAAG,EAC5B,uBAAC,qBAAS,IAAC,KAAK,EAAC,MAAM,GAAG,EAC1B,uBAAC,qBAAS,IAAC,KAAK,EAAC,UAAU,GAAG,KACrB,CACZ;IACD,IAAI,EAAE;QACJ,MAAM,EAAE,EAAE;KACX;IACD,UAAU,EAAE;QACV,KAAK,CAAC,EAAE,CAAC,CACP,uBAAC,sBAAc,cACb,uBAAC,KAAK,KAAG,GACM,CAClB;KACF;CACF,CAAC;AAEW,QAAA,UAAU,GAAc;IACnC,MAAM,EAAE,CAAC,IAAmB,EAAE,EAAE,CAAC,CAC/B,wBAAC,mBAAQ,oBAAK,IAAI,eAChB,uBAAC,qBAAS,IAAC,KAAK,EAAC,WAAW,GAAG,EAC/B,uBAAC,qBAAS,IAAC,KAAK,EAAC,QAAQ,GAAG,EAC5B,uBAAC,qBAAS,IAAC,KAAK,EAAC,QAAQ,GAAG,EAC5B,uBAAC,qBAAS,IAAC,KAAK,EAAC,MAAM,GAAG,EAC1B,uBAAC,qBAAS,IAAC,KAAK,EAAC,UAAU,GAAG,KACrB,CACZ;IACD,IAAI,EAAE;QACJ,MAAM,EAAE,iBAAiB;KAC1B;CACF,CAAC;AAEF,kBAAe,IAAI,CAAC"}

package/dist/cjs/components/Fieldset/Fieldset.test.d.ts

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

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

@@ -0,0 +1,12 @@
+"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 TextField_1 = require("../TextField");
+describe("Fieldset", () => {
+    it("should render without errors", () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Fieldset, { legend: "Shipping address", children: (0, jsx_runtime_1.jsx)(TextField_1.TextField, { "aria-label": "name" }) }));
+    });
+});
+//# sourceMappingURL=Fieldset.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Fieldset.test.js","sourceRoot":"","sources":["../../../../src/components/Fieldset/Fieldset.test.tsx"],"names":[],"mappings":";;;AAAA,kDAAgD;AAChD,wBAA6B;AAC7B,4CAAyC;AAEzC,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;IACxB,EAAE,CAAC,8BAA8B,EAAE,GAAG,EAAE;QACtC,IAAA,cAAM,EACJ,uBAAC,WAAQ,IAAC,MAAM,EAAC,kBAAkB,YACjC,uBAAC,qBAAS,kBAAY,MAAM,GAAG,GACtB,CACZ,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

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

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

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

@@ -0,0 +1,4 @@
+import { ForwardedRefComponent } from "../../types/components";
+import { FlexElementType, FlexProps } from "./types";
+declare const Flex: ForwardedRefComponent<FlexProps, FlexElementType>;
+export { Flex };

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

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

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

@@ -0,0 +1,147 @@
+"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 utils_1 = require("../../utils");
+const sizeOptions = [
+    "",
+    "var(--size-xs)",
+    "var(--size-sm)",
+    "var(--size-md)",
+    "var(--size-lg)",
+    "var(--size-xl)",
+    "var(--size-xxl)",
+];
+const meta = {
+    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, utils_1.excludeControls)("style", "role")),
+};
+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.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-xs)",
+        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-xs)",
+        rowGap: "",
+        columnGap: "",
+    },
+};
+exports.default = meta;
+//# 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/Flex/Flex.test.d.ts

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

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 {};