Fix build emoji upload styles and settings styles

src/app/atoms/button/Button.scss

@@ -25,7 +25,6 @@
 
   &--icon {
     @include dir.side(padding, var(--sp-tight), var(--sp-loose));
-
   }
   .ic-raw {
     @include dir.side(margin, 0, var(--sp-extra-tight));
@@ -42,7 +41,6 @@
   }
 }
 
-
 .btn-surface {
   box-shadow: var(--bs-surface-border);
   @include color(var(--tc-surface-high), var(--ic-surface-normal));

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

@@ -125,7 +125,6 @@ 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
@@ -154,7 +153,6 @@ function ImagePackUpload({ onUpload }) {
         </form>
       </div>
 
-      {/* Bulk Upload Section */}
       <div className="image-pack-upload__section">
         <Text variant="s1" weight="medium">
           Bulk Upload
@@ -181,7 +179,7 @@ function ImagePackUpload({ onUpload }) {
           {bulkFiles.length > 0 && (
             <div className="image-pack-upload__bulk-files">
               {bulkFiles.map((file, index) => (
-                <div key={index} className="image-pack-upload__bulk-file">
+                <div key={file.file.name} className="image-pack-upload__bulk-file">
                   <IconButton
                     onClick={() => handleRemoveBulkFile(index)}
                     src={CirclePlusIC}
@@ -196,17 +194,6 @@ 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,6 +307,15 @@
   --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;
 
@@ -424,6 +433,20 @@
   --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 {