@dnanpm/styleguide 3.2.0 → 3.3.1

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

@@ -2,15 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var icons = require('@dnanpm/icons');
 var React = require('react');
 var useOutsideClick = require('../../hooks/useOutsideClick.js');
 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 }; }
 
@@ -26,7 +24,7 @@ const SecondaryNavigationWrapper = styled["default"].nav `
     @media (min-width: ${p => p.collapseSize + 1}px) {
         border-bottom: 1px solid ${theme["default"].color.line.L03};
     }
-`;
+`;
 const MobileSelector = styled["default"].button `
     display: flex;
     align-items: center;
@@ -45,10 +43,10 @@ const MobileSelector = styled["default"].button `
     @media (min-width: ${p => p.collapseSize + 1}px) {
         display: none;
     }
-`;
+`;
 const MobileSelectorTitleWrapper = styled["default"].div `
     display: flex;
-`;
+`;
 const MobileSelectorArrow = styled["default"].span `
     display: flex;
 
@@ -56,7 +54,7 @@ const MobileSelectorArrow = styled["default"].span `
         transition: transform 0.15s ease-in-out;
         transform: rotate(${p => (p.isOpen ? '180deg' : '0deg')});
     }
-`;
+`;
 const MobileSelectorCheck = styled["default"].span `
     margin-left: auto;
 
@@ -65,7 +63,7 @@ const MobileSelectorCheck = styled["default"].span `
             display: none;
         }
     }
-`;
+`;
 const SecondaryNavigationList = styled["default"].ul `
     padding: 0;
     list-style-type: none;
@@ -87,7 +85,7 @@ const SecondaryNavigationList = styled["default"].ul `
         border-bottom: none;
         max-width: ${p => (p.componentMaxWidth ? `${p.componentMaxWidth}px` : 'none')};
     }
-`;
+`;
 const SecondaryNavigationListElement = styled["default"].li `
     margin: 0 ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 2)};
     @media (min-width: ${p => p.collapseSize + 1}px) {
@@ -119,7 +117,7 @@ const SecondaryNavigationListElement = styled["default"].li `
             font-weight: ${theme["default"].fontWeight.book};
         }
     }
-`;
+`;
 const IconWrapper = styled["default"].span `
     position: relative;
     display: flex;
@@ -139,53 +137,53 @@ const IconWrapper = styled["default"].span `
         border: 1px solid ${theme["default"].color.default.white};
         background-color: ${theme["default"].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] = React.useState(false);
-    const toggleNav = () => {
-        setIsSecondaryNavOpen(!isSecondaryNavOpen);
-    };
-    const closeNav = () => {
-        if (isSecondaryNavOpen) {
-            setIsSecondaryNavOpen(false);
-        }
-    };
-    const ref = React.useRef(null);
-    useOutsideClick["default"](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["default"].createElement(SecondaryNavigationWrapper, { ref: ref, collapseSize: collapseSize, "data-testid": dataTestId, className: className, mobileOnly: mobileOnly, whiteBg: whiteBg },
-        selectedElement && (React__default["default"].createElement(MobileSelector, { onClick: toggleNav, collapseSize: collapseSize, "data-testid": "secondary-navigation-dropdown-selector" },
-            React__default["default"].createElement(MobileSelectorTitleWrapper, null,
-                (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.icon) && (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"], { icon: hlChevronDown["default"] })))),
-        React__default["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["default"].createElement(SecondaryNavigationListElement, { key: listElement.id, isActive: isActive, onClick: closeNav, collapseSize: collapseSize }, NextJSSecondaryNavLink && !isMenuItemLinkAbsolute ? (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"], { icon: hlCheck["default"] }))))) : (React__default["default"].createElement("a", { href: linkUrl, "data-testid": `secondary-nav-item-link-${index + 1}` },
-                iconName && (React__default["default"].createElement(IconWrapper, { showNotification: showNotification, collapseSize: collapseSize },
-                    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"], { icon: hlCheck["default"] })))))));
-        }))));
+`;
+/** @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] = React.useState(false);
+    const toggleNav = () => {
+        setIsSecondaryNavOpen(!isSecondaryNavOpen);
+    };
+    const closeNav = () => {
+        if (isSecondaryNavOpen) {
+            setIsSecondaryNavOpen(false);
+        }
+    };
+    const ref = React.useRef(null);
+    useOutsideClick["default"](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["default"].createElement(SecondaryNavigationWrapper, { ref: ref, collapseSize: collapseSize, "data-testid": dataTestId, className: className, mobileOnly: mobileOnly, whiteBg: whiteBg },
+        selectedElement && (React__default["default"].createElement(MobileSelector, { onClick: toggleNav, collapseSize: collapseSize, "data-testid": "secondary-navigation-dropdown-selector" },
+            React__default["default"].createElement(MobileSelectorTitleWrapper, null,
+                (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.icon) && (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"], { icon: icons.ChevronDown })))),
+        React__default["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["default"].createElement(SecondaryNavigationListElement, { key: listElement.id, isActive: isActive, onClick: closeNav, collapseSize: collapseSize }, NextJSSecondaryNavLink && !isMenuItemLinkAbsolute ? (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"], { icon: icons.Check }))))) : (React__default["default"].createElement("a", { href: linkUrl, "data-testid": `secondary-nav-item-link-${index + 1}` },
+                iconName && (React__default["default"].createElement(IconWrapper, { showNotification: showNotification, collapseSize: collapseSize },
+                    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"], { icon: icons.Check })))))));
+        }))));
 };
 
 exports["default"] = SecondaryNavigation;

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

@@ -3,18 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
+var icons = require('@dnanpm/icons');
 var React = require('react');
 var Select = require('react-select');
 var styled = require('../../themes/styled.js');
 var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
 var Icon = require('../Icon/Icon.js');
-var hlChevronDown = require('../Icons/hlChevronDown.js');
-var hlChevronUp = require('../Icons/hlChevronUp.js');
-var hlError = require('../Icons/hlError.js');
-var hlLock = require('../Icons/hlLock.js');
-var hlMagnifyingGlass = require('../Icons/hlMagnifyingGlass.js');
-var hlX = require('../Icons/hlX.js');
 var LabelText = require('../LabelText/LabelText.js');
 var PixelLoader = require('../PixelLoader/PixelLoader.js');
 
@@ -26,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: hlX["default"], size: "1rem" })));
-};
-const IndicatorsContainer = (_a) => {
-    var { selectProps } = _a, indicatorsContainerProps = tslib.__rest(_a, ["selectProps"]);
-    return Select.components.IndicatorsContainer && (React__default["default"].createElement(Select.components.IndicatorsContainer, { clearValue: indicatorsContainerProps.clearValue, cx: indicatorsContainerProps.cx, getClassNames: indicatorsContainerProps.getClassNames, getStyles: indicatorsContainerProps.getStyles, getValue: indicatorsContainerProps.getValue, hasValue: indicatorsContainerProps.hasValue, isDisabled: selectProps.isDisabled, isMulti: indicatorsContainerProps.isMulti, isRtl: indicatorsContainerProps.isRtl, options: indicatorsContainerProps.options, selectOption: indicatorsContainerProps.selectOption, selectProps: selectProps, setValue: indicatorsContainerProps.setValue, theme: indicatorsContainerProps.theme },
-        selectProps.errorState && (React__default["default"].createElement(Icon["default"], { icon: hlError["default"], color: theme["default"].color.notification.error, position: "right" })),
-        selectProps.isDisabled && React__default["default"].createElement(Icon["default"], { icon: hlLock["default"], position: "right" }),
-        indicatorsContainerProps.children));
-};
-const ClearIndicator = (_a) => {
-    var clearIndicatorProps = tslib.__rest(_a, []);
-    return Select.components.ClearIndicator && (React__default["default"].createElement(Select.components.ClearIndicator, { clearValue: clearIndicatorProps.clearValue, cx: clearIndicatorProps.cx, getClassNames: clearIndicatorProps.getClassNames, getStyles: clearIndicatorProps.getStyles, getValue: clearIndicatorProps.getValue, hasValue: clearIndicatorProps.hasValue, innerProps: clearIndicatorProps.innerProps, isFocused: clearIndicatorProps.isFocused, isMulti: clearIndicatorProps.isMulti, isRtl: clearIndicatorProps.isRtl, options: clearIndicatorProps.options, selectOption: clearIndicatorProps.selectOption, selectProps: clearIndicatorProps.selectProps, setValue: clearIndicatorProps.setValue, theme: clearIndicatorProps.theme },
-        React__default["default"].createElement(Icon["default"], { icon: hlX["default"] })));
-};
-const DropdownIndicator = (_a) => {
-    var { selectProps } = _a, dropdownIndicatorProps = tslib.__rest(_a, ["selectProps"]);
-    const getIcon = () => {
-        if (selectProps.isSearchable) {
-            return hlMagnifyingGlass["default"];
-        }
-        return selectProps.menuIsOpen ? hlChevronUp["default"] : hlChevronDown["default"];
-    };
-    return (Select.components.DropdownIndicator && (React__default["default"].createElement(Select.components.DropdownIndicator, { clearValue: dropdownIndicatorProps.clearValue, cx: dropdownIndicatorProps.cx, getClassNames: dropdownIndicatorProps.getClassNames, getStyles: dropdownIndicatorProps.getStyles, getValue: dropdownIndicatorProps.getValue, hasValue: dropdownIndicatorProps.hasValue, innerProps: dropdownIndicatorProps.innerProps, isDisabled: dropdownIndicatorProps.isDisabled, isFocused: dropdownIndicatorProps.isFocused, isMulti: dropdownIndicatorProps.isMulti, isRtl: dropdownIndicatorProps.isRtl, options: dropdownIndicatorProps.options, selectOption: dropdownIndicatorProps.selectOption, selectProps: selectProps, setValue: dropdownIndicatorProps.setValue, theme: dropdownIndicatorProps.theme },
-        React__default["default"].createElement(Icon["default"], { icon: getIcon(), color: "currentColor", size: "1.5rem" }))));
-};
-const SelectBox = (_a) => {
-    var { 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;