@dnanpm/styleguide 4.0.8 → 4.0.10

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

@@ -4,79 +4,81 @@ import { styled } from 'styled-components';
 import theme from '../../themes/theme.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
 
-const BreadcrumbNav = styled.nav `
-    font-size: ${theme.fontSize.s};
-    font-weight: ${theme.fontWeight.medium};
-`;
-const BreadcrumbList = styled.ol `
-    display: flex;
-    align-items: center;
-    flex-wrap: nowrap;
-    list-style: none;
-    margin: ${getMultipliedSize(theme.base.baseHeight, 2)} 0;
-    padding: 0;
-    gap: ${getMultipliedSize(theme.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 = styled.li `
-    display: flex;
-    align-items: center;
-    gap: ${getMultipliedSize(theme.base.baseHeight, 0.5)};
-
-    &:last-child {
-        min-width: 0;
-    }
-
-    a {
-        &:focus-visible {
-            outline: none;
-            border-radius: ${theme.radius.s};
-            box-shadow:
-                0px 0px 0px 2px ${theme.color.focus.light},
-                0px 0px 0px 4px ${theme.color.focus.dark};
-        }
-    }
-
-    span {
-        flex: 1 1 0%;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
+const BreadcrumbNav = styled.nav.withConfig({
+  displayName: "Breadcrumb__BreadcrumbNav",
+  componentId: "sc-jfb1j2-0"
+})(["font-size:", ";font-weight:", ";"], theme.fontSize.s, theme.fontWeight.medium);
+const BreadcrumbList = 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;}}"], getMultipliedSize(theme.base.baseHeight, 2), getMultipliedSize(theme.base.baseHeight, 0.5));
+const BreadcrumbListItem = 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;}"], getMultipliedSize(theme.base.baseHeight, 0.5), theme.radius.s, theme.color.focus.light, theme.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.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.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.createElement("span", {
+        itemProp: "name"
+      }, item.label));
     }
-    const renderItem = (item, index) => {
-        const isLastItem = index === items.length - 1;
-        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", "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", "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 },
-        React__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.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.createElement("meta", { itemProp: "position", content: (index + 1).toString() }),
-                !isLastItem && (React__default.createElement(ChevronRight, { color: theme.color.background.pink.default, size: "0.9rem" }))));
-        }))));
+    return /*#__PURE__*/React__default.createElement("a", {
+      href: item.href,
+      itemProp: "item",
+      itemScope: true,
+      itemType: "https://schema.org/WebPage",
+      "aria-current": isLastItem ? 'page' : undefined
+    }, /*#__PURE__*/React__default.createElement("span", {
+      itemProp: "name"
+    }, item.label));
+  };
+  return /*#__PURE__*/React__default.createElement(BreadcrumbNav, {
+    "aria-label": ariaLabel,
+    className: className,
+    "data-testid": dataTestId
+  }, /*#__PURE__*/React__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.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.createElement("meta", {
+      itemProp: "position",
+      content: (index + 1).toString()
+    }), !isLastItem && (/*#__PURE__*/React__default.createElement(ChevronRight, {
+      color: theme.color.background.pink.default,
+      size: "0.9rem"
+    })));
+  })));
 };
 
 export { Breadcrumb as default };

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

@@ -7,95 +7,65 @@ import PixelLoader from '../PixelLoader/PixelLoader.js';
 
 // 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 = styled('button') `
-    text-align: center;
-    transition: all 0.2s ease-in-out;
-    display: inline-block;
-    font-family: ${theme.fontFamily.default};
-    font-weight: ${theme.fontWeight.bold};
-    font-size: ${({ $small }) => ($small ? theme.fontSize.s : theme.fontSize.default)};
-    line-height: ${({ $small }) => ($small ? theme.lineHeight.xs : theme.lineHeight.default)};
-    min-width: ${({ $small }) => getMultipliedSize(theme.base.baseWidth, $small ? 10 : 12.8)};
-    width: ${({ $fullWidth }) => ($fullWidth ? '100%' : 'auto')};
-    cursor: pointer;
-    color: ${({ $darkBg }) => ($darkBg ? theme.color.text.white : theme.color.text.plum)};
-    background-color: transparent;
-    border-radius: ${theme.radius.pill};
-    border: 2px solid
-        ${({ $darkBg }) => ($darkBg ? theme.color.default.white : theme.color.default.plum)};
-    padding: ${getMultipliedSize(theme.base.baseHeight, 0.6)}
-        ${getMultipliedSize(theme.base.baseWidth, 2)};
-
-    > span {
-        display: inline-flex;
-    }
-
-    &:focus-visible:not(:disabled):not([disabled]):not([aria-disabled='true']) {
-        color: ${({ $darkBg }) => ($darkBg ? theme.color.text.plum : theme.color.text.white)};
-        background-color: ${({ $darkBg }) => $darkBg ? theme.color.default.white : shade.plum.darker};
-        border: 2px solid
-            ${({ $darkBg }) => ($darkBg ? theme.color.focus.dark : theme.color.focus.light)};
-        box-shadow: 0px 0px 0px 2px
-            ${({ $darkBg }) => ($darkBg ? theme.color.focus.light : theme.color.focus.dark)};
-        outline: none;
-    }
-
-    &:hover:not(:disabled):not([disabled]):not([aria-disabled='true']) {
-        color: ${({ $darkBg }) => ($darkBg ? theme.color.text.plum : theme.color.text.white)};
-        background-color: ${({ $darkBg }) => $darkBg ? theme.color.default.white : shade.plum.darker};
-        text-decoration: none;
-
-        &:focus-visible {
-            border: 2px solid
-                ${({ $darkBg }) => ($darkBg ? theme.color.focus.dark : theme.color.focus.light)};
-            box-shadow: 0px 0px 0px 2px
-                ${({ $darkBg }) => ($darkBg ? theme.color.focus.light : theme.color.focus.dark)};
-        }
-    }
-
-    &:active:not(:disabled):not([disabled]):not([aria-disabled='true']) {
-        color: ${({ $darkBg }) => ($darkBg ? theme.color.text.plum : theme.color.text.white)};
-        background-color: ${({ $darkBg }) => $darkBg
-    ? theme.color.default.white + theme.color.transparency.T90
-    : shade.plum.lighter};
-        border: 2px solid
-            ${({ $darkBg }) => $darkBg
-    ? theme.color.default.white + theme.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.color.text.white + theme.color.transparency.T70
-    : theme.color.text.gray};
-        border: 2px solid
-            ${({ $darkBg }) => $darkBg
-    ? theme.color.default.white + theme.color.transparency.T30
-    : theme.color.default.plum + theme.color.transparency.T30};
-        cursor: not-allowed;
-        outline: none;
-    }
-
-    ${({ $loading }) => $loading &&
-    `
+  }
+};
+const Element = 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.fontFamily.default, theme.fontWeight.bold, ({
+  $small
+}) => $small ? theme.fontSize.s : theme.fontSize.default, ({
+  $small
+}) => $small ? theme.lineHeight.xs : theme.lineHeight.default, ({
+  $small
+}) => getMultipliedSize(theme.base.baseWidth, $small ? 10 : 12.8), ({
+  $fullWidth
+}) => $fullWidth ? '100%' : 'auto', ({
+  $darkBg
+}) => $darkBg ? theme.color.text.white : theme.color.text.plum, theme.radius.pill, ({
+  $darkBg
+}) => $darkBg ? theme.color.default.white : theme.color.default.plum, getMultipliedSize(theme.base.baseHeight, 0.6), getMultipliedSize(theme.base.baseWidth, 2), ({
+  $darkBg
+}) => $darkBg ? theme.color.text.plum : theme.color.text.white, ({
+  $darkBg
+}) => $darkBg ? theme.color.default.white : shade.plum.darker, ({
+  $darkBg
+}) => $darkBg ? theme.color.focus.dark : theme.color.focus.light, ({
+  $darkBg
+}) => $darkBg ? theme.color.focus.light : theme.color.focus.dark, ({
+  $darkBg
+}) => $darkBg ? theme.color.text.plum : theme.color.text.white, ({
+  $darkBg
+}) => $darkBg ? theme.color.default.white : shade.plum.darker, ({
+  $darkBg
+}) => $darkBg ? theme.color.focus.dark : theme.color.focus.light, ({
+  $darkBg
+}) => $darkBg ? theme.color.focus.light : theme.color.focus.dark, ({
+  $darkBg
+}) => $darkBg ? theme.color.text.plum : theme.color.text.white, ({
+  $darkBg
+}) => $darkBg ? theme.color.default.white + theme.color.transparency.T90 : shade.plum.lighter, ({
+  $darkBg
+}) => $darkBg ? theme.color.default.white + theme.color.transparency.T90 : shade.plum.lighter, ({
+  $darkBg
+}) => $darkBg ? theme.color.text.white + theme.color.transparency.T70 : theme.color.text.gray, ({
+  $darkBg
+}) => $darkBg ? theme.color.default.white + theme.color.transparency.T30 : theme.color.default.plum + theme.color.transparency.T30, ({
+  $loading
+}) => $loading && `
         pointer-events: none;
 
         &:focus {
@@ -108,48 +78,82 @@ const Element = styled('button') `
         > * {
             display: inline-flex;
         }
-    `}
-`;
+    `);
 /** @visibleName Button */
-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 (onClick) {
-            onClick(event);
-        }
-    };
-    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));
+const Button = /*#__PURE__*/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;
     }
-    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));
+    if (onClick) {
+      onClick(event);
     }
+  };
+  const content = loading ? (/*#__PURE__*/React__default.createElement(PixelLoader, {
+    color: darkBg ? theme.color.default.white : theme.color.default.plum,
+    label: loadingLabel
+  })) : (/*#__PURE__*/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) {
+    const anchorProps = {
+      href: isDisabledAnchor ? undefined : propHref,
+      target: propTarget,
+      rel: propHref && propTarget === '_blank' ? 'noopener noreferrer' : undefined
+    };
+    return /*#__PURE__*/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,
+      tabIndex: loading || isDisabledAnchor ? -1 : 0,
+      "aria-disabled": isDisabledAnchor ? 'true' : undefined
+    }, commonElementProps, anchorProps, rest.dataAttributes), content);
+  } else {
+    return /*#__PURE__*/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/ButtonArrow/ButtonArrow.js

@@ -8,10 +8,10 @@ import ButtonPrimary from '../ButtonPrimary/ButtonPrimary.js';
 import ButtonSecondary from '../ButtonSecondary/ButtonSecondary.js';
 
 const iconsMap = {
-    up: ChevronUp,
-    right: ChevronRight,
-    down: ChevronDown,
-    left: ChevronLeft,
+  up: ChevronUp,
+  right: ChevronRight,
+  down: ChevronDown,
+  left: ChevronLeft
 };
 const overrideStyles = `
     display: flex;
@@ -25,53 +25,51 @@ const overrideStyles = `
     align-items: center;
 `;
 const buttonsMap = {
-    primary: styled(ButtonPrimary) `
-        ${overrideStyles};
-        border-radius: ${theme.radius.circle};
-
-        &:disabled,
-        &[disabled] {
-            color: ${theme.color.text.black};
-        }
-    `,
-    secondary: styled(ButtonSecondary) `
-        ${overrideStyles};
-        color: ${theme.color.text.black};
-        border: 1px solid ${theme.color.line.L01};
-        border-radius: ${theme.radius.s};
-
-        &:focus {
-            color: ${theme.color.text.black};
-        }
-
-        &:hover:not(:disabled):not([disabled]):not([aria-disabled='true']) {
-            color: ${theme.color.text.black};
-        }
-
-        &:active {
-            color: ${theme.color.text.black};
-            border: 1px solid ${theme.color.line.L01};
-        }
-
-        &:disabled,
-        &[disabled] {
-            border: 1px solid ${theme.color.line.L02 + theme.color.transparency.T30};
-        }
-    `,
+  primary: styled(ButtonPrimary).withConfig({
+    displayName: "ButtonArrow__primary",
+    componentId: "sc-16pespq-0"
+  })(["", ";border-radius:", ";&:disabled,&[disabled]{color:", ";}"], overrideStyles, theme.radius.circle, theme.color.text.black),
+  secondary: styled(ButtonSecondary).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.color.text.black, theme.color.line.L01, theme.radius.s, theme.color.text.black, theme.color.text.black, theme.color.text.black, theme.color.line.L01, theme.color.line.L02 + theme.color.transparency.T30)
 };
 /** @visibleName Button Arrow */
-const ButtonArrow = (_a) => {
-    var { variant = 'primary', 'data-testid': dataTestId, 'data-track-value': dataTrackValue, 'aria-label': ariaLabel } = _a, props = __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.createElement(IconComponent, { icon: iconsMap[props.direction], size: "1rem" });
-    }
-    else if (isValidElement(props.icon)) {
-        iconElement = cloneElement(props.icon, { size: '1rem' });
-    }
-    return (React__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 = __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.createElement(IconComponent, {
+      icon: iconsMap[props.direction],
+      size: "1rem"
+    });
+  } else if (/*#__PURE__*/isValidElement(props.icon)) {
+    iconElement = /*#__PURE__*/cloneElement(props.icon, {
+      size: '1rem'
+    });
+  }
+  return /*#__PURE__*/React__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);
 };
 
 export { ButtonArrow as default };

package/build/es/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;
     /**