@dnanpm/styleguide 3.7.2 → 3.8.2

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

@@ -11,23 +11,18 @@ var styledUtils = require('../../utils/styledUtils.js');
 var Icon = require('../Icon/Icon.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);
-
-const ButtonElement = styled__default["default"].button `
+const ButtonElement = styled.button `
     display: inline-flex;
     align-items: center;
-    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)};
+    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)};
     cursor: pointer;
-    color: ${({ darkBg }) => (darkBg ? theme["default"].color.text.white : theme["default"].color.text.black)};
+    color: ${({ darkBg }) => (darkBg ? theme.default.color.text.white : theme.default.color.text.black)};
     background-color: transparent;
     border: 2px solid transparent;
-    padding: ${styledUtils.getDividedSize(theme["default"].base.baseWidth, 5)} 0;
+    padding: ${styledUtils.getDividedSize(theme.default.base.baseWidth, 5)} 0;
 
     & svg {
         pointer-events: none;
@@ -36,12 +31,12 @@ const ButtonElement = styled__default["default"].button `
     ${({ isReversed }) => isReversed && `flex-direction: row-reverse;`}
 
     &:focus {
-        border-radius: ${theme["default"].radius.s};
+        border-radius: ${theme.default.radius.s};
         text-decoration: underline;
         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;
     }
 
@@ -51,13 +46,13 @@ const ButtonElement = styled__default["default"].button `
 
     &:active {
         color: ${({ darkBg }) => darkBg
-    ? theme["default"].color.text.white + theme["default"].color.transparency.T90
-    : theme["default"].color.text.black + theme["default"].color.transparency.T80};
+    ? theme.default.color.text.white + theme.default.color.transparency.T90
+    : theme.default.color.text.black + theme.default.color.transparency.T80};
     }
 
     &: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};
         pointer-events: none;
     }
 
@@ -92,9 +87,9 @@ const ButtonElement = styled__default["default"].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__default["default"].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__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))))));
+    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))))));
 };
 
-exports["default"] = ButtonIcon;
+exports.default = ButtonIcon;

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

@@ -6,51 +6,47 @@ var styled = require('styled-components');
 var theme = require('../../themes/theme.js');
 var Button = require('./Button.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
 /** @visibleName Button Primary */
-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};
+const ButtonPrimary = styled(Button.default) `
+    color: ${theme.default.color.text.white};
+    background-color: ${theme.default.color.default.pink};
+    border: 2px solid ${theme.default.color.default.pink};
 
     &:focus {
-        color: ${theme["default"].color.text.white};
-        background-color: ${theme["default"].color.default.pink};
+        color: ${theme.default.color.text.white};
+        background-color: ${theme.default.color.default.pink};
     }
 
     &:hover {
-        color: ${theme["default"].color.text.white};
+        color: ${theme.default.color.text.white};
         background-color: ${Button.shade.pink.darker};
         border: 2px solid ${Button.shade.pink.darker};
     }
 
     &:active {
-        color: ${theme["default"].color.text.white};
+        color: ${theme.default.color.text.white};
         background-color: ${Button.shade.pink.lighter};
         border: 2px solid ${Button.shade.pink.lighter};
     }
 
     &:disabled,
     &[disabled] {
-        background-color: ${theme["default"].color.default.pink + theme["default"].color.transparency.T30};
-        border: 2px solid ${theme["default"].color.default.pink + theme["default"].color.transparency.T30};
+        background-color: ${theme.default.color.default.pink + theme.default.color.transparency.T30};
+        border: 2px solid ${theme.default.color.default.pink + theme.default.color.transparency.T30};
         background-clip: padding-box;
     }
 
     ${({ loading }) => loading &&
     `
         &:focus {
-            border-color: ${theme["default"].color.default.pink};
+            border-color: ${theme.default.color.default.pink};
             outline: none;
         }
 
         > * > * {
-            background-color: ${theme["default"].color.default.white};
+            background-color: ${theme.default.color.default.white};
         }
     `}
 `;
 
-exports["default"] = ButtonPrimary;
+exports.default = ButtonPrimary;

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

@@ -9,17 +9,12 @@ var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
 var ButtonPrimary = require('./ButtonPrimary.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 ButtonElement = styled__default["default"](ButtonPrimary["default"]) `
+const ButtonElement = styled(ButtonPrimary.default) `
     display: flex;
     min-width: initial;
-    width: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 3.2)};
-    height: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 3.2)};
-    border-radius: ${theme["default"].radius.circle};
+    width: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 3.2)};
+    height: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 3.2)};
+    border-radius: ${theme.default.radius.circle};
     padding: initial;
     text-align: center;
     vertical-align: middle;
@@ -32,7 +27,7 @@ const ButtonElement = styled__default["default"](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__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));
+    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));
 };
 
-exports["default"] = ButtonRound;
+exports.default = ButtonRound;

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

@@ -6,51 +6,47 @@ var styled = require('styled-components');
 var theme = require('../../themes/theme.js');
 var Button = require('./Button.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
 /** @visibleName Button Secondary */
-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};
+const ButtonSecondary = styled(Button.default) `
+    color: ${theme.default.color.text.plum};
+    background-color: ${theme.default.color.background.sand.E02};
+    border: 2px solid ${theme.default.color.line.L02};
 
     &:focus {
-        color: ${theme["default"].color.text.plum};
-        background-color: ${theme["default"].color.background.sand.E02};
+        color: ${theme.default.color.text.plum};
+        background-color: ${theme.default.color.background.sand.E02};
     }
 
     &:hover {
-        color: ${theme["default"].color.text.plum};
+        color: ${theme.default.color.text.plum};
         background-color: ${Button.shade.sand.E02.darker};
         border: 2px solid ${Button.shade.sand.E02.darker};
     }
 
     &:active {
-        color: ${theme["default"].color.text.plum};
+        color: ${theme.default.color.text.plum};
         background-color: ${Button.shade.sand.E02.lighter};
         border: 2px solid ${Button.shade.sand.E02.lighter};
     }
 
     &:disabled,
     &[disabled] {
-        background-color: ${theme["default"].color.background.sand.E02 + theme["default"].color.transparency.T30};
-        border: 2px 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: 2px solid ${theme.default.color.line.L02 + theme.default.color.transparency.T30};
         background-clip: padding-box;
     }
 
     ${({ loading }) => loading &&
     `
         &:focus {
-            border-color: ${theme["default"].color.line.L02};
+            border-color: ${theme.default.color.line.L02};
             outline: none;
         }
 
         > * > * {
-            background-color: ${theme["default"].color.default.plum};
+            background-color: ${theme.default.color.default.plum};
         }
     `}
 `;
 
-exports["default"] = ButtonSecondary;
+exports.default = ButtonSecondary;

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

@@ -1,6 +1,6 @@
 import type { MouseEvent, ReactNode } from 'react';
 import React from 'react';
-export interface Props {
+interface Props {
     /**
      * Unique ID for the component
      */

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

@@ -12,31 +12,27 @@ var styledUtils = require('../../utils/styledUtils.js');
 var ButtonArrow = require('../Button/ButtonArrow.js');
 var ButtonIcon = require('../Button/ButtonIcon.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-const CarouselWrapper = styled["default"].div ``;
-const Header = styled["default"].div `
+const CarouselWrapper = styled.default.div ``;
+const Header = styled.default.div `
     display: flex;
     justify-content: space-between;
     gap: 1.25rem;
     margin-bottom: 1.25rem;
 `;
-const Title = styled["default"].h2 `
+const Title = styled.default.h2 `
     margin: 0;
 `;
-const Navigation = styled["default"].div `
+const Navigation = styled.default.div `
     display: inline-flex;
     margin-left: auto;
     gap: 0.625rem;
 `;
-const Content = styled["default"].div `
+const Content = styled.default.div `
     position: relative;
     overflow: hidden;
     touch-action: pan-y;
 `;
-const SlidesWrapper = styled["default"].div `
+const SlidesWrapper = styled.default.div `
     position: relative;
     display: flex;
     width: 100%;
@@ -48,7 +44,7 @@ const SlidesWrapper = styled["default"].div `
     transition-delay: 0ms;
     user-select: none;
 `;
-const SlideItem = styled["default"].div `
+const SlideItem = styled.default.div `
     display: block;
     position: relative;
     flex-shrink: 0;
@@ -56,16 +52,16 @@ const SlideItem = styled["default"].div `
         ${({ visibleItems, itemWidthCorrection }) => `(100% / ${visibleItems}) - ${itemWidthCorrection}px`}
     );
 `;
-const Footer = styled["default"].div `
+const Footer = styled.default.div `
     ${styledUtils.media.md `
         display: grid;
         grid-template-columns: [whitespace] 1fr [pagination] auto [footerButton] 1fr;
         gap: 2rem;
-        margin: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 2)} 0;
+        margin: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2)} 0;
         align-items: center;
     `};
 `;
-const Pagination = styled["default"].div `
+const Pagination = styled.default.div `
     display: none;
 
     ${styledUtils.media.md `
@@ -77,39 +73,39 @@ const Pagination = styled["default"].div `
         width: 100%;
     `};
 `;
-const PaginationItem = styled["default"].button `
+const PaginationItem = styled.default.button `
     display: inline-block;
     cursor: pointer;
     width: 2rem;
     height: 1rem;
-    border-radius: ${theme["default"].radius.pill};
-    border: 2px solid ${theme["default"].color.line.L01};
-    background-color: ${theme["default"].color.background.white.default};
+    border-radius: ${theme.default.radius.pill};
+    border: 2px solid ${theme.default.color.line.L01};
+    background-color: ${theme.default.color.background.white.default};
     transition: all 0.2s ease-in-out;
 
     ${({ isActive }) => isActive &&
     `
         width: 3rem;
-        border-color: ${theme["default"].color.default.pink};
-        background-color: ${theme["default"].color.background.pink.default};
+        border-color: ${theme.default.color.default.pink};
+        background-color: ${theme.default.color.background.pink.default};
     `}
 
     &: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;
     }
 
     &:hover {
-        border-color: ${theme["default"].color.default.pink};
+        border-color: ${theme.default.color.default.pink};
     }
 `;
-const Scrollbar = styled["default"].div `
+const Scrollbar = styled.default.div `
     width: 100%;
-    height: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 0.6)};
+    height: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 0.6)};
     margin: 1rem 0;
-    border-radius: ${theme["default"].radius.pill};
-    background-color: ${theme["default"].color.background.sand.E02};
+    border-radius: ${theme.default.radius.pill};
+    background-color: ${theme.default.color.background.sand.E02};
     user-select: none;
     touch-action: pan-y;
 
@@ -117,20 +113,20 @@ const Scrollbar = styled["default"].div `
         display: none;
     `};
 `;
-const Knob = styled["default"].div `
+const Knob = styled.default.div `
     position: relative;
     top: 0;
     left: 0;
     width: calc(100% / ${({ knobSize }) => knobSize});
     height: 100%;
-    border-radius: ${theme["default"].radius.pill};
-    background-color: ${theme["default"].color.background.pink.default};
+    border-radius: ${theme.default.radius.pill};
+    background-color: ${theme.default.color.background.pink.default};
     transform: translate3d(0px, 0, 0);
     transition-duration: 0ms;
     transition-delay: 0ms;
     user-select: none;
 `;
-const FooterButton = styled["default"].div `
+const FooterButton = styled.default.div `
     grid-column: footerButton;
     text-align: right;
 `;
@@ -140,7 +136,7 @@ const Carousel = (_a) => {
     const slidesWrapperRef = React.useRef(null);
     const scrollbarRef = React.useRef(null);
     const knobRef = React.useRef(null);
-    const { isMobile } = useWindowSize["default"](theme["default"].breakpoints.md);
+    const { isMobile } = useWindowSize.default(theme.default.breakpoints.md);
     const [currentIndex, setCurrentIndex] = React.useState(0);
     const visibleItems = props.visibleItems || (isMobile ? 1.2 : 1);
     const slidesWrapperGapSizePx = 20;
@@ -294,20 +290,20 @@ const Carousel = (_a) => {
             setElementTransform(knobRef, slidesTransform / data.scrollbarToSlidesRatio);
         }
     }, [currentIndex, data, itemWidthCorrection, props.children, slideScreensCount, visibleItems]);
-    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))))));
+    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))))));
 };
 
-exports["default"] = Carousel;
+exports.default = Carousel;

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

@@ -9,10 +9,6 @@ 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);
-
 // 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">` +
@@ -20,33 +16,33 @@ const SVGIconData = () => {
         `</svg>`;
     return `data:image/svg+xml,${encodeURIComponent(svg)}`;
 };
-const Container = styled["default"].div `
+const Container = styled.default.div `
     display: flex;
-    font-size: ${theme["default"].fontSize.default};
-    line-height: ${theme["default"].lineHeight.default};
-    margin-bottom: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 0.5)};
+    font-size: ${theme.default.fontSize.default};
+    line-height: ${theme.default.lineHeight.default};
+    margin-bottom: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 0.5)};
 `;
-const Input = styled["default"](globalStyles.CheckboxAndRadioInputCore) `
+const Input = styled.default(globalStyles.CheckboxAndRadioInputCore) `
     position: relative;
-    top: ${styledUtils.getDividedSize(theme["default"].base.baseWidth, 5)};
+    top: ${styledUtils.getDividedSize(theme.default.base.baseWidth, 5)};
 
     &:checked {
         &::before {
-            width: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1.6)};
-            height: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1.6)};
+            width: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1.6)};
+            height: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1.6)};
             background-image: url('${SVGIconData}');
         }
     }
 `;
-const Mandatory = styled["default"].span `
-    color: ${theme["default"].color.default.pink};
-    margin-left: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 0.5)};
+const Mandatory = styled.default.span `
+    color: ${theme.default.color.default.pink};
+    margin-left: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 0.5)};
 `;
-const ErrorMessage = styled["default"].div `
-    font-size: ${theme["default"].fontSize.s};
-    line-height: ${theme["default"].lineHeight.s};
-    color: ${theme["default"].color.notification.error};
-    margin-bottom: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 0.5)};
+const ErrorMessage = styled.default.div `
+    font-size: ${theme.default.fontSize.s};
+    line-height: ${theme.default.lineHeight.s};
+    color: ${theme.default.color.notification.error};
+    margin-bottom: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 0.5)};
 `;
 const Checkbox = (_a) => {
     var { 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ['data-testid']);
@@ -55,13 +51,13 @@ const Checkbox = (_a) => {
             props.onChange(!props.value);
         }
     };
-    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` },
+    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` },
                 props.label,
-                props.required && React__default["default"].createElement(Mandatory, null, "*"))),
-        props.error && props.errorMessage && (React__default["default"].createElement(ErrorMessage, { "data-testid": dataTestId && `${dataTestId}-error` }, props.errorMessage))));
+                props.required && React.createElement(Mandatory, null, "*"))),
+        props.error && props.errorMessage && (React.createElement(ErrorMessage, { "data-testid": dataTestId && `${dataTestId}-error` }, props.errorMessage))));
 };
 
-exports["default"] = Checkbox;
+exports.default = Checkbox;

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

@@ -8,25 +8,20 @@ var styled = require('styled-components');
 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);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
 const getStyling = ({ $type, $variant, }) => {
-    const stylingColor = $type === 'default' ? theme["default"].color.line.L01 : theme["default"].color.notification[$type];
+    const stylingColor = $type === 'default' ? theme.default.color.line.L01 : theme.default.color.notification[$type];
     const border = `border: 2px solid ${stylingColor};`;
-    const background = `background-color: ${$variant === 'outlined' ? theme["default"].color.background.white.default : stylingColor};`;
-    const color = `color: ${$variant === 'outlined' ? theme["default"].color.text.black : theme["default"].color.text.white};`;
+    const background = `background-color: ${$variant === 'outlined' ? theme.default.color.background.white.default : stylingColor};`;
+    const color = `color: ${$variant === 'outlined' ? theme.default.color.text.black : theme.default.color.text.white};`;
     return `${border}${background}${color}`;
 };
-const Element = styled__default["default"].div `
+const Element = styled.div `
     display: inline-block;
-    border-radius: ${theme["default"].radius.pill};
-    padding: 1px ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1)};
-    font-size: ${theme["default"].fontSize.s};
-    line-height: ${theme["default"].lineHeight.s};
-    font-weight: ${theme["default"].fontWeight.medium};
+    border-radius: ${theme.default.radius.pill};
+    padding: 1px ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1)};
+    font-size: ${theme.default.fontSize.s};
+    line-height: ${theme.default.lineHeight.s};
+    font-weight: ${theme.default.fontWeight.medium};
     text-align: center;
     ${({ onClick }) => onClick && `cursor: pointer`};
 
@@ -34,7 +29,7 @@ const Element = styled__default["default"].div `
 `;
 const Chip = (_a) => {
     var { type = 'default', variant = 'outlined', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["type", "variant", 'data-testid']);
-    return (React__default["default"].createElement(Element, { id: props.id, "$type": type, "$variant": variant, onClick: props.onClick, className: props.className, "data-testid": dataTestId }, props.children));
+    return (React.createElement(Element, { id: props.id, "$type": type, "$variant": variant, onClick: props.onClick, className: props.className, "data-testid": dataTestId }, props.children));
 };
 
-exports["default"] = Chip;
+exports.default = Chip;