@dnanpm/styleguide 3.0.0 → 3.1.0

package/build/cjs/assets/bundle-8de31ca3.css

@@ -0,0 +1,129 @@
+/* "DNA Text" font definition */
+@font-face {
+    font-family: 'DNA Text';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url('https://banner.dna.fi/fonts/DNAText-Regular.woff2') format('woff2'),
+        url('https://banner.dna.fi/fonts/DNAText-Regular.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Text';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url('https://banner.dna.fi/fonts/DNAText-Medium.woff2') format('woff2'),
+        url('https://banner.dna.fi/fonts/DNAText-Medium.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Text';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('https://banner.dna.fi/fonts/DNAText-Bold.woff2') format('woff2'),
+        url('https://banner.dna.fi/fonts/DNAText-Bold.woff') format('woff');
+}
+
+/* "DNA Heading" font definition */
+@font-face {
+    font-family: 'DNA Heading';
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: url('https://banner.dna.fi/fonts/DNAHeading-DemiBold.woff2') format('woff2'),
+        url('https://banner.dna.fi/fonts/DNAHeading-DemiBold.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Heading';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('https://banner.dna.fi/fonts/DNAHeading-Bold.woff2') format('woff2'),
+        url('https://banner.dna.fi/fonts/DNAHeading-Bold.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Heading';
+    font-style: normal;
+    font-weight: 900;
+    font-display: swap;
+    src: url('https://banner.dna.fi/fonts/DNAHeading-Black.woff2') format('woff2'),
+        url('https://banner.dna.fi/fonts/DNAHeading-Black.woff') format('woff');
+}
+
+/* "DNA Numerals" font definition */
+@font-face {
+    font-family: 'DNA Numerals';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('https://banner.dna.fi/fonts/DNANumerals-Bold.woff2') format('woff2'),
+        url('https://banner.dna.fi/fonts/DNANumerals-Bold.woff') format('woff');
+}
+
+/* Direct definitons of DNA fonts */
+@font-face {
+    font-family: 'DNA Text Regular';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url('https://banner.dna.fi/fonts/DNAText-Regular.woff2') format('woff2'),
+        url('https://banner.dna.fi/fonts/DNAText-Regular.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Text Medium';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url('https://banner.dna.fi/fonts/DNAText-Medium.woff2') format('woff2'),
+        url('https://banner.dna.fi/fonts/DNAText-Medium.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Text Bold';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('https://banner.dna.fi/fonts/DNAText-Bold.woff2') format('woff2'),
+        url('https://banner.dna.fi/fonts/DNAText-Bold.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Heading Demi Bold';
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: url('https://banner.dna.fi/fonts/DNAHeading-DemiBold.woff2') format('woff2'),
+        url('https://banner.dna.fi/fonts/DNAHeading-DemiBold.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Heading Bold';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('https://banner.dna.fi/fonts/DNAHeading-Bold.woff2') format('woff2'),
+        url('https://banner.dna.fi/fonts/DNAHeading-Bold.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Heading Black';
+    font-style: normal;
+    font-weight: 900;
+    font-display: swap;
+    src: url('https://banner.dna.fi/fonts/DNAHeading-Black.woff2') format('woff2'),
+        url('https://banner.dna.fi/fonts/DNAHeading-Black.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Numerals Bold';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('https://banner.dna.fi/fonts/DNANumerals-Bold.woff2') format('woff2'),
+        url('https://banner.dna.fi/fonts/DNANumerals-Bold.woff') format('woff');
+}

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

@@ -15,6 +15,6 @@ interface Props extends Omit<AccordionItemProps, 'title' | 'id' | 'children' | '
     autoCollapsible?: boolean;
 }
 /** @visibleName Accordion */
-declare const Accordion: ({ type, autoCollapsible, highlightSelected, hasCloseButton, ...props }: Props) => JSX.Element | null;
+declare const Accordion: ({ type, autoCollapsible, highlightSelected, hasCloseButton, ...props }: Props) => React.JSX.Element | null;
 /** @component */
 export default Accordion;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-declare type AccordionItemType = 'box' | 'panel';
+type AccordionItemType = 'box' | 'panel';
 export interface Props {
     /**
      * Accordion item title
@@ -66,6 +66,6 @@ export interface Props {
     className?: string;
 }
 /** @visibleName Accordion Item */
-declare const AccordionItem: ({ type, hasCloseButton, highlightSelected, ...props }: Props) => JSX.Element;
+declare const AccordionItem: ({ type, hasCloseButton, highlightSelected, ...props }: Props) => React.JSX.Element;
 /** @component */
 export default AccordionItem;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 interface Props {
     /**
      * Unique ID for the input element
@@ -41,7 +41,7 @@ interface Props {
      */
     disabled?: boolean;
     /**
-     * Allows to udate input element's value directly
+     * Allows to update input element's value directly
      *
      * @default true
      */
@@ -61,6 +61,6 @@ interface Props {
     className?: string;
 }
 /** @visibleName Amount Selector */
-declare const AmountSelector: ({ onChange, value, step, min, max, disabled, readonly, "data-testid": dataTestId, ...props }: Props) => JSX.Element;
+declare const AmountSelector: ({ onChange, value, step, min, max, disabled, readonly, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
 /** @component */
 export default AmountSelector;

package/build/cjs/components/AmountSelector/AmountSelector.js

@@ -7,7 +7,7 @@ var React = require('react');
 var styled = require('../../themes/styled.js');
 var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
-var ButtonSecondary = require('../Button/ButtonSecondary.js');
+var ButtonArrow = require('../Button/ButtonArrow.js');
 var Icon = require('../Icon/Icon.js');
 var hlMinus = require('../Icons/hlMinus.js');
 var hlPlus = require('../Icons/hlPlus.js');
@@ -21,35 +21,11 @@ const Container = styled["default"].div `
     display: flex;
     width: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 12)};
 `;
-const StyledButtonSecondary = styled["default"](ButtonSecondary["default"]) `
+const Button = styled["default"](ButtonArrow["default"]) `
     display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    min-width: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 4)};
     width: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 4)};
     height: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 4)};
-    padding: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 0.6)};
-    border: 1px solid ${theme["default"].color.line.L01};
     border-radius: 0;
-    color: ${theme["default"].color.text.black};
-
-    &:focus {
-        color: ${theme["default"].color.text.black};
-    }
-
-    &:hover {
-        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};
-    }
 
     &:first-of-type {
         border-top-left-radius: ${theme["default"].radius.s};
@@ -134,12 +110,10 @@ const AmountSelector = (_a) => {
         }
     };
     return (React__default["default"].createElement(Container, { "data-testid": dataTestId, className: props.className },
-        React__default["default"].createElement(StyledButtonSecondary, { disabled: disabled, onClick: decrease, type: "button", "data-testid": dataTestId &&
-                `${dataTestId}${props.removable && isMinReached(value - step) ? '-remove' : '-decrease'}` },
-            React__default["default"].createElement(Icon["default"], { icon: props.removable && isMinReached(value - step) ? hlTrash["default"] : hlMinus["default"], size: styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 2) })),
+        React__default["default"].createElement(Button, { icon: React__default["default"].createElement(Icon["default"], { icon: props.removable && isMinReached(value - step) ? hlTrash["default"] : hlMinus["default"], size: styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 2) }), variant: "secondary", onClick: decrease, disabled: disabled, type: "button", "data-testid": dataTestId &&
+                `${dataTestId}${props.removable && isMinReached(value - step) ? '-remove' : '-decrease'}` }),
         React__default["default"].createElement(Input, { id: props.id, name: props.name, type: "number", onChange: handleChange, value: value, readOnly: readonly || disabled, disabled: disabled }),
-        React__default["default"].createElement(StyledButtonSecondary, { disabled: disabled, onClick: increase, "data-testid": dataTestId ? `${dataTestId}-increase` : undefined, type: "button" },
-            React__default["default"].createElement(Icon["default"], { icon: hlPlus["default"], size: styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 2) }))));
+        React__default["default"].createElement(Button, { icon: React__default["default"].createElement(Icon["default"], { icon: hlPlus["default"], size: styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 2) }), variant: "secondary", onClick: increase, disabled: disabled, type: "button", "data-testid": dataTestId ? `${dataTestId}-increase` : undefined })));
 };
 
 exports["default"] = AmountSelector;

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

@@ -1,6 +1,6 @@
 import React from 'react';
-declare type ElevationLevel = 'none' | 'low' | 'high' | 'extraHigh';
-export interface Props {
+import type { ElevationLevel } from '../../types/elevation';
+interface Props {
     /**
      * Unique ID for the component
      */
@@ -22,7 +22,7 @@ export interface Props {
     elevation?: ElevationLevel;
     /**
      * Allows to change the shadow map. Order of map is top, right, bottom, and left (clockwise) with space as separator.
-     * Shadows are applied to sides with value `1` (`true`) and ommited from sides with value `0` (`false`)
+     * Shadows are applied to sides with value `1` (`true`) and omitted from sides with value `0` (`false`)
      *
      * @default '1 1 1 1'
      */
@@ -60,6 +60,6 @@ export interface Props {
      */
     className?: string;
 }
-declare const Box: ({ elevation, "data-testid": dataTestId, ...props }: Props) => JSX.Element;
+declare const Box: ({ elevation, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
 /** @component */
 export default Box;

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

@@ -6,6 +6,7 @@ var tslib = require('tslib');
 var React = require('react');
 var styled = require('styled-components');
 var theme = require('../../themes/theme.js');
+var common = require('../../utils/common.js');
 var styledUtils = require('../../utils/styledUtils.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -13,26 +14,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-const getShadowStyle = ({ $elevation, shadow, }) => {
-    const shadowConfig = {
-        none: [0, 0, 0],
-        low: [0, 2, 16, `${theme["default"].color.default.black}0f`],
-        high: [0, 6, 24, `${theme["default"].color.default.black}14`],
-        extraHigh: [0, 8, 64, `${theme["default"].color.default.black}29`],
-    };
-    const sidesMap = shadow === null || shadow === void 0 ? void 0 : shadow.split(' ').map(Number);
-    const clipSize = sidesMap &&
-        shadowConfig[$elevation]
-            .filter((arg) => typeof arg === 'number')
-            .reduce((sum, v) => sum + v);
-    const boxShadow = `box-shadow: ${shadowConfig[$elevation].join('px ')};`;
-    const clipPath = sidesMap && clipSize
-        ? `clip-path: inset(${sidesMap
-            .map(val => (val ? `-${clipSize}px` : '0px'))
-            .join(' ')});`
-        : '';
-    return `${boxShadow}${clipPath}`;
-};
 const BoxWrapper = styled__default["default"].div `
     border: 1px solid ${theme["default"].color.line.L04};
     ${({ width }) => width && `width: ${width}`};
@@ -41,7 +22,7 @@ const BoxWrapper = styled__default["default"].div `
     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' && getShadowStyle({ $elevation, shadow })}
+    ${({ $elevation, shadow }) => $elevation !== 'none' && common.getElevationShadow({ elevation: $elevation, shadow })}
 `;
 const Box = (_a) => {
     var { elevation = 'none', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["elevation", 'data-testid']);

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

@@ -1,5 +1,5 @@
 import React from 'react';
-declare type ButtonType = 'submit' | 'button' | 'reset';
+type ButtonType = 'submit' | 'button' | 'reset';
 export interface Props {
     /**
      * Unique ID for the component
@@ -95,6 +95,6 @@ export declare const shade: {
     };
 };
 /** @visibleName Button */
-declare const Button: ({ type, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, ...props }: Props) => JSX.Element;
+declare const Button: ({ type, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, ...props }: Props) => React.JSX.Element;
 /** @component */
 export default Button;

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import type { Props as ButtonProps } from './Button';
+type ButtonArrowDirection = 'up' | 'right' | 'down' | 'left';
+type ButtonArrowVariant = 'primary' | 'secondary';
+type Props = ({
+    /**
+     * Allows to change the direction of chevron icon.
+     * Either `direction` or `icon` has to be defined
+     *
+     * @param {ButtonArrowDirection} up Uses `hlChevronUp` icon as content of component
+     * @param {ButtonArrowDirection} right Uses `hlChevronRight` icon as content of component
+     * @param {ButtonArrowDirection} down Uses `hlChevronDown` icon as content of component
+     * @param {ButtonArrowDirection} left Uses `hlChevronLeft` icon as content of component
+     */
+    direction: ButtonArrowDirection;
+    icon?: never;
+} | {
+    /**
+     * Allows to change the content of component.
+     * Either `icon` or `direction` has to be defined
+     *
+     * @type Icon | undefined
+     */
+    icon: React.ReactNode;
+    direction?: never;
+}) & Omit<ButtonProps, 'children' | 'small' | 'fullWidth' | 'loading' | 'data-no-close'> & {
+    /**
+     * Allows to change the styling of component
+     *
+     * @param {ButtonArrowVariant} primary Using extended `ButtonPrimary` styles with circle shape
+     * @param {ButtonArrowVariant} secondary Using extended `ButtonSecondary` styles
+     *
+     * @default 'primary'
+     */
+    variant?: ButtonArrowVariant;
+};
+/** @visibleName Button Arrow */
+declare const ButtonArrow: ({ variant, "data-testid": dataTestId, "data-track-value": dataTrackValue, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default ButtonArrow;

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

@@ -0,0 +1,84 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var styled = require('styled-components');
+var theme = require('../../themes/theme.js');
+var styledUtils = require('../../utils/styledUtils.js');
+var Icon = require('../Icon/Icon.js');
+var hlChevronDown = require('../Icons/hlChevronDown.js');
+var hlChevronLeft = require('../Icons/hlChevronLeft.js');
+var hlChevronRight = require('../Icons/hlChevronRight.js');
+var hlChevronUp = require('../Icons/hlChevronUp.js');
+var ButtonPrimary = require('./ButtonPrimary.js');
+var ButtonSecondary = require('./ButtonSecondary.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const iconsMap = {
+    up: hlChevronUp["default"],
+    right: hlChevronRight["default"],
+    down: hlChevronDown["default"],
+    left: hlChevronLeft["default"],
+};
+const overrideStyles = `
+    display: flex;
+    min-width: initial;
+    width: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 3.2)};
+    height: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 3.2)};
+    padding: initial;
+    text-align: center;
+    vertical-align: middle;
+    justify-content: center;
+    align-items: center;
+`;
+const buttonsMap = {
+    primary: styled__default["default"](ButtonPrimary["default"]) `
+        ${overrideStyles};
+        border-radius: ${theme["default"].radius.circle};
+
+        &:disabled,
+        &[disabled] {
+            color: ${theme["default"].color.text.black};
+        }
+    `,
+    secondary: styled__default["default"](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 {
+            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};
+        }
+    `,
+};
+/** @visibleName Button Arrow */
+const ButtonArrow = (_a) => {
+    var { variant = 'primary', 'data-testid': dataTestId, 'data-track-value': dataTrackValue } = _a, props = tslib.__rest(_a, ["variant", 'data-testid', 'data-track-value']);
+    const Element = buttonsMap[variant];
+    return (React__default["default"].createElement(Element, { id: props.id, href: props.href, 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 }, props.direction ? (React__default["default"].createElement(Icon["default"], { icon: iconsMap[props.direction], size: "1rem" })) : (React__default["default"].isValidElement(props.icon) &&
+        props.icon.type === Icon["default"] &&
+        props.icon)));
+};
+
+exports["default"] = ButtonArrow;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import type { Props as ButtonProps } from './Button';
 interface Props extends Pick<ButtonProps, 'id' | 'name' | 'children' | 'onClick' | 'onMouseDown' | 'className' | 'data-testid'> {
     /**
@@ -7,6 +7,6 @@ interface Props extends Pick<ButtonProps, 'id' | 'name' | 'children' | 'onClick'
     'aria-label'?: string;
 }
 /** @visibleName Button Close */
-declare const ButtonClose: ({ "data-testid": dataTestId, "aria-label": ariaLabel, ...props }: Props) => JSX.Element;
+declare const ButtonClose: ({ "data-testid": dataTestId, "aria-label": ariaLabel, ...props }: Props) => React.JSX.Element;
 /** @component */
 export default ButtonClose;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import type { Props as IconProps } from '../Icon/Icon';
 import type { Props as ButtonProps } from './Button';
 interface Props extends Omit<ButtonProps, 'fullWidth'> {
@@ -16,6 +16,6 @@ interface Props extends Omit<ButtonProps, 'fullWidth'> {
     hideChildrenMobile?: boolean;
 }
 /** @visibleName Button Icon */
-declare const ButtonIcon: ({ icon, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, ...props }: Props) => JSX.Element;
+declare const ButtonIcon: ({ icon, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, ...props }: Props) => React.JSX.Element;
 /** @component */
 export default ButtonIcon;

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

@@ -12,47 +12,45 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 /** @visibleName Button Primary */
 const ButtonPrimary = styled__default["default"](Button["default"]) `
-    && {
+    color: ${theme["default"].color.text.white};
+    background-color: ${theme["default"].color.default.pink};
+    border: 2px solid ${theme["default"].color.default.pink};
+
+    &:focus {
         color: ${theme["default"].color.text.white};
         background-color: ${theme["default"].color.default.pink};
-        border: 2px solid ${theme["default"].color.default.pink};
+    }
 
-        &:focus {
-            color: ${theme["default"].color.text.white};
-            background-color: ${theme["default"].color.default.pink};
-        }
+    &:hover {
+        color: ${theme["default"].color.text.white};
+        background-color: ${Button.shade.pink.darker};
+        border: 2px solid ${Button.shade.pink.darker};
+    }
 
-        &:hover {
-            color: ${theme["default"].color.text.white};
-            background-color: ${Button.shade.pink.darker};
-            border: 2px solid ${Button.shade.pink.darker};
-        }
+    &:active {
+        color: ${theme["default"].color.text.white};
+        background-color: ${Button.shade.pink.lighter};
+        border: 2px solid ${Button.shade.pink.lighter};
+    }
 
-        &:active {
-            color: ${theme["default"].color.text.white};
-            background-color: ${Button.shade.pink.lighter};
-            border: 2px solid ${Button.shade.pink.lighter};
-        }
+    &:disabled,
+    &[disabled] {
+        background-color: ${theme["default"].color.default.pink + theme["default"].color.transparency.T30};
+        border: 2px solid ${theme["default"].color.default.pink + theme["default"].color.transparency.T30};
+        background-clip: padding-box;
+    }
 
-        &:disabled,
-        &[disabled] {
-            background-color: ${theme["default"].color.default.pink + theme["default"].color.transparency.T30};
-            border: 2px solid ${theme["default"].color.default.pink + theme["default"].color.transparency.T30};
-            background-clip: padding-box;
+    ${({ loading }) => loading &&
+    `
+        &:focus {
+            border-color: ${theme["default"].color.default.pink};
+            outline: none;
         }
 
-        ${({ loading }) => loading &&
-    `
-            &:focus {
-                border-color: ${theme["default"].color.default.pink};
-                outline: none;
-            }
-
-            > * > * {
-                background-color: ${theme["default"].color.default.white};
-            }
-        `}
-    }
+        > * > * {
+            background-color: ${theme["default"].color.default.white};
+        }
+    `}
 `;
 
 exports["default"] = ButtonPrimary;

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

@@ -1,7 +1,10 @@
-/// <reference types="react" />
+import React from 'react';
 import type { Props as ButtonProps } from './Button';
-declare type Props = Omit<ButtonProps, 'small' | 'fullWidth' | 'loading'>;
-/** @visibleName Button Round */
-declare const ButtonRound: ({ "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, ...props }: Props) => JSX.Element;
+type Props = Omit<ButtonProps, 'small' | 'fullWidth' | 'loading'>;
+/**
+ * @visibleName Button Round
+ * @deprecated Use `ButtonArrow` component
+ */
+declare const ButtonRound: ({ "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, ...props }: Props) => React.JSX.Element;
 /** @component */
 export default ButtonRound;

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

@@ -15,20 +15,21 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 const ButtonElement = styled__default["default"](ButtonPrimary["default"]) `
-    && {
-        display: flex;
-        min-width: initial;
-        width: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 3.2)};
-        height: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 3.2)};
-        border-radius: ${theme["default"].radius.circle};
-        padding: initial;
-        text-align: center;
-        vertical-align: middle;
-        justify-content: center;
-        align-items: center;
-    }
+    display: flex;
+    min-width: initial;
+    width: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 3.2)};
+    height: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 3.2)};
+    border-radius: ${theme["default"].radius.circle};
+    padding: initial;
+    text-align: center;
+    vertical-align: middle;
+    justify-content: center;
+    align-items: center;
 `;
-/** @visibleName Button Round */
+/**
+ * @visibleName Button Round
+ * @deprecated Use `ButtonArrow` component
+ */
 const ButtonRound = (_a) => {
     var { 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue } = _a, props = tslib.__rest(_a, ['data-testid', 'data-no-close', 'data-track-value']);
     return (React__default["default"].createElement(ButtonElement, { 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-no-close": dataNoClose, "data-track-value": dataTrackValue }, props.children));