quill-ui-v2 0.0.1

package/README.md

@@ -0,0 +1,657 @@
+# 🎨 Quill Design System - Figma Token Automation
+
+> Automatically sync design tokens from Figma to code with one command
+
+[![Status](https://img.shields.io/badge/status-active-success.svg)]()
+[![Node](https://img.shields.io/badge/node-%3E%3D18.0.0-blue.svg)]()
+[![Tests](https://img.shields.io/badge/tests-161%20passing-brightgreen.svg)]()
+[![License](https://img.shields.io/badge/license-MIT-blue.svg)]()
+
+A powerful automation tool that bridges the gap between design and development by automatically extracting design tokens from Figma and generating production-ready CSS, TypeScript, and utility classes.
+
+---
+
+## 📋 Table of Contents
+
+- [Quick Start](#-quick-start)
+- [Features](#-features)
+- [Prerequisites](#-prerequisites)
+- [Installation](#-installation)
+- [Usage](#-usage)
+- [For Designers](#-for-designers)
+- [For Developers](#-for-developers)
+- [Common Tasks](#-common-tasks)
+- [Documentation](#-documentation)
+- [Troubleshooting](#-troubleshooting)
+- [Contributing](#-contributing)
+
+---
+
+## 🚀 Quick Start
+
+Get up and running in 5 minutes:
+
+```bash
+# 1. Install dependencies
+npm install
+
+# 2. Set up credentials
+cp .env.example .env
+# Edit .env with your Figma token and file key
+
+# 3. Sync tokens from Figma
+npm run tokens
+
+# 4. Use in your code
+# Import: <link rel="stylesheet" href="./src/tokens/index.css">
+# Use: <p style="color: var(--quill-core-color-blue-500)">Styled text</p>
+```
+
+**New to the project?** Follow the [detailed installation guide](#-installation) below.
+
+---
+
+## ✨ Features
+
+### Core Capabilities
+- ✅ **Automatic Sync** - One command updates all tokens from Figma
+- ✅ **Multi-Collection Support** - Handle multiple token collections (primitives, semantic, etc.)
+- ✅ **Multi-File Output** - Organized CSS files by collection
+- ✅ **TypeScript Support** - Type-safe tokens with autocomplete
+- ✅ **Token Validation** - Automatic error detection and warnings
+- ✅ **Version Tracking** - Semantic versioning for changes
+- ✅ **Figma Styles** - Import text, color, and effect styles
+- ✅ **Theme Support** - Light/dark mode with system preference detection
+- ✅ **Watch Mode** - Continuous monitoring for design changes
+- ✅ **Dry Run** - Preview changes before applying
+- ✅ **CI/CD Ready** - Automated token syncing in pipelines
+
+### Generated Outputs
+
+| File | Purpose | Auto-Generated |
+|------|---------|----------------|
+| [`index.css`](src/tokens/index.css) | Main import file for all tokens | ✅ |
+| [`primitives.css`](src/tokens/primitives.css) | Base design tokens (colors, sizes) | ✅ |
+| [`semantic.css`](src/tokens/semantic.css) | Semantic tokens (spacing, radius) | ✅ |
+| [`figma-styles.css`](src/tokens/figma-styles.css) | Figma style tokens | ✅ |
+| [`tokens.d.ts`](src/tokens/tokens.d.ts) | TypeScript definitions | ✅ |
+| [`tokens.js`](src/tokens/tokens.js) | JavaScript module | ✅ |
+| `version.json` | Version metadata | ✅ |
+
+---
+
+## 🔧 Prerequisites
+
+Before you begin, ensure you have:
+
+### Required
+- **Node.js** >= 18.0.0 ([Download](https://nodejs.org/))
+- **npm** >= 9.0.0 (comes with Node.js)
+- **Figma account** with access to your design file
+- **Figma Personal Access Token** ([Get one here](https://www.figma.com/settings))
+
+### System Requirements
+
+| Platform | Supported | Tested |
+|----------|-----------|--------|
+| macOS    | ✅ Yes    | ✅     |
+| Windows  | ✅ Yes    | ✅     |
+| Linux    | ✅ Yes    | ✅     |
+
+---
+
+## 📦 Installation
+
+### Step 1: Install Dependencies
+
+```bash
+npm install
+```
+
+This installs:
+- `dotenv` (^17.2.3) - Environment variable management
+
+### Step 2: Configure Figma Access
+
+#### 2.1 Get Your Figma Personal Access Token
+
+1. Go to [Figma Settings](https://www.figma.com/settings)
+2. Navigate to **Account** → **Personal Access Tokens**
+3. Click **Generate new token**
+4. Give it a name (e.g., "Token Automation")
+5. Copy the token (starts with `figd_`)
+
+#### 2.2 Get Your Figma File Key
+
+1. Open your Figma file in the browser
+2. Copy the file key from the URL:
+   ```
+   https://www.figma.com/design/FILE_KEY_HERE/...
+                              ^^^^^^^^^^^^
+   ```
+
+#### 2.3 Create Environment File
+
+```bash
+# Copy the example file
+cp .env.example .env
+
+# Edit with your credentials
+nano .env
+```
+
+Add your credentials:
+```env
+# Your Figma Personal Access Token
+FIGMA_ACCESS_TOKEN=figd_your_token_here
+
+# Your Figma File Key
+FIGMA_FILE_KEY=your_file_key_here
+```
+
+### Step 3: Verify Setup
+
+```bash
+# Test the connection
+npm run tokens
+```
+
+Expected output:
+```
+🚀 Starting Figma token extraction...
+📡 Fetching from Figma REST API...
+✅ Fetched 497 variables from 2 collection(s)
+   📁 Collection: "primitives"
+      Modes: default
+   📁 Collection: "semantic"
+      Modes: default
+✨ Done!
+```
+
+---
+
+## 💻 Usage
+
+### Command Line
+
+```bash
+# Fetch from Figma and generate all files
+npm run tokens
+
+# Use cached data (skip API call)
+npm run tokens:cached
+
+# Preview changes without writing files
+npm run tokens:dry-run
+
+# Watch for changes continuously
+npm run tokens:watch
+
+# CI/CD mode with strict validation
+npm run tokens:ci
+```
+
+### In HTML
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <!-- Import all tokens -->
+  <link rel="stylesheet" href="./src/tokens/index.css">
+</head>
+<body>
+  <!-- Use CSS variables -->
+  <div style="color: var(--quill-core-color-blue-500)">
+    Custom styled element
+  </div>
+</body>
+</html>
+```
+
+### In CSS
+
+```css
+/* Import tokens */
+@import './src/tokens/index.css';
+
+/* Use in your styles */
+.my-button {
+  background: var(--quill-core-color-blue-500);
+  padding: var(--quill-core-spacing-md);
+  border-radius: var(--quill-core-radius-lg);
+}
+```
+
+### In JavaScript/TypeScript
+
+```typescript
+import { tokens } from './src/tokens/tokens.js';
+import type { TokenName, TokenValue } from './src/tokens/tokens';
+
+// Type-safe token access with autocomplete!
+const primaryColor: string = tokens['--quill-core-color-blue-500'];
+const spacing: string = tokens['--quill-core-spacing-md'];
+
+// Use in dynamic styles
+element.style.setProperty('background-color', primaryColor);
+element.style.setProperty('padding', spacing);
+```
+
+### In React
+
+```tsx
+import './src/tokens/index.css';
+import { tokens } from './src/tokens/tokens';
+
+function Button({ children }: { children: React.ReactNode }) {
+  return (
+    <button
+      style={{
+        backgroundColor: tokens['--quill-core-color-blue-500'],
+        padding: tokens['--quill-core-spacing-md'],
+        borderRadius: tokens['--quill-core-radius-lg'],
+      }}
+    >
+      {children}
+    </button>
+  );
+}
+```
+
+---
+
+## 🎨 For Designers
+
+### Setting Up Figma Variables
+
+1. **Create Collections** in Figma's Variables panel
+   - Primitives: Base colors, sizes, typography
+   - Semantic: Contextual tokens (spacing, radius, etc.)
+
+2. **Name Variables** using forward slashes for grouping:
+   ```
+   colour/blue/500
+   size/spacing/md
+   typography/heading/large
+   ```
+
+3. **Use Modes** for themes (optional):
+   - Light mode
+   - Dark mode
+   - High contrast variants
+
+### Best Practices
+
+✅ **DO:**
+- Use consistent naming conventions
+- Group related tokens together
+- Document token purposes in descriptions
+- Test tokens in Dev Mode before syncing
+
+❌ **DON'T:**
+- Use spaces or special characters in names
+- Create circular references
+- Delete tokens without coordinating with developers
+- Mix different token types in one collection
+
+### Testing Your Changes
+
+Before asking developers to sync:
+
+1. **Preview in Dev Mode** - Check CSS variable names
+2. **Test References** - Ensure all aliases resolve correctly
+3. **Verify Modes** - Test light/dark theme switching
+4. **Document Changes** - Note any breaking changes
+
+### Syncing Code Syntax to Figma
+
+After developers generate tokens, update Figma with CSS syntax:
+
+1. Open your Figma file
+2. Open the plugin console: `Option + Command + I` (Mac) or `Ctrl + Alt + I` (Windows)
+3. Copy contents of [`scripts/tokens/tokenVariableSyntaxAndDescriptionSnippet.js`](scripts/tokens/tokenVariableSyntaxAndDescriptionSnippet.js)
+4. Paste into console and press Enter
+5. Wait for "DONE!" message
+
+This allows you to see CSS variable names in Figma's Dev Mode.
+
+---
+
+## 👨‍💻 For Developers
+
+### Workflow
+
+1. **Sync tokens** when designers notify you of changes:
+   ```bash
+   npm run tokens
+   ```
+
+2. **Review changes** before committing:
+   ```bash
+   git diff src/tokens/
+   ```
+
+3. **Test** in your application
+
+4. **Commit** changes:
+   ```bash
+   git add src/tokens/
+   git commit -m "chore: sync design tokens from Figma"
+   git push
+   ```
+
+### Integration Examples
+
+#### Tailwind CSS
+
+```javascript
+// tailwind.config.js
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        primary: 'var(--quill-core-color-blue-500)',
+        secondary: 'var(--quill-core-color-gray-500)',
+      },
+      spacing: {
+        'xs': 'var(--quill-core-spacing-xs)',
+        'sm': 'var(--quill-core-spacing-sm)',
+        'md': 'var(--quill-core-spacing-md)',
+      }
+    }
+  }
+}
+```
+
+#### Styled Components
+
+```typescript
+import styled from 'styled-components';
+import { tokens } from './src/tokens/tokens';
+
+const Button = styled.button`
+  background: ${tokens['--quill-core-color-blue-500']};
+  padding: ${tokens['--quill-core-spacing-md']};
+  border-radius: ${tokens['--quill-core-radius-lg']};
+`;
+```
+
+#### CSS Modules
+
+```css
+/* Button.module.css */
+.button {
+  background: var(--quill-core-color-blue-500);
+  padding: var(--quill-core-spacing-md);
+  border-radius: var(--quill-core-radius-lg);
+}
+```
+
+### Version Control
+
+**What to commit:**
+- ✅ All files in `src/tokens/`
+- ✅ `scripts/tokens/version.json` (optional)
+
+**What to ignore:**
+- ❌ `scripts/tokens/tokens.json` (raw data, can be regenerated)
+- ❌ `.env` (contains secrets)
+
+---
+
+## 📝 Common Tasks
+
+### Preview Changes Before Applying
+
+```bash
+# Dry run shows what would change without writing files
+npm run tokens:dry-run
+```
+
+Output:
+```
+🔍 Dry Run - Preview of Changes:
+════════════════════════════════════════════════════════════
+⚠️  DRY RUN MODE - No files will be written
+════════════════════════════════════════════════════════════
+
+✨ Created (1):
+   ./src/tokens/figma-styles.css (1.8 KB)
+
+✏️  Modified (2):
+   ./src/tokens/primitives.css
+      22.7 KB → 22.5 KB (-188 B)
+   ./src/tokens/tokens.d.ts
+      53.2 KB → 53.8 KB (+648 B)
+
+════════════════════════════════════════════════════════════
+Total: 3 file(s) processed
+📋 3 file(s) would be updated
+```
+
+### Watch for Changes During Development
+
+```bash
+# Continuously monitor Figma for changes
+npm run tokens:watch
+```
+
+The script will:
+- Poll Figma every 30 seconds (configurable)
+- Detect when tokens change
+- Prompt you to regenerate
+- Continue watching after updates
+
+### Use Cached Data for Faster Iteration
+
+```bash
+# Skip API call, use existing tokens.json
+npm run tokens:cached
+```
+
+Useful when:
+- Testing configuration changes
+- Iterating on output formats
+- Working offline
+
+### Automate in CI/CD
+
+```bash
+# CI mode with strict validation
+npm run tokens:ci
+```
+
+Features:
+- Exits with proper error codes
+- Shows detailed error messages
+- Prevents interactive prompts
+- Validates tokens strictly
+
+See [CONFIGURATION.md](CONFIGURATION.md#cicd-integration) for complete CI/CD setup.
+
+---
+
+## 📚 Documentation
+
+| Document | Purpose | Audience |
+|----------|---------|----------|
+| **[README.md](README.md)** (this file) | Quick start and overview | Everyone |
+| **[CONFIGURATION.md](CONFIGURATION.md)** | Complete configuration guide | Developers |
+| **[API-REFERENCE.md](API-REFERENCE.md)** | Technical API documentation | Advanced developers |
+
+### Quick Links
+
+- **Configuration:** [Environment Variables](CONFIGURATION.md#environment-variables) • [Config Class](CONFIGURATION.md#config-class) • [Collections](CONFIGURATION.md#collection-configuration)
+- **Advanced:** [CI/CD Setup](CONFIGURATION.md#cicd-integration) • [Watch Mode](CONFIGURATION.md#watch-mode) • [Batch API](CONFIGURATION.md#performance-optimization)
+- **API:** [Architecture](API-REFERENCE.md#architecture) • [Modules](API-REFERENCE.md#modules) • [Extending](API-REFERENCE.md#extending-the-system)
+
+---
+
+## 🆘 Troubleshooting
+
+### "FIGMA_ACCESS_TOKEN is not defined"
+
+**Problem:** Environment variables not loaded
+
+**Solution:**
+```bash
+# 1. Verify .env file exists
+ls -la .env
+
+# 2. Check file contents
+cat .env
+
+# 3. Ensure proper format (no quotes needed)
+FIGMA_ACCESS_TOKEN=figd_your_token_here
+FIGMA_FILE_KEY=your_file_key_here
+
+# 4. Restart your terminal/IDE
+```
+
+### "Collection not found in tokens.json"
+
+**Problem:** Collection name mismatch between Figma and configuration
+
+**Solution:**
+1. Check your Figma collection names
+2. Names are normalized: `"My Colors"` → `my_colors`
+3. Update `COLLECTION_DATA` in configuration
+4. Run without `--skip-rest-api` to fetch fresh data:
+   ```bash
+   npm run tokens
+   ```
+
+### "Failed to fetch from Figma API"
+
+**Problem:** API connection or authentication issues
+
+**Solution:**
+```bash
+# 1. Verify token is valid
+curl -H "X-Figma-Token: YOUR_TOKEN" \
+  https://api.figma.com/v1/files/YOUR_FILE_KEY/variables/local
+
+# 2. Check token permissions
+# Token must have "File content" read access
+
+# 3. Verify file key is correct
+# Should be from URL: figma.com/design/FILE_KEY/...
+
+# 4. Check network connectivity
+ping api.figma.com
+```
+
+### TypeScript Errors with Token Imports
+
+**Problem:** TypeScript can't find token definitions
+
+**Solution:**
+```typescript
+// 1. Ensure tokens.d.ts is generated
+// Check: src/tokens/tokens.d.ts exists
+
+// 2. Add to tsconfig.json
+{
+  "compilerOptions": {
+    "types": ["./src/tokens/tokens"]
+  }
+}
+
+// 3. Import correctly
+import type { TokenName } from './src/tokens/tokens';
+import { tokens } from './src/tokens/tokens';
+```
+
+### More Help
+
+- Check [CONFIGURATION.md](CONFIGURATION.md#troubleshooting) for configuration issues
+- See [API-REFERENCE.md](API-REFERENCE.md#troubleshooting) for technical problems
+- Review existing [GitHub Issues](https://github.com/your-repo/issues)
+
+---
+
+## 🤝 Contributing
+
+### Reporting Issues
+
+When reporting issues, please include:
+
+- **Environment**: OS, Node.js version
+- **Steps to reproduce**: Exact commands run
+- **Expected behavior**: What should happen
+- **Actual behavior**: What actually happened
+- **Error messages**: Full error output
+- **Screenshots**: If applicable
+
+### Adding Features
+
+1. **Create feature branch**
+   ```bash
+   git checkout -b feature/your-feature-name
+   ```
+
+2. **Make changes**
+   - Update relevant files
+   - Add tests for new functionality
+   - Update documentation
+
+3. **Test thoroughly**
+   ```bash
+   npm test
+   npm run tokens
+   ```
+
+4. **Submit PR**
+   - Provide clear description
+   - Include before/after examples
+   - Link related issues
+
+### Code Style
+
+- Use ES modules (`import`/`export`)
+- Add JSDoc comments for functions
+- Follow existing naming conventions
+- Keep functions focused and small
+- Add console logging for user feedback
+
+---
+
+## 📊 Project Stats
+
+- **497** Figma variables imported
+- **508** total tokens generated
+- **2** collections (primitives, semantic)
+- **161** tests passing (100% pass rate)
+- **6** core features enabled
+
+---
+
+## 📝 License
+
+MIT License - see LICENSE file for details
+
+---
+
+## 🙏 Acknowledgments
+
+- Built with [Figma Variables API](https://www.figma.com/developers/api#variables)
+- Follows [W3C Design Tokens Format](https://design-tokens.github.io/community-group/format/)
+- Inspired by design system best practices
+
+---
+
+## 📞 Support
+
+- **Quick questions**: Check [Troubleshooting](#-troubleshooting) section
+- **Setup help**: See [Installation](#-installation) guide
+- **Configuration**: Read [CONFIGURATION.md](CONFIGURATION.md)
+- **Technical details**: Review [API-REFERENCE.md](API-REFERENCE.md)
+- **Issues**: Use GitHub Issues (if applicable)
+
+---
+
+**Ready to sync your design system? Let's go! 🚀**
+
+```bash
+npm run tokens

package/dist/index.d.ts

@@ -0,0 +1,34 @@
+import { default as default_2 } from 'react';
+
+export declare const ButtonBrand: default_2.FC<ButtonBrandProps>;
+
+export declare interface ButtonBrandProps {
+    /** Button label text */
+    label?: string;
+    /** Button size variant */
+    size?: 'lg' | 'md' | 'sm';
+    /** Disabled state */
+    disabled?: boolean;
+    /** Click handler */
+    onClick?: (event: default_2.MouseEvent<HTMLButtonElement>) => void;
+    /** Button type for forms */
+    type?: 'button' | 'submit' | 'reset';
+    /** Additional CSS classes */
+    className?: string;
+    /** Children (alternative to label) */
+    children?: default_2.ReactNode;
+}
+
+export declare const InputTextfield: default_2.FC<InputTextfieldProps>;
+
+export declare interface InputTextfieldProps {
+    label?: string;
+    placeholder?: string;
+    value?: string;
+    onChange?: (value: string) => void;
+    disabled?: boolean;
+    className?: string;
+    id?: string;
+}
+
+export { }

package/dist/quill-ui-v2.cjs

@@ -0,0 +1,3 @@
+(function(){"use strict";try{if(typeof document<"u"){var i=document.createElement("style");i.appendChild(document.createTextNode(".quill-theme-semantic_colour-dark{--quill-semantic-background-action-brand-hover: var(--quill-primitive-colour-coral-solid-800);--quill-semantic-background-action-brand-normal: var(--quill-primitive-colour-coral-solid-700);--quill-semantic-background-action-brand-pressed: var(--quill-primitive-colour-coral-solid-900);--quill-semantic-background-action-disabled-inverse: var(--quill-primitive-colour-slate-solid-100);--quill-semantic-background-action-disabled-normal: var(--quill-primitive-colour-slate-solid-1100);--quill-semantic-background-action-disabled-static-dark: var(--quill-primitive-colour-slate-solid-100);--quill-semantic-background-action-disabled-static-light: var(--quill-primitive-colour-slate-solid-1100);--quill-semantic-background-action-secondary-inverse: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-background-action-secondary-normal: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-background-action-secondary-static-dark: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-background-action-secondary-static-light: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-background-action-tertiary-inverse: var(--quill-primitive-colour-slate-solid-200);--quill-semantic-background-action-tertiary-normal: var(--quill-primitive-colour-slate-solid-900);--quill-semantic-background-action-tertiary-static-dark: var(--quill-primitive-colour-slate-solid-200);--quill-semantic-background-action-tertiary-static-light: var(--quill-primitive-colour-slate-solid-900);--quill-semantic-background-canvas-primary: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-background-canvas-secondary: var(--quill-primitive-colour-slate-solid-1100);--quill-semantic-background-feedback-neutral-opacity: var(--quill-primitive-colour-white-opacity-100);--quill-semantic-background-feedback-opacity-error: var(--quill-primitive-colour-red-opacity-300);--quill-semantic-background-feedback-opacity-information: var(--quill-primitive-colour-blue-opacity-300);--quill-semantic-background-feedback-opacity-neutral: var(--quill-primitive-colour-white-opacity-100);--quill-semantic-background-feedback-opacity-opacity: var(--quill-primitive-colour-green-opacity-300);--quill-semantic-background-feedback-opacity-success: var(--quill-primitive-colour-green-opacity-300);--quill-semantic-background-feedback-opacity-warning: var(--quill-primitive-colour-yellow-opacity-300);--quill-semantic-background-feedback-solid-error-inverse: var(--quill-primitive-colour-red-solid-1100);--quill-semantic-background-feedback-solid-error-normal: var(--quill-primitive-colour-red-solid-500);--quill-semantic-background-feedback-solid-error-static-dark: var(--quill-primitive-colour-red-solid-500);--quill-semantic-background-feedback-solid-error-static-light: var(--quill-primitive-colour-red-solid-1100);--quill-semantic-background-feedback-solid-information-inverse: var(--quill-primitive-colour-blue-solid-1100);--quill-semantic-background-feedback-solid-information-normal: var(--quill-primitive-colour-blue-solid-500);--quill-semantic-background-feedback-solid-information-static-dark: var(--quill-primitive-colour-blue-solid-500);--quill-semantic-background-feedback-solid-information-static-light: var(--quill-primitive-colour-blue-solid-1100);--quill-semantic-background-feedback-solid-neutral-inverse: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-background-feedback-solid-neutral-normal: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-background-feedback-solid-neutral-static-dark: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-background-feedback-solid-neutral-static-light: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-background-feedback-solid-success-inverse: var(--quill-primitive-colour-green-solid-1100);--quill-semantic-background-feedback-solid-success-normal: var(--quill-primitive-colour-green-solid-500);--quill-semantic-background-feedback-solid-success-static-dark: var(--quill-primitive-colour-green-solid-500);--quill-semantic-background-feedback-solid-success-static-light: var(--quill-primitive-colour-green-solid-1100);--quill-semantic-background-feedback-solid-warning-inverse: var(--quill-primitive-colour-yellow-solid-1100);--quill-semantic-background-feedback-solid-warning-normal: var(--quill-primitive-colour-yellow-solid-500);--quill-semantic-background-feedback-solid-warning-static-dark: var(--quill-primitive-colour-yellow-solid-500);--quill-semantic-background-feedback-solid-warning-static-light: var(--quill-primitive-colour-yellow-solid-1100);--quill-semantic-background-foundation-primary-canvas: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-background-foundation-primary-surface: var(--quill-primitive-colour-slate-solid-1100);--quill-semantic-background-foundation-secondary-canvas: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-background-foundation-secondary-surface: var(--quill-primitive-colour-slate-solid-1100);--quill-semantic-background-state-default-primary: var(--quill-primitive-colour-white-opacity-75);--quill-semantic-background-state-default-secondary: var(--quill-primitive-colour-white-opacity-75);--quill-semantic-background-state-dragged-dragged: var(--quill-primitive-colour-white-opacity-200);--quill-semantic-background-state-hover-hover: var(--quill-primitive-colour-white-opacity-100);--quill-semantic-background-state-pressed-pressed: var(--quill-primitive-colour-white-opacity-200);--quill-semantic-background-state-selected-selected: var(--quill-primitive-colour-white-opacity-100);--quill-semantic-background-surface: var(--quill-primitive-colour-slate-solid-1100);--quill-semantic-border-error-inverse: var(--quill-primitive-colour-red-solid-900);--quill-semantic-border-error-normal: var(--quill-primitive-colour-red-solid-500);--quill-semantic-border-error-static-dark: var(--quill-primitive-colour-red-solid-500);--quill-semantic-border-error-static-light: var(--quill-primitive-colour-red-solid-900);--quill-semantic-border-information-inverse: var(--quill-primitive-colour-blue-solid-900);--quill-semantic-border-information-normal: var(--quill-primitive-colour-blue-solid-500);--quill-semantic-border-information-static-dark: var(--quill-primitive-colour-blue-solid-500);--quill-semantic-border-information-static-light: var(--quill-primitive-colour-blue-solid-900);--quill-semantic-border-normal-primary: var(--quill-primitive-colour-white-opacity-200);--quill-semantic-border-normal-secondary: var(--quill-primitive-colour-white-opacity-100);--quill-semantic-border-prominent-inverse: var(--quill-primitive-colour-slate-opacity-200);--quill-semantic-border-prominent-normal: var(--quill-primitive-colour-white-opacity-200);--quill-semantic-border-prominent-static-dark: var(--quill-primitive-colour-white-opacity-200);--quill-semantic-border-prominent-static-light: var(--quill-primitive-colour-slate-opacity-200);--quill-semantic-border-selected-inverse: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-border-selected-normal: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-border-selected-static-dark: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-border-selected-static-light: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-border-subtle-inverse: var(--quill-primitive-colour-slate-opacity-100);--quill-semantic-border-subtle-normal: var(--quill-primitive-colour-white-opacity-100);--quill-semantic-border-subtle-static-dark: var(--quill-primitive-colour-white-opacity-100);--quill-semantic-border-subtle-static-light: var(--quill-primitive-colour-slate-opacity-100);--quill-semantic-border-success-inverse: var(--quill-primitive-colour-green-solid-900);--quill-semantic-border-success-normal: var(--quill-primitive-colour-green-solid-500);--quill-semantic-border-success-static-dark: var(--quill-primitive-colour-green-solid-500);--quill-semantic-border-success-static-light: var(--quill-primitive-colour-green-solid-900);--quill-semantic-border-warning-inverse: var(--quill-primitive-colour-yellow-solid-900);--quill-semantic-border-warning-normal: var(--quill-primitive-colour-yellow-solid-500);--quill-semantic-border-warning-static-dark: var(--quill-primitive-colour-yellow-solid-500);--quill-semantic-border-warning-static-light: var(--quill-primitive-colour-yellow-solid-900);--quill-semantic-text-disabled-inverse: var(--quill-primitive-colour-slate-opacity-200);--quill-semantic-text-disabled-normal: var(--quill-primitive-colour-white-opacity-200);--quill-semantic-text-disabled-static-dark: var(--quill-primitive-colour-white-opacity-200);--quill-semantic-text-disabled-static-light: var(--quill-primitive-colour-slate-opacity-200);--quill-semantic-text-error-inverse: var(--quill-primitive-colour-red-solid-900);--quill-semantic-text-error-normal: var(--quill-primitive-colour-red-solid-500);--quill-semantic-text-error-static-dark: var(--quill-primitive-colour-red-solid-500);--quill-semantic-text-error-static-light: var(--quill-primitive-colour-red-solid-900);--quill-semantic-text-information-inverse: var(--quill-primitive-colour-blue-solid-900);--quill-semantic-text-information-normal: var(--quill-primitive-colour-blue-solid-500);--quill-semantic-text-information-static-dark: var(--quill-primitive-colour-blue-solid-500);--quill-semantic-text-information-static-light: var(--quill-primitive-colour-blue-solid-900);--quill-semantic-text-prominent-inverse: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-text-prominent-normal: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-text-prominent-static-dark: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-text-prominent-static-light: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-text-subtle-inverse: var(--quill-primitive-colour-slate-opacity-400);--quill-semantic-text-subtle-normal: var(--quill-primitive-colour-white-opacity-400);--quill-semantic-text-subtle-static-dark: var(--quill-primitive-colour-white-opacity-400);--quill-semantic-text-subtle-static-light: var(--quill-primitive-colour-slate-opacity-400);--quill-semantic-text-success-inverse: var(--quill-primitive-colour-green-solid-900);--quill-semantic-text-success-normal: var(--quill-primitive-colour-green-solid-500);--quill-semantic-text-success-static-dark: var(--quill-primitive-colour-green-solid-500);--quill-semantic-text-success-static-light: var(--quill-primitive-colour-green-solid-900);--quill-semantic-text-utility-brand: var(--quill-primitive-colour-coral-solid-700);--quill-semantic-text-utility-demo: var(--quill-primitive-colour-orange-solid-700);--quill-semantic-text-utility-real: var(--quill-primitive-colour-emerald-solid-700);--quill-semantic-text-warning-inverse: var(--quill-primitive-colour-yellow-solid-900);--quill-semantic-text-warning-normal: var(--quill-primitive-colour-yellow-solid-500);--quill-semantic-text-warning-static-dark: var(--quill-primitive-colour-yellow-solid-500);--quill-semantic-text-warning-static-light: var(--quill-primitive-colour-yellow-solid-900)}.quill-quill-theme-semantic_colour-dark-dsrnX{--quill-semantic-background-action-brand-hover: var(--quill-primitive-colour-coral-solid-800);--quill-semantic-background-action-brand-normal: var(--quill-primitive-colour-coral-solid-700);--quill-semantic-background-action-brand-pressed: var(--quill-primitive-colour-coral-solid-900);--quill-semantic-background-action-disabled-inverse: var(--quill-primitive-colour-slate-solid-100);--quill-semantic-background-action-disabled-normal: var(--quill-primitive-colour-slate-solid-1100);--quill-semantic-background-action-disabled-static-dark: var(--quill-primitive-colour-slate-solid-100);--quill-semantic-background-action-disabled-static-light: var(--quill-primitive-colour-slate-solid-1100);--quill-semantic-background-action-secondary-inverse: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-background-action-secondary-normal: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-background-action-secondary-static-dark: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-background-action-secondary-static-light: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-background-action-tertiary-inverse: var(--quill-primitive-colour-slate-solid-200);--quill-semantic-background-action-tertiary-normal: var(--quill-primitive-colour-slate-solid-900);--quill-semantic-background-action-tertiary-static-dark: var(--quill-primitive-colour-slate-solid-200);--quill-semantic-background-action-tertiary-static-light: var(--quill-primitive-colour-slate-solid-900);--quill-semantic-background-canvas-primary: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-background-canvas-secondary: var(--quill-primitive-colour-slate-solid-1100);--quill-semantic-background-feedback-neutral-opacity: var(--quill-primitive-colour-white-opacity-100);--quill-semantic-background-feedback-opacity-error: var(--quill-primitive-colour-red-opacity-300);--quill-semantic-background-feedback-opacity-information: var(--quill-primitive-colour-blue-opacity-300);--quill-semantic-background-feedback-opacity-neutral: var(--quill-primitive-colour-white-opacity-100);--quill-semantic-background-feedback-opacity-opacity: var(--quill-primitive-colour-green-opacity-300);--quill-semantic-background-feedback-opacity-success: var(--quill-primitive-colour-green-opacity-300);--quill-semantic-background-feedback-opacity-warning: var(--quill-primitive-colour-yellow-opacity-300);--quill-semantic-background-feedback-solid-error-inverse: var(--quill-primitive-colour-red-solid-1100);--quill-semantic-background-feedback-solid-error-normal: var(--quill-primitive-colour-red-solid-500);--quill-semantic-background-feedback-solid-error-static-dark: var(--quill-primitive-colour-red-solid-500);--quill-semantic-background-feedback-solid-error-static-light: var(--quill-primitive-colour-red-solid-1100);--quill-semantic-background-feedback-solid-information-inverse: var(--quill-primitive-colour-blue-solid-1100);--quill-semantic-background-feedback-solid-information-normal: var(--quill-primitive-colour-blue-solid-500);--quill-semantic-background-feedback-solid-information-static-dark: var(--quill-primitive-colour-blue-solid-500);--quill-semantic-background-feedback-solid-information-static-light: var(--quill-primitive-colour-blue-solid-1100);--quill-semantic-background-feedback-solid-neutral-inverse: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-background-feedback-solid-neutral-normal: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-background-feedback-solid-neutral-static-dark: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-background-feedback-solid-neutral-static-light: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-background-feedback-solid-success-inverse: var(--quill-primitive-colour-green-solid-1100);--quill-semantic-background-feedback-solid-success-normal: var(--quill-primitive-colour-green-solid-500);--quill-semantic-background-feedback-solid-success-static-dark: var(--quill-primitive-colour-green-solid-500);--quill-semantic-background-feedback-solid-success-static-light: var(--quill-primitive-colour-green-solid-1100);--quill-semantic-background-feedback-solid-warning-inverse: var(--quill-primitive-colour-yellow-solid-1100);--quill-semantic-background-feedback-solid-warning-normal: var(--quill-primitive-colour-yellow-solid-500);--quill-semantic-background-feedback-solid-warning-static-dark: var(--quill-primitive-colour-yellow-solid-500);--quill-semantic-background-feedback-solid-warning-static-light: var(--quill-primitive-colour-yellow-solid-1100);--quill-semantic-background-foundation-primary-canvas: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-background-foundation-primary-surface: var(--quill-primitive-colour-slate-solid-1100);--quill-semantic-background-foundation-secondary-canvas: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-background-foundation-secondary-surface: var(--quill-primitive-colour-slate-solid-1100);--quill-semantic-background-state-default-primary: var(--quill-primitive-colour-white-opacity-75);--quill-semantic-background-state-default-secondary: var(--quill-primitive-colour-white-opacity-75);--quill-semantic-background-state-dragged-dragged: var(--quill-primitive-colour-white-opacity-200);--quill-semantic-background-state-hover-hover: var(--quill-primitive-colour-white-opacity-100);--quill-semantic-background-state-pressed-pressed: var(--quill-primitive-colour-white-opacity-200);--quill-semantic-background-state-selected-selected: var(--quill-primitive-colour-white-opacity-100);--quill-semantic-background-surface: var(--quill-primitive-colour-slate-solid-1100);--quill-semantic-border-error-inverse: var(--quill-primitive-colour-red-solid-900);--quill-semantic-border-error-normal: var(--quill-primitive-colour-red-solid-500);--quill-semantic-border-error-static-dark: var(--quill-primitive-colour-red-solid-500);--quill-semantic-border-error-static-light: var(--quill-primitive-colour-red-solid-900);--quill-semantic-border-information-inverse: var(--quill-primitive-colour-blue-solid-900);--quill-semantic-border-information-normal: var(--quill-primitive-colour-blue-solid-500);--quill-semantic-border-information-static-dark: var(--quill-primitive-colour-blue-solid-500);--quill-semantic-border-information-static-light: var(--quill-primitive-colour-blue-solid-900);--quill-semantic-border-normal-primary: var(--quill-primitive-colour-white-opacity-200);--quill-semantic-border-normal-secondary: var(--quill-primitive-colour-white-opacity-100);--quill-semantic-border-prominent-inverse: var(--quill-primitive-colour-slate-opacity-200);--quill-semantic-border-prominent-normal: var(--quill-primitive-colour-white-opacity-200);--quill-semantic-border-prominent-static-dark: var(--quill-primitive-colour-white-opacity-200);--quill-semantic-border-prominent-static-light: var(--quill-primitive-colour-slate-opacity-200);--quill-semantic-border-selected-inverse: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-border-selected-normal: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-border-selected-static-dark: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-border-selected-static-light: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-border-subtle-inverse: var(--quill-primitive-colour-slate-opacity-100);--quill-semantic-border-subtle-normal: var(--quill-primitive-colour-white-opacity-100);--quill-semantic-border-subtle-static-dark: var(--quill-primitive-colour-white-opacity-100);--quill-semantic-border-subtle-static-light: var(--quill-primitive-colour-slate-opacity-100);--quill-semantic-border-success-inverse: var(--quill-primitive-colour-green-solid-900);--quill-semantic-border-success-normal: var(--quill-primitive-colour-green-solid-500);--quill-semantic-border-success-static-dark: var(--quill-primitive-colour-green-solid-500);--quill-semantic-border-success-static-light: var(--quill-primitive-colour-green-solid-900);--quill-semantic-border-warning-inverse: var(--quill-primitive-colour-yellow-solid-900);--quill-semantic-border-warning-normal: var(--quill-primitive-colour-yellow-solid-500);--quill-semantic-border-warning-static-dark: var(--quill-primitive-colour-yellow-solid-500);--quill-semantic-border-warning-static-light: var(--quill-primitive-colour-yellow-solid-900);--quill-semantic-text-disabled-inverse: var(--quill-primitive-colour-slate-opacity-200);--quill-semantic-text-disabled-normal: var(--quill-primitive-colour-white-opacity-200);--quill-semantic-text-disabled-static-dark: var(--quill-primitive-colour-white-opacity-200);--quill-semantic-text-disabled-static-light: var(--quill-primitive-colour-slate-opacity-200);--quill-semantic-text-error-inverse: var(--quill-primitive-colour-red-solid-900);--quill-semantic-text-error-normal: var(--quill-primitive-colour-red-solid-500);--quill-semantic-text-error-static-dark: var(--quill-primitive-colour-red-solid-500);--quill-semantic-text-error-static-light: var(--quill-primitive-colour-red-solid-900);--quill-semantic-text-information-inverse: var(--quill-primitive-colour-blue-solid-900);--quill-semantic-text-information-normal: var(--quill-primitive-colour-blue-solid-500);--quill-semantic-text-information-static-dark: var(--quill-primitive-colour-blue-solid-500);--quill-semantic-text-information-static-light: var(--quill-primitive-colour-blue-solid-900);--quill-semantic-text-prominent-inverse: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-text-prominent-normal: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-text-prominent-static-dark: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-text-prominent-static-light: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-text-subtle-inverse: var(--quill-primitive-colour-slate-opacity-400);--quill-semantic-text-subtle-normal: var(--quill-primitive-colour-white-opacity-400);--quill-semantic-text-subtle-static-dark: var(--quill-primitive-colour-white-opacity-400);--quill-semantic-text-subtle-static-light: var(--quill-primitive-colour-slate-opacity-400);--quill-semantic-text-success-inverse: var(--quill-primitive-colour-green-solid-900);--quill-semantic-text-success-normal: var(--quill-primitive-colour-green-solid-500);--quill-semantic-text-success-static-dark: var(--quill-primitive-colour-green-solid-500);--quill-semantic-text-success-static-light: var(--quill-primitive-colour-green-solid-900);--quill-semantic-text-utility-brand: var(--quill-primitive-colour-coral-solid-700);--quill-semantic-text-utility-demo: var(--quill-primitive-colour-orange-solid-700);--quill-semantic-text-utility-real: var(--quill-primitive-colour-emerald-solid-700);--quill-semantic-text-warning-inverse: var(--quill-primitive-colour-yellow-solid-900);--quill-semantic-text-warning-normal: var(--quill-primitive-colour-yellow-solid-500);--quill-semantic-text-warning-static-dark: var(--quill-primitive-colour-yellow-solid-500);--quill-semantic-text-warning-static-light: var(--quill-primitive-colour-yellow-solid-900)}.quill-button-6xc3p{display:flex;align-items:center;justify-content:center;font-family:Inter,sans-serif;font-weight:600;text-align:center;white-space:nowrap;line-height:normal;border:none;border-radius:var(--quill-semantic-radius-999);background:var(--quill-semantic-background-action-brand-normal);color:var(--quill-semantic-text-prominent-static-dark);cursor:pointer;transition:background-color .2s ease;outline:none;text-decoration:none}.quill-button--lg-DVPDm{height:var(--quill-semantic-width-height-48);min-width:var(--quill-semantic-width-height-96);padding:0 var(--quill-semantic-spacing-24);font-size:16px}.quill-button--md-eH7DY{height:var(--quill-semantic-width-height-40);min-width:var(--quill-semantic-width-height-80);padding:0 var(--quill-semantic-spacing-20);font-size:14px}.quill-button--sm-bp5tF{height:var(--quill-semantic-width-height-32);min-width:var(--quill-semantic-width-height-64);padding:0 var(--quill-semantic-spacing-16);font-size:14px}.quill-button-6xc3p:hover:not(:disabled){background:var(--quill-semantic-background-action-brand-hover)}.quill-button-6xc3p:active:not(:disabled){background:var(--quill-semantic-background-action-brand-pressed)}.quill-button-6xc3p:disabled{background:var(--quill-semantic-background-action-disabled-normal);color:var(--quill-semantic-text-disabled-normal);cursor:not-allowed}.quill-button-6xc3p:focus-visible{outline:2px solid var(--quill-semantic-border-selected-normal);outline-offset:2px}:root{--quill-primitive-colour-black-opacity-50: #00000000;--quill-primitive-colour-black-opacity-75: #0000000a;--quill-primitive-colour-black-opacity-100: #00000014;--quill-primitive-colour-black-opacity-200: #00000029;--quill-primitive-colour-black-opacity-300: #0000003d;--quill-primitive-colour-black-opacity-400: #0000007a;--quill-primitive-colour-black-opacity-500: #0000008f;--quill-primitive-colour-black-opacity-600: #000000b8;--quill-primitive-colour-black-opacity-700: #000000cc;--quill-primitive-colour-black-opacity-800: #000000e0;--quill-primitive-colour-blue-opacity-50: #2c9aff00;--quill-primitive-colour-blue-opacity-75: #2c9aff0a;--quill-primitive-colour-blue-opacity-100: #2c9aff14;--quill-primitive-colour-blue-opacity-200: #2c9aff29;--quill-primitive-colour-blue-opacity-300: #2c9aff3d;--quill-primitive-colour-blue-opacity-400: #2c9aff7a;--quill-primitive-colour-blue-opacity-500: #2c9aff8f;--quill-primitive-colour-blue-opacity-600: #2c9affb8;--quill-primitive-colour-blue-opacity-700: #2c9affcc;--quill-primitive-colour-blue-opacity-800: #2c9affe0;--quill-primitive-colour-blue-solid-100: #e6f5ff;--quill-primitive-colour-blue-solid-200: #bfe7ff;--quill-primitive-colour-blue-solid-300: #99d8ff;--quill-primitive-colour-blue-solid-400: #73c9ff;--quill-primitive-colour-blue-solid-500: #53b9ff;--quill-primitive-colour-blue-solid-600: #3daaff;--quill-primitive-colour-blue-solid-700: #2c9aff;--quill-primitive-colour-blue-solid-800: #1789e1;--quill-primitive-colour-blue-solid-900: #0777c4;--quill-primitive-colour-blue-solid-1000: #0066a6;--quill-primitive-colour-blue-solid-1100: #005488;--quill-primitive-colour-blue-solid-1200: #00426a;--quill-primitive-colour-blue-solid-1300: #00304d;--quill-primitive-colour-blueberry-opacity-50: #4902e000;--quill-primitive-colour-blueberry-opacity-75: #4902e00a;--quill-primitive-colour-blueberry-opacity-100: #4902e014;--quill-primitive-colour-blueberry-opacity-200: #4902e029;--quill-primitive-colour-blueberry-opacity-300: #4902e03d;--quill-primitive-colour-blueberry-opacity-400: #4902e07a;--quill-primitive-colour-blueberry-opacity-500: #4902e08f;--quill-primitive-colour-blueberry-opacity-600: #4902e0b8;--quill-primitive-colour-blueberry-opacity-700: #4902e0cc;--quill-primitive-colour-blueberry-opacity-800: #4902e0e0;--quill-primitive-colour-blueberry-solid-100: #ede6fc;--quill-primitive-colour-blueberry-solid-200: #d2c0f7;--quill-primitive-colour-blueberry-solid-300: #b69af3;--quill-primitive-colour-blueberry-solid-400: #9b74ee;--quill-primitive-colour-blueberry-solid-500: #804ee9;--quill-primitive-colour-blueberry-solid-600: #6428e5;--quill-primitive-colour-blueberry-solid-700: #4902e0;--quill-primitive-colour-blueberry-solid-800: #4102c6;--quill-primitive-colour-blueberry-solid-900: #3802ac;--quill-primitive-colour-blueberry-solid-1000: #2f0192;--quill-primitive-colour-blueberry-solid-1100: #270178;--quill-primitive-colour-blueberry-solid-1200: #1e015d;--quill-primitive-colour-blueberry-solid-1300: #160143;--quill-primitive-colour-cherry-opacity-50: #de004000;--quill-primitive-colour-cherry-opacity-75: #de00400a;--quill-primitive-colour-cherry-opacity-100: #de004014;--quill-primitive-colour-cherry-opacity-200: #de004029;--quill-primitive-colour-cherry-opacity-300: #de00403d;--quill-primitive-colour-cherry-opacity-400: #de00407a;--quill-primitive-colour-cherry-opacity-500: #de00408f;--quill-primitive-colour-cherry-opacity-600: #de0040b8;--quill-primitive-colour-cherry-opacity-700: #de0040cc;--quill-primitive-colour-cherry-opacity-800: #de0040e0;--quill-primitive-colour-cherry-solid-100: #ffe6e7;--quill-primitive-colour-cherry-solid-200: #ffbfc6;--quill-primitive-colour-cherry-solid-300: #ff99a6;--quill-primitive-colour-cherry-solid-400: #ff7389;--quill-primitive-colour-cherry-solid-500: #ff4d6e;--quill-primitive-colour-cherry-solid-600: #f32656;--quill-primitive-colour-cherry-solid-700: #de0040;--quill-primitive-colour-cherry-solid-800: #d40032;--quill-primitive-colour-cherry-solid-900: #c40025;--quill-primitive-colour-cherry-solid-1000: #a6001a;--quill-primitive-colour-cherry-solid-1100: #880011;--quill-primitive-colour-cherry-solid-1200: #6a000a;--quill-primitive-colour-cherry-solid-1300: #4d0005;--quill-primitive-colour-coral-opacity-50: #ff444f00;--quill-primitive-colour-coral-opacity-75: #ff444f0a;--quill-primitive-colour-coral-opacity-100: #ff444f14;--quill-primitive-colour-coral-opacity-200: #ff444f29;--quill-primitive-colour-coral-opacity-300: #ff444f3d;--quill-primitive-colour-coral-opacity-400: #ff444f7a;--quill-primitive-colour-coral-opacity-500: #ff444f8f;--quill-primitive-colour-coral-opacity-600: #ff444fb8;--quill-primitive-colour-coral-opacity-700: #ff444fcc;--quill-primitive-colour-coral-opacity-800: #de0040e0;--quill-primitive-colour-coral-solid-100: #ffe6e6;--quill-primitive-colour-coral-solid-200: #ffbfc2;--quill-primitive-colour-coral-solid-300: #ff9ba3;--quill-primitive-colour-coral-solid-400: #ff7e88;--quill-primitive-colour-coral-solid-500: #ff6671;--quill-primitive-colour-coral-solid-600: #ff535e;--quill-primitive-colour-coral-solid-700: #ff444f;--quill-primitive-colour-coral-solid-800: #e12e3a;--quill-primitive-colour-coral-solid-900: #c41c28;--quill-primitive-colour-coral-solid-1000: #a60e19;--quill-primitive-colour-coral-solid-1100: #88030d;--quill-primitive-colour-coral-solid-1200: #6a0004;--quill-primitive-colour-coral-solid-1300: #4d0000;--quill-primitive-colour-emerald-opacity-50: #00c39000;--quill-primitive-colour-emerald-opacity-75: #00c3900a;--quill-primitive-colour-emerald-opacity-100: #00c39014;--quill-primitive-colour-emerald-opacity-200: #00c39029;--quill-primitive-colour-emerald-opacity-300: #00c3903d;--quill-primitive-colour-emerald-opacity-400: #00c3907a;--quill-primitive-colour-emerald-opacity-500: #00c3908f;--quill-primitive-colour-emerald-opacity-600: #00c390b8;--quill-primitive-colour-emerald-opacity-700: #00c390cc;--quill-primitive-colour-emerald-opacity-800: #00c390e0;--quill-primitive-colour-emerald-solid-100: #e6fff9;--quill-primitive-colour-emerald-solid-200: #bfffed;--quill-primitive-colour-emerald-solid-300: #99ffdf;--quill-primitive-colour-emerald-solid-400: #73f9cf;--quill-primitive-colour-emerald-solid-500: #4decbc;--quill-primitive-colour-emerald-solid-600: #26daa7;--quill-primitive-colour-emerald-solid-700: #00c390;--quill-primitive-colour-emerald-solid-800: #00bb86;--quill-primitive-colour-emerald-solid-900: #00ae7a;--quill-primitive-colour-emerald-solid-1000: #009e6d;--quill-primitive-colour-emerald-solid-1100: #00885d;--quill-primitive-colour-emerald-solid-1200: #006a4c;--quill-primitive-colour-emerald-solid-1300: #004d39;--quill-primitive-colour-grape-opacity-50: #7f0dcf00;--quill-primitive-colour-grape-opacity-75: #7f0dcf0a;--quill-primitive-colour-grape-opacity-100: #7f0dcf14;--quill-primitive-colour-grape-opacity-200: #7f0dcf29;--quill-primitive-colour-grape-opacity-300: #7f0dcf3d;--quill-primitive-colour-grape-opacity-400: #7f0dcf7a;--quill-primitive-colour-grape-opacity-500: #7f0dcf8f;--quill-primitive-colour-grape-opacity-600: #7f0dcfb8;--quill-primitive-colour-grape-opacity-700: #7f0dcfcc;--quill-primitive-colour-grape-opacity-800: #7f0dcfe0;--quill-primitive-colour-grape-solid-100: #f2e7fa;--quill-primitive-colour-grape-solid-200: #dfc3f3;--quill-primitive-colour-grape-solid-300: #cc9eec;--quill-primitive-colour-grape-solid-400: #b97ae5;--quill-primitive-colour-grape-solid-500: #a556dd;--quill-primitive-colour-grape-solid-600: #9231d6;--quill-primitive-colour-grape-solid-700: #7f0dcf;--quill-primitive-colour-grape-solid-800: #700cb7;--quill-primitive-colour-grape-solid-900: #610a9f;--quill-primitive-colour-grape-solid-1000: #530987;--quill-primitive-colour-grape-solid-1100: #44076e;--quill-primitive-colour-grape-solid-1200: #350556;--quill-primitive-colour-grape-solid-1300: #26043e;--quill-primitive-colour-green-opacity-50: #00883200;--quill-primitive-colour-green-opacity-75: #0088320a;--quill-primitive-colour-green-opacity-100: #00883214;--quill-primitive-colour-green-opacity-200: #00883229;--quill-primitive-colour-green-opacity-300: #0088323d;--quill-primitive-colour-green-opacity-400: #0088327a;--quill-primitive-colour-green-opacity-500: #0088328f;--quill-primitive-colour-green-opacity-600: #008832b8;--quill-primitive-colour-green-opacity-700: #008832cc;--quill-primitive-colour-green-opacity-800: #008832e0;--quill-primitive-colour-green-solid-100: #e6fae9;--quill-primitive-colour-green-solid-200: #bfefc8;--quill-primitive-colour-green-solid-300: #99e2a8;--quill-primitive-colour-green-solid-400: #73d089;--quill-primitive-colour-green-solid-500: #4dbc6b;--quill-primitive-colour-green-solid-600: #26a44e;--quill-primitive-colour-green-solid-700: #008832;--quill-primitive-colour-green-solid-800: #00822a;--quill-primitive-colour-green-solid-900: #007a22;--quill-primitive-colour-green-solid-1000: #006f1b;--quill-primitive-colour-green-solid-1100: #006114;--quill-primitive-colour-green-solid-1200: #00500f;--quill-primitive-colour-green-solid-1300: #003d0a;--quill-primitive-colour-magenta-opacity-50: #cb0df700;--quill-primitive-colour-magenta-opacity-75: #cb0df70a;--quill-primitive-colour-magenta-opacity-100: #cb0df714;--quill-primitive-colour-magenta-opacity-200: #cb0df729;--quill-primitive-colour-magenta-opacity-300: #cb0df73d;--quill-primitive-colour-magenta-opacity-400: #cb0df77a;--quill-primitive-colour-magenta-opacity-500: #cb0df78f;--quill-primitive-colour-magenta-opacity-600: #cb0df7b8;--quill-primitive-colour-magenta-opacity-700: #cb0df7cc;--quill-primitive-colour-magenta-opacity-800: #cb0df7e0;--quill-primitive-colour-magenta-solid-100: #fae7fe;--quill-primitive-colour-magenta-solid-200: #f2c3fd;--quill-primitive-colour-magenta-solid-300: #ea9efc;--quill-primitive-colour-magenta-solid-400: #e27afb;--quill-primitive-colour-magenta-solid-500: #db56f9;--quill-primitive-colour-magenta-solid-600: #d331f8;--quill-primitive-colour-magenta-solid-700: #cb0df7;--quill-primitive-colour-magenta-solid-800: #b30cda;--quill-primitive-colour-magenta-solid-900: #9c0abd;--quill-primitive-colour-magenta-solid-1000: #8409a1;--quill-primitive-colour-magenta-solid-1100: #6c0784;--quill-primitive-colour-magenta-solid-1200: #550567;--quill-primitive-colour-magenta-solid-1300: #3d044a;--quill-primitive-colour-mustard-opacity-50: #f7c60b00;--quill-primitive-colour-mustard-opacity-75: #f7c60b0a;--quill-primitive-colour-mustard-opacity-100: #f7c60b14;--quill-primitive-colour-mustard-opacity-200: #f7c60b29;--quill-primitive-colour-mustard-opacity-300: #f7c60b3d;--quill-primitive-colour-mustard-opacity-400: #f7c60b7a;--quill-primitive-colour-mustard-opacity-500: #f7c60b8f;--quill-primitive-colour-mustard-opacity-600: #f7c60bb8;--quill-primitive-colour-mustard-opacity-700: #f7c60bcc;--quill-primitive-colour-mustard-opacity-800: #f7c60be0;--quill-primitive-colour-mustard-solid-100: #fef9e7;--quill-primitive-colour-mustard-solid-200: #fdf1c2;--quill-primitive-colour-mustard-solid-300: #fce89d;--quill-primitive-colour-mustard-solid-400: #fbe079;--quill-primitive-colour-mustard-solid-500: #f9d754;--quill-primitive-colour-mustard-solid-600: #f8cf30;--quill-primitive-colour-mustard-solid-700: #f7c60b;--quill-primitive-colour-mustard-solid-800: #daaf0a;--quill-primitive-colour-mustard-solid-900: #bd9808;--quill-primitive-colour-mustard-solid-1000: #a18107;--quill-primitive-colour-mustard-solid-1100: #846a06;--quill-primitive-colour-mustard-solid-1200: #675305;--quill-primitive-colour-mustard-solid-1300: #4a3b03;--quill-primitive-colour-orange-opacity-50: #f55f0a00;--quill-primitive-colour-orange-opacity-75: #f55f0a0a;--quill-primitive-colour-orange-opacity-100: #f55f0a14;--quill-primitive-colour-orange-opacity-200: #f55f0a29;--quill-primitive-colour-orange-opacity-300: #f55f0a3d;--quill-primitive-colour-orange-opacity-400: #f55f0a7a;--quill-primitive-colour-orange-opacity-500: #f55f0a8f;--quill-primitive-colour-orange-opacity-600: #f55f0ab8;--quill-primitive-colour-orange-opacity-700: #f55f0acc;--quill-primitive-colour-orange-opacity-800: #f55f0ae0;--quill-primitive-colour-orange-solid-100: #feefe7;--quill-primitive-colour-orange-solid-200: #fdd7c2;--quill-primitive-colour-orange-solid-300: #fbbf9d;--quill-primitive-colour-orange-solid-400: #faa778;--quill-primitive-colour-orange-solid-500: #f88f54;--quill-primitive-colour-orange-solid-600: #f7772f;--quill-primitive-colour-orange-solid-700: #f55f0a;--quill-primitive-colour-orange-solid-800: #d85409;--quill-primitive-colour-orange-solid-900: #bc4908;--quill-primitive-colour-orange-solid-1000: #9f3e07;--quill-primitive-colour-orange-solid-1100: #833305;--quill-primitive-colour-orange-solid-1200: #662804;--quill-primitive-colour-orange-solid-1300: #4a1d03;--quill-primitive-colour-red-opacity-50: #e6190e00;--quill-primitive-colour-red-opacity-75: #e6190e0a;--quill-primitive-colour-red-opacity-100: #e6190e14;--quill-primitive-colour-red-opacity-200: #e6190e29;--quill-primitive-colour-red-opacity-300: #e6190e3d;--quill-primitive-colour-red-opacity-400: #e6190e7a;--quill-primitive-colour-red-opacity-500: #e6190e8f;--quill-primitive-colour-red-opacity-600: #e6190eb8;--quill-primitive-colour-red-opacity-700: #e6190ecc;--quill-primitive-colour-red-opacity-800: #e6190ee0;--quill-primitive-colour-red-solid-100: #ffe6e6;--quill-primitive-colour-red-solid-200: #ffbfbf;--quill-primitive-colour-red-solid-300: #ff9999;--quill-primitive-colour-red-solid-400: #ff7373;--quill-primitive-colour-red-solid-500: #ff4d4d;--quill-primitive-colour-red-solid-600: #f92e26;--quill-primitive-colour-red-solid-700: #e6190e;--quill-primitive-colour-red-solid-800: #db0800;--quill-primitive-colour-red-solid-900: #c40000;--quill-primitive-colour-red-solid-1000: #a60000;--quill-primitive-colour-red-solid-1100: #880000;--quill-primitive-colour-red-solid-1200: #6a0000;--quill-primitive-colour-red-solid-1300: #4d0000;--quill-primitive-colour-sapphire-opacity-50: #0c28f700;--quill-primitive-colour-sapphire-opacity-75: #0c28f70a;--quill-primitive-colour-sapphire-opacity-100: #0c28f714;--quill-primitive-colour-sapphire-opacity-200: #0c28f729;--quill-primitive-colour-sapphire-opacity-300: #0c28f73d;--quill-primitive-colour-sapphire-opacity-400: #0c28f77a;--quill-primitive-colour-sapphire-opacity-500: #0c28f78f;--quill-primitive-colour-sapphire-opacity-600: #0c28f7b8;--quill-primitive-colour-sapphire-opacity-700: #0c28f7cc;--quill-primitive-colour-sapphire-opacity-800: #0c28f7e0;--quill-primitive-colour-sapphire-solid-100: #e7eafe;--quill-primitive-colour-sapphire-solid-200: #c2c9fd;--quill-primitive-colour-sapphire-solid-300: #9ea9fc;--quill-primitive-colour-sapphire-solid-400: #7989fb;--quill-primitive-colour-sapphire-solid-500: #5569f9;--quill-primitive-colour-sapphire-solid-600: #3148f8;--quill-primitive-colour-sapphire-solid-700: #0c28f7;--quill-primitive-colour-sapphire-solid-800: #0b23da;--quill-primitive-colour-sapphire-solid-900: #091fbd;--quill-primitive-colour-sapphire-solid-1000: #081aa1;--quill-primitive-colour-sapphire-solid-1100: #061584;--quill-primitive-colour-sapphire-solid-1200: #051167;--quill-primitive-colour-sapphire-solid-1300: #040c4a;--quill-primitive-colour-seawater-opacity-50: #0aa0b000;--quill-primitive-colour-seawater-opacity-75: #0aa0b00a;--quill-primitive-colour-seawater-opacity-100: #0aa0b014;--quill-primitive-colour-seawater-opacity-200: #0aa0b029;--quill-primitive-colour-seawater-opacity-300: #0aa0b03d;--quill-primitive-colour-seawater-opacity-400: #0aa0b07a;--quill-primitive-colour-seawater-opacity-500: #0aa0b08f;--quill-primitive-colour-seawater-opacity-600: #0aa0b0b8;--quill-primitive-colour-seawater-opacity-700: #0aa0b0cc;--quill-primitive-colour-seawater-opacity-800: #0aa0b0e0;--quill-primitive-colour-seawater-solid-100: #e7f6f7;--quill-primitive-colour-seawater-solid-200: #c2e7eb;--quill-primitive-colour-seawater-solid-300: #9dd9df;--quill-primitive-colour-seawater-solid-400: #78cbd4;--quill-primitive-colour-seawater-solid-500: #54bdc8;--quill-primitive-colour-seawater-solid-600: #2faebc;--quill-primitive-colour-seawater-solid-700: #0aa0b0;--quill-primitive-colour-seawater-solid-800: #098d9c;--quill-primitive-colour-seawater-solid-900: #087b87;--quill-primitive-colour-seawater-solid-1000: #076872;--quill-primitive-colour-seawater-solid-1100: #05555e;--quill-primitive-colour-seawater-solid-1200: #044349;--quill-primitive-colour-seawater-solid-1300: #033035;--quill-primitive-colour-slate-opacity-50: #181c2500;--quill-primitive-colour-slate-opacity-75: #181c250a;--quill-primitive-colour-slate-opacity-100: #181c2514;--quill-primitive-colour-slate-opacity-200: #181c2529;--quill-primitive-colour-slate-opacity-300: #181c253d;--quill-primitive-colour-slate-opacity-400: #181c257a;--quill-primitive-colour-slate-opacity-500: #181c258f;--quill-primitive-colour-slate-opacity-600: #181c25b8;--quill-primitive-colour-slate-opacity-700: #181c25cc;--quill-primitive-colour-slate-opacity-800: #181c25e0;--quill-primitive-colour-slate-solid-50: #ffffff;--quill-primitive-colour-slate-solid-75: #f6f7f8;--quill-primitive-colour-slate-solid-100: #ebecef;--quill-primitive-colour-slate-solid-200: #ced0d6;--quill-primitive-colour-slate-solid-300: #b1b4bc;--quill-primitive-colour-slate-solid-400: #9498a2;--quill-primitive-colour-slate-solid-500: #787d88;--quill-primitive-colour-slate-solid-600: #5c616d;--quill-primitive-colour-slate-solid-700: #414652;--quill-primitive-colour-slate-solid-800: #383d4a;--quill-primitive-colour-slate-solid-900: #303541;--quill-primitive-colour-slate-solid-1000: #282c38;--quill-primitive-colour-slate-solid-1100: #20242f;--quill-primitive-colour-slate-solid-1200: #181c25;--quill-primitive-colour-slate-solid-1300: #11141b;--quill-primitive-colour-slate-solid-1400: #000000;--quill-primitive-colour-teal-opacity-50: #00cccc00;--quill-primitive-colour-teal-opacity-75: #00cccc0a;--quill-primitive-colour-teal-opacity-100: #00cccc14;--quill-primitive-colour-teal-opacity-200: #00cccc29;--quill-primitive-colour-teal-opacity-300: #00cccc3d;--quill-primitive-colour-teal-opacity-400: #00cccc7a;--quill-primitive-colour-teal-opacity-500: #00cccc8f;--quill-primitive-colour-teal-opacity-600: #00ccccb8;--quill-primitive-colour-teal-opacity-700: #00cccccc;--quill-primitive-colour-teal-opacity-800: #17eabde0;--quill-primitive-colour-teal-solid-100: #e6fafa;--quill-primitive-colour-teal-solid-200: #bff2f2;--quill-primitive-colour-teal-solid-300: #99ebeb;--quill-primitive-colour-teal-solid-400: #73e3e3;--quill-primitive-colour-teal-solid-500: #4ddbdb;--quill-primitive-colour-teal-solid-600: #26d4d4;--quill-primitive-colour-teal-solid-700: #00cccc;--quill-primitive-colour-teal-solid-800: #00b4b4;--quill-primitive-colour-teal-solid-900: #009c9c;--quill-primitive-colour-teal-solid-1000: #008585;--quill-primitive-colour-teal-solid-1100: #006d6d;--quill-primitive-colour-teal-solid-1200: #005555;--quill-primitive-colour-teal-solid-1300: #003d3d;--quill-primitive-colour-tiffany-opacity-50: #17eabd00;--quill-primitive-colour-tiffany-opacity-75: #17eabd0a;--quill-primitive-colour-tiffany-opacity-100: #17eabd14;--quill-primitive-colour-tiffany-opacity-200: #17eabd29;--quill-primitive-colour-tiffany-opacity-300: #17eabd3d;--quill-primitive-colour-tiffany-opacity-400: #17eabd7a;--quill-primitive-colour-tiffany-opacity-500: #17eabd8f;--quill-primitive-colour-tiffany-opacity-600: #17eabdb8;--quill-primitive-colour-tiffany-opacity-700: #17eabdcc;--quill-primitive-colour-tiffany-opacity-800: #17eabde0;--quill-primitive-colour-tiffany-solid-100: #e8fdf8;--quill-primitive-colour-tiffany-solid-200: #c5faef;--quill-primitive-colour-tiffany-solid-300: #a2f7e5;--quill-primitive-colour-tiffany-solid-400: #7ff3db;--quill-primitive-colour-tiffany-solid-500: #5df0d1;--quill-primitive-colour-tiffany-solid-600: #3aedc7;--quill-primitive-colour-tiffany-solid-700: #17eabd;--quill-primitive-colour-tiffany-solid-800: #14cfa7;--quill-primitive-colour-tiffany-solid-900: #12b391;--quill-primitive-colour-tiffany-solid-1000: #0f987b;--quill-primitive-colour-tiffany-solid-1100: #0c7d65;--quill-primitive-colour-tiffany-solid-1200: #0a624f;--quill-primitive-colour-tiffany-solid-1300: #074639;--quill-primitive-colour-white-opacity-50: #ffffff00;--quill-primitive-colour-white-opacity-75: #ffffff0a;--quill-primitive-colour-white-opacity-100: #ffffff14;--quill-primitive-colour-white-opacity-200: #ffffff29;--quill-primitive-colour-white-opacity-300: #ffffff3d;--quill-primitive-colour-white-opacity-400: #ffffff7a;--quill-primitive-colour-white-opacity-500: #ffffff8f;--quill-primitive-colour-white-opacity-600: #ffffffb8;--quill-primitive-colour-white-opacity-700: #ffffffcc;--quill-primitive-colour-white-opacity-800: #ffffffe0;--quill-primitive-colour-yellow-opacity-50: #ff9c1300;--quill-primitive-colour-yellow-opacity-75: #ff9c130a;--quill-primitive-colour-yellow-opacity-100: #ff9c1314;--quill-primitive-colour-yellow-opacity-200: #ff9c1329;--quill-primitive-colour-yellow-opacity-300: #ff9c133d;--quill-primitive-colour-yellow-opacity-400: #ff9c137a;--quill-primitive-colour-yellow-opacity-500: #ff9c138f;--quill-primitive-colour-yellow-opacity-600: #ff9c13b8;--quill-primitive-colour-yellow-opacity-700: #ff9c13cc;--quill-primitive-colour-yellow-opacity-800: #ff9c13e0;--quill-primitive-colour-yellow-solid-100: #fff7e6;--quill-primitive-colour-yellow-solid-200: #ffeabf;--quill-primitive-colour-yellow-solid-300: #ffdd99;--quill-primitive-colour-yellow-solid-400: #ffce73;--quill-primitive-colour-yellow-solid-500: #ffbe4d;--quill-primitive-colour-yellow-solid-600: #ffae26;--quill-primitive-colour-yellow-solid-700: #ff9c13;--quill-primitive-colour-yellow-solid-800: #e18d00;--quill-primitive-colour-yellow-solid-900: #c47d00;--quill-primitive-colour-yellow-solid-1000: #a66c00;--quill-primitive-colour-yellow-solid-1100: #885a00;--quill-primitive-colour-yellow-solid-1200: #6a4800;--quill-primitive-colour-yellow-solid-1300: #4d3500;--quill-primitive-size-0: 0rem;--quill-primitive-size-1: .0625rem;--quill-primitive-size-2: .125rem;--quill-primitive-size-4: .25rem;--quill-primitive-size-6: .375rem;--quill-primitive-size-8: .5rem;--quill-primitive-size-10: .625rem;--quill-primitive-size-12: .75rem;--quill-primitive-size-14: .875rem;--quill-primitive-size-16: 1rem;--quill-primitive-size-18: 1.125rem;--quill-primitive-size-20: 1.25rem;--quill-primitive-size-22: 1.375rem;--quill-primitive-size-24: 1.5rem;--quill-primitive-size-26: 1.625rem;--quill-primitive-size-28: 1.75rem;--quill-primitive-size-30: 1.875rem;--quill-primitive-size-32: 2rem;--quill-primitive-size-34: 2.125rem;--quill-primitive-size-36: 2.25rem;--quill-primitive-size-38: 2.375rem;--quill-primitive-size-40: 2.5rem;--quill-primitive-size-42: 2.625rem;--quill-primitive-size-44: 2.75rem;--quill-primitive-size-46: 2.875rem;--quill-primitive-size-48: 3rem;--quill-primitive-size-50: 3.125rem;--quill-primitive-size-52: 3.25rem;--quill-primitive-size-54: 3.375rem;--quill-primitive-size-56: 3.5rem;--quill-primitive-size-58: 3.625rem;--quill-primitive-size-60: 3.75rem;--quill-primitive-size-62: 3.875rem;--quill-primitive-size-64: 4rem;--quill-primitive-size-66: 4.125rem;--quill-primitive-size-68: 4.25rem;--quill-primitive-size-70: 4.375rem;--quill-primitive-size-72: 4.5rem;--quill-primitive-size-74: 4.625rem;--quill-primitive-size-76: 4.75rem;--quill-primitive-size-78: 4.875rem;--quill-primitive-size-80: 5rem;--quill-primitive-size-82: 5.125rem;--quill-primitive-size-84: 5.25rem;--quill-primitive-size-86: 5.375rem;--quill-primitive-size-88: 5.5rem;--quill-primitive-size-90: 5.625rem;--quill-primitive-size-92: 5.75rem;--quill-primitive-size-94: 5.875rem;--quill-primitive-size-96: 6rem;--quill-primitive-size-98: 6.125rem;--quill-primitive-size-100: 6.25rem;--quill-primitive-size-999: 62.4375rem;--quill-primitive-typography-font-family-code: red hat mono;--quill-primitive-typography-font-family-primary: inter;--quill-primitive-typography-font-size-10: .625rem;--quill-primitive-typography-font-size-12: .75rem;--quill-primitive-typography-font-size-14: .875rem;--quill-primitive-typography-font-size-16: 1rem;--quill-primitive-typography-font-size-18: 1.125rem;--quill-primitive-typography-font-size-20: 1.25rem;--quill-primitive-typography-font-size-24: 1.5rem;--quill-primitive-typography-font-size-28: 1.75rem;--quill-primitive-typography-font-size-32: 2rem;--quill-primitive-typography-font-size-40: 2.5rem;--quill-primitive-typography-font-size-48: 3rem;--quill-primitive-typography-font-size-56: 3.5rem;--quill-primitive-typography-font-size-64: 4rem;--quill-primitive-typography-font-size-72: 4.5rem;--quill-primitive-typography-font-size-80: 5rem;--quill-primitive-typography-font-size-88: 5.5rem;--quill-primitive-typography-font-size-96: 6rem;--quill-primitive-typography-font-weight-black: black;--quill-primitive-typography-font-weight-bold: bold;--quill-primitive-typography-font-weight-extrabold: extrabold;--quill-primitive-typography-font-weight-medium: medium;--quill-primitive-typography-font-weight-regular: regular;--quill-primitive-typography-font-weight-semibold: semibold;--quill-primitive-typography-line-height-16: 1rem;--quill-primitive-typography-line-height-18: 1.125rem;--quill-primitive-typography-line-height-20: 1.25rem;--quill-primitive-typography-line-height-22: 1.375rem;--quill-primitive-typography-line-height-24: 1.5rem;--quill-primitive-typography-line-height-28: 1.75rem;--quill-primitive-typography-line-height-30: 1.875rem;--quill-primitive-typography-line-height-32: 2rem;--quill-primitive-typography-line-height-36: 2.25rem;--quill-primitive-typography-line-height-40: 2.5rem;--quill-primitive-typography-line-height-48: 3rem;--quill-primitive-typography-line-height-56: 3.5rem;--quill-primitive-typography-line-height-64: 4rem;--quill-primitive-typography-line-height-72: 4.5rem;--quill-primitive-typography-line-height-80: 5rem;--quill-primitive-typography-line-height-96: 6rem;--quill-primitive-typography-line-height-104: 6.5rem;--quill-primitive-typography-line-height-128: 8rem;--quill-primitive-typography-line-height-204: 12.75rem}:root{--quill-semantic-background-action-brand-hover: var(--quill-primitive-colour-coral-solid-800);--quill-semantic-background-action-brand-normal: var(--quill-primitive-colour-coral-solid-700);--quill-semantic-background-action-brand-pressed: var(--quill-primitive-colour-coral-solid-900);--quill-semantic-background-action-disabled-inverse: var(--quill-primitive-colour-slate-solid-1100);--quill-semantic-background-action-disabled-normal: var(--quill-primitive-colour-slate-solid-100);--quill-semantic-background-action-disabled-static-dark: var(--quill-primitive-colour-slate-solid-100);--quill-semantic-background-action-disabled-static-light: var(--quill-primitive-colour-slate-solid-1100);--quill-semantic-background-action-secondary-inverse: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-background-action-secondary-normal: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-background-action-secondary-static-dark: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-background-action-secondary-static-light: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-background-action-tertiary-inverse: var(--quill-primitive-colour-slate-solid-900);--quill-semantic-background-action-tertiary-normal: var(--quill-primitive-colour-slate-solid-200);--quill-semantic-background-action-tertiary-static-dark: var(--quill-primitive-colour-slate-solid-200);--quill-semantic-background-action-tertiary-static-light: var(--quill-primitive-colour-slate-solid-900);--quill-semantic-background-canvas-primary: var(--quill-primitive-colour-slate-solid-75);--quill-semantic-background-canvas-secondary: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-background-feedback-neutral-opacity: var(--quill-primitive-colour-slate-opacity-100);--quill-semantic-background-feedback-opacity-error: var(--quill-primitive-colour-red-opacity-300);--quill-semantic-background-feedback-opacity-information: var(--quill-primitive-colour-blue-opacity-300);--quill-semantic-background-feedback-opacity-neutral: var(--quill-primitive-colour-slate-opacity-100);--quill-semantic-background-feedback-opacity-opacity: var(--quill-primitive-colour-green-opacity-300);--quill-semantic-background-feedback-opacity-success: var(--quill-primitive-colour-green-opacity-300);--quill-semantic-background-feedback-opacity-warning: var(--quill-primitive-colour-yellow-opacity-300);--quill-semantic-background-feedback-solid-error-inverse: var(--quill-primitive-colour-red-solid-500);--quill-semantic-background-feedback-solid-error-normal: var(--quill-primitive-colour-red-solid-1100);--quill-semantic-background-feedback-solid-error-static-dark: var(--quill-primitive-colour-red-solid-500);--quill-semantic-background-feedback-solid-error-static-light: var(--quill-primitive-colour-red-solid-1100);--quill-semantic-background-feedback-solid-information-inverse: var(--quill-primitive-colour-blue-solid-500);--quill-semantic-background-feedback-solid-information-normal: var(--quill-primitive-colour-blue-solid-1100);--quill-semantic-background-feedback-solid-information-static-dark: var(--quill-primitive-colour-blue-solid-500);--quill-semantic-background-feedback-solid-information-static-light: var(--quill-primitive-colour-blue-solid-1100);--quill-semantic-background-feedback-solid-neutral-inverse: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-background-feedback-solid-neutral-normal: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-background-feedback-solid-neutral-static-dark: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-background-feedback-solid-neutral-static-light: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-background-feedback-solid-success-inverse: var(--quill-primitive-colour-green-solid-500);--quill-semantic-background-feedback-solid-success-normal: var(--quill-primitive-colour-green-solid-1100);--quill-semantic-background-feedback-solid-success-static-dark: var(--quill-primitive-colour-green-solid-500);--quill-semantic-background-feedback-solid-success-static-light: var(--quill-primitive-colour-green-solid-1100);--quill-semantic-background-feedback-solid-warning-inverse: var(--quill-primitive-colour-yellow-solid-500);--quill-semantic-background-feedback-solid-warning-normal: var(--quill-primitive-colour-yellow-solid-1100);--quill-semantic-background-feedback-solid-warning-static-dark: var(--quill-primitive-colour-yellow-solid-500);--quill-semantic-background-feedback-solid-warning-static-light: var(--quill-primitive-colour-yellow-solid-1100);--quill-semantic-background-foundation-primary-canvas: var(--quill-primitive-colour-slate-solid-75);--quill-semantic-background-foundation-primary-surface: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-background-foundation-secondary-canvas: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-background-foundation-secondary-surface: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-background-state-default-primary: var(--quill-primitive-colour-slate-opacity-75);--quill-semantic-background-state-default-secondary: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-background-state-dragged-dragged: var(--quill-primitive-colour-slate-opacity-200);--quill-semantic-background-state-hover-hover: var(--quill-primitive-colour-slate-opacity-100);--quill-semantic-background-state-pressed-pressed: var(--quill-primitive-colour-slate-opacity-200);--quill-semantic-background-state-selected-selected: var(--quill-primitive-colour-slate-opacity-100);--quill-semantic-background-surface: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-border-error-inverse: var(--quill-primitive-colour-red-solid-500);--quill-semantic-border-error-normal: var(--quill-primitive-colour-red-solid-900);--quill-semantic-border-error-static-dark: var(--quill-primitive-colour-red-solid-500);--quill-semantic-border-error-static-light: var(--quill-primitive-colour-red-solid-900);--quill-semantic-border-information-inverse: var(--quill-primitive-colour-blue-solid-500);--quill-semantic-border-information-normal: var(--quill-primitive-colour-blue-solid-900);--quill-semantic-border-information-static-dark: var(--quill-primitive-colour-blue-solid-500);--quill-semantic-border-information-static-light: var(--quill-primitive-colour-blue-solid-900);--quill-semantic-border-normal-primary: var(--quill-primitive-colour-slate-opacity-200);--quill-semantic-border-normal-secondary: var(--quill-primitive-colour-slate-opacity-100);--quill-semantic-border-prominent-inverse: var(--quill-primitive-colour-white-opacity-200);--quill-semantic-border-prominent-normal: var(--quill-primitive-colour-slate-opacity-200);--quill-semantic-border-prominent-static-dark: var(--quill-primitive-colour-white-opacity-200);--quill-semantic-border-prominent-static-light: var(--quill-primitive-colour-slate-opacity-200);--quill-semantic-border-selected-inverse: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-border-selected-normal: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-border-selected-static-dark: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-border-selected-static-light: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-border-subtle-inverse: var(--quill-primitive-colour-white-opacity-100);--quill-semantic-border-subtle-normal: var(--quill-primitive-colour-slate-opacity-100);--quill-semantic-border-subtle-static-dark: var(--quill-primitive-colour-white-opacity-100);--quill-semantic-border-subtle-static-light: var(--quill-primitive-colour-slate-opacity-100);--quill-semantic-border-success-inverse: var(--quill-primitive-colour-green-solid-500);--quill-semantic-border-success-normal: var(--quill-primitive-colour-green-solid-900);--quill-semantic-border-success-static-dark: var(--quill-primitive-colour-green-solid-500);--quill-semantic-border-success-static-light: var(--quill-primitive-colour-green-solid-900);--quill-semantic-border-warning-inverse: var(--quill-primitive-colour-yellow-solid-500);--quill-semantic-border-warning-normal: var(--quill-primitive-colour-yellow-solid-900);--quill-semantic-border-warning-static-dark: var(--quill-primitive-colour-yellow-solid-500);--quill-semantic-border-warning-static-light: var(--quill-primitive-colour-yellow-solid-900);--quill-semantic-text-disabled-inverse: var(--quill-primitive-colour-white-opacity-200);--quill-semantic-text-disabled-normal: var(--quill-primitive-colour-slate-opacity-200);--quill-semantic-text-disabled-static-dark: var(--quill-primitive-colour-white-opacity-200);--quill-semantic-text-disabled-static-light: var(--quill-primitive-colour-slate-opacity-200);--quill-semantic-text-error-inverse: var(--quill-primitive-colour-red-solid-500);--quill-semantic-text-error-normal: var(--quill-primitive-colour-red-solid-900);--quill-semantic-text-error-static-dark: var(--quill-primitive-colour-red-solid-500);--quill-semantic-text-error-static-light: var(--quill-primitive-colour-red-solid-900);--quill-semantic-text-information-inverse: var(--quill-primitive-colour-blue-solid-500);--quill-semantic-text-information-normal: var(--quill-primitive-colour-blue-solid-900);--quill-semantic-text-information-static-dark: var(--quill-primitive-colour-blue-solid-500);--quill-semantic-text-information-static-light: var(--quill-primitive-colour-blue-solid-900);--quill-semantic-text-prominent-inverse: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-text-prominent-normal: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-text-prominent-static-dark: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-text-prominent-static-light: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-text-subtle-inverse: var(--quill-primitive-colour-white-opacity-400);--quill-semantic-text-subtle-normal: var(--quill-primitive-colour-slate-opacity-400);--quill-semantic-text-subtle-static-dark: var(--quill-primitive-colour-white-opacity-400);--quill-semantic-text-subtle-static-light: var(--quill-primitive-colour-slate-opacity-400);--quill-semantic-text-success-inverse: var(--quill-primitive-colour-green-solid-500);--quill-semantic-text-success-normal: var(--quill-primitive-colour-green-solid-900);--quill-semantic-text-success-static-dark: var(--quill-primitive-colour-green-solid-500);--quill-semantic-text-success-static-light: var(--quill-primitive-colour-green-solid-900);--quill-semantic-text-utility-brand: var(--quill-primitive-colour-coral-solid-700);--quill-semantic-text-utility-demo: var(--quill-primitive-colour-orange-solid-700);--quill-semantic-text-utility-real: var(--quill-primitive-colour-emerald-solid-700);--quill-semantic-text-warning-inverse: var(--quill-primitive-colour-yellow-solid-500);--quill-semantic-text-warning-normal: var(--quill-primitive-colour-yellow-solid-900);--quill-semantic-text-warning-static-dark: var(--quill-primitive-colour-yellow-solid-500);--quill-semantic-text-warning-static-light: var(--quill-primitive-colour-yellow-solid-900)}.quill-quill-theme-semantic_colour-dark-i8Mu0{--quill-semantic-background-action-brand-hover: var(--quill-primitive-colour-coral-solid-800);--quill-semantic-background-action-brand-normal: var(--quill-primitive-colour-coral-solid-700);--quill-semantic-background-action-brand-pressed: var(--quill-primitive-colour-coral-solid-900);--quill-semantic-background-action-disabled-inverse: var(--quill-primitive-colour-slate-solid-100);--quill-semantic-background-action-disabled-normal: var(--quill-primitive-colour-slate-solid-1100);--quill-semantic-background-action-disabled-static-dark: var(--quill-primitive-colour-slate-solid-100);--quill-semantic-background-action-disabled-static-light: var(--quill-primitive-colour-slate-solid-1100);--quill-semantic-background-action-secondary-inverse: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-background-action-secondary-normal: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-background-action-secondary-static-dark: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-background-action-secondary-static-light: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-background-action-tertiary-inverse: var(--quill-primitive-colour-slate-solid-200);--quill-semantic-background-action-tertiary-normal: var(--quill-primitive-colour-slate-solid-900);--quill-semantic-background-action-tertiary-static-dark: var(--quill-primitive-colour-slate-solid-200);--quill-semantic-background-action-tertiary-static-light: var(--quill-primitive-colour-slate-solid-900);--quill-semantic-background-canvas-primary: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-background-canvas-secondary: var(--quill-primitive-colour-slate-solid-1100);--quill-semantic-background-feedback-neutral-opacity: var(--quill-primitive-colour-white-opacity-100);--quill-semantic-background-feedback-opacity-error: var(--quill-primitive-colour-red-opacity-300);--quill-semantic-background-feedback-opacity-information: var(--quill-primitive-colour-blue-opacity-300);--quill-semantic-background-feedback-opacity-neutral: var(--quill-primitive-colour-white-opacity-100);--quill-semantic-background-feedback-opacity-opacity: var(--quill-primitive-colour-green-opacity-300);--quill-semantic-background-feedback-opacity-success: var(--quill-primitive-colour-green-opacity-300);--quill-semantic-background-feedback-opacity-warning: var(--quill-primitive-colour-yellow-opacity-300);--quill-semantic-background-feedback-solid-error-inverse: var(--quill-primitive-colour-red-solid-1100);--quill-semantic-background-feedback-solid-error-normal: var(--quill-primitive-colour-red-solid-500);--quill-semantic-background-feedback-solid-error-static-dark: var(--quill-primitive-colour-red-solid-500);--quill-semantic-background-feedback-solid-error-static-light: var(--quill-primitive-colour-red-solid-1100);--quill-semantic-background-feedback-solid-information-inverse: var(--quill-primitive-colour-blue-solid-1100);--quill-semantic-background-feedback-solid-information-normal: var(--quill-primitive-colour-blue-solid-500);--quill-semantic-background-feedback-solid-information-static-dark: var(--quill-primitive-colour-blue-solid-500);--quill-semantic-background-feedback-solid-information-static-light: var(--quill-primitive-colour-blue-solid-1100);--quill-semantic-background-feedback-solid-neutral-inverse: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-background-feedback-solid-neutral-normal: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-background-feedback-solid-neutral-static-dark: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-background-feedback-solid-neutral-static-light: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-background-feedback-solid-success-inverse: var(--quill-primitive-colour-green-solid-1100);--quill-semantic-background-feedback-solid-success-normal: var(--quill-primitive-colour-green-solid-500);--quill-semantic-background-feedback-solid-success-static-dark: var(--quill-primitive-colour-green-solid-500);--quill-semantic-background-feedback-solid-success-static-light: var(--quill-primitive-colour-green-solid-1100);--quill-semantic-background-feedback-solid-warning-inverse: var(--quill-primitive-colour-yellow-solid-1100);--quill-semantic-background-feedback-solid-warning-normal: var(--quill-primitive-colour-yellow-solid-500);--quill-semantic-background-feedback-solid-warning-static-dark: var(--quill-primitive-colour-yellow-solid-500);--quill-semantic-background-feedback-solid-warning-static-light: var(--quill-primitive-colour-yellow-solid-1100);--quill-semantic-background-foundation-primary-canvas: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-background-foundation-primary-surface: var(--quill-primitive-colour-slate-solid-1100);--quill-semantic-background-foundation-secondary-canvas: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-background-foundation-secondary-surface: var(--quill-primitive-colour-slate-solid-1100);--quill-semantic-background-state-default-primary: var(--quill-primitive-colour-white-opacity-75);--quill-semantic-background-state-default-secondary: var(--quill-primitive-colour-white-opacity-75);--quill-semantic-background-state-dragged-dragged: var(--quill-primitive-colour-white-opacity-200);--quill-semantic-background-state-hover-hover: var(--quill-primitive-colour-white-opacity-100);--quill-semantic-background-state-pressed-pressed: var(--quill-primitive-colour-white-opacity-200);--quill-semantic-background-state-selected-selected: var(--quill-primitive-colour-white-opacity-100);--quill-semantic-background-surface: var(--quill-primitive-colour-slate-solid-1100);--quill-semantic-border-error-inverse: var(--quill-primitive-colour-red-solid-900);--quill-semantic-border-error-normal: var(--quill-primitive-colour-red-solid-500);--quill-semantic-border-error-static-dark: var(--quill-primitive-colour-red-solid-500);--quill-semantic-border-error-static-light: var(--quill-primitive-colour-red-solid-900);--quill-semantic-border-information-inverse: var(--quill-primitive-colour-blue-solid-900);--quill-semantic-border-information-normal: var(--quill-primitive-colour-blue-solid-500);--quill-semantic-border-information-static-dark: var(--quill-primitive-colour-blue-solid-500);--quill-semantic-border-information-static-light: var(--quill-primitive-colour-blue-solid-900);--quill-semantic-border-normal-primary: var(--quill-primitive-colour-white-opacity-200);--quill-semantic-border-normal-secondary: var(--quill-primitive-colour-white-opacity-100);--quill-semantic-border-prominent-inverse: var(--quill-primitive-colour-slate-opacity-200);--quill-semantic-border-prominent-normal: var(--quill-primitive-colour-white-opacity-200);--quill-semantic-border-prominent-static-dark: var(--quill-primitive-colour-white-opacity-200);--quill-semantic-border-prominent-static-light: var(--quill-primitive-colour-slate-opacity-200);--quill-semantic-border-selected-inverse: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-border-selected-normal: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-border-selected-static-dark: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-border-selected-static-light: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-border-subtle-inverse: var(--quill-primitive-colour-slate-opacity-100);--quill-semantic-border-subtle-normal: var(--quill-primitive-colour-white-opacity-100);--quill-semantic-border-subtle-static-dark: var(--quill-primitive-colour-white-opacity-100);--quill-semantic-border-subtle-static-light: var(--quill-primitive-colour-slate-opacity-100);--quill-semantic-border-success-inverse: var(--quill-primitive-colour-green-solid-900);--quill-semantic-border-success-normal: var(--quill-primitive-colour-green-solid-500);--quill-semantic-border-success-static-dark: var(--quill-primitive-colour-green-solid-500);--quill-semantic-border-success-static-light: var(--quill-primitive-colour-green-solid-900);--quill-semantic-border-warning-inverse: var(--quill-primitive-colour-yellow-solid-900);--quill-semantic-border-warning-normal: var(--quill-primitive-colour-yellow-solid-500);--quill-semantic-border-warning-static-dark: var(--quill-primitive-colour-yellow-solid-500);--quill-semantic-border-warning-static-light: var(--quill-primitive-colour-yellow-solid-900);--quill-semantic-text-disabled-inverse: var(--quill-primitive-colour-slate-opacity-200);--quill-semantic-text-disabled-normal: var(--quill-primitive-colour-white-opacity-200);--quill-semantic-text-disabled-static-dark: var(--quill-primitive-colour-white-opacity-200);--quill-semantic-text-disabled-static-light: var(--quill-primitive-colour-slate-opacity-200);--quill-semantic-text-error-inverse: var(--quill-primitive-colour-red-solid-900);--quill-semantic-text-error-normal: var(--quill-primitive-colour-red-solid-500);--quill-semantic-text-error-static-dark: var(--quill-primitive-colour-red-solid-500);--quill-semantic-text-error-static-light: var(--quill-primitive-colour-red-solid-900);--quill-semantic-text-information-inverse: var(--quill-primitive-colour-blue-solid-900);--quill-semantic-text-information-normal: var(--quill-primitive-colour-blue-solid-500);--quill-semantic-text-information-static-dark: var(--quill-primitive-colour-blue-solid-500);--quill-semantic-text-information-static-light: var(--quill-primitive-colour-blue-solid-900);--quill-semantic-text-prominent-inverse: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-text-prominent-normal: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-text-prominent-static-dark: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-text-prominent-static-light: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-text-subtle-inverse: var(--quill-primitive-colour-slate-opacity-400);--quill-semantic-text-subtle-normal: var(--quill-primitive-colour-white-opacity-400);--quill-semantic-text-subtle-static-dark: var(--quill-primitive-colour-white-opacity-400);--quill-semantic-text-subtle-static-light: var(--quill-primitive-colour-slate-opacity-400);--quill-semantic-text-success-inverse: var(--quill-primitive-colour-green-solid-900);--quill-semantic-text-success-normal: var(--quill-primitive-colour-green-solid-500);--quill-semantic-text-success-static-dark: var(--quill-primitive-colour-green-solid-500);--quill-semantic-text-success-static-light: var(--quill-primitive-colour-green-solid-900);--quill-semantic-text-utility-brand: var(--quill-primitive-colour-coral-solid-700);--quill-semantic-text-utility-demo: var(--quill-primitive-colour-orange-solid-700);--quill-semantic-text-utility-real: var(--quill-primitive-colour-emerald-solid-700);--quill-semantic-text-warning-inverse: var(--quill-primitive-colour-yellow-solid-900);--quill-semantic-text-warning-normal: var(--quill-primitive-colour-yellow-solid-500);--quill-semantic-text-warning-static-dark: var(--quill-primitive-colour-yellow-solid-500);--quill-semantic-text-warning-static-light: var(--quill-primitive-colour-yellow-solid-900)}:root{--quill-semantic-border-0: var(--quill-primitive-size-0);--quill-semantic-border-1: var(--quill-primitive-size-1);--quill-semantic-border-2: var(--quill-primitive-size-2);--quill-semantic-border-4: var(--quill-primitive-size-4);--quill-semantic-border-8: var(--quill-primitive-size-8);--quill-semantic-radius-0: var(--quill-primitive-size-0);--quill-semantic-radius-4: var(--quill-primitive-size-4);--quill-semantic-radius-8: var(--quill-primitive-size-8);--quill-semantic-radius-16: var(--quill-primitive-size-16);--quill-semantic-radius-24: var(--quill-primitive-size-24);--quill-semantic-radius-48: var(--quill-primitive-size-48);--quill-semantic-radius-999: var(--quill-primitive-size-999);--quill-semantic-spacing-0: var(--quill-primitive-size-0);--quill-semantic-spacing-2: var(--quill-primitive-size-2);--quill-semantic-spacing-4: var(--quill-primitive-size-4);--quill-semantic-spacing-8: var(--quill-primitive-size-8);--quill-semantic-spacing-16: var(--quill-primitive-size-16);--quill-semantic-spacing-20: var(--quill-primitive-size-20);--quill-semantic-spacing-24: var(--quill-primitive-size-24);--quill-semantic-spacing-32: var(--quill-primitive-size-32);--quill-semantic-spacing-40: var(--quill-primitive-size-40);--quill-semantic-spacing-48: var(--quill-primitive-size-48);--quill-semantic-spacing-56: var(--quill-primitive-size-56);--quill-semantic-spacing-64: var(--quill-primitive-size-64);--quill-semantic-spacing-72: var(--quill-primitive-size-72);--quill-semantic-spacing-80: var(--quill-primitive-size-80);--quill-semantic-width-height-8: var(--quill-primitive-size-8);--quill-semantic-width-height-16: var(--quill-primitive-size-16);--quill-semantic-width-height-24: var(--quill-primitive-size-24);--quill-semantic-width-height-32: var(--quill-primitive-size-32);--quill-semantic-width-height-40: var(--quill-primitive-size-40);--quill-semantic-width-height-48: var(--quill-primitive-size-48);--quill-semantic-width-height-56: var(--quill-primitive-size-56);--quill-semantic-width-height-64: var(--quill-primitive-size-64);--quill-semantic-width-height-72: var(--quill-primitive-size-72);--quill-semantic-width-height-80: var(--quill-primitive-size-80);--quill-semantic-width-height-88: var(--quill-primitive-size-88);--quill-semantic-width-height-96: var(--quill-primitive-size-96)}.quill-container-2fAaK{position:relative;display:flex;flex-direction:column;justify-content:center;gap:var(--quill-semantic-spacing-4);height:var(--quill-semantic-width-height-56);min-width:200px;padding:0 var(--quill-semantic-spacing-16);background:var(--quill-semantic-background-state-default-primary);border:var(--quill-semantic-border-1) solid transparent;border-radius:var(--quill-semantic-radius-16);overflow:hidden;transition:all .2s ease;cursor:text}.quill-container-2fAaK:hover:not(:focus-within){background:var(--quill-semantic-background-state-hover-hover)}.quill-container-2fAaK:active{background:var(--quill-semantic-background-state-pressed-pressed)}.quill-container-2fAaK:focus-within{background:var(--quill-semantic-background-state-default-primary);border-color:var(--quill-semantic-border-selected-normal)}.quill-label-wJo6i{font-family:Inter,sans-serif;font-size:16px;font-weight:400;line-height:normal;color:var(--quill-semantic-text-subtle-normal);transition:font-size .2s ease;cursor:text}.quill-container-2fAaK:focus-within .quill-label-wJo6i,.quill-container-2fAaK.quill-filled-iqW2L .quill-label-wJo6i{font-size:12px}.quill-input-iJZu-{font-family:Inter,sans-serif;font-size:16px;font-weight:400;line-height:normal;color:var(--quill-semantic-text-prominent-normal);border:none;background:transparent;outline:none;padding:0;width:100%}.quill-input-iJZu-::placeholder{color:var(--quill-semantic-text-disabled-normal)}.quill-container-2fAaK:not(:focus-within):not(.quill-filled-iqW2L) .quill-input-iJZu-{height:0;opacity:0}.quill-container-2fAaK:has(input:disabled){opacity:.5;cursor:not-allowed}.quill-container-2fAaK:has(input:disabled):hover{background:var(--quill-semantic-background-state-default-primary)}")),document.head.appendChild(i)}}catch(l){console.error("vite-plugin-css-injected-by-js",l)}})();
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),b=require("react"),V="quill-button-6xc3p",x={"quill-theme-semantic_colour-dark":"quill-quill-theme-semantic_colour-dark-dsrnX",button:V,"button--lg":"quill-button--lg-DVPDm","button--md":"quill-button--md-eH7DY","button--sm":"quill-button--sm-bp5tF"},y=({label:o="Label",size:i="lg",disabled:t=!1,onClick:e,type:l="button",className:c="",children:a,...r})=>{const d=x[`button--${i}`];return s.jsx("button",{type:l,className:`${x.button} ${d} ${c}`,disabled:t,onClick:e,...r,children:a||o})},k="quill-container-2fAaK",v="quill-label-wJo6i",B="quill-filled-iqW2L",N="quill-input-iJZu-",u={container:k,label:v,filled:B,input:N},D=({label:o="Label",placeholder:i="Placeholder",value:t,onChange:e,disabled:l=!1,className:c="",id:a,...r})=>{const[d,$]=b.useState(""),g=b.useId(),f=a||g,m=b.useRef(null),p=t!==void 0?t:d,q=p.length>0,j=n=>{const h=n.target.value;t===void 0&&$(h),e==null||e(h)},I=()=>{var n;l||(n=m.current)==null||n.focus()};return s.jsxs("div",{className:`${u.container} ${q?u.filled:""} ${c}`,onClick:I,children:[s.jsx("label",{htmlFor:f,className:u.label,children:o}),s.jsx("input",{ref:m,id:f,type:"text",className:u.input,placeholder:q?"":i,value:p,onChange:j,disabled:l,...r})]})};exports.ButtonBrand=y;exports.InputTextfield=D;
+//# sourceMappingURL=quill-ui-v2.cjs.map

package/dist/quill-ui-v2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"quill-ui-v2.cjs","sources":["../src/components/button/ButtonBrand.tsx","../src/components/input/InputTextfield.tsx"],"sourcesContent":["import React from 'react';\nimport styles from './ButtonBrand.module.css';\n\nexport interface ButtonBrandProps {\n  /** Button label text */\n  label?: string;\n  \n  /** Button size variant */\n  size?: 'lg' | 'md' | 'sm';\n  \n  /** Disabled state */\n  disabled?: boolean;\n  \n  /** Click handler */\n  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  \n  /** Button type for forms */\n  type?: 'button' | 'submit' | 'reset';\n  \n  /** Additional CSS classes */\n  className?: string;\n  \n  /** Children (alternative to label) */\n  children?: React.ReactNode;\n}\n\nexport const ButtonBrand: React.FC<ButtonBrandProps> = ({\n  label = 'Label',\n  size = 'lg',\n  disabled = false,\n  onClick,\n  type = 'button',\n  className = '',\n  children,\n  ...props\n}) => {\n  const sizeClass = styles[`button--${size}`];\n  \n  return (\n    <button\n      type={type}\n      className={`${styles.button} ${sizeClass} ${className}`}\n      disabled={disabled}\n      onClick={onClick}\n      {...props}\n    >\n      {children || label}\n    </button>\n  );\n};\n","import React, { useState, useId, useRef } from 'react';\nimport styles from './InputTextfield.module.css';\n\nexport interface InputTextfieldProps {\n  label?: string;\n  placeholder?: string;\n  value?: string;\n  onChange?: (value: string) => void;\n  disabled?: boolean;\n  className?: string;\n  id?: string;\n}\n\nexport const InputTextfield: React.FC<InputTextfieldProps> = ({\n  label = 'Label',\n  placeholder = 'Placeholder',\n  value,\n  onChange,\n  disabled = false,\n  className = '',\n  id,\n  ...props\n}) => {\n  const [internalValue, setInternalValue] = useState('');\n  const generatedId = useId();\n  const inputId = id || generatedId;\n  const inputRef = useRef<HTMLInputElement>(null);\n  \n  const currentValue = value !== undefined ? value : internalValue;\n  const hasValue = currentValue.length > 0;\n  \n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const newValue = e.target.value;\n    if (value === undefined) {\n      setInternalValue(newValue);\n    }\n    onChange?.(newValue);\n  };\n  \n  const handleContainerClick = () => {\n    if (!disabled) {\n      inputRef.current?.focus();\n    }\n  };\n  \n  return (\n    <div\n      className={`${styles.container} ${hasValue ? styles.filled : ''} ${className}`}\n      onClick={handleContainerClick}\n    >\n      <label htmlFor={inputId} className={styles.label}>\n        {label}\n      </label>\n      <input\n        ref={inputRef}\n        id={inputId}\n        type=\"text\"\n        className={styles.input}\n        placeholder={hasValue ? '' : placeholder}\n        value={currentValue}\n        onChange={handleChange}\n        disabled={disabled}\n        {...props}\n      />\n    </div>\n  );\n};\n"],"names":["ButtonBrand","label","size","disabled","onClick","type","className","children","props","sizeClass","styles","jsx","InputTextfield","placeholder","value","onChange","id","internalValue","setInternalValue","useState","generatedId","useId","inputId","inputRef","useRef","currentValue","hasValue","handleChange","e","newValue","handleContainerClick","_a","jsxs"],"mappings":"gXA0BaA,EAA0C,CAAC,CACtD,MAAAC,EAAQ,QACR,KAAAC,EAAO,KACP,SAAAC,EAAW,GACX,QAAAC,EACA,KAAAC,EAAO,SACP,UAAAC,EAAY,GACZ,SAAAC,EACA,GAAGC,CACL,IAAM,CACJ,MAAMC,EAAYC,EAAO,WAAWR,CAAI,EAAE,EAE1C,OACES,EAAAA,IAAC,SAAA,CACC,KAAAN,EACA,UAAW,GAAGK,EAAO,MAAM,IAAID,CAAS,IAAIH,CAAS,GACrD,SAAAH,EACA,QAAAC,EACC,GAAGI,EAEH,SAAAD,GAAYN,CAAA,CAAA,CAGnB,wICpCaW,EAAgD,CAAC,CAC5D,MAAAX,EAAQ,QACR,YAAAY,EAAc,cACd,MAAAC,EACA,SAAAC,EACA,SAAAZ,EAAW,GACX,UAAAG,EAAY,GACZ,GAAAU,EACA,GAAGR,CACL,IAAM,CACJ,KAAM,CAACS,EAAeC,CAAgB,EAAIC,EAAAA,SAAS,EAAE,EAC/CC,EAAcC,EAAAA,MAAA,EACdC,EAAUN,GAAMI,EAChBG,EAAWC,EAAAA,OAAyB,IAAI,EAExCC,EAAeX,IAAU,OAAYA,EAAQG,EAC7CS,EAAWD,EAAa,OAAS,EAEjCE,EAAgBC,GAA2C,CAC/D,MAAMC,EAAWD,EAAE,OAAO,MACtBd,IAAU,QACZI,EAAiBW,CAAQ,EAE3Bd,GAAA,MAAAA,EAAWc,EACb,EAEMC,EAAuB,IAAM,OAC5B3B,IACH4B,EAAAR,EAAS,UAAT,MAAAQ,EAAkB,OAEtB,EAEA,OACEC,EAAAA,KAAC,MAAA,CACC,UAAW,GAAGtB,EAAO,SAAS,IAAIgB,EAAWhB,EAAO,OAAS,EAAE,IAAIJ,CAAS,GAC5E,QAASwB,EAET,SAAA,CAAAnB,MAAC,SAAM,QAASW,EAAS,UAAWZ,EAAO,MACxC,SAAAT,EACH,EACAU,EAAAA,IAAC,QAAA,CACC,IAAKY,EACL,GAAID,EACJ,KAAK,OACL,UAAWZ,EAAO,MAClB,YAAagB,EAAW,GAAKb,EAC7B,MAAOY,EACP,SAAUE,EACV,SAAAxB,EACC,GAAGK,CAAA,CAAA,CACN,CAAA,CAAA,CAGN"}

package/dist/quill-ui-v2.mjs

@@ -0,0 +1,83 @@
+(function(){"use strict";try{if(typeof document<"u"){var i=document.createElement("style");i.appendChild(document.createTextNode(".quill-theme-semantic_colour-dark{--quill-semantic-background-action-brand-hover: var(--quill-primitive-colour-coral-solid-800);--quill-semantic-background-action-brand-normal: var(--quill-primitive-colour-coral-solid-700);--quill-semantic-background-action-brand-pressed: var(--quill-primitive-colour-coral-solid-900);--quill-semantic-background-action-disabled-inverse: var(--quill-primitive-colour-slate-solid-100);--quill-semantic-background-action-disabled-normal: var(--quill-primitive-colour-slate-solid-1100);--quill-semantic-background-action-disabled-static-dark: var(--quill-primitive-colour-slate-solid-100);--quill-semantic-background-action-disabled-static-light: var(--quill-primitive-colour-slate-solid-1100);--quill-semantic-background-action-secondary-inverse: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-background-action-secondary-normal: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-background-action-secondary-static-dark: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-background-action-secondary-static-light: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-background-action-tertiary-inverse: var(--quill-primitive-colour-slate-solid-200);--quill-semantic-background-action-tertiary-normal: var(--quill-primitive-colour-slate-solid-900);--quill-semantic-background-action-tertiary-static-dark: var(--quill-primitive-colour-slate-solid-200);--quill-semantic-background-action-tertiary-static-light: var(--quill-primitive-colour-slate-solid-900);--quill-semantic-background-canvas-primary: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-background-canvas-secondary: var(--quill-primitive-colour-slate-solid-1100);--quill-semantic-background-feedback-neutral-opacity: var(--quill-primitive-colour-white-opacity-100);--quill-semantic-background-feedback-opacity-error: var(--quill-primitive-colour-red-opacity-300);--quill-semantic-background-feedback-opacity-information: var(--quill-primitive-colour-blue-opacity-300);--quill-semantic-background-feedback-opacity-neutral: var(--quill-primitive-colour-white-opacity-100);--quill-semantic-background-feedback-opacity-opacity: var(--quill-primitive-colour-green-opacity-300);--quill-semantic-background-feedback-opacity-success: var(--quill-primitive-colour-green-opacity-300);--quill-semantic-background-feedback-opacity-warning: var(--quill-primitive-colour-yellow-opacity-300);--quill-semantic-background-feedback-solid-error-inverse: var(--quill-primitive-colour-red-solid-1100);--quill-semantic-background-feedback-solid-error-normal: var(--quill-primitive-colour-red-solid-500);--quill-semantic-background-feedback-solid-error-static-dark: var(--quill-primitive-colour-red-solid-500);--quill-semantic-background-feedback-solid-error-static-light: var(--quill-primitive-colour-red-solid-1100);--quill-semantic-background-feedback-solid-information-inverse: var(--quill-primitive-colour-blue-solid-1100);--quill-semantic-background-feedback-solid-information-normal: var(--quill-primitive-colour-blue-solid-500);--quill-semantic-background-feedback-solid-information-static-dark: var(--quill-primitive-colour-blue-solid-500);--quill-semantic-background-feedback-solid-information-static-light: var(--quill-primitive-colour-blue-solid-1100);--quill-semantic-background-feedback-solid-neutral-inverse: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-background-feedback-solid-neutral-normal: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-background-feedback-solid-neutral-static-dark: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-background-feedback-solid-neutral-static-light: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-background-feedback-solid-success-inverse: var(--quill-primitive-colour-green-solid-1100);--quill-semantic-background-feedback-solid-success-normal: var(--quill-primitive-colour-green-solid-500);--quill-semantic-background-feedback-solid-success-static-dark: var(--quill-primitive-colour-green-solid-500);--quill-semantic-background-feedback-solid-success-static-light: var(--quill-primitive-colour-green-solid-1100);--quill-semantic-background-feedback-solid-warning-inverse: var(--quill-primitive-colour-yellow-solid-1100);--quill-semantic-background-feedback-solid-warning-normal: var(--quill-primitive-colour-yellow-solid-500);--quill-semantic-background-feedback-solid-warning-static-dark: var(--quill-primitive-colour-yellow-solid-500);--quill-semantic-background-feedback-solid-warning-static-light: var(--quill-primitive-colour-yellow-solid-1100);--quill-semantic-background-foundation-primary-canvas: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-background-foundation-primary-surface: var(--quill-primitive-colour-slate-solid-1100);--quill-semantic-background-foundation-secondary-canvas: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-background-foundation-secondary-surface: var(--quill-primitive-colour-slate-solid-1100);--quill-semantic-background-state-default-primary: var(--quill-primitive-colour-white-opacity-75);--quill-semantic-background-state-default-secondary: var(--quill-primitive-colour-white-opacity-75);--quill-semantic-background-state-dragged-dragged: var(--quill-primitive-colour-white-opacity-200);--quill-semantic-background-state-hover-hover: var(--quill-primitive-colour-white-opacity-100);--quill-semantic-background-state-pressed-pressed: var(--quill-primitive-colour-white-opacity-200);--quill-semantic-background-state-selected-selected: var(--quill-primitive-colour-white-opacity-100);--quill-semantic-background-surface: var(--quill-primitive-colour-slate-solid-1100);--quill-semantic-border-error-inverse: var(--quill-primitive-colour-red-solid-900);--quill-semantic-border-error-normal: var(--quill-primitive-colour-red-solid-500);--quill-semantic-border-error-static-dark: var(--quill-primitive-colour-red-solid-500);--quill-semantic-border-error-static-light: var(--quill-primitive-colour-red-solid-900);--quill-semantic-border-information-inverse: var(--quill-primitive-colour-blue-solid-900);--quill-semantic-border-information-normal: var(--quill-primitive-colour-blue-solid-500);--quill-semantic-border-information-static-dark: var(--quill-primitive-colour-blue-solid-500);--quill-semantic-border-information-static-light: var(--quill-primitive-colour-blue-solid-900);--quill-semantic-border-normal-primary: var(--quill-primitive-colour-white-opacity-200);--quill-semantic-border-normal-secondary: var(--quill-primitive-colour-white-opacity-100);--quill-semantic-border-prominent-inverse: var(--quill-primitive-colour-slate-opacity-200);--quill-semantic-border-prominent-normal: var(--quill-primitive-colour-white-opacity-200);--quill-semantic-border-prominent-static-dark: var(--quill-primitive-colour-white-opacity-200);--quill-semantic-border-prominent-static-light: var(--quill-primitive-colour-slate-opacity-200);--quill-semantic-border-selected-inverse: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-border-selected-normal: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-border-selected-static-dark: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-border-selected-static-light: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-border-subtle-inverse: var(--quill-primitive-colour-slate-opacity-100);--quill-semantic-border-subtle-normal: var(--quill-primitive-colour-white-opacity-100);--quill-semantic-border-subtle-static-dark: var(--quill-primitive-colour-white-opacity-100);--quill-semantic-border-subtle-static-light: var(--quill-primitive-colour-slate-opacity-100);--quill-semantic-border-success-inverse: var(--quill-primitive-colour-green-solid-900);--quill-semantic-border-success-normal: var(--quill-primitive-colour-green-solid-500);--quill-semantic-border-success-static-dark: var(--quill-primitive-colour-green-solid-500);--quill-semantic-border-success-static-light: var(--quill-primitive-colour-green-solid-900);--quill-semantic-border-warning-inverse: var(--quill-primitive-colour-yellow-solid-900);--quill-semantic-border-warning-normal: var(--quill-primitive-colour-yellow-solid-500);--quill-semantic-border-warning-static-dark: var(--quill-primitive-colour-yellow-solid-500);--quill-semantic-border-warning-static-light: var(--quill-primitive-colour-yellow-solid-900);--quill-semantic-text-disabled-inverse: var(--quill-primitive-colour-slate-opacity-200);--quill-semantic-text-disabled-normal: var(--quill-primitive-colour-white-opacity-200);--quill-semantic-text-disabled-static-dark: var(--quill-primitive-colour-white-opacity-200);--quill-semantic-text-disabled-static-light: var(--quill-primitive-colour-slate-opacity-200);--quill-semantic-text-error-inverse: var(--quill-primitive-colour-red-solid-900);--quill-semantic-text-error-normal: var(--quill-primitive-colour-red-solid-500);--quill-semantic-text-error-static-dark: var(--quill-primitive-colour-red-solid-500);--quill-semantic-text-error-static-light: var(--quill-primitive-colour-red-solid-900);--quill-semantic-text-information-inverse: var(--quill-primitive-colour-blue-solid-900);--quill-semantic-text-information-normal: var(--quill-primitive-colour-blue-solid-500);--quill-semantic-text-information-static-dark: var(--quill-primitive-colour-blue-solid-500);--quill-semantic-text-information-static-light: var(--quill-primitive-colour-blue-solid-900);--quill-semantic-text-prominent-inverse: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-text-prominent-normal: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-text-prominent-static-dark: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-text-prominent-static-light: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-text-subtle-inverse: var(--quill-primitive-colour-slate-opacity-400);--quill-semantic-text-subtle-normal: var(--quill-primitive-colour-white-opacity-400);--quill-semantic-text-subtle-static-dark: var(--quill-primitive-colour-white-opacity-400);--quill-semantic-text-subtle-static-light: var(--quill-primitive-colour-slate-opacity-400);--quill-semantic-text-success-inverse: var(--quill-primitive-colour-green-solid-900);--quill-semantic-text-success-normal: var(--quill-primitive-colour-green-solid-500);--quill-semantic-text-success-static-dark: var(--quill-primitive-colour-green-solid-500);--quill-semantic-text-success-static-light: var(--quill-primitive-colour-green-solid-900);--quill-semantic-text-utility-brand: var(--quill-primitive-colour-coral-solid-700);--quill-semantic-text-utility-demo: var(--quill-primitive-colour-orange-solid-700);--quill-semantic-text-utility-real: var(--quill-primitive-colour-emerald-solid-700);--quill-semantic-text-warning-inverse: var(--quill-primitive-colour-yellow-solid-900);--quill-semantic-text-warning-normal: var(--quill-primitive-colour-yellow-solid-500);--quill-semantic-text-warning-static-dark: var(--quill-primitive-colour-yellow-solid-500);--quill-semantic-text-warning-static-light: var(--quill-primitive-colour-yellow-solid-900)}.quill-quill-theme-semantic_colour-dark-dsrnX{--quill-semantic-background-action-brand-hover: var(--quill-primitive-colour-coral-solid-800);--quill-semantic-background-action-brand-normal: var(--quill-primitive-colour-coral-solid-700);--quill-semantic-background-action-brand-pressed: var(--quill-primitive-colour-coral-solid-900);--quill-semantic-background-action-disabled-inverse: var(--quill-primitive-colour-slate-solid-100);--quill-semantic-background-action-disabled-normal: var(--quill-primitive-colour-slate-solid-1100);--quill-semantic-background-action-disabled-static-dark: var(--quill-primitive-colour-slate-solid-100);--quill-semantic-background-action-disabled-static-light: var(--quill-primitive-colour-slate-solid-1100);--quill-semantic-background-action-secondary-inverse: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-background-action-secondary-normal: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-background-action-secondary-static-dark: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-background-action-secondary-static-light: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-background-action-tertiary-inverse: var(--quill-primitive-colour-slate-solid-200);--quill-semantic-background-action-tertiary-normal: var(--quill-primitive-colour-slate-solid-900);--quill-semantic-background-action-tertiary-static-dark: var(--quill-primitive-colour-slate-solid-200);--quill-semantic-background-action-tertiary-static-light: var(--quill-primitive-colour-slate-solid-900);--quill-semantic-background-canvas-primary: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-background-canvas-secondary: var(--quill-primitive-colour-slate-solid-1100);--quill-semantic-background-feedback-neutral-opacity: var(--quill-primitive-colour-white-opacity-100);--quill-semantic-background-feedback-opacity-error: var(--quill-primitive-colour-red-opacity-300);--quill-semantic-background-feedback-opacity-information: var(--quill-primitive-colour-blue-opacity-300);--quill-semantic-background-feedback-opacity-neutral: var(--quill-primitive-colour-white-opacity-100);--quill-semantic-background-feedback-opacity-opacity: var(--quill-primitive-colour-green-opacity-300);--quill-semantic-background-feedback-opacity-success: var(--quill-primitive-colour-green-opacity-300);--quill-semantic-background-feedback-opacity-warning: var(--quill-primitive-colour-yellow-opacity-300);--quill-semantic-background-feedback-solid-error-inverse: var(--quill-primitive-colour-red-solid-1100);--quill-semantic-background-feedback-solid-error-normal: var(--quill-primitive-colour-red-solid-500);--quill-semantic-background-feedback-solid-error-static-dark: var(--quill-primitive-colour-red-solid-500);--quill-semantic-background-feedback-solid-error-static-light: var(--quill-primitive-colour-red-solid-1100);--quill-semantic-background-feedback-solid-information-inverse: var(--quill-primitive-colour-blue-solid-1100);--quill-semantic-background-feedback-solid-information-normal: var(--quill-primitive-colour-blue-solid-500);--quill-semantic-background-feedback-solid-information-static-dark: var(--quill-primitive-colour-blue-solid-500);--quill-semantic-background-feedback-solid-information-static-light: var(--quill-primitive-colour-blue-solid-1100);--quill-semantic-background-feedback-solid-neutral-inverse: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-background-feedback-solid-neutral-normal: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-background-feedback-solid-neutral-static-dark: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-background-feedback-solid-neutral-static-light: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-background-feedback-solid-success-inverse: var(--quill-primitive-colour-green-solid-1100);--quill-semantic-background-feedback-solid-success-normal: var(--quill-primitive-colour-green-solid-500);--quill-semantic-background-feedback-solid-success-static-dark: var(--quill-primitive-colour-green-solid-500);--quill-semantic-background-feedback-solid-success-static-light: var(--quill-primitive-colour-green-solid-1100);--quill-semantic-background-feedback-solid-warning-inverse: var(--quill-primitive-colour-yellow-solid-1100);--quill-semantic-background-feedback-solid-warning-normal: var(--quill-primitive-colour-yellow-solid-500);--quill-semantic-background-feedback-solid-warning-static-dark: var(--quill-primitive-colour-yellow-solid-500);--quill-semantic-background-feedback-solid-warning-static-light: var(--quill-primitive-colour-yellow-solid-1100);--quill-semantic-background-foundation-primary-canvas: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-background-foundation-primary-surface: var(--quill-primitive-colour-slate-solid-1100);--quill-semantic-background-foundation-secondary-canvas: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-background-foundation-secondary-surface: var(--quill-primitive-colour-slate-solid-1100);--quill-semantic-background-state-default-primary: var(--quill-primitive-colour-white-opacity-75);--quill-semantic-background-state-default-secondary: var(--quill-primitive-colour-white-opacity-75);--quill-semantic-background-state-dragged-dragged: var(--quill-primitive-colour-white-opacity-200);--quill-semantic-background-state-hover-hover: var(--quill-primitive-colour-white-opacity-100);--quill-semantic-background-state-pressed-pressed: var(--quill-primitive-colour-white-opacity-200);--quill-semantic-background-state-selected-selected: var(--quill-primitive-colour-white-opacity-100);--quill-semantic-background-surface: var(--quill-primitive-colour-slate-solid-1100);--quill-semantic-border-error-inverse: var(--quill-primitive-colour-red-solid-900);--quill-semantic-border-error-normal: var(--quill-primitive-colour-red-solid-500);--quill-semantic-border-error-static-dark: var(--quill-primitive-colour-red-solid-500);--quill-semantic-border-error-static-light: var(--quill-primitive-colour-red-solid-900);--quill-semantic-border-information-inverse: var(--quill-primitive-colour-blue-solid-900);--quill-semantic-border-information-normal: var(--quill-primitive-colour-blue-solid-500);--quill-semantic-border-information-static-dark: var(--quill-primitive-colour-blue-solid-500);--quill-semantic-border-information-static-light: var(--quill-primitive-colour-blue-solid-900);--quill-semantic-border-normal-primary: var(--quill-primitive-colour-white-opacity-200);--quill-semantic-border-normal-secondary: var(--quill-primitive-colour-white-opacity-100);--quill-semantic-border-prominent-inverse: var(--quill-primitive-colour-slate-opacity-200);--quill-semantic-border-prominent-normal: var(--quill-primitive-colour-white-opacity-200);--quill-semantic-border-prominent-static-dark: var(--quill-primitive-colour-white-opacity-200);--quill-semantic-border-prominent-static-light: var(--quill-primitive-colour-slate-opacity-200);--quill-semantic-border-selected-inverse: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-border-selected-normal: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-border-selected-static-dark: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-border-selected-static-light: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-border-subtle-inverse: var(--quill-primitive-colour-slate-opacity-100);--quill-semantic-border-subtle-normal: var(--quill-primitive-colour-white-opacity-100);--quill-semantic-border-subtle-static-dark: var(--quill-primitive-colour-white-opacity-100);--quill-semantic-border-subtle-static-light: var(--quill-primitive-colour-slate-opacity-100);--quill-semantic-border-success-inverse: var(--quill-primitive-colour-green-solid-900);--quill-semantic-border-success-normal: var(--quill-primitive-colour-green-solid-500);--quill-semantic-border-success-static-dark: var(--quill-primitive-colour-green-solid-500);--quill-semantic-border-success-static-light: var(--quill-primitive-colour-green-solid-900);--quill-semantic-border-warning-inverse: var(--quill-primitive-colour-yellow-solid-900);--quill-semantic-border-warning-normal: var(--quill-primitive-colour-yellow-solid-500);--quill-semantic-border-warning-static-dark: var(--quill-primitive-colour-yellow-solid-500);--quill-semantic-border-warning-static-light: var(--quill-primitive-colour-yellow-solid-900);--quill-semantic-text-disabled-inverse: var(--quill-primitive-colour-slate-opacity-200);--quill-semantic-text-disabled-normal: var(--quill-primitive-colour-white-opacity-200);--quill-semantic-text-disabled-static-dark: var(--quill-primitive-colour-white-opacity-200);--quill-semantic-text-disabled-static-light: var(--quill-primitive-colour-slate-opacity-200);--quill-semantic-text-error-inverse: var(--quill-primitive-colour-red-solid-900);--quill-semantic-text-error-normal: var(--quill-primitive-colour-red-solid-500);--quill-semantic-text-error-static-dark: var(--quill-primitive-colour-red-solid-500);--quill-semantic-text-error-static-light: var(--quill-primitive-colour-red-solid-900);--quill-semantic-text-information-inverse: var(--quill-primitive-colour-blue-solid-900);--quill-semantic-text-information-normal: var(--quill-primitive-colour-blue-solid-500);--quill-semantic-text-information-static-dark: var(--quill-primitive-colour-blue-solid-500);--quill-semantic-text-information-static-light: var(--quill-primitive-colour-blue-solid-900);--quill-semantic-text-prominent-inverse: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-text-prominent-normal: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-text-prominent-static-dark: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-text-prominent-static-light: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-text-subtle-inverse: var(--quill-primitive-colour-slate-opacity-400);--quill-semantic-text-subtle-normal: var(--quill-primitive-colour-white-opacity-400);--quill-semantic-text-subtle-static-dark: var(--quill-primitive-colour-white-opacity-400);--quill-semantic-text-subtle-static-light: var(--quill-primitive-colour-slate-opacity-400);--quill-semantic-text-success-inverse: var(--quill-primitive-colour-green-solid-900);--quill-semantic-text-success-normal: var(--quill-primitive-colour-green-solid-500);--quill-semantic-text-success-static-dark: var(--quill-primitive-colour-green-solid-500);--quill-semantic-text-success-static-light: var(--quill-primitive-colour-green-solid-900);--quill-semantic-text-utility-brand: var(--quill-primitive-colour-coral-solid-700);--quill-semantic-text-utility-demo: var(--quill-primitive-colour-orange-solid-700);--quill-semantic-text-utility-real: var(--quill-primitive-colour-emerald-solid-700);--quill-semantic-text-warning-inverse: var(--quill-primitive-colour-yellow-solid-900);--quill-semantic-text-warning-normal: var(--quill-primitive-colour-yellow-solid-500);--quill-semantic-text-warning-static-dark: var(--quill-primitive-colour-yellow-solid-500);--quill-semantic-text-warning-static-light: var(--quill-primitive-colour-yellow-solid-900)}.quill-button-6xc3p{display:flex;align-items:center;justify-content:center;font-family:Inter,sans-serif;font-weight:600;text-align:center;white-space:nowrap;line-height:normal;border:none;border-radius:var(--quill-semantic-radius-999);background:var(--quill-semantic-background-action-brand-normal);color:var(--quill-semantic-text-prominent-static-dark);cursor:pointer;transition:background-color .2s ease;outline:none;text-decoration:none}.quill-button--lg-DVPDm{height:var(--quill-semantic-width-height-48);min-width:var(--quill-semantic-width-height-96);padding:0 var(--quill-semantic-spacing-24);font-size:16px}.quill-button--md-eH7DY{height:var(--quill-semantic-width-height-40);min-width:var(--quill-semantic-width-height-80);padding:0 var(--quill-semantic-spacing-20);font-size:14px}.quill-button--sm-bp5tF{height:var(--quill-semantic-width-height-32);min-width:var(--quill-semantic-width-height-64);padding:0 var(--quill-semantic-spacing-16);font-size:14px}.quill-button-6xc3p:hover:not(:disabled){background:var(--quill-semantic-background-action-brand-hover)}.quill-button-6xc3p:active:not(:disabled){background:var(--quill-semantic-background-action-brand-pressed)}.quill-button-6xc3p:disabled{background:var(--quill-semantic-background-action-disabled-normal);color:var(--quill-semantic-text-disabled-normal);cursor:not-allowed}.quill-button-6xc3p:focus-visible{outline:2px solid var(--quill-semantic-border-selected-normal);outline-offset:2px}:root{--quill-primitive-colour-black-opacity-50: #00000000;--quill-primitive-colour-black-opacity-75: #0000000a;--quill-primitive-colour-black-opacity-100: #00000014;--quill-primitive-colour-black-opacity-200: #00000029;--quill-primitive-colour-black-opacity-300: #0000003d;--quill-primitive-colour-black-opacity-400: #0000007a;--quill-primitive-colour-black-opacity-500: #0000008f;--quill-primitive-colour-black-opacity-600: #000000b8;--quill-primitive-colour-black-opacity-700: #000000cc;--quill-primitive-colour-black-opacity-800: #000000e0;--quill-primitive-colour-blue-opacity-50: #2c9aff00;--quill-primitive-colour-blue-opacity-75: #2c9aff0a;--quill-primitive-colour-blue-opacity-100: #2c9aff14;--quill-primitive-colour-blue-opacity-200: #2c9aff29;--quill-primitive-colour-blue-opacity-300: #2c9aff3d;--quill-primitive-colour-blue-opacity-400: #2c9aff7a;--quill-primitive-colour-blue-opacity-500: #2c9aff8f;--quill-primitive-colour-blue-opacity-600: #2c9affb8;--quill-primitive-colour-blue-opacity-700: #2c9affcc;--quill-primitive-colour-blue-opacity-800: #2c9affe0;--quill-primitive-colour-blue-solid-100: #e6f5ff;--quill-primitive-colour-blue-solid-200: #bfe7ff;--quill-primitive-colour-blue-solid-300: #99d8ff;--quill-primitive-colour-blue-solid-400: #73c9ff;--quill-primitive-colour-blue-solid-500: #53b9ff;--quill-primitive-colour-blue-solid-600: #3daaff;--quill-primitive-colour-blue-solid-700: #2c9aff;--quill-primitive-colour-blue-solid-800: #1789e1;--quill-primitive-colour-blue-solid-900: #0777c4;--quill-primitive-colour-blue-solid-1000: #0066a6;--quill-primitive-colour-blue-solid-1100: #005488;--quill-primitive-colour-blue-solid-1200: #00426a;--quill-primitive-colour-blue-solid-1300: #00304d;--quill-primitive-colour-blueberry-opacity-50: #4902e000;--quill-primitive-colour-blueberry-opacity-75: #4902e00a;--quill-primitive-colour-blueberry-opacity-100: #4902e014;--quill-primitive-colour-blueberry-opacity-200: #4902e029;--quill-primitive-colour-blueberry-opacity-300: #4902e03d;--quill-primitive-colour-blueberry-opacity-400: #4902e07a;--quill-primitive-colour-blueberry-opacity-500: #4902e08f;--quill-primitive-colour-blueberry-opacity-600: #4902e0b8;--quill-primitive-colour-blueberry-opacity-700: #4902e0cc;--quill-primitive-colour-blueberry-opacity-800: #4902e0e0;--quill-primitive-colour-blueberry-solid-100: #ede6fc;--quill-primitive-colour-blueberry-solid-200: #d2c0f7;--quill-primitive-colour-blueberry-solid-300: #b69af3;--quill-primitive-colour-blueberry-solid-400: #9b74ee;--quill-primitive-colour-blueberry-solid-500: #804ee9;--quill-primitive-colour-blueberry-solid-600: #6428e5;--quill-primitive-colour-blueberry-solid-700: #4902e0;--quill-primitive-colour-blueberry-solid-800: #4102c6;--quill-primitive-colour-blueberry-solid-900: #3802ac;--quill-primitive-colour-blueberry-solid-1000: #2f0192;--quill-primitive-colour-blueberry-solid-1100: #270178;--quill-primitive-colour-blueberry-solid-1200: #1e015d;--quill-primitive-colour-blueberry-solid-1300: #160143;--quill-primitive-colour-cherry-opacity-50: #de004000;--quill-primitive-colour-cherry-opacity-75: #de00400a;--quill-primitive-colour-cherry-opacity-100: #de004014;--quill-primitive-colour-cherry-opacity-200: #de004029;--quill-primitive-colour-cherry-opacity-300: #de00403d;--quill-primitive-colour-cherry-opacity-400: #de00407a;--quill-primitive-colour-cherry-opacity-500: #de00408f;--quill-primitive-colour-cherry-opacity-600: #de0040b8;--quill-primitive-colour-cherry-opacity-700: #de0040cc;--quill-primitive-colour-cherry-opacity-800: #de0040e0;--quill-primitive-colour-cherry-solid-100: #ffe6e7;--quill-primitive-colour-cherry-solid-200: #ffbfc6;--quill-primitive-colour-cherry-solid-300: #ff99a6;--quill-primitive-colour-cherry-solid-400: #ff7389;--quill-primitive-colour-cherry-solid-500: #ff4d6e;--quill-primitive-colour-cherry-solid-600: #f32656;--quill-primitive-colour-cherry-solid-700: #de0040;--quill-primitive-colour-cherry-solid-800: #d40032;--quill-primitive-colour-cherry-solid-900: #c40025;--quill-primitive-colour-cherry-solid-1000: #a6001a;--quill-primitive-colour-cherry-solid-1100: #880011;--quill-primitive-colour-cherry-solid-1200: #6a000a;--quill-primitive-colour-cherry-solid-1300: #4d0005;--quill-primitive-colour-coral-opacity-50: #ff444f00;--quill-primitive-colour-coral-opacity-75: #ff444f0a;--quill-primitive-colour-coral-opacity-100: #ff444f14;--quill-primitive-colour-coral-opacity-200: #ff444f29;--quill-primitive-colour-coral-opacity-300: #ff444f3d;--quill-primitive-colour-coral-opacity-400: #ff444f7a;--quill-primitive-colour-coral-opacity-500: #ff444f8f;--quill-primitive-colour-coral-opacity-600: #ff444fb8;--quill-primitive-colour-coral-opacity-700: #ff444fcc;--quill-primitive-colour-coral-opacity-800: #de0040e0;--quill-primitive-colour-coral-solid-100: #ffe6e6;--quill-primitive-colour-coral-solid-200: #ffbfc2;--quill-primitive-colour-coral-solid-300: #ff9ba3;--quill-primitive-colour-coral-solid-400: #ff7e88;--quill-primitive-colour-coral-solid-500: #ff6671;--quill-primitive-colour-coral-solid-600: #ff535e;--quill-primitive-colour-coral-solid-700: #ff444f;--quill-primitive-colour-coral-solid-800: #e12e3a;--quill-primitive-colour-coral-solid-900: #c41c28;--quill-primitive-colour-coral-solid-1000: #a60e19;--quill-primitive-colour-coral-solid-1100: #88030d;--quill-primitive-colour-coral-solid-1200: #6a0004;--quill-primitive-colour-coral-solid-1300: #4d0000;--quill-primitive-colour-emerald-opacity-50: #00c39000;--quill-primitive-colour-emerald-opacity-75: #00c3900a;--quill-primitive-colour-emerald-opacity-100: #00c39014;--quill-primitive-colour-emerald-opacity-200: #00c39029;--quill-primitive-colour-emerald-opacity-300: #00c3903d;--quill-primitive-colour-emerald-opacity-400: #00c3907a;--quill-primitive-colour-emerald-opacity-500: #00c3908f;--quill-primitive-colour-emerald-opacity-600: #00c390b8;--quill-primitive-colour-emerald-opacity-700: #00c390cc;--quill-primitive-colour-emerald-opacity-800: #00c390e0;--quill-primitive-colour-emerald-solid-100: #e6fff9;--quill-primitive-colour-emerald-solid-200: #bfffed;--quill-primitive-colour-emerald-solid-300: #99ffdf;--quill-primitive-colour-emerald-solid-400: #73f9cf;--quill-primitive-colour-emerald-solid-500: #4decbc;--quill-primitive-colour-emerald-solid-600: #26daa7;--quill-primitive-colour-emerald-solid-700: #00c390;--quill-primitive-colour-emerald-solid-800: #00bb86;--quill-primitive-colour-emerald-solid-900: #00ae7a;--quill-primitive-colour-emerald-solid-1000: #009e6d;--quill-primitive-colour-emerald-solid-1100: #00885d;--quill-primitive-colour-emerald-solid-1200: #006a4c;--quill-primitive-colour-emerald-solid-1300: #004d39;--quill-primitive-colour-grape-opacity-50: #7f0dcf00;--quill-primitive-colour-grape-opacity-75: #7f0dcf0a;--quill-primitive-colour-grape-opacity-100: #7f0dcf14;--quill-primitive-colour-grape-opacity-200: #7f0dcf29;--quill-primitive-colour-grape-opacity-300: #7f0dcf3d;--quill-primitive-colour-grape-opacity-400: #7f0dcf7a;--quill-primitive-colour-grape-opacity-500: #7f0dcf8f;--quill-primitive-colour-grape-opacity-600: #7f0dcfb8;--quill-primitive-colour-grape-opacity-700: #7f0dcfcc;--quill-primitive-colour-grape-opacity-800: #7f0dcfe0;--quill-primitive-colour-grape-solid-100: #f2e7fa;--quill-primitive-colour-grape-solid-200: #dfc3f3;--quill-primitive-colour-grape-solid-300: #cc9eec;--quill-primitive-colour-grape-solid-400: #b97ae5;--quill-primitive-colour-grape-solid-500: #a556dd;--quill-primitive-colour-grape-solid-600: #9231d6;--quill-primitive-colour-grape-solid-700: #7f0dcf;--quill-primitive-colour-grape-solid-800: #700cb7;--quill-primitive-colour-grape-solid-900: #610a9f;--quill-primitive-colour-grape-solid-1000: #530987;--quill-primitive-colour-grape-solid-1100: #44076e;--quill-primitive-colour-grape-solid-1200: #350556;--quill-primitive-colour-grape-solid-1300: #26043e;--quill-primitive-colour-green-opacity-50: #00883200;--quill-primitive-colour-green-opacity-75: #0088320a;--quill-primitive-colour-green-opacity-100: #00883214;--quill-primitive-colour-green-opacity-200: #00883229;--quill-primitive-colour-green-opacity-300: #0088323d;--quill-primitive-colour-green-opacity-400: #0088327a;--quill-primitive-colour-green-opacity-500: #0088328f;--quill-primitive-colour-green-opacity-600: #008832b8;--quill-primitive-colour-green-opacity-700: #008832cc;--quill-primitive-colour-green-opacity-800: #008832e0;--quill-primitive-colour-green-solid-100: #e6fae9;--quill-primitive-colour-green-solid-200: #bfefc8;--quill-primitive-colour-green-solid-300: #99e2a8;--quill-primitive-colour-green-solid-400: #73d089;--quill-primitive-colour-green-solid-500: #4dbc6b;--quill-primitive-colour-green-solid-600: #26a44e;--quill-primitive-colour-green-solid-700: #008832;--quill-primitive-colour-green-solid-800: #00822a;--quill-primitive-colour-green-solid-900: #007a22;--quill-primitive-colour-green-solid-1000: #006f1b;--quill-primitive-colour-green-solid-1100: #006114;--quill-primitive-colour-green-solid-1200: #00500f;--quill-primitive-colour-green-solid-1300: #003d0a;--quill-primitive-colour-magenta-opacity-50: #cb0df700;--quill-primitive-colour-magenta-opacity-75: #cb0df70a;--quill-primitive-colour-magenta-opacity-100: #cb0df714;--quill-primitive-colour-magenta-opacity-200: #cb0df729;--quill-primitive-colour-magenta-opacity-300: #cb0df73d;--quill-primitive-colour-magenta-opacity-400: #cb0df77a;--quill-primitive-colour-magenta-opacity-500: #cb0df78f;--quill-primitive-colour-magenta-opacity-600: #cb0df7b8;--quill-primitive-colour-magenta-opacity-700: #cb0df7cc;--quill-primitive-colour-magenta-opacity-800: #cb0df7e0;--quill-primitive-colour-magenta-solid-100: #fae7fe;--quill-primitive-colour-magenta-solid-200: #f2c3fd;--quill-primitive-colour-magenta-solid-300: #ea9efc;--quill-primitive-colour-magenta-solid-400: #e27afb;--quill-primitive-colour-magenta-solid-500: #db56f9;--quill-primitive-colour-magenta-solid-600: #d331f8;--quill-primitive-colour-magenta-solid-700: #cb0df7;--quill-primitive-colour-magenta-solid-800: #b30cda;--quill-primitive-colour-magenta-solid-900: #9c0abd;--quill-primitive-colour-magenta-solid-1000: #8409a1;--quill-primitive-colour-magenta-solid-1100: #6c0784;--quill-primitive-colour-magenta-solid-1200: #550567;--quill-primitive-colour-magenta-solid-1300: #3d044a;--quill-primitive-colour-mustard-opacity-50: #f7c60b00;--quill-primitive-colour-mustard-opacity-75: #f7c60b0a;--quill-primitive-colour-mustard-opacity-100: #f7c60b14;--quill-primitive-colour-mustard-opacity-200: #f7c60b29;--quill-primitive-colour-mustard-opacity-300: #f7c60b3d;--quill-primitive-colour-mustard-opacity-400: #f7c60b7a;--quill-primitive-colour-mustard-opacity-500: #f7c60b8f;--quill-primitive-colour-mustard-opacity-600: #f7c60bb8;--quill-primitive-colour-mustard-opacity-700: #f7c60bcc;--quill-primitive-colour-mustard-opacity-800: #f7c60be0;--quill-primitive-colour-mustard-solid-100: #fef9e7;--quill-primitive-colour-mustard-solid-200: #fdf1c2;--quill-primitive-colour-mustard-solid-300: #fce89d;--quill-primitive-colour-mustard-solid-400: #fbe079;--quill-primitive-colour-mustard-solid-500: #f9d754;--quill-primitive-colour-mustard-solid-600: #f8cf30;--quill-primitive-colour-mustard-solid-700: #f7c60b;--quill-primitive-colour-mustard-solid-800: #daaf0a;--quill-primitive-colour-mustard-solid-900: #bd9808;--quill-primitive-colour-mustard-solid-1000: #a18107;--quill-primitive-colour-mustard-solid-1100: #846a06;--quill-primitive-colour-mustard-solid-1200: #675305;--quill-primitive-colour-mustard-solid-1300: #4a3b03;--quill-primitive-colour-orange-opacity-50: #f55f0a00;--quill-primitive-colour-orange-opacity-75: #f55f0a0a;--quill-primitive-colour-orange-opacity-100: #f55f0a14;--quill-primitive-colour-orange-opacity-200: #f55f0a29;--quill-primitive-colour-orange-opacity-300: #f55f0a3d;--quill-primitive-colour-orange-opacity-400: #f55f0a7a;--quill-primitive-colour-orange-opacity-500: #f55f0a8f;--quill-primitive-colour-orange-opacity-600: #f55f0ab8;--quill-primitive-colour-orange-opacity-700: #f55f0acc;--quill-primitive-colour-orange-opacity-800: #f55f0ae0;--quill-primitive-colour-orange-solid-100: #feefe7;--quill-primitive-colour-orange-solid-200: #fdd7c2;--quill-primitive-colour-orange-solid-300: #fbbf9d;--quill-primitive-colour-orange-solid-400: #faa778;--quill-primitive-colour-orange-solid-500: #f88f54;--quill-primitive-colour-orange-solid-600: #f7772f;--quill-primitive-colour-orange-solid-700: #f55f0a;--quill-primitive-colour-orange-solid-800: #d85409;--quill-primitive-colour-orange-solid-900: #bc4908;--quill-primitive-colour-orange-solid-1000: #9f3e07;--quill-primitive-colour-orange-solid-1100: #833305;--quill-primitive-colour-orange-solid-1200: #662804;--quill-primitive-colour-orange-solid-1300: #4a1d03;--quill-primitive-colour-red-opacity-50: #e6190e00;--quill-primitive-colour-red-opacity-75: #e6190e0a;--quill-primitive-colour-red-opacity-100: #e6190e14;--quill-primitive-colour-red-opacity-200: #e6190e29;--quill-primitive-colour-red-opacity-300: #e6190e3d;--quill-primitive-colour-red-opacity-400: #e6190e7a;--quill-primitive-colour-red-opacity-500: #e6190e8f;--quill-primitive-colour-red-opacity-600: #e6190eb8;--quill-primitive-colour-red-opacity-700: #e6190ecc;--quill-primitive-colour-red-opacity-800: #e6190ee0;--quill-primitive-colour-red-solid-100: #ffe6e6;--quill-primitive-colour-red-solid-200: #ffbfbf;--quill-primitive-colour-red-solid-300: #ff9999;--quill-primitive-colour-red-solid-400: #ff7373;--quill-primitive-colour-red-solid-500: #ff4d4d;--quill-primitive-colour-red-solid-600: #f92e26;--quill-primitive-colour-red-solid-700: #e6190e;--quill-primitive-colour-red-solid-800: #db0800;--quill-primitive-colour-red-solid-900: #c40000;--quill-primitive-colour-red-solid-1000: #a60000;--quill-primitive-colour-red-solid-1100: #880000;--quill-primitive-colour-red-solid-1200: #6a0000;--quill-primitive-colour-red-solid-1300: #4d0000;--quill-primitive-colour-sapphire-opacity-50: #0c28f700;--quill-primitive-colour-sapphire-opacity-75: #0c28f70a;--quill-primitive-colour-sapphire-opacity-100: #0c28f714;--quill-primitive-colour-sapphire-opacity-200: #0c28f729;--quill-primitive-colour-sapphire-opacity-300: #0c28f73d;--quill-primitive-colour-sapphire-opacity-400: #0c28f77a;--quill-primitive-colour-sapphire-opacity-500: #0c28f78f;--quill-primitive-colour-sapphire-opacity-600: #0c28f7b8;--quill-primitive-colour-sapphire-opacity-700: #0c28f7cc;--quill-primitive-colour-sapphire-opacity-800: #0c28f7e0;--quill-primitive-colour-sapphire-solid-100: #e7eafe;--quill-primitive-colour-sapphire-solid-200: #c2c9fd;--quill-primitive-colour-sapphire-solid-300: #9ea9fc;--quill-primitive-colour-sapphire-solid-400: #7989fb;--quill-primitive-colour-sapphire-solid-500: #5569f9;--quill-primitive-colour-sapphire-solid-600: #3148f8;--quill-primitive-colour-sapphire-solid-700: #0c28f7;--quill-primitive-colour-sapphire-solid-800: #0b23da;--quill-primitive-colour-sapphire-solid-900: #091fbd;--quill-primitive-colour-sapphire-solid-1000: #081aa1;--quill-primitive-colour-sapphire-solid-1100: #061584;--quill-primitive-colour-sapphire-solid-1200: #051167;--quill-primitive-colour-sapphire-solid-1300: #040c4a;--quill-primitive-colour-seawater-opacity-50: #0aa0b000;--quill-primitive-colour-seawater-opacity-75: #0aa0b00a;--quill-primitive-colour-seawater-opacity-100: #0aa0b014;--quill-primitive-colour-seawater-opacity-200: #0aa0b029;--quill-primitive-colour-seawater-opacity-300: #0aa0b03d;--quill-primitive-colour-seawater-opacity-400: #0aa0b07a;--quill-primitive-colour-seawater-opacity-500: #0aa0b08f;--quill-primitive-colour-seawater-opacity-600: #0aa0b0b8;--quill-primitive-colour-seawater-opacity-700: #0aa0b0cc;--quill-primitive-colour-seawater-opacity-800: #0aa0b0e0;--quill-primitive-colour-seawater-solid-100: #e7f6f7;--quill-primitive-colour-seawater-solid-200: #c2e7eb;--quill-primitive-colour-seawater-solid-300: #9dd9df;--quill-primitive-colour-seawater-solid-400: #78cbd4;--quill-primitive-colour-seawater-solid-500: #54bdc8;--quill-primitive-colour-seawater-solid-600: #2faebc;--quill-primitive-colour-seawater-solid-700: #0aa0b0;--quill-primitive-colour-seawater-solid-800: #098d9c;--quill-primitive-colour-seawater-solid-900: #087b87;--quill-primitive-colour-seawater-solid-1000: #076872;--quill-primitive-colour-seawater-solid-1100: #05555e;--quill-primitive-colour-seawater-solid-1200: #044349;--quill-primitive-colour-seawater-solid-1300: #033035;--quill-primitive-colour-slate-opacity-50: #181c2500;--quill-primitive-colour-slate-opacity-75: #181c250a;--quill-primitive-colour-slate-opacity-100: #181c2514;--quill-primitive-colour-slate-opacity-200: #181c2529;--quill-primitive-colour-slate-opacity-300: #181c253d;--quill-primitive-colour-slate-opacity-400: #181c257a;--quill-primitive-colour-slate-opacity-500: #181c258f;--quill-primitive-colour-slate-opacity-600: #181c25b8;--quill-primitive-colour-slate-opacity-700: #181c25cc;--quill-primitive-colour-slate-opacity-800: #181c25e0;--quill-primitive-colour-slate-solid-50: #ffffff;--quill-primitive-colour-slate-solid-75: #f6f7f8;--quill-primitive-colour-slate-solid-100: #ebecef;--quill-primitive-colour-slate-solid-200: #ced0d6;--quill-primitive-colour-slate-solid-300: #b1b4bc;--quill-primitive-colour-slate-solid-400: #9498a2;--quill-primitive-colour-slate-solid-500: #787d88;--quill-primitive-colour-slate-solid-600: #5c616d;--quill-primitive-colour-slate-solid-700: #414652;--quill-primitive-colour-slate-solid-800: #383d4a;--quill-primitive-colour-slate-solid-900: #303541;--quill-primitive-colour-slate-solid-1000: #282c38;--quill-primitive-colour-slate-solid-1100: #20242f;--quill-primitive-colour-slate-solid-1200: #181c25;--quill-primitive-colour-slate-solid-1300: #11141b;--quill-primitive-colour-slate-solid-1400: #000000;--quill-primitive-colour-teal-opacity-50: #00cccc00;--quill-primitive-colour-teal-opacity-75: #00cccc0a;--quill-primitive-colour-teal-opacity-100: #00cccc14;--quill-primitive-colour-teal-opacity-200: #00cccc29;--quill-primitive-colour-teal-opacity-300: #00cccc3d;--quill-primitive-colour-teal-opacity-400: #00cccc7a;--quill-primitive-colour-teal-opacity-500: #00cccc8f;--quill-primitive-colour-teal-opacity-600: #00ccccb8;--quill-primitive-colour-teal-opacity-700: #00cccccc;--quill-primitive-colour-teal-opacity-800: #17eabde0;--quill-primitive-colour-teal-solid-100: #e6fafa;--quill-primitive-colour-teal-solid-200: #bff2f2;--quill-primitive-colour-teal-solid-300: #99ebeb;--quill-primitive-colour-teal-solid-400: #73e3e3;--quill-primitive-colour-teal-solid-500: #4ddbdb;--quill-primitive-colour-teal-solid-600: #26d4d4;--quill-primitive-colour-teal-solid-700: #00cccc;--quill-primitive-colour-teal-solid-800: #00b4b4;--quill-primitive-colour-teal-solid-900: #009c9c;--quill-primitive-colour-teal-solid-1000: #008585;--quill-primitive-colour-teal-solid-1100: #006d6d;--quill-primitive-colour-teal-solid-1200: #005555;--quill-primitive-colour-teal-solid-1300: #003d3d;--quill-primitive-colour-tiffany-opacity-50: #17eabd00;--quill-primitive-colour-tiffany-opacity-75: #17eabd0a;--quill-primitive-colour-tiffany-opacity-100: #17eabd14;--quill-primitive-colour-tiffany-opacity-200: #17eabd29;--quill-primitive-colour-tiffany-opacity-300: #17eabd3d;--quill-primitive-colour-tiffany-opacity-400: #17eabd7a;--quill-primitive-colour-tiffany-opacity-500: #17eabd8f;--quill-primitive-colour-tiffany-opacity-600: #17eabdb8;--quill-primitive-colour-tiffany-opacity-700: #17eabdcc;--quill-primitive-colour-tiffany-opacity-800: #17eabde0;--quill-primitive-colour-tiffany-solid-100: #e8fdf8;--quill-primitive-colour-tiffany-solid-200: #c5faef;--quill-primitive-colour-tiffany-solid-300: #a2f7e5;--quill-primitive-colour-tiffany-solid-400: #7ff3db;--quill-primitive-colour-tiffany-solid-500: #5df0d1;--quill-primitive-colour-tiffany-solid-600: #3aedc7;--quill-primitive-colour-tiffany-solid-700: #17eabd;--quill-primitive-colour-tiffany-solid-800: #14cfa7;--quill-primitive-colour-tiffany-solid-900: #12b391;--quill-primitive-colour-tiffany-solid-1000: #0f987b;--quill-primitive-colour-tiffany-solid-1100: #0c7d65;--quill-primitive-colour-tiffany-solid-1200: #0a624f;--quill-primitive-colour-tiffany-solid-1300: #074639;--quill-primitive-colour-white-opacity-50: #ffffff00;--quill-primitive-colour-white-opacity-75: #ffffff0a;--quill-primitive-colour-white-opacity-100: #ffffff14;--quill-primitive-colour-white-opacity-200: #ffffff29;--quill-primitive-colour-white-opacity-300: #ffffff3d;--quill-primitive-colour-white-opacity-400: #ffffff7a;--quill-primitive-colour-white-opacity-500: #ffffff8f;--quill-primitive-colour-white-opacity-600: #ffffffb8;--quill-primitive-colour-white-opacity-700: #ffffffcc;--quill-primitive-colour-white-opacity-800: #ffffffe0;--quill-primitive-colour-yellow-opacity-50: #ff9c1300;--quill-primitive-colour-yellow-opacity-75: #ff9c130a;--quill-primitive-colour-yellow-opacity-100: #ff9c1314;--quill-primitive-colour-yellow-opacity-200: #ff9c1329;--quill-primitive-colour-yellow-opacity-300: #ff9c133d;--quill-primitive-colour-yellow-opacity-400: #ff9c137a;--quill-primitive-colour-yellow-opacity-500: #ff9c138f;--quill-primitive-colour-yellow-opacity-600: #ff9c13b8;--quill-primitive-colour-yellow-opacity-700: #ff9c13cc;--quill-primitive-colour-yellow-opacity-800: #ff9c13e0;--quill-primitive-colour-yellow-solid-100: #fff7e6;--quill-primitive-colour-yellow-solid-200: #ffeabf;--quill-primitive-colour-yellow-solid-300: #ffdd99;--quill-primitive-colour-yellow-solid-400: #ffce73;--quill-primitive-colour-yellow-solid-500: #ffbe4d;--quill-primitive-colour-yellow-solid-600: #ffae26;--quill-primitive-colour-yellow-solid-700: #ff9c13;--quill-primitive-colour-yellow-solid-800: #e18d00;--quill-primitive-colour-yellow-solid-900: #c47d00;--quill-primitive-colour-yellow-solid-1000: #a66c00;--quill-primitive-colour-yellow-solid-1100: #885a00;--quill-primitive-colour-yellow-solid-1200: #6a4800;--quill-primitive-colour-yellow-solid-1300: #4d3500;--quill-primitive-size-0: 0rem;--quill-primitive-size-1: .0625rem;--quill-primitive-size-2: .125rem;--quill-primitive-size-4: .25rem;--quill-primitive-size-6: .375rem;--quill-primitive-size-8: .5rem;--quill-primitive-size-10: .625rem;--quill-primitive-size-12: .75rem;--quill-primitive-size-14: .875rem;--quill-primitive-size-16: 1rem;--quill-primitive-size-18: 1.125rem;--quill-primitive-size-20: 1.25rem;--quill-primitive-size-22: 1.375rem;--quill-primitive-size-24: 1.5rem;--quill-primitive-size-26: 1.625rem;--quill-primitive-size-28: 1.75rem;--quill-primitive-size-30: 1.875rem;--quill-primitive-size-32: 2rem;--quill-primitive-size-34: 2.125rem;--quill-primitive-size-36: 2.25rem;--quill-primitive-size-38: 2.375rem;--quill-primitive-size-40: 2.5rem;--quill-primitive-size-42: 2.625rem;--quill-primitive-size-44: 2.75rem;--quill-primitive-size-46: 2.875rem;--quill-primitive-size-48: 3rem;--quill-primitive-size-50: 3.125rem;--quill-primitive-size-52: 3.25rem;--quill-primitive-size-54: 3.375rem;--quill-primitive-size-56: 3.5rem;--quill-primitive-size-58: 3.625rem;--quill-primitive-size-60: 3.75rem;--quill-primitive-size-62: 3.875rem;--quill-primitive-size-64: 4rem;--quill-primitive-size-66: 4.125rem;--quill-primitive-size-68: 4.25rem;--quill-primitive-size-70: 4.375rem;--quill-primitive-size-72: 4.5rem;--quill-primitive-size-74: 4.625rem;--quill-primitive-size-76: 4.75rem;--quill-primitive-size-78: 4.875rem;--quill-primitive-size-80: 5rem;--quill-primitive-size-82: 5.125rem;--quill-primitive-size-84: 5.25rem;--quill-primitive-size-86: 5.375rem;--quill-primitive-size-88: 5.5rem;--quill-primitive-size-90: 5.625rem;--quill-primitive-size-92: 5.75rem;--quill-primitive-size-94: 5.875rem;--quill-primitive-size-96: 6rem;--quill-primitive-size-98: 6.125rem;--quill-primitive-size-100: 6.25rem;--quill-primitive-size-999: 62.4375rem;--quill-primitive-typography-font-family-code: red hat mono;--quill-primitive-typography-font-family-primary: inter;--quill-primitive-typography-font-size-10: .625rem;--quill-primitive-typography-font-size-12: .75rem;--quill-primitive-typography-font-size-14: .875rem;--quill-primitive-typography-font-size-16: 1rem;--quill-primitive-typography-font-size-18: 1.125rem;--quill-primitive-typography-font-size-20: 1.25rem;--quill-primitive-typography-font-size-24: 1.5rem;--quill-primitive-typography-font-size-28: 1.75rem;--quill-primitive-typography-font-size-32: 2rem;--quill-primitive-typography-font-size-40: 2.5rem;--quill-primitive-typography-font-size-48: 3rem;--quill-primitive-typography-font-size-56: 3.5rem;--quill-primitive-typography-font-size-64: 4rem;--quill-primitive-typography-font-size-72: 4.5rem;--quill-primitive-typography-font-size-80: 5rem;--quill-primitive-typography-font-size-88: 5.5rem;--quill-primitive-typography-font-size-96: 6rem;--quill-primitive-typography-font-weight-black: black;--quill-primitive-typography-font-weight-bold: bold;--quill-primitive-typography-font-weight-extrabold: extrabold;--quill-primitive-typography-font-weight-medium: medium;--quill-primitive-typography-font-weight-regular: regular;--quill-primitive-typography-font-weight-semibold: semibold;--quill-primitive-typography-line-height-16: 1rem;--quill-primitive-typography-line-height-18: 1.125rem;--quill-primitive-typography-line-height-20: 1.25rem;--quill-primitive-typography-line-height-22: 1.375rem;--quill-primitive-typography-line-height-24: 1.5rem;--quill-primitive-typography-line-height-28: 1.75rem;--quill-primitive-typography-line-height-30: 1.875rem;--quill-primitive-typography-line-height-32: 2rem;--quill-primitive-typography-line-height-36: 2.25rem;--quill-primitive-typography-line-height-40: 2.5rem;--quill-primitive-typography-line-height-48: 3rem;--quill-primitive-typography-line-height-56: 3.5rem;--quill-primitive-typography-line-height-64: 4rem;--quill-primitive-typography-line-height-72: 4.5rem;--quill-primitive-typography-line-height-80: 5rem;--quill-primitive-typography-line-height-96: 6rem;--quill-primitive-typography-line-height-104: 6.5rem;--quill-primitive-typography-line-height-128: 8rem;--quill-primitive-typography-line-height-204: 12.75rem}:root{--quill-semantic-background-action-brand-hover: var(--quill-primitive-colour-coral-solid-800);--quill-semantic-background-action-brand-normal: var(--quill-primitive-colour-coral-solid-700);--quill-semantic-background-action-brand-pressed: var(--quill-primitive-colour-coral-solid-900);--quill-semantic-background-action-disabled-inverse: var(--quill-primitive-colour-slate-solid-1100);--quill-semantic-background-action-disabled-normal: var(--quill-primitive-colour-slate-solid-100);--quill-semantic-background-action-disabled-static-dark: var(--quill-primitive-colour-slate-solid-100);--quill-semantic-background-action-disabled-static-light: var(--quill-primitive-colour-slate-solid-1100);--quill-semantic-background-action-secondary-inverse: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-background-action-secondary-normal: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-background-action-secondary-static-dark: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-background-action-secondary-static-light: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-background-action-tertiary-inverse: var(--quill-primitive-colour-slate-solid-900);--quill-semantic-background-action-tertiary-normal: var(--quill-primitive-colour-slate-solid-200);--quill-semantic-background-action-tertiary-static-dark: var(--quill-primitive-colour-slate-solid-200);--quill-semantic-background-action-tertiary-static-light: var(--quill-primitive-colour-slate-solid-900);--quill-semantic-background-canvas-primary: var(--quill-primitive-colour-slate-solid-75);--quill-semantic-background-canvas-secondary: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-background-feedback-neutral-opacity: var(--quill-primitive-colour-slate-opacity-100);--quill-semantic-background-feedback-opacity-error: var(--quill-primitive-colour-red-opacity-300);--quill-semantic-background-feedback-opacity-information: var(--quill-primitive-colour-blue-opacity-300);--quill-semantic-background-feedback-opacity-neutral: var(--quill-primitive-colour-slate-opacity-100);--quill-semantic-background-feedback-opacity-opacity: var(--quill-primitive-colour-green-opacity-300);--quill-semantic-background-feedback-opacity-success: var(--quill-primitive-colour-green-opacity-300);--quill-semantic-background-feedback-opacity-warning: var(--quill-primitive-colour-yellow-opacity-300);--quill-semantic-background-feedback-solid-error-inverse: var(--quill-primitive-colour-red-solid-500);--quill-semantic-background-feedback-solid-error-normal: var(--quill-primitive-colour-red-solid-1100);--quill-semantic-background-feedback-solid-error-static-dark: var(--quill-primitive-colour-red-solid-500);--quill-semantic-background-feedback-solid-error-static-light: var(--quill-primitive-colour-red-solid-1100);--quill-semantic-background-feedback-solid-information-inverse: var(--quill-primitive-colour-blue-solid-500);--quill-semantic-background-feedback-solid-information-normal: var(--quill-primitive-colour-blue-solid-1100);--quill-semantic-background-feedback-solid-information-static-dark: var(--quill-primitive-colour-blue-solid-500);--quill-semantic-background-feedback-solid-information-static-light: var(--quill-primitive-colour-blue-solid-1100);--quill-semantic-background-feedback-solid-neutral-inverse: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-background-feedback-solid-neutral-normal: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-background-feedback-solid-neutral-static-dark: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-background-feedback-solid-neutral-static-light: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-background-feedback-solid-success-inverse: var(--quill-primitive-colour-green-solid-500);--quill-semantic-background-feedback-solid-success-normal: var(--quill-primitive-colour-green-solid-1100);--quill-semantic-background-feedback-solid-success-static-dark: var(--quill-primitive-colour-green-solid-500);--quill-semantic-background-feedback-solid-success-static-light: var(--quill-primitive-colour-green-solid-1100);--quill-semantic-background-feedback-solid-warning-inverse: var(--quill-primitive-colour-yellow-solid-500);--quill-semantic-background-feedback-solid-warning-normal: var(--quill-primitive-colour-yellow-solid-1100);--quill-semantic-background-feedback-solid-warning-static-dark: var(--quill-primitive-colour-yellow-solid-500);--quill-semantic-background-feedback-solid-warning-static-light: var(--quill-primitive-colour-yellow-solid-1100);--quill-semantic-background-foundation-primary-canvas: var(--quill-primitive-colour-slate-solid-75);--quill-semantic-background-foundation-primary-surface: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-background-foundation-secondary-canvas: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-background-foundation-secondary-surface: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-background-state-default-primary: var(--quill-primitive-colour-slate-opacity-75);--quill-semantic-background-state-default-secondary: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-background-state-dragged-dragged: var(--quill-primitive-colour-slate-opacity-200);--quill-semantic-background-state-hover-hover: var(--quill-primitive-colour-slate-opacity-100);--quill-semantic-background-state-pressed-pressed: var(--quill-primitive-colour-slate-opacity-200);--quill-semantic-background-state-selected-selected: var(--quill-primitive-colour-slate-opacity-100);--quill-semantic-background-surface: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-border-error-inverse: var(--quill-primitive-colour-red-solid-500);--quill-semantic-border-error-normal: var(--quill-primitive-colour-red-solid-900);--quill-semantic-border-error-static-dark: var(--quill-primitive-colour-red-solid-500);--quill-semantic-border-error-static-light: var(--quill-primitive-colour-red-solid-900);--quill-semantic-border-information-inverse: var(--quill-primitive-colour-blue-solid-500);--quill-semantic-border-information-normal: var(--quill-primitive-colour-blue-solid-900);--quill-semantic-border-information-static-dark: var(--quill-primitive-colour-blue-solid-500);--quill-semantic-border-information-static-light: var(--quill-primitive-colour-blue-solid-900);--quill-semantic-border-normal-primary: var(--quill-primitive-colour-slate-opacity-200);--quill-semantic-border-normal-secondary: var(--quill-primitive-colour-slate-opacity-100);--quill-semantic-border-prominent-inverse: var(--quill-primitive-colour-white-opacity-200);--quill-semantic-border-prominent-normal: var(--quill-primitive-colour-slate-opacity-200);--quill-semantic-border-prominent-static-dark: var(--quill-primitive-colour-white-opacity-200);--quill-semantic-border-prominent-static-light: var(--quill-primitive-colour-slate-opacity-200);--quill-semantic-border-selected-inverse: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-border-selected-normal: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-border-selected-static-dark: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-border-selected-static-light: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-border-subtle-inverse: var(--quill-primitive-colour-white-opacity-100);--quill-semantic-border-subtle-normal: var(--quill-primitive-colour-slate-opacity-100);--quill-semantic-border-subtle-static-dark: var(--quill-primitive-colour-white-opacity-100);--quill-semantic-border-subtle-static-light: var(--quill-primitive-colour-slate-opacity-100);--quill-semantic-border-success-inverse: var(--quill-primitive-colour-green-solid-500);--quill-semantic-border-success-normal: var(--quill-primitive-colour-green-solid-900);--quill-semantic-border-success-static-dark: var(--quill-primitive-colour-green-solid-500);--quill-semantic-border-success-static-light: var(--quill-primitive-colour-green-solid-900);--quill-semantic-border-warning-inverse: var(--quill-primitive-colour-yellow-solid-500);--quill-semantic-border-warning-normal: var(--quill-primitive-colour-yellow-solid-900);--quill-semantic-border-warning-static-dark: var(--quill-primitive-colour-yellow-solid-500);--quill-semantic-border-warning-static-light: var(--quill-primitive-colour-yellow-solid-900);--quill-semantic-text-disabled-inverse: var(--quill-primitive-colour-white-opacity-200);--quill-semantic-text-disabled-normal: var(--quill-primitive-colour-slate-opacity-200);--quill-semantic-text-disabled-static-dark: var(--quill-primitive-colour-white-opacity-200);--quill-semantic-text-disabled-static-light: var(--quill-primitive-colour-slate-opacity-200);--quill-semantic-text-error-inverse: var(--quill-primitive-colour-red-solid-500);--quill-semantic-text-error-normal: var(--quill-primitive-colour-red-solid-900);--quill-semantic-text-error-static-dark: var(--quill-primitive-colour-red-solid-500);--quill-semantic-text-error-static-light: var(--quill-primitive-colour-red-solid-900);--quill-semantic-text-information-inverse: var(--quill-primitive-colour-blue-solid-500);--quill-semantic-text-information-normal: var(--quill-primitive-colour-blue-solid-900);--quill-semantic-text-information-static-dark: var(--quill-primitive-colour-blue-solid-500);--quill-semantic-text-information-static-light: var(--quill-primitive-colour-blue-solid-900);--quill-semantic-text-prominent-inverse: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-text-prominent-normal: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-text-prominent-static-dark: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-text-prominent-static-light: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-text-subtle-inverse: var(--quill-primitive-colour-white-opacity-400);--quill-semantic-text-subtle-normal: var(--quill-primitive-colour-slate-opacity-400);--quill-semantic-text-subtle-static-dark: var(--quill-primitive-colour-white-opacity-400);--quill-semantic-text-subtle-static-light: var(--quill-primitive-colour-slate-opacity-400);--quill-semantic-text-success-inverse: var(--quill-primitive-colour-green-solid-500);--quill-semantic-text-success-normal: var(--quill-primitive-colour-green-solid-900);--quill-semantic-text-success-static-dark: var(--quill-primitive-colour-green-solid-500);--quill-semantic-text-success-static-light: var(--quill-primitive-colour-green-solid-900);--quill-semantic-text-utility-brand: var(--quill-primitive-colour-coral-solid-700);--quill-semantic-text-utility-demo: var(--quill-primitive-colour-orange-solid-700);--quill-semantic-text-utility-real: var(--quill-primitive-colour-emerald-solid-700);--quill-semantic-text-warning-inverse: var(--quill-primitive-colour-yellow-solid-500);--quill-semantic-text-warning-normal: var(--quill-primitive-colour-yellow-solid-900);--quill-semantic-text-warning-static-dark: var(--quill-primitive-colour-yellow-solid-500);--quill-semantic-text-warning-static-light: var(--quill-primitive-colour-yellow-solid-900)}.quill-quill-theme-semantic_colour-dark-i8Mu0{--quill-semantic-background-action-brand-hover: var(--quill-primitive-colour-coral-solid-800);--quill-semantic-background-action-brand-normal: var(--quill-primitive-colour-coral-solid-700);--quill-semantic-background-action-brand-pressed: var(--quill-primitive-colour-coral-solid-900);--quill-semantic-background-action-disabled-inverse: var(--quill-primitive-colour-slate-solid-100);--quill-semantic-background-action-disabled-normal: var(--quill-primitive-colour-slate-solid-1100);--quill-semantic-background-action-disabled-static-dark: var(--quill-primitive-colour-slate-solid-100);--quill-semantic-background-action-disabled-static-light: var(--quill-primitive-colour-slate-solid-1100);--quill-semantic-background-action-secondary-inverse: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-background-action-secondary-normal: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-background-action-secondary-static-dark: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-background-action-secondary-static-light: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-background-action-tertiary-inverse: var(--quill-primitive-colour-slate-solid-200);--quill-semantic-background-action-tertiary-normal: var(--quill-primitive-colour-slate-solid-900);--quill-semantic-background-action-tertiary-static-dark: var(--quill-primitive-colour-slate-solid-200);--quill-semantic-background-action-tertiary-static-light: var(--quill-primitive-colour-slate-solid-900);--quill-semantic-background-canvas-primary: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-background-canvas-secondary: var(--quill-primitive-colour-slate-solid-1100);--quill-semantic-background-feedback-neutral-opacity: var(--quill-primitive-colour-white-opacity-100);--quill-semantic-background-feedback-opacity-error: var(--quill-primitive-colour-red-opacity-300);--quill-semantic-background-feedback-opacity-information: var(--quill-primitive-colour-blue-opacity-300);--quill-semantic-background-feedback-opacity-neutral: var(--quill-primitive-colour-white-opacity-100);--quill-semantic-background-feedback-opacity-opacity: var(--quill-primitive-colour-green-opacity-300);--quill-semantic-background-feedback-opacity-success: var(--quill-primitive-colour-green-opacity-300);--quill-semantic-background-feedback-opacity-warning: var(--quill-primitive-colour-yellow-opacity-300);--quill-semantic-background-feedback-solid-error-inverse: var(--quill-primitive-colour-red-solid-1100);--quill-semantic-background-feedback-solid-error-normal: var(--quill-primitive-colour-red-solid-500);--quill-semantic-background-feedback-solid-error-static-dark: var(--quill-primitive-colour-red-solid-500);--quill-semantic-background-feedback-solid-error-static-light: var(--quill-primitive-colour-red-solid-1100);--quill-semantic-background-feedback-solid-information-inverse: var(--quill-primitive-colour-blue-solid-1100);--quill-semantic-background-feedback-solid-information-normal: var(--quill-primitive-colour-blue-solid-500);--quill-semantic-background-feedback-solid-information-static-dark: var(--quill-primitive-colour-blue-solid-500);--quill-semantic-background-feedback-solid-information-static-light: var(--quill-primitive-colour-blue-solid-1100);--quill-semantic-background-feedback-solid-neutral-inverse: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-background-feedback-solid-neutral-normal: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-background-feedback-solid-neutral-static-dark: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-background-feedback-solid-neutral-static-light: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-background-feedback-solid-success-inverse: var(--quill-primitive-colour-green-solid-1100);--quill-semantic-background-feedback-solid-success-normal: var(--quill-primitive-colour-green-solid-500);--quill-semantic-background-feedback-solid-success-static-dark: var(--quill-primitive-colour-green-solid-500);--quill-semantic-background-feedback-solid-success-static-light: var(--quill-primitive-colour-green-solid-1100);--quill-semantic-background-feedback-solid-warning-inverse: var(--quill-primitive-colour-yellow-solid-1100);--quill-semantic-background-feedback-solid-warning-normal: var(--quill-primitive-colour-yellow-solid-500);--quill-semantic-background-feedback-solid-warning-static-dark: var(--quill-primitive-colour-yellow-solid-500);--quill-semantic-background-feedback-solid-warning-static-light: var(--quill-primitive-colour-yellow-solid-1100);--quill-semantic-background-foundation-primary-canvas: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-background-foundation-primary-surface: var(--quill-primitive-colour-slate-solid-1100);--quill-semantic-background-foundation-secondary-canvas: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-background-foundation-secondary-surface: var(--quill-primitive-colour-slate-solid-1100);--quill-semantic-background-state-default-primary: var(--quill-primitive-colour-white-opacity-75);--quill-semantic-background-state-default-secondary: var(--quill-primitive-colour-white-opacity-75);--quill-semantic-background-state-dragged-dragged: var(--quill-primitive-colour-white-opacity-200);--quill-semantic-background-state-hover-hover: var(--quill-primitive-colour-white-opacity-100);--quill-semantic-background-state-pressed-pressed: var(--quill-primitive-colour-white-opacity-200);--quill-semantic-background-state-selected-selected: var(--quill-primitive-colour-white-opacity-100);--quill-semantic-background-surface: var(--quill-primitive-colour-slate-solid-1100);--quill-semantic-border-error-inverse: var(--quill-primitive-colour-red-solid-900);--quill-semantic-border-error-normal: var(--quill-primitive-colour-red-solid-500);--quill-semantic-border-error-static-dark: var(--quill-primitive-colour-red-solid-500);--quill-semantic-border-error-static-light: var(--quill-primitive-colour-red-solid-900);--quill-semantic-border-information-inverse: var(--quill-primitive-colour-blue-solid-900);--quill-semantic-border-information-normal: var(--quill-primitive-colour-blue-solid-500);--quill-semantic-border-information-static-dark: var(--quill-primitive-colour-blue-solid-500);--quill-semantic-border-information-static-light: var(--quill-primitive-colour-blue-solid-900);--quill-semantic-border-normal-primary: var(--quill-primitive-colour-white-opacity-200);--quill-semantic-border-normal-secondary: var(--quill-primitive-colour-white-opacity-100);--quill-semantic-border-prominent-inverse: var(--quill-primitive-colour-slate-opacity-200);--quill-semantic-border-prominent-normal: var(--quill-primitive-colour-white-opacity-200);--quill-semantic-border-prominent-static-dark: var(--quill-primitive-colour-white-opacity-200);--quill-semantic-border-prominent-static-light: var(--quill-primitive-colour-slate-opacity-200);--quill-semantic-border-selected-inverse: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-border-selected-normal: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-border-selected-static-dark: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-border-selected-static-light: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-border-subtle-inverse: var(--quill-primitive-colour-slate-opacity-100);--quill-semantic-border-subtle-normal: var(--quill-primitive-colour-white-opacity-100);--quill-semantic-border-subtle-static-dark: var(--quill-primitive-colour-white-opacity-100);--quill-semantic-border-subtle-static-light: var(--quill-primitive-colour-slate-opacity-100);--quill-semantic-border-success-inverse: var(--quill-primitive-colour-green-solid-900);--quill-semantic-border-success-normal: var(--quill-primitive-colour-green-solid-500);--quill-semantic-border-success-static-dark: var(--quill-primitive-colour-green-solid-500);--quill-semantic-border-success-static-light: var(--quill-primitive-colour-green-solid-900);--quill-semantic-border-warning-inverse: var(--quill-primitive-colour-yellow-solid-900);--quill-semantic-border-warning-normal: var(--quill-primitive-colour-yellow-solid-500);--quill-semantic-border-warning-static-dark: var(--quill-primitive-colour-yellow-solid-500);--quill-semantic-border-warning-static-light: var(--quill-primitive-colour-yellow-solid-900);--quill-semantic-text-disabled-inverse: var(--quill-primitive-colour-slate-opacity-200);--quill-semantic-text-disabled-normal: var(--quill-primitive-colour-white-opacity-200);--quill-semantic-text-disabled-static-dark: var(--quill-primitive-colour-white-opacity-200);--quill-semantic-text-disabled-static-light: var(--quill-primitive-colour-slate-opacity-200);--quill-semantic-text-error-inverse: var(--quill-primitive-colour-red-solid-900);--quill-semantic-text-error-normal: var(--quill-primitive-colour-red-solid-500);--quill-semantic-text-error-static-dark: var(--quill-primitive-colour-red-solid-500);--quill-semantic-text-error-static-light: var(--quill-primitive-colour-red-solid-900);--quill-semantic-text-information-inverse: var(--quill-primitive-colour-blue-solid-900);--quill-semantic-text-information-normal: var(--quill-primitive-colour-blue-solid-500);--quill-semantic-text-information-static-dark: var(--quill-primitive-colour-blue-solid-500);--quill-semantic-text-information-static-light: var(--quill-primitive-colour-blue-solid-900);--quill-semantic-text-prominent-inverse: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-text-prominent-normal: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-text-prominent-static-dark: var(--quill-primitive-colour-slate-solid-50);--quill-semantic-text-prominent-static-light: var(--quill-primitive-colour-slate-solid-1200);--quill-semantic-text-subtle-inverse: var(--quill-primitive-colour-slate-opacity-400);--quill-semantic-text-subtle-normal: var(--quill-primitive-colour-white-opacity-400);--quill-semantic-text-subtle-static-dark: var(--quill-primitive-colour-white-opacity-400);--quill-semantic-text-subtle-static-light: var(--quill-primitive-colour-slate-opacity-400);--quill-semantic-text-success-inverse: var(--quill-primitive-colour-green-solid-900);--quill-semantic-text-success-normal: var(--quill-primitive-colour-green-solid-500);--quill-semantic-text-success-static-dark: var(--quill-primitive-colour-green-solid-500);--quill-semantic-text-success-static-light: var(--quill-primitive-colour-green-solid-900);--quill-semantic-text-utility-brand: var(--quill-primitive-colour-coral-solid-700);--quill-semantic-text-utility-demo: var(--quill-primitive-colour-orange-solid-700);--quill-semantic-text-utility-real: var(--quill-primitive-colour-emerald-solid-700);--quill-semantic-text-warning-inverse: var(--quill-primitive-colour-yellow-solid-900);--quill-semantic-text-warning-normal: var(--quill-primitive-colour-yellow-solid-500);--quill-semantic-text-warning-static-dark: var(--quill-primitive-colour-yellow-solid-500);--quill-semantic-text-warning-static-light: var(--quill-primitive-colour-yellow-solid-900)}:root{--quill-semantic-border-0: var(--quill-primitive-size-0);--quill-semantic-border-1: var(--quill-primitive-size-1);--quill-semantic-border-2: var(--quill-primitive-size-2);--quill-semantic-border-4: var(--quill-primitive-size-4);--quill-semantic-border-8: var(--quill-primitive-size-8);--quill-semantic-radius-0: var(--quill-primitive-size-0);--quill-semantic-radius-4: var(--quill-primitive-size-4);--quill-semantic-radius-8: var(--quill-primitive-size-8);--quill-semantic-radius-16: var(--quill-primitive-size-16);--quill-semantic-radius-24: var(--quill-primitive-size-24);--quill-semantic-radius-48: var(--quill-primitive-size-48);--quill-semantic-radius-999: var(--quill-primitive-size-999);--quill-semantic-spacing-0: var(--quill-primitive-size-0);--quill-semantic-spacing-2: var(--quill-primitive-size-2);--quill-semantic-spacing-4: var(--quill-primitive-size-4);--quill-semantic-spacing-8: var(--quill-primitive-size-8);--quill-semantic-spacing-16: var(--quill-primitive-size-16);--quill-semantic-spacing-20: var(--quill-primitive-size-20);--quill-semantic-spacing-24: var(--quill-primitive-size-24);--quill-semantic-spacing-32: var(--quill-primitive-size-32);--quill-semantic-spacing-40: var(--quill-primitive-size-40);--quill-semantic-spacing-48: var(--quill-primitive-size-48);--quill-semantic-spacing-56: var(--quill-primitive-size-56);--quill-semantic-spacing-64: var(--quill-primitive-size-64);--quill-semantic-spacing-72: var(--quill-primitive-size-72);--quill-semantic-spacing-80: var(--quill-primitive-size-80);--quill-semantic-width-height-8: var(--quill-primitive-size-8);--quill-semantic-width-height-16: var(--quill-primitive-size-16);--quill-semantic-width-height-24: var(--quill-primitive-size-24);--quill-semantic-width-height-32: var(--quill-primitive-size-32);--quill-semantic-width-height-40: var(--quill-primitive-size-40);--quill-semantic-width-height-48: var(--quill-primitive-size-48);--quill-semantic-width-height-56: var(--quill-primitive-size-56);--quill-semantic-width-height-64: var(--quill-primitive-size-64);--quill-semantic-width-height-72: var(--quill-primitive-size-72);--quill-semantic-width-height-80: var(--quill-primitive-size-80);--quill-semantic-width-height-88: var(--quill-primitive-size-88);--quill-semantic-width-height-96: var(--quill-primitive-size-96)}.quill-container-2fAaK{position:relative;display:flex;flex-direction:column;justify-content:center;gap:var(--quill-semantic-spacing-4);height:var(--quill-semantic-width-height-56);min-width:200px;padding:0 var(--quill-semantic-spacing-16);background:var(--quill-semantic-background-state-default-primary);border:var(--quill-semantic-border-1) solid transparent;border-radius:var(--quill-semantic-radius-16);overflow:hidden;transition:all .2s ease;cursor:text}.quill-container-2fAaK:hover:not(:focus-within){background:var(--quill-semantic-background-state-hover-hover)}.quill-container-2fAaK:active{background:var(--quill-semantic-background-state-pressed-pressed)}.quill-container-2fAaK:focus-within{background:var(--quill-semantic-background-state-default-primary);border-color:var(--quill-semantic-border-selected-normal)}.quill-label-wJo6i{font-family:Inter,sans-serif;font-size:16px;font-weight:400;line-height:normal;color:var(--quill-semantic-text-subtle-normal);transition:font-size .2s ease;cursor:text}.quill-container-2fAaK:focus-within .quill-label-wJo6i,.quill-container-2fAaK.quill-filled-iqW2L .quill-label-wJo6i{font-size:12px}.quill-input-iJZu-{font-family:Inter,sans-serif;font-size:16px;font-weight:400;line-height:normal;color:var(--quill-semantic-text-prominent-normal);border:none;background:transparent;outline:none;padding:0;width:100%}.quill-input-iJZu-::placeholder{color:var(--quill-semantic-text-disabled-normal)}.quill-container-2fAaK:not(:focus-within):not(.quill-filled-iqW2L) .quill-input-iJZu-{height:0;opacity:0}.quill-container-2fAaK:has(input:disabled){opacity:.5;cursor:not-allowed}.quill-container-2fAaK:has(input:disabled):hover{background:var(--quill-semantic-background-state-default-primary)}")),document.head.appendChild(i)}}catch(l){console.error("vite-plugin-css-injected-by-js",l)}})();
+import { jsx as d, jsxs as g } from "react/jsx-runtime";
+import { useState as k, useId as N, useRef as v } from "react";
+const y = "quill-button-6xc3p", h = {
+  "quill-theme-semantic_colour-dark": "quill-quill-theme-semantic_colour-dark-dsrnX",
+  button: y,
+  "button--lg": "quill-button--lg-DVPDm",
+  "button--md": "quill-button--md-eH7DY",
+  "button--sm": "quill-button--sm-bp5tF"
+}, F = ({
+  label: u = "Label",
+  size: s = "lg",
+  disabled: t = !1,
+  onClick: l,
+  type: e = "button",
+  className: i = "",
+  children: c,
+  ...a
+}) => {
+  const r = h[`button--${s}`];
+  return /* @__PURE__ */ d(
+    "button",
+    {
+      type: e,
+      className: `${h.button} ${r} ${i}`,
+      disabled: t,
+      onClick: l,
+      ...a,
+      children: c || u
+    }
+  );
+}, D = "quill-container-2fAaK", L = "quill-label-wJo6i", j = "quill-filled-iqW2L", w = "quill-input-iJZu-", o = {
+  container: D,
+  label: L,
+  filled: j,
+  input: w
+}, J = ({
+  label: u = "Label",
+  placeholder: s = "Placeholder",
+  value: t,
+  onChange: l,
+  disabled: e = !1,
+  className: i = "",
+  id: c,
+  ...a
+}) => {
+  const [r, $] = k(""), x = N(), b = c || x, m = v(null), f = t !== void 0 ? t : r, p = f.length > 0, V = (n) => {
+    const q = n.target.value;
+    t === void 0 && $(q), l == null || l(q);
+  }, I = () => {
+    var n;
+    e || (n = m.current) == null || n.focus();
+  };
+  return /* @__PURE__ */ g(
+    "div",
+    {
+      className: `${o.container} ${p ? o.filled : ""} ${i}`,
+      onClick: I,
+      children: [
+        /* @__PURE__ */ d("label", { htmlFor: b, className: o.label, children: u }),
+        /* @__PURE__ */ d(
+          "input",
+          {
+            ref: m,
+            id: b,
+            type: "text",
+            className: o.input,
+            placeholder: p ? "" : s,
+            value: f,
+            onChange: V,
+            disabled: e,
+            ...a
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  F as ButtonBrand,
+  J as InputTextfield
+};
+//# sourceMappingURL=quill-ui-v2.mjs.map

package/dist/quill-ui-v2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"quill-ui-v2.mjs","sources":["../src/components/button/ButtonBrand.tsx","../src/components/input/InputTextfield.tsx"],"sourcesContent":["import React from 'react';\nimport styles from './ButtonBrand.module.css';\n\nexport interface ButtonBrandProps {\n  /** Button label text */\n  label?: string;\n  \n  /** Button size variant */\n  size?: 'lg' | 'md' | 'sm';\n  \n  /** Disabled state */\n  disabled?: boolean;\n  \n  /** Click handler */\n  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  \n  /** Button type for forms */\n  type?: 'button' | 'submit' | 'reset';\n  \n  /** Additional CSS classes */\n  className?: string;\n  \n  /** Children (alternative to label) */\n  children?: React.ReactNode;\n}\n\nexport const ButtonBrand: React.FC<ButtonBrandProps> = ({\n  label = 'Label',\n  size = 'lg',\n  disabled = false,\n  onClick,\n  type = 'button',\n  className = '',\n  children,\n  ...props\n}) => {\n  const sizeClass = styles[`button--${size}`];\n  \n  return (\n    <button\n      type={type}\n      className={`${styles.button} ${sizeClass} ${className}`}\n      disabled={disabled}\n      onClick={onClick}\n      {...props}\n    >\n      {children || label}\n    </button>\n  );\n};\n","import React, { useState, useId, useRef } from 'react';\nimport styles from './InputTextfield.module.css';\n\nexport interface InputTextfieldProps {\n  label?: string;\n  placeholder?: string;\n  value?: string;\n  onChange?: (value: string) => void;\n  disabled?: boolean;\n  className?: string;\n  id?: string;\n}\n\nexport const InputTextfield: React.FC<InputTextfieldProps> = ({\n  label = 'Label',\n  placeholder = 'Placeholder',\n  value,\n  onChange,\n  disabled = false,\n  className = '',\n  id,\n  ...props\n}) => {\n  const [internalValue, setInternalValue] = useState('');\n  const generatedId = useId();\n  const inputId = id || generatedId;\n  const inputRef = useRef<HTMLInputElement>(null);\n  \n  const currentValue = value !== undefined ? value : internalValue;\n  const hasValue = currentValue.length > 0;\n  \n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const newValue = e.target.value;\n    if (value === undefined) {\n      setInternalValue(newValue);\n    }\n    onChange?.(newValue);\n  };\n  \n  const handleContainerClick = () => {\n    if (!disabled) {\n      inputRef.current?.focus();\n    }\n  };\n  \n  return (\n    <div\n      className={`${styles.container} ${hasValue ? styles.filled : ''} ${className}`}\n      onClick={handleContainerClick}\n    >\n      <label htmlFor={inputId} className={styles.label}>\n        {label}\n      </label>\n      <input\n        ref={inputRef}\n        id={inputId}\n        type=\"text\"\n        className={styles.input}\n        placeholder={hasValue ? '' : placeholder}\n        value={currentValue}\n        onChange={handleChange}\n        disabled={disabled}\n        {...props}\n      />\n    </div>\n  );\n};\n"],"names":["ButtonBrand","label","size","disabled","onClick","type","className","children","props","sizeClass","styles","jsx","InputTextfield","placeholder","value","onChange","id","internalValue","setInternalValue","useState","generatedId","useId","inputId","inputRef","useRef","currentValue","hasValue","handleChange","e","newValue","handleContainerClick","_a","jsxs"],"mappings":";;;;;;;;GA0BaA,IAA0C,CAAC;AAAA,EACtD,OAAAC,IAAQ;AAAA,EACR,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,SAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,WAAAC,IAAY;AAAA,EACZ,UAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAYC,EAAO,WAAWR,CAAI,EAAE;AAE1C,SACE,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAAN;AAAA,MACA,WAAW,GAAGK,EAAO,MAAM,IAAID,CAAS,IAAIH,CAAS;AAAA,MACrD,UAAAH;AAAA,MACA,SAAAC;AAAA,MACC,GAAGI;AAAA,MAEH,UAAAD,KAAYN;AAAA,IAAA;AAAA,EAAA;AAGnB;;;;;GCpCaW,IAAgD,CAAC;AAAA,EAC5D,OAAAX,IAAQ;AAAA,EACR,aAAAY,IAAc;AAAA,EACd,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAZ,IAAW;AAAA,EACX,WAAAG,IAAY;AAAA,EACZ,IAAAU;AAAA,EACA,GAAGR;AACL,MAAM;AACJ,QAAM,CAACS,GAAeC,CAAgB,IAAIC,EAAS,EAAE,GAC/CC,IAAcC,EAAA,GACdC,IAAUN,KAAMI,GAChBG,IAAWC,EAAyB,IAAI,GAExCC,IAAeX,MAAU,SAAYA,IAAQG,GAC7CS,IAAWD,EAAa,SAAS,GAEjCE,IAAe,CAACC,MAA2C;AAC/D,UAAMC,IAAWD,EAAE,OAAO;AAC1B,IAAId,MAAU,UACZI,EAAiBW,CAAQ,GAE3Bd,KAAA,QAAAA,EAAWc;AAAA,EACb,GAEMC,IAAuB,MAAM;;AACjC,IAAK3B,MACH4B,IAAAR,EAAS,YAAT,QAAAQ,EAAkB;AAAA,EAEtB;AAEA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAGtB,EAAO,SAAS,IAAIgB,IAAWhB,EAAO,SAAS,EAAE,IAAIJ,CAAS;AAAA,MAC5E,SAASwB;AAAA,MAET,UAAA;AAAA,QAAA,gBAAAnB,EAAC,WAAM,SAASW,GAAS,WAAWZ,EAAO,OACxC,UAAAT,GACH;AAAA,QACA,gBAAAU;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAKY;AAAA,YACL,IAAID;AAAA,YACJ,MAAK;AAAA,YACL,WAAWZ,EAAO;AAAA,YAClB,aAAagB,IAAW,KAAKb;AAAA,YAC7B,OAAOY;AAAA,YACP,UAAUE;AAAA,YACV,UAAAxB;AAAA,YACC,GAAGK;AAAA,UAAA;AAAA,QAAA;AAAA,MACN;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/package.json

@@ -0,0 +1,101 @@
+{
+  "name": "quill-ui-v2",
+  "version": "0.0.1",
+  "type": "module",
+  "description": "Quill UI V2 - React components with bundled styles",
+  "main": "./dist/quill-ui-v2.cjs",
+  "module": "./dist/quill-ui-v2.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/quill-ui-v2.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/quill-ui-v2.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "scripts": {
+    "build": "vite build",
+    "build:watch": "vite build --watch",
+    "preview": "vite preview",
+    "tokens": "node scripts/tokens/app.js",
+    "tokens:watch": "node scripts/tokens/app.js --watch",
+    "tokens:dry-run": "node scripts/tokens/app.js --dry-run",
+    "tokens:cached": "node scripts/tokens/app.js --skip-rest-api",
+    "tokens:ci": "node scripts/tokens/app.js --ci",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest run --coverage",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build",
+    "prepare": "husky install"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": false
+    },
+    "react-dom": {
+      "optional": false
+    }
+  },
+  "dependencies": {
+    "dotenv": "^17.2.3"
+  },
+  "devDependencies": {
+    "@deriv-com/shiftai-cli": "^1.0.12",
+    "@eslint/js": "^9.17.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "@vitest/coverage-v8": "^4.0.14",
+    "eslint": "^9.17.0",
+    "globals": "^15.14.0",
+    "husky": "^9.1.7",
+    "prettier": "^3.4.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^5.3.3",
+    "vite": "^5.4.2",
+    "vite-plugin-css-injected-by-js": "^3.4.0",
+    "vite-plugin-dts": "^3.9.1",
+    "vitest": "^4.0.14"
+  },
+  "keywords": [
+    "quill",
+    "design-system",
+    "react",
+    "components",
+    "ui",
+    "deriv"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/deriv-com/quill-design-system.git"
+  },
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  }
+}