@dnanpm/styleguide 3.7.2 → 3.8.2

package/build/cjs/components/MainNavigation/globalNavStyles.js

@@ -1,21 +1,19 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var styled = require('../../themes/styled.js');
 var theme = require('../../themes/theme.js');
 
-const MenuItem = styled["default"].li `
+const MenuItem = styled.default.li `
     position: relative;
     padding: 0;
     margin: 0;
     height: 100%;
-    color: ${theme["default"].color.text.black};
+    color: ${theme.default.color.text.black};
     & > a {
-        color: ${p => (p.isActive ? theme["default"].color.text.pink : theme["default"].color.text.black)};
+        color: ${p => (p.isActive ? theme.default.color.text.pink : theme.default.color.text.black)};
     }
 `;
-const MenuLink = styled["default"].a `
+const MenuLink = styled.default.a `
     border: none;
     margin: 0;
     padding: 0;
@@ -32,19 +30,19 @@ const MenuLink = styled["default"].a `
     display: block;
     text-decoration: none;
     text-align: left;
-    color: ${p => (p.isActive ? theme["default"].color.text.pink : theme["default"].color.text.black)};
+    color: ${p => (p.isActive ? theme.default.color.text.pink : theme.default.color.text.black)};
     padding: 0.5em 1em;
     white-space: normal;
     &:hover,
     &:focus {
         text-decoration: none;
-        color: ${theme["default"].color.text.pink};
+        color: ${theme.default.color.text.pink};
         cursor: pointer;
         outline: none;
         border-bottom: none;
     }
 `;
-const MenuLinkWithChildren = styled["default"].button `
+const MenuLinkWithChildren = styled.default.button `
     line-height: 1rem;
     text-align: left;
     display: block;
@@ -55,7 +53,7 @@ const MenuLinkWithChildren = styled["default"].button `
     font-size: inherit;
     font-family: inherit;
     white-space: normal;
-    color: ${p => p && (p.isActive || p.isHighlighted) ? theme["default"].color.text.pink : theme["default"].color.default.black};
+    color: ${p => p && (p.isActive || p.isHighlighted) ? theme.default.color.text.pink : theme.default.color.default.black};
     padding: 0.5em 1em;
     span {
         position: relative;
@@ -66,18 +64,18 @@ const MenuLinkWithChildren = styled["default"].button `
             bottom: -6px;
             left: 0;
             border-bottom: 1px solid
-                ${p => (p.isHighlighted ? theme["default"].color.default.pink : 'transparent')};
+                ${p => (p.isHighlighted ? theme.default.color.default.pink : 'transparent')};
         }
     }
     &:hover,
     &:focus {
         text-decoration: none;
-        color: ${theme["default"].color.text.pink};
+        color: ${theme.default.color.text.pink};
         cursor: pointer;
         outline: none;
     }
 `;
-const MenuList = styled["default"].ul `
+const MenuList = styled.default.ul `
     display: inline-flex;
     max-height: ${p => (typeof p.isInView !== 'boolean' || p.isInView ? 'auto' : '5px')};
     overflow: ${p => (typeof p.isInView === 'boolean' ? 'hidden' : 'unset')};
@@ -86,7 +84,7 @@ const MenuList = styled["default"].ul `
     list-style: none;
     margin: 0;
     padding: 0;
-    background-color: ${theme["default"].color.default.white};
+    background-color: ${theme.default.color.default.white};
     transition: all 300ms ease-in-out;
 `;
 

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

@@ -13,17 +13,12 @@ var Box = require('../Box/Box.js');
 var ButtonClose = require('../Button/ButtonClose.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);
-var ReactModal__default = /*#__PURE__*/_interopDefaultLegacy(ReactModal);
-
 const GlobalStyle = styled.createGlobalStyle `
     body.ReactModal__Body--open {
         overflow: hidden;
     }
 `;
-const StyledReactModal = styled["default"](ReactModal__default["default"]) `
+const StyledReactModal = styled.default(ReactModal) `
     position: relative;
     width: 100vw;
     height: 100dvh;
@@ -36,7 +31,7 @@ const StyledReactModal = styled["default"](ReactModal__default["default"]) `
         height: auto;
     `};
 `;
-const StyledOverlay = styled["default"].div `
+const StyledOverlay = styled.default.div `
     display: flex;
     justify-content: center;
     align-items: center;
@@ -46,47 +41,47 @@ const StyledOverlay = styled["default"].div `
     left: 0;
     right: 0;
     z-index: 9999;
-    background-color: ${theme["default"].color.background.plum.default}${theme["default"].color.transparency.T40};
+    background-color: ${theme.default.color.background.plum.default}${theme.default.color.transparency.T40};
     animation: fadeIn 0.2s ease-in-out;
 
     @keyframes fadeIn {
         0% {
-            background-color: ${theme["default"].color.background.plum.default}${theme["default"].color.transparency.T0};
+            background-color: ${theme.default.color.background.plum.default}${theme.default.color.transparency.T0};
         }
 
         100% {
-            background-color: ${theme["default"].color.background.plum.default}${theme["default"].color.transparency.T40};
+            background-color: ${theme.default.color.background.plum.default}${theme.default.color.transparency.T40};
         }
     }
 `;
-const StyledBox = styled["default"](Box["default"]) `
+const StyledBox = styled.default(Box.default) `
     height: 100%;
     overflow-y: auto;
 `;
-const StyledContent = styled["default"].div `
+const StyledContent = styled.default.div `
     &:focus {
         outline: none;
     }
 `;
-const Title = styled["default"].h2 `
-    margin: 0 auto ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 2)};
+const Title = styled.default.h2 `
+    margin: 0 auto ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2)};
 `;
-const ModalOverlay = ({ ref, onClick, onMouseDown, className }, contentElement) => (React__default["default"].createElement(StyledOverlay, { ref: ref, onClick: onClick, onMouseDown: onMouseDown, className: className }, contentElement));
+const ModalOverlay = ({ ref, onClick, onMouseDown, className }, contentElement) => (React.createElement(StyledOverlay, { ref: ref, onClick: onClick, onMouseDown: onMouseDown, className: className }, contentElement));
 const ModalContent = (_a, children) => {
     var { ref, tabIndex, role, onKeyDown, onMouseDown, onMouseUp, onClick, className } = _a, contentProps = tslib.__rest(_a, ["ref", "tabIndex", "role", "onKeyDown", "onMouseDown", "onMouseUp", "onClick", "className"]);
-    return (React__default["default"].createElement(StyledContent, { ref: ref, tabIndex: tabIndex, role: role, onKeyDown: onKeyDown, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onClick: onClick, "aria-label": contentProps['aria-label'], "aria-modal": contentProps['aria-modal'], className: className }, children));
+    return (React.createElement(StyledContent, { ref: ref, tabIndex: tabIndex, role: role, onKeyDown: onKeyDown, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onClick: onClick, "aria-label": contentProps['aria-label'], "aria-modal": contentProps['aria-modal'], className: className }, children));
 };
 const Modal = (_a) => {
     var { appElement = '#__next', maxWidth = '37.5rem', closeButton = true, isClosable = true, 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["appElement", "maxWidth", "closeButton", "isClosable", 'data-testid']);
-    ReactModal__default["default"].setAppElement(appElement);
-    return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(StyledReactModal, { id: props.id, isOpen: props.isOpen, overlayElement: ModalOverlay, contentElement: ModalContent, onRequestClose: props.onRequestClose, portalClassName: props.className, contentLabel: props.contentLabel, shouldCloseOnEsc: isClosable, shouldCloseOnOverlayClick: isClosable, maxWidth: maxWidth },
-            React__default["default"].createElement(StyledBox, { elevation: "extraHigh", "data-testid": dataTestId },
-                closeButton && isClosable && (React__default["default"].createElement(ButtonClose["default"], { onClick: props.onRequestClose, "aria-label": props.closeLabel, "data-testid": dataTestId && `${dataTestId}-close-button` },
-                    React__default["default"].createElement(Icon["default"], { icon: icons.Close }))),
-                props.title && React__default["default"].createElement(Title, null, props.title),
+    ReactModal.setAppElement(appElement);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(StyledReactModal, { id: props.id, isOpen: props.isOpen, overlayElement: ModalOverlay, contentElement: ModalContent, onRequestClose: props.onRequestClose, portalClassName: props.className, contentLabel: props.contentLabel, shouldCloseOnEsc: isClosable, shouldCloseOnOverlayClick: isClosable, maxWidth: maxWidth },
+            React.createElement(StyledBox, { elevation: "extraHigh", "data-testid": dataTestId },
+                closeButton && isClosable && (React.createElement(ButtonClose.default, { onClick: props.onRequestClose, "aria-label": props.closeLabel, "data-testid": dataTestId && `${dataTestId}-close-button` },
+                    React.createElement(Icon.default, { icon: icons.Close }))),
+                props.title && React.createElement(Title, null, props.title),
                 props.children)),
-        React__default["default"].createElement(GlobalStyle, null)));
+        React.createElement(GlobalStyle, null)));
 };
 
-exports["default"] = Modal;
+exports.default = Modal;

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

@@ -10,50 +10,45 @@ var theme = require('../../themes/theme.js');
 var ButtonClose = require('../Button/ButtonClose.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);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
 const iconsMap = {
     info: icons.Info,
     success: icons.Check,
     warning: icons.Warning,
     error: icons.Error,
 };
-const NotificationWrapper = styled__default["default"].div `
+const NotificationWrapper = styled.div `
     display: flex;
     gap: 1rem;
-    line-height: ${theme["default"].lineHeight.default};
-    color: ${theme["default"].color.text.black};
-    background-color: ${theme["default"].color.background.white.default};
-    border-radius: ${theme["default"].radius.s};
-    border: 2px solid ${({ $type }) => theme["default"].color.notification[$type]};
+    line-height: ${theme.default.lineHeight.default};
+    color: ${theme.default.color.text.black};
+    background-color: ${theme.default.color.background.white.default};
+    border-radius: ${theme.default.radius.s};
+    border: 2px solid ${({ $type }) => theme.default.color.notification[$type]};
 `;
-const IconWrapper = styled__default["default"].div `
+const IconWrapper = styled.div `
     display: flex;
     align-items: center;
     padding: 0.5rem;
-    background-color: ${({ $type }) => theme["default"].color.notification[$type]};
+    background-color: ${({ $type }) => theme.default.color.notification[$type]};
 `;
-const ContentWrapper = styled__default["default"].span `
+const ContentWrapper = styled.span `
     margin: auto 0;
     padding: 0.5rem 0;
     width: 100%;
 `;
-const ButtonCloseStyled = styled__default["default"](ButtonClose["default"]) `
+const ButtonCloseStyled = styled(ButtonClose.default) `
     position: static;
     margin: auto 0.5rem;
 `;
 /** @visibleName Notification */
 const Notification = (_a) => {
     var { type = 'info', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["type", 'data-testid']);
-    return !props.dismissed ? (React__default["default"].createElement(NotificationWrapper, { "$type": type, className: props.className, "data-testid": dataTestId },
-        React__default["default"].createElement(IconWrapper, { "$type": type },
-            React__default["default"].createElement(Icon["default"], { icon: iconsMap[type], size: "2rem", color: theme["default"].color.default.white })),
-        React__default["default"].createElement(ContentWrapper, null, props.children),
-        props.closeButton && (React__default["default"].createElement(ButtonCloseStyled, { onClick: props.onClickCloseButton },
-            React__default["default"].createElement(Icon["default"], { icon: icons.Close, color: "currentColor" }))))) : null;
+    return !props.dismissed ? (React.createElement(NotificationWrapper, { "$type": type, className: props.className, "data-testid": dataTestId },
+        React.createElement(IconWrapper, { "$type": type },
+            React.createElement(Icon.default, { icon: iconsMap[type], size: "2rem", color: theme.default.color.default.white })),
+        React.createElement(ContentWrapper, null, props.children),
+        props.closeButton && (React.createElement(ButtonCloseStyled, { onClick: props.onClickCloseButton },
+            React.createElement(Icon.default, { icon: icons.Close, color: "currentColor" }))))) : null;
 };
 
-exports["default"] = Notification;
+exports.default = Notification;

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

@@ -7,29 +7,25 @@ var React = require('react');
 var styled = require('../../themes/styled.js');
 var theme = require('../../themes/theme.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-const NotificationBadgeElement = styled["default"].div `
+const NotificationBadgeElement = styled.default.div `
     display: flex;
     justify-content: center;
     align-items: center;
-    font-size: ${theme["default"].fontSize.xs};
-    font-weight: ${theme["default"].fontWeight.bold};
+    font-size: ${theme.default.fontSize.xs};
+    font-weight: ${theme.default.fontWeight.bold};
     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};
+    color: ${theme.default.color.text.white};
+    background-color: ${theme.default.color.notification.error};
+    border-radius: ${theme.default.radius.circle};
 `;
 /** @visibleName Notification Badge */
 const NotificationBadge = (_a) => {
     var { 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ['data-testid']);
-    return (React__default["default"].createElement(NotificationBadgeElement, { id: props.id, position: props.position, top: props.top, right: props.right, className: props.className, "data-testid": dataTestId }, props.children));
+    return (React.createElement(NotificationBadgeElement, { id: props.id, position: props.position, top: props.top, right: props.right, className: props.className, "data-testid": dataTestId }, props.children));
 };
 
-exports["default"] = NotificationBadge;
+exports.default = NotificationBadge;

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

@@ -0,0 +1,49 @@
+import type { MouseEvent, ReactNode } from 'react';
+import React from 'react';
+interface Props {
+    /**
+     * Unique ID for the component
+     */
+    id?: string;
+    /**
+     * Content of Overlay
+     */
+    children?: ReactNode;
+    /**
+     * On overlay element mouse click
+     */
+    onClick?: (e: MouseEvent<HTMLElement>) => void;
+    /**
+     * Allows to set DOM node to which Overlay component will be appended. The node must already exist.
+     * Use `false` to render in place without use of `createPortal`
+     *
+     * For more information about `createPortal`, see https://react.dev/reference/react-dom/createPortal
+     *
+     * @default 'body'
+     */
+    portalContainer?: string | false;
+    /**
+     * Allows to hide application from assistive screenreaders and other assistive technologies while the Overlay is shown
+     *
+     * @default '#__next'
+     */
+    appElement?: string;
+    /**
+     * Allows to set `overflow: hidden` CSS attribute to body element
+     *
+     * @default true
+     */
+    preventBodyScroll?: boolean;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+}
+/** @visibleName Overlay */
+declare const Overlay: ({ portalContainer: portalContainerSelector, appElement: appElementSelector, preventBodyScroll, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default Overlay;

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

@@ -0,0 +1,80 @@
+'use strict';
+
+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 theme = require('../../themes/theme.js');
+
+const Element = styled.default.div `
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: ${theme.default.color.background.plum.default}${theme.default.color.transparency.T40};
+    animation: fadeIn 0.2s ease-in-out;
+
+    @keyframes fadeIn {
+        0% {
+            background-color: ${theme.default.color.background.plum.default}${theme.default.color.transparency.T0};
+        }
+
+        100% {
+            background-color: ${theme.default.color.background.plum.default}${theme.default.color.transparency.T40};
+        }
+    }
+`;
+/** @visibleName Overlay */
+const Overlay = (_a) => {
+    var { portalContainer: portalContainerSelector = 'body', appElement: appElementSelector = '#__next', preventBodyScroll = true, 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["portalContainer", "appElement", "preventBodyScroll", 'data-testid']);
+    const contentRef = React.useRef(null);
+    const portalContainer = portalContainerSelector
+        ? document.querySelector(portalContainerSelector)
+        : null;
+    const appElement = document.querySelector(appElementSelector);
+    const overlayElement = (React.createElement(Element, { id: props.id, onClick: props.onClick, className: props.className, "data-testid": dataTestId },
+        React.createElement("div", { ref: contentRef, tabIndex: -1 }, props.children)));
+    React.useEffect(() => {
+        if (preventBodyScroll) {
+            document.body.style.setProperty('overflow', 'hidden');
+            return () => {
+                document.body.style.removeProperty('overflow');
+            };
+        }
+        return undefined;
+    });
+    React.useEffect(() => {
+        var _a;
+        if (appElement) {
+            const focusTrapStart = document.createElement('div');
+            focusTrapStart.setAttribute('tabindex', '0');
+            focusTrapStart.addEventListener('focus', () => {
+                var _a;
+                (_a = contentRef === null || contentRef === void 0 ? void 0 : contentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            });
+            const focusTrapEnd = focusTrapStart.cloneNode();
+            focusTrapEnd.addEventListener('focus', () => {
+                var _a;
+                (_a = contentRef === null || contentRef === void 0 ? void 0 : contentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            });
+            (_a = contentRef === null || contentRef === void 0 ? void 0 : contentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            document.body.prepend(focusTrapStart);
+            document.body.append(focusTrapEnd);
+            appElement.setAttribute('aria-hidden', 'true');
+            return () => {
+                document.body.removeChild(focusTrapStart);
+                document.body.removeChild(focusTrapEnd);
+                appElement.removeAttribute('aria-hidden');
+            };
+        }
+        return undefined;
+    });
+    return portalContainerSelector === false
+        ? overlayElement
+        : reactDom.createPortal(overlayElement, portalContainer !== null && portalContainer !== void 0 ? portalContainer : document.body);
+};
+
+exports.default = Overlay;

package/build/cjs/components/Pill/Pill.js

@@ -8,55 +8,50 @@ var styled = require('styled-components');
 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);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
 const getCursor = ({ isDisabled, as }) => as !== 'div' && `cursor: ${isDisabled ? 'not-allowed' : 'pointer'};`;
 const getBackgroundColor = ({ isChecked, isDisabled }) => {
-    const alphaValue = isDisabled ? theme["default"].color.transparency.T30 : theme["default"].color.transparency.T100;
+    const alphaValue = isDisabled ? theme.default.color.transparency.T30 : theme.default.color.transparency.T100;
     const colorValue = isChecked
-        ? theme["default"].color.background.plum.default
-        : theme["default"].color.background.orange.E02;
+        ? theme.default.color.background.plum.default
+        : theme.default.color.background.orange.E02;
     // Only Pill component specific colors to be used on user interaction styles
     const hoverValue = isChecked ? '#441632' : '#FFB557';
     const backgroundColor = `background-color: ${colorValue}${alphaValue};`;
     const hoverBackgroundColor = !isDisabled ? `&:hover { background-color: ${hoverValue}}` : '';
     return backgroundColor + hoverBackgroundColor;
 };
-const Label = styled__default["default"].label `
+const Label = styled.label `
     display: inline-block;
-    border-radius: ${theme["default"].radius.pill};
-    font-size: ${theme["default"].fontSize.s};
-    line-height: ${theme["default"].lineHeight.default};
-    font-weight: ${theme["default"].fontWeight.medium};
-    color: ${({ isChecked }) => isChecked ? theme["default"].color.default.white : theme["default"].color.default.black};
+    border-radius: ${theme.default.radius.pill};
+    font-size: ${theme.default.fontSize.s};
+    line-height: ${theme.default.lineHeight.default};
+    font-weight: ${theme.default.fontWeight.medium};
+    color: ${({ isChecked }) => isChecked ? theme.default.color.default.white : theme.default.color.default.black};
     border: 2px solid transparent;
-    padding: 2px ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 2.5)};
+    padding: 2px ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2.5)};
     text-align: center;
 
     ${({ isDisabled, as }) => getCursor({ isDisabled, as })}
     ${({ isChecked, isDisabled }) => getBackgroundColor({ isChecked, isDisabled })}
 
     &:focus-within, *:focus > & {
-        box-shadow: 0px 0px 0px 2px ${theme["default"].color.focus.dark};
-        border: 2px solid ${theme["default"].color.focus.light};
+        box-shadow: 0px 0px 0px 2px ${theme.default.color.focus.dark};
+        border: 2px solid ${theme.default.color.focus.light};
     }
 
     ${({ position }) => (position === 'right' || position === 'middle') &&
     `
-            margin-left: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)};
+            margin-left: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};
         `}
 
     ${({ position }) => (position === 'left' || position === 'middle') &&
     `
-            margin-right: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)};
+            margin-right: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};
         `}
     
     ${({ position }) => position === 'auto' &&
     `
-        margin: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 0.5)};
+        margin: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 0.5)};
 
         &:first-of-type {
             margin-left: 0;
@@ -67,7 +62,7 @@ const Label = styled__default["default"].label `
         }
     `}
 `;
-const Input = styled__default["default"].input `
+const Input = styled.input `
     appearance: none;
     display: block;
     border: 0 none;
@@ -81,9 +76,9 @@ const Input = styled__default["default"].input `
 `;
 const Pill = (_a) => {
     var { type = 'none', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["type", 'data-testid']);
-    return (React__default["default"].createElement(Label, { as: type === 'none' ? 'div' : undefined, position: props.position, isChecked: props.isChecked || props.isDefaultChecked, isDisabled: props.isDisabled, className: props.className, "data-testid": dataTestId },
+    return (React.createElement(Label, { as: type === 'none' ? 'div' : undefined, position: props.position, isChecked: props.isChecked || props.isDefaultChecked, isDisabled: props.isDisabled, className: props.className, "data-testid": dataTestId },
         props.children,
-        type !== 'none' && (React__default["default"].createElement(Input, { id: props.id, name: props.name, type: type, role: type, defaultChecked: props.isDefaultChecked, checked: props.isChecked, "aria-checked": props.isChecked || props.isDefaultChecked, value: props.value, onChange: props.onChange, disabled: props.isDisabled, readOnly: !props.onChange }))));
+        type !== 'none' && (React.createElement(Input, { id: props.id, name: props.name, type: type, role: type, defaultChecked: props.isDefaultChecked, checked: props.isChecked, "aria-checked": props.isChecked || props.isDefaultChecked, value: props.value, onChange: props.onChange, disabled: props.isDisabled, readOnly: !props.onChange }))));
 };
 
-exports["default"] = Pill;
+exports.default = Pill;

package/build/cjs/components/PixelLoader/PixelLoader.js

@@ -7,10 +7,6 @@ var React = require('react');
 var styled = require('../../themes/styled.js');
 var theme = require('../../themes/theme.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
 const loading = styled.keyframes `
     0% {
         transform: scale(1);
@@ -22,14 +18,14 @@ const loading = styled.keyframes `
         transform: scale(1);
     }
 `;
-const PixelLoaderWrapper = styled["default"].div `
+const PixelLoaderWrapper = styled.default.div `
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 0.125rem;
 `;
-const Pixel = styled["default"].div `
-    background-color: ${({ color }) => color || theme["default"].color.default.pink};
+const Pixel = styled.default.div `
+    background-color: ${({ color }) => color || theme.default.color.default.pink};
     display: inline-block;
     width: 0.625rem;
     height: 0.625rem;
@@ -40,11 +36,11 @@ const Pixel = styled["default"].div `
 /** @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 },
-        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" })));
+    return (React.createElement(PixelLoaderWrapper, { className: className, "data-testid": dataTestId },
+        React.createElement(Pixel, { color: props.color, delay: "-0.27" }),
+        React.createElement(Pixel, { color: props.color, delay: "-0.18" }),
+        React.createElement(Pixel, { color: props.color, delay: "-0.09" }),
+        React.createElement(Pixel, { color: props.color, delay: "0" })));
 };
 
-exports["default"] = PixelLoader;
+exports.default = PixelLoader;

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

@@ -17,6 +17,16 @@ interface Props {
      * Allows to pass common keyboard key down callback to all children
      */
     onKeyDown?: (e: KeyboardEvent<HTMLElement>) => void;
+    /**
+     * Allows to define callback function for DropdownList toggle
+     *
+     * @param isDropdownListOpen Current state of DropdownList element
+     */
+    onDropdownListToggle?: (isDropdownListOpen: boolean) => void;
+    /**
+     * Allows to define category
+     */
+    categoryLabel?: string;
     /**
      * Allows to define aria-label attribute for nav HTML element
      */