@muibook/components 1.0.2 → 1.0.3

package/dist/create-mui-app/create-mui-app.css

@@ -1 +0,0 @@
-html[data-theme=light]{--app-container-surface: var(--white);--logo-color: var(--grey-800)}html[data-theme=dark]{--app-container-surface: var(--grey-1000);--logo-color: #ffeb3b}body{display:grid;place-items:center;text-align:center;background-color:var(--app-container-surface)}.introduction{max-width:36ch}:where(html){--font-family: system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";--font-size-15: 1.1rem;--font-size-25: 1.2rem;--font-size-50: 1.4rem;--font-size-100: 1.6rem;--font-size-200: 1.8rem;--font-size-300: 2.1rem;--font-size-400: 2.4rem;--font-size-500: 3.6rem;--font-size-600: 4.8rem;--font-size-700: 6rem;--font-size-800: 7.2rem;--font-size-900: 8.4rem;--font-size-1000: 9.6rem;--line-height-15: 1.63636364;--line-height-25: 1.5;--line-height-50: 1.5;--line-height-100: 1.5;--line-height-200: 1.33333333;--line-height-300: 1.14285714;--line-height-400: 1.5;--line-height-500: 1.33333333;--line-height-600: 1.25;--line-height-700: 1.2;--line-height-800: 1.16666667;--line-height-900: 1.14285714;--line-height-1000: 1.125;--font-weight-400: 400;--font-weight-500: 500;--font-weight-600: 600;--font-weight-700: 700;--black: black;--black-opacity-0: hsla(0, 0%, 0%, 0);--black-opacity-10: hsla(0, 0%, 0%, .1);--black-opacity-20: hsla(0, 0%, 0%, .2);--black-opacity-30: hsla(0, 0%, 0%, .3);--black-opacity-40: hsla(0, 0%, 0%, .4);--black-opacity-50: hsla(0, 0%, 0%, .5);--black-opacity-60: hsla(0, 0%, 0%, .6);--black-opacity-70: hsla(0, 0%, 0%, .7);--black-opacity-80: hsla(0, 0%, 0%, .8);--black-opacity-90: hsla(0, 0%, 0%, .9);--black-opacity-100: hsla(0, 0%, 0%, 1);--white: #ffffff;--white-opacity-0: hsla(0, 0%, 100%, 0);--white-opacity-10: hsla(0, 0%, 100%, .1);--white-opacity-20: hsla(0, 0%, 100%, .2);--white-opacity-30: hsla(0, 0%, 100%, .3);--white-opacity-40: hsla(0, 0%, 100%, .4);--white-opacity-50: hsla(0, 0%, 100%, .5);--white-opacity-60: hsla(0, 0%, 100%, .6);--white-opacity-70: hsla(0, 0%, 100%, .7);--white-opacity-80: hsla(0, 0%, 100%, .8);--white-opacity-90: hsla(0, 0%, 100%, .9);--white-opacity-100: hsla(0, 0%, 100%, 1);--grey-100: #f5f5f5;--grey-200: #e5e5e5;--grey-300: #ccc;--grey-400: #aaa;--grey-500: #888;--grey-600: #666;--grey-700: #555;--grey-800: #444;--grey-900: #333;--grey-1000: #222;--grey-1100: #111;--red-100: #ffe5e5;--red-200: #fbbcbc;--red-300: #f79494;--red-400: #f36b6b;--red-500: #f74e4e;--red-600: #e04343;--red-700: #c23c3c;--red-800: #a43535;--red-900: #862e2e;--red-1000: #6a2323;--orange-100: #fff2cc;--orange-200: #ffe0a3;--orange-300: #ffcc80;--orange-400: #ffb84d;--orange-500: #ffa500;--orange-600: #e59400;--orange-700: #cc8300;--orange-800: #b37300;--orange-900: #996200;--orange-1000: #805100;--green-100: #e5f9e5;--green-200: #c6f3c6;--green-300: #a6eda6;--green-400: #86e786;--green-500: #00bd00;--green-600: #00a800;--green-700: #009400;--green-800: #007f00;--green-900: #006b00;--green-1000: #005700;--blue-100: #e6f2ff;--blue-200: #cce4ff;--blue-300: #99caff;--blue-400: #85bffb;--blue-500: #62b7fb;--blue-600: #338fe0;--blue-700: #3396eb;--blue-800: #1a86e3;--blue-900: #0076db;--blue-1000: #005fb1;--radius-000: 0;--radius-100: 4px;--radius-150: 6px;--radius-200: 8px;--radius-300: 16px;--radius-400: 24px;--space-000: 0;--space-025: .2rem;--space-050: .4rem;--space-100: .6rem;--space-200: .8rem;--space-300: 1.2rem;--space-400: 1.6rem;--space-500: 2.4rem;--space-600: 3.6rem;--space-700: 4.8rem;--space-800: 6rem;--stroke-size-100: 1px;--stroke-size-200: 2px;--stroke-size-300: 3px;--stroke-size-400: 4px;--stroke-size-500: 5px;--stroke-solid: solid;--stroke-outset: outset;--speed-100: .1s;--speed-200: .2s;--speed-300: .3s;--speed-400: .4s}html[data-theme=light]{--form-default-text-color: var(--grey-500);--form-success-text-color: var(--green-700);--form-warning-text-color: var(--orange-700);--form-error-text-color: var(--red-700);--form-default-text-color-hover: var(--grey-600);--form-success-text-color-hover: var(--green-800);--form-warning-text-color-hover: var(--orange-800);--form-error-text-color-hover: var(--red-800);--form-default-border-color: var(--grey-300);--form-success-border-color: var(--green-600);--form-warning-border-color: var(--orange-600);--form-error-border-color: var(--red-600);--form-default-border-color-hover: var(--grey-400);--form-success-border-color-hover: var(--green-700);--form-warning-border-color-hover: var(--orange-700);--form-error-border-color-hover: var(--red-700);--feedback-neutral-border-color: var(--black-opacity-20);--feedback-positive-border-color: var(--green-600);--feedback-info-border-color: var(--blue-600);--feedback-warning-border-color: var(--orange-600);--feedback-attention-border-color: var(--red-600);--feedback-neutral-background: var(--white);--feedback-positive-background: var(--green-100);--feedback-info-background: var(--blue-100);--feedback-warning-background: var(--orange-100);--feedback-attention-background: var(--red-100);--feedback-neutral-icon: var(--grey-600);--feedback-positive-icon: var(--green-600);--feedback-info-icon: var(--blue-600);--feedback-warning-icon: var(--orange-600);--feedback-attention-icon: var(--red-600);--feedback-neutral-text: var(--grey-900);--feedback-positive-text: var(--green-900);--feedback-info-text: var(--blue-900);--feedback-warning-text: var(--orange-900);--feedback-attention-text: var(--red-900);--action-primary-stroke: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-primary-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-primary-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-primary-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-primary-background: var(--grey-900);--action-primary-background-hover: var(--grey-1000);--action-primary-background-focus: var(--grey-1000);--action-primary-background-disabled: var(--grey-200);--action-primary-text-color: var(--white);--action-primary-text-color-hover: var(--white);--action-primary-text-color-focus: var(--white);--action-primary-text-color-disabled: var(--grey-400);--action-secondary-stroke: var(--stroke-size-200) var(--stroke-solid) var(--grey-800);--action-secondary-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--grey-800);--action-secondary-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--grey-800);--action-secondary-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--grey-800);--action-secondary-background: var(--white-opacity-0);--action-secondary-background-hover: var(--grey-100);--action-secondary-background-focus: var(--grey-100);--action-secondary-background-disabled: var(--grey-100);--action-secondary-text-color: var(--grey-900);--action-secondary-text-color-hover: var(--grey-1000);--action-secondary-text-color-focus: var(--grey-1000);--action-secondary-text-color-disabled: var(--grey-400);--action-tertiary-stroke: var(--stroke-size-200) var(--stroke-solid) var(--white-opacity-0);--action-tertiary-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--white-opacity-0);--action-tertiary-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--white-opacity-0);--action-tertiary-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--white-opacity-0);--action-tertiary-background: var(--white-opacity-0);--action-tertiary-background-hover: var(--black-opacity-10);--action-tertiary-background-focus: var(--black-opacity-10);--action-tertiary-background-disabled: var(--grey-100);--action-tertiary-text-color: var(--grey-900);--action-tertiary-text-color-hover: var(--grey-1000);--action-tertiary-text-color-focus: var(--grey-1000);--action-tertiary-text-color-disabled: var(--grey-400);--action-attention-stroke: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-attention-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-attention-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-attention-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-attention-background: var(--red-500);--action-attention-background-hover: var(--red-600);--action-attention-background-focus: var(--red-600);--action-attention-background-disabled: var(--red-100);--action-attention-text-color: var(--white);--action-attention-text-color-hover: var(--white);--action-attention-text-color-focus: var(--white);--action-attention-text-color-disabled: var(--red-300);--surface: var(--grey-200);--surface-elevated-alpha: var(--white-opacity-50);--surface-elevated-100: var(--white);--surface-elevated-200: var(--grey-100);--surface-recessed-alpha: var(--black-opacity-10);--surface-recessed-100: var(--grey-300);--surface-recessed-200: var(--grey-400);--outline-color: var(--blue-500);--border-color: var(--black-opacity-20);--optional-text-color: var(--grey-600);--text-color: var(--grey-900);--text-color-success: var(--green-600);--text-color-warning: var(--orange-600);--text-color-error: var(--red-600);--switch-track-background: var(--grey-300);--switch-track-background-checked: var(--green-500);--switch-thumb-bg: var(--white);--switch-icon: var(--icon-color-default);--icon-color-default: var(--black);--icon-color-inverted: var(--white);--badge-text-color: var(--grey-100);--badge-background-neutral: var(--grey-600);--badge-background-positive: var(--green-600);--badge-background-warning: var(--orange-600);--badge-background-attention: var(--red-600);--heading-text-color: var(--grey-1000);--link-text-color-default: var(--grey-900);--link-text-color-default-hover: var(--grey-1000);--link-text-color-default-focus: var(--grey-1000);--link-text-color-default-disabled: var(--grey-800);--input-background: var(--white);--input-background-disabled: var(--grey-100);--addon-background: var(--grey-100);--tab-border-color: var(--grey-300);--tab-background: var(--grey-200);--tab-icon: var(--grey-900);--tab-text-color: var(--grey-900);--tab-background-active: var(--white);--tab-icon-active: var(--black);--tab-text-color-active: var(--black);--tab-shadow-active: var(--black-opacity-10);--carousel-background: var(--white)}html[data-theme=dark]{--form-default-text-color: var(--grey-500);--form-success-text-color: var(--green-400);--form-warning-text-color: var(--orange-400);--form-error-text-color: var(--red-400);--form-default-text-color-hover: var(--grey-400);--form-success-text-color-hover: var(--green-300);--form-warning-text-color-hover: var(--orange-300);--form-error-text-color-hover: var(--red-300);--form-default-border-color: var(--grey-600);--form-success-border-color: var(--green-400);--form-warning-border-color: var(--orange-400);--form-error-border-color: var(--red-400);--form-default-border-color-hover: var(--grey-500);--form-success-border-color-hover: var(--green-300);--form-warning-border-color-hover: var(--orange-300);--form-error-border-color-hover: var(--red-300);--feedback-neutral-border-color: var(--white-opacity-20);--feedback-positive-border-color: var(--green-400);--feedback-info-border-color: var(--blue-400);--feedback-warning-border-color: var(--orange-400);--feedback-attention-border-color: var(--red-400);--feedback-neutral-background: var(--grey-800);--feedback-positive-background: var(--green-800);--feedback-info-background: var(--blue-800);--feedback-warning-background: var(--orange-800);--feedback-attention-background: var(--red-800);--feedback-neutral-icon: var(--grey-300);--feedback-positive-icon: var(--green-300);--feedback-info-icon: var(--blue-300);--feedback-warning-icon: var(--orange-300);--feedback-attention-icon: var(--red-300);--feedback-neutral-text: var(--grey-100);--feedback-positive-text: var(--green-100);--feedback-info-text: var(--blue-100);--feedback-warning-text: var(--orange-100);--feedback-attention-text: var(--red-100);--action-primary-stroke: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-primary-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-primary-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-primary-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-primary-background: var(--grey-200);--action-primary-background-hover: var(--grey-100);--action-primary-background-focus: var(--grey-100);--action-primary-background-disabled: var(--grey-800);--action-primary-text-color: var(--grey-900);--action-primary-text-color-hover: var(--grey-900);--action-primary-text-color-focus: var(--grey-900);--action-primary-text-color-disabled: var(--grey-400);--action-secondary-stroke: var(--stroke-size-200) var(--stroke-solid) var(--grey-200);--action-secondary-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--grey-200);--action-secondary-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--grey-200);--action-secondary-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--grey-200);--action-secondary-background: var(--black-opacity-0);--action-secondary-background-hover: var(--grey-800);--action-secondary-background-focus: var(--grey-800);--action-secondary-background-disabled: var(--grey-900);--action-secondary-text-color: var(--grey-100);--action-secondary-text-color-hover: var(--grey-100);--action-secondary-text-color-focus: var(--grey-100);--action-secondary-text-color-disabled: var(--grey-600);--action-tertiary-stroke: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-tertiary-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-tertiary-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-tertiary-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-tertiary-background: transparent;--action-tertiary-background-hover: var(--white-opacity-10);--action-tertiary-background-focus: var(--white-opacity-10);--action-tertiary-background-disabled: var(--grey-900);--action-tertiary-text-color: var(--grey-100);--action-tertiary-text-color-hover: var(--grey-100);--action-tertiary-text-color-focus: var(--grey-100);--action-tertiary-text-color-disabled: var(--grey-600);--action-attention-stroke: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-attention-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-attention-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-attention-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-attention-background: var(--red-600);--action-attention-background-hover: var(--red-700);--action-attention-background-focus: var(--red-700);--action-attention-background-disabled: var(--red-900);--action-attention-text-color: var(--white);--action-attention-text-color-hover: var(--white);--action-attention-text-color-focus: var(--white);--action-attention-text-color-disabled: var(--red-300);--surface: var(--grey-1000);--surface-elevated-alpha: var(--white-opacity-10);--surface-elevated-100: var(--grey-800);--surface-elevated-200: var(--grey-900);--surface-recessed-alpha: var(--black-opacity-30);--surface-recessed-100: var(--grey-1000);--surface-recessed-200: var(--grey-1100);--outline-color: var(--blue-300);--border-color: var(--white-opacity-20);--optional-text-color: var(--grey-300);--text-color: var(--grey-200);--text-color-success: var(--green-400);--text-color-warning: var(--orange-400);--text-color-error: var(--red-400);--switch-track-background: var(--grey-600);--switch-track-background-checked: var(--green-500);--switch-thumb-bg: var(--black);--switch-icon: var(--icon-color-default);--icon-color-default: var(--white);--icon-color-inverted: var(--black);--badge-text-color: var(--grey-900);--badge-background-neutral: var(--grey-400);--badge-background-positive: var(--green-400);--badge-background-warning: var(--orange-400);--badge-background-attention: var(--red-400);--heading-text-color: var(--grey-100);--link-text-color-default: var(--grey-200);--link-text-color-default-hover: var(--grey-100);--link-text-color-default-focus: var(--grey-100);--link-text-color-default-disabled: var(--grey-600);--input-background: var(--grey-900);--input-background-disabled: var(--grey-800);--addon-background: var(--grey-1000);--tab-border-color: var(--grey-800);--tab-background: var(--grey-1100);--tab-icon: var(--grey-400);--tab-text-color: var(--grey-400);--tab-background-active: var(--grey-700);--tab-icon-active: var(--white);--tab-text-color-active: var(--white);--tab-shadow-active: var(--black-opacity-40);--carousel-background: var(--grey-700)}:where(html){--feedback-neutral-border: var(--stroke-size-200) var(--stroke-solid) var(--feedback-neutral-border-color);--feedback-positive-border: var(--stroke-size-200) var(--stroke-solid) var(--feedback-positive-border-color);--feedback-info-border: var(--stroke-size-200) var(--stroke-solid) var(--feedback-info-border-color);--feedback-warning-border: var(--stroke-size-200) var(--stroke-solid) var(--feedback-warning-border-color);--feedback-attention-border: var(--stroke-size-200) var(--stroke-solid) var(--feedback-attention-border-color);--action-padding: var(--space-200) var(--space-500);--action-icon-only-padding: var(--space-000);--action-radius: var(--radius-100);--action-font-size: var(--text-font-size);--action-line-height: var(--text-line-height);--action-font-weight: var(--font-weight-medium);--text-line-height-xs: var(--line-height-25);--text-line-height-s: var(--line-height-50);--text-line-height-m: var(--line-height-100);--text-line-height-l: var(--line-height-200);--text-font-size-xs: var(--font-size-25);--text-font-size-s: var(--font-size-50);--text-font-size-m: var(--font-size-100);--text-font-size-l: var(--font-size-200);--text-font-size: var(--text-font-size-m);--text-line-height: var(--text-line-height-m);--font-weight-regular: var(--font-weight-400);--font-weight-medium: var(--font-weight-500);--font-weight-semi-bold: var(--font-weight-600);--font-weight-bold: var(--font-weight-700);--border-thin: var(--stroke-size-100) var(--stroke-solid) var(--border-color);--border-thick: var(--stroke-size-200) var(--stroke-solid) var(--border-color);--outline-thin: var(--stroke-size-100) var(--stroke-outset) var(--outline-color);--outline-medium: var(--stroke-size-300) var(--stroke-outset) var(--outline-color);--outline-thick: var(--stroke-size-500) var(--stroke-outset) var(--outline-color);--switch-offset: 1px;--switch-thumb-size: 3.6rem;--switch-width: calc(var(--switch-height) * 1.6);--switch-height: calc(var(--switch-thumb-size) + (var(--switch-offset) * 2));--card-radius: var(--radius-150);--badge-radius: var(--radius-300);--badge-font-weight: var(--font-weight-bold);--heading-font-weight: var(--font-weight-bold);--heading-font-size-100: var(--font-size-600);--heading-font-size-200: var(--font-size-500);--heading-font-size-300: var(--font-size-400);--heading-font-size-400: var(--font-size-300);--heading-font-size-500: var(--font-size-200);--heading-font-size-600: var(--font-size-100);--heading-line-height-100: var(--line-height-600);--heading-line-height-200: var(--line-height-500);--heading-line-height-300: var(--line-height-400);--heading-line-height-400: var(--line-height-300);--heading-line-height-500: var(--line-height-200);--heading-line-height-600: var(--line-height-100);--alert-radius: var(--radius-100);--alert-padding: var(--space-400);--alert-gap-horizontal-mobile: var(--space-300);--alert-gap-horizontal-desktop: var(--space-100);--message-radius: var(--radius-150);--message-padding: var(--space-400);--message-gap-horizontal: var(--space-300);--message-gap-vertical: var(--space-100);--tab-radius: var(--radius-200);--carousel-radius: var(--radius-300);--carousel-tab-position: var(--space-400);--carousel-tab-offset: calc(4.4rem + var(--carousel-tab-position))}:where(html){--root-font-size: 62.5%;font-size:var(--root-font-size);font-family:var(--font-family);background:var(--white);color:var(--text-color);line-height:var(--text-line-height);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html{scroll-behavior:smooth}body{margin:var(--space-000);font-size:var(--text-font-size);min-height:100vh}button,input,optgroup,select,textarea{font-family:var(--font-family);font-size:var(--text-font-size);line-height:var(--text-line-height);margin:var(--space-000)}:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:var(--outline-thick)}progress{vertical-align:baseline}summary{display:list-item}template,[hidden]{display:none}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}article,aside,main,section,nav,header,footer{width:100%}audio,canvas,mark,video{display:inline-block}img,legend{border:0}body,figure,form{margin:var(--space-000)}audio,canvas,img,video{vertical-align:middle}dfn{font-style:italic}q{quotes:none}q:after,q:before{content:"";content:none}abbr[title]{border-bottom:none;text-decoration:underline dotted}dd{margin:0}*,:before,:after{box-sizing:border-box}::-moz-selection,::selection{background:var(--grey-900);color:var(--white);text-shadow:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;-moz-appearance:button;appearance:button;cursor:pointer}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}:focus:not(:focus-visible){outline:none}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none;-moz-appearance:none;appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;-moz-appearance:button;appearance:button;font:inherit}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none;-moz-appearance:none;appearance:none}input::-moz-focus-inner{border:0;padding:0}button,input,optgroup,select,textarea{vertical-align:baseline}[type=checkbox],[type=radio],legend{padding:0}button,input{overflow:visible}button,select{text-transform:none}button[disabled],html input[disabled]{cursor:default}em{font-style:italic}b,strong{font-weight:700}input,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none}input[type=radio]{-webkit-appearance:radio;-moz-appearance:radio;appearance:radio}input[type=checkbox]{-webkit-appearance:checkbox;-moz-appearance:checkbox;appearance:checkbox}input[type=button],input[type=submit],input[type=reset],button{display:inline-block;cursor:pointer;width:auto}table{width:100%;border-collapse:collapse;border-spacing:0}label{display:block}textarea{resize:vertical;overflow:auto;vertical-align:top}legend{font-weight:700}input[type=checkbox],input[type=radio]{width:auto}sub,sup,small{font-size:var(--text-font-size-xs);line-height:var(--text-line-height-xs)}sub{bottom:-.25em}sup{top:-.5em}dt{font-weight:700}label{margin-bottom:var(--space-100)}input,textarea{border-radius:var(--radius-000)}input[type=text],input[type=email],input[type=number],input[type=password],input[type=file],input[type=search],input[type=range],input[type=button],input[type=submit],input[type=reset],button,textarea,fieldset{border:none}input[type=text],input[type=email],input[type=number],input[type=password],input[type=search],input[type=range]{height:4.2rem;padding:var(--space-000) var(--space-400)}input[type=text],input[type=email],input[type=number],input[type=password],input[type=file],input[type=search],input[type=range],textarea,fieldset{box-shadow:inset 0 0 0 2px #e0e0e0}textarea{padding:var(--space-400);height:6.375em}legend{padding:var(--space-000) var(--space-200);margin-left:-.8rem}fieldset{border-radius:.3125em;padding:var(--space-300) var(--space-500);padding-bottom:var(--space-000)}fieldset ul{list-style:none;margin-bottom:var(--space-000)}fieldset ul label{margin-bottom:var(--space-000)}fieldset li{margin-bottom:var(--space-400)}select{height:1.875em}input[type=checkbox],input[type=radio]{margin:0 var(--space-200) 0 0}input[type=file]{font-size:var(--text-font-size-xs);padding:var(--space-400);margin-bottom:var(--space-500)}button:focus,input[type=submit]:focus{box-shadow:inset 0 0 0 1px #fff}

package/dist/create-mui-app/index.html

@@ -1,21 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" data-theme="light">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
-    <link rel="icon" type="image/svg+xml" href="/logo192.png" />
-    <link rel="apple-touch-icon" href="/logo192.png" />
-    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
-    <meta name="theme-color" content="var(--surface)" />
-    <title>Create Mui App</title>
-    <meta
-      name="description"
-      content="Start building accessible and fast loading interfaces using web components and MUI inspired styling. No frameworks or JavaScript build tools are required."
-    />
-    <script type="module" crossorigin src="/assets/index-DfcB3F-s.js"></script>
-    <link rel="stylesheet" crossorigin href="/create-mui-app.css">
-  </head>
-  <body>
-    <div id="app"></div>
-  </body>
-</html>

package/dist/muibook/_redirects

@@ -1 +0,0 @@
-/*    /index.html   200

package/dist/muibook/assets/base-B4dO4n0A.js

@@ -1,198 +0,0 @@
-class s extends HTMLElement{constructor(){super();const t=this.attachShadow({mode:"open"}),o=`
-      :host { display: block; }
-    `;t.innerHTML=`
-      <style>${o}</style>
-
-      <story-template 
-        title="Base"
-        description="Raw values for core attributes like color, typography, spacing, and size."
-        figma="https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=3-527&t=fSFYVey9aCoE5oQa-1"
-        github="https://github.com/michaeltrilford/muibook/blob/main/src/css/mui-tokens.css"
-      >
-
-        <mui-v-stack space="var(--space-700)">
-
-          <spec-card title="Font Family">
-            <story-token-slat 
-              slot="body" 
-              token="--font-family"
-              variant="font-family"
-              output="system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'">
-            </story-token-slat>
-          </spec-card>
-            
-          <spec-card title="Font Scale" description="The font size scale follows a consistent type ramp, using fluid rem values to establish visual hierarchy. Each step in the scale pairs directly with a calculated line-height, enabling predictable, harmonious typography across components and layouts." usage="E.g. --font-size-15 and --line-height-15 is paired.">
-            <story-token-slat slot="body" token="--font-size-15" variant="text-size" line-height="--line-height-15" output="1.1rem"></story-token-slat>
-            <story-token-slat slot="body" token="--font-size-25" variant="text-size" line-height="--line-height-25" output="1.2rem"></story-token-slat>
-            <story-token-slat slot="body" token="--font-size-50" variant="text-size" line-height="--line-height-50" output="1.4rem"></story-token-slat>
-            <story-token-slat slot="body" token="--font-size-100" variant="text-size" line-height="--line-height-100" output="1.6rem"></story-token-slat>
-            <story-token-slat slot="body" token="--font-size-200" variant="text-size" line-height="--line-height-200" output="1.8rem"></story-token-slat>
-            <story-token-slat slot="body" token="--font-size-300" variant="text-size" line-height="--line-height-300" output="2.1rem"></story-token-slat>
-            <story-token-slat slot="body" token="--font-size-400" variant="text-size" line-height="--line-height-400" output="2.4rem"></story-token-slat>
-            <story-token-slat slot="body" token="--font-size-500" variant="text-size" line-height="--line-height-500" output="3.6rem"></story-token-slat>
-            <story-token-slat slot="body" token="--font-size-600" variant="text-size" line-height="--line-height-600" output="4.8rem"></story-token-slat>
-            <story-token-slat slot="body" token="--font-size-700" variant="text-size" line-height="--line-height-700" output="6rem"></story-token-slat>
-            <story-token-slat slot="body" token="--font-size-800" variant="text-size" line-height="--line-height-800" output="7.2rem"></story-token-slat>
-            <story-token-slat slot="body" token="--font-size-900" variant="text-size" line-height="--line-height-900" output="8.4rem"></story-token-slat>
-            <story-token-slat slot="body" token="--font-size-1000" variant="text-size" line-height="--line-height-1000" output="9.6rem"></story-token-slat>
-          </spec-card>
-
-          <spec-card title="Line-height" description="Line heights are ratio-based and mapped to their corresponding font sizes, ensuring clear vertical rhythm and legibility. This alignment supports scalable, accessible typography that remains balanced at any size." usage="E.g. --font-size-15 and --line-height-15 is paired.">
-            <story-token-slat slot="body" token="--line-height-15" variant="line-height" font-size="--font-size-15" output="2.18181818"></story-token-slat>
-            <story-token-slat slot="body" token="--line-height-25" variant="line-height" font-size="--font-size-25" output="2"></story-token-slat>
-            <story-token-slat slot="body" token="--line-height-50" variant="line-height" font-size="--font-size-50" output="1.71428571"></story-token-slat>
-            <story-token-slat slot="body" token="--line-height-100" variant="line-height" font-size="--font-size-100" output="1.5"></story-token-slat>
-            <story-token-slat slot="body" token="--line-height-200" variant="line-height" font-size="--font-size-200" output="1.33333333"></story-token-slat>
-            <story-token-slat slot="body" token="--line-height-300" variant="line-height" font-size="--font-size-300" output="1.14285714"></story-token-slat>
-            <story-token-slat slot="body" token="--line-height-400" variant="line-height" font-size="--font-size-400" output="1.5"></story-token-slat>
-            <story-token-slat slot="body" token="--line-height-500" variant="line-height" font-size="--font-size-500" output="1.33333333"></story-token-slat>
-            <story-token-slat slot="body" token="--line-height-600" variant="line-height" font-size="--font-size-600" output="1.25"></story-token-slat>
-            <story-token-slat slot="body" token="--line-height-700" variant="line-height" font-size="--font-size-700" output="1.2"></story-token-slat>
-            <story-token-slat slot="body" token="--line-height-800" variant="line-height" font-size="--font-size-800" output="1.16666667"></story-token-slat>
-            <story-token-slat slot="body" token="--line-height-900" variant="line-height" font-size="--font-size-900" output="1.14285714"></story-token-slat>
-            <story-token-slat slot="body" token="--line-height-1000" variant="line-height" font-size="--font-size-1000" output="1.125"></story-token-slat>
-          </spec-card>
-
-          <spec-card title="Font Weight">
-            <story-token-slat slot="body" token="--font-weight-400" variant="font-weight" output="400"></story-token-slat>
-            <story-token-slat slot="body" token="--font-weight-500" variant="font-weight" output="500"></story-token-slat>
-            <story-token-slat slot="body" token="--font-weight-600" variant="font-weight" output="600"></story-token-slat>
-            <story-token-slat slot="body" token="--font-weight-700" variant="font-weight" output="700"></story-token-slat>
-          </spec-card>
-
-          <spec-card title="Colors / Black">
-            <story-token-slat slot="body" token="--black" variant="color" output="#000000"></story-token-slat>
-            <story-token-slat slot="body" token="--black-opacity-0" variant="color" output="hsla(0, 0%, 0%, 0)"></story-token-slat>
-            <story-token-slat slot="body" token="--black-opacity-10" variant="color" output="hsla(0, 0%, 0%, 0.1)"></story-token-slat>
-            <story-token-slat slot="body" token="--black-opacity-20" variant="color" output="hsla(0, 0%, 0%, 0.2)"></story-token-slat>
-            <story-token-slat slot="body" token="--black-opacity-30" variant="color" output="hsla(0, 0%, 0%, 0.3)"></story-token-slat>
-            <story-token-slat slot="body" token="--black-opacity-40" variant="color" output="hsla(0, 0%, 0%, 0.4)"></story-token-slat>
-            <story-token-slat slot="body" token="--black-opacity-50" variant="color" output="hsla(0, 0%, 0%, 0.5)"></story-token-slat>
-            <story-token-slat slot="body" token="--black-opacity-60" variant="color" output="hsla(0, 0%, 0%, 0.6)"></story-token-slat>
-            <story-token-slat slot="body" token="--black-opacity-70" variant="color" output="hsla(0, 0%, 0%, 0.7)"></story-token-slat>
-            <story-token-slat slot="body" token="--black-opacity-80" variant="color" output="hsla(0, 0%, 0%, 0.8)"></story-token-slat>
-            <story-token-slat slot="body" token="--black-opacity-90" variant="color" output="hsla(0, 0%, 0%, 0.9)"></story-token-slat>
-            <story-token-slat slot="body" token="--black-opacity-100" variant="color" output="hsla(0, 0%, 0%, 1)"></story-token-slat>
-          </spec-card>
-
-
-          <spec-card title="Colors / White">
-            <story-token-slat slot="body" token="--white" variant="color" output="#FFFFFF"></story-token-slat>
-            <story-token-slat slot="body" token="--white-opacity-0" variant="color" output="hsla(0, 0%, 100%, 0)"></story-token-slat>
-            <story-token-slat slot="body" token="--white-opacity-10" variant="color" output="hsla(0, 0%, 100%, 0.1)"></story-token-slat>
-            <story-token-slat slot="body" token="--white-opacity-20" variant="color" output="hsla(0, 0%, 100%, 0.2)"></story-token-slat>
-            <story-token-slat slot="body" token="--white-opacity-30" variant="color" output="hsla(0, 0%, 100%, 0.3)"></story-token-slat>
-            <story-token-slat slot="body" token="--white-opacity-40" variant="color" output="hsla(0, 0%, 100%, 0.4)"></story-token-slat>
-            <story-token-slat slot="body" token="--white-opacity-50" variant="color" output="hsla(0, 0%, 100%, 0.5)"></story-token-slat>
-            <story-token-slat slot="body" token="--white-opacity-60" variant="color" output="hsla(0, 0%, 100%, 0.6)"></story-token-slat>
-            <story-token-slat slot="body" token="--white-opacity-70" variant="color" output="hsla(0, 0%, 100%, 0.7)"></story-token-slat>
-            <story-token-slat slot="body" token="--white-opacity-80" variant="color" output="hsla(0, 0%, 100%, 0.8)"></story-token-slat>
-            <story-token-slat slot="body" token="--white-opacity-90" variant="color" output="hsla(0, 0%, 100%, 0.9)"></story-token-slat>
-            <story-token-slat slot="body" token="--white-opacity-100" variant="color" output="hsla(0, 0%, 100%, 1)"></story-token-slat>
-          </spec-card>
-
-
-          <spec-card title="Colors / Grey">
-
-            <story-token-slat slot="body" token="--grey-100" variant="color" output="#F5F5F5">
-              <div slot="visual" style="width: 16px; height: 16px; background: var(--grey-100); border-radius: 4px;"></div>
-            </story-token-slat>
-
-            <story-token-slat slot="body" token="--grey-200" variant="color" output="#E5E5E5"></story-token-slat>
-            <story-token-slat slot="body" token="--grey-300" variant="color" output="#CCCCCC"></story-token-slat>
-            <story-token-slat slot="body" token="--grey-400" variant="color" output="#AAAAAA"></story-token-slat>
-            <story-token-slat slot="body" token="--grey-500" variant="color" output="#888888"></story-token-slat>
-            <story-token-slat slot="body" token="--grey-600" variant="color" output="#666666"></story-token-slat>
-            <story-token-slat slot="body" token="--grey-700" variant="color" output="#555555"></story-token-slat>
-            <story-token-slat slot="body" token="--grey-800" variant="color" output="#444444"></story-token-slat>
-            <story-token-slat slot="body" token="--grey-900" variant="color" output="#333333"></story-token-slat>
-            <story-token-slat slot="body" token="--grey-1000" variant="color" output="#222222"></story-token-slat>
-          </spec-card>
-
-          <spec-card title="Colors / Red">
-            <story-token-slat slot="body" token="--red-100" variant="color" output="#FFE5E5"></story-token-slat>
-            <story-token-slat slot="body" token="--red-200" variant="color" output="#FBBCBC"></story-token-slat>
-            <story-token-slat slot="body" token="--red-300" variant="color" output="#F79494"></story-token-slat>
-            <story-token-slat slot="body" token="--red-400" variant="color" output="#F36B6B"></story-token-slat>
-            <story-token-slat slot="body" token="--red-500" variant="color" output="#F74E4E"></story-token-slat>
-            <story-token-slat slot="body" token="--red-600" variant="color" output="#E04343"></story-token-slat>
-            <story-token-slat slot="body" token="--red-700" variant="color" output="#C23C3C"></story-token-slat>
-            <story-token-slat slot="body" token="--red-800" variant="color" output="#A43535"></story-token-slat>
-            <story-token-slat slot="body" token="--red-900" variant="color" output="#862E2E"></story-token-slat>
-            <story-token-slat slot="body" token="--red-1000" variant="color" output="#6A2323"></story-token-slat>
-          </spec-card>
-
-          <spec-card title="Colors / Orange">
-            <story-token-slat slot="body" token="--orange-100" variant="color" output="#FFF2CC"></story-token-slat>
-            <story-token-slat slot="body" token="--orange-200" variant="color" output="#FFE0A3"></story-token-slat>
-            <story-token-slat slot="body" token="--orange-300" variant="color" output="#FFCC80"></story-token-slat>
-            <story-token-slat slot="body" token="--orange-400" variant="color" output="#FFB84D"></story-token-slat>
-            <story-token-slat slot="body" token="--orange-500" variant="color" output="#FFA500"></story-token-slat>
-            <story-token-slat slot="body" token="--orange-600" variant="color" output="#E59400"></story-token-slat>
-            <story-token-slat slot="body" token="--orange-700" variant="color" output="#CC8300"></story-token-slat>
-            <story-token-slat slot="body" token="--orange-800" variant="color" output="#B37300"></story-token-slat>
-            <story-token-slat slot="body" token="--orange-900" variant="color" output="#996200"></story-token-slat>
-            <story-token-slat slot="body" token="--orange-1000" variant="color" output="#805100"></story-token-slat>
-          </spec-card>
-
-          <spec-card title="Colors / Green">
-            <story-token-slat slot="body" token="--green-100" variant="color" output="#E5F9E5"></story-token-slat>
-            <story-token-slat slot="body" token="--green-200" variant="color" output="#C6F3C6"></story-token-slat>
-            <story-token-slat slot="body" token="--green-300" variant="color" output="#A6EDA6"></story-token-slat>
-            <story-token-slat slot="body" token="--green-400" variant="color" output="#86E786"></story-token-slat>
-            <story-token-slat slot="body" token="--green-500" variant="color" output="#00BD00"></story-token-slat>
-            <story-token-slat slot="body" token="--green-600" variant="color" output="#00A800"></story-token-slat>
-            <story-token-slat slot="body" token="--green-700" variant="color" output="#009400"></story-token-slat>
-            <story-token-slat slot="body" token="--green-800" variant="color" output="#007F00"></story-token-slat>
-            <story-token-slat slot="body" token="--green-900" variant="color" output="#006B00"></story-token-slat>
-            <story-token-slat slot="body" token="--green-1000" variant="color" output="#005700"></story-token-slat>
-          </spec-card>
-
-          <spec-card title="Colors / Blue">
-            <story-token-slat slot="body" token="--blue-100" variant="color" output="#E6F2FF"></story-token-slat>
-            <story-token-slat slot="body" token="--blue-200" variant="color" output="#CCE4FF"></story-token-slat>
-            <story-token-slat slot="body" token="--blue-300" variant="color" output="#99CAFF"></story-token-slat>
-            <story-token-slat slot="body" token="--blue-400" variant="color" output="#85BFFB"></story-token-slat>
-            <story-token-slat slot="body" token="--blue-500" variant="color" output="#62B7FB"></story-token-slat>
-            <story-token-slat slot="body" token="--blue-600" variant="color" output="#338fe0"></story-token-slat>
-            <story-token-slat slot="body" token="--blue-700" variant="color" output="#3396EB"></story-token-slat>
-            <story-token-slat slot="body" token="--blue-800" variant="color" output="#1A86E3"></story-token-slat>
-            <story-token-slat slot="body" token="--blue-900" variant="color" output="#0076DB"></story-token-slat> 
-            <story-token-slat slot="body" token="--blue-1000" variant="color" output="#005FB1"></story-token-slat> 
-          </spec-card>
-
-          <spec-card title="Radius">
-            <story-token-slat slot="body" token="--radius-000" variant="radius" output="0"></story-token-slat>
-            <story-token-slat slot="body" token="--radius-100" variant="radius" output="4px"></story-token-slat>
-            <story-token-slat slot="body" token="--radius-150" variant="radius" output="6px"></story-token-slat>
-            <story-token-slat slot="body" token="--radius-200" variant="radius" output="8px"></story-token-slat>
-            <story-token-slat slot="body" token="--radius-300" variant="radius" output="16px"></story-token-slat>
-            <story-token-slat slot="body" token="--radius-400" variant="radius" output="24px"></story-token-slat>
-          </spec-card>
-
-          <spec-card title="Spacing">
-            <story-token-slat slot="body" token="--space-000" variant="size" output="0"></story-token-slat>
-            <story-token-slat slot="body" token="--space-025" variant="size" output="0.2rem"></story-token-slat>
-            <story-token-slat slot="body" token="--space-050" variant="size" output="0.4rem"></story-token-slat>
-            <story-token-slat slot="body" token="--space-100" variant="size" output="0.6rem"></story-token-slat>
-            <story-token-slat slot="body" token="--space-200" variant="size" output="0.8rem"></story-token-slat>
-            <story-token-slat slot="body" token="--space-300" variant="size" output="1.2rem"></story-token-slat>
-            <story-token-slat slot="body" token="--space-400" variant="size" output="1.6rem"></story-token-slat>
-            <story-token-slat slot="body" token="--space-500" variant="size" output="2.4rem"></story-token-slat>
-            <story-token-slat slot="body" token="--space-600" variant="size" output="3.6rem"></story-token-slat>
-            <story-token-slat slot="body" token="--space-700" variant="size" output="4.8rem"></story-token-slat>
-            <story-token-slat slot="body" token="--space-800" variant="size" output="6rem"></story-token-slat>
-          </spec-card>
-
-          <spec-card title="Stroke">
-            <story-token-slat slot="body" token="--stroke-size-100" variant="border-width" output="1px"></story-token-slat>
-            <story-token-slat slot="body" token="--stroke-size-200" variant="border-width" output="2px"></story-token-slat>
-            <story-token-slat slot="body" token="--stroke-size-300" variant="border-width" output="3px"></story-token-slat>
-            <story-token-slat slot="body" token="--stroke-size-400" variant="border-width" output="4px"></story-token-slat>
-            <story-token-slat slot="body" token="--stroke-size-500" variant="border-width" output="5px"></story-token-slat>
-          </spec-card>
-
-        </mui-v-stack>
-
-      </story-template>
-    `}}customElements.define("tokens-base",s);

package/dist/muibook/assets/components-YZ3tjmIt.js

@@ -1,122 +0,0 @@
-class o extends HTMLElement{constructor(){super();const t=this.attachShadow({mode:"open"}),e=`
-      :host { display: block; }
-
-      .reference {
-        padding: var(--space-500) var(--space-500); 
-        border-top: var(--border-thin);
-      }
-
-      @media (min-width: 768px) {
-        .reference {
-          padding: var(--space-500) var(--space-600); 
-        }
-      }
-    `;t.innerHTML=`
-      <style>${e}</style>
-
-      <story-template 
-        title="Components"
-        description="Tokens mapped to specific UI components and their states, bridging global tokens with practical implementation for consistency and scalability."
-        figma="https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=3-527&t=fSFYVey9aCoE5oQa-1"
-        github="https://github.com/michaeltrilford/muibook/blob/main/src/css/mui-tokens.css"
-      >
-        <mui-v-stack space="var(--space-700)">
-
-          <spec-card title="Icon" github="https://github.com/michaeltrilford/muibook/tree/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-icons">
-            <story-token-slat slot="body" token="--icon-color-default" variant="color" output="var(--black)"></story-token-slat>
-            <story-token-slat slot="body" token="--icon-color-inverted" variant="color" output="var(--white)"></story-token-slat>
-          </spec-card>
-
-          <spec-card title="Card" github="https://github.com/michaeltrilford/muibook/tree/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-card">
-            <story-token-slat slot="body" token="--card-radius" variant="radius" output="var(--radius-150)"></story-token-slat>
-            <mui-body size="x-small" class="reference" slot="body">Refer to <mui-link size="x-small" href="/#/surface-design-tokens">Surface</mui-link> tokens</mui-body>
-          </spec-card>
-
-          <spec-card title="Badge" github="https://github.com/michaeltrilford/muibook/blob/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-badge/index.ts">
-            <story-token-slat slot="body" token="--badge-radius" variant="radius" output="var(--radius-100)"></story-token-slat>
-
-            <story-token-slat slot="body" token="--badge-text-color" variant="text-color" output="var(--white)"></story-token-slat>
-            <story-token-slat slot="body" token="--badge-font-weight" variant="font-weight" output="var(--font-weight-bold)"></story-token-slat>
-
-            <story-token-slat slot="body" token="--badge-background-neutral" variant="color" output="var(--grey-600)"></story-token-slat>
-            <story-token-slat slot="body" token="--badge-background-positive" variant="color" output="var(--green-600)"></story-token-slat>
-            <story-token-slat slot="body" token="--badge-background-warning" variant="color" output="var(--orange-600)"></story-token-slat>
-            <story-token-slat slot="body" token="--badge-background-attention" variant="color" output="var(--red-600)"></story-token-slat>
-          </spec-card>
-
-          <spec-card title="Table" github="https://github.com/michaeltrilford/muibook/tree/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-table">
-            <mui-body size="x-small" class="reference" slot="body">Refer to <mui-link size="x-small" href="/#/contextual-design-tokens">Border Contextual</mui-link> tokens</mui-body>
-          </spec-card>
-
-          <spec-card title="Image" github="https://github.com/michaeltrilford/muibook/blob/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-image/index.ts">
-            <mui-body size="x-small" class="reference" slot="body">Refer to <mui-link size="x-small" href="/#/contextual-design-tokens">Text Contextual</mui-link> tokens</mui-body>
-            <mui-body size="x-small" class="reference" slot="body">Refer to <mui-link size="x-small" href="/#/surface-design-tokens">Surface</mui-link> tokens</mui-body>
-          </spec-card>
-
-          <spec-card title="Code" github="https://github.com/michaeltrilford/muibook/blob/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-code/index.ts">
-            <mui-body size="x-small" class="reference" slot="body">Refer to <mui-link size="x-small" href="/#/contextual-design-tokens">Text Contextual</mui-link> tokens</mui-body>
-            <mui-body size="x-small" class="reference" slot="body">Refer to <mui-link size="x-small" href="/#/surface-design-tokens">Surface</mui-link> tokens</mui-body>
-          </spec-card>
-
-          <spec-card title="Alert" github="https://github.com/michaeltrilford/muibook/blob/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-alert/index.ts">
-            <story-token-slat slot="body" token="--alert-radius" variant="radius" output="var(--radius-100)"></story-token-slat>
-            <mui-body size="x-small" class="reference" slot="body">Refer to <mui-link size="x-small" href="/#/semantic-design-tokens">Feedback Semantic</mui-link> tokens</mui-body>
-          </spec-card>
-
-          <spec-card title="Message" github="https://github.com/michaeltrilford/muibook/blob/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-message/index.ts">
-            <story-token-slat slot="body" token="--message-radius" variant="radius" output="var(--radius-150)"></story-token-slat>
-            <mui-body size="x-small" class="reference" slot="body">Refer to <mui-link size="x-small" href="/#/semantic-design-tokens">Feedback Semantic</mui-link> tokens</mui-body>
-          </spec-card>
-
-          <spec-card title="Button" description="Button uses the 'Action' tokens to define the visual behavior of call-to-action button elements." github="https://github.com/michaeltrilford/muibook/blob/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-button/index.ts">
-            <mui-body size="x-small" class="reference" slot="body">Refer to <mui-link size="x-small" href="/#/semantic-design-tokens">Action Semantic</mui-link> tokens</mui-body>
-          </spec-card>
-
-          <spec-card title="Link Button" description="Link button uses the 'Action' tokens to define the visual behavior of call-to-action button elements." github="https://github.com/michaeltrilford/muibook/blob/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-link/index.ts">
-            <mui-body size="x-small" class="reference" slot="body">Refer to <mui-link size="x-small" href="/#/semantic-design-tokens">Action Semantic</mui-link> tokens</mui-body>
-          </spec-card>
-
-          <spec-card title="Link Default" github="https://github.com/michaeltrilford/muibook/blob/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-link/index.ts">
-            <story-token-slat slot="body" token="--link-text-color-default" variant="text-color" output="var(--grey-900)"></story-token-slat>
-            <story-token-slat slot="body" token="--link-text-color-default-hover" variant="text-color" output="var(--grey-1000)"></story-token-slat>
-            <story-token-slat slot="body" token="--link-text-color-default-focus" variant="text-color" output="var(--grey-1000)"></story-token-slat>
-            <story-token-slat slot="body" token="--link-text-color-default-disabled" variant="text-color" output="var(--grey-800)"></story-token-slat>
-          </spec-card>
-
-          <spec-card title="Heading" github="https://github.com/michaeltrilford/muibook/blob/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-heading/index.ts">
-            <story-token-slat slot="body" token="--heading-text-color" variant="text-color" output="var(--grey-1000)"></story-token-slat>
-            <story-token-slat slot="body" token="--heading-font-weight" variant="font-weight" output="var(--font-weight-bold)"></story-token-slat>
-
-            <story-token-slat slot="body" token="--heading-font-size-100" variant="text-size" line-height="--heading-line-height-100" font-weight="--heading-font-weight" output="var(--font-size-600)"></story-token-slat>
-            <story-token-slat slot="body" token="--heading-font-size-200" variant="text-size" line-height="--heading-line-height-200" font-weight="--heading-font-weight" output="var(--font-size-500)"></story-token-slat>
-            <story-token-slat slot="body" token="--heading-font-size-300" variant="text-size" line-height="--heading-line-height-300" font-weight="--heading-font-weight" output="var(--font-size-400)"></story-token-slat>
-            <story-token-slat slot="body" token="--heading-font-size-400" variant="text-size" line-height="--heading-line-height-400" font-weight="--heading-font-weight" output="var(--font-size-300)"></story-token-slat>
-            <story-token-slat slot="body" token="--heading-font-size-500" variant="text-size" line-height="--heading-line-height-500" font-weight="--heading-font-weight" output="var(--font-size-200)"></story-token-slat>
-            <story-token-slat slot="body" token="--heading-font-size-600" variant="text-size" line-height="--heading-line-height-600" font-weight="--heading-font-weight" output="var(--font-size-100)"></story-token-slat>
-
-            <story-token-slat slot="body" token="--heading-line-height-100" variant="line-height" font-size="--heading-font-size-100" font-weight="--heading-font-weight" output="var(--line-height-600)"></story-token-slat>
-            <story-token-slat slot="body" token="--heading-line-height-200" variant="line-height" font-size="--heading-font-size-200" font-weight="--heading-font-weight" output="var(--line-height-500)"></story-token-slat>
-            <story-token-slat slot="body" token="--heading-line-height-300" variant="line-height" font-size="--heading-font-size-300" font-weight="--heading-font-weight" output="var(--line-height-400)"></story-token-slat>
-            <story-token-slat slot="body" token="--heading-line-height-400" variant="line-height" font-size="--heading-font-size-400" font-weight="--heading-font-weight" output="var(--line-height-300)"></story-token-slat>
-            <story-token-slat slot="body" token="--heading-line-height-500" variant="line-height" font-size="--heading-font-size-500" font-weight="--heading-font-weight" output="var(--line-height-200)"></story-token-slat>
-            <story-token-slat slot="body" token="--heading-line-height-600" variant="line-height" font-size="--heading-font-size-600" font-weight="--heading-font-weight" output="var(--line-height-100)"></story-token-slat>
-          </spec-card>
-
-          <spec-card title="Body" github="https://github.com/michaeltrilford/muibook/blob/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-card/body/index.ts">
-            <mui-body size="x-small" class="reference" slot="body">Refer to <mui-link size="x-small" href="/#/contextual-design-tokens">Text Contextual</mui-link> tokens</mui-body>
-          </spec-card>
-
-          <spec-card title="Label" github="https://github.com/michaeltrilford/muibook/blob/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-input/index.ts">
-            <mui-body size="x-small" class="reference" slot="body">Refer to <mui-link size="x-small" href="/#/contextual-design-tokens">Text Contextual</mui-link> tokens</mui-body>
-          </spec-card>
-
-          <spec-card title="List" github="https://github.com/michaeltrilford/muibook/tree/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-list">
-            <mui-body size="x-small" class="reference" slot="body">Refer to <mui-link size="x-small" href="/#/contextual-design-tokens">Text Contextual</mui-link> tokens</mui-body>
-          </spec-card>
-
-
-
-        </mui-v-stack>
-
-      </story-template>
-    `}}customElements.define("tokens-components",o);

package/dist/muibook/assets/contextual-D648xs_u.js

@@ -1,59 +0,0 @@
-class e extends HTMLElement{constructor(){super();const t=this.attachShadow({mode:"open"}),o=`
-      :host { display: block; }
-    `;t.innerHTML=`
-      <style>${o}</style>
-
-      <story-template 
-        title="Contextual"
-        description="Apply a base or semantic token to a specific use case or UI context."
-        figma="https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=3-527&t=fSFYVey9aCoE5oQa-1"
-        github="https://github.com/michaeltrilford/muibook/blob/main/src/css/mui-tokens.css"
-      >
-        <mui-v-stack space="var(--space-700)">
-
-          <spec-card title="Text">
-            <story-token-slat slot="body" token="--text-color" variant="text-color" output="var(--grey-900)"></story-token-slat>
-
-            <story-token-slat slot="body" token="--text-font-size" variant="text-size" line-height="--text-line-height" output="var(--text-font-size-m)"></story-token-slat>
-            <story-token-slat slot="body" token="--text-line-height" variant="line-height" font-size="--text-font-size" output="var(--text-line-height-m)"></story-token-slat>
-
-            <story-token-slat slot="body" token="--text-line-height-xs" variant="line-height" font-size="--text-font-size-xs" output="var(--line-height-25)"></story-token-slat>
-            <story-token-slat slot="body" token="--text-line-height-s" variant="line-height" font-size="--text-font-size-s" output="var(--line-height-50)"></story-token-slat>
-            <story-token-slat slot="body" token="--text-line-height-m" variant="line-height" font-size="--text-font-size-m" output="var(--line-height-100)"></story-token-slat>
-            <story-token-slat slot="body" token="--text-line-height-l" variant="line-height" font-size="--text-font-size-l" output="var(--line-height-200)"></story-token-slat>
-
-            <story-token-slat slot="body" token="--text-font-size-xs" variant="text-size" line-height="--text-line-height-xs" output="var(--font-size-25)"></story-token-slat>
-            <story-token-slat slot="body" token="--text-font-size-s" variant="text-size" line-height="--text-line-height-s" output="var(--font-size-50)"></story-token-slat>
-            <story-token-slat slot="body" token="--text-font-size-m" variant="text-size" line-height="--text-line-height-m" output="var(--font-size-100)"></story-token-slat>
-            <story-token-slat slot="body" token="--text-font-size-l" variant="text-size" line-height="--text-line-height-l" output="var(--font-size-200)"></story-token-slat>
-          </spec-card>
-
-          <spec-card title="Font Weight">
-            <story-token-slat slot="body" token="--font-weight-regular" variant="font-weight" output="var(--font-weight-400)"></story-token-slat>
-            <story-token-slat slot="body" token="--font-weight-medium" variant="font-weight" output="var(--font-weight-500)"></story-token-slat>
-            <story-token-slat slot="body" token="--font-weight-semi-bold" variant="font-weight" output="var(--font-weight-600)"></story-token-slat>
-            <story-token-slat slot="body" token="--font-weight-bold" variant="font-weight" output="var(--font-weight-700)"></story-token-slat>
-          </spec-card>
-
-          <spec-card title="Border">
-          <story-token-slat slot="body" token="--border-color" variant="border-color" output="var(--grey-200)"></story-token-slat>
-          <story-token-slat slot="body" token="--border-thin" variant="border" output="var(--stroke-size-100) var(--stroke-solid)
-          var(--border-color)"></story-token-slat>
-          <story-token-slat slot="body" token="--border-thick" variant="border" output="var(--stroke-size-200) var(--stroke-solid)
-          var(--border-color)"></story-token-slat>
-          </spec-card>
-
-          <spec-card title="Outline">
-           <story-token-slat slot="body" token="--outline-color" variant="outline-color" output="var(--blue-500)"></story-token-slat>  
-          <story-token-slat slot="body" token="--outline-thin" variant="outline" output="var(--stroke-size-100) var(--stroke-outset)
-          var(--outline-color)"></story-token-slat>
-          <story-token-slat slot="body" token="--outline-medium" variant="outline" output="var(--stroke-size-200) var(--stroke-outset)
-          var(--outline-color)"></story-token-slat>
-          <story-token-slat slot="body" token="--outline-thick" variant="outline" output="var(--stroke-size-300) var(--stroke-outset)
-          var(--outline-color)"></story-token-slat>
-          </spec-card>
-
-        </mui-v-stack>
-
-      </story-template>
-    `}}customElements.define("tokens-contextual",e);

package/dist/muibook/assets/image-1080-Bg-8LoSs.js

@@ -1 +0,0 @@
-const a="/image-1080.png";export{a as I};