@dnanpm/styleguide 3.7.2 → 3.8.2

package/README.md

@@ -1,21 +1,40 @@
-# DNA Styleguide
-
-Styles and styled components for DNA.
+DNA Styleguide repository provides the set of components and theme object used in various DNA projects.
 
 ## Installation
 
-1. Run install command in repository where styleguide should be added
-    - Example 
-    ```shell
-    npm install @dnanpm/styleguide
-    ```
+Run install command in repository where DNA Styleguide should be added
+
+```shell
+npm install @dnanpm/styleguide
+```
+
+## Documentation
+
+> [!NOTE]
+> Requires access to DNA Cloud URL!
+
+### Interactive documentation and API
+
+See latest version of [DNA Styleguide](https://styleguide.devkube.kauppa5test.acs.dnacloud.fi/latest/) for theme documentation, API and interactive documentation of components.
+
+### Changelog
+
+See [Changelog](https://styleguide.devkube.kauppa5test.acs.dnacloud.fi/latest/#/Changelog) for current major version changes, or [Changelog Archive](https://styleguide.devkube.kauppa5test.acs.dnacloud.fi/latest/#/Changelog%20archive) for old major versions' changes.
+
+### Migration guide
+
+See [Migration guide](https://styleguide.devkube.kauppa5test.acs.dnacloud.fi/latest/#/Migration%20Guide) for more information about how to migrate between major versions of DNA Styleguide.
+
+### Contribution guide
+
+See [Contribution guide](https://styleguide.devkube.kauppa5test.acs.dnacloud.fi/latest/#/Contribution%20guide) for more information about how to contribute to DNA Styleguide.
 
 ## Usage example
 
 ### Theme
 
 ```js
-import { createStyled, theme as defaultTheme } from '@dnanpm/styleguide';
+import { theme as defaultTheme } from '@dnanpm/styleguide';
 
 const color = {
     ...defaultTheme.color,
@@ -34,7 +53,6 @@ const theme = {
 };
 
 export type ThemeInterface = typeof theme;
-export const { styled, css } = createStyled<ThemeInterface>();
 export default theme;
 ```
 
@@ -54,7 +72,7 @@ class MyApp {
 }
 ```
 
-### Button
+### Component
 
 ```js
 import { ButtonPrimary } from '@dnanpm/styleguide';
@@ -73,14 +91,3 @@ const MyComponent = ({
 
 export default MyComponent;
 ```
-
-## IE11 Support NextJS
-
-In `next.config.js` you need to use [next-transpile-modules](https://www.npmjs.com/package/next-transpile-modules) package to allow nextjs to be able to transpile styleguide and related es6 modules based on babel config.
-
-```js
-// next.config.js
-const withTM = require('next-transpile-modules')(['@dnanpm/styleguide', "react-spring"]);
-
-module.exports = withTM();
-```

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

@@ -9,16 +9,11 @@ var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
 var AccordionItem = require('../AccordionItem/AccordionItem.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-const AccordionContainer = styled__default["default"].div `
+const AccordionContainer = styled.div `
     ${p => p.type === 'box' &&
     styled.css `
             & > * {
-                margin: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1)} 0;
+                margin: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1)} 0;
             }
 
             & > *:first-of-type {
@@ -37,7 +32,7 @@ const Accordion = (_a) => {
     const getAccordionItemId = (index, title) => `${title.replace(/\s+/g, '')}-${index}`;
     if (props.isExpanded) {
         React.Children.map(props.children, (child, index) => {
-            if (React.isValidElement(child) && child.type === AccordionItem["default"]) {
+            if (React.isValidElement(child) && child.type === AccordionItem.default) {
                 initialItemList[getAccordionItemId(index, child.props.title)] = Boolean(props.isExpanded);
             }
         });
@@ -61,16 +56,16 @@ const Accordion = (_a) => {
         }
     };
     const accordionItems = React.Children.map(props.children, (child, index) => {
-        if (React.isValidElement(child) && child.type === AccordionItem["default"]) {
+        if (React.isValidElement(child) && child.type === AccordionItem.default) {
             const id = getAccordionItemId(index, child.props.title);
-            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 (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 null;
     });
     if (!accordionItems) {
         return null;
     }
-    return (React__default["default"].createElement(AccordionContainer, { type: type, className: props.className }, accordionItems));
+    return (React.createElement(AccordionContainer, { type: type, className: props.className }, accordionItems));
 };
 
-exports["default"] = Accordion;
+exports.default = Accordion;

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

@@ -12,55 +12,50 @@ var styledUtils = require('../../utils/styledUtils.js');
 var Box = require('../Box/Box.js');
 var Icon = require('../Icon/Icon.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-const AccordionItemContainer = styled__default["default"].div `
+const AccordionItemContainer = styled.div `
     ${p => p.type === 'panel' &&
     styled.css `
-            border-bottom: 1px solid ${theme["default"].color.line.L02};
+            border-bottom: 1px solid ${theme.default.color.line.L02};
         `}
 `;
-const AccordionItemTitle = styled__default["default"].div `
-    font-size: ${theme["default"].fontSize.default};
-    line-height: ${theme["default"].lineHeight.default};
-    font-weight: ${theme["default"].fontWeight.bold};
+const AccordionItemTitle = styled.div `
+    font-size: ${theme.default.fontSize.default};
+    line-height: ${theme.default.lineHeight.default};
+    font-weight: ${theme.default.fontWeight.bold};
     display: flex;
     justify-content: space-between;
     flex-direction: row;
     cursor: pointer;
-    padding: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1.6)}
-        ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 2)};
-    color: ${p => p.isExpanded && p.highlightSelected ? theme["default"].color.default.pink : theme["default"].color.default.black};
+    padding: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1.6)}
+        ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2)};
+    color: ${p => p.isExpanded && p.highlightSelected ? theme.default.color.default.pink : theme.default.color.default.black};
     transition: color 0.2s;
     ${p => p.highlightSelected &&
     styled.css `
             &:hover,
             &:active {
-                color: ${theme["default"].color.default.pink};
+                color: ${theme.default.color.default.pink};
                 text-decoration: none;
             }
         `}
 `;
-const AccordionItemContentWrapper = styled__default["default"].div `
+const AccordionItemContentWrapper = styled.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)};
+    padding: 0 ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2)};
     visibility: ${p => (p.isExpanded ? 'visible' : 'hidden')};
 `;
-const AccordionItemContent = styled__default["default"].div `
-    padding-bottom: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1.6)};
+const AccordionItemContent = styled.div `
+    padding-bottom: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1.6)};
 `;
-const AccordionItemCloseButton = styled__default["default"].div `
+const AccordionItemCloseButton = styled.div `
     display: flex;
     justify-content: flex-end;
-    line-height: ${theme["default"].lineHeight.default};
-    margin-bottom: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1.6)};
-    padding: 0 ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 2)};
-    gap: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1)};
+    line-height: ${theme.default.lineHeight.default};
+    margin-bottom: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1.6)};
+    padding: 0 ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2)};
+    gap: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1)};
     cursor: pointer;
 `;
 /** @visibleName Accordion Item */
@@ -68,17 +63,17 @@ const AccordionItem = (_a) => {
     var { type = 'box', hasCloseButton = false, highlightSelected = type === 'panel' } = _a, props = tslib.__rest(_a, ["type", "hasCloseButton", "highlightSelected"]);
     const contentRef = React.useRef(null);
     // Get height when element dimensions change
-    const { height: contentHeight } = useResizeObserver["default"](contentRef);
-    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" },
+    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" },
             props.title,
-            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);
+            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);
 };
 
-exports["default"] = AccordionItem;
+exports.default = AccordionItem;

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

@@ -11,23 +11,19 @@ var styledUtils = require('../../utils/styledUtils.js');
 var ButtonArrow = require('../Button/ButtonArrow.js');
 var Icon = require('../Icon/Icon.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-const Container = styled["default"].div `
+const Container = styled.default.div `
     display: flex;
-    width: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 12)};
+    width: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 12)};
 `;
-const Button = styled["default"](ButtonArrow["default"]) `
+const Button = styled.default(ButtonArrow.default) `
     display: inline-flex;
-    width: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 4)};
-    height: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 4)};
+    width: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 4)};
+    height: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 4)};
     border-radius: 0;
 
     &:first-of-type {
-        border-top-left-radius: ${theme["default"].radius.s};
-        border-bottom-left-radius: ${theme["default"].radius.s};
+        border-top-left-radius: ${theme.default.radius.s};
+        border-bottom-left-radius: ${theme.default.radius.s};
 
         &:focus {
             z-index: 2;
@@ -35,32 +31,32 @@ const Button = styled["default"](ButtonArrow["default"]) `
     }
 
     &:last-of-type {
-        border-top-right-radius: ${theme["default"].radius.s};
-        border-bottom-right-radius: ${theme["default"].radius.s};
+        border-top-right-radius: ${theme.default.radius.s};
+        border-bottom-right-radius: ${theme.default.radius.s};
     }
 `;
-const Input = styled["default"].input `
-    width: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 4)};
-    height: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 4)};
-    font-family: ${theme["default"].fontFamily.default};
-    font-size: ${theme["default"].fontSize.default};
+const Input = styled.default.input `
+    width: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 4)};
+    height: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 4)};
+    font-family: ${theme.default.fontFamily.default};
+    font-size: ${theme.default.fontSize.default};
     text-align: center;
     border: 0 none;
     border-radius: 0;
-    border-top: 1px solid ${theme["default"].color.line.L01};
-    border-bottom: 1px solid ${theme["default"].color.line.L01};
+    border-top: 1px solid ${theme.default.color.line.L01};
+    border-bottom: 1px solid ${theme.default.color.line.L01};
 
     &:focus {
-        border: 2px solid ${theme["default"].color.focus.light};
-        box-shadow: 0px 0px 0px 2px ${theme["default"].color.focus.dark};
+        border: 2px solid ${theme.default.color.focus.light};
+        box-shadow: 0px 0px 0px 2px ${theme.default.color.focus.dark};
         outline: none;
         z-index: 2;
     }
 
     &:disabled,
     &[disabled] {
-        background-color: ${theme["default"].color.background.sand.E02 + theme["default"].color.transparency.T30};
-        border: 1px solid ${theme["default"].color.line.L02 + theme["default"].color.transparency.T30};
+        background-color: ${theme.default.color.background.sand.E02 + theme.default.color.transparency.T30};
+        border: 1px solid ${theme.default.color.line.L02 + theme.default.color.transparency.T30};
     }
 
     &:read-only {
@@ -107,11 +103,11 @@ const AmountSelector = (_a) => {
             onChange(min);
         }
     };
-    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 &&
+    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 &&
                 `${dataTestId}${props.removable && isMinReached(value - step) ? '-remove' : '-decrease'}` }),
-        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 })));
+        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 })));
 };
 
-exports["default"] = AmountSelector;
+exports.default = AmountSelector;

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

@@ -9,24 +9,19 @@ var theme = require('../../themes/theme.js');
 var common = require('../../utils/common.js');
 var styledUtils = require('../../utils/styledUtils.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-const BoxWrapper = styled__default["default"].div `
-    border: 1px solid ${theme["default"].color.line.L04};
+const BoxWrapper = styled.div `
+    border: 1px solid ${theme.default.color.line.L04};
     ${({ width }) => width && `width: ${width}`};
     ${({ height }) => height && `height: ${height}`};
     ${({ margin }) => margin && `margin: ${margin}`};
-    padding: ${({ padding }) => padding || styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 2)};
-    background-color: ${theme["default"].color.default.white};
-    border-radius: ${theme["default"].radius.default};
-    ${({ $elevation, shadow }) => $elevation !== 'none' && common["default"]({ elevation: $elevation, shadow })}
+    padding: ${({ padding }) => padding || styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2)};
+    background-color: ${theme.default.color.default.white};
+    border-radius: ${theme.default.radius.default};
+    ${({ $elevation, shadow }) => $elevation !== 'none' && common.default({ elevation: $elevation, shadow })}
 `;
 const Box = (_a) => {
     var { elevation = 'none', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["elevation", 'data-testid']);
-    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));
+    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));
 };
 
-exports["default"] = Box;
+exports.default = Box;

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

@@ -9,11 +9,6 @@ var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
 var PixelLoader = require('../PixelLoader/PixelLoader.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
 // Only Button component specific shades to be used on user interaction styles
 const shade = {
     pink: {
@@ -31,66 +26,66 @@ const shade = {
         },
     },
 };
-const Element = styled__default["default"].button `
+const Element = styled.button `
     display: inline-block;
-    font-family: ${theme["default"].fontFamily.default};
-    font-weight: ${theme["default"].fontWeight.bold};
-    font-size: ${({ small }) => (small ? theme["default"].fontSize.s : theme["default"].fontSize.default)};
-    line-height: ${({ small }) => (small ? theme["default"].lineHeight.xs : theme["default"].lineHeight.default)};
-    min-width: ${({ small }) => styledUtils.getMultipliedSize(theme["default"].base.baseWidth, small ? 10 : 12.8)};
+    font-family: ${theme.default.fontFamily.default};
+    font-weight: ${theme.default.fontWeight.bold};
+    font-size: ${({ small }) => (small ? theme.default.fontSize.s : theme.default.fontSize.default)};
+    line-height: ${({ small }) => (small ? theme.default.lineHeight.xs : theme.default.lineHeight.default)};
+    min-width: ${({ small }) => styledUtils.getMultipliedSize(theme.default.base.baseWidth, small ? 10 : 12.8)};
     width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
     cursor: pointer;
-    color: ${({ darkBg }) => (darkBg ? theme["default"].color.text.white : theme["default"].color.text.plum)};
+    color: ${({ darkBg }) => (darkBg ? theme.default.color.text.white : theme.default.color.text.plum)};
     background-color: transparent;
-    border-radius: ${theme["default"].radius.pill};
+    border-radius: ${theme.default.radius.pill};
     border: 2px solid
-        ${({ darkBg }) => (darkBg ? theme["default"].color.default.white : theme["default"].color.default.plum)};
-    padding: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 0.6)}
-        ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 2)};
+        ${({ darkBg }) => (darkBg ? theme.default.color.default.white : theme.default.color.default.plum)};
+    padding: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 0.6)}
+        ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2)};
 
     > span {
         display: inline-flex;
     }
 
     &:focus {
-        color: ${({ darkBg }) => (darkBg ? theme["default"].color.text.plum : theme["default"].color.text.white)};
-        background-color: ${({ darkBg }) => darkBg ? theme["default"].color.default.white : shade.plum.darker};
+        color: ${({ darkBg }) => (darkBg ? theme.default.color.text.plum : theme.default.color.text.white)};
+        background-color: ${({ darkBg }) => darkBg ? theme.default.color.default.white : shade.plum.darker};
         border: 2px solid
-            ${({ darkBg }) => (darkBg ? theme["default"].color.focus.dark : theme["default"].color.focus.light)};
+            ${({ darkBg }) => (darkBg ? theme.default.color.focus.dark : theme.default.color.focus.light)};
         box-shadow: 0px 0px 0px 2px
-            ${({ darkBg }) => (darkBg ? theme["default"].color.focus.light : theme["default"].color.focus.dark)};
+            ${({ darkBg }) => (darkBg ? theme.default.color.focus.light : theme.default.color.focus.dark)};
         outline: none;
     }
 
     &:hover {
-        color: ${({ darkBg }) => (darkBg ? theme["default"].color.text.plum : theme["default"].color.text.white)};
-        background-color: ${({ darkBg }) => darkBg ? theme["default"].color.default.white : shade.plum.darker};
+        color: ${({ darkBg }) => (darkBg ? theme.default.color.text.plum : theme.default.color.text.white)};
+        background-color: ${({ darkBg }) => darkBg ? theme.default.color.default.white : shade.plum.darker};
 
         &:focus {
             border: 2px solid
-                ${({ darkBg }) => (darkBg ? theme["default"].color.focus.dark : theme["default"].color.focus.light)};
+                ${({ darkBg }) => (darkBg ? theme.default.color.focus.dark : theme.default.color.focus.light)};
             box-shadow: 0px 0px 0px 2px
-                ${({ darkBg }) => (darkBg ? theme["default"].color.focus.light : theme["default"].color.focus.dark)};
+                ${({ darkBg }) => (darkBg ? theme.default.color.focus.light : theme.default.color.focus.dark)};
         }
     }
 
     &:active {
-        color: ${({ darkBg }) => (darkBg ? theme["default"].color.text.plum : theme["default"].color.text.white)};
-        background-color: ${({ darkBg }) => darkBg ? theme["default"].color.default.white + theme["default"].color.transparency.T90 : shade.plum.lighter};
+        color: ${({ darkBg }) => (darkBg ? theme.default.color.text.plum : theme.default.color.text.white)};
+        background-color: ${({ darkBg }) => darkBg ? theme.default.color.default.white + theme.default.color.transparency.T90 : shade.plum.lighter};
         border: 2px solid
             ${({ darkBg }) => darkBg
-    ? theme["default"].color.default.white + theme["default"].color.transparency.T90
+    ? theme.default.color.default.white + theme.default.color.transparency.T90
     : shade.plum.lighter};
         outline: none;
     }
 
     &:disabled,
     &[disabled] {
-        color: ${({ darkBg }) => darkBg ? theme["default"].color.text.white + theme["default"].color.transparency.T70 : theme["default"].color.text.gray};
+        color: ${({ darkBg }) => darkBg ? theme.default.color.text.white + theme.default.color.transparency.T70 : theme.default.color.text.gray};
         border: 2px solid
             ${({ darkBg }) => darkBg
-    ? theme["default"].color.default.white + theme["default"].color.transparency.T30
-    : theme["default"].color.default.plum + theme["default"].color.transparency.T30};
+    ? theme.default.color.default.white + theme.default.color.transparency.T30
+    : theme.default.color.default.plum + theme.default.color.transparency.T30};
         pointer-events: none;
     }
 
@@ -123,11 +118,11 @@ const Element = styled__default["default"].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__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.href && {
+    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 && {
         name: props.name,
         disabled: props.disabled,
-    })), 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))));
+    })), 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))));
 };
 
-exports["default"] = Button;
+exports.default = Button;
 exports.shade = shade;

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

@@ -12,11 +12,6 @@ var Icon = require('../Icon/Icon.js');
 var ButtonPrimary = require('./ButtonPrimary.js');
 var ButtonSecondary = require('./ButtonSecondary.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
 const iconsMap = {
     up: icons.ChevronUp,
     right: icons.ChevronRight,
@@ -26,8 +21,8 @@ const iconsMap = {
 const overrideStyles = `
     display: flex;
     min-width: initial;
-    width: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 3.2)};
-    height: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 3.2)};
+    width: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 3.2)};
+    height: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 3.2)};
     padding: initial;
     text-align: center;
     vertical-align: middle;
@@ -35,37 +30,37 @@ const overrideStyles = `
     align-items: center;
 `;
 const buttonsMap = {
-    primary: styled__default["default"](ButtonPrimary["default"]) `
+    primary: styled(ButtonPrimary.default) `
         ${overrideStyles};
-        border-radius: ${theme["default"].radius.circle};
+        border-radius: ${theme.default.radius.circle};
 
         &:disabled,
         &[disabled] {
-            color: ${theme["default"].color.text.black};
+            color: ${theme.default.color.text.black};
         }
     `,
-    secondary: styled__default["default"](ButtonSecondary["default"]) `
+    secondary: styled(ButtonSecondary.default) `
         ${overrideStyles};
-        color: ${theme["default"].color.text.black};
-        border: 1px solid ${theme["default"].color.line.L01};
-        border-radius: ${theme["default"].radius.s};
+        color: ${theme.default.color.text.black};
+        border: 1px solid ${theme.default.color.line.L01};
+        border-radius: ${theme.default.radius.s};
 
         &:focus {
-            color: ${theme["default"].color.text.black};
+            color: ${theme.default.color.text.black};
         }
 
         &:hover {
-            color: ${theme["default"].color.text.black};
+            color: ${theme.default.color.text.black};
         }
 
         &:active {
-            color: ${theme["default"].color.text.black};
-            border: 1px solid ${theme["default"].color.line.L01};
+            color: ${theme.default.color.text.black};
+            border: 1px solid ${theme.default.color.line.L01};
         }
 
         &:disabled,
         &[disabled] {
-            border: 1px solid ${theme["default"].color.line.L02 + theme["default"].color.transparency.T30};
+            border: 1px solid ${theme.default.color.line.L02 + theme.default.color.transparency.T30};
         }
     `,
 };
@@ -73,7 +68,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__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 }, 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)));
+    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)));
 };
 
-exports["default"] = ButtonArrow;
+exports.default = ButtonArrow;

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

@@ -8,15 +8,11 @@ var styled = require('../../themes/styled.js');
 var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-const ButtonElement = styled["default"].button `
+const ButtonElement = styled.default.button `
     position: absolute;
     top: 0;
     right: 0;
-    margin: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1)};
+    margin: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1)};
     display: inline-flex;
     cursor: pointer;
     background: none;
@@ -26,7 +22,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__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));
+    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));
 };
 
-exports["default"] = ButtonClose;
+exports.default = ButtonClose;