@rovula/ui 0.0.26 → 0.0.28

package/dist/src/theme/global.css

@@ -1275,7 +1275,7 @@
   --state-color-error-text-hover: #ff4d35;
   --state-color-error-text-pressed: #a5210f;
   --state-color-disable-solid: #454f5b;
-  --state-color-disable-outline: #637381;
+  --state-color-disable-outline: #D3DADF;
   /* Base from design */
   --input-color-default-text: #9e9e9e;
   --input-color-default-stroke: rgba(158 158 158 / 0.24);
@@ -2121,6 +2121,10 @@ body {
   pointer-events: none;
 }
 
+.pointer-events-auto {
+  pointer-events: auto;
+}
+
 .static {
   position: static;
 }
@@ -2162,6 +2166,10 @@ body {
   top: -0.375rem;
 }
 
+.bottom-\[40px\] {
+  bottom: 40px;
+}
+
 .left-0 {
   left: 0px;
 }
@@ -2206,6 +2214,10 @@ body {
   top: 1rem;
 }
 
+.top-\[40px\] {
+  top: 40px;
+}
+
 .top-\[50\%\] {
   top: 50%;
 }
@@ -2222,6 +2234,10 @@ body {
   z-index: 50;
 }
 
+.z-\[100\] {
+  z-index: 100;
+}
+
 .col-span-3 {
   grid-column: span 3 / span 3;
 }
@@ -2245,6 +2261,10 @@ body {
   margin-bottom: 0.5rem;
 }
 
+.-mr-2 {
+  margin-right: -0.5rem;
+}
+
 .ml-2 {
   margin-left: 0.5rem;
 }
@@ -2257,6 +2277,10 @@ body {
   margin-left: 1rem;
 }
 
+.ml-\[var\(--spacing-spacing-xl\)\] {
+  margin-left: var(--spacing-spacing-xl);
+}
+
 .ml-auto {
   margin-left: auto;
 }
@@ -2419,6 +2443,10 @@ body {
   height: 1.5rem;
 }
 
+.h-60 {
+  height: 15rem;
+}
+
 .h-\[120px\] {
   height: 120px;
 }
@@ -2480,6 +2508,10 @@ body {
   max-height: 15rem;
 }
 
+.max-h-screen {
+  max-height: 100vh;
+}
+
 .w-1\/2 {
   width: 50%;
 }
@@ -2723,6 +2755,10 @@ body {
   gap: 1.5rem;
 }
 
+.gap-\[2px\] {
+  gap: 2px;
+}
+
 .gap-x-\[var\(--navbar-gap\)\] {
   -moz-column-gap: var(--navbar-gap);
        column-gap: var(--navbar-gap);
@@ -2756,10 +2792,18 @@ body {
   margin-bottom: calc(1rem * var(--tw-space-y-reverse));
 }
 
+.self-center {
+  align-self: center;
+}
+
 .self-stretch {
   align-self: stretch;
 }
 
+.justify-self-center {
+  justify-self: center;
+}
+
 .overflow-auto {
   overflow: auto;
 }
@@ -2786,6 +2830,10 @@ body {
   border-radius: 0.25rem;
 }
 
+.rounded-\[var\(--spacing-spacing-xxs\2c 2px\)\] {
+  border-radius: var(--spacing-spacing-xxs,2px);
+}
+
 .rounded-full {
   border-radius: 9999px;
 }
@@ -3029,6 +3077,16 @@ body {
   border-color: color-mix(in srgb, var(--button-warning-solid-default-border) calc(100% * var(--tw-border-opacity)), transparent);
 }
 
+.border-error-stroke {
+  --tw-border-opacity: 1;
+  border-color: color-mix(in srgb, var(--state-color-error-stroke) calc(100% * var(--tw-border-opacity)), transparent);
+}
+
+.border-info-stroke {
+  --tw-border-opacity: 1;
+  border-color: color-mix(in srgb, var(--state-color-info-stroke) calc(100% * var(--tw-border-opacity)), transparent);
+}
+
 .border-input-default-stroke {
   --tw-border-opacity: 1;
   border-color: color-mix(in srgb, var(--input-color-default-stroke) calc(100% * var(--tw-border-opacity)), transparent);
@@ -3044,19 +3102,14 @@ body {
   border-color: color-mix(in srgb, var(--primary-ramps-primary-10) calc(100% * var(--tw-border-opacity)), transparent);
 }
 
-.border-primary-30 {
-  --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--primary-ramps-primary-30) calc(100% * var(--tw-border-opacity)), transparent);
-}
-
 .border-secondary {
   --tw-border-opacity: 1;
   border-color: color-mix(in srgb, var(--state-color-secondary-default) calc(100% * var(--tw-border-opacity)), transparent);
 }
 
-.border-state-disable-solid {
+.border-success-stroke {
   --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * var(--tw-border-opacity)), transparent);
+  border-color: color-mix(in srgb, var(--state-color-success-stroke) calc(100% * var(--tw-border-opacity)), transparent);
 }
 
 .border-surface {
@@ -3068,6 +3121,11 @@ body {
   border-color: transparent;
 }
 
+.border-warning-stroke {
+  --tw-border-opacity: 1;
+  border-color: color-mix(in srgb, var(--state-color-warning-stroke) calc(100% * var(--tw-border-opacity)), transparent);
+}
+
 .border-b-\[rgb\(var\(--navbar-border-color\)\)\] {
   border-bottom-color: rgb(var(--navbar-border-color));
 }
@@ -3167,11 +3225,6 @@ body {
   background-color: color-mix(in srgb, var(--base-color-popup-curtain) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
-.bg-base-popup-highlight {
-  --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--base-color-popup-hightlight) calc(100% * var(--tw-bg-opacity)), transparent);
-}
-
 .bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
@@ -3282,6 +3335,16 @@ body {
   background-color: color-mix(in srgb, var(--button-warning-solid-default-bg) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
+.bg-common-black {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--common-black) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-error-transparent-8 {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--other-transparency-error-8) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
 .bg-gray-200 {
   --tw-bg-opacity: 1;
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
@@ -3292,11 +3355,6 @@ body {
   background-color: color-mix(in srgb, var(--grey-grey-50) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
-.bg-grey2-300 {
-  --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--grey2-grey2-300) calc(100% * var(--tw-bg-opacity)), transparent);
-}
-
 .bg-grey2-700 {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--grey2-grey2-700) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -3307,6 +3365,11 @@ body {
   background-color: color-mix(in srgb, var(--other-transparency-grey2-16) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
+.bg-info-transparent-8 {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--other-transparency-info-8) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
 .bg-input-disable-bg {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--input-color-disable-bg) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -3342,6 +3405,21 @@ body {
   background-color: color-mix(in srgb, var(--state-color-secondary-default) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
+.bg-secondary-hover {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--state-color-secondary-hover) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-state-disable-solid {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-success-transparent-8 {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--other-transparency-success-8) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
 .bg-surface {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--surface) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -3351,6 +3429,11 @@ body {
   background-color: transparent;
 }
 
+.bg-warning-transparent-8 {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--other-transparency-warning-8) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -3500,10 +3583,6 @@ body {
   fill: color-mix(in srgb, var(--state-color-primary-default) calc(100% * 1), transparent);
 }
 
-.fill-state-disable-solid {
-  fill: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * 1), transparent);
-}
-
 .p-0 {
   padding: 0px;
 }
@@ -4150,6 +4229,11 @@ body {
   color: color-mix(in srgb, var(--button-warning-solid-default-text) calc(100% * var(--tw-text-opacity)), transparent);
 }
 
+.text-common-white {
+  --tw-text-opacity: 1;
+  color: color-mix(in srgb, var(--common-white) calc(100% * var(--tw-text-opacity)), transparent);
+}
+
 .text-current {
   color: currentColor;
 }
@@ -4208,11 +4292,6 @@ body {
   color: color-mix(in srgb, var(--state-color-primary-default) calc(100% * var(--tw-text-opacity)), transparent);
 }
 
-.text-primary-foreground {
-  --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--primary-foreground) calc(100% * var(--tw-text-opacity)), transparent);
-}
-
 .text-secondary {
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--state-color-secondary-default) calc(100% * var(--tw-text-opacity)), transparent);
@@ -4228,11 +4307,6 @@ body {
   color: color-mix(in srgb, var(--secondary-foreground) calc(100% * var(--tw-text-opacity)), transparent);
 }
 
-.text-state-disable-solid {
-  --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * var(--tw-text-opacity)), transparent);
-}
-
 .text-success {
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--state-color-success-default) calc(100% * var(--tw-text-opacity)), transparent);
@@ -4772,6 +4846,11 @@ body {
   border-color: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * var(--tw-border-opacity)), transparent);
 }
 
+.hover\:border-primary-hover:hover {
+  --tw-border-opacity: 1;
+  border-color: color-mix(in srgb, var(--state-color-primary-hover) calc(100% * var(--tw-border-opacity)), transparent);
+}
+
 .hover\:bg-action-button-icon-active-hover:hover {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--action-button-icon-active-hover-bg) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -5313,10 +5392,6 @@ body {
   --tw-ring-offset-width: 2px;
 }
 
-.focus-visible\:ring-offset-background:focus-visible {
-  --tw-ring-offset-color: color-mix(in srgb, var(--background) calc(100% * 1), transparent);
-}
-
 .active\:border-action-button-icon-active-pressed:active {
   --tw-border-opacity: 1;
   border-color: color-mix(in srgb, var(--action-button-icon-active-pressed-border) calc(100% * var(--tw-border-opacity)), transparent);
@@ -6176,10 +6251,6 @@ body {
   fill: color-mix(in srgb, var(--button-warning-solid-disabled-text) calc(100% * 1), transparent);
 }
 
-.disabled\:fill-state-disable-solid:disabled {
-  fill: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * 1), transparent);
-}
-
 .disabled\:text-button-error-flat-disabled:disabled {
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--button-error-flat-disabled-text) calc(100% * var(--tw-text-opacity)), transparent);
@@ -6285,10 +6356,26 @@ body {
   color: color-mix(in srgb, var(--button-warning-solid-disabled-text) calc(100% * var(--tw-text-opacity)), transparent);
 }
 
+.disabled\:text-state-disable-outline:disabled {
+  --tw-text-opacity: 1;
+  color: color-mix(in srgb, var(--state-color-disable-outline) calc(100% * var(--tw-text-opacity)), transparent);
+}
+
 .disabled\:opacity-50:disabled {
   opacity: 0.5;
 }
 
+.group:hover .group-hover\:ring {
+  --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(3px + 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);
+}
+
+.group:disabled .group-disabled\:bg-state-disable-solid {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
 .peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:top-2 {
   top: 0.5rem;
 }
@@ -6437,6 +6524,30 @@ body {
   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-\[swipe\=cancel\]\:translate-x-0[data-swipe=cancel] {
+  --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-\[swipe\=end\]\:translate-x-\[var\(--radix-toast-swipe-end-x\)\][data-swipe=end] {
+  --tw-translate-x: var(--radix-toast-swipe-end-x);
+  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-\[swipe\=move\]\:translate-x-\[var\(--radix-toast-swipe-move-x\)\][data-swipe=move] {
+  --tw-translate-x: var(--radix-toast-swipe-move-x);
+  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-\[disabled\]\:cursor-not-allowed[data-disabled] {
+  cursor: not-allowed;
+}
+
+.data-\[disabled\]\:border-state-disable-solid[data-disabled] {
+  --tw-border-opacity: 1;
+  border-color: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * var(--tw-border-opacity)), transparent);
+}
+
 .data-\[loading\=true\]\:border-button-error-flat-active[data-loading=true] {
   --tw-border-opacity: 1;
   border-color: color-mix(in srgb, var(--button-error-flat-active-border) calc(100% * var(--tw-border-opacity)), transparent);
@@ -6542,15 +6653,19 @@ body {
   border-color: color-mix(in srgb, var(--button-warning-solid-active-border) calc(100% * var(--tw-border-opacity)), transparent);
 }
 
-.data-\[state\=checked\]\:border-primary[data-state=checked] {
+.data-\[state\=checked\]\:border-secondary[data-state=checked] {
   --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--state-color-primary-default) calc(100% * var(--tw-border-opacity)), transparent);
+  border-color: color-mix(in srgb, var(--state-color-secondary-default) calc(100% * var(--tw-border-opacity)), transparent);
 }
 
 .data-\[disabled\]\:\!bg-\[var\(--dropdown-menu-disabled-bg\)\][data-disabled] {
   background-color: var(--dropdown-menu-disabled-bg) !important;
 }
 
+.data-\[disabled\]\:bg-state-disable-solid\/\[0\.32\][data-disabled] {
+  background-color: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * 0.32), transparent);
+}
+
 .data-\[loading\=true\]\:bg-button-error-flat-active[data-loading=true] {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--button-error-flat-active-bg) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -6660,9 +6775,9 @@ body {
   background-color: var(--dropdown-menu-selected-bg);
 }
 
-.data-\[state\=checked\]\:bg-primary[data-state=checked] {
+.data-\[state\=checked\]\:bg-secondary[data-state=checked] {
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-primary-default) calc(100% * var(--tw-bg-opacity)), transparent);
+  background-color: color-mix(in srgb, var(--state-color-secondary-default) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
 .data-\[state\=checked\]\:bg-secondary-active\/\[0\.32\][data-state=checked] {
@@ -6688,6 +6803,10 @@ body {
   background-color: color-mix(in srgb, var(--state-color-tertiary-active) calc(100% * 0.32), transparent);
 }
 
+.data-\[disabled\]\:fill-state-disable-solid[data-disabled] {
+  fill: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * 1), transparent);
+}
+
 .data-\[loading\=true\]\:fill-button-error-flat-active[data-loading=true] {
   fill: color-mix(in srgb, var(--button-error-flat-active-text) calc(100% * 1), transparent);
 }
@@ -6776,6 +6895,11 @@ body {
   color: var(--dropdown-menu-disabled-text) !important;
 }
 
+.data-\[disabled\]\:text-state-disable-solid[data-disabled] {
+  --tw-text-opacity: 1;
+  color: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * var(--tw-text-opacity)), transparent);
+}
+
 .data-\[loading\=true\]\:text-button-error-flat-active[data-loading=true] {
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--button-error-flat-active-text) calc(100% * var(--tw-text-opacity)), transparent);
@@ -6885,9 +7009,14 @@ body {
   color: var(--dropdown-menu-selected-text);
 }
 
-.data-\[state\=checked\]\:text-primary-foreground[data-state=checked] {
+.data-\[state\=checked\]\:text-secondary[data-state=checked] {
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--primary-foreground) calc(100% * var(--tw-text-opacity)), transparent);
+  color: color-mix(in srgb, var(--state-color-secondary-default) calc(100% * var(--tw-text-opacity)), transparent);
+}
+
+.data-\[state\=checked\]\:text-secondary-foreground[data-state=checked] {
+  --tw-text-opacity: 1;
+  color: color-mix(in srgb, var(--secondary-foreground) calc(100% * var(--tw-text-opacity)), transparent);
 }
 
 .data-\[state\=open\]\:text-primary-foreground[data-state=open] {
@@ -6895,12 +7024,49 @@ body {
   color: color-mix(in srgb, var(--primary-foreground) calc(100% * var(--tw-text-opacity)), transparent);
 }
 
+.data-\[swipe\=move\]\:transition-none[data-swipe=move] {
+  transition-property: none;
+}
+
 .data-\[state\=\'checked\'\]\:typography-subtitile5[data-state='checked'] {
   font-size: var(--subtitle5-size, 14px);
   line-height: var(--subtitle5-line-height, 22px);
   font-weight: var(--subtitle5-weight, 500);
 }
 
+.hover\:data-\[state\=checked\]\:border-secondary-hover[data-state=checked]:hover {
+  --tw-border-opacity: 1;
+  border-color: color-mix(in srgb, var(--state-color-secondary-hover) calc(100% * var(--tw-border-opacity)), transparent);
+}
+
+.hover\:data-\[state\=checked\]\:bg-secondary-active\/\[0\.48\][data-state=checked]:hover {
+  background-color: color-mix(in srgb, var(--state-color-secondary-active) calc(100% * 0.48), transparent);
+}
+
+.hover\:data-\[state\=checked\]\:bg-secondary-hover[data-state=checked]:hover {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--state-color-secondary-hover) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.hover\:data-\[state\=unchecked\]\:bg-tertiary-active\/\[0\.48\][data-state=unchecked]:hover {
+  background-color: color-mix(in srgb, var(--state-color-tertiary-active) calc(100% * 0.48), transparent);
+}
+
+.hover\:data-\[state\=checked\]\:text-secondary-hover[data-state=checked]:hover {
+  --tw-text-opacity: 1;
+  color: color-mix(in srgb, var(--state-color-secondary-hover) calc(100% * var(--tw-text-opacity)), transparent);
+}
+
+.group:hover .group-hover\:data-\[state\=checked\]\:ring-secondary-hover-bg[data-state=checked] {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: color-mix(in srgb, var(--state-color-secondary-hover-bg) calc(100% * var(--tw-ring-opacity)), transparent);
+}
+
+.group:hover .group-hover\:data-\[state\=unchecked\]\:ring-tertiary-hover-bg[data-state=unchecked] {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: color-mix(in srgb, var(--state-color-tertiary-hover-bg) calc(100% * var(--tw-ring-opacity)), transparent);
+}
+
 @media (min-width: 640px) {
   .sm\:mt-0 {
     margin-top: 0px;
@@ -6918,6 +7084,10 @@ body {
     justify-content: flex-end;
   }
 
+  .sm\:justify-stretch {
+    justify-content: stretch;
+  }
+
   .sm\:space-x-2 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-x-reverse: 0;
     margin-right: calc(0.5rem * var(--tw-space-x-reverse));
@@ -6933,6 +7103,20 @@ body {
   }
 }
 
+@media (min-width: 768px) {
+  .md\:left-\[40px\] {
+    left: 40px;
+  }
+
+  .md\:right-\[40px\] {
+    right: 40px;
+  }
+
+  .md\:w-auto {
+    width: auto;
+  }
+}
+
 .\[\&\:has\(\[role\=checkbox\]\)\]\:w-4:has([role=checkbox]) {
   width: 1rem;
 }

package/dist/theme/themes/xspector/state.css

@@ -84,6 +84,6 @@
   --state-color-error-text-pressed: #a5210f;
 
   --state-color-disable-solid: #454f5b;
-  --state-color-disable-outline: #637381;
+  --state-color-disable-outline: #D3DADF;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.0.26",
+  "version": "0.0.28",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",
@@ -47,6 +47,7 @@
     "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
     "@storybook/addon-webpack5-compiler-swc": "^1.0.2",
     "@storybook/blocks": "^8.1.3",
+    "@storybook/preview-api": "^8.2.9",
     "@storybook/react": "^8.1.3",
     "@storybook/react-webpack5": "^8.1.3",
     "@storybook/test": "^8.1.3",
@@ -83,6 +84,8 @@
     "@radix-ui/react-slider": "^1.2.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.1.0",
+    "@radix-ui/react-toast": "^1.2.1",
+    "@radix-ui/react-tooltip": "^1.1.2",
     "@tanstack/react-table": "^8.17.3",
     "@tanstack/react-virtual": "^3.5.0",
     "@types/react": "^18.3.2",

package/src/components/AlertDialog/{Alert.stories.tsx → AlertDialog.stories.tsx}

@@ -14,7 +14,7 @@ import {
 
 // More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
 const meta = {
-  title: "Components/Alert",
+  title: "Components/AlertDialog",
   component: AlertDialog,
   tags: ["autodocs"],
   parameters: {
@@ -65,3 +65,43 @@ export const Default = {
     );
   },
 } satisfies StoryObj;
+
+export const CustomStyle = {
+  args: {
+    // label: "Lorem Ipsum",
+    // value: "Lorem Ipsum",
+    // fullwidth: true,
+  },
+  render: (args) => {
+    console.log("args ", args);
+    const props: typeof args = {
+      ...args,
+    };
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <AlertDialog>
+          <AlertDialogTrigger>Open</AlertDialogTrigger>
+          <AlertDialogContent className="justify-center text-center">
+            <AlertDialogHeader>
+              <AlertDialogTitle className="text-center">
+                Are you absolutely sure?
+              </AlertDialogTitle>
+              <AlertDialogDescription className="text-center">
+                This action cannot be undone. This will permanently delete your
+                account and remove your data from our servers.
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter className="flex sm:justify-stretch">
+              <AlertDialogCancel className="flex-1 justify-center">
+                Cancel
+              </AlertDialogCancel>
+              <AlertDialogAction className="flex-1 justify-center">
+                Continue
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+      </div>
+    );
+  },
+} satisfies StoryObj;

package/src/components/Checkbox/Checkbox.tsx

@@ -14,11 +14,16 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-primary-30 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:border-state-disable-solid",
+      "peer size-4 shrink-0 rounded-[var(--spacing-spacing-xxs,2px)] border border-primary ring-offset-background",
+      "hover:border-primary-hover",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      "disabled:cursor-not-allowed disabled:border-state-disable-solid disabled:text-state-disable-outline",
       {
-        "data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground":
+        "data-[state=checked]:border-secondary data-[state=checked]:bg-secondary data-[state=checked]:text-secondary-foreground":
           !props.disabled,
-        "bg-grey2-300": props.checked && props.disabled,
+        "hover:data-[state=checked]:border-secondary-hover hover:data-[state=checked]:bg-secondary-hover":
+          !props.disabled,
+        "bg-state-disable-solid": props.checked && props.disabled,
       },
       className
     )}
@@ -27,7 +32,7 @@ const Checkbox = React.forwardRef<
     <CheckboxPrimitive.Indicator
       className={cn("flex items-center justify-center text-current")}
     >
-      <CheckIcon className="h-4 w-4" />
+      <CheckIcon className="size-4" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
 ));

package/src/components/Icon/Icon.stories.tsx

@@ -390,6 +390,16 @@ export const PreviewMaterialIcon = {
       "expand-circle-up",
       "content-copy",
       "content-paste",
+      "format-bold",
+      "format-italic",
+      "format-underlined",
+      "format-align-left",
+      "format-align-center",
+      "format-align-right",
+      "format-align-justify",
+      "format-list-bulleted",
+      "format-list-numbered",
+      "all-out",
     ];
 
     return (