@dnanpm/styleguide 3.8.1 → 3.8.2

package/build/cjs/components/DateTimePicker/DateTimePicker.js

@@ -12,12 +12,6 @@ var styledUtils = require('../../utils/styledUtils.js');
 var ButtonIcon = require('../Button/ButtonIcon.js');
 var Input = require('../Input/Input.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var ReactDatePicker__default = /*#__PURE__*/_interopDefaultLegacy(ReactDatePicker);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
 /**
  * Customized local copy of date-fns/locale/fi object to avoid importing unnecessary libraries
  * Contains only used and functionality wise necessary properties
@@ -58,16 +52,16 @@ const localeData = {
 };
 const sentenceCase = (string) => `${string[0].toUpperCase()}${string.slice(1)}`;
 // TODO: change `& .react-datepicker` value back to `1` after z-index of Footer removed
-const Wrapper = styled__default["default"].div `
+const Wrapper = styled.div `
     position: relative;
 
     & .react-datepicker {
         position: absolute;
         display: flex;
-        font-size: ${theme["default"].fontSize.xs};
-        border-radius: ${theme["default"].radius.default};
-        border: 1px solid ${theme["default"].color.line.L03};
-        background-color: ${theme["default"].color.background.white.default};
+        font-size: ${theme.default.fontSize.xs};
+        border-radius: ${theme.default.radius.default};
+        border: 1px solid ${theme.default.color.line.L03};
+        background-color: ${theme.default.color.background.white.default};
         z-index: 2;
 
         .react-datepicker__aria-live {
@@ -76,24 +70,24 @@ const Wrapper = styled__default["default"].div `
     }
 
     & .react-datepicker__month-container + .react-datepicker__time-container {
-        border-left: 1px solid ${theme["default"].color.line.L03};
+        border-left: 1px solid ${theme.default.color.line.L03};
     }
 
     & .react-datepicker__header {
         display: flex;
         flex-direction: column;
-        gap: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)};
-        color: ${theme["default"].color.text.black};
-        padding: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)}
-            ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)}
-            ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 0.5)};
-        border-bottom: 1px solid ${theme["default"].color.line.L03};
-        background-color: ${theme["default"].color.background.sand.E01};
+        gap: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};
+        color: ${theme.default.color.text.black};
+        padding: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)}
+            ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)}
+            ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 0.5)};
+        border-bottom: 1px solid ${theme.default.color.line.L03};
+        background-color: ${theme.default.color.background.sand.E01};
 
         .react-datepicker-time__header {
-            font-size: ${theme["default"].fontSize.default};
-            line-height: ${theme["default"].lineHeight.default};
-            font-weight: ${theme["default"].fontWeight.bold};
+            font-size: ${theme.default.fontSize.default};
+            line-height: ${theme.default.lineHeight.default};
+            font-weight: ${theme.default.fontWeight.bold};
             text-align: center;
         }
     }
@@ -101,11 +95,11 @@ const Wrapper = styled__default["default"].div `
     & .react-datepicker__month,
     .react-datepicker__time-list {
         display: grid;
-        gap: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 0.5)};
-        color: ${theme["default"].color.text.gray};
-        padding: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 0.5)}
-            ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)}
-            ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)};
+        gap: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 0.5)};
+        color: ${theme.default.color.text.gray};
+        padding: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 0.5)}
+            ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)}
+            ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};
 
         .react-datepicker__day--outside-month {
             visibility: hidden;
@@ -115,80 +109,80 @@ const Wrapper = styled__default["default"].div `
     & .react-datepicker__day-names,
     & .react-datepicker__week {
         display: flex;
-        gap: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 0.8)};
+        gap: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 0.8)};
 
         .react-datepicker__day-name,
         .react-datepicker__day {
             text-align: center;
-            font-weight: ${theme["default"].fontWeight.book};
-            line-height: ${theme["default"].lineHeight.default};
-            width: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 2.4)};
-            height: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 2.4)};
+            font-weight: ${theme.default.fontWeight.book};
+            line-height: ${theme.default.lineHeight.default};
+            width: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2.4)};
+            height: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2.4)};
         }
 
         .react-datepicker__day {
             cursor: pointer;
-            font-weight: ${theme["default"].fontWeight.book};
+            font-weight: ${theme.default.fontWeight.book};
             border: 1px solid transparent;
-            border-radius: ${theme["default"].radius.s};
+            border-radius: ${theme.default.radius.s};
 
             &.react-datepicker__day--today {
-                color: ${theme["default"].color.text.pink};
-                font-weight: ${theme["default"].fontWeight.bold};
+                color: ${theme.default.color.text.pink};
+                font-weight: ${theme.default.fontWeight.bold};
             }
             &.react-datepicker__day--disabled {
-                color: ${theme["default"].color.text.gray + theme["default"].color.transparency.T40};
-                font-weight: ${theme["default"].fontWeight.book};
+                color: ${theme.default.color.text.gray + theme.default.color.transparency.T40};
+                font-weight: ${theme.default.fontWeight.book};
                 &:hover {
                     cursor: default;
-                    color: ${theme["default"].color.text.gray + theme["default"].color.transparency.T40};
-                    font-weight: ${theme["default"].fontWeight.book};
+                    color: ${theme.default.color.text.gray + theme.default.color.transparency.T40};
+                    font-weight: ${theme.default.fontWeight.book};
                     background-color: transparent;
                     border: 1px solid transparent;
                 }
             }
             &.react-datepicker__day--in-selecting-range {
-                color: ${theme["default"].color.text.white};
-                font-weight: ${theme["default"].fontWeight.bold};
-                background-color: ${theme["default"].color.background.pink.default};
+                color: ${theme.default.color.text.white};
+                font-weight: ${theme.default.fontWeight.bold};
+                background-color: ${theme.default.color.background.pink.default};
             }
 
             &.react-datepicker__day--selected {
-                color: ${theme["default"].color.text.white};
-                font-weight: ${theme["default"].fontWeight.bold};
-                background-color: ${theme["default"].color.background.pink.default};
+                color: ${theme.default.color.text.white};
+                font-weight: ${theme.default.fontWeight.bold};
+                background-color: ${theme.default.color.background.pink.default};
             }
 
             &:hover {
-                color: ${theme["default"].color.text.gray};
-                font-weight: ${theme["default"].fontWeight.bold};
-                background-color: ${theme["default"].color.background.sand.E01};
-                border: 1px solid ${theme["default"].color.line.L03};
+                color: ${theme.default.color.text.gray};
+                font-weight: ${theme.default.fontWeight.bold};
+                background-color: ${theme.default.color.background.sand.E01};
+                border: 1px solid ${theme.default.color.line.L03};
             }
 
             &.react-datepicker__day--selecting-range-start {
-                color: ${theme["default"].color.text.white};
-                background-color: ${theme["default"].color.background.pink.default};
+                color: ${theme.default.color.text.white};
+                background-color: ${theme.default.color.background.pink.default};
 
                 &.react-datepicker__day--selecting-range-end {
-                    color: ${theme["default"].color.text.white};
-                    background-color: ${theme["default"].color.background.pink.default};
+                    color: ${theme.default.color.text.white};
+                    background-color: ${theme.default.color.background.pink.default};
                 }
             }
 
             &.react-datepicker__day--selecting-range-end {
-                color: ${theme["default"].color.text.black};
-                background-color: ${theme["default"].color.background.pink.E02};
+                color: ${theme.default.color.text.black};
+                background-color: ${theme.default.color.background.pink.E02};
 
                 &:hover {
-                    border: 1px solid ${theme["default"].color.background.pink.E02};
+                    border: 1px solid ${theme.default.color.background.pink.E02};
                 }
             }
         }
     }
 
     & .react-datepicker__time {
-        width: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 15)};
+        width: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 15)};
 
         .react-datepicker__time-list {
             padding-left: 0;
@@ -197,51 +191,51 @@ const Wrapper = styled__default["default"].div `
             margin: 0;
             gap: 0;
             overflow-y: scroll;
-            height: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 19)};
+            height: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 19)};
 
             .react-datepicker__time-list-item {
                 cursor: pointer;
                 text-align: center;
-                font-weight: ${theme["default"].fontWeight.book};
-                line-height: ${theme["default"].lineHeight.h2S};
-                height: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 3.2)};
+                font-weight: ${theme.default.fontWeight.book};
+                line-height: ${theme.default.lineHeight.h2S};
+                height: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 3.2)};
 
                 &.react-datepicker__time-list-item--selected {
-                    color: ${theme["default"].color.text.white};
-                    font-weight: ${theme["default"].fontWeight.bold};
-                    background-color: ${theme["default"].color.background.pink.default};
+                    color: ${theme.default.color.text.white};
+                    font-weight: ${theme.default.fontWeight.bold};
+                    background-color: ${theme.default.color.background.pink.default};
                 }
 
                 &:hover {
-                    color: ${theme["default"].color.text.gray};
-                    font-weight: ${theme["default"].fontWeight.bold};
-                    background-color: ${theme["default"].color.background.sand.E01};
+                    color: ${theme.default.color.text.gray};
+                    font-weight: ${theme.default.fontWeight.bold};
+                    background-color: ${theme.default.color.background.sand.E01};
                 }
             }
         }
     }
 `;
-const MonthSelector = styled__default["default"].div `
+const MonthSelector = styled.div `
     display: flex;
     align-items: center;
     justify-content: space-between;
 
     span.dnasg-icon > svg {
-        fill: ${theme["default"].color.text.gray};
+        fill: ${theme.default.color.text.gray};
     }
 `;
-const CurrentMonth = styled__default["default"].div `
-    font-size: ${theme["default"].fontSize.default};
-    line-height: ${theme["default"].lineHeight.default};
-    font-weight: ${theme["default"].fontWeight.bold};
+const CurrentMonth = styled.div `
+    font-size: ${theme.default.fontSize.default};
+    line-height: ${theme.default.lineHeight.default};
+    font-weight: ${theme.default.fontWeight.bold};
 `;
-const DateTimePickerCustomHeader = ({ date, decreaseMonth, increaseMonth, locale, }) => (React__default["default"].createElement(MonthSelector, null,
-    React__default["default"].createElement(ButtonIcon["default"], { icon: icons.ChevronLeft, onClick: decreaseMonth }),
-    React__default["default"].createElement(CurrentMonth, null, sentenceCase(date.toLocaleString(locale, {
+const DateTimePickerCustomHeader = ({ date, decreaseMonth, increaseMonth, locale, }) => (React.createElement(MonthSelector, null,
+    React.createElement(ButtonIcon.default, { icon: icons.ChevronLeft, onClick: decreaseMonth }),
+    React.createElement(CurrentMonth, null, sentenceCase(date.toLocaleString(locale, {
         month: 'long',
         year: 'numeric',
     }))),
-    React__default["default"].createElement(ButtonIcon["default"], { icon: icons.ChevronRight, onClick: increaseMonth })));
+    React.createElement(ButtonIcon.default, { icon: icons.ChevronRight, onClick: increaseMonth })));
 /** @visibleName DateTime Picker */
 const DateTimePicker = (_a) => {
     var _b;
@@ -281,12 +275,12 @@ const DateTimePicker = (_a) => {
     }))))
         .join(' - ');
     const getDateTimePickerCustomHeader = (args) => DateTimePickerCustomHeader(Object.assign(Object.assign({}, args), { locale }));
-    return (React__default["default"].createElement(Wrapper, { id: props.id, className: props.className, "data-testid": dataTestId },
-        React__default["default"].createElement(Input["default"], { id: `datetimepicker-input-${props.id}`, name: `datetimepicker-input-${props.id}`, label: props.label, placeholder: props.placeholder, value: formatInputValue, onFocus: handleOnInputFocus, onChange: handleOnInputChange, onKeyDown: handleOnKeyDown, onClearableButtonClick: props.isClearable ? handleClearable : undefined, className: "react-datepicker-ignore-onclickoutside", "data-testid": dataTestId && `${dataTestId}-datetimepicker-input`, disabled: props.isDisabled, required: props.isRequired, readonly: !props.isEditable, status: props.isInError ? 'error' : undefined, errorMessage: props.errorMessage }),
-        showReactDatePicker && (React__default["default"].createElement(ReactDatePicker__default["default"], { inline: true, selected: startDate, startDate: startDate, maxDate: props.maxDate, minDate: props.minDate, endDate: props.endDate, onChange: handleOnReactDatePickerChange, selectsRange: props.endDate !== undefined, showTimeSelect: props.endDate === undefined && isTimePicker, showTimeSelectOnly: props.endDate === undefined && !isDatePicker && isTimePicker, timeCaption: (_b = localeData[locale]) === null || _b === void 0 ? void 0 : _b.localize.timeCaption, timeIntervals: timeInterval, onClickOutside: handleOnReactDatePickerClickOutside, locale: localeData[locale], 
+    return (React.createElement(Wrapper, { id: props.id, className: props.className, "data-testid": dataTestId },
+        React.createElement(Input.default, { id: `datetimepicker-input-${props.id}`, name: `datetimepicker-input-${props.id}`, label: props.label, placeholder: props.placeholder, value: formatInputValue, onFocus: handleOnInputFocus, onChange: handleOnInputChange, onKeyDown: handleOnKeyDown, onClearableButtonClick: props.isClearable ? handleClearable : undefined, className: "react-datepicker-ignore-onclickoutside", "data-testid": dataTestId && `${dataTestId}-datetimepicker-input`, disabled: props.isDisabled, required: props.isRequired, readonly: !props.isEditable, status: props.isInError ? 'error' : undefined, errorMessage: props.errorMessage }),
+        showReactDatePicker && (React.createElement(ReactDatePicker, { inline: true, selected: startDate, startDate: startDate, maxDate: props.maxDate, minDate: props.minDate, endDate: props.endDate, onChange: handleOnReactDatePickerChange, selectsRange: props.endDate !== undefined, showTimeSelect: props.endDate === undefined && isTimePicker, showTimeSelectOnly: props.endDate === undefined && !isDatePicker && isTimePicker, timeCaption: (_b = localeData[locale]) === null || _b === void 0 ? void 0 : _b.localize.timeCaption, timeIntervals: timeInterval, onClickOutside: handleOnReactDatePickerClickOutside, locale: localeData[locale], 
             // Used to format the date/time in internal ReactDatePicker input
             // Currently ignored as date/time is shown in Styleguide Input instead, and formatted by using Intl.DateTimeFormat
             dateFormat: [isDatePicker && 'P', isTimePicker && 'p'].filter(Boolean).join(''), renderCustomHeader: getDateTimePickerCustomHeader }))));
 };
 
-exports["default"] = DateTimePicker;
+exports.default = DateTimePicker;

package/build/cjs/components/Divider/Divider.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 DividerWrapper = styled__default["default"].div `
+const DividerWrapper = styled.div `
     display: flex;
     justify-content: center;
     align-items: center;
     width: 100%;
-    margin: ${({ margin }) => margin || `${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1)} 0`};
+    margin: ${({ margin }) => margin || `${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1)} 0`};
     ${({ padding }) => padding && `padding: ${padding}`};
     border-style: solid;
-    border-color: ${theme["default"].color.line.L03};
+    border-color: ${theme.default.color.line.L03};
     border-width: 1px ${({ children }) => !children && '0 0 0'};
 `;
 const Divider = (_a) => {
     var { 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ['data-testid']);
-    return (React__default["default"].createElement(DividerWrapper, { id: props.id, margin: props.margin, padding: props.padding, className: props.className, "data-testid": dataTestId }, props.children));
+    return (React.createElement(DividerWrapper, { id: props.id, margin: props.margin, padding: props.padding, className: props.className, "data-testid": dataTestId }, props.children));
 };
 
-exports["default"] = Divider;
+exports.default = Divider;

package/build/cjs/components/DnaLogo/DnaLogo.js

@@ -6,10 +6,6 @@ var tslib = require('tslib');
 var React = require('react');
 var styled = require('../../themes/styled.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
 const colorVariationsMap = {
     default: {
         background: '#FF007D',
@@ -29,7 +25,7 @@ const colorVariationsMap = {
         text: '#000000',
     },
 };
-const Container = styled["default"].span `
+const Container = styled.default.span `
     display: inline-flex;
     width: ${({ size }) => size};
     height: ${({ size }) => size};
@@ -42,20 +38,20 @@ const Container = styled["default"].span `
 `;
 const Emblem = ({ type }) => {
     const currentVariation = colorVariationsMap[type];
-    return (React__default["default"].createElement("svg", { viewBox: "0 0 666.7 666.7" },
-        React__default["default"].createElement("g", null,
-            React__default["default"].createElement("path", { fill: currentVariation.background, d: "M0,0v666.7h666.7V0H0z" }),
-            React__default["default"].createElement("path", { fill: currentVariation.text, d: "M403,451h-41.9V285.5c0-15.7-12.7-28.4-28.4-28.4h-29.4V451h-41.9V215.2h71.3c38.8,0,70.3,31.5,70.3,70.3V451z\n                " }),
-            React__default["default"].createElement("path", { fill: currentVariation.text, d: "M226.4,286.2c0-39.2-31.8-71-71-71H84.9V451h70.6c39.2,0,71-31.8,71-71L226.4,286.2z M184.5,380.7\n                c0,15.7-12.8,28.5-28.5,28.5h-29.3v-152H156c15.7,0,28.5,12.8,28.5,28.5V380.7z" }),
-            React__default["default"].createElement("path", { fill: currentVariation.text, d: "M511.5,213.6h-1c-38.8,0-70.3,31.5-70.3,70.3V451h41.9v-84.4h57.8V451h41.9V283.9\n                C581.8,245.2,550.3,213.6,511.5,213.6z M539.9,327.2h-57.8v-43.3c0-15.7,12.7-28.4,28.4-28.4h1c15.7,0,28.4,12.7,28.4,28.4V327.2z" }))));
+    return (React.createElement("svg", { viewBox: "0 0 666.7 666.7" },
+        React.createElement("g", null,
+            React.createElement("path", { fill: currentVariation.background, d: "M0,0v666.7h666.7V0H0z" }),
+            React.createElement("path", { fill: currentVariation.text, d: "M403,451h-41.9V285.5c0-15.7-12.7-28.4-28.4-28.4h-29.4V451h-41.9V215.2h71.3c38.8,0,70.3,31.5,70.3,70.3V451z\n                " }),
+            React.createElement("path", { fill: currentVariation.text, d: "M226.4,286.2c0-39.2-31.8-71-71-71H84.9V451h70.6c39.2,0,71-31.8,71-71L226.4,286.2z M184.5,380.7\n                c0,15.7-12.8,28.5-28.5,28.5h-29.3v-152H156c15.7,0,28.5,12.8,28.5,28.5V380.7z" }),
+            React.createElement("path", { fill: currentVariation.text, d: "M511.5,213.6h-1c-38.8,0-70.3,31.5-70.3,70.3V451h41.9v-84.4h57.8V451h41.9V283.9\n                C581.8,245.2,550.3,213.6,511.5,213.6z M539.9,327.2h-57.8v-43.3c0-15.7,12.7-28.4,28.4-28.4h1c15.7,0,28.4,12.7,28.4,28.4V327.2z" }))));
 };
 const Logotype = ({ type }) => {
     const currentVariation = colorVariationsMap[type];
-    return (React__default["default"].createElement("svg", { viewBox: "0 0 600 286.6" },
-        React__default["default"].createElement("g", null,
-            React__default["default"].createElement("path", { fill: currentVariation.text, d: "M299.3,3.3h-85.2v281.8h50.1V53.4h35.1c18.8,0,34,15.2,34,34v197.8h50.1V87.3C383.3,41,345.6,3.3,299.3,3.3z" }),
-            React__default["default"].createElement("path", { fill: currentVariation.text, d: "M87.4,3.3H3v281.9h84.4c46.8,0,84.8-38,84.8-84.8l0-112.2C172.2,41.3,134.2,3.3,87.4,3.3z M122.1,201.1\n                    c0,18.8-15.3,34.1-34.1,34.1h-35V53.4h35c18.8,0,34.1,15.3,34.1,34.1L122.1,201.1z" }),
-            React__default["default"].createElement("path", { fill: currentVariation.text, d: "M513,1.4h-1.2c-46.3,0-84,37.7-84,84v199.8h50.1V183.4l69.1,0v101.8H597V85.4C597,39.1,559.3,1.4,513,1.4z\n                    M546.9,137.2h-69.1V85.4c0-18.7,15.2-34,34-34h1.2c18.7,0,34,15.2,34,34V137.2z" }))));
+    return (React.createElement("svg", { viewBox: "0 0 600 286.6" },
+        React.createElement("g", null,
+            React.createElement("path", { fill: currentVariation.text, d: "M299.3,3.3h-85.2v281.8h50.1V53.4h35.1c18.8,0,34,15.2,34,34v197.8h50.1V87.3C383.3,41,345.6,3.3,299.3,3.3z" }),
+            React.createElement("path", { fill: currentVariation.text, d: "M87.4,3.3H3v281.9h84.4c46.8,0,84.8-38,84.8-84.8l0-112.2C172.2,41.3,134.2,3.3,87.4,3.3z M122.1,201.1\n                    c0,18.8-15.3,34.1-34.1,34.1h-35V53.4h35c18.8,0,34.1,15.3,34.1,34.1L122.1,201.1z" }),
+            React.createElement("path", { fill: currentVariation.text, d: "M513,1.4h-1.2c-46.3,0-84,37.7-84,84v199.8h50.1V183.4l69.1,0v101.8H597V85.4C597,39.1,559.3,1.4,513,1.4z\n                    M546.9,137.2h-69.1V85.4c0-18.7,15.2-34,34-34h1.2c18.7,0,34,15.2,34,34V137.2z" }))));
 };
 /** @visibleName DNA Logo */
 const DnaLogo = (_a) => {
@@ -65,7 +61,7 @@ const DnaLogo = (_a) => {
         const matches = /(\d+)(.+)/.exec(size);
         margin = matches && `${Number(matches[1]) * 0.25}${matches[2]}`;
     }
-    return (React__default["default"].createElement(Container, { size: size, margin: margin, className: props.className, onClick: props.onClick }, type.indexOf('logotype') === -1 ? React__default["default"].createElement(Emblem, { type: type }) : React__default["default"].createElement(Logotype, { type: type })));
+    return (React.createElement(Container, { size: size, margin: margin, className: props.className, onClick: props.onClick }, type.indexOf('logotype') === -1 ? React.createElement(Emblem, { type: type }) : React.createElement(Logotype, { type: type })));
 };
 
-exports["default"] = DnaLogo;
+exports.default = DnaLogo;

package/build/cjs/components/Drawer/Drawer.js

@@ -15,11 +15,6 @@ var Icon = require('../Icon/Icon.js');
 var common = require('../../utils/common.js');
 var Floater = require('../Floater/Floater.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var ReactModal__default = /*#__PURE__*/_interopDefaultLegacy(ReactModal);
-
 const sizeMap = {
     small: '375px',
     medium: '768px',
@@ -30,7 +25,7 @@ const GlobalStyle = styled.createGlobalStyle `
         overflow: hidden;
     }
 `;
-const StyledReactModal = styled["default"](ReactModal__default["default"]) `
+const StyledReactModal = styled.default(ReactModal) `
     position: fixed;
     top: 0;
     right: 0;
@@ -65,7 +60,7 @@ const StyledReactModal = styled["default"](ReactModal__default["default"]) `
         width: ${sizeMap[size]};
     `};
 `;
-const StyledReactModalOverlay = styled["default"].div `
+const StyledReactModalOverlay = styled.default.div `
     display: flex;
     justify-content: center;
     align-items: center;
@@ -75,7 +70,7 @@ const StyledReactModalOverlay = styled["default"].div `
     left: 0;
     right: 0;
     z-index: 9999;
-    background-color: ${theme["default"].color.background.plum.default}${theme["default"].color.transparency.T40};
+    background-color: ${theme.default.color.background.plum.default}${theme.default.color.transparency.T40};
     animation: fadeIn 0.2s ease-in-out;
 
     &.ReactModal__Overlay--before-close {
@@ -85,30 +80,30 @@ const StyledReactModalOverlay = styled["default"].div `
 
     @keyframes fadeIn {
         0% {
-            background-color: ${theme["default"].color.background.plum.default}${theme["default"].color.transparency.T0};
+            background-color: ${theme.default.color.background.plum.default}${theme.default.color.transparency.T0};
         }
 
         100% {
-            background-color: ${theme["default"].color.background.plum.default}${theme["default"].color.transparency.T40};
+            background-color: ${theme.default.color.background.plum.default}${theme.default.color.transparency.T40};
         }
     }
 
     @keyframes fadeOut {
         0% {
-            background-color: ${theme["default"].color.background.plum.default}${theme["default"].color.transparency.T40};
+            background-color: ${theme.default.color.background.plum.default}${theme.default.color.transparency.T40};
         }
 
         100% {
-            background-color: ${theme["default"].color.background.plum.default}${theme["default"].color.transparency.T0};
+            background-color: ${theme.default.color.background.plum.default}${theme.default.color.transparency.T0};
         }
     }
 `;
-const StyledReactModalContent = styled["default"].div `
+const StyledReactModalContent = styled.default.div `
     &:focus {
         outline: none;
     }
 `;
-const StyledBox = styled["default"](Box["default"]) `
+const StyledBox = styled.default(Box.default) `
     display: flex;
     flex-direction: column;
     justify-content: space-between;
@@ -119,15 +114,15 @@ const StyledBox = styled["default"](Box["default"]) `
     padding: 0;
     border: 0 none;
 `;
-const Header = styled["default"].div `
+const Header = styled.default.div `
     display: flex;
     flex-direction: column;
     gap: 0.25rem;
-    border-bottom: 1px solid ${theme["default"].color.line.L03};
+    border-bottom: 1px solid ${theme.default.color.line.L03};
     padding: 1.25rem;
     background-color: ${({ variant }) => variant === 'light'
-    ? theme["default"].color.background.white.default
-    : theme["default"].color.background.plum.E02};
+    ? theme.default.color.background.white.default
+    : theme.default.color.background.plum.E02};
     width: 100%;
 
     h2,
@@ -135,58 +130,58 @@ const Header = styled["default"].div `
         margin: 0;
     }
 `;
-const Title = styled["default"].h2 `
-    font-size: ${({ size }) => (size === 'small' ? theme["default"].fontSize.h2S : theme["default"].fontSize.h2M)};
-    color: ${({ variant }) => variant === 'light' ? theme["default"].color.default.black : theme["default"].color.default.white};
+const Title = styled.default.h2 `
+    font-size: ${({ size }) => (size === 'small' ? theme.default.fontSize.h2S : theme.default.fontSize.h2M)};
+    color: ${({ variant }) => variant === 'light' ? theme.default.color.default.black : theme.default.color.default.white};
 `;
-const Subtitle = styled["default"].p `
-    font-size: ${({ size }) => (size === 'small' ? theme["default"].fontSize.l : theme["default"].fontSize.xl)};
-    color: ${({ variant }) => variant === 'light' ? theme["default"].color.default.black : theme["default"].color.default.white};
+const Subtitle = styled.default.p `
+    font-size: ${({ size }) => (size === 'small' ? theme.default.fontSize.l : theme.default.fontSize.xl)};
+    color: ${({ variant }) => variant === 'light' ? theme.default.color.default.black : theme.default.color.default.white};
 `;
-const CloseButton = styled["default"](ButtonClose["default"]) `
+const CloseButton = styled.default(ButtonClose.default) `
     margin: 0;
     padding: 0.625rem;
-    border-radius: 0 0 0 ${theme["default"].radius.default};
+    border-radius: 0 0 0 ${theme.default.radius.default};
     background-color: ${({ variant }) => variant === 'light'
-    ? theme["default"].color.background.sand.E01
-    : theme["default"].color.background.plum.default};
+    ? theme.default.color.background.sand.E01
+    : theme.default.color.background.plum.default};
 `;
-const Content = styled["default"].div `
+const Content = styled.default.div `
     padding: ${({ padding }) => padding};
     margin: 0;
 `;
-const Footer = styled["default"].div `
+const Footer = styled.default.div `
     padding: 1.25rem;
     margin: 0;
     width: 100%;
-    border-top: 1px solid ${theme["default"].color.line.L04};
-    background-color: ${theme["default"].color.background.white.default};
+    border-top: 1px solid ${theme.default.color.line.L04};
+    background-color: ${theme.default.color.background.white.default};
 
-    ${common["default"]({ elevation: 'high', shadow: '1 0 0 0' })};
+    ${common.default({ elevation: 'high', shadow: '1 0 0 0' })};
 `;
-const ModalOverlay = ({ ref, onClick, onMouseDown, className }, contentElement) => (React__default["default"].createElement(StyledReactModalOverlay, { ref: ref, onClick: onClick, onMouseDown: onMouseDown, className: className }, contentElement));
+const ModalOverlay = ({ ref, onClick, onMouseDown, className }, contentElement) => (React.createElement(StyledReactModalOverlay, { ref: ref, onClick: onClick, onMouseDown: onMouseDown, className: className }, contentElement));
 const ModalContent = (_a, children) => {
     var { id, ref, tabIndex, role, onKeyDown, onMouseDown, onMouseUp, onClick, className } = _a, contentProps = tslib.__rest(_a, ["id", "ref", "tabIndex", "role", "onKeyDown", "onMouseDown", "onMouseUp", "onClick", "className"]);
-    return (React__default["default"].createElement(StyledReactModalContent, { id: id, ref: ref, tabIndex: tabIndex, role: role, onKeyDown: onKeyDown, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onClick: onClick, "aria-label": contentProps['aria-label'], "aria-modal": contentProps['aria-modal'], className: className }, children));
+    return (React.createElement(StyledReactModalContent, { id: id, ref: ref, tabIndex: tabIndex, role: role, onKeyDown: onKeyDown, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onClick: onClick, "aria-label": contentProps['aria-label'], "aria-modal": contentProps['aria-modal'], className: className }, children));
 };
 const Drawer = (_a) => {
     var { appElement = '#__next', size = 'medium', variant = 'light', padding = '1.25rem', closeButton = true, isClosable = true, 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["appElement", "size", "variant", "padding", "closeButton", "isClosable", 'data-testid']);
-    ReactModal__default["default"].setAppElement(appElement);
-    return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(StyledReactModal, { id: props.id, isOpen: props.isOpen, overlayElement: ModalOverlay, contentElement: ModalContent, onRequestClose: props.onRequestClose, portalClassName: props.className, contentLabel: props.contentLabel, shouldCloseOnEsc: isClosable, shouldCloseOnOverlayClick: isClosable, closeTimeoutMS: 300, size: size },
-            React__default["default"].createElement(StyledBox, { elevation: "extraHigh", margin: props.margin, "data-testid": dataTestId },
-                React__default["default"].createElement("div", null,
-                    React__default["default"].createElement(Floater["default"], null, closeButton && isClosable && (React__default["default"].createElement(CloseButton, { onClick: props.onRequestClose, "aria-label": props.closeLabel, "data-testid": dataTestId && `${dataTestId}-close-button`, variant: variant },
-                        React__default["default"].createElement(Icon["default"], { icon: icons.Close, color: variant === 'light'
-                                ? theme["default"].color.default.plum
-                                : theme["default"].color.default.white })))),
-                    React__default["default"].createElement(Header, { variant: variant, "data-testid": dataTestId && `${dataTestId}-header` },
-                        React__default["default"].createElement(Title, { size: size, variant: variant }, props.title),
-                        props.subtitle && (React__default["default"].createElement(Subtitle, { size: size, variant: variant }, props.subtitle))),
-                    React__default["default"].createElement(Content, { "data-testid": dataTestId && `${dataTestId}-content`, padding: padding }, props.children)),
-                props.footer && (React__default["default"].createElement(Floater["default"], { position: "bottom" },
-                    React__default["default"].createElement(Footer, { "data-testid": dataTestId && `${dataTestId}-footer` }, props.footer))))),
-        React__default["default"].createElement(GlobalStyle, null)));
+    ReactModal.setAppElement(appElement);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(StyledReactModal, { id: props.id, isOpen: props.isOpen, overlayElement: ModalOverlay, contentElement: ModalContent, onRequestClose: props.onRequestClose, portalClassName: props.className, contentLabel: props.contentLabel, shouldCloseOnEsc: isClosable, shouldCloseOnOverlayClick: isClosable, closeTimeoutMS: 300, size: size },
+            React.createElement(StyledBox, { elevation: "extraHigh", margin: props.margin, "data-testid": dataTestId },
+                React.createElement("div", null,
+                    React.createElement(Floater.default, null, closeButton && isClosable && (React.createElement(CloseButton, { onClick: props.onRequestClose, "aria-label": props.closeLabel, "data-testid": dataTestId && `${dataTestId}-close-button`, variant: variant },
+                        React.createElement(Icon.default, { icon: icons.Close, color: variant === 'light'
+                                ? theme.default.color.default.plum
+                                : theme.default.color.default.white })))),
+                    React.createElement(Header, { variant: variant, "data-testid": dataTestId && `${dataTestId}-header` },
+                        React.createElement(Title, { size: size, variant: variant }, props.title),
+                        props.subtitle && (React.createElement(Subtitle, { size: size, variant: variant }, props.subtitle))),
+                    React.createElement(Content, { "data-testid": dataTestId && `${dataTestId}-content`, padding: padding }, props.children)),
+                props.footer && (React.createElement(Floater.default, { position: "bottom" },
+                    React.createElement(Footer, { "data-testid": dataTestId && `${dataTestId}-footer` }, props.footer))))),
+        React.createElement(GlobalStyle, null)));
 };
 
-exports["default"] = Drawer;
+exports.default = Drawer;

package/build/cjs/components/EmptyState/EmptyState.js

@@ -11,23 +11,19 @@ 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);
-
-const ContentWrapper = styled["default"].div `
+const ContentWrapper = styled.default.div `
     display: grid;
-    grid-gap: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 2)};
+    grid-gap: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2)};
     justify-items: center;
-    line-height: ${theme["default"].lineHeight.default};
+    line-height: ${theme.default.lineHeight.default};
 `;
 /** @visibleName Empty State */
 const EmptyState = (_a) => {
     var { icon = icons.Info, iconSize = '2rem', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["icon", "iconSize", 'data-testid']);
-    return (React__default["default"].createElement(Box["default"], { id: props.id, padding: "1.875rem", className: props.className, "data-testid": dataTestId },
-        React__default["default"].createElement(ContentWrapper, null,
-            React__default["default"].createElement(Icon["default"], { icon: icon, size: iconSize, color: theme["default"].color.default.pink }),
-            React__default["default"].createElement("div", null, props.children))));
+    return (React.createElement(Box.default, { id: props.id, padding: "1.875rem", className: props.className, "data-testid": dataTestId },
+        React.createElement(ContentWrapper, null,
+            React.createElement(Icon.default, { icon: icon, size: iconSize, color: theme.default.color.default.pink }),
+            React.createElement("div", null, props.children))));
 };
 
-exports["default"] = EmptyState;
+exports.default = EmptyState;