@maskingtech/designsystem 0.0.6 → 0.0.7
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/dist/mtds.css +1 -1
- package/dist/mtds.d.ts +87 -69
- package/dist/mtds.js +80 -71
- package/package.json +1 -1
package/dist/mtds.css
CHANGED
|
@@ -1 +1 @@
|
|
|
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{--background-hover-color: var(--input-background-hover-color);--margin: 0;--padding-small: var(--input-padding-small);--padding-medium: var(--input-padding-medium);--padding-large: var(--input-padding-large);cursor:pointer;display:flex;flex-direction:column;margin:var(--margin)}.mtds .clickarea.align-x-left{align-items:flex-start}.mtds .clickarea.align-x-center{align-items:center}.mtds .clickarea.align-x-right{align-items:flex-end}.mtds .clickarea.effect-hover:hover{background-color:var(--background-hover-color)}.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 .navigation{--margin: 0;--padding-small: var(--container-padding-small);--padding-medium: var(--container-padding-medium);--padding-large: var(--container-padding-large);margin:var(--margin);min-width:0}.mtds .navigation.padding-none{padding:0}.mtds .navigation.padding-small{padding:var(--padding-small)}.mtds .navigation.padding-medium{padding:var(--padding-medium)}.mtds .navigation.padding-large{padding:var(--padding-large)}.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 .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-background-hover-color: rgba(0, 0, 0, .05);--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}
|
|
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{--background-hover-color: var(--input-background-hover-color);--margin: 0;--padding-small: var(--input-padding-small);--padding-medium: var(--input-padding-medium);--padding-large: var(--input-padding-large);cursor:pointer;display:flex;flex-direction:column;margin:var(--margin)}.mtds .clickarea.align-x-left{align-items:flex-start}.mtds .clickarea.align-x-center{align-items:center}.mtds .clickarea.align-x-right{align-items:flex-end}.mtds .clickarea.effect-hover:hover{background-color:var(--background-hover-color)}.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 .list{--margin: 0;margin:var(--margin)}.mtds .list.size-small{font-size:var(--size-small)}.mtds .list.size-medium{font-size:var(--size-medium)}.mtds .list.size-large{font-size:var(--size-large)}.mtds .modal{border:0;padding:0;min-width:0}.mtds .modal.sizing-full{width:100%}.mtds .modal.sizing-content{width:fit-content}.mtds .navigation{--margin: 0;--padding-small: var(--container-padding-small);--padding-medium: var(--container-padding-medium);--padding-large: var(--container-padding-large);margin:var(--margin);min-width:0}.mtds .navigation.padding-none{padding:0}.mtds .navigation.padding-small{padding:var(--padding-small)}.mtds .navigation.padding-medium{padding:var(--padding-medium)}.mtds .navigation.padding-large{padding:var(--padding-large)}.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 .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-background-hover-color: rgba(0, 0, 0, .05);--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
|
@@ -13,7 +13,7 @@ export declare function Button({ type, border, size, text, onClick }: Props_3):
|
|
|
13
13
|
|
|
14
14
|
export declare function Cell({ sizing, children }: Props_4): JSX.Element;
|
|
15
15
|
|
|
16
|
-
export declare function CenteredLayout({ children }:
|
|
16
|
+
export declare function CenteredLayout({ children }: Props_40): JSX.Element;
|
|
17
17
|
|
|
18
18
|
export declare const CheckBox: ForwardRefExoticComponent<Props_5 & RefAttributes<HTMLInputElement>>;
|
|
19
19
|
|
|
@@ -23,17 +23,19 @@ export declare function Column({ alignX, alignY, gap, wrap, children }: Props_7)
|
|
|
23
23
|
|
|
24
24
|
export declare const DateTime: ForwardRefExoticComponent<Props_8 & RefAttributes<HTMLInputElement>>;
|
|
25
25
|
|
|
26
|
-
export declare function DesignSystem({ children }:
|
|
26
|
+
export declare function DesignSystem({ children }: Props_42): JSX.Element;
|
|
27
27
|
|
|
28
|
-
declare function Element_2({ children }:
|
|
28
|
+
declare function Element_2({ children }: Props_20): JSX.Element;
|
|
29
29
|
|
|
30
|
-
declare function Element_3({
|
|
30
|
+
declare function Element_3({ children }: Props_29): JSX.Element;
|
|
31
31
|
|
|
32
|
-
declare function Element_4({ children }:
|
|
32
|
+
declare function Element_4({ border, children }: Props_32): JSX.Element;
|
|
33
33
|
|
|
34
|
-
declare function Element_5({ children }:
|
|
34
|
+
declare function Element_5({ children }: Props_33): JSX.Element;
|
|
35
35
|
|
|
36
|
-
declare function Element_6({
|
|
36
|
+
declare function Element_6({ children }: Props_30): JSX.Element;
|
|
37
|
+
|
|
38
|
+
declare function Element_7({ colspan, rowspan, alignX, alignY, size, children }: Props_31): JSX.Element;
|
|
37
39
|
|
|
38
40
|
export declare const Form: ForwardRefExoticComponent<Props_9 & RefAttributes<HTMLFormElement>>;
|
|
39
41
|
|
|
@@ -46,25 +48,31 @@ export { Image_2 as Image }
|
|
|
46
48
|
|
|
47
49
|
export declare function Input({ label, element }: Props_13): JSX.Element;
|
|
48
50
|
|
|
49
|
-
declare function Item({ title, active, activeIcon, inactiveIcon, orientation, onClick }:
|
|
51
|
+
declare function Item({ title, active, activeIcon, inactiveIcon, orientation, onClick }: Props_37): JSX.Element;
|
|
50
52
|
|
|
51
53
|
export declare function Label({ value }: Props_14): JSX.Element;
|
|
52
54
|
|
|
53
55
|
export declare function Link({ url, target, children }: Props_18): JSX.Element;
|
|
54
56
|
|
|
55
|
-
export declare function
|
|
57
|
+
export declare function List({ type, size, children }: Props_19): JSX.Element;
|
|
58
|
+
|
|
59
|
+
export declare namespace List {
|
|
60
|
+
var Item: Element_2;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
export declare function Menu({ orientation, children }: Props_36): JSX.Element;
|
|
56
64
|
|
|
57
65
|
export declare namespace Menu {
|
|
58
66
|
var Item: Item;
|
|
59
67
|
}
|
|
60
68
|
|
|
61
|
-
export declare function Modal({ open, sizing, children }:
|
|
69
|
+
export declare function Modal({ open, sizing, children }: Props_21): JSX.Element;
|
|
62
70
|
|
|
63
|
-
export declare function Navigation({ padding, children }:
|
|
71
|
+
export declare function Navigation({ padding, children }: Props_22): JSX.Element;
|
|
64
72
|
|
|
65
|
-
export declare function Panel({ type, padding, children }:
|
|
73
|
+
export declare function Panel({ type, padding, children }: Props_23): JSX.Element;
|
|
66
74
|
|
|
67
|
-
export declare function Paragraph({ size, children }:
|
|
75
|
+
export declare function Paragraph({ size, children }: Props_24): JSX.Element;
|
|
68
76
|
|
|
69
77
|
declare type Props = {
|
|
70
78
|
readonly source: string;
|
|
@@ -148,9 +156,9 @@ declare type Props_18 = {
|
|
|
148
156
|
};
|
|
149
157
|
|
|
150
158
|
declare type Props_19 = {
|
|
151
|
-
readonly
|
|
152
|
-
readonly
|
|
153
|
-
readonly children
|
|
159
|
+
readonly type: 'ordered' | 'unordered';
|
|
160
|
+
readonly size?: 'small' | 'medium' | 'large';
|
|
161
|
+
readonly children: ReactElement<Props_20> | ReactElement<Props_20>[];
|
|
154
162
|
};
|
|
155
163
|
|
|
156
164
|
declare type Props_2 = {
|
|
@@ -161,22 +169,32 @@ declare type Props_2 = {
|
|
|
161
169
|
};
|
|
162
170
|
|
|
163
171
|
declare type Props_20 = {
|
|
164
|
-
readonly padding?: 'none' | 'small' | 'medium' | 'large';
|
|
165
172
|
readonly children?: ReactNode;
|
|
166
173
|
};
|
|
167
174
|
|
|
168
175
|
declare type Props_21 = {
|
|
176
|
+
readonly open?: boolean;
|
|
177
|
+
readonly sizing?: 'full' | 'content';
|
|
178
|
+
readonly children?: ReactNode;
|
|
179
|
+
};
|
|
180
|
+
|
|
181
|
+
declare type Props_22 = {
|
|
182
|
+
readonly padding?: 'none' | 'small' | 'medium' | 'large';
|
|
183
|
+
readonly children?: ReactNode;
|
|
184
|
+
};
|
|
185
|
+
|
|
186
|
+
declare type Props_23 = {
|
|
169
187
|
readonly type?: 'normal' | 'alert' | 'warning' | 'success' | 'error' | 'transparent';
|
|
170
188
|
readonly padding?: 'small' | 'medium' | 'large';
|
|
171
189
|
readonly children?: ReactNode;
|
|
172
190
|
};
|
|
173
191
|
|
|
174
|
-
declare type
|
|
192
|
+
declare type Props_24 = {
|
|
175
193
|
readonly size?: 'small' | 'medium' | 'large';
|
|
176
194
|
readonly children: ReactNode;
|
|
177
195
|
};
|
|
178
196
|
|
|
179
|
-
declare type
|
|
197
|
+
declare type Props_25 = {
|
|
180
198
|
readonly alignX?: 'left' | 'center' | 'right' | 'justify';
|
|
181
199
|
readonly alignY?: 'top' | 'center' | 'bottom' | 'stretch';
|
|
182
200
|
readonly gap?: 'none' | 'small' | 'medium' | 'large';
|
|
@@ -184,35 +202,22 @@ declare type Props_23 = {
|
|
|
184
202
|
readonly children: ReactNode;
|
|
185
203
|
};
|
|
186
204
|
|
|
187
|
-
declare type
|
|
205
|
+
declare type Props_26 = {
|
|
188
206
|
readonly direction: 'horizontal' | 'vertical';
|
|
189
207
|
readonly size?: 'small' | 'medium' | 'large';
|
|
190
208
|
};
|
|
191
209
|
|
|
192
|
-
declare type Props_25 = {
|
|
193
|
-
readonly active?: boolean;
|
|
194
|
-
};
|
|
195
|
-
|
|
196
|
-
declare type Props_26 = {
|
|
197
|
-
readonly padding?: 'small' | 'medium' | 'large';
|
|
198
|
-
readonly children?: ReactElement<Props_27> | ReactElement<Props_30> | ReactElement<Props_31>[];
|
|
199
|
-
};
|
|
200
|
-
|
|
201
210
|
declare type Props_27 = {
|
|
202
|
-
readonly
|
|
211
|
+
readonly active?: boolean;
|
|
203
212
|
};
|
|
204
213
|
|
|
205
214
|
declare type Props_28 = {
|
|
206
|
-
readonly
|
|
215
|
+
readonly padding?: 'small' | 'medium' | 'large';
|
|
216
|
+
readonly children?: ReactElement<Props_29> | ReactElement<Props_32> | ReactElement<Props_33>[];
|
|
207
217
|
};
|
|
208
218
|
|
|
209
219
|
declare type Props_29 = {
|
|
210
|
-
readonly
|
|
211
|
-
readonly rowspan?: number;
|
|
212
|
-
readonly alignX?: 'left' | 'center' | 'right';
|
|
213
|
-
readonly alignY?: 'top' | 'center' | 'bottom';
|
|
214
|
-
readonly size?: '95' | '90' | '85' | '80' | '75' | '70' | '65' | '60' | '55' | '50' | '45' | '40' | '35' | '30' | '25' | '20' | '25' | '10' | '5' | 'fit';
|
|
215
|
-
readonly children?: ReactNode;
|
|
220
|
+
readonly children?: ReactElement<Props_30>;
|
|
216
221
|
};
|
|
217
222
|
|
|
218
223
|
declare type Props_3 = {
|
|
@@ -224,15 +229,28 @@ declare type Props_3 = {
|
|
|
224
229
|
};
|
|
225
230
|
|
|
226
231
|
declare type Props_30 = {
|
|
227
|
-
readonly
|
|
228
|
-
readonly children?: ReactElement<Props_28>;
|
|
232
|
+
readonly children?: ReactElement<Props_31>;
|
|
229
233
|
};
|
|
230
234
|
|
|
231
235
|
declare type Props_31 = {
|
|
232
|
-
readonly
|
|
236
|
+
readonly colspan?: number;
|
|
237
|
+
readonly rowspan?: number;
|
|
238
|
+
readonly alignX?: 'left' | 'center' | 'right';
|
|
239
|
+
readonly alignY?: 'top' | 'center' | 'bottom';
|
|
240
|
+
readonly size?: '95' | '90' | '85' | '80' | '75' | '70' | '65' | '60' | '55' | '50' | '45' | '40' | '35' | '30' | '25' | '20' | '25' | '10' | '5' | 'fit';
|
|
241
|
+
readonly children?: ReactNode;
|
|
233
242
|
};
|
|
234
243
|
|
|
235
244
|
declare type Props_32 = {
|
|
245
|
+
readonly border?: 'none' | 'small' | 'medium' | 'large';
|
|
246
|
+
readonly children?: ReactElement<Props_30>;
|
|
247
|
+
};
|
|
248
|
+
|
|
249
|
+
declare type Props_33 = {
|
|
250
|
+
readonly children?: ReactElement<Props_30>;
|
|
251
|
+
};
|
|
252
|
+
|
|
253
|
+
declare type Props_34 = {
|
|
236
254
|
readonly value: string;
|
|
237
255
|
readonly type?: 'primary' | 'secondary';
|
|
238
256
|
readonly size?: 'small' | 'medium' | 'large';
|
|
@@ -240,17 +258,17 @@ declare type Props_32 = {
|
|
|
240
258
|
readonly wrap?: 'none' | 'normal' | 'break-word';
|
|
241
259
|
};
|
|
242
260
|
|
|
243
|
-
declare type
|
|
261
|
+
declare type Props_35 = {
|
|
244
262
|
readonly size?: 'small' | 'medium' | 'large';
|
|
245
263
|
readonly children: ReactNode;
|
|
246
264
|
};
|
|
247
265
|
|
|
248
|
-
declare type
|
|
266
|
+
declare type Props_36 = {
|
|
249
267
|
readonly orientation?: 'horizontal' | 'vertical';
|
|
250
|
-
readonly children?: ReactElement<
|
|
268
|
+
readonly children?: ReactElement<Props_37> | ReactElement<Props_37>[];
|
|
251
269
|
};
|
|
252
270
|
|
|
253
|
-
declare type
|
|
271
|
+
declare type Props_37 = {
|
|
254
272
|
readonly title: string;
|
|
255
273
|
readonly active: boolean;
|
|
256
274
|
readonly activeIcon: string;
|
|
@@ -259,33 +277,33 @@ declare type Props_35 = {
|
|
|
259
277
|
readonly onClick: () => void;
|
|
260
278
|
};
|
|
261
279
|
|
|
262
|
-
declare type
|
|
263
|
-
readonly children?: ReactElement<
|
|
280
|
+
declare type Props_38 = {
|
|
281
|
+
readonly children?: ReactElement<Props_39> | ReactElement<Props_39>[];
|
|
264
282
|
};
|
|
265
283
|
|
|
266
|
-
declare type
|
|
284
|
+
declare type Props_39 = {
|
|
267
285
|
readonly title: string;
|
|
268
286
|
readonly active: boolean;
|
|
269
287
|
readonly onClick: () => void;
|
|
270
288
|
};
|
|
271
289
|
|
|
272
|
-
declare type
|
|
290
|
+
declare type Props_4 = {
|
|
291
|
+
readonly sizing?: 'fixed' | 'fluid';
|
|
292
|
+
readonly children: ReactNode;
|
|
293
|
+
};
|
|
294
|
+
|
|
295
|
+
declare type Props_40 = {
|
|
273
296
|
readonly children?: ReactNode;
|
|
274
297
|
};
|
|
275
298
|
|
|
276
|
-
declare type
|
|
299
|
+
declare type Props_41 = {
|
|
277
300
|
readonly header?: ReactNode;
|
|
278
301
|
readonly footer?: ReactNode;
|
|
279
302
|
readonly sidebar: ReactNode;
|
|
280
303
|
readonly children: ReactNode;
|
|
281
304
|
};
|
|
282
305
|
|
|
283
|
-
declare type
|
|
284
|
-
readonly sizing?: 'fixed' | 'fluid';
|
|
285
|
-
readonly children: ReactNode;
|
|
286
|
-
};
|
|
287
|
-
|
|
288
|
-
declare type Props_40 = {
|
|
306
|
+
declare type Props_42 = {
|
|
289
307
|
readonly children?: ReactNode;
|
|
290
308
|
};
|
|
291
309
|
|
|
@@ -332,41 +350,41 @@ declare type Props_9 = {
|
|
|
332
350
|
readonly submitHandler?: (form: HTMLFormElement) => void;
|
|
333
351
|
};
|
|
334
352
|
|
|
335
|
-
export declare function Row({ alignX, alignY, gap, wrap, children }:
|
|
353
|
+
export declare function Row({ alignX, alignY, gap, wrap, children }: Props_25): JSX.Element;
|
|
336
354
|
|
|
337
|
-
export declare function Ruler({ direction, size }:
|
|
355
|
+
export declare function Ruler({ direction, size }: Props_26): JSX.Element;
|
|
338
356
|
|
|
339
357
|
export declare const Select: ForwardRefExoticComponent<Props_17 & RefAttributes<HTMLSelectElement>>;
|
|
340
358
|
|
|
341
|
-
export declare function SidebarLayout({ header, footer, sidebar, children }:
|
|
359
|
+
export declare function SidebarLayout({ header, footer, sidebar, children }: Props_41): JSX.Element;
|
|
342
360
|
|
|
343
|
-
export declare function Spinner({ active }:
|
|
361
|
+
export declare function Spinner({ active }: Props_27): JSX.Element;
|
|
344
362
|
|
|
345
|
-
declare function Tab({ title, active, onClick }:
|
|
363
|
+
declare function Tab({ title, active, onClick }: Props_39): JSX.Element;
|
|
346
364
|
|
|
347
|
-
export declare function Table({ padding, children }:
|
|
365
|
+
export declare function Table({ padding, children }: Props_28): JSX.Element;
|
|
348
366
|
|
|
349
367
|
export declare namespace Table {
|
|
350
|
-
var Header:
|
|
351
|
-
var Body:
|
|
352
|
-
var Footer:
|
|
353
|
-
var Row:
|
|
354
|
-
var Cell:
|
|
368
|
+
var Header: Element_3;
|
|
369
|
+
var Body: Element_4;
|
|
370
|
+
var Footer: Element_5;
|
|
371
|
+
var Row: Element_6;
|
|
372
|
+
var Cell: Element_7;
|
|
355
373
|
}
|
|
356
374
|
|
|
357
|
-
export declare function Tabs({ children }:
|
|
375
|
+
export declare function Tabs({ children }: Props_38): JSX.Element;
|
|
358
376
|
|
|
359
377
|
export declare namespace Tabs {
|
|
360
378
|
var Tab: Tab;
|
|
361
379
|
}
|
|
362
380
|
|
|
363
|
-
declare function Text_2({ value, type, size, weight, wrap }:
|
|
381
|
+
declare function Text_2({ value, type, size, weight, wrap }: Props_34): JSX.Element;
|
|
364
382
|
export { Text_2 as Text }
|
|
365
383
|
|
|
366
384
|
export declare const TextArea: ForwardRefExoticComponent<Props_16 & RefAttributes<HTMLTextAreaElement>>;
|
|
367
385
|
|
|
368
386
|
export declare const TextBox: ForwardRefExoticComponent<Props_15 & RefAttributes<HTMLInputElement>>;
|
|
369
387
|
|
|
370
|
-
export declare function Title({ size, children }:
|
|
388
|
+
export declare function Title({ size, children }: Props_35): JSX.Element;
|
|
371
389
|
|
|
372
390
|
export { }
|
package/dist/mtds.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as a, jsxs as f } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef as g, useRef as w, useEffect as S } from "react";
|
|
3
|
-
function
|
|
3
|
+
function G({ source: e, title: n, alt: t = "Avatar", width: r, height: i, fit: o = "contain" }) {
|
|
4
4
|
const c = "avatar fit-" + o;
|
|
5
5
|
return /* @__PURE__ */ a(
|
|
6
6
|
"img",
|
|
@@ -13,19 +13,19 @@ function F({ source: e, title: n, alt: t = "Avatar", width: r, height: i, fit: o
|
|
|
13
13
|
}
|
|
14
14
|
);
|
|
15
15
|
}
|
|
16
|
-
function
|
|
16
|
+
function Y({ type: e = "normal", size: n = "large", padding: t = "large", children: r }) {
|
|
17
17
|
const i = "border type-" + e + " size-" + n + " padding-" + t;
|
|
18
18
|
return /* @__PURE__ */ a("div", { className: i, children: r });
|
|
19
19
|
}
|
|
20
|
-
function
|
|
20
|
+
function q({ type: e = "primary", border: n = "small", size: t = "medium", text: r, onClick: i }) {
|
|
21
21
|
const o = "button type-" + e + " border-" + n + " size-" + t;
|
|
22
22
|
return /* @__PURE__ */ a("input", { type: e === "submit" ? "submit" : "button", onClick: i, className: o, disabled: e === "disabled", value: r });
|
|
23
23
|
}
|
|
24
|
-
function
|
|
24
|
+
function H({ sizing: e = "fluid", children: n }) {
|
|
25
25
|
const t = "cell sizing-" + e;
|
|
26
26
|
return /* @__PURE__ */ a("div", { className: t, children: n });
|
|
27
27
|
}
|
|
28
|
-
const
|
|
28
|
+
const J = g(function({ name: n, label: t, defaultChecked: r, checked: i, value: o, required: c, onChange: l }, s) {
|
|
29
29
|
return /* @__PURE__ */ f("label", { className: "checkbox", children: [
|
|
30
30
|
/* @__PURE__ */ a(
|
|
31
31
|
"input",
|
|
@@ -51,7 +51,7 @@ function p({ alignX: e = "left", alignY: n = "top", gap: t = "medium", wrap: r =
|
|
|
51
51
|
const o = "column align-x-" + e + " align-y-" + n + " gap-" + t + " wrap-" + r;
|
|
52
52
|
return /* @__PURE__ */ a("div", { className: o, children: i });
|
|
53
53
|
}
|
|
54
|
-
const
|
|
54
|
+
const K = g(function({ name: n, defaultValue: t, value: r, title: i, type: o = "datetime", border: c = "small", size: l = "medium", required: s, onChange: u }, m) {
|
|
55
55
|
const d = "datetime border-" + c + " size-" + l;
|
|
56
56
|
return /* @__PURE__ */ a(
|
|
57
57
|
"input",
|
|
@@ -67,16 +67,16 @@ const H = g(function({ name: n, defaultValue: t, value: r, title: i, type: o = "
|
|
|
67
67
|
onChange: u
|
|
68
68
|
}
|
|
69
69
|
);
|
|
70
|
-
}),
|
|
70
|
+
}), O = g(function({ children: n, submitHandler: t }, r) {
|
|
71
71
|
return /* @__PURE__ */ a("form", { onSubmit: (o) => {
|
|
72
72
|
o.preventDefault(), t && t(o.target);
|
|
73
73
|
}, className: "form", ref: r, children: n });
|
|
74
74
|
});
|
|
75
|
-
function
|
|
75
|
+
function Q({ layout: e, gap: n = "medium", children: t }) {
|
|
76
76
|
const r = "grid layout-" + e + " gap-" + n;
|
|
77
77
|
return /* @__PURE__ */ a("div", { className: r, children: t });
|
|
78
78
|
}
|
|
79
|
-
function
|
|
79
|
+
function U({ type: e }) {
|
|
80
80
|
return /* @__PURE__ */ a("span", { className: "icon " + e });
|
|
81
81
|
}
|
|
82
82
|
function E({ source: e, title: n, alt: t, width: r, height: i, fit: o = "contain" }) {
|
|
@@ -92,33 +92,41 @@ function E({ source: e, title: n, alt: t, width: r, height: i, fit: o = "contain
|
|
|
92
92
|
}
|
|
93
93
|
);
|
|
94
94
|
}
|
|
95
|
-
function
|
|
95
|
+
function V({ label: e, element: n }) {
|
|
96
96
|
return /* @__PURE__ */ f("div", { className: "input", children: [
|
|
97
97
|
e,
|
|
98
98
|
n
|
|
99
99
|
] });
|
|
100
100
|
}
|
|
101
|
-
function
|
|
101
|
+
function W({ value: e }) {
|
|
102
102
|
return /* @__PURE__ */ a("label", { className: "label", children: e });
|
|
103
103
|
}
|
|
104
|
-
function
|
|
104
|
+
function Z({ url: e, target: n, children: t }) {
|
|
105
105
|
return /* @__PURE__ */ a("a", { className: "link", href: e, target: n, children: t });
|
|
106
106
|
}
|
|
107
|
-
function
|
|
107
|
+
function T({ children: e }) {
|
|
108
|
+
return /* @__PURE__ */ a("li", { children: e });
|
|
109
|
+
}
|
|
110
|
+
function C({ type: e, size: n = "medium", children: t }) {
|
|
111
|
+
const r = "list size-" + n;
|
|
112
|
+
return e === "ordered" ? /* @__PURE__ */ a("ol", { className: r, children: t }) : /* @__PURE__ */ a("ul", { className: r, children: t });
|
|
113
|
+
}
|
|
114
|
+
C.Item = T;
|
|
115
|
+
function _({ open: e = !0, sizing: n = "content", children: t }) {
|
|
108
116
|
const r = w(null), i = "modal sizing-" + n;
|
|
109
117
|
return S(() => {
|
|
110
118
|
e ? r.current?.showModal() : r.current?.close();
|
|
111
119
|
}, [e]), /* @__PURE__ */ a("dialog", { ref: r, className: i, children: t });
|
|
112
120
|
}
|
|
113
|
-
function
|
|
121
|
+
function X({ padding: e = "none", children: n }) {
|
|
114
122
|
const t = "navigation padding-" + e;
|
|
115
123
|
return /* @__PURE__ */ a("nav", { className: t, children: n });
|
|
116
124
|
}
|
|
117
|
-
function
|
|
125
|
+
function ee({ type: e = "normal", padding: n = "large", children: t }) {
|
|
118
126
|
const r = "panel type-" + e + " padding-" + n;
|
|
119
127
|
return /* @__PURE__ */ a("div", { className: r, children: t });
|
|
120
128
|
}
|
|
121
|
-
function
|
|
129
|
+
function ne({ size: e = "medium", children: n }) {
|
|
122
130
|
const t = "paragraph size-" + e;
|
|
123
131
|
return /* @__PURE__ */ a("p", { className: t, children: n });
|
|
124
132
|
}
|
|
@@ -126,11 +134,11 @@ function b({ alignX: e = "left", alignY: n = "top", gap: t = "medium", wrap: r =
|
|
|
126
134
|
const o = "row align-x-" + e + " align-y-" + n + " gap-" + t + " wrap-" + r;
|
|
127
135
|
return /* @__PURE__ */ a("div", { className: o, children: i });
|
|
128
136
|
}
|
|
129
|
-
function
|
|
137
|
+
function L({ direction: e, size: n = "medium" }) {
|
|
130
138
|
const t = "ruler direction-" + e + " size-" + n;
|
|
131
139
|
return /* @__PURE__ */ a("div", { className: t });
|
|
132
140
|
}
|
|
133
|
-
const
|
|
141
|
+
const te = g(function({ name: n, options: t, defaultValue: r, value: i, border: o = "small", size: c = "medium", onChange: l }, s) {
|
|
134
142
|
const u = "select border-" + o + " size-" + c;
|
|
135
143
|
return /* @__PURE__ */ a(
|
|
136
144
|
"select",
|
|
@@ -145,24 +153,24 @@ const ee = g(function({ name: n, options: t, defaultValue: r, value: i, border:
|
|
|
145
153
|
}
|
|
146
154
|
);
|
|
147
155
|
});
|
|
148
|
-
function
|
|
156
|
+
function ae({ active: e = !0 }) {
|
|
149
157
|
const n = "spinner" + (e ? " active" : "");
|
|
150
158
|
return /* @__PURE__ */ a("div", { className: n });
|
|
151
159
|
}
|
|
152
|
-
function
|
|
160
|
+
function k({ children: e }) {
|
|
153
161
|
return /* @__PURE__ */ a("thead", { children: e });
|
|
154
162
|
}
|
|
155
|
-
function
|
|
163
|
+
function I({ border: e = "medium", children: n }) {
|
|
156
164
|
const t = "border-" + e;
|
|
157
165
|
return /* @__PURE__ */ a("tbody", { className: t, children: n });
|
|
158
166
|
}
|
|
159
|
-
function
|
|
167
|
+
function A({ children: e }) {
|
|
160
168
|
return /* @__PURE__ */ a("tfoot", { children: e });
|
|
161
169
|
}
|
|
162
|
-
function
|
|
170
|
+
function B({ children: e }) {
|
|
163
171
|
return /* @__PURE__ */ a("tr", { children: e });
|
|
164
172
|
}
|
|
165
|
-
function
|
|
173
|
+
function R({ colspan: e, rowspan: n, alignX: t = "left", alignY: r = "center", size: i = "fit", children: o }) {
|
|
166
174
|
const c = "align-x-" + t + " align-y-" + r + " size-" + i;
|
|
167
175
|
return /* @__PURE__ */ a("td", { className: c, colSpan: e, rowSpan: n, children: o });
|
|
168
176
|
}
|
|
@@ -170,16 +178,16 @@ function h({ padding: e = "medium", children: n }) {
|
|
|
170
178
|
const t = "table padding-" + e;
|
|
171
179
|
return /* @__PURE__ */ a("table", { className: t, children: n });
|
|
172
180
|
}
|
|
173
|
-
h.Header =
|
|
174
|
-
h.Body =
|
|
175
|
-
h.Footer =
|
|
176
|
-
h.Row =
|
|
177
|
-
h.Cell =
|
|
178
|
-
function z({ value: e, type: n = "primary", size: t = "medium", weight: r = "normal", wrap: i = "
|
|
181
|
+
h.Header = k;
|
|
182
|
+
h.Body = I;
|
|
183
|
+
h.Footer = A;
|
|
184
|
+
h.Row = B;
|
|
185
|
+
h.Cell = R;
|
|
186
|
+
function z({ value: e, type: n = "primary", size: t = "medium", weight: r = "normal", wrap: i = "normal" }) {
|
|
179
187
|
const o = "text type-" + n + " size-" + t + " weight-" + r + " wrap-" + i;
|
|
180
188
|
return /* @__PURE__ */ a("span", { className: o, children: e });
|
|
181
189
|
}
|
|
182
|
-
const
|
|
190
|
+
const re = g(function({ name: n, placeholder: t, defaultValue: r, value: i, border: o = "small", size: c = "medium", cols: l, rows: s, limit: u, onChange: m }, d) {
|
|
183
191
|
const N = "textarea border-" + o + " size-" + c;
|
|
184
192
|
return /* @__PURE__ */ a(
|
|
185
193
|
"textarea",
|
|
@@ -196,7 +204,7 @@ const te = g(function({ name: n, placeholder: t, defaultValue: r, value: i, bord
|
|
|
196
204
|
onChange: m
|
|
197
205
|
}
|
|
198
206
|
);
|
|
199
|
-
}),
|
|
207
|
+
}), ie = g(function({ name: n, placeholder: t, defaultValue: r, value: i, limit: o, pattern: c, title: l, type: s = "text", border: u = "small", size: m = "medium", required: d, onChange: N }, v) {
|
|
200
208
|
const x = "textbox border-" + u + " size-" + m;
|
|
201
209
|
return /* @__PURE__ */ a(
|
|
202
210
|
"input",
|
|
@@ -216,7 +224,7 @@ const te = g(function({ name: n, placeholder: t, defaultValue: r, value: i, bord
|
|
|
216
224
|
}
|
|
217
225
|
);
|
|
218
226
|
});
|
|
219
|
-
function
|
|
227
|
+
function oe({ size: e = "large", children: n }) {
|
|
220
228
|
const t = "title size-" + e;
|
|
221
229
|
switch (e) {
|
|
222
230
|
case "large":
|
|
@@ -227,32 +235,32 @@ function re({ size: e = "large", children: n }) {
|
|
|
227
235
|
return /* @__PURE__ */ a("h3", { className: t, children: n });
|
|
228
236
|
}
|
|
229
237
|
}
|
|
230
|
-
function
|
|
238
|
+
function $({ title: e, active: n, activeIcon: t, inactiveIcon: r, orientation: i = "horizontal", onClick: o }) {
|
|
231
239
|
const c = i === "horizontal", l = c ? b : p, s = c ? "medium" : "small", u = c ? "left" : "center";
|
|
232
240
|
return /* @__PURE__ */ a(p, { gap: "none", alignX: "stretch", children: /* @__PURE__ */ a(y, { padding: "small", effect: "hover", alignX: u, onClick: o, children: /* @__PURE__ */ f(l, { gap: s, alignX: u, alignY: "center", children: [
|
|
233
241
|
/* @__PURE__ */ a(E, { source: n ? t : r, width: c ? "1.6em" : "2em" }),
|
|
234
242
|
/* @__PURE__ */ a(z, { value: e, type: n ? "primary" : "secondary", size: c ? "large" : "small", weight: n ? "bold" : "normal" })
|
|
235
243
|
] }) }) });
|
|
236
244
|
}
|
|
237
|
-
function
|
|
245
|
+
function j({ orientation: e = "horizontal", children: n }) {
|
|
238
246
|
const t = e === "horizontal";
|
|
239
|
-
return /* @__PURE__ */ a(
|
|
247
|
+
return /* @__PURE__ */ a(X, { children: /* @__PURE__ */ a(t ? b : p, { gap: t ? "medium" : "small", alignX: t ? "center" : "left", children: n }) });
|
|
240
248
|
}
|
|
241
|
-
|
|
242
|
-
function
|
|
249
|
+
j.Item = $;
|
|
250
|
+
function D({ title: e, active: n, onClick: t }) {
|
|
243
251
|
return /* @__PURE__ */ a(p, { alignX: "stretch", children: /* @__PURE__ */ a(y, { padding: "medium", effect: "hover", alignX: "center", onClick: t, children: /* @__PURE__ */ a(z, { value: e, type: n ? "primary" : "secondary", weight: n ? "bold" : "normal", size: "large" }) }) });
|
|
244
252
|
}
|
|
245
|
-
function
|
|
253
|
+
function M({ children: e }) {
|
|
246
254
|
return /* @__PURE__ */ f(p, { alignX: "stretch", gap: "none", children: [
|
|
247
255
|
/* @__PURE__ */ a(b, { alignX: "justify", children: e }),
|
|
248
|
-
/* @__PURE__ */ a(
|
|
256
|
+
/* @__PURE__ */ a(L, { direction: "horizontal", size: "small" })
|
|
249
257
|
] });
|
|
250
258
|
}
|
|
251
|
-
|
|
252
|
-
function
|
|
259
|
+
M.Tab = D;
|
|
260
|
+
function ce({ children: e }) {
|
|
253
261
|
return /* @__PURE__ */ a("main", { className: "layout-centered", children: /* @__PURE__ */ a("div", { className: "content", children: e }) });
|
|
254
262
|
}
|
|
255
|
-
function
|
|
263
|
+
function le({ header: e, footer: n, sidebar: t, children: r }) {
|
|
256
264
|
return /* @__PURE__ */ f("div", { className: "layout-sidebar", children: [
|
|
257
265
|
/* @__PURE__ */ a("header", { children: e }),
|
|
258
266
|
/* @__PURE__ */ f("div", { className: "content", children: [
|
|
@@ -262,41 +270,42 @@ function oe({ header: e, footer: n, sidebar: t, children: r }) {
|
|
|
262
270
|
/* @__PURE__ */ a("footer", { children: n })
|
|
263
271
|
] });
|
|
264
272
|
}
|
|
265
|
-
function
|
|
273
|
+
function se({ children: e }) {
|
|
266
274
|
return /* @__PURE__ */ a("div", { className: "mtds", children: e });
|
|
267
275
|
}
|
|
268
276
|
export {
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
277
|
+
G as Avatar,
|
|
278
|
+
Y as Border,
|
|
279
|
+
q as Button,
|
|
280
|
+
H as Cell,
|
|
281
|
+
ce as CenteredLayout,
|
|
282
|
+
J as CheckBox,
|
|
275
283
|
y as ClickArea,
|
|
276
284
|
p as Column,
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
285
|
+
K as DateTime,
|
|
286
|
+
se as DesignSystem,
|
|
287
|
+
O as Form,
|
|
288
|
+
Q as Grid,
|
|
289
|
+
U as Icon,
|
|
282
290
|
E as Image,
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
+
V as Input,
|
|
292
|
+
W as Label,
|
|
293
|
+
Z as Link,
|
|
294
|
+
C as List,
|
|
295
|
+
j as Menu,
|
|
296
|
+
_ as Modal,
|
|
297
|
+
X as Navigation,
|
|
298
|
+
ee as Panel,
|
|
299
|
+
ne as Paragraph,
|
|
291
300
|
b as Row,
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
301
|
+
L as Ruler,
|
|
302
|
+
te as Select,
|
|
303
|
+
le as SidebarLayout,
|
|
304
|
+
ae as Spinner,
|
|
296
305
|
h as Table,
|
|
297
|
-
|
|
306
|
+
M as Tabs,
|
|
298
307
|
z as Text,
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
308
|
+
re as TextArea,
|
|
309
|
+
ie as TextBox,
|
|
310
|
+
oe as Title
|
|
302
311
|
};
|