@ctlyst.id/internal-ui 2.0.14 → 2.0.16

package/dist/internal-ui.esm.js

@@ -3027,20 +3027,9 @@ const Rating = ({
 };
 
 const SelectWrapper = ({
-  children,
-  isError = false
+  children
 }) => {
-  return /*#__PURE__*/React__default.createElement(Box, {
-    css: css`
-        .react-select__control {
-          border-color: ${isError ? colors.danger['500'] : colors.neutral['500']} !important;
-        }
-
-        .react-select__control:hover {
-          border-color: ${isError ? colors.danger['500'] : colors.primary['500']} !important;
-        }
-      `
-  }, children);
+  return /*#__PURE__*/React__default.createElement(Box, null, children);
 };
 SelectWrapper.defaultProps = {
   isError: false
@@ -3052,7 +3041,17 @@ const selectStyle = {
   lineHeight: styleMd.lineHeight,
   letterSpacing: 0
 };
+const boxShadow = color => `0 0 0 1px ${color}`;
 function selectStyles(colorMode, _isError) {
+  const boxShadowLight = (isFocused = false, isError = false) => {
+    if (isError && isFocused || isError) {
+      return boxShadow(colors.danger['500']);
+    }
+    if (isFocused) {
+      return boxShadow(colors.primary['500']);
+    }
+    return boxShadow(colors.neutral['400']);
+  };
   return {
     control: (base, state) => colorMode === 'dark' ? {
       ...base,
@@ -3064,7 +3063,8 @@ function selectStyles(colorMode, _isError) {
     } : {
       ...base,
       ...selectStyle,
-      boxShadow: state.isFocused ? 'none' : colors.neutral['500']
+      borderWidth: 0,
+      boxShadow: boxShadowLight(state.isFocused, _isError)
     },
     option: (base, {
       isSelected
@@ -3149,7 +3149,7 @@ function Select({
     classNamePrefix: "react-select"
   }, rest, {
     styles: {
-      ...selectStyles(colorMode)
+      ...selectStyles(colorMode, isError)
     },
     theme: themeSelect
   })));
@@ -3169,7 +3169,7 @@ function SelectAsync({
     classNamePrefix: "react-select"
   }, rest, {
     styles: {
-      ...selectStyles(colorMode),
+      ...selectStyles(colorMode, isError),
       ...styles
     },
     theme: themeSelect
@@ -3190,7 +3190,7 @@ function SelectAsyncCreatable({
     classNamePrefix: "react-select"
   }, rest, {
     styles: {
-      ...selectStyles(colorMode),
+      ...selectStyles(colorMode, isError),
       ...styles
     },
     theme: themeSelect
@@ -3211,7 +3211,7 @@ function SelectCreatable({
     classNamePrefix: "react-select"
   }, rest, {
     styles: {
-      ...selectStyles(colorMode),
+      ...selectStyles(colorMode, isError),
       ...styles
     },
     theme: themeSelect