@dnanpm/styleguide 2.3.0 → 3.0.0

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

@@ -1,13 +1,14 @@
 /// <reference types="react" />
 import type { GroupBase, OptionsOrGroups, Props as ReactSelectProps } from 'react-select';
-interface CustomDropDownIndicator {
-    color?: string;
-    iconSize?: string;
-}
 interface SelectboxOption {
     label: string;
     value: string;
 }
+declare module 'react-select/dist/declarations/src/Select' {
+    interface Props<Option extends SelectboxOption = SelectboxOption, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> {
+        errorState?: boolean;
+    }
+}
 interface Props<Option extends SelectboxOption = SelectboxOption, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> {
     /**
      * Unique ID for the select element
@@ -59,15 +60,7 @@ interface Props<Option extends SelectboxOption = SelectboxOption, IsMulti extend
      */
     menuPlacement?: ReactSelectProps['menuPlacement'];
     /**
-     * Allows to define icon color and icon size of dropdown indicator
-     *
-     * @default color '#000000'
-     * @default iconSize '1.5rem'
-     * @deprecated Icon color and size should use values only according to Selectbox design prototypes
-     */
-    dropDownIndicator?: CustomDropDownIndicator;
-    /**
-     * Displayes loading indicator (PixelLoader) instead of selectbox
+     * Displays loading indicator (PixelLoader) instead of selectbox
      *
      * @default false
      */
@@ -121,5 +114,5 @@ interface Props<Option extends SelectboxOption = SelectboxOption, IsMulti extend
      */
     'data-testid'?: string;
 }
-declare const SelectBox: <Option extends SelectboxOption = SelectboxOption, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ dropDownIndicator, "data-testid": dataTestId, isSearchable, isClearable, noOptionsText, isLoading, isDisabled, isRequired, error, ...props }: Props<Option, IsMulti, Group>) => JSX.Element;
+declare const SelectBox: <Option extends SelectboxOption = SelectboxOption, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ noOptionsText, "data-testid": dataTestId, ...props }: Props<Option, IsMulti, Group>) => JSX.Element;
 export default SelectBox;

package/build/cjs/components/Selectbox/Selectbox.js

@@ -11,7 +11,10 @@ var styledUtils = require('../../utils/styledUtils.js');
 var Icon = require('../Icon/Icon.js');
 var hlChevronDown = require('../Icons/hlChevronDown.js');
 var hlChevronUp = require('../Icons/hlChevronUp.js');
+var hlError = require('../Icons/hlError.js');
+var hlLock = require('../Icons/hlLock.js');
 var hlMagnifyingGlass = require('../Icons/hlMagnifyingGlass.js');
+var hlX = require('../Icons/hlX.js');
 var LabelText = require('../LabelText/LabelText.js');
 var PixelLoader = require('../PixelLoader/PixelLoader.js');
 
@@ -20,73 +23,99 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var Select__default = /*#__PURE__*/_interopDefaultLegacy(Select);
 
-const FieldContainer = styled['default'].div `
-    color: ${props => (props.isDisabled ? props.theme.color.gray40 : props.theme.color.text)};
-    margin-bottom: ${props => styledUtils.getMultipliedSize(props.theme.base.baseWidth, 1)};
-
-    ${LabelText['default']} {
-        color: ${props => (props.error ? props.theme.color.error : 'inherit')};
-    }
-`;
-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-top: ${props => styledUtils.getMultipliedSize(props.theme.base.baseHeight, 0.5)};
+const FieldContainer = styled["default"].div `
+    color: ${theme["default"].color.text.black};
+    margin-bottom: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)};
 `;
-const Mandatory = styled['default'].span `
-    color: ${props => props.theme.color.hotPink};
+const ErrorMessage = styled["default"].div `
+    font-size: ${theme["default"].fontSize.s};
+    font-weight: ${theme["default"].fontWeight.medium};
+    line-height: ${theme["default"].lineHeight.s};
+    color: ${theme["default"].color.notification.error};
+    margin-top: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 0.5)};
 `;
-const customTheme = Object.assign(Object.assign({}, Select.defaultTheme), { borderRadius: 0, colors: Object.assign(Object.assign({}, Select.defaultTheme.colors), { primary50: theme['default'].color.gray10, primary25: theme['default'].color.grayBg, primary: theme['default'].color.gray5 }) });
+const customTheme = Object.assign(Object.assign({}, Select.defaultTheme), { borderRadius: 0, colors: Object.assign(Object.assign({}, Select.defaultTheme.colors), { primary50: theme["default"].color.background.sand.E02, primary25: theme["default"].color.background.sand.E01, primary: theme["default"].color.background.sand.E02 }) });
 const getStyles = () => ({
-    control: (styles, state) => (Object.assign(Object.assign({}, styles), { boxShadow: 'none', height: styledUtils.getMultipliedSize(theme['default'].base.baseHeight, 4), borderColor: state.isFocused && !state.menuIsOpen ? theme['default'].color.gray40 : theme['default'].color.gray25, ':hover': {
-            borderColor: theme['default'].color.gray25,
+    control: (_styles, state) => (Object.assign(Object.assign({ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: `0 ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)}`, width: '100%', height: styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 4), backgroundColor: state.isDisabled
+            ? theme["default"].color.background.sand.E01
+            : theme["default"].color.background.white.default, borderRadius: theme["default"].radius.s, border: `1px solid ${theme["default"].color.line.L01}` }, (state.selectProps.errorState && {
+        borderBottom: `4px solid ${theme["default"].color.notification.error}`,
+    })), (!state.menuIsOpen && {
+        ':focus-within': {
+            border: `2px solid ${theme["default"].color.focus.light}`,
+            boxShadow: `0px 0px 0px 2px ${theme["default"].color.focus.dark}`,
+            outline: 'none',
+        },
+    }))),
+    valueContainer: styles => (Object.assign(Object.assign({}, styles), { padding: 0 })),
+    multiValue: styles => (Object.assign(Object.assign({}, styles), { padding: `0 ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)}`, backgroundColor: theme["default"].color.background.sand.E02, borderRadius: theme["default"].radius.pill, margin: '2px 6px 2px 0' })),
+    multiValueLabel: styles => (Object.assign(Object.assign({}, styles), { fontSize: theme["default"].fontSize.s, fontWeight: theme["default"].fontWeight.medium, lineHeight: theme["default"].lineHeight.default, alignItems: 'center', color: theme["default"].color.text.black, padding: 0, paddingLeft: 0 })),
+    multiValueRemove: styles => (Object.assign(Object.assign({}, styles), { marginLeft: styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1), padding: 0, ':hover': {
+            cursor: 'pointer',
+            color: theme["default"].color.text.black,
+            backgroundColor: theme["default"].color.background.sand.E02,
+        } })),
+    placeholder: styles => (Object.assign(Object.assign({}, styles), { color: theme["default"].color.text.black + theme["default"].color.transparency.T40 })),
+    indicatorSeparator: styles => (Object.assign(Object.assign({}, styles), { width: 0, backgroundColor: 'transparent', border: 'none' })),
+    clearIndicator: styles => (Object.assign(Object.assign({}, styles), { cursor: 'pointer', color: theme["default"].color.text.black, padding: 0, marginLeft: styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1), ':hover': {
+            color: theme["default"].color.text.black,
+        } })),
+    dropdownIndicator: (styles, { selectProps: { isSearchable } }) => (Object.assign(Object.assign({}, styles), { color: isSearchable ? theme["default"].color.text.pink : theme["default"].color.text.black, padding: 0, marginLeft: styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1), pointerEvents: 'none', ':hover': {
+            color: theme["default"].color.text.black,
         } })),
-    menu: styles => (Object.assign(Object.assign({}, styles), { border: `1px solid ${theme['default'].color.gray25}`, boxShadow: 'none', marginTop: '-2px' })),
-    clearIndicator: styles => (Object.assign(Object.assign({}, styles), { cursor: 'pointer' })),
-    indicatorSeparator: styles => (Object.assign(Object.assign({}, styles), { backgroundColor: 'transparent', border: 'none' })),
-    option: (styles, { isDisabled, isSelected }) => (Object.assign(Object.assign({}, styles), { display: 'flex', justifyContent: 'space-between', color: isDisabled ? theme['default'].color.gray40 : theme['default'].color.text, fontWeight: isSelected ? theme['default'].fontWeight.medium : theme['default'].fontWeight.book, fontSize: theme['default'].fontSize.default, textOverflow: 'ellipsis', whiteSpace: 'pre-wrap', overflow: 'hidden', cursor: isDisabled ? 'not-allowed' : 'default' })),
-    dropdownIndicator: (styles, { isDisabled, selectProps: { isSearchable } }) => {
-        const enabledColorsSet = isSearchable ? theme['default'].color.hotPink : theme['default'].color.text;
-        return Object.assign(Object.assign({}, styles), { color: isDisabled ? theme['default'].color.gray40 : enabledColorsSet, pointerEvents: 'none', ':hover': {
-                color: theme['default'].color.text,
-            } });
-    },
+    menu: (styles, state) => (Object.assign(Object.assign(Object.assign(Object.assign({}, styles), { boxShadow: 'none', margin: '-3px 0 -3px 0', borderRadius: theme["default"].radius.s, border: `1px solid ${theme["default"].color.line.L01}` }), (state.placement === 'top' && {
+        borderBottom: 0,
+        borderBottomLeftRadius: 0,
+        borderBottomRightRadius: 0,
+    })), (state.placement === 'bottom' && Object.assign({ borderTop: 0, borderTopLeftRadius: 0, borderTopRightRadius: 0 }, (state.selectProps.errorState && {
+        margin: '-2px 0 -3px 0',
+    }))))),
+    option: (styles, { isDisabled, isSelected }) => (Object.assign(Object.assign(Object.assign({}, styles), { display: 'flex', justifyContent: 'space-between', color: theme["default"].color.text.black, fontWeight: isSelected ? theme["default"].fontWeight.medium : theme["default"].fontWeight.book, fontSize: theme["default"].fontSize.default, textOverflow: 'ellipsis', whiteSpace: 'pre-wrap', overflow: 'hidden' }), (isDisabled && {
+        cursor: 'not-allowed',
+        color: theme["default"].color.text.black + theme["default"].color.transparency.T30,
+        backgroundColor: theme["default"].color.background.sand.E01 + theme["default"].color.transparency.T30,
+    }))),
 });
-const DropdownIndicator = (dropdownIndicatorProps) => {
-    // TODO: Remove once https://jira.dna.fi/browse/STYLE-307 is done
-    // eslint-disable-next-line
-    // @ts-ignore
-    const { customDropDownIndicator } = 
-    // eslint-disable-next-line
-    dropdownIndicatorProps.selectProps;
-    // TODO: Remove once https://jira.dna.fi/browse/STYLE-307 is done
-    // eslint-disable-next-line
-    const { isSearchable, menuIsOpen } = dropdownIndicatorProps.selectProps;
-    const { color = 'currentColor', iconSize = '1.5rem' } = Object.assign({}, customDropDownIndicator);
+const MultiValueRemove = (_a) => {
+    var multiValueRemoveProps = tslib.__rest(_a, []);
+    return Select.components.MultiValueRemove && (React__default["default"].createElement(Select.components.MultiValueRemove, { data: multiValueRemoveProps.data, innerProps: multiValueRemoveProps.innerProps, selectProps: multiValueRemoveProps.selectProps },
+        React__default["default"].createElement(Icon["default"], { icon: hlX["default"], size: "1rem" })));
+};
+const IndicatorsContainer = (_a) => {
+    var { selectProps } = _a, indicatorsContainerProps = tslib.__rest(_a, ["selectProps"]);
+    return Select.components.IndicatorsContainer && (React__default["default"].createElement(Select.components.IndicatorsContainer, { clearValue: indicatorsContainerProps.clearValue, cx: indicatorsContainerProps.cx, getClassNames: indicatorsContainerProps.getClassNames, getStyles: indicatorsContainerProps.getStyles, getValue: indicatorsContainerProps.getValue, hasValue: indicatorsContainerProps.hasValue, isDisabled: selectProps.isDisabled, isMulti: indicatorsContainerProps.isMulti, isRtl: indicatorsContainerProps.isRtl, options: indicatorsContainerProps.options, selectOption: indicatorsContainerProps.selectOption, selectProps: selectProps, setValue: indicatorsContainerProps.setValue, theme: indicatorsContainerProps.theme },
+        selectProps.errorState && (React__default["default"].createElement(Icon["default"], { icon: hlError["default"], color: theme["default"].color.notification.error, position: "right" })),
+        selectProps.isDisabled && React__default["default"].createElement(Icon["default"], { icon: hlLock["default"], position: "right" }),
+        indicatorsContainerProps.children));
+};
+const ClearIndicator = (_a) => {
+    var clearIndicatorProps = tslib.__rest(_a, []);
+    return Select.components.ClearIndicator && (React__default["default"].createElement(Select.components.ClearIndicator, { clearValue: clearIndicatorProps.clearValue, cx: clearIndicatorProps.cx, getClassNames: clearIndicatorProps.getClassNames, getStyles: clearIndicatorProps.getStyles, getValue: clearIndicatorProps.getValue, hasValue: clearIndicatorProps.hasValue, innerProps: clearIndicatorProps.innerProps, isFocused: clearIndicatorProps.isFocused, isMulti: clearIndicatorProps.isMulti, isRtl: clearIndicatorProps.isRtl, options: clearIndicatorProps.options, selectOption: clearIndicatorProps.selectOption, selectProps: clearIndicatorProps.selectProps, setValue: clearIndicatorProps.setValue, theme: clearIndicatorProps.theme },
+        React__default["default"].createElement(Icon["default"], { icon: hlX["default"] })));
+};
+const DropdownIndicator = (_a) => {
+    var { selectProps } = _a, dropdownIndicatorProps = tslib.__rest(_a, ["selectProps"]);
     const getIcon = () => {
-        if (isSearchable) {
-            return hlMagnifyingGlass['default'];
+        if (selectProps.isSearchable) {
+            return hlMagnifyingGlass["default"];
         }
-        return menuIsOpen ? hlChevronUp['default'] : hlChevronDown['default'];
+        return selectProps.menuIsOpen ? hlChevronUp["default"] : hlChevronDown["default"];
     };
-    return (Select.components.DropdownIndicator && (React__default['default'].createElement(Select.components.DropdownIndicator, Object.assign({}, dropdownIndicatorProps),
-        React__default['default'].createElement(Icon['default'], { icon: getIcon(), color: color, size: iconSize }))));
+    return (Select.components.DropdownIndicator && (React__default["default"].createElement(Select.components.DropdownIndicator, { clearValue: dropdownIndicatorProps.clearValue, cx: dropdownIndicatorProps.cx, getClassNames: dropdownIndicatorProps.getClassNames, getStyles: dropdownIndicatorProps.getStyles, getValue: dropdownIndicatorProps.getValue, hasValue: dropdownIndicatorProps.hasValue, innerProps: dropdownIndicatorProps.innerProps, isDisabled: dropdownIndicatorProps.isDisabled, isFocused: dropdownIndicatorProps.isFocused, isMulti: dropdownIndicatorProps.isMulti, isRtl: dropdownIndicatorProps.isRtl, options: dropdownIndicatorProps.options, selectOption: dropdownIndicatorProps.selectOption, selectProps: selectProps, setValue: dropdownIndicatorProps.setValue, theme: dropdownIndicatorProps.theme },
+        React__default["default"].createElement(Icon["default"], { icon: getIcon(), color: "currentColor", size: "1.5rem" }))));
 };
 const SelectBox = (_a) => {
-    var { dropDownIndicator, 'data-testid': dataTestId, isSearchable = false, isClearable = false, noOptionsText = '', isLoading = false, isDisabled = false, isRequired = false, error = false } = _a, props = tslib.__rest(_a, ["dropDownIndicator", 'data-testid', "isSearchable", "isClearable", "noOptionsText", "isLoading", "isDisabled", "isRequired", "error"]);
+    var { noOptionsText = '', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["noOptionsText", 'data-testid']);
     const getNoOptionsText = () => noOptionsText;
-    return (React__default['default'].createElement("div", { className: props.className, "data-testid": dataTestId }, !isLoading ? (React__default['default'].createElement(FieldContainer, { isDisabled: isDisabled, error: error },
-        props.label && (React__default['default'].createElement(LabelText['default'], { htmlFor: props.inputId },
-            props.label,
-            " ",
-            isRequired && React__default['default'].createElement(Mandatory, null, "*"))),
-        React__default['default'].createElement(Select__default['default'], { inputId: props.inputId, styles: getStyles(), theme: customTheme, components: { DropdownIndicator }, 
-            // eslint-disable-next-line
-            // @ts-ignore
-            // TODO: Remove once https://jira.dna.fi/browse/STYLE-307 is done
-            customDropDownIndicator: dropDownIndicator, options: props.options, classNamePrefix: "react_select", onChange: props.onChange, onInputChange: props.onInputChange, value: props.value, placeholder: props.placeholder, noOptionsMessage: getNoOptionsText, menuPortalTarget: props.menuPortalTarget, menuPlacement: props.menuPlacement, isSearchable: isSearchable, isClearable: isClearable, isMulti: props.isMulti, isDisabled: isDisabled }),
-        error && props.errorMessage && (React__default['default'].createElement(ErrorMessage, null, props.errorMessage)))) : (React__default['default'].createElement(PixelLoader['default'], null))));
+    return !props.isLoading ? (React__default["default"].createElement(FieldContainer, { className: props.className, "data-testid": dataTestId },
+        props.label && (React__default["default"].createElement(LabelText["default"], { htmlFor: props.inputId, status: (props.error && 'error') || undefined, isMandatory: props.isRequired }, props.label)),
+        React__default["default"].createElement(Select__default["default"], { inputId: props.inputId, styles: getStyles(), theme: customTheme, components: {
+                MultiValueRemove,
+                IndicatorsContainer,
+                ClearIndicator,
+                DropdownIndicator,
+            }, options: props.options, classNamePrefix: "react_select", onChange: props.onChange, onInputChange: props.onInputChange, value: props.value, placeholder: props.placeholder, noOptionsMessage: getNoOptionsText, menuPortalTarget: props.menuPortalTarget, menuPlacement: props.menuPlacement, isSearchable: Boolean(props.isSearchable), isClearable: Boolean(props.isClearable), isMulti: props.isMulti, isDisabled: Boolean(props.isDisabled), hideSelectedOptions: false, closeMenuOnSelect: !props.isMulti, errorState: props.error }),
+        props.error && props.errorMessage && React__default["default"].createElement(ErrorMessage, null, props.errorMessage))) : (React__default["default"].createElement(PixelLoader["default"], null));
 };
 
-exports.default = SelectBox;
+exports["default"] = SelectBox;

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

@@ -16,13 +16,6 @@ interface Props {
      * On checkbox (switch) element change callback
      */
     onChange?: (isChecked: boolean) => void;
-    /**
-     * Is the switch on?
-     *
-     * @default false
-     * @deprecated Use property `isChecked`
-     */
-    on?: boolean | string;
     /**
      * Allows to set the switch as checked
      *

package/build/cjs/components/Switch/Switch.js

@@ -5,36 +5,58 @@ 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');
+var LabelText = require('../LabelText/LabelText.js');
+
+function _interopNamespace(e) {
+   if (e && e.__esModule) return e;
+   var n = Object.create(null);
+   if (e) {
+      Object.keys(e).forEach(function (k) {
+         if (k !== 'default') {
+            var d = Object.getOwnPropertyDescriptor(e, k);
+            Object.defineProperty(n, k, d.get ? d : {
+               enumerable: true,
+               get: function () { return e[k]; }
+            });
+         }
+      });
+   }
+   n["default"] = e;
+   return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 const height = 1.625; // 26px
 const borderRadius = 1.875; // 30px
 const borderSize = 0.125; // 2px
 const railWidth = 3; // 48px
 const railHeight = height + borderSize * 2; // 30px
-const Container = styled['default'].div `
+const Container = styled["default"].div `
     display: inline-flex;
     min-height: ${railHeight}rem;
     position: relative;
     cursor: pointer;
     user-select: none;
 `;
-const Button = styled['default'].div `
+const Button = styled["default"].div `
     height: ${height}rem;
     transition: transform 0.3s;
     position: absolute;
     content: ' ';
     width: ${height}rem;
     border-radius: 50%;
-    ${({ isChecked, theme }) => `
+    ${({ isChecked }) => `
         transform: translate3d(${isChecked ? railWidth - height : 0}rem, 0, 0);
-        background-color: ${isChecked ? theme.color.hotPink : theme.color.gray25};
-        border: ${borderSize}rem solid ${theme.color.white};
+        background-color: ${isChecked ? theme["default"].color.default.pink : theme["default"].color.line.L01};
+        border: ${borderSize}rem solid ${theme["default"].color.default.white};
         z-index: 2;
         left: ${isChecked ? -borderSize * 2 : 0}rem;
     `};
 `;
-const Checkbox = styled['default'].input `
+const Checkbox = styled["default"].input `
     opacity: 0;
     position: absolute;
     top: 0;
@@ -45,65 +67,51 @@ const Checkbox = styled['default'].input `
     }
     :disabled + label {
         cursor: not-allowed;
-        color: ${props => props.theme.color.gray15};
+        color: ${theme["default"].color.line.L01}${theme["default"].color.transparency.T40};
     }
     :disabled + label > div {
         cursor: not-allowed;
-        border-color: ${props => props && props.checked ? props.theme.color.pink2 : props.theme.color.gray15};
+        border-color: ${({ checked }) => checked && checked ? theme["default"].color.default.pink : theme["default"].color.line.L01}${theme["default"].color.transparency.T40}};
     }
     :disabled + label div div {
         pointer-events: none;
-        background-color: ${props => props && props.checked ? props.theme.color.pink2 : props.theme.color.gray15};
-    }
-
-    &:focus ~ label {
-        ${Button} {
-            background-color: ${props => props && props.checked ? props.theme.color.hotPinkHover : props.theme.color.gray40};
-        }
+        background-color: ${({ checked }) => checked && checked ? theme["default"].color.default.pink : theme["default"].color.line.L01}${theme["default"].color.transparency.T40};
     }
 `;
-const Label = styled['default'].label `
+const LabelWrapper = styled["default"](LabelText["default"]) `
     position: relative;
     cursor: pointer;
-    padding-top: ${props => styledUtils.getMultipliedSize(props.theme.base.baseHeight, 0.4)};
-    padding-left: ${railWidth}rem;
+    padding-top: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 0.4)};
+    padding-left: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 6)};
     user-select: none;
-    color: ${props => props.theme.color.text};
-`;
-const LabelText = styled['default'].div `
-    flex: 1;
-    margin-left: ${props => styledUtils.getMultipliedSize(props.theme.base.baseWidth, 1)};
 `;
-const Rail = styled['default'].div `
+const Rail = styled["default"].div `
     width: ${railWidth}rem;
     position: absolute;
     top: 0;
     left: 0;
     border-radius: ${borderRadius}rem;
     overflow: hidden;
-    ${({ isChecked, theme }) => `
+    ${({ isChecked }) => `
         height: ${railHeight}rem;
-        border: ${borderSize}rem solid ${isChecked ? theme.color.hotPink : theme.color.gray25};
-        background-color: ${theme.color.white};
+        border: ${borderSize}rem solid ${isChecked ? theme["default"].color.default.pink : theme["default"].color.line.L01};
+        background-color: ${theme["default"].color.background.white.default};
         z-index: 0;
    `};
 `;
 const Switch = (_a) => {
     var { onChange, 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["onChange", 'data-testid']);
-    // TODO: Remove once https://jira.dna.fi/browse/STYLE-379 is done
-    // Replace all occurences of `isCheckedInternal` with props.isChecked
-    const isCheckedInternal = Boolean(props.on) || props.isChecked;
     const handleChange = () => {
         if (onChange && !props.disabled) {
-            onChange(!isCheckedInternal);
+            onChange(!props.isChecked);
         }
     };
-    return (React.createElement(Container, { className: props.className, "data-testid": dataTestId },
-        React.createElement(Checkbox, { id: props.id, name: props.name, checked: Boolean(isCheckedInternal), "aria-checked": Boolean(isCheckedInternal), disabled: props.disabled, onChange: handleChange, role: "switch", type: "checkbox" }),
-        React.createElement(Label, { htmlFor: props.id },
-            React.createElement(Rail, { isChecked: isCheckedInternal },
-                React.createElement(Button, { isChecked: isCheckedInternal })),
-            props.label && React.createElement(LabelText, null, props.label))));
+    return (React__namespace.createElement(Container, { className: props.className, "data-testid": dataTestId },
+        React__namespace.createElement(Checkbox, { id: props.id, name: props.name, checked: Boolean(props.isChecked), "aria-checked": Boolean(props.isChecked), disabled: props.disabled, onChange: handleChange, role: "switch", type: "checkbox" }),
+        React__namespace.createElement(LabelWrapper, { htmlFor: props.id },
+            React__namespace.createElement(Rail, { isChecked: props.isChecked },
+                React__namespace.createElement(Button, { isChecked: props.isChecked })),
+            props.label && props.label)));
 };
 
-exports.default = Switch;
+exports["default"] = Switch;

package/build/cjs/components/Tabs/Tab.d.ts

@@ -22,36 +22,92 @@ export declare const TabStyle: import("styled-components").StyledComponent<"li",
         };
     };
     breakpoints: import("../../themes/themeComponents/breakpoints").ViewBreakpoints;
-    button: {
-        border: string;
-    };
     color: {
-        black: string;
-        white: string;
-        text: string;
-        hotPink: string;
-        waterBlue: string;
-        melonYellow: string;
-        slateGray: string;
-        grayWhite: string;
-        hotPinkHover: string;
-        waterBlueHover: string;
-        pink1: string;
-        pink2: string;
-        pinkday: string;
-        info: string;
-        error: string;
-        success: string;
-        warning: string;
-        grayBg: string;
-        gray80: string;
-        gray70: string;
-        gray55: string;
-        gray40: string;
-        gray25: string;
-        gray15: string;
-        gray10: string;
-        gray5: string;
+        default: {
+            pink: string;
+            plum: string;
+            white: string;
+            black: string;
+        };
+        accent: {
+            lemon: string;
+            sky: string;
+            orange: string;
+        };
+        hover: {
+            pink: string;
+        };
+        text: {
+            gray: string;
+            pink: string;
+            plum: string;
+            white: string;
+            black: string;
+        };
+        line: {
+            L01: string;
+            L02: string;
+            L03: string;
+            L04: string;
+        };
+        notification: {
+            info: string;
+            success: string;
+            warning: string;
+            error: string;
+        };
+        background: {
+            sand: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            pink: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            plum: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            lemon: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            sky: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            orange: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            white: {
+                default: string;
+            };
+        };
+        focus: {
+            dark: string;
+            light: string;
+        };
+        transparency: {
+            T0: string;
+            T10: string;
+            T20: string;
+            T30: string;
+            T40: string;
+            T50: string;
+            T60: string;
+            T70: string;
+            T80: string;
+            T90: string;
+            T100: string;
+        };
     };
     fontFamily: {
         default: string;
@@ -109,6 +165,13 @@ export declare const TabStyle: import("styled-components").StyledComponent<"li",
         h2: string;
     };
     media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
+    radius: {
+        default: string;
+        s: string;
+        xs: string;
+        circle: string;
+        pill: string;
+    };
 }, TabStyleProps, never>;
 declare class Tab extends React.PureComponent<TabProps> {
     onClick: () => void;

package/build/cjs/components/Tabs/Tab.js

@@ -4,49 +4,50 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 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 TabStyle = styled['default'].li `
+const TabStyle = styled["default"].li `
     display: inline-block;
     list-style: none;
     cursor: pointer;
-    padding: ${props => `${styledUtils.getMultipliedSize(props.theme.base.baseHeight, 0.8)} ${styledUtils.getMultipliedSize(props.theme.base.baseHeight, 1.6)}`};
-    font-size: ${props => props.theme.fontSize.default};
-    line-height: ${props => props.theme.lineHeight.default};
-    font-weight: ${props => props.theme.fontWeight.book};
-    margin-right: ${props => styledUtils.getMultipliedSize(props.theme.base.baseHeight, 2)};
+    padding: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 0.8)}
+        ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1.6)};
+    color: ${theme["default"].color.text.black};
+    font-size: ${theme["default"].fontSize.default};
+    line-height: ${theme["default"].lineHeight.default};
+    font-weight: ${theme["default"].fontWeight.book};
+    margin-right: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 2)};
 
     &:last-child {
         margin-right: 0;
     }
 
-    ${props => props.isActive &&
-    styled.css `
-            color: ${props.theme.color.hotPink};
-            background-color: ${props.theme.color.gray5};
+    ${({ isActive }) => isActive &&
+    `
+            color: ${theme["default"].color.text.pink};
+            background-color: ${theme["default"].color.background.sand.E01};
         `}
 
     /* Underlined style modifications (legacy) */
-    ${props => props.tabStyle === 'underlined' &&
-    styled.css `
-            padding: ${styledUtils.getMultipliedSize(props.theme.base.baseHeight, 1)} 0;
-            margin-right: ${styledUtils.getMultipliedSize(props.theme.base.baseHeight, 5)};
-            font-size: ${props.theme.fontSize.l};
-            font-weight: ${props.theme.fontWeight.bold};
+    ${({ tabStyle }) => tabStyle === 'underlined' &&
+    `
+            padding: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1.6)} 0;
+            margin-right: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 3)};
         `}
     
-    ${props => props.isActive &&
-    props.tabStyle === 'underlined' &&
-    styled.css `
-            border-bottom: 2px solid ${props.theme.color.hotPink};
+    ${({ isActive, tabStyle }) => isActive &&
+    tabStyle === 'underlined' &&
+    `
+            border-bottom: 2px solid ${theme["default"].color.default.pink};
             background-color: transparent;
         `}
 `;
-class Tab extends React__default['default'].PureComponent {
+class Tab extends React__default["default"].PureComponent {
     constructor() {
         super(...arguments);
         this.onClick = () => {
@@ -58,9 +59,9 @@ class Tab extends React__default['default'].PureComponent {
     }
     render() {
         const { onClick, props: { activeTab, label, tabStyle }, } = this;
-        return (React__default['default'].createElement(TabStyle, { role: "tab", "aria-selected": activeTab === label, isActive: activeTab === label, tabStyle: tabStyle, onClick: onClick }, label));
+        return (React__default["default"].createElement(TabStyle, { role: "tab", "aria-selected": activeTab === label, isActive: activeTab === label, tabStyle: tabStyle, onClick: onClick }, label));
     }
 }
 
 exports.TabStyle = TabStyle;
-exports.default = Tab;
+exports["default"] = Tab;