urkit-ui 0.1.5

package/README.md

@@ -0,0 +1,322 @@
+# Urkit UI
+
+A modern, accessible UI component library for Nuxt 4 with custom CSS architecture (no Tailwind).
+
+[![npm version](https://img.shields.io/npm/v/urkit-ui.svg)](https://www.npmjs.com/package/urkit-ui)
+[![npm downloads](https://img.shields.io/npm/dm/urkit-ui.svg)](https://www.npmjs.com/package/urkit-ui)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
+
+## ✨ Features
+
+- 🎨 **Custom CSS Architecture** - Beautiful components without Tailwind dependency
+- 🚀 **Nuxt 4 Ready** - Built specifically for Nuxt 4
+- ♿ **Accessible** - WCAG compliant components
+- 🎭 **Customizable** - Flexible theming and icon system
+- 📦 **Zero Config** - Works out of the box with sensible defaults
+- 🔧 **TypeScript** - Full TypeScript support
+- 🎯 **Auto-Import** - Components automatically available in your app
+
+## 📦 Available Components
+
+Currently available components in v0.1.5:
+
+| Component | Description | Status |
+|-----------|-------------|--------|
+| **UrButton** | Full-featured button with variants, sizes, loading states, and icons | ✅ Stable |
+| **UrInput** | Comprehensive input component with validation, password toggle, icons, and select | ✅ Stable |
+| **UrIcon** | Flexible icon system with namespace support | ✅ Stable |
+
+### Coming Soon
+
+- ✨ **UrCard** - Card container component
+- ✨ **UrModal** - Modal/dialog component
+- ✨ **UrToast** - Toast notification system
+- ✨ **UrCheckbox** - Checkbox input component
+- ✨ **UrRadio** - Radio button component
+- ✨ **UrSelect** - Dropdown select component
+- ✨ **UrTextarea** - Multi-line text input
+- And more...
+
+## 🚀 Quick Start
+
+### Installation
+
+```bash
+# Using pnpm (recommended)
+pnpm add urkit-ui
+
+# Using npm
+npm install urkit-ui
+
+# Using yarn
+yarn add urkit-ui
+```
+
+### Setup
+
+Add `urkit-ui` to your `nuxt.config.ts`:
+
+```typescript
+export default defineNuxtConfig({
+  modules: ['urkit-ui']
+})
+```
+
+That's it! Components are now auto-imported with the `Ur` prefix.
+
+### Usage
+
+```vue
+<template>
+  <div>
+    <UrButton variant="primary">Click Me</UrButton>
+
+    <UrInput
+      v-model="email"
+      type="email"
+      label="Email"
+      placeholder="Enter your email"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+const email = ref('')
+</script>
+```
+
+## 📚 Components
+
+### Button
+
+Full-featured button component with multiple variants, sizes, and states.
+
+```vue
+<UrButton
+  variant="primary"
+  mode="filled"
+  size="md"
+  icon="icons:plus"
+  :loading="false"
+>
+  Click Me
+</UrButton>
+```
+
+**Variants**: `primary`, `error`, `success`, `neutral`
+**Modes**: `filled`, `stroke`, `lighter`, `ghost`
+**Sizes**: `sm`, `md`, `lg`, `xlg`
+
+### Input
+
+Comprehensive input component with validation, icons, and advanced features.
+
+```vue
+<UrInput
+  v-model="value"
+  type="text"
+  label="Label"
+  placeholder="Placeholder"
+  icon="icons:search"
+/>
+```
+
+**Features**:
+- Text, password, email, number inputs
+- Password toggle with requirements validation
+- Icons and affixes (prefix/suffix)
+- Button integration
+- Select dropdown
+- Disabled and error states
+
+## 🎨 Icon System
+
+Urkit includes a flexible icon system with namespaces.
+
+### Included Icons (for testing)
+
+The module includes 10 essential icons to get you started:
+
+| Icon | Name | Usage |
+|------|------|-------|
+| 👁️ | `icons:show` | Password toggle (show) |
+| 🙈 | `icons:hide` | Password toggle (hide) |
+| ⏳ | `icons:loader-icon` | Loading states |
+| 🔍 | `icons:search` | Search functionality |
+| ❌ | `icons:toast-close` | Close/dismiss actions |
+| ❤️ | `icons:heart` | Like/favorite |
+| ⭐ | `icons:star` | Rating/favorites |
+| 👤 | `icons:profile` | User/account |
+| 📋 | `icons:copy` | Copy action |
+| ⬇️ | `icons:arrow-down` | Dropdowns/navigation |
+
+```vue
+<!-- Use included icons -->
+<UrIcon name="icons:search" />
+<UrIcon name="icons:heart" />
+```
+
+**💡 For production**: Add your own icons! The included icons are minimal for testing purposes.
+
+### Custom Icons
+
+#### Method 1: Override Built-in Icons
+
+Place SVG files in your project's `public/assets/icons/` directory:
+
+```
+your-app/
+└── public/
+    └── assets/
+        └── icons/
+            └── custom-icon.svg  ← Overrides module's icon
+```
+
+#### Method 2: Add Custom Namespace
+
+```typescript
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: ['urkit-ui'],
+
+  urkitUi: {
+    iconNamespaces: {
+      icons: '/assets/icons',      // Default
+      logos: '/assets/logos',      // Default
+      custom: '/custom/icons'      // Your custom namespace
+    }
+  }
+})
+```
+
+Then use: `<UrIcon name="custom:my-icon" />`
+
+## ⚙️ Configuration
+
+Customize Urkit UI in your `nuxt.config.ts`:
+
+```typescript
+export default defineNuxtConfig({
+  modules: ['urkit-ui'],
+
+  urkitUi: {
+    // Customize component prefix (default: 'Ur')
+    prefix: 'Ur',
+
+    // Customize brand colors
+    colors: {
+      primary: {
+        500: '#0ea5e9',  // Your brand color
+        600: '#0284c7',
+        700: '#0369a1'
+      }
+    },
+
+    // Customize icon namespaces
+    iconNamespaces: {
+      icons: '/assets/icons',
+      logos: '/assets/logos',
+      social: '/custom/social-icons'
+    }
+  }
+})
+```
+
+## 🎨 Color Customization
+
+Urkit UI uses a purple theme by default. Easily customize to match your brand:
+
+```typescript
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: ['urkit-ui'],
+
+  urkitUi: {
+    colors: {
+      primary: {
+        50: '#f0f9ff',
+        500: '#0ea5e9',  // Main brand color
+        600: '#0284c7',  // Hover
+        700: '#0369a1'   // Active
+      },
+      neutral: {
+        1: '#fafafa',
+        7: '#737373',
+        12: '#171717'
+      }
+    }
+  }
+})
+```
+
+**See [COLORS.md](./COLORS.md) for complete customization guide, examples, and color scales.**
+
+## 📖 Documentation
+
+- **[Complete Usage Guide](./USAGE.md)** - Detailed component documentation and examples
+- **[Color Customization](./COLORS.md)** - Brand color customization guide
+- **[Architecture](./ARCHITECTURE.md)** - Technical architecture and asset management
+
+## 🔧 Requirements
+
+- Nuxt 4.0.0 or later
+- Node.js 18 or later
+
+## 📝 License
+
+MIT
+
+## 🤝 Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## 📬 Support
+
+- 📦 [NPM Package](https://www.npmjs.com/package/urkit-ui)
+- 🐛 [Report Issues](https://github.com/jaeel29/urkit-ui/issues)
+- 💬 [Discussions](https://github.com/jaeel29/urkit-ui/discussions)
+- 📖 [Documentation](https://github.com/jaeel29/urkit-ui#readme)
+
+---
+
+---
+
+## 👨‍💻 Development
+
+This section is for contributors developing the Urkit UI module itself.
+
+### Setup
+
+```bash
+# Install dependencies
+pnpm install
+
+# Prepare module
+pnpm run dev:prepare
+
+# Start playground
+pnpm run dev
+```
+
+### Building
+
+```bash
+# Build the module
+pnpm run prepack
+```
+
+### Project Structure
+
+```
+urkit-ui/
+├── src/
+│   ├── module.ts                 # Module configuration
+│   └── runtime/
+│       ├── assets/css/           # CSS files
+│       ├── components/           # Vue components
+│       ├── composables/          # Composables
+│       └── public/              # Public assets (icons, logos)
+├── playground/                   # Testing playground
+├── USAGE.md                     # Usage documentation
+└── ARCHITECTURE.md              # Architecture documentation
+```

package/dist/module.cjs

@@ -0,0 +1,75 @@
+'use strict';
+
+const kit = require('@nuxt/kit');
+
+var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
+function generateCustomColorCSS(colors) {
+  if (!colors) return "";
+  const cssVars = [];
+  if (colors.primary) {
+    Object.entries(colors.primary).forEach(([shade, value]) => {
+      cssVars.push(`  --primary-${shade}: ${value};`);
+    });
+  }
+  if (colors.neutral) {
+    Object.entries(colors.neutral).forEach(([shade, value]) => {
+      cssVars.push(`  --neutral-${shade}: ${value};`);
+    });
+  }
+  if (cssVars.length === 0) return "";
+  return `:root {
+${cssVars.join("\n")}
+}`;
+}
+const module$1 = kit.defineNuxtModule({
+  meta: {
+    name: "urkit",
+    configKey: "urkit",
+    compatibility: {
+      nuxt: ">=4.0.0"
+    }
+  },
+  defaults: {
+    iconPath: "/assets/icons",
+    iconNamespaces: {
+      icons: "/assets/icons",
+      logos: "/assets/logos"
+    },
+    prefix: "Ur"
+  },
+  async setup(options, nuxt) {
+    const resolver = kit.createResolver((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('module.cjs', document.baseURI).href)));
+    nuxt.options.css.push(resolver.resolve("./runtime/assets/css/colors.css"));
+    nuxt.options.css.push(resolver.resolve("./runtime/assets/css/buttons.css"));
+    nuxt.options.css.push(resolver.resolve("./runtime/assets/css/form-fields.css"));
+    nuxt.options.css.push(resolver.resolve("./runtime/assets/css/global.css"));
+    if (options.colors) {
+      const customColors = generateCustomColorCSS(options.colors);
+      if (customColors) {
+        const customColorsFile = kit.addTemplate({
+          filename: "urkit-custom-colors.css",
+          getContents: () => customColors,
+          write: true
+        });
+        nuxt.options.css.push(customColorsFile.dst);
+      }
+    }
+    nuxt.options.nitro = nuxt.options.nitro || {};
+    nuxt.options.nitro.publicAssets = nuxt.options.nitro.publicAssets || [];
+    nuxt.options.nitro.publicAssets.push({
+      dir: resolver.resolve("./runtime/public"),
+      maxAge: 60 * 60 * 24 * 365
+      // 1 year cache for icons
+    });
+    nuxt.options.runtimeConfig.public.urkit = {
+      iconNamespaces: options.iconNamespaces
+    };
+    await kit.addComponentsDir({
+      path: resolver.resolve("./runtime/components"),
+      prefix: options.prefix,
+      pathPrefix: false
+    });
+  }
+});
+
+module.exports = module$1;

package/dist/module.d.cts

@@ -0,0 +1,46 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+interface ModuleOptions {
+    /**
+     * Custom icon base path
+     * @default '/assets/icons'
+     */
+    iconPath?: string;
+    /**
+     * Custom icon namespaces and their paths
+     * @example { icons: '/custom/icons', logos: '/custom/logos' }
+     */
+    iconNamespaces?: Record<string, string>;
+    /**
+     * Component prefix
+     * @default 'Ur'
+     */
+    prefix?: string;
+    /**
+     * Custom color overrides
+     * Override default purple theme with your brand colors
+     * @example
+     * {
+     *   primary: {
+     *     50: '#f0f9ff',
+     *     100: '#e0f2fe',
+     *     500: '#0ea5e9',
+     *     600: '#0284c7',
+     *     700: '#0369a1'
+     *   },
+     *   neutral: {
+     *     1: '#fafafa',
+     *     5: '#737373',
+     *     12: '#171717'
+     *   }
+     * }
+     */
+    colors?: {
+        primary?: Partial<Record<50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900, string>>;
+        neutral?: Partial<Record<1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12, string>>;
+    };
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+export = _default;
+export type { ModuleOptions };

package/dist/module.d.mts

@@ -0,0 +1,46 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+interface ModuleOptions {
+    /**
+     * Custom icon base path
+     * @default '/assets/icons'
+     */
+    iconPath?: string;
+    /**
+     * Custom icon namespaces and their paths
+     * @example { icons: '/custom/icons', logos: '/custom/logos' }
+     */
+    iconNamespaces?: Record<string, string>;
+    /**
+     * Component prefix
+     * @default 'Ur'
+     */
+    prefix?: string;
+    /**
+     * Custom color overrides
+     * Override default purple theme with your brand colors
+     * @example
+     * {
+     *   primary: {
+     *     50: '#f0f9ff',
+     *     100: '#e0f2fe',
+     *     500: '#0ea5e9',
+     *     600: '#0284c7',
+     *     700: '#0369a1'
+     *   },
+     *   neutral: {
+     *     1: '#fafafa',
+     *     5: '#737373',
+     *     12: '#171717'
+     *   }
+     * }
+     */
+    colors?: {
+        primary?: Partial<Record<50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900, string>>;
+        neutral?: Partial<Record<1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12, string>>;
+    };
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+export { _default as default };
+export type { ModuleOptions };

package/dist/module.d.ts

@@ -0,0 +1,46 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+interface ModuleOptions {
+    /**
+     * Custom icon base path
+     * @default '/assets/icons'
+     */
+    iconPath?: string;
+    /**
+     * Custom icon namespaces and their paths
+     * @example { icons: '/custom/icons', logos: '/custom/logos' }
+     */
+    iconNamespaces?: Record<string, string>;
+    /**
+     * Component prefix
+     * @default 'Ur'
+     */
+    prefix?: string;
+    /**
+     * Custom color overrides
+     * Override default purple theme with your brand colors
+     * @example
+     * {
+     *   primary: {
+     *     50: '#f0f9ff',
+     *     100: '#e0f2fe',
+     *     500: '#0ea5e9',
+     *     600: '#0284c7',
+     *     700: '#0369a1'
+     *   },
+     *   neutral: {
+     *     1: '#fafafa',
+     *     5: '#737373',
+     *     12: '#171717'
+     *   }
+     * }
+     */
+    colors?: {
+        primary?: Partial<Record<50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900, string>>;
+        neutral?: Partial<Record<1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12, string>>;
+    };
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+export = _default;
+export type { ModuleOptions };

package/dist/module.json

@@ -0,0 +1,12 @@
+{
+  "name": "urkit",
+  "configKey": "urkit",
+  "compatibility": {
+    "nuxt": ">=4.0.0"
+  },
+  "version": "0.1.5",
+  "builder": {
+    "@nuxt/module-builder": "1.0.2",
+    "unbuild": "3.6.1"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,72 @@
+import { defineNuxtModule, createResolver, addTemplate, addComponentsDir } from '@nuxt/kit';
+
+function generateCustomColorCSS(colors) {
+  if (!colors) return "";
+  const cssVars = [];
+  if (colors.primary) {
+    Object.entries(colors.primary).forEach(([shade, value]) => {
+      cssVars.push(`  --primary-${shade}: ${value};`);
+    });
+  }
+  if (colors.neutral) {
+    Object.entries(colors.neutral).forEach(([shade, value]) => {
+      cssVars.push(`  --neutral-${shade}: ${value};`);
+    });
+  }
+  if (cssVars.length === 0) return "";
+  return `:root {
+${cssVars.join("\n")}
+}`;
+}
+const module$1 = defineNuxtModule({
+  meta: {
+    name: "urkit",
+    configKey: "urkit",
+    compatibility: {
+      nuxt: ">=4.0.0"
+    }
+  },
+  defaults: {
+    iconPath: "/assets/icons",
+    iconNamespaces: {
+      icons: "/assets/icons",
+      logos: "/assets/logos"
+    },
+    prefix: "Ur"
+  },
+  async setup(options, nuxt) {
+    const resolver = createResolver(import.meta.url);
+    nuxt.options.css.push(resolver.resolve("./runtime/assets/css/colors.css"));
+    nuxt.options.css.push(resolver.resolve("./runtime/assets/css/buttons.css"));
+    nuxt.options.css.push(resolver.resolve("./runtime/assets/css/form-fields.css"));
+    nuxt.options.css.push(resolver.resolve("./runtime/assets/css/global.css"));
+    if (options.colors) {
+      const customColors = generateCustomColorCSS(options.colors);
+      if (customColors) {
+        const customColorsFile = addTemplate({
+          filename: "urkit-custom-colors.css",
+          getContents: () => customColors,
+          write: true
+        });
+        nuxt.options.css.push(customColorsFile.dst);
+      }
+    }
+    nuxt.options.nitro = nuxt.options.nitro || {};
+    nuxt.options.nitro.publicAssets = nuxt.options.nitro.publicAssets || [];
+    nuxt.options.nitro.publicAssets.push({
+      dir: resolver.resolve("./runtime/public"),
+      maxAge: 60 * 60 * 24 * 365
+      // 1 year cache for icons
+    });
+    nuxt.options.runtimeConfig.public.urkit = {
+      iconNamespaces: options.iconNamespaces
+    };
+    await addComponentsDir({
+      path: resolver.resolve("./runtime/components"),
+      prefix: options.prefix,
+      pathPrefix: false
+    });
+  }
+});
+
+export { module$1 as default };

package/dist/runtime/assets/css/buttons.css

@@ -0,0 +1 @@
+.btn{align-items:center;border:transparent;border-radius:var(--border-radius-2);color:var(--white);cursor:pointer;display:inline-flex;font-family:inherit;font-size:14px;font-weight:500;gap:10px;height:44px;justify-content:center;padding:0 16px;transition:all .3s ease-out}.btn .label{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.btn:active{box-shadow:none!important;transform:scale(.97);transition:all .3s ease-out}.btn:disabled{background-color:var(--neutral-9);color:var(--neutral-6);cursor:not-allowed;pointer-events:none}.btn--loading{box-shadow:none}.btn--primary{background-color:var(--primary-600);box-shadow:0 0 0 0 var(--primary-500)}.btn--loading.btn--primary,.btn--primary:hover{background-color:var(--primary-700);box-shadow:0 3px 0 0 var(--primary-900)}.btn--outline{background-color:transparent;border:1.5px solid var(--primary-800)}.btn--loading.btn--outline,.btn--outline:hover{background-color:var(--neutral-11);box-shadow:0 3px 0 0 var(--primary-900)}.btn--white{background-color:var(--white);box-shadow:0 0 0 0 var(--neutral-3);color:var(--neutral-12)}.btn--loading.btn--white,.btn--white:hover{box-shadow:0 3px 0 0 var(--neutral-5)}.btn--danger{background-color:var(--btn-danger-bg)}.btn--danger:hover,.btn--loading.btn--danger{background-color:var(--btn-danger-bg-hover);box-shadow:0 3px 0 0 var(--btn-danger-bg-hover-shadow)}.btn--success{background-color:var(--btn-success-bg)}.btn--loading.btn--success,.btn--success:hover{background-color:var(--btn-success-bg-hover);box-shadow:0 3px 0 0 var(--btn-success-bg-hover-shadow)}.btn--sm{height:32px;padding:0 16px}.btn--md{height:36px;padding:0 16px}.btn--lg{height:40px;padding:0 16px}.btn--xlg{height:44px;padding:0 16px}.btn--rounded{border-radius:9999px}.btn--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.btn--loading{cursor:not-allowed;pointer-events:none}.btn--disabled{opacity:.5;pointer-events:none}.btn__spinner{margin-right:8px}.btn__icon{display:flex}.btn__icon--right{margin-left:8px;margin-right:0}

package/dist/runtime/assets/css/colors.css

@@ -0,0 +1 @@
+:root{--white:#fff;--black:#000;--primary-50:#f2f0ff;--primary-100:#d6d2ff;--primary-200:#c2bcff;--primary-300:#a79dff;--primary-400:#958aff;--primary-500:#7b6dff;--primary-600:#7063e8;--primary-700:#574db5;--primary-800:#443c8c;--primary-900:#342e6b;--neutral-1:#fdfdfd;--neutral-2:#f6f6f7;--neutral-3:#f1f1f2;--neutral-4:#dddcdf;--neutral-5:#c6c5ca;--neutral-6:#9897a0;--neutral-7:#6a6876;--neutral-8:#575665;--neutral-9:#3c3a4c;--neutral-10:#353345;--neutral-11:#2b2a3d;--neutral-12:#19172c;--success-light:#b8f2d8;--success:#2ebd85;--success-dark:#13703f;--success-contrast:#004f0d;--error-light:#ffc7c7;--error:#f6465d;--error-dark:#841927;--error-contrast:#5a101a;--info-light:#cce6ff;--info:#1994ff;--info-dark:#0f5999;--info-contrast:#072f52;--warning-light:#ffe7b3;--warning:#ffa913;--warning-dark:#99640b;--warning-contrast:#664207;--accent-light:#e0cfff;--accent:#7b6dff;--accent-dark:#574db5;--accent-contrast:#342e6b;--req-green:#21c16b;--alert-error-bg:#fb3748;--alert-error-light:#ffc1c5;--alert-error-lighter:#ffebec;--alert-error-border:#f87171;--alert-warning-bg:#fa731a;--alert-warning-light:#ffd9c0;--alert-warning-lighter:#fff3eb;--alert-warning-border:#fbbf24;--alert-success-bg:#21c16b;--alert-success-light:#c1f5da;--alert-success-lighter:#e0faec;--alert-success-border:#34d399;--alert-info-bg:#335cff;--alert-info-light:#c0d5ff;--alert-info-lighter:#ebf1ff;--alert-info-border:#60a5fa;--alert-feature-bg:#7b7b7b;--alert-feature-light:#ebebeb;--alert-feature-lighter:#f5f5f5;--alert-feature-border:#9ca3af}

package/dist/runtime/assets/css/form-fields.css

@@ -0,0 +1 @@
+.field-wrapper{display:flex;flex-direction:column;gap:8px}.field-label{color:var(--neutral-10);font-size:14px;font-weight:500;line-height:14px;margin:0;width:100%}.field-wrapper.is-disabled .field-label{color:var(--neutral-6)}.field-container{align-items:center;background:var(--white);border:none;box-shadow:0 0 0 1px var(--neutral-4),0 0 #0000,0 0 #0000,0 1px 2px 0 #0a0d1408;display:flex;outline:none;position:relative;transition:all .2s ease;width:100%}.field-container--textarea{align-items:stretch;flex-direction:column}.field-container--sm{height:32px}.field-container--md{height:35px}.field-container--lg{height:40px}.field-container--textarea.field-container--sm{height:auto;min-height:80px}.field-container--textarea.field-container--md{height:auto;min-height:90px}.field-container--textarea.field-container--lg{height:auto;min-height:100px}.field-container--focused{box-shadow:0 0 0 1.5px var(--primary-500),0 0 0 3.5px var(--white),0 0 0 5px var(--primary-50)}.field-container--focused .field-input::-moz-placeholder,.field-container--focused .field-textarea::-moz-placeholder{color:var(--neutral-12);-moz-transition:color .3s ease-out;transition:color .3s ease-out}.field-container--focused .field-input::placeholder,.field-container--focused .field-textarea::placeholder{color:var(--neutral-12);transition:color .3s ease-out}.field-container--error{border-color:var(--error);box-shadow:0 0 0 1.5px var(--error),0 0 0 3.5px var(--white),0 0 0 5px rgba(246,70,93,.1)}.field-container--disabled{background:var(--neutral-2);border-color:var(--neutral-3)}.field-container:hover:not(.field-container--disabled):not(.field-container--focused):not(.field-container--error){background:var(--neutral-2);box-shadow:0 0 0 1px var(--neutral-2)}.field-container:hover:not(.field-container--disabled):not(.field-container--error) .field-input::-moz-placeholder,.field-container:hover:not(.field-container--disabled):not(.field-container--error) .field-textarea::-moz-placeholder{color:var(--neutral-8);-moz-transition:color .3s ease-out;transition:color .3s ease-out}.field-container:hover:not(.field-container--disabled):not(.field-container--error) .field-input::placeholder,.field-container:hover:not(.field-container--disabled):not(.field-container--error) .field-textarea::placeholder{color:var(--neutral-8);transition:color .3s ease-out}.field-input,.field-textarea{background:transparent;border:none;box-sizing:border-box;color:var(--neutral-12);font-family:inherit;font-size:14px;font-weight:400;line-height:1.4;outline:none}.field-input{flex:1;height:100%;padding:0 12px}.field-textarea{flex:1;padding:12px;width:100%}.field-input::-moz-placeholder,.field-textarea::-moz-placeholder{color:var(--neutral-6);font-size:13px}.field-input::placeholder,.field-textarea::placeholder{color:var(--neutral-6);font-size:13px}.field-input:disabled,.field-textarea:disabled{color:var(--neutral-6);cursor:default}.field-input--with-inline-left-affix{padding-left:8px}.field-input--with-inline-right-affix{padding-right:8px}.field-container--with-left-icon .field-input{padding-left:40px}.field-container--with-right-icon .field-input{padding-right:36px}.field-textarea--resizable{display:block;flex:none;max-height:none;min-height:60px;overflow-y:auto;resize:vertical}.field-textarea--non-resizable{flex:1;resize:none}.field-icon--left{left:12px;position:absolute;top:50%;transform:translateY(-50%)}.field-icon{align-items:center;color:var(--neutral-6);display:flex;justify-content:center;transition:color .2s ease}.field-icon--right{position:absolute;right:12px;top:50%;transform:translateY(-50%)}.field-container--error .field-icon{color:var(--error)}.field-container--disabled .field-icon{color:var(--neutral-5)}.password-toggle{cursor:pointer;transition:color .2s ease}.password-toggle:hover{color:var(--neutral-8)}.password-toggle path{stroke:var(--neutral-6)}.field-affix{align-items:center;background:var(--white);color:var(--neutral-6);display:flex;font-size:14px;font-weight:450;height:100%;padding:0 12px;white-space:nowrap}.field-affix--left{border-right:1px solid var(--neutral-3)}.field-affix--right{border-left:1px solid var(--neutral-3)}.field-inline-affix{align-items:center;color:var(--neutral-6);display:flex;font-size:14px;font-weight:450;height:100%;padding:0 12px;white-space:nowrap}.field-inline-affix--left{padding-right:0}.field-inline-affix--right{padding-left:0}.field-button{flex-shrink:0;margin-left:8px;margin-right:4px}.field-select-container{background:var(--white);border-left:1px solid var(--neutral-3);height:100%;position:relative}.field-select-trigger{background:transparent;border:none;color:var(--neutral-12);cursor:pointer;font-size:14px;height:100%;min-width:80px;padding:0 12px;transition:background-color .2s ease}.field-select-trigger,.field-select-value{align-items:center;display:flex;gap:8px}.field-select-chevron{color:var(--neutral-6);transition:transform .2s ease}.field-select-trigger--open .field-select-chevron{transform:rotate(180deg)}.field-select-dropdown{background:var(--white);border-radius:10px;box-shadow:0 2px 4px rgba(41,41,41,.04),0 1px 2px rgba(41,41,41,.04),0 0 0 1px rgba(41,41,41,.04),inset 0 -.5px .5px rgba(41,41,41,.08);left:0;margin-top:4px;min-width:120px;overflow:hidden;padding:4px;position:absolute;right:0;top:104%;z-index:1000}.field-select-option{align-items:center;border-radius:8px;color:var(--neutral-12);cursor:pointer;display:flex;font-size:14px;gap:8px;padding:8px 12px;transition:background-color .2s ease}.field-select-option:hover{background:var(--neutral-1)}.field-select-option--selected{background:var(--primary-50);color:var(--primary-600)}.field-select-option--selected .select-option-icon{color:var(--primary-500)}.select-option-flag{border-radius:2px;height:16px;-o-object-fit:cover;object-fit:cover;width:16px}.select-option-icon{color:var(--neutral-6)}.field-select-value .select-option-icon{color:var(--primary-500)}.select-option-check{color:var(--primary-600)}.field-character-counter{background:var(--white);border-radius:4px;bottom:8px;color:var(--neutral-6);font-size:12px;padding:2px 4px;pointer-events:none;position:absolute;right:12px}.field-container--with-counter .field-textarea{padding-bottom:32px}.counter-over-limit{color:var(--error)!important}.field-hint{color:var(--neutral-6);font-size:13px;line-height:1.4;margin:0}.field-errors{display:flex;flex-direction:column;gap:4px}.field-error{color:var(--error);font-size:13px;line-height:1.4;margin:0}.password-requirements{display:flex;flex-direction:column;gap:8px;margin-top:6px}.password-progress{display:flex;gap:8px;margin-bottom:4px}.progress-bar{border-radius:2px;flex:1;height:4px;transition:background-color .3s ease}.progress-bar,.progress-bar--inactive{background-color:var(--neutral-3)}.progress-bar--weak{background-color:#fb3748}.progress-bar--medium{background-color:#fa731a}.progress-bar--strong{background-color:var(--req-green)}.requirements-title{color:var(--neutral-8);font-size:13px;font-weight:500;line-height:1.4;margin:0}.requirements-list{display:flex;flex-direction:column;gap:6px}.requirement-item{align-items:center;color:var(--neutral-8);display:flex;font-size:13px;font-weight:500;gap:8px;line-height:1.4;transition:color .2s ease}.requirement-item.requirement-met{color:var(--req-green)}.requirement-icon--success{color:var(--req-green)!important}.requirement-icon--error{color:var(--neutral-6)!important}@media screen and (max-width:768px){.field-container--sm{height:40px}.field-container--md{height:44px}.field-container--lg{height:48px}.field-container--textarea.field-container--sm{min-height:90px}.field-container--textarea.field-container--md{min-height:100px}.field-container--textarea.field-container--lg{min-height:110px}.field-input,.field-textarea{font-size:16px}}.field-container--radius-none{border-radius:0}.field-container--radius-none .field-affix--left{border-bottom-left-radius:0;border-top-left-radius:0}.field-container--radius-none .field-affix--right,.field-container--radius-none .field-select-container{border-bottom-right-radius:0;border-top-right-radius:0}.field-container--radius-soft.field-container--md,.field-container--radius-soft.field-container--sm{border-radius:6px}.field-container--radius-soft.field-container--md .field-affix--left,.field-container--radius-soft.field-container--sm .field-affix--left{border-bottom-left-radius:6px;border-top-left-radius:6px}.field-container--radius-soft.field-container--md .field-affix--right,.field-container--radius-soft.field-container--md .field-select-container,.field-container--radius-soft.field-container--sm .field-affix--right,.field-container--radius-soft.field-container--sm .field-select-container{border-bottom-right-radius:6px;border-top-right-radius:6px}.field-container--radius-soft.field-container--lg{border-radius:8px}.field-container--radius-soft.field-container--lg .field-affix--left{border-bottom-left-radius:8px;border-top-left-radius:8px}.field-container--radius-soft.field-container--lg .field-affix--right,.field-container--radius-soft.field-container--lg .field-select-container{border-bottom-right-radius:8px;border-top-right-radius:8px}.field-container--radius-medium.field-container--md,.field-container--radius-medium.field-container--sm{border-radius:8px}.field-container--radius-medium.field-container--md .field-affix--left,.field-container--radius-medium.field-container--sm .field-affix--left{border-bottom-left-radius:8px;border-top-left-radius:8px}.field-container--radius-medium.field-container--md .field-affix--right,.field-container--radius-medium.field-container--md .field-select-container,.field-container--radius-medium.field-container--sm .field-affix--right,.field-container--radius-medium.field-container--sm .field-select-container{border-bottom-right-radius:8px;border-top-right-radius:8px}.field-container--radius-medium.field-container--lg{border-radius:10px}.field-container--radius-medium.field-container--lg .field-affix--left{border-bottom-left-radius:10px;border-top-left-radius:10px}.field-container--radius-medium.field-container--lg .field-affix--right,.field-container--radius-medium.field-container--lg .field-select-container{border-bottom-right-radius:10px;border-top-right-radius:10px}.field-container--radius-pill{border-radius:999px}.field-container--radius-pill .field-affix--left{border-bottom-left-radius:999px;border-top-left-radius:999px}.field-container--radius-pill .field-affix--right,.field-container--radius-pill .field-select-container{border-bottom-right-radius:999px;border-top-right-radius:999px}

package/dist/runtime/assets/css/global.css

@@ -0,0 +1 @@
+@font-face{font-display:swap;font-family:InterFull;font-weight:100 900;src:url(/fonts/Inter-VariableFont_opsz,wght.ttf) format("truetype")}@font-face{font-display:swap;font-family:Instrument;font-style:normal;font-weight:400;src:url(/fonts/Instrument_Serif/InstrumentSerif-Regular.ttf) format("truetype")}@font-face{font-display:swap;font-family:Instrument Italic;font-style:italic;font-weight:400;src:url(/fonts/Instrument_Serif/InstrumentSerif-Italic.ttf) format("truetype")}body{background-color:var(--white);color:var(--white);font-family:InterFull,sans-serif;font-feature-settings:"salt" on,"ss01" on,"ss03" on,"ss07" on,"ss08" on,"tnum" on,"cv01" 1,"cv02" 1,"cv03" 1,"cv04" 1,"cv05" 1,"cv06" 1,"cv08" 1,"cv09" 1,"cv10" 1,"cv12" 1,"cv11" 1,"cv13" 1,"calt" 1,"liga" 1;font-optical-sizing:auto;font-style:normal}body.no-scroll{overflow:hidden!important}*{border-style:solid;border-width:0;box-sizing:border-box}#__nuxt{min-height:inherit}.heading{display:inline-block;font-size:24px;font-weight:600;margin-bottom:32px}.trading-heading{color:var(--white);font-size:14px;font-weight:700}.b-r{border:1px solid red}.b-l{border:1px solid lime}.b-y{border:1px solid #ff0}.b-g{border:1px solid green}.b-b{border:1px solid blue}.section-divider{background:var(--neutral-3);border:none;height:1px;margin:56px 0}.page-enter-active,.page-leave-active{transition:all .4s cubic-bezier(.4,0,.2,1)}.page-enter-from,.page-leave-to{filter:blur(10px);opacity:0}.page-enter-to,.page-leave-from{filter:blur(0);opacity:1}::selection{background-color:var(--neutral-3);text-shadow:none}::-moz-selection{background-color:var(--neutral-3);text-shadow:none}::-webkit-scrollbar{height:6px;width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background-color:transparent;border-radius:6px;-webkit-transition:background-color .3s ease;transition:background-color .3s ease}::-webkit-scrollbar-corner{background:transparent}body:hover::-webkit-scrollbar-thumb{background-color:var(--neutral-4)}body:hover::-webkit-scrollbar-thumb:hover{background-color:var(--neutral-6)}html{scrollbar-color:transparent transparent;scrollbar-width:thin}html:hover{scrollbar-color:var(--neutral-4) transparent}