@dnanpm/styleguide 3.10.0 → 3.11.0

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var React = require('react');
-var styled = require('styled-components');
+var styledComponents = require('styled-components');
 var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
 var ButtonPrimary = require('../ButtonPrimary/ButtonPrimary.js');
@@ -12,9 +12,8 @@ var ButtonPrimary = require('../ButtonPrimary/ButtonPrimary.js');
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const ButtonElement = styled__default.default(ButtonPrimary.default) `
+const ButtonElement = styledComponents.styled(ButtonPrimary.default) `
     display: flex;
     min-width: initial;
     width: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 3.2)};

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

@@ -2,16 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var styled = require('styled-components');
+var styledComponents = require('styled-components');
 var theme = require('../../themes/theme.js');
 var Button = require('../Button/Button.js');
 
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-
 /** @visibleName Button Secondary */
-const ButtonSecondary = styled__default.default(Button.default) `
+const ButtonSecondary = styledComponents.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};

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

@@ -73,175 +73,12 @@ interface Props {
      */
     swipeStep?: number;
 }
-declare const SlideItem: import("styled-components").StyledComponent<"div", {
-    base: {
-        baseHeight: {
-            value: number;
-            unit: string;
-        };
-        baseWidth: {
-            value: number;
-            unit: string;
-        };
-    };
-    breakpoints: import("../../themes/themeComponents/breakpoints").ViewBreakpoints;
-    color: {
-        default: {
-            pink: string;
-            plum: string;
-            white: string;
-            black: string;
-        };
-        accent: {
-            lemon: string;
-            sky: string;
-            orange: string;
-        };
-        active: {
-            pink: string;
-        };
-        hover: {
-            pink: string;
-        };
-        text: {
-            gray: string;
-            pink: string;
-            plum: string;
-            white: string;
-            black: string;
-        };
-        line: {
-            L01: string;
-            L02: string;
-            L03: string;
-            L04: string;
-        };
-        notification: {
-            info: string;
-            success: string;
-            warning: string;
-            error: string;
-        };
-        background: {
-            sand: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            pink: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            plum: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            lemon: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            sky: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            orange: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            white: {
-                default: string;
-            };
-        };
-        focus: {
-            dark: string;
-            light: string;
-        };
-        transparency: {
-            T0: string;
-            T10: string;
-            T20: string;
-            T30: string;
-            T40: string;
-            T50: string;
-            T60: string;
-            T70: string;
-            T80: string;
-            T90: string;
-            T100: string;
-        };
-    };
-    fontFamily: {
-        default: string;
-        heading: string;
-        numerals: string;
-    };
-    fontSize: {
-        default: string;
-        xl: string;
-        l: string;
-        s: string;
-        xs: string;
-        h1XL: string;
-        h1L: string;
-        h1M: string;
-        h1S: string;
-        h2M: string;
-        h2S: string;
-        h3: string;
-        h4: string;
-        h5: string;
-        h1: string;
-        h2: string;
-    };
-    fontWeight: {
-        book: number;
-        medium: number;
-        bold: number;
-        black: number;
-    };
-    form: {
-        smallSelectWidth: string;
-        smallSelectHeight: string;
-    };
-    grid: {
-        gutter: string;
-    };
-    lineHeight: {
-        default: string;
-        xl: string;
-        s: string;
-        xs: string;
-        xxs: string;
-        auto: string;
-        h1XL: string;
-        h1L: string;
-        h1M: string;
-        h1S: string;
-        h2M: string;
-        h2S: string;
-        h3: string;
-        h4: string;
-        h5: string;
-        h1: string;
-        h2: string;
-    };
-    media: Record<string | number, (l: TemplateStringsArray, ...p: (string | number)[]) => string>;
-    radius: {
-        default: string;
-        s: string;
-        xs: string;
-        circle: string;
-        pill: string;
-    };
-}, Required<Pick<Props, "visibleItems">> & {
-    itemWidthCorrection: number;
-    isSwiping: boolean;
-}, never>;
+declare const SlideItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Required<{
+    $visibleItems?: Props["visibleItems"];
+}> & {
+    $itemWidthCorrection: number;
+    $isSwiping: boolean;
+}>> & string;
 /** @visibleName Carousel */
 declare const Carousel: ({ "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
 /** @component */

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

@@ -6,7 +6,7 @@ var tslib = require('tslib');
 var icons = require('@dnanpm/icons');
 var React = require('react');
 var useWindowSize = require('../../hooks/useWindowSize.js');
-var styled = require('../../themes/styled.js');
+var styledComponents = require('styled-components');
 var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
 var ButtonArrow = require('../ButtonArrow/ButtonArrow.js');
@@ -16,51 +16,51 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const CarouselWrapper = styled.default.div ``;
-const Header = styled.default.div `
+const CarouselWrapper = styledComponents.styled.div ``;
+const Header = styledComponents.styled.div `
     display: flex;
     justify-content: space-between;
     gap: 1.25rem;
     margin-bottom: 1.25rem;
 `;
-const Title = styled.default.h2 `
+const Title = styledComponents.styled.h2 `
     margin: 0;
 `;
-const Navigation = styled.default.div `
+const Navigation = styledComponents.styled.div `
     display: inline-flex;
     margin-left: auto;
     gap: 0.625rem;
 `;
-const Content = styled.default.div `
+const Content = styledComponents.styled.div `
     position: relative;
     overflow: hidden;
     touch-action: pan-y;
 `;
-const SlidesWrapper = styled.default.div `
+const SlidesWrapper = styledComponents.styled.div `
     position: relative;
     display: flex;
     width: 100%;
     height: 100%;
-    gap: ${({ gap }) => gap}rem;
+    gap: ${({ $gap }) => $gap}rem;
     transition-property: transform;
     transform: translate3d(0px, 0, 0);
     transition-duration: 0ms;
     transition-delay: 0ms;
     user-select: none;
 `;
-const SlideItem = styled.default.div `
+const SlideItem = styledComponents.styled.div `
     display: block;
     position: relative;
     flex-shrink: 0;
     flex-basis: calc(
-        ${({ visibleItems, itemWidthCorrection }) => `(100% / ${visibleItems}) - ${itemWidthCorrection}px`}
+        ${({ $visibleItems, $itemWidthCorrection }) => `(100% / ${$visibleItems}) - ${$itemWidthCorrection}px`}
     );
 
     a {
-        pointer-events: ${({ isSwiping }) => (isSwiping ? 'none' : 'auto')};
+        pointer-events: ${({ $isSwiping }) => ($isSwiping ? 'none' : 'auto')};
     }
 `;
-const Footer = styled.default.div `
+const Footer = styledComponents.styled.div `
     ${styledUtils.media.md `
         display: grid;
         grid-template-columns: [whitespace] 1fr [pagination] auto [footerButton] 1fr;
@@ -69,7 +69,7 @@ const Footer = styled.default.div `
         align-items: center;
     `};
 `;
-const Pagination = styled.default.div `
+const Pagination = styledComponents.styled.div `
     display: none;
 
     ${styledUtils.media.md `
@@ -81,7 +81,7 @@ const Pagination = styled.default.div `
         width: 100%;
     `};
 `;
-const PaginationItem = styled.default.button `
+const PaginationItem = styledComponents.styled.button `
     display: inline-block;
     cursor: pointer;
     width: 2rem;
@@ -91,7 +91,7 @@ const PaginationItem = styled.default.button `
     background-color: ${theme.default.color.background.white.default};
     transition: all 0.2s ease-in-out;
 
-    ${({ isActive }) => isActive &&
+    ${({ $isActive }) => $isActive &&
     `
         width: 3rem;
         border-color: ${theme.default.color.default.pink};
@@ -108,7 +108,7 @@ const PaginationItem = styled.default.button `
         border-color: ${theme.default.color.default.pink};
     }
 `;
-const Scrollbar = styled.default.div `
+const Scrollbar = styledComponents.styled.div `
     width: 100%;
     height: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 0.6)};
     margin: 1rem 0;
@@ -121,11 +121,11 @@ const Scrollbar = styled.default.div `
         display: none;
     `};
 `;
-const Knob = styled.default.div `
+const Knob = styledComponents.styled.div `
     position: relative;
     top: 0;
     left: 0;
-    width: calc(100% / ${({ knobSize }) => knobSize});
+    width: calc(100% / ${({ $knobSize }) => $knobSize});
     height: 100%;
     border-radius: ${theme.default.radius.pill};
     background-color: ${theme.default.color.background.pink.default};
@@ -134,11 +134,11 @@ const Knob = styled.default.div `
     transition-delay: 0ms;
     user-select: none;
 `;
-const FooterButton = styled.default.div `
+const FooterButton = styledComponents.styled.div `
     grid-column: footerButton;
     text-align: right;
 `;
-const Counter = styled.default.span `
+const Counter = styledComponents.styled.span `
     margin-top: 0.5rem;
     font-size: ${theme.default.fontSize.s};
     font-weight: ${theme.default.fontWeight.medium};
@@ -361,12 +361,12 @@ const Carousel = (_a) => {
                 React__default.default.createElement(ButtonArrow.default, { direction: "left", "aria-label": props.previousAriaLabel, onClick: handleNavigationButtonPreviousClick, disabled: currentIndex <= 0, type: "button" }),
                 React__default.default.createElement(ButtonArrow.default, { direction: "right", "aria-label": props.nextAriaLabel, onClick: handleNavigationButtonNextClick, disabled: currentIndex + visibleItems >= React.Children.count(props.children), type: "button" }))),
         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, isSwiping: isSwiping, onPointerDown: handlePointerDown }, child))))),
+            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, "$isSwiping": isSwiping, onPointerDown: handlePointerDown }, child))))),
         React__default.default.createElement(Footer, { "data-testid": dataTestId && `${dataTestId}-footer` },
             React__default.default.createElement(Pagination, null, [...Array(totalSwipeSteps).keys()].map((value, index) => (React__default.default.createElement(PaginationItem, { key: value, "aria-label": props.paginationAriaLabel &&
-                    `${props.paginationAriaLabel} ${index + 1}`, "aria-current": Math.ceil(currentIndex / step) === index, isActive: Math.ceil(currentIndex / step) === index, onClick: handlePaginationItemClick, type: "button" })))),
+                    `${props.paginationAriaLabel} ${index + 1}`, "aria-current": Math.ceil(currentIndex / step) === index, "$isActive": Math.ceil(currentIndex / step) === index, onClick: handlePaginationItemClick, type: "button" })))),
             React__default.default.createElement(Scrollbar, { ref: scrollbarRef, onPointerDown: handleScrollbarPointerDown },
-                React__default.default.createElement(Knob, { ref: knobRef, knobSize: slideScreensCount })),
+                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))))));
 };

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var React = require('react');
-var styled = require('../../themes/styled.js');
+var styledComponents = require('styled-components');
 var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
 
@@ -19,13 +19,13 @@ const SVGIconData = () => {
         `</svg>`;
     return `data:image/svg+xml,${encodeURIComponent(svg)}`;
 };
-const Container = styled.default.div `
+const Container = styledComponents.styled.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)};
 `;
-const Input = styled.default.input `
+const Input = styledComponents.styled.input `
     display: inline-grid;
     appearance: none;
     place-content: center;
@@ -98,11 +98,11 @@ const Input = styled.default.input `
             0px 0px 0px 4px ${theme.default.color.focus.dark};
     }
 `;
-const Mandatory = styled.default.span `
+const Mandatory = styledComponents.styled.span `
     color: ${theme.default.color.default.pink};
     margin-left: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 0.5)};
 `;
-const ErrorMessage = styled.default.div `
+const ErrorMessage = styledComponents.styled.div `
     font-size: ${theme.default.fontSize.s};
     line-height: ${theme.default.lineHeight.s};
     color: ${theme.default.color.notification.error};

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

@@ -4,14 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var React = require('react');
-var styled = require('styled-components');
+var styledComponents = require('styled-components');
 var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
 const getStyling = ({ $type }) => {
     switch ($type) {
@@ -36,7 +35,7 @@ const getStyling = ({ $type }) => {
             `;
     }
 };
-const Element = styled__default.default.div `
+const Element = styledComponents.styled.div `
     all: unset;
     display: inline-block;
     border-radius: ${theme.default.radius.pill};

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

@@ -6,7 +6,7 @@ var tslib = require('tslib');
 var icons = require('@dnanpm/icons');
 var React = require('react');
 var ReactDatePicker = require('react-datepicker');
-var styled = require('styled-components');
+var styledComponents = require('styled-components');
 var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
 var ButtonIcon = require('../ButtonIcon/ButtonIcon.js');
@@ -16,7 +16,6 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var ReactDatePicker__default = /*#__PURE__*/_interopDefaultCompat(ReactDatePicker);
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
 /**
  * Customized local copy of date-fns/locale/fi object to avoid importing unnecessary libraries
@@ -58,7 +57,7 @@ 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 = styledComponents.styled.div `
     position: relative;
 
     & .react-datepicker {
@@ -221,7 +220,7 @@ const Wrapper = styled__default.default.div `
         }
     }
 `;
-const MonthSelector = styled__default.default.div `
+const MonthSelector = styledComponents.styled.div `
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -230,11 +229,23 @@ const MonthSelector = styled__default.default.div `
         fill: ${theme.default.color.text.gray};
     }
 `;
-const CurrentMonth = styled__default.default.div `
+const CurrentMonth = styledComponents.styled.div `
     font-size: ${theme.default.fontSize.default};
     line-height: ${theme.default.lineHeight.default};
     font-weight: ${theme.default.fontWeight.bold};
 `;
+const StyledInput = styledComponents.styled(Input.default) `
+    ${({ disabled }) => !disabled &&
+    `
+        div {
+            background-color: ${theme.default.color.background.white.default};
+        }
+
+        .react-datepicker-ignore-onclickoutside-lock-icon {
+            display: none;
+        }
+    `}
+`;
 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, {
@@ -282,7 +293,7 @@ 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 }),
+        React__default.default.createElement(StyledInput, { 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], 
             // 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

package/build/cjs/components/Divider/Divider.js

@@ -4,22 +4,21 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var React = require('react');
-var styled = require('styled-components');
+var styledComponents = require('styled-components');
 var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const DividerWrapper = styled__default.default.div `
+const DividerWrapper = styledComponents.styled.div `
     display: flex;
     justify-content: center;
     align-items: center;
     width: 100%;
-    margin: ${({ margin }) => margin || `${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1)} 0`};
-    ${({ padding }) => padding && `padding: ${padding}`};
+    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-width: 1px ${({ children }) => !children && '0 0 0'};
@@ -27,7 +26,7 @@ const DividerWrapper = styled__default.default.div `
 const Divider = (_a) => {
     var { 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ['data-testid']);
     const isFocusableSeparator = Boolean(props.children);
-    return (React__default.default.createElement(DividerWrapper, { id: props.id, margin: props.margin, padding: props.padding, className: props.className, "data-testid": dataTestId, as: isFocusableSeparator ? 'div' : 'hr', role: isFocusableSeparator ? 'separator' : undefined, "aria-orientation": "horizontal", "aria-label": props.ariaLabelFocusableSeparator, "aria-hidden": !isFocusableSeparator, tabIndex: isFocusableSeparator ? 0 : -1 }, props.children));
+    return (React__default.default.createElement(DividerWrapper, { id: props.id, "$margin": props.margin, "$padding": props.padding, className: props.className, "data-testid": dataTestId, as: isFocusableSeparator ? 'div' : 'hr', role: isFocusableSeparator ? 'separator' : undefined, "aria-orientation": "horizontal", "aria-label": props.ariaLabelFocusableSeparator, "aria-hidden": !isFocusableSeparator, tabIndex: isFocusableSeparator ? 0 : -1 }, props.children));
 };
 
 exports.default = Divider;

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var React = require('react');
-var styled = require('../../themes/styled.js');
+var styledComponents = require('styled-components');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -29,11 +29,11 @@ const colorVariationsMap = {
         text: '#000000',
     },
 };
-const Container = styled.default.span `
+const Container = styledComponents.styled.span `
     display: inline-flex;
     width: ${({ size }) => size};
     height: ${({ size }) => size};
-    ${({ margin }) => margin && `margin: ${margin}`};
+    ${({ $margin }) => $margin && `margin: ${$margin}`};
 
     svg {
         width: ${({ size }) => size};
@@ -65,7 +65,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__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 })));
 };
 
 exports.default = DnaLogo;