@dafaz-ui/react 6.0.5 → 7.0.1

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @dafaz-ui/react@6.0.5 build
+> @dafaz-ui/react@7.0.1 build
 > tsup src/index.tsx --format esm,cjs --dts --external react
 
 CLI Building entry: src/index.tsx
@@ -8,11 +8,11 @@
 CLI Target: es6
 ESM Build start
 CJS Build start
-CJS dist/index.js 39.07 KB
-CJS ⚡️ Build success in 43ms
-ESM dist/index.mjs 35.82 KB
-ESM ⚡️ Build success in 43ms
+CJS dist/index.js 38.97 KB
+CJS ⚡️ Build success in 46ms
+ESM dist/index.mjs 35.70 KB
+ESM ⚡️ Build success in 46ms
 DTS Build start
-DTS ⚡️ Build success in 4555ms
+DTS ⚡️ Build success in 4727ms
 DTS dist/index.d.mts 121.54 KB
 DTS dist/index.d.ts  121.54 KB

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @dafaz-ui/react
 
+## 7.0.1
+
+### Patch Changes
+
+- patch multiselect
+
+## 7.0.0
+
+### Major Changes
+
+- Add new features and multiselect fix
+
 ## 6.0.5
 
 ### Patch Changes

package/dist/index.js

@@ -55,26 +55,6 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
 
 // src/index.tsx
 var src_exports = {};
@@ -904,6 +884,7 @@ var SelectUI = styled("select", {
   maxWidth: "24.5rem",
   margin: 0,
   padding: "$1 $1",
+  marginLeft: "$1",
   "&:disabled": {
     opacity: 0.5
   },
@@ -988,7 +969,7 @@ var Select = (0, import_react8.forwardRef)(
             display: "flex",
             alignItems: "center",
             paddingLeft: "1rem",
-            marginRight: "0.6rem",
+            marginRight: "0.7rem",
             marginLeft: "-3rem"
           },
           children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react7.CaretDown, { size: 24, weight: "bold" })
@@ -1353,7 +1334,38 @@ TextInput.displayName = "TextInput";
 var import_react12 = require("@phosphor-icons/react");
 
 // src/components/MultiSelect/styles.ts
+var Button2 = styled("button", {
+  backgroundColor: "transparent",
+  border: "none",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: "white",
+  marginBottom: "-3px",
+  cursor: "pointer",
+  zIndex: 5,
+  variants: {
+    size: {
+      lg: {
+        height: "$10",
+        width: "$10"
+      },
+      md: {
+        height: "$8",
+        width: "$8"
+      },
+      sm: {
+        height: "$6",
+        width: "$6"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "lg"
+  }
+});
 var SelectUI2 = styled("div", {
+  zIndex: 3,
   width: "100%",
   maxWidth: "24.5rem",
   position: "relative",
@@ -1368,21 +1380,12 @@ var SelectUI2 = styled("div", {
   borderRadius: "$md",
   boxSizing: "border-box",
   transition: "border 0.2s linear",
-  padding: "$1 $2",
   boxShadow: "0 3px 2px -2px $colors$gray400",
   "&:hover": {
     borderBottom: "2px solid $dafaz400"
   },
   "&.clicked": {
-    borderBottom: "2px solid $dafaz400",
-    "&:hover": {
-      "> div": {
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "start",
-        gap: "$3"
-      }
-    }
+    borderBottom: "2px solid $dafaz400"
   },
   variants: {
     disabled: {
@@ -1421,15 +1424,13 @@ var SelectUI2 = styled("div", {
   }
 });
 var SelectContainerUI = styled("div", {
-  marginTop: "0.4rem",
-  marginLeft: "-0.5rem",
   padding: "$3 $2",
+  marginTop: "2px",
   border: "1px solid $gray400",
   boxSizing: "border-box",
   borderRadius: "$md",
-  display: "none",
   position: "absolute",
-  zIndex: 999,
+  zIndex: 2,
   minWidth: "100%",
   maxWidth: "24.5rem",
   background: "$gray800",
@@ -1437,10 +1438,12 @@ var SelectContainerUI = styled("div", {
   color: "$white",
   fontWeight: "$regular",
   cursor: "pointer",
-  "&:hover": {
+  "&.closed": {
+    display: "none"
+  },
+  "&.opened": {
     display: "flex",
     flexDirection: "column",
-    alignItems: "start",
     gap: "$3"
   }
 });
@@ -1456,6 +1459,7 @@ var MultiSelect = (0, import_react13.forwardRef)(
     ]);
     const [selectedValue, setSelectedValue] = (0, import_react13.useState)([""]);
     const [clickClass, setClickClass] = (0, import_react13.useState)(false);
+    const [isClose, setIsClosed] = (0, import_react13.useState)(true);
     (0, import_react13.useEffect)(() => {
       items.map(
         (item) => setValues((state) => {
@@ -1493,7 +1497,6 @@ var MultiSelect = (0, import_react13.forwardRef)(
       });
     }, [values, items, setValues]);
     function handleOnValueChange(id2) {
-      setClickClass(() => false);
       setValues((state) => {
         const items2 = state.filter((item2) => item2.id !== id2);
         const item = state.find((item2) => item2.id === id2);
@@ -1530,8 +1533,10 @@ var MultiSelect = (0, import_react13.forwardRef)(
     }
     function handleOnClick() {
       setClickClass((state) => !state);
+      setIsClosed((state) => !state);
     }
     function handleRemoveItem(e, id2) {
+      setIsClosed(true);
       handleOnValueChange(id2);
     }
     function updateSelectComponent(item) {
@@ -1552,35 +1557,27 @@ var MultiSelect = (0, import_react13.forwardRef)(
         id,
         size,
         onClick: handleOnClick,
-        onBlur: handleOnClick,
         value: selectedValue,
         onChange,
         className: clickClass ? "clicked" : ""
       }, props), {
         children: [
-          itemsChecked.length > 0 && itemsChecked.map((item) => {
+          isClose && itemsChecked.length > 0 && itemsChecked.map((item) => {
             return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
               "div",
               {
                 style: {
                   display: "flex",
-                  justifyContent: "space-between",
-                  width: "100%",
-                  marginTop: "0.2rem",
-                  alignItems: "center"
+                  alignItems: "center",
+                  justifyContent: "space-between"
                 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: item.label }),
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: { marginLeft: "0.5rem" }, children: item.label }),
                   /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                    "button",
+                    Button2,
                     {
-                      style: {
-                        all: "unset",
-                        display: "flex",
-                        alignItems: "center",
-                        paddingLeft: "1rem"
-                      },
                       type: "button",
+                      size,
                       onClick: (e) => handleRemoveItem(e, item.id),
                       children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react12.X, { size: 24, weight: "bold" })
                     }
@@ -1588,24 +1585,25 @@ var MultiSelect = (0, import_react13.forwardRef)(
                 ]
               }
             ) }, `opt:${item.id}`);
-          }) || itemsChecked.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+          }) || (itemsChecked.length === 0 || !isClose) && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
             "div",
             {
               style: {
                 display: "flex",
                 justifyContent: "space-between",
                 width: "100%",
-                alignItems: "center"
+                alignItems: "center",
+                padding: "4px 0px"
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: { opacity: 0.75 }, children: placeholder }),
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: { opacity: 0.75, marginLeft: "0.5rem" }, children: placeholder }),
                 /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                   "span",
                   {
                     style: {
                       display: "flex",
                       alignItems: "center",
-                      paddingLeft: "1rem"
+                      marginRight: "0.7rem"
                     },
                     children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react12.CaretDown, { size: 24, weight: "bold" })
                   }
@@ -1613,22 +1611,31 @@ var MultiSelect = (0, import_react13.forwardRef)(
               ]
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SelectContainerUI, { onMouseOutCapture: handleOnClick, children: values.map((item) => {
-            return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-              CheckBox,
-              {
-                name: `chk${item.id}`,
-                size,
-                label: item.label,
-                checked: item.isChecked,
-                value: updateSelectComponent(item.value),
-                handleOnChange: () => __async(void 0, null, function* () {
-                  handleOnValueChange(item.id);
-                })
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            SelectContainerUI,
+            {
+              className: isClose ? "closed" : "opened",
+              onMouseLeave: () => {
+                setIsClosed(true);
               },
-              item.id
-            );
-          }) })
+              children: values.map((item) => {
+                return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                  CheckBox,
+                  {
+                    name: `chk${item.id}`,
+                    size,
+                    label: item.label,
+                    checked: item.isChecked,
+                    value: updateSelectComponent(item.value),
+                    handleOnChange: () => {
+                      handleOnValueChange(item.id);
+                    }
+                  },
+                  item.id
+                );
+              })
+            }
+          )
         ]
       })
     );

package/dist/index.mjs

@@ -29,26 +29,6 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
 
 // ../tokens/dist/index.mjs
 var colors = {
@@ -853,6 +833,7 @@ var SelectUI = styled("select", {
   maxWidth: "24.5rem",
   margin: 0,
   padding: "$1 $1",
+  marginLeft: "$1",
   "&:disabled": {
     opacity: 0.5
   },
@@ -937,7 +918,7 @@ var Select = forwardRef3(
             display: "flex",
             alignItems: "center",
             paddingLeft: "1rem",
-            marginRight: "0.6rem",
+            marginRight: "0.7rem",
             marginLeft: "-3rem"
           },
           children: /* @__PURE__ */ jsx7(CaretDown, { size: 24, weight: "bold" })
@@ -1305,7 +1286,38 @@ TextInput.displayName = "TextInput";
 import { CaretDown as CaretDown2, X } from "@phosphor-icons/react";
 
 // src/components/MultiSelect/styles.ts
+var Button2 = styled("button", {
+  backgroundColor: "transparent",
+  border: "none",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: "white",
+  marginBottom: "-3px",
+  cursor: "pointer",
+  zIndex: 5,
+  variants: {
+    size: {
+      lg: {
+        height: "$10",
+        width: "$10"
+      },
+      md: {
+        height: "$8",
+        width: "$8"
+      },
+      sm: {
+        height: "$6",
+        width: "$6"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "lg"
+  }
+});
 var SelectUI2 = styled("div", {
+  zIndex: 3,
   width: "100%",
   maxWidth: "24.5rem",
   position: "relative",
@@ -1320,21 +1332,12 @@ var SelectUI2 = styled("div", {
   borderRadius: "$md",
   boxSizing: "border-box",
   transition: "border 0.2s linear",
-  padding: "$1 $2",
   boxShadow: "0 3px 2px -2px $colors$gray400",
   "&:hover": {
     borderBottom: "2px solid $dafaz400"
   },
   "&.clicked": {
-    borderBottom: "2px solid $dafaz400",
-    "&:hover": {
-      "> div": {
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "start",
-        gap: "$3"
-      }
-    }
+    borderBottom: "2px solid $dafaz400"
   },
   variants: {
     disabled: {
@@ -1373,15 +1376,13 @@ var SelectUI2 = styled("div", {
   }
 });
 var SelectContainerUI = styled("div", {
-  marginTop: "0.4rem",
-  marginLeft: "-0.5rem",
   padding: "$3 $2",
+  marginTop: "2px",
   border: "1px solid $gray400",
   boxSizing: "border-box",
   borderRadius: "$md",
-  display: "none",
   position: "absolute",
-  zIndex: 999,
+  zIndex: 2,
   minWidth: "100%",
   maxWidth: "24.5rem",
   background: "$gray800",
@@ -1389,10 +1390,12 @@ var SelectContainerUI = styled("div", {
   color: "$white",
   fontWeight: "$regular",
   cursor: "pointer",
-  "&:hover": {
+  "&.closed": {
+    display: "none"
+  },
+  "&.opened": {
     display: "flex",
     flexDirection: "column",
-    alignItems: "start",
     gap: "$3"
   }
 });
@@ -1412,6 +1415,7 @@ var MultiSelect = forwardRef6(
     ]);
     const [selectedValue, setSelectedValue] = useState3([""]);
     const [clickClass, setClickClass] = useState3(false);
+    const [isClose, setIsClosed] = useState3(true);
     useEffect(() => {
       items.map(
         (item) => setValues((state) => {
@@ -1449,7 +1453,6 @@ var MultiSelect = forwardRef6(
       });
     }, [values, items, setValues]);
     function handleOnValueChange(id2) {
-      setClickClass(() => false);
       setValues((state) => {
         const items2 = state.filter((item2) => item2.id !== id2);
         const item = state.find((item2) => item2.id === id2);
@@ -1486,8 +1489,10 @@ var MultiSelect = forwardRef6(
     }
     function handleOnClick() {
       setClickClass((state) => !state);
+      setIsClosed((state) => !state);
     }
     function handleRemoveItem(e, id2) {
+      setIsClosed(true);
       handleOnValueChange(id2);
     }
     function updateSelectComponent(item) {
@@ -1508,35 +1513,27 @@ var MultiSelect = forwardRef6(
         id,
         size,
         onClick: handleOnClick,
-        onBlur: handleOnClick,
         value: selectedValue,
         onChange,
         className: clickClass ? "clicked" : ""
       }, props), {
         children: [
-          itemsChecked.length > 0 && itemsChecked.map((item) => {
+          isClose && itemsChecked.length > 0 && itemsChecked.map((item) => {
             return /* @__PURE__ */ jsx12("div", { children: /* @__PURE__ */ jsxs5(
               "div",
               {
                 style: {
                   display: "flex",
-                  justifyContent: "space-between",
-                  width: "100%",
-                  marginTop: "0.2rem",
-                  alignItems: "center"
+                  alignItems: "center",
+                  justifyContent: "space-between"
                 },
                 children: [
-                  /* @__PURE__ */ jsx12("span", { children: item.label }),
+                  /* @__PURE__ */ jsx12("span", { style: { marginLeft: "0.5rem" }, children: item.label }),
                   /* @__PURE__ */ jsx12(
-                    "button",
+                    Button2,
                     {
-                      style: {
-                        all: "unset",
-                        display: "flex",
-                        alignItems: "center",
-                        paddingLeft: "1rem"
-                      },
                       type: "button",
+                      size,
                       onClick: (e) => handleRemoveItem(e, item.id),
                       children: /* @__PURE__ */ jsx12(X, { size: 24, weight: "bold" })
                     }
@@ -1544,24 +1541,25 @@ var MultiSelect = forwardRef6(
                 ]
               }
             ) }, `opt:${item.id}`);
-          }) || itemsChecked.length === 0 && /* @__PURE__ */ jsx12("div", { children: /* @__PURE__ */ jsxs5(
+          }) || (itemsChecked.length === 0 || !isClose) && /* @__PURE__ */ jsx12("div", { children: /* @__PURE__ */ jsxs5(
             "div",
             {
               style: {
                 display: "flex",
                 justifyContent: "space-between",
                 width: "100%",
-                alignItems: "center"
+                alignItems: "center",
+                padding: "4px 0px"
               },
               children: [
-                /* @__PURE__ */ jsx12("span", { style: { opacity: 0.75 }, children: placeholder }),
+                /* @__PURE__ */ jsx12("span", { style: { opacity: 0.75, marginLeft: "0.5rem" }, children: placeholder }),
                 /* @__PURE__ */ jsx12(
                   "span",
                   {
                     style: {
                       display: "flex",
                       alignItems: "center",
-                      paddingLeft: "1rem"
+                      marginRight: "0.7rem"
                     },
                     children: /* @__PURE__ */ jsx12(CaretDown2, { size: 24, weight: "bold" })
                   }
@@ -1569,22 +1567,31 @@ var MultiSelect = forwardRef6(
               ]
             }
           ) }),
-          /* @__PURE__ */ jsx12(SelectContainerUI, { onMouseOutCapture: handleOnClick, children: values.map((item) => {
-            return /* @__PURE__ */ jsx12(
-              CheckBox,
-              {
-                name: `chk${item.id}`,
-                size,
-                label: item.label,
-                checked: item.isChecked,
-                value: updateSelectComponent(item.value),
-                handleOnChange: () => __async(void 0, null, function* () {
-                  handleOnValueChange(item.id);
-                })
+          /* @__PURE__ */ jsx12(
+            SelectContainerUI,
+            {
+              className: isClose ? "closed" : "opened",
+              onMouseLeave: () => {
+                setIsClosed(true);
               },
-              item.id
-            );
-          }) })
+              children: values.map((item) => {
+                return /* @__PURE__ */ jsx12(
+                  CheckBox,
+                  {
+                    name: `chk${item.id}`,
+                    size,
+                    label: item.label,
+                    checked: item.isChecked,
+                    value: updateSelectComponent(item.value),
+                    handleOnChange: () => {
+                      handleOnValueChange(item.id);
+                    }
+                  },
+                  item.id
+                );
+              })
+            }
+          )
         ]
       })
     );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dafaz-ui/react",
-  "version": "6.0.5",
+  "version": "7.0.1",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/src/components/MultiSelect/index.tsx

@@ -1,6 +1,6 @@
 import { CaretDown, X } from '@phosphor-icons/react'
 import { CheckBox } from '../CheckBox'
-import { SelectUI, SelectContainerUI, SelectUIProps } from './styles'
+import { SelectUI, SelectContainerUI, SelectUIProps, Button } from './styles'
 
 import {
   forwardRef,
@@ -39,6 +39,7 @@ export const MultiSelect = forwardRef<
     ])
     const [selectedValue, setSelectedValue] = useState([''])
     const [clickClass, setClickClass] = useState(false)
+    const [isClose, setIsClosed] = useState(true)
 
     useEffect(() => {
       items.map((item) =>
@@ -79,7 +80,6 @@ export const MultiSelect = forwardRef<
     }, [values, items, setValues])
 
     function handleOnValueChange(id: string) {
-      setClickClass(() => false)
       setValues((state) => {
         const items = state.filter((item) => item.id !== id)
         const item = state.find((item) => item.id === id)
@@ -119,9 +119,11 @@ export const MultiSelect = forwardRef<
 
     function handleOnClick() {
       setClickClass((state) => !state)
+      setIsClosed((state) => !state)
     }
 
     function handleRemoveItem(e: MouseEvent<HTMLElement>, id: string) {
+      setIsClosed(true)
       handleOnValueChange(id)
     }
 
@@ -147,43 +149,36 @@ export const MultiSelect = forwardRef<
         id={id}
         size={size}
         onClick={handleOnClick}
-        onBlur={handleOnClick}
         value={selectedValue}
         onChange={onChange}
         className={clickClass ? 'clicked' : ''}
         {...props}
       >
-        {(itemsChecked.length > 0 &&
+        {(isClose &&
+          itemsChecked.length > 0 &&
           itemsChecked.map((item) => {
             return (
               <div key={`opt:${item.id}`}>
                 <div
                   style={{
                     display: 'flex',
-                    justifyContent: 'space-between',
-                    width: '100%',
-                    marginTop: '0.2rem',
                     alignItems: 'center',
+                    justifyContent: 'space-between',
                   }}
                 >
-                  <span>{item.label}</span>
-                  <button
-                    style={{
-                      all: 'unset',
-                      display: 'flex',
-                      alignItems: 'center',
-                      paddingLeft: '1rem',
-                    }}
+                  <span style={{ marginLeft: '0.5rem' }}>{item.label}</span>
+                  <Button
                     type="button"
+                    size={size}
                     onClick={(e) => handleRemoveItem(e, item.id)}
                   >
                     <X size={24} weight="bold" />
-                  </button>
+                  </Button>
                 </div>
               </div>
             )
           })) ||
-          (itemsChecked.length === 0 && (
+          ((itemsChecked.length === 0 || !isClose) && (
             <div>
               <div
                 style={{
@@ -191,14 +186,17 @@ export const MultiSelect = forwardRef<
                   justifyContent: 'space-between',
                   width: '100%',
                   alignItems: 'center',
+                  padding: '4px 0px',
                 }}
               >
-                <span style={{ opacity: 0.75 }}>{placeholder}</span>
+                <span style={{ opacity: 0.75, marginLeft: '0.5rem' }}>
+                  {placeholder}
+                </span>
                 <span
                   style={{
                     display: 'flex',
                     alignItems: 'center',
-                    paddingLeft: '1rem',
+                    marginRight: '0.7rem',
                   }}
                 >
                   <CaretDown size={24} weight="bold" />
@@ -207,7 +205,12 @@ export const MultiSelect = forwardRef<
             </div>
           ))}
 
-        <SelectContainerUI onMouseOutCapture={handleOnClick}>
+        <SelectContainerUI
+          className={isClose ? 'closed' : 'opened'}
+          onMouseLeave={() => {
+            setIsClosed(true)
+          }}
+        >
           {values.map((item) => {
             return (
               <CheckBox
@@ -217,7 +220,7 @@ export const MultiSelect = forwardRef<
                 label={item.label}
                 checked={item.isChecked}
                 value={updateSelectComponent(item.value)}
-                handleOnChange={async () => {
+                handleOnChange={() => {
                   handleOnValueChange(item.id)
                 }}
               />

package/src/components/MultiSelect/styles.ts

@@ -1,7 +1,42 @@
 import { styled } from '../../styles'
 import type { ComponentProps, CSSProperties } from 'react'
 
+export const Button = styled('button', {
+  backgroundColor: 'transparent',
+  border: 'none',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  color: 'white',
+  marginBottom: '-3px',
+
+  cursor: 'pointer',
+
+  zIndex: 5,
+
+  variants: {
+    size: {
+      lg: {
+        height: '$10',
+        width: '$10',
+      },
+      md: {
+        height: '$8',
+        width: '$8',
+      },
+      sm: {
+        height: '$6',
+        width: '$6',
+      },
+    },
+  },
+  defaultVariants: {
+    size: 'lg',
+  },
+})
+
 export const SelectUI = styled('div', {
+  zIndex: 3,
   width: '100%',
   maxWidth: '24.5rem',
 
@@ -20,8 +55,6 @@ export const SelectUI = styled('div', {
   boxSizing: 'border-box',
   transition: 'border 0.2s linear',
 
-  padding: '$1 $2',
-
   boxShadow: '0 3px 2px -2px $colors$gray400',
 
   '&:hover': {
@@ -30,15 +63,6 @@ export const SelectUI = styled('div', {
 
   '&.clicked': {
     borderBottom: '2px solid $dafaz400',
-
-    '&:hover': {
-      '> div': {
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'start',
-        gap: '$3',
-      },
-    },
   },
 
   variants: {
@@ -85,18 +109,15 @@ export interface SelectUIProps extends ComponentProps<typeof SelectUI> {
 }
 
 export const SelectContainerUI = styled('div', {
-  marginTop: '0.4rem',
-  marginLeft: '-0.5rem',
   padding: '$3 $2',
+  marginTop: '2px',
 
   border: '1px solid $gray400',
   boxSizing: 'border-box',
   borderRadius: '$md',
 
-  display: 'none',
-
   position: 'absolute',
-  zIndex: 999,
+  zIndex: 2,
   minWidth: '100%',
   maxWidth: '24.5rem',
 
@@ -107,10 +128,19 @@ export const SelectContainerUI = styled('div', {
   fontWeight: '$regular',
   cursor: 'pointer',
 
-  '&:hover': {
+  '&.closed': {
+    display: 'none',
+  },
+
+  '&.opened': {
     display: 'flex',
     flexDirection: 'column',
-    alignItems: 'start',
     gap: '$3',
   },
 })
+
+export interface SelectContainerUIProps
+  extends ComponentProps<typeof SelectContainerUI> {
+  className?: string
+  style?: CSSProperties
+}

package/src/components/Select/index.tsx

@@ -52,7 +52,7 @@ export const Select = forwardRef<ElementRef<typeof SelectUI>, SelectProps>(
             display: 'flex',
             alignItems: 'center',
             paddingLeft: '1rem',
-            marginRight: '0.6rem',
+            marginRight: '0.7rem',
             marginLeft: '-3rem',
           }}
         >

package/src/components/Select/styles.ts

@@ -89,6 +89,8 @@ export const SelectUI = styled('select', {
   margin: 0,
   padding: '$1 $1',
 
+  marginLeft: '$1',
+
   '&:disabled': {
     opacity: 0.5,
   },