@simple-builder/react 1.0.1 → 1.0.3

package/dist/index.css

@@ -121,556 +121,553 @@
   --tw-backdrop-saturate: ;
   --tw-backdrop-sepia: ;
 }
-.container {
+.sb-container {
   width: 100%;
 }
 @media (min-width: 640px) {
-  .container {
+  .sb-container {
     max-width: 640px;
   }
 }
 @media (min-width: 768px) {
-  .container {
+  .sb-container {
     max-width: 768px;
   }
 }
 @media (min-width: 1024px) {
-  .container {
+  .sb-container {
     max-width: 1024px;
   }
 }
 @media (min-width: 1280px) {
-  .container {
+  .sb-container {
     max-width: 1280px;
   }
 }
 @media (min-width: 1536px) {
-  .container {
+  .sb-container {
     max-width: 1536px;
   }
 }
-.pointer-events-none {
+.sb-pointer-events-none {
   pointer-events: none;
 }
-.invisible {
-  visibility: hidden;
-}
-.fixed {
+.sb-fixed {
   position: fixed;
 }
-.absolute {
+.sb-absolute {
   position: absolute;
 }
-.relative {
+.sb-relative {
   position: relative;
 }
-.sticky {
+.sb-sticky {
   position: sticky;
 }
-.inset-0 {
+.sb-inset-0 {
   inset: 0px;
 }
-.inset-x-0 {
+.sb-inset-x-0 {
   left: 0px;
   right: 0px;
 }
-.left-1 {
+.sb-left-1 {
   left: 0.25rem;
 }
-.left-1\/2 {
+.sb-left-1\/2 {
   left: 50%;
 }
-.left-3 {
+.sb-left-3 {
   left: 0.75rem;
 }
-.left-\[50\%\] {
+.sb-left-\[50\%\] {
   left: 50%;
 }
-.right-1 {
+.sb-right-1 {
   right: 0.25rem;
 }
-.right-3 {
+.sb-right-3 {
   right: 0.75rem;
 }
-.top-0 {
+.sb-top-0 {
   top: 0px;
 }
-.top-1 {
+.sb-top-1 {
   top: 0.25rem;
 }
-.top-1\/2 {
+.sb-top-1\/2 {
   top: 50%;
 }
-.top-\[50\%\] {
+.sb-top-\[50\%\] {
   top: 50%;
 }
-.-z-\[1\] {
+.sb--z-\[1\] {
   z-index: -1;
 }
-.z-20 {
+.sb-z-20 {
   z-index: 20;
 }
-.z-30 {
+.sb-z-30 {
   z-index: 30;
 }
-.z-50 {
+.sb-z-50 {
   z-index: 50;
 }
-.-my-\[2px\] {
+.sb--my-\[2px\] {
   margin-top: -2px;
   margin-bottom: -2px;
 }
-.mx-auto {
+.sb-mx-auto {
   margin-left: auto;
   margin-right: auto;
 }
-.mr-2 {
+.sb-mr-2 {
   margin-right: 0.5rem;
 }
-.mt-2 {
+.sb-mt-2 {
   margin-top: 0.5rem;
 }
-.block {
+.sb-block {
   display: block;
 }
-.flex {
+.sb-flex {
   display: flex;
 }
-.inline-flex {
+.sb-inline-flex {
   display: inline-flex;
 }
-.table {
-  display: table;
-}
-.grid {
+.sb-grid {
   display: grid;
 }
-.hidden {
+.sb-hidden {
   display: none;
 }
-.aspect-video {
+.sb-aspect-video {
   aspect-ratio: 16 / 9;
 }
-.h-1 {
+.sb-h-1 {
   height: 0.25rem;
 }
-.h-10 {
+.sb-h-10 {
   height: 2.5rem;
 }
-.h-11 {
+.sb-h-11 {
   height: 2.75rem;
 }
-.h-28 {
+.sb-h-28 {
   height: 7rem;
 }
-.h-4 {
+.sb-h-4 {
   height: 1rem;
 }
-.h-5 {
+.sb-h-5 {
   height: 1.25rem;
 }
-.h-6 {
+.sb-h-6 {
   height: 1.5rem;
 }
-.h-7 {
+.sb-h-7 {
   height: 1.75rem;
 }
-.h-8 {
+.sb-h-8 {
   height: 2rem;
 }
-.h-9 {
+.sb-h-9 {
   height: 2.25rem;
 }
-.h-auto {
+.sb-h-auto {
   height: auto;
 }
-.min-h-\[60px\] {
+.sb-min-h-\[60px\] {
   min-height: 60px;
 }
-.w-11 {
+.sb-w-11 {
   width: 2.75rem;
 }
-.w-28 {
+.sb-w-28 {
   width: 7rem;
 }
-.w-4 {
+.sb-w-4 {
   width: 1rem;
 }
-.w-5 {
+.sb-w-5 {
   width: 1.25rem;
 }
-.w-6 {
+.sb-w-6 {
   width: 1.5rem;
 }
-.w-64 {
+.sb-w-64 {
   width: 16rem;
 }
-.w-7 {
+.sb-w-7 {
   width: 1.75rem;
 }
-.w-72 {
+.sb-w-72 {
   width: 18rem;
 }
-.w-8 {
+.sb-w-8 {
   width: 2rem;
 }
-.w-auto {
+.sb-w-auto {
   width: auto;
 }
-.w-full {
+.sb-w-full {
   width: 100%;
 }
-.max-w-lg {
+.sb-max-w-lg {
   max-width: 32rem;
 }
-.flex-1 {
+.sb-flex-1 {
   flex: 1 1 0%;
 }
-.shrink-0 {
+.sb-shrink-0 {
   flex-shrink: 0;
 }
-.border-collapse {
+.sb-border-collapse {
   border-collapse: collapse;
 }
-.-translate-x-1\/2 {
+.sb--translate-x-1\/2 {
   --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-y-1\/2 {
+.sb--translate-y-1\/2 {
   --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));
 }
-.translate-x-\[-50\%\] {
+.sb-translate-x-\[-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-y-\[-50\%\] {
+.sb-translate-y-\[-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));
 }
-.-rotate-90 {
+.sb--rotate-90 {
   --tw-rotate: -90deg;
   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));
 }
-.rotate-180 {
+.sb-rotate-180 {
   --tw-rotate: 180deg;
   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));
 }
-.rotate-90 {
+.sb-rotate-90 {
   --tw-rotate: 90deg;
   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));
 }
-@keyframes spin {
+@keyframes sb-spin {
   to {
     transform: rotate(360deg);
   }
 }
-.animate-spin {
-  animation: spin 1s linear infinite;
+.sb-animate-spin {
+  animation: sb-spin 1s linear infinite;
 }
-.cursor-pointer {
+.sb-cursor-pointer {
   cursor: pointer;
 }
-.grid-cols-2 {
+.sb-grid-cols-2 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
-.grid-cols-3 {
+.sb-grid-cols-3 {
   grid-template-columns: repeat(3, minmax(0, 1fr));
 }
-.grid-cols-\[1fr\,auto\] {
+.sb-grid-cols-\[1fr\,auto\] {
   grid-template-columns: 1fr auto;
 }
-.flex-row {
+.sb-flex-row {
   flex-direction: row;
 }
-.flex-col {
+.sb-flex-col {
   flex-direction: column;
 }
-.flex-col-reverse {
+.sb-flex-col-reverse {
   flex-direction: column-reverse;
 }
-.flex-wrap {
+.sb-flex-wrap {
   flex-wrap: wrap;
 }
-.items-center {
+.sb-items-center {
   align-items: center;
 }
-.justify-start {
+.sb-justify-start {
   justify-content: flex-start;
 }
-.justify-end {
+.sb-justify-end {
   justify-content: flex-end;
 }
-.justify-center {
+.sb-justify-center {
   justify-content: center;
 }
-.justify-between {
+.sb-justify-between {
   justify-content: space-between;
 }
-.gap-1 {
+.sb-gap-1 {
   gap: 0.25rem;
 }
-.gap-2 {
+.sb-gap-2 {
   gap: 0.5rem;
 }
-.gap-3 {
+.sb-gap-3 {
   gap: 0.75rem;
 }
-.gap-4 {
+.sb-gap-4 {
   gap: 1rem;
 }
-.space-x-1 > :not([hidden]) ~ :not([hidden]) {
+.sb-space-x-1 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.25rem * var(--tw-space-x-reverse));
   margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
 }
-.space-x-6 > :not([hidden]) ~ :not([hidden]) {
+.sb-space-x-6 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(1.5rem * var(--tw-space-x-reverse));
   margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
-.space-y-0 > :not([hidden]) ~ :not([hidden]) {
+.sb-space-y-0 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(0px * var(--tw-space-y-reverse));
 }
-.space-y-1 > :not([hidden]) ~ :not([hidden]) {
+.sb-space-y-1 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
 }
-.space-y-2 > :not([hidden]) ~ :not([hidden]) {
+.sb-space-y-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }
-.space-y-4 > :not([hidden]) ~ :not([hidden]) {
+.sb-space-y-4 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(1rem * var(--tw-space-y-reverse));
 }
-.overflow-hidden {
+.sb-overflow-hidden {
   overflow: hidden;
 }
-.truncate {
+.sb-truncate {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.whitespace-nowrap {
+.sb-whitespace-nowrap {
   white-space: nowrap;
 }
-.rounded {
+.sb-rounded {
   border-radius: 0.25rem;
 }
-.rounded-full {
+.sb-rounded-full {
   border-radius: 9999px;
 }
-.rounded-lg {
+.sb-rounded-lg {
   border-radius: var(--sb-radius);
 }
-.rounded-md {
+.sb-rounded-md {
   border-radius: calc(var(--sb-radius) - 2px);
 }
-.border {
+.sb-border {
   border-width: 1px;
 }
-.border-2 {
+.sb-border-2 {
   border-width: 2px;
 }
-.border-b {
+.sb-border-b {
   border-bottom-width: 1px;
 }
-.border-b-2 {
+.sb-border-b-2 {
   border-bottom-width: 2px;
 }
-.border-sb-input {
+.sb-border-input {
   border-color: hsl(var(--sb-input));
 }
-.border-transparent {
+.sb-border-transparent {
   border-color: transparent;
 }
-.bg-sb-accent {
+.sb-bg-accent {
   background-color: hsl(var(--sb-accent));
 }
-.bg-sb-background {
+.sb-bg-background {
   background-color: hsl(var(--sb-background));
 }
-.bg-sb-background\/80 {
+.sb-bg-background\/80 {
   background-color: hsl(var(--sb-background) / 0.8);
 }
-.bg-sb-card {
+.sb-bg-card {
   background-color: hsl(var(--sb-card));
 }
-.bg-sb-destructive {
+.sb-bg-destructive {
   background-color: hsl(var(--sb-destructive));
 }
-.bg-sb-popover {
+.sb-bg-popover {
   background-color: hsl(var(--sb-popover));
 }
-.bg-sb-primary {
+.sb-bg-primary {
   background-color: hsl(var(--sb-primary));
 }
-.bg-sb-primary\/50 {
+.sb-bg-primary\/50 {
   background-color: hsl(var(--sb-primary) / 0.5);
 }
-.bg-sb-secondary {
+.sb-bg-secondary {
   background-color: hsl(var(--sb-secondary));
 }
-.bg-transparent {
+.sb-bg-transparent {
   background-color: transparent;
 }
-.\!bg-cover {
+.\!sb-bg-cover {
   background-size: cover !important;
 }
-.bg-cover {
+.sb-bg-cover {
   background-size: cover;
 }
-.\!bg-center {
+.\!sb-bg-center {
   background-position: center !important;
 }
-.bg-center {
+.sb-bg-center {
   background-position: center;
 }
-.object-cover {
+.sb-object-cover {
   -o-object-fit: cover;
   object-fit: cover;
 }
-.p-0 {
+.sb-p-0 {
   padding: 0px;
 }
-.p-1 {
+.sb-p-1 {
   padding: 0.25rem;
 }
-.p-2 {
+.sb-p-2 {
   padding: 0.5rem;
 }
-.p-3 {
+.sb-p-3 {
   padding: 0.75rem;
 }
-.p-4 {
+.sb-p-4 {
   padding: 1rem;
 }
-.p-6 {
+.sb-p-6 {
   padding: 1.5rem;
 }
-.px-2 {
+.sb-px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
-.px-2\.5 {
+.sb-px-2\.5 {
   padding-left: 0.625rem;
   padding-right: 0.625rem;
 }
-.px-3 {
+.sb-px-3 {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
 }
-.px-4 {
+.sb-px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
 }
-.px-5 {
+.sb-px-5 {
   padding-left: 1.25rem;
   padding-right: 1.25rem;
 }
-.py-1 {
+.sb-py-1 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
 }
-.py-2 {
+.sb-py-2 {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
-.py-3 {
+.sb-py-3 {
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
 }
-.pl-9 {
+.sb-pl-9 {
   padding-left: 2.25rem;
 }
-.pr-7 {
+.sb-pr-7 {
   padding-right: 1.75rem;
 }
-.pt-1 {
+.sb-pt-1 {
   padding-top: 0.25rem;
 }
-.text-left {
+.sb-text-left {
   text-align: left;
 }
-.text-center {
+.sb-text-center {
   text-align: center;
 }
-.text-right {
+.sb-text-right {
   text-align: right;
 }
-.font-roboto {
+.sb-font-roboto {
   font-family: Roboto, sans-serif;
 }
-.text-\[0\.8rem\] {
+.sb-text-\[0\.8rem\] {
   font-size: 0.8rem;
 }
-.text-lg {
+.sb-text-lg {
   font-size: 1.125rem;
   line-height: 1.75rem;
 }
-.text-sm {
+.sb-text-sm {
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
-.text-xs {
+.sb-text-xs {
   font-size: 0.75rem;
   line-height: 1rem;
 }
-.font-medium {
+.sb-font-medium {
   font-weight: 500;
 }
-.font-normal {
+.sb-font-normal {
   font-weight: 400;
 }
-.font-semibold {
+.sb-font-semibold {
   font-weight: 600;
 }
-.uppercase {
+.sb-uppercase {
   text-transform: uppercase;
 }
-.normal-case {
+.sb-normal-case {
   text-transform: none;
 }
-.leading-none {
+.sb-leading-none {
   line-height: 1;
 }
-.text-sb-accent-foreground {
+.sb-text-accent-foreground {
   color: hsl(var(--sb-accent-foreground));
 }
-.text-sb-destructive {
+.sb-text-card-foreground {
+  color: hsl(var(--sb-card-foreground));
+}
+.sb-text-destructive {
   color: hsl(var(--sb-destructive));
 }
-.text-sb-destructive-foreground {
+.sb-text-destructive-foreground {
   color: hsl(var(--sb-destructive-foreground));
 }
-.text-sb-muted-foreground {
+.sb-text-muted-foreground {
   color: hsl(var(--sb-muted-foreground));
 }
-.text-sb-popover-foreground {
+.sb-text-popover-foreground {
   color: hsl(var(--sb-popover-foreground));
 }
-.text-sb-primary-foreground {
+.sb-text-primary-foreground {
   color: hsl(var(--sb-primary-foreground));
 }
-.text-sb-secondary-foreground {
+.sb-text-secondary-foreground {
   color: hsl(var(--sb-secondary-foreground));
 }
-.opacity-0 {
+.sb-opacity-0 {
   opacity: 0;
 }
-.opacity-50 {
+.sb-opacity-50 {
   opacity: 0.5;
 }
-.opacity-90 {
+.sb-opacity-90 {
   opacity: 0.9;
 }
-.shadow {
+.sb-shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
   box-shadow:
@@ -678,7 +675,7 @@
     var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
 }
-.shadow-lg {
+.sb-shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
   box-shadow:
@@ -686,7 +683,7 @@
     var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
 }
-.shadow-md {
+.sb-shadow-md {
   --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
   box-shadow:
@@ -694,7 +691,7 @@
     var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
 }
-.shadow-sm {
+.sb-shadow-sm {
   --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
   box-shadow:
@@ -702,14 +699,11 @@
     var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
 }
-.outline-none {
+.sb-outline-none {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
-.outline {
-  outline-style: solid;
-}
-.ring-0 {
+.sb-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:
@@ -717,23 +711,20 @@
     var(--tw-ring-shadow),
     var(--tw-shadow, 0 0 #0000);
 }
-.ring-offset-sb-background {
+.sb-ring-offset-background {
   --tw-ring-offset-color: hsl(var(--sb-background));
 }
-.filter {
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-.backdrop-blur-sm {
+.sb-backdrop-blur-sm {
   --tw-backdrop-blur: blur(4px);
   -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
   backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
 }
-.transition-all {
+.sb-transition-all {
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
-.transition-colors {
+.sb-transition-colors {
   transition-property:
     color,
     background-color,
@@ -744,17 +735,17 @@
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
-.transition-opacity {
+.sb-transition-opacity {
   transition-property: opacity;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
-.transition-transform {
+.sb-transition-transform {
   transition-property: transform;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
-.duration-200 {
+.sb-duration-200 {
   transition-duration: 200ms;
 }
 @keyframes enter {
@@ -769,7 +760,7 @@
     transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
   }
 }
-.duration-200 {
+.sb-duration-200 {
   animation-duration: 200ms;
 }
 @font-face {
@@ -857,69 +848,69 @@
 .sb-container-item:has(.sb-container-item:hover) > .sb-item-toolbar {
   opacity: 0;
 }
-.file\:border-0::file-selector-button {
+.file\:sb-border-0::file-selector-button {
   border-width: 0px;
 }
-.file\:bg-transparent::file-selector-button {
+.file\:sb-bg-transparent::file-selector-button {
   background-color: transparent;
 }
-.file\:text-sm::file-selector-button {
+.file\:sb-text-sm::file-selector-button {
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
-.file\:font-medium::file-selector-button {
+.file\:sb-font-medium::file-selector-button {
   font-weight: 500;
 }
-.placeholder\:text-sb-muted-foreground::-moz-placeholder {
+.placeholder\:sb-text-muted-foreground::-moz-placeholder {
   color: hsl(var(--sb-muted-foreground));
 }
-.placeholder\:text-sb-muted-foreground::placeholder {
+.placeholder\:sb-text-muted-foreground::placeholder {
   color: hsl(var(--sb-muted-foreground));
 }
-.focus-within\:relative:focus-within {
+.focus-within\:sb-relative:focus-within {
   position: relative;
 }
-.focus-within\:z-20:focus-within {
+.focus-within\:sb-z-20:focus-within {
   z-index: 20;
 }
-.hover\:bg-sb-accent:hover {
+.hover\:sb-bg-accent:hover {
   background-color: hsl(var(--sb-accent));
 }
-.hover\:bg-sb-destructive\/90:hover {
+.hover\:sb-bg-destructive\/90:hover {
   background-color: hsl(var(--sb-destructive) / 0.9);
 }
-.hover\:bg-sb-muted:hover {
+.hover\:sb-bg-muted:hover {
   background-color: hsl(var(--sb-muted));
 }
-.hover\:bg-sb-primary:hover {
+.hover\:sb-bg-primary:hover {
   background-color: hsl(var(--sb-primary));
 }
-.hover\:bg-sb-primary\/90:hover {
+.hover\:sb-bg-primary\/90:hover {
   background-color: hsl(var(--sb-primary) / 0.9);
 }
-.hover\:text-sb-accent-foreground:hover {
+.hover\:sb-text-accent-foreground:hover {
   color: hsl(var(--sb-accent-foreground));
 }
-.hover\:text-sb-muted-foreground:hover {
+.hover\:sb-text-muted-foreground:hover {
   color: hsl(var(--sb-muted-foreground));
 }
-.hover\:text-sb-primary-foreground:hover {
+.hover\:sb-text-primary-foreground:hover {
   color: hsl(var(--sb-primary-foreground));
 }
-.hover\:opacity-100:hover {
+.hover\:sb-opacity-100:hover {
   opacity: 1;
 }
-.focus\:bg-sb-primary:focus {
+.focus\:sb-bg-primary:focus {
   background-color: hsl(var(--sb-primary));
 }
-.focus\:text-sb-primary-foreground:focus {
+.focus\:sb-text-primary-foreground:focus {
   color: hsl(var(--sb-primary-foreground));
 }
-.focus-visible\:outline-none:focus-visible {
+.focus-visible\:sb-outline-none:focus-visible {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
-.focus-visible\:ring-1:focus-visible {
+.focus-visible\:sb-ring-1:focus-visible {
   --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(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow:
@@ -927,7 +918,7 @@
     var(--tw-ring-shadow),
     var(--tw-shadow, 0 0 #0000);
 }
-.focus-visible\:ring-2:focus-visible {
+.focus-visible\:sb-ring-2:focus-visible {
   --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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow:
@@ -935,87 +926,87 @@
     var(--tw-ring-shadow),
     var(--tw-shadow, 0 0 #0000);
 }
-.focus-visible\:ring-sb-ring:focus-visible {
+.focus-visible\:sb-ring-ring:focus-visible {
   --tw-ring-color: hsl(var(--sb-ring));
 }
-.focus-visible\:ring-offset-2:focus-visible {
+.focus-visible\:sb-ring-offset-2:focus-visible {
   --tw-ring-offset-width: 2px;
 }
-.focus-visible\:ring-offset-sb-background:focus-visible {
+.focus-visible\:sb-ring-offset-background:focus-visible {
   --tw-ring-offset-color: hsl(var(--sb-background));
 }
-.active\:scale-105:active {
+.active\:sb-scale-105:active {
   --tw-scale-x: 1.05;
   --tw-scale-y: 1.05;
   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));
 }
-.disabled\:pointer-events-none:disabled {
+.disabled\:sb-pointer-events-none:disabled {
   pointer-events: none;
 }
-.disabled\:cursor-not-allowed:disabled {
+.disabled\:sb-cursor-not-allowed:disabled {
   cursor: not-allowed;
 }
-.disabled\:opacity-50:disabled {
+.disabled\:sb-opacity-50:disabled {
   opacity: 0.5;
 }
-.group:hover .group-hover\:opacity-100 {
+.sb-group:hover .group-hover\:sb-opacity-100 {
   opacity: 1;
 }
-.peer:disabled ~ .peer-disabled\:cursor-not-allowed {
+.sb-peer:disabled ~ .peer-disabled\:sb-cursor-not-allowed {
   cursor: not-allowed;
 }
-.peer:disabled ~ .peer-disabled\:opacity-70 {
+.sb-peer:disabled ~ .peer-disabled\:sb-opacity-70 {
   opacity: 0.7;
 }
-.aria-selected\:bg-sb-accent[aria-selected=true] {
+.aria-selected\:sb-bg-accent[aria-selected=true] {
   background-color: hsl(var(--sb-accent));
 }
-.aria-selected\:bg-sb-accent\/50[aria-selected=true] {
+.aria-selected\:sb-bg-accent\/50[aria-selected=true] {
   background-color: hsl(var(--sb-accent) / 0.5);
 }
-.aria-selected\:text-sb-accent-foreground[aria-selected=true] {
+.aria-selected\:sb-text-accent-foreground[aria-selected=true] {
   color: hsl(var(--sb-accent-foreground));
 }
-.aria-selected\:text-sb-muted-foreground[aria-selected=true] {
+.aria-selected\:sb-text-muted-foreground[aria-selected=true] {
   color: hsl(var(--sb-muted-foreground));
 }
-.aria-selected\:opacity-100[aria-selected=true] {
+.aria-selected\:sb-opacity-100[aria-selected=true] {
   opacity: 1;
 }
-.aria-selected\:opacity-30[aria-selected=true] {
+.aria-selected\:sb-opacity-30[aria-selected=true] {
   opacity: 0.3;
 }
-.data-\[state\=active\]\:flex[data-state=active] {
+.data-\[state\=active\]\:sb-flex[data-state=active] {
   display: flex;
 }
-.data-\[state\=checked\]\:translate-x-5[data-state=checked] {
+.data-\[state\=checked\]\:sb-translate-x-5[data-state=checked] {
   --tw-translate-x: 1.25rem;
   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));
 }
-.data-\[state\=unchecked\]\:translate-x-0[data-state=unchecked] {
+.data-\[state\=unchecked\]\:sb-translate-x-0[data-state=unchecked] {
   --tw-translate-x: 0px;
   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));
 }
-.data-\[state\=active\]\:border-black[data-state=active] {
+.data-\[state\=active\]\:sb-border-black[data-state=active] {
   --tw-border-opacity: 1;
   border-color: rgb(0 0 0 / var(--tw-border-opacity));
 }
-.data-\[state\=checked\]\:bg-sb-primary[data-state=checked] {
+.data-\[state\=checked\]\:sb-bg-primary[data-state=checked] {
   background-color: hsl(var(--sb-primary));
 }
-.data-\[state\=on\]\:bg-sb-accent[data-state=on] {
+.data-\[state\=on\]\:sb-bg-accent[data-state=on] {
   background-color: hsl(var(--sb-accent));
 }
-.data-\[state\=unchecked\]\:bg-sb-input[data-state=unchecked] {
+.data-\[state\=unchecked\]\:sb-bg-input[data-state=unchecked] {
   background-color: hsl(var(--sb-input));
 }
-.data-\[state\=active\]\:text-sb-foreground[data-state=active] {
+.data-\[state\=active\]\:sb-text-foreground[data-state=active] {
   color: hsl(var(--sb-foreground));
 }
-.data-\[state\=on\]\:text-sb-accent-foreground[data-state=on] {
+.data-\[state\=on\]\:sb-text-accent-foreground[data-state=on] {
   color: hsl(var(--sb-accent-foreground));
 }
-.data-\[state\=open\]\:animate-in[data-state=open] {
+.data-\[state\=open\]\:sb-animate-in[data-state=open] {
   animation-name: enter;
   animation-duration: 150ms;
   --tw-enter-opacity: initial;
@@ -1024,7 +1015,7 @@
   --tw-enter-translate-x: initial;
   --tw-enter-translate-y: initial;
 }
-.data-\[state\=closed\]\:animate-out[data-state=closed] {
+.data-\[state\=closed\]\:sb-animate-out[data-state=closed] {
   animation-name: exit;
   animation-duration: 150ms;
   --tw-exit-opacity: initial;
@@ -1033,100 +1024,100 @@
   --tw-exit-translate-x: initial;
   --tw-exit-translate-y: initial;
 }
-.data-\[state\=closed\]\:fade-out-0[data-state=closed] {
+.data-\[state\=closed\]\:sb-fade-out-0[data-state=closed] {
   --tw-exit-opacity: 0;
 }
-.data-\[state\=open\]\:fade-in-0[data-state=open] {
+.data-\[state\=open\]\:sb-fade-in-0[data-state=open] {
   --tw-enter-opacity: 0;
 }
-.data-\[state\=closed\]\:zoom-out-95[data-state=closed] {
+.data-\[state\=closed\]\:sb-zoom-out-95[data-state=closed] {
   --tw-exit-scale: .95;
 }
-.data-\[state\=open\]\:zoom-in-95[data-state=open] {
+.data-\[state\=open\]\:sb-zoom-in-95[data-state=open] {
   --tw-enter-scale: .95;
 }
-.data-\[side\=bottom\]\:slide-in-from-top-2[data-side=bottom] {
+.data-\[side\=bottom\]\:sb-slide-in-from-top-2[data-side=bottom] {
   --tw-enter-translate-y: -0.5rem;
 }
-.data-\[side\=left\]\:slide-in-from-right-2[data-side=left] {
+.data-\[side\=left\]\:sb-slide-in-from-right-2[data-side=left] {
   --tw-enter-translate-x: 0.5rem;
 }
-.data-\[side\=right\]\:slide-in-from-left-2[data-side=right] {
+.data-\[side\=right\]\:sb-slide-in-from-left-2[data-side=right] {
   --tw-enter-translate-x: -0.5rem;
 }
-.data-\[side\=top\]\:slide-in-from-bottom-2[data-side=top] {
+.data-\[side\=top\]\:sb-slide-in-from-bottom-2[data-side=top] {
   --tw-enter-translate-y: 0.5rem;
 }
-.data-\[state\=closed\]\:slide-out-to-left-1\/2[data-state=closed] {
+.data-\[state\=closed\]\:sb-slide-out-to-left-1\/2[data-state=closed] {
   --tw-exit-translate-x: -50%;
 }
-.data-\[state\=closed\]\:slide-out-to-top-\[48\%\][data-state=closed] {
+.data-\[state\=closed\]\:sb-slide-out-to-top-\[48\%\][data-state=closed] {
   --tw-exit-translate-y: -48%;
 }
-.data-\[state\=open\]\:slide-in-from-left-1\/2[data-state=open] {
+.data-\[state\=open\]\:sb-slide-in-from-left-1\/2[data-state=open] {
   --tw-enter-translate-x: -50%;
 }
-.data-\[state\=open\]\:slide-in-from-top-\[48\%\][data-state=open] {
+.data-\[state\=open\]\:sb-slide-in-from-top-\[48\%\][data-state=open] {
   --tw-enter-translate-y: -48%;
 }
 @media (min-width: 640px) {
-  .sm\:mt-0 {
+  .sm\:sb-mt-0 {
     margin-top: 0px;
   }
-  .sm\:flex-row {
+  .sm\:sb-flex-row {
     flex-direction: row;
   }
-  .sm\:justify-end {
+  .sm\:sb-justify-end {
     justify-content: flex-end;
   }
-  .sm\:space-x-2 > :not([hidden]) ~ :not([hidden]) {
+  .sm\:sb-space-x-2 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-x-reverse: 0;
     margin-right: calc(0.5rem * var(--tw-space-x-reverse));
     margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
   }
-  .sm\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
+  .sm\:sb-space-x-4 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-x-reverse: 0;
     margin-right: calc(1rem * var(--tw-space-x-reverse));
     margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
   }
-  .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
+  .sm\:sb-space-y-0 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-y-reverse: 0;
     margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
     margin-bottom: calc(0px * var(--tw-space-y-reverse));
   }
-  .sm\:rounded-lg {
+  .sm\:sb-rounded-lg {
     border-radius: var(--sb-radius);
   }
-  .sm\:text-left {
+  .sm\:sb-text-left {
     text-align: left;
   }
 }
-.\[\&\:has\(\>\.day-range-end\)\]\:rounded-r-md:has(> .day-range-end) {
+.\[\&\:has\(\>\.day-range-end\)\]\:sb-rounded-r-md:has(> .day-range-end) {
   border-top-right-radius: calc(var(--sb-radius) - 2px);
   border-bottom-right-radius: calc(var(--sb-radius) - 2px);
 }
-.\[\&\:has\(\>\.day-range-start\)\]\:rounded-l-md:has(> .day-range-start) {
+.\[\&\:has\(\>\.day-range-start\)\]\:sb-rounded-l-md:has(> .day-range-start) {
   border-top-left-radius: calc(var(--sb-radius) - 2px);
   border-bottom-left-radius: calc(var(--sb-radius) - 2px);
 }
-.\[\&\:has\(\[aria-selected\]\)\]\:rounded-md:has([aria-selected]) {
+.\[\&\:has\(\[aria-selected\]\)\]\:sb-rounded-md:has([aria-selected]) {
   border-radius: calc(var(--sb-radius) - 2px);
 }
-.\[\&\:has\(\[aria-selected\]\)\]\:bg-sb-accent:has([aria-selected]) {
+.\[\&\:has\(\[aria-selected\]\)\]\:sb-bg-accent:has([aria-selected]) {
   background-color: hsl(var(--sb-accent));
 }
-.first\:\[\&\:has\(\[aria-selected\]\)\]\:rounded-l-md:has([aria-selected]):first-child {
+.first\:\[\&\:has\(\[aria-selected\]\)\]\:sb-rounded-l-md:has([aria-selected]):first-child {
   border-top-left-radius: calc(var(--sb-radius) - 2px);
   border-bottom-left-radius: calc(var(--sb-radius) - 2px);
 }
-.last\:\[\&\:has\(\[aria-selected\]\)\]\:rounded-r-md:has([aria-selected]):last-child {
+.last\:\[\&\:has\(\[aria-selected\]\)\]\:sb-rounded-r-md:has([aria-selected]):last-child {
   border-top-right-radius: calc(var(--sb-radius) - 2px);
   border-bottom-right-radius: calc(var(--sb-radius) - 2px);
 }
-.\[\&\:has\(\[aria-selected\]\.day-outside\)\]\:bg-sb-accent\/50:has([aria-selected].day-outside) {
+.\[\&\:has\(\[aria-selected\]\.day-outside\)\]\:sb-bg-accent\/50:has([aria-selected].day-outside) {
   background-color: hsl(var(--sb-accent) / 0.5);
 }
-.\[\&\:has\(\[aria-selected\]\.day-range-end\)\]\:rounded-r-md:has([aria-selected].day-range-end) {
+.\[\&\:has\(\[aria-selected\]\.day-range-end\)\]\:sb-rounded-r-md:has([aria-selected].day-range-end) {
   border-top-right-radius: calc(var(--sb-radius) - 2px);
   border-bottom-right-radius: calc(var(--sb-radius) - 2px);
 }