@dnanpm/styleguide 3.10.0 → 3.11.0

package/build/es/components/ButtonCard/ButtonCard.js

@@ -1,12 +1,12 @@
 import { __rest } from 'tslib';
 import { Open, ChevronRight } from '@dnanpm/icons';
 import React__default from 'react';
-import styled__default from 'styled-components';
+import { styled } from 'styled-components';
 import theme from '../../themes/theme.js';
 import Box from '../Box/Box.js';
 import Icon from '../Icon/Icon.js';
 
-const ButtonCardWrapper = styled__default.button `
+const ButtonCardWrapper = styled.button `
     display: block;
     padding: 0;
     border: 0 none;
@@ -34,7 +34,7 @@ const ButtonCardWrapper = styled__default.button `
         text-decoration: none;
     }
 `;
-const StyledBox = styled__default(Box) `
+const StyledBox = styled(Box) `
     display: flex;
     gap: ${({ size }) => (size === 'small' ? '0.313rem' : '1rem')};
     border: 1px solid ${theme.color.line.L03};
@@ -42,13 +42,13 @@ const StyledBox = styled__default(Box) `
     ${({ size }) => size === 'small' && 'flex-direction: column'};
     ${({ size }) => size !== 'small' && 'align-items: center'};
 `;
-const VisualContent = styled__default.div `
+const VisualContent = styled.div `
     display: flex;
     align-items: center;
     width: ${({ size }) => (size === 'small' ? '2.5rem' : '3.75rem')};
     height: ${({ size }) => (size === 'small' ? '2.5rem' : '3.75rem')};
 `;
-const TextContentWrapper = styled__default.div `
+const TextContentWrapper = styled.div `
     display: flex;
     flex-grow: 1;
     align-items: center;
@@ -56,13 +56,13 @@ const TextContentWrapper = styled__default.div `
     gap: ${({ size }) => (size === 'small' ? '0.625rem' : '1rem')};
     min-width: 0;
 `;
-const TextContent = styled__default.div `
+const TextContent = styled.div `
     display: flex;
     align-items: flex-start;
     flex-direction: column;
     min-width: 0;
 `;
-const Title = styled__default.div `
+const Title = styled.div `
     font-size: ${theme.fontSize.default};
     line-height: ${theme.lineHeight.default};
     font-weight: ${theme.fontWeight.bold};
@@ -84,7 +84,7 @@ const Title = styled__default.div `
         font-size: ${theme.fontSize.xl};
     `};
 `;
-const Subtitle = styled__default.div `
+const Subtitle = styled.div `
     color: ${theme.color.text.gray};
     font-size: ${theme.fontSize.s};
     line-height: ${theme.lineHeight.s};
@@ -106,7 +106,7 @@ const Subtitle = styled__default.div `
         font-size: ${theme.fontSize.default};
     `};
 `;
-const CtaIcon = styled__default(Icon) `
+const CtaIcon = styled(Icon) `
     color: ${theme.color.text.pink};
 
     ${ButtonCardWrapper}:hover & {

package/build/es/components/ButtonClose/ButtonClose.js

@@ -1,6 +1,6 @@
 import { __rest } from 'tslib';
 import React__default from 'react';
-import styled from '../../themes/styled.js';
+import { styled } from 'styled-components';
 import theme from '../../themes/theme.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
 

package/build/es/components/ButtonIcon/ButtonIcon.js

@@ -1,7 +1,7 @@
 import { __rest } from 'tslib';
 import { EditUnderline } from '@dnanpm/icons';
 import React__default, { forwardRef } from 'react';
-import styled__default, { css } from 'styled-components';
+import { styled, css } from 'styled-components';
 import theme from '../../themes/theme.js';
 import { getDividedSize, media } from '../../utils/styledUtils.js';
 import Icon from '../Icon/Icon.js';
@@ -48,13 +48,13 @@ const getDarkBgStyle = () => {
         }
     `;
 };
-const ButtonElement = styled__default.button `
+const ButtonElement = styled.button `
     display: inline-flex;
     align-items: center;
     font-family: ${theme.fontFamily.default};
     font-weight: ${theme.fontWeight.bold};
-    font-size: ${({ small }) => (small ? theme.fontSize.s : theme.fontSize.default)};
-    line-height: ${({ small }) => (small ? theme.lineHeight.xs : theme.lineHeight.default)};
+    font-size: ${({ $small }) => ($small ? theme.fontSize.s : theme.fontSize.default)};
+    line-height: ${({ $small }) => ($small ? theme.lineHeight.xs : theme.lineHeight.default)};
     cursor: pointer;
     background-color: transparent;
     border: 2px solid transparent;
@@ -66,9 +66,9 @@ const ButtonElement = styled__default.button `
         pointer-events: none;
     }
 
-    ${({ isReversed }) => isReversed && `flex-direction: row-reverse;`}
+    ${({ $isReversed }) => $isReversed && `flex-direction: row-reverse;`}
 
-    ${({ darkBg, isLinkStyle }) => (darkBg ? getDarkBgStyle() : getStandardStyle({ isLinkStyle }))}
+    ${({ $darkBg, $isLinkStyle }) => $darkBg ? getDarkBgStyle() : getStandardStyle({ isLinkStyle: $isLinkStyle })}
 
     &:focus-visible {
         border-radius: ${theme.radius.s};
@@ -102,7 +102,7 @@ const ButtonElement = styled__default.button `
         }
     `}
 
-    ${({ hideChildrenMobile }) => hideChildrenMobile &&
+    ${({ $hideChildrenMobile }) => $hideChildrenMobile &&
     css `
             span.dnasg-icon + span {
                 display: none;
@@ -119,7 +119,7 @@ const ButtonElement = styled__default.button `
 const ButtonIcon = forwardRef((_a, ref) => {
     var { icon = EditUnderline, 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue } = _a, props = __rest(_a, ["icon", 'data-testid', 'data-no-close', 'data-track-value']);
     const position = props.isReversed ? 'right' : 'left';
-    return (React__default.createElement(ButtonElement, Object.assign({ ref: ref, 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, "aria-expanded": props.ariaExpanded, "aria-label": props.ariaLabel, isLinkStyle: props.isLinkStyle }, props.dataAttributes), props.loading ? (React__default.createElement(PixelLoader, { color: props.darkBg ? theme.color.default.white : theme.color.default.black, label: props.loadingLabel })) : (React__default.createElement(React__default.Fragment, null,
+    return (React__default.createElement(ButtonElement, Object.assign({ ref: ref, 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, "aria-expanded": props.ariaExpanded, "aria-label": props.ariaLabel, "$isLinkStyle": props.isLinkStyle }, props.dataAttributes), props.loading ? (React__default.createElement(PixelLoader, { color: props.darkBg ? theme.color.default.white : theme.color.default.black, label: props.loadingLabel })) : (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(Icon, { icon: icon, color: props.darkBg ? theme.color.default.white : theme.color.default.pink, size: props.small ? '1.25rem' : '1.5rem', position: props.children ? position : undefined, "aria-hidden": true }),
         props.children && (React__default.createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, props.children))))));
 });

package/build/es/components/ButtonPrimary/ButtonPrimary.js

@@ -1,9 +1,9 @@
-import styled__default from 'styled-components';
+import { styled } from 'styled-components';
 import theme from '../../themes/theme.js';
 import Button, { shade } from '../Button/Button.js';
 
 /** @visibleName Button Primary */
-const ButtonPrimary = styled__default(Button) `
+const ButtonPrimary = styled(Button) `
     color: ${theme.color.text.white};
     background-color: ${theme.color.default.pink};
     border: 2px solid ${theme.color.default.pink};

package/build/es/components/ButtonRound/ButtonRound.js

@@ -1,11 +1,11 @@
 import { __rest } from 'tslib';
 import React__default from 'react';
-import styled__default from 'styled-components';
+import { styled } from 'styled-components';
 import theme from '../../themes/theme.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
 import ButtonPrimary from '../ButtonPrimary/ButtonPrimary.js';
 
-const ButtonElement = styled__default(ButtonPrimary) `
+const ButtonElement = styled(ButtonPrimary) `
     display: flex;
     min-width: initial;
     width: ${getMultipliedSize(theme.base.baseWidth, 3.2)};

package/build/es/components/ButtonSecondary/ButtonSecondary.js

@@ -1,9 +1,9 @@
-import styled__default from 'styled-components';
+import { styled } from 'styled-components';
 import theme from '../../themes/theme.js';
 import Button, { shade } from '../Button/Button.js';
 
 /** @visibleName Button Secondary */
-const ButtonSecondary = styled__default(Button) `
+const ButtonSecondary = styled(Button) `
     color: ${theme.color.text.plum};
     background-color: ${theme.color.background.sand.E02};
     border: 2px solid ${theme.color.line.L02};

package/build/es/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/es/components/Carousel/Carousel.js

@@ -2,7 +2,7 @@ import { __rest } from 'tslib';
 import { ArrowRight } from '@dnanpm/icons';
 import React__default, { useRef, useState, useEffect, Children, useMemo } from 'react';
 import useWindowSize from '../../hooks/useWindowSize.js';
-import styled from '../../themes/styled.js';
+import { styled } from 'styled-components';
 import theme from '../../themes/theme.js';
 import { media, getMultipliedSize } from '../../utils/styledUtils.js';
 import ButtonArrow from '../ButtonArrow/ButtonArrow.js';
@@ -33,7 +33,7 @@ const SlidesWrapper = styled.div `
     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;
@@ -45,11 +45,11 @@ const SlideItem = styled.div `
     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.div `
@@ -83,7 +83,7 @@ const PaginationItem = styled.button `
     background-color: ${theme.color.background.white.default};
     transition: all 0.2s ease-in-out;
 
-    ${({ isActive }) => isActive &&
+    ${({ $isActive }) => $isActive &&
     `
         width: 3rem;
         border-color: ${theme.color.default.pink};
@@ -117,7 +117,7 @@ const Knob = styled.div `
     position: relative;
     top: 0;
     left: 0;
-    width: calc(100% / ${({ knobSize }) => knobSize});
+    width: calc(100% / ${({ $knobSize }) => $knobSize});
     height: 100%;
     border-radius: ${theme.radius.pill};
     background-color: ${theme.color.background.pink.default};
@@ -353,12 +353,12 @@ const Carousel = (_a) => {
                 React__default.createElement(ButtonArrow, { direction: "left", "aria-label": props.previousAriaLabel, onClick: handleNavigationButtonPreviousClick, disabled: currentIndex <= 0, type: "button" }),
                 React__default.createElement(ButtonArrow, { direction: "right", "aria-label": props.nextAriaLabel, onClick: handleNavigationButtonNextClick, disabled: currentIndex + visibleItems >= Children.count(props.children), type: "button" }))),
         React__default.createElement(Content, { "data-testid": dataTestId && `${dataTestId}-content` },
-            React__default.createElement(SlidesWrapper, { ref: slidesWrapperRef, onPointerDown: handleSlidesPointerDown, gap: slidesWrapperGapSizePx / 16 }, Children.map(props.children, child => (React__default.createElement(SlideItem, { visibleItems: visibleItems, itemWidthCorrection: itemWidthCorrection, isSwiping: isSwiping, onPointerDown: handlePointerDown }, child))))),
+            React__default.createElement(SlidesWrapper, { ref: slidesWrapperRef, onPointerDown: handleSlidesPointerDown, "$gap": slidesWrapperGapSizePx / 16 }, Children.map(props.children, child => (React__default.createElement(SlideItem, { "$visibleItems": visibleItems, "$itemWidthCorrection": itemWidthCorrection, "$isSwiping": isSwiping, onPointerDown: handlePointerDown }, child))))),
         React__default.createElement(Footer, { "data-testid": dataTestId && `${dataTestId}-footer` },
             React__default.createElement(Pagination, null, [...Array(totalSwipeSteps).keys()].map((value, index) => (React__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.createElement(Scrollbar, { ref: scrollbarRef, onPointerDown: handleScrollbarPointerDown },
-                React__default.createElement(Knob, { ref: knobRef, knobSize: slideScreensCount })),
+                React__default.createElement(Knob, { ref: knobRef, "$knobSize": slideScreensCount })),
             props.footerButton && (React__default.createElement(FooterButton, null,
                 React__default.createElement(ButtonIcon, { icon: ArrowRight, onClick: props.onFooterButtonClick }, props.footerButton))))));
 };

package/build/es/components/Checkbox/Checkbox.js

@@ -1,6 +1,6 @@
 import { __rest } from 'tslib';
 import React__default from 'react';
-import styled from '../../themes/styled.js';
+import { styled } from 'styled-components';
 import theme from '../../themes/theme.js';
 import { getMultipliedSize, getDividedSize } from '../../utils/styledUtils.js';
 

package/build/es/components/Chip/Chip.js

@@ -1,6 +1,6 @@
 import { __rest } from 'tslib';
 import React__default from 'react';
-import styled__default from 'styled-components';
+import { styled } from 'styled-components';
 import theme from '../../themes/theme.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
 
@@ -27,7 +27,7 @@ const getStyling = ({ $type }) => {
             `;
     }
 };
-const Element = styled__default.div `
+const Element = styled.div `
     all: unset;
     display: inline-block;
     border-radius: ${theme.radius.pill};

package/build/es/components/DateTimePicker/DateTimePicker.js

@@ -2,7 +2,7 @@ import { __rest } from 'tslib';
 import { ChevronLeft, ChevronRight } from '@dnanpm/icons';
 import React__default, { useState } from 'react';
 import ReactDatePicker from 'react-datepicker';
-import styled__default from 'styled-components';
+import { styled } from 'styled-components';
 import theme from '../../themes/theme.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
 import ButtonIcon from '../ButtonIcon/ButtonIcon.js';
@@ -48,7 +48,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.div `
+const Wrapper = styled.div `
     position: relative;
 
     & .react-datepicker {
@@ -211,7 +211,7 @@ const Wrapper = styled__default.div `
         }
     }
 `;
-const MonthSelector = styled__default.div `
+const MonthSelector = styled.div `
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -220,11 +220,23 @@ const MonthSelector = styled__default.div `
         fill: ${theme.color.text.gray};
     }
 `;
-const CurrentMonth = styled__default.div `
+const CurrentMonth = styled.div `
     font-size: ${theme.fontSize.default};
     line-height: ${theme.lineHeight.default};
     font-weight: ${theme.fontWeight.bold};
 `;
+const StyledInput = styled(Input) `
+    ${({ disabled }) => !disabled &&
+    `
+        div {
+            background-color: ${theme.color.background.white.default};
+        }
+
+        .react-datepicker-ignore-onclickoutside-lock-icon {
+            display: none;
+        }
+    `}
+`;
 const DateTimePickerCustomHeader = ({ date, decreaseMonth, increaseMonth, locale, }) => (React__default.createElement(MonthSelector, null,
     React__default.createElement(ButtonIcon, { icon: ChevronLeft, onClick: decreaseMonth }),
     React__default.createElement(CurrentMonth, null, sentenceCase(date.toLocaleString(locale, {
@@ -272,7 +284,7 @@ const DateTimePicker = (_a) => {
         .join(' - ');
     const getDateTimePickerCustomHeader = (args) => DateTimePickerCustomHeader(Object.assign(Object.assign({}, args), { locale }));
     return (React__default.createElement(Wrapper, { id: props.id, className: props.className, "data-testid": dataTestId },
-        React__default.createElement(Input, { 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.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.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

package/build/es/components/Divider/Divider.js

@@ -1,16 +1,16 @@
 import { __rest } from 'tslib';
 import React__default from 'react';
-import styled__default from 'styled-components';
+import { styled } from 'styled-components';
 import theme from '../../themes/theme.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
 
-const DividerWrapper = styled__default.div `
+const DividerWrapper = styled.div `
     display: flex;
     justify-content: center;
     align-items: center;
     width: 100%;
-    margin: ${({ margin }) => margin || `${getMultipliedSize(theme.base.baseHeight, 1)} 0`};
-    ${({ padding }) => padding && `padding: ${padding}`};
+    margin: ${({ $margin }) => $margin || `${getMultipliedSize(theme.base.baseHeight, 1)} 0`};
+    ${({ $padding }) => $padding && `padding: ${$padding}`};
     border-style: solid;
     border-color: ${theme.color.line.L03};
     border-width: 1px ${({ children }) => !children && '0 0 0'};
@@ -18,7 +18,7 @@ const DividerWrapper = styled__default.div `
 const Divider = (_a) => {
     var { 'data-testid': dataTestId } = _a, props = __rest(_a, ['data-testid']);
     const isFocusableSeparator = Boolean(props.children);
-    return (React__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.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));
 };
 
 export { Divider as default };

package/build/es/components/DnaLogo/DnaLogo.js

@@ -1,6 +1,6 @@
 import { __rest } from 'tslib';
 import React__default from 'react';
-import styled from '../../themes/styled.js';
+import { styled } from 'styled-components';
 
 const colorVariationsMap = {
     default: {
@@ -25,7 +25,7 @@ const Container = styled.span `
     display: inline-flex;
     width: ${({ size }) => size};
     height: ${({ size }) => size};
-    ${({ margin }) => margin && `margin: ${margin}`};
+    ${({ $margin }) => $margin && `margin: ${$margin}`};
 
     svg {
         width: ${({ size }) => size};
@@ -57,7 +57,7 @@ const DnaLogo = (_a) => {
         const matches = /(\d+)(.+)/.exec(size);
         margin = matches && `${Number(matches[1]) * 0.25}${matches[2]}`;
     }
-    return (React__default.createElement(Container, { size: size, margin: margin, className: props.className, onClick: props.onClick }, type.indexOf('logotype') === -1 ? React__default.createElement(Emblem, { type: type }) : React__default.createElement(Logotype, { type: type })));
+    return (React__default.createElement(Container, { size: size, "$margin": margin, className: props.className, onClick: props.onClick }, type.indexOf('logotype') === -1 ? React__default.createElement(Emblem, { type: type }) : React__default.createElement(Logotype, { type: type })));
 };
 
 export { DnaLogo as default };

package/build/es/components/Drawer/Drawer.js

@@ -2,7 +2,7 @@ import { __rest } from 'tslib';
 import { Close } from '@dnanpm/icons';
 import React__default from 'react';
 import ReactModal from 'react-modal';
-import styled, { createGlobalStyle, keyframes } from '../../themes/styled.js';
+import { createGlobalStyle, keyframes, styled } from 'styled-components';
 import theme from '../../themes/theme.js';
 import getElevationShadow from '../../utils/common.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
@@ -120,7 +120,7 @@ const Header = styled.div `
     gap: 0.25rem;
     border-bottom: 1px solid ${theme.color.line.L03};
     padding: 1.25rem;
-    background-color: ${({ variant }) => variant === 'light'
+    background-color: ${({ $variant }) => $variant === 'light'
     ? theme.color.background.white.default
     : theme.color.background.plum.E02};
     width: 100%;
@@ -131,13 +131,13 @@ const Header = styled.div `
     }
 `;
 const Title = styled.h2 `
-    font-size: ${({ size }) => (size === 'small' ? theme.fontSize.h2S : theme.fontSize.h2M)};
-    line-height: ${({ size }) => (size === 'small' ? theme.lineHeight.h2S : theme.lineHeight.h2M)};
-    color: ${({ variant }) => variant === 'light' ? theme.color.default.black : theme.color.default.white};
+    font-size: ${({ $size }) => ($size === 'small' ? theme.fontSize.h2S : theme.fontSize.h2M)};
+    line-height: ${({ $size }) => $size === 'small' ? theme.lineHeight.h2S : theme.lineHeight.h2M};
+    color: ${({ $variant }) => $variant === 'light' ? theme.color.default.black : theme.color.default.white};
 `;
 const Subtitle = styled.p `
-    font-size: ${({ size }) => (size === 'small' ? theme.fontSize.l : theme.fontSize.xl)};
-    color: ${({ variant }) => variant === 'light' ? theme.color.default.black : theme.color.default.white};
+    font-size: ${({ $size }) => ($size === 'small' ? theme.fontSize.l : theme.fontSize.xl)};
+    color: ${({ $variant }) => $variant === 'light' ? theme.color.default.black : theme.color.default.white};
 `;
 const CloseButton = styled(ButtonClose) `
     margin: 0;
@@ -148,7 +148,7 @@ const CloseButton = styled(ButtonClose) `
     : theme.color.background.plum.default};
 `;
 const Content = styled.div `
-    padding: ${({ padding }) => padding};
+    padding: ${({ $padding }) => $padding};
     margin: 0;
 `;
 const Footer = styled.div `
@@ -171,14 +171,14 @@ const Drawer = (_a) => {
         React__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, side: side },
             React__default.createElement(StyledBox, { "data-testid": dataTestId, elevation: "extraHigh", margin: props.margin, padding: "0" },
                 React__default.createElement(ContentContainer, null,
-                    React__default.createElement(Header, { variant: variant, "data-testid": dataTestId && `${dataTestId}-header` },
-                        React__default.createElement(Title, { size: size, variant: variant }, props.title),
-                        props.subtitle && (React__default.createElement(Subtitle, { size: size, variant: variant }, props.subtitle))),
+                    React__default.createElement(Header, { "$variant": variant, "data-testid": dataTestId && `${dataTestId}-header` },
+                        React__default.createElement(Title, { "$size": size, "$variant": variant }, props.title),
+                        props.subtitle && (React__default.createElement(Subtitle, { "$size": size, "$variant": variant }, props.subtitle))),
                     closeButton && isClosable && (React__default.createElement(CloseButton, { onClick: props.onRequestClose, "aria-label": props.closeLabel, "data-testid": dataTestId && `${dataTestId}-close-button`, variant: variant },
                         React__default.createElement(Close, { color: variant === 'light'
                                 ? theme.color.default.plum
                                 : theme.color.default.white }))),
-                    React__default.createElement(Content, { "data-testid": dataTestId && `${dataTestId}-content`, padding: padding }, props.children)),
+                    React__default.createElement(Content, { "data-testid": dataTestId && `${dataTestId}-content`, "$padding": padding }, props.children)),
                 props.footer && (React__default.createElement(Footer, { "data-testid": dataTestId && `${dataTestId}-footer` }, props.footer)))),
         React__default.createElement(GlobalStyle, null)));
 };

package/build/es/components/EmptyState/EmptyState.js

@@ -1,7 +1,7 @@
 import { __rest } from 'tslib';
 import { Info } from '@dnanpm/icons';
 import React__default from 'react';
-import styled from '../../themes/styled.js';
+import { styled } from 'styled-components';
 import theme from '../../themes/theme.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
 import Box from '../Box/Box.js';