From 1d465d958bce73320a9ab7854ff28fcbc0b605a4 Mon Sep 17 00:00:00 2001
From: Karl Kallavus <232199+karl-kallavus@users.noreply.github.com>
Date: Tue, 17 Oct 2023 12:23:33 +0200
Subject: [PATCH 1/7] feat(new-docs): basic navigation (#2439)

* feat(new-docs): basic navigation

* quick nav
---
 docs/app/components/server/accordion/page.tsx |  9 ++
 docs/app/components/shared/ExampleSection.tsx |  2 +-
 docs/app/components/types.ts                  | 84 ++++++++++---------
 docs/app/page.tsx                             | 41 +++++----
 docs/package.json                             |  2 +-
 package.json                                  |  3 +-
 pnpm-lock.yaml                                | 70 ++++++++--------
 7 files changed, 118 insertions(+), 93 deletions(-)

diff --git a/docs/app/components/server/accordion/page.tsx b/docs/app/components/server/accordion/page.tsx
index 1153e653a8..7a565fbf94 100644
--- a/docs/app/components/server/accordion/page.tsx
+++ b/docs/app/components/server/accordion/page.tsx
@@ -6,12 +6,21 @@ import ExampleSection from '@/app/components/shared/ExampleSection';
 import { getExamples } from '@/app/utils/getExamples';
 import { MDX } from '@/components/MDX';
 
+function QuickNav({ items }: {items: string[]}) {
+  return <ul>
+    {items.map(item => <li key={item}><a href={`#${item}`}>{item}</a></li>)}
+  </ul>
+}
+
 export default async function Home() {
   const { server } = await getExamples();
+  const examplesList = Object.keys(server.accordion.examples);
+
   return (
     <div className="max-w-7xl flex flex-col gap-4 text-moon-14">
       <h1 className="font-medium text-moon-32">Accordion</h1>
       <MDX markdown={server.accordion.description} />
+      <QuickNav items={examplesList}/>
       <ExampleSection
         title="Default"
         component={<Default />}
diff --git a/docs/app/components/shared/ExampleSection.tsx b/docs/app/components/shared/ExampleSection.tsx
index 6dd6842360..937f41ac13 100644
--- a/docs/app/components/shared/ExampleSection.tsx
+++ b/docs/app/components/shared/ExampleSection.tsx
@@ -9,7 +9,7 @@ type Props = {
 
 const ExampleSection = async ({ title, component, code }: Props) => (
   <div className="space-y-2">
-    <h2 className="text-moon-24 font-medium">{title}</h2>
+    <h2 id={title} className="text-moon-24 font-medium">{title}</h2>
     <ComponentPreview component={component} />
     <CodePreview code={code} />
   </div>
diff --git a/docs/app/components/types.ts b/docs/app/components/types.ts
index 78b6b6f4ae..057efe37da 100644
--- a/docs/app/components/types.ts
+++ b/docs/app/components/types.ts
@@ -1,40 +1,46 @@
 export interface Examples {
-  client: {
-    accordion: {
-      description: 'string';
-      examples: {
-        Default: 'string';
-      };
-    };
-    button: {
-      description: 'string';
-      examples: {
-        Default: 'string';
-      };
-    };
-  };
-  server: {
-    accordion: {
-      description: 'string';
-      examples: {
-        Default: 'string';
-        Disabled: 'string';
-        Sizes: 'string';
-        ContentOutsideSizes: 'string';
-      };
-    };
-    avatar: {
-      description: 'string';
-      examples: {
-        Active: 'string';
-        Default: 'string';
-      };
-    };
-    tag: {
-      description: 'string';
-      examples: {
-        Default: 'string';
-      };
-    };
-  };
-}
+  "client": {
+    "accordion": {
+      "description": "string",
+      "examples": {
+        "Default": "string"
+      }
+    },
+    "button": {
+      "description": "string",
+      "examples": {
+        "Default": "string"
+      }
+    }
+  },
+  "server": {
+    "accordion": {
+      "description": "string",
+      "examples": {
+        "ContentOutsideSizes": "string",
+        "Default": "string",
+        "Disabled": "string",
+        "Sizes": "string"
+      }
+    },
+    "avatar": {
+      "description": "string",
+      "examples": {
+        "Active": "string",
+        "Default": "string"
+      }
+    },
+    "tag": {
+      "description": "string",
+      "examples": {
+        "Default": "string"
+      }
+    }
+  },
+  "shared": {
+    "fonts": {
+      "DMSans-Regular": "string",
+      "DMSans-Semibold": "string"
+    }
+  }
+};
diff --git a/docs/app/page.tsx b/docs/app/page.tsx
index 62b0fa044f..de2b125ef9 100644
--- a/docs/app/page.tsx
+++ b/docs/app/page.tsx
@@ -1,23 +1,34 @@
+import Link from 'next/link'
 import { getExamples } from "./utils/getExamples";
-import { MDX } from "@/components/MDX";
-import { CommandMenu } from "@/components/Search";
 
 export default async function Home() {
-  const examples = await getExamples();
-
-  const items = [
-    { label: "Aurum" },
-    { label: "Argentum" },
-    { label: "Zink" },
-    { label: "Plumbum" },
-    { label: "Test" }
-  ];
+  const { server, client } = await getExamples();
 
   return (
-    <div className="">
-      Moon Design System
-      <CommandMenu items={items} />
-      <MDX markdown={examples.client.button.description} />
+    <div className="flex flex-col gap-4">
+      <h1 className="text-4xl font-bold tracking-tight">Moon Design System</h1>
+
+      <div>
+        <h2 className="text-2xl font-bold tracking-tight">Server components</h2>
+        <ul role="list" className="">
+          {Object.entries(server).map(([key, _value]) => (
+            <li key={key} className="py-4">
+              <Link href={`components/server/${key}`}>{key}</Link>
+            </li>
+          ))}
+        </ul>
+      </div>
+
+      <div>
+        <h2 className="text-2xl font-bold tracking-tight">Client components</h2>
+        <ul role="list" className="">
+          {Object.entries(client).map(([key, _value]) => (
+            <li key={key} className="py-4">
+              <Link href={`components/client/${key}`}>{key}</Link>
+            </li>
+          ))}
+        </ul>
+      </div>
     </div>
   )
 }
diff --git a/docs/package.json b/docs/package.json
index 44b0ba0de5..9ae89d4bf0 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -14,8 +14,8 @@
     "@heathmont/moon-base-tw": "workspace:^10.10.1",
     "@heathmont/moon-cmdk-tw": "workspace:^10.10.1",
     "@heathmont/moon-core-tw": "workspace:^10.10.1",
-    "@heathmont/moon-themes-tw": "workspace:^10.10.1",
     "@heathmont/moon-icons-tw": "9.28.6",
+    "@heathmont/moon-themes-tw": "workspace:^10.10.1",
     "@types/node": "20.4.9",
     "@types/react": "18.2.19",
     "@types/react-dom": "18.2.7",
diff --git a/package.json b/package.json
index 725b4a5ce9..77edd6d861 100644
--- a/package.json
+++ b/package.json
@@ -129,6 +129,7 @@
     }
   },
   "dependencies": {
-    "@tanstack/react-table": "8.9.3"
+    "@tanstack/react-table": "8.9.3",
+    "ts-node": "^10.9.1"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8c3d204b8c..4454f70883 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -35,6 +35,9 @@ importers:
       '@tanstack/react-table':
         specifier: 8.9.3
         version: 8.9.3(react-dom@18.2.0)(react@18.2.0)
+      ts-node:
+        specifier: ^10.9.1
+        version: 10.9.1(@types/node@20.4.9)(typescript@5.1.6)
     devDependencies:
       '@babel/cli':
         specifier: 7.22.10
@@ -125,7 +128,7 @@ importers:
         version: 3.1.0
       jest:
         specifier: 28.1.3
-        version: 28.1.3
+        version: 28.1.3(@types/node@20.4.9)(ts-node@10.9.1)
       jest-styled-components:
         specifier: 7.1.1
         version: 7.1.1(styled-components@5.3.11)
@@ -158,7 +161,7 @@ importers:
         version: 5.1.6
       typescript-plugin-css-modules:
         specifier: 5.0.1
-        version: 5.0.1(typescript@5.1.6)
+        version: 5.0.1(ts-node@10.9.1)(typescript@5.1.6)
 
   docs:
     dependencies:
@@ -326,7 +329,7 @@ importers:
         version: 3.0.0
       jest:
         specifier: 27.5.1
-        version: 27.5.1
+        version: 27.5.1(ts-node@10.9.1)
       jest-environment-jsdom:
         specifier: 27.5.1
         version: 27.5.1
@@ -673,7 +676,7 @@ importers:
         version: 18.2.0
       react-dnd:
         specifier: 14.0.3
-        version: 14.0.3(@types/react@18.2.19)(react@18.2.0)
+        version: 14.0.3(@types/node@20.4.9)(@types/react@18.2.19)(react@18.2.0)
       react-dnd-html5-backend:
         specifier: 14.0.1
         version: 14.0.1
@@ -2773,7 +2776,6 @@ packages:
     engines: {node: '>=12'}
     dependencies:
       '@jridgewell/trace-mapping': 0.3.9
-    dev: false
 
   /@emotion/babel-plugin@11.10.6:
     resolution: {integrity: sha512-p2dAqtVrkhSa7xz1u/m9eHYdLi+en8NowrmXeF/dKtJpU8lCWli8RUAati7NcSl0afsBott48pdnANuD0wh9QQ==}
@@ -3056,7 +3058,7 @@ packages:
       slash: 3.0.0
     dev: true
 
-  /@jest/core@27.5.1:
+  /@jest/core@27.5.1(ts-node@10.9.1):
     resolution: {integrity: sha512-AK6/UTrvQD0Cd24NSqmIA6rKsu0tKIxfiCducZvqxYdmMisOYAsdItspT+fQDQYARPf8XgjAFZi0ogW2agH5nQ==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     peerDependencies:
@@ -3077,7 +3079,7 @@ packages:
       exit: 0.1.2
       graceful-fs: 4.2.11
       jest-changed-files: 27.5.1
-      jest-config: 27.5.1
+      jest-config: 27.5.1(ts-node@10.9.1)
       jest-haste-map: 27.5.1
       jest-message-util: 27.5.1
       jest-regex-util: 27.5.1
@@ -3100,7 +3102,7 @@ packages:
       - ts-node
       - utf-8-validate
 
-  /@jest/core@28.1.3:
+  /@jest/core@28.1.3(ts-node@10.9.1):
     resolution: {integrity: sha512-CIKBrlaKOzA7YG19BEqCw3SLIsEwjZkeJzf5bdooVnW4bH5cktqe3JX+G2YV1aK5vP8N9na1IGWFzYaTp6k6NA==}
     engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
     peerDependencies:
@@ -3121,7 +3123,7 @@ packages:
       exit: 0.1.2
       graceful-fs: 4.2.11
       jest-changed-files: 28.1.3
-      jest-config: 28.1.3(@types/node@20.4.9)
+      jest-config: 28.1.3(@types/node@20.4.9)(ts-node@10.9.1)
       jest-haste-map: 28.1.3
       jest-message-util: 28.1.3
       jest-regex-util: 28.0.2
@@ -3506,7 +3508,6 @@ packages:
     dependencies:
       '@jridgewell/resolve-uri': 3.1.0
       '@jridgewell/sourcemap-codec': 1.4.15
-    dev: false
 
   /@manypkg/find-root@1.1.0:
     resolution: {integrity: sha512-mki5uBvhHzO8kYYix/WRy2WX8S3B5wdVSc9D6KcU5lQNglP2yt58/VfLuAK49glRXChosY8ap2oJ1qgma3GUVA==}
@@ -4833,19 +4834,15 @@ packages:
 
   /@tsconfig/node10@1.0.9:
     resolution: {integrity: sha512-jNsYVVxU8v5g43Erja32laIDHXeoNvFEpX33OK4d6hljo3jDhCBDhx5dhCCTMWUojscpAagGiRkBKxpdl9fxqA==}
-    dev: false
 
   /@tsconfig/node12@1.0.11:
     resolution: {integrity: sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==}
-    dev: false
 
   /@tsconfig/node14@1.0.3:
     resolution: {integrity: sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==}
-    dev: false
 
   /@tsconfig/node16@1.0.4:
     resolution: {integrity: sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==}
-    dev: false
 
   /@types/acorn@4.0.6:
     resolution: {integrity: sha512-veQTnWP+1D/xbxVrPC3zHnCZRjSrKfhbMUlEA43iMZLu7EsnTtkJklIuwrCPbOi8YkvDQAiW05VQQFvvz9oieQ==}
@@ -5423,7 +5420,6 @@ packages:
   /acorn-walk@8.2.0:
     resolution: {integrity: sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==}
     engines: {node: '>=0.4.0'}
-    dev: false
 
   /acorn@7.4.1:
     resolution: {integrity: sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==}
@@ -9100,7 +9096,7 @@ packages:
       - supports-color
     dev: true
 
-  /jest-cli@27.5.1:
+  /jest-cli@27.5.1(ts-node@10.9.1):
     resolution: {integrity: sha512-Hc6HOOwYq4/74/c62dEE3r5elx8wjYqxY0r0G/nFrLDPMFRu6RA/u8qINOIkvhxG7mMQ5EJsOGfRpI8L6eFUVw==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     hasBin: true
@@ -9110,14 +9106,14 @@ packages:
       node-notifier:
         optional: true
     dependencies:
-      '@jest/core': 27.5.1
+      '@jest/core': 27.5.1(ts-node@10.9.1)
       '@jest/test-result': 27.5.1
       '@jest/types': 27.5.1
       chalk: 4.1.2
       exit: 0.1.2
       graceful-fs: 4.2.11
       import-local: 3.1.0
-      jest-config: 27.5.1
+      jest-config: 27.5.1(ts-node@10.9.1)
       jest-util: 27.5.1
       jest-validate: 27.5.1
       prompts: 2.4.2
@@ -9129,7 +9125,7 @@ packages:
       - ts-node
       - utf-8-validate
 
-  /jest-cli@28.1.3:
+  /jest-cli@28.1.3(@types/node@20.4.9)(ts-node@10.9.1):
     resolution: {integrity: sha512-roY3kvrv57Azn1yPgdTebPAXvdR2xfezaKKYzVxZ6It/5NCxzJym6tUI5P1zkdWhfUYkxEI9uZWcQdaFLo8mJQ==}
     engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
     hasBin: true
@@ -9139,14 +9135,14 @@ packages:
       node-notifier:
         optional: true
     dependencies:
-      '@jest/core': 28.1.3
+      '@jest/core': 28.1.3(ts-node@10.9.1)
       '@jest/test-result': 28.1.3
       '@jest/types': 28.1.3
       chalk: 4.1.2
       exit: 0.1.2
       graceful-fs: 4.2.11
       import-local: 3.1.0
-      jest-config: 28.1.3(@types/node@20.4.9)
+      jest-config: 28.1.3(@types/node@20.4.9)(ts-node@10.9.1)
       jest-util: 28.1.3
       jest-validate: 28.1.3
       prompts: 2.4.2
@@ -9157,7 +9153,7 @@ packages:
       - ts-node
     dev: true
 
-  /jest-config@27.5.1:
+  /jest-config@27.5.1(ts-node@10.9.1):
     resolution: {integrity: sha512-5sAsjm6tGdsVbW9ahcChPAFCk4IlkQUknH5AvKjuLTSlcO/wCZKyFdn7Rg0EkC+OGgWODEy2hDpWB1PgzH0JNA==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     peerDependencies:
@@ -9190,13 +9186,14 @@ packages:
       pretty-format: 27.5.1
       slash: 3.0.0
       strip-json-comments: 3.1.1
+      ts-node: 10.9.1(@types/node@20.4.9)(typescript@5.1.6)
     transitivePeerDependencies:
       - bufferutil
       - canvas
       - supports-color
       - utf-8-validate
 
-  /jest-config@28.1.3(@types/node@20.4.9):
+  /jest-config@28.1.3(@types/node@20.4.9)(ts-node@10.9.1):
     resolution: {integrity: sha512-MG3INjByJ0J4AsNBm7T3hsuxKQqFIiRo/AUqb1q9LRKI5UU6Aar9JHbr9Ivn1TVwfUD9KirRoM/T6u8XlcQPHQ==}
     engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
     peerDependencies:
@@ -9231,6 +9228,7 @@ packages:
       pretty-format: 28.1.3
       slash: 3.0.0
       strip-json-comments: 3.1.1
+      ts-node: 10.9.1(@types/node@20.4.9)(typescript@5.1.6)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -9953,7 +9951,7 @@ packages:
       supports-color: 8.1.1
     dev: true
 
-  /jest@27.5.1:
+  /jest@27.5.1(ts-node@10.9.1):
     resolution: {integrity: sha512-Yn0mADZB89zTtjkPJEXwrac3LHudkQMR+Paqa8uxJHCBr9agxztUifWCyiYrjhMPBoUVBjyny0I7XH6ozDr7QQ==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     hasBin: true
@@ -9963,9 +9961,9 @@ packages:
       node-notifier:
         optional: true
     dependencies:
-      '@jest/core': 27.5.1
+      '@jest/core': 27.5.1(ts-node@10.9.1)
       import-local: 3.1.0
-      jest-cli: 27.5.1
+      jest-cli: 27.5.1(ts-node@10.9.1)
     transitivePeerDependencies:
       - bufferutil
       - canvas
@@ -9973,7 +9971,7 @@ packages:
       - ts-node
       - utf-8-validate
 
-  /jest@28.1.3:
+  /jest@28.1.3(@types/node@20.4.9)(ts-node@10.9.1):
     resolution: {integrity: sha512-N4GT5on8UkZgH0O5LUavMRV1EDEhNTL0KEfRmDIeZHSV7p2XgLoY9t9VDUgL6o+yfdgYHVxuz81G8oB9VG5uyA==}
     engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
     hasBin: true
@@ -9983,10 +9981,10 @@ packages:
       node-notifier:
         optional: true
     dependencies:
-      '@jest/core': 28.1.3
+      '@jest/core': 28.1.3(ts-node@10.9.1)
       '@jest/types': 28.1.3
       import-local: 3.1.0
-      jest-cli: 28.1.3
+      jest-cli: 28.1.3(@types/node@20.4.9)(ts-node@10.9.1)
     transitivePeerDependencies:
       - '@types/node'
       - supports-color
@@ -11731,7 +11729,7 @@ packages:
       postcss: 8.4.27
     dev: false
 
-  /postcss-load-config@3.1.4(postcss@8.4.27):
+  /postcss-load-config@3.1.4(postcss@8.4.27)(ts-node@10.9.1):
     resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
     engines: {node: '>= 10'}
     peerDependencies:
@@ -11745,6 +11743,7 @@ packages:
     dependencies:
       lilconfig: 2.1.0
       postcss: 8.4.27
+      ts-node: 10.9.1(@types/node@20.4.9)(typescript@5.1.6)
       yaml: 1.10.2
     dev: true
 
@@ -12044,7 +12043,7 @@ packages:
       dnd-core: 14.0.0
     dev: false
 
-  /react-dnd@14.0.3(@types/react@18.2.19)(react@18.2.0):
+  /react-dnd@14.0.3(@types/node@20.4.9)(@types/react@18.2.19)(react@18.2.0):
     resolution: {integrity: sha512-i73Hx5SKfDRdwXe30+CjF/DidiRdt/gwpPN14ajkPR20t/0osnNKFNHg3DLV6RZym+DJ0pO9H5APeMsBWGU3+Q==}
     peerDependencies:
       '@types/hoist-non-react-statics': '>= 3.3.1'
@@ -12061,6 +12060,7 @@ packages:
     dependencies:
       '@react-dnd/invariant': 2.0.0
       '@react-dnd/shallowequal': 2.0.0
+      '@types/node': 20.4.9
       '@types/react': 18.2.19
       dnd-core: 14.0.0
       fast-deep-equal: 3.1.3
@@ -12988,7 +12988,7 @@ packages:
     peerDependencies:
       jest: '>=16'
     dependencies:
-      jest: 27.5.1
+      jest: 27.5.1(ts-node@10.9.1)
       jest-diff: 29.6.2
       jest-snapshot: 29.6.2
       pretty-format: 29.6.2
@@ -13788,7 +13788,6 @@ packages:
       typescript: 5.1.6
       v8-compile-cache-lib: 3.0.1
       yn: 3.1.1
-    dev: false
 
   /ts-node@9.1.1(typescript@5.1.6):
     resolution: {integrity: sha512-hPlt7ZACERQGf03M253ytLY3dHbGNGrAq9qIHWUY9XHYl1z7wYngSr3OQ5xmui8o2AaxsONxIzjafLUiWBo1Fg==}
@@ -13929,7 +13928,7 @@ packages:
     dependencies:
       is-typedarray: 1.0.0
 
-  /typescript-plugin-css-modules@5.0.1(typescript@5.1.6):
+  /typescript-plugin-css-modules@5.0.1(ts-node@10.9.1)(typescript@5.1.6):
     resolution: {integrity: sha512-hKXObfwfjx2/myRq4JeQ8D3xIWYTFqusi0hS/Aka7RFX1xQEoEkdOGDWyXNb8LmObawsUzbI30gQnZvqYXCrkA==}
     peerDependencies:
       typescript: '>=4.0.0'
@@ -13941,7 +13940,7 @@ packages:
       less: 4.1.3
       lodash.camelcase: 4.3.0
       postcss: 8.4.27
-      postcss-load-config: 3.1.4(postcss@8.4.27)
+      postcss-load-config: 3.1.4(postcss@8.4.27)(ts-node@10.9.1)
       postcss-modules-extract-imports: 3.0.0(postcss@8.4.27)
       postcss-modules-local-by-default: 4.0.3(postcss@8.4.27)
       postcss-modules-scope: 3.0.0(postcss@8.4.27)
@@ -14173,7 +14172,6 @@ packages:
 
   /v8-compile-cache-lib@3.0.1:
     resolution: {integrity: sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==}
-    dev: false
 
   /v8-compile-cache@2.3.0:
     resolution: {integrity: sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==}

From 6968938984f53f876a3df83d0bffb1a10bbcb1e3 Mon Sep 17 00:00:00 2001
From: Karl Kallavus <232199+karl-kallavus@users.noreply.github.com>
Date: Wed, 18 Oct 2023 16:09:45 +0200
Subject: [PATCH 2/7] MDS-738 Table & Checkbox Integration (#2434)

* feat: a new table with expanded selectable rows and checkboxes has been created

* fix: table control structure

* fix: row and branch selection and highlighting

* fix: row and branch selection and highlighting

* fix: burst selection/deselection

* fix: burst select/deselect

* feat: the Expandable table with Checkboxes

* fix: rows are being selected via checkbox only

* fix: some code improvements in the examples

* fmt

* fix: code improvement by the remarks

* fix: code improvement after the remarks

* fix: another code correction

* fix: type of the variable has been removed

* fix: a tiny fix at the Table component

* fmt
---
 next-docs/pages/components/table.tsx          |     8 +-
 .../examples/table/ExpandableCheckboxes.tsx   |   317 +
 .../examples/table/ExpandedWithModals.tsx     |     6 +-
 next-docs/public/examples/table/LongData.tsx  |     2 -
 .../examples/table/SelectableCheckboxes.tsx   |    60 +-
 .../__snapshots__/index.test.tsx.snap         | 24708 +++++++++++-----
 .../examples/table/__tests__/index.test.tsx   |     9 +
 workspaces/tables/src/components/BodyTR.tsx   |     2 +-
 workspaces/tables/src/components/TH.tsx       |     2 +
 workspaces/tables/src/components/Table.tsx    |   215 +-
 .../src/private/types/RenderRowsProps.ts      |     3 +-
 .../tables/src/private/types/THProps.ts       |     1 +
 .../tables/src/private/utils/renderRows.tsx   |    67 +-
 13 files changed, 17178 insertions(+), 8222 deletions(-)
 create mode 100644 next-docs/public/examples/table/ExpandableCheckboxes.tsx

diff --git a/next-docs/pages/components/table.tsx b/next-docs/pages/components/table.tsx
index d6a219a53f..441b1b324e 100644
--- a/next-docs/pages/components/table.tsx
+++ b/next-docs/pages/components/table.tsx
@@ -13,6 +13,7 @@ import CustomContent from '../../public/examples/table/CustomContent';
 import DeepTable from '../../public/examples/table/DeepTable';
 import Default from '../../public/examples/table/Default';
 import Editable from '../../public/examples/table/Editable';
+import ExpandableCheckboxes from '../../public/examples/table/ExpandableCheckboxes';
 import ExpandedRows from '../../public/examples/table/ExpandedRows';
 import ExpandedWithModals from '../../public/examples/table/ExpandedWithModals';
 import LongData from '../../public/examples/table/LongData';
@@ -108,10 +109,15 @@ const PageTable = () => {
         code={examples ? examples.DeepTable : 'Loading'}
       />
       <Preview
-        title="Expanded Rows with calls the modal windows"
+        title="Expanded rows with calls the modal windows"
         preview={<ExpandedWithModals />}
         code={examples ? examples.ExpandedWithModals : 'Loading'}
       />
+      <Preview
+        title="Expanded selectable rows with checkboxes"
+        preview={<ExpandableCheckboxes />}
+        code={examples ? examples.ExpandableCheckboxes : 'Loading'}
+      />
       <Preview
         title="Expanded rows with custom content"
         preview={<CustomContent />}
diff --git a/next-docs/public/examples/table/ExpandableCheckboxes.tsx b/next-docs/public/examples/table/ExpandableCheckboxes.tsx
new file mode 100644
index 0000000000..02427dba2c
--- /dev/null
+++ b/next-docs/public/examples/table/ExpandableCheckboxes.tsx
@@ -0,0 +1,317 @@
+import { Checkbox, Chip, Tooltip, mergeClassnames } from "@heathmont/moon-core-tw";
+import { OtherFrame } from "@heathmont/moon-icons-tw";
+import { Table } from "@heathmont/moon-table-tw";
+import React, { useState } from "react";
+
+interface HeaderProps {
+  rows: [];
+  rowsById: { [key: string]: boolean };
+  isAllRowsExpanded: boolean;
+  getToggleAllRowsExpandedProps: () => React.HTMLAttributes<HTMLSpanElement>;
+}
+
+const Example = () => {
+  /**
+   *  The PREFIX is necessary if you use several different tables with checkboxes on the same page.
+   *  Each table should have its own unique PREFIX to avoid assigning identical indexes to elements.
+   *  When using only one table, the PREFIX can be omitted.
+   */
+  const PREFIX = "any__unique__string__for__each__table";
+
+  const [selected, setSelected] = useState<{ [key: string]: boolean }>({});
+
+  const columnShift = (depth: number) => {
+    const shiftMap: { [key: number]: string } = [
+      'ps-0',
+      'ps-6',
+      'ps-12',
+    ];
+
+    return shiftMap[depth];
+  }
+
+  const checkIfSelected = (id: string, canExpand: boolean, rowsById: { [key: string]: boolean }) => {
+    return canExpand
+      ? Object.keys(rowsById)
+        .filter((rowId) => rowId.indexOf(id) === 0 && rowId !== id)
+        .every((rowId) => selected[rowId] === true)
+      : selected[id] === true;
+  }
+
+  const checkIfIndeterminate = (id: string, rowsById: { [key: string]: boolean }) => {
+    const matches = Object.keys(rowsById)
+      .filter((rowId) => rowId.indexOf(id) === 0 && rowId !== id);
+    return !matches.every((rowId) => selected[rowId] === true) && matches.some((rowId) => selected[rowId] === true);
+  }
+
+  const columnsInitial = [
+    {
+      'Header': 'Expand/Select',
+      'sticky': 'left',
+      columns: [
+        {
+          'id': 'any_unique_string_required',
+          Header: ({
+            rows,
+            rowsById,
+            getToggleAllRowsExpandedProps,
+            isAllRowsExpanded,
+          }: HeaderProps) => (
+            <div className="flex items-center gap-x-1">
+              <div className="flex items-center h-full">
+                <Checkbox
+                  id={PREFIX && PREFIX.length ? `${PREFIX}_root` : 'root'}
+                  checked={(Object.keys(rowsById).length === Object.keys(selected).length)}
+                  indeterminate={!!Object.keys(selected).length && Object.keys(selected).length < Object.keys(rowsById).length}
+                  onClick={(e) => { e.stopPropagation() }}
+                />
+              </div>
+              {<span {...getToggleAllRowsExpandedProps()}>
+                {isAllRowsExpanded ? '👇' : '👉'}
+              </span>}
+            </div>
+          ),
+          Cell: ({ row, rowsById }: any) => (
+            <div className={mergeClassnames(
+              "flex items-center gap-x-1",
+              columnShift(row.depth),
+            )}
+              onClick={(e) => {
+                if ((e.target as unknown as HTMLElement).tagName === 'SPAN') e.stopPropagation();
+              }}
+            >
+              <div className="flex items-center h-full">
+                <Checkbox
+                  id={PREFIX && PREFIX.length ? `${PREFIX}_${row.id}` : row.id}
+                  checked={checkIfSelected(row.id, row.canExpand, rowsById)}
+                  indeterminate={checkIfIndeterminate(row.id, rowsById)}
+                  onClick={(e) => e.stopPropagation()}
+                />
+              </div>
+              {row.canExpand ? (
+                <span {...row.getToggleRowExpandedProps()}>
+                  {row.isExpanded ? '👇' : '👉'}
+                </span>
+              ) : null}
+            </div>
+          )
+        },
+      ],
+    },
+    {
+      Header: 'Name',
+      sticky: 'left',
+      columns: [
+        {
+          Header: 'First Name',
+          accessor: 'firstName',
+        },
+      ],
+    },
+    {
+      Header: 'Info',
+      columns: [
+        {
+          Header: 'Age',
+          accessor: 'age',
+          width: 50,
+        },
+        {
+          Header: 'Visits',
+          accessor: 'visits',
+        },
+        {
+          Header: 'Activity',
+          accessor: 'activity',
+        },
+        {
+          Header: 'Status',
+          width: 60,
+          accessor: 'status',
+        },
+        {
+          Header: 'Profile Progress',
+          Footer: 'Profile Progress',
+          accessor: 'progress',
+        },
+      ],
+    },
+    {
+      Header: 'Actions',
+      sticky: 'right',
+      columns: [
+        {
+          Header: 'Actions',
+          accessor: 'actions',
+          Footer: '',
+        },
+      ],
+    },
+  ];
+
+  const tooltip = () => (
+    <Tooltip>
+      <Tooltip.Trigger className="max-h-6">
+        <Chip
+          variant="ghost"
+          iconOnly={<OtherFrame className="text-moon-24 max-h-6" />}
+        />
+      </Tooltip.Trigger>
+      <Tooltip.Content position="top-start">
+        Round details
+        <Tooltip.Arrow />
+      </Tooltip.Content>
+    </Tooltip>
+  );
+
+  const makeData = () => [
+    {
+      firstName: 'Test lvl1',
+      age: <span>36</span>,
+      visits: <span>50</span>,
+      progress: <span>20</span>,
+      status: 19,
+      activity: 54,
+      actions: tooltip(),
+      subRows: [
+        {
+          firstName: 'Sub test lvl2',
+          age: <span>96</span>,
+          visits: <span>8</span>,
+          progress: <span>2</span>,
+          status: 97,
+          activity: 23,
+          actions: tooltip(),
+          subRows: [
+            {
+              firstName: 'Sub test lvl3',
+              age: <span>63</span>,
+              visits: <span>82</span>,
+              progress: <span>59</span>,
+              status: 52,
+              activity: 46,
+              actions: tooltip(),
+            },
+            {
+              firstName: 'Sub test lvl3',
+              age: <span>64</span>,
+              visits: <span>35</span>,
+              progress: <span>78</span>,
+              status: 65,
+              activity: 5,
+              actions: tooltip(),
+            },
+            {
+              firstName: 'Sub test lvl3',
+              age: <span>12</span>,
+              visits: <span>4</span>,
+              progress: <span>44</span>,
+              status: 98,
+              activity: 5,
+              actions: tooltip(),
+            },
+          ],
+        },
+        {
+          firstName: 'Sub test lvl2',
+          age: <span>74</span>,
+          visits: <span>5</span>,
+          progress: <span>1</span>,
+          status: 86,
+          activity: 2,
+          actions: tooltip(),
+          subRows: [
+            {
+              firstName: 'Sub test lvl3',
+              age: <span>89</span>,
+              visits: <span>98</span>,
+              progress: <span>54</span>,
+              status: 24,
+              activity: 43,
+              actions: tooltip(),
+            },
+            {
+              firstName: 'Sub test lvl3',
+              age: <span>52</span>,
+              visits: <span>25</span>,
+              progress: <span>25</span>,
+              status: 97,
+              activity: 35,
+              actions: tooltip(),
+            },
+            {
+              firstName: 'Sub test lvl3',
+              age: <span>55</span>,
+              visits: <span>54</span>,
+              progress: <span>24</span>,
+              status: 56,
+              activity: 33,
+              actions: tooltip(),
+            },
+          ],
+        },
+        {
+          firstName: 'Sub test lvl2',
+          age: <span>53</span>,
+          visits: <span>63</span>,
+          progress: <span>24</span>,
+          status: 48,
+          activity: 3,
+          actions: tooltip(),
+          subRows: [
+            {
+              firstName: 'Sub test lvl3',
+              age: <span>4</span>,
+              visits: <span>653</span>,
+              progress: <span>36</span>,
+              status: 44,
+              activity: 43,
+              actions: tooltip(),
+            },
+            {
+              firstName: 'Sub test lvl3',
+              age: <span>49</span>,
+              visits: <span>45</span>,
+              progress: <span>454</span>,
+              status: 35,
+              activity: 4,
+              actions: tooltip(),
+            },
+          ],
+        },
+      ],
+    }
+  ];
+
+  const columns = React.useMemo(() => columnsInitial, [selected]);
+  const data = React.useMemo(() => makeData(), []);
+
+  const defaultColumn = React.useMemo(
+    () => ({
+      minWidth: 100,
+      width: 150,
+      maxWidth: 400,
+    }), []);
+
+  return (
+    <Table
+      columns={columns}
+      defaultColumn={defaultColumn}
+      data={data}
+      width={800}
+      height={400}
+      selectable={true}
+      useCheckbox={true}
+      expandedByDefault={true}
+      getOnRowSelect={() => (rows) => {
+        setSelected(rows.reduce((acc: { [key: string]: boolean }, item) => {
+          acc[item.id] = true;
+          return acc;
+        }, {})
+        );
+      }}
+    />
+  );
+}
+
+export default Example;
diff --git a/next-docs/public/examples/table/ExpandedWithModals.tsx b/next-docs/public/examples/table/ExpandedWithModals.tsx
index df812f44a7..3ab8d4fb19 100644
--- a/next-docs/public/examples/table/ExpandedWithModals.tsx
+++ b/next-docs/public/examples/table/ExpandedWithModals.tsx
@@ -2,7 +2,6 @@ import React, { ReactNode, useState } from 'react';
 import { Table } from '@heathmont/moon-table-tw';
 import { Button, Chip, Modal, Tooltip } from '@heathmont/moon-core-tw';
 import { OtherFrame } from '@heathmont/moon-icons-tw';
-import { number } from 'zod';
 
 interface HeaderProps {
   isAllRowsExpanded: boolean;
@@ -107,7 +106,8 @@ const Example = () => {
           onClick={() => {
             setTitle(modal.title);
             setPanel(modal.panel);
-            openModal(); }}
+            openModal();
+          }}
         />
       </Tooltip.Trigger>
       <Tooltip.Content position="top-start">
@@ -128,7 +128,7 @@ const Example = () => {
           <li>Activity: {Math.floor(index * 100)}</li>
           <li>Actions: {Math.floor(index * 100)}</li>
         </ul>
-        )
+      )
     };
   }
 
diff --git a/next-docs/public/examples/table/LongData.tsx b/next-docs/public/examples/table/LongData.tsx
index 60a5ea9d6a..0f511192f1 100644
--- a/next-docs/public/examples/table/LongData.tsx
+++ b/next-docs/public/examples/table/LongData.tsx
@@ -48,8 +48,6 @@ const Example = () => {
           'Header': 'Currency',
           'accessor': 'currency',
           'Footer': '',
-          /*'maxWidth': Number.MAX_SAFE_INTEGER,
-          'width': 80 */
         },
       ],
     },
diff --git a/next-docs/public/examples/table/SelectableCheckboxes.tsx b/next-docs/public/examples/table/SelectableCheckboxes.tsx
index 2dfd060dd2..fa9844a9e6 100644
--- a/next-docs/public/examples/table/SelectableCheckboxes.tsx
+++ b/next-docs/public/examples/table/SelectableCheckboxes.tsx
@@ -1,8 +1,56 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Table } from '@heathmont/moon-table-tw';
+import { Checkbox } from '@heathmont/moon-core-tw';
+
+interface HeaderProps {
+  rows: [];
+  rowsById: { [key: string]: boolean };
+}
 
 const Example = () => {
+  /**
+   *  The PREFIX is necessary if you use several different tables with checkboxes on the same page.
+   *  Each table should have its own unique PREFIX to avoid assigning identical indexes to elements.
+   *  When using only one table, the PREFIX can be omitted.
+   */
+  const PREFIX = "any_unique_string_for_each_table";
+
+  const [selected, setSelected] = useState<{ [key: string]: boolean }>({});
+
   const columnsInitial = [
+    {
+      'Header': 'Select',
+      'sticky': 'left',
+      'Footer': '',
+      columns: [
+        {
+          'id': '_any_unique_string_required',
+          Header: ({
+            rows,
+            rowsById,
+          }: HeaderProps) => (
+            <div className="flex items-center h-full">
+              <Checkbox
+                id={ PREFIX && PREFIX.length ? `${PREFIX}_root` : 'root' }
+                checked={(Object.keys(rowsById).length === Object.keys(selected).length)}
+                indeterminate={!!Object.keys(selected).length && Object.keys(selected).length < Object.keys(rowsById).length}
+                onClick={(e) => { e.stopPropagation() }}
+              />
+            </div>
+          ),
+          Cell: ({ row, rowsById }: any) => (
+              <div className="flex items-center h-full">
+                <Checkbox
+                  id={ PREFIX && PREFIX.length ? `${PREFIX}_${row.id}` : row.id }
+                  checked={selected[row.id] === true}
+                  onClick={(e) => e.stopPropagation()}
+                />
+              </div>
+          ),
+          Footer: '',
+        },
+      ],
+    },
     {
       Header: 'Name',
       sticky: 'left',
@@ -72,7 +120,6 @@ const Example = () => {
         progress: <span>{Math.floor(index * 100)}</span>,
         status: Math.floor(index * 100),
         activity: Math.floor(index * 100),
-        isSelected: index === 3,
       };
     });
   };
@@ -86,7 +133,7 @@ const Example = () => {
     []
   );
 
-  const columns = React.useMemo(() => columnsInitial, []);
+  const columns = React.useMemo(() => columnsInitial, [selected]);
   const data = React.useMemo(() => makeData(40), []);
 
   return (
@@ -99,8 +146,13 @@ const Example = () => {
       withFooter={true}
       selectable={true}
       useCheckbox={true}
-      getOnRowSelect={() => (rows: any) => {
+      getOnRowSelect={() => (rows) => {
         console.log(`IDs of selected rows - ${rows.map((row: any) => row.id)}`);
+        setSelected(rows.reduce((acc: {[key: string]: boolean}, item) => {
+          acc[item.id] = true;
+          return acc;
+        }, {})
+      );
       }}
     />
   );
diff --git a/next-docs/public/examples/table/__tests__/__snapshots__/index.test.tsx.snap b/next-docs/public/examples/table/__tests__/__snapshots__/index.test.tsx.snap
index f96be3f3c5..c3d385f921 100644
--- a/next-docs/public/examples/table/__tests__/__snapshots__/index.test.tsx.snap
+++ b/next-docs/public/examples/table/__tests__/__snapshots__/index.test.tsx.snap
@@ -33741,7 +33741,7 @@ Object {
 }
 `;
 
-exports[`Table in RTL renders ExpandedRows 1`] = `
+exports[`Table in RTL renders ExpandableCheckboxes 1`] = `
 Object {
   "asFragment": [Function],
   "baseElement": <body>
@@ -33760,7 +33760,7 @@ Object {
             <div
               class="flex rounded-moon-s-sm sticky"
               role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+              style="display: flex; flex: 1 0 auto; min-width: 800px;"
             >
               <div
                 class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
@@ -33769,7 +33769,7 @@ Object {
                 role="columnheader"
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
               >
-                Expand
+                Expand/Select
                 <div
                   class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
                   draggable="false"
@@ -33795,9 +33795,9 @@ Object {
               </div>
               <div
                 class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
-                colspan="4"
+                colspan="5"
                 role="columnheader"
-                style="box-sizing: border-box; flex: 500 0 auto; min-width: 400px; width: 500px; position: relative;"
+                style="box-sizing: border-box; flex: 650 0 auto; min-width: 500px; width: 650px; position: relative;"
               >
                 Info
                 <div
@@ -33815,7 +33815,7 @@ Object {
                 role="columnheader"
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
               >
-                Progress
+                Actions
                 <div
                   class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
                   draggable="false"
@@ -33827,7 +33827,7 @@ Object {
             <div
               class="flex rounded-moon-s-sm sticky"
               role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+              style="display: flex; flex: 1 0 auto; min-width: 800px;"
             >
               <div
                 class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
@@ -33836,12 +33836,52 @@ Object {
                 role="columnheader"
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
               >
-                <span
-                  style="cursor: pointer;"
-                  title="Toggle All Rows Expanded"
+                <div
+                  class="flex items-center gap-x-1"
                 >
-                  👉
-                </span>
+                  <div
+                    class="flex items-center h-full"
+                  >
+                    <label
+                      class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
+                      for="any__unique__string__for__each__table_root"
+                    >
+                      <input
+                        aria-checked="false"
+                        aria-label="Checkbox"
+                        class="peer appearance-none h-6 w-6 outline-none align-top select-none"
+                        id="any__unique__string__for__each__table_root"
+                        type="checkbox"
+                      />
+                      <span
+                        aria-hidden="true"
+                        class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
+                      >
+                        <svg
+                          class="transition-opacity opacity-0"
+                          fill="none"
+                          height="1em"
+                          viewBox="0 0 32 32"
+                          width="1em"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M7 14.9412L13.6667 22L25 10"
+                            stroke="currentColor"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                          />
+                        </svg>
+                      </span>
+                    </label>
+                  </div>
+                  <span
+                    style="cursor: pointer;"
+                    title="Toggle All Rows Expanded"
+                  >
+                    👇
+                  </span>
+                </div>
                 <div
                   class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
                   draggable="false"
@@ -33921,6 +33961,20 @@ Object {
                   style="cursor: col-resize;"
                 />
               </div>
+              <div
+                class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+                colspan="1"
+                role="columnheader"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: relative;"
+              >
+                Profile Progress
+                <div
+                  class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+                  draggable="false"
+                  role="separator"
+                  style="cursor: col-resize;"
+                />
+              </div>
               <div
                 class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0"
                 colspan="1"
@@ -33929,7 +33983,7 @@ Object {
                 role="columnheader"
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
               >
-                Profile Progress
+                Actions
                 <div
                   class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
                   draggable="false"
@@ -33940,7 +33994,7 @@ Object {
             </div>
             <div
               role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+              style="display: flex; flex: 1 0 auto; min-width: 800px;"
             >
               <div
                 class="relative"
@@ -33981,6 +34035,12 @@ Object {
                 role="columnheader"
                 style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px; position: relative;"
               />
+              <div
+                class="relative"
+                colspan="1"
+                role="columnheader"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: relative;"
+              />
               <div
                 class="relative"
                 colspan="1"
@@ -33996,9 +34056,9 @@ Object {
             role="rowgroup"
           >
             <div
-              class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+              class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors first:rounded-es-none last:rounded-ee-none text-bulma bg-goku border-goku"
               role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+              style="display: flex; flex: 1 0 auto; min-width: 800px;"
             >
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
@@ -34006,12 +34066,52 @@ Object {
                 role="cell"
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
               >
-                <span
-                  style="cursor: pointer; padding-left: 0rem;"
-                  title="Toggle Row Expanded"
+                <div
+                  class="flex items-center gap-x-1 ps-0"
                 >
-                  👉
-                </span>
+                  <div
+                    class="flex items-center h-full"
+                  >
+                    <label
+                      class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
+                      for="any__unique__string__for__each__table_0"
+                    >
+                      <input
+                        aria-checked="false"
+                        aria-label="Checkbox"
+                        class="peer appearance-none h-6 w-6 outline-none align-top select-none"
+                        id="any__unique__string__for__each__table_0"
+                        type="checkbox"
+                      />
+                      <span
+                        aria-hidden="true"
+                        class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
+                      >
+                        <svg
+                          class="transition-opacity opacity-0"
+                          fill="none"
+                          height="1em"
+                          viewBox="0 0 32 32"
+                          width="1em"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M7 14.9412L13.6667 22L25 10"
+                            stroke="currentColor"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                          />
+                        </svg>
+                      </span>
+                    </label>
+                  </div>
+                  <span
+                    style="cursor: pointer;"
+                    title="Toggle Row Expanded"
+                  >
+                    👇
+                  </span>
+                </div>
               </div>
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
@@ -34020,7 +34120,7 @@ Object {
                 role="cell"
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
               >
-                Test
+                Test lvl1
               </div>
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
@@ -34028,7 +34128,7 @@ Object {
                 style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
               >
                 <span>
-                  0
+                  36
                 </span>
               </div>
               <div
@@ -34037,7 +34137,7 @@ Object {
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
               >
                 <span>
-                  0
+                  50
                 </span>
               </div>
               <div
@@ -34045,62 +34145,14 @@ Object {
                 role="cell"
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
               >
-                0
-              </div>
-              <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-                role="cell"
-                style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-              >
-                0
-              </div>
-              <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
-                data-sticky-first-right-td="true"
-                data-sticky-td="true"
-                role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
-              >
-                <span>
-                  0
-                </span>
-              </div>
-            </div>
-            <div
-              class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-              role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
-            >
-              <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-                data-sticky-td="true"
-                role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
-              >
-                <span
-                  style="cursor: pointer; padding-left: 0rem;"
-                  title="Toggle Row Expanded"
-                >
-                  👉
-                </span>
-              </div>
-              <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-                data-sticky-last-left-td="true"
-                data-sticky-td="true"
-                role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
-              >
-                Test
+                54
               </div>
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
                 role="cell"
                 style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
               >
-                <span>
-                  30
-                </span>
+                19
               </div>
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
@@ -34108,23 +34160,9 @@ Object {
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
               >
                 <span>
-                  100
+                  20
                 </span>
               </div>
-              <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-                role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-              >
-                100
-              </div>
-              <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-                role="cell"
-                style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-              >
-                100
-              </div>
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
                 data-sticky-first-right-td="true"
@@ -34132,15 +34170,32 @@ Object {
                 role="cell"
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
               >
-                <span>
-                  100
-                </span>
+                <button
+                  class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+                  data-state="closed"
+                  type="button"
+                >
+                  <svg
+                    class="text-moon-24 max-h-6"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 32 32"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                      stroke="currentColor"
+                      stroke-linecap="round"
+                    />
+                  </svg>
+                </button>
               </div>
             </div>
             <div
-              class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+              class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors first:rounded-es-none last:rounded-ee-none text-bulma bg-goku border-goku"
               role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+              style="display: flex; flex: 1 0 auto; min-width: 800px;"
             >
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
@@ -34148,12 +34203,52 @@ Object {
                 role="cell"
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
               >
-                <span
-                  style="cursor: pointer; padding-left: 0rem;"
-                  title="Toggle Row Expanded"
+                <div
+                  class="flex items-center gap-x-1 ps-6"
                 >
-                  👉
-                </span>
+                  <div
+                    class="flex items-center h-full"
+                  >
+                    <label
+                      class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
+                      for="any__unique__string__for__each__table_0.0"
+                    >
+                      <input
+                        aria-checked="false"
+                        aria-label="Checkbox"
+                        class="peer appearance-none h-6 w-6 outline-none align-top select-none"
+                        id="any__unique__string__for__each__table_0.0"
+                        type="checkbox"
+                      />
+                      <span
+                        aria-hidden="true"
+                        class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
+                      >
+                        <svg
+                          class="transition-opacity opacity-0"
+                          fill="none"
+                          height="1em"
+                          viewBox="0 0 32 32"
+                          width="1em"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M7 14.9412L13.6667 22L25 10"
+                            stroke="currentColor"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                          />
+                        </svg>
+                      </span>
+                    </label>
+                  </div>
+                  <span
+                    style="cursor: pointer;"
+                    title="Toggle Row Expanded"
+                  >
+                    👇
+                  </span>
+                </div>
               </div>
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
@@ -34162,7 +34257,7 @@ Object {
                 role="cell"
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
               >
-                Test
+                Sub test lvl2
               </div>
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
@@ -34170,7 +34265,7 @@ Object {
                 style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
               >
                 <span>
-                  60
+                  96
                 </span>
               </div>
               <div
@@ -34179,7 +34274,7 @@ Object {
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
               >
                 <span>
-                  200
+                  8
                 </span>
               </div>
               <div
@@ -34187,62 +34282,14 @@ Object {
                 role="cell"
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
               >
-                200
-              </div>
-              <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-                role="cell"
-                style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-              >
-                200
-              </div>
-              <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
-                data-sticky-first-right-td="true"
-                data-sticky-td="true"
-                role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
-              >
-                <span>
-                  200
-                </span>
-              </div>
-            </div>
-            <div
-              class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-              role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
-            >
-              <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-                data-sticky-td="true"
-                role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
-              >
-                <span
-                  style="cursor: pointer; padding-left: 0rem;"
-                  title="Toggle Row Expanded"
-                >
-                  👉
-                </span>
-              </div>
-              <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-                data-sticky-last-left-td="true"
-                data-sticky-td="true"
-                role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
-              >
-                Test
+                23
               </div>
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
                 role="cell"
                 style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
               >
-                <span>
-                  90
-                </span>
+                97
               </div>
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
@@ -34250,23 +34297,9 @@ Object {
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
               >
                 <span>
-                  300
+                  2
                 </span>
               </div>
-              <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-                role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-              >
-                300
-              </div>
-              <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-                role="cell"
-                style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-              >
-                300
-              </div>
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
                 data-sticky-first-right-td="true"
@@ -34274,15 +34307,32 @@ Object {
                 role="cell"
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
               >
-                <span>
-                  300
-                </span>
+                <button
+                  class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+                  data-state="closed"
+                  type="button"
+                >
+                  <svg
+                    class="text-moon-24 max-h-6"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 32 32"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                      stroke="currentColor"
+                      stroke-linecap="round"
+                    />
+                  </svg>
+                </button>
               </div>
             </div>
             <div
-              class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+              class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors first:rounded-es-none last:rounded-ee-none text-bulma bg-goku border-goku"
               role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+              style="display: flex; flex: 1 0 auto; min-width: 800px;"
             >
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
@@ -34290,12 +34340,46 @@ Object {
                 role="cell"
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
               >
-                <span
-                  style="cursor: pointer; padding-left: 0rem;"
-                  title="Toggle Row Expanded"
+                <div
+                  class="flex items-center gap-x-1 ps-12"
                 >
-                  👉
-                </span>
+                  <div
+                    class="flex items-center h-full"
+                  >
+                    <label
+                      class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
+                      for="any__unique__string__for__each__table_0.0.0"
+                    >
+                      <input
+                        aria-checked="false"
+                        aria-label="Checkbox"
+                        class="peer appearance-none h-6 w-6 outline-none align-top select-none"
+                        id="any__unique__string__for__each__table_0.0.0"
+                        type="checkbox"
+                      />
+                      <span
+                        aria-hidden="true"
+                        class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
+                      >
+                        <svg
+                          class="transition-opacity opacity-0"
+                          fill="none"
+                          height="1em"
+                          viewBox="0 0 32 32"
+                          width="1em"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M7 14.9412L13.6667 22L25 10"
+                            stroke="currentColor"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                          />
+                        </svg>
+                      </span>
+                    </label>
+                  </div>
+                </div>
               </div>
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
@@ -34304,7 +34388,7 @@ Object {
                 role="cell"
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
               >
-                Test
+                Sub test lvl3
               </div>
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
@@ -34312,7 +34396,7 @@ Object {
                 style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
               >
                 <span>
-                  120
+                  63
                 </span>
               </div>
               <div
@@ -34321,7 +34405,7 @@ Object {
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
               >
                 <span>
-                  400
+                  82
                 </span>
               </div>
               <div
@@ -34329,62 +34413,14 @@ Object {
                 role="cell"
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
               >
-                400
-              </div>
-              <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-                role="cell"
-                style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-              >
-                400
-              </div>
-              <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
-                data-sticky-first-right-td="true"
-                data-sticky-td="true"
-                role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
-              >
-                <span>
-                  400
-                </span>
-              </div>
-            </div>
-            <div
-              class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-              role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
-            >
-              <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-                data-sticky-td="true"
-                role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
-              >
-                <span
-                  style="cursor: pointer; padding-left: 0rem;"
-                  title="Toggle Row Expanded"
-                >
-                  👉
-                </span>
-              </div>
-              <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-                data-sticky-last-left-td="true"
-                data-sticky-td="true"
-                role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
-              >
-                Test
+                46
               </div>
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
                 role="cell"
                 style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
               >
-                <span>
-                  150
-                </span>
+                52
               </div>
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
@@ -34392,23 +34428,9 @@ Object {
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
               >
                 <span>
-                  500
+                  59
                 </span>
               </div>
-              <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-                role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-              >
-                500
-              </div>
-              <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-                role="cell"
-                style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-              >
-                500
-              </div>
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
                 data-sticky-first-right-td="true"
@@ -34416,15 +34438,32 @@ Object {
                 role="cell"
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
               >
-                <span>
-                  500
-                </span>
+                <button
+                  class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+                  data-state="closed"
+                  type="button"
+                >
+                  <svg
+                    class="text-moon-24 max-h-6"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 32 32"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                      stroke="currentColor"
+                      stroke-linecap="round"
+                    />
+                  </svg>
+                </button>
               </div>
             </div>
             <div
-              class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+              class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors first:rounded-es-none last:rounded-ee-none text-bulma bg-goku border-goku"
               role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+              style="display: flex; flex: 1 0 auto; min-width: 800px;"
             >
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
@@ -34432,12 +34471,46 @@ Object {
                 role="cell"
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
               >
-                <span
-                  style="cursor: pointer; padding-left: 0rem;"
-                  title="Toggle Row Expanded"
+                <div
+                  class="flex items-center gap-x-1 ps-12"
                 >
-                  👉
-                </span>
+                  <div
+                    class="flex items-center h-full"
+                  >
+                    <label
+                      class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
+                      for="any__unique__string__for__each__table_0.0.1"
+                    >
+                      <input
+                        aria-checked="false"
+                        aria-label="Checkbox"
+                        class="peer appearance-none h-6 w-6 outline-none align-top select-none"
+                        id="any__unique__string__for__each__table_0.0.1"
+                        type="checkbox"
+                      />
+                      <span
+                        aria-hidden="true"
+                        class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
+                      >
+                        <svg
+                          class="transition-opacity opacity-0"
+                          fill="none"
+                          height="1em"
+                          viewBox="0 0 32 32"
+                          width="1em"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M7 14.9412L13.6667 22L25 10"
+                            stroke="currentColor"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                          />
+                        </svg>
+                      </span>
+                    </label>
+                  </div>
+                </div>
               </div>
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
@@ -34446,7 +34519,7 @@ Object {
                 role="cell"
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
               >
-                Test
+                Sub test lvl3
               </div>
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
@@ -34454,7 +34527,7 @@ Object {
                 style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
               >
                 <span>
-                  180
+                  64
                 </span>
               </div>
               <div
@@ -34463,7 +34536,7 @@ Object {
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
               >
                 <span>
-                  600
+                  35
                 </span>
               </div>
               <div
@@ -34471,62 +34544,14 @@ Object {
                 role="cell"
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
               >
-                600
-              </div>
-              <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-                role="cell"
-                style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-              >
-                600
-              </div>
-              <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
-                data-sticky-first-right-td="true"
-                data-sticky-td="true"
-                role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
-              >
-                <span>
-                  600
-                </span>
-              </div>
-            </div>
-            <div
-              class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-              role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
-            >
-              <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-                data-sticky-td="true"
-                role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
-              >
-                <span
-                  style="cursor: pointer; padding-left: 0rem;"
-                  title="Toggle Row Expanded"
-                >
-                  👉
-                </span>
-              </div>
-              <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-                data-sticky-last-left-td="true"
-                data-sticky-td="true"
-                role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
-              >
-                Test
+                5
               </div>
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
                 role="cell"
                 style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
               >
-                <span>
-                  210
-                </span>
+                65
               </div>
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
@@ -34534,23 +34559,9 @@ Object {
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
               >
                 <span>
-                  700
+                  78
                 </span>
               </div>
-              <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-                role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-              >
-                700
-              </div>
-              <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-                role="cell"
-                style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-              >
-                700
-              </div>
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
                 data-sticky-first-right-td="true"
@@ -34558,15 +34569,32 @@ Object {
                 role="cell"
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
               >
-                <span>
-                  700
-                </span>
+                <button
+                  class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+                  data-state="closed"
+                  type="button"
+                >
+                  <svg
+                    class="text-moon-24 max-h-6"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 32 32"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                      stroke="currentColor"
+                      stroke-linecap="round"
+                    />
+                  </svg>
+                </button>
               </div>
             </div>
             <div
-              class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+              class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors first:rounded-es-none last:rounded-ee-none text-bulma bg-goku border-goku"
               role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+              style="display: flex; flex: 1 0 auto; min-width: 800px;"
             >
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
@@ -34574,12 +34602,46 @@ Object {
                 role="cell"
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
               >
-                <span
-                  style="cursor: pointer; padding-left: 0rem;"
-                  title="Toggle Row Expanded"
+                <div
+                  class="flex items-center gap-x-1 ps-12"
                 >
-                  👉
-                </span>
+                  <div
+                    class="flex items-center h-full"
+                  >
+                    <label
+                      class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
+                      for="any__unique__string__for__each__table_0.0.2"
+                    >
+                      <input
+                        aria-checked="false"
+                        aria-label="Checkbox"
+                        class="peer appearance-none h-6 w-6 outline-none align-top select-none"
+                        id="any__unique__string__for__each__table_0.0.2"
+                        type="checkbox"
+                      />
+                      <span
+                        aria-hidden="true"
+                        class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
+                      >
+                        <svg
+                          class="transition-opacity opacity-0"
+                          fill="none"
+                          height="1em"
+                          viewBox="0 0 32 32"
+                          width="1em"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M7 14.9412L13.6667 22L25 10"
+                            stroke="currentColor"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                          />
+                        </svg>
+                      </span>
+                    </label>
+                  </div>
+                </div>
               </div>
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
@@ -34588,7 +34650,7 @@ Object {
                 role="cell"
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
               >
-                Test
+                Sub test lvl3
               </div>
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
@@ -34596,7 +34658,7 @@ Object {
                 style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
               >
                 <span>
-                  240
+                  12
                 </span>
               </div>
               <div
@@ -34605,7 +34667,7 @@ Object {
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
               >
                 <span>
-                  800
+                  4
                 </span>
               </div>
               <div
@@ -34613,62 +34675,14 @@ Object {
                 role="cell"
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
               >
-                800
-              </div>
-              <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-                role="cell"
-                style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-              >
-                800
-              </div>
-              <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
-                data-sticky-first-right-td="true"
-                data-sticky-td="true"
-                role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
-              >
-                <span>
-                  800
-                </span>
-              </div>
-            </div>
-            <div
-              class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-              role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
-            >
-              <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-                data-sticky-td="true"
-                role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
-              >
-                <span
-                  style="cursor: pointer; padding-left: 0rem;"
-                  title="Toggle Row Expanded"
-                >
-                  👉
-                </span>
-              </div>
-              <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-                data-sticky-last-left-td="true"
-                data-sticky-td="true"
-                role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
-              >
-                Test
+                5
               </div>
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
                 role="cell"
                 style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
               >
-                <span>
-                  270
-                </span>
+                98
               </div>
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
@@ -34676,23 +34690,9 @@ Object {
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
               >
                 <span>
-                  900
+                  44
                 </span>
               </div>
-              <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-                role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-              >
-                900
-              </div>
-              <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-                role="cell"
-                style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-              >
-                900
-              </div>
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
                 data-sticky-first-right-td="true"
@@ -34700,15 +34700,32 @@ Object {
                 role="cell"
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
               >
-                <span>
-                  900
-                </span>
+                <button
+                  class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+                  data-state="closed"
+                  type="button"
+                >
+                  <svg
+                    class="text-moon-24 max-h-6"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 32 32"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                      stroke="currentColor"
+                      stroke-linecap="round"
+                    />
+                  </svg>
+                </button>
               </div>
             </div>
             <div
-              class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+              class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors first:rounded-es-none last:rounded-ee-none text-bulma bg-goku border-goku"
               role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+              style="display: flex; flex: 1 0 auto; min-width: 800px;"
             >
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
@@ -34716,12 +34733,52 @@ Object {
                 role="cell"
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
               >
-                <span
-                  style="cursor: pointer; padding-left: 0rem;"
-                  title="Toggle Row Expanded"
+                <div
+                  class="flex items-center gap-x-1 ps-6"
                 >
-                  👉
-                </span>
+                  <div
+                    class="flex items-center h-full"
+                  >
+                    <label
+                      class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
+                      for="any__unique__string__for__each__table_0.1"
+                    >
+                      <input
+                        aria-checked="false"
+                        aria-label="Checkbox"
+                        class="peer appearance-none h-6 w-6 outline-none align-top select-none"
+                        id="any__unique__string__for__each__table_0.1"
+                        type="checkbox"
+                      />
+                      <span
+                        aria-hidden="true"
+                        class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
+                      >
+                        <svg
+                          class="transition-opacity opacity-0"
+                          fill="none"
+                          height="1em"
+                          viewBox="0 0 32 32"
+                          width="1em"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M7 14.9412L13.6667 22L25 10"
+                            stroke="currentColor"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                          />
+                        </svg>
+                      </span>
+                    </label>
+                  </div>
+                  <span
+                    style="cursor: pointer;"
+                    title="Toggle Row Expanded"
+                  >
+                    👇
+                  </span>
+                </div>
               </div>
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
@@ -34730,7 +34787,7 @@ Object {
                 role="cell"
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
               >
-                Test
+                Sub test lvl2
               </div>
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
@@ -34738,7 +34795,7 @@ Object {
                 style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
               >
                 <span>
-                  300
+                  74
                 </span>
               </div>
               <div
@@ -34747,7 +34804,7 @@ Object {
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
               >
                 <span>
-                  1000
+                  5
                 </span>
               </div>
               <div
@@ -34755,62 +34812,14 @@ Object {
                 role="cell"
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
               >
-                1000
-              </div>
-              <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-                role="cell"
-                style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-              >
-                1000
-              </div>
-              <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
-                data-sticky-first-right-td="true"
-                data-sticky-td="true"
-                role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
-              >
-                <span>
-                  1000
-                </span>
-              </div>
-            </div>
-            <div
-              class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-              role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
-            >
-              <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-                data-sticky-td="true"
-                role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
-              >
-                <span
-                  style="cursor: pointer; padding-left: 0rem;"
-                  title="Toggle Row Expanded"
-                >
-                  👉
-                </span>
-              </div>
-              <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-                data-sticky-last-left-td="true"
-                data-sticky-td="true"
-                role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
-              >
-                Test
+                2
               </div>
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
                 role="cell"
                 style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
               >
-                <span>
-                  330
-                </span>
+                86
               </div>
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
@@ -34818,23 +34827,9 @@ Object {
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
               >
                 <span>
-                  1100
+                  1
                 </span>
               </div>
-              <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-                role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-              >
-                1100
-              </div>
-              <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-                role="cell"
-                style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-              >
-                1100
-              </div>
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
                 data-sticky-first-right-td="true"
@@ -34842,15 +34837,32 @@ Object {
                 role="cell"
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
               >
-                <span>
-                  1100
-                </span>
+                <button
+                  class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+                  data-state="closed"
+                  type="button"
+                >
+                  <svg
+                    class="text-moon-24 max-h-6"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 32 32"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                      stroke="currentColor"
+                      stroke-linecap="round"
+                    />
+                  </svg>
+                </button>
               </div>
             </div>
             <div
-              class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+              class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors first:rounded-es-none last:rounded-ee-none text-bulma bg-goku border-goku"
               role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+              style="display: flex; flex: 1 0 auto; min-width: 800px;"
             >
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
@@ -34858,12 +34870,46 @@ Object {
                 role="cell"
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
               >
-                <span
-                  style="cursor: pointer; padding-left: 0rem;"
-                  title="Toggle Row Expanded"
+                <div
+                  class="flex items-center gap-x-1 ps-12"
                 >
-                  👉
-                </span>
+                  <div
+                    class="flex items-center h-full"
+                  >
+                    <label
+                      class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
+                      for="any__unique__string__for__each__table_0.1.0"
+                    >
+                      <input
+                        aria-checked="false"
+                        aria-label="Checkbox"
+                        class="peer appearance-none h-6 w-6 outline-none align-top select-none"
+                        id="any__unique__string__for__each__table_0.1.0"
+                        type="checkbox"
+                      />
+                      <span
+                        aria-hidden="true"
+                        class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
+                      >
+                        <svg
+                          class="transition-opacity opacity-0"
+                          fill="none"
+                          height="1em"
+                          viewBox="0 0 32 32"
+                          width="1em"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M7 14.9412L13.6667 22L25 10"
+                            stroke="currentColor"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                          />
+                        </svg>
+                      </span>
+                    </label>
+                  </div>
+                </div>
               </div>
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
@@ -34872,7 +34918,7 @@ Object {
                 role="cell"
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
               >
-                Test
+                Sub test lvl3
               </div>
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
@@ -34880,7 +34926,7 @@ Object {
                 style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
               >
                 <span>
-                  360
+                  89
                 </span>
               </div>
               <div
@@ -34889,7 +34935,7 @@ Object {
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
               >
                 <span>
-                  1200
+                  98
                 </span>
               </div>
               <div
@@ -34897,14 +34943,23 @@ Object {
                 role="cell"
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
               >
-                1200
+                43
               </div>
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
                 role="cell"
                 style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
               >
-                1200
+                24
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+              >
+                <span>
+                  54
+                </span>
               </div>
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
@@ -34913,15 +34968,32 @@ Object {
                 role="cell"
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
               >
-                <span>
-                  1200
-                </span>
+                <button
+                  class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+                  data-state="closed"
+                  type="button"
+                >
+                  <svg
+                    class="text-moon-24 max-h-6"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 32 32"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                      stroke="currentColor"
+                      stroke-linecap="round"
+                    />
+                  </svg>
+                </button>
               </div>
             </div>
             <div
-              class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+              class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors first:rounded-es-none last:rounded-ee-none text-bulma bg-goku border-goku"
               role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+              style="display: flex; flex: 1 0 auto; min-width: 800px;"
             >
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
@@ -34929,12 +35001,46 @@ Object {
                 role="cell"
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
               >
-                <span
-                  style="cursor: pointer; padding-left: 0rem;"
-                  title="Toggle Row Expanded"
+                <div
+                  class="flex items-center gap-x-1 ps-12"
                 >
-                  👉
-                </span>
+                  <div
+                    class="flex items-center h-full"
+                  >
+                    <label
+                      class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
+                      for="any__unique__string__for__each__table_0.1.1"
+                    >
+                      <input
+                        aria-checked="false"
+                        aria-label="Checkbox"
+                        class="peer appearance-none h-6 w-6 outline-none align-top select-none"
+                        id="any__unique__string__for__each__table_0.1.1"
+                        type="checkbox"
+                      />
+                      <span
+                        aria-hidden="true"
+                        class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
+                      >
+                        <svg
+                          class="transition-opacity opacity-0"
+                          fill="none"
+                          height="1em"
+                          viewBox="0 0 32 32"
+                          width="1em"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M7 14.9412L13.6667 22L25 10"
+                            stroke="currentColor"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                          />
+                        </svg>
+                      </span>
+                    </label>
+                  </div>
+                </div>
               </div>
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
@@ -34943,7 +35049,7 @@ Object {
                 role="cell"
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
               >
-                Test
+                Sub test lvl3
               </div>
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
@@ -34951,7 +35057,7 @@ Object {
                 style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
               >
                 <span>
-                  390
+                  52
                 </span>
               </div>
               <div
@@ -34960,7 +35066,7 @@ Object {
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
               >
                 <span>
-                  1300
+                  25
                 </span>
               </div>
               <div
@@ -34968,14 +35074,23 @@ Object {
                 role="cell"
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
               >
-                1300
+                35
               </div>
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
                 role="cell"
                 style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
               >
-                1300
+                97
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+              >
+                <span>
+                  25
+                </span>
               </div>
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
@@ -34984,15 +35099,32 @@ Object {
                 role="cell"
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
               >
-                <span>
-                  1300
-                </span>
+                <button
+                  class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+                  data-state="closed"
+                  type="button"
+                >
+                  <svg
+                    class="text-moon-24 max-h-6"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 32 32"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                      stroke="currentColor"
+                      stroke-linecap="round"
+                    />
+                  </svg>
+                </button>
               </div>
             </div>
             <div
-              class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+              class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors first:rounded-es-none last:rounded-ee-none text-bulma bg-goku border-goku"
               role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+              style="display: flex; flex: 1 0 auto; min-width: 800px;"
             >
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
@@ -35000,12 +35132,46 @@ Object {
                 role="cell"
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
               >
-                <span
-                  style="cursor: pointer; padding-left: 0rem;"
-                  title="Toggle Row Expanded"
+                <div
+                  class="flex items-center gap-x-1 ps-12"
                 >
-                  👉
-                </span>
+                  <div
+                    class="flex items-center h-full"
+                  >
+                    <label
+                      class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
+                      for="any__unique__string__for__each__table_0.1.2"
+                    >
+                      <input
+                        aria-checked="false"
+                        aria-label="Checkbox"
+                        class="peer appearance-none h-6 w-6 outline-none align-top select-none"
+                        id="any__unique__string__for__each__table_0.1.2"
+                        type="checkbox"
+                      />
+                      <span
+                        aria-hidden="true"
+                        class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
+                      >
+                        <svg
+                          class="transition-opacity opacity-0"
+                          fill="none"
+                          height="1em"
+                          viewBox="0 0 32 32"
+                          width="1em"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M7 14.9412L13.6667 22L25 10"
+                            stroke="currentColor"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                          />
+                        </svg>
+                      </span>
+                    </label>
+                  </div>
+                </div>
               </div>
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
@@ -35014,7 +35180,7 @@ Object {
                 role="cell"
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
               >
-                Test
+                Sub test lvl3
               </div>
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
@@ -35022,7 +35188,7 @@ Object {
                 style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
               >
                 <span>
-                  420
+                  55
                 </span>
               </div>
               <div
@@ -35031,7 +35197,7 @@ Object {
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
               >
                 <span>
-                  1400
+                  54
                 </span>
               </div>
               <div
@@ -35039,14 +35205,23 @@ Object {
                 role="cell"
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
               >
-                1400
+                33
               </div>
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
                 role="cell"
                 style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
               >
-                1400
+                56
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+              >
+                <span>
+                  24
+                </span>
               </div>
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
@@ -35055,15 +35230,32 @@ Object {
                 role="cell"
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
               >
-                <span>
-                  1400
-                </span>
+                <button
+                  class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+                  data-state="closed"
+                  type="button"
+                >
+                  <svg
+                    class="text-moon-24 max-h-6"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 32 32"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                      stroke="currentColor"
+                      stroke-linecap="round"
+                    />
+                  </svg>
+                </button>
               </div>
             </div>
             <div
-              class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+              class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors first:rounded-es-none last:rounded-ee-none text-bulma bg-goku border-goku"
               role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+              style="display: flex; flex: 1 0 auto; min-width: 800px;"
             >
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
@@ -35071,12 +35263,52 @@ Object {
                 role="cell"
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
               >
-                <span
-                  style="cursor: pointer; padding-left: 0rem;"
-                  title="Toggle Row Expanded"
+                <div
+                  class="flex items-center gap-x-1 ps-6"
                 >
-                  👉
-                </span>
+                  <div
+                    class="flex items-center h-full"
+                  >
+                    <label
+                      class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
+                      for="any__unique__string__for__each__table_0.2"
+                    >
+                      <input
+                        aria-checked="false"
+                        aria-label="Checkbox"
+                        class="peer appearance-none h-6 w-6 outline-none align-top select-none"
+                        id="any__unique__string__for__each__table_0.2"
+                        type="checkbox"
+                      />
+                      <span
+                        aria-hidden="true"
+                        class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
+                      >
+                        <svg
+                          class="transition-opacity opacity-0"
+                          fill="none"
+                          height="1em"
+                          viewBox="0 0 32 32"
+                          width="1em"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M7 14.9412L13.6667 22L25 10"
+                            stroke="currentColor"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                          />
+                        </svg>
+                      </span>
+                    </label>
+                  </div>
+                  <span
+                    style="cursor: pointer;"
+                    title="Toggle Row Expanded"
+                  >
+                    👇
+                  </span>
+                </div>
               </div>
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
@@ -35085,7 +35317,7 @@ Object {
                 role="cell"
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
               >
-                Test
+                Sub test lvl2
               </div>
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
@@ -35093,7 +35325,7 @@ Object {
                 style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
               >
                 <span>
-                  450
+                  53
                 </span>
               </div>
               <div
@@ -35102,7 +35334,7 @@ Object {
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
               >
                 <span>
-                  1500
+                  63
                 </span>
               </div>
               <div
@@ -35110,14 +35342,23 @@ Object {
                 role="cell"
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
               >
-                1500
+                3
               </div>
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
                 role="cell"
                 style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
               >
-                1500
+                48
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+              >
+                <span>
+                  24
+                </span>
               </div>
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
@@ -35126,15 +35367,32 @@ Object {
                 role="cell"
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
               >
-                <span>
-                  1500
-                </span>
+                <button
+                  class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+                  data-state="closed"
+                  type="button"
+                >
+                  <svg
+                    class="text-moon-24 max-h-6"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 32 32"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                      stroke="currentColor"
+                      stroke-linecap="round"
+                    />
+                  </svg>
+                </button>
               </div>
             </div>
             <div
-              class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+              class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors first:rounded-es-none last:rounded-ee-none text-bulma bg-goku border-goku"
               role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+              style="display: flex; flex: 1 0 auto; min-width: 800px;"
             >
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
@@ -35142,12 +35400,46 @@ Object {
                 role="cell"
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
               >
-                <span
-                  style="cursor: pointer; padding-left: 0rem;"
-                  title="Toggle Row Expanded"
+                <div
+                  class="flex items-center gap-x-1 ps-12"
                 >
-                  👉
-                </span>
+                  <div
+                    class="flex items-center h-full"
+                  >
+                    <label
+                      class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
+                      for="any__unique__string__for__each__table_0.2.0"
+                    >
+                      <input
+                        aria-checked="false"
+                        aria-label="Checkbox"
+                        class="peer appearance-none h-6 w-6 outline-none align-top select-none"
+                        id="any__unique__string__for__each__table_0.2.0"
+                        type="checkbox"
+                      />
+                      <span
+                        aria-hidden="true"
+                        class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
+                      >
+                        <svg
+                          class="transition-opacity opacity-0"
+                          fill="none"
+                          height="1em"
+                          viewBox="0 0 32 32"
+                          width="1em"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M7 14.9412L13.6667 22L25 10"
+                            stroke="currentColor"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                          />
+                        </svg>
+                      </span>
+                    </label>
+                  </div>
+                </div>
               </div>
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
@@ -35156,7 +35448,7 @@ Object {
                 role="cell"
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
               >
-                Test
+                Sub test lvl3
               </div>
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
@@ -35164,7 +35456,7 @@ Object {
                 style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
               >
                 <span>
-                  480
+                  4
                 </span>
               </div>
               <div
@@ -35173,7 +35465,7 @@ Object {
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
               >
                 <span>
-                  1600
+                  653
                 </span>
               </div>
               <div
@@ -35181,14 +35473,23 @@ Object {
                 role="cell"
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
               >
-                1600
+                43
               </div>
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
                 role="cell"
                 style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
               >
-                1600
+                44
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+              >
+                <span>
+                  36
+                </span>
               </div>
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
@@ -35197,15 +35498,32 @@ Object {
                 role="cell"
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
               >
-                <span>
-                  1600
-                </span>
+                <button
+                  class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+                  data-state="closed"
+                  type="button"
+                >
+                  <svg
+                    class="text-moon-24 max-h-6"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 32 32"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                      stroke="currentColor"
+                      stroke-linecap="round"
+                    />
+                  </svg>
+                </button>
               </div>
             </div>
             <div
-              class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+              class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors first:rounded-es-none last:rounded-ee-none text-bulma bg-goku border-goku"
               role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+              style="display: flex; flex: 1 0 auto; min-width: 800px;"
             >
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
@@ -35213,12 +35531,46 @@ Object {
                 role="cell"
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
               >
-                <span
-                  style="cursor: pointer; padding-left: 0rem;"
-                  title="Toggle Row Expanded"
+                <div
+                  class="flex items-center gap-x-1 ps-12"
                 >
-                  👉
-                </span>
+                  <div
+                    class="flex items-center h-full"
+                  >
+                    <label
+                      class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
+                      for="any__unique__string__for__each__table_0.2.1"
+                    >
+                      <input
+                        aria-checked="false"
+                        aria-label="Checkbox"
+                        class="peer appearance-none h-6 w-6 outline-none align-top select-none"
+                        id="any__unique__string__for__each__table_0.2.1"
+                        type="checkbox"
+                      />
+                      <span
+                        aria-hidden="true"
+                        class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
+                      >
+                        <svg
+                          class="transition-opacity opacity-0"
+                          fill="none"
+                          height="1em"
+                          viewBox="0 0 32 32"
+                          width="1em"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M7 14.9412L13.6667 22L25 10"
+                            stroke="currentColor"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                          />
+                        </svg>
+                      </span>
+                    </label>
+                  </div>
+                </div>
               </div>
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
@@ -35227,7 +35579,7 @@ Object {
                 role="cell"
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
               >
-                Test
+                Sub test lvl3
               </div>
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
@@ -35235,7 +35587,7 @@ Object {
                 style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
               >
                 <span>
-                  510
+                  49
                 </span>
               </div>
               <div
@@ -35244,7 +35596,7 @@ Object {
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
               >
                 <span>
-                  1700
+                  45
                 </span>
               </div>
               <div
@@ -35252,35 +35604,3562 @@ Object {
                 role="cell"
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
               >
-                1700
+                4
               </div>
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
                 role="cell"
                 style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
               >
-                1700
+                35
               </div>
               <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
-                data-sticky-first-right-td="true"
-                data-sticky-td="true"
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
               >
                 <span>
-                  1700
+                  454
                 </span>
               </div>
-            </div>
-            <div
-              class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-              role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
-            >
               <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-                data-sticky-td="true"
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+                data-sticky-first-right-td="true"
+                data-sticky-td="true"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+              >
+                <button
+                  class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+                  data-state="closed"
+                  type="button"
+                >
+                  <svg
+                    class="text-moon-24 max-h-6"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 32 32"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                      stroke="currentColor"
+                      stroke-linecap="round"
+                    />
+                  </svg>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      dir="rtl"
+    >
+      <div
+        class="table-wrapper sm:overflow-auto overflow-scroll no-scrollbar flex flex-col sticky"
+        role="table"
+        style="width: 800px; height: 400px;"
+      >
+        <div
+          class="flex flex-col sticky top-0 z-[99]"
+        >
+          <div
+            class="flex rounded-moon-s-sm sticky"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
+          >
+            <div
+              class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+              colspan="1"
+              data-sticky-td="true"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            >
+              Expand/Select
+              <div
+                class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+                draggable="false"
+                role="separator"
+                style="cursor: col-resize;"
+              />
+            </div>
+            <div
+              class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+              colspan="1"
+              data-sticky-last-left-td="true"
+              data-sticky-td="true"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+            >
+              Name
+              <div
+                class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+                draggable="false"
+                role="separator"
+                style="cursor: col-resize;"
+              />
+            </div>
+            <div
+              class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+              colspan="5"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 650 0 auto; min-width: 500px; width: 650px; position: relative;"
+            >
+              Info
+              <div
+                class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+                draggable="false"
+                role="separator"
+                style="cursor: col-resize;"
+              />
+            </div>
+            <div
+              class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0"
+              colspan="1"
+              data-sticky-first-right-td="true"
+              data-sticky-td="true"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+            >
+              Actions
+              <div
+                class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+                draggable="false"
+                role="separator"
+                style="cursor: col-resize;"
+              />
+            </div>
+          </div>
+          <div
+            class="flex rounded-moon-s-sm sticky"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
+          >
+            <div
+              class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+              colspan="1"
+              data-sticky-td="true"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            >
+              <div
+                class="flex items-center gap-x-1"
+              >
+                <div
+                  class="flex items-center h-full"
+                >
+                  <label
+                    class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
+                    for="any__unique__string__for__each__table_root"
+                  >
+                    <input
+                      aria-checked="false"
+                      aria-label="Checkbox"
+                      class="peer appearance-none h-6 w-6 outline-none align-top select-none"
+                      id="any__unique__string__for__each__table_root"
+                      type="checkbox"
+                    />
+                    <span
+                      aria-hidden="true"
+                      class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
+                    >
+                      <svg
+                        class="transition-opacity opacity-0"
+                        fill="none"
+                        height="1em"
+                        viewBox="0 0 32 32"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 14.9412L13.6667 22L25 10"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                      </svg>
+                    </span>
+                  </label>
+                </div>
+                <span
+                  style="cursor: pointer;"
+                  title="Toggle All Rows Expanded"
+                >
+                  👇
+                </span>
+              </div>
+              <div
+                class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+                draggable="false"
+                role="separator"
+                style="cursor: col-resize;"
+              />
+            </div>
+            <div
+              class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+              colspan="1"
+              data-sticky-last-left-td="true"
+              data-sticky-td="true"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+            >
+              First Name
+              <div
+                class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+                draggable="false"
+                role="separator"
+                style="cursor: col-resize;"
+              />
+            </div>
+            <div
+              class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+              colspan="1"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px; position: relative;"
+            >
+              Age
+              <div
+                class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+                draggable="false"
+                role="separator"
+                style="cursor: col-resize;"
+              />
+            </div>
+            <div
+              class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+              colspan="1"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: relative;"
+            >
+              Visits
+              <div
+                class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+                draggable="false"
+                role="separator"
+                style="cursor: col-resize;"
+              />
+            </div>
+            <div
+              class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+              colspan="1"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: relative;"
+            >
+              Activity
+              <div
+                class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+                draggable="false"
+                role="separator"
+                style="cursor: col-resize;"
+              />
+            </div>
+            <div
+              class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+              colspan="1"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px; position: relative;"
+            >
+              Status
+              <div
+                class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+                draggable="false"
+                role="separator"
+                style="cursor: col-resize;"
+              />
+            </div>
+            <div
+              class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+              colspan="1"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: relative;"
+            >
+              Profile Progress
+              <div
+                class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+                draggable="false"
+                role="separator"
+                style="cursor: col-resize;"
+              />
+            </div>
+            <div
+              class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0"
+              colspan="1"
+              data-sticky-first-right-td="true"
+              data-sticky-td="true"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+            >
+              Actions
+              <div
+                class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+                draggable="false"
+                role="separator"
+                style="cursor: col-resize;"
+              />
+            </div>
+          </div>
+          <div
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
+          >
+            <div
+              class="relative"
+              colspan="1"
+              data-sticky-td="true"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            />
+            <div
+              class="relative"
+              colspan="1"
+              data-sticky-last-left-td="true"
+              data-sticky-td="true"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+            />
+            <div
+              class="relative"
+              colspan="1"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px; position: relative;"
+            />
+            <div
+              class="relative"
+              colspan="1"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: relative;"
+            />
+            <div
+              class="relative"
+              colspan="1"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: relative;"
+            />
+            <div
+              class="relative"
+              colspan="1"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px; position: relative;"
+            />
+            <div
+              class="relative"
+              colspan="1"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: relative;"
+            />
+            <div
+              class="relative"
+              colspan="1"
+              data-sticky-first-right-td="true"
+              data-sticky-td="true"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+            />
+          </div>
+        </div>
+        <div
+          class="flex flex-col relative z-0 no-scrollbar gap-1"
+          role="rowgroup"
+        >
+          <div
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors first:rounded-es-none last:rounded-ee-none text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
+          >
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            >
+              <div
+                class="flex items-center gap-x-1 ps-0"
+              >
+                <div
+                  class="flex items-center h-full"
+                >
+                  <label
+                    class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
+                    for="any__unique__string__for__each__table_0"
+                  >
+                    <input
+                      aria-checked="false"
+                      aria-label="Checkbox"
+                      class="peer appearance-none h-6 w-6 outline-none align-top select-none"
+                      id="any__unique__string__for__each__table_0"
+                      type="checkbox"
+                    />
+                    <span
+                      aria-hidden="true"
+                      class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
+                    >
+                      <svg
+                        class="transition-opacity opacity-0"
+                        fill="none"
+                        height="1em"
+                        viewBox="0 0 32 32"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 14.9412L13.6667 22L25 10"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                      </svg>
+                    </span>
+                  </label>
+                </div>
+                <span
+                  style="cursor: pointer;"
+                  title="Toggle Row Expanded"
+                >
+                  👇
+                </span>
+              </div>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              data-sticky-last-left-td="true"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+            >
+              Test lvl1
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                36
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              <span>
+                50
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              54
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              19
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              <span>
+                20
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+              data-sticky-first-right-td="true"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+            >
+              <button
+                class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+                data-state="closed"
+                type="button"
+              >
+                <svg
+                  class="text-moon-24 max-h-6"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 32 32"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                  />
+                </svg>
+              </button>
+            </div>
+          </div>
+          <div
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors first:rounded-es-none last:rounded-ee-none text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
+          >
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            >
+              <div
+                class="flex items-center gap-x-1 ps-6"
+              >
+                <div
+                  class="flex items-center h-full"
+                >
+                  <label
+                    class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
+                    for="any__unique__string__for__each__table_0.0"
+                  >
+                    <input
+                      aria-checked="false"
+                      aria-label="Checkbox"
+                      class="peer appearance-none h-6 w-6 outline-none align-top select-none"
+                      id="any__unique__string__for__each__table_0.0"
+                      type="checkbox"
+                    />
+                    <span
+                      aria-hidden="true"
+                      class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
+                    >
+                      <svg
+                        class="transition-opacity opacity-0"
+                        fill="none"
+                        height="1em"
+                        viewBox="0 0 32 32"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 14.9412L13.6667 22L25 10"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                      </svg>
+                    </span>
+                  </label>
+                </div>
+                <span
+                  style="cursor: pointer;"
+                  title="Toggle Row Expanded"
+                >
+                  👇
+                </span>
+              </div>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              data-sticky-last-left-td="true"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+            >
+              Sub test lvl2
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                96
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              <span>
+                8
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              23
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              97
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              <span>
+                2
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+              data-sticky-first-right-td="true"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+            >
+              <button
+                class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+                data-state="closed"
+                type="button"
+              >
+                <svg
+                  class="text-moon-24 max-h-6"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 32 32"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                  />
+                </svg>
+              </button>
+            </div>
+          </div>
+          <div
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors first:rounded-es-none last:rounded-ee-none text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
+          >
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            >
+              <div
+                class="flex items-center gap-x-1 ps-12"
+              >
+                <div
+                  class="flex items-center h-full"
+                >
+                  <label
+                    class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
+                    for="any__unique__string__for__each__table_0.0.0"
+                  >
+                    <input
+                      aria-checked="false"
+                      aria-label="Checkbox"
+                      class="peer appearance-none h-6 w-6 outline-none align-top select-none"
+                      id="any__unique__string__for__each__table_0.0.0"
+                      type="checkbox"
+                    />
+                    <span
+                      aria-hidden="true"
+                      class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
+                    >
+                      <svg
+                        class="transition-opacity opacity-0"
+                        fill="none"
+                        height="1em"
+                        viewBox="0 0 32 32"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 14.9412L13.6667 22L25 10"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                      </svg>
+                    </span>
+                  </label>
+                </div>
+              </div>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              data-sticky-last-left-td="true"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+            >
+              Sub test lvl3
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                63
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              <span>
+                82
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              46
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              52
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              <span>
+                59
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+              data-sticky-first-right-td="true"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+            >
+              <button
+                class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+                data-state="closed"
+                type="button"
+              >
+                <svg
+                  class="text-moon-24 max-h-6"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 32 32"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                  />
+                </svg>
+              </button>
+            </div>
+          </div>
+          <div
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors first:rounded-es-none last:rounded-ee-none text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
+          >
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            >
+              <div
+                class="flex items-center gap-x-1 ps-12"
+              >
+                <div
+                  class="flex items-center h-full"
+                >
+                  <label
+                    class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
+                    for="any__unique__string__for__each__table_0.0.1"
+                  >
+                    <input
+                      aria-checked="false"
+                      aria-label="Checkbox"
+                      class="peer appearance-none h-6 w-6 outline-none align-top select-none"
+                      id="any__unique__string__for__each__table_0.0.1"
+                      type="checkbox"
+                    />
+                    <span
+                      aria-hidden="true"
+                      class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
+                    >
+                      <svg
+                        class="transition-opacity opacity-0"
+                        fill="none"
+                        height="1em"
+                        viewBox="0 0 32 32"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 14.9412L13.6667 22L25 10"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                      </svg>
+                    </span>
+                  </label>
+                </div>
+              </div>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              data-sticky-last-left-td="true"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+            >
+              Sub test lvl3
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                64
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              <span>
+                35
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              5
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              65
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              <span>
+                78
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+              data-sticky-first-right-td="true"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+            >
+              <button
+                class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+                data-state="closed"
+                type="button"
+              >
+                <svg
+                  class="text-moon-24 max-h-6"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 32 32"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                  />
+                </svg>
+              </button>
+            </div>
+          </div>
+          <div
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors first:rounded-es-none last:rounded-ee-none text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
+          >
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            >
+              <div
+                class="flex items-center gap-x-1 ps-12"
+              >
+                <div
+                  class="flex items-center h-full"
+                >
+                  <label
+                    class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
+                    for="any__unique__string__for__each__table_0.0.2"
+                  >
+                    <input
+                      aria-checked="false"
+                      aria-label="Checkbox"
+                      class="peer appearance-none h-6 w-6 outline-none align-top select-none"
+                      id="any__unique__string__for__each__table_0.0.2"
+                      type="checkbox"
+                    />
+                    <span
+                      aria-hidden="true"
+                      class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
+                    >
+                      <svg
+                        class="transition-opacity opacity-0"
+                        fill="none"
+                        height="1em"
+                        viewBox="0 0 32 32"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 14.9412L13.6667 22L25 10"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                      </svg>
+                    </span>
+                  </label>
+                </div>
+              </div>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              data-sticky-last-left-td="true"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+            >
+              Sub test lvl3
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                12
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              <span>
+                4
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              5
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              98
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              <span>
+                44
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+              data-sticky-first-right-td="true"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+            >
+              <button
+                class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+                data-state="closed"
+                type="button"
+              >
+                <svg
+                  class="text-moon-24 max-h-6"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 32 32"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                  />
+                </svg>
+              </button>
+            </div>
+          </div>
+          <div
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors first:rounded-es-none last:rounded-ee-none text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
+          >
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            >
+              <div
+                class="flex items-center gap-x-1 ps-6"
+              >
+                <div
+                  class="flex items-center h-full"
+                >
+                  <label
+                    class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
+                    for="any__unique__string__for__each__table_0.1"
+                  >
+                    <input
+                      aria-checked="false"
+                      aria-label="Checkbox"
+                      class="peer appearance-none h-6 w-6 outline-none align-top select-none"
+                      id="any__unique__string__for__each__table_0.1"
+                      type="checkbox"
+                    />
+                    <span
+                      aria-hidden="true"
+                      class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
+                    >
+                      <svg
+                        class="transition-opacity opacity-0"
+                        fill="none"
+                        height="1em"
+                        viewBox="0 0 32 32"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 14.9412L13.6667 22L25 10"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                      </svg>
+                    </span>
+                  </label>
+                </div>
+                <span
+                  style="cursor: pointer;"
+                  title="Toggle Row Expanded"
+                >
+                  👇
+                </span>
+              </div>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              data-sticky-last-left-td="true"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+            >
+              Sub test lvl2
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                74
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              <span>
+                5
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              2
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              86
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              <span>
+                1
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+              data-sticky-first-right-td="true"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+            >
+              <button
+                class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+                data-state="closed"
+                type="button"
+              >
+                <svg
+                  class="text-moon-24 max-h-6"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 32 32"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                  />
+                </svg>
+              </button>
+            </div>
+          </div>
+          <div
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors first:rounded-es-none last:rounded-ee-none text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
+          >
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            >
+              <div
+                class="flex items-center gap-x-1 ps-12"
+              >
+                <div
+                  class="flex items-center h-full"
+                >
+                  <label
+                    class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
+                    for="any__unique__string__for__each__table_0.1.0"
+                  >
+                    <input
+                      aria-checked="false"
+                      aria-label="Checkbox"
+                      class="peer appearance-none h-6 w-6 outline-none align-top select-none"
+                      id="any__unique__string__for__each__table_0.1.0"
+                      type="checkbox"
+                    />
+                    <span
+                      aria-hidden="true"
+                      class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
+                    >
+                      <svg
+                        class="transition-opacity opacity-0"
+                        fill="none"
+                        height="1em"
+                        viewBox="0 0 32 32"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 14.9412L13.6667 22L25 10"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                      </svg>
+                    </span>
+                  </label>
+                </div>
+              </div>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              data-sticky-last-left-td="true"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+            >
+              Sub test lvl3
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                89
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              <span>
+                98
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              43
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              24
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              <span>
+                54
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+              data-sticky-first-right-td="true"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+            >
+              <button
+                class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+                data-state="closed"
+                type="button"
+              >
+                <svg
+                  class="text-moon-24 max-h-6"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 32 32"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                  />
+                </svg>
+              </button>
+            </div>
+          </div>
+          <div
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors first:rounded-es-none last:rounded-ee-none text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
+          >
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            >
+              <div
+                class="flex items-center gap-x-1 ps-12"
+              >
+                <div
+                  class="flex items-center h-full"
+                >
+                  <label
+                    class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
+                    for="any__unique__string__for__each__table_0.1.1"
+                  >
+                    <input
+                      aria-checked="false"
+                      aria-label="Checkbox"
+                      class="peer appearance-none h-6 w-6 outline-none align-top select-none"
+                      id="any__unique__string__for__each__table_0.1.1"
+                      type="checkbox"
+                    />
+                    <span
+                      aria-hidden="true"
+                      class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
+                    >
+                      <svg
+                        class="transition-opacity opacity-0"
+                        fill="none"
+                        height="1em"
+                        viewBox="0 0 32 32"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 14.9412L13.6667 22L25 10"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                      </svg>
+                    </span>
+                  </label>
+                </div>
+              </div>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              data-sticky-last-left-td="true"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+            >
+              Sub test lvl3
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                52
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              <span>
+                25
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              35
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              97
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              <span>
+                25
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+              data-sticky-first-right-td="true"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+            >
+              <button
+                class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+                data-state="closed"
+                type="button"
+              >
+                <svg
+                  class="text-moon-24 max-h-6"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 32 32"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                  />
+                </svg>
+              </button>
+            </div>
+          </div>
+          <div
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors first:rounded-es-none last:rounded-ee-none text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
+          >
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            >
+              <div
+                class="flex items-center gap-x-1 ps-12"
+              >
+                <div
+                  class="flex items-center h-full"
+                >
+                  <label
+                    class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
+                    for="any__unique__string__for__each__table_0.1.2"
+                  >
+                    <input
+                      aria-checked="false"
+                      aria-label="Checkbox"
+                      class="peer appearance-none h-6 w-6 outline-none align-top select-none"
+                      id="any__unique__string__for__each__table_0.1.2"
+                      type="checkbox"
+                    />
+                    <span
+                      aria-hidden="true"
+                      class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
+                    >
+                      <svg
+                        class="transition-opacity opacity-0"
+                        fill="none"
+                        height="1em"
+                        viewBox="0 0 32 32"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 14.9412L13.6667 22L25 10"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                      </svg>
+                    </span>
+                  </label>
+                </div>
+              </div>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              data-sticky-last-left-td="true"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+            >
+              Sub test lvl3
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                55
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              <span>
+                54
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              33
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              56
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              <span>
+                24
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+              data-sticky-first-right-td="true"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+            >
+              <button
+                class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+                data-state="closed"
+                type="button"
+              >
+                <svg
+                  class="text-moon-24 max-h-6"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 32 32"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                  />
+                </svg>
+              </button>
+            </div>
+          </div>
+          <div
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors first:rounded-es-none last:rounded-ee-none text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
+          >
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            >
+              <div
+                class="flex items-center gap-x-1 ps-6"
+              >
+                <div
+                  class="flex items-center h-full"
+                >
+                  <label
+                    class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
+                    for="any__unique__string__for__each__table_0.2"
+                  >
+                    <input
+                      aria-checked="false"
+                      aria-label="Checkbox"
+                      class="peer appearance-none h-6 w-6 outline-none align-top select-none"
+                      id="any__unique__string__for__each__table_0.2"
+                      type="checkbox"
+                    />
+                    <span
+                      aria-hidden="true"
+                      class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
+                    >
+                      <svg
+                        class="transition-opacity opacity-0"
+                        fill="none"
+                        height="1em"
+                        viewBox="0 0 32 32"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 14.9412L13.6667 22L25 10"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                      </svg>
+                    </span>
+                  </label>
+                </div>
+                <span
+                  style="cursor: pointer;"
+                  title="Toggle Row Expanded"
+                >
+                  👇
+                </span>
+              </div>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              data-sticky-last-left-td="true"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+            >
+              Sub test lvl2
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                53
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              <span>
+                63
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              3
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              48
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              <span>
+                24
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+              data-sticky-first-right-td="true"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+            >
+              <button
+                class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+                data-state="closed"
+                type="button"
+              >
+                <svg
+                  class="text-moon-24 max-h-6"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 32 32"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                  />
+                </svg>
+              </button>
+            </div>
+          </div>
+          <div
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors first:rounded-es-none last:rounded-ee-none text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
+          >
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            >
+              <div
+                class="flex items-center gap-x-1 ps-12"
+              >
+                <div
+                  class="flex items-center h-full"
+                >
+                  <label
+                    class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
+                    for="any__unique__string__for__each__table_0.2.0"
+                  >
+                    <input
+                      aria-checked="false"
+                      aria-label="Checkbox"
+                      class="peer appearance-none h-6 w-6 outline-none align-top select-none"
+                      id="any__unique__string__for__each__table_0.2.0"
+                      type="checkbox"
+                    />
+                    <span
+                      aria-hidden="true"
+                      class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
+                    >
+                      <svg
+                        class="transition-opacity opacity-0"
+                        fill="none"
+                        height="1em"
+                        viewBox="0 0 32 32"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 14.9412L13.6667 22L25 10"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                      </svg>
+                    </span>
+                  </label>
+                </div>
+              </div>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              data-sticky-last-left-td="true"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+            >
+              Sub test lvl3
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                4
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              <span>
+                653
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              43
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              44
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              <span>
+                36
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+              data-sticky-first-right-td="true"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+            >
+              <button
+                class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+                data-state="closed"
+                type="button"
+              >
+                <svg
+                  class="text-moon-24 max-h-6"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 32 32"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                  />
+                </svg>
+              </button>
+            </div>
+          </div>
+          <div
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors first:rounded-es-none last:rounded-ee-none text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
+          >
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            >
+              <div
+                class="flex items-center gap-x-1 ps-12"
+              >
+                <div
+                  class="flex items-center h-full"
+                >
+                  <label
+                    class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
+                    for="any__unique__string__for__each__table_0.2.1"
+                  >
+                    <input
+                      aria-checked="false"
+                      aria-label="Checkbox"
+                      class="peer appearance-none h-6 w-6 outline-none align-top select-none"
+                      id="any__unique__string__for__each__table_0.2.1"
+                      type="checkbox"
+                    />
+                    <span
+                      aria-hidden="true"
+                      class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
+                    >
+                      <svg
+                        class="transition-opacity opacity-0"
+                        fill="none"
+                        height="1em"
+                        viewBox="0 0 32 32"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 14.9412L13.6667 22L25 10"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                      </svg>
+                    </span>
+                  </label>
+                </div>
+              </div>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              data-sticky-last-left-td="true"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+            >
+              Sub test lvl3
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                49
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              <span>
+                45
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              4
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              35
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              <span>
+                454
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+              data-sticky-first-right-td="true"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+            >
+              <button
+                class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+                data-state="closed"
+                type="button"
+              >
+                <svg
+                  class="text-moon-24 max-h-6"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 32 32"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                  />
+                </svg>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`Table in RTL renders ExpandedRows 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        dir="rtl"
+      >
+        <div
+          class="table-wrapper sm:overflow-auto overflow-scroll no-scrollbar flex flex-col sticky"
+          role="table"
+          style="width: 800px; height: 400px;"
+        >
+          <div
+            class="flex flex-col sticky top-0 z-[99]"
+          >
+            <div
+              class="flex rounded-moon-s-sm sticky"
+              role="row"
+              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            >
+              <div
+                class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+                colspan="1"
+                data-sticky-td="true"
+                role="columnheader"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              >
+                Expand
+                <div
+                  class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+                  draggable="false"
+                  role="separator"
+                  style="cursor: col-resize;"
+                />
+              </div>
+              <div
+                class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+                colspan="1"
+                data-sticky-last-left-td="true"
+                data-sticky-td="true"
+                role="columnheader"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              >
+                Name
+                <div
+                  class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+                  draggable="false"
+                  role="separator"
+                  style="cursor: col-resize;"
+                />
+              </div>
+              <div
+                class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+                colspan="4"
+                role="columnheader"
+                style="box-sizing: border-box; flex: 500 0 auto; min-width: 400px; width: 500px; position: relative;"
+              >
+                Info
+                <div
+                  class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+                  draggable="false"
+                  role="separator"
+                  style="cursor: col-resize;"
+                />
+              </div>
+              <div
+                class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0"
+                colspan="1"
+                data-sticky-first-right-td="true"
+                data-sticky-td="true"
+                role="columnheader"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+              >
+                Progress
+                <div
+                  class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+                  draggable="false"
+                  role="separator"
+                  style="cursor: col-resize;"
+                />
+              </div>
+            </div>
+            <div
+              class="flex rounded-moon-s-sm sticky"
+              role="row"
+              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            >
+              <div
+                class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+                colspan="1"
+                data-sticky-td="true"
+                role="columnheader"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              >
+                <span
+                  style="cursor: pointer;"
+                  title="Toggle All Rows Expanded"
+                >
+                  👉
+                </span>
+                <div
+                  class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+                  draggable="false"
+                  role="separator"
+                  style="cursor: col-resize;"
+                />
+              </div>
+              <div
+                class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+                colspan="1"
+                data-sticky-last-left-td="true"
+                data-sticky-td="true"
+                role="columnheader"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              >
+                First Name
+                <div
+                  class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+                  draggable="false"
+                  role="separator"
+                  style="cursor: col-resize;"
+                />
+              </div>
+              <div
+                class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+                colspan="1"
+                role="columnheader"
+                style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px; position: relative;"
+              >
+                Age
+                <div
+                  class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+                  draggable="false"
+                  role="separator"
+                  style="cursor: col-resize;"
+                />
+              </div>
+              <div
+                class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+                colspan="1"
+                role="columnheader"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: relative;"
+              >
+                Visits
+                <div
+                  class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+                  draggable="false"
+                  role="separator"
+                  style="cursor: col-resize;"
+                />
+              </div>
+              <div
+                class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+                colspan="1"
+                role="columnheader"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: relative;"
+              >
+                Activity
+                <div
+                  class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+                  draggable="false"
+                  role="separator"
+                  style="cursor: col-resize;"
+                />
+              </div>
+              <div
+                class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+                colspan="1"
+                role="columnheader"
+                style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px; position: relative;"
+              >
+                Status
+                <div
+                  class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+                  draggable="false"
+                  role="separator"
+                  style="cursor: col-resize;"
+                />
+              </div>
+              <div
+                class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0"
+                colspan="1"
+                data-sticky-first-right-td="true"
+                data-sticky-td="true"
+                role="columnheader"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+              >
+                Profile Progress
+                <div
+                  class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+                  draggable="false"
+                  role="separator"
+                  style="cursor: col-resize;"
+                />
+              </div>
+            </div>
+            <div
+              role="row"
+              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            >
+              <div
+                class="relative"
+                colspan="1"
+                data-sticky-td="true"
+                role="columnheader"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              />
+              <div
+                class="relative"
+                colspan="1"
+                data-sticky-last-left-td="true"
+                data-sticky-td="true"
+                role="columnheader"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              />
+              <div
+                class="relative"
+                colspan="1"
+                role="columnheader"
+                style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px; position: relative;"
+              />
+              <div
+                class="relative"
+                colspan="1"
+                role="columnheader"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: relative;"
+              />
+              <div
+                class="relative"
+                colspan="1"
+                role="columnheader"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: relative;"
+              />
+              <div
+                class="relative"
+                colspan="1"
+                role="columnheader"
+                style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px; position: relative;"
+              />
+              <div
+                class="relative"
+                colspan="1"
+                data-sticky-first-right-td="true"
+                data-sticky-td="true"
+                role="columnheader"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+              />
+            </div>
+          </div>
+          <div
+            class="flex flex-col relative z-0 no-scrollbar gap-1"
+            role="rowgroup"
+          >
+            <div
+              class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+              role="row"
+              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            >
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+                data-sticky-td="true"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              >
+                <span
+                  style="cursor: pointer; padding-left: 0rem;"
+                  title="Toggle Row Expanded"
+                >
+                  👉
+                </span>
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                data-sticky-last-left-td="true"
+                data-sticky-td="true"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              >
+                Test
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              >
+                <span>
+                  0
+                </span>
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+              >
+                <span>
+                  0
+                </span>
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+              >
+                0
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              >
+                0
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+                data-sticky-first-right-td="true"
+                data-sticky-td="true"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+              >
+                <span>
+                  0
+                </span>
+              </div>
+            </div>
+            <div
+              class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+              role="row"
+              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            >
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+                data-sticky-td="true"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              >
+                <span
+                  style="cursor: pointer; padding-left: 0rem;"
+                  title="Toggle Row Expanded"
+                >
+                  👉
+                </span>
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                data-sticky-last-left-td="true"
+                data-sticky-td="true"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              >
+                Test
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              >
+                <span>
+                  30
+                </span>
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+              >
+                <span>
+                  100
+                </span>
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+              >
+                100
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              >
+                100
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+                data-sticky-first-right-td="true"
+                data-sticky-td="true"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+              >
+                <span>
+                  100
+                </span>
+              </div>
+            </div>
+            <div
+              class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+              role="row"
+              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            >
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+                data-sticky-td="true"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              >
+                <span
+                  style="cursor: pointer; padding-left: 0rem;"
+                  title="Toggle Row Expanded"
+                >
+                  👉
+                </span>
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                data-sticky-last-left-td="true"
+                data-sticky-td="true"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              >
+                Test
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              >
+                <span>
+                  60
+                </span>
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+              >
+                <span>
+                  200
+                </span>
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+              >
+                200
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              >
+                200
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+                data-sticky-first-right-td="true"
+                data-sticky-td="true"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+              >
+                <span>
+                  200
+                </span>
+              </div>
+            </div>
+            <div
+              class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+              role="row"
+              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            >
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+                data-sticky-td="true"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              >
+                <span
+                  style="cursor: pointer; padding-left: 0rem;"
+                  title="Toggle Row Expanded"
+                >
+                  👉
+                </span>
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                data-sticky-last-left-td="true"
+                data-sticky-td="true"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              >
+                Test
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              >
+                <span>
+                  90
+                </span>
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+              >
+                <span>
+                  300
+                </span>
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+              >
+                300
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              >
+                300
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+                data-sticky-first-right-td="true"
+                data-sticky-td="true"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+              >
+                <span>
+                  300
+                </span>
+              </div>
+            </div>
+            <div
+              class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+              role="row"
+              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            >
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+                data-sticky-td="true"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              >
+                <span
+                  style="cursor: pointer; padding-left: 0rem;"
+                  title="Toggle Row Expanded"
+                >
+                  👉
+                </span>
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                data-sticky-last-left-td="true"
+                data-sticky-td="true"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              >
+                Test
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              >
+                <span>
+                  120
+                </span>
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+              >
+                <span>
+                  400
+                </span>
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+              >
+                400
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              >
+                400
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+                data-sticky-first-right-td="true"
+                data-sticky-td="true"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+              >
+                <span>
+                  400
+                </span>
+              </div>
+            </div>
+            <div
+              class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+              role="row"
+              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            >
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+                data-sticky-td="true"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              >
+                <span
+                  style="cursor: pointer; padding-left: 0rem;"
+                  title="Toggle Row Expanded"
+                >
+                  👉
+                </span>
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                data-sticky-last-left-td="true"
+                data-sticky-td="true"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              >
+                Test
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              >
+                <span>
+                  150
+                </span>
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+              >
+                <span>
+                  500
+                </span>
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+              >
+                500
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              >
+                500
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+                data-sticky-first-right-td="true"
+                data-sticky-td="true"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+              >
+                <span>
+                  500
+                </span>
+              </div>
+            </div>
+            <div
+              class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+              role="row"
+              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            >
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+                data-sticky-td="true"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              >
+                <span
+                  style="cursor: pointer; padding-left: 0rem;"
+                  title="Toggle Row Expanded"
+                >
+                  👉
+                </span>
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                data-sticky-last-left-td="true"
+                data-sticky-td="true"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              >
+                Test
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              >
+                <span>
+                  180
+                </span>
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+              >
+                <span>
+                  600
+                </span>
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+              >
+                600
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              >
+                600
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+                data-sticky-first-right-td="true"
+                data-sticky-td="true"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+              >
+                <span>
+                  600
+                </span>
+              </div>
+            </div>
+            <div
+              class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+              role="row"
+              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            >
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+                data-sticky-td="true"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              >
+                <span
+                  style="cursor: pointer; padding-left: 0rem;"
+                  title="Toggle Row Expanded"
+                >
+                  👉
+                </span>
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                data-sticky-last-left-td="true"
+                data-sticky-td="true"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              >
+                Test
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              >
+                <span>
+                  210
+                </span>
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+              >
+                <span>
+                  700
+                </span>
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+              >
+                700
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              >
+                700
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+                data-sticky-first-right-td="true"
+                data-sticky-td="true"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+              >
+                <span>
+                  700
+                </span>
+              </div>
+            </div>
+            <div
+              class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+              role="row"
+              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            >
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+                data-sticky-td="true"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              >
+                <span
+                  style="cursor: pointer; padding-left: 0rem;"
+                  title="Toggle Row Expanded"
+                >
+                  👉
+                </span>
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                data-sticky-last-left-td="true"
+                data-sticky-td="true"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              >
+                Test
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              >
+                <span>
+                  240
+                </span>
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+              >
+                <span>
+                  800
+                </span>
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+              >
+                800
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              >
+                800
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+                data-sticky-first-right-td="true"
+                data-sticky-td="true"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+              >
+                <span>
+                  800
+                </span>
+              </div>
+            </div>
+            <div
+              class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+              role="row"
+              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            >
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+                data-sticky-td="true"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              >
+                <span
+                  style="cursor: pointer; padding-left: 0rem;"
+                  title="Toggle Row Expanded"
+                >
+                  👉
+                </span>
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                data-sticky-last-left-td="true"
+                data-sticky-td="true"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              >
+                Test
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              >
+                <span>
+                  270
+                </span>
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+              >
+                <span>
+                  900
+                </span>
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+              >
+                900
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              >
+                900
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+                data-sticky-first-right-td="true"
+                data-sticky-td="true"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+              >
+                <span>
+                  900
+                </span>
+              </div>
+            </div>
+            <div
+              class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+              role="row"
+              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            >
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+                data-sticky-td="true"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              >
+                <span
+                  style="cursor: pointer; padding-left: 0rem;"
+                  title="Toggle Row Expanded"
+                >
+                  👉
+                </span>
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                data-sticky-last-left-td="true"
+                data-sticky-td="true"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              >
+                Test
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              >
+                <span>
+                  300
+                </span>
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+              >
+                <span>
+                  1000
+                </span>
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+              >
+                1000
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              >
+                1000
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+                data-sticky-first-right-td="true"
+                data-sticky-td="true"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+              >
+                <span>
+                  1000
+                </span>
+              </div>
+            </div>
+            <div
+              class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+              role="row"
+              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            >
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+                data-sticky-td="true"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              >
+                <span
+                  style="cursor: pointer; padding-left: 0rem;"
+                  title="Toggle Row Expanded"
+                >
+                  👉
+                </span>
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                data-sticky-last-left-td="true"
+                data-sticky-td="true"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              >
+                Test
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              >
+                <span>
+                  330
+                </span>
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+              >
+                <span>
+                  1100
+                </span>
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+              >
+                1100
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              >
+                1100
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+                data-sticky-first-right-td="true"
+                data-sticky-td="true"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+              >
+                <span>
+                  1100
+                </span>
+              </div>
+            </div>
+            <div
+              class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+              role="row"
+              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            >
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+                data-sticky-td="true"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              >
+                <span
+                  style="cursor: pointer; padding-left: 0rem;"
+                  title="Toggle Row Expanded"
+                >
+                  👉
+                </span>
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                data-sticky-last-left-td="true"
+                data-sticky-td="true"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              >
+                Test
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              >
+                <span>
+                  360
+                </span>
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+              >
+                <span>
+                  1200
+                </span>
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+              >
+                1200
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              >
+                1200
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+                data-sticky-first-right-td="true"
+                data-sticky-td="true"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+              >
+                <span>
+                  1200
+                </span>
+              </div>
+            </div>
+            <div
+              class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+              role="row"
+              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            >
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+                data-sticky-td="true"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              >
+                <span
+                  style="cursor: pointer; padding-left: 0rem;"
+                  title="Toggle Row Expanded"
+                >
+                  👉
+                </span>
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                data-sticky-last-left-td="true"
+                data-sticky-td="true"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              >
+                Test
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              >
+                <span>
+                  390
+                </span>
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+              >
+                <span>
+                  1300
+                </span>
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+              >
+                1300
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              >
+                1300
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+                data-sticky-first-right-td="true"
+                data-sticky-td="true"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+              >
+                <span>
+                  1300
+                </span>
+              </div>
+            </div>
+            <div
+              class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+              role="row"
+              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            >
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+                data-sticky-td="true"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              >
+                <span
+                  style="cursor: pointer; padding-left: 0rem;"
+                  title="Toggle Row Expanded"
+                >
+                  👉
+                </span>
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                data-sticky-last-left-td="true"
+                data-sticky-td="true"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              >
+                Test
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              >
+                <span>
+                  420
+                </span>
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+              >
+                <span>
+                  1400
+                </span>
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+              >
+                1400
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              >
+                1400
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+                data-sticky-first-right-td="true"
+                data-sticky-td="true"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+              >
+                <span>
+                  1400
+                </span>
+              </div>
+            </div>
+            <div
+              class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+              role="row"
+              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            >
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+                data-sticky-td="true"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              >
+                <span
+                  style="cursor: pointer; padding-left: 0rem;"
+                  title="Toggle Row Expanded"
+                >
+                  👉
+                </span>
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                data-sticky-last-left-td="true"
+                data-sticky-td="true"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              >
+                Test
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              >
+                <span>
+                  450
+                </span>
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+              >
+                <span>
+                  1500
+                </span>
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+              >
+                1500
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              >
+                1500
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+                data-sticky-first-right-td="true"
+                data-sticky-td="true"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+              >
+                <span>
+                  1500
+                </span>
+              </div>
+            </div>
+            <div
+              class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+              role="row"
+              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            >
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+                data-sticky-td="true"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              >
+                <span
+                  style="cursor: pointer; padding-left: 0rem;"
+                  title="Toggle Row Expanded"
+                >
+                  👉
+                </span>
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                data-sticky-last-left-td="true"
+                data-sticky-td="true"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              >
+                Test
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              >
+                <span>
+                  480
+                </span>
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+              >
+                <span>
+                  1600
+                </span>
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+              >
+                1600
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              >
+                1600
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+                data-sticky-first-right-td="true"
+                data-sticky-td="true"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+              >
+                <span>
+                  1600
+                </span>
+              </div>
+            </div>
+            <div
+              class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+              role="row"
+              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            >
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+                data-sticky-td="true"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              >
+                <span
+                  style="cursor: pointer; padding-left: 0rem;"
+                  title="Toggle Row Expanded"
+                >
+                  👉
+                </span>
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                data-sticky-last-left-td="true"
+                data-sticky-td="true"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              >
+                Test
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              >
+                <span>
+                  510
+                </span>
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+              >
+                <span>
+                  1700
+                </span>
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+              >
+                1700
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              >
+                1700
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+                data-sticky-first-right-td="true"
+                data-sticky-td="true"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+              >
+                <span>
+                  1700
+                </span>
+              </div>
+            </div>
+            <div
+              class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+              role="row"
+              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            >
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+                data-sticky-td="true"
                 role="cell"
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
               >
@@ -63474,15 +67353,30 @@ Object {
             <div
               class="flex rounded-moon-s-sm sticky"
               role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+              style="display: flex; flex: 1 0 auto; min-width: 800px;"
             >
+              <div
+                class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+                colspan="1"
+                data-sticky-td="true"
+                role="columnheader"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              >
+                Select
+                <div
+                  class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+                  draggable="false"
+                  role="separator"
+                  style="cursor: col-resize;"
+                />
+              </div>
               <div
                 class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
                 colspan="2"
                 data-sticky-last-left-td="true"
                 data-sticky-td="true"
                 role="columnheader"
-                style="box-sizing: border-box; flex: 300 0 auto; min-width: 200px; width: 300px; position: sticky; z-index: 3; left: 0px;"
+                style="box-sizing: border-box; flex: 300 0 auto; min-width: 200px; width: 300px; position: sticky; z-index: 3; left: 150px;"
               >
                 Name
                 <div
@@ -63526,7 +67420,7 @@ Object {
             <div
               class="flex rounded-moon-s-sm sticky"
               role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+              style="display: flex; flex: 1 0 auto; min-width: 800px;"
             >
               <div
                 class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
@@ -63534,6 +67428,56 @@ Object {
                 data-sticky-td="true"
                 role="columnheader"
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              >
+                <div
+                  class="flex items-center h-full"
+                >
+                  <label
+                    class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
+                    for="any_unique_string_for_each_table_root"
+                  >
+                    <input
+                      aria-checked="false"
+                      aria-label="Checkbox"
+                      class="peer appearance-none h-6 w-6 outline-none align-top select-none"
+                      id="any_unique_string_for_each_table_root"
+                      type="checkbox"
+                    />
+                    <span
+                      aria-hidden="true"
+                      class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
+                    >
+                      <svg
+                        class="transition-opacity opacity-0"
+                        fill="none"
+                        height="1em"
+                        viewBox="0 0 32 32"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 14.9412L13.6667 22L25 10"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                      </svg>
+                    </span>
+                  </label>
+                </div>
+                <div
+                  class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+                  draggable="false"
+                  role="separator"
+                  style="cursor: col-resize;"
+                />
+              </div>
+              <div
+                class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+                colspan="1"
+                data-sticky-td="true"
+                role="columnheader"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
               >
                 First Name
                 <div
@@ -63549,7 +67493,7 @@ Object {
                 data-sticky-last-left-td="true"
                 data-sticky-td="true"
                 role="columnheader"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
               >
                 Last Name
                 <div
@@ -63634,7 +67578,7 @@ Object {
             </div>
             <div
               role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+              style="display: flex; flex: 1 0 auto; min-width: 800px;"
             >
               <div
                 class="relative"
@@ -63646,11 +67590,18 @@ Object {
               <div
                 class="relative"
                 colspan="1"
-                data-sticky-last-left-td="true"
                 data-sticky-td="true"
                 role="columnheader"
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
               />
+              <div
+                class="relative"
+                colspan="1"
+                data-sticky-last-left-td="true"
+                data-sticky-td="true"
+                role="columnheader"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
+              />
               <div
                 class="relative"
                 colspan="1"
@@ -63692,24 +67643,26 @@ Object {
             <div
               class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
               role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+              style="display: flex; flex: 1 0 auto; min-width: 800px;"
             >
               <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+                data-sticky-td="true"
                 role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
               >
                 <div
-                  class="flex items-center h-full w-full justify-center ps-2"
+                  class="flex items-center h-full"
                 >
                   <label
                     class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                    for="0"
+                    for="any_unique_string_for_each_table_0"
                   >
                     <input
                       aria-checked="false"
                       aria-label="Checkbox"
                       class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                      id="0"
+                      id="any_unique_string_for_each_table_0"
                       type="checkbox"
                     />
                     <span
@@ -63739,7 +67692,7 @@ Object {
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
               >
                 Test
               </div>
@@ -63748,7 +67701,7 @@ Object {
                 data-sticky-last-left-td="true"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
               >
                 Test
               </div>
@@ -63799,24 +67752,26 @@ Object {
             <div
               class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
               role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+              style="display: flex; flex: 1 0 auto; min-width: 800px;"
             >
               <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+                data-sticky-td="true"
                 role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
               >
                 <div
-                  class="flex items-center h-full w-full justify-center ps-2"
+                  class="flex items-center h-full"
                 >
                   <label
                     class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                    for="1"
+                    for="any_unique_string_for_each_table_1"
                   >
                     <input
                       aria-checked="false"
                       aria-label="Checkbox"
                       class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                      id="1"
+                      id="any_unique_string_for_each_table_1"
                       type="checkbox"
                     />
                     <span
@@ -63846,7 +67801,7 @@ Object {
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
               >
                 Test
               </div>
@@ -63855,7 +67810,7 @@ Object {
                 data-sticky-last-left-td="true"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
               >
                 Test
               </div>
@@ -63906,24 +67861,26 @@ Object {
             <div
               class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
               role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+              style="display: flex; flex: 1 0 auto; min-width: 800px;"
             >
               <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+                data-sticky-td="true"
                 role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
               >
                 <div
-                  class="flex items-center h-full w-full justify-center ps-2"
+                  class="flex items-center h-full"
                 >
                   <label
                     class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                    for="2"
+                    for="any_unique_string_for_each_table_2"
                   >
                     <input
                       aria-checked="false"
                       aria-label="Checkbox"
                       class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                      id="2"
+                      id="any_unique_string_for_each_table_2"
                       type="checkbox"
                     />
                     <span
@@ -63953,7 +67910,7 @@ Object {
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
               >
                 Test
               </div>
@@ -63962,7 +67919,7 @@ Object {
                 data-sticky-last-left-td="true"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
               >
                 Test
               </div>
@@ -64013,24 +67970,26 @@ Object {
             <div
               class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
               role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+              style="display: flex; flex: 1 0 auto; min-width: 800px;"
             >
               <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+                data-sticky-td="true"
                 role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
               >
                 <div
-                  class="flex items-center h-full w-full justify-center ps-2"
+                  class="flex items-center h-full"
                 >
                   <label
                     class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                    for="3"
+                    for="any_unique_string_for_each_table_3"
                   >
                     <input
                       aria-checked="false"
                       aria-label="Checkbox"
                       class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                      id="3"
+                      id="any_unique_string_for_each_table_3"
                       type="checkbox"
                     />
                     <span
@@ -64060,7 +68019,7 @@ Object {
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
               >
                 Test
               </div>
@@ -64069,7 +68028,7 @@ Object {
                 data-sticky-last-left-td="true"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
               >
                 Test
               </div>
@@ -64120,24 +68079,26 @@ Object {
             <div
               class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
               role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+              style="display: flex; flex: 1 0 auto; min-width: 800px;"
             >
               <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+                data-sticky-td="true"
                 role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
               >
                 <div
-                  class="flex items-center h-full w-full justify-center ps-2"
+                  class="flex items-center h-full"
                 >
                   <label
                     class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                    for="4"
+                    for="any_unique_string_for_each_table_4"
                   >
                     <input
                       aria-checked="false"
                       aria-label="Checkbox"
                       class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                      id="4"
+                      id="any_unique_string_for_each_table_4"
                       type="checkbox"
                     />
                     <span
@@ -64167,7 +68128,7 @@ Object {
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
               >
                 Test
               </div>
@@ -64176,7 +68137,7 @@ Object {
                 data-sticky-last-left-td="true"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
               >
                 Test
               </div>
@@ -64227,238 +68188,26 @@ Object {
             <div
               class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
               role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
-            >
-              <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
-                role="cell"
-              >
-                <div
-                  class="flex items-center h-full w-full justify-center ps-2"
-                >
-                  <label
-                    class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                    for="5"
-                  >
-                    <input
-                      aria-checked="false"
-                      aria-label="Checkbox"
-                      class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                      id="5"
-                      type="checkbox"
-                    />
-                    <span
-                      aria-hidden="true"
-                      class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
-                    >
-                      <svg
-                        class="transition-opacity opacity-0"
-                        fill="none"
-                        height="1em"
-                        viewBox="0 0 32 32"
-                        width="1em"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M7 14.9412L13.6667 22L25 10"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                        />
-                      </svg>
-                    </span>
-                  </label>
-                </div>
-              </div>
-              <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-                data-sticky-td="true"
-                role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
-              >
-                Test
-              </div>
-              <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-                data-sticky-last-left-td="true"
-                data-sticky-td="true"
-                role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
-              >
-                Test
-              </div>
-              <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-                role="cell"
-                style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-              >
-                <span>
-                  150
-                </span>
-              </div>
-              <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-                role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-              >
-                <span>
-                  500
-                </span>
-              </div>
-              <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-                role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-              >
-                500
-              </div>
-              <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-                role="cell"
-                style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-              >
-                500
-              </div>
-              <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
-                data-sticky-first-right-td="true"
-                data-sticky-td="true"
-                role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
-              >
-                <span>
-                  500
-                </span>
-              </div>
-            </div>
-            <div
-              class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-              role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+              style="display: flex; flex: 1 0 auto; min-width: 800px;"
             >
               <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
-                role="cell"
-              >
-                <div
-                  class="flex items-center h-full w-full justify-center ps-2"
-                >
-                  <label
-                    class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                    for="6"
-                  >
-                    <input
-                      aria-checked="false"
-                      aria-label="Checkbox"
-                      class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                      id="6"
-                      type="checkbox"
-                    />
-                    <span
-                      aria-hidden="true"
-                      class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
-                    >
-                      <svg
-                        class="transition-opacity opacity-0"
-                        fill="none"
-                        height="1em"
-                        viewBox="0 0 32 32"
-                        width="1em"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M7 14.9412L13.6667 22L25 10"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                        />
-                      </svg>
-                    </span>
-                  </label>
-                </div>
-              </div>
-              <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
                 data-sticky-td="true"
                 role="cell"
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
-              >
-                Test
-              </div>
-              <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-                data-sticky-last-left-td="true"
-                data-sticky-td="true"
-                role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
-              >
-                Test
-              </div>
-              <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-                role="cell"
-                style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-              >
-                <span>
-                  180
-                </span>
-              </div>
-              <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-                role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-              >
-                <span>
-                  600
-                </span>
-              </div>
-              <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-                role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-              >
-                600
-              </div>
-              <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-                role="cell"
-                style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-              >
-                600
-              </div>
-              <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
-                data-sticky-first-right-td="true"
-                data-sticky-td="true"
-                role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
-              >
-                <span>
-                  600
-                </span>
-              </div>
-            </div>
-            <div
-              class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-              role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
-            >
-              <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
-                role="cell"
               >
                 <div
-                  class="flex items-center h-full w-full justify-center ps-2"
+                  class="flex items-center h-full"
                 >
                   <label
                     class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                    for="7"
+                    for="any_unique_string_for_each_table_5"
                   >
                     <input
                       aria-checked="false"
                       aria-label="Checkbox"
                       class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                      id="7"
+                      id="any_unique_string_for_each_table_5"
                       type="checkbox"
                     />
                     <span
@@ -64488,7 +68237,116 @@ Object {
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
                 data-sticky-td="true"
                 role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              >
+                Test
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                data-sticky-last-left-td="true"
+                data-sticky-td="true"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
+              >
+                Test
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              >
+                <span>
+                  150
+                </span>
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+              >
+                <span>
+                  500
+                </span>
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+              >
+                500
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              >
+                500
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+                data-sticky-first-right-td="true"
+                data-sticky-td="true"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+              >
+                <span>
+                  500
+                </span>
+              </div>
+            </div>
+            <div
+              class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+              role="row"
+              style="display: flex; flex: 1 0 auto; min-width: 800px;"
+            >
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+                data-sticky-td="true"
+                role="cell"
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              >
+                <div
+                  class="flex items-center h-full"
+                >
+                  <label
+                    class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
+                    for="any_unique_string_for_each_table_6"
+                  >
+                    <input
+                      aria-checked="false"
+                      aria-label="Checkbox"
+                      class="peer appearance-none h-6 w-6 outline-none align-top select-none"
+                      id="any_unique_string_for_each_table_6"
+                      type="checkbox"
+                    />
+                    <span
+                      aria-hidden="true"
+                      class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
+                    >
+                      <svg
+                        class="transition-opacity opacity-0"
+                        fill="none"
+                        height="1em"
+                        viewBox="0 0 32 32"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 14.9412L13.6667 22L25 10"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                      </svg>
+                    </span>
+                  </label>
+                </div>
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                data-sticky-td="true"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
               >
                 Test
               </div>
@@ -64497,10 +68355,119 @@ Object {
                 data-sticky-last-left-td="true"
                 data-sticky-td="true"
                 role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
+              >
+                Test
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              >
+                <span>
+                  180
+                </span>
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+              >
+                <span>
+                  600
+                </span>
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+              >
+                600
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                role="cell"
+                style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              >
+                600
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+                data-sticky-first-right-td="true"
+                data-sticky-td="true"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+              >
+                <span>
+                  600
+                </span>
+              </div>
+            </div>
+            <div
+              class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+              role="row"
+              style="display: flex; flex: 1 0 auto; min-width: 800px;"
+            >
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+                data-sticky-td="true"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              >
+                <div
+                  class="flex items-center h-full"
+                >
+                  <label
+                    class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
+                    for="any_unique_string_for_each_table_7"
+                  >
+                    <input
+                      aria-checked="false"
+                      aria-label="Checkbox"
+                      class="peer appearance-none h-6 w-6 outline-none align-top select-none"
+                      id="any_unique_string_for_each_table_7"
+                      type="checkbox"
+                    />
+                    <span
+                      aria-hidden="true"
+                      class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
+                    >
+                      <svg
+                        class="transition-opacity opacity-0"
+                        fill="none"
+                        height="1em"
+                        viewBox="0 0 32 32"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 14.9412L13.6667 22L25 10"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                      </svg>
+                    </span>
+                  </label>
+                </div>
+              </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                data-sticky-td="true"
+                role="cell"
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
               >
                 Test
               </div>
+              <div
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+                data-sticky-last-left-td="true"
+                data-sticky-td="true"
+                role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
+              >
+                Test
+              </div>
               <div
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
                 role="cell"
@@ -64548,24 +68515,26 @@ Object {
             <div
               class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
               role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+              style="display: flex; flex: 1 0 auto; min-width: 800px;"
             >
               <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+                data-sticky-td="true"
                 role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
               >
                 <div
-                  class="flex items-center h-full w-full justify-center ps-2"
+                  class="flex items-center h-full"
                 >
                   <label
                     class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                    for="8"
+                    for="any_unique_string_for_each_table_8"
                   >
                     <input
                       aria-checked="false"
                       aria-label="Checkbox"
                       class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                      id="8"
+                      id="any_unique_string_for_each_table_8"
                       type="checkbox"
                     />
                     <span
@@ -64595,7 +68564,7 @@ Object {
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
               >
                 Test
               </div>
@@ -64604,7 +68573,7 @@ Object {
                 data-sticky-last-left-td="true"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
               >
                 Test
               </div>
@@ -64655,24 +68624,26 @@ Object {
             <div
               class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
               role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+              style="display: flex; flex: 1 0 auto; min-width: 800px;"
             >
               <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+                data-sticky-td="true"
                 role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
               >
                 <div
-                  class="flex items-center h-full w-full justify-center ps-2"
+                  class="flex items-center h-full"
                 >
                   <label
                     class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                    for="9"
+                    for="any_unique_string_for_each_table_9"
                   >
                     <input
                       aria-checked="false"
                       aria-label="Checkbox"
                       class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                      id="9"
+                      id="any_unique_string_for_each_table_9"
                       type="checkbox"
                     />
                     <span
@@ -64702,7 +68673,7 @@ Object {
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
               >
                 Test
               </div>
@@ -64711,7 +68682,7 @@ Object {
                 data-sticky-last-left-td="true"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
               >
                 Test
               </div>
@@ -64762,24 +68733,26 @@ Object {
             <div
               class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
               role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+              style="display: flex; flex: 1 0 auto; min-width: 800px;"
             >
               <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+                data-sticky-td="true"
                 role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
               >
                 <div
-                  class="flex items-center h-full w-full justify-center ps-2"
+                  class="flex items-center h-full"
                 >
                   <label
                     class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                    for="10"
+                    for="any_unique_string_for_each_table_10"
                   >
                     <input
                       aria-checked="false"
                       aria-label="Checkbox"
                       class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                      id="10"
+                      id="any_unique_string_for_each_table_10"
                       type="checkbox"
                     />
                     <span
@@ -64809,7 +68782,7 @@ Object {
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
               >
                 Test
               </div>
@@ -64818,7 +68791,7 @@ Object {
                 data-sticky-last-left-td="true"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
               >
                 Test
               </div>
@@ -64869,24 +68842,26 @@ Object {
             <div
               class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
               role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+              style="display: flex; flex: 1 0 auto; min-width: 800px;"
             >
               <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+                data-sticky-td="true"
                 role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
               >
                 <div
-                  class="flex items-center h-full w-full justify-center ps-2"
+                  class="flex items-center h-full"
                 >
                   <label
                     class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                    for="11"
+                    for="any_unique_string_for_each_table_11"
                   >
                     <input
                       aria-checked="false"
                       aria-label="Checkbox"
                       class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                      id="11"
+                      id="any_unique_string_for_each_table_11"
                       type="checkbox"
                     />
                     <span
@@ -64916,7 +68891,7 @@ Object {
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
               >
                 Test
               </div>
@@ -64925,7 +68900,7 @@ Object {
                 data-sticky-last-left-td="true"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
               >
                 Test
               </div>
@@ -64976,24 +68951,26 @@ Object {
             <div
               class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
               role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+              style="display: flex; flex: 1 0 auto; min-width: 800px;"
             >
               <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+                data-sticky-td="true"
                 role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
               >
                 <div
-                  class="flex items-center h-full w-full justify-center ps-2"
+                  class="flex items-center h-full"
                 >
                   <label
                     class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                    for="12"
+                    for="any_unique_string_for_each_table_12"
                   >
                     <input
                       aria-checked="false"
                       aria-label="Checkbox"
                       class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                      id="12"
+                      id="any_unique_string_for_each_table_12"
                       type="checkbox"
                     />
                     <span
@@ -65023,7 +69000,7 @@ Object {
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
               >
                 Test
               </div>
@@ -65032,7 +69009,7 @@ Object {
                 data-sticky-last-left-td="true"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
               >
                 Test
               </div>
@@ -65083,24 +69060,26 @@ Object {
             <div
               class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
               role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+              style="display: flex; flex: 1 0 auto; min-width: 800px;"
             >
               <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+                data-sticky-td="true"
                 role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
               >
                 <div
-                  class="flex items-center h-full w-full justify-center ps-2"
+                  class="flex items-center h-full"
                 >
                   <label
                     class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                    for="13"
+                    for="any_unique_string_for_each_table_13"
                   >
                     <input
                       aria-checked="false"
                       aria-label="Checkbox"
                       class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                      id="13"
+                      id="any_unique_string_for_each_table_13"
                       type="checkbox"
                     />
                     <span
@@ -65130,7 +69109,7 @@ Object {
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
               >
                 Test
               </div>
@@ -65139,7 +69118,7 @@ Object {
                 data-sticky-last-left-td="true"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
               >
                 Test
               </div>
@@ -65190,24 +69169,26 @@ Object {
             <div
               class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
               role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+              style="display: flex; flex: 1 0 auto; min-width: 800px;"
             >
               <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+                data-sticky-td="true"
                 role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
               >
                 <div
-                  class="flex items-center h-full w-full justify-center ps-2"
+                  class="flex items-center h-full"
                 >
                   <label
                     class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                    for="14"
+                    for="any_unique_string_for_each_table_14"
                   >
                     <input
                       aria-checked="false"
                       aria-label="Checkbox"
                       class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                      id="14"
+                      id="any_unique_string_for_each_table_14"
                       type="checkbox"
                     />
                     <span
@@ -65237,7 +69218,7 @@ Object {
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
               >
                 Test
               </div>
@@ -65246,7 +69227,7 @@ Object {
                 data-sticky-last-left-td="true"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
               >
                 Test
               </div>
@@ -65297,24 +69278,26 @@ Object {
             <div
               class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
               role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+              style="display: flex; flex: 1 0 auto; min-width: 800px;"
             >
               <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+                data-sticky-td="true"
                 role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
               >
                 <div
-                  class="flex items-center h-full w-full justify-center ps-2"
+                  class="flex items-center h-full"
                 >
                   <label
                     class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                    for="15"
+                    for="any_unique_string_for_each_table_15"
                   >
                     <input
                       aria-checked="false"
                       aria-label="Checkbox"
                       class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                      id="15"
+                      id="any_unique_string_for_each_table_15"
                       type="checkbox"
                     />
                     <span
@@ -65344,7 +69327,7 @@ Object {
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
               >
                 Test
               </div>
@@ -65353,7 +69336,7 @@ Object {
                 data-sticky-last-left-td="true"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
               >
                 Test
               </div>
@@ -65404,24 +69387,26 @@ Object {
             <div
               class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
               role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+              style="display: flex; flex: 1 0 auto; min-width: 800px;"
             >
               <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+                data-sticky-td="true"
                 role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
               >
                 <div
-                  class="flex items-center h-full w-full justify-center ps-2"
+                  class="flex items-center h-full"
                 >
                   <label
                     class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                    for="16"
+                    for="any_unique_string_for_each_table_16"
                   >
                     <input
                       aria-checked="false"
                       aria-label="Checkbox"
                       class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                      id="16"
+                      id="any_unique_string_for_each_table_16"
                       type="checkbox"
                     />
                     <span
@@ -65451,7 +69436,7 @@ Object {
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
               >
                 Test
               </div>
@@ -65460,7 +69445,7 @@ Object {
                 data-sticky-last-left-td="true"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
               >
                 Test
               </div>
@@ -65511,24 +69496,26 @@ Object {
             <div
               class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
               role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+              style="display: flex; flex: 1 0 auto; min-width: 800px;"
             >
               <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+                data-sticky-td="true"
                 role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
               >
                 <div
-                  class="flex items-center h-full w-full justify-center ps-2"
+                  class="flex items-center h-full"
                 >
                   <label
                     class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                    for="17"
+                    for="any_unique_string_for_each_table_17"
                   >
                     <input
                       aria-checked="false"
                       aria-label="Checkbox"
                       class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                      id="17"
+                      id="any_unique_string_for_each_table_17"
                       type="checkbox"
                     />
                     <span
@@ -65558,7 +69545,7 @@ Object {
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
               >
                 Test
               </div>
@@ -65567,7 +69554,7 @@ Object {
                 data-sticky-last-left-td="true"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
               >
                 Test
               </div>
@@ -65618,24 +69605,26 @@ Object {
             <div
               class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
               role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+              style="display: flex; flex: 1 0 auto; min-width: 800px;"
             >
               <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+                data-sticky-td="true"
                 role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
               >
                 <div
-                  class="flex items-center h-full w-full justify-center ps-2"
+                  class="flex items-center h-full"
                 >
                   <label
                     class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                    for="18"
+                    for="any_unique_string_for_each_table_18"
                   >
                     <input
                       aria-checked="false"
                       aria-label="Checkbox"
                       class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                      id="18"
+                      id="any_unique_string_for_each_table_18"
                       type="checkbox"
                     />
                     <span
@@ -65665,7 +69654,7 @@ Object {
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
               >
                 Test
               </div>
@@ -65674,7 +69663,7 @@ Object {
                 data-sticky-last-left-td="true"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
               >
                 Test
               </div>
@@ -65725,24 +69714,26 @@ Object {
             <div
               class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
               role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+              style="display: flex; flex: 1 0 auto; min-width: 800px;"
             >
               <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+                data-sticky-td="true"
                 role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
               >
                 <div
-                  class="flex items-center h-full w-full justify-center ps-2"
+                  class="flex items-center h-full"
                 >
                   <label
                     class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                    for="19"
+                    for="any_unique_string_for_each_table_19"
                   >
                     <input
                       aria-checked="false"
                       aria-label="Checkbox"
                       class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                      id="19"
+                      id="any_unique_string_for_each_table_19"
                       type="checkbox"
                     />
                     <span
@@ -65772,7 +69763,7 @@ Object {
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
               >
                 Test
               </div>
@@ -65781,7 +69772,7 @@ Object {
                 data-sticky-last-left-td="true"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
               >
                 Test
               </div>
@@ -65832,24 +69823,26 @@ Object {
             <div
               class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
               role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+              style="display: flex; flex: 1 0 auto; min-width: 800px;"
             >
               <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+                data-sticky-td="true"
                 role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
               >
                 <div
-                  class="flex items-center h-full w-full justify-center ps-2"
+                  class="flex items-center h-full"
                 >
                   <label
                     class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                    for="20"
+                    for="any_unique_string_for_each_table_20"
                   >
                     <input
                       aria-checked="false"
                       aria-label="Checkbox"
                       class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                      id="20"
+                      id="any_unique_string_for_each_table_20"
                       type="checkbox"
                     />
                     <span
@@ -65879,7 +69872,7 @@ Object {
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
               >
                 Test
               </div>
@@ -65888,7 +69881,7 @@ Object {
                 data-sticky-last-left-td="true"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
               >
                 Test
               </div>
@@ -65939,24 +69932,26 @@ Object {
             <div
               class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
               role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+              style="display: flex; flex: 1 0 auto; min-width: 800px;"
             >
               <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+                data-sticky-td="true"
                 role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
               >
                 <div
-                  class="flex items-center h-full w-full justify-center ps-2"
+                  class="flex items-center h-full"
                 >
                   <label
                     class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                    for="21"
+                    for="any_unique_string_for_each_table_21"
                   >
                     <input
                       aria-checked="false"
                       aria-label="Checkbox"
                       class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                      id="21"
+                      id="any_unique_string_for_each_table_21"
                       type="checkbox"
                     />
                     <span
@@ -65986,7 +69981,7 @@ Object {
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
               >
                 Test
               </div>
@@ -65995,7 +69990,7 @@ Object {
                 data-sticky-last-left-td="true"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
               >
                 Test
               </div>
@@ -66046,24 +70041,26 @@ Object {
             <div
               class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
               role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+              style="display: flex; flex: 1 0 auto; min-width: 800px;"
             >
               <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+                data-sticky-td="true"
                 role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
               >
                 <div
-                  class="flex items-center h-full w-full justify-center ps-2"
+                  class="flex items-center h-full"
                 >
                   <label
                     class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                    for="22"
+                    for="any_unique_string_for_each_table_22"
                   >
                     <input
                       aria-checked="false"
                       aria-label="Checkbox"
                       class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                      id="22"
+                      id="any_unique_string_for_each_table_22"
                       type="checkbox"
                     />
                     <span
@@ -66093,7 +70090,7 @@ Object {
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
               >
                 Test
               </div>
@@ -66102,7 +70099,7 @@ Object {
                 data-sticky-last-left-td="true"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
               >
                 Test
               </div>
@@ -66153,24 +70150,26 @@ Object {
             <div
               class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
               role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+              style="display: flex; flex: 1 0 auto; min-width: 800px;"
             >
               <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+                data-sticky-td="true"
                 role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
               >
                 <div
-                  class="flex items-center h-full w-full justify-center ps-2"
+                  class="flex items-center h-full"
                 >
                   <label
                     class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                    for="23"
+                    for="any_unique_string_for_each_table_23"
                   >
                     <input
                       aria-checked="false"
                       aria-label="Checkbox"
                       class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                      id="23"
+                      id="any_unique_string_for_each_table_23"
                       type="checkbox"
                     />
                     <span
@@ -66200,7 +70199,7 @@ Object {
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
               >
                 Test
               </div>
@@ -66209,7 +70208,7 @@ Object {
                 data-sticky-last-left-td="true"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
               >
                 Test
               </div>
@@ -66260,24 +70259,26 @@ Object {
             <div
               class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
               role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+              style="display: flex; flex: 1 0 auto; min-width: 800px;"
             >
               <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+                data-sticky-td="true"
                 role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
               >
                 <div
-                  class="flex items-center h-full w-full justify-center ps-2"
+                  class="flex items-center h-full"
                 >
                   <label
                     class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                    for="24"
+                    for="any_unique_string_for_each_table_24"
                   >
                     <input
                       aria-checked="false"
                       aria-label="Checkbox"
                       class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                      id="24"
+                      id="any_unique_string_for_each_table_24"
                       type="checkbox"
                     />
                     <span
@@ -66307,7 +70308,7 @@ Object {
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
               >
                 Test
               </div>
@@ -66316,7 +70317,7 @@ Object {
                 data-sticky-last-left-td="true"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
               >
                 Test
               </div>
@@ -66367,24 +70368,26 @@ Object {
             <div
               class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
               role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+              style="display: flex; flex: 1 0 auto; min-width: 800px;"
             >
               <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+                data-sticky-td="true"
                 role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
               >
                 <div
-                  class="flex items-center h-full w-full justify-center ps-2"
+                  class="flex items-center h-full"
                 >
                   <label
                     class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                    for="25"
+                    for="any_unique_string_for_each_table_25"
                   >
                     <input
                       aria-checked="false"
                       aria-label="Checkbox"
                       class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                      id="25"
+                      id="any_unique_string_for_each_table_25"
                       type="checkbox"
                     />
                     <span
@@ -66414,7 +70417,7 @@ Object {
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
               >
                 Test
               </div>
@@ -66423,7 +70426,7 @@ Object {
                 data-sticky-last-left-td="true"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
               >
                 Test
               </div>
@@ -66474,24 +70477,26 @@ Object {
             <div
               class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
               role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+              style="display: flex; flex: 1 0 auto; min-width: 800px;"
             >
               <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+                data-sticky-td="true"
                 role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
               >
                 <div
-                  class="flex items-center h-full w-full justify-center ps-2"
+                  class="flex items-center h-full"
                 >
                   <label
                     class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                    for="26"
+                    for="any_unique_string_for_each_table_26"
                   >
                     <input
                       aria-checked="false"
                       aria-label="Checkbox"
                       class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                      id="26"
+                      id="any_unique_string_for_each_table_26"
                       type="checkbox"
                     />
                     <span
@@ -66521,7 +70526,7 @@ Object {
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
               >
                 Test
               </div>
@@ -66530,7 +70535,7 @@ Object {
                 data-sticky-last-left-td="true"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
               >
                 Test
               </div>
@@ -66581,24 +70586,26 @@ Object {
             <div
               class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
               role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+              style="display: flex; flex: 1 0 auto; min-width: 800px;"
             >
               <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+                data-sticky-td="true"
                 role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
               >
                 <div
-                  class="flex items-center h-full w-full justify-center ps-2"
+                  class="flex items-center h-full"
                 >
                   <label
                     class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                    for="27"
+                    for="any_unique_string_for_each_table_27"
                   >
                     <input
                       aria-checked="false"
                       aria-label="Checkbox"
                       class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                      id="27"
+                      id="any_unique_string_for_each_table_27"
                       type="checkbox"
                     />
                     <span
@@ -66628,7 +70635,7 @@ Object {
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
               >
                 Test
               </div>
@@ -66637,7 +70644,7 @@ Object {
                 data-sticky-last-left-td="true"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
               >
                 Test
               </div>
@@ -66688,24 +70695,26 @@ Object {
             <div
               class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
               role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+              style="display: flex; flex: 1 0 auto; min-width: 800px;"
             >
               <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+                data-sticky-td="true"
                 role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
               >
                 <div
-                  class="flex items-center h-full w-full justify-center ps-2"
+                  class="flex items-center h-full"
                 >
                   <label
                     class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                    for="28"
+                    for="any_unique_string_for_each_table_28"
                   >
                     <input
                       aria-checked="false"
                       aria-label="Checkbox"
                       class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                      id="28"
+                      id="any_unique_string_for_each_table_28"
                       type="checkbox"
                     />
                     <span
@@ -66735,7 +70744,7 @@ Object {
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
               >
                 Test
               </div>
@@ -66744,7 +70753,7 @@ Object {
                 data-sticky-last-left-td="true"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
               >
                 Test
               </div>
@@ -66795,24 +70804,26 @@ Object {
             <div
               class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
               role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+              style="display: flex; flex: 1 0 auto; min-width: 800px;"
             >
               <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+                data-sticky-td="true"
                 role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
               >
                 <div
-                  class="flex items-center h-full w-full justify-center ps-2"
+                  class="flex items-center h-full"
                 >
                   <label
                     class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                    for="29"
+                    for="any_unique_string_for_each_table_29"
                   >
                     <input
                       aria-checked="false"
                       aria-label="Checkbox"
                       class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                      id="29"
+                      id="any_unique_string_for_each_table_29"
                       type="checkbox"
                     />
                     <span
@@ -66842,7 +70853,7 @@ Object {
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
               >
                 Test
               </div>
@@ -66851,7 +70862,7 @@ Object {
                 data-sticky-last-left-td="true"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
               >
                 Test
               </div>
@@ -66902,24 +70913,26 @@ Object {
             <div
               class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
               role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+              style="display: flex; flex: 1 0 auto; min-width: 800px;"
             >
               <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+                data-sticky-td="true"
                 role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
               >
                 <div
-                  class="flex items-center h-full w-full justify-center ps-2"
+                  class="flex items-center h-full"
                 >
                   <label
                     class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                    for="30"
+                    for="any_unique_string_for_each_table_30"
                   >
                     <input
                       aria-checked="false"
                       aria-label="Checkbox"
                       class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                      id="30"
+                      id="any_unique_string_for_each_table_30"
                       type="checkbox"
                     />
                     <span
@@ -66949,7 +70962,7 @@ Object {
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
               >
                 Test
               </div>
@@ -66958,7 +70971,7 @@ Object {
                 data-sticky-last-left-td="true"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
               >
                 Test
               </div>
@@ -67009,24 +71022,26 @@ Object {
             <div
               class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
               role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+              style="display: flex; flex: 1 0 auto; min-width: 800px;"
             >
               <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+                data-sticky-td="true"
                 role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
               >
                 <div
-                  class="flex items-center h-full w-full justify-center ps-2"
+                  class="flex items-center h-full"
                 >
                   <label
                     class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                    for="31"
+                    for="any_unique_string_for_each_table_31"
                   >
                     <input
                       aria-checked="false"
                       aria-label="Checkbox"
                       class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                      id="31"
+                      id="any_unique_string_for_each_table_31"
                       type="checkbox"
                     />
                     <span
@@ -67056,7 +71071,7 @@ Object {
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
               >
                 Test
               </div>
@@ -67065,7 +71080,7 @@ Object {
                 data-sticky-last-left-td="true"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
               >
                 Test
               </div>
@@ -67116,24 +71131,26 @@ Object {
             <div
               class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
               role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+              style="display: flex; flex: 1 0 auto; min-width: 800px;"
             >
               <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+                data-sticky-td="true"
                 role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
               >
                 <div
-                  class="flex items-center h-full w-full justify-center ps-2"
+                  class="flex items-center h-full"
                 >
                   <label
                     class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                    for="32"
+                    for="any_unique_string_for_each_table_32"
                   >
                     <input
                       aria-checked="false"
                       aria-label="Checkbox"
                       class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                      id="32"
+                      id="any_unique_string_for_each_table_32"
                       type="checkbox"
                     />
                     <span
@@ -67163,7 +71180,7 @@ Object {
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
               >
                 Test
               </div>
@@ -67172,7 +71189,7 @@ Object {
                 data-sticky-last-left-td="true"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
               >
                 Test
               </div>
@@ -67223,24 +71240,26 @@ Object {
             <div
               class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
               role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+              style="display: flex; flex: 1 0 auto; min-width: 800px;"
             >
               <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+                data-sticky-td="true"
                 role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
               >
                 <div
-                  class="flex items-center h-full w-full justify-center ps-2"
+                  class="flex items-center h-full"
                 >
                   <label
                     class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                    for="33"
+                    for="any_unique_string_for_each_table_33"
                   >
                     <input
                       aria-checked="false"
                       aria-label="Checkbox"
                       class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                      id="33"
+                      id="any_unique_string_for_each_table_33"
                       type="checkbox"
                     />
                     <span
@@ -67270,7 +71289,7 @@ Object {
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
               >
                 Test
               </div>
@@ -67279,7 +71298,7 @@ Object {
                 data-sticky-last-left-td="true"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
               >
                 Test
               </div>
@@ -67330,24 +71349,26 @@ Object {
             <div
               class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
               role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+              style="display: flex; flex: 1 0 auto; min-width: 800px;"
             >
               <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+                data-sticky-td="true"
                 role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
               >
                 <div
-                  class="flex items-center h-full w-full justify-center ps-2"
+                  class="flex items-center h-full"
                 >
                   <label
                     class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                    for="34"
+                    for="any_unique_string_for_each_table_34"
                   >
                     <input
                       aria-checked="false"
                       aria-label="Checkbox"
                       class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                      id="34"
+                      id="any_unique_string_for_each_table_34"
                       type="checkbox"
                     />
                     <span
@@ -67377,7 +71398,7 @@ Object {
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
               >
                 Test
               </div>
@@ -67386,7 +71407,7 @@ Object {
                 data-sticky-last-left-td="true"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
               >
                 Test
               </div>
@@ -67437,24 +71458,26 @@ Object {
             <div
               class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
               role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+              style="display: flex; flex: 1 0 auto; min-width: 800px;"
             >
               <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+                data-sticky-td="true"
                 role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
               >
                 <div
-                  class="flex items-center h-full w-full justify-center ps-2"
+                  class="flex items-center h-full"
                 >
                   <label
                     class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                    for="35"
+                    for="any_unique_string_for_each_table_35"
                   >
                     <input
                       aria-checked="false"
                       aria-label="Checkbox"
                       class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                      id="35"
+                      id="any_unique_string_for_each_table_35"
                       type="checkbox"
                     />
                     <span
@@ -67484,7 +71507,7 @@ Object {
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
               >
                 Test
               </div>
@@ -67493,7 +71516,7 @@ Object {
                 data-sticky-last-left-td="true"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
               >
                 Test
               </div>
@@ -67544,24 +71567,26 @@ Object {
             <div
               class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
               role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+              style="display: flex; flex: 1 0 auto; min-width: 800px;"
             >
               <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+                data-sticky-td="true"
                 role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
               >
                 <div
-                  class="flex items-center h-full w-full justify-center ps-2"
+                  class="flex items-center h-full"
                 >
                   <label
                     class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                    for="36"
+                    for="any_unique_string_for_each_table_36"
                   >
                     <input
                       aria-checked="false"
                       aria-label="Checkbox"
                       class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                      id="36"
+                      id="any_unique_string_for_each_table_36"
                       type="checkbox"
                     />
                     <span
@@ -67591,7 +71616,7 @@ Object {
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
               >
                 Test
               </div>
@@ -67600,7 +71625,7 @@ Object {
                 data-sticky-last-left-td="true"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
               >
                 Test
               </div>
@@ -67651,24 +71676,26 @@ Object {
             <div
               class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
               role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+              style="display: flex; flex: 1 0 auto; min-width: 800px;"
             >
               <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+                data-sticky-td="true"
                 role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
               >
                 <div
-                  class="flex items-center h-full w-full justify-center ps-2"
+                  class="flex items-center h-full"
                 >
                   <label
                     class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                    for="37"
+                    for="any_unique_string_for_each_table_37"
                   >
                     <input
                       aria-checked="false"
                       aria-label="Checkbox"
                       class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                      id="37"
+                      id="any_unique_string_for_each_table_37"
                       type="checkbox"
                     />
                     <span
@@ -67698,7 +71725,7 @@ Object {
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
               >
                 Test
               </div>
@@ -67707,7 +71734,7 @@ Object {
                 data-sticky-last-left-td="true"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
               >
                 Test
               </div>
@@ -67758,24 +71785,26 @@ Object {
             <div
               class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
               role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+              style="display: flex; flex: 1 0 auto; min-width: 800px;"
             >
               <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+                data-sticky-td="true"
                 role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
               >
                 <div
-                  class="flex items-center h-full w-full justify-center ps-2"
+                  class="flex items-center h-full"
                 >
                   <label
                     class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                    for="38"
+                    for="any_unique_string_for_each_table_38"
                   >
                     <input
                       aria-checked="false"
                       aria-label="Checkbox"
                       class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                      id="38"
+                      id="any_unique_string_for_each_table_38"
                       type="checkbox"
                     />
                     <span
@@ -67805,7 +71834,7 @@ Object {
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
               >
                 Test
               </div>
@@ -67814,7 +71843,7 @@ Object {
                 data-sticky-last-left-td="true"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
               >
                 Test
               </div>
@@ -67865,24 +71894,26 @@ Object {
             <div
               class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
               role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+              style="display: flex; flex: 1 0 auto; min-width: 800px;"
             >
               <div
-                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+                class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+                data-sticky-td="true"
                 role="cell"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
               >
                 <div
-                  class="flex items-center h-full w-full justify-center ps-2"
+                  class="flex items-center h-full"
                 >
                   <label
                     class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                    for="39"
+                    for="any_unique_string_for_each_table_39"
                   >
                     <input
                       aria-checked="false"
                       aria-label="Checkbox"
                       class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                      id="39"
+                      id="any_unique_string_for_each_table_39"
                       type="checkbox"
                     />
                     <span
@@ -67912,7 +71943,7 @@ Object {
                 class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
               >
                 Test
               </div>
@@ -67921,7 +71952,7 @@ Object {
                 data-sticky-last-left-td="true"
                 data-sticky-td="true"
                 role="cell"
-                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
               >
                 Test
               </div>
@@ -67976,7 +72007,7 @@ Object {
             <div
               class="flex rounded-moon-s-sm sticky"
               role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+              style="display: flex; flex: 1 0 auto; min-width: 800px;"
             >
               <div
                 class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
@@ -67995,7 +72026,6 @@ Object {
               <div
                 class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
                 colspan="1"
-                data-sticky-last-left-td="true"
                 data-sticky-td="true"
                 role="columnheader"
                 style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
@@ -68007,6 +72037,21 @@ Object {
                   style="cursor: col-resize;"
                 />
               </div>
+              <div
+                class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+                colspan="1"
+                data-sticky-last-left-td="true"
+                data-sticky-td="true"
+                role="columnheader"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
+              >
+                <div
+                  class="resizer inline-block cursor-ew-resize w-2 h-full absolute top-0 end-0 z-1 after:end-0 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%]"
+                  draggable="false"
+                  role="separator"
+                  style="cursor: col-resize;"
+                />
+              </div>
               <div
                 class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
                 colspan="1"
@@ -68078,15 +72123,29 @@ Object {
             <div
               class="flex rounded-moon-s-sm sticky"
               role="row"
-              style="display: flex; flex: 1 0 auto; min-width: 700px;"
+              style="display: flex; flex: 1 0 auto; min-width: 800px;"
             >
+              <div
+                class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+                colspan="1"
+                data-sticky-td="true"
+                role="columnheader"
+                style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              >
+                <div
+                  class="resizer inline-block cursor-ew-resize w-2 h-full absolute top-0 end-0 z-1 after:end-0 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%]"
+                  draggable="false"
+                  role="separator"
+                  style="cursor: col-resize;"
+                />
+              </div>
               <div
                 class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
                 colspan="2"
                 data-sticky-last-left-td="true"
                 data-sticky-td="true"
                 role="columnheader"
-                style="box-sizing: border-box; flex: 300 0 auto; min-width: 200px; width: 300px; position: sticky; z-index: 3; left: 0px;"
+                style="box-sizing: border-box; flex: 300 0 auto; min-width: 200px; width: 300px; position: sticky; z-index: 3; left: 150px;"
               >
                 Name footer
                 <div
@@ -68147,15 +72206,30 @@ Object {
           <div
             class="flex rounded-moon-s-sm sticky"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
+            <div
+              class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+              colspan="1"
+              data-sticky-td="true"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            >
+              Select
+              <div
+                class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+                draggable="false"
+                role="separator"
+                style="cursor: col-resize;"
+              />
+            </div>
             <div
               class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
               colspan="2"
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="columnheader"
-              style="box-sizing: border-box; flex: 300 0 auto; min-width: 200px; width: 300px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 300 0 auto; min-width: 200px; width: 300px; position: sticky; z-index: 3; left: 150px;"
             >
               Name
               <div
@@ -68199,7 +72273,7 @@ Object {
           <div
             class="flex rounded-moon-s-sm sticky"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
               class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
@@ -68207,6 +72281,56 @@ Object {
               data-sticky-td="true"
               role="columnheader"
               style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            >
+              <div
+                class="flex items-center h-full"
+              >
+                <label
+                  class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
+                  for="any_unique_string_for_each_table_root"
+                >
+                  <input
+                    aria-checked="false"
+                    aria-label="Checkbox"
+                    class="peer appearance-none h-6 w-6 outline-none align-top select-none"
+                    id="any_unique_string_for_each_table_root"
+                    type="checkbox"
+                  />
+                  <span
+                    aria-hidden="true"
+                    class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
+                  >
+                    <svg
+                      class="transition-opacity opacity-0"
+                      fill="none"
+                      height="1em"
+                      viewBox="0 0 32 32"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M7 14.9412L13.6667 22L25 10"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                    </svg>
+                  </span>
+                </label>
+              </div>
+              <div
+                class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+                draggable="false"
+                role="separator"
+                style="cursor: col-resize;"
+              />
+            </div>
+            <div
+              class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+              colspan="1"
+              data-sticky-td="true"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               First Name
               <div
@@ -68222,7 +72346,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="columnheader"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Last Name
               <div
@@ -68307,7 +72431,7 @@ Object {
           </div>
           <div
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
               class="relative"
@@ -68319,11 +72443,18 @@ Object {
             <div
               class="relative"
               colspan="1"
-              data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="columnheader"
               style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             />
+            <div
+              class="relative"
+              colspan="1"
+              data-sticky-last-left-td="true"
+              data-sticky-td="true"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
+            />
             <div
               class="relative"
               colspan="1"
@@ -68365,24 +72496,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="0"
+                  for="any_unique_string_for_each_table_0"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="0"
+                    id="any_unique_string_for_each_table_0"
                     type="checkbox"
                   />
                   <span
@@ -68412,7 +72545,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -68421,7 +72554,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -68472,24 +72605,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="1"
+                  for="any_unique_string_for_each_table_1"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="1"
+                    id="any_unique_string_for_each_table_1"
                     type="checkbox"
                   />
                   <span
@@ -68519,7 +72654,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -68528,7 +72663,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -68579,24 +72714,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="2"
+                  for="any_unique_string_for_each_table_2"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="2"
+                    id="any_unique_string_for_each_table_2"
                     type="checkbox"
                   />
                   <span
@@ -68626,7 +72763,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -68635,7 +72772,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -68686,238 +72823,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
-          >
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
-              role="cell"
-            >
-              <div
-                class="flex items-center h-full w-full justify-center ps-2"
-              >
-                <label
-                  class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="3"
-                >
-                  <input
-                    aria-checked="false"
-                    aria-label="Checkbox"
-                    class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="3"
-                    type="checkbox"
-                  />
-                  <span
-                    aria-hidden="true"
-                    class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
-                  >
-                    <svg
-                      class="transition-opacity opacity-0"
-                      fill="none"
-                      height="1em"
-                      viewBox="0 0 32 32"
-                      width="1em"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M7 14.9412L13.6667 22L25 10"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                      />
-                    </svg>
-                  </span>
-                </label>
-              </div>
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              data-sticky-td="true"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
-            >
-              Test
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              data-sticky-last-left-td="true"
-              data-sticky-td="true"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
-            >
-              Test
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-            >
-              <span>
-                90
-              </span>
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-            >
-              <span>
-                300
-              </span>
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-            >
-              300
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-            >
-              300
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
-              data-sticky-first-right-td="true"
-              data-sticky-td="true"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
-            >
-              <span>
-                300
-              </span>
-            </div>
-          </div>
-          <div
-            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-            role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
-              role="cell"
-            >
-              <div
-                class="flex items-center h-full w-full justify-center ps-2"
-              >
-                <label
-                  class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="4"
-                >
-                  <input
-                    aria-checked="false"
-                    aria-label="Checkbox"
-                    class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="4"
-                    type="checkbox"
-                  />
-                  <span
-                    aria-hidden="true"
-                    class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
-                  >
-                    <svg
-                      class="transition-opacity opacity-0"
-                      fill="none"
-                      height="1em"
-                      viewBox="0 0 32 32"
-                      width="1em"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M7 14.9412L13.6667 22L25 10"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                      />
-                    </svg>
-                  </span>
-                </label>
-              </div>
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
               style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
-            >
-              Test
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              data-sticky-last-left-td="true"
-              data-sticky-td="true"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
-            >
-              Test
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-            >
-              <span>
-                120
-              </span>
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-            >
-              <span>
-                400
-              </span>
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-            >
-              400
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-            >
-              400
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
-              data-sticky-first-right-td="true"
-              data-sticky-td="true"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
-            >
-              <span>
-                400
-              </span>
-            </div>
-          </div>
-          <div
-            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-            role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
-          >
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
-              role="cell"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="5"
+                  for="any_unique_string_for_each_table_3"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="5"
+                    id="any_unique_string_for_each_table_3"
                     type="checkbox"
                   />
                   <span
@@ -68947,7 +72872,116 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+            >
+              Test
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              data-sticky-last-left-td="true"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
+            >
+              Test
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                90
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              <span>
+                300
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              300
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              300
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+              data-sticky-first-right-td="true"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+            >
+              <span>
+                300
+              </span>
+            </div>
+          </div>
+          <div
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
+          >
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
+              role="cell"
               style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            >
+              <div
+                class="flex items-center h-full"
+              >
+                <label
+                  class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
+                  for="any_unique_string_for_each_table_4"
+                >
+                  <input
+                    aria-checked="false"
+                    aria-label="Checkbox"
+                    class="peer appearance-none h-6 w-6 outline-none align-top select-none"
+                    id="any_unique_string_for_each_table_4"
+                    type="checkbox"
+                  />
+                  <span
+                    aria-hidden="true"
+                    class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
+                  >
+                    <svg
+                      class="transition-opacity opacity-0"
+                      fill="none"
+                      height="1em"
+                      viewBox="0 0 32 32"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M7 14.9412L13.6667 22L25 10"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                    </svg>
+                  </span>
+                </label>
+              </div>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -68956,10 +72990,119 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
+            >
+              Test
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                120
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              <span>
+                400
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              400
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              400
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+              data-sticky-first-right-td="true"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+            >
+              <span>
+                400
+              </span>
+            </div>
+          </div>
+          <div
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
+          >
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            >
+              <div
+                class="flex items-center h-full"
+              >
+                <label
+                  class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
+                  for="any_unique_string_for_each_table_5"
+                >
+                  <input
+                    aria-checked="false"
+                    aria-label="Checkbox"
+                    class="peer appearance-none h-6 w-6 outline-none align-top select-none"
+                    id="any_unique_string_for_each_table_5"
+                    type="checkbox"
+                  />
+                  <span
+                    aria-hidden="true"
+                    class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
+                  >
+                    <svg
+                      class="transition-opacity opacity-0"
+                      fill="none"
+                      height="1em"
+                      viewBox="0 0 32 32"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M7 14.9412L13.6667 22L25 10"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                    </svg>
+                  </span>
+                </label>
+              </div>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              data-sticky-td="true"
+              role="cell"
               style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              data-sticky-last-left-td="true"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
+            >
+              Test
+            </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               role="cell"
@@ -69007,24 +73150,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="6"
+                  for="any_unique_string_for_each_table_6"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="6"
+                    id="any_unique_string_for_each_table_6"
                     type="checkbox"
                   />
                   <span
@@ -69054,7 +73199,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -69063,7 +73208,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -69114,24 +73259,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="7"
+                  for="any_unique_string_for_each_table_7"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="7"
+                    id="any_unique_string_for_each_table_7"
                     type="checkbox"
                   />
                   <span
@@ -69161,7 +73308,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -69170,7 +73317,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -69221,24 +73368,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="8"
+                  for="any_unique_string_for_each_table_8"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="8"
+                    id="any_unique_string_for_each_table_8"
                     type="checkbox"
                   />
                   <span
@@ -69268,7 +73417,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -69277,7 +73426,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -69328,24 +73477,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="9"
+                  for="any_unique_string_for_each_table_9"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="9"
+                    id="any_unique_string_for_each_table_9"
                     type="checkbox"
                   />
                   <span
@@ -69375,7 +73526,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -69384,7 +73535,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -69435,24 +73586,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="10"
+                  for="any_unique_string_for_each_table_10"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="10"
+                    id="any_unique_string_for_each_table_10"
                     type="checkbox"
                   />
                   <span
@@ -69482,7 +73635,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -69491,7 +73644,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -69542,24 +73695,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="11"
+                  for="any_unique_string_for_each_table_11"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="11"
+                    id="any_unique_string_for_each_table_11"
                     type="checkbox"
                   />
                   <span
@@ -69589,7 +73744,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -69598,7 +73753,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -69649,24 +73804,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="12"
+                  for="any_unique_string_for_each_table_12"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="12"
+                    id="any_unique_string_for_each_table_12"
                     type="checkbox"
                   />
                   <span
@@ -69696,7 +73853,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -69705,7 +73862,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -69756,24 +73913,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="13"
+                  for="any_unique_string_for_each_table_13"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="13"
+                    id="any_unique_string_for_each_table_13"
                     type="checkbox"
                   />
                   <span
@@ -69803,7 +73962,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -69812,7 +73971,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -69863,24 +74022,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="14"
+                  for="any_unique_string_for_each_table_14"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="14"
+                    id="any_unique_string_for_each_table_14"
                     type="checkbox"
                   />
                   <span
@@ -69910,7 +74071,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -69919,7 +74080,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -69970,24 +74131,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="15"
+                  for="any_unique_string_for_each_table_15"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="15"
+                    id="any_unique_string_for_each_table_15"
                     type="checkbox"
                   />
                   <span
@@ -70017,7 +74180,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -70026,7 +74189,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -70077,24 +74240,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="16"
+                  for="any_unique_string_for_each_table_16"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="16"
+                    id="any_unique_string_for_each_table_16"
                     type="checkbox"
                   />
                   <span
@@ -70124,7 +74289,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -70133,7 +74298,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -70184,24 +74349,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="17"
+                  for="any_unique_string_for_each_table_17"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="17"
+                    id="any_unique_string_for_each_table_17"
                     type="checkbox"
                   />
                   <span
@@ -70231,7 +74398,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -70240,7 +74407,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -70291,24 +74458,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="18"
+                  for="any_unique_string_for_each_table_18"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="18"
+                    id="any_unique_string_for_each_table_18"
                     type="checkbox"
                   />
                   <span
@@ -70338,7 +74507,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -70347,7 +74516,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -70398,24 +74567,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="19"
+                  for="any_unique_string_for_each_table_19"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="19"
+                    id="any_unique_string_for_each_table_19"
                     type="checkbox"
                   />
                   <span
@@ -70445,7 +74616,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -70454,7 +74625,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -70505,24 +74676,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="20"
+                  for="any_unique_string_for_each_table_20"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="20"
+                    id="any_unique_string_for_each_table_20"
                     type="checkbox"
                   />
                   <span
@@ -70552,7 +74725,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -70561,7 +74734,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -70612,24 +74785,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="21"
+                  for="any_unique_string_for_each_table_21"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="21"
+                    id="any_unique_string_for_each_table_21"
                     type="checkbox"
                   />
                   <span
@@ -70659,7 +74834,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -70668,7 +74843,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -70719,24 +74894,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="22"
+                  for="any_unique_string_for_each_table_22"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="22"
+                    id="any_unique_string_for_each_table_22"
                     type="checkbox"
                   />
                   <span
@@ -70766,7 +74943,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -70775,7 +74952,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -70826,24 +75003,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="23"
+                  for="any_unique_string_for_each_table_23"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="23"
+                    id="any_unique_string_for_each_table_23"
                     type="checkbox"
                   />
                   <span
@@ -70873,7 +75052,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -70882,7 +75061,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -70933,24 +75112,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="24"
+                  for="any_unique_string_for_each_table_24"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="24"
+                    id="any_unique_string_for_each_table_24"
                     type="checkbox"
                   />
                   <span
@@ -70980,7 +75161,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -70989,7 +75170,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -71040,24 +75221,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="25"
+                  for="any_unique_string_for_each_table_25"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="25"
+                    id="any_unique_string_for_each_table_25"
                     type="checkbox"
                   />
                   <span
@@ -71087,7 +75270,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -71096,7 +75279,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -71147,24 +75330,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="26"
+                  for="any_unique_string_for_each_table_26"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="26"
+                    id="any_unique_string_for_each_table_26"
                     type="checkbox"
                   />
                   <span
@@ -71194,7 +75379,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -71203,7 +75388,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -71254,24 +75439,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="27"
+                  for="any_unique_string_for_each_table_27"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="27"
+                    id="any_unique_string_for_each_table_27"
                     type="checkbox"
                   />
                   <span
@@ -71301,7 +75488,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -71310,7 +75497,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -71361,24 +75548,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="28"
+                  for="any_unique_string_for_each_table_28"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="28"
+                    id="any_unique_string_for_each_table_28"
                     type="checkbox"
                   />
                   <span
@@ -71408,7 +75597,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -71417,7 +75606,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -71468,24 +75657,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="29"
+                  for="any_unique_string_for_each_table_29"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="29"
+                    id="any_unique_string_for_each_table_29"
                     type="checkbox"
                   />
                   <span
@@ -71515,7 +75706,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -71524,7 +75715,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -71575,24 +75766,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="30"
+                  for="any_unique_string_for_each_table_30"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="30"
+                    id="any_unique_string_for_each_table_30"
                     type="checkbox"
                   />
                   <span
@@ -71622,7 +75815,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -71631,7 +75824,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -71682,24 +75875,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="31"
+                  for="any_unique_string_for_each_table_31"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="31"
+                    id="any_unique_string_for_each_table_31"
                     type="checkbox"
                   />
                   <span
@@ -71729,7 +75924,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -71738,7 +75933,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -71789,24 +75984,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="32"
+                  for="any_unique_string_for_each_table_32"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="32"
+                    id="any_unique_string_for_each_table_32"
                     type="checkbox"
                   />
                   <span
@@ -71836,7 +76033,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -71845,7 +76042,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -71896,24 +76093,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="33"
+                  for="any_unique_string_for_each_table_33"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="33"
+                    id="any_unique_string_for_each_table_33"
                     type="checkbox"
                   />
                   <span
@@ -71943,7 +76142,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -71952,7 +76151,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -72003,24 +76202,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="34"
+                  for="any_unique_string_for_each_table_34"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="34"
+                    id="any_unique_string_for_each_table_34"
                     type="checkbox"
                   />
                   <span
@@ -72050,7 +76251,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -72059,7 +76260,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -72110,24 +76311,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="35"
+                  for="any_unique_string_for_each_table_35"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="35"
+                    id="any_unique_string_for_each_table_35"
                     type="checkbox"
                   />
                   <span
@@ -72157,7 +76360,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -72166,7 +76369,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -72217,24 +76420,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="36"
+                  for="any_unique_string_for_each_table_36"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="36"
+                    id="any_unique_string_for_each_table_36"
                     type="checkbox"
                   />
                   <span
@@ -72264,7 +76469,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -72273,7 +76478,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -72324,24 +76529,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="37"
+                  for="any_unique_string_for_each_table_37"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="37"
+                    id="any_unique_string_for_each_table_37"
                     type="checkbox"
                   />
                   <span
@@ -72371,7 +76578,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -72380,7 +76587,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -72431,24 +76638,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="38"
+                  for="any_unique_string_for_each_table_38"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="38"
+                    id="any_unique_string_for_each_table_38"
                     type="checkbox"
                   />
                   <span
@@ -72478,7 +76687,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -72487,7 +76696,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -72538,24 +76747,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="39"
+                  for="any_unique_string_for_each_table_39"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="39"
+                    id="any_unique_string_for_each_table_39"
                     type="checkbox"
                   />
                   <span
@@ -72585,7 +76796,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -72594,7 +76805,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -72649,7 +76860,7 @@ Object {
           <div
             class="flex rounded-moon-s-sm sticky"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
               class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
@@ -72668,7 +76879,6 @@ Object {
             <div
               class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
               colspan="1"
-              data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="columnheader"
               style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
@@ -72680,6 +76890,21 @@ Object {
                 style="cursor: col-resize;"
               />
             </div>
+            <div
+              class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+              colspan="1"
+              data-sticky-last-left-td="true"
+              data-sticky-td="true"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
+            >
+              <div
+                class="resizer inline-block cursor-ew-resize w-2 h-full absolute top-0 end-0 z-1 after:end-0 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%]"
+                draggable="false"
+                role="separator"
+                style="cursor: col-resize;"
+              />
+            </div>
             <div
               class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
               colspan="1"
@@ -72751,15 +76976,29 @@ Object {
           <div
             class="flex rounded-moon-s-sm sticky"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
+            <div
+              class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+              colspan="1"
+              data-sticky-td="true"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            >
+              <div
+                class="resizer inline-block cursor-ew-resize w-2 h-full absolute top-0 end-0 z-1 after:end-0 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%]"
+                draggable="false"
+                role="separator"
+                style="cursor: col-resize;"
+              />
+            </div>
             <div
               class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
               colspan="2"
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="columnheader"
-              style="box-sizing: border-box; flex: 300 0 auto; min-width: 200px; width: 300px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 300 0 auto; min-width: 200px; width: 300px; position: sticky; z-index: 3; left: 150px;"
             >
               Name footer
               <div
@@ -111074,856 +115313,2872 @@ Object {
             </div>
           </div>
           <div
-            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-            role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 525px;"
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 525px;"
+          >
+            <div
+              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 250 0 auto; min-width: 30px; width: 250px; position: sticky; z-index: 3; left: 0px;"
+            >
+              84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              data-sticky-last-left-td="true"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 240 0 auto; min-width: 80px; width: 240px; position: sticky; z-index: 3; left: 250px;"
+            >
+              aleksandr@heathmonitoring.com
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+            >
+              2023-09-19T14:31:46.105Z
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+            >
+              Bender (old) Coingaming
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 120 0 auto; min-width: 30px; width: 120px;"
+            >
+              Pragmatic Play
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 70 0 auto; min-width: 60px; width: 70px;"
+            >
+              22.97
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 80 0 auto; min-width: 75px; width: 80px;"
+            >
+              <div
+                class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-gray-100 text-lg text-gray-600 max-w-fit"
+              >
+                USD
+              </div>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 90 0 auto; min-width: 80px; width: 90px;"
+            >
+              <div
+                class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
+              >
+                SUCCESS
+              </div>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 60 0 auto; min-width: 50px; width: 60px;"
+            >
+              <div
+                class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
+              >
+                BET
+              </div>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+              data-sticky-first-right-td="true"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 80 0 auto; min-width: 60px; width: 80px; position: sticky; z-index: 3; right: 0px;"
+            >
+              <button
+                class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+                data-state="closed"
+                type="button"
+              >
+                <svg
+                  class="text-moon-24"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 32 32"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                  />
+                </svg>
+              </button>
+            </div>
+          </div>
+          <div
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 525px;"
+          >
+            <div
+              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 250 0 auto; min-width: 30px; width: 250px; position: sticky; z-index: 3; left: 0px;"
+            >
+              84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              data-sticky-last-left-td="true"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 240 0 auto; min-width: 80px; width: 240px; position: sticky; z-index: 3; left: 250px;"
+            >
+              aleksandr@heathmonitoring.com
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+            >
+              2023-09-19T14:31:46.105Z
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+            >
+              Bender (old) Coingaming
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 120 0 auto; min-width: 30px; width: 120px;"
+            >
+              Pragmatic Play
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 70 0 auto; min-width: 60px; width: 70px;"
+            >
+              22.97
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 80 0 auto; min-width: 75px; width: 80px;"
+            >
+              <div
+                class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-gray-100 text-lg text-gray-600 max-w-fit"
+              >
+                USD
+              </div>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 90 0 auto; min-width: 80px; width: 90px;"
+            >
+              <div
+                class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
+              >
+                SUCCESS
+              </div>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 60 0 auto; min-width: 50px; width: 60px;"
+            >
+              <div
+                class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
+              >
+                BET
+              </div>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+              data-sticky-first-right-td="true"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 80 0 auto; min-width: 60px; width: 80px; position: sticky; z-index: 3; right: 0px;"
+            >
+              <button
+                class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+                data-state="closed"
+                type="button"
+              >
+                <svg
+                  class="text-moon-24"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 32 32"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                  />
+                </svg>
+              </button>
+            </div>
+          </div>
+          <div
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 525px;"
+          >
+            <div
+              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 250 0 auto; min-width: 30px; width: 250px; position: sticky; z-index: 3; left: 0px;"
+            >
+              84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              data-sticky-last-left-td="true"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 240 0 auto; min-width: 80px; width: 240px; position: sticky; z-index: 3; left: 250px;"
+            >
+              aleksandr@heathmonitoring.com
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+            >
+              2023-09-19T14:31:46.105Z
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+            >
+              Bender (old) Coingaming
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 120 0 auto; min-width: 30px; width: 120px;"
+            >
+              Pragmatic Play
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 70 0 auto; min-width: 60px; width: 70px;"
+            >
+              22.97
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 80 0 auto; min-width: 75px; width: 80px;"
+            >
+              <div
+                class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-gray-100 text-lg text-gray-600 max-w-fit"
+              >
+                USD
+              </div>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 90 0 auto; min-width: 80px; width: 90px;"
+            >
+              <div
+                class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
+              >
+                SUCCESS
+              </div>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 60 0 auto; min-width: 50px; width: 60px;"
+            >
+              <div
+                class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
+              >
+                BET
+              </div>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+              data-sticky-first-right-td="true"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 80 0 auto; min-width: 60px; width: 80px; position: sticky; z-index: 3; right: 0px;"
+            >
+              <button
+                class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+                data-state="closed"
+                type="button"
+              >
+                <svg
+                  class="text-moon-24"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 32 32"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                  />
+                </svg>
+              </button>
+            </div>
+          </div>
+          <div
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 525px;"
+          >
+            <div
+              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 250 0 auto; min-width: 30px; width: 250px; position: sticky; z-index: 3; left: 0px;"
+            >
+              84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              data-sticky-last-left-td="true"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 240 0 auto; min-width: 80px; width: 240px; position: sticky; z-index: 3; left: 250px;"
+            >
+              aleksandr@heathmonitoring.com
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+            >
+              2023-09-19T14:31:46.105Z
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+            >
+              Bender (old) Coingaming
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 120 0 auto; min-width: 30px; width: 120px;"
+            >
+              Pragmatic Play
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 70 0 auto; min-width: 60px; width: 70px;"
+            >
+              22.97
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 80 0 auto; min-width: 75px; width: 80px;"
+            >
+              <div
+                class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-gray-100 text-lg text-gray-600 max-w-fit"
+              >
+                USD
+              </div>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 90 0 auto; min-width: 80px; width: 90px;"
+            >
+              <div
+                class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
+              >
+                SUCCESS
+              </div>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 60 0 auto; min-width: 50px; width: 60px;"
+            >
+              <div
+                class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
+              >
+                BET
+              </div>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+              data-sticky-first-right-td="true"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 80 0 auto; min-width: 60px; width: 80px; position: sticky; z-index: 3; right: 0px;"
+            >
+              <button
+                class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+                data-state="closed"
+                type="button"
+              >
+                <svg
+                  class="text-moon-24"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 32 32"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                  />
+                </svg>
+              </button>
+            </div>
+          </div>
+          <div
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 525px;"
+          >
+            <div
+              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 250 0 auto; min-width: 30px; width: 250px; position: sticky; z-index: 3; left: 0px;"
+            >
+              84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              data-sticky-last-left-td="true"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 240 0 auto; min-width: 80px; width: 240px; position: sticky; z-index: 3; left: 250px;"
+            >
+              aleksandr@heathmonitoring.com
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+            >
+              2023-09-19T14:31:46.105Z
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+            >
+              Bender (old) Coingaming
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 120 0 auto; min-width: 30px; width: 120px;"
+            >
+              Pragmatic Play
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 70 0 auto; min-width: 60px; width: 70px;"
+            >
+              22.97
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 80 0 auto; min-width: 75px; width: 80px;"
+            >
+              <div
+                class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-gray-100 text-lg text-gray-600 max-w-fit"
+              >
+                USD
+              </div>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 90 0 auto; min-width: 80px; width: 90px;"
+            >
+              <div
+                class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
+              >
+                SUCCESS
+              </div>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 60 0 auto; min-width: 50px; width: 60px;"
+            >
+              <div
+                class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
+              >
+                BET
+              </div>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+              data-sticky-first-right-td="true"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 80 0 auto; min-width: 60px; width: 80px; position: sticky; z-index: 3; right: 0px;"
+            >
+              <button
+                class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+                data-state="closed"
+                type="button"
+              >
+                <svg
+                  class="text-moon-24"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 32 32"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                  />
+                </svg>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="table-wrapper sm:overflow-auto overflow-scroll no-scrollbar flex flex-col sticky"
+      role="table"
+      style="width: 900px; height: 400px;"
+    >
+      <div
+        class="flex flex-col sticky top-0 z-[99]"
+      >
+        <div
+          class="flex rounded-moon-s-sm sticky"
+          role="row"
+          style="display: flex; flex: 1 0 auto; min-width: 525px;"
+        >
+          <div
+            class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+            colspan="2"
+            data-sticky-last-left-td="true"
+            data-sticky-td="true"
+            role="columnheader"
+            style="box-sizing: border-box; flex: 490 0 auto; min-width: 110px; width: 490px; position: sticky; z-index: 3; left: 0px;"
+          >
+            Transactions
+            <div
+              class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+              draggable="false"
+              role="separator"
+              style="cursor: col-resize;"
+            />
+          </div>
+          <div
+            class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+            colspan="7"
+            role="columnheader"
+            style="box-sizing: border-box; flex: 720 0 auto; min-width: 355px; width: 720px; position: relative;"
+          >
+            Info
+            <div
+              class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+              draggable="false"
+              role="separator"
+              style="cursor: col-resize;"
+            />
+          </div>
+          <div
+            class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0"
+            colspan="1"
+            data-sticky-first-right-td="true"
+            data-sticky-td="true"
+            role="columnheader"
+            style="box-sizing: border-box; flex: 80 0 auto; min-width: 60px; width: 80px; position: sticky; z-index: 3; right: 0px;"
+          >
+            Actions
+            <div
+              class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+              draggable="false"
+              role="separator"
+              style="cursor: col-resize;"
+            />
+          </div>
+        </div>
+        <div
+          class="flex rounded-moon-s-sm sticky"
+          role="row"
+          style="display: flex; flex: 1 0 auto; min-width: 525px;"
+        >
+          <div
+            class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+            colspan="1"
+            data-sticky-td="true"
+            role="columnheader"
+            style="box-sizing: border-box; flex: 250 0 auto; min-width: 30px; width: 250px; position: sticky; z-index: 3; left: 0px;"
+          >
+            Transaction UUID
+            <div
+              class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+              draggable="false"
+              role="separator"
+              style="cursor: col-resize;"
+            />
+          </div>
+          <div
+            class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+            colspan="1"
+            data-sticky-last-left-td="true"
+            data-sticky-td="true"
+            role="columnheader"
+            style="box-sizing: border-box; flex: 240 0 auto; min-width: 80px; width: 240px; position: sticky; z-index: 3; left: 250px;"
+          >
+            User & Supplier user
+            <div
+              class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+              draggable="false"
+              role="separator"
+              style="cursor: col-resize;"
+            />
+          </div>
+          <div
+            class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+            colspan="1"
+            role="columnheader"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px; position: relative;"
+          >
+            Process time
+            <div
+              class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+              draggable="false"
+              role="separator"
+              style="cursor: col-resize;"
+            />
+          </div>
+          <div
+            class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+            colspan="1"
+            role="columnheader"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px; position: relative;"
+          >
+            Client
+            <div
+              class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+              draggable="false"
+              role="separator"
+              style="cursor: col-resize;"
+            />
+          </div>
+          <div
+            class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+            colspan="1"
+            role="columnheader"
+            style="box-sizing: border-box; flex: 120 0 auto; min-width: 30px; width: 120px; position: relative;"
+          >
+            Game name & provider
+            <div
+              class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+              draggable="false"
+              role="separator"
+              style="cursor: col-resize;"
+            />
+          </div>
+          <div
+            class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+            colspan="1"
+            role="columnheader"
+            style="box-sizing: border-box; flex: 70 0 auto; min-width: 60px; width: 70px; position: relative;"
+          >
+            Amount
+            <div
+              class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+              draggable="false"
+              role="separator"
+              style="cursor: col-resize;"
+            />
+          </div>
+          <div
+            class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+            colspan="1"
+            role="columnheader"
+            style="box-sizing: border-box; flex: 80 0 auto; min-width: 75px; width: 80px; position: relative;"
+          >
+            Currency
+            <div
+              class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+              draggable="false"
+              role="separator"
+              style="cursor: col-resize;"
+            />
+          </div>
+          <div
+            class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+            colspan="1"
+            role="columnheader"
+            style="box-sizing: border-box; flex: 90 0 auto; min-width: 80px; width: 90px; position: relative;"
+          >
+            Status
+            <div
+              class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+              draggable="false"
+              role="separator"
+              style="cursor: col-resize;"
+            />
+          </div>
+          <div
+            class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+            colspan="1"
+            role="columnheader"
+            style="box-sizing: border-box; flex: 60 0 auto; min-width: 50px; width: 60px; position: relative;"
+          >
+            Kind
+            <div
+              class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+              draggable="false"
+              role="separator"
+              style="cursor: col-resize;"
+            />
+          </div>
+          <div
+            class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0"
+            colspan="1"
+            data-sticky-first-right-td="true"
+            data-sticky-td="true"
+            role="columnheader"
+            style="box-sizing: border-box; flex: 80 0 auto; min-width: 60px; width: 80px; position: sticky; z-index: 3; right: 0px;"
+          >
+            Actions
+            <div
+              class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+              draggable="false"
+              role="separator"
+              style="cursor: col-resize;"
+            />
+          </div>
+        </div>
+        <div
+          role="row"
+          style="display: flex; flex: 1 0 auto; min-width: 525px;"
+        >
+          <div
+            class="relative"
+            colspan="1"
+            data-sticky-td="true"
+            role="columnheader"
+            style="box-sizing: border-box; flex: 250 0 auto; min-width: 30px; width: 250px; position: sticky; z-index: 3; left: 0px;"
+          />
+          <div
+            class="relative"
+            colspan="1"
+            data-sticky-last-left-td="true"
+            data-sticky-td="true"
+            role="columnheader"
+            style="box-sizing: border-box; flex: 240 0 auto; min-width: 80px; width: 240px; position: sticky; z-index: 3; left: 250px;"
+          />
+          <div
+            class="relative"
+            colspan="1"
+            role="columnheader"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px; position: relative;"
+          />
+          <div
+            class="relative"
+            colspan="1"
+            role="columnheader"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px; position: relative;"
+          />
+          <div
+            class="relative"
+            colspan="1"
+            role="columnheader"
+            style="box-sizing: border-box; flex: 120 0 auto; min-width: 30px; width: 120px; position: relative;"
+          />
+          <div
+            class="relative"
+            colspan="1"
+            role="columnheader"
+            style="box-sizing: border-box; flex: 70 0 auto; min-width: 60px; width: 70px; position: relative;"
+          />
+          <div
+            class="relative"
+            colspan="1"
+            role="columnheader"
+            style="box-sizing: border-box; flex: 80 0 auto; min-width: 75px; width: 80px; position: relative;"
+          />
+          <div
+            class="relative"
+            colspan="1"
+            role="columnheader"
+            style="box-sizing: border-box; flex: 90 0 auto; min-width: 80px; width: 90px; position: relative;"
+          />
+          <div
+            class="relative"
+            colspan="1"
+            role="columnheader"
+            style="box-sizing: border-box; flex: 60 0 auto; min-width: 50px; width: 60px; position: relative;"
+          />
+          <div
+            class="relative"
+            colspan="1"
+            data-sticky-first-right-td="true"
+            data-sticky-td="true"
+            role="columnheader"
+            style="box-sizing: border-box; flex: 80 0 auto; min-width: 60px; width: 80px; position: sticky; z-index: 3; right: 0px;"
+          />
+        </div>
+      </div>
+      <div
+        class="flex flex-col relative z-0 no-scrollbar gap-1"
+        role="rowgroup"
+      >
+        <div
+          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+          role="row"
+          style="display: flex; flex: 1 0 auto; min-width: 525px;"
+        >
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 250 0 auto; min-width: 30px; width: 250px; position: sticky; z-index: 3; left: 0px;"
+          >
+            84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            data-sticky-last-left-td="true"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 240 0 auto; min-width: 80px; width: 240px; position: sticky; z-index: 3; left: 250px;"
+          >
+            aleksandr@heathmonitoring.com
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+          >
+            2023-09-19T14:31:46.105Z
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+          >
+            Bender (old) Coingaming
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 120 0 auto; min-width: 30px; width: 120px;"
+          >
+            Pragmatic Play
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 70 0 auto; min-width: 60px; width: 70px;"
+          >
+            22.97
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 80 0 auto; min-width: 75px; width: 80px;"
+          >
+            <div
+              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-gray-100 text-lg text-gray-600 max-w-fit"
+            >
+              USD
+            </div>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 90 0 auto; min-width: 80px; width: 90px;"
+          >
+            <div
+              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
+            >
+              SUCCESS
+            </div>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 60 0 auto; min-width: 50px; width: 60px;"
+          >
+            <div
+              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
+            >
+              BET
+            </div>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+            data-sticky-first-right-td="true"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 80 0 auto; min-width: 60px; width: 80px; position: sticky; z-index: 3; right: 0px;"
+          >
+            <button
+              class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+              data-state="closed"
+              type="button"
+            >
+              <svg
+                class="text-moon-24"
+                fill="none"
+                height="1em"
+                viewBox="0 0 32 32"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                />
+              </svg>
+            </button>
+          </div>
+        </div>
+        <div
+          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+          role="row"
+          style="display: flex; flex: 1 0 auto; min-width: 525px;"
+        >
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 250 0 auto; min-width: 30px; width: 250px; position: sticky; z-index: 3; left: 0px;"
+          >
+            84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            data-sticky-last-left-td="true"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 240 0 auto; min-width: 80px; width: 240px; position: sticky; z-index: 3; left: 250px;"
+          >
+            aleksandr@heathmonitoring.com
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+          >
+            2023-09-19T14:31:46.105Z
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+          >
+            Bender (old) Coingaming
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 120 0 auto; min-width: 30px; width: 120px;"
+          >
+            Pragmatic Play
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 70 0 auto; min-width: 60px; width: 70px;"
+          >
+            22.97
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 80 0 auto; min-width: 75px; width: 80px;"
+          >
+            <div
+              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-gray-100 text-lg text-gray-600 max-w-fit"
+            >
+              USD
+            </div>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 90 0 auto; min-width: 80px; width: 90px;"
+          >
+            <div
+              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
+            >
+              SUCCESS
+            </div>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 60 0 auto; min-width: 50px; width: 60px;"
+          >
+            <div
+              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
+            >
+              BET
+            </div>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+            data-sticky-first-right-td="true"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 80 0 auto; min-width: 60px; width: 80px; position: sticky; z-index: 3; right: 0px;"
+          >
+            <button
+              class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+              data-state="closed"
+              type="button"
+            >
+              <svg
+                class="text-moon-24"
+                fill="none"
+                height="1em"
+                viewBox="0 0 32 32"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                />
+              </svg>
+            </button>
+          </div>
+        </div>
+        <div
+          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+          role="row"
+          style="display: flex; flex: 1 0 auto; min-width: 525px;"
+        >
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 250 0 auto; min-width: 30px; width: 250px; position: sticky; z-index: 3; left: 0px;"
+          >
+            84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            data-sticky-last-left-td="true"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 240 0 auto; min-width: 80px; width: 240px; position: sticky; z-index: 3; left: 250px;"
+          >
+            aleksandr@heathmonitoring.com
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+          >
+            2023-09-19T14:31:46.105Z
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+          >
+            Bender (old) Coingaming
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 120 0 auto; min-width: 30px; width: 120px;"
+          >
+            Pragmatic Play
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 70 0 auto; min-width: 60px; width: 70px;"
+          >
+            22.97
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 80 0 auto; min-width: 75px; width: 80px;"
+          >
+            <div
+              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-gray-100 text-lg text-gray-600 max-w-fit"
+            >
+              USD
+            </div>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 90 0 auto; min-width: 80px; width: 90px;"
+          >
+            <div
+              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
+            >
+              SUCCESS
+            </div>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 60 0 auto; min-width: 50px; width: 60px;"
+          >
+            <div
+              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
+            >
+              BET
+            </div>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+            data-sticky-first-right-td="true"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 80 0 auto; min-width: 60px; width: 80px; position: sticky; z-index: 3; right: 0px;"
+          >
+            <button
+              class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+              data-state="closed"
+              type="button"
+            >
+              <svg
+                class="text-moon-24"
+                fill="none"
+                height="1em"
+                viewBox="0 0 32 32"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                />
+              </svg>
+            </button>
+          </div>
+        </div>
+        <div
+          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+          role="row"
+          style="display: flex; flex: 1 0 auto; min-width: 525px;"
+        >
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 250 0 auto; min-width: 30px; width: 250px; position: sticky; z-index: 3; left: 0px;"
+          >
+            84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            data-sticky-last-left-td="true"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 240 0 auto; min-width: 80px; width: 240px; position: sticky; z-index: 3; left: 250px;"
+          >
+            aleksandr@heathmonitoring.com
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+          >
+            2023-09-19T14:31:46.105Z
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+          >
+            Bender (old) Coingaming
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 120 0 auto; min-width: 30px; width: 120px;"
+          >
+            Pragmatic Play
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 70 0 auto; min-width: 60px; width: 70px;"
+          >
+            22.97
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 80 0 auto; min-width: 75px; width: 80px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-              data-sticky-td="true"
-              role="cell"
-              style="box-sizing: border-box; flex: 250 0 auto; min-width: 30px; width: 250px; position: sticky; z-index: 3; left: 0px;"
+              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-gray-100 text-lg text-gray-600 max-w-fit"
             >
-              84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546
+              USD
             </div>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 90 0 auto; min-width: 80px; width: 90px;"
+          >
             <div
-              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              data-sticky-last-left-td="true"
-              data-sticky-td="true"
-              role="cell"
-              style="box-sizing: border-box; flex: 240 0 auto; min-width: 80px; width: 240px; position: sticky; z-index: 3; left: 250px;"
+              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
             >
-              aleksandr@heathmonitoring.com
+              SUCCESS
             </div>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 60 0 auto; min-width: 50px; width: 60px;"
+          >
             <div
-              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
             >
-              2023-09-19T14:31:46.105Z
+              BET
             </div>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+            data-sticky-first-right-td="true"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 80 0 auto; min-width: 60px; width: 80px; position: sticky; z-index: 3; right: 0px;"
+          >
+            <button
+              class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+              data-state="closed"
+              type="button"
+            >
+              <svg
+                class="text-moon-24"
+                fill="none"
+                height="1em"
+                viewBox="0 0 32 32"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                />
+              </svg>
+            </button>
+          </div>
+        </div>
+        <div
+          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+          role="row"
+          style="display: flex; flex: 1 0 auto; min-width: 525px;"
+        >
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 250 0 auto; min-width: 30px; width: 250px; position: sticky; z-index: 3; left: 0px;"
+          >
+            84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            data-sticky-last-left-td="true"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 240 0 auto; min-width: 80px; width: 240px; position: sticky; z-index: 3; left: 250px;"
+          >
+            aleksandr@heathmonitoring.com
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+          >
+            2023-09-19T14:31:46.105Z
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+          >
+            Bender (old) Coingaming
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 120 0 auto; min-width: 30px; width: 120px;"
+          >
+            Pragmatic Play
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 70 0 auto; min-width: 60px; width: 70px;"
+          >
+            22.97
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 80 0 auto; min-width: 75px; width: 80px;"
+          >
             <div
-              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-gray-100 text-lg text-gray-600 max-w-fit"
             >
-              Bender (old) Coingaming
+              USD
             </div>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 90 0 auto; min-width: 80px; width: 90px;"
+          >
             <div
-              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 120 0 auto; min-width: 30px; width: 120px;"
+              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
             >
-              Pragmatic Play
+              SUCCESS
             </div>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 60 0 auto; min-width: 50px; width: 60px;"
+          >
             <div
-              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 70 0 auto; min-width: 60px; width: 70px;"
+              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
             >
-              22.97
+              BET
             </div>
-            <div
-              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 80 0 auto; min-width: 75px; width: 80px;"
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+            data-sticky-first-right-td="true"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 80 0 auto; min-width: 60px; width: 80px; position: sticky; z-index: 3; right: 0px;"
+          >
+            <button
+              class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+              data-state="closed"
+              type="button"
             >
-              <div
-                class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-gray-100 text-lg text-gray-600 max-w-fit"
+              <svg
+                class="text-moon-24"
+                fill="none"
+                height="1em"
+                viewBox="0 0 32 32"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
               >
-                USD
-              </div>
-            </div>
+                <path
+                  d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                />
+              </svg>
+            </button>
+          </div>
+        </div>
+        <div
+          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+          role="row"
+          style="display: flex; flex: 1 0 auto; min-width: 525px;"
+        >
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 250 0 auto; min-width: 30px; width: 250px; position: sticky; z-index: 3; left: 0px;"
+          >
+            84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            data-sticky-last-left-td="true"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 240 0 auto; min-width: 80px; width: 240px; position: sticky; z-index: 3; left: 250px;"
+          >
+            aleksandr@heathmonitoring.com
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+          >
+            2023-09-19T14:31:46.105Z
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+          >
+            Bender (old) Coingaming
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 120 0 auto; min-width: 30px; width: 120px;"
+          >
+            Pragmatic Play
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 70 0 auto; min-width: 60px; width: 70px;"
+          >
+            22.97
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 80 0 auto; min-width: 75px; width: 80px;"
+          >
             <div
-              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 90 0 auto; min-width: 80px; width: 90px;"
+              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-gray-100 text-lg text-gray-600 max-w-fit"
             >
-              <div
-                class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
-              >
-                SUCCESS
-              </div>
+              USD
             </div>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 90 0 auto; min-width: 80px; width: 90px;"
+          >
             <div
-              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 60 0 auto; min-width: 50px; width: 60px;"
+              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
             >
-              <div
-                class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
-              >
-                BET
-              </div>
+              SUCCESS
             </div>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 60 0 auto; min-width: 50px; width: 60px;"
+          >
             <div
-              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
-              data-sticky-first-right-td="true"
-              data-sticky-td="true"
-              role="cell"
-              style="box-sizing: border-box; flex: 80 0 auto; min-width: 60px; width: 80px; position: sticky; z-index: 3; right: 0px;"
+              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
             >
-              <button
-                class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
-                data-state="closed"
-                type="button"
-              >
-                <svg
-                  class="text-moon-24"
-                  fill="none"
-                  height="1em"
-                  viewBox="0 0 32 32"
-                  width="1em"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                  />
-                </svg>
-              </button>
+              BET
             </div>
           </div>
           <div
-            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-            role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 525px;"
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+            data-sticky-first-right-td="true"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 80 0 auto; min-width: 60px; width: 80px; position: sticky; z-index: 3; right: 0px;"
+          >
+            <button
+              class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+              data-state="closed"
+              type="button"
+            >
+              <svg
+                class="text-moon-24"
+                fill="none"
+                height="1em"
+                viewBox="0 0 32 32"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                />
+              </svg>
+            </button>
+          </div>
+        </div>
+        <div
+          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+          role="row"
+          style="display: flex; flex: 1 0 auto; min-width: 525px;"
+        >
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 250 0 auto; min-width: 30px; width: 250px; position: sticky; z-index: 3; left: 0px;"
+          >
+            84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            data-sticky-last-left-td="true"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 240 0 auto; min-width: 80px; width: 240px; position: sticky; z-index: 3; left: 250px;"
+          >
+            aleksandr@heathmonitoring.com
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+          >
+            2023-09-19T14:31:46.105Z
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+          >
+            Bender (old) Coingaming
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 120 0 auto; min-width: 30px; width: 120px;"
+          >
+            Pragmatic Play
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 70 0 auto; min-width: 60px; width: 70px;"
+          >
+            22.97
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 80 0 auto; min-width: 75px; width: 80px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-              data-sticky-td="true"
-              role="cell"
-              style="box-sizing: border-box; flex: 250 0 auto; min-width: 30px; width: 250px; position: sticky; z-index: 3; left: 0px;"
+              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-gray-100 text-lg text-gray-600 max-w-fit"
             >
-              84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546
+              USD
             </div>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 90 0 auto; min-width: 80px; width: 90px;"
+          >
             <div
-              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              data-sticky-last-left-td="true"
-              data-sticky-td="true"
-              role="cell"
-              style="box-sizing: border-box; flex: 240 0 auto; min-width: 80px; width: 240px; position: sticky; z-index: 3; left: 250px;"
+              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
             >
-              aleksandr@heathmonitoring.com
+              SUCCESS
             </div>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 60 0 auto; min-width: 50px; width: 60px;"
+          >
             <div
-              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
             >
-              2023-09-19T14:31:46.105Z
+              BET
             </div>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+            data-sticky-first-right-td="true"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 80 0 auto; min-width: 60px; width: 80px; position: sticky; z-index: 3; right: 0px;"
+          >
+            <button
+              class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+              data-state="closed"
+              type="button"
+            >
+              <svg
+                class="text-moon-24"
+                fill="none"
+                height="1em"
+                viewBox="0 0 32 32"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                />
+              </svg>
+            </button>
+          </div>
+        </div>
+        <div
+          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+          role="row"
+          style="display: flex; flex: 1 0 auto; min-width: 525px;"
+        >
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 250 0 auto; min-width: 30px; width: 250px; position: sticky; z-index: 3; left: 0px;"
+          >
+            84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            data-sticky-last-left-td="true"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 240 0 auto; min-width: 80px; width: 240px; position: sticky; z-index: 3; left: 250px;"
+          >
+            aleksandr@heathmonitoring.com
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+          >
+            2023-09-19T14:31:46.105Z
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+          >
+            Bender (old) Coingaming
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 120 0 auto; min-width: 30px; width: 120px;"
+          >
+            Pragmatic Play
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 70 0 auto; min-width: 60px; width: 70px;"
+          >
+            22.97
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 80 0 auto; min-width: 75px; width: 80px;"
+          >
             <div
-              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-gray-100 text-lg text-gray-600 max-w-fit"
             >
-              Bender (old) Coingaming
+              USD
             </div>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 90 0 auto; min-width: 80px; width: 90px;"
+          >
             <div
-              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 120 0 auto; min-width: 30px; width: 120px;"
+              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
             >
-              Pragmatic Play
+              SUCCESS
             </div>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 60 0 auto; min-width: 50px; width: 60px;"
+          >
             <div
-              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 70 0 auto; min-width: 60px; width: 70px;"
+              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
             >
-              22.97
+              BET
             </div>
-            <div
-              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 80 0 auto; min-width: 75px; width: 80px;"
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+            data-sticky-first-right-td="true"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 80 0 auto; min-width: 60px; width: 80px; position: sticky; z-index: 3; right: 0px;"
+          >
+            <button
+              class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+              data-state="closed"
+              type="button"
             >
-              <div
-                class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-gray-100 text-lg text-gray-600 max-w-fit"
+              <svg
+                class="text-moon-24"
+                fill="none"
+                height="1em"
+                viewBox="0 0 32 32"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
               >
-                USD
-              </div>
-            </div>
+                <path
+                  d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                />
+              </svg>
+            </button>
+          </div>
+        </div>
+        <div
+          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+          role="row"
+          style="display: flex; flex: 1 0 auto; min-width: 525px;"
+        >
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 250 0 auto; min-width: 30px; width: 250px; position: sticky; z-index: 3; left: 0px;"
+          >
+            84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            data-sticky-last-left-td="true"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 240 0 auto; min-width: 80px; width: 240px; position: sticky; z-index: 3; left: 250px;"
+          >
+            aleksandr@heathmonitoring.com
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+          >
+            2023-09-19T14:31:46.105Z
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+          >
+            Bender (old) Coingaming
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 120 0 auto; min-width: 30px; width: 120px;"
+          >
+            Pragmatic Play
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 70 0 auto; min-width: 60px; width: 70px;"
+          >
+            22.97
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 80 0 auto; min-width: 75px; width: 80px;"
+          >
             <div
-              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 90 0 auto; min-width: 80px; width: 90px;"
+              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-gray-100 text-lg text-gray-600 max-w-fit"
             >
-              <div
-                class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
-              >
-                SUCCESS
-              </div>
+              USD
             </div>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 90 0 auto; min-width: 80px; width: 90px;"
+          >
             <div
-              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 60 0 auto; min-width: 50px; width: 60px;"
+              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
             >
-              <div
-                class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
-              >
-                BET
-              </div>
+              SUCCESS
             </div>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 60 0 auto; min-width: 50px; width: 60px;"
+          >
             <div
-              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
-              data-sticky-first-right-td="true"
-              data-sticky-td="true"
-              role="cell"
-              style="box-sizing: border-box; flex: 80 0 auto; min-width: 60px; width: 80px; position: sticky; z-index: 3; right: 0px;"
+              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
             >
-              <button
-                class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
-                data-state="closed"
-                type="button"
-              >
-                <svg
-                  class="text-moon-24"
-                  fill="none"
-                  height="1em"
-                  viewBox="0 0 32 32"
-                  width="1em"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                  />
-                </svg>
-              </button>
+              BET
             </div>
           </div>
           <div
-            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-            role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 525px;"
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+            data-sticky-first-right-td="true"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 80 0 auto; min-width: 60px; width: 80px; position: sticky; z-index: 3; right: 0px;"
+          >
+            <button
+              class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+              data-state="closed"
+              type="button"
+            >
+              <svg
+                class="text-moon-24"
+                fill="none"
+                height="1em"
+                viewBox="0 0 32 32"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                />
+              </svg>
+            </button>
+          </div>
+        </div>
+        <div
+          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+          role="row"
+          style="display: flex; flex: 1 0 auto; min-width: 525px;"
+        >
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 250 0 auto; min-width: 30px; width: 250px; position: sticky; z-index: 3; left: 0px;"
+          >
+            84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            data-sticky-last-left-td="true"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 240 0 auto; min-width: 80px; width: 240px; position: sticky; z-index: 3; left: 250px;"
+          >
+            aleksandr@heathmonitoring.com
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+          >
+            2023-09-19T14:31:46.105Z
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+          >
+            Bender (old) Coingaming
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 120 0 auto; min-width: 30px; width: 120px;"
+          >
+            Pragmatic Play
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 70 0 auto; min-width: 60px; width: 70px;"
+          >
+            22.97
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 80 0 auto; min-width: 75px; width: 80px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-              data-sticky-td="true"
-              role="cell"
-              style="box-sizing: border-box; flex: 250 0 auto; min-width: 30px; width: 250px; position: sticky; z-index: 3; left: 0px;"
+              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-gray-100 text-lg text-gray-600 max-w-fit"
             >
-              84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546
+              USD
             </div>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 90 0 auto; min-width: 80px; width: 90px;"
+          >
             <div
-              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              data-sticky-last-left-td="true"
-              data-sticky-td="true"
-              role="cell"
-              style="box-sizing: border-box; flex: 240 0 auto; min-width: 80px; width: 240px; position: sticky; z-index: 3; left: 250px;"
+              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
             >
-              aleksandr@heathmonitoring.com
+              SUCCESS
             </div>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 60 0 auto; min-width: 50px; width: 60px;"
+          >
             <div
-              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
             >
-              2023-09-19T14:31:46.105Z
+              BET
             </div>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+            data-sticky-first-right-td="true"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 80 0 auto; min-width: 60px; width: 80px; position: sticky; z-index: 3; right: 0px;"
+          >
+            <button
+              class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+              data-state="closed"
+              type="button"
+            >
+              <svg
+                class="text-moon-24"
+                fill="none"
+                height="1em"
+                viewBox="0 0 32 32"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                />
+              </svg>
+            </button>
+          </div>
+        </div>
+        <div
+          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+          role="row"
+          style="display: flex; flex: 1 0 auto; min-width: 525px;"
+        >
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 250 0 auto; min-width: 30px; width: 250px; position: sticky; z-index: 3; left: 0px;"
+          >
+            84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            data-sticky-last-left-td="true"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 240 0 auto; min-width: 80px; width: 240px; position: sticky; z-index: 3; left: 250px;"
+          >
+            aleksandr@heathmonitoring.com
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+          >
+            2023-09-19T14:31:46.105Z
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+          >
+            Bender (old) Coingaming
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 120 0 auto; min-width: 30px; width: 120px;"
+          >
+            Pragmatic Play
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 70 0 auto; min-width: 60px; width: 70px;"
+          >
+            22.97
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 80 0 auto; min-width: 75px; width: 80px;"
+          >
             <div
-              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-gray-100 text-lg text-gray-600 max-w-fit"
             >
-              Bender (old) Coingaming
+              USD
             </div>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 90 0 auto; min-width: 80px; width: 90px;"
+          >
             <div
-              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 120 0 auto; min-width: 30px; width: 120px;"
+              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
             >
-              Pragmatic Play
+              SUCCESS
             </div>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 60 0 auto; min-width: 50px; width: 60px;"
+          >
             <div
-              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 70 0 auto; min-width: 60px; width: 70px;"
+              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
             >
-              22.97
+              BET
             </div>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+            data-sticky-first-right-td="true"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 80 0 auto; min-width: 60px; width: 80px; position: sticky; z-index: 3; right: 0px;"
+          >
+            <button
+              class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+              data-state="closed"
+              type="button"
+            >
+              <svg
+                class="text-moon-24"
+                fill="none"
+                height="1em"
+                viewBox="0 0 32 32"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                />
+              </svg>
+            </button>
+          </div>
+        </div>
+        <div
+          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+          role="row"
+          style="display: flex; flex: 1 0 auto; min-width: 525px;"
+        >
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 250 0 auto; min-width: 30px; width: 250px; position: sticky; z-index: 3; left: 0px;"
+          >
+            84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            data-sticky-last-left-td="true"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 240 0 auto; min-width: 80px; width: 240px; position: sticky; z-index: 3; left: 250px;"
+          >
+            aleksandr@heathmonitoring.com
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+          >
+            2023-09-19T14:31:46.105Z
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+          >
+            Bender (old) Coingaming
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 120 0 auto; min-width: 30px; width: 120px;"
+          >
+            Pragmatic Play
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 70 0 auto; min-width: 60px; width: 70px;"
+          >
+            22.97
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 80 0 auto; min-width: 75px; width: 80px;"
+          >
             <div
-              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 80 0 auto; min-width: 75px; width: 80px;"
+              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-gray-100 text-lg text-gray-600 max-w-fit"
             >
-              <div
-                class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-gray-100 text-lg text-gray-600 max-w-fit"
-              >
-                USD
-              </div>
+              USD
             </div>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 90 0 auto; min-width: 80px; width: 90px;"
+          >
             <div
-              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 90 0 auto; min-width: 80px; width: 90px;"
+              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
             >
-              <div
-                class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
-              >
-                SUCCESS
-              </div>
+              SUCCESS
             </div>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 60 0 auto; min-width: 50px; width: 60px;"
+          >
             <div
-              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 60 0 auto; min-width: 50px; width: 60px;"
+              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
             >
-              <div
-                class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
-              >
-                BET
-              </div>
+              BET
             </div>
-            <div
-              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
-              data-sticky-first-right-td="true"
-              data-sticky-td="true"
-              role="cell"
-              style="box-sizing: border-box; flex: 80 0 auto; min-width: 60px; width: 80px; position: sticky; z-index: 3; right: 0px;"
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+            data-sticky-first-right-td="true"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 80 0 auto; min-width: 60px; width: 80px; position: sticky; z-index: 3; right: 0px;"
+          >
+            <button
+              class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+              data-state="closed"
+              type="button"
             >
-              <button
-                class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
-                data-state="closed"
-                type="button"
+              <svg
+                class="text-moon-24"
+                fill="none"
+                height="1em"
+                viewBox="0 0 32 32"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
               >
-                <svg
-                  class="text-moon-24"
-                  fill="none"
-                  height="1em"
-                  viewBox="0 0 32 32"
-                  width="1em"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                  />
-                </svg>
-              </button>
-            </div>
+                <path
+                  d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                />
+              </svg>
+            </button>
           </div>
+        </div>
+        <div
+          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+          role="row"
+          style="display: flex; flex: 1 0 auto; min-width: 525px;"
+        >
           <div
-            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-            role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 525px;"
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 250 0 auto; min-width: 30px; width: 250px; position: sticky; z-index: 3; left: 0px;"
+          >
+            84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            data-sticky-last-left-td="true"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 240 0 auto; min-width: 80px; width: 240px; position: sticky; z-index: 3; left: 250px;"
+          >
+            aleksandr@heathmonitoring.com
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+          >
+            2023-09-19T14:31:46.105Z
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+          >
+            Bender (old) Coingaming
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 120 0 auto; min-width: 30px; width: 120px;"
+          >
+            Pragmatic Play
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 70 0 auto; min-width: 60px; width: 70px;"
+          >
+            22.97
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 80 0 auto; min-width: 75px; width: 80px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-              data-sticky-td="true"
-              role="cell"
-              style="box-sizing: border-box; flex: 250 0 auto; min-width: 30px; width: 250px; position: sticky; z-index: 3; left: 0px;"
-            >
-              84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              data-sticky-last-left-td="true"
-              data-sticky-td="true"
-              role="cell"
-              style="box-sizing: border-box; flex: 240 0 auto; min-width: 80px; width: 240px; position: sticky; z-index: 3; left: 250px;"
-            >
-              aleksandr@heathmonitoring.com
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
-            >
-              2023-09-19T14:31:46.105Z
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
-            >
-              Bender (old) Coingaming
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 120 0 auto; min-width: 30px; width: 120px;"
-            >
-              Pragmatic Play
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 70 0 auto; min-width: 60px; width: 70px;"
-            >
-              22.97
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 80 0 auto; min-width: 75px; width: 80px;"
+              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-gray-100 text-lg text-gray-600 max-w-fit"
             >
-              <div
-                class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-gray-100 text-lg text-gray-600 max-w-fit"
-              >
-                USD
-              </div>
+              USD
             </div>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 90 0 auto; min-width: 80px; width: 90px;"
+          >
             <div
-              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 90 0 auto; min-width: 80px; width: 90px;"
+              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
             >
-              <div
-                class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
-              >
-                SUCCESS
-              </div>
+              SUCCESS
             </div>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 60 0 auto; min-width: 50px; width: 60px;"
+          >
             <div
-              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 60 0 auto; min-width: 50px; width: 60px;"
+              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
             >
-              <div
-                class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
-              >
-                BET
-              </div>
+              BET
             </div>
-            <div
-              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
-              data-sticky-first-right-td="true"
-              data-sticky-td="true"
-              role="cell"
-              style="box-sizing: border-box; flex: 80 0 auto; min-width: 60px; width: 80px; position: sticky; z-index: 3; right: 0px;"
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+            data-sticky-first-right-td="true"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 80 0 auto; min-width: 60px; width: 80px; position: sticky; z-index: 3; right: 0px;"
+          >
+            <button
+              class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+              data-state="closed"
+              type="button"
             >
-              <button
-                class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
-                data-state="closed"
-                type="button"
+              <svg
+                class="text-moon-24"
+                fill="none"
+                height="1em"
+                viewBox="0 0 32 32"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
               >
-                <svg
-                  class="text-moon-24"
-                  fill="none"
-                  height="1em"
-                  viewBox="0 0 32 32"
-                  width="1em"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                  />
-                </svg>
-              </button>
-            </div>
+                <path
+                  d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                />
+              </svg>
+            </button>
           </div>
+        </div>
+        <div
+          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+          role="row"
+          style="display: flex; flex: 1 0 auto; min-width: 525px;"
+        >
           <div
-            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-            role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 525px;"
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 250 0 auto; min-width: 30px; width: 250px; position: sticky; z-index: 3; left: 0px;"
+          >
+            84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            data-sticky-last-left-td="true"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 240 0 auto; min-width: 80px; width: 240px; position: sticky; z-index: 3; left: 250px;"
+          >
+            aleksandr@heathmonitoring.com
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+          >
+            2023-09-19T14:31:46.105Z
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+          >
+            Bender (old) Coingaming
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 120 0 auto; min-width: 30px; width: 120px;"
+          >
+            Pragmatic Play
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 70 0 auto; min-width: 60px; width: 70px;"
+          >
+            22.97
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 80 0 auto; min-width: 75px; width: 80px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-              data-sticky-td="true"
-              role="cell"
-              style="box-sizing: border-box; flex: 250 0 auto; min-width: 30px; width: 250px; position: sticky; z-index: 3; left: 0px;"
-            >
-              84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              data-sticky-last-left-td="true"
-              data-sticky-td="true"
-              role="cell"
-              style="box-sizing: border-box; flex: 240 0 auto; min-width: 80px; width: 240px; position: sticky; z-index: 3; left: 250px;"
-            >
-              aleksandr@heathmonitoring.com
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-gray-100 text-lg text-gray-600 max-w-fit"
             >
-              2023-09-19T14:31:46.105Z
+              USD
             </div>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 90 0 auto; min-width: 80px; width: 90px;"
+          >
             <div
-              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
             >
-              Bender (old) Coingaming
+              SUCCESS
             </div>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 60 0 auto; min-width: 50px; width: 60px;"
+          >
             <div
-              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 120 0 auto; min-width: 30px; width: 120px;"
+              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
             >
-              Pragmatic Play
+              BET
             </div>
-            <div
-              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 70 0 auto; min-width: 60px; width: 70px;"
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+            data-sticky-first-right-td="true"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 80 0 auto; min-width: 60px; width: 80px; position: sticky; z-index: 3; right: 0px;"
+          >
+            <button
+              class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+              data-state="closed"
+              type="button"
             >
-              22.97
-            </div>
+              <svg
+                class="text-moon-24"
+                fill="none"
+                height="1em"
+                viewBox="0 0 32 32"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                />
+              </svg>
+            </button>
+          </div>
+        </div>
+        <div
+          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+          role="row"
+          style="display: flex; flex: 1 0 auto; min-width: 525px;"
+        >
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 250 0 auto; min-width: 30px; width: 250px; position: sticky; z-index: 3; left: 0px;"
+          >
+            84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            data-sticky-last-left-td="true"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 240 0 auto; min-width: 80px; width: 240px; position: sticky; z-index: 3; left: 250px;"
+          >
+            aleksandr@heathmonitoring.com
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+          >
+            2023-09-19T14:31:46.105Z
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+          >
+            Bender (old) Coingaming
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 120 0 auto; min-width: 30px; width: 120px;"
+          >
+            Pragmatic Play
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 70 0 auto; min-width: 60px; width: 70px;"
+          >
+            22.97
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 80 0 auto; min-width: 75px; width: 80px;"
+          >
             <div
-              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 80 0 auto; min-width: 75px; width: 80px;"
+              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-gray-100 text-lg text-gray-600 max-w-fit"
             >
-              <div
-                class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-gray-100 text-lg text-gray-600 max-w-fit"
-              >
-                USD
-              </div>
+              USD
             </div>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 90 0 auto; min-width: 80px; width: 90px;"
+          >
             <div
-              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 90 0 auto; min-width: 80px; width: 90px;"
+              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
             >
-              <div
-                class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
-              >
-                SUCCESS
-              </div>
+              SUCCESS
             </div>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 60 0 auto; min-width: 50px; width: 60px;"
+          >
             <div
-              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 60 0 auto; min-width: 50px; width: 60px;"
+              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
             >
-              <div
-                class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
-              >
-                BET
-              </div>
+              BET
             </div>
-            <div
-              class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
-              data-sticky-first-right-td="true"
-              data-sticky-td="true"
-              role="cell"
-              style="box-sizing: border-box; flex: 80 0 auto; min-width: 60px; width: 80px; position: sticky; z-index: 3; right: 0px;"
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+            data-sticky-first-right-td="true"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 80 0 auto; min-width: 60px; width: 80px; position: sticky; z-index: 3; right: 0px;"
+          >
+            <button
+              class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+              data-state="closed"
+              type="button"
             >
-              <button
-                class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
-                data-state="closed"
-                type="button"
+              <svg
+                class="text-moon-24"
+                fill="none"
+                height="1em"
+                viewBox="0 0 32 32"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
               >
-                <svg
-                  class="text-moon-24"
-                  fill="none"
-                  height="1em"
-                  viewBox="0 0 32 32"
-                  width="1em"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                  />
-                </svg>
-              </button>
-            </div>
+                <path
+                  d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                />
+              </svg>
+            </button>
           </div>
         </div>
-      </div>
-    </div>
-  </body>,
-  "container": <div>
-    <div
-      class="table-wrapper sm:overflow-auto overflow-scroll no-scrollbar flex flex-col sticky"
-      role="table"
-      style="width: 900px; height: 400px;"
-    >
-      <div
-        class="flex flex-col sticky top-0 z-[99]"
-      >
         <div
-          class="flex rounded-moon-s-sm sticky"
+          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
           style="display: flex; flex: 1 0 auto; min-width: 525px;"
         >
           <div
-            class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
-            colspan="2"
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 250 0 auto; min-width: 30px; width: 250px; position: sticky; z-index: 3; left: 0px;"
+          >
+            84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             data-sticky-last-left-td="true"
             data-sticky-td="true"
-            role="columnheader"
-            style="box-sizing: border-box; flex: 490 0 auto; min-width: 110px; width: 490px; position: sticky; z-index: 3; left: 0px;"
+            role="cell"
+            style="box-sizing: border-box; flex: 240 0 auto; min-width: 80px; width: 240px; position: sticky; z-index: 3; left: 250px;"
+          >
+            aleksandr@heathmonitoring.com
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+          >
+            2023-09-19T14:31:46.105Z
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+          >
+            Bender (old) Coingaming
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 120 0 auto; min-width: 30px; width: 120px;"
+          >
+            Pragmatic Play
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 70 0 auto; min-width: 60px; width: 70px;"
+          >
+            22.97
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 80 0 auto; min-width: 75px; width: 80px;"
           >
-            Transactions
             <div
-              class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
-              draggable="false"
-              role="separator"
-              style="cursor: col-resize;"
-            />
+              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-gray-100 text-lg text-gray-600 max-w-fit"
+            >
+              USD
+            </div>
           </div>
           <div
-            class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
-            colspan="7"
-            role="columnheader"
-            style="box-sizing: border-box; flex: 720 0 auto; min-width: 355px; width: 720px; position: relative;"
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 90 0 auto; min-width: 80px; width: 90px;"
           >
-            Info
             <div
-              class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
-              draggable="false"
-              role="separator"
-              style="cursor: col-resize;"
-            />
+              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
+            >
+              SUCCESS
+            </div>
           </div>
           <div
-            class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0"
-            colspan="1"
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 60 0 auto; min-width: 50px; width: 60px;"
+          >
+            <div
+              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
+            >
+              BET
+            </div>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
             data-sticky-first-right-td="true"
             data-sticky-td="true"
-            role="columnheader"
+            role="cell"
             style="box-sizing: border-box; flex: 80 0 auto; min-width: 60px; width: 80px; position: sticky; z-index: 3; right: 0px;"
           >
-            Actions
-            <div
-              class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
-              draggable="false"
-              role="separator"
-              style="cursor: col-resize;"
-            />
+            <button
+              class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+              data-state="closed"
+              type="button"
+            >
+              <svg
+                class="text-moon-24"
+                fill="none"
+                height="1em"
+                viewBox="0 0 32 32"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                />
+              </svg>
+            </button>
           </div>
         </div>
         <div
-          class="flex rounded-moon-s-sm sticky"
+          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
           style="display: flex; flex: 1 0 auto; min-width: 525px;"
         >
           <div
-            class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
-            colspan="1"
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             data-sticky-td="true"
-            role="columnheader"
+            role="cell"
             style="box-sizing: border-box; flex: 250 0 auto; min-width: 30px; width: 250px; position: sticky; z-index: 3; left: 0px;"
           >
-            Transaction UUID
-            <div
-              class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
-              draggable="false"
-              role="separator"
-              style="cursor: col-resize;"
-            />
+            84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546
           </div>
           <div
-            class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
-            colspan="1"
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             data-sticky-last-left-td="true"
             data-sticky-td="true"
-            role="columnheader"
+            role="cell"
             style="box-sizing: border-box; flex: 240 0 auto; min-width: 80px; width: 240px; position: sticky; z-index: 3; left: 250px;"
           >
-            User & Supplier user
-            <div
-              class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
-              draggable="false"
-              role="separator"
-              style="cursor: col-resize;"
-            />
+            aleksandr@heathmonitoring.com
           </div>
           <div
-            class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
-            colspan="1"
-            role="columnheader"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px; position: relative;"
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
           >
-            Process time
-            <div
-              class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
-              draggable="false"
-              role="separator"
-              style="cursor: col-resize;"
-            />
+            2023-09-19T14:31:46.105Z
           </div>
           <div
-            class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
-            colspan="1"
-            role="columnheader"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px; position: relative;"
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
           >
-            Client
-            <div
-              class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
-              draggable="false"
-              role="separator"
-              style="cursor: col-resize;"
-            />
+            Bender (old) Coingaming
           </div>
           <div
-            class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
-            colspan="1"
-            role="columnheader"
-            style="box-sizing: border-box; flex: 120 0 auto; min-width: 30px; width: 120px; position: relative;"
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 120 0 auto; min-width: 30px; width: 120px;"
           >
-            Game name & provider
-            <div
-              class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
-              draggable="false"
-              role="separator"
-              style="cursor: col-resize;"
-            />
+            Pragmatic Play
           </div>
           <div
-            class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
-            colspan="1"
-            role="columnheader"
-            style="box-sizing: border-box; flex: 70 0 auto; min-width: 60px; width: 70px; position: relative;"
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 70 0 auto; min-width: 60px; width: 70px;"
           >
-            Amount
-            <div
-              class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
-              draggable="false"
-              role="separator"
-              style="cursor: col-resize;"
-            />
+            22.97
           </div>
           <div
-            class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
-            colspan="1"
-            role="columnheader"
-            style="box-sizing: border-box; flex: 80 0 auto; min-width: 75px; width: 80px; position: relative;"
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 80 0 auto; min-width: 75px; width: 80px;"
           >
-            Currency
             <div
-              class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
-              draggable="false"
-              role="separator"
-              style="cursor: col-resize;"
-            />
+              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-gray-100 text-lg text-gray-600 max-w-fit"
+            >
+              USD
+            </div>
           </div>
           <div
-            class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
-            colspan="1"
-            role="columnheader"
-            style="box-sizing: border-box; flex: 90 0 auto; min-width: 80px; width: 90px; position: relative;"
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 90 0 auto; min-width: 80px; width: 90px;"
           >
-            Status
             <div
-              class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
-              draggable="false"
-              role="separator"
-              style="cursor: col-resize;"
-            />
+              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
+            >
+              SUCCESS
+            </div>
           </div>
           <div
-            class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
-            colspan="1"
-            role="columnheader"
-            style="box-sizing: border-box; flex: 60 0 auto; min-width: 50px; width: 60px; position: relative;"
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 60 0 auto; min-width: 50px; width: 60px;"
           >
-            Kind
             <div
-              class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
-              draggable="false"
-              role="separator"
-              style="cursor: col-resize;"
-            />
+              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
+            >
+              BET
+            </div>
           </div>
           <div
-            class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0"
-            colspan="1"
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
             data-sticky-first-right-td="true"
             data-sticky-td="true"
-            role="columnheader"
+            role="cell"
             style="box-sizing: border-box; flex: 80 0 auto; min-width: 60px; width: 80px; position: sticky; z-index: 3; right: 0px;"
           >
-            Actions
-            <div
-              class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
-              draggable="false"
-              role="separator"
-              style="cursor: col-resize;"
-            />
+            <button
+              class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+              data-state="closed"
+              type="button"
+            >
+              <svg
+                class="text-moon-24"
+                fill="none"
+                height="1em"
+                viewBox="0 0 32 32"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                />
+              </svg>
+            </button>
           </div>
         </div>
         <div
+          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
           style="display: flex; flex: 1 0 auto; min-width: 525px;"
         >
           <div
-            class="relative"
-            colspan="1"
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             data-sticky-td="true"
-            role="columnheader"
+            role="cell"
             style="box-sizing: border-box; flex: 250 0 auto; min-width: 30px; width: 250px; position: sticky; z-index: 3; left: 0px;"
-          />
+          >
+            84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546
+          </div>
           <div
-            class="relative"
-            colspan="1"
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             data-sticky-last-left-td="true"
             data-sticky-td="true"
-            role="columnheader"
+            role="cell"
             style="box-sizing: border-box; flex: 240 0 auto; min-width: 80px; width: 240px; position: sticky; z-index: 3; left: 250px;"
-          />
+          >
+            aleksandr@heathmonitoring.com
+          </div>
           <div
-            class="relative"
-            colspan="1"
-            role="columnheader"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px; position: relative;"
-          />
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+          >
+            2023-09-19T14:31:46.105Z
+          </div>
           <div
-            class="relative"
-            colspan="1"
-            role="columnheader"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px; position: relative;"
-          />
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+          >
+            Bender (old) Coingaming
+          </div>
           <div
-            class="relative"
-            colspan="1"
-            role="columnheader"
-            style="box-sizing: border-box; flex: 120 0 auto; min-width: 30px; width: 120px; position: relative;"
-          />
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 120 0 auto; min-width: 30px; width: 120px;"
+          >
+            Pragmatic Play
+          </div>
           <div
-            class="relative"
-            colspan="1"
-            role="columnheader"
-            style="box-sizing: border-box; flex: 70 0 auto; min-width: 60px; width: 70px; position: relative;"
-          />
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 70 0 auto; min-width: 60px; width: 70px;"
+          >
+            22.97
+          </div>
           <div
-            class="relative"
-            colspan="1"
-            role="columnheader"
-            style="box-sizing: border-box; flex: 80 0 auto; min-width: 75px; width: 80px; position: relative;"
-          />
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 80 0 auto; min-width: 75px; width: 80px;"
+          >
+            <div
+              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-gray-100 text-lg text-gray-600 max-w-fit"
+            >
+              USD
+            </div>
+          </div>
           <div
-            class="relative"
-            colspan="1"
-            role="columnheader"
-            style="box-sizing: border-box; flex: 90 0 auto; min-width: 80px; width: 90px; position: relative;"
-          />
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 90 0 auto; min-width: 80px; width: 90px;"
+          >
+            <div
+              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
+            >
+              SUCCESS
+            </div>
+          </div>
           <div
-            class="relative"
-            colspan="1"
-            role="columnheader"
-            style="box-sizing: border-box; flex: 60 0 auto; min-width: 50px; width: 60px; position: relative;"
-          />
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 60 0 auto; min-width: 50px; width: 60px;"
+          >
+            <div
+              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
+            >
+              BET
+            </div>
+          </div>
           <div
-            class="relative"
-            colspan="1"
+            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
             data-sticky-first-right-td="true"
             data-sticky-td="true"
-            role="columnheader"
+            role="cell"
             style="box-sizing: border-box; flex: 80 0 auto; min-width: 60px; width: 80px; position: sticky; z-index: 3; right: 0px;"
-          />
+          >
+            <button
+              class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+              data-state="closed"
+              type="button"
+            >
+              <svg
+                class="text-moon-24"
+                fill="none"
+                height="1em"
+                viewBox="0 0 32 32"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                />
+              </svg>
+            </button>
+          </div>
         </div>
-      </div>
-      <div
-        class="flex flex-col relative z-0 no-scrollbar gap-1"
-        role="rowgroup"
-      >
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
@@ -114388,2020 +120643,2731 @@ Object {
             </button>
           </div>
         </div>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`Table renders CustomContent 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="table-wrapper sm:overflow-auto overflow-scroll no-scrollbar flex flex-col sticky"
+        role="table"
+        style="width: 800px; height: 400px;"
+      >
         <div
-          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-          role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 525px;"
+          class="flex flex-col sticky top-0 z-[99]"
         >
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-            data-sticky-td="true"
-            role="cell"
-            style="box-sizing: border-box; flex: 250 0 auto; min-width: 30px; width: 250px; position: sticky; z-index: 3; left: 0px;"
+            class="flex rounded-moon-s-sm sticky"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 300px;"
           >
-            84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546
+            <div
+              class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+              colspan="1"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px; position: relative;"
+            >
+              <span
+                style="cursor: pointer;"
+                title="Toggle All Rows Expanded"
+              >
+                Expand
+                👉
+              </span>
+              <div
+                class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+                draggable="false"
+                role="separator"
+                style="cursor: col-resize;"
+              />
+            </div>
+            <div
+              class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+              colspan="1"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: relative;"
+            >
+              First Name
+              <div
+                class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+                draggable="false"
+                role="separator"
+                style="cursor: col-resize;"
+              />
+            </div>
+            <div
+              class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+              colspan="1"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px; position: relative;"
+            >
+              Age
+              <div
+                class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+                draggable="false"
+                role="separator"
+                style="cursor: col-resize;"
+              />
+            </div>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            data-sticky-last-left-td="true"
-            data-sticky-td="true"
-            role="cell"
-            style="box-sizing: border-box; flex: 240 0 auto; min-width: 80px; width: 240px; position: sticky; z-index: 3; left: 250px;"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 300px;"
           >
-            aleksandr@heathmonitoring.com
+            <div
+              class="relative"
+              colspan="1"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px; position: relative;"
+            />
+            <div
+              class="relative"
+              colspan="1"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: relative;"
+            />
+            <div
+              class="relative"
+              colspan="1"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px; position: relative;"
+            />
           </div>
+        </div>
+        <div
+          class="flex flex-col relative z-0 no-scrollbar gap-1"
+          role="rowgroup"
+        >
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 300px;"
           >
-            2023-09-19T14:31:46.105Z
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                👉
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              Test
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                0
+              </span>
+            </div>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 300px;"
           >
-            Bender (old) Coingaming
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                👉
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              Test
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                30
+              </span>
+            </div>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 120 0 auto; min-width: 30px; width: 120px;"
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 300px;"
           >
-            Pragmatic Play
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                👉
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              Test
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                60
+              </span>
+            </div>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 70 0 auto; min-width: 60px; width: 70px;"
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 300px;"
           >
-            22.97
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                👉
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              Test
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                90
+              </span>
+            </div>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 80 0 auto; min-width: 75px; width: 80px;"
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 300px;"
+          >
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                👉
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              Test
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                120
+              </span>
+            </div>
+          </div>
+          <div
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 300px;"
+          >
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                👉
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              Test
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                150
+              </span>
+            </div>
+          </div>
+          <div
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 300px;"
+          >
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                👉
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              Test
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                180
+              </span>
+            </div>
+          </div>
+          <div
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 300px;"
           >
             <div
-              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-gray-100 text-lg text-gray-600 max-w-fit"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
-              USD
+              <span>
+                👉
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              Test
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                210
+              </span>
             </div>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 90 0 auto; min-width: 80px; width: 90px;"
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 300px;"
           >
             <div
-              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
-              SUCCESS
+              <span>
+                👉
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              Test
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                240
+              </span>
             </div>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 60 0 auto; min-width: 50px; width: 60px;"
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 300px;"
           >
             <div
-              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
-              BET
+              <span>
+                👉
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              Test
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                270
+              </span>
             </div>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
-            data-sticky-first-right-td="true"
-            data-sticky-td="true"
-            role="cell"
-            style="box-sizing: border-box; flex: 80 0 auto; min-width: 60px; width: 80px; position: sticky; z-index: 3; right: 0px;"
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 300px;"
           >
-            <button
-              class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
-              data-state="closed"
-              type="button"
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
-              <svg
-                class="text-moon-24"
-                fill="none"
-                height="1em"
-                viewBox="0 0 32 32"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                />
-              </svg>
-            </button>
+              <span>
+                👉
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              Test
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                300
+              </span>
+            </div>
           </div>
-        </div>
-        <div
-          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-          role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 525px;"
-        >
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-            data-sticky-td="true"
-            role="cell"
-            style="box-sizing: border-box; flex: 250 0 auto; min-width: 30px; width: 250px; position: sticky; z-index: 3; left: 0px;"
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 300px;"
           >
-            84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                👉
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              Test
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                330
+              </span>
+            </div>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            data-sticky-last-left-td="true"
-            data-sticky-td="true"
-            role="cell"
-            style="box-sizing: border-box; flex: 240 0 auto; min-width: 80px; width: 240px; position: sticky; z-index: 3; left: 250px;"
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 300px;"
           >
-            aleksandr@heathmonitoring.com
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                👉
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              Test
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                360
+              </span>
+            </div>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 300px;"
           >
-            2023-09-19T14:31:46.105Z
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                👉
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              Test
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                390
+              </span>
+            </div>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 300px;"
           >
-            Bender (old) Coingaming
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                👉
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              Test
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                420
+              </span>
+            </div>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 120 0 auto; min-width: 30px; width: 120px;"
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 300px;"
           >
-            Pragmatic Play
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                👉
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              Test
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                450
+              </span>
+            </div>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 70 0 auto; min-width: 60px; width: 70px;"
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 300px;"
           >
-            22.97
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                👉
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              Test
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                480
+              </span>
+            </div>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 80 0 auto; min-width: 75px; width: 80px;"
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 300px;"
           >
             <div
-              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-gray-100 text-lg text-gray-600 max-w-fit"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
-              USD
+              <span>
+                👉
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              Test
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                510
+              </span>
             </div>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 90 0 auto; min-width: 80px; width: 90px;"
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 300px;"
           >
             <div
-              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
-              SUCCESS
+              <span>
+                👉
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              Test
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                540
+              </span>
             </div>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 60 0 auto; min-width: 50px; width: 60px;"
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 300px;"
           >
             <div
-              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
-              BET
+              <span>
+                👉
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              Test
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                570
+              </span>
             </div>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
-            data-sticky-first-right-td="true"
-            data-sticky-td="true"
-            role="cell"
-            style="box-sizing: border-box; flex: 80 0 auto; min-width: 60px; width: 80px; position: sticky; z-index: 3; right: 0px;"
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 300px;"
           >
-            <button
-              class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
-              data-state="closed"
-              type="button"
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
-              <svg
-                class="text-moon-24"
-                fill="none"
-                height="1em"
-                viewBox="0 0 32 32"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                />
-              </svg>
-            </button>
+              <span>
+                👉
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              Test
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                600
+              </span>
+            </div>
           </div>
-        </div>
-        <div
-          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-          role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 525px;"
-        >
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-            data-sticky-td="true"
-            role="cell"
-            style="box-sizing: border-box; flex: 250 0 auto; min-width: 30px; width: 250px; position: sticky; z-index: 3; left: 0px;"
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 300px;"
           >
-            84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                👉
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              Test
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                630
+              </span>
+            </div>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            data-sticky-last-left-td="true"
-            data-sticky-td="true"
-            role="cell"
-            style="box-sizing: border-box; flex: 240 0 auto; min-width: 80px; width: 240px; position: sticky; z-index: 3; left: 250px;"
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 300px;"
           >
-            aleksandr@heathmonitoring.com
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                👉
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              Test
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                660
+              </span>
+            </div>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 300px;"
           >
-            2023-09-19T14:31:46.105Z
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                👉
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              Test
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                690
+              </span>
+            </div>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 300px;"
           >
-            Bender (old) Coingaming
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                👉
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              Test
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                720
+              </span>
+            </div>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 120 0 auto; min-width: 30px; width: 120px;"
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 300px;"
           >
-            Pragmatic Play
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                👉
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              Test
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                750
+              </span>
+            </div>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 70 0 auto; min-width: 60px; width: 70px;"
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 300px;"
           >
-            22.97
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                👉
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              Test
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                780
+              </span>
+            </div>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 80 0 auto; min-width: 75px; width: 80px;"
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 300px;"
           >
             <div
-              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-gray-100 text-lg text-gray-600 max-w-fit"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
-              USD
+              <span>
+                👉
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              Test
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                810
+              </span>
             </div>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 90 0 auto; min-width: 80px; width: 90px;"
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 300px;"
           >
             <div
-              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
-              SUCCESS
+              <span>
+                👉
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              Test
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                840
+              </span>
             </div>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 60 0 auto; min-width: 50px; width: 60px;"
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 300px;"
           >
             <div
-              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
-              BET
+              <span>
+                👉
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              Test
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                870
+              </span>
             </div>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
-            data-sticky-first-right-td="true"
-            data-sticky-td="true"
-            role="cell"
-            style="box-sizing: border-box; flex: 80 0 auto; min-width: 60px; width: 80px; position: sticky; z-index: 3; right: 0px;"
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 300px;"
           >
-            <button
-              class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
-              data-state="closed"
-              type="button"
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
-              <svg
-                class="text-moon-24"
-                fill="none"
-                height="1em"
-                viewBox="0 0 32 32"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                />
-              </svg>
-            </button>
+              <span>
+                👉
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              Test
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                900
+              </span>
+            </div>
           </div>
-        </div>
-        <div
-          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-          role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 525px;"
-        >
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-            data-sticky-td="true"
-            role="cell"
-            style="box-sizing: border-box; flex: 250 0 auto; min-width: 30px; width: 250px; position: sticky; z-index: 3; left: 0px;"
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 300px;"
           >
-            84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                👉
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              Test
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                930
+              </span>
+            </div>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            data-sticky-last-left-td="true"
-            data-sticky-td="true"
-            role="cell"
-            style="box-sizing: border-box; flex: 240 0 auto; min-width: 80px; width: 240px; position: sticky; z-index: 3; left: 250px;"
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 300px;"
           >
-            aleksandr@heathmonitoring.com
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                👉
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              Test
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                960
+              </span>
+            </div>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 300px;"
           >
-            2023-09-19T14:31:46.105Z
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                👉
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              Test
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                990
+              </span>
+            </div>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 300px;"
           >
-            Bender (old) Coingaming
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                👉
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              Test
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                1020
+              </span>
+            </div>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 120 0 auto; min-width: 30px; width: 120px;"
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 300px;"
           >
-            Pragmatic Play
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                👉
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              Test
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                1050
+              </span>
+            </div>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 70 0 auto; min-width: 60px; width: 70px;"
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 300px;"
           >
-            22.97
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                👉
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              Test
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                1080
+              </span>
+            </div>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 80 0 auto; min-width: 75px; width: 80px;"
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 300px;"
           >
             <div
-              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-gray-100 text-lg text-gray-600 max-w-fit"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
-              USD
+              <span>
+                👉
+              </span>
             </div>
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 90 0 auto; min-width: 80px; width: 90px;"
-          >
             <div
-              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
             >
-              SUCCESS
+              Test
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                1110
+              </span>
             </div>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 60 0 auto; min-width: 50px; width: 60px;"
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 300px;"
           >
             <div
-              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
-              BET
+              <span>
+                👉
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              Test
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                1140
+              </span>
             </div>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
-            data-sticky-first-right-td="true"
-            data-sticky-td="true"
-            role="cell"
-            style="box-sizing: border-box; flex: 80 0 auto; min-width: 60px; width: 80px; position: sticky; z-index: 3; right: 0px;"
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 300px;"
           >
-            <button
-              class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
-              data-state="closed"
-              type="button"
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
-              <svg
-                class="text-moon-24"
-                fill="none"
-                height="1em"
-                viewBox="0 0 32 32"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                />
-              </svg>
-            </button>
+              <span>
+                👉
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              Test
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                1170
+              </span>
+            </div>
           </div>
         </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="table-wrapper sm:overflow-auto overflow-scroll no-scrollbar flex flex-col sticky"
+      role="table"
+      style="width: 800px; height: 400px;"
+    >
+      <div
+        class="flex flex-col sticky top-0 z-[99]"
+      >
         <div
-          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+          class="flex rounded-moon-s-sm sticky"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 525px;"
+          style="display: flex; flex: 1 0 auto; min-width: 300px;"
         >
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-            data-sticky-td="true"
-            role="cell"
-            style="box-sizing: border-box; flex: 250 0 auto; min-width: 30px; width: 250px; position: sticky; z-index: 3; left: 0px;"
-          >
-            84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            data-sticky-last-left-td="true"
-            data-sticky-td="true"
-            role="cell"
-            style="box-sizing: border-box; flex: 240 0 auto; min-width: 80px; width: 240px; position: sticky; z-index: 3; left: 250px;"
-          >
-            aleksandr@heathmonitoring.com
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
-          >
-            2023-09-19T14:31:46.105Z
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
-          >
-            Bender (old) Coingaming
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 120 0 auto; min-width: 30px; width: 120px;"
-          >
-            Pragmatic Play
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 70 0 auto; min-width: 60px; width: 70px;"
-          >
-            22.97
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 80 0 auto; min-width: 75px; width: 80px;"
+            class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+            colspan="1"
+            role="columnheader"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px; position: relative;"
           >
-            <div
-              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-gray-100 text-lg text-gray-600 max-w-fit"
+            <span
+              style="cursor: pointer;"
+              title="Toggle All Rows Expanded"
             >
-              USD
-            </div>
+              Expand
+              👉
+            </span>
+            <div
+              class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+              draggable="false"
+              role="separator"
+              style="cursor: col-resize;"
+            />
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 90 0 auto; min-width: 80px; width: 90px;"
+            class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+            colspan="1"
+            role="columnheader"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: relative;"
           >
+            First Name
             <div
-              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
-            >
-              SUCCESS
-            </div>
+              class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+              draggable="false"
+              role="separator"
+              style="cursor: col-resize;"
+            />
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 60 0 auto; min-width: 50px; width: 60px;"
+            class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+            colspan="1"
+            role="columnheader"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px; position: relative;"
           >
+            Age
             <div
-              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
-            >
-              BET
-            </div>
+              class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+              draggable="false"
+              role="separator"
+              style="cursor: col-resize;"
+            />
           </div>
+        </div>
+        <div
+          role="row"
+          style="display: flex; flex: 1 0 auto; min-width: 300px;"
+        >
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
-            data-sticky-first-right-td="true"
-            data-sticky-td="true"
-            role="cell"
-            style="box-sizing: border-box; flex: 80 0 auto; min-width: 60px; width: 80px; position: sticky; z-index: 3; right: 0px;"
-          >
-            <button
-              class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
-              data-state="closed"
-              type="button"
-            >
-              <svg
-                class="text-moon-24"
-                fill="none"
-                height="1em"
-                viewBox="0 0 32 32"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                />
-              </svg>
-            </button>
-          </div>
+            class="relative"
+            colspan="1"
+            role="columnheader"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px; position: relative;"
+          />
+          <div
+            class="relative"
+            colspan="1"
+            role="columnheader"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: relative;"
+          />
+          <div
+            class="relative"
+            colspan="1"
+            role="columnheader"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px; position: relative;"
+          />
         </div>
+      </div>
+      <div
+        class="flex flex-col relative z-0 no-scrollbar gap-1"
+        role="rowgroup"
+      >
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 525px;"
+          style="display: flex; flex: 1 0 auto; min-width: 300px;"
         >
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-            data-sticky-td="true"
-            role="cell"
-            style="box-sizing: border-box; flex: 250 0 auto; min-width: 30px; width: 250px; position: sticky; z-index: 3; left: 0px;"
-          >
-            84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            data-sticky-last-left-td="true"
-            data-sticky-td="true"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 240 0 auto; min-width: 80px; width: 240px; position: sticky; z-index: 3; left: 250px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            aleksandr@heathmonitoring.com
+            <span>
+              👉
+            </span>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            2023-09-19T14:31:46.105Z
+            Test
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            Bender (old) Coingaming
+            <span>
+              0
+            </span>
           </div>
+        </div>
+        <div
+          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+          role="row"
+          style="display: flex; flex: 1 0 auto; min-width: 300px;"
+        >
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 120 0 auto; min-width: 30px; width: 120px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            Pragmatic Play
+            <span>
+              👉
+            </span>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 70 0 auto; min-width: 60px; width: 70px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            22.97
+            Test
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 80 0 auto; min-width: 75px; width: 80px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <div
-              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-gray-100 text-lg text-gray-600 max-w-fit"
-            >
-              USD
-            </div>
+            <span>
+              30
+            </span>
           </div>
+        </div>
+        <div
+          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+          role="row"
+          style="display: flex; flex: 1 0 auto; min-width: 300px;"
+        >
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 90 0 auto; min-width: 80px; width: 90px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <div
-              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
-            >
-              SUCCESS
-            </div>
+            <span>
+              👉
+            </span>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 60 0 auto; min-width: 50px; width: 60px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            <div
-              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
-            >
-              BET
-            </div>
+            Test
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
-            data-sticky-first-right-td="true"
-            data-sticky-td="true"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 80 0 auto; min-width: 60px; width: 80px; position: sticky; z-index: 3; right: 0px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <button
-              class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
-              data-state="closed"
-              type="button"
-            >
-              <svg
-                class="text-moon-24"
-                fill="none"
-                height="1em"
-                viewBox="0 0 32 32"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                />
-              </svg>
-            </button>
+            <span>
+              60
+            </span>
           </div>
         </div>
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 525px;"
+          style="display: flex; flex: 1 0 auto; min-width: 300px;"
         >
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-            data-sticky-td="true"
-            role="cell"
-            style="box-sizing: border-box; flex: 250 0 auto; min-width: 30px; width: 250px; position: sticky; z-index: 3; left: 0px;"
-          >
-            84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            data-sticky-last-left-td="true"
-            data-sticky-td="true"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 240 0 auto; min-width: 80px; width: 240px; position: sticky; z-index: 3; left: 250px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            aleksandr@heathmonitoring.com
+            <span>
+              👉
+            </span>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            2023-09-19T14:31:46.105Z
+            Test
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            Bender (old) Coingaming
+            <span>
+              90
+            </span>
           </div>
+        </div>
+        <div
+          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+          role="row"
+          style="display: flex; flex: 1 0 auto; min-width: 300px;"
+        >
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 120 0 auto; min-width: 30px; width: 120px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            Pragmatic Play
+            <span>
+              👉
+            </span>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 70 0 auto; min-width: 60px; width: 70px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            22.97
+            Test
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 80 0 auto; min-width: 75px; width: 80px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <div
-              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-gray-100 text-lg text-gray-600 max-w-fit"
-            >
-              USD
-            </div>
+            <span>
+              120
+            </span>
           </div>
+        </div>
+        <div
+          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+          role="row"
+          style="display: flex; flex: 1 0 auto; min-width: 300px;"
+        >
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 90 0 auto; min-width: 80px; width: 90px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <div
-              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
-            >
-              SUCCESS
-            </div>
+            <span>
+              👉
+            </span>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 60 0 auto; min-width: 50px; width: 60px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            <div
-              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
-            >
-              BET
-            </div>
+            Test
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
-            data-sticky-first-right-td="true"
-            data-sticky-td="true"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 80 0 auto; min-width: 60px; width: 80px; position: sticky; z-index: 3; right: 0px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <button
-              class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
-              data-state="closed"
-              type="button"
-            >
-              <svg
-                class="text-moon-24"
-                fill="none"
-                height="1em"
-                viewBox="0 0 32 32"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                />
-              </svg>
-            </button>
+            <span>
+              150
+            </span>
           </div>
         </div>
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 525px;"
+          style="display: flex; flex: 1 0 auto; min-width: 300px;"
         >
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-            data-sticky-td="true"
-            role="cell"
-            style="box-sizing: border-box; flex: 250 0 auto; min-width: 30px; width: 250px; position: sticky; z-index: 3; left: 0px;"
-          >
-            84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            data-sticky-last-left-td="true"
-            data-sticky-td="true"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 240 0 auto; min-width: 80px; width: 240px; position: sticky; z-index: 3; left: 250px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            aleksandr@heathmonitoring.com
+            <span>
+              👉
+            </span>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            2023-09-19T14:31:46.105Z
+            Test
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            Bender (old) Coingaming
+            <span>
+              180
+            </span>
           </div>
+        </div>
+        <div
+          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+          role="row"
+          style="display: flex; flex: 1 0 auto; min-width: 300px;"
+        >
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 120 0 auto; min-width: 30px; width: 120px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            Pragmatic Play
+            <span>
+              👉
+            </span>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 70 0 auto; min-width: 60px; width: 70px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            22.97
+            Test
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 80 0 auto; min-width: 75px; width: 80px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <div
-              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-gray-100 text-lg text-gray-600 max-w-fit"
-            >
-              USD
-            </div>
+            <span>
+              210
+            </span>
           </div>
+        </div>
+        <div
+          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+          role="row"
+          style="display: flex; flex: 1 0 auto; min-width: 300px;"
+        >
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 90 0 auto; min-width: 80px; width: 90px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <div
-              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
-            >
-              SUCCESS
-            </div>
+            <span>
+              👉
+            </span>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 60 0 auto; min-width: 50px; width: 60px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            <div
-              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
-            >
-              BET
-            </div>
+            Test
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
-            data-sticky-first-right-td="true"
-            data-sticky-td="true"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 80 0 auto; min-width: 60px; width: 80px; position: sticky; z-index: 3; right: 0px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <button
-              class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
-              data-state="closed"
-              type="button"
-            >
-              <svg
-                class="text-moon-24"
-                fill="none"
-                height="1em"
-                viewBox="0 0 32 32"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                />
-              </svg>
-            </button>
+            <span>
+              240
+            </span>
           </div>
         </div>
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 525px;"
+          style="display: flex; flex: 1 0 auto; min-width: 300px;"
         >
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-            data-sticky-td="true"
-            role="cell"
-            style="box-sizing: border-box; flex: 250 0 auto; min-width: 30px; width: 250px; position: sticky; z-index: 3; left: 0px;"
-          >
-            84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            data-sticky-last-left-td="true"
-            data-sticky-td="true"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 240 0 auto; min-width: 80px; width: 240px; position: sticky; z-index: 3; left: 250px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            aleksandr@heathmonitoring.com
+            <span>
+              👉
+            </span>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            2023-09-19T14:31:46.105Z
+            Test
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            Bender (old) Coingaming
+            <span>
+              270
+            </span>
           </div>
+        </div>
+        <div
+          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+          role="row"
+          style="display: flex; flex: 1 0 auto; min-width: 300px;"
+        >
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 120 0 auto; min-width: 30px; width: 120px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            Pragmatic Play
+            <span>
+              👉
+            </span>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 70 0 auto; min-width: 60px; width: 70px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            22.97
+            Test
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 80 0 auto; min-width: 75px; width: 80px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <div
-              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-gray-100 text-lg text-gray-600 max-w-fit"
-            >
-              USD
-            </div>
+            <span>
+              300
+            </span>
           </div>
+        </div>
+        <div
+          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+          role="row"
+          style="display: flex; flex: 1 0 auto; min-width: 300px;"
+        >
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 90 0 auto; min-width: 80px; width: 90px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <div
-              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
-            >
-              SUCCESS
-            </div>
+            <span>
+              👉
+            </span>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 60 0 auto; min-width: 50px; width: 60px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            <div
-              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
-            >
-              BET
-            </div>
+            Test
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
-            data-sticky-first-right-td="true"
-            data-sticky-td="true"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 80 0 auto; min-width: 60px; width: 80px; position: sticky; z-index: 3; right: 0px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <button
-              class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
-              data-state="closed"
-              type="button"
-            >
-              <svg
-                class="text-moon-24"
-                fill="none"
-                height="1em"
-                viewBox="0 0 32 32"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                />
-              </svg>
-            </button>
+            <span>
+              330
+            </span>
           </div>
         </div>
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 525px;"
+          style="display: flex; flex: 1 0 auto; min-width: 300px;"
         >
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-            data-sticky-td="true"
-            role="cell"
-            style="box-sizing: border-box; flex: 250 0 auto; min-width: 30px; width: 250px; position: sticky; z-index: 3; left: 0px;"
-          >
-            84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            data-sticky-last-left-td="true"
-            data-sticky-td="true"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 240 0 auto; min-width: 80px; width: 240px; position: sticky; z-index: 3; left: 250px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            aleksandr@heathmonitoring.com
+            <span>
+              👉
+            </span>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            2023-09-19T14:31:46.105Z
+            Test
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            Bender (old) Coingaming
+            <span>
+              360
+            </span>
           </div>
+        </div>
+        <div
+          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+          role="row"
+          style="display: flex; flex: 1 0 auto; min-width: 300px;"
+        >
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 120 0 auto; min-width: 30px; width: 120px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            Pragmatic Play
+            <span>
+              👉
+            </span>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 70 0 auto; min-width: 60px; width: 70px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            22.97
+            Test
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 80 0 auto; min-width: 75px; width: 80px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <div
-              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-gray-100 text-lg text-gray-600 max-w-fit"
-            >
-              USD
-            </div>
+            <span>
+              390
+            </span>
           </div>
+        </div>
+        <div
+          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+          role="row"
+          style="display: flex; flex: 1 0 auto; min-width: 300px;"
+        >
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 90 0 auto; min-width: 80px; width: 90px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <div
-              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
-            >
-              SUCCESS
-            </div>
+            <span>
+              👉
+            </span>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 60 0 auto; min-width: 50px; width: 60px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            <div
-              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
-            >
-              BET
-            </div>
+            Test
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
-            data-sticky-first-right-td="true"
-            data-sticky-td="true"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 80 0 auto; min-width: 60px; width: 80px; position: sticky; z-index: 3; right: 0px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <button
-              class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
-              data-state="closed"
-              type="button"
-            >
-              <svg
-                class="text-moon-24"
-                fill="none"
-                height="1em"
-                viewBox="0 0 32 32"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                />
-              </svg>
-            </button>
+            <span>
+              420
+            </span>
           </div>
         </div>
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 525px;"
+          style="display: flex; flex: 1 0 auto; min-width: 300px;"
         >
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-            data-sticky-td="true"
-            role="cell"
-            style="box-sizing: border-box; flex: 250 0 auto; min-width: 30px; width: 250px; position: sticky; z-index: 3; left: 0px;"
-          >
-            84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            data-sticky-last-left-td="true"
-            data-sticky-td="true"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 240 0 auto; min-width: 80px; width: 240px; position: sticky; z-index: 3; left: 250px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            aleksandr@heathmonitoring.com
+            <span>
+              👉
+            </span>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            2023-09-19T14:31:46.105Z
+            Test
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            Bender (old) Coingaming
+            <span>
+              450
+            </span>
           </div>
+        </div>
+        <div
+          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+          role="row"
+          style="display: flex; flex: 1 0 auto; min-width: 300px;"
+        >
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 120 0 auto; min-width: 30px; width: 120px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            Pragmatic Play
+            <span>
+              👉
+            </span>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 70 0 auto; min-width: 60px; width: 70px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            22.97
+            Test
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 80 0 auto; min-width: 75px; width: 80px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <div
-              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-gray-100 text-lg text-gray-600 max-w-fit"
-            >
-              USD
-            </div>
+            <span>
+              480
+            </span>
           </div>
+        </div>
+        <div
+          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+          role="row"
+          style="display: flex; flex: 1 0 auto; min-width: 300px;"
+        >
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 90 0 auto; min-width: 80px; width: 90px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <div
-              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
-            >
-              SUCCESS
-            </div>
+            <span>
+              👉
+            </span>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 60 0 auto; min-width: 50px; width: 60px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            <div
-              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
-            >
-              BET
-            </div>
+            Test
           </div>
-          <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
-            data-sticky-first-right-td="true"
-            data-sticky-td="true"
-            role="cell"
-            style="box-sizing: border-box; flex: 80 0 auto; min-width: 60px; width: 80px; position: sticky; z-index: 3; right: 0px;"
-          >
-            <button
-              class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
-              data-state="closed"
-              type="button"
-            >
-              <svg
-                class="text-moon-24"
-                fill="none"
-                height="1em"
-                viewBox="0 0 32 32"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                />
-              </svg>
-            </button>
+          <div
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+          >
+            <span>
+              510
+            </span>
           </div>
         </div>
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 525px;"
+          style="display: flex; flex: 1 0 auto; min-width: 300px;"
         >
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-            data-sticky-td="true"
-            role="cell"
-            style="box-sizing: border-box; flex: 250 0 auto; min-width: 30px; width: 250px; position: sticky; z-index: 3; left: 0px;"
-          >
-            84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            data-sticky-last-left-td="true"
-            data-sticky-td="true"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 240 0 auto; min-width: 80px; width: 240px; position: sticky; z-index: 3; left: 250px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            aleksandr@heathmonitoring.com
+            <span>
+              👉
+            </span>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            2023-09-19T14:31:46.105Z
+            Test
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            Bender (old) Coingaming
+            <span>
+              540
+            </span>
           </div>
+        </div>
+        <div
+          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+          role="row"
+          style="display: flex; flex: 1 0 auto; min-width: 300px;"
+        >
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 120 0 auto; min-width: 30px; width: 120px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            Pragmatic Play
+            <span>
+              👉
+            </span>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 70 0 auto; min-width: 60px; width: 70px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            22.97
+            Test
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 80 0 auto; min-width: 75px; width: 80px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <div
-              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-gray-100 text-lg text-gray-600 max-w-fit"
-            >
-              USD
-            </div>
+            <span>
+              570
+            </span>
           </div>
+        </div>
+        <div
+          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+          role="row"
+          style="display: flex; flex: 1 0 auto; min-width: 300px;"
+        >
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 90 0 auto; min-width: 80px; width: 90px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <div
-              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
-            >
-              SUCCESS
-            </div>
+            <span>
+              👉
+            </span>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 60 0 auto; min-width: 50px; width: 60px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            <div
-              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
-            >
-              BET
-            </div>
+            Test
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
-            data-sticky-first-right-td="true"
-            data-sticky-td="true"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 80 0 auto; min-width: 60px; width: 80px; position: sticky; z-index: 3; right: 0px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <button
-              class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
-              data-state="closed"
-              type="button"
-            >
-              <svg
-                class="text-moon-24"
-                fill="none"
-                height="1em"
-                viewBox="0 0 32 32"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                />
-              </svg>
-            </button>
+            <span>
+              600
+            </span>
           </div>
         </div>
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 525px;"
+          style="display: flex; flex: 1 0 auto; min-width: 300px;"
         >
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-            data-sticky-td="true"
-            role="cell"
-            style="box-sizing: border-box; flex: 250 0 auto; min-width: 30px; width: 250px; position: sticky; z-index: 3; left: 0px;"
-          >
-            84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            data-sticky-last-left-td="true"
-            data-sticky-td="true"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 240 0 auto; min-width: 80px; width: 240px; position: sticky; z-index: 3; left: 250px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            aleksandr@heathmonitoring.com
+            <span>
+              👉
+            </span>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            2023-09-19T14:31:46.105Z
+            Test
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            Bender (old) Coingaming
+            <span>
+              630
+            </span>
           </div>
+        </div>
+        <div
+          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+          role="row"
+          style="display: flex; flex: 1 0 auto; min-width: 300px;"
+        >
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 120 0 auto; min-width: 30px; width: 120px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            Pragmatic Play
+            <span>
+              👉
+            </span>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 70 0 auto; min-width: 60px; width: 70px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            22.97
+            Test
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 80 0 auto; min-width: 75px; width: 80px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <div
-              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-gray-100 text-lg text-gray-600 max-w-fit"
-            >
-              USD
-            </div>
+            <span>
+              660
+            </span>
           </div>
+        </div>
+        <div
+          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+          role="row"
+          style="display: flex; flex: 1 0 auto; min-width: 300px;"
+        >
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 90 0 auto; min-width: 80px; width: 90px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <div
-              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
-            >
-              SUCCESS
-            </div>
+            <span>
+              👉
+            </span>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 60 0 auto; min-width: 50px; width: 60px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            <div
-              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
-            >
-              BET
-            </div>
+            Test
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
-            data-sticky-first-right-td="true"
-            data-sticky-td="true"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 80 0 auto; min-width: 60px; width: 80px; position: sticky; z-index: 3; right: 0px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <button
-              class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
-              data-state="closed"
-              type="button"
-            >
-              <svg
-                class="text-moon-24"
-                fill="none"
-                height="1em"
-                viewBox="0 0 32 32"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                />
-              </svg>
-            </button>
+            <span>
+              690
+            </span>
           </div>
         </div>
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 525px;"
+          style="display: flex; flex: 1 0 auto; min-width: 300px;"
         >
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-            data-sticky-td="true"
-            role="cell"
-            style="box-sizing: border-box; flex: 250 0 auto; min-width: 30px; width: 250px; position: sticky; z-index: 3; left: 0px;"
-          >
-            84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            data-sticky-last-left-td="true"
-            data-sticky-td="true"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 240 0 auto; min-width: 80px; width: 240px; position: sticky; z-index: 3; left: 250px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            aleksandr@heathmonitoring.com
+            <span>
+              👉
+            </span>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            2023-09-19T14:31:46.105Z
+            Test
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            Bender (old) Coingaming
+            <span>
+              720
+            </span>
           </div>
+        </div>
+        <div
+          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+          role="row"
+          style="display: flex; flex: 1 0 auto; min-width: 300px;"
+        >
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 120 0 auto; min-width: 30px; width: 120px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            Pragmatic Play
+            <span>
+              👉
+            </span>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 70 0 auto; min-width: 60px; width: 70px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            22.97
+            Test
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 80 0 auto; min-width: 75px; width: 80px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <div
-              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-gray-100 text-lg text-gray-600 max-w-fit"
-            >
-              USD
-            </div>
+            <span>
+              750
+            </span>
           </div>
+        </div>
+        <div
+          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+          role="row"
+          style="display: flex; flex: 1 0 auto; min-width: 300px;"
+        >
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 90 0 auto; min-width: 80px; width: 90px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <div
-              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
-            >
-              SUCCESS
-            </div>
+            <span>
+              👉
+            </span>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 60 0 auto; min-width: 50px; width: 60px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            <div
-              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
-            >
-              BET
-            </div>
+            Test
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
-            data-sticky-first-right-td="true"
-            data-sticky-td="true"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 80 0 auto; min-width: 60px; width: 80px; position: sticky; z-index: 3; right: 0px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <button
-              class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
-              data-state="closed"
-              type="button"
-            >
-              <svg
-                class="text-moon-24"
-                fill="none"
-                height="1em"
-                viewBox="0 0 32 32"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                />
-              </svg>
-            </button>
+            <span>
+              780
+            </span>
           </div>
         </div>
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 525px;"
+          style="display: flex; flex: 1 0 auto; min-width: 300px;"
         >
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-            data-sticky-td="true"
-            role="cell"
-            style="box-sizing: border-box; flex: 250 0 auto; min-width: 30px; width: 250px; position: sticky; z-index: 3; left: 0px;"
-          >
-            84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            data-sticky-last-left-td="true"
-            data-sticky-td="true"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 240 0 auto; min-width: 80px; width: 240px; position: sticky; z-index: 3; left: 250px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            aleksandr@heathmonitoring.com
+            <span>
+              👉
+            </span>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            2023-09-19T14:31:46.105Z
+            Test
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            Bender (old) Coingaming
+            <span>
+              810
+            </span>
           </div>
+        </div>
+        <div
+          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+          role="row"
+          style="display: flex; flex: 1 0 auto; min-width: 300px;"
+        >
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 120 0 auto; min-width: 30px; width: 120px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            Pragmatic Play
+            <span>
+              👉
+            </span>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 70 0 auto; min-width: 60px; width: 70px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            22.97
+            Test
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 80 0 auto; min-width: 75px; width: 80px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <div
-              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-gray-100 text-lg text-gray-600 max-w-fit"
-            >
-              USD
-            </div>
+            <span>
+              840
+            </span>
           </div>
+        </div>
+        <div
+          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+          role="row"
+          style="display: flex; flex: 1 0 auto; min-width: 300px;"
+        >
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 90 0 auto; min-width: 80px; width: 90px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <div
-              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
-            >
-              SUCCESS
-            </div>
+            <span>
+              👉
+            </span>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 60 0 auto; min-width: 50px; width: 60px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            <div
-              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
-            >
-              BET
-            </div>
+            Test
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
-            data-sticky-first-right-td="true"
-            data-sticky-td="true"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 80 0 auto; min-width: 60px; width: 80px; position: sticky; z-index: 3; right: 0px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <button
-              class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
-              data-state="closed"
-              type="button"
-            >
-              <svg
-                class="text-moon-24"
-                fill="none"
-                height="1em"
-                viewBox="0 0 32 32"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                />
-              </svg>
-            </button>
+            <span>
+              870
+            </span>
           </div>
         </div>
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 525px;"
+          style="display: flex; flex: 1 0 auto; min-width: 300px;"
         >
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-            data-sticky-td="true"
-            role="cell"
-            style="box-sizing: border-box; flex: 250 0 auto; min-width: 30px; width: 250px; position: sticky; z-index: 3; left: 0px;"
-          >
-            84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            data-sticky-last-left-td="true"
-            data-sticky-td="true"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 240 0 auto; min-width: 80px; width: 240px; position: sticky; z-index: 3; left: 250px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            aleksandr@heathmonitoring.com
+            <span>
+              👉
+            </span>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            2023-09-19T14:31:46.105Z
+            Test
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            Bender (old) Coingaming
+            <span>
+              900
+            </span>
           </div>
+        </div>
+        <div
+          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+          role="row"
+          style="display: flex; flex: 1 0 auto; min-width: 300px;"
+        >
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 120 0 auto; min-width: 30px; width: 120px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            Pragmatic Play
+            <span>
+              👉
+            </span>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 70 0 auto; min-width: 60px; width: 70px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            22.97
+            Test
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 80 0 auto; min-width: 75px; width: 80px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <div
-              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-gray-100 text-lg text-gray-600 max-w-fit"
-            >
-              USD
-            </div>
+            <span>
+              930
+            </span>
           </div>
+        </div>
+        <div
+          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+          role="row"
+          style="display: flex; flex: 1 0 auto; min-width: 300px;"
+        >
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 90 0 auto; min-width: 80px; width: 90px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <div
-              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
-            >
-              SUCCESS
-            </div>
+            <span>
+              👉
+            </span>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 60 0 auto; min-width: 50px; width: 60px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            <div
-              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
-            >
-              BET
-            </div>
+            Test
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
-            data-sticky-first-right-td="true"
-            data-sticky-td="true"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 80 0 auto; min-width: 60px; width: 80px; position: sticky; z-index: 3; right: 0px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <button
-              class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
-              data-state="closed"
-              type="button"
-            >
-              <svg
-                class="text-moon-24"
-                fill="none"
-                height="1em"
-                viewBox="0 0 32 32"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                />
-              </svg>
-            </button>
+            <span>
+              960
+            </span>
           </div>
         </div>
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 525px;"
+          style="display: flex; flex: 1 0 auto; min-width: 300px;"
         >
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-            data-sticky-td="true"
-            role="cell"
-            style="box-sizing: border-box; flex: 250 0 auto; min-width: 30px; width: 250px; position: sticky; z-index: 3; left: 0px;"
-          >
-            84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            data-sticky-last-left-td="true"
-            data-sticky-td="true"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 240 0 auto; min-width: 80px; width: 240px; position: sticky; z-index: 3; left: 250px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            aleksandr@heathmonitoring.com
+            <span>
+              👉
+            </span>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            2023-09-19T14:31:46.105Z
+            Test
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            Bender (old) Coingaming
+            <span>
+              990
+            </span>
           </div>
+        </div>
+        <div
+          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+          role="row"
+          style="display: flex; flex: 1 0 auto; min-width: 300px;"
+        >
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 120 0 auto; min-width: 30px; width: 120px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            Pragmatic Play
+            <span>
+              👉
+            </span>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 70 0 auto; min-width: 60px; width: 70px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            22.97
+            Test
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 80 0 auto; min-width: 75px; width: 80px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <div
-              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-gray-100 text-lg text-gray-600 max-w-fit"
-            >
-              USD
-            </div>
+            <span>
+              1020
+            </span>
           </div>
+        </div>
+        <div
+          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+          role="row"
+          style="display: flex; flex: 1 0 auto; min-width: 300px;"
+        >
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 90 0 auto; min-width: 80px; width: 90px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <div
-              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
-            >
-              SUCCESS
-            </div>
+            <span>
+              👉
+            </span>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 60 0 auto; min-width: 50px; width: 60px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            <div
-              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
-            >
-              BET
-            </div>
+            Test
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
-            data-sticky-first-right-td="true"
-            data-sticky-td="true"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 80 0 auto; min-width: 60px; width: 80px; position: sticky; z-index: 3; right: 0px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <button
-              class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
-              data-state="closed"
-              type="button"
-            >
-              <svg
-                class="text-moon-24"
-                fill="none"
-                height="1em"
-                viewBox="0 0 32 32"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                />
-              </svg>
-            </button>
+            <span>
+              1050
+            </span>
           </div>
         </div>
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 525px;"
+          style="display: flex; flex: 1 0 auto; min-width: 300px;"
         >
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-            data-sticky-td="true"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 250 0 auto; min-width: 30px; width: 250px; position: sticky; z-index: 3; left: 0px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546
+            <span>
+              👉
+            </span>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            data-sticky-last-left-td="true"
-            data-sticky-td="true"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 240 0 auto; min-width: 80px; width: 240px; position: sticky; z-index: 3; left: 250px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            aleksandr@heathmonitoring.com
+            Test
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            2023-09-19T14:31:46.105Z
+            <span>
+              1080
+            </span>
           </div>
+        </div>
+        <div
+          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+          role="row"
+          style="display: flex; flex: 1 0 auto; min-width: 300px;"
+        >
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 30px; width: 150px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            Bender (old) Coingaming
+            <span>
+              👉
+            </span>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 120 0 auto; min-width: 30px; width: 120px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            Pragmatic Play
+            Test
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 70 0 auto; min-width: 60px; width: 70px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            22.97
+            <span>
+              1110
+            </span>
           </div>
+        </div>
+        <div
+          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+          role="row"
+          style="display: flex; flex: 1 0 auto; min-width: 300px;"
+        >
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 80 0 auto; min-width: 75px; width: 80px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <div
-              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-gray-100 text-lg text-gray-600 max-w-fit"
-            >
-              USD
-            </div>
+            <span>
+              👉
+            </span>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 90 0 auto; min-width: 80px; width: 90px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            <div
-              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
-            >
-              SUCCESS
-            </div>
+            Test
           </div>
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 60 0 auto; min-width: 50px; width: 60px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <div
-              class="flex items-center rounded-moon-i-xs gap-1 select-none py-1 px-2 h-6 text-moon-10-caption uppercase font-medium bg-roshi-10 text-lg text-roshi max-w-fit"
-            >
-              BET
-            </div>
+            <span>
+              1140
+            </span>
           </div>
+        </div>
+        <div
+          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+          role="row"
+          style="display: flex; flex: 1 0 auto; min-width: 300px;"
+        >
           <div
-            class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
-            data-sticky-first-right-td="true"
-            data-sticky-td="true"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 80 0 auto; min-width: 60px; width: 80px; position: sticky; z-index: 3; right: 0px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <button
-              class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
-              data-state="closed"
-              type="button"
-            >
-              <svg
-                class="text-moon-24"
-                fill="none"
-                height="1em"
-                viewBox="0 0 32 32"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                />
-              </svg>
-            </button>
+            <span>
+              👉
+            </span>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+          >
+            Test
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+          >
+            <span>
+              1170
+            </span>
           </div>
         </div>
       </div>
@@ -116461,7 +123427,7 @@ Object {
 }
 `;
 
-exports[`Table renders CustomContent 1`] = `
+exports[`Table renders DeepTable 1`] = `
 Object {
   "asFragment": [Function],
   "baseElement": <body>
@@ -116477,7 +123443,7 @@ Object {
           <div
             class="flex rounded-moon-s-sm sticky"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 300px;"
+            style="display: flex; flex: 1 0 auto; min-width: 500px;"
           >
             <div
               class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
@@ -116489,7 +123455,6 @@ Object {
                 style="cursor: pointer;"
                 title="Toggle All Rows Expanded"
               >
-                Expand
                 👉
               </span>
               <div
@@ -116505,7 +123470,7 @@ Object {
               role="columnheader"
               style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: relative;"
             >
-              First Name
+              Name
               <div
                 class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
                 draggable="false"
@@ -116527,10 +123492,38 @@ Object {
                 style="cursor: col-resize;"
               />
             </div>
+            <div
+              class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+              colspan="1"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: relative;"
+            >
+              Visits
+              <div
+                class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+                draggable="false"
+                role="separator"
+                style="cursor: col-resize;"
+              />
+            </div>
+            <div
+              class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+              colspan="1"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: relative;"
+            >
+              Activity
+              <div
+                class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+                draggable="false"
+                role="separator"
+                style="cursor: col-resize;"
+              />
+            </div>
           </div>
           <div
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 300px;"
+            style="display: flex; flex: 1 0 auto; min-width: 500px;"
           >
             <div
               class="relative"
@@ -116550,6 +123543,18 @@ Object {
               role="columnheader"
               style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px; position: relative;"
             />
+            <div
+              class="relative"
+              colspan="1"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: relative;"
+            />
+            <div
+              class="relative"
+              colspan="1"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: relative;"
+            />
           </div>
         </div>
         <div
@@ -116559,14 +123564,16 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 300px;"
+            style="display: flex; flex: 1 0 auto; min-width: 500px;"
           >
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
               role="cell"
               style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
-              <span>
+              <span
+                style="padding-left: 0rem;"
+              >
                 👉
               </span>
             </div>
@@ -116578,7 +123585,7 @@ Object {
               Test
             </div>
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               role="cell"
               style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
@@ -116586,80 +123593,36 @@ Object {
                 0
               </span>
             </div>
-          </div>
-          <div
-            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-            role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 300px;"
-          >
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-            >
-              <span>
-                👉
-              </span>
-            </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               role="cell"
               style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-            >
-              Test
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-            >
-              <span>
-                30
-              </span>
-            </div>
-          </div>
-          <div
-            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-            role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 300px;"
-          >
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
               <span>
-                👉
+                0
               </span>
             </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-            >
-              Test
-            </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
             >
-              <span>
-                60
-              </span>
+              0
             </div>
           </div>
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 300px;"
+            style="display: flex; flex: 1 0 auto; min-width: 500px;"
           >
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
               role="cell"
               style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
-              <span>
+              <span
+                style="padding-left: 0rem;"
+              >
                 👉
               </span>
             </div>
@@ -116671,27 +123634,12 @@ Object {
               Test
             </div>
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-            >
-              <span>
-                90
-              </span>
-            </div>
-          </div>
-          <div
-            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-            role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 300px;"
-          >
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               role="cell"
               style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
               <span>
-                👉
+                30
               </span>
             </div>
             <div
@@ -116699,29 +123647,31 @@ Object {
               role="cell"
               style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
             >
-              Test
+              <span>
+                100
+              </span>
             </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
             >
-              <span>
-                120
-              </span>
+              100
             </div>
           </div>
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 300px;"
+            style="display: flex; flex: 1 0 auto; min-width: 500px;"
           >
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
               role="cell"
               style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
-              <span>
+              <span
+                style="padding-left: 0rem;"
+              >
                 👉
               </span>
             </div>
@@ -116733,27 +123683,12 @@ Object {
               Test
             </div>
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-            >
-              <span>
-                150
-              </span>
-            </div>
-          </div>
-          <div
-            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-            role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 300px;"
-          >
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               role="cell"
               style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
               <span>
-                👉
+                60
               </span>
             </div>
             <div
@@ -116761,29 +123696,31 @@ Object {
               role="cell"
               style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
             >
-              Test
+              <span>
+                200
+              </span>
             </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
             >
-              <span>
-                180
-              </span>
+              200
             </div>
           </div>
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 300px;"
+            style="display: flex; flex: 1 0 auto; min-width: 500px;"
           >
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
               role="cell"
               style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
-              <span>
+              <span
+                style="padding-left: 0rem;"
+              >
                 👉
               </span>
             </div>
@@ -116795,27 +123732,12 @@ Object {
               Test
             </div>
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-            >
-              <span>
-                210
-              </span>
-            </div>
-          </div>
-          <div
-            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-            role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 300px;"
-          >
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               role="cell"
               style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
               <span>
-                👉
+                90
               </span>
             </div>
             <div
@@ -116823,29 +123745,31 @@ Object {
               role="cell"
               style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
             >
-              Test
+              <span>
+                300
+              </span>
             </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
             >
-              <span>
-                240
-              </span>
+              300
             </div>
           </div>
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 300px;"
+            style="display: flex; flex: 1 0 auto; min-width: 500px;"
           >
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
               role="cell"
               style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
-              <span>
+              <span
+                style="padding-left: 0rem;"
+              >
                 👉
               </span>
             </div>
@@ -116857,27 +123781,12 @@ Object {
               Test
             </div>
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-            >
-              <span>
-                270
-              </span>
-            </div>
-          </div>
-          <div
-            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-            role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 300px;"
-          >
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               role="cell"
               style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
               <span>
-                👉
+                120
               </span>
             </div>
             <div
@@ -116885,29 +123794,31 @@ Object {
               role="cell"
               style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
             >
-              Test
+              <span>
+                400
+              </span>
             </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
             >
-              <span>
-                300
-              </span>
+              400
             </div>
           </div>
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 300px;"
+            style="display: flex; flex: 1 0 auto; min-width: 500px;"
           >
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
               role="cell"
               style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
-              <span>
+              <span
+                style="padding-left: 0rem;"
+              >
                 👉
               </span>
             </div>
@@ -116919,27 +123830,12 @@ Object {
               Test
             </div>
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-            >
-              <span>
-                330
-              </span>
-            </div>
-          </div>
-          <div
-            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-            role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 300px;"
-          >
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               role="cell"
               style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
               <span>
-                👉
+                150
               </span>
             </div>
             <div
@@ -116947,29 +123843,31 @@ Object {
               role="cell"
               style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
             >
-              Test
+              <span>
+                500
+              </span>
             </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
             >
-              <span>
-                360
-              </span>
+              500
             </div>
           </div>
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 300px;"
+            style="display: flex; flex: 1 0 auto; min-width: 500px;"
           >
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
               role="cell"
               style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
-              <span>
+              <span
+                style="padding-left: 0rem;"
+              >
                 👉
               </span>
             </div>
@@ -116981,27 +123879,12 @@ Object {
               Test
             </div>
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-            >
-              <span>
-                390
-              </span>
-            </div>
-          </div>
-          <div
-            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-            role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 300px;"
-          >
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               role="cell"
               style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
               <span>
-                👉
+                180
               </span>
             </div>
             <div
@@ -117009,29 +123892,31 @@ Object {
               role="cell"
               style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
             >
-              Test
+              <span>
+                600
+              </span>
             </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
             >
-              <span>
-                420
-              </span>
+              600
             </div>
           </div>
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 300px;"
+            style="display: flex; flex: 1 0 auto; min-width: 500px;"
           >
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
               role="cell"
               style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
-              <span>
+              <span
+                style="padding-left: 0rem;"
+              >
                 👉
               </span>
             </div>
@@ -117043,27 +123928,12 @@ Object {
               Test
             </div>
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-            >
-              <span>
-                450
-              </span>
-            </div>
-          </div>
-          <div
-            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-            role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 300px;"
-          >
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               role="cell"
               style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
               <span>
-                👉
+                210
               </span>
             </div>
             <div
@@ -117071,29 +123941,31 @@ Object {
               role="cell"
               style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
             >
-              Test
+              <span>
+                700
+              </span>
             </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
             >
-              <span>
-                480
-              </span>
+              700
             </div>
           </div>
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 300px;"
+            style="display: flex; flex: 1 0 auto; min-width: 500px;"
           >
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
               role="cell"
               style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
-              <span>
+              <span
+                style="padding-left: 0rem;"
+              >
                 👉
               </span>
             </div>
@@ -117105,27 +123977,12 @@ Object {
               Test
             </div>
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-            >
-              <span>
-                510
-              </span>
-            </div>
-          </div>
-          <div
-            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-            role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 300px;"
-          >
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               role="cell"
               style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
               <span>
-                👉
+                240
               </span>
             </div>
             <div
@@ -117133,29 +123990,31 @@ Object {
               role="cell"
               style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
             >
-              Test
+              <span>
+                800
+              </span>
             </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
             >
-              <span>
-                540
-              </span>
+              800
             </div>
           </div>
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 300px;"
+            style="display: flex; flex: 1 0 auto; min-width: 500px;"
           >
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
               role="cell"
               style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
-              <span>
+              <span
+                style="padding-left: 0rem;"
+              >
                 👉
               </span>
             </div>
@@ -117167,27 +124026,12 @@ Object {
               Test
             </div>
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-            >
-              <span>
-                570
-              </span>
-            </div>
-          </div>
-          <div
-            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-            role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 300px;"
-          >
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               role="cell"
               style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
               <span>
-                👉
+                270
               </span>
             </div>
             <div
@@ -117195,29 +124039,31 @@ Object {
               role="cell"
               style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
             >
-              Test
+              <span>
+                900
+              </span>
             </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
             >
-              <span>
-                600
-              </span>
+              900
             </div>
           </div>
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 300px;"
+            style="display: flex; flex: 1 0 auto; min-width: 500px;"
           >
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
               role="cell"
               style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
-              <span>
+              <span
+                style="padding-left: 0rem;"
+              >
                 👉
               </span>
             </div>
@@ -117229,27 +124075,12 @@ Object {
               Test
             </div>
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-            >
-              <span>
-                630
-              </span>
-            </div>
-          </div>
-          <div
-            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-            role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 300px;"
-          >
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               role="cell"
               style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
               <span>
-                👉
+                300
               </span>
             </div>
             <div
@@ -117257,29 +124088,31 @@ Object {
               role="cell"
               style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
             >
-              Test
+              <span>
+                1000
+              </span>
             </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
             >
-              <span>
-                660
-              </span>
+              1000
             </div>
           </div>
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 300px;"
+            style="display: flex; flex: 1 0 auto; min-width: 500px;"
           >
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
               role="cell"
               style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
-              <span>
+              <span
+                style="padding-left: 0rem;"
+              >
                 👉
               </span>
             </div>
@@ -117291,27 +124124,12 @@ Object {
               Test
             </div>
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-            >
-              <span>
-                690
-              </span>
-            </div>
-          </div>
-          <div
-            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-            role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 300px;"
-          >
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               role="cell"
               style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
               <span>
-                👉
+                330
               </span>
             </div>
             <div
@@ -117319,29 +124137,31 @@ Object {
               role="cell"
               style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
             >
-              Test
+              <span>
+                1100
+              </span>
             </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
             >
-              <span>
-                720
-              </span>
+              1100
             </div>
           </div>
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 300px;"
+            style="display: flex; flex: 1 0 auto; min-width: 500px;"
           >
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
               role="cell"
               style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
-              <span>
+              <span
+                style="padding-left: 0rem;"
+              >
                 👉
               </span>
             </div>
@@ -117353,27 +124173,12 @@ Object {
               Test
             </div>
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-            >
-              <span>
-                750
-              </span>
-            </div>
-          </div>
-          <div
-            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-            role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 300px;"
-          >
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               role="cell"
               style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
               <span>
-                👉
+                360
               </span>
             </div>
             <div
@@ -117381,29 +124186,31 @@ Object {
               role="cell"
               style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
             >
-              Test
+              <span>
+                1200
+              </span>
             </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
             >
-              <span>
-                780
-              </span>
+              1200
             </div>
           </div>
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 300px;"
+            style="display: flex; flex: 1 0 auto; min-width: 500px;"
           >
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
               role="cell"
               style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
-              <span>
+              <span
+                style="padding-left: 0rem;"
+              >
                 👉
               </span>
             </div>
@@ -117415,27 +124222,12 @@ Object {
               Test
             </div>
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-            >
-              <span>
-                810
-              </span>
-            </div>
-          </div>
-          <div
-            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-            role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 300px;"
-          >
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               role="cell"
               style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
               <span>
-                👉
+                390
               </span>
             </div>
             <div
@@ -117443,29 +124235,31 @@ Object {
               role="cell"
               style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
             >
-              Test
+              <span>
+                1300
+              </span>
             </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
             >
-              <span>
-                840
-              </span>
+              1300
             </div>
           </div>
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 300px;"
+            style="display: flex; flex: 1 0 auto; min-width: 500px;"
           >
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
               role="cell"
               style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
-              <span>
+              <span
+                style="padding-left: 0rem;"
+              >
                 👉
               </span>
             </div>
@@ -117477,27 +124271,12 @@ Object {
               Test
             </div>
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-            >
-              <span>
-                870
-              </span>
-            </div>
-          </div>
-          <div
-            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-            role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 300px;"
-          >
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               role="cell"
               style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
               <span>
-                👉
+                420
               </span>
             </div>
             <div
@@ -117505,29 +124284,31 @@ Object {
               role="cell"
               style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
             >
-              Test
+              <span>
+                1400
+              </span>
             </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
             >
-              <span>
-                900
-              </span>
+              1400
             </div>
           </div>
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 300px;"
+            style="display: flex; flex: 1 0 auto; min-width: 500px;"
           >
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
               role="cell"
               style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
-              <span>
+              <span
+                style="padding-left: 0rem;"
+              >
                 👉
               </span>
             </div>
@@ -117539,27 +124320,12 @@ Object {
               Test
             </div>
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-            >
-              <span>
-                930
-              </span>
-            </div>
-          </div>
-          <div
-            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-            role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 300px;"
-          >
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               role="cell"
               style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
               <span>
-                👉
+                450
               </span>
             </div>
             <div
@@ -117567,29 +124333,31 @@ Object {
               role="cell"
               style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
             >
-              Test
+              <span>
+                1500
+              </span>
             </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
             >
-              <span>
-                960
-              </span>
+              1500
             </div>
           </div>
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 300px;"
+            style="display: flex; flex: 1 0 auto; min-width: 500px;"
           >
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
               role="cell"
               style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
-              <span>
+              <span
+                style="padding-left: 0rem;"
+              >
                 👉
               </span>
             </div>
@@ -117601,27 +124369,12 @@ Object {
               Test
             </div>
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-            >
-              <span>
-                990
-              </span>
-            </div>
-          </div>
-          <div
-            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-            role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 300px;"
-          >
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               role="cell"
               style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
               <span>
-                👉
+                480
               </span>
             </div>
             <div
@@ -117629,29 +124382,31 @@ Object {
               role="cell"
               style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
             >
-              Test
+              <span>
+                1600
+              </span>
             </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
             >
-              <span>
-                1020
-              </span>
+              1600
             </div>
           </div>
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 300px;"
+            style="display: flex; flex: 1 0 auto; min-width: 500px;"
           >
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
               role="cell"
               style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
-              <span>
+              <span
+                style="padding-left: 0rem;"
+              >
                 👉
               </span>
             </div>
@@ -117663,27 +124418,12 @@ Object {
               Test
             </div>
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-            >
-              <span>
-                1050
-              </span>
-            </div>
-          </div>
-          <div
-            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-            role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 300px;"
-          >
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               role="cell"
               style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
               <span>
-                👉
+                510
               </span>
             </div>
             <div
@@ -117691,29 +124431,31 @@ Object {
               role="cell"
               style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
             >
-              Test
+              <span>
+                1700
+              </span>
             </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
             >
-              <span>
-                1080
-              </span>
+              1700
             </div>
           </div>
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 300px;"
+            style="display: flex; flex: 1 0 auto; min-width: 500px;"
           >
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
               role="cell"
               style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
-              <span>
+              <span
+                style="padding-left: 0rem;"
+              >
                 👉
               </span>
             </div>
@@ -117725,27 +124467,12 @@ Object {
               Test
             </div>
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-            >
-              <span>
-                1110
-              </span>
-            </div>
-          </div>
-          <div
-            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-            role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 300px;"
-          >
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               role="cell"
               style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
               <span>
-                👉
+                540
               </span>
             </div>
             <div
@@ -117753,29 +124480,31 @@ Object {
               role="cell"
               style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
             >
-              Test
+              <span>
+                1800
+              </span>
             </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
             >
-              <span>
-                1140
-              </span>
+              1800
             </div>
           </div>
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 300px;"
+            style="display: flex; flex: 1 0 auto; min-width: 500px;"
           >
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
               role="cell"
               style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
-              <span>
+              <span
+                style="padding-left: 0rem;"
+              >
                 👉
               </span>
             </div>
@@ -117787,14 +124516,30 @@ Object {
               Test
             </div>
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               role="cell"
               style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
               <span>
-                1170
+                570
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              <span>
+                1900
               </span>
             </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              1900
+            </div>
           </div>
         </div>
       </div>
@@ -117812,7 +124557,7 @@ Object {
         <div
           class="flex rounded-moon-s-sm sticky"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 300px;"
+          style="display: flex; flex: 1 0 auto; min-width: 500px;"
         >
           <div
             class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
@@ -117824,7 +124569,6 @@ Object {
               style="cursor: pointer;"
               title="Toggle All Rows Expanded"
             >
-              Expand
               👉
             </span>
             <div
@@ -117840,7 +124584,7 @@ Object {
             role="columnheader"
             style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: relative;"
           >
-            First Name
+            Name
             <div
               class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
               draggable="false"
@@ -117862,10 +124606,38 @@ Object {
               style="cursor: col-resize;"
             />
           </div>
+          <div
+            class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+            colspan="1"
+            role="columnheader"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: relative;"
+          >
+            Visits
+            <div
+              class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+              draggable="false"
+              role="separator"
+              style="cursor: col-resize;"
+            />
+          </div>
+          <div
+            class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+            colspan="1"
+            role="columnheader"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: relative;"
+          >
+            Activity
+            <div
+              class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+              draggable="false"
+              role="separator"
+              style="cursor: col-resize;"
+            />
+          </div>
         </div>
         <div
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 300px;"
+          style="display: flex; flex: 1 0 auto; min-width: 500px;"
         >
           <div
             class="relative"
@@ -117885,6 +124657,18 @@ Object {
             role="columnheader"
             style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px; position: relative;"
           />
+          <div
+            class="relative"
+            colspan="1"
+            role="columnheader"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: relative;"
+          />
+          <div
+            class="relative"
+            colspan="1"
+            role="columnheader"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: relative;"
+          />
         </div>
       </div>
       <div
@@ -117894,14 +124678,16 @@ Object {
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 300px;"
+          style="display: flex; flex: 1 0 auto; min-width: 500px;"
         >
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
             style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <span>
+            <span
+              style="padding-left: 0rem;"
+            >
               👉
             </span>
           </div>
@@ -117913,7 +124699,7 @@ Object {
             Test
           </div>
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
             style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
@@ -117921,18 +124707,36 @@ Object {
               0
             </span>
           </div>
+          <div
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+          >
+            <span>
+              0
+            </span>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+          >
+            0
+          </div>
         </div>
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 300px;"
+          style="display: flex; flex: 1 0 auto; min-width: 500px;"
         >
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
             style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <span>
+            <span
+              style="padding-left: 0rem;"
+            >
               👉
             </span>
           </div>
@@ -117944,7 +124748,7 @@ Object {
             Test
           </div>
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
             style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
@@ -117952,18 +124756,36 @@ Object {
               30
             </span>
           </div>
+          <div
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+          >
+            <span>
+              100
+            </span>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+          >
+            100
+          </div>
         </div>
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 300px;"
+          style="display: flex; flex: 1 0 auto; min-width: 500px;"
         >
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
             style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <span>
+            <span
+              style="padding-left: 0rem;"
+            >
               👉
             </span>
           </div>
@@ -117975,7 +124797,7 @@ Object {
             Test
           </div>
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
             style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
@@ -117983,18 +124805,36 @@ Object {
               60
             </span>
           </div>
+          <div
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+          >
+            <span>
+              200
+            </span>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+          >
+            200
+          </div>
         </div>
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 300px;"
+          style="display: flex; flex: 1 0 auto; min-width: 500px;"
         >
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
             style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <span>
+            <span
+              style="padding-left: 0rem;"
+            >
               👉
             </span>
           </div>
@@ -118006,7 +124846,7 @@ Object {
             Test
           </div>
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
             style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
@@ -118014,18 +124854,36 @@ Object {
               90
             </span>
           </div>
+          <div
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+          >
+            <span>
+              300
+            </span>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+          >
+            300
+          </div>
         </div>
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 300px;"
+          style="display: flex; flex: 1 0 auto; min-width: 500px;"
         >
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
             style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <span>
+            <span
+              style="padding-left: 0rem;"
+            >
               👉
             </span>
           </div>
@@ -118037,7 +124895,7 @@ Object {
             Test
           </div>
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
             style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
@@ -118045,18 +124903,36 @@ Object {
               120
             </span>
           </div>
+          <div
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+          >
+            <span>
+              400
+            </span>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+          >
+            400
+          </div>
         </div>
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 300px;"
+          style="display: flex; flex: 1 0 auto; min-width: 500px;"
         >
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
             style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <span>
+            <span
+              style="padding-left: 0rem;"
+            >
               👉
             </span>
           </div>
@@ -118068,7 +124944,7 @@ Object {
             Test
           </div>
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
             style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
@@ -118076,18 +124952,36 @@ Object {
               150
             </span>
           </div>
+          <div
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+          >
+            <span>
+              500
+            </span>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+          >
+            500
+          </div>
         </div>
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 300px;"
+          style="display: flex; flex: 1 0 auto; min-width: 500px;"
         >
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
             style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <span>
+            <span
+              style="padding-left: 0rem;"
+            >
               👉
             </span>
           </div>
@@ -118099,7 +124993,7 @@ Object {
             Test
           </div>
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
             style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
@@ -118107,18 +125001,36 @@ Object {
               180
             </span>
           </div>
+          <div
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+          >
+            <span>
+              600
+            </span>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+          >
+            600
+          </div>
         </div>
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 300px;"
+          style="display: flex; flex: 1 0 auto; min-width: 500px;"
         >
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
             style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <span>
+            <span
+              style="padding-left: 0rem;"
+            >
               👉
             </span>
           </div>
@@ -118130,7 +125042,7 @@ Object {
             Test
           </div>
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
             style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
@@ -118138,18 +125050,36 @@ Object {
               210
             </span>
           </div>
+          <div
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+          >
+            <span>
+              700
+            </span>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+          >
+            700
+          </div>
         </div>
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 300px;"
+          style="display: flex; flex: 1 0 auto; min-width: 500px;"
         >
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
             style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <span>
+            <span
+              style="padding-left: 0rem;"
+            >
               👉
             </span>
           </div>
@@ -118161,7 +125091,7 @@ Object {
             Test
           </div>
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
             style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
@@ -118169,18 +125099,36 @@ Object {
               240
             </span>
           </div>
+          <div
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+          >
+            <span>
+              800
+            </span>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+          >
+            800
+          </div>
         </div>
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 300px;"
+          style="display: flex; flex: 1 0 auto; min-width: 500px;"
         >
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
             style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <span>
+            <span
+              style="padding-left: 0rem;"
+            >
               👉
             </span>
           </div>
@@ -118192,7 +125140,7 @@ Object {
             Test
           </div>
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
             style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
@@ -118200,49 +125148,36 @@ Object {
               270
             </span>
           </div>
-        </div>
-        <div
-          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-          role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 300px;"
-        >
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-          >
-            <span>
-              👉
-            </span>
-          </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
             style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            Test
+            <span>
+              900
+            </span>
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            <span>
-              300
-            </span>
+            900
           </div>
         </div>
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 300px;"
+          style="display: flex; flex: 1 0 auto; min-width: 500px;"
         >
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
             style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <span>
+            <span
+              style="padding-left: 0rem;"
+            >
               👉
             </span>
           </div>
@@ -118254,27 +125189,12 @@ Object {
             Test
           </div>
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-          >
-            <span>
-              330
-            </span>
-          </div>
-        </div>
-        <div
-          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-          role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 300px;"
-        >
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
             style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
             <span>
-              👉
+              300
             </span>
           </div>
           <div
@@ -118282,29 +125202,31 @@ Object {
             role="cell"
             style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            Test
+            <span>
+              1000
+            </span>
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            <span>
-              360
-            </span>
+            1000
           </div>
         </div>
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 300px;"
+          style="display: flex; flex: 1 0 auto; min-width: 500px;"
         >
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
             style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <span>
+            <span
+              style="padding-left: 0rem;"
+            >
               👉
             </span>
           </div>
@@ -118316,27 +125238,12 @@ Object {
             Test
           </div>
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-          >
-            <span>
-              390
-            </span>
-          </div>
-        </div>
-        <div
-          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-          role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 300px;"
-        >
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
             style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
             <span>
-              👉
+              330
             </span>
           </div>
           <div
@@ -118344,29 +125251,31 @@ Object {
             role="cell"
             style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            Test
+            <span>
+              1100
+            </span>
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            <span>
-              420
-            </span>
+            1100
           </div>
         </div>
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 300px;"
+          style="display: flex; flex: 1 0 auto; min-width: 500px;"
         >
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
             style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <span>
+            <span
+              style="padding-left: 0rem;"
+            >
               👉
             </span>
           </div>
@@ -118378,27 +125287,12 @@ Object {
             Test
           </div>
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-          >
-            <span>
-              450
-            </span>
-          </div>
-        </div>
-        <div
-          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-          role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 300px;"
-        >
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
             style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
             <span>
-              👉
+              360
             </span>
           </div>
           <div
@@ -118406,29 +125300,31 @@ Object {
             role="cell"
             style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            Test
+            <span>
+              1200
+            </span>
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            <span>
-              480
-            </span>
+            1200
           </div>
         </div>
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 300px;"
+          style="display: flex; flex: 1 0 auto; min-width: 500px;"
         >
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
             style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <span>
+            <span
+              style="padding-left: 0rem;"
+            >
               👉
             </span>
           </div>
@@ -118440,27 +125336,12 @@ Object {
             Test
           </div>
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-          >
-            <span>
-              510
-            </span>
-          </div>
-        </div>
-        <div
-          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-          role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 300px;"
-        >
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
             style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
             <span>
-              👉
+              390
             </span>
           </div>
           <div
@@ -118468,29 +125349,31 @@ Object {
             role="cell"
             style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            Test
+            <span>
+              1300
+            </span>
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            <span>
-              540
-            </span>
+            1300
           </div>
         </div>
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 300px;"
+          style="display: flex; flex: 1 0 auto; min-width: 500px;"
         >
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
             style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <span>
+            <span
+              style="padding-left: 0rem;"
+            >
               👉
             </span>
           </div>
@@ -118502,27 +125385,12 @@ Object {
             Test
           </div>
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-          >
-            <span>
-              570
-            </span>
-          </div>
-        </div>
-        <div
-          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-          role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 300px;"
-        >
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
             style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
             <span>
-              👉
+              420
             </span>
           </div>
           <div
@@ -118530,29 +125398,31 @@ Object {
             role="cell"
             style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            Test
+            <span>
+              1400
+            </span>
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            <span>
-              600
-            </span>
+            1400
           </div>
         </div>
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 300px;"
+          style="display: flex; flex: 1 0 auto; min-width: 500px;"
         >
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
             style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <span>
+            <span
+              style="padding-left: 0rem;"
+            >
               👉
             </span>
           </div>
@@ -118564,27 +125434,12 @@ Object {
             Test
           </div>
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-          >
-            <span>
-              630
-            </span>
-          </div>
-        </div>
-        <div
-          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-          role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 300px;"
-        >
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
             style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
             <span>
-              👉
+              450
             </span>
           </div>
           <div
@@ -118592,29 +125447,31 @@ Object {
             role="cell"
             style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            Test
+            <span>
+              1500
+            </span>
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            <span>
-              660
-            </span>
+            1500
           </div>
         </div>
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 300px;"
+          style="display: flex; flex: 1 0 auto; min-width: 500px;"
         >
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
             style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <span>
+            <span
+              style="padding-left: 0rem;"
+            >
               👉
             </span>
           </div>
@@ -118626,26 +125483,44 @@ Object {
             Test
           </div>
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
             style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
             <span>
-              690
+              480
+            </span>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+          >
+            <span>
+              1600
             </span>
           </div>
+          <div
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+          >
+            1600
+          </div>
         </div>
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 300px;"
+          style="display: flex; flex: 1 0 auto; min-width: 500px;"
         >
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
             style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <span>
+            <span
+              style="padding-left: 0rem;"
+            >
               👉
             </span>
           </div>
@@ -118657,26 +125532,44 @@ Object {
             Test
           </div>
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
             style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
             <span>
-              720
+              510
+            </span>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+          >
+            <span>
+              1700
             </span>
           </div>
+          <div
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+          >
+            1700
+          </div>
         </div>
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 300px;"
+          style="display: flex; flex: 1 0 auto; min-width: 500px;"
         >
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
             style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <span>
+            <span
+              style="padding-left: 0rem;"
+            >
               👉
             </span>
           </div>
@@ -118688,26 +125581,44 @@ Object {
             Test
           </div>
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
             style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
             <span>
-              750
+              540
+            </span>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+          >
+            <span>
+              1800
             </span>
           </div>
+          <div
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+          >
+            1800
+          </div>
         </div>
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 300px;"
+          style="display: flex; flex: 1 0 auto; min-width: 500px;"
         >
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
             style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <span>
+            <span
+              style="padding-left: 0rem;"
+            >
               👉
             </span>
           </div>
@@ -118719,416 +125630,902 @@ Object {
             Test
           </div>
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
             style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
             <span>
-              780
+              570
             </span>
           </div>
-        </div>
-        <div
-          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-          role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 300px;"
-        >
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
             <span>
-              👉
+              1900
             </span>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
             role="cell"
             style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            Test
+            1900
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`Table renders Default 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="table-wrapper sm:overflow-auto overflow-scroll no-scrollbar flex flex-col sticky"
+        role="table"
+      >
+        <div
+          class="flex flex-col sticky top-0 z-[99]"
+        >
+          <div
+            class="flex rounded-moon-s-sm sticky"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 0px;"
+          >
+            <div
+              class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+              colspan="1"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
+            >
+              First Name
+              <div
+                class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+                draggable="false"
+                role="separator"
+                style="cursor: col-resize;"
+              />
+            </div>
+            <div
+              class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+              colspan="1"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
+            >
+              Last Name
+              <div
+                class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+                draggable="false"
+                role="separator"
+                style="cursor: col-resize;"
+              />
+            </div>
+            <div
+              class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+              colspan="1"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
+            >
+              Age
+              <div
+                class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+                draggable="false"
+                role="separator"
+                style="cursor: col-resize;"
+              />
+            </div>
+            <div
+              class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+              colspan="1"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
+            >
+              Visits
+              <div
+                class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+                draggable="false"
+                role="separator"
+                style="cursor: col-resize;"
+              />
+            </div>
+            <div
+              class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+              colspan="1"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
+            >
+              Activity
+              <div
+                class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+                draggable="false"
+                role="separator"
+                style="cursor: col-resize;"
+              />
+            </div>
+            <div
+              class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+              colspan="1"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
+            >
+              Status
+              <div
+                class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+                draggable="false"
+                role="separator"
+                style="cursor: col-resize;"
+              />
+            </div>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 0px;"
           >
-            <span>
-              810
-            </span>
+            <div
+              class="relative"
+              colspan="1"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
+            />
+            <div
+              class="relative"
+              colspan="1"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
+            />
+            <div
+              class="relative"
+              colspan="1"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
+            />
+            <div
+              class="relative"
+              colspan="1"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
+            />
+            <div
+              class="relative"
+              colspan="1"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
+            />
+            <div
+              class="relative"
+              colspan="1"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
+            />
           </div>
         </div>
         <div
-          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-          role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 300px;"
+          class="flex flex-col relative z-0 no-scrollbar gap-1"
+          role="rowgroup"
         >
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 0px;"
           >
-            <span>
-              👉
-            </span>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            >
+              Test
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            >
+              Test
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            >
+              <span>
+                0
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            >
+              <span>
+                0
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            >
+              0
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            >
+              0
+            </div>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 0px;"
           >
-            Test
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            >
+              Test
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            >
+              Test
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            >
+              <span>
+                30
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            >
+              <span>
+                100
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            >
+              100
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            >
+              100
+            </div>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 0px;"
           >
-            <span>
-              840
-            </span>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            >
+              Test
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            >
+              Test
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            >
+              <span>
+                60
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            >
+              <span>
+                200
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            >
+              200
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            >
+              200
+            </div>
+          </div>
+          <div
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 0px;"
+          >
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            >
+              Test
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            >
+              Test
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            >
+              <span>
+                90
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            >
+              <span>
+                300
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            >
+              300
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            >
+              300
+            </div>
+          </div>
+          <div
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 0px;"
+          >
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            >
+              Test
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            >
+              Test
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            >
+              <span>
+                120
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            >
+              <span>
+                400
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            >
+              400
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            >
+              400
+            </div>
           </div>
         </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="table-wrapper sm:overflow-auto overflow-scroll no-scrollbar flex flex-col sticky"
+      role="table"
+    >
+      <div
+        class="flex flex-col sticky top-0 z-[99]"
+      >
         <div
-          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+          class="flex rounded-moon-s-sm sticky"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 300px;"
+          style="display: flex; flex: 1 0 auto; min-width: 0px;"
         >
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+            colspan="1"
+            role="columnheader"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
           >
-            <span>
-              👉
-            </span>
+            First Name
+            <div
+              class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+              draggable="false"
+              role="separator"
+              style="cursor: col-resize;"
+            />
           </div>
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+            colspan="1"
+            role="columnheader"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
           >
-            Test
+            Last Name
+            <div
+              class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+              draggable="false"
+              role="separator"
+              style="cursor: col-resize;"
+            />
           </div>
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+            colspan="1"
+            role="columnheader"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
           >
-            <span>
-              870
-            </span>
+            Age
+            <div
+              class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+              draggable="false"
+              role="separator"
+              style="cursor: col-resize;"
+            />
+          </div>
+          <div
+            class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+            colspan="1"
+            role="columnheader"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
+          >
+            Visits
+            <div
+              class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+              draggable="false"
+              role="separator"
+              style="cursor: col-resize;"
+            />
+          </div>
+          <div
+            class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+            colspan="1"
+            role="columnheader"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
+          >
+            Activity
+            <div
+              class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+              draggable="false"
+              role="separator"
+              style="cursor: col-resize;"
+            />
+          </div>
+          <div
+            class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+            colspan="1"
+            role="columnheader"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
+          >
+            Status
+            <div
+              class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+              draggable="false"
+              role="separator"
+              style="cursor: col-resize;"
+            />
           </div>
         </div>
+        <div
+          role="row"
+          style="display: flex; flex: 1 0 auto; min-width: 0px;"
+        >
+          <div
+            class="relative"
+            colspan="1"
+            role="columnheader"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
+          />
+          <div
+            class="relative"
+            colspan="1"
+            role="columnheader"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
+          />
+          <div
+            class="relative"
+            colspan="1"
+            role="columnheader"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
+          />
+          <div
+            class="relative"
+            colspan="1"
+            role="columnheader"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
+          />
+          <div
+            class="relative"
+            colspan="1"
+            role="columnheader"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
+          />
+          <div
+            class="relative"
+            colspan="1"
+            role="columnheader"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
+          />
+        </div>
+      </div>
+      <div
+        class="flex flex-col relative z-0 no-scrollbar gap-1"
+        role="rowgroup"
+      >
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 300px;"
+          style="display: flex; flex: 1 0 auto; min-width: 0px;"
         >
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
           >
-            <span>
-              👉
-            </span>
+            Test
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
           >
             Test
           </div>
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
           >
             <span>
-              900
+              0
             </span>
           </div>
-        </div>
-        <div
-          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-          role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 300px;"
-        >
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
           >
             <span>
-              👉
+              0
             </span>
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
           >
-            Test
+            0
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
           >
-            <span>
-              930
-            </span>
+            0
           </div>
         </div>
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 300px;"
+          style="display: flex; flex: 1 0 auto; min-width: 0px;"
         >
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
           >
-            <span>
-              👉
-            </span>
+            Test
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
           >
             Test
           </div>
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
           >
             <span>
-              960
+              30
             </span>
           </div>
-        </div>
-        <div
-          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-          role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 300px;"
-        >
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
           >
             <span>
-              👉
+              100
             </span>
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
           >
-            Test
+            100
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
           >
-            <span>
-              990
-            </span>
+            100
           </div>
         </div>
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 300px;"
+          style="display: flex; flex: 1 0 auto; min-width: 0px;"
         >
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
           >
-            <span>
-              👉
-            </span>
+            Test
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
           >
             Test
           </div>
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
           >
             <span>
-              1020
+              60
             </span>
           </div>
-        </div>
-        <div
-          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-          role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 300px;"
-        >
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
           >
             <span>
-              👉
+              200
             </span>
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
           >
-            Test
+            200
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
           >
-            <span>
-              1050
-            </span>
+            200
           </div>
         </div>
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 300px;"
+          style="display: flex; flex: 1 0 auto; min-width: 0px;"
         >
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
           >
-            <span>
-              👉
-            </span>
+            Test
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
           >
             Test
           </div>
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
           >
             <span>
-              1080
+              90
             </span>
           </div>
-        </div>
-        <div
-          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-          role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 300px;"
-        >
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
           >
             <span>
-              👉
+              300
             </span>
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
           >
-            Test
+            300
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
           >
-            <span>
-              1110
-            </span>
+            300
           </div>
         </div>
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 300px;"
+          style="display: flex; flex: 1 0 auto; min-width: 0px;"
         >
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
           >
-            <span>
-              👉
-            </span>
+            Test
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
           >
             Test
           </div>
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
           >
             <span>
-              1140
+              120
             </span>
           </div>
-        </div>
-        <div
-          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-          role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 300px;"
-        >
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
           >
             <span>
-              👉
+              400
             </span>
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
           >
-            Test
+            400
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
           >
-            <span>
-              1170
-            </span>
+            400
           </div>
         </div>
       </div>
@@ -119188,7 +126585,7 @@ Object {
 }
 `;
 
-exports[`Table renders DeepTable 1`] = `
+exports[`Table renders Editable 1`] = `
 Object {
   "asFragment": [Function],
   "baseElement": <body>
@@ -119196,7 +126593,6 @@ Object {
       <div
         class="table-wrapper sm:overflow-auto overflow-scroll no-scrollbar flex flex-col sticky"
         role="table"
-        style="width: 800px; height: 400px;"
       >
         <div
           class="flex flex-col sticky top-0 z-[99]"
@@ -119204,20 +126600,15 @@ Object {
           <div
             class="flex rounded-moon-s-sm sticky"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 500px;"
+            style="display: flex; flex: 1 0 auto; min-width: 0px;"
           >
             <div
               class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
               colspan="1"
               role="columnheader"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px; position: relative;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
             >
-              <span
-                style="cursor: pointer;"
-                title="Toggle All Rows Expanded"
-              >
-                👉
-              </span>
+              First Name
               <div
                 class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
                 draggable="false"
@@ -119229,9 +126620,9 @@ Object {
               class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
               colspan="1"
               role="columnheader"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: relative;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
             >
-              Name
+              Last Name
               <div
                 class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
                 draggable="false"
@@ -119243,7 +126634,7 @@ Object {
               class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
               colspan="1"
               role="columnheader"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px; position: relative;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
             >
               Age
               <div
@@ -119257,7 +126648,7 @@ Object {
               class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
               colspan="1"
               role="columnheader"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: relative;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
             >
               Visits
               <div
@@ -119271,7 +126662,7 @@ Object {
               class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
               colspan="1"
               role="columnheader"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: relative;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
             >
               Activity
               <div
@@ -119281,40 +126672,60 @@ Object {
                 style="cursor: col-resize;"
               />
             </div>
+            <div
+              class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+              colspan="1"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
+            >
+              Status
+              <div
+                class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+                draggable="false"
+                role="separator"
+                style="cursor: col-resize;"
+              />
+            </div>
           </div>
           <div
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 500px;"
+            style="display: flex; flex: 1 0 auto; min-width: 0px;"
           >
             <div
               class="relative"
               colspan="1"
               role="columnheader"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px; position: relative;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
             />
             <div
               class="relative"
               colspan="1"
               role="columnheader"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: relative;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
             />
             <div
               class="relative"
               colspan="1"
               role="columnheader"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px; position: relative;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
             />
             <div
               class="relative"
               colspan="1"
               role="columnheader"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: relative;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
             />
             <div
               class="relative"
               colspan="1"
               role="columnheader"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: relative;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
+            />
+            <div
+              class="relative"
+              colspan="1"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
             />
           </div>
         </div>
@@ -119325,981 +126736,361 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 500px;"
-          >
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-            >
-              <span
-                style="padding-left: 0rem;"
-              >
-                👉
-              </span>
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-            >
-              Test
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-            >
-              <span>
-                0
-              </span>
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-            >
-              <span>
-                0
-              </span>
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-            >
-              0
-            </div>
-          </div>
-          <div
-            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-            role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 500px;"
-          >
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-            >
-              <span
-                style="padding-left: 0rem;"
-              >
-                👉
-              </span>
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-            >
-              Test
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-            >
-              <span>
-                30
-              </span>
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-            >
-              <span>
-                100
-              </span>
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-            >
-              100
-            </div>
-          </div>
-          <div
-            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-            role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 500px;"
-          >
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-            >
-              <span
-                style="padding-left: 0rem;"
-              >
-                👉
-              </span>
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-            >
-              Test
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-            >
-              <span>
-                60
-              </span>
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-            >
-              <span>
-                200
-              </span>
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-            >
-              200
-            </div>
-          </div>
-          <div
-            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-            role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 500px;"
-          >
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-            >
-              <span
-                style="padding-left: 0rem;"
-              >
-                👉
-              </span>
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-            >
-              Test
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-            >
-              <span>
-                90
-              </span>
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-            >
-              <span>
-                300
-              </span>
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-            >
-              300
-            </div>
-          </div>
-          <div
-            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-            role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 500px;"
-          >
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-            >
-              <span
-                style="padding-left: 0rem;"
-              >
-                👉
-              </span>
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-            >
-              Test
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-            >
-              <span>
-                120
-              </span>
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-            >
-              <span>
-                400
-              </span>
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-            >
-              400
-            </div>
-          </div>
-          <div
-            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-            role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 500px;"
-          >
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-            >
-              <span
-                style="padding-left: 0rem;"
-              >
-                👉
-              </span>
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-            >
-              Test
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-            >
-              <span>
-                150
-              </span>
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-            >
-              <span>
-                500
-              </span>
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-            >
-              500
-            </div>
-          </div>
-          <div
-            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-            role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 500px;"
-          >
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-            >
-              <span
-                style="padding-left: 0rem;"
-              >
-                👉
-              </span>
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-            >
-              Test
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-            >
-              <span>
-                180
-              </span>
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-            >
-              <span>
-                600
-              </span>
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-            >
-              600
-            </div>
-          </div>
-          <div
-            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-            role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 500px;"
-          >
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-            >
-              <span
-                style="padding-left: 0rem;"
-              >
-                👉
-              </span>
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-            >
-              Test
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-            >
-              <span>
-                210
-              </span>
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-            >
-              <span>
-                700
-              </span>
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-            >
-              700
-            </div>
-          </div>
-          <div
-            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-            role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 500px;"
-          >
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-            >
-              <span
-                style="padding-left: 0rem;"
-              >
-                👉
-              </span>
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-            >
-              Test
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-            >
-              <span>
-                240
-              </span>
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-            >
-              <span>
-                800
-              </span>
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-            >
-              800
-            </div>
-          </div>
-          <div
-            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-            role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 500px;"
-          >
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-            >
-              <span
-                style="padding-left: 0rem;"
-              >
-                👉
-              </span>
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-            >
-              Test
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-            >
-              <span>
-                270
-              </span>
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-            >
-              <span>
-                900
-              </span>
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-            >
-              900
-            </div>
-          </div>
-          <div
-            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-            role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 500px;"
+            style="display: flex; flex: 1 0 auto; min-width: 0px;"
           >
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-            >
-              <span
-                style="padding-left: 0rem;"
-              >
-                👉
-              </span>
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-            >
-              Test
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
             >
-              <span>
-                300
-              </span>
+              <input
+                aria-label="Editable cell"
+                class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+                value="Test"
+              />
             </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-            >
-              <span>
-                1000
-              </span>
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-            >
-              1000
-            </div>
-          </div>
-          <div
-            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-            role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 500px;"
-          >
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
             >
-              <span
-                style="padding-left: 0rem;"
-              >
-                👉
-              </span>
+              <input
+                aria-label="Editable cell"
+                class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+                value="Test"
+              />
             </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
             >
-              Test
+              <input
+                aria-label="Editable cell"
+                class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+                value="0"
+              />
             </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
             >
-              <span>
-                330
-              </span>
+              <input
+                aria-label="Editable cell"
+                class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+                value="0"
+              />
             </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
             >
-              <span>
-                1100
-              </span>
+              <input
+                aria-label="Editable cell"
+                class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+                value="0"
+              />
             </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
             >
-              1100
+              <input
+                aria-label="Editable cell"
+                class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+                value="0"
+              />
             </div>
           </div>
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 500px;"
+            style="display: flex; flex: 1 0 auto; min-width: 0px;"
           >
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-            >
-              <span
-                style="padding-left: 0rem;"
-              >
-                👉
-              </span>
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-            >
-              Test
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
             >
-              <span>
-                360
-              </span>
+              <input
+                aria-label="Editable cell"
+                class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+                value="Test"
+              />
             </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-            >
-              <span>
-                1200
-              </span>
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-            >
-              1200
-            </div>
-          </div>
-          <div
-            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-            role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 500px;"
-          >
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
             >
-              <span
-                style="padding-left: 0rem;"
-              >
-                👉
-              </span>
+              <input
+                aria-label="Editable cell"
+                class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+                value="Test"
+              />
             </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
             >
-              Test
+              <input
+                aria-label="Editable cell"
+                class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+                value="30"
+              />
             </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
             >
-              <span>
-                390
-              </span>
+              <input
+                aria-label="Editable cell"
+                class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+                value="100"
+              />
             </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
             >
-              <span>
-                1300
-              </span>
+              <input
+                aria-label="Editable cell"
+                class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+                value="100"
+              />
             </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
             >
-              1300
+              <input
+                aria-label="Editable cell"
+                class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+                value="100"
+              />
             </div>
           </div>
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 500px;"
+            style="display: flex; flex: 1 0 auto; min-width: 0px;"
           >
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-            >
-              <span
-                style="padding-left: 0rem;"
-              >
-                👉
-              </span>
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-            >
-              Test
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
             >
-              <span>
-                420
-              </span>
+              <input
+                aria-label="Editable cell"
+                class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+                value="Test"
+              />
             </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-            >
-              <span>
-                1400
-              </span>
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-            >
-              1400
-            </div>
-          </div>
-          <div
-            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-            role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 500px;"
-          >
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
             >
-              <span
-                style="padding-left: 0rem;"
-              >
-                👉
-              </span>
+              <input
+                aria-label="Editable cell"
+                class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+                value="Test"
+              />
             </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
             >
-              Test
+              <input
+                aria-label="Editable cell"
+                class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+                value="60"
+              />
             </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
             >
-              <span>
-                450
-              </span>
+              <input
+                aria-label="Editable cell"
+                class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+                value="200"
+              />
             </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
             >
-              <span>
-                1500
-              </span>
+              <input
+                aria-label="Editable cell"
+                class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+                value="200"
+              />
             </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
             >
-              1500
+              <input
+                aria-label="Editable cell"
+                class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+                value="200"
+              />
             </div>
           </div>
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 500px;"
+            style="display: flex; flex: 1 0 auto; min-width: 0px;"
           >
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-            >
-              <span
-                style="padding-left: 0rem;"
-              >
-                👉
-              </span>
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-            >
-              Test
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
             >
-              <span>
-                480
-              </span>
+              <input
+                aria-label="Editable cell"
+                class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+                value="Test"
+              />
             </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-            >
-              <span>
-                1600
-              </span>
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-            >
-              1600
-            </div>
-          </div>
-          <div
-            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-            role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 500px;"
-          >
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
             >
-              <span
-                style="padding-left: 0rem;"
-              >
-                👉
-              </span>
+              <input
+                aria-label="Editable cell"
+                class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+                value="Test"
+              />
             </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
             >
-              Test
+              <input
+                aria-label="Editable cell"
+                class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+                value="90"
+              />
             </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
             >
-              <span>
-                510
-              </span>
+              <input
+                aria-label="Editable cell"
+                class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+                value="300"
+              />
             </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
             >
-              <span>
-                1700
-              </span>
+              <input
+                aria-label="Editable cell"
+                class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+                value="300"
+              />
             </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
             >
-              1700
+              <input
+                aria-label="Editable cell"
+                class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+                value="300"
+              />
             </div>
           </div>
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 500px;"
+            style="display: flex; flex: 1 0 auto; min-width: 0px;"
           >
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-            >
-              <span
-                style="padding-left: 0rem;"
-              >
-                👉
-              </span>
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-            >
-              Test
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
             >
-              <span>
-                540
-              </span>
+              <input
+                aria-label="Editable cell"
+                class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+                value="Test"
+              />
             </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-            >
-              <span>
-                1800
-              </span>
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-            >
-              1800
-            </div>
-          </div>
-          <div
-            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-            role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 500px;"
-          >
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
             >
-              <span
-                style="padding-left: 0rem;"
-              >
-                👉
-              </span>
+              <input
+                aria-label="Editable cell"
+                class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+                value="Test"
+              />
             </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
             >
-              Test
+              <input
+                aria-label="Editable cell"
+                class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+                value="120"
+              />
             </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
             >
-              <span>
-                570
-              </span>
+              <input
+                aria-label="Editable cell"
+                class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+                value="400"
+              />
             </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
             >
-              <span>
-                1900
-              </span>
+              <input
+                aria-label="Editable cell"
+                class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+                value="400"
+              />
             </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
             >
-              1900
+              <input
+                aria-label="Editable cell"
+                class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+                value="400"
+              />
             </div>
           </div>
         </div>
@@ -120310,7 +127101,6 @@ Object {
     <div
       class="table-wrapper sm:overflow-auto overflow-scroll no-scrollbar flex flex-col sticky"
       role="table"
-      style="width: 800px; height: 400px;"
     >
       <div
         class="flex flex-col sticky top-0 z-[99]"
@@ -120318,20 +127108,15 @@ Object {
         <div
           class="flex rounded-moon-s-sm sticky"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 500px;"
+          style="display: flex; flex: 1 0 auto; min-width: 0px;"
         >
           <div
             class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
             colspan="1"
             role="columnheader"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px; position: relative;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
           >
-            <span
-              style="cursor: pointer;"
-              title="Toggle All Rows Expanded"
-            >
-              👉
-            </span>
+            First Name
             <div
               class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
               draggable="false"
@@ -120343,9 +127128,9 @@ Object {
             class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
             colspan="1"
             role="columnheader"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: relative;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
           >
-            Name
+            Last Name
             <div
               class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
               draggable="false"
@@ -120357,7 +127142,7 @@ Object {
             class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
             colspan="1"
             role="columnheader"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px; position: relative;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
           >
             Age
             <div
@@ -120371,7 +127156,7 @@ Object {
             class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
             colspan="1"
             role="columnheader"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: relative;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
           >
             Visits
             <div
@@ -120385,7 +127170,7 @@ Object {
             class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
             colspan="1"
             role="columnheader"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: relative;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
           >
             Activity
             <div
@@ -120395,40 +127180,60 @@ Object {
               style="cursor: col-resize;"
             />
           </div>
+          <div
+            class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+            colspan="1"
+            role="columnheader"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
+          >
+            Status
+            <div
+              class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+              draggable="false"
+              role="separator"
+              style="cursor: col-resize;"
+            />
+          </div>
         </div>
         <div
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 500px;"
+          style="display: flex; flex: 1 0 auto; min-width: 0px;"
         >
           <div
             class="relative"
             colspan="1"
             role="columnheader"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px; position: relative;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
           />
           <div
             class="relative"
             colspan="1"
             role="columnheader"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: relative;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
           />
           <div
             class="relative"
             colspan="1"
             role="columnheader"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px; position: relative;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
           />
           <div
             class="relative"
             colspan="1"
             role="columnheader"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: relative;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
           />
           <div
             class="relative"
             colspan="1"
             role="columnheader"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: relative;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
+          />
+          <div
+            class="relative"
+            colspan="1"
+            role="columnheader"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
           />
         </div>
       </div>
@@ -120439,981 +127244,361 @@ Object {
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 500px;"
-        >
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-          >
-            <span
-              style="padding-left: 0rem;"
-            >
-              👉
-            </span>
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-          >
-            Test
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-          >
-            <span>
-              0
-            </span>
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-          >
-            <span>
-              0
-            </span>
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-          >
-            0
-          </div>
-        </div>
-        <div
-          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-          role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 500px;"
-        >
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-          >
-            <span
-              style="padding-left: 0rem;"
-            >
-              👉
-            </span>
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-          >
-            Test
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-          >
-            <span>
-              30
-            </span>
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-          >
-            <span>
-              100
-            </span>
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-          >
-            100
-          </div>
-        </div>
-        <div
-          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-          role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 500px;"
-        >
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-          >
-            <span
-              style="padding-left: 0rem;"
-            >
-              👉
-            </span>
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-          >
-            Test
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-          >
-            <span>
-              60
-            </span>
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-          >
-            <span>
-              200
-            </span>
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-          >
-            200
-          </div>
-        </div>
-        <div
-          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-          role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 500px;"
-        >
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-          >
-            <span
-              style="padding-left: 0rem;"
-            >
-              👉
-            </span>
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-          >
-            Test
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-          >
-            <span>
-              90
-            </span>
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-          >
-            <span>
-              300
-            </span>
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-          >
-            300
-          </div>
-        </div>
-        <div
-          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-          role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 500px;"
-        >
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-          >
-            <span
-              style="padding-left: 0rem;"
-            >
-              👉
-            </span>
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-          >
-            Test
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-          >
-            <span>
-              120
-            </span>
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-          >
-            <span>
-              400
-            </span>
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-          >
-            400
-          </div>
-        </div>
-        <div
-          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-          role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 500px;"
-        >
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-          >
-            <span
-              style="padding-left: 0rem;"
-            >
-              👉
-            </span>
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-          >
-            Test
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-          >
-            <span>
-              150
-            </span>
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-          >
-            <span>
-              500
-            </span>
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-          >
-            500
-          </div>
-        </div>
-        <div
-          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-          role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 500px;"
-        >
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-          >
-            <span
-              style="padding-left: 0rem;"
-            >
-              👉
-            </span>
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-          >
-            Test
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-          >
-            <span>
-              180
-            </span>
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-          >
-            <span>
-              600
-            </span>
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-          >
-            600
-          </div>
-        </div>
-        <div
-          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-          role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 500px;"
-        >
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-          >
-            <span
-              style="padding-left: 0rem;"
-            >
-              👉
-            </span>
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-          >
-            Test
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-          >
-            <span>
-              210
-            </span>
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-          >
-            <span>
-              700
-            </span>
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-          >
-            700
-          </div>
-        </div>
-        <div
-          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-          role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 500px;"
-        >
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-          >
-            <span
-              style="padding-left: 0rem;"
-            >
-              👉
-            </span>
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-          >
-            Test
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-          >
-            <span>
-              240
-            </span>
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-          >
-            <span>
-              800
-            </span>
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-          >
-            800
-          </div>
-        </div>
-        <div
-          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-          role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 500px;"
-        >
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-          >
-            <span
-              style="padding-left: 0rem;"
-            >
-              👉
-            </span>
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-          >
-            Test
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-          >
-            <span>
-              270
-            </span>
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-          >
-            <span>
-              900
-            </span>
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-          >
-            900
-          </div>
-        </div>
-        <div
-          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-          role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 500px;"
+          style="display: flex; flex: 1 0 auto; min-width: 0px;"
         >
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-          >
-            <span
-              style="padding-left: 0rem;"
-            >
-              👉
-            </span>
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-          >
-            Test
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
           >
-            <span>
-              300
-            </span>
+            <input
+              aria-label="Editable cell"
+              class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              value="Test"
+            />
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-          >
-            <span>
-              1000
-            </span>
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-          >
-            1000
-          </div>
-        </div>
-        <div
-          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-          role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 500px;"
-        >
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
           >
-            <span
-              style="padding-left: 0rem;"
-            >
-              👉
-            </span>
+            <input
+              aria-label="Editable cell"
+              class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              value="Test"
+            />
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
           >
-            Test
+            <input
+              aria-label="Editable cell"
+              class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              value="0"
+            />
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
           >
-            <span>
-              330
-            </span>
+            <input
+              aria-label="Editable cell"
+              class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              value="0"
+            />
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
           >
-            <span>
-              1100
-            </span>
+            <input
+              aria-label="Editable cell"
+              class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              value="0"
+            />
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
           >
-            1100
+            <input
+              aria-label="Editable cell"
+              class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              value="0"
+            />
           </div>
         </div>
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 500px;"
+          style="display: flex; flex: 1 0 auto; min-width: 0px;"
         >
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-          >
-            <span
-              style="padding-left: 0rem;"
-            >
-              👉
-            </span>
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-          >
-            Test
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
           >
-            <span>
-              360
-            </span>
+            <input
+              aria-label="Editable cell"
+              class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              value="Test"
+            />
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-          >
-            <span>
-              1200
-            </span>
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-          >
-            1200
-          </div>
-        </div>
-        <div
-          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-          role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 500px;"
-        >
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
           >
-            <span
-              style="padding-left: 0rem;"
-            >
-              👉
-            </span>
+            <input
+              aria-label="Editable cell"
+              class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              value="Test"
+            />
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
           >
-            Test
+            <input
+              aria-label="Editable cell"
+              class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              value="30"
+            />
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
           >
-            <span>
-              390
-            </span>
+            <input
+              aria-label="Editable cell"
+              class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              value="100"
+            />
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
           >
-            <span>
-              1300
-            </span>
+            <input
+              aria-label="Editable cell"
+              class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              value="100"
+            />
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
           >
-            1300
+            <input
+              aria-label="Editable cell"
+              class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              value="100"
+            />
           </div>
         </div>
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 500px;"
+          style="display: flex; flex: 1 0 auto; min-width: 0px;"
         >
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-          >
-            <span
-              style="padding-left: 0rem;"
-            >
-              👉
-            </span>
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-          >
-            Test
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
           >
-            <span>
-              420
-            </span>
+            <input
+              aria-label="Editable cell"
+              class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              value="Test"
+            />
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-          >
-            <span>
-              1400
-            </span>
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-          >
-            1400
-          </div>
-        </div>
-        <div
-          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-          role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 500px;"
-        >
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
           >
-            <span
-              style="padding-left: 0rem;"
-            >
-              👉
-            </span>
+            <input
+              aria-label="Editable cell"
+              class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              value="Test"
+            />
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
           >
-            Test
+            <input
+              aria-label="Editable cell"
+              class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              value="60"
+            />
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
           >
-            <span>
-              450
-            </span>
+            <input
+              aria-label="Editable cell"
+              class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              value="200"
+            />
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
           >
-            <span>
-              1500
-            </span>
+            <input
+              aria-label="Editable cell"
+              class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              value="200"
+            />
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
           >
-            1500
+            <input
+              aria-label="Editable cell"
+              class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              value="200"
+            />
           </div>
         </div>
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 500px;"
+          style="display: flex; flex: 1 0 auto; min-width: 0px;"
         >
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-          >
-            <span
-              style="padding-left: 0rem;"
-            >
-              👉
-            </span>
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-          >
-            Test
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
           >
-            <span>
-              480
-            </span>
+            <input
+              aria-label="Editable cell"
+              class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              value="Test"
+            />
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-          >
-            <span>
-              1600
-            </span>
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-          >
-            1600
-          </div>
-        </div>
-        <div
-          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-          role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 500px;"
-        >
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
           >
-            <span
-              style="padding-left: 0rem;"
-            >
-              👉
-            </span>
+            <input
+              aria-label="Editable cell"
+              class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              value="Test"
+            />
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
           >
-            Test
+            <input
+              aria-label="Editable cell"
+              class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              value="90"
+            />
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
           >
-            <span>
-              510
-            </span>
+            <input
+              aria-label="Editable cell"
+              class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              value="300"
+            />
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
           >
-            <span>
-              1700
-            </span>
+            <input
+              aria-label="Editable cell"
+              class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              value="300"
+            />
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
           >
-            1700
+            <input
+              aria-label="Editable cell"
+              class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              value="300"
+            />
           </div>
         </div>
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 500px;"
+          style="display: flex; flex: 1 0 auto; min-width: 0px;"
         >
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-          >
-            <span
-              style="padding-left: 0rem;"
-            >
-              👉
-            </span>
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-          >
-            Test
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-          >
-            <span>
-              540
-            </span>
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-          >
-            <span>
-              1800
-            </span>
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
           >
-            1800
+            <input
+              aria-label="Editable cell"
+              class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              value="Test"
+            />
           </div>
-        </div>
-        <div
-          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-          role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 500px;"
-        >
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
           >
-            <span
-              style="padding-left: 0rem;"
-            >
-              👉
-            </span>
+            <input
+              aria-label="Editable cell"
+              class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              value="Test"
+            />
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
           >
-            Test
+            <input
+              aria-label="Editable cell"
+              class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              value="120"
+            />
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
           >
-            <span>
-              570
-            </span>
+            <input
+              aria-label="Editable cell"
+              class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              value="400"
+            />
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
           >
-            <span>
-              1900
-            </span>
+            <input
+              aria-label="Editable cell"
+              class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              value="400"
+            />
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
           >
-            1900
+            <input
+              aria-label="Editable cell"
+              class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              value="400"
+            />
           </div>
         </div>
       </div>
@@ -121473,7 +127658,7 @@ Object {
 }
 `;
 
-exports[`Table renders Default 1`] = `
+exports[`Table renders ExpandableCheckboxes 1`] = `
 Object {
   "asFragment": [Function],
   "baseElement": <body>
@@ -121481,6 +127666,7 @@ Object {
       <div
         class="table-wrapper sm:overflow-auto overflow-scroll no-scrollbar flex flex-col sticky"
         role="table"
+        style="width: 800px; height: 400px;"
       >
         <div
           class="flex flex-col sticky top-0 z-[99]"
@@ -121488,13 +127674,142 @@ Object {
           <div
             class="flex rounded-moon-s-sm sticky"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 0px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
               class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
               colspan="1"
+              data-sticky-td="true"
               role="columnheader"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            >
+              Expand/Select
+              <div
+                class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+                draggable="false"
+                role="separator"
+                style="cursor: col-resize;"
+              />
+            </div>
+            <div
+              class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+              colspan="1"
+              data-sticky-last-left-td="true"
+              data-sticky-td="true"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+            >
+              Name
+              <div
+                class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+                draggable="false"
+                role="separator"
+                style="cursor: col-resize;"
+              />
+            </div>
+            <div
+              class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+              colspan="5"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 650 0 auto; min-width: 500px; width: 650px; position: relative;"
+            >
+              Info
+              <div
+                class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+                draggable="false"
+                role="separator"
+                style="cursor: col-resize;"
+              />
+            </div>
+            <div
+              class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0"
+              colspan="1"
+              data-sticky-first-right-td="true"
+              data-sticky-td="true"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+            >
+              Actions
+              <div
+                class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+                draggable="false"
+                role="separator"
+                style="cursor: col-resize;"
+              />
+            </div>
+          </div>
+          <div
+            class="flex rounded-moon-s-sm sticky"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
+          >
+            <div
+              class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+              colspan="1"
+              data-sticky-td="true"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            >
+              <div
+                class="flex items-center gap-x-1"
+              >
+                <div
+                  class="flex items-center h-full"
+                >
+                  <label
+                    class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
+                    for="any__unique__string__for__each__table_root"
+                  >
+                    <input
+                      aria-checked="false"
+                      aria-label="Checkbox"
+                      class="peer appearance-none h-6 w-6 outline-none align-top select-none"
+                      id="any__unique__string__for__each__table_root"
+                      type="checkbox"
+                    />
+                    <span
+                      aria-hidden="true"
+                      class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
+                    >
+                      <svg
+                        class="transition-opacity opacity-0"
+                        fill="none"
+                        height="1em"
+                        viewBox="0 0 32 32"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 14.9412L13.6667 22L25 10"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                      </svg>
+                    </span>
+                  </label>
+                </div>
+                <span
+                  style="cursor: pointer;"
+                  title="Toggle All Rows Expanded"
+                >
+                  👇
+                </span>
+              </div>
+              <div
+                class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+                draggable="false"
+                role="separator"
+                style="cursor: col-resize;"
+              />
+            </div>
+            <div
+              class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+              colspan="1"
+              data-sticky-last-left-td="true"
+              data-sticky-td="true"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               First Name
               <div
@@ -121505,380 +127820,1749 @@ Object {
               />
             </div>
             <div
-              class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
-              colspan="1"
-              role="columnheader"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
+              class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+              colspan="1"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px; position: relative;"
+            >
+              Age
+              <div
+                class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+                draggable="false"
+                role="separator"
+                style="cursor: col-resize;"
+              />
+            </div>
+            <div
+              class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+              colspan="1"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: relative;"
+            >
+              Visits
+              <div
+                class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+                draggable="false"
+                role="separator"
+                style="cursor: col-resize;"
+              />
+            </div>
+            <div
+              class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+              colspan="1"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: relative;"
+            >
+              Activity
+              <div
+                class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+                draggable="false"
+                role="separator"
+                style="cursor: col-resize;"
+              />
+            </div>
+            <div
+              class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+              colspan="1"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px; position: relative;"
+            >
+              Status
+              <div
+                class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+                draggable="false"
+                role="separator"
+                style="cursor: col-resize;"
+              />
+            </div>
+            <div
+              class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+              colspan="1"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: relative;"
+            >
+              Profile Progress
+              <div
+                class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+                draggable="false"
+                role="separator"
+                style="cursor: col-resize;"
+              />
+            </div>
+            <div
+              class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0"
+              colspan="1"
+              data-sticky-first-right-td="true"
+              data-sticky-td="true"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+            >
+              Actions
+              <div
+                class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+                draggable="false"
+                role="separator"
+                style="cursor: col-resize;"
+              />
+            </div>
+          </div>
+          <div
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
+          >
+            <div
+              class="relative"
+              colspan="1"
+              data-sticky-td="true"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            />
+            <div
+              class="relative"
+              colspan="1"
+              data-sticky-last-left-td="true"
+              data-sticky-td="true"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+            />
+            <div
+              class="relative"
+              colspan="1"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px; position: relative;"
+            />
+            <div
+              class="relative"
+              colspan="1"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: relative;"
+            />
+            <div
+              class="relative"
+              colspan="1"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: relative;"
+            />
+            <div
+              class="relative"
+              colspan="1"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px; position: relative;"
+            />
+            <div
+              class="relative"
+              colspan="1"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: relative;"
+            />
+            <div
+              class="relative"
+              colspan="1"
+              data-sticky-first-right-td="true"
+              data-sticky-td="true"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+            />
+          </div>
+        </div>
+        <div
+          class="flex flex-col relative z-0 no-scrollbar gap-1"
+          role="rowgroup"
+        >
+          <div
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors first:rounded-es-none last:rounded-ee-none text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
+          >
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            >
+              <div
+                class="flex items-center gap-x-1 ps-0"
+              >
+                <div
+                  class="flex items-center h-full"
+                >
+                  <label
+                    class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
+                    for="any__unique__string__for__each__table_0"
+                  >
+                    <input
+                      aria-checked="false"
+                      aria-label="Checkbox"
+                      class="peer appearance-none h-6 w-6 outline-none align-top select-none"
+                      id="any__unique__string__for__each__table_0"
+                      type="checkbox"
+                    />
+                    <span
+                      aria-hidden="true"
+                      class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
+                    >
+                      <svg
+                        class="transition-opacity opacity-0"
+                        fill="none"
+                        height="1em"
+                        viewBox="0 0 32 32"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 14.9412L13.6667 22L25 10"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                      </svg>
+                    </span>
+                  </label>
+                </div>
+                <span
+                  style="cursor: pointer;"
+                  title="Toggle Row Expanded"
+                >
+                  👇
+                </span>
+              </div>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              data-sticky-last-left-td="true"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+            >
+              Test lvl1
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                36
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              <span>
+                50
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              54
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              19
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              <span>
+                20
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+              data-sticky-first-right-td="true"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+            >
+              <button
+                class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+                data-state="closed"
+                type="button"
+              >
+                <svg
+                  class="text-moon-24 max-h-6"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 32 32"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                  />
+                </svg>
+              </button>
+            </div>
+          </div>
+          <div
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors first:rounded-es-none last:rounded-ee-none text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
+          >
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            >
+              <div
+                class="flex items-center gap-x-1 ps-6"
+              >
+                <div
+                  class="flex items-center h-full"
+                >
+                  <label
+                    class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
+                    for="any__unique__string__for__each__table_0.0"
+                  >
+                    <input
+                      aria-checked="false"
+                      aria-label="Checkbox"
+                      class="peer appearance-none h-6 w-6 outline-none align-top select-none"
+                      id="any__unique__string__for__each__table_0.0"
+                      type="checkbox"
+                    />
+                    <span
+                      aria-hidden="true"
+                      class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
+                    >
+                      <svg
+                        class="transition-opacity opacity-0"
+                        fill="none"
+                        height="1em"
+                        viewBox="0 0 32 32"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 14.9412L13.6667 22L25 10"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                      </svg>
+                    </span>
+                  </label>
+                </div>
+                <span
+                  style="cursor: pointer;"
+                  title="Toggle Row Expanded"
+                >
+                  👇
+                </span>
+              </div>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              data-sticky-last-left-td="true"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+            >
+              Sub test lvl2
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                96
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              <span>
+                8
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              23
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              97
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              <span>
+                2
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+              data-sticky-first-right-td="true"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+            >
+              <button
+                class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+                data-state="closed"
+                type="button"
+              >
+                <svg
+                  class="text-moon-24 max-h-6"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 32 32"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                  />
+                </svg>
+              </button>
+            </div>
+          </div>
+          <div
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors first:rounded-es-none last:rounded-ee-none text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
+          >
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            >
+              <div
+                class="flex items-center gap-x-1 ps-12"
+              >
+                <div
+                  class="flex items-center h-full"
+                >
+                  <label
+                    class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
+                    for="any__unique__string__for__each__table_0.0.0"
+                  >
+                    <input
+                      aria-checked="false"
+                      aria-label="Checkbox"
+                      class="peer appearance-none h-6 w-6 outline-none align-top select-none"
+                      id="any__unique__string__for__each__table_0.0.0"
+                      type="checkbox"
+                    />
+                    <span
+                      aria-hidden="true"
+                      class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
+                    >
+                      <svg
+                        class="transition-opacity opacity-0"
+                        fill="none"
+                        height="1em"
+                        viewBox="0 0 32 32"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 14.9412L13.6667 22L25 10"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                      </svg>
+                    </span>
+                  </label>
+                </div>
+              </div>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              data-sticky-last-left-td="true"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+            >
+              Sub test lvl3
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                63
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              <span>
+                82
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              46
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              52
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              <span>
+                59
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+              data-sticky-first-right-td="true"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+            >
+              <button
+                class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+                data-state="closed"
+                type="button"
+              >
+                <svg
+                  class="text-moon-24 max-h-6"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 32 32"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                  />
+                </svg>
+              </button>
+            </div>
+          </div>
+          <div
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors first:rounded-es-none last:rounded-ee-none text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
+          >
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            >
+              <div
+                class="flex items-center gap-x-1 ps-12"
+              >
+                <div
+                  class="flex items-center h-full"
+                >
+                  <label
+                    class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
+                    for="any__unique__string__for__each__table_0.0.1"
+                  >
+                    <input
+                      aria-checked="false"
+                      aria-label="Checkbox"
+                      class="peer appearance-none h-6 w-6 outline-none align-top select-none"
+                      id="any__unique__string__for__each__table_0.0.1"
+                      type="checkbox"
+                    />
+                    <span
+                      aria-hidden="true"
+                      class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
+                    >
+                      <svg
+                        class="transition-opacity opacity-0"
+                        fill="none"
+                        height="1em"
+                        viewBox="0 0 32 32"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 14.9412L13.6667 22L25 10"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                      </svg>
+                    </span>
+                  </label>
+                </div>
+              </div>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              data-sticky-last-left-td="true"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+            >
+              Sub test lvl3
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                64
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              <span>
+                35
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              5
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              65
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              <span>
+                78
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+              data-sticky-first-right-td="true"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+            >
+              <button
+                class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+                data-state="closed"
+                type="button"
+              >
+                <svg
+                  class="text-moon-24 max-h-6"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 32 32"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                  />
+                </svg>
+              </button>
+            </div>
+          </div>
+          <div
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors first:rounded-es-none last:rounded-ee-none text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
+          >
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            >
+              <div
+                class="flex items-center gap-x-1 ps-12"
+              >
+                <div
+                  class="flex items-center h-full"
+                >
+                  <label
+                    class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
+                    for="any__unique__string__for__each__table_0.0.2"
+                  >
+                    <input
+                      aria-checked="false"
+                      aria-label="Checkbox"
+                      class="peer appearance-none h-6 w-6 outline-none align-top select-none"
+                      id="any__unique__string__for__each__table_0.0.2"
+                      type="checkbox"
+                    />
+                    <span
+                      aria-hidden="true"
+                      class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
+                    >
+                      <svg
+                        class="transition-opacity opacity-0"
+                        fill="none"
+                        height="1em"
+                        viewBox="0 0 32 32"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 14.9412L13.6667 22L25 10"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                      </svg>
+                    </span>
+                  </label>
+                </div>
+              </div>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              data-sticky-last-left-td="true"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+            >
+              Sub test lvl3
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                12
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              <span>
+                4
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              5
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              98
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              <span>
+                44
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+              data-sticky-first-right-td="true"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+            >
+              <button
+                class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+                data-state="closed"
+                type="button"
+              >
+                <svg
+                  class="text-moon-24 max-h-6"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 32 32"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                  />
+                </svg>
+              </button>
+            </div>
+          </div>
+          <div
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors first:rounded-es-none last:rounded-ee-none text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
+          >
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            >
+              <div
+                class="flex items-center gap-x-1 ps-6"
+              >
+                <div
+                  class="flex items-center h-full"
+                >
+                  <label
+                    class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
+                    for="any__unique__string__for__each__table_0.1"
+                  >
+                    <input
+                      aria-checked="false"
+                      aria-label="Checkbox"
+                      class="peer appearance-none h-6 w-6 outline-none align-top select-none"
+                      id="any__unique__string__for__each__table_0.1"
+                      type="checkbox"
+                    />
+                    <span
+                      aria-hidden="true"
+                      class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
+                    >
+                      <svg
+                        class="transition-opacity opacity-0"
+                        fill="none"
+                        height="1em"
+                        viewBox="0 0 32 32"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 14.9412L13.6667 22L25 10"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                      </svg>
+                    </span>
+                  </label>
+                </div>
+                <span
+                  style="cursor: pointer;"
+                  title="Toggle Row Expanded"
+                >
+                  👇
+                </span>
+              </div>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              data-sticky-last-left-td="true"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+            >
+              Sub test lvl2
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                74
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
             >
-              Last Name
-              <div
-                class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
-                draggable="false"
-                role="separator"
-                style="cursor: col-resize;"
-              />
+              <span>
+                5
+              </span>
             </div>
             <div
-              class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
-              colspan="1"
-              role="columnheader"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
             >
-              Age
-              <div
-                class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
-                draggable="false"
-                role="separator"
-                style="cursor: col-resize;"
-              />
+              2
             </div>
             <div
-              class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
-              colspan="1"
-              role="columnheader"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
-              Visits
-              <div
-                class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
-                draggable="false"
-                role="separator"
-                style="cursor: col-resize;"
-              />
+              86
             </div>
             <div
-              class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
-              colspan="1"
-              role="columnheader"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
             >
-              Activity
-              <div
-                class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
-                draggable="false"
-                role="separator"
-                style="cursor: col-resize;"
-              />
+              <span>
+                1
+              </span>
             </div>
             <div
-              class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
-              colspan="1"
-              role="columnheader"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+              data-sticky-first-right-td="true"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
             >
-              Status
-              <div
-                class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
-                draggable="false"
-                role="separator"
-                style="cursor: col-resize;"
-              />
+              <button
+                class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+                data-state="closed"
+                type="button"
+              >
+                <svg
+                  class="text-moon-24 max-h-6"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 32 32"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                  />
+                </svg>
+              </button>
             </div>
           </div>
           <div
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors first:rounded-es-none last:rounded-ee-none text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 0px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative"
-              colspan="1"
-              role="columnheader"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
-            />
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            >
+              <div
+                class="flex items-center gap-x-1 ps-12"
+              >
+                <div
+                  class="flex items-center h-full"
+                >
+                  <label
+                    class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
+                    for="any__unique__string__for__each__table_0.1.0"
+                  >
+                    <input
+                      aria-checked="false"
+                      aria-label="Checkbox"
+                      class="peer appearance-none h-6 w-6 outline-none align-top select-none"
+                      id="any__unique__string__for__each__table_0.1.0"
+                      type="checkbox"
+                    />
+                    <span
+                      aria-hidden="true"
+                      class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
+                    >
+                      <svg
+                        class="transition-opacity opacity-0"
+                        fill="none"
+                        height="1em"
+                        viewBox="0 0 32 32"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 14.9412L13.6667 22L25 10"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                      </svg>
+                    </span>
+                  </label>
+                </div>
+              </div>
+            </div>
             <div
-              class="relative"
-              colspan="1"
-              role="columnheader"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
-            />
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              data-sticky-last-left-td="true"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+            >
+              Sub test lvl3
+            </div>
             <div
-              class="relative"
-              colspan="1"
-              role="columnheader"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
-            />
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                89
+              </span>
+            </div>
             <div
-              class="relative"
-              colspan="1"
-              role="columnheader"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
-            />
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              <span>
+                98
+              </span>
+            </div>
             <div
-              class="relative"
-              colspan="1"
-              role="columnheader"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
-            />
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              43
+            </div>
             <div
-              class="relative"
-              colspan="1"
-              role="columnheader"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
-            />
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              24
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              <span>
+                54
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+              data-sticky-first-right-td="true"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+            >
+              <button
+                class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+                data-state="closed"
+                type="button"
+              >
+                <svg
+                  class="text-moon-24 max-h-6"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 32 32"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                  />
+                </svg>
+              </button>
+            </div>
           </div>
-        </div>
-        <div
-          class="flex flex-col relative z-0 no-scrollbar gap-1"
-          role="rowgroup"
-        >
           <div
-            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors first:rounded-es-none last:rounded-ee-none text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 0px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
-              Test
+              <div
+                class="flex items-center gap-x-1 ps-12"
+              >
+                <div
+                  class="flex items-center h-full"
+                >
+                  <label
+                    class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
+                    for="any__unique__string__for__each__table_0.1.1"
+                  >
+                    <input
+                      aria-checked="false"
+                      aria-label="Checkbox"
+                      class="peer appearance-none h-6 w-6 outline-none align-top select-none"
+                      id="any__unique__string__for__each__table_0.1.1"
+                      type="checkbox"
+                    />
+                    <span
+                      aria-hidden="true"
+                      class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
+                    >
+                      <svg
+                        class="transition-opacity opacity-0"
+                        fill="none"
+                        height="1em"
+                        viewBox="0 0 32 32"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 14.9412L13.6667 22L25 10"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                      </svg>
+                    </span>
+                  </label>
+                </div>
+              </div>
             </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              data-sticky-last-left-td="true"
+              data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
-              Test
+              Sub test lvl3
             </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
               <span>
-                0
+                52
               </span>
             </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
             >
               <span>
-                0
+                25
               </span>
             </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
             >
-              0
+              35
             </div>
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
-              0
+              97
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              <span>
+                25
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+              data-sticky-first-right-td="true"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+            >
+              <button
+                class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+                data-state="closed"
+                type="button"
+              >
+                <svg
+                  class="text-moon-24 max-h-6"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 32 32"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                  />
+                </svg>
+              </button>
             </div>
           </div>
           <div
-            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors first:rounded-es-none last:rounded-ee-none text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 0px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
-              Test
+              <div
+                class="flex items-center gap-x-1 ps-12"
+              >
+                <div
+                  class="flex items-center h-full"
+                >
+                  <label
+                    class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
+                    for="any__unique__string__for__each__table_0.1.2"
+                  >
+                    <input
+                      aria-checked="false"
+                      aria-label="Checkbox"
+                      class="peer appearance-none h-6 w-6 outline-none align-top select-none"
+                      id="any__unique__string__for__each__table_0.1.2"
+                      type="checkbox"
+                    />
+                    <span
+                      aria-hidden="true"
+                      class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
+                    >
+                      <svg
+                        class="transition-opacity opacity-0"
+                        fill="none"
+                        height="1em"
+                        viewBox="0 0 32 32"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 14.9412L13.6667 22L25 10"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                      </svg>
+                    </span>
+                  </label>
+                </div>
+              </div>
             </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              data-sticky-last-left-td="true"
+              data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
-              Test
+              Sub test lvl3
             </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
               <span>
-                30
+                55
               </span>
             </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
             >
               <span>
-                100
+                54
               </span>
             </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
             >
-              100
+              33
             </div>
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
-              100
+              56
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              <span>
+                24
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+              data-sticky-first-right-td="true"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+            >
+              <button
+                class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+                data-state="closed"
+                type="button"
+              >
+                <svg
+                  class="text-moon-24 max-h-6"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 32 32"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                  />
+                </svg>
+              </button>
             </div>
           </div>
           <div
-            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors first:rounded-es-none last:rounded-ee-none text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 0px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
-              Test
+              <div
+                class="flex items-center gap-x-1 ps-6"
+              >
+                <div
+                  class="flex items-center h-full"
+                >
+                  <label
+                    class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
+                    for="any__unique__string__for__each__table_0.2"
+                  >
+                    <input
+                      aria-checked="false"
+                      aria-label="Checkbox"
+                      class="peer appearance-none h-6 w-6 outline-none align-top select-none"
+                      id="any__unique__string__for__each__table_0.2"
+                      type="checkbox"
+                    />
+                    <span
+                      aria-hidden="true"
+                      class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
+                    >
+                      <svg
+                        class="transition-opacity opacity-0"
+                        fill="none"
+                        height="1em"
+                        viewBox="0 0 32 32"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 14.9412L13.6667 22L25 10"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                      </svg>
+                    </span>
+                  </label>
+                </div>
+                <span
+                  style="cursor: pointer;"
+                  title="Toggle Row Expanded"
+                >
+                  👇
+                </span>
+              </div>
             </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              data-sticky-last-left-td="true"
+              data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
-              Test
+              Sub test lvl2
             </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
               <span>
-                60
+                53
               </span>
             </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
             >
               <span>
-                200
+                63
               </span>
             </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
             >
-              200
+              3
             </div>
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
-              200
+              48
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              <span>
+                24
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+              data-sticky-first-right-td="true"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+            >
+              <button
+                class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+                data-state="closed"
+                type="button"
+              >
+                <svg
+                  class="text-moon-24 max-h-6"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 32 32"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                  />
+                </svg>
+              </button>
             </div>
           </div>
           <div
-            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors first:rounded-es-none last:rounded-ee-none text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 0px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
-              Test
+              <div
+                class="flex items-center gap-x-1 ps-12"
+              >
+                <div
+                  class="flex items-center h-full"
+                >
+                  <label
+                    class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
+                    for="any__unique__string__for__each__table_0.2.0"
+                  >
+                    <input
+                      aria-checked="false"
+                      aria-label="Checkbox"
+                      class="peer appearance-none h-6 w-6 outline-none align-top select-none"
+                      id="any__unique__string__for__each__table_0.2.0"
+                      type="checkbox"
+                    />
+                    <span
+                      aria-hidden="true"
+                      class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
+                    >
+                      <svg
+                        class="transition-opacity opacity-0"
+                        fill="none"
+                        height="1em"
+                        viewBox="0 0 32 32"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 14.9412L13.6667 22L25 10"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                      </svg>
+                    </span>
+                  </label>
+                </div>
+              </div>
             </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              data-sticky-last-left-td="true"
+              data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
-              Test
+              Sub test lvl3
             </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
               <span>
-                90
+                4
               </span>
             </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
             >
               <span>
-                300
+                653
               </span>
             </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
             >
-              300
+              43
             </div>
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
-              300
+              44
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              <span>
+                36
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+              data-sticky-first-right-td="true"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+            >
+              <button
+                class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+                data-state="closed"
+                type="button"
+              >
+                <svg
+                  class="text-moon-24 max-h-6"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 32 32"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                  />
+                </svg>
+              </button>
             </div>
           </div>
           <div
-            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors first:rounded-es-none last:rounded-ee-none text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 0px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
-              Test
+              <div
+                class="flex items-center gap-x-1 ps-12"
+              >
+                <div
+                  class="flex items-center h-full"
+                >
+                  <label
+                    class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
+                    for="any__unique__string__for__each__table_0.2.1"
+                  >
+                    <input
+                      aria-checked="false"
+                      aria-label="Checkbox"
+                      class="peer appearance-none h-6 w-6 outline-none align-top select-none"
+                      id="any__unique__string__for__each__table_0.2.1"
+                      type="checkbox"
+                    />
+                    <span
+                      aria-hidden="true"
+                      class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
+                    >
+                      <svg
+                        class="transition-opacity opacity-0"
+                        fill="none"
+                        height="1em"
+                        viewBox="0 0 32 32"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 14.9412L13.6667 22L25 10"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                      </svg>
+                    </span>
+                  </label>
+                </div>
+              </div>
             </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              data-sticky-last-left-td="true"
+              data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
-              Test
+              Sub test lvl3
             </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
               <span>
-                120
+                49
               </span>
             </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
             >
               <span>
-                400
+                45
               </span>
             </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
             >
-              400
+              4
             </div>
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
             >
-              400
+              35
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              <span>
+                454
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+              data-sticky-first-right-td="true"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+            >
+              <button
+                class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+                data-state="closed"
+                type="button"
+              >
+                <svg
+                  class="text-moon-24 max-h-6"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 32 32"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                  />
+                </svg>
+              </button>
             </div>
           </div>
         </div>
@@ -121889,6 +129573,7 @@ Object {
     <div
       class="table-wrapper sm:overflow-auto overflow-scroll no-scrollbar flex flex-col sticky"
       role="table"
+      style="width: 800px; height: 400px;"
     >
       <div
         class="flex flex-col sticky top-0 z-[99]"
@@ -121896,15 +129581,16 @@ Object {
         <div
           class="flex rounded-moon-s-sm sticky"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 0px;"
+          style="display: flex; flex: 1 0 auto; min-width: 800px;"
         >
           <div
             class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
             colspan="1"
+            data-sticky-td="true"
             role="columnheader"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
           >
-            First Name
+            Expand/Select
             <div
               class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
               draggable="false"
@@ -121915,10 +129601,12 @@ Object {
           <div
             class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
             colspan="1"
+            data-sticky-last-left-td="true"
+            data-sticky-td="true"
             role="columnheader"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
           >
-            Last Name
+            Name
             <div
               class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
               draggable="false"
@@ -121928,9 +129616,121 @@ Object {
           </div>
           <div
             class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+            colspan="5"
+            role="columnheader"
+            style="box-sizing: border-box; flex: 650 0 auto; min-width: 500px; width: 650px; position: relative;"
+          >
+            Info
+            <div
+              class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+              draggable="false"
+              role="separator"
+              style="cursor: col-resize;"
+            />
+          </div>
+          <div
+            class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0"
             colspan="1"
+            data-sticky-first-right-td="true"
+            data-sticky-td="true"
             role="columnheader"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+          >
+            Actions
+            <div
+              class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+              draggable="false"
+              role="separator"
+              style="cursor: col-resize;"
+            />
+          </div>
+        </div>
+        <div
+          class="flex rounded-moon-s-sm sticky"
+          role="row"
+          style="display: flex; flex: 1 0 auto; min-width: 800px;"
+        >
+          <div
+            class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+            colspan="1"
+            data-sticky-td="true"
+            role="columnheader"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+          >
+            <div
+              class="flex items-center gap-x-1"
+            >
+              <div
+                class="flex items-center h-full"
+              >
+                <label
+                  class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
+                  for="any__unique__string__for__each__table_root"
+                >
+                  <input
+                    aria-checked="false"
+                    aria-label="Checkbox"
+                    class="peer appearance-none h-6 w-6 outline-none align-top select-none"
+                    id="any__unique__string__for__each__table_root"
+                    type="checkbox"
+                  />
+                  <span
+                    aria-hidden="true"
+                    class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
+                  >
+                    <svg
+                      class="transition-opacity opacity-0"
+                      fill="none"
+                      height="1em"
+                      viewBox="0 0 32 32"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M7 14.9412L13.6667 22L25 10"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                    </svg>
+                  </span>
+                </label>
+              </div>
+              <span
+                style="cursor: pointer;"
+                title="Toggle All Rows Expanded"
+              >
+                👇
+              </span>
+            </div>
+            <div
+              class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+              draggable="false"
+              role="separator"
+              style="cursor: col-resize;"
+            />
+          </div>
+          <div
+            class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+            colspan="1"
+            data-sticky-last-left-td="true"
+            data-sticky-td="true"
+            role="columnheader"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+          >
+            First Name
+            <div
+              class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+              draggable="false"
+              role="separator"
+              style="cursor: col-resize;"
+            />
+          </div>
+          <div
+            class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+            colspan="1"
+            role="columnheader"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px; position: relative;"
           >
             Age
             <div
@@ -121944,7 +129744,7 @@ Object {
             class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
             colspan="1"
             role="columnheader"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: relative;"
           >
             Visits
             <div
@@ -121958,7 +129758,7 @@ Object {
             class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
             colspan="1"
             role="columnheader"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: relative;"
           >
             Activity
             <div
@@ -121972,7 +129772,7 @@ Object {
             class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
             colspan="1"
             role="columnheader"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px; position: relative;"
           >
             Status
             <div
@@ -121982,46 +129782,93 @@ Object {
               style="cursor: col-resize;"
             />
           </div>
+          <div
+            class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+            colspan="1"
+            role="columnheader"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: relative;"
+          >
+            Profile Progress
+            <div
+              class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+              draggable="false"
+              role="separator"
+              style="cursor: col-resize;"
+            />
+          </div>
+          <div
+            class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0"
+            colspan="1"
+            data-sticky-first-right-td="true"
+            data-sticky-td="true"
+            role="columnheader"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+          >
+            Actions
+            <div
+              class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+              draggable="false"
+              role="separator"
+              style="cursor: col-resize;"
+            />
+          </div>
         </div>
         <div
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 0px;"
+          style="display: flex; flex: 1 0 auto; min-width: 800px;"
         >
           <div
             class="relative"
             colspan="1"
+            data-sticky-td="true"
             role="columnheader"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
           />
           <div
             class="relative"
             colspan="1"
+            data-sticky-last-left-td="true"
+            data-sticky-td="true"
             role="columnheader"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
           />
           <div
             class="relative"
             colspan="1"
             role="columnheader"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px; position: relative;"
           />
           <div
             class="relative"
             colspan="1"
             role="columnheader"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: relative;"
           />
           <div
             class="relative"
             colspan="1"
             role="columnheader"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: relative;"
           />
           <div
             class="relative"
             colspan="1"
             role="columnheader"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px; position: relative;"
+          />
+          <div
+            class="relative"
+            colspan="1"
+            role="columnheader"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: relative;"
+          />
+          <div
+            class="relative"
+            colspan="1"
+            data-sticky-first-right-td="true"
+            data-sticky-td="true"
+            role="columnheader"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
           />
         </div>
       </div>
@@ -122030,1336 +129877,1599 @@ Object {
         role="rowgroup"
       >
         <div
-          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors first:rounded-es-none last:rounded-ee-none text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 0px;"
+          style="display: flex; flex: 1 0 auto; min-width: 800px;"
         >
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
           >
-            Test
+            <div
+              class="flex items-center gap-x-1 ps-0"
+            >
+              <div
+                class="flex items-center h-full"
+              >
+                <label
+                  class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
+                  for="any__unique__string__for__each__table_0"
+                >
+                  <input
+                    aria-checked="false"
+                    aria-label="Checkbox"
+                    class="peer appearance-none h-6 w-6 outline-none align-top select-none"
+                    id="any__unique__string__for__each__table_0"
+                    type="checkbox"
+                  />
+                  <span
+                    aria-hidden="true"
+                    class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
+                  >
+                    <svg
+                      class="transition-opacity opacity-0"
+                      fill="none"
+                      height="1em"
+                      viewBox="0 0 32 32"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M7 14.9412L13.6667 22L25 10"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                    </svg>
+                  </span>
+                </label>
+              </div>
+              <span
+                style="cursor: pointer;"
+                title="Toggle Row Expanded"
+              >
+                👇
+              </span>
+            </div>
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            data-sticky-last-left-td="true"
+            data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
           >
-            Test
+            Test lvl1
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+          >
+            <span>
+              36
+            </span>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+          >
+            <span>
+              50
+            </span>
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            <span>
-              0
-            </span>
+            54
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <span>
-              0
-            </span>
+            19
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            0
+            <span>
+              20
+            </span>
           </div>
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+            data-sticky-first-right-td="true"
+            data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
           >
-            0
+            <button
+              class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+              data-state="closed"
+              type="button"
+            >
+              <svg
+                class="text-moon-24 max-h-6"
+                fill="none"
+                height="1em"
+                viewBox="0 0 32 32"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                />
+              </svg>
+            </button>
           </div>
         </div>
         <div
-          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors first:rounded-es-none last:rounded-ee-none text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 0px;"
+          style="display: flex; flex: 1 0 auto; min-width: 800px;"
         >
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
           >
-            Test
+            <div
+              class="flex items-center gap-x-1 ps-6"
+            >
+              <div
+                class="flex items-center h-full"
+              >
+                <label
+                  class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
+                  for="any__unique__string__for__each__table_0.0"
+                >
+                  <input
+                    aria-checked="false"
+                    aria-label="Checkbox"
+                    class="peer appearance-none h-6 w-6 outline-none align-top select-none"
+                    id="any__unique__string__for__each__table_0.0"
+                    type="checkbox"
+                  />
+                  <span
+                    aria-hidden="true"
+                    class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
+                  >
+                    <svg
+                      class="transition-opacity opacity-0"
+                      fill="none"
+                      height="1em"
+                      viewBox="0 0 32 32"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M7 14.9412L13.6667 22L25 10"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                    </svg>
+                  </span>
+                </label>
+              </div>
+              <span
+                style="cursor: pointer;"
+                title="Toggle Row Expanded"
+              >
+                👇
+              </span>
+            </div>
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            data-sticky-last-left-td="true"
+            data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
           >
-            Test
+            Sub test lvl2
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
             <span>
-              30
+              96
             </span>
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
             <span>
-              100
+              8
             </span>
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            100
+            23
           </div>
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            100
+            97
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+          >
+            <span>
+              2
+            </span>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+            data-sticky-first-right-td="true"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+          >
+            <button
+              class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+              data-state="closed"
+              type="button"
+            >
+              <svg
+                class="text-moon-24 max-h-6"
+                fill="none"
+                height="1em"
+                viewBox="0 0 32 32"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                />
+              </svg>
+            </button>
           </div>
         </div>
         <div
-          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors first:rounded-es-none last:rounded-ee-none text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 0px;"
+          style="display: flex; flex: 1 0 auto; min-width: 800px;"
         >
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
           >
-            Test
+            <div
+              class="flex items-center gap-x-1 ps-12"
+            >
+              <div
+                class="flex items-center h-full"
+              >
+                <label
+                  class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
+                  for="any__unique__string__for__each__table_0.0.0"
+                >
+                  <input
+                    aria-checked="false"
+                    aria-label="Checkbox"
+                    class="peer appearance-none h-6 w-6 outline-none align-top select-none"
+                    id="any__unique__string__for__each__table_0.0.0"
+                    type="checkbox"
+                  />
+                  <span
+                    aria-hidden="true"
+                    class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
+                  >
+                    <svg
+                      class="transition-opacity opacity-0"
+                      fill="none"
+                      height="1em"
+                      viewBox="0 0 32 32"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M7 14.9412L13.6667 22L25 10"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                    </svg>
+                  </span>
+                </label>
+              </div>
+            </div>
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            data-sticky-last-left-td="true"
+            data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
           >
-            Test
+            Sub test lvl3
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
             <span>
-              60
+              63
             </span>
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
             <span>
-              200
+              82
             </span>
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            200
+            46
           </div>
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            200
+            52
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+          >
+            <span>
+              59
+            </span>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+            data-sticky-first-right-td="true"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+          >
+            <button
+              class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+              data-state="closed"
+              type="button"
+            >
+              <svg
+                class="text-moon-24 max-h-6"
+                fill="none"
+                height="1em"
+                viewBox="0 0 32 32"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                />
+              </svg>
+            </button>
           </div>
         </div>
         <div
-          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors first:rounded-es-none last:rounded-ee-none text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 0px;"
+          style="display: flex; flex: 1 0 auto; min-width: 800px;"
         >
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
           >
-            Test
+            <div
+              class="flex items-center gap-x-1 ps-12"
+            >
+              <div
+                class="flex items-center h-full"
+              >
+                <label
+                  class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
+                  for="any__unique__string__for__each__table_0.0.1"
+                >
+                  <input
+                    aria-checked="false"
+                    aria-label="Checkbox"
+                    class="peer appearance-none h-6 w-6 outline-none align-top select-none"
+                    id="any__unique__string__for__each__table_0.0.1"
+                    type="checkbox"
+                  />
+                  <span
+                    aria-hidden="true"
+                    class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
+                  >
+                    <svg
+                      class="transition-opacity opacity-0"
+                      fill="none"
+                      height="1em"
+                      viewBox="0 0 32 32"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M7 14.9412L13.6667 22L25 10"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                    </svg>
+                  </span>
+                </label>
+              </div>
+            </div>
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            data-sticky-last-left-td="true"
+            data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
           >
-            Test
+            Sub test lvl3
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
             <span>
-              90
+              64
             </span>
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
             <span>
-              300
+              35
             </span>
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            300
+            5
           </div>
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            300
+            65
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+          >
+            <span>
+              78
+            </span>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+            data-sticky-first-right-td="true"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+          >
+            <button
+              class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+              data-state="closed"
+              type="button"
+            >
+              <svg
+                class="text-moon-24 max-h-6"
+                fill="none"
+                height="1em"
+                viewBox="0 0 32 32"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                />
+              </svg>
+            </button>
           </div>
         </div>
         <div
-          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors first:rounded-es-none last:rounded-ee-none text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 0px;"
+          style="display: flex; flex: 1 0 auto; min-width: 800px;"
         >
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
           >
-            Test
+            <div
+              class="flex items-center gap-x-1 ps-12"
+            >
+              <div
+                class="flex items-center h-full"
+              >
+                <label
+                  class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
+                  for="any__unique__string__for__each__table_0.0.2"
+                >
+                  <input
+                    aria-checked="false"
+                    aria-label="Checkbox"
+                    class="peer appearance-none h-6 w-6 outline-none align-top select-none"
+                    id="any__unique__string__for__each__table_0.0.2"
+                    type="checkbox"
+                  />
+                  <span
+                    aria-hidden="true"
+                    class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
+                  >
+                    <svg
+                      class="transition-opacity opacity-0"
+                      fill="none"
+                      height="1em"
+                      viewBox="0 0 32 32"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M7 14.9412L13.6667 22L25 10"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                    </svg>
+                  </span>
+                </label>
+              </div>
+            </div>
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            data-sticky-last-left-td="true"
+            data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
           >
-            Test
+            Sub test lvl3
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
             <span>
-              120
+              12
             </span>
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
             <span>
-              400
+              4
             </span>
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            400
+            5
           </div>
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            400
+            98
           </div>
-        </div>
-      </div>
-    </div>
-  </div>,
-  "debug": [Function],
-  "findAllByAltText": [Function],
-  "findAllByDisplayValue": [Function],
-  "findAllByLabelText": [Function],
-  "findAllByPlaceholderText": [Function],
-  "findAllByRole": [Function],
-  "findAllByTestId": [Function],
-  "findAllByText": [Function],
-  "findAllByTitle": [Function],
-  "findByAltText": [Function],
-  "findByDisplayValue": [Function],
-  "findByLabelText": [Function],
-  "findByPlaceholderText": [Function],
-  "findByRole": [Function],
-  "findByTestId": [Function],
-  "findByText": [Function],
-  "findByTitle": [Function],
-  "getAllByAltText": [Function],
-  "getAllByDisplayValue": [Function],
-  "getAllByLabelText": [Function],
-  "getAllByPlaceholderText": [Function],
-  "getAllByRole": [Function],
-  "getAllByTestId": [Function],
-  "getAllByText": [Function],
-  "getAllByTitle": [Function],
-  "getByAltText": [Function],
-  "getByDisplayValue": [Function],
-  "getByLabelText": [Function],
-  "getByPlaceholderText": [Function],
-  "getByRole": [Function],
-  "getByTestId": [Function],
-  "getByText": [Function],
-  "getByTitle": [Function],
-  "queryAllByAltText": [Function],
-  "queryAllByDisplayValue": [Function],
-  "queryAllByLabelText": [Function],
-  "queryAllByPlaceholderText": [Function],
-  "queryAllByRole": [Function],
-  "queryAllByTestId": [Function],
-  "queryAllByText": [Function],
-  "queryAllByTitle": [Function],
-  "queryByAltText": [Function],
-  "queryByDisplayValue": [Function],
-  "queryByLabelText": [Function],
-  "queryByPlaceholderText": [Function],
-  "queryByRole": [Function],
-  "queryByTestId": [Function],
-  "queryByText": [Function],
-  "queryByTitle": [Function],
-  "rerender": [Function],
-  "unmount": [Function],
-}
-`;
-
-exports[`Table renders Editable 1`] = `
-Object {
-  "asFragment": [Function],
-  "baseElement": <body>
-    <div>
-      <div
-        class="table-wrapper sm:overflow-auto overflow-scroll no-scrollbar flex flex-col sticky"
-        role="table"
-      >
-        <div
-          class="flex flex-col sticky top-0 z-[99]"
-        >
           <div
-            class="flex rounded-moon-s-sm sticky"
-            role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 0px;"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            <div
-              class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
-              colspan="1"
-              role="columnheader"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
-            >
-              First Name
-              <div
-                class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
-                draggable="false"
-                role="separator"
-                style="cursor: col-resize;"
-              />
-            </div>
-            <div
-              class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
-              colspan="1"
-              role="columnheader"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
-            >
-              Last Name
-              <div
-                class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
-                draggable="false"
-                role="separator"
-                style="cursor: col-resize;"
-              />
-            </div>
-            <div
-              class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
-              colspan="1"
-              role="columnheader"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
-            >
-              Age
-              <div
-                class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
-                draggable="false"
-                role="separator"
-                style="cursor: col-resize;"
-              />
-            </div>
-            <div
-              class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
-              colspan="1"
-              role="columnheader"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
-            >
-              Visits
-              <div
-                class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
-                draggable="false"
-                role="separator"
-                style="cursor: col-resize;"
-              />
-            </div>
-            <div
-              class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
-              colspan="1"
-              role="columnheader"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
-            >
-              Activity
-              <div
-                class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
-                draggable="false"
-                role="separator"
-                style="cursor: col-resize;"
-              />
-            </div>
-            <div
-              class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
-              colspan="1"
-              role="columnheader"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
-            >
-              Status
-              <div
-                class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
-                draggable="false"
-                role="separator"
-                style="cursor: col-resize;"
-              />
-            </div>
+            <span>
+              44
+            </span>
           </div>
           <div
-            role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 0px;"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+            data-sticky-first-right-td="true"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
           >
-            <div
-              class="relative"
-              colspan="1"
-              role="columnheader"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
-            />
-            <div
-              class="relative"
-              colspan="1"
-              role="columnheader"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
-            />
-            <div
-              class="relative"
-              colspan="1"
-              role="columnheader"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
-            />
-            <div
-              class="relative"
-              colspan="1"
-              role="columnheader"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
-            />
-            <div
-              class="relative"
-              colspan="1"
-              role="columnheader"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
-            />
-            <div
-              class="relative"
-              colspan="1"
-              role="columnheader"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
-            />
+            <button
+              class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+              data-state="closed"
+              type="button"
+            >
+              <svg
+                class="text-moon-24 max-h-6"
+                fill="none"
+                height="1em"
+                viewBox="0 0 32 32"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                />
+              </svg>
+            </button>
           </div>
         </div>
         <div
-          class="flex flex-col relative z-0 no-scrollbar gap-1"
-          role="rowgroup"
+          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors first:rounded-es-none last:rounded-ee-none text-bulma bg-goku border-goku"
+          role="row"
+          style="display: flex; flex: 1 0 auto; min-width: 800px;"
         >
           <div
-            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-            role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 0px;"
-          >
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
-            >
-              <input
-                aria-label="Editable cell"
-                class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
-                value="Test"
-              />
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
-            >
-              <input
-                aria-label="Editable cell"
-                class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
-                value="Test"
-              />
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
-            >
-              <input
-                aria-label="Editable cell"
-                class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
-                value="0"
-              />
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
-            >
-              <input
-                aria-label="Editable cell"
-                class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
-                value="0"
-              />
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
-            >
-              <input
-                aria-label="Editable cell"
-                class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
-                value="0"
-              />
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
-            >
-              <input
-                aria-label="Editable cell"
-                class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
-                value="0"
-              />
-            </div>
-          </div>
-          <div
-            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-            role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 0px;"
-          >
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
-            >
-              <input
-                aria-label="Editable cell"
-                class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
-                value="Test"
-              />
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
-            >
-              <input
-                aria-label="Editable cell"
-                class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
-                value="Test"
-              />
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
-            >
-              <input
-                aria-label="Editable cell"
-                class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
-                value="30"
-              />
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
-            >
-              <input
-                aria-label="Editable cell"
-                class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
-                value="100"
-              />
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
-            >
-              <input
-                aria-label="Editable cell"
-                class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
-                value="100"
-              />
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
-            >
-              <input
-                aria-label="Editable cell"
-                class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
-                value="100"
-              />
-            </div>
-          </div>
-          <div
-            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-            role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 0px;"
-          >
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
-            >
-              <input
-                aria-label="Editable cell"
-                class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
-                value="Test"
-              />
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
-            >
-              <input
-                aria-label="Editable cell"
-                class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
-                value="Test"
-              />
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
-            >
-              <input
-                aria-label="Editable cell"
-                class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
-                value="60"
-              />
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
-            >
-              <input
-                aria-label="Editable cell"
-                class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
-                value="200"
-              />
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
-            >
-              <input
-                aria-label="Editable cell"
-                class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
-                value="200"
-              />
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
-            >
-              <input
-                aria-label="Editable cell"
-                class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
-                value="200"
-              />
-            </div>
-          </div>
-          <div
-            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-            role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 0px;"
-          >
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
-            >
-              <input
-                aria-label="Editable cell"
-                class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
-                value="Test"
-              />
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
-            >
-              <input
-                aria-label="Editable cell"
-                class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
-                value="Test"
-              />
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
-            >
-              <input
-                aria-label="Editable cell"
-                class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
-                value="90"
-              />
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
-            >
-              <input
-                aria-label="Editable cell"
-                class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
-                value="300"
-              />
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
-            >
-              <input
-                aria-label="Editable cell"
-                class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
-                value="300"
-              />
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
-            >
-              <input
-                aria-label="Editable cell"
-                class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
-                value="300"
-              />
-            </div>
-          </div>
-          <div
-            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-            role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 0px;"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
-            >
-              <input
-                aria-label="Editable cell"
-                class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
-                value="Test"
-              />
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
-            >
-              <input
-                aria-label="Editable cell"
-                class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
-                value="Test"
-              />
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
-            >
-              <input
-                aria-label="Editable cell"
-                class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
-                value="120"
-              />
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
-            >
-              <input
-                aria-label="Editable cell"
-                class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
-                value="400"
-              />
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
-            >
-              <input
-                aria-label="Editable cell"
-                class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
-                value="400"
-              />
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+              class="flex items-center gap-x-1 ps-6"
             >
-              <input
-                aria-label="Editable cell"
-                class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
-                value="400"
-              />
+              <div
+                class="flex items-center h-full"
+              >
+                <label
+                  class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
+                  for="any__unique__string__for__each__table_0.1"
+                >
+                  <input
+                    aria-checked="false"
+                    aria-label="Checkbox"
+                    class="peer appearance-none h-6 w-6 outline-none align-top select-none"
+                    id="any__unique__string__for__each__table_0.1"
+                    type="checkbox"
+                  />
+                  <span
+                    aria-hidden="true"
+                    class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
+                  >
+                    <svg
+                      class="transition-opacity opacity-0"
+                      fill="none"
+                      height="1em"
+                      viewBox="0 0 32 32"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M7 14.9412L13.6667 22L25 10"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                    </svg>
+                  </span>
+                </label>
+              </div>
+              <span
+                style="cursor: pointer;"
+                title="Toggle Row Expanded"
+              >
+                👇
+              </span>
             </div>
           </div>
-        </div>
-      </div>
-    </div>
-  </body>,
-  "container": <div>
-    <div
-      class="table-wrapper sm:overflow-auto overflow-scroll no-scrollbar flex flex-col sticky"
-      role="table"
-    >
-      <div
-        class="flex flex-col sticky top-0 z-[99]"
-      >
-        <div
-          class="flex rounded-moon-s-sm sticky"
-          role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 0px;"
-        >
           <div
-            class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
-            colspan="1"
-            role="columnheader"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            data-sticky-last-left-td="true"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
           >
-            First Name
-            <div
-              class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
-              draggable="false"
-              role="separator"
-              style="cursor: col-resize;"
-            />
+            Sub test lvl2
           </div>
           <div
-            class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
-            colspan="1"
-            role="columnheader"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            Last Name
-            <div
-              class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
-              draggable="false"
-              role="separator"
-              style="cursor: col-resize;"
-            />
+            <span>
+              74
+            </span>
           </div>
           <div
-            class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
-            colspan="1"
-            role="columnheader"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            Age
-            <div
-              class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
-              draggable="false"
-              role="separator"
-              style="cursor: col-resize;"
-            />
+            <span>
+              5
+            </span>
           </div>
           <div
-            class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
-            colspan="1"
-            role="columnheader"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            Visits
-            <div
-              class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
-              draggable="false"
-              role="separator"
-              style="cursor: col-resize;"
-            />
+            2
           </div>
           <div
-            class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
-            colspan="1"
-            role="columnheader"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            Activity
-            <div
-              class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
-              draggable="false"
-              role="separator"
-              style="cursor: col-resize;"
-            />
+            86
           </div>
           <div
-            class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
-            colspan="1"
-            role="columnheader"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            Status
-            <div
-              class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
-              draggable="false"
-              role="separator"
-              style="cursor: col-resize;"
-            />
+            <span>
+              1
+            </span>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+            data-sticky-first-right-td="true"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+          >
+            <button
+              class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+              data-state="closed"
+              type="button"
+            >
+              <svg
+                class="text-moon-24 max-h-6"
+                fill="none"
+                height="1em"
+                viewBox="0 0 32 32"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                />
+              </svg>
+            </button>
           </div>
         </div>
         <div
+          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors first:rounded-es-none last:rounded-ee-none text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 0px;"
+          style="display: flex; flex: 1 0 auto; min-width: 800px;"
         >
           <div
-            class="relative"
-            colspan="1"
-            role="columnheader"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
-          />
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+          >
+            <div
+              class="flex items-center gap-x-1 ps-12"
+            >
+              <div
+                class="flex items-center h-full"
+              >
+                <label
+                  class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
+                  for="any__unique__string__for__each__table_0.1.0"
+                >
+                  <input
+                    aria-checked="false"
+                    aria-label="Checkbox"
+                    class="peer appearance-none h-6 w-6 outline-none align-top select-none"
+                    id="any__unique__string__for__each__table_0.1.0"
+                    type="checkbox"
+                  />
+                  <span
+                    aria-hidden="true"
+                    class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
+                  >
+                    <svg
+                      class="transition-opacity opacity-0"
+                      fill="none"
+                      height="1em"
+                      viewBox="0 0 32 32"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M7 14.9412L13.6667 22L25 10"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                    </svg>
+                  </span>
+                </label>
+              </div>
+            </div>
+          </div>
           <div
-            class="relative"
-            colspan="1"
-            role="columnheader"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
-          />
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            data-sticky-last-left-td="true"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+          >
+            Sub test lvl3
+          </div>
           <div
-            class="relative"
-            colspan="1"
-            role="columnheader"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
-          />
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+          >
+            <span>
+              89
+            </span>
+          </div>
           <div
-            class="relative"
-            colspan="1"
-            role="columnheader"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
-          />
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+          >
+            <span>
+              98
+            </span>
+          </div>
           <div
-            class="relative"
-            colspan="1"
-            role="columnheader"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
-          />
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+          >
+            43
+          </div>
           <div
-            class="relative"
-            colspan="1"
-            role="columnheader"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px; position: relative;"
-          />
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+          >
+            24
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+          >
+            <span>
+              54
+            </span>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+            data-sticky-first-right-td="true"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+          >
+            <button
+              class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+              data-state="closed"
+              type="button"
+            >
+              <svg
+                class="text-moon-24 max-h-6"
+                fill="none"
+                height="1em"
+                viewBox="0 0 32 32"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                />
+              </svg>
+            </button>
+          </div>
         </div>
-      </div>
-      <div
-        class="flex flex-col relative z-0 no-scrollbar gap-1"
-        role="rowgroup"
-      >
         <div
-          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors first:rounded-es-none last:rounded-ee-none text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 0px;"
+          style="display: flex; flex: 1 0 auto; min-width: 800px;"
         >
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
           >
-            <input
-              aria-label="Editable cell"
-              class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
-              value="Test"
-            />
+            <div
+              class="flex items-center gap-x-1 ps-12"
+            >
+              <div
+                class="flex items-center h-full"
+              >
+                <label
+                  class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
+                  for="any__unique__string__for__each__table_0.1.1"
+                >
+                  <input
+                    aria-checked="false"
+                    aria-label="Checkbox"
+                    class="peer appearance-none h-6 w-6 outline-none align-top select-none"
+                    id="any__unique__string__for__each__table_0.1.1"
+                    type="checkbox"
+                  />
+                  <span
+                    aria-hidden="true"
+                    class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
+                  >
+                    <svg
+                      class="transition-opacity opacity-0"
+                      fill="none"
+                      height="1em"
+                      viewBox="0 0 32 32"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M7 14.9412L13.6667 22L25 10"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                    </svg>
+                  </span>
+                </label>
+              </div>
+            </div>
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            data-sticky-last-left-td="true"
+            data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
           >
-            <input
-              aria-label="Editable cell"
-              class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
-              value="Test"
-            />
+            Sub test lvl3
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <input
-              aria-label="Editable cell"
-              class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
-              value="0"
-            />
+            <span>
+              52
+            </span>
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            <input
-              aria-label="Editable cell"
-              class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
-              value="0"
-            />
+            <span>
+              25
+            </span>
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            <input
-              aria-label="Editable cell"
-              class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
-              value="0"
-            />
+            35
           </div>
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <input
-              aria-label="Editable cell"
-              class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
-              value="0"
-            />
+            97
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+          >
+            <span>
+              25
+            </span>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+            data-sticky-first-right-td="true"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+          >
+            <button
+              class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+              data-state="closed"
+              type="button"
+            >
+              <svg
+                class="text-moon-24 max-h-6"
+                fill="none"
+                height="1em"
+                viewBox="0 0 32 32"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                />
+              </svg>
+            </button>
           </div>
         </div>
         <div
-          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors first:rounded-es-none last:rounded-ee-none text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 0px;"
+          style="display: flex; flex: 1 0 auto; min-width: 800px;"
         >
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
           >
-            <input
-              aria-label="Editable cell"
-              class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
-              value="Test"
-            />
+            <div
+              class="flex items-center gap-x-1 ps-12"
+            >
+              <div
+                class="flex items-center h-full"
+              >
+                <label
+                  class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
+                  for="any__unique__string__for__each__table_0.1.2"
+                >
+                  <input
+                    aria-checked="false"
+                    aria-label="Checkbox"
+                    class="peer appearance-none h-6 w-6 outline-none align-top select-none"
+                    id="any__unique__string__for__each__table_0.1.2"
+                    type="checkbox"
+                  />
+                  <span
+                    aria-hidden="true"
+                    class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
+                  >
+                    <svg
+                      class="transition-opacity opacity-0"
+                      fill="none"
+                      height="1em"
+                      viewBox="0 0 32 32"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M7 14.9412L13.6667 22L25 10"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                    </svg>
+                  </span>
+                </label>
+              </div>
+            </div>
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            data-sticky-last-left-td="true"
+            data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
           >
-            <input
-              aria-label="Editable cell"
-              class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
-              value="Test"
-            />
+            Sub test lvl3
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <input
-              aria-label="Editable cell"
-              class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
-              value="30"
-            />
+            <span>
+              55
+            </span>
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            <input
-              aria-label="Editable cell"
-              class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
-              value="100"
-            />
+            <span>
+              54
+            </span>
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            <input
-              aria-label="Editable cell"
-              class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
-              value="100"
-            />
+            33
           </div>
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <input
-              aria-label="Editable cell"
-              class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
-              value="100"
-            />
+            56
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+          >
+            <span>
+              24
+            </span>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+            data-sticky-first-right-td="true"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+          >
+            <button
+              class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+              data-state="closed"
+              type="button"
+            >
+              <svg
+                class="text-moon-24 max-h-6"
+                fill="none"
+                height="1em"
+                viewBox="0 0 32 32"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                />
+              </svg>
+            </button>
           </div>
         </div>
         <div
-          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors first:rounded-es-none last:rounded-ee-none text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 0px;"
+          style="display: flex; flex: 1 0 auto; min-width: 800px;"
         >
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
           >
-            <input
-              aria-label="Editable cell"
-              class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
-              value="Test"
-            />
+            <div
+              class="flex items-center gap-x-1 ps-6"
+            >
+              <div
+                class="flex items-center h-full"
+              >
+                <label
+                  class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
+                  for="any__unique__string__for__each__table_0.2"
+                >
+                  <input
+                    aria-checked="false"
+                    aria-label="Checkbox"
+                    class="peer appearance-none h-6 w-6 outline-none align-top select-none"
+                    id="any__unique__string__for__each__table_0.2"
+                    type="checkbox"
+                  />
+                  <span
+                    aria-hidden="true"
+                    class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
+                  >
+                    <svg
+                      class="transition-opacity opacity-0"
+                      fill="none"
+                      height="1em"
+                      viewBox="0 0 32 32"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M7 14.9412L13.6667 22L25 10"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                    </svg>
+                  </span>
+                </label>
+              </div>
+              <span
+                style="cursor: pointer;"
+                title="Toggle Row Expanded"
+              >
+                👇
+              </span>
+            </div>
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            data-sticky-last-left-td="true"
+            data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
           >
-            <input
-              aria-label="Editable cell"
-              class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
-              value="Test"
-            />
+            Sub test lvl2
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <input
-              aria-label="Editable cell"
-              class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
-              value="60"
-            />
+            <span>
+              53
+            </span>
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            <input
-              aria-label="Editable cell"
-              class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
-              value="200"
-            />
+            <span>
+              63
+            </span>
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            <input
-              aria-label="Editable cell"
-              class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
-              value="200"
-            />
+            3
           </div>
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <input
-              aria-label="Editable cell"
-              class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
-              value="200"
-            />
+            48
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+          >
+            <span>
+              24
+            </span>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+            data-sticky-first-right-td="true"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+          >
+            <button
+              class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+              data-state="closed"
+              type="button"
+            >
+              <svg
+                class="text-moon-24 max-h-6"
+                fill="none"
+                height="1em"
+                viewBox="0 0 32 32"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                />
+              </svg>
+            </button>
           </div>
         </div>
         <div
-          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors first:rounded-es-none last:rounded-ee-none text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 0px;"
+          style="display: flex; flex: 1 0 auto; min-width: 800px;"
         >
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
           >
-            <input
-              aria-label="Editable cell"
-              class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
-              value="Test"
-            />
+            <div
+              class="flex items-center gap-x-1 ps-12"
+            >
+              <div
+                class="flex items-center h-full"
+              >
+                <label
+                  class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
+                  for="any__unique__string__for__each__table_0.2.0"
+                >
+                  <input
+                    aria-checked="false"
+                    aria-label="Checkbox"
+                    class="peer appearance-none h-6 w-6 outline-none align-top select-none"
+                    id="any__unique__string__for__each__table_0.2.0"
+                    type="checkbox"
+                  />
+                  <span
+                    aria-hidden="true"
+                    class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
+                  >
+                    <svg
+                      class="transition-opacity opacity-0"
+                      fill="none"
+                      height="1em"
+                      viewBox="0 0 32 32"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M7 14.9412L13.6667 22L25 10"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                    </svg>
+                  </span>
+                </label>
+              </div>
+            </div>
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            data-sticky-last-left-td="true"
+            data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
           >
-            <input
-              aria-label="Editable cell"
-              class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
-              value="Test"
-            />
+            Sub test lvl3
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <input
-              aria-label="Editable cell"
-              class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
-              value="90"
-            />
+            <span>
+              4
+            </span>
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            <input
-              aria-label="Editable cell"
-              class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
-              value="300"
-            />
+            <span>
+              653
+            </span>
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            <input
-              aria-label="Editable cell"
-              class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
-              value="300"
-            />
+            43
           </div>
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <input
-              aria-label="Editable cell"
-              class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
-              value="300"
-            />
+            44
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+          >
+            <span>
+              36
+            </span>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+            data-sticky-first-right-td="true"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+          >
+            <button
+              class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+              data-state="closed"
+              type="button"
+            >
+              <svg
+                class="text-moon-24 max-h-6"
+                fill="none"
+                height="1em"
+                viewBox="0 0 32 32"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                />
+              </svg>
+            </button>
           </div>
         </div>
         <div
-          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors first:rounded-es-none last:rounded-ee-none text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 0px;"
+          style="display: flex; flex: 1 0 auto; min-width: 800px;"
         >
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
           >
-            <input
-              aria-label="Editable cell"
-              class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
-              value="Test"
-            />
+            <div
+              class="flex items-center gap-x-1 ps-12"
+            >
+              <div
+                class="flex items-center h-full"
+              >
+                <label
+                  class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
+                  for="any__unique__string__for__each__table_0.2.1"
+                >
+                  <input
+                    aria-checked="false"
+                    aria-label="Checkbox"
+                    class="peer appearance-none h-6 w-6 outline-none align-top select-none"
+                    id="any__unique__string__for__each__table_0.2.1"
+                    type="checkbox"
+                  />
+                  <span
+                    aria-hidden="true"
+                    class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
+                  >
+                    <svg
+                      class="transition-opacity opacity-0"
+                      fill="none"
+                      height="1em"
+                      viewBox="0 0 32 32"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M7 14.9412L13.6667 22L25 10"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                    </svg>
+                  </span>
+                </label>
+              </div>
+            </div>
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            data-sticky-last-left-td="true"
+            data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
           >
-            <input
-              aria-label="Editable cell"
-              class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
-              value="Test"
-            />
+            Sub test lvl3
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <input
-              aria-label="Editable cell"
-              class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
-              value="120"
-            />
+            <span>
+              49
+            </span>
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            <input
-              aria-label="Editable cell"
-              class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
-              value="400"
-            />
+            <span>
+              45
+            </span>
           </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
           >
-            <input
-              aria-label="Editable cell"
-              class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
-              value="400"
-            />
+            4
           </div>
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 0px; width: 150px;"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
           >
-            <input
-              aria-label="Editable cell"
-              class="block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
-              value="400"
-            />
+            35
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+          >
+            <span>
+              454
+            </span>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+            data-sticky-first-right-td="true"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+          >
+            <button
+              class="z-0 overflow-hidden flex flex-row items-center justify-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 hover:bg-jiren hover:text-piccolo user-select-none center h-10 gap-2 p-2 text-bulma max-h-6"
+              data-state="closed"
+              type="button"
+            >
+              <svg
+                class="text-moon-24 max-h-6"
+                fill="none"
+                height="1em"
+                viewBox="0 0 32 32"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M23.3077 10.8846C24.5185 10.8846 25.5 9.90309 25.5 8.69231C25.5 7.48153 24.5185 6.5 23.3077 6.5C22.0969 6.5 21.1154 7.48153 21.1154 8.69231M23.3077 10.8846C22.0969 10.8846 21.1154 9.90309 21.1154 8.69231M23.3077 10.8846V21.1154M21.1154 8.69231H10.8846M21.1154 23.3077C21.1154 24.5185 22.0969 25.5 23.3077 25.5C24.5185 25.5 25.5 24.5185 25.5 23.3077C25.5 22.0969 24.5185 21.1154 23.3077 21.1154M21.1154 23.3077C21.1154 22.0969 22.0969 21.1154 23.3077 21.1154M21.1154 23.3077H10.8846M10.8846 8.69231C10.8846 9.90309 9.90309 10.8846 8.69231 10.8846M10.8846 8.69231C10.8846 7.48153 9.90309 6.5 8.69231 6.5C7.48153 6.5 6.5 7.48153 6.5 8.69231C6.5 9.90309 7.48153 10.8846 8.69231 10.8846M8.69231 10.8846V21.1154M10.8846 23.3077C10.8846 24.5185 9.90309 25.5 8.69231 25.5C7.48153 25.5 6.5 24.5185 6.5 23.3077C6.5 22.0969 7.48153 21.1154 8.69231 21.1154M10.8846 23.3077C10.8846 22.0969 9.90309 21.1154 8.69231 21.1154"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                />
+              </svg>
+            </button>
           </div>
         </div>
       </div>
@@ -153101,15 +161211,30 @@ Object {
           <div
             class="flex rounded-moon-s-sm sticky"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
+            <div
+              class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+              colspan="1"
+              data-sticky-td="true"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            >
+              Select
+              <div
+                class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+                draggable="false"
+                role="separator"
+                style="cursor: col-resize;"
+              />
+            </div>
             <div
               class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
               colspan="2"
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="columnheader"
-              style="box-sizing: border-box; flex: 300 0 auto; min-width: 200px; width: 300px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 300 0 auto; min-width: 200px; width: 300px; position: sticky; z-index: 3; left: 150px;"
             >
               Name
               <div
@@ -153153,7 +161278,7 @@ Object {
           <div
             class="flex rounded-moon-s-sm sticky"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
               class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
@@ -153161,6 +161286,56 @@ Object {
               data-sticky-td="true"
               role="columnheader"
               style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            >
+              <div
+                class="flex items-center h-full"
+              >
+                <label
+                  class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
+                  for="any_unique_string_for_each_table_root"
+                >
+                  <input
+                    aria-checked="false"
+                    aria-label="Checkbox"
+                    class="peer appearance-none h-6 w-6 outline-none align-top select-none"
+                    id="any_unique_string_for_each_table_root"
+                    type="checkbox"
+                  />
+                  <span
+                    aria-hidden="true"
+                    class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
+                  >
+                    <svg
+                      class="transition-opacity opacity-0"
+                      fill="none"
+                      height="1em"
+                      viewBox="0 0 32 32"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M7 14.9412L13.6667 22L25 10"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                    </svg>
+                  </span>
+                </label>
+              </div>
+              <div
+                class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+                draggable="false"
+                role="separator"
+                style="cursor: col-resize;"
+              />
+            </div>
+            <div
+              class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+              colspan="1"
+              data-sticky-td="true"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               First Name
               <div
@@ -153176,7 +161351,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="columnheader"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Last Name
               <div
@@ -153261,7 +161436,7 @@ Object {
           </div>
           <div
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
               class="relative"
@@ -153273,11 +161448,18 @@ Object {
             <div
               class="relative"
               colspan="1"
-              data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="columnheader"
               style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             />
+            <div
+              class="relative"
+              colspan="1"
+              data-sticky-last-left-td="true"
+              data-sticky-td="true"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
+            />
             <div
               class="relative"
               colspan="1"
@@ -153319,24 +161501,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="0"
+                  for="any_unique_string_for_each_table_0"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="0"
+                    id="any_unique_string_for_each_table_0"
                     type="checkbox"
                   />
                   <span
@@ -153366,7 +161550,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -153375,7 +161559,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -153426,24 +161610,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="1"
+                  for="any_unique_string_for_each_table_1"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="1"
+                    id="any_unique_string_for_each_table_1"
                     type="checkbox"
                   />
                   <span
@@ -153473,7 +161659,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -153482,7 +161668,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -153533,24 +161719,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="2"
+                  for="any_unique_string_for_each_table_2"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="2"
+                    id="any_unique_string_for_each_table_2"
                     type="checkbox"
                   />
                   <span
@@ -153580,7 +161768,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -153589,7 +161777,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -153640,24 +161828,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="3"
+                  for="any_unique_string_for_each_table_3"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="3"
+                    id="any_unique_string_for_each_table_3"
                     type="checkbox"
                   />
                   <span
@@ -153687,7 +161877,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -153696,7 +161886,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -153747,24 +161937,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="4"
+                  for="any_unique_string_for_each_table_4"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="4"
+                    id="any_unique_string_for_each_table_4"
                     type="checkbox"
                   />
                   <span
@@ -153794,7 +161986,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -153803,7 +161995,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -153854,238 +162046,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
-          >
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
-              role="cell"
-            >
-              <div
-                class="flex items-center h-full w-full justify-center ps-2"
-              >
-                <label
-                  class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="5"
-                >
-                  <input
-                    aria-checked="false"
-                    aria-label="Checkbox"
-                    class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="5"
-                    type="checkbox"
-                  />
-                  <span
-                    aria-hidden="true"
-                    class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
-                  >
-                    <svg
-                      class="transition-opacity opacity-0"
-                      fill="none"
-                      height="1em"
-                      viewBox="0 0 32 32"
-                      width="1em"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M7 14.9412L13.6667 22L25 10"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                      />
-                    </svg>
-                  </span>
-                </label>
-              </div>
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              data-sticky-td="true"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
-            >
-              Test
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              data-sticky-last-left-td="true"
-              data-sticky-td="true"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
-            >
-              Test
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-            >
-              <span>
-                150
-              </span>
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-            >
-              <span>
-                500
-              </span>
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-            >
-              500
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-            >
-              500
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
-              data-sticky-first-right-td="true"
-              data-sticky-td="true"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
-            >
-              <span>
-                500
-              </span>
-            </div>
-          </div>
-          <div
-            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-            role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
-              role="cell"
-            >
-              <div
-                class="flex items-center h-full w-full justify-center ps-2"
-              >
-                <label
-                  class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="6"
-                >
-                  <input
-                    aria-checked="false"
-                    aria-label="Checkbox"
-                    class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="6"
-                    type="checkbox"
-                  />
-                  <span
-                    aria-hidden="true"
-                    class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
-                  >
-                    <svg
-                      class="transition-opacity opacity-0"
-                      fill="none"
-                      height="1em"
-                      viewBox="0 0 32 32"
-                      width="1em"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M7 14.9412L13.6667 22L25 10"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                      />
-                    </svg>
-                  </span>
-                </label>
-              </div>
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
               style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
-            >
-              Test
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              data-sticky-last-left-td="true"
-              data-sticky-td="true"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
-            >
-              Test
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-            >
-              <span>
-                180
-              </span>
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-            >
-              <span>
-                600
-              </span>
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-            >
-              600
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-              role="cell"
-              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-            >
-              600
-            </div>
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
-              data-sticky-first-right-td="true"
-              data-sticky-td="true"
-              role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
-            >
-              <span>
-                600
-              </span>
-            </div>
-          </div>
-          <div
-            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-            role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
-          >
-            <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
-              role="cell"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="7"
+                  for="any_unique_string_for_each_table_5"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="7"
+                    id="any_unique_string_for_each_table_5"
                     type="checkbox"
                   />
                   <span
@@ -154115,7 +162095,116 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+            >
+              Test
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              data-sticky-last-left-td="true"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
+            >
+              Test
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                150
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              <span>
+                500
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              500
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              500
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+              data-sticky-first-right-td="true"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+            >
+              <span>
+                500
+              </span>
+            </div>
+          </div>
+          <div
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
+          >
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
+              role="cell"
               style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            >
+              <div
+                class="flex items-center h-full"
+              >
+                <label
+                  class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
+                  for="any_unique_string_for_each_table_6"
+                >
+                  <input
+                    aria-checked="false"
+                    aria-label="Checkbox"
+                    class="peer appearance-none h-6 w-6 outline-none align-top select-none"
+                    id="any_unique_string_for_each_table_6"
+                    type="checkbox"
+                  />
+                  <span
+                    aria-hidden="true"
+                    class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
+                  >
+                    <svg
+                      class="transition-opacity opacity-0"
+                      fill="none"
+                      height="1em"
+                      viewBox="0 0 32 32"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M7 14.9412L13.6667 22L25 10"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                    </svg>
+                  </span>
+                </label>
+              </div>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -154124,10 +162213,119 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
+            >
+              Test
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              <span>
+                180
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              <span>
+                600
+              </span>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+            >
+              600
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              role="cell"
+              style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+            >
+              600
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+              data-sticky-first-right-td="true"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+            >
+              <span>
+                600
+              </span>
+            </div>
+          </div>
+          <div
+            class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+            role="row"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
+          >
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            >
+              <div
+                class="flex items-center h-full"
+              >
+                <label
+                  class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
+                  for="any_unique_string_for_each_table_7"
+                >
+                  <input
+                    aria-checked="false"
+                    aria-label="Checkbox"
+                    class="peer appearance-none h-6 w-6 outline-none align-top select-none"
+                    id="any_unique_string_for_each_table_7"
+                    type="checkbox"
+                  />
+                  <span
+                    aria-hidden="true"
+                    class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
+                  >
+                    <svg
+                      class="transition-opacity opacity-0"
+                      fill="none"
+                      height="1em"
+                      viewBox="0 0 32 32"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M7 14.9412L13.6667 22L25 10"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                    </svg>
+                  </span>
+                </label>
+              </div>
+            </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              data-sticky-td="true"
+              role="cell"
               style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
+            <div
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+              data-sticky-last-left-td="true"
+              data-sticky-td="true"
+              role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
+            >
+              Test
+            </div>
             <div
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               role="cell"
@@ -154175,24 +162373,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="8"
+                  for="any_unique_string_for_each_table_8"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="8"
+                    id="any_unique_string_for_each_table_8"
                     type="checkbox"
                   />
                   <span
@@ -154222,7 +162422,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -154231,7 +162431,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -154282,24 +162482,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="9"
+                  for="any_unique_string_for_each_table_9"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="9"
+                    id="any_unique_string_for_each_table_9"
                     type="checkbox"
                   />
                   <span
@@ -154329,7 +162531,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -154338,7 +162540,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -154389,24 +162591,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="10"
+                  for="any_unique_string_for_each_table_10"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="10"
+                    id="any_unique_string_for_each_table_10"
                     type="checkbox"
                   />
                   <span
@@ -154436,7 +162640,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -154445,7 +162649,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -154496,24 +162700,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="11"
+                  for="any_unique_string_for_each_table_11"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="11"
+                    id="any_unique_string_for_each_table_11"
                     type="checkbox"
                   />
                   <span
@@ -154543,7 +162749,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -154552,7 +162758,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -154603,24 +162809,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="12"
+                  for="any_unique_string_for_each_table_12"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="12"
+                    id="any_unique_string_for_each_table_12"
                     type="checkbox"
                   />
                   <span
@@ -154650,7 +162858,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -154659,7 +162867,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -154710,24 +162918,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="13"
+                  for="any_unique_string_for_each_table_13"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="13"
+                    id="any_unique_string_for_each_table_13"
                     type="checkbox"
                   />
                   <span
@@ -154757,7 +162967,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -154766,7 +162976,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -154817,24 +163027,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="14"
+                  for="any_unique_string_for_each_table_14"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="14"
+                    id="any_unique_string_for_each_table_14"
                     type="checkbox"
                   />
                   <span
@@ -154864,7 +163076,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -154873,7 +163085,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -154924,24 +163136,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="15"
+                  for="any_unique_string_for_each_table_15"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="15"
+                    id="any_unique_string_for_each_table_15"
                     type="checkbox"
                   />
                   <span
@@ -154971,7 +163185,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -154980,7 +163194,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -155031,24 +163245,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="16"
+                  for="any_unique_string_for_each_table_16"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="16"
+                    id="any_unique_string_for_each_table_16"
                     type="checkbox"
                   />
                   <span
@@ -155078,7 +163294,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -155087,7 +163303,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -155138,24 +163354,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="17"
+                  for="any_unique_string_for_each_table_17"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="17"
+                    id="any_unique_string_for_each_table_17"
                     type="checkbox"
                   />
                   <span
@@ -155185,7 +163403,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -155194,7 +163412,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -155245,24 +163463,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="18"
+                  for="any_unique_string_for_each_table_18"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="18"
+                    id="any_unique_string_for_each_table_18"
                     type="checkbox"
                   />
                   <span
@@ -155292,7 +163512,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -155301,7 +163521,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -155352,24 +163572,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="19"
+                  for="any_unique_string_for_each_table_19"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="19"
+                    id="any_unique_string_for_each_table_19"
                     type="checkbox"
                   />
                   <span
@@ -155399,7 +163621,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -155408,7 +163630,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -155459,24 +163681,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="20"
+                  for="any_unique_string_for_each_table_20"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="20"
+                    id="any_unique_string_for_each_table_20"
                     type="checkbox"
                   />
                   <span
@@ -155506,7 +163730,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -155515,7 +163739,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -155566,24 +163790,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="21"
+                  for="any_unique_string_for_each_table_21"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="21"
+                    id="any_unique_string_for_each_table_21"
                     type="checkbox"
                   />
                   <span
@@ -155613,7 +163839,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -155622,7 +163848,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -155673,24 +163899,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="22"
+                  for="any_unique_string_for_each_table_22"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="22"
+                    id="any_unique_string_for_each_table_22"
                     type="checkbox"
                   />
                   <span
@@ -155720,7 +163948,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -155729,7 +163957,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -155780,24 +164008,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="23"
+                  for="any_unique_string_for_each_table_23"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="23"
+                    id="any_unique_string_for_each_table_23"
                     type="checkbox"
                   />
                   <span
@@ -155827,7 +164057,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -155836,7 +164066,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -155887,24 +164117,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="24"
+                  for="any_unique_string_for_each_table_24"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="24"
+                    id="any_unique_string_for_each_table_24"
                     type="checkbox"
                   />
                   <span
@@ -155934,7 +164166,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -155943,7 +164175,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -155994,24 +164226,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="25"
+                  for="any_unique_string_for_each_table_25"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="25"
+                    id="any_unique_string_for_each_table_25"
                     type="checkbox"
                   />
                   <span
@@ -156041,7 +164275,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -156050,7 +164284,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -156101,24 +164335,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="26"
+                  for="any_unique_string_for_each_table_26"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="26"
+                    id="any_unique_string_for_each_table_26"
                     type="checkbox"
                   />
                   <span
@@ -156148,7 +164384,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -156157,7 +164393,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -156208,24 +164444,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="27"
+                  for="any_unique_string_for_each_table_27"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="27"
+                    id="any_unique_string_for_each_table_27"
                     type="checkbox"
                   />
                   <span
@@ -156255,7 +164493,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -156264,7 +164502,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -156315,24 +164553,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="28"
+                  for="any_unique_string_for_each_table_28"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="28"
+                    id="any_unique_string_for_each_table_28"
                     type="checkbox"
                   />
                   <span
@@ -156362,7 +164602,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -156371,7 +164611,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -156422,24 +164662,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="29"
+                  for="any_unique_string_for_each_table_29"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="29"
+                    id="any_unique_string_for_each_table_29"
                     type="checkbox"
                   />
                   <span
@@ -156469,7 +164711,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -156478,7 +164720,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -156529,24 +164771,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="30"
+                  for="any_unique_string_for_each_table_30"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="30"
+                    id="any_unique_string_for_each_table_30"
                     type="checkbox"
                   />
                   <span
@@ -156576,7 +164820,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -156585,7 +164829,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -156636,24 +164880,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="31"
+                  for="any_unique_string_for_each_table_31"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="31"
+                    id="any_unique_string_for_each_table_31"
                     type="checkbox"
                   />
                   <span
@@ -156683,7 +164929,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -156692,7 +164938,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -156743,24 +164989,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="32"
+                  for="any_unique_string_for_each_table_32"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="32"
+                    id="any_unique_string_for_each_table_32"
                     type="checkbox"
                   />
                   <span
@@ -156790,7 +165038,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -156799,7 +165047,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -156850,24 +165098,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="33"
+                  for="any_unique_string_for_each_table_33"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="33"
+                    id="any_unique_string_for_each_table_33"
                     type="checkbox"
                   />
                   <span
@@ -156897,7 +165147,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -156906,7 +165156,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -156957,24 +165207,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="34"
+                  for="any_unique_string_for_each_table_34"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="34"
+                    id="any_unique_string_for_each_table_34"
                     type="checkbox"
                   />
                   <span
@@ -157004,7 +165256,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -157013,7 +165265,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -157064,24 +165316,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="35"
+                  for="any_unique_string_for_each_table_35"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="35"
+                    id="any_unique_string_for_each_table_35"
                     type="checkbox"
                   />
                   <span
@@ -157111,7 +165365,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -157120,7 +165374,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -157171,24 +165425,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="36"
+                  for="any_unique_string_for_each_table_36"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="36"
+                    id="any_unique_string_for_each_table_36"
                     type="checkbox"
                   />
                   <span
@@ -157218,7 +165474,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -157227,7 +165483,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -157278,24 +165534,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="37"
+                  for="any_unique_string_for_each_table_37"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="37"
+                    id="any_unique_string_for_each_table_37"
                     type="checkbox"
                   />
                   <span
@@ -157325,7 +165583,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -157334,7 +165592,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -157385,24 +165643,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="38"
+                  for="any_unique_string_for_each_table_38"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="38"
+                    id="any_unique_string_for_each_table_38"
                     type="checkbox"
                   />
                   <span
@@ -157432,7 +165692,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -157441,7 +165701,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -157492,24 +165752,26 @@ Object {
           <div
             class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
-              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+              class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+              data-sticky-td="true"
               role="cell"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
             >
               <div
-                class="flex items-center h-full w-full justify-center ps-2"
+                class="flex items-center h-full"
               >
                 <label
                   class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                  for="39"
+                  for="any_unique_string_for_each_table_39"
                 >
                   <input
                     aria-checked="false"
                     aria-label="Checkbox"
                     class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                    id="39"
+                    id="any_unique_string_for_each_table_39"
                     type="checkbox"
                   />
                   <span
@@ -157539,7 +165801,7 @@ Object {
               class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
             >
               Test
             </div>
@@ -157548,7 +165810,7 @@ Object {
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="cell"
-              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
             >
               Test
             </div>
@@ -157603,7 +165865,7 @@ Object {
           <div
             class="flex rounded-moon-s-sm sticky"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
             <div
               class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
@@ -157622,7 +165884,6 @@ Object {
             <div
               class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
               colspan="1"
-              data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="columnheader"
               style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
@@ -157634,6 +165895,21 @@ Object {
                 style="cursor: col-resize;"
               />
             </div>
+            <div
+              class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+              colspan="1"
+              data-sticky-last-left-td="true"
+              data-sticky-td="true"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
+            >
+              <div
+                class="resizer inline-block cursor-ew-resize w-2 h-full absolute top-0 end-0 z-1 after:end-0 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%]"
+                draggable="false"
+                role="separator"
+                style="cursor: col-resize;"
+              />
+            </div>
             <div
               class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
               colspan="1"
@@ -157705,15 +165981,29 @@ Object {
           <div
             class="flex rounded-moon-s-sm sticky"
             role="row"
-            style="display: flex; flex: 1 0 auto; min-width: 700px;"
+            style="display: flex; flex: 1 0 auto; min-width: 800px;"
           >
+            <div
+              class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+              colspan="1"
+              data-sticky-td="true"
+              role="columnheader"
+              style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            >
+              <div
+                class="resizer inline-block cursor-ew-resize w-2 h-full absolute top-0 end-0 z-1 after:end-0 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%]"
+                draggable="false"
+                role="separator"
+                style="cursor: col-resize;"
+              />
+            </div>
             <div
               class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
               colspan="2"
               data-sticky-last-left-td="true"
               data-sticky-td="true"
               role="columnheader"
-              style="box-sizing: border-box; flex: 300 0 auto; min-width: 200px; width: 300px; position: sticky; z-index: 3; left: 0px;"
+              style="box-sizing: border-box; flex: 300 0 auto; min-width: 200px; width: 300px; position: sticky; z-index: 3; left: 150px;"
             >
               Name footer
               <div
@@ -157770,15 +166060,30 @@ Object {
         <div
           class="flex rounded-moon-s-sm sticky"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 700px;"
+          style="display: flex; flex: 1 0 auto; min-width: 800px;"
         >
+          <div
+            class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+            colspan="1"
+            data-sticky-td="true"
+            role="columnheader"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+          >
+            Select
+            <div
+              class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+              draggable="false"
+              role="separator"
+              style="cursor: col-resize;"
+            />
+          </div>
           <div
             class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
             colspan="2"
             data-sticky-last-left-td="true"
             data-sticky-td="true"
             role="columnheader"
-            style="box-sizing: border-box; flex: 300 0 auto; min-width: 200px; width: 300px; position: sticky; z-index: 3; left: 0px;"
+            style="box-sizing: border-box; flex: 300 0 auto; min-width: 200px; width: 300px; position: sticky; z-index: 3; left: 150px;"
           >
             Name
             <div
@@ -157822,7 +166127,7 @@ Object {
         <div
           class="flex rounded-moon-s-sm sticky"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 700px;"
+          style="display: flex; flex: 1 0 auto; min-width: 800px;"
         >
           <div
             class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
@@ -157830,6 +166135,56 @@ Object {
             data-sticky-td="true"
             role="columnheader"
             style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+          >
+            <div
+              class="flex items-center h-full"
+            >
+              <label
+                class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
+                for="any_unique_string_for_each_table_root"
+              >
+                <input
+                  aria-checked="false"
+                  aria-label="Checkbox"
+                  class="peer appearance-none h-6 w-6 outline-none align-top select-none"
+                  id="any_unique_string_for_each_table_root"
+                  type="checkbox"
+                />
+                <span
+                  aria-hidden="true"
+                  class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
+                >
+                  <svg
+                    class="transition-opacity opacity-0"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 32 32"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M7 14.9412L13.6667 22L25 10"
+                      stroke="currentColor"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    />
+                  </svg>
+                </span>
+              </label>
+            </div>
+            <div
+              class="inline-block w-px h-full absolute top-0 end-0 z-1 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%] after:end-0"
+              draggable="false"
+              role="separator"
+              style="cursor: col-resize;"
+            />
+          </div>
+          <div
+            class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+            colspan="1"
+            data-sticky-td="true"
+            role="columnheader"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
           >
             First Name
             <div
@@ -157845,7 +166200,7 @@ Object {
             data-sticky-last-left-td="true"
             data-sticky-td="true"
             role="columnheader"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
           >
             Last Name
             <div
@@ -157930,7 +166285,7 @@ Object {
         </div>
         <div
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 700px;"
+          style="display: flex; flex: 1 0 auto; min-width: 800px;"
         >
           <div
             class="relative"
@@ -157942,11 +166297,18 @@ Object {
           <div
             class="relative"
             colspan="1"
-            data-sticky-last-left-td="true"
             data-sticky-td="true"
             role="columnheader"
             style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
           />
+          <div
+            class="relative"
+            colspan="1"
+            data-sticky-last-left-td="true"
+            data-sticky-td="true"
+            role="columnheader"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
+          />
           <div
             class="relative"
             colspan="1"
@@ -157988,24 +166350,26 @@ Object {
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 700px;"
+          style="display: flex; flex: 1 0 auto; min-width: 800px;"
         >
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
             role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
           >
             <div
-              class="flex items-center h-full w-full justify-center ps-2"
+              class="flex items-center h-full"
             >
               <label
                 class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                for="0"
+                for="any_unique_string_for_each_table_0"
               >
                 <input
                   aria-checked="false"
                   aria-label="Checkbox"
                   class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                  id="0"
+                  id="any_unique_string_for_each_table_0"
                   type="checkbox"
                 />
                 <span
@@ -158035,7 +166399,7 @@ Object {
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
           >
             Test
           </div>
@@ -158044,7 +166408,7 @@ Object {
             data-sticky-last-left-td="true"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
           >
             Test
           </div>
@@ -158095,24 +166459,26 @@ Object {
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 700px;"
+          style="display: flex; flex: 1 0 auto; min-width: 800px;"
         >
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
             role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
           >
             <div
-              class="flex items-center h-full w-full justify-center ps-2"
+              class="flex items-center h-full"
             >
               <label
                 class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                for="1"
+                for="any_unique_string_for_each_table_1"
               >
                 <input
                   aria-checked="false"
                   aria-label="Checkbox"
                   class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                  id="1"
+                  id="any_unique_string_for_each_table_1"
                   type="checkbox"
                 />
                 <span
@@ -158142,7 +166508,7 @@ Object {
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
           >
             Test
           </div>
@@ -158151,7 +166517,7 @@ Object {
             data-sticky-last-left-td="true"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
           >
             Test
           </div>
@@ -158202,24 +166568,26 @@ Object {
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 700px;"
+          style="display: flex; flex: 1 0 auto; min-width: 800px;"
         >
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
             role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
           >
             <div
-              class="flex items-center h-full w-full justify-center ps-2"
+              class="flex items-center h-full"
             >
               <label
                 class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                for="2"
+                for="any_unique_string_for_each_table_2"
               >
                 <input
                   aria-checked="false"
                   aria-label="Checkbox"
                   class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                  id="2"
+                  id="any_unique_string_for_each_table_2"
                   type="checkbox"
                 />
                 <span
@@ -158249,7 +166617,7 @@ Object {
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
           >
             Test
           </div>
@@ -158258,7 +166626,7 @@ Object {
             data-sticky-last-left-td="true"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
           >
             Test
           </div>
@@ -158309,238 +166677,26 @@ Object {
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 700px;"
-        >
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
-            role="cell"
-          >
-            <div
-              class="flex items-center h-full w-full justify-center ps-2"
-            >
-              <label
-                class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                for="3"
-              >
-                <input
-                  aria-checked="false"
-                  aria-label="Checkbox"
-                  class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                  id="3"
-                  type="checkbox"
-                />
-                <span
-                  aria-hidden="true"
-                  class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
-                >
-                  <svg
-                    class="transition-opacity opacity-0"
-                    fill="none"
-                    height="1em"
-                    viewBox="0 0 32 32"
-                    width="1em"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M7 14.9412L13.6667 22L25 10"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                    />
-                  </svg>
-                </span>
-              </label>
-            </div>
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            data-sticky-td="true"
-            role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
-          >
-            Test
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            data-sticky-last-left-td="true"
-            data-sticky-td="true"
-            role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
-          >
-            Test
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-          >
-            <span>
-              90
-            </span>
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-          >
-            <span>
-              300
-            </span>
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-          >
-            300
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-          >
-            300
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
-            data-sticky-first-right-td="true"
-            data-sticky-td="true"
-            role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
-          >
-            <span>
-              300
-            </span>
-          </div>
-        </div>
-        <div
-          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-          role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 700px;"
+          style="display: flex; flex: 1 0 auto; min-width: 800px;"
         >
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
-            role="cell"
-          >
-            <div
-              class="flex items-center h-full w-full justify-center ps-2"
-            >
-              <label
-                class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                for="4"
-              >
-                <input
-                  aria-checked="false"
-                  aria-label="Checkbox"
-                  class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                  id="4"
-                  type="checkbox"
-                />
-                <span
-                  aria-hidden="true"
-                  class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
-                >
-                  <svg
-                    class="transition-opacity opacity-0"
-                    fill="none"
-                    height="1em"
-                    viewBox="0 0 32 32"
-                    width="1em"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M7 14.9412L13.6667 22L25 10"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                    />
-                  </svg>
-                </span>
-              </label>
-            </div>
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
             data-sticky-td="true"
             role="cell"
             style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
-          >
-            Test
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            data-sticky-last-left-td="true"
-            data-sticky-td="true"
-            role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
-          >
-            Test
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-          >
-            <span>
-              120
-            </span>
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-          >
-            <span>
-              400
-            </span>
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
-          >
-            400
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
-            role="cell"
-            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
-          >
-            400
-          </div>
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
-            data-sticky-first-right-td="true"
-            data-sticky-td="true"
-            role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
-          >
-            <span>
-              400
-            </span>
-          </div>
-        </div>
-        <div
-          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
-          role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 700px;"
-        >
-          <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
-            role="cell"
           >
             <div
-              class="flex items-center h-full w-full justify-center ps-2"
+              class="flex items-center h-full"
             >
               <label
                 class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                for="5"
+                for="any_unique_string_for_each_table_3"
               >
                 <input
                   aria-checked="false"
                   aria-label="Checkbox"
                   class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                  id="5"
+                  id="any_unique_string_for_each_table_3"
                   type="checkbox"
                 />
                 <span
@@ -158570,7 +166726,116 @@ Object {
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             data-sticky-td="true"
             role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+          >
+            Test
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            data-sticky-last-left-td="true"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
+          >
+            Test
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+          >
+            <span>
+              90
+            </span>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+          >
+            <span>
+              300
+            </span>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+          >
+            300
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+          >
+            300
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+            data-sticky-first-right-td="true"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+          >
+            <span>
+              300
+            </span>
+          </div>
+        </div>
+        <div
+          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+          role="row"
+          style="display: flex; flex: 1 0 auto; min-width: 800px;"
+        >
+          <div
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
+            role="cell"
             style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+          >
+            <div
+              class="flex items-center h-full"
+            >
+              <label
+                class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
+                for="any_unique_string_for_each_table_4"
+              >
+                <input
+                  aria-checked="false"
+                  aria-label="Checkbox"
+                  class="peer appearance-none h-6 w-6 outline-none align-top select-none"
+                  id="any_unique_string_for_each_table_4"
+                  type="checkbox"
+                />
+                <span
+                  aria-hidden="true"
+                  class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
+                >
+                  <svg
+                    class="transition-opacity opacity-0"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 32 32"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M7 14.9412L13.6667 22L25 10"
+                      stroke="currentColor"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    />
+                  </svg>
+                </span>
+              </label>
+            </div>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
           >
             Test
           </div>
@@ -158579,10 +166844,119 @@ Object {
             data-sticky-last-left-td="true"
             data-sticky-td="true"
             role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
+          >
+            Test
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+          >
+            <span>
+              120
+            </span>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+          >
+            <span>
+              400
+            </span>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px;"
+          >
+            400
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            role="cell"
+            style="box-sizing: border-box; flex: 100 0 auto; min-width: 100px; width: 100px;"
+          >
+            400
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-e-lg text-bulma before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0 bg-goku border-goku"
+            data-sticky-first-right-td="true"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; right: 0px;"
+          >
+            <span>
+              400
+            </span>
+          </div>
+        </div>
+        <div
+          class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
+          role="row"
+          style="display: flex; flex: 1 0 auto; min-width: 800px;"
+        >
+          <div
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+          >
+            <div
+              class="flex items-center h-full"
+            >
+              <label
+                class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
+                for="any_unique_string_for_each_table_5"
+              >
+                <input
+                  aria-checked="false"
+                  aria-label="Checkbox"
+                  class="peer appearance-none h-6 w-6 outline-none align-top select-none"
+                  id="any_unique_string_for_each_table_5"
+                  type="checkbox"
+                />
+                <span
+                  aria-hidden="true"
+                  class="absolute top-1 start-1 flex w-4 h-4 items-center justify-center shadow-[0_0_0_1px_inset] transition-colors text-moon-16 rounded-moon-s-xs shadow-trunks peer-checked:shadow-none text-goten"
+                >
+                  <svg
+                    class="transition-opacity opacity-0"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 32 32"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M7 14.9412L13.6667 22L25 10"
+                      stroke="currentColor"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    />
+                  </svg>
+                </span>
+              </label>
+            </div>
+          </div>
+          <div
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            data-sticky-td="true"
+            role="cell"
             style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
           >
             Test
           </div>
+          <div
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
+            data-sticky-last-left-td="true"
+            data-sticky-td="true"
+            role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
+          >
+            Test
+          </div>
           <div
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             role="cell"
@@ -158630,24 +167004,26 @@ Object {
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 700px;"
+          style="display: flex; flex: 1 0 auto; min-width: 800px;"
         >
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
             role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
           >
             <div
-              class="flex items-center h-full w-full justify-center ps-2"
+              class="flex items-center h-full"
             >
               <label
                 class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                for="6"
+                for="any_unique_string_for_each_table_6"
               >
                 <input
                   aria-checked="false"
                   aria-label="Checkbox"
                   class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                  id="6"
+                  id="any_unique_string_for_each_table_6"
                   type="checkbox"
                 />
                 <span
@@ -158677,7 +167053,7 @@ Object {
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
           >
             Test
           </div>
@@ -158686,7 +167062,7 @@ Object {
             data-sticky-last-left-td="true"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
           >
             Test
           </div>
@@ -158737,24 +167113,26 @@ Object {
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 700px;"
+          style="display: flex; flex: 1 0 auto; min-width: 800px;"
         >
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
             role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
           >
             <div
-              class="flex items-center h-full w-full justify-center ps-2"
+              class="flex items-center h-full"
             >
               <label
                 class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                for="7"
+                for="any_unique_string_for_each_table_7"
               >
                 <input
                   aria-checked="false"
                   aria-label="Checkbox"
                   class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                  id="7"
+                  id="any_unique_string_for_each_table_7"
                   type="checkbox"
                 />
                 <span
@@ -158784,7 +167162,7 @@ Object {
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
           >
             Test
           </div>
@@ -158793,7 +167171,7 @@ Object {
             data-sticky-last-left-td="true"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
           >
             Test
           </div>
@@ -158844,24 +167222,26 @@ Object {
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 700px;"
+          style="display: flex; flex: 1 0 auto; min-width: 800px;"
         >
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
             role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
           >
             <div
-              class="flex items-center h-full w-full justify-center ps-2"
+              class="flex items-center h-full"
             >
               <label
                 class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                for="8"
+                for="any_unique_string_for_each_table_8"
               >
                 <input
                   aria-checked="false"
                   aria-label="Checkbox"
                   class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                  id="8"
+                  id="any_unique_string_for_each_table_8"
                   type="checkbox"
                 />
                 <span
@@ -158891,7 +167271,7 @@ Object {
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
           >
             Test
           </div>
@@ -158900,7 +167280,7 @@ Object {
             data-sticky-last-left-td="true"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
           >
             Test
           </div>
@@ -158951,24 +167331,26 @@ Object {
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 700px;"
+          style="display: flex; flex: 1 0 auto; min-width: 800px;"
         >
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
             role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
           >
             <div
-              class="flex items-center h-full w-full justify-center ps-2"
+              class="flex items-center h-full"
             >
               <label
                 class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                for="9"
+                for="any_unique_string_for_each_table_9"
               >
                 <input
                   aria-checked="false"
                   aria-label="Checkbox"
                   class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                  id="9"
+                  id="any_unique_string_for_each_table_9"
                   type="checkbox"
                 />
                 <span
@@ -158998,7 +167380,7 @@ Object {
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
           >
             Test
           </div>
@@ -159007,7 +167389,7 @@ Object {
             data-sticky-last-left-td="true"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
           >
             Test
           </div>
@@ -159058,24 +167440,26 @@ Object {
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 700px;"
+          style="display: flex; flex: 1 0 auto; min-width: 800px;"
         >
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
             role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
           >
             <div
-              class="flex items-center h-full w-full justify-center ps-2"
+              class="flex items-center h-full"
             >
               <label
                 class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                for="10"
+                for="any_unique_string_for_each_table_10"
               >
                 <input
                   aria-checked="false"
                   aria-label="Checkbox"
                   class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                  id="10"
+                  id="any_unique_string_for_each_table_10"
                   type="checkbox"
                 />
                 <span
@@ -159105,7 +167489,7 @@ Object {
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
           >
             Test
           </div>
@@ -159114,7 +167498,7 @@ Object {
             data-sticky-last-left-td="true"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
           >
             Test
           </div>
@@ -159165,24 +167549,26 @@ Object {
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 700px;"
+          style="display: flex; flex: 1 0 auto; min-width: 800px;"
         >
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
             role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
           >
             <div
-              class="flex items-center h-full w-full justify-center ps-2"
+              class="flex items-center h-full"
             >
               <label
                 class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                for="11"
+                for="any_unique_string_for_each_table_11"
               >
                 <input
                   aria-checked="false"
                   aria-label="Checkbox"
                   class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                  id="11"
+                  id="any_unique_string_for_each_table_11"
                   type="checkbox"
                 />
                 <span
@@ -159212,7 +167598,7 @@ Object {
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
           >
             Test
           </div>
@@ -159221,7 +167607,7 @@ Object {
             data-sticky-last-left-td="true"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
           >
             Test
           </div>
@@ -159272,24 +167658,26 @@ Object {
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 700px;"
+          style="display: flex; flex: 1 0 auto; min-width: 800px;"
         >
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
             role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
           >
             <div
-              class="flex items-center h-full w-full justify-center ps-2"
+              class="flex items-center h-full"
             >
               <label
                 class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                for="12"
+                for="any_unique_string_for_each_table_12"
               >
                 <input
                   aria-checked="false"
                   aria-label="Checkbox"
                   class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                  id="12"
+                  id="any_unique_string_for_each_table_12"
                   type="checkbox"
                 />
                 <span
@@ -159319,7 +167707,7 @@ Object {
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
           >
             Test
           </div>
@@ -159328,7 +167716,7 @@ Object {
             data-sticky-last-left-td="true"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
           >
             Test
           </div>
@@ -159379,24 +167767,26 @@ Object {
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 700px;"
+          style="display: flex; flex: 1 0 auto; min-width: 800px;"
         >
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
             role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
           >
             <div
-              class="flex items-center h-full w-full justify-center ps-2"
+              class="flex items-center h-full"
             >
               <label
                 class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                for="13"
+                for="any_unique_string_for_each_table_13"
               >
                 <input
                   aria-checked="false"
                   aria-label="Checkbox"
                   class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                  id="13"
+                  id="any_unique_string_for_each_table_13"
                   type="checkbox"
                 />
                 <span
@@ -159426,7 +167816,7 @@ Object {
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
           >
             Test
           </div>
@@ -159435,7 +167825,7 @@ Object {
             data-sticky-last-left-td="true"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
           >
             Test
           </div>
@@ -159486,24 +167876,26 @@ Object {
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 700px;"
+          style="display: flex; flex: 1 0 auto; min-width: 800px;"
         >
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
             role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
           >
             <div
-              class="flex items-center h-full w-full justify-center ps-2"
+              class="flex items-center h-full"
             >
               <label
                 class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                for="14"
+                for="any_unique_string_for_each_table_14"
               >
                 <input
                   aria-checked="false"
                   aria-label="Checkbox"
                   class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                  id="14"
+                  id="any_unique_string_for_each_table_14"
                   type="checkbox"
                 />
                 <span
@@ -159533,7 +167925,7 @@ Object {
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
           >
             Test
           </div>
@@ -159542,7 +167934,7 @@ Object {
             data-sticky-last-left-td="true"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
           >
             Test
           </div>
@@ -159593,24 +167985,26 @@ Object {
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 700px;"
+          style="display: flex; flex: 1 0 auto; min-width: 800px;"
         >
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
             role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
           >
             <div
-              class="flex items-center h-full w-full justify-center ps-2"
+              class="flex items-center h-full"
             >
               <label
                 class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                for="15"
+                for="any_unique_string_for_each_table_15"
               >
                 <input
                   aria-checked="false"
                   aria-label="Checkbox"
                   class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                  id="15"
+                  id="any_unique_string_for_each_table_15"
                   type="checkbox"
                 />
                 <span
@@ -159640,7 +168034,7 @@ Object {
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
           >
             Test
           </div>
@@ -159649,7 +168043,7 @@ Object {
             data-sticky-last-left-td="true"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
           >
             Test
           </div>
@@ -159700,24 +168094,26 @@ Object {
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 700px;"
+          style="display: flex; flex: 1 0 auto; min-width: 800px;"
         >
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
             role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
           >
             <div
-              class="flex items-center h-full w-full justify-center ps-2"
+              class="flex items-center h-full"
             >
               <label
                 class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                for="16"
+                for="any_unique_string_for_each_table_16"
               >
                 <input
                   aria-checked="false"
                   aria-label="Checkbox"
                   class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                  id="16"
+                  id="any_unique_string_for_each_table_16"
                   type="checkbox"
                 />
                 <span
@@ -159747,7 +168143,7 @@ Object {
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
           >
             Test
           </div>
@@ -159756,7 +168152,7 @@ Object {
             data-sticky-last-left-td="true"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
           >
             Test
           </div>
@@ -159807,24 +168203,26 @@ Object {
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 700px;"
+          style="display: flex; flex: 1 0 auto; min-width: 800px;"
         >
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
             role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
           >
             <div
-              class="flex items-center h-full w-full justify-center ps-2"
+              class="flex items-center h-full"
             >
               <label
                 class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                for="17"
+                for="any_unique_string_for_each_table_17"
               >
                 <input
                   aria-checked="false"
                   aria-label="Checkbox"
                   class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                  id="17"
+                  id="any_unique_string_for_each_table_17"
                   type="checkbox"
                 />
                 <span
@@ -159854,7 +168252,7 @@ Object {
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
           >
             Test
           </div>
@@ -159863,7 +168261,7 @@ Object {
             data-sticky-last-left-td="true"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
           >
             Test
           </div>
@@ -159914,24 +168312,26 @@ Object {
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 700px;"
+          style="display: flex; flex: 1 0 auto; min-width: 800px;"
         >
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
             role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
           >
             <div
-              class="flex items-center h-full w-full justify-center ps-2"
+              class="flex items-center h-full"
             >
               <label
                 class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                for="18"
+                for="any_unique_string_for_each_table_18"
               >
                 <input
                   aria-checked="false"
                   aria-label="Checkbox"
                   class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                  id="18"
+                  id="any_unique_string_for_each_table_18"
                   type="checkbox"
                 />
                 <span
@@ -159961,7 +168361,7 @@ Object {
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
           >
             Test
           </div>
@@ -159970,7 +168370,7 @@ Object {
             data-sticky-last-left-td="true"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
           >
             Test
           </div>
@@ -160021,24 +168421,26 @@ Object {
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 700px;"
+          style="display: flex; flex: 1 0 auto; min-width: 800px;"
         >
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
             role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
           >
             <div
-              class="flex items-center h-full w-full justify-center ps-2"
+              class="flex items-center h-full"
             >
               <label
                 class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                for="19"
+                for="any_unique_string_for_each_table_19"
               >
                 <input
                   aria-checked="false"
                   aria-label="Checkbox"
                   class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                  id="19"
+                  id="any_unique_string_for_each_table_19"
                   type="checkbox"
                 />
                 <span
@@ -160068,7 +168470,7 @@ Object {
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
           >
             Test
           </div>
@@ -160077,7 +168479,7 @@ Object {
             data-sticky-last-left-td="true"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
           >
             Test
           </div>
@@ -160128,24 +168530,26 @@ Object {
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 700px;"
+          style="display: flex; flex: 1 0 auto; min-width: 800px;"
         >
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
             role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
           >
             <div
-              class="flex items-center h-full w-full justify-center ps-2"
+              class="flex items-center h-full"
             >
               <label
                 class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                for="20"
+                for="any_unique_string_for_each_table_20"
               >
                 <input
                   aria-checked="false"
                   aria-label="Checkbox"
                   class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                  id="20"
+                  id="any_unique_string_for_each_table_20"
                   type="checkbox"
                 />
                 <span
@@ -160175,7 +168579,7 @@ Object {
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
           >
             Test
           </div>
@@ -160184,7 +168588,7 @@ Object {
             data-sticky-last-left-td="true"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
           >
             Test
           </div>
@@ -160235,24 +168639,26 @@ Object {
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 700px;"
+          style="display: flex; flex: 1 0 auto; min-width: 800px;"
         >
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
             role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
           >
             <div
-              class="flex items-center h-full w-full justify-center ps-2"
+              class="flex items-center h-full"
             >
               <label
                 class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                for="21"
+                for="any_unique_string_for_each_table_21"
               >
                 <input
                   aria-checked="false"
                   aria-label="Checkbox"
                   class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                  id="21"
+                  id="any_unique_string_for_each_table_21"
                   type="checkbox"
                 />
                 <span
@@ -160282,7 +168688,7 @@ Object {
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
           >
             Test
           </div>
@@ -160291,7 +168697,7 @@ Object {
             data-sticky-last-left-td="true"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
           >
             Test
           </div>
@@ -160342,24 +168748,26 @@ Object {
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 700px;"
+          style="display: flex; flex: 1 0 auto; min-width: 800px;"
         >
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
             role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
           >
             <div
-              class="flex items-center h-full w-full justify-center ps-2"
+              class="flex items-center h-full"
             >
               <label
                 class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                for="22"
+                for="any_unique_string_for_each_table_22"
               >
                 <input
                   aria-checked="false"
                   aria-label="Checkbox"
                   class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                  id="22"
+                  id="any_unique_string_for_each_table_22"
                   type="checkbox"
                 />
                 <span
@@ -160389,7 +168797,7 @@ Object {
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
           >
             Test
           </div>
@@ -160398,7 +168806,7 @@ Object {
             data-sticky-last-left-td="true"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
           >
             Test
           </div>
@@ -160449,24 +168857,26 @@ Object {
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 700px;"
+          style="display: flex; flex: 1 0 auto; min-width: 800px;"
         >
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
             role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
           >
             <div
-              class="flex items-center h-full w-full justify-center ps-2"
+              class="flex items-center h-full"
             >
               <label
                 class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                for="23"
+                for="any_unique_string_for_each_table_23"
               >
                 <input
                   aria-checked="false"
                   aria-label="Checkbox"
                   class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                  id="23"
+                  id="any_unique_string_for_each_table_23"
                   type="checkbox"
                 />
                 <span
@@ -160496,7 +168906,7 @@ Object {
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
           >
             Test
           </div>
@@ -160505,7 +168915,7 @@ Object {
             data-sticky-last-left-td="true"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
           >
             Test
           </div>
@@ -160556,24 +168966,26 @@ Object {
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 700px;"
+          style="display: flex; flex: 1 0 auto; min-width: 800px;"
         >
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
             role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
           >
             <div
-              class="flex items-center h-full w-full justify-center ps-2"
+              class="flex items-center h-full"
             >
               <label
                 class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                for="24"
+                for="any_unique_string_for_each_table_24"
               >
                 <input
                   aria-checked="false"
                   aria-label="Checkbox"
                   class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                  id="24"
+                  id="any_unique_string_for_each_table_24"
                   type="checkbox"
                 />
                 <span
@@ -160603,7 +169015,7 @@ Object {
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
           >
             Test
           </div>
@@ -160612,7 +169024,7 @@ Object {
             data-sticky-last-left-td="true"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
           >
             Test
           </div>
@@ -160663,24 +169075,26 @@ Object {
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 700px;"
+          style="display: flex; flex: 1 0 auto; min-width: 800px;"
         >
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
             role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
           >
             <div
-              class="flex items-center h-full w-full justify-center ps-2"
+              class="flex items-center h-full"
             >
               <label
                 class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                for="25"
+                for="any_unique_string_for_each_table_25"
               >
                 <input
                   aria-checked="false"
                   aria-label="Checkbox"
                   class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                  id="25"
+                  id="any_unique_string_for_each_table_25"
                   type="checkbox"
                 />
                 <span
@@ -160710,7 +169124,7 @@ Object {
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
           >
             Test
           </div>
@@ -160719,7 +169133,7 @@ Object {
             data-sticky-last-left-td="true"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
           >
             Test
           </div>
@@ -160770,24 +169184,26 @@ Object {
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 700px;"
+          style="display: flex; flex: 1 0 auto; min-width: 800px;"
         >
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
             role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
           >
             <div
-              class="flex items-center h-full w-full justify-center ps-2"
+              class="flex items-center h-full"
             >
               <label
                 class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                for="26"
+                for="any_unique_string_for_each_table_26"
               >
                 <input
                   aria-checked="false"
                   aria-label="Checkbox"
                   class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                  id="26"
+                  id="any_unique_string_for_each_table_26"
                   type="checkbox"
                 />
                 <span
@@ -160817,7 +169233,7 @@ Object {
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
           >
             Test
           </div>
@@ -160826,7 +169242,7 @@ Object {
             data-sticky-last-left-td="true"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
           >
             Test
           </div>
@@ -160877,24 +169293,26 @@ Object {
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 700px;"
+          style="display: flex; flex: 1 0 auto; min-width: 800px;"
         >
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
             role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
           >
             <div
-              class="flex items-center h-full w-full justify-center ps-2"
+              class="flex items-center h-full"
             >
               <label
                 class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                for="27"
+                for="any_unique_string_for_each_table_27"
               >
                 <input
                   aria-checked="false"
                   aria-label="Checkbox"
                   class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                  id="27"
+                  id="any_unique_string_for_each_table_27"
                   type="checkbox"
                 />
                 <span
@@ -160924,7 +169342,7 @@ Object {
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
           >
             Test
           </div>
@@ -160933,7 +169351,7 @@ Object {
             data-sticky-last-left-td="true"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
           >
             Test
           </div>
@@ -160984,24 +169402,26 @@ Object {
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 700px;"
+          style="display: flex; flex: 1 0 auto; min-width: 800px;"
         >
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
             role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
           >
             <div
-              class="flex items-center h-full w-full justify-center ps-2"
+              class="flex items-center h-full"
             >
               <label
                 class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                for="28"
+                for="any_unique_string_for_each_table_28"
               >
                 <input
                   aria-checked="false"
                   aria-label="Checkbox"
                   class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                  id="28"
+                  id="any_unique_string_for_each_table_28"
                   type="checkbox"
                 />
                 <span
@@ -161031,7 +169451,7 @@ Object {
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
           >
             Test
           </div>
@@ -161040,7 +169460,7 @@ Object {
             data-sticky-last-left-td="true"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
           >
             Test
           </div>
@@ -161091,24 +169511,26 @@ Object {
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 700px;"
+          style="display: flex; flex: 1 0 auto; min-width: 800px;"
         >
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
             role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
           >
             <div
-              class="flex items-center h-full w-full justify-center ps-2"
+              class="flex items-center h-full"
             >
               <label
                 class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                for="29"
+                for="any_unique_string_for_each_table_29"
               >
                 <input
                   aria-checked="false"
                   aria-label="Checkbox"
                   class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                  id="29"
+                  id="any_unique_string_for_each_table_29"
                   type="checkbox"
                 />
                 <span
@@ -161138,7 +169560,7 @@ Object {
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
           >
             Test
           </div>
@@ -161147,7 +169569,7 @@ Object {
             data-sticky-last-left-td="true"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
           >
             Test
           </div>
@@ -161198,24 +169620,26 @@ Object {
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 700px;"
+          style="display: flex; flex: 1 0 auto; min-width: 800px;"
         >
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
             role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
           >
             <div
-              class="flex items-center h-full w-full justify-center ps-2"
+              class="flex items-center h-full"
             >
               <label
                 class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                for="30"
+                for="any_unique_string_for_each_table_30"
               >
                 <input
                   aria-checked="false"
                   aria-label="Checkbox"
                   class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                  id="30"
+                  id="any_unique_string_for_each_table_30"
                   type="checkbox"
                 />
                 <span
@@ -161245,7 +169669,7 @@ Object {
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
           >
             Test
           </div>
@@ -161254,7 +169678,7 @@ Object {
             data-sticky-last-left-td="true"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
           >
             Test
           </div>
@@ -161305,24 +169729,26 @@ Object {
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 700px;"
+          style="display: flex; flex: 1 0 auto; min-width: 800px;"
         >
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
             role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
           >
             <div
-              class="flex items-center h-full w-full justify-center ps-2"
+              class="flex items-center h-full"
             >
               <label
                 class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                for="31"
+                for="any_unique_string_for_each_table_31"
               >
                 <input
                   aria-checked="false"
                   aria-label="Checkbox"
                   class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                  id="31"
+                  id="any_unique_string_for_each_table_31"
                   type="checkbox"
                 />
                 <span
@@ -161352,7 +169778,7 @@ Object {
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
           >
             Test
           </div>
@@ -161361,7 +169787,7 @@ Object {
             data-sticky-last-left-td="true"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
           >
             Test
           </div>
@@ -161412,24 +169838,26 @@ Object {
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 700px;"
+          style="display: flex; flex: 1 0 auto; min-width: 800px;"
         >
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
             role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
           >
             <div
-              class="flex items-center h-full w-full justify-center ps-2"
+              class="flex items-center h-full"
             >
               <label
                 class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                for="32"
+                for="any_unique_string_for_each_table_32"
               >
                 <input
                   aria-checked="false"
                   aria-label="Checkbox"
                   class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                  id="32"
+                  id="any_unique_string_for_each_table_32"
                   type="checkbox"
                 />
                 <span
@@ -161459,7 +169887,7 @@ Object {
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
           >
             Test
           </div>
@@ -161468,7 +169896,7 @@ Object {
             data-sticky-last-left-td="true"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
           >
             Test
           </div>
@@ -161519,24 +169947,26 @@ Object {
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 700px;"
+          style="display: flex; flex: 1 0 auto; min-width: 800px;"
         >
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
             role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
           >
             <div
-              class="flex items-center h-full w-full justify-center ps-2"
+              class="flex items-center h-full"
             >
               <label
                 class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                for="33"
+                for="any_unique_string_for_each_table_33"
               >
                 <input
                   aria-checked="false"
                   aria-label="Checkbox"
                   class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                  id="33"
+                  id="any_unique_string_for_each_table_33"
                   type="checkbox"
                 />
                 <span
@@ -161566,7 +169996,7 @@ Object {
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
           >
             Test
           </div>
@@ -161575,7 +170005,7 @@ Object {
             data-sticky-last-left-td="true"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
           >
             Test
           </div>
@@ -161626,24 +170056,26 @@ Object {
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 700px;"
+          style="display: flex; flex: 1 0 auto; min-width: 800px;"
         >
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
             role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
           >
             <div
-              class="flex items-center h-full w-full justify-center ps-2"
+              class="flex items-center h-full"
             >
               <label
                 class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                for="34"
+                for="any_unique_string_for_each_table_34"
               >
                 <input
                   aria-checked="false"
                   aria-label="Checkbox"
                   class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                  id="34"
+                  id="any_unique_string_for_each_table_34"
                   type="checkbox"
                 />
                 <span
@@ -161673,7 +170105,7 @@ Object {
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
           >
             Test
           </div>
@@ -161682,7 +170114,7 @@ Object {
             data-sticky-last-left-td="true"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
           >
             Test
           </div>
@@ -161733,24 +170165,26 @@ Object {
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 700px;"
+          style="display: flex; flex: 1 0 auto; min-width: 800px;"
         >
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
             role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
           >
             <div
-              class="flex items-center h-full w-full justify-center ps-2"
+              class="flex items-center h-full"
             >
               <label
                 class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                for="35"
+                for="any_unique_string_for_each_table_35"
               >
                 <input
                   aria-checked="false"
                   aria-label="Checkbox"
                   class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                  id="35"
+                  id="any_unique_string_for_each_table_35"
                   type="checkbox"
                 />
                 <span
@@ -161780,7 +170214,7 @@ Object {
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
           >
             Test
           </div>
@@ -161789,7 +170223,7 @@ Object {
             data-sticky-last-left-td="true"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
           >
             Test
           </div>
@@ -161840,24 +170274,26 @@ Object {
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 700px;"
+          style="display: flex; flex: 1 0 auto; min-width: 800px;"
         >
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
             role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
           >
             <div
-              class="flex items-center h-full w-full justify-center ps-2"
+              class="flex items-center h-full"
             >
               <label
                 class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                for="36"
+                for="any_unique_string_for_each_table_36"
               >
                 <input
                   aria-checked="false"
                   aria-label="Checkbox"
                   class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                  id="36"
+                  id="any_unique_string_for_each_table_36"
                   type="checkbox"
                 />
                 <span
@@ -161887,7 +170323,7 @@ Object {
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
           >
             Test
           </div>
@@ -161896,7 +170332,7 @@ Object {
             data-sticky-last-left-td="true"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
           >
             Test
           </div>
@@ -161947,24 +170383,26 @@ Object {
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 700px;"
+          style="display: flex; flex: 1 0 auto; min-width: 800px;"
         >
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
             role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
           >
             <div
-              class="flex items-center h-full w-full justify-center ps-2"
+              class="flex items-center h-full"
             >
               <label
                 class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                for="37"
+                for="any_unique_string_for_each_table_37"
               >
                 <input
                   aria-checked="false"
                   aria-label="Checkbox"
                   class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                  id="37"
+                  id="any_unique_string_for_each_table_37"
                   type="checkbox"
                 />
                 <span
@@ -161994,7 +170432,7 @@ Object {
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
           >
             Test
           </div>
@@ -162003,7 +170441,7 @@ Object {
             data-sticky-last-left-td="true"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
           >
             Test
           </div>
@@ -162054,24 +170492,26 @@ Object {
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 700px;"
+          style="display: flex; flex: 1 0 auto; min-width: 800px;"
         >
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
             role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
           >
             <div
-              class="flex items-center h-full w-full justify-center ps-2"
+              class="flex items-center h-full"
             >
               <label
                 class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                for="38"
+                for="any_unique_string_for_each_table_38"
               >
                 <input
                   aria-checked="false"
                   aria-label="Checkbox"
                   class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                  id="38"
+                  id="any_unique_string_for_each_table_38"
                   type="checkbox"
                 />
                 <span
@@ -162101,7 +170541,7 @@ Object {
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
           >
             Test
           </div>
@@ -162110,7 +170550,7 @@ Object {
             data-sticky-last-left-td="true"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
           >
             Test
           </div>
@@ -162161,24 +170601,26 @@ Object {
         <div
           class="relative focus-visible:outline-none flex rounded-moon-s-sm transition-colors text-bulma bg-goku border-goku"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 700px;"
+          style="display: flex; flex: 1 0 auto; min-width: 800px;"
         >
           <div
-            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg bg-goku border-goku ps-2 text-bulma border-t-1 border-t-transparent border-b-1 border-b-transparent"
+            class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+            data-sticky-td="true"
             role="cell"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
           >
             <div
-              class="flex items-center h-full w-full justify-center ps-2"
+              class="flex items-center h-full"
             >
               <label
                 class="relative flex items-center gap-2 text-moon-14 text-bulma cursor-pointer"
-                for="39"
+                for="any_unique_string_for_each_table_39"
               >
                 <input
                   aria-checked="false"
                   aria-label="Checkbox"
                   class="peer appearance-none h-6 w-6 outline-none align-top select-none"
-                  id="39"
+                  id="any_unique_string_for_each_table_39"
                   type="checkbox"
                 />
                 <span
@@ -162208,7 +170650,7 @@ Object {
             class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 text-bulma bg-goku border-goku"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
           >
             Test
           </div>
@@ -162217,7 +170659,7 @@ Object {
             data-sticky-last-left-td="true"
             data-sticky-td="true"
             role="cell"
-            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
           >
             Test
           </div>
@@ -162272,7 +170714,7 @@ Object {
         <div
           class="flex rounded-moon-s-sm sticky"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 700px;"
+          style="display: flex; flex: 1 0 auto; min-width: 800px;"
         >
           <div
             class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
@@ -162291,7 +170733,6 @@ Object {
           <div
             class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
             colspan="1"
-            data-sticky-last-left-td="true"
             data-sticky-td="true"
             role="columnheader"
             style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 150px;"
@@ -162303,6 +170744,21 @@ Object {
               style="cursor: col-resize;"
             />
           </div>
+          <div
+            class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+            colspan="1"
+            data-sticky-last-left-td="true"
+            data-sticky-td="true"
+            role="columnheader"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 300px;"
+          >
+            <div
+              class="resizer inline-block cursor-ew-resize w-2 h-full absolute top-0 end-0 z-1 after:end-0 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%]"
+              draggable="false"
+              role="separator"
+              style="cursor: col-resize;"
+            />
+          </div>
           <div
             class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
             colspan="1"
@@ -162374,15 +170830,29 @@ Object {
         <div
           class="flex rounded-moon-s-sm sticky"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 700px;"
+          style="display: flex; flex: 1 0 auto; min-width: 800px;"
         >
+          <div
+            class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
+            colspan="1"
+            data-sticky-td="true"
+            role="columnheader"
+            style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+          >
+            <div
+              class="resizer inline-block cursor-ew-resize w-2 h-full absolute top-0 end-0 z-1 after:end-0 after:content-none after:absolute after:w-px after:h-[70%] after:bottom-[15%]"
+              draggable="false"
+              role="separator"
+              style="cursor: col-resize;"
+            />
+          </div>
           <div
             class="relative text-start justify-between font-medium text-moon-14 px-3 py-2 bg-gohan"
             colspan="2"
             data-sticky-last-left-td="true"
             data-sticky-td="true"
             role="columnheader"
-            style="box-sizing: border-box; flex: 300 0 auto; min-width: 200px; width: 300px; position: sticky; z-index: 3; left: 0px;"
+            style="box-sizing: border-box; flex: 300 0 auto; min-width: 200px; width: 300px; position: sticky; z-index: 3; left: 150px;"
           >
             Name footer
             <div
diff --git a/next-docs/public/examples/table/__tests__/index.test.tsx b/next-docs/public/examples/table/__tests__/index.test.tsx
index 5b2d4fda34..781a224eda 100644
--- a/next-docs/public/examples/table/__tests__/index.test.tsx
+++ b/next-docs/public/examples/table/__tests__/index.test.tsx
@@ -11,6 +11,7 @@ import ClickableRows from '../ClickableRows';
 import SelectableRows from '../SelectableRows';
 import SelectableCheckboxes from '../SelectableCheckboxes';
 import CustomColors from '../CustomColors';
+import ExpandableCheckboxes from '../ExpandableCheckboxes';
 import ExpandedRows from '../ExpandedRows';
 import ExpandedWithModals from '../ExpandedWithModals';
 import Sorting from '../Sorting';
@@ -76,6 +77,10 @@ describe('Table', () => {
     const tree = render(<ExpandedWithModals />);
     expect(tree).toMatchSnapshot();
   });
+  it('renders ExpandableCheckboxes', () => {
+    const tree = render(<ExpandableCheckboxes />);
+    expect(tree).toMatchSnapshot();
+  });
   it('renders CustomContent', () => {
     const tree = render(<CustomContent />);
     expect(tree).toMatchSnapshot();
@@ -160,6 +165,10 @@ describe('Table in RTL', () => {
     const tree = render(withRtl(<ExpandedWithModals />));
     expect(tree).toMatchSnapshot();
   });
+  it('renders ExpandableCheckboxes', () => {
+    const tree = render(withRtl(<ExpandableCheckboxes />));
+    expect(tree).toMatchSnapshot();
+  });
   it('renders CustomContent', () => {
     const tree = render(withRtl(<CustomContent />));
     expect(tree).toMatchSnapshot();
diff --git a/workspaces/tables/src/components/BodyTR.tsx b/workspaces/tables/src/components/BodyTR.tsx
index e9150d5670..0e73b6977b 100644
--- a/workspaces/tables/src/components/BodyTR.tsx
+++ b/workspaces/tables/src/components/BodyTR.tsx
@@ -39,7 +39,7 @@ const BodyTR = forwardRef<HTMLDivElement, BodyTRProps>(
       )}
       onMouseEnter={onHoverToggle ? () => onHoverToggle(true) : null}
       onMouseLeave={onHoverToggle ? () => onHoverToggle(false) : null}
-      onClick={() => (onClick ? onClick() : null)}
+      onClick={(e) => (onClick ? onClick(e.target) : null)}
     >
       {children}
     </div>
diff --git a/workspaces/tables/src/components/TH.tsx b/workspaces/tables/src/components/TH.tsx
index a907405e70..0c81b51f68 100644
--- a/workspaces/tables/src/components/TH.tsx
+++ b/workspaces/tables/src/components/TH.tsx
@@ -16,6 +16,7 @@ const TH = forwardRef<HTMLDivElement, THProps>(
       variant,
       rowSize,
       isCellBorder,
+      onClick,
     },
     ref
   ) => (
@@ -32,6 +33,7 @@ const TH = forwardRef<HTMLDivElement, THProps>(
         stickySide === 'right' &&
           'before:absolute before:w-px before:bg-beerus before:h-[70%] before:bottom-[15%] before:start-0'
       )}
+      onClick={onClick}
     >
       {children}
     </div>
diff --git a/workspaces/tables/src/components/Table.tsx b/workspaces/tables/src/components/Table.tsx
index 6df369d4d7..314dedba9e 100644
--- a/workspaces/tables/src/components/Table.tsx
+++ b/workspaces/tables/src/components/Table.tsx
@@ -14,6 +14,7 @@ import {
   UseResizeColumnsColumnProps,
   UseSortByColumnProps,
   TableOptions,
+  UseExpandedRowProps,
 } from 'react-table';
 import { useSticky } from 'react-table-sticky';
 import Body from './Body';
@@ -75,6 +76,7 @@ const Table = ({
     headerGroups,
     footerGroups,
     rows,
+    rowsById,
     prepareRow,
     visibleColumns,
     toggleAllRowsExpanded,
@@ -101,6 +103,8 @@ const Table = ({
   const { scrollState, handleScroll } = useScrollState(tableRef);
   const [selectedRows, setSelectedRows] = useState<Row<{}>[]>([]);
 
+  let updateRowSelectState: (() => React.Dispatch<React.SetStateAction<{ [key: string]: boolean }>>) | undefined = undefined;
+
   useEffect(() => {
     if (expandedByDefault === undefined || !data || !data.length) return;
     toggleAllRowsExpanded(expandedByDefault);
@@ -112,8 +116,8 @@ const Table = ({
     setSelectedRows(
       rows?.length
         ? rows.filter((row: Row<{ isSelected?: boolean }>) => {
-            return row.original?.isSelected;
-          })
+          return row.original?.isSelected;
+        })
         : []
     );
   }, []);
@@ -139,16 +143,35 @@ const Table = ({
         stickySide={
           // @ts-ignore
           (column.sticky === 'left' || column.parent?.sticky === 'left') &&
-          scrollState.scrolledToRight
+            scrollState.scrolledToRight
             ? 'left'
             : // @ts-ignore
             column.sticky === 'right' || column.parent?.sticky === 'right'
-            ? 'right'
-            : ''
+              ? 'right'
+              : ''
         }
         isLastColumn={isLastColumn}
         rowSize={rowSize}
         isCellBorder={isCellBorder}
+        onClick={(e) => {
+          const isTargetCheckbox = (e.target as HTMLElement).closest('label[for$="root"]');
+          if (isTargetCheckbox !== null) {
+            const checkboxInput = isTargetCheckbox?.querySelector('input[type="checkbox"]') as HTMLInputElement;
+            if (checkboxInput?.checked) {
+              setSelectedRows([]);
+              updateRowSelectState && updateRowSelectState()({});
+            } else {
+              setSelectedRows(Object.values(rowsById));
+              updateRowSelectState && updateRowSelectState()(
+                Object.keys(rowsById)
+                  .reduce((acc: { [key: string]: boolean }, item: string) => {
+                    acc[item] = true;
+                    return acc;
+                  }, {})
+              );
+            }
+          }
+        }}
       >
         {column.render('Header')}
         <div
@@ -176,8 +199,8 @@ const Table = ({
             ? 'left'
             : // @ts-ignore
             column.sticky === 'right' && scrollState.scrolledToLeft
-            ? 'right'
-            : ''
+              ? 'right'
+              : ''
         }
         rowSize={rowSize}
         isCellBorder={isCellBorder}
@@ -196,6 +219,113 @@ const Table = ({
     );
   };
 
+  const setForceUpdateRowSelectedState = (callback: () => React.Dispatch<React.SetStateAction<{ [key: string]: boolean }>>) => {
+    updateRowSelectState = callback;
+  }
+
+  const selectCheckableRow = (selectedRow: any, target?: HTMLElement) => {
+    const row = selectedRow as Row<{}>;
+    const xRow = selectedRow as UseExpandedRowProps<{}>
+    const isTargetCheckbox = target && target?.closest(`label[for$="${row.id}"]`);
+
+    if (isTargetCheckbox === null) {
+      return;
+    }
+
+    let alreadySelectedRows = [...selectedRows];
+    const alreadySelectedRow = alreadySelectedRows.filter(
+      (selectedRow) => row.id === selectedRow.id
+    )[0];
+
+    if (xRow.canExpand) {
+      /** Handling an expandable node */
+      const selectedIndexes = alreadySelectedRows.map((item: Row<{}>) => item.id);
+      const allSelected = Object.keys(rowsById)
+        .filter((id) => id.indexOf(row.id) === 0)
+        .every((id) => selectedIndexes.indexOf(id) > -1);
+
+      if (alreadySelectedRow && allSelected) {
+        /** Removing the selected row */
+        alreadySelectedRows = alreadySelectedRows.filter(({ id }) => id.indexOf(row.id) !== 0);
+      } else {
+        /** Appending the selected row */
+        alreadySelectedRows = Object.values(rowsById)
+          .reduce((acc: Row<{}>[], item: Row<{}>) => {
+            if (item.id.indexOf(row.id) === 0
+              && selectedIndexes.indexOf(item.id) === -1
+            )
+              acc.push(item);
+            return acc;
+          }, alreadySelectedRows);
+      }
+    } else {
+      /** Handling a simple row */
+      if (alreadySelectedRow) {
+        alreadySelectedRows = alreadySelectedRows.filter(
+          (selectedRow) => row.id !== selectedRow.id
+        );
+      } else {
+        alreadySelectedRows.push(row);
+      }
+    }
+
+    /** Rising up checking wether a branch is completely checked/unchecked after an item toggle */
+    if (selectable && alreadySelectedRows) {
+      let depth = xRow.depth;
+      while (depth > 0) {
+        const mask = row.id.split('.').slice(0, depth).join('.');
+        const branchRowsAtSpecifiedDepth = alreadySelectedRows
+          .filter(({ id }) => id.split('.').length === (depth + 1) && id.indexOf(mask) === 0 && id !== mask);
+
+        const areThereAnySelectedRowsAtThisBranch = branchRowsAtSpecifiedDepth
+          .some(({ id }) => id.indexOf(mask) === 0 && id !== mask);
+
+        if (!areThereAnySelectedRowsAtThisBranch) {
+          alreadySelectedRows = alreadySelectedRows.filter(({ id }) => id !== mask);
+        } else {
+          const isAllRowsSelectedAtThisBranch = branchRowsAtSpecifiedDepth.every(Boolean);
+
+          if (isAllRowsSelectedAtThisBranch) {
+            const isNodeRowAlreadyAffected = alreadySelectedRows.filter(({ id }) => id === mask).length;
+            if (!isNodeRowAlreadyAffected) {
+              alreadySelectedRows.push(rowsById[mask]);
+            }
+          }
+        }
+        depth--;
+      }
+    }
+
+    /** Toggling the "hover" state for the affected rows */
+    updateRowSelectState && updateRowSelectState()(
+      alreadySelectedRows.reduce((acc: { [key: string]: boolean }, item) => {
+        acc[item.id] = true
+        return acc;
+      }, {}) || {}
+    );
+
+    /** Toggling state for the affected checkboxes */
+    setSelectedRows(alreadySelectedRows);
+  }
+
+  const selectCommonRow = (selectedRow: any, target?: HTMLElement) => {
+    const row = selectedRow as Row<{}>;
+    let alreadySelectedRows = [...selectedRows];
+    const alreadySelectedRow = alreadySelectedRows.filter(
+      (selectedRow) => row.id === selectedRow.id
+    )[0];
+
+    if (alreadySelectedRow) {
+      alreadySelectedRows = alreadySelectedRows.filter(
+        (selectedRow) => row.id !== selectedRow.id
+      );
+    } else {
+      alreadySelectedRows.push(row);
+    }
+
+    setSelectedRows(alreadySelectedRows);
+  }
+
   const renderTableComponent = () => (
     <TableWrapper
       reactTableProps={{ ...getTableProps() }}
@@ -219,7 +349,7 @@ const Table = ({
         selectable={useCheckbox}
         headerBackgroundColor={headerBackgroundColor}
       >
-        {headerGroups.map((headerGroup: HeaderGroup<object>) => (
+        {headerGroups.map((headerGroup: HeaderGroup<object>, index) => (
           <HeaderTR
             reactTableProps={{ ...headerGroup.getHeaderGroupProps() }}
             key={headerGroup.getHeaderGroupProps().key}
@@ -239,48 +369,37 @@ const Table = ({
       <Body reactTableProps={{ ...getTableBodyProps() }} rowGap={rowGap}>
         {variant === 'calendar'
           ? renderSpanRows({
-              rows,
-              prepareRow,
-              getOnRowClickHandler,
-              evenRowBackgroundColor,
-              defaultRowBackgroundColor,
-              rowSpanHeaders,
-              selectable,
-              useCheckbox,
-              rowSize,
-              isCellBorder,
-            })
+            rows,
+            prepareRow,
+            getOnRowClickHandler,
+            evenRowBackgroundColor,
+            defaultRowBackgroundColor,
+            rowSpanHeaders,
+            selectable,
+            useCheckbox,
+            rowSize,
+            isCellBorder,
+          })
           : renderRows({
-              rows,
-              prepareRow,
-              getOnRowClickHandler,
-              getOnRowSelectHandler: !selectable
-                ? undefined
-                : (row) => () => {
-                    let alreadySelectedRows = [...selectedRows];
-                    const alreadySelectedRow = alreadySelectedRows.filter(
-                      (selectedRow) => row.id === selectedRow.id
-                    )[0];
-
-                    if (alreadySelectedRow) {
-                      alreadySelectedRows = alreadySelectedRows.filter(
-                        (selectedRow) => row.id !== selectedRow.id
-                      );
-                    } else {
-                      alreadySelectedRows.push(row);
-                    }
+            rows,
+            prepareRow,
+            getOnRowClickHandler,
+            getOnRowSelectHandler: !selectable
+              ? undefined
+              : useCheckbox
+                ? (row) => selectCheckableRow
+                : (row) => selectCommonRow,
 
-                    setSelectedRows(alreadySelectedRows);
-                  },
-              evenRowBackgroundColor,
-              defaultRowBackgroundColor,
-              renderRowSubComponent,
-              selectable,
-              useCheckbox,
-              rowSize,
-              isCellBorder,
-              textClip,
-            })}
+            evenRowBackgroundColor,
+            defaultRowBackgroundColor,
+            renderRowSubComponent,
+            setForceUpdateRowSelectedState,
+            selectable,
+            useCheckbox,
+            rowSize,
+            isCellBorder,
+            textClip,
+          })}
       </Body>
 
       {withFooter && (
diff --git a/workspaces/tables/src/private/types/RenderRowsProps.ts b/workspaces/tables/src/private/types/RenderRowsProps.ts
index 52cd6a8a20..efab7c9f24 100644
--- a/workspaces/tables/src/private/types/RenderRowsProps.ts
+++ b/workspaces/tables/src/private/types/RenderRowsProps.ts
@@ -13,8 +13,9 @@ type RenderRowsProps<D extends object = {}> = {
   ) => ((row: Row<D>) => void | (() => void)) | undefined;
   getOnRowSelectHandler?: (
     row: Row<D>
-  ) => ((row: Row<D>) => void | (() => void)) | undefined;
+  ) => ((row: Row<D>, target?: HTMLElement) => void | (() => void)) | undefined;
   renderRowSubComponent?: (props: RowSubComponentProps) => JSX.Element;
+  setForceUpdateRowSelectedState?: (callback: () => React.Dispatch<React.SetStateAction<{[key: string]: boolean;}>>) => void;
   selectable?: boolean;
   useCheckbox?: boolean;
   rowSize?: RowSizes;
diff --git a/workspaces/tables/src/private/types/THProps.ts b/workspaces/tables/src/private/types/THProps.ts
index 3020628e92..cd9858e2f1 100644
--- a/workspaces/tables/src/private/types/THProps.ts
+++ b/workspaces/tables/src/private/types/THProps.ts
@@ -10,6 +10,7 @@ type THProps = {
   variant?: TableVariant;
   rowSize?: RowSizes;
   isCellBorder?: boolean;
+  onClick?: (e: any) => void;
 };
 
 export default THProps;
diff --git a/workspaces/tables/src/private/utils/renderRows.tsx b/workspaces/tables/src/private/utils/renderRows.tsx
index bc0a588060..ac137228bd 100644
--- a/workspaces/tables/src/private/utils/renderRows.tsx
+++ b/workspaces/tables/src/private/utils/renderRows.tsx
@@ -1,5 +1,4 @@
-import React, { Fragment, useState } from 'react';
-import { Checkbox } from '@heathmont/moon-core-tw';
+import React, { Fragment, useEffect, useState } from 'react';
 import type { Cell, Row, UseExpandedRowProps } from 'react-table';
 import BodyTR from '../../components/BodyTR';
 import TD from '../../components/TD';
@@ -13,6 +12,7 @@ const renderRows = ({
   getOnRowClickHandler,
   getOnRowSelectHandler,
   renderRowSubComponent,
+  setForceUpdateRowSelectedState,
   selectable,
   useCheckbox,
   rowSize,
@@ -24,7 +24,12 @@ const renderRows = ({
     {}
   );
 
-  if (!rows) return;
+  useEffect(() => {
+    selectable
+    && useCheckbox
+    && setForceUpdateRowSelectedState
+    && setForceUpdateRowSelectedState(() => setSelectedRows);
+  });
 
   return rows.map(
     (
@@ -51,7 +56,7 @@ const renderRows = ({
       const fontColor = row.original?.fontColor;
       const isLastNestedRow = rowId.length > nextRowId.length;
       const expandedRow = row as unknown as UseExpandedRowProps<{}>;
-      const resolveRowClick = () => {
+      const resolveRowClick = (target: HTMLElement) => {
         const invokeClickHandler = () => {
           const clickHandlerInvoked = getOnRowClickHandler
             ? getOnRowClickHandler(row)
@@ -62,12 +67,14 @@ const renderRows = ({
           const selectHandlerInvoked = getOnRowSelectHandler
             ? getOnRowSelectHandler(row)
             : undefined;
-          if (selectHandlerInvoked) selectHandlerInvoked(row);
-          setSelectedRows({
-            ...selectedRows,
-            [`${row.id}-${rowProps.key}`]:
-              !selectedRows[`${row.id}-${rowProps.key}`],
-          });
+
+          if (selectHandlerInvoked) selectHandlerInvoked(row, target);
+          if (!selectable || !useCheckbox) {
+            setSelectedRows({
+              ...selectedRows,
+              [row.id]: !selectedRows[row.id],
+            });
+          }
         };
 
         if (!selectable && getOnRowClickHandler) {
@@ -90,54 +97,28 @@ const renderRows = ({
             hasChildren={expandedRow.canExpand}
             hasParent={!!expandedRow.depth}
             isLastNestedRow={isLastNestedRow}
-            isSelected={selectedRows[`${row.id}-${rowProps.key}`]}
-            isHovered={hoveredRow === `${row.id}-${rowProps.key}`}
+            isSelected={selectedRows[row.id] === true}
+            isHovered={hoveredRow === row.id}
             backgroundColor={backgroundColor}
             fontColor={fontColor}
             onHoverToggle={
               getOnRowClickHandler || getOnRowSelectHandler
                 ? (hover?: boolean) =>
-                    setHoveredRow(hover ? `${row.id}-${rowProps.key}` : '')
+                    setHoveredRow(hover ? row.id : '')
                 : undefined
             }
-            onClick={() => resolveRowClick()}
+            onClick={(target: HTMLElement) => resolveRowClick(target)}
           >
-            {useCheckbox && (
-              <TD
-                selectable={true}
-                isExpanded={expandedRow.isExpanded}
-                hasParent={!!expandedRow.depth}
-                backgroundColor={backgroundColor}
-                fontColor={fontColor}
-                isSelected={selectedRows[`${row.id}-${rowProps.key}`]}
-                isFirstColumn={true}
-                isHovered={hoveredRow === `${row.id}-${rowProps.key}`}
-                // @ts-ignore
-                stickySide={row.cells[0].parent?.sticky ? 'left' : ''}
-                rowSize={rowSize}
-                isCellBorder={isCellBorder}
-                role="cell"
-              >
-                <div className="flex items-center h-full w-full justify-center ps-2">
-                  <Checkbox
-                    id={row.id}
-                    checked={selectedRows[`${row.id}-${rowProps.key}`]}
-                    onClick={(e: any) => e.stopPropagation()}
-                  />
-                </div>
-              </TD>
-            )}
-
             {row.cells.map((cell: Cell<{}>, index) => (
               <TD
                 key={cell.getCellProps().key}
                 reactTableProps={{ ...cell.getCellProps() }}
                 // @ts-ignore
                 stickySide={cell?.column?.parent?.sticky}
-                isFirstColumn={!useCheckbox && index === 0}
+                isFirstColumn={index === 0}
                 isLastColumn={index === row.cells.length - 1}
-                isSelected={selectedRows[`${row.id}-${rowProps.key}`]}
-                isHovered={hoveredRow === `${row.id}-${rowProps.key}`}
+                isSelected={selectedRows[row.id]}
+                isHovered={hoveredRow === row.id}
                 backgroundColor={backgroundColor}
                 fontColor={fontColor}
                 rowSize={rowSize}

From 87b1dc081cfed7a5ace33bdeb79df98f89fa7cdd Mon Sep 17 00:00:00 2001
From: Dmytro Kireiev <dmytro.kireiev@gmail.com>
Date: Wed, 18 Oct 2023 17:29:13 +0300
Subject: [PATCH 3/7] fix: Input and InsetInput styles [MDS-642] (#2438)

---
 .../__snapshots__/index.test.tsx.snap         | 208 +++++++-------
 .../__snapshots__/index.test.tsx.snap         |  88 +++---
 .../__snapshots__/index.test.tsx.snap         | 272 +++++++++---------
 .../__snapshots__/index.test.tsx.snap         | 136 ++++-----
 .../public/examples/insetInput/Default.tsx    |   2 +-
 .../__snapshots__/index.test.tsx.snap         | 228 +++++++--------
 .../__snapshots__/index.test.tsx.snap         |  72 ++---
 workspaces/core/src/input/Input.tsx           |  31 +-
 .../input/private/utils/getBorderRadius.ts    |  13 -
 .../src/input/private/utils/getSizeStyles.ts  |  10 +-
 .../src/input/private/utils/getTypeStyles.ts  |  18 ++
 workspaces/core/src/insetInput/InsetInput.tsx |  30 +-
 12 files changed, 552 insertions(+), 556 deletions(-)
 delete mode 100644 workspaces/core/src/input/private/utils/getBorderRadius.ts
 create mode 100644 workspaces/core/src/input/private/utils/getTypeStyles.ts

diff --git a/next-docs/public/examples/combobox/__tests__/__snapshots__/index.test.tsx.snap b/next-docs/public/examples/combobox/__tests__/__snapshots__/index.test.tsx.snap
index b46d1af74d..675bc98288 100644
--- a/next-docs/public/examples/combobox/__tests__/__snapshots__/index.test.tsx.snap
+++ b/next-docs/public/examples/combobox/__tests__/__snapshots__/index.test.tsx.snap
@@ -21,7 +21,7 @@ Object {
               <input
                 aria-autocomplete="list"
                 aria-expanded="false"
-                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
                 data-headlessui-state=""
                 id="headlessui-combobox-input-:r24:"
                 placeholder="Choose a name..."
@@ -72,7 +72,7 @@ Object {
               <input
                 aria-autocomplete="list"
                 aria-expanded="false"
-                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
                 data-headlessui-state=""
                 id="headlessui-combobox-input-:r26:"
                 placeholder="Choose a name..."
@@ -134,7 +134,7 @@ Object {
             <input
               aria-autocomplete="list"
               aria-expanded="false"
-              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
               data-headlessui-state=""
               id="headlessui-combobox-input-:r24:"
               placeholder="Choose a name..."
@@ -185,7 +185,7 @@ Object {
             <input
               aria-autocomplete="list"
               aria-expanded="false"
-              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
               data-headlessui-state=""
               id="headlessui-combobox-input-:r26:"
               placeholder="Choose a name..."
@@ -307,7 +307,7 @@ Object {
                 <input
                   aria-autocomplete="list"
                   aria-expanded="false"
-                  class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none pt-3 input-xl-dt-label text-moon-16 leading-5"
+                  class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none pt-3 input-xl-dt-label text-moon-16 leading-5"
                   data-headlessui-state=""
                   id="headlessui-combobox-input-:r29:"
                   placeholder="Choose an option"
@@ -316,7 +316,7 @@ Object {
                   value=""
                 />
                 <label
-                  class="absolute text-moon-12 text-trunks z-[1] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
+                  class="absolute text-moon-12 text-trunks z-[2] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
                 >
                   Select label
                 </label>
@@ -378,7 +378,7 @@ Object {
               <input
                 aria-autocomplete="list"
                 aria-expanded="false"
-                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none pt-3 input-xl-dt-label text-moon-16 leading-5"
+                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none pt-3 input-xl-dt-label text-moon-16 leading-5"
                 data-headlessui-state=""
                 id="headlessui-combobox-input-:r29:"
                 placeholder="Choose an option"
@@ -387,7 +387,7 @@ Object {
                 value=""
               />
               <label
-                class="absolute text-moon-12 text-trunks z-[1] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
+                class="absolute text-moon-12 text-trunks z-[2] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
               >
                 Select label
               </label>
@@ -506,7 +506,7 @@ Object {
                 <input
                   aria-autocomplete="list"
                   aria-expanded="false"
-                  class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none pt-3 input-xl-dt-label text-moon-16 leading-5"
+                  class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none pt-3 input-xl-dt-label text-moon-16 leading-5"
                   data-headlessui-state=""
                   id="headlessui-combobox-input-:r2c:"
                   placeholder="Choose an option"
@@ -515,7 +515,7 @@ Object {
                   value=""
                 />
                 <label
-                  class="absolute text-moon-12 text-trunks z-[1] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
+                  class="absolute text-moon-12 text-trunks z-[2] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
                 >
                   Label
                 </label>
@@ -577,7 +577,7 @@ Object {
               <input
                 aria-autocomplete="list"
                 aria-expanded="false"
-                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none pt-3 input-xl-dt-label text-moon-16 leading-5"
+                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none pt-3 input-xl-dt-label text-moon-16 leading-5"
                 data-headlessui-state=""
                 id="headlessui-combobox-input-:r2c:"
                 placeholder="Choose an option"
@@ -586,7 +586,7 @@ Object {
                 value=""
               />
               <label
-                class="absolute text-moon-12 text-trunks z-[1] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
+                class="absolute text-moon-12 text-trunks z-[2] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
               >
                 Label
               </label>
@@ -705,7 +705,7 @@ Object {
                 <input
                   aria-autocomplete="list"
                   aria-expanded="false"
-                  class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none pt-3 input-xl-dt-label text-moon-16 leading-5"
+                  class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none pt-3 input-xl-dt-label text-moon-16 leading-5"
                   data-headlessui-state=""
                   id="headlessui-combobox-input-:r2f:"
                   placeholder="Choose an option"
@@ -714,7 +714,7 @@ Object {
                   value=""
                 />
                 <label
-                  class="absolute text-moon-12 text-trunks z-[1] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
+                  class="absolute text-moon-12 text-trunks z-[2] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
                 >
                   Error
                 </label>
@@ -765,7 +765,7 @@ Object {
                 <input
                   aria-autocomplete="list"
                   aria-expanded="false"
-                  class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err opacity-60 cursor-not-allowed flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none pt-3 input-xl-dt-label text-moon-16 leading-5"
+                  class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared opacity-60 cursor-not-allowed flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none pt-3 input-xl-dt-label text-moon-16 leading-5"
                   data-headlessui-state="disabled"
                   disabled=""
                   id="headlessui-combobox-input-:r2i:"
@@ -775,7 +775,7 @@ Object {
                   value=""
                 />
                 <label
-                  class="absolute text-moon-12 text-trunks z-[1] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
+                  class="absolute text-moon-12 text-trunks z-[2] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
                 >
                   Disabled
                 </label>
@@ -828,7 +828,7 @@ Object {
                   aria-autocomplete="list"
                   aria-expanded="false"
                   aria-label="Without placeholder"
-                  class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none input-xl pt-3 input-xl-dt-label text-moon-16 leading-5"
+                  class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none input-xl pt-3 input-xl-dt-label text-moon-16 leading-5"
                   data-headlessui-state=""
                   id="headlessui-combobox-input-:r2l:"
                   placeholder=""
@@ -837,7 +837,7 @@ Object {
                   value=""
                 />
                 <label
-                  class="absolute text-moon-12 text-trunks z-[1] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
+                  class="absolute text-moon-12 text-trunks z-[2] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
                 >
                   Without placeholder (nullable)
                 </label>
@@ -888,7 +888,7 @@ Object {
                 <input
                   aria-autocomplete="list"
                   aria-expanded="false"
-                  class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none pt-3 input-xl-dt-label text-moon-16 leading-5"
+                  class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none pt-3 input-xl-dt-label text-moon-16 leading-5"
                   data-headlessui-state=""
                   id="headlessui-combobox-input-:r2o:"
                   placeholder="Choose an option"
@@ -897,7 +897,7 @@ Object {
                   value=""
                 />
                 <label
-                  class="absolute text-moon-12 text-trunks z-[1] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
+                  class="absolute text-moon-12 text-trunks z-[2] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
                 >
                   List options width
                 </label>
@@ -959,7 +959,7 @@ Object {
               <input
                 aria-autocomplete="list"
                 aria-expanded="false"
-                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none pt-3 input-xl-dt-label text-moon-16 leading-5"
+                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none pt-3 input-xl-dt-label text-moon-16 leading-5"
                 data-headlessui-state=""
                 id="headlessui-combobox-input-:r2f:"
                 placeholder="Choose an option"
@@ -968,7 +968,7 @@ Object {
                 value=""
               />
               <label
-                class="absolute text-moon-12 text-trunks z-[1] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
+                class="absolute text-moon-12 text-trunks z-[2] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
               >
                 Error
               </label>
@@ -1019,7 +1019,7 @@ Object {
               <input
                 aria-autocomplete="list"
                 aria-expanded="false"
-                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err opacity-60 cursor-not-allowed flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none pt-3 input-xl-dt-label text-moon-16 leading-5"
+                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared opacity-60 cursor-not-allowed flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none pt-3 input-xl-dt-label text-moon-16 leading-5"
                 data-headlessui-state="disabled"
                 disabled=""
                 id="headlessui-combobox-input-:r2i:"
@@ -1029,7 +1029,7 @@ Object {
                 value=""
               />
               <label
-                class="absolute text-moon-12 text-trunks z-[1] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
+                class="absolute text-moon-12 text-trunks z-[2] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
               >
                 Disabled
               </label>
@@ -1082,7 +1082,7 @@ Object {
                 aria-autocomplete="list"
                 aria-expanded="false"
                 aria-label="Without placeholder"
-                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none input-xl pt-3 input-xl-dt-label text-moon-16 leading-5"
+                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none input-xl pt-3 input-xl-dt-label text-moon-16 leading-5"
                 data-headlessui-state=""
                 id="headlessui-combobox-input-:r2l:"
                 placeholder=""
@@ -1091,7 +1091,7 @@ Object {
                 value=""
               />
               <label
-                class="absolute text-moon-12 text-trunks z-[1] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
+                class="absolute text-moon-12 text-trunks z-[2] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
               >
                 Without placeholder (nullable)
               </label>
@@ -1142,7 +1142,7 @@ Object {
               <input
                 aria-autocomplete="list"
                 aria-expanded="false"
-                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none pt-3 input-xl-dt-label text-moon-16 leading-5"
+                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none pt-3 input-xl-dt-label text-moon-16 leading-5"
                 data-headlessui-state=""
                 id="headlessui-combobox-input-:r2o:"
                 placeholder="Choose an option"
@@ -1151,7 +1151,7 @@ Object {
                 value=""
               />
               <label
-                class="absolute text-moon-12 text-trunks z-[1] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
+                class="absolute text-moon-12 text-trunks z-[2] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
               >
                 List options width
               </label>
@@ -1267,7 +1267,7 @@ Object {
               <input
                 aria-autocomplete="list"
                 aria-expanded="false"
-                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
                 data-headlessui-state=""
                 id="headlessui-combobox-input-:r37:"
                 placeholder="Choose an option"
@@ -1329,7 +1329,7 @@ Object {
             <input
               aria-autocomplete="list"
               aria-expanded="false"
-              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
               data-headlessui-state=""
               id="headlessui-combobox-input-:r37:"
               placeholder="Choose an option"
@@ -1455,7 +1455,7 @@ Object {
               <input
                 aria-autocomplete="list"
                 aria-expanded="false"
-                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-14 leading-4"
+                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-14 leading-4"
                 data-headlessui-state=""
                 id="headlessui-combobox-input-:r2s:"
                 placeholder="Choose an option"
@@ -1513,7 +1513,7 @@ Object {
               <input
                 aria-autocomplete="list"
                 aria-expanded="false"
-                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
                 data-headlessui-state=""
                 id="headlessui-combobox-input-:r30:"
                 placeholder="Choose an option"
@@ -1571,7 +1571,7 @@ Object {
               <input
                 aria-autocomplete="list"
                 aria-expanded="false"
-                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-18 leading-5"
+                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-18 leading-5"
                 data-headlessui-state=""
                 id="headlessui-combobox-input-:r34:"
                 placeholder="Choose an option"
@@ -1640,7 +1640,7 @@ Object {
             <input
               aria-autocomplete="list"
               aria-expanded="false"
-              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-14 leading-4"
+              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-14 leading-4"
               data-headlessui-state=""
               id="headlessui-combobox-input-:r2s:"
               placeholder="Choose an option"
@@ -1698,7 +1698,7 @@ Object {
             <input
               aria-autocomplete="list"
               aria-expanded="false"
-              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
               data-headlessui-state=""
               id="headlessui-combobox-input-:r30:"
               placeholder="Choose an option"
@@ -1756,7 +1756,7 @@ Object {
             <input
               aria-autocomplete="list"
               aria-expanded="false"
-              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-18 leading-5"
+              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-18 leading-5"
               data-headlessui-state=""
               id="headlessui-combobox-input-:r34:"
               placeholder="Choose an option"
@@ -1885,7 +1885,7 @@ Object {
                 <input
                   aria-autocomplete="list"
                   aria-expanded="false"
-                  class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-14 leading-4"
+                  class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-14 leading-4"
                   data-headlessui-state=""
                   id="headlessui-combobox-input-:r3b:"
                   placeholder="Choose an option"
@@ -1943,7 +1943,7 @@ Object {
                 <input
                   aria-autocomplete="list"
                   aria-expanded="false"
-                  class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+                  class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
                   data-headlessui-state=""
                   id="headlessui-combobox-input-:r3f:"
                   placeholder="Choose an option"
@@ -2001,7 +2001,7 @@ Object {
                 <input
                   aria-autocomplete="list"
                   aria-expanded="false"
-                  class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-18 leading-5"
+                  class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-18 leading-5"
                   data-headlessui-state=""
                   id="headlessui-combobox-input-:r3j:"
                   placeholder="Choose an option"
@@ -2074,7 +2074,7 @@ Object {
               <input
                 aria-autocomplete="list"
                 aria-expanded="false"
-                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-14 leading-4"
+                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-14 leading-4"
                 data-headlessui-state=""
                 id="headlessui-combobox-input-:r3b:"
                 placeholder="Choose an option"
@@ -2132,7 +2132,7 @@ Object {
               <input
                 aria-autocomplete="list"
                 aria-expanded="false"
-                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
                 data-headlessui-state=""
                 id="headlessui-combobox-input-:r3f:"
                 placeholder="Choose an option"
@@ -2190,7 +2190,7 @@ Object {
               <input
                 aria-autocomplete="list"
                 aria-expanded="false"
-                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-18 leading-5"
+                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-18 leading-5"
                 data-headlessui-state=""
                 id="headlessui-combobox-input-:r3j:"
                 placeholder="Choose an option"
@@ -2317,7 +2317,7 @@ Object {
               <input
                 aria-autocomplete="list"
                 aria-expanded="false"
-                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
                 data-headlessui-state=""
                 id="headlessui-combobox-input-:r3n:"
                 placeholder="Choose an option"
@@ -2375,7 +2375,7 @@ Object {
               <input
                 aria-autocomplete="list"
                 aria-expanded="false"
-                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err opacity-60 cursor-not-allowed flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared opacity-60 cursor-not-allowed flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
                 data-headlessui-state="disabled"
                 disabled=""
                 id="headlessui-combobox-input-:r3r:"
@@ -2428,7 +2428,7 @@ Object {
               <input
                 aria-autocomplete="list"
                 aria-expanded="false"
-                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
                 data-headlessui-state=""
                 id="headlessui-combobox-input-:r3u:"
                 placeholder="Without Label and Hint message"
@@ -2480,7 +2480,7 @@ Object {
               <input
                 aria-autocomplete="list"
                 aria-expanded="false"
-                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
                 data-headlessui-state=""
                 id="headlessui-combobox-input-:r42:"
                 placeholder="Choose an option"
@@ -2549,7 +2549,7 @@ Object {
             <input
               aria-autocomplete="list"
               aria-expanded="false"
-              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
               data-headlessui-state=""
               id="headlessui-combobox-input-:r3n:"
               placeholder="Choose an option"
@@ -2607,7 +2607,7 @@ Object {
             <input
               aria-autocomplete="list"
               aria-expanded="false"
-              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err opacity-60 cursor-not-allowed flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared opacity-60 cursor-not-allowed flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
               data-headlessui-state="disabled"
               disabled=""
               id="headlessui-combobox-input-:r3r:"
@@ -2660,7 +2660,7 @@ Object {
             <input
               aria-autocomplete="list"
               aria-expanded="false"
-              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
               data-headlessui-state=""
               id="headlessui-combobox-input-:r3u:"
               placeholder="Without Label and Hint message"
@@ -2712,7 +2712,7 @@ Object {
             <input
               aria-autocomplete="list"
               aria-expanded="false"
-              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
               data-headlessui-state=""
               id="headlessui-combobox-input-:r42:"
               placeholder="Choose an option"
@@ -2844,7 +2844,7 @@ Object {
                 <input
                   aria-autocomplete="list"
                   aria-expanded="false"
-                  class="block max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow w-full h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+                  class="block max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow w-full h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
                   data-headlessui-state=""
                   id="headlessui-combobox-input-:r46:"
                   placeholder="Choose an option"
@@ -2920,7 +2920,7 @@ Object {
               <input
                 aria-autocomplete="list"
                 aria-expanded="false"
-                class="block max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow w-full h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+                class="block max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow w-full h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
                 data-headlessui-state=""
                 id="headlessui-combobox-input-:r46:"
                 placeholder="Choose an option"
@@ -3037,7 +3037,7 @@ Object {
             <input
               aria-autocomplete="list"
               aria-expanded="false"
-              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
               data-headlessui-state=""
               id="headlessui-combobox-input-:r0:"
               placeholder="Choose a name..."
@@ -3088,7 +3088,7 @@ Object {
             <input
               aria-autocomplete="list"
               aria-expanded="false"
-              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
               data-headlessui-state=""
               id="headlessui-combobox-input-:r2:"
               placeholder="Choose a name..."
@@ -3146,7 +3146,7 @@ Object {
           <input
             aria-autocomplete="list"
             aria-expanded="false"
-            class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+            class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
             data-headlessui-state=""
             id="headlessui-combobox-input-:r0:"
             placeholder="Choose a name..."
@@ -3197,7 +3197,7 @@ Object {
           <input
             aria-autocomplete="list"
             aria-expanded="false"
-            class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+            class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
             data-headlessui-state=""
             id="headlessui-combobox-input-:r2:"
             placeholder="Choose a name..."
@@ -3315,7 +3315,7 @@ Object {
               <input
                 aria-autocomplete="list"
                 aria-expanded="false"
-                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none pt-3 input-xl-dt-label text-moon-16 leading-5"
+                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none pt-3 input-xl-dt-label text-moon-16 leading-5"
                 data-headlessui-state=""
                 id="headlessui-combobox-input-:r5:"
                 placeholder="Choose an option"
@@ -3324,7 +3324,7 @@ Object {
                 value=""
               />
               <label
-                class="absolute text-moon-12 text-trunks z-[1] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
+                class="absolute text-moon-12 text-trunks z-[2] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
               >
                 Select label
               </label>
@@ -3382,7 +3382,7 @@ Object {
             <input
               aria-autocomplete="list"
               aria-expanded="false"
-              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none pt-3 input-xl-dt-label text-moon-16 leading-5"
+              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none pt-3 input-xl-dt-label text-moon-16 leading-5"
               data-headlessui-state=""
               id="headlessui-combobox-input-:r5:"
               placeholder="Choose an option"
@@ -3391,7 +3391,7 @@ Object {
               value=""
             />
             <label
-              class="absolute text-moon-12 text-trunks z-[1] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
+              class="absolute text-moon-12 text-trunks z-[2] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
             >
               Select label
             </label>
@@ -3506,7 +3506,7 @@ Object {
               <input
                 aria-autocomplete="list"
                 aria-expanded="false"
-                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none pt-3 input-xl-dt-label text-moon-16 leading-5"
+                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none pt-3 input-xl-dt-label text-moon-16 leading-5"
                 data-headlessui-state=""
                 id="headlessui-combobox-input-:r8:"
                 placeholder="Choose an option"
@@ -3515,7 +3515,7 @@ Object {
                 value=""
               />
               <label
-                class="absolute text-moon-12 text-trunks z-[1] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
+                class="absolute text-moon-12 text-trunks z-[2] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
               >
                 Label
               </label>
@@ -3573,7 +3573,7 @@ Object {
             <input
               aria-autocomplete="list"
               aria-expanded="false"
-              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none pt-3 input-xl-dt-label text-moon-16 leading-5"
+              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none pt-3 input-xl-dt-label text-moon-16 leading-5"
               data-headlessui-state=""
               id="headlessui-combobox-input-:r8:"
               placeholder="Choose an option"
@@ -3582,7 +3582,7 @@ Object {
               value=""
             />
             <label
-              class="absolute text-moon-12 text-trunks z-[1] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
+              class="absolute text-moon-12 text-trunks z-[2] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
             >
               Label
             </label>
@@ -3697,7 +3697,7 @@ Object {
               <input
                 aria-autocomplete="list"
                 aria-expanded="false"
-                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none pt-3 input-xl-dt-label text-moon-16 leading-5"
+                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none pt-3 input-xl-dt-label text-moon-16 leading-5"
                 data-headlessui-state=""
                 id="headlessui-combobox-input-:rb:"
                 placeholder="Choose an option"
@@ -3706,7 +3706,7 @@ Object {
                 value=""
               />
               <label
-                class="absolute text-moon-12 text-trunks z-[1] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
+                class="absolute text-moon-12 text-trunks z-[2] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
               >
                 Error
               </label>
@@ -3757,7 +3757,7 @@ Object {
               <input
                 aria-autocomplete="list"
                 aria-expanded="false"
-                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err opacity-60 cursor-not-allowed flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none pt-3 input-xl-dt-label text-moon-16 leading-5"
+                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared opacity-60 cursor-not-allowed flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none pt-3 input-xl-dt-label text-moon-16 leading-5"
                 data-headlessui-state="disabled"
                 disabled=""
                 id="headlessui-combobox-input-:re:"
@@ -3767,7 +3767,7 @@ Object {
                 value=""
               />
               <label
-                class="absolute text-moon-12 text-trunks z-[1] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
+                class="absolute text-moon-12 text-trunks z-[2] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
               >
                 Disabled
               </label>
@@ -3820,7 +3820,7 @@ Object {
                 aria-autocomplete="list"
                 aria-expanded="false"
                 aria-label="Without placeholder"
-                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none input-xl pt-3 input-xl-dt-label text-moon-16 leading-5"
+                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none input-xl pt-3 input-xl-dt-label text-moon-16 leading-5"
                 data-headlessui-state=""
                 id="headlessui-combobox-input-:rh:"
                 placeholder=""
@@ -3829,7 +3829,7 @@ Object {
                 value=""
               />
               <label
-                class="absolute text-moon-12 text-trunks z-[1] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
+                class="absolute text-moon-12 text-trunks z-[2] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
               >
                 Without placeholder (nullable)
               </label>
@@ -3880,7 +3880,7 @@ Object {
               <input
                 aria-autocomplete="list"
                 aria-expanded="false"
-                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none pt-3 input-xl-dt-label text-moon-16 leading-5"
+                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none pt-3 input-xl-dt-label text-moon-16 leading-5"
                 data-headlessui-state=""
                 id="headlessui-combobox-input-:rk:"
                 placeholder="Choose an option"
@@ -3889,7 +3889,7 @@ Object {
                 value=""
               />
               <label
-                class="absolute text-moon-12 text-trunks z-[1] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
+                class="absolute text-moon-12 text-trunks z-[2] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
               >
                 List options width
               </label>
@@ -3947,7 +3947,7 @@ Object {
             <input
               aria-autocomplete="list"
               aria-expanded="false"
-              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none pt-3 input-xl-dt-label text-moon-16 leading-5"
+              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none pt-3 input-xl-dt-label text-moon-16 leading-5"
               data-headlessui-state=""
               id="headlessui-combobox-input-:rb:"
               placeholder="Choose an option"
@@ -3956,7 +3956,7 @@ Object {
               value=""
             />
             <label
-              class="absolute text-moon-12 text-trunks z-[1] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
+              class="absolute text-moon-12 text-trunks z-[2] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
             >
               Error
             </label>
@@ -4007,7 +4007,7 @@ Object {
             <input
               aria-autocomplete="list"
               aria-expanded="false"
-              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err opacity-60 cursor-not-allowed flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none pt-3 input-xl-dt-label text-moon-16 leading-5"
+              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared opacity-60 cursor-not-allowed flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none pt-3 input-xl-dt-label text-moon-16 leading-5"
               data-headlessui-state="disabled"
               disabled=""
               id="headlessui-combobox-input-:re:"
@@ -4017,7 +4017,7 @@ Object {
               value=""
             />
             <label
-              class="absolute text-moon-12 text-trunks z-[1] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
+              class="absolute text-moon-12 text-trunks z-[2] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
             >
               Disabled
             </label>
@@ -4070,7 +4070,7 @@ Object {
               aria-autocomplete="list"
               aria-expanded="false"
               aria-label="Without placeholder"
-              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none input-xl pt-3 input-xl-dt-label text-moon-16 leading-5"
+              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none input-xl pt-3 input-xl-dt-label text-moon-16 leading-5"
               data-headlessui-state=""
               id="headlessui-combobox-input-:rh:"
               placeholder=""
@@ -4079,7 +4079,7 @@ Object {
               value=""
             />
             <label
-              class="absolute text-moon-12 text-trunks z-[1] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
+              class="absolute text-moon-12 text-trunks z-[2] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
             >
               Without placeholder (nullable)
             </label>
@@ -4130,7 +4130,7 @@ Object {
             <input
               aria-autocomplete="list"
               aria-expanded="false"
-              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none pt-3 input-xl-dt-label text-moon-16 leading-5"
+              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none pt-3 input-xl-dt-label text-moon-16 leading-5"
               data-headlessui-state=""
               id="headlessui-combobox-input-:rk:"
               placeholder="Choose an option"
@@ -4139,7 +4139,7 @@ Object {
               value=""
             />
             <label
-              class="absolute text-moon-12 text-trunks z-[1] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
+              class="absolute text-moon-12 text-trunks z-[2] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
             >
               List options width
             </label>
@@ -4251,7 +4251,7 @@ Object {
             <input
               aria-autocomplete="list"
               aria-expanded="false"
-              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
               data-headlessui-state=""
               id="headlessui-combobox-input-:r13:"
               placeholder="Choose an option"
@@ -4309,7 +4309,7 @@ Object {
           <input
             aria-autocomplete="list"
             aria-expanded="false"
-            class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+            class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
             data-headlessui-state=""
             id="headlessui-combobox-input-:r13:"
             placeholder="Choose an option"
@@ -4431,7 +4431,7 @@ Object {
             <input
               aria-autocomplete="list"
               aria-expanded="false"
-              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-14 leading-4"
+              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-14 leading-4"
               data-headlessui-state=""
               id="headlessui-combobox-input-:ro:"
               placeholder="Choose an option"
@@ -4489,7 +4489,7 @@ Object {
             <input
               aria-autocomplete="list"
               aria-expanded="false"
-              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
               data-headlessui-state=""
               id="headlessui-combobox-input-:rs:"
               placeholder="Choose an option"
@@ -4547,7 +4547,7 @@ Object {
             <input
               aria-autocomplete="list"
               aria-expanded="false"
-              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-18 leading-5"
+              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-18 leading-5"
               data-headlessui-state=""
               id="headlessui-combobox-input-:r10:"
               placeholder="Choose an option"
@@ -4612,7 +4612,7 @@ Object {
           <input
             aria-autocomplete="list"
             aria-expanded="false"
-            class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-14 leading-4"
+            class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-14 leading-4"
             data-headlessui-state=""
             id="headlessui-combobox-input-:ro:"
             placeholder="Choose an option"
@@ -4670,7 +4670,7 @@ Object {
           <input
             aria-autocomplete="list"
             aria-expanded="false"
-            class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+            class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
             data-headlessui-state=""
             id="headlessui-combobox-input-:rs:"
             placeholder="Choose an option"
@@ -4728,7 +4728,7 @@ Object {
           <input
             aria-autocomplete="list"
             aria-expanded="false"
-            class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-18 leading-5"
+            class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-18 leading-5"
             data-headlessui-state=""
             id="headlessui-combobox-input-:r10:"
             placeholder="Choose an option"
@@ -4853,7 +4853,7 @@ Object {
               <input
                 aria-autocomplete="list"
                 aria-expanded="false"
-                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-14 leading-4"
+                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-14 leading-4"
                 data-headlessui-state=""
                 id="headlessui-combobox-input-:r17:"
                 placeholder="Choose an option"
@@ -4911,7 +4911,7 @@ Object {
               <input
                 aria-autocomplete="list"
                 aria-expanded="false"
-                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
                 data-headlessui-state=""
                 id="headlessui-combobox-input-:r1b:"
                 placeholder="Choose an option"
@@ -4969,7 +4969,7 @@ Object {
               <input
                 aria-autocomplete="list"
                 aria-expanded="false"
-                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-18 leading-5"
+                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-18 leading-5"
                 data-headlessui-state=""
                 id="headlessui-combobox-input-:r1f:"
                 placeholder="Choose an option"
@@ -5038,7 +5038,7 @@ Object {
             <input
               aria-autocomplete="list"
               aria-expanded="false"
-              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-14 leading-4"
+              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-14 leading-4"
               data-headlessui-state=""
               id="headlessui-combobox-input-:r17:"
               placeholder="Choose an option"
@@ -5096,7 +5096,7 @@ Object {
             <input
               aria-autocomplete="list"
               aria-expanded="false"
-              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
               data-headlessui-state=""
               id="headlessui-combobox-input-:r1b:"
               placeholder="Choose an option"
@@ -5154,7 +5154,7 @@ Object {
             <input
               aria-autocomplete="list"
               aria-expanded="false"
-              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-18 leading-5"
+              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-18 leading-5"
               data-headlessui-state=""
               id="headlessui-combobox-input-:r1f:"
               placeholder="Choose an option"
@@ -5277,7 +5277,7 @@ Object {
             <input
               aria-autocomplete="list"
               aria-expanded="false"
-              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
               data-headlessui-state=""
               id="headlessui-combobox-input-:r1j:"
               placeholder="Choose an option"
@@ -5335,7 +5335,7 @@ Object {
             <input
               aria-autocomplete="list"
               aria-expanded="false"
-              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err opacity-60 cursor-not-allowed flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared opacity-60 cursor-not-allowed flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
               data-headlessui-state="disabled"
               disabled=""
               id="headlessui-combobox-input-:r1n:"
@@ -5388,7 +5388,7 @@ Object {
             <input
               aria-autocomplete="list"
               aria-expanded="false"
-              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
               data-headlessui-state=""
               id="headlessui-combobox-input-:r1q:"
               placeholder="Without Label and Hint message"
@@ -5440,7 +5440,7 @@ Object {
             <input
               aria-autocomplete="list"
               aria-expanded="false"
-              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
               data-headlessui-state=""
               id="headlessui-combobox-input-:r1u:"
               placeholder="Choose an option"
@@ -5505,7 +5505,7 @@ Object {
           <input
             aria-autocomplete="list"
             aria-expanded="false"
-            class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+            class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
             data-headlessui-state=""
             id="headlessui-combobox-input-:r1j:"
             placeholder="Choose an option"
@@ -5563,7 +5563,7 @@ Object {
           <input
             aria-autocomplete="list"
             aria-expanded="false"
-            class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err opacity-60 cursor-not-allowed flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+            class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared opacity-60 cursor-not-allowed flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
             data-headlessui-state="disabled"
             disabled=""
             id="headlessui-combobox-input-:r1n:"
@@ -5616,7 +5616,7 @@ Object {
           <input
             aria-autocomplete="list"
             aria-expanded="false"
-            class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+            class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
             data-headlessui-state=""
             id="headlessui-combobox-input-:r1q:"
             placeholder="Without Label and Hint message"
@@ -5668,7 +5668,7 @@ Object {
           <input
             aria-autocomplete="list"
             aria-expanded="false"
-            class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+            class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
             data-headlessui-state=""
             id="headlessui-combobox-input-:r1u:"
             placeholder="Choose an option"
@@ -5796,7 +5796,7 @@ Object {
               <input
                 aria-autocomplete="list"
                 aria-expanded="false"
-                class="block max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow w-full h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+                class="block max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow w-full h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
                 data-headlessui-state=""
                 id="headlessui-combobox-input-:r22:"
                 placeholder="Choose an option"
@@ -5868,7 +5868,7 @@ Object {
             <input
               aria-autocomplete="list"
               aria-expanded="false"
-              class="block max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow w-full h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+              class="block max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow w-full h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
               data-headlessui-state=""
               id="headlessui-combobox-input-:r22:"
               placeholder="Choose an option"
diff --git a/next-docs/public/examples/form/__tests__/__snapshots__/index.test.tsx.snap b/next-docs/public/examples/form/__tests__/__snapshots__/index.test.tsx.snap
index a2d5fc4aa1..81088111b9 100644
--- a/next-docs/public/examples/form/__tests__/__snapshots__/index.test.tsx.snap
+++ b/next-docs/public/examples/form/__tests__/__snapshots__/index.test.tsx.snap
@@ -23,7 +23,7 @@ Object {
               Username
             </label>
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err h-12 leading-[3rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-lg-dt-shared input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-12 leading-[3rem] rounded-moon-i-sm input-lg-dt-shared shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err"
               id="name"
               placeholder="Your username..."
             />
@@ -44,7 +44,7 @@ Object {
               Email
             </label>
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-12 leading-[3rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-lg-dt-shared input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-12 leading-[3rem] rounded-moon-i-sm input-lg-dt-shared"
               id="email"
               placeholder="Your Email..."
             />
@@ -213,7 +213,7 @@ Object {
               Password
             </label>
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-12 leading-[3rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-lg-dt-shared input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-12 leading-[3rem] rounded-moon-i-sm input-lg-dt-shared"
               id="password"
               type="password"
             />
@@ -268,7 +268,7 @@ Object {
             Username
           </label>
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err h-12 leading-[3rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-lg-dt-shared input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-12 leading-[3rem] rounded-moon-i-sm input-lg-dt-shared shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err"
             id="name"
             placeholder="Your username..."
           />
@@ -289,7 +289,7 @@ Object {
             Email
           </label>
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-12 leading-[3rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-lg-dt-shared input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-12 leading-[3rem] rounded-moon-i-sm input-lg-dt-shared"
             id="email"
             placeholder="Your Email..."
           />
@@ -458,7 +458,7 @@ Object {
             Password
           </label>
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-12 leading-[3rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-lg-dt-shared input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-12 leading-[3rem] rounded-moon-i-sm input-lg-dt-shared"
             id="password"
             type="password"
           />
@@ -567,11 +567,11 @@ Object {
               class="w-full max-w-full relative bg-goku rounded-moon-s-xs [&_input]:rounded-moon-s-xs [&_input:focus]:rounded-moon-s-xs [&_input:hover]:rounded-moon-s-xs"
             >
               <input
-                class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent focus:outline-none focus-visible::outline-none shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+                class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent focus:outline-none focus-visible::outline-none shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
                 placeholder="Your username..."
               />
               <label
-                class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+                class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
               >
                 Username
               </label>
@@ -590,11 +590,11 @@ Object {
               class="w-full max-w-full relative bg-goku rounded-moon-s-xs [&_input]:rounded-moon-s-xs [&_input:focus]:rounded-moon-s-xs [&_input:hover]:rounded-moon-s-xs"
             >
               <input
-                class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+                class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
                 placeholder="Your Email..."
               />
               <label
-                class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+                class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
               >
                 Email
               </label>
@@ -607,11 +607,11 @@ Object {
               class="w-full max-w-full relative rounded-moon-i-sm bg-goku"
             >
               <input
-                class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+                class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
                 placeholder="Your password..."
               />
               <label
-                class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+                class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
               >
                 Password
               </label>
@@ -624,11 +624,11 @@ Object {
               class="w-full max-w-full relative rounded-moon-i-sm bg-goku"
             >
               <input
-                class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+                class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
                 placeholder="Repeat password..."
               />
               <label
-                class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+                class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
               >
                 Password
               </label>
@@ -674,11 +674,11 @@ Object {
             class="w-full max-w-full relative bg-goku rounded-moon-s-xs [&_input]:rounded-moon-s-xs [&_input:focus]:rounded-moon-s-xs [&_input:hover]:rounded-moon-s-xs"
           >
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent focus:outline-none focus-visible::outline-none shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent focus:outline-none focus-visible::outline-none shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
               placeholder="Your username..."
             />
             <label
-              class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+              class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
             >
               Username
             </label>
@@ -697,11 +697,11 @@ Object {
             class="w-full max-w-full relative bg-goku rounded-moon-s-xs [&_input]:rounded-moon-s-xs [&_input:focus]:rounded-moon-s-xs [&_input:hover]:rounded-moon-s-xs"
           >
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
               placeholder="Your Email..."
             />
             <label
-              class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+              class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
             >
               Email
             </label>
@@ -714,11 +714,11 @@ Object {
             class="w-full max-w-full relative rounded-moon-i-sm bg-goku"
           >
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
               placeholder="Your password..."
             />
             <label
-              class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+              class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
             >
               Password
             </label>
@@ -731,11 +731,11 @@ Object {
             class="w-full max-w-full relative rounded-moon-i-sm bg-goku"
           >
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
               placeholder="Repeat password..."
             />
             <label
-              class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+              class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
             >
               Password
             </label>
@@ -838,7 +838,7 @@ Object {
             Username
           </label>
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err h-12 leading-[3rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-lg-dt-shared input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-12 leading-[3rem] rounded-moon-i-sm input-lg-dt-shared shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err"
             id="name"
             placeholder="Your username..."
           />
@@ -859,7 +859,7 @@ Object {
             Email
           </label>
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-12 leading-[3rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-lg-dt-shared input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-12 leading-[3rem] rounded-moon-i-sm input-lg-dt-shared"
             id="email"
             placeholder="Your Email..."
           />
@@ -1028,7 +1028,7 @@ Object {
             Password
           </label>
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-12 leading-[3rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-lg-dt-shared input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-12 leading-[3rem] rounded-moon-i-sm input-lg-dt-shared"
             id="password"
             type="password"
           />
@@ -1079,7 +1079,7 @@ Object {
           Username
         </label>
         <input
-          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err h-12 leading-[3rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-lg-dt-shared input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-12 leading-[3rem] rounded-moon-i-sm input-lg-dt-shared shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err"
           id="name"
           placeholder="Your username..."
         />
@@ -1100,7 +1100,7 @@ Object {
           Email
         </label>
         <input
-          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-12 leading-[3rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-lg-dt-shared input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-12 leading-[3rem] rounded-moon-i-sm input-lg-dt-shared"
           id="email"
           placeholder="Your Email..."
         />
@@ -1269,7 +1269,7 @@ Object {
           Password
         </label>
         <input
-          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-12 leading-[3rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-lg-dt-shared input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-12 leading-[3rem] rounded-moon-i-sm input-lg-dt-shared"
           id="password"
           type="password"
         />
@@ -1374,11 +1374,11 @@ Object {
             class="w-full max-w-full relative bg-goku rounded-moon-s-xs [&_input]:rounded-moon-s-xs [&_input:focus]:rounded-moon-s-xs [&_input:hover]:rounded-moon-s-xs"
           >
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent focus:outline-none focus-visible::outline-none shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent focus:outline-none focus-visible::outline-none shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
               placeholder="Your username..."
             />
             <label
-              class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+              class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
             >
               Username
             </label>
@@ -1397,11 +1397,11 @@ Object {
             class="w-full max-w-full relative bg-goku rounded-moon-s-xs [&_input]:rounded-moon-s-xs [&_input:focus]:rounded-moon-s-xs [&_input:hover]:rounded-moon-s-xs"
           >
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
               placeholder="Your Email..."
             />
             <label
-              class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+              class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
             >
               Email
             </label>
@@ -1414,11 +1414,11 @@ Object {
             class="w-full max-w-full relative rounded-moon-i-sm bg-goku"
           >
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
               placeholder="Your password..."
             />
             <label
-              class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+              class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
             >
               Password
             </label>
@@ -1431,11 +1431,11 @@ Object {
             class="w-full max-w-full relative rounded-moon-i-sm bg-goku"
           >
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
               placeholder="Repeat password..."
             />
             <label
-              class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+              class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
             >
               Password
             </label>
@@ -1477,11 +1477,11 @@ Object {
           class="w-full max-w-full relative bg-goku rounded-moon-s-xs [&_input]:rounded-moon-s-xs [&_input:focus]:rounded-moon-s-xs [&_input:hover]:rounded-moon-s-xs"
         >
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent focus:outline-none focus-visible::outline-none shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent focus:outline-none focus-visible::outline-none shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
             placeholder="Your username..."
           />
           <label
-            class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+            class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
           >
             Username
           </label>
@@ -1500,11 +1500,11 @@ Object {
           class="w-full max-w-full relative bg-goku rounded-moon-s-xs [&_input]:rounded-moon-s-xs [&_input:focus]:rounded-moon-s-xs [&_input:hover]:rounded-moon-s-xs"
         >
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
             placeholder="Your Email..."
           />
           <label
-            class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+            class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
           >
             Email
           </label>
@@ -1517,11 +1517,11 @@ Object {
           class="w-full max-w-full relative rounded-moon-i-sm bg-goku"
         >
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
             placeholder="Your password..."
           />
           <label
-            class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+            class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
           >
             Password
           </label>
@@ -1534,11 +1534,11 @@ Object {
           class="w-full max-w-full relative rounded-moon-i-sm bg-goku"
         >
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
             placeholder="Repeat password..."
           />
           <label
-            class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+            class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
           >
             Password
           </label>
diff --git a/next-docs/public/examples/group/__tests__/__snapshots__/index.test.tsx.snap b/next-docs/public/examples/group/__tests__/__snapshots__/index.test.tsx.snap
index 2181838eae..3aeb31f66f 100644
--- a/next-docs/public/examples/group/__tests__/__snapshots__/index.test.tsx.snap
+++ b/next-docs/public/examples/group/__tests__/__snapshots__/index.test.tsx.snap
@@ -12,14 +12,14 @@ Object {
           class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm"
         >
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
             placeholder="Username"
           />
           <div
             class="relative last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity before:h-px before:top-0 before:inset-x-0"
           >
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err rounded-t-none input-tbb-hidden"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared rounded-t-none input-tbb-hidden"
               placeholder="Password"
               type="password"
             />
@@ -36,14 +36,14 @@ Object {
         class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm"
       >
         <input
-          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
+          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
           placeholder="Username"
         />
         <div
           class="relative last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity before:h-px before:top-0 before:inset-x-0"
         >
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err rounded-t-none input-tbb-hidden"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared rounded-t-none input-tbb-hidden"
             placeholder="Password"
             type="password"
           />
@@ -120,14 +120,14 @@ Object {
             class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm"
           >
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
               placeholder="Username"
             />
             <div
               class="relative last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity before:h-px before:top-0 before:inset-x-0"
             >
               <input
-                class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err rounded-t-none input-tbb-hidden"
+                class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared rounded-t-none input-tbb-hidden"
                 placeholder="Password"
                 type="password"
               />
@@ -137,14 +137,14 @@ Object {
             class="flex border-none shadow-input relative h-fit bg-goku flex-row rounded-moon-i-sm"
           >
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-e-none rtl:input-lsb-hidden ltr:input-rsb-hidden flex-1 basis-1/2"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-e-none rtl:input-lsb-hidden ltr:input-rsb-hidden flex-1 basis-1/2"
               placeholder="Expiry date"
             />
             <div
               class="relative last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity before:w-px before:start-0 before:inset-y-0"
             >
               <input
-                class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err rounded-s-none rtl:input-rsb-hidden ltr:input-lsb-hidden flex-1 basis-1/2"
+                class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared rounded-s-none rtl:input-rsb-hidden ltr:input-lsb-hidden flex-1 basis-1/2"
                 placeholder="Security code"
               />
             </div>
@@ -164,14 +164,14 @@ Object {
           class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm"
         >
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
             placeholder="Username"
           />
           <div
             class="relative last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity before:h-px before:top-0 before:inset-x-0"
           >
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err rounded-t-none input-tbb-hidden"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared rounded-t-none input-tbb-hidden"
               placeholder="Password"
               type="password"
             />
@@ -181,14 +181,14 @@ Object {
           class="flex border-none shadow-input relative h-fit bg-goku flex-row rounded-moon-i-sm"
         >
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-e-none rtl:input-lsb-hidden ltr:input-rsb-hidden flex-1 basis-1/2"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-e-none rtl:input-lsb-hidden ltr:input-rsb-hidden flex-1 basis-1/2"
             placeholder="Expiry date"
           />
           <div
             class="relative last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity before:w-px before:start-0 before:inset-y-0"
           >
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err rounded-s-none rtl:input-rsb-hidden ltr:input-lsb-hidden flex-1 basis-1/2"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared rounded-s-none rtl:input-rsb-hidden ltr:input-lsb-hidden flex-1 basis-1/2"
               placeholder="Security code"
             />
           </div>
@@ -265,14 +265,14 @@ Object {
             class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-xs"
           >
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-8 leading-8 rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-8 leading-8 rounded-moon-i-xs input-dt-shared [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
               placeholder="Username"
             />
             <div
               class="relative last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity before:h-px before:top-0 before:inset-x-0"
             >
               <input
-                class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-8 leading-8 rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err rounded-t-none input-tbb-hidden"
+                class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-8 leading-8 rounded-moon-i-xs input-dt-shared rounded-t-none input-tbb-hidden"
                 placeholder="Password"
                 type="password"
               />
@@ -282,14 +282,14 @@ Object {
             class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm"
           >
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
               placeholder="Username"
             />
             <div
               class="relative last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity before:h-px before:top-0 before:inset-x-0"
             >
               <input
-                class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err rounded-t-none input-tbb-hidden"
+                class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared rounded-t-none input-tbb-hidden"
                 placeholder="Password"
                 type="password"
               />
@@ -299,14 +299,14 @@ Object {
             class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm"
           >
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-12 leading-[3rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-lg-dt-shared input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-12 leading-[3rem] rounded-moon-i-sm input-lg-dt-shared [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
               placeholder="Username"
             />
             <div
               class="relative last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity before:h-px before:top-0 before:inset-x-0"
             >
               <input
-                class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-12 leading-[3rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-lg-dt-shared input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err rounded-t-none input-tbb-hidden"
+                class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-12 leading-[3rem] rounded-moon-i-sm input-lg-dt-shared rounded-t-none input-tbb-hidden"
                 placeholder="Password"
                 type="password"
               />
@@ -327,14 +327,14 @@ Object {
           class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-xs"
         >
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-8 leading-8 rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-8 leading-8 rounded-moon-i-xs input-dt-shared [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
             placeholder="Username"
           />
           <div
             class="relative last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity before:h-px before:top-0 before:inset-x-0"
           >
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-8 leading-8 rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err rounded-t-none input-tbb-hidden"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-8 leading-8 rounded-moon-i-xs input-dt-shared rounded-t-none input-tbb-hidden"
               placeholder="Password"
               type="password"
             />
@@ -344,14 +344,14 @@ Object {
           class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm"
         >
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
             placeholder="Username"
           />
           <div
             class="relative last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity before:h-px before:top-0 before:inset-x-0"
           >
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err rounded-t-none input-tbb-hidden"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared rounded-t-none input-tbb-hidden"
               placeholder="Password"
               type="password"
             />
@@ -361,14 +361,14 @@ Object {
           class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm"
         >
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-12 leading-[3rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-lg-dt-shared input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-12 leading-[3rem] rounded-moon-i-sm input-lg-dt-shared [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
             placeholder="Username"
           />
           <div
             class="relative last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity before:h-px before:top-0 before:inset-x-0"
           >
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-12 leading-[3rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-lg-dt-shared input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err rounded-t-none input-tbb-hidden"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-12 leading-[3rem] rounded-moon-i-sm input-lg-dt-shared rounded-t-none input-tbb-hidden"
               placeholder="Password"
               type="password"
             />
@@ -446,14 +446,14 @@ Object {
             class="flex border-none relative h-fit bg-goku flex-col rounded-moon-i-sm shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-error"
           >
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
               placeholder="Username"
             />
             <div
               class="relative last-element before:absolute before:block hover:before:hidden before:transition-opacity before:h-px before:top-0 before:inset-x-0 before:bg-chichi"
             >
               <input
-                class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err rounded-t-none input-tbb-hidden"
+                class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err rounded-t-none input-tbb-hidden"
                 placeholder="Password"
                 type="password"
               />
@@ -463,14 +463,14 @@ Object {
             class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm"
           >
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
               placeholder="Username"
             />
             <div
               class="relative last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity before:h-px before:top-0 before:inset-x-0"
             >
               <input
-                class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err rounded-t-none input-tbb-hidden"
+                class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared rounded-t-none input-tbb-hidden"
                 placeholder="Password"
                 type="password"
               />
@@ -480,7 +480,7 @@ Object {
             class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm"
           >
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err opacity-60 cursor-not-allowed [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared opacity-60 cursor-not-allowed [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
               disabled=""
               placeholder="Username"
             />
@@ -488,7 +488,7 @@ Object {
               class="relative last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity before:h-px before:top-0 before:inset-x-0"
             >
               <input
-                class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err opacity-60 cursor-not-allowed rounded-t-none input-tbb-hidden"
+                class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared opacity-60 cursor-not-allowed rounded-t-none input-tbb-hidden"
                 disabled=""
                 placeholder="Password"
                 type="password"
@@ -499,7 +499,7 @@ Object {
             class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm"
           >
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
               placeholder="Username"
               readonly=""
             />
@@ -507,7 +507,7 @@ Object {
               class="relative last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity before:h-px before:top-0 before:inset-x-0"
             >
               <input
-                class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err rounded-t-none input-tbb-hidden"
+                class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared rounded-t-none input-tbb-hidden"
                 placeholder="Password"
                 readonly=""
                 type="password"
@@ -529,14 +529,14 @@ Object {
           class="flex border-none relative h-fit bg-goku flex-col rounded-moon-i-sm shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-error"
         >
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
             placeholder="Username"
           />
           <div
             class="relative last-element before:absolute before:block hover:before:hidden before:transition-opacity before:h-px before:top-0 before:inset-x-0 before:bg-chichi"
           >
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err rounded-t-none input-tbb-hidden"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err rounded-t-none input-tbb-hidden"
               placeholder="Password"
               type="password"
             />
@@ -546,14 +546,14 @@ Object {
           class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm"
         >
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
             placeholder="Username"
           />
           <div
             class="relative last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity before:h-px before:top-0 before:inset-x-0"
           >
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err rounded-t-none input-tbb-hidden"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared rounded-t-none input-tbb-hidden"
               placeholder="Password"
               type="password"
             />
@@ -563,7 +563,7 @@ Object {
           class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm"
         >
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err opacity-60 cursor-not-allowed [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared opacity-60 cursor-not-allowed [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
             disabled=""
             placeholder="Username"
           />
@@ -571,7 +571,7 @@ Object {
             class="relative last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity before:h-px before:top-0 before:inset-x-0"
           >
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err opacity-60 cursor-not-allowed rounded-t-none input-tbb-hidden"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared opacity-60 cursor-not-allowed rounded-t-none input-tbb-hidden"
               disabled=""
               placeholder="Password"
               type="password"
@@ -582,7 +582,7 @@ Object {
           class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm"
         >
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
             placeholder="Username"
             readonly=""
           />
@@ -590,7 +590,7 @@ Object {
             class="relative last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity before:h-px before:top-0 before:inset-x-0"
           >
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err rounded-t-none input-tbb-hidden"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared rounded-t-none input-tbb-hidden"
               placeholder="Password"
               readonly=""
               type="password"
@@ -672,11 +672,11 @@ Object {
               class="w-full max-w-full relative rounded-moon-i-sm bg-goku [&_+_.last-element:before]:hover:opacity-0 [&_input]:rounded-b-none [&_input]:input-bbb-hidden"
             >
               <input
-                class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+                class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
                 placeholder="Placeholder 1"
               />
               <label
-                class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+                class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
               >
                 Label
               </label>
@@ -685,11 +685,11 @@ Object {
               class="w-full max-w-full relative rounded-moon-i-sm bg-goku last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity [&_input]:rounded-t-none [&_input]:input-tbb-hidden before:h-px before:top-0 before:inset-x-0"
             >
               <input
-                class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+                class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
                 placeholder="Placeholder 2"
               />
               <label
-                class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+                class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
               >
                 Label
               </label>
@@ -702,11 +702,11 @@ Object {
               class="w-full max-w-full relative rounded-moon-i-sm bg-goku [&_+_.last-element:before]:hover:opacity-0 [&_input]:rounded-e-none rtl:[&_input]:input-lsb-hidden ltr:[&_input]:input-rsb-hidden flex-1 basis-1/2"
             >
               <input
-                class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+                class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
                 placeholder="Placeholder 1"
               />
               <label
-                class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+                class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
               >
                 Label
               </label>
@@ -715,11 +715,11 @@ Object {
               class="w-full max-w-full relative rounded-moon-i-sm bg-goku last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity [&_input]:rounded-s-none rtl:[&_input]:input-rsb-hidden ltr:[&_input]:input-lsb-hidden flex-1 basis-1/2 before:w-px before:start-0 before:inset-y-0"
             >
               <input
-                class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+                class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
                 placeholder="Placeholder 2"
               />
               <label
-                class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+                class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
               >
                 Label
               </label>
@@ -776,7 +776,7 @@ Object {
               class="relative last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity before:h-px before:top-0 before:inset-x-0"
             >
               <input
-                class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err rounded-t-none input-tbb-hidden"
+                class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared rounded-t-none input-tbb-hidden"
                 placeholder="Phone number"
               />
             </div>
@@ -785,7 +785,7 @@ Object {
             class="flex border-none shadow-input relative h-fit bg-goku flex-row rounded-moon-i-sm"
           >
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-e-none rtl:input-lsb-hidden ltr:input-rsb-hidden flex-1 basis-1/2"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-e-none rtl:input-lsb-hidden ltr:input-rsb-hidden flex-1 basis-1/2"
               placeholder="Street"
             />
             <span
@@ -889,10 +889,10 @@ Object {
             >
               <input
                 aria-label="Phone number"
-                class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+                class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
               />
               <label
-                class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+                class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
               >
                 Phone number
               </label>
@@ -905,11 +905,11 @@ Object {
               class="w-full max-w-full relative rounded-moon-i-sm bg-goku [&_+_.last-element:before]:hover:opacity-0 [&_input]:rounded-e-none rtl:[&_input]:input-lsb-hidden ltr:[&_input]:input-rsb-hidden flex-1 basis-1/2"
             >
               <input
-                class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+                class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
                 placeholder="Put your name..."
               />
               <label
-                class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+                class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
               >
                 Name
               </label>
@@ -981,11 +981,11 @@ Object {
             class="w-full max-w-full relative rounded-moon-i-sm bg-goku [&_+_.last-element:before]:hover:opacity-0 [&_input]:rounded-b-none [&_input]:input-bbb-hidden"
           >
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
               placeholder="Placeholder 1"
             />
             <label
-              class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+              class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
             >
               Label
             </label>
@@ -994,11 +994,11 @@ Object {
             class="w-full max-w-full relative rounded-moon-i-sm bg-goku last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity [&_input]:rounded-t-none [&_input]:input-tbb-hidden before:h-px before:top-0 before:inset-x-0"
           >
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
               placeholder="Placeholder 2"
             />
             <label
-              class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+              class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
             >
               Label
             </label>
@@ -1011,11 +1011,11 @@ Object {
             class="w-full max-w-full relative rounded-moon-i-sm bg-goku [&_+_.last-element:before]:hover:opacity-0 [&_input]:rounded-e-none rtl:[&_input]:input-lsb-hidden ltr:[&_input]:input-rsb-hidden flex-1 basis-1/2"
           >
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
               placeholder="Placeholder 1"
             />
             <label
-              class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+              class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
             >
               Label
             </label>
@@ -1024,11 +1024,11 @@ Object {
             class="w-full max-w-full relative rounded-moon-i-sm bg-goku last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity [&_input]:rounded-s-none rtl:[&_input]:input-rsb-hidden ltr:[&_input]:input-lsb-hidden flex-1 basis-1/2 before:w-px before:start-0 before:inset-y-0"
           >
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
               placeholder="Placeholder 2"
             />
             <label
-              class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+              class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
             >
               Label
             </label>
@@ -1085,7 +1085,7 @@ Object {
             class="relative last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity before:h-px before:top-0 before:inset-x-0"
           >
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err rounded-t-none input-tbb-hidden"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared rounded-t-none input-tbb-hidden"
               placeholder="Phone number"
             />
           </div>
@@ -1094,7 +1094,7 @@ Object {
           class="flex border-none shadow-input relative h-fit bg-goku flex-row rounded-moon-i-sm"
         >
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-e-none rtl:input-lsb-hidden ltr:input-rsb-hidden flex-1 basis-1/2"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-e-none rtl:input-lsb-hidden ltr:input-rsb-hidden flex-1 basis-1/2"
             placeholder="Street"
           />
           <span
@@ -1198,10 +1198,10 @@ Object {
           >
             <input
               aria-label="Phone number"
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
             />
             <label
-              class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+              class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
             >
               Phone number
             </label>
@@ -1214,11 +1214,11 @@ Object {
             class="w-full max-w-full relative rounded-moon-i-sm bg-goku [&_+_.last-element:before]:hover:opacity-0 [&_input]:rounded-e-none rtl:[&_input]:input-lsb-hidden ltr:[&_input]:input-rsb-hidden flex-1 basis-1/2"
           >
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
               placeholder="Put your name..."
             />
             <label
-              class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+              class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
             >
               Name
             </label>
@@ -1338,14 +1338,14 @@ Object {
         class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm"
       >
         <input
-          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
+          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
           placeholder="Username"
         />
         <div
           class="relative last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity before:h-px before:top-0 before:inset-x-0"
         >
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err rounded-t-none input-tbb-hidden"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared rounded-t-none input-tbb-hidden"
             placeholder="Password"
             type="password"
           />
@@ -1358,14 +1358,14 @@ Object {
       class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm"
     >
       <input
-        class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
+        class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
         placeholder="Username"
       />
       <div
         class="relative last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity before:h-px before:top-0 before:inset-x-0"
       >
         <input
-          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err rounded-t-none input-tbb-hidden"
+          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared rounded-t-none input-tbb-hidden"
           placeholder="Password"
           type="password"
         />
@@ -1438,14 +1438,14 @@ Object {
           class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm"
         >
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
             placeholder="Username"
           />
           <div
             class="relative last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity before:h-px before:top-0 before:inset-x-0"
           >
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err rounded-t-none input-tbb-hidden"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared rounded-t-none input-tbb-hidden"
               placeholder="Password"
               type="password"
             />
@@ -1455,14 +1455,14 @@ Object {
           class="flex border-none shadow-input relative h-fit bg-goku flex-row rounded-moon-i-sm"
         >
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-e-none rtl:input-lsb-hidden ltr:input-rsb-hidden flex-1 basis-1/2"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-e-none rtl:input-lsb-hidden ltr:input-rsb-hidden flex-1 basis-1/2"
             placeholder="Expiry date"
           />
           <div
             class="relative last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity before:w-px before:start-0 before:inset-y-0"
           >
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err rounded-s-none rtl:input-rsb-hidden ltr:input-lsb-hidden flex-1 basis-1/2"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared rounded-s-none rtl:input-rsb-hidden ltr:input-lsb-hidden flex-1 basis-1/2"
               placeholder="Security code"
             />
           </div>
@@ -1478,14 +1478,14 @@ Object {
         class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm"
       >
         <input
-          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
+          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
           placeholder="Username"
         />
         <div
           class="relative last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity before:h-px before:top-0 before:inset-x-0"
         >
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err rounded-t-none input-tbb-hidden"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared rounded-t-none input-tbb-hidden"
             placeholder="Password"
             type="password"
           />
@@ -1495,14 +1495,14 @@ Object {
         class="flex border-none shadow-input relative h-fit bg-goku flex-row rounded-moon-i-sm"
       >
         <input
-          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-e-none rtl:input-lsb-hidden ltr:input-rsb-hidden flex-1 basis-1/2"
+          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-e-none rtl:input-lsb-hidden ltr:input-rsb-hidden flex-1 basis-1/2"
           placeholder="Expiry date"
         />
         <div
           class="relative last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity before:w-px before:start-0 before:inset-y-0"
         >
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err rounded-s-none rtl:input-rsb-hidden ltr:input-lsb-hidden flex-1 basis-1/2"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared rounded-s-none rtl:input-rsb-hidden ltr:input-lsb-hidden flex-1 basis-1/2"
             placeholder="Security code"
           />
         </div>
@@ -1575,14 +1575,14 @@ Object {
           class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-xs"
         >
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-8 leading-8 rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-8 leading-8 rounded-moon-i-xs input-dt-shared [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
             placeholder="Username"
           />
           <div
             class="relative last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity before:h-px before:top-0 before:inset-x-0"
           >
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-8 leading-8 rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err rounded-t-none input-tbb-hidden"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-8 leading-8 rounded-moon-i-xs input-dt-shared rounded-t-none input-tbb-hidden"
               placeholder="Password"
               type="password"
             />
@@ -1592,14 +1592,14 @@ Object {
           class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm"
         >
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
             placeholder="Username"
           />
           <div
             class="relative last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity before:h-px before:top-0 before:inset-x-0"
           >
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err rounded-t-none input-tbb-hidden"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared rounded-t-none input-tbb-hidden"
               placeholder="Password"
               type="password"
             />
@@ -1609,14 +1609,14 @@ Object {
           class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm"
         >
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-12 leading-[3rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-lg-dt-shared input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-12 leading-[3rem] rounded-moon-i-sm input-lg-dt-shared [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
             placeholder="Username"
           />
           <div
             class="relative last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity before:h-px before:top-0 before:inset-x-0"
           >
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-12 leading-[3rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-lg-dt-shared input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err rounded-t-none input-tbb-hidden"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-12 leading-[3rem] rounded-moon-i-sm input-lg-dt-shared rounded-t-none input-tbb-hidden"
               placeholder="Password"
               type="password"
             />
@@ -1633,14 +1633,14 @@ Object {
         class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-xs"
       >
         <input
-          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-8 leading-8 rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
+          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-8 leading-8 rounded-moon-i-xs input-dt-shared [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
           placeholder="Username"
         />
         <div
           class="relative last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity before:h-px before:top-0 before:inset-x-0"
         >
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-8 leading-8 rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err rounded-t-none input-tbb-hidden"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-8 leading-8 rounded-moon-i-xs input-dt-shared rounded-t-none input-tbb-hidden"
             placeholder="Password"
             type="password"
           />
@@ -1650,14 +1650,14 @@ Object {
         class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm"
       >
         <input
-          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
+          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
           placeholder="Username"
         />
         <div
           class="relative last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity before:h-px before:top-0 before:inset-x-0"
         >
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err rounded-t-none input-tbb-hidden"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared rounded-t-none input-tbb-hidden"
             placeholder="Password"
             type="password"
           />
@@ -1667,14 +1667,14 @@ Object {
         class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm"
       >
         <input
-          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-12 leading-[3rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-lg-dt-shared input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
+          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-12 leading-[3rem] rounded-moon-i-sm input-lg-dt-shared [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
           placeholder="Username"
         />
         <div
           class="relative last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity before:h-px before:top-0 before:inset-x-0"
         >
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-12 leading-[3rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-lg-dt-shared input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err rounded-t-none input-tbb-hidden"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-12 leading-[3rem] rounded-moon-i-sm input-lg-dt-shared rounded-t-none input-tbb-hidden"
             placeholder="Password"
             type="password"
           />
@@ -1748,14 +1748,14 @@ Object {
           class="flex border-none relative h-fit bg-goku flex-col rounded-moon-i-sm shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-error"
         >
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
             placeholder="Username"
           />
           <div
             class="relative last-element before:absolute before:block hover:before:hidden before:transition-opacity before:h-px before:top-0 before:inset-x-0 before:bg-chichi"
           >
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err rounded-t-none input-tbb-hidden"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err rounded-t-none input-tbb-hidden"
               placeholder="Password"
               type="password"
             />
@@ -1765,14 +1765,14 @@ Object {
           class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm"
         >
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
             placeholder="Username"
           />
           <div
             class="relative last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity before:h-px before:top-0 before:inset-x-0"
           >
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err rounded-t-none input-tbb-hidden"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared rounded-t-none input-tbb-hidden"
               placeholder="Password"
               type="password"
             />
@@ -1782,7 +1782,7 @@ Object {
           class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm"
         >
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err opacity-60 cursor-not-allowed [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared opacity-60 cursor-not-allowed [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
             disabled=""
             placeholder="Username"
           />
@@ -1790,7 +1790,7 @@ Object {
             class="relative last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity before:h-px before:top-0 before:inset-x-0"
           >
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err opacity-60 cursor-not-allowed rounded-t-none input-tbb-hidden"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared opacity-60 cursor-not-allowed rounded-t-none input-tbb-hidden"
               disabled=""
               placeholder="Password"
               type="password"
@@ -1801,7 +1801,7 @@ Object {
           class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm"
         >
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
             placeholder="Username"
             readonly=""
           />
@@ -1809,7 +1809,7 @@ Object {
             class="relative last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity before:h-px before:top-0 before:inset-x-0"
           >
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err rounded-t-none input-tbb-hidden"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared rounded-t-none input-tbb-hidden"
               placeholder="Password"
               readonly=""
               type="password"
@@ -1827,14 +1827,14 @@ Object {
         class="flex border-none relative h-fit bg-goku flex-col rounded-moon-i-sm shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-error"
       >
         <input
-          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
+          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
           placeholder="Username"
         />
         <div
           class="relative last-element before:absolute before:block hover:before:hidden before:transition-opacity before:h-px before:top-0 before:inset-x-0 before:bg-chichi"
         >
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err rounded-t-none input-tbb-hidden"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err rounded-t-none input-tbb-hidden"
             placeholder="Password"
             type="password"
           />
@@ -1844,14 +1844,14 @@ Object {
         class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm"
       >
         <input
-          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
+          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
           placeholder="Username"
         />
         <div
           class="relative last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity before:h-px before:top-0 before:inset-x-0"
         >
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err rounded-t-none input-tbb-hidden"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared rounded-t-none input-tbb-hidden"
             placeholder="Password"
             type="password"
           />
@@ -1861,7 +1861,7 @@ Object {
         class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm"
       >
         <input
-          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err opacity-60 cursor-not-allowed [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
+          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared opacity-60 cursor-not-allowed [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
           disabled=""
           placeholder="Username"
         />
@@ -1869,7 +1869,7 @@ Object {
           class="relative last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity before:h-px before:top-0 before:inset-x-0"
         >
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err opacity-60 cursor-not-allowed rounded-t-none input-tbb-hidden"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared opacity-60 cursor-not-allowed rounded-t-none input-tbb-hidden"
             disabled=""
             placeholder="Password"
             type="password"
@@ -1880,7 +1880,7 @@ Object {
         class="flex border-none shadow-input relative h-fit bg-goku flex-col rounded-moon-i-sm"
       >
         <input
-          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
+          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-b-none input-bbb-hidden"
           placeholder="Username"
           readonly=""
         />
@@ -1888,7 +1888,7 @@ Object {
           class="relative last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity before:h-px before:top-0 before:inset-x-0"
         >
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err rounded-t-none input-tbb-hidden"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared rounded-t-none input-tbb-hidden"
             placeholder="Password"
             readonly=""
             type="password"
@@ -1966,11 +1966,11 @@ Object {
             class="w-full max-w-full relative rounded-moon-i-sm bg-goku [&_+_.last-element:before]:hover:opacity-0 [&_input]:rounded-b-none [&_input]:input-bbb-hidden"
           >
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
               placeholder="Placeholder 1"
             />
             <label
-              class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+              class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
             >
               Label
             </label>
@@ -1979,11 +1979,11 @@ Object {
             class="w-full max-w-full relative rounded-moon-i-sm bg-goku last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity [&_input]:rounded-t-none [&_input]:input-tbb-hidden before:h-px before:top-0 before:inset-x-0"
           >
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
               placeholder="Placeholder 2"
             />
             <label
-              class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+              class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
             >
               Label
             </label>
@@ -1996,11 +1996,11 @@ Object {
             class="w-full max-w-full relative rounded-moon-i-sm bg-goku [&_+_.last-element:before]:hover:opacity-0 [&_input]:rounded-e-none rtl:[&_input]:input-lsb-hidden ltr:[&_input]:input-rsb-hidden flex-1 basis-1/2"
           >
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
               placeholder="Placeholder 1"
             />
             <label
-              class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+              class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
             >
               Label
             </label>
@@ -2009,11 +2009,11 @@ Object {
             class="w-full max-w-full relative rounded-moon-i-sm bg-goku last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity [&_input]:rounded-s-none rtl:[&_input]:input-rsb-hidden ltr:[&_input]:input-lsb-hidden flex-1 basis-1/2 before:w-px before:start-0 before:inset-y-0"
           >
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
               placeholder="Placeholder 2"
             />
             <label
-              class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+              class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
             >
               Label
             </label>
@@ -2070,7 +2070,7 @@ Object {
             class="relative last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity before:h-px before:top-0 before:inset-x-0"
           >
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err rounded-t-none input-tbb-hidden"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared rounded-t-none input-tbb-hidden"
               placeholder="Phone number"
             />
           </div>
@@ -2079,7 +2079,7 @@ Object {
           class="flex border-none shadow-input relative h-fit bg-goku flex-row rounded-moon-i-sm"
         >
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-e-none rtl:input-lsb-hidden ltr:input-rsb-hidden flex-1 basis-1/2"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-e-none rtl:input-lsb-hidden ltr:input-rsb-hidden flex-1 basis-1/2"
             placeholder="Street"
           />
           <span
@@ -2183,10 +2183,10 @@ Object {
           >
             <input
               aria-label="Phone number"
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
             />
             <label
-              class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+              class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
             >
               Phone number
             </label>
@@ -2199,11 +2199,11 @@ Object {
             class="w-full max-w-full relative rounded-moon-i-sm bg-goku [&_+_.last-element:before]:hover:opacity-0 [&_input]:rounded-e-none rtl:[&_input]:input-lsb-hidden ltr:[&_input]:input-rsb-hidden flex-1 basis-1/2"
           >
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
               placeholder="Put your name..."
             />
             <label
-              class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+              class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
             >
               Name
             </label>
@@ -2271,11 +2271,11 @@ Object {
           class="w-full max-w-full relative rounded-moon-i-sm bg-goku [&_+_.last-element:before]:hover:opacity-0 [&_input]:rounded-b-none [&_input]:input-bbb-hidden"
         >
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
             placeholder="Placeholder 1"
           />
           <label
-            class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+            class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
           >
             Label
           </label>
@@ -2284,11 +2284,11 @@ Object {
           class="w-full max-w-full relative rounded-moon-i-sm bg-goku last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity [&_input]:rounded-t-none [&_input]:input-tbb-hidden before:h-px before:top-0 before:inset-x-0"
         >
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
             placeholder="Placeholder 2"
           />
           <label
-            class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+            class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
           >
             Label
           </label>
@@ -2301,11 +2301,11 @@ Object {
           class="w-full max-w-full relative rounded-moon-i-sm bg-goku [&_+_.last-element:before]:hover:opacity-0 [&_input]:rounded-e-none rtl:[&_input]:input-lsb-hidden ltr:[&_input]:input-rsb-hidden flex-1 basis-1/2"
         >
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
             placeholder="Placeholder 1"
           />
           <label
-            class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+            class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
           >
             Label
           </label>
@@ -2314,11 +2314,11 @@ Object {
           class="w-full max-w-full relative rounded-moon-i-sm bg-goku last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity [&_input]:rounded-s-none rtl:[&_input]:input-rsb-hidden ltr:[&_input]:input-lsb-hidden flex-1 basis-1/2 before:w-px before:start-0 before:inset-y-0"
         >
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
             placeholder="Placeholder 2"
           />
           <label
-            class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+            class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
           >
             Label
           </label>
@@ -2375,7 +2375,7 @@ Object {
           class="relative last-element before:absolute before:block before:bg-beerus hover:before:hidden before:transition-opacity before:h-px before:top-0 before:inset-x-0"
         >
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err rounded-t-none input-tbb-hidden"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared rounded-t-none input-tbb-hidden"
             placeholder="Phone number"
           />
         </div>
@@ -2384,7 +2384,7 @@ Object {
         class="flex border-none shadow-input relative h-fit bg-goku flex-row rounded-moon-i-sm"
       >
         <input
-          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-e-none rtl:input-lsb-hidden ltr:input-rsb-hidden flex-1 basis-1/2"
+          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared [&_+_.last-element:before]:hover:opacity-0 [&_+_.last-element:before]:focus:opacity-0 rounded-e-none rtl:input-lsb-hidden ltr:input-rsb-hidden flex-1 basis-1/2"
           placeholder="Street"
         />
         <span
@@ -2488,10 +2488,10 @@ Object {
         >
           <input
             aria-label="Phone number"
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
           />
           <label
-            class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+            class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
           >
             Phone number
           </label>
@@ -2504,11 +2504,11 @@ Object {
           class="w-full max-w-full relative rounded-moon-i-sm bg-goku [&_+_.last-element:before]:hover:opacity-0 [&_input]:rounded-e-none rtl:[&_input]:input-lsb-hidden ltr:[&_input]:input-rsb-hidden flex-1 basis-1/2"
         >
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
             placeholder="Put your name..."
           />
           <label
-            class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+            class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
           >
             Name
           </label>
diff --git a/next-docs/public/examples/input/__tests__/__snapshots__/index.test.tsx.snap b/next-docs/public/examples/input/__tests__/__snapshots__/index.test.tsx.snap
index 25323f6234..ea0f0a3c02 100644
--- a/next-docs/public/examples/input/__tests__/__snapshots__/index.test.tsx.snap
+++ b/next-docs/public/examples/input/__tests__/__snapshots__/index.test.tsx.snap
@@ -21,7 +21,7 @@ Object {
               Medium (Default: md)
             </label>
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err bg-beerus text-piccolo"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared bg-beerus text-piccolo"
               id="custom-style"
               placeholder="Placeholder"
               type="text"
@@ -54,7 +54,7 @@ Object {
             Medium (Default: md)
           </label>
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err bg-beerus text-piccolo"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared bg-beerus text-piccolo"
             id="custom-style"
             placeholder="Placeholder"
             type="text"
@@ -133,7 +133,7 @@ Object {
       >
         <input
           aria-label="default"
-          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared"
         />
       </div>
     </div>
@@ -144,7 +144,7 @@ Object {
     >
       <input
         aria-label="default"
-        class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+        class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared"
       />
     </div>
   </div>,
@@ -223,7 +223,7 @@ Object {
               Small (sm)
             </label>
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-8 leading-8 rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-8 leading-8 rounded-moon-i-xs input-dt-shared"
               id="size-sm"
               placeholder="Placeholder"
               type="text"
@@ -239,7 +239,7 @@ Object {
               Medium (Default: md)
             </label>
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared"
               id="size-md"
               placeholder="Placeholder"
               type="text"
@@ -255,7 +255,7 @@ Object {
               Large (lg)
             </label>
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-12 leading-[3rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-lg-dt-shared input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-12 leading-[3rem] rounded-moon-i-sm input-lg-dt-shared"
               id="size-lg"
               placeholder="Placeholder"
               type="text"
@@ -282,7 +282,7 @@ Object {
             Small (sm)
           </label>
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-8 leading-8 rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-8 leading-8 rounded-moon-i-xs input-dt-shared"
             id="size-sm"
             placeholder="Placeholder"
             type="text"
@@ -298,7 +298,7 @@ Object {
             Medium (Default: md)
           </label>
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared"
             id="size-md"
             placeholder="Placeholder"
             type="text"
@@ -314,7 +314,7 @@ Object {
             Large (lg)
           </label>
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-12 leading-[3rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-lg-dt-shared input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-12 leading-[3rem] rounded-moon-i-sm input-lg-dt-shared"
             id="size-lg"
             placeholder="Placeholder"
             type="text"
@@ -398,7 +398,7 @@ Object {
               Label
             </label>
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err opacity-60 cursor-not-allowed"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared opacity-60 cursor-not-allowed"
               disabled=""
               id="disabled-state"
               placeholder="Disabled"
@@ -421,7 +421,7 @@ Object {
               Label
             </label>
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err"
               id="error-state"
               placeholder="Error"
               type="text"
@@ -443,7 +443,7 @@ Object {
               Label
             </label>
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared"
               id="readonly-state"
               placeholder="Placeholder"
               readonly=""
@@ -478,7 +478,7 @@ Object {
             Label
           </label>
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err opacity-60 cursor-not-allowed"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared opacity-60 cursor-not-allowed"
             disabled=""
             id="disabled-state"
             placeholder="Disabled"
@@ -501,7 +501,7 @@ Object {
             Label
           </label>
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err"
             id="error-state"
             placeholder="Error"
             type="text"
@@ -523,7 +523,7 @@ Object {
             Label
           </label>
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared"
             id="readonly-state"
             placeholder="Placeholder"
             readonly=""
@@ -614,7 +614,7 @@ Object {
               Number
             </label>
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-number-clear input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared input-number-clear"
               placeholder="e.g. 12345"
               type="number"
             />
@@ -629,7 +629,7 @@ Object {
             </label>
             <input
               aria-label="Date"
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-d input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared ltr:input-d rtl:input-d-rtl"
               max="9999-12-31"
               type="date"
             />
@@ -644,7 +644,7 @@ Object {
               Time
             </label>
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-t input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared ltr:input-t rtl:input-t-rtl"
               id="time-type"
               type="time"
             />
@@ -663,7 +663,7 @@ Object {
               Datetime local
             </label>
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-d input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared ltr:input-d rtl:input-dt-local-rtl"
               id="datetimelocal-type"
               max="9999-12-31T23:59"
               type="datetime-local"
@@ -678,7 +678,7 @@ Object {
               Email
             </label>
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared"
               placeholder="e.g. john.doe@domain.com"
               type="email"
             />
@@ -692,7 +692,7 @@ Object {
               Password
             </label>
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared"
               placeholder="Password"
               type="password"
             />
@@ -710,7 +710,7 @@ Object {
               Search
             </label>
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared"
               placeholder="e.g. Search something"
               type="search"
             />
@@ -724,7 +724,7 @@ Object {
               Tel
             </label>
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared"
               placeholder="e.g. +372 123 4567"
               type="tel"
             />
@@ -738,7 +738,7 @@ Object {
               Url
             </label>
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared"
               placeholder="e.g. https://domain.com"
               type="url"
             />
@@ -763,7 +763,7 @@ Object {
             Number
           </label>
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-number-clear input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared input-number-clear"
             placeholder="e.g. 12345"
             type="number"
           />
@@ -778,7 +778,7 @@ Object {
           </label>
           <input
             aria-label="Date"
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-d input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared ltr:input-d rtl:input-d-rtl"
             max="9999-12-31"
             type="date"
           />
@@ -793,7 +793,7 @@ Object {
             Time
           </label>
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-t input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared ltr:input-t rtl:input-t-rtl"
             id="time-type"
             type="time"
           />
@@ -812,7 +812,7 @@ Object {
             Datetime local
           </label>
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-d input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared ltr:input-d rtl:input-dt-local-rtl"
             id="datetimelocal-type"
             max="9999-12-31T23:59"
             type="datetime-local"
@@ -827,7 +827,7 @@ Object {
             Email
           </label>
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared"
             placeholder="e.g. john.doe@domain.com"
             type="email"
           />
@@ -841,7 +841,7 @@ Object {
             Password
           </label>
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared"
             placeholder="Password"
             type="password"
           />
@@ -859,7 +859,7 @@ Object {
             Search
           </label>
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared"
             placeholder="e.g. Search something"
             type="search"
           />
@@ -873,7 +873,7 @@ Object {
             Tel
           </label>
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared"
             placeholder="e.g. +372 123 4567"
             type="tel"
           />
@@ -887,7 +887,7 @@ Object {
             Url
           </label>
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared"
             placeholder="e.g. https://domain.com"
             type="url"
           />
@@ -967,7 +967,7 @@ Object {
             Medium (Default: md)
           </label>
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err bg-beerus text-piccolo"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared bg-beerus text-piccolo"
             id="custom-style"
             placeholder="Placeholder"
             type="text"
@@ -996,7 +996,7 @@ Object {
           Medium (Default: md)
         </label>
         <input
-          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err bg-beerus text-piccolo"
+          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared bg-beerus text-piccolo"
           id="custom-style"
           placeholder="Placeholder"
           type="text"
@@ -1071,14 +1071,14 @@ Object {
     <div>
       <input
         aria-label="default"
-        class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+        class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared"
       />
     </div>
   </body>,
   "container": <div>
     <input
       aria-label="default"
-      class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+      class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared"
     />
   </div>,
   "debug": [Function],
@@ -1153,7 +1153,7 @@ Object {
             Small (sm)
           </label>
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-8 leading-8 rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-8 leading-8 rounded-moon-i-xs input-dt-shared"
             id="size-sm"
             placeholder="Placeholder"
             type="text"
@@ -1169,7 +1169,7 @@ Object {
             Medium (Default: md)
           </label>
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared"
             id="size-md"
             placeholder="Placeholder"
             type="text"
@@ -1185,7 +1185,7 @@ Object {
             Large (lg)
           </label>
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-12 leading-[3rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-lg-dt-shared input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-12 leading-[3rem] rounded-moon-i-sm input-lg-dt-shared"
             id="size-lg"
             placeholder="Placeholder"
             type="text"
@@ -1208,7 +1208,7 @@ Object {
           Small (sm)
         </label>
         <input
-          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-8 leading-8 rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-8 leading-8 rounded-moon-i-xs input-dt-shared"
           id="size-sm"
           placeholder="Placeholder"
           type="text"
@@ -1224,7 +1224,7 @@ Object {
           Medium (Default: md)
         </label>
         <input
-          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared"
           id="size-md"
           placeholder="Placeholder"
           type="text"
@@ -1240,7 +1240,7 @@ Object {
           Large (lg)
         </label>
         <input
-          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-12 leading-[3rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-lg-dt-shared input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-12 leading-[3rem] rounded-moon-i-sm input-lg-dt-shared"
           id="size-lg"
           placeholder="Placeholder"
           type="text"
@@ -1320,7 +1320,7 @@ Object {
             Label
           </label>
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err opacity-60 cursor-not-allowed"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared opacity-60 cursor-not-allowed"
             disabled=""
             id="disabled-state"
             placeholder="Disabled"
@@ -1343,7 +1343,7 @@ Object {
             Label
           </label>
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err"
             id="error-state"
             placeholder="Error"
             type="text"
@@ -1365,7 +1365,7 @@ Object {
             Label
           </label>
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared"
             id="readonly-state"
             placeholder="Placeholder"
             readonly=""
@@ -1396,7 +1396,7 @@ Object {
           Label
         </label>
         <input
-          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err opacity-60 cursor-not-allowed"
+          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared opacity-60 cursor-not-allowed"
           disabled=""
           id="disabled-state"
           placeholder="Disabled"
@@ -1419,7 +1419,7 @@ Object {
           Label
         </label>
         <input
-          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err"
           id="error-state"
           placeholder="Error"
           type="text"
@@ -1441,7 +1441,7 @@ Object {
           Label
         </label>
         <input
-          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared"
           id="readonly-state"
           placeholder="Placeholder"
           readonly=""
@@ -1528,7 +1528,7 @@ Object {
             Number
           </label>
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-number-clear input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared input-number-clear"
             placeholder="e.g. 12345"
             type="number"
           />
@@ -1543,7 +1543,7 @@ Object {
           </label>
           <input
             aria-label="Date"
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-d input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared ltr:input-d rtl:input-d-rtl"
             max="9999-12-31"
             type="date"
           />
@@ -1558,7 +1558,7 @@ Object {
             Time
           </label>
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-t input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared ltr:input-t rtl:input-t-rtl"
             id="time-type"
             type="time"
           />
@@ -1577,7 +1577,7 @@ Object {
             Datetime local
           </label>
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-d input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared ltr:input-d rtl:input-dt-local-rtl"
             id="datetimelocal-type"
             max="9999-12-31T23:59"
             type="datetime-local"
@@ -1592,7 +1592,7 @@ Object {
             Email
           </label>
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared"
             placeholder="e.g. john.doe@domain.com"
             type="email"
           />
@@ -1606,7 +1606,7 @@ Object {
             Password
           </label>
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared"
             placeholder="Password"
             type="password"
           />
@@ -1624,7 +1624,7 @@ Object {
             Search
           </label>
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared"
             placeholder="e.g. Search something"
             type="search"
           />
@@ -1638,7 +1638,7 @@ Object {
             Tel
           </label>
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared"
             placeholder="e.g. +372 123 4567"
             type="tel"
           />
@@ -1652,7 +1652,7 @@ Object {
             Url
           </label>
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared"
             placeholder="e.g. https://domain.com"
             type="url"
           />
@@ -1673,7 +1673,7 @@ Object {
           Number
         </label>
         <input
-          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-number-clear input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared input-number-clear"
           placeholder="e.g. 12345"
           type="number"
         />
@@ -1688,7 +1688,7 @@ Object {
         </label>
         <input
           aria-label="Date"
-          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-d input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared ltr:input-d rtl:input-d-rtl"
           max="9999-12-31"
           type="date"
         />
@@ -1703,7 +1703,7 @@ Object {
           Time
         </label>
         <input
-          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-t input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared ltr:input-t rtl:input-t-rtl"
           id="time-type"
           type="time"
         />
@@ -1722,7 +1722,7 @@ Object {
           Datetime local
         </label>
         <input
-          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-d input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared ltr:input-d rtl:input-dt-local-rtl"
           id="datetimelocal-type"
           max="9999-12-31T23:59"
           type="datetime-local"
@@ -1737,7 +1737,7 @@ Object {
           Email
         </label>
         <input
-          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared"
           placeholder="e.g. john.doe@domain.com"
           type="email"
         />
@@ -1751,7 +1751,7 @@ Object {
           Password
         </label>
         <input
-          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared"
           placeholder="Password"
           type="password"
         />
@@ -1769,7 +1769,7 @@ Object {
           Search
         </label>
         <input
-          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared"
           placeholder="e.g. Search something"
           type="search"
         />
@@ -1783,7 +1783,7 @@ Object {
           Tel
         </label>
         <input
-          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared"
           placeholder="e.g. +372 123 4567"
           type="tel"
         />
@@ -1797,7 +1797,7 @@ Object {
           Url
         </label>
         <input
-          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared"
           placeholder="e.g. https://domain.com"
           type="url"
         />
diff --git a/next-docs/public/examples/insetInput/Default.tsx b/next-docs/public/examples/insetInput/Default.tsx
index 575e382f55..6b07ce9378 100644
--- a/next-docs/public/examples/insetInput/Default.tsx
+++ b/next-docs/public/examples/insetInput/Default.tsx
@@ -1,7 +1,7 @@
 import { InsetInput } from '@heathmont/moon-core-tw';
 
 const Example = () => (
-  <InsetInput placeholder="Placeholder">
+  <InsetInput placeholder="Placeholder" autoComplete="country-name">
     <InsetInput.Label>Label</InsetInput.Label>
   </InsetInput>
 );
diff --git a/next-docs/public/examples/insetInput/__tests__/__snapshots__/index.test.tsx.snap b/next-docs/public/examples/insetInput/__tests__/__snapshots__/index.test.tsx.snap
index c6ff6e2f9b..f7801eecc4 100644
--- a/next-docs/public/examples/insetInput/__tests__/__snapshots__/index.test.tsx.snap
+++ b/next-docs/public/examples/insetInput/__tests__/__snapshots__/index.test.tsx.snap
@@ -18,11 +18,11 @@ Object {
               class="w-full max-w-full relative rounded-moon-i-sm bg-beerus [&_input]:text-piccolo"
             >
               <input
-                class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+                class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
                 placeholder="Placeholder"
               />
               <label
-                class="absolute text-moon-12 top-3 z-[1] transition-all ease-in-out duration-200 start-4 text-piccolo"
+                class="absolute text-moon-12 top-3 z-[2] transition-all ease-in-out duration-200 start-4 text-piccolo"
               >
                 Label
               </label>
@@ -52,11 +52,11 @@ Object {
             class="w-full max-w-full relative rounded-moon-i-sm bg-beerus [&_input]:text-piccolo"
           >
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
               placeholder="Placeholder"
             />
             <label
-              class="absolute text-moon-12 top-3 z-[1] transition-all ease-in-out duration-200 start-4 text-piccolo"
+              class="absolute text-moon-12 top-3 z-[2] transition-all ease-in-out duration-200 start-4 text-piccolo"
             >
               Label
             </label>
@@ -137,11 +137,12 @@ Object {
           class="w-full max-w-full relative rounded-moon-i-sm bg-goku"
         >
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            autocomplete="country-name"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
             placeholder="Placeholder"
           />
           <label
-            class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+            class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
           >
             Label
           </label>
@@ -157,11 +158,12 @@ Object {
         class="w-full max-w-full relative rounded-moon-i-sm bg-goku"
       >
         <input
-          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+          autocomplete="country-name"
+          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
           placeholder="Placeholder"
         />
         <label
-          class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+          class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
         >
           Label
         </label>
@@ -240,12 +242,12 @@ Object {
               class="w-full max-w-full relative rounded-moon-i-sm bg-goku opacity-60 cursor-not-allowed"
             >
               <input
-                class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err opacity-60 cursor-not-allowed"
+                class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label opacity-60 cursor-not-allowed"
                 disabled=""
                 placeholder="Placeholder"
               />
               <label
-                class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+                class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
               >
                 Label
               </label>
@@ -264,11 +266,11 @@ Object {
               class="w-full max-w-full relative rounded-moon-i-sm bg-goku"
             >
               <input
-                class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent focus:outline-none focus-visible::outline-none shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+                class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent focus:outline-none focus-visible::outline-none shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
                 placeholder="Placeholder"
               />
               <label
-                class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+                class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
               >
                 Label
               </label>
@@ -287,13 +289,13 @@ Object {
               class="w-full max-w-full relative rounded-moon-i-sm bg-goku"
             >
               <input
-                class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+                class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
                 placeholder="Placeholder"
                 readonly=""
                 value="Read only text"
               />
               <label
-                class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+                class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
               >
                 Label
               </label>
@@ -323,12 +325,12 @@ Object {
             class="w-full max-w-full relative rounded-moon-i-sm bg-goku opacity-60 cursor-not-allowed"
           >
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err opacity-60 cursor-not-allowed"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label opacity-60 cursor-not-allowed"
               disabled=""
               placeholder="Placeholder"
             />
             <label
-              class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+              class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
             >
               Label
             </label>
@@ -347,11 +349,11 @@ Object {
             class="w-full max-w-full relative rounded-moon-i-sm bg-goku"
           >
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent focus:outline-none focus-visible::outline-none shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent focus:outline-none focus-visible::outline-none shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
               placeholder="Placeholder"
             />
             <label
-              class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+              class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
             >
               Label
             </label>
@@ -370,13 +372,13 @@ Object {
             class="w-full max-w-full relative rounded-moon-i-sm bg-goku"
           >
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
               placeholder="Placeholder"
               readonly=""
               value="Read only text"
             />
             <label
-              class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+              class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
             >
               Label
             </label>
@@ -460,12 +462,12 @@ Object {
             class="w-full max-w-full relative rounded-moon-i-sm bg-goku"
           >
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-number-clear input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-number-clear input-xl pt-[1.125rem] input-xl-dt-label"
               placeholder="e.g. 12345"
               type="number"
             />
             <label
-              class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+              class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
             >
               Number
             </label>
@@ -475,12 +477,12 @@ Object {
           >
             <input
               aria-label="date"
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input ltr:input-d rtl:input-d-rtl input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err ltr:input-d rtl:input-d-rtl input-xl pt-[1.125rem] input-xl-dt-label"
               max="9999-12-31"
               type="date"
             />
             <label
-              class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+              class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
             >
               Date
             </label>
@@ -490,11 +492,11 @@ Object {
           >
             <input
               aria-label="time"
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input ltr:input-t rtl:input-t-rtl input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err ltr:input-t rtl:input-t-rtl input-xl pt-[1.125rem] input-xl-dt-label"
               type="time"
             />
             <label
-              class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+              class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
             >
               Time
             </label>
@@ -508,12 +510,12 @@ Object {
           >
             <input
               aria-label="datetime-local"
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input ltr:input-d rtl:input-dt-local-rtl input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err ltr:input-d rtl:input-dt-local-rtl input-xl pt-[1.125rem] input-xl-dt-label"
               max="9999-12-31T23:59"
               type="datetime-local"
             />
             <label
-              class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+              class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
             >
               Datetime local
             </label>
@@ -522,12 +524,12 @@ Object {
             class="w-full max-w-full relative rounded-moon-i-sm bg-goku"
           >
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
               placeholder="e.g. john.doe@domain.com"
               type="email"
             />
             <label
-              class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+              class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
             >
               Email
             </label>
@@ -536,12 +538,12 @@ Object {
             class="w-full max-w-full relative rounded-moon-i-sm bg-goku"
           >
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
               placeholder="Password"
               type="password"
             />
             <label
-              class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+              class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
             >
               Password
             </label>
@@ -554,12 +556,12 @@ Object {
             class="w-full max-w-full relative rounded-moon-i-sm bg-goku"
           >
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
               placeholder="e.g. Search something"
               type="search"
             />
             <label
-              class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+              class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
             >
               Search
             </label>
@@ -568,12 +570,12 @@ Object {
             class="w-full max-w-full relative rounded-moon-i-sm bg-goku"
           >
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
               placeholder="e.g. +372 123 4567"
               type="tel"
             />
             <label
-              class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+              class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
             >
               Tel
             </label>
@@ -582,12 +584,12 @@ Object {
             class="w-full max-w-full relative rounded-moon-i-sm bg-goku"
           >
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
               placeholder="e.g. https://domain.com"
               type="url"
             />
             <label
-              class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+              class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
             >
               Url
             </label>
@@ -607,12 +609,12 @@ Object {
           class="w-full max-w-full relative rounded-moon-i-sm bg-goku"
         >
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-number-clear input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-number-clear input-xl pt-[1.125rem] input-xl-dt-label"
             placeholder="e.g. 12345"
             type="number"
           />
           <label
-            class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+            class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
           >
             Number
           </label>
@@ -622,12 +624,12 @@ Object {
         >
           <input
             aria-label="date"
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input ltr:input-d rtl:input-d-rtl input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err ltr:input-d rtl:input-d-rtl input-xl pt-[1.125rem] input-xl-dt-label"
             max="9999-12-31"
             type="date"
           />
           <label
-            class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+            class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
           >
             Date
           </label>
@@ -637,11 +639,11 @@ Object {
         >
           <input
             aria-label="time"
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input ltr:input-t rtl:input-t-rtl input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err ltr:input-t rtl:input-t-rtl input-xl pt-[1.125rem] input-xl-dt-label"
             type="time"
           />
           <label
-            class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+            class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
           >
             Time
           </label>
@@ -655,12 +657,12 @@ Object {
         >
           <input
             aria-label="datetime-local"
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input ltr:input-d rtl:input-dt-local-rtl input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err ltr:input-d rtl:input-dt-local-rtl input-xl pt-[1.125rem] input-xl-dt-label"
             max="9999-12-31T23:59"
             type="datetime-local"
           />
           <label
-            class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+            class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
           >
             Datetime local
           </label>
@@ -669,12 +671,12 @@ Object {
           class="w-full max-w-full relative rounded-moon-i-sm bg-goku"
         >
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
             placeholder="e.g. john.doe@domain.com"
             type="email"
           />
           <label
-            class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+            class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
           >
             Email
           </label>
@@ -683,12 +685,12 @@ Object {
           class="w-full max-w-full relative rounded-moon-i-sm bg-goku"
         >
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
             placeholder="Password"
             type="password"
           />
           <label
-            class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+            class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
           >
             Password
           </label>
@@ -701,12 +703,12 @@ Object {
           class="w-full max-w-full relative rounded-moon-i-sm bg-goku"
         >
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
             placeholder="e.g. Search something"
             type="search"
           />
           <label
-            class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+            class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
           >
             Search
           </label>
@@ -715,12 +717,12 @@ Object {
           class="w-full max-w-full relative rounded-moon-i-sm bg-goku"
         >
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
             placeholder="e.g. +372 123 4567"
             type="tel"
           />
           <label
-            class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+            class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
           >
             Tel
           </label>
@@ -729,12 +731,12 @@ Object {
           class="w-full max-w-full relative rounded-moon-i-sm bg-goku"
         >
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
             placeholder="e.g. https://domain.com"
             type="url"
           />
           <label
-            class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+            class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
           >
             Url
           </label>
@@ -811,11 +813,11 @@ Object {
             class="w-full max-w-full relative rounded-moon-i-sm bg-beerus [&_input]:text-piccolo"
           >
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
               placeholder="Placeholder"
             />
             <label
-              class="absolute text-moon-12 top-3 z-[1] transition-all ease-in-out duration-200 start-4 text-piccolo"
+              class="absolute text-moon-12 top-3 z-[2] transition-all ease-in-out duration-200 start-4 text-piccolo"
             >
               Label
             </label>
@@ -841,11 +843,11 @@ Object {
           class="w-full max-w-full relative rounded-moon-i-sm bg-beerus [&_input]:text-piccolo"
         >
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
             placeholder="Placeholder"
           />
           <label
-            class="absolute text-moon-12 top-3 z-[1] transition-all ease-in-out duration-200 start-4 text-piccolo"
+            class="absolute text-moon-12 top-3 z-[2] transition-all ease-in-out duration-200 start-4 text-piccolo"
           >
             Label
           </label>
@@ -922,11 +924,12 @@ Object {
         class="w-full max-w-full relative rounded-moon-i-sm bg-goku"
       >
         <input
-          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+          autocomplete="country-name"
+          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
           placeholder="Placeholder"
         />
         <label
-          class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+          class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
         >
           Label
         </label>
@@ -938,11 +941,12 @@ Object {
       class="w-full max-w-full relative rounded-moon-i-sm bg-goku"
     >
       <input
-        class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+        autocomplete="country-name"
+        class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
         placeholder="Placeholder"
       />
       <label
-        class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+        class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
       >
         Label
       </label>
@@ -1017,12 +1021,12 @@ Object {
             class="w-full max-w-full relative rounded-moon-i-sm bg-goku opacity-60 cursor-not-allowed"
           >
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err opacity-60 cursor-not-allowed"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label opacity-60 cursor-not-allowed"
               disabled=""
               placeholder="Placeholder"
             />
             <label
-              class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+              class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
             >
               Label
             </label>
@@ -1041,11 +1045,11 @@ Object {
             class="w-full max-w-full relative rounded-moon-i-sm bg-goku"
           >
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent focus:outline-none focus-visible::outline-none shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent focus:outline-none focus-visible::outline-none shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
               placeholder="Placeholder"
             />
             <label
-              class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+              class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
             >
               Label
             </label>
@@ -1064,13 +1068,13 @@ Object {
             class="w-full max-w-full relative rounded-moon-i-sm bg-goku"
           >
             <input
-              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+              class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
               placeholder="Placeholder"
               readonly=""
               value="Read only text"
             />
             <label
-              class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+              class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
             >
               Label
             </label>
@@ -1096,12 +1100,12 @@ Object {
           class="w-full max-w-full relative rounded-moon-i-sm bg-goku opacity-60 cursor-not-allowed"
         >
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err opacity-60 cursor-not-allowed"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label opacity-60 cursor-not-allowed"
             disabled=""
             placeholder="Placeholder"
           />
           <label
-            class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+            class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
           >
             Label
           </label>
@@ -1120,11 +1124,11 @@ Object {
           class="w-full max-w-full relative rounded-moon-i-sm bg-goku"
         >
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent focus:outline-none focus-visible::outline-none shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent focus:outline-none focus-visible::outline-none shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
             placeholder="Placeholder"
           />
           <label
-            class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+            class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
           >
             Label
           </label>
@@ -1143,13 +1147,13 @@ Object {
           class="w-full max-w-full relative rounded-moon-i-sm bg-goku"
         >
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
             placeholder="Placeholder"
             readonly=""
             value="Read only text"
           />
           <label
-            class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+            class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
           >
             Label
           </label>
@@ -1229,12 +1233,12 @@ Object {
           class="w-full max-w-full relative rounded-moon-i-sm bg-goku"
         >
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-number-clear input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-number-clear input-xl pt-[1.125rem] input-xl-dt-label"
             placeholder="e.g. 12345"
             type="number"
           />
           <label
-            class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+            class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
           >
             Number
           </label>
@@ -1244,12 +1248,12 @@ Object {
         >
           <input
             aria-label="date"
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input ltr:input-d rtl:input-d-rtl input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err ltr:input-d rtl:input-d-rtl input-xl pt-[1.125rem] input-xl-dt-label"
             max="9999-12-31"
             type="date"
           />
           <label
-            class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+            class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
           >
             Date
           </label>
@@ -1259,11 +1263,11 @@ Object {
         >
           <input
             aria-label="time"
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input ltr:input-t rtl:input-t-rtl input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err ltr:input-t rtl:input-t-rtl input-xl pt-[1.125rem] input-xl-dt-label"
             type="time"
           />
           <label
-            class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+            class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
           >
             Time
           </label>
@@ -1277,12 +1281,12 @@ Object {
         >
           <input
             aria-label="datetime-local"
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input ltr:input-d rtl:input-dt-local-rtl input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err ltr:input-d rtl:input-dt-local-rtl input-xl pt-[1.125rem] input-xl-dt-label"
             max="9999-12-31T23:59"
             type="datetime-local"
           />
           <label
-            class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+            class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
           >
             Datetime local
           </label>
@@ -1291,12 +1295,12 @@ Object {
           class="w-full max-w-full relative rounded-moon-i-sm bg-goku"
         >
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
             placeholder="e.g. john.doe@domain.com"
             type="email"
           />
           <label
-            class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+            class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
           >
             Email
           </label>
@@ -1305,12 +1309,12 @@ Object {
           class="w-full max-w-full relative rounded-moon-i-sm bg-goku"
         >
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
             placeholder="Password"
             type="password"
           />
           <label
-            class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+            class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
           >
             Password
           </label>
@@ -1323,12 +1327,12 @@ Object {
           class="w-full max-w-full relative rounded-moon-i-sm bg-goku"
         >
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
             placeholder="e.g. Search something"
             type="search"
           />
           <label
-            class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+            class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
           >
             Search
           </label>
@@ -1337,12 +1341,12 @@ Object {
           class="w-full max-w-full relative rounded-moon-i-sm bg-goku"
         >
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
             placeholder="e.g. +372 123 4567"
             type="tel"
           />
           <label
-            class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+            class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
           >
             Tel
           </label>
@@ -1351,12 +1355,12 @@ Object {
           class="w-full max-w-full relative rounded-moon-i-sm bg-goku"
         >
           <input
-            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
             placeholder="e.g. https://domain.com"
             type="url"
           />
           <label
-            class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+            class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
           >
             Url
           </label>
@@ -1372,12 +1376,12 @@ Object {
         class="w-full max-w-full relative rounded-moon-i-sm bg-goku"
       >
         <input
-          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-number-clear input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-number-clear input-xl pt-[1.125rem] input-xl-dt-label"
           placeholder="e.g. 12345"
           type="number"
         />
         <label
-          class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+          class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
         >
           Number
         </label>
@@ -1387,12 +1391,12 @@ Object {
       >
         <input
           aria-label="date"
-          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input ltr:input-d rtl:input-d-rtl input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err ltr:input-d rtl:input-d-rtl input-xl pt-[1.125rem] input-xl-dt-label"
           max="9999-12-31"
           type="date"
         />
         <label
-          class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+          class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
         >
           Date
         </label>
@@ -1402,11 +1406,11 @@ Object {
       >
         <input
           aria-label="time"
-          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input ltr:input-t rtl:input-t-rtl input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err ltr:input-t rtl:input-t-rtl input-xl pt-[1.125rem] input-xl-dt-label"
           type="time"
         />
         <label
-          class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+          class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
         >
           Time
         </label>
@@ -1420,12 +1424,12 @@ Object {
       >
         <input
           aria-label="datetime-local"
-          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input ltr:input-d rtl:input-dt-local-rtl input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err ltr:input-d rtl:input-dt-local-rtl input-xl pt-[1.125rem] input-xl-dt-label"
           max="9999-12-31T23:59"
           type="datetime-local"
         />
         <label
-          class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+          class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
         >
           Datetime local
         </label>
@@ -1434,12 +1438,12 @@ Object {
         class="w-full max-w-full relative rounded-moon-i-sm bg-goku"
       >
         <input
-          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
           placeholder="e.g. john.doe@domain.com"
           type="email"
         />
         <label
-          class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+          class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
         >
           Email
         </label>
@@ -1448,12 +1452,12 @@ Object {
         class="w-full max-w-full relative rounded-moon-i-sm bg-goku"
       >
         <input
-          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
           placeholder="Password"
           type="password"
         />
         <label
-          class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+          class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
         >
           Password
         </label>
@@ -1466,12 +1470,12 @@ Object {
         class="w-full max-w-full relative rounded-moon-i-sm bg-goku"
       >
         <input
-          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
           placeholder="e.g. Search something"
           type="search"
         />
         <label
-          class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+          class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
         >
           Search
         </label>
@@ -1480,12 +1484,12 @@ Object {
         class="w-full max-w-full relative rounded-moon-i-sm bg-goku"
       >
         <input
-          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
           placeholder="e.g. +372 123 4567"
           type="tel"
         />
         <label
-          class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+          class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
         >
           Tel
         </label>
@@ -1494,12 +1498,12 @@ Object {
         class="w-full max-w-full relative rounded-moon-i-sm bg-goku"
       >
         <input
-          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-xl-dt-shared input-xl pt-[1.125rem] input-xl-dt-label invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err"
+          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-transparent shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible:shadow-input-focus focus-visible::outline-none h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err input-xl pt-[1.125rem] input-xl-dt-label"
           placeholder="e.g. https://domain.com"
           type="url"
         />
         <label
-          class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
+          class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
         >
           Url
         </label>
diff --git a/next-docs/public/examples/tagsInput/__tests__/__snapshots__/index.test.tsx.snap b/next-docs/public/examples/tagsInput/__tests__/__snapshots__/index.test.tsx.snap
index 99fdf1da34..744db0a046 100644
--- a/next-docs/public/examples/tagsInput/__tests__/__snapshots__/index.test.tsx.snap
+++ b/next-docs/public/examples/tagsInput/__tests__/__snapshots__/index.test.tsx.snap
@@ -19,7 +19,7 @@ Object {
               class="flex flex-wrap justify-start items-start gap-1"
             />
             <input
-              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
               type="text"
             />
           </span>
@@ -42,7 +42,7 @@ Object {
             class="flex flex-wrap justify-start items-start gap-1"
           />
           <input
-            class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+            class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
             type="text"
           />
         </span>
@@ -135,7 +135,7 @@ Object {
                   class="flex flex-wrap justify-start items-start gap-1"
                 />
                 <input
-                  class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-14 leading-4"
+                  class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-14 leading-4"
                   type="text"
                 />
               </span>
@@ -158,7 +158,7 @@ Object {
                   class="flex flex-wrap justify-start items-start gap-1"
                 />
                 <input
-                  class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+                  class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
                   type="text"
                 />
               </span>
@@ -181,7 +181,7 @@ Object {
                   class="flex flex-wrap justify-start items-start gap-1"
                 />
                 <input
-                  class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-18 leading-5"
+                  class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-18 leading-5"
                   type="text"
                 />
               </span>
@@ -219,7 +219,7 @@ Object {
                 class="flex flex-wrap justify-start items-start gap-1"
               />
               <input
-                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-14 leading-4"
+                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-14 leading-4"
                 type="text"
               />
             </span>
@@ -242,7 +242,7 @@ Object {
                 class="flex flex-wrap justify-start items-start gap-1"
               />
               <input
-                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
                 type="text"
               />
             </span>
@@ -265,7 +265,7 @@ Object {
                 class="flex flex-wrap justify-start items-start gap-1"
               />
               <input
-                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-18 leading-5"
+                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-18 leading-5"
                 type="text"
               />
             </span>
@@ -401,7 +401,7 @@ Object {
                   </div>
                 </div>
                 <input
-                  class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+                  class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
                   type="text"
                 />
               </span>
@@ -465,7 +465,7 @@ Object {
                   </div>
                 </div>
                 <input
-                  class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err opacity-60 cursor-not-allowed flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+                  class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared opacity-60 cursor-not-allowed flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
                   disabled=""
                   type="text"
                 />
@@ -530,7 +530,7 @@ Object {
                   </div>
                 </div>
                 <input
-                  class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+                  class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
                   placeholder="Enter your data here"
                   type="text"
                 />
@@ -610,7 +610,7 @@ Object {
                 </div>
               </div>
               <input
-                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
                 type="text"
               />
             </span>
@@ -674,7 +674,7 @@ Object {
                 </div>
               </div>
               <input
-                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err opacity-60 cursor-not-allowed flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared opacity-60 cursor-not-allowed flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
                 disabled=""
                 type="text"
               />
@@ -739,7 +739,7 @@ Object {
                 </div>
               </div>
               <input
-                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
                 placeholder="Enter your data here"
                 type="text"
               />
@@ -876,7 +876,7 @@ Object {
                   </div>
                 </div>
                 <input
-                  class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+                  class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
                   type="text"
                 />
               </span>
@@ -940,7 +940,7 @@ Object {
                   </div>
                 </div>
                 <input
-                  class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+                  class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
                   type="text"
                 />
               </span>
@@ -1019,7 +1019,7 @@ Object {
                 </div>
               </div>
               <input
-                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
                 type="text"
               />
             </span>
@@ -1083,7 +1083,7 @@ Object {
                 </div>
               </div>
               <input
-                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
                 type="text"
               />
             </span>
@@ -1162,7 +1162,7 @@ Object {
             class="flex flex-wrap justify-start items-start gap-1"
           />
           <input
-            class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+            class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
             type="text"
           />
         </span>
@@ -1181,7 +1181,7 @@ Object {
           class="flex flex-wrap justify-start items-start gap-1"
         />
         <input
-          class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+          class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
           type="text"
         />
       </span>
@@ -1270,7 +1270,7 @@ Object {
                 class="flex flex-wrap justify-start items-start gap-1"
               />
               <input
-                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-14 leading-4"
+                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-14 leading-4"
                 type="text"
               />
             </span>
@@ -1293,7 +1293,7 @@ Object {
                 class="flex flex-wrap justify-start items-start gap-1"
               />
               <input
-                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
                 type="text"
               />
             </span>
@@ -1316,7 +1316,7 @@ Object {
                 class="flex flex-wrap justify-start items-start gap-1"
               />
               <input
-                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-18 leading-5"
+                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-18 leading-5"
                 type="text"
               />
             </span>
@@ -1350,7 +1350,7 @@ Object {
               class="flex flex-wrap justify-start items-start gap-1"
             />
             <input
-              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-14 leading-4"
+              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-14 leading-4"
               type="text"
             />
           </span>
@@ -1373,7 +1373,7 @@ Object {
               class="flex flex-wrap justify-start items-start gap-1"
             />
             <input
-              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
               type="text"
             />
           </span>
@@ -1396,7 +1396,7 @@ Object {
               class="flex flex-wrap justify-start items-start gap-1"
             />
             <input
-              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-18 leading-5"
+              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-18 leading-5"
               type="text"
             />
           </span>
@@ -1528,7 +1528,7 @@ Object {
                 </div>
               </div>
               <input
-                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
                 type="text"
               />
             </span>
@@ -1592,7 +1592,7 @@ Object {
                 </div>
               </div>
               <input
-                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err opacity-60 cursor-not-allowed flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared opacity-60 cursor-not-allowed flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
                 disabled=""
                 type="text"
               />
@@ -1657,7 +1657,7 @@ Object {
                 </div>
               </div>
               <input
-                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
                 placeholder="Enter your data here"
                 type="text"
               />
@@ -1733,7 +1733,7 @@ Object {
               </div>
             </div>
             <input
-              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
               type="text"
             />
           </span>
@@ -1797,7 +1797,7 @@ Object {
               </div>
             </div>
             <input
-              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err opacity-60 cursor-not-allowed flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared opacity-60 cursor-not-allowed flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
               disabled=""
               type="text"
             />
@@ -1862,7 +1862,7 @@ Object {
               </div>
             </div>
             <input
-              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
               placeholder="Enter your data here"
               type="text"
             />
@@ -1995,7 +1995,7 @@ Object {
                 </div>
               </div>
               <input
-                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
                 type="text"
               />
             </span>
@@ -2059,7 +2059,7 @@ Object {
                 </div>
               </div>
               <input
-                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
                 type="text"
               />
             </span>
@@ -2134,7 +2134,7 @@ Object {
               </div>
             </div>
             <input
-              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
               type="text"
             />
           </span>
@@ -2198,7 +2198,7 @@ Object {
               </div>
             </div>
             <input
-              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
+              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err rounded-moon-i-sm input-dt-shared flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
               type="text"
             />
           </span>
diff --git a/workspaces/core/src/input/Input.tsx b/workspaces/core/src/input/Input.tsx
index 7a8bd9f091..09d9d09963 100644
--- a/workspaces/core/src/input/Input.tsx
+++ b/workspaces/core/src/input/Input.tsx
@@ -2,6 +2,7 @@ import React, { forwardRef } from 'react';
 import type InputProps from './private/types/InputProps';
 import getMaxDate from './private/utils/getMaxDate';
 import getSizeStyles from './private/utils/getSizeStyles';
+import getTypeStyles from './private/utils/getTypeStyles';
 import useFormContext from '../form/private/utils/useFormContext';
 import useFormItemContext from '../form/private/utils/useFormItemContext';
 import mergeClassnames from '../mergeClassnames/mergeClassnames';
@@ -14,7 +15,6 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
       size: inputSize,
       error: inputError,
       disabled: inputDisabled,
-      isRtl,
       id,
       ...rest
     },
@@ -37,26 +37,19 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
         disabled={disabled}
         max={getMaxDate(type)}
         className={mergeClassnames(
-          'block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2]',
-          'bg-goku shadow-input hover:shadow-input-hov',
-          'focus:shadow-input-focus focus:outline-none',
-          'focus-visible::shadow-input-focus focus-visible::outline-none',
+          'block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma',
+          'transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov',
+          'focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus',
+          'focus-visible::outline-none before:box-border after:box-border placeholder:delay-75',
+          'placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity',
+          'read-only:outline-0 read-only:border-none read-only:cursor-not-allowed',
+          'read-only:hover:shadow-input read-only:focus:shadow-input',
+          'read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err',
+          'invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err',
+          getSizeStyles(size),
+          getTypeStyles(type),
           error &&
             'shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err',
-          getSizeStyles(size),
-          'before:box-border after:box-border',
-          'placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75',
-          'read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input',
-          type === 'number' && 'input-number-clear',
-          type === 'date' && 'input-d',
-          type === 'date' && isRtl && 'input-d-rtl',
-          type === 'time' && 'input-t',
-          type === 'time' && isRtl && 'input-t-rtl',
-          type === 'datetime-local' && 'input-d',
-          type === 'datetime-local' && isRtl && 'input-dt-local-rtl',
-          size === 'lg' && 'input-lg-dt-shared',
-          'input-dt-shared',
-          'invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err',
           disabled && 'opacity-60 cursor-not-allowed',
           className && className
         )}
diff --git a/workspaces/core/src/input/private/utils/getBorderRadius.ts b/workspaces/core/src/input/private/utils/getBorderRadius.ts
deleted file mode 100644
index 337a8d15be..0000000000
--- a/workspaces/core/src/input/private/utils/getBorderRadius.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import type InputProps from '../types/InputProps';
-
-const getBorderRadius = (size?: InputProps['size'] | 'xl'): string => {
-  switch (size) {
-    case 'xl':
-    case 'lg':
-      return 'rounded-moon-i-sm';
-    default:
-      return 'rounded-moon-i-xs';
-  }
-};
-
-export default getBorderRadius;
diff --git a/workspaces/core/src/input/private/utils/getSizeStyles.ts b/workspaces/core/src/input/private/utils/getSizeStyles.ts
index f66552e8f1..ab4f29f84e 100644
--- a/workspaces/core/src/input/private/utils/getSizeStyles.ts
+++ b/workspaces/core/src/input/private/utils/getSizeStyles.ts
@@ -1,15 +1,13 @@
 import type InputProps from '../types/InputProps';
 
-const getSizeStyles = (size?: InputProps['size'] | 'xl'): string => {
+const getSizeStyles = (size?: InputProps['size']): string => {
   switch (size) {
-    case 'xl':
-      return 'h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm';
     case 'lg':
-      return 'h-12 leading-[3rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm';
+      return 'h-12 leading-[3rem] rounded-moon-i-sm input-lg-dt-shared';
     case 'sm':
-      return 'h-8 leading-8 rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs';
+      return 'h-8 leading-8 rounded-moon-i-xs input-dt-shared';
     default:
-      return 'h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm';
+      return 'h-10 leading-10 rounded-moon-i-sm input-dt-shared';
   }
 };
 
diff --git a/workspaces/core/src/input/private/utils/getTypeStyles.ts b/workspaces/core/src/input/private/utils/getTypeStyles.ts
new file mode 100644
index 0000000000..6f6529702b
--- /dev/null
+++ b/workspaces/core/src/input/private/utils/getTypeStyles.ts
@@ -0,0 +1,18 @@
+import type InputProps from '../types/InputProps';
+
+const getTypeStyles = (type?: InputProps['type']): string | undefined => {
+  switch (type) {
+    case 'number':
+      return 'input-number-clear';
+    case 'date':
+      return 'ltr:input-d rtl:input-d-rtl';
+    case 'time':
+      return 'ltr:input-t rtl:input-t-rtl';
+    case 'datetime-local':
+      return 'ltr:input-d rtl:input-dt-local-rtl';
+    default:
+      return;
+  }
+};
+
+export default getTypeStyles;
diff --git a/workspaces/core/src/insetInput/InsetInput.tsx b/workspaces/core/src/insetInput/InsetInput.tsx
index 81078ff902..58cfb18210 100644
--- a/workspaces/core/src/insetInput/InsetInput.tsx
+++ b/workspaces/core/src/insetInput/InsetInput.tsx
@@ -5,6 +5,7 @@ import InsetInputContext from './private/utils/InsetInputContext';
 import useInsetInputContext from './private/utils/useInsetInputContext';
 import useFormItemContext from '../form/private/utils/useFormItemContext';
 import getMaxDate from '../input/private/utils/getMaxDate';
+import getTypeStyles from '../input/private/utils/getTypeStyles';
 import mergeClassnames from '../mergeClassnames/mergeClassnames';
 import useRegisterChild from '../private/utils/useRegisterChild';
 
@@ -32,26 +33,21 @@ const InsetInputRoot = forwardRef<HTMLInputElement, InsetInputProps>(
             disabled={disabled}
             max={getMaxDate(rest.type)}
             className={mergeClassnames(
-              'block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2]',
-              'bg-transparent shadow-input hover:shadow-input-hov',
-              'focus:shadow-input-focus focus:outline-none',
+              'block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma',
+              'transition-shadow box-border relative z-[2] bg-transparent shadow-input',
+              'hover:shadow-input-hov focus:shadow-input-focus focus:outline-none',
               'focus-visible:shadow-input-focus focus-visible::outline-none',
               error &&
                 'shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err',
-              'h-14 leading-[3.5rem] rounded-moon-i-sm',
-              'rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm',
-              'ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm',
-              'before:box-border after:box-border',
-              'placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75',
-              'read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input',
-              rest.type === 'number' && 'input-number-clear',
-              rest.type === 'date' && 'ltr:input-d rtl:input-d-rtl',
-              rest.type === 'time' && 'ltr:input-t rtl:input-t-rtl',
-              rest.type === 'datetime-local' &&
-                'ltr:input-d rtl:input-dt-local-rtl',
-              'input-xl-dt-shared',
+              'h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border',
+              'placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity',
+              'placeholder:delay-75 read-only:outline-0 read-only:border-none',
+              'read-only:cursor-not-allowed read-only:hover:shadow-input',
+              'read-only:focus:shadow-input read-only:focus-visible:shadow-input',
+              'invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared',
+              'invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err',
+              getTypeStyles(rest.type),
               isLabel && 'input-xl pt-[1.125rem] input-xl-dt-label',
-              'invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err',
               disabled && 'opacity-60 cursor-not-allowed'
             )}
             {...rest}
@@ -71,7 +67,7 @@ const Label = ({ children, className }: LabelProps) => {
   return (
     <label
       className={mergeClassnames(
-        'absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200',
+        'absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200',
         'start-4',
         className
       )}

From 3f6835c35c21fe5ea4d268ad1d2f229485141814 Mon Sep 17 00:00:00 2001
From: YulianaYarema <59561179+yarema184@users.noreply.github.com>
Date: Thu, 19 Oct 2023 13:09:33 +0300
Subject: [PATCH 4/7] feat: new examples [MDS-648 MDS-744] (#2431)

* feat: new examples [MDS-648 MDS-744]

* add input date custom examples

* add control example

* fix tests

* fix tests
---
 next-docs/pages/components/input.tsx          |   6 +
 next-docs/public/examples/input/Controled.tsx |  22 ++
 .../public/examples/input/CustomDate.tsx      |  56 +++++
 .../__snapshots__/index.test.tsx.snap         | 206 ++++++++++++++++++
 .../examples/input/__tests__/index.test.tsx   |   9 +
 5 files changed, 299 insertions(+)
 create mode 100644 next-docs/public/examples/input/Controled.tsx
 create mode 100644 next-docs/public/examples/input/CustomDate.tsx

diff --git a/next-docs/pages/components/input.tsx b/next-docs/pages/components/input.tsx
index 35527ecd09..2234263080 100644
--- a/next-docs/pages/components/input.tsx
+++ b/next-docs/pages/components/input.tsx
@@ -4,6 +4,7 @@ import type { ComponentNames } from '../../components/getComponent';
 import Layout from '../../components/Layout';
 import PropsTable from '../../components/PropsTable';
 import Bg from '../../public/examples/input/Bg';
+import Controled from '../../public/examples/input/Controled';
 import Default from '../../public/examples/input/Default';
 import Sizes from '../../public/examples/input/Sizes';
 import States from '../../public/examples/input/States';
@@ -54,6 +55,11 @@ const PageInput = () => {
         preview={<Types />}
         code={examples ? examples.Types : 'Loading'}
       />
+      <Preview
+        title="Controlling an input with a state variable"
+        preview={<Controled />}
+        code={examples ? examples.Controled : 'Loading'}
+      />
       <PropsTable
         title="Input props"
         data={[
diff --git a/next-docs/public/examples/input/Controled.tsx b/next-docs/public/examples/input/Controled.tsx
new file mode 100644
index 0000000000..e17e00c9fa
--- /dev/null
+++ b/next-docs/public/examples/input/Controled.tsx
@@ -0,0 +1,22 @@
+import { Input } from '@heathmont/moon-core-tw';
+import { useState } from 'react';
+
+const Example = () => {
+  const [color, setColor] = useState('FFFFFF');
+  return (
+    <div className="w-full">
+      <Input
+        aria-label="controled"
+        value={color}
+        onChange={(e) => {
+          setColor(e.target.value);
+        }}
+      />
+      <p className="text-moon-18 pt-2">
+        <b>Result:</b> {color}
+      </p>
+    </div>
+  );
+};
+
+export default Example;
diff --git a/next-docs/public/examples/input/CustomDate.tsx b/next-docs/public/examples/input/CustomDate.tsx
new file mode 100644
index 0000000000..d18b21062e
--- /dev/null
+++ b/next-docs/public/examples/input/CustomDate.tsx
@@ -0,0 +1,56 @@
+//This exemple should be discussed about separate date-picker component
+import { Input, Label } from '@heathmont/moon-core-tw';
+import { TimeCalendarDate } from '@heathmont/moon-icons-tw';
+
+const Example = () => (
+  <>
+    <div className="flex flex-col lg:flex-row justify-around items-end w-full gap-2">
+      <div className="w-full">
+        <Label>Date with placeholder</Label>
+        <div className="relative">
+          <Input
+            type="text"
+            aria-label="Date"
+            placeholder="mm.dd.yyyy"
+            className="[&[type='date']::-webkit-calendar-picker-indicator]:bg-none cursor-default [&_.datetime-calendar-button-svg]:hidden"
+            onFocus={(e) => {
+              e.target.type = 'date';
+              e.target?.showPicker();
+            }}
+            onBlur={(e) => (e.target.type = 'text')}
+          />
+          <span className="pointer-events-none absolute top-1/2 right-3 h-6 -mt-3 w-10 bg-goku z-5">
+            <TimeCalendarDate className="text-bulma text-moon-24 absolute top-1/2 right-0 -mt-3" />
+          </span>
+        </div>
+      </div>
+      <div className="w-full">
+        <Label htmlFor="time-type">Time</Label>
+        <div className="relative">
+          <Input
+            type="text"
+            id="time-type"
+            placeholder="Time"
+            className="[&[type='date']::-webkit-calendar-picker-indicator]:bg-none cursor-default"
+            onFocus={(e) => {
+              e.target.type = 'time';
+              e.target?.showPicker();
+            }}
+            onBlur={(e) => (e.target.type = 'text')}
+          />
+          <TimeCalendarDate className="text-bulma text-moon-24 absolute top-1/2 right-3 z-5 -mt-3" />
+        </div>
+      </div>
+      <div className="w-full">
+        <Label htmlFor="datetimelocal-type">Datetime local</Label>
+        <Input
+          type="datetime-local"
+          id="datetimelocal-type"
+          className="[&[type='date']::-webkit-calendar-picker-indicator]:bg-none cursor-default [&_#calendar-button]:hidden"
+        />
+      </div>
+    </div>
+  </>
+);
+
+export default Example;
diff --git a/next-docs/public/examples/input/__tests__/__snapshots__/index.test.tsx.snap b/next-docs/public/examples/input/__tests__/__snapshots__/index.test.tsx.snap
index ea0f0a3c02..84cc62364d 100644
--- a/next-docs/public/examples/input/__tests__/__snapshots__/index.test.tsx.snap
+++ b/next-docs/public/examples/input/__tests__/__snapshots__/index.test.tsx.snap
@@ -123,6 +123,113 @@ Object {
 }
 `;
 
+exports[`Input in RTL renders Controled 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        dir="rtl"
+      >
+        <div
+          class="w-full"
+        >
+          <input
+            aria-label="controled"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared"
+            value="FFFFFF"
+          />
+          <p
+            class="text-moon-18 pt-2"
+          >
+            <b>
+              Result:
+            </b>
+             
+            FFFFFF
+          </p>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      dir="rtl"
+    >
+      <div
+        class="w-full"
+      >
+        <input
+          aria-label="controled"
+          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared"
+          value="FFFFFF"
+        />
+        <p
+          class="text-moon-18 pt-2"
+        >
+          <b>
+            Result:
+          </b>
+           
+          FFFFFF
+        </p>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
 exports[`Input in RTL renders Default 1`] = `
 Object {
   "asFragment": [Function],
@@ -1064,6 +1171,105 @@ Object {
 }
 `;
 
+exports[`Input renders Controled 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="w-full"
+      >
+        <input
+          aria-label="controled"
+          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared"
+          value="FFFFFF"
+        />
+        <p
+          class="text-moon-18 pt-2"
+        >
+          <b>
+            Result:
+          </b>
+           
+          FFFFFF
+        </p>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="w-full"
+    >
+      <input
+        aria-label="controled"
+        class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared"
+        value="FFFFFF"
+      />
+      <p
+        class="text-moon-18 pt-2"
+      >
+        <b>
+          Result:
+        </b>
+         
+        FFFFFF
+      </p>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
 exports[`Input renders Default 1`] = `
 Object {
   "asFragment": [Function],
diff --git a/next-docs/public/examples/input/__tests__/index.test.tsx b/next-docs/public/examples/input/__tests__/index.test.tsx
index 0c22827837..35913cd9e7 100644
--- a/next-docs/public/examples/input/__tests__/index.test.tsx
+++ b/next-docs/public/examples/input/__tests__/index.test.tsx
@@ -8,6 +8,7 @@ import Default from '../Default';
 import Sizes from '../Sizes';
 import Types from '../Types';
 import States from '../States';
+import Controled from '../Controled';
 
 const withRtl = (component: JSX.Element) => <div dir="rtl">{component}</div>;
 
@@ -33,6 +34,10 @@ describe('Input', () => {
     const tree = render(<Types />);
     expect(tree).toMatchSnapshot();
   });
+  it('renders Controled', () => {
+    const tree = render(<Controled />);
+    expect(tree).toMatchSnapshot();
+  });
 });
 
 describe('Input in RTL', () => {
@@ -57,4 +62,8 @@ describe('Input in RTL', () => {
     const tree = render(withRtl(<Types />));
     expect(tree).toMatchSnapshot();
   });
+  it('renders Controled', () => {
+    const tree = render(withRtl(<Controled />));
+    expect(tree).toMatchSnapshot();
+  });
 });

From 29f57fd5b8feb7aaaa2ab1d0a36612f2b4ce6f91 Mon Sep 17 00:00:00 2001
From: Dmytro Kireiev <dmytro.kireiev@gmail.com>
Date: Thu, 19 Oct 2023 15:16:01 +0300
Subject: [PATCH 5/7] fix: update base Button [MDS-718] (#2440)

---
 docs/app/components/server/accordion/page.tsx |  12 +-
 .../components/server/button/description.md   |   8 ++
 .../server/button/examples/Animations.tsx     |  18 +++
 .../server/button/examples/Default.tsx        |   3 +
 .../server/button/examples/Disabled.tsx       |   3 +
 .../server/button/examples/FullWidth.tsx      |   8 ++
 .../server/button/examples/Icons.tsx          |   9 ++
 .../server/button/examples/Multiline.tsx      |  12 ++
 .../server/button/examples/Sizes.tsx          |  11 ++
 .../server/button/examples/Variants.tsx       |   9 ++
 docs/app/components/server/button/page.tsx    |  64 +++++++++++
 docs/app/components/shared/QuickNav.tsx       |  11 ++
 docs/app/components/types.ts                  | 103 ++++++++++--------
 workspaces/base/src/button/Button.tsx         |  11 +-
 .../private/types/ButtonSettingsProps.ts      |   2 +-
 .../button/private/types/ButtonVariants.ts    |   8 +-
 .../buttonAnimations/AnimationContent.tsx     |   4 +-
 .../utils/buttonSizes/getButtonSize.ts        |   2 +-
 .../buttonStyles/getButtonCommonStyles.ts     |   2 +-
 .../utils/buttonStyles/getButtonVariants.ts   |  34 ++++--
 .../buttonStyles/getIconHorizontalPosition.ts |  18 +--
 .../utils/buttonStyles/getLoaderColor.ts      |  15 +++
 .../src/button/styles/ButtonComponent.tsx     |   2 +-
 workspaces/base/src/button/styles/Hover.tsx   |   2 +-
 .../base/src/button/styles/IconLeft.tsx       |   2 +-
 .../base/src/button/styles/IconRight.tsx      |   2 +-
 26 files changed, 289 insertions(+), 86 deletions(-)
 create mode 100644 docs/app/components/server/button/description.md
 create mode 100644 docs/app/components/server/button/examples/Animations.tsx
 create mode 100644 docs/app/components/server/button/examples/Default.tsx
 create mode 100644 docs/app/components/server/button/examples/Disabled.tsx
 create mode 100644 docs/app/components/server/button/examples/FullWidth.tsx
 create mode 100644 docs/app/components/server/button/examples/Icons.tsx
 create mode 100644 docs/app/components/server/button/examples/Multiline.tsx
 create mode 100644 docs/app/components/server/button/examples/Sizes.tsx
 create mode 100644 docs/app/components/server/button/examples/Variants.tsx
 create mode 100644 docs/app/components/server/button/page.tsx
 create mode 100644 docs/app/components/shared/QuickNav.tsx
 create mode 100644 workspaces/base/src/button/private/utils/buttonStyles/getLoaderColor.ts

diff --git a/docs/app/components/server/accordion/page.tsx b/docs/app/components/server/accordion/page.tsx
index 7a565fbf94..b5324b9879 100644
--- a/docs/app/components/server/accordion/page.tsx
+++ b/docs/app/components/server/accordion/page.tsx
@@ -3,24 +3,18 @@ import { Default } from '@/app/components/server/accordion/examples/Default';
 import { Disabled } from '@/app/components/server/accordion/examples/Disabled';
 import { Sizes } from '@/app/components/server/accordion/examples/Sizes';
 import ExampleSection from '@/app/components/shared/ExampleSection';
+import QuickNav from '@/app/components/shared/QuickNav';
 import { getExamples } from '@/app/utils/getExamples';
 import { MDX } from '@/components/MDX';
 
-function QuickNav({ items }: {items: string[]}) {
-  return <ul>
-    {items.map(item => <li key={item}><a href={`#${item}`}>{item}</a></li>)}
-  </ul>
-}
-
 export default async function Home() {
   const { server } = await getExamples();
   const examplesList = Object.keys(server.accordion.examples);
-
   return (
-    <div className="max-w-7xl flex flex-col gap-4 text-moon-14">
+    <div className="w-full max-w-7xl flex flex-col gap-4 text-moon-14">
       <h1 className="font-medium text-moon-32">Accordion</h1>
       <MDX markdown={server.accordion.description} />
-      <QuickNav items={examplesList}/>
+      <QuickNav items={examplesList} />
       <ExampleSection
         title="Default"
         component={<Default />}
diff --git a/docs/app/components/server/button/description.md b/docs/app/components/server/button/description.md
new file mode 100644
index 0000000000..64d6721bd3
--- /dev/null
+++ b/docs/app/components/server/button/description.md
@@ -0,0 +1,8 @@
+Buttons allow users to take actions, and make choices, with a single tap.
+
+Buttons communicate actions that users can take. They are typically placed throughout your UI, in places like:
+
+Modal windows
+Forms
+Cards
+Toolbars
diff --git a/docs/app/components/server/button/examples/Animations.tsx b/docs/app/components/server/button/examples/Animations.tsx
new file mode 100644
index 0000000000..ef9b623977
--- /dev/null
+++ b/docs/app/components/server/button/examples/Animations.tsx
@@ -0,0 +1,18 @@
+import Button from '@heathmont/moon-base-tw/lib/button/Button';
+
+export const Animations = () => (
+  <>
+    <Button animation="progress" variant="outline">
+      Progress
+    </Button>
+    <Button animation="success" variant="outline">
+      Success
+    </Button>
+    <Button animation="error" variant="outline">
+      Error
+    </Button>
+    <Button animation="pulse" variant="outline">
+      Pulse
+    </Button>
+  </>
+);
diff --git a/docs/app/components/server/button/examples/Default.tsx b/docs/app/components/server/button/examples/Default.tsx
new file mode 100644
index 0000000000..d2bffc8e77
--- /dev/null
+++ b/docs/app/components/server/button/examples/Default.tsx
@@ -0,0 +1,3 @@
+import Button from '@heathmont/moon-base-tw/lib/button/Button';
+
+export const Default = () => <Button>Default</Button>;
diff --git a/docs/app/components/server/button/examples/Disabled.tsx b/docs/app/components/server/button/examples/Disabled.tsx
new file mode 100644
index 0000000000..163423deab
--- /dev/null
+++ b/docs/app/components/server/button/examples/Disabled.tsx
@@ -0,0 +1,3 @@
+import Button from '@heathmont/moon-base-tw/lib/button/Button';
+
+export const Disabled = () => <Button disabled>Disabled</Button>;
diff --git a/docs/app/components/server/button/examples/FullWidth.tsx b/docs/app/components/server/button/examples/FullWidth.tsx
new file mode 100644
index 0000000000..6ab181403e
--- /dev/null
+++ b/docs/app/components/server/button/examples/FullWidth.tsx
@@ -0,0 +1,8 @@
+import Button from '@heathmont/moon-base-tw/lib/button/Button';
+import { OtherFrame } from '@heathmont/moon-icons-tw';
+
+export const FullWidth = () => (
+  <Button iconRight={<OtherFrame />} fullWidth>
+    Full width
+  </Button>
+);
diff --git a/docs/app/components/server/button/examples/Icons.tsx b/docs/app/components/server/button/examples/Icons.tsx
new file mode 100644
index 0000000000..33c832b146
--- /dev/null
+++ b/docs/app/components/server/button/examples/Icons.tsx
@@ -0,0 +1,9 @@
+import Button from '@heathmont/moon-base-tw/lib/button/Button';
+import { OtherFrame } from '@heathmont/moon-icons-tw';
+
+export const Icons = () => (
+  <>
+    <Button iconLeft={<OtherFrame />}>IconLeft</Button>
+    <Button iconRight={<OtherFrame />}>IconRight</Button>
+  </>
+);
diff --git a/docs/app/components/server/button/examples/Multiline.tsx b/docs/app/components/server/button/examples/Multiline.tsx
new file mode 100644
index 0000000000..526b9889b6
--- /dev/null
+++ b/docs/app/components/server/button/examples/Multiline.tsx
@@ -0,0 +1,12 @@
+import Button from '@heathmont/moon-base-tw/lib/button/Button';
+
+export const Multiline = () => (
+  <Button size="xl" className="py-3">
+    <span className="flex flex-col gap-1">
+      <span className="leading-none">Button text</span>
+      <span className="text-moon-9 font-normal leading-[12px]">
+        Placeholder text
+      </span>
+    </span>
+  </Button>
+);
diff --git a/docs/app/components/server/button/examples/Sizes.tsx b/docs/app/components/server/button/examples/Sizes.tsx
new file mode 100644
index 0000000000..95831ea1ed
--- /dev/null
+++ b/docs/app/components/server/button/examples/Sizes.tsx
@@ -0,0 +1,11 @@
+import Button from '@heathmont/moon-base-tw/lib/button/Button';
+
+export const Sizes = () => (
+  <>
+    <Button size="xs">Size XS</Button>
+    <Button size="sm">Size SM</Button>
+    <Button>Default size MD</Button>
+    <Button size="lg">Size LG</Button>
+    <Button size="xl">Size XL</Button>
+  </>
+);
diff --git a/docs/app/components/server/button/examples/Variants.tsx b/docs/app/components/server/button/examples/Variants.tsx
new file mode 100644
index 0000000000..df384a83b9
--- /dev/null
+++ b/docs/app/components/server/button/examples/Variants.tsx
@@ -0,0 +1,9 @@
+import Button from '@heathmont/moon-base-tw/lib/button/Button';
+
+export const Variants = () => (
+  <>
+    <Button>Default is Fill</Button>
+    <Button variant="outline">Outline</Button>
+    <Button variant="ghost">Ghost</Button>
+  </>
+);
diff --git a/docs/app/components/server/button/page.tsx b/docs/app/components/server/button/page.tsx
new file mode 100644
index 0000000000..dc88a8f0f4
--- /dev/null
+++ b/docs/app/components/server/button/page.tsx
@@ -0,0 +1,64 @@
+import { Animations } from '@/app/components/server/button/examples/Animations';
+import { Default } from '@/app/components/server/button/examples/Default';
+import { Disabled } from '@/app/components/server/button/examples/Disabled';
+import { FullWidth } from '@/app/components/server/button/examples/FullWidth';
+import { Icons } from '@/app/components/server/button/examples/Icons';
+import { Multiline } from '@/app/components/server/button/examples/Multiline';
+import { Sizes } from '@/app/components/server/button/examples/Sizes';
+import { Variants } from '@/app/components/server/button/examples/Variants';
+import ExampleSection from '@/app/components/shared/ExampleSection';
+import QuickNav from '@/app/components/shared/QuickNav';
+import { getExamples } from '@/app/utils/getExamples';
+import { MDX } from '@/components/MDX';
+
+export default async function Home() {
+  const { server } = await getExamples();
+  const examplesList = Object.keys(server.button.examples);
+  return (
+    <div className="w-full max-w-7xl flex flex-col gap-4 text-moon-14">
+      <h1 className="font-medium text-moon-32">Button</h1>
+      <MDX markdown={server.button.description} />
+      <QuickNav items={examplesList} />
+      <ExampleSection
+        title="Default"
+        component={<Default />}
+        code={server.button.examples.Default}
+      />
+      <ExampleSection
+        title="Sizes"
+        component={<Sizes />}
+        code={server.button.examples.Sizes}
+      />
+      <ExampleSection
+        title="Variants"
+        component={<Variants />}
+        code={server.button.examples.Variants}
+      />
+      <ExampleSection
+        title="Icons"
+        component={<Icons />}
+        code={server.button.examples.Icons}
+      />
+      <ExampleSection
+        title="FullWidth"
+        component={<FullWidth />}
+        code={server.button.examples.FullWidth}
+      />
+      <ExampleSection
+        title="Disabled"
+        component={<Disabled />}
+        code={server.button.examples.Disabled}
+      />
+      <ExampleSection
+        title="Animations"
+        component={<Animations />}
+        code={server.button.examples.Animations}
+      />
+      <ExampleSection
+        title="Multiline"
+        component={<Multiline />}
+        code={server.button.examples.Multiline}
+      />
+    </div>
+  );
+}
diff --git a/docs/app/components/shared/QuickNav.tsx b/docs/app/components/shared/QuickNav.tsx
new file mode 100644
index 0000000000..b6fe5e45dc
--- /dev/null
+++ b/docs/app/components/shared/QuickNav.tsx
@@ -0,0 +1,11 @@
+const QuickNav = ({ items }: { items: string[] }) => (
+  <ul>
+    {items.map((item) => (
+      <li key={item}>
+        <a href={`#${item}`}>{item}</a>
+      </li>
+    ))}
+  </ul>
+);
+
+export default QuickNav;
diff --git a/docs/app/components/types.ts b/docs/app/components/types.ts
index 057efe37da..05beff9403 100644
--- a/docs/app/components/types.ts
+++ b/docs/app/components/types.ts
@@ -1,46 +1,59 @@
 export interface Examples {
-  "client": {
-    "accordion": {
-      "description": "string",
-      "examples": {
-        "Default": "string"
-      }
-    },
-    "button": {
-      "description": "string",
-      "examples": {
-        "Default": "string"
-      }
-    }
-  },
-  "server": {
-    "accordion": {
-      "description": "string",
-      "examples": {
-        "ContentOutsideSizes": "string",
-        "Default": "string",
-        "Disabled": "string",
-        "Sizes": "string"
-      }
-    },
-    "avatar": {
-      "description": "string",
-      "examples": {
-        "Active": "string",
-        "Default": "string"
-      }
-    },
-    "tag": {
-      "description": "string",
-      "examples": {
-        "Default": "string"
-      }
-    }
-  },
-  "shared": {
-    "fonts": {
-      "DMSans-Regular": "string",
-      "DMSans-Semibold": "string"
-    }
-  }
-};
+  client: {
+    accordion: {
+      description: 'string';
+      examples: {
+        Default: 'string';
+      };
+    };
+    button: {
+      description: 'string';
+      examples: {
+        Default: 'string';
+      };
+    };
+  };
+  server: {
+    accordion: {
+      description: 'string';
+      examples: {
+        ContentOutsideSizes: 'string';
+        Default: 'string';
+        Disabled: 'string';
+        Sizes: 'string';
+      };
+    };
+    button: {
+      description: 'string';
+      examples: {
+        Default: 'string';
+        Sizes: 'string';
+        Variants: 'string';
+        Icons: 'string';
+        FullWidth: 'string';
+        Disabled: 'string';
+        Animations: 'string';
+        Multiline: 'string';
+      };
+    };
+    avatar: {
+      description: 'string';
+      examples: {
+        Active: 'string';
+        Default: 'string';
+      };
+    };
+    tag: {
+      description: 'string';
+      examples: {
+        Default: 'string';
+      };
+    };
+  };
+  shared: {
+    fonts: {
+      'DMSans-Regular': 'string';
+      'DMSans-Semibold': 'string';
+    };
+  };
+}
diff --git a/workspaces/base/src/button/Button.tsx b/workspaces/base/src/button/Button.tsx
index 873944e592..33b87110d5 100644
--- a/workspaces/base/src/button/Button.tsx
+++ b/workspaces/base/src/button/Button.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
-import mergeClassnames from '../mergeClassnames/mergeClassnames';
+import type ButtonProps from './private/types/ButtonProps';
+import type ButtonVariants from './private/types/ButtonVariants';
 import AnimationContent from './private/utils/buttonAnimations/AnimationContent';
 import getButtonSize from './private/utils/buttonSizes/getButtonSize';
 import ButtonComponent from './styles/ButtonComponent';
 import Hover from './styles/Hover';
 import IconLeft from './styles/IconLeft';
 import IconRight from './styles/IconRight';
-import type ButtonProps from './private/types/ButtonProps';
-import type ButtonVariants from './private/types/ButtonVariants';
+import mergeClassnames from '../mergeClassnames/mergeClassnames';
 
 export type Props<C extends React.ElementType> = React.PropsWithChildren<
   ButtonProps<C>
@@ -16,7 +16,7 @@ export type Props<C extends React.ElementType> = React.PropsWithChildren<
 
 const Button = <C extends React.ElementType = 'button'>({
   children,
-  variant = 'primary',
+  variant = 'fill',
   size = 'md',
   iconLeft,
   iconRight,
@@ -31,7 +31,7 @@ const Button = <C extends React.ElementType = 'button'>({
     animation === 'progress' || animation === 'success';
   if (!children) {
     return (
-      <span className="relative cursor-pointer [&_.hover]:hover:bg-bulma/[.07]">
+      <span className="relative cursor-pointer [&_.hover]:hover:bg-heles">
         <ButtonComponent
           size={size}
           variant={variant as ButtonVariants}
@@ -79,6 +79,7 @@ const Button = <C extends React.ElementType = 'button'>({
           animation={animation}
           size={size}
           fullWidth={fullWidth}
+          variant={variant}
         />
       ) : (
         <>
diff --git a/workspaces/base/src/button/private/types/ButtonSettingsProps.ts b/workspaces/base/src/button/private/types/ButtonSettingsProps.ts
index 5965bebaf0..45b38bf7c8 100644
--- a/workspaces/base/src/button/private/types/ButtonSettingsProps.ts
+++ b/workspaces/base/src/button/private/types/ButtonSettingsProps.ts
@@ -1,4 +1,4 @@
-import ButtonAnimations from './ButtonAnimations';
+import type ButtonAnimations from './ButtonAnimations';
 import type ButtonSizes from './ButtonSizes';
 import type ButtonVariants from './ButtonVariants';
 
diff --git a/workspaces/base/src/button/private/types/ButtonVariants.ts b/workspaces/base/src/button/private/types/ButtonVariants.ts
index 1ad1e2d6d5..06ca8b14c1 100644
--- a/workspaces/base/src/button/private/types/ButtonVariants.ts
+++ b/workspaces/base/src/button/private/types/ButtonVariants.ts
@@ -1,3 +1,9 @@
-type ButtonVariants = 'primary' | 'secondary' | 'tertiary' | 'ghost';
+type ButtonVariants =
+  | 'fill'
+  | 'outline'
+  | 'ghost'
+  | 'primary'
+  | 'secondary'
+  | 'tertiary';
 
 export default ButtonVariants;
diff --git a/workspaces/base/src/button/private/utils/buttonAnimations/AnimationContent.tsx b/workspaces/base/src/button/private/utils/buttonAnimations/AnimationContent.tsx
index cd9ed3a307..862c4941c9 100644
--- a/workspaces/base/src/button/private/utils/buttonAnimations/AnimationContent.tsx
+++ b/workspaces/base/src/button/private/utils/buttonAnimations/AnimationContent.tsx
@@ -7,6 +7,7 @@ import IconRight from '../../../styles/IconRight';
 import type ButtonSettingsProps from '../../types/ButtonSettingsProps';
 import getIconSize from '../buttonSizes/getIconSize';
 import getLoaderSize from '../buttonSizes/getLoaderSize';
+import getLoaderColor from '../buttonStyles/getLoaderColor';
 
 const AnimationContent = ({
   children,
@@ -15,6 +16,7 @@ const AnimationContent = ({
   animation,
   size,
   fullWidth,
+  variant,
 }: ButtonSettingsProps) => (
   <span className="block h-full pointer-events-none">
     <span
@@ -24,7 +26,7 @@ const AnimationContent = ({
       )}
     >
       {animation === 'progress' && (
-        <Loader color="currentColor" size={getLoaderSize(size)} />
+        <Loader size={getLoaderSize(size)} color={getLoaderColor(variant)} />
       )}
       {animation === 'success' && (
         <GenericCheckAlternative
diff --git a/workspaces/base/src/button/private/utils/buttonSizes/getButtonSize.ts b/workspaces/base/src/button/private/utils/buttonSizes/getButtonSize.ts
index 1d715ccd1b..7f7a97f000 100644
--- a/workspaces/base/src/button/private/utils/buttonSizes/getButtonSize.ts
+++ b/workspaces/base/src/button/private/utils/buttonSizes/getButtonSize.ts
@@ -1,9 +1,9 @@
-import mergeClassnames from '../../../../mergeClassnames/mergeClassnames';
 import getLgPadding from './getLgPadding';
 import getMdPadding from './getMdPadding';
 import getSmPadding from './getSmPadding';
 import getXlPadding from './getXlPadding';
 import getXsPadding from './getXsPadding';
+import mergeClassnames from '../../../../mergeClassnames/mergeClassnames';
 import type ButtonSettingsProps from '../../types/ButtonSettingsProps';
 
 const getButtonSize = ({
diff --git a/workspaces/base/src/button/private/utils/buttonStyles/getButtonCommonStyles.ts b/workspaces/base/src/button/private/utils/buttonStyles/getButtonCommonStyles.ts
index e122464b01..dfd3ebaee0 100644
--- a/workspaces/base/src/button/private/utils/buttonStyles/getButtonCommonStyles.ts
+++ b/workspaces/base/src/button/private/utils/buttonStyles/getButtonCommonStyles.ts
@@ -10,7 +10,7 @@ const getButtonCommonStyles = (
     disabled
       ? 'opacity-60 cursor-not-allowed'
       : 'active:scale-90 [&_+_span]:active:scale-90',
-    '[&_.hover]:hover:bg-bulma/[.07]'
+    '[&_.hover]:hover:bg-heles'
   );
 
 export default getButtonCommonStyles;
diff --git a/workspaces/base/src/button/private/utils/buttonStyles/getButtonVariants.ts b/workspaces/base/src/button/private/utils/buttonStyles/getButtonVariants.ts
index a8b249ee82..e7ed6608e0 100644
--- a/workspaces/base/src/button/private/utils/buttonStyles/getButtonVariants.ts
+++ b/workspaces/base/src/button/private/utils/buttonStyles/getButtonVariants.ts
@@ -4,20 +4,36 @@ import type ButtonSettingsProps from '../../types/ButtonSettingsProps';
 const getButtonVariants = ({
   variant,
   disabled,
-}: ButtonSettingsProps): string => {
-  if (variant === 'secondary') {
-    return 'btn-secondary';
+  animation,
+}: Pick<ButtonSettingsProps, 'variant' | 'disabled' | 'animation'>): string => {
+  if (variant === 'secondary' || variant === 'outline') {
+    return animation === 'error'
+      ? mergeClassnames(
+          'text-chichi bg-transparent ring-inset ring-1 ring-chichi',
+          !disabled && 'hover:bg-chichi-10'
+        )
+      : mergeClassnames(
+          'text-bulma bg-transparent ring-inset ring-1 ring-trunks',
+          !disabled && 'hover:ring-bulma'
+        );
   }
   if (variant === 'tertiary') {
-    return 'btn-tertiary';
+    return animation === 'error' ? 'text-goten bg-chichi' : 'text-goten bg-hit';
   }
   if (variant === 'ghost') {
-    return mergeClassnames(
-      'text-trunks bg-transparent',
-      !disabled && 'hover:text-bulma'
-    );
+    return animation === 'error'
+      ? mergeClassnames(
+          'text-chichi bg-transparent',
+          !disabled && 'hover:bg-chichi-10'
+        )
+      : mergeClassnames(
+          'text-trunks bg-transparent',
+          !disabled && 'hover:text-bulma'
+        );
   }
-  return 'btn-primary';
+  return animation === 'error'
+    ? 'text-goten bg-chichi'
+    : 'text-goten bg-piccolo';
 };
 
 export default getButtonVariants;
diff --git a/workspaces/base/src/button/private/utils/buttonStyles/getIconHorizontalPosition.ts b/workspaces/base/src/button/private/utils/buttonStyles/getIconHorizontalPosition.ts
index 43edfebcc5..4548cd2798 100644
--- a/workspaces/base/src/button/private/utils/buttonStyles/getIconHorizontalPosition.ts
+++ b/workspaces/base/src/button/private/utils/buttonStyles/getIconHorizontalPosition.ts
@@ -6,31 +6,31 @@ const getIconHorizontalPosition = ({
   iconRight,
   iconLeft,
   size,
-}: Props): string => {
+}: Pick<Props, 'iconRight' | 'iconLeft' | 'size'>): string => {
   if (iconRight) {
     switch (size) {
       case 'xs':
       case 'sm':
-        return 'ltr:right-1 rtl:left-1';
+        return 'end-1';
       case 'lg':
-        return 'ltr:right-3 rtl:left-3';
+        return 'end-3';
       case 'xl':
-        return 'ltr:right-4 rtl:left-4';
+        return 'end-4';
       default:
-        return 'ltr:right-2 rtl:left-2';
+        return 'end-2';
     }
   }
   if (iconLeft) {
     switch (size) {
       case 'xs':
       case 'sm':
-        return 'ltr:left-1 rtl:right-1';
+        return 'start-1';
       case 'lg':
-        return 'ltr:left-3 rtl:right-3';
+        return 'start-3';
       case 'xl':
-        return 'ltr:left-4 rtl:right-4';
+        return 'start-4';
       default:
-        return 'ltr:left-2 rtl:right-2';
+        return 'start-2';
     }
   }
   return '';
diff --git a/workspaces/base/src/button/private/utils/buttonStyles/getLoaderColor.ts b/workspaces/base/src/button/private/utils/buttonStyles/getLoaderColor.ts
new file mode 100644
index 0000000000..c7826486ec
--- /dev/null
+++ b/workspaces/base/src/button/private/utils/buttonStyles/getLoaderColor.ts
@@ -0,0 +1,15 @@
+import type ButtonVariants from '../../types/ButtonVariants';
+
+const getLoaderColor = (variant?: ButtonVariants): string => {
+  switch (variant) {
+    case 'secondary':
+    case 'outline':
+      return 'border-bulma';
+    case 'ghost':
+      return 'border-trunks';
+    default:
+      return 'border-goten';
+  }
+};
+
+export default getLoaderColor;
diff --git a/workspaces/base/src/button/styles/ButtonComponent.tsx b/workspaces/base/src/button/styles/ButtonComponent.tsx
index 2a40708e3d..606e96e3eb 100644
--- a/workspaces/base/src/button/styles/ButtonComponent.tsx
+++ b/workspaces/base/src/button/styles/ButtonComponent.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import mergeClassnames from '../../mergeClassnames/mergeClassnames';
+import type ButtonProps from '../private/types/ButtonProps';
 import getAnimation from '../private/utils/buttonAnimations/getAnimation';
 import getButtonSize from '../private/utils/buttonSizes/getButtonSize';
 import getButtonCommonStyles from '../private/utils/buttonStyles/getButtonCommonStyles';
 import getButtonVariants from '../private/utils/buttonStyles/getButtonVariants';
-import type ButtonProps from '../private/types/ButtonProps';
 
 const ButtonComponent = <C extends React.ElementType>({
   variant,
diff --git a/workspaces/base/src/button/styles/Hover.tsx b/workspaces/base/src/button/styles/Hover.tsx
index e9c68d9262..a47a6b79fd 100644
--- a/workspaces/base/src/button/styles/Hover.tsx
+++ b/workspaces/base/src/button/styles/Hover.tsx
@@ -10,7 +10,7 @@ const Hover = ({ className }: HoverProps) => (
     className={mergeClassnames(
       'hover z-[-1] block absolute inset-0 pointer-events-none',
       'transition-[background-color_0.2s_ease-in-out]',
-      'hover:bg-bulma/[.07]',
+      'hover:bg-heles',
       className
     )}
   />
diff --git a/workspaces/base/src/button/styles/IconLeft.tsx b/workspaces/base/src/button/styles/IconLeft.tsx
index dd01596403..a4bba78590 100644
--- a/workspaces/base/src/button/styles/IconLeft.tsx
+++ b/workspaces/base/src/button/styles/IconLeft.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import mergeClassnames from '../../mergeClassnames/mergeClassnames';
+import type ButtonSettingsProps from '../private/types/ButtonSettingsProps';
 import getIconSize from '../private/utils/buttonSizes/getIconSize';
 import getIconHorizontalPosition from '../private/utils/buttonStyles/getIconHorizontalPosition';
-import type ButtonSettingsProps from '../private/types/ButtonSettingsProps';
 
 const IconLeft = ({ fullWidth, iconLeft, size }: ButtonSettingsProps) => (
   <span
diff --git a/workspaces/base/src/button/styles/IconRight.tsx b/workspaces/base/src/button/styles/IconRight.tsx
index 3153f9d4ac..73112926b1 100644
--- a/workspaces/base/src/button/styles/IconRight.tsx
+++ b/workspaces/base/src/button/styles/IconRight.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import mergeClassnames from '../../mergeClassnames/mergeClassnames';
+import type ButtonSettingsProps from '../private/types/ButtonSettingsProps';
 import getIconSize from '../private/utils/buttonSizes/getIconSize';
 import getIconHorizontalPosition from '../private/utils/buttonStyles/getIconHorizontalPosition';
-import type ButtonSettingsProps from '../private/types/ButtonSettingsProps';
 
 const IconRight = ({ fullWidth, iconRight, size }: ButtonSettingsProps) => (
   <span

From c40240ec38fce38be1d3c9e18ba2e5d0bad8ff0b Mon Sep 17 00:00:00 2001
From: Dmytro Kireiev <dmytro.kireiev@gmail.com>
Date: Thu, 19 Oct 2023 15:34:03 +0300
Subject: [PATCH 6/7] feat: add Checkbox to Docs [MDS-719] (#2441)

---
 .../components/server/avatar/description.md   |  1 -
 .../server/avatar/examples/Active.tsx         | 18 ----------
 .../server/avatar/examples/Default.tsx        |  8 -----
 docs/app/components/server/avatar/page.tsx    | 34 -------------------
 .../components/server/checkbox/description.md |  3 ++
 .../server/checkbox/examples/Default.tsx      |  5 +++
 docs/app/components/server/checkbox/page.tsx  | 22 ++++++++++++
 docs/app/components/types.ts                  |  3 +-
 workspaces/base/src/checkbox/Checkbox.tsx     |  2 +-
 9 files changed, 32 insertions(+), 64 deletions(-)
 delete mode 100644 docs/app/components/server/avatar/description.md
 delete mode 100644 docs/app/components/server/avatar/examples/Active.tsx
 delete mode 100644 docs/app/components/server/avatar/examples/Default.tsx
 delete mode 100644 docs/app/components/server/avatar/page.tsx
 create mode 100644 docs/app/components/server/checkbox/description.md
 create mode 100644 docs/app/components/server/checkbox/examples/Default.tsx
 create mode 100644 docs/app/components/server/checkbox/page.tsx

diff --git a/docs/app/components/server/avatar/description.md b/docs/app/components/server/avatar/description.md
deleted file mode 100644
index 347d36893e..0000000000
--- a/docs/app/components/server/avatar/description.md
+++ /dev/null
@@ -1 +0,0 @@
-The Avatar component is typically used to display images, icons, or initials representing people or other entities.
diff --git a/docs/app/components/server/avatar/examples/Active.tsx b/docs/app/components/server/avatar/examples/Active.tsx
deleted file mode 100644
index 054d532fd2..0000000000
--- a/docs/app/components/server/avatar/examples/Active.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import Avatar from '@heathmont/moon-core-tw/lib/es/avatar/Avatar';
-import { GenericUser } from '@heathmont/moon-icons-tw';
-
-export const Active = () => (
-  <>
-    <Avatar>
-      <GenericUser className="text-moon-24" />
-      <Avatar.Status />
-    </Avatar>
-    <Avatar>
-      md
-      <Avatar.Status />
-    </Avatar>
-    <Avatar imageUrl="../avatar.jpeg">
-      <Avatar.Status />
-    </Avatar>
-  </>
-);
diff --git a/docs/app/components/server/avatar/examples/Default.tsx b/docs/app/components/server/avatar/examples/Default.tsx
deleted file mode 100644
index 56062a94aa..0000000000
--- a/docs/app/components/server/avatar/examples/Default.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import Avatar from '@heathmont/moon-core-tw/lib/es/avatar/Avatar';
-import { GenericUser } from '@heathmont/moon-icons-tw';
-
-export const Default = () => {
-  return <Avatar>
-    <GenericUser className="text-moon-24" />
-  </Avatar>
-};
diff --git a/docs/app/components/server/avatar/page.tsx b/docs/app/components/server/avatar/page.tsx
deleted file mode 100644
index 9cc2938a33..0000000000
--- a/docs/app/components/server/avatar/page.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { Active } from "@/app/components/server/avatar/examples/Active";
-import { Default } from "@/app/components/server/avatar/examples/Default";
-import { getExamples } from "@/app/utils/getExamples";
-import { MDX } from "@/components/MDX";
-
-
-export default async function Home() {
-  const { server } = await getExamples();
-
-  return (
-    <div className="flex flex-col gap-4 text-moon-14">
-      <h1>Avatar</h1>
-
-      <MDX markdown={server.avatar.description} />
-
-      <div className="space-y-2">
-        <h2>Default</h2>
-        <div className={'flex flex-wrap items-center justify-around p-4 gap-2 w-full bg-goku rounded-moon-s-sm'}>
-          <Default />
-        </div>
-        <pre className="bg-goku rounded-moon-s-sm p-4">{server.avatar.examples.Default}</pre>
-      </div>
-
-      <div className="space-y-2">
-        <h2>Active</h2>
-        <div className={'flex flex-wrap items-center justify-around p-4 gap-2 w-full bg-goku rounded-moon-s-sm'}>
-          <Active />
-        </div>
-        <pre className="bg-goku rounded-moon-s-sm p-4">{server.avatar.examples.Active}</pre>
-      </div>
-    </div>
-  )
-}
-
diff --git a/docs/app/components/server/checkbox/description.md b/docs/app/components/server/checkbox/description.md
new file mode 100644
index 0000000000..c376928764
--- /dev/null
+++ b/docs/app/components/server/checkbox/description.md
@@ -0,0 +1,3 @@
+The checkbox is shown as a square box that is ticked (checked) when activated.
+
+Checkboxes are used to let a user select one or more options of a limited number of choices.
diff --git a/docs/app/components/server/checkbox/examples/Default.tsx b/docs/app/components/server/checkbox/examples/Default.tsx
new file mode 100644
index 0000000000..5534f0b399
--- /dev/null
+++ b/docs/app/components/server/checkbox/examples/Default.tsx
@@ -0,0 +1,5 @@
+import Checkbox from '@heathmont/moon-base-tw/lib/checkbox/Checkbox';
+
+export const Default = () => <Checkbox />;
+
+export default Default;
diff --git a/docs/app/components/server/checkbox/page.tsx b/docs/app/components/server/checkbox/page.tsx
new file mode 100644
index 0000000000..74ea2d5e6f
--- /dev/null
+++ b/docs/app/components/server/checkbox/page.tsx
@@ -0,0 +1,22 @@
+import { Default } from '@/app/components/server/checkbox/examples/Default';
+import ExampleSection from '@/app/components/shared/ExampleSection';
+import QuickNav from '@/app/components/shared/QuickNav';
+import { getExamples } from '@/app/utils/getExamples';
+import { MDX } from '@/components/MDX';
+
+export default async function Home() {
+  const { server } = await getExamples();
+  const examplesList = Object.keys(server.checkbox.examples);
+  return (
+    <div className="w-full max-w-7xl flex flex-col gap-4 text-moon-14">
+      <h1 className="font-medium text-moon-32">Checkbox</h1>
+      <MDX markdown={server.checkbox.description} />
+      <QuickNav items={examplesList} />
+      <ExampleSection
+        title="Default"
+        component={<Default />}
+        code={server.checkbox.examples.Default}
+      />
+    </div>
+  );
+}
diff --git a/docs/app/components/types.ts b/docs/app/components/types.ts
index 05beff9403..d3a9f5e9ea 100644
--- a/docs/app/components/types.ts
+++ b/docs/app/components/types.ts
@@ -36,10 +36,9 @@ export interface Examples {
         Multiline: 'string';
       };
     };
-    avatar: {
+    checkbox: {
       description: 'string';
       examples: {
-        Active: 'string';
         Default: 'string';
       };
     };
diff --git a/workspaces/base/src/checkbox/Checkbox.tsx b/workspaces/base/src/checkbox/Checkbox.tsx
index b347c2c04c..be4d7de3db 100644
--- a/workspaces/base/src/checkbox/Checkbox.tsx
+++ b/workspaces/base/src/checkbox/Checkbox.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useState } from 'react';
+import React, { forwardRef } from 'react';
 import type CheckboxProps from './private/types/CheckboxProps';
 import mergeClassnames from '../mergeClassnames/mergeClassnames';
 import ControlsMinus from '../private/icons/ControlsMinus';

From 89a1e1cf25ff776c2b8dbac005f158be1e8d8c85 Mon Sep 17 00:00:00 2001
From: Dmytro Kireiev <dmytro.kireiev@gmail.com>
Date: Thu, 19 Oct 2023 16:01:27 +0300
Subject: [PATCH 7/7] chore: bump moon to 10.10.2 (#2442)

---
 docs/CHANGELOG.md              | 11 +++++++++++
 docs/package.json              | 10 +++++-----
 next-docs/CHANGELOG.md         | 11 +++++++++++
 next-docs/package.json         | 10 +++++-----
 pnpm-lock.yaml                 | 20 ++++++++++----------
 workspaces/base/CHANGELOG.md   |  6 ++++++
 workspaces/base/package.json   |  2 +-
 workspaces/cmdk/CHANGELOG.md   |  8 ++++++++
 workspaces/cmdk/package.json   |  4 ++--
 workspaces/core/CHANGELOG.md   |  6 ++++++
 workspaces/core/package.json   |  2 +-
 workspaces/tables/CHANGELOG.md |  8 ++++++++
 workspaces/tables/package.json |  4 ++--
 workspaces/themes/CHANGELOG.md |  6 ++++++
 workspaces/themes/package.json |  2 +-
 15 files changed, 83 insertions(+), 27 deletions(-)

diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
index 63b4cdee02..221b655f23 100644
--- a/docs/CHANGELOG.md
+++ b/docs/CHANGELOG.md
@@ -1,5 +1,16 @@
 # docs
 
+## 10.10.2
+
+### Patch Changes
+
+- Deploy 10.10.2
+- Updated dependencies
+  - @heathmont/moon-themes-tw@10.10.2
+  - @heathmont/moon-base-tw@10.10.2
+  - @heathmont/moon-cmdk-tw@10.10.2
+  - @heathmont/moon-core-tw@10.10.2
+
 ## 10.10.1
 
 ### Patch Changes
diff --git a/docs/package.json b/docs/package.json
index 9ae89d4bf0..ac38deae74 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "docs",
-  "version": "10.10.1",
+  "version": "10.10.2",
   "private": true,
   "type": "module",
   "scripts": {
@@ -11,11 +11,11 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@heathmont/moon-base-tw": "workspace:^10.10.1",
-    "@heathmont/moon-cmdk-tw": "workspace:^10.10.1",
-    "@heathmont/moon-core-tw": "workspace:^10.10.1",
+    "@heathmont/moon-base-tw": "workspace:^10.10.2",
+    "@heathmont/moon-cmdk-tw": "workspace:^10.10.2",
+    "@heathmont/moon-core-tw": "workspace:^10.10.2",
     "@heathmont/moon-icons-tw": "9.28.6",
-    "@heathmont/moon-themes-tw": "workspace:^10.10.1",
+    "@heathmont/moon-themes-tw": "workspace:^10.10.2",
     "@types/node": "20.4.9",
     "@types/react": "18.2.19",
     "@types/react-dom": "18.2.7",
diff --git a/next-docs/CHANGELOG.md b/next-docs/CHANGELOG.md
index 2190150728..56aeb40386 100644
--- a/next-docs/CHANGELOG.md
+++ b/next-docs/CHANGELOG.md
@@ -1,5 +1,16 @@
 # Change Log
 
+## 10.10.2
+
+### Patch Changes
+
+- Deploy 10.10.2
+- Updated dependencies
+  - @heathmont/moon-table-tw@10.10.2
+  - @heathmont/moon-themes-tw@10.10.2
+  - @heathmont/moon-cmdk-tw@10.10.2
+  - @heathmont/moon-core-tw@10.10.2
+
 ## 10.10.1
 
 ### Patch Changes
diff --git a/next-docs/package.json b/next-docs/package.json
index 6a8de91132..b5a7344da8 100644
--- a/next-docs/package.json
+++ b/next-docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "next-docs",
-  "version": "10.10.1",
+  "version": "10.10.2",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -19,9 +19,9 @@
     "@heathmont/moon-assets": "workspace:^10.7.1",
     "@heathmont/moon-charts": "workspace:^10.7.1",
     "@heathmont/moon-components": "workspace:^10.7.1",
-    "@heathmont/moon-cmdk-tw": "workspace:^10.10.1",
+    "@heathmont/moon-cmdk-tw": "workspace:^10.10.2",
     "@heathmont/moon-core": "workspace:^10.7.1",
-    "@heathmont/moon-core-tw": "workspace:^10.10.1",
+    "@heathmont/moon-core-tw": "workspace:^10.10.2",
     "@heathmont/moon-datepicker": "workspace:^10.7.1",
     "@heathmont/moon-draggabletable": "workspace:^10.7.1",
     "@heathmont/moon-icons": "workspace:^10.7.1",
@@ -30,9 +30,9 @@
     "@heathmont/moon-select": "workspace:^10.7.1",
     "@heathmont/moon-sidebar": "workspace:^10.7.1",
     "@heathmont/moon-table": "workspace:^10.7.1",
-    "@heathmont/moon-table-tw": "workspace:^10.10.1",
+    "@heathmont/moon-table-tw": "workspace:^10.10.2",
     "@heathmont/moon-themes": "workspace:^10.7.1",
-    "@heathmont/moon-themes-tw": "workspace:^10.10.1",
+    "@heathmont/moon-themes-tw": "workspace:^10.10.2",
     "@heathmont/moon-utils": "workspace:^10.7.1",
     "@heathmont/moon-icons-tw": "9.28.6",
     "@hookform/resolvers": "3.2.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4454f70883..ce83a21af8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -166,19 +166,19 @@ importers:
   docs:
     dependencies:
       '@heathmont/moon-base-tw':
-        specifier: workspace:^10.10.1
+        specifier: workspace:^10.10.2
         version: link:../workspaces/base
       '@heathmont/moon-cmdk-tw':
-        specifier: workspace:^10.10.1
+        specifier: workspace:^10.10.2
         version: link:../workspaces/cmdk
       '@heathmont/moon-core-tw':
-        specifier: workspace:^10.10.1
+        specifier: workspace:^10.10.2
         version: link:../workspaces/core
       '@heathmont/moon-icons-tw':
         specifier: 9.28.6
         version: 9.28.6(react-dom@18.2.0)(react@18.2.0)
       '@heathmont/moon-themes-tw':
-        specifier: workspace:^10.10.1
+        specifier: workspace:^10.10.2
         version: link:../workspaces/themes
       '@types/node':
         specifier: 20.4.9
@@ -238,7 +238,7 @@ importers:
         specifier: workspace:^10.7.1
         version: link:../packages/charts
       '@heathmont/moon-cmdk-tw':
-        specifier: workspace:^10.10.1
+        specifier: workspace:^10.10.2
         version: link:../workspaces/cmdk
       '@heathmont/moon-components':
         specifier: workspace:^10.7.1
@@ -247,7 +247,7 @@ importers:
         specifier: workspace:^10.7.1
         version: link:../packages/core
       '@heathmont/moon-core-tw':
-        specifier: workspace:^10.10.1
+        specifier: workspace:^10.10.2
         version: link:../workspaces/core
       '@heathmont/moon-datepicker':
         specifier: workspace:^10.7.1
@@ -277,13 +277,13 @@ importers:
         specifier: workspace:^10.7.1
         version: link:../packages/table
       '@heathmont/moon-table-tw':
-        specifier: workspace:^10.10.1
+        specifier: workspace:^10.10.2
         version: link:../workspaces/tables
       '@heathmont/moon-themes':
         specifier: workspace:^10.7.1
         version: link:../packages/themes
       '@heathmont/moon-themes-tw':
-        specifier: workspace:^10.10.1
+        specifier: workspace:^10.10.2
         version: link:../workspaces/themes
       '@heathmont/moon-utils':
         specifier: workspace:^10.7.1
@@ -1005,7 +1005,7 @@ importers:
         specifier: 1.7.16
         version: 1.7.16(react-dom@18.2.0)(react@18.2.0)
       '@heathmont/moon-core-tw':
-        specifier: workspace:^10.10.1
+        specifier: workspace:^10.10.2
         version: link:../core
       cmdk:
         specifier: 0.2.0
@@ -1065,7 +1065,7 @@ importers:
   workspaces/tables:
     dependencies:
       '@heathmont/moon-core-tw':
-        specifier: workspace:^10.10.1
+        specifier: workspace:^10.10.2
         version: link:../core
       react:
         specifier: 18.2.0
diff --git a/workspaces/base/CHANGELOG.md b/workspaces/base/CHANGELOG.md
index be0f1260d1..29332b10c7 100644
--- a/workspaces/base/CHANGELOG.md
+++ b/workspaces/base/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @heathmont/moon-base-tw
 
+## 10.10.2
+
+### Patch Changes
+
+- Deploy 10.10.2
+
 ## 10.10.1
 
 ### Patch Changes
diff --git a/workspaces/base/package.json b/workspaces/base/package.json
index 60df0f70dc..19426d5d81 100644
--- a/workspaces/base/package.json
+++ b/workspaces/base/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@heathmont/moon-base-tw",
   "sideEffects": false,
-  "version": "10.10.1",
+  "version": "10.10.2",
   "files": [
     "lib"
   ],
diff --git a/workspaces/cmdk/CHANGELOG.md b/workspaces/cmdk/CHANGELOG.md
index 8adfb57bfb..4951bf8c17 100644
--- a/workspaces/cmdk/CHANGELOG.md
+++ b/workspaces/cmdk/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @heathmont/moon-cmdk-tw
 
+## 10.10.2
+
+### Patch Changes
+
+- Deploy 10.10.2
+- Updated dependencies
+  - @heathmont/moon-core-tw@10.10.2
+
 ## 10.10.1
 
 ### Patch Changes
diff --git a/workspaces/cmdk/package.json b/workspaces/cmdk/package.json
index bfa99a0a85..3fa98ce80e 100644
--- a/workspaces/cmdk/package.json
+++ b/workspaces/cmdk/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@heathmont/moon-cmdk-tw",
   "sideEffects": false,
-  "version": "10.10.1",
+  "version": "10.10.2",
   "files": [
     "lib"
   ],
@@ -21,7 +21,7 @@
   },
   "dependencies": {
     "@headlessui/react": "1.7.16",
-    "@heathmont/moon-core-tw": "workspace:^10.10.1",
+    "@heathmont/moon-core-tw": "workspace:^10.10.2",
     "cmdk": "0.2.0",
     "tailwind-merge": "1.14.0",
     "tailwindcss-radix": "2.8.0"
diff --git a/workspaces/core/CHANGELOG.md b/workspaces/core/CHANGELOG.md
index 75bab79a66..081bfcbd5e 100644
--- a/workspaces/core/CHANGELOG.md
+++ b/workspaces/core/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @heathmont/moon-core-tw
 
+## 10.10.2
+
+### Patch Changes
+
+- Deploy 10.10.2
+
 ## 10.10.1
 
 ### Patch Changes
diff --git a/workspaces/core/package.json b/workspaces/core/package.json
index e426626486..b08427b18d 100644
--- a/workspaces/core/package.json
+++ b/workspaces/core/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@heathmont/moon-core-tw",
   "sideEffects": false,
-  "version": "10.10.1",
+  "version": "10.10.2",
   "files": [
     "lib"
   ],
diff --git a/workspaces/tables/CHANGELOG.md b/workspaces/tables/CHANGELOG.md
index ac3267a471..1a66964a6a 100644
--- a/workspaces/tables/CHANGELOG.md
+++ b/workspaces/tables/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @heathmont/moon-table-tw
 
+## 10.10.2
+
+### Patch Changes
+
+- Deploy 10.10.2
+- Updated dependencies
+  - @heathmont/moon-core-tw@10.10.2
+
 ## 10.10.1
 
 ### Patch Changes
diff --git a/workspaces/tables/package.json b/workspaces/tables/package.json
index 4d840cebfe..59dfae8478 100644
--- a/workspaces/tables/package.json
+++ b/workspaces/tables/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@heathmont/moon-table-tw",
   "sideEffects": false,
-  "version": "10.10.1",
+  "version": "10.10.2",
   "files": [
     "lib"
   ],
@@ -20,7 +20,7 @@
     "chokidar": "chokidar \"**/*.tsx\" \"**/*.ts\" -i \"lib/**/*.d.ts\" -c \"pnpm run build:code\" "
   },
   "dependencies": {
-    "@heathmont/moon-core-tw": "workspace:^10.10.1",
+    "@heathmont/moon-core-tw": "workspace:^10.10.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-table": "7.8.0",
diff --git a/workspaces/themes/CHANGELOG.md b/workspaces/themes/CHANGELOG.md
index 961b290f24..b3017f2487 100644
--- a/workspaces/themes/CHANGELOG.md
+++ b/workspaces/themes/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @heathmont/moon-themes-tw
 
+## 10.10.2
+
+### Patch Changes
+
+- Deploy 10.10.2
+
 ## 10.10.1
 
 ### Patch Changes
diff --git a/workspaces/themes/package.json b/workspaces/themes/package.json
index 6b924a67fe..15078a33ca 100644
--- a/workspaces/themes/package.json
+++ b/workspaces/themes/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@heathmont/moon-themes-tw",
   "sideEffects": false,
-  "version": "10.10.1",
+  "version": "10.10.2",
   "files": [
     "lib"
   ],