@dnanpm/styleguide 4.0.8 → 4.0.10

package/build/cjs/components/ButtonCard/ButtonCard.js

@@ -14,127 +14,112 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const ButtonCardWrapper = styledComponents.styled.button `
-    display: block;
-    padding: 0;
-    border: 0;
-    width: 100%;
-    background-color: transparent;
-    cursor: pointer;
-    font-family: ${theme.default.fontFamily.default};
-    font-size: ${theme.default.fontSize.default};
-    line-height: ${theme.default.lineHeight.default};
-    color: ${theme.default.color.text.black};
-    text-decoration: none;
-
-    &:focus-visible {
-        border: 1px solid ${theme.default.color.focus.light};
-        box-shadow: 0px 0px 0px 2px ${theme.default.color.focus.dark};
-        border-radius: ${theme.default.radius.default};
-        outline: none;
-
-        & > div {
-            border: 0;
-        }
-    }
-
-    &:hover {
-        color: ${theme.default.color.text.black};
-    }
-`;
-const StyledBox = styledComponents.styled(Box.default) `
-    display: flex;
-    text-align: left;
-    gap: ${({ size }) => (size === 'small' ? '0.313rem' : '1rem')};
-    border: 1px solid ${theme.default.color.line.L03};
-    padding: ${({ size }) => (size === 'small' ? '0.625rem' : '1rem')};
-    ${({ size }) => size === 'small' && 'flex-direction: column'};
-    ${({ size }) => size !== 'small' && 'align-items: center'};
-`;
-const VisualContent = styledComponents.styled.div `
-    display: flex;
-    align-items: center;
-    width: ${({ size }) => (size === 'small' ? '2.5rem' : '3.75rem')};
-    height: ${({ size }) => (size === 'small' ? '2.5rem' : '3.75rem')};
-`;
-const TextContentWrapper = styledComponents.styled.div `
-    display: flex;
-    flex-grow: 1;
-    align-items: center;
-    justify-content: space-between;
-    gap: ${({ size }) => (size === 'small' ? '0.625rem' : '1rem')};
-    min-width: 0;
-`;
-const TextContent = styledComponents.styled.div `
-    flex: 1 1 auto;
-`;
-const Title = styledComponents.styled.div `
-    font-size: ${theme.default.fontSize.default};
-    line-height: ${theme.default.lineHeight.default};
-    font-weight: ${theme.default.fontWeight.bold};
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-    overflow: hidden;
-    word-break: break-word;
-    max-width: 100%;
-
-    ${({ size }) => size === 'small' &&
-    `
+const ButtonCardWrapper = styledComponents.styled.button.withConfig({
+  displayName: "ButtonCard__ButtonCardWrapper",
+  componentId: "sc-oqmhtr-0"
+})(["display:block;padding:0;border:0;width:100%;background-color:transparent;cursor:pointer;font-family:", ";font-size:", ";line-height:", ";color:", ";text-decoration:none;&:focus-visible{border:1px solid ", ";box-shadow:0px 0px 0px 2px ", ";border-radius:", ";outline:none;& > div{border:0;}}&:hover{color:", ";}"], theme.default.fontFamily.default, theme.default.fontSize.default, theme.default.lineHeight.default, theme.default.color.text.black, theme.default.color.focus.light, theme.default.color.focus.dark, theme.default.radius.default, theme.default.color.text.black);
+const StyledBox = styledComponents.styled(Box.default).withConfig({
+  displayName: "ButtonCard__StyledBox",
+  componentId: "sc-oqmhtr-1"
+})(["display:flex;text-align:left;gap:", ";border:1px solid ", ";padding:", ";", ";", ";"], ({
+  size
+}) => size === 'small' ? '0.313rem' : '1rem', theme.default.color.line.L03, ({
+  size
+}) => size === 'small' ? '0.625rem' : '1rem', ({
+  size
+}) => size === 'small' && 'flex-direction: column', ({
+  size
+}) => size !== 'small' && 'align-items: center');
+const VisualContent = styledComponents.styled.div.withConfig({
+  displayName: "ButtonCard__VisualContent",
+  componentId: "sc-oqmhtr-2"
+})(["display:flex;align-items:center;width:", ";height:", ";"], ({
+  size
+}) => size === 'small' ? '2.5rem' : '3.75rem', ({
+  size
+}) => size === 'small' ? '2.5rem' : '3.75rem');
+const TextContentWrapper = styledComponents.styled.div.withConfig({
+  displayName: "ButtonCard__TextContentWrapper",
+  componentId: "sc-oqmhtr-3"
+})(["display:flex;flex-grow:1;align-items:center;justify-content:space-between;gap:", ";min-width:0;"], ({
+  size
+}) => size === 'small' ? '0.625rem' : '1rem');
+const TextContent = styledComponents.styled.div.withConfig({
+  displayName: "ButtonCard__TextContent",
+  componentId: "sc-oqmhtr-4"
+})(["flex:1 1 auto;"]);
+const Title = styledComponents.styled.div.withConfig({
+  displayName: "ButtonCard__Title",
+  componentId: "sc-oqmhtr-5"
+})(["font-size:", ";line-height:", ";font-weight:", ";display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;word-break:break-word;max-width:100%;", " ", ";"], theme.default.fontSize.default, theme.default.lineHeight.default, theme.default.fontWeight.bold, ({
+  size
+}) => size === 'small' && `
         font-size: ${theme.default.fontSize.s};
         line-height: ${theme.default.lineHeight.s};
         font-weight: ${theme.default.fontWeight.medium};
         -webkit-line-clamp: 1;
-    `}
-
-    ${({ size }) => size === 'large' &&
-    `
+    `, ({
+  size
+}) => size === 'large' && `
         font-size: ${theme.default.fontSize.xl};
-    `};
-`;
-const Subtitle = styledComponents.styled.div `
-    color: ${theme.default.color.text.gray};
-    font-size: ${theme.default.fontSize.s};
-    line-height: ${theme.default.lineHeight.s};
-    font-weight: ${theme.default.fontWeight.medium};
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-    overflow: hidden;
-    word-break: break-word;
-    max-width: 100%;
-
-    ${({ size }) => size === 'small' &&
-    `
+    `);
+const Subtitle = styledComponents.styled.div.withConfig({
+  displayName: "ButtonCard__Subtitle",
+  componentId: "sc-oqmhtr-6"
+})(["color:", ";font-size:", ";line-height:", ";font-weight:", ";display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;word-break:break-word;max-width:100%;", " ", ";"], theme.default.color.text.gray, theme.default.fontSize.s, theme.default.lineHeight.s, theme.default.fontWeight.medium, ({
+  size
+}) => size === 'small' && `
         font-size: ${theme.default.fontSize.xs};
         line-height: ${theme.default.lineHeight.xxs};
-    `}
-
-    ${({ size }) => size === 'large' &&
-    `
+    `, ({
+  size
+}) => size === 'large' && `
         font-size: ${theme.default.fontSize.default};
-    `};
-`;
-const CtaIcon = styledComponents.styled(Icon.default) `
-    color: ${theme.default.color.text.pink};
-
-    ${ButtonCardWrapper}:hover & {
-        color: ${theme.default.color.hover.pink};
-    }
-`;
+    `);
+const CtaIcon = styledComponents.styled(Icon.default).withConfig({
+  displayName: "ButtonCard__CtaIcon",
+  componentId: "sc-oqmhtr-7"
+})(["color:", ";", ":hover &{color:", ";}"], theme.default.color.text.pink, ButtonCardWrapper, theme.default.color.hover.pink);
 /** @visibleName Button Card */
-const ButtonCard = (_a) => {
-    var { type = 'submit', size = 'medium', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["type", "size", 'data-testid']);
-    return (React__default.default.createElement(ButtonCardWrapper, Object.assign({ id: props.id, as: props.href ? 'a' : undefined, type: props.href ? undefined : type, href: props.href, onClick: props.onClick, className: props.className, "data-testid": dataTestId }, props.dataAttributes, (!props.href && {
-        name: props.name,
-    })),
-        React__default.default.createElement(StyledBox, { elevation: "low", size: size },
-            React__default.default.createElement(VisualContent, { size: size, "data-testid": dataTestId && `${dataTestId}-content` }, props.children),
-            React__default.default.createElement(TextContentWrapper, { size: size },
-                React__default.default.createElement(TextContent, null,
-                    React__default.default.createElement(Title, { size: size, "data-testid": dataTestId && `${dataTestId}-title` }, props.title),
-                    props.subtitle && (React__default.default.createElement(Subtitle, { size: size, "data-testid": dataTestId && `${dataTestId}-subtitle` }, props.subtitle))),
-                React__default.default.createElement(CtaIcon, { icon: props.isExternal && props.href ? icons.Open : icons.ChevronRight, size: size === 'small' ? '1rem' : '1.5rem', "data-testid": dataTestId && `${dataTestId}-cta`, "aria-label": props.ariaLabelIcon, "aria-hidden": !props.ariaLabelIcon && true })))));
+const ButtonCard = _a => {
+  var {
+      type = 'button',
+      size = 'medium',
+      'data-testid': dataTestId
+    } = _a,
+    props = tslib.__rest(_a, ["type", "size", 'data-testid']);
+  return /*#__PURE__*/React__default.default.createElement(ButtonCardWrapper, Object.assign({
+    id: props.id,
+    as: props.href ? 'a' : undefined,
+    type: props.href ? undefined : type,
+    onClick: props.onClick,
+    className: props.className,
+    "data-testid": dataTestId
+  }, props.dataAttributes, props.href ? {
+    href: props.href
+  } : {}, !props.href && {
+    name: props.name
+  }), /*#__PURE__*/React__default.default.createElement(StyledBox, {
+    elevation: "low",
+    size: size
+  }, /*#__PURE__*/React__default.default.createElement(VisualContent, {
+    size: size,
+    "data-testid": dataTestId && `${dataTestId}-content`
+  }, props.children), /*#__PURE__*/React__default.default.createElement(TextContentWrapper, {
+    size: size
+  }, /*#__PURE__*/React__default.default.createElement(TextContent, null, /*#__PURE__*/React__default.default.createElement(Title, {
+    size: size,
+    "data-testid": dataTestId && `${dataTestId}-title`
+  }, props.title), props.subtitle && (/*#__PURE__*/React__default.default.createElement(Subtitle, {
+    size: size,
+    "data-testid": dataTestId && `${dataTestId}-subtitle`
+  }, props.subtitle))), /*#__PURE__*/React__default.default.createElement(CtaIcon, {
+    icon: props.isExternal && props.href ? icons.Open : icons.ChevronRight,
+    size: size === 'small' ? '1rem' : '1.5rem',
+    "data-testid": dataTestId && `${dataTestId}-cta`,
+    "aria-label": props.ariaLabelIcon,
+    "aria-hidden": !props.ariaLabelIcon && true
+  }))));
 };
 
 exports.default = ButtonCard;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { Props as ButtonProps } from '../Button/Button';
-interface Props extends Pick<ButtonProps, 'id' | 'name' | 'children' | 'onClick' | 'onMouseDown' | 'className' | 'data-testid'> {
+interface Props extends Pick<ButtonProps, 'id' | 'name' | 'children' | 'onClick' | 'onMouseDown' | 'className' | 'data-testid' | 'type' | 'darkBg'> {
     /**
      * Allows to pass aria label for screen readers
      */

package/build/cjs/components/ButtonClose/ButtonClose.js

@@ -12,21 +12,32 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const ButtonElement = styledComponents.styled.button `
-    position: absolute;
-    top: 0;
-    right: 0;
-    margin: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1)};
-    display: inline-flex;
-    cursor: pointer;
-    background: none;
-    border: none;
-    padding: 0;
-`;
+const ButtonElement = styledComponents.styled.button.withConfig({
+  displayName: "ButtonClose__ButtonElement",
+  componentId: "sc-1wb6vgp-0"
+})(["position:absolute;top:0;right:0;margin:", ";display:inline-flex;cursor:pointer;background:none;border:none;padding:0;", ""], styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1), ({
+  $darkBg
+}) => $darkBg && `
+            color: ${theme.default.color.text.white};
+        `);
 /** @visibleName Button Close */
-const ButtonClose = (_a) => {
-    var { 'data-testid': dataTestId, 'aria-label': ariaLabel } = _a, props = tslib.__rest(_a, ['data-testid', 'aria-label']);
-    return (React__default.default.createElement(ButtonElement, { id: props.id, name: props.name, onClick: props.onClick, onMouseDown: props.onMouseDown, className: props.className, "data-testid": dataTestId, "aria-label": ariaLabel }, props.children));
+const ButtonClose = _a => {
+  var {
+      'data-testid': dataTestId,
+      'aria-label': ariaLabel
+    } = _a,
+    props = tslib.__rest(_a, ['data-testid', 'aria-label']);
+  return /*#__PURE__*/React__default.default.createElement(ButtonElement, {
+    id: props.id,
+    name: props.name,
+    onClick: props.onClick,
+    onMouseDown: props.onMouseDown,
+    type: props.type || 'button',
+    className: props.className,
+    "data-testid": dataTestId,
+    "aria-label": ariaLabel,
+    "$darkBg": props.darkBg || false
+  }, props.children);
 };
 
 exports.default = ButtonClose;

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

@@ -1,7 +1,8 @@
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes, ComponentType, ReactNode } from 'react';
 import React from 'react';
-import type { Props as ButtonProps } from '../Button/Button';
+import type { ButtonType, CommonProps } from '../Button/Button';
 import type { Props as IconProps } from '../Icon/Icon';
-interface Props extends Omit<ButtonProps, 'fullWidth'> {
+interface Props extends Omit<CommonProps, 'fullWidth'> {
     /**
      * Icon shown in icon button component
      *
@@ -35,7 +36,47 @@ interface Props extends Omit<ButtonProps, 'fullWidth'> {
      */
     isLinkStyle?: boolean;
 }
+export type ButtonProps = Props & Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof Props | 'href' | 'nextLink' | 'target'> & {
+    /**
+     *  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 'button'
+     */
+    type?: ButtonType;
+    /**
+     * Allows disabling the component functionality.
+     * When `href` is defined, disables the link functionality.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+};
+export type AnchorProps = Props & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof Props | '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';
+};
 /** @visibleName Button Icon */
-declare const ButtonIcon: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLButtonElement>>;
+declare const ButtonIcon: React.ForwardRefExoticComponent<(ButtonProps | AnchorProps) & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
 /** @component */
 export default ButtonIcon;

package/build/cjs/components/ButtonIcon/ButtonIcon.js

@@ -15,10 +15,12 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const getStandardStyle = ({ isLinkStyle }) => {
-    const colorValue = isLinkStyle ? theme.default.color.default.pink : theme.default.color.text.black;
-    const colorHoverValue = isLinkStyle ? theme.default.color.hover.pink : theme.default.color.text.black;
-    return `
+const getStandardStyle = ({
+  isLinkStyle
+}) => {
+  const colorValue = isLinkStyle ? theme.default.color.default.pink : theme.default.color.text.black;
+  const colorHoverValue = isLinkStyle ? theme.default.color.hover.pink : theme.default.color.text.black;
+  return `
         color: ${colorValue};
         &:focus-visible {
             border: 2px solid ${theme.default.color.focus.light};
@@ -37,8 +39,8 @@ const getStandardStyle = ({ isLinkStyle }) => {
     `;
 };
 const getDarkBgStyle = () => {
-    const colorValue = theme.default.color.text.white;
-    return `
+  const colorValue = theme.default.color.text.white;
+  return `
         color: ${colorValue};
         &:focus-visible {
             border: 2px solid ${theme.default.color.focus.dark};
@@ -56,49 +58,23 @@ const getDarkBgStyle = () => {
         }
     `;
 };
-const ButtonElement = styledComponents.styled.button `
-    display: inline-flex;
-    align-items: center;
-    font-family: ${theme.default.fontFamily.default};
-    font-weight: ${theme.default.fontWeight.bold};
-    font-size: ${({ $small }) => ($small ? theme.default.fontSize.s : theme.default.fontSize.default)};
-    line-height: ${({ $small }) => ($small ? theme.default.lineHeight.xs : theme.default.lineHeight.default)};
-    cursor: pointer;
-    background-color: transparent;
-    border: 2px solid transparent;
-    padding: ${styledUtils.getDividedSize(theme.default.base.baseWidth, 5)} 0;
-    text-align: left;
-    transition: all 0.2s ease-in-out;
-
-    & svg {
-        pointer-events: none;
-    }
-
-    ${({ $isReversed }) => $isReversed && `flex-direction: row-reverse;`}
-
-    ${({ $darkBg, $isLinkStyle }) => $darkBg ? getDarkBgStyle() : getStandardStyle({ isLinkStyle: $isLinkStyle })}
-
-    &:focus-visible {
-        border-radius: ${theme.default.radius.s};
-        text-decoration: underline;
-        outline: none;
-    }
-
-    &:hover {
-        text-decoration: underline;
-        text-underline-offset: 0.2em;
-        text-decoration-skip-ink: auto;
-        text-decoration-thickness: from-font;
-    }
-
-    &:disabled,
-    &[disabled] {
-        cursor: not-allowed;
-        text-decoration: none;
-    }
-
-    ${({ $loading }) => $loading &&
-    `
+const ButtonElement = styledComponents.styled.button.withConfig({
+  displayName: "ButtonIcon__ButtonElement",
+  componentId: "sc-y46ygq-0"
+})(["display:inline-flex;align-items:center;font-family:", ";font-weight:", ";font-size:", ";line-height:", ";cursor:pointer;background-color:transparent;border:2px solid transparent;padding:", " 0;text-align:left;transition:all 0.2s ease-in-out;text-decoration:none;& svg{pointer-events:none;}", " ", " &:focus-visible{border-radius:", ";text-decoration:underline;outline:none;}&:hover{text-decoration:underline;text-underline-offset:0.2em;text-decoration-skip-ink:auto;text-decoration-thickness:from-font;}&:disabled,&[disabled],&[aria-disabled='true']{cursor:not-allowed;text-decoration:none;}", " ", ""], theme.default.fontFamily.default, theme.default.fontWeight.bold, ({
+  $small
+}) => $small ? theme.default.fontSize.s : theme.default.fontSize.default, ({
+  $small
+}) => $small ? theme.default.lineHeight.xs : theme.default.lineHeight.default, styledUtils.getDividedSize(theme.default.base.baseWidth, 5), ({
+  $isReversed
+}) => $isReversed && `flex-direction: row-reverse;`, ({
+  $darkBg,
+  $isLinkStyle
+}) => $darkBg ? getDarkBgStyle() : getStandardStyle({
+  isLinkStyle: $isLinkStyle
+}), theme.default.radius.s, ({
+  $loading
+}) => $loading && `
         pointer-events: none;
 
         &:focus {
@@ -109,28 +85,90 @@ const ButtonElement = styledComponents.styled.button `
         > * {
             display: inline-flex;
         }
-    `}
-
-    ${({ $hideChildrenMobile }) => $hideChildrenMobile &&
-    styledComponents.css `
-            span.dnasg-icon + span {
-                display: none;
-            }
-
-            ${styledUtils.media.sm `
+    `, ({
+  $hideChildrenMobile
+}) => $hideChildrenMobile && styledComponents.css(["span.dnasg-icon + span{display:none;}", ""], styledUtils.media.sm`
             span.dnasg-icon + span {
                 display: initial;
             }
-        `}
-        `}
-`;
+        `));
 /** @visibleName Button Icon */
-const ButtonIcon = React.forwardRef((_a, ref) => {
-    var { icon = icons.EditUnderline, 'data-testid': dataTestId, 'data-track-value': dataTrackValue } = _a, props = tslib.__rest(_a, ["icon", 'data-testid', 'data-track-value']);
-    const position = props.isReversed ? 'right' : 'left';
-    return (React__default.default.createElement(ButtonElement, Object.assign({ ref: ref, id: props.id, name: props.name, type: props.type, onClick: props.onClick, onMouseDown: props.onMouseDown, "$small": props.small, "$darkBg": props.darkBg, "$loading": props.loading, tabIndex: props.loading ? -1 : 0, "data-loading": props.loading, disabled: props.disabled, "$hideChildrenMobile": props.hideChildrenMobile, "$isReversed": props.isReversed, className: props.className, "data-testid": dataTestId, "data-track-value": dataTrackValue, "aria-expanded": props.ariaExpanded, "aria-label": props.ariaLabel, "$isLinkStyle": props.isLinkStyle }, props.dataAttributes), props.loading ? (React__default.default.createElement(PixelLoader.default, { color: props.darkBg ? theme.default.color.default.white : theme.default.color.default.black, label: props.loadingLabel })) : (React__default.default.createElement(React__default.default.Fragment, null,
-        React__default.default.createElement(Icon.default, { icon: icon, color: props.darkBg ? theme.default.color.default.white : theme.default.color.default.pink, size: props.small ? '1.25rem' : '1.5rem', position: props.children ? position : undefined, "aria-hidden": true }),
-        props.children && (React__default.default.createElement("span", { "data-testid": dataTestId && `${dataTestId}-text` }, props.children))))));
+const ButtonIcon = /*#__PURE__*/React.forwardRef((_a, ref) => {
+  var _b;
+  var {
+      icon = icons.EditUnderline,
+      'data-testid': dataTestId,
+      'data-track-value': dataTrackValue
+    } = _a,
+    props = tslib.__rest(_a, ["icon", 'data-testid', 'data-track-value']);
+  const position = props.isReversed ? 'right' : 'left';
+  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);
+    }
+  };
+  const content = props.loading ? (/*#__PURE__*/React__default.default.createElement(PixelLoader.default, {
+    color: props.darkBg ? theme.default.color.default.white : theme.default.color.default.black,
+    label: props.loadingLabel
+  })) : (/*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, /*#__PURE__*/React__default.default.createElement(Icon.default, {
+    icon: icon,
+    color: props.darkBg ? theme.default.color.default.white : theme.default.color.default.pink,
+    size: props.small ? '1.25rem' : '1.5rem',
+    position: props.children ? position : undefined,
+    "aria-hidden": true
+  }), props.children && (/*#__PURE__*/React__default.default.createElement("span", {
+    "data-testid": dataTestId && `${dataTestId}-text`
+  }, props.children))));
+  const commonButtonElementProps = {
+    id: props.id,
+    onClick: handleClick,
+    onMouseDown: props.onMouseDown,
+    $small: props.small,
+    $darkBg: props.darkBg,
+    $loading: props.loading,
+    'data-loading': props.loading,
+    className: props.className,
+    'data-testid': dataTestId,
+    'data-track-value': dataTrackValue,
+    'aria-label': props.ariaLabel,
+    $hideChildrenMobile: props.hideChildrenMobile,
+    $isReversed: props.isReversed,
+    'aria-expanded': props.ariaExpanded
+  };
+  if (propHref) {
+    const anchorProps = {
+      href: isDisabledAnchor ? undefined : propHref,
+      target: propTarget,
+      rel: propHref && propTarget === '_blank' ? 'noopener noreferrer' : undefined
+    };
+    return /*#__PURE__*/React__default.default.createElement(ButtonElement, Object.assign({
+      as: propNextLink !== null && propNextLink !== void 0 ? propNextLink : propHref ? 'a' : undefined,
+      "aria-disabled": isDisabledAnchor ? 'true' : undefined,
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any
+      ref: propNextLink ? ref : ref,
+      tabIndex: props.loading || isDisabledAnchor ? -1 : 0,
+      "$isLinkStyle": (_b = props.isLinkStyle) !== null && _b !== void 0 ? _b : true
+    }, commonButtonElementProps, anchorProps, props.dataAttributes), content);
+  } else {
+    return /*#__PURE__*/React__default.default.createElement(ButtonElement, Object.assign({
+      as: "button",
+      ref: ref,
+      name: props.name,
+      type: props.type || 'button',
+      tabIndex: props.loading ? -1 : 0,
+      disabled: props.disabled,
+      "$isLinkStyle": props.isLinkStyle
+    }, commonButtonElementProps, props.dataAttributes), content);
+  }
 });
 
 exports.default = ButtonIcon;

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

@@ -1,5 +1,46 @@
-import Button from '../Button/Button';
+import type { Props } from '../Button/Button';
 /** @visibleName Button Primary */
-declare const ButtonPrimary: typeof Button;
+declare const ButtonPrimary: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<(Omit<import("../Button/Button").CommonProps & Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "target" | "href" | keyof import("../Button/Button").CommonProps | "nextLink"> & {
+    name?: string;
+    type?: import("../Button/Button").ButtonType;
+    disabled?: boolean;
+} & import("react").RefAttributes<HTMLButtonElement | HTMLAnchorElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | HTMLAnchorElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement | HTMLAnchorElement> | null | undefined;
+}) | (Omit<import("../Button/Button").CommonProps & Omit<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, "name" | "type" | "disabled" | keyof import("../Button/Button").CommonProps> & {
+    href?: string;
+    nextLink?: import("react").ComponentType<{
+        href: string;
+        children: import("react").ReactNode;
+    }>;
+    target?: "_self" | "_blank" | "_parent" | "_top";
+} & import("react").RefAttributes<HTMLButtonElement | HTMLAnchorElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | HTMLAnchorElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement | HTMLAnchorElement> | null | undefined;
+}), "loading"> & Pick<Props, "loading">, never> & Partial<Pick<import("styled-components").FastOmit<(Omit<import("../Button/Button").CommonProps & Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "target" | "href" | keyof import("../Button/Button").CommonProps | "nextLink"> & {
+    name?: string;
+    type?: import("../Button/Button").ButtonType;
+    disabled?: boolean;
+} & import("react").RefAttributes<HTMLButtonElement | HTMLAnchorElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | HTMLAnchorElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement | HTMLAnchorElement> | null | undefined;
+}) | (Omit<import("../Button/Button").CommonProps & Omit<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, "name" | "type" | "disabled" | keyof import("../Button/Button").CommonProps> & {
+    href?: string;
+    nextLink?: import("react").ComponentType<{
+        href: string;
+        children: import("react").ReactNode;
+    }>;
+    target?: "_self" | "_blank" | "_parent" | "_top";
+} & import("react").RefAttributes<HTMLButtonElement | HTMLAnchorElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | HTMLAnchorElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement | HTMLAnchorElement> | null | undefined;
+}), "loading"> & Pick<Props, "loading">, never>>> & string & Omit<import("react").ForwardRefExoticComponent<((import("../Button/Button").CommonProps & Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "target" | "href" | keyof import("../Button/Button").CommonProps | "nextLink"> & {
+    name?: string;
+    type?: import("../Button/Button").ButtonType;
+    disabled?: boolean;
+}) | (import("../Button/Button").CommonProps & Omit<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, "name" | "type" | "disabled" | keyof import("../Button/Button").CommonProps> & {
+    href?: string;
+    nextLink?: import("react").ComponentType<{
+        href: string;
+        children: import("react").ReactNode;
+    }>;
+    target?: "_self" | "_blank" | "_parent" | "_top";
+})) & import("react").RefAttributes<HTMLButtonElement | HTMLAnchorElement>>, keyof import("react").Component<any, {}, any>>;
 /** @component */
 export default ButtonPrimary;