@dnanpm/styleguide 3.9.9 → 3.9.10

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;

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

@@ -46,10 +46,14 @@ interface Props {
     closeWithEsc?: boolean;
     /**
      * Allows to open Tooltip by clicking the trigger element instead of hovering it
+     *
+     * @default false
      */
     isClickable?: boolean;
     /**
      * Allows to keep Tooltip open when hovered. Useful when it contains interactive elements
+     *
+     * @default false
      */
     isHoverable?: boolean;
     /**
@@ -66,6 +70,6 @@ interface Props {
      */
     'data-testid'?: string;
 }
-declare const Tooltip: ({ "data-testid": dataTestId, closeWithEsc, ...props }: Props) => React.JSX.Element;
+declare const Tooltip: ({ "data-testid": dataTestId, closeWithEsc, isClickable, isHoverable, ...props }: Props) => React.JSX.Element;
 /** @component */
 export default Tooltip;

package/build/cjs/components/Tooltip/Tooltip.js

@@ -16,9 +16,28 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const Helper = styled.default.div `
-    display: inline;
+const Helper = styled.default.button `
+    display: inline-block;
     vertical-align: middle;
+    background: transparent;
+    border: none;
+    padding: 0;
+    margin: 0;
+    color: inherit;
+    font: inherit;
+    text-align: inherit;
+    text-decoration: none;
+    outline: inherit;
+    pointer-events: auto;
+    height: 1rem;
+
+    &:focus-visible {
+        outline: none;
+        box-shadow: 0px 0px 0px 2px ${theme.default.color.focus.light},
+            0px 0px 0px 4px ${theme.default.color.focus.dark};
+        border-radius: 100%;
+    }
+
     ${({ isClickable }) => isClickable && `cursor: pointer`};
 `;
 const getArrowOverrides = () => {
@@ -65,11 +84,32 @@ const StyledReactTooltip = styled.default(reactTooltip.Tooltip) `
     ${getArrowOverrides()}
 `;
 const Tooltip = (_a) => {
-    var { 'data-testid': dataTestId, closeWithEsc = true } = _a, props = tslib.__rest(_a, ['data-testid', "closeWithEsc"]);
+    var { 'data-testid': dataTestId, closeWithEsc = true, isClickable = false, isHoverable = false } = _a, props = tslib.__rest(_a, ['data-testid', "closeWithEsc", "isClickable", "isHoverable"]);
+    const handleReactTooltipOpenEvents = {
+        mouseover: !isClickable,
+        focus: !isClickable,
+        mouseenter: !isClickable,
+        mousedown: !isClickable && !isHoverable,
+        click: isClickable,
+        dblclick: isClickable,
+    };
+    const handleReactTooltipCloseEvents = {
+        mouseout: !isClickable && !isHoverable,
+        blur: !isClickable && !isHoverable,
+        mouseleave: !isClickable,
+        mouseup: !isClickable,
+        click: isClickable,
+        dblclick: isClickable,
+    };
+    const handleReactTooltipGlobalCloseEvents = {
+        escape: closeWithEsc,
+        clickOutsideAnchor: true,
+        scroll: true,
+    };
     return (React__default.default.createElement(React__default.default.Fragment, null,
-        !props.hideTriggerElement && (React__default.default.createElement(Helper, { "data-tooltip-id": props.id, isClickable: props.isClickable, className: props.className, "data-testid": dataTestId },
-            React__default.default.createElement(Icon.default, { icon: icons.Info, size: "1rem", position: props.position }))),
-        React__default.default.createElement(StyledReactTooltip, { id: props.id, place: props.placement, closeOnEsc: closeWithEsc, openOnClick: props.isClickable, clickable: props.isHoverable, isMultiline: props.isMultiline, disableStyleInjection: true, "data-testid": dataTestId && `${dataTestId}-content` }, props.children)));
+        !props.hideTriggerElement && (React__default.default.createElement(Helper, { "data-tooltip-id": props.id, isClickable: isClickable, className: props.className, "data-testid": dataTestId, type: "button", "data-tooltip-delay-hide": 500, "aria-describedby": props.id },
+            React__default.default.createElement(Icon.default, { icon: icons.Info, size: "1rem", position: props.position, "aria-hidden": true }))),
+        React__default.default.createElement(StyledReactTooltip, { id: props.id, place: props.placement, openOnClick: isClickable, clickable: isHoverable, isMultiline: props.isMultiline, disableStyleInjection: true, role: isHoverable ? 'dialog' : 'tooltip', openEvents: handleReactTooltipOpenEvents, globalCloseEvents: handleReactTooltipGlobalCloseEvents, closeEvents: handleReactTooltipCloseEvents, "data-testid": dataTestId && `${dataTestId}-content` }, props.children)));
 };
 
 exports.default = Tooltip;

package/build/es/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/es/components/Notification/Notification.js

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

package/build/es/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/es/components/Pill/Pill.js

@@ -3,36 +3,72 @@ import React__default from 'react';
 import styled__default from 'styled-components';
 import theme from '../../themes/theme.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
+import { shade } from '../Button/Button.js';
 
 const getCursor = ({ isDisabled, as }) => as !== 'div' && `cursor: ${isDisabled ? 'not-allowed' : 'pointer'};`;
-const getBackgroundColor = ({ isChecked, isDisabled }) => {
+const getStandardPillStyles = ({ isChecked, isDisabled, }) => {
     const alphaValue = isDisabled ? theme.color.transparency.T30 : theme.color.transparency.T100;
-    const colorValue = isChecked
+    const bgColor = isChecked
         ? theme.color.background.plum.default
         : theme.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.color.default.white : theme.color.default.black;
+    const disabledTextColor = isDisabled ? theme.color.text.gray : textColor;
+    return `
+      font-size: ${theme.fontSize.s};
+      font-weight: ${theme.fontWeight.medium};
+      padding: 2px ${getMultipliedSize(theme.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.color.transparency.T30 : theme.color.transparency.T100;
+    const hoverColor = '#441632'; // Only Pill component specific colors to be used on user interaction styles
+    const disabledBgColor = isDisabled ? theme.color.default.plum : shade.plum.lighter;
+    const bgColor = isChecked ? disabledBgColor : 'transparent';
+    const textColor = isChecked ? theme.color.default.white : theme.color.default.plum;
+    const disabledTextColor = isDisabled ? theme.color.text.gray : textColor;
+    const disabledBorderColor = isDisabled ? 'transparent' : shade.plum.lighter;
+    const borderColor = isChecked
+        ? disabledBorderColor
+        : `${theme.color.default.plum}${alphaValue}`;
+    return `
+      font-size: ${theme.fontSize.default};
+      font-weight: ${theme.fontWeight.bold};
+      padding: 6px ${getMultipliedSize(theme.base.baseHeight, 2.5)};
+      background-color: ${bgColor}${alphaValue};
+      color: ${disabledTextColor};
+      border: 2px solid ${borderColor};
+      ${!isDisabled
+        ? `
+        &:hover { 
+            border: 2px solid ${hoverColor};
+            color: ${theme.color.default.white}; 
+            background-color: ${hoverColor}; 
+        }`
+        : ''}
+    `;
 };
 const Label = styled__default.label `
     display: inline-block;
     border-radius: ${theme.radius.pill};
-    font-size: ${theme.fontSize.s};
     line-height: ${theme.lineHeight.default};
-    font-weight: ${theme.fontWeight.medium};
-    color: ${({ isChecked }) => isChecked ? theme.color.default.white : theme.color.default.black};
-    border: 2px solid transparent;
-    padding: 2px ${getMultipliedSize(theme.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.color.focus.dark};
-        border: 2px solid ${theme.color.focus.light};
+        outline: none;
+        box-shadow: 0px 0px 0px 2px ${theme.color.focus.light},
+            0px 0px 0px 4px ${theme.color.focus.dark};
     }
 
     ${({ position }) => (position === 'right' || position === 'middle') &&
@@ -72,7 +108,7 @@ const Input = styled__default.input `
 `;
 const Pill = (_a) => {
     var { type = 'none', 'data-testid': dataTestId } = _a, props = __rest(_a, ["type", 'data-testid']);
-    return (React__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.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.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/es/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/es/components/PriorityNavigationItem/PriorityNavigationItem.js

@@ -13,10 +13,7 @@ const Element = styled.li `
     padding: 0.75rem 1.25rem;
     flex-shrink: 0;
 
-    ${({ onClick }) => onClick &&
-    `
-        cursor: pointer;
-    `};
+    ${({ onClick }) => onClick && `cursor: pointer;`}
 
     &:focus-within {
         & > *:not(a, span.dnasg-icon) {
@@ -37,6 +34,7 @@ const Element = styled.li `
 
     & > a {
         text-decoration: none;
+
         &:focus-visible {
             border-radius: ${theme.radius.s};
             border: 2px solid ${theme.color.focus.light};
@@ -48,7 +46,7 @@ const Element = styled.li `
     & > * {
         display: block;
         color: ${({ isActive }) => (isActive ? theme.color.text.pink : theme.color.text.black)};
-        ${({ isActive }) => isActive && `font-weight: ${theme.fontWeight.bold}`};
+        ${({ isActive }) => isActive && `font-weight: ${theme.fontWeight.bold};`}
         border: 2px solid transparent;
 
         &:hover {
@@ -60,9 +58,10 @@ const Element = styled.li `
 /**
  * @visibleName Priority NavigationItem
  */
-const PriorityNavigationItem = (_a) => {
+const PriorityNavigationItem = React__default.forwardRef((_a, ref) => {
     var { 'data-testid': dataTestId } = _a, props = __rest(_a, ['data-testid']);
-    return (React__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.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';
 
 export { PriorityNavigationItem as default };

package/build/es/components/Tooltip/Tooltip.d.ts

@@ -46,10 +46,14 @@ interface Props {
     closeWithEsc?: boolean;
     /**
      * Allows to open Tooltip by clicking the trigger element instead of hovering it
+     *
+     * @default false
      */
     isClickable?: boolean;
     /**
      * Allows to keep Tooltip open when hovered. Useful when it contains interactive elements
+     *
+     * @default false
      */
     isHoverable?: boolean;
     /**
@@ -66,6 +70,6 @@ interface Props {
      */
     'data-testid'?: string;
 }
-declare const Tooltip: ({ "data-testid": dataTestId, closeWithEsc, ...props }: Props) => React.JSX.Element;
+declare const Tooltip: ({ "data-testid": dataTestId, closeWithEsc, isClickable, isHoverable, ...props }: Props) => React.JSX.Element;
 /** @component */
 export default Tooltip;

package/build/es/components/Tooltip/Tooltip.js

@@ -8,9 +8,28 @@ import getElevationShadow from '../../utils/common.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
 import Icon from '../Icon/Icon.js';
 
-const Helper = styled.div `
-    display: inline;
+const Helper = styled.button `
+    display: inline-block;
     vertical-align: middle;
+    background: transparent;
+    border: none;
+    padding: 0;
+    margin: 0;
+    color: inherit;
+    font: inherit;
+    text-align: inherit;
+    text-decoration: none;
+    outline: inherit;
+    pointer-events: auto;
+    height: 1rem;
+
+    &:focus-visible {
+        outline: none;
+        box-shadow: 0px 0px 0px 2px ${theme.color.focus.light},
+            0px 0px 0px 4px ${theme.color.focus.dark};
+        border-radius: 100%;
+    }
+
     ${({ isClickable }) => isClickable && `cursor: pointer`};
 `;
 const getArrowOverrides = () => {
@@ -57,11 +76,32 @@ const StyledReactTooltip = styled(Tooltip$1) `
     ${getArrowOverrides()}
 `;
 const Tooltip = (_a) => {
-    var { 'data-testid': dataTestId, closeWithEsc = true } = _a, props = __rest(_a, ['data-testid', "closeWithEsc"]);
+    var { 'data-testid': dataTestId, closeWithEsc = true, isClickable = false, isHoverable = false } = _a, props = __rest(_a, ['data-testid', "closeWithEsc", "isClickable", "isHoverable"]);
+    const handleReactTooltipOpenEvents = {
+        mouseover: !isClickable,
+        focus: !isClickable,
+        mouseenter: !isClickable,
+        mousedown: !isClickable && !isHoverable,
+        click: isClickable,
+        dblclick: isClickable,
+    };
+    const handleReactTooltipCloseEvents = {
+        mouseout: !isClickable && !isHoverable,
+        blur: !isClickable && !isHoverable,
+        mouseleave: !isClickable,
+        mouseup: !isClickable,
+        click: isClickable,
+        dblclick: isClickable,
+    };
+    const handleReactTooltipGlobalCloseEvents = {
+        escape: closeWithEsc,
+        clickOutsideAnchor: true,
+        scroll: true,
+    };
     return (React__default.createElement(React__default.Fragment, null,
-        !props.hideTriggerElement && (React__default.createElement(Helper, { "data-tooltip-id": props.id, isClickable: props.isClickable, className: props.className, "data-testid": dataTestId },
-            React__default.createElement(Icon, { icon: Info, size: "1rem", position: props.position }))),
-        React__default.createElement(StyledReactTooltip, { id: props.id, place: props.placement, closeOnEsc: closeWithEsc, openOnClick: props.isClickable, clickable: props.isHoverable, isMultiline: props.isMultiline, disableStyleInjection: true, "data-testid": dataTestId && `${dataTestId}-content` }, props.children)));
+        !props.hideTriggerElement && (React__default.createElement(Helper, { "data-tooltip-id": props.id, isClickable: isClickable, className: props.className, "data-testid": dataTestId, type: "button", "data-tooltip-delay-hide": 500, "aria-describedby": props.id },
+            React__default.createElement(Icon, { icon: Info, size: "1rem", position: props.position, "aria-hidden": true }))),
+        React__default.createElement(StyledReactTooltip, { id: props.id, place: props.placement, openOnClick: isClickable, clickable: isHoverable, isMultiline: props.isMultiline, disableStyleInjection: true, role: isHoverable ? 'dialog' : 'tooltip', openEvents: handleReactTooltipOpenEvents, globalCloseEvents: handleReactTooltipGlobalCloseEvents, closeEvents: handleReactTooltipCloseEvents, "data-testid": dataTestId && `${dataTestId}-content` }, props.children)));
 };
 
 export { Tooltip as default };

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@dnanpm/styleguide",
     "sideEffects": false,
-    "version": "v3.9.9",
+    "version": "v3.9.10",
     "main": "build/cjs/index.js",
     "module": "build/es/index.js",
     "jsnext:main": "build/es/index.js",
@@ -44,13 +44,13 @@
         "@babel/core": "^7.26.10",
         "@babel/preset-env": "^7.26.0",
         "@babel/preset-react": "^7.26.3",
-        "@babel/preset-typescript": "^7.27.0",
+        "@babel/preset-typescript": "^7.27.1",
         "@dnanpm/icons": "2.0.7",
         "@rollup/plugin-commonjs": "^28.0.3",
         "@rollup/plugin-node-resolve": "^15.3.0",
         "@rollup/plugin-typescript": "^12.1.2",
         "@testing-library/jest-dom": "^6.6.3",
-        "@testing-library/react": "^14.3.1",
+        "@testing-library/react": "^16.3.0",
         "@testing-library/user-event": "^14.5.2",
         "@types/jest": "^29.5.14",
         "@types/node": "^14.18.63",
@@ -79,7 +79,7 @@
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
         "jest-styled-components": "^7.2.0",
-        "mini-css-extract-plugin": "^2.9.1",
+        "mini-css-extract-plugin": "^2.9.2",
         "prettier": "^2.8.8",
         "react": "^18.3.1",
         "react-docgen": "^5.4.3",
@@ -90,7 +90,7 @@
         "rollup-plugin-import-css": "^3.5.8",
         "style-loader": "^3.3.3",
         "styled-components": "^5.3.11",
-        "ts-jest": "^29.2.6",
+        "ts-jest": "^29.3.2",
         "ts-node": "^10.9.2",
         "tslib": "^2.8.1",
         "typescript": "^5.1.6",
@@ -102,7 +102,7 @@
         "react-modal": "^3.16.1",
         "react-select": "^5.8.1",
         "react-spring": "^8.0.27",
-        "react-tooltip": "^5.28.0"
+        "react-tooltip": "^5.28.1"
     },
     "peerDependencies": {
         "@dnanpm/icons": "^2.x",