@simplybusiness/mobius 4.0.0 → 4.1.0

package/CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file, or link in
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [4.1.0] - 2023-12-01
+
+## Added
+
+- Added `<Popover>` component
+
 ## 4.0.0
 
 ### Fixed
@@ -432,6 +438,7 @@ Additionally, mobius and themes are available on the public NPM registry and can
 
 ## Github Links
 
+[4.1.0]: https://github.com/simplybusiness/mobius/releases/tag/v4.1.0
 [4.0.0]: https://github.com/simplybusiness/mobius/releases/tag/v4.0.0
 [3.12.2]: https://github.com/simplybusiness/mobius/releases/tag/v3.12.2
 [3.12.1]: https://github.com/simplybusiness/mobius/releases/tag/v3.12.1

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

@@ -0,0 +1,16 @@
+import { ReactElement, ReactNode, Ref, RefAttributes } from "react";
+import { DOMProps } from "../../types/dom";
+export type PopoverElementType = HTMLDivElement;
+export interface PopoverProps extends DOMProps, RefAttributes<PopoverElementType> {
+    children?: ReactNode;
+    trigger: ReactElement;
+    isOpen?: boolean;
+    /** Callback that fires each time the accordion is opened */
+    onOpen?: () => void;
+    /** Callback that fires each time the accordion is closed */
+    onClose?: () => void;
+    /** Custom class name for setting specific CSS */
+    className?: string;
+}
+export type PopoverRef = Ref<PopoverElementType>;
+export declare const Popover: (props: PopoverProps) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/Popover/Popover.js

@@ -0,0 +1,70 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Popover = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_1 = require("@simplybusiness/icons");
+const react_1 = require("react");
+const classnames_1 = __importDefault(require("classnames"));
+const react_tiny_popover_1 = require("react-tiny-popover");
+const hooks_1 = require("../../hooks");
+const Button_1 = require("../Button");
+const Icon_1 = require("../Icon");
+const Popover = (props) => {
+    const popoverRef = (0, react_1.useRef)(null);
+    const triggerRef = (0, react_1.useRef)(null);
+    const { trigger, children, isOpen, onOpen, onClose, className } = props;
+    const previousIsOpen = (0, react_1.useRef)(isOpen);
+    const hasExternalState = typeof isOpen !== "undefined";
+    const [open, setOpen] = (0, react_1.useState)(isOpen);
+    const containerClasses = (0, classnames_1.default)("mobius", "mobius/PopoverContainer", className);
+    const noop = () => { };
+    const openPopover = (0, react_1.useCallback)(() => {
+        setOpen(true);
+        if (onOpen) {
+            onOpen();
+        }
+    }, [onOpen]);
+    const closePopover = (0, react_1.useCallback)(() => {
+        setOpen(false);
+        if (onClose) {
+            onClose();
+        }
+    }, [onClose]);
+    const handleClick = () => {
+        if (open) {
+            closePopover();
+            return;
+        }
+        openPopover();
+    };
+    const triggerComponent = (0, react_1.cloneElement)(trigger, {
+        className: "mobius/PopoverToggle",
+        onClick: hasExternalState ? noop : handleClick,
+    });
+    (0, hooks_1.useWindowEvent)("keydown", e => {
+        if (open && e.key === "Escape") {
+            closePopover();
+        }
+    });
+    (0, react_1.useEffect)(() => {
+        if (isOpen) {
+            openPopover();
+            return;
+        }
+        // Prevent 'onClose' being called when
+        // 'isOpen === false' on initial render
+        if (previousIsOpen.current === isOpen) {
+            previousIsOpen.current = undefined;
+            return;
+        }
+        if (!isOpen) {
+            closePopover();
+        }
+    }, [isOpen, closePopover, openPopover]);
+    return ((0, jsx_runtime_1.jsx)(react_tiny_popover_1.Popover, { isOpen: !!open, positions: ["bottom"], ref: triggerRef, content: (0, jsx_runtime_1.jsx)("div", { className: containerClasses, ref: popoverRef, children: (0, jsx_runtime_1.jsxs)("div", { className: "mobius/Popover", children: [(0, jsx_runtime_1.jsx)("header", { className: "mobius/PopoverHeader", children: (0, jsx_runtime_1.jsx)(Button_1.Button, { type: "button", className: "mobius/PopoverCloseButton", onClick: handleClick, "aria-label": "Close", variant: "ghost", children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: icons_1.cross, size: "md", className: "mobius/PopoverCloseIcon" }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "mobius/PopoverBody", children: children })] }) }), children: triggerComponent }));
+};
+exports.Popover = Popover;
+//# sourceMappingURL=Popover.js.map

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

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

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

@@ -0,0 +1,28 @@
+import type { Meta } from "@storybook/react";
+import { Ref } from "react";
+import { Popover, PopoverProps } from "..";
+declare const _default: {
+    title: string;
+    component: (props: PopoverProps) => import("react/jsx-runtime").JSX.Element;
+    argTypes: {
+        isOpen: {
+            control: {
+                type: string;
+            };
+        };
+    };
+    decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/react/dist/types-0a347bb9").R, {
+        children?: import("react").ReactNode;
+        trigger: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+        isOpen?: boolean | undefined;
+        onOpen?: (() => void) | undefined;
+        onClose?: (() => void) | undefined;
+        className?: string | undefined;
+        id?: string | undefined;
+        ref?: Ref<HTMLDivElement> | undefined;
+        key?: import("react").Key | null | undefined;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+};
+export default _default;
+export declare const Normal: Meta<typeof Popover>;
+export declare const QCP: Meta<typeof Popover>;

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

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QCP = exports.Normal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const __1 = require("..");
+const excludeControls_1 = require("../../utils/excludeControls");
+exports.default = {
+    title: "Components/Popover",
+    component: __1.Popover,
+    argTypes: Object.assign({ isOpen: {
+            control: { type: "boolean" },
+        } }, (0, excludeControls_1.excludeControls)("className", "children", "trigger", "id", "onOpen", "onClose")),
+    decorators: [
+        Story => {
+            // eslint-disable-next-line global-require
+            require("./Popover.story.styles.css");
+            return (0, jsx_runtime_1.jsx)(Story, {});
+        },
+    ],
+};
+const QuestionIcon = (0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsxs)("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", width: "16px", height: "16px", ref: ref }, props, { children: [(0, jsx_runtime_1.jsxs)("g", { clipPath: "url(#clip0_1641_88567)", children: [(0, jsx_runtime_1.jsx)("path", { d: "M6.25 6.25002C6.25017 5.36011 6.91818 4.61203 7.80241 4.51155C8.68663 4.41107 9.50546 4.99019 9.7053 5.85737C9.90515 6.72456 9.42235 7.60364 8.58333 7.90027C8.23357 8.02393 7.99981 8.35471 8 8.72569V9.31253", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M8 11.0625C7.87919 11.0625 7.78125 11.1604 7.78125 11.2812C7.78125 11.4021 7.87919 11.5 8 11.5C8.12081 11.5 8.21875 11.4021 8.21875 11.2812C8.21875 11.1604 8.12081 11.0625 8 11.0625V11.0625", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("circle", { cx: "8", cy: "8", r: "6.5625", stroke: "currentColor" })] }), (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("clipPath", { id: "clip0_1641_88567", children: (0, jsx_runtime_1.jsx)("rect", { width: "16", height: "16", fill: "white" }) }) })] }))));
+exports.Normal = {
+    render: (args) => (0, jsx_runtime_1.jsx)(__1.Popover, Object.assign({}, args)),
+    args: {
+        isOpen: undefined,
+        children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "No way! Now I know everything I need to \uD83D\uDE80." }),
+        trigger: (0, jsx_runtime_1.jsx)(__1.Button, { variant: "primary", children: "If only I had more information" }),
+    },
+};
+exports.QCP = {
+    render: (args) => {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+        const handleClick = () => setIsOpen(!isOpen);
+        return ((0, jsx_runtime_1.jsx)("div", { className: "popover-example", children: (0, jsx_runtime_1.jsx)(__1.Button, { variant: "ghost", onClick: handleClick, children: (0, jsx_runtime_1.jsxs)(__1.Flex, { children: [(0, jsx_runtime_1.jsx)("span", { children: "Occurrence Limit" }), (0, jsx_runtime_1.jsx)(__1.Popover, Object.assign({}, args, { isOpen: isOpen }))] }) }) }));
+    },
+    args: {
+        trigger: (0, jsx_runtime_1.jsx)(QuestionIcon, {}),
+        children: ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "This is the maximum amount of money you'll get to cover a single incident that occurs during the policy period, regardless of when it's reported." })),
+    },
+};
+//# sourceMappingURL=Popover.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.stories.js","sourceRoot":"","sources":["../../../../src/components/Popover/Popover.stories.tsx"],"names":[],"mappings":";;;;AACA,iCAAkD;AAClD,0BAAyD;AACzD,iEAA8D;AAE9D,kBAAe;IACb,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,WAAO;IAClB,QAAQ,kBACN,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B,IACE,IAAA,iCAAe,EAChB,WAAW,EACX,UAAU,EACV,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,SAAS,CACV,CACF;IACD,UAAU,EAAE;QACV,KAAK,CAAC,EAAE;YACN,0CAA0C;YAC1C,OAAO,CAAC,4BAA4B,CAAC,CAAC;YAEtC,OAAO,uBAAC,KAAK,KAAG,CAAC;QACnB,CAAC;KACF;CAC6B,CAAC;AAIjC,MAAM,YAAY,GAAG,IAAA,kBAAU,EAC7B,CAAC,KAAwB,EAAE,GAAuB,EAAE,EAAE,CAAC,CACrD,+CACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,GAAG,EAAE,GAAG,IACJ,KAAK,eAET,+BAAG,QAAQ,EAAC,wBAAwB,aAClC,iCACE,CAAC,EAAC,gNAAgN,EAClN,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACtB,EACF,iCACE,CAAC,EAAC,+LAA+L,EACjM,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACtB,EACF,mCAAQ,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,CAAC,EAAC,QAAQ,EAAC,MAAM,EAAC,cAAc,GAAG,IACvD,EACJ,2CACE,qCAAU,EAAE,EAAC,kBAAkB,YAC7B,iCAAM,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,GAAG,GACnC,GACN,KACH,CACP,CACF,CAAC;AAEW,QAAA,MAAM,GAAyB;IAC1C,MAAM,EAAE,CAAC,IAAkB,EAAE,EAAE,CAAC,uBAAC,WAAO,oBAAK,IAAI,EAAI;IACrD,IAAI,EAAE;QACJ,MAAM,EAAE,SAAS;QACjB,QAAQ,EAAE,qHAAgD;QAC1D,OAAO,EAAE,uBAAC,UAAM,IAAC,OAAO,EAAC,SAAS,+CAAwC;KAC3E;CACF,CAAC;AAEW,QAAA,GAAG,GAAyB;IACvC,MAAM,EAAE,CAAC,IAAkB,EAAE,EAAE;QAC7B,sDAAsD;QACtD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAU,KAAK,CAAC,CAAC;QACrD,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;QAC7C,OAAO,CACL,gCAAK,SAAS,EAAC,iBAAiB,YAC9B,uBAAC,UAAM,IAAC,OAAO,EAAC,OAAO,EAAC,OAAO,EAAE,WAAW,YAC1C,wBAAC,QAAI,eACH,gEAA6B,EAC7B,uBAAC,WAAO,oBAAK,IAAI,IAAE,MAAM,EAAE,MAAM,IAAI,IAChC,GACA,GACL,CACP,CAAC;IACJ,CAAC;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,uBAAC,YAAY,KAAG;QACzB,QAAQ,EAAE,CACR,iNAIG,CACJ;KACF;CACF,CAAC"}

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

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

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

@@ -0,0 +1,105 @@
+"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 CONTAINER_ID = "react-tiny-popover-container";
+const CONTAINER_CLASS_NAME = "mobius/PopoverContainer";
+const TOGGLE_CLASS_NAME = "mobius/PopoverToggle";
+const POPOVER_CLASS_NAME = "mobius/Popover";
+const HEADER_CLASS_NAME = "mobius/PopoverHeader";
+const CLOSE_BUTTON_CLASS_NAME = "mobius/PopoverCloseButton";
+const CLOSE_ICON_CLASS_NAME = "mobius/PopoverCloseIcon";
+const BODY_CLASS_NAME = "mobius/PopoverBody";
+describe("Popover", () => {
+    it("should render without errors", () => {
+        const component = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Popover, { trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", children: "Click me" }), children: "Sample Text" }));
+        expect(component).toBeTruthy();
+    });
+    it("should open when clicked", async () => {
+        const sampleText = "Sample Text";
+        const triggerText = "Click me";
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Popover, { trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", children: triggerText }), children: sampleText }));
+        const button = react_1.screen.getByText(triggerText);
+        react_1.fireEvent.click(button);
+        await (0, react_1.waitFor)(() => {
+            expect(react_1.screen.queryByText(sampleText)).toBeInTheDocument();
+        });
+        const closeButton = react_1.screen.getByLabelText("Close");
+        react_1.fireEvent.click(closeButton);
+        expect(react_1.screen.queryByText(sampleText)).not.toBeInTheDocument();
+    });
+    describe("uses correct class names", () => {
+        it("uses correct classes", async () => {
+            var _a;
+            const sampleText = "Sample Text";
+            const triggerText = "Click me";
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Popover, { trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", children: triggerText }), children: sampleText }));
+            const button = react_1.screen.getByText(triggerText);
+            expect(button).toHaveClass(TOGGLE_CLASS_NAME);
+            react_1.fireEvent.click(button);
+            const popoverContainer = (_a = document.querySelector(`#${CONTAINER_ID}`)) === null || _a === void 0 ? void 0 : _a.firstChild;
+            await (0, react_1.waitFor)(() => {
+                expect(popoverContainer).toHaveClass("mobius");
+            });
+            const closeButton = react_1.screen.getByLabelText("Close");
+            const body = react_1.screen.getByText(sampleText);
+            expect(popoverContainer).toHaveClass(CONTAINER_CLASS_NAME);
+            expect(popoverContainer === null || popoverContainer === void 0 ? void 0 : popoverContainer.firstChild).toHaveClass(POPOVER_CLASS_NAME);
+            expect(closeButton.parentElement).toHaveClass(HEADER_CLASS_NAME);
+            expect(closeButton).toHaveClass(CLOSE_BUTTON_CLASS_NAME);
+            expect(closeButton.firstChild).toHaveClass(CLOSE_ICON_CLASS_NAME);
+            expect(body).toHaveClass(BODY_CLASS_NAME);
+        });
+        it("includes custom class name", async () => {
+            const customClassName = "my-class";
+            const sampleText = "Sample Text";
+            const triggerText = "Click me";
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Popover, { className: customClassName, trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", children: triggerText }), children: sampleText }));
+            const button = react_1.screen.getByText(triggerText);
+            react_1.fireEvent.click(button);
+            const popoverContainer = document.querySelector(`#${CONTAINER_ID}`);
+            await (0, react_1.waitFor)(() => {
+                expect(popoverContainer === null || popoverContainer === void 0 ? void 0 : popoverContainer.firstChild).toHaveClass(customClassName);
+            });
+        });
+    });
+    describe("events", () => {
+        describe("given isOpen prop is set", () => {
+            it("should not call onOpen or onClose when first rendered", () => {
+                const sampleText = "Sample Text";
+                const triggerText = "Click me";
+                const onOpen = jest.fn();
+                const onClose = jest.fn();
+                (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Popover, { isOpen: false, trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", children: triggerText }), onOpen: onOpen, onClose: onClose, children: sampleText }));
+                expect(onOpen).not.toHaveBeenCalled();
+                expect(onClose).not.toHaveBeenCalled();
+            });
+        });
+        it("calls onOpen when Popover is opened", () => {
+            const sampleText = "Sample Text";
+            const triggerText = "Click me";
+            const onOpen = jest.fn();
+            const onClose = jest.fn();
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Popover, { trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", children: triggerText }), onOpen: onOpen, onClose: onClose, children: sampleText }));
+            const button = react_1.screen.getByText(triggerText);
+            react_1.fireEvent.click(button);
+            expect(onOpen).toHaveBeenCalled();
+            expect(onClose).not.toHaveBeenCalled();
+        });
+        it("calls onClose when Popover is closed", () => {
+            const sampleText = "Sample Text";
+            const triggerText = "Click me";
+            const onOpen = jest.fn();
+            const onClose = jest.fn();
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Popover, { trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", children: triggerText }), onOpen: onOpen, onClose: onClose, children: sampleText }));
+            const button = react_1.screen.getByText(triggerText);
+            react_1.fireEvent.click(button);
+            const closeButton = react_1.screen.getByLabelText("Close");
+            react_1.fireEvent.click(closeButton);
+            expect(onClose).toHaveBeenCalled();
+            expect(onOpen).toHaveBeenCalledTimes(1);
+        });
+    });
+});
+//# sourceMappingURL=Popover.test.js.map

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

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

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

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

package/dist/cjs/components/Popover/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Popover"), exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/Popover/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Popover/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,4CAA0B"}

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

@@ -23,12 +23,13 @@ export * from "./Modal";
 export * from "./NumberField";
 export * from "./Option";
 export * from "./PasswordField";
+export * from "./Popover";
 export * from "./Progress";
 export * from "./Radio";
-export * from "./SVG";
 export * from "./Segment";
 export * from "./Select";
 export * from "./Slider";
+export * from "./SVG";
 export * from "./Table";
 export * from "./Text";
 export * from "./TextArea";

package/dist/cjs/components/index.js

@@ -39,12 +39,13 @@ __exportStar(require("./Modal"), exports);
 __exportStar(require("./NumberField"), exports);
 __exportStar(require("./Option"), exports);
 __exportStar(require("./PasswordField"), exports);
+__exportStar(require("./Popover"), exports);
 __exportStar(require("./Progress"), exports);
 __exportStar(require("./Radio"), exports);
-__exportStar(require("./SVG"), exports);
 __exportStar(require("./Segment"), exports);
 __exportStar(require("./Select"), exports);
 __exportStar(require("./Slider"), exports);
+__exportStar(require("./SVG"), exports);
 __exportStar(require("./Table"), exports);
 __exportStar(require("./Text"), exports);
 __exportStar(require("./TextArea"), exports);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,8CAA4B;AAC5B,0CAAwB;AACxB,wCAAsB;AACtB,gDAA8B;AAC9B,2CAAyB;AACzB,6CAA2B;AAC3B,8CAA4B;AAC5B,4CAA0B;AAC1B,2CAAyB;AACzB,iDAA+B;AAC/B,iDAA+B;AAC/B,6CAA2B;AAC3B,yCAAuB;AACvB,yCAAuB;AACvB,yCAAuB;AACvB,0CAAwB;AACxB,0CAAwB;AACxB,yCAAuB;AACvB,+CAA6B;AAC7B,yCAAuB;AACvB,qDAAmC;AACnC,0CAAwB;AACxB,gDAA8B;AAC9B,2CAAyB;AACzB,kDAAgC;AAChC,6CAA2B;AAC3B,0CAAwB;AACxB,wCAAsB;AACtB,4CAA0B;AAC1B,2CAAyB;AACzB,2CAAyB;AACzB,0CAAwB;AACxB,yCAAuB;AACvB,6CAA2B;AAC3B,kDAAgC;AAChC,8CAA4B;AAC5B,0CAAwB;AACxB,mDAAiC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,8CAA4B;AAC5B,0CAAwB;AACxB,wCAAsB;AACtB,gDAA8B;AAC9B,2CAAyB;AACzB,6CAA2B;AAC3B,8CAA4B;AAC5B,4CAA0B;AAC1B,2CAAyB;AACzB,iDAA+B;AAC/B,iDAA+B;AAC/B,6CAA2B;AAC3B,yCAAuB;AACvB,yCAAuB;AACvB,yCAAuB;AACvB,0CAAwB;AACxB,0CAAwB;AACxB,yCAAuB;AACvB,+CAA6B;AAC7B,yCAAuB;AACvB,qDAAmC;AACnC,0CAAwB;AACxB,gDAA8B;AAC9B,2CAAyB;AACzB,kDAAgC;AAChC,4CAA0B;AAC1B,6CAA2B;AAC3B,0CAAwB;AACxB,4CAA0B;AAC1B,2CAAyB;AACzB,2CAAyB;AACzB,wCAAsB;AACtB,0CAAwB;AACxB,yCAAuB;AACvB,6CAA2B;AAC3B,kDAAgC;AAChC,8CAA4B;AAC5B,0CAAwB;AACxB,mDAAiC"}