@maskingtech/designsystem 0.0.4 → 0.0.5

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 +10 -10
  3. package/dist/mtds.js +178 -197
  4. package/package.json +6 -6
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{--margin: 0;--padding-small: var(--container-padding-small);--padding-medium: var(--container-padding-medium);--padding-large: var(--container-padding-large);cursor:pointer;display:inline-block;margin:var(--margin)}.mtds .clickarea.padding-none{padding:0}.mtds .clickarea.padding-small{padding:var(--padding-small)}.mtds .clickarea.padding-medium{padding:var(--padding-medium)}.mtds .clickarea.padding-large{padding:var(--padding-large)}.mtds .column{--gap-small: var(--container-gap-small);--gap-medium: var(--container-gap-medium);--gap-large: var(--container-gap-large);display:flex;flex-direction:column;min-width:0;width:100%}.mtds .column>div,.mtds .column>h1,.mtds .column>h2,.mtds .column>h3,.mtds .column>p,.mtds .column>form,.mtds .column>label,.mtds .column>input,.mtds .column>textarea,.mtds .column>select{margin:0}.mtds .column.align-y-top{justify-content:flex-start}.mtds .column.align-y-center{justify-content:center}.mtds .column.align-y-bottom{justify-content:flex-end}.mtds .column.align-y-justify{justify-content:space-between}.mtds .column.align-x-left{align-items:flex-start}.mtds .column.align-x-center{align-items:center}.mtds .column.align-x-right{align-items:flex-end}.mtds .column.align-x-stretch{align-items:stretch}.mtds .column.gap-small{gap:var(--gap-small)}.mtds .column.gap-medium{gap:var(--gap-medium)}.mtds .column.gap-large{gap:var(--gap-large)}.mtds .column.wrap-nowrap{flex-wrap:nowrap}.mtds .column.wrap-wrap{flex-wrap:wrap}.mtds .datetime{--margin: 0;--border-style: var(--input-border-style);--border-color: var(--input-border-color);--border-small: var(--input-border-small);--border-medium: var(--input-border-medium);--border-large: var(--input-border-large);--size-small: var(--input-padding-small);--size-medium: var(--input-padding-medium);--size-large: var(--input-padding-large);margin:var(--margin);border-style:var(--border-style);border-color:var(--border-color);background-color:var(--color-input-background);font-family:inherit;font-size:inherit}.mtds .datetime:focus-visible{outline-color:color-mix(in srgb,black 10%,var(--border-color))}.mtds .datetime.border-none{border:0}.mtds .datetime.border-small{border-width:var(--border-small)}.mtds .datetime.border-medium{border-width:var(--border-medium)}.mtds .datetime.border-large{border-width:var(--border-large)}.mtds .datetime.size-small{padding:var(--size-small)}.mtds .datetime.size-medium{padding:var(--size-medium)}.mtds .datetime.size-large{padding:var(--size-large)}.mtds .form{margin:0;padding:0;min-width:0}.mtds .grid{--gap-small: var(--container-padding-small);--gap-medium: var(--container-padding-medium);--gap-large: var(--container-padding-large);display:grid;min-width:0}.mtds .grid>div,.mtds .grid>h1,.mtds .grid>h2,.mtds .grid>h3,.mtds .grid>p,.mtds .grid>form,.mtds .grid>label,.mtds .grid>input,.mtds .grid>textarea,.mtds .grid>select{margin:0}.mtds .grid.layout-two-columns{grid-template-columns:1fr 1fr}.mtds .grid.layout-three-columns{grid-template-columns:1fr 1fr 1fr}.mtds .grid.layout-four-columns{grid-template-columns:1fr 1fr 1fr 1fr}.mtds .grid.gap-small{grid-gap:var(--gap-small)}.mtds .grid.gap-medium{grid-gap:var(--gap-medium)}.mtds .grid.gap-large{grid-gap:var(--gap-large)}.mtds .icon{--icon-attachment: "📎";--icon-bookmark: "🔖";--icon-box: "☐";--icon-box-checked: "☑";--icon-box-crossed: "☒";--icon-calendar: "📅";--icon-caution: "☡";--icon-check: "✓";--icon-clock: "⏲";--icon-close: "✕";--icon-cloud: "☁";--icon-comment: "💬";--icon-diamond: "♦";--icon-eye: "👁";--icon-flag: "⚑";--icon-heart: "♥";--icon-home: "⌂";--icon-info: "ℹ";--icon-lock: "🔒";--icon-mail: "✉";--icon-music: "♫";--icon-pencil: "✎";--icon-phone: "☎";--icon-piece: "☮";--icon-plus: "＋";--icon-question: "❓";--icon-rain: "⛆";--icon-recycle: "♻";--icon-search: "🔍";--icon-settings: "⚙";--icon-star: "★";--icon-sun: "☀";--icon-tag: "🏷";--icon-trash: "🗑";--icon-umbrella: "☂";--icon-unlock: "🔓";--icon-user: "👤";--icon-video: "🎬";--icon-warning: "⚠";--icon-yinyang: "☯"}.mtds .icon.attachment:before{content:var(--icon-attachment)}.mtds .icon.bookmark:before{content:var(--icon-bookmark)}.mtds .icon.box:before{content:var(--icon-box)}.mtds .icon.box-checked:before{content:var(--icon-box-checked)}.mtds .icon.box-crossed:before{content:var(--icon-box-crossed)}.mtds .icon.calendar:before{content:var(--icon-calendar)}.mtds .icon.caution:before{content:var(--icon-caution)}.mtds .icon.check:before{content:var(--icon-check)}.mtds .icon.clock:before{content:var(--icon-clock)}.mtds .icon.close:before{content:var(--icon-close)}.mtds .icon.cloud:before{content:var(--icon-cloud)}.mtds .icon.comment:before{content:var(--icon-comment)}.mtds .icon.diamond:before{content:var(--icon-diamond)}.mtds .icon.eye:before{content:var(--icon-eye)}.mtds .icon.flag:before{content:var(--icon-flag)}.mtds .icon.heart:before{content:var(--icon-heart)}.mtds .icon.home:before{content:var(--icon-home)}.mtds .icon.info:before{content:var(--icon-info)}.mtds .icon.lock:before{content:var(--icon-lock)}.mtds .icon.mail:before{content:var(--icon-mail)}.mtds .icon.music:before{content:var(--icon-music)}.mtds .icon.pencil:before{content:var(--icon-pencil)}.mtds .icon.phone:before{content:var(--icon-phone)}.mtds .icon.piece:before{content:var(--icon-piece)}.mtds .icon.plus:before{content:var(--icon-plus)}.mtds .icon.question:before{content:var(--icon-question)}.mtds .icon.rain:before{content:var(--icon-rain)}.mtds .icon.recycle:before{content:var(--icon-recycle)}.mtds .icon.search:before{content:var(--icon-search)}.mtds .icon.settings:before{content:var(--icon-settings)}.mtds .icon.star:before{content:var(--icon-star)}.mtds .icon.sun:before{content:var(--icon-sun)}.mtds .icon.tag:before{content:var(--icon-tag)}.mtds .icon.trash:before{content:var(--icon-trash)}.mtds .icon.umbrella:before{content:var(--icon-umbrella)}.mtds .icon.unlock:before{content:var(--icon-unlock)}.mtds .icon.user:before{content:var(--icon-user)}.mtds .icon.video:before{content:var(--icon-video)}.mtds .icon.warning:before{content:var(--icon-warning)}.mtds .icon.yinyang:before{content:var(--icon-yinyang)}.mtds .image.fit-fill{object-fit:fill}.mtds .image.fit-contain{object-fit:contain}.mtds .image.fit-cover{object-fit:cover}.mtds .image.fit-none{object-fit:none}.mtds .image.fit-scale-down{object-fit:scale-down}.mtds .input{--margin: 0 0 1em 0;--gap: .5em;display:flex;flex-direction:column;gap:var(--gap);margin:var(--margin)}.mtds .input label,.mtds .input input,.mtds .input textarea,.mtds .input select{width:100%}.mtds .label{--margin: 0;font-weight:var(--font-weight-medium);margin:var(--margin)}.mtds .link{--color: var(--color-primary-foreground);--color-hover: var(--color-primary-foreground);--text-decoration: dotted underline;--text-decoration-hover: underline;color:var(--color);text-decoration:var(--text-decoration)}.mtds .link:hover{color:var(--color-hover);text-decoration:var(--text-decoration-hover)}.mtds .modal{border:0;padding:0;min-width:0}.mtds .modal.sizing-full{width:100%}.mtds .modal.sizing-content{width:fit-content}.mtds .panel{--border-radius: 0;--margin: 0;--padding-small: var(--container-padding-small);--padding-medium: var(--container-padding-medium);--padding-large: var(--container-padding-large);--type-alert-background-color: var(--color-alert-background);--type-alert-foreground-color: var(--color-alert-foreground);--type-error-background-color: var(--color-error-background);--type-error-foreground-color: var(--color-error-foreground);--type-normal-background-color: var(--color-secondary-background);--type-normal-foreground-color: var(--color-primary-foreground);--type-success-background-color: var(--color-success-background);--type-success-foreground-color: var(--color-success-foreground);--type-warning-background-color: var(--color-warning-background);--type-warning-foreground-color: var(--color-warning-foreground);border-radius:var(--border-radius);padding:var(--padding);margin:var(--margin);min-width:0}.mtds .panel.type-alert{background-color:var(--type-alert-background-color);color:var(--type-alert-foreground-color)}.mtds .panel.type-error{background-color:var(--type-error-background-color);color:var(--type-error-foreground-color)}.mtds .panel.type-normal{background-color:var(--type-normal-background-color);color:var(--type-normal-foreground-color)}.mtds .panel.type-success{background-color:var(--type-success-background-color);color:var(--type-success-foreground-color)}.mtds .panel.type-warning{background-color:var(--type-warning-background-color);color:var(--type-warning-foreground-color)}.mtds .panel.type-transparent{background-color:transparent}.mtds .panel.padding-small{padding:var(--padding-small)}.mtds .panel.padding-medium{padding:var(--padding-medium)}.mtds .panel.padding-large{padding:var(--padding-large)}.mtds .paragraph{--margin: 0;--line-height: 1.5em;--size-small: var(--element-font-small);--size-medium: var(--element-font-medium);--size-large: var(--element-font-large);margin:var(--margin);line-height:var(--line-height);min-width:0}.mtds .paragraph.size-large{font-size:var(--size-large)}.mtds .paragraph.size-medium{font-size:var(--size-medium)}.mtds .paragraph.size-small{font-size:var(--size-small)}.mtds .row{--gap-small: var(--container-gap-small);--gap-medium: var(--container-gap-medium);--gap-large: var(--container-gap-large);display:flex;flex-direction:row;min-width:0;height:100%}.mtds .row>div,.mtds .row>h1,.mtds .row>h2,.mtds .row>h3,.mtds .row>p,.mtds .row>form,.mtds .row>label,.mtds .row>input,.mtds .row>textarea,.mtds .row>select{margin:0}.mtds .row.align-x-left{justify-content:flex-start}.mtds .row.align-x-center{justify-content:center}.mtds .row.align-x-right{justify-content:flex-end}.mtds .row.align-x-justify{justify-content:space-between}.mtds .row.align-y-top{align-items:flex-start}.mtds .row.align-y-center{align-items:center}.mtds .row.align-y-bottom{align-items:flex-end}.mtds .row.align-y-stretch{align-items:stretch}.mtds .row.gap-small{gap:var(--gap-small)}.mtds .row.gap-medium{gap:var(--gap-medium)}.mtds .row.gap-large{gap:var(--gap-large)}.mtds .row.wrap-nowrap{flex-wrap:nowrap}.mtds .row.wrap-wrap{flex-wrap:wrap}.mtds .ruler{--color: var(--color-border);--size-small: var(--element-border-small);--size-medium: var(--element-border-medium);--size-large: var(--element-border-large);background-color:var(--color)}.mtds .ruler.direction-horizontal{width:100%}.mtds .ruler.direction-horizontal.size-small{height:var(--size-small)}.mtds .ruler.direction-horizontal.size-medium{height:var(--size-medium)}.mtds .ruler.direction-horizontal.size-large{height:var(--size-large)}.mtds .ruler.direction-vertical{height:100%}.mtds .ruler.direction-vertical.size-small{width:var(--size-small)}.mtds .ruler.direction-vertical.size-medium{width:var(--size-medium)}.mtds .ruler.direction-vertical.size-large{width:var(--size-large)}.mtds .select{--margin: 0;--border-style: var(--input-border-style);--border-color: var(--input-border-color);--border-small: var(--input-border-small);--border-medium: var(--input-border-medium);--border-large: var(--input-border-large);--size-small: var(--input-padding-small);--size-medium: var(--input-padding-medium);--size-large: var(--input-padding-large);margin:var(--margin);padding:var(--padding);border-style:var(--border-style);border-color:var(--border-color);background-color:var(--color-input-background);font-family:inherit;font-size:inherit}.mtds .select:focus-visible{outline-color:color-mix(in srgb,black 10%,var(--border-color))}.mtds .select.border-none{border:0}.mtds .select.border-small{border-width:var(--border-small)}.mtds .select.border-medium{border-width:var(--border-medium)}.mtds .select.border-large{border-width:var(--border-large)}.mtds .select.size-small{padding:var(--size-small)}.mtds .select.size-medium{padding:var(--size-medium)}.mtds .select.size-large{padding:var(--size-large)}.mtds .spinner{--color: var(--color-border);--size: 2em;--speed: 1.2s;--thickness: .3em;display:inline-block;width:var(--size);height:var(--size)}.mtds .spinner:after{content:" ";display:block;width:var(--size);height:var(--size);border-radius:50%;border:var(--thickness) solid var(--color);border-color:transparent var(--color) transparent var(--color)}.mtds .spinner.active:after{animation:ds-spinner var(--speed) linear infinite}@keyframes ds-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.mtds .table{--padding-large: 1em;--padding-medium: .7em;--padding-small: .4em;--header-background-color: var(--color-border);--header-forground-color: var(--color-primary-foreground);--row-odd-color: var(--color-primary-background);--row-even-color: var(--color-secondary-background);--footer-border-small: var(--element-border-small);--footer-border-medium: var(--element-border-medium);--footer-border-large: var(--element-border-large);--footer-border-color: var(--color-border);--footer-forground-color: var(--color-primary-foreground);border-collapse:collapse;margin:0}.mtds .table thead{background-color:var(--header-background-color);color:var(--header-forground-color);font-weight:700;margin:0}.mtds .table tbody tr:nth-child(odd){background-color:var(--row-odd-color)}.mtds .table tbody tr:nth-child(2n){background-color:var(--row-even-color)}.mtds .table tbody.border-none{border-bottom:0}.mtds .table tbody.border-small{border-bottom:var(--footer-border-small) solid var(--footer-border-color)}.mtds .table tbody.border-medium{border-bottom:var(--footer-border-medium) solid var(--footer-border-color)}.mtds .table tbody.border-large{border-bottom:var(--footer-border-large) solid var(--footer-border-color)}.mtds .table tfoot{color:var(--footer-forground-color);font-weight:700}.mtds .table td.align-x-left{text-align:left}.mtds .table td.align-x-center{text-align:center}.mtds .table td.align-x-right{text-align:right}.mtds .table td.align-y-top{vertical-align:top}.mtds .table td.align-y-center{vertical-align:center}.mtds .table td.align-y-bottom{vertical-align:bottom}.mtds .table td.size-95{width:95%}.mtds .table td.size-90{width:90%}.mtds .table td.size-85{width:85%}.mtds .table td.size-80{width:80%}.mtds .table td.size-75{width:75%}.mtds .table td.size-70{width:70%}.mtds .table td.size-65{width:65%}.mtds .table td.size-60{width:60%}.mtds .table td.size-55{width:55%}.mtds .table td.size-50{width:50%}.mtds .table td.size-45{width:45%}.mtds .table td.size-40{width:40%}.mtds .table td.size-35{width:35%}.mtds .table td.size-30{width:30%}.mtds .table td.size-25{width:25%}.mtds .table td.size-20{width:20%}.mtds .table td.size-15{width:15%}.mtds .table td.size-10{width:10%}.mtds .table td.size-5{width:5%}.mtds .table td.size-fit{width:auto}.mtds .table.padding-large td{padding:var(--padding-large)}.mtds .table.padding-medium td{padding:var(--padding-medium)}.mtds .table.padding-small td{padding:var(--padding-small)}.mtds .text{--primary-color: var(--color-primary-foreground);--secondary-color: var(--color-secondary-foreground);--size-small: var(--element-font-small);--size-medium: var(--element-font-medium);--size-large: var(--element-font-large);display:inline-block}.mtds .text.type-primary{color:var(--primary-color)}.mtds .text.type-secondary{color:var(--secondary-color)}.mtds .text.size-small{font-size:var(--size-small)}.mtds .text.size-medium{font-size:var(--size-medium)}.mtds .text.size-large{font-size:var(--size-large)}.mtds .text.weight-light{font-weight:var(--font-weight-light)}.mtds .text.weight-normal{font-weight:var(--font-weight-normal)}.mtds .text.weight-bold{font-weight:var(--font-weight-bold)}.mtds .text.wrap-none{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.mtds .text.wrap-normal{white-space:normal}.mtds .text.wrap-break-word{word-wrap:break-word}.mtds .textarea{--margin: 0;--border-style: var(--input-border-style);--border-color: var(--input-border-color);--border-small: var(--input-border-small);--border-medium: var(--input-border-medium);--border-large: var(--input-border-large);--size-small: var(--input-padding-small);--size-medium: var(--input-padding-medium);--size-large: var(--input-padding-large);margin:var(--margin);padding:var(--padding);border-style:var(--border-style);border-color:var(--border-color);background-color:var(--color-input-background);font-family:inherit;font-size:inherit;resize:vertical;width:100%}.mtds .textarea:focus-visible{outline-color:color-mix(in srgb,black 10%,var(--border-color))}.mtds .textarea.border-none{border:0}.mtds .textarea.border-small{border-width:var(--border-small)}.mtds .textarea.border-medium{border-width:var(--border-medium)}.mtds .textarea.border-large{border-width:var(--border-large)}.mtds .textarea.size-small{padding:var(--size-small)}.mtds .textarea.size-medium{padding:var(--size-medium)}.mtds .textarea.size-large{padding:var(--size-large)}.mtds .textbox{--margin: 0;--border-style: var(--input-border-style);--border-color: var(--input-border-color);--border-small: var(--input-border-small);--border-medium: var(--input-border-medium);--border-large: var(--input-border-large);--size-small: var(--input-padding-small);--size-medium: var(--input-padding-medium);--size-large: var(--input-padding-large);margin:var(--margin);border-style:var(--border-style);border-color:var(--border-color);background-color:var(--color-input-background);font-family:inherit;font-size:inherit}.mtds .textbox:focus-visible{outline-color:color-mix(in srgb,black 10%,var(--border-color))}.mtds .textbox.border-none{border:0}.mtds .textbox.border-small{border-width:var(--border-small)}.mtds .textbox.border-medium{border-width:var(--border-medium)}.mtds .textbox.border-large{border-width:var(--border-large)}.mtds .textbox.size-small{padding:var(--size-small)}.mtds .textbox.size-medium{padding:var(--size-medium)}.mtds .textbox.size-large{padding:var(--size-large)}.mtds .title{--margin: 0 0 .8em 0;--size-small: 1em;--size-medium: 1.5em;--size-large: 2em;margin:var(--margin)}.mtds .title.size-large{font-size:var(--size-large)}.mtds .title.size-medium{font-size:var(--size-medium)}.mtds .title.size-small{font-size:var(--size-small)}.mtds .tabs{--margin: var(--margin-container);--foreground-color: var(--color-primary-foreground);--font-size-nav: 1.1em;--background-color-nav-item: transparent;--background-color-nav-item-active: var(--background-color-nav-item);--background-color-nav-item-hover: var(--color-background-hover);--padding-nav-item: .5em 1em;--margin-separator: .2em 0 1em 0;display:flex;flex-direction:column;margin:var(--margin)}.mtds .tabs .nav{display:flex;flex-direction:row;justify-content:center;color:var(--foreground-color);font-size:var(--font-size-nav)}.mtds .tabs .nav .item{background:var(--background-color-nav-item);cursor:pointer;padding:var(--padding-nav-item);width:100%;text-align:center}.mtds .tabs .nav .item:hover,.mtds .tabs .nav .item.active:hover{background:var(--background-color-nav-item-hover)}.mtds .tabs .nav .item.active{background:var(--background-color-nav-item-active);font-weight:var(--font-weight-bold)}.mtds .tabs .separator{margin:var(--margin-separator)}.mtds .layout-centered{--content-max-width: 696px;container-type:inline-size;display:flex;align-items:center;justify-content:center;width:100vw;min-height:100vh}.mtds .layout-centered>.content{box-sizing:border-box;padding:1rem;width:100vw;max-width:var(--content-max-width);text-align:center}@container (max-width: 499px){.mtds .layout-centered>.content{padding:.5rem}}.mtds .layout-sidebar{--header-height: 3.4em;--footer-height: 4.4em;--modal-width: 700px;--sidebar-width: 260px;--content-width: 640px;--content-gap: 2em;--calc-gap-half: calc(var(--content-gap) / 2);--calc-content-offset: calc((var(--content-width) - var(--sidebar-width) + var(--calc-gap-half)) / 2);--left-width: calc(50vw - var(--calc-content-offset));--right-width: calc(100vw - var(--left-width));container-type:size;height:100dvh;overflow:hidden}.mtds .layout-sidebar>header{background-color:var(--background-color);border-bottom:.1em solid var(--border-color);display:none;padding:.5em 1em;height:var(--header-height);width:100vw;top:0;left:0;position:absolute;z-index:1000}.mtds .layout-sidebar>.content{display:flex;flex-direction:row;gap:var(--content-gap);width:100vw;height:100vh;max-height:100vh}.mtds .layout-sidebar>.content .left{display:flex;flex-direction:row;justify-content:flex-end;width:var(--left-width)}.mtds .layout-sidebar>.content .left aside{flex-shrink:0;flex-grow:0;padding:1em 0;width:var(--sidebar-width)}.mtds .layout-sidebar>.content .right{display:flex;flex-direction:column;justify-content:flex-start;overflow-y:auto;overscroll-behavior:none;width:var(--right-width)}.mtds .layout-sidebar>.content .right main{flex-shrink:0;flex-grow:0;padding:1em 0;width:var(--content-width)}.mtds .layout-sidebar>.content .modal{margin-top:2em;max-width:var(--modal-width)}.mtds .layout-sidebar>footer{background-color:var(--background-color);border-top:.1em solid var(--border-color);display:none;padding:.4em 1em;width:100vw;left:0;bottom:0;position:absolute;z-index:1000}@container (max-width: 959px){.mtds .layout-sidebar>.content .left{display:none}.mtds .layout-sidebar>.content .right{width:100vw;padding:0 1em;position:absolute;top:var(--header-height);bottom:var(--footer-height)}.mtds .layout-sidebar>.content .right main{width:100%}.mtds .layout-sidebar>header,.mtds .layout-sidebar>footer{display:block}}@container (max-width: 499px){.mtds .layout-sidebar>.content .right{padding:0 .5em}.mtds .layout-sidebar>header,.mtds .layout-sidebar>footer{padding:.4em .5em}}.mtds{--font-family: sans-serif;--font-size: 16px;--font-weight-extra-light: 200;--font-weight-light: 300;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semi-bold: 600;--font-weight-bold: 700;--color-background: transparent;--color-background-hover: #efefef;--color-foreground: #000000;--color-border: #b7b7b7;--color-primary-background: #ffffff;--color-primary-foreground: #000000;--color-secondary-background: #f3f3f3;--color-secondary-foreground: #666666;--color-primary-action-background: #cccccc;--color-primary-action-foreground: #000000;--color-secondary-action-background: #f3f3f3;--color-secondary-action-foreground: #000000;--color-input-background: #ffffff;--color-input-foreground: #000000;--color-alert-background: #d9d9d9;--color-alert-foreground: #666666;--color-error-background: #666666;--color-error-foreground: #f3f3f3;--color-warning-background: #999999;--color-warning-foreground: #f3f3f3;--color-success-background: #efefef;--color-success-foreground: #666666;--element-border-small: .1em;--element-border-medium: .2em;--element-border-large: .3em;--element-font-small: .9em;--element-font-medium: 1em;--element-font-large: 1.2em;--container-gap-small: .4em;--container-gap-medium: 1em;--container-gap-large: 2em;--container-padding-small: 1em;--container-padding-medium: 1.5em;--container-padding-large: 2em;--input-border-style: solid;--input-border-color: var(--color-border);--input-border-small: .05em;--input-border-medium: .075em;--input-border-large: .1em;--input-padding-small: .4em;--input-padding-medium: .8em;--input-padding-large: 1.2em;font-family:var(--font-family);font-size:var(--font-size);background-color:var(--color-background);color:var(--color-foreground);font-weight:var(--font-weight-light)}.mtds *{box-sizing:border-box}.mtds *:is(:last-child){margin-bottom:0}
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}
package/dist/mtds.d.ts CHANGED
@@ -17,7 +17,7 @@ export declare function CenteredLayout({ children }: Props_35): JSX.Element;
17
17
 
18
18
  export declare const CheckBox: ForwardRefExoticComponent<Props_5 & RefAttributes<HTMLInputElement>>;
19
19
 
20
- export declare function ClickArea({ padding, onClick, children }: Props_6): JSX.Element;
20
+ export declare function ClickArea({ alignX, effect, padding, onClick, children }: Props_6): JSX.Element;
21
21
 
22
22
  export declare function Column({ alignX, alignY, gap, wrap, children }: Props_7): JSX.Element;
23
23
 
@@ -115,6 +115,7 @@ declare type Props_16 = {
115
115
  readonly value?: string;
116
116
  readonly border?: 'none' | 'small' | 'medium' | 'large';
117
117
  readonly size?: 'small' | 'medium' | 'large';
118
+ readonly cols?: number;
118
119
  readonly rows?: number;
119
120
  readonly limit?: number;
120
121
  readonly onChange?: ChangeEventHandler<HTMLTextAreaElement>;
@@ -230,16 +231,13 @@ declare type Props_32 = {
230
231
  };
231
232
 
232
233
  declare type Props_33 = {
233
- readonly separator?: ReactNode;
234
- readonly selectedId?: string;
235
- readonly children: ReactElement<Props_34> | ReactElement<Props_34>[];
236
- readonly onChange?: (newId: string, oldId?: string) => void;
234
+ readonly children?: ReactElement<Props_34> | ReactElement<Props_34>[];
237
235
  };
238
236
 
239
237
  declare type Props_34 = {
240
- readonly id: string;
241
- readonly title: ReactNode;
242
- readonly children: ReactNode;
238
+ readonly title: string;
239
+ readonly active: boolean;
240
+ readonly onClick: () => void;
243
241
  };
244
242
 
245
243
  declare type Props_35 = {
@@ -273,6 +271,8 @@ declare type Props_5 = {
273
271
  };
274
272
 
275
273
  declare type Props_6 = {
274
+ readonly alignX?: 'left' | 'center' | 'right';
275
+ readonly effect?: 'none' | 'hover';
276
276
  readonly padding?: 'none' | 'small' | 'medium' | 'large';
277
277
  readonly onClick?: () => void;
278
278
  readonly children?: ReactNode;
@@ -313,7 +313,7 @@ export declare function SidebarLayout({ header, footer, sidebar, children }: Pro
313
313
 
314
314
  export declare function Spinner({ active }: Props_24): JSX.Element;
315
315
 
316
- declare function Tab({ children }: Props_34): JSX.Element;
316
+ declare function Tab({ title, active, onClick }: Props_34): JSX.Element;
317
317
 
318
318
  export declare function Table({ padding, children }: Props_25): JSX.Element;
319
319
 
@@ -325,7 +325,7 @@ export declare namespace Table {
325
325
  var Cell: Element_6;
326
326
  }
327
327
 
328
- export declare function Tabs({ separator, selectedId, children, onChange }: Props_33): JSX.Element;
328
+ export declare function Tabs({ children }: Props_33): JSX.Element;
329
329
 
330
330
  export declare namespace Tabs {
331
331
  var Tab: Tab;
package/dist/mtds.js CHANGED
@@ -1,303 +1,284 @@
1
- import { jsx as a, jsxs as N } from "react/jsx-runtime";
2
- import { forwardRef as f, useRef as x, useEffect as y, useState as E, useMemo as v, useEffectEvent as w } from "react";
3
- function $({ source: e, title: t, alt: n = "Avatar", width: r, height: s, fit: c = "contain" }) {
4
- const i = "avatar fit-" + c;
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;
5
5
  return /* @__PURE__ */ a(
6
6
  "img",
7
7
  {
8
- className: i,
9
- title: t,
10
- alt: n,
11
- style: { width: r, height: s },
8
+ className: s,
9
+ title: n,
10
+ alt: t,
11
+ style: { width: r, height: i },
12
12
  src: e
13
13
  }
14
14
  );
15
15
  }
16
- function M({ type: e = "normal", size: t = "large", padding: n = "large", children: r }) {
17
- const s = "border type-" + e + " size-" + t + " padding-" + n;
18
- return /* @__PURE__ */ a("div", { className: s, children: r });
16
+ function D({ type: e = "normal", size: n = "large", padding: t = "large", children: r }) {
17
+ const i = "border type-" + e + " size-" + n + " padding-" + t;
18
+ return /* @__PURE__ */ a("div", { className: i, children: r });
19
19
  }
20
- function D({ type: e = "primary", border: t = "small", size: n = "medium", text: r, onClick: s }) {
21
- const c = "button type-" + e + " border-" + t + " size-" + n;
22
- return /* @__PURE__ */ a("input", { type: e === "submit" ? "submit" : "button", onClick: s, className: c, disabled: e === "disabled", value: r });
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 });
23
23
  }
24
- function I({ sizing: e = "fluid", children: t }) {
25
- const n = "cell sizing-" + e;
26
- return /* @__PURE__ */ a("div", { className: n, children: t });
24
+ function F({ sizing: e = "fluid", children: n }) {
25
+ const t = "cell sizing-" + e;
26
+ return /* @__PURE__ */ a("div", { className: t, children: n });
27
27
  }
28
- const j = f(function({ name: t, label: n, defaultChecked: r, checked: s, value: c, required: i, onChange: u }, m) {
29
- return /* @__PURE__ */ N("label", { className: "checkbox", children: [
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: [
30
30
  /* @__PURE__ */ a(
31
31
  "input",
32
32
  {
33
33
  type: "checkbox",
34
34
  defaultChecked: r,
35
- checked: s,
35
+ checked: i,
36
36
  value: c,
37
- name: t,
38
- ref: m,
39
- required: i,
40
- onChange: u
37
+ name: n,
38
+ ref: o,
39
+ required: s,
40
+ onChange: l
41
41
  }
42
42
  ),
43
- n
43
+ t
44
44
  ] });
45
45
  });
46
- function F({ padding: e = "none", onClick: t, children: n }) {
47
- const r = "clickarea padding-" + e;
48
- return /* @__PURE__ */ a("div", { className: r, onClick: t, children: n });
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 });
49
49
  }
50
- function P({ alignX: e = "left", alignY: t = "top", gap: n = "medium", wrap: r = "nowrap", children: s }) {
51
- const c = "column align-x-" + e + " align-y-" + t + " gap-" + n + " wrap-" + r;
52
- return /* @__PURE__ */ a("div", { className: c, children: s });
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 });
53
53
  }
54
- const G = f(function({ name: t, defaultValue: n, value: r, title: s, type: c = "datetime", border: i = "small", size: u = "medium", required: m, onChange: d }, o) {
55
- const l = "datetime border-" + i + " size-" + u;
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;
56
56
  return /* @__PURE__ */ a(
57
57
  "input",
58
58
  {
59
- className: l,
59
+ className: d,
60
60
  type: c,
61
- name: t,
62
- defaultValue: n,
61
+ name: n,
62
+ defaultValue: t,
63
63
  value: r,
64
- title: s,
65
- ref: o,
66
- required: m,
67
- onChange: d
64
+ title: i,
65
+ ref: m,
66
+ required: o,
67
+ onChange: u
68
68
  }
69
69
  );
70
- }), q = f(function({ children: t, submitHandler: n }, r) {
70
+ }), G = f(function({ children: n, submitHandler: t }, r) {
71
71
  return /* @__PURE__ */ a("form", { onSubmit: (c) => {
72
- c.preventDefault(), n && n(c.target);
73
- }, className: "form", ref: r, children: t });
72
+ c.preventDefault(), t && t(c.target);
73
+ }, className: "form", ref: r, children: n });
74
74
  });
75
- function H({ layout: e, gap: t = "medium", children: n }) {
76
- const r = "grid layout-" + e + " gap-" + t;
77
- return /* @__PURE__ */ a("div", { className: r, children: n });
75
+ function q({ layout: e, gap: n = "medium", children: t }) {
76
+ const r = "grid layout-" + e + " gap-" + n;
77
+ return /* @__PURE__ */ a("div", { className: r, children: t });
78
78
  }
79
- function J({ type: e }) {
79
+ function H({ type: e }) {
80
80
  return /* @__PURE__ */ a("span", { className: "icon " + e });
81
81
  }
82
- function K({ source: e, title: t, alt: n, width: r, height: s, fit: c = "contain" }) {
83
- const i = "image fit-" + c;
82
+ function J({ source: e, title: n, alt: t, width: r, height: i, fit: c = "contain" }) {
83
+ const s = "image fit-" + c;
84
84
  return /* @__PURE__ */ a(
85
85
  "img",
86
86
  {
87
- className: i,
88
- title: t,
89
- alt: n,
90
- style: { width: r, height: s },
87
+ className: s,
88
+ title: n,
89
+ alt: t,
90
+ style: { width: r, height: i },
91
91
  src: e
92
92
  }
93
93
  );
94
94
  }
95
- function O({ label: e, element: t }) {
96
- return /* @__PURE__ */ N("div", { className: "input", children: [
95
+ function K({ label: e, element: n }) {
96
+ return /* @__PURE__ */ p("div", { className: "input", children: [
97
97
  e,
98
- t
98
+ n
99
99
  ] });
100
100
  }
101
- function Q({ value: e }) {
101
+ function O({ value: e }) {
102
102
  return /* @__PURE__ */ a("label", { className: "label", children: e });
103
103
  }
104
- function U({ url: e, target: t, children: n }) {
105
- return /* @__PURE__ */ a("a", { className: "link", href: e, target: t, children: n });
104
+ function Q({ url: e, target: n, children: t }) {
105
+ return /* @__PURE__ */ a("a", { className: "link", href: e, target: n, children: t });
106
106
  }
107
- function V({ open: e = !0, sizing: t = "content", children: n }) {
108
- const r = x(null), s = "modal sizing-" + t;
109
- return y(() => {
107
+ function U({ open: e = !0, sizing: n = "content", children: t }) {
108
+ const r = y(null), i = "modal sizing-" + n;
109
+ return x(() => {
110
110
  e ? r.current?.showModal() : r.current?.close();
111
- }, [e]), /* @__PURE__ */ a("dialog", { ref: r, className: s, children: n });
111
+ }, [e]), /* @__PURE__ */ a("dialog", { ref: r, className: i, children: t });
112
112
  }
113
- function W({ type: e = "normal", padding: t = "large", children: n }) {
114
- const r = "panel type-" + e + " padding-" + t;
115
- return /* @__PURE__ */ a("div", { className: r, children: n });
113
+ function V({ type: e = "normal", padding: n = "large", children: t }) {
114
+ const r = "panel type-" + e + " padding-" + n;
115
+ return /* @__PURE__ */ a("div", { className: r, children: t });
116
116
  }
117
- function X({ size: e = "medium", children: t }) {
118
- const n = "paragraph size-" + e;
119
- return /* @__PURE__ */ a("p", { className: n, children: t });
117
+ function W({ size: e = "medium", children: n }) {
118
+ const t = "paragraph size-" + e;
119
+ return /* @__PURE__ */ a("p", { className: t, children: n });
120
120
  }
121
- function Y({ alignX: e = "left", alignY: t = "top", gap: n = "medium", wrap: r = "nowrap", children: s }) {
122
- const c = "row align-x-" + e + " align-y-" + t + " gap-" + n + " wrap-" + r;
123
- return /* @__PURE__ */ a("div", { className: c, children: s });
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 });
124
124
  }
125
- function Z({ direction: e, size: t = "medium" }) {
126
- const n = "ruler direction-" + e + " size-" + t;
127
- return /* @__PURE__ */ a("div", { className: n });
125
+ function E({ direction: e, size: n = "medium" }) {
126
+ const t = "ruler direction-" + e + " size-" + n;
127
+ return /* @__PURE__ */ a("div", { className: t });
128
128
  }
129
- const _ = f(function({ name: t, options: n, defaultValue: r, value: s, border: c = "small", size: i = "medium", onChange: u }, m) {
130
- const d = "select border-" + c + " size-" + i;
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;
131
131
  return /* @__PURE__ */ a(
132
132
  "select",
133
133
  {
134
- className: d,
135
- name: t,
134
+ className: u,
135
+ name: n,
136
136
  defaultValue: r,
137
- value: s,
138
- onChange: u,
139
- ref: m,
140
- children: Array.from(n).map(([o, l]) => /* @__PURE__ */ a("option", { value: o, children: l }, o))
137
+ value: i,
138
+ onChange: l,
139
+ ref: o,
140
+ children: Array.from(t).map(([m, d]) => /* @__PURE__ */ a("option", { value: m, children: d }, m))
141
141
  }
142
142
  );
143
143
  });
144
- function ee({ active: e = !0 }) {
145
- const t = "spinner" + (e ? " active" : "");
146
- return /* @__PURE__ */ a("div", { className: t });
144
+ function Z({ active: e = !0 }) {
145
+ const n = "spinner" + (e ? " active" : "");
146
+ return /* @__PURE__ */ a("div", { className: n });
147
147
  }
148
- function z({ children: e }) {
148
+ function T({ children: e }) {
149
149
  return /* @__PURE__ */ a("thead", { children: e });
150
150
  }
151
- function S({ border: e = "medium", children: t }) {
152
- const n = "border-" + e;
153
- return /* @__PURE__ */ a("tbody", { className: n, children: t });
151
+ function S({ border: e = "medium", children: n }) {
152
+ const t = "border-" + e;
153
+ return /* @__PURE__ */ a("tbody", { className: t, children: n });
154
154
  }
155
- function T({ children: e }) {
155
+ function k({ children: e }) {
156
156
  return /* @__PURE__ */ a("tfoot", { children: e });
157
157
  }
158
- function k({ children: e }) {
158
+ function C({ children: e }) {
159
159
  return /* @__PURE__ */ a("tr", { children: e });
160
160
  }
161
- function C({ colspan: e, rowspan: t, alignX: n = "left", alignY: r = "center", size: s = "fit", children: c }) {
162
- const i = "align-x-" + n + " align-y-" + r + " size-" + s;
163
- return /* @__PURE__ */ a("td", { className: i, colSpan: e, rowSpan: t, children: c });
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 });
164
164
  }
165
- function b({ padding: e = "medium", children: t }) {
166
- const n = "table padding-" + e;
167
- return /* @__PURE__ */ a("table", { className: n, children: t });
165
+ function g({ padding: e = "medium", children: n }) {
166
+ const t = "table padding-" + e;
167
+ return /* @__PURE__ */ a("table", { className: t, children: n });
168
168
  }
169
- b.Header = z;
170
- b.Body = S;
171
- b.Footer = T;
172
- b.Row = k;
173
- b.Cell = C;
174
- function te({ value: e, type: t = "primary", size: n = "medium", weight: r = "normal", wrap: s = "none" }) {
175
- const c = "text type-" + t + " size-" + n + " weight-" + r + " wrap-" + s;
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
176
  return /* @__PURE__ */ a("span", { className: c, children: e });
177
177
  }
178
- const ne = f(function({ name: t, placeholder: n, defaultValue: r, value: s, border: c = "small", size: i = "medium", rows: u, limit: m, onChange: d }, o) {
179
- const l = "textarea border-" + c + " size-" + i;
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;
180
180
  return /* @__PURE__ */ a(
181
181
  "textarea",
182
182
  {
183
- className: l,
184
- name: t,
185
- placeholder: n,
183
+ className: h,
184
+ name: n,
185
+ placeholder: t,
186
186
  defaultValue: r,
187
- value: s,
188
- rows: u,
189
- ref: o,
190
- maxLength: m,
191
- onChange: d
187
+ value: i,
188
+ cols: l,
189
+ rows: o,
190
+ ref: d,
191
+ maxLength: u,
192
+ onChange: m
192
193
  }
193
194
  );
194
- }), ae = f(function({ name: t, placeholder: n, defaultValue: r, value: s, limit: c, pattern: i, title: u, type: m = "text", border: d = "small", size: o = "medium", required: l, onChange: p }, h) {
195
- const g = "textbox border-" + d + " size-" + o;
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;
196
197
  return /* @__PURE__ */ a(
197
198
  "input",
198
199
  {
199
- className: g,
200
- type: m,
201
- name: t,
202
- placeholder: n,
200
+ className: v,
201
+ type: o,
202
+ name: n,
203
+ placeholder: t,
203
204
  defaultValue: r,
204
- value: s,
205
+ value: i,
205
206
  maxLength: c,
206
- pattern: i,
207
- title: u,
208
- ref: h,
209
- required: l,
210
- onChange: p
207
+ pattern: s,
208
+ title: l,
209
+ ref: b,
210
+ required: d,
211
+ onChange: h
211
212
  }
212
213
  );
213
214
  });
214
- function re({ size: e = "large", children: t }) {
215
- const n = "title size-" + e;
215
+ function ne({ size: e = "large", children: n }) {
216
+ const t = "title size-" + e;
216
217
  switch (e) {
217
218
  case "large":
218
- return /* @__PURE__ */ a("h1", { className: n, children: t });
219
+ return /* @__PURE__ */ a("h1", { className: t, children: n });
219
220
  case "medium":
220
- return /* @__PURE__ */ a("h2", { className: n, children: t });
221
+ return /* @__PURE__ */ a("h2", { className: t, children: n });
221
222
  case "small":
222
- return /* @__PURE__ */ a("h3", { className: n, children: t });
223
+ return /* @__PURE__ */ a("h3", { className: t, children: n });
223
224
  }
224
225
  }
225
- function A({ children: e }) {
226
- return /* @__PURE__ */ a("div", { className: "tab", children: e });
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" }) }) });
227
228
  }
228
- function L({ separator: e, selectedId: t, children: n, onChange: r }) {
229
- const [s, c] = E(t ?? ""), i = v(() => Array.isArray(n) ? n : [n], [n]), u = v(() => {
230
- const o = {};
231
- return i.forEach((l) => {
232
- const p = l.props.id;
233
- o[p] = l;
234
- }), o;
235
- }, [i]), m = w((o) => {
236
- const l = i[0]?.props.id;
237
- c(o ?? l);
238
- });
239
- y(() => {
240
- m(t);
241
- }, [t, i]);
242
- const d = (o) => {
243
- r !== void 0 && r(o, s), c(o);
244
- };
245
- return /* @__PURE__ */ N("div", { className: "tabs", children: [
246
- /* @__PURE__ */ a("div", { className: "nav", children: i.map((o) => {
247
- const l = o.props.id, p = `tab-${l}`, h = l === s ? "active" : "inactive", g = () => d(o.props.id);
248
- return /* @__PURE__ */ a("div", { className: "item " + h, onClick: g, children: o.props.title }, p);
249
- }) }),
250
- e !== void 0 ? /* @__PURE__ */ a("div", { className: "separator", children: e }) : null,
251
- /* @__PURE__ */ a("div", { className: "content", children: u[s] })
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" })
252
233
  ] });
253
234
  }
254
- L.Tab = A;
255
- function se({ children: e }) {
235
+ R.Tab = B;
236
+ function te({ children: e }) {
256
237
  return /* @__PURE__ */ a("main", { className: "layout-centered", children: /* @__PURE__ */ a("div", { className: "content", children: e }) });
257
238
  }
258
- function ce({ header: e, footer: t, sidebar: n, children: r }) {
259
- return /* @__PURE__ */ N("div", { className: "layout-sidebar", children: [
239
+ function ae({ header: e, footer: n, sidebar: t, children: r }) {
240
+ return /* @__PURE__ */ p("div", { className: "layout-sidebar", children: [
260
241
  /* @__PURE__ */ a("header", { children: e }),
261
- /* @__PURE__ */ N("div", { className: "content", children: [
262
- /* @__PURE__ */ a("div", { className: "left", children: /* @__PURE__ */ a("aside", { children: n }) }),
242
+ /* @__PURE__ */ p("div", { className: "content", children: [
243
+ /* @__PURE__ */ a("div", { className: "left", children: /* @__PURE__ */ a("aside", { children: t }) }),
263
244
  /* @__PURE__ */ a("div", { className: "right", children: /* @__PURE__ */ a("main", { children: r }) })
264
245
  ] }),
265
- /* @__PURE__ */ a("footer", { children: t })
246
+ /* @__PURE__ */ a("footer", { children: n })
266
247
  ] });
267
248
  }
268
- function ie({ children: e }) {
249
+ function re({ children: e }) {
269
250
  return /* @__PURE__ */ a("div", { className: "mtds", children: e });
270
251
  }
271
252
  export {
272
- $ as Avatar,
273
- M as Border,
274
- D as Button,
275
- I as Cell,
276
- se as CenteredLayout,
277
- j as CheckBox,
278
- F as ClickArea,
279
- P as Column,
280
- G as DateTime,
281
- ie as DesignSystem,
282
- q as Form,
283
- H as Grid,
284
- J as Icon,
285
- K as Image,
286
- O as Input,
287
- Q as Label,
288
- U as Link,
289
- V as Modal,
290
- W as Panel,
291
- X as Paragraph,
292
- Y as Row,
293
- Z as Ruler,
294
- _ as Select,
295
- ce as SidebarLayout,
296
- ee as Spinner,
297
- b as Table,
298
- L as Tabs,
299
- te as Text,
300
- ne as TextArea,
301
- ae as TextBox,
302
- re as Title
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
303
284
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@maskingtech/designsystem",
3
3
  "private": false,
4
- "version": "0.0.4",
4
+ "version": "0.0.5",
5
5
  "type": "module",
6
6
  "repository": {
7
7
  "url": "https://github.com/MaskingTechnology/designsystem"
@@ -24,18 +24,18 @@
24
24
  "react": "^19.2.0"
25
25
  },
26
26
  "devDependencies": {
27
- "@eslint/js": "9.39.1",
27
+ "@eslint/js": "9.39.2",
28
28
  "@types/react": "19.2.7",
29
- "@types/node": "25.0.1",
29
+ "@types/node": "25.0.3",
30
30
  "@vitejs/plugin-react": "5.1.2",
31
31
  "eslint-plugin-react": "7.37.5",
32
32
  "rimraf": "6.1.2",
33
33
  "typescript": "5.9.3",
34
- "typescript-eslint": "8.49.0",
35
- "vite": "7.2.7",
34
+ "typescript-eslint": "8.51.0",
35
+ "vite": "7.3.0",
36
36
  "vite-plugin-dts": "4.5.4"
37
37
  },
38
38
  "optionalDependencies": {
39
- "@rollup/rollup-linux-x64-gnu": "4.53.3"
39
+ "@rollup/rollup-linux-x64-gnu": "4.54.0"
40
40
  }
41
41
  }