@dnanpm/styleguide 4.0.5 → 4.0.7

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

@@ -36,7 +36,13 @@ interface Props {
      * Allows to pass a custom className
      */
     className?: string;
+    /**
+     * Allows the last breadcrumb item to be a link
+     *
+     * @default false
+     */
+    allowLastItemLink?: boolean;
 }
-declare const Breadcrumb: ({ "data-testid": dataTestId, ariaLabel, className, items, linkComponent: LinkComponent, linkProps, }: Props) => React.JSX.Element | null;
+declare const Breadcrumb: ({ "data-testid": dataTestId, ariaLabel, className, items, linkComponent: LinkComponent, linkProps, allowLastItemLink, }: Props) => React.JSX.Element | null;
 /** @component */
 export default Breadcrumb;

package/build/cjs/components/Breadcrumb/Breadcrumb.js

@@ -60,20 +60,20 @@ const BreadcrumbListItem = styledComponents.styled.li `
         text-overflow: ellipsis;
     }
 `;
-const Breadcrumb = ({ 'data-testid': dataTestId, ariaLabel, className, items, linkComponent: LinkComponent, linkProps = {}, }) => {
+const Breadcrumb = ({ 'data-testid': dataTestId, ariaLabel, className, items, linkComponent: LinkComponent, linkProps = {}, allowLastItemLink = false, }) => {
     if (!items || items.length === 0) {
         return null;
     }
     const renderItem = (item, index) => {
         const isLastItem = index === items.length - 1;
-        if (isLastItem || !item.href) {
+        if ((isLastItem && !allowLastItemLink) || !item.href) {
             return React__default.default.createElement("span", { "aria-current": isLastItem ? 'page' : undefined }, item.label);
         }
         if (LinkComponent) {
-            return (React__default.default.createElement(LinkComponent, Object.assign({ href: item.href, itemProp: "item", itemScope: true, itemType: "https://schema.org/WebPage" }, linkProps),
+            return (React__default.default.createElement(LinkComponent, Object.assign({ href: item.href, itemProp: "item", itemScope: true, itemType: "https://schema.org/WebPage", "aria-current": isLastItem ? 'page' : undefined }, linkProps),
                 React__default.default.createElement("span", { itemProp: "name" }, item.label)));
         }
-        return (React__default.default.createElement("a", { href: item.href, itemProp: "item", itemScope: true, itemType: "https://schema.org/WebPage" },
+        return (React__default.default.createElement("a", { href: item.href, itemProp: "item", itemScope: true, itemType: "https://schema.org/WebPage", "aria-current": isLastItem ? 'page' : undefined },
             React__default.default.createElement("span", { itemProp: "name" }, item.label)));
     };
     return (React__default.default.createElement(BreadcrumbNav, { "aria-label": ariaLabel, className: className, "data-testid": dataTestId },

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

@@ -1,40 +1,12 @@
-import type { ComponentType, MouseEvent, ReactNode } from 'react';
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes, ComponentType, MouseEvent, ReactNode } from 'react';
 import React from 'react';
 type ButtonType = 'submit' | 'button' | 'reset';
-export interface Props {
+export type Props = ButtonProps & AnchorProps & CommonProps;
+export interface CommonProps {
     /**
      * Unique ID for the component
      */
     id?: string;
-    /**
-     *  Name of the button element
-     */
-    name?: string;
-    /**
-     * Allows to change the HTML type of button element. Ignored when `href` is defined
-     *
-     * @param {ButtonType} submit Button submits the form data
-     * @param {ButtonType} button No functionality when pressed
-     * @param {ButtonType} reset Button resets all the controls to their initial values
-     *
-     * @default 'submit'
-     */
-    type?: ButtonType;
-    /**
-     * Allows to change the type of resulting HTML element from button (`<button></button>`) to anchor (`<a href="..."></a>`)
-     */
-    href?: string;
-    /**
-     * Allows to use a custom link component instead of anchor element when `href` is defined
-     */
-    nextLink?: ComponentType<{
-        href: string;
-        children: ReactNode;
-    }>;
-    /**
-     * Allows to set the target attribute for the link
-     */
-    target?: '_self' | '_blank' | '_parent' | '_top';
     /**
      * Content of Button component
      */
@@ -59,13 +31,6 @@ export interface Props {
      * Allows to change width of Button component to size of its wrapper
      */
     fullWidth?: boolean;
-    /**
-     * Allows disabling the component functionality.
-     * When `href` is defined, disables the link functionality.
-     *
-     * @default false
-     */
-    disabled?: boolean;
     /**
      * Displays loading indicator (PixelLoader) instead of children
      *
@@ -96,11 +61,47 @@ export interface Props {
      * Allows to pass a screen reader label for the loading indicator
      */
     loadingLabel?: string;
+}
+type ButtonProps = CommonProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof CommonProps | 'href' | 'nextLink' | 'target'> & {
     /**
-     * Ref for the button element
+     *  Name of the button element
      */
-    ref?: React.Ref<HTMLButtonElement>;
-}
+    name?: string;
+    /**
+     * Allows to change the HTML type of button element. Ignored when `href` is defined
+     *
+     * @param {ButtonType} submit Button submits the form data
+     * @param {ButtonType} button No functionality when pressed
+     * @param {ButtonType} reset Button resets all the controls to their initial values
+     *
+     * @default 'button'
+     */
+    type?: ButtonType;
+    /**
+     * Allows disabling the component functionality.
+     * When `href` is defined, disables the link functionality.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+};
+type AnchorProps = CommonProps & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof CommonProps | 'name' | 'disabled' | 'type'> & {
+    /**
+     * Allows to change the type of resulting HTML element from button (`<button></button>`) to anchor (`<a href="..."></a>`)
+     */
+    href?: string;
+    /**
+     * Allows to use a custom link component instead of anchor element when `href` is defined
+     */
+    nextLink?: ComponentType<{
+        href: string;
+        children: ReactNode;
+    }>;
+    /**
+     * Allows to set the target attribute for the link
+     */
+    target?: '_self' | '_blank' | '_parent' | '_top';
+};
 export declare const shade: {
     pink: {
         darker: string;
@@ -118,6 +119,6 @@ export declare const shade: {
     };
 };
 /** @visibleName Button */
-declare const Button: ({ type, "data-testid": dataTestId, "data-track-value": dataTrackValue, "aria-label": ariaLabel, ...props }: Props) => React.JSX.Element;
+declare const Button: React.ForwardRefExoticComponent<(ButtonProps | AnchorProps) & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
 /** @component */
 export default Button;

package/build/cjs/components/Button/Button.js

@@ -30,7 +30,7 @@ const shade = {
         },
     },
 };
-const Element = styledComponents.styled.button `
+const Element = styledComponents.styled('button') `
     text-align: center;
     transition: all 0.2s ease-in-out;
     display: inline-block;
@@ -119,25 +119,46 @@ const Element = styledComponents.styled.button `
     `}
 `;
 /** @visibleName Button */
-const Button = (_a) => {
-    var _b;
-    var { type = 'submit', 'data-testid': dataTestId, 'data-track-value': dataTrackValue, 'aria-label': ariaLabel } = _a, props = tslib.__rest(_a, ["type", 'data-testid', 'data-track-value', 'aria-label']);
-    const isDisabledAnchor = props.disabled && props.href;
+const Button = React.forwardRef((props, ref) => {
+    const { 'data-testid': dataTestId, 'data-track-value': dataTrackValue, 'aria-label': ariaLabel, onClick, onMouseDown, id, small, darkBg, fullWidth, loading, children, loadingLabel, className } = props, rest = tslib.__rest(props, ['data-testid', 'data-track-value', 'aria-label', "onClick", "onMouseDown", "id", "small", "darkBg", "fullWidth", "loading", "children", "loadingLabel", "className"]);
+    const propHref = props.href;
+    const propNextLink = props.nextLink;
+    const propTarget = props.target;
+    const isDisabledAnchor = props.disabled && propHref;
     const handleClick = (event) => {
         if (isDisabledAnchor) {
             event.preventDefault();
             event.stopPropagation();
             return;
         }
-        if (props.onClick) {
-            props.onClick(event);
+        if (onClick) {
+            onClick(event);
         }
     };
-    return (React__default.default.createElement(Element, Object.assign({ id: props.id, as: (_b = props.nextLink) !== null && _b !== void 0 ? _b : (props.href ? 'a' : undefined), type: props.href ? undefined : type, href: isDisabledAnchor ? undefined : props.href, target: props.href ? props.target : undefined, rel: props.target === '_blank' ? 'noopener noreferrer' : undefined, onClick: handleClick, onMouseDown: props.onMouseDown, "$small": props.small, "$darkBg": props.darkBg, "$fullWidth": props.fullWidth, "$loading": props.loading, tabIndex: props.loading || isDisabledAnchor ? -1 : 0, "data-loading": props.loading, className: props.className, "data-testid": dataTestId, "data-track-value": dataTrackValue, "aria-label": ariaLabel, "aria-disabled": isDisabledAnchor ? 'true' : undefined }, props.dataAttributes, (!props.href && {
-        name: props.name,
-        disabled: props.disabled,
-    })), props.loading ? (React__default.default.createElement(PixelLoader.default, { color: props.darkBg ? theme.default.color.default.white : theme.default.color.default.plum, label: props.loadingLabel })) : (React__default.default.createElement("span", { "data-testid": dataTestId && `${dataTestId}-text` }, props.children))));
-};
+    const content = loading ? (React__default.default.createElement(PixelLoader.default, { color: darkBg ? theme.default.color.default.white : theme.default.color.default.plum, label: loadingLabel })) : (React__default.default.createElement("span", { "data-testid": dataTestId && `${dataTestId}-text` }, children));
+    const commonElementProps = {
+        id: id,
+        onClick: handleClick,
+        onMouseDown: onMouseDown,
+        $small: small,
+        $darkBg: darkBg,
+        $fullWidth: fullWidth,
+        $loading: loading,
+        'data-loading': loading,
+        className: className,
+        'data-testid': dataTestId,
+        'data-track-value': dataTrackValue,
+        'aria-label': ariaLabel,
+    };
+    if (propHref) {
+        return (React__default.default.createElement(Element, Object.assign({ as: propNextLink !== null && propNextLink !== void 0 ? propNextLink : (propHref ? 'a' : undefined), 
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any
+            ref: propNextLink ? ref : ref, href: isDisabledAnchor ? undefined : propHref, target: propTarget, rel: propHref && propTarget === '_blank' ? 'noopener noreferrer' : undefined, tabIndex: loading || isDisabledAnchor ? -1 : 0, "aria-disabled": isDisabledAnchor ? 'true' : undefined }, commonElementProps, rest.dataAttributes), content));
+    }
+    else {
+        return (React__default.default.createElement(Element, Object.assign({ as: "button", ref: ref, type: props.type || 'button', name: props.name, disabled: props.disabled, tabIndex: loading ? -1 : 0 }, commonElementProps, rest.dataAttributes), content));
+    }
+});
 
 exports.default = Button;
 exports.shade = shade;

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

@@ -36,6 +36,6 @@ interface Props extends Omit<ButtonProps, 'fullWidth'> {
     isLinkStyle?: boolean;
 }
 /** @visibleName Button Icon */
-declare const ButtonIcon: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const ButtonIcon: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLButtonElement>>;
 /** @component */
 export default ButtonIcon;

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

@@ -40,6 +40,18 @@ interface Props {
      * @default '6.25rem'
      */
     height?: string;
+    /**
+     * Allows to pass a custom margin
+     *
+     * @default '0'
+     */
+    margin?: string;
+    /**
+     * Allows to pass a custom padding
+     *
+     * @default '0'
+     */
+    padding?: string;
     /**
      * Allows to pass testid string for testing purposes
      */

package/build/cjs/components/Skeleton/Skeleton.js

@@ -44,6 +44,8 @@ const SkeletonWrapper = styledComponents.styled.div `
     opacity: ${({ $opacity }) => ($opacity ? $opacity / 100 : 1)};
     width: ${({ $width }) => $width};
     height: ${({ $height }) => $height};
+    ${({ $margin }) => $margin && `margin: ${$margin}`};
+    ${({ $padding }) => $padding && `padding: ${$padding}`};
     border-radius: ${({ $borderRadius }) => theme.default.radius[$borderRadius || 's']};
 
     &::after {
@@ -67,7 +69,7 @@ const Skeleton = (_a) => {
     var { backgroundColor = 'sand', opacity = 100, width = '25rem', height = '6.25rem', borderRadius = 's', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["backgroundColor", "opacity", "width", "height", "borderRadius", 'data-testid']);
     return (React__default.default.createElement(React__default.default.Fragment, null,
         props.ariaLabel && (React__default.default.createElement("span", { id: props.id, "aria-label": props.ariaLabel, role: "status", "aria-atomic": "true", className: "visually-hidden" })),
-        React__default.default.createElement(SkeletonWrapper, { className: props.className, "data-testid": dataTestId, "aria-hidden": "true", tabIndex: -1, "$backgroundColor": backgroundColor, "$opacity": opacity, "$width": width, "$height": height, "$carouselIndex": props.carouselIndex, "$borderRadius": borderRadius })));
+        React__default.default.createElement(SkeletonWrapper, { className: props.className, "data-testid": dataTestId, "aria-hidden": "true", tabIndex: -1, "$backgroundColor": backgroundColor, "$opacity": opacity, "$width": width, "$height": height, "$margin": props.margin, "$padding": props.padding, "$carouselIndex": props.carouselIndex, "$borderRadius": borderRadius })));
 };
 
 exports.default = Skeleton;

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

@@ -36,7 +36,13 @@ interface Props {
      * Allows to pass a custom className
      */
     className?: string;
+    /**
+     * Allows the last breadcrumb item to be a link
+     *
+     * @default false
+     */
+    allowLastItemLink?: boolean;
 }
-declare const Breadcrumb: ({ "data-testid": dataTestId, ariaLabel, className, items, linkComponent: LinkComponent, linkProps, }: Props) => React.JSX.Element | null;
+declare const Breadcrumb: ({ "data-testid": dataTestId, ariaLabel, className, items, linkComponent: LinkComponent, linkProps, allowLastItemLink, }: Props) => React.JSX.Element | null;
 /** @component */
 export default Breadcrumb;

package/build/es/components/Breadcrumb/Breadcrumb.js

@@ -52,20 +52,20 @@ const BreadcrumbListItem = styled.li `
         text-overflow: ellipsis;
     }
 `;
-const Breadcrumb = ({ 'data-testid': dataTestId, ariaLabel, className, items, linkComponent: LinkComponent, linkProps = {}, }) => {
+const Breadcrumb = ({ 'data-testid': dataTestId, ariaLabel, className, items, linkComponent: LinkComponent, linkProps = {}, allowLastItemLink = false, }) => {
     if (!items || items.length === 0) {
         return null;
     }
     const renderItem = (item, index) => {
         const isLastItem = index === items.length - 1;
-        if (isLastItem || !item.href) {
+        if ((isLastItem && !allowLastItemLink) || !item.href) {
             return React__default.createElement("span", { "aria-current": isLastItem ? 'page' : undefined }, item.label);
         }
         if (LinkComponent) {
-            return (React__default.createElement(LinkComponent, Object.assign({ href: item.href, itemProp: "item", itemScope: true, itemType: "https://schema.org/WebPage" }, linkProps),
+            return (React__default.createElement(LinkComponent, Object.assign({ href: item.href, itemProp: "item", itemScope: true, itemType: "https://schema.org/WebPage", "aria-current": isLastItem ? 'page' : undefined }, linkProps),
                 React__default.createElement("span", { itemProp: "name" }, item.label)));
         }
-        return (React__default.createElement("a", { href: item.href, itemProp: "item", itemScope: true, itemType: "https://schema.org/WebPage" },
+        return (React__default.createElement("a", { href: item.href, itemProp: "item", itemScope: true, itemType: "https://schema.org/WebPage", "aria-current": isLastItem ? 'page' : undefined },
             React__default.createElement("span", { itemProp: "name" }, item.label)));
     };
     return (React__default.createElement(BreadcrumbNav, { "aria-label": ariaLabel, className: className, "data-testid": dataTestId },

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

@@ -1,40 +1,12 @@
-import type { ComponentType, MouseEvent, ReactNode } from 'react';
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes, ComponentType, MouseEvent, ReactNode } from 'react';
 import React from 'react';
 type ButtonType = 'submit' | 'button' | 'reset';
-export interface Props {
+export type Props = ButtonProps & AnchorProps & CommonProps;
+export interface CommonProps {
     /**
      * Unique ID for the component
      */
     id?: string;
-    /**
-     *  Name of the button element
-     */
-    name?: string;
-    /**
-     * Allows to change the HTML type of button element. Ignored when `href` is defined
-     *
-     * @param {ButtonType} submit Button submits the form data
-     * @param {ButtonType} button No functionality when pressed
-     * @param {ButtonType} reset Button resets all the controls to their initial values
-     *
-     * @default 'submit'
-     */
-    type?: ButtonType;
-    /**
-     * Allows to change the type of resulting HTML element from button (`<button></button>`) to anchor (`<a href="..."></a>`)
-     */
-    href?: string;
-    /**
-     * Allows to use a custom link component instead of anchor element when `href` is defined
-     */
-    nextLink?: ComponentType<{
-        href: string;
-        children: ReactNode;
-    }>;
-    /**
-     * Allows to set the target attribute for the link
-     */
-    target?: '_self' | '_blank' | '_parent' | '_top';
     /**
      * Content of Button component
      */
@@ -59,13 +31,6 @@ export interface Props {
      * Allows to change width of Button component to size of its wrapper
      */
     fullWidth?: boolean;
-    /**
-     * Allows disabling the component functionality.
-     * When `href` is defined, disables the link functionality.
-     *
-     * @default false
-     */
-    disabled?: boolean;
     /**
      * Displays loading indicator (PixelLoader) instead of children
      *
@@ -96,11 +61,47 @@ export interface Props {
      * Allows to pass a screen reader label for the loading indicator
      */
     loadingLabel?: string;
+}
+type ButtonProps = CommonProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof CommonProps | 'href' | 'nextLink' | 'target'> & {
     /**
-     * Ref for the button element
+     *  Name of the button element
      */
-    ref?: React.Ref<HTMLButtonElement>;
-}
+    name?: string;
+    /**
+     * Allows to change the HTML type of button element. Ignored when `href` is defined
+     *
+     * @param {ButtonType} submit Button submits the form data
+     * @param {ButtonType} button No functionality when pressed
+     * @param {ButtonType} reset Button resets all the controls to their initial values
+     *
+     * @default 'button'
+     */
+    type?: ButtonType;
+    /**
+     * Allows disabling the component functionality.
+     * When `href` is defined, disables the link functionality.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+};
+type AnchorProps = CommonProps & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof CommonProps | 'name' | 'disabled' | 'type'> & {
+    /**
+     * Allows to change the type of resulting HTML element from button (`<button></button>`) to anchor (`<a href="..."></a>`)
+     */
+    href?: string;
+    /**
+     * Allows to use a custom link component instead of anchor element when `href` is defined
+     */
+    nextLink?: ComponentType<{
+        href: string;
+        children: ReactNode;
+    }>;
+    /**
+     * Allows to set the target attribute for the link
+     */
+    target?: '_self' | '_blank' | '_parent' | '_top';
+};
 export declare const shade: {
     pink: {
         darker: string;
@@ -118,6 +119,6 @@ export declare const shade: {
     };
 };
 /** @visibleName Button */
-declare const Button: ({ type, "data-testid": dataTestId, "data-track-value": dataTrackValue, "aria-label": ariaLabel, ...props }: Props) => React.JSX.Element;
+declare const Button: React.ForwardRefExoticComponent<(ButtonProps | AnchorProps) & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
 /** @component */
 export default Button;

package/build/es/components/Button/Button.js

@@ -1,5 +1,5 @@
 import { __rest } from 'tslib';
-import React__default from 'react';
+import React__default, { forwardRef } from 'react';
 import { styled } from 'styled-components';
 import theme from '../../themes/theme.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
@@ -22,7 +22,7 @@ const shade = {
         },
     },
 };
-const Element = styled.button `
+const Element = styled('button') `
     text-align: center;
     transition: all 0.2s ease-in-out;
     display: inline-block;
@@ -111,24 +111,45 @@ const Element = styled.button `
     `}
 `;
 /** @visibleName Button */
-const Button = (_a) => {
-    var _b;
-    var { type = 'submit', 'data-testid': dataTestId, 'data-track-value': dataTrackValue, 'aria-label': ariaLabel } = _a, props = __rest(_a, ["type", 'data-testid', 'data-track-value', 'aria-label']);
-    const isDisabledAnchor = props.disabled && props.href;
+const Button = forwardRef((props, ref) => {
+    const { 'data-testid': dataTestId, 'data-track-value': dataTrackValue, 'aria-label': ariaLabel, onClick, onMouseDown, id, small, darkBg, fullWidth, loading, children, loadingLabel, className } = props, rest = __rest(props, ['data-testid', 'data-track-value', 'aria-label', "onClick", "onMouseDown", "id", "small", "darkBg", "fullWidth", "loading", "children", "loadingLabel", "className"]);
+    const propHref = props.href;
+    const propNextLink = props.nextLink;
+    const propTarget = props.target;
+    const isDisabledAnchor = props.disabled && propHref;
     const handleClick = (event) => {
         if (isDisabledAnchor) {
             event.preventDefault();
             event.stopPropagation();
             return;
         }
-        if (props.onClick) {
-            props.onClick(event);
+        if (onClick) {
+            onClick(event);
         }
     };
-    return (React__default.createElement(Element, Object.assign({ id: props.id, as: (_b = props.nextLink) !== null && _b !== void 0 ? _b : (props.href ? 'a' : undefined), type: props.href ? undefined : type, href: isDisabledAnchor ? undefined : props.href, target: props.href ? props.target : undefined, rel: props.target === '_blank' ? 'noopener noreferrer' : undefined, onClick: handleClick, onMouseDown: props.onMouseDown, "$small": props.small, "$darkBg": props.darkBg, "$fullWidth": props.fullWidth, "$loading": props.loading, tabIndex: props.loading || isDisabledAnchor ? -1 : 0, "data-loading": props.loading, className: props.className, "data-testid": dataTestId, "data-track-value": dataTrackValue, "aria-label": ariaLabel, "aria-disabled": isDisabledAnchor ? 'true' : undefined }, props.dataAttributes, (!props.href && {
-        name: props.name,
-        disabled: props.disabled,
-    })), props.loading ? (React__default.createElement(PixelLoader, { color: props.darkBg ? theme.color.default.white : theme.color.default.plum, label: props.loadingLabel })) : (React__default.createElement("span", { "data-testid": dataTestId && `${dataTestId}-text` }, props.children))));
-};
+    const content = loading ? (React__default.createElement(PixelLoader, { color: darkBg ? theme.color.default.white : theme.color.default.plum, label: loadingLabel })) : (React__default.createElement("span", { "data-testid": dataTestId && `${dataTestId}-text` }, children));
+    const commonElementProps = {
+        id: id,
+        onClick: handleClick,
+        onMouseDown: onMouseDown,
+        $small: small,
+        $darkBg: darkBg,
+        $fullWidth: fullWidth,
+        $loading: loading,
+        'data-loading': loading,
+        className: className,
+        'data-testid': dataTestId,
+        'data-track-value': dataTrackValue,
+        'aria-label': ariaLabel,
+    };
+    if (propHref) {
+        return (React__default.createElement(Element, Object.assign({ as: propNextLink !== null && propNextLink !== void 0 ? propNextLink : (propHref ? 'a' : undefined), 
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any
+            ref: propNextLink ? ref : ref, href: isDisabledAnchor ? undefined : propHref, target: propTarget, rel: propHref && propTarget === '_blank' ? 'noopener noreferrer' : undefined, tabIndex: loading || isDisabledAnchor ? -1 : 0, "aria-disabled": isDisabledAnchor ? 'true' : undefined }, commonElementProps, rest.dataAttributes), content));
+    }
+    else {
+        return (React__default.createElement(Element, Object.assign({ as: "button", ref: ref, type: props.type || 'button', name: props.name, disabled: props.disabled, tabIndex: loading ? -1 : 0 }, commonElementProps, rest.dataAttributes), content));
+    }
+});
 
 export { Button as default, shade };

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

@@ -36,6 +36,6 @@ interface Props extends Omit<ButtonProps, 'fullWidth'> {
     isLinkStyle?: boolean;
 }
 /** @visibleName Button Icon */
-declare const ButtonIcon: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const ButtonIcon: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLButtonElement>>;
 /** @component */
 export default ButtonIcon;

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

@@ -40,6 +40,18 @@ interface Props {
      * @default '6.25rem'
      */
     height?: string;
+    /**
+     * Allows to pass a custom margin
+     *
+     * @default '0'
+     */
+    margin?: string;
+    /**
+     * Allows to pass a custom padding
+     *
+     * @default '0'
+     */
+    padding?: string;
     /**
      * Allows to pass testid string for testing purposes
      */

package/build/es/components/Skeleton/Skeleton.js

@@ -36,6 +36,8 @@ const SkeletonWrapper = styled.div `
     opacity: ${({ $opacity }) => ($opacity ? $opacity / 100 : 1)};
     width: ${({ $width }) => $width};
     height: ${({ $height }) => $height};
+    ${({ $margin }) => $margin && `margin: ${$margin}`};
+    ${({ $padding }) => $padding && `padding: ${$padding}`};
     border-radius: ${({ $borderRadius }) => theme.radius[$borderRadius || 's']};
 
     &::after {
@@ -59,7 +61,7 @@ const Skeleton = (_a) => {
     var { backgroundColor = 'sand', opacity = 100, width = '25rem', height = '6.25rem', borderRadius = 's', 'data-testid': dataTestId } = _a, props = __rest(_a, ["backgroundColor", "opacity", "width", "height", "borderRadius", 'data-testid']);
     return (React__default.createElement(React__default.Fragment, null,
         props.ariaLabel && (React__default.createElement("span", { id: props.id, "aria-label": props.ariaLabel, role: "status", "aria-atomic": "true", className: "visually-hidden" })),
-        React__default.createElement(SkeletonWrapper, { className: props.className, "data-testid": dataTestId, "aria-hidden": "true", tabIndex: -1, "$backgroundColor": backgroundColor, "$opacity": opacity, "$width": width, "$height": height, "$carouselIndex": props.carouselIndex, "$borderRadius": borderRadius })));
+        React__default.createElement(SkeletonWrapper, { className: props.className, "data-testid": dataTestId, "aria-hidden": "true", tabIndex: -1, "$backgroundColor": backgroundColor, "$opacity": opacity, "$width": width, "$height": height, "$margin": props.margin, "$padding": props.padding, "$carouselIndex": props.carouselIndex, "$borderRadius": borderRadius })));
 };
 
 export { Skeleton as default };

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@dnanpm/styleguide",
     "sideEffects": false,
-    "version": "v4.0.5",
+    "version": "v4.0.7",
     "main": "build/cjs/index.js",
     "module": "build/es/index.js",
     "jsnext:main": "build/es/index.js",
@@ -44,7 +44,7 @@
         "not op_mini all"
     ],
     "devDependencies": {
-        "@babel/core": "^7.26.10",
+        "@babel/core": "^7.28.6",
         "@babel/preset-env": "^7.26.0",
         "@babel/preset-react": "^7.26.3",
         "@babel/preset-typescript": "^7.28.5",
@@ -54,26 +54,26 @@
         "@rollup/plugin-commonjs": "^29.0.0",
         "@rollup/plugin-node-resolve": "^16.0.3",
         "@rollup/plugin-typescript": "^12.3.0",
-        "@stylistic/eslint-plugin": "^5.5.0",
+        "@stylistic/eslint-plugin": "^5.7.0",
         "@testing-library/jest-dom": "^6.6.3",
-        "@testing-library/react": "^16.3.1",
+        "@testing-library/react": "^16.3.2",
         "@testing-library/user-event": "^14.5.2",
         "@types/jest": "^30.0.0",
-        "@types/node": "^25.0.3",
+        "@types/node": "^25.0.9",
         "@types/ramda": "^0.31.1",
         "@types/react": "^18.3.11",
         "@types/react-dom": "^18.3.1",
         "@types/react-modal": "^3.13.1",
         "@types/resize-observer-browser": "^0.1.8",
         "@typescript-eslint/eslint-plugin": "^8.46.4",
-        "@typescript-eslint/parser": "^8.48.1",
+        "@typescript-eslint/parser": "^8.52.0",
         "babel-loader": "^9.2.1",
         "cross-env": "^10.0.0",
         "css-loader": "^6.11.0",
         "eslint": "^9.39.1",
         "eslint-config-prettier": "^10.1.8",
         "eslint-plugin-import": "^2.32.0",
-        "eslint-plugin-jsdoc": "^61.4.2",
+        "eslint-plugin-jsdoc": "^62.0.1",
         "eslint-plugin-jsx-a11y": "^6.10.2",
         "eslint-plugin-react": "^7.37.5",
         "eslint-plugin-react-hooks": "^7.0.1",
@@ -81,7 +81,7 @@
         "jest": "^30.0.5",
         "jest-environment-jsdom": "^29.7.0",
         "jest-styled-components": "^7.2.0",
-        "mini-css-extract-plugin": "^2.9.2",
+        "mini-css-extract-plugin": "^2.10.0",
         "prettier": "^3.6.2",
         "react": "^18.3.1",
         "react-docgen": "^5.4.3",
@@ -101,7 +101,7 @@
     "dependencies": {
         "date-fns-tz": "^3.2.0",
         "ramda": "^0.32.0",
-        "react-datepicker": "9.0.0",
+        "react-datepicker": "9.1.0",
         "react-modal": "^3.16.1",
         "react-select": "^5.8.1",
         "react-spring": "^8.0.27",