@ndlib/component-library 1.0.45 → 1.0.46

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

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

@@ -38,41 +38,41 @@ const data = [
     },
 ];
 export const Default = {
-    render: () => (_jsxs(Table, Object.assign({ data: data, alternateRowColor: true }, { children: [_jsx(TableColumn, { header: "Name", dataKey: "name", sx: {
+    render: () => (_jsxs(Table, { data: data, alternateRowColor: true, children: [_jsx(TableColumn, { header: "Name", dataKey: "name", sx: {
                     width: '160px',
-                } }), _jsx(TableColumn, Object.assign({ header: "Age", sx: {
+                } }), _jsx(TableColumn, { header: "Age", sx: {
                     width: '100px',
-                } }, { children: (row) => row.age })), _jsx(TableColumn, Object.assign({ header: "Occupation" }, { children: (row) => row.position }))] }))),
+                }, children: (row) => row.age }), _jsx(TableColumn, { header: "Occupation", children: (row) => row.position })] })),
 };
 export const OmitColumn = {
     render: () => {
         const someCondition = false;
-        return (_jsxs(Table, Object.assign({ data: data, alternateRowColor: true }, { children: [_jsx(TableColumn, { header: "Name", dataKey: "name", sx: {
+        return (_jsxs(Table, { data: data, alternateRowColor: true, children: [_jsx(TableColumn, { header: "Name", dataKey: "name", sx: {
                         width: '160px',
-                    } }), someCondition ? (_jsx(TableColumn, Object.assign({ header: "Age", sx: {
+                    } }), someCondition ? (_jsx(TableColumn, { header: "Age", sx: {
                         width: '100px',
-                    } }, { children: (row) => row.age }))) : null, _jsx(TableColumn, Object.assign({ header: "Occupation" }, { children: (row) => row.position }))] })));
+                    }, children: (row) => row.age })) : null, _jsx(TableColumn, { header: "Occupation", children: (row) => row.position })] }));
     },
 };
 export const ResponsiveColumn = {
     render: () => {
-        return (_jsxs(Table, Object.assign({ data: data, alternateRowColor: true }, { children: [_jsx(TableColumn, { header: "Name", dataKey: "name", sx: {
+        return (_jsxs(Table, { data: data, alternateRowColor: true, children: [_jsx(TableColumn, { header: "Name", dataKey: "name", sx: {
                         width: '160px',
-                    } }), _jsx(TableColumn, Object.assign({ breakpoint: 2, header: "Age", sx: {
+                    } }), _jsx(TableColumn, { breakpoint: 2, header: "Age", sx: {
                         width: '100px',
-                    } }, { children: (row) => row.age })), _jsx(TableColumn, Object.assign({ header: "Occupation" }, { children: (row) => row.position }))] })));
+                    }, children: (row) => row.age }), _jsx(TableColumn, { header: "Occupation", children: (row) => row.position })] }));
     },
 };
 export const ColumnGroup = {
     render: () => {
-        return (_jsxs(Table, Object.assign({ data: data, alternateRowColor: true }, { children: [_jsx(TableColumn, { header: "Name", dataKey: "name", sx: {
+        return (_jsxs(Table, { data: data, alternateRowColor: true, children: [_jsx(TableColumn, { header: "Name", dataKey: "name", sx: {
                         width: '160px',
                     } }), [
-                    _jsx(TableColumn, Object.assign({ header: "Age", sx: {
+                    _jsx(TableColumn, { header: "Age", sx: {
                             width: '100px',
-                        } }, { children: (row) => row.age })),
-                    _jsx(TableColumn, Object.assign({ header: "Occupation" }, { children: (row) => row.position })),
-                ]] })));
+                        }, children: (row) => row.age }),
+                    _jsx(TableColumn, { header: "Occupation", children: (row) => row.position }),
+                ]] }));
     },
 };
 const SortableStory = () => {
@@ -84,14 +84,14 @@ const SortableStory = () => {
         items: data,
         config: sortConfig,
     });
-    return (_jsxs(Table, Object.assign({ data: sorted, alternateRowColor: true, sortConfig: sortConfig, updateSort: setSortConfig }, { children: [_jsx(TableColumn, { header: "Name", dataKey: "name", sortable: true, sx: {
+    return (_jsxs(Table, { data: sorted, alternateRowColor: true, sortConfig: sortConfig, updateSort: setSortConfig, children: [_jsx(TableColumn, { header: "Name", dataKey: "name", sortable: true, sx: {
                     width: '160px',
                 } }), [
-                _jsx(TableColumn, Object.assign({ header: "Age", sortKey: "age", sortable: true, sx: {
+                _jsx(TableColumn, { header: "Age", sortKey: "age", sortable: true, sx: {
                         width: '100px',
-                    } }, { children: (row) => row.age })),
+                    }, children: (row) => row.age }),
                 _jsx(TableColumn, { header: "Occupation", sortable: true, dataKey: "position" }),
-            ]] })));
+            ]] }));
 };
 export const Sortable = {
     render: SortableStory,

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

@@ -13,7 +13,7 @@ const data = [
         col3: 'Cell 2-3',
     },
 ];
-export const testExample = (_jsxs(Table, Object.assign({ data: data }, { children: [_jsx(TableColumn, { header: "Column 1", dataKey: "col1" }), _jsx(TableColumn, Object.assign({ header: "Column 2" }, { children: (row) => row.col2 })), _jsx(TableColumn, { dataKey: "col3", header: "Column 3" })] })));
+export const testExample = (_jsxs(Table, { data: data, children: [_jsx(TableColumn, { header: "Column 1", dataKey: "col1" }), _jsx(TableColumn, { header: "Column 2", children: (row) => row.col2 }), _jsx(TableColumn, { dataKey: "col3", header: "Column 3" })] }));
 describe('Table', () => {
     it('renders all headers and cells', () => {
         const { getByText } = render(testExample);

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { StyledElementProps, StylesProp } from '../../../theme';
 import { SortConfig } from '../../../utils/sortByKey';
 type ColumnRenderFn<RowData> = (data: RowData) => React.ReactNode;

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

@@ -64,7 +64,7 @@ export function Table(props) {
                 : COLOR.WHITE, p: 3, borderBottom: showRowDividers && !isLastRow ? '1px solid' : 'none', borderRight: showColumnDividers && !isLastColumn ? '1px solid' : 'none', borderColor: COLOR.LIGHT_GRAY, textAlign: cellAlign }, cellTypographyStyles);
         return Object.assign(Object.assign(Object.assign({}, styles), cellStyles), columnProps.sx);
     };
-    return (_jsxs("table", Object.assign({ role: role, sx: sx }, { children: [_jsx("thead", Object.assign({ role: "rowgroup" }, { children: _jsx("tr", { children: columnSpec.map((column, i) => {
+    return (_jsxs("table", { role: role, sx: sx, children: [_jsx("thead", { role: "rowgroup", children: _jsx("tr", { children: columnSpec.map((column, i) => {
                         const isLastColumn = i === columnSpec.length - 1;
                         if (column.breakpoint && breakpoint < column.breakpoint) {
                             return null;
@@ -80,11 +80,11 @@ export function Table(props) {
                                     updateSort({ key: sortKey, direction });
                             }
                         };
-                        return (_jsx("th", Object.assign({ role: "columnheader", sx: Object.assign(Object.assign({ textAlign: column.alignHeader || column.align || 'left', borderBottom: '1px solid', borderRight: showColumnDividers && !isLastColumn ? '1px solid' : 'none', borderColor: COLOR.LIGHT_GRAY, px: 3, pb: 1 }, headerTypographyStyles), column.headerStyles) }, { children: _jsxs(Row, Object.assign({ onClick: onSort, tabIndex: canSort ? 0 : undefined, sx: { cursor: canSort ? 'pointer' : 'default' } }, { children: [column.header, canSort &&
+                        return (_jsx("th", { role: "columnheader", sx: Object.assign(Object.assign({ textAlign: column.alignHeader || column.align || 'left', borderBottom: '1px solid', borderRight: showColumnDividers && !isLastColumn ? '1px solid' : 'none', borderColor: COLOR.LIGHT_GRAY, px: 3, pb: 1 }, headerTypographyStyles), column.headerStyles), children: _jsxs(Row, { onClick: onSort, tabIndex: canSort ? 0 : undefined, sx: { cursor: canSort ? 'pointer' : 'default' }, children: [column.header, canSort &&
                                         sortConfig.key === sortKey &&
-                                        (sortConfig.direction === SORT_DIRECTION.ASC ? (_jsx(Icon, { icon: ArrowDropUp, sx: { ml: 1 }, size: FONT_SIZE.MD })) : (_jsx(Icon, { icon: ArrowDropDown, sx: { ml: 1 }, size: FONT_SIZE.MD })))] })) }), i));
-                    }) }) })), _jsx("tbody", Object.assign({ role: "rowgroup" }, { children: data.map((rowData, rowIndex) => {
-                    return (_jsx("tr", Object.assign({ role: "row" }, { children: columnSpec.map((column, columnIndex) => {
+                                        (sortConfig.direction === SORT_DIRECTION.ASC ? (_jsx(Icon, { icon: ArrowDropUp, sx: { ml: 1 }, size: FONT_SIZE.MD })) : (_jsx(Icon, { icon: ArrowDropDown, sx: { ml: 1 }, size: FONT_SIZE.MD })))] }) }, i));
+                    }) }) }), _jsx("tbody", { role: "rowgroup", children: data.map((rowData, rowIndex) => {
+                    return (_jsx("tr", { role: "row", children: columnSpec.map((column, columnIndex) => {
                             if (column.breakpoint && breakpoint < column.breakpoint) {
                                 return null;
                             }
@@ -94,7 +94,7 @@ export function Table(props) {
                                 rowIndex,
                                 columnIndex,
                             });
-                            return (_jsx("td", Object.assign({ sx: cellStyles }, { children: _jsxs(_Fragment, { children: [dataKey ? rowData[dataKey] : null, !dataKey && children && children(rowData)] }) }), columnIndex));
-                        }) }), rowIndex));
-                }) }))] })));
+                            return (_jsx("td", { sx: cellStyles, children: _jsxs(_Fragment, { children: [dataKey ? rowData[dataKey] : null, !dataKey && children && children(rowData)] }) }, columnIndex));
+                        }) }, rowIndex));
+                }) })] }));
 }

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

@@ -24,14 +24,14 @@ const StatefulInput = (props) => {
     return _jsx(TextInput, Object.assign({ value: value, onChange: setValue }, props));
 };
 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(StatefulInput, { size: size.size, leftIcon: SearchIcon, placeholder: "Placeholder", sx: { mt: 2 } })] }))) })),
+    render: () => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, { children: [_jsx(Heading, { size: HEADING_SIZE.MD, children: size.label }), _jsx(StatefulInput, { size: size.size, leftIcon: SearchIcon, placeholder: "Placeholder", 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(StatefulInput, { size: size.size, leftIcon: SearchIcon, label: "Search", placeholder: "Placeholder", sx: { mt: 2 } })] }))) })),
+    render: () => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, { children: [_jsx(Heading, { size: HEADING_SIZE.MD, children: size.label }), _jsx(StatefulInput, { size: size.size, leftIcon: SearchIcon, label: "Search", placeholder: "Placeholder", sx: { mt: 2 } })] }))) })),
 };
 export const Inverted = {
-    render: () => (_jsx(Column, Object.assign({ sx: { backgroundColor: COLOR.BLACK, p: 2 } }, { children: sizes.map((size) => (_jsxs(Group, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD, sx: { color: COLOR.WHITE } }, { children: size.label })), _jsx(StatefulInput, { inverted: true, size: size.size, leftIcon: SearchIcon, placeholder: "Placeholder", label: "Search", sx: { mt: 2 } })] }))) }))),
+    render: () => (_jsx(Column, { sx: { backgroundColor: COLOR.BLACK, p: 2 }, children: sizes.map((size) => (_jsxs(Group, { children: [_jsx(Heading, { size: HEADING_SIZE.MD, sx: { color: COLOR.WHITE }, children: size.label }), _jsx(StatefulInput, { inverted: true, size: size.size, leftIcon: SearchIcon, placeholder: "Placeholder", label: "Search", sx: { mt: 2 } })] }))) })),
 };
 export const Disabled = {
-    render: () => (_jsx(Column, Object.assign({ sx: { p: 2 } }, { children: sizes.map((size) => (_jsxs(Group, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD, sx: { color: COLOR.WHITE } }, { children: size.label })), _jsx(StatefulInput, { disabled: true, size: size.size, leftIcon: SearchIcon, placeholder: "Placeholder", label: "Search", sx: { mt: 2 } })] }))) }))),
+    render: () => (_jsx(Column, { sx: { p: 2 }, children: sizes.map((size) => (_jsxs(Group, { children: [_jsx(Heading, { size: HEADING_SIZE.MD, sx: { color: COLOR.WHITE }, children: size.label }), _jsx(StatefulInput, { disabled: true, size: size.size, leftIcon: SearchIcon, placeholder: "Placeholder", label: "Search", sx: { mt: 2 } })] }))) })),
 };