@ctlyst.id/internal-ui 2.0.15 → 2.0.17

package/dist/internal-ui.esm.js

@@ -3027,16 +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;
-        }
-      `
-  }, children);
+  return /*#__PURE__*/React__default.createElement(Box, null, children);
 };
 SelectWrapper.defaultProps = {
   isError: false
@@ -3048,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,
@@ -3060,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
@@ -3114,6 +3118,13 @@ function selectStyles(colorMode, _isError) {
     } : {
       ...base,
       ...selectStyle
+    },
+    placeholder: base => {
+      return {
+        ...base,
+        ...selectStyle,
+        color: colors.black.low
+      };
     }
   };
 }
@@ -3145,7 +3156,7 @@ function Select({
     classNamePrefix: "react-select"
   }, rest, {
     styles: {
-      ...selectStyles(colorMode)
+      ...selectStyles(colorMode, isError)
     },
     theme: themeSelect
   })));
@@ -3165,7 +3176,7 @@ function SelectAsync({
     classNamePrefix: "react-select"
   }, rest, {
     styles: {
-      ...selectStyles(colorMode),
+      ...selectStyles(colorMode, isError),
       ...styles
     },
     theme: themeSelect
@@ -3186,7 +3197,7 @@ function SelectAsyncCreatable({
     classNamePrefix: "react-select"
   }, rest, {
     styles: {
-      ...selectStyles(colorMode),
+      ...selectStyles(colorMode, isError),
       ...styles
     },
     theme: themeSelect
@@ -3207,7 +3218,7 @@ function SelectCreatable({
     classNamePrefix: "react-select"
   }, rest, {
     styles: {
-      ...selectStyles(colorMode),
+      ...selectStyles(colorMode, isError),
       ...styles
     },
     theme: themeSelect