@swis/genui-widgets 1.0.0

package/LICENSE.md

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) swisnl <joris@swis.nl>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,297 @@
+# `@swisnl/genui-widgets`
+
+
+[![Software License](https://img.shields.io/packagist/l/swisnl/mcp-client.svg)](LICENSE.md)
+[![Buy us a tree](https://img.shields.io/badge/Treeware-%F0%9F%8C%B3-lightgreen.svg)](https://plant.treeware.earth/swisnl/genui-widgets)
+[![Made by SWIS](https://img.shields.io/badge/%F0%9F%9A%80-made%20by%20SWIS-%230737A9.svg)](https://www.swis.nl)
+
+Render OpenAI ChatKit widget JSON in any web page with a single function call.
+
+Pass a ChatKit widget payload directly to `render()` and it displays. No ChatKit dependency, no framework lock-in.
+
+![widget.png](docs/assets/widget.png)
+
+## Installation
+
+```bash
+npm install @swisnl/genui-widgets
+```
+
+## IIFE bundle (no build step)
+
+The standalone bundle includes Vue and injects CSS automatically.
+
+```html
+<div id="widget"></div>
+<script src="/dist/genui-widgets.js"></script>
+<script>
+  GenUIWidgets.render(
+    document.getElementById('widget'),
+    chatKitPayload,
+    { format: 'chatkit' }
+  );
+</script>
+```
+
+## Render an OpenAI widget payload
+
+```ts
+import { render } from '@swisnl/genui-widgets';
+import '@swisnl/genui-widgets/styles';
+
+render(document.getElementById('widget'), chatKitPayload, {
+  format: 'chatkit',
+  actionHooks: [
+    async (action) => {
+      console.log('Action:', action);
+    },
+  ],
+});
+```
+
+## Jinja templates
+
+Templates can be Jinja strings that resolve to widget JSON at render time:
+
+```ts
+render(container, `{"type":"Card","children":[{"type":"Title","value":{{ title | tojson }}}]}`, {
+  templateContext: { title: 'Hello' },
+});
+```
+
+## `.widget` files
+
+Extract the template from a `.widget` file and pass it directly to `render()`:
+
+```ts
+import { extractTemplateFromWidgetFile, render } from '@swisnl/genui-widgets';
+
+const template = extractTemplateFromWidgetFile(await file.text());
+render(container, template);
+```
+
+
+That's it. Pass the raw payload from the OpenAI response and the widget renders.
+
+## Vue component
+
+```vue
+<script setup lang="ts">
+import { provide } from 'vue';
+import { ACTION_HOOKS_KEY, DynamicWidget, fromChatKit } from '@swisnl/genui-widgets';
+import '@swisnl/genui-widgets/styles';
+
+const template = fromChatKit(chatKitPayload);
+
+provide(ACTION_HOOKS_KEY, [
+  async (action) => console.log('Action:', action),
+]);
+</script>
+
+<template>
+  <DynamicWidget :template="template" />
+</template>
+```
+
+## Updating and destroying
+
+`render()` returns an instance you can update or clean up:
+
+```ts
+const widget = render(container, chatKitPayload, { format: 'chatkit' });
+
+// Swap in a new payload
+widget.update(newPayload);
+
+// Clean up
+widget.destroy();
+```
+
+## Theming
+
+Widgets are styled through `--genui-*` CSS custom properties, all scoped to the `.genui-widget-root` container element. The library ships two ready-made themes and exposes the full API for custom themes.
+
+### Built-in themes
+
+```ts
+import { defaultTheme, darkTheme, render } from '@swisnl/genui-widgets';
+
+// Light (default — applied automatically when no theme is passed)
+render(container, payload, { theme: defaultTheme });
+
+// Dark
+render(container, payload, { theme: darkTheme });
+```
+
+### Overriding with CSS variables
+
+Because all tokens are plain CSS custom properties on `.genui-widget-root`, you can override them directly in a stylesheet without touching JavaScript at all:
+
+```css
+/* Target all widget roots on the page */
+.genui-widget-root {
+  --genui-surface: #f8f4ff;
+  --genui-background: #f8f4ff;
+  --genui-text-primary: #1a0040;
+  --genui-primary-60: #7c3aed;
+  --genui-primary-70: #6d28d9;
+  --genui-border-default: #e2e8f0;
+  --genui-base-size: 0.9rem;
+}
+
+/* Or scope overrides to a specific container */
+#my-widget .genui-widget-root {
+  --genui-surface: #1e1e2e;
+  --genui-text-primary: #cdd6f4;
+}
+```
+
+### Custom theme
+
+Use `createTheme()` to merge overrides on top of a base theme:
+
+```ts
+import { createTheme, defaultTheme, render } from '@swisnl/genui-widgets';
+
+render(container, payload, {
+  theme: createTheme(defaultTheme, {
+    surface: '#f8f4ff',
+    background: '#f8f4ff',
+    textPrimary: '#1a0040',
+    palettes: {
+      primary: { 60: '#7c3aed', 70: '#6d28d9' },
+    },
+  }),
+});
+```
+
+### Semantic color palettes
+
+Each semantic color (`primary`, `secondary`, `success`, `danger`, `warning`, `info`, `discovery`, `caution`) exposes ten lightness steps (`5` → `90`) as CSS variables:
+
+```
+--genui-primary-60       /* hex value */
+--genui-primary-60-rgb   /* "R, G, B" for alpha compositing */
+```
+
+Override individual steps without replacing the whole palette:
+
+```ts
+createTheme(defaultTheme, {
+  palettes: {
+    primary: { 60: '#2563eb', 70: '#1d4ed8' },
+    success: { 50: '#10b981' },
+  },
+});
+```
+
+### Raw CSS variable overrides
+
+Use the `overrides` escape hatch to set any `--genui-*` variable directly:
+
+```ts
+createTheme(defaultTheme, {
+  overrides: {
+    'base-size': '0.9rem',
+    '--genui-border-default': '#e2e8f0',
+  },
+});
+```
+
+Keys are automatically prefixed with `--genui-` when not already prefixed.
+
+### Applying a theme in Vue with `useTheme`
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useTheme, darkTheme } from '@swisnl/genui-widgets';
+
+const container = ref<HTMLElement | null>(null);
+const { theme } = useTheme(container, darkTheme);
+
+// Reactively update any token — the container updates automatically
+theme.value = { ...theme.value, surface: '#1a1a2e' };
+</script>
+
+<template>
+  <div ref="container">
+    <DynamicWidget :template="widget" />
+  </div>
+</template>
+```
+
+### Applying a theme manually
+
+```ts
+import { applyTheme, createTheme, defaultTheme } from '@swisnl/genui-widgets';
+
+applyTheme(document.getElementById('widget'), createTheme(defaultTheme, {
+  textPrimary: '#1a0040',
+}));
+```
+
+### Updating the theme at runtime
+
+```ts
+const widget = render(container, payload, { format: 'chatkit' });
+
+widget.setTheme(darkTheme);
+```
+
+## Widget types
+
+`Box` `Card` `Button` `Text` `Title` `Markdown` `Image` `Form` `Input` `Textarea` `Select` `Checkbox` `RadioGroup` `DatePicker` `Badge` `ListView` `ListViewItem` `Divider` `Spacer` `Row` `Col` `Label` `Caption` `Icon`
+
+## Development
+
+```bash
+npm install
+npm run demo      # run the demo
+npm run build     # build both outputs
+npm run lint
+npm run typecheck
+npm test
+npm run test:visual
+npm run test:visual:update   # refresh visual baselines
+npm run test:visual:playwright-image
+npm run test:visual:update:playwright-image   # refresh Linux baselines in the CI image
+```
+
+Visual baselines are stored per OS with prefixes like `macos-` and `linux-`. If you need to refresh the screenshots used by GitHub Actions, run the Playwright image update command so the baselines are regenerated inside `mcr.microsoft.com/playwright:v1.58.2-noble`.
+
+## Build output
+
+| File | Description |
+|---|---|
+| `dist/genui-widgets.esm.js` | ESM build for bundlers |
+| `dist/genui-widgets.css` | Stylesheet for ESM consumers |
+| `dist/genui-widgets.js` | Self-contained browser bundle with CSS injection |
+
+
+## Changelog
+
+Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.
+
+## Contributing
+
+Please see [CONTRIBUTING](https://github.com/spatie/.github/blob/main/CONTRIBUTING.md) for details.
+
+## Security Vulnerabilities
+
+Please review [our security policy](../../security/policy) on how to report security vulnerabilities.
+
+## Credits
+
+- [Joris Meijer](https://github.com/jormeijer)
+- [All Contributors](../../contributors)
+
+## License
+
+This package is open-sourced software licensed under the [MIT license](https://opensource.org/licenses/MIT).
+
+This package is [Treeware](https://treeware.earth). If you use it in production, then we ask that you [**buy the world a tree**](https://plant.treeware.earth/swisnl/mcp-client) to thank us for our work. By contributing to the Treeware forest you’ll be creating employment for local families and restoring wildlife habitats.
+
+## SWIS :heart: Open Source
+
+[SWIS](https://www.swis.nl) is a web agency from Leiden, the Netherlands. We love working with open source software.

package/dist/compat/chatkit.d.ts

@@ -0,0 +1,7 @@
+import type { WidgetTemplate } from '../types/widget';
+export interface ChatKitNode {
+    type: string;
+    children?: ChatKitNode[];
+    [prop: string]: unknown;
+}
+export declare function fromChatKit(widgetRoot: ChatKitNode): WidgetTemplate;

package/dist/composables/useActionDispatcher.d.ts

@@ -0,0 +1,5 @@
+import type { WidgetAction } from '../types/widget';
+export declare function useActionDispatcher(): {
+    actionHooks: import("..").ActionHook[];
+    dispatchAction: (action: WidgetAction | null | undefined) => Promise<void>;
+};

package/dist/composables/useTheme.d.ts

@@ -0,0 +1,227 @@
+import { type Ref } from 'vue';
+import type { ThemeConfig } from '../types/theme';
+export declare function useTheme(containerRef: Ref<HTMLElement | null>, initialTheme?: ThemeConfig): {
+    theme: Ref<{
+        baseSize?: string | undefined;
+        palettes?: {
+            primary?: {
+                5?: string | undefined;
+                10?: string | undefined;
+                20?: string | undefined;
+                30?: string | undefined;
+                40?: string | undefined;
+                50?: string | undefined;
+                60?: string | undefined;
+                70?: string | undefined;
+                80?: string | undefined;
+                90?: string | undefined;
+            } | undefined;
+            secondary?: {
+                5?: string | undefined;
+                10?: string | undefined;
+                20?: string | undefined;
+                30?: string | undefined;
+                40?: string | undefined;
+                50?: string | undefined;
+                60?: string | undefined;
+                70?: string | undefined;
+                80?: string | undefined;
+                90?: string | undefined;
+            } | undefined;
+            success?: {
+                5?: string | undefined;
+                10?: string | undefined;
+                20?: string | undefined;
+                30?: string | undefined;
+                40?: string | undefined;
+                50?: string | undefined;
+                60?: string | undefined;
+                70?: string | undefined;
+                80?: string | undefined;
+                90?: string | undefined;
+            } | undefined;
+            danger?: {
+                5?: string | undefined;
+                10?: string | undefined;
+                20?: string | undefined;
+                30?: string | undefined;
+                40?: string | undefined;
+                50?: string | undefined;
+                60?: string | undefined;
+                70?: string | undefined;
+                80?: string | undefined;
+                90?: string | undefined;
+            } | undefined;
+            warning?: {
+                5?: string | undefined;
+                10?: string | undefined;
+                20?: string | undefined;
+                30?: string | undefined;
+                40?: string | undefined;
+                50?: string | undefined;
+                60?: string | undefined;
+                70?: string | undefined;
+                80?: string | undefined;
+                90?: string | undefined;
+            } | undefined;
+            info?: {
+                5?: string | undefined;
+                10?: string | undefined;
+                20?: string | undefined;
+                30?: string | undefined;
+                40?: string | undefined;
+                50?: string | undefined;
+                60?: string | undefined;
+                70?: string | undefined;
+                80?: string | undefined;
+                90?: string | undefined;
+            } | undefined;
+            discovery?: {
+                5?: string | undefined;
+                10?: string | undefined;
+                20?: string | undefined;
+                30?: string | undefined;
+                40?: string | undefined;
+                50?: string | undefined;
+                60?: string | undefined;
+                70?: string | undefined;
+                80?: string | undefined;
+                90?: string | undefined;
+            } | undefined;
+            caution?: {
+                5?: string | undefined;
+                10?: string | undefined;
+                20?: string | undefined;
+                30?: string | undefined;
+                40?: string | undefined;
+                50?: string | undefined;
+                60?: string | undefined;
+                70?: string | undefined;
+                80?: string | undefined;
+                90?: string | undefined;
+            } | undefined;
+        } | undefined;
+        surface?: string | undefined;
+        surfaceSecondary?: string | undefined;
+        surfaceTertiary?: string | undefined;
+        background?: string | undefined;
+        textPrimary?: string | undefined;
+        textSecondary?: string | undefined;
+        textTertiary?: string | undefined;
+        borderDefault?: string | undefined;
+        disabledBg?: string | undefined;
+        disabledText?: string | undefined;
+        overrides?: Record<string, string> | undefined;
+    }, ThemeConfig | {
+        baseSize?: string | undefined;
+        palettes?: {
+            primary?: {
+                5?: string | undefined;
+                10?: string | undefined;
+                20?: string | undefined;
+                30?: string | undefined;
+                40?: string | undefined;
+                50?: string | undefined;
+                60?: string | undefined;
+                70?: string | undefined;
+                80?: string | undefined;
+                90?: string | undefined;
+            } | undefined;
+            secondary?: {
+                5?: string | undefined;
+                10?: string | undefined;
+                20?: string | undefined;
+                30?: string | undefined;
+                40?: string | undefined;
+                50?: string | undefined;
+                60?: string | undefined;
+                70?: string | undefined;
+                80?: string | undefined;
+                90?: string | undefined;
+            } | undefined;
+            success?: {
+                5?: string | undefined;
+                10?: string | undefined;
+                20?: string | undefined;
+                30?: string | undefined;
+                40?: string | undefined;
+                50?: string | undefined;
+                60?: string | undefined;
+                70?: string | undefined;
+                80?: string | undefined;
+                90?: string | undefined;
+            } | undefined;
+            danger?: {
+                5?: string | undefined;
+                10?: string | undefined;
+                20?: string | undefined;
+                30?: string | undefined;
+                40?: string | undefined;
+                50?: string | undefined;
+                60?: string | undefined;
+                70?: string | undefined;
+                80?: string | undefined;
+                90?: string | undefined;
+            } | undefined;
+            warning?: {
+                5?: string | undefined;
+                10?: string | undefined;
+                20?: string | undefined;
+                30?: string | undefined;
+                40?: string | undefined;
+                50?: string | undefined;
+                60?: string | undefined;
+                70?: string | undefined;
+                80?: string | undefined;
+                90?: string | undefined;
+            } | undefined;
+            info?: {
+                5?: string | undefined;
+                10?: string | undefined;
+                20?: string | undefined;
+                30?: string | undefined;
+                40?: string | undefined;
+                50?: string | undefined;
+                60?: string | undefined;
+                70?: string | undefined;
+                80?: string | undefined;
+                90?: string | undefined;
+            } | undefined;
+            discovery?: {
+                5?: string | undefined;
+                10?: string | undefined;
+                20?: string | undefined;
+                30?: string | undefined;
+                40?: string | undefined;
+                50?: string | undefined;
+                60?: string | undefined;
+                70?: string | undefined;
+                80?: string | undefined;
+                90?: string | undefined;
+            } | undefined;
+            caution?: {
+                5?: string | undefined;
+                10?: string | undefined;
+                20?: string | undefined;
+                30?: string | undefined;
+                40?: string | undefined;
+                50?: string | undefined;
+                60?: string | undefined;
+                70?: string | undefined;
+                80?: string | undefined;
+                90?: string | undefined;
+            } | undefined;
+        } | undefined;
+        surface?: string | undefined;
+        surfaceSecondary?: string | undefined;
+        surfaceTertiary?: string | undefined;
+        background?: string | undefined;
+        textPrimary?: string | undefined;
+        textSecondary?: string | undefined;
+        textTertiary?: string | undefined;
+        borderDefault?: string | undefined;
+        disabledBg?: string | undefined;
+        disabledText?: string | undefined;
+        overrides?: Record<string, string> | undefined;
+    }>;
+};

package/dist/genui-widgets.css

@@ -0,0 +1,2 @@
+.genui-badge{white-space:nowrap;border:1px solid #0000;align-items:center;margin-inline-start:calc(var(--genui-base-size) * .375);font-weight:500;line-height:1;display:inline-flex}.genui-badge--pill{border-radius:9999px}.genui-badge:not(.genui-badge--pill){border-radius:calc(var(--genui-base-size) * .25)}.genui-badge--size-sm{font-size:calc(var(--genui-base-size) * .75);padding:calc(var(--genui-base-size) * .125) calc(var(--genui-base-size) * .5);height:1.25rem}.genui-badge--size-md{font-size:calc(var(--genui-base-size) * .875);padding:calc(var(--genui-base-size) * .125) calc(var(--genui-base-size) * .625);height:1.5rem}.genui-badge--size-lg{font-size:calc(var(--genui-base-size) * .875);padding:calc(var(--genui-base-size) * .25) calc(var(--genui-base-size) * .75);height:1.75rem}.genui-badge--color-primary.genui-badge--variant-solid{background-color:var(--genui-primary-60);color:var(--genui-primary-5)}.genui-badge--color-primary.genui-badge--variant-soft{background-color:rgba(var(--genui-primary-60-rgb), .1);color:var(--genui-primary-60)}.genui-badge--color-primary.genui-badge--variant-outline{border-color:var(--genui-primary-30);color:var(--genui-primary-60);background-color:#0000}.genui-badge--color-secondary.genui-badge--variant-solid{background-color:var(--genui-secondary-60);color:var(--genui-secondary-5)}.genui-badge--color-secondary.genui-badge--variant-soft{background-color:rgba(var(--genui-secondary-60-rgb), .1);color:var(--genui-secondary-60)}.genui-badge--color-secondary.genui-badge--variant-outline{border-color:var(--genui-secondary-30);color:var(--genui-secondary-60);background-color:#0000}.genui-badge--color-success.genui-badge--variant-solid{background-color:var(--genui-success-60);color:var(--genui-success-5)}.genui-badge--color-success.genui-badge--variant-soft{background-color:rgba(var(--genui-success-60-rgb), .1);color:var(--genui-success-60)}.genui-badge--color-success.genui-badge--variant-outline{border-color:var(--genui-success-30);color:var(--genui-success-60);background-color:#0000}.genui-badge--color-danger.genui-badge--variant-solid{background-color:var(--genui-danger-60);color:var(--genui-danger-5)}.genui-badge--color-danger.genui-badge--variant-soft{background-color:rgba(var(--genui-danger-60-rgb), .1);color:var(--genui-danger-60)}.genui-badge--color-danger.genui-badge--variant-outline{border-color:var(--genui-danger-30);color:var(--genui-danger-60);background-color:#0000}.genui-badge--color-warning.genui-badge--variant-solid{background-color:var(--genui-warning-60);color:var(--genui-warning-5)}.genui-badge--color-warning.genui-badge--variant-soft{background-color:rgba(var(--genui-warning-60-rgb), .1);color:var(--genui-warning-60)}.genui-badge--color-warning.genui-badge--variant-outline{border-color:var(--genui-warning-30);color:var(--genui-warning-60);background-color:#0000}.genui-badge--color-info.genui-badge--variant-solid{background-color:var(--genui-info-60);color:var(--genui-info-5)}.genui-badge--color-info.genui-badge--variant-soft{background-color:rgba(var(--genui-info-60-rgb), .1);color:var(--genui-info-60)}.genui-badge--color-info.genui-badge--variant-outline{border-color:var(--genui-info-30);color:var(--genui-info-60);background-color:#0000}.genui-badge--color-discovery.genui-badge--variant-solid{background-color:var(--genui-discovery-60);color:var(--genui-discovery-5)}.genui-badge--color-discovery.genui-badge--variant-soft{background-color:rgba(var(--genui-discovery-60-rgb), .1);color:var(--genui-discovery-60)}.genui-badge--color-discovery.genui-badge--variant-outline{border-color:var(--genui-discovery-30);color:var(--genui-discovery-60);background-color:#0000}.genui-badge--color-caution.genui-badge--variant-solid{background-color:var(--genui-caution-60);color:var(--genui-caution-5)}.genui-badge--color-caution.genui-badge--variant-soft{background-color:rgba(var(--genui-caution-60-rgb), .1);color:var(--genui-caution-60)}.genui-badge--color-caution.genui-badge--variant-outline{border-color:var(--genui-caution-30);color:var(--genui-caution-60);background-color:#0000}.genui-loader{margin:calc(var(--genui-base-size) * .125);width:var(--genui-base-size);height:var(--genui-base-size);border:calc(var(--genui-base-size) * .125) solid color-mix(in srgb, currentColor 50%, transparent);box-sizing:border-box;border-bottom-color:currentColor;border-radius:50%;animation:1s linear infinite genui-rotation;display:inline-block}@keyframes genui-rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.genui-box{box-sizing:border-box;min-width:0}.genui-box--border{border:1px solid var(--genui-border-default)}.genui-box--flex{display:flex}.genui-box--action{cursor:pointer;outline:transparent solid calc(var(--genui-base-size) * .5);border-radius:calc(var(--genui-base-size) * .25)}.genui-box--action:hover{background-color:var(--genui-surface-tertiary);outline-color:var(--genui-surface-tertiary);transition:outline-width .2s}.genui-box--action:active{outline-width:calc(var(--genui-base-size) * .375);transition:outline-width .2s}.genui-box--action:focus-visible{outline-color:var(--genui-primary-60);outline-offset:2px;outline-width:1px}.genui-box--row.genui-box--gap .genui-badge,.genui-box--row.genui-box--gap .genui-button,.genui-box--row :first-child{margin-inline-start:0}.genui-image--flush+.genui-box{margin-top:var(--genui-base-size)}.genui-icon{color:currentColor;vertical-align:text-bottom;flex-shrink:0;display:inline-block}.genui-icon--size-xs{width:calc(var(--genui-base-size) * .75);height:calc(var(--genui-base-size) * .75)}.genui-icon--size-sm{width:calc(var(--genui-base-size) * .875);height:calc(var(--genui-base-size) * .875)}.genui-icon--size-md{width:var(--genui-base-size);height:var(--genui-base-size)}.genui-icon--size-lg{width:calc(var(--genui-base-size) * 1.125);height:calc(var(--genui-base-size) * 1.125)}.genui-icon--size-xl{width:calc(var(--genui-base-size) * 1.25);height:calc(var(--genui-base-size) * 1.25)}.genui-icon--size-2xl{width:calc(var(--genui-base-size) * 1.5);height:calc(var(--genui-base-size) * 1.5)}.genui-icon--size-3xl{width:calc(var(--genui-base-size) * 1.875);height:calc(var(--genui-base-size) * 1.875)}.genui-button{all:unset;box-sizing:border-box;margin:0;cursor:pointer;white-space:nowrap;border:1px solid #0000;justify-content:center;align-items:center;margin-inline-start:calc(var(--genui-base-size) * .375);font-weight:400;line-height:1;transition:all .2s;display:inline-flex}.genui-button:disabled{opacity:.5;cursor:not-allowed}.genui-button:focus-visible{outline:var(--genui-primary-50) solid 1px;outline-offset:2px;transition:none}.genui-button--size-3xs{height:22px;font-size:calc(var(--genui-base-size) * .625);padding:0 calc(var(--genui-base-size) * .25);gap:calc(var(--genui-base-size) * .25)}.genui-button--size-2xs{height:24px;font-size:calc(var(--genui-base-size) * .625);padding:0 calc(var(--genui-base-size) * .375);gap:calc(var(--genui-base-size) * .25)}.genui-button--size-xs{height:26px;font-size:calc(var(--genui-base-size) * .75);padding:0 calc(var(--genui-base-size) * .5);gap:calc(var(--genui-base-size) * .375)}.genui-button--size-sm{height:28px;font-size:calc(var(--genui-base-size) * .75);padding:0 calc(var(--genui-base-size) * .625);gap:calc(var(--genui-base-size) * .375)}.genui-button--size-md{height:32px;font-size:calc(var(--genui-base-size) * .875);padding:0 calc(var(--genui-base-size) * .75);gap:calc(var(--genui-base-size) * .5)}.genui-button--size-lg{height:36px;font-size:calc(var(--genui-base-size) * .875);padding:0 var(--genui-base-size);gap:calc(var(--genui-base-size) * .5)}.genui-button--size-xl{height:40px;font-size:var(--genui-base-size);padding:0 calc(var(--genui-base-size) * 1.25);gap:calc(var(--genui-base-size) * .625)}.genui-button--size-2xl{height:44px;font-size:calc(var(--genui-base-size) * 1.125);padding:0 calc(var(--genui-base-size) * 1.5);gap:calc(var(--genui-base-size) * .75)}.genui-button--size-3xl{height:48px;font-size:calc(var(--genui-base-size) * 1.25);padding:0 calc(var(--genui-base-size) * 1.75);gap:calc(var(--genui-base-size) * .875)}.genui-button--pill{border-radius:9999px}.genui-button:not(.genui-button--pill){border-radius:calc(var(--genui-base-size) * .375)}.genui-button--block{width:100%;display:flex}.genui-button--uniform{padding:0}.genui-button--uniform.genui-button--size-3xs{width:22px}.genui-button--uniform.genui-button--size-2xs{width:24px}.genui-button--uniform.genui-button--size-xs{width:26px}.genui-button--uniform.genui-button--size-sm{width:28px}.genui-button--uniform.genui-button--size-md{width:32px}.genui-button--uniform.genui-button--size-lg{width:36px}.genui-button--uniform.genui-button--size-xl{width:40px}.genui-button--uniform.genui-button--size-2xl{width:44px}.genui-button--uniform.genui-button--size-3xl{width:48px}.genui-button--color-primary.genui-button--variant-solid{background-color:var(--genui-primary-60);color:var(--genui-primary-5);border-color:#0000}.genui-button--color-primary.genui-button--variant-outline{color:var(--genui-primary-60);border-color:var(--genui-primary-30);background-color:#0000}.genui-button--color-primary.genui-button--variant-ghost{color:var(--genui-primary-60);background-color:#0000;border-color:#0000}.genui-button--color-secondary.genui-button--variant-solid{background-color:var(--genui-secondary-60);color:var(--genui-secondary-5);border-color:#0000}.genui-button--color-secondary.genui-button--variant-solid:hover:not(:disabled){background-color:var(--genui-secondary-70)}.genui-button--color-secondary.genui-button--variant-outline{color:var(--genui-secondary-60);border-color:var(--genui-secondary-30);background-color:#0000}.genui-button--color-secondary.genui-button--variant-outline:hover:not(:disabled){border-color:var(--genui-secondary-40);background-color:rgba(var(--genui-secondary-60-rgb), .06)}.genui-button--color-secondary.genui-button--variant-soft{background-color:rgba(var(--genui-secondary-60-rgb), .1);color:var(--genui-secondary-60);border-color:#0000}.genui-button--color-secondary.genui-button--variant-soft:hover:not(:disabled){background-color:rgba(var(--genui-secondary-60-rgb), .15)}.genui-button--color-secondary.genui-button--variant-ghost{color:var(--genui-secondary-60);background-color:#0000;border-color:#0000}.genui-button--color-secondary.genui-button--variant-ghost:hover:not(:disabled){background-color:rgba(var(--genui-secondary-60-rgb), .08)}.genui-button--color-success.genui-button--variant-solid{background-color:var(--genui-success-60);color:var(--genui-success-5);border-color:#0000}.genui-button--color-success.genui-button--variant-solid:hover:not(:disabled){background-color:var(--genui-success-70)}.genui-button--color-success.genui-button--variant-outline{color:var(--genui-success-60);border-color:var(--genui-success-30);background-color:#0000}.genui-button--color-success.genui-button--variant-outline:hover:not(:disabled){border-color:var(--genui-success-40);background-color:rgba(var(--genui-success-60-rgb), .06)}.genui-button--color-success.genui-button--variant-soft{background-color:rgba(var(--genui-success-60-rgb), .1);color:var(--genui-success-60);border-color:#0000}.genui-button--color-success.genui-button--variant-soft:hover:not(:disabled){background-color:rgba(var(--genui-success-60-rgb), .15)}.genui-button--color-success.genui-button--variant-ghost{color:var(--genui-success-60);background-color:#0000;border-color:#0000}.genui-button--color-success.genui-button--variant-ghost:hover:not(:disabled){background-color:rgba(var(--genui-success-60-rgb), .08)}.genui-button--color-danger.genui-button--variant-solid{background-color:var(--genui-danger-60);color:var(--genui-danger-5);border-color:#0000}.genui-button--color-danger.genui-button--variant-solid:hover:not(:disabled){background-color:var(--genui-danger-70)}.genui-button--color-danger.genui-button--variant-outline{color:var(--genui-danger-60);border-color:var(--genui-danger-30);background-color:#0000}.genui-button--color-danger.genui-button--variant-outline:hover:not(:disabled){border-color:var(--genui-danger-40);background-color:rgba(var(--genui-danger-60-rgb), .06)}.genui-button--color-danger.genui-button--variant-soft{background-color:rgba(var(--genui-danger-60-rgb), .1);color:var(--genui-danger-60);border-color:#0000}.genui-button--color-danger.genui-button--variant-soft:hover:not(:disabled){background-color:rgba(var(--genui-danger-60-rgb), .15)}.genui-button--color-danger.genui-button--variant-ghost{color:var(--genui-danger-60);background-color:#0000;border-color:#0000}.genui-button--color-danger.genui-button--variant-ghost:hover:not(:disabled){background-color:rgba(var(--genui-danger-60-rgb), .08)}.genui-button--color-warning.genui-button--variant-solid{background-color:var(--genui-warning-60);color:var(--genui-warning-5);border-color:#0000}.genui-button--color-warning.genui-button--variant-solid:hover:not(:disabled){background-color:var(--genui-warning-70)}.genui-button--color-warning.genui-button--variant-outline{color:var(--genui-warning-60);border-color:var(--genui-warning-30);background-color:#0000}.genui-button--color-warning.genui-button--variant-outline:hover:not(:disabled){border-color:var(--genui-warning-40);background-color:rgba(var(--genui-warning-60-rgb), .06)}.genui-button--color-warning.genui-button--variant-soft{background-color:rgba(var(--genui-warning-60-rgb), .1);color:var(--genui-warning-60);border-color:#0000}.genui-button--color-warning.genui-button--variant-soft:hover:not(:disabled){background-color:rgba(var(--genui-warning-60-rgb), .15)}.genui-button--color-warning.genui-button--variant-ghost{color:var(--genui-warning-60);background-color:#0000;border-color:#0000}.genui-button--color-warning.genui-button--variant-ghost:hover:not(:disabled){background-color:rgba(var(--genui-warning-60-rgb), .08)}.genui-button--color-info.genui-button--variant-solid{background-color:var(--genui-info-60);color:var(--genui-info-5);border-color:#0000}.genui-button--color-info.genui-button--variant-solid:hover:not(:disabled){background-color:var(--genui-info-70)}.genui-button--color-info.genui-button--variant-outline{color:var(--genui-info-60);border-color:var(--genui-info-30);background-color:#0000}.genui-button--color-info.genui-button--variant-outline:hover:not(:disabled){border-color:var(--genui-info-40);background-color:rgba(var(--genui-info-60-rgb), .06)}.genui-button--color-info.genui-button--variant-soft{background-color:rgba(var(--genui-info-60-rgb), .1);color:var(--genui-info-60);border-color:#0000}.genui-button--color-info.genui-button--variant-soft:hover:not(:disabled){background-color:rgba(var(--genui-info-60-rgb), .15)}.genui-button--color-info.genui-button--variant-ghost{color:var(--genui-info-60);background-color:#0000;border-color:#0000}.genui-button--color-info.genui-button--variant-ghost:hover:not(:disabled){background-color:rgba(var(--genui-info-60-rgb), .08)}.genui-button--color-discovery.genui-button--variant-solid{background-color:var(--genui-discovery-60);color:var(--genui-discovery-5);border-color:#0000}.genui-button--color-discovery.genui-button--variant-solid:hover:not(:disabled){background-color:var(--genui-discovery-70)}.genui-button--color-discovery.genui-button--variant-outline{color:var(--genui-discovery-60);border-color:var(--genui-discovery-30);background-color:#0000}.genui-button--color-discovery.genui-button--variant-outline:hover:not(:disabled){border-color:var(--genui-discovery-40);background-color:rgba(var(--genui-discovery-60-rgb), .06)}.genui-button--color-discovery.genui-button--variant-soft{background-color:rgba(var(--genui-discovery-60-rgb), .1);color:var(--genui-discovery-60);border-color:#0000}.genui-button--color-discovery.genui-button--variant-soft:hover:not(:disabled){background-color:rgba(var(--genui-discovery-60-rgb), .15)}.genui-button--color-discovery.genui-button--variant-ghost{color:var(--genui-discovery-60);background-color:#0000;border-color:#0000}.genui-button--color-discovery.genui-button--variant-ghost:hover:not(:disabled){background-color:rgba(var(--genui-discovery-60-rgb), .08)}.genui-button--color-caution.genui-button--variant-solid{background-color:var(--genui-caution-60);color:var(--genui-caution-5);border-color:#0000}.genui-button--color-caution.genui-button--variant-solid:hover:not(:disabled){background-color:var(--genui-caution-70)}.genui-button--color-caution.genui-button--variant-outline{color:var(--genui-caution-60);border-color:var(--genui-caution-30);background-color:#0000}.genui-button--color-caution.genui-button--variant-outline:hover:not(:disabled){border-color:var(--genui-caution-40);background-color:rgba(var(--genui-caution-60-rgb), .06)}.genui-button--color-caution.genui-button--variant-soft{background-color:rgba(var(--genui-caution-60-rgb), .1);color:var(--genui-caution-60);border-color:#0000}.genui-button--color-caution.genui-button--variant-soft:hover:not(:disabled){background-color:rgba(var(--genui-caution-60-rgb), .15)}.genui-button--color-caution.genui-button--variant-ghost{color:var(--genui-caution-60);background-color:#0000;border-color:#0000}.genui-button--color-caution.genui-button--variant-ghost:hover:not(:disabled){background-color:rgba(var(--genui-caution-60-rgb), .08)}.genui-button--color-primary.genui-button--variant-solid{background-color:var(--genui-primary-90)}.genui-button--color-primary.genui-button--variant-solid:hover:not(:disabled){background-color:var(--genui-primary-80)}.genui-button--color-primary.genui-button--variant-outline{color:var(--genui-primary-90);border-color:var(--genui-primary-40)}.genui-button--color-primary.genui-button--variant-outline:hover:not(:disabled){border-color:var(--genui-primary-50);background-color:rgba(var(--genui-primary-90-rgb), .06)}.genui-button--color-primary.genui-button--variant-soft{background-color:rgba(var(--genui-primary-90-rgb), .1);color:var(--genui-primary-90);border-color:#0000}.genui-button--color-primary.genui-button--variant-soft:hover:not(:disabled){background-color:rgba(var(--genui-primary-90-rgb), .15)}.genui-button--color-primary.genui-button--variant-ghost{color:var(--genui-primary-90)}.genui-button--color-primary.genui-button--variant-ghost:hover:not(:disabled){background-color:rgba(var(--genui-primary-90-rgb), .08)}.genui-button--block{margin-inline-start:0}.genui-caption{color:var(--genui-text-secondary);margin:0;line-height:1.5}.genui-caption--truncate{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.genui-caption--align-start{text-align:start}.genui-caption--align-center{text-align:center}.genui-caption--align-end{text-align:end}.genui-caption--weight-normal{font-weight:400}.genui-caption--weight-medium{font-weight:500}.genui-caption--weight-semibold{font-weight:600}.genui-caption--weight-bold{font-weight:700}.genui-caption--size-sm{font-size:calc(var(--genui-base-size) * .625)}.genui-caption--size-md{font-size:calc(var(--genui-base-size) * .75)}.genui-caption--size-lg{font-size:calc(var(--genui-base-size) * .875)}.genui-card-wrapper{gap:var(--genui-base-size);flex-direction:column;align-items:flex-start;display:flex}.genui-card{width:100%;box-shadow:0 calc(var(--genui-base-size) * .25) calc(var(--genui-base-size) * .5) 0 #0000001a;overflow:hidden}.genui-card>:not(:first-child){margin-block-start:var(--genui-base-size)}.genui-card-wrapper__actions{display:flex}.genui-card.genui-card--xs{width:calc(var(--genui-base-size) * 16)}.genui-card.genui-card--sm{width:calc(var(--genui-base-size) * 22.5)}.genui-card.genui-card--md{width:calc(var(--genui-base-size) * 26.25)}.genui-card.genui-card--lg{width:calc(var(--genui-base-size) * 32)}.genui-card.genui-card--xl{width:calc(var(--genui-base-size) * 40)}.genui-checkbox{align-items:center;gap:calc(var(--genui-base-size) * .5);cursor:pointer;font-size:calc(var(--genui-base-size) * .875);color:var(--genui-text-primary);-webkit-user-select:none;user-select:none;display:inline-flex}.genui-checkbox--disabled{opacity:.6;cursor:not-allowed;color:var(--genui-disabled-text)}.genui-checkbox--disabled .genui-checkbox__control{background:var(--genui-disabled-bg)}.genui-checkbox__input{opacity:0;width:0;height:0;position:absolute}.genui-checkbox__input:checked+.genui-checkbox__control{background:var(--genui-primary-60);border-color:var(--genui-primary-60)}.genui-checkbox__input:checked+.genui-checkbox__control .genui-checkbox__icon{opacity:1;transform:scale(1)}.genui-checkbox__input:focus-visible+.genui-checkbox__control{border-color:var(--genui-primary-60);box-shadow:0 0 0 2px #0000001a}.genui-checkbox__control{width:var(--genui-base-size);height:var(--genui-base-size);border:1px solid var(--genui-border-default);border-radius:calc(var(--genui-base-size) * .25);background:var(--genui-surface);justify-content:center;align-items:center;transition:all .2s;display:flex}.genui-checkbox__icon{width:calc(var(--genui-base-size) * .75);height:calc(var(--genui-base-size) * .75);color:var(--genui-surface);opacity:0;transition:all .2s;transform:scale(.5)}.genui-checkbox__label{line-height:1.25}.genui-datepicker-wrapper{box-sizing:border-box;border-radius:calc(var(--genui-base-size) * .375);align-items:center;width:100%;transition:all .2s;display:inline-flex;overflow:hidden}.genui-datepicker{all:unset;width:100%;color:var(--genui-text-primary);cursor:text;background:0 0;font-family:inherit}.genui-datepicker::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.6;transition:all .2s}.genui-datepicker::-webkit-calendar-picker-indicator:hover{opacity:1}.genui-datepicker-wrapper--outline{border:1px solid var(--genui-border-default);background:var(--genui-surface)}.genui-datepicker-wrapper--outline:focus-within{border-color:var(--genui-primary-60);box-shadow:0 0 0 2px #0000001a}.genui-datepicker-wrapper--soft{background:var(--genui-surface-secondary);border:none}.genui-datepicker-wrapper--soft:focus-within{background:var(--genui-surface-tertiary)}.genui-datepicker-wrapper--ghost{background:0 0;border:none}.genui-datepicker-wrapper--ghost:hover{background:var(--genui-surface-secondary)}.genui-datepicker-wrapper--solid{background:var(--genui-primary-60);color:var(--genui-surface)}.genui-datepicker-wrapper--solid .genui-datepicker{color:var(--genui-surface)}.genui-datepicker-wrapper--disabled{opacity:.6;background-color:var(--genui-disabled-bg);cursor:not-allowed}.genui-datepicker-wrapper--disabled .genui-datepicker{cursor:not-allowed;color:var(--genui-disabled-text)}.genui-datepicker-wrapper--3xs{padding:calc(var(--genui-base-size) * .125) calc(var(--genui-base-size) * .25);font-size:calc(var(--genui-base-size) * .625)}.genui-datepicker-wrapper--2xs{padding:calc(var(--genui-base-size) * .25) calc(var(--genui-base-size) * .375);font-size:calc(var(--genui-base-size) * .75)}.genui-datepicker-wrapper--xs{padding:calc(var(--genui-base-size) * .375) calc(var(--genui-base-size) * .5);font-size:calc(var(--genui-base-size) * .75)}.genui-datepicker-wrapper--sm{padding:calc(var(--genui-base-size) * .375) calc(var(--genui-base-size) * .625);font-size:calc(var(--genui-base-size) * .875)}.genui-datepicker-wrapper--md{padding:calc(var(--genui-base-size) * .5) calc(var(--genui-base-size) * .75);font-size:calc(var(--genui-base-size) * .875)}.genui-datepicker-wrapper--lg{padding:calc(var(--genui-base-size) * .625) calc(var(--genui-base-size) * .875);font-size:var(--genui-base-size)}.genui-datepicker-wrapper--xl{padding:calc(var(--genui-base-size) * .75) var(--genui-base-size);font-size:calc(var(--genui-base-size) * 1.125)}.genui-datepicker-wrapper--2xl{padding:var(--genui-base-size) calc(var(--genui-base-size) * 1.25);font-size:calc(var(--genui-base-size) * 1.25)}.genui-datepicker-wrapper--3xl{padding:calc(var(--genui-base-size) * 1.25) calc(var(--genui-base-size) * 1.5);font-size:calc(var(--genui-base-size) * 1.5)}.genui-divider{margin:var(--genui-base-size) 0;border:none;width:100%}.genui-divider--color-default{background-color:var(--genui-border-default)}.genui-divider--color-subtle{background-color:var(--genui-secondary-10)}.genui-divider--color-strong{background-color:var(--genui-secondary-40)}.genui-divider--flush{margin-left:calc(var(--genui-base-size) * -1);margin-right:calc(var(--genui-base-size) * -1);width:calc(var(--genui-base-size) * 102%)}.genui-form{width:100%}.genui-image{border-radius:calc(var(--genui-base-size) * .375);max-width:100%;display:block}.genui-image--frame{padding:calc(var(--genui-base-size) * .25);background-color:#fff;border:1px solid #e4e4e7}.genui-image--flush{border-radius:0;width:calc(100% + 3rem);max-width:calc(100% + 3rem);margin:0 -1.5rem}.genui-image--flush:first-child{margin-top:-1.5rem}.genui-image--flush:last-child{margin-bottom:-1.5rem}.genui-input-wrapper{box-sizing:border-box;border-radius:calc(var(--genui-base-size) * .375);align-items:center;width:100%;transition:all .2s;display:flex;overflow:hidden}.genui-input{all:unset;width:100%;color:var(--genui-text-primary);background:0 0;font-family:inherit}.genui-input::placeholder{color:var(--genui-text-tertiary)}.genui-input-wrapper--outline{border:1px solid var(--genui-border-default);background:var(--genui-surface)}.genui-input-wrapper--outline:focus-within{border-color:var(--genui-primary-60);box-shadow:0 0 0 2px #0000001a}.genui-input-wrapper--soft{background:var(--genui-surface-secondary);border:none}.genui-input-wrapper--soft:focus-within{background:var(--genui-surface-tertiary)}.genui-input-wrapper--error{border-color:var(--genui-danger-60)}.genui-input-wrapper--disabled{opacity:.6;background-color:var(--genui-disabled-bg);cursor:not-allowed}.genui-input-wrapper--disabled .genui-input{cursor:not-allowed;color:var(--genui-disabled-text)}.genui-input-wrapper--3xs{padding:calc(var(--genui-base-size) * .125) calc(var(--genui-base-size) * .25);font-size:calc(var(--genui-base-size) * .625)}.genui-input-wrapper--2xs{padding:calc(var(--genui-base-size) * .25) calc(var(--genui-base-size) * .375);font-size:calc(var(--genui-base-size) * .75)}.genui-input-wrapper--xs{padding:calc(var(--genui-base-size) * .375) calc(var(--genui-base-size) * .5);font-size:calc(var(--genui-base-size) * .75)}.genui-input-wrapper--sm{padding:calc(var(--genui-base-size) * .375) calc(var(--genui-base-size) * .625);font-size:calc(var(--genui-base-size) * .875)}.genui-input-wrapper--md{padding:calc(var(--genui-base-size) * .5) calc(var(--genui-base-size) * .75);font-size:calc(var(--genui-base-size) * .875)}.genui-input-wrapper--lg{padding:calc(var(--genui-base-size) * .625) calc(var(--genui-base-size) * .875);font-size:var(--genui-base-size)}.genui-input-wrapper--xl{padding:calc(var(--genui-base-size) * .75) var(--genui-base-size);font-size:calc(var(--genui-base-size) * 1.125)}.genui-input-wrapper--2xl{padding:var(--genui-base-size) calc(var(--genui-base-size) * 1.25);font-size:calc(var(--genui-base-size) * 1.25)}.genui-input-wrapper--3xl{padding:calc(var(--genui-base-size) * 1.25) calc(var(--genui-base-size) * 1.5);font-size:calc(var(--genui-base-size) * 1.5)}.genui-label{margin-bottom:calc(var(--genui-base-size) * .25);color:var(--genui-text-secondary);line-height:1.25;display:block}.genui-label--align-start{text-align:start}.genui-label--align-center{text-align:center}.genui-label--align-end{text-align:end}.genui-label--weight-normal{font-weight:400}.genui-label--weight-medium{font-weight:500}.genui-label--weight-semibold{font-weight:600}.genui-label--weight-bold{font-weight:700}.genui-label--size-xs{font-size:calc(var(--genui-base-size) * .75)}.genui-label--size-sm{font-size:calc(var(--genui-base-size) * .875)}.genui-label--size-md{font-size:var(--genui-base-size)}.genui-label--size-lg{font-size:calc(var(--genui-base-size) * 1.125)}.genui-label--size-xl{font-size:calc(var(--genui-base-size) * 1.25)}.genui-list,.genui-list-item{width:100%}.genui-markdown ul,.genui-markdown ol,.genui-markdown table,.genui-markdown blockquote,.genui-markdown pre,.genui-markdown p{color:var(--genui-text-primary);font-size:var(--genui-base-size);margin:0 0 var(--genui-base-size);padding:0;line-height:1.625}.genui-markdown ul:last-child,.genui-markdown ol:last-child,.genui-markdown table:last-child,.genui-markdown blockquote:last-child,.genui-markdown pre:last-child,.genui-markdown p:last-child{margin-bottom:0}.genui-markdown ul{padding-left:calc(var(--genui-base-size) * 1.5);list-style:outside}.genui-markdown ol{padding-left:calc(var(--genui-base-size) * 1.25);list-style:auto}.genui-markdown table{border-spacing:0;border-radius:calc(var(--genui-base-size) * .5);border:1px solid var(--genui-border-default);width:100%;overflow:hidden}.genui-markdown table th,.genui-markdown table td{font-size:var(--genui-base-size);text-align:left;vertical-align:middle;color:var(--genui-text-primary);border:0;border-bottom:1px solid var(--genui-border-default);padding:calc(var(--genui-base-size) * .45) calc(var(--genui-base-size) * .5) calc(var(--genui-base-size) * .25);line-height:1.625}.genui-markdown table th{background-color:var(--genui-surface-secondary);color:var(--genui-text-primary);font-weight:700}.genui-markdown blockquote{padding:calc(var(--genui-base-size) * .25) var(--genui-base-size);margin-left:calc(var(--genui-base-size) * .125);border-left:calc(var(--genui-base-size) * .25) solid var(--genui-border-default);color:var(--genui-text-secondary);font-style:italic}.genui-markdown pre,.genui-markdown code{padding:calc(var(--genui-base-size) * .125) calc(var(--genui-base-size) * .25);font-size:var(--genui-base-size);font-variant-numeric:tabular-nums lining-nums slashed-zero;font-feature-settings:"tnum", "zero";unicode-bidi:isolate;font-family:monospace}.genui-markdown code{-webkit-box-decoration-break:clone;box-decoration-break:clone;background:var(--genui-surface-secondary);border-radius:calc(var(--genui-base-size) * .125);white-space:pre-wrap;margin:0}.genui-markdown pre{background:var(--genui-surface-tertiary);border-radius:calc(var(--genui-base-size) * .5);padding:calc(var(--genui-base-size) * .5) var(--genui-base-size);tab-size:4;box-shadow:inset 0 calc(var(--genui-base-size) * .625) calc(var(--genui-base-size) * .5) calc(var(--genui-base-size) * -.625) var(--genui-border-default), inset 0 calc(var(--genui-base-size) * -.625) calc(var(--genui-base-size) * .5) calc(var(--genui-base-size) * -.625) var(--genui-border-default);overflow-x:auto}.genui-markdown pre code{all:unset}.genui-markdown strong{font-weight:600}.genui-markdown a:not([class]){color:inherit;font-weight:600;text-decoration:underline}.genui-radio-group{gap:var(--genui-base-size);display:flex}.genui-radio-group--col{gap:calc(var(--genui-base-size) * .5);flex-direction:column}.genui-radio{align-items:center;gap:calc(var(--genui-base-size) * .5);cursor:pointer;font-size:calc(var(--genui-base-size) * .875);color:var(--genui-text-primary);-webkit-user-select:none;user-select:none;display:inline-flex}.genui-radio--disabled{opacity:.6;cursor:not-allowed;color:var(--genui-disabled-text)}.genui-radio--disabled .genui-radio__control{background:var(--genui-disabled-bg)}.genui-radio__input{opacity:0;width:0;height:0;position:absolute}.genui-radio__input:checked+.genui-radio__control{border-color:var(--genui-primary-60)}.genui-radio__input:checked+.genui-radio__control:after{transform:scale(1)}.genui-radio__input:focus-visible+.genui-radio__control{box-shadow:0 0 0 2px #0000001a}.genui-radio__control{width:var(--genui-base-size);height:var(--genui-base-size);border:1px solid var(--genui-border-default);background:var(--genui-surface);border-radius:50%;justify-content:center;align-items:center;transition:all .2s;display:flex;position:relative}.genui-radio__control:after{content:"";width:calc(var(--genui-base-size) * .5);height:calc(var(--genui-base-size) * .5);background:var(--genui-primary-60);border-radius:50%;transition:transform .2s;transform:scale(0)}.genui-radio__label{line-height:1.25}.genui-row{align-items:center}.genui-select-wrapper{box-sizing:border-box;border-radius:calc(var(--genui-base-size) * .375);background:var(--genui-surface);align-items:center;transition:all .2s;display:inline-flex;position:relative}.genui-select-wrapper--block{width:100%;display:flex}.genui-select-wrapper--pill{border-radius:calc(var(--genui-base-size) * 999)}.genui-select{all:unset;box-sizing:border-box;width:100%;color:var(--genui-text-primary);appearance:none;padding-right:calc(var(--genui-base-size) * 2);cursor:pointer;background:0 0;font-family:inherit}.genui-select::placeholder{color:var(--genui-text-secondary)}.genui-select-arrow{right:calc(var(--genui-base-size) * .75);pointer-events:none;color:var(--genui-text-secondary);align-items:center;display:flex;position:absolute}.genui-select-wrapper--outline{border:1px solid var(--genui-border-default);background:var(--genui-surface)}.genui-select-wrapper--outline:focus-within{border-color:var(--genui-primary-60);box-shadow:0 0 0 2px #0000001a}.genui-select-wrapper--soft{background:var(--genui-surface-secondary);border:none}.genui-select-wrapper--soft:focus-within{background:var(--genui-surface-tertiary)}.genui-select-wrapper--ghost{background:0 0;border:none}.genui-select-wrapper--ghost:hover{background:var(--genui-surface-secondary)}.genui-select-wrapper--solid{background:var(--genui-primary-60);color:var(--genui-surface)}.genui-select-wrapper--solid .genui-select{color:var(--genui-surface)}.genui-select-wrapper--solid .genui-select-arrow{color:var(--genui-surface-secondary)}.genui-select-wrapper--disabled{opacity:.6;background-color:var(--genui-disabled-bg);cursor:not-allowed}.genui-select-wrapper--disabled .genui-select{cursor:not-allowed;color:var(--genui-disabled-text)}.genui-select-wrapper--disabled .genui-select-arrow{color:var(--genui-disabled-text)}.genui-select option{background:var(--genui-surface);color:var(--genui-text-primary)}.genui-select-wrapper--3xs .genui-select{padding:calc(var(--genui-base-size) * .125) calc(var(--genui-base-size) * .25);font-size:calc(var(--genui-base-size) * .625)}.genui-select-wrapper--2xs .genui-select{padding:calc(var(--genui-base-size) * .25) calc(var(--genui-base-size) * .375);font-size:calc(var(--genui-base-size) * .75)}.genui-select-wrapper--xs .genui-select{padding:calc(var(--genui-base-size) * .375) calc(var(--genui-base-size) * .5);font-size:calc(var(--genui-base-size) * .75)}.genui-select-wrapper--sm .genui-select{padding:calc(var(--genui-base-size) * .375) calc(var(--genui-base-size) * .625);font-size:calc(var(--genui-base-size) * .875)}.genui-select-wrapper--md .genui-select{padding:calc(var(--genui-base-size) * .5) calc(var(--genui-base-size) * .75);font-size:calc(var(--genui-base-size) * .875)}.genui-select-wrapper--lg .genui-select{padding:calc(var(--genui-base-size) * .625) calc(var(--genui-base-size) * .875);font-size:var(--genui-base-size)}.genui-select-wrapper--xl .genui-select{padding:calc(var(--genui-base-size) * .75) var(--genui-base-size);font-size:calc(var(--genui-base-size) * 1.125)}.genui-select-wrapper--2xl .genui-select{padding:var(--genui-base-size) calc(var(--genui-base-size) * 1.25);font-size:calc(var(--genui-base-size) * 1.25)}.genui-select-wrapper--3xl .genui-select{padding:calc(var(--genui-base-size) * 1.25) calc(var(--genui-base-size) * 1.5);font-size:calc(var(--genui-base-size) * 1.5)}.genui-spacer{place-self:stretch stretch;display:block}.genui-text{color:var(--genui-text-primary);margin:0;line-height:1.5}.genui-text--truncate{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.genui-text--align-start{text-align:start}.genui-text--align-center{text-align:center}.genui-text--align-end{text-align:end}.genui-text--align-justify{text-align:justify}.genui-text--weight-normal{font-weight:400}.genui-text--weight-medium{font-weight:500}.genui-text--weight-semibold{font-weight:600}.genui-text--weight-bold{font-weight:700}.genui-text--size-xs{font-size:calc(var(--genui-base-size) * .75)}.genui-text--size-sm{font-size:calc(var(--genui-base-size) * .875)}.genui-text--size-md{font-size:var(--genui-base-size)}.genui-text--size-lg{font-size:calc(var(--genui-base-size) * 1.125)}.genui-text--size-xl{font-size:calc(var(--genui-base-size) * 1.25)}.genui-textarea-wrapper{box-sizing:border-box;border-radius:calc(var(--genui-base-size) * .375);width:100%;transition:all .2s;display:flex}.genui-textarea{all:unset;width:100%;color:var(--genui-text-primary);resize:vertical;background:0 0;font-family:inherit;line-height:1.5}.genui-textarea::placeholder{color:var(--genui-text-secondary)}.genui-textarea-wrapper--outline{border:1px solid var(--genui-border-default);background:var(--genui-surface)}.genui-textarea-wrapper--outline:focus-within{border-color:var(--genui-primary-60);box-shadow:0 0 0 2px #0000001a}.genui-textarea-wrapper--soft{background:var(--genui-surface-secondary);border:none}.genui-textarea-wrapper--soft:focus-within{background:var(--genui-surface-tertiary)}.genui-textarea-wrapper--disabled{opacity:.6;background-color:var(--genui-disabled-bg);cursor:not-allowed}.genui-textarea-wrapper--disabled .genui-textarea{cursor:not-allowed;color:var(--genui-disabled-text)}.genui-textarea-wrapper--3xs{padding:calc(var(--genui-base-size) * .125) calc(var(--genui-base-size) * .25);font-size:calc(var(--genui-base-size) * .625)}.genui-textarea-wrapper--2xs{padding:calc(var(--genui-base-size) * .25) calc(var(--genui-base-size) * .375);font-size:calc(var(--genui-base-size) * .75)}.genui-textarea-wrapper--xs{padding:calc(var(--genui-base-size) * .375) calc(var(--genui-base-size) * .5);font-size:calc(var(--genui-base-size) * .75)}.genui-textarea-wrapper--sm{padding:calc(var(--genui-base-size) * .375) calc(var(--genui-base-size) * .625);font-size:calc(var(--genui-base-size) * .875)}.genui-textarea-wrapper--md{padding:calc(var(--genui-base-size) * .5) calc(var(--genui-base-size) * .75);font-size:calc(var(--genui-base-size) * .875)}.genui-textarea-wrapper--lg{padding:calc(var(--genui-base-size) * .625) calc(var(--genui-base-size) * .875);font-size:var(--genui-base-size)}.genui-textarea-wrapper--xl{padding:calc(var(--genui-base-size) * .75) var(--genui-base-size);font-size:calc(var(--genui-base-size) * 1.125)}.genui-textarea-wrapper--2xl{padding:var(--genui-base-size) calc(var(--genui-base-size) * 1.25);font-size:calc(var(--genui-base-size) * 1.25)}.genui-textarea-wrapper--3xl{padding:calc(var(--genui-base-size) * 1.25) calc(var(--genui-base-size) * 1.5);font-size:calc(var(--genui-base-size) * 1.5)}.genui-title{color:var(--genui-text-primary);margin:0;line-height:1.25}.genui-title--truncate{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.genui-title--align-start{text-align:start}.genui-title--align-center{text-align:center}.genui-title--align-end{text-align:end}.genui-title--align-justify{text-align:justify}.genui-title--weight-normal{font-weight:400}.genui-title--weight-medium{font-weight:500}.genui-title--weight-semibold{font-weight:600}.genui-title--weight-bold{font-weight:700}.genui-title--size-sm{font-size:calc(var(--genui-base-size) * 1.125)}.genui-title--size-md{font-size:calc(var(--genui-base-size) * 1.25)}.genui-title--size-lg{font-size:calc(var(--genui-base-size) * 1.5)}.genui-title--size-xl{font-size:calc(var(--genui-base-size) * 1.875)}.genui-title--size-2xl{font-size:calc(var(--genui-base-size) * 2.25)}.genui-title--size-3xl{font-size:calc(var(--genui-base-size) * 3)}.genui-title--size-4xl{font-size:calc(var(--genui-base-size) * 4)}.genui-title--size-5xl{font-size:calc(var(--genui-base-size) * 5)}.genui-widget-root{--genui-base-size:1rem;font-size:var(--genui-base-size);line-height:1;position:relative}.genui-fade-enter-active,.genui-fade-leave-active{transition:opacity .3s}.genui-fade-enter-from,.genui-fade-leave-to{opacity:0}.genui-slide-enter-active,.genui-slide-leave-active{max-height:var(--mh);transition:max-height .3s,padding .3s,opacity .3s}.genui-slide-enter-from,.genui-slide-leave-to{opacity:0;max-height:0;padding-top:0;padding-bottom:0;overflow:hidden}.genui-fly-enter-active,.genui-fly-leave-active{transition:all .3s}.genui-fly-enter-from,.genui-fly-leave-to{opacity:0;transform:translateX(calc(var(--genui-base-size) * -1))}.genui-fly-staggered-leave-active{transition:opacity .3s linear,transform .3s;transition-delay:calc(.1s * (var(--total) - var(--i)))}.genui-fly-staggered-enter-active{transition:opacity .3s linear,transform .3s;transition-delay:calc(.1s * var(--i))}.genui-fly-staggered-enter-from{transform:translateX(calc(var(--genui-base-size) * -1));opacity:0}.genui-fly-staggered-enter-to,.genui-fly-staggered-leave-from{opacity:1;transform:translate(0)}.genui-fly-staggered-leave-to{transform:translateX(var(--genui-base-size));opacity:0}.genui-rise-enter-active,.genui-rise-leave-active{transition:opacity .3s linear,transform .3s}.genui-rise-leave-active{position:absolute}.genui-rise-enter-from{transform:translateY(var(--genui-base-size));opacity:0}.genui-rise-enter-to,.genui-rise-leave-from{opacity:1;transform:translateY(0)}.genui-rise-leave-to{transform:translateY(calc(var(--genui-base-size) * -1));opacity:0}
+/*$vite$:1*/