@ndlib/component-library 1.0.45 → 1.0.47

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

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

@@ -11,7 +11,7 @@ vi.mock('../../../providers/uniqueIds', () => ({
 describe('TextInput Component', () => {
     const setup = (props = {}) => {
         const initialProps = Object.assign({ value: '', onChange: vi.fn(), onChangeRaw: vi.fn(), size: INPUT_SIZE.MD }, props);
-        return render(_jsx(ThemeProvider, Object.assign({ theme: theme }, { children: _jsx(TextInput, Object.assign({}, initialProps)) })));
+        return render(_jsx(ThemeProvider, { theme: theme, children: _jsx(TextInput, Object.assign({}, initialProps)) }));
     };
     it('renders with the correct initial value', () => {
         setup({ value: 'Initial value' });
@@ -34,7 +34,7 @@ describe('TextInput Component', () => {
         expect(value).toBe('New value');
     });
     it('renders the left icon if provided', () => {
-        const MockIcon = () => _jsx("span", Object.assign({ "data-testid": "mock-icon" }, { children: "Icon" }));
+        const MockIcon = () => _jsx("span", { "data-testid": "mock-icon", children: "Icon" });
         setup({ leftIcon: MockIcon });
         expect(screen.getByTestId('mock-icon')).toBeInTheDocument();
     });

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

@@ -28,18 +28,18 @@ export type TextInputProps = StyledElementProps<HTMLInputElement, {
     onChangeRaw?: (e: string | React.ChangeEvent) => void;
 }, string>;
 export declare const TextInput: React.ForwardRefExoticComponent<{
-    sx?: import("../../../theme").StylesProp | undefined;
+    sx?: import("../../../theme").StylesProp;
     children?: string | undefined;
 } & Omit<React.HTMLAttributes<HTMLInputElement>, "children" | "onChange"> & {
-    size?: INPUT_SIZE | undefined;
-    leftIcon?: React.FC<any> | undefined;
-    inline?: boolean | undefined;
-    inverted?: boolean | undefined;
-    label?: string | undefined;
-    disabled?: boolean | undefined;
+    size?: INPUT_SIZE;
+    leftIcon?: React.FC<any>;
+    inline?: boolean;
+    inverted?: boolean;
+    label?: string;
+    disabled?: boolean;
     value: string;
-    onChange?: ((value: string) => void) | undefined;
-    onChangeRaw?: ((e: string | React.ChangeEvent) => void) | undefined;
+    onChange?: (value: string) => void;
+    onChangeRaw?: (e: string | React.ChangeEvent) => void;
 } & {
-    htmlFor?: string | undefined;
+    htmlFor?: string;
 } & React.RefAttributes<any>>;

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

@@ -65,8 +65,8 @@ export const TextInput = React.forwardRef((_a, ref) => {
         : {
             boxShadow: inverted ? BOX_SHADOW.INVERTED : BOX_SHADOW.NORMAL,
         };
-    return (_jsxs("div", Object.assign({ ref: ref, onClick: onClick, id: id, sx: Object.assign(Object.assign({ height,
-            display, px: paddingX, backgroundColor: inverted ? COLOR.DARK_GRAY : COLOR.WHITE, borderRadius: '4px', flexDirection: 'row', position: 'relative', alignItems: 'center', ':hover': focusStyles, ':focus': focusStyles }, typographyStyles), sx) }, { children: [_jsx("fieldset", Object.assign({ sx: {
+    return (_jsxs("div", { ref: ref, onClick: onClick, id: id, sx: Object.assign(Object.assign({ height,
+            display, px: paddingX, backgroundColor: inverted ? COLOR.DARK_GRAY : COLOR.WHITE, borderRadius: '4px', flexDirection: 'row', position: 'relative', alignItems: 'center', ':hover': focusStyles, ':focus': focusStyles }, typographyStyles), sx), children: [_jsx("fieldset", { sx: {
                     textAlign: 'left',
                     position: 'absolute',
                     inset: '-4px 0px 0px 0px',
@@ -80,7 +80,7 @@ export const TextInput = React.forwardRef((_a, ref) => {
                     minWidth: '0%',
                     borderColor: inverted ? COLOR.GRAY : COLOR.LIGHT_GRAY,
                     zIndex: Z_INDEX.ELEVATED,
-                } }, { children: _jsx("legend", Object.assign({ style: {
+                }, children: _jsx("legend", { style: {
                         width: 'auto',
                         float: 'unset',
                         overflow: 'hidden',
@@ -91,13 +91,13 @@ export const TextInput = React.forwardRef((_a, ref) => {
                         fontSize: '0.75em',
                         visibility: 'hidden',
                         whiteSpace: 'nowrap',
-                    } }, { children: label && (_jsx(Label, Object.assign({ standalone: true, "aria-hidden": "true", sx: {
+                    }, children: label && (_jsx(Label, { standalone: true, "aria-hidden": "true", sx: {
                             px: 1,
                             position: 'relative',
                             display: 'inline-flex',
                             opacity: '0',
                             visibility: 'hidden',
-                        }, typography: labelTypographyMap[size] }, { children: label }))) })) })), leftIcon && (_jsx(Icon, { icon: leftIcon, color: inverted ? COLOR.EXTRA_LIGHT_GRAY : COLOR.TEXT, sx: {
+                        }, typography: labelTypographyMap[size], children: label })) }) }), leftIcon && (_jsx(Icon, { icon: leftIcon, color: inverted ? COLOR.EXTRA_LIGHT_GRAY : COLOR.TEXT, sx: {
                     mr: 2,
                     fontSize: getIconSize(typographyStyles.fontSize),
                 } })), _jsx("input", Object.assign({ value: value, onChange: (event) => {
@@ -107,7 +107,7 @@ export const TextInput = React.forwardRef((_a, ref) => {
                         color: inverted ? COLOR.LIGHT_GRAY : COLOR.GRAY,
                     }, ':focus': {
                         outline: 'none',
-                    } }), disabled: disabled }, rest)), label && (_jsx(Label, Object.assign({ htmlFor: id, typography: labelTypographyMap[size], sx: {
+                    } }), disabled: disabled }, rest)), label && (_jsx(Label, { htmlFor: id, typography: labelTypographyMap[size], sx: {
                     position: 'absolute',
                     color: inverted ? COLOR.EXTRA_LIGHT_GRAY : COLOR.ND_PROVOST_BLUE,
                     left: '0.5rem',
@@ -115,5 +115,5 @@ export const TextInput = React.forwardRef((_a, ref) => {
                     zIndex: (_b = theme.zIndex) === null || _b === void 0 ? void 0 : _b.ELEVATED,
                     px: 1,
                     top: labelOffsetMap[size],
-                } }, { children: label })))] })));
+                }, children: label }))] }));
 });

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

@@ -24,14 +24,14 @@ const StatefulInput = (props) => {
     return _jsx(TextInputV2, Object.assign({ value: value, onChange: setValue }, props));
 };
 export const Default = {
-    render: () => (_jsx(ColumnV2, { children: sizes.map((size, i) => (_jsxs(GroupV2, { children: [_jsx(HeadingV2, Object.assign({ size: HEADINGV2_SIZE.MD }, { children: size.label })), _jsx(StatefulInput, { size: size.size, leftIcon: SearchIcon, placeholder: "Placeholder", sx: { mt: 2 } })] }, i))) })),
+    render: () => (_jsx(ColumnV2, { children: sizes.map((size, i) => (_jsxs(GroupV2, { children: [_jsx(HeadingV2, { size: HEADINGV2_SIZE.MD, children: size.label }), _jsx(StatefulInput, { size: size.size, leftIcon: SearchIcon, placeholder: "Placeholder", sx: { mt: 2 } })] }, i))) })),
 };
 export const WithLabel = {
-    render: () => (_jsx(ColumnV2, { children: sizes.map((size, i) => (_jsxs(GroupV2, { children: [_jsx(HeadingV2, Object.assign({ size: HEADINGV2_SIZE.MD }, { children: size.label })), _jsx(StatefulInput, { size: size.size, leftIcon: SearchIcon, label: "Search", placeholder: "Placeholder", sx: { mt: 2 } })] }, i))) })),
+    render: () => (_jsx(ColumnV2, { children: sizes.map((size, i) => (_jsxs(GroupV2, { children: [_jsx(HeadingV2, { size: HEADINGV2_SIZE.MD, children: size.label }), _jsx(StatefulInput, { size: size.size, leftIcon: SearchIcon, label: "Search", placeholder: "Placeholder", sx: { mt: 2 } })] }, i))) })),
 };
 export const Inverted = {
-    render: () => (_jsx(ColumnV2, Object.assign({ sx: { backgroundColor: COLOR.BLACK, p: 2 } }, { children: sizes.map((size, i) => (_jsxs(GroupV2, { children: [_jsx(HeadingV2, Object.assign({ size: HEADINGV2_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 } })] }, i))) }))),
+    render: () => (_jsx(ColumnV2, { sx: { backgroundColor: COLOR.BLACK, p: 2 }, children: sizes.map((size, i) => (_jsxs(GroupV2, { children: [_jsx(HeadingV2, { size: HEADINGV2_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 } })] }, i))) })),
 };
 export const Disabled = {
-    render: () => (_jsx(ColumnV2, Object.assign({ sx: { p: 2 } }, { children: sizes.map((size, i) => (_jsxs(GroupV2, { children: [_jsx(HeadingV2, Object.assign({ size: HEADINGV2_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 } })] }, i))) }))),
+    render: () => (_jsx(ColumnV2, { sx: { p: 2 }, children: sizes.map((size, i) => (_jsxs(GroupV2, { children: [_jsx(HeadingV2, { size: HEADINGV2_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 } })] }, i))) })),
 };

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

@@ -32,7 +32,7 @@ describe('TextInputV2 Component', () => {
         expect(value).toBe('New value');
     });
     it('renders the left icon if provided', () => {
-        const MockIcon = () => _jsx("span", Object.assign({ "data-testid": "mock-icon" }, { children: "Icon" }));
+        const MockIcon = () => _jsx("span", { "data-testid": "mock-icon", children: "Icon" });
         setup({ leftIcon: MockIcon });
         expect(screen.getByTestId('mock-icon')).toBeInTheDocument();
     });

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

@@ -29,19 +29,19 @@ export type TextInputV2Props = StyledElementPropsV2<HTMLInputElement, {
     className?: string;
 }, string>;
 export declare const TextInputV2: React.ForwardRefExoticComponent<{
-    sx?: import("../../../theme").StylesPropV2 | undefined;
+    sx?: import("../../../theme").StylesPropV2;
     children?: string | undefined;
 } & Omit<React.HTMLAttributes<HTMLInputElement>, "children" | "onChange"> & {
-    size?: INPUTV2_SIZE | undefined;
-    leftIcon?: React.FC<any> | undefined;
-    inline?: boolean | undefined;
-    inverted?: boolean | undefined;
-    label?: string | undefined;
-    disabled?: boolean | undefined;
+    size?: INPUTV2_SIZE;
+    leftIcon?: React.FC<any>;
+    inline?: boolean;
+    inverted?: boolean;
+    label?: string;
+    disabled?: boolean;
     value: string;
-    onChange?: ((value: string) => void) | undefined;
-    onChangeRaw?: ((e: string | React.ChangeEvent) => void) | undefined;
-    className?: string | undefined;
+    onChange?: (value: string) => void;
+    onChangeRaw?: (e: string | React.ChangeEvent) => void;
+    className?: string;
 } & {
-    htmlFor?: string | undefined;
+    htmlFor?: string;
 } & React.RefAttributes<any>>;

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

@@ -74,19 +74,19 @@ export const TextInputV2 = React.forwardRef((_a, ref) => {
     const appliedHoverStyles = isHovered ? focusStyles : {};
     const appliedFocusStyles = isFocused ? focusStyles : {};
     return (_jsxs("div", Object.assign({}, anchorElementProps, { ref: ref, onClick: onClick, id: id, className: clsx(`${typeSafeStyles.wrapper} ${inverted ? typeSafeStyles.inverted : ''}`, className), style: Object.assign(Object.assign(Object.assign({ height,
-            display, paddingLeft: paddingX, paddingRight: paddingX }, appliedHoverStyles), appliedFocusStyles), processedStyles) }, { children: [_jsx("fieldset", Object.assign({ className: `${typeSafeStyles.fieldset} ${inverted ? typeSafeStyles.inverted : ''}` }, { children: _jsx("legend", Object.assign({ className: typeSafeStyles.legend }, { children: label && (_jsx(LabelV2, Object.assign({ standalone: true, "aria-hidden": "true", sx: {
+            display, paddingLeft: paddingX, paddingRight: paddingX }, appliedHoverStyles), appliedFocusStyles), processedStyles), children: [_jsx("fieldset", { className: `${typeSafeStyles.fieldset} ${inverted ? typeSafeStyles.inverted : ''}`, children: _jsx("legend", { className: typeSafeStyles.legend, children: label && (_jsx(LabelV2, { standalone: true, "aria-hidden": "true", sx: {
                             px: 1,
                             position: 'relative',
                             display: 'inline-flex',
                             opacity: '0',
                             visibility: 'hidden',
-                        }, typography: labelTypographyMapV2[size] }, { children: label }))) })) })), leftIcon && (_jsx(IconV2, { icon: leftIcon, color: inverted ? COLOR.EXTRA_LIGHT_GRAY : COLOR.TEXT, sx: {
+                        }, typography: labelTypographyMapV2[size], children: label })) }) }), leftIcon && (_jsx(IconV2, { icon: leftIcon, color: inverted ? COLOR.EXTRA_LIGHT_GRAY : COLOR.TEXT, sx: {
                     mr: 2,
                     fontSize: getIconSize(typographyStyles.fontSize),
                 } })), _jsx("input", Object.assign({ value: value, onChange: (event) => {
                     onChange && onChange(event.target.value);
                     onChangeRaw && onChangeRaw(event.target.value);
-                }, className: `${typeSafeStyles.input} ${inverted ? typeSafeStyles.inverted : ''}`, style: Object.assign({}, processSx(Object.assign({}, typographyStyles))), disabled: disabled }, rest)), label && (_jsx(LabelV2, Object.assign({ htmlFor: id, typography: labelTypographyMapV2[size], sx: {
+                }, className: `${typeSafeStyles.input} ${inverted ? typeSafeStyles.inverted : ''}`, style: Object.assign({}, processSx(Object.assign({}, typographyStyles))), disabled: disabled }, rest)), label && (_jsx(LabelV2, { htmlFor: id, typography: labelTypographyMapV2[size], sx: {
                     position: 'absolute',
                     color: inverted ? COLOR.EXTRA_LIGHT_GRAY : COLOR.ND_PROVOST_BLUE,
                     left: '0.5rem',
@@ -94,5 +94,5 @@ export const TextInputV2 = React.forwardRef((_a, ref) => {
                     zIndex: Z_INDEX.ELEVATED,
                     px: 1,
                     top: labelOffsetMapV2[size],
-                } }, { children: label })))] })));
+                }, children: label }))] })));
 });

package/dist/components/elements/layout/Box.d.ts

@@ -2,8 +2,8 @@ import React from 'react';
 import { StyledElementProps } from '../../../theme';
 export type BoxProps = StyledElementProps<HTMLDivElement>;
 export declare const Box: React.ForwardRefExoticComponent<{
-    sx?: import("../../../theme").StylesProp | undefined;
+    sx?: import("../../../theme").StylesProp;
     children?: React.ReactNode;
 } & Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> & object & {
-    htmlFor?: string | undefined;
+    htmlFor?: string;
 } & React.RefAttributes<HTMLDivElement>>;

package/dist/components/elements/layout/Box.stories.js

@@ -10,5 +10,5 @@ const meta = {
 };
 export default meta;
 export const Box = {
-    render: () => (_jsx(BoxComponent, Object.assign({ sx: { p: 1, bg: COLOR.PRIMARY } }, { children: _jsx(BoxComponent, { sx: { p: 1, bg: COLOR.SECONDARY } }) }))),
+    render: () => (_jsx(BoxComponent, { sx: { p: 1, bg: COLOR.PRIMARY }, children: _jsx(BoxComponent, { sx: { p: 1, bg: COLOR.SECONDARY } }) })),
 };

package/dist/components/elements/layout/Column.d.ts

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

package/dist/components/elements/layout/Column.js

@@ -15,5 +15,5 @@ import { convertFlexHelperProps } from './Row';
 export const Column = React.forwardRef((_a, ref) => {
     var { sx, children } = _a, rest = __rest(_a, ["sx", "children"]);
     const flexStyles = convertFlexHelperProps(rest);
-    return (_jsx("div", Object.assign({ ref: ref }, rest, { sx: Object.assign(Object.assign(Object.assign({}, flexStyles), sx), { display: 'flex', flexDirection: 'column' }) }, { children: children })));
+    return (_jsx("div", Object.assign({ ref: ref }, rest, { sx: Object.assign(Object.assign(Object.assign({}, flexStyles), sx), { display: 'flex', flexDirection: 'column' }), children: children })));
 });

package/dist/components/elements/layout/Flex.stories.js

@@ -12,17 +12,17 @@ const meta = {
 };
 export default meta;
 export const Columns = {
-    render: () => (_jsxs(Row, Object.assign({ justify: "space-between" }, { children: [_jsx(Column, { children: _jsx(Paragraph, { children: "Column 1" }) }), _jsx(Column, { children: _jsx(Paragraph, { children: "Column 2" }) }), _jsx(Column, { children: _jsx(Paragraph, { children: "Column 3" }) })] }))),
+    render: () => (_jsxs(Row, { justify: "space-between", children: [_jsx(Column, { children: _jsx(Paragraph, { children: "Column 1" }) }), _jsx(Column, { children: _jsx(Paragraph, { children: "Column 2" }) }), _jsx(Column, { children: _jsx(Paragraph, { children: "Column 3" }) })] })),
 };
 export const Rows = {
     render: () => (_jsxs(Column, { children: [_jsx(Row, { children: _jsx(Paragraph, { children: "Row 1" }) }), _jsx(Row, { children: _jsx(Paragraph, { children: "Row 2" }) }), _jsx(Row, { children: _jsx(Paragraph, { children: "Row 3" }) })] })),
 };
 export const ResponsiveRow = {
-    render: () => (_jsxs(Row, Object.assign({ justify: "space-between", breakpoint: 0 }, { children: [_jsx(Column, { children: _jsx(Paragraph, { children: "Column 1" }) }), _jsx(Column, { children: _jsx(Paragraph, { children: "Column 2" }) }), _jsx(Column, { children: _jsx(Paragraph, { children: "Column 3" }) })] }))),
+    render: () => (_jsxs(Row, { justify: "space-between", breakpoint: 0, children: [_jsx(Column, { children: _jsx(Paragraph, { children: "Column 1" }) }), _jsx(Column, { children: _jsx(Paragraph, { children: "Column 2" }) }), _jsx(Column, { children: _jsx(Paragraph, { children: "Column 3" }) })] })),
 };
 export const FlexHelpers = {
-    render: () => (_jsxs(Row, Object.assign({ justify: "space-between" }, { children: [_jsx(Column, Object.assign({ align: "flex-end", grow: 1, sx: { bg: COLOR.PRIMARY, color: COLOR.TEXT_ON_PRIMARY } }, { children: _jsx(Row, { children: _jsx(Paragraph, { children: "Right-aligned" }) }) })), _jsx(Column, Object.assign({ grow: 1 }, { children: _jsx(Paragraph, { children: "Growing Column...................................................." }) })), _jsx(Column, Object.assign({ shrink: 1, sx: { bg: COLOR.PRIMARY, color: COLOR.TEXT_ON_PRIMARY } }, { children: _jsx(Paragraph, { children: "Shrinking Column" }) }))] }))),
+    render: () => (_jsxs(Row, { justify: "space-between", children: [_jsx(Column, { align: "flex-end", grow: 1, sx: { bg: COLOR.PRIMARY, color: COLOR.TEXT_ON_PRIMARY }, children: _jsx(Row, { children: _jsx(Paragraph, { children: "Right-aligned" }) }) }), _jsx(Column, { grow: 1, children: _jsx(Paragraph, { children: "Growing Column...................................................." }) }), _jsx(Column, { shrink: 1, sx: { bg: COLOR.PRIMARY, color: COLOR.TEXT_ON_PRIMARY }, children: _jsx(Paragraph, { children: "Shrinking Column" }) })] })),
 };
 export const Centered = {
-    render: () => (_jsx(Row, Object.assign({ centered: true, sx: { width: '100%', height: '100px', border: 'solid black 1px' } }, { children: _jsx(Paragraph, { children: "Hello World" }) }))),
+    render: () => (_jsx(Row, { centered: true, sx: { width: '100%', height: '100px', border: 'solid black 1px' }, children: _jsx(Paragraph, { children: "Hello World" }) })),
 };

package/dist/components/elements/layout/Flex.test.js

@@ -8,7 +8,7 @@ describe('Row', () => {
         expect(getByText('Foo')).toBeInTheDocument();
     });
     it('converts helper props to styles', () => {
-        const { getByText } = render(_jsx(Row, Object.assign({ grow: 1, shrink: 1, basis: "100px", align: "baseline", justify: "flex-start" }, { children: "Foo" })));
+        const { getByText } = render(_jsx(Row, { grow: 1, shrink: 1, basis: "100px", align: "baseline", justify: "flex-start", children: "Foo" }));
         const rendered = getByText('Foo');
         expect(rendered).toHaveStyle('flex-grow: 1');
         expect(rendered).toHaveStyle('flex-shrink: 1');
@@ -23,7 +23,7 @@ describe('Column', () => {
         expect(getByText('Foo')).toBeInTheDocument();
     });
     it('converts helper props to styles', () => {
-        const { getByText } = render(_jsx(Column, Object.assign({ grow: 1, shrink: 1, basis: "100px", align: "baseline", justify: "flex-start" }, { children: "Foo" })));
+        const { getByText } = render(_jsx(Column, { grow: 1, shrink: 1, basis: "100px", align: "baseline", justify: "flex-start", children: "Foo" }));
         const rendered = getByText('Foo');
         expect(rendered).toHaveStyle('flex-grow: 1');
         expect(rendered).toHaveStyle('flex-shrink: 1');

package/dist/components/elements/layout/Row.d.ts

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

package/dist/components/elements/layout/Row.js

@@ -48,5 +48,5 @@ export const Row = React.forwardRef((_a, ref) => {
         }
         flexDirection.push('row');
     }
-    return (_jsx("div", Object.assign({}, rest, { ref: ref, sx: Object.assign(Object.assign(Object.assign({}, flexStyles), sx), { flexDirection, display: 'flex' }) }, { children: children })));
+    return (_jsx("div", Object.assign({}, rest, { ref: ref, sx: Object.assign(Object.assign(Object.assign({}, flexStyles), sx), { flexDirection, display: 'flex' }), children: children })));
 });

package/dist/components/elements/option.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type Key = string | number;
 export interface BasicOption<Value extends Key> {
     value: Value;

package/dist/components/providers/alerts.js

@@ -113,7 +113,7 @@ export const AlertsProvider = ({ domain = ALERT_DOMAIN.LIBRARY, endpoint, startT
     const filteredAlerts = alerts
         .filter((alert) => !dismissedAlerts.includes(alert.id))
         .filter((alert) => { var _a; return (_a = alert === null || alert === void 0 ? void 0 : alert.domains) === null || _a === void 0 ? void 0 : _a.includes(domain); });
-    return (_jsx(AlertsContext.Provider, Object.assign({ value: { alerts: filteredAlerts, dismiss } }, { children: children })));
+    return (_jsx(AlertsContext.Provider, { value: { alerts: filteredAlerts, dismiss }, children: children }));
 };
 export const useAlerts = (pageAlerts = []) => {
     const { alerts: allAlerts, dismiss } = React.useContext(AlertsContext);

package/dist/components/providers/componentConfig.js

@@ -33,5 +33,5 @@ export const ComponentConfigContext = createContext(defaultComponentConfig);
 export const useComponentConfig = () => useContext(ComponentConfigContext);
 export const ComponentConfigProvider = ({ config: configParam, children }) => {
     const config = useMemo(() => (Object.assign(Object.assign(Object.assign({}, defaultComponentConfig), configParam), { link: Object.assign(Object.assign({}, defaultComponentConfig.link), configParam.link) })), []);
-    return (_jsx(ComponentConfigContext.Provider, Object.assign({ value: config }, { children: children })));
+    return (_jsx(ComponentConfigContext.Provider, { value: config, children: children }));
 };

package/dist/components/providers/componentConfigV2.js

@@ -33,5 +33,5 @@ export const ComponentConfigContextV2 = createContext(defaultComponentConfig);
 export const useComponentConfigV2 = () => useContext(ComponentConfigContextV2);
 export const ComponentConfigProviderV2 = ({ config: configParam, children }) => {
     const config = useMemo(() => (Object.assign(Object.assign(Object.assign({}, defaultComponentConfig), configParam), { link: Object.assign(Object.assign({}, defaultComponentConfig.link), configParam.link) })), []);
-    return (_jsx(ComponentConfigContextV2.Provider, Object.assign({ value: config }, { children: children })));
+    return (_jsx(ComponentConfigContextV2.Provider, { value: config, children: children }));
 };

package/dist/components/providers/dialogs.js

@@ -13,11 +13,11 @@ export const DialogsProvider = ({ children }) => {
     const close = (key) => {
         setDialogs(Object.assign(Object.assign({}, dialogs), { [key]: { isOpen: false } }));
     };
-    return (_jsx(DialogContext.Provider, Object.assign({ value: {
+    return (_jsx(DialogContext.Provider, { value: {
             dialogs,
             open,
             close,
-        } }, { children: children })));
+        }, children: children }));
 };
 export const useDialog = (id) => {
     const dialogs = React.useContext(DialogContext);

package/dist/components/providers/env.js

@@ -17,8 +17,8 @@ export const EnvironmentProvider = ({ env, children }) => {
         else {
         }
     };
-    return (_jsx(EnvironmentContext.Provider, Object.assign({ value: {
+    return (_jsx(EnvironmentContext.Provider, { value: {
             env,
             flagInDevelopment,
-        } }, { children: children })));
+        }, children: children }));
 };

package/dist/components/providers/media.js

@@ -40,9 +40,9 @@ export const MediaSizeProvider = ({ useHydrationPatch, ssrBreakpoint: ssrBreakpo
             window.removeEventListener('resize', rerenderOnResize);
         };
     }, []);
-    return (_jsx(MediaContext.Provider, Object.assign({ value: {
+    return (_jsx(MediaContext.Provider, { value: {
             breakpoint,
             screenSize,
-        } }, { children: children })));
+        }, children: children }));
 };
 export const useMediaQuery = () => useContext(MediaContext);

package/dist/components/providers/mediaV2.js

@@ -40,9 +40,9 @@ export const MediaSizeProviderV2 = ({ useHydrationPatch, ssrBreakpoint: ssrBreak
             window.removeEventListener('resize', rerenderOnResize);
         };
     }, []);
-    return (_jsx(MediaContextV2.Provider, Object.assign({ value: {
+    return (_jsx(MediaContextV2.Provider, { value: {
             breakpoint,
             screenSize,
-        } }, { children: children })));
+        }, children: children }));
 };
 export const useMediaQueryV2 = () => useContext(MediaContextV2);

package/dist/components/providers/menu.js

@@ -300,5 +300,5 @@ export const MenuProvider = ({ menu, children, }) => {
         getMenuProps,
         getMenuItemProps,
     };
-    return (_jsx(MenuContext.Provider, Object.assign({ value: contextValue }, { children: typeof children === 'function' ? children(contextValue) : children })));
+    return (_jsx(MenuContext.Provider, { value: contextValue, children: typeof children === 'function' ? children(contextValue) : children }));
 };

package/dist/components/providers/snackBar.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type SnackBarMessage = {
     message: string;
     content?: JSX.Element;

package/dist/components/providers/snackBar.js

@@ -41,12 +41,12 @@ export const SnackBarProvider = ({ children, }) => {
             removeMessageTimeouts.current.forEach((timeout) => clearTimeout(timeout));
         };
     }, []);
-    return (_jsx(SnackBarContext.Provider, Object.assign({ value: {
+    return (_jsx(SnackBarContext.Provider, { value: {
             messages,
             removeMessage,
             previousMessageCount: previousMessageCount.current,
             addMessage,
-        } }, { children: children })));
+        }, children: children }));
 };
 export const useSnackBar = () => {
     return useContext(SnackBarContext);

package/dist/components/providers/ui.js

@@ -11,6 +11,6 @@ import StructuredData from '../composites/StructuredData';
 import { SnackBarProvider } from './snackBar';
 import { UniqueIdProvider } from './uniqueIds';
 export const UiProvider = ({ structuredData, env, components, alertsConfig, children, includeTheme = true, loadFonts, loadGlobalStyles, useHydrationPatch, ssrBreakpoint, }) => {
-    const core = (_jsxs(EnvironmentProvider, Object.assign({ env: env }, { children: [_jsx(MediaSizeProvider, Object.assign({ ssrBreakpoint: ssrBreakpoint, useHydrationPatch: useHydrationPatch }, { children: _jsx(ComponentConfigProvider, Object.assign({ config: components || {} }, { children: _jsx(UniqueIdProvider, { children: _jsx(SnackBarProvider, { children: _jsx(DialogsProvider, { children: _jsx(AlertsProvider, Object.assign({}, alertsConfig, { children: children })) }) }) }) })) })), loadGlobalStyles && _jsx(GlobalStyles, {}), loadFonts && _jsx(FontLoader, {}), structuredData && _jsx(StructuredData, Object.assign({}, structuredData))] })));
+    const core = (_jsxs(EnvironmentProvider, { env: env, children: [_jsx(MediaSizeProvider, { ssrBreakpoint: ssrBreakpoint, useHydrationPatch: useHydrationPatch, children: _jsx(ComponentConfigProvider, { config: components || {}, children: _jsx(UniqueIdProvider, { children: _jsx(SnackBarProvider, { children: _jsx(DialogsProvider, { children: _jsx(AlertsProvider, Object.assign({}, alertsConfig, { children: children })) }) }) }) }) }), loadGlobalStyles && _jsx(GlobalStyles, {}), loadFonts && _jsx(FontLoader, {}), structuredData && _jsx(StructuredData, Object.assign({}, structuredData))] }));
     return includeTheme ? _jsx(ThemeProvider, { children: core }) : core;
 };