wip: prepare for packaging

.storybook/output.css

@@ -727,14 +727,6 @@ select {
   left: 50%;
 }
 
-.top-1\/2 {
-  top: 50%;
-}
-
-.right-2 {
-  right: 0.5rem;
-}
-
 .left-0 {
   left: 0px;
 }
@@ -743,6 +735,10 @@ select {
   right: 0px;
 }
 
+.top-1\/2 {
+  top: 50%;
+}
+
 .left-1\/2 {
   left: 50%;
 }
@@ -755,6 +751,10 @@ select {
   right: 0.75rem;
 }
 
+.right-2 {
+  right: 0.5rem;
+}
+
 .isolate {
   isolation: isolate;
 }
@@ -775,14 +775,6 @@ select {
   margin-left: 0.5rem;
 }
 
-.-mt-2 {
-  margin-top: -0.5rem;
-}
-
-.-mt-1 {
-  margin-top: -0.25rem;
-}
-
 .box-border {
   box-sizing: border-box;
 }
@@ -803,18 +795,10 @@ select {
   height: 100%;
 }
 
-.h-\[2px\] {
-  height: 2px;
-}
-
 .h-4 {
   height: 1rem;
 }
 
-.h-9 {
-  height: 2.25rem;
-}
-
 .h-\[1\.5px\] {
   height: 1.5px;
 }
@@ -861,13 +845,13 @@ select {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.-translate-y-1\/2 {
+.-translate-x-1\/2 {
-  --tw-translate-y: -50%;
+  --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.-translate-x-1\/2 {
+.-translate-y-1\/2 {
-  --tw-translate-x: -50%;
+  --tw-translate-y: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
@@ -946,14 +930,14 @@ select {
   border-radius: 9999px;
 }
 
-.rounded-sm {
-  border-radius: 0.125rem;
-}
-
 .rounded-md {
   border-radius: 0.375rem;
 }
 
+.rounded-sm {
+  border-radius: 0.125rem;
+}
+
 .border-2 {
   border-width: 2px;
 }
@@ -966,10 +950,6 @@ select {
   border-width: 1px;
 }
 
-.border-b {
-  border-bottom-width: 1px;
-}
-
 .border-mono-border {
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
@@ -995,6 +975,10 @@ select {
   background-color: rgb(39 39 42 / var(--tw-bg-opacity));
 }
 
+.bg-transparent {
+  background-color: transparent;
+}
+
 .bg-mono-border {
   --tw-bg-opacity: 1;
   background-color: rgb(209 213 219 / var(--tw-bg-opacity));
@@ -1005,10 +989,6 @@ select {
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
 }
 
-.bg-transparent {
-  background-color: transparent;
-}
-
 .bg-opacity-50 {
   --tw-bg-opacity: 0.5;
 }
@@ -1098,11 +1078,6 @@ select {
   padding-right: 0px;
 }
 
-.px-0\.5 {
-  padding-left: 0.125rem;
-  padding-right: 0.125rem;
-}
-
 .pr-12 {
   padding-right: 3rem;
 }
@@ -1175,30 +1150,15 @@ select {
   color: rgb(239 68 68 / var(--tw-text-opacity));
 }
 
-.text-mono-border {
-  --tw-text-opacity: 1;
-  color: rgb(209 213 219 / var(--tw-text-opacity));
-}
-
 .opacity-0 {
   opacity: 0;
 }
 
-.opacity-50 {
-  opacity: 0.5;
-}
-
 .outline-none {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
 
-.ring-0 {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-}
-
 @keyframes enter {
   from {
     opacity: var(--tw-enter-opacity, 1);

src/index.ts

@@ -1,3 +1,8 @@
 export { Box } from "./components/Box";
 export { Button } from "./components/Button";
+export { Card } from "./components/Card";
+export { Divider } from "./components/Divider";
+export { Input } from "./components/Input";
+export { Modal } from "./components/Modal";
+export { Select } from "./components/Select";
 export { cx } from "./utils";