@xjur-ui/react 1.0.0 → 1.0.2

package/dist/index.css

@@ -21,6 +21,10 @@
       "Liberation Mono",
       "Courier New",
       monospace;
+    --color-black: #000;
+    --color-white: #fff;
+    --spacing: 0.25rem;
+    --container-sm: 24rem;
     --font-weight-thin: 100;
     --font-weight-extralight: 200;
     --font-weight-light: 300;
@@ -30,22 +34,51 @@
     --font-weight-bold: 700;
     --font-weight-extrabold: 800;
     --font-weight-black: 900;
+    --ease-out: cubic-bezier(0, 0, 0.2, 1);
+    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: var(--font-sans);
     --default-mono-font-family: var(--font-mono);
+    --font-inter:
+      Inter,
+      ui-sans-serif,
+      system-ui,
+      sans-serif,
+      "Apple Color Emoji",
+      "Segoe UI Emoji",
+      "Segoe UI Symbol",
+      "Noto Color Emoji";
+    --spacing-none: 0;
+    --spacing-small-2x: 2px;
     --spacing-small-1x: 4px;
     --spacing-small_1x-alt: 6px;
     --spacing-small: 8px;
     --spacing-medium: 12px;
+    --spacing-large: 16px;
+    --spacing-large-alt: 18px;
+    --spacing-large-1x: 20px;
+    --spacing-large-2x: 24px;
+    --spacing-large-3x: 28px;
+    --spacing-large-4x: 32px;
     --spacing-large-6x: 40px;
+    --spacing-large-7x: 44px;
+    --spacing-large-8x: 48px;
+    --radius-none: 0;
     --radius-small-1x: 4px;
+    --radius-small: 8px;
     --radius-circle: 999px;
+    --shadow-2x-small: 1px;
+    --shadow-1x-small: 2px;
     --shadow-medium: 4px;
-    --color-title-neutral: #17171A;
+    --shadow-large-1x: 8px;
+    --color-shadow-lightest: #0000000A;
+    --color-shadow-light: #0000000F;
     --color-neutral-dark: #3D3D47;
+    --color-neutral-placeholder: #9C9CAD;
     --color-neutral-label: #FFFFFF;
     --color-icon-neutral-3: #69697A;
+    --color-layer-1-idle: #F7F7FA;
     --color-layer-1-hover: #F0F0F2;
     --color-layer-1-pressed: #E7E7EB;
     --color-layer-1-active: #DEDEE3;
@@ -53,20 +86,30 @@
     --color-layer-2-hover: #F8F8FA;
     --color-layer-2-pressed: #F0F0F2;
     --color-layer-2-active: #E7E7EB;
+    --color-alt-1: #17171A;
+    --color-alt-4: #9C9CAD;
+    --color-border-layer-1: #D6D6DC;
     --color-border-layer-2: #DEDEE3;
     --color-border-layer-3: #9C9CAD;
     --color-primary-idle: #E87D30;
     --color-primary-hover: #C7631C;
     --color-primary-pressed: #AE5413;
+    --color-primary-active: #E87D30;
     --color-primary-alt-idle: #F9EEE6;
+    --color-primary-alt-hover: #F7E6D9;
     --color-primary-alt-pressed: #F4DCCD;
+    --color-primary-alt-active: #F9EEE6;
+    --color-primary-label-idle: #E87D30;
+    --color-primary-label-active: #E87D30;
     --color-danger-idle: #E83040;
     --color-danger-hover: #C71C2B;
     --color-danger-pressed: #AE1320;
     --color-danger-alt-idle: #F9E6E8;
+    --color-danger-alt-hover: #F7D9DC;
     --color-danger-alt-pressed: #F4CDCD;
     --color-danger-label-idle: #E83040;
-    --color-danger-label-active: #E83040;
+    --color-success-idle: #169C55;
+    --color-warning-idle: #DF9F20;
     --text-size-body-sm-1x: 12px;
     --text-size-body-sm-1x--line-height: 16px;
     --text-size-body-sm: 13px;
@@ -286,105 +329,426 @@
   }
 }
 @layer utilities {
+  .pointer-events-none {
+    pointer-events: none;
+  }
+  .invisible {
+    visibility: hidden;
+  }
+  .absolute {
+    position: absolute;
+  }
+  .fixed {
+    position: fixed;
+  }
   .relative {
     position: relative;
   }
+  .inset-0 {
+    inset: calc(var(--spacing) * 0);
+  }
+  .inset-x-0 {
+    inset-inline: calc(var(--spacing) * 0);
+  }
+  .inset-y-0 {
+    inset-block: calc(var(--spacing) * 0);
+  }
+  .-top-\[22px\] {
+    top: calc(22px * -1);
+  }
+  .top-0 {
+    top: calc(var(--spacing) * 0);
+  }
+  .top-1\/2 {
+    top: calc(1/2 * 100%);
+  }
+  .right-0 {
+    right: calc(var(--spacing) * 0);
+  }
+  .right-small {
+    right: var(--spacing-small);
+  }
+  .bottom-0 {
+    bottom: calc(var(--spacing) * 0);
+  }
+  .left-0 {
+    left: calc(var(--spacing) * 0);
+  }
+  .left-small {
+    left: var(--spacing-small);
+  }
+  .z-10 {
+    z-index: 10;
+  }
+  .z-50 {
+    z-index: 50;
+  }
+  .mt-auto {
+    margin-top: auto;
+  }
+  .mt-small {
+    margin-top: var(--spacing-small);
+  }
+  .ml-small-1x {
+    margin-left: var(--spacing-small-1x);
+  }
+  .scrollbar-hide {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
   .flex {
     display: flex;
   }
+  .hidden {
+    display: none;
+  }
+  .inline-block {
+    display: inline-block;
+  }
   .inline-flex {
     display: inline-flex;
   }
+  .aspect-square {
+    aspect-ratio: 1 / 1;
+  }
+  .size-full {
+    width: 100%;
+    height: 100%;
+  }
+  .size-large {
+    width: var(--spacing-large);
+    height: var(--spacing-large);
+  }
+  .size-large-alt {
+    width: var(--spacing-large-alt);
+    height: var(--spacing-large-alt);
+  }
+  .size-medium {
+    width: var(--spacing-medium);
+    height: var(--spacing-medium);
+  }
+  .h-auto {
+    height: auto;
+  }
   .h-full {
     height: 100%;
   }
+  .h-large {
+    height: var(--spacing-large);
+  }
+  .h-large-2x {
+    height: var(--spacing-large-2x);
+  }
+  .h-large-4x {
+    height: var(--spacing-large-4x);
+  }
   .h-large-6x {
     height: var(--spacing-large-6x);
   }
+  .h-large-7x {
+    height: var(--spacing-large-7x);
+  }
+  .max-h-\[400px\] {
+    max-height: 400px;
+  }
+  .max-h-\[var\(--radix-popover-content-available-height\)\] {
+    max-height: var(--radix-popover-content-available-height);
+  }
+  .w-3\/4 {
+    width: calc(3/4 * 100%);
+  }
   .w-fit {
     width: fit-content;
   }
   .w-full {
     width: 100%;
   }
+  .w-large-2x {
+    width: var(--spacing-large-2x);
+  }
+  .w-large-3x {
+    width: var(--spacing-large-3x);
+  }
+  .w-large-4x {
+    width: var(--spacing-large-4x);
+  }
+  .max-w-\[var\(--radix-popover-content-available-width\)\] {
+    max-width: var(--radix-popover-content-available-width);
+  }
+  .max-w-\[var\(--radix-popover-trigger-width\)\] {
+    max-width: var(--radix-popover-trigger-width);
+  }
+  .max-w-full {
+    max-width: 100%;
+  }
+  .min-w-\[240px\] {
+    min-width: 240px;
+  }
+  .min-w-\[var\(--radix-popover-trigger-width\)\] {
+    min-width: var(--radix-popover-trigger-width);
+  }
+  .flex-1 {
+    flex: 1;
+  }
+  .shrink-0 {
+    flex-shrink: 0;
+  }
+  .-translate-y-1\/2 {
+    --tw-translate-y: calc(calc(1/2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .animate-in {
+    animation: enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
+  }
   .cursor-pointer {
     cursor: pointer;
   }
+  .list-none {
+    list-style-type: none;
+  }
   .flex-col {
     flex-direction: column;
   }
   .items-center {
     align-items: center;
   }
+  .justify-between {
+    justify-content: space-between;
+  }
   .justify-center {
     justify-content: center;
   }
+  .gap-4 {
+    gap: calc(var(--spacing) * 4);
+  }
   .gap-small {
     gap: var(--spacing-small);
   }
+  .gap-small-1x {
+    gap: var(--spacing-small-1x);
+  }
+  .gap-small_1x-alt {
+    gap: var(--spacing-small_1x-alt);
+  }
+  .truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
   .overflow-hidden {
     overflow: hidden;
   }
-  .rounded {
-    border-radius: 0.25rem;
+  .overflow-y-auto {
+    overflow-y: auto;
+  }
+  .rounded-\[6px\] {
+    border-radius: 6px;
   }
   .rounded-circle {
     border-radius: var(--radius-circle);
   }
+  .rounded-full {
+    border-radius: calc(infinity * 1px);
+  }
+  .rounded-none {
+    border-radius: 0;
+  }
+  .rounded-none {
+    border-radius: var(--radius-none);
+  }
+  .rounded-small {
+    border-radius: var(--radius-small);
+  }
   .rounded-small-1x {
     border-radius: var(--radius-small-1x);
   }
+  .rounded-tr-circle {
+    border-top-right-radius: var(--radius-circle);
+  }
+  .rounded-tr-none {
+    border-top-right-radius: 0;
+  }
+  .rounded-tr-none {
+    border-top-right-radius: var(--radius-none);
+  }
+  .rounded-br-circle {
+    border-bottom-right-radius: var(--radius-circle);
+  }
+  .rounded-br-none {
+    border-bottom-right-radius: 0;
+  }
+  .rounded-br-none {
+    border-bottom-right-radius: var(--radius-none);
+  }
+  .rounded-bl-none {
+    border-bottom-left-radius: 0;
+  }
+  .rounded-bl-none {
+    border-bottom-left-radius: var(--radius-none);
+  }
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
-  .border-1 {
+  .border-2 {
     border-style: var(--tw-border-style);
-    border-width: 1px;
+    border-width: 2px;
   }
-  .border-hidden {
-    --tw-border-style: hidden;
-    border-style: hidden;
+  .border-x-0 {
+    border-inline-style: var(--tw-border-style);
+    border-inline-width: 0px;
+  }
+  .border-t {
+    border-top-style: var(--tw-border-style);
+    border-top-width: 1px;
+  }
+  .border-t-0 {
+    border-top-style: var(--tw-border-style);
+    border-top-width: 0px;
+  }
+  .border-r {
+    border-right-style: var(--tw-border-style);
+    border-right-width: 1px;
+  }
+  .border-r-0 {
+    border-right-style: var(--tw-border-style);
+    border-right-width: 0px;
+  }
+  .border-b {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+  }
+  .border-b-1 {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+  }
+  .border-l {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 1px;
   }
   .border-border-layer-2 {
     border-color: var(--color-border-layer-2);
   }
-  .border-danger-idle {
-    border-color: var(--color-danger-idle);
+  .border-transparent {
+    border-color: transparent;
+  }
+  .border-t-border-layer-2 {
+    border-top-color: var(--color-border-layer-2);
+  }
+  .border-b-border-layer-2 {
+    border-bottom-color: var(--color-border-layer-2);
+  }
+  .\!bg-layer-2-hover {
+    background-color: var(--color-layer-2-hover) !important;
+  }
+  .bg-alt-1 {
+    background-color: var(--color-alt-1);
+  }
+  .bg-black\/50 {
+    background-color: color-mix(in srgb, #000 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
+    }
+  }
+  .bg-border-layer-2 {
+    background-color: var(--color-border-layer-2);
+  }
+  .bg-danger-alt-idle {
+    background-color: var(--color-danger-alt-idle);
   }
   .bg-danger-idle {
     background-color: var(--color-danger-idle);
   }
+  .bg-inherit {
+    background-color: inherit;
+  }
   .bg-layer-1-hover {
     background-color: var(--color-layer-1-hover);
   }
+  .bg-layer-1-idle {
+    background-color: var(--color-layer-1-idle);
+  }
   .bg-layer-2-hover {
     background-color: var(--color-layer-2-hover);
   }
   .bg-layer-2-idle {
     background-color: var(--color-layer-2-idle);
   }
+  .bg-primary-alt-active {
+    background-color: var(--color-primary-alt-active);
+  }
+  .bg-primary-alt-idle {
+    background-color: var(--color-primary-alt-idle);
+  }
   .bg-primary-idle {
     background-color: var(--color-primary-idle);
   }
+  .bg-success-idle {
+    background-color: var(--color-success-idle);
+  }
   .bg-transparent {
     background-color: transparent;
   }
+  .bg-warning-idle {
+    background-color: var(--color-warning-idle);
+  }
+  .p-\[2px\] {
+    padding: 2px;
+  }
+  .p-small {
+    padding: var(--spacing-small);
+  }
+  .p-small-1x {
+    padding: var(--spacing-small-1x);
+  }
+  .p-small-2x {
+    padding: var(--spacing-small-2x);
+  }
+  .px-large {
+    padding-inline: var(--spacing-large);
+  }
+  .px-large-2x {
+    padding-inline: var(--spacing-large-2x);
+  }
   .px-medium {
     padding-inline: var(--spacing-medium);
   }
   .px-small {
     padding-inline: var(--spacing-small);
   }
+  .py-large {
+    padding-block: var(--spacing-large);
+  }
+  .py-medium {
+    padding-block: var(--spacing-medium);
+  }
+  .py-none {
+    padding-block: var(--spacing-none);
+  }
+  .py-small {
+    padding-block: var(--spacing-small);
+  }
   .py-small-1x {
     padding-block: var(--spacing-small-1x);
   }
   .py-small_1x-alt {
     padding-block: var(--spacing-small_1x-alt);
   }
+  .pt-small-1x {
+    padding-top: var(--spacing-small-1x);
+  }
   .text-center {
     text-align: center;
   }
+  .text-left {
+    text-align: left;
+  }
+  .font-inter {
+    font-family: var(--font-inter);
+  }
   .text-size-body-lg {
     font-size: var(--text-size-body-lg);
     line-height: var(--tw-leading, var(--text-size-body-lg--line-height));
@@ -481,8 +845,8 @@
     --tw-font-weight: var(--font-weight-thin);
     font-weight: var(--font-weight-thin);
   }
-  .text-ellipsis {
-    text-overflow: ellipsis;
+  .\!text-primary-label-active {
+    color: var(--color-primary-label-active) !important;
   }
   .text-danger-label-idle {
     color: var(--color-danger-label-idle);
@@ -490,32 +854,111 @@
   .text-icon-neutral-3 {
     color: var(--color-icon-neutral-3);
   }
+  .text-inherit {
+    color: inherit;
+  }
   .text-neutral-dark {
     color: var(--color-neutral-dark);
   }
   .text-neutral-label {
     color: var(--color-neutral-label);
   }
+  .text-neutral-placeholder {
+    color: var(--color-neutral-placeholder);
+  }
   .text-primary-idle {
     color: var(--color-primary-idle);
   }
-  .text-title-neutral {
-    color: var(--color-title-neutral);
-  }
-  .outline-hidden {
-    --tw-outline-style: none;
-    outline-style: none;
-    @media (forced-colors: active) {
-      outline: 2px solid transparent;
-      outline-offset: 2px;
-    }
+  .text-primary-label-active {
+    color: var(--color-primary-label-active);
+  }
+  .text-primary-label-idle {
+    color: var(--color-primary-label-idle);
+  }
+  .text-white {
+    color: var(--color-white);
+  }
+  .opacity-60 {
+    opacity: 60%;
+  }
+  .shadow-elevation-2 {
+    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, var(--color-shadow-light, #0000000F)), 0 4px 8px 0 var(--tw-shadow-color, var(--color-shadow-light, #0000000F));
+    box-shadow:
+      var(--tw-inset-shadow),
+      var(--tw-inset-ring-shadow),
+      var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow),
+      var(--tw-shadow);
+  }
+  .shadow-elevation-3 {
+    --tw-shadow:
+      0 var(--shadow-2x-small, 1px) var(--shadow-1x-small, 2px) var(--color-shadow-lightest, #0000000A),
+      0 var(--shadow-medium, 4px) var(--shadow-large-1x, 8px) var(--color-shadow-lightest, #0000000A),
+      0 var(--shadow-large-1x, 4px) var(--shadow-large3x, 16px) var(--color-shadow-lightest, #0000000A);
+    box-shadow:
+      var(--tw-inset-shadow),
+      var(--tw-inset-ring-shadow),
+      var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow),
+      var(--tw-shadow);
+  }
+  .ring-0 {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow:
+      var(--tw-inset-shadow),
+      var(--tw-inset-ring-shadow),
+      var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow),
+      var(--tw-shadow);
   }
   .outline-0 {
     outline-style: var(--tw-outline-style);
     outline-width: 0px;
   }
-  .transition-\[border-color\] {
-    transition-property: border-color;
+  .transition {
+    transition-property:
+      color,
+      background-color,
+      border-color,
+      outline-color,
+      text-decoration-color,
+      fill,
+      stroke,
+      --tw-gradient-from,
+      --tw-gradient-via,
+      --tw-gradient-to,
+      opacity,
+      box-shadow,
+      transform,
+      translate,
+      scale,
+      rotate,
+      filter,
+      -webkit-backdrop-filter,
+      backdrop-filter,
+      display,
+      visibility,
+      content-visibility,
+      overlay,
+      pointer-events;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-\[border-color\,box-shadow\,background-color\] {
+    transition-property:
+      border-color,
+      box-shadow,
+      background-color;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-\[visibility\] {
+    transition-property: visibility;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-all {
+    transition-property: all;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
@@ -534,10 +977,81 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-transform {
+    transition-property:
+      transform,
+      translate,
+      scale,
+      rotate;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .duration-100 {
     --tw-duration: 100ms;
     transition-duration: 100ms;
   }
+  .duration-200 {
+    --tw-duration: 200ms;
+    transition-duration: 200ms;
+  }
+  .duration-250 {
+    --tw-duration: 250ms;
+    transition-duration: 250ms;
+  }
+  .ease-in-out {
+    --tw-ease: var(--ease-in-out);
+    transition-timing-function: var(--ease-in-out);
+  }
+  .ease-out {
+    --tw-ease: var(--ease-out);
+    transition-timing-function: var(--ease-out);
+  }
+  .outline-none {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+  .group-focus-within\:-top-\[3px\] {
+    &:is(:where(.group):focus-within *) {
+      top: calc(3px * -1);
+    }
+  }
+  .group-focus-within\:animate-in {
+    &:is(:where(.group):focus-within *) {
+      animation: enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
+    }
+  }
+  .group-focus-within\:text-size-label-sm-1x {
+    &:is(:where(.group):focus-within *) {
+      font-size: var(--text-size-label-sm-1x);
+      line-height: var(--tw-leading, var(--text-size-label-sm-1x--line-height));
+    }
+  }
+  .group-focus-within\:font-medium {
+    &:is(:where(.group):focus-within *) {
+      --tw-font-weight: var(--font-weight-medium);
+      font-weight: var(--font-weight-medium);
+    }
+  }
+  .group-focus-within\:text-primary-idle {
+    &:is(:where(.group):focus-within *) {
+      color: var(--color-primary-idle);
+    }
+  }
+  .group-hover\:border-1 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        border-style: var(--tw-border-style);
+        border-width: 1px;
+      }
+    }
+  }
+  .group-hover\:border-border-layer-1 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        border-color: var(--color-border-layer-1);
+      }
+    }
+  }
   .group-hover\:border-border-layer-3 {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -545,10 +1059,275 @@
       }
     }
   }
-  .group-hover\:border-danger-idle {
-    &:is(:where(.group):hover *) {
+  .group-hover\/chip\:visible {
+    &:is(:where(.group\/chip):hover *) {
+      @media (hover: hover) {
+        visibility: visible;
+      }
+    }
+  }
+  .group-hover\/tag\:visible {
+    &:is(:where(.group\/tag):hover *) {
       @media (hover: hover) {
-        border-color: var(--color-danger-idle);
+        visibility: visible;
+      }
+    }
+  }
+  .group-has-\[div\[data-slot\=date-picker-left-slot\]\]\:left-large-4x {
+    &:is(:where(.group):has(*:is(div[data-slot=date-picker-left-slot])) *) {
+      left: var(--spacing-large-4x);
+    }
+  }
+  .group-has-\[div\[data-slot\=date-picker-left-slot\]\]\:pl-large-1x {
+    &:is(:where(.group):has(*:is(div[data-slot=date-picker-left-slot])) *) {
+      padding-left: var(--spacing-large-1x);
+    }
+  }
+  .group-has-\[div\[data-slot\=date-picker-right-slot\]\]\:right-large-4x {
+    &:is(:where(.group):has(*:is(div[data-slot=date-picker-right-slot])) *) {
+      right: var(--spacing-large-4x);
+    }
+  }
+  .group-has-\[div\[data-slot\=input-left-action-slot\]\]\:rounded-l-none {
+    &:is(:where(.group):has(*:is(div[data-slot=input-left-action-slot])) *) {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+  .group-has-\[div\[data-slot\=input-left-action-slot\]\]\:rounded-l-none {
+    &:is(:where(.group):has(*:is(div[data-slot=input-left-action-slot])) *) {
+      border-top-left-radius: var(--radius-none);
+      border-bottom-left-radius: var(--radius-none);
+    }
+  }
+  .group-has-\[div\[data-slot\=input-left-slot\]\]\:left-large-4x {
+    &:is(:where(.group):has(*:is(div[data-slot=input-left-slot])) *) {
+      left: var(--spacing-large-4x);
+    }
+  }
+  .group-has-\[div\[data-slot\=input-left-slot\]\]\:pl-large-1x {
+    &:is(:where(.group):has(*:is(div[data-slot=input-left-slot])) *) {
+      padding-left: var(--spacing-large-1x);
+    }
+  }
+  .group-has-\[div\[data-slot\=input-left-slot\]\]\:group-focus-within\:left-small {
+    &:is(:where(.group):has(*:is(div[data-slot=input-left-slot])) *) {
+      &:is(:where(.group):focus-within *) {
+        left: var(--spacing-small);
+      }
+    }
+  }
+  .group-has-\[div\[data-slot\=input-right-action-slot\]\]\:rounded-r-none {
+    &:is(:where(.group):has(*:is(div[data-slot=input-right-action-slot])) *) {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+  .group-has-\[div\[data-slot\=input-right-action-slot\]\]\:rounded-r-none {
+    &:is(:where(.group):has(*:is(div[data-slot=input-right-action-slot])) *) {
+      border-top-right-radius: var(--radius-none);
+      border-bottom-right-radius: var(--radius-none);
+    }
+  }
+  .group-has-\[div\[data-slot\=input-right-slot\]\]\:right-large-4x {
+    &:is(:where(.group):has(*:is(div[data-slot=input-right-slot])) *) {
+      right: var(--spacing-large-4x);
+    }
+  }
+  .group-has-\[div\[data-slot\=input-right-slot\]\]\:group-focus-within\:right-small {
+    &:is(:where(.group):has(*:is(div[data-slot=input-right-slot])) *) {
+      &:is(:where(.group):focus-within *) {
+        right: var(--spacing-small);
+      }
+    }
+  }
+  .group-has-\[div\[data-slot\=select-left-slot\]\]\:left-large-4x {
+    &:is(:where(.group):has(*:is(div[data-slot=select-left-slot])) *) {
+      left: var(--spacing-large-4x);
+    }
+  }
+  .group-has-\[div\[data-slot\=select-left-slot\]\]\:pl-large-1x {
+    &:is(:where(.group):has(*:is(div[data-slot=select-left-slot])) *) {
+      padding-left: var(--spacing-large-1x);
+    }
+  }
+  .group-has-\[div\[data-slot\=select-right-slot\]\]\:right-large-4x {
+    &:is(:where(.group):has(*:is(div[data-slot=select-right-slot])) *) {
+      right: var(--spacing-large-4x);
+    }
+  }
+  .group-has-\[input\:not\(\:placeholder-shown\)\]\:-top-\[3px\] {
+    &:is(:where(.group):has(*:is(input:not(:placeholder-shown))) *) {
+      top: calc(3px * -1);
+    }
+  }
+  .group-has-\[input\:not\(\:placeholder-shown\)\]\:animate-out {
+    &:is(:where(.group):has(*:is(input:not(:placeholder-shown))) *) {
+      animation: exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
+    }
+  }
+  .group-has-\[input\:not\(\:placeholder-shown\)\]\:text-size-label-sm-1x {
+    &:is(:where(.group):has(*:is(input:not(:placeholder-shown))) *) {
+      font-size: var(--text-size-label-sm-1x);
+      line-height: var(--tw-leading, var(--text-size-label-sm-1x--line-height));
+    }
+  }
+  .group-has-\[input\:not\(\:placeholder-shown\)\]\:font-medium {
+    &:is(:where(.group):has(*:is(input:not(:placeholder-shown))) *) {
+      --tw-font-weight: var(--font-weight-medium);
+      font-weight: var(--font-weight-medium);
+    }
+  }
+  .group-has-\[input\:not\(\:placeholder-shown\)\]\:text-primary-idle {
+    &:is(:where(.group):has(*:is(input:not(:placeholder-shown))) *) {
+      color: var(--color-primary-idle);
+    }
+  }
+  .group-has-\[div\[data-slot\=date-picker-left-slot\]\]\:group-has-\[input\:not\(\:placeholder-shown\)\]\:left-small {
+    &:is(:where(.group):has(*:is(div[data-slot=date-picker-left-slot])) *) {
+      &:is(:where(.group):has(*:is(input:not(:placeholder-shown))) *) {
+        left: var(--spacing-small);
+      }
+    }
+  }
+  .group-has-\[div\[data-slot\=date-picker-right-slot\]\]\:group-has-\[input\:not\(\:placeholder-shown\)\]\:right-small {
+    &:is(:where(.group):has(*:is(div[data-slot=date-picker-right-slot])) *) {
+      &:is(:where(.group):has(*:is(input:not(:placeholder-shown))) *) {
+        right: var(--spacing-small);
+      }
+    }
+  }
+  .group-has-\[div\[data-slot\=input-left-slot\]\]\:group-has-\[input\:not\(\:placeholder-shown\)\]\:left-small {
+    &:is(:where(.group):has(*:is(div[data-slot=input-left-slot])) *) {
+      &:is(:where(.group):has(*:is(input:not(:placeholder-shown))) *) {
+        left: var(--spacing-small);
+      }
+    }
+  }
+  .group-has-\[div\[data-slot\=input-right-slot\]\]\:group-has-\[input\:not\(\:placeholder-shown\)\]\:right-small {
+    &:is(:where(.group):has(*:is(div[data-slot=input-right-slot])) *) {
+      &:is(:where(.group):has(*:is(input:not(:placeholder-shown))) *) {
+        right: var(--spacing-small);
+      }
+    }
+  }
+  .group-has-\[div\[data-slot\=select-left-slot\]\]\:group-has-\[input\:not\(\:placeholder-shown\)\]\:left-small {
+    &:is(:where(.group):has(*:is(div[data-slot=select-left-slot])) *) {
+      &:is(:where(.group):has(*:is(input:not(:placeholder-shown))) *) {
+        left: var(--spacing-small);
+      }
+    }
+  }
+  .group-has-\[div\[data-slot\=select-right-slot\]\]\:group-has-\[input\:not\(\:placeholder-shown\)\]\:right-small {
+    &:is(:where(.group):has(*:is(div[data-slot=select-right-slot])) *) {
+      &:is(:where(.group):has(*:is(input:not(:placeholder-shown))) *) {
+        right: var(--spacing-small);
+      }
+    }
+  }
+  .group-data-\[state\=closed\]\:animate-out {
+    &:is(:where(.group)[data-state=closed] *) {
+      animation: exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
+    }
+  }
+  .group-data-\[state\=open\]\:-top-\[3px\] {
+    &:is(:where(.group)[data-state=open] *) {
+      top: calc(3px * -1);
+    }
+  }
+  .group-data-\[state\=open\]\:animate-in {
+    &:is(:where(.group)[data-state=open] *) {
+      animation: enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
+    }
+  }
+  .group-data-\[state\=open\]\:text-size-label-sm-1x {
+    &:is(:where(.group)[data-state=open] *) {
+      font-size: var(--text-size-label-sm-1x);
+      line-height: var(--tw-leading, var(--text-size-label-sm-1x--line-height));
+    }
+  }
+  .group-data-\[state\=open\]\:font-medium {
+    &:is(:where(.group)[data-state=open] *) {
+      --tw-font-weight: var(--font-weight-medium);
+      font-weight: var(--font-weight-medium);
+    }
+  }
+  .group-data-\[state\=open\]\:text-primary-idle {
+    &:is(:where(.group)[data-state=open] *) {
+      color: var(--color-primary-idle);
+    }
+  }
+  .group-has-\[div\[data-slot\=date-picker-left-slot\]\]\:group-data-\[state\=open\]\:left-small {
+    &:is(:where(.group):has(*:is(div[data-slot=date-picker-left-slot])) *) {
+      &:is(:where(.group)[data-state=open] *) {
+        left: var(--spacing-small);
+      }
+    }
+  }
+  .group-has-\[div\[data-slot\=date-picker-right-slot\]\]\:group-data-\[state\=open\]\:right-small {
+    &:is(:where(.group):has(*:is(div[data-slot=date-picker-right-slot])) *) {
+      &:is(:where(.group)[data-state=open] *) {
+        right: var(--spacing-small);
+      }
+    }
+  }
+  .group-has-\[div\[data-slot\=select-left-slot\]\]\:group-data-\[state\=open\]\:left-small {
+    &:is(:where(.group):has(*:is(div[data-slot=select-left-slot])) *) {
+      &:is(:where(.group)[data-state=open] *) {
+        left: var(--spacing-small);
+      }
+    }
+  }
+  .group-has-\[div\[data-slot\=select-right-slot\]\]\:group-data-\[state\=open\]\:right-small {
+    &:is(:where(.group):has(*:is(div[data-slot=select-right-slot])) *) {
+      &:is(:where(.group)[data-state=open] *) {
+        right: var(--spacing-small);
+      }
+    }
+  }
+  .group-data-\[variant\=danger\]\:text-danger-label-idle {
+    &:is(:where(.group)[data-variant=danger] *) {
+      color: var(--color-danger-label-idle);
+    }
+  }
+  .group-data-\[variant\=filled\]\:bg-layer-2-hover {
+    &:is(:where(.group)[data-variant=filled] *) {
+      background-color: var(--color-layer-2-hover);
+    }
+  }
+  .group-data-\[variant\=filled\]\:group-focus-within\:bg-layer-2-hover {
+    &:is(:where(.group)[data-variant=filled] *) {
+      &:is(:where(.group):focus-within *) {
+        background-color: var(--color-layer-2-hover);
+      }
+    }
+  }
+  .group-data-\[variant\=neutral\]\:text-icon-neutral-3 {
+    &:is(:where(.group)[data-variant=neutral] *) {
+      color: var(--color-icon-neutral-3);
+    }
+  }
+  .group-data-\[variant\=outlined\]\:bg-layer-2-idle {
+    &:is(:where(.group)[data-variant=outlined] *) {
+      background-color: var(--color-layer-2-idle);
+    }
+  }
+  .group-data-\[variant\=outlined\]\:group-focus-within\:bg-layer-2-idle {
+    &:is(:where(.group)[data-variant=outlined] *) {
+      &:is(:where(.group):focus-within *) {
+        background-color: var(--color-layer-2-idle);
+      }
+    }
+  }
+  .group-data-\[variant\=primary\]\:text-primary-label-idle {
+    &:is(:where(.group)[data-variant=primary] *) {
+      color: var(--color-primary-label-idle);
+    }
+  }
+  .placeholder\:placeholder-neutral-placeholder {
+    &::placeholder {
+      &::placeholder {
+        color: var(--color-neutral-placeholder);
       }
     }
   }
@@ -558,27 +1337,11 @@
       border-width: 1px;
     }
   }
-  .focus-within\:border-danger-idle {
-    &:focus-within {
-      border-color: var(--color-danger-idle);
-    }
-  }
   .focus-within\:border-primary-idle {
     &:focus-within {
       border-color: var(--color-primary-idle);
     }
   }
-  .focus-within\:shadow-focus-danger {
-    &:focus-within {
-      --tw-shadow: 0 0 0 var(--tw-shadow-color, var(--shadow-medium, 4px)) rgba(232, 48, 64, 0.16);
-      box-shadow:
-        var(--tw-inset-shadow),
-        var(--tw-inset-ring-shadow),
-        var(--tw-ring-offset-shadow),
-        var(--tw-ring-shadow),
-        var(--tw-shadow);
-    }
-  }
   .focus-within\:shadow-focus-primary {
     &:focus-within {
       --tw-shadow: 0 0 0 var(--tw-shadow-color, var(--shadow-medium, 4px)) rgba(232, 125, 48, 0.16);
@@ -590,6 +1353,27 @@
         var(--tw-shadow);
     }
   }
+  .hover\:border-border-layer-3 {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-border-layer-3);
+      }
+    }
+  }
+  .hover\:border-primary-idle {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-primary-idle);
+      }
+    }
+  }
+  .hover\:bg-danger-alt-hover {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-danger-alt-hover);
+      }
+    }
+  }
   .hover\:bg-danger-alt-idle {
     &:hover {
       @media (hover: hover) {
@@ -632,6 +1416,20 @@
       }
     }
   }
+  .hover\:bg-primary-alt-active {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-primary-alt-active);
+      }
+    }
+  }
+  .hover\:bg-primary-alt-hover {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-primary-alt-hover);
+      }
+    }
+  }
   .hover\:bg-primary-alt-idle {
     &:hover {
       @media (hover: hover) {
@@ -646,6 +1444,44 @@
       }
     }
   }
+  .hover\:shadow-focus-primary {
+    &:hover {
+      @media (hover: hover) {
+        --tw-shadow: 0 0 0 var(--tw-shadow-color, var(--shadow-medium, 4px)) rgba(232, 125, 48, 0.16);
+        box-shadow:
+          var(--tw-inset-shadow),
+          var(--tw-inset-ring-shadow),
+          var(--tw-ring-offset-shadow),
+          var(--tw-ring-shadow),
+          var(--tw-shadow);
+      }
+    }
+  }
+  .hover\:group-has-\[input\:not\(\:focus-within\)\]\:border-border-layer-3 {
+    &:hover {
+      @media (hover: hover) {
+        &:is(:where(.group):has(*:is(input:not(:focus-within))) *) {
+          border-color: var(--color-border-layer-3);
+        }
+      }
+    }
+  }
+  .focus\:border-primary-idle {
+    &:focus {
+      border-color: var(--color-primary-idle);
+    }
+  }
+  .focus\:shadow-focus-primary {
+    &:focus {
+      --tw-shadow: 0 0 0 var(--tw-shadow-color, var(--shadow-medium, 4px)) rgba(232, 125, 48, 0.16);
+      box-shadow:
+        var(--tw-inset-shadow),
+        var(--tw-inset-ring-shadow),
+        var(--tw-ring-offset-shadow),
+        var(--tw-ring-shadow),
+        var(--tw-shadow);
+    }
+  }
   .active\:bg-danger-alt-pressed {
     &:active {
       background-color: var(--color-danger-alt-pressed);
@@ -691,41 +1527,322 @@
       pointer-events: none;
     }
   }
+  .disabled\:cursor-not-allowed {
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
   .disabled\:opacity-38 {
     &:disabled {
       opacity: 38%;
     }
   }
-  .has-\[input\[data-filled\=true\]\]\:bg-layer-2-hover {
-    &:has(*:is(input[data-filled=true])) {
-      background-color: var(--color-layer-2-hover);
+  .disabled\:opacity-50 {
+    &:disabled {
+      opacity: 50%;
     }
   }
-  .data-\[disabled\=true\]\:pointer-events-none {
-    &[data-disabled=true] {
-      pointer-events: none;
+  .disabled\:opacity-60 {
+    &:disabled {
+      opacity: 60%;
     }
   }
-  .data-\[disabled\=true\]\:opacity-60 {
+  .disabled\:opacity-\[38\%\] {
+    &:disabled {
+      opacity: 38%;
+    }
+  }
+  .disabled\:hover\:border-border-layer-2 {
+    &:disabled {
+      &:hover {
+        @media (hover: hover) {
+          border-color: var(--color-border-layer-2);
+        }
+      }
+    }
+  }
+  .has-\[input\:not\(\:placeholder-shown\)\]\:border-primary-idle {
+    &:has(*:is(input:not(:placeholder-shown))) {
+      border-color: var(--color-primary-idle);
+    }
+  }
+  .has-\[input\:not\(\:placeholder-shown\)\]\:text-primary-idle {
+    &:has(*:is(input:not(:placeholder-shown))) {
+      color: var(--color-primary-idle);
+    }
+  }
+  .data-\[disabled\=true\]\:opacity-38 {
     &[data-disabled=true] {
-      opacity: 60%;
+      opacity: 38%;
+    }
+  }
+  .data-\[orientation\=horizontal\]\:h-px {
+    &[data-orientation=horizontal] {
+      height: 1px;
+    }
+  }
+  .data-\[orientation\=horizontal\]\:w-full {
+    &[data-orientation=horizontal] {
+      width: 100%;
+    }
+  }
+  .data-\[orientation\=horizontal\]\:flex-row {
+    &[data-orientation=horizontal] {
+      flex-direction: row;
+    }
+  }
+  .data-\[orientation\=vertical\]\:h-full {
+    &[data-orientation=vertical] {
+      height: 100%;
+    }
+  }
+  .data-\[orientation\=vertical\]\:w-px {
+    &[data-orientation=vertical] {
+      width: 1px;
+    }
+  }
+  .data-\[orientation\=vertical\]\:flex-col {
+    &[data-orientation=vertical] {
+      flex-direction: column;
+    }
+  }
+  .data-\[size\=lg\]\:size-large-8x {
+    &[data-size=lg] {
+      width: var(--spacing-large-8x);
+      height: var(--spacing-large-8x);
+    }
+  }
+  .data-\[size\=md\]\:size-large-4x {
+    &[data-size=md] {
+      width: var(--spacing-large-4x);
+      height: var(--spacing-large-4x);
+    }
+  }
+  .data-\[size\=sm\]\:size-large-2x {
+    &[data-size=sm] {
+      width: var(--spacing-large-2x);
+      height: var(--spacing-large-2x);
+    }
+  }
+  .data-\[size\=xs\]\:size-large-1x {
+    &[data-size=xs] {
+      width: var(--spacing-large-1x);
+      height: var(--spacing-large-1x);
+    }
+  }
+  .data-\[state\=active\]\:rounded-none {
+    &[data-state=active] {
+      border-radius: 0;
+    }
+  }
+  .data-\[state\=active\]\:rounded-none {
+    &[data-state=active] {
+      border-radius: var(--radius-none);
+    }
+  }
+  .data-\[state\=active\]\:border-b-\[3px\] {
+    &[data-state=active] {
+      border-bottom-style: var(--tw-border-style);
+      border-bottom-width: 3px;
+    }
+  }
+  .data-\[state\=active\]\:border-b-primary-active {
+    &[data-state=active] {
+      border-bottom-color: var(--color-primary-active);
+    }
+  }
+  .data-\[state\=active\]\:bg-layer-2-idle {
+    &[data-state=active] {
+      background-color: var(--color-layer-2-idle);
+    }
+  }
+  .data-\[state\=active\]\:text-primary-label-active {
+    &[data-state=active] {
+      color: var(--color-primary-label-active);
+    }
+  }
+  .data-\[state\=checked\]\:translate-x-\[calc\(100\%-2px\)\] {
+    &[data-state=checked] {
+      --tw-translate-x: calc(100% - 2px);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .data-\[state\=checked\]\:border-primary-active {
+    &[data-state=checked] {
+      border-color: var(--color-primary-active);
+    }
+  }
+  .data-\[state\=checked\]\:bg-primary-active {
+    &[data-state=checked] {
+      background-color: var(--color-primary-active);
+    }
+  }
+  .data-\[state\=checked\]\:bg-primary-idle {
+    &[data-state=checked] {
+      background-color: var(--color-primary-idle);
+    }
+  }
+  .data-\[state\=checked\]\:hover\:border-primary-idle {
+    &[data-state=checked] {
+      &:hover {
+        @media (hover: hover) {
+          border-color: var(--color-primary-idle);
+        }
+      }
+    }
+  }
+  .data-\[state\=closed\]\:animate-collapsible-up {
+    &[data-state=closed] {
+      animation: collapsible-up var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
+    }
+  }
+  .data-\[state\=closed\]\:animate-out {
+    &[data-state=closed] {
+      animation: exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
+    }
+  }
+  .data-\[state\=closed\]\:duration-300 {
+    &[data-state=closed] {
+      --tw-duration: 300ms;
+      transition-duration: 300ms;
+    }
+  }
+  .data-\[state\=closed\]\:fade-out-0 {
+    &[data-state=closed] {
+      --tw-exit-opacity: calc(0/100);
+      --tw-exit-opacity: 0;
+    }
+  }
+  .data-\[state\=closed\]\:slide-out-to-bottom {
+    &[data-state=closed] {
+      --tw-exit-translate-y: 100%;
+    }
+  }
+  .data-\[state\=closed\]\:slide-out-to-left {
+    &[data-state=closed] {
+      --tw-exit-translate-x: -100%;
     }
   }
-  .data-\[error\=true\]\:text-danger-idle {
-    &[data-error=true] {
-      color: var(--color-danger-idle);
+  .data-\[state\=closed\]\:slide-out-to-right {
+    &[data-state=closed] {
+      --tw-exit-translate-x: 100%;
     }
   }
-  .data-\[error\=true\]\:text-danger-label-active {
-    &[data-error=true] {
-      color: var(--color-danger-label-active);
+  .data-\[state\=closed\]\:slide-out-to-top {
+    &[data-state=closed] {
+      --tw-exit-translate-y: -100%;
+    }
+  }
+  .data-\[state\=open\]\:animate-collapsible-down {
+    &[data-state=open] {
+      animation: collapsible-down var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
+    }
+  }
+  .data-\[state\=open\]\:animate-in {
+    &[data-state=open] {
+      animation: enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
+    }
+  }
+  .data-\[state\=open\]\:border-primary-idle {
+    &[data-state=open] {
+      border-color: var(--color-primary-idle);
+    }
+  }
+  .data-\[state\=open\]\:shadow-focus-primary {
+    &[data-state=open] {
+      --tw-shadow: 0 0 0 var(--tw-shadow-color, var(--shadow-medium, 4px)) rgba(232, 125, 48, 0.16);
+      box-shadow:
+        var(--tw-inset-shadow),
+        var(--tw-inset-ring-shadow),
+        var(--tw-ring-offset-shadow),
+        var(--tw-ring-shadow),
+        var(--tw-shadow);
+    }
+  }
+  .data-\[state\=open\]\:duration-500 {
+    &[data-state=open] {
+      --tw-duration: 500ms;
+      transition-duration: 500ms;
+    }
+  }
+  .data-\[state\=open\]\:fade-in-0 {
+    &[data-state=open] {
+      --tw-enter-opacity: calc(0/100);
+      --tw-enter-opacity: 0;
+    }
+  }
+  .data-\[state\=open\]\:slide-in-from-bottom {
+    &[data-state=open] {
+      --tw-enter-translate-y: 100%;
+    }
+  }
+  .data-\[state\=open\]\:slide-in-from-left {
+    &[data-state=open] {
+      --tw-enter-translate-x: -100%;
+    }
+  }
+  .data-\[state\=open\]\:slide-in-from-right {
+    &[data-state=open] {
+      --tw-enter-translate-x: 100%;
+    }
+  }
+  .data-\[state\=open\]\:slide-in-from-top {
+    &[data-state=open] {
+      --tw-enter-translate-y: -100%;
+    }
+  }
+  .data-\[state\=unchecked\]\:translate-x-0 {
+    &[data-state=unchecked] {
+      --tw-translate-x: calc(var(--spacing) * 0);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .data-\[state\=unchecked\]\:bg-alt-4 {
+    &[data-state=unchecked] {
+      background-color: var(--color-alt-4);
+    }
+  }
+  .data-\[variant\=outlined\]\:group-has-\[input\:not\(\:placeholder-shown\)\]\:text-primary-idle {
+    &[data-variant=outlined] {
+      &:is(:where(.group):has(*:is(input:not(:placeholder-shown))) *) {
+        color: var(--color-primary-idle);
+      }
+    }
+  }
+  .sm\:max-w-sm {
+    @media (width >= 40rem) {
+      max-width: var(--container-sm);
     }
   }
 }
+@property --tw-animation-delay { syntax: "*"; inherits: false; initial-value: 0s; }
+@property --tw-animation-direction { syntax: "*"; inherits: false; initial-value: normal; }
+@property --tw-animation-duration { syntax: "*"; inherits: false; }
+@property --tw-animation-fill-mode { syntax: "*"; inherits: false; initial-value: none; }
+@property --tw-animation-iteration-count { syntax: "*"; inherits: false; initial-value: 1; }
+@property --tw-enter-blur { syntax: "*"; inherits: false; initial-value: 0; }
+@property --tw-enter-opacity { syntax: "*"; inherits: false; initial-value: 1; }
+@property --tw-enter-rotate { syntax: "*"; inherits: false; initial-value: 0; }
+@property --tw-enter-scale { syntax: "*"; inherits: false; initial-value: 1; }
+@property --tw-enter-translate-x { syntax: "*"; inherits: false; initial-value: 0; }
+@property --tw-enter-translate-y { syntax: "*"; inherits: false; initial-value: 0; }
+@property --tw-exit-blur { syntax: "*"; inherits: false; initial-value: 0; }
+@property --tw-exit-opacity { syntax: "*"; inherits: false; initial-value: 1; }
+@property --tw-exit-rotate { syntax: "*"; inherits: false; initial-value: 0; }
+@property --tw-exit-scale { syntax: "*"; inherits: false; initial-value: 1; }
+@property --tw-exit-translate-x { syntax: "*"; inherits: false; initial-value: 0; }
+@property --tw-exit-translate-y { syntax: "*"; inherits: false; initial-value: 0; }
+@layer base {
+  * {
+    scrollbar-color: initial;
+    scrollbar-width: initial;
+  }
+}
+@property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; }
+@property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; }
+@property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; }
 @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }
 @property --tw-font-weight { syntax: "*"; inherits: false; }
-@property --tw-outline-style { syntax: "*"; inherits: false; initial-value: solid; }
-@property --tw-duration { syntax: "*"; inherits: false; }
 @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
 @property --tw-shadow-color { syntax: "*"; inherits: false; }
 @property --tw-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@@ -740,16 +1857,50 @@
 @property --tw-ring-offset-width { syntax: "<length>"; inherits: false; initial-value: 0px; }
 @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }
 @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
+@property --tw-outline-style { syntax: "*"; inherits: false; initial-value: solid; }
+@property --tw-duration { syntax: "*"; inherits: false; }
+@property --tw-ease { syntax: "*"; inherits: false; }
+@keyframes enter {
+  from {
+    opacity: var(--tw-enter-opacity,1);
+    transform: translate3d(var(--tw-enter-translate-x,0), var(--tw-enter-translate-y,0), 0)scale3d(var(--tw-enter-scale,1), var(--tw-enter-scale,1), var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0));
+    filter: blur(var(--tw-enter-blur,0));
+  }
+}
+@keyframes exit {
+  to {
+    opacity: var(--tw-exit-opacity,1);
+    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));
+    filter: blur(var(--tw-exit-blur,0));
+  }
+}
+@keyframes collapsible-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-collapsible-content-height,var(--bits-collapsible-content-height,var(--reka-collapsible-content-height,var(--kb-collapsible-content-height,auto))));
+  }
+}
+@keyframes collapsible-up {
+  from {
+    height: var(--radix-collapsible-content-height,var(--bits-collapsible-content-height,var(--reka-collapsible-content-height,var(--kb-collapsible-content-height,auto))));
+  }
+  to {
+    height: 0;
+  }
+}
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *,
     ::before,
     ::after,
     ::backdrop {
+      --tw-translate-x: 0;
+      --tw-translate-y: 0;
+      --tw-translate-z: 0;
       --tw-border-style: solid;
       --tw-font-weight: initial;
-      --tw-outline-style: solid;
-      --tw-duration: initial;
       --tw-shadow: 0 0 #0000;
       --tw-shadow-color: initial;
       --tw-shadow-alpha: 100%;
@@ -764,6 +1915,26 @@
       --tw-ring-offset-width: 0px;
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-outline-style: solid;
+      --tw-duration: initial;
+      --tw-ease: initial;
+      --tw-animation-delay: 0s;
+      --tw-animation-direction: normal;
+      --tw-animation-duration: initial;
+      --tw-animation-fill-mode: none;
+      --tw-animation-iteration-count: 1;
+      --tw-enter-blur: 0;
+      --tw-enter-opacity: 1;
+      --tw-enter-rotate: 0;
+      --tw-enter-scale: 1;
+      --tw-enter-translate-x: 0;
+      --tw-enter-translate-y: 0;
+      --tw-exit-blur: 0;
+      --tw-exit-opacity: 1;
+      --tw-exit-rotate: 0;
+      --tw-exit-scale: 1;
+      --tw-exit-translate-x: 0;
+      --tw-exit-translate-y: 0;
     }
   }
 }