@ndlib/component-library 1.0.45 → 1.0.46

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 }) }));
     },
 };

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

@@ -20,13 +20,13 @@ const sizes = [
 const p1 = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ultrices venenatis purus at porta. Etiam congue sapien leo, sed malesuada justo commodo in. Nunc consequat, massa non cursus posuere, magna eros lacinia lectus, eget lobortis mi erat ut justo. Maecenas nisi mi, mollis sed ornare vitae, pharetra sed augue. Curabitur mollis orci risus, sed imperdiet nisi aliquet et. Ut non elit nec magna rhoncus maximus sit amet ut dui. Mauris sit amet eleifend lectus. Aliquam consectetur posuere libero eu ultricies. Etiam rutrum non orci nec vulputate. Sed vel accumsan diam. Cras aliquet eros eros, sit amet pharetra eros tincidunt ut. Vestibulum est erat, eleifend dapibus eros vel, elementum vehicula risus. Etiam blandit condimentum sodales. Donec non libero in orci aliquam egestas fringilla eget purus. Suspendisse pellentesque at ligula ut accumsan.';
 const p2 = 'Sed non lobortis mi, vitae dapibus arcu. Aenean at euismod arcu. Ut consectetur porttitor mattis. In eget vehicula augue. Ut at dolor posuere, tristique nisi finibus, posuere turpis. Etiam placerat, dui id lacinia volutpat, lorem turpis volutpat nisi, vel dapibus purus lorem at ante. Ut imperdiet enim nec arcu sagittis luctus.';
 export const Default = {
-    render: (args) => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, Object.assign({ type: GROUP_TYPE.REGION }, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.LG, underline: true, sx: { color: COLOR.PRIMARY } }, { children: size.label })), [p1, p2].map((content) => (_jsx(Paragraph, Object.assign({}, args, { size: size.size }, { children: content }))))] })))) })),
+    render: (args) => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, { type: GROUP_TYPE.REGION, children: [_jsx(Heading, { size: HEADING_SIZE.LG, underline: true, sx: { color: COLOR.PRIMARY }, children: size.label }), [p1, p2].map((content) => (_jsx(Paragraph, Object.assign({}, args, { size: size.size, children: content }))))] }))) })),
     args: {
         children: 'Heading',
     },
 };
 export const LineClamp = {
-    render: (args) => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, Object.assign({ type: GROUP_TYPE.REGION }, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.LG, underline: true, sx: { color: COLOR.PRIMARY } }, { children: size.label })), [p1, p2].map((content) => (_jsx(Paragraph, Object.assign({}, args, { size: size.size, clampLines: 2 }, { children: content }))))] })))) })),
+    render: (args) => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, { type: GROUP_TYPE.REGION, children: [_jsx(Heading, { size: HEADING_SIZE.LG, underline: true, sx: { color: COLOR.PRIMARY }, children: size.label }), [p1, p2].map((content) => (_jsx(Paragraph, Object.assign({}, args, { size: size.size, clampLines: 2, children: content }))))] }))) })),
     args: {
         children: 'Heading',
     },

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

@@ -20,13 +20,13 @@ const sizes = [
 const p1 = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ultrices venenatis purus at porta. Etiam congue sapien leo, sed malesuada justo commodo in. Nunc consequat, massa non cursus posuere, magna eros lacinia lectus, eget lobortis mi erat ut justo. Maecenas nisi mi, mollis sed ornare vitae, pharetra sed augue. Curabitur mollis orci risus, sed imperdiet nisi aliquet et. Ut non elit nec magna rhoncus maximus sit amet ut dui. Mauris sit amet eleifend lectus. Aliquam consectetur posuere libero eu ultricies. Etiam rutrum non orci nec vulputate. Sed vel accumsan diam. Cras aliquet eros eros, sit amet pharetra eros tincidunt ut. Vestibulum est erat, eleifend dapibus eros vel, elementum vehicula risus. Etiam blandit condimentum sodales. Donec non libero in orci aliquam egestas fringilla eget purus. Suspendisse pellentesque at ligula ut accumsan.';
 const p2 = 'Sed non lobortis mi, vitae dapibus arcu. Aenean at euismod arcu. Ut consectetur porttitor mattis. In eget vehicula augue. Ut at dolor posuere, tristique nisi finibus, posuere turpis. Etiam placerat, dui id lacinia volutpat, lorem turpis volutpat nisi, vel dapibus purus lorem at ante. Ut imperdiet enim nec arcu sagittis luctus.';
 export const Default = {
-    render: (args) => (_jsx(ColumnV2, { children: sizes.map((size) => (_jsxs(GroupV2, Object.assign({ type: GROUPV2_TYPE.REGION }, { children: [_jsx(HeadingV2, Object.assign({ size: HEADINGV2_SIZE.LG, underline: true, sx: { color: COLOR.PRIMARY } }, { children: size.label })), [p1, p2].map((content) => (_jsx(ParagraphV2, Object.assign({}, args, { size: size.size }, { children: content }))))] })))) })),
+    render: (args) => (_jsx(ColumnV2, { children: sizes.map((size) => (_jsxs(GroupV2, { type: GROUPV2_TYPE.REGION, children: [_jsx(HeadingV2, { size: HEADINGV2_SIZE.LG, underline: true, sx: { color: COLOR.PRIMARY }, children: size.label }), [p1, p2].map((content) => (_jsx(ParagraphV2, Object.assign({}, args, { size: size.size, children: content }))))] }))) })),
     args: {
         children: 'Heading',
     },
 };
 export const LineClamp = {
-    render: (args) => (_jsx(ColumnV2, { children: sizes.map((size) => (_jsxs(GroupV2, Object.assign({ type: GROUPV2_TYPE.REGION }, { children: [_jsx(HeadingV2, Object.assign({ size: HEADINGV2_SIZE.LG, underline: true, sx: { color: COLOR.PRIMARY } }, { children: size.label })), [p1, p2].map((content) => (_jsx(ParagraphV2, Object.assign({}, args, { size: size.size, clampLines: 2 }, { children: content }))))] })))) })),
+    render: (args) => (_jsx(ColumnV2, { children: sizes.map((size) => (_jsxs(GroupV2, { type: GROUPV2_TYPE.REGION, children: [_jsx(HeadingV2, { size: HEADINGV2_SIZE.LG, underline: true, sx: { color: COLOR.PRIMARY }, children: size.label }), [p1, p2].map((content) => (_jsx(ParagraphV2, Object.assign({}, args, { size: size.size, clampLines: 2, children: content }))))] }))) })),
     args: {
         children: 'Heading',
     },

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

@@ -18,7 +18,7 @@ const sizes = [
     { size: PILL_SIZE.SM, label: 'Small' },
 ];
 export const Default = {
-    render: (args) => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, Object.assign({ type: GROUP_TYPE.REGION }, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, { children: size.label })), _jsxs(Row, Object.assign({ sx: { mt: 2 } }, { children: [_jsx(Pill, Object.assign({}, args, { size: size.size, sx: { mr: 1 } })), _jsx(Pill, Object.assign({}, args, { size: size.size, type: PILL_TYPE.OUTLINE }))] }))] })))) })),
+    render: (args) => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, { type: GROUP_TYPE.REGION, children: [_jsx(Heading, { size: HEADING_SIZE.MD, children: size.label }), _jsxs(Row, { sx: { mt: 2 }, children: [_jsx(Pill, Object.assign({}, args, { size: size.size, sx: { mr: 1 } })), _jsx(Pill, Object.assign({}, args, { size: size.size, type: PILL_TYPE.OUTLINE }))] })] }))) })),
     args: {
         type: PILL_TYPE.DEFAULT,
         children: 'Virtual Event',
@@ -26,7 +26,7 @@ export const Default = {
     },
 };
 export const Icon = {
-    render: (args) => (_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 })), _jsxs(Row, Object.assign({ sx: { mt: 2 } }, { children: [_jsx(Pill, Object.assign({}, args, { size: size.size, sx: { mr: 1 }, icon: SearchIcon })), _jsx(Pill, Object.assign({}, args, { size: size.size, type: PILL_TYPE.OUTLINE, icon: SearchIcon }))] }))] })))) })),
+    render: (args) => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, { type: GROUP_TYPE.REGION, children: [_jsx(Heading, { size: HEADING_SIZE.MD, children: size.label }), _jsxs(Row, { sx: { mt: 2 }, children: [_jsx(Pill, Object.assign({}, args, { size: size.size, sx: { mr: 1 }, icon: SearchIcon })), _jsx(Pill, Object.assign({}, args, { size: size.size, type: PILL_TYPE.OUTLINE, icon: SearchIcon }))] })] }))) })),
     args: {
         type: PILL_TYPE.DEFAULT,
         children: 'Virtual Event',
@@ -34,7 +34,7 @@ export const Icon = {
     },
 };
 export const NoAction = {
-    render: (args) => (_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 })), _jsxs(Row, Object.assign({ sx: { mt: 2 } }, { children: [_jsx(Pill, Object.assign({}, args, { size: size.size, sx: { mr: 1 } })), _jsx(Pill, Object.assign({}, args, { size: size.size, type: PILL_TYPE.OUTLINE }))] }))] })))) })),
+    render: (args) => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, { type: GROUP_TYPE.REGION, children: [_jsx(Heading, { size: HEADING_SIZE.MD, children: size.label }), _jsxs(Row, { sx: { mt: 2 }, children: [_jsx(Pill, Object.assign({}, args, { size: size.size, sx: { mr: 1 } })), _jsx(Pill, Object.assign({}, args, { size: size.size, type: PILL_TYPE.OUTLINE }))] })] }))) })),
     args: {
         type: PILL_TYPE.DEFAULT,
         children: 'Virtual Event',

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

@@ -9,13 +9,13 @@ export declare enum PILL_TYPE {
     OUTLINE = "outline"
 }
 export declare const Pill: React.ForwardRefExoticComponent<{
-    sx?: import("../../../theme").StylesProp | undefined;
+    sx?: import("../../../theme").StylesProp;
     children?: React.ReactNode;
 } & Omit<React.HTMLAttributes<HTMLButtonElement>, "children" | "onChange"> & {
-    size?: PILL_SIZE | undefined;
-    type?: PILL_TYPE | undefined;
-    color?: COLOR | undefined;
-    icon?: React.FC<any> | undefined;
+    size?: PILL_SIZE;
+    type?: PILL_TYPE;
+    color?: COLOR;
+    icon?: React.FC<any>;
 } & {
-    htmlFor?: string | undefined;
+    htmlFor?: string;
 } & React.RefAttributes<HTMLButtonElement>>;

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

@@ -107,12 +107,12 @@ export const Pill = React.forwardRef((_a, ref) => {
                     transform: hoverTransform,
                     textDecoration: hoverDecoration,
                 }
-                : undefined }), sx) }, rest, { children: [icon && (_jsx(Icon, { icon: icon, size: typographyStyles.fontSize, sx: { mr: iconMargin[size] }, color: hover ? hoverTextColor : textColor })), _jsx("div", Object.assign({ css: {
+                : undefined }), sx) }, rest, { children: [icon && (_jsx(Icon, { icon: icon, size: typographyStyles.fontSize, sx: { mr: iconMargin[size] }, color: hover ? hoverTextColor : textColor })), _jsx("div", { css: {
                     flexGrow: 1,
                     justifyContent: 'flex-start',
                     textOverflow: 'ellipsis',
                     whiteSpace: 'nowrap',
                     overflow: 'hidden',
                     textAlign: 'start',
-                } }, { children: body }))] })));
+                }, children: body })] })));
 });