src/app/atoms/button/Button.scss

@@ -22,9 +22,10 @@
   & .text {
     @extend .cp-txt__ellipsis;
   }
-
+  
   &--icon {
     @include dir.side(padding, var(--sp-tight), var(--sp-loose));
+
   }
   .ic-raw {
     @include dir.side(margin, 0, var(--sp-extra-tight));
@@ -41,6 +42,7 @@
   }
 }
 
+
 .btn-surface {
   box-shadow: var(--bs-surface-border);
   @include color(var(--tc-surface-high), var(--ic-surface-normal));
@@ -76,4 +78,4 @@
   @include state.hover(var(--bg-danger-hover));
   @include state.focus(var(--bs-danger-outline));
   @include state.active(var(--bg-danger-active));
-}
+}

src/app/molecules/image-pack/ImagePackItem.scss

@@ -40,4 +40,4 @@
       gap: var(--sp-ultra-tight);
     }
   }
-}
+}

src/app/molecules/image-pack/ImagePackUpload.jsx

@@ -125,6 +125,7 @@ function ImagePackUpload({ onUpload }) {
 
   return (
     <div className="image-pack-upload__container">
+      {/* Single Upload Section */}
       <div className="image-pack-upload__section">
         <Text variant="s1" weight="medium">
           Single Upload
@@ -153,6 +154,7 @@ function ImagePackUpload({ onUpload }) {
         </form>
       </div>
 
+      {/* Bulk Upload Section */}
       <div className="image-pack-upload__section">
         <Text variant="s1" weight="medium">
           Bulk Upload
@@ -179,7 +181,7 @@ function ImagePackUpload({ onUpload }) {
           {bulkFiles.length > 0 && (
             <div className="image-pack-upload__bulk-files">
               {bulkFiles.map((file, index) => (
-                <div key={file.file.name} className="image-pack-upload__bulk-file">
+                <div key={index} className="image-pack-upload__bulk-file">
                   <IconButton
                     onClick={() => handleRemoveBulkFile(index)}
                     src={CirclePlusIC}
@@ -194,6 +196,17 @@ function ImagePackUpload({ onUpload }) {
           )}
         </div>
       </div>
+
+      {/* Emoji List Section */}
+      <div className="image-pack-upload__section">
+        <Text variant="s1" weight="medium">
+          Emoji List
+        </Text>
+        <div className="image-pack-upload__emoji-list">
+          {/* This section would need to receive the emoji list as a prop */}
+          <Text variant="b2">No emojis uploaded yet</Text>
+        </div>
+      </div>
     </div>
   );
 }

src/index.scss

@@ -307,15 +307,6 @@
   --bs-primary-border: inset 0 0 0 1px var(--bg-primary-border);
   --bs-primary-outline: 0 0 0 2px var(--bg-primary-border);
 
-  --bs-positive-border: inset 0 0 0 1px var(--bg-positive-border);
-  --bs-positive-outline: 0 0 0 2px var(--bg-positive-border);
-
-  --bs-caution-border: inset 0 0 0 1px var(--bg-caution-border);
-  --bs-caution-outline: 0 0 0 2px var(--bg-caution-border);
-
-  --bs-danger-border: inset 0 0 0 1px var(--bg-danger-border);
-  --bs-danger-outline: 0 0 0 2px var(--bg-danger-border);
-
   /* font styles: font-size, letter-spacing, line-hight */
   --fs-h1: 35.6px;
 
@@ -433,20 +424,6 @@
   --bg-overlay-low: rgba(17, 17, 27, 0.8);
 
   --bs-popup: 0 0 16px rgba(17, 17, 27, 0.25);
-  --bs-surface-border: inset 0 0 0 1px var(--bg-surface-border);
-  --bs-surface-outline: 0 0 0 2px var(--bg-surface-border);
-
-  --bs-primary-border: inset 0 0 0 1px var(--bg-primary-border);
-  --bs-primary-outline: 0 0 0 2px var(--bg-primary-border);
-
-  --bs-positive-border: inset 0 0 0 1px var(--bg-positive-border);
-  --bs-positive-outline: 0 0 0 2px var(--bg-positive-border);
-
-  --bs-caution-border: inset 0 0 0 1px var(--bg-caution-border);
-  --bs-caution-outline: 0 0 0 2px var(--bg-caution-border);
-
-  --bs-danger-border: inset 0 0 0 1px var(--bg-danger-border);
-  --bs-danger-outline: 0 0 0 2px var(--bg-danger-border);
 }
 
 .butter-theme {