@maskingtech/designsystem 0.0.6 → 0.0.8

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