@dnanpm/styleguide 4.0.8 → 4.0.10

package/build/cjs/components/Box/Box.js

@@ -13,19 +13,44 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const BoxWrapper = styledComponents.styled.div `
-    border: 1px solid ${theme.default.color.line.L04};
-    ${({ width }) => width && `width: ${width}`};
-    ${({ height }) => height && `height: ${height}`};
-    ${({ $margin }) => $margin && `margin: ${$margin}`};
-    padding: ${({ $padding }) => $padding || styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2)};
-    background-color: ${theme.default.color.default.white};
-    border-radius: ${theme.default.radius.default};
-    ${({ $elevation, $shadow }) => $elevation !== 'none' && common.default({ elevation: $elevation, shadow: $shadow })}
-`;
-const Box = (_a) => {
-    var { elevation = 'none', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["elevation", 'data-testid']);
-    return (React__default.default.createElement(BoxWrapper, { id: props.id, "$elevation": elevation, "$shadow": props.shadow, "$margin": props.margin, "$padding": props.padding, width: props.width, height: props.height, className: props.className, "data-testid": dataTestId, role: props.role, "aria-label": props.ariaLabel, "aria-live": props.ariaLive }, props.children));
+const BoxWrapper = styledComponents.styled.div.withConfig({
+  displayName: "Box__BoxWrapper",
+  componentId: "sc-d3vc67-0"
+})(["border:1px solid ", ";", ";", ";", ";padding:", ";background-color:", ";border-radius:", ";", ""], theme.default.color.line.L04, ({
+  width
+}) => width && `width: ${width}`, ({
+  height
+}) => height && `height: ${height}`, ({
+  $margin
+}) => $margin && `margin: ${$margin}`, ({
+  $padding
+}) => $padding || styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2), theme.default.color.default.white, theme.default.radius.default, ({
+  $elevation,
+  $shadow
+}) => $elevation !== 'none' && common.default({
+  elevation: $elevation,
+  shadow: $shadow
+}));
+const Box = _a => {
+  var {
+      elevation = 'none',
+      'data-testid': dataTestId
+    } = _a,
+    props = tslib.__rest(_a, ["elevation", 'data-testid']);
+  return /*#__PURE__*/React__default.default.createElement(BoxWrapper, {
+    id: props.id,
+    "$elevation": elevation,
+    "$shadow": props.shadow,
+    "$margin": props.margin,
+    "$padding": props.padding,
+    width: props.width,
+    height: props.height,
+    className: props.className,
+    "data-testid": dataTestId,
+    role: props.role,
+    "aria-label": props.ariaLabel,
+    "aria-live": props.ariaLive
+  }, props.children);
 };
 
 exports.default = Box;

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

@@ -12,79 +12,81 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const BreadcrumbNav = styledComponents.styled.nav `
-    font-size: ${theme.default.fontSize.s};
-    font-weight: ${theme.default.fontWeight.medium};
-`;
-const BreadcrumbList = styledComponents.styled.ol `
-    display: flex;
-    align-items: center;
-    flex-wrap: nowrap;
-    list-style: none;
-    margin: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2)} 0;
-    padding: 0;
-    gap: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 0.5)};
-    overflow: visible;
-    container: breadcrumb / inline-size;
-
-    /* Responsive behavior: show only last 2 items when container < 600px */
-    @container (max-width: 599px) {
-        li:not(:nth-last-child(-n + 2)) {
-            display: none;
-        }
-    }
-`;
-const BreadcrumbListItem = styledComponents.styled.li `
-    display: flex;
-    align-items: center;
-    gap: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 0.5)};
-
-    &:last-child {
-        min-width: 0;
-    }
-
-    a {
-        &:focus-visible {
-            outline: none;
-            border-radius: ${theme.default.radius.s};
-            box-shadow:
-                0px 0px 0px 2px ${theme.default.color.focus.light},
-                0px 0px 0px 4px ${theme.default.color.focus.dark};
-        }
-    }
-
-    span {
-        flex: 1 1 0%;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
+const BreadcrumbNav = styledComponents.styled.nav.withConfig({
+  displayName: "Breadcrumb__BreadcrumbNav",
+  componentId: "sc-jfb1j2-0"
+})(["font-size:", ";font-weight:", ";"], theme.default.fontSize.s, theme.default.fontWeight.medium);
+const BreadcrumbList = styledComponents.styled.ol.withConfig({
+  displayName: "Breadcrumb__BreadcrumbList",
+  componentId: "sc-jfb1j2-1"
+})(["display:flex;align-items:center;flex-wrap:nowrap;list-style:none;margin:", " 0;padding:0;gap:", ";overflow:visible;container:breadcrumb / inline-size;@container (max-width:599px){li:not(:nth-last-child(-n + 2)){display:none;}}"], styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2), styledUtils.getMultipliedSize(theme.default.base.baseHeight, 0.5));
+const BreadcrumbListItem = styledComponents.styled.li.withConfig({
+  displayName: "Breadcrumb__BreadcrumbListItem",
+  componentId: "sc-jfb1j2-2"
+})(["display:flex;align-items:center;gap:", ";&:last-child{min-width:0;}a{&:focus-visible{outline:none;border-radius:", ";box-shadow:0px 0px 0px 2px ", ",0px 0px 0px 4px ", ";}}span{flex:1 1 0%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}"], styledUtils.getMultipliedSize(theme.default.base.baseHeight, 0.5), theme.default.radius.s, theme.default.color.focus.light, theme.default.color.focus.dark);
+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 && !allowLastItemLink || !item.href) {
+      return /*#__PURE__*/React__default.default.createElement("span", {
+        "aria-current": isLastItem ? 'page' : undefined
+      }, item.label);
     }
-`;
-const Breadcrumb = ({ 'data-testid': dataTestId, ariaLabel, className, items, linkComponent: LinkComponent, linkProps = {}, allowLastItemLink = false, }) => {
-    if (!items || items.length === 0) {
-        return null;
+    if (LinkComponent) {
+      return /*#__PURE__*/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), /*#__PURE__*/React__default.default.createElement("span", {
+        itemProp: "name"
+      }, item.label));
     }
-    const renderItem = (item, index) => {
-        const isLastItem = index === items.length - 1;
-        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", "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", "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 },
-        React__default.default.createElement(BreadcrumbList, { itemScope: true, itemType: "https://schema.org/BreadcrumbList" }, items.map((item, index) => {
-            var _a;
-            const isLastItem = index === items.length - 1;
-            return (React__default.default.createElement(BreadcrumbListItem, { itemProp: "itemListElement", itemScope: true, itemType: "https://schema.org/ListItem", key: `breadcrumb-${item.label}-${(_a = item.href) !== null && _a !== void 0 ? _a : 'nolink'}` },
-                renderItem(item, index),
-                React__default.default.createElement("meta", { itemProp: "position", content: (index + 1).toString() }),
-                !isLastItem && (React__default.default.createElement(icons.ChevronRight, { color: theme.default.color.background.pink.default, size: "0.9rem" }))));
-        }))));
+    return /*#__PURE__*/React__default.default.createElement("a", {
+      href: item.href,
+      itemProp: "item",
+      itemScope: true,
+      itemType: "https://schema.org/WebPage",
+      "aria-current": isLastItem ? 'page' : undefined
+    }, /*#__PURE__*/React__default.default.createElement("span", {
+      itemProp: "name"
+    }, item.label));
+  };
+  return /*#__PURE__*/React__default.default.createElement(BreadcrumbNav, {
+    "aria-label": ariaLabel,
+    className: className,
+    "data-testid": dataTestId
+  }, /*#__PURE__*/React__default.default.createElement(BreadcrumbList, {
+    itemScope: true,
+    itemType: "https://schema.org/BreadcrumbList"
+  }, items.map((item, index) => {
+    var _a;
+    const isLastItem = index === items.length - 1;
+    return /*#__PURE__*/React__default.default.createElement(BreadcrumbListItem, {
+      itemProp: "itemListElement",
+      itemScope: true,
+      itemType: "https://schema.org/ListItem",
+      key: `breadcrumb-${item.label}-${(_a = item.href) !== null && _a !== void 0 ? _a : 'nolink'}`
+    }, renderItem(item, index), /*#__PURE__*/React__default.default.createElement("meta", {
+      itemProp: "position",
+      content: (index + 1).toString()
+    }), !isLastItem && (/*#__PURE__*/React__default.default.createElement(icons.ChevronRight, {
+      color: theme.default.color.background.pink.default,
+      size: "0.9rem"
+    })));
+  })));
 };
 
 exports.default = Breadcrumb;

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

@@ -1,6 +1,6 @@
 import type { AnchorHTMLAttributes, ButtonHTMLAttributes, ComponentType, MouseEvent, ReactNode } from 'react';
 import React from 'react';
-type ButtonType = 'submit' | 'button' | 'reset';
+export type ButtonType = 'submit' | 'button' | 'reset';
 export type Props = ButtonProps & AnchorProps & CommonProps;
 export interface CommonProps {
     /**

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

@@ -15,95 +15,65 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 // Only Button component specific shades to be used on user interaction styles
 const shade = {
-    pink: {
-        darker: '#AE005A',
-        lighter: '#F7007F',
-    },
-    plum: {
-        darker: '#441632',
-        lighter: '#732654',
-    },
-    sand: {
-        E02: {
-            darker: '#CABCA7',
-            lighter: '#EFEAE4',
-        },
-    },
-};
-const Element = styledComponents.styled('button') `
-    text-align: center;
-    transition: all 0.2s ease-in-out;
-    display: inline-block;
-    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)};
-    min-width: ${({ $small }) => styledUtils.getMultipliedSize(theme.default.base.baseWidth, $small ? 10 : 12.8)};
-    width: ${({ $fullWidth }) => ($fullWidth ? '100%' : 'auto')};
-    cursor: pointer;
-    color: ${({ $darkBg }) => ($darkBg ? theme.default.color.text.white : theme.default.color.text.plum)};
-    background-color: transparent;
-    border-radius: ${theme.default.radius.pill};
-    border: 2px solid
-        ${({ $darkBg }) => ($darkBg ? theme.default.color.default.white : theme.default.color.default.plum)};
-    padding: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 0.6)}
-        ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2)};
-
-    > span {
-        display: inline-flex;
-    }
-
-    &:focus-visible:not(:disabled):not([disabled]):not([aria-disabled='true']) {
-        color: ${({ $darkBg }) => ($darkBg ? theme.default.color.text.plum : theme.default.color.text.white)};
-        background-color: ${({ $darkBg }) => $darkBg ? theme.default.color.default.white : shade.plum.darker};
-        border: 2px solid
-            ${({ $darkBg }) => ($darkBg ? theme.default.color.focus.dark : theme.default.color.focus.light)};
-        box-shadow: 0px 0px 0px 2px
-            ${({ $darkBg }) => ($darkBg ? theme.default.color.focus.light : theme.default.color.focus.dark)};
-        outline: none;
-    }
-
-    &:hover:not(:disabled):not([disabled]):not([aria-disabled='true']) {
-        color: ${({ $darkBg }) => ($darkBg ? theme.default.color.text.plum : theme.default.color.text.white)};
-        background-color: ${({ $darkBg }) => $darkBg ? theme.default.color.default.white : shade.plum.darker};
-        text-decoration: none;
-
-        &:focus-visible {
-            border: 2px solid
-                ${({ $darkBg }) => ($darkBg ? theme.default.color.focus.dark : theme.default.color.focus.light)};
-            box-shadow: 0px 0px 0px 2px
-                ${({ $darkBg }) => ($darkBg ? theme.default.color.focus.light : theme.default.color.focus.dark)};
-        }
-    }
-
-    &:active:not(:disabled):not([disabled]):not([aria-disabled='true']) {
-        color: ${({ $darkBg }) => ($darkBg ? theme.default.color.text.plum : theme.default.color.text.white)};
-        background-color: ${({ $darkBg }) => $darkBg
-    ? theme.default.color.default.white + theme.default.color.transparency.T90
-    : shade.plum.lighter};
-        border: 2px solid
-            ${({ $darkBg }) => $darkBg
-    ? theme.default.color.default.white + theme.default.color.transparency.T90
-    : shade.plum.lighter};
-        outline: none;
+  pink: {
+    darker: '#AE005A',
+    lighter: '#F7007F'
+  },
+  plum: {
+    darker: '#441632',
+    lighter: '#732654'
+  },
+  sand: {
+    E02: {
+      darker: '#CABCA7',
+      lighter: '#EFEAE4'
     }
-
-    &:disabled,
-    &[disabled],
-    &[aria-disabled='true'] {
-        color: ${({ $darkBg }) => $darkBg
-    ? theme.default.color.text.white + theme.default.color.transparency.T70
-    : theme.default.color.text.gray};
-        border: 2px solid
-            ${({ $darkBg }) => $darkBg
-    ? theme.default.color.default.white + theme.default.color.transparency.T30
-    : theme.default.color.default.plum + theme.default.color.transparency.T30};
-        cursor: not-allowed;
-        outline: none;
-    }
-
-    ${({ $loading }) => $loading &&
-    `
+  }
+};
+const Element = styledComponents.styled('button').withConfig({
+  displayName: "Button__Element",
+  componentId: "sc-1oaeuxt-0"
+})(["text-align:center;transition:all 0.2s ease-in-out;display:inline-block;font-family:", ";font-weight:", ";font-size:", ";line-height:", ";min-width:", ";width:", ";cursor:pointer;color:", ";background-color:transparent;border-radius:", ";border:2px solid ", ";padding:", " ", ";> span{display:inline-flex;}&:focus-visible:not(:disabled):not([disabled]):not([aria-disabled='true']){color:", ";background-color:", ";border:2px solid ", ";box-shadow:0px 0px 0px 2px ", ";outline:none;}&:hover:not(:disabled):not([disabled]):not([aria-disabled='true']){color:", ";background-color:", ";text-decoration:none;&:focus-visible{border:2px solid ", ";box-shadow:0px 0px 0px 2px ", ";}}&:active:not(:disabled):not([disabled]):not([aria-disabled='true']){color:", ";background-color:", ";border:2px solid ", ";outline:none;}&:disabled,&[disabled],&[aria-disabled='true']{color:", ";border:2px solid ", ";cursor:not-allowed;outline: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, ({
+  $small
+}) => styledUtils.getMultipliedSize(theme.default.base.baseWidth, $small ? 10 : 12.8), ({
+  $fullWidth
+}) => $fullWidth ? '100%' : 'auto', ({
+  $darkBg
+}) => $darkBg ? theme.default.color.text.white : theme.default.color.text.plum, theme.default.radius.pill, ({
+  $darkBg
+}) => $darkBg ? theme.default.color.default.white : theme.default.color.default.plum, styledUtils.getMultipliedSize(theme.default.base.baseHeight, 0.6), styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2), ({
+  $darkBg
+}) => $darkBg ? theme.default.color.text.plum : theme.default.color.text.white, ({
+  $darkBg
+}) => $darkBg ? theme.default.color.default.white : shade.plum.darker, ({
+  $darkBg
+}) => $darkBg ? theme.default.color.focus.dark : theme.default.color.focus.light, ({
+  $darkBg
+}) => $darkBg ? theme.default.color.focus.light : theme.default.color.focus.dark, ({
+  $darkBg
+}) => $darkBg ? theme.default.color.text.plum : theme.default.color.text.white, ({
+  $darkBg
+}) => $darkBg ? theme.default.color.default.white : shade.plum.darker, ({
+  $darkBg
+}) => $darkBg ? theme.default.color.focus.dark : theme.default.color.focus.light, ({
+  $darkBg
+}) => $darkBg ? theme.default.color.focus.light : theme.default.color.focus.dark, ({
+  $darkBg
+}) => $darkBg ? theme.default.color.text.plum : theme.default.color.text.white, ({
+  $darkBg
+}) => $darkBg ? theme.default.color.default.white + theme.default.color.transparency.T90 : shade.plum.lighter, ({
+  $darkBg
+}) => $darkBg ? theme.default.color.default.white + theme.default.color.transparency.T90 : shade.plum.lighter, ({
+  $darkBg
+}) => $darkBg ? theme.default.color.text.white + theme.default.color.transparency.T70 : theme.default.color.text.gray, ({
+  $darkBg
+}) => $darkBg ? theme.default.color.default.white + theme.default.color.transparency.T30 : theme.default.color.default.plum + theme.default.color.transparency.T30, ({
+  $loading
+}) => $loading && `
         pointer-events: none;
 
         &:focus {
@@ -116,48 +86,82 @@ const Element = styledComponents.styled('button') `
         > * {
             display: inline-flex;
         }
-    `}
-`;
+    `);
 /** @visibleName Button */
-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 (onClick) {
-            onClick(event);
-        }
-    };
-    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));
+const Button = /*#__PURE__*/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;
     }
-    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));
+    if (onClick) {
+      onClick(event);
     }
+  };
+  const content = loading ? (/*#__PURE__*/React__default.default.createElement(PixelLoader.default, {
+    color: darkBg ? theme.default.color.default.white : theme.default.color.default.plum,
+    label: loadingLabel
+  })) : (/*#__PURE__*/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) {
+    const anchorProps = {
+      href: isDisabledAnchor ? undefined : propHref,
+      target: propTarget,
+      rel: propHref && propTarget === '_blank' ? 'noopener noreferrer' : undefined
+    };
+    return /*#__PURE__*/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,
+      tabIndex: loading || isDisabledAnchor ? -1 : 0,
+      "aria-disabled": isDisabledAnchor ? 'true' : undefined
+    }, commonElementProps, anchorProps, rest.dataAttributes), content);
+  } else {
+    return /*#__PURE__*/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;

package/build/cjs/components/ButtonArrow/ButtonArrow.js

@@ -16,10 +16,10 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 const iconsMap = {
-    up: icons.ChevronUp,
-    right: icons.ChevronRight,
-    down: icons.ChevronDown,
-    left: icons.ChevronLeft,
+  up: icons.ChevronUp,
+  right: icons.ChevronRight,
+  down: icons.ChevronDown,
+  left: icons.ChevronLeft
 };
 const overrideStyles = `
     display: flex;
@@ -33,53 +33,51 @@ const overrideStyles = `
     align-items: center;
 `;
 const buttonsMap = {
-    primary: styledComponents.styled(ButtonPrimary.default) `
-        ${overrideStyles};
-        border-radius: ${theme.default.radius.circle};
-
-        &:disabled,
-        &[disabled] {
-            color: ${theme.default.color.text.black};
-        }
-    `,
-    secondary: styledComponents.styled(ButtonSecondary.default) `
-        ${overrideStyles};
-        color: ${theme.default.color.text.black};
-        border: 1px solid ${theme.default.color.line.L01};
-        border-radius: ${theme.default.radius.s};
-
-        &:focus {
-            color: ${theme.default.color.text.black};
-        }
-
-        &:hover:not(:disabled):not([disabled]):not([aria-disabled='true']) {
-            color: ${theme.default.color.text.black};
-        }
-
-        &:active {
-            color: ${theme.default.color.text.black};
-            border: 1px solid ${theme.default.color.line.L01};
-        }
-
-        &:disabled,
-        &[disabled] {
-            border: 1px solid ${theme.default.color.line.L02 + theme.default.color.transparency.T30};
-        }
-    `,
+  primary: styledComponents.styled(ButtonPrimary.default).withConfig({
+    displayName: "ButtonArrow__primary",
+    componentId: "sc-16pespq-0"
+  })(["", ";border-radius:", ";&:disabled,&[disabled]{color:", ";}"], overrideStyles, theme.default.radius.circle, theme.default.color.text.black),
+  secondary: styledComponents.styled(ButtonSecondary.default).withConfig({
+    displayName: "ButtonArrow__secondary",
+    componentId: "sc-16pespq-1"
+  })(["", ";color:", ";border:1px solid ", ";border-radius:", ";&:focus{color:", ";}&:hover:not(:disabled):not([disabled]):not([aria-disabled='true']){color:", ";}&:active{color:", ";border:1px solid ", ";}&:disabled,&[disabled]{border:1px solid ", ";}"], overrideStyles, theme.default.color.text.black, theme.default.color.line.L01, theme.default.radius.s, theme.default.color.text.black, theme.default.color.text.black, theme.default.color.text.black, theme.default.color.line.L01, theme.default.color.line.L02 + theme.default.color.transparency.T30)
 };
 /** @visibleName Button Arrow */
-const ButtonArrow = (_a) => {
-    var { variant = 'primary', 'data-testid': dataTestId, 'data-track-value': dataTrackValue, 'aria-label': ariaLabel } = _a, props = tslib.__rest(_a, ["variant", 'data-testid', 'data-track-value', 'aria-label']);
-    const Element = buttonsMap[variant];
-    let iconElement = null;
-    if (props.direction) {
-        const IconComponent = iconsMap[props.direction];
-        iconElement = React__default.default.createElement(IconComponent, { icon: iconsMap[props.direction], size: "1rem" });
-    }
-    else if (React.isValidElement(props.icon)) {
-        iconElement = React.cloneElement(props.icon, { size: '1rem' });
-    }
-    return (React__default.default.createElement(Element, { id: props.id, name: props.name, type: props.type, onClick: props.onClick, onMouseDown: props.onMouseDown, darkBg: props.darkBg, disabled: props.disabled, className: props.className, "data-testid": dataTestId, "data-track-value": dataTrackValue, dataAttributes: props.dataAttributes, "aria-label": ariaLabel }, iconElement));
+const ButtonArrow = _a => {
+  var {
+      variant = 'primary',
+      'data-testid': dataTestId,
+      'data-track-value': dataTrackValue,
+      'aria-label': ariaLabel
+    } = _a,
+    props = tslib.__rest(_a, ["variant", 'data-testid', 'data-track-value', 'aria-label']);
+  const Element = buttonsMap[variant];
+  let iconElement = null;
+  if (props.direction) {
+    const IconComponent = iconsMap[props.direction];
+    iconElement = /*#__PURE__*/React__default.default.createElement(IconComponent, {
+      icon: iconsMap[props.direction],
+      size: "1rem"
+    });
+  } else if (/*#__PURE__*/React.isValidElement(props.icon)) {
+    iconElement = /*#__PURE__*/React.cloneElement(props.icon, {
+      size: '1rem'
+    });
+  }
+  return /*#__PURE__*/React__default.default.createElement(Element, {
+    id: props.id,
+    name: props.name,
+    type: props.type,
+    onClick: props.onClick,
+    onMouseDown: props.onMouseDown,
+    darkBg: props.darkBg,
+    disabled: props.disabled,
+    className: props.className,
+    "data-testid": dataTestId,
+    "data-track-value": dataTrackValue,
+    dataAttributes: props.dataAttributes,
+    "aria-label": ariaLabel
+  }, iconElement);
 };
 
 exports.default = ButtonArrow;

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

@@ -1,7 +1,7 @@
 import type { MouseEvent, ReactNode } from 'react';
 import React from 'react';
+import type { ButtonType } from '../Button/Button';
 type Size = 'small' | 'medium' | 'large';
-type ButtonType = 'submit' | 'button' | 'reset';
 interface Props {
     /**
      * Unique ID for the component
@@ -18,7 +18,7 @@ interface Props {
      * @param {ButtonType} button No functionality when pressed
      * @param {ButtonType} reset Button resets all the controls to their initial values
      *
-     * @default 'submit'
+     * @default 'button'
      */
     type?: ButtonType;
     /**