@dnanpm/styleguide 2.3.0 → 3.1.0

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

@@ -0,0 +1,100 @@
+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?: React.ReactNode;
+    /**
+     * On Button click callback
+     */
+    onClick?: (e: React.MouseEvent<HTMLElement>) => void;
+    /**
+     * On Button mouse down callback
+     */
+    onMouseDown?: (e: React.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/es/components/Button/Button.js

@@ -0,0 +1,123 @@
+import { __rest } from 'tslib';
+import React__default from 'react';
+import styled__default from 'styled-components';
+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',
+        },
+    },
+};
+const Element = styled__default.button `
+    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 {
+        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 {
+        color: ${({ darkBg }) => (darkBg ? theme.color.text.plum : theme.color.text.white)};
+        background-color: ${({ darkBg }) => darkBg ? theme.color.default.white : shade.plum.darker};
+
+        &:focus {
+            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 {
+        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;
+    }
+
+    &:disabled,
+    &[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
+    : theme.color.default.plum + theme.color.transparency.T30};
+        pointer-events: none;
+    }
+
+    ${({ href }) => href &&
+    `
+        text-align: center;
+
+        &:hover {
+            text-decoration: none;
+        }
+
+    `}
+
+    ${({ $loading }) => $loading &&
+    `
+        pointer-events: none;
+
+        &:focus {
+            color: inherit;
+            background-color: transparent;
+            border-color: inherit;
+            outline: none;
+        }
+
+        > * {
+            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))));
+};
+
+export { Button as default, shade };

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

@@ -0,0 +1,75 @@
+import { __rest } from 'tslib';
+import React__default 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 overrideStyles = `
+    display: flex;
+    min-width: initial;
+    width: ${getMultipliedSize(theme.base.baseWidth, 3.2)};
+    height: ${getMultipliedSize(theme.base.baseHeight, 3.2)};
+    padding: initial;
+    text-align: center;
+    vertical-align: middle;
+    justify-content: center;
+    align-items: center;
+`;
+const buttonsMap = {
+    primary: styled__default(ButtonPrimary) `
+        ${overrideStyles};
+        border-radius: ${theme.radius.circle};
+
+        &:disabled,
+        &[disabled] {
+            color: ${theme.color.text.black};
+        }
+    `,
+    secondary: styled__default(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 {
+            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};
+        }
+    `,
+};
+/** @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" })) : (React__default.isValidElement(props.icon) &&
+        props.icon.type === Icon &&
+        props.icon)));
+};
+
+export { ButtonArrow as default };

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

@@ -0,0 +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;

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

@@ -0,0 +1,24 @@
+import { __rest } from 'tslib';
+import React__default from 'react';
+import styled from '../../themes/styled.js';
+import theme from '../../themes/theme.js';
+import { getMultipliedSize } from '../../utils/styledUtils.js';
+
+const ButtonElement = styled.button `
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: ${getMultipliedSize(theme.base.baseHeight, 1)};
+    display: inline-flex;
+    cursor: pointer;
+    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));
+};
+
+export { ButtonClose as default };

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

@@ -0,0 +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;

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

@@ -0,0 +1,84 @@
+import { __rest } from 'tslib';
+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 `
+    display: inline-flex;
+    align-items: center;
+    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)};
+    cursor: pointer;
+    color: ${({ darkBg }) => (darkBg ? theme.color.text.white : theme.color.text.black)};
+    background-color: transparent;
+    border: 2px solid transparent;
+    padding: ${getDividedSize(theme.base.baseWidth, 5)} 0;
+
+    &:focus {
+        border-radius: ${theme.radius.s};
+        text-decoration: underline;
+        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 {
+        text-decoration: underline;
+    }
+
+    &:active {
+        color: ${({ darkBg }) => darkBg
+    ? theme.color.text.white + theme.color.transparency.T90
+    : theme.color.text.black + theme.color.transparency.T80};
+    }
+
+    &:disabled,
+    &[disabled] {
+        color: ${({ darkBg }) => darkBg ? theme.color.text.white + theme.color.transparency.T70 : theme.color.text.gray};
+        pointer-events: none;
+    }
+
+    ${({ $loading }) => $loading &&
+    `
+        pointer-events: none;
+
+        &:focus {
+            border: 2px solid transparent;
+            outline: none;
+        }
+
+        > * {
+            display: inline-flex;
+        }
+    `}
+
+    ${({ hideChildrenMobile }) => hideChildrenMobile &&
+    css `
+            span.dnasg-icon + span {
+                display: none;
+            }
+
+            ${media.sm `
+            span.dnasg-icon + span {
+                display: initial;
+            }
+        `}
+        `}
+`;
+/** @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))))));
+};
+
+export { ButtonIcon as default };

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

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

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

@@ -0,0 +1,48 @@
+import styled__default from 'styled-components';
+import theme from '../../themes/theme.js';
+import Button, { shade } from './Button.js';
+
+/** @visibleName Button Primary */
+const ButtonPrimary = styled__default(Button) `
+    color: ${theme.color.text.white};
+    background-color: ${theme.color.default.pink};
+    border: 2px solid ${theme.color.default.pink};
+
+    &:focus {
+        color: ${theme.color.text.white};
+        background-color: ${theme.color.default.pink};
+    }
+
+    &:hover {
+        color: ${theme.color.text.white};
+        background-color: ${shade.pink.darker};
+        border: 2px solid ${shade.pink.darker};
+    }
+
+    &:active {
+        color: ${theme.color.text.white};
+        background-color: ${shade.pink.lighter};
+        border: 2px solid ${shade.pink.lighter};
+    }
+
+    &:disabled,
+    &[disabled] {
+        background-color: ${theme.color.default.pink + theme.color.transparency.T30};
+        border: 2px solid ${theme.color.default.pink + theme.color.transparency.T30};
+        background-clip: padding-box;
+    }
+
+    ${({ loading }) => loading &&
+    `
+        &:focus {
+            border-color: ${theme.color.default.pink};
+            outline: none;
+        }
+
+        > * > * {
+            background-color: ${theme.color.default.white};
+        }
+    `}
+`;
+
+export { ButtonPrimary as default };

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

@@ -0,0 +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;

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

@@ -0,0 +1,29 @@
+import { __rest } from 'tslib';
+import React__default from 'react';
+import styled__default from 'styled-components';
+import theme from '../../themes/theme.js';
+import { getMultipliedSize } from '../../utils/styledUtils.js';
+import ButtonPrimary from './ButtonPrimary.js';
+
+const ButtonElement = styled__default(ButtonPrimary) `
+    display: flex;
+    min-width: initial;
+    width: ${getMultipliedSize(theme.base.baseWidth, 3.2)};
+    height: ${getMultipliedSize(theme.base.baseHeight, 3.2)};
+    border-radius: ${theme.radius.circle};
+    padding: initial;
+    text-align: center;
+    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));
+};
+
+export { ButtonRound as default };

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

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

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

@@ -0,0 +1,48 @@
+import styled__default from 'styled-components';
+import theme from '../../themes/theme.js';
+import Button, { shade } from './Button.js';
+
+/** @visibleName Button Secondary */
+const ButtonSecondary = styled__default(Button) `
+    color: ${theme.color.text.plum};
+    background-color: ${theme.color.background.sand.E02};
+    border: 2px solid ${theme.color.line.L02};
+
+    &:focus {
+        color: ${theme.color.text.plum};
+        background-color: ${theme.color.background.sand.E02};
+    }
+
+    &:hover {
+        color: ${theme.color.text.plum};
+        background-color: ${shade.sand.E02.darker};
+        border: 2px solid ${shade.sand.E02.darker};
+    }
+
+    &:active {
+        color: ${theme.color.text.plum};
+        background-color: ${shade.sand.E02.lighter};
+        border: 2px solid ${shade.sand.E02.lighter};
+    }
+
+    &:disabled,
+    &[disabled] {
+        background-color: ${theme.color.background.sand.E02 + theme.color.transparency.T30};
+        border: 2px solid ${theme.color.line.L02 + theme.color.transparency.T30};
+        background-clip: padding-box;
+    }
+
+    ${({ loading }) => loading &&
+    `
+        &:focus {
+            border-color: ${theme.color.line.L02};
+            outline: none;
+        }
+
+        > * > * {
+            background-color: ${theme.color.default.plum};
+        }
+    `}
+`;
+
+export { ButtonSecondary as default };

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

@@ -1,19 +1,23 @@
-/// <reference types="react" />
+import React from 'react';
 interface Props {
     /**
      * Unique ID for the input element
      */
     id: string;
     /**
-     * Default value of input element
-     *
-     * @default undefined
+     * Name of the input element
      */
-    value?: boolean;
+    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
      */
@@ -49,6 +53,6 @@ interface Props {
      */
     'data-testid'?: string;
 }
-declare const Checkbox: ({ "data-testid": dataTestId, ...props }: Props) => JSX.Element;
+declare const Checkbox: ({ "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
 /** @component */
 export default Checkbox;