@dnanpm/styleguide 2.0.1 → 2.2.0

package/build/cjs/components/ProgressIndicator/ProgressIndicator.js

@@ -6,13 +6,16 @@ var React = require('react');
 var styled = require('../../themes/styled.js');
 var styledUtils = require('../../utils/styledUtils.js');
 var Icon = require('../Icon/Icon.js');
-
-const progressBallWidthLarge = 2.5; // 40px
-const progressBallWidthSmall = 1.875; // 30px
-const progressLineTopMarginLarge = 18;
-const progressLineTopMarginSmall = 13;
-const iconSizeLarge = 1;
-const iconSizeSmall = 0.7;
+require('tslib');
+var hlCheck = require('../Icons/hlCheck.js');
+var hlExclamationMark = require('../Icons/hlExclamationMark.js');
+
+const progressBallWidthLarge = '2.5rem'; // 40px
+const progressBallWidthSmall = '1.875rem'; // 30px
+const progressLineTopMarginLarge = '18';
+const progressLineTopMarginSmall = '13';
+const iconSizeLarge = '1.25rem';
+const iconSizeSmall = '1rem';
 const progressBallBorderWidth = 4;
 const progressBallBorderHeight = 4;
 const ProgressBall = styled['default'].span `
@@ -26,19 +29,20 @@ const ProgressBall = styled['default'].span `
     transition: all 0.3s ease 0.3s;
 
     ${({ theme }) => styledUtils.media.sm `
-        width: ${progressBallWidthLarge}rem;
-        height: ${progressBallWidthLarge}rem;
+        width: ${progressBallWidthLarge};
+        height: ${progressBallWidthLarge};
         font-size: ${theme.fontSize.l};
     `};
 
-    svg {
+    span.dnasg-icon,
+    span.dnasg-icon > svg {
         margin: 0 auto;
-        height: ${iconSizeSmall}rem;
-        width: ${iconSizeSmall}rem;
+        height: ${iconSizeSmall};
+        width: ${iconSizeSmall};
 
         ${() => styledUtils.media.sm `
-            height: ${iconSizeLarge}rem;
-            width: ${iconSizeLarge}rem;
+            height: ${iconSizeLarge};
+            width: ${iconSizeLarge};
         `};
     }
 `;
@@ -76,13 +80,14 @@ const Progress = styled['default'].ul `
     justify-content: space-around;
 
     ${ProgressBall} {
-        width: ${p => (p && p.small ? progressBallWidthSmall : progressBallWidthLarge)}rem;
-        height: ${p => (p && p.small ? progressBallWidthSmall : progressBallWidthLarge)}rem;
+        width: ${p => (p && p.small ? progressBallWidthSmall : progressBallWidthLarge)};
+        height: ${p => (p && p.small ? progressBallWidthSmall : progressBallWidthLarge)};
         font-size: ${p => (p && p.small ? p.theme.fontSize.s : p.theme.fontSize.l)};
 
-        svg {
-            height: ${p => (p && p.small ? iconSizeSmall : iconSizeLarge)}rem;
-            width: ${p => (p && p.small ? iconSizeSmall : iconSizeLarge)}rem;
+        span.dnasg-icon,
+        span.dnasg-icon > svg {
+            height: ${p => (p && p.small ? iconSizeSmall : iconSizeLarge)};
+            width: ${p => (p && p.small ? iconSizeSmall : iconSizeLarge)};
         }
     }
 
@@ -124,7 +129,7 @@ const ProgressItem = styled['default'].li `
     padding-bottom: ${({ theme, isSmall }) => isSmall ? 0 : styledUtils.getMultipliedSize(theme.base.baseHeight, 2)};
 
     ${ProgressBall} {
-        cursor: ${({ cursorType }) => (cursorType ? cursorType : 'pointer')};
+        cursor: ${({ cursorType }) => cursorType || 'pointer'};
         border-color: ${({ theme, isActive, isCompleted, isError }) => {
     if (isError) {
         return theme.color.error;
@@ -169,15 +174,15 @@ const ProgressIndicator = props => {
         const isActive = index === activeSlideIndex;
         const isCompleted = index < activeSlideIndex;
         const isError = isActive && currentStatus === 'error';
-        const iconName = isError ? 'exclamationMark' : 'check';
+        const icon = isError ? hlExclamationMark['default'] : hlCheck['default'];
         const handleClick = () => {
             if (onStepChange) {
                 onStepChange(index);
             }
         };
-        return (React.createElement(ProgressItem, { key: index, onClick: handleClick, isActive: isActive, isCompleted: isCompleted, isError: isError, isSmall: small, cursorType: cursorType },
+        return (React.createElement(ProgressItem, { "aria-current": isActive ? 'step' : undefined, cursorType: cursorType, isActive: isActive, isCompleted: isCompleted, isError: isError, isSmall: small, key: `${stepNumber}-${title}`, onClick: handleClick },
             React.createElement(ProgressLine, null),
-            React.createElement(ProgressBall, null, isCompleted || isError ? React.createElement(Icon['default'], { name: iconName }) : stepNumber),
+            React.createElement(ProgressBall, null, isCompleted || isError ? React.createElement(Icon['default'], { icon: icon }) : stepNumber),
             title && React.createElement(ProgressText, { isSmall: small }, title)));
     })));
 };

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 interface Props {
     /**
      * Unique ID for the input element
@@ -21,7 +21,7 @@ interface Props {
     /**
      * On radio button change callback
      */
-    onChange?: (...args: any[]) => any;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     /**
      * Allows to set the radio button as checked
      *

package/build/cjs/components/RadioButton/RadioButton.js

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var tslib = require('tslib');
 var React = require('react');
 var globalStyles = require('../../themes/globalStyles.js');
 var styled = require('../../themes/styled.js');
@@ -12,9 +13,10 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const Container = styled['default'].div `
+    display: flex;
     margin-bottom: ${props => styledUtils.getMultipliedSize(props.theme.base.baseHeight, 0.5)};
 `;
-const Input = styled['default'](globalStyles.CheckboxInput_RadioInput) `
+const Input = styled['default'](globalStyles.CheckboxAndRadioInputCore) `
     border-radius: 50%;
 
     &::before {
@@ -24,10 +26,11 @@ const Input = styled['default'](globalStyles.CheckboxInput_RadioInput) `
     }
 `;
 /** @visibleName Radio Button */
-const RadioButton = ({ 'data-testid': dataTestId, ...props }) => {
+const RadioButton = (_a) => {
+    var { 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ['data-testid']);
     return (React__default['default'].createElement(Container, { className: props.className, "data-testid": dataTestId },
-        React__default['default'].createElement(Input, { id: props.id, type: "radio", name: props.name, checked: props.checked, "aria-checked": props.checked, value: props.value, disabled: props.disabled, onChange: props.onChange, tabIndex: -1, "data-testid": dataTestId && `${dataTestId}-input` }),
-        React__default['default'].createElement("label", { htmlFor: props.id, "aria-checked": props.checked, role: "radio", tabIndex: 0, "data-testid": dataTestId && `${dataTestId}-label` }, props.label)));
+        React__default['default'].createElement(Input, { id: props.id, type: "radio", name: props.name, checked: props.checked, "aria-checked": props.checked, value: props.value, disabled: props.disabled, onChange: props.onChange, "data-testid": dataTestId && `${dataTestId}-input` }),
+        props.label && (React__default['default'].createElement("label", { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label` }, props.label))));
 };
 
 exports.default = RadioButton;

package/build/cjs/components/ReadMore/ReadMore.js

@@ -6,6 +6,9 @@ var React = require('react');
 var styled = require('../../themes/styled.js');
 var styledUtils = require('../../utils/styledUtils.js');
 var Icon = require('../Icon/Icon.js');
+require('tslib');
+var hlChevronDown = require('../Icons/hlChevronDown.js');
+var hlChevronUp = require('../Icons/hlChevronUp.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -29,11 +32,9 @@ const Toggle = styled['default'].div `
     ? styledUtils.getMultipliedSize(p.theme.base.baseHeight, 2)
     : styledUtils.getMultipliedSize(p.theme.base.baseHeight, 10)};
 
-    svg {
-        margin-right: ${p => styledUtils.getMultipliedSize(p.theme.base.baseWidth, 1)};
-    }
     button {
-        // text-transform: uppercase;
+        display: flex;
+        align-items: center;
         cursor: pointer;
         background-color: transparent;
         border: 0;
@@ -56,13 +57,13 @@ const ReadMore = ({ children, showMoreText, showLessText, className, onClick = (
         setExpanded(!expanded);
         onClick(event);
     };
-    const iconName = expanded ? 'chevronUp' : 'chevronDown';
+    const icon = expanded ? hlChevronUp['default'] : hlChevronDown['default'];
     const buttonText = expanded ? showLessText : showMoreText;
     return (React__default['default'].createElement(TruncateContainer, { expanded: expanded, className: className },
         children,
         React__default['default'].createElement(Toggle, { expanded: expanded },
             React__default['default'].createElement("button", { className: "dnasg-label", onClick: toggleTruncate, type: "button" },
-                React__default['default'].createElement(Icon['default'], { name: iconName, size: "0.65em" }),
+                React__default['default'].createElement(Icon['default'], { icon: icon, size: "1rem", position: "left" }),
                 buttonText))));
 };
 

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

@@ -11,10 +11,10 @@ interface Props {
     /**
      * When defined, the text colors in color map are ignored and passed value is used instead
      *
-     * @default 'white'
      * @param {TextColor} text Uses #121212 color code as text color
      * @param {TextColor} white Uses #ffffff color code as text color
      * @param {TextColor} black Uses #000000 color code as text color
+     * @default 'white'
      */
     textColor?: TextColor;
     /**

package/build/cjs/components/Ribbon/Ribbon.js

@@ -2,32 +2,33 @@
 
 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 hlX = require('../Icons/hlX.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 getColorScheme = ({ color, textColor }) => {
+const getColorScheme = ({ color, textColor, }) => {
     const map = {
         text: ['pinkday', 'white', 'pink2', 'grayBg', 'gray15', 'gray10', 'gray5'],
         black: ['grayWhite'],
     };
-    textColor =
-        textColor ||
-            Object.keys(map).find(key => map[key].includes(color)) ||
-            'white';
+    const mappedTextColor = textColor ||
+        Object.keys(map).find(key => map[key].includes(color)) ||
+        'white';
     return `
-        color: ${theme['default'].color[textColor]};
+        color: ${theme['default'].color[mappedTextColor]};
         background: ${theme['default'].color[color]};
 
         a {
-            color: ${theme['default'].color[textColor]};
+            color: ${theme['default'].color[mappedTextColor]};
         };
     }`;
 };
@@ -67,14 +68,15 @@ const CloseButton = styled__default['default'].a `
         top: ${styledUtils.getMultipliedSize(theme['default'].base.baseWidth, 1.2)};
     `}
 `;
-const Ribbon = ({ color = 'info', 'data-testid': dataTestId, ...props }) => {
+const Ribbon = (_a) => {
+    var { color = 'info', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["color", 'data-testid']);
     if (props.dismissed) {
         return null;
     }
     return (React__default['default'].createElement(RibbonWrapper, { className: props.className, color: color, textColor: props.textColor, "data-testid": dataTestId, centered: props.centered },
         React__default['default'].createElement(ContentWrapper, { closeButton: props.closeButton }, props.children),
         props.closeButton ? (React__default['default'].createElement(CloseButton, { onClick: props.onClick },
-            React__default['default'].createElement(Icon['default'], { name: "x", size: "0.75rem", color: "currentColor" }))) : null));
+            React__default['default'].createElement(Icon['default'], { icon: hlX['default'], color: "currentColor" }))) : null));
 };
 
 exports.default = Ribbon;

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { Props as IconProps } from '../Icon/Icon';
 export interface SearchProps {
     /**
      * The input element's name
@@ -12,7 +13,9 @@ export interface SearchProps {
     id?: string;
     /**
      * The input element's value
-     * When specified, it represents the initial value
+     * When specified, it represents the initial value unless `isReactive` property is defined. See `isReactive` property for more info
+     *
+     * @deprecated State management of input value is deprecated and will be removed. Use `isReactive={true}` during transition period
      */
     value?: string;
     /**
@@ -29,12 +32,19 @@ export interface SearchProps {
      * Icon from Icons component shown next to input element
      *
      * @default 'hlMagnifyingGlass'
+     * @deprecated Use property `icon`
      */
     iconName?: string;
+    /**
+     * Icon from Icons component shown next to input element
+     *
+     * @default hlMagnifyingGlass
+     */
+    icon?: IconProps['icon'];
     /**
      * Size of the icon shown next to input element
      *
-     * @default '1.6em'
+     * @default '1.5rem'
      */
     iconSize?: string;
     /**
@@ -44,11 +54,20 @@ export interface SearchProps {
     /**
      * On input element change callback
      */
-    onChange?: (...args: any[]) => any;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     /**
      * On icon element click callback
      */
-    onClick?: (...args: any[]) => any;
+    onClick?: (e: React.MouseEvent<Element, MouseEvent>) => void;
+    /**
+     * If true, internal input value state management is ignored, thus making the component "stateless".
+     * Input value can then be controlled from outside by using the handler functions.
+     *
+     * This is a temporary flag that will be removed in the future versions
+     *
+     * @default false
+     */
+    isReactive?: boolean;
 }
 declare const Search: React.FunctionComponent<SearchProps>;
 /** @component */

package/build/cjs/components/Search/Search.js

@@ -2,10 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var tslib = require('tslib');
 var React = require('react');
 var styled = require('../../themes/styled.js');
 var colors = require('../../themes/themeComponents/colors.js');
 var Icon = require('../Icon/Icon.js');
+var hlMagnifyingGlass = require('../Icons/hlMagnifyingGlass.js');
+var hlX = require('../Icons/hlX.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -17,7 +20,7 @@ const Container = styled['default'].div `
     border-bottom: 2px solid ${props => props.theme.color.hotPink};
     padding: 0.3125rem 0.3125rem 0.6875rem;
 
-    ${Icon['default']} {
+    span.dnasg-icon > svg {
         cursor: pointer;
     }
 `;
@@ -44,23 +47,40 @@ const Input = styled['default'].input `
         display: none;
     }
 `;
-const Search = ({ value = '', iconName = 'hlMagnifyingGlass', iconSize = '1.6em', className, onChange, onClick, ...props }) => {
+const Search = (_a) => {
+    var { value = '', iconName, icon = hlMagnifyingGlass['default'], iconSize = '1.5rem', className, onChange, onClick, isReactive = false } = _a, props = tslib.__rest(_a, ["value", "iconName", "icon", "iconSize", "className", "onChange", "onClick", "isReactive"]);
     const [text, setText] = React.useState(value);
+    const inputRef = React__default['default'].useRef(null);
     const handleChange = (e) => {
-        setText(e.target.value);
+        if (!isReactive) {
+            setText(e.target.value);
+        }
         if (onChange) {
             onChange(e);
         }
     };
     const onIconClick = (e) => {
-        setText('');
+        if (!isReactive) {
+            setText('');
+        }
+        if (inputRef && inputRef.current) {
+            inputRef.current.focus();
+        }
         if (onClick) {
             onClick(e);
         }
     };
+    // TODO: Remove once https://jira.dna.fi/browse/STYLE-334 is done
+    const renderIcon = () => {
+        const inputValue = isReactive ? value : text;
+        if (iconName) {
+            return (React__default['default'].createElement(Icon['default'], { name: inputValue.length ? 'hlX' : iconName, size: iconSize, color: colors['default'].hotPink, onClick: onIconClick }));
+        }
+        return (React__default['default'].createElement(Icon['default'], { icon: inputValue.length ? hlX['default'] : icon, size: iconSize, color: colors['default'].hotPink, onClick: onIconClick }));
+    };
     return (React__default['default'].createElement(Container, { className: className },
-        React__default['default'].createElement(Input, Object.assign({ type: "search", value: text, onChange: handleChange }, props)),
-        React__default['default'].createElement(Icon['default'], { name: text.length ? 'hlX' : iconName, size: iconSize, color: colors['default'].hotPink, onClick: onIconClick })));
+        React__default['default'].createElement(Input, { id: props.id, name: props.name, type: "search", value: isReactive ? value : text, onChange: handleChange, ref: inputRef, placeholder: props.placeholder, autoFocus: props.autoFocus }),
+        renderIcon()));
 };
 
 exports.default = Search;

package/build/cjs/components/SecondaryNavigation/SecondaryNavigation.js

@@ -8,15 +8,17 @@ var styled = require('../../themes/styled.js');
 var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
 var Icon = require('../Icon/Icon.js');
+require('tslib');
+var hlCheck = require('../Icons/hlCheck.js');
+var hlChevronDown = require('../Icons/hlChevronDown.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const SecondaryNavigationWrapper = styled['default'].nav `
-    line-height: 1.2rem;
-    padding: 0;
     font-size: ${theme['default'].fontSize.s};
+    padding: 0;
     background: ${theme['default'].color.white};
     position: relative;
     z-index: 1000;
@@ -28,40 +30,41 @@ const SecondaryNavigationWrapper = styled['default'].nav `
     }
 `;
 const MobileSelector = styled['default'].div `
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: ${theme['default'].fontSize.default};
+    line-height: ${theme['default'].lineHeight.default};
     color: ${theme['default'].color.hotPink};
     padding: 1rem 1.25rem;
-    align-items: center;
-    display: flex;
-    line-height: 1.2rem;
     position: relative;
     border-bottom: 1px solid ${theme['default'].color.hotPink};
     width: 100%;
-    height: 3.25rem;
     &:hover {
         cursor: pointer;
     }
-    svg + span {
-        margin-left: 1rem;
-    }
     @media (min-width: ${p => p.collapseSize + 1}px) {
         display: none;
     }
 `;
+const MobileSelectorTitleWrapper = styled['default'].div `
+    display: flex;
+`;
 const MobileSelectorArrow = styled['default'].span `
-    svg {
-        position: absolute;
-        right: 0.75rem;
-        bottom: 0.75rem;
+    display: flex;
+
+    .dnasg-icon svg {
         transition: transform 0.15s ease-in-out;
         transform: rotate(${p => (p.isOpen ? '180deg' : '0deg')});
     }
 `;
 const MobileSelectorCheck = styled['default'].span `
-    svg {
+    .dnasg-icon {
         position: absolute;
         right: 0;
         bottom: 1rem;
     }
+
     @media (min-width: ${p => p.collapseSize + 1}px) {
         display: none;
     }
@@ -78,12 +81,8 @@ const SecondaryNavigationList = styled['default'].ul `
     position: absolute;
     width: 100%;
     max-height: ${p => (p.isOpen ? '500vh' : '0')};
-    top: 3.25rem;
     border-bottom: ${p => p.isOpen ? `2px solid ${theme['default'].color.gray10}` : `0px solid ${theme['default'].color.white}`};
     @media (min-width: ${p => p.collapseSize + 1}px) {
-        svg {
-            display: none;
-        }
         padding: 0 1rem;
         max-height: none;
         position: static;
@@ -180,12 +179,13 @@ const SecondaryNavigation = ({ currentUrl = '', data, lang = 'fi', nextJSSeconda
     const shouldHighlightSelectedElement = selectedElement && highlightIds.some((el) => el === selectedElement.id);
     return (React__default['default'].createElement(SecondaryNavigationWrapper, { ref: ref, collapseSize: collapseSize, "data-testid": dataTestId, className: className, mobileOnly: mobileOnly },
         selectedElement && (React__default['default'].createElement(MobileSelector, { onClick: toggleNav, collapseSize: collapseSize, "data-testid": "secondary-navigation-dropdown-selector" },
-            selectedElement.icon && selectedElement.icon.length > 0 && (React__default['default'].createElement(IconWrapper, { showNotification: shouldHighlightSelectedElement, collapseSize: collapseSize },
-                React__default['default'].createElement(Icon['default'], { name: selectedElement.icon, size: "1.5em" }))),
-            React__default['default'].createElement("span", null, selectedElement.titles[lang]),
+            React__default['default'].createElement(MobileSelectorTitleWrapper, null,
+                selectedElement.icon && selectedElement.icon.length > 0 && (React__default['default'].createElement(IconWrapper, { showNotification: shouldHighlightSelectedElement, collapseSize: collapseSize },
+                    React__default['default'].createElement(Icon['default'], { name: selectedElement.icon }))),
+                React__default['default'].createElement("span", null, selectedElement.titles[lang])),
             React__default['default'].createElement(MobileSelectorArrow, { isOpen: isSecondaryNavOpen },
-                React__default['default'].createElement(Icon['default'], { name: "hlChevronDown", size: "1.5em" })))),
-        React__default['default'].createElement(SecondaryNavigationList, { id: data.name || 'secondary-navigation-category-' + data.categoryId, isOpen: isSecondaryNavOpen, collapseSize: collapseSize, componentMaxWidth: componentMaxWidth, "data-testid": "secondary-nav-menu-ul" }, data.pages
+                React__default['default'].createElement(Icon['default'], { icon: hlChevronDown['default'] })))),
+        React__default['default'].createElement(SecondaryNavigationList, { id: data.name || `secondary-navigation-category-${data.categoryId}`, isOpen: isSecondaryNavOpen, collapseSize: collapseSize, componentMaxWidth: componentMaxWidth, "data-testid": "secondary-nav-menu-ul" }, data.pages
             ? data.pages.map((listElement, index) => {
                 const linkUrl = listElement.urls[lang];
                 const linkTitle = listElement.titles[lang];
@@ -197,13 +197,13 @@ const SecondaryNavigation = ({ currentUrl = '', data, lang = 'fi', nextJSSeconda
                 const isNextJsLink = NextJSSecondaryNavLink && !isMenuItemLinkAbsolute(linkUrl);
                 return (React__default['default'].createElement(SecondaryNavigationListElement, { key: listElement.id, isActive: isActive, onClick: closeNav, collapseSize: collapseSize },
                     isNextJsLink && (React__default['default'].createElement(NextJSSecondaryNavLink, { linkUrl: linkUrl, linkTitle: linkTitle, iconName: iconName, showNotification: showNotification, collapseSize: collapseSize, "data-testid": `secondary-nav-item-link-${index + 1}` }, isActive && (React__default['default'].createElement(MobileSelectorCheck, { collapseSize: collapseSize },
-                        React__default['default'].createElement(Icon['default'], { name: "hlCheck", size: "1.2em" }))))),
+                        React__default['default'].createElement(Icon['default'], { icon: hlCheck['default'] }))))),
                     !isNextJsLink && (React__default['default'].createElement("a", { href: linkUrl, "data-testid": `secondary-nav-item-link-${index + 1}` },
                         iconName.length > 0 && (React__default['default'].createElement(IconWrapper, { showNotification: showNotification, collapseSize: collapseSize },
-                            React__default['default'].createElement(Icon['default'], { name: iconName, size: "1.5em" }))),
+                            React__default['default'].createElement(Icon['default'], { name: iconName }))),
                         React__default['default'].createElement("span", null, linkTitle),
                         isActive && (React__default['default'].createElement(MobileSelectorCheck, { collapseSize: collapseSize },
-                            React__default['default'].createElement(Icon['default'], { name: "hlCheck", size: "1.2em" })))))));
+                            React__default['default'].createElement(Icon['default'], { icon: hlCheck['default'] })))))));
             })
             : null)));
 };

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

@@ -1,10 +1,14 @@
 /// <reference types="react" />
-import { Props as ReactSelectProps } from 'react-select';
-export interface SelectboxItem {
+import type { GroupBase, OptionsOrGroups, Props as ReactSelectProps } from 'react-select';
+interface CustomDropDownIndicator {
+    color?: string;
+    iconSize?: string;
+}
+interface SelectboxOption {
     label: string;
-    value: any;
+    value: string;
 }
-interface Props {
+interface Props<Option extends SelectboxOption = SelectboxOption, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> {
     /**
      * Unique ID for the select element
      */
@@ -12,13 +16,13 @@ interface Props {
     /**
      * Array of options that populate the select menu
      */
-    options: ReactSelectProps['options'];
+    options: OptionsOrGroups<Option, Group>;
     /**
      * Default value of select menu
      *
      * @default undefined
      */
-    value?: ReactSelectProps['value'];
+    value?: ReactSelectProps<Option>['value'];
     /**
      * Text of the select element label
      */
@@ -34,7 +38,7 @@ interface Props {
     /**
      * On select change callback
      */
-    onChange: (selectedItem: SelectboxItem) => void;
+    onChange: ReactSelectProps<Option, IsMulti>['onChange'];
     /**
      * On input change callback
      */
@@ -49,21 +53,19 @@ interface Props {
     /**
      * Allows to place selectbox options menu above or below the selectbox control
      *
-     * @default 'auto'
      * @param {MenuPlacement} top Opens options menu above the control
      * @param {MenuPlacement} bottom Opens options menu below the control
+     * @default 'auto'
      */
     menuPlacement?: ReactSelectProps['menuPlacement'];
     /**
      * Allows to define icon color and icon size of dropdown indicator
      *
      * @default color '#000000'
-     * @default iconSize '1rem'
+     * @default iconSize '1.5rem'
+     * @deprecated Icon color and size should use values only according to Selectbox design prototypes
      */
-    dropDownIndicator?: {
-        color?: string;
-        iconSize?: string;
-    };
+    dropDownIndicator?: CustomDropDownIndicator;
     /**
      * Displayes loading indicator (PixelLoader) instead of selectbox
      *
@@ -87,7 +89,7 @@ interface Props {
      *
      * @default false
      */
-    isMulti?: boolean;
+    isMulti?: IsMulti;
     /**
      * Allows to disable the component functionality
      *
@@ -119,5 +121,5 @@ interface Props {
      */
     'data-testid'?: string;
 }
-declare const SelectBox: ({ dropDownIndicator, "data-testid": dataTestId, isSearchable, isClearable, isMulti, noOptionsText, isLoading, isDisabled, isRequired, error, ...props }: Props) => JSX.Element;
+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;
 export default SelectBox;