@ndlib/component-library 0.0.7

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

@@ -0,0 +1,37 @@
+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,
+    //👇 Enables auto-generated documentation for the component story
+    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)' },
+    { size: HEADING_SIZE.XS, label: 'Extra Small (Default Level 5)' },
+];
+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.PRIMARY } }, { 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,19 @@
+/** @jsxImportSource theme-ui */
+import React from "react";
+import { StyledElementProps } from "../../../../theme";
+import { COLOR } from "../../../../theme/colors";
+type HeaderProps = StyledElementProps<HTMLSpanElement, {
+    size?: HEADING_SIZE;
+    standalone?: boolean;
+    underline?: boolean;
+    underlineColor?: COLOR;
+}>;
+export declare enum HEADING_SIZE {
+    XS = "xs",
+    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,59 @@
+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 { 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["XS"] = "xs";
+    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.XS]: TYPOGRAPHY_TYPE.HEADING_XSMALL,
+    [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_XSMALL,
+};
+export const Heading = (_a) => {
+    var { sx, size, standalone, underline, underlineColor } = _a, rest = __rest(_a, ["sx", "size", "standalone", "underline", "underlineColor"]);
+    const { level, labelId, type, trackHeadingRendered } = useGroup();
+    const { flagInDevelopment } = useEnvironment();
+    useEffect(() => {
+        trackHeadingRendered();
+    });
+    let typography = TYPOGRAPHY_TYPE.HEADING_MEDIUM;
+    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 }, getTypographyStyles(typography)), sx) }, 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 @@
+/** @jsxImportSource theme-ui */
+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;
+    standalone?: boolean;
+}>;
+export declare const Label: React.FC<LabelProps>;
+export {};

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

@@ -0,0 +1,36 @@
+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 } = _a, rest = __rest(_a, ["sx", "size", "standalone"]);
+    const { labelId, labelTargetId, type: groupType } = useGroup();
+    const { flagInDevelopment } = useEnvironment();
+    const typography = SIZE_TYPOGRAPHY_MAP[size || LABEL_SIZE.MD];
+    if (groupType !== GROUP_TYPE.GROUP && !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,26 @@
+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,
+    //👇 Enables auto-generated documentation for the component story
+    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 {};

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '../../../../utils/test';
+import { Paragraph } from ".";
+describe('Paragraph', () => {
+    it('renders without an error', () => {
+        const { getByText } = render(_jsx(Paragraph, { children: "Foo" }));
+        expect(getByText('Foo')).toBeInTheDocument();
+    });
+});

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

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

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

@@ -0,0 +1,29 @@
+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";
+export var PARAGRAPH_SIZE;
+(function (PARAGRAPH_SIZE) {
+    PARAGRAPH_SIZE["SM"] = "sm";
+    PARAGRAPH_SIZE["MD"] = "md";
+    PARAGRAPH_SIZE["LG"] = "lg";
+})(PARAGRAPH_SIZE || (PARAGRAPH_SIZE = {}));
+const SIZE_TYPOGRAPHY_MAP = {
+    [PARAGRAPH_SIZE.SM]: TYPOGRAPHY_TYPE.PARAGRAPH_SMALL,
+    [PARAGRAPH_SIZE.MD]: TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM,
+    [PARAGRAPH_SIZE.LG]: TYPOGRAPHY_TYPE.PARAGRAPH_LARGE
+};
+export const Paragraph = (_a) => {
+    var { size, sx } = _a, rest = __rest(_a, ["size", "sx"]);
+    const typography = SIZE_TYPOGRAPHY_MAP[size || PARAGRAPH_SIZE.MD];
+    return (_jsx("div", Object.assign({ sx: Object.assign(Object.assign(Object.assign({}, getTypographyStyles(typography)), { my: 1 }), sx) }, rest)));
+};

package/dist/components/providers/componentConfig.d.ts

@@ -0,0 +1,20 @@
+import { PropsWithChildren } from "react";
+import { DeepPartial } from "../../utils/misc";
+import { StyledElementProps } from "../../theme";
+export type ComponentConfig = {
+    link: {
+        externalMatcher: RegExp;
+        internalLinkComponent: React.FC<LinkComponentProps>;
+        externalLinkComponent: React.FC<LinkComponentProps>;
+    };
+};
+export type ComponentConfigParam = DeepPartial<ComponentConfig>;
+export type LinkComponentProps = StyledElementProps<HTMLAnchorElement, {
+    to: string;
+}>;
+export declare const DefaultLink: React.FC<LinkComponentProps>;
+export declare const ComponentConfigContext: import("react").Context<ComponentConfig>;
+export declare const useComponentConfig: () => ComponentConfig;
+export declare const ComponentConfigProvider: React.FC<PropsWithChildren<{
+    config: ComponentConfigParam;
+}>>;

package/dist/components/providers/componentConfig.js

@@ -0,0 +1,31 @@
+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 "react/jsx-runtime";
+import { createContext, useContext, useMemo } from "react";
+const DEFAULT_EXTERNAL_LINK_MATCHER = /[a-zA-Z0-9]*:\/\/[^\s]*/g;
+export const DefaultLink = (_a) => {
+    var { to } = _a, rest = __rest(_a, ["to"]);
+    return _jsx("a", Object.assign({ href: to }, rest));
+};
+const defaultComponentConfig = {
+    link: {
+        externalMatcher: DEFAULT_EXTERNAL_LINK_MATCHER,
+        internalLinkComponent: DefaultLink,
+        externalLinkComponent: DefaultLink
+    }
+};
+export const ComponentConfigContext = createContext(defaultComponentConfig);
+export const useComponentConfig = () => useContext(ComponentConfigContext);
+export const ComponentConfigProvider = ({ config: configParam, children }) => {
+    const config = useMemo(() => (Object.assign(Object.assign(Object.assign({}, defaultComponentConfig), configParam), { link: Object.assign(Object.assign({}, defaultComponentConfig.link), configParam.link) })), []); // eslint-disable-line
+    return (_jsx(ComponentConfigContext.Provider, Object.assign({ value: config }, { children: children })));
+};

package/dist/components/providers/env.d.ts

@@ -0,0 +1,14 @@
+import { PropsWithChildren } from "react";
+export declare enum ENVIRONMENT {
+    DEV = "DEVELOPMENT",
+    PROD = "PRODUCTION"
+}
+type EnvironmentContextType = {
+    env?: ENVIRONMENT;
+    flagInDevelopment: (message: string) => void;
+};
+export declare const useEnvironment: () => EnvironmentContextType;
+export declare const EnvironmentProvider: React.FC<PropsWithChildren<{
+    env?: ENVIRONMENT;
+}>>;
+export {};

package/dist/components/providers/env.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+export var ENVIRONMENT;
+(function (ENVIRONMENT) {
+    ENVIRONMENT["DEV"] = "DEVELOPMENT";
+    ENVIRONMENT["PROD"] = "PRODUCTION";
+})(ENVIRONMENT || (ENVIRONMENT = {}));
+const EnvironmentContext = createContext({
+    flagInDevelopment: () => { }
+});
+export const useEnvironment = () => useContext(EnvironmentContext);
+export const EnvironmentProvider = ({ env, children }) => {
+    const flagInDevelopment = (message) => {
+        if (env === ENVIRONMENT.DEV) {
+            throw new Error(message);
+        }
+        else {
+            console.warn(message);
+        }
+    };
+    return (_jsx(EnvironmentContext.Provider, Object.assign({ value: {
+            env,
+            flagInDevelopment
+        } }, { children: children })));
+};

package/dist/components/providers/theme.d.ts

@@ -0,0 +1,2 @@
+import { PropsWithChildren } from 'react';
+export declare const ThemeProvider: React.FC<PropsWithChildren>;

package/dist/components/providers/theme.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ThemeProvider as ThemeUiProvider } from 'theme-ui';
+import { theme } from '../../theme';
+export const ThemeProvider = ({ children }) => {
+    return (_jsx(ThemeUiProvider, Object.assign({ theme: theme }, { children: children })));
+};

package/dist/components/providers/ui.d.ts

@@ -0,0 +1,10 @@
+import { PropsWithChildren } from "react";
+import { ComponentConfigParam } from "./componentConfig";
+import { ENVIRONMENT } from "./env";
+export type UiConfig = {
+    env?: ENVIRONMENT;
+    components?: ComponentConfigParam;
+};
+type UiProviderProps = PropsWithChildren<UiConfig>;
+export declare const UiProvider: React.FC<UiProviderProps>;
+export {};

package/dist/components/providers/ui.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ComponentConfigProvider } from "./componentConfig";
+import { EnvironmentProvider } from "./env";
+import { ThemeProvider } from "./theme";
+export const UiProvider = ({ env, components, children }) => {
+    return (_jsx(EnvironmentProvider, Object.assign({ env: env }, { children: _jsx(ComponentConfigProvider, Object.assign({ config: components || {} }, { children: _jsx(ThemeProvider, { children: children }) })) })));
+};

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+export { theme, ThemeProvider } from './theme';
+export { COLOR } from './theme/colors';
+export { TYPOGRAPHY_TYPE } from './theme/typography';
+export { Button, BUTTON_SIZE } from './components/elements/Button';
+export { Heading, HEADING_SIZE } from './components/elements/text/Heading';
+export { Label, LABEL_SIZE } from './components/elements/text/Label';
+export { Paragraph, PARAGRAPH_SIZE } from './components/elements/text/Paragraph';
+export { Group, useGroup } from './components/elements/Group';
+export { Box } from './components/elements/layout/Box';
+export { Column } from './components/elements/layout/Column';
+export { Row } from './components/elements/layout/Row';
+export { Link, LINK_SIZE } from './components/elements/Link';
+export { UiProvider } from './components/providers/ui';

package/dist/index.js

@@ -0,0 +1,13 @@
+export { theme, ThemeProvider } from './theme';
+export { COLOR } from './theme/colors';
+export { TYPOGRAPHY_TYPE } from './theme/typography';
+export { Button, BUTTON_SIZE } from './components/elements/Button';
+export { Heading, HEADING_SIZE } from './components/elements/text/Heading';
+export { Label, LABEL_SIZE } from './components/elements/text/Label';
+export { Paragraph, PARAGRAPH_SIZE } from './components/elements/text/Paragraph';
+export { Group, useGroup } from './components/elements/Group';
+export { Box } from './components/elements/layout/Box';
+export { Column } from './components/elements/layout/Column';
+export { Row } from './components/elements/layout/Row';
+export { Link, LINK_SIZE } from './components/elements/Link';
+export { UiProvider } from './components/providers/ui';

package/dist/theme/Color.stories.d.ts

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

package/dist/theme/Color.stories.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { COLOR } from './colors';
+import { GROUP_TYPE, Group } from '../components/elements/Group';
+import { Row } from '../components/elements/layout/Row';
+import { Box } from '../components/elements/layout/Box';
+import { LABEL_SIZE, Label } from '../components/elements/text/Label';
+const meta = {
+    title: 'Theme/Colors',
+};
+const ColorSquare = ({ color }) => {
+    return _jsx(Box, { sx: { p: 3, bg: color, boxShadow: '0px 0px 8px 1px #dddddd' } });
+};
+export default meta;
+const colors = [
+    { color: COLOR.TEXT, label: 'TEXT' },
+    { color: COLOR.BACKGROUND, label: 'BACKGROUND' },
+    { color: COLOR.PRIMARY, label: 'PRIMARY' },
+    { color: COLOR.PRIMARY_HIGHLIGHT, label: 'PRIMARY_HIGHLIGHT' },
+    { color: COLOR.TEXT_ON_PRIMARY, label: 'TEXT_ON_PRIMARY' },
+    { color: COLOR.SECONDARY, label: 'SECONDARY' },
+    { color: COLOR.SECONDARY_HIGHLIGHT, label: 'SECONDARY_HIGHLIGHT' },
+    { color: COLOR.TEXT_ON_SECONDARY, label: 'TEXT_ON_SECONDARY' },
+];
+export const Default = {
+    render: () => (_jsx(Row, Object.assign({ sx: { flexWrap: 'wrap' } }, { children: colors.map((color) => (_jsxs(Group, Object.assign({ type: GROUP_TYPE.GROUP, sx: { mr: 3, mt: 0, flexBasis: '100px' } }, { children: [_jsx(Label, Object.assign({ size: LABEL_SIZE.SM }, { children: color.label })), _jsx(ColorSquare, { color: color.color })] })))) }))),
+};

package/dist/theme/colors.d.ts

@@ -0,0 +1,14 @@
+export declare enum COLOR {
+    TEXT = "text",
+    BACKGROUND = "background",
+    TRANSPARENT = "transparent",
+    PRIMARY = "primary",
+    PRIMARY_HIGHLIGHT = "primaryHighlight",
+    SECONDARY = "secondary",
+    SECONDARY_HIGHLIGHT = "secondaryHighlight",
+    TEXT_ON_PRIMARY = "textOnPrimary",
+    TEXT_ON_SECONDARY = "textOnSecondary"
+}
+export declare const colors: {
+    [key in COLOR]: string;
+};