@maskingtech/designsystem 0.0.5 → 0.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/mtds.css +1 -1
  2. package/dist/mtds.d.ts +110 -63
  3. package/dist/mtds.js +150 -123
  4. package/package.json +3 -2
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 .panel{--border-radius: 0;--margin: 0;--padding-small: var(--container-padding-small);--padding-medium: var(--container-padding-medium);--padding-large: var(--container-padding-large);--type-alert-background-color: var(--color-alert-background);--type-alert-foreground-color: var(--color-alert-foreground);--type-error-background-color: var(--color-error-background);--type-error-foreground-color: var(--color-error-foreground);--type-normal-background-color: var(--color-secondary-background);--type-normal-foreground-color: var(--color-primary-foreground);--type-success-background-color: var(--color-success-background);--type-success-foreground-color: var(--color-success-foreground);--type-warning-background-color: var(--color-warning-background);--type-warning-foreground-color: var(--color-warning-foreground);border-radius:var(--border-radius);padding:var(--padding);margin:var(--margin);min-width:0}.mtds .panel.type-alert{background-color:var(--type-alert-background-color);color:var(--type-alert-foreground-color)}.mtds .panel.type-error{background-color:var(--type-error-background-color);color:var(--type-error-foreground-color)}.mtds .panel.type-normal{background-color:var(--type-normal-background-color);color:var(--type-normal-foreground-color)}.mtds .panel.type-success{background-color:var(--type-success-background-color);color:var(--type-success-foreground-color)}.mtds .panel.type-warning{background-color:var(--type-warning-background-color);color:var(--type-warning-foreground-color)}.mtds .panel.type-transparent{background-color:transparent}.mtds .panel.padding-small{padding:var(--padding-small)}.mtds .panel.padding-medium{padding:var(--padding-medium)}.mtds .panel.padding-large{padding:var(--padding-large)}.mtds .paragraph{--margin: 0;--line-height: 1.5em;--size-small: var(--element-font-small);--size-medium: var(--element-font-medium);--size-large: var(--element-font-large);margin:var(--margin);line-height:var(--line-height);min-width:0}.mtds .paragraph.size-large{font-size:var(--size-large)}.mtds .paragraph.size-medium{font-size:var(--size-medium)}.mtds .paragraph.size-small{font-size:var(--size-small)}.mtds .row{--gap-small: var(--container-gap-small);--gap-medium: var(--container-gap-medium);--gap-large: var(--container-gap-large);display:flex;flex-direction:row;min-width:0;height:100%}.mtds .row>div,.mtds .row>h1,.mtds .row>h2,.mtds .row>h3,.mtds .row>p,.mtds .row>form,.mtds .row>label,.mtds .row>input,.mtds .row>textarea,.mtds .row>select{margin:0}.mtds .row.align-x-left{justify-content:flex-start}.mtds .row.align-x-center{justify-content:center}.mtds .row.align-x-right{justify-content:flex-end}.mtds .row.align-x-justify{justify-content:space-between}.mtds .row.align-y-top{align-items:flex-start}.mtds .row.align-y-center{align-items:center}.mtds .row.align-y-bottom{align-items:flex-end}.mtds .row.align-y-stretch{align-items:stretch}.mtds .row.gap-small{gap:var(--gap-small)}.mtds .row.gap-medium{gap:var(--gap-medium)}.mtds .row.gap-large{gap:var(--gap-large)}.mtds .row.wrap-nowrap{flex-wrap:nowrap}.mtds .row.wrap-wrap{flex-wrap:wrap}.mtds .ruler{--color: var(--color-border);--size-small: var(--element-border-small);--size-medium: var(--element-border-medium);--size-large: var(--element-border-large);background-color:var(--color)}.mtds .ruler.direction-horizontal{width:100%}.mtds .ruler.direction-horizontal.size-small{height:var(--size-small)}.mtds .ruler.direction-horizontal.size-medium{height:var(--size-medium)}.mtds .ruler.direction-horizontal.size-large{height:var(--size-large)}.mtds .ruler.direction-vertical{height:100%}.mtds .ruler.direction-vertical.size-small{width:var(--size-small)}.mtds .ruler.direction-vertical.size-medium{width:var(--size-medium)}.mtds .ruler.direction-vertical.size-large{width:var(--size-large)}.mtds .select{--margin: 0;--border-style: var(--input-border-style);--border-color: var(--input-border-color);--border-small: var(--input-border-small);--border-medium: var(--input-border-medium);--border-large: var(--input-border-large);--size-small: var(--input-padding-small);--size-medium: var(--input-padding-medium);--size-large: var(--input-padding-large);margin:var(--margin);padding:var(--padding);border-style:var(--border-style);border-color:var(--border-color);background-color:var(--color-input-background);font-family:inherit;font-size:inherit}.mtds .select:focus-visible{outline-color:color-mix(in srgb,black 10%,var(--border-color))}.mtds .select.border-none{border:0}.mtds .select.border-small{border-width:var(--border-small)}.mtds .select.border-medium{border-width:var(--border-medium)}.mtds .select.border-large{border-width:var(--border-large)}.mtds .select.size-small{padding:var(--size-small)}.mtds .select.size-medium{padding:var(--size-medium)}.mtds .select.size-large{padding:var(--size-large)}.mtds .spinner{--color: var(--color-border);--size: 2em;--speed: 1.2s;--thickness: .3em;display:inline-block;width:var(--size);height:var(--size)}.mtds .spinner:after{content:" ";display:block;width:var(--size);height:var(--size);border-radius:50%;border:var(--thickness) solid var(--color);border-color:transparent var(--color) transparent var(--color)}.mtds .spinner.active:after{animation:ds-spinner var(--speed) linear infinite}@keyframes ds-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.mtds .table{--padding-large: 1em;--padding-medium: .7em;--padding-small: .4em;--header-background-color: var(--color-border);--header-forground-color: var(--color-primary-foreground);--row-odd-color: var(--color-primary-background);--row-even-color: var(--color-secondary-background);--footer-border-small: var(--element-border-small);--footer-border-medium: var(--element-border-medium);--footer-border-large: var(--element-border-large);--footer-border-color: var(--color-border);--footer-forground-color: var(--color-primary-foreground);border-collapse:collapse;margin:0}.mtds .table thead{background-color:var(--header-background-color);color:var(--header-forground-color);font-weight:700;margin:0}.mtds .table tbody tr:nth-child(odd){background-color:var(--row-odd-color)}.mtds .table tbody tr:nth-child(2n){background-color:var(--row-even-color)}.mtds .table tbody.border-none{border-bottom:0}.mtds .table tbody.border-small{border-bottom:var(--footer-border-small) solid var(--footer-border-color)}.mtds .table tbody.border-medium{border-bottom:var(--footer-border-medium) solid var(--footer-border-color)}.mtds .table tbody.border-large{border-bottom:var(--footer-border-large) solid var(--footer-border-color)}.mtds .table tfoot{color:var(--footer-forground-color);font-weight:700}.mtds .table td.align-x-left{text-align:left}.mtds .table td.align-x-center{text-align:center}.mtds .table td.align-x-right{text-align:right}.mtds .table td.align-y-top{vertical-align:top}.mtds .table td.align-y-center{vertical-align:center}.mtds .table td.align-y-bottom{vertical-align:bottom}.mtds .table td.size-95{width:95%}.mtds .table td.size-90{width:90%}.mtds .table td.size-85{width:85%}.mtds .table td.size-80{width:80%}.mtds .table td.size-75{width:75%}.mtds .table td.size-70{width:70%}.mtds .table td.size-65{width:65%}.mtds .table td.size-60{width:60%}.mtds .table td.size-55{width:55%}.mtds .table td.size-50{width:50%}.mtds .table td.size-45{width:45%}.mtds .table td.size-40{width:40%}.mtds .table td.size-35{width:35%}.mtds .table td.size-30{width:30%}.mtds .table td.size-25{width:25%}.mtds .table td.size-20{width:20%}.mtds .table td.size-15{width:15%}.mtds .table td.size-10{width:10%}.mtds .table td.size-5{width:5%}.mtds .table td.size-fit{width:auto}.mtds .table.padding-large td{padding:var(--padding-large)}.mtds .table.padding-medium td{padding:var(--padding-medium)}.mtds .table.padding-small td{padding:var(--padding-small)}.mtds .text{--primary-color: var(--color-primary-foreground);--secondary-color: var(--color-secondary-foreground);--size-small: var(--element-font-small);--size-medium: var(--element-font-medium);--size-large: var(--element-font-large);display:inline-block}.mtds .text.type-primary{color:var(--primary-color)}.mtds .text.type-secondary{color:var(--secondary-color)}.mtds .text.size-small{font-size:var(--size-small)}.mtds .text.size-medium{font-size:var(--size-medium)}.mtds .text.size-large{font-size:var(--size-large)}.mtds .text.weight-light{font-weight:var(--font-weight-light)}.mtds .text.weight-normal{font-weight:var(--font-weight-normal)}.mtds .text.weight-bold{font-weight:var(--font-weight-bold)}.mtds .text.wrap-none{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.mtds .text.wrap-normal{white-space:normal}.mtds .text.wrap-break-word{word-wrap:break-word}.mtds .textarea{--margin: 0;--border-style: var(--input-border-style);--border-color: var(--input-border-color);--border-small: var(--input-border-small);--border-medium: var(--input-border-medium);--border-large: var(--input-border-large);--size-small: var(--input-padding-small);--size-medium: var(--input-padding-medium);--size-large: var(--input-padding-large);margin:var(--margin);padding:var(--padding);border-style:var(--border-style);border-color:var(--border-color);background-color:var(--color-input-background);font-family:inherit;font-size:inherit;resize:vertical;width:100%}.mtds .textarea:focus-visible{outline-color:color-mix(in srgb,black 10%,var(--border-color))}.mtds .textarea.border-none{border:0}.mtds .textarea.border-small{border-width:var(--border-small)}.mtds .textarea.border-medium{border-width:var(--border-medium)}.mtds .textarea.border-large{border-width:var(--border-large)}.mtds .textarea.size-small{padding:var(--size-small)}.mtds .textarea.size-medium{padding:var(--size-medium)}.mtds .textarea.size-large{padding:var(--size-large)}.mtds .textbox{--margin: 0;--border-style: var(--input-border-style);--border-color: var(--input-border-color);--border-small: var(--input-border-small);--border-medium: var(--input-border-medium);--border-large: var(--input-border-large);--size-small: var(--input-padding-small);--size-medium: var(--input-padding-medium);--size-large: var(--input-padding-large);margin:var(--margin);border-style:var(--border-style);border-color:var(--border-color);background-color:var(--color-input-background);font-family:inherit;font-size:inherit}.mtds .textbox:focus-visible{outline-color:color-mix(in srgb,black 10%,var(--border-color))}.mtds .textbox.border-none{border:0}.mtds .textbox.border-small{border-width:var(--border-small)}.mtds .textbox.border-medium{border-width:var(--border-medium)}.mtds .textbox.border-large{border-width:var(--border-large)}.mtds .textbox.size-small{padding:var(--size-small)}.mtds .textbox.size-medium{padding:var(--size-medium)}.mtds .textbox.size-large{padding:var(--size-large)}.mtds .title{--margin: 0 0 .8em 0;--size-small: 1em;--size-medium: 1.5em;--size-large: 2em;margin:var(--margin)}.mtds .title.size-large{font-size:var(--size-large)}.mtds .title.size-medium{font-size:var(--size-medium)}.mtds .title.size-small{font-size:var(--size-small)}.mtds .layout-centered{--content-max-width: 696px;container-type:inline-size;display:flex;align-items:center;justify-content:center;width:100vw;min-height:100vh}.mtds .layout-centered>.content{box-sizing:border-box;padding:1rem;width:100vw;max-width:var(--content-max-width);text-align:center}@container (max-width: 499px){.mtds .layout-centered>.content{padding:.5rem}}.mtds .layout-sidebar{--header-height: 3.4em;--footer-height: 4.4em;--modal-width: 700px;--sidebar-width: 260px;--content-width: 640px;--content-gap: 2em;--calc-gap-half: calc(var(--content-gap) / 2);--calc-content-offset: calc((var(--content-width) - var(--sidebar-width) + var(--calc-gap-half)) / 2);--left-width: calc(50vw - var(--calc-content-offset));--right-width: calc(100vw - var(--left-width));container-type:size;height:100dvh;overflow:hidden}.mtds .layout-sidebar>header{background-color:var(--background-color);border-bottom:.1em solid var(--border-color);display:none;padding:.5em 1em;height:var(--header-height);width:100vw;top:0;left:0;position:absolute;z-index:1000}.mtds .layout-sidebar>.content{display:flex;flex-direction:row;gap:var(--content-gap);width:100vw;height:100vh;max-height:100vh}.mtds .layout-sidebar>.content .left{display:flex;flex-direction:row;justify-content:flex-end;width:var(--left-width)}.mtds .layout-sidebar>.content .left aside{flex-shrink:0;flex-grow:0;padding:1em 0;width:var(--sidebar-width)}.mtds .layout-sidebar>.content .right{display:flex;flex-direction:column;justify-content:flex-start;overflow-y:auto;overscroll-behavior:none;width:var(--right-width)}.mtds .layout-sidebar>.content .right main{flex-shrink:0;flex-grow:0;padding:1em 0;width:var(--content-width)}.mtds .layout-sidebar>.content .modal{margin-top:2em;max-width:var(--modal-width)}.mtds .layout-sidebar>footer{background-color:var(--background-color);border-top:.1em solid var(--border-color);display:none;padding:.4em 1em;width:100vw;left:0;bottom:0;position:absolute;z-index:1000}@container (max-width: 959px){.mtds .layout-sidebar>.content .left{display:none}.mtds .layout-sidebar>.content .right{width:100vw;padding:0 1em;position:absolute;top:var(--header-height);bottom:var(--footer-height)}.mtds .layout-sidebar>.content .right main{width:100%}.mtds .layout-sidebar>header,.mtds .layout-sidebar>footer{display:block}}@container (max-width: 499px){.mtds .layout-sidebar>.content .right{padding:0 .5em}.mtds .layout-sidebar>header,.mtds .layout-sidebar>footer{padding:.4em .5em}}.mtds{--font-family: sans-serif;--font-size: 16px;--font-weight-extra-light: 200;--font-weight-light: 300;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semi-bold: 600;--font-weight-bold: 700;--color-background: transparent;--color-background-hover: #efefef;--color-foreground: #000000;--color-border: #b7b7b7;--color-primary-background: #ffffff;--color-primary-foreground: #000000;--color-secondary-background: #f3f3f3;--color-secondary-foreground: #666666;--color-primary-action-background: #cccccc;--color-primary-action-foreground: #000000;--color-secondary-action-background: #f3f3f3;--color-secondary-action-foreground: #000000;--color-input-background: #ffffff;--color-input-foreground: #000000;--color-alert-background: #d9d9d9;--color-alert-foreground: #666666;--color-error-background: #666666;--color-error-foreground: #f3f3f3;--color-warning-background: #999999;--color-warning-foreground: #f3f3f3;--color-success-background: #efefef;--color-success-foreground: #666666;--element-border-small: .1em;--element-border-medium: .2em;--element-border-large: .3em;--element-font-small: .9em;--element-font-medium: 1em;--element-font-large: 1.2em;--container-gap-small: .4em;--container-gap-medium: 1em;--container-gap-large: 2em;--container-padding-small: 1em;--container-padding-medium: 1.5em;--container-padding-large: 2em;--input-background-hover-color: rgba(0, 0, 0, .05);--input-border-style: solid;--input-border-color: var(--color-border);--input-border-small: .05em;--input-border-medium: .075em;--input-border-large: .1em;--input-padding-small: .4em;--input-padding-medium: .8em;--input-padding-large: 1.2em;font-family:var(--font-family);font-size:var(--font-size);background-color:var(--color-background);color:var(--color-foreground);font-weight:var(--font-weight-light)}.mtds *{box-sizing:border-box}.mtds *:is(:last-child){margin-bottom:0}
1
+ .mtds .avatar{border-radius:50%}.mtds .avatar.fit-fill{object-fit:fill}.mtds .avatar.fit-contain{object-fit:contain}.mtds .avatar.fit-cover{object-fit:cover}.mtds .avatar.fit-none{object-fit:none}.mtds .avatar.fit-scale-down{object-fit:scale-down}.mtds .border{--border-radius: 0;--color: var(--color-border);--margin: 0;--size-small: var(--element-border-small);--size-medium: var(--element-border-medium);--size-large: var(--element-border-large);--padding-small: var(--container-padding-small);--padding-medium: var(--container-padding-medium);--padding-large: var(--container-padding-large);border-color:var(--color);border-radius:var(--border-radius);margin:var(--margin);min-width:0}.mtds .border.type-normal{border-style:solid}.mtds .border.type-dashed{border-style:dashed}.mtds .border.type-dotted{border-style:dotted}.mtds .border.size-large{border-width:var(--size-large)}.mtds .border.size-medium{border-width:var(--size-medium)}.mtds .border.size-small{border-width:var(--size-small)}.mtds .border.padding-none{padding:0}.mtds .border.padding-small{padding:var(--padding-small)}.mtds .border.padding-medium{padding:var(--padding-medium)}.mtds .border.padding-large{padding:var(--padding-large)}.mtds .button{--margin: 0;--border-radius: 2em;--border-style: var(--input-border-style);--border-color-disabled: var(--input-border-color);--border-small: var(--input-border-small);--border-medium: var(--input-border-medium);--border-large: var(--input-border-large);--size-small: .2em 2.2em;--size-medium: .5em 2.2em;--size-large: .9em 2.2em;--type-primary-background-color: var(--color-primary-action-background);--type-primary-foreground-color: var(--color-primary-action-foreground);--type-secondary-background-color: var(--color-secondary-action-background);--type-secondary-foreground-color: var(--color-secondary-action-foreground);--type-disabled-background-color: transparent;border-radius:var(--border-radius);border-style:var(--border-style);border-color:var(--border-color);cursor:pointer;margin:var(--margin);text-align:center;width:fit-content;font-family:inherit;font-size:inherit}.mtds .button.border-none{border-width:0}.mtds .button.border-small{border-width:var(--border-small)}.mtds .button.border-medium{border-width:var(--border-medium)}.mtds .button.border-large{border-width:var(--border-large)}.mtds .button.size-small{padding:var(--size-small)}.mtds .button.size-medium{padding:var(--size-medium)}.mtds .button.size-large{padding:var(--size-large)}.mtds .button.type-primary,.mtds .button.type-submit{background-color:var(--type-primary-background-color);border-color:var(--type-primary-background-color);color:var(--type-primary-foreground-color);font-weight:var(--font-weight-bold)}.mtds .button.type-primary:hover,.mtds .button.type-submit:hover{--hover-color: color-mix(in srgb, black 10%, var(--type-primary-background-color));background-color:var(--hover-color);border-color:var(--hover-color)}.mtds .button.type-primary:focus{--hover-color: color-mix(in srgb, black 20%, var(--type-primary-background-color));background-color:var(--hover-color);border-color:var(--hover-color)}.mtds .button.type-secondary{background-color:var(--type-secondary-background-color);border-color:var(--type-secondary-background-color);color:var(--type-secondary-foreground-color);font-weight:var(--font-weight-normal)}.mtds .button.type-secondary:hover{--hover-color: color-mix(in srgb, black 10%, var(--type-secondary-background-color));background-color:var(--hover-color);border-color:var(--hover-color)}.mtds .button.type-secondary:focus{--hover-color: color-mix(in srgb, black 20%, var(--type-secondary-background-color));background-color:var(--hover-color);border-color:var(--hover-color)}.mtds .button.type-disabled{background-color:var(--type-disabled-background-color);border-color:var(--border-color-disabled);font-weight:var(--font-weight-light);cursor:default}.mtds .cell.sizing-fixed{flex-grow:0;flex-shrink:0;overflow:hidden}.mtds .cell.sizing-fluid{flex-grow:1;flex-shrink:1;overflow:auto}.mtds .checkbox input{accent-color:var(--color-input-foreground);margin-right:.5em}.mtds .clickarea{--background-hover-color: var(--input-background-hover-color);--margin: 0;--padding-small: var(--input-padding-small);--padding-medium: var(--input-padding-medium);--padding-large: var(--input-padding-large);cursor:pointer;display:flex;flex-direction:column;margin:var(--margin)}.mtds .clickarea.align-x-left{align-items:flex-start}.mtds .clickarea.align-x-center{align-items:center}.mtds .clickarea.align-x-right{align-items:flex-end}.mtds .clickarea.effect-hover:hover{background-color:var(--background-hover-color)}.mtds .clickarea.padding-none{padding:0}.mtds .clickarea.padding-small{padding:var(--padding-small)}.mtds .clickarea.padding-medium{padding:var(--padding-medium)}.mtds .clickarea.padding-large{padding:var(--padding-large)}.mtds .column{--gap-small: var(--container-gap-small);--gap-medium: var(--container-gap-medium);--gap-large: var(--container-gap-large);display:flex;flex-direction:column;min-width:0;width:100%}.mtds .column>div,.mtds .column>h1,.mtds .column>h2,.mtds .column>h3,.mtds .column>p,.mtds .column>form,.mtds .column>label,.mtds .column>input,.mtds .column>textarea,.mtds .column>select{margin:0}.mtds .column.align-y-top{justify-content:flex-start}.mtds .column.align-y-center{justify-content:center}.mtds .column.align-y-bottom{justify-content:flex-end}.mtds .column.align-y-justify{justify-content:space-between}.mtds .column.align-x-left{align-items:flex-start}.mtds .column.align-x-center{align-items:center}.mtds .column.align-x-right{align-items:flex-end}.mtds .column.align-x-stretch{align-items:stretch}.mtds .column.gap-small{gap:var(--gap-small)}.mtds .column.gap-medium{gap:var(--gap-medium)}.mtds .column.gap-large{gap:var(--gap-large)}.mtds .column.wrap-nowrap{flex-wrap:nowrap}.mtds .column.wrap-wrap{flex-wrap:wrap}.mtds .datetime{--margin: 0;--border-style: var(--input-border-style);--border-color: var(--input-border-color);--border-small: var(--input-border-small);--border-medium: var(--input-border-medium);--border-large: var(--input-border-large);--size-small: var(--input-padding-small);--size-medium: var(--input-padding-medium);--size-large: var(--input-padding-large);margin:var(--margin);border-style:var(--border-style);border-color:var(--border-color);background-color:var(--color-input-background);font-family:inherit;font-size:inherit}.mtds .datetime:focus-visible{outline-color:color-mix(in srgb,black 10%,var(--border-color))}.mtds .datetime.border-none{border:0}.mtds .datetime.border-small{border-width:var(--border-small)}.mtds .datetime.border-medium{border-width:var(--border-medium)}.mtds .datetime.border-large{border-width:var(--border-large)}.mtds .datetime.size-small{padding:var(--size-small)}.mtds .datetime.size-medium{padding:var(--size-medium)}.mtds .datetime.size-large{padding:var(--size-large)}.mtds .form{margin:0;padding:0;min-width:0}.mtds .grid{--gap-small: var(--container-padding-small);--gap-medium: var(--container-padding-medium);--gap-large: var(--container-padding-large);display:grid;min-width:0}.mtds .grid>div,.mtds .grid>h1,.mtds .grid>h2,.mtds .grid>h3,.mtds .grid>p,.mtds .grid>form,.mtds .grid>label,.mtds .grid>input,.mtds .grid>textarea,.mtds .grid>select{margin:0}.mtds .grid.layout-two-columns{grid-template-columns:1fr 1fr}.mtds .grid.layout-three-columns{grid-template-columns:1fr 1fr 1fr}.mtds .grid.layout-four-columns{grid-template-columns:1fr 1fr 1fr 1fr}.mtds .grid.gap-small{grid-gap:var(--gap-small)}.mtds .grid.gap-medium{grid-gap:var(--gap-medium)}.mtds .grid.gap-large{grid-gap:var(--gap-large)}.mtds .icon{--icon-attachment: "📎";--icon-bookmark: "🔖";--icon-box: "☐";--icon-box-checked: "☑";--icon-box-crossed: "☒";--icon-calendar: "📅";--icon-caution: "☡";--icon-check: "✓";--icon-clock: "⏲";--icon-close: "✕";--icon-cloud: "☁";--icon-comment: "💬";--icon-diamond: "♦";--icon-eye: "👁";--icon-flag: "⚑";--icon-heart: "♥";--icon-home: "⌂";--icon-info: "ℹ";--icon-lock: "🔒";--icon-mail: "✉";--icon-music: "♫";--icon-pencil: "✎";--icon-phone: "☎";--icon-piece: "☮";--icon-plus: "＋";--icon-question: "❓";--icon-rain: "⛆";--icon-recycle: "♻";--icon-search: "🔍";--icon-settings: "⚙";--icon-star: "★";--icon-sun: "☀";--icon-tag: "🏷";--icon-trash: "🗑";--icon-umbrella: "☂";--icon-unlock: "🔓";--icon-user: "👤";--icon-video: "🎬";--icon-warning: "⚠";--icon-yinyang: "☯"}.mtds .icon.attachment:before{content:var(--icon-attachment)}.mtds .icon.bookmark:before{content:var(--icon-bookmark)}.mtds .icon.box:before{content:var(--icon-box)}.mtds .icon.box-checked:before{content:var(--icon-box-checked)}.mtds .icon.box-crossed:before{content:var(--icon-box-crossed)}.mtds .icon.calendar:before{content:var(--icon-calendar)}.mtds .icon.caution:before{content:var(--icon-caution)}.mtds .icon.check:before{content:var(--icon-check)}.mtds .icon.clock:before{content:var(--icon-clock)}.mtds .icon.close:before{content:var(--icon-close)}.mtds .icon.cloud:before{content:var(--icon-cloud)}.mtds .icon.comment:before{content:var(--icon-comment)}.mtds .icon.diamond:before{content:var(--icon-diamond)}.mtds .icon.eye:before{content:var(--icon-eye)}.mtds .icon.flag:before{content:var(--icon-flag)}.mtds .icon.heart:before{content:var(--icon-heart)}.mtds .icon.home:before{content:var(--icon-home)}.mtds .icon.info:before{content:var(--icon-info)}.mtds .icon.lock:before{content:var(--icon-lock)}.mtds .icon.mail:before{content:var(--icon-mail)}.mtds .icon.music:before{content:var(--icon-music)}.mtds .icon.pencil:before{content:var(--icon-pencil)}.mtds .icon.phone:before{content:var(--icon-phone)}.mtds .icon.piece:before{content:var(--icon-piece)}.mtds .icon.plus:before{content:var(--icon-plus)}.mtds .icon.question:before{content:var(--icon-question)}.mtds .icon.rain:before{content:var(--icon-rain)}.mtds .icon.recycle:before{content:var(--icon-recycle)}.mtds .icon.search:before{content:var(--icon-search)}.mtds .icon.settings:before{content:var(--icon-settings)}.mtds .icon.star:before{content:var(--icon-star)}.mtds .icon.sun:before{content:var(--icon-sun)}.mtds .icon.tag:before{content:var(--icon-tag)}.mtds .icon.trash:before{content:var(--icon-trash)}.mtds .icon.umbrella:before{content:var(--icon-umbrella)}.mtds .icon.unlock:before{content:var(--icon-unlock)}.mtds .icon.user:before{content:var(--icon-user)}.mtds .icon.video:before{content:var(--icon-video)}.mtds .icon.warning:before{content:var(--icon-warning)}.mtds .icon.yinyang:before{content:var(--icon-yinyang)}.mtds .image.fit-fill{object-fit:fill}.mtds .image.fit-contain{object-fit:contain}.mtds .image.fit-cover{object-fit:cover}.mtds .image.fit-none{object-fit:none}.mtds .image.fit-scale-down{object-fit:scale-down}.mtds .input{--margin: 0 0 1em 0;--gap: .5em;display:flex;flex-direction:column;gap:var(--gap);margin:var(--margin)}.mtds .input label,.mtds .input input,.mtds .input textarea,.mtds .input select{width:100%}.mtds .label{--margin: 0;font-weight:var(--font-weight-medium);margin:var(--margin)}.mtds .link{--color: var(--color-primary-foreground);--color-hover: var(--color-primary-foreground);--text-decoration: dotted underline;--text-decoration-hover: underline;color:var(--color);text-decoration:var(--text-decoration)}.mtds .link:hover{color:var(--color-hover);text-decoration:var(--text-decoration-hover)}.mtds .list{--margin: 0;margin:var(--margin)}.mtds .list.size-small{font-size:var(--size-small)}.mtds .list.size-medium{font-size:var(--size-medium)}.mtds .list.size-large{font-size:var(--size-large)}.mtds .modal{border:0;padding:0;min-width:0}.mtds .modal.sizing-full{width:100%}.mtds .modal.sizing-content{width:fit-content}.mtds .navigation{--margin: 0;--padding-small: var(--container-padding-small);--padding-medium: var(--container-padding-medium);--padding-large: var(--container-padding-large);margin:var(--margin);min-width:0}.mtds .navigation.padding-none{padding:0}.mtds .navigation.padding-small{padding:var(--padding-small)}.mtds .navigation.padding-medium{padding:var(--padding-medium)}.mtds .navigation.padding-large{padding:var(--padding-large)}.mtds .panel{--border-radius: 0;--margin: 0;--padding-small: var(--container-padding-small);--padding-medium: var(--container-padding-medium);--padding-large: var(--container-padding-large);--type-alert-background-color: var(--color-alert-background);--type-alert-foreground-color: var(--color-alert-foreground);--type-error-background-color: var(--color-error-background);--type-error-foreground-color: var(--color-error-foreground);--type-normal-background-color: var(--color-secondary-background);--type-normal-foreground-color: var(--color-primary-foreground);--type-success-background-color: var(--color-success-background);--type-success-foreground-color: var(--color-success-foreground);--type-warning-background-color: var(--color-warning-background);--type-warning-foreground-color: var(--color-warning-foreground);border-radius:var(--border-radius);padding:var(--padding);margin:var(--margin);min-width:0}.mtds .panel.type-alert{background-color:var(--type-alert-background-color);color:var(--type-alert-foreground-color)}.mtds .panel.type-error{background-color:var(--type-error-background-color);color:var(--type-error-foreground-color)}.mtds .panel.type-normal{background-color:var(--type-normal-background-color);color:var(--type-normal-foreground-color)}.mtds .panel.type-success{background-color:var(--type-success-background-color);color:var(--type-success-foreground-color)}.mtds .panel.type-warning{background-color:var(--type-warning-background-color);color:var(--type-warning-foreground-color)}.mtds .panel.type-transparent{background-color:transparent}.mtds .panel.padding-small{padding:var(--padding-small)}.mtds .panel.padding-medium{padding:var(--padding-medium)}.mtds .panel.padding-large{padding:var(--padding-large)}.mtds .paragraph{--margin: 0;--line-height: 1.5em;--size-small: var(--element-font-small);--size-medium: var(--element-font-medium);--size-large: var(--element-font-large);margin:var(--margin);line-height:var(--line-height);min-width:0}.mtds .paragraph.size-large{font-size:var(--size-large)}.mtds .paragraph.size-medium{font-size:var(--size-medium)}.mtds .paragraph.size-small{font-size:var(--size-small)}.mtds .row{--gap-small: var(--container-gap-small);--gap-medium: var(--container-gap-medium);--gap-large: var(--container-gap-large);display:flex;flex-direction:row;min-width:0;height:100%}.mtds .row>div,.mtds .row>h1,.mtds .row>h2,.mtds .row>h3,.mtds .row>p,.mtds .row>form,.mtds .row>label,.mtds .row>input,.mtds .row>textarea,.mtds .row>select{margin:0}.mtds .row.align-x-left{justify-content:flex-start}.mtds .row.align-x-center{justify-content:center}.mtds .row.align-x-right{justify-content:flex-end}.mtds .row.align-x-justify{justify-content:space-between}.mtds .row.align-y-top{align-items:flex-start}.mtds .row.align-y-center{align-items:center}.mtds .row.align-y-bottom{align-items:flex-end}.mtds .row.align-y-stretch{align-items:stretch}.mtds .row.gap-small{gap:var(--gap-small)}.mtds .row.gap-medium{gap:var(--gap-medium)}.mtds .row.gap-large{gap:var(--gap-large)}.mtds .row.wrap-nowrap{flex-wrap:nowrap}.mtds .row.wrap-wrap{flex-wrap:wrap}.mtds .ruler{--color: var(--color-border);--size-small: var(--element-border-small);--size-medium: var(--element-border-medium);--size-large: var(--element-border-large);background-color:var(--color)}.mtds .ruler.direction-horizontal{width:100%}.mtds .ruler.direction-horizontal.size-small{height:var(--size-small)}.mtds .ruler.direction-horizontal.size-medium{height:var(--size-medium)}.mtds .ruler.direction-horizontal.size-large{height:var(--size-large)}.mtds .ruler.direction-vertical{height:100%}.mtds .ruler.direction-vertical.size-small{width:var(--size-small)}.mtds .ruler.direction-vertical.size-medium{width:var(--size-medium)}.mtds .ruler.direction-vertical.size-large{width:var(--size-large)}.mtds .select{--margin: 0;--border-style: var(--input-border-style);--border-color: var(--input-border-color);--border-small: var(--input-border-small);--border-medium: var(--input-border-medium);--border-large: var(--input-border-large);--size-small: var(--input-padding-small);--size-medium: var(--input-padding-medium);--size-large: var(--input-padding-large);margin:var(--margin);padding:var(--padding);border-style:var(--border-style);border-color:var(--border-color);background-color:var(--color-input-background);font-family:inherit;font-size:inherit}.mtds .select:focus-visible{outline-color:color-mix(in srgb,black 10%,var(--border-color))}.mtds .select.border-none{border:0}.mtds .select.border-small{border-width:var(--border-small)}.mtds .select.border-medium{border-width:var(--border-medium)}.mtds .select.border-large{border-width:var(--border-large)}.mtds .select.size-small{padding:var(--size-small)}.mtds .select.size-medium{padding:var(--size-medium)}.mtds .select.size-large{padding:var(--size-large)}.mtds .spinner{--color: var(--color-border);--size: 2em;--speed: 1.2s;--thickness: .3em;display:inline-block;width:var(--size);height:var(--size)}.mtds .spinner:after{content:" ";display:block;width:var(--size);height:var(--size);border-radius:50%;border:var(--thickness) solid var(--color);border-color:transparent var(--color) transparent var(--color)}.mtds .spinner.active:after{animation:ds-spinner var(--speed) linear infinite}@keyframes ds-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.mtds .table{--padding-large: 1em;--padding-medium: .7em;--padding-small: .4em;--header-background-color: var(--color-border);--header-forground-color: var(--color-primary-foreground);--row-odd-color: var(--color-primary-background);--row-even-color: var(--color-secondary-background);--footer-border-small: var(--element-border-small);--footer-border-medium: var(--element-border-medium);--footer-border-large: var(--element-border-large);--footer-border-color: var(--color-border);--footer-forground-color: var(--color-primary-foreground);border-collapse:collapse;margin:0}.mtds .table thead{background-color:var(--header-background-color);color:var(--header-forground-color);font-weight:700;margin:0}.mtds .table tbody tr:nth-child(odd){background-color:var(--row-odd-color)}.mtds .table tbody tr:nth-child(2n){background-color:var(--row-even-color)}.mtds .table tbody.border-none{border-bottom:0}.mtds .table tbody.border-small{border-bottom:var(--footer-border-small) solid var(--footer-border-color)}.mtds .table tbody.border-medium{border-bottom:var(--footer-border-medium) solid var(--footer-border-color)}.mtds .table tbody.border-large{border-bottom:var(--footer-border-large) solid var(--footer-border-color)}.mtds .table tfoot{color:var(--footer-forground-color);font-weight:700}.mtds .table td.align-x-left{text-align:left}.mtds .table td.align-x-center{text-align:center}.mtds .table td.align-x-right{text-align:right}.mtds .table td.align-y-top{vertical-align:top}.mtds .table td.align-y-center{vertical-align:center}.mtds .table td.align-y-bottom{vertical-align:bottom}.mtds .table td.size-95{width:95%}.mtds .table td.size-90{width:90%}.mtds .table td.size-85{width:85%}.mtds .table td.size-80{width:80%}.mtds .table td.size-75{width:75%}.mtds .table td.size-70{width:70%}.mtds .table td.size-65{width:65%}.mtds .table td.size-60{width:60%}.mtds .table td.size-55{width:55%}.mtds .table td.size-50{width:50%}.mtds .table td.size-45{width:45%}.mtds .table td.size-40{width:40%}.mtds .table td.size-35{width:35%}.mtds .table td.size-30{width:30%}.mtds .table td.size-25{width:25%}.mtds .table td.size-20{width:20%}.mtds .table td.size-15{width:15%}.mtds .table td.size-10{width:10%}.mtds .table td.size-5{width:5%}.mtds .table td.size-fit{width:auto}.mtds .table.padding-large td{padding:var(--padding-large)}.mtds .table.padding-medium td{padding:var(--padding-medium)}.mtds .table.padding-small td{padding:var(--padding-small)}.mtds .text{--primary-color: var(--color-primary-foreground);--secondary-color: var(--color-secondary-foreground);--size-small: var(--element-font-small);--size-medium: var(--element-font-medium);--size-large: var(--element-font-large);display:inline-block}.mtds .text.type-primary{color:var(--primary-color)}.mtds .text.type-secondary{color:var(--secondary-color)}.mtds .text.size-small{font-size:var(--size-small)}.mtds .text.size-medium{font-size:var(--size-medium)}.mtds .text.size-large{font-size:var(--size-large)}.mtds .text.weight-light{font-weight:var(--font-weight-light)}.mtds .text.weight-normal{font-weight:var(--font-weight-normal)}.mtds .text.weight-bold{font-weight:var(--font-weight-bold)}.mtds .text.wrap-none{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.mtds .text.wrap-normal{white-space:normal}.mtds .text.wrap-break-word{word-wrap:break-word}.mtds .textarea{--margin: 0;--border-style: var(--input-border-style);--border-color: var(--input-border-color);--border-small: var(--input-border-small);--border-medium: var(--input-border-medium);--border-large: var(--input-border-large);--size-small: var(--input-padding-small);--size-medium: var(--input-padding-medium);--size-large: var(--input-padding-large);margin:var(--margin);padding:var(--padding);border-style:var(--border-style);border-color:var(--border-color);background-color:var(--color-input-background);font-family:inherit;font-size:inherit;resize:vertical;width:100%}.mtds .textarea:focus-visible{outline-color:color-mix(in srgb,black 10%,var(--border-color))}.mtds .textarea.border-none{border:0}.mtds .textarea.border-small{border-width:var(--border-small)}.mtds .textarea.border-medium{border-width:var(--border-medium)}.mtds .textarea.border-large{border-width:var(--border-large)}.mtds .textarea.size-small{padding:var(--size-small)}.mtds .textarea.size-medium{padding:var(--size-medium)}.mtds .textarea.size-large{padding:var(--size-large)}.mtds .textbox{--margin: 0;--border-style: var(--input-border-style);--border-color: var(--input-border-color);--border-small: var(--input-border-small);--border-medium: var(--input-border-medium);--border-large: var(--input-border-large);--size-small: var(--input-padding-small);--size-medium: var(--input-padding-medium);--size-large: var(--input-padding-large);margin:var(--margin);border-style:var(--border-style);border-color:var(--border-color);background-color:var(--color-input-background);font-family:inherit;font-size:inherit}.mtds .textbox:focus-visible{outline-color:color-mix(in srgb,black 10%,var(--border-color))}.mtds .textbox.border-none{border:0}.mtds .textbox.border-small{border-width:var(--border-small)}.mtds .textbox.border-medium{border-width:var(--border-medium)}.mtds .textbox.border-large{border-width:var(--border-large)}.mtds .textbox.size-small{padding:var(--size-small)}.mtds .textbox.size-medium{padding:var(--size-medium)}.mtds .textbox.size-large{padding:var(--size-large)}.mtds .title{--margin: 0 0 .8em 0;--size-small: 1em;--size-medium: 1.5em;--size-large: 2em;margin:var(--margin)}.mtds .title.size-large{font-size:var(--size-large)}.mtds .title.size-medium{font-size:var(--size-medium)}.mtds .title.size-small{font-size:var(--size-small)}.mtds .layout-centered{--content-max-width: 696px;container-type:inline-size;display:flex;align-items:center;justify-content:center;width:100vw;min-height:100vh}.mtds .layout-centered>.content{box-sizing:border-box;padding:1rem;width:100vw;max-width:var(--content-max-width);text-align:center}@container (max-width: 499px){.mtds .layout-centered>.content{padding:.5rem}}.mtds .layout-sidebar{--header-height: 3.4em;--footer-height: 4.4em;--modal-width: 700px;--sidebar-width: 260px;--content-width: 640px;--content-gap: 2em;--calc-gap-half: calc(var(--content-gap) / 2);--calc-content-offset: calc((var(--content-width) - var(--sidebar-width) + var(--calc-gap-half)) / 2);--left-width: calc(50vw - var(--calc-content-offset));--right-width: calc(100vw - var(--left-width));container-type:size;height:100dvh;overflow:hidden}.mtds .layout-sidebar>header{background-color:var(--background-color);border-bottom:.1em solid var(--border-color);display:none;padding:.5em 1em;height:var(--header-height);width:100vw;top:0;left:0;position:absolute;z-index:1000}.mtds .layout-sidebar>.content{display:flex;flex-direction:row;gap:var(--content-gap);width:100vw;height:100vh;max-height:100vh}.mtds .layout-sidebar>.content .left{display:flex;flex-direction:row;justify-content:flex-end;width:var(--left-width)}.mtds .layout-sidebar>.content .left aside{flex-shrink:0;flex-grow:0;padding:1em 0;width:var(--sidebar-width)}.mtds .layout-sidebar>.content .right{display:flex;flex-direction:column;justify-content:flex-start;overflow-y:auto;overscroll-behavior:none;width:var(--right-width)}.mtds .layout-sidebar>.content .right main{flex-shrink:0;flex-grow:0;padding:1em 0;width:var(--content-width)}.mtds .layout-sidebar>.content .modal{margin-top:2em;max-width:var(--modal-width)}.mtds .layout-sidebar>footer{background-color:var(--background-color);border-top:.1em solid var(--border-color);display:none;padding:.4em 1em;width:100vw;left:0;bottom:0;position:absolute;z-index:1000}@container (max-width: 959px){.mtds .layout-sidebar>.content .left{display:none}.mtds .layout-sidebar>.content .right{width:100vw;padding:0 1em;position:absolute;top:var(--header-height);bottom:var(--footer-height)}.mtds .layout-sidebar>.content .right main{width:100%}.mtds .layout-sidebar>header,.mtds .layout-sidebar>footer{display:block}}@container (max-width: 499px){.mtds .layout-sidebar>.content .right{padding:0 .5em}.mtds .layout-sidebar>header,.mtds .layout-sidebar>footer{padding:.4em .5em}}.mtds{--font-family: sans-serif;--font-size: 16px;--font-weight-extra-light: 200;--font-weight-light: 300;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semi-bold: 600;--font-weight-bold: 700;--color-background: transparent;--color-background-hover: #efefef;--color-foreground: #000000;--color-border: #b7b7b7;--color-primary-background: #ffffff;--color-primary-foreground: #000000;--color-secondary-background: #f3f3f3;--color-secondary-foreground: #666666;--color-primary-action-background: #cccccc;--color-primary-action-foreground: #000000;--color-secondary-action-background: #f3f3f3;--color-secondary-action-foreground: #000000;--color-input-background: #ffffff;--color-input-foreground: #000000;--color-alert-background: #d9d9d9;--color-alert-foreground: #666666;--color-error-background: #666666;--color-error-foreground: #f3f3f3;--color-warning-background: #999999;--color-warning-foreground: #f3f3f3;--color-success-background: #efefef;--color-success-foreground: #666666;--element-border-small: .1em;--element-border-medium: .2em;--element-border-large: .3em;--element-font-small: .9em;--element-font-medium: 1em;--element-font-large: 1.2em;--container-gap-small: .4em;--container-gap-medium: 1em;--container-gap-large: 2em;--container-padding-small: 1em;--container-padding-medium: 1.5em;--container-padding-large: 2em;--input-background-hover-color: rgba(0, 0, 0, .05);--input-border-style: solid;--input-border-color: var(--color-border);--input-border-small: .05em;--input-border-medium: .075em;--input-border-large: .1em;--input-padding-small: .4em;--input-padding-medium: .8em;--input-padding-large: 1.2em;font-family:var(--font-family);font-size:var(--font-size);background-color:var(--color-background);color:var(--color-foreground);font-weight:var(--font-weight-light)}.mtds *{box-sizing:border-box}.mtds *:is(:last-child){margin-bottom:0}
package/dist/mtds.d.ts CHANGED
@@ -13,7 +13,7 @@ export declare function Button({ type, border, size, text, onClick }: Props_3):
13
13
 
14
14
  export declare function Cell({ sizing, children }: Props_4): JSX.Element;
15
15
 
16
- export declare function CenteredLayout({ children }: Props_35): JSX.Element;
16
+ export declare function CenteredLayout({ children }: Props_40): JSX.Element;
17
17
 
18
18
  export declare const CheckBox: ForwardRefExoticComponent<Props_5 & RefAttributes<HTMLInputElement>>;
19
19
 
@@ -23,17 +23,19 @@ export declare function Column({ alignX, alignY, gap, wrap, children }: Props_7)
23
23
 
24
24
  export declare const DateTime: ForwardRefExoticComponent<Props_8 & RefAttributes<HTMLInputElement>>;
25
25
 
26
- export declare function DesignSystem({ children }: Props_37): JSX.Element;
26
+ export declare function DesignSystem({ children }: Props_42): JSX.Element;
27
27
 
28
- declare function Element_2({ children }: Props_26): JSX.Element;
28
+ declare function Element_2({ children }: Props_20): JSX.Element;
29
29
 
30
- declare function Element_3({ border, children }: Props_29): JSX.Element;
30
+ declare function Element_3({ children }: Props_29): JSX.Element;
31
31
 
32
- declare function Element_4({ children }: Props_30): JSX.Element;
32
+ declare function Element_4({ border, children }: Props_32): JSX.Element;
33
33
 
34
- declare function Element_5({ children }: Props_27): JSX.Element;
34
+ declare function Element_5({ children }: Props_33): JSX.Element;
35
35
 
36
- declare function Element_6({ colspan, rowspan, alignX, alignY, size, children }: Props_28): JSX.Element;
36
+ declare function Element_6({ children }: Props_30): JSX.Element;
37
+
38
+ declare function Element_7({ colspan, rowspan, alignX, alignY, size, children }: Props_31): JSX.Element;
37
39
 
38
40
  export declare const Form: ForwardRefExoticComponent<Props_9 & RefAttributes<HTMLFormElement>>;
39
41
 
@@ -46,15 +48,31 @@ export { Image_2 as Image }
46
48
 
47
49
  export declare function Input({ label, element }: Props_13): JSX.Element;
48
50
 
51
+ declare function Item({ title, active, activeIcon, inactiveIcon, orientation, onClick }: Props_37): JSX.Element;
52
+
49
53
  export declare function Label({ value }: Props_14): JSX.Element;
50
54
 
51
55
  export declare function Link({ url, target, children }: Props_18): JSX.Element;
52
56
 
53
- export declare function Modal({ open, sizing, children }: Props_19): JSX.Element;
57
+ export declare function List({ type, size, children }: Props_19): JSX.Element;
58
+
59
+ export declare namespace List {
60
+ var Item: Element_2;
61
+ }
62
+
63
+ export declare function Menu({ orientation, children }: Props_36): JSX.Element;
64
+
65
+ export declare namespace Menu {
66
+ var Item: Item;
67
+ }
68
+
69
+ export declare function Modal({ open, sizing, children }: Props_21): JSX.Element;
70
+
71
+ export declare function Navigation({ padding, children }: Props_22): JSX.Element;
54
72
 
55
- export declare function Panel({ type, padding, children }: Props_20): JSX.Element;
73
+ export declare function Panel({ type, padding, children }: Props_23): JSX.Element;
56
74
 
57
- export declare function Paragraph({ size, children }: Props_21): JSX.Element;
75
+ export declare function Paragraph({ size, children }: Props_24): JSX.Element;
58
76
 
59
77
  declare type Props = {
60
78
  readonly source: string;
@@ -138,9 +156,9 @@ declare type Props_18 = {
138
156
  };
139
157
 
140
158
  declare type Props_19 = {
141
- readonly open?: boolean;
142
- readonly sizing?: 'full' | 'content';
143
- readonly children?: ReactNode;
159
+ readonly type: 'ordered' | 'unordered';
160
+ readonly size?: 'small' | 'medium' | 'large';
161
+ readonly children: ReactElement<Props_20> | ReactElement<Props_20>[];
144
162
  };
145
163
 
146
164
  declare type Props_2 = {
@@ -151,17 +169,32 @@ declare type Props_2 = {
151
169
  };
152
170
 
153
171
  declare type Props_20 = {
172
+ readonly children?: ReactNode;
173
+ };
174
+
175
+ declare type Props_21 = {
176
+ readonly open?: boolean;
177
+ readonly sizing?: 'full' | 'content';
178
+ readonly children?: ReactNode;
179
+ };
180
+
181
+ declare type Props_22 = {
182
+ readonly padding?: 'none' | 'small' | 'medium' | 'large';
183
+ readonly children?: ReactNode;
184
+ };
185
+
186
+ declare type Props_23 = {
154
187
  readonly type?: 'normal' | 'alert' | 'warning' | 'success' | 'error' | 'transparent';
155
188
  readonly padding?: 'small' | 'medium' | 'large';
156
189
  readonly children?: ReactNode;
157
190
  };
158
191
 
159
- declare type Props_21 = {
192
+ declare type Props_24 = {
160
193
  readonly size?: 'small' | 'medium' | 'large';
161
194
  readonly children: ReactNode;
162
195
  };
163
196
 
164
- declare type Props_22 = {
197
+ declare type Props_25 = {
165
198
  readonly alignX?: 'left' | 'center' | 'right' | 'justify';
166
199
  readonly alignY?: 'top' | 'center' | 'bottom' | 'stretch';
167
200
  readonly gap?: 'none' | 'small' | 'medium' | 'large';
@@ -169,29 +202,37 @@ declare type Props_22 = {
169
202
  readonly children: ReactNode;
170
203
  };
171
204
 
172
- declare type Props_23 = {
205
+ declare type Props_26 = {
173
206
  readonly direction: 'horizontal' | 'vertical';
174
207
  readonly size?: 'small' | 'medium' | 'large';
175
208
  };
176
209
 
177
- declare type Props_24 = {
210
+ declare type Props_27 = {
178
211
  readonly active?: boolean;
179
212
  };
180
213
 
181
- declare type Props_25 = {
214
+ declare type Props_28 = {
182
215
  readonly padding?: 'small' | 'medium' | 'large';
183
- readonly children?: ReactElement<Props_26> | ReactElement<Props_29> | ReactElement<Props_30>[];
216
+ readonly children?: ReactElement<Props_29> | ReactElement<Props_32> | ReactElement<Props_33>[];
184
217
  };
185
218
 
186
- declare type Props_26 = {
187
- readonly children?: ReactElement<Props_27>;
219
+ declare type Props_29 = {
220
+ readonly children?: ReactElement<Props_30>;
188
221
  };
189
222
 
190
- declare type Props_27 = {
191
- readonly children?: ReactElement<Props_28>;
223
+ declare type Props_3 = {
224
+ readonly type?: 'submit' | 'primary' | 'secondary' | 'disabled';
225
+ readonly border?: 'none' | 'small' | 'medium' | 'large';
226
+ readonly size?: 'large' | 'medium' | 'small';
227
+ readonly text: string;
228
+ readonly onClick?: () => void;
192
229
  };
193
230
 
194
- declare type Props_28 = {
231
+ declare type Props_30 = {
232
+ readonly children?: ReactElement<Props_31>;
233
+ };
234
+
235
+ declare type Props_31 = {
195
236
  readonly colspan?: number;
196
237
  readonly rowspan?: number;
197
238
  readonly alignX?: 'left' | 'center' | 'right';
@@ -200,24 +241,16 @@ declare type Props_28 = {
200
241
  readonly children?: ReactNode;
201
242
  };
202
243
 
203
- declare type Props_29 = {
204
- readonly border?: 'none' | 'small' | 'medium' | 'large';
205
- readonly children?: ReactElement<Props_27>;
206
- };
207
-
208
- declare type Props_3 = {
209
- readonly type?: 'submit' | 'primary' | 'secondary' | 'disabled';
244
+ declare type Props_32 = {
210
245
  readonly border?: 'none' | 'small' | 'medium' | 'large';
211
- readonly size?: 'large' | 'medium' | 'small';
212
- readonly text: string;
213
- readonly onClick?: () => void;
246
+ readonly children?: ReactElement<Props_30>;
214
247
  };
215
248
 
216
- declare type Props_30 = {
217
- readonly children?: ReactElement<Props_27>;
249
+ declare type Props_33 = {
250
+ readonly children?: ReactElement<Props_30>;
218
251
  };
219
252
 
220
- declare type Props_31 = {
253
+ declare type Props_34 = {
221
254
  readonly value: string;
222
255
  readonly type?: 'primary' | 'secondary';
223
256
  readonly size?: 'small' | 'medium' | 'large';
@@ -225,41 +258,55 @@ declare type Props_31 = {
225
258
  readonly wrap?: 'none' | 'normal' | 'break-word';
226
259
  };
227
260
 
228
- declare type Props_32 = {
261
+ declare type Props_35 = {
229
262
  readonly size?: 'small' | 'medium' | 'large';
230
263
  readonly children: ReactNode;
231
264
  };
232
265
 
233
- declare type Props_33 = {
234
- readonly children?: ReactElement<Props_34> | ReactElement<Props_34>[];
266
+ declare type Props_36 = {
267
+ readonly orientation?: 'horizontal' | 'vertical';
268
+ readonly children?: ReactElement<Props_37> | ReactElement<Props_37>[];
235
269
  };
236
270
 
237
- declare type Props_34 = {
271
+ declare type Props_37 = {
238
272
  readonly title: string;
239
273
  readonly active: boolean;
274
+ readonly activeIcon: string;
275
+ readonly inactiveIcon: string;
276
+ readonly orientation?: 'horizontal' | 'vertical';
240
277
  readonly onClick: () => void;
241
278
  };
242
279
 
243
- declare type Props_35 = {
280
+ declare type Props_38 = {
281
+ readonly children?: ReactElement<Props_39> | ReactElement<Props_39>[];
282
+ };
283
+
284
+ declare type Props_39 = {
285
+ readonly title: string;
286
+ readonly active: boolean;
287
+ readonly onClick: () => void;
288
+ };
289
+
290
+ declare type Props_4 = {
291
+ readonly sizing?: 'fixed' | 'fluid';
292
+ readonly children: ReactNode;
293
+ };
294
+
295
+ declare type Props_40 = {
244
296
  readonly children?: ReactNode;
245
297
  };
246
298
 
247
- declare type Props_36 = {
299
+ declare type Props_41 = {
248
300
  readonly header?: ReactNode;
249
301
  readonly footer?: ReactNode;
250
302
  readonly sidebar: ReactNode;
251
303
  readonly children: ReactNode;
252
304
  };
253
305
 
254
- declare type Props_37 = {
306
+ declare type Props_42 = {
255
307
  readonly children?: ReactNode;
256
308
  };
257
309
 
258
- declare type Props_4 = {
259
- readonly sizing?: 'fixed' | 'fluid';
260
- readonly children: ReactNode;
261
- };
262
-
263
310
  declare type Props_5 = {
264
311
  readonly name: string;
265
312
  readonly label: string;
@@ -303,41 +350,41 @@ declare type Props_9 = {
303
350
  readonly submitHandler?: (form: HTMLFormElement) => void;
304
351
  };
305
352
 
306
- export declare function Row({ alignX, alignY, gap, wrap, children }: Props_22): JSX.Element;
353
+ export declare function Row({ alignX, alignY, gap, wrap, children }: Props_25): JSX.Element;
307
354
 
308
- export declare function Ruler({ direction, size }: Props_23): JSX.Element;
355
+ export declare function Ruler({ direction, size }: Props_26): JSX.Element;
309
356
 
310
357
  export declare const Select: ForwardRefExoticComponent<Props_17 & RefAttributes<HTMLSelectElement>>;
311
358
 
312
- export declare function SidebarLayout({ header, footer, sidebar, children }: Props_36): JSX.Element;
359
+ export declare function SidebarLayout({ header, footer, sidebar, children }: Props_41): JSX.Element;
313
360
 
314
- export declare function Spinner({ active }: Props_24): JSX.Element;
361
+ export declare function Spinner({ active }: Props_27): JSX.Element;
315
362
 
316
- declare function Tab({ title, active, onClick }: Props_34): JSX.Element;
363
+ declare function Tab({ title, active, onClick }: Props_39): JSX.Element;
317
364
 
318
- export declare function Table({ padding, children }: Props_25): JSX.Element;
365
+ export declare function Table({ padding, children }: Props_28): JSX.Element;
319
366
 
320
367
  export declare namespace Table {
321
- var Header: Element_2;
322
- var Body: Element_3;
323
- var Footer: Element_4;
324
- var Row: Element_5;
325
- var Cell: Element_6;
368
+ var Header: Element_3;
369
+ var Body: Element_4;
370
+ var Footer: Element_5;
371
+ var Row: Element_6;
372
+ var Cell: Element_7;
326
373
  }
327
374
 
328
- export declare function Tabs({ children }: Props_33): JSX.Element;
375
+ export declare function Tabs({ children }: Props_38): JSX.Element;
329
376
 
330
377
  export declare namespace Tabs {
331
378
  var Tab: Tab;
332
379
  }
333
380
 
334
- declare function Text_2({ value, type, size, weight, wrap }: Props_31): JSX.Element;
381
+ declare function Text_2({ value, type, size, weight, wrap }: Props_34): JSX.Element;
335
382
  export { Text_2 as Text }
336
383
 
337
384
  export declare const TextArea: ForwardRefExoticComponent<Props_16 & RefAttributes<HTMLTextAreaElement>>;
338
385
 
339
386
  export declare const TextBox: ForwardRefExoticComponent<Props_15 & RefAttributes<HTMLInputElement>>;
340
387
 
341
- export declare function Title({ size, children }: Props_32): JSX.Element;
388
+ export declare function Title({ size, children }: Props_35): JSX.Element;
342
389
 
343
390
  export { }
package/dist/mtds.js CHANGED
@@ -1,11 +1,11 @@
1
- import { jsx as a, jsxs as p } from "react/jsx-runtime";
2
- import { forwardRef as f, useRef as y, useEffect as x } from "react";
3
- function j({ source: e, title: n, alt: t = "Avatar", width: r, height: i, fit: c = "contain" }) {
4
- const s = "avatar fit-" + c;
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 G({ source: e, title: n, alt: t = "Avatar", width: r, height: i, fit: o = "contain" }) {
4
+ const c = "avatar fit-" + o;
5
5
  return /* @__PURE__ */ a(
6
6
  "img",
7
7
  {
8
- className: s,
8
+ className: c,
9
9
  title: n,
10
10
  alt: t,
11
11
  style: { width: r, height: i },
@@ -13,78 +13,78 @@ function j({ source: e, title: n, alt: t = "Avatar", width: r, height: i, fit: c
13
13
  }
14
14
  );
15
15
  }
16
- function D({ 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 I({ type: e = "primary", border: n = "small", size: t = "medium", text: r, onClick: i }) {
21
- const c = "button type-" + e + " border-" + n + " size-" + t;
22
- return /* @__PURE__ */ a("input", { type: e === "submit" ? "submit" : "button", onClick: i, className: c, disabled: e === "disabled", value: r });
20
+ function q({ 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 });
23
23
  }
24
- function F({ 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 M = f(function({ name: n, label: t, defaultChecked: r, checked: i, value: c, required: s, onChange: l }, o) {
29
- return /* @__PURE__ */ p("label", { className: "checkbox", children: [
28
+ const J = g(function({ name: n, label: t, defaultChecked: r, checked: i, value: o, required: c, onChange: l }, s) {
29
+ return /* @__PURE__ */ f("label", { className: "checkbox", children: [
30
30
  /* @__PURE__ */ a(
31
31
  "input",
32
32
  {
33
33
  type: "checkbox",
34
34
  defaultChecked: r,
35
35
  checked: i,
36
- value: c,
36
+ value: o,
37
37
  name: n,
38
- ref: o,
39
- required: s,
38
+ ref: s,
39
+ required: c,
40
40
  onChange: l
41
41
  }
42
42
  ),
43
43
  t
44
44
  ] });
45
45
  });
46
- function z({ alignX: e = "left", effect: n = "none", padding: t = "none", onClick: r, children: i }) {
47
- const c = "clickarea padding-" + t + " align-x-" + e + " effect-" + n;
48
- return /* @__PURE__ */ a("div", { className: c, onClick: r, children: i });
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 });
49
49
  }
50
- function N({ alignX: e = "left", alignY: n = "top", gap: t = "medium", wrap: r = "nowrap", children: i }) {
51
- const c = "column align-x-" + e + " align-y-" + n + " gap-" + t + " wrap-" + r;
52
- return /* @__PURE__ */ a("div", { className: c, children: i });
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 });
53
53
  }
54
- const P = f(function({ name: n, defaultValue: t, value: r, title: i, type: c = "datetime", border: s = "small", size: l = "medium", required: o, onChange: u }, m) {
55
- const d = "datetime border-" + s + " size-" + l;
54
+ const K = g(function({ name: n, defaultValue: t, value: r, title: i, type: o = "datetime", border: c = "small", size: l = "medium", required: s, onChange: u }, m) {
55
+ const d = "datetime border-" + c + " size-" + l;
56
56
  return /* @__PURE__ */ a(
57
57
  "input",
58
58
  {
59
59
  className: d,
60
- type: c,
60
+ type: o,
61
61
  name: n,
62
62
  defaultValue: t,
63
63
  value: r,
64
64
  title: i,
65
65
  ref: m,
66
- required: o,
66
+ required: s,
67
67
  onChange: u
68
68
  }
69
69
  );
70
- }), G = f(function({ children: n, submitHandler: t }, r) {
71
- return /* @__PURE__ */ a("form", { onSubmit: (c) => {
72
- c.preventDefault(), t && t(c.target);
70
+ }), O = g(function({ children: n, submitHandler: t }, r) {
71
+ return /* @__PURE__ */ a("form", { onSubmit: (o) => {
72
+ o.preventDefault(), t && t(o.target);
73
73
  }, className: "form", ref: r, children: n });
74
74
  });
75
- function q({ layout: e, gap: n = "medium", children: t }) {
75
+ function Q({ layout: e, gap: n = "medium", children: t }) {
76
76
  const r = "grid layout-" + e + " gap-" + n;
77
77
  return /* @__PURE__ */ a("div", { className: r, children: t });
78
78
  }
79
- function H({ type: e }) {
79
+ function U({ type: e }) {
80
80
  return /* @__PURE__ */ a("span", { className: "icon " + e });
81
81
  }
82
- function J({ source: e, title: n, alt: t, width: r, height: i, fit: c = "contain" }) {
83
- const s = "image fit-" + c;
82
+ function E({ source: e, title: n, alt: t, width: r, height: i, fit: o = "contain" }) {
83
+ const c = "image fit-" + o;
84
84
  return /* @__PURE__ */ a(
85
85
  "img",
86
86
  {
87
- className: s,
87
+ className: c,
88
88
  title: n,
89
89
  alt: t,
90
90
  style: { width: r, height: i },
@@ -92,42 +92,54 @@ function J({ source: e, title: n, alt: t, width: r, height: i, fit: c = "contain
92
92
  }
93
93
  );
94
94
  }
95
- function K({ label: e, element: n }) {
96
- return /* @__PURE__ */ p("div", { className: "input", children: [
95
+ function V({ label: e, element: n }) {
96
+ return /* @__PURE__ */ f("div", { className: "input", children: [
97
97
  e,
98
98
  n
99
99
  ] });
100
100
  }
101
- function O({ value: e }) {
101
+ function W({ value: e }) {
102
102
  return /* @__PURE__ */ a("label", { className: "label", children: e });
103
103
  }
104
- function Q({ url: e, target: n, children: t }) {
104
+ function Z({ url: e, target: n, children: t }) {
105
105
  return /* @__PURE__ */ a("a", { className: "link", href: e, target: n, children: t });
106
106
  }
107
- function U({ open: e = !0, sizing: n = "content", children: t }) {
108
- const r = y(null), i = "modal sizing-" + n;
109
- return x(() => {
107
+ function T({ children: e }) {
108
+ return /* @__PURE__ */ a("li", { children: e });
109
+ }
110
+ function C({ type: e, size: n = "medium", children: t }) {
111
+ const r = "list size-" + n;
112
+ return e === "ordered" ? /* @__PURE__ */ a("ol", { className: r, children: t }) : /* @__PURE__ */ a("ul", { className: r, children: t });
113
+ }
114
+ C.Item = T;
115
+ function _({ open: e = !0, sizing: n = "content", children: t }) {
116
+ const r = w(null), i = "modal sizing-" + n;
117
+ return S(() => {
110
118
  e ? r.current?.showModal() : r.current?.close();
111
119
  }, [e]), /* @__PURE__ */ a("dialog", { ref: r, className: i, children: t });
112
120
  }
113
- function V({ type: e = "normal", padding: n = "large", children: t }) {
121
+ function X({ padding: e = "none", children: n }) {
122
+ const t = "navigation padding-" + e;
123
+ return /* @__PURE__ */ a("nav", { className: t, children: n });
124
+ }
125
+ function ee({ type: e = "normal", padding: n = "large", children: t }) {
114
126
  const r = "panel type-" + e + " padding-" + n;
115
127
  return /* @__PURE__ */ a("div", { className: r, children: t });
116
128
  }
117
- function W({ size: e = "medium", children: n }) {
129
+ function ne({ size: e = "medium", children: n }) {
118
130
  const t = "paragraph size-" + e;
119
131
  return /* @__PURE__ */ a("p", { className: t, children: n });
120
132
  }
121
- function w({ alignX: e = "left", alignY: n = "top", gap: t = "medium", wrap: r = "nowrap", children: i }) {
122
- const c = "row align-x-" + e + " align-y-" + n + " gap-" + t + " wrap-" + r;
123
- return /* @__PURE__ */ a("div", { className: c, children: i });
133
+ function b({ alignX: e = "left", alignY: n = "top", gap: t = "medium", wrap: r = "nowrap", children: i }) {
134
+ const o = "row align-x-" + e + " align-y-" + n + " gap-" + t + " wrap-" + r;
135
+ return /* @__PURE__ */ a("div", { className: o, children: i });
124
136
  }
125
- function E({ direction: e, size: n = "medium" }) {
137
+ function L({ direction: e, size: n = "medium" }) {
126
138
  const t = "ruler direction-" + e + " size-" + n;
127
139
  return /* @__PURE__ */ a("div", { className: t });
128
140
  }
129
- const Y = f(function({ name: n, options: t, defaultValue: r, value: i, border: c = "small", size: s = "medium", onChange: l }, o) {
130
- const u = "select border-" + c + " size-" + s;
141
+ const te = g(function({ name: n, options: t, defaultValue: r, value: i, border: o = "small", size: c = "medium", onChange: l }, s) {
142
+ const u = "select border-" + o + " size-" + c;
131
143
  return /* @__PURE__ */ a(
132
144
  "select",
133
145
  {
@@ -136,83 +148,83 @@ const Y = f(function({ name: n, options: t, defaultValue: r, value: i, border: c
136
148
  defaultValue: r,
137
149
  value: i,
138
150
  onChange: l,
139
- ref: o,
151
+ ref: s,
140
152
  children: Array.from(t).map(([m, d]) => /* @__PURE__ */ a("option", { value: m, children: d }, m))
141
153
  }
142
154
  );
143
155
  });
144
- function Z({ active: e = !0 }) {
156
+ function ae({ active: e = !0 }) {
145
157
  const n = "spinner" + (e ? " active" : "");
146
158
  return /* @__PURE__ */ a("div", { className: n });
147
159
  }
148
- function T({ children: e }) {
160
+ function k({ children: e }) {
149
161
  return /* @__PURE__ */ a("thead", { children: e });
150
162
  }
151
- function S({ border: e = "medium", children: n }) {
163
+ function I({ border: e = "medium", children: n }) {
152
164
  const t = "border-" + e;
153
165
  return /* @__PURE__ */ a("tbody", { className: t, children: n });
154
166
  }
155
- function k({ children: e }) {
167
+ function A({ children: e }) {
156
168
  return /* @__PURE__ */ a("tfoot", { children: e });
157
169
  }
158
- function C({ children: e }) {
170
+ function B({ children: e }) {
159
171
  return /* @__PURE__ */ a("tr", { children: e });
160
172
  }
161
- function L({ colspan: e, rowspan: n, alignX: t = "left", alignY: r = "center", size: i = "fit", children: c }) {
162
- const s = "align-x-" + t + " align-y-" + r + " size-" + i;
163
- return /* @__PURE__ */ a("td", { className: s, colSpan: e, rowSpan: n, children: c });
173
+ function R({ colspan: e, rowspan: n, alignX: t = "left", alignY: r = "center", size: i = "fit", children: o }) {
174
+ const c = "align-x-" + t + " align-y-" + r + " size-" + i;
175
+ return /* @__PURE__ */ a("td", { className: c, colSpan: e, rowSpan: n, children: o });
164
176
  }
165
- function g({ padding: e = "medium", children: n }) {
177
+ function h({ padding: e = "medium", children: n }) {
166
178
  const t = "table padding-" + e;
167
179
  return /* @__PURE__ */ a("table", { className: t, children: n });
168
180
  }
169
- g.Header = T;
170
- g.Body = S;
171
- g.Footer = k;
172
- g.Row = C;
173
- g.Cell = L;
174
- function A({ value: e, type: n = "primary", size: t = "medium", weight: r = "normal", wrap: i = "none" }) {
175
- const c = "text type-" + n + " size-" + t + " weight-" + r + " wrap-" + i;
176
- return /* @__PURE__ */ a("span", { className: c, children: e });
177
- }
178
- const _ = f(function({ name: n, placeholder: t, defaultValue: r, value: i, border: c = "small", size: s = "medium", cols: l, rows: o, limit: u, onChange: m }, d) {
179
- const h = "textarea border-" + c + " size-" + s;
181
+ h.Header = k;
182
+ h.Body = I;
183
+ h.Footer = A;
184
+ h.Row = B;
185
+ h.Cell = R;
186
+ function z({ value: e, type: n = "primary", size: t = "medium", weight: r = "normal", wrap: i = "normal" }) {
187
+ const o = "text type-" + n + " size-" + t + " weight-" + r + " wrap-" + i;
188
+ return /* @__PURE__ */ a("span", { className: o, children: e });
189
+ }
190
+ const re = g(function({ name: n, placeholder: t, defaultValue: r, value: i, border: o = "small", size: c = "medium", cols: l, rows: s, limit: u, onChange: m }, d) {
191
+ const N = "textarea border-" + o + " size-" + c;
180
192
  return /* @__PURE__ */ a(
181
193
  "textarea",
182
194
  {
183
- className: h,
195
+ className: N,
184
196
  name: n,
185
197
  placeholder: t,
186
198
  defaultValue: r,
187
199
  value: i,
188
200
  cols: l,
189
- rows: o,
201
+ rows: s,
190
202
  ref: d,
191
203
  maxLength: u,
192
204
  onChange: m
193
205
  }
194
206
  );
195
- }), ee = f(function({ name: n, placeholder: t, defaultValue: r, value: i, limit: c, pattern: s, title: l, type: o = "text", border: u = "small", size: m = "medium", required: d, onChange: h }, b) {
196
- const v = "textbox border-" + u + " size-" + m;
207
+ }), ie = g(function({ name: n, placeholder: t, defaultValue: r, value: i, limit: o, pattern: c, title: l, type: s = "text", border: u = "small", size: m = "medium", required: d, onChange: N }, v) {
208
+ const x = "textbox border-" + u + " size-" + m;
197
209
  return /* @__PURE__ */ a(
198
210
  "input",
199
211
  {
200
- className: v,
201
- type: o,
212
+ className: x,
213
+ type: s,
202
214
  name: n,
203
215
  placeholder: t,
204
216
  defaultValue: r,
205
217
  value: i,
206
- maxLength: c,
207
- pattern: s,
218
+ maxLength: o,
219
+ pattern: c,
208
220
  title: l,
209
- ref: b,
221
+ ref: v,
210
222
  required: d,
211
- onChange: h
223
+ onChange: N
212
224
  }
213
225
  );
214
226
  });
215
- function ne({ size: e = "large", children: n }) {
227
+ function oe({ size: e = "large", children: n }) {
216
228
  const t = "title size-" + e;
217
229
  switch (e) {
218
230
  case "large":
@@ -223,62 +235,77 @@ function ne({ size: e = "large", children: n }) {
223
235
  return /* @__PURE__ */ a("h3", { className: t, children: n });
224
236
  }
225
237
  }
226
- function B({ title: e, active: n, onClick: t }) {
227
- return /* @__PURE__ */ a(N, { alignX: "stretch", children: /* @__PURE__ */ a(z, { padding: "medium", effect: "hover", alignX: "center", onClick: t, children: /* @__PURE__ */ a(A, { value: e, weight: n ? "bold" : "normal", size: "large" }) }) });
238
+ function $({ title: e, active: n, activeIcon: t, inactiveIcon: r, orientation: i = "horizontal", onClick: o }) {
239
+ const c = i === "horizontal", l = c ? b : p, s = c ? "medium" : "small", u = c ? "left" : "center";
240
+ return /* @__PURE__ */ a(p, { gap: "none", alignX: "stretch", children: /* @__PURE__ */ a(y, { padding: "small", effect: "hover", alignX: u, onClick: o, children: /* @__PURE__ */ f(l, { gap: s, alignX: u, alignY: "center", children: [
241
+ /* @__PURE__ */ a(E, { source: n ? t : r, width: c ? "1.6em" : "2em" }),
242
+ /* @__PURE__ */ a(z, { value: e, type: n ? "primary" : "secondary", size: c ? "large" : "small", weight: n ? "bold" : "normal" })
243
+ ] }) }) });
244
+ }
245
+ function j({ orientation: e = "horizontal", children: n }) {
246
+ const t = e === "horizontal";
247
+ return /* @__PURE__ */ a(X, { children: /* @__PURE__ */ a(t ? b : p, { gap: t ? "medium" : "small", alignX: t ? "center" : "left", children: n }) });
248
+ }
249
+ j.Item = $;
250
+ function D({ title: e, active: n, onClick: t }) {
251
+ return /* @__PURE__ */ a(p, { alignX: "stretch", children: /* @__PURE__ */ a(y, { padding: "medium", effect: "hover", alignX: "center", onClick: t, children: /* @__PURE__ */ a(z, { value: e, type: n ? "primary" : "secondary", weight: n ? "bold" : "normal", size: "large" }) }) });
228
252
  }
229
- function R({ children: e }) {
230
- return /* @__PURE__ */ p(N, { alignX: "stretch", gap: "none", children: [
231
- /* @__PURE__ */ a(w, { alignX: "justify", children: e }),
232
- /* @__PURE__ */ a(E, { direction: "horizontal", size: "small" })
253
+ function M({ children: e }) {
254
+ return /* @__PURE__ */ f(p, { alignX: "stretch", gap: "none", children: [
255
+ /* @__PURE__ */ a(b, { alignX: "justify", children: e }),
256
+ /* @__PURE__ */ a(L, { direction: "horizontal", size: "small" })
233
257
  ] });
234
258
  }
235
- R.Tab = B;
236
- function te({ children: e }) {
259
+ M.Tab = D;
260
+ function ce({ children: e }) {
237
261
  return /* @__PURE__ */ a("main", { className: "layout-centered", children: /* @__PURE__ */ a("div", { className: "content", children: e }) });
238
262
  }
239
- function ae({ header: e, footer: n, sidebar: t, children: r }) {
240
- return /* @__PURE__ */ p("div", { className: "layout-sidebar", children: [
263
+ function le({ header: e, footer: n, sidebar: t, children: r }) {
264
+ return /* @__PURE__ */ f("div", { className: "layout-sidebar", children: [
241
265
  /* @__PURE__ */ a("header", { children: e }),
242
- /* @__PURE__ */ p("div", { className: "content", children: [
266
+ /* @__PURE__ */ f("div", { className: "content", children: [
243
267
  /* @__PURE__ */ a("div", { className: "left", children: /* @__PURE__ */ a("aside", { children: t }) }),
244
268
  /* @__PURE__ */ a("div", { className: "right", children: /* @__PURE__ */ a("main", { children: r }) })
245
269
  ] }),
246
270
  /* @__PURE__ */ a("footer", { children: n })
247
271
  ] });
248
272
  }
249
- function re({ children: e }) {
273
+ function se({ children: e }) {
250
274
  return /* @__PURE__ */ a("div", { className: "mtds", children: e });
251
275
  }
252
276
  export {
253
- j as Avatar,
254
- D as Border,
255
- I as Button,
256
- F as Cell,
257
- te as CenteredLayout,
258
- M as CheckBox,
259
- z as ClickArea,
260
- N as Column,
261
- P as DateTime,
262
- re as DesignSystem,
263
- G as Form,
264
- q as Grid,
265
- H as Icon,
266
- J as Image,
267
- K as Input,
268
- O as Label,
269
- Q as Link,
270
- U as Modal,
271
- V as Panel,
272
- W as Paragraph,
273
- w as Row,
274
- E as Ruler,
275
- Y as Select,
276
- ae as SidebarLayout,
277
- Z as Spinner,
278
- g as Table,
279
- R as Tabs,
280
- A as Text,
281
- _ as TextArea,
282
- ee as TextBox,
283
- ne as Title
277
+ G as Avatar,
278
+ Y as Border,
279
+ q as Button,
280
+ H as Cell,
281
+ ce as CenteredLayout,
282
+ J as CheckBox,
283
+ y as ClickArea,
284
+ p as Column,
285
+ K as DateTime,
286
+ se as DesignSystem,
287
+ O as Form,
288
+ Q as Grid,
289
+ U as Icon,
290
+ E as Image,
291
+ V as Input,
292
+ W as Label,
293
+ Z as Link,
294
+ C as List,
295
+ j as Menu,
296
+ _ as Modal,
297
+ X as Navigation,
298
+ ee as Panel,
299
+ ne as Paragraph,
300
+ b as Row,
301
+ L as Ruler,
302
+ te as Select,
303
+ le as SidebarLayout,
304
+ ae as Spinner,
305
+ h as Table,
306
+ M as Tabs,
307
+ z as Text,
308
+ re as TextArea,
309
+ ie as TextBox,
310
+ oe as Title
284
311
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@maskingtech/designsystem",
3
3
  "private": false,
4
- "version": "0.0.5",
4
+ "version": "0.0.7",
5
5
  "type": "module",
6
6
  "repository": {
7
7
  "url": "https://github.com/MaskingTechnology/designsystem"
@@ -10,7 +10,8 @@
10
10
  "build": "vite build",
11
11
  "clean": "rimraf dist",
12
12
  "lint": "eslint",
13
- "prepublishOnly": "npm run build"
13
+ "prepublishOnly": "npm run build",
14
+ "version": "npm version $VERSION --no-git-tag-version"
14
15
  },
15
16
  "exports": {
16
17
  ".": "./dist/mtds.js",