npm - @maskingtech/designsystem - Versions diffs - 0.0.2 → 0.0.3 - Mend

@maskingtech/designsystem 0.0.2 → 0.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/dist/mtds.css CHANGED Viewed

	@@ -1 +1 @@
1	- .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}.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 .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 .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 .form{--margin: var(--margin-container);margin:var(--margin);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-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.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{font-weight:var(--font-weight-medium)}.mtds .label{--margin: 0;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 .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)}
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}

package/dist/mtds.d.ts CHANGED Viewed

@@ -5,71 +5,79 @@ import { ReactElement } from 'react';
 import { ReactNode } from 'react';
 import { RefAttributes } from 'react';
-export declare function Avatar({ source, title, alt, width, height, fit }: Props_5): JSX.Element;
+export declare function Avatar({ source, title, alt, width, height, fit }: Props): JSX.Element;
-export declare function Border({ type, size, padding, children }: Props_6): JSX.Element;
+export declare function Border({ type, size, padding, children }: Props_2): JSX.Element;
-export declare function Button({ type, size, text, onClick }: Props_7): JSX.Element;
+export declare function Button({ type, size, text, onClick }: Props_3): JSX.Element;
-export declare function Cell({ sizing, children }: Props_8): JSX.Element;
+export declare function Cell({ sizing, children }: Props_4): JSX.Element;
-export declare function ClickArea({ padding, onClick, children }: Props_9): JSX.Element;
+export declare const CheckBox: ForwardRefExoticComponent<Props_5 & RefAttributes<HTMLInputElement>>;
-export declare function Column({ alignX, alignY, gap, wrap, children }: Props_10): JSX.Element;
+export declare function ClickArea({ padding, onClick, children }: Props_6): JSX.Element;
-export declare function DesignSystem({ children }: Props): JSX.Element;
+export declare function Column({ alignX, alignY, gap, wrap, children }: Props_7): JSX.Element;
-export declare function Dropdown({ options, selected, onChange }: Props_2): JSX.Element;
+export declare const DateTime: ForwardRefExoticComponent<Props_8 & RefAttributes<HTMLInputElement>>;
-export declare const Form: ForwardRefExoticComponent<Props_11 & RefAttributes<HTMLFormElement>>;
+export declare function DesignSystem({ children }: Props_37): JSX.Element;
-export declare function Grid({ layout, gap, children }: Props_12): JSX.Element;
+export declare function Dropdown({ options, selected, onChange }: Props_33): JSX.Element;
-export declare function Icon({ type }: Props_13): JSX.Element;
+declare function Element_2({ children }: Props_26): JSX.Element;
-declare function Image_2({ source, title, alt, width, height, fit }: Props_14): JSX.Element;
+declare function Element_3({ border, children }: Props_29): JSX.Element;
+declare function Element_4({ children }: Props_30): JSX.Element;
+declare function Element_5({ children }: Props_27): JSX.Element;
+declare function Element_6({ colspan, rowspan, alignX, alignY, size, children }: Props_28): JSX.Element;
+export declare const Form: ForwardRefExoticComponent<Props_9 & RefAttributes<HTMLFormElement>>;
+export declare function Grid({ layout, gap, children }: Props_10): JSX.Element;
+export declare function Icon({ type }: Props_11): JSX.Element;
+declare function Image_2({ source, title, alt, width, height, fit }: Props_12): JSX.Element;
 export { Image_2 as Image }
-export declare function Input({ label, element }: Props_15): JSX.Element;
+export declare function Input({ label, element }: Props_13): JSX.Element;
+export declare function Label({ value }: Props_14): JSX.Element;
-export declare function Label({ value }: Props_16): JSX.Element;
+export declare function Link({ url, target, children }: Props_18): JSX.Element;
-export declare function Link({ url, target, children }: Props_20): JSX.Element;
+export declare function Modal({ open, sizing, children }: Props_19): JSX.Element;
-export declare function Modal({ open, sizing, children }: Props_21): JSX.Element;
+export declare function ModalManager({ selectedId, children }: Props_34): JSX.Element;
-export declare function Panel({ type, padding, children }: Props_22): JSX.Element;
+export declare function Panel({ type, padding, children }: Props_20): JSX.Element;
-export declare function Paragraph({ size, children }: Props_23): JSX.Element;
+export declare function Paragraph({ size, children }: Props_21): JSX.Element;
 declare type Props = {
-    readonly children?: ReactNode;
+    readonly source: string;
+    readonly title?: string;
+    readonly alt?: string;
+    readonly width?: string;
+    readonly height?: string;
+    readonly fit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
 };
 declare type Props_10 = {
-    readonly alignX?: 'left' | 'center' | 'right' | 'stretch';
-    readonly alignY?: 'top' | 'center' | 'bottom' | 'justify';
+    readonly layout: 'two-columns' | 'three-columns' | 'four-columns';
     readonly gap?: 'large' | 'medium' | 'small' | 'none';
-    readonly wrap?: 'wrap' | 'nowrap';
     readonly children: ReactNode;
 };
 declare type Props_11 = {
-    readonly children: ReactNode;
-    readonly submitHandler?: (form: HTMLFormElement) => void;
+    readonly type: 'attachment' | 'bookmark' | 'box' | 'box-checked' | 'box-crossed' | 'calendar' | 'caution' | 'check' | 'clock' | 'close' | 'cloud' | 'comment' | 'diamond' | 'eye' | 'flag' | 'heart' | 'home' | 'info' | 'lock' | 'mail' | 'music' | 'pencil' | 'phone' | 'piece' | 'plus' | 'question' | 'rain' | 'recycle' | 'search' | 'settings' | 'star' | 'sun' | 'tag' | 'trash' | 'umbrella' | 'unlock' | 'user' | 'video' | 'warning' | 'yinyang';
 };
 declare type Props_12 = {
-    readonly layout: 'two-columns' | 'three-columns' | 'four-columns';
-    readonly gap?: 'large' | 'medium' | 'small' | 'none';
-    readonly children: ReactNode;
-};
-declare type Props_13 = {
-    readonly type: 'attachment' | 'bookmark' | 'box' | 'box-checked' | 'box-crossed' | 'calendar' | 'caution' | 'check' | 'clock' | 'close' | 'cloud' | 'comment' | 'diamond' | 'eye' | 'flag' | 'heart' | 'home' | 'info' | 'lock' | 'mail' | 'music' | 'phone' | 'piece' | 'plus' | 'question' | 'rain' | 'recycle' | 'search' | 'settings' | 'star' | 'sun' | 'tag' | 'trash' | 'umbrella' | 'unlock' | 'user' | 'video' | 'warning' | 'yinyang';
-};
-declare type Props_14 = {
     readonly source: string;
     readonly title?: string;
     readonly alt?: string;
@@ -78,30 +86,33 @@ declare type Props_14 = {
     readonly fit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
 };
-declare type Props_15 = {
-    readonly label: ReactElement<Props_16>;
-    readonly element: ReactElement<Props_17> | ReactElement<Props_18> | ReactElement<Props_19>;
+declare type Props_13 = {
+    readonly label: ReactElement<Props_14>;
+    readonly element: ReactElement<Props_15> | ReactElement<Props_16> | ReactElement<Props_17>;
 };
-declare type Props_16 = {
+declare type Props_14 = {
     readonly value: string;
 };
-declare type Props_17 = {
+declare type Props_15 = {
     readonly name: string;
     readonly placeholder?: string;
+    readonly defaultValue?: string;
     readonly value?: string;
     readonly limit?: number;
     readonly pattern?: string;
     readonly title?: string;
+    readonly type?: 'email' | 'number' | 'password' | 'search' | 'text' | 'tel' | 'url';
     readonly size?: 'large' | 'medium' | 'small';
     readonly required?: boolean;
     readonly onChange?: ChangeEventHandler<HTMLInputElement>;
 };
-declare type Props_18 = {
+declare type Props_16 = {
     readonly name: string;
     readonly placeholder?: string;
+    readonly defaultValue?: string;
     readonly value?: string;
     readonly size?: 'large' | 'medium' | 'small';
     readonly rows?: number;
@@ -109,44 +120,47 @@ declare type Props_18 = {
     readonly onChange?: ChangeEventHandler<HTMLTextAreaElement>;
 };
-declare type Props_19 = {
+declare type Props_17 = {
     readonly name: string;
     readonly options: Map<string, string>;
+    readonly defaultValue?: string;
     readonly value?: string;
     readonly size?: 'large' | 'medium' | 'small';
     readonly onChange?: ChangeEventHandler<HTMLSelectElement>;
 };
-declare type Props_2 = {
-    readonly options: Map<string, string>;
-    readonly selected?: string;
-    readonly onChange?: (oldKey: string, newKey: string) => void;
-};
-declare type Props_20 = {
+declare type Props_18 = {
     readonly url?: string;
     readonly target?: string;
     readonly children: ReactNode;
 };
-declare type Props_21 = {
-    readonly open: boolean;
+declare type Props_19 = {
+    readonly id?: string;
+    readonly open?: boolean;
     readonly sizing?: 'full' | 'content';
     readonly children?: ReactNode;
 };
-declare type Props_22 = {
+declare type Props_2 = {
+    readonly type?: 'normal' | 'dashed' | 'dotted';
+    readonly size?: 'large' | 'medium' | 'small';
+    readonly padding?: 'large' | 'medium' | 'small' | 'none';
+    readonly children?: ReactNode;
+};
+declare type Props_20 = {
     readonly type?: 'normal' | 'alert' | 'warning' | 'success' | 'error' | 'transparent';
     readonly padding?: 'large' | 'medium' | 'small';
     readonly children?: ReactNode;
 };
-declare type Props_23 = {
+declare type Props_21 = {
     readonly size?: 'large' | 'medium' | 'small';
     readonly children: ReactNode;
 };
-declare type Props_24 = {
+declare type Props_22 = {
     readonly alignX?: 'left' | 'center' | 'right' | 'justify';
     readonly alignY?: 'top' | 'center' | 'bottom' | 'stretch';
     readonly gap?: 'large' | 'medium' | 'small' | 'none';
@@ -154,16 +168,54 @@ declare type Props_24 = {
     readonly children: ReactNode;
 };
-declare type Props_25 = {
+declare type Props_23 = {
     readonly direction: 'horizontal' | 'vertical';
     readonly size?: 'small' | 'medium' | 'large';
 };
-declare type Props_26 = {
+declare type Props_24 = {
     readonly active?: boolean;
 };
+declare type Props_25 = {
+    readonly padding?: 'large' | 'medium' | 'small';
+    readonly children?: ReactElement<Props_26> | ReactElement<Props_29> | ReactElement<Props_30>[];
+};
+declare type Props_26 = {
+    readonly children?: ReactElement<Props_27>;
+};
 declare type Props_27 = {
+    readonly children?: ReactElement<Props_28>;
+};
+declare type Props_28 = {
+    readonly colspan?: number;
+    readonly rowspan?: number;
+    readonly alignX?: 'left' | 'center' | 'right';
+    readonly alignY?: 'top' | 'center' | 'bottom';
+    readonly size?: '95' | '90' | '85' | '80' | '75' | '70' | '65' | '60' | '55' | '50' | '45' | '40' | '35' | '30' | '25' | '20' | '25' | '10' | '5' | 'fit';
+    readonly children?: ReactNode;
+};
+declare type Props_29 = {
+    readonly border?: 'large' | 'medium' | 'small' | 'none';
+    readonly children?: ReactElement<Props_27>;
+};
+declare type Props_3 = {
+    readonly type?: 'submit' | 'primary' | 'secondary' | 'disabled';
+    readonly size?: 'large' | 'medium' | 'small';
+    readonly text: string;
+    readonly onClick?: () => void;
+};
+declare type Props_30 = {
+    readonly children?: ReactElement<Props_27>;
+};
+declare type Props_31 = {
     readonly value: string;
     readonly type?: 'primary' | 'secondary';
     readonly size?: 'large' | 'medium' | 'small';
@@ -171,77 +223,117 @@ declare type Props_27 = {
     readonly wrap?: 'none' | 'normal' | 'break-word';
 };
-declare type Props_28 = {
+declare type Props_32 = {
     readonly size?: 'large' | 'medium' | 'small';
     readonly children: ReactNode;
 };
-declare type Props_3 = {
+declare type Props_33 = {
+    readonly options: Map<string, string>;
+    readonly selected?: string;
+    readonly onChange?: (oldKey: string, newKey: string) => void;
+};
+declare type Props_34 = {
+    readonly selectedId?: string;
+    readonly children: ReactElement<Props_19> | ReactElement<Props_19>[];
+};
+declare type Props_35 = {
+    readonly separator?: ReactNode;
+    readonly selectedId?: string;
+    readonly children: ReactElement<Props_36> | ReactElement<Props_36>[];
+    readonly onChange?: (newId: string, oldId?: string) => void;
+};
+declare type Props_36 = {
     readonly id: string;
     readonly title: ReactNode;
     readonly children: ReactNode;
 };
+declare type Props_37 = {
+    readonly children?: ReactNode;
+};
 declare type Props_4 = {
-    readonly separator?: ReactNode;
-    readonly selectedId?: string;
-    readonly children: ReactElement<Props_3> | ReactElement<Props_3>[];
-    readonly onChange?: (newId: string, oldId?: string) => void;
+    readonly sizing?: 'fixed' | 'fluid';
+    readonly children: ReactNode;
 };
 declare type Props_5 = {
-    readonly source: string;
-    readonly title?: string;
-    readonly alt?: string;
-    readonly width?: string;
-    readonly height?: string;
-    readonly fit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
+    readonly name: string;
+    readonly label: string;
+    readonly defaultChecked?: boolean;
+    readonly checked?: boolean;
+    readonly value?: string;
+    readonly required?: boolean;
+    readonly onChange?: ChangeEventHandler<HTMLInputElement>;
 };
 declare type Props_6 = {
-    readonly type?: 'normal' | 'dashed' | 'dotted';
-    readonly size?: 'large' | 'medium' | 'small';
     readonly padding?: 'large' | 'medium' | 'small' | 'none';
+    readonly onClick?: () => void;
     readonly children?: ReactNode;
 };
 declare type Props_7 = {
-    readonly type?: 'submit' | 'primary' | 'secondary' | 'disabled';
-    readonly size?: 'large' | 'medium' | 'small';
-    readonly text: string;
-    readonly onClick?: () => void;
+    readonly alignX?: 'left' | 'center' | 'right' | 'stretch';
+    readonly alignY?: 'top' | 'center' | 'bottom' | 'justify';
+    readonly gap?: 'large' | 'medium' | 'small' | 'none';
+    readonly wrap?: 'wrap' | 'nowrap';
+    readonly children: ReactNode;
 };
 declare type Props_8 = {
-    readonly sizing?: 'fixed' | 'fluid';
-    readonly children: ReactNode;
+    readonly name: string;
+    readonly defaultValue?: string;
+    readonly value?: string;
+    readonly title?: string;
+    readonly type?: 'datetime' | 'date' | 'time' | 'month' | 'week';
+    readonly size?: 'large' | 'medium' | 'small';
+    readonly required?: boolean;
+    readonly onChange?: ChangeEventHandler<HTMLInputElement>;
 };
 declare type Props_9 = {
-    readonly padding?: 'large' | 'medium' | 'small' | 'none';
-    readonly onClick?: () => void;
-    readonly children?: ReactNode;
+    readonly children: ReactNode;
+    readonly submitHandler?: (form: HTMLFormElement) => void;
 };
-export declare function Row({ alignX, alignY, gap, wrap, children }: Props_24): JSX.Element;
+export declare function Row({ alignX, alignY, gap, wrap, children }: Props_22): JSX.Element;
+export declare function Ruler({ direction, size }: Props_23): JSX.Element;
+export declare const Select: ForwardRefExoticComponent<Props_17 & RefAttributes<HTMLSelectElement>>;
+export declare function Spinner({ active }: Props_24): JSX.Element;
-export declare function Ruler({ direction, size }: Props_25): JSX.Element;
+declare function Tab({ children }: Props_36): JSX.Element;
-export declare const Select: ForwardRefExoticComponent<Props_19 & RefAttributes<HTMLSelectElement>>;
+export declare function Table({ padding, children }: Props_25): JSX.Element;
-export declare function Spinner({ active }: Props_26): JSX.Element;
+export declare namespace Table {
+    var Header: Element_2;
+    var Body: Element_3;
+    var Footer: Element_4;
+    var Row: Element_5;
+    var Cell: Element_6;
+}
-export declare function Tab({ children }: Props_3): JSX.Element;
+export declare function Tabs({ separator, selectedId, children, onChange }: Props_35): JSX.Element;
-export declare function Tabs({ separator, selectedId, children, onChange }: Props_4): JSX.Element;
+export declare namespace Tabs {
+    var Tab: Tab;
+}
-declare function Text_2({ value, type, size, weight, wrap }: Props_27): JSX.Element;
+declare function Text_2({ value, type, size, weight, wrap }: Props_31): JSX.Element;
 export { Text_2 as Text }
-export declare const TextArea: ForwardRefExoticComponent<Props_18 & RefAttributes<HTMLTextAreaElement>>;
+export declare const TextArea: ForwardRefExoticComponent<Props_16 & RefAttributes<HTMLTextAreaElement>>;
-export declare const TextBox: ForwardRefExoticComponent<Props_17 & RefAttributes<HTMLInputElement>>;
+export declare const TextBox: ForwardRefExoticComponent<Props_15 & RefAttributes<HTMLInputElement>>;
-export declare function Title({ size, children }: Props_28): JSX.Element;
+export declare function Title({ size, children }: Props_32): JSX.Element;
 export { }

package/dist/mtds.js CHANGED Viewed

@@ -1,495 +1,316 @@
-import ae, { useState as k, useMemo as V, useEffectEvent as se, useEffect as J, forwardRef as w, useRef as oe } from "react";
-var y = { exports: {} }, T = {};
-var W;
-function ce() {
-  if (W) return T;
-  W = 1;
-  var t = Symbol.for("react.transitional.element"), r = Symbol.for("react.fragment");
-  function n(a, s, l) {
-    var i = null;
-    if (l !== void 0 && (i = "" + l), s.key !== void 0 && (i = "" + s.key), "key" in s) {
-      l = {};
-      for (var f in s)
-        f !== "key" && (l[f] = s[f]);
-    } else l = s;
-    return s = l.ref, {
-      $$typeof: t,
-      type: a,
-      key: i,
-      ref: s !== void 0 ? s : null,
-      props: l
-    };
-  }
-  return T.Fragment = r, T.jsx = n, T.jsxs = n, T;
-}
-var N = {};
-var U;
-function le() {
-  return U || (U = 1, process.env.NODE_ENV !== "production" && (function() {
-    function t(e) {
-      if (e == null) return null;
-      if (typeof e == "function")
-        return e.$$typeof === te ? null : e.displayName || e.name || null;
-      if (typeof e == "string") return e;
-      switch (e) {
-        case g:
-          return "Fragment";
-        case G:
-          return "Profiler";
-        case A:
-          return "StrictMode";
-        case Z:
-          return "Suspense";
-        case H:
-          return "SuspenseList";
-        case ee:
-          return "Activity";
-      }
-      if (typeof e == "object")
-        switch (typeof e.tag == "number" && console.error(
-          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
-        ), e.$$typeof) {
-          case S:
-            return "Portal";
-          case X:
-            return e.displayName || "Context";
-          case B:
-            return (e._context.displayName || "Context") + ".Consumer";
-          case K:
-            var c = e.render;
-            return e = e.displayName, e || (e = c.displayName || c.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
-          case Q:
-            return c = e.displayName || null, c !== null ? c : t(e.type) || "Memo";
-          case O:
-            c = e._payload, e = e._init;
-            try {
-              return t(e(c));
-            } catch {
-            }
-        }
-      return null;
-    }
-    function r(e) {
-      return "" + e;
-    }
-    function n(e) {
-      try {
-        r(e);
-        var c = !1;
-      } catch {
-        c = !0;
-      }
-      if (c) {
-        c = console;
-        var u = c.error, d = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
-        return u.call(
-          c,
-          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          d
-        ), r(e);
-      }
-    }
-    function a(e) {
-      if (e === g) return "<>";
-      if (typeof e == "object" && e !== null && e.$$typeof === O)
-        return "<...>";
-      try {
-        var c = t(e);
-        return c ? "<" + c + ">" : "<...>";
-      } catch {
-        return "<...>";
-      }
-    }
-    function s() {
-      var e = P.A;
-      return e === null ? null : e.getOwner();
-    }
-    function l() {
-      return Error("react-stack-top-frame");
-    }
-    function i(e) {
-      if (I.call(e, "key")) {
-        var c = Object.getOwnPropertyDescriptor(e, "key").get;
-        if (c && c.isReactWarning) return !1;
-      }
-      return e.key !== void 0;
-    }
-    function f(e, c) {
-      function u() {
-        z || (z = !0, console.error(
-          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
-          c
-        ));
-      }
-      u.isReactWarning = !0, Object.defineProperty(e, "key", {
-        get: u,
-        configurable: !0
-      });
-    }
-    function x() {
-      var e = t(this.type);
-      return D[e] || (D[e] = !0, console.error(
-        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
-      )), e = this.props.ref, e !== void 0 ? e : null;
-    }
-    function v(e, c, u, d, h, C) {
-      var p = u.ref;
-      return e = {
-        $$typeof: j,
-        type: e,
-        key: c,
-        props: u,
-        _owner: d
-      }, (p !== void 0 ? p : null) !== null ? Object.defineProperty(e, "ref", {
-        enumerable: !1,
-        get: x
-      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !0,
-        value: 0
-      }), Object.defineProperty(e, "_debugInfo", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !0,
-        value: null
-      }), Object.defineProperty(e, "_debugStack", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !0,
-        value: h
-      }), Object.defineProperty(e, "_debugTask", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !0,
-        value: C
-      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
-    }
-    function m(e, c, u, d, h, C) {
-      var p = c.children;
-      if (p !== void 0)
-        if (d)
-          if (re(p)) {
-            for (d = 0; d < p.length; d++)
-              E(p[d]);
-            Object.freeze && Object.freeze(p);
-          } else
-            console.error(
-              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
-            );
-        else E(p);
-      if (I.call(c, "key")) {
-        p = t(e);
-        var R = Object.keys(c).filter(function(ne) {
-          return ne !== "key";
-        });
-        d = 0 < R.length ? "{key: someKey, " + R.join(": ..., ") + ": ...}" : "{key: someKey}", M[p + d] || (R = 0 < R.length ? "{" + R.join(": ..., ") + ": ...}" : "{}", console.error(
-          `A props object containing a "key" prop is being spread into JSX:
-  let props = %s;
-  <%s {...props} />
-React keys must be passed directly to JSX without using spread:
-  let props = %s;
-  <%s key={someKey} {...props} />`,
-          d,
-          p,
-          R,
-          p
-        ), M[p + d] = !0);
-      }
-      if (p = null, u !== void 0 && (n(u), p = "" + u), i(c) && (n(c.key), p = "" + c.key), "key" in c) {
-        u = {};
-        for (var Y in c)
-          Y !== "key" && (u[Y] = c[Y]);
-      } else u = c;
-      return p && f(
-        u,
-        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
-      ), v(
-        e,
-        p,
-        u,
-        s(),
-        h,
-        C
-      );
-    }
-    function E(e) {
-      _(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === O && (e._payload.status === "fulfilled" ? _(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
-    }
-    function _(e) {
-      return typeof e == "object" && e !== null && e.$$typeof === j;
-    }
-    var b = ae, j = Symbol.for("react.transitional.element"), S = Symbol.for("react.portal"), g = Symbol.for("react.fragment"), A = Symbol.for("react.strict_mode"), G = Symbol.for("react.profiler"), B = Symbol.for("react.consumer"), X = Symbol.for("react.context"), K = Symbol.for("react.forward_ref"), Z = Symbol.for("react.suspense"), H = Symbol.for("react.suspense_list"), Q = Symbol.for("react.memo"), O = Symbol.for("react.lazy"), ee = Symbol.for("react.activity"), te = Symbol.for("react.client.reference"), P = b.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, I = Object.prototype.hasOwnProperty, re = Array.isArray, $ = console.createTask ? console.createTask : function() {
-      return null;
-    };
-    b = {
-      react_stack_bottom_frame: function(e) {
-        return e();
-      }
-    };
-    var z, D = {}, L = b.react_stack_bottom_frame.bind(
-      b,
-      l
-    )(), F = $(a(l)), M = {};
-    N.Fragment = g, N.jsx = function(e, c, u) {
-      var d = 1e4 > P.recentlyCreatedOwnerStacks++;
-      return m(
-        e,
-        c,
-        u,
-        !1,
-        d ? Error("react-stack-top-frame") : L,
-        d ? $(a(e)) : F
-      );
-    }, N.jsxs = function(e, c, u) {
-      var d = 1e4 > P.recentlyCreatedOwnerStacks++;
-      return m(
-        e,
-        c,
-        u,
-        !0,
-        d ? Error("react-stack-top-frame") : L,
-        d ? $(a(e)) : F
-      );
-    };
-  })()), N;
-}
-var q;
-function ie() {
-  return q || (q = 1, process.env.NODE_ENV === "production" ? y.exports = ce() : y.exports = le()), y.exports;
-}
-var o = ie();
-function fe({ children: t }) {
-  return /* @__PURE__ */ o.jsx("div", { className: "mtds", children: t });
-}
-function me({ options: t, selected: r, onChange: n }) {
-  const a = r ?? [...t.keys()][0], s = t.get(a) ?? "", [l, i] = k(a), [f, x] = k(s), [v, m] = k(!1), E = () => {
-    m(!v);
-  }, _ = (b) => {
-    const j = b.target, S = l, g = j.getAttribute("data-key") ?? a, A = t.get(g) ?? s;
-    i(g), x(A), m(!1), n && n(S, g);
-  };
-  return /* @__PURE__ */ o.jsxs("div", { className: "dropdown", children: [
-    /* @__PURE__ */ o.jsx("div", { className: v ? "text active" : "text", onClick: E, children: f }),
-    v && /* @__PURE__ */ o.jsx("div", { className: "options", children: Array.from(t).map(([b, j]) => /* @__PURE__ */ o.jsx("div", { className: "option", "data-key": b, onClick: _, children: j }, b)) })
-  ] });
-}
-function de({ children: t }) {
-  return /* @__PURE__ */ o.jsx("div", { className: "ds-tabs-tab", children: t });
-}
-function pe({ separator: t, selectedId: r, children: n, onChange: a }) {
-  const [s, l] = k(r ?? ""), i = V(() => Array.isArray(n) ? n : [n], [n]), f = V(() => {
-    const m = {};
-    return i.forEach((E) => {
-      const _ = E.props.id;
-      m[_] = E;
-    }), m;
-  }, [i]), x = se((m) => {
-    const E = i[0]?.props.id;
-    l(m ?? E);
-  });
-  J(() => {
-    x(r);
-  }, [r, i]);
-  const v = (m) => {
-    a !== void 0 && a(m, s), l(m);
-  };
-  return /* @__PURE__ */ o.jsxs("div", { className: "tabs", children: [
-    /* @__PURE__ */ o.jsx("div", { className: "nav", children: i.map((m) => {
-      const E = m.props.id, _ = `tab-${E}`, b = E === s ? "active" : "inactive", j = () => v(m.props.id);
-      return /* @__PURE__ */ o.jsx("div", { className: "item " + b, onClick: j, children: m.props.title }, _);
-    }) }),
-    t !== void 0 ? /* @__PURE__ */ o.jsx("div", { className: "separator", children: t }) : null,
-    /* @__PURE__ */ o.jsx("div", { className: "content", children: f[s] })
-  ] });
-}
-function Ee({ source: t, title: r, alt: n = "Avatar", width: a, height: s, fit: l = "contain" }) {
-  const i = "avatar fit-" + l, f = { width: a, height: s };
-  return /* @__PURE__ */ o.jsx(
+import { jsx as s, jsxs as h, Fragment as k } from "react/jsx-runtime";
+import { forwardRef as g, useRef as z, useEffect as w, useState as b, useMemo as y, useEffectEvent as E } from "react";
+function O({ source: t, title: e, alt: n = "Avatar", width: a, height: c, fit: r = "contain" }) {
+  const o = "avatar fit-" + r;
+  return /* @__PURE__ */ s(
     "img",
     {
-      className: i,
-      title: r,
+      className: o,
+      title: e,
       alt: n,
-      style: f,
+      style: { width: a, height: c },
       src: t
     }
   );
 }
-function ve({ type: t = "normal", size: r = "large", padding: n = "large", children: a }) {
-  const s = "border type-" + t + " size-" + r + " padding-" + n;
-  return /* @__PURE__ */ o.jsx("div", { className: s, children: a });
+function F({ type: t = "normal", size: e = "large", padding: n = "large", children: a }) {
+  const c = "border type-" + t + " size-" + e + " padding-" + n;
+  return /* @__PURE__ */ s("div", { className: c, children: a });
 }
-function xe({ type: t = "primary", size: r = "medium", text: n, onClick: a }) {
-  const s = "button type-" + t + " size-" + r, l = t === "disabled", i = t === "submit" ? "submit" : "button";
-  return /* @__PURE__ */ o.jsx("input", { type: i, onClick: a, className: s, disabled: l, value: n });
+function j({ type: t = "primary", size: e = "medium", text: n, onClick: a }) {
+  const c = "button type-" + t + " size-" + e;
+  return /* @__PURE__ */ s("input", { type: t === "submit" ? "submit" : "button", onClick: a, className: c, disabled: t === "disabled", value: n });
 }
-function be({ sizing: t = "fluid", children: r }) {
+function I({ sizing: t = "fluid", children: e }) {
   const n = "cell sizing-" + t;
-  return /* @__PURE__ */ o.jsx("div", { className: n, children: r });
+  return /* @__PURE__ */ s("div", { className: n, children: e });
 }
-function _e({ padding: t = "none", onClick: r, children: n }) {
+const P = g(function({ name: e, label: n, defaultChecked: a, checked: c, value: r, required: o, onChange: l }, m) {
+  return /* @__PURE__ */ h("label", { className: "checkbox", children: [
+    /* @__PURE__ */ s(
+      "input",
+      {
+        type: "checkbox",
+        defaultChecked: a,
+        checked: c,
+        value: r,
+        name: e,
+        ref: m,
+        required: o,
+        onChange: l
+      }
+    ),
+    n
+  ] });
+});
+function G({ padding: t = "none", onClick: e, children: n }) {
   const a = "clickarea padding-" + t;
-  return /* @__PURE__ */ o.jsx("div", { className: a, onClick: r, children: n });
+  return /* @__PURE__ */ s("div", { className: a, onClick: e, children: n });
 }
-function je({ alignX: t = "left", alignY: r = "top", gap: n = "medium", wrap: a = "nowrap", children: s }) {
-  const l = "column align-x-" + t + " align-y-" + r + " gap-" + n + " wrap-" + a;
-  return /* @__PURE__ */ o.jsx("div", { className: l, children: s });
+function q({ alignX: t = "left", alignY: e = "top", gap: n = "medium", wrap: a = "nowrap", children: c }) {
+  const r = "column align-x-" + t + " align-y-" + e + " gap-" + n + " wrap-" + a;
+  return /* @__PURE__ */ s("div", { className: r, children: c });
 }
-const ge = w(function({ children: r, submitHandler: n }, a) {
-  const s = (l) => {
-    l.preventDefault(), n && n(l.target);
-  };
-  return /* @__PURE__ */ o.jsx("form", { onSubmit: s, className: "form", ref: a, children: r });
+const H = g(function({ name: e, defaultValue: n, value: a, title: c, type: r = "datetime", size: o = "medium", required: l, onChange: m }, u) {
+  const i = "datetime size-" + o;
+  return /* @__PURE__ */ s(
+    "input",
+    {
+      className: i,
+      type: r,
+      name: e,
+      defaultValue: n,
+      value: a,
+      title: c,
+      ref: u,
+      required: l,
+      onChange: m
+    }
+  );
+}), J = g(function({ children: e, submitHandler: n }, a) {
+  return /* @__PURE__ */ s("form", { onSubmit: (r) => {
+    r.preventDefault(), n && n(r.target);
+  }, className: "form", ref: a, children: e });
 });
-function Re({ layout: t, gap: r = "medium", children: n }) {
-  const a = "grid layout-" + t + " gap-" + r;
-  return /* @__PURE__ */ o.jsx("div", { className: a, children: n });
+function Q({ layout: t, gap: e = "medium", children: n }) {
+  const a = "grid layout-" + t + " gap-" + e;
+  return /* @__PURE__ */ s("div", { className: a, children: n });
 }
-function Te({ type: t }) {
-  return /* @__PURE__ */ o.jsx("span", { className: "icon " + t });
+function U({ type: t }) {
+  return /* @__PURE__ */ s("span", { className: "icon " + t });
 }
-function Ne({ source: t, title: r, alt: n, width: a, height: s, fit: l = "contain" }) {
-  const i = "image fit-" + l, f = { width: a, height: s };
-  return /* @__PURE__ */ o.jsx(
+function V({ source: t, title: e, alt: n, width: a, height: c, fit: r = "contain" }) {
+  const o = "image fit-" + r;
+  return /* @__PURE__ */ s(
     "img",
     {
-      className: i,
-      title: r,
+      className: o,
+      title: e,
       alt: n,
-      style: f,
+      style: { width: a, height: c },
       src: t
     }
   );
 }
-function he({ label: t, element: r }) {
-  return /* @__PURE__ */ o.jsxs("div", { className: "input", children: [
+function W({ label: t, element: e }) {
+  return /* @__PURE__ */ h("div", { className: "input", children: [
     t,
-    r
+    e
   ] });
 }
-function ye({ value: t }) {
-  return /* @__PURE__ */ o.jsx("label", { className: "label", children: t });
+function X({ value: t }) {
+  return /* @__PURE__ */ s("label", { className: "label", children: t });
 }
-function ke({ url: t, target: r, children: n }) {
-  return /* @__PURE__ */ o.jsx("a", { className: "link", href: t, target: r, children: n });
+function Y({ url: t, target: e, children: n }) {
+  return /* @__PURE__ */ s("a", { className: "link", href: t, target: e, children: n });
 }
-function we({ open: t, sizing: r = "content", children: n }) {
-  const a = oe(null), s = "modal sizing-" + r;
-  return J(() => {
+function Z({ open: t = !0, sizing: e = "content", children: n }) {
+  const a = z(null), c = "modal sizing-" + e;
+  return w(() => {
     t ? a.current?.showModal() : a.current?.close();
-  }, [t]), /* @__PURE__ */ o.jsx("dialog", { ref: a, className: s, children: /* @__PURE__ */ o.jsx("form", { method: "dialog", children: n }) });
+  }, [t]), /* @__PURE__ */ s("dialog", { ref: a, className: c, children: n });
 }
-function Se({ type: t = "normal", padding: r = "large", children: n }) {
-  const a = "panel type-" + t + " padding-" + r;
-  return /* @__PURE__ */ o.jsx("div", { className: a, children: n });
+function _({ type: t = "normal", padding: e = "large", children: n }) {
+  const a = "panel type-" + t + " padding-" + e;
+  return /* @__PURE__ */ s("div", { className: a, children: n });
 }
-function Ae({ size: t = "medium", children: r }) {
+function tt({ size: t = "medium", children: e }) {
   const n = "paragraph size-" + t;
-  return /* @__PURE__ */ o.jsx("p", { className: n, children: r });
+  return /* @__PURE__ */ s("p", { className: n, children: e });
 }
-function Oe({ alignX: t = "left", alignY: r = "top", gap: n = "medium", wrap: a = "nowrap", children: s }) {
-  const l = "row align-x-" + t + " align-y-" + r + " gap-" + n + " wrap-" + a;
-  return /* @__PURE__ */ o.jsx("div", { className: l, children: s });
+function et({ alignX: t = "left", alignY: e = "top", gap: n = "medium", wrap: a = "nowrap", children: c }) {
+  const r = "row align-x-" + t + " align-y-" + e + " gap-" + n + " wrap-" + a;
+  return /* @__PURE__ */ s("div", { className: r, children: c });
 }
-function Pe({ direction: t, size: r = "medium" }) {
-  const n = "ruler direction-" + t + " size-" + r;
-  return /* @__PURE__ */ o.jsx("div", { className: n });
+function nt({ direction: t, size: e = "medium" }) {
+  const n = "ruler direction-" + t + " size-" + e;
+  return /* @__PURE__ */ s("div", { className: n });
 }
-const $e = w(function({ name: r, options: n, value: a, size: s = "medium", onChange: l }, i) {
-  const f = "select size-" + s;
-  return /* @__PURE__ */ o.jsx(
+const at = g(function({ name: e, options: n, defaultValue: a, value: c, size: r = "medium", onChange: o }, l) {
+  const m = "select size-" + r;
+  return /* @__PURE__ */ s(
     "select",
     {
-      className: f,
-      name: r,
+      className: m,
+      name: e,
       defaultValue: a,
-      onChange: l,
-      ref: i,
-      children: Array.from(n).map(([x, v]) => /* @__PURE__ */ o.jsx("option", { value: x, children: v }, x))
+      value: c,
+      onChange: o,
+      ref: l,
+      children: Array.from(n).map(([u, i]) => /* @__PURE__ */ s("option", { value: u, children: i }, u))
     }
   );
 });
-function Ce({ active: t = !0 }) {
-  const r = "spinner" + (t ? " active" : "");
-  return /* @__PURE__ */ o.jsx("div", { className: r });
+function st({ active: t = !0 }) {
+  const e = "spinner" + (t ? " active" : "");
+  return /* @__PURE__ */ s("div", { className: e });
+}
+function A({ children: t }) {
+  return /* @__PURE__ */ s("thead", { children: t });
+}
+function C({ border: t = "medium", children: e }) {
+  const n = "border-" + t;
+  return /* @__PURE__ */ s("tbody", { className: n, children: e });
+}
+function M({ children: t }) {
+  return /* @__PURE__ */ s("tfoot", { children: t });
+}
+function L({ children: t }) {
+  return /* @__PURE__ */ s("tr", { children: t });
 }
-function Ye({ value: t, type: r = "primary", size: n = "medium", weight: a = "normal", wrap: s = "none" }) {
-  const l = "text type-" + r + " size-" + n + " weight-" + a + " wrap-" + s;
-  return /* @__PURE__ */ o.jsx("span", { className: l, children: t });
+function B({ colspan: t, rowspan: e, alignX: n = "left", alignY: a = "center", size: c = "fit", children: r }) {
+  const o = "align-x-" + n + " align-y-" + a + " size-" + c;
+  return /* @__PURE__ */ s("td", { className: o, colSpan: t, rowSpan: e, children: r });
 }
-const Ie = w(function({ name: r, placeholder: n, value: a, size: s = "medium", rows: l, limit: i, onChange: f }, x) {
-  const v = "textarea size-" + s;
-  return /* @__PURE__ */ o.jsx(
+function v({ padding: t = "medium", children: e }) {
+  const n = "table padding-" + t;
+  return /* @__PURE__ */ s("table", { className: n, children: e });
+}
+v.Header = A;
+v.Body = C;
+v.Footer = M;
+v.Row = L;
+v.Cell = B;
+function ct({ value: t, type: e = "primary", size: n = "medium", weight: a = "normal", wrap: c = "none" }) {
+  const r = "text type-" + e + " size-" + n + " weight-" + a + " wrap-" + c;
+  return /* @__PURE__ */ s("span", { className: r, children: t });
+}
+const rt = g(function({ name: e, placeholder: n, defaultValue: a, value: c, size: r = "medium", rows: o, limit: l, onChange: m }, u) {
+  const i = "textarea size-" + r;
+  return /* @__PURE__ */ s(
     "textarea",
     {
-      className: v,
-      name: r,
+      className: i,
+      name: e,
       placeholder: n,
       defaultValue: a,
-      rows: l,
-      ref: x,
-      maxLength: i,
-      onChange: f
+      value: c,
+      rows: o,
+      ref: u,
+      maxLength: l,
+      onChange: m
     }
   );
-}), ze = w(function({ name: r, placeholder: n, value: a, limit: s, pattern: l, title: i, size: f = "medium", required: x, onChange: v }, m) {
-  const E = "textbox size-" + f;
-  return /* @__PURE__ */ o.jsx(
+}), 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) {
+  const f = "textbox size-" + u;
+  return /* @__PURE__ */ s(
     "input",
     {
-      className: E,
-      type: "text",
-      name: r,
+      className: f,
+      type: m,
+      name: e,
       placeholder: n,
       defaultValue: a,
-      maxLength: s,
-      pattern: l,
-      title: i,
-      ref: m,
-      required: x,
-      onChange: v
+      value: c,
+      maxLength: r,
+      pattern: o,
+      title: l,
+      ref: p,
+      required: i,
+      onChange: d
     }
   );
 });
-function De({ size: t = "large", children: r }) {
+function it({ size: t = "large", children: e }) {
   const n = "title size-" + t;
   switch (t) {
     case "large":
-      return /* @__PURE__ */ o.jsx("h1", { className: n, children: r });
+      return /* @__PURE__ */ s("h1", { className: n, children: e });
     case "medium":
-      return /* @__PURE__ */ o.jsx("h2", { className: n, children: r });
+      return /* @__PURE__ */ s("h2", { className: n, children: e });
     case "small":
-      return /* @__PURE__ */ o.jsx("h3", { className: n, children: r });
+      return /* @__PURE__ */ s("h3", { className: n, children: e });
   }
 }
+function lt({ options: t, selected: e, onChange: n }) {
+  const a = e ?? [...t.keys()][0], c = t.get(a) ?? "", [r, o] = b(a), [l, m] = b(c), [u, i] = b(!1), d = () => {
+    i(!u);
+  }, p = (f) => {
+    const N = f.target, S = r, x = N.getAttribute("data-key") ?? a, T = t.get(x) ?? c;
+    o(x), m(T), i(!1), n && n(S, x);
+  };
+  return /* @__PURE__ */ h("div", { className: "dropdown", children: [
+    /* @__PURE__ */ s("div", { className: u ? "text active" : "text", onClick: d, children: l }),
+    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)) })
+  ] });
+}
+function ut({ selectedId: t, children: e }) {
+  const [n, a] = b(t ?? ""), c = y(() => Array.isArray(e) ? e : [e], [e]), r = y(() => {
+    const l = {};
+    return c.forEach((m) => {
+      const u = m.props.id;
+      l[u] = m;
+    }), l;
+  }, [c]), o = E((l) => {
+    a(l ?? "");
+  });
+  return w(() => {
+    o(t);
+  }, [t, c]), r[n] ?? /* @__PURE__ */ s(k, {});
+}
+function K({ children: t }) {
+  return /* @__PURE__ */ s("div", { className: "tab", children: t });
+}
+function R({ separator: t, selectedId: e, children: n, onChange: a }) {
+  const [c, r] = b(e ?? ""), o = y(() => Array.isArray(n) ? n : [n], [n]), l = y(() => {
+    const i = {};
+    return o.forEach((d) => {
+      const p = d.props.id;
+      i[p] = d;
+    }), i;
+  }, [o]), m = E((i) => {
+    const d = o[0]?.props.id;
+    r(i ?? d);
+  });
+  w(() => {
+    m(e);
+  }, [e, o]);
+  const u = (i) => {
+    a !== void 0 && a(i, c), r(i);
+  };
+  return /* @__PURE__ */ h("div", { className: "tabs", children: [
+    /* @__PURE__ */ s("div", { className: "nav", children: o.map((i) => {
+      const d = i.props.id, p = `tab-${d}`, f = d === c ? "active" : "inactive", N = () => u(i.props.id);
+      return /* @__PURE__ */ s("div", { className: "item " + f, onClick: N, children: i.props.title }, p);
+    }) }),
+    t !== void 0 ? /* @__PURE__ */ s("div", { className: "separator", children: t }) : null,
+    /* @__PURE__ */ s("div", { className: "content", children: l[c] })
+  ] });
+}
+R.Tab = K;
+function mt({ children: t }) {
+  return /* @__PURE__ */ s("div", { className: "mtds", children: t });
+}
 export {
-  Ee as Avatar,
-  ve as Border,
-  xe as Button,
-  be as Cell,
-  _e as ClickArea,
-  je as Column,
-  fe as DesignSystem,
-  me as Dropdown,
-  ge as Form,
-  Re as Grid,
-  Te as Icon,
-  Ne as Image,
-  he as Input,
-  ye as Label,
-  ke as Link,
-  we as Modal,
-  Se as Panel,
-  Ae as Paragraph,
-  Oe as Row,
-  Pe as Ruler,
-  $e as Select,
-  Ce as Spinner,
-  de as Tab,
-  pe as Tabs,
-  Ye as Text,
-  Ie as TextArea,
-  ze as TextBox,
-  De as Title
+  O as Avatar,
+  F as Border,
+  j as Button,
+  I as Cell,
+  P as CheckBox,
+  G as ClickArea,
+  q as Column,
+  H as DateTime,
+  mt as DesignSystem,
+  lt as Dropdown,
+  J as Form,
+  Q as Grid,
+  U as Icon,
+  V as Image,
+  W as Input,
+  X as Label,
+  Y as Link,
+  Z as Modal,
+  ut as ModalManager,
+  _ as Panel,
+  tt as Paragraph,
+  et as Row,
+  nt as Ruler,
+  at as Select,
+  st as Spinner,
+  v as Table,
+  R as Tabs,
+  ct as Text,
+  rt as TextArea,
+  ot as TextBox,
+  it as Title
 };

package/package.json CHANGED Viewed

@@ -1,8 +1,11 @@
 {
   "name": "@maskingtech/designsystem",
   "private": false,
-  "version": "0.0.2",
+  "version": "0.0.3",
   "type": "module",
+  "repository": {
+    "url": "https://github.com/MaskingTechnology/designsystem"
+  },
   "scripts": {
     "build": "vite build",
     "clean": "rimraf dist",
@@ -17,21 +20,19 @@
     "README.md",
     "dist"
   ],
-  "dependencies": {
-    "react": "19.2.0"
+  "peerDependencies": {
+    "react": "^19.2.0"
   },
   "devDependencies": {
     "@eslint/js": "9.39.1",
-    "@types/node": "24.10.1",
-    "@types/react": "19.2.6",
-    "@vitejs/plugin-react": "5.1.1",
+    "@types/react": "19.2.7",
+    "@types/node": "25.0.1",
+    "@vitejs/plugin-react": "5.1.2",
     "eslint-plugin-react": "7.37.5",
-    "eslint-plugin-react-hooks": "7.0.1",
-    "eslint-plugin-sonarjs": "3.0.5",
     "rimraf": "6.1.2",
     "typescript": "5.9.3",
-    "typescript-eslint": "8.47.0",
-    "vite": "7.2.4",
+    "typescript-eslint": "8.49.0",
+    "vite": "7.2.7",
     "vite-plugin-dts": "4.5.4"
   },
   "optionalDependencies": {