@machinerd/js-module 0.9.0 → 0.11.0

package/dist/styles/admin.css

@@ -0,0 +1,2424 @@
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
+@layer properties;
+@layer theme, base, components, utilities;
+@layer theme {
+  :root, :host {
+    --komc-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
+    monospace;
+    --komc-color-red-50: oklch(97.1% 0.013 17.38);
+    --komc-color-red-200: oklch(88.5% 0.062 18.334);
+    --komc-color-red-400: oklch(70.4% 0.191 22.216);
+    --komc-color-red-500: oklch(63.7% 0.237 25.331);
+    --komc-color-red-600: oklch(57.7% 0.245 27.325);
+    --komc-color-orange-500: oklch(70.5% 0.213 47.604);
+    --komc-color-yellow-500: oklch(79.5% 0.184 86.047);
+    --komc-color-green-50: oklch(98.2% 0.018 155.826);
+    --komc-color-green-500: var(--komc-color-green-500);
+    --komc-color-green-600: var(--komc-color-green-600);
+    --komc-color-sky-50: var(--komc-color-sky-50);
+    --komc-color-sky-100: var(--komc-color-sky-100);
+    --komc-color-sky-200: var(--komc-color-sky-200);
+    --komc-color-sky-300: var(--komc-color-sky-300);
+    --komc-color-sky-400: var(--komc-color-sky-400);
+    --komc-color-sky-500: var(--komc-color-sky-500);
+    --komc-color-sky-600: var(--komc-color-sky-600);
+    --komc-color-sky-700: var(--komc-color-sky-700);
+    --komc-color-sky-800: var(--komc-color-sky-800);
+    --komc-color-sky-900: var(--komc-color-sky-900);
+    --komc-color-sky-950: var(--komc-color-sky-950);
+    --komc-color-blue-50: var(--komc-color-blue-50);
+    --komc-color-blue-100: var(--komc-color-blue-100);
+    --komc-color-blue-200: var(--komc-color-blue-200);
+    --komc-color-blue-300: var(--komc-color-blue-300);
+    --komc-color-blue-400: var(--komc-color-blue-400);
+    --komc-color-blue-500: var(--komc-color-blue-500);
+    --komc-color-blue-600: var(--komc-color-blue-600);
+    --komc-color-blue-700: var(--komc-color-blue-700);
+    --komc-color-blue-800: var(--komc-color-blue-800);
+    --komc-color-blue-900: var(--komc-color-blue-900);
+    --komc-color-blue-950: var(--komc-color-blue-950);
+    --komc-color-indigo-200: oklch(87% 0.065 274.039);
+    --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: var(--komc-color-gray-50);
+    --komc-color-gray-100: var(--komc-color-gray-100);
+    --komc-color-gray-200: var(--komc-color-gray-200);
+    --komc-color-gray-300: var(--komc-color-gray-300);
+    --komc-color-gray-400: var(--komc-color-gray-400);
+    --komc-color-gray-500: var(--komc-color-gray-500);
+    --komc-color-gray-600: var(--komc-color-gray-600);
+    --komc-color-gray-700: var(--komc-color-gray-700);
+    --komc-color-gray-800: var(--komc-color-gray-800);
+    --komc-color-gray-900: var(--komc-color-gray-900);
+    --komc-color-gray-950: var(--komc-color-gray-950);
+    --komc-color-neutral-50: var(--komc-color-neutral-50);
+    --komc-color-neutral-100: var(--komc-color-neutral-100);
+    --komc-color-neutral-200: var(--komc-color-neutral-200);
+    --komc-color-neutral-300: var(--komc-color-neutral-300);
+    --komc-color-neutral-400: var(--komc-color-neutral-400);
+    --komc-color-neutral-500: var(--komc-color-neutral-500);
+    --komc-color-neutral-600: var(--komc-color-neutral-600);
+    --komc-color-neutral-700: var(--komc-color-neutral-700);
+    --komc-color-neutral-800: var(--komc-color-neutral-800);
+    --komc-color-neutral-900: var(--komc-color-neutral-900);
+    --komc-color-neutral-950: var(--komc-color-neutral-950);
+    --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-4xl: 56rem;
+    --komc-container-6xl: 72rem;
+    --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-leading-relaxed: 1.625;
+    --komc-radius-sm: 0.25rem;
+    --komc-radius-md: 0.375rem;
+    --komc-radius-lg: 0.5rem;
+    --komc-radius-xl: 0.75rem;
+    --komc-radius-2xl: 1rem;
+    --komc-radius-3xl: 1.5rem;
+    --komc-drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);
+    --komc-drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);
+    --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-blur-sm: 8px;
+    --komc-default-transition-duration: 150ms;
+    --komc-default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    --komc-shadow-aside: var(--komc-shadow-aside);
+    --komc-shadow-card: var(--komc-shadow-card);
+    --komc-shadow-field: var(--komc-shadow-field);
+    --komc-color-brand-black-01: var(--komc-color-brand-black-01);
+    --komc-color-brand-blue-01: var(--komc-color-brand-blue-01);
+    --komc-color-brand-red-01: var(--komc-color-brand-red-01);
+    --komc-color-night-50: var(--komc-color-night-50);
+    --komc-color-night-100: var(--komc-color-night-100);
+    --komc-color-night-200: var(--komc-color-night-200);
+    --komc-color-night-300: var(--komc-color-night-300);
+    --komc-color-night-400: var(--komc-color-night-400);
+    --komc-color-night-500: var(--komc-color-night-500);
+    --komc-color-night-600: var(--komc-color-night-600);
+    --komc-color-night-700: var(--komc-color-night-700);
+    --komc-color-night-800: var(--komc-color-night-800);
+    --komc-color-night-900: var(--komc-color-night-900);
+    --komc-color-night-950: var(--komc-color-night-950);
+    --komc-color-forest-50: var(--komc-color-forest-50);
+    --komc-color-forest-100: var(--komc-color-forest-100);
+    --komc-color-forest-200: var(--komc-color-forest-200);
+    --komc-color-forest-300: var(--komc-color-forest-300);
+    --komc-color-forest-400: var(--komc-color-forest-400);
+    --komc-color-forest-500: var(--komc-color-forest-500);
+    --komc-color-forest-600: var(--komc-color-forest-600);
+    --komc-color-forest-700: var(--komc-color-forest-700);
+    --komc-color-forest-800: var(--komc-color-forest-800);
+    --komc-color-forest-900: var(--komc-color-forest-900);
+    --komc-color-forest-950: var(--komc-color-forest-950);
+    --komc-color-blue-01: var(--komc-color-blue-01);
+  }
+}
+@layer utilities {
+  .komc\:\@container\/dialog-content {
+    container-type: inline-size;
+    container-name: dialog-content;
+  }
+  .komc\:\@container\/tiptap-wrapper {
+    container-type: inline-size;
+    container-name: tiptap-wrapper;
+  }
+  .komc\:\@container {
+    container-type: inline-size;
+  }
+  .komc\:pointer-events-auto {
+    pointer-events: auto;
+  }
+  .komc\:pointer-events-none {
+    pointer-events: none;
+  }
+  .komc\:invisible {
+    visibility: hidden;
+  }
+  .komc\:visible {
+    visibility: visible;
+  }
+  .komc\:absolute {
+    position: absolute;
+  }
+  .komc\:fixed {
+    position: fixed;
+  }
+  .komc\:relative {
+    position: relative;
+  }
+  .komc\:sticky {
+    position: sticky;
+  }
+  .komc\:-inset-1\.5 {
+    inset: calc(var(--komc-spacing) * -1.5);
+  }
+  .komc\:inset-0 {
+    inset: 0px;
+  }
+  .komc\:-top-1 {
+    top: calc(var(--komc-spacing) * -1);
+  }
+  .komc\:-top-9999 {
+    top: calc(var(--komc-spacing) * -9999);
+  }
+  .komc\:top-0 {
+    top: 0px;
+  }
+  .komc\:top-1 {
+    top: var(--komc-spacing);
+  }
+  .komc\:top-1\/2 {
+    top: calc(1 / 2 * 100%);
+  }
+  .komc\:top-6 {
+    top: calc(var(--komc-spacing) * 6);
+  }
+  .komc\:top-8 {
+    top: calc(var(--komc-spacing) * 8);
+  }
+  .komc\:top-\[50\%\] {
+    top: 50%;
+  }
+  .komc\:top-\[calc\(50\%-9px\)\] {
+    top: calc(50% - 9px);
+  }
+  .komc\:top-\[calc\(50\%-10px\)\] {
+    top: calc(50% - 10px);
+  }
+  .komc\:top-full {
+    top: 100%;
+  }
+  .komc\:-right-1 {
+    right: calc(var(--komc-spacing) * -1);
+  }
+  .komc\:right-0 {
+    right: 0px;
+  }
+  .komc\:right-1 {
+    right: var(--komc-spacing);
+  }
+  .komc\:right-5 {
+    right: calc(var(--komc-spacing) * 5);
+  }
+  .komc\:right-11 {
+    right: calc(var(--komc-spacing) * 11);
+  }
+  .komc\:right-14 {
+    right: calc(var(--komc-spacing) * 14);
+  }
+  .komc\:-bottom-1 {
+    bottom: calc(var(--komc-spacing) * -1);
+  }
+  .komc\:bottom-0 {
+    bottom: 0px;
+  }
+  .komc\:bottom-full {
+    bottom: 100%;
+  }
+  .komc\:-left-1 {
+    left: calc(var(--komc-spacing) * -1);
+  }
+  .komc\:-left-9999 {
+    left: calc(var(--komc-spacing) * -9999);
+  }
+  .komc\:left-0 {
+    left: 0px;
+  }
+  .komc\:left-1 {
+    left: var(--komc-spacing);
+  }
+  .komc\:left-1\/2 {
+    left: calc(1 / 2 * 100%);
+  }
+  .komc\:left-5 {
+    left: calc(var(--komc-spacing) * 5);
+  }
+  .komc\:left-\[50\%\] {
+    left: 50%;
+  }
+  .komc\:z-0 {
+    z-index: 0;
+  }
+  .komc\:z-10 {
+    z-index: 10;
+  }
+  .komc\:z-40 {
+    z-index: 40;
+  }
+  .komc\:z-45 {
+    z-index: 45;
+  }
+  .komc\:z-50 {
+    z-index: 50;
+  }
+  .komc\:z-55 {
+    z-index: 55;
+  }
+  .komc\:z-99 {
+    z-index: 99;
+  }
+  .komc\:z-10000 {
+    z-index: 10000;
+  }
+  .komc\:z-10001\! {
+    z-index: 10001 !important;
+  }
+  .komc\:m-0 {
+    margin: 0px;
+  }
+  .komc\:m-0\! {
+    margin: 0px !important;
+  }
+  .komc\:m-auto\! {
+    margin: auto !important;
+  }
+  .komc\:mx-2 {
+    margin-inline: calc(var(--komc-spacing) * 2);
+  }
+  .komc\:mx-4 {
+    margin-inline: calc(var(--komc-spacing) * 4);
+  }
+  .komc\:mx-auto {
+    margin-inline: auto;
+  }
+  .komc\:my-3\.5\! {
+    margin-block: calc(var(--komc-spacing) * 3.5) !important;
+  }
+  .komc\:-mt-1 {
+    margin-top: calc(var(--komc-spacing) * -1);
+  }
+  .komc\:-mt-4 {
+    margin-top: calc(var(--komc-spacing) * -4);
+  }
+  .komc\:mt-0\.5 {
+    margin-top: calc(var(--komc-spacing) * 0.5);
+  }
+  .komc\:mt-2 {
+    margin-top: calc(var(--komc-spacing) * 2);
+  }
+  .komc\:mt-3 {
+    margin-top: calc(var(--komc-spacing) * 3);
+  }
+  .komc\:-mb-1 {
+    margin-bottom: 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\:mb-6 {
+    margin-bottom: calc(var(--komc-spacing) * 6);
+  }
+  .komc\:-ml-4 {
+    margin-left: calc(var(--komc-spacing) * -4);
+  }
+  .komc\:ml-1 {
+    margin-left: var(--komc-spacing);
+  }
+  .komc\:ml-2\.5 {
+    margin-left: calc(var(--komc-spacing) * 2.5);
+  }
+  .komc\:ml-4 {
+    margin-left: calc(var(--komc-spacing) * 4);
+  }
+  .komc\:ml-5 {
+    margin-left: calc(var(--komc-spacing) * 5);
+  }
+  .komc\:ml-auto {
+    margin-left: auto;
+  }
+  .komc\:block {
+    display: block;
+  }
+  .komc\:flex {
+    display: flex;
+  }
+  .komc\:grid {
+    display: grid;
+  }
+  .komc\:hidden {
+    display: none;
+  }
+  .komc\:inline {
+    display: inline;
+  }
+  .komc\:inline-flex {
+    display: inline-flex;
+  }
+  .komc\:aspect-square {
+    aspect-ratio: 1 / 1;
+  }
+  .komc\:size-5 {
+    width: calc(var(--komc-spacing) * 5);
+    height: calc(var(--komc-spacing) * 5);
+  }
+  .komc\:h-2 {
+    height: calc(var(--komc-spacing) * 2);
+  }
+  .komc\:h-3\.5 {
+    height: calc(var(--komc-spacing) * 3.5);
+  }
+  .komc\:h-4 {
+    height: calc(var(--komc-spacing) * 4);
+  }
+  .komc\:h-4\.5 {
+    height: calc(var(--komc-spacing) * 4.5);
+  }
+  .komc\:h-4\.5\! {
+    height: calc(var(--komc-spacing) * 4.5) !important;
+  }
+  .komc\:h-5 {
+    height: calc(var(--komc-spacing) * 5);
+  }
+  .komc\:h-6 {
+    height: calc(var(--komc-spacing) * 6);
+  }
+  .komc\:h-7 {
+    height: calc(var(--komc-spacing) * 7);
+  }
+  .komc\:h-7\.5 {
+    height: calc(var(--komc-spacing) * 7.5);
+  }
+  .komc\:h-8 {
+    height: calc(var(--komc-spacing) * 8);
+  }
+  .komc\:h-8\.5 {
+    height: calc(var(--komc-spacing) * 8.5);
+  }
+  .komc\:h-9 {
+    height: calc(var(--komc-spacing) * 9);
+  }
+  .komc\:h-9\.5 {
+    height: calc(var(--komc-spacing) * 9.5);
+  }
+  .komc\:h-10 {
+    height: calc(var(--komc-spacing) * 10);
+  }
+  .komc\:h-11 {
+    height: calc(var(--komc-spacing) * 11);
+  }
+  .komc\:h-11\.5 {
+    height: calc(var(--komc-spacing) * 11.5);
+  }
+  .komc\:h-12 {
+    height: calc(var(--komc-spacing) * 12);
+  }
+  .komc\:h-13 {
+    height: calc(var(--komc-spacing) * 13);
+  }
+  .komc\:h-14 {
+    height: calc(var(--komc-spacing) * 14);
+  }
+  .komc\:h-15 {
+    height: calc(var(--komc-spacing) * 15);
+  }
+  .komc\:h-15\.5 {
+    height: calc(var(--komc-spacing) * 15.5);
+  }
+  .komc\:h-16 {
+    height: calc(var(--komc-spacing) * 16);
+  }
+  .komc\:h-20 {
+    height: calc(var(--komc-spacing) * 20);
+  }
+  .komc\:h-22 {
+    height: calc(var(--komc-spacing) * 22);
+  }
+  .komc\:h-24 {
+    height: calc(var(--komc-spacing) * 24);
+  }
+  .komc\:h-25 {
+    height: calc(var(--komc-spacing) * 25);
+  }
+  .komc\:h-28 {
+    height: calc(var(--komc-spacing) * 28);
+  }
+  .komc\:h-30 {
+    height: calc(var(--komc-spacing) * 30);
+  }
+  .komc\:h-36 {
+    height: calc(var(--komc-spacing) * 36);
+  }
+  .komc\:h-40 {
+    height: calc(var(--komc-spacing) * 40);
+  }
+  .komc\:h-50 {
+    height: calc(var(--komc-spacing) * 50);
+  }
+  .komc\:h-72 {
+    height: calc(var(--komc-spacing) * 72);
+  }
+  .komc\:h-\[50dvh\] {
+    height: 50dvh;
+  }
+  .komc\:h-\[60vh\] {
+    height: 60vh;
+  }
+  .komc\:h-\[200px\] {
+    height: 200px;
+  }
+  .komc\:h-auto {
+    height: auto;
+  }
+  .komc\:h-fit {
+    height: fit-content;
+  }
+  .komc\:h-full {
+    height: 100%;
+  }
+  .komc\:h-full\! {
+    height: 100% !important;
+  }
+  .komc\:max-h-\[90dvh\] {
+    max-height: 90dvh;
+  }
+  .komc\:max-h-full {
+    max-height: 100%;
+  }
+  .komc\:min-h-0 {
+    min-height: 0px;
+  }
+  .komc\:min-h-8 {
+    min-height: calc(var(--komc-spacing) * 8);
+  }
+  .komc\:min-h-8\.5 {
+    min-height: calc(var(--komc-spacing) * 8.5);
+  }
+  .komc\:min-h-9\.5 {
+    min-height: calc(var(--komc-spacing) * 9.5);
+  }
+  .komc\:min-h-10 {
+    min-height: calc(var(--komc-spacing) * 10);
+  }
+  .komc\:min-h-11\.5 {
+    min-height: calc(var(--komc-spacing) * 11.5);
+  }
+  .komc\:min-h-12 {
+    min-height: calc(var(--komc-spacing) * 12);
+  }
+  .komc\:min-h-12\.5 {
+    min-height: calc(var(--komc-spacing) * 12.5);
+  }
+  .komc\:min-h-13 {
+    min-height: calc(var(--komc-spacing) * 13);
+  }
+  .komc\:min-h-14 {
+    min-height: calc(var(--komc-spacing) * 14);
+  }
+  .komc\:min-h-15 {
+    min-height: calc(var(--komc-spacing) * 15);
+  }
+  .komc\:min-h-16 {
+    min-height: calc(var(--komc-spacing) * 16);
+  }
+  .komc\:min-h-17 {
+    min-height: calc(var(--komc-spacing) * 17);
+  }
+  .komc\:min-h-18 {
+    min-height: calc(var(--komc-spacing) * 18);
+  }
+  .komc\:min-h-25 {
+    min-height: calc(var(--komc-spacing) * 25);
+  }
+  .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-72 {
+    min-height: calc(var(--komc-spacing) * 72);
+  }
+  .komc\:min-h-96 {
+    min-height: calc(var(--komc-spacing) * 96);
+  }
+  .komc\:min-h-\[28vh\] {
+    min-height: 28vh;
+  }
+  .komc\:min-h-dvh {
+    min-height: 100dvh;
+  }
+  .komc\:min-h-screen {
+    min-height: 100vh;
+  }
+  .komc\:w-0\.5 {
+    width: calc(var(--komc-spacing) * 0.5);
+  }
+  .komc\:w-2 {
+    width: calc(var(--komc-spacing) * 2);
+  }
+  .komc\:w-3\.5 {
+    width: calc(var(--komc-spacing) * 3.5);
+  }
+  .komc\:w-3\.25 {
+    width: calc(var(--komc-spacing) * 3.25);
+  }
+  .komc\:w-4 {
+    width: calc(var(--komc-spacing) * 4);
+  }
+  .komc\:w-4\! {
+    width: calc(var(--komc-spacing) * 4) !important;
+  }
+  .komc\:w-5 {
+    width: calc(var(--komc-spacing) * 5);
+  }
+  .komc\:w-6 {
+    width: calc(var(--komc-spacing) * 6);
+  }
+  .komc\:w-7 {
+    width: calc(var(--komc-spacing) * 7);
+  }
+  .komc\:w-7\.5 {
+    width: calc(var(--komc-spacing) * 7.5);
+  }
+  .komc\:w-10 {
+    width: calc(var(--komc-spacing) * 10);
+  }
+  .komc\:w-14 {
+    width: calc(var(--komc-spacing) * 14);
+  }
+  .komc\:w-20 {
+    width: calc(var(--komc-spacing) * 20);
+  }
+  .komc\:w-30 {
+    width: calc(var(--komc-spacing) * 30);
+  }
+  .komc\:w-40 {
+    width: calc(var(--komc-spacing) * 40);
+  }
+  .komc\:w-80 {
+    width: calc(var(--komc-spacing) * 80);
+  }
+  .komc\:w-\[50dvw\] {
+    width: 50dvw;
+  }
+  .komc\:w-\[300px\] {
+    width: 300px;
+  }
+  .komc\:w-\[320px\] {
+    width: 320px;
+  }
+  .komc\:w-auto {
+    width: auto;
+  }
+  .komc\:w-fit {
+    width: fit-content;
+  }
+  .komc\:w-full {
+    width: 100%;
+  }
+  .komc\:w-max {
+    width: max-content;
+  }
+  .komc\:w-px {
+    width: 1px;
+  }
+  .komc\:max-w-2xl {
+    max-width: var(--komc-container-2xl);
+  }
+  .komc\:max-w-4xl {
+    max-width: var(--komc-container-4xl);
+  }
+  .komc\:max-w-6xl {
+    max-width: var(--komc-container-6xl);
+  }
+  .komc\:max-w-30\.75 {
+    max-width: calc(var(--komc-spacing) * 30.75);
+  }
+  .komc\:max-w-37\.5 {
+    max-width: calc(var(--komc-spacing) * 37.5);
+  }
+  .komc\:max-w-70 {
+    max-width: calc(var(--komc-spacing) * 70);
+  }
+  .komc\:max-w-100 {
+    max-width: calc(var(--komc-spacing) * 100);
+  }
+  .komc\:max-w-\[90dvw\] {
+    max-width: 90dvw;
+  }
+  .komc\:max-w-\[320px\] {
+    max-width: 320px;
+  }
+  .komc\:max-w-full {
+    max-width: 100%;
+  }
+  .komc\:max-w-lg {
+    max-width: var(--komc-container-lg);
+  }
+  .komc\:max-w-md {
+    max-width: var(--komc-container-md);
+  }
+  .komc\:max-w-sm {
+    max-width: var(--komc-container-sm);
+  }
+  .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: 0px;
+  }
+  .komc\:min-w-30 {
+    min-width: calc(var(--komc-spacing) * 30);
+  }
+  .komc\:min-w-30\.75 {
+    min-width: calc(var(--komc-spacing) * 30.75);
+  }
+  .komc\:min-w-37\.5 {
+    min-width: calc(var(--komc-spacing) * 37.5);
+  }
+  .komc\:min-w-40 {
+    min-width: calc(var(--komc-spacing) * 40);
+  }
+  .komc\:min-w-52\.5 {
+    min-width: calc(var(--komc-spacing) * 52.5);
+  }
+  .komc\:min-w-87\.5 {
+    min-width: calc(var(--komc-spacing) * 87.5);
+  }
+  .komc\:min-w-\[320px\] {
+    min-width: 320px;
+  }
+  .komc\:min-w-\[min\(100\%\,320px\)\] {
+    min-width: min(100%, 320px);
+  }
+  .komc\:flex-1 {
+    flex: 1;
+  }
+  .komc\:shrink-0 {
+    flex-shrink: 0;
+  }
+  .komc\:grow-0 {
+    flex-grow: 0;
+  }
+  .komc\:basis-1\/2\! {
+    flex-basis: calc(1 / 2 * 100%) !important;
+  }
+  .komc\:basis-full {
+    flex-basis: 100%;
+  }
+  .komc\:-translate-x-1\/2 {
+    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .komc\:-translate-x-full {
+    --tw-translate-x: -100%;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .komc\:translate-x-full {
+    --tw-translate-x: 100%;
+    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);
+  }
+  .komc\:-translate-y-full {
+    --tw-translate-y: -100%;
+    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);
+  }
+  .komc\:translate-y-full {
+    --tw-translate-y: 100%;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .komc\:animate-pulse {
+    animation: var(--komc-animate-pulse);
+  }
+  .komc\:cursor-default {
+    cursor: default;
+  }
+  .komc\:cursor-ew-resize {
+    cursor: ew-resize;
+  }
+  .komc\:cursor-grab {
+    cursor: grab;
+  }
+  .komc\:cursor-ne-resize {
+    cursor: ne-resize;
+  }
+  .komc\:cursor-ns-resize {
+    cursor: ns-resize;
+  }
+  .komc\:cursor-nw-resize {
+    cursor: nw-resize;
+  }
+  .komc\:cursor-pointer {
+    cursor: pointer;
+  }
+  .komc\:cursor-se-resize {
+    cursor: se-resize;
+  }
+  .komc\:cursor-sw-resize {
+    cursor: sw-resize;
+  }
+  .komc\:touch-none {
+    touch-action: none;
+  }
+  .komc\:resize {
+    resize: both;
+  }
+  .komc\:resize-none {
+    resize: none;
+  }
+  .komc\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .komc\:flex-col {
+    flex-direction: column;
+  }
+  .komc\:flex-col-reverse {
+    flex-direction: column-reverse;
+  }
+  .komc\:flex-row {
+    flex-direction: row;
+  }
+  .komc\:flex-row-reverse {
+    flex-direction: row-reverse;
+  }
+  .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-start {
+    justify-content: flex-start;
+  }
+  .komc\:justify-items-center {
+    justify-items: center;
+  }
+  .komc\:gap-0 {
+    gap: 0px;
+  }
+  .komc\:gap-1 {
+    gap: var(--komc-spacing);
+  }
+  .komc\:gap-2 {
+    gap: calc(var(--komc-spacing) * 2);
+  }
+  .komc\:gap-2\.5 {
+    gap: calc(var(--komc-spacing) * 2.5);
+  }
+  .komc\:gap-3 {
+    gap: calc(var(--komc-spacing) * 3);
+  }
+  .komc\:gap-4 {
+    gap: calc(var(--komc-spacing) * 4);
+  }
+  .komc\:gap-5 {
+    gap: calc(var(--komc-spacing) * 5);
+  }
+  .komc\:gap-6 {
+    gap: calc(var(--komc-spacing) * 6);
+  }
+  :where(.komc\:space-y-3 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--komc-spacing) * 3) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--komc-spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
+  }
+  .komc\:gap-x-1 {
+    column-gap: var(--komc-spacing);
+  }
+  .komc\:gap-x-2 {
+    column-gap: calc(var(--komc-spacing) * 2);
+  }
+  .komc\:gap-x-2\.5 {
+    column-gap: calc(var(--komc-spacing) * 2.5);
+  }
+  .komc\:gap-x-3 {
+    column-gap: calc(var(--komc-spacing) * 3);
+  }
+  .komc\:gap-x-4 {
+    column-gap: calc(var(--komc-spacing) * 4);
+  }
+  .komc\:gap-y-2\.5 {
+    row-gap: calc(var(--komc-spacing) * 2.5);
+  }
+  .komc\:gap-y-3 {
+    row-gap: calc(var(--komc-spacing) * 3);
+  }
+  .komc\:gap-y-4 {
+    row-gap: calc(var(--komc-spacing) * 4);
+  }
+  .komc\:gap-y-4\.5 {
+    row-gap: calc(var(--komc-spacing) * 4.5);
+  }
+  .komc\:truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .komc\:overflow-auto {
+    overflow: auto;
+  }
+  .komc\:overflow-hidden {
+    overflow: hidden;
+  }
+  .komc\:overflow-y-auto {
+    overflow-y: auto;
+  }
+  .komc\:overscroll-none {
+    overscroll-behavior: none;
+  }
+  .komc\:rounded {
+    border-radius: 0.25rem;
+  }
+  .komc\:rounded-2xl {
+    border-radius: var(--komc-radius-2xl);
+  }
+  .komc\:rounded-3xl {
+    border-radius: var(--komc-radius-3xl);
+  }
+  .komc\:rounded-full {
+    border-radius: calc(infinity * 1px);
+  }
+  .komc\:rounded-lg {
+    border-radius: var(--komc-radius-lg);
+  }
+  .komc\:rounded-lg\! {
+    border-radius: var(--komc-radius-lg) !important;
+  }
+  .komc\:rounded-md {
+    border-radius: var(--komc-radius-md);
+  }
+  .komc\:rounded-md\! {
+    border-radius: var(--komc-radius-md) !important;
+  }
+  .komc\:rounded-none {
+    border-radius: 0;
+  }
+  .komc\:rounded-sm {
+    border-radius: var(--komc-radius-sm);
+  }
+  .komc\:rounded-sm\! {
+    border-radius: var(--komc-radius-sm) !important;
+  }
+  .komc\:rounded-xl {
+    border-radius: var(--komc-radius-xl);
+  }
+  .komc\:rounded-xl\! {
+    border-radius: var(--komc-radius-xl) !important;
+  }
+  .komc\:border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+  .komc\:border-2 {
+    border-style: var(--tw-border-style);
+    border-width: 2px;
+  }
+  .komc\:border-\[0\.6px\] {
+    border-style: var(--tw-border-style);
+    border-width: 0.6px;
+  }
+  .komc\:border-\[0\.6px\]\! {
+    border-style: var(--tw-border-style) !important;
+    border-width: 0.6px !important;
+  }
+  .komc\:border-t {
+    border-top-style: var(--tw-border-style);
+    border-top-width: 1px;
+  }
+  .komc\:border-r {
+    border-right-style: var(--tw-border-style);
+    border-right-width: 1px;
+  }
+  .komc\:border-r-\[0\.6px\] {
+    border-right-style: var(--tw-border-style);
+    border-right-width: 0.6px;
+  }
+  .komc\:border-b {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+  }
+  .komc\:border-l {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 1px;
+  }
+  .komc\:border-dashed {
+    --tw-border-style: dashed;
+    border-style: dashed;
+  }
+  .komc\:border-dotted {
+    --tw-border-style: dotted;
+    border-style: dotted;
+  }
+  .komc\:border-none {
+    --tw-border-style: none;
+    border-style: none;
+  }
+  .komc\:border-solid {
+    --tw-border-style: solid;
+    border-style: solid;
+  }
+  .komc\:form-field\! {
+    border-color: var(--komc-color-neutral-300) !important;
+    --tw-shadow: var(--komc-shadow-field) !important;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
+    transition-property: all !important;
+    transition-timing-function: var(--tw-ease, var(--komc-default-transition-timing-function)) !important;
+    transition-duration: var(--tw-duration, var(--komc-default-transition-duration)) !important;
+    --tw-duration: 200ms !important;
+    transition-duration: 200ms !important;
+    --tw-ease: var(--komc-ease-in-out) !important;
+    transition-timing-function: var(--komc-ease-in-out) !important;
+    --tw-outline-style: none !important;
+    outline-style: none !important;
+    &:focus, &.komc-active {
+      border-color: var(--komc-color-blue-500) !important;
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, oklch(87% 0.065 274.039)) !important;
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
+    }
+    &.komc-error {
+      border-color: var(--komc-color-red-400) !important;
+    }
+    &.komc-error.komc-active {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, oklch(87% 0.065 274.039)) !important;
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
+      --tw-ring-color: var(--komc-color-red-200) !important;
+    }
+  }
+  .komc\:border-blue-500 {
+    border-color: var(--komc-color-blue-500);
+  }
+  .komc\:border-brand-blue-01 {
+    border-color: var(--komc-color-brand-blue-01);
+  }
+  .komc\:border-gray-200 {
+    border-color: var(--komc-color-gray-200);
+  }
+  .komc\:border-gray-500 {
+    border-color: var(--komc-color-gray-500);
+  }
+  .komc\:border-gray-600 {
+    border-color: var(--komc-color-gray-600);
+  }
+  .komc\:border-gray-700 {
+    border-color: var(--komc-color-gray-700);
+  }
+  .komc\:border-gray-800 {
+    border-color: var(--komc-color-gray-800);
+  }
+  .komc\:border-neutral-100 {
+    border-color: var(--komc-color-neutral-100);
+  }
+  .komc\:border-neutral-200 {
+    border-color: var(--komc-color-neutral-200);
+  }
+  .komc\:border-neutral-200\/60 {
+    border-color: var(--komc-color-neutral-200);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--komc-color-neutral-200) 60%, transparent);
+    }
+  }
+  .komc\:border-neutral-300 {
+    border-color: var(--komc-color-neutral-300);
+  }
+  .komc\:border-neutral-300\! {
+    border-color: var(--komc-color-neutral-300) !important;
+  }
+  .komc\:border-neutral-400 {
+    border-color: var(--komc-color-neutral-400);
+  }
+  .komc\:border-transparent {
+    border-color: transparent;
+  }
+  .komc\:border-white {
+    border-color: var(--komc-color-white);
+  }
+  .komc\:bg-\[\#FBFBFD\] {
+    background-color: #FBFBFD;
+  }
+  .komc\:bg-\[rgb\(95\,95\,96\)\] {
+    background-color: rgb(95,95,96);
+  }
+  .komc\:bg-black\/40 {
+    background-color: var(--komc-color-black);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--komc-color-black) 40%, transparent);
+    }
+  }
+  .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-100 {
+    background-color: var(--komc-color-blue-100);
+  }
+  .komc\:bg-blue-500 {
+    background-color: var(--komc-color-blue-500);
+  }
+  .komc\:bg-brand-blue-01 {
+    background-color: var(--komc-color-brand-blue-01);
+  }
+  .komc\:bg-gray-50 {
+    background-color: var(--komc-color-gray-50);
+  }
+  .komc\:bg-gray-50\! {
+    background-color: var(--komc-color-gray-50) !important;
+  }
+  .komc\:bg-gray-100 {
+    background-color: var(--komc-color-gray-100);
+  }
+  .komc\:bg-gray-200 {
+    background-color: var(--komc-color-gray-200);
+  }
+  .komc\:bg-gray-400 {
+    background-color: var(--komc-color-gray-400);
+  }
+  .komc\:bg-gray-500 {
+    background-color: var(--komc-color-gray-500);
+  }
+  .komc\:bg-green-50 {
+    background-color: var(--komc-color-green-50);
+  }
+  .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-100\! {
+    background-color: var(--komc-color-neutral-100) !important;
+  }
+  .komc\:bg-neutral-100\/95 {
+    background-color: var(--komc-color-neutral-100);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--komc-color-neutral-100) 95%, transparent);
+    }
+  }
+  .komc\:bg-night-700 {
+    background-color: var(--komc-color-night-700);
+  }
+  .komc\:bg-red-50 {
+    background-color: var(--komc-color-red-50);
+  }
+  .komc\:bg-transparent {
+    background-color: transparent;
+  }
+  .komc\:bg-white {
+    background-color: var(--komc-color-white);
+  }
+  .komc\:bg-white\/40 {
+    background-color: var(--komc-color-white);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--komc-color-white) 40%, transparent);
+    }
+  }
+  .komc\:bg-white\/60 {
+    background-color: var(--komc-color-white);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--komc-color-white) 60%, transparent);
+    }
+  }
+  .komc\:object-contain {
+    object-fit: contain;
+  }
+  .komc\:object-cover {
+    object-fit: cover;
+  }
+  .komc\:object-fill {
+    object-fit: fill;
+  }
+  .komc\:object-none {
+    object-fit: none;
+  }
+  .komc\:object-scale-down {
+    object-fit: scale-down;
+  }
+  .komc\:object-center {
+    object-position: center;
+  }
+  .komc\:p-0 {
+    padding: 0px;
+  }
+  .komc\:p-0\! {
+    padding: 0px !important;
+  }
+  .komc\:p-0\.5 {
+    padding: calc(var(--komc-spacing) * 0.5);
+  }
+  .komc\:p-1 {
+    padding: var(--komc-spacing);
+  }
+  .komc\:p-2 {
+    padding: calc(var(--komc-spacing) * 2);
+  }
+  .komc\:p-2\.5\! {
+    padding: calc(var(--komc-spacing) * 2.5) !important;
+  }
+  .komc\:p-3 {
+    padding: calc(var(--komc-spacing) * 3);
+  }
+  .komc\:p-4 {
+    padding: calc(var(--komc-spacing) * 4);
+  }
+  .komc\:p-6 {
+    padding: calc(var(--komc-spacing) * 6);
+  }
+  .komc\:p-8 {
+    padding: calc(var(--komc-spacing) * 8);
+  }
+  .komc\:p-10 {
+    padding: calc(var(--komc-spacing) * 10);
+  }
+  .komc\:px-0 {
+    padding-inline: 0px;
+  }
+  .komc\:px-0\.5 {
+    padding-inline: calc(var(--komc-spacing) * 0.5);
+  }
+  .komc\:px-1 {
+    padding-inline: var(--komc-spacing);
+  }
+  .komc\:px-1\.5 {
+    padding-inline: calc(var(--komc-spacing) * 1.5);
+  }
+  .komc\:px-2 {
+    padding-inline: calc(var(--komc-spacing) * 2);
+  }
+  .komc\:px-2\.5 {
+    padding-inline: calc(var(--komc-spacing) * 2.5);
+  }
+  .komc\:px-2\.5\! {
+    padding-inline: calc(var(--komc-spacing) * 2.5) !important;
+  }
+  .komc\:px-2\.25 {
+    padding-inline: calc(var(--komc-spacing) * 2.25);
+  }
+  .komc\:px-3 {
+    padding-inline: calc(var(--komc-spacing) * 3);
+  }
+  .komc\:px-4 {
+    padding-inline: calc(var(--komc-spacing) * 4);
+  }
+  .komc\:px-5 {
+    padding-inline: calc(var(--komc-spacing) * 5);
+  }
+  .komc\:px-6 {
+    padding-inline: calc(var(--komc-spacing) * 6);
+  }
+  .komc\:py-0 {
+    padding-block: 0px;
+  }
+  .komc\:py-0\! {
+    padding-block: 0px !important;
+  }
+  .komc\:py-1 {
+    padding-block: var(--komc-spacing);
+  }
+  .komc\:py-2 {
+    padding-block: calc(var(--komc-spacing) * 2);
+  }
+  .komc\:py-2\! {
+    padding-block: calc(var(--komc-spacing) * 2) !important;
+  }
+  .komc\:py-2\.5\! {
+    padding-block: calc(var(--komc-spacing) * 2.5) !important;
+  }
+  .komc\:py-2\.75\! {
+    padding-block: calc(var(--komc-spacing) * 2.75) !important;
+  }
+  .komc\:py-3 {
+    padding-block: calc(var(--komc-spacing) * 3);
+  }
+  .komc\:py-4 {
+    padding-block: calc(var(--komc-spacing) * 4);
+  }
+  .komc\:pt-4 {
+    padding-top: calc(var(--komc-spacing) * 4);
+  }
+  .komc\:pr-0\! {
+    padding-right: 0px !important;
+  }
+  .komc\:pr-1 {
+    padding-right: var(--komc-spacing);
+  }
+  .komc\:pr-2\.5 {
+    padding-right: calc(var(--komc-spacing) * 2.5);
+  }
+  .komc\:pr-4 {
+    padding-right: calc(var(--komc-spacing) * 4);
+  }
+  .komc\:pb-32 {
+    padding-bottom: calc(var(--komc-spacing) * 32);
+  }
+  .komc\:pl-0\! {
+    padding-left: 0px !important;
+  }
+  .komc\:pl-2\.5 {
+    padding-left: calc(var(--komc-spacing) * 2.5);
+  }
+  .komc\:pl-4 {
+    padding-left: calc(var(--komc-spacing) * 4);
+  }
+  .komc\:pl-4\! {
+    padding-left: calc(var(--komc-spacing) * 4) !important;
+  }
+  .komc\:text-center {
+    text-align: center;
+  }
+  .komc\:text-left {
+    text-align: left;
+  }
+  .komc\:text-right {
+    text-align: right;
+  }
+  .komc\:font-mono {
+    font-family: var(--komc-font-mono);
+  }
+  .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\:text-\[16px\] {
+    font-size: 16px;
+  }
+  .komc\:leading-5\.5 {
+    --tw-leading: calc(var(--komc-spacing) * 5.5);
+    line-height: calc(var(--komc-spacing) * 5.5);
+  }
+  .komc\:leading-\[1\.2\] {
+    --tw-leading: 1.2;
+    line-height: 1.2;
+  }
+  .komc\:leading-relaxed {
+    --tw-leading: var(--komc-leading-relaxed);
+    line-height: var(--komc-leading-relaxed);
+  }
+  .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;
+  }
+  .komc\:whitespace-nowrap {
+    white-space: nowrap;
+  }
+  .komc\:whitespace-pre {
+    white-space: pre;
+  }
+  .komc\:text-\[\#1890FF\] {
+    color: #1890FF;
+  }
+  .komc\:text-black {
+    color: var(--komc-color-black);
+  }
+  .komc\:text-blue-500 {
+    color: var(--komc-color-blue-500);
+  }
+  .komc\:text-blue-700 {
+    color: var(--komc-color-blue-700);
+  }
+  .komc\:text-brand-black-01\! {
+    color: var(--komc-color-brand-black-01) !important;
+  }
+  .komc\:text-gray-800 {
+    color: var(--komc-color-gray-800);
+  }
+  .komc\:text-gray-900 {
+    color: var(--komc-color-gray-900);
+  }
+  .komc\:text-neutral-200 {
+    color: var(--komc-color-neutral-200);
+  }
+  .komc\:text-neutral-300 {
+    color: var(--komc-color-neutral-300);
+  }
+  .komc\:text-neutral-500 {
+    color: var(--komc-color-neutral-500);
+  }
+  .komc\:text-neutral-600 {
+    color: var(--komc-color-neutral-600);
+  }
+  .komc\:text-neutral-700 {
+    color: var(--komc-color-neutral-700);
+  }
+  .komc\:text-neutral-800 {
+    color: var(--komc-color-neutral-800);
+  }
+  .komc\:text-neutral-900 {
+    color: var(--komc-color-neutral-900);
+  }
+  .komc\:text-orange-500 {
+    color: var(--komc-color-orange-500);
+  }
+  .komc\:text-red-500 {
+    color: var(--komc-color-red-500);
+  }
+  .komc\:text-red-600 {
+    color: var(--komc-color-red-600);
+  }
+  .komc\:text-white {
+    color: var(--komc-color-white);
+  }
+  .komc\:text-yellow-500 {
+    color: var(--komc-color-yellow-500);
+  }
+  .komc\:opacity-0 {
+    opacity: 0%;
+  }
+  .komc\:opacity-20 {
+    opacity: 20%;
+  }
+  .komc\:opacity-50 {
+    opacity: 50%;
+  }
+  .komc\:opacity-70 {
+    opacity: 70%;
+  }
+  .komc\:opacity-100 {
+    opacity: 100%;
+  }
+  .komc\:shadow {
+    --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\:shadow-2xl {
+    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
+    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-field {
+    --tw-shadow: var(--komc-shadow-field);
+    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-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\:shadow-xl {
+    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px 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-xs {
+    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .komc\:ring-0\! {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, oklch(87% 0.065 274.039)) !important;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
+  }
+  .komc\:outline-0 {
+    outline-style: var(--tw-outline-style);
+    outline-width: 0px;
+  }
+  .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));
+    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,);
+  }
+  .komc\:drop-shadow-\[0px_0\.5px_3px_rgba\(0\,0\,0\,0\.2\)\] {
+    --tw-drop-shadow-size: drop-shadow(0px 0.5px 3px var(--tw-drop-shadow-color, rgba(0,0,0,0.2)));
+    --tw-drop-shadow: var(--tw-drop-shadow-size);
+    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,);
+  }
+  .komc\:drop-shadow-lg {
+    --tw-drop-shadow-size: drop-shadow(0 4px 4px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.15)));
+    --tw-drop-shadow: drop-shadow(var(--komc-drop-shadow-lg));
+    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,);
+  }
+  .komc\:drop-shadow-md {
+    --tw-drop-shadow-size: drop-shadow(0 3px 3px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.12)));
+    --tw-drop-shadow: drop-shadow(var(--komc-drop-shadow-md));
+    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,);
+  }
+  .komc\:drop-shadow-sm {
+    --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.15)));
+    --tw-drop-shadow: drop-shadow(var(--komc-drop-shadow-sm));
+    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,);
+  }
+  .komc\:drop-shadow-xl {
+    --tw-drop-shadow-size: drop-shadow(0 9px 7px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.1)));
+    --tw-drop-shadow: drop-shadow(var(--komc-drop-shadow-xl));
+    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,);
+  }
+  .komc\:backdrop-blur-sm {
+    --tw-backdrop-blur: blur(var(--komc-blur-sm));
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
+  .komc\: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, content-visibility, overlay, pointer-events;
+    transition-timing-function: var(--tw-ease, var(--komc-default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--komc-default-transition-duration));
+  }
+  .komc\:transition-all {
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--komc-default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--komc-default-transition-duration));
+  }
+  .komc\:transition-colors {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+    transition-timing-function: var(--tw-ease, var(--komc-default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--komc-default-transition-duration));
+  }
+  .komc\:transition-opacity {
+    transition-property: opacity;
+    transition-timing-function: var(--tw-ease, var(--komc-default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--komc-default-transition-duration));
+  }
+  .komc\:transition-transform {
+    transition-property: transform, translate, scale, rotate;
+    transition-timing-function: var(--tw-ease, var(--komc-default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--komc-default-transition-duration));
+  }
+  .komc\:duration-200 {
+    --tw-duration: 200ms;
+    transition-duration: 200ms;
+  }
+  .komc\:duration-300 {
+    --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\:select-none {
+    -webkit-user-select: none;
+    user-select: none;
+  }
+  @media (hover: hover) {
+    .komc\:group-hover\:opacity-20:is(:where(.komc\:group):hover *) {
+      opacity: 20%;
+    }
+    .komc\:group-hover\:opacity-100:is(:where(.komc\:group):hover *) {
+      opacity: 100%;
+    }
+    .komc\:group-hover\/item\:opacity-100:is(:where(.komc\:group\/item):hover *) {
+      opacity: 100%;
+    }
+    .komc\:group-hover\/resize\:bg-blue-500\/50:is(:where(.komc\:group\/resize):hover *) {
+      background-color: var(--komc-color-blue-500);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .komc\:group-hover\/resize\:bg-blue-500\/50:is(:where(.komc\:group\/resize):hover *) {
+        background-color: color-mix(in oklab, var(--komc-color-blue-500) 50%, transparent);
+      }
+    }
+  }
+  .komc\:placeholder\:leading-\[1\.2\]::placeholder {
+    --tw-leading: 1.2;
+    line-height: 1.2;
+  }
+  .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: 0px;
+  }
+  .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\:focus-within\:form-field:focus-within {
+    border-color: var(--komc-color-neutral-300);
+    --tw-shadow: var(--komc-shadow-field);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--komc-default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--komc-default-transition-duration));
+    --tw-duration: 200ms;
+    transition-duration: 200ms;
+    --tw-ease: var(--komc-ease-in-out);
+    transition-timing-function: var(--komc-ease-in-out);
+    --tw-outline-style: none;
+    outline-style: none;
+    &:focus, &.komc-active {
+      border-color: var(--komc-color-blue-500);
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, oklch(87% 0.065 274.039));
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+    &.komc-error {
+      border-color: var(--komc-color-red-400);
+    }
+    &.komc-error.komc-active {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, oklch(87% 0.065 274.039));
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      --tw-ring-color: var(--komc-color-red-200);
+    }
+  }
+  .komc\:focus-within\:border-blue-500:focus-within {
+    border-color: var(--komc-color-blue-500);
+  }
+  .komc\:focus-within\:opacity-100:focus-within {
+    opacity: 100%;
+  }
+  .komc\:focus-within\:ring-4:focus-within {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, oklch(87% 0.065 274.039));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .komc\:focus-within\:ring-indigo-200:focus-within {
+    --tw-ring-color: var(--komc-color-indigo-200);
+  }
+  @media (hover: hover) {
+    .komc\:hover\:border-transparent:hover {
+      border-color: transparent;
+    }
+    .komc\:hover\:bg-\[rgb\(76\,76\,77\)\]:hover {
+      background-color: rgb(76,76,77);
+    }
+    .komc\:hover\:bg-\[rgb\(199\,199\,199\)\]:hover {
+      background-color: rgb(199,199,199);
+    }
+    .komc\:hover\:bg-blue-500:hover {
+      background-color: var(--komc-color-blue-500);
+    }
+    .komc\:hover\:bg-blue-600:hover {
+      background-color: var(--komc-color-blue-600);
+    }
+    .komc\:hover\:bg-gray-100:hover {
+      background-color: var(--komc-color-gray-100);
+    }
+    .komc\:hover\:bg-gray-200:hover {
+      background-color: var(--komc-color-gray-200);
+    }
+    .komc\:hover\:bg-gray-500:hover {
+      background-color: var(--komc-color-gray-500);
+    }
+    .komc\:hover\:bg-indigo-700:hover {
+      background-color: var(--komc-color-indigo-700);
+    }
+    .komc\:hover\:bg-neutral-50:hover {
+      background-color: var(--komc-color-neutral-50);
+    }
+    .komc\:hover\:bg-neutral-100:hover {
+      background-color: var(--komc-color-neutral-100);
+    }
+    .komc\:hover\:bg-neutral-200:hover {
+      background-color: var(--komc-color-neutral-200);
+    }
+    .komc\:hover\:bg-night-700:hover {
+      background-color: var(--komc-color-night-700);
+    }
+    .komc\:hover\:bg-night-800:hover {
+      background-color: var(--komc-color-night-800);
+    }
+    .komc\:hover\:bg-sky-950:hover {
+      background-color: var(--komc-color-sky-950);
+    }
+    .komc\:hover\:bg-transparent:hover {
+      background-color: transparent;
+    }
+    .komc\:hover\:text-\[\#1890FF\]:hover {
+      color: #1890FF;
+    }
+    .komc\:hover\:text-black:hover {
+      color: var(--komc-color-black);
+    }
+    .komc\:hover\:text-gray-800:hover {
+      color: var(--komc-color-gray-800);
+    }
+    .komc\:hover\:text-white:hover {
+      color: var(--komc-color-white);
+    }
+    .komc\:hover\:underline:hover {
+      text-decoration-line: underline;
+    }
+  }
+  .komc\:focus\:form-field:focus {
+    border-color: var(--komc-color-neutral-300);
+    --tw-shadow: var(--komc-shadow-field);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--komc-default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--komc-default-transition-duration));
+    --tw-duration: 200ms;
+    transition-duration: 200ms;
+    --tw-ease: var(--komc-ease-in-out);
+    transition-timing-function: var(--komc-ease-in-out);
+    --tw-outline-style: none;
+    outline-style: none;
+    &:focus, &.komc-active {
+      border-color: var(--komc-color-blue-500);
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, oklch(87% 0.065 274.039));
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+    &.komc-error {
+      border-color: var(--komc-color-red-400);
+    }
+    &.komc-error.komc-active {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, oklch(87% 0.065 274.039));
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      --tw-ring-color: var(--komc-color-red-200);
+    }
+  }
+  .komc\:focus-visible\:opacity-100:focus-visible {
+    opacity: 100%;
+  }
+  .komc\:active\:border-transparent:active {
+    border-color: transparent;
+  }
+  .komc\:active\:bg-\[rgb\(76\,76\,77\)\]:active {
+    background-color: rgb(76,76,77);
+  }
+  .komc\:active\:bg-\[rgb\(199\,199\,199\)\]:active {
+    background-color: rgb(199,199,199);
+  }
+  .komc\:active\:bg-blue-500:active {
+    background-color: var(--komc-color-blue-500);
+  }
+  .komc\:active\:bg-gray-200:active {
+    background-color: var(--komc-color-gray-200);
+  }
+  .komc\:active\:bg-indigo-700:active {
+    background-color: var(--komc-color-indigo-700);
+  }
+  .komc\:active\:bg-night-700:active {
+    background-color: var(--komc-color-night-700);
+  }
+  .komc\:active\:bg-night-800:active {
+    background-color: var(--komc-color-night-800);
+  }
+  .komc\:active\:bg-sky-950:active {
+    background-color: var(--komc-color-sky-950);
+  }
+  .komc\:active\:bg-transparent:active {
+    background-color: transparent;
+  }
+  .komc\:active\:text-\[\#1890FF\]:active {
+    color: #1890FF;
+  }
+  .komc\:active\:text-black:active {
+    color: var(--komc-color-black);
+  }
+  .komc\:active\:text-gray-800:active {
+    color: var(--komc-color-gray-800);
+  }
+  .komc\:active\:text-white:active {
+    color: var(--komc-color-white);
+  }
+  .komc\:active\:underline:active {
+    text-decoration-line: underline;
+  }
+  .komc\:disabled\:pointer-events-none:disabled {
+    pointer-events: none;
+  }
+  .komc\:disabled\:hidden:disabled {
+    display: none;
+  }
+  .komc\:disabled\:cursor-default:disabled {
+    cursor: default;
+  }
+  .komc\:disabled\:border-gray-500:disabled {
+    border-color: var(--komc-color-gray-500);
+  }
+  .komc\:disabled\:border-transparent:disabled {
+    border-color: transparent;
+  }
+  .komc\:disabled\:border-white:disabled {
+    border-color: var(--komc-color-white);
+  }
+  .komc\:disabled\:bg-gray-50:disabled {
+    background-color: var(--komc-color-gray-50);
+  }
+  .komc\:disabled\:bg-gray-700:disabled {
+    background-color: var(--komc-color-gray-700);
+  }
+  .komc\:disabled\:bg-transparent:disabled {
+    background-color: transparent;
+  }
+  .komc\:disabled\:bg-white:disabled {
+    background-color: var(--komc-color-white);
+  }
+  .komc\:disabled\:text-gray-500:disabled {
+    color: var(--komc-color-gray-500);
+  }
+  .komc\:disabled\:text-gray-800:disabled {
+    color: var(--komc-color-gray-800);
+  }
+  .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\]\:translate-x-0[data-state="open"] {
+    --tw-translate-x: 0px;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .komc\:data-\[state\=open\]\:translate-y-0[data-state="open"] {
+    --tw-translate-y: 0px;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .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%;
+  }
+  @media (width >= 40rem) {
+    .komc\:sm\:grid-cols-3 {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
+  @media (width >= 48rem) {
+    .komc\:md\:grid-cols-4 {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+  }
+  @media (width >= 64rem) {
+    .komc\:lg\:grid-cols-5 {
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+  }
+  @container (width >= 48rem) {
+    .komc\:\@3xl\:grid-cols-4 {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+  }
+  .komc\:\[\&_div\]\:h-1\.5 div {
+    height: calc(var(--komc-spacing) * 1.5);
+  }
+  .komc\:\[\&_div\]\:h-full div {
+    height: 100%;
+  }
+  .komc\:\[\&_div\]\:w-1\.5 div {
+    width: calc(var(--komc-spacing) * 1.5);
+  }
+  .komc\:\[\&_div\]\:w-full div {
+    width: 100%;
+  }
+  .komc\:\[\&_img\]\:object-contain img {
+    object-fit: contain;
+  }
+  .komc\:\[\&_img\]\:object-cover img {
+    object-fit: cover;
+  }
+  .komc\:\[\&_img\]\:object-fill img {
+    object-fit: fill;
+  }
+  .komc\:\[\&_img\]\:object-none img {
+    object-fit: none;
+  }
+  .komc\:\[\&_img\]\:object-scale-down img {
+    object-fit: scale-down;
+  }
+  .komc\:\[\&_span\]\:translate-x-0\.5 span {
+    --tw-translate-x: calc(var(--komc-spacing) * 0.5);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .komc\:\[\&_span\]\:translate-x-4\.5 span {
+    --tw-translate-x: calc(var(--komc-spacing) * 4.5);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .komc\:\[\&_svg\]\:h-3\.5 svg {
+    height: calc(var(--komc-spacing) * 3.5);
+  }
+  .komc\:\[\&_svg\]\:h-4 svg {
+    height: calc(var(--komc-spacing) * 4);
+  }
+  .komc\:\[\&_svg\]\:w-3\.5 svg {
+    width: calc(var(--komc-spacing) * 3.5);
+  }
+  .komc\:\[\&_svg\]\:w-4 svg {
+    width: calc(var(--komc-spacing) * 4);
+  }
+  .komc\:\[\&_svg\]\:w-5 svg {
+    width: calc(var(--komc-spacing) * 5);
+  }
+  .komc\:\[\&_svg\]\:text-neutral-500 svg {
+    color: var(--komc-color-neutral-500);
+  }
+  .komc\:\[\&_svg\]\:text-red-500 svg {
+    color: var(--komc-color-red-500);
+  }
+  .komc\:\[\&_svg\]\:transition-colors svg {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+    transition-timing-function: var(--tw-ease, var(--komc-default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--komc-default-transition-duration));
+  }
+  .komc\:\[\&_svg\]\:duration-200 svg {
+    --tw-duration: 200ms;
+    transition-duration: 200ms;
+  }
+  .komc\:\[\&\:\:-webkit-inner-spin-button\]\:appearance-none::-webkit-inner-spin-button {
+    appearance: none;
+  }
+  .komc\:\[\&\:\:-webkit-outer-spin-button\]\:appearance-none::-webkit-outer-spin-button {
+    appearance: none;
+  }
+  .komc\:\[\&\>button\]\:absolute > button {
+    position: absolute;
+  }
+  .komc\:\[\&\>button\]\:top-10 > button {
+    top: calc(var(--komc-spacing) * 10);
+  }
+  .komc\:\[\&\>button\]\:right-6 > button {
+    right: calc(var(--komc-spacing) * 6);
+  }
+  .komc\:\[\&\>button\]\:bg-blue-500 > button {
+    background-color: var(--komc-color-blue-500);
+  }
+  .komc\:\[\&\>button\]\:bg-gray-300 > button {
+    background-color: var(--komc-color-gray-300);
+  }
+  .komc\:\[\&\>button\>span\:first-child\]\:after\:ml-1 > button > span:first-child::after {
+    content: var(--tw-content);
+    margin-left: var(--komc-spacing);
+  }
+  .komc\:\[\&\>button\>span\:first-child\]\:after\:text-red-500 > button > span:first-child::after {
+    content: var(--tw-content);
+    color: var(--komc-color-red-500);
+  }
+  .komc\:\[\&\>button\>span\:first-child\]\:after\:content-\[\"\*\"\] > button > span:first-child::after {
+    --tw-content: "*";
+    content: var(--tw-content);
+  }
+  .komc\:\[\&\>div\>svg\]\:text-blue-500 > div > svg {
+    color: var(--komc-color-blue-500);
+  }
+  .komc\:\[\&\>div\>svg\]\:text-green-500 > div > svg {
+    color: var(--komc-color-green-500);
+  }
+  .komc\:\[\&\>div\>svg\]\:text-red-500 > div > svg {
+    color: var(--komc-color-red-500);
+  }
+  .komc\:\[\&\>input\]\:h-full > input {
+    height: 100%;
+  }
+  .komc\:\[\&\>input\]\:w-full > input {
+    width: 100%;
+  }
+  .komc\:\[\&\>input\]\:px-2\.5 > input {
+    padding-inline: calc(var(--komc-spacing) * 2.5);
+  }
+  .komc\:\[\&\>input\]\:px-4 > input {
+    padding-inline: calc(var(--komc-spacing) * 4);
+  }
+  .komc\:\[\&\>input\]\:outline-none > input {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+  .komc\:\[\&\>input\]\:focus\:ring-0 > input:focus {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, oklch(87% 0.065 274.039));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .komc\:\[\&\>input\]\:focus\:ring-offset-0 > input:focus {
+    --tw-ring-offset-width: 0px;
+    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  }
+  .komc\:\[\&\>label\>span\:first-child\]\:after\:ml-1 > label > span:first-child::after {
+    content: var(--tw-content);
+    margin-left: var(--komc-spacing);
+  }
+  .komc\:\[\&\>label\>span\:first-child\]\:after\:text-red-500 > label > span:first-child::after {
+    content: var(--tw-content);
+    color: var(--komc-color-red-500);
+  }
+  .komc\:\[\&\>label\>span\:first-child\]\:after\:content-\[\"\*\"\] > label > span:first-child::after {
+    --tw-content: "*";
+    content: var(--tw-content);
+  }
+}
+@layer base {
+  [data-komc] {
+    --komc-shadow-aside: 0 0 4px 0 rgba(0, 0, 0, 0.25);
+    --komc-shadow-card: 0 0 4px 0 rgba(0, 0, 0, 0.2);
+    --komc-shadow-field: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
+    --komc-color-brand-black-01: #202224;
+    --komc-color-brand-blue-01: #2a5dbd;
+    --komc-color-brand-red-01: #ff4638;
+    --komc-color-gray-50: #fafafa;
+    --komc-color-gray-100: #f8f8f9;
+    --komc-color-gray-200: #f5f5f5;
+    --komc-color-gray-300: #f1f3f5;
+    --komc-color-gray-400: #eeeeee;
+    --komc-color-gray-500: #e5e5e5;
+    --komc-color-gray-600: #dddddd;
+    --komc-color-gray-700: #cccccc;
+    --komc-color-gray-800: #808080;
+    --komc-color-gray-900: #606060;
+    --komc-color-gray-950: #404040;
+    --komc-color-sky-50: #f6fafe;
+    --komc-color-sky-100: #d2e7f8;
+    --komc-color-sky-200: #bcdaf5;
+    --komc-color-sky-300: #8ffcee;
+    --komc-color-sky-400: #63aae8;
+    --komc-color-sky-500: #3892e2;
+    --komc-color-sky-600: #2078c8;
+    --komc-color-sky-700: #195d9c;
+    --komc-color-sky-800: #0f4c81;
+    --komc-color-sky-900: #0e3559;
+    --komc-color-sky-950: #061b2c;
+    --komc-color-neutral-50: #f2f2f3;
+    --komc-color-neutral-100: #e5e5e6;
+    --komc-color-neutral-200: #cacacd;
+    --komc-color-neutral-300: #b0b0b4;
+    --komc-color-neutral-400: #96969c;
+    --komc-color-neutral-500: #7c7c83;
+    --komc-color-neutral-600: #636369;
+    --komc-color-neutral-700: #4a4a4e;
+    --komc-color-neutral-800: #313134;
+    --komc-color-neutral-900: #1d1d1f;
+    --komc-color-neutral-950: #000000;
+    --komc-color-night-50: #f7f9fd;
+    --komc-color-night-100: #eaf0fa;
+    --komc-color-night-200: #d6e1f5;
+    --komc-color-night-300: #c1d1ef;
+    --komc-color-night-400: #97b3e5;
+    --komc-color-night-500: #6e94da;
+    --komc-color-night-600: #4576d0;
+    --komc-color-night-700: #2a5dbd;
+    --komc-color-night-800: #22488e;
+    --komc-color-night-900: #183366;
+    --komc-color-night-950: #0f1f3d;
+    --komc-color-forest-50: #f5fffc;
+    --komc-color-forest-100: #e6fff7;
+    --komc-color-forest-200: #b5fee8;
+    --komc-color-forest-300: #86fed9;
+    --komc-color-forest-400: #47ffc4;
+    --komc-color-forest-500: #2ae4a2;
+    --komc-color-forest-600: #24cb90;
+    --komc-color-forest-700: #1eb27e;
+    --komc-color-forest-800: #137f5a;
+    --komc-color-forest-900: #074c36;
+    --komc-color-forest-950: #033324;
+    --komc-color-green-500: #10b981;
+    --komc-color-green-600: #059669;
+    --komc-color-blue-01: #fbfbfd;
+    --komc-color-blue-50: #f5f7fe;
+    --komc-color-blue-100: #e6ebfe;
+    --komc-color-blue-200: #ccd7fc;
+    --komc-color-blue-300: #b3c3fb;
+    --komc-color-blue-400: #809bf9;
+    --komc-color-blue-500: #4770ff;
+    --komc-color-blue-600: #1c4bf7;
+    --komc-color-blue-700: #0331de;
+    --komc-color-blue-800: #0226ad;
+    --komc-color-blue-900: #011b7b;
+    --komc-color-blue-950: #01104a;
+  }
+  [data-komc], [data-komc] :is(*, ::after, ::before, ::backdrop, ::file-selector-button) {
+    border-color: var(--komc-color-gray-200, currentcolor);
+  }
+  [data-komc] button {
+    cursor: pointer;
+  }
+}
+@layer utilities {
+  [data-komc] .prose {
+    color: var(--komc-color-neutral-900);
+  }
+  [data-komc] .komc-no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+  [data-komc] .komc-no-scrollbar {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+}
+@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-space-y-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@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%;
+}
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false;
+}
+@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-duration {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ease {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-leading {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-blur {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-brightness {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-contrast {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-grayscale {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-hue-rotate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-invert {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-opacity {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-saturate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-sepia {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-drop-shadow-size {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-blur {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-brightness {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-contrast {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-grayscale {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-hue-rotate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-invert {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-opacity {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-saturate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-sepia {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-content {
+  syntax: "*";
+  initial-value: "";
+  inherits: false;
+}
+@property --tw-scale-x {
+  syntax: "*";
+  inherits: false;
+  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% {
+    opacity: 0.5;
+  }
+}
+@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-space-y-reverse: 0;
+      --tw-border-style: solid;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-duration: initial;
+      --tw-ease: initial;
+      --tw-leading: initial;
+      --tw-font-weight: initial;
+      --tw-outline-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-backdrop-blur: initial;
+      --tw-backdrop-brightness: initial;
+      --tw-backdrop-contrast: initial;
+      --tw-backdrop-grayscale: initial;
+      --tw-backdrop-hue-rotate: initial;
+      --tw-backdrop-invert: initial;
+      --tw-backdrop-opacity: initial;
+      --tw-backdrop-saturate: initial;
+      --tw-backdrop-sepia: initial;
+      --tw-content: "";
+      --tw-scale-x: 1;
+      --tw-scale-y: 1;
+      --tw-scale-z: 1;
+    }
+  }
+}