@ndlib/component-library 1.0.44 → 1.0.46

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

package/dist/components/providers/uiV2.js

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

package/dist/components/providers/uniqueIds.js

@@ -3,7 +3,7 @@ import { createContext, useContext, useMemo, useRef } from 'react';
 const UniqueIdContext = createContext({});
 export const UniqueIdProvider = ({ children, }) => {
     const countIndexRef = useRef({});
-    return (_jsx(UniqueIdContext.Provider, Object.assign({ value: countIndexRef.current }, { children: children })));
+    return (_jsx(UniqueIdContext.Provider, { value: countIndexRef.current, children: children }));
 };
 export const useUniqueId = (prefix) => {
     const countIndex = useContext(UniqueIdContext);

package/dist/index.d.ts

@@ -70,6 +70,7 @@ export { NavMenu } from './components/composites/NavMenu';
 export { NavMenuV2 } from './components/composites/NavMenuV2';
 export { EmptyState, EMPTY_STATE_SIZE, } from './components/composites/EmptyState';
 export { DropdownLinks } from './components/composites/DropdownLinks';
+export { DropdownLinksV2 } from './components/composites/DropdownLinksV2';
 export { Modal } from './components/composites/Modal';
 export { ModalV2 } from './components/composites/ModalV2';
 export { DragDropList, DragHandle } from './components/composites/DragDropList';

package/dist/index.js

@@ -69,6 +69,7 @@ export { NavMenu } from './components/composites/NavMenu';
 export { NavMenuV2 } from './components/composites/NavMenuV2';
 export { EmptyState, EMPTY_STATE_SIZE, } from './components/composites/EmptyState';
 export { DropdownLinks } from './components/composites/DropdownLinks';
+export { DropdownLinksV2 } from './components/composites/DropdownLinksV2';
 export { Modal } from './components/composites/Modal';
 export { ModalV2 } from './components/composites/ModalV2';
 export { DragDropList, DragHandle } from './components/composites/DragDropList';

package/dist/theme/Color.stories.js

@@ -70,5 +70,5 @@ const colors = [
     { color: COLOR.ALERT_WARNING_BORDER, label: 'ALERT_WARNING_BORDER' },
 ];
 export const Default = {
-    render: () => (_jsx(Row, Object.assign({ sx: { flexWrap: 'wrap' } }, { children: colors.map((color) => (_jsxs(Group, Object.assign({ type: GROUP_TYPE.GROUP, sx: { mr: 3, mt: 0, flexBasis: '100px' } }, { children: [_jsx(Label, Object.assign({ size: LABEL_SIZE.SM }, { children: color.label })), _jsx(ColorSquare, { color: color.color })] }), color.label))) }))),
+    render: () => (_jsx(Row, { sx: { flexWrap: 'wrap' }, children: colors.map((color) => (_jsxs(Group, { type: GROUP_TYPE.GROUP, sx: { mr: 3, mt: 0, flexBasis: '100px' }, children: [_jsx(Label, { size: LABEL_SIZE.SM, children: color.label }), _jsx(ColorSquare, { color: color.color })] }, color.label))) })),
 };

package/dist/theme/Typography.stories.js

@@ -41,6 +41,6 @@ const randomElement = (arr) => {
 export const Default = {
     render: () => (_jsx(Group, { children: types.map((t) => {
             const style = getTypographyStyles(t.type);
-            return (_jsxs(Group, Object.assign({ sx: { mb: '1rem' } }, { children: [_jsx(Label, Object.assign({ size: LABEL_SIZE.SM }, { children: t.label })), _jsx(Box, Object.assign({ sx: { p: 3, boxShadow: '0px 0px 8px 1px #dddddd' } }, { children: _jsx("div", Object.assign({ sx: style }, { children: randomElement(pangrams) })) }))] })));
+            return (_jsxs(Group, { sx: { mb: '1rem' }, children: [_jsx(Label, { size: LABEL_SIZE.SM, children: t.label }), _jsx(Box, { sx: { p: 3, boxShadow: '0px 0px 8px 1px #dddddd' }, children: _jsx("div", { sx: style, children: randomElement(pangrams) }) })] }));
         }) })),
 };

package/dist/theme/colors.d.ts

@@ -18,7 +18,7 @@ export declare enum COLOR {
     LIGHT_GRAY = "lightGray",
     EXTRA_LIGHT_GRAY = "extraLightGray",
     EXTRA_EXTRA_LIGHT_GRAY = "extraExtraLightGray",
-    SUCCESS = "ndTertiary1",
+    SUCCESS = "success",
     ND_BLUE = "ndBlue",
     ND_BLUE_DARK = "ndBlueDark",
     ND_BLUE_LIGHT = "ndBlueLight",
@@ -53,7 +53,7 @@ export declare enum COLOR {
     ALERT_WARNING_BG = "alertWarningBg",
     ALERT_WARNING_BORDER = "alertWarningBorder",
     ALERT_SUCCESS_BG = "alertSuccessBg",
-    ALERT_SUCCESS_BORDER = "ndTertiary1"
+    ALERT_SUCCESS_BORDER = "alertSuccessBorder"
 }
 export declare const colors: {
     [key in COLOR]: string;

package/dist/theme/colors.js

@@ -19,7 +19,7 @@ export var COLOR;
     COLOR["LIGHT_GRAY"] = "lightGray";
     COLOR["EXTRA_LIGHT_GRAY"] = "extraLightGray";
     COLOR["EXTRA_EXTRA_LIGHT_GRAY"] = "extraExtraLightGray";
-    COLOR["SUCCESS"] = "ndTertiary1";
+    COLOR["SUCCESS"] = "success";
     COLOR["ND_BLUE"] = "ndBlue";
     COLOR["ND_BLUE_DARK"] = "ndBlueDark";
     COLOR["ND_BLUE_LIGHT"] = "ndBlueLight";
@@ -54,7 +54,7 @@ export var COLOR;
     COLOR["ALERT_WARNING_BG"] = "alertWarningBg";
     COLOR["ALERT_WARNING_BORDER"] = "alertWarningBorder";
     COLOR["ALERT_SUCCESS_BG"] = "alertSuccessBg";
-    COLOR["ALERT_SUCCESS_BORDER"] = "ndTertiary1";
+    COLOR["ALERT_SUCCESS_BORDER"] = "alertSuccessBorder";
 })(COLOR || (COLOR = {}));
 export const colors = {
     [COLOR.TEXT]: '#333333',
@@ -76,6 +76,7 @@ export const colors = {
     [COLOR.LIGHT_GRAY]: '#d2d2d2',
     [COLOR.EXTRA_LIGHT_GRAY]: '#e2e2e2',
     [COLOR.EXTRA_EXTRA_LIGHT_GRAY]: '#f2f2f2',
+    [COLOR.SUCCESS]: '#00823E',
     [COLOR.ND_GOLD]: '#ae9142',
     [COLOR.ND_GOLD_LIGHT]: '#d39f10',
     [COLOR.ND_GOLD_DARK]: '#8c7535',
@@ -110,4 +111,5 @@ export const colors = {
     [COLOR.ALERT_WARNING_BG]: '#fc7279',
     [COLOR.ALERT_WARNING_BORDER]: '#ad5458',
     [COLOR.ALERT_SUCCESS_BG]: '#edffea',
+    [COLOR.ALERT_SUCCESS_BORDER]: '#00823E',
 };

package/dist/theme/css-variables.css

@@ -18,7 +18,7 @@
   --lightGray: #d2d2d2;
   --extraLightGray: #e2e2e2;
   --extraExtraLightGray: #f2f2f2;
-  --ndTertiary1: #00823E;
+  --success: #00823E;
   --ndBlue: #0c2340;
   --ndBlueDark: #081629;
   --ndBlueLight: #143865;
@@ -53,5 +53,5 @@
   --alertWarningBg: #fc7279;
   --alertWarningBorder: #ad5458;
   --alertSuccessBg: #edffea;
-  --ndTertiary1: #00823E;
+  --alertSuccessBorder: #00823E;
 }