@ndlib/component-library 1.0.45 → 1.0.47

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

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

@@ -18,7 +18,7 @@ const sizes = [
     { size: PILLV2_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 })), _jsxs(RowV2, Object.assign({ sx: { mt: 2 } }, { children: [_jsx(PillV2, Object.assign({}, args, { size: size.size, sx: { mr: 1 } })), _jsx(PillV2, Object.assign({}, args, { size: size.size, type: PILLV2_TYPE.OUTLINE }))] }))] })))) })),
+    render: (args) => (_jsx(ColumnV2, { children: sizes.map((size) => (_jsxs(GroupV2, { type: GROUPV2_TYPE.REGION, children: [_jsx(HeadingV2, { size: HEADINGV2_SIZE.MD, children: size.label }), _jsxs(RowV2, { sx: { mt: 2 }, children: [_jsx(PillV2, Object.assign({}, args, { size: size.size, sx: { mr: 1 } })), _jsx(PillV2, Object.assign({}, args, { size: size.size, type: PILLV2_TYPE.OUTLINE }))] })] }))) })),
     args: {
         type: PILLV2_TYPE.DEFAULT,
         children: 'Virtual Event',
@@ -26,7 +26,7 @@ export const Default = {
     },
 };
 export const Icon = {
-    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 })), _jsxs(RowV2, Object.assign({ sx: { mt: 2 } }, { children: [_jsx(PillV2, Object.assign({}, args, { size: size.size, sx: { mr: 1 }, icon: SearchIcon })), _jsx(PillV2, Object.assign({}, args, { size: size.size, type: PILLV2_TYPE.OUTLINE, icon: 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 }), _jsxs(RowV2, { sx: { mt: 2 }, children: [_jsx(PillV2, Object.assign({}, args, { size: size.size, sx: { mr: 1 }, icon: SearchIcon })), _jsx(PillV2, Object.assign({}, args, { size: size.size, type: PILLV2_TYPE.OUTLINE, icon: SearchIcon }))] })] }))) })),
     args: {
         type: PILLV2_TYPE.DEFAULT,
         children: 'Virtual Event',
@@ -34,7 +34,7 @@ export const Icon = {
     },
 };
 export const NoAction = {
-    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 })), _jsxs(RowV2, Object.assign({ sx: { mt: 2 } }, { children: [_jsx(PillV2, Object.assign({}, args, { size: size.size, sx: { mr: 1 } })), _jsx(PillV2, Object.assign({}, args, { size: size.size, type: PILLV2_TYPE.OUTLINE }))] }))] })))) })),
+    render: (args) => (_jsx(ColumnV2, { children: sizes.map((size) => (_jsxs(GroupV2, { type: GROUPV2_TYPE.REGION, children: [_jsx(HeadingV2, { size: HEADINGV2_SIZE.MD, children: size.label }), _jsxs(RowV2, { sx: { mt: 2 }, children: [_jsx(PillV2, Object.assign({}, args, { size: size.size, sx: { mr: 1 } })), _jsx(PillV2, Object.assign({}, args, { size: size.size, type: PILLV2_TYPE.OUTLINE }))] })] }))) })),
     args: {
         type: PILLV2_TYPE.DEFAULT,
         children: 'Virtual Event',

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

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

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

@@ -75,5 +75,5 @@ export const PillV2 = React.forwardRef((_a, ref) => {
     const processedSx = processSx(Object.assign(Object.assign({}, typographyStyles), sx));
     return (_jsxs("button", Object.assign({ ref: ref, tabIndex: onClick ? 0 : -1, onClick: onClick, className: clsx(typeSafeStyles.pillButton, {
             [typeSafeStyles.clickable]: clickable,
-        }), style: Object.assign(Object.assign({}, processedSx), { cursor, backgroundColor: colors[bg], color: colors[textColor], paddingLeft: paddingX, paddingRight: paddingX, height: height, borderColor: colors[borderColor] }) }, rest, { children: [icon && (_jsx(IconV2, { icon: icon, size: typographyStyles.fontSize, sx: { mr: iconMargin[size] }, color: textColor })), _jsx("div", Object.assign({ className: typeSafeStyles.pillContent }, { children: body }))] })));
+        }), style: Object.assign(Object.assign({}, processedSx), { cursor, backgroundColor: colors[bg], color: colors[textColor], paddingLeft: paddingX, paddingRight: paddingX, height: height, borderColor: colors[borderColor] }) }, rest, { children: [icon && (_jsx(IconV2, { icon: icon, size: typographyStyles.fontSize, sx: { mr: iconMargin[size] }, color: textColor })), _jsx("div", { className: typeSafeStyles.pillContent, children: body })] })));
 });

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

@@ -19,10 +19,10 @@ import { TYPOGRAPHY_TYPE, getTypographyStyles } from '../../../theme/typography'
 import { Radio } from '../Radio';
 export function RadioGroup(_a) {
     var { options, checked, onChange, columnStyles, rowStyles } = _a, rest = __rest(_a, ["options", "checked", "onChange", "columnStyles", "rowStyles"]);
-    return (_jsx(Column, Object.assign({}, rest, { sx: 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(Radio, { onChange: () => {
+    return (_jsx(Column, Object.assign({}, rest, { sx: 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(Radio, { onChange: () => {
                             onChange(option.value);
                         }, checked: checked === option.value, id: labelTargetId, sx: {
                             mr: 2,
                             flexShrink: 0,
-                        }, disabled: option.disabled }), _jsx(Label, Object.assign({ sx: Object.assign({ cursor: option.disabled ? 'not-allowed' : 'pointer' }, getTypographyStyles(TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM)) }, { children: option.label }))] }))) }), option.value))) })));
+                        }, disabled: option.disabled }), _jsx(Label, { sx: Object.assign({ cursor: option.disabled ? 'not-allowed' : 'pointer' }, getTypographyStyles(TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM)), children: option.label })] })) }, option.value))) })));
 }

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

@@ -18,10 +18,10 @@ import { TYPOGRAPHY_TYPE, getTypographyStyles } from '../../../theme/typography'
 import { RadioV2 } from '../RadioV2';
 export function RadioGroupV2(_a) {
     var { options, checked, onChange, columnStyles, rowStyles } = _a, rest = __rest(_a, ["options", "checked", "onChange", "columnStyles", "rowStyles"]);
-    return (_jsx(ColumnV2, Object.assign({}, rest, { sx: 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(RadioV2, { onChange: () => {
+    return (_jsx(ColumnV2, Object.assign({}, rest, { sx: 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(RadioV2, { onChange: () => {
                             onChange(option.value);
                         }, checked: checked === option.value, id: labelTargetId, sx: {
                             mr: 2,
                             flexShrink: 0,
-                        }, disabled: option.disabled }), _jsx(LabelV2, Object.assign({ htmlFor: labelTargetId, sx: Object.assign({ cursor: option.disabled ? 'not-allowed' : 'pointer' }, getTypographyStyles(TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM)) }, { children: option.label }))] }))) }), option.value))) })));
+                        }, disabled: option.disabled }), _jsx(LabelV2, { htmlFor: labelTargetId, sx: Object.assign({ cursor: option.disabled ? 'not-allowed' : 'pointer' }, getTypographyStyles(TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM)), children: option.label })] })) }, option.value))) })));
 }

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const RawHtml: React.FC<{
     content: string;
 }>;

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

@@ -14,15 +14,15 @@ export default meta;
 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 = 'Lorem ipsum dolor sit';
 export const Default = {
-    render: () => (_jsx(Column, { children: _jsx(ReadMore, Object.assign({ sx: { width: '250px' }, lines: 2, typography: TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM }, { children: p1 })) })),
+    render: () => (_jsx(Column, { children: _jsx(ReadMore, { sx: { width: '250px' }, lines: 2, typography: TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM, children: p1 }) })),
 };
 export const NotTruncated = {
-    render: () => (_jsx(Column, { children: _jsx(ReadMore, Object.assign({ sx: { width: '250px' }, lines: 2, typography: TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM }, { children: p2 })) })),
+    render: () => (_jsx(Column, { children: _jsx(ReadMore, { sx: { width: '250px' }, lines: 2, typography: TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM, children: p2 }) })),
 };
 export const CustomColor = {
-    render: () => (_jsx(Column, { children: _jsx(ReadMore, Object.assign({ lines: 2, typography: TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM, sx: {
+    render: () => (_jsx(Column, { children: _jsx(ReadMore, { lines: 2, typography: TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM, sx: {
                 color: COLOR.BACKGROUND,
                 bg: COLOR.PRIMARY,
                 width: '250px',
-            } }, { children: p1 })) })),
+            }, children: p1 }) })),
 };

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

@@ -20,18 +20,18 @@ import { useManualRerender } from '../../../utils/hooks/useManualRerender';
 const ReadMoreLink = (props) => {
     const bg = colors[props.bg || COLOR.BACKGROUND];
     const color = colors[props.color || COLOR.ND_BLUE_LIGHT];
-    return (_jsx("div", Object.assign({ css: {
+    return (_jsx("div", { css: {
             whiteSpace: 'nowrap',
             position: 'absolute',
             right: 0,
             bottom: 0,
             paddingLeft: '3rem',
             background: `linear-gradient(to right, ${bg}00, ${bg} 30%, ${bg} 100%)`,
-        } }, { children: _jsx("div", Object.assign({ "aria-hidden": "true", sx: {
+        }, children: _jsx("div", { "aria-hidden": "true", sx: {
                 color,
                 transform: 'scale(0.9)',
                 cursor: 'pointer',
-            } }, { children: "Read More..." })) })));
+            }, children: "Read More..." }) }));
 };
 export const useLinesHeight = (args) => {
     var _a, _b;

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

@@ -14,15 +14,15 @@ export default meta;
 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 = 'Lorem ipsum dolor sit';
 export const Default = {
-    render: () => (_jsx(ColumnV2, { children: _jsx(ReadMoreV2, Object.assign({ sx: { width: '250px' }, lines: 2, typography: TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM }, { children: p1 })) })),
+    render: () => (_jsx(ColumnV2, { children: _jsx(ReadMoreV2, { sx: { width: '250px' }, lines: 2, typography: TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM, children: p1 }) })),
 };
 export const NotTruncated = {
-    render: () => (_jsx(ColumnV2, { children: _jsx(ReadMoreV2, Object.assign({ sx: { width: '250px' }, lines: 2, typography: TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM }, { children: p2 })) })),
+    render: () => (_jsx(ColumnV2, { children: _jsx(ReadMoreV2, { sx: { width: '250px' }, lines: 2, typography: TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM, children: p2 }) })),
 };
 export const CustomColor = {
-    render: () => (_jsx(ColumnV2, { children: _jsx(ReadMoreV2, Object.assign({ lines: 2, typography: TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM, sx: {
+    render: () => (_jsx(ColumnV2, { children: _jsx(ReadMoreV2, { lines: 2, typography: TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM, sx: {
                 color: COLOR.BACKGROUND,
                 bg: COLOR.PRIMARY,
                 width: '250px',
-            } }, { children: p1 })) })),
+            }, children: p1 }) })),
 };

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

@@ -23,11 +23,11 @@ const typeSafeStyles = styles;
 const ReadMoreLinkV2 = (props) => {
     const bg = colors[props.bg || COLOR.BACKGROUND];
     const color = props.color ? colors[props.color] : '';
-    return (_jsx("div", Object.assign({ className: typeSafeStyles.linkOuterWrapper, style: {
+    return (_jsx("div", { className: typeSafeStyles.linkOuterWrapper, style: {
             background: `linear-gradient(to right, ${bg}00, ${bg} 30%, ${bg} 100%)`,
-        } }, { children: _jsx("div", Object.assign({ className: typeSafeStyles.linkInnerWrapper, "aria-hidden": "true", style: {
+        }, children: _jsx("div", { className: typeSafeStyles.linkInnerWrapper, "aria-hidden": "true", style: {
                 color,
-            } }, { children: "Read More..." })) })));
+            }, children: "Read More..." }) }));
 };
 export const useLinesHeightV2 = (args) => {
     const styles = getTypographyStyles(args.typography);

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

@@ -10,11 +10,11 @@ export type FlexHelperPropsV2 = {
     centered?: boolean;
 };
 export declare const RowV2: React.ForwardRefExoticComponent<{
-    sx?: import("../../../theme").StylesPropV2 | undefined;
+    sx?: import("../../../theme").StylesPropV2;
     children?: React.ReactNode;
 } & Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> & FlexHelperPropsV2 & {
-    breakpoint?: number | undefined;
-    className?: string | undefined;
+    breakpoint?: number;
+    className?: string;
 } & {
-    htmlFor?: string | undefined;
+    htmlFor?: string;
 } & React.RefAttributes<HTMLDivElement>>;

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

@@ -52,5 +52,5 @@ export const RowV2 = React.forwardRef((_a, ref) => {
         return typeSafeStyles.flexRow;
     };
     const flexBreakpointClass = getBreakpointClass(breakpointParam);
-    return (_jsx("div", Object.assign({}, rest, { ref: ref, style: Object.assign(Object.assign({}, flexStyles), processedStyles), className: clsx(typeSafeStyles.row, flexBreakpointClass, className) }, { children: children })));
+    return (_jsx("div", Object.assign({}, rest, { ref: ref, style: Object.assign(Object.assign({}, flexStyles), processedStyles), className: clsx(typeSafeStyles.row, flexBreakpointClass, className), children: children })));
 });

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

@@ -31,11 +31,11 @@ const StatefulSelect = (props) => {
     return (_jsx(Select, Object.assign({ options: options }, props, { value: value, onSelectOption: setValue, placeholder: "Select A Fruit..." })));
 };
 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(StatefulSelect, { size: size.size, leftIcon: AppleIcon, sx: { mt: 2 } })] }))) })),
+    render: () => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, { children: [_jsx(Heading, { size: HEADING_SIZE.MD, children: size.label }), _jsx(StatefulSelect, { size: size.size, leftIcon: AppleIcon, sx: { mt: 2 } })] }))) })),
 };
 export const WithLabel = {
-    render: () => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, { children: size.label })), _jsx(StatefulSelect, { size: size.size, leftIcon: AppleIcon, sx: { mt: 2 }, label: "Fruit" })] }))) })),
+    render: () => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, { children: [_jsx(Heading, { size: HEADING_SIZE.MD, children: size.label }), _jsx(StatefulSelect, { size: size.size, leftIcon: AppleIcon, sx: { mt: 2 }, label: "Fruit" })] }))) })),
 };
 export const InvertedColors = {
-    render: () => (_jsx(Column, Object.assign({ sx: { backgroundColor: COLOR.BLACK, p: 4 } }, { children: sizes.map((size) => (_jsxs(Group, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD, sx: { color: COLOR.WHITE } }, { children: size.label })), _jsx(StatefulSelect, { inverted: true, size: size.size, leftIcon: AppleIcon, sx: { mt: 2 }, label: "Fruit" })] }))) }))),
+    render: () => (_jsx(Column, { sx: { backgroundColor: COLOR.BLACK, p: 4 }, children: sizes.map((size) => (_jsxs(Group, { children: [_jsx(Heading, { size: HEADING_SIZE.MD, sx: { color: COLOR.WHITE }, children: size.label }), _jsx(StatefulSelect, { inverted: true, size: size.size, leftIcon: AppleIcon, sx: { mt: 2 }, label: "Fruit" })] }))) })),
 };

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

@@ -118,7 +118,7 @@ export function Select({ size: sizeParam, placeholder, leftIcon, value, label, o
     const focusStyles = {
         boxShadow: inverted ? BOX_SHADOW.INVERTED : BOX_SHADOW.NORMAL,
     };
-    return (_jsxs(Box, Object.assign({ sx: Object.assign({ width: DEFAULT_WIDTH, position: 'relative', borderRadius: '4px', backgroundColor: inverted ? COLOR.DARK_GRAY : COLOR.WHITE, ':hover fieldset': focusStyles, ':focus fieldset': focusStyles }, sx) }, { children: [_jsx("fieldset", Object.assign({ sx: {
+    return (_jsxs(Box, { sx: Object.assign({ width: DEFAULT_WIDTH, position: 'relative', borderRadius: '4px', backgroundColor: inverted ? COLOR.DARK_GRAY : COLOR.WHITE, ':hover fieldset': focusStyles, ':focus fieldset': focusStyles }, sx), children: [_jsx("fieldset", { sx: {
                     textAlign: 'left',
                     position: 'absolute',
                     inset: '-4px 0px 0px 0px',
@@ -132,7 +132,7 @@ export function Select({ size: sizeParam, placeholder, leftIcon, value, label, o
                     minWidth: '0%',
                     borderColor: inverted ? COLOR.WHITE : COLOR.LIGHT_GRAY,
                     zIndex: Z_INDEX.ELEVATED,
-                } }, { children: _jsx("legend", Object.assign({ style: {
+                }, children: _jsx("legend", { style: {
                         width: 'auto',
                         float: 'unset',
                         overflow: 'hidden',
@@ -143,13 +143,13 @@ export function Select({ size: sizeParam, placeholder, leftIcon, value, label, o
                         fontSize: '0.75em',
                         visibility: 'hidden',
                         whiteSpace: 'nowrap',
-                    } }, { children: label && (_jsx(Label, Object.assign({ standalone: true, sx: {
+                    }, children: label && (_jsx(Label, { standalone: true, sx: {
                             px: 1,
                             position: 'relative',
                             display: 'inline-flex',
                             opacity: '0',
                             visibility: 'hidden',
-                        }, typography: labelTypographyMap[size] }, { children: label }))) })) })), _jsx(Label, Object.assign({ id: inputId, typography: labelTypographyMap[size], sx: {
+                        }, typography: labelTypographyMap[size], children: label })) }) }), _jsx(Label, { id: inputId, typography: labelTypographyMap[size], sx: {
                     position: 'absolute',
                     left: '0.5rem',
                     lineHeight: 1,
@@ -157,7 +157,7 @@ export function Select({ size: sizeParam, placeholder, leftIcon, value, label, o
                     color: inverted ? COLOR.WHITE : COLOR.PRIMARY,
                     px: 1,
                     top: labelOffsetMap[size],
-                } }, { children: label })), _jsx(Button, Object.assign({ ref: refs.setReference, disableFocusStyles: true, role: "combobox", "aria-controls": listboxId, "aria-expanded": isOpen, "aria-labelledby": inputId, "aria-autocomplete": "none", "aria-activedescendant": isOpen && stagedOptionValue
+                }, children: label }), _jsx(Button, { ref: refs.setReference, disableFocusStyles: true, role: "combobox", "aria-controls": listboxId, "aria-expanded": isOpen, "aria-labelledby": inputId, "aria-autocomplete": "none", "aria-activedescendant": isOpen && stagedOptionValue
                     ? getOptionId(stagedOptionValue)
                     : undefined, type: BUTTON_TYPE.OUTLINE, size: buttonSize, onBlur: () => close(), onFocus: () => open(), onKeyDown: onKeyDown, onMouseDown: () => {
                     if (!isOpen) {
@@ -166,10 +166,10 @@ export function Select({ size: sizeParam, placeholder, leftIcon, value, label, o
                     else {
                         close();
                     }
-                }, color: inverted ? COLOR.WHITE : COLOR.TEXT, sx: Object.assign({ height, width: '100%', border: 'solid 0px', flexDirection: 'row', alignItems: 'center', position: 'relative', zIndex: Z_INDEX.NORMAL, background: 'none' }, typographyStyles), leftIcon: leftIcon, rightIcon: ArrowDropDownIcon }, { children: currentOption ? renderOptionLabel(currentOption) : placeholder })), isOpen && (_jsx(ListBox, { id: listboxId, options: options, selected: value, focused: stagedOptionValue, selectOption: (option) => {
+                }, color: inverted ? COLOR.WHITE : COLOR.TEXT, sx: Object.assign({ height, width: '100%', border: 'solid 0px', flexDirection: 'row', alignItems: 'center', position: 'relative', zIndex: Z_INDEX.NORMAL, background: 'none' }, typographyStyles), leftIcon: leftIcon, rightIcon: ArrowDropDownIcon, children: currentOption ? renderOptionLabel(currentOption) : placeholder }), isOpen && (_jsx(ListBox, { id: listboxId, options: options, selected: value, focused: stagedOptionValue, selectOption: (option) => {
                     onSelectOption && onSelectOption(option.value);
                     close();
                 }, ref: refs.setFloating, renderOption: renderOption, sx: {
                     zIndex: Z_INDEX.DIALOG,
-                }, style: Object.assign(Object.assign({ minWidth: dropdownMinWidth }, floatingStyles), { boxShadow: inverted ? BOX_SHADOW.INVERTED : BOX_SHADOW.NORMAL }) }))] })));
+                }, style: Object.assign(Object.assign({ minWidth: dropdownMinWidth }, floatingStyles), { boxShadow: inverted ? BOX_SHADOW.INVERTED : BOX_SHADOW.NORMAL }) }))] }));
 }

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

@@ -31,11 +31,11 @@ const StatefulSelect = (props) => {
     return (_jsx(SelectV2, Object.assign({ options: options }, props, { value: value, onSelectOption: setValue, placeholder: "Select A Fruit..." })));
 };
 export const Default = {
-    render: () => (_jsx(ColumnV2, { children: sizes.map((size) => (_jsxs(GroupV2, { children: [_jsx(HeadingV2, Object.assign({ size: HEADINGV2_SIZE.MD }, { children: size.label })), _jsx(StatefulSelect, { size: size.size, leftIcon: AppleIcon, sx: { mt: 2 } })] }))) })),
+    render: () => (_jsx(ColumnV2, { children: sizes.map((size) => (_jsxs(GroupV2, { children: [_jsx(HeadingV2, { size: HEADINGV2_SIZE.MD, children: size.label }), _jsx(StatefulSelect, { size: size.size, leftIcon: AppleIcon, sx: { mt: 2 } })] }))) })),
 };
 export const WithLabel = {
-    render: () => (_jsx(ColumnV2, { children: sizes.map((size) => (_jsxs(GroupV2, { children: [_jsx(HeadingV2, Object.assign({ size: HEADINGV2_SIZE.MD }, { children: size.label })), _jsx(StatefulSelect, { size: size.size, leftIcon: AppleIcon, sx: { mt: 2 }, label: "Fruit" })] }))) })),
+    render: () => (_jsx(ColumnV2, { children: sizes.map((size) => (_jsxs(GroupV2, { children: [_jsx(HeadingV2, { size: HEADINGV2_SIZE.MD, children: size.label }), _jsx(StatefulSelect, { size: size.size, leftIcon: AppleIcon, sx: { mt: 2 }, label: "Fruit" })] }))) })),
 };
 export const InvertedColors = {
-    render: () => (_jsx(ColumnV2, Object.assign({ sx: { backgroundColor: COLOR.BLACK, p: 4 } }, { children: sizes.map((size) => (_jsxs(GroupV2, { children: [_jsx(HeadingV2, Object.assign({ size: HEADINGV2_SIZE.MD, sx: { color: COLOR.WHITE } }, { children: size.label })), _jsx(StatefulSelect, { inverted: true, size: size.size, leftIcon: AppleIcon, sx: { mt: 2 }, label: "Fruit" })] }))) }))),
+    render: () => (_jsx(ColumnV2, { sx: { backgroundColor: COLOR.BLACK, p: 4 }, children: sizes.map((size) => (_jsxs(GroupV2, { children: [_jsx(HeadingV2, { size: HEADINGV2_SIZE.MD, sx: { color: COLOR.WHITE }, children: size.label }), _jsx(StatefulSelect, { inverted: true, size: size.size, leftIcon: AppleIcon, sx: { mt: 2 }, label: "Fruit" })] }))) })),
 };

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

@@ -130,13 +130,13 @@ export function SelectV2({ size: sizeParam, placeholder, leftIcon, value, label,
     const fieldsetBorderColor = processSx({
         borderColor: inverted ? COLOR.WHITE : COLOR.LIGHT_GRAY,
     });
-    return (_jsxs(BoxV2, Object.assign({}, anchorElementProps, { className: className, sx: Object.assign(Object.assign(Object.assign({ width: DEFAULT_WIDTH, position: 'relative', borderRadius: '4px', backgroundColor: inverted ? COLOR.DARK_GRAY : COLOR.WHITE }, appliedHoverStyles), appliedFocusStyles), sx) }, { children: [_jsx("fieldset", Object.assign({ className: typeSafeStyles.fieldset, style: Object.assign({}, fieldsetBorderColor) }, { children: _jsx("legend", Object.assign({ className: typeSafeStyles.legend }, { children: label && (_jsx(LabelV2, Object.assign({ standalone: true, sx: {
+    return (_jsxs(BoxV2, Object.assign({}, anchorElementProps, { className: className, sx: Object.assign(Object.assign(Object.assign({ width: DEFAULT_WIDTH, position: 'relative', borderRadius: '4px', backgroundColor: inverted ? COLOR.DARK_GRAY : COLOR.WHITE }, appliedHoverStyles), appliedFocusStyles), sx), children: [_jsx("fieldset", { className: typeSafeStyles.fieldset, style: Object.assign({}, fieldsetBorderColor), children: _jsx("legend", { className: typeSafeStyles.legend, children: label && (_jsx(LabelV2, { standalone: true, sx: {
                             px: 1,
                             position: 'relative',
                             display: 'inline-flex',
                             opacity: '0',
                             visibility: 'hidden',
-                        }, typography: labelTypographyMapV2[size] }, { children: label }))) })) })), _jsx(LabelV2, Object.assign({ id: inputId, typography: labelTypographyMapV2[size], sx: {
+                        }, typography: labelTypographyMapV2[size], children: label })) }) }), _jsx(LabelV2, { id: inputId, typography: labelTypographyMapV2[size], sx: {
                     position: 'absolute',
                     left: '0.5rem',
                     lineHeight: 1,
@@ -144,7 +144,7 @@ export function SelectV2({ size: sizeParam, placeholder, leftIcon, value, label,
                     color: inverted ? COLOR.WHITE : COLOR.PRIMARY,
                     px: 1,
                     top: labelOffsetMapV2[size],
-                } }, { children: label })), _jsx(ButtonV2, Object.assign({ ref: refs.setReference, disableFocusStyles: true, role: "combobox", "aria-controls": listboxId, "aria-expanded": isOpen, "aria-labelledby": inputId, "aria-autocomplete": "none", "aria-activedescendant": isOpen && stagedOptionValue
+                }, children: label }), _jsx(ButtonV2, { ref: refs.setReference, disableFocusStyles: true, role: "combobox", "aria-controls": listboxId, "aria-expanded": isOpen, "aria-labelledby": inputId, "aria-autocomplete": "none", "aria-activedescendant": isOpen && stagedOptionValue
                     ? getOptionId(stagedOptionValue)
                     : undefined, type: BUTTONV2_TYPE.OUTLINE, size: buttonSize, onBlur: () => close(), onFocus: () => open(), onKeyDown: onKeyDown, onMouseDown: () => {
                     if (!isOpen) {
@@ -153,7 +153,7 @@ export function SelectV2({ size: sizeParam, placeholder, leftIcon, value, label,
                     else {
                         close();
                     }
-                }, color: inverted ? COLOR.WHITE : COLOR.TEXT, sx: Object.assign({ height, width: '100%', border: 'solid 0px', flexDirection: 'row', alignItems: 'center', position: 'relative', zIndex: Z_INDEX.NORMAL, background: 'none' }, typographyStyles), leftIcon: leftIcon, rightIcon: ArrowDropDownIcon }, { children: currentOption ? renderOptionLabel(currentOption) : placeholder })), isOpen && (_jsx(ListBoxV2, { id: listboxId, options: options, selected: value, focused: stagedOptionValue, selectOption: (option) => {
+                }, color: inverted ? COLOR.WHITE : COLOR.TEXT, sx: Object.assign({ height, width: '100%', border: 'solid 0px', flexDirection: 'row', alignItems: 'center', position: 'relative', zIndex: Z_INDEX.NORMAL, background: 'none' }, typographyStyles), leftIcon: leftIcon, rightIcon: ArrowDropDownIcon, children: currentOption ? renderOptionLabel(currentOption) : placeholder }), isOpen && (_jsx(ListBoxV2, { id: listboxId, options: options, selected: value, focused: stagedOptionValue, selectOption: (option) => {
                     onSelectOption && onSelectOption(option.value);
                     close();
                 }, ref: refs.setFloating, renderOption: renderOption, sx: {

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

@@ -17,7 +17,7 @@ const sizes = [
     { size: SPINNER_SIZE.SM, label: 'Small' },
 ];
 export const Default = {
-    render: () => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, Object.assign({ type: GROUP_TYPE.REGION }, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.SM }, { children: size.label })), _jsx(Spinner, { size: size.size })] })))) })),
+    render: () => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, { type: GROUP_TYPE.REGION, children: [_jsx(Heading, { size: HEADING_SIZE.SM, children: size.label }), _jsx(Spinner, { size: size.size })] }))) })),
     args: {},
 };
 export const CustomColor = {

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { StyledElementProps } from '../../../theme';
 import { COLOR } from '../../../theme/colors';
 export declare enum SPINNER_SIZE {

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

@@ -18,7 +18,7 @@ const sizes = [
     { size: SPINNERV2_SIZE.SM, label: 'Small' },
 ];
 export const Default = {
-    render: () => (_jsx(ColumnV2, { children: sizes.map((size) => (_jsxs(GroupV2, Object.assign({ type: GROUPV2_TYPE.REGION }, { children: [_jsx(HeadingV2, Object.assign({ size: HEADINGV2_SIZE.SM }, { children: size.label })), _jsx(SpinnerV2, { size: size.size })] })))) })),
+    render: () => (_jsx(ColumnV2, { children: sizes.map((size) => (_jsxs(GroupV2, { type: GROUPV2_TYPE.REGION, children: [_jsx(HeadingV2, { size: HEADINGV2_SIZE.SM, children: size.label }), _jsx(SpinnerV2, { size: size.size })] }))) })),
     args: {},
 };
 export const CustomColor = {

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { StyledElementPropsV2 } from '../../../theme';
 import { COLOR } from '../../../theme/colors';
 export declare enum SPINNERV2_SIZE {

package/dist/components/elements/TabList/example.js

@@ -31,6 +31,6 @@ const StateManager = ({ children }) => {
     const [selected, setSelected] = React.useState('1');
     return _jsx(_Fragment, { children: children({ selected, setSelected }) });
 };
-export const ExampleTabs = () => (_jsx(StateManager, { children: ({ selected, setSelected }) => (_jsx(TabList, { children: items.map((item) => (_jsx(Tab, Object.assign({ onClick: () => {
+export const ExampleTabs = () => (_jsx(StateManager, { children: ({ selected, setSelected }) => (_jsx(TabList, { children: items.map((item) => (_jsx(Tab, { onClick: () => {
                 setSelected(item.id);
-            }, selected: selected === item.id }, { children: item.label }), item.id))) })) }));
+            }, selected: selected === item.id, children: item.label }, item.id))) })) }));

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

@@ -21,10 +21,10 @@ export const Tab = (_a) => {
     var { selected, children } = _a, rest = __rest(_a, ["selected", "children"]);
     const typographyStyles = getTypographyStyles(TYPOGRAPHY_TYPE.CONDENSED_TEXT_LARGE);
     const labelId = useUniqueId('tab-label');
-    return (_jsx("button", Object.assign({ role: "tab", sx: Object.assign({ height: '3.25rem', boxSizing: 'border-box', px: 4, bg: COLOR.WHITE, color: selected ? COLOR.DARK_GRAY : COLOR.GRAY, border: 'none', borderBottom: selected ? 'solid 3px' : 'solid 1px', borderColor: selected ? COLOR.ND_BLUE_BRIGHT : COLOR.LIGHT_GRAY, cursor: 'pointer' }, typographyStyles), "aria-labelledby": labelId, "aria-selected": selected ? 'true' : 'false' }, rest, { children: _jsx("div", Object.assign({ id: labelId, sx: {
+    return (_jsx("button", Object.assign({ role: "tab", sx: Object.assign({ height: '3.25rem', boxSizing: 'border-box', px: 4, bg: COLOR.WHITE, color: selected ? COLOR.DARK_GRAY : COLOR.GRAY, border: 'none', borderBottom: selected ? 'solid 3px' : 'solid 1px', borderColor: selected ? COLOR.ND_BLUE_BRIGHT : COLOR.LIGHT_GRAY, cursor: 'pointer' }, typographyStyles), "aria-labelledby": labelId, "aria-selected": selected ? 'true' : 'false' }, rest, { children: _jsx("div", { id: labelId, sx: {
                 transform: selected ? 'scale(1.1)' : undefined,
                 ':hover': {
                     transform: selected ? 'scale(1.1)' : 'scale(1.05)',
                 },
-            } }, { children: children })) })));
+            }, children: children }) })));
 };

package/dist/components/elements/TabListV2/example.js

@@ -31,6 +31,6 @@ const StateManager = ({ children }) => {
     const [selected, setSelected] = React.useState('1');
     return _jsx(_Fragment, { children: children({ selected, setSelected }) });
 };
-export const ExampleTabsV2 = () => (_jsx(StateManager, { children: ({ selected, setSelected }) => (_jsx(TabListV2, { children: items.map((item) => (_jsx(TabV2, Object.assign({ onClick: () => {
+export const ExampleTabsV2 = () => (_jsx(StateManager, { children: ({ selected, setSelected }) => (_jsx(TabListV2, { children: items.map((item) => (_jsx(TabV2, { onClick: () => {
                 setSelected(item.id);
-            }, selected: selected === item.id }, { children: item.label }), item.id))) })) }));
+            }, selected: selected === item.id, children: item.label }, item.id))) })) }));

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

@@ -25,7 +25,7 @@ export const TabV2 = (_a) => {
     const typographyStyles = getTypographyStyles(TYPOGRAPHY_TYPE.CONDENSED_TEXT_LARGE);
     const processedSx = processSx(Object.assign(Object.assign({}, sx), typographyStyles));
     const labelId = useUniqueId('tab-label');
-    return (_jsx("button", Object.assign({ role: "tab", className: typeSafeStyles.tabBtn, style: Object.assign({ color: selected ? 'var(--darkGray)' : 'var(--gray)', borderBottom: selected ? 'solid 3px' : 'solid 1px', borderColor: selected ? 'var(--ndBlueBright)' : 'var(--lightGray)' }, processedSx), "aria-labelledby": labelId, "aria-selected": selected ? 'true' : 'false' }, rest, { children: _jsx("div", Object.assign({ id: labelId, className: selected
+    return (_jsx("button", Object.assign({ role: "tab", className: typeSafeStyles.tabBtn, style: Object.assign({ color: selected ? 'var(--darkGray)' : 'var(--gray)', borderBottom: selected ? 'solid 3px' : 'solid 1px', borderColor: selected ? 'var(--ndBlueBright)' : 'var(--lightGray)' }, processedSx), "aria-labelledby": labelId, "aria-selected": selected ? 'true' : 'false' }, rest, { children: _jsx("div", { id: labelId, className: selected
                 ? typeSafeStyles.tabLabelSelected
-                : typeSafeStyles.tabLabelUnselected }, { children: children })) })));
+                : typeSafeStyles.tabLabelUnselected, children: children }) })));
 };