@fileverse/ui 4.2.1 → 5.0.1-sepia-1

package/dist/index.css

@@ -539,6 +539,7 @@ video {
     --color-bg-danger-light: 354, 100%, 94%, 1; /* Red-100 */
     --color-bg-default-inverse: 0, 0%, 0%, 1; /* Black */
     --color-bg-tertiary: 195, 10%, 92%, 1; /* Tertiary */
+    --color-bg-success: 126, 73%, 39%, 1;
     --color-bg-success-light: 124, 79%, 93%, 1; /* Green-100 */
 
     /* Border */
@@ -547,7 +548,10 @@ video {
     --color-border-light: 0, 0%, 100%, 1; /* White */
     --color-border-active: 0, 0%, 0%, 1; /* Black */
     --color-border-focused: 260, 100%, 52%, 1; /* Blue-700 */
+    --color-border-warning: 18, 88%, 55%, 1; /* Red-500 */
     --color-border-danger: 354, 96%, 59%, 1; /* Red-500 */
+    --color-border-success: 127, 69%, 29%, 1;
+    --color-border-info: 260, 100%, 52%, 1;
     --color-border-disabled: 206, 9%, 66%, 1; /* Gray-500 */
 
     /* Icon */
@@ -558,6 +562,8 @@ video {
     --color-icon-disabled: 206, 9%, 66%, 1; /* Gray-500 */
     --color-icon-inverse: 0, 0%, 100%, 1; /* White */
     --color-icon-danger: 354, 96%, 59%, 1; /* Red-500 */
+    --color-icon-warning: 18, 88%, 55%, 1;
+    --color-icon-info: 260, 100%, 52%, 1;
     --color-icon-success: 127, 69%, 29%, 1; /* Green-700 */
     --color-icon-on-brand: 207, 8%, 23%, 1; /* Gray-900 */
 
@@ -604,10 +610,11 @@ video {
     --color-bg-brand: 50, 74%, 54%, 1; /* Yellow-400 */
     --color-bg-brand-hover: 50, 60%, 45%, 1; /* Yellow-500 */
     --color-bg-brand-light: 57, 92%, 76%, 1; /* Yellow-100 */
-    --color-bg-danger: 354, 100%, 89%, 1; /* Red-200 */
+    --color-bg-danger: 354, 84%, 42%, 1; /* Red-200 */
     --color-bg-danger-light: 356, 100%, 97%, 1; /* Red-50 */
     --color-bg-default-inverse: 0, 0%, 100%, 1; /* White */
     --color-bg-tertiary: 0, 0%, 25%, 1; /* Gray-800 */
+    --color-bg-success: 128, 59%, 20%, 1;
     --color-bg-success-light: 128, 59%, 20%, 1; /* Green-900 */
 
     /* Border */
@@ -617,6 +624,9 @@ video {
     --color-border-active: 0, 0%, 91%, 1; /* Gray-200 */
     --color-border-focused: 254, 100%, 73%, 1; /* Blue-400 */
     --color-border-danger: 354, 100%, 70%, 1; /* Red-400 */
+    --color-border-warning: 22, 89%, 62%, 1; /* Red-500 */
+    --color-border-success: 126, 74%, 73%, 1;
+    --color-border-info: 254, 100%, 73%, 1;
     --color-border-disabled: 0, 0%, 53%, 1; /* Gray-400  */
 
     /* Icon */
@@ -626,12 +636,83 @@ video {
     --color-icon-secondary: 0, 0%, 53%, 1; /* Gray-400 */
     --color-icon-disabled: 0, 0%, 25%, 1; /* Gray-800 */
     --color-icon-inverse: 207, 8%, 23%, 1; /* Gray-100 */
-    --color-icon-danger: 354, 96%, 59%, 1; /* Red-500 */
-    --color-icon-success: 127, 69%, 29%, 1; /* Green-700 */
+    --color-icon-danger: 354, 100%, 70%, 1;
+    --color-icon-warning: 22, 89%, 62%, 1;
+    --color-icon-info: 254, 100%, 73%, 1;
+    --color-icon-success: 126, 74%, 73%, 1;
     --color-icon-on-brand: 0, 0%, 18%, 1; /* Gray-950 */
     /* Utility */
     --color-utility-overlay: 0, 0%, 0%, 0.72; /* Black 72% */
   }
+
+  .sepia {
+    /* Button */
+    --color-button-default: 28, 16%, 21%, 1; /* #3E352D */
+    --color-button-default-hover: 29, 16%, 26%, 1; /* #4D4238 */
+    --color-button-secondary: 41, 61%, 84%, 1; /* #EFDFBD */
+    --color-button-secondary-hover: 28, 16%, 21%, 0.06; /* #3E352D 6% */
+    --color-button-disabled: 28, 16%, 21%, 0.04; /* #3E352D 4% */
+    --color-button-danger: 0, 71%, 38%, 1; /* #A61C1C */
+    --color-button-danger-hover: 0, 71%, 42%, 1; /* #B71F1F */
+    --color-button-floating: 41, 61%, 84%, 1; /* #EFDFBD */
+    --color-button-floating-hover: 28, 16%, 21%, 0.06; /* #3E352D 6% */
+
+    /* Text */
+    --color-text-default: 28, 16%, 21%, 1; /* #3E352D */
+    --color-text-secondary: 31, 17%, 42%, 1; /* #7D6B58 */
+    --color-text-disabled: 31, 29%, 64%, 1; /* #BEA489 */
+    --color-text-danger: 0, 71%, 38%, 1; /* #A61C1C */
+    --color-text-success: 77, 23%, 35%, 1; /* #616C44 */
+    --color-text-inverse: 41, 61%, 84%, 1; /* #EFDFBD */
+    --color-text-link: 199, 100%, 29%, 1; /* #006494 */
+    --color-text-on-brand: 28, 16%, 21%, 1; /* #3E352D */
+
+    /* Background */
+    --color-bg-default: 41, 61%, 84%, 1; /* #EFDFBD */
+    --color-bg-default-hover: 28, 16%, 21%, 0.08; /* #3E352D 8% */
+    --color-bg-default-active: 46, 88%, 56%, 1; /* #F2C42D */
+    --color-bg-default-selected: 28, 16%, 21%, 0.1; /* #3E352D 10% */
+    --color-bg-secondary: 41, 61%, 80%, 1; /* #EBD7AD */
+    --color-bg-secondary-hover: 28, 16%, 21%, 0.12; /* #3E352D 12% */
+    --color-bg-disabled: 28, 16%, 21%, 0.04; /* #3E352D 4% */
+    --color-bg-brand: 46, 88%, 56%, 1; /* #F2C42D */
+    --color-bg-brand-hover: 40, 84%, 50%, 1; /* #EBA515 */
+    --color-bg-brand-light: 47, 87%, 88%, 1; /* #FBEFC5 */
+    --color-bg-danger: 0, 71%, 38%, 1; /* #A61C1C */
+    --color-bg-danger-light: 0, 71%, 42%, 0.06; /* #B71F1F 6% */
+    --color-bg-default-inverse: 28, 16%, 21%, 1; /* #3E352D */
+    --color-bg-tertiary: 44, 32%, 86%, 1; /* #E7E1D0 */
+    --color-bg-success: 77, 23%, 35%, 1; /* #616C44 */
+    --color-bg-success-light: 76, 23%, 64%, 1; /* #ADB88E */
+
+    /* Border */
+    --color-border-default: 41, 49%, 76%, 1; /* #E0CDA4 */
+    --color-border-hover: 41, 50%, 68%, 1; /* #D6BC85 */
+    --color-border-light: 41, 61%, 84%, 1; /* #EFDFBD */
+    --color-border-active: 28, 16%, 21%, 1; /* #3E352D */
+    --color-border-focused: 199, 100%, 29%, 1; /* #006494 */
+    --color-border-danger: 0, 71%, 38%, 1; /* #A61C1C */
+    --color-border-warning: 12, 85%, 60%, 1; /* #F06543 */
+    --color-border-success: 77, 23%, 35%, 1; /* #616C44 */
+    --color-border-info: 199, 100%, 29%, 1; /* #006494 */
+    --color-border-disabled: 31, 29%, 64%, 1; /* #BEA489 */
+
+    /* Icon */
+    --color-icon-default: 28, 16%, 21%, 1; /* #3E352D */
+    --color-icon-default-hover: 29, 16%, 26%, 1; /* #4D4238 */
+    --color-icon-brand: 46, 88%, 56%, 1; /* #F2C42D */
+    --color-icon-secondary: 31, 17%, 42%, 1; /* #7D6B58 */
+    --color-icon-disabled: 31, 29%, 64%, 1; /* #BEA489 */
+    --color-icon-inverse: 41, 61%, 84%, 1; /* #EFDFBD */
+    --color-icon-danger: 0, 71%, 38%, 1; /* #A61C1C */
+    --color-icon-warning: 12, 85%, 60%, 1; /* #F06543 */
+    --color-icon-info: 199, 100%, 29%, 1; /* #006494 */
+    --color-icon-success: 77, 23%, 35%, 1; /* #616C44 */
+    --color-icon-on-brand: 28, 16%, 21%, 1; /* #3E352D */
+
+    /* Utility */
+    --color-utility-overlay: 0, 0%, 0%, 0.72; /* Black 72% */
+  }
   * {
     border-color: hsl(var(--color-border-default));
     -webkit-font-smoothing: antialiased;
@@ -867,6 +948,10 @@ video {
     background-color: hsl(var(--color-bg-success-light));
   }
 
+  .color-bg-success {
+    background-color: hsl(var(--color-bg-success));
+  }
+
   .\!color-bg-default-inverse {
     background-color: hsl(var(--color-bg-default-inverse)) !important;
   }
@@ -916,6 +1001,19 @@ video {
     border-color: hsl(var(--color-border-default));
   }
 
+  .color-border-toast-warning {
+    border-left-color: hsl(var(--color-border-warning));
+  }
+  .color-border-toast-error {
+    border-left-color: hsl(var(--color-border-danger));
+  }
+  .color-border-toast-success {
+    border-left-color: hsl(var(--color-border-success));
+  }
+  .color-border-toast-info {
+    border-left-color: hsl(var(--color-border-info));
+  }
+
   .color-border-hover {
     border-color: hsl(var(--color-border-hover));
   }
@@ -960,6 +1058,20 @@ video {
     color: hsl(var(--color-icon-inverse));
   }
 
+  .color-icon-success {
+    color: hsl(var(--color-icon-success));
+  }
+
+  .color-icon-danger {
+    color: hsl(var(--color-icon-danger));
+  }
+  .color-icon-warning {
+    color: hsl(var(--color-icon-warning));
+  }
+  .color-icon-info {
+    color: hsl(var(--color-icon-info));
+  }
+
   .color-utility-overlay {
     background-color: hsl(var(--color-utility-overlay));
   }
@@ -1172,9 +1284,6 @@ video {
 .top-1\/2 {
   top: 50%;
 }
-.top-2 {
-  top: 0.5rem;
-}
 .top-3 {
   top: 0.75rem;
 }
@@ -1556,6 +1665,9 @@ video {
 .w-\[180px\] {
   width: 180px;
 }
+.w-\[18px\] {
+  width: 18px;
+}
 .w-\[200px\] {
   width: 200px;
 }
@@ -1568,6 +1680,9 @@ video {
 .w-\[280px\] {
   width: 280px;
 }
+.w-\[320px\] {
+  width: 320px;
+}
 .w-\[350px\] {
   width: 350px;
 }
@@ -1958,6 +2073,9 @@ video {
 .gap-8 {
   gap: 2rem;
 }
+.gap-\[4px\] {
+  gap: 4px;
+}
 .-space-x-1 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(-0.25rem * var(--tw-space-x-reverse));
@@ -2018,18 +2136,27 @@ video {
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(1rem * var(--tw-space-y-reverse));
 }
+.self-start {
+  align-self: flex-start;
+}
 .overflow-auto {
   overflow: auto;
 }
 .overflow-hidden {
   overflow: hidden;
 }
+.overflow-clip {
+  overflow: clip;
+}
 .overflow-y-auto {
   overflow-y: auto;
 }
 .overflow-x-hidden {
   overflow-x: hidden;
 }
+.overscroll-contain {
+  overscroll-behavior: contain;
+}
 .truncate {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -2132,12 +2259,22 @@ video {
 .border-\[0\.5px\] {
   border-width: 0.5px;
 }
+.border-y {
+  border-top-width: 1px;
+  border-bottom-width: 1px;
+}
 .border-b {
   border-bottom-width: 1px;
 }
 .border-b-2 {
   border-bottom-width: 2px;
 }
+.border-l {
+  border-left-width: 1px;
+}
+.border-l-4 {
+  border-left-width: 4px;
+}
 .border-r {
   border-right-width: 1px;
 }
@@ -2170,6 +2307,9 @@ video {
 .border-transparent {
   border-color: transparent;
 }
+.border-l-\[hsl\(var\(--color-border-active\)\)\] {
+  border-left-color: hsl(var(--color-border-active));
+}
 .\!bg-transparent {
   background-color: transparent !important;
 }
@@ -2190,8 +2330,8 @@ video {
 .bg-none {
   background-image: none;
 }
-.stroke-white {
-  stroke: #fff;
+.stroke-\[hsl\(var\(--color-bg-default\)\)\] {
+  stroke: hsl(var(--color-bg-default));
 }
 .object-contain {
   -o-object-fit: contain;
@@ -2304,6 +2444,9 @@ video {
 .\!pb-0 {
   padding-bottom: 0px !important;
 }
+.\!pb-\[calc\(16px\+24px\)\] {
+  padding-bottom: calc(16px + 24px) !important;
+}
 .\!pr-0 {
   padding-right: 0px !important;
 }
@@ -2432,6 +2575,12 @@ video {
   --tw-text-opacity: 1;
   color: rgb(119 129 138 / var(--tw-text-opacity, 1));
 }
+.text-\[hsl\(var\(--color-text-inverse\)\)\] {
+  color: hsl(var(--color-text-inverse));
+}
+.text-current {
+  color: currentColor;
+}
 .text-gray-400 {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity, 1));
@@ -2516,6 +2665,10 @@ video {
   --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
   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);
 }
+.sepia {
+  --tw-sepia: sepia(100%);
+  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);
+}
 .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);
 }
@@ -2554,6 +2707,9 @@ video {
 .duration-300 {
   transition-duration: 300ms;
 }
+.duration-500 {
+  transition-duration: 500ms;
+}
 .ease-in-out {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -2577,6 +2733,9 @@ video {
 .duration-300 {
   animation-duration: 300ms;
 }
+.duration-500 {
+  animation-duration: 500ms;
+}
 .ease-in-out {
   animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -2677,7 +2836,7 @@ textarea:is(:-webkit-autofill, :autofill) {
 }
 
 .toast-mini {
-  padding: 12px !important;
+  padding: 8px 12px !important;
   gap: 8px !important;
   width: -moz-fit-content !important;
   width: fit-content !important;
@@ -2707,7 +2866,7 @@ textarea:is(:-webkit-autofill, :autofill) {
   padding-bottom: 20px !important;
 }
 .left-space-lg {
-  padding-left: 20px !important;      
+  padding-left: 20px !important;
 }
 .right-space-lg {
   padding-right: 20px !important;
@@ -2740,7 +2899,6 @@ textarea:is(:-webkit-autofill, :autofill) {
   padding-right: 12px !important;
 }
 
-
 .space-xsm {
   padding: 8px !important;
 }
@@ -2776,10 +2934,10 @@ textarea:is(:-webkit-autofill, :autofill) {
   padding-right: 4px !important;
 }
 .bottom-space-2xsm {
-  padding-bottom: 4px !important
+  padding-bottom: 4px !important;
 }
 .bottom-space-2xlg {
-  padding-bottom: 32px !important
+  padding-bottom: 32px !important;
 }
 .space-2xsm {
   padding: 4px !important;
@@ -2811,7 +2969,6 @@ textarea:is(:-webkit-autofill, :autofill) {
   padding-top: 32px !important;
 }
 
-
 .gap-xsm {
   gap: 8px !important;
 }
@@ -2877,6 +3034,9 @@ textarea:is(:-webkit-autofill, :autofill) {
 .checked\:color-bg-default-inverse:checked {
     background-color: hsl(var(--color-bg-default-inverse));
   }
+.focus-within\:color-button-secondary-hover:focus-within {
+    background-color: hsl(var(--color-button-secondary-hover));
+  }
 .hover\:color-text-inverse:hover {
     color: hsl(var(--color-text-inverse));
   }
@@ -2938,72 +3098,6 @@ textarea:is(:-webkit-autofill, :autofill) {
 .disabled\:color-border-disabled:disabled {
     border-color: hsl(var(--color-border-disabled));
   }
-.group.secondary .group-\[\.secondary\]\:color-text-default {
-    color: hsl(var(--color-text-default));
-  }
-.group.danger .group-\[\.danger\]\:color-text-danger {
-    color: hsl(var(--color-text-danger));
-  }
-.group.success .group-\[\.success\]\:color-text-success {
-    color: hsl(var(--color-text-success));
-  }
-.group.default .group-\[\.default\]\:color-text-inverse {
-    color: hsl(var(--color-text-inverse));
-  }
-.group.secondary .group-\[\.secondary\]\:color-bg-secondary {
-    background-color: hsl(var(--color-bg-secondary));
-  }
-.group.danger .group-\[\.danger\]\:color-bg-danger-light {
-    background-color: hsl(var(--color-bg-danger-light));
-  }
-.group.success .group-\[\.success\]\:color-bg-success-light {
-    background-color: hsl(var(--color-bg-success-light));
-  }
-.group.default .group-\[\.default\]\:color-bg-default-inverse {
-    background-color: hsl(var(--color-bg-default-inverse));
-  }
-.group.default .group-\[\.default\]\:color-border-default {
-    border-color: hsl(var(--color-border-default));
-  }
-.group.secondary .group-\[\.secondary\]\:color-border-default {
-    border-color: hsl(var(--color-border-default));
-  }
-.group.success .group-\[\.success\]\:color-border-default {
-    border-color: hsl(var(--color-border-default));
-  }
-.group.secondary .group-\[\.secondary\]\:color-border-hover {
-    border-color: hsl(var(--color-border-hover));
-  }
-.group.success .group-\[\.success\]\:color-border-hover {
-    border-color: hsl(var(--color-border-hover));
-  }
-.group.danger .group-\[\.danger\]\:color-border-danger {
-    border-color: hsl(var(--color-border-danger));
-  }
-.group.secondary .group-\[\.secondary\]\:hover\:color-text-default:hover {
-    color: hsl(var(--color-text-default));
-  }
-.group.danger .group-\[\.danger\]\:hover\:color-text-danger:hover {
-    color: hsl(var(--color-text-danger));
-  }
-.group.success .group-\[\.success\]\:hover\:color-text-success:hover {
-    color: hsl(var(--color-text-success));
-  }
-.group.default .group-\[\.default\]\:hover\:color-text-inverse:hover {
-    color: hsl(var(--color-text-inverse));
-  }
-.group.secondary .group-\[\.secondary\]\:hover\:color-bg-secondary:hover {
-    background-color: hsl(var(--color-bg-secondary));
-  }
-.group.danger .group-\[\.danger\]\:hover\:color-bg-danger-light:hover {
-    background-color: hsl(var(--color-bg-danger-light));
-  }
-.group.success .group-\[\.success\]\:hover\:color-bg-success-light:hover {
-    background-color: hsl(var(--color-bg-success-light));
-  }
-.group.default .group-\[\.default\]\:hover\:color-bg-default-inverse:hover {
-    background-color: hsl(var(--color-bg-default-inverse));
-  }
 .aria-selected\:color-text-default[aria-selected="true"] {
     color: hsl(var(--color-text-default));
   }
@@ -3049,12 +3143,6 @@ textarea:is(:-webkit-autofill, :autofill) {
 .data-\[state\=checked\]\:hover\:enabled\:color-bg-brand-hover:enabled:hover[data-state="checked"] {
     background-color: hsl(var(--color-bg-brand-hover));
   }
-.dark\:color-bg-disabled:is(.dark *) {
-    background-color: hsl(var(--color-bg-disabled));
-  }
-.dark\:data-\[state\=active\]\:color-border-light[data-state="active"]:is(.dark *) {
-    border-color: hsl(var(--color-border-light));
-  }
 @media (min-width: 1024px) {
 
   .lg\:\!text-heading-2xlg {
@@ -3131,9 +3219,6 @@ textarea:is(:-webkit-autofill, :autofill) {
   --tw-brightness: brightness(.95);
   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);
 }
-.focus\:opacity-100:focus {
-  opacity: 1;
-}
 .focus\:shadow-none:focus {
   --tw-shadow: 0 0 #0000;
   --tw-shadow-colored: 0 0 #0000;
@@ -3197,10 +3282,6 @@ textarea:is(:-webkit-autofill, :autofill) {
 .group:hover .group-hover\:opacity-100 {
   opacity: 1;
 }
-.group:hover .group-hover\:brightness-95 {
-  --tw-brightness: brightness(.95);
-  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);
-}
 .peer:checked ~ .peer-checked\:block {
   display: block;
 }
@@ -3302,6 +3383,9 @@ textarea:is(:-webkit-autofill, :autofill) {
 .data-\[state\=closed\]\:duration-300[data-state="closed"] {
   transition-duration: 300ms;
 }
+.data-\[state\=open\]\:duration-300[data-state="open"] {
+  transition-duration: 300ms;
+}
 .data-\[state\=open\]\:duration-500[data-state="open"] {
   transition-duration: 500ms;
 }
@@ -3362,8 +3446,8 @@ textarea:is(:-webkit-autofill, :autofill) {
 .data-\[state\=closed\]\:slide-out-to-bottom[data-state="closed"] {
   --tw-exit-translate-y: 100%;
 }
-.data-\[state\=closed\]\:slide-out-to-bottom-full[data-state="closed"] {
-  --tw-exit-translate-y: 100%;
+.data-\[state\=closed\]\:slide-out-to-bottom-\[calc\(100\%\+16px\*2\)\][data-state="closed"] {
+  --tw-exit-translate-y: calc(100% + 16px * 2);
 }
 .data-\[state\=closed\]\:slide-out-to-left[data-state="closed"] {
   --tw-exit-translate-x: -100%;
@@ -3371,14 +3455,14 @@ textarea:is(:-webkit-autofill, :autofill) {
 .data-\[state\=closed\]\:slide-out-to-left-1\/2[data-state="closed"] {
   --tw-exit-translate-x: -50%;
 }
-.data-\[state\=closed\]\:slide-out-to-left-full[data-state="closed"] {
-  --tw-exit-translate-x: -100%;
+.data-\[state\=closed\]\:slide-out-to-left-\[calc\(100\%\+16px\*2\)\][data-state="closed"] {
+  --tw-exit-translate-x: -calc(100% + 16px * 2);
 }
 .data-\[state\=closed\]\:slide-out-to-right[data-state="closed"] {
   --tw-exit-translate-x: 100%;
 }
-.data-\[state\=closed\]\:slide-out-to-right-full[data-state="closed"] {
-  --tw-exit-translate-x: 100%;
+.data-\[state\=closed\]\:slide-out-to-right-\[calc\(100\%\+16px\*2\)\][data-state="closed"] {
+  --tw-exit-translate-x: calc(100% + 16px * 2);
 }
 .data-\[state\=closed\]\:slide-out-to-top[data-state="closed"] {
   --tw-exit-translate-y: -100%;
@@ -3386,14 +3470,14 @@ textarea:is(:-webkit-autofill, :autofill) {
 .data-\[state\=closed\]\:slide-out-to-top-\[48\%\][data-state="closed"] {
   --tw-exit-translate-y: -48%;
 }
-.data-\[state\=closed\]\:slide-out-to-top-full[data-state="closed"] {
-  --tw-exit-translate-y: -100%;
+.data-\[state\=closed\]\:slide-out-to-top-\[calc\(100\%\+16px\*2\)\][data-state="closed"] {
+  --tw-exit-translate-y: -calc(100% + 16px * 2);
 }
 .data-\[state\=open\]\:slide-in-from-bottom[data-state="open"] {
   --tw-enter-translate-y: 100%;
 }
-.data-\[state\=open\]\:slide-in-from-bottom-full[data-state="open"] {
-  --tw-enter-translate-y: 100%;
+.data-\[state\=open\]\:slide-in-from-bottom-\[calc\(100\%\+16px\*2\)\][data-state="open"] {
+  --tw-enter-translate-y: calc(100% + 16px * 2);
 }
 .data-\[state\=open\]\:slide-in-from-left[data-state="open"] {
   --tw-enter-translate-x: -100%;
@@ -3401,31 +3485,33 @@ textarea:is(:-webkit-autofill, :autofill) {
 .data-\[state\=open\]\:slide-in-from-left-1\/2[data-state="open"] {
   --tw-enter-translate-x: -50%;
 }
+.data-\[state\=open\]\:slide-in-from-left-\[calc\(100\%\+16px\*2\)\][data-state="open"] {
+  --tw-enter-translate-x: -calc(100% + 16px * 2);
+}
 .data-\[state\=open\]\:slide-in-from-right[data-state="open"] {
   --tw-enter-translate-x: 100%;
 }
+.data-\[state\=open\]\:slide-in-from-right-\[calc\(100\%\+16px\*2\)\][data-state="open"] {
+  --tw-enter-translate-x: calc(100% + 16px * 2);
+}
 .data-\[state\=open\]\:slide-in-from-top[data-state="open"] {
   --tw-enter-translate-y: -100%;
 }
 .data-\[state\=open\]\:slide-in-from-top-\[48\%\][data-state="open"] {
   --tw-enter-translate-y: -48%;
 }
-.data-\[state\=open\]\:slide-in-from-top-full[data-state="open"] {
-  --tw-enter-translate-y: -100%;
+.data-\[state\=open\]\:slide-in-from-top-\[calc\(100\%\+16px\*2\)\][data-state="open"] {
+  --tw-enter-translate-y: -calc(100% + 16px * 2);
 }
 .data-\[state\=closed\]\:duration-300[data-state="closed"] {
   animation-duration: 300ms;
 }
+.data-\[state\=open\]\:duration-300[data-state="open"] {
+  animation-duration: 300ms;
+}
 .data-\[state\=open\]\:duration-500[data-state="open"] {
   animation-duration: 500ms;
 }
-.dark\:bg-\[\#000\]:is(.dark *) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
-}
-.dark\:stroke-black:is(.dark *) {
-  stroke: #000;
-}
 .dark\:\!text-\[\#363B3F\]:is(.dark *) {
   --tw-text-opacity: 1 !important;
   color: rgb(54 59 63 / var(--tw-text-opacity, 1)) !important;
@@ -3503,10 +3589,6 @@ textarea:is(:-webkit-autofill, :autofill) {
     width: auto;
   }
 
-  .md\:max-w-\[420px\] {
-    max-width: 420px;
-  }
-
   .md\:max-w-min {
     max-width: -moz-min-content;
     max-width: min-content;
@@ -3716,4 +3798,4 @@ textarea:is(:-webkit-autofill, :autofill) {
 }
 .\[\&_tr\]\:border-b tr {
   border-bottom-width: 1px;
-}
+}

package/dist/index.es.d.ts

@@ -907,7 +907,7 @@ export declare interface TextFieldProps extends React_2.InputHTMLAttributes<HTML
     icon?: LucideIconProps["name"];
 }
 
-declare type Theme = "light" | "dark";
+declare type Theme = "light" | "dark" | "sepia";
 
 export declare const ThemeProvider: ({ children, defaultTheme, }: ThemeProviderProps) => JSX_2.Element;
 
@@ -949,13 +949,13 @@ declare interface TimePickerProps extends React_2.HTMLAttributes<HTMLDivElement>
 declare type TimePickerType = "minutes" | "seconds" | "hours" | "12hours";
 
 export declare const Toast: React_2.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastProps & React_2.RefAttributes<HTMLLIElement>, "ref"> & VariantProps<(props?: ({
-    variant?: "default" | "danger" | "secondary" | "success" | "mini" | null | undefined;
+    variant?: "default" | "success" | "error" | "warning" | "info" | null | undefined;
+    type?: "normal" | "mini" | null | undefined;
     position?: "top-right" | "top-left" | "bottom-right" | "bottom-left" | "center-top" | "center-bottom" | null | undefined;
 } & ClassProp) | undefined) => string> & {
     position?: "top-right" | "top-left" | "bottom-right" | "bottom-left" | "center-top" | "center-bottom";
     duration?: number;
-    hasIcon?: boolean;
-    customIcon?: string;
+    toastType?: "mini" | "normal";
 } & React_2.RefAttributes<HTMLLIElement>>;
 
 export declare function toast({ ...props }: Toast_2): {
@@ -984,9 +984,20 @@ export declare interface ToasterProps {
 
 declare type ToasterToast = ToastProps & {
     id: string;
-    title?: React_2.ReactNode;
+    title?: string;
+    toastType?: "normal" | "mini";
+    isLoading?: boolean;
+    iconType?: "icon" | "emoji";
+    customEmoji?: string;
+    customIcon?: keyof typeof UltimateIcons;
     description?: React_2.ReactNode;
-    action?: ToastActionElement;
+    showCloseButton?: boolean;
+    isActionable?: boolean;
+    toastIdentifier?: string | null;
+    action?: {
+        label: string;
+        handler: () => void;
+    };
 };
 
 export declare type ToastProps = React_2.ComponentPropsWithoutRef<typeof Toast>;