@dnanpm/styleguide 3.10.0 → 3.11.0

package/build/es/components/Modal/Modal.js

@@ -2,7 +2,7 @@ import { __rest } from 'tslib';
 import React__default from 'react';
 import ReactModal from 'react-modal';
 import { Close } from '@dnanpm/icons';
-import styled, { createGlobalStyle } from '../../themes/styled.js';
+import { createGlobalStyle, styled } from 'styled-components';
 import theme from '../../themes/theme.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
 import Box from '../Box/Box.js';
@@ -96,7 +96,7 @@ const ContentWrapper = styled.div `
 `;
 const Header = styled.div `
     padding: ${getMultipliedSize(theme.base.baseWidth, 2)};
-    background-color: ${({ variant }) => variant === 'dark'
+    background-color: ${({ $variant }) => $variant === 'dark'
     ? theme.color.background.plum.E02
     : theme.color.background.white.default};
     width: 100%;
@@ -109,7 +109,7 @@ const Header = styled.div `
 const Title = styled.h2 `
     font-size: ${theme.fontSize.h2M};
     line-height: ${theme.lineHeight.h2M};
-    color: ${({ variant }) => variant === 'light' ? theme.color.default.black : theme.color.default.white};
+    color: ${({ $variant }) => $variant === 'light' ? theme.color.default.black : theme.color.default.white};
 
     @media (max-width: ${sizeMap.small}) {
         font-size: ${theme.fontSize.h2S};
@@ -120,7 +120,7 @@ const CloseButton = styled(ButtonClose) `
     margin: 0;
     padding: 0.5rem;
     border-radius: 0 ${theme.radius.default} 0 ${theme.radius.default};
-    background-color: ${({ variant }) => variant === 'light'
+    background-color: ${({ $variant }) => $variant === 'light'
     ? theme.color.background.sand.E01
     : theme.color.background.plum.default};
     @media (max-width: ${sizeMap.mobile}) {
@@ -146,11 +146,11 @@ const Modal = (_a) => {
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(StyledReactModal, { id: props.id, size: size, isOpen: props.isOpen, overlayElement: ModalOverlay, contentElement: ModalContent, onRequestClose: props.onRequestClose, portalClassName: props.className, contentLabel: props.contentLabel, shouldCloseOnEsc: isClosable, shouldCloseOnOverlayClick: isClosable },
             React__default.createElement(StyledBox, { elevation: "extraHigh", "data-testid": dataTestId },
-                closeButton && isClosable && (React__default.createElement(CloseButton, { onClick: props.onRequestClose, "aria-label": props.closeLabel, "data-testid": dataTestId && `${dataTestId}-close-button`, variant: variant },
+                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(Header, { variant: variant, "data-testid": dataTestId && `${dataTestId}-header` }, props.title && (React__default.createElement(Title, { size: size, variant: variant }, props.title))),
+                React__default.createElement(Header, { "$variant": variant, "data-testid": dataTestId && `${dataTestId}-header` }, props.title && (React__default.createElement(Title, { "$size": size, "$variant": variant }, props.title))),
                 React__default.createElement(ContentWrapper, null, props.children),
                 props.footer && (React__default.createElement(Footer, { "data-testid": dataTestId && `${dataTestId}-footer` }, props.footer)))),
         React__default.createElement(GlobalStyle, null)));

package/build/es/components/Notification/Notification.js

@@ -1,6 +1,6 @@
 import { Close, Info, Check, Warning, Error } from '@dnanpm/icons';
 import React__default from 'react';
-import styled__default, { css } from 'styled-components';
+import { css, styled } from 'styled-components';
 import theme from '../../themes/theme.js';
 import ButtonClose from '../ButtonClose/ButtonClose.js';
 import Icon from '../Icon/Icon.js';
@@ -20,26 +20,26 @@ const sharedStyles = css `
     border-radius: ${theme.radius.s};
     border: 2px solid ${({ $type }) => theme.color.notification[$type]};
 `;
-const NotificationWrapper = styled__default.div `
+const NotificationWrapper = styled.div `
     ${sharedStyles}
     border-color: ${({ $type }) => theme.color.notification[$type]};
 `;
-const StaticWrapper = styled__default.div `
+const StaticWrapper = styled.div `
     ${sharedStyles}
     border-color: ${({ $type }) => theme.color.notification[$type]};
 `;
-const IconWrapper = styled__default.div `
+const IconWrapper = styled.div `
     display: flex;
     align-items: center;
     padding: 0.5rem;
     background-color: ${({ $type }) => theme.color.notification[$type]};
 `;
-const ContentWrapper = styled__default.div `
+const ContentWrapper = styled.div `
     margin: auto 0;
     padding: 0.5rem 0;
     width: 100%;
 `;
-const ButtonCloseStyled = styled__default(ButtonClose) `
+const ButtonCloseStyled = styled(ButtonClose) `
     position: static;
     margin: auto 0.5rem;
 

package/build/es/components/NotificationBadge/NotificationBadge.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';
 
 const NotificationBadgeElement = styled.div `
@@ -9,9 +9,9 @@ const NotificationBadgeElement = styled.div `
     align-items: center;
     font-size: ${theme.fontSize.xs};
     font-weight: ${theme.fontWeight.bold};
-    position: ${({ position }) => position || 'absolute'};
-    top: ${({ top }) => top || '0'};
-    right: ${({ right }) => right || '0'};
+    position: ${({ $position }) => $position || 'absolute'};
+    top: ${({ $top }) => $top || '0'};
+    right: ${({ $right }) => $right || '0'};
     width: 1rem;
     height: 1rem;
     color: ${theme.color.text.white};
@@ -35,7 +35,7 @@ const NotificationBadge = (_a) => {
     var { 'data-testid': dataTestId, visuallyHiddenText } = _a, props = __rest(_a, ['data-testid', "visuallyHiddenText"]);
     return (React__default.createElement(React__default.Fragment, null,
         visuallyHiddenText && React__default.createElement(VisuallyHidden, null, visuallyHiddenText),
-        React__default.createElement(NotificationBadgeElement, { id: props.id, position: props.position, top: props.top, right: props.right, className: props.className, "data-testid": dataTestId, "aria-hidden": "true" }, props.children)));
+        React__default.createElement(NotificationBadgeElement, { id: props.id, "$position": props.position, "$top": props.top, "$right": props.right, className: props.className, "data-testid": dataTestId, "aria-hidden": "true" }, props.children)));
 };
 
 export { NotificationBadge as default };

package/build/es/components/Overlay/Overlay.js

@@ -1,7 +1,7 @@
 import { __rest } from 'tslib';
 import React__default, { useRef, useEffect } from 'react';
 import { createPortal } from 'react-dom';
-import styled from '../../themes/styled.js';
+import { styled } from 'styled-components';
 import theme from '../../themes/theme.js';
 
 const Element = styled.div `

package/build/es/components/Pill/Pill.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';
 import { shade } from '../Button/Button.js';
@@ -51,7 +51,7 @@ const getDefaultButtonStyles = ({ isChecked, isDisabled, }) => {
         : ''}
     `;
 };
-const Label = styled__default.label `
+const Label = styled.label `
     all: unset;
     position: relative;
     display: inline-block;
@@ -60,11 +60,11 @@ const Label = styled__default.label `
     text-align: center;
     transition: all 0.2s ease-in-out;
 
-    ${({ isChecked, isDisabled, isDefaultButtonStyle }) => isDefaultButtonStyle
-    ? getDefaultButtonStyles({ isChecked, isDisabled })
-    : getStandardPillStyles({ isChecked, isDisabled })}
+    ${({ $isChecked, $isDisabled, $isDefaultButtonStyle }) => $isDefaultButtonStyle
+    ? getDefaultButtonStyles({ isChecked: $isChecked, isDisabled: $isDisabled })
+    : getStandardPillStyles({ isChecked: $isChecked, isDisabled: $isDisabled })}
 
-    ${({ isDisabled }) => `cursor: ${isDisabled ? 'not-allowed' : 'pointer'};`}
+    ${({ $isDisabled }) => `cursor: ${$isDisabled ? 'not-allowed' : 'pointer'};`}
 
     &:focus-within, *:focus > & {
         outline: none;
@@ -72,17 +72,17 @@ const Label = styled__default.label `
             0px 0px 0px 4px ${theme.color.focus.dark};
     }
 
-    ${({ position }) => (position === 'right' || position === 'middle') &&
+    ${({ $position }) => ($position === 'right' || $position === 'middle') &&
     `
             margin-left: ${getMultipliedSize(theme.base.baseWidth, 1)};
         `}
 
-    ${({ position }) => (position === 'left' || position === 'middle') &&
+    ${({ $position }) => ($position === 'left' || $position === 'middle') &&
     `
             margin-right: ${getMultipliedSize(theme.base.baseWidth, 1)};
         `}
     
-    ${({ position }) => position === 'auto' &&
+    ${({ $position }) => $position === 'auto' &&
     `
         margin: ${getMultipliedSize(theme.base.baseWidth, 0.5)};
 
@@ -95,7 +95,7 @@ const Label = styled__default.label `
         }
     `}
 `;
-const Input = styled__default.input `
+const Input = styled.input `
     appearance: none;
     display: block;
     border: 0 none;
@@ -113,7 +113,7 @@ const Input = styled__default.input `
 const Pill = (_a) => {
     var { type = 'none', 'data-testid': dataTestId } = _a, props = __rest(_a, ["type", 'data-testid']);
     const isDefaultType = type === 'none';
-    return (React__default.createElement(Label, { as: isDefaultType ? 'button' : 'label', id: isDefaultType ? props.id : undefined, htmlFor: !isDefaultType ? props.id : undefined, type: isDefaultType ? 'button' : undefined, position: props.position, isChecked: props.isChecked || props.isDefaultChecked, isDisabled: props.isDisabled, className: props.className, "data-testid": dataTestId, isDefaultButtonStyle: props.isDefaultButtonStyle, "aria-label": props.ariaLabel, disabled: isDefaultType ? props.isDisabled : undefined, onClick: isDefaultType && !props.isDisabled ? props.onClick : undefined },
+    return (React__default.createElement(Label, { as: isDefaultType ? 'button' : 'label', id: isDefaultType ? props.id : undefined, htmlFor: !isDefaultType ? props.id : undefined, type: isDefaultType ? 'button' : undefined, "$position": props.position, "$isChecked": props.isChecked || props.isDefaultChecked, "$isDisabled": props.isDisabled, className: props.className, "data-testid": dataTestId, "$isDefaultButtonStyle": props.isDefaultButtonStyle, "aria-label": props.ariaLabel, disabled: isDefaultType ? props.isDisabled : undefined, onClick: isDefaultType && !props.isDisabled ? props.onClick : undefined },
         props.children,
         !isDefaultType && (React__default.createElement(Input, { id: props.id, name: props.name, type: type, defaultChecked: props.isDefaultChecked, checked: props.isChecked, value: props.value, onChange: props.onChange, disabled: props.isDisabled, readOnly: !props.onChange, "data-testid": dataTestId && `${dataTestId}-input`, "data-checked": props.isChecked }))));
 };

package/build/es/components/PixelLoader/PixelLoader.js

@@ -1,6 +1,6 @@
 import { __rest } from 'tslib';
 import React__default from 'react';
-import styled, { keyframes } from '../../themes/styled.js';
+import { keyframes, styled } from 'styled-components';
 import theme from '../../themes/theme.js';
 
 const loading = keyframes `
@@ -27,17 +27,17 @@ const Pixel = styled.div `
     height: 0.625rem;
     margin: 0.125rem;
     animation: ${loading} 1s ease-in-out infinite;
-    animation-delay: ${({ delay }) => delay}s;
+    animation-delay: ${({ $delay }) => $delay}s;
 `;
 /** @visibleName Pixel Loader */
 const PixelLoader = (_a) => {
     var { className, 'data-testid': dataTestId } = _a, props = __rest(_a, ["className", 'data-testid']);
     return (React__default.createElement(PixelLoaderWrapper, { className: className, "data-testid": dataTestId },
         props.label && React__default.createElement("span", { className: "visually-hidden" }, props.label),
-        React__default.createElement(Pixel, { color: props.color, delay: "-0.27" }),
-        React__default.createElement(Pixel, { color: props.color, delay: "-0.18" }),
-        React__default.createElement(Pixel, { color: props.color, delay: "-0.09" }),
-        React__default.createElement(Pixel, { color: props.color, delay: "0" })));
+        React__default.createElement(Pixel, { color: props.color, "$delay": "-0.27" }),
+        React__default.createElement(Pixel, { color: props.color, "$delay": "-0.18" }),
+        React__default.createElement(Pixel, { color: props.color, "$delay": "-0.09" }),
+        React__default.createElement(Pixel, { color: props.color, "$delay": "0" })));
 };
 
 export { PixelLoader as default };

package/build/es/components/PriorityNavigation/PriorityNavigation.js

@@ -5,7 +5,7 @@ import useDebounce from '../../hooks/useDebounce.js';
 import useOutsideClick from '../../hooks/useOutsideClick.js';
 import useResizeObserver from '../../hooks/useResizeObserver.js';
 import useWindowSize from '../../hooks/useWindowSize.js';
-import styled from '../../themes/styled.js';
+import { styled } from 'styled-components';
 import theme from '../../themes/theme.js';
 import getElevationShadow from '../../utils/common.js';
 import { media, getMultipliedSize } from '../../utils/styledUtils.js';
@@ -88,9 +88,9 @@ const NavigationList = styled(CoreULStyles) `
     background-color: ${theme.color.background.white.default};
     position: absolute;
     top: ${getMultipliedSize(theme.base.baseHeight, 5.6)};
-    visibility: ${({ isMobileNavigationOpen }) => (isMobileNavigationOpen ? 'visible' : 'hidden')};
+    visibility: ${({ $isMobileNavigationOpen }) => $isMobileNavigationOpen ? 'visible' : 'hidden'};
     clip-path: inset(
-        0% 0% ${({ isMobileNavigationOpen }) => (isMobileNavigationOpen ? '0%' : '100%')} 0%
+        0% 0% ${({ $isMobileNavigationOpen }) => ($isMobileNavigationOpen ? '0%' : '100%')} 0%
     );
     transition: all 0.2s ease-in-out;
 
@@ -324,7 +324,7 @@ const PriorityNavigation = (_a) => {
                         props.categoryLabel && React__default.createElement(Category, null, props.categoryLabel),
                         selectedItem),
                     React__default.createElement(Icon, { icon: isMobileNavigationOpen ? OvalChevronUp : OvalChevronDown, size: "2.5rem" }))),
-                React__default.createElement(NavigationList, { ref: navigationListRef, isMobileNavigationOpen: isMobileNavigationOpen, onKeyDown: handleNavigationListKeyDown }, Children.map([...state.navigationItems, ...(isMobile ? state.dropdownItems : [])], (navigationItem, index) => {
+                React__default.createElement(NavigationList, { ref: navigationListRef, "$isMobileNavigationOpen": isMobileNavigationOpen, onKeyDown: handleNavigationListKeyDown }, Children.map([...state.navigationItems, ...(isMobile ? state.dropdownItems : [])], (navigationItem, index) => {
                     if (isValidElement(navigationItem) &&
                         navigationItem.type === PriorityNavigationItem) {
                         return (React__default.createElement(PriorityNavigationItem, { id: navigationItem.props.id, key: navigationItem.key, onClick: handleItemClick, onKeyDown: navigationItem.props.onKeyDown || props.onKeyDown, isActive: navigationItem.props.isActive, className: navigationItem.props.className, "data-testid": navigationItem.props['data-testid'], ref: instance => {

package/build/es/components/PriorityNavigationItem/PriorityNavigationItem.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 { media } from '../../utils/styledUtils.js';
 
@@ -24,12 +24,12 @@ const Element = styled.li `
         }
     }
 
-    ${({ isActive }) => media.md `
+    ${({ $isActive }) => media.md `
         justify-content: left;
         padding: 1rem 0;
         margin: auto 1rem;
         border-top: 3px solid transparent;
-        border-bottom: 3px solid ${isActive ? theme.color.text.pink : 'transparent'};
+        border-bottom: 3px solid ${$isActive ? theme.color.text.pink : 'transparent'};
     `}
 
     & > a {
@@ -45,8 +45,8 @@ const Element = styled.li `
 
     & > * {
         display: block;
-        color: ${({ isActive }) => (isActive ? theme.color.text.pink : theme.color.text.black)};
-        ${({ isActive }) => isActive && `font-weight: ${theme.fontWeight.bold};`}
+        color: ${({ $isActive }) => ($isActive ? theme.color.text.pink : theme.color.text.black)};
+        ${({ $isActive }) => $isActive && `font-weight: ${theme.fontWeight.bold};`}
         border: 2px solid transparent;
 
         &:hover {
@@ -60,7 +60,7 @@ const Element = styled.li `
  */
 const PriorityNavigationItem = React__default.forwardRef((_a, ref) => {
     var { 'data-testid': dataTestId } = _a, props = __rest(_a, ['data-testid']);
-    return (React__default.createElement(Element, { id: props.id, ref: ref, onClick: props.onClick, onKeyDown: props.onKeyDown, isActive: props.isActive, className: props.className, "data-testid": dataTestId }, props.children));
+    return (React__default.createElement(Element, { id: props.id, ref: ref, onClick: props.onClick, onKeyDown: props.onKeyDown, "$isActive": props.isActive, className: props.className, "data-testid": dataTestId }, props.children));
 });
 PriorityNavigationItem.displayName = 'PriorityNavigationItem';
 

package/build/es/components/ProgressIndicator/ProgressIndicator.js

@@ -1,7 +1,7 @@
 import { __rest } from 'tslib';
 import { Warning, Check } 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, media } from '../../utils/styledUtils.js';
 import Icon from '../Icon/Icon.js';

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

@@ -1,7 +1,7 @@
 import { __rest } from 'tslib';
 import { ChevronUp, ChevronDown } from '@dnanpm/icons';
 import React__default, { useState, useRef, useEffect, Children, isValidElement, cloneElement } from 'react';
-import styled from '../../themes/styled.js';
+import { styled } from 'styled-components';
 import theme from '../../themes/theme.js';
 import ButtonIcon from '../ButtonIcon/ButtonIcon.js';
 
@@ -10,16 +10,16 @@ const Container = styled.div `
     flex-direction: column;
 `;
 const Content = styled.div `
-    ${({ isExpanded, collapsedSize }) => !isExpanded &&
+    ${({ $isExpanded, $collapsedSize }) => !$isExpanded &&
     `
         overflow: hidden;
-        max-height: ${collapsedSize};
+        max-height: ${$collapsedSize};
         mask-image: linear-gradient(${theme.color.background.white.default}, transparent);
     `}
 `;
 const ButtonWrapper = 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(ButtonIcon) `
     color: ${theme.color.text.pink};
@@ -82,8 +82,8 @@ const ReadMore = (_a) => {
         return child;
     };
     return (React__default.createElement(Container, { id: props.id, className: props.className, "data-testid": dataTestId, "aria-label": props.ariaLabel, role: "region" },
-        React__default.createElement(Content, { ref: contentRef, isExpanded: temporaryStateManagement, collapsedSize: collapsedSize, "data-testid": dataTestId && `${dataTestId}-content`, "aria-hidden": temporaryStateManagement ? 'false' : 'true', tabIndex: temporaryStateManagement ? 0 : -1 }, Children.map(props.children, forceTabIndexOnTextLinks)),
-        React__default.createElement(ButtonWrapper, { buttonPosition: props.buttonPosition },
+        React__default.createElement(Content, { ref: contentRef, "$isExpanded": temporaryStateManagement, "$collapsedSize": collapsedSize, "data-testid": dataTestId && `${dataTestId}-content`, "aria-hidden": temporaryStateManagement ? 'false' : 'true', tabIndex: temporaryStateManagement ? 0 : -1 }, Children.map(props.children, forceTabIndexOnTextLinks)),
+        React__default.createElement(ButtonWrapper, { "$buttonPosition": props.buttonPosition },
             React__default.createElement(StyledButtonIcon, { ref: buttonRef, icon: temporaryStateManagement ? ChevronUp : ChevronDown, onClick: handleOnClick, "aria-expanded": temporaryStateManagement }, temporaryButtonLabel || props.buttonLabel))));
 };
 

package/build/es/components/Search/Search.js

@@ -1,7 +1,7 @@
 import { __rest } from 'tslib';
 import { Close, Search as Search$1 } from '@dnanpm/icons';
 import React__default, { useRef } 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 ButtonIcon from '../ButtonIcon/ButtonIcon.js';

package/build/es/components/SecondaryNavigation/SecondaryNavigation.js

@@ -2,7 +2,7 @@ import { __rest } from 'tslib';
 import { ChevronDown, Check } from '@dnanpm/icons';
 import React__default, { useState, useRef } from 'react';
 import useOutsideClick from '../../hooks/useOutsideClick.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 Icon from '../Icon/Icon.js';

package/build/es/components/Selectbox/Selectbox.js

@@ -2,7 +2,7 @@ import { __rest } from 'tslib';
 import { Close, Error, Lock, Search, ChevronUp, ChevronDown } from '@dnanpm/icons';
 import React__default from 'react';
 import Select, { defaultTheme, components } from 'react-select';
-import styled from '../../themes/styled.js';
+import { styled } from 'styled-components';
 import theme from '../../themes/theme.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
 import Icon from '../Icon/Icon.js';

package/build/es/components/Switch/Switch.js

@@ -1,6 +1,6 @@
 import { __rest } from 'tslib';
 import * as React 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 LabelText from '../LabelText/LabelText.js';
@@ -24,12 +24,12 @@ const Button = styled.div `
     content: ' ';
     width: ${height}rem;
     border-radius: 50%;
-    ${({ isChecked }) => `
-        transform: translate3d(${isChecked ? railWidth - height : 0}rem, 0, 0);
-        background-color: ${isChecked ? theme.color.default.pink : theme.color.line.L01};
+    ${({ $isChecked }) => `
+        transform: translate3d(${$isChecked ? railWidth - height : 0}rem, 0, 0);
+        background-color: ${$isChecked ? theme.color.default.pink : theme.color.line.L01};
         border: ${borderSize}rem solid ${theme.color.default.white};
         z-index: 2;
-        left: ${isChecked ? -borderSize * 2 : 0}rem;
+        left: ${$isChecked ? -borderSize * 2 : 0}rem;
     `};
 `;
 const Checkbox = styled.input `
@@ -38,25 +38,25 @@ const Checkbox = styled.input `
     top: 0;
     left: 0;
 
-    :disabled {
+    &:disabled {
         cursor: not-allowed;
     }
-    :disabled + label {
+    &:disabled + label {
         cursor: not-allowed;
         color: ${theme.color.line.L01}${theme.color.transparency.T40};
     }
-    :disabled + label > div {
+    &:disabled + label > div {
         cursor: not-allowed;
         border-color: ${({ checked }) => checked ? theme.color.default.pink : theme.color.line.L01}${theme.color.transparency
     .T40};
     }
-    :disabled + label div div {
+    &:disabled + label div div {
         pointer-events: none;
         background-color: ${({ checked }) => checked ? theme.color.default.pink : theme.color.line.L01}${theme.color.transparency
     .T40};
     }
 
-    :focus-visible + label > div {
+    &:focus-visible + label > div {
         outline: none;
         box-shadow: 0px 0px 0px 2px ${theme.color.focus.dark};
     }
@@ -75,9 +75,9 @@ const Rail = styled.div `
     left: 0;
     border-radius: ${borderRadius}rem;
     overflow: hidden;
-    ${({ isChecked }) => `
+    ${({ $isChecked }) => `
         height: ${railHeight}rem;
-        border: ${borderSize}rem solid ${isChecked ? theme.color.default.pink : theme.color.line.L01};
+        border: ${borderSize}rem solid ${$isChecked ? theme.color.default.pink : theme.color.line.L01};
         background-color: ${theme.color.background.white.default};
         z-index: 0;
    `};
@@ -93,8 +93,8 @@ const Switch = (_a) => {
     return (React.createElement(Container, { className: props.className, "data-testid": dataTestId },
         React.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.createElement(LabelWrapper, { htmlFor: props.id },
-            React.createElement(Rail, { isChecked: props.isChecked },
-                React.createElement(Button, { isChecked: props.isChecked })),
+            React.createElement(Rail, { "$isChecked": props.isChecked },
+                React.createElement(Button, { "$isChecked": props.isChecked })),
             props.label && props.label)));
 };
 

package/build/es/components/Tab/Tab.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';
 import Box from '../Box/Box.js';
@@ -12,8 +12,8 @@ const TabLabel = styled.li `
     list-style: none;
     font-size: ${theme.fontSize.default};
     line-height: ${theme.lineHeight.default};
-    font-weight: ${({ isActive }) => (isActive ? theme.fontWeight.bold : theme.fontWeight.book)};
-    background-color: ${({ isActive }) => isActive ? theme.color.background.white.default : theme.color.background.sand.E01};
+    font-weight: ${({ $isActive }) => ($isActive ? theme.fontWeight.bold : theme.fontWeight.book)};
+    background-color: ${({ $isActive }) => $isActive ? theme.color.background.white.default : theme.color.background.sand.E01};
     border-radius: ${theme.radius.default} ${theme.radius.default} 0 0;
     border: 1px solid ${theme.color.line.L03};
     border-bottom: 0 none;
@@ -38,7 +38,7 @@ const TabStyle = styled.li `
     line-height: ${theme.lineHeight.default};
     font-weight: ${theme.fontWeight.book};
 
-    ${({ isActive }) => isActive &&
+    ${({ $isActive }) => $isActive &&
     `
             color: ${theme.color.text.pink};
             background-color: ${theme.color.background.sand.E01};
@@ -49,7 +49,7 @@ const TabStyle = styled.li `
             padding: ${getMultipliedSize(theme.base.baseHeight, 1.6)} 0;
         `}
     
-    ${({ isActive, $type }) => isActive &&
+    ${({ $isActive, $type }) => $isActive &&
     $type === 'underlined' &&
     `
             border-bottom: 2px solid ${theme.color.default.pink};
@@ -86,12 +86,12 @@ const Tab = (_a) => {
     };
     const isActive = props.activeTab ? props.activeTab === props.label : props.isActive;
     return type === 'box' || type === 'default' || type === 'panel' ? (React__default.createElement(React__default.Fragment, null,
-        React__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.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.createElement(ContentContainer, { role: "tabpanel", "$type": props.tabStyle || type, as: (type === 'box' || type === 'default') && !props.tabStyle
                     ? Box
                     : undefined }, props.children)) : (React__default.createElement(Divider, { margin: "0" }))))) : (React__default.createElement(React__default.Fragment, null,
-        React__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.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.createElement(ContentContainer, { role: "tabpanel", "$type": props.tabStyle || type }, props.children))));

package/build/es/components/Tabs/Tabs.js

@@ -1,6 +1,6 @@
 import { __rest } from 'tslib';
 import React__default, { useState, Children, isValidElement } from 'react';
-import styled from '../../themes/styled.js';
+import { styled } from 'styled-components';
 import theme from '../../themes/theme.js';
 import Box from '../Box/Box.js';
 import Tab from '../Tab/Tab.js';
@@ -10,7 +10,7 @@ const Tablist = styled.ul `
     flex-flow: row wrap;
     padding: 0;
 
-    ${({ isFullWidth }) => isFullWidth &&
+    ${({ $isFullWidth }) => $isFullWidth &&
     `
         align-items: stretch;
 
@@ -20,7 +20,7 @@ const Tablist = styled.ul `
         }
     `}
 
-    ${({ $type, isNarrowUnderlined }) => {
+    ${({ $type, $isNarrowUnderlined }) => {
     if ($type === 'box' || $type === 'default' || $type === 'panel') {
         return `
                 margin: 0;
@@ -43,7 +43,7 @@ const Tablist = styled.ul `
     }
     if ($type === 'underlined') {
         return `
-                gap: ${isNarrowUnderlined ? '1.25rem' : '2.5rem'};
+                gap: ${$isNarrowUnderlined ? '1.25rem' : '2.5rem'};
                 border-bottom: 1px solid ${theme.color.line.L02};
             `;
     }
@@ -56,11 +56,11 @@ const Tablist = styled.ul `
 }}
 `;
 const ContentContainer = styled.div `
-    ${({ $type, isFullWidth }) => {
+    ${({ $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') {
@@ -112,11 +112,11 @@ const Tabs = (_a) => {
         setActiveTab((outerActiveTab === null || outerActiveTab === void 0 ? void 0 : outerActiveTab.props.label) || tabs[0].props.label);
     }
     return (React__default.createElement("div", { className: props.className ? `tabs ${props.className}` : 'tabs', "data-testid": dataTestId },
-        React__default.createElement(Tablist, { role: "tablist", "$type": props.tabStyle || type, isFullWidth: props.isFullWidth, isNarrowUnderlined: props.isNarrowUnderlined, onKeyDown: onKeyDown }, Children.map(props.children, tab => isValidElement(tab) &&
+        React__default.createElement(Tablist, { role: "tablist", "$type": props.tabStyle || type, "$isFullWidth": props.isFullWidth, "$isNarrowUnderlined": props.isNarrowUnderlined, onKeyDown: onKeyDown }, Children.map(props.children, tab => isValidElement(tab) &&
             tab.type === Tab && (React__default.createElement(Tab, { 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.createElement(ContentContainer, { role: "tabpanel", "$type": props.tabStyle || type, isFullWidth: props.isFullWidth, as: (type === 'box' || type === 'default') && !props.tabStyle ? Box : undefined }, Children.map(props.children, tab => isValidElement(tab) &&
+        React__default.createElement(ContentContainer, { role: "tabpanel", "$type": props.tabStyle || type, "$isFullWidth": props.isFullWidth, as: (type === 'box' || type === 'default') && !props.tabStyle ? Box : undefined }, Children.map(props.children, tab => isValidElement(tab) &&
             tab.type === Tab &&
             (tab.props.isActive || tab.props.label === activeTab) &&
             tab.props.children))));

package/build/es/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;