@ndlib/component-library 1.0.45 → 1.0.47

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

@@ -23,7 +23,7 @@ const sizes = [
     { size: BUTTON_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 })), _jsx(Button, Object.assign({}, args, { size: size.size, sx: { mt: 1 } }))] })))) })),
+    render: (args) => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, { type: GROUP_TYPE.REGION, children: [_jsx(Heading, { size: HEADING_SIZE.MD, children: size.label }), _jsx(Button, Object.assign({}, args, { size: size.size, sx: { mt: 1 } }))] }))) })),
     args: {
         type: BUTTON_TYPE.DEFAULT,
         children: 'Click Me',
@@ -38,14 +38,14 @@ export const CustomColor = {
     },
 };
 export const Link = {
-    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 })), _jsx(LinkButton, Object.assign({}, args, { sx: { mt: 1 } }))] })))) })),
+    render: (args) => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, { type: GROUP_TYPE.REGION, children: [_jsx(Heading, { size: HEADING_SIZE.MD, children: size.label }), _jsx(LinkButton, Object.assign({}, args, { sx: { mt: 1 } }))] }))) })),
     args: {
         type: BUTTON_TYPE.DEFAULT,
         children: 'Click Me',
     },
 };
 export const OutlineButton = {
-    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 })), _jsx(Button, Object.assign({}, args, { size: size.size, sx: { mt: 1 } }))] })))) })),
+    render: (args) => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, { type: GROUP_TYPE.REGION, children: [_jsx(Heading, { size: HEADING_SIZE.MD, children: size.label }), _jsx(Button, Object.assign({}, args, { size: size.size, sx: { mt: 1 } }))] }))) })),
     args: {
         type: BUTTON_TYPE.OUTLINE,
         children: 'Click Me',
@@ -53,7 +53,7 @@ export const OutlineButton = {
     },
 };
 export const TextButton = {
-    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 })), _jsx(Button, Object.assign({}, args, { size: size.size, sx: { mt: 1 } }))] })))) })),
+    render: (args) => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, { type: GROUP_TYPE.REGION, children: [_jsx(Heading, { size: HEADING_SIZE.MD, children: size.label }), _jsx(Button, Object.assign({}, args, { size: size.size, sx: { mt: 1 } }))] }))) })),
     args: {
         type: BUTTON_TYPE.TEXT,
         onClick: () => { },
@@ -61,7 +61,7 @@ export const TextButton = {
     },
 };
 export const IconButton = {
-    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 })), _jsx(Button, Object.assign({}, args, { size: size.size, sx: { mt: 1 }, primaryIcon: SettingsIcon }))] })))) })),
+    render: (args) => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, { type: GROUP_TYPE.REGION, children: [_jsx(Heading, { size: HEADING_SIZE.MD, children: size.label }), _jsx(Button, Object.assign({}, args, { size: size.size, sx: { mt: 1 }, primaryIcon: SettingsIcon }))] }))) })),
     args: {
         type: BUTTON_TYPE.TEXT,
         children: 'Click Me',
@@ -69,22 +69,22 @@ export const IconButton = {
     },
 };
 export const LeftIcon = {
-    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 })), _jsx(Button, Object.assign({}, args, { size: size.size, sx: { mt: 1 }, leftIcon: 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 }), _jsx(Button, Object.assign({}, args, { size: size.size, sx: { mt: 1 }, leftIcon: SearchIcon }))] }))) })),
     args: {
         onClick: () => { },
         children: 'Search',
     },
 };
 export const RightIcon = {
-    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 })), _jsx(Button, Object.assign({}, args, { size: size.size, sx: { mt: 1 }, rightIcon: ArrowDropDownIcon }))] })))) })),
+    render: (args) => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, { type: GROUP_TYPE.REGION, children: [_jsx(Heading, { size: HEADING_SIZE.MD, children: size.label }), _jsx(Button, Object.assign({}, args, { size: size.size, sx: { mt: 1 }, rightIcon: ArrowDropDownIcon }))] }))) })),
     args: {
         onClick: () => { },
         children: 'Select',
     },
 };
 export const Loading = {
-    render: () => (_jsxs(Column, { children: [_jsx(Row, { children: _jsx(Button, Object.assign({ loading: true }, { children: "Click Me" })) }), _jsx(Row, Object.assign({ sx: { mt: 1 } }, { children: _jsx(Button, Object.assign({ type: BUTTON_TYPE.OUTLINE, loading: true }, { children: "Click Me" })) })), _jsx(Row, Object.assign({ sx: { mt: 1 } }, { children: _jsx(Button, Object.assign({ type: BUTTON_TYPE.TEXT, loading: true }, { children: "Click Me" })) }))] })),
+    render: () => (_jsxs(Column, { children: [_jsx(Row, { children: _jsx(Button, { loading: true, children: "Click Me" }) }), _jsx(Row, { sx: { mt: 1 }, children: _jsx(Button, { type: BUTTON_TYPE.OUTLINE, loading: true, children: "Click Me" }) }), _jsx(Row, { sx: { mt: 1 }, children: _jsx(Button, { type: BUTTON_TYPE.TEXT, loading: true, children: "Click Me" }) })] })),
 };
 export const Disabled = {
-    render: () => (_jsxs(Column, { children: [_jsx(Row, { children: _jsx(Button, Object.assign({ disabled: true }, { children: "Click Me" })) }), _jsx(Row, Object.assign({ sx: { mt: 1 } }, { children: _jsx(Button, Object.assign({ type: BUTTON_TYPE.OUTLINE, disabled: true }, { children: "Click Me" })) })), _jsx(Row, Object.assign({ sx: { mt: 1 } }, { children: _jsx(Button, Object.assign({ type: BUTTON_TYPE.TEXT, disabled: true }, { children: "Click Me" })) }))] })),
+    render: () => (_jsxs(Column, { children: [_jsx(Row, { children: _jsx(Button, { disabled: true, children: "Click Me" }) }), _jsx(Row, { sx: { mt: 1 }, children: _jsx(Button, { type: BUTTON_TYPE.OUTLINE, disabled: true, children: "Click Me" }) }), _jsx(Row, { sx: { mt: 1 }, children: _jsx(Button, { type: BUTTON_TYPE.TEXT, disabled: true, children: "Click Me" }) })] })),
 };

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

@@ -16,7 +16,7 @@ describe('Button', () => {
         expect(getByText('Foo')).toBeInTheDocument();
     });
     it('renders icon component passed to it', () => {
-        const { getByText } = render(_jsxs(_Fragment, { children: [_jsx(Button, Object.assign({ leftIcon: MockLeftIcon }, { children: "Click Me" })), _jsx(Button, Object.assign({ primaryIcon: MockPrimaryIcon }, { children: "Click Me" })), _jsx(Button, Object.assign({ rightIcon: MockRightIcon }, { children: "Click Me" }))] }));
+        const { getByText } = render(_jsxs(_Fragment, { children: [_jsx(Button, { leftIcon: MockLeftIcon, children: "Click Me" }), _jsx(Button, { primaryIcon: MockPrimaryIcon, children: "Click Me" }), _jsx(Button, { rightIcon: MockRightIcon, children: "Click Me" })] }));
         expect(getByText('Mock Primary Icon')).toBeDefined();
         expect(getByText('Mock Left Icon')).toBeDefined();
         expect(getByText('Mock Right Icon')).toBeDefined();

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

@@ -26,23 +26,23 @@ export type ButtonProps = StyledElementProps<HTMLButtonElement, {
     disableFocusStyles?: boolean;
 }>;
 export declare const Button: React.ForwardRefExoticComponent<{
-    sx?: import("../../../theme").StylesProp | undefined;
+    sx?: import("../../../theme").StylesProp;
     children?: React.ReactNode;
 } & Omit<React.HTMLAttributes<HTMLButtonElement>, "children" | "onChange"> & {
-    size?: BUTTON_SIZE | undefined;
-    type?: BUTTON_TYPE | undefined;
-    color?: COLOR | undefined;
-    textColor?: COLOR | undefined;
-    customColor?: string | undefined;
-    primaryIcon?: React.FC<any> | undefined;
-    leftIcon?: React.FC<any> | undefined;
-    rightIcon?: React.FC<any> | undefined;
-    accessibleLabel?: string | undefined;
-    loading?: boolean | undefined;
-    disabled?: boolean | undefined;
-    disableFocusStyles?: boolean | undefined;
+    size?: BUTTON_SIZE;
+    type?: BUTTON_TYPE;
+    color?: COLOR;
+    textColor?: COLOR;
+    customColor?: string;
+    primaryIcon?: React.FC<any>;
+    leftIcon?: React.FC<any>;
+    rightIcon?: React.FC<any>;
+    accessibleLabel?: string;
+    loading?: boolean;
+    disabled?: boolean;
+    disableFocusStyles?: boolean;
 } & {
-    htmlFor?: string | undefined;
+    htmlFor?: string;
 } & React.RefAttributes<HTMLButtonElement>>;
 type LinkButtonProps = Omit<ButtonProps, 'type' | 'color' | 'textColor'>;
 export declare const LinkButton: React.FC<LinkButtonProps>;

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

@@ -107,12 +107,12 @@ export const Button = React.forwardRef((_a, ref) => {
         body = (_jsx(Icon, { icon: primaryIcon, size: getIconSize(typographyStyles.fontSize), color: textColor }));
     }
     if (loading) {
-        body = (_jsxs("div", Object.assign({ sx: {
+        body = (_jsxs("div", { sx: {
                 position: 'relative',
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',
-            } }, { children: [_jsx(Spinner, { size: SPINNER_SIZE.SM, color: textColor, sx: { position: 'absolute' } }), _jsx("div", Object.assign({ sx: { visibility: 'hidden' } }, { children: body }))] })));
+            }, children: [_jsx(Spinner, { size: SPINNER_SIZE.SM, color: textColor, sx: { position: 'absolute' } }), _jsx("div", { sx: { visibility: 'hidden' }, children: body })] }));
     }
     const hoverStyles = !disabled
         ? {
@@ -123,14 +123,14 @@ export const Button = React.forwardRef((_a, ref) => {
         : undefined;
     return (_jsxs("button", Object.assign({ ref: ref, tabIndex: disabled ? -1 : 0, disabled: disabled, css: {
             backgroundColor: customColor,
-        }, sx: Object.assign(Object.assign({ cursor, bg: customColor ? undefined : bg, color: textColor, px: paddingX, width: width, height: height, border: 'solid 1px', borderRadius: '4px', borderColor, display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', ':hover': !disableFocusStyles ? hoverStyles : {}, ':focus': !disableFocusStyles ? hoverStyles : {} }, typographyStyles), sx) }, rest, { children: [leftIcon && (_jsx(Icon, { icon: leftIcon, size: typographyStyles.fontSize, sx: { mr: iconMargin[size] }, color: textColor })), _jsx("div", Object.assign({ css: {
+        }, sx: Object.assign(Object.assign({ cursor, bg: customColor ? undefined : bg, color: textColor, px: paddingX, width: width, height: height, border: 'solid 1px', borderRadius: '4px', borderColor, display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', ':hover': !disableFocusStyles ? hoverStyles : {}, ':focus': !disableFocusStyles ? hoverStyles : {} }, typographyStyles), sx) }, rest, { children: [leftIcon && (_jsx(Icon, { icon: leftIcon, size: typographyStyles.fontSize, sx: { mr: iconMargin[size] }, color: textColor })), _jsx("div", { css: {
                     flexGrow: 1,
                     justifyContent: 'flex-start',
                     textOverflow: 'ellipsis',
                     whiteSpace: 'nowrap',
                     overflow: 'hidden',
                     textAlign: 'start',
-                } }, { children: body })), rightIcon && (_jsx(Icon, { icon: rightIcon, size: typographyStyles.fontSize, sx: { ml: iconMargin[size] }, color: textColor }))] })));
+                }, children: body }), rightIcon && (_jsx(Icon, { icon: rightIcon, size: typographyStyles.fontSize, sx: { ml: iconMargin[size] }, color: textColor }))] })));
 });
 export const LinkButton = (props) => {
     return (_jsx(Button, Object.assign({}, props, { color: COLOR.ND_BLUE_BRIGHT, textColor: COLOR.WHITE })));

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

@@ -23,7 +23,7 @@ const sizes = [
     { size: BUTTONV2_SIZE.SM, label: 'Small' },
 ];
 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.MD }, { children: size.label })), _jsx(ButtonV2, Object.assign({}, args, { size: size.size, sx: { mt: 1 } }))] })))) })),
+    render: (args) => (_jsx(ColumnV2, { children: sizes.map((size) => (_jsxs(GroupV2, { type: GROUPV2_TYPE.REGION, children: [_jsx(HeadingV2, { size: HEADINGV2_SIZE.MD, children: size.label }), _jsx(ButtonV2, Object.assign({}, args, { size: size.size, sx: { mt: 1 } }))] }))) })),
     args: {
         type: BUTTONV2_TYPE.DEFAULT,
         children: 'Click Me',
@@ -38,14 +38,14 @@ export const CustomColor = {
     },
 };
 export const Link = {
-    render: (args) => (_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(LinkButtonV2, Object.assign({}, args, { sx: { mt: 1 } }))] })))) })),
+    render: (args) => (_jsx(ColumnV2, { children: sizes.map((size) => (_jsxs(GroupV2, { type: GROUPV2_TYPE.REGION, children: [_jsx(HeadingV2, { size: HEADINGV2_SIZE.MD, children: size.label }), _jsx(LinkButtonV2, Object.assign({}, args, { sx: { mt: 1 } }))] }))) })),
     args: {
         type: BUTTONV2_TYPE.DEFAULT,
         children: 'Click Me',
     },
 };
 export const OutlineButton = {
-    render: (args) => (_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(ButtonV2, Object.assign({}, args, { size: size.size, sx: { mt: 1 } }))] })))) })),
+    render: (args) => (_jsx(ColumnV2, { children: sizes.map((size) => (_jsxs(GroupV2, { type: GROUPV2_TYPE.REGION, children: [_jsx(HeadingV2, { size: HEADINGV2_SIZE.MD, children: size.label }), _jsx(ButtonV2, Object.assign({}, args, { size: size.size, sx: { mt: 1 } }))] }))) })),
     args: {
         type: BUTTONV2_TYPE.OUTLINE,
         children: 'Click Me',
@@ -53,7 +53,7 @@ export const OutlineButton = {
     },
 };
 export const TextButton = {
-    render: (args) => (_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(ButtonV2, Object.assign({}, args, { size: size.size, sx: { mt: 1 } }))] })))) })),
+    render: (args) => (_jsx(ColumnV2, { children: sizes.map((size) => (_jsxs(GroupV2, { type: GROUPV2_TYPE.REGION, children: [_jsx(HeadingV2, { size: HEADINGV2_SIZE.MD, children: size.label }), _jsx(ButtonV2, Object.assign({}, args, { size: size.size, sx: { mt: 1 } }))] }))) })),
     args: {
         type: BUTTONV2_TYPE.TEXT,
         onClick: () => { },
@@ -61,7 +61,7 @@ export const TextButton = {
     },
 };
 export const IconButton = {
-    render: (args) => (_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(ButtonV2, Object.assign({}, args, { size: size.size, sx: { mt: 1 }, primaryIcon: SettingsIcon }))] })))) })),
+    render: (args) => (_jsx(ColumnV2, { children: sizes.map((size) => (_jsxs(GroupV2, { type: GROUPV2_TYPE.REGION, children: [_jsx(HeadingV2, { size: HEADINGV2_SIZE.MD, children: size.label }), _jsx(ButtonV2, Object.assign({}, args, { size: size.size, sx: { mt: 1 }, primaryIcon: SettingsIcon }))] }))) })),
     args: {
         type: BUTTONV2_TYPE.TEXT,
         children: 'Click Me',
@@ -69,22 +69,22 @@ export const IconButton = {
     },
 };
 export const LeftIcon = {
-    render: (args) => (_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(ButtonV2, Object.assign({}, args, { size: size.size, sx: { mt: 1 }, leftIcon: SearchIcon }))] })))) })),
+    render: (args) => (_jsx(ColumnV2, { children: sizes.map((size) => (_jsxs(GroupV2, { type: GROUPV2_TYPE.REGION, children: [_jsx(HeadingV2, { size: HEADINGV2_SIZE.MD, children: size.label }), _jsx(ButtonV2, Object.assign({}, args, { size: size.size, sx: { mt: 1 }, leftIcon: SearchIcon }))] }))) })),
     args: {
         onClick: () => { },
         children: 'Search',
     },
 };
 export const RightIcon = {
-    render: (args) => (_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(ButtonV2, Object.assign({}, args, { size: size.size, sx: { mt: 1 }, rightIcon: ArrowDropDownIcon }))] })))) })),
+    render: (args) => (_jsx(ColumnV2, { children: sizes.map((size) => (_jsxs(GroupV2, { type: GROUPV2_TYPE.REGION, children: [_jsx(HeadingV2, { size: HEADINGV2_SIZE.MD, children: size.label }), _jsx(ButtonV2, Object.assign({}, args, { size: size.size, sx: { mt: 1 }, rightIcon: ArrowDropDownIcon }))] }))) })),
     args: {
         onClick: () => { },
         children: 'Select',
     },
 };
 export const Loading = {
-    render: () => (_jsxs(ColumnV2, { children: [_jsx(RowV2, { children: _jsx(ButtonV2, Object.assign({ loading: true }, { children: "Click Me" })) }), _jsx(RowV2, Object.assign({ sx: { mt: 1 } }, { children: _jsx(ButtonV2, Object.assign({ type: BUTTONV2_TYPE.OUTLINE, loading: true }, { children: "Click Me" })) })), _jsx(RowV2, Object.assign({ sx: { mt: 1 } }, { children: _jsx(ButtonV2, Object.assign({ type: BUTTONV2_TYPE.TEXT, loading: true }, { children: "Click Me" })) }))] })),
+    render: () => (_jsxs(ColumnV2, { children: [_jsx(RowV2, { children: _jsx(ButtonV2, { loading: true, children: "Click Me" }) }), _jsx(RowV2, { sx: { mt: 1 }, children: _jsx(ButtonV2, { type: BUTTONV2_TYPE.OUTLINE, loading: true, children: "Click Me" }) }), _jsx(RowV2, { sx: { mt: 1 }, children: _jsx(ButtonV2, { type: BUTTONV2_TYPE.TEXT, loading: true, children: "Click Me" }) })] })),
 };
 export const Disabled = {
-    render: () => (_jsxs(ColumnV2, { children: [_jsx(RowV2, { children: _jsx(ButtonV2, Object.assign({ disabled: true }, { children: "Click Me" })) }), _jsx(RowV2, Object.assign({ sx: { mt: 1 } }, { children: _jsx(ButtonV2, Object.assign({ type: BUTTONV2_TYPE.OUTLINE, disabled: true }, { children: "Click Me" })) })), _jsx(RowV2, Object.assign({ sx: { mt: 1 } }, { children: _jsx(ButtonV2, Object.assign({ type: BUTTONV2_TYPE.TEXT, disabled: true }, { children: "Click Me" })) }))] })),
+    render: () => (_jsxs(ColumnV2, { children: [_jsx(RowV2, { children: _jsx(ButtonV2, { disabled: true, children: "Click Me" }) }), _jsx(RowV2, { sx: { mt: 1 }, children: _jsx(ButtonV2, { type: BUTTONV2_TYPE.OUTLINE, disabled: true, children: "Click Me" }) }), _jsx(RowV2, { sx: { mt: 1 }, children: _jsx(ButtonV2, { type: BUTTONV2_TYPE.TEXT, disabled: true, children: "Click Me" }) })] })),
 };

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

@@ -16,7 +16,7 @@ describe('Button', () => {
         expect(getByText('Foo')).toBeInTheDocument();
     });
     it('renders icon component passed to it', () => {
-        const { getByText } = render(_jsxs(_Fragment, { children: [_jsx(ButtonV2, Object.assign({ leftIcon: MockLeftIcon }, { children: "Click Me" })), _jsx(ButtonV2, Object.assign({ primaryIcon: MockPrimaryIcon }, { children: "Click Me" })), _jsx(ButtonV2, Object.assign({ rightIcon: MockRightIcon }, { children: "Click Me" }))] }));
+        const { getByText } = render(_jsxs(_Fragment, { children: [_jsx(ButtonV2, { leftIcon: MockLeftIcon, children: "Click Me" }), _jsx(ButtonV2, { primaryIcon: MockPrimaryIcon, children: "Click Me" }), _jsx(ButtonV2, { rightIcon: MockRightIcon, children: "Click Me" })] }));
         expect(getByText('Mock Primary Icon')).toBeDefined();
         expect(getByText('Mock Left Icon')).toBeDefined();
         expect(getByText('Mock Right Icon')).toBeDefined();

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

@@ -27,24 +27,24 @@ export type ButtonV2Props = StyledElementPropsV2<HTMLButtonElement, {
     className?: string;
 }>;
 export declare const ButtonV2: React.ForwardRefExoticComponent<{
-    sx?: import("../../../theme").StylesPropV2 | undefined;
+    sx?: import("../../../theme").StylesPropV2;
     children?: React.ReactNode;
 } & Omit<React.HTMLAttributes<HTMLButtonElement>, "children" | "onChange"> & {
-    size?: BUTTONV2_SIZE | undefined;
-    type?: BUTTONV2_TYPE | undefined;
-    color?: COLOR | undefined;
-    textColor?: COLOR | undefined;
-    customColor?: string | undefined;
-    primaryIcon?: React.FC<any> | undefined;
-    leftIcon?: React.FC<any> | undefined;
-    rightIcon?: React.FC<any> | undefined;
-    accessibleLabel?: string | undefined;
-    loading?: boolean | undefined;
-    disabled?: boolean | undefined;
-    disableFocusStyles?: boolean | undefined;
-    className?: string | undefined;
+    size?: BUTTONV2_SIZE;
+    type?: BUTTONV2_TYPE;
+    color?: COLOR;
+    textColor?: COLOR;
+    customColor?: string;
+    primaryIcon?: React.FC<any>;
+    leftIcon?: React.FC<any>;
+    rightIcon?: React.FC<any>;
+    accessibleLabel?: string;
+    loading?: boolean;
+    disabled?: boolean;
+    disableFocusStyles?: boolean;
+    className?: string;
 } & {
-    htmlFor?: string | undefined;
+    htmlFor?: string;
 } & React.RefAttributes<HTMLButtonElement>>;
 type LinkButtonV2Props = Omit<ButtonV2Props, 'type' | 'color' | 'textColor'>;
 export declare const LinkButtonV2: React.FC<LinkButtonV2Props>;

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

@@ -115,7 +115,7 @@ export const ButtonV2 = React.forwardRef((_a, ref) => {
         body = (_jsx(IconV2, { icon: primaryIcon, size: getIconSize(typographyStyles.fontSize), color: textColor }));
     }
     if (loading) {
-        body = (_jsxs("div", Object.assign({ className: typeSafeStyles.spinnerWrapper }, { children: [_jsx(SpinnerV2, { size: SPINNERV2_SIZE.SM, color: textColor, sx: { position: 'absolute' } }), _jsx("div", Object.assign({ style: { visibility: 'hidden' } }, { children: body }))] })));
+        body = (_jsxs("div", { className: typeSafeStyles.spinnerWrapper, children: [_jsx(SpinnerV2, { size: SPINNERV2_SIZE.SM, color: textColor, sx: { position: 'absolute' } }), _jsx("div", { style: { visibility: 'hidden' }, children: body })] }));
     }
     const processedStyles = processSx(Object.assign(Object.assign({ bg: customColor ? customColor : bg }, typographyStyles), sx));
     const hoverStyles = !disabled
@@ -130,7 +130,7 @@ export const ButtonV2 = React.forwardRef((_a, ref) => {
     return (_jsxs("button", Object.assign({}, anchorElementProps, { ref: ref, tabIndex: disabled ? -1 : 0, disabled: disabled, className: clsx(typeSafeStyles.button, className), style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ cursor }, processSx({
             color: textColor,
             borderColor,
-        })), { paddingLeft: paddingX, paddingRight: paddingX, width: width, height: height }), appliedHoverStyles), appliedFocusStyles), processedStyles) }, rest, { children: [leftIcon && (_jsx(IconV2, { icon: leftIcon, size: typographyStyles.fontSize, sx: { mr: iconMargin[size] }, color: textColor })), _jsx("div", Object.assign({ className: typeSafeStyles.bodyWrapper }, { children: body })), rightIcon && (_jsx(IconV2, { icon: rightIcon, size: typographyStyles.fontSize, sx: { ml: iconMargin[size] }, color: textColor }))] })));
+        })), { paddingLeft: paddingX, paddingRight: paddingX, width: width, height: height }), appliedHoverStyles), appliedFocusStyles), processedStyles) }, rest, { children: [leftIcon && (_jsx(IconV2, { icon: leftIcon, size: typographyStyles.fontSize, sx: { mr: iconMargin[size] }, color: textColor })), _jsx("div", { className: typeSafeStyles.bodyWrapper, children: body }), rightIcon && (_jsx(IconV2, { icon: rightIcon, size: typographyStyles.fontSize, sx: { ml: iconMargin[size] }, color: textColor }))] })));
 });
 export const LinkButtonV2 = (props) => {
     return (_jsx(ButtonV2, Object.assign({}, props, { color: COLOR.ND_BLUE_BRIGHT, textColor: COLOR.WHITE })));

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

@@ -34,7 +34,7 @@ export function CheckboxGroup(_a) {
         }
         return optionsByColumn;
     }, [options, columns]);
-    return (_jsx(Row, Object.assign({}, rest, { children: optionsByColumn.map((options, index) => (_jsx(Column, Object.assign({ grow: 1, sx: Object.assign({ mr: 4 }, columnStyles) }, { children: options.map((option) => (_jsx(Group, Object.assign({ type: GROUP_TYPE.RAW }, { children: ({ labelTargetId }) => (_jsxs(Row, Object.assign({ sx: Object.assign({ mb: 2, alignItems: 'center' }, rowStyles) }, { children: [_jsx(Checkbox, { onChange: (checked) => {
+    return (_jsx(Row, Object.assign({}, rest, { children: optionsByColumn.map((options, index) => (_jsx(Column, { grow: 1, sx: Object.assign({ mr: 4 }, columnStyles), children: options.map((option) => (_jsx(Group, { type: GROUP_TYPE.RAW, children: ({ labelTargetId }) => (_jsxs(Row, { sx: Object.assign({ mb: 2, alignItems: 'center' }, rowStyles), children: [_jsx(Checkbox, { onChange: (checked) => {
                                 const updatedSet = new Set(checkedOptions || []);
                                 if (checked) {
                                     updatedSet.add(option.value);
@@ -46,5 +46,5 @@ export function CheckboxGroup(_a) {
                             }, checked: !!(checkedOptions === null || checkedOptions === void 0 ? void 0 : checkedOptions.has(option.value)), id: labelTargetId, disabled: option.disabled, sx: {
                                 mr: 2,
                                 flexShrink: 0,
-                            } }), _jsx(Label, Object.assign({ sx: Object.assign(Object.assign({ cursor: option.disabled ? 'not-allowed' : 'pointer' }, getTypographyStyles(TYPOGRAPHY_TYPE.CONDENSED_TEXT_MEDIUM)), { color: option.disabled ? COLOR.GRAY : undefined }) }, { children: option.label }))] }))) }), option.value))) }), index))) })));
+                            } }), _jsx(Label, { sx: Object.assign(Object.assign({ cursor: option.disabled ? 'not-allowed' : 'pointer' }, getTypographyStyles(TYPOGRAPHY_TYPE.CONDENSED_TEXT_MEDIUM)), { color: option.disabled ? COLOR.GRAY : undefined }), children: option.label })] })) }, option.value))) }, index))) })));
 }

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

@@ -34,7 +34,7 @@ export function CheckboxGroupV2(_a) {
         }
         return optionsByColumn;
     }, [options, columns]);
-    return (_jsx(RowV2, Object.assign({}, rest, { children: optionsByColumn.map((options, index) => (_jsx(ColumnV2, Object.assign({ grow: 1, sx: Object.assign({ mr: 4 }, columnStyles) }, { children: options.map((option) => (_jsx(GroupV2, Object.assign({ type: GROUPV2_TYPE.RAW }, { children: ({ labelTargetId }) => (_jsxs(RowV2, Object.assign({ sx: Object.assign({ mb: 2, alignItems: 'center' }, rowStyles) }, { children: [_jsx(CheckboxV2, { onChange: (checked) => {
+    return (_jsx(RowV2, Object.assign({}, rest, { children: optionsByColumn.map((options, index) => (_jsx(ColumnV2, { grow: 1, sx: Object.assign({ mr: 4 }, columnStyles), children: options.map((option) => (_jsx(GroupV2, { type: GROUPV2_TYPE.RAW, children: ({ labelTargetId }) => (_jsxs(RowV2, { sx: Object.assign({ mb: 2, alignItems: 'center' }, rowStyles), children: [_jsx(CheckboxV2, { onChange: (checked) => {
                                 const updatedSet = new Set(checkedOptions || []);
                                 if (checked) {
                                     updatedSet.add(option.value);
@@ -46,5 +46,5 @@ export function CheckboxGroupV2(_a) {
                             }, checked: !!(checkedOptions === null || checkedOptions === void 0 ? void 0 : checkedOptions.has(option.value)), id: labelTargetId, disabled: option.disabled, sx: {
                                 mr: 2,
                                 flexShrink: 0,
-                            } }), _jsx(LabelV2, Object.assign({ sx: Object.assign(Object.assign({ cursor: option.disabled ? 'not-allowed' : 'pointer' }, getTypographyStyles(TYPOGRAPHY_TYPE.CONDENSED_TEXT_MEDIUM)), { color: option.disabled ? COLOR.GRAY : undefined }) }, { children: option.label }))] }))) }), option.value))) }), index))) })));
+                            } }), _jsx(LabelV2, { sx: Object.assign(Object.assign({ cursor: option.disabled ? 'not-allowed' : 'pointer' }, getTypographyStyles(TYPOGRAPHY_TYPE.CONDENSED_TEXT_MEDIUM)), { color: option.disabled ? COLOR.GRAY : undefined }), children: option.label })] })) }, option.value))) }, index))) })));
 }

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import { FlexHelperPropsV2 } from '../RowV2';
 export declare const ColumnV2: React.ForwardRefExoticComponent<{
-    sx?: import("../../../theme").StylesPropV2 | undefined;
+    sx?: import("../../../theme").StylesPropV2;
     children?: React.ReactNode;
 } & Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> & FlexHelperPropsV2 & {
-    htmlFor?: string | undefined;
+    htmlFor?: string;
 } & React.RefAttributes<HTMLDivElement>>;

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

@@ -17,5 +17,5 @@ export const ColumnV2 = React.forwardRef((_a, ref) => {
     var { sx, children } = _a, rest = __rest(_a, ["sx", "children"]);
     const flexStyles = convertFlexHelperPropsV2(rest);
     const processedStyles = processSx(sx);
-    return (_jsx("div", Object.assign({ ref: ref }, rest, { style: Object.assign(Object.assign(Object.assign({}, flexStyles), processedStyles), { display: 'flex', flexDirection: 'column' }) }, { children: children })));
+    return (_jsx("div", Object.assign({ ref: ref }, rest, { style: Object.assign(Object.assign(Object.assign({}, flexStyles), processedStyles), { display: 'flex', flexDirection: 'column' }), children: children })));
 });

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

@@ -45,7 +45,7 @@ const meta = {
                 padding: 16,
                 position: 'relative',
             };
-            return (_jsxs("div", Object.assign({ style: containerStyle }, { children: [_jsx("p", Object.assign({ style: { marginTop: 0 } }, { children: "The banner (if shown) is fixed to the bottom of the viewport." })), _jsx(Story, {})] })));
+            return (_jsxs("div", { style: containerStyle, children: [_jsx("p", { style: { marginTop: 0 }, children: "The banner (if shown) is fixed to the bottom of the viewport." }), _jsx(Story, {})] }));
         },
     ],
     parameters: {

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

@@ -174,13 +174,13 @@ export const ConsentBanner = ({ clarityProjectId, countryCode = null, autoDetect
     };
     if (!shouldShow)
         return null;
-    return (_jsxs("div", Object.assign({ role: "dialog", "aria-live": "polite", "aria-label": "Consent for analytics", className: className, style: Object.assign({ position: 'fixed', bottom: 0, left: 0, right: 0, zIndex: 99999, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '0.75rem', padding: '0.9rem 1rem', background: 'rgba(17, 24, 39, 0.98)', color: 'white', boxShadow: '0 -6px 24px rgba(0,0,0,0.25)', flexWrap: 'wrap' }, style) }, { children: [_jsx("p", Object.assign({ style: {
+    return (_jsxs("div", { role: "dialog", "aria-live": "polite", "aria-label": "Consent for analytics", className: className, style: Object.assign({ position: 'fixed', bottom: 0, left: 0, right: 0, zIndex: 99999, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '0.75rem', padding: '0.9rem 1rem', background: 'rgba(17, 24, 39, 0.98)', color: 'white', boxShadow: '0 -6px 24px rgba(0,0,0,0.25)', flexWrap: 'wrap' }, style), children: [_jsx("p", { style: {
                     fontFamily: 'Arial, sans-serif',
                     textAlign: 'center',
                     margin: 0,
                     lineHeight: 1.4,
                     flex: '1 1 420px',
-                } }, { children: "We use Microsoft Clarity to improve our site. Do you consent to analytics cookies?" })), _jsxs("div", Object.assign({ style: { display: 'flex', gap: '0.5rem', flexShrink: 0 } }, { children: [_jsx("button", Object.assign({ onClick: handleDeny, type: "button", style: {
+                }, children: "We use Microsoft Clarity to improve our site. Do you consent to analytics cookies?" }), _jsxs("div", { style: { display: 'flex', gap: '0.5rem', flexShrink: 0 }, children: [_jsx("button", { onClick: handleDeny, type: "button", style: {
                             border: '1px solid rgba(255,255,255,0.65)',
                             background: 'transparent',
                             color: 'white',
@@ -188,7 +188,7 @@ export const ConsentBanner = ({ clarityProjectId, countryCode = null, autoDetect
                             borderRadius: 8,
                             cursor: 'pointer',
                             fontWeight: 600,
-                        } }, { children: "Deny" })), _jsx("button", Object.assign({ onClick: handleAccept, type: "button", style: {
+                        }, children: "Deny" }), _jsx("button", { onClick: handleAccept, type: "button", style: {
                             border: 'none',
                             background: 'white',
                             color: '#111827',
@@ -196,6 +196,6 @@ export const ConsentBanner = ({ clarityProjectId, countryCode = null, autoDetect
                             borderRadius: 8,
                             cursor: 'pointer',
                             fontWeight: 700,
-                        } }, { children: "Accept" }))] }))] })));
+                        }, children: "Accept" })] })] }));
 };
 export default ConsentBanner;

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

@@ -17,7 +17,7 @@ const StatefulDatePicker = (props) => {
         } })));
 };
 export const Default = {
-    render: () => (_jsx(Box, Object.assign({ sx: { height: '500px' } }, { children: _jsx(StatefulDatePicker, { placeholder: "test" }) }))),
+    render: () => (_jsx(Box, { sx: { height: '500px' }, children: _jsx(StatefulDatePicker, { placeholder: "test" }) })),
 };
 export const Inline = {
     argTypes: {
@@ -30,7 +30,7 @@ export const Inline = {
     },
     render: (args) => {
         const { backgroundColor } = args;
-        return (_jsx(Box, Object.assign({ sx: { height: '500px' } }, { children: _jsx(StatefulDatePicker, { backgroundColor: backgroundColor, inline: true }) })));
+        return (_jsx(Box, { sx: { height: '500px' }, children: _jsx(StatefulDatePicker, { backgroundColor: backgroundColor, inline: true }) }));
     },
 };
 export const HighlightedDates = {
@@ -48,6 +48,6 @@ export const HighlightedDates = {
         highlightedDate1.setDate(highlightedDate1.getDate() + 1);
         const highlightedDate2 = new Date();
         highlightedDate2.setDate(highlightedDate2.getDate() - 1);
-        return (_jsx(Box, Object.assign({ sx: { height: '500px' } }, { children: _jsx(StatefulDatePicker, { inline: true, backgroundColor: backgroundColor, highlightDates: [highlightedDate1, highlightedDate2] }) })));
+        return (_jsx(Box, { sx: { height: '500px' }, children: _jsx(StatefulDatePicker, { inline: true, backgroundColor: backgroundColor, highlightDates: [highlightedDate1, highlightedDate2] }) }));
     },
 };

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

@@ -3,9 +3,9 @@ import 'react-datepicker/dist/react-datepicker.css';
 import { TextInputProps } from '../TextInput';
 import { BoxProps } from '../layout/Box';
 export declare const InputWrapper: React.ForwardRefExoticComponent<{
-    onChange?: ((e: React.ChangeEvent) => void) | undefined;
-    onClick?: ((e: React.MouseEvent) => void) | undefined;
-    value?: string | undefined;
+    onChange?: (e: React.ChangeEvent) => void;
+    onClick?: (e: React.MouseEvent) => void;
+    value?: string;
     children: React.ReactElement;
 } & React.RefAttributes<any>>;
 export declare const areDatesEqual: (d1: Date, d2: Date) => boolean;

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

@@ -17,7 +17,7 @@ const StatefulDatePickerV2 = (props) => {
         } })));
 };
 export const Default = {
-    render: () => (_jsx(BoxV2, Object.assign({ sx: { height: '500px' } }, { children: _jsx(StatefulDatePickerV2, { placeholder: "test" }) }))),
+    render: () => (_jsx(BoxV2, { sx: { height: '500px' }, children: _jsx(StatefulDatePickerV2, { placeholder: "test" }) })),
 };
 export const Inline = {
     argTypes: {
@@ -30,7 +30,7 @@ export const Inline = {
     },
     render: (args) => {
         const { backgroundColor } = args;
-        return (_jsx(BoxV2, Object.assign({ sx: { height: '500px' } }, { children: _jsx(StatefulDatePickerV2, { backgroundColor: backgroundColor, inline: true }) })));
+        return (_jsx(BoxV2, { sx: { height: '500px' }, children: _jsx(StatefulDatePickerV2, { backgroundColor: backgroundColor, inline: true }) }));
     },
 };
 export const HighlightedDates = {
@@ -48,6 +48,6 @@ export const HighlightedDates = {
         highlightedDate1.setDate(highlightedDate1.getDate() + 1);
         const highlightedDate2 = new Date();
         highlightedDate2.setDate(highlightedDate2.getDate() - 1);
-        return (_jsx(BoxV2, Object.assign({ sx: { height: '500px' } }, { children: _jsx(StatefulDatePickerV2, { inline: true, backgroundColor: backgroundColor, highlightDates: [highlightedDate1, highlightedDate2] }) })));
+        return (_jsx(BoxV2, { sx: { height: '500px' }, children: _jsx(StatefulDatePickerV2, { inline: true, backgroundColor: backgroundColor, highlightDates: [highlightedDate1, highlightedDate2] }) }));
     },
 };

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

@@ -3,9 +3,9 @@ import 'react-datepicker/dist/react-datepicker.css';
 import { TextInputV2Props } from '../TextInputV2';
 import { BoxV2Props } from '../BoxV2';
 export declare const InputWrapperV2: React.ForwardRefExoticComponent<{
-    onChange?: ((e: React.ChangeEvent) => void) | undefined;
-    onClick?: ((e: React.MouseEvent) => void) | undefined;
-    value?: string | undefined;
+    onChange?: (e: React.ChangeEvent) => void;
+    onClick?: (e: React.MouseEvent) => void;
+    value?: string;
     children: React.ReactElement;
 } & React.RefAttributes<any>>;
 export declare const areDatesEqual: (d1: Date, d2: Date) => boolean;

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

@@ -16,11 +16,11 @@ export default meta;
 const lorem = `Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 Nullam id nunc vitae magna aliquam aliquet. In hac habitasse platea dictumst.`;
 export const Default = {
-    render: () => (_jsx(Box, Object.assign({ sx: { width: '200px', height: '200px' } }, { children: _jsx(Dropdown, { renderAnchor: ({ anchorProps }) => (_jsx(Button, Object.assign({}, anchorProps, { rightIcon: ArrowDropDownIcon }, { children: "Open Dropdown" }))), renderDropdown: () => _jsx(Paragraph, { children: lorem }) }) }))),
+    render: () => (_jsx(Box, { sx: { width: '200px', height: '200px' }, children: _jsx(Dropdown, { renderAnchor: ({ anchorProps }) => (_jsx(Button, Object.assign({}, anchorProps, { rightIcon: ArrowDropDownIcon, children: "Open Dropdown" }))), renderDropdown: () => _jsx(Paragraph, { children: lorem }) }) })),
 };
 export const MatchWidth = {
-    render: () => (_jsx(Box, Object.assign({ sx: { width: '200px', height: '200px' } }, { children: _jsx(Dropdown, { matchWidth: true, renderAnchor: ({ anchorProps }) => (_jsx(Button, Object.assign({}, anchorProps, { rightIcon: ArrowDropDownIcon }, { children: "Open Dropdown" }))), renderDropdown: () => _jsx(Paragraph, { children: lorem }) }) }))),
+    render: () => (_jsx(Box, { sx: { width: '200px', height: '200px' }, children: _jsx(Dropdown, { matchWidth: true, renderAnchor: ({ anchorProps }) => (_jsx(Button, Object.assign({}, anchorProps, { rightIcon: ArrowDropDownIcon, children: "Open Dropdown" }))), renderDropdown: () => _jsx(Paragraph, { children: lorem }) }) })),
 };
 export const ForcePlacement = {
-    render: () => (_jsx(Column, Object.assign({ sx: { width: '200x', height: '100vh' }, justify: "flex-end" }, { children: _jsx(Dropdown, { allowedPlacements: ['bottom-start'], renderAnchor: ({ anchorProps }) => (_jsx(Button, Object.assign({}, anchorProps, { rightIcon: ArrowDropDownIcon }, { children: "Open Dropdown" }))), renderDropdown: () => _jsx(Paragraph, { children: lorem }) }) }))),
+    render: () => (_jsx(Column, { sx: { width: '200x', height: '100vh' }, justify: "flex-end", children: _jsx(Dropdown, { allowedPlacements: ['bottom-start'], renderAnchor: ({ anchorProps }) => (_jsx(Button, Object.assign({}, anchorProps, { rightIcon: ArrowDropDownIcon, children: "Open Dropdown" }))), renderDropdown: () => _jsx(Paragraph, { children: lorem }) }) })),
 };

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

@@ -66,13 +66,13 @@ export const Dropdown = (_a) => {
                 anchorProps: dropdownAnchorProps,
                 isOpen,
                 setIsOpen,
-            }), isOpen && (_jsxs(_Fragment, { children: [shouldRenderDropdownContainer ? (_jsx(Box, Object.assign({ id: dropdownId, ref: refs.setFloating, style: dropdownBoxStyles }, { children: renderDropdown({
+            }), isOpen && (_jsxs(_Fragment, { children: [shouldRenderDropdownContainer ? (_jsx(Box, { id: dropdownId, ref: refs.setFloating, style: dropdownBoxStyles, children: renderDropdown({
                             styles: dropdownBoxStyles,
                             ref: refs.setFloating,
                             setIsOpen,
                             isOpen,
                             id: dropdownId,
-                        }) }))) : (renderDropdown({
+                        }) })) : (renderDropdown({
                         styles: dropdownBoxStyles,
                         ref: refs.setFloating,
                         isOpen,

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

@@ -16,11 +16,11 @@ export default meta;
 const lorem = `Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 Nullam id nunc vitae magna aliquam aliquet. In hac habitasse platea dictumst.`;
 export const Default = {
-    render: () => (_jsx(BoxV2, Object.assign({ sx: { width: '200px', height: '200px' } }, { children: _jsx(DropdownV2, { renderAnchor: ({ anchorProps }) => (_jsx(ButtonV2, Object.assign({}, anchorProps, { rightIcon: ArrowDropDownIcon }, { children: "Open Dropdown" }))), renderDropdown: () => _jsx(ParagraphV2, { children: lorem }) }) }))),
+    render: () => (_jsx(BoxV2, { sx: { width: '200px', height: '200px' }, children: _jsx(DropdownV2, { renderAnchor: ({ anchorProps }) => (_jsx(ButtonV2, Object.assign({}, anchorProps, { rightIcon: ArrowDropDownIcon, children: "Open Dropdown" }))), renderDropdown: () => _jsx(ParagraphV2, { children: lorem }) }) })),
 };
 export const MatchWidth = {
-    render: () => (_jsx(BoxV2, Object.assign({ sx: { width: '200px', height: '200px' } }, { children: _jsx(DropdownV2, { matchWidth: true, renderAnchor: ({ anchorProps }) => (_jsx(ButtonV2, Object.assign({}, anchorProps, { rightIcon: ArrowDropDownIcon }, { children: "Open Dropdown" }))), renderDropdown: () => _jsx(ParagraphV2, { children: lorem }) }) }))),
+    render: () => (_jsx(BoxV2, { sx: { width: '200px', height: '200px' }, children: _jsx(DropdownV2, { matchWidth: true, renderAnchor: ({ anchorProps }) => (_jsx(ButtonV2, Object.assign({}, anchorProps, { rightIcon: ArrowDropDownIcon, children: "Open Dropdown" }))), renderDropdown: () => _jsx(ParagraphV2, { children: lorem }) }) })),
 };
 export const ForcePlacement = {
-    render: () => (_jsx(ColumnV2, Object.assign({ sx: { width: '200x', height: '100vh' }, justify: "flex-end" }, { children: _jsx(DropdownV2, { allowedPlacements: ['bottom-start'], renderAnchor: ({ anchorProps }) => (_jsx(ButtonV2, Object.assign({}, anchorProps, { rightIcon: ArrowDropDownIcon }, { children: "Open Dropdown" }))), renderDropdown: () => _jsx(ParagraphV2, { children: lorem }) }) }))),
+    render: () => (_jsx(ColumnV2, { sx: { width: '200x', height: '100vh' }, justify: "flex-end", children: _jsx(DropdownV2, { allowedPlacements: ['bottom-start'], renderAnchor: ({ anchorProps }) => (_jsx(ButtonV2, Object.assign({}, anchorProps, { rightIcon: ArrowDropDownIcon, children: "Open Dropdown" }))), renderDropdown: () => _jsx(ParagraphV2, { children: lorem }) }) })),
 };

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

@@ -65,13 +65,13 @@ export const DropdownV2 = (_a) => {
                 anchorProps: dropdownAnchorProps,
                 isOpen,
                 setIsOpen,
-            }), isOpen && (_jsxs(_Fragment, { children: [shouldRenderDropdownContainer ? (_jsx("div", Object.assign({ id: dropdownId, ref: refs.setFloating, style: dropdownBoxStyles }, { children: renderDropdown({
+            }), isOpen && (_jsxs(_Fragment, { children: [shouldRenderDropdownContainer ? (_jsx("div", { id: dropdownId, ref: refs.setFloating, style: dropdownBoxStyles, children: renderDropdown({
                             styles: dropdownBoxStyles,
                             ref: refs.setFloating,
                             setIsOpen,
                             isOpen,
                             id: dropdownId,
-                        }) }))) : (renderDropdown({
+                        }) })) : (renderDropdown({
                         styles: dropdownBoxStyles,
                         ref: refs.setFloating,
                         isOpen,

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

@@ -61,7 +61,7 @@ export const Group = (_a) => {
         labelId,
         labelTargetId,
     };
-    const Main = (_jsx(GroupContext.Provider, Object.assign({ value: contextValue }, { children: typeof children === 'function' ? children(contextValue) : children })));
+    const Main = (_jsx(GroupContext.Provider, { value: contextValue, children: typeof children === 'function' ? children(contextValue) : children }));
     if (type === GROUP_TYPE.RAW) {
         return Main;
     }

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

@@ -63,7 +63,7 @@ export const GroupV2 = (_a) => {
         labelId,
         labelTargetId,
     };
-    const Main = (_jsx(GroupV2Context.Provider, Object.assign({ value: contextValue }, { children: typeof children === 'function' ? children(contextValue) : children })));
+    const Main = (_jsx(GroupV2Context.Provider, { value: contextValue, children: typeof children === 'function' ? children(contextValue) : children }));
     if (type === GROUPV2_TYPE.RAW) {
         return Main;
     }