@xaypay/tui 0.0.60 → 0.0.62

package/dist/index.js

@@ -9,7 +9,26 @@ var styled = require('styled-components');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
@@ -969,11 +988,43 @@ SelectCheckbox.propTypes = {
   checked: PropTypes__default["default"].bool
 };
 
-var ReactArrowIcon = "<svg width=\"15\" height=\"9\" viewBox=\"0 0 15 9\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M7.9878 8.00003C7.75456 8.00049 7.52851 7.91911 7.34892 7.77003L1.3594 2.77003C1.15554 2.60029 1.02734 2.35638 1.003 2.09196C0.978666 1.82753 1.06019 1.56425 1.22963 1.36003C1.39907 1.15581 1.64255 1.02739 1.90652 1.00301C2.17048 0.978631 2.4333 1.06029 2.63716 1.23003L7.9878 5.71003L13.3384 1.39003C13.4405 1.30697 13.558 1.24493 13.6842 1.2075C13.8103 1.17007 13.9425 1.15798 14.0733 1.17192C14.2041 1.18586 14.3309 1.22555 14.4463 1.28873C14.5618 1.3519 14.6636 1.4373 14.746 1.54003C14.8374 1.64285 14.9066 1.76348 14.9493 1.89435C14.9921 2.02523 15.0073 2.16353 14.9942 2.30059C14.9811 2.43765 14.9399 2.57053 14.8731 2.69088C14.8063 2.81124 14.7155 2.91649 14.6062 3.00003L8.6167 7.83003C8.43194 7.95555 8.21051 8.0154 7.9878 8.00003Z\" fill=\"#3C393E\"/>\n</svg>";
+const SvgArrow = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  width: "1em",
+  height: "1em",
+  viewBox: "0 0 15 9",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  "aria-labelledby": titleId
+}, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
+  id: titleId
+}, title) : null, /*#__PURE__*/React__namespace.createElement("path", {
+  d: "M7.988 8a.997.997 0 0 1-.64-.23l-5.989-5a1.002 1.002 0 0 1 .548-1.767.998.998 0 0 1 .73.227l5.35 4.48 5.351-4.32a.997.997 0 0 1 1.408.15 1 1 0 0 1-.14 1.46l-5.99 4.83a.997.997 0 0 1-.628.17Z",
+  fill: "#3C393E"
+}));
 
-var ReactCloseIcon = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12.4253 0.241029L12.431 0.236144C12.6129 0.0804082 12.8468 -0.00097097 13.0861 0.00827014C13.3253 0.0175112 13.5523 0.116692 13.7216 0.285992C13.8909 0.455292 13.9901 0.682241 13.9993 0.921488C14.0085 1.16074 13.9272 1.39466 13.7714 1.57651L13.7665 1.58222L8.38622 6.96254L13.7665 12.3429L13.7714 12.3486C13.9272 12.5304 14.0085 12.7643 13.9993 13.0036C13.9901 13.2428 13.8909 13.4698 13.7216 13.6391C13.5523 13.8084 13.3253 13.9076 13.0861 13.9168C12.8468 13.926 12.6129 13.8447 12.431 13.6889L12.4253 13.684L7.04493 8.30363L1.66742 13.6738C1.58315 13.7705 1.48016 13.8492 1.36462 13.9051C1.24669 13.9622 1.11823 13.9942 0.987309 13.9993C0.85639 14.0043 0.72584 13.9823 0.603852 13.9345C0.481865 13.8867 0.371073 13.8142 0.27843 13.7216C0.185788 13.6289 0.113295 13.5181 0.0655034 13.3961C0.0177115 13.2742 -0.00434842 13.1436 0.000708381 13.0127C0.00576522 12.8818 0.0378304 12.7533 0.0948891 12.6354C0.150805 12.5198 0.229542 12.4168 0.326326 12.3325L5.70384 6.96235L0.323475 1.57461L0.318633 1.56895C0.162897 1.3871 0.0815178 1.15317 0.0907589 0.913926C0.1 0.674678 0.199181 0.447729 0.36848 0.27843C0.53778 0.10913 0.76473 0.00995005 1.00398 0.000708956C1.24322 -0.00853214 1.47715 0.0728459 1.659 0.228582L1.66476 0.233511L7.04512 5.62125L12.4253 0.241029Z\" fill=\"#3C393E\"/>\n</svg>";
+const SvgCloseIcon = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  width: "1em",
+  height: "1em",
+  viewBox: "0 0 14 14",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  "aria-labelledby": titleId
+}, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
+  id: titleId
+}, title) : null, /*#__PURE__*/React__namespace.createElement("path", {
+  d: "m12.425.241.006-.005a.95.95 0 0 1 1.34 1.34l-.005.006-5.38 5.38 5.38 5.38.005.007a.95.95 0 0 1-1.34 1.34l-.006-.005-5.38-5.38-5.378 5.37a.951.951 0 1 1-1.34-1.341l5.377-5.37-5.38-5.388-.005-.006a.95.95 0 0 1 1.34-1.34l.006.005 5.38 5.387 5.38-5.38Z",
+  fill: "#3C393E"
+}));
 
-var css_248z$5 = ".select-module_select-content__GCMDX{display:flex;flex-direction:column;position:relative}.select-module_select-content-top__Aw-fB{align-items:center;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between}.select-module_select-content-bottom__ueZCR{animation:select-module_select-show__391hQ .64s linear forwards;-webkit-animation:select-module_select-show__391hQ .64s linear forwards;left:0;max-height:0;overflow:hidden;position:absolute;width:100%;z-index:1}.select-module_select-content-bottom-inner__NWy2X{display:flex;flex-direction:column;max-height:234px;overflow-x:hidden;overflow-y:auto}.select-module_select-content-top-icon__MBrGK{align-items:center;box-sizing:border-box;display:flex;flex:0 0 auto;padding:0 5px 0 20px}.select-module_select-content-top-icon__MBrGK>div{align-items:center;display:flex;height:14px;justify-content:center;width:14px}.select-module_close-icon__SFNaJ{border-right:1px solid #eee;padding-right:9px}.select-module_arrow-icon__rjHt-{margin-left:9px;transform-origin:center;transition:all .64s ease;-webkit-transition:all .64s ease;-moz-transition:all .64s ease;-ms-transition:all .64s ease;-o-transition:all .64s ease}.select-module_select-content-bottom-row__eKq5L{align-items:center;display:flex;transition:background-color .24s,color .24s;-webkit-transition:background-color .24s,color .24s;-moz-transition:background-color .24s,color .24s;-ms-transition:background-color .24s,color .24s;-o-transition:background-color .24s,color .24s}.select-module_select-content-bottom-row__eKq5L:last-child{margin-bottom:0}@keyframes select-module_select-show__391hQ{to{max-height:234px}}";
+var css_248z$5 = ".select-module_select-content__GCMDX{display:flex;flex-direction:column;position:relative}.select-module_select-content-top__Aw-fB{align-items:center;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between}.select-module_select-content-bottom__ueZCR{animation:select-module_select-show__391hQ .64s linear forwards;-webkit-animation:select-module_select-show__391hQ .64s linear forwards;left:0;max-height:0;overflow:hidden;position:absolute;width:100%;z-index:1}.select-module_select-content-bottom-inner__NWy2X{display:flex;flex-direction:column;max-height:234px;overflow-x:hidden;overflow-y:auto}.select-module_select-content-top-icon__MBrGK{align-items:center;box-sizing:border-box;display:flex;flex:0 0 auto;padding:0 5px 0 20px}.select-module_select-content-top-icon__MBrGK>div{align-items:center;display:flex;height:14px;justify-content:center;width:14px}.select-module_close-icon__SFNaJ{border-right:1px solid #eee;box-sizing:content-box;padding-right:9px}.select-module_arrow-icon__rjHt-{margin-left:9px;transform-origin:center;transition:all .64s ease;-webkit-transition:all .64s ease;-moz-transition:all .64s ease;-ms-transition:all .64s ease;-o-transition:all .64s ease}.select-module_select-content-bottom-row__eKq5L{align-items:center;display:flex;transition:background-color .24s,color .24s;-webkit-transition:background-color .24s,color .24s;-moz-transition:background-color .24s,color .24s;-ms-transition:background-color .24s,color .24s;-o-transition:background-color .24s,color .24s}.select-module_select-content-bottom-row__eKq5L:last-child{margin-bottom:0}@keyframes select-module_select-show__391hQ{to{max-height:234px}}";
 var styles$5 = {"select-content":"select-module_select-content__GCMDX","select-content-top":"select-module_select-content-top__Aw-fB","select-content-bottom":"select-module_select-content-bottom__ueZCR","select-show":"select-module_select-show__391hQ","select-content-bottom-inner":"select-module_select-content-bottom-inner__NWy2X","select-content-top-icon":"select-module_select-content-top-icon__MBrGK","close-icon":"select-module_close-icon__SFNaJ","arrow-icon":"select-module_arrow-icon__rjHt-","select-content-bottom-row":"select-module_select-content-bottom-row__eKq5L"};
 styleInject(css_248z$5);
 
@@ -1055,22 +1106,24 @@ const Select = ({
       ...option
     };
     delete checkedOption.checked;
-    onChange(checkedOption);
     if (!multiple) {
       setOpened(!opened);
       setNewSelected([option]);
+      onChange(checkedOption);
     } else {
       const indexOfObject = newSelected.findIndex(obj => {
-        return obj.value === option.value;
+        return obj[keyNames.name] === option[keyNames.name];
       });
       if (indexOfObject === -1) {
         option.checked = true;
         setNewSelected(prev => {
           return [...prev, option];
         });
+        onChange([...newSelected, option]);
       } else {
         option.checked = false;
         setNewSelected([...newSelected.slice(0, indexOfObject), ...newSelected.slice(indexOfObject + 1)]);
+        onChange([...newSelected.slice(0, indexOfObject), ...newSelected.slice(indexOfObject + 1)]);
       }
     }
   };
@@ -1088,6 +1141,14 @@ const Select = ({
     e.target.style.color = optionItemColor ? optionItemColor : configStyles.SELECT.optionItemColor;
     e.target.style.backgroundColor = optionItemBackgroudColor ? optionItemBackgroudColor : configStyles.SELECT.optionItemBackgroudColor;
   };
+  const isObjectEmpty = obj => {
+    for (var key in obj) {
+      if (obj.hasOwnProperty(key)) {
+        return false;
+      }
+    }
+    return true;
+  };
   React.useEffect(() => {
     if (opened) {
       const checkIfClickedOutside = e => {
@@ -1102,7 +1163,7 @@ const Select = ({
     }
   }, [opened]);
   React.useEffect(() => {
-    selected && selected.length > 0 && setNewSelected(selected);
+    selected && selected.length > 0 && setNewSelected(isObjectEmpty(selected[0]) ? [] : selected);
     if (!multiple) {
       options && options.length > 0 && setExistOptions(options);
     } else {
@@ -1110,7 +1171,7 @@ const Select = ({
         item.checked = false;
         if (selected && selected.length > 0) {
           selected.map(innerItem => {
-            if (innerItem.value === item.value) {
+            if (innerItem[keyNames.name] === item[keyNames.name]) {
               item.checked = true;
             }
           });
@@ -1179,18 +1240,12 @@ const Select = ({
     style: {
       marginLeft: multiple && newSelected.length > 1 ? '17px' : '0px'
     }
-  }, closeIcon ? closeIcon : /*#__PURE__*/React__default["default"].createElement("img", {
-    src: ReactCloseIcon,
-    alt: "icon"
-  })), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, closeIcon ? closeIcon : /*#__PURE__*/React__default["default"].createElement(SvgCloseIcon, null)), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       transform: opened ? 'rotate(180deg)' : 'rotate(0deg)'
     },
     className: `${styles$5['arrow-icon']}`
-  }, arrowIcon ? arrowIcon : /*#__PURE__*/React__default["default"].createElement("img", {
-    src: ReactArrowIcon,
-    alt: "icon"
-  })))), opened && !disabled ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }, arrowIcon ? arrowIcon : /*#__PURE__*/React__default["default"].createElement(SvgArrow, null)))), opened && !disabled ? /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       boxShadow: optionsBoxShadow ? optionsBoxShadow : configStyles.SELECT.optionsBoxShadow,
       borderRadius: optionsBorderRadius ? optionsBorderRadius : configStyles.SELECT.optionsBorderRadius,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaypay/tui",
-  "version": "0.0.60",
+  "version": "0.0.62",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
@@ -9,7 +9,7 @@
     "storybook": "STORYBOOK_PATH=../../tui.config.js  start-storybook -p 6006",
     "build-storybook": "STORYBOOK_PATH=../../tui.config.js build-storybook",
     "build-lib": "STORYBOOK_PATH=../tui.config.js rollup --config rollup.config.js",
-    "svgr": "svgr --icon --title-prop --replace-attr-values '#1D1D1D=currentColor' -d src/components/icon -- src/assets"
+    "svgr": "svgr --icon --title-prop -d src/components/icon -- src/assets/icons"
   },
   "author": "",
   "license": "MIT",
@@ -28,6 +28,7 @@
     "@storybook/react": "^6.5.10",
     "@storybook/testing-library": "^0.0.13",
     "@svgr/cli": "^6.4.0",
+    "@svgr/webpack": "^6.5.1",
     "babel-loader": "^8.2.5",
     "classnames": "^2.3.1",
     "css-loader": "^6.7.1",

package/src/components/icon/Arrow.js

@@ -0,0 +1,19 @@
+import * as React from "react";
+const SvgArrow = ({ title, titleId, ...props }) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 15 9"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+      d="M7.988 8a.997.997 0 0 1-.64-.23l-5.989-5a1.002 1.002 0 0 1 .548-1.767.998.998 0 0 1 .73.227l5.35 4.48 5.351-4.32a.997.997 0 0 1 1.408.15 1 1 0 0 1-.14 1.46l-5.99 4.83a.997.997 0 0 1-.628.17Z"
+      fill="#3C393E"
+    />
+  </svg>
+);
+export default SvgArrow;

package/src/components/icon/CheckboxChecked.js

@@ -0,0 +1,21 @@
+import * as React from "react";
+const SvgCheckboxChecked = ({ title, titleId, ...props }) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M12.8 0H3.2A3.2 3.2 0 0 0 0 3.2v9.6A3.2 3.2 0 0 0 3.2 16h9.6a3.2 3.2 0 0 0 3.2-3.2V3.2A3.2 3.2 0 0 0 12.8 0ZM6.85 10.966c.068.023.14.034.218.034.078 0 .151-.011.219-.034a.515.515 0 0 0 .19-.114l5.363-4.94A.496.496 0 0 0 13 5.53a.496.496 0 0 0-.16-.382.589.589 0 0 0-.415-.148.59.59 0 0 0-.416.148l-4.94 4.55-2.085-1.92a.579.579 0 0 0-.408-.147.579.579 0 0 0-.408.148A.52.52 0 0 0 4 8.16a.476.476 0 0 0 .154.383l2.506 2.308a.515.515 0 0 0 .19.114Z"
+      fill="#00236A"
+    />
+  </svg>
+);
+export default SvgCheckboxChecked;

package/src/components/icon/CheckboxUnchecked.js

@@ -0,0 +1,21 @@
+import * as React from "react";
+const SvgCheckboxUnchecked = ({ title, titleId, ...props }) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M3.2 0h9.6A3.2 3.2 0 0 1 16 3.2v9.6a3.2 3.2 0 0 1-3.2 3.2H3.2A3.2 3.2 0 0 1 0 12.8V3.2A3.2 3.2 0 0 1 3.2 0Zm0 1.6a1.6 1.6 0 0 0-1.6 1.6v9.6a1.6 1.6 0 0 0 1.6 1.6h9.6a1.6 1.6 0 0 0 1.6-1.6V3.2a1.6 1.6 0 0 0-1.6-1.6H3.2Z"
+      fill="#D1D1D1"
+    />
+  </svg>
+);
+export default SvgCheckboxUnchecked;

package/src/components/icon/CloseIcon.js

@@ -0,0 +1,19 @@
+import * as React from "react";
+const SvgCloseIcon = ({ title, titleId, ...props }) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 14 14"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+      d="m12.425.241.006-.005a.95.95 0 0 1 1.34 1.34l-.005.006-5.38 5.38 5.38 5.38.005.007a.95.95 0 0 1-1.34 1.34l-.006-.005-5.38-5.38-5.378 5.37a.951.951 0 1 1-1.34-1.341l5.377-5.37-5.38-5.388-.005-.006a.95.95 0 0 1 1.34-1.34l.006.005 5.38 5.387 5.38-5.38Z"
+      fill="#3C393E"
+    />
+  </svg>
+);
+export default SvgCloseIcon;

package/src/components/icon/Tooltip.js

@@ -0,0 +1,19 @@
+import * as React from "react";
+const SvgTooltip = ({ title, titleId, ...props }) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+      d="M8 0a8 8 0 1 0 .001 16.001A8 8 0 0 0 8 0Zm.571 11.857A.143.143 0 0 1 8.43 12H7.57a.143.143 0 0 1-.142-.143V7c0-.079.064-.143.142-.143h.858c.078 0 .142.064.142.143v4.857ZM8 5.714A.857.857 0 0 1 8 4a.857.857 0 0 1 0 1.714Z"
+      fill="#D1D1D1"
+    />
+  </svg>
+);
+export default SvgTooltip;

package/src/components/icon/index.js

@@ -1,6 +1,5 @@
-export { default as HeartFilled } from "./HeartFilled";
-export { default as HeartOutline } from "./HeartOutline";
-export { default as LikeFilled } from "./LikeFilled";
-export { default as LikeOutline } from "./LikeOutline";
-export { default as StarFilled } from "./StarFilled";
-export { default as StarOutline } from "./StarOutline";
+export { default as Arrow } from "./Arrow";
+export { default as CheckboxChecked } from "./CheckboxChecked";
+export { default as CheckboxUnchecked } from "./CheckboxUnchecked";
+export { default as CloseIcon } from "./CloseIcon";
+export { default as Tooltip } from "./Tooltip";

package/src/components/select/index.js

@@ -2,11 +2,10 @@ import React, {useEffect, useState, useRef} from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { compereConfigs } from "./../../utils";
-
 import { SelectCheckbox } from './../selectCheckbox';
 
-import ReactArrowIcon from './../../assets/icons/arrow.svg';
-import ReactCloseIcon from './../../assets/icons/close-icon.svg';
+import ReactArrowIcon from '../icon/Arrow';
+import ReactCloseIcon from '../icon/CloseIcon';
 
 import styles from './select.module.css';
 
@@ -97,14 +96,14 @@ export const Select = ({
     const handleSelectItem = (option) => {
         const checkedOption = {...option};
         delete checkedOption.checked;
-        onChange(checkedOption);
         
         if (!multiple) {
             setOpened(!opened);
             setNewSelected([option]);
+            onChange(checkedOption);
         } else {
             const indexOfObject = newSelected.findIndex(obj => {
-                return obj.value === option.value;
+                return obj[keyNames.name] === option[keyNames.name];
             });
             if (indexOfObject === -1) {
                 option.checked = true;
@@ -114,12 +113,17 @@ export const Select = ({
                         option
                     ]
                 });
+                onChange([...newSelected, option])
             } else {
                 option.checked = false;
                 setNewSelected([
                     ...newSelected.slice(0, indexOfObject),
                     ...newSelected.slice(indexOfObject + 1),
                 ]);
+                onChange([
+                    ...newSelected.slice(0, indexOfObject),
+                    ...newSelected.slice(indexOfObject + 1),
+                ])
             }
         }
     };
@@ -142,6 +146,15 @@ export const Select = ({
         e.target.style.backgroundColor = optionItemBackgroudColor ? optionItemBackgroudColor : configStyles.SELECT.optionItemBackgroudColor;
     };
 
+    const isObjectEmpty = (obj) => {
+        for (var key in obj) {
+          if (obj.hasOwnProperty(key)) {
+            return false;
+          }
+        }
+        return true;
+      }
+
     useEffect(() => {
         if(opened){
             const checkIfClickedOutside = e => {
@@ -157,7 +170,7 @@ export const Select = ({
     }, [opened]);
 
     useEffect(() => {
-        selected && selected.length > 0 && setNewSelected(selected);
+        selected && selected.length > 0 && setNewSelected(isObjectEmpty(selected[0]) ? []: selected );
         if (!multiple) {
             options && options.length > 0 && setExistOptions(options);
         } else {
@@ -165,7 +178,7 @@ export const Select = ({
                 item.checked = false;
                 if (selected && selected.length > 0) {
                     selected.map(innerItem => {
-                        if (innerItem.value === item.value) {
+                        if (innerItem[keyNames.name] === item[keyNames.name]) {
                             item.checked = true;
                         }
                     });
@@ -247,7 +260,7 @@ export const Select = ({
                                 onClick={disabled ? _ => _ : handleClearSelect}
                                 style={{marginLeft: multiple && newSelected.length > 1 ? '17px' : '0px'}}
                                 >
-                                    { closeIcon ? closeIcon : <img src={ReactCloseIcon} alt="icon" /> }
+                                    { closeIcon ? closeIcon : <ReactCloseIcon /> }
                                 </div>
                             }
 
@@ -256,7 +269,7 @@ export const Select = ({
                                     transform: opened ? 'rotate(180deg)' : 'rotate(0deg)',
                                 }}
                                 className={`${styles['arrow-icon']}`}>
-                                {arrowIcon ? arrowIcon : <img src={ReactArrowIcon} alt="icon"/>}
+                                {arrowIcon ? arrowIcon : <ReactArrowIcon />}
                             </div>
                         </div>
                     </div>

package/src/components/select/select.module.css

@@ -50,6 +50,7 @@
 .close-icon {
     padding-right: 9px;
     border-right: 1px solid #EEEEEE;
+    box-sizing: content-box;
 }
 
 .arrow-icon{

package/src/components/icon/LikeFilled.js

@@ -1,24 +0,0 @@
-import * as React from "react";
-
-const SvgLikeFilled = ({ title, titleId, ...props }) => (
-  <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 23 20"
-    xmlns="http://www.w3.org/2000/svg"
-    role="img"
-    aria-labelledby={titleId}
-    {...props}
-  >
-    {title ? <title id={titleId}>{title}</title> : null}
-    <g fill="none" fillRule="evenodd">
-      <path opacity={0.87} d="M-1-1h24v24H-1z" />
-      <path
-        d="M12.12 1.06 6.58 6.6c-.37.37-.58.88-.58 1.41V18c0 1.1.9 2 2 2h9c.8 0 1.52-.48 1.84-1.21l3.26-7.61C22.94 9.2 21.49 7 19.34 7h-5.65l.95-4.58c.1-.5-.05-1.01-.41-1.37-.59-.58-1.53-.58-2.11.01ZM2 20c1.1 0 2-.9 2-2v-8c0-1.1-.9-2-2-2s-2 .9-2 2v8c0 1.1.9 2 2 2Z"
-        fill="currentColor"
-      />
-    </g>
-  </svg>
-);
-
-export default SvgLikeFilled;

package/src/components/icon/LikeOutline.js

@@ -1,24 +0,0 @@
-import * as React from "react";
-
-const SvgLikeOutline = ({ title, titleId, ...props }) => (
-  <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 22 20"
-    xmlns="http://www.w3.org/2000/svg"
-    role="img"
-    aria-labelledby={titleId}
-    {...props}
-  >
-    {title ? <title id={titleId}>{title}</title> : null}
-    <g fill="none" fillRule="evenodd">
-      <path opacity={0.87} d="M-1-1h24v24H-1z" />
-      <path
-        d="M20 7h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L13.17 0 6.59 6.59C6.22 6.95 6 7.45 6 8v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73V9c0-1.1-.9-2-2-2Zm0 4-3 7H8V8l4.34-4.34L11.23 9H20v2ZM0 8h4v12H0V8Z"
-        fill="currentColor"
-      />
-    </g>
-  </svg>
-);
-
-export default SvgLikeOutline;

package/src/components/icon/StarFilled.js

@@ -1,24 +0,0 @@
-import * as React from "react";
-
-const SvgStarFilled = ({ title, titleId, ...props }) => (
-  <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 18 17"
-    xmlns="http://www.w3.org/2000/svg"
-    role="img"
-    aria-labelledby={titleId}
-    {...props}
-  >
-    {title ? <title id={titleId}>{title}</title> : null}
-    <g fill="none" fillRule="evenodd">
-      <path d="M-3-3h24v24H-3z" />
-      <path
-        d="m9 14.27 4.15 2.51c.76.46 1.69-.22 1.49-1.08l-1.1-4.72 3.67-3.18c.67-.58.31-1.68-.57-1.75l-4.83-.41-1.89-4.46c-.34-.81-1.5-.81-1.84 0L6.19 5.63l-4.83.41C.48 6.11.12 7.21.79 7.79l3.67 3.18-1.1 4.72c-.2.86.73 1.54 1.49 1.08L9 14.27Z"
-        fill="currentColor"
-      />
-    </g>
-  </svg>
-);
-
-export default SvgStarFilled;

package/src/components/icon/StarOutline.js

@@ -1,24 +0,0 @@
-import * as React from "react";
-
-const SvgStarOutline = ({ title, titleId, ...props }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth={2}
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    className="star-outline_svg__feather star-outline_svg__feather-star"
-    width="1em"
-    height="1em"
-    role="img"
-    aria-labelledby={titleId}
-    {...props}
-  >
-    {title ? <title id={titleId}>{title}</title> : null}
-    <path d="m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
-  </svg>
-);
-
-export default SvgStarOutline;