@ndlib/component-library 1.0.21 → 1.0.22

package/dist/components/elements/{text/Inline → Inline}/index.js

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

package/dist/components/elements/{text/Label → Label}/Label.stories.js

@@ -1,10 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { GROUP_TYPE, Group } from '../../Group';
+import { GROUP_TYPE, Group } from '../Group';
 import { LABEL_SIZE, Label } from '.';
-import { Column } from '../../layout/Column';
+import { Column } from '../layout/Column';
+import { UIVersion1 } from '../../../utils/decorators/UIVersion1';
 const meta = {
     title: 'Elements/Label',
     component: Label,
+    decorators: [UIVersion1],
 };
 export default meta;
 const sizes = [

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

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

package/dist/components/elements/{text/Label → Label}/Label.test.js

@@ -9,10 +9,10 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 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 { render as _render } from '../../../utils/test';
 import { Label } from '.';
-import { GROUP_TYPE, Group } from '../../Group';
-import { ENVIRONMENT } from '../../../providers/env';
+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) => {

package/dist/components/elements/{text/Label → Label}/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { TYPOGRAPHY_TYPE } from '../../../../theme/typography';
-import { StyledElementProps } from '../../../../theme';
+import { TYPOGRAPHY_TYPE } from '../../../theme/typography';
+import { StyledElementProps } from '../../../theme';
 export declare enum LABEL_SIZE {
     SM = "sm",
     MD = "md",

package/dist/components/elements/{text/Label → Label}/index.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 { getTypographyStyles, TYPOGRAPHY_TYPE, } from '../../../../theme/typography';
-import { GROUP_TYPE, useGroup } from '../../Group';
-import { useEnvironment } from '../../../providers/env';
+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";

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

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

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

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { GROUPV2_TYPE, GroupV2 } from '../GroupV2';
+import { LABELV2_SIZE, LabelV2 } from '.';
+import { ColumnV2 } from '../layoutV2/ColumnV2';
+import { UIVersion2 } from '../../../utils/decorators/UIVersion2';
+const meta = {
+    title: 'Elements/LabelV2',
+    component: LabelV2,
+    decorators: [UIVersion2],
+};
+export default meta;
+const sizes = [
+    { size: LABELV2_SIZE.LG, label: 'Large' },
+    { size: LABELV2_SIZE.MD, label: 'Medium' },
+    { size: LABELV2_SIZE.SM, label: 'Small' },
+];
+export const Default = {
+    render: () => (_jsx(ColumnV2, { children: sizes.map((size) => (_jsx(GroupV2, Object.assign({ type: GROUPV2_TYPE.GROUP }, { children: _jsx(LabelV2, Object.assign({ size: size.size }, { children: size.label })) })))) })),
+    args: {
+        children: 'Label',
+    },
+};

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

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

package/dist/components/elements/LabelV2/LabelV2.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 { LabelV2 } from '.';
+import { GROUPV2_TYPE, GroupV2 } from '../GroupV2';
+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('LabelV2', () => {
+    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(LabelV2, 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(GroupV2, Object.assign({ type: GROUPV2_TYPE.GROUP }, { children: _jsx(LabelV2, { 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(LabelV2, { children: "Foo" }))).toThrow();
+    }));
+    it('throws if used within non-group-type Group component', () => __awaiter(void 0, void 0, void 0, function* () {
+        expect(() => render(_jsx(GroupV2, Object.assign({ type: GROUPV2_TYPE.REGION }, { children: _jsx(LabelV2, { children: "Foo" }) })))).toThrow();
+    }));
+    it('labels group target automatically', () => {
+        const { getByLabelText } = render(_jsx(GroupV2, Object.assign({ type: GROUPV2_TYPE.GROUP }, { children: _jsx(LabelV2, { 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(GroupV2, Object.assign({ type: GROUPV2_TYPE.GROUP }, { children: ({ labelTargetId }) => (_jsxs(_Fragment, { children: [_jsx(LabelV2, { 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/LabelV2/index.d.ts

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

package/dist/components/elements/LabelV2/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 "react/jsx-runtime";
+import { getTypographyStyles, TYPOGRAPHY_TYPE } from '../../../theme/typography';
+import { GROUPV2_TYPE, useGroupV2 } from '../GroupV2';
+import { useEnvironment } from '../../providers/env';
+import { processSx } from '../../../utils/processSx';
+export var LABELV2_SIZE;
+(function (LABELV2_SIZE) {
+    LABELV2_SIZE["SM"] = "sm";
+    LABELV2_SIZE["MD"] = "md";
+    LABELV2_SIZE["LG"] = "lg";
+})(LABELV2_SIZE || (LABELV2_SIZE = {}));
+export const SIZE_TYPOGRAPHY_MAP_V2 = {
+    [LABELV2_SIZE.SM]: TYPOGRAPHY_TYPE.CONTROL_SMALL,
+    [LABELV2_SIZE.MD]: TYPOGRAPHY_TYPE.CONTROL_MEDIUM,
+    [LABELV2_SIZE.LG]: TYPOGRAPHY_TYPE.CONTROL_LARGE,
+};
+export const LabelV2 = (_a) => {
+    var { sx, size, standalone, typography: typographyParam } = _a, rest = __rest(_a, ["sx", "size", "standalone", "typography"]);
+    const { labelId, labelTargetId, type: groupType } = useGroupV2();
+    const { flagInDevelopment } = useEnvironment();
+    const typography = typographyParam || SIZE_TYPOGRAPHY_MAP_V2[size || LABELV2_SIZE.MD];
+    const typographyStyles = getTypographyStyles(typography);
+    const processedStyles = processSx(Object.assign(Object.assign({}, typographyStyles), sx));
+    if (groupType !== GROUPV2_TYPE.GROUP &&
+        groupType !== GROUPV2_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, style: processedStyles }, rest)));
+};

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

@@ -1,11 +1,13 @@
 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 { HEADING_SIZE, Heading } from '../Heading';
 import { Column } from '../layout/Column';
+import { UIVersion1 } from '../../../utils/decorators/UIVersion1';
 const meta = {
     title: 'Elements/Link',
     component: Link,
+    decorators: [UIVersion1],
 };
 export default meta;
 const sizes = [

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

@@ -5,14 +5,16 @@ import BookmarkBorderIcon from '@mui/icons-material/BookmarkBorder';
 import { LIST_SIZE, List, ListItem } from './index';
 import { Row } from '../layout/Row';
 import { Column } from '../layout/Column';
-import { HEADING_SIZE, Heading } from '../text/Heading';
+import { HEADING_SIZE, Heading } from '../Heading';
 import { GROUP_TYPE, Group } from '../Group';
 import { COLOR } from '../../..';
 import { FONT_SIZE } from '../../../theme/typography';
+import { UIVersion1 } from '../../../utils/decorators/UIVersion1';
 const meta = {
     title: 'Elements/List',
     component: List,
     tags: ['autodocs'],
+    decorators: [UIVersion1],
 };
 export default meta;
 export const Default = {

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

@@ -19,7 +19,7 @@ import { COLOR, Label, TYPOGRAPHY_TYPE } from '../../..';
 import { FONT_SIZE, getTypographyStyles } from '../../../theme/typography';
 import { Icon } from '../Icon';
 import { importedDefaultComponentShim } from '../../../utils/misc';
-import { useLinesHeight } from '../text/ReadMore';
+import { useLinesHeight } from '../ReadMore';
 import { Column } from '../layout/Column';
 import { useEnvironment } from '../../providers/env';
 const CircleIcon = importedDefaultComponentShim(_CircleIcon);

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

@@ -1,9 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ListBox } from '.';
+import { UIVersion1 } from '../../../utils/decorators/UIVersion1';
 const meta = {
     title: 'Elements/ListBox',
     component: ListBox,
     tags: ['autodocs'],
+    decorators: [UIVersion1],
 };
 export default meta;
 const options = [

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

@@ -1,6 +1,6 @@
 import React, { Key } from 'react';
 import { StyledElementProps } from '../../../theme';
-import { BasicOption, RenderOption } from '../Fields/option';
+import { BasicOption, RenderOption } from '../option';
 type ListBoxProps<Value extends Key, Option extends BasicOption<Value>> = StyledElementProps<HTMLDivElement, {
     options: Option[];
     renderOption?: RenderOption<Value, Option>;

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

@@ -13,7 +13,7 @@ import { jsx as _jsx } from "theme-ui/jsx-runtime";
 import React from 'react';
 import { COLOR } from '../../..';
 import { TYPOGRAPHY_TYPE, getTypographyStyles } from '../../../theme/typography';
-import { defaultRenderOption, getOptionId, } from '../Fields/option';
+import { defaultRenderOption, getOptionId, } from '../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;

package/dist/components/elements/ListBoxV2/ListBoxV2.module.css

@@ -0,0 +1,33 @@
+.listBoxOption {
+  padding: 0.75rem 1rem;
+  cursor: pointer;
+  border-bottom: 1px solid var(--lightGray);
+  color: var(--text);
+  background-color: var(--background);
+
+  &:first-of-type {
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+  }
+
+  &:last-of-type {
+    border-bottom: none;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+
+  &:focus {
+    background-color: var(--extraExtraLightGray);
+  }
+
+  &:hover {
+    background-color: var(--extraExtraLightGray);
+  }
+}
+
+.listBox {
+  border: 1px solid var(--lightGray);
+  border-radius: 4px;
+  background-color: var(--background);
+  box-shadow: 0px 0px 8px 2px #dddddd;
+}

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

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

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ListBoxV2 } from '.';
+import { UIVersion2 } from '../../../utils/decorators/UIVersion2';
+const meta = {
+    title: 'Elements/ListBoxV2',
+    component: ListBoxV2,
+    tags: ['autodocs'],
+    decorators: [UIVersion2],
+};
+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(ListBoxV2, { options: options }),
+};

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

@@ -0,0 +1,33 @@
+import React, { Key } from 'react';
+import { StyledElementPropsV2 } from '../../../theme';
+import { BasicOption, RenderOption } from '../option';
+type ListBoxV2Props<Value extends Key, Option extends BasicOption<Value>> = StyledElementPropsV2<HTMLDivElement, {
+    options: Option[];
+    renderOption?: RenderOption<Value, Option>;
+    selected?: Value;
+    focused?: Value;
+    selectOption?: (option: Option) => void;
+    onDownPress?: () => void;
+    onUpPress?: () => void;
+    onSelect?: () => void;
+    onBlur?: () => void;
+}>;
+export declare const ListBoxV2: <Value extends React.Key = string, Option extends BasicOption<Value> = any>(props: {
+    sx?: import("../../../theme").StylesPropV2 | undefined;
+    children?: React.ReactNode;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> & {
+    options: Option[];
+    renderOption?: RenderOption<Value, Option> | undefined;
+    selected?: Value | undefined;
+    focused?: Value | undefined;
+    selectOption?: ((option: Option) => void) | undefined;
+    onDownPress?: (() => void) | undefined;
+    onUpPress?: (() => void) | undefined;
+    onSelect?: (() => void) | undefined;
+    onBlur?: (() => void) | undefined;
+} & {
+    htmlFor?: string | undefined;
+} & {
+    ref?: React.ForwardedRef<HTMLDivElement> | undefined;
+}) => any;
+export {};

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

@@ -0,0 +1,35 @@
+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 React from 'react';
+import { TYPOGRAPHY_TYPE, getTypographyStyles } from '../../../theme/typography';
+import { defaultRenderOption, getOptionId, } from '../option';
+import { processSx } from '../../../utils/processSx';
+import * as styles from './ListBoxV2.module.css';
+const typeSafeStyles = styles;
+function ListBoxOption({ option, selected, focused, selectOption, renderOption, }) {
+    return (_jsx("div", Object.assign({ id: getOptionId(option.value), "aria-selected": selected === option.value, role: "option", onClick: option.onClick, onMouseDown: () => selectOption && selectOption(option), className: typeSafeStyles.listBoxOption }, { children: renderOption({
+            option,
+            selected: selected === option.value,
+            focused: focused === option.value,
+        }) }), option.value));
+}
+function ListBoxInnerV2(_a, ref) {
+    var { options, renderOption: renderOptionParam, selected, focused, selectOption, sx, style } = _a, rest = __rest(_a, ["options", "renderOption", "selected", "focused", "selectOption", "sx", "style"]);
+    const renderOption = renderOptionParam || defaultRenderOption;
+    const typography = getTypographyStyles(TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM);
+    const processedStyles = processSx(Object.assign(Object.assign({}, typography), sx));
+    return (_jsx("div", Object.assign({ role: "listbox", ref: ref, className: typeSafeStyles.listBox, style: Object.assign(Object.assign({}, style), processedStyles), onKeyDown: (e) => {
+            console.log(e);
+        } }, rest, { children: options.map((option) => (_jsx(ListBoxOption, { option: option, selected: selected, focused: focused, selectOption: selectOption, renderOption: renderOption }, option.value))) })));
+}
+export const ListBoxV2 = React.forwardRef(ListBoxInnerV2);

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

@@ -2,10 +2,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Markdown } from '.';
 import { FONT_WEIGHT } from '../../../theme/typography';
 import { COLOR } from '../../../theme/colors';
+import { UIVersion1 } from '../../../utils/decorators/UIVersion1';
 const meta = {
     title: 'Elements/Markdown',
     component: Markdown,
     tags: ['autodocs'],
+    decorators: [UIVersion1],
 };
 const sampleParagraph = `
 Lorem ipsum dolor sit amet consectetur adipiscing elit, urna consequat felis vehicula class ultricies

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

@@ -13,13 +13,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { ReactMarkdown } from 'react-markdown/lib/react-markdown';
 import rehypeRaw from 'rehype-raw';
 import { List, ListItem } from '../List';
-import { Paragraph } from '../text/Paragraph';
-import { HEADING_SIZE, Heading } from '../text/Heading';
-import { Bold, Italic } from '../text/Inline';
+import { Paragraph } from '../Paragraph';
+import { HEADING_SIZE, Heading } from '../Heading';
+import { Bold, Italic } from '../Inline';
 import { firstChildAltSelector } from '../../../utils/misc';
 import remarkGfm from 'remark-gfm';
 import { BlockQuote } from '../BlockQuote';
-import { Caption } from '../text/Caption';
+import { Caption } from '../Caption';
 import { sanitizeHtml } from '../../../utils/sanitizeHtml';
 const parseBlockquotes = (content) => {
     const contentArray = content.split('\n');

package/dist/components/elements/{Fields/MonthPicker → MonthPicker}/MonthPicker.stories.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
 import { MonthPicker } from '.';
-import { Box } from '../../layout/Box';
+import { Box } from '../layout/Box';
+import { UIVersion1 } from '../../../utils/decorators/UIVersion1';
 const meta = {
     title: 'Elements/Fields/MonthPicker',
     component: MonthPicker,
     tags: ['autodocs'],
+    decorators: [UIVersion1],
 };
 export default meta;
 const StatefulMonthPicker = (props) => {

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

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

package/dist/components/elements/{Fields/MonthPicker → MonthPicker}/MonthPicker.test.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { render, screen } from '@testing-library/react';
 import { describe, it, expect, vi, afterEach } from 'vitest';
-import { MonthPicker } from './';
+import { MonthPicker } from '.';
 describe('MonthPicker component', () => {
     const mockOnChange = vi.fn();
     const selectedDate = new Date(Date.UTC(96, 1, 2, 3, 4, 5));

package/dist/components/elements/{Fields/MonthPicker → MonthPicker}/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import 'react-datepicker/dist/react-datepicker.css';
 import { TextInputProps } from '../TextInput';
-import { BoxProps } from '../../layout/Box';
+import { BoxProps } from '../layout/Box';
 export declare const MonthPicker: React.FC<{
     value: Date;
     onChange: (date: Date) => void;

package/dist/components/elements/{Fields/MonthPicker → MonthPicker}/index.js

@@ -14,8 +14,8 @@ import _ReactDatePicker from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
 import { TextInput } from '../TextInput';
 import { InputWrapper } from '../DatePicker';
-import { Box } from '../../layout/Box';
-import { importedDefaultComponentShim } from '../../../../utils/misc';
+import { Box } from '../layout/Box';
+import { importedDefaultComponentShim } from '../../../utils/misc';
 const ReactDatePicker = importedDefaultComponentShim(_ReactDatePicker);
 const PermissiveTextInput = TextInput;
 export const MonthPicker = (_a) => {

package/dist/components/elements/{text/Paragraph → Paragraph}/Paragraph.stories.js

@@ -1,13 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { GROUP_TYPE, Group } from '../../Group';
+import { GROUP_TYPE, Group } from '../Group';
 import { PARAGRAPH_SIZE, Paragraph } from '.';
-import { Column } from '../../layout/Column';
+import { Column } from '../layout/Column';
 import { HEADING_SIZE, Heading } from '../Heading';
-import { COLOR } from '../../../../theme/colors';
+import { COLOR } from '../../../theme/colors';
+import { UIVersion1 } from '../../../utils/decorators/UIVersion1';
 const meta = {
     title: 'Elements/Paragraph',
     component: Paragraph,
     tags: ['autodocs'],
+    decorators: [UIVersion1],
 };
 export default meta;
 const sizes = [

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

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

package/dist/components/elements/{text/Paragraph → Paragraph}/Paragraph.test.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { render } from '../../../../utils/test';
+import { render } from '../../../utils/test';
 import { Paragraph } from '.';
 describe('Paragraph', () => {
     it('renders without an error', () => {

package/dist/components/elements/{text/Paragraph → Paragraph}/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { TYPOGRAPHY_TYPE } from '../../../../theme/typography';
-import { StyledElementProps } from '../../../../theme';
+import { TYPOGRAPHY_TYPE } from '../../../theme/typography';
+import { StyledElementProps } from '../../../theme';
 type ParagraphProps = StyledElementProps<HTMLSpanElement, {
     size?: PARAGRAPH_SIZE;
     typography?: TYPOGRAPHY_TYPE;

package/dist/components/elements/{text/Paragraph → Paragraph}/index.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 { getTypographyStyles, TYPOGRAPHY_TYPE, } from '../../../../theme/typography';
-import { useTheme } from '../../../../theme';
-import { multiplyRemSize } from '../../../../utils/misc';
+import { getTypographyStyles, TYPOGRAPHY_TYPE } from '../../../theme/typography';
+import { useTheme } from '../../../theme';
+import { multiplyRemSize } from '../../../utils/misc';
 export var PARAGRAPH_SIZE;
 (function (PARAGRAPH_SIZE) {
     PARAGRAPH_SIZE["SM"] = "sm";
@@ -25,12 +25,13 @@ const SIZE_TYPOGRAPHY_MAP = {
     [PARAGRAPH_SIZE.LG]: TYPOGRAPHY_TYPE.PARAGRAPH_LARGE,
 };
 export const Paragraph = (_a) => {
+    var _b, _c;
     var { size, typography: typographyParam, sx, clampLines } = _a, rest = __rest(_a, ["size", "typography", "sx", "clampLines"]);
     const theme = useTheme();
     const typography = typographyParam || SIZE_TYPOGRAPHY_MAP[size || PARAGRAPH_SIZE.MD];
     const typographyStyles = getTypographyStyles(typography);
-    const marginHeightMultiple = theme.lineHeights[typographyStyles.lineHeight] * 0.7;
-    const fontSize = theme.fontSizes[typographyStyles.fontSize];
+    const marginHeightMultiple = (((_b = theme.lineHeights) === null || _b === void 0 ? void 0 : _b[typographyStyles.lineHeight]) || 1.625) * 0.7;
+    const fontSize = ((_c = theme.fontSizes) === null || _c === void 0 ? void 0 : _c[typographyStyles.fontSize]) || '1rem';
     const topMargin = multiplyRemSize({
         size: fontSize,
         multiple: marginHeightMultiple,

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

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