@maskingtech/designsystem 0.0.5 → 0.0.6

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 +73 -44
  3. package/dist/mtds.js +141 -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 .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_38): JSX.Element;
17
17
 
18
18
  export declare const CheckBox: ForwardRefExoticComponent<Props_5 & RefAttributes<HTMLInputElement>>;
19
19
 
@@ -23,17 +23,17 @@ 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_40): JSX.Element;
27
27
 
28
- declare function Element_2({ children }: Props_26): JSX.Element;
28
+ declare function Element_2({ children }: Props_27): JSX.Element;
29
29
 
30
- declare function Element_3({ border, children }: Props_29): JSX.Element;
30
+ declare function Element_3({ border, children }: Props_30): JSX.Element;
31
31
 
32
- declare function Element_4({ children }: Props_30): JSX.Element;
32
+ declare function Element_4({ children }: Props_31): JSX.Element;
33
33
 
34
- declare function Element_5({ children }: Props_27): JSX.Element;
34
+ declare function Element_5({ children }: Props_28): JSX.Element;
35
35
 
36
- declare function Element_6({ colspan, rowspan, alignX, alignY, size, children }: Props_28): JSX.Element;
36
+ declare function Element_6({ colspan, rowspan, alignX, alignY, size, children }: Props_29): JSX.Element;
37
37
 
38
38
  export declare const Form: ForwardRefExoticComponent<Props_9 & RefAttributes<HTMLFormElement>>;
39
39
 
@@ -46,15 +46,25 @@ export { Image_2 as Image }
46
46
 
47
47
  export declare function Input({ label, element }: Props_13): JSX.Element;
48
48
 
49
+ declare function Item({ title, active, activeIcon, inactiveIcon, orientation, onClick }: Props_35): JSX.Element;
50
+
49
51
  export declare function Label({ value }: Props_14): JSX.Element;
50
52
 
51
53
  export declare function Link({ url, target, children }: Props_18): JSX.Element;
52
54
 
55
+ export declare function Menu({ orientation, children }: Props_34): JSX.Element;
56
+
57
+ export declare namespace Menu {
58
+ var Item: Item;
59
+ }
60
+
53
61
  export declare function Modal({ open, sizing, children }: Props_19): JSX.Element;
54
62
 
55
- export declare function Panel({ type, padding, children }: Props_20): JSX.Element;
63
+ export declare function Navigation({ padding, children }: Props_20): JSX.Element;
56
64
 
57
- export declare function Paragraph({ size, children }: Props_21): JSX.Element;
65
+ export declare function Panel({ type, padding, children }: Props_21): JSX.Element;
66
+
67
+ export declare function Paragraph({ size, children }: Props_22): JSX.Element;
58
68
 
59
69
  declare type Props = {
60
70
  readonly source: string;
@@ -151,17 +161,22 @@ declare type Props_2 = {
151
161
  };
152
162
 
153
163
  declare type Props_20 = {
164
+ readonly padding?: 'none' | 'small' | 'medium' | 'large';
165
+ readonly children?: ReactNode;
166
+ };
167
+
168
+ declare type Props_21 = {
154
169
  readonly type?: 'normal' | 'alert' | 'warning' | 'success' | 'error' | 'transparent';
155
170
  readonly padding?: 'small' | 'medium' | 'large';
156
171
  readonly children?: ReactNode;
157
172
  };
158
173
 
159
- declare type Props_21 = {
174
+ declare type Props_22 = {
160
175
  readonly size?: 'small' | 'medium' | 'large';
161
176
  readonly children: ReactNode;
162
177
  };
163
178
 
164
- declare type Props_22 = {
179
+ declare type Props_23 = {
165
180
  readonly alignX?: 'left' | 'center' | 'right' | 'justify';
166
181
  readonly alignY?: 'top' | 'center' | 'bottom' | 'stretch';
167
182
  readonly gap?: 'none' | 'small' | 'medium' | 'large';
@@ -169,22 +184,18 @@ declare type Props_22 = {
169
184
  readonly children: ReactNode;
170
185
  };
171
186
 
172
- declare type Props_23 = {
187
+ declare type Props_24 = {
173
188
  readonly direction: 'horizontal' | 'vertical';
174
189
  readonly size?: 'small' | 'medium' | 'large';
175
190
  };
176
191
 
177
- declare type Props_24 = {
178
- readonly active?: boolean;
179
- };
180
-
181
192
  declare type Props_25 = {
182
- readonly padding?: 'small' | 'medium' | 'large';
183
- readonly children?: ReactElement<Props_26> | ReactElement<Props_29> | ReactElement<Props_30>[];
193
+ readonly active?: boolean;
184
194
  };
185
195
 
186
196
  declare type Props_26 = {
187
- readonly children?: ReactElement<Props_27>;
197
+ readonly padding?: 'small' | 'medium' | 'large';
198
+ readonly children?: ReactElement<Props_27> | ReactElement<Props_30> | ReactElement<Props_31>[];
188
199
  };
189
200
 
190
201
  declare type Props_27 = {
@@ -192,6 +203,10 @@ declare type Props_27 = {
192
203
  };
193
204
 
194
205
  declare type Props_28 = {
206
+ readonly children?: ReactElement<Props_29>;
207
+ };
208
+
209
+ declare type Props_29 = {
195
210
  readonly colspan?: number;
196
211
  readonly rowspan?: number;
197
212
  readonly alignX?: 'left' | 'center' | 'right';
@@ -200,11 +215,6 @@ declare type Props_28 = {
200
215
  readonly children?: ReactNode;
201
216
  };
202
217
 
203
- declare type Props_29 = {
204
- readonly border?: 'none' | 'small' | 'medium' | 'large';
205
- readonly children?: ReactElement<Props_27>;
206
- };
207
-
208
218
  declare type Props_3 = {
209
219
  readonly type?: 'submit' | 'primary' | 'secondary' | 'disabled';
210
220
  readonly border?: 'none' | 'small' | 'medium' | 'large';
@@ -214,10 +224,15 @@ declare type Props_3 = {
214
224
  };
215
225
 
216
226
  declare type Props_30 = {
217
- readonly children?: ReactElement<Props_27>;
227
+ readonly border?: 'none' | 'small' | 'medium' | 'large';
228
+ readonly children?: ReactElement<Props_28>;
218
229
  };
219
230
 
220
231
  declare type Props_31 = {
232
+ readonly children?: ReactElement<Props_28>;
233
+ };
234
+
235
+ declare type Props_32 = {
221
236
  readonly value: string;
222
237
  readonly type?: 'primary' | 'secondary';
223
238
  readonly size?: 'small' | 'medium' | 'large';
@@ -225,41 +240,55 @@ declare type Props_31 = {
225
240
  readonly wrap?: 'none' | 'normal' | 'break-word';
226
241
  };
227
242
 
228
- declare type Props_32 = {
243
+ declare type Props_33 = {
229
244
  readonly size?: 'small' | 'medium' | 'large';
230
245
  readonly children: ReactNode;
231
246
  };
232
247
 
233
- declare type Props_33 = {
234
- readonly children?: ReactElement<Props_34> | ReactElement<Props_34>[];
248
+ declare type Props_34 = {
249
+ readonly orientation?: 'horizontal' | 'vertical';
250
+ readonly children?: ReactElement<Props_35> | ReactElement<Props_35>[];
235
251
  };
236
252
 
237
- declare type Props_34 = {
253
+ declare type Props_35 = {
238
254
  readonly title: string;
239
255
  readonly active: boolean;
256
+ readonly activeIcon: string;
257
+ readonly inactiveIcon: string;
258
+ readonly orientation?: 'horizontal' | 'vertical';
240
259
  readonly onClick: () => void;
241
260
  };
242
261
 
243
- declare type Props_35 = {
262
+ declare type Props_36 = {
263
+ readonly children?: ReactElement<Props_37> | ReactElement<Props_37>[];
264
+ };
265
+
266
+ declare type Props_37 = {
267
+ readonly title: string;
268
+ readonly active: boolean;
269
+ readonly onClick: () => void;
270
+ };
271
+
272
+ declare type Props_38 = {
244
273
  readonly children?: ReactNode;
245
274
  };
246
275
 
247
- declare type Props_36 = {
276
+ declare type Props_39 = {
248
277
  readonly header?: ReactNode;
249
278
  readonly footer?: ReactNode;
250
279
  readonly sidebar: ReactNode;
251
280
  readonly children: ReactNode;
252
281
  };
253
282
 
254
- declare type Props_37 = {
255
- readonly children?: ReactNode;
256
- };
257
-
258
283
  declare type Props_4 = {
259
284
  readonly sizing?: 'fixed' | 'fluid';
260
285
  readonly children: ReactNode;
261
286
  };
262
287
 
288
+ declare type Props_40 = {
289
+ readonly children?: ReactNode;
290
+ };
291
+
263
292
  declare type Props_5 = {
264
293
  readonly name: string;
265
294
  readonly label: string;
@@ -303,19 +332,19 @@ declare type Props_9 = {
303
332
  readonly submitHandler?: (form: HTMLFormElement) => void;
304
333
  };
305
334
 
306
- export declare function Row({ alignX, alignY, gap, wrap, children }: Props_22): JSX.Element;
335
+ export declare function Row({ alignX, alignY, gap, wrap, children }: Props_23): JSX.Element;
307
336
 
308
- export declare function Ruler({ direction, size }: Props_23): JSX.Element;
337
+ export declare function Ruler({ direction, size }: Props_24): JSX.Element;
309
338
 
310
339
  export declare const Select: ForwardRefExoticComponent<Props_17 & RefAttributes<HTMLSelectElement>>;
311
340
 
312
- export declare function SidebarLayout({ header, footer, sidebar, children }: Props_36): JSX.Element;
341
+ export declare function SidebarLayout({ header, footer, sidebar, children }: Props_39): JSX.Element;
313
342
 
314
- export declare function Spinner({ active }: Props_24): JSX.Element;
343
+ export declare function Spinner({ active }: Props_25): JSX.Element;
315
344
 
316
- declare function Tab({ title, active, onClick }: Props_34): JSX.Element;
345
+ declare function Tab({ title, active, onClick }: Props_37): JSX.Element;
317
346
 
318
- export declare function Table({ padding, children }: Props_25): JSX.Element;
347
+ export declare function Table({ padding, children }: Props_26): JSX.Element;
319
348
 
320
349
  export declare namespace Table {
321
350
  var Header: Element_2;
@@ -325,19 +354,19 @@ export declare namespace Table {
325
354
  var Cell: Element_6;
326
355
  }
327
356
 
328
- export declare function Tabs({ children }: Props_33): JSX.Element;
357
+ export declare function Tabs({ children }: Props_36): JSX.Element;
329
358
 
330
359
  export declare namespace Tabs {
331
360
  var Tab: Tab;
332
361
  }
333
362
 
334
- declare function Text_2({ value, type, size, weight, wrap }: Props_31): JSX.Element;
363
+ declare function Text_2({ value, type, size, weight, wrap }: Props_32): JSX.Element;
335
364
  export { Text_2 as Text }
336
365
 
337
366
  export declare const TextArea: ForwardRefExoticComponent<Props_16 & RefAttributes<HTMLTextAreaElement>>;
338
367
 
339
368
  export declare const TextBox: ForwardRefExoticComponent<Props_15 & RefAttributes<HTMLInputElement>>;
340
369
 
341
- export declare function Title({ size, children }: Props_32): JSX.Element;
370
+ export declare function Title({ size, children }: Props_33): JSX.Element;
342
371
 
343
372
  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 F({ 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 P({ 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 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 });
23
23
  }
24
- function F({ sizing: e = "fluid", children: n }) {
24
+ function Y({ 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 q = 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 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;
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
+ }), J = 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 K({ 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 O({ 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,46 @@ 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 Q({ 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 U({ 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 V({ 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 W({ open: e = !0, sizing: n = "content", children: t }) {
108
+ const r = w(null), i = "modal sizing-" + n;
109
+ return S(() => {
110
110
  e ? r.current?.showModal() : r.current?.close();
111
111
  }, [e]), /* @__PURE__ */ a("dialog", { ref: r, className: i, children: t });
112
112
  }
113
- function V({ type: e = "normal", padding: n = "large", children: t }) {
113
+ function T({ padding: e = "none", children: n }) {
114
+ const t = "navigation padding-" + e;
115
+ return /* @__PURE__ */ a("nav", { className: t, children: n });
116
+ }
117
+ function Z({ type: e = "normal", padding: n = "large", children: t }) {
114
118
  const r = "panel type-" + e + " padding-" + n;
115
119
  return /* @__PURE__ */ a("div", { className: r, children: t });
116
120
  }
117
- function W({ size: e = "medium", children: n }) {
121
+ function _({ size: e = "medium", children: n }) {
118
122
  const t = "paragraph size-" + e;
119
123
  return /* @__PURE__ */ a("p", { className: t, children: n });
120
124
  }
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 });
125
+ 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 });
124
128
  }
125
- function E({ direction: e, size: n = "medium" }) {
129
+ function C({ direction: e, size: n = "medium" }) {
126
130
  const t = "ruler direction-" + e + " size-" + n;
127
131
  return /* @__PURE__ */ a("div", { className: t });
128
132
  }
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;
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;
131
135
  return /* @__PURE__ */ a(
132
136
  "select",
133
137
  {
@@ -136,83 +140,83 @@ const Y = f(function({ name: n, options: t, defaultValue: r, value: i, border: c
136
140
  defaultValue: r,
137
141
  value: i,
138
142
  onChange: l,
139
- ref: o,
143
+ ref: s,
140
144
  children: Array.from(t).map(([m, d]) => /* @__PURE__ */ a("option", { value: m, children: d }, m))
141
145
  }
142
146
  );
143
147
  });
144
- function Z({ active: e = !0 }) {
148
+ function ne({ active: e = !0 }) {
145
149
  const n = "spinner" + (e ? " active" : "");
146
150
  return /* @__PURE__ */ a("div", { className: n });
147
151
  }
148
- function T({ children: e }) {
152
+ function X({ children: e }) {
149
153
  return /* @__PURE__ */ a("thead", { children: e });
150
154
  }
151
- function S({ border: e = "medium", children: n }) {
155
+ function k({ border: e = "medium", children: n }) {
152
156
  const t = "border-" + e;
153
157
  return /* @__PURE__ */ a("tbody", { className: t, children: n });
154
158
  }
155
- function k({ children: e }) {
159
+ function L({ children: e }) {
156
160
  return /* @__PURE__ */ a("tfoot", { children: e });
157
161
  }
158
- function C({ children: e }) {
162
+ function A({ children: e }) {
159
163
  return /* @__PURE__ */ a("tr", { children: e });
160
164
  }
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 });
165
+ function B({ colspan: e, rowspan: n, alignX: t = "left", alignY: r = "center", size: i = "fit", children: o }) {
166
+ const c = "align-x-" + t + " align-y-" + r + " size-" + i;
167
+ return /* @__PURE__ */ a("td", { className: c, colSpan: e, rowSpan: n, children: o });
164
168
  }
165
- function g({ padding: e = "medium", children: n }) {
169
+ function h({ padding: e = "medium", children: n }) {
166
170
  const t = "table padding-" + e;
167
171
  return /* @__PURE__ */ a("table", { className: t, children: n });
168
172
  }
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;
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;
180
184
  return /* @__PURE__ */ a(
181
185
  "textarea",
182
186
  {
183
- className: h,
187
+ className: N,
184
188
  name: n,
185
189
  placeholder: t,
186
190
  defaultValue: r,
187
191
  value: i,
188
192
  cols: l,
189
- rows: o,
193
+ rows: s,
190
194
  ref: d,
191
195
  maxLength: u,
192
196
  onChange: m
193
197
  }
194
198
  );
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;
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) {
200
+ const x = "textbox border-" + u + " size-" + m;
197
201
  return /* @__PURE__ */ a(
198
202
  "input",
199
203
  {
200
- className: v,
201
- type: o,
204
+ className: x,
205
+ type: s,
202
206
  name: n,
203
207
  placeholder: t,
204
208
  defaultValue: r,
205
209
  value: i,
206
- maxLength: c,
207
- pattern: s,
210
+ maxLength: o,
211
+ pattern: c,
208
212
  title: l,
209
- ref: b,
213
+ ref: v,
210
214
  required: d,
211
- onChange: h
215
+ onChange: N
212
216
  }
213
217
  );
214
218
  });
215
- function ne({ size: e = "large", children: n }) {
219
+ function re({ size: e = "large", children: n }) {
216
220
  const t = "title size-" + e;
217
221
  switch (e) {
218
222
  case "large":
@@ -223,62 +227,76 @@ function ne({ size: e = "large", children: n }) {
223
227
  return /* @__PURE__ */ a("h3", { className: t, children: n });
224
228
  }
225
229
  }
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" }) }) });
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: [
233
+ /* @__PURE__ */ a(E, { source: n ? t : r, width: c ? "1.6em" : "2em" }),
234
+ /* @__PURE__ */ a(z, { value: e, type: n ? "primary" : "secondary", size: c ? "large" : "small", weight: n ? "bold" : "normal" })
235
+ ] }) }) });
236
+ }
237
+ function R({ orientation: e = "horizontal", children: n }) {
238
+ 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 }) });
240
+ }
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" }) }) });
228
244
  }
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" })
245
+ function j({ children: e }) {
246
+ return /* @__PURE__ */ f(p, { alignX: "stretch", gap: "none", children: [
247
+ /* @__PURE__ */ a(b, { alignX: "justify", children: e }),
248
+ /* @__PURE__ */ a(C, { direction: "horizontal", size: "small" })
233
249
  ] });
234
250
  }
235
- R.Tab = B;
236
- function te({ children: e }) {
251
+ j.Tab = $;
252
+ function ie({ children: e }) {
237
253
  return /* @__PURE__ */ a("main", { className: "layout-centered", children: /* @__PURE__ */ a("div", { className: "content", children: e }) });
238
254
  }
239
- function ae({ header: e, footer: n, sidebar: t, children: r }) {
240
- return /* @__PURE__ */ p("div", { className: "layout-sidebar", children: [
255
+ function oe({ header: e, footer: n, sidebar: t, children: r }) {
256
+ return /* @__PURE__ */ f("div", { className: "layout-sidebar", children: [
241
257
  /* @__PURE__ */ a("header", { children: e }),
242
- /* @__PURE__ */ p("div", { className: "content", children: [
258
+ /* @__PURE__ */ f("div", { className: "content", children: [
243
259
  /* @__PURE__ */ a("div", { className: "left", children: /* @__PURE__ */ a("aside", { children: t }) }),
244
260
  /* @__PURE__ */ a("div", { className: "right", children: /* @__PURE__ */ a("main", { children: r }) })
245
261
  ] }),
246
262
  /* @__PURE__ */ a("footer", { children: n })
247
263
  ] });
248
264
  }
249
- function re({ children: e }) {
265
+ function ce({ children: e }) {
250
266
  return /* @__PURE__ */ a("div", { className: "mtds", children: e });
251
267
  }
252
268
  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
269
+ F as Avatar,
270
+ P as Border,
271
+ G as Button,
272
+ Y as Cell,
273
+ ie as CenteredLayout,
274
+ q as CheckBox,
275
+ 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,
282
+ 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,
291
+ b as Row,
292
+ C as Ruler,
293
+ ee as Select,
294
+ oe as SidebarLayout,
295
+ ne as Spinner,
296
+ h as Table,
297
+ j as Tabs,
298
+ z as Text,
299
+ te as TextArea,
300
+ ae as TextBox,
301
+ re as Title
284
302
  };
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.6",
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",