@dnanpm/styleguide 3.7.0 → 3.7.2

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

@@ -0,0 +1,69 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+import type { Props as ReactModalProps } from 'react-modal';
+interface Props {
+    /**
+     * Allows to control the state of component
+     */
+    isOpen: boolean;
+    /**
+     * Unique ID for the component
+     */
+    id?: string;
+    /**
+     * Modal title
+     */
+    title?: string;
+    /**
+     * Content of the component
+     */
+    children?: ReactNode;
+    /**
+     * Allows to hide application from assistive screenreaders and other assistive technologies while the modal is open
+     *
+     * @default '#__next'
+     */
+    appElement?: string;
+    /**
+     * Allows to change CSS property `max-width` for Modal content wrapper element.
+     * Width in mobile view is always 100% of the window size
+     *
+     * @default '37.5rem'
+     */
+    maxWidth?: string;
+    /**
+     * On overlay or close button click callback
+     */
+    onRequestClose?: ReactModalProps['onRequestClose'];
+    /**
+     * Allows to set property `aria-label` for content element
+     */
+    contentLabel?: string;
+    /**
+     * Allows to set property `aria-label` for `ButtonClose` element
+     */
+    closeLabel?: string;
+    /**
+     * Allows to show and hide close button
+     *
+     * @default true
+     */
+    closeButton?: boolean;
+    /**
+     * Allows to disable all closing handlers.
+     * When set to `false`, modal can be closed only by setting `isOpen` flag to `false`
+     *
+     * @default true
+     */
+    isClosable?: boolean;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+}
+declare const Modal: ({ appElement, maxWidth, closeButton, isClosable, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+export default Modal;

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

@@ -22,7 +22,7 @@ const GlobalStyle = styled.createGlobalStyle `
     body.ReactModal__Body--open {
         overflow: hidden;
     }
-`;
+`;
 const StyledReactModal = styled["default"](ReactModal__default["default"]) `
     position: relative;
     width: 100vw;
@@ -35,7 +35,7 @@ const StyledReactModal = styled["default"](ReactModal__default["default"]) `
         width: ${maxWidth};
         height: auto;
     `};
-`;
+`;
 const StyledOverlay = styled["default"].div `
     display: flex;
     justify-content: center;
@@ -58,35 +58,35 @@ const StyledOverlay = styled["default"].div `
             background-color: ${theme["default"].color.background.plum.default}${theme["default"].color.transparency.T40};
         }
     }
-`;
+`;
 const StyledBox = styled["default"](Box["default"]) `
     height: 100%;
     overflow-y: auto;
-`;
+`;
 const StyledContent = styled["default"].div `
     &:focus {
         outline: none;
     }
-`;
+`;
 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 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));
-};
-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),
-                props.children)),
-        React__default["default"].createElement(GlobalStyle, null)));
+`;
+const ModalOverlay = ({ ref, onClick, onMouseDown, className }, contentElement) => (React__default["default"].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));
+};
+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),
+                props.children)),
+        React__default["default"].createElement(GlobalStyle, null)));
 };
 
 exports["default"] = Modal;

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

@@ -0,0 +1,48 @@
+import type { MouseEvent, ReactNode } from 'react';
+import React from 'react';
+type NotificationType = 'info' | 'success' | 'warning' | 'error';
+interface Props {
+    /**
+     * Allows to change styling of component, depending on the passed type
+     *
+     * @param {NotificationType} info Displays `info` icon and uses `theme.color.notification.info` for styling
+     * @param {NotificationType} success Displays `success` icon and uses `theme.color.notification.success` for styling
+     * @param {NotificationType} warning Displays `warning` icon and uses `theme.color.notification.warning` for styling
+     * @param {NotificationType} error Displays `error` icon and uses `theme.color.notification.error` for styling
+     *
+     * @default 'info'
+     */
+    type?: NotificationType;
+    /**
+     * Content of the component
+     */
+    children?: ReactNode;
+    /**
+     * Allows to show and hide close button
+     *
+     * @default false
+     */
+    closeButton?: boolean;
+    /**
+     * On close button click callback
+     */
+    onClickCloseButton?: (e: MouseEvent<HTMLElement>) => void;
+    /**
+     * Allows to dismiss the notification programmatically
+     *
+     * @default false
+     */
+    dismissed?: boolean;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+}
+/** @visibleName Notification */
+declare const Notification: ({ type, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element | null;
+/** @component */
+export default Notification;

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

@@ -15,12 +15,12 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 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 iconsMap = {
+    info: icons.Info,
+    success: icons.Check,
+    warning: icons.Warning,
+    error: icons.Error,
+};
 const NotificationWrapper = styled__default["default"].div `
     display: flex;
     gap: 1rem;
@@ -29,31 +29,31 @@ const NotificationWrapper = styled__default["default"].div `
     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 `
     display: flex;
     align-items: center;
     padding: 0.5rem;
     background-color: ${({ $type }) => theme["default"].color.notification[$type]};
-`;
+`;
 const ContentWrapper = styled__default["default"].span `
     margin: auto 0;
     padding: 0.5rem 0;
     width: 100%;
-`;
+`;
 const ButtonCloseStyled = styled__default["default"](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;
+`;
+/** @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;
 };
 
 exports["default"] = Notification;

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

@@ -0,0 +1,42 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+interface Props {
+    /**
+     * Unique ID for the component
+     */
+    id?: string;
+    /**
+     * Content of the component
+     */
+    children?: ReactNode;
+    /**
+     * Allows to change CSS property `position`
+     *
+     * @default 'absolute'
+     */
+    position?: string;
+    /**
+     * Allows to change CSS property `top`
+     *
+     * @default '0'
+     */
+    top?: string;
+    /**
+     * Allows to change CSS property `right`
+     *
+     * @default '0'
+     */
+    right?: string;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+}
+/** @visibleName Notification Badge */
+declare const NotificationBadge: ({ "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default NotificationBadge;

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

@@ -25,11 +25,11 @@ const NotificationBadgeElement = styled["default"].div `
     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));
+`;
+/** @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));
 };
 
 exports["default"] = NotificationBadge;

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

@@ -0,0 +1,78 @@
+import type { ChangeEvent, ReactNode } from 'react';
+import React from 'react';
+type PillType = 'none' | 'checkbox' | 'radio';
+type Position = 'auto' | 'left' | 'right' | 'middle';
+interface Props {
+    /**
+     * Unique ID for the input element
+     */
+    id: string;
+    /**
+     * Name of the input element
+     */
+    name?: string;
+    /**
+     * Allows to change the functionality of component while retaining style
+     *
+     * @param {PillType} none No functionality
+     * @param {PillType} checkbox Acts as a checkbox input type
+     * @param {PillType} radio Acts as a radiobutton input type
+     *
+     * @default 'none'
+     */
+    type?: PillType;
+    /**
+     * Default value of input element
+     *
+     * @default undefined
+     */
+    value?: string | number;
+    /**
+     * On checkbox/radiobutton change callback
+     */
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Allows to set position of component relative to other in line content by adding appropriate margins
+     *
+     * @param {Position} auto Pill component is grouped with other pill components, add margins in between
+     * @param {Position} left Pill component is on the left side of content, add right margin
+     * @param {Position} right Pill component is on the right side of content, add left margin
+     * @param {Position} middle Pill component is in the middle of content, add left and right margins
+     *
+     * @default undefined
+     */
+    position?: Position;
+    /**
+     * Allows to set checkbox/radiobutton as checked
+     *
+     * @default false
+     */
+    isChecked?: boolean;
+    /**
+     * Allows to set checkbox/radiobutton as checked by default
+     *
+     * @default false
+     */
+    isDefaultChecked?: boolean;
+    /**
+     * Allows to disable checkbox/radiobutton functionality
+     *
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Content of the component
+     */
+    children?: ReactNode;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+}
+declare const Pill: ({ type, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default Pill;

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

@@ -13,18 +13,18 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 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 colorValue = isChecked
-        ? 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 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 colorValue = isChecked
+        ? 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 `
     display: inline-block;
     border-radius: ${theme["default"].radius.pill};
@@ -44,17 +44,17 @@ const Label = styled__default["default"].label `
         border: 2px solid ${theme["default"].color.focus.light};
     }
 
-    ${({ 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)};
 
@@ -66,7 +66,7 @@ const Label = styled__default["default"].label `
             margin-right: 0;
         }
     `}
-`;
+`;
 const Input = styled__default["default"].input `
     appearance: none;
     display: block;
@@ -78,12 +78,12 @@ const Input = styled__default["default"].input `
     &:focus-visible {
         outline: 0 none;
     }
-`;
-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 },
-        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 }))));
+`;
+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 },
+        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 }))));
 };
 
 exports["default"] = Pill;

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

@@ -0,0 +1,21 @@
+import React from 'react';
+interface Props {
+    /**
+     * Allows to pass custom color
+     *
+     * @default 'theme.color.default.pink'
+     */
+    color?: string;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+}
+/** @visibleName Pixel Loader */
+declare const PixelLoader: ({ className, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default PixelLoader;

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

@@ -21,13 +21,13 @@ const loading = styled.keyframes `
     40% {
         transform: scale(1);
     }
-`;
+`;
 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};
     display: inline-block;
@@ -36,15 +36,15 @@ const Pixel = styled["default"].div `
     margin: 0.125rem;
     animation: ${loading} 1s ease-in-out infinite;
     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 },
-        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" })));
+`;
+/** @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" })));
 };
 
 exports["default"] = PixelLoader;

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

@@ -0,0 +1,44 @@
+import type { KeyboardEvent, MouseEvent, ReactNode } from 'react';
+import React from 'react';
+interface Props {
+    /**
+     * Unique ID for the component
+     */
+    id?: string;
+    /**
+     * Content of the component
+     */
+    children?: ReactNode;
+    /**
+     * Allows to pass common mouse click callback to all children
+     */
+    onClick?: (e: MouseEvent<HTMLElement>) => void;
+    /**
+     * Allows to pass common keyboard key down callback to all children
+     */
+    onKeyDown?: (e: KeyboardEvent<HTMLElement>) => void;
+    /**
+     * Allows to define aria-label attribute for nav HTML element
+     */
+    navigationLabel?: string;
+    /**
+     * Allows to change label of ButtonIcon
+     *
+     * @default 'Lisää'
+     */
+    dropdownButtonLabel?: string;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+}
+/**
+ * @visibleName Priority Navigation
+ */
+declare const PriorityNavigation: ({ dropdownButtonLabel, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default PriorityNavigation;