@maskingtech/designsystem 0.0.3 → 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 (5) hide show
  1. package/README.md +2 -2
  2. package/dist/mtds.css +1 -1
  3. package/dist/mtds.d.ts +40 -36
  4. package/dist/mtds.js +206 -238
  5. package/package.json +6 -6
package/README.md CHANGED
@@ -20,8 +20,8 @@ import { DesignSystem } from '@maskingtech/designsystem';
20
20
  import '@maskingtech/designsystem/style.css';
21
21
 
22
22
  <DesignSystem>
23
- {/* elements and components here */}
23
+ {/* layout, elements and components here */}
24
24
  </DesignSystem>
25
25
  ```
26
26
 
27
- The list of elements, components, and customization options can be found in the [documentation](docs/README.md).
27
+ The list of layouts, elements, components, and customization options can be found in the [documentation](docs/README.md).
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;--margin: 0;--color: var(--color-border);--size-large: .3em;--size-medium: .2em;--size-small: .1em;--padding-large: 2em;--padding-medium: 1.5em;--padding-small: 1em;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: solid;--border-color: var(--color-border);--border-width: var(--width-border);--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:0;cursor:pointer;margin:var(--margin);text-align:center;width:fit-content;font-family:inherit;font-size:inherit}.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);color:var(--type-primary-foreground-color);font-weight:var(--font-weight-bold)}.mtds .button.type-primary:hover,.mtds .button.type-submit:hover{background-color:color-mix(in srgb,black 10%,var(--type-primary-background-color))}.mtds .button.type-primary:focus{background-color:color-mix(in srgb,black 20%,var(--type-primary-background-color))}.mtds .button.type-secondary{background-color:var(--type-secondary-background-color);color:var(--type-secondary-foreground-color);font-weight:var(--font-weight-normal)}.mtds .button.type-secondary:hover{background-color:color-mix(in srgb,black 10%,var(--type-secondary-background-color))}.mtds .button.type-secondary:focus{background-color:color-mix(in srgb,black 20%,var(--type-secondary-background-color))}.mtds .button.type-disabled{background-color:var(--type-disabled-background-color);border-color:var(--border-color);border-style:var(--border-style);border-width:var(--border-width);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-large: 2em;--padding-medium: 1.5em;--padding-small: 1em;--padding-none: 0;cursor:pointer;display:inline-block;margin:var(--margin);padding:var(--padding)}.mtds .clickarea.padding-none{padding:var(--padding-none)}.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: .4em;--gap-medium: 1em;--gap-large: 2em;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;--size-small: .4em;--size-medium: .8em;--size-large: 1.2em;--border-style: solid;--border-color: var(--color-border);--border-width: var(--width-border);margin:var(--margin);border-style:var(--border-style);border-width:var(--border-width);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.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;min-width:0}.mtds .grid{--gap-small: .5em;--gap-medium: 1em;--gap-large: 2em;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 0 1.5em 0;--padding-large: 2em;--padding-medium: 1.5em;--padding-small: 1em;--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: var(--margin-container);--line-height: 1.5em;--size-large: 1.5em;--size-medium: 1em;--size-small: .75em;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: .4em;--gap-medium: 1em;--gap-large: 2em;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{--size-small: .1rem;--size-medium: .2rem;--size-large: .3rem;--color: var(--color-border);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;--size-small: .4em;--size-medium: .8em;--size-large: 1.2em;--border-style: solid;--border-color: var(--color-border);--border-width: var(--width-border);margin:var(--margin);padding:var(--padding);border-style:var(--border-style);border-width:var(--border-width);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.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: .1rem;--footer-border-medium: .2rem;--footer-border-large: .3rem;--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: .9em;--size-medium: 1em;--size-large: 1.2em;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;--size-small: .4em;--size-medium: .8em;--size-large: 1.2em;--border-style: solid;--border-color: var(--color-border);--border-width: var(--width-border);margin:var(--margin);padding:var(--padding);border-style:var(--border-style);border-width:var(--border-width);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.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;--size-small: .4em;--size-medium: .8em;--size-large: 1.2em;--border-style: solid;--border-color: var(--color-border);--border-width: var(--width-border);margin:var(--margin);border-style:var(--border-style);border-width:var(--border-width);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.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-large: 2em;--size-medium: 1.5em;--size-small: 1em;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 .dropdown{--background-color: transparent;--background-color-options: var(--color-primary-background);--background-color-options-hover: var(--color-background-hover);--arrow-color: var(--color-alert-foreground);--border-color: var(--color-border);display:inline-block;position:relative;min-width:fit-content;cursor:pointer}.mtds .dropdown .text{background-color:var(--background-color);padding:.8em 2em .8em 0}.mtds .dropdown .text:after{content:"";position:absolute;right:.7em;top:1.2em;border:.45em solid transparent;border-color:var(--arrow-color) transparent transparent transparent}.mtds .dropdown .text.active:after{top:.8em;border-color:transparent transparent var(--arrow-color) transparent}.mtds .dropdown .options{position:absolute;min-width:fit-content;white-space:nowrap;text-align:left;background-color:var(--background-color-options);border:.1em solid var(--border-color)}.mtds .dropdown .options .option{padding:.8em 2em .8em .8em;background:var(--color-primary-background);cursor:pointer}.mtds .dropdown .options .option:hover{background-color:var(--background-color-options-hover)}.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{--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;--margin-container: 0 0 1.2em 0;--width-border: .05em;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
@@ -9,13 +9,15 @@ export declare function Avatar({ source, title, alt, width, height, fit }: Props
9
9
 
10
10
  export declare function Border({ type, size, padding, children }: Props_2): JSX.Element;
11
11
 
12
- export declare function Button({ type, size, text, onClick }: Props_3): JSX.Element;
12
+ export declare function Button({ type, border, size, text, onClick }: Props_3): JSX.Element;
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;
17
+
16
18
  export declare const CheckBox: ForwardRefExoticComponent<Props_5 & RefAttributes<HTMLInputElement>>;
17
19
 
18
- 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;
19
21
 
20
22
  export declare function Column({ alignX, alignY, gap, wrap, children }: Props_7): JSX.Element;
21
23
 
@@ -23,8 +25,6 @@ export declare const DateTime: ForwardRefExoticComponent<Props_8 & RefAttributes
23
25
 
24
26
  export declare function DesignSystem({ children }: Props_37): JSX.Element;
25
27
 
26
- export declare function Dropdown({ options, selected, onChange }: Props_33): JSX.Element;
27
-
28
28
  declare function Element_2({ children }: Props_26): JSX.Element;
29
29
 
30
30
  declare function Element_3({ border, children }: Props_29): JSX.Element;
@@ -52,8 +52,6 @@ export declare function Link({ url, target, children }: Props_18): JSX.Element;
52
52
 
53
53
  export declare function Modal({ open, sizing, children }: Props_19): JSX.Element;
54
54
 
55
- export declare function ModalManager({ selectedId, children }: Props_34): JSX.Element;
56
-
57
55
  export declare function Panel({ type, padding, children }: Props_20): JSX.Element;
58
56
 
59
57
  export declare function Paragraph({ size, children }: Props_21): JSX.Element;
@@ -69,7 +67,7 @@ declare type Props = {
69
67
 
70
68
  declare type Props_10 = {
71
69
  readonly layout: 'two-columns' | 'three-columns' | 'four-columns';
72
- readonly gap?: 'large' | 'medium' | 'small' | 'none';
70
+ readonly gap?: 'none' | 'small' | 'medium' | 'large';
73
71
  readonly children: ReactNode;
74
72
  };
75
73
 
@@ -104,7 +102,8 @@ declare type Props_15 = {
104
102
  readonly pattern?: string;
105
103
  readonly title?: string;
106
104
  readonly type?: 'email' | 'number' | 'password' | 'search' | 'text' | 'tel' | 'url';
107
- readonly size?: 'large' | 'medium' | 'small';
105
+ readonly border?: 'none' | 'small' | 'medium' | 'large';
106
+ readonly size?: 'small' | 'medium' | 'large';
108
107
  readonly required?: boolean;
109
108
  readonly onChange?: ChangeEventHandler<HTMLInputElement>;
110
109
  };
@@ -114,7 +113,9 @@ declare type Props_16 = {
114
113
  readonly placeholder?: string;
115
114
  readonly defaultValue?: string;
116
115
  readonly value?: string;
117
- readonly size?: 'large' | 'medium' | 'small';
116
+ readonly border?: 'none' | 'small' | 'medium' | 'large';
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>;
@@ -125,7 +126,8 @@ declare type Props_17 = {
125
126
  readonly options: Map<string, string>;
126
127
  readonly defaultValue?: string;
127
128
  readonly value?: string;
128
- readonly size?: 'large' | 'medium' | 'small';
129
+ readonly border?: 'none' | 'small' | 'medium' | 'large';
130
+ readonly size?: 'small' | 'medium' | 'large';
129
131
  readonly onChange?: ChangeEventHandler<HTMLSelectElement>;
130
132
  };
131
133
 
@@ -136,7 +138,6 @@ declare type Props_18 = {
136
138
  };
137
139
 
138
140
  declare type Props_19 = {
139
- readonly id?: string;
140
141
  readonly open?: boolean;
141
142
  readonly sizing?: 'full' | 'content';
142
143
  readonly children?: ReactNode;
@@ -144,26 +145,26 @@ declare type Props_19 = {
144
145
 
145
146
  declare type Props_2 = {
146
147
  readonly type?: 'normal' | 'dashed' | 'dotted';
147
- readonly size?: 'large' | 'medium' | 'small';
148
- readonly padding?: 'large' | 'medium' | 'small' | 'none';
148
+ readonly size?: 'small' | 'large' | 'medium';
149
+ readonly padding?: 'none' | 'small' | 'medium' | 'large';
149
150
  readonly children?: ReactNode;
150
151
  };
151
152
 
152
153
  declare type Props_20 = {
153
154
  readonly type?: 'normal' | 'alert' | 'warning' | 'success' | 'error' | 'transparent';
154
- readonly padding?: 'large' | 'medium' | 'small';
155
+ readonly padding?: 'small' | 'medium' | 'large';
155
156
  readonly children?: ReactNode;
156
157
  };
157
158
 
158
159
  declare type Props_21 = {
159
- readonly size?: 'large' | 'medium' | 'small';
160
+ readonly size?: 'small' | 'medium' | 'large';
160
161
  readonly children: ReactNode;
161
162
  };
162
163
 
163
164
  declare type Props_22 = {
164
165
  readonly alignX?: 'left' | 'center' | 'right' | 'justify';
165
166
  readonly alignY?: 'top' | 'center' | 'bottom' | 'stretch';
166
- readonly gap?: 'large' | 'medium' | 'small' | 'none';
167
+ readonly gap?: 'none' | 'small' | 'medium' | 'large';
167
168
  readonly wrap?: 'wrap' | 'nowrap';
168
169
  readonly children: ReactNode;
169
170
  };
@@ -178,7 +179,7 @@ declare type Props_24 = {
178
179
  };
179
180
 
180
181
  declare type Props_25 = {
181
- readonly padding?: 'large' | 'medium' | 'small';
182
+ readonly padding?: 'small' | 'medium' | 'large';
182
183
  readonly children?: ReactElement<Props_26> | ReactElement<Props_29> | ReactElement<Props_30>[];
183
184
  };
184
185
 
@@ -200,12 +201,13 @@ declare type Props_28 = {
200
201
  };
201
202
 
202
203
  declare type Props_29 = {
203
- readonly border?: 'large' | 'medium' | 'small' | 'none';
204
+ readonly border?: 'none' | 'small' | 'medium' | 'large';
204
205
  readonly children?: ReactElement<Props_27>;
205
206
  };
206
207
 
207
208
  declare type Props_3 = {
208
209
  readonly type?: 'submit' | 'primary' | 'secondary' | 'disabled';
210
+ readonly border?: 'none' | 'small' | 'medium' | 'large';
209
211
  readonly size?: 'large' | 'medium' | 'small';
210
212
  readonly text: string;
211
213
  readonly onClick?: () => void;
@@ -218,37 +220,34 @@ declare type Props_30 = {
218
220
  declare type Props_31 = {
219
221
  readonly value: string;
220
222
  readonly type?: 'primary' | 'secondary';
221
- readonly size?: 'large' | 'medium' | 'small';
223
+ readonly size?: 'small' | 'medium' | 'large';
222
224
  readonly weight?: 'light' | 'normal' | 'bold';
223
225
  readonly wrap?: 'none' | 'normal' | 'break-word';
224
226
  };
225
227
 
226
228
  declare type Props_32 = {
227
- readonly size?: 'large' | 'medium' | 'small';
229
+ readonly size?: 'small' | 'medium' | 'large';
228
230
  readonly children: ReactNode;
229
231
  };
230
232
 
231
233
  declare type Props_33 = {
232
- readonly options: Map<string, string>;
233
- readonly selected?: string;
234
- readonly onChange?: (oldKey: string, newKey: string) => void;
234
+ readonly children?: ReactElement<Props_34> | ReactElement<Props_34>[];
235
235
  };
236
236
 
237
237
  declare type Props_34 = {
238
- readonly selectedId?: string;
239
- readonly children: ReactElement<Props_19> | ReactElement<Props_19>[];
238
+ readonly title: string;
239
+ readonly active: boolean;
240
+ readonly onClick: () => void;
240
241
  };
241
242
 
242
243
  declare type Props_35 = {
243
- readonly separator?: ReactNode;
244
- readonly selectedId?: string;
245
- readonly children: ReactElement<Props_36> | ReactElement<Props_36>[];
246
- readonly onChange?: (newId: string, oldId?: string) => void;
244
+ readonly children?: ReactNode;
247
245
  };
248
246
 
249
247
  declare type Props_36 = {
250
- readonly id: string;
251
- readonly title: ReactNode;
248
+ readonly header?: ReactNode;
249
+ readonly footer?: ReactNode;
250
+ readonly sidebar: ReactNode;
252
251
  readonly children: ReactNode;
253
252
  };
254
253
 
@@ -272,7 +271,9 @@ declare type Props_5 = {
272
271
  };
273
272
 
274
273
  declare type Props_6 = {
275
- readonly padding?: 'large' | 'medium' | 'small' | 'none';
274
+ readonly alignX?: 'left' | 'center' | 'right';
275
+ readonly effect?: 'none' | 'hover';
276
+ readonly padding?: 'none' | 'small' | 'medium' | 'large';
276
277
  readonly onClick?: () => void;
277
278
  readonly children?: ReactNode;
278
279
  };
@@ -280,7 +281,7 @@ declare type Props_6 = {
280
281
  declare type Props_7 = {
281
282
  readonly alignX?: 'left' | 'center' | 'right' | 'stretch';
282
283
  readonly alignY?: 'top' | 'center' | 'bottom' | 'justify';
283
- readonly gap?: 'large' | 'medium' | 'small' | 'none';
284
+ readonly gap?: 'none' | 'small' | 'medium' | 'large';
284
285
  readonly wrap?: 'wrap' | 'nowrap';
285
286
  readonly children: ReactNode;
286
287
  };
@@ -291,7 +292,8 @@ declare type Props_8 = {
291
292
  readonly value?: string;
292
293
  readonly title?: string;
293
294
  readonly type?: 'datetime' | 'date' | 'time' | 'month' | 'week';
294
- readonly size?: 'large' | 'medium' | 'small';
295
+ readonly border?: 'none' | 'small' | 'medium' | 'large';
296
+ readonly size?: 'small' | 'medium' | 'large';
295
297
  readonly required?: boolean;
296
298
  readonly onChange?: ChangeEventHandler<HTMLInputElement>;
297
299
  };
@@ -307,9 +309,11 @@ export declare function Ruler({ direction, size }: Props_23): JSX.Element;
307
309
 
308
310
  export declare const Select: ForwardRefExoticComponent<Props_17 & RefAttributes<HTMLSelectElement>>;
309
311
 
312
+ export declare function SidebarLayout({ header, footer, sidebar, children }: Props_36): JSX.Element;
313
+
310
314
  export declare function Spinner({ active }: Props_24): JSX.Element;
311
315
 
312
- declare function Tab({ children }: Props_36): JSX.Element;
316
+ declare function Tab({ title, active, onClick }: Props_34): JSX.Element;
313
317
 
314
318
  export declare function Table({ padding, children }: Props_25): JSX.Element;
315
319
 
@@ -321,7 +325,7 @@ export declare namespace Table {
321
325
  var Cell: Element_6;
322
326
  }
323
327
 
324
- export declare function Tabs({ separator, selectedId, children, onChange }: Props_35): JSX.Element;
328
+ export declare function Tabs({ children }: Props_33): JSX.Element;
325
329
 
326
330
  export declare namespace Tabs {
327
331
  var Tab: Tab;
package/dist/mtds.js CHANGED
@@ -1,316 +1,284 @@
1
- import { jsx as s, jsxs as h, Fragment as k } from "react/jsx-runtime";
2
- import { forwardRef as g, useRef as z, useEffect as w, useState as b, useMemo as y, useEffectEvent as E } from "react";
3
- function O({ source: t, title: e, alt: n = "Avatar", width: a, height: c, fit: r = "contain" }) {
4
- const o = "avatar fit-" + r;
5
- return /* @__PURE__ */ s(
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
+ return /* @__PURE__ */ a(
6
6
  "img",
7
7
  {
8
- className: o,
9
- title: e,
10
- alt: n,
11
- style: { width: a, height: c },
12
- src: t
8
+ className: s,
9
+ title: n,
10
+ alt: t,
11
+ style: { width: r, height: i },
12
+ src: e
13
13
  }
14
14
  );
15
15
  }
16
- function F({ type: t = "normal", size: e = "large", padding: n = "large", children: a }) {
17
- const c = "border type-" + t + " size-" + e + " padding-" + n;
18
- return /* @__PURE__ */ s("div", { className: c, children: a });
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 j({ type: t = "primary", size: e = "medium", text: n, onClick: a }) {
21
- const c = "button type-" + t + " size-" + e;
22
- return /* @__PURE__ */ s("input", { type: t === "submit" ? "submit" : "button", onClick: a, className: c, disabled: t === "disabled", value: n });
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: t = "fluid", children: e }) {
25
- const n = "cell sizing-" + t;
26
- return /* @__PURE__ */ s("div", { className: n, children: e });
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 P = g(function({ name: e, label: n, defaultChecked: a, checked: c, value: r, required: o, onChange: l }, m) {
29
- return /* @__PURE__ */ h("label", { className: "checkbox", children: [
30
- /* @__PURE__ */ s(
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
+ /* @__PURE__ */ a(
31
31
  "input",
32
32
  {
33
33
  type: "checkbox",
34
- defaultChecked: a,
35
- checked: c,
36
- value: r,
37
- name: e,
38
- ref: m,
39
- required: o,
34
+ defaultChecked: r,
35
+ checked: i,
36
+ value: c,
37
+ name: n,
38
+ ref: o,
39
+ required: s,
40
40
  onChange: l
41
41
  }
42
42
  ),
43
- n
43
+ t
44
44
  ] });
45
45
  });
46
- function G({ padding: t = "none", onClick: e, children: n }) {
47
- const a = "clickarea padding-" + t;
48
- return /* @__PURE__ */ s("div", { className: a, onClick: e, 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 q({ alignX: t = "left", alignY: e = "top", gap: n = "medium", wrap: a = "nowrap", children: c }) {
51
- const r = "column align-x-" + t + " align-y-" + e + " gap-" + n + " wrap-" + a;
52
- return /* @__PURE__ */ s("div", { className: r, children: c });
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 H = g(function({ name: e, defaultValue: n, value: a, title: c, type: r = "datetime", size: o = "medium", required: l, onChange: m }, u) {
55
- const i = "datetime size-" + o;
56
- return /* @__PURE__ */ s(
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
+ return /* @__PURE__ */ a(
57
57
  "input",
58
58
  {
59
- className: i,
60
- type: r,
61
- name: e,
62
- defaultValue: n,
63
- value: a,
64
- title: c,
65
- ref: u,
66
- required: l,
67
- onChange: m
59
+ className: d,
60
+ type: c,
61
+ name: n,
62
+ defaultValue: t,
63
+ value: r,
64
+ title: i,
65
+ ref: m,
66
+ required: o,
67
+ onChange: u
68
68
  }
69
69
  );
70
- }), J = g(function({ children: e, submitHandler: n }, a) {
71
- return /* @__PURE__ */ s("form", { onSubmit: (r) => {
72
- r.preventDefault(), n && n(r.target);
73
- }, className: "form", ref: a, children: e });
70
+ }), G = f(function({ children: n, submitHandler: t }, r) {
71
+ return /* @__PURE__ */ a("form", { onSubmit: (c) => {
72
+ c.preventDefault(), t && t(c.target);
73
+ }, className: "form", ref: r, children: n });
74
74
  });
75
- function Q({ layout: t, gap: e = "medium", children: n }) {
76
- const a = "grid layout-" + t + " gap-" + e;
77
- return /* @__PURE__ */ s("div", { className: a, 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 U({ type: t }) {
80
- return /* @__PURE__ */ s("span", { className: "icon " + t });
79
+ function H({ type: e }) {
80
+ return /* @__PURE__ */ a("span", { className: "icon " + e });
81
81
  }
82
- function V({ source: t, title: e, alt: n, width: a, height: c, fit: r = "contain" }) {
83
- const o = "image fit-" + r;
84
- return /* @__PURE__ */ s(
82
+ function J({ source: e, title: n, alt: t, width: r, height: i, fit: c = "contain" }) {
83
+ const s = "image fit-" + c;
84
+ return /* @__PURE__ */ a(
85
85
  "img",
86
86
  {
87
- className: o,
88
- title: e,
89
- alt: n,
90
- style: { width: a, height: c },
91
- src: t
87
+ className: s,
88
+ title: n,
89
+ alt: t,
90
+ style: { width: r, height: i },
91
+ src: e
92
92
  }
93
93
  );
94
94
  }
95
- function W({ label: t, element: e }) {
96
- return /* @__PURE__ */ h("div", { className: "input", children: [
97
- t,
98
- e
95
+ function K({ label: e, element: n }) {
96
+ return /* @__PURE__ */ p("div", { className: "input", children: [
97
+ e,
98
+ n
99
99
  ] });
100
100
  }
101
- function X({ value: t }) {
102
- return /* @__PURE__ */ s("label", { className: "label", children: t });
101
+ function O({ value: e }) {
102
+ return /* @__PURE__ */ a("label", { className: "label", children: e });
103
103
  }
104
- function Y({ url: t, target: e, children: n }) {
105
- return /* @__PURE__ */ s("a", { className: "link", href: t, target: e, 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 Z({ open: t = !0, sizing: e = "content", children: n }) {
108
- const a = z(null), c = "modal sizing-" + e;
109
- return w(() => {
110
- t ? a.current?.showModal() : a.current?.close();
111
- }, [t]), /* @__PURE__ */ s("dialog", { ref: a, className: c, children: n });
107
+ function U({ open: e = !0, sizing: n = "content", children: t }) {
108
+ const r = y(null), i = "modal sizing-" + n;
109
+ return x(() => {
110
+ e ? r.current?.showModal() : r.current?.close();
111
+ }, [e]), /* @__PURE__ */ a("dialog", { ref: r, className: i, children: t });
112
112
  }
113
- function _({ type: t = "normal", padding: e = "large", children: n }) {
114
- const a = "panel type-" + t + " padding-" + e;
115
- return /* @__PURE__ */ s("div", { className: a, 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 tt({ size: t = "medium", children: e }) {
118
- const n = "paragraph size-" + t;
119
- return /* @__PURE__ */ s("p", { className: n, children: e });
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 et({ alignX: t = "left", alignY: e = "top", gap: n = "medium", wrap: a = "nowrap", children: c }) {
122
- const r = "row align-x-" + t + " align-y-" + e + " gap-" + n + " wrap-" + a;
123
- return /* @__PURE__ */ s("div", { className: r, children: c });
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 nt({ direction: t, size: e = "medium" }) {
126
- const n = "ruler direction-" + t + " size-" + e;
127
- return /* @__PURE__ */ s("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 at = g(function({ name: e, options: n, defaultValue: a, value: c, size: r = "medium", onChange: o }, l) {
130
- const m = "select size-" + r;
131
- return /* @__PURE__ */ s(
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
+ return /* @__PURE__ */ a(
132
132
  "select",
133
133
  {
134
- className: m,
135
- name: e,
136
- defaultValue: a,
137
- value: c,
138
- onChange: o,
139
- ref: l,
140
- children: Array.from(n).map(([u, i]) => /* @__PURE__ */ s("option", { value: u, children: i }, u))
134
+ className: u,
135
+ name: n,
136
+ defaultValue: r,
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 st({ active: t = !0 }) {
145
- const e = "spinner" + (t ? " active" : "");
146
- return /* @__PURE__ */ s("div", { className: e });
144
+ function Z({ active: e = !0 }) {
145
+ const n = "spinner" + (e ? " active" : "");
146
+ return /* @__PURE__ */ a("div", { className: n });
147
147
  }
148
- function A({ children: t }) {
149
- return /* @__PURE__ */ s("thead", { children: t });
148
+ function T({ children: e }) {
149
+ return /* @__PURE__ */ a("thead", { children: e });
150
150
  }
151
- function C({ border: t = "medium", children: e }) {
152
- const n = "border-" + t;
153
- return /* @__PURE__ */ s("tbody", { className: n, children: e });
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 M({ children: t }) {
156
- return /* @__PURE__ */ s("tfoot", { children: t });
155
+ function k({ children: e }) {
156
+ return /* @__PURE__ */ a("tfoot", { children: e });
157
157
  }
158
- function L({ children: t }) {
159
- return /* @__PURE__ */ s("tr", { children: t });
158
+ function C({ children: e }) {
159
+ return /* @__PURE__ */ a("tr", { children: e });
160
160
  }
161
- function B({ colspan: t, rowspan: e, alignX: n = "left", alignY: a = "center", size: c = "fit", children: r }) {
162
- const o = "align-x-" + n + " align-y-" + a + " size-" + c;
163
- return /* @__PURE__ */ s("td", { className: o, colSpan: t, rowSpan: e, children: r });
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 v({ padding: t = "medium", children: e }) {
166
- const n = "table padding-" + t;
167
- return /* @__PURE__ */ s("table", { className: n, children: e });
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
- v.Header = A;
170
- v.Body = C;
171
- v.Footer = M;
172
- v.Row = L;
173
- v.Cell = B;
174
- function ct({ value: t, type: e = "primary", size: n = "medium", weight: a = "normal", wrap: c = "none" }) {
175
- const r = "text type-" + e + " size-" + n + " weight-" + a + " wrap-" + c;
176
- return /* @__PURE__ */ s("span", { className: r, children: t });
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
177
  }
178
- const rt = g(function({ name: e, placeholder: n, defaultValue: a, value: c, size: r = "medium", rows: o, limit: l, onChange: m }, u) {
179
- const i = "textarea size-" + r;
180
- return /* @__PURE__ */ s(
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
+ return /* @__PURE__ */ a(
181
181
  "textarea",
182
182
  {
183
- className: i,
184
- name: e,
185
- placeholder: n,
186
- defaultValue: a,
187
- value: c,
183
+ className: h,
184
+ name: n,
185
+ placeholder: t,
186
+ defaultValue: r,
187
+ value: i,
188
+ cols: l,
188
189
  rows: o,
189
- ref: u,
190
- maxLength: l,
190
+ ref: d,
191
+ maxLength: u,
191
192
  onChange: m
192
193
  }
193
194
  );
194
- }), ot = g(function({ name: e, placeholder: n, defaultValue: a, value: c, limit: r, pattern: o, title: l, type: m = "text", size: u = "medium", required: i, onChange: d }, p) {
195
- const f = "textbox size-" + u;
196
- return /* @__PURE__ */ s(
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;
197
+ return /* @__PURE__ */ a(
197
198
  "input",
198
199
  {
199
- className: f,
200
- type: m,
201
- name: e,
202
- placeholder: n,
203
- defaultValue: a,
204
- value: c,
205
- maxLength: r,
206
- pattern: o,
200
+ className: v,
201
+ type: o,
202
+ name: n,
203
+ placeholder: t,
204
+ defaultValue: r,
205
+ value: i,
206
+ maxLength: c,
207
+ pattern: s,
207
208
  title: l,
208
- ref: p,
209
- required: i,
210
- onChange: d
209
+ ref: b,
210
+ required: d,
211
+ onChange: h
211
212
  }
212
213
  );
213
214
  });
214
- function it({ size: t = "large", children: e }) {
215
- const n = "title size-" + t;
216
- switch (t) {
215
+ function ne({ size: e = "large", children: n }) {
216
+ const t = "title size-" + e;
217
+ switch (e) {
217
218
  case "large":
218
- return /* @__PURE__ */ s("h1", { className: n, children: e });
219
+ return /* @__PURE__ */ a("h1", { className: t, children: n });
219
220
  case "medium":
220
- return /* @__PURE__ */ s("h2", { className: n, children: e });
221
+ return /* @__PURE__ */ a("h2", { className: t, children: n });
221
222
  case "small":
222
- return /* @__PURE__ */ s("h3", { className: n, children: e });
223
+ return /* @__PURE__ */ a("h3", { className: t, children: n });
223
224
  }
224
225
  }
225
- function lt({ options: t, selected: e, onChange: n }) {
226
- const a = e ?? [...t.keys()][0], c = t.get(a) ?? "", [r, o] = b(a), [l, m] = b(c), [u, i] = b(!1), d = () => {
227
- i(!u);
228
- }, p = (f) => {
229
- const N = f.target, S = r, x = N.getAttribute("data-key") ?? a, T = t.get(x) ?? c;
230
- o(x), m(T), i(!1), n && n(S, x);
231
- };
232
- return /* @__PURE__ */ h("div", { className: "dropdown", children: [
233
- /* @__PURE__ */ s("div", { className: u ? "text active" : "text", onClick: d, children: l }),
234
- u && /* @__PURE__ */ s("div", { className: "options", children: Array.from(t).map(([f, N]) => /* @__PURE__ */ s("div", { className: "option", "data-key": f, onClick: p, children: N }, f)) })
235
- ] });
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" }) }) });
236
228
  }
237
- function ut({ selectedId: t, children: e }) {
238
- const [n, a] = b(t ?? ""), c = y(() => Array.isArray(e) ? e : [e], [e]), r = y(() => {
239
- const l = {};
240
- return c.forEach((m) => {
241
- const u = m.props.id;
242
- l[u] = m;
243
- }), l;
244
- }, [c]), o = E((l) => {
245
- a(l ?? "");
246
- });
247
- return w(() => {
248
- o(t);
249
- }, [t, c]), r[n] ?? /* @__PURE__ */ s(k, {});
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" })
233
+ ] });
250
234
  }
251
- function K({ children: t }) {
252
- return /* @__PURE__ */ s("div", { className: "tab", children: t });
235
+ R.Tab = B;
236
+ function te({ children: e }) {
237
+ return /* @__PURE__ */ a("main", { className: "layout-centered", children: /* @__PURE__ */ a("div", { className: "content", children: e }) });
253
238
  }
254
- function R({ separator: t, selectedId: e, children: n, onChange: a }) {
255
- const [c, r] = b(e ?? ""), o = y(() => Array.isArray(n) ? n : [n], [n]), l = y(() => {
256
- const i = {};
257
- return o.forEach((d) => {
258
- const p = d.props.id;
259
- i[p] = d;
260
- }), i;
261
- }, [o]), m = E((i) => {
262
- const d = o[0]?.props.id;
263
- r(i ?? d);
264
- });
265
- w(() => {
266
- m(e);
267
- }, [e, o]);
268
- const u = (i) => {
269
- a !== void 0 && a(i, c), r(i);
270
- };
271
- return /* @__PURE__ */ h("div", { className: "tabs", children: [
272
- /* @__PURE__ */ s("div", { className: "nav", children: o.map((i) => {
273
- const d = i.props.id, p = `tab-${d}`, f = d === c ? "active" : "inactive", N = () => u(i.props.id);
274
- return /* @__PURE__ */ s("div", { className: "item " + f, onClick: N, children: i.props.title }, p);
275
- }) }),
276
- t !== void 0 ? /* @__PURE__ */ s("div", { className: "separator", children: t }) : null,
277
- /* @__PURE__ */ s("div", { className: "content", children: l[c] })
239
+ function ae({ header: e, footer: n, sidebar: t, children: r }) {
240
+ return /* @__PURE__ */ p("div", { className: "layout-sidebar", children: [
241
+ /* @__PURE__ */ a("header", { children: e }),
242
+ /* @__PURE__ */ p("div", { className: "content", children: [
243
+ /* @__PURE__ */ a("div", { className: "left", children: /* @__PURE__ */ a("aside", { children: t }) }),
244
+ /* @__PURE__ */ a("div", { className: "right", children: /* @__PURE__ */ a("main", { children: r }) })
245
+ ] }),
246
+ /* @__PURE__ */ a("footer", { children: n })
278
247
  ] });
279
248
  }
280
- R.Tab = K;
281
- function mt({ children: t }) {
282
- return /* @__PURE__ */ s("div", { className: "mtds", children: t });
249
+ function re({ children: e }) {
250
+ return /* @__PURE__ */ a("div", { className: "mtds", children: e });
283
251
  }
284
252
  export {
285
- O as Avatar,
286
- F as Border,
287
- j as Button,
288
- I as Cell,
289
- P as CheckBox,
290
- G as ClickArea,
291
- q as Column,
292
- H as DateTime,
293
- mt as DesignSystem,
294
- lt as Dropdown,
295
- J as Form,
296
- Q as Grid,
297
- U as Icon,
298
- V as Image,
299
- W as Input,
300
- X as Label,
301
- Y as Link,
302
- Z as Modal,
303
- ut as ModalManager,
304
- _ as Panel,
305
- tt as Paragraph,
306
- et as Row,
307
- nt as Ruler,
308
- at as Select,
309
- st as Spinner,
310
- v as Table,
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,
311
279
  R as Tabs,
312
- ct as Text,
313
- rt as TextArea,
314
- ot as TextBox,
315
- it as Title
280
+ A as Text,
281
+ _ as TextArea,
282
+ ee as TextBox,
283
+ ne as Title
316
284
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@maskingtech/designsystem",
3
3
  "private": false,
4
- "version": "0.0.3",
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
  }