update

public/assets/list/arrow.svg

@@ -1 +1 @@
-<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z" /></svg>
+<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#84858D"><path d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z" /></svg>

src/ts/components/CustomSelect/components/Icon.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import style from '../styles/icon.module.scss';
+
+interface UiKitSelectIconProps {
+  openSearch: boolean;
+  setOpenSearch: Function;
+}
+
+function UiKitSelectIcon({
+  openSearch,
+  setOpenSearch,
+}: UiKitSelectIconProps) {
+  const className = [style.ui_kit_select_icon_button];
+  if (openSearch) {
+    className.push(style.ui_kit_select_icon_button_open);
+  }
+
+  return (
+    <div className={style.ui_kit_select_icon}>
+      <img
+        src="./assets/list/arrow.svg"
+        className={className.join(' ')}
+        onClick={() => setOpenSearch(!openSearch)}
+      />
+    </div>
+  );
+}
+
+
+export default UiKitSelectIcon;

src/ts/components/CustomSelect/index.tsx

@@ -3,6 +3,7 @@ import React, { useMemo, useState } from 'react';
 import UiKitSelectValue from './components/Value';
 import UiKitSelectSearch from './components/Search';
 import UiKitSelectList from './components/List';
+import UiKitSelectIcon from './components/Icon';
 import { getOption, getTitle } from './helpers';
 
 import style from './styles/index.module.scss';
@@ -55,6 +56,11 @@ function UiKitSelect({
         />
       ) : null}
 
+      <UiKitSelectIcon
+        openSearch={openSearch}
+        setOpenSearch={setOpenSearch}
+      />
+
       {openSearch ? (
         <UiKitSelectList
           value={value}

src/ts/components/CustomSelect/styles/icon.module.scss

@@ -0,0 +1,28 @@
+@import 'src/styles/variables';
+
+.ui_kit_select_icon {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+
+  display: block;
+  width: 32px;
+  padding: 10px 0 0 0;
+
+  text-align: center;
+  cursor: pointer;
+
+  &_button {
+    display: block;
+    width: var(--space-xxl);
+    height: var(--space-xxl);
+    padding: 0;
+    margin: 0;
+    transition: transform 0.5s;
+
+    &_open {
+      transform: rotate(-180deg);
+    }
+  }
+}

src/ts/components/CustomSelect/styles/index.module.scss

@@ -25,6 +25,10 @@
     background-color: var(--color-white);
   }
 
+  &_search {
+    padding-top: var(--space-xxxs);
+  }
+
   &_container {
     position: relative;
   }

src/ts/components/UiKit/styles/button.module.scss

@@ -1,6 +1,7 @@
 @import 'src/styles/variables';
 
 .ui_kit_button {
+  --temp-size: 42px;
   --button-color-bg: var(--color-button);
   --button-color-text: var(--color-white);
   --button-color-border: var(--color-button);
@@ -36,13 +37,13 @@
   font-weight: bold;
   font-size: var(--font-xs);
   display: inline-block;
-  height: 42px;
-  min-width: 42px;
+  height: var(--temp-size);
+  min-width: var(--temp-size);
   padding: 0 var(--space-l);
   margin: 0;
 
   cursor: pointer;
-  line-height: 42px;
+  line-height: var(--temp-size);
   text-align: center;
   box-sizing: border-box;
   white-space: nowrap;
@@ -111,6 +112,7 @@
 }
 
 .ui_kit_button_menu {
+  --temp-size: 42px;
   --button-color-bg: var(--color-white);
   --button-color-text: var(--color-black);
   --button-color-border: var(--color-border);
@@ -119,13 +121,13 @@
   font-weight: bold;
   font-size: var(--font-xs);
   display: block;
-  height: 42px;
+  height: var(--temp-size);
   width: 100%;
   padding: 0 var(--space-s);
   margin: 0;
 
   cursor: pointer;
-  line-height: 42px;
+  line-height: var(--temp-size);
   text-align: left;
   box-sizing: border-box;
   white-space: nowrap;

src/ts/components/UiKit/styles/index.module.scss

@@ -1,16 +1,18 @@
 @import 'src/styles/variables';
 
 .ui_kit_common {
+  --temp-size: 42px;
+
   font-size: var(--font-s);
   font-weight: 100;
 
   display: inline-block;
   width: 100%;
-  height: 42px;
+  height: var(--temp-size);
   padding: 0 var(--space-l);
   margin: 0;
 
-  line-height: 42px;
+  line-height: var(--temp-size);
   text-align: left;
   box-sizing: border-box;
   vertical-align: top;

src/ts/components/UiKit/styles/switch.module.scss

@@ -5,7 +5,7 @@
   justify-content: space-between;
   align-items: center;
   width: 100%;
-  height: 42px;
+  height: var(--temp-size);
   padding: 0;
   margin: 0;