From e11057e8bcca190c26353e21bf0e73135805432d Mon Sep 17 00:00:00 2001
From: Krishan Patel <krishan711@gmail.com>
Date: Sun, 30 Nov 2025 15:30:41 +0000
Subject: [PATCH] .

---
 package.json    | 11 ++++++++++-
 src/styles.scss | 37 +++++++++++++++++++++----------------
 2 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/package.json b/package.json
index e3b0159..7971b3f 100644
--- a/package.json
+++ b/package.json
@@ -16,8 +16,17 @@
     "*.scss",
     "*.css"
   ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/index.css",
+    "./styles.scss": "./src/styles.scss"
+  },
   "files": [
-    "dist/*"
+    "dist/*",
+    "src/styles.scss"
   ],
   "dependencies": {
     "@kibalabs/core": "^0.6.3-next.4",
diff --git a/src/styles.scss b/src/styles.scss
index 7ea0605..ca3553d 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -9,6 +9,7 @@
     transition-duration: 0.3s;
     width: 100%;
     height: 100%;
+    box-sizing: border-box;
     &.disabled {
       cursor: not-allowed;
     }
@@ -18,33 +19,37 @@
 @layer kiba-theme {
   .KibaDropzone {
     --kiba-icon-size: 1.2em;
-    padding: var(--kiba-dropzone-padding, 0.75em 1em);
-    background-color: var(--kiba-dropzone-background-color, rgba(0, 0, 0, 0.02));
-    border-width: var(--kiba-dropzone-border-width, 1px);
-    border-color: var(--kiba-dropzone-border-color, rgba(0, 0, 0, 0.15));
-    border-style: var(--kiba-dropzone-border-style, dashed);
-    border-radius: var(--kiba-dropzone-border-radius, 0.25em);
-    color: var(--kiba-dropzone-color, rgba(0, 0, 0, 0.4));
+    padding: var(--kiba-padding-wide, 1em) var(--kiba-padding-wide2, 1.5em);
+    background-color: var(--kiba-color-background-light05, rgba(0, 0, 0, 0.02));
+    border-width: var(--kiba-border-width, 1px);
+    border-color: var(--kiba-color-text-clear75, rgba(0, 0, 0, 0.25));
+    border-style: dashed;
+    border-radius: var(--kiba-border-radius, 0.5em);
+    color: var(--kiba-color-text-clear50, rgba(0, 0, 0, 0.5));
     text-align: center;
-    font-size: var(--kiba-dropzone-font-size, 1rem);
+    font-size: var(--kiba-font-size, 1rem);
     &:hover {
-      border-color: var(--kiba-dropzone-hover-border-color, rgba(0, 0, 0, 0.5));
-      color: var(--kiba-dropzone-hover-color, rgba(0, 0, 0, 0.5));
+      border-color: var(--kiba-color-brand-primary-clear50, rgba(0, 0, 0, 0.5));
+      color: var(--kiba-color-text-clear25, rgba(0, 0, 0, 0.75));
     }
     &:active {
-      border-color: var(--kiba-dropzone-active-border-color, rgba(0, 0, 0, 0.75));
-      color: var(--kiba-dropzone-active-color, rgba(0, 0, 0, 0.5));
+      border-color: var(--kiba-color-brand-primary, rgba(0, 0, 0, 0.75));
+      color: var(--kiba-color-text, rgba(0, 0, 0, 0.9));
     }
     &:focus {
       outline: none;
+      border-color: var(--kiba-color-brand-primary-clear50, rgba(0, 0, 0, 0.5));
     }
     &.fileHovering {
-      border-color: var(--kiba-dropzone-file-hover-border-color, rgba(0, 0, 0, 0.75));
-      color: var(--kiba-dropzone-file-hover-color, rgba(0, 0, 0, 0.75));
+      border-color: var(--kiba-color-brand-primary, rgba(0, 0, 0, 0.75));
+      border-style: solid;
+      background-color: var(--kiba-color-brand-primary-clear90, rgba(0, 0, 0, 0.05));
+      color: var(--kiba-color-brand-primary, rgba(0, 0, 0, 0.75));
     }
     &.disabled {
-      background-color: var(--kiba-dropzone-disabled-background-color, rgba(128, 128, 128, 0.5));
-      color: var(--kiba-dropzone-disabled-color, rgba(128, 128, 128, 1));
+      background-color: var(--kiba-color-background-dark10, rgba(128, 128, 128, 0.1));
+      color: var(--kiba-color-text-clear75, rgba(128, 128, 128, 0.5));
+      border-color: var(--kiba-color-text-clear90, rgba(128, 128, 128, 0.25));
     }
   }
 }