@ndlib/component-library 0.0.7-9.1

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

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "theme-ui/jsx-runtime";
+import React from 'react';
+export const Box = React.forwardRef((props, ref) => (_jsx("div", Object.assign({}, props, { ref: ref }))));

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,8 @@
+import React from 'react';
+import { FlexHelperProps } from './Row';
+export declare const Column: React.ForwardRefExoticComponent<{
+    sx?: import("../../../theme").StylesProp | undefined;
+    children?: React.ReactNode;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> & FlexHelperProps & {
+    htmlFor?: string | undefined;
+} & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,19 @@
+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 React from 'react';
+import { convertFlexHelperProps } from './Row';
+export const Column = React.forwardRef((_a, ref) => {
+    var { sx, children } = _a, rest = __rest(_a, ["sx", "children"]);
+    const flexStyles = convertFlexHelperProps(rest);
+    return (_jsx("div", Object.assign({ ref: ref }, 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,10 @@
+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 ResponsiveRow: Story;
+export declare const FlexHelpers: Story;
+export declare const Centered: Story;

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

@@ -0,0 +1,26 @@
+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 ResponsiveRow = {
+    render: () => (_jsxs(Row, Object.assign({ justify: "space-between", breakpoint: 0 }, { 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 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,20 @@
+import { CSSProperties, ThemeUICSSProperties } from 'theme-ui';
+import React from 'react';
+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;
+};
+export declare const Row: React.ForwardRefExoticComponent<{
+    sx?: import("../../../theme").StylesProp | undefined;
+    children?: React.ReactNode;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> & FlexHelperProps & {
+    breakpoint?: number | undefined;
+} & {
+    htmlFor?: string | undefined;
+} & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,52 @@
+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 React from 'react';
+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 = React.forwardRef((_a, ref) => {
+    var { sx, children, breakpoint: breakpointParam } = _a, rest = __rest(_a, ["sx", "children", "breakpoint"]);
+    const flexStyles = convertFlexHelperProps(rest);
+    let flexDirection = 'row';
+    if (breakpointParam !== undefined) {
+        flexDirection = [];
+        for (let i = 0; i <= breakpointParam; i++) {
+            flexDirection.push('column');
+        }
+        flexDirection.push('row');
+    }
+    return (_jsx("div", Object.assign({}, rest, { ref: ref, sx: Object.assign(Object.assign(Object.assign({}, flexStyles), sx), { flexDirection, display: 'flex' }) }, { 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;

package/dist/components/elements/text/Heading/Heading.stories.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { GROUP_TYPE, Group } from '../../Group';
+import { HEADING_SIZE, Heading } from '.';
+import { Column } from '../../layout/Column';
+import { COLOR } from '../../../../theme/colors';
+const meta = {
+    title: 'Elements/Heading',
+    component: Heading,
+    tags: ['autodocs'],
+};
+export default meta;
+const sizes = [
+    { size: HEADING_SIZE.XL, label: 'Extra Large (Default Level 1)' },
+    { size: HEADING_SIZE.LG, label: 'Large (Default Level 2)' },
+    { size: HEADING_SIZE.MD, label: 'Medium (Default Level 3)' },
+    { size: HEADING_SIZE.SM, label: 'Small (Default Level 4-6)' },
+];
+export const Default = {
+    render: () => (_jsx(Column, { children: sizes.map((size) => (_jsx(Group, Object.assign({ type: GROUP_TYPE.REGION }, { children: _jsx(Heading, Object.assign({ size: size.size }, { children: size.label })) })))) })),
+    args: {
+        children: 'Heading',
+    },
+};
+export const Color = {
+    render: () => (_jsx(Column, { children: sizes.map((size) => (_jsx(Group, Object.assign({ type: GROUP_TYPE.REGION }, { children: _jsx(Heading, Object.assign({ size: size.size, sx: { color: COLOR.TEXT } }, { children: size.label })) })))) })),
+    args: {
+        children: 'Heading',
+    },
+};
+export const Underline = {
+    render: () => (_jsx(Column, { children: sizes.map((size) => (_jsx(Group, Object.assign({ type: GROUP_TYPE.REGION }, { children: _jsx(Heading, Object.assign({ size: size.size, underline: true }, { children: size.label })) })))) })),
+    args: {
+        children: 'Heading',
+    },
+};

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

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

package/dist/components/elements/text/Heading/Heading.test.js

@@ -0,0 +1,51 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { vi } from 'vitest';
+import { render as _render } from '../../../../utils/test';
+import { Heading } from '.';
+import { GROUP_TYPE, Group } from '../../Group';
+import { ENVIRONMENT } from '../../../providers/env';
+const render = (component) => {
+    return _render(component, { env: ENVIRONMENT.DEV });
+};
+describe('Heading', () => {
+    const originalError = console.error;
+    beforeEach(() => {
+        console.error = vi.fn();
+    });
+    afterEach(() => {
+        console.error = originalError;
+        vi.useRealTimers();
+    });
+    it('renders without an error if passed standalone prop', () => {
+        const { getByText } = render(_jsx(Heading, Object.assign({ standalone: true }, { children: "Foo" })));
+        expect(getByText('Foo')).toBeInTheDocument();
+    });
+    it('renders without an error if used within region Group component', () => {
+        const { getByText } = render(_jsx(Group, { children: _jsx(Heading, { children: "Foo" }) }));
+        expect(getByText('Foo')).toBeInTheDocument();
+    });
+    it('throws if used outside a Group component', () => __awaiter(void 0, void 0, void 0, function* () {
+        expect(() => render(_jsx(Heading, { children: "Foo" }))).toThrow();
+    }));
+    it('throws if used within non-region Group component', () => __awaiter(void 0, void 0, void 0, function* () {
+        expect(() => render(_jsx(Group, Object.assign({ type: GROUP_TYPE.GROUP }, { children: _jsx(Heading, { children: "Foo" }) })))).toThrow();
+    }));
+    it('labels group target automatically', () => {
+        const { getByLabelText } = render(_jsx(Group, { children: _jsx(Heading, { children: "Foo" }) }));
+        expect(getByLabelText('Foo')).toBeDefined();
+    });
+    it('is required to render region Group component', () => __awaiter(void 0, void 0, void 0, function* () {
+        vi.useFakeTimers();
+        render(_jsx(Group, { children: "Foo" }));
+        expect(() => vi.runAllTimers()).toThrow();
+    }));
+});

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { TYPOGRAPHY_TYPE } from '../../../../theme/typography';
+import { StyledElementProps } from '../../../../theme';
+import { COLOR } from '../../../../theme/colors';
+type HeaderProps = StyledElementProps<HTMLSpanElement, {
+    size?: HEADING_SIZE;
+    standalone?: boolean;
+    underline?: boolean;
+    underlineColor?: COLOR;
+    typography?: TYPOGRAPHY_TYPE;
+    level?: number;
+}>;
+export declare enum HEADING_SIZE {
+    SM = "sm",
+    MD = "md",
+    LG = "lg",
+    XL = "xl"
+}
+export declare const Heading: React.FC<HeaderProps>;
+export {};

package/dist/components/elements/text/Heading/index.js

@@ -0,0 +1,62 @@
+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 { useEffect } from 'react';
+import { getTypographyStyles, TYPOGRAPHY_TYPE, } from '../../../../theme/typography';
+import { GROUP_TYPE, useGroup } from '../../Group';
+import { COLOR } from '../../../../theme/colors';
+import { useEnvironment } from '../../../providers/env';
+export var HEADING_SIZE;
+(function (HEADING_SIZE) {
+    HEADING_SIZE["SM"] = "sm";
+    HEADING_SIZE["MD"] = "md";
+    HEADING_SIZE["LG"] = "lg";
+    HEADING_SIZE["XL"] = "xl";
+})(HEADING_SIZE || (HEADING_SIZE = {}));
+const SIZE_TYPOGRAPHY_MAP = {
+    [HEADING_SIZE.SM]: TYPOGRAPHY_TYPE.HEADING_SMALL,
+    [HEADING_SIZE.MD]: TYPOGRAPHY_TYPE.HEADING_MEDIUM,
+    [HEADING_SIZE.LG]: TYPOGRAPHY_TYPE.HEADING_LARGE,
+    [HEADING_SIZE.XL]: TYPOGRAPHY_TYPE.HEADING_XLARGE,
+};
+const LEVEL_TYPOGRAPHY_MAP = {
+    1: TYPOGRAPHY_TYPE.HEADING_XLARGE,
+    2: TYPOGRAPHY_TYPE.HEADING_LARGE,
+    3: TYPOGRAPHY_TYPE.HEADING_MEDIUM,
+    4: TYPOGRAPHY_TYPE.HEADING_SMALL,
+    5: TYPOGRAPHY_TYPE.HEADING_SMALL,
+    6: TYPOGRAPHY_TYPE.HEADING_SMALL,
+};
+export const Heading = (_a) => {
+    var { sx, size, standalone, underline, underlineColor, typography: typographyProp, level: levelParam } = _a, rest = __rest(_a, ["sx", "size", "standalone", "underline", "underlineColor", "typography", "level"]);
+    const { level: groupLevel, labelId, type, trackHeadingRendered } = useGroup();
+    const { flagInDevelopment } = useEnvironment();
+    const level = levelParam || groupLevel;
+    useEffect(() => {
+        trackHeadingRendered();
+    });
+    let typography = TYPOGRAPHY_TYPE.HEADING_MEDIUM;
+    if (typographyProp) {
+        typography = typographyProp;
+    }
+    else if (size) {
+        typography = SIZE_TYPOGRAPHY_MAP[size];
+    }
+    else if (level) {
+        typography =
+            LEVEL_TYPOGRAPHY_MAP[level];
+    }
+    if (type !== GROUP_TYPE.REGION && !standalone) {
+        flagInDevelopment('Heading component should be used within a Group component with property type={GROUP_TYPE.REGION} or given the standalone flag');
+    }
+    return (_jsx("div", Object.assign({ id: labelId, role: "heading", "aria-level": level, sx: Object.assign(Object.assign({ py: 0, borderBottom: underline ? 'solid 2px' : undefined, borderBottomColor: underlineColor ? underlineColor : COLOR.SECONDARY, color: COLOR.PRIMARY }, getTypographyStyles(typography)), sx) }, rest)));
+};

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

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

package/dist/components/elements/text/Inline/Inline.stories.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Bold, Italic } from '.';
+import { Paragraph } from '../Paragraph';
+const meta = {
+    title: 'Elements/Inline',
+    component: Bold,
+    tags: ['autodocs'],
+};
+export default meta;
+export const Default = {
+    render: () => (_jsxs(Paragraph, { children: ["Text with ", _jsx(Bold, { children: "bold content" }), " and ", _jsx(Italic, { children: "italic content" })] })),
+};

package/dist/components/elements/text/Inline/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { StyledElementProps } from '../../../../theme';
+type InlineProps = StyledElementProps<HTMLSpanElement>;
+export declare const Bold: React.FC<InlineProps>;
+export declare const Italic: React.FC<InlineProps>;
+export {};

package/dist/components/elements/text/Inline/index.js

@@ -0,0 +1,21 @@
+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 { FONT_WEIGHT } from '../../../../theme/typography';
+export const Bold = (_a) => {
+    var { sx } = _a, rest = __rest(_a, ["sx"]);
+    return (_jsx("span", Object.assign({ sx: Object.assign(Object.assign({}, sx), { fontWeight: FONT_WEIGHT.BOLD }) }, rest)));
+};
+export const Italic = (_a) => {
+    var { sx } = _a, rest = __rest(_a, ["sx"]);
+    return (_jsx("span", Object.assign({ sx: Object.assign(Object.assign({}, sx), { fontStyle: 'italic' }) }, rest)));
+};

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

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

package/dist/components/elements/text/Label/Label.stories.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { GROUP_TYPE, Group } from '../../Group';
+import { LABEL_SIZE, Label } from '.';
+import { Column } from '../../layout/Column';
+const meta = {
+    title: 'Elements/Label',
+    component: Label,
+};
+export default meta;
+const sizes = [
+    { size: LABEL_SIZE.LG, label: 'Large' },
+    { size: LABEL_SIZE.MD, label: 'Medium' },
+    { size: LABEL_SIZE.SM, label: 'Small' },
+];
+export const Default = {
+    render: () => (_jsx(Column, { children: sizes.map((size) => (_jsx(Group, Object.assign({ type: GROUP_TYPE.GROUP }, { children: _jsx(Label, Object.assign({ size: size.size }, { children: size.label })) })))) })),
+    args: {
+        children: 'Label',
+    },
+};

package/dist/components/elements/text/Label/Label.test.d.ts

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

package/dist/components/elements/text/Label/Label.test.js

@@ -0,0 +1,56 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { vi } from 'vitest';
+import { render as _render } from '../../../../utils/test';
+import { Label } from '.';
+import { GROUP_TYPE, Group } from '../../Group';
+import { ENVIRONMENT } from '../../../providers/env';
+import userEvent from '@testing-library/user-event';
+import { waitFor } from '@testing-library/react';
+const render = (component) => {
+    return _render(component, { env: ENVIRONMENT.DEV });
+};
+describe('Label', () => {
+    const originalError = console.error;
+    beforeEach(() => {
+        console.error = vi.fn();
+    });
+    afterEach(() => {
+        console.error = originalError;
+        vi.useRealTimers();
+    });
+    it('renders without an error if passed standalone prop', () => {
+        const { getByText } = render(_jsx(Label, Object.assign({ standalone: true }, { children: "Foo" })));
+        expect(getByText('Foo')).toBeInTheDocument();
+    });
+    it('renders without an error if used within region Group component', () => {
+        const { getByText } = render(_jsx(Group, Object.assign({ type: GROUP_TYPE.GROUP }, { children: _jsx(Label, { children: "Foo" }) })));
+        expect(getByText('Foo')).toBeInTheDocument();
+    });
+    it('throws if used outside a Group component', () => __awaiter(void 0, void 0, void 0, function* () {
+        expect(() => render(_jsx(Label, { children: "Foo" }))).toThrow();
+    }));
+    it('throws if used within non-group-type Group component', () => __awaiter(void 0, void 0, void 0, function* () {
+        expect(() => render(_jsx(Group, Object.assign({ type: GROUP_TYPE.REGION }, { children: _jsx(Label, { children: "Foo" }) })))).toThrow();
+    }));
+    it('labels group target automatically', () => {
+        const { getByLabelText } = render(_jsx(Group, Object.assign({ type: GROUP_TYPE.GROUP }, { children: _jsx(Label, { children: "Foo" }) })));
+        expect(getByLabelText('Foo')).toBeDefined();
+    });
+    it('can send focus to label target', () => __awaiter(void 0, void 0, void 0, function* () {
+        const INPUT_TEST_ID = 'input-test-id';
+        const { getByText, getByTestId } = render(_jsx(Group, Object.assign({ type: GROUP_TYPE.GROUP }, { children: ({ labelTargetId }) => (_jsxs(_Fragment, { children: [_jsx(Label, { children: "Foo" }), _jsx("input", { id: labelTargetId, "data-testid": INPUT_TEST_ID })] })) })));
+        userEvent.click(getByText('Foo'));
+        yield waitFor(() => {
+            expect(getByTestId(INPUT_TEST_ID)).toHaveFocus();
+        });
+    }));
+});

package/dist/components/elements/text/Label/index.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { TYPOGRAPHY_TYPE } from '../../../../theme/typography';
+import { StyledElementProps } from '../../../../theme';
+export declare enum LABEL_SIZE {
+    SM = "sm",
+    MD = "md",
+    LG = "lg"
+}
+export declare const SIZE_TYPOGRAPHY_MAP: {
+    sm: TYPOGRAPHY_TYPE;
+    md: TYPOGRAPHY_TYPE;
+    lg: TYPOGRAPHY_TYPE;
+};
+type LabelProps = StyledElementProps<HTMLLabelElement, {
+    size?: LABEL_SIZE;
+    typography?: TYPOGRAPHY_TYPE;
+    standalone?: boolean;
+}>;
+export declare const Label: React.FC<LabelProps>;
+export {};

package/dist/components/elements/text/Label/index.js

@@ -0,0 +1,38 @@
+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 { getTypographyStyles, TYPOGRAPHY_TYPE, } from '../../../../theme/typography';
+import { GROUP_TYPE, useGroup } from '../../Group';
+import { useEnvironment } from '../../../providers/env';
+export var LABEL_SIZE;
+(function (LABEL_SIZE) {
+    LABEL_SIZE["SM"] = "sm";
+    LABEL_SIZE["MD"] = "md";
+    LABEL_SIZE["LG"] = "lg";
+})(LABEL_SIZE || (LABEL_SIZE = {}));
+export const SIZE_TYPOGRAPHY_MAP = {
+    [LABEL_SIZE.SM]: TYPOGRAPHY_TYPE.CONTROL_SMALL,
+    [LABEL_SIZE.MD]: TYPOGRAPHY_TYPE.CONTROL_MEDIUM,
+    [LABEL_SIZE.LG]: TYPOGRAPHY_TYPE.CONTROL_LARGE,
+};
+export const Label = (_a) => {
+    var { sx, size, standalone, typography: typographyParam } = _a, rest = __rest(_a, ["sx", "size", "standalone", "typography"]);
+    const { labelId, labelTargetId, type: groupType } = useGroup();
+    const { flagInDevelopment } = useEnvironment();
+    const typography = typographyParam || SIZE_TYPOGRAPHY_MAP[size || LABEL_SIZE.MD];
+    if (groupType !== GROUP_TYPE.GROUP &&
+        groupType !== GROUP_TYPE.RAW &&
+        !standalone) {
+        flagInDevelopment('Label component should be used within a Group component with property type={GROUP_TYPE.GROUP} or given the standalone flag');
+    }
+    return (_jsx("label", Object.assign({ id: labelId, htmlFor: labelTargetId, sx: Object.assign(Object.assign({}, getTypographyStyles(typography)), sx) }, rest)));
+};

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

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

package/dist/components/elements/text/Paragraph/Paragraph.stories.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { GROUP_TYPE, Group } from '../../Group';
+import { PARAGRAPH_SIZE, Paragraph } from '.';
+import { Column } from '../../layout/Column';
+import { HEADING_SIZE, Heading } from '../Heading';
+import { COLOR } from '../../../../theme/colors';
+const meta = {
+    title: 'Elements/Paragraph',
+    component: Paragraph,
+    tags: ['autodocs'],
+};
+export default meta;
+const sizes = [
+    { size: PARAGRAPH_SIZE.LG, label: 'Large' },
+    { size: PARAGRAPH_SIZE.MD, label: 'Medium' },
+    { size: PARAGRAPH_SIZE.SM, label: 'Small' },
+];
+const p1 = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ultrices venenatis purus at porta. Etiam congue sapien leo, sed malesuada justo commodo in. Nunc consequat, massa non cursus posuere, magna eros lacinia lectus, eget lobortis mi erat ut justo. Maecenas nisi mi, mollis sed ornare vitae, pharetra sed augue. Curabitur mollis orci risus, sed imperdiet nisi aliquet et. Ut non elit nec magna rhoncus maximus sit amet ut dui. Mauris sit amet eleifend lectus. Aliquam consectetur posuere libero eu ultricies. Etiam rutrum non orci nec vulputate. Sed vel accumsan diam. Cras aliquet eros eros, sit amet pharetra eros tincidunt ut. Vestibulum est erat, eleifend dapibus eros vel, elementum vehicula risus. Etiam blandit condimentum sodales. Donec non libero in orci aliquam egestas fringilla eget purus. Suspendisse pellentesque at ligula ut accumsan.';
+const p2 = 'Sed non lobortis mi, vitae dapibus arcu. Aenean at euismod arcu. Ut consectetur porttitor mattis. In eget vehicula augue. Ut at dolor posuere, tristique nisi finibus, posuere turpis. Etiam placerat, dui id lacinia volutpat, lorem turpis volutpat nisi, vel dapibus purus lorem at ante. Ut imperdiet enim nec arcu sagittis luctus.';
+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.LG, underline: true, sx: { color: COLOR.PRIMARY } }, { children: size.label })), [p1, p2].map((content) => (_jsx(Paragraph, Object.assign({}, args, { size: size.size }, { children: content }))))] })))) })),
+    args: {
+        children: 'Heading',
+    },
+};

package/dist/components/elements/text/Paragraph/Paragraph.test.d.ts

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