npm - @maskingtech/designsystem - Versions diffs - 0.0.1 → 0.0.2 - Mend

@maskingtech/designsystem 0.0.1 → 0.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/README.md CHANGED Viewed

@@ -1,6 +1,8 @@
-# Design System | Masking Technology
+# Masking Technology Design System (MTDS)
-Simple design system used for our internal projects.
+A simple, customizable design system that wraps common CSS features into elements and turns standard HTML elements into interactive components. Currently, only React is supported.
+<img width="100%" alt="Example design" src="assets/example.png">
 ## Installation
@@ -8,521 +10,18 @@ Simple design system used for our internal projects.
 npm install @maskingtech/designsystem
 ```
-## Basic elements
-### Avatar
-A rounded image element.
-Properties:
-- **source** - string (required)
-- **title** - string (optional)
-- **alt** - string (optional)
-- **width** - string (optional)
-- **height** - string (optional)
-- **fit** - `fill` | `contain` | `cover` | `none` | `scale-down` (optional, default `contain`)
-Example:
-```tsx
-import { Avatar } from '@maskingtech/designsystem';
-<Avatar
-    source='http://example.com/avatar.png'
-    title='My avatar'
-    alt='My avatar'
-    width='100px'
-/>
-```
-### Border
-A bordered container element.
-Properties:
-- **type** - `normal`| `dashed` | `dotted` (optional, default `normal`)
-- **size** - `large` | `medium` | `small` (optional, default `large`)
-- **padding** - `large` | `medium` | `small` | `none` (optional, default `large`)
-Example:
-```tsx
-import { Border } from '@maskingtech/designsystem';
-<Border size='small' padding='small'>
-    <p>This is the bordered content</p>
-</Border>
-```
-### Button
-A clickable input element styled as a button.
-Properties:
-- **type** - `submit` | `primary` | `secondary` | `disabled` (optional, default `primary`)
-- **size** - `large` | `medium` | `small` (optional, default `medium`)
-- **text** - string (required)
-- **onClick** - `() => void` (optional)
-Example:
-```tsx
-import { Button } from '@maskingtech.designsystem';
-<Button type='primary' size='medium' text='Save' onClick={() => console.log('clicked')} />
-```
-### Cell
-A layout cell that can be fixed or fluid.
-Properties:
-- **sizing** - `fixed` | `fluid` (optional, default `fluid`)
-- **children** - ReactNode
-Example:
-```tsx
-import { Cell } from '@maskingtech.designsystem';
-<Cell sizing='fixed'>Fixed content</Cell>
-```
-### ClickArea
-A wrapper element that handles clicks and optional padding.
-Properties:
-- **padding** - `large` | `medium` | `small` | `none` (optional, default `none`)
-- **onClick** - `() => void` (optional)
-- **children** - ReactNode (optional)
-Example:
-```tsx
-import { ClickArea } from '@maskingtech.designsystem';
-<ClickArea padding='small' onClick={() => alert('clicked')}>Clickable content</ClickArea>
-```
-### Column
-A vertical layout container with alignment and gap options.
-Properties:
-- **alignX** - `left` | `center` | `right` | `stretch` (optional, default `left`)
-- **alignY** - `top` | `center` | `bottom` | `justify` (optional, default `top`)
-- **gap** - `large` | `medium` | `small` | `none` (optional, default `medium`)
-- **wrap** - `wrap` | `nowrap` (optional, default `nowrap`)
-- **children** - ReactNode
-Example:
-```tsx
-import { Column } from '@maskingtech.designsystem';
-<Column alignX='center' gap='small'>
-  <div>Item 1</div>
-  <div>Item 2</div>
-</Column>
-```
-### Form
-A form wrapper that prevents default submit and forwards the form element via a handler.
-Properties:
-- **children** - ReactNode
-- **submitHandler** - `(form: HTMLFormElement) => void` (optional)
-Example:
-```tsx
-import { Form } from '@maskingtech.designsystem';
-<Form submitHandler={(form) => console.log('submit', form)}>
-  {/* inputs here */}
-</Form>
-```
-### Grid
-A grid layout with preset column layouts and gaps.
-Properties:
-- **layout** - `two-columns` | `three-columns` | `four-columns` (required)
-- **gap** - `large` | `medium` | `small` | `none` (optional, default `medium`)
-- **children** - ReactNode
-Example:
-```tsx
-import { Grid } from '@maskingtech.designsystem';
-<Grid layout='three-columns' gap='small'>
-  <div>1</div>
-  <div>2</div>
-  <div>3</div>
-</Grid>
-```
-### Icon
-A simple icon span using a set of predefined icon types.
-Properties:
-- **type** - one of the supported icon identifiers (e.g. `attachment`, `bookmark`, `close`, `user`, `search`, etc.) (required)
-Example:
-```tsx
-import { Icon } from '@maskingtech.designsystem';
-<Icon type='search' />
-```
-### Image
-A styled image element.
-Properties:
-- **source** - string (required)
-- **title** - string (optional)
-- **alt** - string (optional)
-- **width** - string (optional)
-- **height** - string (optional)
-- **fit** - `fill` | `contain` | `cover` | `none` | `scale-down` (optional, default `contain`)
-Example:
-```tsx
-import { Image } from '@maskingtech.designsystem';
-<Image source='http://example.com/photo.jpg' alt='Example' width='200px' fit='cover' />
-```
-### Input
-A labeled input wrapper that composes `Label` with an input element (`TextBox`, `TextArea` or `Select`).
-Properties:
-- **label** - `ReactElement<LabelProps>` (required)
-- **element** - `ReactElement<TextBoxProps | TextAreaProps | SelectProps>` (required)
+## Usage
-Example:
+To activate it, its root element needs to be added to the application.
 ```tsx
-import { Input, Label, TextBox } from '@maskingtech.designsystem';
+import { DesignSystem } from '@maskingtech/designsystem';
-<Input label={<Label value='Name' />} element={<TextBox name='name' />} />
-```
-### Label
-Simple text label for inputs.
-Properties:
+import '@maskingtech/designsystem/style.css';
-- **value** - string (required)
-Example:
-```tsx
-import { Label } from '@maskingtech.designsystem';
-<Label value='Email' />
-```
-### Link
-A styled anchor element.
-Properties:
-- **url** - string (optional)
-- **target** - string (optional)
-- **children** - ReactNode
-Example:
-```tsx
-import { Link } from '@maskingtech.designsystem';
-<Link url='https://example.com' target='_blank'>Visit</Link>
+<DesignSystem>
+    {/* elements and components here */}
+</DesignSystem>
 ```
-### Modal
-A modal dialog built on the native `<dialog>` element.
-Properties:
-- **open** - boolean (required)
-- **sizing** - `full` | `content` (optional, default `content`)
-- **children** - ReactNode (optional)
-Example:
-```tsx
-import { Modal } from '@maskingtech.designsystem';
-<Modal open={true} sizing='content'>
-  <p>Modal content</p>
-</Modal>
-```
-### Panel
-A versatile container for contextual content (alerts, messages, etc.).
-Properties:
-- **type** - `normal` | `alert` | `warning` | `success` | `error` | `transparent` (optional, default `normal`)
-- **padding** - `large` | `medium` | `small` (optional, default `large`)
-- **children** - ReactNode (optional)
-Example:
-```tsx
-import { Panel } from '@maskingtech.designsystem';
-<Panel type='warning' padding='small'>Check this out</Panel>
-```
-### Paragraph
-Styled paragraph element.
-Properties:
-- **size** - `large` | `medium` | `small` (optional, default `medium`)
-- **children** - ReactNode
-Example:
-```tsx
-import { Paragraph } from '@maskingtech.designsystem';
-<Paragraph size='small'>A short paragraph.</Paragraph>
-```
-### Row
-A horizontal layout container with alignment and gap options.
-Properties:
-- **alignX** - `left` | `center` | `right` | `justify` (optional, default `left`)
-- **alignY** - `top` | `center` | `bottom` | `stretch` (optional, default `top`)
-- **gap** - `large` | `medium` | `small` | `none` (optional, default `medium`)
-- **wrap** - `wrap` | `nowrap` (optional, default `nowrap`)
-- **children** - ReactNode
-Example:
-```tsx
-import { Row } from '@maskingtech.designsystem';
-<Row alignX='center' gap='large'>
-  <div>Left</div>
-  <div>Right</div>
-</Row>
-```
-### Ruler
-A decorative divider either horizontal or vertical.
-Properties:
-- **direction** - `horizontal` | `vertical` (required)
-- **size** - `small` | `medium` | `large` (optional, default `medium`)
-Example:
-```tsx
-import { Ruler } from '@maskingtech.designsystem';
-<Ruler direction='horizontal' />
-```
-### Select
-A styled select element that accepts a `Map` of options.
-Properties:
-- **name** - string (required)
-- **options** - `Map<string, string>` (required)
-- **value** - string (optional)
-- **size** - `large` | `medium` | `small` (optional, default `medium`)
-- **onChange** - `ChangeEventHandler<HTMLSelectElement>` (optional)
-Example:
-```tsx
-import { Select } from '@maskingtech.designsystem';
-const options = new Map([['a', 'Option A'], ['b', 'Option B']]);
-<Select name='example' options={options} />
-```
-### Spinner
-A small loading indicator.
-Properties:
-- **active** - boolean (optional, default `true`)
-Example:
-```tsx
-import { Spinner } from '@maskingtech.designsystem';
-<Spinner active={true} />
-```
-### Text
-Inline text element with variants for type, size and weight.
-Properties:
-- **value** - string (required)
-- **type** - `primary` | `secondary` (optional, default `primary`)
-- **size** - `large` | `medium` | `small` (optional, default `medium`)
-- **weight** - `light` | `normal` | `bold` (optional, default `normal`)
-- **wrap** - `none` | `normal` | `break-word` (optional, default `none`)
-Example:
-```tsx
-import { Text } from '@maskingtech.designsystem';
-<Text value='Label' type='secondary' size='small' />
-```
-### TextArea
-A multiline text input.
-Properties:
-- **name** - string (required)
-- **placeholder** - string (optional)
-- **value** - string (optional)
-- **size** - `large` | `medium` | `small` (optional, default `medium`)
-- **rows** - number (optional)
-- **limit** - number (optional)
-- **onChange** - `ChangeEventHandler<HTMLTextAreaElement>` (optional)
-Example:
-```tsx
-import { TextArea } from '@maskingtech.designsystem';
-<TextArea name='message' placeholder='Write...' rows={4} />
-```
-### TextBox
-A single-line text input.
-Properties:
-- **name** - string (required)
-- **placeholder** - string (optional)
-- **value** - string (optional)
-- **limit** - number (optional)
-- **pattern** - string (optional)
-- **title** - string (optional)
-- **size** - `large` | `medium` | `small` (optional, default `medium`)
-- **required** - boolean (optional)
-- **onChange** - `ChangeEventHandler<HTMLInputElement>` (optional)
-Example:
-```tsx
-import { TextBox } from '@maskingtech.designsystem';
-<TextBox name='firstName' placeholder='First name' />
-```
-### Title
-Heading element that maps `size` to `h1`/`h2`/`h3`.
-Properties:
-- **size** - `large` | `medium` | `small` (optional, default `large`)
-- **children** - ReactNode
-Example:
-```tsx
-import { Title } from '@maskingtech.designsystem';
-<Title size='medium'>Section title</Title>
-```
-## Components
-### Dropdown
-Simple selection dropdown (custom UI) that accepts a `Map` of options.
-Properties:
-- **options** - `Map<string, string>` (required)
-- **selected** - string (optional, key of the selected option)
-- **onChange** - `(oldKey: string, newKey: string) => void` (optional)
-Example:
-```tsx
-import { Dropdown } from '@maskingtech.designsystem';
-const opts = new Map([['a','A'],['b','B']]);
-<Dropdown options={opts} selected='a' onChange={(o,n)=>console.log(o,n)} />
-```
-### Tabs / Tab
-Tabs provide a tabbed navigation. Use `Tab` elements as children of `Tabs`.
-`Tabs` Properties:
-- **separator** - ReactNode (optional)
-- **selectedId** - string (optional)
-- **children** - one or more `Tab` elements (required)
-- **onChange** - `(newId: string, oldId?: string) => void` (optional)
-`Tab` Properties:
-- **id** - string (required)
-- **title** - ReactNode (required)
-- **children** - ReactNode (required)
-Example:
-```tsx
-import { Tabs, Tab } from '@maskingtech.designsystem';
-<Tabs selectedId='tab1' onChange={(n,o)=>console.log(n,o)}>
-  <Tab id='tab1' title='First'>First content</Tab>
-  <Tab id='tab2' title='Second'>Second content</Tab>
-</Tabs>
-```
+The list of elements, components, and customization options can be found in the [documentation](docs/README.md).

package/dist/mtds.css CHANGED Viewed

	@@ -1 +1 @@
1	- .ds .selection{--background-color: transparent;--background-color-options: var(--color-primary-background);--background-color-options-hover: var(--color-background-hover);--arrow-color: var(--color-alert-foreground);--border-color: var(--color-border);display:inline-block;position:relative;min-width:fit-content;cursor:pointer}.ds .selection .text{background-color:var(--background-color);padding:.8em 2em .8em 0}.ds .selection .text:after{content:"";position:absolute;right:.7em;top:1.2em;border:.45em solid transparent;border-color:var(--arrow-color) transparent transparent transparent}.ds .selection .text.active:after{top:.8em;border-color:transparent transparent var(--arrow-color) transparent}.ds .selection .options{position:absolute;min-width:fit-content;white-space:nowrap;text-align:left;background-color:var(--background-color-options);border:.1em solid var(--border-color)}.ds .selection .options .option{padding:.8em 2em .8em .8em;background:var(--color-primary-background);cursor:pointer}.ds .selection .options .option:hover{background-color:var(--background-color-options-hover)}.ds .tabs{--margin: var(--margin-container);--foreground-color: var(--color-primary-foreground);--font-size-nav: 1.1em;--background-color-nav-item: transparent;--background-color-nav-item-active: var(--background-color-nav-item);--background-color-nav-item-hover: var(--color-background-hover);--padding-nav-item: .5em 1em;--margin-separator: .2em 0 1em 0;display:flex;flex-direction:column;margin:var(--margin)}.ds .tabs .nav{display:flex;flex-direction:row;justify-content:center;color:var(--foreground-color);font-size:var(--font-size-nav)}.ds .tabs .nav .item{background:var(--background-color-nav-item);cursor:pointer;padding:var(--padding-nav-item);width:100%;text-align:center}.ds .tabs .nav .item:hover,.ds .tabs .nav .item.active:hover{background:var(--background-color-nav-item-hover)}.ds .tabs .nav .item.active{background:var(--background-color-nav-item-active);font-weight:var(--font-weight-bold)}.ds .tabs .separator{margin:var(--margin-separator)}.ds .avatar{border-radius:50%}.ds .avatar.fit-fill{object-fit:fill}.ds .avatar.fit-contain{object-fit:contain}.ds .avatar.fit-cover{object-fit:cover}.ds .avatar.fit-none{object-fit:none}.ds .avatar.fit-scale-down{object-fit:scale-down}.ds .border{--border-radius: 0;--margin: 0;--color: var(--color-border);--size-large: .3em;--size-medium: .2em;--size-small: .1em;--padding-large: 2em;--padding-medium: 1.5em;--padding-small: 1em;border-color:var(--color);border-radius:var(--border-radius);margin:var(--margin);min-width:0}.ds .border.type-normal{border-style:solid}.ds .border.type-dashed{border-style:dashed}.ds .border.type-dotted{border-style:dotted}.ds .border.size-large{border-width:var(--size-large)}.ds .border.size-medium{border-width:var(--size-medium)}.ds .border.size-small{border-width:var(--size-small)}.ds .border.padding-none{padding:0}.ds .border.padding-small{padding:var(--padding-small)}.ds .border.padding-medium{padding:var(--padding-medium)}.ds .border.padding-large{padding:var(--padding-large)}.ds .button{--margin: 0em;--padding-small: .2em 2.2em;--padding-medium: .5em 2.2em;--padding-large: .9em 2.2em;--border-radius: 2em;--border-style: solid;--border-color: var(--color-border);--border-width: var(--width-border);--primary-background-color: var(--color-primary-action-background);--primary-foreground-color: var(--color-primary-action-foreground);--secondary-background-color: var(--color-secondary-action-background);--secondary-foreground-color: var(--color-secondary-action-foreground);--disabled-background-color: transparent;border-radius:var(--border-radius);border:0;cursor:pointer;margin:var(--margin);text-align:center;width:fit-content;font-family:inherit;font-size:inherit}.ds .button.size-small{padding:var(--padding-small)}.ds .button.size-medium{padding:var(--padding-medium)}.ds .button.size-large{padding:var(--padding-large)}.ds .button.type-primary,.ds .button.type-submit{background-color:var(--primary-background-color);color:var(--primary-foreground-color);font-weight:var(--font-weight-bold)}.ds .button.type-primary:hover,.ds .button.type-submit:hover{background-color:color-mix(in srgb,black 10%,var(--primary-background-color))}.ds .button.type-primary:focus{background-color:color-mix(in srgb,black 20%,var(--primary-background-color))}.ds .button.type-secondary{background-color:var(--secondary-background-color);color:var(--secondary-foreground-color);font-weight:var(--font-weight-normal)}.ds .button.type-secondary:hover{background-color:color-mix(in srgb,black 10%,var(--secondary-background-color))}.ds .button.type-secondary:focus{background-color:color-mix(in srgb,black 20%,var(--secondary-background-color))}.ds .button.type-disabled{background-color:var(--disabled-background-color);border-color:var(--border-color);border-style:var(--border-style);border-width:var(--border-width);font-weight:var(--font-weight-light);cursor:default}.ds .cell.sizing-fixed{flex-grow:0;flex-shrink:0;overflow:hidden}.ds .cell.sizing-fluid{flex-grow:1;flex-shrink:1;overflow:auto}.ds .clickarea{--margin: 0;--padding-large: 2em;--padding-medium: 1.5em;--padding-small: 1em;--padding-none: 0;cursor:pointer;display:inline-block;margin:var(--margin);padding:var(--padding)}.ds .clickarea.padding-none{padding:var(--padding-none)}.ds .clickarea.padding-small{padding:var(--padding-small)}.ds .clickarea.padding-medium{padding:var(--padding-medium)}.ds .clickarea.padding-large{padding:var(--padding-large)}.ds .column{--gap-small: .4em;--gap-medium: 1em;--gap-large: 2em;display:flex;flex-direction:column;min-width:0;width:100%}.ds .column>div,.ds .column>h1,.ds .column>h2,.ds .column>h3,.ds .column>p,.ds .column>form,.ds .column>label,.ds .column>input,.ds .column>textarea,.ds .column>select{margin:0}.ds .column.align-y-top{justify-content:flex-start}.ds .column.align-y-center{justify-content:center}.ds .column.align-y-bottom{justify-content:flex-end}.ds .column.align-y-justify{justify-content:space-between}.ds .column.align-x-left{align-items:flex-start}.ds .column.align-x-center{align-items:center}.ds .column.align-x-right{align-items:flex-end}.ds .column.align-x-stretch{align-items:stretch}.ds .column.gap-small{gap:var(--gap-small)}.ds .column.gap-medium{gap:var(--gap-medium)}.ds .column.gap-large{gap:var(--gap-large)}.ds .column.wrap-nowrap{flex-wrap:nowrap}.ds .column.wrap-wrap{flex-wrap:wrap}.ds .form{--margin: var(--margin-container);margin:var(--margin);min-width:0}.ds .grid{--gap-small: .5em;--gap-medium: 1em;--gap-large: 2em;display:grid;min-width:0}.ds .grid>div,.ds .grid>h1,.ds .grid>h2,.ds .grid>h3,.ds .grid>p,.ds .grid>form,.ds .grid>label,.ds .grid>input,.ds .grid>textarea,.ds .grid>select{margin:0}.ds .grid.layout-two-columns{grid-template-columns:1fr 1fr}.ds .grid.layout-three-columns{grid-template-columns:1fr 1fr 1fr}.ds .grid.layout-four-columns{grid-template-columns:1fr 1fr 1fr 1fr}.ds .grid.gap-small{grid-gap:var(--gap-small)}.ds .grid.gap-medium{grid-gap:var(--gap-medium)}.ds .grid.gap-large{grid-gap:var(--gap-large)}.ds .icon{--icon-attachment: "📎";--icon-bookmark: "🔖";--icon-box: "☐";--icon-box-checked: "☑";--icon-box-crossed: "☒";--icon-calendar: "📅";--icon-caution: "☡";--icon-check: "✓";--icon-clock: "🕔";--icon-close: "✕";--icon-cloud: "☁";--icon-comment: "💬";--icon-diamond: "♦";--icon-eye: "👁";--icon-flag: "⚑";--icon-heart: "♥";--icon-home: "⌂";--icon-info: "ℹ";--icon-lock: "🔒";--icon-mail: "✉";--icon-music: "♫";--icon-phone: "☎";--icon-piece: "☮";--icon-plus: "➕";--icon-question: "❓";--icon-rain: "⛆";--icon-recycle: "♻";--icon-search: "🔍";--icon-settings: "⚙";--icon-star: "★";--icon-sun: "☀";--icon-tag: "🏷";--icon-trash: "🗑";--icon-umbrella: "☂";--icon-unlock: "🔓";--icon-user: "👤";--icon-video: "🎬";--icon-warning: "⚠";--icon-yinyang: "☯"}.ds .icon.attachment:before{content:var(--icon-attachment)}.ds .icon.bookmark:before{content:var(--icon-bookmark)}.ds .icon.box:before{content:var(--icon-box)}.ds .icon.box-checked:before{content:var(--icon-box-checked)}.ds .icon.box-crossed:before{content:var(--icon-box-crossed)}.ds .icon.calendar:before{content:var(--icon-calendar)}.ds .icon.caution:before{content:var(--icon-caution)}.ds .icon.check:before{content:var(--icon-check)}.ds .icon.clock:before{content:var(--icon-clock)}.ds .icon.close:before{content:var(--icon-close)}.ds .icon.cloud:before{content:var(--icon-cloud)}.ds .icon.comment:before{content:var(--icon-comment)}.ds .icon.diamond:before{content:var(--icon-diamond)}.ds .icon.eye:before{content:var(--icon-eye)}.ds .icon.flag:before{content:var(--icon-flag)}.ds .icon.heart:before{content:var(--icon-heart)}.ds .icon.home:before{content:var(--icon-home)}.ds .icon.info:before{content:var(--icon-info)}.ds .icon.lock:before{content:var(--icon-lock)}.ds .icon.mail:before{content:var(--icon-mail)}.ds .icon.music:before{content:var(--icon-music)}.ds .icon.phone:before{content:var(--icon-phone)}.ds .icon.piece:before{content:var(--icon-piece)}.ds .icon.plus:before{content:var(--icon-plus)}.ds .icon.question:before{content:var(--icon-question)}.ds .icon.rain:before{content:var(--icon-rain)}.ds .icon.recycle:before{content:var(--icon-recycle)}.ds .icon.search:before{content:var(--icon-search)}.ds .icon.settings:before{content:var(--icon-settings)}.ds .icon.star:before{content:var(--icon-star)}.ds .icon.sun:before{content:var(--icon-sun)}.ds .icon.tag:before{content:var(--icon-tag)}.ds .icon.trash:before{content:var(--icon-trash)}.ds .icon.umbrella:before{content:var(--icon-umbrella)}.ds .icon.unlock:before{content:var(--icon-unlock)}.ds .icon.user:before{content:var(--icon-user)}.ds .icon.video:before{content:var(--icon-video)}.ds .icon.warning:before{content:var(--icon-warning)}.ds .icon.yinyang:before{content:var(--icon-yinyang)}.ds .image.fit-fill{object-fit:fill}.ds .image.fit-contain{object-fit:contain}.ds .image.fit-cover{object-fit:cover}.ds .image.fit-none{object-fit:none}.ds .image.fit-scale-down{object-fit:scale-down}.ds .input{--margin: 0 0 1em 0;--gap: .5em;display:flex;flex-direction:column;gap:var(--gap);margin:var(--margin)}.ds .input .label{font-weight:var(--font-weight-medium)}.ds .label{--margin: 0;margin:var(--margin)}.ds .link{--color: var(--color-primary-foreground);--color-hover: var(--color-primary-foreground);--text-decoration: dotted underline;--text-decoration-hover: underline;color:var(--color);text-decoration:var(--text-decoration)}.ds .link:hover{color:var(--color-hover);text-decoration:var(--text-decoration-hover)}.ds .modal{border:0;padding:0;min-width:0}.ds .modal.sizing-full{width:100%}.ds .modal.sizing-content{width:fit-content}.ds .panel{--border-radius: 0;--margin: 0 0 1.5em 0;--padding-large: 2em;--padding-medium: 1.5em;--padding-small: 1em;--alert-background-color: var(--color-alert-background);--alert-foreground-color: var(--color-alert-foreground);--error-background-color: var(--color-error-background);--error-foreground-color: var(--color-error-foreground);--normal-background-color: var(--color-secondary-background);--normal-foreground-color: var(--color-primary-foreground);--success-background-color: var(--color-success-background);--success-foreground-color: var(--color-success-foreground);--warning-background-color: var(--color-warning-background);--warning-foreground-color: var(--color-warning-foreground);border-radius:var(--border-radius);padding:var(--padding);margin:var(--margin);min-width:0}.ds .panel.type-alert{background-color:var(--alert-background-color);color:var(--alert-foreground-color)}.ds .panel.type-error{background-color:var(--error-background-color);color:var(--error-foreground-color)}.ds .panel.type-normal{background-color:var(--normal-background-color);color:var(--normal-foreground-color)}.ds .panel.type-success{background-color:var(--success-background-color);color:var(--success-foreground-color)}.ds .panel.type-warning{background-color:var(--warning-background-color);color:var(--warning-foreground-color)}.ds .panel.type-transparent{background-color:transparent}.ds .panel.padding-small{padding:var(--padding-small)}.ds .panel.padding-medium{padding:var(--padding-medium)}.ds .panel.padding-large{padding:var(--padding-large)}.ds .paragraph{--margin: var(--margin-container);--line-height: 1.5em;--font-size-large: 1.5em;--font-size-medium: 1em;--font-size-small: .75em;margin:var(--margin);line-height:var(--line-height);min-width:0}.ds .paragraph.size-large{font-size:var(--font-size-large)}.ds .paragraph.size-medium{font-size:var(--font-size-medium)}.ds .paragraph.size-small{font-size:var(--font-size-small)}.ds .row{--gap-small: .4em;--gap-medium: 1em;--gap-large: 2em;display:flex;flex-direction:row;min-width:0;height:100%}.ds .row>div,.ds .row>h1,.ds .row>h2,.ds .row>h3,.ds .row>p,.ds .row>form,.ds .row>label,.ds .row>input,.ds .row>textarea,.ds .row>select{margin:0}.ds .row.align-x-left{justify-content:flex-start}.ds .row.align-x-center{justify-content:center}.ds .row.align-x-right{justify-content:flex-end}.ds .row.align-x-justify{justify-content:space-between}.ds .row.align-y-top{align-items:flex-start}.ds .row.align-y-center{align-items:center}.ds .row.align-y-bottom{align-items:flex-end}.ds .row.align-y-stretch{align-items:stretch}.ds .row.gap-small{gap:var(--gap-small)}.ds .row.gap-medium{gap:var(--gap-medium)}.ds .row.gap-large{gap:var(--gap-large)}.ds .row.wrap-nowrap{flex-wrap:nowrap}.ds .row.wrap-wrap{flex-wrap:wrap}.ds .ruler{--border-width-small: .1rem;--border-width-medium: .2rem;--border-width-large: .3rem;--color: var(--color-border);background-color:var(--color)}.ds .ruler.direction-horizontal{width:100%}.ds .ruler.direction-horizontal.size-small{height:var(--border-width-small)}.ds .ruler.direction-horizontal.size-medium{height:var(--border-width-medium)}.ds .ruler.direction-horizontal.size-large{height:var(--border-width-large)}.ds .ruler.direction-vertical{height:100%}.ds .ruler.direction-vertical.size-small{width:var(--border-width-small)}.ds .ruler.direction-vertical.size-medium{width:var(--border-width-medium)}.ds .ruler.direction-vertical.size-large{width:var(--border-width-large)}.ds .select{--margin: 0;--padding-small: .4em;--padding-medium: .8em;--padding-large: 1.2em;--border-style: solid;--border-color: var(--color-border);--border-width: var(--width-border);margin:var(--margin);padding:var(--padding);border-style:var(--border-style);border-width:var(--border-width);border-color:var(--border-color);background-color:var(--color-input-background);font-family:inherit;font-size:inherit}.ds .select:focus-visible{outline-color:color-mix(in srgb,black 10%,var(--border-color))}.ds .select.size-small{padding:var(--padding-small)}.ds .select.size-medium{padding:var(--padding-medium)}.ds .select.size-large{padding:var(--padding-large)}.ds .spinner{--color: var(--color-border);--size: 2em;--speed: 1.2s;--thickness: .3em;display:inline-block;width:var(--size);height:var(--size)}.ds .spinner:after{content:" ";display:block;width:var(--size);height:var(--size);border-radius:50%;border:var(--thickness) solid var(--color);border-color:transparent var(--color) transparent var(--color)}.ds .spinner.active:after{animation:ds-spinner var(--speed) linear infinite}@keyframes ds-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ds .text{--primary-color: var(--color-primary-foreground);--secondary-color: var(--color-secondary-foreground);display:inline-block}.ds .text.type-primary{color:var(--primary-color)}.ds .text.type-secondary{color:var(--secondary-color)}.ds .text.size-small{font-size:.9em}.ds .text.size-medium{font-size:1em}.ds .text.size-large{font-size:1.2em}.ds .text.weight-light{font-weight:var(--font-weight-light)}.ds .text.weight-normal{font-weight:var(--font-weight-normal)}.ds .text.weight-bold{font-weight:var(--font-weight-bold)}.ds .text.wrap-none{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.ds .text.wrap-normal{white-space:normal}.ds .text.wrap-break-word{word-wrap:break-word}.ds .textarea{--margin: 0;--padding-small: .4em;--padding-medium: .8em;--padding-large: 1.2em;--border-style: solid;--border-color: var(--color-border);--border-width: var(--width-border);margin:var(--margin);padding:var(--padding);border-style:var(--border-style);border-width:var(--border-width);border-color:var(--border-color);background-color:var(--color-input-background);font-family:inherit;font-size:inherit;resize:vertical;width:100%}.ds .textarea:focus-visible{outline-color:color-mix(in srgb,black 10%,var(--border-color))}.ds .textarea.size-small{padding:var(--padding-small)}.ds .textarea.size-medium{padding:var(--padding-medium)}.ds .textarea.size-large{padding:var(--padding-large)}.ds .textbox{--margin: 0;--padding-small: .4em;--padding-medium: .8em;--padding-large: 1.2em;--border-style: solid;--border-color: var(--color-border);--border-width: var(--width-border);margin:var(--margin);border-style:var(--border-style);border-width:var(--border-width);border-color:var(--border-color);background-color:var(--color-input-background);font-family:inherit;font-size:inherit}.ds .textbox:focus-visible{outline-color:color-mix(in srgb,black 10%,var(--border-color))}.ds .textbox.size-small{padding:var(--padding-small)}.ds .textbox.size-medium{padding:var(--padding-medium)}.ds .textbox.size-large{padding:var(--padding-large)}.ds .title{--margin: 0 0 .8em 0;--font-size-large: 2em;--font-size-medium: 1.5em;--font-size-small: 1em;margin:var(--margin)}.ds .title.size-large{font-size:var(--font-size-large)}.ds .title.size-medium{font-size:var(--font-size-medium)}.ds .title.size-small{font-size:var(--font-size-small)}
1	+ .mtds{--font-family: sans-serif;--font-size: 16px;--font-weight-extra-light: 200;--font-weight-light: 300;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semi-bold: 600;--font-weight-bold: 700;--color-background: transparent;--color-background-hover: #efefef;--color-foreground: #000000;--color-border: #b7b7b7;--color-primary-background: #ffffff;--color-primary-foreground: #000000;--color-secondary-background: #f3f3f3;--color-secondary-foreground: #666666;--color-primary-action-background: #cccccc;--color-primary-action-foreground: #000000;--color-secondary-action-background: #f3f3f3;--color-secondary-action-foreground: #000000;--color-input-background: #ffffff;--color-input-foreground: #000000;--color-alert-background: #d9d9d9;--color-alert-foreground: #666666;--color-error-background: #666666;--color-error-foreground: #f3f3f3;--color-warning-background: #999999;--color-warning-foreground: #f3f3f3;--color-success-background: #efefef;--color-success-foreground: #666666;--margin-container: 0 0 1.2em 0;--width-border: .05em;font-family:var(--font-family);font-size:var(--font-size);background-color:var(--color-background);color:var(--color-foreground);font-weight:var(--font-weight-light)}.mtds {box-sizing:border-box}.mtds :is(:last-child){margin-bottom:0}.mtds .dropdown{--background-color: transparent;--background-color-options: var(--color-primary-background);--background-color-options-hover: var(--color-background-hover);--arrow-color: var(--color-alert-foreground);--border-color: var(--color-border);display:inline-block;position:relative;min-width:fit-content;cursor:pointer}.mtds .dropdown .text{background-color:var(--background-color);padding:.8em 2em .8em 0}.mtds .dropdown .text:after{content:"";position:absolute;right:.7em;top:1.2em;border:.45em solid transparent;border-color:var(--arrow-color) transparent transparent transparent}.mtds .dropdown .text.active:after{top:.8em;border-color:transparent transparent var(--arrow-color) transparent}.mtds .dropdown .options{position:absolute;min-width:fit-content;white-space:nowrap;text-align:left;background-color:var(--background-color-options);border:.1em solid var(--border-color)}.mtds .dropdown .options .option{padding:.8em 2em .8em .8em;background:var(--color-primary-background);cursor:pointer}.mtds .dropdown .options .option:hover{background-color:var(--background-color-options-hover)}.mtds .tabs{--margin: var(--margin-container);--foreground-color: var(--color-primary-foreground);--font-size-nav: 1.1em;--background-color-nav-item: transparent;--background-color-nav-item-active: var(--background-color-nav-item);--background-color-nav-item-hover: var(--color-background-hover);--padding-nav-item: .5em 1em;--margin-separator: .2em 0 1em 0;display:flex;flex-direction:column;margin:var(--margin)}.mtds .tabs .nav{display:flex;flex-direction:row;justify-content:center;color:var(--foreground-color);font-size:var(--font-size-nav)}.mtds .tabs .nav .item{background:var(--background-color-nav-item);cursor:pointer;padding:var(--padding-nav-item);width:100%;text-align:center}.mtds .tabs .nav .item:hover,.mtds .tabs .nav .item.active:hover{background:var(--background-color-nav-item-hover)}.mtds .tabs .nav .item.active{background:var(--background-color-nav-item-active);font-weight:var(--font-weight-bold)}.mtds .tabs .separator{margin:var(--margin-separator)}.mtds .avatar{border-radius:50%}.mtds .avatar.fit-fill{object-fit:fill}.mtds .avatar.fit-contain{object-fit:contain}.mtds .avatar.fit-cover{object-fit:cover}.mtds .avatar.fit-none{object-fit:none}.mtds .avatar.fit-scale-down{object-fit:scale-down}.mtds .border{--border-radius: 0;--margin: 0;--color: var(--color-border);--size-large: .3em;--size-medium: .2em;--size-small: .1em;--padding-large: 2em;--padding-medium: 1.5em;--padding-small: 1em;border-color:var(--color);border-radius:var(--border-radius);margin:var(--margin);min-width:0}.mtds .border.type-normal{border-style:solid}.mtds .border.type-dashed{border-style:dashed}.mtds .border.type-dotted{border-style:dotted}.mtds .border.size-large{border-width:var(--size-large)}.mtds .border.size-medium{border-width:var(--size-medium)}.mtds .border.size-small{border-width:var(--size-small)}.mtds .border.padding-none{padding:0}.mtds .border.padding-small{padding:var(--padding-small)}.mtds .border.padding-medium{padding:var(--padding-medium)}.mtds .border.padding-large{padding:var(--padding-large)}.mtds .button{--margin: 0;--border-radius: 2em;--border-style: solid;--border-color: var(--color-border);--border-width: var(--width-border);--size-small: .2em 2.2em;--size-medium: .5em 2.2em;--size-large: .9em 2.2em;--type-primary-background-color: var(--color-primary-action-background);--type-primary-foreground-color: var(--color-primary-action-foreground);--type-secondary-background-color: var(--color-secondary-action-background);--type-secondary-foreground-color: var(--color-secondary-action-foreground);--type-disabled-background-color: transparent;border-radius:var(--border-radius);border:0;cursor:pointer;margin:var(--margin);text-align:center;width:fit-content;font-family:inherit;font-size:inherit}.mtds .button.size-small{padding:var(--size-small)}.mtds .button.size-medium{padding:var(--size-medium)}.mtds .button.size-large{padding:var(--size-large)}.mtds .button.type-primary,.mtds .button.type-submit{background-color:var(--type-primary-background-color);color:var(--type-primary-foreground-color);font-weight:var(--font-weight-bold)}.mtds .button.type-primary:hover,.mtds .button.type-submit:hover{background-color:color-mix(in srgb,black 10%,var(--type-primary-background-color))}.mtds .button.type-primary:focus{background-color:color-mix(in srgb,black 20%,var(--type-primary-background-color))}.mtds .button.type-secondary{background-color:var(--type-secondary-background-color);color:var(--type-secondary-foreground-color);font-weight:var(--font-weight-normal)}.mtds .button.type-secondary:hover{background-color:color-mix(in srgb,black 10%,var(--type-secondary-background-color))}.mtds .button.type-secondary:focus{background-color:color-mix(in srgb,black 20%,var(--type-secondary-background-color))}.mtds .button.type-disabled{background-color:var(--type-disabled-background-color);border-color:var(--border-color);border-style:var(--border-style);border-width:var(--border-width);font-weight:var(--font-weight-light);cursor:default}.mtds .cell.sizing-fixed{flex-grow:0;flex-shrink:0;overflow:hidden}.mtds .cell.sizing-fluid{flex-grow:1;flex-shrink:1;overflow:auto}.mtds .clickarea{--margin: 0;--padding-large: 2em;--padding-medium: 1.5em;--padding-small: 1em;--padding-none: 0;cursor:pointer;display:inline-block;margin:var(--margin);padding:var(--padding)}.mtds .clickarea.padding-none{padding:var(--padding-none)}.mtds .clickarea.padding-small{padding:var(--padding-small)}.mtds .clickarea.padding-medium{padding:var(--padding-medium)}.mtds .clickarea.padding-large{padding:var(--padding-large)}.mtds .column{--gap-small: .4em;--gap-medium: 1em;--gap-large: 2em;display:flex;flex-direction:column;min-width:0;width:100%}.mtds .column>div,.mtds .column>h1,.mtds .column>h2,.mtds .column>h3,.mtds .column>p,.mtds .column>form,.mtds .column>label,.mtds .column>input,.mtds .column>textarea,.mtds .column>select{margin:0}.mtds .column.align-y-top{justify-content:flex-start}.mtds .column.align-y-center{justify-content:center}.mtds .column.align-y-bottom{justify-content:flex-end}.mtds .column.align-y-justify{justify-content:space-between}.mtds .column.align-x-left{align-items:flex-start}.mtds .column.align-x-center{align-items:center}.mtds .column.align-x-right{align-items:flex-end}.mtds .column.align-x-stretch{align-items:stretch}.mtds .column.gap-small{gap:var(--gap-small)}.mtds .column.gap-medium{gap:var(--gap-medium)}.mtds .column.gap-large{gap:var(--gap-large)}.mtds .column.wrap-nowrap{flex-wrap:nowrap}.mtds .column.wrap-wrap{flex-wrap:wrap}.mtds .form{--margin: var(--margin-container);margin:var(--margin);min-width:0}.mtds .grid{--gap-small: .5em;--gap-medium: 1em;--gap-large: 2em;display:grid;min-width:0}.mtds .grid>div,.mtds .grid>h1,.mtds .grid>h2,.mtds .grid>h3,.mtds .grid>p,.mtds .grid>form,.mtds .grid>label,.mtds .grid>input,.mtds .grid>textarea,.mtds .grid>select{margin:0}.mtds .grid.layout-two-columns{grid-template-columns:1fr 1fr}.mtds .grid.layout-three-columns{grid-template-columns:1fr 1fr 1fr}.mtds .grid.layout-four-columns{grid-template-columns:1fr 1fr 1fr 1fr}.mtds .grid.gap-small{grid-gap:var(--gap-small)}.mtds .grid.gap-medium{grid-gap:var(--gap-medium)}.mtds .grid.gap-large{grid-gap:var(--gap-large)}.mtds .icon{--icon-attachment: "📎";--icon-bookmark: "🔖";--icon-box: "☐";--icon-box-checked: "☑";--icon-box-crossed: "☒";--icon-calendar: "📅";--icon-caution: "☡";--icon-check: "✓";--icon-clock: "🕔";--icon-close: "✕";--icon-cloud: "☁";--icon-comment: "💬";--icon-diamond: "♦";--icon-eye: "👁";--icon-flag: "⚑";--icon-heart: "♥";--icon-home: "⌂";--icon-info: "ℹ";--icon-lock: "🔒";--icon-mail: "✉";--icon-music: "♫";--icon-phone: "☎";--icon-piece: "☮";--icon-plus: "➕";--icon-question: "❓";--icon-rain: "⛆";--icon-recycle: "♻";--icon-search: "🔍";--icon-settings: "⚙";--icon-star: "★";--icon-sun: "☀";--icon-tag: "🏷";--icon-trash: "🗑";--icon-umbrella: "☂";--icon-unlock: "🔓";--icon-user: "👤";--icon-video: "🎬";--icon-warning: "⚠";--icon-yinyang: "☯"}.mtds .icon.attachment:before{content:var(--icon-attachment)}.mtds .icon.bookmark:before{content:var(--icon-bookmark)}.mtds .icon.box:before{content:var(--icon-box)}.mtds .icon.box-checked:before{content:var(--icon-box-checked)}.mtds .icon.box-crossed:before{content:var(--icon-box-crossed)}.mtds .icon.calendar:before{content:var(--icon-calendar)}.mtds .icon.caution:before{content:var(--icon-caution)}.mtds .icon.check:before{content:var(--icon-check)}.mtds .icon.clock:before{content:var(--icon-clock)}.mtds .icon.close:before{content:var(--icon-close)}.mtds .icon.cloud:before{content:var(--icon-cloud)}.mtds .icon.comment:before{content:var(--icon-comment)}.mtds .icon.diamond:before{content:var(--icon-diamond)}.mtds .icon.eye:before{content:var(--icon-eye)}.mtds .icon.flag:before{content:var(--icon-flag)}.mtds .icon.heart:before{content:var(--icon-heart)}.mtds .icon.home:before{content:var(--icon-home)}.mtds .icon.info:before{content:var(--icon-info)}.mtds .icon.lock:before{content:var(--icon-lock)}.mtds .icon.mail:before{content:var(--icon-mail)}.mtds .icon.music:before{content:var(--icon-music)}.mtds .icon.phone:before{content:var(--icon-phone)}.mtds .icon.piece:before{content:var(--icon-piece)}.mtds .icon.plus:before{content:var(--icon-plus)}.mtds .icon.question:before{content:var(--icon-question)}.mtds .icon.rain:before{content:var(--icon-rain)}.mtds .icon.recycle:before{content:var(--icon-recycle)}.mtds .icon.search:before{content:var(--icon-search)}.mtds .icon.settings:before{content:var(--icon-settings)}.mtds .icon.star:before{content:var(--icon-star)}.mtds .icon.sun:before{content:var(--icon-sun)}.mtds .icon.tag:before{content:var(--icon-tag)}.mtds .icon.trash:before{content:var(--icon-trash)}.mtds .icon.umbrella:before{content:var(--icon-umbrella)}.mtds .icon.unlock:before{content:var(--icon-unlock)}.mtds .icon.user:before{content:var(--icon-user)}.mtds .icon.video:before{content:var(--icon-video)}.mtds .icon.warning:before{content:var(--icon-warning)}.mtds .icon.yinyang:before{content:var(--icon-yinyang)}.mtds .image.fit-fill{object-fit:fill}.mtds .image.fit-contain{object-fit:contain}.mtds .image.fit-cover{object-fit:cover}.mtds .image.fit-none{object-fit:none}.mtds .image.fit-scale-down{object-fit:scale-down}.mtds .input{--margin: 0 0 1em 0;--gap: .5em;display:flex;flex-direction:column;gap:var(--gap);margin:var(--margin)}.mtds .input .label{font-weight:var(--font-weight-medium)}.mtds .label{--margin: 0;margin:var(--margin)}.mtds .link{--color: var(--color-primary-foreground);--color-hover: var(--color-primary-foreground);--text-decoration: dotted underline;--text-decoration-hover: underline;color:var(--color);text-decoration:var(--text-decoration)}.mtds .link:hover{color:var(--color-hover);text-decoration:var(--text-decoration-hover)}.mtds .modal{border:0;padding:0;min-width:0}.mtds .modal.sizing-full{width:100%}.mtds .modal.sizing-content{width:fit-content}.mtds .panel{--border-radius: 0;--margin: 0 0 1.5em 0;--padding-large: 2em;--padding-medium: 1.5em;--padding-small: 1em;--type-alert-background-color: var(--color-alert-background);--type-alert-foreground-color: var(--color-alert-foreground);--type-error-background-color: var(--color-error-background);--type-error-foreground-color: var(--color-error-foreground);--type-normal-background-color: var(--color-secondary-background);--type-normal-foreground-color: var(--color-primary-foreground);--type-success-background-color: var(--color-success-background);--type-success-foreground-color: var(--color-success-foreground);--type-warning-background-color: var(--color-warning-background);--type-warning-foreground-color: var(--color-warning-foreground);border-radius:var(--border-radius);padding:var(--padding);margin:var(--margin);min-width:0}.mtds .panel.type-alert{background-color:var(--type-alert-background-color);color:var(--type-alert-foreground-color)}.mtds .panel.type-error{background-color:var(--type-error-background-color);color:var(--type-error-foreground-color)}.mtds .panel.type-normal{background-color:var(--type-normal-background-color);color:var(--type-normal-foreground-color)}.mtds .panel.type-success{background-color:var(--type-success-background-color);color:var(--type-success-foreground-color)}.mtds .panel.type-warning{background-color:var(--type-warning-background-color);color:var(--type-warning-foreground-color)}.mtds .panel.type-transparent{background-color:transparent}.mtds .panel.padding-small{padding:var(--padding-small)}.mtds .panel.padding-medium{padding:var(--padding-medium)}.mtds .panel.padding-large{padding:var(--padding-large)}.mtds .paragraph{--margin: var(--margin-container);--line-height: 1.5em;--size-large: 1.5em;--size-medium: 1em;--size-small: .75em;margin:var(--margin);line-height:var(--line-height);min-width:0}.mtds .paragraph.size-large{font-size:var(--size-large)}.mtds .paragraph.size-medium{font-size:var(--size-medium)}.mtds .paragraph.size-small{font-size:var(--size-small)}.mtds .row{--gap-small: .4em;--gap-medium: 1em;--gap-large: 2em;display:flex;flex-direction:row;min-width:0;height:100%}.mtds .row>div,.mtds .row>h1,.mtds .row>h2,.mtds .row>h3,.mtds .row>p,.mtds .row>form,.mtds .row>label,.mtds .row>input,.mtds .row>textarea,.mtds .row>select{margin:0}.mtds .row.align-x-left{justify-content:flex-start}.mtds .row.align-x-center{justify-content:center}.mtds .row.align-x-right{justify-content:flex-end}.mtds .row.align-x-justify{justify-content:space-between}.mtds .row.align-y-top{align-items:flex-start}.mtds .row.align-y-center{align-items:center}.mtds .row.align-y-bottom{align-items:flex-end}.mtds .row.align-y-stretch{align-items:stretch}.mtds .row.gap-small{gap:var(--gap-small)}.mtds .row.gap-medium{gap:var(--gap-medium)}.mtds .row.gap-large{gap:var(--gap-large)}.mtds .row.wrap-nowrap{flex-wrap:nowrap}.mtds .row.wrap-wrap{flex-wrap:wrap}.mtds .ruler{--size-small: .1rem;--size-medium: .2rem;--size-large: .3rem;--color: var(--color-border);background-color:var(--color)}.mtds .ruler.direction-horizontal{width:100%}.mtds .ruler.direction-horizontal.size-small{height:var(--size-small)}.mtds .ruler.direction-horizontal.size-medium{height:var(--size-medium)}.mtds .ruler.direction-horizontal.size-large{height:var(--size-large)}.mtds .ruler.direction-vertical{height:100%}.mtds .ruler.direction-vertical.size-small{width:var(--size-small)}.mtds .ruler.direction-vertical.size-medium{width:var(--size-medium)}.mtds .ruler.direction-vertical.size-large{width:var(--size-large)}.mtds .select{--margin: 0;--size-small: .4em;--size-medium: .8em;--size-large: 1.2em;--border-style: solid;--border-color: var(--color-border);--border-width: var(--width-border);margin:var(--margin);padding:var(--padding);border-style:var(--border-style);border-width:var(--border-width);border-color:var(--border-color);background-color:var(--color-input-background);font-family:inherit;font-size:inherit}.mtds .select:focus-visible{outline-color:color-mix(in srgb,black 10%,var(--border-color))}.mtds .select.size-small{padding:var(--size-small)}.mtds .select.size-medium{padding:var(--size-medium)}.mtds .select.size-large{padding:var(--size-large)}.mtds .spinner{--color: var(--color-border);--size: 2em;--speed: 1.2s;--thickness: .3em;display:inline-block;width:var(--size);height:var(--size)}.mtds .spinner:after{content:" ";display:block;width:var(--size);height:var(--size);border-radius:50%;border:var(--thickness) solid var(--color);border-color:transparent var(--color) transparent var(--color)}.mtds .spinner.active:after{animation:ds-spinner var(--speed) linear infinite}@keyframes ds-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.mtds .text{--primary-color: var(--color-primary-foreground);--secondary-color: var(--color-secondary-foreground);--size-small: .9em;--size-medium: 1em;--size-large: 1.2em;display:inline-block}.mtds .text.type-primary{color:var(--primary-color)}.mtds .text.type-secondary{color:var(--secondary-color)}.mtds .text.size-small{font-size:var(--size-small)}.mtds .text.size-medium{font-size:var(--size-medium)}.mtds .text.size-large{font-size:var(--size-large)}.mtds .text.weight-light{font-weight:var(--font-weight-light)}.mtds .text.weight-normal{font-weight:var(--font-weight-normal)}.mtds .text.weight-bold{font-weight:var(--font-weight-bold)}.mtds .text.wrap-none{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.mtds .text.wrap-normal{white-space:normal}.mtds .text.wrap-break-word{word-wrap:break-word}.mtds .textarea{--margin: 0;--size-small: .4em;--size-medium: .8em;--size-large: 1.2em;--border-style: solid;--border-color: var(--color-border);--border-width: var(--width-border);margin:var(--margin);padding:var(--padding);border-style:var(--border-style);border-width:var(--border-width);border-color:var(--border-color);background-color:var(--color-input-background);font-family:inherit;font-size:inherit;resize:vertical;width:100%}.mtds .textarea:focus-visible{outline-color:color-mix(in srgb,black 10%,var(--border-color))}.mtds .textarea.size-small{padding:var(--size-small)}.mtds .textarea.size-medium{padding:var(--size-medium)}.mtds .textarea.size-large{padding:var(--size-large)}.mtds .textbox{--margin: 0;--size-small: .4em;--size-medium: .8em;--size-large: 1.2em;--border-style: solid;--border-color: var(--color-border);--border-width: var(--width-border);margin:var(--margin);border-style:var(--border-style);border-width:var(--border-width);border-color:var(--border-color);background-color:var(--color-input-background);font-family:inherit;font-size:inherit}.mtds .textbox:focus-visible{outline-color:color-mix(in srgb,black 10%,var(--border-color))}.mtds .textbox.size-small{padding:var(--size-small)}.mtds .textbox.size-medium{padding:var(--size-medium)}.mtds .textbox.size-large{padding:var(--size-large)}.mtds .title{--margin: 0 0 .8em 0;--size-large: 2em;--size-medium: 1.5em;--size-small: 1em;margin:var(--margin)}.mtds .title.size-large{font-size:var(--size-large)}.mtds .title.size-medium{font-size:var(--size-medium)}.mtds .title.size-small{font-size:var(--size-small)}