@ndlib/component-library 0.0.7

package/dist/components/elements/Button/Button.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from '.';
+declare const meta: Meta<typeof Button>;
+export default meta;
+type Story = StoryObj<typeof Button>;
+export declare const Default: Story;
+export declare const CustomColor: Story;
+export declare const TextButton: Story;

package/dist/components/elements/Button/Button.stories.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BUTTON_SIZE, BUTTON_TYPE, Button } from '.';
+import { GROUP_TYPE, Group } from '../Group';
+import { HEADING_SIZE, Heading } from '../text/Heading';
+import { Column } from '../layout/Column';
+import { COLOR } from '../../../theme/colors';
+const meta = {
+    title: 'Elements/Button',
+    component: Button,
+    tags: ['autodocs'],
+};
+export default meta;
+const sizes = [
+    { size: BUTTON_SIZE.LG, label: 'Large' },
+    { size: BUTTON_SIZE.MD, label: 'Medium' },
+    { size: BUTTON_SIZE.SM, label: 'Small' },
+];
+export const Default = {
+    render: (args) => (_jsx(Column, { children: sizes.map(size => (_jsxs(Group, Object.assign({ type: GROUP_TYPE.REGION }, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, { children: size.label })), _jsx(Button, Object.assign({}, args, { size: size.size, sx: { mt: 1 } }))] })))) })),
+    args: {
+        type: BUTTON_TYPE.DEFAULT,
+        children: "Click Me"
+    }
+};
+export const CustomColor = {
+    render: (args) => (_jsx(Column, { children: sizes.map(size => (_jsxs(Group, Object.assign({ type: GROUP_TYPE.REGION }, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, { children: size.label })), _jsx(Button, Object.assign({}, args, { size: size.size, color: COLOR.SECONDARY, sx: { mt: 1 } }))] })))) })),
+    args: {
+        type: BUTTON_TYPE.DEFAULT,
+        children: "Click Me"
+    }
+};
+export const TextButton = {
+    render: (args) => (_jsx(Column, { children: sizes.map(size => (_jsxs(Group, Object.assign({ type: GROUP_TYPE.REGION }, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, { children: size.label })), _jsx(Button, Object.assign({}, args, { size: size.size, sx: { mt: 1 } }))] })))) })),
+    args: {
+        type: BUTTON_TYPE.TEXT,
+        onClick: () => { },
+        children: "Click Me"
+    }
+};

package/dist/components/elements/Button/Button.test.d.ts

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

package/dist/components/elements/Button/Button.test.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fireEvent } from '@testing-library/react';
+import { vi } from 'vitest';
+import { render } from '../../../utils/test';
+import { Button } from ".";
+describe('Button', () => {
+    const mockClickHandler = vi.fn();
+    afterEach(() => {
+        vi.resetAllMocks();
+    });
+    it('renders without throwing an error', () => {
+        const { getByText } = render(_jsx(Button, { children: "Foo" }));
+        expect(getByText('Foo')).toBeInTheDocument();
+    });
+    it('responds to click handlers', () => {
+        const { getByRole } = render(_jsx(Button, { onClick: mockClickHandler }));
+        fireEvent.click(getByRole('button'));
+        expect(mockClickHandler).toHaveBeenCalledTimes(1);
+    });
+});

package/dist/components/elements/Button/index.d.ts

@@ -0,0 +1,20 @@
+/** @jsxImportSource theme-ui */
+import React from "react";
+import { StyledElementProps } from "../../../theme";
+import { COLOR } from "../../../theme/colors";
+export declare enum BUTTON_SIZE {
+    SM = "sm",
+    MD = "md",
+    LG = "lg"
+}
+export declare enum BUTTON_TYPE {
+    DEFAULT = "default",
+    TEXT = "text"
+}
+type ButtonProps = StyledElementProps<HTMLButtonElement, {
+    size?: BUTTON_SIZE;
+    type?: BUTTON_TYPE;
+    color?: COLOR;
+}>;
+export declare const Button: React.FC<ButtonProps>;
+export {};

package/dist/components/elements/Button/index.js

@@ -0,0 +1,82 @@
+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;
+};
+import { jsx as _jsx } from "theme-ui/jsx-runtime";
+import { COLOR, colors } from "../../../theme/colors";
+import { TYPOGRAPHY_TYPE, getTypographyStyles } from "../../../theme/typography";
+export var BUTTON_SIZE;
+(function (BUTTON_SIZE) {
+    BUTTON_SIZE["SM"] = "sm";
+    BUTTON_SIZE["MD"] = "md";
+    BUTTON_SIZE["LG"] = "lg";
+})(BUTTON_SIZE || (BUTTON_SIZE = {}));
+const typographyMap = {
+    [BUTTON_SIZE.SM]: TYPOGRAPHY_TYPE.CONTROL_SMALL,
+    [BUTTON_SIZE.MD]: TYPOGRAPHY_TYPE.CONTROL_MEDIUM,
+    [BUTTON_SIZE.LG]: TYPOGRAPHY_TYPE.CONTROL_LARGE,
+};
+const defaultPaddingX = {
+    [BUTTON_SIZE.SM]: 2,
+    [BUTTON_SIZE.MD]: 3,
+    [BUTTON_SIZE.LG]: 3,
+};
+const defaultPaddingY = {
+    [BUTTON_SIZE.SM]: 1,
+    [BUTTON_SIZE.MD]: 1,
+    [BUTTON_SIZE.LG]: 2
+};
+export var BUTTON_TYPE;
+(function (BUTTON_TYPE) {
+    BUTTON_TYPE["DEFAULT"] = "default";
+    BUTTON_TYPE["TEXT"] = "text";
+    // ARROW
+})(BUTTON_TYPE || (BUTTON_TYPE = {}));
+export const Button = (_a) => {
+    var { size: sizeParam, type: typeParam, color, sx } = _a, rest = __rest(_a, ["size", "type", "color", "sx"]);
+    let bg = COLOR.PRIMARY;
+    let highlightColor = COLOR.PRIMARY_HIGHLIGHT;
+    let textColor = COLOR.TEXT;
+    let highlightTextColor = undefined;
+    const type = typeParam || BUTTON_TYPE.DEFAULT;
+    const size = sizeParam || BUTTON_SIZE.MD;
+    if (type === BUTTON_TYPE.DEFAULT) {
+        bg = color || COLOR.PRIMARY;
+        highlightColor = bg === COLOR.PRIMARY
+            ? COLOR.PRIMARY_HIGHLIGHT
+            : bg === COLOR.SECONDARY
+                ? COLOR.SECONDARY_HIGHLIGHT
+                : bg;
+        textColor = bg === COLOR.PRIMARY
+            ? COLOR.TEXT_ON_PRIMARY
+            : bg === COLOR.SECONDARY
+                ? COLOR.TEXT_ON_SECONDARY
+                : COLOR.TEXT;
+    }
+    if (type === BUTTON_TYPE.TEXT) {
+        bg = COLOR.TRANSPARENT;
+        textColor = color || COLOR.PRIMARY;
+        highlightColor = textColor === COLOR.PRIMARY
+            ? COLOR.PRIMARY
+            : textColor === COLOR.SECONDARY
+                ? COLOR.SECONDARY
+                : bg;
+        highlightTextColor = COLOR.BACKGROUND;
+    }
+    const typography = typographyMap[size];
+    return (_jsx("button", Object.assign({ sx: Object.assign(Object.assign({ bg: bg || colors.primary, color: textColor, px: defaultPaddingX[size], py: defaultPaddingY[size], border: 'none', borderRadius: '4px', ":hover": {
+                bg: highlightColor,
+                color: highlightTextColor,
+                cursor: 'pointer',
+            }, ":focus": {
+                bg: highlightColor,
+                color: highlightTextColor
+            } }, getTypographyStyles(typography)), sx) }, rest)));
+};

package/dist/components/elements/Group/index.d.ts

@@ -0,0 +1,23 @@
+/** @jsxImportSource theme-ui */
+import React from 'react';
+import { StyledElementProps } from '../../../theme';
+type GroupContextType = {
+    level: number;
+    labelId: string;
+    trackHeadingRendered: () => void;
+    labelTargetId: string;
+    type?: GROUP_TYPE;
+};
+export declare enum GROUP_TYPE {
+    REGION = "region",
+    GROUP = "group",
+    RAW = "raw"
+}
+export declare const useGroup: () => GroupContextType;
+type GroupProps = Omit<StyledElementProps<HTMLDivElement, {
+    type?: GROUP_TYPE;
+}>, 'children'> & {
+    children: React.ReactNode | ((context: GroupContextType) => React.ReactNode);
+};
+export declare const Group: React.FC<GroupProps>;
+export {};

package/dist/components/elements/Group/index.js

@@ -0,0 +1,70 @@
+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;
+};
+import { jsx as _jsx } from "theme-ui/jsx-runtime";
+/** @jsxImportSource theme-ui */
+import React, { useEffect, useMemo, useRef } from 'react';
+import { useEnvironment } from '../../providers/env';
+export var GROUP_TYPE;
+(function (GROUP_TYPE) {
+    GROUP_TYPE["REGION"] = "region";
+    GROUP_TYPE["GROUP"] = "group";
+    GROUP_TYPE["RAW"] = "raw";
+})(GROUP_TYPE || (GROUP_TYPE = {}));
+const GROUP_TYPE_ROLE_MAP = {
+    [GROUP_TYPE.REGION]: 'region',
+    [GROUP_TYPE.GROUP]: 'group',
+    [GROUP_TYPE.RAW]: 'group'
+};
+const GroupContext = React.createContext({
+    level: 0,
+    labelId: '',
+    labelTargetId: '',
+    trackHeadingRendered: () => { }
+});
+export const useGroup = () => React.useContext(GroupContext);
+export const Group = (_a) => {
+    var { type: typeProp, children, sx } = _a, rest = __rest(_a, ["type", "children", "sx"]);
+    const { level: parentLevel } = useGroup();
+    const { flagInDevelopment } = useEnvironment();
+    const type = typeProp || GROUP_TYPE.REGION;
+    const randomSlug = useMemo(() => Math.random().toString().slice(2), []);
+    const labelId = `group-label-${randomSlug}`;
+    const labelTargetId = `labeled-${randomSlug}`;
+    const headingRenderTracker = useRef({
+        hasHeadingRendered: false
+    });
+    const trackHeadingRendered = () => {
+        headingRenderTracker.current.hasHeadingRendered = true;
+    };
+    useEffect(() => {
+        if (type === GROUP_TYPE.REGION) {
+            setTimeout(() => {
+                if (!headingRenderTracker.current.hasHeadingRendered) {
+                    flagInDevelopment('Every <Group> component of type "region" must render a <Heading> component within it');
+                }
+            }, 500);
+        }
+    }, [flagInDevelopment, type]);
+    const level = Math.min(parentLevel + (type === GROUP_TYPE.REGION ? 1 : 0), 5);
+    const contextValue = {
+        level,
+        type,
+        trackHeadingRendered,
+        labelId,
+        labelTargetId,
+    };
+    const Main = (_jsx(GroupContext.Provider, Object.assign({ value: contextValue }, { children: typeof children === 'function' ? children(contextValue) : children })));
+    if (type === GROUP_TYPE.RAW) {
+        return Main;
+    }
+    return (_jsx("div", Object.assign({ role: GROUP_TYPE_ROLE_MAP[type], "aria-labelledby": labelId, sx: Object.assign({ my: 2 }, sx) }, rest, { children: Main })));
+};

package/dist/components/elements/Link/Link.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Link } from '.';
+declare const meta: Meta<typeof Link>;
+export default meta;
+type Story = StoryObj<typeof Link>;
+export declare const Default: Story;

package/dist/components/elements/Link/Link.stories.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Link, LINK_SIZE } from '.';
+import { Group } from '../Group';
+import { HEADING_SIZE, Heading } from '../text/Heading';
+import { Column } from '../layout/Column';
+const meta = {
+    title: 'Elements/Link',
+    component: Link,
+};
+export default meta;
+const sizes = [
+    { size: LINK_SIZE.LG, label: 'Large' },
+    { size: LINK_SIZE.MD, label: 'Medium' },
+    { size: LINK_SIZE.SM, label: 'Small' },
+];
+export const Default = {
+    render: () => (_jsx(Column, { children: sizes.map(size => (_jsxs(Group, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, { children: size.label })), _jsx(Link, Object.assign({ size: size.size, to: "/" }, { children: "Click Me" }))] }))) })),
+    args: {
+        children: "Click Me"
+    }
+};

package/dist/components/elements/Link/Link.test.d.ts

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

package/dist/components/elements/Link/Link.test.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { render } from '../../../utils/test';
+import { Link } from ".";
+import { DefaultLink } from '../../providers/componentConfig';
+const CUSTOM_INTERNAL_TEST_ID = 'internal-link-test-id';
+const CUSTOM_EXTERNAL_TEST_ID = 'external-link-test-id';
+const CustomInternalLink = (props) => {
+    return (_jsx(DefaultLink, Object.assign({ "data-testid": CUSTOM_INTERNAL_TEST_ID }, props)));
+};
+const CustomExternalLink = (props) => {
+    return (_jsx(DefaultLink, Object.assign({ "data-testid": CUSTOM_EXTERNAL_TEST_ID }, props)));
+};
+describe('Link', () => {
+    it('renders default external link component without throwing', () => {
+        const { getByRole } = render(_jsx(Link, Object.assign({ to: "https://google.com" }, { children: "Foo" })));
+        expect(getByRole('link')).toBeInTheDocument();
+    });
+    it('renders default internal link component without throwing', () => {
+        const { getByRole } = render(_jsx(Link, Object.assign({ to: "/test/path" }, { children: "Foo" })));
+        expect(getByRole('link')).toBeInTheDocument();
+    });
+    it('renders custom external component if passed', () => {
+        const { getByTestId } = render(_jsx(Link, Object.assign({ to: "https://google.com" }, { children: "Foo" })), {
+            components: {
+                link: {
+                    externalLinkComponent: CustomExternalLink,
+                    internalLinkComponent: CustomInternalLink
+                }
+            }
+        });
+        expect(getByTestId(CUSTOM_EXTERNAL_TEST_ID)).toBeDefined();
+        expect(() => getByTestId(CUSTOM_INTERNAL_TEST_ID)).toThrow();
+    });
+    it('renders custom internal component if passed', () => {
+        const { getByTestId } = render(_jsx(Link, Object.assign({ to: "/test/route" }, { children: "Foo" })), {
+            components: {
+                link: {
+                    externalLinkComponent: CustomExternalLink,
+                    internalLinkComponent: CustomInternalLink
+                }
+            }
+        });
+        expect(getByTestId(CUSTOM_INTERNAL_TEST_ID)).toBeDefined();
+        expect(() => getByTestId(CUSTOM_EXTERNAL_TEST_ID)).toThrow();
+    });
+    it('passes styles to custom component', () => {
+        const { getByTestId } = render((_jsxs(_Fragment, { children: [_jsx(Link, Object.assign({ to: "https://google.com", sx: { mt: 1 } }, { children: "Foo" })), _jsx(Link, Object.assign({ to: "/test/route", sx: { mt: 1 } }, { children: "Foo" }))] })), {
+            components: {
+                link: {
+                    externalLinkComponent: CustomExternalLink,
+                    internalLinkComponent: CustomInternalLink
+                }
+            }
+        });
+        expect(getByTestId(CUSTOM_EXTERNAL_TEST_ID)).toHaveStyle(`margin-top: 0.25rem`);
+        expect(getByTestId(CUSTOM_INTERNAL_TEST_ID)).toHaveStyle(`margin-top: 0.25rem`);
+    });
+});

package/dist/components/elements/Link/index.d.ts

@@ -0,0 +1,14 @@
+/** @jsxImportSource theme-ui */
+import React from "react";
+import { StyledElementProps } from "../../../theme";
+type LinkProps = StyledElementProps<HTMLSpanElement, {
+    to: string;
+    size?: LINK_SIZE;
+}>;
+export declare enum LINK_SIZE {
+    SM = "sm",
+    MD = "md",
+    LG = "lg"
+}
+export declare const Link: React.FC<LinkProps>;
+export {};

package/dist/components/elements/Link/index.js

@@ -0,0 +1,41 @@
+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;
+};
+import { jsx as _jsx } from "theme-ui/jsx-runtime";
+import { useComponentConfig } from "../../providers/componentConfig";
+import { COLOR } from "../../../theme/colors";
+import { TYPOGRAPHY_TYPE, getTypographyStyles } from "../../../theme/typography";
+export var LINK_SIZE;
+(function (LINK_SIZE) {
+    LINK_SIZE["SM"] = "sm";
+    LINK_SIZE["MD"] = "md";
+    LINK_SIZE["LG"] = "lg";
+})(LINK_SIZE || (LINK_SIZE = {}));
+const SIZE_TYPOGRAPHY_MAP = {
+    [LINK_SIZE.SM]: TYPOGRAPHY_TYPE.CONTROL_SMALL,
+    [LINK_SIZE.MD]: TYPOGRAPHY_TYPE.CONTROL_MEDIUM,
+    [LINK_SIZE.LG]: TYPOGRAPHY_TYPE.CONTROL_LARGE
+};
+export const Link = (_a) => {
+    var { size, to, sx } = _a, rest = __rest(_a, ["size", "to", "sx"]);
+    const { link } = useComponentConfig();
+    const typography = SIZE_TYPOGRAPHY_MAP[size || LINK_SIZE.MD];
+    const InternalLink = link.internalLinkComponent;
+    const ExternalLink = link.externalLinkComponent;
+    const isExternal = link.externalMatcher.test(to);
+    const styles = Object.assign(Object.assign({ color: COLOR.PRIMARY }, getTypographyStyles(typography)), sx);
+    if (isExternal) {
+        return _jsx(ExternalLink, Object.assign({ to: to }, rest, { sx: styles }));
+    }
+    else {
+        return _jsx(InternalLink, Object.assign({ to: to }, rest, { sx: styles }));
+    }
+};

package/dist/components/elements/layout/Box.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+/** @jsxImportSource theme-ui */
+import { StyledElementProps } from "../../../theme";
+type BoxProps = StyledElementProps<HTMLDivElement>;
+export declare const Box: React.FC<BoxProps>;
+export {};

package/dist/components/elements/layout/Box.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "theme-ui/jsx-runtime";
+export const Box = (props) => {
+    return _jsx("div", Object.assign({}, props));
+};

package/dist/components/elements/layout/Box.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Box as BoxComponent } from './Box';
+declare const meta: Meta<typeof BoxComponent>;
+export default meta;
+type Story = StoryObj<typeof BoxComponent>;
+export declare const Box: Story;

package/dist/components/elements/layout/Box.stories.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box as BoxComponent } from './Box';
+import { COLOR } from '../../../theme/colors';
+const meta = {
+    title: 'Elements/Layout/Box',
+    component: BoxComponent,
+    tags: ['autodocs']
+};
+export default meta;
+export const Box = {
+    render: () => (_jsx(BoxComponent, Object.assign({ sx: { p: 1, bg: COLOR.PRIMARY } }, { children: _jsx(BoxComponent, { sx: { p: 1, bg: COLOR.SECONDARY } }) }))),
+};

package/dist/components/elements/layout/Column.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+/** @jsxImportSource theme-ui */
+import { StyledElementProps } from "../../../theme";
+import { FlexHelperProps } from "./Row";
+type ColumnProps = StyledElementProps<HTMLDivElement, FlexHelperProps>;
+export declare const Column: React.FC<ColumnProps>;
+export {};

package/dist/components/elements/layout/Column.js

@@ -0,0 +1,18 @@
+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;
+};
+import { jsx as _jsx } from "theme-ui/jsx-runtime";
+import { convertFlexHelperProps } from "./Row";
+export const Column = (_a) => {
+    var { sx, children } = _a, rest = __rest(_a, ["sx", "children"]);
+    const flexStyles = convertFlexHelperProps(rest);
+    return _jsx("div", Object.assign({}, rest, { sx: Object.assign(Object.assign(Object.assign({}, flexStyles), sx), { display: 'flex', flexDirection: 'column' }) }, { children: children }));
+};

package/dist/components/elements/layout/Flex.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Row } from './Row';
+declare const meta: Meta<typeof Row>;
+export default meta;
+type Story = StoryObj<typeof Row>;
+export declare const Columns: Story;
+export declare const Rows: Story;
+export declare const FlexHelpers: Story;
+export declare const Centered: Story;

package/dist/components/elements/layout/Flex.stories.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Column } from './Column';
+import { Row } from './Row';
+import { Paragraph } from '../text/Paragraph';
+import { COLOR } from '../../../theme/colors';
+const meta = {
+    title: 'Elements/Layout/Flex',
+    component: Row,
+    tags: ['autodocs']
+};
+export default meta;
+export const Columns = {
+    render: () => (_jsxs(Row, Object.assign({ justify: 'space-between' }, { children: [_jsx(Column, { children: _jsx(Paragraph, { children: "Column 1" }) }), _jsx(Column, { children: _jsx(Paragraph, { children: "Column 2" }) }), _jsx(Column, { children: _jsx(Paragraph, { children: "Column 3" }) })] }))),
+};
+export const Rows = {
+    render: () => (_jsxs(Column, { children: [_jsx(Row, { children: _jsx(Paragraph, { children: "Row 1" }) }), _jsx(Row, { children: _jsx(Paragraph, { children: "Row 2" }) }), _jsx(Row, { children: _jsx(Paragraph, { children: "Row 3" }) })] })),
+};
+export const FlexHelpers = {
+    render: () => (_jsxs(Row, Object.assign({ justify: "space-between" }, { children: [_jsx(Column, Object.assign({ align: "flex-end", grow: 1, sx: { bg: COLOR.PRIMARY, color: COLOR.TEXT_ON_PRIMARY } }, { children: _jsx(Row, { children: _jsx(Paragraph, { children: "Right-aligned" }) }) })), _jsx(Column, Object.assign({ grow: 1 }, { children: _jsx(Paragraph, { children: "Growing Column...................................................." }) })), _jsx(Column, Object.assign({ shrink: 1, sx: { bg: COLOR.PRIMARY, color: COLOR.TEXT_ON_PRIMARY } }, { children: _jsx(Paragraph, { children: "Shrinking Column" }) }))] }))),
+};
+export const Centered = {
+    render: () => (_jsx(Row, Object.assign({ centered: true, sx: { width: '100%', height: '100px', border: 'solid black 1px' } }, { children: _jsx(Paragraph, { children: "Hello World" }) }))),
+};

package/dist/components/elements/layout/Flex.test.d.ts

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

package/dist/components/elements/layout/Flex.test.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '../../../utils/test';
+import { Row } from "./Row";
+import { Column } from "./Column";
+describe('Row', () => {
+    it('renders without throwing an error', () => {
+        const { getByText } = render(_jsx(Row, { children: "Foo" }));
+        expect(getByText('Foo')).toBeInTheDocument();
+    });
+    it('converts helper props to styles', () => {
+        const { getByText } = render(_jsx(Row, Object.assign({ grow: 1, shrink: 1, basis: "100px", align: "baseline", justify: "flex-start" }, { children: "Foo" })));
+        const rendered = getByText('Foo');
+        expect(rendered).toHaveStyle('flex-grow: 1');
+        expect(rendered).toHaveStyle('flex-shrink: 1');
+        expect(rendered).toHaveStyle('flex-basis: 100px');
+        expect(rendered).toHaveStyle('align-items: baseline');
+        expect(rendered).toHaveStyle('justify-content: flex-start');
+    });
+});
+describe('Column', () => {
+    it('renders without throwing an error', () => {
+        const { getByText } = render(_jsx(Column, { children: "Foo" }));
+        expect(getByText('Foo')).toBeInTheDocument();
+    });
+    it('converts helper props to styles', () => {
+        const { getByText } = render(_jsx(Column, Object.assign({ grow: 1, shrink: 1, basis: "100px", align: "baseline", justify: "flex-start" }, { children: "Foo" })));
+        const rendered = getByText('Foo');
+        expect(rendered).toHaveStyle('flex-grow: 1');
+        expect(rendered).toHaveStyle('flex-shrink: 1');
+        expect(rendered).toHaveStyle('flex-basis: 100px');
+        expect(rendered).toHaveStyle('align-items: baseline');
+        expect(rendered).toHaveStyle('justify-content: flex-start');
+    });
+});

package/dist/components/elements/layout/Row.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+/** @jsxImportSource theme-ui */
+import { CSSProperties, ThemeUICSSProperties } from "theme-ui";
+import { StyledElementProps } from "../../../theme";
+export declare const convertFlexHelperProps: (props: FlexHelperProps) => ThemeUICSSProperties;
+export type FlexHelperProps = {
+    grow?: number;
+    shrink?: number;
+    basis?: string;
+    flex?: string;
+    align?: CSSProperties['alignItems'];
+    justify?: CSSProperties['justifyContent'];
+    centered?: boolean;
+};
+type RowProps = StyledElementProps<HTMLDivElement, FlexHelperProps>;
+export declare const Row: React.FC<RowProps>;
+export {};

package/dist/components/elements/layout/Row.js

@@ -0,0 +1,44 @@
+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;
+};
+import { jsx as _jsx } from "theme-ui/jsx-runtime";
+// Putting shared utils and types here so autodocs can pick them up
+export const convertFlexHelperProps = (props) => {
+    const styleObject = {};
+    if (props.grow) {
+        styleObject.flexGrow = props.grow;
+    }
+    if (props.shrink) {
+        styleObject.flexShrink = props.shrink;
+    }
+    if (props.flex) {
+        styleObject.flex = props.flex;
+    }
+    if (props.basis) {
+        styleObject.flexBasis = props.basis;
+    }
+    if (props.centered) {
+        styleObject.alignItems = 'center';
+        styleObject.justifyContent = 'center';
+    }
+    if (props.align) {
+        styleObject.alignItems = props.align;
+    }
+    if (props.justify) {
+        styleObject.justifyContent = props.justify;
+    }
+    return styleObject;
+};
+export const Row = (_a) => {
+    var { sx, children } = _a, rest = __rest(_a, ["sx", "children"]);
+    const flexStyles = convertFlexHelperProps(rest);
+    return _jsx("div", Object.assign({}, rest, { sx: Object.assign(Object.assign(Object.assign({}, flexStyles), sx), { display: 'flex', flexDirection: 'row' }) }, { children: children }));
+};

package/dist/components/elements/text/Heading/Heading.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Heading } from '.';
+declare const meta: Meta<typeof Heading>;
+export default meta;
+type Story = StoryObj<typeof Heading>;
+export declare const Default: Story;
+export declare const Color: Story;
+export declare const Underline: Story;