@ndlib/component-library 1.0.44 → 1.0.46

package/dist/components/composites/Card/Card.stories.js

@@ -82,21 +82,21 @@ const horizontalCards = [
         headline: 'Exhibit — Printing the Nation: A Century of Irish Book Arts',
         image: 'https://images.ctfassets.net/cfblb1f7i85j/7aCd5Sm86JdtQepGBKDUfy/dcb4d97dd3a1d3ee810e8bcaa82dc715/Spring_Exhibit_2023-Rep.jpg?w=296',
         size: CARD_SIZE.SM,
-        children: (_jsxs(_Fragment, { children: [_jsxs(Label, Object.assign({ color: COLOR.PRIMARY, size: LABEL_SIZE.SM, sx: {
+        children: (_jsxs(_Fragment, { children: [_jsxs(Label, { color: COLOR.PRIMARY, size: LABEL_SIZE.SM, sx: {
                         display: 'flex',
-                    } }, { children: [_jsx(Icon, { icon: CalendarIcon, sx: { mr: 1 } }), "Monday, February 6 \u2013 Monday, July 31, 2023"] })), _jsxs(Label, Object.assign({ color: COLOR.PRIMARY, size: LABEL_SIZE.SM, sx: {
+                    }, children: [_jsx(Icon, { icon: CalendarIcon, sx: { mr: 1 } }), "Monday, February 6 \u2013 Monday, July 31, 2023"] }), _jsxs(Label, { color: COLOR.PRIMARY, size: LABEL_SIZE.SM, sx: {
                         display: 'flex',
-                    } }, { children: [_jsx(Icon, { icon: AccessTime, sx: { mr: 1 } }), "M-F: 9:30am \u2013 4:30pm"] })), _jsx(Paragraph, { children: "This exhibit demonstrates the art and craft of the Irish book since 1900." })] })),
+                    }, children: [_jsx(Icon, { icon: AccessTime, sx: { mr: 1 } }), "M-F: 9:30am \u2013 4:30pm"] }), _jsx(Paragraph, { children: "This exhibit demonstrates the art and craft of the Irish book since 1900." })] })),
     },
     {
         headline: 'One Book, One Michiana Digital Exhibit — Papers Alight: Contextualizing Mike Curato’s Flamer',
         image: 'https://images.ctfassets.net/cfblb1f7i85j/2sGpdDbNkl6MPnlem6wq1R/995c786624613b5ff07228e481996385/One.Book.2023-Rep.png?w=296',
         size: CARD_SIZE.SM,
-        children: ({ activeBackground }) => (_jsxs(_Fragment, { children: [_jsxs(Label, Object.assign({ color: COLOR.PRIMARY, size: LABEL_SIZE.SM, sx: {
+        children: ({ activeBackground }) => (_jsxs(_Fragment, { children: [_jsxs(Label, { color: COLOR.PRIMARY, size: LABEL_SIZE.SM, sx: {
                         display: 'flex',
-                    } }, { children: [_jsx(Icon, { icon: CalendarIcon, sx: { mr: 1 } }), "Monday, February 6 \u2013 Monday, July 31, 2023"] })), _jsxs(Label, Object.assign({ color: COLOR.PRIMARY, size: LABEL_SIZE.SM, sx: {
+                    }, children: [_jsx(Icon, { icon: CalendarIcon, sx: { mr: 1 } }), "Monday, February 6 \u2013 Monday, July 31, 2023"] }), _jsxs(Label, { color: COLOR.PRIMARY, size: LABEL_SIZE.SM, sx: {
                         display: 'flex',
-                    } }, { children: [_jsx(Icon, { icon: AccessTime, sx: { mr: 1 } }), "M-F: 9:30am \u2013 4:30pm"] })), _jsx(ReadMore, Object.assign({ typography: TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM, lines: 2, sx: { bg: activeBackground } }, { children: "This online exhibition displays rare materials from Hesburgh Libraries collections that place Mike Curato\u2019s teen graphic novel into a historical and social context." }))] })),
+                    }, children: [_jsx(Icon, { icon: AccessTime, sx: { mr: 1 } }), "M-F: 9:30am \u2013 4:30pm"] }), _jsx(ReadMore, { typography: TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM, lines: 2, sx: { bg: activeBackground }, children: "This online exhibition displays rare materials from Hesburgh Libraries collections that place Mike Curato\u2019s teen graphic novel into a historical and social context." })] })),
     },
 ];
 export const Default = {
@@ -134,7 +134,7 @@ export const Raised = {
     args: {},
 };
 export const Heading = {
-    render: () => (_jsx(Column, { children: basicCards.map((props, i) => (_createElement(Card, Object.assign({}, props, { key: i, heading: "Heading", headingIcon: BookmarkIcon, headingAction: _jsx(Button, Object.assign({ type: BUTTON_TYPE.TEXT, color: COLOR.WHITE, onClick: () => { } }, { children: "Click Me" })) })))) })),
+    render: () => (_jsx(Column, { children: basicCards.map((props, i) => (_createElement(Card, Object.assign({}, props, { key: i, heading: "Heading", headingIcon: BookmarkIcon, headingAction: _jsx(Button, { type: BUTTON_TYPE.TEXT, color: COLOR.WHITE, onClick: () => { }, children: "Click Me" }) })))) })),
     args: {},
 };
 export const CustomImageHeading = {

package/dist/components/composites/Card/Card.test.js

@@ -13,7 +13,7 @@ describe('Card', () => {
         vi.resetAllMocks();
     });
     it('renders contents', () => {
-        const { getByText } = render(_jsx(Card, Object.assign({ headline: MOCK_HEADLINE }, { children: MOCK_BODY })));
+        const { getByText } = render(_jsx(Card, { headline: MOCK_HEADLINE, children: MOCK_BODY }));
         expect(getByText(MOCK_HEADLINE)).toBeDefined();
         expect(getByText(MOCK_BODY)).toBeDefined();
     });

package/dist/components/composites/Card/index.js

@@ -39,18 +39,18 @@ const DateDisplay = ({ date: dateString }) => {
     const date = React.useMemo(() => {
         return new Date(dateString);
     }, [dateString]);
-    return (_jsxs(Column, Object.assign({ sx: {
+    return (_jsxs(Column, { sx: {
             alignItems: 'center',
             justifyContent: 'center',
             p: 3,
             fontFamily: FONT.BRANDED2,
             backgroundColor: COLOR.ND_GOLD_LIGHT,
-        } }, { children: [_jsx(Box, Object.assign({ sx: {
+        }, children: [_jsx(Box, { sx: {
                     fontSize: FONT_SIZE.LG,
-                } }, { children: date.getDate() })), _jsx(Box, Object.assign({ sx: {
+                }, children: date.getDate() }), _jsx(Box, { sx: {
                     fontSize: FONT_SIZE.MD,
                     mt: 1,
-                } }, { children: MONTH_LABELS[date.getMonth()] }))] })));
+                }, children: MONTH_LABELS[date.getMonth()] })] }));
 };
 export const Card = ({ size, displayDate, headline, image, alt, layout, onClick, raised, truncateHeadlineAfter, heading, headlineStyles, headingStyles, headingIcon, headingAction, backgroundColor, sx, imageHeight: imageHeightProp, imageWidth: imageWidthProp, containImage, containerWidth, containerHeight, children, }) => {
     var _a;
@@ -93,25 +93,25 @@ export const Card = ({ size, displayDate, headline, image, alt, layout, onClick,
                     borderColor: COLOR.ND_SKY_BLUE_DARK,
                     backgroundColor: COLOR.ND_SKY_BLUE,
                 }
-                : {} }, sx) }, { children: [image && !containImage && (_jsx("img", { src: image, alt: alt, style: {
+                : {} }, sx), children: [image && !containImage && (_jsx("img", { src: image, alt: alt, style: {
                     width: imageWidth,
                     height: imageHeight,
-                } })), image && containImage && (_jsx(Box, Object.assign({ sx: {
+                } })), image && containImage && (_jsx(Box, { sx: {
                     width: containerWidth || '500px',
                     height: containerHeight || '280px',
                     backgroundColor: COLOR.ND_SKY_BLUE,
                     display: 'flex',
                     justifyContent: 'center',
                     alignItems: 'center',
-                } }, { children: _jsx("img", { src: image, alt: alt, style: {
+                }, children: _jsx("img", { src: image, alt: alt, style: {
                         width: imageWidth,
                         height: imageHeight,
                         objectFit: objectFit,
-                    } }) }))), displayDate && _jsx(DateDisplay, { date: displayDate }), heading && (_jsxs(Row, Object.assign({ sx: Object.assign({ bg: COLOR.PRIMARY, color: COLOR.WHITE, width: '100%', px: contentPaddingX, py: 3, justifyContent: 'space-between', alignItems: 'center' }, headingStyles) }, { children: [_jsxs(Row, { children: [headingIcon && (_jsx(Icon, { icon: headingIcon, size: FONT_SIZE.LG, color: COLOR.WHITE, sx: { mr: 2 } })), _jsx(Heading, Object.assign({ size: HEADING_SIZE.SM, sx: {
+                    } }) })), displayDate && _jsx(DateDisplay, { date: displayDate }), heading && (_jsxs(Row, { sx: Object.assign({ bg: COLOR.PRIMARY, color: COLOR.WHITE, width: '100%', px: contentPaddingX, py: 3, justifyContent: 'space-between', alignItems: 'center' }, headingStyles), children: [_jsxs(Row, { children: [headingIcon && (_jsx(Icon, { icon: headingIcon, size: FONT_SIZE.LG, color: COLOR.WHITE, sx: { mr: 2 } })), _jsx(Heading, { size: HEADING_SIZE.SM, sx: {
                                     color: COLOR.WHITE,
                                     mt: 0,
                                     whiteSpace: 'nowrap',
-                                } }, { children: heading }))] }), _jsx(Row, { children: headingAction && headingAction })] }))), _jsx(Row, Object.assign({ sx: { px: contentPaddingX, py: contentPaddingY } }, { children: _jsxs(Column, Object.assign({ justify: "center" }, { children: [headline && (_jsx(Heading, Object.assign({ typography: typography, sx: Object.assign({ mt: 0 }, headlineStyles) }, { children: truncateHeadlineAfter ? (_jsx(ReadMore, Object.assign({ lines: truncateHeadlineAfter, typography: typography, sx: { bg: activeBackground } }, { children: headline }))) : (headline) }))), children && (_jsx(Box, Object.assign({ sx: { mt: headline && !heading ? 2 : 0 } }, { children: typeof children === 'function'
+                                }, children: heading })] }), _jsx(Row, { children: headingAction && headingAction })] })), _jsx(Row, { sx: { px: contentPaddingX, py: contentPaddingY }, children: _jsxs(Column, { justify: "center", children: [headline && (_jsx(Heading, { typography: typography, sx: Object.assign({ mt: 0 }, headlineStyles), children: truncateHeadlineAfter ? (_jsx(ReadMore, { lines: truncateHeadlineAfter, typography: typography, sx: { bg: activeBackground }, children: headline })) : (headline) })), children && (_jsx(Box, { sx: { mt: headline && !heading ? 2 : 0 }, children: typeof children === 'function'
                                 ? children({ isHovered, activeBackground })
-                                : children })))] })) }))] })));
+                                : children }))] }) })] })));
 };

package/dist/components/composites/CardV2/CardV2.stories.js

@@ -84,24 +84,24 @@ const horizontalCards = [
         headline: 'Exhibit — Printing the Nation: A Century of Irish Book Arts',
         image: 'https://images.ctfassets.net/cfblb1f7i85j/7aCd5Sm86JdtQepGBKDUfy/dcb4d97dd3a1d3ee810e8bcaa82dc715/Spring_Exhibit_2023-Rep.jpg?w=296',
         size: CARDV2_SIZE.SM,
-        children: (_jsxs(_Fragment, { children: [_jsxs(LabelV2, Object.assign({ color: COLOR.PRIMARY, size: LABELV2_SIZE.SM, sx: {
+        children: (_jsxs(_Fragment, { children: [_jsxs(LabelV2, { color: COLOR.PRIMARY, size: LABELV2_SIZE.SM, sx: {
                         display: 'flex',
-                    } }, { children: [_jsx(IconV2, { icon: CalendarIcon, sx: { mr: 1 } }), "Monday, February 6 \u2013 Monday, July 31, 2023"] })), _jsxs(LabelV2, Object.assign({ color: COLOR.PRIMARY, size: LABELV2_SIZE.SM, sx: {
+                    }, children: [_jsx(IconV2, { icon: CalendarIcon, sx: { mr: 1 } }), "Monday, February 6 \u2013 Monday, July 31, 2023"] }), _jsxs(LabelV2, { color: COLOR.PRIMARY, size: LABELV2_SIZE.SM, sx: {
                         display: 'flex',
-                    } }, { children: [_jsx(IconV2, { icon: AccessTime, sx: { mr: 1 } }), "M-F: 9:30am \u2013 4:30pm"] })), _jsx(ParagraphV2, { children: "This exhibit demonstrates the art and craft of the Irish book since 1900." })] })),
+                    }, children: [_jsx(IconV2, { icon: AccessTime, sx: { mr: 1 } }), "M-F: 9:30am \u2013 4:30pm"] }), _jsx(ParagraphV2, { children: "This exhibit demonstrates the art and craft of the Irish book since 1900." })] })),
     },
     {
         headline: 'One Book, One Michiana Digital Exhibit — Papers Alight: Contextualizing Mike Curato’s Flamer',
         image: 'https://images.ctfassets.net/cfblb1f7i85j/2sGpdDbNkl6MPnlem6wq1R/995c786624613b5ff07228e481996385/One.Book.2023-Rep.png?w=296',
         size: CARDV2_SIZE.SM,
-        children: (_jsxs(_Fragment, { children: [_jsxs(LabelV2, Object.assign({ color: COLOR.PRIMARY, size: LABELV2_SIZE.SM, sx: {
+        children: (_jsxs(_Fragment, { children: [_jsxs(LabelV2, { color: COLOR.PRIMARY, size: LABELV2_SIZE.SM, sx: {
                         display: 'flex',
-                    } }, { children: [_jsx(IconV2, { icon: CalendarIcon, sx: { mr: 1 } }), "Monday, February 6 \u2013 Monday, July 31, 2023"] })), _jsxs(LabelV2, Object.assign({ color: COLOR.PRIMARY, size: LABELV2_SIZE.SM, sx: {
+                    }, children: [_jsx(IconV2, { icon: CalendarIcon, sx: { mr: 1 } }), "Monday, February 6 \u2013 Monday, July 31, 2023"] }), _jsxs(LabelV2, { color: COLOR.PRIMARY, size: LABELV2_SIZE.SM, sx: {
                         display: 'flex',
-                    } }, { children: [_jsx(IconV2, { icon: AccessTime, sx: { mr: 1 } }), "M-F: 9:30am \u2013 4:30pm"] })), _jsx(ReadMoreV2, Object.assign({ typography: TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM, lines: 2 }, { children: "This online exhibition displays rare materials from Hesburgh Libraries collections that place Mike Curato\u2019s teen graphic novel into a historical and social context." }))] })),
+                    }, children: [_jsx(IconV2, { icon: AccessTime, sx: { mr: 1 } }), "M-F: 9:30am \u2013 4:30pm"] }), _jsx(ReadMoreV2, { typography: TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM, lines: 2, children: "This online exhibition displays rare materials from Hesburgh Libraries collections that place Mike Curato\u2019s teen graphic novel into a historical and social context." })] })),
     },
 ];
-const leftBadge = (_jsx(BoxV2, Object.assign({ sx: {
+const leftBadge = (_jsx(BoxV2, { sx: {
         width: '40px',
         height: '40px',
         borderRadius: '50%',
@@ -109,8 +109,8 @@ const leftBadge = (_jsx(BoxV2, Object.assign({ sx: {
         alignItems: 'center',
         justifyContent: 'center',
         bg: COLOR.ND_BLUE,
-    } }, { children: _jsx(IconV2, { icon: CollectionsBookmark, size: FONT_SIZE.MD, color: COLOR.WHITE }) })));
-const rightBadge = (_jsx(BoxV2, Object.assign({ sx: {
+    }, children: _jsx(IconV2, { icon: CollectionsBookmark, size: FONT_SIZE.MD, color: COLOR.WHITE }) }));
+const rightBadge = (_jsx(BoxV2, { sx: {
         width: '40px',
         height: '40px',
         borderRadius: '4px',
@@ -121,7 +121,7 @@ const rightBadge = (_jsx(BoxV2, Object.assign({ sx: {
         borderColor: COLOR.ND_BLUE,
         borderWidth: '1px',
         borderStyle: 'solid',
-    } }, { children: _jsx(IconV2, { icon: Bookmark, size: FONT_SIZE.MD, color: COLOR.ND_BLUE }) })));
+    }, children: _jsx(IconV2, { icon: Bookmark, size: FONT_SIZE.MD, color: COLOR.ND_BLUE }) }));
 export const Default = {
     render: () => (_jsx(ColumnV2, { children: headlinedCards.map((props, i) => (_createElement(CardV2, Object.assign({}, props, { key: i })))) })),
     args: {},
@@ -161,7 +161,7 @@ export const Raised = {
     args: {},
 };
 export const Heading = {
-    render: () => (_jsx(ColumnV2, { children: basicCards.map((props, i) => (_createElement(CardV2, Object.assign({}, props, { key: i, heading: "Heading", headingIcon: BookmarkIcon, headingAction: _jsx(ButtonV2, Object.assign({ type: BUTTONV2_TYPE.TEXT, color: COLOR.WHITE, onClick: () => { } }, { children: "Click Me" })) })))) })),
+    render: () => (_jsx(ColumnV2, { children: basicCards.map((props, i) => (_createElement(CardV2, Object.assign({}, props, { key: i, heading: "Heading", headingIcon: BookmarkIcon, headingAction: _jsx(ButtonV2, { type: BUTTONV2_TYPE.TEXT, color: COLOR.WHITE, onClick: () => { }, children: "Click Me" }) })))) })),
     args: {},
 };
 export const CustomImageHeading = {
@@ -174,14 +174,14 @@ export const CustomImageHeading = {
     args: {},
 };
 export const LeftBadge = {
-    render: () => (_jsx(ColumnV2, Object.assign({ sx: { ml: '1.5rem' } }, { children: headlinedCards.map((props, i) => (_createElement(CardV2, Object.assign({ containImage: true, containerHeight: '280px', leftBadge: leftBadge }, props, { key: i })))) }))),
+    render: () => (_jsx(ColumnV2, { sx: { ml: '1.5rem' }, children: headlinedCards.map((props, i) => (_createElement(CardV2, Object.assign({ containImage: true, containerHeight: '280px', leftBadge: leftBadge }, props, { key: i })))) })),
     args: {},
 };
 export const RightBadge = {
-    render: () => (_jsx(ColumnV2, Object.assign({ sx: { ml: '1.5rem' } }, { children: headlinedCards.map((props, i) => (_createElement(CardV2, Object.assign({ containImage: true, containerHeight: '280px', rightBadge: rightBadge }, props, { key: i })))) }))),
+    render: () => (_jsx(ColumnV2, { sx: { ml: '1.5rem' }, children: headlinedCards.map((props, i) => (_createElement(CardV2, Object.assign({ containImage: true, containerHeight: '280px', rightBadge: rightBadge }, props, { key: i })))) })),
     args: {},
 };
 export const LeftAndRightBadges = {
-    render: () => (_jsx(ColumnV2, Object.assign({ sx: { ml: '1.5rem' } }, { children: headlinedCards.map((props, i) => (_createElement(CardV2, Object.assign({ containImage: true, containerHeight: '280px', leftBadge: leftBadge, rightBadge: rightBadge }, props, { key: i })))) }))),
+    render: () => (_jsx(ColumnV2, { sx: { ml: '1.5rem' }, children: headlinedCards.map((props, i) => (_createElement(CardV2, Object.assign({ containImage: true, containerHeight: '280px', leftBadge: leftBadge, rightBadge: rightBadge }, props, { key: i })))) })),
     args: {},
 };

package/dist/components/composites/CardV2/CardV2.test.js

@@ -12,7 +12,7 @@ describe('CardV2', () => {
         vi.resetAllMocks();
     });
     it('renders contents', () => {
-        const { getByText } = render(_jsx(CardV2, Object.assign({ headline: MOCK_HEADLINE }, { children: MOCK_BODY })));
+        const { getByText } = render(_jsx(CardV2, { headline: MOCK_HEADLINE, children: MOCK_BODY }));
         expect(getByText(MOCK_HEADLINE)).toBeDefined();
         expect(getByText(MOCK_BODY)).toBeDefined();
     });

package/dist/components/composites/CardV2/index.js

@@ -40,15 +40,15 @@ const DateDisplay = ({ date: dateString }) => {
     const date = React.useMemo(() => {
         return new Date(dateString);
     }, [dateString]);
-    return (_jsxs(ColumnV2, Object.assign({ className: typeSafeStyles.dateWrapper, sx: {
+    return (_jsxs(ColumnV2, { className: typeSafeStyles.dateWrapper, sx: {
             fontFamily: FONT.BRANDED2,
             boxShadow: BOX_SHADOW.EMPHASIZED,
-        } }, { children: [_jsx(BoxV2, Object.assign({ sx: {
+        }, children: [_jsx(BoxV2, { sx: {
                     fontSize: FONT_SIZE.LG,
-                } }, { children: date.getDate() })), _jsx(BoxV2, Object.assign({ sx: {
+                }, children: date.getDate() }), _jsx(BoxV2, { sx: {
                     fontSize: FONT_SIZE.MD,
                     marginTop: '0.25rem',
-                } }, { children: MONTH_LABELS[date.getMonth()] }))] })));
+                }, children: MONTH_LABELS[date.getMonth()] })] }));
 };
 export const CardV2 = ({ size, displayDate, headline, image, alt, layout, onClick, raised, truncateHeadlineAfter, heading, headlineStyles, headingStyles, headingIcon, headingAction, backgroundColor, leftBadge, rightBadge, className, shouldShowHoverStyle, imageHeight: imageHeightProp, imageWidth: imageWidthProp, containImage, containerWidth, containerHeight, inlineStyles, children, }) => {
     const contentPaddingX = size === CARDV2_SIZE.SM ? 3 : 4;
@@ -77,23 +77,23 @@ export const CardV2 = ({ size, displayDate, headline, image, alt, layout, onClic
     const baseCardClass = onClick || shouldShowHoverStyle
         ? typeSafeStyles.groupCardWrapperWithHover
         : typeSafeStyles.groupCardWrapper;
-    return (_jsxs(GroupV2, Object.assign({ type: headline || heading ? GROUPV2_TYPE.REGION : GROUPV2_TYPE.GROUP, role: onClick ? 'button' : 'group', onClick: onClick, onKeyDown: (e) => {
+    return (_jsxs(GroupV2, { type: headline || heading ? GROUPV2_TYPE.REGION : GROUPV2_TYPE.GROUP, role: onClick ? 'button' : 'group', onClick: onClick, onKeyDown: (e) => {
             if (onClick && e.key === KEY_CODES.ENTER) {
                 onClick();
             }
-        }, tabIndex: onClick ? 0 : undefined, className: clsx(baseCardClass, className), sx: Object.assign({ boxShadow: raised || heading ? BOX_SHADOW.NORMAL : undefined, width: !isVertical && '100%', backgroundColor: backgroundColor ? backgroundColor : '', flexDirection: layout === CARDV2_LAYOUT.HORIZONTAL ? 'row' : 'column' }, inlineStyles) }, { children: [leftBadge && (_jsx(BoxV2, Object.assign({ className: typeSafeStyles.leftBadge }, { children: leftBadge }))), rightBadge && (_jsx(BoxV2, Object.assign({ className: typeSafeStyles.rightBadge }, { children: rightBadge }))), image && !containImage && (_jsx("img", { src: image, alt: alt, style: {
+        }, tabIndex: onClick ? 0 : undefined, className: clsx(baseCardClass, className), sx: Object.assign({ boxShadow: raised || heading ? BOX_SHADOW.NORMAL : undefined, width: !isVertical && '100%', backgroundColor: backgroundColor ? backgroundColor : '', flexDirection: layout === CARDV2_LAYOUT.HORIZONTAL ? 'row' : 'column' }, inlineStyles), children: [leftBadge && (_jsx(BoxV2, { className: typeSafeStyles.leftBadge, children: leftBadge })), rightBadge && (_jsx(BoxV2, { className: typeSafeStyles.rightBadge, children: rightBadge })), image && !containImage && (_jsx("img", { src: image, alt: alt, style: {
                     width: imageWidth,
                     height: imageHeight,
-                } })), image && containImage && (_jsx(BoxV2, Object.assign({ className: typeSafeStyles.containImageContainer, sx: {
+                } })), image && containImage && (_jsx(BoxV2, { className: typeSafeStyles.containImageContainer, sx: {
                     width: containerWidth ? containerWidth : '',
                     height: containerHeight ? containerHeight : '',
-                } }, { children: _jsx("img", { src: image, alt: alt, style: {
+                }, children: _jsx("img", { src: image, alt: alt, style: {
                         width: imageWidth,
                         height: imageHeight,
                         objectFit: objectFit,
-                    } }) }))), displayDate && _jsx(DateDisplay, { date: displayDate }), heading && (_jsxs(RowV2, Object.assign({ className: typeSafeStyles.headingOuterWrapper, sx: Object.assign({}, headingStyles) }, { children: [_jsxs(RowV2, Object.assign({ align: "center", sx: { px: contentPaddingX } }, { children: [headingIcon && (_jsx(IconV2, { icon: headingIcon, size: FONT_SIZE.LG, color: COLOR.WHITE, className: typeSafeStyles.icon })), _jsx(HeadingV2, Object.assign({ size: HEADINGV2_SIZE.SM, className: typeSafeStyles.heading, sx: {
+                    } }) })), displayDate && _jsx(DateDisplay, { date: displayDate }), heading && (_jsxs(RowV2, { className: typeSafeStyles.headingOuterWrapper, sx: Object.assign({}, headingStyles), children: [_jsxs(RowV2, { align: "center", sx: { px: contentPaddingX }, children: [headingIcon && (_jsx(IconV2, { icon: headingIcon, size: FONT_SIZE.LG, color: COLOR.WHITE, className: typeSafeStyles.icon })), _jsx(HeadingV2, { size: HEADINGV2_SIZE.SM, className: typeSafeStyles.heading, sx: {
                                     mt: 0,
-                                } }, { children: heading }))] })), _jsx(RowV2, Object.assign({ align: "center", sx: { px: contentPaddingX } }, { children: headingAction && headingAction }))] }))), _jsx(RowV2, Object.assign({ sx: { px: contentPaddingX, py: contentPaddingY } }, { children: _jsxs(ColumnV2, Object.assign({ justify: "center" }, { children: [headline && (_jsx(HeadingV2, Object.assign({ typography: typography, sx: Object.assign({ mt: 0, display: '-webkit-box', WebkitBoxOrient: 'vertical', overflow: 'hidden', WebkitLineClamp: truncateHeadlineAfter
+                                }, children: heading })] }), _jsx(RowV2, { align: "center", sx: { px: contentPaddingX }, children: headingAction && headingAction })] })), _jsx(RowV2, { sx: { px: contentPaddingX, py: contentPaddingY }, children: _jsxs(ColumnV2, { justify: "center", children: [headline && (_jsx(HeadingV2, { typography: typography, sx: Object.assign({ mt: 0, display: '-webkit-box', WebkitBoxOrient: 'vertical', overflow: 'hidden', WebkitLineClamp: truncateHeadlineAfter
                                     ? truncateHeadlineAfter
-                                    : 0 }, headlineStyles) }, { children: headline }))), children && (_jsx(BoxV2, Object.assign({ sx: { mt: headline && !heading ? 2 : 0 } }, { children: children })))] })) }))] })));
+                                    : 0 }, headlineStyles), children: headline })), children && (_jsx(BoxV2, { sx: { mt: headline && !heading ? 2 : 0 }, children: children }))] }) })] }));
 };

package/dist/components/composites/DragDropList/DragDrop.test.js

@@ -12,7 +12,7 @@ describe('DragDropList component', () => {
         expect(container).toBeInTheDocument();
     });
     it('should render items correctly', () => {
-        const { getByText } = render(_jsx(DragDropList, { items: items, onReorder: () => { }, children: ({ item }) => _jsx("div", { children: item.accessibleLabel }) }));
+        const { getByText } = render(_jsx(DragDropList, { items: items, onReorder: () => { }, children: ({ item }) => (_jsx("div", { children: item.accessibleLabel })) }));
         items.forEach((item) => {
             expect(getByText(item.accessibleLabel)).toBeInTheDocument();
         });

package/dist/components/composites/DragDropList/DragDropList.stories.d.ts

@@ -1,7 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { DragDropList } from './index';
-declare const meta: Meta<typeof DragDropList>;
+declare const meta: Meta;
 export default meta;
-type Story = StoryObj<typeof DragDropList>;
+type Story = StoryObj;
 export declare const Default: Story;
 export declare const Disabled: Story;

package/dist/components/composites/DragDropList/DragDropList.stories.js

@@ -27,8 +27,8 @@ const StateManager = ({ children }) => {
     return _jsx(_Fragment, { children: children({ items, setItems }) });
 };
 export const Default = {
-    render: () => (_jsx(StateManager, { children: ({ items, setItems }) => (_jsx(DragDropList, Object.assign({ items: items, onReorder: ({ reorderedList }) => setItems(reorderedList) }, { children: ({ item }) => (_jsx(_Fragment, { children: _jsx(Paragraph, Object.assign({ sx: { ml: 2 } }, { children: item.label })) })) }))) })),
+    render: () => (_jsx(StateManager, { children: ({ items, setItems }) => (_jsx(DragDropList, { items: items, onReorder: ({ reorderedList }) => setItems(reorderedList), children: ({ item }) => (_jsx(_Fragment, { children: _jsx(Paragraph, { sx: { ml: 2 }, children: item.label }) })) })) })),
 };
 export const Disabled = {
-    render: () => (_jsx(DragDropList, Object.assign({ disabled: true, items: _items, onReorder: () => { } }, { children: ({ item }) => (_jsxs(_Fragment, { children: [_jsx(DragHandle, {}), _jsx(Paragraph, Object.assign({ sx: { ml: 2 } }, { children: item.label }))] })) }))),
+    render: () => (_jsx(DragDropList, { disabled: true, items: _items, onReorder: () => { }, children: ({ item }) => (_jsxs(_Fragment, { children: [_jsx(DragHandle, {}), _jsx(Paragraph, { sx: { ml: 2 }, children: item.label })] })) })),
 };

package/dist/components/composites/DragDropList/index.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import { DropResult } from 'react-beautiful-dnd';
+import { DropResult } from '@hello-pangea/dnd';
 import { StylesProp } from '../../../theme';
 import { ButtonProps } from '../../elements/Button';
 type DraggableItem = {

package/dist/components/composites/DragDropList/index.js

@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { DragDropContext, Droppable, Draggable, } from 'react-beautiful-dnd';
+import { DragDropContext, Droppable, Draggable, } from '@hello-pangea/dnd';
 import _DragIndicator from '@mui/icons-material/DragIndicator';
 import { BUTTON_TYPE, Button } from '../../elements/Button';
 import { Column } from '../../elements/layout/Column';
@@ -24,7 +24,7 @@ export const DragHandle = (_a) => {
 };
 export function DragDropList({ items, itemIdKey = 'id', wrapperStyles, itemStyles, children: renderChild, onReorder, disabled, }) {
     const id = useUniqueId('dnd-list');
-    return (_jsx(DragDropContext, Object.assign({ onDragStart: (start, provided) => {
+    return (_jsx(DragDropContext, { onDragStart: (start, provided) => {
             const selectedItem = items.find((item) => String(item[itemIdKey]) === start.draggableId);
             provided.announce(`Selected item: ${selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.accessibleLabel}`);
         }, onDragEnd: (e) => {
@@ -39,10 +39,10 @@ export function DragDropList({ items, itemIdKey = 'id', wrapperStyles, itemStyle
                     dropEvent: e,
                 });
             }
-        } }, { children: _jsx(Droppable, Object.assign({ droppableId: id }, { children: (droppable) => (_jsx(Column, Object.assign({}, droppable.droppableProps, { sx: wrapperStyles, ref: droppable.innerRef }, { children: _jsxs(_Fragment, { children: [items.map((item, index) => (_jsx(Draggable, Object.assign({ draggableId: String(item[itemIdKey]), isDragDisabled: disabled, index: index }, { children: (draggable) => {
+        }, children: _jsx(Droppable, { droppableId: id, children: (droppable) => (_jsx(Column, Object.assign({}, droppable.droppableProps, { sx: wrapperStyles, ref: droppable.innerRef, children: _jsxs(_Fragment, { children: [items.map((item, index) => (_jsx(Draggable, { draggableId: String(item[itemIdKey]), isDragDisabled: disabled, index: index, children: (draggable) => {
                                 return (_jsx(Row, Object.assign({ sx: {
                                         alignItems: 'center',
                                         itemStyles,
-                                    }, ref: draggable.innerRef }, draggable.draggableProps, draggable.dragHandleProps, { "aria-describedby": `item-${index}` }, { children: _jsx(Row, Object.assign({ sx: { mt: 1 }, id: `item-${index}` }, { children: renderChild({ item, index }) })) })));
-                            } }), String(item[itemIdKey])))), droppable.placeholder] }) }))) })) })));
+                                    }, ref: draggable.innerRef }, draggable.draggableProps, draggable.dragHandleProps, { "aria-describedby": `item-${index}`, children: _jsx(Row, { sx: { mt: 1 }, id: `item-${index}`, children: renderChild({ item, index }) }) })));
+                            } }, String(item[itemIdKey])))), droppable.placeholder] }) }))) }) }));
 }

package/dist/components/composites/DropdownLinks/DropdownLinks.stories.js

@@ -17,11 +17,11 @@ const options = [
     { value: 'https://facebook.com', label: 'This is intentionally long' },
 ];
 export const Default = {
-    render: () => (_jsx(Box, Object.assign({ sx: { width: '200px', height: '200px' } }, { children: _jsx(DropdownLinks, Object.assign({ options: options }, { children: ({ anchorProps }) => (_jsx(Button, Object.assign({}, anchorProps, { rightIcon: ArrowDropDownIcon }, { children: "Links" }))) })) }))),
+    render: () => (_jsx(Box, { sx: { width: '200px', height: '200px' }, children: _jsx(DropdownLinks, { options: options, children: ({ anchorProps }) => (_jsx(Button, Object.assign({}, anchorProps, { rightIcon: ArrowDropDownIcon, children: "Links" }))) }) })),
 };
 export const Right = {
-    render: () => (_jsx(Row, Object.assign({ sx: { width: '90vw', height: '200px' }, justify: "flex-end" }, { children: _jsx(DropdownLinks, Object.assign({ options: options }, { children: ({ anchorProps }) => (_jsx(Button, Object.assign({}, anchorProps, { rightIcon: ArrowDropDownIcon }, { children: "Links" }))) })) }))),
+    render: () => (_jsx(Row, { sx: { width: '90vw', height: '200px' }, justify: "flex-end", children: _jsx(DropdownLinks, { options: options, children: ({ anchorProps }) => (_jsx(Button, Object.assign({}, anchorProps, { rightIcon: ArrowDropDownIcon, children: "Links" }))) }) })),
 };
 export const OpenInNewTab = {
-    render: () => (_jsx(Box, Object.assign({ sx: { width: '200px', height: '200px' } }, { children: _jsx(DropdownLinks, Object.assign({ options: options, openNewTab: true }, { children: ({ anchorProps }) => _jsx(Button, Object.assign({}, anchorProps, { children: "Links" })) })) }))),
+    render: () => (_jsx(Box, { sx: { width: '200px', height: '200px' }, children: _jsx(DropdownLinks, { options: options, openNewTab: true, children: ({ anchorProps }) => _jsx(Button, Object.assign({}, anchorProps, { children: "Links" })) }) })),
 };

package/dist/components/composites/DropdownLinks/DropdownLinks.test.js

@@ -7,7 +7,7 @@ const options = [
     { value: 'https://google.com', label: 'Google' },
     { value: 'https://facebook.com', label: 'Facebook' },
 ];
-const DropdownExample = (_jsx(DropdownLinks, Object.assign({ options: options }, { children: ({ anchorProps }) => _jsx(Button, Object.assign({}, anchorProps, { children: "Links" })) })));
+const DropdownExample = (_jsx(DropdownLinks, { options: options, children: ({ anchorProps }) => _jsx(Button, Object.assign({}, anchorProps, { children: "Links" })) }));
 describe('DropdownLinks', () => {
     it('toggle links when button is clicked', () => {
         const { getByRole, getAllByRole } = render(DropdownExample);

package/dist/components/composites/DropdownLinks/index.js

@@ -7,9 +7,9 @@ export const DropdownLinks = ({ children, options: optionsParam, renderOption: r
     const { navigate } = useComponentConfig().link;
     const renderOption = renderOptionParam
         ? renderOptionParam
-        : (params) => (_jsx(Link, Object.assign({ to: params.option.value, target: openNewTab ? '_blank' : undefined, onClick: (e) => {
+        : (params) => (_jsx(Link, { to: params.option.value, target: openNewTab ? '_blank' : undefined, onClick: (e) => {
                 e.preventDefault();
-            } }, { children: params.option.label })));
+            }, children: params.option.label }));
     return (_jsx(Dropdown, { shouldRenderDropdownContainer: false, renderAnchor: children, renderDropdown: ({ ref, styles, id, setIsOpen }) => {
             const options = optionsParam.map((option) => (Object.assign(Object.assign({}, option), { onClick: () => {
                     if (option.onClick) {

package/dist/components/composites/DropdownLinksV2/DropdownLinksV2.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { DropdownLinksV2 } from '.';
+declare const meta: Meta<typeof DropdownLinksV2>;
+export default meta;
+type Story = StoryObj<typeof DropdownLinksV2>;
+export declare const Default: Story;
+export declare const Right: Story;
+export declare const OpenInNewTab: Story;

package/dist/components/composites/DropdownLinksV2/DropdownLinksV2.stories.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import { DropdownLinksV2 } from '.';
+import { ButtonV2 } from '../../elements/ButtonV2';
+import { BoxV2 } from '../../elements/BoxV2';
+import { RowV2 } from '../../elements/RowV2';
+import { UIVersion2 } from '../../../utils/decorators/UIVersion2';
+const meta = {
+    title: 'Composites/DropdownLinksV2',
+    component: DropdownLinksV2,
+    tags: ['autodocs'],
+    decorators: [UIVersion2],
+};
+export default meta;
+const options = [
+    { value: 'https://google.com', label: 'Google' },
+    { value: 'https://facebook.com', label: 'This is intentionally long' },
+];
+export const Default = {
+    render: () => (_jsx(BoxV2, { sx: { width: '200px', height: '200px' }, children: _jsx(DropdownLinksV2, { options: options, children: ({ anchorProps }) => (_jsx(ButtonV2, Object.assign({}, anchorProps, { rightIcon: ArrowDropDownIcon, children: "Links" }))) }) })),
+};
+export const Right = {
+    render: () => (_jsx(RowV2, { sx: { width: '90vw', height: '200px' }, justify: "flex-end", children: _jsx(DropdownLinksV2, { options: options, children: ({ anchorProps }) => (_jsx(ButtonV2, Object.assign({}, anchorProps, { rightIcon: ArrowDropDownIcon, children: "Links" }))) }) })),
+};
+export const OpenInNewTab = {
+    render: () => (_jsx(BoxV2, { sx: { width: '200px', height: '200px' }, children: _jsx(DropdownLinksV2, { options: options, openNewTab: true, children: ({ anchorProps }) => _jsx(ButtonV2, Object.assign({}, anchorProps, { children: "Links" })) }) })),
+};

package/dist/components/composites/DropdownLinksV2/index.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { BasicOption, RenderOption } from '../../elements/option';
+import { StyledElementPropsV2 } from '../../../theme';
+type AnchorProps = Omit<React.HTMLAttributes<HTMLButtonElement>, 'color'>;
+type LinkOption = BasicOption<string>;
+type DropdownChildrenFn = (params: {
+    anchorProps: AnchorProps;
+}) => React.ReactNode;
+type DropdownLinksV2Props = StyledElementPropsV2<HTMLDivElement, {
+    options: BasicOption<string>[];
+    renderOption?: RenderOption<string, LinkOption>;
+    openNewTab?: boolean;
+}, DropdownChildrenFn>;
+export declare const DropdownLinksV2: React.FC<DropdownLinksV2Props>;
+export {};

package/dist/components/composites/DropdownLinksV2/index.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ListBoxV2 } from '../../elements/ListBoxV2';
+import { useComponentConfigV2 } from '../../providers/componentConfigV2';
+import { DropdownV2 } from '../../elements/DropdownV2';
+export const DropdownLinksV2 = ({ children, options: optionsParam, renderOption: renderOptionParam, openNewTab, role = 'navigation', }) => {
+    const { navigate } = useComponentConfigV2().link;
+    const renderOption = renderOptionParam
+        ? renderOptionParam
+        : (params) => (_jsx("a", { href: params.option.value, target: openNewTab ? '_blank' : undefined, style: { textDecoration: 'none', fontWeight: 700 }, onClick: (e) => {
+                e.preventDefault();
+            }, children: params.option.label }));
+    return (_jsx(DropdownV2, { shouldRenderDropdownContainer: false, renderAnchor: children, renderDropdown: ({ ref, styles, id, setIsOpen }) => {
+            const options = optionsParam.map((option) => (Object.assign(Object.assign({}, option), { onClick: () => {
+                    if (option.onClick) {
+                        option.onClick();
+                    }
+                    else if (openNewTab) {
+                        window.open(option.value, '_blank');
+                    }
+                    else {
+                        navigate(option.value);
+                    }
+                    setIsOpen(false);
+                } })));
+            return (_jsx(ListBoxV2, { role: role, id: id, options: options, ref: ref, renderOption: renderOption, style: styles }));
+        } }));
+};

package/dist/components/composites/EmptyState/EmptyState.stories.js

@@ -24,7 +24,7 @@ export const CustomMessage = {
     args: {},
 };
 export const JsxMessage = {
-    render: () => (_jsxs(EmptyState, { children: ["Something is wrong.", ' ', _jsx(Link, Object.assign({ to: "/", sx: { fontSize: FONT_SIZE.MD } }, { children: "Click here to fix." }))] })),
+    render: () => (_jsxs(EmptyState, { children: ["Something is wrong.", ' ', _jsx(Link, { to: "/", sx: { fontSize: FONT_SIZE.MD }, children: "Click here to fix." })] })),
     args: {},
 };
 export const CustomIcon = {

package/dist/components/composites/EmptyState/index.js

@@ -28,8 +28,8 @@ export const DEFAULT_MESSAGE = 'No results found.';
 export const EmptyState = (_a) => {
     var { omitIcon, icon, children, size: sizeProp, sx } = _a, rest = __rest(_a, ["omitIcon", "icon", "children", "size", "sx"]);
     const size = sizeProp || EMPTY_STATE_SIZE.LG;
-    return (_jsxs(Column, Object.assign({ sx: Object.assign({ width: '100%', alignItems: 'center', justifyContent: 'center', mt: size === EMPTY_STATE_SIZE.SM ? 3 : 5 }, sx) }, rest, { children: [_jsx(Row, { children: omitIcon ? null : (_jsx(Icon, { icon: icon || SearchOffIcon, size: size === EMPTY_STATE_SIZE.SM ? FONT_SIZE.ML : FONT_SIZE.XL, color: COLOR.GRAY })) }), _jsx(Row, Object.assign({ sx: { mt: size === EMPTY_STATE_SIZE.SM ? 0 : 1 } }, { children: _jsx(Paragraph, Object.assign({ sx: {
+    return (_jsxs(Column, Object.assign({ sx: Object.assign({ width: '100%', alignItems: 'center', justifyContent: 'center', mt: size === EMPTY_STATE_SIZE.SM ? 3 : 5 }, sx) }, rest, { children: [_jsx(Row, { children: omitIcon ? null : (_jsx(Icon, { icon: icon || SearchOffIcon, size: size === EMPTY_STATE_SIZE.SM ? FONT_SIZE.ML : FONT_SIZE.XL, color: COLOR.GRAY })) }), _jsx(Row, { sx: { mt: size === EMPTY_STATE_SIZE.SM ? 0 : 1 }, children: _jsx(Paragraph, { sx: {
                         color: COLOR.GRAY,
                         mt: 0,
-                    }, size: size === EMPTY_STATE_SIZE.SM ? PARAGRAPH_SIZE.MD : PARAGRAPH_SIZE.LG }, { children: children || DEFAULT_MESSAGE })) }))] })));
+                    }, size: size === EMPTY_STATE_SIZE.SM ? PARAGRAPH_SIZE.MD : PARAGRAPH_SIZE.LG, children: children || DEFAULT_MESSAGE }) })] })));
 };

package/dist/components/composites/Modal/Modal.stories.js

@@ -17,7 +17,7 @@ const ModalExample = () => {
     const modalId = 'modal-example';
     const { open, close, state } = useDialog(modalId);
     const theme = useTheme();
-    return (_jsxs(_Fragment, { children: [_jsx(Button, Object.assign({ onClick: open, sx: { position: 'relative', zIndex: (_a = theme.zIndex) === null || _a === void 0 ? void 0 : _a.DIALOG } }, { children: "Open Modal" })), _jsx(Modal, Object.assign({ isOpen: state.isOpen, heading: "Heading", close: close, actions: [
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: open, sx: { position: 'relative', zIndex: (_a = theme.zIndex) === null || _a === void 0 ? void 0 : _a.DIALOG }, children: "Open Modal" }), _jsx(Modal, { isOpen: state.isOpen, heading: "Heading", close: close, actions: [
                     {
                         label: 'Secondary',
                         isPrimary: false,
@@ -35,7 +35,7 @@ const ModalExample = () => {
                         isPrimary: true,
                         onClick: () => { },
                     },
-                ] }, { children: _jsx(Paragraph, { children: "Modal body goes here" }) }))] }));
+                ], children: _jsx(Paragraph, { children: "Modal body goes here" }) })] }));
 };
 export const Default = {
     render: () => _jsx(ModalExample, {}),

package/dist/components/composites/Modal/Modal.test.js

@@ -10,23 +10,23 @@ describe('Modal', () => {
         { label: 'Action 2', onClick: vi.fn() },
     ];
     it('renders modal with heading and content', () => {
-        const { getByText } = render(_jsx(Modal, Object.assign({ isOpen: true, close: handleClose, heading: "Test Heading" }, { children: _jsx("div", { children: "Modal Content" }) })));
+        const { getByText } = render(_jsx(Modal, { isOpen: true, close: handleClose, heading: "Test Heading", children: _jsx("div", { children: "Modal Content" }) }));
         expect(getByText('Test Heading')).toBeInTheDocument();
         expect(getByText('Modal Content')).toBeInTheDocument();
     });
     it('calls close handler when close button is clicked', () => {
-        const { getByText } = render(_jsx(Modal, Object.assign({ isOpen: true, close: handleClose, heading: "Test Heading" }, { children: _jsx("div", { children: "Modal Content" }) })));
+        const { getByText } = render(_jsx(Modal, { isOpen: true, close: handleClose, heading: "Test Heading", children: _jsx("div", { children: "Modal Content" }) }));
         const closeButton = getByText('Close');
         fireEvent.click(closeButton);
         expect(handleClose).toHaveBeenCalledTimes(1);
     });
     it('renders actions correctly', () => {
-        const { getByText } = render(_jsx(Modal, Object.assign({ isOpen: true, close: handleClose, heading: "Test Heading", actions: mockActions }, { children: _jsx("div", { children: "Modal Content" }) })));
+        const { getByText } = render(_jsx(Modal, { isOpen: true, close: handleClose, heading: "Test Heading", actions: mockActions, children: _jsx("div", { children: "Modal Content" }) }));
         expect(getByText('Action 1')).toBeInTheDocument();
         expect(getByText('Action 2')).toBeInTheDocument();
     });
     it('calls action handler when action button is clicked', () => {
-        const { getByText } = render(_jsx(Modal, Object.assign({ isOpen: true, close: handleClose, heading: "Test Heading", actions: mockActions }, { children: _jsx("div", { children: "Modal Content" }) })));
+        const { getByText } = render(_jsx(Modal, { isOpen: true, close: handleClose, heading: "Test Heading", actions: mockActions, children: _jsx("div", { children: "Modal Content" }) }));
         const actionButton1 = getByText('Action 1');
         fireEvent.click(actionButton1);
         expect(mockActions[0].onClick).toHaveBeenCalledTimes(1);

package/dist/components/composites/Modal/index.js

@@ -29,19 +29,19 @@ export const Modal = (_a) => {
     const { modal } = useComponentConfig();
     const theme = useTheme();
     const shouldShowFooter = footer !== undefined || (actions !== undefined && actions.length > 0);
-    const modalBody = (_jsxs(Group, Object.assign({ type: GROUP_TYPE.REGION, sx: { my: 0 } }, { children: [!hideHeading && (_jsxs(Row, Object.assign({ justify: "space-between", align: "center", sx: {
+    const modalBody = (_jsxs(Group, { type: GROUP_TYPE.REGION, sx: { my: 0 }, children: [!hideHeading && (_jsxs(Row, { justify: "space-between", align: "center", sx: {
                     p: 3,
                     borderBottom: 'solid 1px',
                     borderColor: COLOR.LIGHT_GRAY,
-                } }, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.SM, typography: TYPOGRAPHY_TYPE.CONTROL_MEDIUM, sx: { mt: 0 } }, { children: heading })), _jsx(Button, Object.assign({ type: BUTTON_TYPE.TEXT, onClick: (e) => {
+                }, children: [_jsx(Heading, { size: HEADING_SIZE.SM, typography: TYPOGRAPHY_TYPE.CONTROL_MEDIUM, sx: { mt: 0 }, children: heading }), _jsx(Button, { type: BUTTON_TYPE.TEXT, onClick: (e) => {
                             e.preventDefault();
                             e.stopPropagation();
                             close(e);
-                        } }, { children: "Close" }))] }))), _jsx(Row, Object.assign({ sx: Object.assign({ p: 3 }, bodyStyles) }, { children: children })), shouldShowFooter && (_jsxs(Row, Object.assign({ sx: { borderTop: 'solid 1px', borderColor: COLOR.LIGHT_GRAY, p: 3 } }, { children: [footer, actions !== undefined && (_jsx(Row, Object.assign({ sx: { width: '100%', justifyContent: 'flex-end' } }, { children: actions.map((action, index) => (_jsx(Button, Object.assign({ type: action.isPrimary ? BUTTON_TYPE.DEFAULT : BUTTON_TYPE.OUTLINE, onClick: (e) => {
+                        }, children: "Close" })] })), _jsx(Row, { sx: Object.assign({ p: 3 }, bodyStyles), children: children }), shouldShowFooter && (_jsxs(Row, { sx: { borderTop: 'solid 1px', borderColor: COLOR.LIGHT_GRAY, p: 3 }, children: [footer, actions !== undefined && (_jsx(Row, { sx: { width: '100%', justifyContent: 'flex-end' }, children: actions.map((action, index) => (_jsx(Button, Object.assign({ type: action.isPrimary ? BUTTON_TYPE.DEFAULT : BUTTON_TYPE.OUTLINE, onClick: (e) => {
                                 action.onClick(e);
                             }, sx: {
                                 mr: index < actions.length - 1 ? 1 : 0,
-                            } }, action.buttonProps, { children: action.label }), index))) })))] })))] })));
+                            } }, action.buttonProps, { children: action.label }), index))) }))] }))] }));
     return (_jsx(ReactModal, Object.assign({ isOpen: isOpen, shouldFocusAfterRender: true, appElement: modal.appElement, onRequestClose: (e) => {
             e.preventDefault();
             e.stopPropagation();
@@ -61,5 +61,5 @@ export const Modal = (_a) => {
                 marginRight: '-50%',
                 transform: 'translate(-50%, -50%)',
             },
-        } }, { children: wrapWithTheme ? _jsx(ThemeProvider, { children: modalBody }) : modalBody })));
+        }, children: wrapWithTheme ? _jsx(ThemeProvider, { children: modalBody }) : modalBody })));
 };

package/dist/components/composites/ModalV2/ModalV2.stories.js

@@ -15,7 +15,7 @@ export default meta;
 const ModalV2Example = () => {
     const modalId = 'modal-example';
     const { open, close, state } = useDialog(modalId);
-    return (_jsxs(_Fragment, { children: [_jsx(ButtonV2, Object.assign({ onClick: open, sx: { position: 'relative', zIndex: Z_INDEX.DIALOG } }, { children: "Open Modal" })), _jsx(ModalV2, Object.assign({ isOpen: state.isOpen, heading: "Heading", close: close, actions: [
+    return (_jsxs(_Fragment, { children: [_jsx(ButtonV2, { onClick: open, sx: { position: 'relative', zIndex: Z_INDEX.DIALOG }, children: "Open Modal" }), _jsx(ModalV2, { isOpen: state.isOpen, heading: "Heading", close: close, actions: [
                     {
                         label: 'Secondary',
                         isPrimary: false,
@@ -33,7 +33,7 @@ const ModalV2Example = () => {
                         isPrimary: true,
                         onClick: () => { },
                     },
-                ] }, { children: _jsx(ParagraphV2, { children: "Modal body goes here" }) }))] }));
+                ], children: _jsx(ParagraphV2, { children: "Modal body goes here" }) })] }));
 };
 export const Default = {
     render: () => _jsx(ModalV2Example, {}),