@dnanpm/styleguide 3.2.0 → 3.3.1

package/build/es/components/Button/Button.js

@@ -5,23 +5,23 @@ import theme from '../../themes/theme.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
 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',
-        },
-    },
-};
+// 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.button `
     display: inline-block;
     font-family: ${theme.fontFamily.default};
@@ -69,8 +69,8 @@ const Element = styled__default.button `
         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
+            ${({ darkBg }) => darkBg
+    ? theme.color.default.white + theme.color.transparency.T90
     : shade.plum.lighter};
         outline: none;
     }
@@ -79,13 +79,13 @@ const Element = styled__default.button `
     &[disabled] {
         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
+            ${({ darkBg }) => darkBg
+    ? theme.color.default.white + theme.color.transparency.T30
     : theme.color.default.plum + theme.color.transparency.T30};
         pointer-events: none;
     }
 
-    ${({ href }) => href &&
+    ${({ href }) => href &&
     `
         text-align: center;
 
@@ -95,7 +95,7 @@ const Element = styled__default.button `
 
     `}
 
-    ${({ $loading }) => $loading &&
+    ${({ $loading }) => $loading &&
     `
         pointer-events: none;
 
@@ -110,14 +110,14 @@ const Element = styled__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 = __rest(_a, ["type", 'data-testid', 'data-no-close', 'data-track-value']);
-    return (React__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.createElement(PixelLoader, { color: props.darkBg ? theme.color.default.white : theme.color.default.plum })) : (React__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 = __rest(_a, ["type", 'data-testid', 'data-no-close', 'data-track-value']);
+    return (React__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.createElement(PixelLoader, { color: props.darkBg ? theme.color.default.white : theme.color.default.plum })) : (React__default.createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, props.children))));
 };
 
 export { Button as default, shade };

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

@@ -1,22 +1,19 @@
 import { __rest } from 'tslib';
+import { ChevronUp, ChevronRight, ChevronDown, ChevronLeft } from '@dnanpm/icons';
 import React__default, { isValidElement } from 'react';
 import styled__default from 'styled-components';
 import theme from '../../themes/theme.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
 import Icon from '../Icon/Icon.js';
-import hlChevronDown from '../Icons/hlChevronDown.js';
-import hlChevronLeft from '../Icons/hlChevronLeft.js';
-import hlChevronRight from '../Icons/hlChevronRight.js';
-import hlChevronUp from '../Icons/hlChevronUp.js';
 import ButtonPrimary from './ButtonPrimary.js';
 import ButtonSecondary from './ButtonSecondary.js';
 
-const iconsMap = {
-    up: hlChevronUp,
-    right: hlChevronRight,
-    down: hlChevronDown,
-    left: hlChevronLeft,
-};
+const iconsMap = {
+    up: ChevronUp,
+    right: ChevronRight,
+    down: ChevronDown,
+    left: ChevronLeft,
+};
 const overrideStyles = `
     display: flex;
     min-width: initial;
@@ -27,8 +24,8 @@ const overrideStyles = `
     vertical-align: middle;
     justify-content: center;
     align-items: center;
-`;
-const buttonsMap = {
+`;
+const buttonsMap = {
     primary: styled__default(ButtonPrimary) `
         ${overrideStyles};
         border-radius: ${theme.radius.circle};
@@ -37,7 +34,7 @@ const buttonsMap = {
         &[disabled] {
             color: ${theme.color.text.black};
         }
-    `,
+    `,
     secondary: styled__default(ButtonSecondary) `
         ${overrideStyles};
         color: ${theme.color.text.black};
@@ -61,13 +58,13 @@ const buttonsMap = {
         &[disabled] {
             border: 1px solid ${theme.color.line.L02 + theme.color.transparency.T30};
         }
-    `,
-};
-/** @visibleName Button Arrow */
-const ButtonArrow = (_a) => {
-    var { variant = 'primary', 'data-testid': dataTestId, 'data-track-value': dataTrackValue } = _a, props = __rest(_a, ["variant", 'data-testid', 'data-track-value']);
-    const Element = buttonsMap[variant];
-    return (React__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.createElement(Icon, { icon: iconsMap[props.direction], size: "1rem" })) : (isValidElement(props.icon) && props.icon.type === Icon && props.icon)));
+    `,
+};
+/** @visibleName Button Arrow */
+const ButtonArrow = (_a) => {
+    var { variant = 'primary', 'data-testid': dataTestId, 'data-track-value': dataTrackValue } = _a, props = __rest(_a, ["variant", 'data-testid', 'data-track-value']);
+    const Element = buttonsMap[variant];
+    return (React__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.createElement(Icon, { icon: iconsMap[props.direction], size: "1rem" })) : (isValidElement(props.icon) && props.icon.type === Icon && props.icon)));
 };
 
 export { ButtonArrow as default };

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

@@ -14,11 +14,11 @@ const ButtonElement = styled.button `
     background: none;
     border: none;
     padding: 0;
-`;
-/** @visibleName Button Close */
-const ButtonClose = (_a) => {
-    var { 'data-testid': dataTestId, 'aria-label': ariaLabel } = _a, props = __rest(_a, ['data-testid', 'aria-label']);
-    return (React__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 = __rest(_a, ['data-testid', 'aria-label']);
+    return (React__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));
 };
 
 export { ButtonClose as default };

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

@@ -1,10 +1,10 @@
 import { __rest } from 'tslib';
+import { EditUnderline } from '@dnanpm/icons';
 import React__default from 'react';
 import styled__default, { css } from 'styled-components';
 import theme from '../../themes/theme.js';
 import { getDividedSize, media } from '../../utils/styledUtils.js';
 import Icon from '../Icon/Icon.js';
-import hlPen from '../Icons/hlPen.js';
 import PixelLoader from '../PixelLoader/PixelLoader.js';
 
 const ButtonElement = styled__default.button `
@@ -35,8 +35,8 @@ const ButtonElement = styled__default.button `
     }
 
     &:active {
-        color: ${({ darkBg }) => darkBg
-    ? theme.color.text.white + theme.color.transparency.T90
+        color: ${({ darkBg }) => darkBg
+    ? theme.color.text.white + theme.color.transparency.T90
     : theme.color.text.black + theme.color.transparency.T80};
     }
 
@@ -46,7 +46,7 @@ const ButtonElement = styled__default.button `
         pointer-events: none;
     }
 
-    ${({ $loading }) => $loading &&
+    ${({ $loading }) => $loading &&
     `
         pointer-events: none;
 
@@ -60,7 +60,7 @@ const ButtonElement = styled__default.button `
         }
     `}
 
-    ${({ hideChildrenMobile }) => hideChildrenMobile &&
+    ${({ hideChildrenMobile }) => hideChildrenMobile &&
     css `
             span.dnasg-icon + span {
                 display: none;
@@ -72,13 +72,13 @@ const ButtonElement = styled__default.button `
             }
         `}
         `}
-`;
-/** @visibleName Button Icon */
-const ButtonIcon = (_a) => {
-    var { icon = hlPen, 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue } = _a, props = __rest(_a, ["icon", 'data-testid', 'data-no-close', 'data-track-value']);
-    return (React__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.createElement(PixelLoader, { color: props.darkBg ? theme.color.default.white : theme.color.default.black })) : (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(Icon, { icon: icon, color: props.darkBg ? theme.color.default.white : theme.color.default.pink, size: props.small ? '1.25rem' : '1.5rem', position: props.children ? 'left' : undefined }),
-        props.children && (React__default.createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, props.children))))));
+`;
+/** @visibleName Button Icon */
+const ButtonIcon = (_a) => {
+    var { icon = EditUnderline, 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue } = _a, props = __rest(_a, ["icon", 'data-testid', 'data-no-close', 'data-track-value']);
+    return (React__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.createElement(PixelLoader, { color: props.darkBg ? theme.color.default.white : theme.color.default.black })) : (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Icon, { icon: icon, color: props.darkBg ? theme.color.default.white : theme.color.default.pink, size: props.small ? '1.25rem' : '1.5rem', position: props.children ? 'left' : undefined }),
+        props.children && (React__default.createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, props.children))))));
 };
 
 export { ButtonIcon as default };

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

@@ -2,7 +2,7 @@ import styled__default from 'styled-components';
 import theme from '../../themes/theme.js';
 import Button, { shade } from './Button.js';
 
-/** @visibleName Button Primary */
+/** @visibleName Button Primary */
 const ButtonPrimary = styled__default(Button) `
     color: ${theme.color.text.white};
     background-color: ${theme.color.default.pink};
@@ -32,7 +32,7 @@ const ButtonPrimary = styled__default(Button) `
         background-clip: padding-box;
     }
 
-    ${({ loading }) => loading &&
+    ${({ loading }) => loading &&
     `
         &:focus {
             border-color: ${theme.color.default.pink};

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

@@ -1,10 +1,10 @@
-import React from 'react';
-import type { Props as ButtonProps } from './Button';
-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;
+import React from 'react';
+import type { Props as ButtonProps } from './Button';
+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/es/components/Button/ButtonRound.js

@@ -16,14 +16,14 @@ const ButtonElement = styled__default(ButtonPrimary) `
     vertical-align: middle;
     justify-content: center;
     align-items: center;
-`;
-/**
- * @visibleName Button Round
- * @deprecated Use `ButtonArrow` component
- */
-const ButtonRound = (_a) => {
-    var { 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue } = _a, props = __rest(_a, ['data-testid', 'data-no-close', 'data-track-value']);
-    return (React__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));
+`;
+/**
+ * @visibleName Button Round
+ * @deprecated Use `ButtonArrow` component
+ */
+const ButtonRound = (_a) => {
+    var { 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue } = _a, props = __rest(_a, ['data-testid', 'data-no-close', 'data-track-value']);
+    return (React__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));
 };
 
 export { ButtonRound as default };

package/build/es/components/Button/ButtonSecondary.d.ts

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

package/build/es/components/Button/ButtonSecondary.js

@@ -2,7 +2,7 @@ import styled__default from 'styled-components';
 import theme from '../../themes/theme.js';
 import Button, { shade } from './Button.js';
 
-/** @visibleName Button Secondary */
+/** @visibleName Button Secondary */
 const ButtonSecondary = styled__default(Button) `
     color: ${theme.color.text.plum};
     background-color: ${theme.color.background.sand.E02};
@@ -32,7 +32,7 @@ const ButtonSecondary = styled__default(Button) `
         background-clip: padding-box;
     }
 
-    ${({ loading }) => loading &&
+    ${({ loading }) => loading &&
     `
         &:focus {
             border-color: ${theme.color.line.L02};

package/build/es/components/Checkbox/Checkbox.d.ts

@@ -1,58 +1,58 @@
-import React from 'react';
-interface Props {
-    /**
-     * Unique ID for the input element
-     */
-    id: string;
-    /**
-     * Name of the input element
-     */
-    name?: string;
-    /**
-     * Text of the label shown next to checkbox
-     */
-    label: string;
-    /**
-     * Default value of input element
-     *
-     * @default undefined
-     */
-    value?: boolean;
-    /**
-     * On checkbox change callback
-     */
-    onChange?: (value: boolean) => void;
-    /**
-     * Allows to disable the checkbox
-     *
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Allows to set checkbox as mandatory
-     *
-     * @default false
-     */
-    required?: boolean;
-    /**
-     * Allows to set checkbox to error state
-     *
-     * @default false
-     */
-    error?: boolean;
-    /**
-     * Text of the error message when checkbox is in error state
-     */
-    errorMessage?: string;
-    /**
-     * Allows to pass a custom className
-     */
-    className?: string;
-    /**
-     * Allows to pass testid string for testing purposes
-     */
-    'data-testid'?: string;
-}
-declare const Checkbox: ({ "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
-/** @component */
-export default Checkbox;
+import React from 'react';
+interface Props {
+    /**
+     * Unique ID for the input element
+     */
+    id: string;
+    /**
+     * Name of the input element
+     */
+    name?: string;
+    /**
+     * Text of the label shown next to checkbox
+     */
+    label: string;
+    /**
+     * Default value of input element
+     *
+     * @default undefined
+     */
+    value?: boolean;
+    /**
+     * On checkbox change callback
+     */
+    onChange?: (value: boolean) => void;
+    /**
+     * Allows to disable the checkbox
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Allows to set checkbox as mandatory
+     *
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Allows to set checkbox to error state
+     *
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * Text of the error message when checkbox is in error state
+     */
+    errorMessage?: string;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+}
+declare const Checkbox: ({ "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default Checkbox;