@dnanpm/styleguide 3.8.1 → 3.8.2

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

@@ -17,61 +17,75 @@ var ButtonIcon = require('../Button/ButtonIcon.js');
 var Icon = require('../Icon/Icon.js');
 var PriorityNavigationItem = require('../PriorityNavigationItem/PriorityNavigationItem.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-const Container = styled["default"].nav `
+const Container = styled.default.div `
     width: 100%;
 
     ${styledUtils.media.md `
-        border-bottom: 1px solid ${theme["default"].color.line.L03};
+        border-bottom: 1px solid ${theme.default.color.line.L03};
     `}
 `;
-const ListsContainer = styled["default"].div `
+const Category = styled.default.h4 `
+    margin: 0;
+    color: ${theme.default.color.text.black};
+
+    ${styledUtils.media.md `
+        padding: 1.25rem 0.25rem 0;
+        background: linear-gradient(
+            ${theme.default.color.default.black}05 0%,
+            ${theme.default.color.default.black}00 50%,
+            ${theme.default.color.default.black}00 100%),
+            ${theme.default.color.background.white.default};
+    `}
+`;
+const ListsContainer = styled.default.div `
     display: flex;
     flex-direction: column;
     position: relative;
-    background-color: ${theme["default"].color.background.white.default};
+    background-color: ${theme.default.color.background.white.default};
 
     ${styledUtils.media.md `
         justify-content: space-between;
         flex-direction: row;
         height: 100%;
         align-items: center;
-        padding: 0 ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)};
         margin: 0 auto;
     `}
 `;
-const MobileDropdown = styled["default"].button `
+const MobileDropdown = styled.default.button `
     display: flex;
     align-items: center;
     justify-content: space-between;
     cursor: pointer;
     background: none;
     border: none;
-    padding: 1rem 1.25rem;
-    color: ${theme["default"].color.text.pink};
-    font-size: ${theme["default"].fontSize.default};
-    line-height: ${theme["default"].lineHeight.default};
-    font-weight: ${theme["default"].fontWeight.bold};
-    border-bottom: 3px solid ${theme["default"].color.default.pink};
+    padding: ${({ isCategoryLabel }) => (isCategoryLabel ? '0.5rem' : '0.75rem')} 1.25rem;
+    color: ${theme.default.color.text.pink};
+    font-size: ${theme.default.fontSize.default};
+    line-height: ${theme.default.lineHeight.default};
+    font-weight: ${theme.default.fontWeight.bold};
+    border-bottom: 3px solid ${theme.default.color.default.pink};
 `;
-const CoreULStyles = styled["default"].ul `
+const MobileDropdownContent = styled.default.div `
+    display: flex;
+    flex-direction: column;
+    align-items: baseline;
+    text-align: left;
+`;
+const CoreULStyles = styled.default.ul `
     list-style: none;
     margin: 0;
     padding: 0;
     overflow: hidden;
 `;
-const NavigationList = styled["default"](CoreULStyles) `
+const NavigationList = styled.default(CoreULStyles) `
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
+    z-index: 1;
     width: 100%;
-    background-color: ${theme["default"].color.background.white.default};
+    background-color: ${theme.default.color.background.white.default};
     position: absolute;
-    top: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 5.6)};
-    z-index: 1;
+    top: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 5.6)};
     visibility: ${({ isMobileNavigationOpen }) => (isMobileNavigationOpen ? 'visible' : 'hidden')};
     clip-path: inset(
         0% 0% ${({ isMobileNavigationOpen }) => (isMobileNavigationOpen ? '0%' : '100%')} 0%
@@ -85,19 +99,24 @@ const NavigationList = styled["default"](CoreULStyles) `
         clip-path: none;
         width: auto;
         height: 100%;
+        padding: 0 2px;
+
+        & > li:first-child {
+            margin-left: 0;
+        }
     `}
 `;
-const DropdownList = styled["default"](CoreULStyles) `
+const DropdownList = styled.default(CoreULStyles) `
     position: absolute;
-    top: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 6)};
+    top: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 6)};
     right: 0;
     z-index: 1;
     padding-bottom: 0.5rem;
-    background-color: ${theme["default"].color.background.white.default};
-    border: 1px solid ${theme["default"].color.line.L04};
-    border-radius: 0 0 ${theme["default"].radius.default} ${theme["default"].radius.default};
-    visibility: ${({ isDropdownOpen }) => (isDropdownOpen ? 'visible' : 'hidden')};
-    clip-path: inset(0% 0% ${({ isDropdownOpen }) => (isDropdownOpen ? '0%' : '100%')} 0%);
+    background-color: ${theme.default.color.background.white.default};
+    border: 1px solid ${theme.default.color.line.L04};
+    border-radius: 0 0 ${theme.default.radius.default} ${theme.default.radius.default};
+    visibility: ${({ isDropdownListOpen }) => (isDropdownListOpen ? 'visible' : 'hidden')};
+    clip-path: inset(0% 0% ${({ isDropdownListOpen }) => (isDropdownListOpen ? '0%' : '100%')} 0%);
     transition: all 0.2s ease-in-out;
 
     ${styledUtils.media.md `
@@ -106,7 +125,7 @@ const DropdownList = styled["default"](CoreULStyles) `
         }
     `}
 
-    ${common["default"]({ elevation: 'low' })}
+    ${common.default({ elevation: 'low' })}
 `;
 const reducer = (state, action) => {
     var _a, _b;
@@ -170,12 +189,17 @@ const PriorityNavigation = (_a) => {
     const listsContainerRef = React.useRef(null);
     const navigationListRef = React.useRef(null);
     const dropdownButtonRef = React.useRef(null);
-    const { isMobile } = useWindowSize["default"](theme["default"].breakpoints.md);
-    const { width: wrapperContainerWidth } = useResizeObserver["default"](listsContainerRef);
+    const { isMobile } = useWindowSize.default(theme.default.breakpoints.md);
+    const { width: wrapperContainerWidth } = useResizeObserver.default(listsContainerRef);
     const [isMobileNavigationOpen, setIsMobileNavigationOpen] = React.useState(false);
     const toggleMobileNavigation = () => setIsMobileNavigationOpen(!isMobileNavigationOpen);
-    const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
-    const toggleDropdown = () => setIsDropdownOpen(!isDropdownOpen);
+    const [isDropdownListOpen, setIsDropdownListOpen] = React.useState(false);
+    const toggleDropdown = () => {
+        if (props.onDropdownListToggle) {
+            props.onDropdownListToggle(!isDropdownListOpen);
+        }
+        setIsDropdownListOpen(!isDropdownListOpen);
+    };
     const navigationItems = React.useRef(new Map()).current;
     const initialState = {
         navigationItems: React.Children.toArray(props.children),
@@ -183,7 +207,7 @@ const PriorityNavigation = (_a) => {
         lastItemWidth: [],
     };
     const [state, dispatch] = React.useReducer(reducer, initialState);
-    const checkHorizontalOverflow = useDebounce["default"](() => {
+    const checkHorizontalOverflow = useDebounce.default(() => {
         var _a, _b;
         if (navigationListRef.current && listsContainerRef.current) {
             const navigationListWidth = navigationListRef.current.scrollWidth;
@@ -211,14 +235,17 @@ const PriorityNavigation = (_a) => {
     }, 100);
     const selectedItem = isMobile &&
         getReactNodeText([...state.navigationItems, ...state.dropdownItems].find(child => React.isValidElement(child) &&
-            child.type === PriorityNavigationItem["default"] &&
+            child.type === PriorityNavigationItem.default &&
             child.props.isActive));
-    useOutsideClick["default"](listsContainerRef, () => {
+    useOutsideClick.default(listsContainerRef, () => {
         if (isMobileNavigationOpen) {
             setIsMobileNavigationOpen(false);
         }
-        if (isDropdownOpen) {
-            setIsDropdownOpen(false);
+        if (isDropdownListOpen) {
+            if (props.onDropdownListToggle) {
+                props.onDropdownListToggle(false);
+            }
+            setIsDropdownListOpen(false);
         }
     });
     React.useEffect(() => {
@@ -241,20 +268,24 @@ const PriorityNavigation = (_a) => {
         });
         setIsMobileNavigationOpen(false);
     }, [props.children]);
-    return (React__default["default"].createElement(Container, { id: props.id, "aria-label": props.navigationLabel, className: props.className, "data-testid": dataTestId },
-        React__default["default"].createElement(ListsContainer, { ref: listsContainerRef },
-            isMobile && selectedItem && (React__default["default"].createElement(MobileDropdown, { onClick: toggleMobileNavigation },
-                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 }, React.Children.map([...state.navigationItems, ...(isMobile ? state.dropdownItems : [])], (navigationItem, index) => React.isValidElement(navigationItem) &&
-                navigationItem.type === PriorityNavigationItem["default"] && (React__default["default"].createElement(PriorityNavigationItem["default"], { id: navigationItem.props.id, key: navigationItem.key, onClick: navigationItem.props.onClick || props.onClick, onKeyDown: navigationItem.props.onKeyDown || props.onKeyDown, isActive: navigationItem.props.isActive, className: navigationItem.props.className, "data-testid": navigationItem.props['data-testid'], innerRef: instance => instance && navigationItems.set(index, instance) },
-                navigationItem.props.children,
-                navigationItem.props.isActive && isMobile && (React__default["default"].createElement(Icon["default"], { icon: icons.Check, color: theme["default"].color.default.pink })))))),
-            !isMobile && Boolean(state.dropdownItems.length) && (React__default["default"].createElement(React__default["default"].Fragment, null,
-                React__default["default"].createElement("div", { ref: dropdownButtonRef },
-                    React__default["default"].createElement(ButtonIcon["default"], { onClick: toggleDropdown, icon: isDropdownOpen ? icons.ChevronUp : icons.ChevronDown, isReversed: true }, dropdownButtonLabel)),
-                React__default["default"].createElement(DropdownList, { isDropdownOpen: isDropdownOpen }, state.dropdownItems.map(dropdownItem => React.isValidElement(dropdownItem) &&
-                    dropdownItem.type === PriorityNavigationItem["default"] && (React__default["default"].createElement(PriorityNavigationItem["default"], { id: dropdownItem.props.id, key: dropdownItem.key, onClick: dropdownItem.props.onClick || props.onClick, onKeyDown: dropdownItem.props.onKeyDown || props.onKeyDown, isActive: dropdownItem.props.isActive, className: dropdownItem.props.className, "data-testid": dropdownItem.props['data-testid'] }, dropdownItem.props.children)))))))));
+    return (React.createElement(Container, { id: props.id, className: props.className, "data-testid": dataTestId },
+        !isMobile && props.categoryLabel && React.createElement(Category, null, props.categoryLabel),
+        React.createElement("nav", { "aria-label": props.navigationLabel },
+            React.createElement(ListsContainer, { ref: listsContainerRef },
+                isMobile && selectedItem && (React.createElement(MobileDropdown, { onClick: toggleMobileNavigation, "aria-label": props.categoryLabel && selectedItem, isCategoryLabel: Boolean(props.categoryLabel) },
+                    React.createElement(MobileDropdownContent, null,
+                        props.categoryLabel && React.createElement(Category, null, props.categoryLabel),
+                        selectedItem),
+                    React.createElement(Icon.default, { icon: isMobileNavigationOpen ? icons.OvalChevronUp : icons.OvalChevronDown, size: "2.5rem" }))),
+                React.createElement(NavigationList, { ref: navigationListRef, isMobileNavigationOpen: isMobileNavigationOpen }, React.Children.map([...state.navigationItems, ...(isMobile ? state.dropdownItems : [])], (navigationItem, index) => React.isValidElement(navigationItem) &&
+                    navigationItem.type === PriorityNavigationItem.default && (React.createElement(PriorityNavigationItem.default, { id: navigationItem.props.id, key: navigationItem.key, onClick: navigationItem.props.onClick || props.onClick, onKeyDown: navigationItem.props.onKeyDown || props.onKeyDown, isActive: navigationItem.props.isActive, className: navigationItem.props.className, "data-testid": navigationItem.props['data-testid'], innerRef: instance => instance && navigationItems.set(index, instance) },
+                    navigationItem.props.children,
+                    navigationItem.props.isActive && isMobile && (React.createElement(Icon.default, { icon: icons.Check, color: theme.default.color.default.pink })))))),
+                !isMobile && Boolean(state.dropdownItems.length) && (React.createElement(React.Fragment, null,
+                    React.createElement("div", { ref: dropdownButtonRef },
+                        React.createElement(ButtonIcon.default, { onClick: toggleDropdown, icon: isDropdownListOpen ? icons.ChevronUp : icons.ChevronDown, isReversed: true }, dropdownButtonLabel)),
+                    React.createElement(DropdownList, { isDropdownListOpen: isDropdownListOpen }, state.dropdownItems.map(dropdownItem => React.isValidElement(dropdownItem) &&
+                        dropdownItem.type === PriorityNavigationItem.default && (React.createElement(PriorityNavigationItem.default, { id: dropdownItem.props.id, key: dropdownItem.key, onClick: dropdownItem.props.onClick || props.onClick, onKeyDown: dropdownItem.props.onKeyDown || props.onKeyDown, isActive: dropdownItem.props.isActive, className: dropdownItem.props.className, "data-testid": dropdownItem.props['data-testid'] }, dropdownItem.props.children))))))))));
 };
 
-exports["default"] = PriorityNavigation;
+exports.default = PriorityNavigation;

package/build/cjs/components/PriorityNavigationItem/PriorityNavigationItem.js

@@ -8,11 +8,7 @@ var styled = require('../../themes/styled.js');
 var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-const Element = styled["default"].li `
+const Element = styled.default.li `
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -27,10 +23,10 @@ const Element = styled["default"].li `
     `};
 
     &:focus-within {
-        & > * {
-            border-radius: ${theme["default"].radius.s};
-            border: 2px solid ${theme["default"].color.focus.light};
-            box-shadow: 0px 0px 0px 2px ${theme["default"].color.focus.dark};
+        & > *:not(a, span.dnasg-icon) {
+            border-radius: ${theme.default.radius.s};
+            border: 2px solid ${theme.default.color.focus.light};
+            box-shadow: 0px 0px 0px 2px ${theme.default.color.focus.dark};
             outline: none;
         }
     }
@@ -40,17 +36,26 @@ const Element = styled["default"].li `
         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 {
+        &:focus-visible {
+            border-radius: ${theme.default.radius.s};
+            border: 2px solid ${theme.default.color.focus.light};
+            box-shadow: 0px 0px 0px 2px ${theme.default.color.focus.dark};
+            outline: none;
+        }
+    }
+
     & > * {
         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 {
-            color: ${theme["default"].color.hover.pink};
+            color: ${theme.default.color.hover.pink};
             text-decoration: none;
         }
     }
@@ -60,7 +65,7 @@ const Element = styled["default"].li `
  */
 const PriorityNavigationItem = (_a) => {
     var { 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ['data-testid']);
-    return (React__default["default"].createElement(Element, { id: props.id, ref: props.innerRef, onClick: props.onClick, onKeyDown: props.onKeyDown, isActive: props.isActive, className: props.className, "data-testid": dataTestId }, props.children));
+    return (React.createElement(Element, { id: props.id, ref: props.innerRef, onClick: props.onClick, onKeyDown: props.onKeyDown, isActive: props.isActive, className: props.className, "data-testid": dataTestId }, props.children));
 };
 
-exports["default"] = PriorityNavigationItem;
+exports.default = PriorityNavigationItem;

package/build/cjs/components/ProgressIndicator/ProgressIndicator.js

@@ -10,37 +10,33 @@ var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
 var Icon = require('../Icon/Icon.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
 const getBackgroundColor = ({ isActive, isError, }) => {
-    const defaultColor = theme["default"].color.background.white.default;
+    const defaultColor = theme.default.color.background.white.default;
     const currentColor = isError
-        ? theme["default"].color.notification.error
-        : theme["default"].color.background.pink.default;
+        ? theme.default.color.notification.error
+        : theme.default.color.background.pink.default;
     return `background-color: ${isError || isActive ? currentColor : defaultColor};`;
 };
 const getBorderColor = ({ isActive, isCompleted, isError }) => {
-    const defaultColor = theme["default"].color.line.L02;
+    const defaultColor = theme.default.color.line.L02;
     const currentColor = isError
-        ? theme["default"].color.notification.error
-        : theme["default"].color.background.pink.default;
+        ? theme.default.color.notification.error
+        : theme.default.color.background.pink.default;
     return isActive || isCompleted ? currentColor : defaultColor;
 };
-const ProgressIndicatorWrapper = styled["default"].ul `
+const ProgressIndicatorWrapper = styled.default.ul `
     display: flex;
     justify-content: space-between;
     margin: 0;
     padding: 0;
 `;
-const ProgressIndicatorItem = styled["default"].li `
+const ProgressIndicatorItem = styled.default.li `
     position: relative;
     display: inline-flex;
     flex-direction: column;
     align-items: center;
     flex: 1.5 1 0%;
-    gap: ${({ small }) => styledUtils.getMultipliedSize(theme["default"].base.baseWidth, small ? 0.5 : 1)};
+    gap: ${({ small }) => styledUtils.getMultipliedSize(theme.default.base.baseWidth, small ? 0.5 : 1)};
 
     &:first-of-type {
         align-items: flex-start;
@@ -68,37 +64,37 @@ const ProgressIndicatorItem = styled["default"].li `
         }
     `}
 `;
-const ProgressIndicatorItemConnector = styled["default"].div `
+const ProgressIndicatorItemConnector = styled.default.div `
     position: absolute;
-    top: ${({ small }) => styledUtils.getMultipliedSize(theme["default"].base.baseHeight, small ? 1.5 : 2)};
+    top: ${({ small }) => styledUtils.getMultipliedSize(theme.default.base.baseHeight, small ? 1.5 : 2)};
     left: -50%;
     right: 50%;
     width: 100%;
     height: ${({ small }) => (small ? '2px' : '4px')};
-    background-color: ${({ isActive, isCompleted }) => isActive || isCompleted ? theme["default"].color.default.pink : theme["default"].color.line.L02};
+    background-color: ${({ isActive, isCompleted }) => isActive || isCompleted ? theme.default.color.default.pink : theme.default.color.line.L02};
 `;
-const ProgressIndicatorItemNumber = styled["default"].div `
+const ProgressIndicatorItemNumber = styled.default.div `
     display: flex;
     justify-content: center;
     align-items: center;
-    font-size: ${({ small }) => (small ? theme["default"].fontSize.s : theme["default"].fontSize.l)};
-    font-weight: ${theme["default"].fontWeight.bold};
-    width: ${({ small }) => styledUtils.getMultipliedSize(theme["default"].base.baseWidth, small ? 3 : 4)};
-    height: ${({ small }) => styledUtils.getMultipliedSize(theme["default"].base.baseHeight, small ? 3 : 4)};
+    font-size: ${({ small }) => (small ? theme.default.fontSize.s : theme.default.fontSize.l)};
+    font-weight: ${theme.default.fontWeight.bold};
+    width: ${({ small }) => styledUtils.getMultipliedSize(theme.default.base.baseWidth, small ? 3 : 4)};
+    height: ${({ small }) => styledUtils.getMultipliedSize(theme.default.base.baseHeight, small ? 3 : 4)};
     cursor: ${({ isClickable }) => (isClickable ? 'pointer' : 'default')};
-    color: ${({ isActive }) => (isActive ? theme["default"].color.text.white : theme["default"].color.text.gray)};
-    border-radius: ${theme["default"].radius.circle};
+    color: ${({ isActive }) => (isActive ? theme.default.color.text.white : theme.default.color.text.gray)};
+    border-radius: ${theme.default.radius.circle};
     border: ${({ small, isActive, isCompleted, isError }) => `${small ? '3px' : '4px'} solid ${getBorderColor({ isActive, isCompleted, isError })}`};
     z-index: 1;
 
     ${({ isActive, isError }) => getBackgroundColor({ isActive, isError })}
 `;
-const ProgressIndicatorItemLabel = styled["default"].div `
+const ProgressIndicatorItemLabel = styled.default.div `
     display: none;
-    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};
-    color: ${({ isActive }) => (isActive ? theme["default"].color.text.black : theme["default"].color.text.gray)};
+    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};
+    color: ${({ isActive }) => (isActive ? theme.default.color.text.black : theme.default.color.text.gray)};
 
     ${styledUtils.media.sm `
         display: initial;
@@ -121,12 +117,12 @@ const ProgressIndicator = (_a) => {
                 props.onStepClick(index, e);
             }
         };
-        return (React__default["default"].createElement(ProgressIndicatorItem, { key: id, small: props.small, "aria-current": isActive ? 'step' : 'false' },
-            index > 0 && (React__default["default"].createElement(ProgressIndicatorItemConnector, { small: props.small, isActive: isActive, isCompleted: isCompleted })),
-            React__default["default"].createElement(ProgressIndicatorItemNumber, { small: props.small, onClick: handleClick, isActive: isActive, isCompleted: isCompleted, isError: isError, isClickable: isCompleted && Boolean(props.onStepClick) }, isCompleted || isError ? (React__default["default"].createElement(Icon["default"], { icon: isError ? icons.Warning : icons.Check, color: isError ? theme["default"].color.text.white : theme["default"].color.text.pink, size: "1rem" })) : (stepNumber)),
-            label && (React__default["default"].createElement(ProgressIndicatorItemLabel, { small: props.small, onClick: handleClick, isActive: isActive }, label))));
+        return (React.createElement(ProgressIndicatorItem, { key: id, small: props.small, "aria-current": isActive ? 'step' : 'false' },
+            index > 0 && (React.createElement(ProgressIndicatorItemConnector, { small: props.small, isActive: isActive, isCompleted: isCompleted })),
+            React.createElement(ProgressIndicatorItemNumber, { small: props.small, onClick: handleClick, isActive: isActive, isCompleted: isCompleted, isError: isError, isClickable: isCompleted && Boolean(props.onStepClick) }, isCompleted || isError ? (React.createElement(Icon.default, { icon: isError ? icons.Warning : icons.Check, color: isError ? theme.default.color.text.white : theme.default.color.text.pink, size: "1rem" })) : (stepNumber)),
+            label && (React.createElement(ProgressIndicatorItemLabel, { small: props.small, onClick: handleClick, isActive: isActive }, label))));
     });
-    return (React__default["default"].createElement(ProgressIndicatorWrapper, { className: props.className, "data-testid": dataTestId }, progressIndicatorItems));
+    return (React.createElement(ProgressIndicatorWrapper, { className: props.className, "data-testid": dataTestId }, progressIndicatorItems));
 };
 
-exports["default"] = ProgressIndicator;
+exports.default = ProgressIndicator;

package/build/cjs/components/RadioButton/RadioButton.js

@@ -9,29 +9,25 @@ var styled = require('../../themes/styled.js');
 var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-const Container = styled["default"].div `
+const Container = styled.default.div `
     display: flex;
-    margin-bottom: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 0.5)};
+    margin-bottom: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 0.5)};
 `;
-const Input = styled["default"](globalStyles.CheckboxAndRadioInputCore) `
-    border-radius: ${theme["default"].radius.circle};
+const Input = styled.default(globalStyles.CheckboxAndRadioInputCore) `
+    border-radius: ${theme.default.radius.circle};
 
     &::before {
-        border-radius: ${theme["default"].radius.circle};
-        width: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)};
-        height: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)};
+        border-radius: ${theme.default.radius.circle};
+        width: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};
+        height: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};
     }
 `;
 /** @visibleName Radio Button */
 const RadioButton = (_a) => {
     var { 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ['data-testid']);
-    return (React__default["default"].createElement(Container, { className: props.className, "data-testid": dataTestId },
-        React__default["default"].createElement(Input, { id: props.id, name: props.name, type: "radio", checked: props.checked, "aria-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))));
+    return (React.createElement(Container, { className: props.className, "data-testid": dataTestId },
+        React.createElement(Input, { id: props.id, name: props.name, type: "radio", checked: props.checked, "aria-checked": props.checked, value: props.value, disabled: props.disabled, onChange: props.onChange, "data-testid": dataTestId && `${dataTestId}-input` }),
+        props.label && (React.createElement("label", { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label` }, props.label))));
 };
 
-exports["default"] = RadioButton;
+exports.default = RadioButton;

package/build/cjs/components/ReadMore/ReadMore.js

@@ -9,36 +9,32 @@ var styled = require('../../themes/styled.js');
 var theme = require('../../themes/theme.js');
 var ButtonIcon = require('../Button/ButtonIcon.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-const Container = styled["default"].div `
+const Container = styled.default.div `
     display: flex;
     flex-direction: column;
 `;
-const Content = styled["default"].div `
+const Content = styled.default.div `
     ${({ isExpanded, collapsedSize }) => !isExpanded &&
     `
         overflow: hidden;
         max-height: ${collapsedSize};
-        mask-image: linear-gradient(${theme["default"].color.background.white.default}, transparent);
+        mask-image: linear-gradient(${theme.default.color.background.white.default}, transparent);
     `}
 `;
-const ButtonWrapper = styled["default"].div `
+const ButtonWrapper = styled.default.div `
     margin: 0.625rem 0.313rem;
     align-self: ${({ buttonPosition }) => (buttonPosition === 'right' ? 'flex-end' : 'flex-start')};
 `;
-const StyledButtonIcon = styled["default"](ButtonIcon["default"]) `
-    color: ${theme["default"].color.text.pink};
+const StyledButtonIcon = styled.default(ButtonIcon.default) `
+    color: ${theme.default.color.text.pink};
 
     &:hover {
-        color: ${theme["default"].color.hover.pink};
+        color: ${theme.default.color.hover.pink};
         text-decoration: none;
     }
 
     &:active {
-        color: ${theme["default"].color.text.pink};
+        color: ${theme.default.color.text.pink};
     }
 `;
 /** @visibleName Read More */
@@ -62,10 +58,10 @@ const ReadMore = (_a) => {
             setExpanded(false);
         }
     }, [props.seoInitExpanded]);
-    return (React__default["default"].createElement(Container, { id: props.id, className: props.className, "data-testid": dataTestId },
-        React__default["default"].createElement(Content, { isExpanded: temporaryStateManagement, collapsedSize: collapsedSize, "data-testid": dataTestId && `${dataTestId}-content` }, props.children),
-        React__default["default"].createElement(ButtonWrapper, { buttonPosition: props.buttonPosition },
-            React__default["default"].createElement(StyledButtonIcon, { icon: temporaryStateManagement ? icons.ChevronUp : icons.ChevronDown, onClick: handleOnClick }, temporaryButtonLabel || props.buttonLabel))));
+    return (React.createElement(Container, { id: props.id, className: props.className, "data-testid": dataTestId },
+        React.createElement(Content, { isExpanded: temporaryStateManagement, collapsedSize: collapsedSize, "data-testid": dataTestId && `${dataTestId}-content` }, props.children),
+        React.createElement(ButtonWrapper, { buttonPosition: props.buttonPosition },
+            React.createElement(StyledButtonIcon, { icon: temporaryStateManagement ? icons.ChevronUp : icons.ChevronDown, onClick: handleOnClick }, temporaryButtonLabel || props.buttonLabel))));
 };
 
-exports["default"] = ReadMore;
+exports.default = ReadMore;

package/build/cjs/components/Search/Search.js

@@ -10,28 +10,24 @@ var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
 var ButtonIcon = require('../Button/ButtonIcon.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-const Container = styled["default"].div `
+const Container = styled.default.div `
     display: flex;
     align-items: center;
-    border-bottom: 2px solid ${theme["default"].color.default.pink};
+    border-bottom: 2px solid ${theme.default.color.default.pink};
 `;
-const Input = styled["default"].input `
+const Input = styled.default.input `
     display: inline-block;
     appearance: none;
     border: 0;
     vertical-align: middle;
-    font-family: ${theme["default"].fontFamily.default};
-    font-size: ${theme["default"].fontSize.default};
-    line-height: ${theme["default"].lineHeight.default};
-    color: ${theme["default"].color.text.black};
+    font-family: ${theme.default.fontFamily.default};
+    font-size: ${theme.default.fontSize.default};
+    line-height: ${theme.default.lineHeight.default};
+    color: ${theme.default.color.text.black};
     background-color: transparent;
-    padding: 0 ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)};
+    padding: 0 ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};
     width: 100%;
-    height: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 4)};
+    height: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 4)};
 
     &:focus {
         outline: 0;
@@ -42,7 +38,7 @@ const Input = styled["default"].input `
     }
 
     &::placeholder {
-        color: ${theme["default"].color.text.black}${theme["default"].color.transparency.T40};
+        color: ${theme.default.color.text.black}${theme.default.color.transparency.T40};
     }
 
     &::-ms-clear {
@@ -56,8 +52,8 @@ const Input = styled["default"].input `
         display: none;
     }
 `;
-const Button = styled["default"](ButtonIcon["default"]) `
-    margin: 0 ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)};
+const Button = styled.default(ButtonIcon.default) `
+    margin: 0 ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};
 `;
 const Search = (_a) => {
     var _b;
@@ -71,9 +67,9 @@ const Search = (_a) => {
             props.onButtonClick(e);
         }
     };
-    return (React__default["default"].createElement(Container, { className: props.className, "data-testid": dataTestId },
-        React__default["default"].createElement(Input, { id: props.id, name: props.name, type: "search", ref: inputRef, value: props.value, onChange: props.onChange, onBlur: props.onBlur, onFocus: props.onFocus, onKeyDown: props.onKeyDown, onKeyPress: props.onKeyPress, placeholder: props.placeholder, autoFocus: props.autoFocus }),
-        React__default["default"].createElement(Button, { icon: ((_b = props.value) === null || _b === void 0 ? void 0 : _b.length) ? icons.Close : icons.Search, name: `${props.name}-button`, onClick: handleButtonClick })));
+    return (React.createElement(Container, { className: props.className, "data-testid": dataTestId },
+        React.createElement(Input, { id: props.id, name: props.name, type: "search", ref: inputRef, value: props.value, onChange: props.onChange, onBlur: props.onBlur, onFocus: props.onFocus, onKeyDown: props.onKeyDown, onKeyPress: props.onKeyPress, placeholder: props.placeholder, autoFocus: props.autoFocus }),
+        React.createElement(Button, { icon: ((_b = props.value) === null || _b === void 0 ? void 0 : _b.length) ? icons.Close : icons.Search, name: `${props.name}-button`, onClick: handleButtonClick })));
 };
 
-exports["default"] = Search;
+exports.default = Search;