@ndlib/component-library 0.0.8 → 0.0.14

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

@@ -0,0 +1,75 @@
+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, jsxs as _jsxs } from "theme-ui/jsx-runtime";
+/** @jsxImportSource theme-ui */
+import React from 'react';
+import CircleIcon from '@mui/icons-material/Circle';
+import CircleOutlinedIcon from '@mui/icons-material/CircleOutlined';
+import SquareIcon from '@mui/icons-material/Square';
+import SquareOutlinedIcon from '@mui/icons-material/SquareOutlined';
+import { COLOR, Label, TYPOGRAPHY_TYPE } from '../../..';
+import { getTypographyStyles } from '../../../theme/typography';
+import { Icon } from '../Icon';
+export var LIST_SIZE;
+(function (LIST_SIZE) {
+    LIST_SIZE["SM"] = "sm";
+    LIST_SIZE["MD"] = "md";
+    LIST_SIZE["LG"] = "lg";
+})(LIST_SIZE || (LIST_SIZE = {}));
+const marginSizeMap = {
+    [LIST_SIZE.SM]: 2,
+    [LIST_SIZE.MD]: 3,
+    [LIST_SIZE.LG]: 4,
+};
+const defaultIcons = [
+    CircleIcon,
+    CircleOutlinedIcon,
+    SquareIcon,
+    SquareOutlinedIcon,
+];
+const sizeTypographyMap = {
+    [LIST_SIZE.SM]: TYPOGRAPHY_TYPE.PARAGRAPH_SMALL,
+    [LIST_SIZE.MD]: TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM,
+    [LIST_SIZE.LG]: TYPOGRAPHY_TYPE.PARAGRAPH_LARGE,
+};
+const ListConfigContext = React.createContext({
+    size: LIST_SIZE.MD,
+    ordered: false,
+    icon: CircleIcon,
+    iconColor: COLOR.TEXT,
+    depth: -1,
+});
+const useListConfig = () => React.useContext(ListConfigContext);
+export const List = ({ sx, size, ordered, icon, iconColor, children, }) => {
+    const { depth: parentDepth, size: parentSize, iconColor: parentIconColor, } = useListConfig();
+    const depth = parentDepth + 1;
+    const defaultStyles = Object.assign({ listStyleType: 'none' }, getTypographyStyles());
+    const defaultIcon = defaultIcons[depth] || CircleIcon;
+    return (_jsx(ListConfigContext.Provider, Object.assign({ value: {
+            size: size || parentSize || LIST_SIZE.MD,
+            icon: icon || defaultIcon,
+            iconColor: iconColor || parentIconColor || COLOR.TEXT,
+            ordered: ordered || false,
+            depth,
+        } }, { children: ordered ? (_jsx("ul", Object.assign({ sx: Object.assign(Object.assign({}, defaultStyles), sx) }, { children: children }))) : (_jsx("ol", Object.assign({ sx: Object.assign(Object.assign({}, defaultStyles), sx) }, { children: children }))) })));
+};
+export const ListItem = (_a) => {
+    var { index, sx, children } = _a, rest = __rest(_a, ["index", "sx", "children"]);
+    const { ordered, icon, iconColor, size, depth } = useListConfig();
+    const typographyStyles = getTypographyStyles(sizeTypographyMap[size]);
+    return (_jsxs("li", Object.assign({ sx: Object.assign(Object.assign({ depth, display: 'flex', mt: index === 0 && depth === 0 ? 0 : marginSizeMap[size], ml: 2 }, typographyStyles), sx) }, rest, { children: [ordered ? (_jsxs(Label, Object.assign({ standalone: true, sx: { mr: 2 } }, { children: [index + 1, "."] }))) : (_jsx(Icon, { icon: icon, color: iconColor, css: {
+                    marginTop: '5px',
+                }, sx: {
+                    mr: 3,
+                    alignItems: 'flex-start',
+                } })), _jsx("div", { children: children })] })));
+};

package/dist/components/elements/ListBox/Listbox.stories.d.ts

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

package/dist/components/elements/ListBox/Listbox.stories.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ListBox } from '.';
+const meta = {
+    title: 'Elements/ListBox',
+    component: ListBox,
+    tags: ['autodocs'],
+};
+export default meta;
+const options = [
+    { value: 'orange', label: 'Orange' },
+    { value: 'apple', label: 'Apple' },
+    { value: 'strawberry', label: 'Strawberry' },
+    { value: 'pineapple', label: 'Pineapple' },
+];
+export const Default = {
+    render: () => _jsx(ListBox, { options: options }),
+};

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

@@ -0,0 +1,32 @@
+/** @jsxImportSource theme-ui */
+import React, { Key } from 'react';
+import { StyledElementProps } from '../../../theme';
+import { BasicOption, RenderOption } from '../Fields/option';
+type ListBoxProps<Value extends Key, Option extends BasicOption<Value>> = StyledElementProps<HTMLDivElement, {
+    options: Option[];
+    renderOption?: RenderOption<Value, Option>;
+    selected?: Value;
+    focused?: Value;
+    selectOption?: (value: Value) => void;
+    onDownPress?: () => void;
+    onUpPress?: () => void;
+    onSelect?: () => void;
+    onBlur?: () => void;
+}>;
+export declare const ListBox: <Value extends React.Key = string, Option extends BasicOption<Value> = any>(props: {
+    sx?: import("../../../theme").StylesProp | undefined;
+    children?: React.ReactNode;
+} & React.HTMLAttributes<HTMLDivElement> & {
+    options: Option[];
+    renderOption?: RenderOption<Value, Option> | undefined;
+    selected?: Value | undefined;
+    focused?: Value | undefined;
+    selectOption?: ((value: Value) => void) | undefined;
+    onDownPress?: (() => void) | undefined;
+    onUpPress?: (() => void) | undefined;
+    onSelect?: (() => void) | undefined;
+    onBlur?: (() => void) | undefined;
+} & {
+    ref?: React.ForwardedRef<HTMLDivElement> | undefined;
+}) => any;
+export {};

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

@@ -0,0 +1,50 @@
+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 from 'react';
+import { COLOR } from '../../..';
+import { TYPOGRAPHY_TYPE, getTypographyStyles } from '../../../theme/typography';
+import { defaultRenderOption, getOptionId, } from '../Fields/option';
+function ListBoxInner(_a, ref) {
+    var { options, renderOption: renderOptionParam, selected, focused, selectOption, sx } = _a, rest = __rest(_a, ["options", "renderOption", "selected", "focused", "selectOption", "sx"]);
+    const renderOption = renderOptionParam || defaultRenderOption;
+    const typography = getTypographyStyles(TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM);
+    return (_jsx("div", Object.assign({ role: "listbox", ref: ref, sx: Object.assign(Object.assign({ border: 'solid 1px', borderRadius: '4px', borderColor: COLOR.LIGHT_GRAY, backgroundColor: COLOR.BACKGROUND, boxShadow: '0px 0px 8px 2px #dddddd' }, typography), sx), onKeyDown: (e) => {
+            console.log(e);
+        } }, rest, { children: options.map((option) => (_jsx("div", Object.assign({ id: getOptionId(option.value), "aria-selected": selected === option.value, role: "option", onMouseDown: () => selectOption && selectOption(option.value), sx: {
+                px: 4,
+                py: 3,
+                backgroundColor: focused === option.value ? COLOR.FAINT_GRAY : COLOR.BACKGROUND,
+                cursor: 'pointer',
+                borderBottom: 'solid 1px',
+                borderBottomColor: COLOR.LIGHT_GRAY,
+                color: COLOR.TEXT,
+                ':last-of-type': {
+                    borderBottom: 'none',
+                    borderBottomRightRadius: '4px',
+                    borderBottomLeftRadius: '4px',
+                },
+                ':first-of-type': {
+                    borderTopRightRadius: '4px',
+                    borderTopLeftRadius: '4px',
+                },
+                ':hover': {
+                    backgroundColor: COLOR.FAINT_GRAY,
+                },
+            } }, { children: renderOption({
+                option,
+                selected: selected === option.value,
+                focused: focused === option.value,
+            }) })))) })));
+}
+export const ListBox = React.forwardRef(ListBoxInner);

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

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

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

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Markdown } from '.';
+const meta = {
+    title: 'Elements/Markdown',
+    component: Markdown,
+    tags: ['autodocs'],
+};
+const sampleParagraph = `
+Lorem ipsum dolor sit amet consectetur adipiscing elit, urna consequat felis vehicula class ultricies
+mollis dictumst, aenean non a in donec nulla. Phasellus ante pellentesque erat cum risus consequat
+imperdiet aliquam, integer placerat et turpis mi eros nec lobortis taciti, vehicula nisl
+litora tellus ligula porttitor metus.
+`;
+export default meta;
+const startingContent = `
+# Inline styles
+This paragraph has __bold content__ and **more bold content** and _italic content_ and *more italic content*
+
+# Heading 1
+${sampleParagraph}
+
+${sampleParagraph}
+
+## Heading 2
+${sampleParagraph}
+
+### Heading 3 
+${sampleParagraph}
+
+#### Heading 4
+${sampleParagraph}
+
+##### Heading 5
+${sampleParagraph}
+
+###### Heading 6
+${sampleParagraph}
+
+- List item 1
+- List item 2
+  - List item 2.1
+  - List item 2.2
+
+1. List item 1
+2. List item 2
+3. List item 3
+`;
+export const Default = {
+    render: (args) => _jsx(Markdown, Object.assign({}, args)),
+    args: {
+        content: startingContent,
+    },
+};

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

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

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

@@ -0,0 +1,58 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '../../../utils/test';
+import { Markdown } from '.';
+const testMarkdown = `
+# Inline styles
+This paragraph has __bold content__ and **more bold content** and _italic content_ and *more italic content*
+
+# Heading 1
+
+## Heading 2
+
+### Heading 3 
+
+#### Heading 4
+
+##### Heading 5
+
+###### Heading 6
+
+- List item 1
+- List item 2
+  - List item 2.1
+  - List item 2.2
+
+1. List item 1
+2. List item 2
+3. List item 3
+`;
+describe('Markdown', () => {
+    it('renders alert content', () => {
+        const { getAllByRole, getByRole } = render(_jsx(Markdown, { content: testMarkdown }));
+        expect(getByRole('heading', {
+            name: 'Heading 1',
+            level: 1,
+        })).toBeInTheDocument();
+        expect(getByRole('heading', {
+            name: 'Heading 2',
+            level: 2,
+        })).toBeInTheDocument();
+        expect(getByRole('heading', {
+            name: 'Heading 3',
+            level: 3,
+        })).toBeInTheDocument();
+        expect(getByRole('heading', {
+            name: 'Heading 4',
+            level: 4,
+        })).toBeInTheDocument();
+        expect(getByRole('heading', {
+            name: 'Heading 5',
+            level: 5,
+        })).toBeInTheDocument();
+        expect(getByRole('heading', {
+            name: 'Heading 6',
+            level: 6,
+        })).toBeInTheDocument();
+        expect(getAllByRole('list')).toHaveLength(3);
+    });
+});

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { StyledElementProps } from '../../../theme';
+type MarkdownProps = StyledElementProps<HTMLDivElement, {
+    content: string;
+}>;
+export declare const Markdown: React.FC<MarkdownProps>;
+export {};

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

@@ -0,0 +1,50 @@
+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 { ReactMarkdown } from 'react-markdown/lib/react-markdown';
+import { List, ListItem } from '../List';
+import { Paragraph } from '../text/Paragraph';
+import { HEADING_SIZE, Heading } from '../text/Heading';
+import { Bold, Italic } from '../text/Inline';
+import { firstChildAltSelector } from '../../../utils/misc';
+const headingStyles = {
+    mt: 4,
+    [firstChildAltSelector]: {
+        mt: 0,
+    },
+};
+const paragraphStyles = {
+    mt: 4,
+    [firstChildAltSelector]: {
+        mt: 0,
+    },
+};
+export const Markdown = (_a) => {
+    var { content } = _a, rest = __rest(_a, ["content"]);
+    return (_jsx("div", Object.assign({}, rest, { children: _jsx(ReactMarkdown, Object.assign({ components: {
+                h1: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.XL }, props, { standalone: true, sx: headingStyles, "aria-level": 1 }))),
+                h2: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.LG }, props, { standalone: true, sx: headingStyles, "aria-level": 2 }))),
+                h3: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, props, { standalone: true, sx: headingStyles, "aria-level": 3 }))),
+                h4: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.SM }, props, { standalone: true, sx: headingStyles, "aria-level": 4 }))),
+                h5: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.SM }, props, { standalone: true, sx: headingStyles, "aria-level": 5 }))),
+                h6: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.SM }, props, { standalone: true, sx: headingStyles, "aria-level": 6 }))),
+                ol: (props) => _jsx(List, Object.assign({}, props, { ordered: true, sx: { mt: 4 } })),
+                ul: (props) => _jsx(List, Object.assign({}, props, { sx: { mt: 4 } })),
+                li: (_a) => {
+                    var { index, ordered } = _a, props = __rest(_a, ["index", "ordered"]);
+                    return (_jsx(ListItem, Object.assign({ index: index }, props)));
+                },
+                p: (props) => _jsx(Paragraph, Object.assign({}, props, { sx: paragraphStyles })),
+                strong: (props) => _jsx(Bold, Object.assign({}, props)),
+                em: (props) => _jsx(Italic, Object.assign({}, props)),
+            } }, { children: content })) })));
+};

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

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

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

@@ -4,7 +4,7 @@ import { COLOR } from '../../../theme/colors';
 const meta = {
     title: 'Elements/Layout/Box',
     component: BoxComponent,
-    tags: ['autodocs']
+    tags: ['autodocs'],
 };
 export default meta;
 export const Box = {

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 /** @jsxImportSource theme-ui */
-import { StyledElementProps } from "../../../theme";
-import { FlexHelperProps } from "./Row";
+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

@@ -10,9 +10,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "theme-ui/jsx-runtime";
-import { convertFlexHelperProps } from "./Row";
+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 }));
+    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.js

@@ -6,11 +6,11 @@ import { COLOR } from '../../../theme/colors';
 const meta = {
     title: 'Elements/Layout/Flex',
     component: Row,
-    tags: ['autodocs']
+    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" }) })] }))),
+    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" }) })] })),

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

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

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 /** @jsxImportSource theme-ui */
-import { CSSProperties, ThemeUICSSProperties } from "theme-ui";
-import { StyledElementProps } from "../../../theme";
+import { CSSProperties, ThemeUICSSProperties } from 'theme-ui';
+import { StyledElementProps } from '../../../theme';
 export declare const convertFlexHelperProps: (props: FlexHelperProps) => ThemeUICSSProperties;
 export type FlexHelperProps = {
     grow?: number;

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

@@ -40,5 +40,5 @@ export const convertFlexHelperProps = (props) => {
 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 }));
+    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.js

@@ -14,24 +14,23 @@ 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)' },
+    { 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 })) })))) })),
+    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"
-    }
+        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 })) })))) })),
+    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"
-    }
+        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 })) })))) })),
+    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"
-    }
+        children: 'Heading',
+    },
 };

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

@@ -10,7 +10,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { jsx as _jsx } from "react/jsx-runtime";
 import { vi } from 'vitest';
 import { render as _render } from '../../../../utils/test';
-import { Heading } from ".";
+import { Heading } from '.';
 import { GROUP_TYPE, Group } from '../../Group';
 import { ENVIRONMENT } from '../../../providers/env';
 const render = (component) => {

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

@@ -1,15 +1,17 @@
 /** @jsxImportSource theme-ui */
-import React from "react";
-import { StyledElementProps } from "../../../../theme";
-import { COLOR } from "../../../../theme/colors";
+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 {
-    XS = "xs",
     SM = "sm",
     MD = "md",
     LG = "lg",

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

@@ -11,21 +11,19 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 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";
+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,
@@ -36,24 +34,32 @@ const LEVEL_TYPOGRAPHY_MAP = {
     2: TYPOGRAPHY_TYPE.HEADING_LARGE,
     3: TYPOGRAPHY_TYPE.HEADING_MEDIUM,
     4: TYPOGRAPHY_TYPE.HEADING_SMALL,
-    5: TYPOGRAPHY_TYPE.HEADING_XSMALL,
+    5: TYPOGRAPHY_TYPE.HEADING_SMALL,
+    6: TYPOGRAPHY_TYPE.HEADING_SMALL,
 };
 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();
+    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();
+    // should prioritize explicitly passed level, eg if coming from markdown
+    const level = levelParam || groupLevel;
     useEffect(() => {
         trackHeadingRendered();
     });
     let typography = TYPOGRAPHY_TYPE.HEADING_MEDIUM;
-    if (size) {
+    if (typographyProp) {
+        typography = typographyProp;
+    }
+    else if (size) {
         typography = SIZE_TYPOGRAPHY_MAP[size];
     }
     else if (level) {
-        typography = LEVEL_TYPOGRAPHY_MAP[level];
+        typography =
+            LEVEL_TYPOGRAPHY_MAP[level];
     }
+    console.log(typography, level, size);
     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)));
+    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,13 @@
+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,
+    //👇 Enables auto-generated documentation for the component story
+    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,7 @@
+/** @jsxImportSource theme-ui */
+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 {};