@dnanpm/styleguide 3.10.0 → 3.11.0

package/build/cjs/components/Accordion/Accordion.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 AccordionItem = require('../AccordionItem/AccordionItem.js');
@@ -12,11 +12,10 @@ var AccordionItem = require('../AccordionItem/AccordionItem.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 AccordionContainer = styled__default.default.div `
+const AccordionContainer = styledComponents.styled.div `
     ${p => p.type === 'box' &&
-    styled.css `
+    styledComponents.css `
             & > * {
                 margin: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1)} 0;
             }

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var icons = require('@dnanpm/icons');
 var React = require('react');
-var styled = require('styled-components');
+var styledComponents = require('styled-components');
 var useResizeObserver = require('../../hooks/useResizeObserver.js');
 var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
@@ -15,28 +15,29 @@ var Icon = require('../Icon/Icon.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 AccordionItemContainer = styled__default.default.div `
+const AccordionItemContainer = styledComponents.styled.div `
     ${p => p.type === 'panel' &&
-    styled.css `
+    styledComponents.css `
             border-bottom: 1px solid ${theme.default.color.line.L02};
         `}
 `;
-const AccordionItemTitle = styled__default.default.div `
+const AccordionItemTitle = styledComponents.styled.div `
     font-size: ${theme.default.fontSize.default};
     line-height: ${theme.default.lineHeight.default};
     font-weight: ${theme.default.fontWeight.bold};
     display: flex;
     justify-content: space-between;
     flex-direction: row;
-    cursor: ${p => (p.showPointer ? 'pointer' : 'default')};
+    cursor: ${p => (p.$showPointer ? 'pointer' : 'default')};
     padding: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1.6)}
         ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2)};
-    color: ${p => p.isExpanded && p.highlightSelected ? theme.default.color.default.pink : theme.default.color.default.black};
+    color: ${p => p.$isExpanded && p.$highlightSelected
+    ? theme.default.color.default.pink
+    : theme.default.color.default.black};
     transition: color 0.2s;
-    ${p => p.highlightSelected &&
-    styled.css `
+    ${p => p.$highlightSelected &&
+    styledComponents.css `
             &:hover,
             &:active {
                 color: ${theme.default.color.default.pink};
@@ -44,17 +45,17 @@ const AccordionItemTitle = styled__default.default.div `
             }
         `}
 `;
-const AccordionItemContentWrapper = styled__default.default.div `
+const AccordionItemContentWrapper = styledComponents.styled.div `
     overflow: hidden;
     transition: all 0.2s ease;
-    height: ${p => (p.isExpanded ? p.maxHeight / 16 + 1.25 : 0)}rem;
+    height: ${p => (p.$isExpanded ? p.$maxHeight / 16 + 1.25 : 0)}rem;
     padding: 0 ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2)};
-    visibility: ${p => (p.isExpanded ? 'visible' : 'hidden')};
+    visibility: ${p => (p.$isExpanded ? 'visible' : 'hidden')};
 `;
-const AccordionItemContent = styled__default.default.div `
+const AccordionItemContent = styledComponents.styled.div `
     padding-bottom: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1.6)};
 `;
-const AccordionItemCloseButton = styled__default.default.div `
+const AccordionItemCloseButton = styledComponents.styled.div `
     display: flex;
     justify-content: flex-end;
     line-height: ${theme.default.lineHeight.default};
@@ -80,10 +81,10 @@ const AccordionItem = (_a) => {
     };
     const hasFunctionality = Boolean(props.onClick || props.onKeyDown);
     const itemContent = (React__default.default.createElement(AccordionItemContainer, { id: props.id, type: type, className: props.className, "data-testid": dataTestId },
-        React__default.default.createElement(AccordionItemTitle, { ref: accordionButtonRef, id: accordionButtonId, tabIndex: hasFunctionality ? 0 : -1, onClick: props.onClick, onKeyDown: props.onKeyDown, isExpanded: Boolean(props.isExpanded), highlightSelected: highlightSelected, "aria-expanded": Boolean(props.isExpanded), "aria-controls": accordionContentId, showPointer: hasFunctionality, "data-testid": `${dataTestId}-title`, role: "button" },
+        React__default.default.createElement(AccordionItemTitle, { ref: accordionButtonRef, id: accordionButtonId, tabIndex: hasFunctionality ? 0 : -1, onClick: props.onClick, onKeyDown: props.onKeyDown, "$isExpanded": Boolean(props.isExpanded), "$highlightSelected": highlightSelected, "aria-expanded": Boolean(props.isExpanded), "aria-controls": accordionContentId, "$showPointer": hasFunctionality, "data-testid": `${dataTestId}-title`, role: "button" },
             props.title,
             props.isExpanded ? (React__default.default.createElement(Icon.default, { icon: icons.ChevronUp, color: theme.default.color.default.black, position: "right", "aria-label": props.closeLabel })) : (React__default.default.createElement(Icon.default, { icon: icons.ChevronDown, color: theme.default.color.default.black, position: "right", "aria-label": props.openLabel }))),
-        React__default.default.createElement(AccordionItemContentWrapper, { maxHeight: contentHeight, isExpanded: props.isExpanded, "aria-labelledby": accordionButtonId, "aria-hidden": !props.isExpanded, "data-testid": `${dataTestId}-content`, role: "region" },
+        React__default.default.createElement(AccordionItemContentWrapper, { "$maxHeight": contentHeight, "$isExpanded": props.isExpanded, "aria-labelledby": accordionButtonId, "aria-hidden": !props.isExpanded, "data-testid": `${dataTestId}-content`, role: "region" },
             React__default.default.createElement(AccordionItemContent, { id: accordionContentId, ref: contentRef }, props.children)),
         hasCloseButton && props.isExpanded && (React__default.default.createElement(AccordionItemCloseButton, { tabIndex: 0, onClick: e => handleInteraction(props.onClick, e), onKeyDown: e => handleInteraction(props.onKeyDown, e), "aria-label": props.closeLabel, "data-testid": `${dataTestId}-close-button`, role: "button" },
             React__default.default.createElement("span", null, props.closeLabel),

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

@@ -59,8 +59,24 @@ interface Props {
      * Allows to pass a custom className
      */
     className?: string;
+    /**
+     * Accessible label for the increase button
+     */
+    increaseButtonAriaLabel?: string;
+    /**
+     * Accessible label for the decrease button
+     */
+    decreaseButtonAriaLabel?: string;
+    /**
+     * Accessible label for the remove button (when removable is true and min is reached)
+     */
+    removeButtonAriaLabel?: string;
+    /**
+     * Accessible label for the input field
+     */
+    inputAriaLabel?: string;
 }
 /** @visibleName Amount Selector */
-declare const AmountSelector: ({ onChange, value, step, min, max, disabled, readonly, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+declare const AmountSelector: ({ onChange, value, step, min, max, disabled, readonly, "data-testid": dataTestId, increaseButtonAriaLabel, decreaseButtonAriaLabel, removeButtonAriaLabel, inputAriaLabel, ...props }: Props) => React.JSX.Element;
 /** @component */
 export default AmountSelector;

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

@@ -5,21 +5,20 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var icons = require('@dnanpm/icons');
 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');
 var ButtonArrow = require('../ButtonArrow/ButtonArrow.js');
-var Icon = require('../Icon/Icon.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const Container = styled.default.div `
+const Container = styledComponents.styled.div `
     display: flex;
     width: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 12)};
 `;
-const Button = styled.default(ButtonArrow.default) `
+const Button = styledComponents.styled(ButtonArrow.default) `
     display: inline-flex;
     width: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 4)};
     height: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 4)};
@@ -38,8 +37,19 @@ const Button = styled.default(ButtonArrow.default) `
         border-top-right-radius: ${theme.default.radius.s};
         border-bottom-right-radius: ${theme.default.radius.s};
     }
+
+    &:disabled,
+    &[disabled] {
+        background-color: ${theme.default.color.background.sand.E02 + theme.default.color.transparency.T30};
+        border: 1px solid ${theme.default.color.line.L01};
+        pointer-events: auto;
+        cursor: not-allowed;
+        svg {
+            opacity: 0.3;
+        }
+    }
 `;
-const Input = styled.default.input `
+const Input = styledComponents.styled.input `
     width: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 4)};
     height: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 4)};
     font-family: ${theme.default.fontFamily.default};
@@ -60,7 +70,10 @@ const Input = styled.default.input `
     &:disabled,
     &[disabled] {
         background-color: ${theme.default.color.background.sand.E02 + theme.default.color.transparency.T30};
-        border: 1px solid ${theme.default.color.line.L02 + theme.default.color.transparency.T30};
+        border: 1px solid ${theme.default.color.transparency.T30 + theme.default.color.line.L01};
+        svg {
+            opacity: 0.3;
+        }
     }
 
     &:read-only {
@@ -77,7 +90,7 @@ const Input = styled.default.input `
 `;
 /** @visibleName Amount Selector */
 const AmountSelector = (_a) => {
-    var { onChange, value = 1, step = 1, min = 1, max, disabled = false, readonly = true, 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["onChange", "value", "step", "min", "max", "disabled", "readonly", 'data-testid']);
+    var { onChange, value = 1, step = 1, min = 1, max, disabled = false, readonly = true, 'data-testid': dataTestId, increaseButtonAriaLabel, decreaseButtonAriaLabel, removeButtonAriaLabel, inputAriaLabel } = _a, props = tslib.__rest(_a, ["onChange", "value", "step", "min", "max", "disabled", "readonly", 'data-testid', "increaseButtonAriaLabel", "decreaseButtonAriaLabel", "removeButtonAriaLabel", "inputAriaLabel"]);
     const isMinReached = (val) => val < min;
     const isMaxReached = (val) => Boolean(max && val > max);
     const isInRange = (val) => !isMinReached(val) && !isMaxReached(val);
@@ -107,11 +120,41 @@ const AmountSelector = (_a) => {
             onChange(min);
         }
     };
+    const getMinButtonAriaLabel = () => {
+        if (props.removable && isMinReached(value - step)) {
+            return removeButtonAriaLabel;
+        }
+        if (decreaseButtonAriaLabel) {
+            return decreaseButtonAriaLabel;
+        }
+        return undefined;
+    };
+    const handleKeyDown = (e) => {
+        const allowedKeys = new Set(['Tab', 'Backspace', 'Delete', 'ArrowLeft', 'ArrowRight']);
+        if (/^[0-9]$/.test(e.key) || allowedKeys.has(e.key)) {
+            return;
+        }
+        if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            if (!isMaxReached(value + step)) {
+                onChange(value + step);
+            }
+            return;
+        }
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            if (!isMinReached(value - step)) {
+                onChange(value - step);
+            }
+            return;
+        }
+        e.preventDefault();
+    };
     return (React__default.default.createElement(Container, { "data-testid": dataTestId, className: props.className },
-        React__default.default.createElement(Button, { icon: React__default.default.createElement(Icon.default, { icon: props.removable && isMinReached(value - step) ? icons.Trash : icons.Minus, size: styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2) }), variant: "secondary", onClick: decrease, disabled: disabled, type: "button", "data-testid": dataTestId &&
+        React__default.default.createElement(Button, { icon: props.removable && isMinReached(value - step) ? (React__default.default.createElement(icons.Trash, { size: styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2) })) : (React__default.default.createElement(icons.Minus, { size: styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2) })), variant: "secondary", onClick: decrease, disabled: disabled || (isMinReached(value - step) && !props.removable), type: "button", "aria-label": getMinButtonAriaLabel(), "data-testid": dataTestId &&
                 `${dataTestId}${props.removable && isMinReached(value - step) ? '-remove' : '-decrease'}` }),
-        React__default.default.createElement(Input, { id: props.id, name: props.name, type: "number", onChange: handleChange, value: value, readOnly: readonly || disabled, disabled: disabled }),
-        React__default.default.createElement(Button, { icon: React__default.default.createElement(Icon.default, { icon: icons.Plus, size: styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2) }), variant: "secondary", onClick: increase, disabled: disabled, type: "button", "data-testid": dataTestId ? `${dataTestId}-increase` : undefined })));
+        React__default.default.createElement(Input, { id: props.id, name: props.name, type: "number", onChange: handleChange, value: value, min: min, max: max, step: step, readOnly: readonly || disabled, disabled: disabled, "aria-label": inputAriaLabel, onKeyDown: handleKeyDown, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value }),
+        React__default.default.createElement(Button, { icon: React__default.default.createElement(icons.Plus, { size: styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2) }), variant: "secondary", onClick: increase, disabled: disabled || isMaxReached(value + step), type: "button", "aria-label": increaseButtonAriaLabel || undefined, "data-testid": dataTestId ? `${dataTestId}-increase` : undefined })));
 };
 
 exports.default = AmountSelector;

package/build/cjs/components/Box/Box.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 common = require('../../utils/common.js');
 var styledUtils = require('../../utils/styledUtils.js');
@@ -12,21 +12,20 @@ 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 BoxWrapper = styled__default.default.div `
+const BoxWrapper = styledComponents.styled.div `
     border: 1px solid ${theme.default.color.line.L04};
     ${({ width }) => width && `width: ${width}`};
     ${({ height }) => height && `height: ${height}`};
-    ${({ margin }) => margin && `margin: ${margin}`};
-    padding: ${({ padding }) => padding || styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2)};
+    ${({ $margin }) => $margin && `margin: ${$margin}`};
+    padding: ${({ $padding }) => $padding || styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2)};
     background-color: ${theme.default.color.default.white};
     border-radius: ${theme.default.radius.default};
-    ${({ $elevation, shadow }) => $elevation !== 'none' && common.default({ elevation: $elevation, shadow })}
+    ${({ $elevation, $shadow }) => $elevation !== 'none' && common.default({ elevation: $elevation, shadow: $shadow })}
 `;
 const Box = (_a) => {
     var { elevation = 'none', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["elevation", 'data-testid']);
-    return (React__default.default.createElement(BoxWrapper, { id: props.id, "$elevation": elevation, shadow: props.shadow, width: props.width, height: props.height, margin: props.margin, padding: props.padding, className: props.className, "data-testid": dataTestId, role: props.role, "aria-label": props.ariaLabel, "aria-live": props.ariaLive }, props.children));
+    return (React__default.default.createElement(BoxWrapper, { id: props.id, "$elevation": elevation, "$shadow": props.shadow, "$margin": props.margin, "$padding": props.padding, width: props.width, height: props.height, className: props.className, "data-testid": dataTestId, role: props.role, "aria-label": props.ariaLabel, "aria-live": props.ariaLive }, props.children));
 };
 
 exports.default = Box;

package/build/cjs/components/Button/Button.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 PixelLoader = require('../PixelLoader/PixelLoader.js');
@@ -12,7 +12,6 @@ var PixelLoader = require('../PixelLoader/PixelLoader.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);
 
 // Only Button component specific shades to be used on user interaction styles
 const shade = {
@@ -31,20 +30,20 @@ const shade = {
         },
     },
 };
-const Element = styled__default.default.button `
+const Element = styledComponents.styled.button `
     display: inline-block;
     font-family: ${theme.default.fontFamily.default};
     font-weight: ${theme.default.fontWeight.bold};
-    font-size: ${({ small }) => (small ? theme.default.fontSize.s : theme.default.fontSize.default)};
-    line-height: ${({ small }) => (small ? theme.default.lineHeight.xs : theme.default.lineHeight.default)};
-    min-width: ${({ small }) => styledUtils.getMultipliedSize(theme.default.base.baseWidth, small ? 10 : 12.8)};
-    width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
+    font-size: ${({ $small }) => ($small ? theme.default.fontSize.s : theme.default.fontSize.default)};
+    line-height: ${({ $small }) => ($small ? theme.default.lineHeight.xs : theme.default.lineHeight.default)};
+    min-width: ${({ $small }) => styledUtils.getMultipliedSize(theme.default.base.baseWidth, $small ? 10 : 12.8)};
+    width: ${({ $fullWidth }) => ($fullWidth ? '100%' : 'auto')};
     cursor: pointer;
-    color: ${({ darkBg }) => (darkBg ? theme.default.color.text.white : theme.default.color.text.plum)};
+    color: ${({ $darkBg }) => ($darkBg ? theme.default.color.text.white : theme.default.color.text.plum)};
     background-color: transparent;
     border-radius: ${theme.default.radius.pill};
     border: 2px solid
-        ${({ darkBg }) => (darkBg ? theme.default.color.default.white : theme.default.color.default.plum)};
+        ${({ $darkBg }) => ($darkBg ? theme.default.color.default.white : theme.default.color.default.plum)};
     padding: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 0.6)}
         ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2)};
 
@@ -53,32 +52,34 @@ const Element = styled__default.default.button `
     }
 
     &:focus-visible {
-        color: ${({ darkBg }) => (darkBg ? theme.default.color.text.plum : theme.default.color.text.white)};
-        background-color: ${({ darkBg }) => darkBg ? theme.default.color.default.white : shade.plum.darker};
+        color: ${({ $darkBg }) => ($darkBg ? theme.default.color.text.plum : theme.default.color.text.white)};
+        background-color: ${({ $darkBg }) => $darkBg ? theme.default.color.default.white : shade.plum.darker};
         border: 2px solid
-            ${({ darkBg }) => (darkBg ? theme.default.color.focus.dark : theme.default.color.focus.light)};
+            ${({ $darkBg }) => ($darkBg ? theme.default.color.focus.dark : theme.default.color.focus.light)};
         box-shadow: 0px 0px 0px 2px
-            ${({ darkBg }) => (darkBg ? theme.default.color.focus.light : theme.default.color.focus.dark)};
+            ${({ $darkBg }) => ($darkBg ? theme.default.color.focus.light : theme.default.color.focus.dark)};
         outline: none;
     }
 
     &:hover {
-        color: ${({ darkBg }) => (darkBg ? theme.default.color.text.plum : theme.default.color.text.white)};
-        background-color: ${({ darkBg }) => darkBg ? theme.default.color.default.white : shade.plum.darker};
+        color: ${({ $darkBg }) => ($darkBg ? theme.default.color.text.plum : theme.default.color.text.white)};
+        background-color: ${({ $darkBg }) => $darkBg ? theme.default.color.default.white : shade.plum.darker};
 
         &:focus-visible {
             border: 2px solid
-                ${({ darkBg }) => (darkBg ? theme.default.color.focus.dark : theme.default.color.focus.light)};
+                ${({ $darkBg }) => ($darkBg ? theme.default.color.focus.dark : theme.default.color.focus.light)};
             box-shadow: 0px 0px 0px 2px
-                ${({ darkBg }) => (darkBg ? theme.default.color.focus.light : theme.default.color.focus.dark)};
+                ${({ $darkBg }) => ($darkBg ? theme.default.color.focus.light : theme.default.color.focus.dark)};
         }
     }
 
     &:active {
-        color: ${({ darkBg }) => (darkBg ? theme.default.color.text.plum : theme.default.color.text.white)};
-        background-color: ${({ darkBg }) => darkBg ? theme.default.color.default.white + theme.default.color.transparency.T90 : shade.plum.lighter};
+        color: ${({ $darkBg }) => ($darkBg ? theme.default.color.text.plum : theme.default.color.text.white)};
+        background-color: ${({ $darkBg }) => $darkBg
+    ? theme.default.color.default.white + theme.default.color.transparency.T90
+    : shade.plum.lighter};
         border: 2px solid
-            ${({ darkBg }) => darkBg
+            ${({ $darkBg }) => $darkBg
     ? theme.default.color.default.white + theme.default.color.transparency.T90
     : shade.plum.lighter};
         outline: none;
@@ -86,9 +87,11 @@ const Element = styled__default.default.button `
 
     &:disabled,
     &[disabled] {
-        color: ${({ darkBg }) => darkBg ? theme.default.color.text.white + theme.default.color.transparency.T70 : theme.default.color.text.gray};
+        color: ${({ $darkBg }) => $darkBg
+    ? theme.default.color.text.white + theme.default.color.transparency.T70
+    : theme.default.color.text.gray};
         border: 2px solid
-            ${({ darkBg }) => darkBg
+            ${({ $darkBg }) => $darkBg
     ? theme.default.color.default.white + theme.default.color.transparency.T30
     : theme.default.color.default.plum + theme.default.color.transparency.T30};
         pointer-events: none;
@@ -123,7 +126,7 @@ const Element = styled__default.default.button `
 /** @visibleName Button */
 const Button = (_a) => {
     var { type = 'submit', 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue, 'aria-label': ariaLabel } = _a, props = tslib.__rest(_a, ["type", 'data-testid', 'data-no-close', 'data-track-value', 'aria-label']);
-    return (React__default.default.createElement(Element, Object.assign({ id: props.id, as: props.href ? 'a' : undefined, type: props.href ? undefined : type, href: props.href, target: props.href ? props.target : undefined, rel: props.target === '_blank' ? 'noopener noreferrer' : undefined, onClick: props.onClick, onMouseDown: props.onMouseDown, small: props.small, darkBg: props.darkBg, fullWidth: props.fullWidth, "$loading": props.loading, tabIndex: props.loading ? -1 : 0, "data-loading": props.loading, className: props.className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, "aria-label": ariaLabel }, props.dataAttributes, (!props.href && {
+    return (React__default.default.createElement(Element, Object.assign({ id: props.id, as: props.href ? 'a' : undefined, type: props.href ? undefined : type, href: props.href, target: props.href ? props.target : undefined, rel: props.target === '_blank' ? 'noopener noreferrer' : undefined, onClick: props.onClick, onMouseDown: props.onMouseDown, "$small": props.small, "$darkBg": props.darkBg, "$fullWidth": props.fullWidth, "$loading": props.loading, tabIndex: props.loading ? -1 : 0, "data-loading": props.loading, className: props.className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, "aria-label": ariaLabel }, props.dataAttributes, (!props.href && {
         name: props.name,
         disabled: props.disabled,
     })), props.loading ? (React__default.default.createElement(PixelLoader.default, { color: props.darkBg ? theme.default.color.default.white : theme.default.color.default.plum, label: props.loadingLabel })) : (React__default.default.createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, props.children))));

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var icons = require('@dnanpm/icons');
 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');
@@ -14,7 +14,6 @@ var ButtonSecondary = require('../ButtonSecondary/ButtonSecondary.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 iconsMap = {
     up: icons.ChevronUp,
@@ -34,7 +33,7 @@ const overrideStyles = `
     align-items: center;
 `;
 const buttonsMap = {
-    primary: styled__default.default(ButtonPrimary.default) `
+    primary: styledComponents.styled(ButtonPrimary.default) `
         ${overrideStyles};
         border-radius: ${theme.default.radius.circle};
 
@@ -43,7 +42,7 @@ const buttonsMap = {
             color: ${theme.default.color.text.black};
         }
     `,
-    secondary: styled__default.default(ButtonSecondary.default) `
+    secondary: styledComponents.styled(ButtonSecondary.default) `
         ${overrideStyles};
         color: ${theme.default.color.text.black};
         border: 1px solid ${theme.default.color.line.L01};

package/build/cjs/components/ButtonCard/ButtonCard.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var icons = require('@dnanpm/icons');
 var React = require('react');
-var styled = require('styled-components');
+var styledComponents = require('styled-components');
 var theme = require('../../themes/theme.js');
 var Box = require('../Box/Box.js');
 var Icon = require('../Icon/Icon.js');
@@ -13,9 +13,8 @@ var Icon = require('../Icon/Icon.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 ButtonCardWrapper = styled__default.default.button `
+const ButtonCardWrapper = styledComponents.styled.button `
     display: block;
     padding: 0;
     border: 0 none;
@@ -43,7 +42,7 @@ const ButtonCardWrapper = styled__default.default.button `
         text-decoration: none;
     }
 `;
-const StyledBox = styled__default.default(Box.default) `
+const StyledBox = styledComponents.styled(Box.default) `
     display: flex;
     gap: ${({ size }) => (size === 'small' ? '0.313rem' : '1rem')};
     border: 1px solid ${theme.default.color.line.L03};
@@ -51,13 +50,13 @@ const StyledBox = styled__default.default(Box.default) `
     ${({ size }) => size === 'small' && 'flex-direction: column'};
     ${({ size }) => size !== 'small' && 'align-items: center'};
 `;
-const VisualContent = styled__default.default.div `
+const VisualContent = styledComponents.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.default.div `
+const TextContentWrapper = styledComponents.styled.div `
     display: flex;
     flex-grow: 1;
     align-items: center;
@@ -65,13 +64,13 @@ const TextContentWrapper = styled__default.default.div `
     gap: ${({ size }) => (size === 'small' ? '0.625rem' : '1rem')};
     min-width: 0;
 `;
-const TextContent = styled__default.default.div `
+const TextContent = styledComponents.styled.div `
     display: flex;
     align-items: flex-start;
     flex-direction: column;
     min-width: 0;
 `;
-const Title = styled__default.default.div `
+const Title = styledComponents.styled.div `
     font-size: ${theme.default.fontSize.default};
     line-height: ${theme.default.lineHeight.default};
     font-weight: ${theme.default.fontWeight.bold};
@@ -93,7 +92,7 @@ const Title = styled__default.default.div `
         font-size: ${theme.default.fontSize.xl};
     `};
 `;
-const Subtitle = styled__default.default.div `
+const Subtitle = styledComponents.styled.div `
     color: ${theme.default.color.text.gray};
     font-size: ${theme.default.fontSize.s};
     line-height: ${theme.default.lineHeight.s};
@@ -115,7 +114,7 @@ const Subtitle = styled__default.default.div `
         font-size: ${theme.default.fontSize.default};
     `};
 `;
-const CtaIcon = styled__default.default(Icon.default) `
+const CtaIcon = styledComponents.styled(Icon.default) `
     color: ${theme.default.color.text.pink};
 
     ${ButtonCardWrapper}:hover & {

package/build/cjs/components/ButtonClose/ButtonClose.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');
 
@@ -12,7 +12,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const ButtonElement = styled.default.button `
+const ButtonElement = styledComponents.styled.button `
     position: absolute;
     top: 0;
     right: 0;

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var icons = require('@dnanpm/icons');
 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 Icon = require('../Icon/Icon.js');
@@ -14,7 +14,6 @@ var PixelLoader = require('../PixelLoader/PixelLoader.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 getStandardStyle = ({ isLinkStyle }) => {
     const colorValue = isLinkStyle ? theme.default.color.default.pink : theme.default.color.text.black;
@@ -57,13 +56,13 @@ const getDarkBgStyle = () => {
         }
     `;
 };
-const ButtonElement = styled__default.default.button `
+const ButtonElement = styledComponents.styled.button `
     display: inline-flex;
     align-items: center;
     font-family: ${theme.default.fontFamily.default};
     font-weight: ${theme.default.fontWeight.bold};
-    font-size: ${({ small }) => (small ? theme.default.fontSize.s : theme.default.fontSize.default)};
-    line-height: ${({ small }) => (small ? theme.default.lineHeight.xs : theme.default.lineHeight.default)};
+    font-size: ${({ $small }) => ($small ? theme.default.fontSize.s : theme.default.fontSize.default)};
+    line-height: ${({ $small }) => ($small ? theme.default.lineHeight.xs : theme.default.lineHeight.default)};
     cursor: pointer;
     background-color: transparent;
     border: 2px solid transparent;
@@ -75,9 +74,9 @@ const ButtonElement = styled__default.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.default.radius.s};
@@ -111,8 +110,8 @@ const ButtonElement = styled__default.default.button `
         }
     `}
 
-    ${({ hideChildrenMobile }) => hideChildrenMobile &&
-    styled.css `
+    ${({ $hideChildrenMobile }) => $hideChildrenMobile &&
+    styledComponents.css `
             span.dnasg-icon + span {
                 display: none;
             }
@@ -128,7 +127,7 @@ const ButtonElement = styled__default.default.button `
 const ButtonIcon = React.forwardRef((_a, ref) => {
     var { icon = icons.EditUnderline, 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue } = _a, props = tslib.__rest(_a, ["icon", 'data-testid', 'data-no-close', 'data-track-value']);
     const position = props.isReversed ? 'right' : 'left';
-    return (React__default.default.createElement(ButtonElement, 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.default.createElement(PixelLoader.default, { color: props.darkBg ? theme.default.color.default.white : theme.default.color.default.black, label: props.loadingLabel })) : (React__default.default.createElement(React__default.default.Fragment, null,
+    return (React__default.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.default.createElement(PixelLoader.default, { color: props.darkBg ? theme.default.color.default.white : theme.default.color.default.black, label: props.loadingLabel })) : (React__default.default.createElement(React__default.default.Fragment, null,
         React__default.default.createElement(Icon.default, { icon: icon, color: props.darkBg ? theme.default.color.default.white : theme.default.color.default.pink, size: props.small ? '1.25rem' : '1.5rem', position: props.children ? position : undefined, "aria-hidden": true }),
         props.children && (React__default.default.createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, props.children))))));
 });

package/build/cjs/components/ButtonPrimary/ButtonPrimary.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 Primary */
-const ButtonPrimary = styled__default.default(Button.default) `
+const ButtonPrimary = styledComponents.styled(Button.default) `
     color: ${theme.default.color.text.white};
     background-color: ${theme.default.color.default.pink};
     border: 2px solid ${theme.default.color.default.pink};