@dnanpm/styleguide 3.9.8 → 3.9.10

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

@@ -54,8 +54,196 @@ interface Props {
      * If not provided, visibleItems property will be used
      */
     responsive?: Partial<Responsive>;
+    /**
+     * Allows to pass a screen reader label for the pagination item next to the current slide number
+     */
+    paginationAriaLabel?: string;
+    /**
+     * Allows to pass a screen reader label for the next arrow button
+     */
+    nextAriaLabel?: string;
+    /**
+     * Allows to pass a screen reader label for the previous arrow button
+     */
+    previousAriaLabel?: string;
+    /**
+     * Number of items to move when navigating the carousel
+     *
+     * @default 1
+     */
+    swipeStep?: number;
 }
+declare const SlideItem: import("styled-components").StyledComponent<"div", {
+    base: {
+        baseHeight: {
+            value: number;
+            unit: string;
+        };
+        baseWidth: {
+            value: number;
+            unit: string;
+        };
+    };
+    breakpoints: import("../../themes/themeComponents/breakpoints").ViewBreakpoints;
+    color: {
+        default: {
+            pink: string;
+            plum: string;
+            white: string;
+            black: string;
+        };
+        accent: {
+            lemon: string;
+            sky: string;
+            orange: string;
+        };
+        active: {
+            pink: string;
+        };
+        hover: {
+            pink: string;
+        };
+        text: {
+            gray: string;
+            pink: string;
+            plum: string;
+            white: string;
+            black: string;
+        };
+        line: {
+            L01: string;
+            L02: string;
+            L03: string;
+            L04: string;
+        };
+        notification: {
+            info: string;
+            success: string;
+            warning: string;
+            error: string;
+        };
+        background: {
+            sand: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            pink: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            plum: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            lemon: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            sky: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            orange: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            white: {
+                default: string;
+            };
+        };
+        focus: {
+            dark: string;
+            light: string;
+        };
+        transparency: {
+            T0: string;
+            T10: string;
+            T20: string;
+            T30: string;
+            T40: string;
+            T50: string;
+            T60: string;
+            T70: string;
+            T80: string;
+            T90: string;
+            T100: string;
+        };
+    };
+    fontFamily: {
+        default: string;
+        heading: string;
+        numerals: string;
+    };
+    fontSize: {
+        default: string;
+        xl: string;
+        l: string;
+        s: string;
+        xs: string;
+        h1XL: string;
+        h1L: string;
+        h1M: string;
+        h1S: string;
+        h2M: string;
+        h2S: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h1: string;
+        h2: string;
+    };
+    fontWeight: {
+        book: number;
+        medium: number;
+        bold: number;
+        black: number;
+    };
+    form: {
+        smallSelectWidth: string;
+        smallSelectHeight: string;
+    };
+    grid: {
+        gutter: string;
+    };
+    lineHeight: {
+        default: string;
+        xl: string;
+        s: string;
+        xs: string;
+        xxs: string;
+        auto: string;
+        h1XL: string;
+        h1L: string;
+        h1M: string;
+        h1S: string;
+        h2M: string;
+        h2S: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h1: string;
+        h2: string;
+    };
+    media: Record<string | number, (l: TemplateStringsArray, ...p: (string | number)[]) => string>;
+    radius: {
+        default: string;
+        s: string;
+        xs: string;
+        circle: string;
+        pill: string;
+    };
+}, Required<Pick<Props, "visibleItems">> & {
+    itemWidthCorrection: number;
+    isSwiping: boolean;
+}, never>;
 /** @visibleName Carousel */
 declare const Carousel: ({ "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
 /** @component */
 export default Carousel;
+export { SlideItem };

package/build/cjs/components/Carousel/Carousel.js

@@ -146,6 +146,7 @@ const Counter = styled.default.span `
 `;
 /** @visibleName Carousel */
 const Carousel = (_a) => {
+    var _b;
     var { 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ['data-testid']);
     const slidesWrapperRef = React.useRef(null);
     const scrollbarRef = React.useRef(null);
@@ -175,9 +176,18 @@ const Carousel = (_a) => {
         }, 100);
         return () => clearTimeout(timeoutId);
     }, [width, isMobile, props.responsive, props.visibleItems, props.children]);
+    const getStep = (step, visibleItems) => {
+        if (step > visibleItems) {
+            return Math.floor(visibleItems);
+        }
+        return Math.floor(step);
+    };
     const visibleItems = props.visibleItems || calculatedItems;
     const slidesWrapperGapSizePx = 20;
     const slideScreensCount = React.Children.count(props.children) - Math.floor(visibleItems) + 1;
+    const step = getStep((_b = props.swipeStep) !== null && _b !== void 0 ? _b : 1, visibleItems);
+    const currentStepIndex = Math.ceil(currentIndex / step);
+    const totalSwipeSteps = Math.ceil(slideScreensCount / step + ((slideScreensCount - 1) % step !== 0 ? 1 : 0));
     const itemWidthCorrectionRatio = (slidesWrapperGapSizePx * visibleItems) % Math.floor(visibleItems) === 0
         ? (visibleItems - 1) / visibleItems
         : Math.floor(visibleItems) / visibleItems;
@@ -224,14 +234,15 @@ const Carousel = (_a) => {
         }
     };
     const handleNavigationButtonPreviousClick = () => {
-        handleSetCurrentIndex(currentIndex - 1);
+        handleSetCurrentIndex(currentIndex - step);
     };
     const handleNavigationButtonNextClick = () => {
-        handleSetCurrentIndex(currentIndex + 1);
+        handleSetCurrentIndex(currentIndex + step);
     };
     const handlePaginationItemClick = (e) => {
         if (e.currentTarget.parentElement) {
-            handleSetCurrentIndex([...e.currentTarget.parentElement.children].indexOf(e.currentTarget));
+            const index = [...e.currentTarget.parentElement.children].indexOf(e.currentTarget);
+            handleSetCurrentIndex(index * step);
         }
     };
     const handlePointerMove = (e) => {
@@ -272,14 +283,14 @@ const Carousel = (_a) => {
         if (endTime - data.startTime > 300) {
             const swipeRatio = Math.abs(data.currentTransform - data.startTransform) / data.itemWidth;
             if (swipeRatio >= 0.5) {
-                handleSetCurrentIndex(currentIndex + Math.round(data.direction > 0 ? swipeRatio : -swipeRatio));
+                handleSetCurrentIndex(currentIndex + Math.round(data.direction > 0 ? swipeRatio : -swipeRatio) * step);
             }
             else {
                 handleSetCurrentIndex(currentIndex);
             }
         }
         else {
-            handleSetCurrentIndex(currentIndex + data.direction);
+            handleSetCurrentIndex(currentIndex + data.direction * step);
         }
         if (data.scrollbarNavigation && data.direction === 0) {
             if (knobRef.current) {
@@ -341,19 +352,21 @@ const Carousel = (_a) => {
             props.title && React__default.default.createElement(Title, null, props.title),
             React__default.default.createElement(Navigation, null,
                 props.hasCounter && (React__default.default.createElement(Counter, null,
-                    slideScreensCount === 0 ? 0 : currentIndex + 1,
+                    slideScreensCount === 0 ? 0 : currentStepIndex + 1,
                     "/",
-                    slideScreensCount)),
-                React__default.default.createElement(ButtonArrow.default, { direction: "left", "aria-label": "Previous", onClick: handleNavigationButtonPreviousClick, disabled: currentIndex <= 0 }),
-                React__default.default.createElement(ButtonArrow.default, { direction: "right", "aria-label": "Next", onClick: handleNavigationButtonNextClick, disabled: currentIndex + visibleItems >= React.Children.count(props.children) }))),
+                    totalSwipeSteps)),
+                React__default.default.createElement(ButtonArrow.default, { direction: "left", "aria-label": props.previousAriaLabel, onClick: handleNavigationButtonPreviousClick, disabled: currentIndex <= 0, type: "button" }),
+                React__default.default.createElement(ButtonArrow.default, { direction: "right", "aria-label": props.nextAriaLabel, onClick: handleNavigationButtonNextClick, disabled: currentIndex + visibleItems >= React.Children.count(props.children), type: "button" }))),
         React__default.default.createElement(Content, { "data-testid": dataTestId && `${dataTestId}-content` },
             React__default.default.createElement(SlidesWrapper, { ref: slidesWrapperRef, onPointerDown: handleSlidesPointerDown, gap: slidesWrapperGapSizePx / 16 }, React.Children.map(props.children, child => (React__default.default.createElement(SlideItem, { visibleItems: visibleItems, itemWidthCorrection: itemWidthCorrection, isSwiping: isSwiping, onPointerDown: handlePointerDown }, child))))),
         React__default.default.createElement(Footer, { "data-testid": dataTestId && `${dataTestId}-footer` },
-            React__default.default.createElement(Pagination, null, [...Array(slideScreensCount).keys()].map((value, index) => (React__default.default.createElement(PaginationItem, { key: value, "aria-label": `Move to step ${index + 1}`, "aria-current": index === currentIndex, isActive: index === currentIndex, onClick: handlePaginationItemClick })))),
+            React__default.default.createElement(Pagination, null, [...Array(totalSwipeSteps).keys()].map((value, index) => (React__default.default.createElement(PaginationItem, { key: value, "aria-label": props.paginationAriaLabel &&
+                    `${props.paginationAriaLabel} ${index + 1}`, "aria-current": Math.ceil(currentIndex / step) === index, isActive: Math.ceil(currentIndex / step) === index, onClick: handlePaginationItemClick, type: "button" })))),
             React__default.default.createElement(Scrollbar, { ref: scrollbarRef, onPointerDown: handleScrollbarPointerDown },
                 React__default.default.createElement(Knob, { ref: knobRef, knobSize: slideScreensCount })),
             props.footerButton && (React__default.default.createElement(FooterButton, null,
                 React__default.default.createElement(ButtonIcon.default, { icon: icons.ArrowRight, onClick: props.onFooterButtonClick }, props.footerButton))))));
 };
 
+exports.SlideItem = SlideItem;
 exports.default = Carousel;

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

@@ -29,6 +29,10 @@ interface Props {
      * Allows to pass a custom className
      */
     className?: string;
+    /**
+     * An aria-label to the focusable separator should be included if there is more than one focusable separator
+     */
+    ariaLabelFocusableSeparator?: string;
 }
 declare const Divider: ({ "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
 /** @component */

package/build/cjs/components/Divider/Divider.js

@@ -26,7 +26,8 @@ const DividerWrapper = styled__default.default.div `
 `;
 const Divider = (_a) => {
     var { 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ['data-testid']);
-    return (React__default.default.createElement(DividerWrapper, { id: props.id, margin: props.margin, padding: props.padding, className: props.className, "data-testid": dataTestId }, props.children));
+    const isFocusableSeparator = Boolean(props.children);
+    return (React__default.default.createElement(DividerWrapper, { id: props.id, margin: props.margin, padding: props.padding, className: props.className, "data-testid": dataTestId, as: isFocusableSeparator ? 'div' : 'hr', role: isFocusableSeparator ? 'separator' : undefined, "aria-orientation": "horizontal", "aria-label": props.ariaLabelFocusableSeparator, "aria-hidden": !isFocusableSeparator, tabIndex: isFocusableSeparator ? 0 : -1 }, props.children));
 };
 
 exports.default = Divider;

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

@@ -37,6 +37,10 @@ interface Props {
      * Allows to pass testid string for testing purposes
      */
     'data-testid'?: string;
+    /**
+     * Allows to pass a screen reader label to the component
+     */
+    ariaLabel?: string;
 }
 /** @visibleName Info Dialog */
 declare const InfoDialog: ({ position, type, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;

package/build/cjs/components/InfoDialog/InfoDialog.js

@@ -62,7 +62,7 @@ const InfoDialogContainer = styled.default.div `
 /** @visibleName Info Dialog */
 const InfoDialog = (_a) => {
     var { position = 'middle', type = 'default', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["position", "type", 'data-testid']);
-    return (React__default.default.createElement(InfoDialogContainer, { id: props.id, "data-testid": dataTestId, className: props.className, position: position, type: type }, props.children));
+    return (React__default.default.createElement(InfoDialogContainer, { id: props.id, "data-testid": dataTestId, className: props.className, position: position, type: type, role: "region", "aria-label": props.ariaLabel }, props.children));
 };
 
 exports.default = InfoDialog;

package/build/cjs/components/Input/Input.js

@@ -166,8 +166,7 @@ const Input = (_a) => {
     return (React__default.default.createElement(FieldContainer, { className: props.className },
         props.label && (React__default.default.createElement(LabelText.default, { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label`, status: props.status === 'error' ? props.status : undefined, isMandatory: props.required }, props.label)),
         React__default.default.createElement(FieldWrapper, { status: props.status, "$type": type, "$disabled": props.disabled },
-            React__default.default.createElement(StyledInput, { id: props.id, name: props.name, type: props.readonly ? 'hidden' : type, value: props.value, placeholder: props.placeholder, onChange: handleChange, onBlur: handleOnBlur, onFocus: props.onFocus, onClick: onClick, onKeyDown: props.onKeyDown, onKeyPress: props.onKeyPress, required: props.required, disabled: props.disabled, autoComplete: props.autocomplete, "aria-disabled": props.disabled, "aria-label": !props.label ? (_b = props.ariaLabel) !== null && _b !== void 0 ? _b : props.id : undefined, ref: inputRef, tabIndex: props.tabIndex, "aria-describedby": getDescribedBy(), "data-testid": dataTestId, readOnly: props.readonly }),
-            props.readonly && React__default.default.createElement("div", null, props.value),
+            React__default.default.createElement(StyledInput, { id: props.id, name: props.name, type: type, value: props.value, placeholder: props.placeholder, onChange: handleChange, onBlur: handleOnBlur, onFocus: props.onFocus, onClick: onClick, onKeyDown: props.onKeyDown, onKeyPress: props.onKeyPress, required: props.required, disabled: props.disabled, autoComplete: props.autocomplete, "aria-disabled": props.disabled, "aria-label": !props.label ? (_b = props.ariaLabel) !== null && _b !== void 0 ? _b : props.id : undefined, ref: inputRef, tabIndex: props.tabIndex, "aria-describedby": getDescribedBy(), "data-testid": dataTestId, readOnly: props.readonly }),
             ((props.status && props.status !== 'comment') ||
                 props.showPasswordToggle ||
                 props.disabled ||

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

@@ -18,10 +18,12 @@ interface Props {
      * Styling of `label` element changes depending on the passed status
      *
      * @param {LabelTextStatus} undefined Default styling
-     * @param {LabelTextStatus} info Changes color to `theme.color.notification.info`
-     * @param {LabelTextStatus} success Changes color to `theme.color.notification.success`
-     * @param {LabelTextStatus} warning Changes color to `theme.color.notification.warning`
+     * @param {LabelTextStatus} info Changes color to default color (this type will be deprecated in the future)
+     * @param {LabelTextStatus} success Changes color to default color (this type will be deprecated in the future)
+     * @param {LabelTextStatus} warning Changes color to default color (this type will be deprecated in the future)
      * @param {LabelTextStatus} error Changes color to `theme.color.notification.error`
+     *
+     * @deprecated info, success and warning are deprecated, please switch to default or error status
      */
     status?: LabelTextStatus;
     /**

package/build/cjs/components/LabelText/LabelText.js

@@ -14,7 +14,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 const Label = styled.default.label `
     display: block;
-    color: ${({ status }) => (status ? theme.default.color.notification[status] : theme.default.color.text.gray)};
+    color: ${({ status }) => status === 'error' ? theme.default.color.notification.error : theme.default.color.text.gray};
     font-weight: ${theme.default.fontWeight.medium};
     font-size: ${theme.default.fontSize.default};
     line-height: ${theme.default.lineHeight.default};

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

@@ -16,13 +16,17 @@ interface Props {
     /**
      * Content of the component
      */
-    children?: ReactNode;
+    children: ReactNode;
     /**
      * Allows to show and hide close button
      *
      * @default false
      */
     closeButton?: boolean;
+    /**
+     * Label for the close button
+     */
+    closeButtonLabel?: string;
     /**
      * On close button click callback
      */
@@ -41,8 +45,18 @@ interface Props {
      * Allows to pass testid string for testing purposes
      */
     'data-testid'?: string;
+    /**
+     * If true, the component is treated as static (non-interactive),
+     * and uses `aria-label` instead of `role="alert"`.
+     *
+     * @default false
+     */
+    isStatic?: boolean;
+    /**
+     * Accessible label for the notification. Required when `isStatic` is true
+     * and no type-based default label is desired.
+     */
+    ariaLabel?: string;
 }
-/** @visibleName Notification */
-declare const Notification: ({ type, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element | null;
-/** @component */
+declare const Notification: ({ type, "data-testid": dataTestId, isStatic, className, children, closeButton, closeButtonLabel, onClickCloseButton, dismissed, ariaLabel, }: Props) => React.JSX.Element | null;
 export default Notification;

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

@@ -2,7 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib = require('tslib');
 var icons = require('@dnanpm/icons');
 var React = require('react');
 var styled = require('styled-components');
@@ -21,7 +20,7 @@ const iconsMap = {
     warning: icons.Warning,
     error: icons.Error,
 };
-const NotificationWrapper = styled__default.default.div `
+const sharedStyles = styled.css `
     display: flex;
     gap: 1rem;
     line-height: ${theme.default.lineHeight.default};
@@ -30,6 +29,14 @@ const NotificationWrapper = styled__default.default.div `
     border-radius: ${theme.default.radius.s};
     border: 2px solid ${({ $type }) => theme.default.color.notification[$type]};
 `;
+const NotificationWrapper = styled__default.default.div `
+    ${sharedStyles}
+    border-color: ${({ $type }) => theme.default.color.notification[$type]};
+`;
+const StaticWrapper = styled__default.default.section `
+    ${sharedStyles}
+    border-color: ${({ $type }) => theme.default.color.notification[$type]};
+`;
 const IconWrapper = styled__default.default.div `
     display: flex;
     align-items: center;
@@ -44,16 +51,24 @@ const ContentWrapper = styled__default.default.span `
 const ButtonCloseStyled = styled__default.default(ButtonClose.default) `
     position: static;
     margin: auto 0.5rem;
+
+    &:focus-visible {
+        outline: none;
+        box-shadow: 0px 0px 0px 2px ${theme.default.color.focus.light},
+            0px 0px 0px 4px ${theme.default.color.focus.dark};
+    }
 `;
-/** @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 },
+const Notification = ({ type = 'info', 'data-testid': dataTestId, isStatic = false, className, children, closeButton = false, closeButtonLabel, onClickCloseButton, dismissed = false, ariaLabel, }) => {
+    if (dismissed)
+        return null;
+    const IconToUse = iconsMap[type];
+    const renderContent = () => (React__default.default.createElement(React__default.default.Fragment, null,
         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;
+            React__default.default.createElement(Icon.default, { icon: IconToUse, size: "2rem", color: theme.default.color.default.white, "aria-hidden": true })),
+        React__default.default.createElement(ContentWrapper, null, children),
+        closeButton && (React__default.default.createElement(ButtonCloseStyled, { onClick: onClickCloseButton, "aria-label": closeButtonLabel },
+            React__default.default.createElement(Icon.default, { icon: icons.Close, color: "currentColor", "aria-hidden": true })))));
+    return isStatic ? (React__default.default.createElement(StaticWrapper, { "$type": type, className: className, "data-testid": dataTestId, "aria-label": ariaLabel }, renderContent())) : (React__default.default.createElement(NotificationWrapper, { "$type": type, className: className, "data-testid": dataTestId, role: "alert" }, renderContent()));
 };
 
 exports.default = Notification;

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

@@ -72,6 +72,10 @@ interface Props {
      * Allows to pass a custom className
      */
     className?: string;
+    /**
+     * A styled version that is designed to look like the default Button component
+     */
+    isDefaultButtonStyle?: boolean;
 }
 declare const Pill: ({ type, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
 /** @component */

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

@@ -7,6 +7,7 @@ var React = require('react');
 var styled = require('styled-components');
 var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
+var Button = require('../Button/Button.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -14,34 +15,69 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
 const getCursor = ({ isDisabled, as }) => as !== 'div' && `cursor: ${isDisabled ? 'not-allowed' : 'pointer'};`;
-const getBackgroundColor = ({ isChecked, isDisabled }) => {
+const getStandardPillStyles = ({ isChecked, isDisabled, }) => {
     const alphaValue = isDisabled ? theme.default.color.transparency.T30 : theme.default.color.transparency.T100;
-    const colorValue = isChecked
+    const bgColor = 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 hoverBgColor = isChecked ? '#441632' : '#FFB557'; // Only Pill component specific colors to be used on user interaction styles
+    const textColor = isChecked ? theme.default.color.default.white : theme.default.color.default.black;
+    const disabledTextColor = isDisabled ? theme.default.color.text.gray : textColor;
+    return `
+      font-size: ${theme.default.fontSize.s};
+      font-weight: ${theme.default.fontWeight.medium};
+      padding: 2px ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2.5)};
+      background-color: ${bgColor}${alphaValue};
+      color: ${disabledTextColor};
+      border: 2px solid transparent;
+      ${!isDisabled ? `&:hover { background-color: ${hoverBgColor}; }` : ''}
+    `;
+};
+const getDefaultButtonStyles = ({ isChecked, isDisabled, }) => {
+    const alphaValue = isDisabled ? theme.default.color.transparency.T30 : theme.default.color.transparency.T100;
+    const hoverColor = '#441632'; // Only Pill component specific colors to be used on user interaction styles
+    const disabledBgColor = isDisabled ? theme.default.color.default.plum : Button.shade.plum.lighter;
+    const bgColor = isChecked ? disabledBgColor : 'transparent';
+    const textColor = isChecked ? theme.default.color.default.white : theme.default.color.default.plum;
+    const disabledTextColor = isDisabled ? theme.default.color.text.gray : textColor;
+    const disabledBorderColor = isDisabled ? 'transparent' : Button.shade.plum.lighter;
+    const borderColor = isChecked
+        ? disabledBorderColor
+        : `${theme.default.color.default.plum}${alphaValue}`;
+    return `
+      font-size: ${theme.default.fontSize.default};
+      font-weight: ${theme.default.fontWeight.bold};
+      padding: 6px ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2.5)};
+      background-color: ${bgColor}${alphaValue};
+      color: ${disabledTextColor};
+      border: 2px solid ${borderColor};
+      ${!isDisabled
+        ? `
+        &:hover { 
+            border: 2px solid ${hoverColor};
+            color: ${theme.default.color.default.white}; 
+            background-color: ${hoverColor}; 
+        }`
+        : ''}
+    `;
 };
 const Label = styled__default.default.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: 2px solid transparent;
-    padding: 2px ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2.5)};
     text-align: center;
+    transition: all 0.2s ease-in-out;
+
+    ${({ isChecked, isDisabled, isDefaultButtonStyle }) => isDefaultButtonStyle
+    ? getDefaultButtonStyles({ isChecked, isDisabled })
+    : getStandardPillStyles({ isChecked, isDisabled })}
 
     ${({ 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};
+        outline: none;
+        box-shadow: 0px 0px 0px 2px ${theme.default.color.focus.light},
+            0px 0px 0px 4px ${theme.default.color.focus.dark};
     }
 
     ${({ position }) => (position === 'right' || position === 'middle') &&
@@ -81,7 +117,7 @@ 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__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, isDefaultButtonStyle: props.isDefaultButtonStyle },
         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 }))));
 };

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

@@ -37,6 +37,6 @@ export interface Props {
 /**
  * @visibleName Priority NavigationItem
  */
-declare const PriorityNavigationItem: ({ "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+declare const PriorityNavigationItem: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLLIElement>>;
 /** @component */
 export default PriorityNavigationItem;

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

@@ -21,10 +21,7 @@ const Element = styled.default.li `
     padding: 0.75rem 1.25rem;
     flex-shrink: 0;
 
-    ${({ onClick }) => onClick &&
-    `
-        cursor: pointer;
-    `};
+    ${({ onClick }) => onClick && `cursor: pointer;`}
 
     &:focus-within {
         & > *:not(a, span.dnasg-icon) {
@@ -45,6 +42,7 @@ const Element = styled.default.li `
 
     & > a {
         text-decoration: none;
+
         &:focus-visible {
             border-radius: ${theme.default.radius.s};
             border: 2px solid ${theme.default.color.focus.light};
@@ -56,7 +54,7 @@ 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}`};
+        ${({ isActive }) => isActive && `font-weight: ${theme.default.fontWeight.bold};`}
         border: 2px solid transparent;
 
         &:hover {
@@ -68,9 +66,10 @@ const Element = styled.default.li `
 /**
  * @visibleName Priority NavigationItem
  */
-const PriorityNavigationItem = (_a) => {
+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: props.innerRef, 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';
 
 exports.default = PriorityNavigationItem;