@ndlib/component-library 1.0.45 → 1.0.47

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

@@ -18,19 +18,19 @@ const sizes = [
     { 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, { type: GROUP_TYPE.REGION, children: _jsx(Heading, { 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 })) })))) })),
+    render: () => (_jsx(Column, { children: sizes.map((size) => (_jsx(Group, { type: GROUP_TYPE.REGION, children: _jsx(Heading, { 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 })) })))) })),
+    render: () => (_jsx(Column, { children: sizes.map((size) => (_jsx(Group, { type: GROUP_TYPE.REGION, children: _jsx(Heading, { size: size.size, underline: true, children: size.label }) }))) })),
     args: {
         children: 'Heading',
     },

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

@@ -26,7 +26,7 @@ describe('Heading', () => {
         vi.useRealTimers();
     });
     it('renders without an error if passed standalone prop', () => {
-        const { getByText } = render(_jsx(Heading, Object.assign({ standalone: true }, { children: "Foo" })));
+        const { getByText } = render(_jsx(Heading, { standalone: true, children: "Foo" }));
         expect(getByText('Foo')).toBeInTheDocument();
     });
     it('renders without an error if used within region Group component', () => {
@@ -37,7 +37,7 @@ describe('Heading', () => {
         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();
+        expect(() => render(_jsx(Group, { type: GROUP_TYPE.GROUP, children: _jsx(Heading, { children: "Foo" }) }))).toThrow();
     }));
     it('labels group target automatically', () => {
         const { getByText } = render(_jsx(Group, { children: _jsx(Heading, { children: "Foo" }) }));

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

@@ -18,19 +18,19 @@ const sizes = [
     { size: HEADINGV2_SIZE.SM, label: 'Small (Default Level 4-6)' },
 ];
 export const Default = {
-    render: () => (_jsx(ColumnV2, { children: sizes.map((size) => (_jsx(GroupV2, Object.assign({ type: GROUPV2_TYPE.REGION }, { children: _jsx(HeadingV2, Object.assign({ size: size.size }, { children: size.label })) })))) })),
+    render: () => (_jsx(ColumnV2, { children: sizes.map((size) => (_jsx(GroupV2, { type: GROUPV2_TYPE.REGION, children: _jsx(HeadingV2, { size: size.size, children: size.label }) }))) })),
     args: {
         children: 'Heading V2',
     },
 };
 export const Color = {
-    render: () => (_jsx(ColumnV2, { children: sizes.map((size) => (_jsx(GroupV2, Object.assign({ type: GROUPV2_TYPE.REGION }, { children: _jsx(HeadingV2, Object.assign({ size: size.size, sx: { color: COLOR.TEXT } }, { children: size.label })) })))) })),
+    render: () => (_jsx(ColumnV2, { children: sizes.map((size) => (_jsx(GroupV2, { type: GROUPV2_TYPE.REGION, children: _jsx(HeadingV2, { size: size.size, sx: { color: COLOR.TEXT }, children: size.label }) }))) })),
     args: {
         children: 'Heading V2',
     },
 };
 export const Underline = {
-    render: () => (_jsx(ColumnV2, { children: sizes.map((size) => (_jsx(GroupV2, Object.assign({ type: GROUPV2_TYPE.REGION }, { children: _jsx(HeadingV2, Object.assign({ size: size.size, underline: true }, { children: size.label })) })))) })),
+    render: () => (_jsx(ColumnV2, { children: sizes.map((size) => (_jsx(GroupV2, { type: GROUPV2_TYPE.REGION, children: _jsx(HeadingV2, { size: size.size, underline: true, children: size.label }) }))) })),
     args: {
         children: 'Heading V2',
     },

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

@@ -26,7 +26,7 @@ describe('HeadingV2', () => {
         vi.useRealTimers();
     });
     it('renders without an error if passed standalone prop', () => {
-        const { getByText } = render(_jsx(HeadingV2, Object.assign({ standalone: true }, { children: "Foo" })));
+        const { getByText } = render(_jsx(HeadingV2, { standalone: true, children: "Foo" }));
         expect(getByText('Foo')).toBeInTheDocument();
     });
     it('renders without an error if used within region Group component', () => {
@@ -37,7 +37,7 @@ describe('HeadingV2', () => {
         expect(() => render(_jsx(HeadingV2, { children: "Foo" }))).toThrow();
     }));
     it('throws if used within non-region Group component', () => __awaiter(void 0, void 0, void 0, function* () {
-        expect(() => render(_jsx(GroupV2, Object.assign({ type: GROUPV2_TYPE.GROUP }, { children: _jsx(HeadingV2, { children: "Foo" }) })))).toThrow();
+        expect(() => render(_jsx(GroupV2, { type: GROUPV2_TYPE.GROUP, children: _jsx(HeadingV2, { children: "Foo" }) }))).toThrow();
     }));
     it('labels group target automatically', () => {
         const { getByText } = render(_jsx(GroupV2, { children: _jsx(HeadingV2, { children: "Foo" }) }));

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

@@ -24,7 +24,7 @@ const sizes = [
     { size: FONT_SIZE.XS, label: 'X Small' },
 ];
 export const Default = {
-    render: () => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, Object.assign({ type: GROUP_TYPE.REGION }, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, { children: size.label })), _jsx(Icon, { icon: AccessAlarmIcon, size: size.size })] })))) })),
+    render: () => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, { type: GROUP_TYPE.REGION, children: [_jsx(Heading, { size: HEADING_SIZE.MD, children: size.label }), _jsx(Icon, { icon: AccessAlarmIcon, size: size.size })] }))) })),
 };
 export const CustomColor = {
     render: () => (_jsx(Icon, { icon: AccessAlarmIcon, color: COLOR.SECONDARY, size: FONT_SIZE.LG })),

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

@@ -24,7 +24,7 @@ const sizes = [
     { size: FONT_SIZE.XS, label: 'X Small' },
 ];
 export const Default = {
-    render: () => (_jsx(ColumnV2, { children: sizes.map((size) => (_jsxs(GroupV2, Object.assign({ type: GROUPV2_TYPE.REGION }, { children: [_jsx(HeadingV2, Object.assign({ size: HEADINGV2_SIZE.MD }, { children: size.label })), _jsx(IconV2, { icon: AccessAlarmIcon, size: size.size })] })))) })),
+    render: () => (_jsx(ColumnV2, { children: sizes.map((size) => (_jsxs(GroupV2, { type: GROUPV2_TYPE.REGION, children: [_jsx(HeadingV2, { size: HEADINGV2_SIZE.MD, children: size.label }), _jsx(IconV2, { icon: AccessAlarmIcon, size: size.size })] }))) })),
 };
 export const CustomColor = {
     render: () => (_jsx(IconV2, { icon: AccessAlarmIcon, color: COLOR.SECONDARY, size: FONT_SIZE.LG })),

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

@@ -15,7 +15,7 @@ const sizes = [
     { 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 })) })))) })),
+    render: () => (_jsx(Column, { children: sizes.map((size) => (_jsx(Group, { type: GROUP_TYPE.GROUP, children: _jsx(Label, { size: size.size, children: size.label }) }))) })),
     args: {
         children: 'Label',
     },

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

@@ -28,26 +28,26 @@ describe('Label', () => {
         vi.useRealTimers();
     });
     it('renders without an error if passed standalone prop', () => {
-        const { getByText } = render(_jsx(Label, Object.assign({ standalone: true }, { children: "Foo" })));
+        const { getByText } = render(_jsx(Label, { 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" }) })));
+        const { getByText } = render(_jsx(Group, { 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();
+        expect(() => render(_jsx(Group, { 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" }) })));
+        const { getByLabelText } = render(_jsx(Group, { 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 })] })) })));
+        const { getByText, getByTestId } = render(_jsx(Group, { 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/LabelV2/LabelV2.stories.js

@@ -15,7 +15,7 @@ const sizes = [
     { 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 })) })))) })),
+    render: () => (_jsx(ColumnV2, { children: sizes.map((size) => (_jsx(GroupV2, { type: GROUPV2_TYPE.GROUP, children: _jsx(LabelV2, { size: size.size, children: size.label }) }))) })),
     args: {
         children: 'Label',
     },

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

@@ -28,26 +28,26 @@ describe('LabelV2', () => {
         vi.useRealTimers();
     });
     it('renders without an error if passed standalone prop', () => {
-        const { getByText } = render(_jsx(LabelV2, Object.assign({ standalone: true }, { children: "Foo" })));
+        const { getByText } = render(_jsx(LabelV2, { 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" }) })));
+        const { getByText } = render(_jsx(GroupV2, { 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();
+        expect(() => render(_jsx(GroupV2, { 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" }) })));
+        const { getByLabelText } = render(_jsx(GroupV2, { 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 })] })) })));
+        const { getByText, getByTestId } = render(_jsx(GroupV2, { 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/Link/Link.stories.js

@@ -16,7 +16,7 @@ const sizes = [
     { size: LINK_SIZE.SM, label: 'Small' },
 ];
 export const Default = {
-    render: () => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, { children: size.label })), _jsx(Link, Object.assign({ size: size.size, to: "/" }, { children: "Click Me" }))] }))) })),
+    render: () => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, { children: [_jsx(Heading, { size: HEADING_SIZE.MD, children: size.label }), _jsx(Link, { size: size.size, to: "/", children: "Click Me" })] }))) })),
     args: {
         children: 'Click Me',
     },

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

@@ -12,15 +12,15 @@ const CustomExternalLink = (props) => {
 };
 describe('Link', () => {
     it('renders default external link component without throwing', () => {
-        const { getByRole } = render(_jsx(Link, Object.assign({ to: "https://google.com" }, { children: "Foo" })));
+        const { getByRole } = render(_jsx(Link, { to: "https://google.com", children: "Foo" }));
         expect(getByRole('link')).toBeInTheDocument();
     });
     it('renders default internal link component without throwing', () => {
-        const { getByRole } = render(_jsx(Link, Object.assign({ to: "/test/path" }, { children: "Foo" })));
+        const { getByRole } = render(_jsx(Link, { to: "/test/path", children: "Foo" }));
         expect(getByRole('link')).toBeInTheDocument();
     });
     it('renders custom external component if passed', () => {
-        const { getByTestId } = render(_jsx(Link, Object.assign({ to: "https://google.com" }, { children: "Foo" })), {
+        const { getByTestId } = render(_jsx(Link, { to: "https://google.com", children: "Foo" }), {
             components: {
                 link: {
                     externalLinkComponent: CustomExternalLink,
@@ -32,7 +32,7 @@ describe('Link', () => {
         expect(() => getByTestId(CUSTOM_INTERNAL_TEST_ID)).toThrow();
     });
     it('renders custom internal component if passed', () => {
-        const { getByTestId } = render(_jsx(Link, Object.assign({ to: "/test/route" }, { children: "Foo" })), {
+        const { getByTestId } = render(_jsx(Link, { to: "/test/route", children: "Foo" }), {
             components: {
                 link: {
                     externalLinkComponent: CustomExternalLink,
@@ -44,7 +44,7 @@ describe('Link', () => {
         expect(() => getByTestId(CUSTOM_EXTERNAL_TEST_ID)).toThrow();
     });
     it('passes styles to custom component', () => {
-        const { getByTestId } = render(_jsxs(_Fragment, { children: [_jsx(Link, Object.assign({ to: "https://google.com", sx: { mt: 1 } }, { children: "Foo" })), _jsx(Link, Object.assign({ to: "/test/route", sx: { mt: 1 } }, { children: "Foo" }))] }), {
+        const { getByTestId } = render(_jsxs(_Fragment, { children: [_jsx(Link, { to: "https://google.com", sx: { mt: 1 }, children: "Foo" }), _jsx(Link, { to: "/test/route", sx: { mt: 1 }, children: "Foo" })] }), {
             components: {
                 link: {
                     externalLinkComponent: CustomExternalLink,
@@ -52,7 +52,7 @@ describe('Link', () => {
                 },
             },
         });
-        expect(getByTestId(CUSTOM_EXTERNAL_TEST_ID)).toHaveStyle(`margin-top: 0.25rem`);
-        expect(getByTestId(CUSTOM_INTERNAL_TEST_ID)).toHaveStyle(`margin-top: 0.25rem`);
+        expect(getByTestId(CUSTOM_EXTERNAL_TEST_ID)).toHaveStyle(`margin-top: 4px`);
+        expect(getByTestId(CUSTOM_INTERNAL_TEST_ID)).toHaveStyle(`margin-top: 4px`);
     });
 });

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

@@ -18,7 +18,7 @@ const meta = {
 };
 export default meta;
 export const Default = {
-    render: () => (_jsx(Row, { children: _jsxs(List, { children: [_jsx(ListItem, Object.assign({ index: 0 }, { children: "List Item 1" })), _jsx(ListItem, Object.assign({ index: 1 }, { children: "List Item 2" })), _jsxs(ListItem, Object.assign({ index: 2 }, { children: ["List Item 3", _jsxs(List, { children: [_jsx(ListItem, Object.assign({ index: 0 }, { children: "List Item 3.1" })), _jsx(ListItem, Object.assign({ index: 1 }, { children: "List Item 3.2" }))] })] }))] }) })),
+    render: () => (_jsx(Row, { children: _jsxs(List, { children: [_jsx(ListItem, { index: 0, children: "List Item 1" }), _jsx(ListItem, { index: 1, children: "List Item 2" }), _jsxs(ListItem, { index: 2, children: ["List Item 3", _jsxs(List, { children: [_jsx(ListItem, { index: 0, children: "List Item 3.1" }), _jsx(ListItem, { index: 1, children: "List Item 3.2" })] })] })] }) })),
 };
 const sizes = [
     { size: LIST_SIZE.LG, label: 'Large' },
@@ -26,14 +26,14 @@ const sizes = [
     { size: LIST_SIZE.SM, label: 'Small' },
 ];
 export const Sizes = {
-    render: () => (_jsx(Column, { children: sizes.map((size, i) => (_jsxs(Group, Object.assign({ type: GROUP_TYPE.REGION, sx: { mt: 3 } }, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, { children: size.label })), _jsx(Row, Object.assign({ sx: { mt: 2 } }, { children: _jsxs(List, Object.assign({ size: size.size }, { children: [_jsx(ListItem, Object.assign({ index: 0 }, { children: "List Item 1" })), _jsx(ListItem, Object.assign({ index: 1 }, { children: "List Item 2" })), _jsx(ListItem, Object.assign({ index: 2 }, { children: "List Item 3" }))] })) }))] }), i))) })),
+    render: () => (_jsx(Column, { children: sizes.map((size, i) => (_jsxs(Group, { type: GROUP_TYPE.REGION, sx: { mt: 3 }, children: [_jsx(Heading, { size: HEADING_SIZE.MD, children: size.label }), _jsx(Row, { sx: { mt: 2 }, children: _jsxs(List, { size: size.size, children: [_jsx(ListItem, { index: 0, children: "List Item 1" }), _jsx(ListItem, { index: 1, children: "List Item 2" }), _jsx(ListItem, { index: 2, children: "List Item 3" })] }) })] }, i))) })),
 };
 export const Ordered = {
-    render: () => (_jsx(Row, { children: _jsxs(List, Object.assign({ icon: ChevronRightIcon, ordered: true }, { children: [_jsx(ListItem, Object.assign({ index: 0 }, { children: "List Item 1" })), _jsx(ListItem, Object.assign({ index: 1 }, { children: "List Item 2" })), _jsx(ListItem, Object.assign({ index: 2 }, { children: "List Item 3" }))] })) })),
+    render: () => (_jsx(Row, { children: _jsxs(List, { icon: ChevronRightIcon, ordered: true, children: [_jsx(ListItem, { index: 0, children: "List Item 1" }), _jsx(ListItem, { index: 1, children: "List Item 2" }), _jsx(ListItem, { index: 2, children: "List Item 3" })] }) })),
 };
 export const CustomIcon = {
-    render: () => (_jsx(Row, { children: _jsxs(List, Object.assign({ icon: ChevronRightIcon, iconColor: COLOR.PRIMARY }, { children: [_jsx(ListItem, Object.assign({ index: 0 }, { children: "List Item 1" })), _jsx(ListItem, Object.assign({ index: 1 }, { children: "List Item 2" })), _jsx(ListItem, Object.assign({ index: 2 }, { children: "List Item 3" }))] })) })),
+    render: () => (_jsx(Row, { children: _jsxs(List, { icon: ChevronRightIcon, iconColor: COLOR.PRIMARY, children: [_jsx(ListItem, { index: 0, children: "List Item 1" }), _jsx(ListItem, { index: 1, children: "List Item 2" }), _jsx(ListItem, { index: 2, children: "List Item 3" })] }) })),
 };
 export const CustomIconPerItem = {
-    render: () => (_jsx(Row, { children: _jsxs(List, Object.assign({ iconSize: FONT_SIZE.ML }, { children: [_jsx(ListItem, Object.assign({ index: 0, icon: BookmarkIcon, onIconClick: () => { }, iconLabel: "Unfavorite" }, { children: "Favorite 1" })), _jsx(ListItem, Object.assign({ index: 1, icon: BookmarkIcon, onIconClick: () => { }, iconLabel: "Favorite" }, { children: "Favorited 2" })), _jsx(ListItem, Object.assign({ index: 2, icon: BookmarkBorderIcon, onIconClick: () => { }, iconLabel: "Favorite" }, { children: "Not Favorited" }))] })) })),
+    render: () => (_jsx(Row, { children: _jsxs(List, { iconSize: FONT_SIZE.ML, children: [_jsx(ListItem, { index: 0, icon: BookmarkIcon, onIconClick: () => { }, iconLabel: "Unfavorite", children: "Favorite 1" }), _jsx(ListItem, { index: 1, icon: BookmarkIcon, onIconClick: () => { }, iconLabel: "Favorite", children: "Favorited 2" }), _jsx(ListItem, { index: 2, icon: BookmarkBorderIcon, onIconClick: () => { }, iconLabel: "Favorite", children: "Not Favorited" })] }) })),
 };

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

@@ -13,12 +13,12 @@ import { List, ListItem } from '.';
 const MockIcon = () => _jsx("div", { "data-testid": "mock-icon" });
 describe('List', () => {
     it('renders children inside list', () => {
-        const { getByRole, getAllByRole } = render(_jsxs(List, { children: [_jsx(ListItem, Object.assign({ index: 0 }, { children: "Item 1" })), _jsx(ListItem, Object.assign({ index: 1 }, { children: "Item 2" }))] }));
+        const { getByRole, getAllByRole } = render(_jsxs(List, { children: [_jsx(ListItem, { index: 0, children: "Item 1" }), _jsx(ListItem, { index: 1, children: "Item 2" })] }));
         expect(getByRole('list')).toBeDefined();
         expect(getAllByRole('listitem')).toHaveLength(2);
     });
     it('renders custom component if provided', () => __awaiter(void 0, void 0, void 0, function* () {
-        const { getAllByTestId } = render(_jsxs(List, Object.assign({ icon: MockIcon }, { children: [_jsx(ListItem, Object.assign({ index: 0 }, { children: "Item 1" })), _jsx(ListItem, Object.assign({ index: 1 }, { children: "Item 2" }))] })));
+        const { getAllByTestId } = render(_jsxs(List, { icon: MockIcon, children: [_jsx(ListItem, { index: 0, children: "Item 1" }), _jsx(ListItem, { index: 1, children: "Item 2" })] }));
         expect(getAllByTestId('mock-icon')).toHaveLength(2);
     }));
 });

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

@@ -70,14 +70,14 @@ export const List = ({ sx, size: sizeParam, ordered, icon, iconSize: iconSizePar
     const size = sizeParam || parentSize || LIST_SIZE.MD;
     const iconSize = iconSizeParam || parentIconSize || iconSizeMap[size];
     const iconColor = iconColorParam || parentIconColor || COLOR.TEXT;
-    return (_jsx(ListConfigContext.Provider, Object.assign({ value: {
+    return (_jsx(ListConfigContext.Provider, { value: {
             size,
             icon: icon || defaultIcon,
             iconColor,
             iconSize,
             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 }))) })));
+        }, children: ordered ? (_jsx("ul", { sx: Object.assign(Object.assign({}, defaultStyles), sx), children: children })) : (_jsx("ol", { sx: Object.assign(Object.assign({}, defaultStyles), sx), children: children })) }));
 };
 export const ListItem = (_a) => {
     var { index, sx, icon: iconParam, iconSize: iconSizeParam, iconColor: iconColorParam, onIconClick, onClick, children, iconLabel, tabIndex: tabIndexParam } = _a, rest = __rest(_a, ["index", "sx", "icon", "iconSize", "iconColor", "onIconClick", "onClick", "children", "iconLabel", "tabIndex"]);
@@ -93,10 +93,10 @@ export const ListItem = (_a) => {
     const typographyStyles = getTypographyStyles(sizeTypographyMap[size]);
     const lineHeight = useLinesHeight({ typography, lines: 1 });
     const tabIndex = tabIndexParam || (onClick ? 0 : undefined);
-    return (_jsxs("li", Object.assign({ sx: Object.assign(Object.assign({ depth, display: 'flex', mt: index === 0 && depth === 0 ? 0 : marginSizeMap[size], ml: 1 }, typographyStyles), sx), tabIndex: tabIndex }, rest, { children: [ordered ? (_jsxs(Label, Object.assign({ standalone: true, sx: { mr: 2 } }, { children: [index + 1, "."] }))) : (_jsx(Column, Object.assign({ sx: { height: lineHeight }, justify: "center" }, { children: _jsx(Icon, { icon: icon, color: iconColor, size: iconSize, onClick: onIconClick, "aria-label": iconLabel, sx: {
+    return (_jsxs("li", Object.assign({ sx: Object.assign(Object.assign({ depth, display: 'flex', mt: index === 0 && depth === 0 ? 0 : marginSizeMap[size], ml: 1 }, typographyStyles), sx), tabIndex: tabIndex }, rest, { children: [ordered ? (_jsxs(Label, { standalone: true, sx: { mr: 2 }, children: [index + 1, "."] })) : (_jsx(Column, { sx: { height: lineHeight }, justify: "center", children: _jsx(Icon, { icon: icon, color: iconColor, size: iconSize, onClick: onIconClick, "aria-label": iconLabel, sx: {
                         mr: 3,
                         alignItems: 'flex-start',
-                    } }) }))), _jsx("div", Object.assign({ sx: {
+                    } }) })), _jsx("div", { sx: {
                     cursor: onClick ? 'pointer' : 'default',
-                } }, { children: children }))] })));
+                }, children: children })] })));
 };

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

@@ -12,22 +12,7 @@ type ListBoxProps<Value extends Key, Option extends BasicOption<Value>> = Styled
     onSelect?: () => void;
     onBlur?: () => void;
 }>;
-export declare const ListBox: <Value extends React.Key = string, Option extends BasicOption<Value> = any>(props: {
-    sx?: import("../../..").StylesProp | 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;
+export declare const ListBox: <Value extends Key = string, Option extends BasicOption<Value> = any>(props: ListBoxProps<Value, Option> & {
+    ref?: React.ForwardedRef<HTMLDivElement>;
 }) => any;
 export {};

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

@@ -20,7 +20,7 @@ function ListBoxInner(_a, ref) {
     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", onClick: option.onClick, onMouseDown: () => selectOption && selectOption(option), sx: {
+        } }, rest, { children: options.map((option) => (_jsx("div", { id: getOptionId(option.value), "aria-selected": selected === option.value, role: "option", onClick: option.onClick, onMouseDown: () => selectOption && selectOption(option), sx: {
                 px: 4,
                 py: 3,
                 backgroundColor: focused === option.value
@@ -42,10 +42,10 @@ function ListBoxInner(_a, ref) {
                 ':hover': {
                     backgroundColor: COLOR.EXTRA_EXTRA_LIGHT_GRAY,
                 },
-            } }, { children: renderOption({
+            }, children: renderOption({
                 option,
                 selected: selected === option.value,
                 focused: focused === option.value,
-            }) }), option.value))) })));
+            }) }, option.value))) })));
 }
 export const ListBox = React.forwardRef(ListBoxInner);

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

@@ -13,23 +13,7 @@ type ListBoxV2Props<Value extends Key, Option extends BasicOption<Value>> = Styl
     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[];
-    className?: string | undefined;
-    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;
+export declare const ListBoxV2: <Value extends Key = string, Option extends BasicOption<Value> = any>(props: ListBoxV2Props<Value, Option> & {
+    ref?: React.ForwardedRef<HTMLDivElement>;
 }) => any;
 export {};

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

@@ -18,11 +18,11 @@ import * as styles from './ListBoxV2.module.css';
 import clsx from 'clsx';
 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({
+    return (_jsx("div", { 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));
+        }) }, option.value));
 }
 function ListBoxInnerV2(_a, ref) {
     var { options, renderOption: renderOptionParam, selected, focused, selectOption, className, sx, style } = _a, rest = __rest(_a, ["options", "renderOption", "selected", "focused", "selectOption", "className", "sx", "style"]);

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

@@ -18,7 +18,7 @@ const meta = {
 };
 export default meta;
 export const Default = {
-    render: () => (_jsx(RowV2, { children: _jsxs(ListV2, { children: [_jsx(ListItemV2, Object.assign({ index: 0 }, { children: "List Item 1" })), _jsx(ListItemV2, Object.assign({ index: 1 }, { children: "List Item 2" })), _jsxs(ListItemV2, Object.assign({ index: 2 }, { children: ["List Item 3", _jsxs(ListV2, { children: [_jsx(ListItemV2, Object.assign({ index: 0 }, { children: "List Item 3.1" })), _jsx(ListItemV2, Object.assign({ index: 1 }, { children: "List Item 3.2" }))] })] }))] }) })),
+    render: () => (_jsx(RowV2, { children: _jsxs(ListV2, { children: [_jsx(ListItemV2, { index: 0, children: "List Item 1" }), _jsx(ListItemV2, { index: 1, children: "List Item 2" }), _jsxs(ListItemV2, { index: 2, children: ["List Item 3", _jsxs(ListV2, { children: [_jsx(ListItemV2, { index: 0, children: "List Item 3.1" }), _jsx(ListItemV2, { index: 1, children: "List Item 3.2" })] })] })] }) })),
 };
 const sizes = [
     { size: LISTV2_SIZE.LG, label: 'Large' },
@@ -26,14 +26,14 @@ const sizes = [
     { size: LISTV2_SIZE.SM, label: 'Small' },
 ];
 export const Sizes = {
-    render: () => (_jsx(ColumnV2, { children: sizes.map((size, i) => (_jsxs(GroupV2, Object.assign({ type: GROUPV2_TYPE.REGION, sx: { mt: 3 } }, { children: [_jsx(HeadingV2, Object.assign({ size: HEADINGV2_SIZE.MD }, { children: size.label })), _jsx(RowV2, Object.assign({ sx: { mt: 2 } }, { children: _jsxs(ListV2, Object.assign({ size: size.size }, { children: [_jsx(ListItemV2, Object.assign({ index: 0 }, { children: "List Item 1" })), _jsx(ListItemV2, Object.assign({ index: 1 }, { children: "List Item 2" })), _jsx(ListItemV2, Object.assign({ index: 2 }, { children: "List Item 3" }))] })) }))] }), i))) })),
+    render: () => (_jsx(ColumnV2, { children: sizes.map((size, i) => (_jsxs(GroupV2, { type: GROUPV2_TYPE.REGION, sx: { mt: 3 }, children: [_jsx(HeadingV2, { size: HEADINGV2_SIZE.MD, children: size.label }), _jsx(RowV2, { sx: { mt: 2 }, children: _jsxs(ListV2, { size: size.size, children: [_jsx(ListItemV2, { index: 0, children: "List Item 1" }), _jsx(ListItemV2, { index: 1, children: "List Item 2" }), _jsx(ListItemV2, { index: 2, children: "List Item 3" })] }) })] }, i))) })),
 };
 export const Ordered = {
-    render: () => (_jsx(RowV2, { children: _jsxs(ListV2, Object.assign({ icon: ChevronRightIcon, ordered: true }, { children: [_jsx(ListItemV2, Object.assign({ index: 0 }, { children: "List Item 1" })), _jsx(ListItemV2, Object.assign({ index: 1 }, { children: "List Item 2" })), _jsx(ListItemV2, Object.assign({ index: 2 }, { children: "List Item 3" }))] })) })),
+    render: () => (_jsx(RowV2, { children: _jsxs(ListV2, { icon: ChevronRightIcon, ordered: true, children: [_jsx(ListItemV2, { index: 0, children: "List Item 1" }), _jsx(ListItemV2, { index: 1, children: "List Item 2" }), _jsx(ListItemV2, { index: 2, children: "List Item 3" })] }) })),
 };
 export const CustomIcon = {
-    render: () => (_jsx(RowV2, { children: _jsxs(ListV2, Object.assign({ icon: ChevronRightIcon, iconColor: COLOR.PRIMARY }, { children: [_jsx(ListItemV2, Object.assign({ index: 0 }, { children: "List Item 1" })), _jsx(ListItemV2, Object.assign({ index: 1 }, { children: "List Item 2" })), _jsx(ListItemV2, Object.assign({ index: 2 }, { children: "List Item 3" }))] })) })),
+    render: () => (_jsx(RowV2, { children: _jsxs(ListV2, { icon: ChevronRightIcon, iconColor: COLOR.PRIMARY, children: [_jsx(ListItemV2, { index: 0, children: "List Item 1" }), _jsx(ListItemV2, { index: 1, children: "List Item 2" }), _jsx(ListItemV2, { index: 2, children: "List Item 3" })] }) })),
 };
 export const CustomIconPerItem = {
-    render: () => (_jsx(RowV2, { children: _jsxs(ListV2, Object.assign({ iconSize: FONT_SIZE.ML }, { children: [_jsx(ListItemV2, Object.assign({ index: 0, icon: BookmarkIcon, onIconClick: () => { }, iconLabel: "Unfavorite" }, { children: "Favorite 1" })), _jsx(ListItemV2, Object.assign({ index: 1, icon: BookmarkIcon, onIconClick: () => { }, iconLabel: "Favorite" }, { children: "Favorited 2" })), _jsx(ListItemV2, Object.assign({ index: 2, icon: BookmarkBorderIcon, onIconClick: () => { }, iconLabel: "Favorite" }, { children: "Not Favorited" }))] })) })),
+    render: () => (_jsx(RowV2, { children: _jsxs(ListV2, { iconSize: FONT_SIZE.ML, children: [_jsx(ListItemV2, { index: 0, icon: BookmarkIcon, onIconClick: () => { }, iconLabel: "Unfavorite", children: "Favorite 1" }), _jsx(ListItemV2, { index: 1, icon: BookmarkIcon, onIconClick: () => { }, iconLabel: "Favorite", children: "Favorited 2" }), _jsx(ListItemV2, { index: 2, icon: BookmarkBorderIcon, onIconClick: () => { }, iconLabel: "Favorite", children: "Not Favorited" })] }) })),
 };

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

@@ -73,14 +73,14 @@ export const ListV2 = ({ sx, size: sizeParam, ordered, icon, iconSize: iconSizeP
     const iconSize = iconSizeParam || parentIconSize || iconSizeMap[size];
     const iconColor = iconColorParam || parentIconColor || COLOR.TEXT;
     const processedStyles = processSx(Object.assign(Object.assign({}, defaultStyles), sx));
-    return (_jsx(ListConfigContext.Provider, Object.assign({ value: {
+    return (_jsx(ListConfigContext.Provider, { value: {
             size,
             icon: icon || defaultIcon,
             iconColor,
             iconSize,
             ordered: ordered || false,
             depth,
-        } }, { children: ordered ? (_jsx("ul", Object.assign({ style: processedStyles }, { children: children }))) : (_jsx("ol", Object.assign({ style: processedStyles }, { children: children }))) })));
+        }, children: ordered ? (_jsx("ul", { style: processedStyles, children: children })) : (_jsx("ol", { style: processedStyles, children: children })) }));
 };
 export const ListItemV2 = (_a) => {
     var { index, sx, icon: iconParam, iconSize: iconSizeParam, iconColor: iconColorParam, onIconClick, onClick, children, iconLabel, tabIndex: tabIndexParam } = _a, rest = __rest(_a, ["index", "sx", "icon", "iconSize", "iconColor", "onIconClick", "onClick", "children", "iconLabel", "tabIndex"]);
@@ -93,10 +93,10 @@ export const ListItemV2 = (_a) => {
     const lineHeight = useLinesHeightV2({ typography, lines: 1 });
     const tabIndex = tabIndexParam || (onClick ? 0 : undefined);
     const processedStyles = processSx(Object.assign(Object.assign({}, sx), typographyStyles));
-    return (_jsxs("li", Object.assign({ style: Object.assign({ display: 'flex', marginTop: index === 0 && depth === 0 ? 0 : marginSizeMap[size], marginLeft: '0.25rem' }, processedStyles), tabIndex: tabIndex }, rest, { children: [ordered ? (_jsxs(LabelV2, Object.assign({ standalone: true, sx: { mr: 2 } }, { children: [index + 1, "."] }))) : (_jsx(ColumnV2, Object.assign({ sx: { height: lineHeight }, justify: "center" }, { children: _jsx(IconV2, { icon: icon, color: iconColor, size: iconSize, onClick: onIconClick, "aria-label": iconLabel, sx: {
+    return (_jsxs("li", Object.assign({ style: Object.assign({ display: 'flex', marginTop: index === 0 && depth === 0 ? 0 : marginSizeMap[size], marginLeft: '0.25rem' }, processedStyles), tabIndex: tabIndex }, rest, { children: [ordered ? (_jsxs(LabelV2, { standalone: true, sx: { mr: 2 }, children: [index + 1, "."] })) : (_jsx(ColumnV2, { sx: { height: lineHeight }, justify: "center", children: _jsx(IconV2, { icon: icon, color: iconColor, size: iconSize, onClick: onIconClick, "aria-label": iconLabel, sx: {
                         mr: 3,
                         alignItems: 'flex-start',
-                    } }) }))), _jsx(BoxV2, Object.assign({ style: {
+                    } }) })), _jsx(BoxV2, { style: {
                     cursor: onClick ? 'pointer' : 'default',
-                } }, { children: children }))] })));
+                }, children: children })] })));
 };

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { StyledElementProps, StylesProp } from '../../../theme';
 type MarkdownProps = StyledElementProps<HTMLDivElement, {
     content: string;

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

@@ -98,7 +98,7 @@ export const Markdown = (_a) => {
             .replace(/^-+/, '')
             .replace(/-+$/, ''));
     };
-    return (_jsx("div", Object.assign({}, rest, { children: _jsx(ReactMarkdown, Object.assign({ rehypePlugins: enableHtml ? [rehypeRaw, remarkGfm] : [remarkGfm], components: {
+    return (_jsx("div", Object.assign({}, rest, { children: _jsx(ReactMarkdown, { rehypePlugins: enableHtml ? [rehypeRaw, remarkGfm] : [remarkGfm], components: {
                 h1: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.XL }, props, { level: props.level + headingLevelOffset, standalone: true, id: slugify(props.children.toString()), sx: Object.assign(Object.assign({}, dynamicTopMarginStyles), customStyles.h1) }))),
                 h2: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.LG }, props, { level: props.level + headingLevelOffset, standalone: true, id: slugify(props.children.toString()), sx: Object.assign(Object.assign({}, dynamicTopMarginStyles), customStyles.h2) }))),
                 h3: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, props, { level: props.level + headingLevelOffset, standalone: true, id: slugify(props.children.toString()), sx: Object.assign(Object.assign({}, dynamicTopMarginStyles), customStyles.h3) }))),
@@ -122,5 +122,5 @@ export const Markdown = (_a) => {
                     return _jsx("img", Object.assign({}, props, { style: styles, alt: alt }));
                 },
                 blockquote: (props) => (_jsx(BlockQuote, Object.assign({}, props, { sx: Object.assign(Object.assign(Object.assign({}, dynamicTopMarginStyles), { my: 5 }), customStyles.blockquote) }))),
-            } }, { children: sanitizedContent })) })));
+            }, children: sanitizedContent }) })));
 };

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { StyledElementPropsV2, StylesPropV2 } from '../../../theme';
 type MarkdownV2Props = StyledElementPropsV2<HTMLDivElement, {
     content: string;

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

@@ -95,7 +95,7 @@ export const MarkdownV2 = (_a) => {
             .replace(/^-+/, '')
             .replace(/-+$/, ''));
     };
-    return (_jsx("div", Object.assign({ className: clsx(typeSafeStyles.markdownWrapper, className) }, rest, { children: _jsx(ReactMarkdown, Object.assign({ rehypePlugins: enableHtml ? [rehypeRaw, remarkGfm] : [remarkGfm], components: {
+    return (_jsx("div", Object.assign({ className: clsx(typeSafeStyles.markdownWrapper, className) }, rest, { children: _jsx(ReactMarkdown, { rehypePlugins: enableHtml ? [rehypeRaw, remarkGfm] : [remarkGfm], components: {
                 h1: (props) => (_jsx(HeadingV2, Object.assign({ size: HEADINGV2_SIZE.XL }, props, { level: props.level + headingLevelOffset, standalone: true, id: slugify(props.children.toString()), sx: customStyles.h1 }))),
                 h2: (props) => (_jsx(HeadingV2, Object.assign({ size: HEADINGV2_SIZE.LG }, props, { level: props.level + headingLevelOffset, standalone: true, id: slugify(props.children.toString()), sx: customStyles.h2 }))),
                 h3: (props) => (_jsx(HeadingV2, Object.assign({ size: HEADINGV2_SIZE.MD }, props, { level: props.level + headingLevelOffset, standalone: true, id: slugify(props.children.toString()), sx: customStyles.h3 }))),
@@ -119,5 +119,5 @@ export const MarkdownV2 = (_a) => {
                     return _jsx("img", Object.assign({}, props, { style: styles, alt: alt }));
                 },
                 blockquote: (props) => (_jsx(BlockQuoteV2, Object.assign({}, props, { sx: Object.assign({ my: 5 }, customStyles.blockquote) }))),
-            } }, { children: sanitizedContent })) })));
+            }, children: sanitizedContent }) })));
 };

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

@@ -15,7 +15,7 @@ const StatefulMonthPicker = (props) => {
     return _jsx(MonthPicker, Object.assign({}, props, { value: date, onChange: setDate }));
 };
 export const Default = {
-    render: () => (_jsx(Box, Object.assign({ sx: { height: '500px' } }, { children: _jsx(StatefulMonthPicker, {}) }))),
+    render: () => (_jsx(Box, { sx: { height: '500px' }, children: _jsx(StatefulMonthPicker, {}) })),
 };
 export const Inline = {
     argTypes: {
@@ -28,6 +28,6 @@ export const Inline = {
     },
     render: (args) => {
         const { backgroundColor } = args;
-        return (_jsx(Box, Object.assign({ sx: { height: '500px' } }, { children: _jsx(StatefulMonthPicker, { backgroundColor: backgroundColor, inline: true }) })));
+        return (_jsx(Box, { sx: { height: '500px' }, children: _jsx(StatefulMonthPicker, { backgroundColor: backgroundColor, inline: true }) }));
     },
 };

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

@@ -15,7 +15,7 @@ const StatefulMonthPickerV2 = (props) => {
     return _jsx(MonthPickerV2, Object.assign({}, props, { value: date, onChange: setDate }));
 };
 export const Default = {
-    render: () => (_jsx(BoxV2, Object.assign({ sx: { height: '500px' } }, { children: _jsx(StatefulMonthPickerV2, {}) }))),
+    render: () => (_jsx(BoxV2, { sx: { height: '500px' }, children: _jsx(StatefulMonthPickerV2, {}) })),
 };
 export const Inline = {
     argTypes: {
@@ -28,6 +28,6 @@ export const Inline = {
     },
     render: (args) => {
         const { backgroundColor } = args;
-        return (_jsx(BoxV2, Object.assign({ sx: { height: '500px' } }, { children: _jsx(StatefulMonthPickerV2, { backgroundColor: backgroundColor, inline: true }) })));
+        return (_jsx(BoxV2, { sx: { height: '500px' }, children: _jsx(StatefulMonthPickerV2, { backgroundColor: backgroundColor, inline: true }) }));
     },
 };