@dnanpm/styleguide 3.7.0 → 3.7.2

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

@@ -0,0 +1,119 @@
+import React from 'react';
+import type { GroupBase, OptionsOrGroups, Props as ReactSelectProps } from 'react-select';
+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
+     */
+    inputId: ReactSelectProps['inputId'];
+    /**
+     * Array of options that populate the select menu
+     */
+    options: OptionsOrGroups<Option, Group>;
+    /**
+     * Default value of select menu
+     *
+     * @default undefined
+     */
+    value?: ReactSelectProps<Option>['value'];
+    /**
+     * Text of the select element label
+     */
+    label?: string;
+    /**
+     * Text of placeholder for the select value
+     */
+    placeholder?: ReactSelectProps['placeholder'];
+    /**
+     * Text to display when there are no options
+     */
+    noOptionsText?: string;
+    /**
+     * On select change callback
+     */
+    onChange: ReactSelectProps<Option, IsMulti>['onChange'];
+    /**
+     * On input change callback
+     */
+    onInputChange?: ReactSelectProps['onInputChange'];
+    /**
+     * Allows to attach selectbox options menu to specific HTML element
+     * Useful when used in modals
+     *
+     * @default selectbox-container
+     */
+    menuPortalTarget?: ReactSelectProps['menuPortalTarget'];
+    /**
+     * Allows to place selectbox options menu above or below the selectbox control
+     *
+     * @param {MenuPlacement} top Opens options menu above the control
+     * @param {MenuPlacement} bottom Opens options menu below the control
+     *
+     * @default 'auto'
+     */
+    menuPlacement?: ReactSelectProps['menuPlacement'];
+    /**
+     * Displays loading indicator (PixelLoader) instead of selectbox
+     *
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Allows to enable search functionality
+     *
+     * @default false
+     */
+    isSearchable?: boolean;
+    /**
+     * Allows to clear selected value
+     *
+     * @default false
+     */
+    isClearable?: boolean;
+    /**
+     * Allows to select multiple options
+     *
+     * @default false
+     */
+    isMulti?: IsMulti;
+    /**
+     * Allows to disable the component functionality
+     *
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Allows to set selectbox as mandatory
+     *
+     * @default false
+     */
+    isRequired?: boolean;
+    /**
+     * Allows to set selectbox to error state
+     *
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * Text of the error message when selectbox 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 SelectBox: <Option extends SelectboxOption = SelectboxOption, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ noOptionsText, "data-testid": dataTestId, ...props }: Props<Option, IsMulti, Group>) => React.JSX.Element;
+export default SelectBox;

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

@@ -21,96 +21,96 @@ var Select__default = /*#__PURE__*/_interopDefaultLegacy(Select);
 const FieldContainer = styled["default"].div `
     color: ${theme["default"].color.text.black};
     margin-bottom: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)};
-`;
+`;
 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.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({ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: `0 ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)}`, width: '100%', minHeight: 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}`, overflow: 'auto' }, (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, 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 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: icons.Close, 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: icons.Error, color: theme["default"].color.notification.error, position: "right" })),
-        selectProps.isDisabled && React__default["default"].createElement(Icon["default"], { icon: icons.Lock, 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: icons.Close })));
-};
-const DropdownIndicator = (_a) => {
-    var { selectProps } = _a, dropdownIndicatorProps = tslib.__rest(_a, ["selectProps"]);
-    const getIcon = () => {
-        if (selectProps.isSearchable) {
-            return icons.Search;
-        }
-        return selectProps.menuIsOpen ? icons.ChevronUp : icons.ChevronDown;
-    };
-    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() }))));
-};
-const SelectBox = (_a) => {
-    var { noOptionsText = '', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["noOptionsText", 'data-testid']);
-    const getNoOptionsText = () => noOptionsText;
-    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));
+`;
+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({ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: `0 ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)}`, width: '100%', minHeight: 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}`, overflow: 'auto' }, (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, 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 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: icons.Close, 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: icons.Error, color: theme["default"].color.notification.error, position: "right" })),
+        selectProps.isDisabled && React__default["default"].createElement(Icon["default"], { icon: icons.Lock, 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: icons.Close })));
+};
+const DropdownIndicator = (_a) => {
+    var { selectProps } = _a, dropdownIndicatorProps = tslib.__rest(_a, ["selectProps"]);
+    const getIcon = () => {
+        if (selectProps.isSearchable) {
+            return icons.Search;
+        }
+        return selectProps.menuIsOpen ? icons.ChevronUp : icons.ChevronDown;
+    };
+    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() }))));
+};
+const SelectBox = (_a) => {
+    var { noOptionsText = '', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["noOptionsText", 'data-testid']);
+    const getNoOptionsText = () => noOptionsText;
+    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;

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

@@ -0,0 +1,42 @@
+import * as React from 'react';
+interface Props {
+    /**
+     * Unique ID for the checkbox (switch) element
+     */
+    id: string;
+    /**
+     * Name of the checkbox (switch) element
+     */
+    name?: string;
+    /**
+     * Text of the checkbox (switch) element label
+     */
+    label?: string;
+    /**
+     * On checkbox (switch) element change callback
+     */
+    onChange?: (isChecked: boolean) => void;
+    /**
+     * Allows to set the switch as checked
+     *
+     * @default false
+     */
+    isChecked?: boolean;
+    /**
+     * Allows to disable the component functionality
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+}
+declare const Switch: ({ onChange, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default Switch;

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

@@ -29,18 +29,18 @@ function _interopNamespace(e) {
 
 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 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 `
     display: inline-flex;
     min-height: ${railHeight}rem;
     position: relative;
     cursor: pointer;
     user-select: none;
-`;
+`;
 const Button = styled["default"].div `
     height: ${height}rem;
     transition: transform 0.3s;
@@ -55,7 +55,7 @@ const Button = styled["default"].div `
         z-index: 2;
         left: ${isChecked ? -borderSize * 2 : 0}rem;
     `};
-`;
+`;
 const Checkbox = styled["default"].input `
     opacity: 0;
     position: absolute;
@@ -77,14 +77,14 @@ const Checkbox = styled["default"].input `
         pointer-events: none;
         background-color: ${({ checked }) => checked && checked ? theme["default"].color.default.pink : theme["default"].color.line.L01}${theme["default"].color.transparency.T40};
     }
-`;
+`;
 const LabelWrapper = styled["default"](LabelText["default"]) `
     position: relative;
     cursor: pointer;
     padding-top: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 0.4)};
     padding-left: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 6)};
     user-select: none;
-`;
+`;
 const Rail = styled["default"].div `
     width: ${railWidth}rem;
     position: absolute;
@@ -98,20 +98,20 @@ const Rail = styled["default"].div `
         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']);
-    const handleChange = () => {
-        if (onChange && !props.disabled) {
-            onChange(!props.isChecked);
-        }
-    };
-    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)));
+`;
+const Switch = (_a) => {
+    var { onChange, 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["onChange", 'data-testid']);
+    const handleChange = () => {
+        if (onChange && !props.disabled) {
+            onChange(!props.isChecked);
+        }
+    };
+    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;

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

@@ -0,0 +1,75 @@
+import type { MouseEvent, ReactNode } from 'react';
+import React from 'react';
+type Type = 'box' | 'panel' | 'underlined';
+/**
+ * @deprecated Use `box`, `panel` or `underlined` types
+ */
+type TypeDeprecated = 'default' | 'gray';
+export interface Props {
+    /**
+     * Unique ID for the component
+     */
+    id?: string;
+    /**
+     * Allows to define tab label
+     */
+    label: string;
+    /**
+     * Allows to change the styling of component
+     *
+     * @param {Type} box Uses Box component as wrapper for content container
+     * @param {Type} panel Content container remains unstyled
+     * @param {Type} underlined Tab label is visually similar to anchor, with content container unstyled
+     *
+     * @param {TypeDeprecated} default DEPRECATED Use `box` type
+     * @param {TypeDeprecated} gray DEPRECATED Use `box`, `panel` or `underlined` types
+     *
+     * @default 'box'
+     */
+    type?: Type | TypeDeprecated;
+    /**
+     * Style of the tab
+     *
+     * @deprecated Use `type` property
+     */
+    tabStyle?: Type;
+    /**
+     * Content of the component
+     */
+    children?: ReactNode;
+    /**
+     * Allows to define currently active tab
+     *
+     * @deprecated Use `isActive` property
+     */
+    activeTab?: string;
+    /**
+     * Allows to set tab as active
+     */
+    isActive?: boolean;
+    /**
+     * Allows to enable updated internal state management.
+     * Note: In updated internal state management, this component acts as truly stateless and can be controlled with `isActive` property.
+     *
+     * @deprecated Will be removed in next major release
+     */
+    isStateless?: boolean;
+    /**
+     * On tab label click callback
+     *
+     * @deprecated Parameter `tab` has been deprecated. Use `e` parameter instead
+     */
+    onClick?: (tab: string, e?: MouseEvent<HTMLElement>) => void;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+}
+/** @visibleName Tab */
+declare const Tab: ({ type, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default Tab;

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

@@ -14,7 +14,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-// TODO: Change to button HTML element as a part of https://jira.dna.fi/browse/STYLE-622
+// TODO: Change to button HTML element as a part of https://jira.dna.fi/browse/STYLE-622
 const TabLabel = styled["default"].li `
     display: inline-block;
     list-style: none;
@@ -27,7 +27,7 @@ const TabLabel = styled["default"].li `
     border-bottom: 0 none;
     padding: 0.625rem 1.25rem;
     cursor: pointer;
-`;
+`;
 const TabStyle = styled["default"].li `
     display: inline-block;
     list-style: none;
@@ -39,62 +39,62 @@ const TabStyle = styled["default"].li `
     line-height: ${theme["default"].lineHeight.default};
     font-weight: ${theme["default"].fontWeight.book};
 
-    ${({ isActive }) => isActive &&
+    ${({ isActive }) => isActive &&
     `
             color: ${theme["default"].color.text.pink};
             background-color: ${theme["default"].color.background.sand.E01};
         `}
 
-    ${({ $type }) => $type === 'underlined' &&
+    ${({ $type }) => $type === 'underlined' &&
     `
             padding: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1.6)} 0;
         `}
     
-    ${({ isActive, $type }) => isActive &&
-    $type === 'underlined' &&
+    ${({ isActive, $type }) => isActive &&
+    $type === 'underlined' &&
     `
             border-bottom: 2px solid ${theme["default"].color.default.pink};
             background-color: transparent;
         `}
-`;
+`;
 const ContentContainer = styled["default"].div `
-    ${({ $type }) => {
-    if ($type === 'box' || $type === 'default') {
+    ${({ $type }) => {
+    if ($type === 'box' || $type === 'default') {
         return `
                 border-top-left-radius: 0;
-            `;
-    }
-    if ($type === 'panel') {
+            `;
+    }
+    if ($type === 'panel') {
         return `
                 border-top: 1px solid ${theme["default"].color.line.L03};
-            `;
-    }
-    if ($type === 'underlined' || $type === 'gray') {
+            `;
+    }
+    if ($type === 'underlined' || $type === 'gray') {
         return `
                 margin-top: ${theme["default"].grid.gutter};
-            `;
-    }
-    return '';
+            `;
+    }
+    return '';
 }}
-`;
-/** @visibleName Tab */
-const Tab = (_a) => {
-    var { type = 'box', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["type", 'data-testid']);
-    const onClickHandler = (e) => {
-        if (props.onClick) {
-            props.onClick(props.label, e);
-        }
-    };
-    return type === 'box' || type === 'default' || type === 'panel' ? (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(TabLabel, { role: "tab", id: props.id, "$type": type, "aria-selected": props.activeTab ? props.activeTab === props.label : props.isActive, isActive: props.activeTab ? props.activeTab === props.label : props.isActive, onClick: onClickHandler }, props.label),
-        props.isStateless &&
-            (props.children && (props.activeTab === props.label || props.isActive) ? (React__default["default"].createElement(ContentContainer, { role: "tabpanel", "$type": props.tabStyle || type, as: (type === 'box' || type === 'default') && !props.tabStyle
-                    ? Box["default"]
-                    : undefined }, props.children)) : (React__default["default"].createElement(Divider["default"], { margin: "0" }))))) : (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(TabStyle, { role: "tab", id: props.id, "$type": props.tabStyle || type, "aria-selected": props.activeTab ? props.activeTab === props.label : props.isActive, isActive: props.activeTab ? props.activeTab === props.label : props.isActive, onClick: onClickHandler }, props.label),
-        props.isStateless &&
-            props.children &&
-            (props.activeTab === props.label || props.isActive) && (React__default["default"].createElement(ContentContainer, { role: "tabpanel", "$type": props.tabStyle || type }, props.children))));
+`;
+/** @visibleName Tab */
+const Tab = (_a) => {
+    var { type = 'box', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["type", 'data-testid']);
+    const onClickHandler = (e) => {
+        if (props.onClick) {
+            props.onClick(props.label, e);
+        }
+    };
+    return type === 'box' || type === 'default' || type === 'panel' ? (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(TabLabel, { role: "tab", id: props.id, "$type": type, "aria-selected": props.activeTab ? props.activeTab === props.label : props.isActive, isActive: props.activeTab ? props.activeTab === props.label : props.isActive, onClick: onClickHandler }, props.label),
+        props.isStateless &&
+            (props.children && (props.activeTab === props.label || props.isActive) ? (React__default["default"].createElement(ContentContainer, { role: "tabpanel", "$type": props.tabStyle || type, as: (type === 'box' || type === 'default') && !props.tabStyle
+                    ? Box["default"]
+                    : undefined }, props.children)) : (React__default["default"].createElement(Divider["default"], { margin: "0" }))))) : (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(TabStyle, { role: "tab", id: props.id, "$type": props.tabStyle || type, "aria-selected": props.activeTab ? props.activeTab === props.label : props.isActive, isActive: props.activeTab ? props.activeTab === props.label : props.isActive, onClick: onClickHandler }, props.label),
+        props.isStateless &&
+            props.children &&
+            (props.activeTab === props.label || props.isActive) && (React__default["default"].createElement(ContentContainer, { role: "tabpanel", "$type": props.tabStyle || type }, props.children))));
 };
 
 exports["default"] = Tab;