@dnanpm/styleguide 3.2.0 → 3.3.1

package/build/es/components/SecondaryNavigation/SecondaryNavigation.js

@@ -1,12 +1,10 @@
+import { ChevronDown, Check } from '@dnanpm/icons';
 import React__default, { useState, useRef } from 'react';
 import useOutsideClick from '../../hooks/useOutsideClick.js';
 import styled from '../../themes/styled.js';
 import theme from '../../themes/theme.js';
 import { media, getMultipliedSize } from '../../utils/styledUtils.js';
 import Icon from '../Icon/Icon.js';
-import 'tslib';
-import HlCheck from '../Icons/hlCheck.js';
-import hlChevronDown from '../Icons/hlChevronDown.js';
 
 const SecondaryNavigationWrapper = styled.nav `
     font-size: ${theme.fontSize.default};
@@ -18,7 +16,7 @@ const SecondaryNavigationWrapper = styled.nav `
     @media (min-width: ${p => p.collapseSize + 1}px) {
         border-bottom: 1px solid ${theme.color.line.L03};
     }
-`;
+`;
 const MobileSelector = styled.button `
     display: flex;
     align-items: center;
@@ -37,10 +35,10 @@ const MobileSelector = styled.button `
     @media (min-width: ${p => p.collapseSize + 1}px) {
         display: none;
     }
-`;
+`;
 const MobileSelectorTitleWrapper = styled.div `
     display: flex;
-`;
+`;
 const MobileSelectorArrow = styled.span `
     display: flex;
 
@@ -48,7 +46,7 @@ const MobileSelectorArrow = styled.span `
         transition: transform 0.15s ease-in-out;
         transform: rotate(${p => (p.isOpen ? '180deg' : '0deg')});
     }
-`;
+`;
 const MobileSelectorCheck = styled.span `
     margin-left: auto;
 
@@ -57,7 +55,7 @@ const MobileSelectorCheck = styled.span `
             display: none;
         }
     }
-`;
+`;
 const SecondaryNavigationList = styled.ul `
     padding: 0;
     list-style-type: none;
@@ -79,7 +77,7 @@ const SecondaryNavigationList = styled.ul `
         border-bottom: none;
         max-width: ${p => (p.componentMaxWidth ? `${p.componentMaxWidth}px` : 'none')};
     }
-`;
+`;
 const SecondaryNavigationListElement = styled.li `
     margin: 0 ${getMultipliedSize(theme.base.baseWidth, 2)};
     @media (min-width: ${p => p.collapseSize + 1}px) {
@@ -111,7 +109,7 @@ const SecondaryNavigationListElement = styled.li `
             font-weight: ${theme.fontWeight.book};
         }
     }
-`;
+`;
 const IconWrapper = styled.span `
     position: relative;
     display: flex;
@@ -131,53 +129,53 @@ const IconWrapper = styled.span `
         border: 1px solid ${theme.color.default.white};
         background-color: ${theme.color.default.pink};
     }
-`;
-/** @visibleName Secondary Navigation */
-const SecondaryNavigation = ({ currentUrl = '', data, lang = 'fi', nextJSSecondaryNavLink: NextJSSecondaryNavLink, collapseSize = 767, 'data-testid': dataTestId, 'max-width': componentMaxWidth, className, matchFullUrl = true, mobileOnly = false, highlightIds = [], whiteBg = false, }) => {
-    var _a, _b, _c, _d;
-    const [isSecondaryNavOpen, setIsSecondaryNavOpen] = useState(false);
-    const toggleNav = () => {
-        setIsSecondaryNavOpen(!isSecondaryNavOpen);
-    };
-    const closeNav = () => {
-        if (isSecondaryNavOpen) {
-            setIsSecondaryNavOpen(false);
-        }
-    };
-    const ref = useRef(null);
-    useOutsideClick(ref, () => {
-        if (isSecondaryNavOpen) {
-            setIsSecondaryNavOpen(false);
-        }
-    });
-    const selectedElement = (_a = data.pages) === null || _a === void 0 ? void 0 : _a.find(listElement => currentUrl === listElement.urls[lang]);
-    const shouldHighlightSelectedElement = (_b = (selectedElement && highlightIds.some(el => el === selectedElement.id))) !== null && _b !== void 0 ? _b : false;
-    const checkIsMenuItemLinkAbsolute = (menuItemLink) => menuItemLink.includes('http');
-    return (React__default.createElement(SecondaryNavigationWrapper, { ref: ref, collapseSize: collapseSize, "data-testid": dataTestId, className: className, mobileOnly: mobileOnly, whiteBg: whiteBg },
-        selectedElement && (React__default.createElement(MobileSelector, { onClick: toggleNav, collapseSize: collapseSize, "data-testid": "secondary-navigation-dropdown-selector" },
-            React__default.createElement(MobileSelectorTitleWrapper, null,
-                (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.icon) && (React__default.createElement(IconWrapper, { showNotification: shouldHighlightSelectedElement, collapseSize: collapseSize },
-                    React__default.createElement(Icon, { name: selectedElement.icon }))),
-                React__default.createElement("span", null, selectedElement.titles[lang])),
-            React__default.createElement(MobileSelectorArrow, { isOpen: isSecondaryNavOpen },
-                React__default.createElement(Icon, { icon: hlChevronDown })))),
-        React__default.createElement(SecondaryNavigationList, { id: data.name || `secondary-navigation-category-${(_c = data.categoryId) !== null && _c !== void 0 ? _c : ''}`, isOpen: isSecondaryNavOpen, collapseSize: collapseSize, componentMaxWidth: componentMaxWidth, "data-testid": "secondary-nav-menu-ul" }, (_d = data.pages) === null || _d === void 0 ? void 0 : _d.map((listElement, index) => {
-            const linkUrl = listElement.urls[lang];
-            const linkTitle = listElement.titles[lang];
-            const iconName = listElement.icon || '';
-            const isActive = matchFullUrl
-                ? currentUrl === linkUrl
-                : currentUrl.indexOf(linkUrl) > -1;
-            const showNotification = highlightIds.some(el => el === listElement.id);
-            const isMenuItemLinkAbsolute = checkIsMenuItemLinkAbsolute(linkUrl);
-            return (React__default.createElement(SecondaryNavigationListElement, { key: listElement.id, isActive: isActive, onClick: closeNav, collapseSize: collapseSize }, NextJSSecondaryNavLink && !isMenuItemLinkAbsolute ? (React__default.createElement(NextJSSecondaryNavLink, { linkUrl: linkUrl, linkTitle: linkTitle, iconName: iconName, showNotification: showNotification, collapseSize: collapseSize, "data-testid": `secondary-nav-item-link-${index + 1}` }, isActive && (React__default.createElement(MobileSelectorCheck, { collapseSize: collapseSize },
-                React__default.createElement(Icon, { icon: HlCheck }))))) : (React__default.createElement("a", { href: linkUrl, "data-testid": `secondary-nav-item-link-${index + 1}` },
-                iconName && (React__default.createElement(IconWrapper, { showNotification: showNotification, collapseSize: collapseSize },
-                    React__default.createElement(Icon, { name: iconName }))),
-                React__default.createElement("span", null, linkTitle),
-                isActive && (React__default.createElement(MobileSelectorCheck, { collapseSize: collapseSize },
-                    React__default.createElement(Icon, { icon: HlCheck })))))));
-        }))));
+`;
+/** @visibleName Secondary Navigation */
+const SecondaryNavigation = ({ currentUrl = '', data, lang = 'fi', nextJSSecondaryNavLink: NextJSSecondaryNavLink, collapseSize = 767, 'data-testid': dataTestId, 'max-width': componentMaxWidth, className, matchFullUrl = true, mobileOnly = false, highlightIds = [], whiteBg = false, }) => {
+    var _a, _b, _c, _d;
+    const [isSecondaryNavOpen, setIsSecondaryNavOpen] = useState(false);
+    const toggleNav = () => {
+        setIsSecondaryNavOpen(!isSecondaryNavOpen);
+    };
+    const closeNav = () => {
+        if (isSecondaryNavOpen) {
+            setIsSecondaryNavOpen(false);
+        }
+    };
+    const ref = useRef(null);
+    useOutsideClick(ref, () => {
+        if (isSecondaryNavOpen) {
+            setIsSecondaryNavOpen(false);
+        }
+    });
+    const selectedElement = (_a = data.pages) === null || _a === void 0 ? void 0 : _a.find(listElement => currentUrl === listElement.urls[lang]);
+    const shouldHighlightSelectedElement = (_b = (selectedElement && highlightIds.some(el => el === selectedElement.id))) !== null && _b !== void 0 ? _b : false;
+    const checkIsMenuItemLinkAbsolute = (menuItemLink) => menuItemLink.includes('http');
+    return (React__default.createElement(SecondaryNavigationWrapper, { ref: ref, collapseSize: collapseSize, "data-testid": dataTestId, className: className, mobileOnly: mobileOnly, whiteBg: whiteBg },
+        selectedElement && (React__default.createElement(MobileSelector, { onClick: toggleNav, collapseSize: collapseSize, "data-testid": "secondary-navigation-dropdown-selector" },
+            React__default.createElement(MobileSelectorTitleWrapper, null,
+                (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.icon) && (React__default.createElement(IconWrapper, { showNotification: shouldHighlightSelectedElement, collapseSize: collapseSize },
+                    React__default.createElement(Icon, { name: selectedElement.icon }))),
+                React__default.createElement("span", null, selectedElement.titles[lang])),
+            React__default.createElement(MobileSelectorArrow, { isOpen: isSecondaryNavOpen },
+                React__default.createElement(Icon, { icon: ChevronDown })))),
+        React__default.createElement(SecondaryNavigationList, { id: data.name || `secondary-navigation-category-${(_c = data.categoryId) !== null && _c !== void 0 ? _c : ''}`, isOpen: isSecondaryNavOpen, collapseSize: collapseSize, componentMaxWidth: componentMaxWidth, "data-testid": "secondary-nav-menu-ul" }, (_d = data.pages) === null || _d === void 0 ? void 0 : _d.map((listElement, index) => {
+            const linkUrl = listElement.urls[lang];
+            const linkTitle = listElement.titles[lang];
+            const iconName = listElement.icon || '';
+            const isActive = matchFullUrl
+                ? currentUrl === linkUrl
+                : currentUrl.indexOf(linkUrl) > -1;
+            const showNotification = highlightIds.some(el => el === listElement.id);
+            const isMenuItemLinkAbsolute = checkIsMenuItemLinkAbsolute(linkUrl);
+            return (React__default.createElement(SecondaryNavigationListElement, { key: listElement.id, isActive: isActive, onClick: closeNav, collapseSize: collapseSize }, NextJSSecondaryNavLink && !isMenuItemLinkAbsolute ? (React__default.createElement(NextJSSecondaryNavLink, { linkUrl: linkUrl, linkTitle: linkTitle, iconName: iconName, showNotification: showNotification, collapseSize: collapseSize, "data-testid": `secondary-nav-item-link-${index + 1}` }, isActive && (React__default.createElement(MobileSelectorCheck, { collapseSize: collapseSize },
+                React__default.createElement(Icon, { icon: Check }))))) : (React__default.createElement("a", { href: linkUrl, "data-testid": `secondary-nav-item-link-${index + 1}` },
+                iconName && (React__default.createElement(IconWrapper, { showNotification: showNotification, collapseSize: collapseSize },
+                    React__default.createElement(Icon, { name: iconName }))),
+                React__default.createElement("span", null, linkTitle),
+                isActive && (React__default.createElement(MobileSelectorCheck, { collapseSize: collapseSize },
+                    React__default.createElement(Icon, { icon: Check })))))));
+        }))));
 };
 
 export { SecondaryNavigation as default };

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

@@ -1,119 +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;
+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/es/components/Selectbox/Selectbox.js

@@ -1,112 +1,107 @@
 import { __rest } from 'tslib';
+import { Close, Error, Lock, Search, ChevronUp, ChevronDown } from '@dnanpm/icons';
 import React__default from 'react';
 import Select, { defaultTheme, components } from 'react-select';
 import styled from '../../themes/styled.js';
 import theme from '../../themes/theme.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
 import Icon from '../Icon/Icon.js';
-import hlChevronDown from '../Icons/hlChevronDown.js';
-import hlChevronUp from '../Icons/hlChevronUp.js';
-import hlError from '../Icons/hlError.js';
-import hlLock from '../Icons/hlLock.js';
-import hlMagnifyingGlass from '../Icons/hlMagnifyingGlass.js';
-import hlX from '../Icons/hlX.js';
 import LabelText from '../LabelText/LabelText.js';
 import PixelLoader from '../PixelLoader/PixelLoader.js';
 
 const FieldContainer = styled.div `
     color: ${theme.color.text.black};
     margin-bottom: ${getMultipliedSize(theme.base.baseWidth, 1)};
-`;
+`;
 const ErrorMessage = styled.div `
     font-size: ${theme.fontSize.s};
     font-weight: ${theme.fontWeight.medium};
     line-height: ${theme.lineHeight.s};
     color: ${theme.color.notification.error};
     margin-top: ${getMultipliedSize(theme.base.baseHeight, 0.5)};
-`;
-const customTheme = Object.assign(Object.assign({}, defaultTheme), { borderRadius: 0, colors: Object.assign(Object.assign({}, defaultTheme.colors), { primary50: theme.color.background.sand.E02, primary25: theme.color.background.sand.E01, primary: theme.color.background.sand.E02 }) });
-const getStyles = () => ({
-    control: (_styles, state) => (Object.assign(Object.assign({ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: `0 ${getMultipliedSize(theme.base.baseWidth, 1)}`, width: '100%', minHeight: getMultipliedSize(theme.base.baseHeight, 4), backgroundColor: state.isDisabled
-            ? theme.color.background.sand.E01
-            : theme.color.background.white.default, borderRadius: theme.radius.s, border: `1px solid ${theme.color.line.L01}`, overflow: 'auto' }, (state.selectProps.errorState && {
-        borderBottom: `4px solid ${theme.color.notification.error}`,
-    })), (!state.menuIsOpen && {
-        ':focus-within': {
-            border: `2px solid ${theme.color.focus.light}`,
-            boxShadow: `0px 0px 0px 2px ${theme.color.focus.dark}`,
-            outline: 'none',
-        },
-    }))),
-    valueContainer: styles => (Object.assign(Object.assign({}, styles), { padding: 0 })),
-    multiValue: styles => (Object.assign(Object.assign({}, styles), { padding: `0 ${getMultipliedSize(theme.base.baseWidth, 1)}`, backgroundColor: theme.color.background.sand.E02, borderRadius: theme.radius.pill, margin: '2px 6px 2px 0' })),
-    multiValueLabel: styles => (Object.assign(Object.assign({}, styles), { fontSize: theme.fontSize.s, fontWeight: theme.fontWeight.medium, lineHeight: theme.lineHeight.default, alignItems: 'center', color: theme.color.text.black, padding: 0, paddingLeft: 0 })),
-    multiValueRemove: styles => (Object.assign(Object.assign({}, styles), { marginLeft: getMultipliedSize(theme.base.baseWidth, 1), padding: 0, ':hover': {
-            cursor: 'pointer',
-            color: theme.color.text.black,
-            backgroundColor: theme.color.background.sand.E02,
-        } })),
-    placeholder: styles => (Object.assign(Object.assign({}, styles), { color: theme.color.text.black + theme.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.color.text.black, padding: 0, marginLeft: getMultipliedSize(theme.base.baseHeight, 1), ':hover': {
-            color: theme.color.text.black,
-        } })),
-    dropdownIndicator: (styles, { selectProps: { isSearchable } }) => (Object.assign(Object.assign({}, styles), { color: isSearchable ? theme.color.text.pink : theme.color.text.black, padding: 0, marginLeft: getMultipliedSize(theme.base.baseHeight, 1), pointerEvents: 'none', ':hover': {
-            color: theme.color.text.black,
-        } })),
-    menu: (styles, state) => (Object.assign(Object.assign(Object.assign(Object.assign({}, styles), { boxShadow: 'none', margin: '-3px 0 -3px 0', borderRadius: theme.radius.s, border: `1px solid ${theme.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.color.text.black, fontWeight: isSelected ? theme.fontWeight.medium : theme.fontWeight.book, fontSize: theme.fontSize.default, textOverflow: 'ellipsis', whiteSpace: 'pre-wrap', overflow: 'hidden' }), (isDisabled && {
-        cursor: 'not-allowed',
-        color: theme.color.text.black + theme.color.transparency.T30,
-        backgroundColor: theme.color.background.sand.E01 + theme.color.transparency.T30,
-    }))),
-});
-const MultiValueRemove = (_a) => {
-    var multiValueRemoveProps = __rest(_a, []);
-    return components.MultiValueRemove && (React__default.createElement(components.MultiValueRemove, { data: multiValueRemoveProps.data, innerProps: multiValueRemoveProps.innerProps, selectProps: multiValueRemoveProps.selectProps },
-        React__default.createElement(Icon, { icon: hlX, size: "1rem" })));
-};
-const IndicatorsContainer = (_a) => {
-    var { selectProps } = _a, indicatorsContainerProps = __rest(_a, ["selectProps"]);
-    return components.IndicatorsContainer && (React__default.createElement(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.createElement(Icon, { icon: hlError, color: theme.color.notification.error, position: "right" })),
-        selectProps.isDisabled && React__default.createElement(Icon, { icon: hlLock, position: "right" }),
-        indicatorsContainerProps.children));
-};
-const ClearIndicator = (_a) => {
-    var clearIndicatorProps = __rest(_a, []);
-    return components.ClearIndicator && (React__default.createElement(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.createElement(Icon, { icon: hlX })));
-};
-const DropdownIndicator = (_a) => {
-    var { selectProps } = _a, dropdownIndicatorProps = __rest(_a, ["selectProps"]);
-    const getIcon = () => {
-        if (selectProps.isSearchable) {
-            return hlMagnifyingGlass;
-        }
-        return selectProps.menuIsOpen ? hlChevronUp : hlChevronDown;
-    };
-    return (components.DropdownIndicator && (React__default.createElement(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.createElement(Icon, { icon: getIcon(), color: "currentColor", size: "1.5rem" }))));
-};
-const SelectBox = (_a) => {
-    var { noOptionsText = '', 'data-testid': dataTestId } = _a, props = __rest(_a, ["noOptionsText", 'data-testid']);
-    const getNoOptionsText = () => noOptionsText;
-    return !props.isLoading ? (React__default.createElement(FieldContainer, { className: props.className, "data-testid": dataTestId },
-        props.label && (React__default.createElement(LabelText, { htmlFor: props.inputId, status: (props.error && 'error') || undefined, isMandatory: props.isRequired }, props.label)),
-        React__default.createElement(Select, { 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.createElement(ErrorMessage, null, props.errorMessage))) : (React__default.createElement(PixelLoader, null));
+`;
+const customTheme = Object.assign(Object.assign({}, defaultTheme), { borderRadius: 0, colors: Object.assign(Object.assign({}, defaultTheme.colors), { primary50: theme.color.background.sand.E02, primary25: theme.color.background.sand.E01, primary: theme.color.background.sand.E02 }) });
+const getStyles = () => ({
+    control: (_styles, state) => (Object.assign(Object.assign({ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: `0 ${getMultipliedSize(theme.base.baseWidth, 1)}`, width: '100%', minHeight: getMultipliedSize(theme.base.baseHeight, 4), backgroundColor: state.isDisabled
+            ? theme.color.background.sand.E01
+            : theme.color.background.white.default, borderRadius: theme.radius.s, border: `1px solid ${theme.color.line.L01}`, overflow: 'auto' }, (state.selectProps.errorState && {
+        borderBottom: `4px solid ${theme.color.notification.error}`,
+    })), (!state.menuIsOpen && {
+        ':focus-within': {
+            border: `2px solid ${theme.color.focus.light}`,
+            boxShadow: `0px 0px 0px 2px ${theme.color.focus.dark}`,
+            outline: 'none',
+        },
+    }))),
+    valueContainer: styles => (Object.assign(Object.assign({}, styles), { padding: 0 })),
+    multiValue: styles => (Object.assign(Object.assign({}, styles), { padding: `0 ${getMultipliedSize(theme.base.baseWidth, 1)}`, backgroundColor: theme.color.background.sand.E02, borderRadius: theme.radius.pill, margin: '2px 6px 2px 0' })),
+    multiValueLabel: styles => (Object.assign(Object.assign({}, styles), { fontSize: theme.fontSize.s, fontWeight: theme.fontWeight.medium, lineHeight: theme.lineHeight.default, alignItems: 'center', color: theme.color.text.black, padding: 0, paddingLeft: 0 })),
+    multiValueRemove: styles => (Object.assign(Object.assign({}, styles), { marginLeft: getMultipliedSize(theme.base.baseWidth, 1), padding: 0, ':hover': {
+            cursor: 'pointer',
+            color: theme.color.text.black,
+            backgroundColor: theme.color.background.sand.E02,
+        } })),
+    placeholder: styles => (Object.assign(Object.assign({}, styles), { color: theme.color.text.black + theme.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.color.text.black, padding: 0, marginLeft: getMultipliedSize(theme.base.baseHeight, 1), ':hover': {
+            color: theme.color.text.black,
+        } })),
+    dropdownIndicator: (styles, { selectProps: { isSearchable } }) => (Object.assign(Object.assign({}, styles), { color: isSearchable ? theme.color.text.pink : theme.color.text.black, padding: 0, marginLeft: getMultipliedSize(theme.base.baseHeight, 1), pointerEvents: 'none', ':hover': {
+            color: theme.color.text.black,
+        } })),
+    menu: (styles, state) => (Object.assign(Object.assign(Object.assign(Object.assign({}, styles), { boxShadow: 'none', margin: '-3px 0 -3px 0', borderRadius: theme.radius.s, border: `1px solid ${theme.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.color.text.black, fontWeight: isSelected ? theme.fontWeight.medium : theme.fontWeight.book, fontSize: theme.fontSize.default, textOverflow: 'ellipsis', whiteSpace: 'pre-wrap', overflow: 'hidden' }), (isDisabled && {
+        cursor: 'not-allowed',
+        color: theme.color.text.black + theme.color.transparency.T30,
+        backgroundColor: theme.color.background.sand.E01 + theme.color.transparency.T30,
+    }))),
+});
+const MultiValueRemove = (_a) => {
+    var multiValueRemoveProps = __rest(_a, []);
+    return components.MultiValueRemove && (React__default.createElement(components.MultiValueRemove, { data: multiValueRemoveProps.data, innerProps: multiValueRemoveProps.innerProps, selectProps: multiValueRemoveProps.selectProps },
+        React__default.createElement(Icon, { icon: Close, size: "1rem" })));
+};
+const IndicatorsContainer = (_a) => {
+    var { selectProps } = _a, indicatorsContainerProps = __rest(_a, ["selectProps"]);
+    return components.IndicatorsContainer && (React__default.createElement(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.createElement(Icon, { icon: Error, color: theme.color.notification.error, position: "right" })),
+        selectProps.isDisabled && React__default.createElement(Icon, { icon: Lock, position: "right" }),
+        indicatorsContainerProps.children));
+};
+const ClearIndicator = (_a) => {
+    var clearIndicatorProps = __rest(_a, []);
+    return components.ClearIndicator && (React__default.createElement(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.createElement(Icon, { icon: Close })));
+};
+const DropdownIndicator = (_a) => {
+    var { selectProps } = _a, dropdownIndicatorProps = __rest(_a, ["selectProps"]);
+    const getIcon = () => {
+        if (selectProps.isSearchable) {
+            return Search;
+        }
+        return selectProps.menuIsOpen ? ChevronUp : ChevronDown;
+    };
+    return (components.DropdownIndicator && (React__default.createElement(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.createElement(Icon, { icon: getIcon() }))));
+};
+const SelectBox = (_a) => {
+    var { noOptionsText = '', 'data-testid': dataTestId } = _a, props = __rest(_a, ["noOptionsText", 'data-testid']);
+    const getNoOptionsText = () => noOptionsText;
+    return !props.isLoading ? (React__default.createElement(FieldContainer, { className: props.className, "data-testid": dataTestId },
+        props.label && (React__default.createElement(LabelText, { htmlFor: props.inputId, status: (props.error && 'error') || undefined, isMandatory: props.isRequired }, props.label)),
+        React__default.createElement(Select, { 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.createElement(ErrorMessage, null, props.errorMessage))) : (React__default.createElement(PixelLoader, null));
 };
 
 export { SelectBox as default };

package/build/es/components/Selectbox/__tests__/Selectbox.spec.d.ts

@@ -1 +1 @@
-import '@testing-library/jest-dom';
+import '@testing-library/jest-dom';