@dnanpm/styleguide 2.3.0 → 3.0.0

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

@@ -0,0 +1,133 @@
+'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 PixelLoader = require('../PixelLoader/PixelLoader.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);
+
+// 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};
+    font-weight: ${theme["default"].fontWeight.bold};
+    font-size: ${({ small }) => (small ? theme["default"].fontSize.s : theme["default"].fontSize.default)};
+    line-height: ${({ small }) => (small ? theme["default"].lineHeight.xs : theme["default"].lineHeight.default)};
+    min-width: ${({ small }) => styledUtils.getMultipliedSize(theme["default"].base.baseWidth, small ? 10 : 12.8)};
+    width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
+    cursor: pointer;
+    color: ${({ darkBg }) => (darkBg ? theme["default"].color.text.white : theme["default"].color.text.plum)};
+    background-color: transparent;
+    border-radius: ${theme["default"].radius.pill};
+    border: 2px solid
+        ${({ darkBg }) => (darkBg ? theme["default"].color.default.white : theme["default"].color.default.plum)};
+    padding: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 0.6)}
+        ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 2)};
+
+    > span {
+        display: inline-flex;
+    }
+
+    &:focus {
+        color: ${({ darkBg }) => (darkBg ? theme["default"].color.text.plum : theme["default"].color.text.white)};
+        background-color: ${({ darkBg }) => darkBg ? theme["default"].color.default.white : shade.plum.darker};
+        border: 2px solid
+            ${({ darkBg }) => (darkBg ? theme["default"].color.focus.dark : theme["default"].color.focus.light)};
+        box-shadow: 0px 0px 0px 2px
+            ${({ darkBg }) => (darkBg ? theme["default"].color.focus.light : theme["default"].color.focus.dark)};
+        outline: none;
+    }
+
+    &:hover {
+        color: ${({ darkBg }) => (darkBg ? theme["default"].color.text.plum : theme["default"].color.text.white)};
+        background-color: ${({ darkBg }) => darkBg ? theme["default"].color.default.white : shade.plum.darker};
+
+        &:focus {
+            border: 2px solid
+                ${({ darkBg }) => (darkBg ? theme["default"].color.focus.dark : theme["default"].color.focus.light)};
+            box-shadow: 0px 0px 0px 2px
+                ${({ darkBg }) => (darkBg ? theme["default"].color.focus.light : theme["default"].color.focus.dark)};
+        }
+    }
+
+    &:active {
+        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
+    : shade.plum.lighter};
+        outline: none;
+    }
+
+    &:disabled,
+    &[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
+    : theme["default"].color.default.plum + theme["default"].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 = 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;
+exports.shade = shade;

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

@@ -0,0 +1,12 @@
+/// <reference types="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) => JSX.Element;
+/** @component */
+export default ButtonClose;

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

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var styled = require('../../themes/styled.js');
+var theme = require('../../themes/theme.js');
+var styledUtils = require('../../utils/styledUtils.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const ButtonElement = styled["default"].button `
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: ${styledUtils.getMultipliedSize(theme["default"].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 = 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

@@ -0,0 +1,21 @@
+/// <reference types="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) => JSX.Element;
+/** @component */
+export default ButtonIcon;

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

@@ -0,0 +1,93 @@
+'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 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 }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const ButtonElement = styled__default["default"].button `
+    display: inline-flex;
+    align-items: center;
+    font-family: ${theme["default"].fontFamily.default};
+    font-weight: ${theme["default"].fontWeight.bold};
+    font-size: ${({ small }) => (small ? theme["default"].fontSize.s : theme["default"].fontSize.default)};
+    line-height: ${({ small }) => (small ? theme["default"].lineHeight.xs : theme["default"].lineHeight.default)};
+    cursor: pointer;
+    color: ${({ darkBg }) => (darkBg ? theme["default"].color.text.white : theme["default"].color.text.black)};
+    background-color: transparent;
+    border: 2px solid transparent;
+    padding: ${styledUtils.getDividedSize(theme["default"].base.baseWidth, 5)} 0;
+
+    &:focus {
+        border-radius: ${theme["default"].radius.s};
+        text-decoration: underline;
+        border: 2px solid
+            ${({ darkBg }) => (darkBg ? theme["default"].color.focus.dark : theme["default"].color.focus.light)};
+        box-shadow: 0px 0px 0px 2px
+            ${({ darkBg }) => (darkBg ? theme["default"].color.focus.light : theme["default"].color.focus.dark)};
+        outline: none;
+    }
+
+    &:hover {
+        text-decoration: underline;
+    }
+
+    &:active {
+        color: ${({ darkBg }) => darkBg
+    ? theme["default"].color.text.white + theme["default"].color.transparency.T90
+    : theme["default"].color.text.black + theme["default"].color.transparency.T80};
+    }
+
+    &:disabled,
+    &[disabled] {
+        color: ${({ darkBg }) => darkBg ? theme["default"].color.text.white + theme["default"].color.transparency.T70 : theme["default"].color.text.gray};
+        pointer-events: none;
+    }
+
+    ${({ $loading }) => $loading &&
+    `
+        pointer-events: none;
+
+        &:focus {
+            border: 2px solid transparent;
+            outline: none;
+        }
+
+        > * {
+            display: inline-flex;
+        }
+    `}
+
+    ${({ hideChildrenMobile }) => hideChildrenMobile &&
+    styled.css `
+            span.dnasg-icon + span {
+                display: none;
+            }
+
+            ${styledUtils.media.sm `
+            span.dnasg-icon + span {
+                display: initial;
+            }
+        `}
+        `}
+`;
+/** @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))))));
+};
+
+exports["default"] = ButtonIcon;

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

@@ -0,0 +1,58 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+var theme = require('../../themes/theme.js');
+var Button = require('./Button.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+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};
+        }
+
+        &: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};
+        }
+
+        &: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;
+            }
+
+            > * > * {
+                background-color: ${theme["default"].color.default.white};
+            }
+        `}
+    }
+`;
+
+exports["default"] = ButtonPrimary;

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

@@ -0,0 +1,7 @@
+/// <reference types="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;
+/** @component */
+export default ButtonRound;

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

@@ -0,0 +1,37 @@
+'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 ButtonPrimary = require('./ButtonPrimary.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 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;
+    }
+`;
+/** @visibleName Button Round */
+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));
+};
+
+exports["default"] = ButtonRound;

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

@@ -0,0 +1,58 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+var theme = require('../../themes/theme.js');
+var Button = require('./Button.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+/** @visibleName Button Secondary */
+const ButtonSecondary = styled__default["default"](Button["default"]) `
+    && {
+        color: ${theme["default"].color.text.plum};
+        background-color: ${theme["default"].color.background.sand.E02};
+        border: 2px solid ${theme["default"].color.line.L02};
+
+        &:focus {
+            color: ${theme["default"].color.text.plum};
+            background-color: ${theme["default"].color.background.sand.E02};
+        }
+
+        &:hover {
+            color: ${theme["default"].color.text.plum};
+            background-color: ${Button.shade.sand.E02.darker};
+            border: 2px solid ${Button.shade.sand.E02.darker};
+        }
+
+        &:active {
+            color: ${theme["default"].color.text.plum};
+            background-color: ${Button.shade.sand.E02.lighter};
+            border: 2px solid ${Button.shade.sand.E02.lighter};
+        }
+
+        &:disabled,
+        &[disabled] {
+            background-color: ${theme["default"].color.background.sand.E02 + theme["default"].color.transparency.T30};
+            border: 2px solid ${theme["default"].color.line.L02 + theme["default"].color.transparency.T30};
+            background-clip: padding-box;
+        }
+
+        ${({ loading }) => loading &&
+    `
+            &:focus {
+                border-color: ${theme["default"].color.line.L02};
+                outline: none;
+            }
+
+            > * > * {
+                background-color: ${theme["default"].color.default.plum};
+            }
+        `}
+    }
+`;
+
+exports["default"] = ButtonSecondary;

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

@@ -5,15 +5,19 @@ interface Props {
      */
     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
      */

package/build/cjs/components/Checkbox/Checkbox.js

@@ -6,6 +6,7 @@ var tslib = require('tslib');
 var React = require('react');
 var globalStyles = require('../../themes/globalStyles.js');
 var styled = require('../../themes/styled.js');
+var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -14,40 +15,38 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 // TODO: Implement proper svg icon after https://jira.dna.fi/browse/STYLE-238 is done
 const SVGIconData = () => {
-    const svg = `
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="1em" height="1em">
-            <path d="M9.57 19.44L3.19 13a.6.6 0 0 1 .81-.84l5.53 5.58 11-10.93a.6.6 0 0 1 .84.85z" />
-        </svg>
-    `;
-    return `data:image/svg+xml,${svg}`;
+    const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="1rem" height="1rem">` +
+        `<path d="M9.57 19.44L3.19 13a.6.6 0 0 1 .81-.84l5.53 5.58 11-10.93a.6.6 0 0 1 .84.85z" />` +
+        `</svg>`;
+    return `data:image/svg+xml,${encodeURIComponent(svg)}`;
 };
-const Container = styled['default'].div `
+const Container = styled["default"].div `
     display: flex;
-    font-size: ${props => props.theme.fontSize.default};
-    line-height: ${props => props.theme.lineHeight.default};
-    margin-bottom: ${props => styledUtils.getMultipliedSize(props.theme.base.baseHeight, 0.5)};
+    font-size: ${theme["default"].fontSize.default};
+    line-height: ${theme["default"].lineHeight.default};
+    margin-bottom: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 0.5)};
 `;
-const Input = styled['default'](globalStyles.CheckboxAndRadioInputCore) `
+const Input = styled["default"](globalStyles.CheckboxAndRadioInputCore) `
     position: relative;
-    top: ${props => styledUtils.getDividedSize(props.theme.base.baseWidth, 5)};
+    top: ${styledUtils.getDividedSize(theme["default"].base.baseWidth, 5)};
 
     &:checked {
         &::before {
-            width: 1em;
-            height: 1em;
+            width: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1.6)};
+            height: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1.6)};
             background-image: url('${SVGIconData}');
         }
     }
 `;
-const Mandatory = styled['default'].span `
-    color: ${props => props.theme.color.hotPink};
-    margin-left: ${props => styledUtils.getMultipliedSize(props.theme.base.baseHeight, 0.5)};
+const Mandatory = styled["default"].span `
+    color: ${theme["default"].color.default.pink};
+    margin-left: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 0.5)};
 `;
-const ErrorMessage = styled['default'].div `
-    font-size: ${props => props.theme.fontSize.s};
-    line-height: ${props => props.theme.lineHeight.s};
-    color: ${props => props.theme.color.error};
-    margin-bottom: ${props => styledUtils.getMultipliedSize(props.theme.base.baseHeight, 0.5)};
+const ErrorMessage = styled["default"].div `
+    font-size: ${theme["default"].fontSize.s};
+    line-height: ${theme["default"].lineHeight.s};
+    color: ${theme["default"].color.notification.error};
+    margin-bottom: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 0.5)};
 `;
 const Checkbox = (_a) => {
     var { 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ['data-testid']);
@@ -56,13 +55,13 @@ const Checkbox = (_a) => {
             props.onChange(!props.value);
         }
     };
-    return (React__default['default'].createElement(React__default['default'].Fragment, null,
-        React__default['default'].createElement(Container, null,
-            React__default['default'].createElement(Input, { id: props.id, className: props.className, type: "checkbox", checked: Boolean(props.value), onChange: handleChange, disabled: props.disabled, "data-testid": dataTestId }),
-            React__default['default'].createElement("label", { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label` },
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(Container, null,
+            React__default["default"].createElement(Input, { id: props.id, name: props.name, type: "checkbox", className: props.className, checked: Boolean(props.value), onChange: handleChange, disabled: props.disabled, "data-testid": dataTestId }),
+            React__default["default"].createElement("label", { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label` },
                 props.label,
-                props.required && React__default['default'].createElement(Mandatory, null, "*"))),
-        props.error && props.errorMessage && (React__default['default'].createElement(ErrorMessage, { "data-testid": dataTestId && `${dataTestId}-error` }, props.errorMessage))));
+                props.required && React__default["default"].createElement(Mandatory, null, "*"))),
+        props.error && props.errorMessage && (React__default["default"].createElement(ErrorMessage, { "data-testid": dataTestId && `${dataTestId}-error` }, props.errorMessage))));
 };
 
-exports.default = Checkbox;
+exports["default"] = Checkbox;