@maskingtech/designsystem 0.0.2 → 0.0.4
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.
- package/README.md +2 -2
- package/dist/mtds.css +1 -1
- package/dist/mtds.d.ts +194 -98
- package/dist/mtds.js +247 -439
- package/package.json +11 -10
package/README.md
CHANGED
|
@@ -20,8 +20,8 @@ import { DesignSystem } from '@maskingtech/designsystem';
|
|
|
20
20
|
import '@maskingtech/designsystem/style.css';
|
|
21
21
|
|
|
22
22
|
<DesignSystem>
|
|
23
|
-
{/* elements and components here */}
|
|
23
|
+
{/* layout, elements and components here */}
|
|
24
24
|
</DesignSystem>
|
|
25
25
|
```
|
|
26
26
|
|
|
27
|
-
The list of elements, components, and customization options can be found in the [documentation](docs/README.md).
|
|
27
|
+
The list of layouts, elements, components, and customization options can be found in the [documentation](docs/README.md).
|
package/dist/mtds.css
CHANGED
|
@@ -1 +1 @@
|
|
|
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)}
|
|
1
|
+
.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;--color: var(--color-border);--margin: 0;--size-small: var(--element-border-small);--size-medium: var(--element-border-medium);--size-large: var(--element-border-large);--padding-small: var(--container-padding-small);--padding-medium: var(--container-padding-medium);--padding-large: var(--container-padding-large);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: var(--input-border-style);--border-color-disabled: var(--input-border-color);--border-small: var(--input-border-small);--border-medium: var(--input-border-medium);--border-large: var(--input-border-large);--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-style:var(--border-style);border-color:var(--border-color);cursor:pointer;margin:var(--margin);text-align:center;width:fit-content;font-family:inherit;font-size:inherit}.mtds .button.border-none{border-width:0}.mtds .button.border-small{border-width:var(--border-small)}.mtds .button.border-medium{border-width:var(--border-medium)}.mtds .button.border-large{border-width:var(--border-large)}.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);border-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{--hover-color: color-mix(in srgb, black 10%, var(--type-primary-background-color));background-color:var(--hover-color);border-color:var(--hover-color)}.mtds .button.type-primary:focus{--hover-color: color-mix(in srgb, black 20%, var(--type-primary-background-color));background-color:var(--hover-color);border-color:var(--hover-color)}.mtds .button.type-secondary{background-color:var(--type-secondary-background-color);border-color:var(--type-secondary-background-color);color:var(--type-secondary-foreground-color);font-weight:var(--font-weight-normal)}.mtds .button.type-secondary:hover{--hover-color: color-mix(in srgb, black 10%, var(--type-secondary-background-color));background-color:var(--hover-color);border-color:var(--hover-color)}.mtds .button.type-secondary:focus{--hover-color: color-mix(in srgb, black 20%, var(--type-secondary-background-color));background-color:var(--hover-color);border-color:var(--hover-color)}.mtds .button.type-disabled{background-color:var(--type-disabled-background-color);border-color:var(--border-color-disabled);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 .checkbox input{accent-color:var(--color-input-foreground);margin-right:.5em}.mtds .clickarea{--margin: 0;--padding-small: var(--container-padding-small);--padding-medium: var(--container-padding-medium);--padding-large: var(--container-padding-large);cursor:pointer;display:inline-block;margin:var(--margin)}.mtds .clickarea.padding-none{padding:0}.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: var(--container-gap-small);--gap-medium: var(--container-gap-medium);--gap-large: var(--container-gap-large);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 .datetime{--margin: 0;--border-style: var(--input-border-style);--border-color: var(--input-border-color);--border-small: var(--input-border-small);--border-medium: var(--input-border-medium);--border-large: var(--input-border-large);--size-small: var(--input-padding-small);--size-medium: var(--input-padding-medium);--size-large: var(--input-padding-large);margin:var(--margin);border-style:var(--border-style);border-color:var(--border-color);background-color:var(--color-input-background);font-family:inherit;font-size:inherit}.mtds .datetime:focus-visible{outline-color:color-mix(in srgb,black 10%,var(--border-color))}.mtds .datetime.border-none{border:0}.mtds .datetime.border-small{border-width:var(--border-small)}.mtds .datetime.border-medium{border-width:var(--border-medium)}.mtds .datetime.border-large{border-width:var(--border-large)}.mtds .datetime.size-small{padding:var(--size-small)}.mtds .datetime.size-medium{padding:var(--size-medium)}.mtds .datetime.size-large{padding:var(--size-large)}.mtds .form{margin:0;padding:0;min-width:0}.mtds .grid{--gap-small: var(--container-padding-small);--gap-medium: var(--container-padding-medium);--gap-large: var(--container-padding-large);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-pencil: "✎";--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.pencil:before{content:var(--icon-pencil)}.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,.mtds .input input,.mtds .input textarea,.mtds .input select{width:100%}.mtds .label{--margin: 0;font-weight:var(--font-weight-medium);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;--padding-small: var(--container-padding-small);--padding-medium: var(--container-padding-medium);--padding-large: var(--container-padding-large);--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: 0;--line-height: 1.5em;--size-small: var(--element-font-small);--size-medium: var(--element-font-medium);--size-large: var(--element-font-large);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: var(--container-gap-small);--gap-medium: var(--container-gap-medium);--gap-large: var(--container-gap-large);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{--color: var(--color-border);--size-small: var(--element-border-small);--size-medium: var(--element-border-medium);--size-large: var(--element-border-large);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;--border-style: var(--input-border-style);--border-color: var(--input-border-color);--border-small: var(--input-border-small);--border-medium: var(--input-border-medium);--border-large: var(--input-border-large);--size-small: var(--input-padding-small);--size-medium: var(--input-padding-medium);--size-large: var(--input-padding-large);margin:var(--margin);padding:var(--padding);border-style:var(--border-style);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.border-none{border:0}.mtds .select.border-small{border-width:var(--border-small)}.mtds .select.border-medium{border-width:var(--border-medium)}.mtds .select.border-large{border-width:var(--border-large)}.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 .table{--padding-large: 1em;--padding-medium: .7em;--padding-small: .4em;--header-background-color: var(--color-border);--header-forground-color: var(--color-primary-foreground);--row-odd-color: var(--color-primary-background);--row-even-color: var(--color-secondary-background);--footer-border-small: var(--element-border-small);--footer-border-medium: var(--element-border-medium);--footer-border-large: var(--element-border-large);--footer-border-color: var(--color-border);--footer-forground-color: var(--color-primary-foreground);border-collapse:collapse;margin:0}.mtds .table thead{background-color:var(--header-background-color);color:var(--header-forground-color);font-weight:700;margin:0}.mtds .table tbody tr:nth-child(odd){background-color:var(--row-odd-color)}.mtds .table tbody tr:nth-child(2n){background-color:var(--row-even-color)}.mtds .table tbody.border-none{border-bottom:0}.mtds .table tbody.border-small{border-bottom:var(--footer-border-small) solid var(--footer-border-color)}.mtds .table tbody.border-medium{border-bottom:var(--footer-border-medium) solid var(--footer-border-color)}.mtds .table tbody.border-large{border-bottom:var(--footer-border-large) solid var(--footer-border-color)}.mtds .table tfoot{color:var(--footer-forground-color);font-weight:700}.mtds .table td.align-x-left{text-align:left}.mtds .table td.align-x-center{text-align:center}.mtds .table td.align-x-right{text-align:right}.mtds .table td.align-y-top{vertical-align:top}.mtds .table td.align-y-center{vertical-align:center}.mtds .table td.align-y-bottom{vertical-align:bottom}.mtds .table td.size-95{width:95%}.mtds .table td.size-90{width:90%}.mtds .table td.size-85{width:85%}.mtds .table td.size-80{width:80%}.mtds .table td.size-75{width:75%}.mtds .table td.size-70{width:70%}.mtds .table td.size-65{width:65%}.mtds .table td.size-60{width:60%}.mtds .table td.size-55{width:55%}.mtds .table td.size-50{width:50%}.mtds .table td.size-45{width:45%}.mtds .table td.size-40{width:40%}.mtds .table td.size-35{width:35%}.mtds .table td.size-30{width:30%}.mtds .table td.size-25{width:25%}.mtds .table td.size-20{width:20%}.mtds .table td.size-15{width:15%}.mtds .table td.size-10{width:10%}.mtds .table td.size-5{width:5%}.mtds .table td.size-fit{width:auto}.mtds .table.padding-large td{padding:var(--padding-large)}.mtds .table.padding-medium td{padding:var(--padding-medium)}.mtds .table.padding-small td{padding:var(--padding-small)}.mtds .text{--primary-color: var(--color-primary-foreground);--secondary-color: var(--color-secondary-foreground);--size-small: var(--element-font-small);--size-medium: var(--element-font-medium);--size-large: var(--element-font-large);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;--border-style: var(--input-border-style);--border-color: var(--input-border-color);--border-small: var(--input-border-small);--border-medium: var(--input-border-medium);--border-large: var(--input-border-large);--size-small: var(--input-padding-small);--size-medium: var(--input-padding-medium);--size-large: var(--input-padding-large);margin:var(--margin);padding:var(--padding);border-style:var(--border-style);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.border-none{border:0}.mtds .textarea.border-small{border-width:var(--border-small)}.mtds .textarea.border-medium{border-width:var(--border-medium)}.mtds .textarea.border-large{border-width:var(--border-large)}.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;--border-style: var(--input-border-style);--border-color: var(--input-border-color);--border-small: var(--input-border-small);--border-medium: var(--input-border-medium);--border-large: var(--input-border-large);--size-small: var(--input-padding-small);--size-medium: var(--input-padding-medium);--size-large: var(--input-padding-large);margin:var(--margin);border-style:var(--border-style);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.border-none{border:0}.mtds .textbox.border-small{border-width:var(--border-small)}.mtds .textbox.border-medium{border-width:var(--border-medium)}.mtds .textbox.border-large{border-width:var(--border-large)}.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-small: 1em;--size-medium: 1.5em;--size-large: 2em;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)}.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 .layout-centered{--content-max-width: 696px;container-type:inline-size;display:flex;align-items:center;justify-content:center;width:100vw;min-height:100vh}.mtds .layout-centered>.content{box-sizing:border-box;padding:1rem;width:100vw;max-width:var(--content-max-width);text-align:center}@container (max-width: 499px){.mtds .layout-centered>.content{padding:.5rem}}.mtds .layout-sidebar{--header-height: 3.4em;--footer-height: 4.4em;--modal-width: 700px;--sidebar-width: 260px;--content-width: 640px;--content-gap: 2em;--calc-gap-half: calc(var(--content-gap) / 2);--calc-content-offset: calc((var(--content-width) - var(--sidebar-width) + var(--calc-gap-half)) / 2);--left-width: calc(50vw - var(--calc-content-offset));--right-width: calc(100vw - var(--left-width));container-type:size;height:100dvh;overflow:hidden}.mtds .layout-sidebar>header{background-color:var(--background-color);border-bottom:.1em solid var(--border-color);display:none;padding:.5em 1em;height:var(--header-height);width:100vw;top:0;left:0;position:absolute;z-index:1000}.mtds .layout-sidebar>.content{display:flex;flex-direction:row;gap:var(--content-gap);width:100vw;height:100vh;max-height:100vh}.mtds .layout-sidebar>.content .left{display:flex;flex-direction:row;justify-content:flex-end;width:var(--left-width)}.mtds .layout-sidebar>.content .left aside{flex-shrink:0;flex-grow:0;padding:1em 0;width:var(--sidebar-width)}.mtds .layout-sidebar>.content .right{display:flex;flex-direction:column;justify-content:flex-start;overflow-y:auto;overscroll-behavior:none;width:var(--right-width)}.mtds .layout-sidebar>.content .right main{flex-shrink:0;flex-grow:0;padding:1em 0;width:var(--content-width)}.mtds .layout-sidebar>.content .modal{margin-top:2em;max-width:var(--modal-width)}.mtds .layout-sidebar>footer{background-color:var(--background-color);border-top:.1em solid var(--border-color);display:none;padding:.4em 1em;width:100vw;left:0;bottom:0;position:absolute;z-index:1000}@container (max-width: 959px){.mtds .layout-sidebar>.content .left{display:none}.mtds .layout-sidebar>.content .right{width:100vw;padding:0 1em;position:absolute;top:var(--header-height);bottom:var(--footer-height)}.mtds .layout-sidebar>.content .right main{width:100%}.mtds .layout-sidebar>header,.mtds .layout-sidebar>footer{display:block}}@container (max-width: 499px){.mtds .layout-sidebar>.content .right{padding:0 .5em}.mtds .layout-sidebar>header,.mtds .layout-sidebar>footer{padding:.4em .5em}}.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;--element-border-small: .1em;--element-border-medium: .2em;--element-border-large: .3em;--element-font-small: .9em;--element-font-medium: 1em;--element-font-large: 1.2em;--container-gap-small: .4em;--container-gap-medium: 1em;--container-gap-large: 2em;--container-padding-small: 1em;--container-padding-medium: 1.5em;--container-padding-large: 2em;--input-border-style: solid;--input-border-color: var(--color-border);--input-border-small: .05em;--input-border-medium: .075em;--input-border-large: .1em;--input-padding-small: .4em;--input-padding-medium: .8em;--input-padding-large: 1.2em;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}
|
package/dist/mtds.d.ts
CHANGED
|
@@ -5,71 +5,77 @@ import { ReactElement } from 'react';
|
|
|
5
5
|
import { ReactNode } from 'react';
|
|
6
6
|
import { RefAttributes } from 'react';
|
|
7
7
|
|
|
8
|
-
export declare function Avatar({ source, title, alt, width, height, fit }:
|
|
8
|
+
export declare function Avatar({ source, title, alt, width, height, fit }: Props): JSX.Element;
|
|
9
9
|
|
|
10
|
-
export declare function Border({ type, size, padding, children }:
|
|
10
|
+
export declare function Border({ type, size, padding, children }: Props_2): JSX.Element;
|
|
11
11
|
|
|
12
|
-
export declare function Button({ type, size, text, onClick }:
|
|
12
|
+
export declare function Button({ type, border, size, text, onClick }: Props_3): JSX.Element;
|
|
13
13
|
|
|
14
|
-
export declare function Cell({ sizing, children }:
|
|
14
|
+
export declare function Cell({ sizing, children }: Props_4): JSX.Element;
|
|
15
15
|
|
|
16
|
-
export declare function
|
|
16
|
+
export declare function CenteredLayout({ children }: Props_35): JSX.Element;
|
|
17
17
|
|
|
18
|
-
export declare
|
|
18
|
+
export declare const CheckBox: ForwardRefExoticComponent<Props_5 & RefAttributes<HTMLInputElement>>;
|
|
19
19
|
|
|
20
|
-
export declare function
|
|
20
|
+
export declare function ClickArea({ padding, onClick, children }: Props_6): JSX.Element;
|
|
21
21
|
|
|
22
|
-
export declare function
|
|
22
|
+
export declare function Column({ alignX, alignY, gap, wrap, children }: Props_7): JSX.Element;
|
|
23
23
|
|
|
24
|
-
export declare const
|
|
24
|
+
export declare const DateTime: ForwardRefExoticComponent<Props_8 & RefAttributes<HTMLInputElement>>;
|
|
25
25
|
|
|
26
|
-
export declare function
|
|
26
|
+
export declare function DesignSystem({ children }: Props_37): JSX.Element;
|
|
27
27
|
|
|
28
|
-
|
|
28
|
+
declare function Element_2({ children }: Props_26): JSX.Element;
|
|
29
29
|
|
|
30
|
-
declare function
|
|
30
|
+
declare function Element_3({ border, children }: Props_29): JSX.Element;
|
|
31
|
+
|
|
32
|
+
declare function Element_4({ children }: Props_30): JSX.Element;
|
|
33
|
+
|
|
34
|
+
declare function Element_5({ children }: Props_27): JSX.Element;
|
|
35
|
+
|
|
36
|
+
declare function Element_6({ colspan, rowspan, alignX, alignY, size, children }: Props_28): JSX.Element;
|
|
37
|
+
|
|
38
|
+
export declare const Form: ForwardRefExoticComponent<Props_9 & RefAttributes<HTMLFormElement>>;
|
|
39
|
+
|
|
40
|
+
export declare function Grid({ layout, gap, children }: Props_10): JSX.Element;
|
|
41
|
+
|
|
42
|
+
export declare function Icon({ type }: Props_11): JSX.Element;
|
|
43
|
+
|
|
44
|
+
declare function Image_2({ source, title, alt, width, height, fit }: Props_12): JSX.Element;
|
|
31
45
|
export { Image_2 as Image }
|
|
32
46
|
|
|
33
|
-
export declare function Input({ label, element }:
|
|
47
|
+
export declare function Input({ label, element }: Props_13): JSX.Element;
|
|
34
48
|
|
|
35
|
-
export declare function Label({ value }:
|
|
49
|
+
export declare function Label({ value }: Props_14): JSX.Element;
|
|
36
50
|
|
|
37
|
-
export declare function Link({ url, target, children }:
|
|
51
|
+
export declare function Link({ url, target, children }: Props_18): JSX.Element;
|
|
38
52
|
|
|
39
|
-
export declare function Modal({ open, sizing, children }:
|
|
53
|
+
export declare function Modal({ open, sizing, children }: Props_19): JSX.Element;
|
|
40
54
|
|
|
41
|
-
export declare function Panel({ type, padding, children }:
|
|
55
|
+
export declare function Panel({ type, padding, children }: Props_20): JSX.Element;
|
|
42
56
|
|
|
43
|
-
export declare function Paragraph({ size, children }:
|
|
57
|
+
export declare function Paragraph({ size, children }: Props_21): JSX.Element;
|
|
44
58
|
|
|
45
59
|
declare type Props = {
|
|
46
|
-
readonly
|
|
60
|
+
readonly source: string;
|
|
61
|
+
readonly title?: string;
|
|
62
|
+
readonly alt?: string;
|
|
63
|
+
readonly width?: string;
|
|
64
|
+
readonly height?: string;
|
|
65
|
+
readonly fit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
|
|
47
66
|
};
|
|
48
67
|
|
|
49
68
|
declare type Props_10 = {
|
|
50
|
-
readonly
|
|
51
|
-
readonly
|
|
52
|
-
readonly gap?: 'large' | 'medium' | 'small' | 'none';
|
|
53
|
-
readonly wrap?: 'wrap' | 'nowrap';
|
|
69
|
+
readonly layout: 'two-columns' | 'three-columns' | 'four-columns';
|
|
70
|
+
readonly gap?: 'none' | 'small' | 'medium' | 'large';
|
|
54
71
|
readonly children: ReactNode;
|
|
55
72
|
};
|
|
56
73
|
|
|
57
74
|
declare type Props_11 = {
|
|
58
|
-
readonly
|
|
59
|
-
readonly submitHandler?: (form: HTMLFormElement) => void;
|
|
75
|
+
readonly type: 'attachment' | 'bookmark' | 'box' | 'box-checked' | 'box-crossed' | 'calendar' | 'caution' | 'check' | 'clock' | 'close' | 'cloud' | 'comment' | 'diamond' | 'eye' | 'flag' | 'heart' | 'home' | 'info' | 'lock' | 'mail' | 'music' | 'pencil' | 'phone' | 'piece' | 'plus' | 'question' | 'rain' | 'recycle' | 'search' | 'settings' | 'star' | 'sun' | 'tag' | 'trash' | 'umbrella' | 'unlock' | 'user' | 'video' | 'warning' | 'yinyang';
|
|
60
76
|
};
|
|
61
77
|
|
|
62
78
|
declare type Props_12 = {
|
|
63
|
-
readonly layout: 'two-columns' | 'three-columns' | 'four-columns';
|
|
64
|
-
readonly gap?: 'large' | 'medium' | 'small' | 'none';
|
|
65
|
-
readonly children: ReactNode;
|
|
66
|
-
};
|
|
67
|
-
|
|
68
|
-
declare type Props_13 = {
|
|
69
|
-
readonly type: 'attachment' | 'bookmark' | 'box' | 'box-checked' | 'box-crossed' | 'calendar' | 'caution' | 'check' | 'clock' | 'close' | 'cloud' | 'comment' | 'diamond' | 'eye' | 'flag' | 'heart' | 'home' | 'info' | 'lock' | 'mail' | 'music' | 'phone' | 'piece' | 'plus' | 'question' | 'rain' | 'recycle' | 'search' | 'settings' | 'star' | 'sun' | 'tag' | 'trash' | 'umbrella' | 'unlock' | 'user' | 'video' | 'warning' | 'yinyang';
|
|
70
|
-
};
|
|
71
|
-
|
|
72
|
-
declare type Props_14 = {
|
|
73
79
|
readonly source: string;
|
|
74
80
|
readonly title?: string;
|
|
75
81
|
readonly alt?: string;
|
|
@@ -78,170 +84,260 @@ declare type Props_14 = {
|
|
|
78
84
|
readonly fit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
|
|
79
85
|
};
|
|
80
86
|
|
|
81
|
-
declare type
|
|
82
|
-
readonly label: ReactElement<
|
|
83
|
-
readonly element: ReactElement<
|
|
87
|
+
declare type Props_13 = {
|
|
88
|
+
readonly label: ReactElement<Props_14>;
|
|
89
|
+
readonly element: ReactElement<Props_15> | ReactElement<Props_16> | ReactElement<Props_17>;
|
|
84
90
|
};
|
|
85
91
|
|
|
86
|
-
declare type
|
|
92
|
+
declare type Props_14 = {
|
|
87
93
|
readonly value: string;
|
|
88
94
|
};
|
|
89
95
|
|
|
90
|
-
declare type
|
|
96
|
+
declare type Props_15 = {
|
|
91
97
|
readonly name: string;
|
|
92
98
|
readonly placeholder?: string;
|
|
99
|
+
readonly defaultValue?: string;
|
|
93
100
|
readonly value?: string;
|
|
94
101
|
readonly limit?: number;
|
|
95
102
|
readonly pattern?: string;
|
|
96
103
|
readonly title?: string;
|
|
97
|
-
readonly
|
|
104
|
+
readonly type?: 'email' | 'number' | 'password' | 'search' | 'text' | 'tel' | 'url';
|
|
105
|
+
readonly border?: 'none' | 'small' | 'medium' | 'large';
|
|
106
|
+
readonly size?: 'small' | 'medium' | 'large';
|
|
98
107
|
readonly required?: boolean;
|
|
99
108
|
readonly onChange?: ChangeEventHandler<HTMLInputElement>;
|
|
100
109
|
};
|
|
101
110
|
|
|
102
|
-
declare type
|
|
111
|
+
declare type Props_16 = {
|
|
103
112
|
readonly name: string;
|
|
104
113
|
readonly placeholder?: string;
|
|
114
|
+
readonly defaultValue?: string;
|
|
105
115
|
readonly value?: string;
|
|
106
|
-
readonly
|
|
116
|
+
readonly border?: 'none' | 'small' | 'medium' | 'large';
|
|
117
|
+
readonly size?: 'small' | 'medium' | 'large';
|
|
107
118
|
readonly rows?: number;
|
|
108
119
|
readonly limit?: number;
|
|
109
120
|
readonly onChange?: ChangeEventHandler<HTMLTextAreaElement>;
|
|
110
121
|
};
|
|
111
122
|
|
|
112
|
-
declare type
|
|
123
|
+
declare type Props_17 = {
|
|
113
124
|
readonly name: string;
|
|
114
125
|
readonly options: Map<string, string>;
|
|
126
|
+
readonly defaultValue?: string;
|
|
115
127
|
readonly value?: string;
|
|
116
|
-
readonly
|
|
128
|
+
readonly border?: 'none' | 'small' | 'medium' | 'large';
|
|
129
|
+
readonly size?: 'small' | 'medium' | 'large';
|
|
117
130
|
readonly onChange?: ChangeEventHandler<HTMLSelectElement>;
|
|
118
131
|
};
|
|
119
132
|
|
|
120
|
-
declare type
|
|
121
|
-
readonly options: Map<string, string>;
|
|
122
|
-
readonly selected?: string;
|
|
123
|
-
readonly onChange?: (oldKey: string, newKey: string) => void;
|
|
124
|
-
};
|
|
125
|
-
|
|
126
|
-
declare type Props_20 = {
|
|
133
|
+
declare type Props_18 = {
|
|
127
134
|
readonly url?: string;
|
|
128
135
|
readonly target?: string;
|
|
129
136
|
readonly children: ReactNode;
|
|
130
137
|
};
|
|
131
138
|
|
|
132
|
-
declare type
|
|
133
|
-
readonly open
|
|
139
|
+
declare type Props_19 = {
|
|
140
|
+
readonly open?: boolean;
|
|
134
141
|
readonly sizing?: 'full' | 'content';
|
|
135
142
|
readonly children?: ReactNode;
|
|
136
143
|
};
|
|
137
144
|
|
|
138
|
-
declare type
|
|
145
|
+
declare type Props_2 = {
|
|
146
|
+
readonly type?: 'normal' | 'dashed' | 'dotted';
|
|
147
|
+
readonly size?: 'small' | 'large' | 'medium';
|
|
148
|
+
readonly padding?: 'none' | 'small' | 'medium' | 'large';
|
|
149
|
+
readonly children?: ReactNode;
|
|
150
|
+
};
|
|
151
|
+
|
|
152
|
+
declare type Props_20 = {
|
|
139
153
|
readonly type?: 'normal' | 'alert' | 'warning' | 'success' | 'error' | 'transparent';
|
|
140
|
-
readonly padding?: '
|
|
154
|
+
readonly padding?: 'small' | 'medium' | 'large';
|
|
141
155
|
readonly children?: ReactNode;
|
|
142
156
|
};
|
|
143
157
|
|
|
144
|
-
declare type
|
|
145
|
-
readonly size?: '
|
|
158
|
+
declare type Props_21 = {
|
|
159
|
+
readonly size?: 'small' | 'medium' | 'large';
|
|
146
160
|
readonly children: ReactNode;
|
|
147
161
|
};
|
|
148
162
|
|
|
149
|
-
declare type
|
|
163
|
+
declare type Props_22 = {
|
|
150
164
|
readonly alignX?: 'left' | 'center' | 'right' | 'justify';
|
|
151
165
|
readonly alignY?: 'top' | 'center' | 'bottom' | 'stretch';
|
|
152
|
-
readonly gap?: '
|
|
166
|
+
readonly gap?: 'none' | 'small' | 'medium' | 'large';
|
|
153
167
|
readonly wrap?: 'wrap' | 'nowrap';
|
|
154
168
|
readonly children: ReactNode;
|
|
155
169
|
};
|
|
156
170
|
|
|
157
|
-
declare type
|
|
171
|
+
declare type Props_23 = {
|
|
158
172
|
readonly direction: 'horizontal' | 'vertical';
|
|
159
173
|
readonly size?: 'small' | 'medium' | 'large';
|
|
160
174
|
};
|
|
161
175
|
|
|
162
|
-
declare type
|
|
176
|
+
declare type Props_24 = {
|
|
163
177
|
readonly active?: boolean;
|
|
164
178
|
};
|
|
165
179
|
|
|
180
|
+
declare type Props_25 = {
|
|
181
|
+
readonly padding?: 'small' | 'medium' | 'large';
|
|
182
|
+
readonly children?: ReactElement<Props_26> | ReactElement<Props_29> | ReactElement<Props_30>[];
|
|
183
|
+
};
|
|
184
|
+
|
|
185
|
+
declare type Props_26 = {
|
|
186
|
+
readonly children?: ReactElement<Props_27>;
|
|
187
|
+
};
|
|
188
|
+
|
|
166
189
|
declare type Props_27 = {
|
|
190
|
+
readonly children?: ReactElement<Props_28>;
|
|
191
|
+
};
|
|
192
|
+
|
|
193
|
+
declare type Props_28 = {
|
|
194
|
+
readonly colspan?: number;
|
|
195
|
+
readonly rowspan?: number;
|
|
196
|
+
readonly alignX?: 'left' | 'center' | 'right';
|
|
197
|
+
readonly alignY?: 'top' | 'center' | 'bottom';
|
|
198
|
+
readonly size?: '95' | '90' | '85' | '80' | '75' | '70' | '65' | '60' | '55' | '50' | '45' | '40' | '35' | '30' | '25' | '20' | '25' | '10' | '5' | 'fit';
|
|
199
|
+
readonly children?: ReactNode;
|
|
200
|
+
};
|
|
201
|
+
|
|
202
|
+
declare type Props_29 = {
|
|
203
|
+
readonly border?: 'none' | 'small' | 'medium' | 'large';
|
|
204
|
+
readonly children?: ReactElement<Props_27>;
|
|
205
|
+
};
|
|
206
|
+
|
|
207
|
+
declare type Props_3 = {
|
|
208
|
+
readonly type?: 'submit' | 'primary' | 'secondary' | 'disabled';
|
|
209
|
+
readonly border?: 'none' | 'small' | 'medium' | 'large';
|
|
210
|
+
readonly size?: 'large' | 'medium' | 'small';
|
|
211
|
+
readonly text: string;
|
|
212
|
+
readonly onClick?: () => void;
|
|
213
|
+
};
|
|
214
|
+
|
|
215
|
+
declare type Props_30 = {
|
|
216
|
+
readonly children?: ReactElement<Props_27>;
|
|
217
|
+
};
|
|
218
|
+
|
|
219
|
+
declare type Props_31 = {
|
|
167
220
|
readonly value: string;
|
|
168
221
|
readonly type?: 'primary' | 'secondary';
|
|
169
|
-
readonly size?: '
|
|
222
|
+
readonly size?: 'small' | 'medium' | 'large';
|
|
170
223
|
readonly weight?: 'light' | 'normal' | 'bold';
|
|
171
224
|
readonly wrap?: 'none' | 'normal' | 'break-word';
|
|
172
225
|
};
|
|
173
226
|
|
|
174
|
-
declare type
|
|
175
|
-
readonly size?: '
|
|
227
|
+
declare type Props_32 = {
|
|
228
|
+
readonly size?: 'small' | 'medium' | 'large';
|
|
176
229
|
readonly children: ReactNode;
|
|
177
230
|
};
|
|
178
231
|
|
|
179
|
-
declare type
|
|
232
|
+
declare type Props_33 = {
|
|
233
|
+
readonly separator?: ReactNode;
|
|
234
|
+
readonly selectedId?: string;
|
|
235
|
+
readonly children: ReactElement<Props_34> | ReactElement<Props_34>[];
|
|
236
|
+
readonly onChange?: (newId: string, oldId?: string) => void;
|
|
237
|
+
};
|
|
238
|
+
|
|
239
|
+
declare type Props_34 = {
|
|
180
240
|
readonly id: string;
|
|
181
241
|
readonly title: ReactNode;
|
|
182
242
|
readonly children: ReactNode;
|
|
183
243
|
};
|
|
184
244
|
|
|
245
|
+
declare type Props_35 = {
|
|
246
|
+
readonly children?: ReactNode;
|
|
247
|
+
};
|
|
248
|
+
|
|
249
|
+
declare type Props_36 = {
|
|
250
|
+
readonly header?: ReactNode;
|
|
251
|
+
readonly footer?: ReactNode;
|
|
252
|
+
readonly sidebar: ReactNode;
|
|
253
|
+
readonly children: ReactNode;
|
|
254
|
+
};
|
|
255
|
+
|
|
256
|
+
declare type Props_37 = {
|
|
257
|
+
readonly children?: ReactNode;
|
|
258
|
+
};
|
|
259
|
+
|
|
185
260
|
declare type Props_4 = {
|
|
186
|
-
readonly
|
|
187
|
-
readonly
|
|
188
|
-
readonly children: ReactElement<Props_3> | ReactElement<Props_3>[];
|
|
189
|
-
readonly onChange?: (newId: string, oldId?: string) => void;
|
|
261
|
+
readonly sizing?: 'fixed' | 'fluid';
|
|
262
|
+
readonly children: ReactNode;
|
|
190
263
|
};
|
|
191
264
|
|
|
192
265
|
declare type Props_5 = {
|
|
193
|
-
readonly
|
|
194
|
-
readonly
|
|
195
|
-
readonly
|
|
196
|
-
readonly
|
|
197
|
-
readonly
|
|
198
|
-
readonly
|
|
266
|
+
readonly name: string;
|
|
267
|
+
readonly label: string;
|
|
268
|
+
readonly defaultChecked?: boolean;
|
|
269
|
+
readonly checked?: boolean;
|
|
270
|
+
readonly value?: string;
|
|
271
|
+
readonly required?: boolean;
|
|
272
|
+
readonly onChange?: ChangeEventHandler<HTMLInputElement>;
|
|
199
273
|
};
|
|
200
274
|
|
|
201
275
|
declare type Props_6 = {
|
|
202
|
-
readonly
|
|
203
|
-
readonly
|
|
204
|
-
readonly padding?: 'large' | 'medium' | 'small' | 'none';
|
|
276
|
+
readonly padding?: 'none' | 'small' | 'medium' | 'large';
|
|
277
|
+
readonly onClick?: () => void;
|
|
205
278
|
readonly children?: ReactNode;
|
|
206
279
|
};
|
|
207
280
|
|
|
208
281
|
declare type Props_7 = {
|
|
209
|
-
readonly
|
|
210
|
-
readonly
|
|
211
|
-
readonly
|
|
212
|
-
readonly
|
|
282
|
+
readonly alignX?: 'left' | 'center' | 'right' | 'stretch';
|
|
283
|
+
readonly alignY?: 'top' | 'center' | 'bottom' | 'justify';
|
|
284
|
+
readonly gap?: 'none' | 'small' | 'medium' | 'large';
|
|
285
|
+
readonly wrap?: 'wrap' | 'nowrap';
|
|
286
|
+
readonly children: ReactNode;
|
|
213
287
|
};
|
|
214
288
|
|
|
215
289
|
declare type Props_8 = {
|
|
216
|
-
readonly
|
|
217
|
-
readonly
|
|
290
|
+
readonly name: string;
|
|
291
|
+
readonly defaultValue?: string;
|
|
292
|
+
readonly value?: string;
|
|
293
|
+
readonly title?: string;
|
|
294
|
+
readonly type?: 'datetime' | 'date' | 'time' | 'month' | 'week';
|
|
295
|
+
readonly border?: 'none' | 'small' | 'medium' | 'large';
|
|
296
|
+
readonly size?: 'small' | 'medium' | 'large';
|
|
297
|
+
readonly required?: boolean;
|
|
298
|
+
readonly onChange?: ChangeEventHandler<HTMLInputElement>;
|
|
218
299
|
};
|
|
219
300
|
|
|
220
301
|
declare type Props_9 = {
|
|
221
|
-
readonly
|
|
222
|
-
readonly
|
|
223
|
-
readonly children?: ReactNode;
|
|
302
|
+
readonly children: ReactNode;
|
|
303
|
+
readonly submitHandler?: (form: HTMLFormElement) => void;
|
|
224
304
|
};
|
|
225
305
|
|
|
226
|
-
export declare function Row({ alignX, alignY, gap, wrap, children }:
|
|
306
|
+
export declare function Row({ alignX, alignY, gap, wrap, children }: Props_22): JSX.Element;
|
|
307
|
+
|
|
308
|
+
export declare function Ruler({ direction, size }: Props_23): JSX.Element;
|
|
309
|
+
|
|
310
|
+
export declare const Select: ForwardRefExoticComponent<Props_17 & RefAttributes<HTMLSelectElement>>;
|
|
311
|
+
|
|
312
|
+
export declare function SidebarLayout({ header, footer, sidebar, children }: Props_36): JSX.Element;
|
|
313
|
+
|
|
314
|
+
export declare function Spinner({ active }: Props_24): JSX.Element;
|
|
227
315
|
|
|
228
|
-
|
|
316
|
+
declare function Tab({ children }: Props_34): JSX.Element;
|
|
229
317
|
|
|
230
|
-
export declare
|
|
318
|
+
export declare function Table({ padding, children }: Props_25): JSX.Element;
|
|
231
319
|
|
|
232
|
-
export declare
|
|
320
|
+
export declare namespace Table {
|
|
321
|
+
var Header: Element_2;
|
|
322
|
+
var Body: Element_3;
|
|
323
|
+
var Footer: Element_4;
|
|
324
|
+
var Row: Element_5;
|
|
325
|
+
var Cell: Element_6;
|
|
326
|
+
}
|
|
233
327
|
|
|
234
|
-
export declare function
|
|
328
|
+
export declare function Tabs({ separator, selectedId, children, onChange }: Props_33): JSX.Element;
|
|
235
329
|
|
|
236
|
-
export declare
|
|
330
|
+
export declare namespace Tabs {
|
|
331
|
+
var Tab: Tab;
|
|
332
|
+
}
|
|
237
333
|
|
|
238
|
-
declare function Text_2({ value, type, size, weight, wrap }:
|
|
334
|
+
declare function Text_2({ value, type, size, weight, wrap }: Props_31): JSX.Element;
|
|
239
335
|
export { Text_2 as Text }
|
|
240
336
|
|
|
241
|
-
export declare const TextArea: ForwardRefExoticComponent<
|
|
337
|
+
export declare const TextArea: ForwardRefExoticComponent<Props_16 & RefAttributes<HTMLTextAreaElement>>;
|
|
242
338
|
|
|
243
|
-
export declare const TextBox: ForwardRefExoticComponent<
|
|
339
|
+
export declare const TextBox: ForwardRefExoticComponent<Props_15 & RefAttributes<HTMLInputElement>>;
|
|
244
340
|
|
|
245
|
-
export declare function Title({ size, children }:
|
|
341
|
+
export declare function Title({ size, children }: Props_32): JSX.Element;
|
|
246
342
|
|
|
247
343
|
export { }
|