@maskingtech/designsystem 0.0.3 → 0.0.4

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 +39 -35
  4. package/dist/mtds.js +220 -233
  5. package/package.json +1 -1
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{--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}
package/dist/mtds.d.ts CHANGED
@@ -9,10 +9,12 @@ 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
20
  export declare function ClickArea({ padding, onClick, children }: Props_6): JSX.Element;
@@ -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,8 @@ 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
118
  readonly rows?: number;
119
119
  readonly limit?: number;
120
120
  readonly onChange?: ChangeEventHandler<HTMLTextAreaElement>;
@@ -125,7 +125,8 @@ declare type Props_17 = {
125
125
  readonly options: Map<string, string>;
126
126
  readonly defaultValue?: string;
127
127
  readonly value?: string;
128
- readonly size?: 'large' | 'medium' | 'small';
128
+ readonly border?: 'none' | 'small' | 'medium' | 'large';
129
+ readonly size?: 'small' | 'medium' | 'large';
129
130
  readonly onChange?: ChangeEventHandler<HTMLSelectElement>;
130
131
  };
131
132
 
@@ -136,7 +137,6 @@ declare type Props_18 = {
136
137
  };
137
138
 
138
139
  declare type Props_19 = {
139
- readonly id?: string;
140
140
  readonly open?: boolean;
141
141
  readonly sizing?: 'full' | 'content';
142
142
  readonly children?: ReactNode;
@@ -144,26 +144,26 @@ declare type Props_19 = {
144
144
 
145
145
  declare type Props_2 = {
146
146
  readonly type?: 'normal' | 'dashed' | 'dotted';
147
- readonly size?: 'large' | 'medium' | 'small';
148
- readonly padding?: 'large' | 'medium' | 'small' | 'none';
147
+ readonly size?: 'small' | 'large' | 'medium';
148
+ readonly padding?: 'none' | 'small' | 'medium' | 'large';
149
149
  readonly children?: ReactNode;
150
150
  };
151
151
 
152
152
  declare type Props_20 = {
153
153
  readonly type?: 'normal' | 'alert' | 'warning' | 'success' | 'error' | 'transparent';
154
- readonly padding?: 'large' | 'medium' | 'small';
154
+ readonly padding?: 'small' | 'medium' | 'large';
155
155
  readonly children?: ReactNode;
156
156
  };
157
157
 
158
158
  declare type Props_21 = {
159
- readonly size?: 'large' | 'medium' | 'small';
159
+ readonly size?: 'small' | 'medium' | 'large';
160
160
  readonly children: ReactNode;
161
161
  };
162
162
 
163
163
  declare type Props_22 = {
164
164
  readonly alignX?: 'left' | 'center' | 'right' | 'justify';
165
165
  readonly alignY?: 'top' | 'center' | 'bottom' | 'stretch';
166
- readonly gap?: 'large' | 'medium' | 'small' | 'none';
166
+ readonly gap?: 'none' | 'small' | 'medium' | 'large';
167
167
  readonly wrap?: 'wrap' | 'nowrap';
168
168
  readonly children: ReactNode;
169
169
  };
@@ -178,7 +178,7 @@ declare type Props_24 = {
178
178
  };
179
179
 
180
180
  declare type Props_25 = {
181
- readonly padding?: 'large' | 'medium' | 'small';
181
+ readonly padding?: 'small' | 'medium' | 'large';
182
182
  readonly children?: ReactElement<Props_26> | ReactElement<Props_29> | ReactElement<Props_30>[];
183
183
  };
184
184
 
@@ -200,12 +200,13 @@ declare type Props_28 = {
200
200
  };
201
201
 
202
202
  declare type Props_29 = {
203
- readonly border?: 'large' | 'medium' | 'small' | 'none';
203
+ readonly border?: 'none' | 'small' | 'medium' | 'large';
204
204
  readonly children?: ReactElement<Props_27>;
205
205
  };
206
206
 
207
207
  declare type Props_3 = {
208
208
  readonly type?: 'submit' | 'primary' | 'secondary' | 'disabled';
209
+ readonly border?: 'none' | 'small' | 'medium' | 'large';
209
210
  readonly size?: 'large' | 'medium' | 'small';
210
211
  readonly text: string;
211
212
  readonly onClick?: () => void;
@@ -218,37 +219,37 @@ declare type Props_30 = {
218
219
  declare type Props_31 = {
219
220
  readonly value: string;
220
221
  readonly type?: 'primary' | 'secondary';
221
- readonly size?: 'large' | 'medium' | 'small';
222
+ readonly size?: 'small' | 'medium' | 'large';
222
223
  readonly weight?: 'light' | 'normal' | 'bold';
223
224
  readonly wrap?: 'none' | 'normal' | 'break-word';
224
225
  };
225
226
 
226
227
  declare type Props_32 = {
227
- readonly size?: 'large' | 'medium' | 'small';
228
+ readonly size?: 'small' | 'medium' | 'large';
228
229
  readonly children: ReactNode;
229
230
  };
230
231
 
231
232
  declare type Props_33 = {
232
- readonly options: Map<string, string>;
233
- readonly selected?: string;
234
- readonly onChange?: (oldKey: string, newKey: string) => void;
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;
235
237
  };
236
238
 
237
239
  declare type Props_34 = {
238
- readonly selectedId?: string;
239
- readonly children: ReactElement<Props_19> | ReactElement<Props_19>[];
240
+ readonly id: string;
241
+ readonly title: ReactNode;
242
+ readonly children: ReactNode;
240
243
  };
241
244
 
242
245
  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;
246
+ readonly children?: ReactNode;
247
247
  };
248
248
 
249
249
  declare type Props_36 = {
250
- readonly id: string;
251
- readonly title: ReactNode;
250
+ readonly header?: ReactNode;
251
+ readonly footer?: ReactNode;
252
+ readonly sidebar: ReactNode;
252
253
  readonly children: ReactNode;
253
254
  };
254
255
 
@@ -272,7 +273,7 @@ declare type Props_5 = {
272
273
  };
273
274
 
274
275
  declare type Props_6 = {
275
- readonly padding?: 'large' | 'medium' | 'small' | 'none';
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({ children }: 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({ separator, selectedId, children, onChange }: 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,303 @@
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 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;
5
+ return /* @__PURE__ */ a(
6
6
  "img",
7
7
  {
8
- className: o,
9
- title: e,
8
+ className: i,
9
+ title: t,
10
10
  alt: n,
11
- style: { width: a, height: c },
12
- src: t
11
+ style: { width: r, height: s },
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 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 });
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 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 });
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 I({ sizing: e = "fluid", children: t }) {
25
+ const n = "cell sizing-" + e;
26
+ return /* @__PURE__ */ a("div", { className: n, children: t });
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 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: [
30
+ /* @__PURE__ */ a(
31
31
  "input",
32
32
  {
33
33
  type: "checkbox",
34
- defaultChecked: a,
35
- checked: c,
36
- value: r,
37
- name: e,
34
+ defaultChecked: r,
35
+ checked: s,
36
+ value: c,
37
+ name: t,
38
38
  ref: m,
39
- required: o,
40
- onChange: l
39
+ required: i,
40
+ onChange: u
41
41
  }
42
42
  ),
43
43
  n
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 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 });
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 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 });
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 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;
56
+ return /* @__PURE__ */ a(
57
57
  "input",
58
58
  {
59
- className: i,
60
- type: r,
61
- name: e,
59
+ className: l,
60
+ type: c,
61
+ name: t,
62
62
  defaultValue: n,
63
- value: a,
64
- title: c,
65
- ref: u,
66
- required: l,
67
- onChange: m
63
+ value: r,
64
+ title: s,
65
+ ref: o,
66
+ required: m,
67
+ onChange: d
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
+ }), q = f(function({ children: t, submitHandler: n }, r) {
71
+ return /* @__PURE__ */ a("form", { onSubmit: (c) => {
72
+ c.preventDefault(), n && n(c.target);
73
+ }, className: "form", ref: r, children: t });
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 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 });
78
78
  }
79
- function U({ type: t }) {
80
- return /* @__PURE__ */ s("span", { className: "icon " + t });
79
+ function J({ 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 K({ source: e, title: t, alt: n, width: r, height: s, fit: c = "contain" }) {
83
+ const i = "image fit-" + c;
84
+ return /* @__PURE__ */ a(
85
85
  "img",
86
86
  {
87
- className: o,
88
- title: e,
87
+ className: i,
88
+ title: t,
89
89
  alt: n,
90
- style: { width: a, height: c },
91
- src: t
90
+ style: { width: r, height: s },
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 O({ label: e, element: t }) {
96
+ return /* @__PURE__ */ N("div", { className: "input", children: [
97
+ e,
98
+ t
99
99
  ] });
100
100
  }
101
- function X({ value: t }) {
102
- return /* @__PURE__ */ s("label", { className: "label", children: t });
101
+ function Q({ 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 U({ url: e, target: t, children: n }) {
105
+ return /* @__PURE__ */ a("a", { className: "link", href: e, target: t, children: n });
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 V({ open: e = !0, sizing: t = "content", children: n }) {
108
+ const r = x(null), s = "modal sizing-" + t;
109
+ return y(() => {
110
+ e ? r.current?.showModal() : r.current?.close();
111
+ }, [e]), /* @__PURE__ */ a("dialog", { ref: r, className: s, children: n });
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 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 });
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 X({ size: e = "medium", children: t }) {
118
+ const n = "paragraph size-" + e;
119
+ return /* @__PURE__ */ a("p", { className: n, children: t });
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 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 });
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 Z({ direction: e, size: t = "medium" }) {
126
+ const n = "ruler direction-" + e + " size-" + t;
127
+ return /* @__PURE__ */ a("div", { className: n });
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 _ = 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;
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: d,
135
+ name: t,
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))
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 ee({ active: e = !0 }) {
145
+ const t = "spinner" + (e ? " active" : "");
146
+ return /* @__PURE__ */ a("div", { className: t });
147
147
  }
148
- function A({ children: t }) {
149
- return /* @__PURE__ */ s("thead", { children: t });
148
+ function z({ 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: t }) {
152
+ const n = "border-" + e;
153
+ return /* @__PURE__ */ a("tbody", { className: n, children: t });
154
154
  }
155
- function M({ children: t }) {
156
- return /* @__PURE__ */ s("tfoot", { children: t });
155
+ function T({ 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 k({ 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 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 });
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 b({ padding: e = "medium", children: t }) {
166
+ const n = "table padding-" + e;
167
+ return /* @__PURE__ */ a("table", { className: n, children: t });
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
+ 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;
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 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;
180
+ return /* @__PURE__ */ a(
181
181
  "textarea",
182
182
  {
183
- className: i,
184
- name: e,
183
+ className: l,
184
+ name: t,
185
185
  placeholder: n,
186
- defaultValue: a,
187
- value: c,
188
- rows: o,
189
- ref: u,
190
- maxLength: l,
191
- onChange: m
186
+ defaultValue: r,
187
+ value: s,
188
+ rows: u,
189
+ ref: o,
190
+ maxLength: m,
191
+ onChange: d
192
192
  }
193
193
  );
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(
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;
196
+ return /* @__PURE__ */ a(
197
197
  "input",
198
198
  {
199
- className: f,
199
+ className: g,
200
200
  type: m,
201
- name: e,
201
+ name: t,
202
202
  placeholder: n,
203
- defaultValue: a,
204
- value: c,
205
- maxLength: r,
206
- pattern: o,
207
- title: l,
208
- ref: p,
209
- required: i,
210
- onChange: d
203
+ defaultValue: r,
204
+ value: s,
205
+ maxLength: c,
206
+ pattern: i,
207
+ title: u,
208
+ ref: h,
209
+ required: l,
210
+ onChange: p
211
211
  }
212
212
  );
213
213
  });
214
- function it({ size: t = "large", children: e }) {
215
- const n = "title size-" + t;
216
- switch (t) {
214
+ function re({ size: e = "large", children: t }) {
215
+ const n = "title size-" + e;
216
+ switch (e) {
217
217
  case "large":
218
- return /* @__PURE__ */ s("h1", { className: n, children: e });
218
+ return /* @__PURE__ */ a("h1", { className: n, children: t });
219
219
  case "medium":
220
- return /* @__PURE__ */ s("h2", { className: n, children: e });
220
+ return /* @__PURE__ */ a("h2", { className: n, children: t });
221
221
  case "small":
222
- return /* @__PURE__ */ s("h3", { className: n, children: e });
222
+ return /* @__PURE__ */ a("h3", { className: n, children: t });
223
223
  }
224
224
  }
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
- ] });
236
- }
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, {});
225
+ function A({ children: e }) {
226
+ return /* @__PURE__ */ a("div", { className: "tab", children: e });
250
227
  }
251
- function K({ children: t }) {
252
- return /* @__PURE__ */ s("div", { className: "tab", children: t });
253
- }
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);
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);
264
238
  });
265
- w(() => {
266
- m(e);
267
- }, [e, o]);
268
- const u = (i) => {
269
- a !== void 0 && a(i, c), r(i);
239
+ y(() => {
240
+ m(t);
241
+ }, [t, i]);
242
+ const d = (o) => {
243
+ r !== void 0 && r(o, s), c(o);
270
244
  };
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);
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);
275
249
  }) }),
276
- t !== void 0 ? /* @__PURE__ */ s("div", { className: "separator", children: t }) : null,
277
- /* @__PURE__ */ s("div", { className: "content", children: l[c] })
250
+ e !== void 0 ? /* @__PURE__ */ a("div", { className: "separator", children: e }) : null,
251
+ /* @__PURE__ */ a("div", { className: "content", children: u[s] })
252
+ ] });
253
+ }
254
+ L.Tab = A;
255
+ function se({ children: e }) {
256
+ return /* @__PURE__ */ a("main", { className: "layout-centered", children: /* @__PURE__ */ a("div", { className: "content", children: e }) });
257
+ }
258
+ function ce({ header: e, footer: t, sidebar: n, children: r }) {
259
+ return /* @__PURE__ */ N("div", { className: "layout-sidebar", children: [
260
+ /* @__PURE__ */ a("header", { children: e }),
261
+ /* @__PURE__ */ N("div", { className: "content", children: [
262
+ /* @__PURE__ */ a("div", { className: "left", children: /* @__PURE__ */ a("aside", { children: n }) }),
263
+ /* @__PURE__ */ a("div", { className: "right", children: /* @__PURE__ */ a("main", { children: r }) })
264
+ ] }),
265
+ /* @__PURE__ */ a("footer", { children: t })
278
266
  ] });
279
267
  }
280
- R.Tab = K;
281
- function mt({ children: t }) {
282
- return /* @__PURE__ */ s("div", { className: "mtds", children: t });
268
+ function ie({ children: e }) {
269
+ return /* @__PURE__ */ a("div", { className: "mtds", children: e });
283
270
  }
284
271
  export {
285
- O as Avatar,
286
- F as Border,
287
- j as Button,
272
+ $ as Avatar,
273
+ M as Border,
274
+ D as Button,
288
275
  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,
311
- R as Tabs,
312
- ct as Text,
313
- rt as TextArea,
314
- ot as TextBox,
315
- it as Title
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
316
303
  };
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.4",
5
5
  "type": "module",
6
6
  "repository": {
7
7
  "url": "https://github.com/MaskingTechnology/designsystem"