@dnanpm/styleguide 3.10.0 → 3.11.0

package/build/cjs/components/Modal/Modal.js

@@ -6,7 +6,7 @@ var tslib = require('tslib');
 var React = require('react');
 var ReactModal = require('react-modal');
 var icons = require('@dnanpm/icons');
-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');
@@ -24,12 +24,12 @@ const sizeMap = {
     large: '960px',
     wide: '1535px',
 };
-const GlobalStyle = styled.createGlobalStyle `
+const GlobalStyle = styledComponents.createGlobalStyle `
     body.ReactModal__Body--open {
         overflow: hidden;
     }
 `;
-const StyledReactModal = styled.default(ReactModal__default.default) `
+const StyledReactModal = styledComponents.styled(ReactModal__default.default) `
     position: relative;
     max-width: 100vw;
     width: 100vw;
@@ -53,7 +53,7 @@ const StyledReactModal = styled.default(ReactModal__default.default) `
         width: 960px;
     }
 `;
-const StyledOverlay = styled.default.div `
+const StyledOverlay = styledComponents.styled.div `
     display: flex;
     justify-content: center;
     align-items: center;
@@ -76,7 +76,7 @@ const StyledOverlay = styled.default.div `
         }
     }
 `;
-const StyledBox = styled.default(Box.default) `
+const StyledBox = styledComponents.styled(Box.default) `
     display: flex;
     flex-direction: column;
     height: 100%;
@@ -88,7 +88,7 @@ const StyledBox = styled.default(Box.default) `
         border-radius: 0;
     }
 `;
-const StyledContent = styled.default.div `
+const StyledContent = styledComponents.styled.div `
     &:focus {
         outline: none;
     }
@@ -97,15 +97,15 @@ const StyledContent = styled.default.div `
         border-radius: ${theme.default.radius.default};
     }
 `;
-const ContentWrapper = styled.default.div `
+const ContentWrapper = styledComponents.styled.div `
     padding-top: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};
     padding-left: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2)};
     padding-bottom: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2)};
     padding-right: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2)};
 `;
-const Header = styled.default.div `
+const Header = styledComponents.styled.div `
     padding: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2)};
-    background-color: ${({ variant }) => variant === 'dark'
+    background-color: ${({ $variant }) => $variant === 'dark'
     ? theme.default.color.background.plum.E02
     : theme.default.color.background.white.default};
     width: 100%;
@@ -115,28 +115,28 @@ const Header = styled.default.div `
         margin: 0;
     }
 `;
-const Title = styled.default.h2 `
+const Title = styledComponents.styled.h2 `
     font-size: ${theme.default.fontSize.h2M};
     line-height: ${theme.default.lineHeight.h2M};
-    color: ${({ variant }) => variant === 'light' ? theme.default.color.default.black : theme.default.color.default.white};
+    color: ${({ $variant }) => $variant === 'light' ? theme.default.color.default.black : theme.default.color.default.white};
 
     @media (max-width: ${sizeMap.small}) {
         font-size: ${theme.default.fontSize.h2S};
         line-height: ${theme.default.lineHeight.h2S};
     }
 `;
-const CloseButton = styled.default(ButtonClose.default) `
+const CloseButton = styledComponents.styled(ButtonClose.default) `
     margin: 0;
     padding: 0.5rem;
     border-radius: 0 ${theme.default.radius.default} 0 ${theme.default.radius.default};
-    background-color: ${({ variant }) => variant === 'light'
+    background-color: ${({ $variant }) => $variant === 'light'
     ? theme.default.color.background.sand.E01
     : theme.default.color.background.plum.default};
     @media (max-width: ${sizeMap.mobile}) {
         border-radius: 0 0 0 ${theme.default.radius.default};
     }
 `;
-const Footer = styled.default.div `
+const Footer = styledComponents.styled.div `
     position: sticky;
     bottom: 0;
     width: 100%;
@@ -155,11 +155,11 @@ const Modal = (_a) => {
     return (React__default.default.createElement(React__default.default.Fragment, null,
         React__default.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.default.createElement(StyledBox, { elevation: "extraHigh", "data-testid": dataTestId },
-                closeButton && isClosable && (React__default.default.createElement(CloseButton, { onClick: props.onRequestClose, "aria-label": props.closeLabel, "data-testid": dataTestId && `${dataTestId}-close-button`, variant: variant },
+                closeButton && isClosable && (React__default.default.createElement(CloseButton, { onClick: props.onRequestClose, "aria-label": props.closeLabel, "data-testid": dataTestId && `${dataTestId}-close-button`, "$variant": variant },
                     React__default.default.createElement(icons.Close, { color: variant === 'light'
                             ? theme.default.color.default.plum
                             : theme.default.color.default.white }))),
-                React__default.default.createElement(Header, { variant: variant, "data-testid": dataTestId && `${dataTestId}-header` }, props.title && (React__default.default.createElement(Title, { size: size, variant: variant }, props.title))),
+                React__default.default.createElement(Header, { "$variant": variant, "data-testid": dataTestId && `${dataTestId}-header` }, props.title && (React__default.default.createElement(Title, { "$size": size, "$variant": variant }, props.title))),
                 React__default.default.createElement(ContentWrapper, null, props.children),
                 props.footer && (React__default.default.createElement(Footer, { "data-testid": dataTestId && `${dataTestId}-footer` }, props.footer)))),
         React__default.default.createElement(GlobalStyle, null)));

package/build/cjs/components/Notification/Notification.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 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 ButtonClose = require('../ButtonClose/ButtonClose.js');
 var Icon = require('../Icon/Icon.js');
@@ -12,7 +12,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,
@@ -20,7 +19,7 @@ const iconsMap = {
     warning: icons.Warning,
     error: icons.Error,
 };
-const sharedStyles = styled.css `
+const sharedStyles = styledComponents.css `
     display: flex;
     gap: 1rem;
     line-height: ${theme.default.lineHeight.default};
@@ -29,26 +28,26 @@ const sharedStyles = styled.css `
     border-radius: ${theme.default.radius.s};
     border: 2px solid ${({ $type }) => theme.default.color.notification[$type]};
 `;
-const NotificationWrapper = styled__default.default.div `
+const NotificationWrapper = styledComponents.styled.div `
     ${sharedStyles}
     border-color: ${({ $type }) => theme.default.color.notification[$type]};
 `;
-const StaticWrapper = styled__default.default.div `
+const StaticWrapper = styledComponents.styled.div `
     ${sharedStyles}
     border-color: ${({ $type }) => theme.default.color.notification[$type]};
 `;
-const IconWrapper = styled__default.default.div `
+const IconWrapper = styledComponents.styled.div `
     display: flex;
     align-items: center;
     padding: 0.5rem;
     background-color: ${({ $type }) => theme.default.color.notification[$type]};
 `;
-const ContentWrapper = styled__default.default.div `
+const ContentWrapper = styledComponents.styled.div `
     margin: auto 0;
     padding: 0.5rem 0;
     width: 100%;
 `;
-const ButtonCloseStyled = styled__default.default(ButtonClose.default) `
+const ButtonCloseStyled = styledComponents.styled(ButtonClose.default) `
     position: static;
     margin: auto 0.5rem;
 

package/build/cjs/components/NotificationBadge/NotificationBadge.js

@@ -4,29 +4,29 @@ 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');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const NotificationBadgeElement = styled.default.div `
+const NotificationBadgeElement = styledComponents.styled.div `
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: ${theme.default.fontSize.xs};
     font-weight: ${theme.default.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.default.color.text.white};
     background-color: ${theme.default.color.notification.error};
     border-radius: ${theme.default.radius.circle};
 `;
-const VisuallyHidden = styled.default.span `
+const VisuallyHidden = styledComponents.styled.span `
     position: absolute;
     width: 1px;
     height: 1px;
@@ -43,7 +43,7 @@ const NotificationBadge = (_a) => {
     var { 'data-testid': dataTestId, visuallyHiddenText } = _a, props = tslib.__rest(_a, ['data-testid', "visuallyHiddenText"]);
     return (React__default.default.createElement(React__default.default.Fragment, null,
         visuallyHiddenText && React__default.default.createElement(VisuallyHidden, null, visuallyHiddenText),
-        React__default.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.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)));
 };
 
 exports.default = NotificationBadge;

package/build/cjs/components/Overlay/Overlay.js

@@ -5,14 +5,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var reactDom = require('react-dom');
-var styled = require('../../themes/styled.js');
+var styledComponents = require('styled-components');
 var theme = require('../../themes/theme.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const Element = styled.default.div `
+const Element = styledComponents.styled.div `
     position: fixed;
     top: 0;
     bottom: 0;

package/build/cjs/components/Pill/Pill.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 Button = require('../Button/Button.js');
@@ -12,7 +12,6 @@ var Button = require('../Button/Button.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 getStandardPillStyles = ({ isChecked, isDisabled, }) => {
     const alphaValue = isDisabled ? theme.default.color.transparency.T30 : theme.default.color.transparency.T100;
@@ -60,7 +59,7 @@ const getDefaultButtonStyles = ({ isChecked, isDisabled, }) => {
         : ''}
     `;
 };
-const Label = styled__default.default.label `
+const Label = styledComponents.styled.label `
     all: unset;
     position: relative;
     display: inline-block;
@@ -69,11 +68,11 @@ const Label = styled__default.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;
@@ -81,17 +80,17 @@ const Label = styled__default.default.label `
             0px 0px 0px 4px ${theme.default.color.focus.dark};
     }
 
-    ${({ position }) => (position === 'right' || position === 'middle') &&
+    ${({ $position }) => ($position === 'right' || $position === 'middle') &&
     `
             margin-left: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};
         `}
 
-    ${({ position }) => (position === 'left' || position === 'middle') &&
+    ${({ $position }) => ($position === 'left' || $position === 'middle') &&
     `
             margin-right: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};
         `}
     
-    ${({ position }) => position === 'auto' &&
+    ${({ $position }) => $position === 'auto' &&
     `
         margin: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 0.5)};
 
@@ -104,7 +103,7 @@ const Label = styled__default.default.label `
         }
     `}
 `;
-const Input = styled__default.default.input `
+const Input = styledComponents.styled.input `
     appearance: none;
     display: block;
     border: 0 none;
@@ -122,7 +121,7 @@ const Input = styled__default.default.input `
 const Pill = (_a) => {
     var { type = 'none', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["type", 'data-testid']);
     const isDefaultType = type === 'none';
-    return (React__default.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.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.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/cjs/components/PixelLoader/PixelLoader.js

@@ -4,14 +4,14 @@ 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');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const loading = styled.keyframes `
+const loading = styledComponents.keyframes `
     0% {
         transform: scale(1);
     }
@@ -22,30 +22,30 @@ const loading = styled.keyframes `
         transform: scale(1);
     }
 `;
-const PixelLoaderWrapper = styled.default.div `
+const PixelLoaderWrapper = styledComponents.styled.div `
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 0.125rem;
 `;
-const Pixel = styled.default.div `
+const Pixel = styledComponents.styled.div `
     background-color: ${({ color }) => color || theme.default.color.default.pink};
     display: inline-block;
     width: 0.625rem;
     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 = tslib.__rest(_a, ["className", 'data-testid']);
     return (React__default.default.createElement(PixelLoaderWrapper, { className: className, "data-testid": dataTestId },
         props.label && React__default.default.createElement("span", { className: "visually-hidden" }, props.label),
-        React__default.default.createElement(Pixel, { color: props.color, delay: "-0.27" }),
-        React__default.default.createElement(Pixel, { color: props.color, delay: "-0.18" }),
-        React__default.default.createElement(Pixel, { color: props.color, delay: "-0.09" }),
-        React__default.default.createElement(Pixel, { color: props.color, delay: "0" })));
+        React__default.default.createElement(Pixel, { color: props.color, "$delay": "-0.27" }),
+        React__default.default.createElement(Pixel, { color: props.color, "$delay": "-0.18" }),
+        React__default.default.createElement(Pixel, { color: props.color, "$delay": "-0.09" }),
+        React__default.default.createElement(Pixel, { color: props.color, "$delay": "0" })));
 };
 
 exports.default = PixelLoader;

package/build/cjs/components/PriorityNavigation/PriorityNavigation.js

@@ -9,7 +9,7 @@ var useDebounce = require('../../hooks/useDebounce.js');
 var useOutsideClick = require('../../hooks/useOutsideClick.js');
 var useResizeObserver = require('../../hooks/useResizeObserver.js');
 var useWindowSize = require('../../hooks/useWindowSize.js');
-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');
@@ -21,12 +21,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 `
     width: 100%;
 
     ${styledUtils.media.md ` border-bottom: 1px solid ${theme.default.color.line.L03}; `}
 `;
-const Category = styled.default.span `
+const Category = styledComponents.styled.span `
     margin: 0;
     color: ${theme.default.color.text.black};
     font-size: ${theme.default.fontSize.h4};
@@ -43,7 +43,7 @@ const Category = styled.default.span `
             ${theme.default.color.background.white.default};
     `}
 `;
-const ListsContainer = styled.default.div `
+const ListsContainer = styledComponents.styled.div `
     display: flex;
     flex-direction: column;
     position: relative;
@@ -57,7 +57,7 @@ const ListsContainer = styled.default.div `
         margin: 0 auto;
     `}
 `;
-const MobileDropdown = styled.default.button `
+const MobileDropdown = styledComponents.styled.button `
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -75,19 +75,19 @@ const MobileDropdown = styled.default.button `
         pointer-events: none;
     }
 `;
-const MobileDropdownContent = styled.default.div `
+const MobileDropdownContent = styledComponents.styled.div `
     display: flex;
     flex-direction: column;
     align-items: baseline;
     text-align: left;
 `;
-const CoreULStyles = styled.default.ul `
+const CoreULStyles = styledComponents.styled.ul `
     list-style: none;
     margin: 0;
     padding: 0;
     overflow: hidden;
 `;
-const NavigationList = styled.default(CoreULStyles) `
+const NavigationList = styledComponents.styled(CoreULStyles) `
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
@@ -96,9 +96,9 @@ const NavigationList = styled.default(CoreULStyles) `
     background-color: ${theme.default.color.background.white.default};
     position: absolute;
     top: ${styledUtils.getMultipliedSize(theme.default.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;
 
@@ -116,7 +116,7 @@ const NavigationList = styled.default(CoreULStyles) `
         }
     `}
 `;
-const DropdownList = styled.default(CoreULStyles) `
+const DropdownList = styledComponents.styled(CoreULStyles) `
     position: absolute;
     top: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 6)};
     right: 0;
@@ -137,7 +137,7 @@ const DropdownList = styled.default(CoreULStyles) `
 
     ${common.default({ elevation: 'low' })}
 `;
-const VisuallyHidden = styled.default.span `
+const VisuallyHidden = styledComponents.styled.span `
     position: absolute;
     width: 1px;
     height: 1px;
@@ -332,7 +332,7 @@ const PriorityNavigation = (_a) => {
                         props.categoryLabel && React__default.default.createElement(Category, null, props.categoryLabel),
                         selectedItem),
                     React__default.default.createElement(Icon.default, { icon: isMobileNavigationOpen ? icons.OvalChevronUp : icons.OvalChevronDown, size: "2.5rem" }))),
-                React__default.default.createElement(NavigationList, { ref: navigationListRef, isMobileNavigationOpen: isMobileNavigationOpen, onKeyDown: handleNavigationListKeyDown }, React.Children.map([...state.navigationItems, ...(isMobile ? state.dropdownItems : [])], (navigationItem, index) => {
+                React__default.default.createElement(NavigationList, { ref: navigationListRef, "$isMobileNavigationOpen": isMobileNavigationOpen, onKeyDown: handleNavigationListKeyDown }, React.Children.map([...state.navigationItems, ...(isMobile ? state.dropdownItems : [])], (navigationItem, index) => {
                     if (React.isValidElement(navigationItem) &&
                         navigationItem.type === PriorityNavigationItem.default) {
                         return (React__default.default.createElement(PriorityNavigationItem.default, { 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/cjs/components/PriorityNavigationItem/PriorityNavigationItem.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 Element = styled.default.li `
+const Element = styledComponents.styled.li `
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -32,12 +32,12 @@ const Element = styled.default.li `
         }
     }
 
-    ${({ isActive }) => styledUtils.media.md `
+    ${({ $isActive }) => styledUtils.media.md `
         justify-content: left;
         padding: 1rem 0;
         margin: auto 1rem;
         border-top: 3px solid transparent;
-        border-bottom: 3px solid ${isActive ? theme.default.color.text.pink : 'transparent'};
+        border-bottom: 3px solid ${$isActive ? theme.default.color.text.pink : 'transparent'};
     `}
 
     & > a {
@@ -53,8 +53,8 @@ const Element = styled.default.li `
 
     & > * {
         display: block;
-        color: ${({ isActive }) => (isActive ? theme.default.color.text.pink : theme.default.color.text.black)};
-        ${({ isActive }) => isActive && `font-weight: ${theme.default.fontWeight.bold};`}
+        color: ${({ $isActive }) => ($isActive ? theme.default.color.text.pink : theme.default.color.text.black)};
+        ${({ $isActive }) => $isActive && `font-weight: ${theme.default.fontWeight.bold};`}
         border: 2px solid transparent;
 
         &:hover {
@@ -68,7 +68,7 @@ const Element = styled.default.li `
  */
 const PriorityNavigationItem = React__default.default.forwardRef((_a, ref) => {
     var { 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ['data-testid']);
-    return (React__default.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.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/cjs/components/ProgressIndicator/ProgressIndicator.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 Icon = require('../Icon/Icon.js');
@@ -28,13 +28,13 @@ const getBorderColor = ({ isActive, isCompleted, isError }) => {
         : theme.default.color.background.pink.default;
     return isActive || isCompleted ? currentColor : defaultColor;
 };
-const ProgressIndicatorWrapper = styled.default.ul `
+const ProgressIndicatorWrapper = styledComponents.styled.ul `
     display: flex;
     justify-content: space-between;
     margin: 0;
     padding: 0;
 `;
-const ProgressIndicatorItem = styled.default.li `
+const ProgressIndicatorItem = styledComponents.styled.li `
     position: relative;
     display: inline-flex;
     flex-direction: column;
@@ -68,7 +68,7 @@ const ProgressIndicatorItem = styled.default.li `
         }
     `}
 `;
-const ProgressIndicatorItemConnector = styled.default.div `
+const ProgressIndicatorItemConnector = styledComponents.styled.div `
     position: absolute;
     top: ${({ small }) => styledUtils.getMultipliedSize(theme.default.base.baseHeight, small ? 1.5 : 2)};
     left: -50%;
@@ -77,7 +77,7 @@ const ProgressIndicatorItemConnector = styled.default.div `
     height: ${({ small }) => (small ? '2px' : '4px')};
     background-color: ${({ isActive, isCompleted }) => isActive || isCompleted ? theme.default.color.default.pink : theme.default.color.line.L02};
 `;
-const ProgressIndicatorItemNumber = styled.default.div `
+const ProgressIndicatorItemNumber = styledComponents.styled.div `
     display: flex;
     justify-content: center;
     align-items: center;
@@ -93,7 +93,7 @@ const ProgressIndicatorItemNumber = styled.default.div `
 
     ${({ isActive, isError }) => getBackgroundColor({ isActive, isError })}
 `;
-const ProgressIndicatorItemLabel = styled.default.div `
+const ProgressIndicatorItemLabel = styledComponents.styled.div `
     font-size: ${({ small }) => (small ? theme.default.fontSize.xs : theme.default.fontSize.s)};
     line-height: ${({ small }) => (small ? theme.default.lineHeight.xs : theme.default.lineHeight.s)};
     font-weight: ${theme.default.fontWeight.bold};

package/build/cjs/components/RadioButton/RadioButton.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,11 +12,11 @@ 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;
     margin-bottom: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 0.5)};
 `;
-const Input = styled.default.input `
+const Input = styledComponents.styled.input `
     display: inline-grid;
     appearance: none;
     place-content: center;
@@ -90,7 +90,7 @@ const RadioButtonComponent = (_a) => {
         React__default.default.createElement(Input, { id: props.id, name: props.name, type: "radio", checked: props.checked, value: props.value, disabled: props.disabled, onChange: props.onChange, "data-testid": dataTestId && `${dataTestId}-input` }),
         props.label && (React__default.default.createElement("label", { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label` }, props.label))));
 };
-const StyledFieldset = styled.default.fieldset `
+const StyledFieldset = styledComponents.styled.fieldset `
     border: 0;
     margin: 0;
     padding: 0;