@machinerd/js-module 0.3.0 → 0.4.0

package/dist/styles/index.css

@@ -1,16 +1,16 @@
-/*! tailwindcss v4.2.0 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 @layer theme {
   :root, :host {
     --komc-color-sky-950: #006699;
+    --komc-color-blue-50: oklch(97% 0.014 254.604);
     --komc-color-blue-500: oklch(62.3% 0.214 259.815);
     --komc-color-indigo-600: oklch(51.1% 0.262 276.966);
     --komc-color-indigo-700: oklch(45.7% 0.24 277.023);
     --komc-color-gray-50: #fafafa;
     --komc-color-gray-100: oklch(96.7% 0.003 264.542);
     --komc-color-gray-200: #f5f5f5;
-    --komc-color-gray-300: oklch(87.2% 0.01 258.338);
     --komc-color-gray-500: #e5e5e5;
     --komc-color-gray-600: oklch(44.6% 0.03 256.802);
     --komc-color-gray-700: #cccccc;
@@ -19,23 +19,31 @@
     --komc-color-neutral-100: oklch(97% 0 0);
     --komc-color-neutral-200: oklch(92.2% 0 0);
     --komc-color-neutral-300: oklch(87% 0 0);
-    --komc-color-neutral-400: oklch(70.8% 0 0);
+    --komc-color-neutral-500: oklch(55.6% 0 0);
+    --komc-color-neutral-600: oklch(43.9% 0 0);
     --komc-color-black: #000;
     --komc-color-white: #fff;
     --komc-spacing: 0.25rem;
-    --komc-container-xs: 20rem;
     --komc-container-sm: 24rem;
     --komc-container-md: 28rem;
     --komc-container-lg: 32rem;
     --komc-container-xl: 36rem;
     --komc-container-2xl: 42rem;
-    --komc-container-3xl: 48rem;
-    --komc-container-4xl: 56rem;
-    --komc-container-5xl: 64rem;
-    --komc-container-6xl: 72rem;
-    --komc-container-7xl: 80rem;
     --komc-text-xs: 0.75rem;
     --komc-text-xs--line-height: calc(1 / 0.75);
+    --komc-text-sm: 0.875rem;
+    --komc-text-sm--line-height: calc(1.25 / 0.875);
+    --komc-text-base: 1rem;
+    --komc-text-base--line-height: calc(1.5 / 1);
+    --komc-text-lg: 1.125rem;
+    --komc-text-lg--line-height: calc(1.75 / 1.125);
+    --komc-font-weight-light: 300;
+    --komc-font-weight-normal: 400;
+    --komc-font-weight-medium: 500;
+    --komc-font-weight-semibold: 600;
+    --komc-font-weight-bold: 700;
+    --komc-font-weight-extrabold: 800;
+    --komc-font-weight-black: 900;
     --komc-radius-sm: 0.25rem;
     --komc-radius-md: 0.375rem;
     --komc-radius-lg: 0.5rem;
@@ -47,6 +55,7 @@
     --komc-drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
     --komc-drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);
     --komc-drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);
+    --komc-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --komc-animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     --komc-default-transition-duration: 150ms;
     --komc-default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -73,17 +82,8 @@
   .komc\:relative {
     position: relative;
   }
-  .komc\:sticky {
-    position: sticky;
-  }
-  .komc\:top-0 {
-    top: calc(var(--komc-spacing) * 0);
-  }
-  .komc\:top-1\/2 {
-    top: calc(1 / 2 * 100%);
-  }
-  .komc\:top-3 {
-    top: calc(var(--komc-spacing) * 3);
+  .komc\:inset-0 {
+    inset: calc(var(--komc-spacing) * 0);
   }
   .komc\:top-full {
     top: 100%;
@@ -94,15 +94,9 @@
   .komc\:right-5 {
     right: calc(var(--komc-spacing) * 5);
   }
-  .komc\:right-full {
-    right: 100%;
-  }
   .komc\:bottom-0 {
     bottom: calc(var(--komc-spacing) * 0);
   }
-  .komc\:bottom-3 {
-    bottom: calc(var(--komc-spacing) * 3);
-  }
   .komc\:bottom-full {
     bottom: 100%;
   }
@@ -115,18 +109,12 @@
   .komc\:left-5 {
     left: calc(var(--komc-spacing) * 5);
   }
-  .komc\:left-full {
-    left: 100%;
-  }
   .komc\:z-10 {
     z-index: 10;
   }
   .komc\:z-99 {
     z-index: 99;
   }
-  .komc\:z-1000 {
-    z-index: 1000;
-  }
   .komc\:mx-auto {
     margin-inline: auto;
   }
@@ -136,17 +124,17 @@
   .komc\:-mt-4 {
     margin-top: calc(var(--komc-spacing) * -4);
   }
-  .komc\:mt-1 {
-    margin-top: calc(var(--komc-spacing) * 1);
-  }
-  .komc\:-mr-1 {
-    margin-right: calc(var(--komc-spacing) * -1);
+  .komc\:mt-3 {
+    margin-top: calc(var(--komc-spacing) * 3);
   }
   .komc\:-mb-1 {
     margin-bottom: calc(var(--komc-spacing) * -1);
   }
-  .komc\:-ml-1 {
-    margin-left: calc(var(--komc-spacing) * -1);
+  .komc\:mb-2 {
+    margin-bottom: calc(var(--komc-spacing) * 2);
+  }
+  .komc\:mb-4 {
+    margin-bottom: calc(var(--komc-spacing) * 4);
   }
   .komc\:-ml-4 {
     margin-left: calc(var(--komc-spacing) * -4);
@@ -160,6 +148,9 @@
   .komc\:grid {
     display: grid;
   }
+  .komc\:hidden {
+    display: none;
+  }
   .komc\:inline-flex {
     display: inline-flex;
   }
@@ -202,35 +193,20 @@
   .komc\:h-16 {
     height: calc(var(--komc-spacing) * 16);
   }
-  .komc\:h-18 {
-    height: calc(var(--komc-spacing) * 18);
-  }
   .komc\:h-20 {
     height: calc(var(--komc-spacing) * 20);
   }
-  .komc\:h-22 {
-    height: calc(var(--komc-spacing) * 22);
-  }
-  .komc\:h-22\.5 {
-    height: calc(var(--komc-spacing) * 22.5);
-  }
   .komc\:h-24 {
     height: calc(var(--komc-spacing) * 24);
   }
-  .komc\:h-26 {
-    height: calc(var(--komc-spacing) * 26);
-  }
   .komc\:h-28 {
     height: calc(var(--komc-spacing) * 28);
   }
-  .komc\:h-30 {
-    height: calc(var(--komc-spacing) * 30);
+  .komc\:h-40 {
+    height: calc(var(--komc-spacing) * 40);
   }
-  .komc\:h-50 {
-    height: calc(var(--komc-spacing) * 50);
-  }
-  .komc\:h-400 {
-    height: calc(var(--komc-spacing) * 400);
+  .komc\:h-56 {
+    height: calc(var(--komc-spacing) * 56);
   }
   .komc\:h-auto {
     height: auto;
@@ -241,14 +217,29 @@
   .komc\:h-full {
     height: 100%;
   }
-  .komc\:min-h-10 {
-    min-height: calc(var(--komc-spacing) * 10);
+  .komc\:min-h-0 {
+    min-height: calc(var(--komc-spacing) * 0);
   }
   .komc\:min-h-15 {
     min-height: calc(var(--komc-spacing) * 15);
   }
-  .komc\:min-h-400 {
-    min-height: calc(var(--komc-spacing) * 400);
+  .komc\:min-h-16 {
+    min-height: calc(var(--komc-spacing) * 16);
+  }
+  .komc\:min-h-32 {
+    min-height: calc(var(--komc-spacing) * 32);
+  }
+  .komc\:min-h-48 {
+    min-height: calc(var(--komc-spacing) * 48);
+  }
+  .komc\:min-h-56 {
+    min-height: calc(var(--komc-spacing) * 56);
+  }
+  .komc\:min-h-96 {
+    min-height: calc(var(--komc-spacing) * 96);
+  }
+  .komc\:min-h-screen {
+    min-height: 100vh;
   }
   .komc\:w-2 {
     width: calc(var(--komc-spacing) * 2);
@@ -265,27 +256,9 @@
   .komc\:max-w-2xl {
     max-width: var(--komc-container-2xl);
   }
-  .komc\:max-w-3xl {
-    max-width: var(--komc-container-3xl);
-  }
-  .komc\:max-w-4xl {
-    max-width: var(--komc-container-4xl);
-  }
-  .komc\:max-w-5xl {
-    max-width: var(--komc-container-5xl);
-  }
-  .komc\:max-w-6xl {
-    max-width: var(--komc-container-6xl);
-  }
-  .komc\:max-w-7xl {
-    max-width: var(--komc-container-7xl);
-  }
   .komc\:max-w-70 {
     max-width: calc(var(--komc-spacing) * 70);
   }
-  .komc\:max-w-330 {
-    max-width: calc(var(--komc-spacing) * 330);
-  }
   .komc\:max-w-full {
     max-width: 100%;
   }
@@ -301,12 +274,15 @@
   .komc\:max-w-xl {
     max-width: var(--komc-container-xl);
   }
-  .komc\:max-w-xs {
-    max-width: var(--komc-container-xs);
-  }
   .komc\:min-w-0 {
     min-width: calc(var(--komc-spacing) * 0);
   }
+  .komc\:min-w-\[320px\] {
+    min-width: 320px;
+  }
+  .komc\:min-w-\[min\(100\%\,320px\)\] {
+    min-width: min(100%, 320px);
+  }
   .komc\:shrink-0 {
     flex-shrink: 0;
   }
@@ -320,18 +296,6 @@
     --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
-  .komc\:-translate-x-2 {
-    --tw-translate-x: calc(var(--komc-spacing) * -2);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
-  .komc\:translate-x-2 {
-    --tw-translate-x: calc(var(--komc-spacing) * 2);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
-  .komc\:-translate-y-1\/2 {
-    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
   .komc\:-translate-y-2 {
     --tw-translate-y: calc(var(--komc-spacing) * -2);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -343,27 +307,39 @@
   .komc\:animate-pulse {
     animation: var(--komc-animate-pulse);
   }
+  .komc\:cursor-default {
+    cursor: default;
+  }
   .komc\:cursor-pointer {
     cursor: pointer;
   }
-  .komc\:grid-cols-4 {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-  }
-  .komc\:grid-cols-5 {
-    grid-template-columns: repeat(5, minmax(0, 1fr));
+  .komc\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
   .komc\:flex-col {
     flex-direction: column;
   }
+  .komc\:flex-wrap {
+    flex-wrap: wrap;
+  }
   .komc\:items-center {
     align-items: center;
   }
+  .komc\:items-start {
+    align-items: flex-start;
+  }
   .komc\:justify-between {
     justify-content: space-between;
   }
   .komc\:justify-center {
     justify-content: center;
   }
+  .komc\:justify-end {
+    justify-content: flex-end;
+  }
+  .komc\:justify-items-center {
+    justify-items: center;
+  }
   .komc\:gap-0 {
     gap: calc(var(--komc-spacing) * 0);
   }
@@ -382,12 +358,18 @@
   .komc\:gap-5 {
     gap: calc(var(--komc-spacing) * 5);
   }
+  .komc\:gap-6 {
+    gap: calc(var(--komc-spacing) * 6);
+  }
   .komc\:gap-x-2 {
     column-gap: calc(var(--komc-spacing) * 2);
   }
   .komc\:overflow-hidden {
     overflow: hidden;
   }
+  .komc\:rounded {
+    border-radius: 0.25rem;
+  }
   .komc\:rounded-2xl {
     border-radius: var(--komc-radius-2xl);
   }
@@ -416,6 +398,10 @@
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
+  .komc\:border-2 {
+    border-style: var(--tw-border-style);
+    border-width: 2px;
+  }
   .komc\:border-t {
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
@@ -432,9 +418,6 @@
     --tw-border-style: none;
     border-style: none;
   }
-  .komc\:border-black {
-    border-color: var(--komc-color-black);
-  }
   .komc\:border-blue-500 {
     border-color: var(--komc-color-blue-500);
   }
@@ -447,6 +430,15 @@
   .komc\:border-neutral-200 {
     border-color: var(--komc-color-neutral-200);
   }
+  .komc\:border-neutral-300 {
+    border-color: var(--komc-color-neutral-300);
+  }
+  .komc\:border-sky-450 {
+    border-color: var(--komc-color-sky-450);
+  }
+  .komc\:border-sky-750 {
+    border-color: var(--komc-color-sky-750);
+  }
   .komc\:border-transparent {
     border-color: transparent;
   }
@@ -456,6 +448,15 @@
   .komc\:bg-\[rgb\(95\,95\,96\)\] {
     background-color: rgb(95,95,96);
   }
+  .komc\:bg-black\/50 {
+    background-color: var(--komc-color-black);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--komc-color-black) 50%, transparent);
+    }
+  }
+  .komc\:bg-blue-50 {
+    background-color: var(--komc-color-blue-50);
+  }
   .komc\:bg-blue-500 {
     background-color: var(--komc-color-blue-500);
   }
@@ -465,21 +466,18 @@
   .komc\:bg-gray-200 {
     background-color: var(--komc-color-gray-200);
   }
-  .komc\:bg-gray-300 {
-    background-color: var(--komc-color-gray-300);
-  }
   .komc\:bg-indigo-600 {
     background-color: var(--komc-color-indigo-600);
   }
   .komc\:bg-inherit {
     background-color: inherit;
   }
+  .komc\:bg-neutral-50 {
+    background-color: var(--komc-color-neutral-50);
+  }
   .komc\:bg-neutral-100 {
     background-color: var(--komc-color-neutral-100);
   }
-  .komc\:bg-neutral-400 {
-    background-color: var(--komc-color-neutral-400);
-  }
   .komc\:bg-night-700 {
     background-color: var(--komc-color-night-700);
   }
@@ -495,6 +493,9 @@
   .komc\:bg-white {
     background-color: var(--komc-color-white);
   }
+  .komc\:p-0 {
+    padding: calc(var(--komc-spacing) * 0);
+  }
   .komc\:p-1 {
     padding: calc(var(--komc-spacing) * 1);
   }
@@ -504,8 +505,11 @@
   .komc\:p-4 {
     padding: calc(var(--komc-spacing) * 4);
   }
-  .komc\:p-40 {
-    padding: calc(var(--komc-spacing) * 40);
+  .komc\:p-6 {
+    padding: calc(var(--komc-spacing) * 6);
+  }
+  .komc\:p-8 {
+    padding: calc(var(--komc-spacing) * 8);
   }
   .komc\:px-0 {
     padding-inline: calc(var(--komc-spacing) * 0);
@@ -534,16 +538,62 @@
   .komc\:px-6 {
     padding-inline: calc(var(--komc-spacing) * 6);
   }
+  .komc\:py-1 {
+    padding-block: calc(var(--komc-spacing) * 1);
+  }
+  .komc\:py-2 {
+    padding-block: calc(var(--komc-spacing) * 2);
+  }
   .komc\:pt-4 {
     padding-top: calc(var(--komc-spacing) * 4);
   }
   .komc\:pl-4 {
     padding-left: calc(var(--komc-spacing) * 4);
   }
+  .komc\:text-base {
+    font-size: var(--komc-text-base);
+    line-height: var(--tw-leading, var(--komc-text-base--line-height));
+  }
+  .komc\:text-lg {
+    font-size: var(--komc-text-lg);
+    line-height: var(--tw-leading, var(--komc-text-lg--line-height));
+  }
+  .komc\:text-sm {
+    font-size: var(--komc-text-sm);
+    line-height: var(--tw-leading, var(--komc-text-sm--line-height));
+  }
   .komc\:text-xs {
     font-size: var(--komc-text-xs);
     line-height: var(--tw-leading, var(--komc-text-xs--line-height));
   }
+  .komc\:font-black {
+    --tw-font-weight: var(--komc-font-weight-black);
+    font-weight: var(--komc-font-weight-black);
+  }
+  .komc\:font-bold {
+    --tw-font-weight: var(--komc-font-weight-bold);
+    font-weight: var(--komc-font-weight-bold);
+  }
+  .komc\:font-extrabold {
+    --tw-font-weight: var(--komc-font-weight-extrabold);
+    font-weight: var(--komc-font-weight-extrabold);
+  }
+  .komc\:font-light {
+    --tw-font-weight: var(--komc-font-weight-light);
+    font-weight: var(--komc-font-weight-light);
+  }
+  .komc\:font-medium {
+    --tw-font-weight: var(--komc-font-weight-medium);
+    font-weight: var(--komc-font-weight-medium);
+  }
+  .komc\:font-normal {
+    --tw-font-weight: var(--komc-font-weight-normal);
+    font-weight: var(--komc-font-weight-normal);
+  }
+  .komc\:font-semibold {
+    --tw-font-weight: var(--komc-font-weight-semibold);
+    font-weight: var(--komc-font-weight-semibold);
+  }
   .komc\:break-all {
     word-break: break-all;
   }
@@ -559,6 +609,12 @@
   .komc\:text-gray-800 {
     color: var(--komc-color-gray-800);
   }
+  .komc\:text-neutral-500 {
+    color: var(--komc-color-neutral-500);
+  }
+  .komc\:text-neutral-600 {
+    color: var(--komc-color-neutral-600);
+  }
   .komc\:text-white {
     color: var(--komc-color-white);
   }
@@ -568,6 +624,14 @@
   .komc\:opacity-100 {
     opacity: 100%;
   }
+  .komc\:shadow-lg {
+    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .komc\:shadow-sm {
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .komc\:drop-shadow-2xl {
     --tw-drop-shadow-size: drop-shadow(0 25px 25px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.15)));
     --tw-drop-shadow: drop-shadow(var(--komc-drop-shadow-2xl));
@@ -621,10 +685,58 @@
     --tw-duration: 300ms;
     transition-duration: 300ms;
   }
+  .komc\:ease-in-out {
+    --tw-ease: var(--komc-ease-in-out);
+    transition-timing-function: var(--komc-ease-in-out);
+  }
   .komc\:outline-none {
     --tw-outline-style: none;
     outline-style: none;
   }
+  .komc\:after\:pointer-events-none {
+    &::after {
+      content: var(--tw-content);
+      pointer-events: none;
+    }
+  }
+  .komc\:after\:invisible {
+    &::after {
+      content: var(--tw-content);
+      visibility: hidden;
+    }
+  }
+  .komc\:after\:h-0 {
+    &::after {
+      content: var(--tw-content);
+      height: calc(var(--komc-spacing) * 0);
+    }
+  }
+  .komc\:after\:overflow-hidden {
+    &::after {
+      content: var(--tw-content);
+      overflow: hidden;
+    }
+  }
+  .komc\:after\:font-bold {
+    &::after {
+      content: var(--tw-content);
+      --tw-font-weight: var(--komc-font-weight-bold);
+      font-weight: var(--komc-font-weight-bold);
+    }
+  }
+  .komc\:after\:content-\[attr\(data-text\)\] {
+    &::after {
+      --tw-content: attr(data-text);
+      content: var(--tw-content);
+    }
+  }
+  .komc\:after\:select-none {
+    &::after {
+      content: var(--tw-content);
+      -webkit-user-select: none;
+      user-select: none;
+    }
+  }
   .komc\:hover\:border-transparent {
     &:hover {
       @media (hover: hover) {
@@ -667,38 +779,38 @@
       }
     }
   }
-  .komc\:hover\:bg-neutral-50 {
+  .komc\:hover\:bg-night-700 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--komc-color-neutral-50);
+        background-color: var(--komc-color-night-700);
       }
     }
   }
-  .komc\:hover\:bg-neutral-200 {
+  .komc\:hover\:bg-night-800 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--komc-color-neutral-200);
+        background-color: var(--komc-color-night-800);
       }
     }
   }
-  .komc\:hover\:bg-night-700 {
+  .komc\:hover\:bg-sky-450 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--komc-color-night-700);
+        background-color: var(--komc-color-sky-450);
       }
     }
   }
-  .komc\:hover\:bg-night-800 {
+  .komc\:hover\:bg-sky-650 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--komc-color-night-800);
+        background-color: var(--komc-color-sky-650);
       }
     }
   }
-  .komc\:hover\:bg-sky-650 {
+  .komc\:hover\:bg-sky-750 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--komc-color-sky-650);
+        background-color: var(--komc-color-sky-750);
       }
     }
   }
@@ -751,11 +863,6 @@
       }
     }
   }
-  .komc\:focus\:border-neutral-300 {
-    &:focus {
-      border-color: var(--komc-color-neutral-300);
-    }
-  }
   .komc\:active\:border-transparent {
     &:active {
       border-color: transparent;
@@ -796,11 +903,21 @@
       background-color: var(--komc-color-night-800);
     }
   }
+  .komc\:active\:bg-sky-450 {
+    &:active {
+      background-color: var(--komc-color-sky-450);
+    }
+  }
   .komc\:active\:bg-sky-650 {
     &:active {
       background-color: var(--komc-color-sky-650);
     }
   }
+  .komc\:active\:bg-sky-750 {
+    &:active {
+      background-color: var(--komc-color-sky-750);
+    }
+  }
   .komc\:active\:bg-sky-950 {
     &:active {
       background-color: var(--komc-color-sky-950);
@@ -886,9 +1003,30 @@
       color: var(--komc-color-gray-800);
     }
   }
-  .komc\:xl\:p-10 {
-    @media (width >= 80rem) {
-      padding: calc(var(--komc-spacing) * 10);
+  .komc\:data-\[state\=closed\]\:scale-95 {
+    &[data-state="closed"] {
+      --tw-scale-x: 95%;
+      --tw-scale-y: 95%;
+      --tw-scale-z: 95%;
+      scale: var(--tw-scale-x) var(--tw-scale-y);
+    }
+  }
+  .komc\:data-\[state\=closed\]\:opacity-0 {
+    &[data-state="closed"] {
+      opacity: 0%;
+    }
+  }
+  .komc\:data-\[state\=open\]\:scale-100 {
+    &[data-state="open"] {
+      --tw-scale-x: 100%;
+      --tw-scale-y: 100%;
+      --tw-scale-z: 100%;
+      scale: var(--tw-scale-x) var(--tw-scale-y);
+    }
+  }
+  .komc\:data-\[state\=open\]\:opacity-100 {
+    &[data-state="open"] {
+      opacity: 100%;
     }
   }
   .komc\:\[\&_svg\]\:transition-colors {
@@ -973,127 +1111,155 @@
   inherits: false;
   initial-value: solid;
 }
-@property --tw-blur {
+@property --tw-font-weight {
   syntax: "*";
   inherits: false;
 }
-@property --tw-brightness {
+@property --tw-shadow {
   syntax: "*";
   inherits: false;
+  initial-value: 0 0 #0000;
 }
-@property --tw-contrast {
+@property --tw-shadow-color {
   syntax: "*";
   inherits: false;
 }
-@property --tw-grayscale {
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-inset-shadow {
   syntax: "*";
   inherits: false;
+  initial-value: 0 0 #0000;
 }
-@property --tw-hue-rotate {
+@property --tw-inset-shadow-color {
   syntax: "*";
   inherits: false;
 }
-@property --tw-invert {
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-ring-color {
   syntax: "*";
   inherits: false;
 }
-@property --tw-opacity {
+@property --tw-ring-shadow {
   syntax: "*";
   inherits: false;
+  initial-value: 0 0 #0000;
 }
-@property --tw-saturate {
+@property --tw-inset-ring-color {
   syntax: "*";
   inherits: false;
 }
-@property --tw-sepia {
+@property --tw-inset-ring-shadow {
   syntax: "*";
   inherits: false;
+  initial-value: 0 0 #0000;
 }
-@property --tw-drop-shadow {
+@property --tw-ring-inset {
   syntax: "*";
   inherits: false;
 }
-@property --tw-drop-shadow-color {
+@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-drop-shadow-alpha {
-  syntax: "<percentage>";
+@property --tw-ring-offset-shadow {
+  syntax: "*";
   inherits: false;
-  initial-value: 100%;
+  initial-value: 0 0 #0000;
 }
-@property --tw-drop-shadow-size {
+@property --tw-blur {
   syntax: "*";
   inherits: false;
 }
-@property --tw-duration {
+@property --tw-brightness {
   syntax: "*";
   inherits: false;
 }
-@property --tw-shadow {
+@property --tw-contrast {
   syntax: "*";
   inherits: false;
-  initial-value: 0 0 #0000;
 }
-@property --tw-shadow-color {
+@property --tw-grayscale {
   syntax: "*";
   inherits: false;
 }
-@property --tw-shadow-alpha {
-  syntax: "<percentage>";
+@property --tw-hue-rotate {
+  syntax: "*";
   inherits: false;
-  initial-value: 100%;
 }
-@property --tw-inset-shadow {
+@property --tw-invert {
   syntax: "*";
   inherits: false;
-  initial-value: 0 0 #0000;
 }
-@property --tw-inset-shadow-color {
+@property --tw-opacity {
   syntax: "*";
   inherits: false;
 }
-@property --tw-inset-shadow-alpha {
-  syntax: "<percentage>";
+@property --tw-saturate {
+  syntax: "*";
   inherits: false;
-  initial-value: 100%;
 }
-@property --tw-ring-color {
+@property --tw-sepia {
   syntax: "*";
   inherits: false;
 }
-@property --tw-ring-shadow {
+@property --tw-drop-shadow {
   syntax: "*";
   inherits: false;
-  initial-value: 0 0 #0000;
 }
-@property --tw-inset-ring-color {
+@property --tw-drop-shadow-color {
   syntax: "*";
   inherits: false;
 }
-@property --tw-inset-ring-shadow {
+@property --tw-drop-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-drop-shadow-size {
   syntax: "*";
   inherits: false;
-  initial-value: 0 0 #0000;
 }
-@property --tw-ring-inset {
+@property --tw-duration {
   syntax: "*";
   inherits: false;
 }
-@property --tw-ring-offset-width {
-  syntax: "<length>";
+@property --tw-ease {
+  syntax: "*";
   inherits: false;
-  initial-value: 0px;
 }
-@property --tw-ring-offset-color {
+@property --tw-content {
   syntax: "*";
+  initial-value: "";
   inherits: false;
-  initial-value: #fff;
 }
-@property --tw-ring-offset-shadow {
+@property --tw-scale-x {
   syntax: "*";
   inherits: false;
-  initial-value: 0 0 #0000;
+  initial-value: 1;
+}
+@property --tw-scale-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
 }
 @keyframes pulse {
   50% {
@@ -1107,20 +1273,7 @@
       --tw-translate-y: 0;
       --tw-translate-z: 0;
       --tw-border-style: solid;
-      --tw-blur: initial;
-      --tw-brightness: initial;
-      --tw-contrast: initial;
-      --tw-grayscale: initial;
-      --tw-hue-rotate: initial;
-      --tw-invert: initial;
-      --tw-opacity: initial;
-      --tw-saturate: initial;
-      --tw-sepia: initial;
-      --tw-drop-shadow: initial;
-      --tw-drop-shadow-color: initial;
-      --tw-drop-shadow-alpha: 100%;
-      --tw-drop-shadow-size: initial;
-      --tw-duration: initial;
+      --tw-font-weight: initial;
       --tw-shadow: 0 0 #0000;
       --tw-shadow-color: initial;
       --tw-shadow-alpha: 100%;
@@ -1135,6 +1288,25 @@
       --tw-ring-offset-width: 0px;
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-blur: initial;
+      --tw-brightness: initial;
+      --tw-contrast: initial;
+      --tw-grayscale: initial;
+      --tw-hue-rotate: initial;
+      --tw-invert: initial;
+      --tw-opacity: initial;
+      --tw-saturate: initial;
+      --tw-sepia: initial;
+      --tw-drop-shadow: initial;
+      --tw-drop-shadow-color: initial;
+      --tw-drop-shadow-alpha: 100%;
+      --tw-drop-shadow-size: initial;
+      --tw-duration: initial;
+      --tw-ease: initial;
+      --tw-content: "";
+      --tw-scale-x: 1;
+      --tw-scale-y: 1;
+      --tw-scale-z: 1;
     }
   }
 }