@dnanpm/styleguide 3.2.0 → 3.3.1

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

@@ -1,101 +1,101 @@
-import type { MouseEvent, ReactNode } from 'react';
-import React from 'react';
-type ButtonType = 'submit' | 'button' | 'reset';
-export interface Props {
-    /**
-     * Unique ID for the component
-     */
-    id?: string;
-    /**
-     *  Name of the button element
-     */
-    name?: string;
-    /**
-     * Allows to change the HTML type of button element. Ignored when `href` is defined
-     *
-     * @param {ButtonType} submit Button submits the form data
-     * @param {ButtonType} button No functionality when pressed
-     * @param {ButtonType} reset Button resets all the controls to their initial values
-     *
-     * @default 'submit'
-     */
-    type?: ButtonType;
-    /**
-     * Allows to change the type of resulting HTML element from button (`<button></button>`) to anchor (`<a href="..."></a>`)
-     */
-    href?: string;
-    /**
-     * Content of Button component
-     */
-    children?: ReactNode;
-    /**
-     * On Button click callback
-     */
-    onClick?: (e: MouseEvent<HTMLElement>) => void;
-    /**
-     * On Button mouse down callback
-     */
-    onMouseDown?: (e: MouseEvent<HTMLElement>) => void;
-    /**
-     * Allows to change version of Button component to small
-     */
-    small?: boolean;
-    /**
-     * Allows to change styling of Button component to for dark backgrounds
-     */
-    darkBg?: boolean;
-    /**
-     * Allows to change width of Button component to size of its wrapper
-     */
-    fullWidth?: boolean;
-    /**
-     * Allows to disable the component functionality. Ignored when `href` is defined
-     *
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Displays loading indicator (PixelLoader) instead of children
-     *
-     * @default false
-     */
-    loading?: boolean;
-    /**
-     * Allows to pass a custom className
-     */
-    className?: string;
-    /**
-     * Adds data attribute `data-no-close` to button and children wrapper
-     *
-     * @deprecated Nominated for removal due to proposed changes in functionality (https://jira.dna.fi/browse/STYLE-233)
-     */
-    'data-no-close'?: string;
-    /**
-     * Adds data attribute `data-track-value` to button
-     */
-    'data-track-value'?: string;
-    /**
-     * Allows to pass testid string for testing purposes
-     */
-    'data-testid'?: string;
-}
-export declare const shade: {
-    pink: {
-        darker: string;
-        lighter: string;
-    };
-    plum: {
-        darker: string;
-        lighter: string;
-    };
-    sand: {
-        E02: {
-            darker: string;
-            lighter: string;
-        };
-    };
-};
-/** @visibleName Button */
-declare const Button: ({ type, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, ...props }: Props) => React.JSX.Element;
-/** @component */
-export default Button;
+import type { MouseEvent, ReactNode } from 'react';
+import React from 'react';
+type ButtonType = 'submit' | 'button' | 'reset';
+export interface Props {
+    /**
+     * Unique ID for the component
+     */
+    id?: string;
+    /**
+     *  Name of the button element
+     */
+    name?: string;
+    /**
+     * Allows to change the HTML type of button element. Ignored when `href` is defined
+     *
+     * @param {ButtonType} submit Button submits the form data
+     * @param {ButtonType} button No functionality when pressed
+     * @param {ButtonType} reset Button resets all the controls to their initial values
+     *
+     * @default 'submit'
+     */
+    type?: ButtonType;
+    /**
+     * Allows to change the type of resulting HTML element from button (`<button></button>`) to anchor (`<a href="..."></a>`)
+     */
+    href?: string;
+    /**
+     * Content of Button component
+     */
+    children?: ReactNode;
+    /**
+     * On Button click callback
+     */
+    onClick?: (e: MouseEvent<HTMLElement>) => void;
+    /**
+     * On Button mouse down callback
+     */
+    onMouseDown?: (e: MouseEvent<HTMLElement>) => void;
+    /**
+     * Allows to change version of Button component to small
+     */
+    small?: boolean;
+    /**
+     * Allows to change styling of Button component to for dark backgrounds
+     */
+    darkBg?: boolean;
+    /**
+     * Allows to change width of Button component to size of its wrapper
+     */
+    fullWidth?: boolean;
+    /**
+     * Allows to disable the component functionality. Ignored when `href` is defined
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Displays loading indicator (PixelLoader) instead of children
+     *
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Adds data attribute `data-no-close` to button and children wrapper
+     *
+     * @deprecated Nominated for removal due to proposed changes in functionality (https://jira.dna.fi/browse/STYLE-233)
+     */
+    'data-no-close'?: string;
+    /**
+     * Adds data attribute `data-track-value` to button
+     */
+    'data-track-value'?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+}
+export declare const shade: {
+    pink: {
+        darker: string;
+        lighter: string;
+    };
+    plum: {
+        darker: string;
+        lighter: string;
+    };
+    sand: {
+        E02: {
+            darker: string;
+            lighter: string;
+        };
+    };
+};
+/** @visibleName Button */
+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/Button.js

@@ -14,23 +14,23 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-// 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',
-        },
-    },
-};
+// 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__default["default"].button `
     display: inline-block;
     font-family: ${theme["default"].fontFamily.default};
@@ -78,8 +78,8 @@ const Element = styled__default["default"].button `
         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
+            ${({ darkBg }) => darkBg
+    ? theme["default"].color.default.white + theme["default"].color.transparency.T90
     : shade.plum.lighter};
         outline: none;
     }
@@ -88,13 +88,13 @@ const Element = styled__default["default"].button `
     &[disabled] {
         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
+            ${({ darkBg }) => darkBg
+    ? theme["default"].color.default.white + theme["default"].color.transparency.T30
     : theme["default"].color.default.plum + theme["default"].color.transparency.T30};
         pointer-events: none;
     }
 
-    ${({ href }) => href &&
+    ${({ href }) => href &&
     `
         text-align: center;
 
@@ -104,7 +104,7 @@ const Element = styled__default["default"].button `
 
     `}
 
-    ${({ $loading }) => $loading &&
+    ${({ $loading }) => $loading &&
     `
         pointer-events: none;
 
@@ -119,14 +119,14 @@ const Element = styled__default["default"].button `
             display: inline-flex;
         }
     `}
-`;
-/** @visibleName Button */
-const Button = (_a) => {
-    var { type = 'submit', 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue } = _a, props = tslib.__rest(_a, ["type", 'data-testid', 'data-no-close', 'data-track-value']);
-    return (React__default["default"].createElement(Element, Object.assign({ id: props.id, as: props.href ? 'a' : undefined, type: props.href ? undefined : type, href: props.href, onClick: props.onClick, onMouseDown: props.onMouseDown, small: props.small, darkBg: props.darkBg, fullWidth: props.fullWidth, "$loading": props.loading, tabIndex: props.loading ? -1 : 0, "data-loading": props.loading, className: props.className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue }, (!props.href && {
-        name: props.name,
-        disabled: props.disabled,
-    })), props.loading ? (React__default["default"].createElement(PixelLoader["default"], { color: props.darkBg ? theme["default"].color.default.white : theme["default"].color.default.plum })) : (React__default["default"].createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, props.children))));
+`;
+/** @visibleName Button */
+const Button = (_a) => {
+    var { type = 'submit', 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue } = _a, props = tslib.__rest(_a, ["type", 'data-testid', 'data-no-close', 'data-track-value']);
+    return (React__default["default"].createElement(Element, Object.assign({ id: props.id, as: props.href ? 'a' : undefined, type: props.href ? undefined : type, href: props.href, onClick: props.onClick, onMouseDown: props.onMouseDown, small: props.small, darkBg: props.darkBg, fullWidth: props.fullWidth, "$loading": props.loading, tabIndex: props.loading ? -1 : 0, "data-loading": props.loading, className: props.className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue }, (!props.href && {
+        name: props.name,
+        disabled: props.disabled,
+    })), props.loading ? (React__default["default"].createElement(PixelLoader["default"], { color: props.darkBg ? theme["default"].color.default.white : theme["default"].color.default.plum })) : (React__default["default"].createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, props.children))));
 };
 
 exports["default"] = Button;

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

@@ -1,41 +1,41 @@
-import type { ReactNode } from 'react';
-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: 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;
+import type { ReactNode } from 'react';
+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 `ChevronUp` icon as content of component
+     * @param {ButtonArrowDirection} right Uses `ChevronRight` icon as content of component
+     * @param {ButtonArrowDirection} down Uses `ChevronDown` icon as content of component
+     * @param {ButtonArrowDirection} left Uses `ChevronLeft` 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: 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

@@ -3,15 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
+var icons = require('@dnanpm/icons');
 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');
 
@@ -20,12 +17,12 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 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 iconsMap = {
+    up: icons.ChevronUp,
+    right: icons.ChevronRight,
+    down: icons.ChevronDown,
+    left: icons.ChevronLeft,
+};
 const overrideStyles = `
     display: flex;
     min-width: initial;
@@ -36,8 +33,8 @@ const overrideStyles = `
     vertical-align: middle;
     justify-content: center;
     align-items: center;
-`;
-const buttonsMap = {
+`;
+const buttonsMap = {
     primary: styled__default["default"](ButtonPrimary["default"]) `
         ${overrideStyles};
         border-radius: ${theme["default"].radius.circle};
@@ -46,7 +43,7 @@ const buttonsMap = {
         &[disabled] {
             color: ${theme["default"].color.text.black};
         }
-    `,
+    `,
     secondary: styled__default["default"](ButtonSecondary["default"]) `
         ${overrideStyles};
         color: ${theme["default"].color.text.black};
@@ -70,13 +67,13 @@ const buttonsMap = {
         &[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.isValidElement(props.icon) && props.icon.type === Icon["default"] && props.icon)));
+    `,
+};
+/** @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.isValidElement(props.icon) && props.icon.type === Icon["default"] && props.icon)));
 };
 
 exports["default"] = ButtonArrow;

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

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

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

@@ -22,11 +22,11 @@ const ButtonElement = styled["default"].button `
     background: none;
     border: none;
     padding: 0;
-`;
-/** @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));
+`;
+/** @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));
 };
 
 exports["default"] = ButtonClose;

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

@@ -1,21 +1,21 @@
-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'> {
-    /**
-     * Icon shown in icon button component
-     *
-     * @default `hlPen`
-     */
-    icon?: IconProps['icon'];
-    /**
-     * Allows to hide passed children on mobile screen size view (<576px)
-     *
-     * @default false
-     */
-    hideChildrenMobile?: boolean;
-}
-/** @visibleName Button Icon */
-declare const ButtonIcon: ({ icon, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, ...props }: Props) => React.JSX.Element;
-/** @component */
-export default ButtonIcon;
+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'> {
+    /**
+     * Icon shown in icon button component
+     *
+     * @default `EditUnderline`
+     */
+    icon?: IconProps['icon'];
+    /**
+     * Allows to hide passed children on mobile screen size view (<576px)
+     *
+     * @default false
+     */
+    hideChildrenMobile?: boolean;
+}
+/** @visibleName Button Icon */
+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/ButtonIcon.js

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
+var icons = require('@dnanpm/icons');
 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 hlPen = require('../Icons/hlPen.js');
 var PixelLoader = require('../PixelLoader/PixelLoader.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -44,8 +44,8 @@ const ButtonElement = styled__default["default"].button `
     }
 
     &:active {
-        color: ${({ darkBg }) => darkBg
-    ? theme["default"].color.text.white + theme["default"].color.transparency.T90
+        color: ${({ darkBg }) => darkBg
+    ? theme["default"].color.text.white + theme["default"].color.transparency.T90
     : theme["default"].color.text.black + theme["default"].color.transparency.T80};
     }
 
@@ -55,7 +55,7 @@ const ButtonElement = styled__default["default"].button `
         pointer-events: none;
     }
 
-    ${({ $loading }) => $loading &&
+    ${({ $loading }) => $loading &&
     `
         pointer-events: none;
 
@@ -69,7 +69,7 @@ const ButtonElement = styled__default["default"].button `
         }
     `}
 
-    ${({ hideChildrenMobile }) => hideChildrenMobile &&
+    ${({ hideChildrenMobile }) => hideChildrenMobile &&
     styled.css `
             span.dnasg-icon + span {
                 display: none;
@@ -81,13 +81,13 @@ const ButtonElement = styled__default["default"].button `
             }
         `}
         `}
-`;
-/** @visibleName Button Icon */
-const ButtonIcon = (_a) => {
-    var { icon = hlPen["default"], 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue } = _a, props = tslib.__rest(_a, ["icon", '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, small: props.small, darkBg: props.darkBg, "$loading": props.loading, tabIndex: props.loading ? -1 : 0, "data-loading": props.loading, disabled: props.disabled, hideChildrenMobile: props.hideChildrenMobile, className: props.className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue }, props.loading ? (React__default["default"].createElement(PixelLoader["default"], { color: props.darkBg ? theme["default"].color.default.white : theme["default"].color.default.black })) : (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 ? 'left' : undefined }),
-        props.children && (React__default["default"].createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, props.children))))));
+`;
+/** @visibleName Button Icon */
+const ButtonIcon = (_a) => {
+    var { icon = icons.EditUnderline, 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue } = _a, props = tslib.__rest(_a, ["icon", '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, small: props.small, darkBg: props.darkBg, "$loading": props.loading, tabIndex: props.loading ? -1 : 0, "data-loading": props.loading, disabled: props.disabled, hideChildrenMobile: props.hideChildrenMobile, className: props.className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue }, props.loading ? (React__default["default"].createElement(PixelLoader["default"], { color: props.darkBg ? theme["default"].color.default.white : theme["default"].color.default.black })) : (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 ? 'left' : undefined }),
+        props.children && (React__default["default"].createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, props.children))))));
 };
 
 exports["default"] = ButtonIcon;

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

@@ -1,5 +1,5 @@
-import Button from './Button';
-/** @visibleName Button Primary */
-declare const ButtonPrimary: typeof Button;
-/** @component */
-export default ButtonPrimary;
+import Button from './Button';
+/** @visibleName Button Primary */
+declare const ButtonPrimary: typeof Button;
+/** @component */
+export default ButtonPrimary;

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

@@ -10,7 +10,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-/** @visibleName Button Primary */
+/** @visibleName Button Primary */
 const ButtonPrimary = styled__default["default"](Button["default"]) `
     color: ${theme["default"].color.text.white};
     background-color: ${theme["default"].color.default.pink};
@@ -40,7 +40,7 @@ const ButtonPrimary = styled__default["default"](Button["default"]) `
         background-clip: padding-box;
     }
 
-    ${({ loading }) => loading &&
+    ${({ loading }) => loading &&
     `
         &:focus {
             border-color: ${theme["default"].color.default.pink};