@dnanpm/styleguide 3.10.0 → 3.11.0

package/build/cjs/components/ReadMore/ReadMore.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('../../themes/styled.js');
+var styledComponents = require('styled-components');
 var theme = require('../../themes/theme.js');
 var ButtonIcon = require('../ButtonIcon/ButtonIcon.js');
 
@@ -13,23 +13,23 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const Container = styled.default.div `
+const Container = styledComponents.styled.div `
     display: flex;
     flex-direction: column;
 `;
-const Content = styled.default.div `
-    ${({ isExpanded, collapsedSize }) => !isExpanded &&
+const Content = styledComponents.styled.div `
+    ${({ $isExpanded, $collapsedSize }) => !$isExpanded &&
     `
         overflow: hidden;
-        max-height: ${collapsedSize};
+        max-height: ${$collapsedSize};
         mask-image: linear-gradient(${theme.default.color.background.white.default}, transparent);
     `}
 `;
-const ButtonWrapper = styled.default.div `
+const ButtonWrapper = styledComponents.styled.div `
     margin: 0.625rem 0.313rem;
-    align-self: ${({ buttonPosition }) => (buttonPosition === 'right' ? 'flex-end' : 'flex-start')};
+    align-self: ${({ $buttonPosition }) => $buttonPosition === 'right' ? 'flex-end' : 'flex-start'};
 `;
-const StyledButtonIcon = styled.default(ButtonIcon.default) `
+const StyledButtonIcon = styledComponents.styled(ButtonIcon.default) `
     color: ${theme.default.color.text.pink};
 
     &:hover {
@@ -90,8 +90,8 @@ const ReadMore = (_a) => {
         return child;
     };
     return (React__default.default.createElement(Container, { id: props.id, className: props.className, "data-testid": dataTestId, "aria-label": props.ariaLabel, role: "region" },
-        React__default.default.createElement(Content, { ref: contentRef, isExpanded: temporaryStateManagement, collapsedSize: collapsedSize, "data-testid": dataTestId && `${dataTestId}-content`, "aria-hidden": temporaryStateManagement ? 'false' : 'true', tabIndex: temporaryStateManagement ? 0 : -1 }, React.Children.map(props.children, forceTabIndexOnTextLinks)),
-        React__default.default.createElement(ButtonWrapper, { buttonPosition: props.buttonPosition },
+        React__default.default.createElement(Content, { ref: contentRef, "$isExpanded": temporaryStateManagement, "$collapsedSize": collapsedSize, "data-testid": dataTestId && `${dataTestId}-content`, "aria-hidden": temporaryStateManagement ? 'false' : 'true', tabIndex: temporaryStateManagement ? 0 : -1 }, React.Children.map(props.children, forceTabIndexOnTextLinks)),
+        React__default.default.createElement(ButtonWrapper, { "$buttonPosition": props.buttonPosition },
             React__default.default.createElement(StyledButtonIcon, { ref: buttonRef, icon: temporaryStateManagement ? icons.ChevronUp : icons.ChevronDown, onClick: handleOnClick, "aria-expanded": temporaryStateManagement }, temporaryButtonLabel || props.buttonLabel))));
 };
 

package/build/cjs/components/Search/Search.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('../../themes/styled.js');
+var styledComponents = require('styled-components');
 var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
 var ButtonIcon = require('../ButtonIcon/ButtonIcon.js');
@@ -14,12 +14,12 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const Container = styled.default.div `
+const Container = styledComponents.styled.div `
     display: flex;
     align-items: center;
     border-bottom: 2px solid ${theme.default.color.default.pink};
 `;
-const Input = styled.default.input `
+const Input = styledComponents.styled.input `
     display: inline-block;
     appearance: none;
     border: 0;
@@ -56,7 +56,7 @@ const Input = styled.default.input `
         display: none;
     }
 `;
-const Button = styled.default(ButtonIcon.default) `
+const Button = styledComponents.styled(ButtonIcon.default) `
     margin: 0 ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};
 `;
 const Search = (_a) => {

package/build/cjs/components/SecondaryNavigation/SecondaryNavigation.js

@@ -6,7 +6,7 @@ var tslib = require('tslib');
 var icons = require('@dnanpm/icons');
 var React = require('react');
 var useOutsideClick = require('../../hooks/useOutsideClick.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 Icon = require('../Icon/Icon.js');
@@ -15,7 +15,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const SecondaryNavigationWrapper = styled.default.nav `
+const SecondaryNavigationWrapper = styledComponents.styled.nav `
     font-size: ${theme.default.fontSize.default};
     padding: 0;
     background-color: ${({ whiteBg }) => whiteBg ? theme.default.color.background.white.default : 'transparent'};
@@ -28,7 +28,7 @@ const SecondaryNavigationWrapper = styled.default.nav `
         border-bottom: 1px solid ${theme.default.color.line.L03};
     }
 `;
-const MobileSelector = styled.default.button `
+const MobileSelector = styledComponents.styled.button `
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -49,10 +49,10 @@ const MobileSelector = styled.default.button `
         display: none;
     }
 `;
-const MobileSelectorTitleWrapper = styled.default.div `
+const MobileSelectorTitleWrapper = styledComponents.styled.div `
     display: flex;
 `;
-const MobileSelectorArrow = styled.default.span `
+const MobileSelectorArrow = styledComponents.styled.span `
     display: flex;
 
     .dnasg-icon svg {
@@ -60,7 +60,7 @@ const MobileSelectorArrow = styled.default.span `
         transform: rotate(${({ isOpen }) => (isOpen ? '180deg' : '0deg')});
     }
 `;
-const MobileSelectorCheck = styled.default.span `
+const MobileSelectorCheck = styledComponents.styled.span `
     margin-left: auto;
 
     .dnasg-icon {
@@ -69,7 +69,7 @@ const MobileSelectorCheck = styled.default.span `
         }
     }
 `;
-const SecondaryNavigationList = styled.default.ul `
+const SecondaryNavigationList = styledComponents.styled.ul `
     padding: 0;
     list-style-type: none;
     margin: 0;
@@ -92,7 +92,7 @@ const SecondaryNavigationList = styled.default.ul `
         max-width: ${({ 'max-width': maxWidth }) => (maxWidth ? `${maxWidth}px` : 'none')};
     }
 `;
-const SecondaryNavigationListElement = styled.default.li `
+const SecondaryNavigationListElement = styledComponents.styled.li `
     margin: 0 ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2)};
 
     a {
@@ -127,7 +127,7 @@ const SecondaryNavigationListElement = styled.default.li `
         }
     }
 `;
-const IconWrapper = styled.default.span `
+const IconWrapper = styledComponents.styled.span `
     position: relative;
     display: flex;
     margin-right: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};

package/build/cjs/components/Selectbox/Selectbox.js

@@ -6,7 +6,7 @@ var tslib = require('tslib');
 var icons = require('@dnanpm/icons');
 var React = require('react');
 var Select = require('react-select');
-var styled = require('../../themes/styled.js');
+var styledComponents = require('styled-components');
 var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
 var Icon = require('../Icon/Icon.js');
@@ -18,11 +18,11 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var Select__default = /*#__PURE__*/_interopDefaultCompat(Select);
 
-const FieldContainer = styled.default.div `
+const FieldContainer = styledComponents.styled.div `
     color: ${theme.default.color.text.black};
     margin-bottom: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};
 `;
-const ErrorMessage = styled.default.div `
+const ErrorMessage = styledComponents.styled.div `
     font-size: ${theme.default.fontSize.s};
     font-weight: ${theme.default.fontWeight.medium};
     line-height: ${theme.default.lineHeight.s};

package/build/cjs/components/Switch/Switch.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');
 var LabelText = require('../LabelText/LabelText.js');
@@ -34,74 +34,74 @@ const borderRadius = 1.875; // 30px
 const borderSize = 0.125; // 2px
 const railWidth = 3; // 48px
 const railHeight = height + borderSize * 2; // 30px
-const Container = styled.default.div `
+const Container = styledComponents.styled.div `
     display: inline-flex;
     min-height: ${railHeight}rem;
     position: relative;
     cursor: pointer;
     user-select: none;
 `;
-const Button = styled.default.div `
+const Button = styledComponents.styled.div `
     height: ${height}rem;
     transition: transform 0.3s;
     position: absolute;
     content: ' ';
     width: ${height}rem;
     border-radius: 50%;
-    ${({ isChecked }) => `
-        transform: translate3d(${isChecked ? railWidth - height : 0}rem, 0, 0);
-        background-color: ${isChecked ? theme.default.color.default.pink : theme.default.color.line.L01};
+    ${({ $isChecked }) => `
+        transform: translate3d(${$isChecked ? railWidth - height : 0}rem, 0, 0);
+        background-color: ${$isChecked ? theme.default.color.default.pink : theme.default.color.line.L01};
         border: ${borderSize}rem solid ${theme.default.color.default.white};
         z-index: 2;
-        left: ${isChecked ? -borderSize * 2 : 0}rem;
+        left: ${$isChecked ? -borderSize * 2 : 0}rem;
     `};
 `;
-const Checkbox = styled.default.input `
+const Checkbox = styledComponents.styled.input `
     opacity: 0;
     position: absolute;
     top: 0;
     left: 0;
 
-    :disabled {
+    &:disabled {
         cursor: not-allowed;
     }
-    :disabled + label {
+    &:disabled + label {
         cursor: not-allowed;
         color: ${theme.default.color.line.L01}${theme.default.color.transparency.T40};
     }
-    :disabled + label > div {
+    &:disabled + label > div {
         cursor: not-allowed;
         border-color: ${({ checked }) => checked ? theme.default.color.default.pink : theme.default.color.line.L01}${theme.default.color.transparency
     .T40};
     }
-    :disabled + label div div {
+    &:disabled + label div div {
         pointer-events: none;
         background-color: ${({ checked }) => checked ? theme.default.color.default.pink : theme.default.color.line.L01}${theme.default.color.transparency
     .T40};
     }
 
-    :focus-visible + label > div {
+    &:focus-visible + label > div {
         outline: none;
         box-shadow: 0px 0px 0px 2px ${theme.default.color.focus.dark};
     }
 `;
-const LabelWrapper = styled.default(LabelText.default) `
+const LabelWrapper = styledComponents.styled(LabelText.default) `
     position: relative;
     cursor: pointer;
     padding-top: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 0.4)};
     padding-left: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 6)};
     user-select: none;
 `;
-const Rail = styled.default.div `
+const Rail = styledComponents.styled.div `
     width: ${railWidth}rem;
     position: absolute;
     top: 0;
     left: 0;
     border-radius: ${borderRadius}rem;
     overflow: hidden;
-    ${({ isChecked }) => `
+    ${({ $isChecked }) => `
         height: ${railHeight}rem;
-        border: ${borderSize}rem solid ${isChecked ? theme.default.color.default.pink : theme.default.color.line.L01};
+        border: ${borderSize}rem solid ${$isChecked ? theme.default.color.default.pink : theme.default.color.line.L01};
         background-color: ${theme.default.color.background.white.default};
         z-index: 0;
    `};
@@ -117,8 +117,8 @@ const Switch = (_a) => {
     return (React__namespace.createElement(Container, { className: props.className, "data-testid": dataTestId },
         React__namespace.createElement(Checkbox, { id: props.id, name: props.name, checked: Boolean(props.isChecked), "aria-label": accessibleLabel, disabled: props.disabled, onChange: handleChange, role: "switch", type: "checkbox", "data-checked": Boolean(props.isChecked) }),
         React__namespace.createElement(LabelWrapper, { htmlFor: props.id },
-            React__namespace.createElement(Rail, { isChecked: props.isChecked },
-                React__namespace.createElement(Button, { isChecked: props.isChecked })),
+            React__namespace.createElement(Rail, { "$isChecked": props.isChecked },
+                React__namespace.createElement(Button, { "$isChecked": props.isChecked })),
             props.label && props.label)));
 };
 

package/build/cjs/components/Tab/Tab.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');
 var Box = require('../Box/Box.js');
@@ -15,13 +15,13 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 // TODO: Change to button HTML element as a part of https://jira.dna.fi/browse/STYLE-622
-const TabLabel = styled.default.li `
+const TabLabel = styledComponents.styled.li `
     display: inline-block;
     list-style: none;
     font-size: ${theme.default.fontSize.default};
     line-height: ${theme.default.lineHeight.default};
-    font-weight: ${({ isActive }) => (isActive ? theme.default.fontWeight.bold : theme.default.fontWeight.book)};
-    background-color: ${({ isActive }) => isActive ? theme.default.color.background.white.default : theme.default.color.background.sand.E01};
+    font-weight: ${({ $isActive }) => ($isActive ? theme.default.fontWeight.bold : theme.default.fontWeight.book)};
+    background-color: ${({ $isActive }) => $isActive ? theme.default.color.background.white.default : theme.default.color.background.sand.E01};
     border-radius: ${theme.default.radius.default} ${theme.default.radius.default} 0 0;
     border: 1px solid ${theme.default.color.line.L03};
     border-bottom: 0 none;
@@ -35,7 +35,7 @@ const TabLabel = styled.default.li `
         outline: none;
     }
 `;
-const TabStyle = styled.default.li `
+const TabStyle = styledComponents.styled.li `
     display: inline-block;
     list-style: none;
     cursor: pointer;
@@ -46,7 +46,7 @@ const TabStyle = styled.default.li `
     line-height: ${theme.default.lineHeight.default};
     font-weight: ${theme.default.fontWeight.book};
 
-    ${({ isActive }) => isActive &&
+    ${({ $isActive }) => $isActive &&
     `
             color: ${theme.default.color.text.pink};
             background-color: ${theme.default.color.background.sand.E01};
@@ -57,14 +57,14 @@ const TabStyle = styled.default.li `
             padding: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1.6)} 0;
         `}
     
-    ${({ isActive, $type }) => isActive &&
+    ${({ $isActive, $type }) => $isActive &&
     $type === 'underlined' &&
     `
             border-bottom: 2px solid ${theme.default.color.default.pink};
             background-color: transparent;
         `}
 `;
-const ContentContainer = styled.default.div `
+const ContentContainer = styledComponents.styled.div `
     ${({ $type }) => {
     if ($type === 'box' || $type === 'default') {
         return `
@@ -94,12 +94,12 @@ const Tab = (_a) => {
     };
     const isActive = props.activeTab ? props.activeTab === props.label : props.isActive;
     return type === 'box' || type === 'default' || type === 'panel' ? (React__default.default.createElement(React__default.default.Fragment, null,
-        React__default.default.createElement(TabLabel, { role: "tab", id: props.id, "$type": type, "aria-selected": isActive, isActive: isActive, onClick: onClickHandler, tabIndex: isActive ? 0 : -1 }, props.label),
+        React__default.default.createElement(TabLabel, { role: "tab", id: props.id, "$type": type, "aria-selected": isActive, "$isActive": isActive, onClick: onClickHandler, tabIndex: isActive ? 0 : -1 }, props.label),
         props.isStateless &&
             (props.children && (props.activeTab === props.label || props.isActive) ? (React__default.default.createElement(ContentContainer, { role: "tabpanel", "$type": props.tabStyle || type, as: (type === 'box' || type === 'default') && !props.tabStyle
                     ? Box.default
                     : undefined }, props.children)) : (React__default.default.createElement(Divider.default, { margin: "0" }))))) : (React__default.default.createElement(React__default.default.Fragment, null,
-        React__default.default.createElement(TabStyle, { role: "tab", id: props.id, "$type": props.tabStyle || type, "aria-selected": isActive, isActive: isActive, onClick: onClickHandler, tabIndex: isActive ? 0 : -1 }, props.label),
+        React__default.default.createElement(TabStyle, { role: "tab", id: props.id, "$type": props.tabStyle || type, "aria-selected": isActive, "$isActive": isActive, onClick: onClickHandler, tabIndex: isActive ? 0 : -1 }, props.label),
         props.isStateless &&
             props.children &&
             (props.activeTab === props.label || props.isActive) && (React__default.default.createElement(ContentContainer, { role: "tabpanel", "$type": props.tabStyle || type }, props.children))));

package/build/cjs/components/Tabs/Tabs.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 Box = require('../Box/Box.js');
 var Tab = require('../Tab/Tab.js');
@@ -13,12 +13,12 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const Tablist = styled.default.ul `
+const Tablist = styledComponents.styled.ul `
     display: flex;
     flex-flow: row wrap;
     padding: 0;
 
-    ${({ isFullWidth }) => isFullWidth &&
+    ${({ $isFullWidth }) => $isFullWidth &&
     `
         align-items: stretch;
 
@@ -28,7 +28,7 @@ const Tablist = styled.default.ul `
         }
     `}
 
-    ${({ $type, isNarrowUnderlined }) => {
+    ${({ $type, $isNarrowUnderlined }) => {
     if ($type === 'box' || $type === 'default' || $type === 'panel') {
         return `
                 margin: 0;
@@ -51,7 +51,7 @@ const Tablist = styled.default.ul `
     }
     if ($type === 'underlined') {
         return `
-                gap: ${isNarrowUnderlined ? '1.25rem' : '2.5rem'};
+                gap: ${$isNarrowUnderlined ? '1.25rem' : '2.5rem'};
                 border-bottom: 1px solid ${theme.default.color.line.L02};
             `;
     }
@@ -63,12 +63,12 @@ const Tablist = styled.default.ul `
     return '';
 }}
 `;
-const ContentContainer = styled.default.div `
-    ${({ $type, isFullWidth }) => {
+const ContentContainer = styledComponents.styled.div `
+    ${({ $type, $isFullWidth }) => {
     if ($type === 'box' || $type === 'default') {
         return `
                 border-top-left-radius: 0;
-                ${isFullWidth ? 'border-top-right-radius: 0;' : ''}
+                ${$isFullWidth ? 'border-top-right-radius: 0;' : ''}
             `;
     }
     if ($type === 'panel') {
@@ -120,11 +120,11 @@ const Tabs = (_a) => {
         setActiveTab((outerActiveTab === null || outerActiveTab === void 0 ? void 0 : outerActiveTab.props.label) || tabs[0].props.label);
     }
     return (React__default.default.createElement("div", { className: props.className ? `tabs ${props.className}` : 'tabs', "data-testid": dataTestId },
-        React__default.default.createElement(Tablist, { role: "tablist", "$type": props.tabStyle || type, isFullWidth: props.isFullWidth, isNarrowUnderlined: props.isNarrowUnderlined, onKeyDown: onKeyDown }, React.Children.map(props.children, tab => React.isValidElement(tab) &&
+        React__default.default.createElement(Tablist, { role: "tablist", "$type": props.tabStyle || type, "$isFullWidth": props.isFullWidth, "$isNarrowUnderlined": props.isNarrowUnderlined, onKeyDown: onKeyDown }, React.Children.map(props.children, tab => React.isValidElement(tab) &&
             tab.type === Tab.default && (React__default.default.createElement(Tab.default, { id: tab.props.id, key: tab.props.label, label: tab.props.label, type: props.tabStyle || type, isActive: tab.props.isActive
                 ? tab.props.isActive
                 : activeTab === tab.props.label, activeTab: tab.props.activeTab, onClick: onClickTabItem, className: tab.props.className, "data-testid": tab.props['data-testid'] })))),
-        React__default.default.createElement(ContentContainer, { role: "tabpanel", "$type": props.tabStyle || type, isFullWidth: props.isFullWidth, as: (type === 'box' || type === 'default') && !props.tabStyle ? Box.default : undefined }, React.Children.map(props.children, tab => React.isValidElement(tab) &&
+        React__default.default.createElement(ContentContainer, { role: "tabpanel", "$type": props.tabStyle || type, "$isFullWidth": props.isFullWidth, as: (type === 'box' || type === 'default') && !props.tabStyle ? Box.default : undefined }, React.Children.map(props.children, tab => React.isValidElement(tab) &&
             tab.type === Tab.default &&
             (tab.props.isActive || tab.props.label === activeTab) &&
             tab.props.children))));

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

@@ -89,7 +89,11 @@ interface Props {
      * Allows to pass testid string for testing purposes
      */
     'data-testid'?: string;
+    /**
+     * Accessible label text when no visible label is used
+     */
+    ariaLabel?: string;
 }
-declare const Textarea: ({ height, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+declare const Textarea: ({ height, "data-testid": dataTestId, ariaLabel, ...props }: Props) => React.JSX.Element;
 /** @component */
 export default Textarea;

package/build/cjs/components/Textarea/Textarea.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');
 var LabelText = require('../LabelText/LabelText.js');
@@ -13,11 +13,11 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const FieldContainer = styled.default.div `
+const FieldContainer = styledComponents.styled.div `
     color: ${theme.default.color.text.black};
     margin-bottom: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};
 `;
-const StyledTextarea = styled.default.textarea `
+const StyledTextarea = styledComponents.styled.textarea `
     display: block;
     font-family: ${theme.default.fontFamily.default};
     font-size: ${theme.default.fontSize.default};
@@ -50,19 +50,19 @@ const StyledTextarea = styled.default.textarea `
         color: ${theme.default.color.text.black}${theme.default.color.transparency.T40};
     }
 `;
-const Message = styled.default.div `
+const Message = styledComponents.styled.div `
     font-size: ${theme.default.fontSize.s};
     font-weight: ${theme.default.fontWeight.book};
     line-height: ${theme.default.lineHeight.s};
     color: ${theme.default.color.text.gray};
     margin-top: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 0.5)};
 `;
-const ErrorMessage = styled.default(Message) `
+const ErrorMessage = styledComponents.styled(Message) `
     font-weight: ${theme.default.fontWeight.medium};
     color: ${theme.default.color.notification.error};
 `;
 const Textarea = (_a) => {
-    var { height = 3, 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["height", 'data-testid']);
+    var { height = 3, 'data-testid': dataTestId, ariaLabel } = _a, props = tslib.__rest(_a, ["height", 'data-testid', "ariaLabel"]);
     const inputRef = React.useRef(null);
     const handleOnBlur = (e) => {
         if (props.onBlur) {
@@ -80,11 +80,14 @@ const Textarea = (_a) => {
             inputRef.current.focus();
         }
     };
+    const errorId = props.status === 'error' && props.errorMessage ? `${props.id}-error` : undefined;
+    const commentId = props.commentMessage ? `${props.id}-comment` : undefined;
+    const describedBy = [errorId, commentId].filter(Boolean).join(' ') || undefined;
     return (React__default.default.createElement(FieldContainer, { className: props.className },
         props.label && (React__default.default.createElement(LabelText.default, { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label`, status: props.status === 'error' ? props.status : undefined, isMandatory: props.required }, props.label)),
-        React__default.default.createElement(StyledTextarea, { id: props.id, name: props.name, ref: inputRef, value: props.value, rows: height, placeholder: props.placeholder, tabIndex: props.tabIndex, onChange: handleChange, onBlur: handleOnBlur, onFocus: props.onFocus, onClick: onClick, onKeyDown: props.onKeyDown, onKeyPress: props.onKeyPress, required: props.required, disabled: props.disabled, "aria-disabled": props.disabled, "aria-label": props.id, "data-testid": dataTestId }),
-        props.commentMessage && (React__default.default.createElement(Message, { "data-testid": dataTestId && `${dataTestId}-comment` }, props.commentMessage)),
-        props.status === 'error' && props.errorMessage && (React__default.default.createElement(ErrorMessage, { "data-testid": dataTestId && `${dataTestId}-error` }, props.errorMessage))));
+        React__default.default.createElement(StyledTextarea, { id: props.id, name: props.name, ref: inputRef, value: props.value, rows: height, placeholder: props.placeholder, tabIndex: props.tabIndex, onChange: handleChange, onBlur: handleOnBlur, onFocus: props.onFocus, onClick: onClick, onKeyDown: props.onKeyDown, onKeyPress: props.onKeyPress, required: props.required, disabled: props.disabled, "aria-label": !props.label ? ariaLabel : undefined, "aria-describedby": describedBy, "data-testid": dataTestId }),
+        props.commentMessage && (React__default.default.createElement(Message, { id: commentId, "data-testid": dataTestId && `${dataTestId}-comment` }, props.commentMessage)),
+        props.status === 'error' && props.errorMessage && (React__default.default.createElement(ErrorMessage, { id: errorId, "data-testid": dataTestId && `${dataTestId}-error` }, props.errorMessage))));
 };
 
 exports.default = Textarea;

package/build/cjs/components/Toaster/Toaster.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 Box = require('../Box/Box.js');
@@ -15,7 +15,6 @@ 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 iconsMap = {
     info: icons.Info,
@@ -23,10 +22,10 @@ const iconsMap = {
     warning: icons.Warning,
     error: icons.Error,
 };
-const ToasterWrapper = styled__default.default.div `
+const ToasterWrapper = styledComponents.styled.div `
     width: 300px;
 `;
-const StyledBox = styled__default.default(Box.default) `
+const StyledBox = styledComponents.styled(Box.default) `
     position: relative;
     font-size: ${theme.default.fontSize.s};
     font-weight: ${theme.default.fontWeight.medium};
@@ -36,7 +35,7 @@ const StyledBox = styled__default.default(Box.default) `
     align-items: center;
     padding-right: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 4.5)};
 `;
-const IconWrapper = styled__default.default.div `
+const IconWrapper = styledComponents.styled.div `
     display: none;
     align-items: center;
     width: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 4)};
@@ -46,10 +45,10 @@ const IconWrapper = styled__default.default.div `
         display: flex;
     `}
 `;
-const ContentWrapper = styled__default.default.div `
+const ContentWrapper = styledComponents.styled.div `
     flex: 1;
 `;
-const ButtonCloseStyled = styled__default.default(ButtonClose.default) `
+const ButtonCloseStyled = styledComponents.styled(ButtonClose.default) `
     display: flex;
     top: auto;
 `;

package/build/cjs/components/Tooltip/Tooltip.js

@@ -6,7 +6,7 @@ var tslib = require('tslib');
 var icons = require('@dnanpm/icons');
 var React = require('react');
 var reactTooltip = require('react-tooltip');
-var styled = require('../../themes/styled.js');
+var styledComponents = require('styled-components');
 var theme = require('../../themes/theme.js');
 var common = require('../../utils/common.js');
 var styledUtils = require('../../utils/styledUtils.js');
@@ -16,7 +16,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const Helper = styled.default.button `
+const Helper = styledComponents.styled.button `
     display: inline-block;
     vertical-align: middle;
     background: transparent;
@@ -38,7 +38,7 @@ const Helper = styled.default.button `
         border-radius: 100%;
     }
 
-    ${({ isClickable }) => isClickable && `cursor: pointer`};
+    ${({ $isClickable }) => $isClickable && `cursor: pointer`};
 `;
 const getArrowOverrides = () => {
     const arrowConfig = {
@@ -58,7 +58,7 @@ const getArrowOverrides = () => {
     `)
         .join('');
 };
-const StyledReactTooltip = styled.default(reactTooltip.Tooltip) `
+const StyledReactTooltip = styledComponents.styled(reactTooltip.Tooltip) `
     --rt-opacity: 1;
 
     border: 1px solid ${theme.default.color.line.L02};
@@ -107,9 +107,9 @@ const Tooltip = (_a) => {
         scroll: true,
     };
     return (React__default.default.createElement(React__default.default.Fragment, null,
-        !props.hideTriggerElement && (React__default.default.createElement(Helper, { "data-tooltip-id": props.id, isClickable: isClickable, className: props.className, "data-testid": dataTestId, type: "button", "data-tooltip-delay-hide": 500, "aria-describedby": props.id },
+        !props.hideTriggerElement && (React__default.default.createElement(Helper, { "data-tooltip-id": props.id, "$isClickable": isClickable, className: props.className, "data-testid": dataTestId, type: "button", "data-tooltip-delay-hide": 500, "aria-describedby": props.id },
             React__default.default.createElement(Icon.default, { icon: icons.Info, size: "1rem", position: props.position, "aria-hidden": true }))),
-        React__default.default.createElement(StyledReactTooltip, { id: props.id, place: props.placement, openOnClick: isClickable, clickable: isHoverable, isMultiline: props.isMultiline, disableStyleInjection: true, role: isHoverable ? 'dialog' : 'tooltip', openEvents: handleReactTooltipOpenEvents, globalCloseEvents: handleReactTooltipGlobalCloseEvents, closeEvents: handleReactTooltipCloseEvents, "data-testid": dataTestId && `${dataTestId}-content` }, props.children)));
+        React__default.default.createElement(StyledReactTooltip, { id: props.id, place: props.placement, openOnClick: isClickable, clickable: isHoverable, "$isMultiline": props.isMultiline, disableStyleInjection: true, role: isHoverable ? 'dialog' : 'tooltip', openEvents: handleReactTooltipOpenEvents, globalCloseEvents: handleReactTooltipGlobalCloseEvents, closeEvents: handleReactTooltipCloseEvents, "data-testid": dataTestId && `${dataTestId}-content` }, props.children)));
 };
 
 exports.default = Tooltip;