@dnanpm/styleguide 3.9.0 → 3.9.2

package/build/cjs/components/Accordion/Accordion.js

@@ -9,7 +9,12 @@ var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
 var AccordionItem = require('../AccordionItem/AccordionItem.js');
 
-const AccordionContainer = styled.div `
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
+const AccordionContainer = styled__default.default.div `
     ${p => p.type === 'box' &&
     styled.css `
             & > * {
@@ -58,14 +63,14 @@ const Accordion = (_a) => {
     const accordionItems = React.Children.map(props.children, (child, index) => {
         if (React.isValidElement(child) && child.type === AccordionItem.default) {
             const id = getAccordionItemId(index, child.props.title);
-            return (React.createElement(AccordionItem.default, { id: id, key: id, type: type, title: child.props.title, isExpanded: itemList[id], highlightSelected: highlightSelected, hasCloseButton: hasCloseButton, openLabel: props.openLabel, closeLabel: props.closeLabel, onClick: handleClick, onKeyDown: handleKeyDown, className: child.props.className }, child.props.children));
+            return (React__default.default.createElement(AccordionItem.default, { id: id, key: id, type: type, title: child.props.title, isExpanded: itemList[id], highlightSelected: highlightSelected, hasCloseButton: hasCloseButton, openLabel: props.openLabel, closeLabel: props.closeLabel, onClick: handleClick, onKeyDown: handleKeyDown, className: child.props.className }, child.props.children));
         }
         return null;
     });
     if (!accordionItems) {
         return null;
     }
-    return (React.createElement(AccordionContainer, { type: type, className: props.className }, accordionItems));
+    return (React__default.default.createElement(AccordionContainer, { type: type, className: props.className }, accordionItems));
 };
 
 exports.default = Accordion;

package/build/cjs/components/AccordionItem/AccordionItem.js

@@ -12,13 +12,18 @@ var styledUtils = require('../../utils/styledUtils.js');
 var Box = require('../Box/Box.js');
 var Icon = require('../Icon/Icon.js');
 
-const AccordionItemContainer = styled.div `
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
+const AccordionItemContainer = styled__default.default.div `
     ${p => p.type === 'panel' &&
     styled.css `
             border-bottom: 1px solid ${theme.default.color.line.L02};
         `}
 `;
-const AccordionItemTitle = styled.div `
+const AccordionItemTitle = styled__default.default.div `
     font-size: ${theme.default.fontSize.default};
     line-height: ${theme.default.lineHeight.default};
     font-weight: ${theme.default.fontWeight.bold};
@@ -39,17 +44,17 @@ const AccordionItemTitle = styled.div `
             }
         `}
 `;
-const AccordionItemContentWrapper = styled.div `
+const AccordionItemContentWrapper = styled__default.default.div `
     overflow: hidden;
     transition: all 0.2s ease;
     height: ${p => (p.isExpanded ? p.maxHeight / 16 + 1.25 : 0)}rem;
     padding: 0 ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2)};
     visibility: ${p => (p.isExpanded ? 'visible' : 'hidden')};
 `;
-const AccordionItemContent = styled.div `
+const AccordionItemContent = styled__default.default.div `
     padding-bottom: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1.6)};
 `;
-const AccordionItemCloseButton = styled.div `
+const AccordionItemCloseButton = styled__default.default.div `
     display: flex;
     justify-content: flex-end;
     line-height: ${theme.default.lineHeight.default};
@@ -64,16 +69,16 @@ const AccordionItem = (_a) => {
     const contentRef = React.useRef(null);
     // Get height when element dimensions change
     const { height: contentHeight } = useResizeObserver.default(contentRef);
-    const itemContent = (React.createElement(AccordionItemContainer, { id: props.id, type: type, "aria-expanded": Boolean(props.isExpanded), className: props.className },
-        React.createElement(AccordionItemTitle, { tabIndex: 0, onClick: props.onClick, onKeyDown: props.onKeyDown, isExpanded: Boolean(props.isExpanded), highlightSelected: highlightSelected, role: "button" },
+    const itemContent = (React__default.default.createElement(AccordionItemContainer, { id: props.id, type: type, "aria-expanded": Boolean(props.isExpanded), className: props.className },
+        React__default.default.createElement(AccordionItemTitle, { tabIndex: 0, onClick: props.onClick, onKeyDown: props.onKeyDown, isExpanded: Boolean(props.isExpanded), highlightSelected: highlightSelected, role: "button" },
             props.title,
-            props.isExpanded ? (React.createElement(Icon.default, { icon: icons.ChevronUp, color: theme.default.color.default.black, position: "right", "aria-label": props.closeLabel })) : (React.createElement(Icon.default, { icon: icons.ChevronDown, color: theme.default.color.default.black, position: "right", "aria-label": props.openLabel }))),
-        React.createElement(AccordionItemContentWrapper, { maxHeight: contentHeight, isExpanded: props.isExpanded },
-            React.createElement(AccordionItemContent, { ref: contentRef }, props.children)),
-        hasCloseButton && props.isExpanded && (React.createElement(AccordionItemCloseButton, { tabIndex: 0, onClick: props.onClick, onKeyDown: props.onKeyDown, "aria-label": props.closeLabel, role: "button" },
-            React.createElement("span", null, props.closeLabel),
-            React.createElement(Icon.default, { icon: icons.Close })))));
-    return type === 'box' ? (React.createElement(Box.default, { elevation: props.isExpanded ? 'low' : 'none', padding: "0" }, itemContent)) : (itemContent);
+            props.isExpanded ? (React__default.default.createElement(Icon.default, { icon: icons.ChevronUp, color: theme.default.color.default.black, position: "right", "aria-label": props.closeLabel })) : (React__default.default.createElement(Icon.default, { icon: icons.ChevronDown, color: theme.default.color.default.black, position: "right", "aria-label": props.openLabel }))),
+        React__default.default.createElement(AccordionItemContentWrapper, { maxHeight: contentHeight, isExpanded: props.isExpanded },
+            React__default.default.createElement(AccordionItemContent, { ref: contentRef }, props.children)),
+        hasCloseButton && props.isExpanded && (React__default.default.createElement(AccordionItemCloseButton, { tabIndex: 0, onClick: props.onClick, onKeyDown: props.onKeyDown, "aria-label": props.closeLabel, role: "button" },
+            React__default.default.createElement("span", null, props.closeLabel),
+            React__default.default.createElement(Icon.default, { icon: icons.Close })))));
+    return type === 'box' ? (React__default.default.createElement(Box.default, { elevation: props.isExpanded ? 'low' : 'none', padding: "0" }, itemContent)) : (itemContent);
 };
 
 exports.default = AccordionItem;

package/build/cjs/components/AmountSelector/AmountSelector.js

@@ -11,6 +11,10 @@ var styledUtils = require('../../utils/styledUtils.js');
 var ButtonArrow = require('../ButtonArrow/ButtonArrow.js');
 var Icon = require('../Icon/Icon.js');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
 const Container = styled.default.div `
     display: flex;
     width: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 12)};
@@ -103,11 +107,11 @@ const AmountSelector = (_a) => {
             onChange(min);
         }
     };
-    return (React.createElement(Container, { "data-testid": dataTestId, className: props.className },
-        React.createElement(Button, { icon: React.createElement(Icon.default, { icon: props.removable && isMinReached(value - step) ? icons.Trash : icons.Minus, size: styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2) }), variant: "secondary", onClick: decrease, disabled: disabled, type: "button", "data-testid": dataTestId &&
+    return (React__default.default.createElement(Container, { "data-testid": dataTestId, className: props.className },
+        React__default.default.createElement(Button, { icon: React__default.default.createElement(Icon.default, { icon: props.removable && isMinReached(value - step) ? icons.Trash : icons.Minus, size: styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2) }), variant: "secondary", onClick: decrease, disabled: disabled, type: "button", "data-testid": dataTestId &&
                 `${dataTestId}${props.removable && isMinReached(value - step) ? '-remove' : '-decrease'}` }),
-        React.createElement(Input, { id: props.id, name: props.name, type: "number", onChange: handleChange, value: value, readOnly: readonly || disabled, disabled: disabled }),
-        React.createElement(Button, { icon: React.createElement(Icon.default, { icon: icons.Plus, size: styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2) }), variant: "secondary", onClick: increase, disabled: disabled, type: "button", "data-testid": dataTestId ? `${dataTestId}-increase` : undefined })));
+        React__default.default.createElement(Input, { id: props.id, name: props.name, type: "number", onChange: handleChange, value: value, readOnly: readonly || disabled, disabled: disabled }),
+        React__default.default.createElement(Button, { icon: React__default.default.createElement(Icon.default, { icon: icons.Plus, size: styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2) }), variant: "secondary", onClick: increase, disabled: disabled, type: "button", "data-testid": dataTestId ? `${dataTestId}-increase` : undefined })));
 };
 
 exports.default = AmountSelector;

package/build/cjs/components/Box/Box.js

@@ -9,7 +9,12 @@ var theme = require('../../themes/theme.js');
 var common = require('../../utils/common.js');
 var styledUtils = require('../../utils/styledUtils.js');
 
-const BoxWrapper = styled.div `
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
+const BoxWrapper = styled__default.default.div `
     border: 1px solid ${theme.default.color.line.L04};
     ${({ width }) => width && `width: ${width}`};
     ${({ height }) => height && `height: ${height}`};
@@ -21,7 +26,7 @@ const BoxWrapper = styled.div `
 `;
 const Box = (_a) => {
     var { elevation = 'none', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["elevation", 'data-testid']);
-    return (React.createElement(BoxWrapper, { id: props.id, "$elevation": elevation, shadow: props.shadow, width: props.width, height: props.height, margin: props.margin, padding: props.padding, className: props.className, "data-testid": dataTestId }, props.children));
+    return (React__default.default.createElement(BoxWrapper, { id: props.id, "$elevation": elevation, shadow: props.shadow, width: props.width, height: props.height, margin: props.margin, padding: props.padding, className: props.className, "data-testid": dataTestId }, props.children));
 };
 
 exports.default = Box;

package/build/cjs/components/Button/Button.d.ts

@@ -78,6 +78,10 @@ export interface Props {
      * Allows to pass testid string for testing purposes
      */
     'data-testid'?: string;
+    /**
+     * Allows to pass any data-* attribute
+     */
+    dataAttributes?: Record<`data-${string}`, string>;
 }
 export declare const shade: {
     pink: {

package/build/cjs/components/Button/Button.js

@@ -9,6 +9,11 @@ var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
 var PixelLoader = require('../PixelLoader/PixelLoader.js');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
 // Only Button component specific shades to be used on user interaction styles
 const shade = {
     pink: {
@@ -26,7 +31,7 @@ const shade = {
         },
     },
 };
-const Element = styled.button `
+const Element = styled__default.default.button `
     display: inline-block;
     font-family: ${theme.default.fontFamily.default};
     font-weight: ${theme.default.fontWeight.bold};
@@ -118,10 +123,10 @@ const Element = styled.button `
 /** @visibleName Button */
 const Button = (_a) => {
     var { type = 'submit', 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue } = _a, props = tslib.__rest(_a, ["type", 'data-testid', 'data-no-close', 'data-track-value']);
-    return (React.createElement(Element, Object.assign({ id: props.id, as: props.href ? 'a' : undefined, type: props.href ? undefined : type, href: props.href, onClick: props.onClick, onMouseDown: props.onMouseDown, small: props.small, darkBg: props.darkBg, fullWidth: props.fullWidth, "$loading": props.loading, tabIndex: props.loading ? -1 : 0, "data-loading": props.loading, className: props.className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue }, (!props.href && {
+    return (React__default.default.createElement(Element, Object.assign({ id: props.id, as: props.href ? 'a' : undefined, type: props.href ? undefined : type, href: props.href, onClick: props.onClick, onMouseDown: props.onMouseDown, small: props.small, darkBg: props.darkBg, fullWidth: props.fullWidth, "$loading": props.loading, tabIndex: props.loading ? -1 : 0, "data-loading": props.loading, className: props.className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue }, props.dataAttributes, (!props.href && {
         name: props.name,
         disabled: props.disabled,
-    })), props.loading ? (React.createElement(PixelLoader.default, { color: props.darkBg ? theme.default.color.default.white : theme.default.color.default.plum })) : (React.createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, props.children))));
+    })), props.loading ? (React__default.default.createElement(PixelLoader.default, { color: props.darkBg ? theme.default.color.default.white : theme.default.color.default.plum })) : (React__default.default.createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, props.children))));
 };
 
 exports.default = Button;

package/build/cjs/components/ButtonArrow/ButtonArrow.js

@@ -12,6 +12,11 @@ var ButtonPrimary = require('../ButtonPrimary/ButtonPrimary.js');
 var ButtonSecondary = require('../ButtonSecondary/ButtonSecondary.js');
 var Icon = require('../Icon/Icon.js');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
 const iconsMap = {
     up: icons.ChevronUp,
     right: icons.ChevronRight,
@@ -30,7 +35,7 @@ const overrideStyles = `
     align-items: center;
 `;
 const buttonsMap = {
-    primary: styled(ButtonPrimary.default) `
+    primary: styled__default.default(ButtonPrimary.default) `
         ${overrideStyles};
         border-radius: ${theme.default.radius.circle};
 
@@ -39,7 +44,7 @@ const buttonsMap = {
             color: ${theme.default.color.text.black};
         }
     `,
-    secondary: styled(ButtonSecondary.default) `
+    secondary: styled__default.default(ButtonSecondary.default) `
         ${overrideStyles};
         color: ${theme.default.color.text.black};
         border: 1px solid ${theme.default.color.line.L01};
@@ -68,7 +73,7 @@ const buttonsMap = {
 const ButtonArrow = (_a) => {
     var { variant = 'primary', 'data-testid': dataTestId, 'data-track-value': dataTrackValue } = _a, props = tslib.__rest(_a, ["variant", 'data-testid', 'data-track-value']);
     const Element = buttonsMap[variant];
-    return (React.createElement(Element, { id: props.id, href: props.href, name: props.name, type: props.type, onClick: props.onClick, onMouseDown: props.onMouseDown, darkBg: props.darkBg, disabled: props.disabled, className: props.className, "data-testid": dataTestId, "data-track-value": dataTrackValue }, props.direction ? (React.createElement(Icon.default, { icon: iconsMap[props.direction], size: "1rem" })) : (React.isValidElement(props.icon) && props.icon.type === Icon.default && props.icon)));
+    return (React__default.default.createElement(Element, { id: props.id, href: props.href, name: props.name, type: props.type, onClick: props.onClick, onMouseDown: props.onMouseDown, darkBg: props.darkBg, disabled: props.disabled, className: props.className, "data-testid": dataTestId, "data-track-value": dataTrackValue, dataAttributes: props.dataAttributes }, props.direction ? (React__default.default.createElement(Icon.default, { icon: iconsMap[props.direction], size: "1rem" })) : (React.isValidElement(props.icon) && props.icon.type === Icon.default && props.icon)));
 };
 
 exports.default = ButtonArrow;

package/build/cjs/components/ButtonCard/ButtonCard.d.ts

@@ -63,6 +63,10 @@ interface Props {
      * Allows to pass testid string for testing purposes
      */
     'data-testid'?: string;
+    /**
+     * Allows to pass any data-* attribute
+     */
+    dataAttributes?: Record<`data-${string}`, string>;
 }
 /** @visibleName Button Card */
 declare const ButtonCard: ({ type, size, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;

package/build/cjs/components/ButtonCard/ButtonCard.js

@@ -10,7 +10,12 @@ var theme = require('../../themes/theme.js');
 var Box = require('../Box/Box.js');
 var Icon = require('../Icon/Icon.js');
 
-const ButtonCardWrapper = styled.button `
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
+const ButtonCardWrapper = styled__default.default.button `
     display: block;
     padding: 0;
     border: 0 none;
@@ -38,7 +43,7 @@ const ButtonCardWrapper = styled.button `
         text-decoration: none;
     }
 `;
-const StyledBox = styled(Box.default) `
+const StyledBox = styled__default.default(Box.default) `
     display: flex;
     gap: ${({ size }) => (size === 'small' ? '0.313rem' : '1rem')};
     border: 1px solid ${theme.default.color.line.L03};
@@ -46,13 +51,13 @@ const StyledBox = styled(Box.default) `
     ${({ size }) => size === 'small' && 'flex-direction: column'};
     ${({ size }) => size !== 'small' && 'align-items: center'};
 `;
-const VisualContent = styled.div `
+const VisualContent = styled__default.default.div `
     display: flex;
     align-items: center;
     width: ${({ size }) => (size === 'small' ? '2.5rem' : '3.75rem')};
     height: ${({ size }) => (size === 'small' ? '2.5rem' : '3.75rem')};
 `;
-const TextContentWrapper = styled.div `
+const TextContentWrapper = styled__default.default.div `
     display: flex;
     flex-grow: 1;
     align-items: center;
@@ -60,13 +65,13 @@ const TextContentWrapper = styled.div `
     gap: ${({ size }) => (size === 'small' ? '0.625rem' : '1rem')};
     min-width: 0;
 `;
-const TextContent = styled.div `
+const TextContent = styled__default.default.div `
     display: flex;
     align-items: flex-start;
     flex-direction: column;
     min-width: 0;
 `;
-const Title = styled.div `
+const Title = styled__default.default.div `
     font-size: ${theme.default.fontSize.default};
     line-height: ${theme.default.lineHeight.default};
     font-weight: ${theme.default.fontWeight.bold};
@@ -88,7 +93,7 @@ const Title = styled.div `
         font-size: ${theme.default.fontSize.xl};
     `};
 `;
-const Subtitle = styled.div `
+const Subtitle = styled__default.default.div `
     color: ${theme.default.color.text.gray};
     font-size: ${theme.default.fontSize.s};
     line-height: ${theme.default.lineHeight.s};
@@ -110,7 +115,7 @@ const Subtitle = styled.div `
         font-size: ${theme.default.fontSize.default};
     `};
 `;
-const CtaIcon = styled(Icon.default) `
+const CtaIcon = styled__default.default(Icon.default) `
     color: ${theme.default.color.text.pink};
 
     ${ButtonCardWrapper}:hover & {
@@ -120,16 +125,16 @@ const CtaIcon = styled(Icon.default) `
 /** @visibleName Button Card */
 const ButtonCard = (_a) => {
     var { type = 'submit', size = 'medium', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["type", "size", 'data-testid']);
-    return (React.createElement(ButtonCardWrapper, Object.assign({ id: props.id, as: props.href ? 'a' : undefined, type: props.href ? undefined : type, href: props.href, onClick: props.onClick, className: props.className, "data-testid": dataTestId }, (!props.href && {
+    return (React__default.default.createElement(ButtonCardWrapper, Object.assign({ id: props.id, as: props.href ? 'a' : undefined, type: props.href ? undefined : type, href: props.href, onClick: props.onClick, className: props.className, "data-testid": dataTestId }, props.dataAttributes, (!props.href && {
         name: props.name,
     })),
-        React.createElement(StyledBox, { elevation: "low", size: size },
-            React.createElement(VisualContent, { size: size, "data-testid": dataTestId && `${dataTestId}-content` }, props.children),
-            React.createElement(TextContentWrapper, { size: size },
-                React.createElement(TextContent, null,
-                    React.createElement(Title, { size: size, "data-testid": dataTestId && `${dataTestId}-title` }, props.title),
-                    props.subtitle && (React.createElement(Subtitle, { size: size, "data-testid": dataTestId && `${dataTestId}-subtitle` }, props.subtitle))),
-                React.createElement(CtaIcon, { icon: props.isExternal ? icons.Open : icons.ChevronRight, size: size === 'small' ? '1rem' : '1.5rem', "data-testid": dataTestId && `${dataTestId}-cta` })))));
+        React__default.default.createElement(StyledBox, { elevation: "low", size: size },
+            React__default.default.createElement(VisualContent, { size: size, "data-testid": dataTestId && `${dataTestId}-content` }, props.children),
+            React__default.default.createElement(TextContentWrapper, { size: size },
+                React__default.default.createElement(TextContent, null,
+                    React__default.default.createElement(Title, { size: size, "data-testid": dataTestId && `${dataTestId}-title` }, props.title),
+                    props.subtitle && (React__default.default.createElement(Subtitle, { size: size, "data-testid": dataTestId && `${dataTestId}-subtitle` }, props.subtitle))),
+                React__default.default.createElement(CtaIcon, { icon: props.isExternal ? icons.Open : icons.ChevronRight, size: size === 'small' ? '1rem' : '1.5rem', "data-testid": dataTestId && `${dataTestId}-cta` })))));
 };
 
 exports.default = ButtonCard;

package/build/cjs/components/ButtonClose/ButtonClose.js

@@ -8,6 +8,10 @@ var styled = require('../../themes/styled.js');
 var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
 const ButtonElement = styled.default.button `
     position: absolute;
     top: 0;
@@ -22,7 +26,7 @@ const ButtonElement = styled.default.button `
 /** @visibleName Button Close */
 const ButtonClose = (_a) => {
     var { 'data-testid': dataTestId, 'aria-label': ariaLabel } = _a, props = tslib.__rest(_a, ['data-testid', 'aria-label']);
-    return (React.createElement(ButtonElement, { id: props.id, name: props.name, onClick: props.onClick, onMouseDown: props.onMouseDown, className: props.className, "data-testid": dataTestId, "aria-label": ariaLabel }, props.children));
+    return (React__default.default.createElement(ButtonElement, { id: props.id, name: props.name, onClick: props.onClick, onMouseDown: props.onMouseDown, className: props.className, "data-testid": dataTestId, "aria-label": ariaLabel }, props.children));
 };
 
 exports.default = ButtonClose;

package/build/cjs/components/ButtonIcon/ButtonIcon.js

@@ -11,7 +11,12 @@ var styledUtils = require('../../utils/styledUtils.js');
 var Icon = require('../Icon/Icon.js');
 var PixelLoader = require('../PixelLoader/PixelLoader.js');
 
-const ButtonElement = styled.button `
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
+const ButtonElement = styled__default.default.button `
     display: inline-flex;
     align-items: center;
     font-family: ${theme.default.fontFamily.default};
@@ -87,9 +92,9 @@ const ButtonElement = styled.button `
 const ButtonIcon = (_a) => {
     var { icon = icons.EditUnderline, 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue } = _a, props = tslib.__rest(_a, ["icon", 'data-testid', 'data-no-close', 'data-track-value']);
     const position = props.isReversed ? 'right' : 'left';
-    return (React.createElement(ButtonElement, { id: props.id, name: props.name, type: props.type, onClick: props.onClick, onMouseDown: props.onMouseDown, small: props.small, darkBg: props.darkBg, "$loading": props.loading, tabIndex: props.loading ? -1 : 0, "data-loading": props.loading, disabled: props.disabled, hideChildrenMobile: props.hideChildrenMobile, isReversed: props.isReversed, className: props.className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue }, props.loading ? (React.createElement(PixelLoader.default, { color: props.darkBg ? theme.default.color.default.white : theme.default.color.default.black })) : (React.createElement(React.Fragment, null,
-        React.createElement(Icon.default, { icon: icon, color: props.darkBg ? theme.default.color.default.white : theme.default.color.default.pink, size: props.small ? '1.25rem' : '1.5rem', position: props.children ? position : undefined }),
-        props.children && (React.createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, props.children))))));
+    return (React__default.default.createElement(ButtonElement, Object.assign({ id: props.id, name: props.name, type: props.type, onClick: props.onClick, onMouseDown: props.onMouseDown, small: props.small, darkBg: props.darkBg, "$loading": props.loading, tabIndex: props.loading ? -1 : 0, "data-loading": props.loading, disabled: props.disabled, hideChildrenMobile: props.hideChildrenMobile, isReversed: props.isReversed, className: props.className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue }, props.dataAttributes), props.loading ? (React__default.default.createElement(PixelLoader.default, { color: props.darkBg ? theme.default.color.default.white : theme.default.color.default.black })) : (React__default.default.createElement(React__default.default.Fragment, null,
+        React__default.default.createElement(Icon.default, { icon: icon, color: props.darkBg ? theme.default.color.default.white : theme.default.color.default.pink, size: props.small ? '1.25rem' : '1.5rem', position: props.children ? position : undefined }),
+        props.children && (React__default.default.createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, props.children))))));
 };
 
 exports.default = ButtonIcon;

package/build/cjs/components/ButtonPrimary/ButtonPrimary.js

@@ -6,8 +6,12 @@ var styled = require('styled-components');
 var theme = require('../../themes/theme.js');
 var Button = require('../Button/Button.js');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
 /** @visibleName Button Primary */
-const ButtonPrimary = styled(Button.default) `
+const ButtonPrimary = styled__default.default(Button.default) `
     color: ${theme.default.color.text.white};
     background-color: ${theme.default.color.default.pink};
     border: 2px solid ${theme.default.color.default.pink};

package/build/cjs/components/ButtonRound/ButtonRound.js

@@ -9,7 +9,12 @@ var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
 var ButtonPrimary = require('../ButtonPrimary/ButtonPrimary.js');
 
-const ButtonElement = styled(ButtonPrimary.default) `
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
+const ButtonElement = styled__default.default(ButtonPrimary.default) `
     display: flex;
     min-width: initial;
     width: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 3.2)};
@@ -27,7 +32,7 @@ const ButtonElement = styled(ButtonPrimary.default) `
  */
 const ButtonRound = (_a) => {
     var { 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue } = _a, props = tslib.__rest(_a, ['data-testid', 'data-no-close', 'data-track-value']);
-    return (React.createElement(ButtonElement, { id: props.id, name: props.name, type: props.type, onClick: props.onClick, onMouseDown: props.onMouseDown, darkBg: props.darkBg, disabled: props.disabled, className: props.className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue }, props.children));
+    return (React__default.default.createElement(ButtonElement, { id: props.id, name: props.name, type: props.type, onClick: props.onClick, onMouseDown: props.onMouseDown, darkBg: props.darkBg, disabled: props.disabled, className: props.className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue }, props.children));
 };
 
 exports.default = ButtonRound;

package/build/cjs/components/ButtonSecondary/ButtonSecondary.js

@@ -6,8 +6,12 @@ var styled = require('styled-components');
 var theme = require('../../themes/theme.js');
 var Button = require('../Button/Button.js');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
 /** @visibleName Button Secondary */
-const ButtonSecondary = styled(Button.default) `
+const ButtonSecondary = styled__default.default(Button.default) `
     color: ${theme.default.color.text.plum};
     background-color: ${theme.default.color.background.sand.E02};
     border: 2px solid ${theme.default.color.line.L02};

package/build/cjs/components/Carousel/Carousel.js

@@ -12,6 +12,10 @@ var styledUtils = require('../../utils/styledUtils.js');
 var ButtonArrow = require('../ButtonArrow/ButtonArrow.js');
 var ButtonIcon = require('../ButtonIcon/ButtonIcon.js');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
 const CarouselWrapper = styled.default.div ``;
 const Header = styled.default.div `
     display: flex;
@@ -290,20 +294,20 @@ const Carousel = (_a) => {
             setElementTransform(knobRef, slidesTransform / data.scrollbarToSlidesRatio);
         }
     }, [currentIndex, data, itemWidthCorrection, props.children, slideScreensCount, visibleItems]);
-    return (React.createElement(CarouselWrapper, { id: props.id, className: props.className, "data-testid": dataTestId },
-        React.createElement(Header, { "data-testid": dataTestId && `${dataTestId}-header` },
-            props.title && React.createElement(Title, null, props.title),
-            React.createElement(Navigation, null,
-                React.createElement(ButtonArrow.default, { direction: "left", "aria-label": "Previous", onClick: handleNavigationButtonPreviousClick, disabled: currentIndex <= 0 }),
-                React.createElement(ButtonArrow.default, { direction: "right", "aria-label": "Next", onClick: handleNavigationButtonNextClick, disabled: currentIndex + visibleItems >= React.Children.count(props.children) }))),
-        React.createElement(Content, { "data-testid": dataTestId && `${dataTestId}-content` },
-            React.createElement(SlidesWrapper, { ref: slidesWrapperRef, onPointerDown: handleSlidesPointerDown, gap: slidesWrapperGapSizePx / 16 }, React.Children.map(props.children, child => (React.createElement(SlideItem, { visibleItems: visibleItems, itemWidthCorrection: itemWidthCorrection }, child))))),
-        React.createElement(Footer, { "data-testid": dataTestId && `${dataTestId}-footer` },
-            React.createElement(Pagination, null, [...Array(slideScreensCount).keys()].map((value, index) => (React.createElement(PaginationItem, { key: value, "aria-label": `Move to step ${index + 1}`, "aria-current": index === currentIndex, isActive: index === currentIndex, onClick: handlePaginationItemClick })))),
-            React.createElement(Scrollbar, { ref: scrollbarRef, onPointerDown: handleScrollbarPointerDown },
-                React.createElement(Knob, { ref: knobRef, knobSize: slideScreensCount })),
-            props.footerButton && (React.createElement(FooterButton, null,
-                React.createElement(ButtonIcon.default, { icon: icons.ArrowRight, onClick: props.onFooterButtonClick }, props.footerButton))))));
+    return (React__default.default.createElement(CarouselWrapper, { id: props.id, className: props.className, "data-testid": dataTestId },
+        React__default.default.createElement(Header, { "data-testid": dataTestId && `${dataTestId}-header` },
+            props.title && React__default.default.createElement(Title, null, props.title),
+            React__default.default.createElement(Navigation, null,
+                React__default.default.createElement(ButtonArrow.default, { direction: "left", "aria-label": "Previous", onClick: handleNavigationButtonPreviousClick, disabled: currentIndex <= 0 }),
+                React__default.default.createElement(ButtonArrow.default, { direction: "right", "aria-label": "Next", onClick: handleNavigationButtonNextClick, disabled: currentIndex + visibleItems >= React.Children.count(props.children) }))),
+        React__default.default.createElement(Content, { "data-testid": dataTestId && `${dataTestId}-content` },
+            React__default.default.createElement(SlidesWrapper, { ref: slidesWrapperRef, onPointerDown: handleSlidesPointerDown, gap: slidesWrapperGapSizePx / 16 }, React.Children.map(props.children, child => (React__default.default.createElement(SlideItem, { visibleItems: visibleItems, itemWidthCorrection: itemWidthCorrection }, child))))),
+        React__default.default.createElement(Footer, { "data-testid": dataTestId && `${dataTestId}-footer` },
+            React__default.default.createElement(Pagination, null, [...Array(slideScreensCount).keys()].map((value, index) => (React__default.default.createElement(PaginationItem, { key: value, "aria-label": `Move to step ${index + 1}`, "aria-current": index === currentIndex, isActive: index === currentIndex, onClick: handlePaginationItemClick })))),
+            React__default.default.createElement(Scrollbar, { ref: scrollbarRef, onPointerDown: handleScrollbarPointerDown },
+                React__default.default.createElement(Knob, { ref: knobRef, knobSize: slideScreensCount })),
+            props.footerButton && (React__default.default.createElement(FooterButton, null,
+                React__default.default.createElement(ButtonIcon.default, { icon: icons.ArrowRight, onClick: props.onFooterButtonClick }, props.footerButton))))));
 };
 
 exports.default = Carousel;

package/build/cjs/components/Checkbox/Checkbox.js

@@ -9,6 +9,10 @@ var styled = require('../../themes/styled.js');
 var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
 // TODO: Implement proper svg icon after https://jira.dna.fi/browse/STYLE-238 is done
 const SVGIconData = () => {
     const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="16px" height="16px">` +
@@ -51,13 +55,13 @@ const Checkbox = (_a) => {
             props.onChange(!props.value);
         }
     };
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Container, null,
-            React.createElement(Input, { id: props.id, name: props.name, type: "checkbox", className: props.className, checked: Boolean(props.value), "aria-checked": Boolean(props.value), onChange: handleChange, disabled: props.disabled, "data-testid": dataTestId }),
-            React.createElement("label", { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label` },
+    return (React__default.default.createElement(React__default.default.Fragment, null,
+        React__default.default.createElement(Container, null,
+            React__default.default.createElement(Input, { id: props.id, name: props.name, type: "checkbox", className: props.className, checked: Boolean(props.value), "aria-checked": Boolean(props.value), onChange: handleChange, disabled: props.disabled, "data-testid": dataTestId }),
+            React__default.default.createElement("label", { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label` },
                 props.label,
-                props.required && React.createElement(Mandatory, null, "*"))),
-        props.error && props.errorMessage && (React.createElement(ErrorMessage, { "data-testid": dataTestId && `${dataTestId}-error` }, props.errorMessage))));
+                props.required && React__default.default.createElement(Mandatory, null, "*"))),
+        props.error && props.errorMessage && (React__default.default.createElement(ErrorMessage, { "data-testid": dataTestId && `${dataTestId}-error` }, props.errorMessage))));
 };
 
 exports.default = Checkbox;

package/build/cjs/components/Chip/Chip.js

@@ -8,6 +8,11 @@ var styled = require('styled-components');
 var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
 const getStyling = ({ $type, $variant, }) => {
     const stylingColor = $type === 'default' ? theme.default.color.line.L01 : theme.default.color.notification[$type];
     const border = `border: 2px solid ${stylingColor};`;
@@ -15,7 +20,7 @@ const getStyling = ({ $type, $variant, }) => {
     const color = `color: ${$variant === 'outlined' ? theme.default.color.text.black : theme.default.color.text.white};`;
     return `${border}${background}${color}`;
 };
-const Element = styled.div `
+const Element = styled__default.default.div `
     display: inline-block;
     border-radius: ${theme.default.radius.pill};
     padding: 1px ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1)};
@@ -29,7 +34,7 @@ const Element = styled.div `
 `;
 const Chip = (_a) => {
     var { type = 'default', variant = 'outlined', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["type", "variant", 'data-testid']);
-    return (React.createElement(Element, { id: props.id, "$type": type, "$variant": variant, onClick: props.onClick, className: props.className, "data-testid": dataTestId }, props.children));
+    return (React__default.default.createElement(Element, { id: props.id, "$type": type, "$variant": variant, onClick: props.onClick, className: props.className, "data-testid": dataTestId }, props.children));
 };
 
 exports.default = Chip;